feat(viz): interactive algorithm viz system

2025-08-23 20:28:22 +01:00
parent 3b3479a7da
commit 1031af4e3b
17 changed files with 1321 additions and 1 deletions
@@ -0,0 +1,51 @@
+"use client";
+
+import { VisualizationProvider } from "./visualization-context";
+import { StepController } from "./step-controller";
+import { StepDescription } from "./step-description";
+import { VariablesPane } from "./variables-pane";
+import { StructureRenderer } from "./structure-renderer";
+import type { VisualizationData } from "@/types/visualization";
+
+interface VisualizationContainerProps {
+  data: VisualizationData;
+  className?: string;
+}
+
+export function VisualizationContainer({
+  data,
+  className = "",
+}: VisualizationContainerProps) {
+  if (!data.steps || data.steps.length === 0) {
+    return (
+      <div className="rounded-lg border border-border bg-muted/50 p-8 text-center text-muted-foreground">
+        No visualization steps available
+      </div>
+    );
+  }
+
+  return (
+    <VisualizationProvider data={data}>
+      <div className={`flex flex-col gap-4 ${className}`}>
+        {/* Title */}
+        <div className="flex items-center justify-between">
+          <h3 className="text-lg font-semibold">{data.title}</h3>
+        </div>
+
+        {/* Step description */}
+        <StepDescription />
+
+        {/* Data structure visualization */}
+        <div className="rounded-lg border border-border bg-card p-4">
+          <StructureRenderer />
+        </div>
+
+        {/* Variables */}
+        <VariablesPane />
+
+        {/* Controls */}
+        <StepController />
+      </div>
+    </VisualizationProvider>
+  );
+}