Topology UI improvements#105
Merged
Merged
Conversation
Multiple active sessions between the same two nodes now render as a single edge labeled "N sessions". Clicking it opens the drawer with a per-session card list (net_id, setup_ms). PanelState.edge carries fromId/toId/edgeIndices[] instead of a single index.
…path Clicking a client IP in the Internet side drawer filters the topology graph: edges and nodes not touched by that client's sessions are dimmed to opacity 0.1/0.12. Clicking the same IP again clears the filter. Correlation is by SessionJson.network_id === GraphEdgeJson.net_id.
Service nodes now show a third line with the first replica's IP address (monospace, dim) between the name and the active-count line. NODE_H bumped 38→50 to accommodate the extra line. Proxy nodes repositioned to stay vertically centred in the taller box.
When a client is selected in the Internet panel, each highlighted edge
renders three label groups:
- source IP pill (physical IP of the source node, near edge start)
- destination IP pill (near edge end)
- center info box: VNI {network_id}, client_net, server_net
Default session/count labels are hidden on focused edges to avoid
overlap. Layout geometry lives in new edgeLabelPoints() in layout.ts.
TopologyContext.tsx owns all data fetching (graph, services, sessions), SSE subscription, and UI state via useReducer. Derived values (focusedNetIds, focusedSessions, nodeIps, selectedEdgeKey) are memoised in the provider — components just consume them. TopologyGraph, TopologyPanel, InternetPanel are now props-free; they pull from useTopologyData() / useTopologyUI() directly. Leaf renderers (EdgePanel, ServiceNodePanel, ProxyNodePanel) keep their props — they are direct-child composition, not drilling. Topology.tsx is a thin shell: TopologyProvider wraps TopologyView, which uses dispatch() for every user interaction.
TopologyGraphSvg is a pure prop-based SVG renderer — graph required,
everything else optional with safe defaults. TopologyGraph becomes a
thin context wrapper. Dashboard drops its 80-line inline SVG copy and
uses <TopologyGraphSvg graph={graph} /> instead.
This fixes two dashboard issues for free: edge de-duplication (via the
shared buildTopoGraph) and stale node layout (circle/text positions
were written for old NODE_H=38, now consistent at 50).
Dim tspan prefixes on IP pills and center box subnet lines so values are self-explanatory without external legend.
GyulyVGC
approved these changes
Jun 16, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What changed
Edge de-duplication
Multiple sessions between the same two nodes previously drew overlapping edges and labels. Edges are now de-duplicated in
buildTopoGraphusing aMapkeyed byfrom\0to. A single edge is drawn per node pair; the side drawer lists all sessions for that pair on click. Edge labels adapt: "N sessions" for multiple, "net X · Yms" for a single session.Client focus filter
Clicking a client IP row in the Internet panel highlights only that client's path through the graph. All unrelated nodes and edges are dimmed to ~10% opacity. Clicking the same IP a second time clears the focus. The highlighted IP row gets a blue border and background to confirm the selection.
Replica IP on service nodes
Service nodes now show their replica IP address on a third line, matching the existing behaviour of proxy nodes. The IP is sourced from
service.replicas[0].ipand surfaced via anodeIps: Map<string, string>derived value in the provider.NODE_Hwas bumped from 38 → 50 to accommodate the extra line.Per-edge IP and VNI labels when a client is focused
When a client is selected, each focused edge renders three overlays:
srclabel + bright IPdstlabel + bright IPsrc <client_net>anddst <server_net>in dim mono textPill and box backgrounds use a semi-transparent dark fill so labels remain legible over the graph lines.
Context + reducer (no more prop drilling)
TopologyGraph,TopologyPanel,InternetPanel, andEdgePanelpreviously shared 8+ props through intermediate components. They now read from two React contexts:TopologyDataContext— API data (graph,services,sessions)TopologyUIContext— UI state (panel,focusedClientIp, filters, dispatch)All
useApicalls, the SSE subscription,useReducer, anduseMemoderived values live inTopologyProvider. Leaf components have zero props and focus entirely on rendering.Shared
TopologyGraphSvg— Dashboard reuseThe Dashboard previously had an 80-line inline copy of the SVG topology renderer written against the old
NODE_H=38layout. That code is gone. A newTopologyGraphSvgcomponent acceptsgraphas its only required prop and exposes optional interaction props (onNodeClick,onEdgeClick, focus state, etc.). The Dashboard passes justgraph; the full Topology page passes everything. Both get de-duplication and the corrected node height for free.src/dst labels on focused edge overlays
The IP pills and subnet lines in the center info box previously showed raw values with no indication of which end they referred to. Dim
<tspan>prefixes (src/dst) now label each value in place.