Network Health Dashboard with Topology Visualization

[JamesEjembi]

Problem Statement

Network operators need a bird's-eye view of the VeriNode network health. A network dashboard must be built showing geographic node distribution (map), peer connectivity graph (force-directed), version distribution, average latency, and network-wide event log with real-time updates.

Technical Bounds

• Node map: Mapbox GL with clustered markers; click to show node details.
• Peer graph: vis-network force-directed graph showing active connections; max 500 nodes.
• Version distribution: pie chart of client software versions across the network.
• Latency heatmap: grid showing p50/p95 latency between regions.
• Event log: real-time feed of node join/leave, version upgrades, forks, and alerts.
• Time range: 1h, 24h, 7d for all metrics.

Steps

1. Build NodeMap with Mapbox GL; cluster by geographic proximity; marker color by node status.
2. Build PeerGraph with vis-network; configure physics (barnesHut); search and highlight nodes.
3. Build VersionDistribution pie chart from /api/v1/network/versions.
4. Build LatencyHeatmap with region pairs as axes, color intensity by latency.
5. Build EventLog with WebSocket connection for real-time updates; infinite scroll.
6. Build TimeRangeSelector that drives all dashboard components.