From 1fa755bada0c0f2e59ae7a2a9fa7a6032db4c3af Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Thu, 27 May 2021 10:51:06 +0200
Subject: [PATCH]  Time series panel: Position tooltip correctly when window
 scrolled or resized (#34782)

* Position GraphNG tooltip correctly when window scrolled or resized

* Use syncRect uPlot hook instead of polling

* update snap?!
---
 packages/grafana-ui/src/components/TimeSeries/utils.ts   | 1 +
 packages/grafana-ui/src/components/uPlot/Plot.tsx        | 9 ++++++++-
 .../src/components/uPlot/config/UPlotConfigBuilder.ts    | 9 +++++++++
 .../src/components/uPlot/plugins/TooltipPlugin.tsx       | 6 ++----
 4 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/packages/grafana-ui/src/components/TimeSeries/utils.ts b/packages/grafana-ui/src/components/TimeSeries/utils.ts
index cb410cf8d6826..f23a57b6efba6 100644
--- a/packages/grafana-ui/src/components/TimeSeries/utils.ts
+++ b/packages/grafana-ui/src/components/TimeSeries/utils.ts
@@ -229,6 +229,7 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<{ sync: DashboardCursor
       data: frame,
     };
     const hoverEvent = new DataHoverEvent(payload);
+    builder.setSync();
     builder.setCursor({
       sync: {
         key: '__global_',
diff --git a/packages/grafana-ui/src/components/uPlot/Plot.tsx b/packages/grafana-ui/src/components/uPlot/Plot.tsx
index 8d7f6fcab2ed4..16e1d3d0c7348 100755
--- a/packages/grafana-ui/src/components/uPlot/Plot.tsx
+++ b/packages/grafana-ui/src/components/uPlot/Plot.tsx
@@ -36,7 +36,9 @@ export class UPlotChart extends React.Component<PlotProps, UPlotChartState> {
     this.state = {
       ctx: {
         plot: null,
-        getCanvasBoundingBox: () => this.plotCanvasBBox.current,
+        getCanvasBoundingBox: () => {
+          return this.plotCanvasBBox.current;
+        },
       },
     };
   }
@@ -50,6 +52,11 @@ export class UPlotChart extends React.Component<PlotProps, UPlotChartState> {
     if (width === 0 && height === 0) {
       return;
     }
+
+    this.props.config.addHook('syncRect', (u, rect) => {
+      (this.plotCanvasBBox as MutableRefObject<any>).current = rect;
+    });
+
     this.props.config.addHook('setSize', (u) => {
       const canvas = u.over;
       if (!canvas) {
diff --git a/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.ts b/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.ts
index aecb58eac10bb..e415abc547745 100644
--- a/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.ts
+++ b/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.ts
@@ -29,6 +29,7 @@ export class UPlotConfigBuilder {
   private hasBottomAxis = false;
   private hooks: Hooks.Arrays = {};
   private tz: string | undefined = undefined;
+  private sync = false;
   // to prevent more than one threshold per scale
   private thresholds: Record<string, UPlotThresholdOptions> = {};
   /**
@@ -134,6 +135,14 @@ export class UPlotConfigBuilder {
     this.tooltipInterpolator = interpolator;
   }
 
+  setSync() {
+    this.sync = true;
+  }
+
+  hasSync() {
+    return this.sync;
+  }
+
   getConfig() {
     const config: PlotConfig = { series: [{}] };
     config.axes = this.ensureNonOverlappingAxes(Object.values(this.axes)).map((a) => a.getConfig());
diff --git a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx
index 172673dd2c362..1408d19018eeb 100644
--- a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx
+++ b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx
@@ -39,7 +39,6 @@ export const TooltipPlugin: React.FC<TooltipPluginProps> = ({
   const [focusedSeriesIdx, setFocusedSeriesIdx] = useState<number | null>(null);
   const [focusedPointIdx, setFocusedPointIdx] = useState<number | null>(null);
   const [coords, setCoords] = useState<CartesianCoords2D | null>(null);
-
   const pluginId = `TooltipPlugin`;
 
   // Debug logs
@@ -88,20 +87,19 @@ export const TooltipPlugin: React.FC<TooltipPluginProps> = ({
     } else {
       // default series/datapoint idx retireval
       config.addHook('setCursor', (u) => {
+        setFocusedPointIdx(u.cursor.idx === undefined ? u.posToIdx(u.cursor.left || 0) : u.cursor.idx);
+
         const bbox = plotCtx.getCanvasBoundingBox();
         if (!bbox) {
           return;
         }
 
         const { x, y } = positionTooltip(u, bbox);
-
         if (x !== undefined && y !== undefined) {
           setCoords({ x, y });
         } else {
           setCoords(null);
         }
-
-        setFocusedPointIdx(u.cursor.idx === undefined ? u.posToIdx(u.cursor.left || 0) : u.cursor.idx);
       });
 
       config.addHook('setSeries', (_, idx) => {