55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import { useVisualization } from '@/lib/visualizations/use-visualization';
|
|
import type { AlgorithmDefinition } from '@/lib/visualizations/types';
|
|
import { VisualizationContainer } from '../core/visualization-container';
|
|
import { UnionFindView } from '../data-structures/union-find-view';
|
|
|
|
interface UnionFindVisualizationProps {
|
|
algorithm: AlgorithmDefinition;
|
|
className?: string;
|
|
}
|
|
|
|
export function UnionFindVisualization({
|
|
algorithm,
|
|
className,
|
|
}: UnionFindVisualizationProps) {
|
|
const {
|
|
currentStep,
|
|
currentStepIndex,
|
|
totalSteps,
|
|
playback,
|
|
controls,
|
|
currentPhase,
|
|
progress,
|
|
} = useVisualization(algorithm);
|
|
|
|
const { dataState } = currentStep;
|
|
const unionFind = dataState.unionFind?.[0] ?? null;
|
|
|
|
return (
|
|
<VisualizationContainer
|
|
title={algorithm.title}
|
|
pattern={algorithm.pattern}
|
|
code={algorithm.code}
|
|
currentLine={currentStep.codeLine}
|
|
highlightLines={currentStep.codeHighlightLines}
|
|
explanation={currentStep.explanation}
|
|
decision={currentStep.decision}
|
|
phase={currentPhase}
|
|
variables={dataState.variables}
|
|
currentStepIndex={currentStepIndex}
|
|
totalSteps={totalSteps}
|
|
isPlaying={playback.isPlaying}
|
|
speed={playback.speed}
|
|
controls={controls}
|
|
progress={progress}
|
|
className={className}
|
|
>
|
|
<div className="flex items-start justify-center min-h-[200px]">
|
|
{unionFind && <UnionFindView unionFind={unionFind} />}
|
|
</div>
|
|
</VisualizationContainer>
|
|
);
|
|
}
|