From fed64c8ea2308a8278eb79df86f4821626f6d067 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Fri, 26 Jun 2020 06:45:09 -0600 Subject: [PATCH] [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 --- x-pack/plugins/maps/common/constants.ts | 12 ++++ .../ems_file_source/ems_file_source.tsx | 7 +- .../es_geo_grid_source/es_geo_grid_source.js | 6 +- .../es_pew_pew_source/es_pew_pew_source.js | 5 +- .../es_search_source/es_search_source.js | 6 +- .../mvt_single_layer_vector_source.ts | 7 +- .../classes/sources/vector_feature_types.ts | 11 --- .../sources/vector_source/vector_source.d.ts | 4 +- .../sources/vector_source/vector_source.js | 4 +- .../vector/components/vector_style_editor.js | 24 +++---- .../dynamic_icon_property.test.tsx.snap | 20 +++++- .../properties/dynamic_color_property.js | 4 +- .../properties/dynamic_icon_property.js | 2 +- .../properties/dynamic_icon_property.test.tsx | 58 ++++++++++++--- .../properties/dynamic_size_property.js | 8 ++- ...{style_util.test.js => style_util.test.ts} | 72 ++++++++++++------- .../vector/{style_util.js => style_util.ts} | 45 ++++++++---- .../classes/styles/vector/symbol_utils.js | 2 +- .../classes/styles/vector/vector_style.js | 26 +++---- .../styles/vector/vector_style.test.js | 5 +- 20 files changed, 211 insertions(+), 117 deletions(-) delete mode 100644 x-pack/plugins/maps/public/classes/sources/vector_feature_types.ts rename x-pack/plugins/maps/public/classes/styles/vector/{style_util.test.js => style_util.test.ts} (60%) rename x-pack/plugins/maps/public/classes/styles/vector/{style_util.js => style_util.ts} (57%) diff --git a/x-pack/plugins/maps/common/constants.ts b/x-pack/plugins/maps/common/constants.ts index ea722c18e7005b..bf30006441c9de 100644 --- 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 index f7fb0078764c43..f55a7434d12173 100644 --- 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 { - return [VECTOR_SHAPE_TYPES.POLYGON]; + async getSupportedShapeTypes(): Promise { + 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 index c05c1f2dd7c1e6..b613f577067bac 100644 --- 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,7 +7,6 @@ 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 { @@ -15,6 +14,7 @@ import { 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 index fda73bc0f73a04..076e7a758a4fbd 100644 --- 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 index 51dd57ffad0d15..c8f14f1dc6a4b6 100644 --- 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/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.ts b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.ts index 86a1589a7a0305..03b91df22d3cab 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.ts +++ b/x-pack/plugins/maps/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 { - return [VECTOR_SHAPE_TYPES.POINT, VECTOR_SHAPE_TYPES.LINE, VECTOR_SHAPE_TYPES.POLYGON]; + async getSupportedShapeTypes(): Promise { + 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 deleted file mode 100644 index 9f03357e17dad5..00000000000000 --- a/x-pack/plugins/maps/public/classes/sources/vector_feature_types.ts +++ /dev/null @@ -1,11 +0,0 @@ -/* - * 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. - */ - -export enum VECTOR_SHAPE_TYPES { - POINT = 'POINT', - LINE = 'LINE', - POLYGON = 'POLYGON', -} 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 index 711b7d600d74d9..99a7478cd83626 100644 --- 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; getFieldByName(fieldName: string): IField | null; getSyncMeta(): VectorSourceSyncMeta; - getSupportedShapeTypes(): Promise; + getSupportedShapeTypes(): Promise; 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 index ccf6c7963c9b4e..ecb13bb875721d 100644 --- 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 index 3424a972fed062..7856a4ddaff395 100644 --- 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,30 +414,30 @@ 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', }), @@ -445,9 +445,9 @@ export class VectorStyleEditor extends Component { ]; 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/x-pack/plugins/maps/public/classes/styles/vector/properties/__snapshots__/dynamic_icon_property.test.tsx.snap b/x-pack/plugins/maps/public/classes/styles/vector/properties/__snapshots__/dynamic_icon_property.test.tsx.snap index b4843324a0def0..631a6117a111db 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/properties/__snapshots__/dynamic_icon_property.test.tsx.snap +++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/__snapshots__/dynamic_icon_property.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Should render categorical legend with breaks 1`] = ` +exports[`renderLegendDetailRow Should render categorical legend with breaks 1`] = `
+ + + Other + + } + styleName="icon" + symbolId="square" + /> +
`; 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 index 4c02dee762e9da..556bb2b79e836e 100644 --- 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 index c7620512710dc5..665317569e5e8a 100644 --- 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 index 505c08ac35ba7e..132c0b3f276034 100644 --- 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, 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', + ]); + }); + }); }); diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_size_property.js b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_size_property.js index a0af2fbb939d85..662d1ccf33b95d 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_size_property.js +++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_size_property.js @@ -12,7 +12,7 @@ import { LARGE_MAKI_ICON_SIZE, SMALL_MAKI_ICON_SIZE, } from '../symbol_utils'; -import { VECTOR_STYLES } from '../../../../../common/constants'; +import { MB_LOOKUP_FUNCTION, VECTOR_STYLES } from '../../../../../common/constants'; import _ from 'lodash'; import React from 'react'; @@ -60,7 +60,7 @@ export class DynamicSizeProperty extends DynamicStyleProperty { minValue: rangeFieldMeta.min, maxValue: rangeFieldMeta.max, fallback: 0, - lookupFunction: 'get', + lookupFunction: MB_LOOKUP_FUNCTION.GET, fieldName: targetName, }), rangeFieldMeta.min, @@ -109,7 +109,9 @@ export class DynamicSizeProperty extends DynamicStyleProperty { } _getMbDataDrivenSize({ targetName, minSize, maxSize, minValue, maxValue }) { - const lookup = this.supportsMbFeatureState() ? 'feature-state' : 'get'; + const lookup = this.supportsMbFeatureState() + ? MB_LOOKUP_FUNCTION.FEATURE_STATE + : MB_LOOKUP_FUNCTION.GET; const stops = minValue === maxValue ? [maxValue, maxSize] : [minValue, minSize, maxValue, maxSize]; diff --git a/x-pack/plugins/maps/public/classes/styles/vector/style_util.test.js b/x-pack/plugins/maps/public/classes/styles/vector/style_util.test.ts similarity index 60% rename from x-pack/plugins/maps/public/classes/styles/vector/style_util.test.js rename to x-pack/plugins/maps/public/classes/styles/vector/style_util.test.ts index eb4c6708fb2dd9..6c1f060383d052 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/style_util.test.js +++ b/x-pack/plugins/maps/public/classes/styles/vector/style_util.test.ts @@ -5,58 +5,67 @@ */ import { isOnlySingleFeatureType, assignCategoriesToPalette, dynamicRound } from './style_util'; -import { VECTOR_SHAPE_TYPES } from '../../sources/vector_feature_types'; +import { VECTOR_SHAPE_TYPE } from '../../../../common/constants'; describe('isOnlySingleFeatureType', () => { describe('source supports single feature type', () => { - const supportedFeatures = [VECTOR_SHAPE_TYPES.POINT]; + const supportedFeatures = [VECTOR_SHAPE_TYPE.POINT]; + const hasFeatureType = { + [VECTOR_SHAPE_TYPE.POINT]: false, + [VECTOR_SHAPE_TYPE.LINE]: false, + [VECTOR_SHAPE_TYPE.POLYGON]: false, + }; test('Is only single feature type when only supported feature type is target feature type', () => { - expect(isOnlySingleFeatureType(VECTOR_SHAPE_TYPES.POINT, supportedFeatures)).toBe(true); + expect( + isOnlySingleFeatureType(VECTOR_SHAPE_TYPE.POINT, supportedFeatures, hasFeatureType) + ).toBe(true); }); test('Is not single feature type when only supported feature type is not target feature type', () => { - expect(isOnlySingleFeatureType(VECTOR_SHAPE_TYPES.LINE, supportedFeatures)).toBe(false); + expect( + isOnlySingleFeatureType(VECTOR_SHAPE_TYPE.LINE, supportedFeatures, hasFeatureType) + ).toBe(false); }); }); describe('source supports multiple feature types', () => { const supportedFeatures = [ - VECTOR_SHAPE_TYPES.POINT, - VECTOR_SHAPE_TYPES.LINE, - VECTOR_SHAPE_TYPES.POLYGON, + VECTOR_SHAPE_TYPE.POINT, + VECTOR_SHAPE_TYPE.LINE, + VECTOR_SHAPE_TYPE.POLYGON, ]; test('Is only single feature type when data only has target feature type', () => { const hasFeatureType = { - [VECTOR_SHAPE_TYPES.POINT]: true, - [VECTOR_SHAPE_TYPES.LINE]: false, - [VECTOR_SHAPE_TYPES.POLYGON]: false, + [VECTOR_SHAPE_TYPE.POINT]: true, + [VECTOR_SHAPE_TYPE.LINE]: false, + [VECTOR_SHAPE_TYPE.POLYGON]: false, }; expect( - isOnlySingleFeatureType(VECTOR_SHAPE_TYPES.POINT, supportedFeatures, hasFeatureType) + isOnlySingleFeatureType(VECTOR_SHAPE_TYPE.POINT, supportedFeatures, hasFeatureType) ).toBe(true); }); test('Is not single feature type when data has multiple feature types', () => { const hasFeatureType = { - [VECTOR_SHAPE_TYPES.POINT]: true, - [VECTOR_SHAPE_TYPES.LINE]: true, - [VECTOR_SHAPE_TYPES.POLYGON]: true, + [VECTOR_SHAPE_TYPE.POINT]: true, + [VECTOR_SHAPE_TYPE.LINE]: true, + [VECTOR_SHAPE_TYPE.POLYGON]: true, }; expect( - isOnlySingleFeatureType(VECTOR_SHAPE_TYPES.LINE, supportedFeatures, hasFeatureType) + isOnlySingleFeatureType(VECTOR_SHAPE_TYPE.LINE, supportedFeatures, hasFeatureType) ).toBe(false); }); test('Is not single feature type when data does not have target feature types', () => { const hasFeatureType = { - [VECTOR_SHAPE_TYPES.POINT]: false, - [VECTOR_SHAPE_TYPES.LINE]: true, - [VECTOR_SHAPE_TYPES.POLYGON]: false, + [VECTOR_SHAPE_TYPE.POINT]: false, + [VECTOR_SHAPE_TYPE.LINE]: true, + [VECTOR_SHAPE_TYPE.POLYGON]: false, }; expect( - isOnlySingleFeatureType(VECTOR_SHAPE_TYPES.POINT, supportedFeatures, hasFeatureType) + isOnlySingleFeatureType(VECTOR_SHAPE_TYPE.POINT, supportedFeatures, hasFeatureType) ).toBe(false); }); }); @@ -64,7 +73,12 @@ describe('isOnlySingleFeatureType', () => { describe('assignCategoriesToPalette', () => { test('Categories and palette values have same length', () => { - const categories = [{ key: 'alpah' }, { key: 'bravo' }, { key: 'charlie' }, { key: 'delta' }]; + const categories = [ + { key: 'alpah', count: 1 }, + { key: 'bravo', count: 1 }, + { key: 'charlie', count: 1 }, + { key: 'delta', count: 1 }, + ]; const paletteValues = ['red', 'orange', 'yellow', 'green']; expect(assignCategoriesToPalette({ categories, paletteValues })).toEqual({ stops: [ @@ -72,31 +86,39 @@ describe('assignCategoriesToPalette', () => { { stop: 'bravo', style: 'orange' }, { stop: 'charlie', style: 'yellow' }, ], - fallback: 'green', + fallbackSymbolId: 'green', }); }); test('Should More categories than palette values', () => { - const categories = [{ key: 'alpah' }, { key: 'bravo' }, { key: 'charlie' }, { key: 'delta' }]; + const categories = [ + { key: 'alpah', count: 1 }, + { key: 'bravo', count: 1 }, + { key: 'charlie', count: 1 }, + { key: 'delta', count: 1 }, + ]; const paletteValues = ['red', 'orange', 'yellow']; expect(assignCategoriesToPalette({ categories, paletteValues })).toEqual({ stops: [ { stop: 'alpah', style: 'red' }, { stop: 'bravo', style: 'orange' }, ], - fallback: 'yellow', + fallbackSymbolId: 'yellow', }); }); test('Less categories than palette values', () => { - const categories = [{ key: 'alpah' }, { key: 'bravo' }]; + const categories = [ + { key: 'alpah', count: 1 }, + { key: 'bravo', count: 1 }, + ]; const paletteValues = ['red', 'orange', 'yellow', 'green', 'blue']; expect(assignCategoriesToPalette({ categories, paletteValues })).toEqual({ stops: [ { stop: 'alpah', style: 'red' }, { stop: 'bravo', style: 'orange' }, ], - fallback: 'yellow', + fallbackSymbolId: 'yellow', }); }); }); diff --git a/x-pack/plugins/maps/public/classes/styles/vector/style_util.js b/x-pack/plugins/maps/public/classes/styles/vector/style_util.ts similarity index 57% rename from x-pack/plugins/maps/public/classes/styles/vector/style_util.js rename to x-pack/plugins/maps/public/classes/styles/vector/style_util.ts index 3b62dcb27dced6..d190a62e6f300a 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/style_util.js +++ b/x-pack/plugins/maps/public/classes/styles/vector/style_util.ts @@ -5,6 +5,8 @@ */ import { i18n } from '@kbn/i18n'; +import { MB_LOOKUP_FUNCTION, VECTOR_SHAPE_TYPE } from '../../../../common/constants'; +import { Category } from '../../../../common/descriptor_types'; export function getOtherCategoryLabel() { return i18n.translate('xpack.maps.styles.categorical.otherCategoryLabel', { @@ -12,29 +14,32 @@ export function getOtherCategoryLabel() { }); } -export function getComputedFieldName(styleName, fieldName) { +export function getComputedFieldName(styleName: string, fieldName: string) { return `${getComputedFieldNamePrefix(fieldName)}__${styleName}`; } -export function getComputedFieldNamePrefix(fieldName) { +export function getComputedFieldNamePrefix(fieldName: string) { return `__kbn__dynamic__${fieldName}`; } -export function isOnlySingleFeatureType(featureType, supportedFeatures, hasFeatureType) { +export function isOnlySingleFeatureType( + featureType: VECTOR_SHAPE_TYPE, + supportedFeatures: VECTOR_SHAPE_TYPE[], + hasFeatureType: { [key in keyof typeof VECTOR_SHAPE_TYPE]: boolean } +): boolean { if (supportedFeatures.length === 1) { return supportedFeatures[0] === featureType; } const featureTypes = Object.keys(hasFeatureType); - return featureTypes.reduce((isOnlyTargetFeatureType, featureTypeKey) => { + // @ts-expect-error + return featureTypes.reduce((accumulator: boolean, featureTypeKey: VECTOR_SHAPE_TYPE) => { const hasFeature = hasFeatureType[featureTypeKey]; - return featureTypeKey === featureType - ? isOnlyTargetFeatureType && hasFeature - : isOnlyTargetFeatureType && !hasFeature; + return featureTypeKey === featureType ? accumulator && hasFeature : accumulator && !hasFeature; }, true); } -export function dynamicRound(value) { +export function dynamicRound(value: number | string) { if (typeof value !== 'number') { return value; } @@ -49,13 +54,19 @@ export function dynamicRound(value) { return precision === 0 ? Math.round(value) : parseFloat(value.toFixed(precision + 1)); } -export function assignCategoriesToPalette({ categories, paletteValues }) { +export function assignCategoriesToPalette({ + categories, + paletteValues, +}: { + categories: Category[]; + paletteValues: string[]; +}) { const stops = []; - let fallback = null; + let fallbackSymbolId = null; - if (categories && categories.length && paletteValues && paletteValues.length) { + if (categories.length && paletteValues.length) { const maxLength = Math.min(paletteValues.length, categories.length + 1); - fallback = paletteValues[maxLength - 1]; + fallbackSymbolId = paletteValues[maxLength - 1]; for (let i = 0; i < maxLength - 1; i++) { stops.push({ stop: categories[i].key, @@ -66,7 +77,7 @@ export function assignCategoriesToPalette({ categories, paletteValues }) { return { stops, - fallback, + fallbackSymbolId, }; } @@ -76,6 +87,12 @@ export function makeMbClampedNumberExpression({ minValue, maxValue, fallback, +}: { + lookupFunction: MB_LOOKUP_FUNCTION; + fieldName: string; + minValue: number; + maxValue: number; + fallback: number; }) { const clamp = ['max', ['min', ['to-number', [lookupFunction, fieldName]], maxValue], minValue]; return [ @@ -83,7 +100,7 @@ export function makeMbClampedNumberExpression({ [ 'case', ['==', [lookupFunction, fieldName], null], - minValue - 1, //== does a JS-y like check where returns true for null and undefined + minValue - 1, // == does a JS-y like check where returns true for null and undefined clamp, ], fallback, diff --git a/x-pack/plugins/maps/public/classes/styles/vector/symbol_utils.js b/x-pack/plugins/maps/public/classes/styles/vector/symbol_utils.js index 1672af8eccff8a..04df9d73d75cd8 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/symbol_utils.js +++ b/x-pack/plugins/maps/public/classes/styles/vector/symbol_utils.js @@ -140,5 +140,5 @@ export function getIconPaletteOptions(isDarkMode) { export function getIconPalette(paletteId) { const palette = ICON_PALETTES.find(({ id }) => id === paletteId); - return palette ? [...palette.icons] : null; + return palette ? [...palette.icons] : []; } diff --git a/x-pack/plugins/maps/public/classes/styles/vector/vector_style.js b/x-pack/plugins/maps/public/classes/styles/vector/vector_style.js index 989ac268c05521..04a5381fa25927 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/vector_style.js +++ b/x-pack/plugins/maps/public/classes/styles/vector/vector_style.js @@ -16,12 +16,12 @@ import { SOURCE_FORMATTERS_DATA_REQUEST_ID, LAYER_STYLE_TYPE, DEFAULT_ICON, + VECTOR_SHAPE_TYPE, VECTOR_STYLES, } from '../../../../common/constants'; import { StyleMeta } from './style_meta'; import { VectorIcon } from './components/legend/vector_icon'; import { VectorStyleLegend } from './components/legend/vector_style_legend'; -import { VECTOR_SHAPE_TYPES } from '../../sources/vector_feature_types'; import { getComputedFieldName, isOnlySingleFeatureType } from './style_util'; import { StaticStyleProperty } from './properties/static_style_property'; import { DynamicStyleProperty } from './properties/dynamic_style_property'; @@ -249,24 +249,24 @@ export class VectorStyle extends AbstractStyle { const supportedFeatures = await this._source.getSupportedShapeTypes(); const hasFeatureType = { - [VECTOR_SHAPE_TYPES.POINT]: false, - [VECTOR_SHAPE_TYPES.LINE]: false, - [VECTOR_SHAPE_TYPES.POLYGON]: false, + [VECTOR_SHAPE_TYPE.POINT]: false, + [VECTOR_SHAPE_TYPE.LINE]: false, + [VECTOR_SHAPE_TYPE.POLYGON]: false, }; if (supportedFeatures.length > 1) { for (let i = 0; i < features.length; i++) { const feature = features[i]; - if (!hasFeatureType[VECTOR_SHAPE_TYPES.POINT] && POINTS.includes(feature.geometry.type)) { - hasFeatureType[VECTOR_SHAPE_TYPES.POINT] = true; + if (!hasFeatureType[VECTOR_SHAPE_TYPE.POINT] && POINTS.includes(feature.geometry.type)) { + hasFeatureType[VECTOR_SHAPE_TYPE.POINT] = true; } - if (!hasFeatureType[VECTOR_SHAPE_TYPES.LINE] && LINES.includes(feature.geometry.type)) { - hasFeatureType[VECTOR_SHAPE_TYPES.LINE] = true; + if (!hasFeatureType[VECTOR_SHAPE_TYPE.LINE] && LINES.includes(feature.geometry.type)) { + hasFeatureType[VECTOR_SHAPE_TYPE.LINE] = true; } if ( - !hasFeatureType[VECTOR_SHAPE_TYPES.POLYGON] && + !hasFeatureType[VECTOR_SHAPE_TYPE.POLYGON] && POLYGONS.includes(feature.geometry.type) ) { - hasFeatureType[VECTOR_SHAPE_TYPES.POLYGON] = true; + hasFeatureType[VECTOR_SHAPE_TYPE.POLYGON] = true; } } } @@ -274,17 +274,17 @@ export class VectorStyle extends AbstractStyle { const styleMeta = { geometryTypes: { isPointsOnly: isOnlySingleFeatureType( - VECTOR_SHAPE_TYPES.POINT, + VECTOR_SHAPE_TYPE.POINT, supportedFeatures, hasFeatureType ), isLinesOnly: isOnlySingleFeatureType( - VECTOR_SHAPE_TYPES.LINE, + VECTOR_SHAPE_TYPE.LINE, supportedFeatures, hasFeatureType ), isPolygonsOnly: isOnlySingleFeatureType( - VECTOR_SHAPE_TYPES.POLYGON, + VECTOR_SHAPE_TYPE.POLYGON, supportedFeatures, hasFeatureType ), diff --git a/x-pack/plugins/maps/public/classes/styles/vector/vector_style.test.js b/x-pack/plugins/maps/public/classes/styles/vector/vector_style.test.js index 426f1d6afa952d..a0dc07b8e545bb 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/vector_style.test.js +++ b/x-pack/plugins/maps/public/classes/styles/vector/vector_style.test.js @@ -6,8 +6,7 @@ import { VectorStyle } from './vector_style'; import { DataRequest } from '../../util/data_request'; -import { VECTOR_SHAPE_TYPES } from '../../sources/vector_feature_types'; -import { FIELD_ORIGIN, STYLE_TYPE } from '../../../../common/constants'; +import { FIELD_ORIGIN, STYLE_TYPE, VECTOR_SHAPE_TYPE } from '../../../../common/constants'; jest.mock('../../../kibana_services'); jest.mock('ui/new_platform'); @@ -28,7 +27,7 @@ class MockField { class MockSource { constructor({ supportedShapeTypes } = {}) { - this._supportedShapeTypes = supportedShapeTypes || Object.values(VECTOR_SHAPE_TYPES); + this._supportedShapeTypes = supportedShapeTypes || Object.values(VECTOR_SHAPE_TYPE); } getSupportedShapeTypes() { return this._supportedShapeTypes;