Code Review Graph Visualization Formats: 4 Rendering Modes Explained

The code-review-graph library supports four graph visualization formats—full, community, file, and auto—rendered as self-contained interactive HTML files using D3.js.

The tirth8205/code-review-graph repository provides specialized tools for visualizing code review knowledge graphs. Understanding the available graph visualization formats helps developers choose the right level of detail for analyzing codebases of varying sizes and complexity.

Overview of Supported Graph Visualization Formats

The package ships a self-contained interactive visualizer built on D3.js. All graph visualization formats output a single HTML file that embeds the graph data as JSON. This approach ensures zero external dependencies beyond the bundled D3 library loaded from https://d3js.org/d3.v7.min.js.

The underlying data structure is always a JSON-serializable dictionary containing nodes, edges, statistics, flows, and optional community information. In code_review_graph/visualization.py, the export_graph_data function produces this payload, which gets inlined into the generated HTML via the __GRAPH_DATA__ placeholder for runtime consumption by the D3 script.

The Four Rendering Modes

The visualizer supports four distinct logical rendering modes, each optimized for different analysis scenarios.

Full Mode

The full mode renders every node and edge exactly as they appear in the knowledge graph. This format provides complete granularity but becomes unwieldy for large datasets. The system defaults to this mode automatically when the graph contains fewer than 3,000 nodes.

Community Mode

The community mode collapses nodes into community super-nodes, enabling high-level structural analysis. Users can drill down into each community to reveal full internal detail. This format activates automatically for large graphs or when explicitly requested via the mode parameter.

File Mode

The file mode aggregates symbols by their source file, converting each file into a single node sized proportionally to its symbol count. This graph visualization format excels at providing source-level architectural overviews without exposing individual function-level details.

Auto Mode

The auto mode intelligently selects between full and community modes based on graph complexity. When the total node count exceeds the configurable max_full_nodes threshold (defaulting to 3000), the visualizer switches to community aggregation. Otherwise, it falls back to the full representation. This serves as the default rendering strategy for end-user convenience.

Generating Visualizations in Practice

The generate_html function in code_review_graph/visualization.py creates these visualizations. Below is a practical demonstration of invoking all four graph visualization formats:

from pathlib import Path
from code_review_graph.visualization import generate_html
from code_review_graph.graph import GraphStore

# 1️⃣ Build a GraphStore (example – the actual population is project‑specific)

store = GraphStore(Path("my_project"))

# 2️⃣ Generate a full graph (everything rendered)

html_path = generate_html(store, output_path="graph_full.html", mode="full")
print(f"Full‑mode HTML written to {html_path}")

# 3️⃣ Generate a community‑aggregated view (good for >3 k nodes)

html_path = generate_html(
    store,
    output_path="graph_community.html",
    mode="community",
    max_full_nodes=3000,
)
print(f"Community‑mode HTML written to {html_path}")

# 4️⃣ Generate a file‑level overview

html_path = generate_html(store, output_path="graph_file.html", mode="file")
print(f"File‑mode HTML written to {html_path}")

# 5️⃣ Let the visualizer decide automatically (auto‑mode)

html_path = generate_html(store, output_path="graph_auto.html", mode="auto")
print(f"Auto‑mode HTML written to {html_path}")

All four calls produce a stand-alone HTML file compatible with any modern browser.

Key Implementation Files

The visualization system relies on several core modules within the tirth8205/code-review-graph repository:

• code_review_graph/visualization.py – Contains the generate_html and export_graph_data functions that build JSON exports and render final HTML for all graph visualization formats.
• code_review_graph/graph.py – Provides the GraphStore class that supplies nodes, edges, files, and community IDs to the visualizer.
• code_review_graph/communities.py – Supplies community detection results utilized when rendering in community mode.
• code_review_graph/flows.py – Adds execution-flow data that can be highlighted in the interactive UI.

Summary

• The code-review-graph package supports four graph visualization formats: full, community, file, and auto.
• All formats output as self-contained interactive HTML files powered by D3.js.
• The export_graph_data function in code_review_graph/visualization.py generates the underlying JSON payload.
• Auto mode automatically switches between full and community views based on the max_full_nodes threshold (default 3000).
• File mode provides high-level architectural overviews by aggregating symbols at the file level.

Frequently Asked Questions

What output format does code-review-graph use for visualizations?

The tool generates self-contained HTML files with embedded JSON data. The generate_html function creates a single document that includes the D3.js library and the graph data inlined via the __GRAPH_DATA__ placeholder, requiring no external server or additional assets.

How does the auto mode decide which visualization to render?

Auto mode checks the total node count against the max_full_nodes parameter (defaulting to 3000) as implemented in code_review_graph/visualization.py. If the graph exceeds this threshold, it renders in community mode; otherwise, it displays the full graph.

Can I visualize code review data at the file level instead of function level?

Yes. The file rendering mode aggregates all symbols by their source file, creating nodes sized by symbol count. Invoke this by passing mode="file" to the generate_html function.

What library powers the interactive graph visualizations?

The visualizations rely on D3.js (version 7), loaded from a CDN within the generated HTML. The interactive features—including zooming, panning, and community drill-down—are implemented using D3.js as defined in the visualization module.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}