52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
"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>
|
|
);
|
|
}
|