Topology: full proxy chain highlighting + node text clipping#107
Merged
GyulyVGC merged 6 commits intoJun 18, 2026
Merged
Conversation
Add GET /api/chains/{stack} endpoint that, for each live proxy session,
walks the service's proxy_deps transitively and collects the net_ids of
all downstream service-to-service tunnels. The lookup is replica-precise:
clients are keyed by source replica IP, so two proxy clients on different
replicas get independent dep chains.
Frontend uses the chain data to expand focusedNetIds when a client is
clicked, so I → P → S1 → S2 all highlight correctly instead of stopping
at S1. The Active Connections table also shows the full comma-separated
chain of net_ids for proxy rows instead of just the single proxy net_id.
EdgePanel and InternetPanel now expand proxy sessions to show all net IDs in the chain (e.g. "nets 100, 200") instead of just the proxy net ID. Falls back to singular "net N" when no downstream deps exist.
Add an inline clipPath per node so long service names and status lines no longer overflow the node rectangle. Background rect, status dot, and selection outline are unaffected. Service nodes also get a <title> so the full name is visible on hover when clipped.
antoncxx
changed the title
GyulyVGC
approved these changes
Jun 18, 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.
Problem
Clicking a client in the topology view only highlighted the direct proxy
hop (
Internet → Proxy → S1). Any downstream service-to-servicedependencies (
S1 → S2 → …) stayed dimmed, making it impossible totrace a request's full path through the graph.
Additionally, long service names overflowed the node rectangle,
overlapping adjacent nodes and edges.
Changes
Backend —
GET /api/chains/{stack}New endpoint that, for each live proxy session, walks the service's
proxy_depsbranches transitively and returns the full set of net IDsinvolved in the chain:
[ { "proxy_net_id": 100, "all_net_ids": [100, 200, 300] } ]The lookup is replica-precise: service-to-service clients are keyed
by source replica IP, so two proxy clients landing on different replicas
of the same service each get their own independent dep chain. Clients
sharing a replica share the same downstream tunnels and are represented
correctly.
Frontend — accurate chain highlight
TopologyContextfetches/api/chains/{stack}and uses it to expandfocusedNetIdswhen a client isclicked. The existing graph-traversal highlight logic then lights up
every edge in the chain, not just the proxy hop.
Frontend — chain net IDs in all three places
All three locations that display net IDs now show the full chain for
proxy sessions (e.g.
nets 100, 200) instead of the single proxy netID:
Direct service-to-service edges retain their own single net ID display
unchanged.
Frontend — node text clipping
Each service and proxy node now defines an inline SVG
<clipPath>thatmatches its bounding box (4 px inset). Text lines are rendered inside a
<g clipPath="…">so long names are clipped cleanly at the node edge.Background rect, status dot, and selection outline are outside the clip
and render normally. Service nodes also carry a
<title>so the fullname is visible on hover.