Graph Visualizer UI Component
Relevant source files
The following files were used as context for generating this wiki page:
The Graph Visualizer UI Component is a specialized module within the ONNX-Station workbench designed to provide interactive, data-driven insights into ONNX model architectures. It visualizes operator distributions and estimated Video RAM (VRAM) usage to help developers identify computational bottlenecks and memory-heavy operations during the model optimization process.
The component serves as a post-compilation analysis tool, rendering complex model metadata into digestible visual formats. It integrates directly with the workbench's orchestration layer to reflect changes in real-time as users modify export configurations such as quantization, optimization levels, and target hardware.
Sources: src/components/OnnxGraphVisualizer.tsx:10-15, src/components/CenterCanvas.tsx:115-117
Architecture and Data Flow
The visualizer operates as a consumer of the WorkbenchContext. It observes the state of the compilation pipeline and renders visual assets once a model is either successfully exported or simulated.
Visualizer Lifecycle
- Trigger: The user initiates an export or compilation via the UI.
- Processing: The system generates model information using
generateCompiledModelInfo, which simulates or analyzes the ONNX graph based on the providedExportConfig. - State Update: The
compiledModelInfoobject is stored in the global context. - Rendering: The
OnnxGraphVisualizercomponent detects the data change and uses D3.js to render SVG-based charts.
Core Visual Components
The visualizer utilizes two primary D3.js charts to represent model characteristics:
1. Operator Distribution Bar Chart
A horizontal bar chart that displays the frequency of specific ONNX operator types (e.g., MatMul, Conv, Gather) within the model.
- X-Axis: Represents the instance count of each operator.
- Y-Axis: Lists the operator types.
- Color Coding: Bars are color-coded by category (compute, memory, activation, normalization, or shape).
2. VRAM Allocation Donut Chart
A donut chart visualizing the estimated VRAM footprint of different operator groups.
- Segments: Each slice represents the memory consumption (in MB) of an operator type.
- Interactive Center: The donut hole displays the "Total Estimated Intermediates" memory by default, but updates to show specific operator details when a user hovers over a segment.
| Feature | Description | File Reference |
|---|---|---|
| Hover Interaction | Highlighting a segment in one chart synchronizes the state to highlight the corresponding data in the other. | OnnxGraphVisualizer.tsx:135-155 |
| Responsiveness | Uses ResizeObserver to dynamically scale SVG dimensions based on the container width. | OnnxGraphVisualizer.tsx:21-42 |
| Bottleneck Detection | Automatically identifies and highlights the operator consuming the maximum memory as a potential bottleneck. | OnnxGraphVisualizer.tsx:45-60 |
Sources: src/components/OnnxGraphVisualizer.tsx:63-120, src/components/OnnxGraphVisualizer.tsx:160-250
Data Simulation and Analysis Logic
The visualizer relies on generateCompiledModelInfo to produce the underlying data. This utility applies heuristic-based scaling to estimate the impact of different configurations:
- DType Scaling: Precision overrides like
fp16orbf16trigger a ~50% reduction in estimated memory memory usage. - Optimization Levels: Higher optimization levels (O1-O4) reduce operator counts via kernel fusion. For instance,
O3merges linear layers intoMultiHeadAttentionfused blocks. - Modality Specifics: The logic branches based on whether the model is
text,vision, oraudioto include relevant operators likeConv1Dfor audio orGatherfor text embeddings.
Implementation Details
Interactive State Management
The component maintains local state for hovered operators to provide immediate visual feedback.
// src/components/OnnxGraphVisualizer.tsx:13-14
const [hoveredOp, setHoveredOp] = useState<string | null>(null);
const [size, setSize] = useState({ width: 400, height: 260 });
Categorization System
Operators are categorized to provide semantic coloring across the UI:
- compute:
#10b981(Emerald) - memory:
#a855f7(Purple) - activation:
#f59e0b(Amber) - normalization:
#38bdf8(Sky) - shape:
#64748b(Slate)
Sources: src/components/OnnxGraphVisualizer.tsx:47-53, src/utils/modelInfo.ts:88-93
Summary
The Graph Visualizer UI Component is a critical diagnostic tool in the ONNX-Station ecosystem. By transforming abstract model configurations into interactive D3 visualizations, it allows users to see the immediate structural impact of optimization flags (like --optimize and --dtype) before deploying to target runtimes. This visibility is essential for balancing model performance against hardware constraints like VRAM availability and compute throughput.