From b7aa1ec613d67f4085441f06d1892a716e68f4e1 Mon Sep 17 00:00:00 2001
From: Cameron Dunn <cameron634@gmail.com>
Date: Sat, 11 Apr 2026 12:32:12 -0600
Subject: [PATCH 1/2] fix index line zoom

---
 .../components/graph2D/indexOverlay/IndexOverlay.tsx | 12 +++++++++++-
 frontend/src/utils/ReplayController.ts               |  2 +-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/graph2D/indexOverlay/IndexOverlay.tsx b/frontend/src/components/graph2D/indexOverlay/IndexOverlay.tsx
index c2ae188f..2c50291b 100644
--- a/frontend/src/components/graph2D/indexOverlay/IndexOverlay.tsx
+++ b/frontend/src/components/graph2D/indexOverlay/IndexOverlay.tsx
@@ -296,8 +296,18 @@ export function IndexOverlay({
         return;
       }
 
-      // Position index line
+      // Position index line — hide if the current x value is outside the zoomed viewport
       const px = chart.convertToPixel({ xAxisIndex: 0 }, xValue) as number;
+      const inBounds = px >= rect.x && px <= rect.x + rect.width;
+
+      if (!inBounds) {
+        lineEl.style.display = 'none';
+        dotEls.forEach((dotEl) => {
+          if (dotEl) dotEl.style.display = 'none';
+        });
+        return;
+      }
+
       lineEl.style.transform = `translate3d(${px}px, ${rect.y}px, 0)`;
       lineEl.style.height = `${rect.height}px`;
       lineEl.style.display = 'block';
diff --git a/frontend/src/utils/ReplayController.ts b/frontend/src/utils/ReplayController.ts
index d196c349..a242187e 100644
--- a/frontend/src/utils/ReplayController.ts
+++ b/frontend/src/utils/ReplayController.ts
@@ -161,7 +161,7 @@ export class ReplayController {
     if (latest) {
       this.emit({
         type: ReplayEventType.Progress,
-        currentIndex: this.currentIndex,
+        currentIndex: this.currentIndex - 1,
         data: latest, // only the newest point this frame
       });
     }

From 18739f8c9b87c566c3942aebee21c9b56f564a0c Mon Sep 17 00:00:00 2001
From: Cameron Dunn <cameron634@gmail.com>
Date: Sat, 11 Apr 2026 15:55:27 -0600
Subject: [PATCH 2/2] hide y dots

---
 .../graph2D/indexOverlay/IndexOverlay.tsx     | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/graph2D/indexOverlay/IndexOverlay.tsx b/frontend/src/components/graph2D/indexOverlay/IndexOverlay.tsx
index 2c50291b..1dc18c7f 100644
--- a/frontend/src/components/graph2D/indexOverlay/IndexOverlay.tsx
+++ b/frontend/src/components/graph2D/indexOverlay/IndexOverlay.tsx
@@ -296,28 +296,30 @@ export function IndexOverlay({
         return;
       }
 
-      // Position index line — hide if the current x value is outside the zoomed viewport
+      // Position index line — hide if the current x or y value is outside the zoomed viewport
       const px = chart.convertToPixel({ xAxisIndex: 0 }, xValue) as number;
-      const inBounds = px >= rect.x && px <= rect.x + rect.width;
+      const inBoundsX = px >= rect.x && px <= rect.x + rect.width;
 
-      if (!inBounds) {
+      if (!inBoundsX) {
         lineEl.style.display = 'none';
         dotEls.forEach((dotEl) => {
           if (dotEl) dotEl.style.display = 'none';
         });
         return;
       }
-
+      
       lineEl.style.transform = `translate3d(${px}px, ${rect.y}px, 0)`;
       lineEl.style.height = `${rect.height}px`;
       lineEl.style.display = 'block';
 
       // Position dots
-      yValues.forEach((yValue, seriesIndex) => {
-        const dotEl = dotEls[seriesIndex];
-        if (!dotEl) return;
-        if (yValue != null) {
-          const py = chart.convertToPixel({ yAxisIndex: 0 }, yValue) as number;
+      dotEls.forEach((dotEl, seriesIndex) => {
+        const yValue = yValues[seriesIndex];
+        if (!dotEl || yValue == null) return;
+
+        const py = chart.convertToPixel({ yAxisIndex: 0 }, yValue) as number;
+        const inBoundsY = py >= rect.y && py <= rect.y + rect.height;
+        if (inBoundsY) {
           dotEl.style.transform = `translate3d(${px - 6}px, ${py - 6}px, 0)`;
           dotEl.style.display = 'block';
         } else {
@@ -325,9 +327,10 @@ export function IndexOverlay({
         }
       });
 
-      for (let i = yValues.length; i < dotEls.length; i++) {
-        if (dotEls[i]) dotEls[i].style.display = 'none';
-      }
+      // Not sure what this code does
+      // for (let i = yValues.length; i < dotEls.length; i++) {
+      //   if (dotEls[i]) dotEls[i].style.display = 'none';
+      // }
 
       // Build tooltip HTML
       const xLabel = xAxis.unit