Add Code Graph visualization for AST-based dependency mapping#73
Add Code Graph visualization for AST-based dependency mapping#73peterjthomson merged 4 commits intomasterfrom
Conversation
Introduces a new visualization panel that parses code dependencies using AST and displays them as a force-directed network graph. Supports PHP (Laravel), Ruby (Rails), and TypeScript codebases. Key features: - Zero-touch parsing (no modifications needed to target repo) - Framework-aware optimization for Laravel/Rails (scans Models/Controllers/Services) - D3 force-directed layout with landscape oval spread - Category-based coloring (Models=green, Controllers=blue, Services=amber) - Filters nodes with <2 connections to reduce noise - JSON inspector view for debugging New files: - lib/services/codegraph/ - Parser service and type definitions - resources/scripts/php-ast-parser.php - Bundled PHP parser with nikic/php-parser - resources/scripts/ruby-ast-parser.rb - Regex-based Ruby parser - app/components/panels/viz/codegraph/ - React components and renderers
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
When enabled, nodes are colored based on their git status: - Green: new or modified files (uncommitted changes) - Red: deleted files The diff status is fetched via a new IPC handler that queries git status. Toggle is available in the Code Graph panel header as "Diff" checkbox.
- Add slider to filter top N nodes by connection count (default: 5) - Rank nodes by total connections and show most connected first - Preserve viewport zoom/pan when slider changes using D3 best practices - Store and restore node positions across data updates - Frame initial view to fit ~100 nodes so revealing more doesn't reframe - Wider slider (180px) for easier control
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.
| const { nodes: initialNodes, edges: initialEdges } = useMemo( | ||
| () => (schema ? schemaToFlow(schema) : { nodes: [], edges: [] }), | ||
| [] | ||
| ) |
There was a problem hiding this comment.
useMemo has empty deps but references schema
Low Severity
The useMemo at line 127-130 has an empty dependency array [] but references schema in its callback. This means initialNodes and initialEdges are computed only once at mount time, regardless of the initial schema value. While the useEffect at lines 136-142 compensates for this by updating state when schema changes, the current pattern causes duplicate schemaToFlow calls when schema is initially non-null and creates confusing code that violates React's exhaustive-deps rule.
1 participant
Summary
New Files
lib/services/codegraph/- Parser service and type definitionsresources/scripts/php-ast-parser.php- Bundled PHP parser with nikic/php-parserresources/scripts/ruby-ast-parser.rb- Regex-based Ruby parser (no gem dependencies)app/components/panels/viz/codegraph/- React components and D3/JSON renderersTest Plan
Note
Adds an end-to-end Code Graph feature for visualizing code dependencies across PHP, Ruby, and TypeScript.
codegraphviz panel with D3 force graph and JSON inspector (app/components/panels/viz/codegraph/*), wired intoCanvasRendererand styled inapp/styles/app.csslib/services/codegraph/(TS viats-morph, PHP via bundlednikic/php-parser, Ruby via regex), plus vendor scripts inresources/scripts/*lib/conveyor/schemas/codegraph-schema.ts,lib/conveyor/handlers/codegraph-handler.ts), API exposed inlib/preload/preload.ts, and renderer types inapp/types/electron.d.tselectron-builder.yml); dependencies added (d3,ts-morph,@types/d3)AGENTS.md), andVizPanelTypeextended to includecodegraphWritten by Cursor Bugbot for commit ae00285. This will update automatically on new commits. Configure here.