Overview
Allow users to enter custom datasets. For Sorting and Searching, add a custom comma-separated number input box. For Pathfinding, implement an interactive grid canvas drawing tool allowing users to click/drag to draw custom walls, start/target nodes, and weighted terrain.
Implementation Details & File Reference
- Sorting/Searching Custom Input: Add custom array text input in
frontend/src/pages/SortingPage.tsx and SearchingPage.tsx using parseCustomArrayInput.
- Pathfinding Canvas Editor: Update
frontend/src/pages/PathfindingPage.tsx to handle mouse drag events (onMouseDown, onMouseEnter) on grid cells to toggle walls or set start/target coordinates.
- Backend DTO: Pass custom grid matrix or array payload in
SortingSimulationRequest and PathfindingSimulationRequest.
Definition of Done
- Users can type custom array values (e.g.
42, 7, 19, 88) and race algorithms on them.
- Users can draw maze walls or relocate start/end nodes directly on the grid before starting a race.
- Custom setups submit to backend successfully and render simulation frames accurately.
Skill Level
Hard — requires mouse event state handling on canvas/grid and custom payload validation.
Overview
Allow users to enter custom datasets. For Sorting and Searching, add a custom comma-separated number input box. For Pathfinding, implement an interactive grid canvas drawing tool allowing users to click/drag to draw custom walls, start/target nodes, and weighted terrain.
Implementation Details & File Reference
frontend/src/pages/SortingPage.tsxandSearchingPage.tsxusingparseCustomArrayInput.frontend/src/pages/PathfindingPage.tsxto handle mouse drag events (onMouseDown,onMouseEnter) on grid cells to toggle walls or set start/target coordinates.SortingSimulationRequestandPathfindingSimulationRequest.Definition of Done
42, 7, 19, 88) and race algorithms on them.Skill Level
Hard — requires mouse event state handling on canvas/grid and custom payload validation.