Visual Debugger

Structs.sh will visualise your own DSA programs and help you debug

sub-features
- embedded code editor
- visualisation workspace
graph: need a way for user to mark
- nodes (the data structure) and
- pointers to nodes (the algorithm)
array: need a way for user to mark
- array slots (the data structure) and
- indices (the algorithm
Show local/global state, perhaps using gdb for C/C++
how
- structs module
  - classes to represent
    - nodes,
    - pointers,
    - array slots,
    - indices,
  - users import the structs module and use our classes for their nodes, pointers etc
  - then the structs module can visual stuff
- code annotations with transpiler
- python: decorators
- Run user program in GDB then use GDB to inspect state
  - UI for user to select what variables are a node, curr pointer, prev pointer, etc
  - User specifies data structure, then the visual debugger will construct a linked list / tree / graph for them?

General Visualisers

Graph Visualiser
- Graph implementation visualiser (adjacency matrix etc)
Matrix Visualiser
Will include Drawing Tool functionality
- Intuitive UI for creating, deleting, changing value of nodes/slots
- Annotating with labels, coloring, markers
- Save a snapshot of each step of your algorithm and revisit each snapshot in a slideshow panel
- Freedraw mode, constrained mode e.g. BST
Allow sequence inputting, for users to specify a sequence of values to insert/delete/search/etc

Enhancements
- Syntax highlighting for the code stepper
- Needs to look good + work on all screen sizes
- Easing functions
- Prettier, more colorful, more stylish, more lively
- Better controls for the operations e.g. insert delete search etc.
- Workspace manipulation (zoom, translation, re-position)
- Slightly confusing for first-time users
- As we expand to support more courses, may need a way to organize data
Timeline feature - show each snapshot in a slideshow panel or popup like YouTube video playback
- Many users (structs applicants) find the current timeline feature unintuitive, aren’t aware they can pause and move frame-by-frame
Sequence input
Time/space complexity
Displaying Educational Materials

Export as png, gif
Sharing visualisations via permalink
- Including code + test case
- Committed versions, live version
Embed structs in other apps (e.g. csesoc website)
Persistence: Store visualisations (free-style drawings) in local storage or database
- Server: cloud sync algo
- User accounts
Real-time updates
- Real-time synchronised viewing and editing (useful for study groups, or tutorial classes)
  - How useful is this really when we have screen-share
- Classroom setting: Would be useful for students to get the code of the tutor in real-time and be able to run it themself, through just a permalink

Might have to use an external library like d3.js to position the graph vertices
- Tim the founder/god of Structs.sh has a PR on this because he’s absolutely cracked [Needs Feedback] Graph Visualiser Prototype by Tymotex · Pull Request #349 · devsoc-unsw/structs.sh
- DFS/BFS
- Dijkstra’s algorithm + Prim’s algorithm

Max flow algorithms (Edmonds-Karp & Ford-Fulkerson) (Should be easier once graphs are implemented)
Dynamic programming (Knapsack, Longest increasing subsequence)

Keep these in mind when developing