Add more 2D graph layout algorithms

[Modsofthenation]

The 2D graph toolbar already let you pick architecture layers, edge flow, radial, or a compact grid. This extends that dropdown with five more deterministic algorithms:

• Spanning tree — forest from sources, children stacked below parents
• Concentric layers — rings by architecture layer (not BFS hops)
• Circle — every node on one ring, ordered by layer then name
• Type clusters — same-type nodes packed together, clusters around the origin
• Force directed — Fruchterman–Reingold with a short overlap-separation pass

The choice still persists in localStorage. Column layouts keep left-to-right step edges; the new ones use freeform bezier edges like radial/grid.

Tests

• UI vitest: every listed algorithm places every node; tree/circle/concentric/clusters/force geometry; invalid localStorage still falls back
• Playwright: dropdown lists all nine labels; switching to radial then force moves InvoicePage

Walkthrough

Architecture layers (existing default):

Architecture layers layout

Force directed:

Force-directed layout

Spanning tree:

Spanning tree layout

Concentric layers:

Concentric layers layout

_{To show artifacts inline, enable in settings.}

  

Summary by CodeRabbit

• New Features

  • Added tree, concentric, circle, cluster, and force-directed graph layouts.
  • Improved graph positioning and visualization across supported layout modes.
  • Updated the interface styling, themes, responsive behavior, accessibility states, and graph controls.

• Bug Fixes

  • Improved layout selection usability by ensuring graph layout options display correctly.

• Tests

  • Expanded coverage for all graph layouts, positioning behavior, and layout switching.

[coderabbitai]

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Free

Run ID: 23ba50ea-d63d-416d-8755-00c92d005364

📥 Commits

Reviewing files that changed from the base of the PR and between 846036e and 7d28a0f.

📒 Files selected for processing (10)

• src/loadpath/static/assets/LayeredGraph3D-BCjRMvyT.js
• src/loadpath/static/assets/index-CCz64vFJ.css
• src/loadpath/static/assets/index-Cj5VBWfS.js
• src/loadpath/static/assets/index-DuTMxUNT.js
• src/loadpath/static/index.html
• tests/e2e/test_ui_flows.py
• ui/src/ImpactGraph.test.ts
• ui/src/graphView.test.ts
• ui/src/graphView.ts
• ui/src/styles.css

Included review availability: Your plan includes up to 1 review per rolling hour; 0 remain after this review.

---

📝 Walkthrough

Walkthrough

The graph view adds five layout modes: tree, concentric, circle, clusters, and force. Tests cover layout behavior and UI selection. Production JavaScript and CSS assets were regenerated, and the HTML entrypoint references the new hashed files.

Changes

Graph layout expansion

Layer / File(s)	Summary
Layout algorithms and dispatch ui/src/graphView.ts	The layout registry and dispatcher now support tree, concentric, circle, cluster, and force-directed layouts. New helpers calculate rings, clusters, trees, spacing, and force simulations.
Layout coverage and UI validation ui/src/graphView.test.ts, ui/src/ImpactGraph.test.ts, tests/e2e/test_ui_flows.py, ui/src/styles.css	Tests cover all registered layouts, positioning behavior, preference persistence, selector options, and force-layout interaction. The layout selector has a minimum width.
Browser bundle and entrypoint refresh src/loadpath/static/assets/index-DuTMxUNT.js, src/loadpath/static/assets/index-CCz64vFJ.css, src/loadpath/static/assets/LayeredGraph3D-BCjRMvyT.js, src/loadpath/static/index.html	The production bundles were added or refreshed. The HTML entrypoint and 3D graph module reference the new hashed assets.

Estimated code review effort: 4 (Complex) | ~45 minutes

Merge Risk: ⚪ Minimal · up to 7d28a

This adds selectable deterministic 2D graph layouts while preserving the existing layout choice behavior; no actionable merge-blocking risk remains based on the supplied evidence.

Sequence Diagram(s)

sequenceDiagram
  participant LayoutSelector
  participant layoutGraph
  participant LayoutAlgorithm
  participant ReactFlowGraph
  LayoutSelector->>layoutGraph: select layout ID
  layoutGraph->>LayoutAlgorithm: calculate node positions
  LayoutAlgorithm->>layoutGraph: return positioned nodes
  layoutGraph->>ReactFlowGraph: render updated positions

Loading

---

Note

🎁 Summarized by CodeRabbit Free

Your organization is on the Free plan. CodeRabbit will generate a high-level summary and a walkthrough for each pull request. For a comprehensive line-by-line review, please upgrade your subscription to CodeRabbit Pro by visiting https://app.coderabbit.ai/login.

_{Comment @coderabbitai help to get the list of available commands.}