feat(viz): tree/BFS/DFS patterns

2025-09-01 20:49:11 +01:00
parent 99741d481b
commit eb21fc7435
13 changed files with 2119 additions and 1 deletions
--- a/frontend/src/components/visualizations-new/algorithms/dfs.tsx
+++ b/frontend/src/components/visualizations-new/algorithms/dfs.tsx
@@ -0,0 +1,85 @@
+'use client';
+
+import { useVisualization } from '@/lib/visualizations/use-visualization';
+import type { AlgorithmDefinition } from '@/lib/visualizations/types';
+import { VisualizationContainer } from '../core/visualization-container';
+import { BinaryTreeView } from '../data-structures/binary-tree-view';
+import { StackView } from '../data-structures/stack-view';
+import { ArrayView } from '../data-structures/array-view';
+
+interface DFSVisualizationProps {
+  algorithm: AlgorithmDefinition;
+  className?: string;
+}
+
+export function DFSVisualization({
+  algorithm,
+  className,
+}: DFSVisualizationProps) {
+  const {
+    currentStep,
+    currentStepIndex,
+    totalSteps,
+    playback,
+    controls,
+    currentPhase,
+    progress,
+  } = useVisualization(algorithm);
+
+  const { dataState } = currentStep;
+  const tree = dataState.trees?.[0] ?? null;
+  const dfsStack = dataState.stacks?.[0] ?? null;
+  const outputArray = dataState.arrays?.[0] ?? null;
+
+  // Find the current node ID based on node states
+  const currentNodeId = tree?.nodes.find((n) => n.state === 'current')?.id;
+
+  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 gap-8">
+        {/* Left: Binary tree */}
+        {tree && (
+          <BinaryTreeView
+            tree={tree}
+            currentNodeId={currentNodeId}
+          />
+        )}
+
+        {/* Right side: Stack + Output */}
+        <div className="flex flex-col gap-6">
+          {/* DFS Stack */}
+          {dfsStack && (
+            <StackView stack={dfsStack} />
+          )}
+
+          {/* Output array */}
+          {outputArray && (
+            <ArrayView
+              array={outputArray}
+              pointers={dataState.pointers}
+              elementSize="sm"
+              showIndices={false}
+            />
+          )}
+        </div>
+      </div>
+    </VisualizationContainer>
+  );
+}