Revamp the 3D impact graph

[Modsofthenation]

Why

The 3D graph was a sphere spiral with unlabeled nodes. 2D got layout algorithms, inferred-vs-extracted edges, and role overlays; 3D did not. Large reviews default to 3D, so the weaker view was the one people saw first.

Rebased onto main after #27 added five more 2D layouts (tree, concentric, circle, clusters, force).

What changed

3D is the 2D map with a third axis:

• XY uses the selected layout
• Z is bounded context
• Occupied layers are packed; sinks/models read larger than fields
• Dashed edges are inferred; solid edges are extracted
• Layout dropdown stays available in 3D

Guides follow the layout:

• Architecture layers / edge flow: bounding slab per packed column
• Radial / concentric / circle: thin rings
• Tree / clusters / grid / force: no discs

Review stays mounted if 3D cannot start (CI / no GPU):

• Large graphs stay on 2D until WebGL is confirmed, and automated browsers (navigator.webdriver) never auto-enter 3D
• A dummy WebGL probe runs on idle and releases its context so Three.js can still create a renderer
• Error boundaries wrap the graph so a WebGL throw cannot unmount Review / merge-box

Tests

• Unit: packing, barycenter, context Z, inferred edges, slab/ring/none by layout, WebGL auto-3D gate (91 UI tests)
• e2e: layout dropdown lists all 9 algorithms; 3D still mounts on click; screenshot review flow waits for the brief before the compact merge-box

  

Summary by CodeRabbit

• New Features
  • Added an interactive 3D impact graph with selectable layouts, camera controls, node selection, neighbor highlighting, tooltips, and topology guides.
  • Added support for node-role overlays, inferred edges, theme-aware styling, and focus transitions.
  • Added automatic WebGL detection with loading, unsupported-browser, and rendering-error fallbacks.
• Bug Fixes
  • Improved 3D layout positioning by grouping nodes by bounded context.
• Documentation
  • Clarified 3D layout behavior and WebGL availability.
• Tests
  • Expanded coverage for 3D layouts, fallback behavior, guides, node sizing, and inferred edges.

[coderabbitai]

Warning

Review limit reached

@cursor[bot], you've reached your PR review limit, so we couldn't start this review.

Next review available in: 53 minutes

Limit details: You’ve used all 1 included review currently available under your plan.

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Free

Run ID: 78d72122-9b40-438f-978d-cbd4b63b2d98

📥 Commits

Reviewing files that changed from the base of the PR and between 6635919 and f6408e0.

📒 Files selected for processing (7)

• src/loadpath/static/assets/LayeredGraph3D-DIGrA9CU.js
• src/loadpath/static/assets/index-CcW4ogPp.js
• src/loadpath/static/index.html
• tests/e2e/test_ui_screenshots.py
• ui/src/ImpactGraph.tsx
• ui/src/graphView.test.ts
• ui/src/graphView.ts

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Free

Run ID: 34a1e320-bdb1-4337-9957-d8ee40d9022e

📥 Commits

Reviewing files that changed from the base of the PR and between a4b732b and 6635919.

📒 Files selected for processing (14)

• README.md
• src/loadpath/static/assets/LayeredGraph3D-B8BpnJyI.js
• src/loadpath/static/assets/LayeredGraph3D-BCjRMvyT.js
• src/loadpath/static/assets/index-1pca9XOJ.js
• src/loadpath/static/assets/index-DuTMxUNT.js
• src/loadpath/static/assets/index-Q9TpSg-b.css
• src/loadpath/static/index.html
• tests/e2e/test_ui_flows.py
• tests/e2e/test_ui_screenshots.py
• ui/src/ImpactGraph.tsx
• ui/src/LayeredGraph3D.tsx
• 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 Impact graph now supports layout-aware 3D rendering. It maps bounded contexts to depth, detects WebGL support, provides 2D fallback states, adds interactive rendering features, updates production assets, and expands graph and end-to-end tests.

Changes

Impact graph 3D rendering

Layer / File(s)	Summary
Layout-aware 3D projection and tests ui/src/graphView.ts, ui/src/graphView.test.ts	3D layout now uses graph edges and selected layouts. It adds context depth separation, layout guides, node sizing, inferred-edge detection, and WebGL projection helpers with test coverage.
Interactive 3D renderer ui/src/LayeredGraph3D.tsx, src/loadpath/static/assets/LayeredGraph3D-B8BpnJyI.js, ui/src/styles.css	The renderer adds configurable layouts, guides, role-based styling, inferred edges, arrows, focus animation, hover file details, cleanup, and guarded WebGL rendering.
Impact graph integration and fallback ui/src/ImpactGraph.tsx, tests/e2e/test_ui_flows.py, tests/e2e/test_ui_screenshots.py, README.md	ImpactGraph selects 3D only when supported, exposes layout controls for both projections, handles loading and render failures, and updates documentation and end-to-end waits.
Production asset wiring src/loadpath/static/assets/index-1pca9XOJ.js, src/loadpath/static/assets/index-Q9TpSg-b.css, src/loadpath/static/index.html	Production bundles include the application and styling changes. The HTML entrypoint references the new hashed assets.

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

Merge Risk: ⚪ Minimal · up to 66359

The PR updates the 3D impact graph with selectable layouts, contextual depth, edge styling, guides, and an error boundary. No actionable merge-blocking risk remains beyond normal checks.

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant ImpactGraph
  participant LayeredGraph3D
  participant WebGLRenderer
  User->>ImpactGraph: select 3D projection and layout
  ImpactGraph->>ImpactGraph: detect WebGL and select effective projection
  ImpactGraph->>LayeredGraph3D: pass graph data, layout, roles, and selection
  LayeredGraph3D->>WebGLRenderer: create scene and render graph
  WebGLRenderer-->>LayeredGraph3D: provide frames or report an error
  LayeredGraph3D-->>ImpactGraph: render graph or fallback message

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.}