[Vizualize][Lens] Sync tooltips on dashboard level (elastic#130449)

academo · May 4, 2022 · 4fa3c3d · 4fa3c3d
1 parent 3afeb35
commit 4fa3c3d
Show file tree

Hide file tree

Showing 44 changed files with 202 additions and 7 deletions.
diff --git a/...ns/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap b/...ns/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap
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
@@ -121,6 +121,7 @@ describe('XYChart component', () => {
       onClickValue,
       onSelectRange,
       syncColors: false,
+      syncTooltips: false,
       useLegacyTimeAxis: false,
       eventAnnotationService: eventAnnotationServiceMock,
     };

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
@@ -35,6 +35,7 @@ import {
   BarSeriesProps,
   LineSeriesProps,
   ColorVariant,
+  Placement,
 } from '@elastic/charts';
 import { IconType } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -99,6 +100,7 @@ export type XYChartRenderProps = XYChartProps & {
   onSelectRange: (data: BrushEvent['data']) => void;
   renderMode: RenderMode;
   syncColors: boolean;
+  syncTooltips: boolean;
   eventAnnotationService: EventAnnotationServiceType;
 };
 
@@ -144,6 +146,7 @@ export function XYChart({
   onSelectRange,
   interactive = true,
   syncColors,
+  syncTooltips,
   useLegacyTimeAxis,
 }: XYChartRenderProps) {
   const {
@@ -520,6 +523,9 @@ export function XYChart({
     <Chart ref={chartRef}>
       <Settings
         onPointerUpdate={handleCursorUpdate}
+        externalPointerEvents={{
+          tooltip: { visible: syncTooltips, placement: Placement.Right },
+        }}
         debugState={window._echDebugStateFlag ?? false}
         showLegend={
           legend.isVisible && !legend.showSingleSeries

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
@@ -80,6 +80,7 @@ export const getXyChartRenderer = ({
               onSelectRange={onSelectRange}
               renderMode={handlers.getRenderMode()}
               syncColors={handlers.isSyncColorsEnabled()}
+              syncTooltips={handlers.isSyncTooltipsEnabled()}
             />
           </div>{' '}
         </I18nProvider>

diff --git a/src/plugins/dashboard/public/application/embeddable/dashboard_container.tsx b/src/plugins/dashboard/public/application/embeddable/dashboard_container.tsx
@@ -79,6 +79,7 @@ export interface InheritedChildInput extends IndexSignature {
   id: string;
   searchSessionId?: string;
   syncColors?: boolean;
+  syncTooltips?: boolean;
   executionContext?: KibanaExecutionContext;
 }
 
@@ -314,6 +315,7 @@ export class DashboardContainer extends Container<InheritedChildInput, Dashboard
       filters,
       searchSessionId,
       syncColors,
+      syncTooltips,
       executionContext,
     } = this.input;
     let combinedFilters = filters;
@@ -330,6 +332,7 @@ export class DashboardContainer extends Container<InheritedChildInput, Dashboard
       id,
       searchSessionId,
       syncColors,
+      syncTooltips,
       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
@@ -73,6 +73,7 @@ export class DashboardContainerFactoryDefinition
       isFullScreenMode: false,
       useMargins: true,
       syncColors: 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
@@ -40,6 +40,7 @@ const getDashboardState = (state?: Partial<DashboardState>): DashboardState => {
       hidePanelTitles: false,
       useMargins: true,
       syncColors: false,
+      syncTooltips: false,
     },
     panels: {
       panel_1: {
@@ -97,6 +98,7 @@ describe('Dashboard state diff function', () => {
           hidePanelTitles: false,
           useMargins: false,
           syncColors: false,
+          syncTooltips: false,
         },
       })
     ).toEqual(['options']);
@@ -108,6 +110,7 @@ describe('Dashboard state diff function', () => {
         options: {
           useMargins: true,
           syncColors: undefined,
+          syncTooltips: undefined,
         } 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
@@ -54,6 +54,9 @@ export const dashboardStateSlice = createSlice({
     setSyncColors: (state, action: PayloadAction<boolean>) => {
       state.options.syncColors = action.payload;
     },
+    setSyncTooltips: (state, action: PayloadAction<boolean>) => {
+      state.options.syncTooltips = action.payload;
+    },
     setHidePanelTitles: (state, action: PayloadAction<boolean>) => {
       state.options.hidePanelTitles = action.payload;
     },
@@ -114,6 +117,7 @@ export const {
   setTimeRestore,
   setTimeRange,
   setSyncColors,
+  setSyncTooltips,
   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
@@ -48,6 +48,7 @@ import {
   setSavedQueryId,
   setStateFromSaveModal,
   setSyncColors,
+  setSyncTooltips,
   setUseMargins,
   setViewMode,
   useDashboardDispatch,
@@ -396,6 +397,10 @@ export function DashboardTopNav({
         onSyncColorsChange: (isChecked: boolean) => {
           dispatchDashboardStateChange(setSyncColors(isChecked));
         },
+        syncTooltips: Boolean(currentState.options.syncTooltips),
+        onSyncTooltipsChange: (isChecked: boolean) => {
+          dispatchDashboardStateChange(setSyncTooltips(isChecked));
+        },
         hidePanelTitles: currentState.options.hidePanelTitles,
         onHidePanelTitlesChange: (isChecked: boolean) => {
           dispatchDashboardStateChange(setHidePanelTitles(isChecked));

diff --git a/src/plugins/dashboard/public/application/top_nav/options.tsx b/src/plugins/dashboard/public/application/top_nav/options.tsx
@@ -18,19 +18,23 @@ interface Props {
   onHidePanelTitlesChange: (hideTitles: boolean) => void;
   syncColors: boolean;
   onSyncColorsChange: (syncColors: boolean) => void;
+  syncTooltips: boolean;
+  onSyncTooltipsChange: (syncTooltips: boolean) => void;
 }
 
 interface State {
   useMargins: boolean;
   hidePanelTitles: boolean;
   syncColors: boolean;
+  syncTooltips: boolean;
 }
 
 export class OptionsMenu extends Component<Props, State> {
   state = {
     useMargins: this.props.useMargins,
     hidePanelTitles: this.props.hidePanelTitles,
     syncColors: this.props.syncColors,
+    syncTooltips: this.props.syncTooltips,
   };
 
   constructor(props: Props) {
@@ -55,6 +59,12 @@ export class OptionsMenu extends Component<Props, State> {
     this.setState({ syncColors: isChecked });
   };
 
+  handleSyncTooltipsChange = (evt: any) => {
+    const isChecked = evt.target.checked;
+    this.props.onSyncTooltipsChange(isChecked);
+    this.setState({ syncTooltips: isChecked });
+  };
+
   render() {
     return (
       <EuiForm data-test-subj="dashboardOptionsMenu">
@@ -90,6 +100,17 @@ export class OptionsMenu extends Component<Props, State> {
             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>
       </EuiForm>
     );
   }

diff --git a/src/plugins/dashboard/public/application/top_nav/show_options_popover.tsx b/src/plugins/dashboard/public/application/top_nav/show_options_popover.tsx
@@ -29,6 +29,8 @@ export interface ShowOptionsPopoverProps {
   onUseMarginsChange: (useMargins: boolean) => void;
   syncColors: boolean;
   onSyncColorsChange: (syncColors: boolean) => void;
+  syncTooltips: boolean;
+  onSyncTooltipsChange: (syncTooltips: boolean) => void;
   hidePanelTitles: boolean;
   onHidePanelTitlesChange: (hideTitles: boolean) => void;
   theme$: CoreStart['theme']['theme$'];
@@ -42,6 +44,8 @@ export function showOptionsPopover({
   onHidePanelTitlesChange,
   syncColors,
   onSyncColorsChange,
+  syncTooltips,
+  onSyncTooltipsChange,
   theme$,
 }: ShowOptionsPopoverProps) {
   if (isOpen) {
@@ -68,6 +72,8 @@ export function showOptionsPopover({
             onHidePanelTitlesChange={onHidePanelTitlesChange}
             syncColors={syncColors}
             onSyncColorsChange={onSyncColorsChange}
+            syncTooltips={syncTooltips}
+            onSyncTooltipsChange={onSyncTooltipsChange}
           />
         </EuiWrappingPopover>
       </KibanaThemeProvider>

diff --git a/src/plugins/dashboard/public/application/top_nav/show_share_modal.test.tsx b/src/plugins/dashboard/public/application/top_nav/show_share_modal.test.tsx
@@ -117,6 +117,7 @@ describe('ShowShareModal', () => {
         hidePanelTitles: true,
         useMargins: true,
         syncColors: true,
+        syncTooltips: true,
       },
       filters: [
         {

diff --git a/src/plugins/dashboard/public/saved_dashboards/saved_dashboard.ts b/src/plugins/dashboard/public/saved_dashboards/saved_dashboard.ts
@@ -52,6 +52,7 @@ const defaults = {
     // for BWC reasons we can't default dashboards that already exist without this setting to true.
     useMargins: true,
     syncColors: false,
+    syncTooltips: false,
     hidePanelTitles: false,
   } as DashboardOptions),
   version: 1,

diff --git a/src/plugins/dashboard/public/types.ts b/src/plugins/dashboard/public/types.ts
@@ -91,6 +91,7 @@ export interface DashboardContainerInput extends ContainerInput {
   description?: string;
   useMargins: boolean;
   syncColors?: boolean;
+  syncTooltips?: boolean;
   viewMode: ViewMode;
   filters: Filter[];
   title: string;
@@ -154,6 +155,7 @@ export type DashboardOptions = {
   hidePanelTitles: boolean;
   useMargins: boolean;
   syncColors: boolean;
+  syncTooltips: boolean;
 };
 
 export type DashboardRedirect = (props: RedirectToProps) => void;

diff --git a/src/plugins/embeddable/common/types.ts b/src/plugins/embeddable/common/types.ts
@@ -54,6 +54,11 @@ export type EmbeddableInput = {
    */
   syncColors?: boolean;
 
+  /**
+   * Flag whether tooltips should be synced with other panels on hover
+   */
+  syncTooltips?: boolean;
+
   executionContext?: KibanaExecutionContext;
 };
 

diff --git a/src/plugins/embeddable/public/lib/embeddables/diff_embeddable_input.test.ts b/src/plugins/embeddable/public/lib/embeddables/diff_embeddable_input.test.ts
@@ -20,6 +20,7 @@ const getGenericEmbeddableState = (state?: Partial<EmbeddableInput>): Embeddable
     disableTriggers: false,
     enhancements: undefined,
     syncColors: false,
+    syncTooltips: false,
     viewMode: ViewMode.VIEW,
     title: 'So Very Generic',
     id: 'soVeryGeneric',
@@ -44,6 +45,7 @@ test('Omitting generic embeddable input omits all generic input keys', () => {
     'disableTriggers',
     'enhancements',
     'syncColors',
+    'syncTooltips',
     'viewMode',
     'title',
     'id',