🗺️ Space-Map Modernization Plan

Last Updated: November 14, 2025
Status: 🎯 MODERNIZATION PLAN
Purpose: Transform space-map into navigation/analytics tool while modular-universe handles construction

🎯 STRATEGIC VISION

Decision (from DECISIONS-REFRESHED-NOV-2025.md): Dual-Track Approach

TRACK 1: space-map (Navigation & Analytics)
- Purpose: Navigate universe structure, view analytics
- Focus: Read-only views, reporting, monitoring
- Status: Maintain and enhance gradually

TRACK 2: modular-universe (Builder & Construction)
- Purpose: Visual grid-based construction
- Focus: Create, edit, configure structures
- Status: Rapid development (PRIMARY)

Key Insight: They serve different but complementary purposes!

📊 CURRENT STATE

What space-map Does Today

apps/gograb-space/src/app/space-map/ (routes)
libs/libs-structural/space-map-lib/ (library)

Routes:
- /space/:spaceSlug/space-map                     → Overview
- /space/:spaceSlug/space-map/:universeId         → Universe detail
- /space/:spaceSlug/space-map/:universeId/:galaxyId → Galaxy detail
- /space/:spaceSlug/space-map/:universeId/:galaxyId/:worldId → World detail
- /space/:spaceSlug/space-map/:universeId/analytics → Analytics

Components:
- space-overview.component      # List all universes
- universe-detail.component     # Universe info/stats
- galaxy-detail.component       # Galaxy navigation
- world-detail.component        # World pages
- universe-analytics.component  # Analytics dashboard

Issues with Current Implementation

1. Static Welcome Screen - Doesn't reflect actual universe data
2. Canvas View - Disconnected, modules don't persist properly
3. Layout System - Incomplete, no real grid management
4. Module Library - Drag-drop doesn't integrate with system

🎯 MODERNIZATION STRATEGY

Transform space-map into Navigation/Analytics Hub

New Purpose:

space-map = Universe Navigator + Analytics Dashboard

NOT for construction → Use modular-universe
YES for navigation → Browse universe structure
YES for analytics → Monitor performance
YES for management → Manage deployed universes

Architecture Realignment

USER WORKFLOW:

1. CREATE universe
   → Dashboard (create universe wizard)

2. STRUCTURE universe
   → modular-universe ✨ (cutting mechanic, grid builder)

3. VIEW/NAVIGATE structure
   → space-map 🗺️ (read-only navigation)

4. ANALYZE performance
   → space-map 🗺️ (analytics dashboards)

5. MANAGE deployment
   → space-management (admin tools)

📋 MODERNIZATION PHASES

Phase 1: Remove Construction Features

Actions:

• Remove canvas editing mode
• Remove module drag-drop
• Remove layout editor
• Keep only read-only views

Outcome: space-map becomes view-only

Phase 2: Enhance Navigation

Add/Improve:

Universe Overview:
- Grid/List view of all universes
- Quick stats (pages, modules, deployments)
- Search and filter
- "Edit Structure" button → Opens modular-universe

Universe Detail:
- Visual tree representation
- Module hierarchy display
- Section breakdown
- "Edit in Modular-Universe" link

Galaxy Detail:
- Sub-galaxy navigation
- Module assignments
- Route structure
- Performance metrics

World Detail:
- Page listings
- Widget inventory
- Content summary

Phase 3: Add Analytics

New Analytics Features:

Universe Analytics Dashboard:
- Module usage statistics
- Section performance
- Load times per section
- Module efficiency scores
- Storage usage
- API call metrics

Galaxy Analytics:
- Page view statistics
- Popular routes
- User flow analysis
- Conversion funnels

World Analytics:
- Page performance
- Widget usage
- Content engagement

Phase 4: Integration with Modular-Universe

Bi-directional Links:

// In space-map (navigation view)
<button (click)="editInModularUniverse(universeId)">
  Edit Structure in Modular Universe Builder
</button>

// Navigates to:
/space/:spaceSlug/modular-universe?universe={universeId}

// In modular-universe (builder view)
<button (click)="viewInSpaceMap(universeId)">
  View Navigation & Analytics
</button>

// Navigates to:
/space/:spaceSlug/space-map/:universeId

Shared Services:

// Both consume UniversalModuleService
moduleService.query({ universeId });

