Commit 771d102
authored
feat(web): 2D directional dependency-graph renderer (TASK-1783) (#720)
* feat(web): 2D directional dependency-graph renderer (TASK-1783)
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.
* fix(web): correct hierarchy layout direction + node border color-mix 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.1 parent f45a45a commit 771d102
5 files changed
Lines changed: 838 additions & 12 deletions
File tree
- web
- src
- lib
- components/graph
- graph
- routes/[username]/[workspace]/graph
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
36 | 36 | | |
37 | 37 | | |
38 | 38 | | |
| 39 | + | |
39 | 40 | | |
40 | 41 | | |
41 | 42 | | |
| |||
0 commit comments