[Maps] Fix icon palettes are not working (#69937) (#70035)

* [Maps] Fix icon palettes are not working * unit test mapbox icon-image expression * fix unit test expect statements
elastic · Jun 26, 2020 · fed64c8 · fed64c8
1 parent 7b6c41b
commit fed64c8
Show file tree

Hide file tree

Showing 20 changed files with 211 additions and 117 deletions.
diff --git a/x-pack/plugins/maps/common/constants.ts b/x-pack/plugins/maps/common/constants.ts
@@ -232,3 +232,15 @@ export enum LAYER_WIZARD_CATEGORY {
   REFERENCE = 'REFERENCE',
   SOLUTIONS = 'SOLUTIONS',
 }
+
+export enum VECTOR_SHAPE_TYPE {
+  POINT = 'POINT',
+  LINE = 'LINE',
+  POLYGON = 'POLYGON',
+}
+
+// https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/#data-expressions
+export enum MB_LOOKUP_FUNCTION {
+  GET = 'get',
+  FEATURE_STATE = 'feature-state',
+}
diff --git a/x-pack/plugins/maps/public/classes/sources/ems_file_source/ems_file_source.tsx b/x-pack/plugins/maps/public/classes/sources/ems_file_source/ems_file_source.tsx
@@ -11,8 +11,7 @@ import { Adapters } from 'src/plugins/inspector/public';
 import { FileLayer } from '@elastic/ems-client';
 import { Attribution, ImmutableSourceProperty, SourceEditorArgs } from '../source';
 import { AbstractVectorSource, GeoJsonWithMeta, IVectorSource } from '../vector_source';
-import { VECTOR_SHAPE_TYPES } from '../vector_feature_types';
-import { SOURCE_TYPES, FIELD_ORIGIN } from '../../../../common/constants';
+import { SOURCE_TYPES, FIELD_ORIGIN, VECTOR_SHAPE_TYPE } from '../../../../common/constants';
 import { getEmsFileLayers } from '../../../meta';
 import { getDataSourceLabel } from '../../../../common/i18n_getters';
 import { UpdateSourceEditor } from './update_source_editor';
@@ -179,8 +178,8 @@ export class EMSFileSource extends AbstractVectorSource implements IEmsFileSourc
     return Promise.all(promises);
   }
 
-  async getSupportedShapeTypes(): Promise<VECTOR_SHAPE_TYPES[]> {
-    return [VECTOR_SHAPE_TYPES.POLYGON];
+  async getSupportedShapeTypes(): Promise<VECTOR_SHAPE_TYPE[]> {
+    return [VECTOR_SHAPE_TYPE.POLYGON];
   }
 }
 

diff --git a/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/es_geo_grid_source.js b/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/es_geo_grid_source.js
@@ -7,14 +7,14 @@
 import React from 'react';
 import uuid from 'uuid/v4';
 
-import { VECTOR_SHAPE_TYPES } from '../vector_feature_types';
 import { convertCompositeRespToGeoJson, convertRegularRespToGeoJson } from './convert_to_geojson';
 import { UpdateSourceEditor } from './update_source_editor';
 import {
   SOURCE_TYPES,
   DEFAULT_MAX_BUCKETS_LIMIT,
   RENDER_AS,
   GRID_RESOLUTION,
+  VECTOR_SHAPE_TYPE,
 } from '../../../../common/constants';
 import { i18n } from '@kbn/i18n';
 import { getDataSourceLabel } from '../../../../common/i18n_getters';
@@ -326,10 +326,10 @@ export class ESGeoGridSource extends AbstractESAggSource {
 
   async getSupportedShapeTypes() {
     if (this._descriptor.requestType === RENDER_AS.GRID) {
-      return [VECTOR_SHAPE_TYPES.POLYGON];
+      return [VECTOR_SHAPE_TYPE.POLYGON];
     }
 
-    return [VECTOR_SHAPE_TYPES.POINT];
+    return [VECTOR_SHAPE_TYPE.POINT];
   }
 }
 

