From 8f88af4e2a0e8ac73a7411e8f897d902b9f8c074 Mon Sep 17 00:00:00 2001
From: Marshall Polaris <marshall@pol.rs>
Date: Wed, 28 Sep 2022 00:56:43 -0700
Subject: [PATCH] Fix an edge case with chart mouseover tooltips (#949)

---
 web/components/charts/generic-charts.tsx | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/web/components/charts/generic-charts.tsx b/web/components/charts/generic-charts.tsx
index 05c26a42..cb12ea45 100644
--- a/web/components/charts/generic-charts.tsx
+++ b/web/components/charts/generic-charts.tsx
@@ -150,7 +150,13 @@ export const SingleValueDistributionChart = (props: {
     if (ev.pointerType === 'mouse') {
       const [mouseX, mouseY] = pointer(ev)
       const queryX = xScale.invert(mouseX)
-      const [_x, y] = data[xBisector.center(data, queryX)]
+      const item = data[xBisector.left(data, queryX) - 1]
+      if (item == null) {
+        // this can happen if you are on the very left or right edge of the chart,
+        // so your queryX is out of bounds
+        return
+      }
+      const [_x, y] = item
       setMouseState({ top: mouseY - 10, left: mouseX + 60, p: [queryX, y] })
     }
   })
@@ -250,7 +256,13 @@ export const MultiValueHistoryChart = (props: {
     if (ev.pointerType === 'mouse') {
       const [mouseX, mouseY] = pointer(ev)
       const queryX = xScale.invert(mouseX)
-      const [_x, ys] = data[xBisector.left(data, queryX) - 1]
+      const item = data[xBisector.left(data, queryX) - 1]
+      if (item == null) {
+        // this can happen if you are on the very left or right edge of the chart,
+        // so your queryX is out of bounds
+        return
+      }
+      const [_x, ys] = item
       setMouseState({ top: mouseY - 10, left: mouseX + 60, p: [queryX, ys] })
     }
   })
@@ -354,7 +366,13 @@ export const SingleValueHistoryChart = (props: {
     if (ev.pointerType === 'mouse') {
       const [mouseX, mouseY] = pointer(ev)
       const queryX = xScale.invert(mouseX)
-      const [_x, y] = data[xBisector.left(data, queryX) - 1]
+      const item = data[xBisector.left(data, queryX) - 1]
+      if (item == null) {
+        // this can happen if you are on the very left or right edge of the chart,
+        // so your queryX is out of bounds
+        return
+      }
+      const [_x, y] = item
       setMouseState({ top: mouseY - 10, left: mouseX + 60, p: [queryX, y] })
     }
   })