ZoomPlugin: Remove the timeRange prop (#69148)

* fix: remove a breaking change

---------

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>

packages/grafana-ui/src/components/uPlot/plugins/ZoomPlugin.tsx

@@ -1,6 +1,4 @@
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useState } from 'react';
-
-import { TimeRange } from '@grafana/data';
 
 import { UPlotConfigBuilder } from '../config/UPlotConfigBuilder';
 import { PlotSelection } from '../types';
@@ -9,7 +7,6 @@ import { pluginLog } from '../utils';
 interface ZoomPluginProps {
   onZoom: (range: { from: number; to: number }) => void;
   config: UPlotConfigBuilder;
-  timeRange: TimeRange;
 }
 
 // min px width that triggers zoom
@@ -18,14 +15,9 @@ const MIN_ZOOM_DIST = 5;
 /**
  * @alpha
  */
-export const ZoomPlugin = ({ onZoom, config, timeRange }: ZoomPluginProps) => {
+export const ZoomPlugin = ({ onZoom, config }: ZoomPluginProps) => {
   const [selection, setSelection] = useState<PlotSelection | null>(null);
 
-  const refTimeRange = useRef<TimeRange>(timeRange);
-  useEffect(() => {
-    refTimeRange.current = timeRange;
-  }, [timeRange]);
-
   useEffect(() => {
     if (selection) {
       pluginLog('ZoomPlugin', false, 'selected', selection);
@@ -59,9 +51,11 @@ export const ZoomPlugin = ({ onZoom, config, timeRange }: ZoomPluginProps) => {
 
     config.setCursor({
       bind: {
-        dblclick: () => () => {
+        dblclick: (u) => () => {
-          const frTs = refTimeRange.current.from.valueOf();
+          let xScale = u.scales.x;
-          const toTs = refTimeRange.current.to.valueOf();
+
+          const frTs = xScale.min!;
+          const toTs = xScale.max!;
           const pad = (toTs - frTs) / 2;
 
           onZoom({ from: frTs - pad, to: toTs + pad });

public/app/plugins/panel/candlestick/CandlestickPanel.tsx

@@ -260,7 +260,7 @@ export const CandlestickPanel = ({
 
         return (
           <>
-            <ZoomPlugin config={config} onZoom={onChangeTimeRange} timeRange={timeRange} />
+            <ZoomPlugin config={config} onZoom={onChangeTimeRange} />
             <TooltipPlugin
               data={alignedDataFrame}
               config={config}

public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx

@@ -191,7 +191,7 @@ export const StateTimelinePanel = ({
 
         return (
           <>
-            <ZoomPlugin config={config} onZoom={onChangeTimeRange} timeRange={timeRange} />
+            <ZoomPlugin config={config} onZoom={onChangeTimeRange} />
 
             <OutsideRangePlugin config={config} onChangeTimeRange={onChangeTimeRange} />
 

public/app/plugins/panel/status-history/StatusHistoryPanel.tsx

@@ -215,7 +215,7 @@ export const StatusHistoryPanel = ({
 
         return (
           <>
-            <ZoomPlugin config={config} onZoom={onChangeTimeRange} timeRange={timeRange} />
+            <ZoomPlugin config={config} onZoom={onChangeTimeRange} />
             {renderTooltip(alignedFrame)}
             <OutsideRangePlugin config={config} onChangeTimeRange={onChangeTimeRange} />
           </>

public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx

@@ -88,7 +88,7 @@ export const TimeSeriesPanel = ({
         return (
           <>
             <KeyboardPlugin config={config} />
-            <ZoomPlugin config={config} onZoom={onChangeTimeRange} timeRange={timeRange} />
+            <ZoomPlugin config={config} onZoom={onChangeTimeRange} />
             {options.tooltip.mode === TooltipDisplayMode.None || (
               <TooltipPlugin
                 frames={frames}