Visualizer

Interactive Visualizer

The generated graph.html is a self-contained single file — no build step, no server dependency, no CDN references. It renders the dependency graph using vis-network with ForceAtlas2-based physics.

Features

Dark-Mode UI with Glassmorphism

The visualizer has a modern dark theme with glassmorphism effects in the sidebar. The sidebar contains:

• Search bar — fuzzy search across all node labels with smooth pan-to-node animation
• Info panel — click any node to see its module, language, connection count, and clickable neighbor links
• Community legend — color-coded checkboxes to toggle entire modules on/off
• Filter toggles — quick show/hide for npm packages (⚡ Dependencies) and inline entities (◇ Entities)
• Cycle overlay — after running detect, toggle to highlight cycles in red
• Stats — total nodes and edges displayed at the bottom

ForceAtlas2 Physics

Nodes are arranged using ForceAtlas2, a force-directed layout algorithm:

• Repulsion — nodes push each other apart
• Attraction — connected nodes pull toward each other
• Damping — movement slows over time until nodes settle
• Dragging — click and drag any node to reposition it; the physics adjust around it

Minimap

A minimap in the bottom-left corner shows the full graph with a viewport rectangle. Drag the rectangle to navigate large graphs. Press M to toggle the minimap on/off.

Features:

• Respects device pixel ratio for crisp rendering
• Draws edges, nodes, and the current viewport
• Mouse drag + wheel zoom on the minimap navigate the main graph

Click-to-Inspect

Click any node to see:

• Full path — the node's key (file path or package name)
• Language — detected language (file nodes only)
• Community — Louvain community name
• Connections — inbound and outbound edge count
• Neighbors — clickable list of connected nodes

Search

The search bar uses fuzzy matching across all node labels. Results appear as you type, and clicking a result smoothly pans and zooms to the matching node.

Cycle Overlay

After running codebase-vis detect, the visualizer automatically loads cycles.json:

• Cyclic edges are highlighted in red
• Non-cyclic nodes dim slightly
• Click individual cycles to zoom in on the cycle path
• Toggle the cycle view on/off with a button

Boot Sequence

1. Boot: Start loading
2. Fetch graph.json
3. Parse into vis-network dataset
4. Configure physics (ForceAtlas2)
5. Render network
6. Fetch cycles.json (non-blocking)
7. Activate event handlers (hover, click)
8. Setup minimap
9. Setup search
10. Setup legend and toggles
11. Handle resize
12. Show stats
13. Ready

Node Visual Mapping

Graphology attributes are mapped to vis-network properties:

Graphology Attribute	vis-network Property
color	color.background
label	label
size	size
x, y	x, y
community	group (for legend)

Events

Event	Action
Hover over node	Highlight node + its edges, dim everything else
Click node	Open info panel with details
Click empty space	Close info panel
Drag node	Reposition (physics adjusts)
Scroll	Zoom in/out
Press M	Toggle minimap
Type in search	Fuzzy filter + pan to match