VS Code Code Graph Features
Relevant source files
The following files were used as context for generating this wiki page:
The VS Code extension for Code Review Graph provides a comprehensive suite of tools to visualize code dependencies, analyze the blast radius of changes, and provide structural context directly within the editor. It integrates a local SQLite-backed knowledge graph with VS Code's native UI components, such as Tree Views, Webviews, and SCM (Source Control Management) decorations.
The extension serves as the primary interface for developers to interact with the structural data parsed from their codebase. It allows users to trace callers and callees, locate tests for specific symbols, and perform semantic queries. By leveraging D3.js for interactive visualizations, it transforms complex dependency data into actionable insights for code review and architectural understanding.
Sources: code-review-graph-vscode/README.md, code-review-graph-vscode/src/extension.ts:403-455
Architecture and Core Components
The extension follows a client-server-like architecture where the VS Code extension acts as a frontend to a local SQLite database (graph.db) managed by a Python-based CLI.
Data Flow Overview
The extension reads data from the .code-review-graph/graph.db file using a specialized SqliteReader. Commands initiated in VS Code are either handled directly by reading the database or by invoking the code-review-graph CLI for heavy-lifting tasks like building or updating the graph.
Component Table
| Component | Responsibility | Relevant Files |
|---|---|---|
SqliteReader | Interfaces with the SQLite database to retrieve nodes, edges, and impact data. | sqlite.ts |
CliWrapper | Executes Python CLI commands (build, update, watch). | cli.ts (referenced in extension.ts) |
TreeProviders | Manages the "Code Graph", "Blast Radius", and "Stats" sidebars. | treeView.ts |
GraphWebview | Renders the interactive D3.js dependency visualization. | graphWebview.ts |
ScmDecorationProvider | Applies visual badges to files in the SCM view based on graph impact. | scmDecorations.ts |
Impact Analysis and Blast Radius
One of the core features is the ability to calculate the "Impact Radius" of a change. This is used during code reviews to understand how modifications to a file or symbol propagate through the system.
Blast Radius Logic
The SqliteReader implements a Breadth-First Search (BFS) to identify impacted nodes. It starts from "seed" files or nodes and traverses edges (like CALLS, IMPORTS_FROM, INHERITS) up to a configurable depth (default is 2).
Sources: code-review-graph-vscode/src/backend/sqlite.ts:250-320, code-review-graph-vscode/src/extension.ts:117-150
Interactive Visualizations
The extension provides an interactive D3.js graph visualization within a VS Code Webview. This view allows for dynamic exploration of the codebase structure.
Graph Webview Features
- Filtering: Toggle visibility of edge types (e.g., hide
CONTAINSto focus onCALLS). - Navigation: Click a node to open the corresponding source file at the correct line.
- Bi-directional Sync: Selecting a node in the graph can trigger a "Reveal in Tree" command.
- Export: Options to export the current graph state as SVG or PNG.
Sources: code-review-graph-vscode/src/views/graphWebview.ts:100-140, code-review-graph-vscode/src/views/graphWebview.ts:380-450
View Configuration Settings
| Setting | Default | Description |
|---|---|---|
blastRadiusDepth | 2 | Max traversal depth for dependency analysis (1-10). |
graph.maxNodes | 500 | Limits the number of nodes rendered in the webview for performance. |
autoUpdate | true | Automatically triggers a graph update on file save. |
treeView.showTests | true | Whether to display test nodes in the explorer. |
| Sources: code-review-graph-vscode/README.md, code-review-graph-vscode/src/extension.ts:460-480 |
SCM Integration and Decorations
The extension enhances VS Code's Source Control view by providing "SCM Decorations." When files are changed, the extension analyzes their impact on the rest of the codebase and applies decorations.
Decoration Workflow
- The
scmDecorationProviderlistens for changes in the workspace. - It calls
sqliteReader.getImpactRadiusfor all git-detected changed files. - It identifies "Impacted Files" (files that weren't changed but depend on those that were).
- Files in the SCM view are decorated with a specific color or badge (e.g.,
~for impacted files) to warn the reviewer of potential side effects.
Sources: code-review-graph-vscode/src/features/scmDecorations.ts:20-60, code-review-graph-vscode/src/extension.ts:380-400
Navigation and Semantic Queries
The extension provides several navigation-focused commands that leverage the graph's edge relationships:
- Find Callers/Callees: Uses the
CALLSedge kind to trace function interactions. - Find Tests: Navigates between source code and its corresponding tests using the
TESTED_BYrelationship. - Query Graph: Exposes 8 specific patterns (
callers_of,callees_of,imports_of,importers_of,children_of,tests_for,inheritors_of,file_summary) via a QuickPick interface. - Find Large Functions: Queries the database for nodes where
line_count(calculated asline_end - line_start) exceeds a user-defined threshold.
Sources: code-review-graph-vscode/src/extension.ts:157-250, code-review-graph-vscode/src/extension.ts:253-335
Summary
The VS Code Code Graph Features provide a robust developer experience for navigating complex codebases. By centralizing structural knowledge in a local SQLite database and exposing it through intuitive VS Code interfaces, the extension reduces the cognitive load during code reviews and refactoring. Key capabilities include deep impact analysis, interactive dependency graphs, and seamless integration with VS Code's source control and editor navigation.
Sources: code-review-graph-vscode/README.md, code-review-graph-vscode/src/extension.ts:403-455