Migrate concept graph from Cytoscape to react-force-graph-3d - #7
Merged
Merged
Conversation
Switches src/Graph.jsx from a 2D Cytoscape view to a 3D force-directed graph so it scales to real-sized bundles: uniform node sizing, SpriteText labels, and a camera that recenters on selection without changing zoom. Co-authored-by: Cursor <cursoragent@cursor.com>
There was a problem hiding this comment.
🟡 Changes recommended
The new zoom implementation scales the camera around the world origin instead of the current camera target, which can cause visible drift after panning/recentering.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
This PR migrates the concept graph rendering in the viewer from Cytoscape (2D) to a Three.js-based 3D force-directed graph via react-force-graph-3d, aiming to keep larger real-world bundles readable while preserving search/selection-driven styling and view controls.
Changes:
- Replaced Cytoscape graph rendering in
src/Graph.jsxwithreact-force-graph-3d+ custom Three.js node objects (SpriteText labels, stale/selected wireframe halos). - Implemented theme-aware background, node/edge dimming on search matches, and selection-based edge highlighting plus click-to-recenter camera logic.
- Swapped dependencies: removed
cytoscape, addedreact-force-graph-3d,three, andthree-spritetext.
File summaries
| File | Description |
|---|---|
| src/Graph.jsx | Migrates graph visualization to 3D force graph and re-implements styling/interaction (dimming, selection, zoom/fit, recenter). |
| package.json | Removes Cytoscape and adds the 3D force graph + Three.js dependencies. |
| package-lock.json | Updates lockfile to reflect the new dependency tree. |
Review details
- Files reviewed: 2/3 changed files
- Comments generated: 1
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+209
to
212
| const { x, y, z } = graph.camera().position; | ||
| const scale = 1 / factor; | ||
| graph.cameraPosition({ x: x * scale, y: y * scale, z: z * scale }, undefined, 200); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
src/Graph.jsxwith a 3D force-directed graph (react-force-graph-3d), which stays legible with real-sized bundles (~140+ nodes) instead of clumping into an unreadable blob.SpriteTextlabels (tunedtextHeight/offset for our longer multi-word titles), plus small fixed-size wireframe halos for stale/selected states.cytoscapedependency forreact-force-graph-3d,three, andthree-spritetext.Test plan
npm test(22 tests, 4 files) passesnpm run buildsucceedsMade with Cursor