TimeSeries: share cursor with old graph

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,
     });
   };
 

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;

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 (