feat(ui): dagre layered service map — routed edges, level-of-detail, draggable#113
Merged
Conversation
…draggable Replace the radial/phyllotaxis layout with a dagre layered layout (@dagrejs/dagre, MIT) for the React Flow service map: crossing-minimised, left→right, with edge-routing waypoints so links thread between ranks and meet node borders instead of disappearing under boxes at scale. Computed synchronously — deterministic, instant at normal scale, identical in every browser. - Edges route through the dagre waypoints; endpoints pinned to each node's border (toward the adjacent waypoint) so they meet the chip edge and follow a dragged node. Capped-thin, native animated flow; failing edges carry --crit. - Level-of-detail: chips collapse to status dots below 0.62 zoom (edges switch to centre-to-centre) so the 168px boxes stop occluding the field at ~120 services. - Draggable nodes: useNodesState reconcile re-seeds on a fresh layout / topology change, and on a metric-only poll keeps drags + React Flow's measured dims. - Right side-panel autosizes to the service names (fit-content, capped), fixing the phantom horizontal scrollbar. Trade-off: dagre runs synchronously, so a ~120-service layout would block the main thread ~0.5–1.2s on mount/topology change (imperceptible at normal scale); a Web Worker is the eventual fix, deferred until needed. Verified: tsc, eslint, 377 vitest, build + budgets (ConstellationHome 72.7/76 KB gz), jscpd 0.44%, go build + vet. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LDQVJrixs2nJoea67a8pEG
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
- S2871 (reliability bug): give the shape-hash edge-key sort an explicit localeCompare comparator (a bare .sort() is an unreliable UTF-16 sort). - S7755: use Array.prototype.at(-1)/at(-2) instead of [length - n]. - S3735: drop the `void` operator on the fitView calls (block-body arrows). No behaviour change. tsc 0, eslint 0, 9 map tests, build + budgets green. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LDQVJrixs2nJoea67a8pEG
|
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.
Reworks the React Flow service map to scale to ~120 services without edges disappearing under nodes.
What changed
@dagrejs/dagre, MIT): crossing-minimised, left→right, with edge-routing waypoints. Replaces the radial/phyllotaxis layout. Computed synchronously — deterministic and identical in every browser.--crit.useNodesStatereconcile re-seeds on a fresh layout / topology change; on a metric-only poll it keeps drags + React Flow's measured dims (no full re-measure).fit-content(capped) to the service names, fixing the phantom horizontal scrollbar from the fixed 300px +overflow-y:autopromotion.Trade-off
dagre runs synchronously, so a ~120-service layout would block the main thread ~0.5–1.2s on mount / topology change (imperceptible at normal scale). A Web Worker is the eventual fix — deferred until the scale demands it (an earlier worker attempt was reverted for cross-browser fragility).
Validation
tsc 0 · eslint 0 · 377 vitest · build + budgets (ConstellationHome 72.7/76 KB gz) · jscpd 0.44% ·
go build+go vet· headless screenshots confirm 7 services render, edges meet borders, a dragged node's edge follows.🤖 Generated with Claude Code