feat: Replace MiniMap with traversal path display after DFS/BFS completion

Author: ToWhiD073

src/components/GraphVisualizer.jsx

@@ -10,6 +10,7 @@ import ReactFlow, {
 } from "reactflow";
 import "reactflow/dist/style.css";
 import { useGraphStore } from "../store/graphStore";
+import { TraversalPath } from "./TraversalPath";
 
 const nodeTypes = {};
 
@@ -139,12 +140,24 @@ export const GraphVisualizer = () => {
         >
           <Background color="#aaa" gap={16} />
           <Controls />
-          <MiniMap
-            nodeColor={(node) => getNodeColor(node.id, traversalState)}
-            nodeStrokeWidth={3}
-            zoomable
-            pannable
-          />
+          {traversalState.isComplete ? (
+            <div style={{
+              position: 'absolute',
+              bottom: 20,
+              right: 20,
+              zIndex: 1000,
+              maxWidth: 300
+            }}>
+              <TraversalPath />
+            </div>
+          ) : (
+            <MiniMap
+              nodeColor={(node) => getNodeColor(node.id, traversalState)}
+              nodeStrokeWidth={3}
+              zoomable
+              pannable
+            />
+          )}
         </ReactFlow>
       </div>
     </Card>

src/components/TraversalPath.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Card, Typography } from 'antd';
+import { useGraphStore } from '../store/graphStore';
+
+const { Text } = Typography;
+
+export const TraversalPath = () => {
+  const { traversalState, algorithm } = useGraphStore();
+  const { visitOrder, isComplete } = traversalState;
+
+  if (!visitOrder || visitOrder.length === 0) {
+    return null;
+  }
+
+  const pathString = visitOrder.join(' → ');
+
+  return (
+    <Card 
+      title={`${algorithm} Traversal Path`} 
+      size="small" 
+      style={{ marginTop: 16 }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        <Text strong>Path: </Text>
+        <Text code style={{ fontSize: '14px' }}>
+          {pathString}
+        </Text>
+        {isComplete && (
+          <Text type="success" style={{ marginLeft: 8 }}>
+            ✓ Complete
+          </Text>
+        )}
+      </div>
+      <div style={{ marginTop: 8 }}>
+        <Text type="secondary">
+          Nodes visited: {visitOrder.length}
+        </Text>
+      </div>
+    </Card>
+  );
+};