Replaced React state-driven animation with ECharts graph rendering.
Previous approach re-rendered 263+ SVG nodes via setState in rAF loop,
causing browser lockup. New approach uses ECharts which handles force
layout and rendering natively at scale.
Changes:
- Switch from D3 force sim + React state to ECharts graph
- Remove particle animation (was fake random noise, not real packets)
- Filter out nodes with zero edges by default
- Add filter controls: Connected, Infra, All
- ECharts handles zoom/pan/drag natively (roam: true)
- Node selection dims unrelated nodes
- Force config matches Meshview: repulsion 200, edgeLength [80,120]
- Animation disabled for performance (animation: false)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Vite + React 18 + TypeScript + Tailwind CSS
- Dashboard overview with health gauge, pillar bars, alerts
- WebSocket hook for real-time updates
- Layout with sidebar navigation and live indicator
- Placeholder pages for Mesh, Environment, Config, Alerts
- Dark theme ops center aesthetic with JetBrains Mono
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
