[Lens][Visualize] Adds option to disable cursor sync on dashboards

docs/user/dashboard/dashboard.asciidoc

@@ -337,6 +337,8 @@ Apply a set of design options to the entire dashboard.
 
 * *Sync color pallettes across panels* — Applies the same color palette to all panels on the dashboard.
 
+* *Sync cursor across panels* — When you hover your cursor over a *Lens*, *TSVB*, aggregation-based, or *Timelion* XY chart and a heatmap chart, the cursor on all other related dashboard charts automatically appear.
+
 * *Sync tooltips across panels* — When you hover your cursor over a *Lens*, *TSVB*, aggregation-based, or *Timelion* XY chart, the tooltips on all other related dashboard charts automatically appear.
 
 [float]

packages/kbn-optimizer/limits.yml

@@ -49,7 +49,7 @@ pageLoadAssetSize:
   expressions: 140958
   expressionShape: 34008
   expressionTagcloud: 27505
-  expressionXY: 38000
+  expressionXY: 38500
   features: 21723
   fieldFormats: 65209
   files: 22673

src/plugins/chart_expressions/expression_heatmap/common/expression_functions/heatmap_function.ts

@@ -231,6 +231,7 @@ export const heatmapFunction = (): HeatmapExpressionFunctionDefinition => ({
             handlers.getExecutionContext?.()?.description,
         },
         syncTooltips: handlers?.isSyncTooltipsEnabled?.() ?? false,
+        syncCursor: handlers?.isSyncCursorEnabled?.() ?? true,
       },
     };
   },

src/plugins/chart_expressions/expression_heatmap/common/types/expression_functions.ts

@@ -93,6 +93,7 @@ export interface HeatmapExpressionProps {
   data: Datatable;
   args: HeatmapArguments;
   syncTooltips: boolean;
+  syncCursor: boolean;
 }
 
 export interface HeatmapRender {

src/plugins/chart_expressions/expression_heatmap/common/types/expression_renderers.ts

@@ -39,5 +39,6 @@ export type HeatmapRenderProps = HeatmapExpressionProps & {
   uiState: PersistedState;
   interactive: boolean;
   syncTooltips: boolean;
+  syncCursor: boolean;
   renderComplete: IInterpreterRenderHandlers['done'];
 };

src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.test.tsx

@@ -125,6 +125,7 @@ describe('HeatmapComponent', function () {
       formatFactory: formatService.deserialize,
       interactive: true,
       syncTooltips: false,
+      syncCursor: true,
       renderComplete: jest.fn(),
     };
   });

src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx

@@ -146,6 +146,7 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
     uiState,
     interactive,
     syncTooltips,
+    syncCursor,
     renderComplete,
   }) => {
     const chartRef = useRef<Chart>(null);
@@ -576,7 +577,7 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
               noResults={
                 <EmptyPlaceholder icon={IconChartHeatmap} renderComplete={onRenderChange} />
               }
-              onPointerUpdate={handleCursorUpdate}
+              onPointerUpdate={syncCursor ? handleCursorUpdate : undefined}
               externalPointerEvents={{
                 tooltip: { visible: syncTooltips },
               }}

src/plugins/chart_expressions/expression_heatmap/public/expression_renderers/heatmap_renderer.tsx

@@ -90,6 +90,7 @@ export const heatmapRenderer: (
             interactive={isInteractive()}
             chartsActiveCursorService={plugins.charts.activeCursor}
             syncTooltips={config.syncTooltips}
+            syncCursor={config.syncCursor}
           />
         </div>
       </KibanaThemeProvider>,

src/plugins/chart_expressions/expression_xy/common/expression_functions/layered_xy_vis.test.ts

@@ -28,6 +28,7 @@ describe('layeredXyVis', () => {
         args: { ...rest, layers: [sampleExtendedLayer] },
         syncColors: false,
         syncTooltips: false,
+        syncCursor: true,
         canNavigateToLens: false,
       },
     });

src/plugins/chart_expressions/expression_xy/common/expression_functions/layered_xy_vis_fn.ts

@@ -64,6 +64,7 @@ export const layeredXyVisFn: LayeredXyVisFn['fn'] = async (data, args, handlers)
       canNavigateToLens: Boolean(handlers.variables.canNavigateToLens),
       syncColors: handlers?.isSyncColorsEnabled?.() ?? false,
       syncTooltips: handlers?.isSyncTooltipsEnabled?.() ?? false,
+      syncCursor: handlers?.isSyncCursorEnabled?.() ?? true,
     },
   };
 };

src/plugins/chart_expressions/expression_xy/common/expression_functions/xy_vis.test.ts

@@ -41,6 +41,7 @@ describe('xyVis', () => {
         canNavigateToLens: false,
         syncColors: false,
         syncTooltips: false,
+        syncCursor: true,
       },
     });
   });
@@ -350,6 +351,7 @@ describe('xyVis', () => {
         canNavigateToLens: false,
         syncColors: false,
         syncTooltips: false,
+        syncCursor: true,
       },
     });
   });

src/plugins/chart_expressions/expression_xy/common/expression_functions/xy_vis_fn.ts

@@ -139,6 +139,7 @@ export const xyVisFn: XyVisFn['fn'] = async (data, args, handlers) => {
       canNavigateToLens: Boolean(handlers.variables.canNavigateToLens),
       syncColors: handlers?.isSyncColorsEnabled?.() ?? false,
       syncTooltips: handlers?.isSyncTooltipsEnabled?.() ?? false,
+      syncCursor: handlers?.isSyncCursorEnabled?.() ?? true,
     },
   };
 };

src/plugins/chart_expressions/expression_xy/common/types/expression_renderers.ts

@@ -17,6 +17,7 @@ import { XYProps } from './expression_functions';
 export interface XYChartProps {
   args: XYProps;
   syncTooltips: boolean;
+  syncCursor: boolean;
   syncColors: boolean;
   canNavigateToLens?: boolean;
 }

src/plugins/chart_expressions/expression_xy/public/components/xy_chart.test.tsx

@@ -117,6 +117,7 @@ describe('XYChart component', () => {
       onSelectRange,
       syncColors: false,
       syncTooltips: false,
+      syncCursor: true,
       useLegacyTimeAxis: false,
       eventAnnotationService: eventAnnotationServiceMock,
       renderComplete: jest.fn(),

src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx

@@ -125,6 +125,7 @@ export type XYChartRenderProps = Omit<XYChartProps, 'canNavigateToLens'> & {
   renderMode: RenderMode;
   syncColors: boolean;
   syncTooltips: boolean;
+  syncCursor: boolean;
   eventAnnotationService: EventAnnotationServiceType;
   renderComplete: () => void;
   uiState?: PersistedState;
@@ -199,6 +200,7 @@ export function XYChart({
   interactive = true,
   syncColors,
   syncTooltips,
+  syncCursor,
   useLegacyTimeAxis,
   renderComplete,
   uiState,
@@ -753,7 +755,7 @@ export function XYChart({
               />
             }
             onRenderChange={onRenderChange}
-            onPointerUpdate={handleCursorUpdate}
+            onPointerUpdate={syncCursor ? handleCursorUpdate : undefined}
             externalPointerEvents={{
               tooltip: { visible: syncTooltips, placement: Placement.Right },
             }}

src/plugins/chart_expressions/expression_xy/public/expression_renderers/xy_chart_renderer.tsx

@@ -235,6 +235,7 @@ export const getXyChartRenderer = ({
               renderMode={handlers.getRenderMode()}
               syncColors={config.syncColors}
               syncTooltips={config.syncTooltips}
+              syncCursor={config.syncCursor}
               uiState={handlers.uiState as PersistedState}
               renderComplete={renderComplete}
             />

src/plugins/chart_expressions/expression_xy/public/helpers/interval.test.ts

@@ -18,7 +18,12 @@ describe('calculateMinInterval', () => {
   beforeEach(() => {
     const { layers, ...restArgs } = sampleArgs().args;
 
-    xyProps = { args: { ...restArgs, layers }, syncColors: false, syncTooltips: false };
+    xyProps = {
+      args: { ...restArgs, layers },
+      syncColors: false,
+      syncTooltips: false,
+      syncCursor: true,
+    };
     layer = xyProps.args.layers[0] as DataLayerConfig;
     layer.xScaleType = 'time';
   });

src/plugins/dashboard/public/application/embeddable/dashboard_container.tsx

@@ -68,6 +68,7 @@ export interface InheritedChildInput extends IndexSignature {
   id: string;
   searchSessionId?: string;
   syncColors?: boolean;
+  syncCursor?: boolean;
   syncTooltips?: boolean;
   executionContext?: KibanaExecutionContext;
 }
@@ -351,6 +352,7 @@ export class DashboardContainer extends Container<InheritedChildInput, Dashboard
       filters,
       searchSessionId,
       syncColors,
+      syncCursor,
       syncTooltips,
       executionContext,
     } = this.input;
@@ -371,6 +373,7 @@ export class DashboardContainer extends Container<InheritedChildInput, Dashboard
       searchSessionId,
       syncColors,
       syncTooltips,
+      syncCursor,
       executionContext,
     };
   }

src/plugins/dashboard/public/application/embeddable/dashboard_container_factory.tsx

@@ -70,6 +70,7 @@ export class DashboardContainerFactoryDefinition
       isFullScreenMode: false,
       useMargins: true,
       syncColors: true,
+      syncCursor: true,
       syncTooltips: true,
     };
   }

src/plugins/dashboard/public/application/lib/diff_dashboard_state.test.ts

@@ -41,6 +41,7 @@ const getDashboardState = (state?: Partial<DashboardState>): DashboardState => {
       useMargins: true,
       syncColors: false,
       syncTooltips: false,
+      syncCursor: true,
     },
     panels: {
       panel_1: {
@@ -99,6 +100,7 @@ describe('Dashboard state diff function', () => {
           useMargins: false,
           syncColors: false,
           syncTooltips: false,
+          syncCursor: true,
         },
       })
     ).toEqual(['options']);
@@ -111,6 +113,7 @@ describe('Dashboard state diff function', () => {
           useMargins: true,
           syncColors: undefined,
           syncTooltips: undefined,
+          syncCursor: true,
         } as unknown as DashboardOptions,
       })
     ).toEqual([]);

src/plugins/dashboard/public/application/state/dashboard_state_slice.ts

@@ -61,6 +61,9 @@ export const dashboardStateSlice = createSlice({
     setSyncColors: (state, action: PayloadAction<boolean>) => {
       state.options.syncColors = action.payload;
     },
+    setSyncCursor: (state, action: PayloadAction<boolean>) => {
+      state.options.syncCursor = action.payload;
+    },
     setSyncTooltips: (state, action: PayloadAction<boolean>) => {
       state.options.syncTooltips = action.payload;
     },
@@ -128,6 +131,7 @@ export const {
   setTimeRange,
   setSyncColors,
   setSyncTooltips,
+  setSyncCursor,
   setUseMargins,
   setViewMode,
   setFilters,

src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx

@@ -39,6 +39,7 @@ import {
   setStateFromSaveModal,
   setSyncColors,
   setSyncTooltips,
+  setSyncCursor,
   setUseMargins,
   setViewMode,
   useDashboardDispatch,
@@ -402,6 +403,10 @@ export function DashboardTopNav({
         onSyncColorsChange: (isChecked: boolean) => {
           dispatchDashboardStateChange(setSyncColors(isChecked));
         },
+        syncCursor: currentState.options.syncCursor ?? true,
+        onSyncCursorChange: (isChecked: boolean) => {
+          dispatchDashboardStateChange(setSyncCursor(isChecked));
+        },
         syncTooltips: Boolean(currentState.options.syncTooltips),
         onSyncTooltipsChange: (isChecked: boolean) => {
           dispatchDashboardStateChange(setSyncTooltips(isChecked));

src/plugins/dashboard/public/application/top_nav/options.tsx

@@ -18,6 +18,8 @@ interface Props {
   onHidePanelTitlesChange: (hideTitles: boolean) => void;
   syncColors: boolean;
   onSyncColorsChange: (syncColors: boolean) => void;
+  syncCursor: boolean;
+  onSyncCursorChange: (syncCursor: boolean) => void;
   syncTooltips: boolean;
   onSyncTooltipsChange: (syncTooltips: boolean) => void;
 }
@@ -26,6 +28,7 @@ interface State {
   useMargins: boolean;
   hidePanelTitles: boolean;
   syncColors: boolean;
+  syncCursor: boolean;
   syncTooltips: boolean;
 }
 
@@ -34,6 +37,7 @@ export class OptionsMenu extends Component<Props, State> {
     useMargins: this.props.useMargins,
     hidePanelTitles: this.props.hidePanelTitles,
     syncColors: this.props.syncColors,
+    syncCursor: this.props.syncCursor,
     syncTooltips: this.props.syncTooltips,
   };
 
@@ -59,6 +63,12 @@ export class OptionsMenu extends Component<Props, State> {
     this.setState({ syncColors: isChecked });
   };
 
+  handleSyncCursorChange = (evt: any) => {
+    const isChecked = evt.target.checked;
+    this.props.onSyncCursorChange(isChecked);
+    this.setState({ syncCursor: isChecked });
+  };
+
   handleSyncTooltipsChange = (evt: any) => {
     const isChecked = evt.target.checked;
     this.props.onSyncTooltipsChange(isChecked);
@@ -101,12 +111,24 @@ export class OptionsMenu extends Component<Props, State> {
           />
         </EuiFormRow>
 
+        <EuiFormRow>
+          <EuiSwitch
+            label={i18n.translate('dashboard.topNav.options.syncCursorBetweenPanelsSwitchLabel', {
+              defaultMessage: 'Sync cursor across panels',
+            })}
+            checked={this.state.syncCursor}
+            onChange={this.handleSyncCursorChange}
+            data-test-subj="dashboardSyncCursorCheckbox"
+          />
+        </EuiFormRow>
+
         <EuiFormRow>
           <EuiSwitch
             label={i18n.translate('dashboard.topNav.options.syncTooltipsBetweenPanelsSwitchLabel', {
               defaultMessage: 'Sync tooltips across panels',
             })}
             checked={this.state.syncTooltips}
+            disabled={!Boolean(this.state.syncCursor)}
             onChange={this.handleSyncTooltipsChange}
             data-test-subj="dashboardSyncTooltipsCheckbox"
           />

src/plugins/dashboard/public/application/top_nav/show_options_popover.tsx

@@ -31,6 +31,8 @@ export interface ShowOptionsPopoverProps {
   onUseMarginsChange: (useMargins: boolean) => void;
   syncColors: boolean;
   onSyncColorsChange: (syncColors: boolean) => void;
+  syncCursor: boolean;
+  onSyncCursorChange: (syncCursor: boolean) => void;
   syncTooltips: boolean;
   onSyncTooltipsChange: (syncTooltips: boolean) => void;
   hidePanelTitles: boolean;
@@ -45,6 +47,8 @@ export function showOptionsPopover({
   onHidePanelTitlesChange,
   syncColors,
   onSyncColorsChange,
+  syncCursor,
+  onSyncCursorChange,
   syncTooltips,
   onSyncTooltipsChange,
 }: ShowOptionsPopoverProps) {
@@ -78,6 +82,8 @@ export function showOptionsPopover({
             onHidePanelTitlesChange={onHidePanelTitlesChange}
             syncColors={syncColors}
             onSyncColorsChange={onSyncColorsChange}
+            syncCursor={syncCursor}
+            onSyncCursorChange={onSyncCursorChange}
             syncTooltips={syncTooltips}
             onSyncTooltipsChange={onSyncTooltipsChange}
           />

src/plugins/dashboard/public/application/top_nav/show_share_modal.test.tsx

@@ -109,6 +109,7 @@ describe('ShowShareModal', () => {
         hidePanelTitles: true,
         useMargins: true,
         syncColors: true,
+        syncCursor: true,
         syncTooltips: true,
       },
       filters: [

src/plugins/dashboard/public/dashboard_constants.ts

@@ -46,6 +46,7 @@ export const defaultDashboardState: DashboardState = {
   options: {
     useMargins: true,
     syncColors: false,
+    syncCursor: true,
     syncTooltips: false,
     hidePanelTitles: false,
   },

src/plugins/dashboard/public/types.ts

@@ -71,6 +71,7 @@ export interface DashboardContainerInput extends ContainerInput {
   useMargins: boolean;
   syncColors?: boolean;
   syncTooltips?: boolean;
+  syncCursor?: boolean;
   viewMode: ViewMode;
   filters: Filter[];
   title: string;
@@ -118,6 +119,7 @@ export type DashboardOptions = {
   hidePanelTitles: boolean;
   useMargins: boolean;
   syncColors: boolean;
+  syncCursor: boolean;
   syncTooltips: boolean;
 };