Skip to content

Commit 87eeeaf

Browse files
committed
final code
1 parent c049dce commit 87eeeaf

File tree

3 files changed

+37
-10
lines changed

3 files changed

+37
-10
lines changed

src/App.jsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from "react";
22
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
33
// import UnionFindPage from "../src/pages/graph/UnionFind.jsx"; // ✅ Import Union-Find Page
44
import SortingPage from "./pages/sorting/SortingPage";
5+
import GraphPage from "./pages/graph/GraphPage";
56
import Homepage from "./pages/Homepage.jsx";
67

78
function App() {
@@ -11,9 +12,10 @@ function App() {
1112
<Route path="/" element={<Homepage />} />
1213
{/* <Route path="/graph/union-find" element={<UnionFindPage />} /> */}
1314
<Route path="/sorting" element={<SortingPage />} />
15+
<Route path="/graph" element={<GraphPage />} />
1416
</Routes>
1517
</Router>
1618
);
1719
}
1820

19-
export default App;
21+
export default App;

src/components/graph/KruskalVisualizer.jsx

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,21 @@ export default function KruskalVisualizer() {
165165

166166
return (
167167
<div className="w-full">
168+
{/* 🧭 Manual / Instructions */}
169+
<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">
170+
<h3 className="text-indigo-400 font-bold mb-2 text-center">
171+
How to Use the Kruskal Visualizer
172+
</h3>
173+
<ul className="list-disc pl-6 space-y-1">
174+
<li> <b>Double-click</b> on the canvas to create a node.</li>
175+
<li> <b>Click one node</b> and then another to create an edge.</li>
176+
<li> You’ll be prompted to enter the <b>edge weight</b>.</li>
177+
<li> Once your graph is ready, click <b>Start Visualization</b>.</li>
178+
<li> The algorithm will highlight edges being considered, added, or skipped.</li>
179+
<li> The <b>DSU panel</b> on the left updates in real time to show connected components.</li>
180+
<li> Click <b>Reset</b> to clear and start again.</li>
181+
</ul>
182+
</div>
168183
{/* Controls */}
169184
<div className="flex gap-4 mb-6 justify-center">
170185
<button
@@ -187,13 +202,20 @@ export default function KruskalVisualizer() {
187202
</button>
188203
</div>
189204

190-
<div className="text-sm text-center text-indigo-300 mb-6">
191-
<p>Status: <span className="font-medium text-indigo-400">{status}</span></p>
192-
<p>Step: <span className="font-medium text-indigo-400">{stepIndex}</span></p>
205+
{/* Status + Step */}
206+
<div className="text-sm text-center text-indigo-300 mb-4">
207+
<p>
208+
Status: <span className="font-medium text-indigo-400">{status}</span>
209+
</p>
210+
<p>
211+
Step: <span className="font-medium text-indigo-400">{stepIndex}</span>
212+
</p>
193213
</div>
194214

215+
216+
195217
{/* Layout: DSU Panel + Graph */}
196-
<div className="flex w-full max-w-6xl">
218+
<div className="flex w-full max-w-6xl mx-auto">
197219
{/* Left DSU Panel */}
198220
<div className="w-1/4 bg-gray-900 border border-gray-700 rounded-lg p-3 mr-6 shadow-lg">
199221
<h2 className="text-lg font-bold mb-3 text-center text-indigo-400">

src/pages/graph/GraphPage.jsx

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@ import React, { useState } from "react";
22
import { Network, Compass, Rocket } from "lucide-react";
33
import BellmanFord from "./BellmanFord";
44
import UnionFindPage from "./UnionFind";
5-
// import Dijkstra from "./Dijkstra";
6-
// import Kruskal from "./Kruskal";
5+
import Kruskal from "./Kruskal";
76

87
export default function GraphPage() {
98
const [selectedAlgo, setSelectedAlgo] = useState("");
@@ -22,10 +21,14 @@ export default function GraphPage() {
2221
<UnionFindPage />
2322
</div>
2423
);
24+
case "kruskal":
25+
return (
26+
<div className="w-full h-full overflow-auto p-">
27+
<Kruskal />
28+
</div>
29+
);
2530
// case "dijkstra":
2631
// return <Dijkstra />;
27-
// case "kruskal":
28-
// return <Kruskal />;
2932
default:
3033
return (
3134
<div className="flex flex-col items-center justify-center text-center p-6">
@@ -69,7 +72,7 @@ export default function GraphPage() {
6972
<option value="">Select Algorithm</option>
7073
<option value="bellman-ford">Bellman–Ford</option>
7174
<option value="union-find">Union Find</option>
72-
{/* <option value="kruskal">Kruskal</option> */}
75+
<option value="kruskal">Kruskal</option> {/* ✅ New dropdown option */}
7376
</select>
7477

7578
<button

0 commit comments

Comments
 (0)