Add interactive network topology visualizer with force-directed layout

[Copilot]

Implements a canvas-based system topology map visualizing all Heady verticals, infrastructure components, and their connections with real-time data flow animations.

Implementation

Network Graph Engine (network-graph.js)

• Force-directed physics: Implements repulsion between nodes, attraction along edges, and center gravity for automatic layout
• Three layout algorithms: Force-directed (default), hierarchical (3-tier), circular (radial)
• Canvas rendering: 60fps animation loop via RequestAnimationFrame with high-DPI support
• Particle system: Animated data packets flowing along edges to visualize bidirectional/unidirectional data flow
• Event handling: Mouse/touch/keyboard interactions with drag-drop, zoom (0.5x-3x), pan, and selection

Node System

11 nodes total: 1 core (Heady Core), 7 verticals (Make, Field, Legacy, Kinetic, Bio, Ed, Guard), 3 infrastructure (MCP Gateway, Authentik, Database)

Real-time features:

• Activity-based pulsing (amplitude scales with node.activity 0-1)
• Health status indicators with color-coded glow effects
• Status updates every 5 seconds

UI Components (system-map.html, system-map.css)

• Control panel: Zoom controls, layout mode switcher, node type filters, legend
• Detail panel: Slides in on node click showing status, uptime, connected nodes (clickable), activity timeline, quick actions
• Tooltips: Hover overlay with real-time status/activity data
• Responsive: Adapts to mobile with touch gestures (pinch zoom, drag pan)

Navigation Integration

Added System Map link (🗺️) to main dashboard navigation in index.html

Screenshots

Force-Directed Layout

Node Detail Panel

Hierarchical Layout

Circular Layout

Technical Notes

• Zero external dependencies (pure Canvas/JS)
• Physics timestep: 0.85 velocity damping for stability
• Node radius: 40px (core), 30px (verticals/infra)
• Particle speed: configurable multiplier (default 0.5)
• Keyboard accessible: Arrow keys move selected node, ESC closes panels

Original prompt

Add Interactive System Map and Network Topology Visualizer

Context

Building on the existing Heady Admin UI, we need to add an interactive system map that visualizes the connections between all Heady verticals, showing real-time data flow, health status, and dependency relationships.

Tasks

1. System Map Page (HeadySystems_v13/apps/heady_admin_ui/system-map.html)

Create a dedicated system topology page with:

• Interactive canvas-based network graph
• Zoom and pan controls
• Node details on hover/click
• Real-time connection status animations
• Filtering by vertical type or status

2. Network Graph Component (HeadySystems_v13/apps/heady_admin_ui/js/network-graph.js)

Create an interactive force-directed graph:

• Nodes: Each Heady vertical as a node with icon
• Edges: Data flow connections between verticals
• Animations:
  • Pulsing nodes based on activity level
  • Animated data packets flowing along edges
  • Color-coded connection health (green/yellow/red)
• Interactions:
  • Drag nodes to reposition
  • Click to expand/collapse node details
  • Double-click to navigate to vertical dashboard
  • Hover for quick stats tooltip

3. Node Types and Data

Define the following nodes:

const nodes = [
  { id: 'core', label: 'Heady Core', icon: '⚡', type: 'core' },
  { id: 'make', label: 'HeadyMake', icon: '🏭', type: 'vertical' },
  { id: 'field', label: 'HeadyField', icon: '🌾', type: 'vertical' },
  { id: 'legacy', label: 'HeadyLegacy', icon: '👤', type: 'vertical' },
  { id: 'kinetic', label: 'HeadyKinetic', icon: '🔥', type: 'vertical' },
  { id: 'bio', label: 'HeadyBio', icon: '🧬', type: 'vertical' },
  { id: 'ed', label: 'HeadyEd', icon: '📚', type: 'vertical' },
  { id: 'guard', label: 'HeadyGuard', icon: '🛡️', type: 'vertical' },
  { id: 'mcp', label: 'MCP Gateway', icon: '🌐', type: 'infrastructure' },
  { id: 'auth', label: 'Authentik', icon: '🔐', type: 'infrastructure' },
  { id: 'db', label: 'Database', icon: '💾', type: 'infrastructure' }
];

4. Connection Definitions

const edges = [
  { from: 'core', to: 'make', dataFlow: 'bidirectional' },
  { from: 'core', to: 'field', dataFlow: 'bidirectional' },
  { from: 'core', to: 'legacy', dataFlow: 'bidirectional' },
  { from: 'core', to: 'kinetic', dataFlow: 'bidirectional' },
  { from: 'core', to: 'bio', dataFlow: 'bidirectional' },
  { from: 'core', to: 'ed', dataFlow: 'bidirectional' },
  { from: 'core', to: 'guard', dataFlow: 'bidirectional' },
  { from: 'mcp', to: 'core', dataFlow: 'inbound' },
  { from: 'auth', to: 'mcp', dataFlow: 'outbound' },
  { from: 'db', to: 'core', dataFlow: 'bidirectional' },
  { from: 'guard', to: 'auth', dataFlow: 'outbound' },
  { from: 'legacy', to: 'auth', dataFlow: 'outbound' }
];

5. System Map Styles (HeadySystems_v13/apps/heady_admin_ui/css/system-map.css)

• Node styles with gradient backgrounds matching vertical themes
• Edge styles with animated dashed lines for data flow
• Tooltip styles with glassmorphism
• Control panel styles (zoom, filter, legend)
• Responsive layout for different screen sizes

6. Control Panel Features

• Zoom Controls: +/- buttons and slider
• View Modes:
  • Topology view (force-directed)
  • Hierarchical view (tree layout)
  • Circular view (radial layout)
• Filters:
  • Show/hide by type (verticals, infrastructure)
  • Filter by status (healthy, warning, error)
• Legend: Color-coded status indicators

7. Real-Time Updates

• Simulate real-time data flow with animated particles
• Update node status every 5 seconds
• Show connection latency on hover
• Display throughput metrics on edges

8. Node Detail Panel

When clicking a node, show side panel with:

• Vertical name and description
• Current status and uptime
• Connected nodes list
• Recent activity timeline
• Quick actions (navigate, restart, view logs)

9. Update Navigation

In HeadySystems_v13/apps/heady_admin_ui/index.html:

• Add "System Map" link to navigation with icon (🗺️)

Technical Requirements

• Pure Canvas/JavaScript (no external graph libraries)
• Smooth 60fps animations using RequestAnimationFrame
• Force-directed layout algorithm for automatic positioning
• Touch support for mobile (pinch to zoom, drag to pan)
• Keyboard navigation (arrow keys to move between nodes)
• Dark/light theme support

File Structure

HeadySystems_v13/apps/heady_admin_ui/
├── system-map.html (NEW)
├── css/
│   └── system-map.css (NEW)
├── js/
│   └── network-graph.js (NEW)
└── index.html (UPDATE - add nav link)

Success Criteria

• System map renders all verticals as interactive nodes
• Connections show animated data flow
• Nodes can be dragged and repositioned
• Clicking nodes shows detail panel
• Real-time status updates work correctly
• Responsive on all screen sizes
• Smooth animations at 60fps
• Accessible with keyboard navigation

This pull request was created from Copilot chat.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.