Time series panel: Position tooltip correctly when window scrolled o…

…r resized (grafana#34782) * Position GraphNG tooltip correctly when window scrolled or resized * Use syncRect uPlot hook instead of polling * update snap?!
kevisong · May 27, 2021 · 1fa755b · 1fa755b
1 parent 23cf31a
commit 1fa755b
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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) => {