feat(web): 2D directional dependency-graph renderer (TASK-1783) - #720
Merged
Conversation
Add ItemGraph.svelte — a reusable, self-contained component that renders a single item's dependency neighborhood as a 2D layered graph (parents above, children below) via dagre layout + SVG. - Lazy-imports @dagrejs/dagre so the layout lib stays out of the main bundle (confirmed split into its own chunk). - Fetches via api.graph.getFocused; re-roots on an internal currentFocus so clicking a non-focus node navigates the chain, clicking the focus node (or Open ↗) opens it. Depth (1–5) selector + include-done toggle; breadcrumb back to the original root. - Edge styling by type (hierarchy tethers, red directional blocks arrows, faint wiki-link dashes, muted others); collection-colored nodes with focus highlight + dimmed terminals; pan/zoom + fit-to-content; legend and a truncation notice. - Reactivity follows CONVE-1688 (loadToken guard, no read+write of one rune in an effect) and CONVE-606 (data-load effect split from prop-sync). Extract the collection palette into a shared $lib/graph/palette.ts and point the 3D workspace graph at it too, so both views agree on collection colors. Parent: PLAN-1780.
…per Codex review (round 1)
- P1: 'parent'/'implements' edges are child→parent in the API, so feeding
them to dagre as-is put children above parents under rankdir TB. Reverse
those edges for layout ranking only; rendered edges keep true source→target
so 'blocks' arrowheads still point correctly.
- P2: unfocused node border used a JS string literal with an un-interpolated
{n.color}, yielding an invalid CSS color and a dropped stroke. Use a
template literal so the collection tint actually applies.
Parent: PLAN-1780.
2 tasks
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
Adds
ItemGraph.svelte— a reusable component that renders a single item's dependency neighborhood as a 2D layered/directional graph (parents above, children below) using dagre for layout and SVG for rendering. This is the renderer for the per-item graph view (PLAN-1780); the drawer + item-header button that mount it are the next task (TASK-1784).Details
@dagrejs/dagreis dynamically imported inside the layout function, so it lands in its own chunk and stays out of the main bundle (verified).api.graph.getFocused(TASK-1782). Re-roots on an internalcurrentFocus— clicking a non-focus node navigates the dependency chain; clicking the focus node (or the Open ↗ button) callsonOpenItem. Depth (1–5) selector, include-done toggle, breadcrumb back to the original root.blocksarrows with arrowhead markers, faintwiki-linkdashes, muted others); collection-colored nodes with a focus highlight and dimmed terminals; pan (drag) + zoom (wheel) + fit-to-content; collection legend; truncation notice when the server capped the neighborhood.loadTokenguard so the load effect never read+writes the same rune; stale responses discarded) and CONVE-606 (data-load effect kept separate from the prop-sync effect).$lib/graph/palette.tsand pointed the existing 3D workspace graph at it too, so both views agree on which collection gets which color.Context
Implements
TASK-1783underPLAN-1780. Consumes the backend (TASK-1781, #718) and client (TASK-1782, #719).Test plan