Skip to content

feat(graph-ui): URL routing, filter panel UX, and camera fly-to fix#740

Open
rarepops wants to merge 4 commits into
DeusData:mainfrom
rarepops:feat/graph-ui-routing-and-filter-ux
Open

feat(graph-ui): URL routing, filter panel UX, and camera fly-to fix#740
rarepops wants to merge 4 commits into
DeusData:mainfrom
rarepops:feat/graph-ui-routing-and-filter-ux

Conversation

@rarepops

@rarepops rarepops commented Jul 1, 2026

Copy link
Copy Markdown

Summary

Improvements to the graph UI: the left filter panel is reworked, the active tab and selected project are now reflected in the URL, the camera fly-to no longer snaps back to centre, and a few confusing labels are clarified.

All changes are scoped to graph-ui/. No server or protocol changes.

Changes

Filter panel and folder tree

  • Cap the filter panel height and move the node/edge chips into a scroll area, so a long list of types no longer pushes the folder tree off screen.
  • Regroup the chips under Node types and Relationships, and pin the Show labels toggle as a footer.
  • Add a Folders heading (en/zh) above the folder tree so that section is clearly labelled.

URL routing

  • The active tab and selected project are stored in the URL query string (?tab=...&project=...), so the view survives refreshes and can be bookmarked or shared. Back/forward is handled via popstate.
  • Query params are used rather than path segments because the embedded HTTP server only serves index.html at / (path routes would 404 on refresh).

Graph tab and HUD

  • The Graph tab is disabled until a project is selected, and opening the Projects tab clears the active project.
  • The empty-state hint now points at the Projects tab (it previously referenced a "Stats" tab that no longer exists).
  • The ambiguous Clear button in the graph HUD is renamed Clear selection so it reads distinctly from Refresh.

Camera fly-to fix

  • Focusing a node or cluster only moved the camera and called lookAt, leaving the OrbitControls pivot at the origin. OrbitControls re-centred the view on the next frame, snapping the camera back once the animation ended.
  • The controls target is now lerped to the focus point as well, so the view stays on the clicked node and orbits around it afterwards.

Screenshots

  • Filter panel (grouping):
image
  • URL routing (address bar showing ?tab / project): image

Testing

  • npm run build (tsc typecheck + vite build): passing
  • npm test (vitest): 8/8 passing
  • Manual: deep-link /?tab=graph&project=<name> restores the view; the Projects tab clears the selection and disables the Graph tab; browser back/forward round-trips; the camera stays on the focused node.

Follow-up (not in this PR)

  • Persisting the active filter selection (disabled node/edge types plus show-labels) in the URL.
rarepops added 4 commits July 1, 2026 17:12
Cap the filter panel height and move the node and edge chips into a scroll area so a long type list no longer pushes the folder tree off screen.

Regroup the chips under Node types and Relationships, pin the show-labels toggle as a footer, and add a Folders heading (en and zh) above the folder tree so the section is clearly labelled.

Signed-off-by: Zadak <rarepops@protonmail.com>
Store the active tab and selected project in the URL query string so the view survives refreshes and can be bookmarked or shared, syncing back on browser back and forward via popstate.

Query params are used rather than path segments because the embedded server only serves index.html at the root path. Opening the Projects tab now clears the active project, and the Graph tab stays disabled until a project is selected.

Signed-off-by: Zadak <rarepops@protonmail.com>
Rename the ambiguous Clear button to Clear selection so it reads distinctly from Refresh, and point the empty-state hint at the Projects tab instead of the renamed Stats tab.

Signed-off-by: Zadak <rarepops@protonmail.com>
The fly-to animation moved only the camera and called lookAt, leaving the OrbitControls pivot at the origin, so OrbitControls re-centred the view on the next frame and snapped the camera back once the animation ended.

Lerp the controls target to the focus point as well so the view stays on the clicked node or cluster and orbits around it afterwards.

Signed-off-by: Zadak <rarepops@protonmail.com>
@rarepops rarepops requested a review from DeusData as a code owner July 1, 2026 15:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

1 participant