add tooltip and change icon (#132581)

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,

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}

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
     >

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 }>;
 }

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