Draw_Data: Implement new visualizers

[elsxyss]

Summary

This PR adds 2 new box-and-pointer visualizers for when the draw_data function is ran, so that now there are:

• Original View (original draw_data rendering)
• Render Binary Tree (binary tree structure with coloured node groups)
• Render General Tree (tree structure with coloured node groups, including non-binary trees)

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update
• Code quality improvements

Added Functionality

• Added 3 buttons to toggle between the Original View mode, Render Binary Tree mode, and Render General Tree mode
• Added variable visual space generation for both of the Tree modes, to generate the space required in the data visualizer based on the input tree structure, before generating the input
• Added specific node spacing algorithms for both of the Tree modes, to generate the input in a tree structure
• Added sequential colouring to the nodes for both of the Tree modes
• Added input validation checks for Render Binary Tree mode (valid binary tree input) and Render General Tree mode (valid tree input), and corresponding error messages
• Adjusted arrow (pointer) generation for all 3 modes (for better alignment with node boxes)

Files Edited

• Documentation:
  • src/features/dataVisualizer/[Documentation.md](http://documentation.md/)
  • src/features/dataVisualizer/images/BINARY_TREE_IMAGE.png
  • src/features/dataVisualizer/images/GENERAL_TREE_IMAGE.png
  • src/features/dataVisualizer/images/ORIGINAL_VIEW_IMAGE.png
• Buttons:
  • src/commons/sideContent/content/SideContentDataVisualizer.tsx
• Tree Drawing:
  • src/features/dataVisualizer/dataVisualizer.tsx
  • src/features/dataVisualizer/dataVisualizerTypes.ts
  • src/features/dataVisualizer/drawable/ArrayDrawable.tsx
  • src/features/dataVisualizer/drawable/ArrowDrawable.tsx
  • src/features/dataVisualizer/tree/ArrayTreeNode.tsx
  • src/features/dataVisualizer/tree/BaseTreeNode.ts
  • src/features/dataVisualizer/tree/DrawableTreeNode.tsx
  • src/features/dataVisualizer/tree/FunctionTreeNode.tsx
  • src/features/dataVisualizer/tree/Tree.tsx
  • src/commons/sagas/WorkspaceSaga/index.ts
• Spacing:
  • src/features/dataVisualizer/Config.ts

How to Test

Run the following code in the Source Academy playground and open the Data Visualizer:
draw_data(list(1,2,3)): should only give error for “Render Binary Tree” mode.
draw_data([1,2,3]): should only give errors for “Render Binary Tree” mode and “Render General Tree” mode.
draw_data(list(1,list(2,null,null),list(3,null, null))): should not have any error, generates tree structures correctly in any of the 3 modes.

The appropriate box-and-pointer diagram should be generated. Boxes belonging to the same node should be the same colour, while those from the neighbouring nodes should be in different colours. Examples are shown in the documentation file.

Checklist

• I have tested this code
• I have updated the documentation

[TYS2]

/gemini review

[gemini-code-assist]

Code Review

This pull request introduces specialized visualization modes for binary and general trees within the Data Visualizer. It refactors the drawing logic into dedicated drawer classes and adds UI controls to switch between these modes. Feedback highlights a flaw in the binary tree validation logic that fails to check all branches, and an issue where TreeDepth is not reset, potentially causing layout errors during redraws. Additionally, the review points out unsafe non-null assertions in the tree drawers, the use of non-standard onMouseUp events for buttons, and the presence of unused dead code.

[martin-henz]

/gemini review
can you do a final check that all reviewer comments are resolved?

[gemini-code-assist]

I have reviewed the current state of the pull request. The implementation of the new visualizers is in place, and the requested OOP refactor is underway. Regarding your request for a final check on reviewer comments:

• The documentation files mentioned in the PR description are being handled as discussed in comment Replace CSS with SCSS #5.
• The OOP refactor and structural improvements suggested in comment Scaffold Playground Layout #2 are currently being addressed by the team.

Since the PR is currently marked as a draft, please ensure all remaining refactoring tasks are completed and the code is fully tested before marking it as ready for final review. Let me know if you need any further assistance with specific parts of the implementation.

[martin-henz]

Looks good now. All reviewer comments are addressed.

gemini bot confirmed that the reviewer comments are addressed.