// Both read from storage
storage.getFromUniverse(spaceId, universeId, 'layout');

// space-map: Read-only
// modular-universe: Read-write

🛠️ IMPLEMENTATION SPECIFICATION

Updated Components

1. Space Overview (Enhanced)

// space-overview.component.ts
@Component({
  selector: 'lib-space-overview',
  standalone: true
})
export class SpaceOverviewComponent {
  universes = signal<UniverseListItem[]>([]);
  viewMode = signal<'grid' | 'list'>('grid');
  
  async loadUniverses() {
    const data = await this.moduleService.query({ type: 'universe' });
    this.universes.set(data.map(u => ({
      id: u.id,
      name: u.name,
      moduleCount: u.children?.length || 0,
      lastModified: u.updatedAt,
      deploymentStatus: u.deploymentStatus,
      thumbnail: u.thumbnail
    })));
  }
  
  editInModularUniverse(universeId: string) {
    this.router.navigate([
      '/space',
      this.spaceSlug,
      'modular-universe'
    ], {
      queryParams: { universe: universeId }
    });
  }
}

2. Universe Detail (Read-Only Tree)

// universe-detail.component.ts
@Component({
  selector: 'lib-universe-detail',
  standalone: true
})
export class UniverseDetailComponent {
  universe = signal<UniversalModule | null>(null);
  moduleTree = signal<ModuleTreeNode[]>([]);
  
  async loadUniverse(universeId: string) {
    // Load universe data
    const universe = await this.moduleService.get(universeId);
    this.universe.set(universe);
    
    // Build tree
    const tree = await this.moduleService.getModuleTree(universeId);
    this.moduleTree.set(tree);
  }
  
  editStructure() {
    this.router.navigate([
      '/space',
      this.spaceSlug,
      'modular-universe'
    ], {
      queryParams: { universe: this.universe()?.id }
    });
  }
}

3. Universe Analytics (New)

// universe-analytics.component.ts
@Component({
  selector: 'lib-universe-analytics',
  standalone: true
})
export class UniverseAnalyticsComponent {
  metrics = signal<UniverseMetrics>({
    totalModules: 0,
    totalPages: 0,
    totalWidgets: 0,
    storageUsed: 0,
    avgLoadTime: 0,
    deploymentStatus: 'not-deployed'
  });
  
  moduleUsageChart = computed(() => {
    // Generate chart data from metrics
  });
  
  async loadAnalytics(universeId: string) {
    const analytics = await this.analyticsService.getUniverseAnalytics(universeId);
    this.metrics.set(analytics);
  }
}

📊 ROUTE STRUCTURE

Updated Routes

// space-map.routes.ts (modernized)

export const SpaceMapRoutes: Routes = [
  {
    path: '',
    loadComponent: () => import('./components/space-overview/space-overview.component')
      .then(m => m.SpaceOverviewComponent),
    title: 'Universe Navigator'
  },
  {
    path: ':universeId',
    loadComponent: () => import('./components/universe-detail/universe-detail.component')
      .then(m => m.UniverseDetailComponent),
    title: 'Universe Detail'
  },
  {
    path: ':universeId/analytics',
    loadComponent: () => import('./components/universe-analytics/universe-analytics.component')
      .then(m => m.UniverseAnalyticsComponent),
    title: 'Universe Analytics'
  },
  {
    path: ':universeId/:galaxyId',
    loadComponent: () => import('./components/galaxy-detail/galaxy-detail.component')
      .then(m => m.GalaxyDetailComponent),
    title: 'Galaxy Navigator'
  },
  {
    path: ':universeId/:galaxyId/:worldId',
    loadComponent: () => import('./components/world-detail/world-detail.component')
      .then(m => m.WorldDetailComponent),
    title: 'World Navigator'
  }
];

🎯 SUCCESS METRICS

Technical

• All construction features removed
• Read-only views performant (< 100ms)
• Analytics data accurate
• Integration with modular-universe seamless

User Experience

• Navigate universe: < 2 seconds to load
• Edit link visible: 1 click to modular-universe
• Analytics useful: Clear insights
• No confusion: Clear purpose separation

Status: ✅ PLAN COMPLETE
Next Action: Phase 1 - Remove construction features
Timeline: 2-3 weeks
Last Updated: November 14, 2025