78 lines
2.1 KiB
TypeScript
78 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
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 {
|
|
name: string;
|
|
data: DataStructureState;
|
|
}
|
|
|
|
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":
|
|
return <LinkedListVisualizer data={data} name={name} />;
|
|
case "stack":
|
|
return <StackVisualizer data={data} name={name} />;
|
|
case "tree":
|
|
return <TreeVisualizer data={data} name={name} />;
|
|
case "graph":
|
|
return (
|
|
<div className="text-muted-foreground">
|
|
Graph visualization coming soon
|
|
</div>
|
|
);
|
|
case "matrix":
|
|
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>
|
|
);
|
|
}
|