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 = ({ })(u); }); } else { - config.addHook('setLegend', (u) => { - setFocusedPointIdx(u.cursor.idx!); - setFocusedPointIdxs(u.cursor.idxs!.slice()); - }); + let prevIdx: number | null = null; + let prevIdxs: Array | 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 = ({ setFocusedSeriesIdx(idx); }); } - }, [plotCtx, config, setFocusedPointIdx, setFocusedSeriesIdx, setCoords]); + }, [plotCtx, config]); if (!plotInstance || focusedPointIdx === null || (!isActive && sync === DashboardCursorSync.Crosshair)) { return null;