UI Fix: Topology View Centering & Edge Label Overlap#110
Open
antoncxx wants to merge 3 commits into
Open
Conversation
Use useLayoutEffect to measure container vs content height before first paint and set an initial ty offset that vertically centers the SVG. Also updates resetZoom to return to the centered home position rather than the raw top-left origin.
useLayoutEffect only ran once on mount, so adding new nodes (internet, proxy) after a session was created left the view clipped at the old offset. Add a ResizeObserver on the content div that recomputes the centered home position whenever the SVG height changes. prevContentH is seeded in the layout effect so the observer skips its initial fire and only triggers on real graph changes.
Three labels (src IP, VNI box, dst IP) were all positioned at similar y-coordinates, causing them to stack on top of each other. For vertical edges (proxy→service, V_GAP=70px): the combined label height was 76px, guaranteed to overflow. Shrank VNI box from 48→32px and tightened src/dst anchor offsets so all three fit cleanly with ~7px gaps between them. For horizontal edges: all three labels shared the same midY±16 band. Redesigned to stack vertically — src above the VNI box, dst below — so they never collide regardless of horizontal gap width. Also normalized all src/dst label rects to use textAnchor=middle (rect was already centered but anchor was sometimes start/end, misaligning text inside the background box).
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
1 participant
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.
Summary
This PR fixes two visual issues in the topology graph view — one affecting the initial layout and dynamic graph updates, the other affecting focused-client edge annotations.
Changes
1. Center topology graph within ZoomFrame (
ZoomFrame.tsx)Problem: The topology SVG was anchored to the top-left corner of the ZoomFrame container. Depending on the graph aspect ratio, this left significant empty space at the bottom and made the graph look misaligned.
Fix:
useLayoutEffectthat measures the container height vs. the rendered SVG height before first paint and computes a centeredtyoffset. UsinguseLayoutEffect(vs.useEffect) prevents a visible flash on load.ResizeObserveron the content div that re-fits the view whenever the SVG dimensions change — for example when a new session is created and internet/proxy nodes appear. Without this, the expanded graph was clipped at the old position.resetZoomnow returns to the computed centered home position instead of the raw{tx:0, ty:0}origin.ZoomFrame, so both are fixed.2. Fix overlapping edge labels on focused-client edges (
layout.ts,TopologyGraphSvg.tsx)Problem: When a connected client is selected, each focused edge renders three annotation boxes: a
srcIP label, aVNIinfo box, and adstIP label. These boxes overlapped in two ways:V_GAP = 70px): the combined label height at the old sizes was 76px — guaranteed to overflow the 70px gap between nodes, causing all three boxes to pile on top of each other.midY ± 16px, directly inside the VNI box'smidY ± 24pxrange. On short edges (H_GAP = 60px) they also overlapped horizontally.Additionally,
textAnchoron the src/dst labels was sometimesstartorendwhile the background rect was always centered onlp.src.x, misaligning the text within its own box.Fix:
134×48pxto120×32pxwith tighter line spacing (9px vs 13px). Adjusted src/dst anchor offsets so all three labels fit within the 70px gap with ~7–9px clearance between each box.srcis placed30px abovethe VNI center,dstis placed32px belowit. Labels no longer share the same vertical band regardless of horizontal gap width.textAnchor="middle"consistently, matching the centered rect positioning.