[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/datatable_visualization/visualization.test.tsx

@@ -284,7 +284,7 @@ describe('Datatable Visualization', () => {
           state: { layers: [layer] },
           frame,
         }).groups[1].accessors
-      ).toEqual(['c', 'b']);
+      ).toEqual([{ columnId: 'c' }, { columnId: 'b' }]);
     });
   });
 

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

@@ -149,9 +149,9 @@ export const datatableVisualization: Visualization<DatatableVisualizationState>
             defaultMessage: 'Break down by',
           }),
           layerId: state.layers[0].layerId,
-          accessors: sortedColumns.filter(
-            (c) => datasource!.getOperationForColumnId(c)?.isBucketed
-          ),
+          accessors: sortedColumns
+            .filter((c) => datasource!.getOperationForColumnId(c)?.isBucketed)
+            .map((accessor) => ({ columnId: accessor })),
           supportsMoreColumns: true,
           filterOperations: (op) => op.isBucketed,
           dataTestSubj: 'lnsDatatable_column',
@@ -162,9 +162,9 @@ export const datatableVisualization: Visualization<DatatableVisualizationState>
             defaultMessage: 'Metrics',
           }),
           layerId: state.layers[0].layerId,
-          accessors: sortedColumns.filter(
-            (c) => !datasource!.getOperationForColumnId(c)?.isBucketed
-          ),
+          accessors: sortedColumns
+            .filter((c) => !datasource!.getOperationForColumnId(c)?.isBucketed)
+            .map((accessor) => ({ columnId: accessor })),
           supportsMoreColumns: true,
           filterOperations: (op) => !op.isBucketed,
           required: true,

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

@@ -0,0 +1,48 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiIcon } from '@elastic/eui';
+import { AccessorConfig } from '../../../types';
+
+export function ColorIndicator({
+  accessorConfig,
+  children,
+}: {
+  accessorConfig: AccessorConfig;
+  children: React.ReactChild;
+}) {
+  return (
+    <EuiFlexGroup gutterSize="none" alignItems="center">
+      {accessorConfig.triggerIcon === 'color' && accessorConfig.color && (
+        <EuiFlexItem grow={false}>
+          <div
+            className="lnsLayerPanel__colorIndicator lnsLayerPanel__colorIndicator--solidColor"
+            style={{
+              backgroundColor: accessorConfig.color,
+            }}
+          />
+        </EuiFlexItem>
+      )}
+      {accessorConfig.triggerIcon === 'disabled' && (
+        <EuiFlexItem grow={false}>
+          <EuiIcon
+            type="stopSlash"
+            color="subdued"
+            size="s"
+            className="lnsLayerPanel__colorIndicator"
+          />
+        </EuiFlexItem>
+      )}
+      {accessorConfig.triggerIcon === 'colorBy' && (
+        <EuiFlexItem grow={false}>
+          <EuiIcon type="brush" color="text" size="s" className="lnsLayerPanel__colorIndicator" />
+        </EuiFlexItem>
+      )}
+      <EuiFlexItem>{children}</EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}

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,32 @@
 .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%;
+
+  &:focus {
+    background-color: transparent !important; // sass-lint:disable-line no-important
+    outline: none !important; // sass-lint:disable-line no-important
+  }
+}

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

