[Lens] Color in dimension trigger

src/plugins/charts/public/services/palettes/mock.ts

@@ -22,7 +22,7 @@ import { PaletteService } from './service';
 import { PaletteDefinition, SeriesLayer } from './types';
 
 export const getPaletteRegistry = () => {
-  const mockPalette: jest.Mocked<PaletteDefinition> = {
+  const mockPalette1: jest.Mocked<PaletteDefinition> = {
     id: 'default',
     title: 'My Palette',
     getColor: jest.fn((_: SeriesLayer[]) => 'black'),
@@ -41,9 +41,28 @@ export const getPaletteRegistry = () => {
     })),
   };
 
+  const mockPalette2: jest.Mocked<PaletteDefinition> = {
+    id: 'mocked',
+    title: 'Mocked Palette',
+    getColor: jest.fn((_: SeriesLayer[]) => 'blue'),
+    getColors: jest.fn((num: number) => ['blue', 'yellow']),
+    toExpression: jest.fn(() => ({
+      type: 'expression',
+      chain: [
+        {
+          type: 'function',
+          function: 'system_palette',
+          arguments: {
+            name: ['mocked'],
+          },
+        },
+      ],
+    })),
+  };
+
   return {
-    get: (_: string) => mockPalette,
-    getAll: () => [mockPalette],
+    get: (name: string) => (name !== 'default' ? mockPalette2 : mockPalette1),
+    getAll: () => [mockPalette1, mockPalette2],
   };
 };
 

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.scss

@@ -52,6 +52,7 @@
   align-items: center;
   overflow: hidden;
   min-height: $euiSizeXXL;
+  position: relative;
 
   // NativeRenderer is messing this up
   > div {
@@ -111,3 +112,27 @@
 .lnsLayerPanel__styleEditor {
   padding: 0 $euiSizeS $euiSizeS;
 }
+
+.lnsLayerPanel__colorIndicator {
+  margin-left: $euiSizeS;
+}
+
+.lnsLayerPanel__colorIndicator--solidColor {
+  width: $euiSizeS;
+  height: $euiSizeS;
+}
+
+.lnsLayerPanel__paletteContainer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.lnsLayerPanel__paletteColor {
+  height: $euiSizeXS;
+}
+
+.lnsLayerPanel__dimensionLink {
+  width: 100%;
+}

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx

@@ -14,6 +14,8 @@ import {
   EuiFlexItem,
   EuiButtonEmpty,
   EuiFormRow,
+  EuiIcon,
+  EuiLink,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -207,7 +209,9 @@ export function LayerPanel(
             >
               <>
                 <ReorderProvider id={group.groupId} className={'lnsLayerPanel__group'}>
-                  {group.accessors.map((accessor) => {
+                  {group.accessors.map((accessorConfig) => {
+                    const accessor =
+                      typeof accessorConfig === 'string' ? accessorConfig : accessorConfig.columnId;
                     const { dragging } = dragDropContext;
                     const dragType =
                       isDraggedOperation(dragging) && accessor === dragging.columnId
@@ -242,7 +246,9 @@ export function LayerPanel(
                         dragType={dragType}
                         dropType={dropType}
                         data-test-subj={group.dataTestSubj}
-                        itemsInGroup={group.accessors}
+                        itemsInGroup={group.accessors.map((a) =>
+                          typeof a === 'string' ? a : a.columnId
+                        )}
                         className={'lnsLayerPanel__dimensionContainer'}
                         value={{
                           columnId: accessor,
@@ -297,26 +303,66 @@ export function LayerPanel(
                         }}
                       >
                         <div className="lnsLayerPanel__dimension">
-                          <NativeRenderer
-                            render={props.datasourceMap[datasourceId].renderDimensionTrigger}
-                            nativeProps={{
-                              ...layerDatasourceConfigProps,
-                              columnId: accessor,
-                              filterOperations: group.filterOperations,
-                              suggestedPriority: group.suggestedPriority,
-                              onClick: () => {
-                                if (activeId) {
-                                  setActiveDimension(initialActiveDimensionState);
-                                } else {
-                                  setActiveDimension({
-                                    isNew: false,
-                                    activeGroup: group,
-                                    activeId: accessor,
-                                  });
-                                }
-                              },
+                          <EuiLink
+                            className="lnsLayerPanel__dimensionLink"
+                            onClick={() => {
+                              if (activeId) {
+                                setActiveDimension(initialActiveDimensionState);
+                              } else {
+                                setActiveDimension({
+                                  isNew: false,
+                                  activeGroup: group,
+                                  activeId: accessor,
+                                });
+                              }
                             }}
-                          />
+                          >
+                            <EuiFlexGroup gutterSize="none" alignItems="center">
+                              {typeof accessorConfig !== 'string' &&
+                                accessorConfig.triggerIcon === 'color' &&
+                                accessorConfig.color && (
+                                  <EuiFlexItem grow={false}>
+                                    <div
+                                      className="lnsLayerPanel__colorIndicator lnsLayerPanel__colorIndicator--solidColor"
+                                      style={{
+                                        backgroundColor: accessorConfig.color,
+                                      }}
+                                    />
+                                  </EuiFlexItem>
+                                )}
+                              {typeof accessorConfig !== 'string' &&
+                                accessorConfig.triggerIcon === 'disabled' && (
+                                  <EuiFlexItem grow={false}>
+                                    <EuiIcon
+                                      type="stopSlash"
+                                      size="s"
+                                      className="lnsLayerPanel__colorIndicator"
+                                    />
+                                  </EuiFlexItem>
+                                )}
+                              {typeof accessorConfig !== 'string' &&
+                                accessorConfig.triggerIcon === 'colorBy' && (
+                                  <EuiFlexItem grow={false}>
+                                    <EuiIcon
+                                      type="brush"
+                                      size="s"
+                                      className="lnsLayerPanel__colorIndicator"
+                                    />
+                                  </EuiFlexItem>
+                                )}
+                              <EuiFlexItem>
+                                <NativeRenderer
+                                  render={props.datasourceMap[datasourceId].renderDimensionTrigger}
+                                  nativeProps={{
+                                    ...layerDatasourceConfigProps,
+                                    columnId: accessor,
+                                    filterOperations: group.filterOperations,
+                                    suggestedPriority: group.suggestedPriority,
+                                  }}
+                                />
+                              </EuiFlexItem>
+                            </EuiFlexGroup>
+                          </EuiLink>
                           <EuiButtonIcon
                             className="lnsLayerPanel__dimensionRemove"
                             data-test-subj="indexPattern-dimension-remove"
@@ -350,6 +396,26 @@ export function LayerPanel(
                               );
                             }}
                           />
+                          {typeof accessorConfig !== 'string' &&
+                            accessorConfig.triggerIcon === 'colorBy' &&
+                            accessorConfig.palette && (
+                              <EuiFlexGroup
+                                className="lnsLayerPanel__paletteContainer"
+                                gutterSize="none"
+                                alignItems="center"
+                              >
+                                {accessorConfig.palette.map((color) => (
+                                  <EuiFlexItem
+                                    key={color}
+                                    className="lnsLayerPanel__paletteColor"
+                                    grow={true}
+                                    style={{
+                                      backgroundColor: color,
+                                    }}
+                                  />
+                                ))}
+                              </EuiFlexGroup>
+                            )}
                         </div>
                       </DragDrop>
                     );

x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.tsx

@@ -6,7 +6,7 @@
 
 import React, { memo, useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiLink, EuiIcon, EuiToolTip, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiText, EuiIcon, EuiToolTip, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { IUiSettingsClient, SavedObjectsClientContract, HttpSetup } from 'kibana/public';
 import { IStorageWrapper } from 'src/plugins/kibana_utils/public';
 import { DatasourceDimensionTriggerProps, DatasourceDimensionEditorProps } from '../../types';
@@ -86,11 +86,11 @@ export const IndexPatternDimensionTriggerComponent = function IndexPatternDimens
         }
         anchorClassName="eui-displayBlock"
       >
-        <EuiLink
+        <EuiText
+          size="s"
           color="danger"
           id={columnId}
           className="lnsLayerPanel__triggerLink"
-          onClick={props.onClick}
           data-test-subj="lns-dimensionTrigger"
           aria-label={triggerLinkA11yText}
           title={triggerLinkA11yText}
@@ -101,16 +101,16 @@ export const IndexPatternDimensionTriggerComponent = function IndexPatternDimens
             </EuiFlexItem>
             <EuiFlexItem grow={true}>{selectedColumn.label}</EuiFlexItem>
           </EuiFlexGroup>
-        </EuiLink>
+        </EuiText>
       </EuiToolTip>
     );
   }
 
   return (
-    <EuiLink
+    <EuiText
+      size="s"
       id={columnId}
       className="lnsLayerPanel__triggerLink"
-      onClick={props.onClick}
       data-test-subj="lns-dimensionTrigger"
       aria-label={triggerLinkA11yText}
       title={triggerLinkA11yText}
@@ -120,7 +120,7 @@ export const IndexPatternDimensionTriggerComponent = function IndexPatternDimens
           <span className="lnsLayerPanel__triggerLinkLabel">{formattedLabel}</span>
         </span>
       </EuiFlexItem>
-    </EuiLink>
+    </EuiText>
   );
 };
 

x-pack/plugins/lens/public/pie_visualization/visualization.tsx

@@ -9,7 +9,7 @@ import { render } from 'react-dom';
 import { i18n } from '@kbn/i18n';
 import { I18nProvider } from '@kbn/i18n/react';
 import { PaletteRegistry } from 'src/plugins/charts/public';
-import { Visualization, OperationMetadata } from '../types';
+import { Visualization, OperationMetadata, AccessorConfig } from '../types';
 import { toExpression, toPreviewExpression } from './to_expression';
 import { LayerState, PieVisualizationState } from './types';
 import { suggestions } from './suggestions';
@@ -113,7 +113,16 @@ export const getPieVisualization = ({
       .map(({ columnId }) => columnId)
       .filter((columnId) => columnId !== layer.metric);
     // When we add a column it could be empty, and therefore have no order
-    const sortedColumns = Array.from(new Set(originalOrder.concat(layer.groups)));
+    const sortedColumns: AccessorConfig[] = Array.from(new Set(originalOrder.concat(layer.groups)));
+    if (sortedColumns.length > 0) {
+      sortedColumns[0] = {
+        columnId: sortedColumns[0] as string,
+        triggerIcon: 'colorBy',
+        palette: paletteService
+          .get(state.palette?.name || 'default')
+          .getColors(10, state.palette?.params),
+      };
+    }
 
     if (state.shape === 'treemap') {
       return {

x-pack/plugins/lens/public/types.ts

@@ -246,7 +246,6 @@ export type DatasourceDimensionEditorProps<T = unknown> = DatasourceDimensionPro
 
 export type DatasourceDimensionTriggerProps<T> = DatasourceDimensionProps<T> & {
   dragDropContext: DragContextState;
-  onClick: () => void;
 };
 
 export interface DatasourceLayerPanelProps<T> {
@@ -345,12 +344,21 @@ export type VisualizationDimensionEditorProps<T = unknown> = VisualizationConfig
   setState: (newState: T) => void;
 };
 
+export type AccessorConfig =
+  | string
+  | {
+      columnId: string;
+      triggerIcon?: 'color' | 'disabled' | 'colorBy' | 'none';
+      color?: string;
+      palette?: string[];
+    };
+
 export type VisualizationDimensionGroupConfig = SharedDimensionProps & {
   groupLabel: string;
 
   /** ID is passed back to visualization. For example, `x` */
   groupId: string;
-  accessors: string[];
+  accessors: AccessorConfig[];
   supportsMoreColumns: boolean;
   /** If required, a warning will appear if accessors are empty */
   required?: boolean;

x-pack/plugins/lens/public/xy_visualization/color_assignment.test.ts

@@ -128,6 +128,31 @@ describe('color_assignment', () => {
       expect(assignments.palette2.totalSeriesCount).toEqual(2 * 3);
       expect(formatMock).toHaveBeenCalledWith(complexObject);
     });
+
+    it('should handle missing tables', () => {
+      const assignments = getColorAssignments(layers, { ...data, tables: {} }, formatFactory);
+      // if there is no data, just assume a single split
+      expect(assignments.palette1.totalSeriesCount).toEqual(2);
+    });
+
+    it('should handle missing columns', () => {
+      const assignments = getColorAssignments(
+        layers,
+        {
+          ...data,
+          tables: {
+            ...data.tables,
+            '1': {
+              ...data.tables['1'],
+              columns: [],
+            },
+          },
+        },
+        formatFactory
+      );
+      // if the split column is missing, just assume a single split
+      expect(assignments.palette1.totalSeriesCount).toEqual(2);
+    });
   });
 
   describe('getRank', () => {
@@ -178,5 +203,30 @@ describe('color_assignment', () => {
       // 3 series in front of (complex object)/y1 - abc/y1, abc/y2
       expect(assignments.palette1.getRank(layers[0], 'formatted', 'y1')).toEqual(2);
     });
+
+    it('should handle missing tables', () => {
+      const assignments = getColorAssignments(layers, { ...data, tables: {} }, formatFactory);
+      // if there is no data, assume it is the first splitted series. One series in front - 0/y1
+      expect(assignments.palette1.getRank(layers[0], '2', 'y2')).toEqual(1);
+    });
+
+    it('should handle missing columns', () => {
+      const assignments = getColorAssignments(
+        layers,
+        {
+          ...data,
+          tables: {
+            ...data.tables,
+            '1': {
+              ...data.tables['1'],
+              columns: [],
+            },
+          },
+        },
+        formatFactory
+      );
+      // if the split column is missing, assume it is the first splitted series. One series in front - 0/y1
+      expect(assignments.palette1.getRank(layers[0], '2', 'y2')).toEqual(1);
+    });
   });
 });