feat(explorer): improve force graph UX, animation settle, and visual controls

[PRAteek-singHWY]

Summary

This PR polishes the Explorer force graph experience with improved controls UI, interaction behavior, and final animation/camera settling.

What changed

• Refined force graph controls layout and styling (checkbox chips, dropdowns, metadata row).
• Improved dropdown menu layering and control readability.
• Added/kept relation legend fixed at bottom-right.
• Added delayed node spotlight behavior (hover 1s):
  • hovered node + connected nodes/links stay highlighted
  • non-connected nodes/links are dimmed
• Tuned graph interaction behavior:
  • orbit controls, smoother damping
  • zoom in/out range handling
  • disabled node dragging for stable navigation
• Improved final animation settle:
  • more stable final centering/pose logic
  • better final camera distance/position
  • earlier simulation stop to avoid over-drifting at the end
• Fixed explorer force-graph page sizing/stacking issues to avoid visual artifacts.

Scope

• Frontend only
• Files:
  • application/frontend/src/pages/Explorer/visuals/force-graph/forceGraph.tsx
  • application/frontend/src/pages/Explorer/visuals/force-graph/forceGraph.scss

Notes

• Existing graph data/filter logic is preserved; this PR focuses on UX/visual/interaction behavior.
• Node and connection counters remain visible in the controls row.

Before / After Recording

• Before:
• After:

Screen.Recording.2026-02-28.at.03.18.16.mp4

[northdpole]

Maintainer note: We will finish explorer force-graph polish on this branch to production standard. Priority is not crashing Explorer/graph. (Implementation follow-up — not done in this comment.)

[northdpole]

Selective port onto current main (production-safe)

Pushed a rebased selective port to this branch (436503ed) based on current origin/main, keeping Explorer data-load safety and dropping crash-prone pieces from the earlier tip.

Kept from main

• ensureFullExplorerData mount effect
• fullLoadProgress + dataLoadError loading/error UI
• Empty ignoreTypes default (no default ignore of same)
• Contains / Related / Linked To toggles only
• Existing filter/graph-build logic (showAll, filterTypeA/B, CRE/standard grouping)

Ported from this PR’s polish

• Controls chrome / SCSS (chips, meta row, layout) — adapted without Same
• 1s delayed hover spotlight (neighbors highlight, others dim)
• Orbit damping, zoom limits, pan off, enableNodeDrag={false}
• Simulation settle timers with cleanup on unmount / graph change
• Safer final camera via onEngineStop + zoomToFit fallback
• Relation legend for Contains / Related / Linked To only
• Link dedupe + empty-store setGraphData(null)
• maxNodeSize floored to ≥ 1 (avoid /0)

Explicitly dropped / fixed

• Same checkbox, legend swatch, relation color, and ignoreTypes=['same'] default — not reintroduced
• Unconditional orbitControls.minDistance/maxDistance/target writes — now null-guarded (controls?.() then only set if object exists)
• In-place mutation of live React graphData for PCA camera align — skipped; camera frames from current positions read-only
• Uncleared hover/charge timers — cleared on unmount to avoid StrictMode double-crash

Verification

• yarn build (frontend) — passed (pre-existing chatbot/dompurify warning only)

Remaining risks: large graphs may still be heavy in-browser; camera framing without PCA align may be slightly less “composed” than the original PR tip; please smoke-test Explorer mount/unmount under React StrictMode.

[coderabbitai]

Warning

Review limit reached

@northdpole, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 51 minutes

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: Path: .coderabbit.yml

Review profile: CHILL

Plan: Pro

Run ID: 44b9375f-b31d-422b-adea-e185f358f651

📥 Commits

Reviewing files that changed from the base of the PR and between 2d1aa47 and 436503e.

📒 Files selected for processing (4)

• application/frontend/src/pages/Explorer/visuals/force-graph/forceGraph.scss
• application/frontend/src/pages/Explorer/visuals/force-graph/forceGraph.tsx
• application/frontend/www/bundle.js
• application/frontend/www/bundle.js.LICENSE.txt

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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