feat(viz): two pointers narrative

2025-08-24 15:30:46 +01:00
parent e5ebe7b188
commit 21227628fa
17 changed files with 2191 additions and 2 deletions
--- a/frontend/src/components/visualizations-new/data-structures/array-view.tsx
+++ b/frontend/src/components/visualizations-new/data-structures/array-view.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import type { ArrayState, PointerState } from "@/lib/visualizations/types";
+import { ArrayElement } from "../primitives/array-element";
+import { Pointer } from "../primitives/pointer";
+
+interface ArrayViewProps {
+  array: ArrayState;
+  pointers: PointerState[];
+  showIndices?: boolean;
+  elementSize?: "sm" | "md" | "lg";
+  className?: string;
+}
+
+// Must match SIZE_CLASSES in array-element.tsx (Tailwind units × 4)
+const ELEMENT_WIDTHS = {
+  sm: 40,  // w-10 = 40px
+  md: 56,  // w-14 = 56px
+  lg: 72,  // w-18 = 72px
+} as const;
+
+const ELEMENT_GAPS = {
+  sm: 4,
+  md: 8,
+  lg: 12,
+} as const;
+
+export function ArrayView({
+  array,
+  pointers,
+  showIndices = true,
+  elementSize = "md",
+  className,
+}: ArrayViewProps) {
+  const elementWidth = ELEMENT_WIDTHS[elementSize];
+  const gap = ELEMENT_GAPS[elementSize];
+
+  // Calculate total array width for proper pointer alignment
+  const totalWidth = array.elements.length * elementWidth + (array.elements.length - 1) * gap;
+
+  return (
+    <div className={cn("flex flex-col items-center", className)}>
+      {array.label && (
+        <span className="mb-2 text-sm font-medium text-[var(--muted-foreground)]">
+          {array.label}
+        </span>
+      )}
+
+      {/* Container that sizes to array width - ensures pointer/array alignment */}
+      <div className="relative" style={{ width: totalWidth }}>
+        {/* Pointers row */}
+        <div className="relative mb-1 h-10">
+          {pointers.map((pointer) => (
+            <Pointer
+              key={pointer.id}
+              pointer={pointer}
+              elementWidth={elementWidth}
+              gap={gap}
+              value={array.elements[pointer.index]?.value}
+            />
+          ))}
+        </div>
+
+        {/* Array elements */}
+        <div
+          className="flex"
+          style={{ gap: `${gap}px` }}
+        >
+          {array.elements.map((element) => (
+            <ArrayElement
+              key={`${array.id}-${element.index}`}
+              element={element}
+              size={elementSize}
+              showIndex={showIndices}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}