[7.x] [Maps] style icons by category (#55747)

x-pack/legacy/plugins/maps/common/constants.js

@@ -151,3 +151,10 @@ export const COLOR_MAP_TYPE = {
 export const COLOR_PALETTE_MAX_SIZE = 10;
 
 export const CATEGORICAL_DATA_TYPES = ['string', 'ip', 'boolean'];
+
+export const SYMBOLIZE_AS_TYPES = {
+  CIRCLE: 'circle',
+  ICON: 'icon',
+};
+
+export const DEFAULT_ICON = 'airfield';

x-pack/legacy/plugins/maps/common/migrations/migrate_symbol_style_descriptor.js

@@ -0,0 +1,46 @@
+/*
+ * 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 _ from 'lodash';
+import { DEFAULT_ICON, LAYER_TYPE, STYLE_TYPE, SYMBOLIZE_AS_TYPES } from '../constants';
+
+function isVectorLayer(layerDescriptor) {
+  const layerType = _.get(layerDescriptor, 'type');
+  return layerType === LAYER_TYPE.VECTOR;
+}
+
+export function migrateSymbolStyleDescriptor({ attributes }) {
+  if (!attributes.layerListJSON) {
+    return attributes;
+  }
+
+  const layerList = JSON.parse(attributes.layerListJSON);
+  layerList.forEach(layerDescriptor => {
+    if (!isVectorLayer(layerDescriptor) || !_.has(layerDescriptor, 'style.properties')) {
+      return;
+    }
+
+    const symbolizeAs = _.get(
+      layerDescriptor,
+      'style.properties.symbol.options.symbolizeAs',
+      SYMBOLIZE_AS_TYPES.CIRCLE
+    );
+    layerDescriptor.style.properties.symbolizeAs = {
+      options: { value: symbolizeAs },
+    };
+    const iconId = _.get(layerDescriptor, 'style.properties.symbol.options.symbolId', DEFAULT_ICON);
+    layerDescriptor.style.properties.icon = {
+      type: STYLE_TYPE.STATIC,
+      options: { value: iconId },
+    };
+    delete layerDescriptor.style.properties.symbol;
+  });
+
+  return {
+    ...attributes,
+    layerListJSON: JSON.stringify(layerList),
+  };
+}

x-pack/legacy/plugins/maps/common/migrations/migrate_symbol_style_descriptor.test.js

@@ -0,0 +1,131 @@
+/*
+ * 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 { migrateSymbolStyleDescriptor } from './migrate_symbol_style_descriptor';
+import { LAYER_TYPE, STYLE_TYPE } from '../constants';
+
+describe('migrateSymbolStyleDescriptor', () => {
+  test('Should handle missing layerListJSON attribute', () => {
+    const attributes = {
+      title: 'my map',
+    };
+    expect(migrateSymbolStyleDescriptor({ attributes })).toEqual({
+      title: 'my map',
+    });
+  });
+
+  test('Should ignore non-vector layers', () => {
+    const layerListJSON = JSON.stringify([
+      {
+        type: LAYER_TYPE.HEATMAP,
+        style: {
+          type: 'HEATMAP',
+          colorRampName: 'Greens',
+        },
+      },
+    ]);
+    const attributes = {
+      title: 'my map',
+      layerListJSON,
+    };
+    expect(migrateSymbolStyleDescriptor({ attributes })).toEqual({
+      title: 'my map',
+      layerListJSON,
+    });
+  });
+
+  test('Should migrate "symbol" style descriptor', () => {
+    const layerListJSON = JSON.stringify([
+      {
+        type: LAYER_TYPE.VECTOR,
+        style: {
+          properties: {
+            fillColor: {
+              type: STYLE_TYPE.STATIC,
+              options: { color: '#54B399' },
+            },
+            symbol: {
+              options: {
+                symbolizeAs: 'icon',
+                symbolId: 'square',
+              },
+            },
+          },
+        },
+      },
+    ]);
+    const attributes = {
+      title: 'my map',
+      layerListJSON,
+    };
+    expect(migrateSymbolStyleDescriptor({ attributes })).toEqual({
+      title: 'my map',
+      layerListJSON: JSON.stringify([
+        {
+          type: LAYER_TYPE.VECTOR,
+          style: {
+            properties: {
+              fillColor: {
+                type: STYLE_TYPE.STATIC,
+                options: { color: '#54B399' },
+              },
+              symbolizeAs: {
+                options: { value: 'icon' },
+              },
+              icon: {
+                type: STYLE_TYPE.STATIC,
+                options: { value: 'square' },
+              },
+            },
+          },
+        },
+      ]),
+    });
+  });
+
+  test('Should migrate style descriptor without "symbol"', () => {
+    const layerListJSON = JSON.stringify([
+      {
+        type: LAYER_TYPE.VECTOR,
+        style: {
+          properties: {
+            fillColor: {
+              type: STYLE_TYPE.STATIC,
+              options: { color: '#54B399' },
+            },
+          },
+        },
+      },
+    ]);
+    const attributes = {
+      title: 'my map',
+      layerListJSON,
+    };
+    expect(migrateSymbolStyleDescriptor({ attributes })).toEqual({
+      title: 'my map',
+      layerListJSON: JSON.stringify([
+        {
+          type: LAYER_TYPE.VECTOR,
+          style: {
+            properties: {
+              fillColor: {
+                type: STYLE_TYPE.STATIC,
+                options: { color: '#54B399' },
+              },
+              symbolizeAs: {
+                options: { value: 'circle' },
+              },
+              icon: {
+                type: STYLE_TYPE.STATIC,
+                options: { value: 'airfield' },
+              },
+            },
+          },
+        },
+      ]),
+    });
+  });
+});

x-pack/legacy/plugins/maps/migrations.js

@@ -9,6 +9,7 @@ import { emsRasterTileToEmsVectorTile } from './common/migrations/ems_raster_til
 import { topHitsTimeToSort } from './common/migrations/top_hits_time_to_sort';
 import { moveApplyGlobalQueryToSources } from './common/migrations/move_apply_global_query';
 import { addFieldMetaOptions } from './common/migrations/add_field_meta_options';
+import { migrateSymbolStyleDescriptor } from './common/migrations/migrate_symbol_style_descriptor';
 
 export const migrations = {
   map: {
@@ -46,5 +47,13 @@ export const migrations = {
         attributes: attributesPhase2,
       };
     },
+    '7.7.0': doc => {
+      const attributes = migrateSymbolStyleDescriptor(doc);
+
+      return {
+        ...doc,
+        attributes,
+      };
+    },
   },
 };

x-pack/legacy/plugins/maps/public/layers/styles/_index.scss

@@ -1,3 +1,4 @@
 @import './components/color_gradient';
 @import './vector/components/static_dynamic_style_row';
 @import './vector/components/color/color_stops';
+@import './vector/components/symbol/icon_select';

x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops_categorical.js

@@ -11,12 +11,12 @@ import { EuiFieldText } from '@elastic/eui';
 import {
   addCategoricalRow,
   isCategoricalStopsInvalid,
-  getOtherCategoryLabel,
   DEFAULT_CUSTOM_COLOR,
   DEFAULT_NEXT_COLOR,
 } from './color_stops_utils';
 import { i18n } from '@kbn/i18n';
 import { ColorStops } from './color_stops';
+import { getOtherCategoryLabel } from '../../style_util';
 
 export const ColorStopsCategorical = ({
   colorStops = [

x-pack/legacy/plugins/maps/public/layers/styles/vector/components/get_vector_style_label.js

@@ -22,6 +22,10 @@ export function getVectorStyleLabel(styleName) {
       return i18n.translate('xpack.maps.styles.vector.borderWidthLabel', {
         defaultMessage: 'Border width',
       });
+    case VECTOR_STYLES.ICON:
+      return i18n.translate('xpack.maps.styles.vector.iconLabel', {
+        defaultMessage: 'Icon',
+      });
     case VECTOR_STYLES.ICON_SIZE:
       return i18n.translate('xpack.maps.styles.vector.symbolSizeLabel', {
         defaultMessage: 'Symbol size',

x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/category.js

@@ -0,0 +1,43 @@
+/*
+ * 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 { VECTOR_STYLES } from '../../vector_style_defaults';
+import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+import { VectorIcon } from './vector_icon';
+
+export function Category({ styleName, label, color, isLinesOnly, isPointsOnly, symbolId }) {
+  function renderIcon() {
+    if (styleName === VECTOR_STYLES.LABEL_COLOR) {
+      return (
+        <EuiText size="xs" style={{ color }}>
+          Tx
+        </EuiText>
+      );
+    }
+
+    return (
+      <VectorIcon
+        fillColor={styleName === VECTOR_STYLES.FILL_COLOR ? color : 'none'}
+        isPointsOnly={isPointsOnly}
+        isLinesOnly={isLinesOnly}
+        strokeColor={color}
+        symbolId={symbolId}
+      />
+    );
+  }
+
+  return (
+    <EuiFlexItem>
+      <EuiFlexGroup direction="row" gutterSize="none">
+        <EuiFlexItem>
+          <EuiText size="xs">{label}</EuiText>
+        </EuiFlexItem>
+        <EuiFlexItem>{renderIcon()}</EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiFlexItem>
+  );
+}