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