How itzsanket99/algorithm-visualizer works
AlgoTrace accepts student Java source, executes it under JDI observation, converts the resulting trace into API data, and presents it as interactive execution states and visualizations. The principal workflow is supported by the sampled engine, service, controller, and frontend excerpts. The README documents additional visualizations, including linked lists; the tree has no dedicated linked-list component, so that capability is represented at the App level. Unsampled wiring is omitted where it cannot be established.
Main entry points: App.jsx Execution workspace · ExecutionService.java Execution service · ExecutionEngine.java Execution orchestrator · executionApi.js Execution API client
Components 22
Interactive frontend
- Execution workspace
frontend/src/App.jsx - Execution API client
frontend/src/services/executionApi.js - Code viewer
frontend/src/components/CodeViewer.jsx - Execution state
frontend/src/components/ExecutionState.jsx - Call tree view
frontend/src/components/CallTree.jsx - Visualization panel
frontend/src/components/VisualizationPanel.jsx - Array visualizer
frontend/src/components/ArrayVisualizer.jsx - Stack visualizer
frontend/src/components/StackVisualizer.jsx - Queue visualizer
frontend/src/components/QueuePanel.jsx - State playback
frontend/src/utils/playback.js
Execution API
- Run endpoint
backend/src/main/java/com/algotrace/backend/execution/ExecutionController.java - Execution service
backend/src/main/java/com/algotrace/backend/execution/ExecutionService.java - Execution response data
backend/src/main/java/com/algotrace/backend/execution/ExecutionData.java
Java execution engine
- Execution orchestrator
execution-engine/src/main/java/com/algotrace/engine/ExecutionEngine.java - Java compiler
execution-engine/src/main/java/com/algotrace/engine/compiler/JavaSourceCompiler.java - Debug JVM launcher
execution-engine/src/main/java/com/algotrace/engine/debug/DebugLauncher.java - JDI debug session
execution-engine/src/main/java/com/algotrace/engine/debug/DebugSession.java - Method event collector
execution-engine/src/main/java/com/algotrace/engine/debug/MethodEventCollector.java
Trace processing
- Execution trace
execution-engine/src/main/java/com/algotrace/engine/model/ExecutionTrace.java - Call tree builder
execution-engine/src/main/java/com/algotrace/engine/tracer/CallTreeBuilder.java - Recursion call tree
execution-engine/src/main/java/com/algotrace/engine/model/CallTree.java
Other components
- Learner
Connections 27
- Learner → Execution workspace: enters code
- Execution workspace → Execution API client: submits source
- Execution API client → Run endpoint: posts request
- Run endpoint → Execution service: invokes service
- Execution service → Execution orchestrator: executes source
- Execution orchestrator → Java compiler: compiles source
- Execution orchestrator → Debug JVM launcher: launches JVM
- Debug JVM launcher → JDI debug session: creates session
- Execution orchestrator → Method event collector: starts collection
- Method event collector → JDI debug session: observes events
- Method event collector → Execution trace: builds trace
- Execution orchestrator → Execution trace: returns trace
- Execution service → Call tree builder: builds call tree
- Call tree builder → Execution trace: reads events
- Call tree builder → Recursion call tree: produces tree
- Execution service → Execution response data: assembles events and tree
- Execution service → Run endpoint: returns response
- Run endpoint → Execution API client: returns result
- Execution API client → Execution workspace: provides result
- Execution workspace → State playback: steps states
- Execution workspace → Code viewer: renders source
- Execution workspace → Execution state: renders state
- Execution workspace → Call tree view: renders calls
- Execution workspace → Visualization panel: selects visualization
- Execution workspace → Array visualizer: renders arrays
- Execution workspace → Stack visualizer: renders stacks
- Execution workspace → Queue visualizer: renders queues