From cf1c2c374fc0901892d70656610fba1e469fd2ac Mon Sep 17 00:00:00 2001
From: Leon Sorokin <leeoniya@gmail.com>
Date: Thu, 5 Aug 2021 22:33:26 -0500
Subject: [PATCH] Tooltip: fix time label mismatched with cursor & hover points
 (#37615)

---
 .../uPlot/plugins/TooltipPlugin.tsx           | 22 ++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx
index 93e02a31372..2b9c8c61605 100644
--- a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx
+++ b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx
@@ -29,6 +29,15 @@ interface TooltipPluginProps {
   renderTooltip?: (alignedFrame: DataFrame, seriesIdx: number | null, datapointIdx: number | null) => React.ReactNode;
 }
 
+const eqArrays = (a: any[], b: any[]) => {
+  for (let i = 0; i < a.length; i++) {
+    if (a[i] !== b[i]) {
+      return false;
+    }
+  }
+  return true;
+};
+
 const TOOLTIP_OFFSET = 10;
 
 /**
@@ -114,13 +123,16 @@ export const TooltipPlugin: React.FC<TooltipPluginProps> = ({
         })(u);
       });
     } else {
-      config.addHook('setLegend', (u) => {
-        setFocusedPointIdx(u.cursor.idx!);
-        setFocusedPointIdxs(u.cursor.idxs!.slice());
-      });
+      let prevIdx: number | null = null;
+      let prevIdxs: Array<number | null> | null = null;
 
       // default series/datapoint idx retireval
       config.addHook('setCursor', (u) => {
+        if (u.cursor.idx !== prevIdx || prevIdxs == null || !eqArrays(prevIdxs, u.cursor.idxs!)) {
+          setFocusedPointIdx((prevIdx = u.cursor.idx!));
+          setFocusedPointIdxs((prevIdxs = u.cursor.idxs!.slice()));
+        }
+
         const bbox = plotCtx.getCanvasBoundingBox();
         if (!bbox) {
           return;
@@ -138,7 +150,7 @@ export const TooltipPlugin: React.FC<TooltipPluginProps> = ({
         setFocusedSeriesIdx(idx);
       });
     }
-  }, [plotCtx, config, setFocusedPointIdx, setFocusedSeriesIdx, setCoords]);
+  }, [plotCtx, config]);
 
   if (!plotInstance || focusedPointIdx === null || (!isActive && sync === DashboardCursorSync.Crosshair)) {
     return null;