How jany-m/repo-visualizer works
Repo Visualizer has two connected product workflows: a command-line analyzer that turns Git history and per-commit imports into a history dataset, and a browser app that loads that dataset (or its bundled demo), replays graph state over time, and renders it interactively. The app also provides inspection, cluster focus, four themes, mobile controls, and video/GIF export. Analyzer detail and several UI relationships are based on the README and SOURCE INDEX; unsampled implementation links are omitted where their caller is not shown.
Main entry points: App.jsx App coordinator · analyze.mjs History analyzer · layout.js Force layout · useVisualizerCore.js Canvas visualizer core
Components 21
History analysis
- History analyzer
scripts/analyze.mjs - Import parsers
scripts/importParsers.mjs - Import resolver
scripts/importResolve.mjs - File inclusion
scripts/includeFile.mjs - History dataset
scripts/analyze.mjs
Application
- App coordinator
src/App.jsx - Dataset loader
src/engine/useDataset.js - Bundled demo
src/data/bundledDemo.js
Timeline and graph
- Timeline playback
src/engine/useTimeline.js - Incremental graph state
src/engine/graphState.js - Time visibility
src/engine/visibility.js - Force layout
src/engine/layout.js
Visualization
- Canvas visualizer core
src/visualizers/useVisualizerCore.js - Galaxy theme
src/visualizers/GalaxyVisualizer.jsx - WebGL renderer
src/visualizers/WebGLVisualizer.jsx - Other themes
src/visualizers
Controls and export
- File inspector
src/components/NodeInspector.jsx - Timeline controls
src/components/ControlBar.jsx - Cluster legend
src/components/Legend.jsx - Recording export
src/engine/recorder.js
Other components
- Git repository
Connections 25
- Git repository → History analyzer: analyzes history
README.md - History analyzer → Import parsers: parses imports
scripts/analyze.mjs - History analyzer → Import resolver: resolves imports
scripts/analyze.mjs - History analyzer → File inclusion: filters files
scripts/analyze.mjs - File inclusion → History analyzer: checks exclusions
scripts/includeFile.mjs - History analyzer → History dataset: writes dataset
README.md - History dataset → Dataset loader: loads history
src/engine/useDataset.js - Dataset loader → Bundled demo: falls back to
src/engine/useDataset.js - App coordinator → Dataset loader: loads dataset
src/App.jsx - App coordinator → Timeline playback: drives playback
src/App.jsx - Timeline playback → Incremental graph state: applies commits
src/engine/useTimeline.js - Force layout → Incremental graph state: positions graph
src/engine/layout.js - Force layout → Time visibility: filters visible items
src/engine/layout.js - App coordinator → Canvas visualizer core: selects renderer
src/App.jsx - App coordinator → WebGL renderer: selects renderer
src/App.jsx - Galaxy theme → Canvas visualizer core: uses shared core
src/visualizers/GalaxyVisualizer.jsx - Canvas visualizer core → Force layout: creates layout
src/visualizers/useVisualizerCore.js - Canvas visualizer core → Time visibility: fades nodes
src/visualizers/useVisualizerCore.js - WebGL renderer → Force layout: creates layout
src/visualizers/WebGLVisualizer.jsx - WebGL renderer → Time visibility: filters nodes
src/visualizers/WebGLVisualizer.jsx - App coordinator → Other themes: selects theme
src/App.jsx - App coordinator → File inspector: shows inspection
src/App.jsx - App coordinator → Timeline controls: provides controls
src/App.jsx - App coordinator → Cluster legend: shows clusters
src/App.jsx - App coordinator → Recording export: starts recording
src/App.jsx