diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelContext.ts b/packages/grafana-ui/src/components/PanelChrome/PanelContext.ts index 336ca47e105..bd9512d1514 100644 --- a/packages/grafana-ui/src/components/PanelChrome/PanelContext.ts +++ b/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({ + eventsScope: 'global', eventBus: new EventBusSrv(), }); diff --git a/packages/grafana-ui/src/components/TimeSeries/TimeSeries.tsx b/packages/grafana-ui/src/components/TimeSeries/TimeSeries.tsx index 9e5eee1d7ff..849b7b38656 100644 --- a/packages/grafana-ui/src/components/TimeSeries/TimeSeries.tsx +++ b/packages/grafana-ui/src/components/TimeSeries/TimeSeries.tsx @@ -19,7 +19,7 @@ export class UnthemedTimeSeries extends Component { 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 { renderers, tweakScale, tweakAxis, + eventsScope, }); }; diff --git a/packages/grafana-ui/src/components/TimeSeries/utils.ts b/packages/grafana-ui/src/components/TimeSeries/utils.ts index 7d5b8767b28..aa2792831ea 100644 --- a/packages/grafana-ui/src/components/TimeSeries/utils.ts +++ b/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) { diff --git a/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.ts b/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.ts index 4ca237b890e..e437964e166 100644 --- a/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.ts +++ b/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.ts @@ -305,6 +305,8 @@ type UPlotConfigPrepOpts = {}> = { 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 */ diff --git a/public/app/core/components/TimelineChart/utils.ts b/public/app/core/components/TimelineChart/utils.ts index 0f6f7f75427..9d1212da910 100644 --- a/public/app/core/components/TimelineChart/utils.ts +++ b/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 = ( alignValue, mergeValues, getValueColor, + eventsScope = '__global_', }) => { const builder = new UPlotConfigBuilder(timeZones[0]); @@ -283,7 +286,7 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn = ( let cursor: Partial = {}; 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) { diff --git a/public/app/features/dashboard/dashgrid/PanelStateWrapper.tsx b/public/app/features/dashboard/dashgrid/PanelStateWrapper.tsx index 2b5be94b746..cda7caa7081 100644 --- a/public/app/features/dashboard/dashgrid/PanelStateWrapper.tsx +++ b/public/app/features/dashboard/dashgrid/PanelStateWrapper.tsx @@ -99,6 +99,7 @@ export class PanelStateWrapper extends PureComponent { renderCounter: 0, refreshWhenInView: false, context: { + eventsScope: '__global_', eventBus, app: this.getPanelContextApp(), sync: this.getSync, diff --git a/public/app/features/explore/Graph/ExploreGraph.tsx b/public/app/features/explore/Graph/ExploreGraph.tsx index 9b3fdd72766..792344b37b8 100644 --- a/public/app/features/explore/Graph/ExploreGraph.tsx +++ b/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, diff --git a/public/app/plugins/panel/heatmap/utils.ts b/public/app/plugins/panel/heatmap/utils.ts index dbfe8ea127e..5faa55d4bf4 100644 --- a/public/app/plugins/panel/heatmap/utils.ts +++ b/public/app/plugins/panel/heatmap/utils.ts @@ -75,6 +75,8 @@ interface PrepConfigOpts { yAxisConfig: YAxisConfig; ySizeDivisor?: number; sync?: () => DashboardCursorSync; + // Identifies the shared key for uPlot cursor sync + eventsScope?: string; } export function prepConfig(opts: PrepConfigOpts) { @@ -95,6 +97,7 @@ export function prepConfig(opts: PrepConfigOpts) { yAxisConfig, ySizeDivisor, sync, + eventsScope = '__global_', } = opts; const xScaleKey = 'x'; @@ -614,7 +617,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) => {