PanelContext: Provide events scope identifier (#71561)

* PanelContext: Provide events scope identifier

* What a console log

packages/grafana-ui/src/components/PanelChrome/PanelContext.ts

@@ -17,6 +17,8 @@ import { SeriesVisibilityChangeMode } from '.';
 
 /** @alpha */
 export interface PanelContext {
+  /** Identifier for the events scope */
+  eventsScope: string;
   eventBus: EventBus;
 
   /** Dashboard panels sync */
@@ -92,6 +94,7 @@ export interface PanelContext {
 }
 
 export const PanelContextRoot = React.createContext<PanelContext>({
+  eventsScope: 'global',
   eventBus: new EventBusSrv(),
 });
 

packages/grafana-ui/src/components/TimeSeries/TimeSeries.tsx

@@ -19,7 +19,7 @@ export class UnthemedTimeSeries extends Component<TimeSeriesProps> {
   panelContext: PanelContext = {} as PanelContext;
 
   prepConfig = (alignedFrame: DataFrame, allFrames: DataFrame[], getTimeRange: () => TimeRange) => {
-    const { eventBus, sync } = this.context as PanelContext;
+    const { eventBus, eventsScope, sync } = this.context as PanelContext;
     const { theme, timeZone, renderers, tweakAxis, tweakScale } = this.props;
 
     return preparePlotConfigBuilder({
@@ -33,6 +33,7 @@ export class UnthemedTimeSeries extends Component<TimeSeriesProps> {
       renderers,
       tweakScale,
       tweakAxis,
+      eventsScope,
     });
   };
 

packages/grafana-ui/src/components/TimeSeries/utils.ts

@@ -87,6 +87,7 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<{
   renderers,
   tweakScale = (opts) => opts,
   tweakAxis = (opts) => opts,
+  eventsScope = '__global_',
 }) => {
   const builder = new UPlotConfigBuilder(timeZones[0]);
 
@@ -598,9 +599,10 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<{
       },
       data: frame,
     };
+
     const hoverEvent = new DataHoverEvent(payload);
     cursor.sync = {
-      key: '__global_',
+      key: eventsScope,
       filters: {
         pub: (type: string, src: uPlot, x: number, y: number, w: number, h: number, dataIdx: number) => {
           if (sync && sync() === DashboardCursorSync.Off) {

packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.ts

@@ -305,6 +305,8 @@ type UPlotConfigPrepOpts<T extends Record<string, any> = {}> = {
   renderers?: Renderers;
   tweakScale?: (opts: ScaleProps, forField: Field) => ScaleProps;
   tweakAxis?: (opts: AxisProps, forField: Field) => AxisProps;
+  // Identifies the shared key for uPlot cursor sync
+  eventsScope?: string;
 } & T;
 
 /** @alpha */

public/app/core/components/TimelineChart/utils.ts

@@ -61,6 +61,8 @@ interface UPlotConfigOptions {
   alignValue?: TimelineValueAlignment;
   mergeValues?: boolean;
   getValueColor: (frameIdx: number, fieldIdx: number, value: unknown) => string;
+  // Identifies the shared key for uPlot cursor sync
+  eventsScope?: string;
 }
 
 /**
@@ -102,6 +104,7 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<UPlotConfigOptions> = (
   alignValue,
   mergeValues,
   getValueColor,
+  eventsScope = '__global_',
 }) => {
   const builder = new UPlotConfigBuilder(timeZones[0]);
 
@@ -283,7 +286,7 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<UPlotConfigOptions> = (
     let cursor: Partial<uPlot.Cursor> = {};
 
     cursor.sync = {
-      key: '__global_',
+      key: eventsScope,
       filters: {
         pub: (type: string, src: uPlot, x: number, y: number, w: number, h: number, dataIdx: number) => {
           if (sync && sync() === DashboardCursorSync.Off) {

public/app/features/dashboard/dashgrid/PanelStateWrapper.tsx

@@ -99,6 +99,7 @@ export class PanelStateWrapper extends PureComponent<Props, State> {
       renderCounter: 0,
       refreshWhenInView: false,
       context: {
+        eventsScope: '__global_',
         eventBus,
         app: this.getPanelContextApp(),
         sync: this.getSync,

public/app/features/explore/Graph/ExploreGraph.tsx

@@ -153,6 +153,7 @@ export function ExploreGraph({
   }, [dataWithConfig, onHiddenSeriesChanged]);
 
   const panelContext: PanelContext = {
+    eventsScope: 'explore',
     eventBus,
     sync: () => DashboardCursorSync.Crosshair,
     onSplitOpen: splitOpenFn,

public/app/plugins/panel/heatmap/utils.ts

@@ -74,6 +74,8 @@ interface PrepConfigOpts {
   yAxisConfig: YAxisConfig;
   ySizeDivisor?: number;
   sync?: () => DashboardCursorSync;
+  // Identifies the shared key for uPlot cursor sync
+  eventsScope?: string;
 }
 
 export function prepConfig(opts: PrepConfigOpts) {
@@ -93,6 +95,7 @@ export function prepConfig(opts: PrepConfigOpts) {
     yAxisConfig,
     ySizeDivisor,
     sync,
+    eventsScope = '__global_',
   } = opts;
 
   const xScaleKey = 'x';
@@ -603,7 +606,7 @@ export function prepConfig(opts: PrepConfigOpts) {
 
   if (sync && sync() !== DashboardCursorSync.Off) {
     cursor.sync = {
-      key: '__global_',
+      key: eventsScope,
       scales: [xScaleKey, yScaleKey],
       filters: {
         pub: (type: string, src: uPlot, x: number, y: number, w: number, h: number, dataIdx: number) => {