Perf S5: extreme-zoom dot mode — hide edges, halve painted els (whole-graph pan 13→30)#71
Merged
Merged
Conversation
… (whole-graph pan 13→30, zoom 10→21)
The earlier stages proved the whole-graph view is PAINT-bound: the browser
composites every visible SVG element each time the pan/zoom transform changes,
and a JS-side handler throttle did nothing (rejected). The only lever left is
painting fewer elements.
Below DOT_SCALE (0.2) on a dense graph — i.e. the whole-graph "fit" view — edges
are sub-pixel hairlines that convey little but are ~half of what's painted after
simplify. Dot mode (`data-dots`) hides all edges + their hitboxes via CSS and
skips the entire 1400-edge per-tick positioning pass (dotModeRef early-return in
updateEdgePositions). Each node is already just its colored card from S4, so the
overview becomes a clean card grid. Edges + full detail return as you zoom in
past the threshold (verified: fit → 0 edges; zoomed-in → edges + detail restored).
This completes the LOD ladder the user asked for ("remove buttons and simplify
nodes as we zoom out"): full detail (zoomed in) → card only, no buttons (S4,
<0.45) → dots, no edges (S5, <0.2).
Measured (Compute Core, 1000n/1400e, serial), whole-graph fit view:
painted els ~2400 → 1000
pan FPS ~13 → 30 (HIGH) / 33 (LOW)
zoom FPS 10.5 → 21 / 22
drag FPS 3 → 15 / 8
idle FPS 60 (preserved)
profiler adds data-dots + paintedEls + a pan-FPS measurement.
Verified: web typecheck 0; THE GATE 5/5; node-inspector + hierarchy-navigation
green (zoomed-in detail/edges restore correctly).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
🧪 Comprehensive Test Suite
Full-stack smoke gate runs in the CI workflow. |
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.
Final stage of the measured large-graph perf effort (follows #68, #69, #70)
Earlier stages proved the whole-graph view is paint-bound — the browser
composites every visible SVG element on each pan/zoom transform change, and a
JS-side handler throttle did nothing (measured, rejected). The only lever left is
painting fewer elements.
Change — "dot mode"
Below scale 0.2 on a dense graph (the whole-graph fit view), edges are
sub-pixel hairlines but ~half of what's painted after simplify.
data-dots:updateEdgePositionsearly-returns (skips the 1400-edge per-tick pass).Each node is already just its colored card (S4), so the overview becomes a clean
card grid. Edges + full detail return as you zoom in past the threshold
(verified: fit → 0 edges visible; zoomed-in → 18 edges + full detail restored).
Completes the LOD ladder you asked for ("remove buttons and simplify nodes as we
zoom out"): full detail → card-only/no-buttons (S4, <0.45) → dots/no-edges (<0.2).
Result (Compute Core, 1000n/1400e, serial profiler)
Visuals
Dot-mode fit view = tidy card grid (no buttons/edges/detail); zooming in restores
titles, status/priority bars, buttons, edges with labels + arrows. Screenshots
verified.
Verification
node-inspector+hierarchy-navigationgreen (zoomed-in interaction intact)🤖 Generated with Claude Code