From 1e7dd4f6270612ceb391f8ae9687ad4b64a5ac7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Zolt=C3=A1n=20Bedi?= <zoltan.bedi@gmail.com>
Date: Thu, 28 Oct 2021 13:01:06 +0200
Subject: [PATCH] TimeSeries: share cursor with old graph

---
 .../src/components/TimeSeries/TimeSeries.tsx  |  5 ++--
 .../src/components/TimeSeries/utils.ts        | 26 ++++++++++++-------
 .../panel/timeseries/TimeSeriesPanel.tsx      |  2 ++
 3 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/packages/grafana-ui/src/components/TimeSeries/TimeSeries.tsx b/packages/grafana-ui/src/components/TimeSeries/TimeSeries.tsx
index f9da81aebdd..8af06c4c64a 100644
--- a/packages/grafana-ui/src/components/TimeSeries/TimeSeries.tsx
+++ b/packages/grafana-ui/src/components/TimeSeries/TimeSeries.tsx
@@ -10,7 +10,7 @@ import { PanelContext, PanelContextRoot } from '../PanelChrome/PanelContext';
 
 const propsToDiff: string[] = ['legend'];
 
-type TimeSeriesProps = Omit<GraphNGProps, 'prepConfig' | 'propsToDiff' | 'renderLegend'>;
+type TimeSeriesProps = Omit<GraphNGProps, 'prepConfig' | 'propsToDiff' | 'renderLegend'> & { panelId: number };
 
 export class UnthemedTimeSeries extends React.Component<TimeSeriesProps> {
   static contextType = PanelContextRoot;
@@ -18,7 +18,7 @@ export class UnthemedTimeSeries extends React.Component<TimeSeriesProps> {
 
   prepConfig = (alignedFrame: DataFrame, allFrames: DataFrame[], getTimeRange: () => TimeRange) => {
     const { eventBus, sync } = this.context;
-    const { theme, timeZone, legend } = this.props;
+    const { theme, timeZone, legend, panelId } = this.props;
 
     return preparePlotConfigBuilder({
       frame: alignedFrame,
@@ -29,6 +29,7 @@ export class UnthemedTimeSeries extends React.Component<TimeSeriesProps> {
       sync,
       allFrames,
       legend,
+      panelId,
     });
   };
 
diff --git a/packages/grafana-ui/src/components/TimeSeries/utils.ts b/packages/grafana-ui/src/components/TimeSeries/utils.ts
index 00b9a2356f7..85e4a335b83 100644
--- a/packages/grafana-ui/src/components/TimeSeries/utils.ts
+++ b/packages/grafana-ui/src/components/TimeSeries/utils.ts
@@ -11,6 +11,8 @@ import {
   getFieldColorModeForField,
   getFieldSeriesColor,
   getFieldDisplayName,
+  LegacyGraphHoverClearEvent,
+  LegacyGraphHoverEvent,
 } from '@grafana/data';
 
 import { UPlotConfigBuilder, UPlotConfigPrepFn } from '../uPlot/config/UPlotConfigBuilder';
@@ -36,16 +38,11 @@ const defaultConfig: GraphFieldConfig = {
   axisPlacement: AxisPlacement.Auto,
 };
 
-export const preparePlotConfigBuilder: UPlotConfigPrepFn<{ sync: DashboardCursorSync; legend?: VizLegendOptions }> = ({
-  frame,
-  theme,
-  timeZone,
-  getTimeRange,
-  eventBus,
-  sync,
-  allFrames,
-  legend,
-}) => {
+export const preparePlotConfigBuilder: UPlotConfigPrepFn<{
+  sync: DashboardCursorSync;
+  panelId: number;
+  legend?: VizLegendOptions;
+}> = ({ frame, theme, timeZone, getTimeRange, eventBus, sync, allFrames, legend, panelId }) => {
   const builder = new UPlotConfigBuilder(timeZone);
 
   builder.setPrepData((prepData) => preparePlotData(prepData, undefined, legend));
@@ -349,11 +346,20 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<{ sync: DashboardCursor
             payload.point[xScaleUnit] = null;
             payload.point[yScaleKey] = null;
             eventBus.publish(new DataHoverClearEvent());
+            eventBus.publish(new LegacyGraphHoverClearEvent());
           } else {
             // convert the points
             payload.point[xScaleUnit] = src.posToVal(x, xScaleKey);
             payload.point[yScaleKey] = src.posToVal(y, yScaleKey);
             eventBus.publish(hoverEvent);
+            eventBus.publish(
+              new LegacyGraphHoverEvent({
+                panel: { id: panelId },
+                data: frame,
+                point: payload.point,
+                pos: { x: payload.point[xScaleUnit], panelRelY: y / h },
+              })
+            );
             hoverEvent.payload.down = undefined;
           }
           return true;
diff --git a/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx b/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx
index 56ed14fd73d..2450b92f001 100644
--- a/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx
+++ b/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx
@@ -24,6 +24,7 @@ export const TimeSeriesPanel: React.FC<TimeSeriesPanelProps> = ({
   fieldConfig,
   onChangeTimeRange,
   replaceVariables,
+  id,
 }) => {
   const { sync, canAddAnnotations, onThresholdsChange, canEditThresholds, onSplitOpen } = usePanelContext();
 
@@ -52,6 +53,7 @@ export const TimeSeriesPanel: React.FC<TimeSeriesPanelProps> = ({
       width={width}
       height={height}
       legend={options.legend}
+      panelId={id}
     >
       {(config, alignedDataFrame) => {
         return (