Sharang Parnerkar
7e12d1433a
Co-authored-by: Sharang Parnerkar <parnerkarsharang@gmail.com> Reviewed-on: #4
93 lines
2.8 KiB
Markdown
93 lines
2.8 KiB
Markdown
# Code Knowledge Graph
|
|
|
|
The Code Knowledge Graph feature parses your repository source code and builds an interactive graph of symbols (functions, classes, modules) and their relationships (calls, imports, inheritance).
|
|
|
|
## Graph Index
|
|
|
|
Navigate to **Code Graph** in the sidebar to see all repositories. Click a repository card to open its graph explorer.
|
|
|
|
## Building a Graph
|
|
|
|
Before exploring, you need to build the graph:
|
|
|
|
1. Open the graph explorer for a repository
|
|
2. Click **Build Graph**
|
|
3. The agent parses all source files and constructs the graph
|
|
4. A spinner shows build progress
|
|
|
|
The graph builder supports these languages:
|
|
- Rust
|
|
- TypeScript
|
|
- JavaScript
|
|
- Python
|
|
|
|
## Graph Explorer
|
|
|
|
The graph explorer provides an interactive network visualization.
|
|
|
|
### Canvas
|
|
|
|
The main area renders an interactive network diagram using vis-network:
|
|
|
|
- **Nodes** represent code symbols (functions, classes, structs, enums, traits, modules, files)
|
|
- **Edges** represent relationships between symbols
|
|
- Nodes are **color-coded by community** — clusters of highly connected symbols detected using Louvain community detection
|
|
- Pan by dragging the background, zoom with scroll wheel
|
|
|
|
### Node Types
|
|
|
|
| Type | Description |
|
|
|------|-------------|
|
|
| Function | Standalone functions |
|
|
| Method | Methods on classes/structs |
|
|
| Class | Classes (TypeScript, Python) |
|
|
| Struct | Structs (Rust) |
|
|
| Enum | Enumerations |
|
|
| Interface | Interfaces (TypeScript) |
|
|
| Trait | Traits (Rust) |
|
|
| Module | Modules and namespaces |
|
|
| File | Source files |
|
|
|
|
### Edge Types
|
|
|
|
| Type | Description |
|
|
|------|-------------|
|
|
| Calls | Function/method invocation |
|
|
| Imports | Module or symbol import |
|
|
| Inherits | Class inheritance |
|
|
| Implements | Interface/trait implementation |
|
|
| Contains | Parent-child containment (module contains function) |
|
|
| TypeRef | Type reference or usage |
|
|
|
|
### Statistics
|
|
|
|
The statistics panel shows:
|
|
- Total node and edge count
|
|
- Number of detected communities
|
|
- Languages found in the repository
|
|
- File tree of the codebase
|
|
|
|
### Search
|
|
|
|
Search for symbols by name:
|
|
|
|
1. Type at least 2 characters in the search box
|
|
2. Matching symbols appear in a dropdown
|
|
3. Click a result to highlight it on the canvas and open the inspector
|
|
|
|
### Code Inspector
|
|
|
|
When you click a node (on the canvas or from search), the inspector panel shows:
|
|
|
|
- **Symbol name** and kind (function, class, etc.)
|
|
- **File path** with line range
|
|
- **Source code** excerpt from the file
|
|
- **Connected nodes** — what this symbol calls, what calls it, etc.
|
|
|
|
## Use Cases
|
|
|
|
- **Onboarding** — Understand unfamiliar codebase structure at a glance
|
|
- **Architecture review** — Identify tightly coupled modules and circular dependencies
|
|
- **Security** — Trace data flow from entry points to sensitive operations
|
|
- **Refactoring** — See what depends on code you plan to change
|