@@ -137,7 +137,7 @@ describe('LayerPanel', () => {
           {
             groupLabel: 'A',
             groupId: 'a',
-            accessors: ['x'],
+            accessors: [{ columnId: 'x' }],
             filterOperations: () => true,
             supportsMoreColumns: false,
             dataTestSubj: 'lnsGroup',
@@ -177,7 +177,7 @@ describe('LayerPanel', () => {
           {
             groupLabel: 'A',
             groupId: 'a',
-            accessors: ['x'],
+            accessors: [{ columnId: 'x' }],
             filterOperations: () => true,
             supportsMoreColumns: false,
             dataTestSubj: 'lnsGroup',
@@ -209,7 +209,7 @@ describe('LayerPanel', () => {
           {
             groupLabel: 'A',
             groupId: 'a',
-            accessors: ['newid'],
+            accessors: [{ columnId: 'newid' }],
             filterOperations: () => true,
             supportsMoreColumns: true,
             dataTestSubj: 'lnsGroup',
@@ -257,7 +257,7 @@ describe('LayerPanel', () => {
           {
             groupLabel: 'A',
             groupId: 'a',
-            accessors: ['newid'],
+            accessors: [{ columnId: 'newid' }],
             filterOperations: () => true,
             supportsMoreColumns: false,
             dataTestSubj: 'lnsGroup',
@@ -302,7 +302,7 @@ describe('LayerPanel', () => {
           {
             groupLabel: 'A',
             groupId: 'a',
-            accessors: ['newid'],
+            accessors: [{ columnId: 'newid' }],
             filterOperations: () => true,
             supportsMoreColumns: false,
             dataTestSubj: 'lnsGroup',
@@ -377,7 +377,7 @@ describe('LayerPanel', () => {
           {
             groupLabel: 'A',
             groupId: 'a',
-            accessors: ['a'],
+            accessors: [{ columnId: 'a' }],
             filterOperations: () => true,
             supportsMoreColumns: true,
             dataTestSubj: 'lnsGroup',
@@ -416,15 +416,15 @@ describe('LayerPanel', () => {
           {
             groupLabel: 'A',
             groupId: 'a',
-            accessors: ['a'],
+            accessors: [{ columnId: 'a' }],
             filterOperations: () => true,
             supportsMoreColumns: false,
             dataTestSubj: 'lnsGroupA',
           },
           {
             groupLabel: 'B',
             groupId: 'b',
-            accessors: ['b'],
+            accessors: [{ columnId: 'b' }],
             filterOperations: () => true,
             supportsMoreColumns: true,
             dataTestSubj: 'lnsGroupB',
@@ -480,7 +480,7 @@ describe('LayerPanel', () => {
           {
             groupLabel: 'A',
             groupId: 'a',
-            accessors: ['a', 'b'],
+            accessors: [{ columnId: 'a' }, { columnId: 'b' }],
             filterOperations: () => true,
             supportsMoreColumns: true,
             dataTestSubj: 'lnsGroup',

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

@@ -14,6 +14,7 @@ import {
   EuiFlexItem,
   EuiButtonEmpty,
   EuiFormRow,
+  EuiLink,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -25,6 +26,8 @@ import { trackUiEvent } from '../../../lens_ui_telemetry';
 import { generateId } from '../../../id_generator';
 import { ConfigPanelWrapperProps, ActiveDimensionState } from './types';
 import { DimensionContainer } from './dimension_container';
+import { ColorIndicator } from './color_indicator';
+import { PaletteIndicator } from './palette_indicator';
 
 const initialActiveDimensionState = {
   isNew: false,
@@ -207,7 +210,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
@@ -253,7 +258,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,
@@ -304,25 +311,31 @@ export function LayerPanel(
                         }}
                       >
                         <div className="lnsLayerPanel__dimension">
-                          <NativeRenderer
-                            render={props.datasourceMap[datasourceId].renderDimensionTrigger}
-                            nativeProps={{
-                              ...layerDatasourceConfigProps,
-                              columnId: accessor,
-                              filterOperations: group.filterOperations,
-                              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,
+                                });
+                              }
                             }}
-                          />
+                          >
+                            <ColorIndicator accessorConfig={accessorConfig}>
+                              <NativeRenderer
+                                render={props.datasourceMap[datasourceId].renderDimensionTrigger}
+                                nativeProps={{
+                                  ...layerDatasourceConfigProps,
+                                  columnId: accessor,
+                                  filterOperations: group.filterOperations,
+                                }}
+                              />
+                            </ColorIndicator>
+                          </EuiLink>
                           <EuiButtonIcon
                             className="lnsLayerPanel__dimensionRemove"
                             data-test-subj="indexPattern-dimension-remove"
@@ -356,6 +369,7 @@ export function LayerPanel(
                               );
                             }}
                           />
+                          <PaletteIndicator accessorConfig={accessorConfig} />
                         </div>
                       </DragDrop>
                     );

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

@@ -0,0 +1,27 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { AccessorConfig } from '../../../types';
+
+export function PaletteIndicator({ accessorConfig }: { accessorConfig: AccessorConfig }) {
+  if (accessorConfig.triggerIcon !== 'colorBy' || !accessorConfig.palette) return null;
+  return (
+    <EuiFlexGroup className="lnsLayerPanel__paletteContainer" gutterSize="none" alignItems="center">
+      {accessorConfig.palette.map((color) => (
+        <EuiFlexItem
+          key={color}
+          className="lnsLayerPanel__paletteColor"
+          grow={true}
+          style={{
+            backgroundColor: color,
+          }}
+        />
+      ))}
+    </EuiFlexGroup>
+  );
+}