diff --git a/x-pack/plugins/maps/public/classes/sources/es_pew_pew_source/es_pew_pew_source.js b/x-pack/plugins/maps/public/classes/sources/es_pew_pew_source/es_pew_pew_source.js
@@ -7,10 +7,9 @@
 import React from 'react';
 import uuid from 'uuid/v4';
 
-import { VECTOR_SHAPE_TYPES } from '../vector_feature_types';
 import { UpdateSourceEditor } from './update_source_editor';
 import { i18n } from '@kbn/i18n';
-import { SOURCE_TYPES } from '../../../../common/constants';
+import { SOURCE_TYPES, VECTOR_SHAPE_TYPE } from '../../../../common/constants';
 import { getDataSourceLabel } from '../../../../common/i18n_getters';
 import { convertToLines } from './convert_to_lines';
 import { AbstractESAggSource } from '../es_agg_source';
@@ -61,7 +60,7 @@ export class ESPewPewSource extends AbstractESAggSource {
   }
 
   async getSupportedShapeTypes() {
-    return [VECTOR_SHAPE_TYPES.LINE];
+    return [VECTOR_SHAPE_TYPE.LINE];
   }
 
   async getImmutableProperties() {

diff --git a/x-pack/plugins/maps/public/classes/sources/es_search_source/es_search_source.js b/x-pack/plugins/maps/public/classes/sources/es_search_source/es_search_source.js
@@ -7,7 +7,6 @@
 import _ from 'lodash';
 import React from 'react';
 
-import { VECTOR_SHAPE_TYPES } from '../vector_feature_types';
 import { AbstractESSource } from '../es_source';
 import { getSearchService } from '../../../kibana_services';
 import { hitsToGeoJson } from '../../../elasticsearch_geo_utils';
@@ -18,6 +17,7 @@ import {
   DEFAULT_MAX_BUCKETS_LIMIT,
   SORT_ORDER,
   SCALING_TYPES,
+  VECTOR_SHAPE_TYPE,
 } from '../../../../common/constants';
 import { i18n } from '@kbn/i18n';
 import { getDataSourceLabel } from '../../../../common/i18n_getters';
@@ -471,10 +471,10 @@ export class ESSearchSource extends AbstractESSource {
     }
 
     if (geoFieldType === ES_GEO_FIELD_TYPE.GEO_POINT) {
-      return [VECTOR_SHAPE_TYPES.POINT];
+      return [VECTOR_SHAPE_TYPE.POINT];
     }
 
-    return [VECTOR_SHAPE_TYPES.POINT, VECTOR_SHAPE_TYPES.LINE, VECTOR_SHAPE_TYPES.POLYGON];
+    return [VECTOR_SHAPE_TYPE.POINT, VECTOR_SHAPE_TYPE.LINE, VECTOR_SHAPE_TYPE.POLYGON];
   }
 
   getSourceTooltipContent(sourceDataRequest) {

diff --git a/...s/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.ts b/...s/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.ts
@@ -8,8 +8,7 @@ import { i18n } from '@kbn/i18n';
 import uuid from 'uuid/v4';
 import { AbstractSource, ImmutableSourceProperty } from '../source';
 import { BoundsFilters, GeoJsonWithMeta, ITiledSingleLayerVectorSource } from '../vector_source';
-import { MAX_ZOOM, MIN_ZOOM, SOURCE_TYPES } from '../../../../common/constants';
-import { VECTOR_SHAPE_TYPES } from '../vector_feature_types';
+import { MAX_ZOOM, MIN_ZOOM, SOURCE_TYPES, VECTOR_SHAPE_TYPE } from '../../../../common/constants';
 import { IField } from '../../fields/field';
 import { registerSource } from '../source_registry';
 import { getDataSourceLabel, getUrlLabel } from '../../../../common/i18n_getters';
@@ -116,8 +115,8 @@ export class MVTSingleLayerVectorSource extends AbstractSource
     };
   }
 
