viz primitives for data structures

frontend/src/components/visualization/structure-renderer.tsx

@@ -2,6 +2,10 @@
 
 import { useVisualization } from "./visualization-context";
 import { ArrayVisualizer } from "./visualizers/array-visualizer";
+import { HistogramVisualizer } from "./visualizers/histogram-visualizer";
+import { LinkedListVisualizer } from "./visualizers/linkedlist-visualizer";
+import { StackVisualizer } from "./visualizers/stack-visualizer";
+import { TreeVisualizer } from "./visualizers/tree-visualizer";
 import type { DataStructureState } from "@/types/visualization";
 
 interface StructureVisualizerProps {
@@ -13,36 +17,21 @@ function StructureVisualizer({ name, data }: StructureVisualizerProps) {
   switch (data.type) {
     case "array":
       return <ArrayVisualizer data={data} name={name} />;
+    case "histogram":
+      return <HistogramVisualizer data={data} name={name} />;
     case "linkedlist":
-      // Phase 3: LinkedListVisualizer
-      return (
-        <div className="text-muted-foreground">
-          LinkedList visualization coming soon
-        </div>
-      );
+      return <LinkedListVisualizer data={data} name={name} />;
     case "stack":
-      // Phase 3: StackVisualizer
-      return (
-        <div className="text-muted-foreground">
-          Stack visualization coming soon
-        </div>
-      );
+      return <StackVisualizer data={data} name={name} />;
     case "tree":
-      // Phase 3: TreeVisualizer
-      return (
-        <div className="text-muted-foreground">
-          Tree visualization coming soon
-        </div>
-      );
+      return <TreeVisualizer data={data} name={name} />;
     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