Skip to content

feat(inspector): compact graph layout via Graphviz dot node allocation - #194

Closed
antfubot wants to merge 12 commits into
antfu:mainfrom
antfubot:feat/graph-compact-dag-layout
Closed

feat(inspector): compact graph layout via Graphviz dot node allocation#194
antfubot wants to merge 12 commits into
antfu:mainfrom
antfubot:feat/graph-compact-dag-layout

Conversation

@antfubot

@antfubot antfubot commented Aug 20, 2026

Copy link
Copy Markdown
Contributor

Description

Adapts the graph node allocation from npmgraph to render a more compact dependency graph.

Like npmgraph, the node positions are now allocated by Graphviz dot (via @hpcc-js/wasm-graphviz), while keeping the existing interactive Vue renderer — the DOT document only carries node sizes and edges, and only the computed positions (json output) are read back:

  • Full-DAG-aware layering — columns are computed from every dependency edge, not just the rendered spanning tree, so shared dependencies are placed after all of their dependents.
  • Shrink-wrapped nodes — the fixed 300px min-width is gone; rendered node sizes are measured from the DOM and passed to Graphviz (npmgraph's width=0 height=0 trick), so each column is only as wide as its content. Link endpoints use per-node widths.
  • Runs in a Web Workerdot can take a few seconds on large graphs (~1s at 800 nodes, ~4s at 1500 in benchmarks), so the WASM engine runs off the main thread. The previous tidy-tree layout is kept as an instant provisional pass (and as the fallback if the layout fails), then positions refine in place when dot finishes. splines=none skips edge routing since only positions are consumed.
  • The ~2MB WASM payload is lazy-loaded inside the worker, only when the graph page is opened.

Verification

  • pnpm test (88 passed), pnpm typecheck, pnpm lint
  • Manually verified in the browser: normal + dots render modes, node selection/active links, focus scrolling, mode toggling
  • E2E dev specs weren't run here: the sandbox hits a pre-existing @nuxt/devtools alpha incompatibility at dev-server startup, unrelated to this change

This PR was created with the help of an agent.

@pkg-pr-new

pkg-pr-new Bot commented Aug 20, 2026

Copy link
Copy Markdown

Open in StackBlitz

npm i https://pkg.pr.new/node-modules-inspector@194
npm i https://pkg.pr.new/node-modules-tools@194

commit: c3a88ab

@antfubot antfubot changed the title feat(inspector): compact graph layout with layered DAG node allocation feat(inspector): compact graph layout via Graphviz dot node allocation Aug 20, 2026
@antfu antfu closed this Aug 21, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants