D3.js topology graph component

[HerbHall]

Description

Build the flagship D3.js force-directed topology graph component. Containers as rounded rectangle nodes, networks as colored zones, edges for connections.

Deliverables

• ui/src/components/TopologyGraph.tsx — D3 force simulation, SVG rendering, zoom/pan
• Green/earthy color palette (bridge=#4CAF50, overlay=#8BC34A, host=#795548, container=#33691E)
• Click handler to select nodes (wired to parent state)
• Responsive sizing within MUI layout

Technical Notes

• D3 owns SVG via useRef + useEffect. React manages data flow only.
• Use mock topology data for development (real API wired in D3.js topology graph component #6)
• Force simulation: networks as large fixed nodes, containers attracted to their networks

Acceptance Criteria

• Graph renders with mock data showing networks + containers
• Zoom and pan work
• Click on node triggers selection callback
• npx tsc --noEmit && npx eslint . pass

Wave

Wave 2 (parallel with #3). Depends on #4.