Feat: Complete Multi-Algorithm Comparison and UI Overhaul

[ras-al]

Features Implemented:

• Multi-Algorithm Comparison:
  • Enabled support for running up to 6 sorting algorithms simultaneously.
  • Implemented dynamic grid layout (1x1, 1x2, 2x3) that adapts to the number of active algorithms.
  • Added 'Add Algorithm' and 'Remove Algorithm' controls to the sidebar.
  • Refactored state management to handle an array of algorithm instances.
  • Synchronized 'Play/Pause' functionality to wait for all algorithms to complete before stopping.

UI & Visualization Enhancements:

• Fixed Bar Label Visibility: Scaled max bar height to 90% to prevent numerical values from being clipped at the top.
• Light Mode Visibility Fixes:
  • Corrected text contrast for Contributors Section, Linked List, Tree, Heap, and DP visualizers.
  • Updated node and edge colors for better visibility on light backgrounds.
• Sorting Performance: Tweaked speed calculation logic for significantly faster execution at high settings.
• Textual Feedback: Added real-time step descriptions (e.g., 'Comparing 5 and 10', 'Swapping elements') below the visualization.

Bug Fixes:

• Fixed 'ReferenceError: arraySize is not defined' by restoring missing core state variables.
• Resolved Syntax Errors in DsaVisualization.jsx by restoring accidentally deleted Header and Sidebar components.
• Fixed layout shift issues in the main visualizer container.

[Copilot]

Pull request overview

This PR implements a comprehensive multi-algorithm comparison feature and UI overhaul for the DSA visualization tool. The changes enable users to run up to 6 sorting algorithms simultaneously with dynamic grid layouts, add real-time textual feedback for algorithm steps, and fix various visibility issues in light mode.

Key Changes

• Multi-algorithm state management refactoring from single algorithm to array-based (sortingAlgorithms)
• Dynamic grid layout that adapts from 1x1 to 2x3 based on active algorithm count
• Real-time step descriptions for better understanding of algorithm behavior
• Bar height scaled to 90% to prevent label clipping
• Enhanced light/dark mode support across all visualizers

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 18 comments.

File	Description
src/pages/DsaVisualization.jsx	Major refactor adding multi-algorithm support with synchronized play/pause, dynamic grid layout, step descriptions, and improved dark/light mode styling
src/lib/dsaAlgorithms.js	Enhanced algorithm step generation to include detailed values for descriptive feedback (formatting improvements throughout)
src/components/dsa/ContributorsSection.jsx	Fixed text contrast issues for light mode by adding conditional styling based on darkMode prop

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.