Merge pull request #98 from Scc33/claude/phase-5-primitives

Phase 5: visual primitives refactor

Author: Scc33

__tests__/context/AlgorithmContext.test.ts

@@ -13,6 +13,7 @@ const baseState: VisualizationState = {
 };
 
 const fakeViz: AlgorithmVisualization = {
+  primitive: "array-bars",
   steps: [
     { array: [3, 1, 2], comparing: [], swapped: false, completed: [] },
     { array: [1, 2, 3], comparing: [], swapped: false, completed: [0, 1, 2] },

…ents/visualizer/SortingVisualization.tsx components/primitives/ArrayBars.tsxcomponents/visualizer/SortingVisualization.tsx renamed to components/primitives/ArrayBars.tsx components/visualizer/SortingVisualization.tsx renamed to components/primitives/ArrayBars.tsx

@@ -1,22 +1,18 @@
 import type { SortingStep } from "@/lib/types";
 
-interface SortingVisualizationProps {
+interface ArrayBarsProps {
   step: SortingStep;
   maxValue: number;
 }
 
-export default function SortingVisualization({
-  step,
-  maxValue,
-}: SortingVisualizationProps) {
+export default function ArrayBars({ step, maxValue }: ArrayBarsProps) {
   const { array, comparing, swapped, completed } = step;
 
   return (
     <div className="flex h-64 w-full items-end justify-center bg-white p-6">
       {array.map((value, index) => {
         const height = (value / maxValue) * 100;
 
-        // Determine the bar color based on its state
         let barColor = "bg-blue-400";
         if (completed.includes(index)) {
           barColor = "bg-green-400";

…nents/visualizer/SearchVisualization.tsx components/primitives/ArrayCells.tsxcomponents/visualizer/SearchVisualization.tsx renamed to components/primitives/ArrayCells.tsx components/visualizer/SearchVisualization.tsx renamed to components/primitives/ArrayCells.tsx

@@ -1,51 +1,11 @@
 import type { SearchStep } from "@/lib/types";
-import { useAlgorithm } from "@/context/AlgorithmContext";
-import { getSearchAlgorithm } from "@/lib/algorithms";
-import { useState, useEffect } from "react";
 
-interface SearchVisualizationProps {
+interface ArrayCellsProps {
   step: SearchStep;
-  maxValue: number;
 }
 
-export default function SearchVisualization({
-  step,
-}: SearchVisualizationProps) {
+export default function ArrayCells({ step }: ArrayCellsProps) {
   const { array, current, target, found, visited } = step;
-  const { state, dispatch } = useAlgorithm();
-  const [inputTarget, setInputTarget] = useState(target.toString());
-
-  // Update the input field when the target changes externally
-  useEffect(() => {
-    setInputTarget(target.toString());
-  }, [target]);
-
-  const handleTargetChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = e.target.value;
-    setInputTarget(newValue);
-
-    // Only process valid numbers
-    const newTarget = parseInt(newValue);
-    if (!isNaN(newTarget) && newTarget !== target) {
-      updateTarget(newTarget);
-    }
-  };
-
-  const updateTarget = (newTarget: number) => {
-    // Update the target value
-    dispatch({ type: "SET_TARGET", payload: newTarget });
-
-    // Regenerate visualization with the new target
-    const algorithmFunction = getSearchAlgorithm(state.algorithm);
-    if (algorithmFunction) {
-      try {
-        const viz = algorithmFunction(state.data, newTarget);
-        dispatch({ type: "GENERATE_VISUALIZATION", payload: viz });
-      } catch (error) {
-        console.error("Error generating visualization:", error);
-      }
-    }
-  };
 
   const isNotFound = current === -1 && visited.length > 0;
   let statusClass = "text-gray-600";
@@ -60,37 +20,22 @@ export default function SearchVisualization({
 
   return (
     <div className="flex w-full flex-col items-center space-y-8 bg-white p-6">
-      <div className="mb-4 flex w-full flex-wrap items-center gap-4">
-        <div className="flex items-center gap-2">
-          <label htmlFor="target-input" className="font-medium text-gray-600">
-            Target Value:
-          </label>
-          <input
-            id="target-input"
-            type="number"
-            value={inputTarget}
-            onChange={handleTargetChange}
-            className="w-16 rounded border border-gray-300 px-2 py-1 text-center text-gray-600"
-          />
-        </div>
-
-        <div className="ml-auto font-medium text-gray-600">
+      <div className="mb-4 flex w-full items-center justify-end">
+        <div className="font-medium text-gray-600">
           Status:
           <span className={`ml-2 font-bold ${statusClass}`}>{statusText}</span>
         </div>
       </div>
 
       <div className="flex w-full items-center justify-center">
         {array.map((value, index) => {
-          // Determine the element's state for styling
-          let stateClass = "bg-blue-400"; // Default state
-
+          let stateClass = "bg-blue-400";
           if (found && index === current) {
-            stateClass = "bg-green-500"; // Found state
+            stateClass = "bg-green-500";
           } else if (index === current && !found) {
-            stateClass = "bg-yellow-400"; // Current examining state
+            stateClass = "bg-yellow-400";
           } else if (visited.includes(index) && !found) {
-            stateClass = "bg-gray-400"; // Already visited state
+            stateClass = "bg-gray-400";
           }
 
           return (

components/primitives/CodeView.tsx

@@ -0,0 +1,38 @@
+interface CodeViewProps {
+  code: string[];
+  currentLine?: number;
+}
+
+export default function CodeView({ code, currentLine }: CodeViewProps) {
+  return (
+    <div className="card">
+      <div className="border-b bg-gray-100 px-4 py-3">
+        <h3 className="heading-sm">Pseudocode</h3>
+      </div>
+
+      <div className="overflow-auto bg-white p-4">
+        <pre className="font-mono text-sm whitespace-pre-wrap text-gray-800">
+          {code.map((line, index) => {
+            const indentMatch = line.match(/^\s*/);
+            const indentLevel = indentMatch ? indentMatch[0].length / 4 : 0;
+            const paddingLeft = `${indentLevel * 1.5}rem`;
+            const isActive = currentLine === index;
+            const lineClasses = isActive
+              ? "border-yellow-400 bg-yellow-100"
+              : "border-transparent hover:border-blue-400 hover:bg-blue-50";
+
+            return (
+              <div
+                key={index}
+                className={`border-l-2 py-1 transition-colors ${lineClasses}`}
+                style={{ paddingLeft }}
+              >
+                {line}
+              </div>
+            );
+          })}
+        </pre>
+      </div>
+    </div>
+  );
+}

…onents/visualizer/GraphVisualization.tsx components/primitives/Graph2D.tsxcomponents/visualizer/GraphVisualization.tsx renamed to components/primitives/Graph2D.tsx components/visualizer/GraphVisualization.tsx renamed to components/primitives/Graph2D.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import type { GraphStep } from "@/lib/types";
 import { useState, useEffect } from "react";
 import type { ReactNode } from "react";
@@ -17,11 +19,11 @@ function getStatusMessage(
   return <p>Traversal will start from a selected vertex.</p>;
 }
 
-interface GraphVisualizationProps {
+interface Graph2DProps {
   step: GraphStep;
 }
 
-export default function GraphVisualization({ step }: GraphVisualizationProps) {
+export default function Graph2D({ step }: Graph2DProps) {
   const { graph, current, visited, stack, path, treeEdges } = step;
   const [graphSize, setGraphSize] = useState({ width: 0, height: 0 });
 

components/visualizer/graphEdge.tsx components/primitives/graphEdge.tsxcomponents/visualizer/graphEdge.tsx renamed to components/primitives/graphEdge.tsx

@@ -0,0 +1,38 @@
+import type { ReactElement } from "react";
+import { createElement } from "react";
+import type { AlgorithmVisualization } from "@/lib/types";
+import ArrayBars from "./ArrayBars";
+import ArrayCells from "./ArrayCells";
+import Graph2D from "./Graph2D";
+
+export { default as ArrayBars } from "./ArrayBars";
+export { default as ArrayCells } from "./ArrayCells";
+export { default as Graph2D } from "./Graph2D";
+export { default as CodeView } from "./CodeView";
+
+/**
+ * Renders the visualization for the current step using the primitive
+ * declared on the AlgorithmVisualization. The discriminated union on
+ * `viz.primitive` makes the switch exhaustive at the type level — adding
+ * a new primitive surfaces as a compile error here.
+ */
+export function renderPrimitive(
+  viz: AlgorithmVisualization,
+  currentStep: number
+): ReactElement {
+  switch (viz.primitive) {
+    case "array-bars": {
+      const step = viz.steps[currentStep]!;
+      const maxValue = step.array.length > 0 ? Math.max(...step.array) : 100;
+      return createElement(ArrayBars, { step, maxValue });
+    }
+    case "array-cells": {
+      const step = viz.steps[currentStep]!;
+      return createElement(ArrayCells, { step });
+    }
+    case "graph-2d": {
+      const step = viz.steps[currentStep]!;
+      return createElement(Graph2D, { step });
+    }
+  }
+}

components/primitives/index.ts

@@ -1,13 +1,10 @@
 "use client";
 
-import SortingVisualization from "./SortingVisualization";
-import SearchVisualization from "./SearchVisualization";
-import GraphVisualization from "./GraphVisualization";
 import VisualizerControls from "./VisualizerControls";
 import AlgorithmInfo from "./AlgorithmInfo";
-import AlgorithmPseudocode from "./AlgorithmPseudocode";
 import ColorLegend from "./ColorLegend";
 import ArrayInputPanel from "./ArrayInputPanel";
+import { CodeView, renderPrimitive } from "@/components/primitives";
 import { useAlgorithm } from "@/context/AlgorithmContext";
 import {
   getGraphAlgorithm,
@@ -17,12 +14,7 @@ import {
 } from "@/lib/algorithms";
 import { defaultGraphFor } from "@/lib/algorithms/graph/sampleGraphs";
 import { generateRandomArray, getRandomValueFromArray } from "@/lib/utils";
-import type {
-  AlgorithmVisualization,
-  GraphStep,
-  SearchStep,
-  SortingStep,
-} from "@/lib/types";
+import type { AlgorithmVisualization, GraphStep } from "@/lib/types";
 
 function regenerateGraph(
   algorithm: string,
@@ -81,7 +73,7 @@ export default function AlgorithmVisualizer() {
   const category = visualizationData?.category ?? "";
 
   const numVertices =
-    category === "graph" && visualizationData
+    visualizationData?.primitive === "graph-2d"
       ? (visualizationData.steps[0] as GraphStep).graph.numVertices
       : 6;
 
@@ -133,8 +125,6 @@ export default function AlgorithmVisualizer() {
     if (viz) dispatch({ type: "GENERATE_VISUALIZATION", payload: viz });
   };
 
-  const maxValue = data.length > 0 ? Math.max(...data) : 100;
-
   if (!visualizationData) {
     return (
       <div className="flex h-64 items-center justify-center">
@@ -146,30 +136,16 @@ export default function AlgorithmVisualizer() {
     );
   }
 
+  const currentLine = visualizationData.steps[currentStep]?.lineNumber;
+
   return (
     <div className="space-y-8">
       <AlgorithmInfo algorithm={visualizationData} />
 
       <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
         <div className="space-y-6 lg:col-span-2">
           <div className="card">
-            {category === "sorting" && (
-              <SortingVisualization
-                step={visualizationData.steps[currentStep] as SortingStep}
-                maxValue={maxValue}
-              />
-            )}
-            {category === "searching" && (
-              <SearchVisualization
-                step={visualizationData.steps[currentStep] as SearchStep}
-                maxValue={maxValue}
-              />
-            )}
-            {category === "graph" && (
-              <GraphVisualization
-                step={visualizationData.steps[currentStep] as GraphStep}
-              />
-            )}
+            {renderPrimitive(visualizationData, currentStep)}
           </div>
 
           <ArrayInputPanel
@@ -193,7 +169,10 @@ export default function AlgorithmVisualizer() {
         </div>
 
         <div className="lg:col-span-1">
-          <AlgorithmPseudocode code={visualizationData.pseudoCode} />
+          <CodeView
+            code={visualizationData.pseudoCode}
+            {...(currentLine !== undefined ? { currentLine } : {})}
+          />
         </div>
       </div>
     </div>

components/visualizer/AlgorithmPseudocode.tsx

@@ -70,7 +70,7 @@ export function bellmanFord(
     path: [...state.path],
   });
 
-  return createVisualization("bellmanFord", state.steps, {
+  return createVisualization("bellmanFord", "graph-2d", state.steps, {
     timeComplexity: "O(V·E)",
     spaceComplexity: "O(V)",
     reference: "https://en.wikipedia.org/wiki/Bellman%E2%80%93Ford_algorithm",