How sibangi15/corollary-algorithmvisualizer works
Corollary is an interactive algorithm visualizer. Users choose a sorting, searching, or graph algorithm, configure input, run or scrub its generated steps, and inspect synchronized visuals, pseudocode, and complexity. The visualizer also displays recent runs; the control panel records run metadata through the API, which stores and retrieves session history. The graph reflects the documented capabilities and sampled call paths; some rendering and algorithm internals were not sampled, so uncertain links are omitted.
Main entry points: Visualizer.jsx Visualizer Page · ControlPanel.jsx Controls · index.js Express API · App.jsx React App
Components 19
Application UI
- React App
client/src/App.jsx - Home Page
client/src/pages/Home.jsx - Visualizer Page
client/src/pages/Visualizer.jsx - Controls
client/src/components/controls/ControlPanel.jsx
Algorithm Modes
- Sorting
client/src/algorithms/sorting - Searching
client/src/algorithms/searching - Graph Search
client/src/algorithms/graph - Complexity Data
client/src/utils/complexity.js
Playback and Display
- Pseudocode Data
client/src/utils/pseudocode.js - Animation Engine
client/src/hooks/useAnimation.js - Array Bars
client/src/components/visualizer/ArrayBars.jsx - Graph Grid
client/src/components/graphs/Grid.jsx - Code Panel
client/src/components/visualizer/CodePanel.jsx - Grid Utilities
client/src/utils/createGrid.js
Session History
- Express API
server/index.js - Session Routes
server/routes/sessionRoutes.js - Session Model
server/models/Session.js - MongoDB
server/config/db.js
Other components
- Learner
Connections 21
- Learner → React App: opens
- React App → Home Page: routes
- React App → Visualizer Page: routes
- Visualizer Page → Controls: renders
- Visualizer Page → Array Bars: renders
- Visualizer Page → Graph Grid: renders
- Visualizer Page → Code Panel: renders
- Visualizer Page → Pseudocode Data: reads
- Visualizer Page → Complexity Data: reads
- Visualizer Page → Grid Utilities: creates grid
- Controls → Sorting: runs selected
- Controls → Searching: runs selected
- Controls → Graph Search: runs selected
- Controls → Animation Engine: starts playback
- Animation Engine → Array Bars: updates array state
- Animation Engine → Graph Grid: updates grid state
- Visualizer Page → Express API: fetches history
- Controls → Express API: posts run
- Express API → Session Routes: mounts routes
- Session Routes → Session Model: queries and saves
- Express API → MongoDB: connects