[Lens] Color mapping off by default (#168190)

## Summary This PR turns the color mapping off by default. After receiving some feedback we decided to turn it off for now for newly created visualizations (users can still turn it on and use it). --------- Co-authored-by: kibanamachine <[email protected]>
elastic · Oct 13, 2023 · 1ba327a · 1ba327a
1 parent 5499a47
commit 1ba327a
Show file tree

Hide file tree

Showing 15 changed files with 61 additions and 73 deletions.
diff --git a/packages/kbn-optimizer/limits.yml b/packages/kbn-optimizer/limits.yml
@@ -83,7 +83,7 @@ pageLoadAssetSize:
   kibanaUsageCollection: 16463
   kibanaUtils: 79713
   kubernetesSecurity: 77234
-  lens: 38000
+  lens: 39000
   licenseManagement: 41817
   licensing: 29004
   links: 44490

diff --git a/x-pack/plugins/lens/common/constants.ts b/x-pack/plugins/lens/common/constants.ts
@@ -87,3 +87,5 @@ export function getEditPath(
 export function getFullPath(id?: string) {
   return `/app/${PLUGIN_ID}${id ? getEditPath(id) : getBasePath()}`;
 }
+
+export const COLOR_MAPPING_OFF_BY_DEFAULT = true;
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_helpers.ts b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_helpers.ts
@@ -11,14 +11,16 @@ import { VisualizeFieldContext } from '@kbn/ui-actions-plugin/public';
 import { difference } from 'lodash';
 import type { DataViewsContract, DataViewSpec } from '@kbn/data-views-plugin/public';
 import { IStorageWrapper } from '@kbn/kibana-utils-plugin/public';
+import { DEFAULT_COLOR_MAPPING_CONFIG } from '@kbn/coloring';
 import { DataViewPersistableStateService } from '@kbn/data-views-plugin/common';
 import type { DataPublicPluginStart, TimefilterContract } from '@kbn/data-plugin/public';
 import { EventAnnotationServiceType } from '@kbn/event-annotation-plugin/public';
 import {
   type EventAnnotationGroupConfig,
   EVENT_ANNOTATION_GROUP_TYPE,
 } from '@kbn/event-annotation-common';
-import { DEFAULT_COLOR_MAPPING_CONFIG } from '@kbn/coloring';
+import { COLOR_MAPPING_OFF_BY_DEFAULT } from '../../../common/constants';
+
 import type {
   Datasource,
   DatasourceMap,
@@ -28,6 +30,7 @@ import type {
   InitializationOptions,
   VisualizationMap,
   VisualizeEditorContext,
+  SuggestionRequest,
 } from '../../types';
 import { buildExpression } from './expression_helpers';
 import { Document } from '../../persistence/saved_object_store';
@@ -37,6 +40,19 @@ import { readFromStorage } from '../../settings_storage';
 import { loadIndexPatternRefs, loadIndexPatterns } from '../../data_views_service/loader';
 import { getDatasourceLayers } from '../../state_management/utils';
 
+// there are 2 ways of coloring, the color mapping where the user can map specific colors to
+// specific terms, and the palette assignment where the colors are assinged automatically
+// by a palette with rotating the colors
+const COLORING_METHOD: SuggestionRequest['mainPalette'] = COLOR_MAPPING_OFF_BY_DEFAULT
+  ? {
+      type: 'legacyPalette',
+      value: {
+        name: 'default',
+        type: 'palette',
+      },
+    }
+  : { type: 'colorMapping', value: { ...DEFAULT_COLOR_MAPPING_CONFIG } };
+
 function getIndexPatterns(
   annotationGroupDataviewIds: string[],
   references?: SavedObjectReference[],
@@ -290,8 +306,8 @@ export function initializeVisualization({
       visualizationMap[visualizationState.activeId]?.initialize(
         () => '',
         visualizationState.state,
-        // initialize a new visualization always with the new color mapping
-        { type: 'colorMapping', value: { ...DEFAULT_COLOR_MAPPING_CONFIG } },
+        // initialize a new visualization with the color mapping off
+        COLORING_METHOD,
         annotationGroups,
         references
       ) ?? visualizationState.state

diff --git a/x-pack/plugins/lens/public/lens_suggestions_api.ts b/x-pack/plugins/lens/public/lens_suggestions_api.ts
@@ -7,12 +7,7 @@
 import type { VisualizeFieldContext } from '@kbn/ui-actions-plugin/public';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import { getSuggestions } from './editor_frame_service/editor_frame/suggestion_helpers';
-import type {
-  DatasourceMap,
-  VisualizationMap,
-  VisualizeEditorContext,
-  SuggestionRequest,
-} from './types';
+import type { DatasourceMap, VisualizationMap, VisualizeEditorContext } from './types';
 import type { DataViewsState } from './state_management';
 
 interface SuggestionsApi {
@@ -23,14 +18,6 @@ interface SuggestionsApi {
   excludedVisualizations?: string[];
 }
 
-const PREFERRED_PALETTE: SuggestionRequest['mainPalette'] = {
-  type: 'legacyPalette',
-  value: {
-    name: 'default',
-    type: 'palette',
-  },
-};
-
 export const suggestionsApi = ({
   context,
   dataView,
@@ -75,7 +62,6 @@ export const suggestionsApi = ({
     visualizationState: undefined,
     visualizeTriggerFieldContext: context,
     dataViews,
-    mainPalette: PREFERRED_PALETTE,
   });
   if (!suggestions.length) return [];
   const activeVisualization = suggestions[0];
@@ -98,7 +84,6 @@ export const suggestionsApi = ({
     activeVisualization: visualizationMap[activeVisualization.visualizationId],
     visualizationState: activeVisualization.visualizationState,
     dataViews,
-    mainPalette: PREFERRED_PALETTE,
   }).filter((sug) => !sug.hide && sug.visualizationId !== 'lnsLegacyMetric');
   const suggestionsList = [activeVisualization, ...newSuggestions];
   // until we separate the text based suggestions logic from the dataview one,

diff --git a/x-pack/plugins/lens/public/utils.ts b/x-pack/plugins/lens/public/utils.ts
@@ -9,7 +9,7 @@ import { uniq, cloneDeep } from 'lodash';
 import { i18n } from '@kbn/i18n';
 import moment from 'moment-timezone';
 import type { Serializable } from '@kbn/utility-types';
-
+import { DEFAULT_COLOR_MAPPING_CONFIG } from '@kbn/coloring';
 import type { TimefilterContract } from '@kbn/data-plugin/public';
 import type { IUiSettingsClient, SavedObjectReference } from '@kbn/core/public';
 import type { DataView, DataViewsContract } from '@kbn/data-views-plugin/public';
@@ -36,6 +36,7 @@ import {
 } from './types';
 import type { DatasourceStates, VisualizationState } from './state_management';
 import type { IndexPatternServiceAPI } from './data_views_service/service';
+import { COLOR_MAPPING_OFF_BY_DEFAULT } from '../common/constants';
 
 export function getVisualizeGeoFieldMessage(fieldType: string) {
   return i18n.translate('xpack.lens.visualizeGeoFieldMessage', {
@@ -421,3 +422,10 @@ export function shouldRemoveSource(
       dropType === 'replace_incompatible')
   );
 }
+
+export const getColorMappingDefaults = () => {
+  if (COLOR_MAPPING_OFF_BY_DEFAULT) {
+    return undefined;
+  }
+  return { ...DEFAULT_COLOR_MAPPING_CONFIG };
+};
diff --git a/x-pack/plugins/lens/public/visualizations/partition/suggestions.test.ts b/x-pack/plugins/lens/public/visualizations/partition/suggestions.test.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { DEFAULT_COLOR_MAPPING_CONFIG, PaletteOutput } from '@kbn/coloring';
+import { PaletteOutput } from '@kbn/coloring';
 import { suggestions } from './suggestions';
 import type { DataType, SuggestionRequest } from '../../types';
 import type { PieLayerState, PieVisualizationState } from '../../../common/types';
@@ -683,7 +683,7 @@ describe('suggestions', () => {
                 legendMaxLines: 1,
                 truncateLegend: true,
                 nestedLegend: true,
-                colorMapping: DEFAULT_COLOR_MAPPING_CONFIG,
+                colorMapping: undefined,
               },
             ],
           },

diff --git a/x-pack/plugins/lens/public/visualizations/partition/suggestions.ts b/x-pack/plugins/lens/public/visualizations/partition/suggestions.ts
@@ -7,7 +7,6 @@
 
 import { partition } from 'lodash';
 import { i18n } from '@kbn/i18n';
-import { DEFAULT_COLOR_MAPPING_CONFIG } from '@kbn/coloring';
 import type {
   SuggestionRequest,
   TableSuggestionColumn,
@@ -24,6 +23,7 @@ import { isPartitionShape } from '../../../common/visualizations';
 import type { PieChartType } from '../../../common/types';
 import { PartitionChartsMeta } from './partition_charts_meta';
 import { layerTypes } from '../..';
+import { getColorMappingDefaults } from '../../utils';
 
 function hasIntervalScale(columns: TableSuggestionColumn[]) {
   return columns.some((col) => col.operation.scale === 'interval');
@@ -142,7 +142,7 @@ export function suggestions({
                 metrics: metricColumnIds,
                 layerType: layerTypes.DATA,
                 colorMapping: !mainPalette
-                  ? { ...DEFAULT_COLOR_MAPPING_CONFIG }
+                  ? getColorMappingDefaults()
                   : mainPalette?.type === 'colorMapping'
                   ? mainPalette.value
                   : state.layers[0].colorMapping,
@@ -157,7 +157,7 @@ export function suggestions({
                 nestedLegend: false,
                 layerType: layerTypes.DATA,
                 colorMapping: !mainPalette
-                  ? { ...DEFAULT_COLOR_MAPPING_CONFIG }
+                  ? getColorMappingDefaults()
                   : mainPalette?.type === 'colorMapping'
                   ? mainPalette.value
                   : undefined,

diff --git a/x-pack/plugins/lens/public/visualizations/partition/visualization.tsx b/x-pack/plugins/lens/public/visualizations/partition/visualization.tsx
@@ -51,13 +51,13 @@ import { DimensionDataExtraEditor, DimensionEditor } from './dimension_editor';
 import { LayerSettings } from './layer_settings';
 import { checkTableForContainsSmallValues } from './render_helpers';
 import { DatasourcePublicAPI } from '../..';
-import { nonNullable } from '../../utils';
+import { nonNullable, getColorMappingDefaults } from '../../utils';
 
 const metricLabel = i18n.translate('xpack.lens.pie.groupMetricLabelSingular', {
   defaultMessage: 'Metric',
 });
 
-function newLayerState(layerId: string, colorMapping: ColorMapping.Config): PieLayerState {
+function newLayerState(layerId: string, colorMapping?: ColorMapping.Config): PieLayerState {
   return {
     layerId,
     primaryGroups: [],
@@ -168,9 +168,7 @@ export const getPieVisualization = ({
         layers: [
           newLayerState(
             addNewLayer(),
-            mainPalette?.type === 'colorMapping'
-              ? mainPalette.value
-              : { ...DEFAULT_COLOR_MAPPING_CONFIG }
+            mainPalette?.type === 'colorMapping' ? mainPalette.value : getColorMappingDefaults()
           ),
         ],
         palette: mainPalette?.type === 'legacyPalette' ? mainPalette.value : undefined,

diff --git a/x-pack/plugins/lens/public/visualizations/tagcloud/suggestions.ts b/x-pack/plugins/lens/public/visualizations/tagcloud/suggestions.ts
@@ -7,10 +7,10 @@
 
 import { partition } from 'lodash';
 import { IconChartTagcloud } from '@kbn/chart-icons';
-import { DEFAULT_COLOR_MAPPING_CONFIG } from '@kbn/coloring';
 import type { SuggestionRequest, VisualizationSuggestion } from '../../types';
 import type { TagcloudState } from './types';
 import { DEFAULT_STATE, TAGCLOUD_LABEL } from './constants';
+import { getColorMappingDefaults } from '../../utils';
 
 export function getSuggestions({
   table,
@@ -50,7 +50,7 @@ export function getSuggestions({
           valueAccessor: metrics[0].columnId,
           ...DEFAULT_STATE,
           colorMapping: !mainPalette
-            ? { ...DEFAULT_COLOR_MAPPING_CONFIG }
+            ? getColorMappingDefaults()
             : mainPalette?.type === 'colorMapping'
             ? mainPalette.value
             : undefined,

diff --git a/x-pack/plugins/lens/public/visualizations/tagcloud/tagcloud_visualization.tsx b/x-pack/plugins/lens/public/visualizations/tagcloud/tagcloud_visualization.tsx
@@ -16,11 +16,12 @@ import {
   buildExpressionFunction,
   ExpressionFunctionTheme,
 } from '@kbn/expressions-plugin/common';
-import { PaletteRegistry, DEFAULT_COLOR_MAPPING_CONFIG, getColorsFromMapping } from '@kbn/coloring';
+import { PaletteRegistry, getColorsFromMapping } from '@kbn/coloring';
 import { IconChartTagcloud } from '@kbn/chart-icons';
 import { SystemPaletteExpressionFunctionDefinition } from '@kbn/charts-plugin/common';
 import useObservable from 'react-use/lib/useObservable';
 import type { OperationMetadata, Visualization } from '../..';
+import { getColorMappingDefaults } from '../../utils';
 import type { TagcloudState } from './types';
 import { getSuggestions } from './suggestions';
 import { TagcloudToolbar } from './tagcloud_toolbar';
@@ -102,13 +103,14 @@ export const getTagcloudVisualization = ({
 
   triggers: [VIS_EVENT_TO_TRIGGER.filter],
 
-  initialize(addNewLayer, state) {
+  initialize(addNewLayer, state, mainPalette) {
     return (
       state || {
         layerId: addNewLayer(),
         layerType: LayerTypes.DATA,
         ...DEFAULT_STATE,
-        colorMapping: { ...DEFAULT_COLOR_MAPPING_CONFIG },
+        colorMapping:
+          mainPalette?.type === 'colorMapping' ? mainPalette.value : getColorMappingDefaults(),
       }
     );
   },

diff --git a/x-pack/plugins/lens/public/visualizations/tagcloud/tags_dimension_editor.tsx b/x-pack/plugins/lens/public/visualizations/tagcloud/tags_dimension_editor.tsx
@@ -28,11 +28,10 @@ import {
   EuiBadge,
 } from '@elastic/eui';
 import { useState, MutableRefObject, useCallback } from 'react';
-import { PalettePicker } from '@kbn/coloring/src/shared_components/coloring/palette_picker';
 import { useDebouncedValue } from '@kbn/visualization-ui-components';
 import { getColorCategories } from '@kbn/chart-expressions-common';
 import type { TagcloudState } from './types';
-import { PalettePanelContainer } from '../../shared_components';
+import { PalettePanelContainer, PalettePicker } from '../../shared_components';
 import { FramePublicAPI } from '../../types';
 import { trackUiCounterEvents } from '../../lens_ui_telemetry';
 

diff --git a/x-pack/plugins/lens/public/visualizations/xy/visualization.test.tsx b/x-pack/plugins/lens/public/visualizations/xy/visualization.test.tsx
@@ -57,7 +57,6 @@ import {
 } from './visualization_helpers';
 import { cloneDeep } from 'lodash';
 import { DataViewsServicePublic } from '@kbn/data-views-plugin/public';
-import { EUIAmsterdamColorBlindPalette } from '@kbn/coloring';
 
 const DATE_HISTORGRAM_COLUMN_ID = 'date_histogram_column';
 const exampleAnnotation: EventAnnotationConfig = {
@@ -222,27 +221,7 @@ describe('xy_visualization', () => {
           "layers": Array [
             Object {
               "accessors": Array [],
-              "colorMapping": Object {
-                "assignmentMode": "auto",
-                "assignments": Array [],
-                "colorMode": Object {
-                  "type": "categorical",
-                },
-                "paletteId": "${EUIAmsterdamColorBlindPalette.id}",
-                "specialAssignments": Array [
-                  Object {
-                    "color": Object {
-                      "colorIndex": 1,
-                      "paletteId": "neutral",
-                      "type": "categorical",
-                    },
-                    "rule": Object {
-                      "type": "other",
-                    },
-                    "touched": false,
-                  },
-                ],
-              },
+              "colorMapping": undefined,
               "layerId": "l1",
               "layerType": "data",
               "palette": undefined,

diff --git a/x-pack/plugins/lens/public/visualizations/xy/visualization.tsx b/x-pack/plugins/lens/public/visualizations/xy/visualization.tsx
@@ -25,7 +25,7 @@ import type { EventAnnotationGroupConfig } from '@kbn/event-annotation-common';
 import { isEqual } from 'lodash';
 import { type AccessorConfig, DimensionTrigger } from '@kbn/visualization-ui-components';
 import { DataViewsPublicPluginStart } from '@kbn/data-views-plugin/public';
-import { DEFAULT_COLOR_MAPPING_CONFIG, getColorsFromMapping } from '@kbn/coloring';
+import { getColorsFromMapping } from '@kbn/coloring';
 import useObservable from 'react-use/lib/useObservable';
 import { generateId } from '../../id_generator';
 import {
@@ -34,6 +34,7 @@ import {
   isOperationFromTheSameGroup,
   nonNullable,
   renewIDs,
+  getColorMappingDefaults,
 } from '../../utils';
 import { getSuggestions } from './xy_suggestions';
 import { XyToolbar } from './xy_config_panel';
@@ -281,9 +282,7 @@ export const getXyVisualization = ({
             layerType: LayerTypes.DATA,
             palette: mainPalette?.type === 'legacyPalette' ? mainPalette.value : undefined,
             colorMapping:
-              mainPalette?.type === 'colorMapping'
-                ? mainPalette.value
-                : { ...DEFAULT_COLOR_MAPPING_CONFIG },
+              mainPalette?.type === 'colorMapping' ? mainPalette.value : getColorMappingDefaults(),
           },
         ],
       }