added orange color for intermediate steps of merge sort

src/App.js

@@ -6,17 +6,22 @@ import {
   Quick,
   Selection,
   Merge,
+  Heap,
 } from "./components/Helper/constants";
 import { generateArray } from "./components/Helper/helper";
 import { InsertionSort } from "./components/SortingAlgorithms/InsertionSort";
 import { QuickSort } from "./components/SortingAlgorithms/QuickSort";
 import { SelectionSort } from "./components/SortingAlgorithms/SelectionSort";
 import { MergeSort } from "./components/SortingAlgorithms/MergeSort";
+import { HeapSort } from "./components/SortingAlgorithms/HeapSort";
 import SortingBars from "./components/SortingBars";
 
 function App() {
+  const [algorithm, setAlgorithm] = useState(() => {
+    const saved = localStorage.getItem("selectedAlgorithm");
+    return saved || Insertion;
+  });
   const [array, setArray] = useState([]);
-  const [algorithm, setAlgorithm] = useState(Insertion);
 
   const newArray = (len = 50) => {
     generateArray(len, setArray);
@@ -29,28 +34,37 @@ function App() {
   const sortArray = async (array) => {
     switch (algorithm) {
       case Insertion:
-        InsertionSort(array, setArray);
+        await InsertionSort(array, setArray);
         break;
       case Selection:
-        SelectionSort(array, setArray);
+        await SelectionSort(array, setArray);
         break;
       case Quick:
-        QuickSort(array, 0, array.length - 1, setArray);
+        await QuickSort(array, 0, array.length - 1, setArray);
         break;
       case Merge:
-        MergeSort(array, setArray);
+        await MergeSort(array, setArray);
+        break;
+      case Heap:
+        await HeapSort(array, setArray);
         break;
       default:
         console.log("Not algo");
     }
   };
+
+  const updateAlgorithm = (algo) => {
+    setAlgorithm(algo);
+    localStorage.setItem("selectedAlgorithm", algo);
+  };
+
   return (
     <div className="app">
       <Appbar
         sortArray={sortArray}
         array={array}
         algorithm={algorithm}
-        setAlgorithm={setAlgorithm}
+        setAlgorithm={updateAlgorithm}
       />
       <SortingBars array={array} />
     </div>

src/components/Helper/constants.js

@@ -5,3 +5,5 @@ export const Selection = "Selection";
 export const Quick = "Quick";
 
 export const Merge = "Merge";
+
+export const Heap = "Heap";

src/components/Helper/helper.js

@@ -16,7 +16,8 @@ export const generateArray = (len, setArray) => {
   const min = 100,
     max = 600;
   for (let index = 0; index < len; index++) {
-    array.push(Math.floor(Math.random() * (max - min) + min));
+    const value = Math.floor(Math.random() * (max - min) + min);
+    array.push({ id: index, value, color: "dodgerblue" });
   }
   setArray([...array]);
 };

src/components/Sidebar.jsx

@@ -47,7 +47,7 @@ const Sidebar = (props) => {
         </IconButton>
       </div>
       <List>
-        {["Insertion", "Selection", "Merge", "Quick"].map((text, index) => (
+        {["Insertion", "Selection", "Merge", "Quick", "Heap"].map((text, index) => (
           <ListItem
             onClick={() => {
               props.selectAlgorithm(text);

src/components/SortingAlgorithms/HeapSort.js

@@ -0,0 +1,45 @@
+import { sleep } from "../Helper/helper";
+
+export async function HeapSort(array, setArray) {
+  let n = array.length;
+
+  // Build heap (rearrange array)
+  for (let i = Math.floor(n / 2) - 1; i >= 0; i--) {
+    await heapify(array, n, i, setArray);
+  }
+
+  for (let i = n - 1; i > 0; i--) {
+    [array[0], array[i]] = [array[i], array[0]];
+    array[i].color = "green";
+    await sleep(500);
+    setArray([...array]);
+
+    await heapify(array, i, 0, setArray);
+  }
+
+  array[0].color = "green";
+  await sleep(500);
+  setArray([...array]);
+}
+
+async function heapify(array, n, i, setArray) {
+  let largest = i; // Initialize largest as root
+  let l = 2 * i + 1; // left = 2*i + 1
+  let r = 2 * i + 2; // right = 2*i + 2
+
+  // If left child is larger than root
+  if (l < n && array[l].value > array[largest].value) largest = l;
+
+  // If right child is larger than largest so far
+  if (r < n && array[r].value > array[largest].value) largest = r;
+
+  // If largest is not root
+  if (largest !== i) {
+    [array[i], array[largest]] = [array[largest], array[i]];
+    await sleep(200);
+    setArray([...array]);
+
+    // Recursively heapify the affected sub-tree
+    await heapify(array, n, largest, setArray);
+  }
+}

src/components/SortingAlgorithms/InsertionSort.js

@@ -6,13 +6,24 @@ export async function InsertionSort(array, setArray) {
     for (let i = 1; i < array.length; i++) {
       temp = array[i];
       j = i - 1;
-      while (j >= 0 && array[j] > temp) {
+      while (j >= 0 && array[j].value > temp.value) {
         array[j + 1] = array[j];
         j--;
       }
       array[j + 1] = temp;
+      array[j + 1].color = "green";
       await sleep(500);
       setArray([...array]);
+
+      for (let k = 0; k <= i; k++) {
+        array[k].color = "green";
+      }
+    }
+
+    for (let k = 0; k <= index; k++) {
+      array[k].color = "green";
     }
+    await sleep(500);
+    setArray([...array]);
   }
 }

src/components/SortingAlgorithms/MergeSort.js

@@ -37,9 +37,8 @@ const mergeSortHelper = async (array, left, right, setArray) => {
  * @param {function} setArray - State setter to update the array in the UI
  */
 const merge = async (array, left, mid, right, setArray) => {
-  // Create copies of the left and right subarrays
-  const leftArr = array.slice(left, mid + 1);
-  const rightArr = array.slice(mid + 1, right + 1);
+  const leftArr = array.slice(left, mid + 1).map(item => item.value);
+  const rightArr = array.slice(mid + 1, right + 1).map(item => item.value);
 
   let i = 0, // Pointer for left subarray
     j = 0, // Pointer for right subarray
@@ -48,31 +47,46 @@ const merge = async (array, left, mid, right, setArray) => {
   // Compare elements from left and right subarrays and merge them in sorted order
   while (i < leftArr.length && j < rightArr.length) {
     if (leftArr[i] <= rightArr[j]) {
-      array[k] = leftArr[i];
+      array[k].value = leftArr[i];
       i++;
     } else {
-      array[k] = rightArr[j];
+      array[k].value = rightArr[j];
       j++;
     }
     k++;
+    if (left === 0) {
+      array[k - 1].color = "green";
+    } else {
+      array[k - 1].color = "orange";
+    }
     await sleep(500);
     setArray([...array]);
   }
 
   // Add remaining elements from left subarray
   while (i < leftArr.length) {
-    array[k] = leftArr[i];
+    array[k].value = leftArr[i];
     i++;
     k++;
+    if (left === 0) {
+      array[k - 1].color = "green";
+    } else {
+      array[k - 1].color = "orange";
+    }
     await sleep(500);
     setArray([...array]);
   }
 
   // Add remaining elements from right subarray
   while (j < rightArr.length) {
-    array[k] = rightArr[j];
+    array[k].value = rightArr[j];
     j++;
     k++;
+    if (left === 0) {
+      array[k - 1].color = "green";
+    } else {
+      array[k - 1].color = "orange";
+    }
     await sleep(500);
     setArray([...array]);
   }

src/components/SortingAlgorithms/QuickSort.js

@@ -3,8 +3,12 @@ import { sleep } from "../Helper/helper";
 export const QuickSort = async (array, l, u, setArray) => {
   if (u > l) {
     const p = await Partition(array, l, u, setArray);
-    QuickSort(array, l, p - 1, setArray);
-    QuickSort(array, p + 1, u, setArray);
+    await QuickSort(array, l, p - 1, setArray);
+    await QuickSort(array, p + 1, u, setArray);
+  } else if (u === l && u >= 0) {
+    array[u].color = "green";
+    await sleep(50);
+    setArray([...array]);
   }
 };
 
@@ -13,17 +17,18 @@ const Partition = async (array, l, u, setArray) => {
   let start = l,
     end = u;
   while (start < end) {
-    while (array[start] <= array[p]) {
+    while (array[start].value <= array[p].value) {
       start++;
     }
-    while (array[end] > array[p]) {
+    while (array[end].value > array[p].value) {
       end--;
     }
     if (start < end) {
       [array[end], array[start]] = [array[start], array[end]];
     }
   }
   [array[end], array[l]] = [array[l], array[end]];
+  array[end].color = "green";
   await sleep(500);
   setArray([...array]);
   return end;

src/components/SortingAlgorithms/SelectionSort.js

@@ -5,7 +5,7 @@ export async function SelectionSort(array, setArray) {
     let min = i;
 
     for (let j = i + 1; j < array.length; j++) {
-      if (array[j] < array[min]) {
+      if (array[j].value < array[min].value) {
         min = j;
       }
     }
@@ -15,7 +15,12 @@ export async function SelectionSort(array, setArray) {
       array[min] = temp;
       //   console.log(array);
     }
+    array[i].color = "green";
     await sleep(500);
     setArray([...array]);
   }
+
+  array[array.length - 1].color = "green";
+  await sleep(500);
+  setArray([...array]);
 }

src/components/SortingBars.jsx

@@ -8,11 +8,12 @@ const SortingBars = (props) => {
       <div className={styles.body}>
         {props.array.map((bar) => (
           <div
-            className={bar}
-            id={bar}
+            key={bar.id}
+            className="bar"
+            id={bar.id}
             style={{
-              height: bar,
-              backgroundColor: "dodgerblue",
+              height: bar.value,
+              backgroundColor: bar.color,
               width: 50,
               marginRight: 1,
               borderRadius: "50px",