How zep4yrs/struct works
StructVis is a browser-based learning environment for data structures, algorithms, and MySQL concepts. Learners browse the course catalog, open a lesson, and step through an interactive visualization; SQL lessons can also execute scripts or learner-written queries locally. Practice, progress tracking, review, and reporting extend that learning loop. The README documents the player pipeline and major capabilities; the sampled source excerpts show engine behavior, but not every route or integration call, so uncertain wiring is omitted.
Main entry points: sql-executor.ts SQL execution · progress.ts Progress and mastery · db/+page.svelte Database lessons · workbench/+page.svelte SQL workbench
Components 23
Course and lessons
- Home and navigation
structvis/src/routes/home/+page.svelte - Course catalog
structvis/src/routes/catalog/+page.svelte - Topic and chapter content
structvis/src/lib/content/topics.ts - Lesson pages
structvis/src/routes/ds/+page.svelte - Database lessons
structvis/src/routes/db/+page.svelte
Playback and rendering
- Algorithm player
structvis/src/lib/components/player/AlgoPlayer.svelte - SQL script player
structvis/src/lib/components/player/ScriptPlayer.svelte - Algorithm and DB engines
structvis/src/lib/engines - SQL scripts and stages
structvis/src/lib/engines/sql/scripts - Timeline controls
structvis/src/lib/components/player/TimelineController.ts - Visualization renderers
structvis/src/lib/visualization - SQL execution
structvis/src/lib/engines/sql/sql-executor.ts
Practice and progress
- Quiz and chapter practice
structvis/src/routes/quiz/+page.svelte - SQL workbench
structvis/src/routes/db/workbench/+page.svelte - Workbench stages and scoring
structvis/src/lib/engines/sql/scripts/workbench-levels.ts - Progress and mastery
structvis/src/lib/stores/progress.ts - Browser persistence
structvis/src/lib/stores/persistent.ts - Progress report
structvis/src/routes/progress/+page.svelte
Learning tools
- Skill graph
structvis/src/lib/content/skill-graph.ts - Sorting race lab
structvis/src/routes/race/+page.svelte - Learner settings
structvis/src/lib/stores/settings.ts
Other components
- Learner
- sql.js in-memory database
Connections 27
- Learner → Home and navigation: opens
- Learner → Course catalog: browses
- Course catalog → Topic and chapter content: derives listings
- Learner → Lesson pages: selects lesson
- Learner → Database lessons: selects topic
- Lesson pages → Algorithm player: assembles
- Database lessons → Algorithm player: assembles
- Algorithm player → Algorithm and DB engines: requests steps
- Algorithm and DB engines → Timeline controls: provides keyframes
- Timeline controls → Visualization renderers: drives playback
- Database lessons → SQL script player: presents scripts
- SQL script player → SQL scripts and stages: loads script stages
- SQL scripts and stages → SQL execution: supplies SQL
- SQL execution → sql.js in-memory database: executes locally
- SQL execution → Visualization renderers: returns results
- Learner → SQL workbench: writes SQL
- SQL workbench → SQL execution: runs query
- SQL workbench → Workbench stages and scoring: requests scoring
- Workbench stages and scoring → Progress and mastery: updates mastery
- Learner → Quiz and chapter practice: answers questions
- Quiz and chapter practice → Progress and mastery: records practice
- Progress and mastery → Browser persistence: persists locally
- Progress report → Progress and mastery: reads learning data
- Progress report → Skill graph: shows skill map
- Learner → Sorting race lab: compares sorts
- Learner → Learner settings: configures
- Learner settings → Browser persistence: persists locally