-  async getSupportedShapeTypes(): Promise<VECTOR_SHAPE_TYPES[]> {
-    return [VECTOR_SHAPE_TYPES.POINT, VECTOR_SHAPE_TYPES.LINE, VECTOR_SHAPE_TYPES.POLYGON];
+  async getSupportedShapeTypes(): Promise<VECTOR_SHAPE_TYPE[]> {
+    return [VECTOR_SHAPE_TYPE.POINT, VECTOR_SHAPE_TYPE.LINE, VECTOR_SHAPE_TYPE.POLYGON];
   }
 
   canFormatFeatureProperties() {

diff --git a/x-pack/plugins/maps/public/classes/sources/vector_feature_types.ts b/x-pack/plugins/maps/public/classes/sources/vector_feature_types.ts
diff --git a/x-pack/plugins/maps/public/classes/sources/vector_source/vector_source.d.ts b/x-pack/plugins/maps/public/classes/sources/vector_source/vector_source.d.ts
@@ -16,7 +16,7 @@ import {
   VectorSourceRequestMeta,
   VectorSourceSyncMeta,
 } from '../../../../common/descriptor_types';
-import { VECTOR_SHAPE_TYPES } from '../vector_feature_types';
+import { VECTOR_SHAPE_TYPE } from '../../../../common/constants';
 import { ITooltipProperty } from '../../tooltips/tooltip_property';
 
 export type GeoJsonFetchMeta = ESSearchSourceResponseMeta;
@@ -68,7 +68,7 @@ export class AbstractVectorSource extends AbstractSource implements IVectorSourc
   getFields(): Promise<IField[]>;
   getFieldByName(fieldName: string): IField | null;
   getSyncMeta(): VectorSourceSyncMeta;
-  getSupportedShapeTypes(): Promise<VECTOR_SHAPE_TYPES[]>;
+  getSupportedShapeTypes(): Promise<VECTOR_SHAPE_TYPE[]>;
   canFormatFeatureProperties(): boolean;
   getApplyGlobalQuery(): boolean;
   getFieldNames(): string[];

diff --git a/x-pack/plugins/maps/public/classes/sources/vector_source/vector_source.js b/x-pack/plugins/maps/public/classes/sources/vector_source/vector_source.js
@@ -9,7 +9,7 @@ import { AbstractSource } from './../source';
 import * as topojson from 'topojson-client';
 import _ from 'lodash';
 import { i18n } from '@kbn/i18n';
-import { VECTOR_SHAPE_TYPES } from './../vector_feature_types';
+import { VECTOR_SHAPE_TYPE } from '../../../../common/constants';
 
 export class AbstractVectorSource extends AbstractSource {
   static async getGeoJson({ format, featureCollectionPath, fetchUrl }) {
@@ -127,7 +127,7 @@ export class AbstractVectorSource extends AbstractSource {
   }
 
   async getSupportedShapeTypes() {
-    return [VECTOR_SHAPE_TYPES.POINT, VECTOR_SHAPE_TYPES.LINE, VECTOR_SHAPE_TYPES.POLYGON];
+    return [VECTOR_SHAPE_TYPE.POINT, VECTOR_SHAPE_TYPE.LINE, VECTOR_SHAPE_TYPE.POLYGON];
   }
 
   getSourceTooltipContent(/* sourceDataRequest */) {

diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/vector_style_editor.js b/x-pack/plugins/maps/public/classes/styles/vector/components/vector_style_editor.js
@@ -16,7 +16,6 @@ import { VectorStyleLabelBorderSizeEditor } from './label/vector_style_label_bor
 import { OrientationEditor } from './orientation/orientation_editor';
 import { getDefaultDynamicProperties, getDefaultStaticProperties } from '../vector_style_defaults';
 import { DEFAULT_FILL_COLORS, DEFAULT_LINE_COLORS } from '../../color_utils';
-import { VECTOR_SHAPE_TYPES } from '../../../sources/vector_feature_types';
 import { i18n } from '@kbn/i18n';
 
 import { EuiSpacer, EuiButtonGroup, EuiFormRow, EuiSwitch } from '@elastic/eui';
@@ -26,6 +25,7 @@ import {
   LABEL_BORDER_SIZES,
   VECTOR_STYLES,
   STYLE_TYPE,
+  VECTOR_SHAPE_TYPE,
 } from '../../../../../common/constants';
 
 export class VectorStyleEditor extends Component {
@@ -96,11 +96,11 @@ export class VectorStyleEditor extends Component {
     }
 
     if (this.state.selectedFeature === null) {
-      let selectedFeature = VECTOR_SHAPE_TYPES.POLYGON;
+      let selectedFeature = VECTOR_SHAPE_TYPE.POLYGON;
       if (this.props.isPointsOnly) {
-        selectedFeature = VECTOR_SHAPE_TYPES.POINT;
+        selectedFeature = VECTOR_SHAPE_TYPE.POINT;
       } else if (this.props.isLinesOnly) {
-        selectedFeature = VECTOR_SHAPE_TYPES.LINE;
+        selectedFeature = VECTOR_SHAPE_TYPE.LINE;
       }
       this.setState({
         selectedFeature: selectedFeature,
@@ -414,40 +414,40 @@ export class VectorStyleEditor extends Component {
 
     if (supportedFeatures.length === 1) {
       switch (supportedFeatures[0]) {
-        case VECTOR_SHAPE_TYPES.POINT:
+        case VECTOR_SHAPE_TYPE.POINT:
           return this._renderPointProperties();
-        case VECTOR_SHAPE_TYPES.LINE:
+        case VECTOR_SHAPE_TYPE.LINE:
           return this._renderLineProperties();
-        case VECTOR_SHAPE_TYPES.POLYGON:
+        case VECTOR_SHAPE_TYPE.POLYGON:
           return this._renderPolygonProperties();
       }
     }
 
     const featureButtons = [
       {
-        id: VECTOR_SHAPE_TYPES.POINT,
+        id: VECTOR_SHAPE_TYPE.POINT,
         label: i18n.translate('xpack.maps.vectorStyleEditor.pointLabel', {
           defaultMessage: 'Points',
         }),
       },
       {
-        id: VECTOR_SHAPE_TYPES.LINE,
+        id: VECTOR_SHAPE_TYPE.LINE,
         label: i18n.translate('xpack.maps.vectorStyleEditor.lineLabel', {
           defaultMessage: 'Lines',
         }),
       },
       {
-        id: VECTOR_SHAPE_TYPES.POLYGON,
+        id: VECTOR_SHAPE_TYPE.POLYGON,
         label: i18n.translate('xpack.maps.vectorStyleEditor.polygonLabel', {
           defaultMessage: 'Polygons',
         }),
       },
     ];
 
     let styleProperties = this._renderPolygonProperties();
-    if (selectedFeature === VECTOR_SHAPE_TYPES.LINE) {
+    if (selectedFeature === VECTOR_SHAPE_TYPE.LINE) {
       styleProperties = this._renderLineProperties();
-    } else if (selectedFeature === VECTOR_SHAPE_TYPES.POINT) {
+    } else if (selectedFeature === VECTOR_SHAPE_TYPE.POINT) {
       styleProperties = this._renderPointProperties();
     }
 

diff --git a/...public/classes/styles/vector/properties/__snapshots__/dynamic_icon_property.test.tsx.snap b/...public/classes/styles/vector/properties/__snapshots__/dynamic_icon_property.test.tsx.snap
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_color_property.js b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_color_property.js
@@ -13,7 +13,7 @@ import {
   GRADIENT_INTERVALS,
 } from '../../color_utils';
 import React from 'react';
-import { COLOR_MAP_TYPE } from '../../../../../common/constants';
+import { COLOR_MAP_TYPE, MB_LOOKUP_FUNCTION } from '../../../../../common/constants';
 import {
   isCategoricalStopsInvalid,
   getOtherCategoryLabel,
@@ -152,7 +152,7 @@ export class DynamicColorProperty extends DynamicStyleProperty {
         makeMbClampedNumberExpression({
           minValue: rangeFieldMeta.min,
           maxValue: rangeFieldMeta.max,
-          lookupFunction: 'feature-state',
+          lookupFunction: MB_LOOKUP_FUNCTION.FEATURE_STATE,
           fallback: lessThanFirstStopValue,
           fieldName: targetName,
         }),

diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_icon_property.js b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_icon_property.js
@@ -23,7 +23,7 @@ export class DynamicIconProperty extends DynamicStyleProperty {
 
   getNumberOfCategories() {
     const palette = getIconPalette(this._options.iconPaletteId);
-    return palette ? palette.length : 0;
+    return palette.length;
   }
 
   syncIconWithMb(symbolLayerId, mbMap, iconPixelSize) {

diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_icon_property.test.tsx b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_icon_property.test.tsx
@@ -34,8 +34,8 @@ const makeProperty = (options: Partial<IconDynamicOptions>, field: IField = mock
   );
 };
 
-describe('DynamicIconProperty', () => {
-  it('should derive category number from palettes', async () => {
+describe('getNumberOfCategories', () => {
+  test('should derive category number from palettes', async () => {
     const filled = makeProperty({
       iconPaletteId: 'filledShapes',
     });
@@ -47,15 +47,53 @@ describe('DynamicIconProperty', () => {
   });
 });
 
-test('Should render categorical legend with breaks', async () => {
-  const iconStyle = makeProperty({
-    iconPaletteId: 'filledShapes',
+describe('renderLegendDetailRow', () => {
+  test('Should render categorical legend with breaks', async () => {
+    const iconStyle = makeProperty({
+      iconPaletteId: 'filledShapes',
+    });
+
+    const legendRow = iconStyle.renderLegendDetailRow({ isPointsOnly: true, isLinesOnly: false });
+    const component = shallow(legendRow);
+    await new Promise((resolve) => process.nextTick(resolve));
+    component.update();
+
+    expect(component).toMatchSnapshot();
   });
+});
 
-  const legendRow = iconStyle.renderLegendDetailRow({ isPointsOnly: true, isLinesOnly: false });
-  const component = shallow(legendRow);
-  await new Promise((resolve) => process.nextTick(resolve));
-  component.update();
+describe('get mapbox icon-image expression (via internal _getMbIconImageExpression)', () => {
+  describe('categorical icon palette', () => {
+    test('should return mapbox expression for pre-defined icon palette', async () => {
+      const iconStyle = makeProperty({
+        iconPaletteId: 'filledShapes',
+      });
+      expect(iconStyle._getMbIconImageExpression(15)).toEqual([
+        'match',
+        ['to-string', ['get', 'foobar']],
+        'US',
+        'circle-15',
+        'CN',
+        'marker-15',
+        'square-15',
+      ]);
+    });
 
-  expect(component).toMatchSnapshot();
+    test('should return mapbox expression for custom icon palette', async () => {
+      const iconStyle = makeProperty({
+        useCustomIconMap: true,
+        customIconStops: [
+          { stop: null, icon: 'circle' },
+          { stop: 'MX', icon: 'marker' },
+        ],
+      });
+      expect(iconStyle._getMbIconImageExpression(15)).toEqual([
+        'match',
+        ['to-string', ['get', 'foobar']],
+        'MX',
+        'marker-15',
+        'circle-15',
+      ]);
+    });
+  });
 });