Skip to content

Add interactive code graph visualization#668

Open
xy200303 wants to merge 2 commits into
colbymchenry:mainfrom
xy200303:feature/graph-visualization
Open

Add interactive code graph visualization#668
xy200303 wants to merge 2 commits into
colbymchenry:mainfrom
xy200303:feature/graph-visualization

Conversation

@xy200303
Copy link
Copy Markdown

@xy200303 xy200303 commented Jun 3, 2026

Summary

  • Add codegraph visualize [symbol] for generating an interactive HTML visualization of indexed code relationships.
  • Implement a custom animated Canvas force graph instead of using a generic graph visualization dependency.
  • Add force controls for gravity, repulsion, and link distance so users can tune aggregation and spread directly in the browser.
  • Add graph layout actions for fit, spread, cluster, expand, pause/resume animation, and reset.
  • Update CLI documentation and add focused visualization tests.

Changes

  • Added src/visualization.ts with a self-contained HTML graph renderer.
  • Added the visualize command in src/bin/codegraph.ts.
  • Added runtime edge kind support for visualization filtering and rendering.
  • Added node and edge filters with color swatches.
  • Added adjustable graph physics:
    • Gravity controls center attraction and aggregation.
    • Repulsion controls node separation.
    • Link distance controls edge spring length.
  • Added focused test coverage in __tests__/visualization.test.ts.
  • Updated documentation in README.md and site/src/content/docs/reference/cli.md.

Design Note

  • The visualization should reserve a dedicated legend area in the left control panel.
  • The legend area can sit near the existing node and edge filters, so users can quickly understand color meaning without covering the Canvas.
  • The legend should support both node kinds and edge kinds, and can share the same color mapping used by the renderer.

Verification

  • npm run build
  • npx vitest run __tests__/visualization.test.ts

Notes

  • No third-party graph rendering dependency was added.
  • No project PR template was found, so this PR uses the default English format.
  • Branch: feature/graph-visualization
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant