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

…143355) * [Lens][Visualize] Disable cursor sync on dashboard level option * Increase XY limits as it fails for 1B :) * Fix jest tests * Apply PR nit
elastic · Oct 17, 2022 · 46c1250 · 46c1250
1 parent 12acbac
commit 46c1250
Show file tree

Hide file tree

Showing 55 changed files with 183 additions and 29 deletions.
diff --git a/docs/user/dashboard/dashboard.asciidoc b/docs/user/dashboard/dashboard.asciidoc
@@ -337,6 +337,8 @@ Apply a set of design options to the entire dashboard.
 
 * *Sync color pallettes across panels* &mdash; Applies the same color palette to all panels on the dashboard.
 
+* *Sync cursor across panels* &mdash; 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* &mdash; 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]

diff --git a/packages/kbn-optimizer/limits.yml b/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

diff --git a/...xpression_heatmap/common/expression_functions/__snapshots__/heatmap_function.test.ts.snap b/...xpression_heatmap/common/expression_functions/__snapshots__/heatmap_function.test.ts.snap
diff --git a/...gins/chart_expressions/expression_heatmap/common/expression_functions/heatmap_function.ts b/...gins/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,
       },
     };
   },

diff --git a/src/plugins/chart_expressions/expression_heatmap/common/types/expression_functions.ts b/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 {

diff --git a/src/plugins/chart_expressions/expression_heatmap/common/types/expression_renderers.ts b/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'];
 };
diff --git a/...plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.test.tsx b/...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(),
     };
   });

diff --git a/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx b/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 },
               }}

diff --git a/...ins/chart_expressions/expression_heatmap/public/expression_renderers/heatmap_renderer.tsx b/...ins/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>,

diff --git a/...lugins/chart_expressions/expression_xy/common/expression_functions/layered_xy_vis.test.ts b/...lugins/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,
       },
     });

diff --git a/src/plugins/chart_expressions/expression_xy/common/expression_functions/layered_xy_vis_fn.ts b/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,
     },
   };
 };
diff --git a/src/plugins/chart_expressions/expression_xy/common/expression_functions/xy_vis.test.ts b/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,
       },
     });
   });

diff --git a/src/plugins/chart_expressions/expression_xy/common/expression_functions/xy_vis_fn.ts b/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,
     },
   };
 };
diff --git a/src/plugins/chart_expressions/expression_xy/common/types/expression_renderers.ts b/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;
 }

diff --git a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.test.tsx b/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(),

diff --git a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx b/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 },
             }}

diff --git a/...plugins/chart_expressions/expression_xy/public/expression_renderers/xy_chart_renderer.tsx b/...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}
             />

diff --git a/src/plugins/chart_expressions/expression_xy/public/helpers/interval.test.ts b/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';
   });

diff --git a/src/plugins/dashboard/public/application/embeddable/dashboard_container.tsx b/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,
     };
   }

diff --git a/src/plugins/dashboard/public/application/embeddable/dashboard_container_factory.tsx b/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,
     };
   }

diff --git a/src/plugins/dashboard/public/application/lib/diff_dashboard_state.test.ts b/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([]);

diff --git a/src/plugins/dashboard/public/application/state/dashboard_state_slice.ts b/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,

diff --git a/src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx b/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));

diff --git a/src/plugins/dashboard/public/application/top_nav/options.tsx b/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);
@@ -89,27 +99,49 @@ export class OptionsMenu extends Component<Props, State> {
             data-test-subj="dashboardPanelTitlesCheckbox"
           />
         </EuiFormRow>
-
-        <EuiFormRow>
-          <EuiSwitch
-            label={i18n.translate('dashboard.topNav.options.syncColorsBetweenPanelsSwitchLabel', {
-              defaultMessage: 'Sync color palettes across panels',
-            })}
-            checked={this.state.syncColors}
-            onChange={this.handleSyncColorsChange}
-            data-test-subj="dashboardSyncColorsCheckbox"
-          />
-        </EuiFormRow>
-
-        <EuiFormRow>
-          <EuiSwitch
-            label={i18n.translate('dashboard.topNav.options.syncTooltipsBetweenPanelsSwitchLabel', {
-              defaultMessage: 'Sync tooltips across panels',
-            })}
-            checked={this.state.syncTooltips}
-            onChange={this.handleSyncTooltipsChange}
-            data-test-subj="dashboardSyncTooltipsCheckbox"
-          />
+        <EuiFormRow label="Sync across panels">
+          <>
+            <EuiFormRow>
+              <EuiSwitch
+                label={i18n.translate(
+                  'dashboard.topNav.options.syncColorsBetweenPanelsSwitchLabel',
+                  {
+                    defaultMessage: 'Sync color palettes across panels',
+                  }
+                )}
+                checked={this.state.syncColors}
+                onChange={this.handleSyncColorsChange}
+                data-test-subj="dashboardSyncColorsCheckbox"
+              />
+            </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"
+              />
+            </EuiFormRow>
+          </>
         </EuiFormRow>
       </EuiForm>
     );
-Original file line number
+Diff line change
@@ Expand Up / @@ -337,6 +337,8 @@ Apply a set of design options to the entire dashboard. @@
     * *Sync color pallettes across panels* &mdash; Applies the same color palette to all panels on the dashboard.
+    * *Sync cursor across panels* &mdash; 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* &mdash; 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]
@@ Expand Down @@