From 2d88c2b57b2d6c3e0196adf1bafb22674ecab74b Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Fri, 20 May 2022 09:56:06 +0200
Subject: [PATCH] add tooltip and change icon

---
 .../datatable_visualization/visualization.tsx |  9 +++++----
 .../config_panel/color_indicator.tsx          | 11 +++++++++++
 .../shared_components/collapse_setting.tsx    | 19 +++++++++++++++++--
 x-pack/plugins/lens/public/types.ts           |  2 +-
 .../public/xy_visualization/visualization.tsx |  2 +-
 5 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx b/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx
index d42af9aa3932c..12c5dafb5d942 100644
--- a/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx
+++ b/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx
@@ -203,10 +203,11 @@ export const getDatatableVisualization = ({
             )
             .map((accessor) => ({
               columnId: accessor,
-              triggerIcon:
-                columnMap[accessor].hidden || columnMap[accessor].collapseFn
-                  ? 'invisible'
-                  : undefined,
+              triggerIcon: columnMap[accessor].hidden
+                ? 'invisible'
+                : columnMap[accessor].collapseFn
+                ? 'aggregate'
+                : undefined,
             })),
           supportsMoreColumns: true,
           filterOperations: (op) => op.isBucketed,
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/color_indicator.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/color_indicator.tsx
index b8a5819d45532..b12f50a7b35a0 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/color_indicator.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/color_indicator.tsx
@@ -59,6 +59,17 @@ export function ColorIndicator({
             })}
           />
         )}
+        {accessorConfig.triggerIcon === 'aggregate' && (
+          <EuiIcon
+            {...baseIconProps}
+            type="fold"
+            color="subdued"
+            aria-label={i18n.translate('xpack.lens.editorFrame.aggregateIndicatorLabel', {
+              defaultMessage:
+                'This dimension is not visible in the chart because all individual values are aggregated into a single value',
+            })}
+          />
+        )}
         {accessorConfig.triggerIcon === 'colorBy' && (
           <EuiIcon
             {...baseIconProps}
diff --git a/x-pack/plugins/lens/public/shared_components/collapse_setting.tsx b/x-pack/plugins/lens/public/shared_components/collapse_setting.tsx
index 48a995267163c..936179c993d4c 100644
--- a/x-pack/plugins/lens/public/shared_components/collapse_setting.tsx
+++ b/x-pack/plugins/lens/public/shared_components/collapse_setting.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiFormRow, EuiSelect } from '@elastic/eui';
+import { EuiFormRow, EuiIcon, EuiSelect, EuiToolTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 
@@ -26,7 +26,22 @@ export function CollapseSetting({
 }) {
   return (
     <EuiFormRow
-      label={i18n.translate('xpack.lens.collapse.label', { defaultMessage: 'Collapse by' })}
+      label={
+        <EuiToolTip
+          delay="long"
+          position="top"
+          content={i18n.translate('xpack.lens.collapse.infoIcon', {
+            defaultMessage:
+              'Do not show this dimension in the visualization and aggregate all metric values which have the same value for this dimension into a single number.',
+          })}
+        >
+          <span>
+            {i18n.translate('xpack.lens.collapse.label', { defaultMessage: 'Collapse by' })}
+            {''}
+            <EuiIcon type="questionInCircle" color="subdued" size="s" className="eui-alignTop" />
+          </span>
+        </EuiToolTip>
+      }
       display="columnCompressed"
       fullWidth
     >
diff --git a/x-pack/plugins/lens/public/types.ts b/x-pack/plugins/lens/public/types.ts
index 1f2ee1266ddb7..1ffc300542b09 100644
--- a/x-pack/plugins/lens/public/types.ts
+++ b/x-pack/plugins/lens/public/types.ts
@@ -557,7 +557,7 @@ export type VisualizationDimensionEditorProps<T = unknown> = VisualizationConfig
 
 export interface AccessorConfig {
   columnId: string;
-  triggerIcon?: 'color' | 'disabled' | 'colorBy' | 'none' | 'invisible';
+  triggerIcon?: 'color' | 'disabled' | 'colorBy' | 'none' | 'invisible' | 'aggregate';
   color?: string;
   palette?: string[] | Array<{ color: string; stop: number }>;
 }
diff --git a/x-pack/plugins/lens/public/xy_visualization/visualization.tsx b/x-pack/plugins/lens/public/xy_visualization/visualization.tsx
index 096c395b31eaf..b35247f4d9d97 100644
--- a/x-pack/plugins/lens/public/xy_visualization/visualization.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/visualization.tsx
@@ -276,7 +276,7 @@ export const getXyVisualization = ({
             ? [
                 {
                   columnId: dataLayer.splitAccessor,
-                  triggerIcon: dataLayer.collapseFn ? ('invisible' as const) : ('colorBy' as const),
+                  triggerIcon: dataLayer.collapseFn ? ('aggregate' as const) : ('colorBy' as const),
                   palette: dataLayer.collapseFn
                     ? undefined
                     : paletteService