From 425c92a92b8059d1577d3e175d88a1862e6cc3d6 Mon Sep 17 00:00:00 2001
From: Leon Sorokin <leeoniya@gmail.com>
Date: Mon, 24 Jul 2023 14:30:38 -0500
Subject: [PATCH] TimeSeries: Fix zoom not working after editing panel (#72163)

Co-authored-by: nmarrs <nathanielmarrs@gmail.com>
---
 .../components/uPlot/plugins/ZoomPlugin.tsx   | 38 +++++++------------
 1 file changed, 14 insertions(+), 24 deletions(-)

diff --git a/packages/grafana-ui/src/components/uPlot/plugins/ZoomPlugin.tsx b/packages/grafana-ui/src/components/uPlot/plugins/ZoomPlugin.tsx
index 30927cd6ae7..d0697334379 100644
--- a/packages/grafana-ui/src/components/uPlot/plugins/ZoomPlugin.tsx
+++ b/packages/grafana-ui/src/components/uPlot/plugins/ZoomPlugin.tsx
@@ -1,7 +1,6 @@
-import { useEffect, useLayoutEffect, useState } from 'react';
+import { useLayoutEffect } from 'react';
 
 import { UPlotConfigBuilder } from '../config/UPlotConfigBuilder';
-import { PlotSelection } from '../types';
 import { pluginLog } from '../utils';
 
 interface ZoomPluginProps {
@@ -16,33 +15,24 @@ const MIN_ZOOM_DIST = 5;
  * @alpha
  */
 export const ZoomPlugin = ({ onZoom, config }: ZoomPluginProps) => {
-  const [selection, setSelection] = useState<PlotSelection | null>(null);
-
-  useEffect(() => {
-    if (selection) {
-      pluginLog('ZoomPlugin', false, 'selected', selection);
-      if (selection.bbox.width < MIN_ZOOM_DIST) {
-        return;
-      }
-      onZoom({ from: selection.min, to: selection.max });
-    }
-  }, [selection]);
-
   useLayoutEffect(() => {
     config.addHook('setSelect', (u) => {
       const min = u.posToVal(u.select.left, 'x');
       const max = u.posToVal(u.select.left + u.select.width, 'x');
 
-      setSelection({
-        min,
-        max,
-        bbox: {
-          left: u.bbox.left / window.devicePixelRatio + u.select.left,
-          top: u.bbox.top / window.devicePixelRatio,
-          height: u.bbox.height / window.devicePixelRatio,
-          width: u.select.width,
-        },
-      });
+      if (u.select.width >= MIN_ZOOM_DIST) {
+        pluginLog('ZoomPlugin', false, 'selected', {
+          min,
+          max,
+          bbox: {
+            left: u.bbox.left / window.devicePixelRatio + u.select.left,
+            top: u.bbox.top / window.devicePixelRatio,
+            height: u.bbox.height / window.devicePixelRatio,
+            width: u.select.width,
+          },
+        });
+        onZoom({ from: min, to: max });
+      }
 
       // manually hide selected region (since cursor.drag.setScale = false)
       /* @ts-ignore */