final code

Author: shivam7147

src/App.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 // import UnionFindPage from "../src/pages/graph/UnionFind.jsx"; // ✅ Import Union-Find Page
 import SortingPage from "./pages/sorting/SortingPage";
+import GraphPage from "./pages/graph/GraphPage";
 import Homepage from "./pages/Homepage.jsx";
 
 function App() {
@@ -11,9 +12,10 @@ function App() {
         <Route path="/" element={<Homepage />} />
         {/* <Route path="/graph/union-find" element={<UnionFindPage />} /> */}
         <Route path="/sorting" element={<SortingPage />} />
+        <Route path="/graph" element={<GraphPage />} />
       </Routes>
     </Router>
   );
 }
 
-export default App;
+export default App;

src/components/graph/KruskalVisualizer.jsx

@@ -165,6 +165,21 @@ export default function KruskalVisualizer() {
 
   return (
     <div className="w-full">
+          {/* 🧭 Manual / Instructions */}
+      <div className="max-w-4xl mx-auto mb-6 p-4 bg-gray-900 border border-gray-700 rounded-lg shadow-md text-sm text-gray-300">
+        <h3 className="text-indigo-400 font-bold mb-2 text-center">
+           How to Use the Kruskal Visualizer
+        </h3>
+        <ul className="list-disc pl-6 space-y-1">
+          <li> <b>Double-click</b> on the canvas to create a node.</li>
+          <li> <b>Click one node</b> and then another to create an edge.</li>
+          <li> You’ll be prompted to enter the <b>edge weight</b>.</li>
+          <li> Once your graph is ready, click <b>Start Visualization</b>.</li>
+          <li> The algorithm will highlight edges being considered, added, or skipped.</li>
+          <li> The <b>DSU panel</b> on the left updates in real time to show connected components.</li>
+          <li> Click <b>Reset</b> to clear and start again.</li>
+        </ul>
+      </div>
       {/* Controls */}
       <div className="flex gap-4 mb-6 justify-center">
         <button
@@ -187,13 +202,20 @@ export default function KruskalVisualizer() {
         </button>
       </div>
 
-      <div className="text-sm text-center text-indigo-300 mb-6">
-        <p>Status: <span className="font-medium text-indigo-400">{status}</span></p>
-        <p>Step: <span className="font-medium text-indigo-400">{stepIndex}</span></p>
+      {/* Status + Step */}
+      <div className="text-sm text-center text-indigo-300 mb-4">
+        <p>
+          Status: <span className="font-medium text-indigo-400">{status}</span>
+        </p>
+        <p>
+          Step: <span className="font-medium text-indigo-400">{stepIndex}</span>
+        </p>
       </div>
 
+    
+
       {/* Layout: DSU Panel + Graph */}
-      <div className="flex w-full max-w-6xl">
+      <div className="flex w-full max-w-6xl mx-auto">
         {/* Left DSU Panel */}
         <div className="w-1/4 bg-gray-900 border border-gray-700 rounded-lg p-3 mr-6 shadow-lg">
           <h2 className="text-lg font-bold mb-3 text-center text-indigo-400">

src/pages/graph/GraphPage.jsx

@@ -2,8 +2,7 @@ import React, { useState } from "react";
 import { Network, Compass, Rocket } from "lucide-react";
 import BellmanFord from "./BellmanFord";
 import UnionFindPage from "./UnionFind";
-// import Dijkstra from "./Dijkstra";
-// import Kruskal from "./Kruskal";
+import Kruskal from "./Kruskal"; 
 
 export default function GraphPage() {
   const [selectedAlgo, setSelectedAlgo] = useState("");
@@ -22,10 +21,14 @@ export default function GraphPage() {
             <UnionFindPage />
           </div>
         );
+      case "kruskal": 
+        return (
+          <div className="w-full h-full overflow-auto p-">
+            <Kruskal />
+          </div>
+        );
       // case "dijkstra":
       //   return <Dijkstra />;
-      // case "kruskal":
-      //   return <Kruskal />;
       default:
         return (
           <div className="flex flex-col items-center justify-center text-center p-6">
@@ -69,7 +72,7 @@ export default function GraphPage() {
           <option value="">Select Algorithm</option>
           <option value="bellman-ford">Bellman–Ford</option>
           <option value="union-find">Union Find</option>
-          {/* <option value="kruskal">Kruskal</option> */}
+          <option value="kruskal">Kruskal</option> {/* ✅ New dropdown option */}
         </select>
 
         <button