linked list visualisations

frontend/src/components/visualizations-new/primitives/pointer.tsx

@@ -9,6 +9,10 @@ interface PointerProps {
   elementWidth: number;
   gap: number;
   value?: number;
+  /** Hide the value to save space when pointers are close */
+  hideValue?: boolean;
+  /** Horizontal offset when multiple pointers at same position */
+  horizontalOffset?: number;
   className?: string;
 }
 
@@ -24,10 +28,12 @@ export function Pointer({
   elementWidth,
   gap,
   value,
+  hideValue = false,
+  horizontalOffset = 0,
   className,
 }: PointerProps) {
-  // Calculate center of element: index * (width + gap) + width / 2
-  const offset = pointer.index * (elementWidth + gap) + elementWidth / 2;
+  // Calculate center of element: index * (width + gap) + width / 2, plus any offset for overlapping
+  const offset = pointer.index * (elementWidth + gap) + elementWidth / 2 + horizontalOffset;
 
   return (
     <motion.div
@@ -40,7 +46,7 @@ export function Pointer({
       }}
       className={cn("absolute top-0 h-full", className)}
     >
-      {/* Label - centered above the point */}
+      {/* Label - centered above the arrow */}
       <span
         className={cn(
           "absolute left-0 top-0 -translate-x-1/2 whitespace-nowrap rounded-full px-2 py-0.5 text-xs font-medium",
@@ -48,7 +54,7 @@ export function Pointer({
         )}
       >
         {pointer.name}
-        {pointer.showValue && value !== undefined && (
+        {!hideValue && pointer.showValue && value !== undefined && (
           <span className="ml-1 font-mono">= {value}</span>
         )}
       </span>