feat(viz): interactive algorithm viz system

2025-08-23 20:28:22 +01:00
parent 7f330c7cbb
commit 2d581ab14f
17 changed files with 1321 additions and 1 deletions
@@ -0,0 +1,88 @@
+"use client";
+
+import { useVisualization } from "./visualization-context";
+import { ArrayVisualizer } from "./visualizers/array-visualizer";
+import type { DataStructureState } from "@/types/visualization";
+
+interface StructureVisualizerProps {
+  name: string;
+  data: DataStructureState;
+}
+
+function StructureVisualizer({ name, data }: StructureVisualizerProps) {
+  switch (data.type) {
+    case "array":
+      return <ArrayVisualizer data={data} name={name} />;
+    case "linkedlist":
+      // Phase 3: LinkedListVisualizer
+      return (
+        <div className="text-muted-foreground">
+          LinkedList visualization coming soon
+        </div>
+      );
+    case "stack":
+      // Phase 3: StackVisualizer
+      return (
+        <div className="text-muted-foreground">
+          Stack visualization coming soon
+        </div>
+      );
+    case "tree":
+      // Phase 3: TreeVisualizer
+      return (
+        <div className="text-muted-foreground">
+          Tree visualization coming soon
+        </div>
+      );
+    case "graph":
+      // Phase 5: GraphVisualizer
+      return (
+        <div className="text-muted-foreground">
+          Graph visualization coming soon
+        </div>
+      );
+    case "matrix":
+      // Phase 5: MatrixVisualizer
+      return (
+        <div className="text-muted-foreground">
+          Matrix visualization coming soon
+        </div>
+      );
+    default:
+      return (
+        <div className="text-muted-foreground">
+          Unknown data structure type
+        </div>
+      );
+  }
+}
+
+export function StructureRenderer() {
+  const { currentStep } = useVisualization();
+
+  if (!currentStep?.structures) {
+    return (
+      <div className="text-center text-muted-foreground">
+        No data structures to display
+      </div>
+    );
+  }
+
+  const structureEntries = Object.entries(currentStep.structures);
+
+  if (structureEntries.length === 0) {
+    return (
+      <div className="text-center text-muted-foreground">
+        No data structures to display
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-6">
+      {structureEntries.map(([name, data]) => (
+        <StructureVisualizer key={name} name={name} data={data} />
+      ))}
+    </div>
+  );
+}