feat: heap visualizer

Author: shivam7147

src/algorithms/dataStructure/heap.js

@@ -0,0 +1,63 @@
+export function createHeap(type = "max") {
+  let heap = [];
+  const compare = (a, b) => (type === "max" ? a > b : a < b);
+
+  const swap = (i, j) => {
+    [heap[i], heap[j]] = [heap[j], heap[i]];
+  };
+
+  const heapifyUp = () => {
+    let i = heap.length - 1;
+    while (i > 0) {
+      let p = Math.floor((i - 1) / 2);
+      if (compare(heap[i], heap[p])) {
+        swap(i, p);
+        i = p;
+      } else break;
+    }
+  };
+
+  const heapifyDown = () => {
+    let i = 0;
+    const n = heap.length;
+    while (true) {
+      let l = 2 * i + 1,
+        r = 2 * i + 2,
+        target = i; // ✅ changed from 'largest' → 'target' for clarity
+      if (l < n && compare(heap[l], heap[target])) target = l;
+      if (r < n && compare(heap[r], heap[target])) target = r;
+      if (target === i) break;
+      swap(i, target);
+      i = target;
+    }
+  };
+
+  return {
+    getHeap: () => [...heap],
+
+    insert: (val) => {
+      heap.push(val);
+      heapifyUp();
+      return [...heap];
+    },
+
+    deleteRoot: () => {
+      if (heap.length === 0) return [];
+      if (heap.length === 1) {
+        heap.pop();
+        return [];
+      }
+
+      // ✅ fixed: replace root with last, pop last, then heapify
+      heap[0] = heap[heap.length - 1];
+      heap.pop();
+      heapifyDown();
+      return [...heap];
+    },
+
+    reset: () => {
+      heap = [];
+      return [];
+    },
+  };
+}

src/components/dataStructure/HeapVisualizer.jsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+function getHeapLevels(heap) {
+  const result = [];
+  let levelStart = 0;
+  let levelSize = 1;
+
+  while (levelStart < heap.length) {
+    result.push(heap.slice(levelStart, levelStart + levelSize));
+    levelStart += levelSize;
+    levelSize *= 2;
+  }
+
+  return result;
+}
+
+export default function HeapVisualizer({ heap }) {
+  const levels = getHeapLevels(heap);
+
+  return (
+    <div className="flex flex-col items-center mt-10 space-y-8">
+      <AnimatePresence>
+        {levels.map((level, i) => (
+          <motion.div
+            key={i}
+            className="flex justify-center space-x-8"
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -30 }}
+            transition={{ duration: 0.4 }}
+          >
+            {level.map((val, j) => (
+              <motion.div
+                key={`${i}-${j}-${val}`}
+                layout
+                initial={{ scale: 0, opacity: 0 }}
+                animate={{ scale: 1, opacity: 1 }}
+                exit={{ scale: 0, opacity: 0 }}
+                transition={{ duration: 0.4 }}
+                className="bg-gradient-to-r from-purple-500 to-indigo-500 text-white font-semibold
+                           w-16 h-16 flex items-center justify-center rounded-2xl shadow-md
+                           transition-all duration-300 transform hover:scale-105"
+              >
+                {val}
+              </motion.div>
+            ))}
+          </motion.div>
+        ))}
+      </AnimatePresence>
+    </div>
+  );
+}

src/pages/dataStructure/HeapPage.jsx

@@ -0,0 +1,75 @@
+import React, { useState } from "react";
+import HeapVisualizer from "../../components/dataStructure/HeapVisualizer.jsx";
+import { createHeap } from "../../algorithms/dataStructure/heap.js";
+
+export default function HeapPage() {
+  const [heapType, setHeapType] = useState("min");
+  const [heapObj, setHeapObj] = useState(() => createHeap(heapType));
+  const [heap, setHeap] = useState([]);
+  const [value, setValue] = useState("");
+
+  const insertValue = () => {
+    if (!value.trim()) return;
+    const updated = heapObj.insert(Number(value));
+    setHeap(updated);
+    setValue("");
+  };
+
+  const deleteRoot = () => setHeap(heapObj.deleteRoot());
+  const reset = () => {
+    const cleared = heapObj.reset();
+    setHeap(cleared);
+  };
+
+  const toggleType = () => {
+    const newType = heapType === "min" ? "max" : "min";
+    const newHeap = createHeap(newType);
+    setHeapType(newType);
+    setHeapObj(newHeap);
+    setHeap([]);
+  };
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen bg-black text-white">
+      <h1 className="text-3xl font-bold mb-8 text-indigo-400 uppercase tracking-wide">
+        {heapType.toUpperCase()} Heap Visualizer
+      </h1>
+
+      <div className="flex gap-4 mb-6">
+        <input
+          type="number"
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          placeholder="Enter value"
+          className="px-4 py-2 rounded bg-gray-800 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-purple-500"
+        />
+        <button
+          onClick={insertValue}
+          className="px-4 py-2 rounded bg-purple-600 hover:bg-purple-700 transition font-semibold"
+        >
+          Insert
+        </button>
+        <button
+          onClick={deleteRoot}
+          className="px-4 py-2 rounded bg-red-600 hover:bg-red-700 transition font-semibold"
+        >
+          Delete Root
+        </button>
+        <button
+          onClick={reset}
+          className="px-4 py-2 rounded bg-gray-700 hover:bg-gray-600 transition font-semibold"
+        >
+          Reset
+        </button>
+        <button
+          onClick={toggleType}
+          className="px-4 py-2 rounded bg-fuchsia-600 hover:bg-fuchsia-700 transition font-semibold"
+        >
+          Switch to {heapType === "min" ? "Max" : "Min"} Heap
+        </button>
+      </div>
+
+      <HeapVisualizer heap={heap} />
+    </div>
+  );
+}

src/pages/dataStructure/datastructurePage.jsx

@@ -4,7 +4,7 @@ import StackPage from "./stack.jsx";
 import LinkedListPage from "./linkedlist.jsx"; // ✅ Linked List page import
 import QueuePage from "./queue.jsx";
 import BinaryTreePage from "./BinaryTreePage.jsx";
-
+import HeapPage from "./HeapPage.jsx";
 
 export default function DSPage() {
   const [selectedDS, setSelectedDS] = useState("");
@@ -37,6 +37,12 @@ export default function DSPage() {
       <BinaryTreePage />
     </div>
   );
+  case "heap":
+  return (
+    <div className="w-full h-full overflow-auto">
+      <HeapPage />
+    </div>
+  );
 
 
       default:
@@ -84,6 +90,7 @@ export default function DSPage() {
           <option value="queue">Queue</option>
           <option value="linkedlist">Linked List</option>
           <option value="binarytree">Binary Tree / BST</option>
+          <option value="heap">Heap</option>
 
         </select>