From 1d1cd25e0e240e49c101a89d206b62916701439d Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Thu, 23 Apr 2020 15:54:33 -0400 Subject: [PATCH 01/97] tmp commit --- ....d.ts => data_request_descriptor_types.ts} | 0 .../maps/common/descriptor_types/index.ts | 2 +- .../{descriptor_types.d.ts => sources.d.ts} | 12 +++ ....ts => style_property_descriptor_types.ts} | 0 .../maps/public/layers/fields/mvt_field.ts | 49 +++++++++++++ .../layer_wizard.tsx | 2 +- .../mvt_field_config_editor.tsx | 73 +++++++++++++++++++ .../mvt_single_layer_vector_source_editor.tsx | 28 +++++-- .../mvt_single_layer_vector_source/types.ts | 15 ++++ 9 files changed, 172 insertions(+), 9 deletions(-) rename x-pack/plugins/maps/common/descriptor_types/{data_request_descriptor_types.d.ts => data_request_descriptor_types.ts} (100%) rename x-pack/plugins/maps/common/descriptor_types/{descriptor_types.d.ts => sources.d.ts} (96%) rename x-pack/plugins/maps/common/descriptor_types/{style_property_descriptor_types.d.ts => style_property_descriptor_types.ts} (100%) create mode 100644 x-pack/plugins/maps/public/layers/fields/mvt_field.ts create mode 100644 x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx create mode 100644 x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/types.ts diff --git a/x-pack/plugins/maps/common/descriptor_types/data_request_descriptor_types.d.ts b/x-pack/plugins/maps/common/descriptor_types/data_request_descriptor_types.ts similarity index 100% rename from x-pack/plugins/maps/common/descriptor_types/data_request_descriptor_types.d.ts rename to x-pack/plugins/maps/common/descriptor_types/data_request_descriptor_types.ts diff --git a/x-pack/plugins/maps/common/descriptor_types/index.ts b/x-pack/plugins/maps/common/descriptor_types/index.ts index af0f4487f471b..b0ae065856a5d 100644 --- a/x-pack/plugins/maps/common/descriptor_types/index.ts +++ b/x-pack/plugins/maps/common/descriptor_types/index.ts @@ -5,6 +5,6 @@ */ export * from './data_request_descriptor_types'; -export * from './descriptor_types'; +export * from './sources'; export * from './map_descriptor'; export * from './style_property_descriptor_types'; diff --git a/x-pack/plugins/maps/common/descriptor_types/descriptor_types.d.ts b/x-pack/plugins/maps/common/descriptor_types/sources.d.ts similarity index 96% rename from x-pack/plugins/maps/common/descriptor_types/descriptor_types.d.ts rename to x-pack/plugins/maps/common/descriptor_types/sources.d.ts index 6980f14d0788a..8d566f1dc4aa1 100644 --- a/x-pack/plugins/maps/common/descriptor_types/descriptor_types.d.ts +++ b/x-pack/plugins/maps/common/descriptor_types/sources.d.ts @@ -94,6 +94,16 @@ export type XYZTMSSourceDescriptor = AbstractSourceDescriptor & urlTemplate: string; }; +export enum MVTFieldType { + String = 'String', + Number = 'Number', +} + +export type MVTFieldDescriptor = { + name: string; + type: MVTFieldType; +}; + export type TiledSingleLayerVectorSourceDescriptor = AbstractSourceDescriptor & { urlTemplate: string; layerName: string; @@ -104,6 +114,8 @@ export type TiledSingleLayerVectorSourceDescriptor = AbstractSourceDescriptor & // e.g. EMS basemap data from level 14 is at most detailed resolution and can be displayed at higher levels minSourceZoom: number; maxSourceZoom: number; + + fields?: MVTFieldDescriptor[]; }; export type JoinDescriptor = { diff --git a/x-pack/plugins/maps/common/descriptor_types/style_property_descriptor_types.d.ts b/x-pack/plugins/maps/common/descriptor_types/style_property_descriptor_types.ts similarity index 100% rename from x-pack/plugins/maps/common/descriptor_types/style_property_descriptor_types.d.ts rename to x-pack/plugins/maps/common/descriptor_types/style_property_descriptor_types.ts diff --git a/x-pack/plugins/maps/public/layers/fields/mvt_field.ts b/x-pack/plugins/maps/public/layers/fields/mvt_field.ts new file mode 100644 index 0000000000000..7ff982b14cbd9 --- /dev/null +++ b/x-pack/plugins/maps/public/layers/fields/mvt_field.ts @@ -0,0 +1,49 @@ +/* + * 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 { AbstractField, IField } from './field'; +import { IKibanaRegionSource } from '../sources/kibana_regionmap_source/kibana_regionmap_source'; +import { FIELD_ORIGIN } from '../../../common/constants'; +import { IVectorSource } from '../sources/vector_source'; +import { MVTFieldType } from '../../../common/descriptor_types'; + +export class MVTField extends AbstractField implements IField { + private readonly _source: IKibanaRegionSource; + private readonly _type: MVTFieldType; + constructor({ + fieldName, + type, + source, + origin, + }: { + fieldName: string; + source: IKibanaRegionSource; + origin: FIELD_ORIGIN; + type: MVTFieldType; + }) { + super({ fieldName, origin }); + this._source = source; + this._type = type; + } + + getSource(): IVectorSource { + return this._source; + } + + async getDataType(): Promise { + if (this._type === MVTFieldType.String) { + return 'string'; + } else if (this._type === MVTFieldType.Number) { + return 'number'; + } else { + throw new Error(`Unrecognized MVT field-type ${this._type}`); + } + } + + async getLabel(): Promise { + return this.getName(); + } +} diff --git a/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/layer_wizard.tsx b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/layer_wizard.tsx index dfdea1489d50c..45524bda5cf3f 100644 --- a/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/layer_wizard.tsx +++ b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/layer_wizard.tsx @@ -8,11 +8,11 @@ import { i18n } from '@kbn/i18n'; import React from 'react'; import { MVTSingleLayerVectorSourceEditor, - MVTSingleLayerVectorSourceConfig, } from './mvt_single_layer_vector_source_editor'; import { MVTSingleLayerVectorSource, sourceTitle } from './mvt_single_layer_vector_source'; import { LayerWizard, RenderWizardArguments } from '../../layer_wizard_registry'; import { SOURCE_TYPES } from '../../../../common/constants'; +import { MVTSingleLayerVectorSourceConfig } from './types'; export const mvtVectorSourceWizardConfig: LayerWizard = { description: i18n.translate('xpack.maps.source.mvtVectorSourceWizard', { diff --git a/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx new file mode 100644 index 0000000000000..9d6e6e9cb2a7a --- /dev/null +++ b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx @@ -0,0 +1,73 @@ +/* + * 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. + */ +/* eslint-disable @typescript-eslint/consistent-type-definitions */ + +import React, { Component, Fragment } from 'react'; +import { EuiButton, EuiButtonIcon, EuiTextAlign } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; +import { MVTFieldDescriptor, MVTFieldType } from '../../../../common/descriptor_types'; + +export interface Props { + fields: MVTFieldDescriptor[]; + onChange: (fields: MVTFieldDescriptor[]) => void; +} + +// eslint-disable-next-line @typescript-eslint/no-empty-interface +interface State {} + +export class MVTFieldConfigEditor extends Component { + state = {}; + + _removeField(index) { + const newFields = this.props.fields.slice(); + newFields.splice(index, 1); + + this.props.onChange(newFields); + } + + _addField = () => { + const newFields = this.props.fields.slice(); + newFields.push({ + type: MVTFieldType.String, + name: 'Foobar', + }); + }; + + _renderFieldConfig() { + return this.props.fields.map((mvtFieldConfig: MVTFieldDescriptor, index: number) => { + return ( +
+ {mvtFieldConfig.name} + {mvtFieldConfig.type} + { + this._removeField(index); + }} + title={i18n.translate('xpack.maps.mvtSource.trashButtonTitle', { + defaultMessage: 'Remove field', + })} + aria-label={i18n.translate('xpack.maps.mvtSource.trashButtonAriaLabel', { + defaultMessage: 'Remove field', + })} + /> +
+ ); + }); + } + + render() { + return ( + + {this._renderFieldConfig()} + + {'Add field'} + + + ); + } +} diff --git a/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx index 7a4b8d43811da..03284f71e6bcb 100644 --- a/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx +++ b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx @@ -11,13 +11,9 @@ import { EuiFieldText, EuiFormRow } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { MAX_ZOOM, MIN_ZOOM } from '../../../../common/constants'; import { ValidatedDualRange, Value } from '../../../../../../../src/plugins/kibana_react/public'; - -export type MVTSingleLayerVectorSourceConfig = { - urlTemplate: string; - layerName: string; - minSourceZoom: number; - maxSourceZoom: number; -}; +import { MVTSingleLayerVectorSourceConfig } from './types'; +import { MVTFieldConfigEditor } from './mvt_field_config_editor'; +import { MVTFieldDescriptor } from '../../../../common/descriptor_types'; export interface Props { onSourceConfigChange: (sourceConfig: MVTSingleLayerVectorSourceConfig) => void; @@ -28,6 +24,8 @@ interface State { layerName: string; minSourceZoom: number; maxSourceZoom: number; + fields?: MVTFieldDescriptor[]; + } export class MVTSingleLayerVectorSourceEditor extends Component { @@ -36,6 +34,7 @@ export class MVTSingleLayerVectorSourceEditor extends Component { layerName: '', minSourceZoom: MIN_ZOOM, maxSourceZoom: MAX_ZOOM, + fields: [], }; _sourceConfigChange = _.debounce(() => { @@ -45,11 +44,13 @@ export class MVTSingleLayerVectorSourceEditor extends Component { this.state.urlTemplate.indexOf('{z}') >= 0; if (canPreview && this.state.layerName) { + console.log('nf', fields); this.props.onSourceConfigChange({ urlTemplate: this.state.urlTemplate, layerName: this.state.layerName, minSourceZoom: this.state.minSourceZoom, maxSourceZoom: this.state.maxSourceZoom, + fields: this.state.fields, }); } }, 200); @@ -74,6 +75,17 @@ export class MVTSingleLayerVectorSourceEditor extends Component { ); }; + _handleFieldChange = (fields: MVTFieldDescriptor[]) => { + + this.setState( + { + fields, + }, + () => this._sourceConfigChange() + ); + + }; + _handleZoomRangeChange = (e: Value) => { const minSourceZoom = parseInt(e[0] as string, 10); const maxSourceZoom = parseInt(e[1] as string, 10); @@ -122,6 +134,8 @@ export class MVTSingleLayerVectorSourceEditor extends Component { } )} /> + + ); } diff --git a/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/types.ts b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/types.ts new file mode 100644 index 0000000000000..3c1de63b96ee5 --- /dev/null +++ b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/types.ts @@ -0,0 +1,15 @@ +/* + * 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 { MVTFieldDescriptor } from '../../../../common/descriptor_types'; + +export interface MVTSingleLayerVectorSourceConfig { + urlTemplate: string; + layerName: string; + minSourceZoom: number; + maxSourceZoom: number; + fields?: MVTFieldDescriptor[]; +} From 9a3d90d823ec220120d2076ffb8527af76ce68ca Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Thu, 23 Apr 2020 16:10:25 -0400 Subject: [PATCH 02/97] rename --- .../maps/common/descriptor_types/{sources.d.ts => sources.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename x-pack/plugins/maps/common/descriptor_types/{sources.d.ts => sources.ts} (100%) diff --git a/x-pack/plugins/maps/common/descriptor_types/sources.d.ts b/x-pack/plugins/maps/common/descriptor_types/sources.ts similarity index 100% rename from x-pack/plugins/maps/common/descriptor_types/sources.d.ts rename to x-pack/plugins/maps/common/descriptor_types/sources.ts From b67f20d7cad1130ad9c389a6b45bb2c4939d7bbe Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Thu, 23 Apr 2020 16:56:03 -0400 Subject: [PATCH 03/97] more boilerpalte --- .../layer_wizard.tsx | 6 +- .../mvt_field_config_editor.tsx | 98 +++++++++++++++---- .../mvt_single_layer_vector_source.ts | 19 +++- .../mvt_single_layer_vector_source_editor.tsx | 16 ++- 4 files changed, 108 insertions(+), 31 deletions(-) diff --git a/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/layer_wizard.tsx b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/layer_wizard.tsx index 45524bda5cf3f..37de854ed8478 100644 --- a/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/layer_wizard.tsx +++ b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/layer_wizard.tsx @@ -6,9 +6,7 @@ import { i18n } from '@kbn/i18n'; import React from 'react'; -import { - MVTSingleLayerVectorSourceEditor, -} from './mvt_single_layer_vector_source_editor'; +import { MVTSingleLayerVectorSourceEditor } from './mvt_single_layer_vector_source_editor'; import { MVTSingleLayerVectorSource, sourceTitle } from './mvt_single_layer_vector_source'; import { LayerWizard, RenderWizardArguments } from '../../layer_wizard_registry'; import { SOURCE_TYPES } from '../../../../common/constants'; @@ -25,6 +23,7 @@ export const mvtVectorSourceWizardConfig: LayerWizard = { layerName, minSourceZoom, maxSourceZoom, + fields, }: MVTSingleLayerVectorSourceConfig) => { const sourceDescriptor = MVTSingleLayerVectorSource.createDescriptor({ urlTemplate, @@ -32,6 +31,7 @@ export const mvtVectorSourceWizardConfig: LayerWizard = { minSourceZoom, maxSourceZoom, type: SOURCE_TYPES.MVT_SINGLE_LAYER, + fields, }); const source = new MVTSingleLayerVectorSource(sourceDescriptor, inspectorAdapters); onPreviewSource(source); diff --git a/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx index 9d6e6e9cb2a7a..e73d14ef63939 100644 --- a/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx +++ b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx @@ -5,10 +5,39 @@ */ /* eslint-disable @typescript-eslint/consistent-type-definitions */ -import React, { Component, Fragment } from 'react'; -import { EuiButton, EuiButtonIcon, EuiTextAlign } from '@elastic/eui'; +import React, { ChangeEvent, Component, Fragment } from 'react'; +import { + EuiButton, + EuiButtonIcon, + EuiFlexGroup, + EuiFlexItem, + EuiSuperSelect, + EuiFieldText, +} from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { MVTFieldDescriptor, MVTFieldType } from '../../../../common/descriptor_types'; +import { FieldIcon } from '../../../../../../../src/plugins/kibana_react/public'; + +const FIELD_TYPE_OPTIONS = [ + { + value: MVTFieldType.String, + inputDisplay: ( + + + String + + ), + }, + { + value: MVTFieldType.Number, + inputDisplay: ( + + + Number + + ), + }, +]; export interface Props { fields: MVTFieldDescriptor[]; @@ -34,28 +63,59 @@ export class MVTFieldConfigEditor extends Component { type: MVTFieldType.String, name: 'Foobar', }); + this.props.onChange(newFields); }; + _renderFieldTypeDropDown(mvtFieldConfig: MVTFieldDescriptor, index: number) { + const onChange = (type: MVTFieldType) => { + const newFields = this.props.fields.slice(); + newFields[index].type = type; + this.props.onChange(newFields); + }; + + return ( + onChange(value)} + /> + ); + } + + _renderFieldNameInput(mvtFieldConfig: MVTFieldDescriptor, index: number) { + const onChange = (e: ChangeEvent) => { + const name = e.target.value; + const newFields = this.props.fields.slice(); + newFields[index].name = name; + this.props.onChange(newFields); + }; + return ( + + ); + } + _renderFieldConfig() { return this.props.fields.map((mvtFieldConfig: MVTFieldDescriptor, index: number) => { return ( -
- {mvtFieldConfig.name} - {mvtFieldConfig.type} - { - this._removeField(index); - }} - title={i18n.translate('xpack.maps.mvtSource.trashButtonTitle', { - defaultMessage: 'Remove field', - })} - aria-label={i18n.translate('xpack.maps.mvtSource.trashButtonAriaLabel', { - defaultMessage: 'Remove field', - })} - /> -
+ + {this._renderFieldNameInput(mvtFieldConfig, index)} + {this._renderFieldTypeDropDown(mvtFieldConfig, index)} + + { + this._removeField(index); + }} + title={i18n.translate('xpack.maps.mvtSource.trashButtonTitle', { + defaultMessage: 'Remove field', + })} + aria-label={i18n.translate('xpack.maps.mvtSource.trashButtonAriaLabel', { + defaultMessage: 'Remove field', + })} + /> + + ); }); } diff --git a/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.ts b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.ts index a73cfbdc0d043..f2933d342bace 100644 --- a/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.ts +++ b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.ts @@ -37,6 +37,7 @@ export class MVTSingleLayerVectorSource extends AbstractSource layerName, minSourceZoom, maxSourceZoom, + fields, }: TiledSingleLayerVectorSourceDescriptor) { return { type: SOURCE_TYPES.MVT_SINGLE_LAYER, @@ -45,6 +46,7 @@ export class MVTSingleLayerVectorSource extends AbstractSource layerName, minSourceZoom: Math.max(MIN_ZOOM, minSourceZoom), maxSourceZoom: Math.min(MAX_ZOOM, maxSourceZoom), + fields: fields ?? [], }; } @@ -54,6 +56,7 @@ export class MVTSingleLayerVectorSource extends AbstractSource sourceDescriptor: TiledSingleLayerVectorSourceDescriptor, inspectorAdapters?: object ) { + console.log('crearte source', sourceDescriptor); super(sourceDescriptor, inspectorAdapters); this._descriptor = sourceDescriptor; } @@ -63,6 +66,12 @@ export class MVTSingleLayerVectorSource extends AbstractSource } getFieldNames(): string[] { + console.log('need to implement this...'); + return []; + } + + async getFields(): Promise { + console.log('also need to implement this'); return []; } @@ -92,10 +101,6 @@ export class MVTSingleLayerVectorSource extends AbstractSource throw new Error('Does not implement getGeoJsonWithMeta'); } - async getFields(): Promise { - return []; - } - async getImmutableProperties(): Promise { return [ { label: getDataSourceLabel(), value: sourceTitle }, @@ -118,6 +123,12 @@ export class MVTSingleLayerVectorSource extends AbstractSource }), value: this._descriptor.maxSourceZoom.toString(), }, + { + label: i18n.translate('xpack.maps.source.MVTSingleLayerVectorSource.fields', { + defaultMessage: 'Fields', + }), + value: (this._descriptor.fields ?? []).join(', '), + }, ]; } diff --git a/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx index 03284f71e6bcb..4891c4f8350d8 100644 --- a/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx +++ b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx @@ -25,7 +25,6 @@ interface State { minSourceZoom: number; maxSourceZoom: number; fields?: MVTFieldDescriptor[]; - } export class MVTSingleLayerVectorSourceEditor extends Component { @@ -44,7 +43,7 @@ export class MVTSingleLayerVectorSourceEditor extends Component { this.state.urlTemplate.indexOf('{z}') >= 0; if (canPreview && this.state.layerName) { - console.log('nf', fields); + console.log('nf', this.state.fields); this.props.onSourceConfigChange({ urlTemplate: this.state.urlTemplate, layerName: this.state.layerName, @@ -76,14 +75,12 @@ export class MVTSingleLayerVectorSourceEditor extends Component { }; _handleFieldChange = (fields: MVTFieldDescriptor[]) => { - this.setState( { fields, }, () => this._sourceConfigChange() ); - }; _handleZoomRangeChange = (e: Value) => { @@ -115,6 +112,16 @@ export class MVTSingleLayerVectorSourceEditor extends Component { > + + + { )} /> - ); } From 1bbe0d9073d1ac9368280f3a58e2a7f1c863c664 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Thu, 23 Apr 2020 17:36:32 -0400 Subject: [PATCH 04/97] more boiler --- .../maps/common/descriptor_types/sources.ts | 2 +- .../mvt_single_layer_vector_source.ts | 45 ++++++++++++++----- .../sources/vector_source/vector_source.d.ts | 2 + .../components/color/dynamic_color_form.js | 1 + .../layers/styles/vector/vector_style.js | 3 ++ 5 files changed, 40 insertions(+), 13 deletions(-) diff --git a/x-pack/plugins/maps/common/descriptor_types/sources.ts b/x-pack/plugins/maps/common/descriptor_types/sources.ts index 8d566f1dc4aa1..7d12b609357ab 100644 --- a/x-pack/plugins/maps/common/descriptor_types/sources.ts +++ b/x-pack/plugins/maps/common/descriptor_types/sources.ts @@ -115,7 +115,7 @@ export type TiledSingleLayerVectorSourceDescriptor = AbstractSourceDescriptor & minSourceZoom: number; maxSourceZoom: number; - fields?: MVTFieldDescriptor[]; + fields: MVTFieldDescriptor[]; }; export type JoinDescriptor = { diff --git a/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.ts b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.ts index f2933d342bace..79dea69fd1f70 100644 --- a/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.ts +++ b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.ts @@ -9,19 +9,21 @@ import uuid from 'uuid/v4'; import { AbstractSource, ImmutableSourceProperty } from '../source'; import { TiledVectorLayer } from '../../tiled_vector_layer'; import { GeoJsonWithMeta, ITiledSingleLayerVectorSource } from '../vector_source'; -import { MAX_ZOOM, MIN_ZOOM, SOURCE_TYPES } from '../../../../common/constants'; +import { FIELD_ORIGIN, MAX_ZOOM, MIN_ZOOM, SOURCE_TYPES } from '../../../../common/constants'; import { VECTOR_SHAPE_TYPES } from '../vector_feature_types'; import { IField } from '../../fields/field'; import { registerSource } from '../source_registry'; import { getDataSourceLabel, getUrlLabel } from '../../../../common/i18n_getters'; import { MapExtent, + MVTFieldDescriptor, TiledSingleLayerVectorSourceDescriptor, VectorLayerDescriptor, VectorSourceRequestMeta, VectorSourceSyncMeta, } from '../../../../common/descriptor_types'; import { VectorLayerArguments } from '../../vector_layer'; +import { MVTField } from '../../fields/mvt_field'; export const sourceTitle = i18n.translate( 'xpack.maps.source.MVTSingleLayerVectorSource.sourceTitle', @@ -46,7 +48,7 @@ export class MVTSingleLayerVectorSource extends AbstractSource layerName, minSourceZoom: Math.max(MIN_ZOOM, minSourceZoom), maxSourceZoom: Math.min(MAX_ZOOM, maxSourceZoom), - fields: fields ?? [], + fields: fields ? fields : [], }; } @@ -56,7 +58,6 @@ export class MVTSingleLayerVectorSource extends AbstractSource sourceDescriptor: TiledSingleLayerVectorSourceDescriptor, inspectorAdapters?: object ) { - console.log('crearte source', sourceDescriptor); super(sourceDescriptor, inspectorAdapters); this._descriptor = sourceDescriptor; } @@ -66,13 +67,37 @@ export class MVTSingleLayerVectorSource extends AbstractSource } getFieldNames(): string[] { - console.log('need to implement this...'); - return []; + console.log('getfn'); + return this._descriptor.fields.map((field: MVTFieldDescriptor) => { + return field.name; + }); + } + + getFieldByName(fieldName: string): IField | null { + return this.createField({ fieldName }); + } + + createField({ fieldName }: { fieldName: string }): IField { + const field = this._descriptor.fields.find((f: MVTFieldDescriptor) => { + return f.name === fieldName; + }); + return new MVTField({ + fieldName: field.name, + type: field.type, + source: this, + origin: FIELD_ORIGIN.SOURCE, + }); } async getFields(): Promise { - console.log('also need to implement this'); - return []; + return this._descriptor.fields.map((field: MVTFieldDescriptor) => { + return new MVTField({ + fieldName: field.name, + type: field.type, + source: this, + origin: FIELD_ORIGIN.SOURCE, + }); + }); } createDefaultLayer(options?: Partial): TiledVectorLayer { @@ -127,7 +152,7 @@ export class MVTSingleLayerVectorSource extends AbstractSource label: i18n.translate('xpack.maps.source.MVTSingleLayerVectorSource.fields', { defaultMessage: 'Fields', }), - value: (this._descriptor.fields ?? []).join(', '), + value: this._descriptor.fields.map(({ name, type }) => `${name}(${type})`).join(', '), }, ]; } @@ -170,10 +195,6 @@ export class MVTSingleLayerVectorSource extends AbstractSource }; } - getFieldByName(fieldName: string): IField | null { - return null; - } - getSyncMeta(): VectorSourceSyncMeta { return null; } diff --git a/x-pack/plugins/maps/public/layers/sources/vector_source/vector_source.d.ts b/x-pack/plugins/maps/public/layers/sources/vector_source/vector_source.d.ts index 804915dd73052..b0af705dd6130 100644 --- a/x-pack/plugins/maps/public/layers/sources/vector_source/vector_source.d.ts +++ b/x-pack/plugins/maps/public/layers/sources/vector_source/vector_source.d.ts @@ -36,6 +36,7 @@ export interface IVectorSource extends ISource { getSyncMeta(): VectorSourceSyncMeta; getFieldNames(): string[]; getApplyGlobalQuery(): boolean; + createField({ fieldName }: { fieldName: string }): IField; } export class AbstractVectorSource extends AbstractSource implements IVectorSource { @@ -53,6 +54,7 @@ export class AbstractVectorSource extends AbstractSource implements IVectorSourc canFormatFeatureProperties(): boolean; getApplyGlobalQuery(): boolean; getFieldNames(): string[]; + createField({ fieldName }: { fieldName: string }): IField; } export interface ITiledSingleLayerVectorSource extends IVectorSource { diff --git a/x-pack/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js b/x-pack/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js index 460e7379920c4..cecb9b96d6c72 100644 --- a/x-pack/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js +++ b/x-pack/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js @@ -126,6 +126,7 @@ export function DynamicColorForm({ } }; + console.log('render color select'); return ( diff --git a/x-pack/plugins/maps/public/layers/styles/vector/vector_style.js b/x-pack/plugins/maps/public/layers/styles/vector/vector_style.js index 5a4edd9c93a05..625860cf31698 100644 --- a/x-pack/plugins/maps/public/layers/styles/vector/vector_style.js +++ b/x-pack/plugins/maps/public/layers/styles/vector/vector_style.js @@ -146,6 +146,7 @@ export class VectorStyle extends AbstractStyle { renderEditor({ layer, onStyleDescriptorChange }) { const rawProperties = this.getRawProperties(); const handlePropertyChange = (propertyName, settings) => { + console.log('handle property change', propertyName, settings); rawProperties[propertyName] = settings; //override single property, but preserve the rest const vectorStyleDescriptor = VectorStyle.createDescriptor(rawProperties, this.isTimeAware()); onStyleDescriptorChange(vectorStyleDescriptor); @@ -579,6 +580,7 @@ export class VectorStyle extends AbstractStyle { } _makeField(fieldDescriptor) { + console.log('mkaefield', fieldDescriptor); if (!fieldDescriptor || !fieldDescriptor.name) { return null; } @@ -624,6 +626,7 @@ export class VectorStyle extends AbstractStyle { return new StaticColorProperty(descriptor.options, styleName); } else if (descriptor.type === DynamicStyleProperty.type) { const field = this._makeField(descriptor.options.field); + console.log('mnae tcolor po', field); return new DynamicColorProperty( descriptor.options, styleName, From fcfdd6c31aeae3e53a30fc503e7835d926297066 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Thu, 23 Apr 2020 18:29:45 -0400 Subject: [PATCH 05/97] more boilerpalte --- .../maps/public/layers/fields/es_agg_field.ts | 4 ++++ x-pack/plugins/maps/public/layers/fields/field.ts | 9 +++++++++ .../plugins/maps/public/layers/fields/mvt_field.ts | 4 ++++ .../layers/sources/vector_source/vector_source.d.ts | 2 ++ .../layers/sources/vector_source/vector_source.js | 4 ++++ .../vector/components/color/color_map_select.js | 12 ++++++++---- .../vector/components/color/dynamic_color_form.js | 8 ++++++-- .../styles/vector/components/style_prop_editor.js | 1 + .../styles/vector/components/vector_style_editor.js | 5 ++++- 9 files changed, 42 insertions(+), 7 deletions(-) diff --git a/x-pack/plugins/maps/public/layers/fields/es_agg_field.ts b/x-pack/plugins/maps/public/layers/fields/es_agg_field.ts index 34f7dd4b9578f..3447d640cb910 100644 --- a/x-pack/plugins/maps/public/layers/fields/es_agg_field.ts +++ b/x-pack/plugins/maps/public/layers/fields/es_agg_field.ts @@ -116,6 +116,10 @@ export class ESAggField implements IESAggField { return !isMetricCountable(this.getAggType()); } + supportsAutoDomain(): boolean { + return true; + } + canValueBeFormatted(): boolean { // Do not use field formatters for counting metrics return ![AGG_TYPE.COUNT, AGG_TYPE.UNIQUE_COUNT].includes(this.getAggType()); diff --git a/x-pack/plugins/maps/public/layers/fields/field.ts b/x-pack/plugins/maps/public/layers/fields/field.ts index b431be4aa6cb8..72b6d2a81e09f 100644 --- a/x-pack/plugins/maps/public/layers/fields/field.ts +++ b/x-pack/plugins/maps/public/layers/fields/field.ts @@ -20,6 +20,8 @@ export interface IField { isValid(): boolean; getOrdinalFieldMetaRequest(): Promise; getCategoricalFieldMetaRequest(): Promise; + supportsFieldMeta(): boolean; + supportsAutoDomain(): boolean; } export class AbstractField implements IField { @@ -72,6 +74,13 @@ export class AbstractField implements IField { return false; } + supportsAutoDomain(): boolean { + // Determines whether MAps can determine the domain of the field-values + // if this is not the case (e.g. for non-geojson data), than styling properties that require the domain to be known + // cannot use this property. + return true; + } + async getOrdinalFieldMetaRequest(): Promise { return null; } diff --git a/x-pack/plugins/maps/public/layers/fields/mvt_field.ts b/x-pack/plugins/maps/public/layers/fields/mvt_field.ts index 7ff982b14cbd9..f61e15aee544d 100644 --- a/x-pack/plugins/maps/public/layers/fields/mvt_field.ts +++ b/x-pack/plugins/maps/public/layers/fields/mvt_field.ts @@ -46,4 +46,8 @@ export class MVTField extends AbstractField implements IField { async getLabel(): Promise { return this.getName(); } + + supportsAutoDomain() { + return false; + } } diff --git a/x-pack/plugins/maps/public/layers/sources/vector_source/vector_source.d.ts b/x-pack/plugins/maps/public/layers/sources/vector_source/vector_source.d.ts index b0af705dd6130..ab2f11433e99f 100644 --- a/x-pack/plugins/maps/public/layers/sources/vector_source/vector_source.d.ts +++ b/x-pack/plugins/maps/public/layers/sources/vector_source/vector_source.d.ts @@ -37,6 +37,7 @@ export interface IVectorSource extends ISource { getFieldNames(): string[]; getApplyGlobalQuery(): boolean; createField({ fieldName }: { fieldName: string }): IField; + supportsFieldMeta(): boolean; } export class AbstractVectorSource extends AbstractSource implements IVectorSource { @@ -55,6 +56,7 @@ export class AbstractVectorSource extends AbstractSource implements IVectorSourc getApplyGlobalQuery(): boolean; getFieldNames(): string[]; createField({ fieldName }: { fieldName: string }): IField; + supportsFieldMeta(): boolean; } export interface ITiledSingleLayerVectorSource extends IVectorSource { diff --git a/x-pack/plugins/maps/public/layers/sources/vector_source/vector_source.js b/x-pack/plugins/maps/public/layers/sources/vector_source/vector_source.js index 509584cbc415a..1d3302c93c7c8 100644 --- a/x-pack/plugins/maps/public/layers/sources/vector_source/vector_source.js +++ b/x-pack/plugins/maps/public/layers/sources/vector_source/vector_source.js @@ -159,4 +159,8 @@ export class AbstractVectorSource extends AbstractSource { getSyncMeta() { return {}; } + + supportsFieldMeta() { + return true; + } } diff --git a/x-pack/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js b/x-pack/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js index eadaf42ca694d..43ad0c5ab7fcc 100644 --- a/x-pack/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js +++ b/x-pack/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js @@ -89,7 +89,8 @@ export class ColorMapSelect extends Component { }; _renderColorStopsInput() { - if (!this.props.useCustomColorMap) { + console.log('render color stops inpiut') + if (this.props.supportsAutoDomain) { return null; } @@ -102,7 +103,8 @@ export class ColorMapSelect extends Component { swatches={this.props.swatches} /> ); - } else + } else { + console.log('render colors', this.state.customColorMap); colorStopEditor = ( ); + } return ( @@ -127,11 +130,11 @@ export class ColorMapSelect extends Component { inputDisplay: this.props.customOptionLabel, 'data-test-subj': `colorMapSelectOption_${CUSTOM_COLOR_MAP}`, }, - ...this.props.colorMapOptions, + ...(this.props.supportsAutoDomain ? this.props.colorMapOptions : []), ]; let valueOfSelected; - if (this.props.useCustomColorMap) { + if (this.props.useCustomColorMap || !this.props.supportsAutoDomain) { valueOfSelected = CUSTOM_COLOR_MAP; } else { valueOfSelected = this.props.colorMapOptions.find(option => option.value === this.props.color) @@ -148,6 +151,7 @@ export class ColorMapSelect extends Component { {toggle} { + return field.supportsAutoDomain; + }); } _handleSelectedFeatureChange = selectedFeature => { From d9ad56a7302b3ef06f3b61a183cabbd6826bae5c Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Sun, 26 Apr 2020 16:05:40 -0400 Subject: [PATCH 06/97] typing --- x-pack/plugins/maps/public/layers/fields/mvt_field.ts | 7 +++---- .../public/layers/fields/top_term_percentage_field.ts | 4 ++++ .../mvt_single_layer_vector_source/layer_wizard.tsx | 2 +- .../mvt_field_config_editor.tsx | 2 +- .../mvt_single_layer_vector_source.ts | 8 +++++++- .../mvt_single_layer_vector_source_editor.tsx | 2 -- .../vector/components/color/color_map_select.js | 2 -- .../vector/components/color/dynamic_color_form.js | 11 ++++++----- .../vector/components/symbol/icon_map_select.js | 1 + .../maps/public/layers/styles/vector/vector_style.js | 3 --- 10 files changed, 23 insertions(+), 19 deletions(-) diff --git a/x-pack/plugins/maps/public/layers/fields/mvt_field.ts b/x-pack/plugins/maps/public/layers/fields/mvt_field.ts index f61e15aee544d..9dd6a15385fbe 100644 --- a/x-pack/plugins/maps/public/layers/fields/mvt_field.ts +++ b/x-pack/plugins/maps/public/layers/fields/mvt_field.ts @@ -5,13 +5,12 @@ */ import { AbstractField, IField } from './field'; -import { IKibanaRegionSource } from '../sources/kibana_regionmap_source/kibana_regionmap_source'; import { FIELD_ORIGIN } from '../../../common/constants'; -import { IVectorSource } from '../sources/vector_source'; +import { ITiledSingleLayerVectorSource, IVectorSource } from '../sources/vector_source'; import { MVTFieldType } from '../../../common/descriptor_types'; export class MVTField extends AbstractField implements IField { - private readonly _source: IKibanaRegionSource; + private readonly _source: ITiledSingleLayerVectorSource; private readonly _type: MVTFieldType; constructor({ fieldName, @@ -20,7 +19,7 @@ export class MVTField extends AbstractField implements IField { origin, }: { fieldName: string; - source: IKibanaRegionSource; + source: ITiledSingleLayerVectorSource; origin: FIELD_ORIGIN; type: MVTFieldType; }) { diff --git a/x-pack/plugins/maps/public/layers/fields/top_term_percentage_field.ts b/x-pack/plugins/maps/public/layers/fields/top_term_percentage_field.ts index 84bade4d94490..9345dd308edfe 100644 --- a/x-pack/plugins/maps/public/layers/fields/top_term_percentage_field.ts +++ b/x-pack/plugins/maps/public/layers/fields/top_term_percentage_field.ts @@ -60,6 +60,10 @@ export class TopTermPercentageField implements IESAggField { return 0; } + supportsAutoDomain(): boolean { + return true; + } + supportsFieldMeta(): boolean { return false; } diff --git a/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/layer_wizard.tsx b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/layer_wizard.tsx index 37de854ed8478..8e4f12ab66502 100644 --- a/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/layer_wizard.tsx +++ b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/layer_wizard.tsx @@ -31,7 +31,7 @@ export const mvtVectorSourceWizardConfig: LayerWizard = { minSourceZoom, maxSourceZoom, type: SOURCE_TYPES.MVT_SINGLE_LAYER, - fields, + fields: fields ? fields : [], }); const source = new MVTSingleLayerVectorSource(sourceDescriptor, inspectorAdapters); onPreviewSource(source); diff --git a/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx index e73d14ef63939..ab7f79b426ff7 100644 --- a/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx +++ b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx @@ -50,7 +50,7 @@ interface State {} export class MVTFieldConfigEditor extends Component { state = {}; - _removeField(index) { + _removeField(index: number) { const newFields = this.props.fields.slice(); newFields.splice(index, 1); diff --git a/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.ts b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.ts index 79dea69fd1f70..3f432aafaf0ed 100644 --- a/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.ts +++ b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.ts @@ -67,7 +67,6 @@ export class MVTSingleLayerVectorSource extends AbstractSource } getFieldNames(): string[] { - console.log('getfn'); return this._descriptor.fields.map((field: MVTFieldDescriptor) => { return field.name; }); @@ -81,6 +80,9 @@ export class MVTSingleLayerVectorSource extends AbstractSource const field = this._descriptor.fields.find((f: MVTFieldDescriptor) => { return f.name === fieldName; }); + if (!field) { + throw new Error(`Cannot create field for fieldName ${fieldName}`); + } return new MVTField({ fieldName: field.name, type: field.type, @@ -202,6 +204,10 @@ export class MVTSingleLayerVectorSource extends AbstractSource getApplyGlobalQuery(): boolean { return false; } + + supportsFieldMeta(): boolean { + return false; + } } registerSource({ diff --git a/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx index 4891c4f8350d8..d20f0ba388eaf 100644 --- a/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx +++ b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx @@ -43,7 +43,6 @@ export class MVTSingleLayerVectorSourceEditor extends Component { this.state.urlTemplate.indexOf('{z}') >= 0; if (canPreview && this.state.layerName) { - console.log('nf', this.state.fields); this.props.onSourceConfigChange({ urlTemplate: this.state.urlTemplate, layerName: this.state.layerName, @@ -141,7 +140,6 @@ export class MVTSingleLayerVectorSourceEditor extends Component { } )} /> - ); } diff --git a/x-pack/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js b/x-pack/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js index 43ad0c5ab7fcc..bcae1c4835394 100644 --- a/x-pack/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js +++ b/x-pack/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js @@ -89,7 +89,6 @@ export class ColorMapSelect extends Component { }; _renderColorStopsInput() { - console.log('render color stops inpiut') if (this.props.supportsAutoDomain) { return null; } @@ -104,7 +103,6 @@ export class ColorMapSelect extends Component { /> ); } else { - console.log('render colors', this.state.customColorMap); colorStopEditor = ( diff --git a/x-pack/plugins/maps/public/layers/styles/vector/components/symbol/icon_map_select.js b/x-pack/plugins/maps/public/layers/styles/vector/components/symbol/icon_map_select.js index 08f5dfe4f4ba0..bcf694d6aece8 100644 --- a/x-pack/plugins/maps/public/layers/styles/vector/components/symbol/icon_map_select.js +++ b/x-pack/plugins/maps/public/layers/styles/vector/components/symbol/icon_map_select.js @@ -41,6 +41,7 @@ export function IconMapSelect({ ); } + console.log('render stylemap select'); return ( { - console.log('handle property change', propertyName, settings); rawProperties[propertyName] = settings; //override single property, but preserve the rest const vectorStyleDescriptor = VectorStyle.createDescriptor(rawProperties, this.isTimeAware()); onStyleDescriptorChange(vectorStyleDescriptor); @@ -580,7 +579,6 @@ export class VectorStyle extends AbstractStyle { } _makeField(fieldDescriptor) { - console.log('mkaefield', fieldDescriptor); if (!fieldDescriptor || !fieldDescriptor.name) { return null; } @@ -626,7 +624,6 @@ export class VectorStyle extends AbstractStyle { return new StaticColorProperty(descriptor.options, styleName); } else if (descriptor.type === DynamicStyleProperty.type) { const field = this._makeField(descriptor.options.field); - console.log('mnae tcolor po', field); return new DynamicColorProperty( descriptor.options, styleName, From f99e4af7f5b014b5f72360d1183d5a11e354561b Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Sun, 26 Apr 2020 16:06:51 -0400 Subject: [PATCH 07/97] fix import --- x-pack/plugins/maps/public/layers/tiled_vector_layer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/maps/public/layers/tiled_vector_layer.tsx b/x-pack/plugins/maps/public/layers/tiled_vector_layer.tsx index 06c5ef579b221..e298313d4d86b 100644 --- a/x-pack/plugins/maps/public/layers/tiled_vector_layer.tsx +++ b/x-pack/plugins/maps/public/layers/tiled_vector_layer.tsx @@ -14,7 +14,7 @@ import { ITiledSingleLayerVectorSource } from './sources/vector_source'; import { SyncContext } from '../actions/map_actions'; import { ISource } from './sources/source'; import { VectorLayerDescriptor, VectorSourceRequestMeta } from '../../common/descriptor_types'; -import { MVTSingleLayerVectorSourceConfig } from './sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor'; +import { MVTSingleLayerVectorSourceConfig } from './sources/mvt_single_layer_vector_source/types'; export class TiledVectorLayer extends VectorLayer { static type = LAYER_TYPE.TILED_VECTOR; From 05e3c89733a745331544d26baf7bd914454a0fd9 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Sun, 26 Apr 2020 17:22:08 -0400 Subject: [PATCH 08/97] boilerplate --- .../maps/common/descriptor_types/sources.ts | 1 + .../features_tooltip/feature_properties.js | 2 + .../map/mb/tooltip_control/tooltip_control.js | 13 ++- .../layer_wizard.tsx | 3 +- ....ts => mvt_single_layer_vector_source.tsx} | 18 +++- .../mvt_single_layer_vector_source/types.ts | 1 + .../update_source_editor.tsx | 82 +++++++++++++++++++ 7 files changed, 111 insertions(+), 9 deletions(-) rename x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/{mvt_single_layer_vector_source.ts => mvt_single_layer_vector_source.tsx} (89%) create mode 100644 x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/update_source_editor.tsx diff --git a/x-pack/plugins/maps/common/descriptor_types/sources.ts b/x-pack/plugins/maps/common/descriptor_types/sources.ts index 7d12b609357ab..c9c0bdaa18e0d 100644 --- a/x-pack/plugins/maps/common/descriptor_types/sources.ts +++ b/x-pack/plugins/maps/common/descriptor_types/sources.ts @@ -116,6 +116,7 @@ export type TiledSingleLayerVectorSourceDescriptor = AbstractSourceDescriptor & maxSourceZoom: number; fields: MVTFieldDescriptor[]; + tooltipProperties: string[]; }; export type JoinDescriptor = { diff --git a/x-pack/plugins/maps/public/connected_components/map/features_tooltip/feature_properties.js b/x-pack/plugins/maps/public/connected_components/map/features_tooltip/feature_properties.js index 825c1ad7e7da3..5d13b1d9483d6 100644 --- a/x-pack/plugins/maps/public/connected_components/map/features_tooltip/feature_properties.js +++ b/x-pack/plugins/maps/public/connected_components/map/features_tooltip/feature_properties.js @@ -32,6 +32,7 @@ export class FeatureProperties extends React.Component { } _loadProperties = () => { + console.log('load properties') this._fetchProperties({ nextFeatureId: this.props.featureId, nextLayerId: this.props.layerId, @@ -39,6 +40,7 @@ export class FeatureProperties extends React.Component { }; _fetchProperties = async ({ nextLayerId, nextFeatureId }) => { + console.log('fetch proeprties', nextLayerId, nextFeatureId); if (this.prevLayerId === nextLayerId && this.prevFeatureId === nextFeatureId) { // do not reload same feature properties return; diff --git a/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_control.js b/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_control.js index 329d2b7fd2985..44f8bae5c44c3 100644 --- a/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_control.js +++ b/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_control.js @@ -53,7 +53,7 @@ export class TooltipControl extends React.Component { }); } - _getIdsForFeatures(mbFeatures) { + _getIdsAndFeaturesMeta(mbFeatures) { const uniqueFeatures = []; //there may be duplicates in the results from mapbox //this is because mapbox returns the results per tile @@ -72,9 +72,13 @@ export class TooltipControl extends React.Component { } } if (!match) { + //This keeps track of first properties (assuming these will be identical for features in different tiles uniqueFeatures.push({ id: featureId, layerId: layerId, + meta: { + mbProperties: mbFeature.properties, + }, }); } } @@ -98,7 +102,7 @@ export class TooltipControl extends React.Component { const targetMbFeataure = mbFeatures[0]; const popupAnchorLocation = justifyAnchorLocation(e.lngLat, targetMbFeataure); - const features = this._getIdsForFeatures(mbFeatures); + const features = this._getIdsAndFeaturesMeta(mbFeatures); this.props.openOnClickTooltip({ features: features, location: popupAnchorLocation, @@ -127,9 +131,10 @@ export class TooltipControl extends React.Component { } const popupAnchorLocation = justifyAnchorLocation(e.lngLat, targetMbFeature); - const features = this._getIdsForFeatures(mbFeatures); + const featuresAndMeta = this._getIdsAndFeaturesMeta(mbFeatures); this.props.openOnHoverTooltip({ - features: features, + mbFeatures, + features: featuresAndMeta, location: popupAnchorLocation, }); }, 100); diff --git a/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/layer_wizard.tsx b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/layer_wizard.tsx index 8e4f12ab66502..46264b08613bf 100644 --- a/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/layer_wizard.tsx +++ b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/layer_wizard.tsx @@ -24,14 +24,15 @@ export const mvtVectorSourceWizardConfig: LayerWizard = { minSourceZoom, maxSourceZoom, fields, + tooltipProperties, }: MVTSingleLayerVectorSourceConfig) => { const sourceDescriptor = MVTSingleLayerVectorSource.createDescriptor({ urlTemplate, layerName, minSourceZoom, maxSourceZoom, - type: SOURCE_TYPES.MVT_SINGLE_LAYER, fields: fields ? fields : [], + tooltipProperties: tooltipProperties ? tooltipProperties : [], }); const source = new MVTSingleLayerVectorSource(sourceDescriptor, inspectorAdapters); onPreviewSource(source); diff --git a/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.ts b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx similarity index 89% rename from x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.ts rename to x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx index 3f432aafaf0ed..cc124ca35de9c 100644 --- a/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.ts +++ b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx @@ -6,6 +6,7 @@ import { i18n } from '@kbn/i18n'; import uuid from 'uuid/v4'; +import React from 'react'; import { AbstractSource, ImmutableSourceProperty } from '../source'; import { TiledVectorLayer } from '../../tiled_vector_layer'; import { GeoJsonWithMeta, ITiledSingleLayerVectorSource } from '../vector_source'; @@ -24,6 +25,7 @@ import { } from '../../../../common/descriptor_types'; import { VectorLayerArguments } from '../../vector_layer'; import { MVTField } from '../../fields/mvt_field'; +import { UpdateSourceEditor } from './update_source_editor'; export const sourceTitle = i18n.translate( 'xpack.maps.source.MVTSingleLayerVectorSource.sourceTitle', @@ -40,6 +42,7 @@ export class MVTSingleLayerVectorSource extends AbstractSource minSourceZoom, maxSourceZoom, fields, + tooltipProperties, }: TiledSingleLayerVectorSourceDescriptor) { return { type: SOURCE_TYPES.MVT_SINGLE_LAYER, @@ -48,22 +51,29 @@ export class MVTSingleLayerVectorSource extends AbstractSource layerName, minSourceZoom: Math.max(MIN_ZOOM, minSourceZoom), maxSourceZoom: Math.min(MAX_ZOOM, maxSourceZoom), - fields: fields ? fields : [], + fields: fields ? fields : [], // todo remove. temp for debuggin older saved objects + tooltipProperties: tooltipProperties ? tooltipProperties : [], // todo remove normalization. temp for debuggin older saved objects }; } readonly _descriptor: TiledSingleLayerVectorSourceDescriptor; + readonly _tooltipFields: MVTField[]; constructor( sourceDescriptor: TiledSingleLayerVectorSourceDescriptor, inspectorAdapters?: object ) { super(sourceDescriptor, inspectorAdapters); - this._descriptor = sourceDescriptor; + this._descriptor = MVTSingleLayerVectorSource.createDescriptor(sourceDescriptor); + this._tooltipFields = this._descriptor.tooltipProperties.map(fieldName => { + return this.createField({ fieldName }); + }); } - renderSourceSettingsEditor() { - return null; + renderSourceSettingsEditor({ onChange }) { + return ( + + ); } getFieldNames(): string[] { diff --git a/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/types.ts b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/types.ts index 3c1de63b96ee5..599eaea73c9a0 100644 --- a/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/types.ts +++ b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/types.ts @@ -12,4 +12,5 @@ export interface MVTSingleLayerVectorSourceConfig { minSourceZoom: number; maxSourceZoom: number; fields?: MVTFieldDescriptor[]; + tooltipProperties?: string[]; } diff --git a/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/update_source_editor.tsx b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/update_source_editor.tsx new file mode 100644 index 0000000000000..c83fd7eb79f33 --- /dev/null +++ b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/update_source_editor.tsx @@ -0,0 +1,82 @@ +/* + * 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, { Component, Fragment } from 'react'; +import { EuiTitle, EuiPanel, EuiSpacer } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n/react'; + +// @ts-ignore +import { TooltipSelector } from '../../../components/tooltip_selector'; +import { MVTField } from '../../fields/mvt_field'; +import { MVTSingleLayerVectorSource } from './mvt_single_layer_vector_source'; + +export interface Props { + tooltipFields: MVTFields[]; + onChange: (fields: MVTFields[]) => void; + source: MVTSingleLayerVectorSource; +} + +// eslint-disable-next-line @typescript-eslint/no-empty-interface +interface State { + fields: null | MVTField[]; +} + +export class UpdateSourceEditor extends Component { + state = { + fields: null, + }; + + readonly _isMounted: boolean; + + componentDidMount() { + this._isMounted = true; + this._loadFields(); + } + + componentWillUnmount() { + this._isMounted = false; + } + + async _loadFields() { + const fields = await this.props.source.getFields(); + console.log('load fields', fields); + if (this._isMounted) { + this.setState({ fields }); + } + } + + _onTooltipPropertiesSelect = (propertyNames: string[]) => { + console.log('propertiy names', propertyNames); + this.props.onChange({ propName: 'tooltipProperties', value: propertyNames }); + }; + + render() { + return ( + + + +
+ +
+ + + + + + + + + + ); + } +} From 0ce43bdce78c9788a7e47b16cc40f86de148365c Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Sun, 26 Apr 2020 20:00:53 -0400 Subject: [PATCH 09/97] more boiler --- .../features_tooltip/feature_properties.js | 8 ++-- .../map/features_tooltip/features_tooltip.js | 2 + .../map/mb/tooltip_control/tooltip_control.js | 6 +-- .../map/mb/tooltip_control/tooltip_popover.js | 11 +++--- .../mvt_single_layer_vector_source.tsx | 39 +++++++++++++++++-- .../update_source_editor.tsx | 6 +-- .../sources/vector_source/vector_source.d.ts | 12 +++++- .../components/symbol/icon_map_select.js | 2 - .../maps/public/layers/tiled_vector_layer.tsx | 12 ++++++ .../maps/public/layers/vector_layer.d.ts | 11 ++++++ .../maps/public/layers/vector_layer.js | 5 ++- 11 files changed, 90 insertions(+), 24 deletions(-) diff --git a/x-pack/plugins/maps/public/connected_components/map/features_tooltip/feature_properties.js b/x-pack/plugins/maps/public/connected_components/map/features_tooltip/feature_properties.js index 5d13b1d9483d6..cd904b31562f3 100644 --- a/x-pack/plugins/maps/public/connected_components/map/features_tooltip/feature_properties.js +++ b/x-pack/plugins/maps/public/connected_components/map/features_tooltip/feature_properties.js @@ -31,16 +31,15 @@ export class FeatureProperties extends React.Component { this._isMounted = false; } - _loadProperties = () => { - console.log('load properties') + _loadProperties = async () => { this._fetchProperties({ nextFeatureId: this.props.featureId, nextLayerId: this.props.layerId, + meta: this.props.meta, }); }; - _fetchProperties = async ({ nextLayerId, nextFeatureId }) => { - console.log('fetch proeprties', nextLayerId, nextFeatureId); + _fetchProperties = async ({ nextLayerId, nextFeatureId, meta }) => { if (this.prevLayerId === nextLayerId && this.prevFeatureId === nextFeatureId) { // do not reload same feature properties return; @@ -66,6 +65,7 @@ export class FeatureProperties extends React.Component { properties = await this.props.loadFeatureProperties({ layerId: nextLayerId, featureId: nextFeatureId, + meta: meta, }); } catch (error) { if (this._isMounted) { diff --git a/x-pack/plugins/maps/public/connected_components/map/features_tooltip/features_tooltip.js b/x-pack/plugins/maps/public/connected_components/map/features_tooltip/features_tooltip.js index 8a1b556d21c1f..2f5ae148b07ca 100644 --- a/x-pack/plugins/maps/public/connected_components/map/features_tooltip/features_tooltip.js +++ b/x-pack/plugins/maps/public/connected_components/map/features_tooltip/features_tooltip.js @@ -104,6 +104,7 @@ export class FeaturesTooltip extends React.Component { const currentFeatureGeometry = this.props.loadFeatureGeometry({ layerId: this.state.currentFeature.layerId, featureId: this.state.currentFeature.id, + meta: this.state.currentFeature.meta, }); const geoFields = this._filterGeoFields(currentFeatureGeometry); @@ -132,6 +133,7 @@ export class FeaturesTooltip extends React.Component { { + _loadFeatureGeometry = ({ layerId, featureId, meta }) => { const tooltipLayer = this._findLayerById(layerId); if (!tooltipLayer) { return null; } - const targetFeature = tooltipLayer.getFeatureById(featureId); + const targetFeature = tooltipLayer.getFeatureById(featureId, meta); if (!targetFeature) { return null; } @@ -70,16 +70,17 @@ export class TooltipPopover extends Component { return targetFeature.geometry; }; - _loadFeatureProperties = async ({ layerId, featureId }) => { + _loadFeatureProperties = async ({ layerId, featureId, meta }) => { const tooltipLayer = this._findLayerById(layerId); if (!tooltipLayer) { return []; } - const targetFeature = tooltipLayer.getFeatureById(featureId); + const targetFeature = tooltipLayer.getFeatureById(featureId, meta); if (!targetFeature) { return []; } + return await tooltipLayer.getPropertiesForTooltip(targetFeature.properties); }; @@ -89,7 +90,7 @@ export class TooltipPopover extends Component { return null; } - const targetFeature = tooltipLayer.getFeatureById(featureId); + const targetFeature = tooltipLayer.getFeatureById(featureId, { mbProperties: {} }); if (!targetFeature) { return null; } diff --git a/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx index cc124ca35de9c..d2128bbb9e30b 100644 --- a/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx +++ b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx @@ -7,6 +7,7 @@ import { i18n } from '@kbn/i18n'; import uuid from 'uuid/v4'; import React from 'react'; +import { GeoJsonProperties, Geometry } from 'geojson'; import { AbstractSource, ImmutableSourceProperty } from '../source'; import { TiledVectorLayer } from '../../tiled_vector_layer'; import { GeoJsonWithMeta, ITiledSingleLayerVectorSource } from '../vector_source'; @@ -26,6 +27,7 @@ import { import { VectorLayerArguments } from '../../vector_layer'; import { MVTField } from '../../fields/mvt_field'; import { UpdateSourceEditor } from './update_source_editor'; +import { ITooltipProperty, TooltipProperty } from '../../tooltips/tooltip_property'; export const sourceTitle = i18n.translate( 'xpack.maps.source.MVTSingleLayerVectorSource.sourceTitle', @@ -133,8 +135,7 @@ export class MVTSingleLayerVectorSource extends AbstractSource searchFilters: unknown[], registerCancelCallback: (callback: () => void) => void ): Promise { - // todo: remove this method - // This is a consequence of ITiledSingleLayerVectorSource extending IVectorSource. + // Having this method here is a consequence of ITiledSingleLayerVectorSource extending IVectorSource. throw new Error('Does not implement getGeoJsonWithMeta'); } @@ -187,7 +188,7 @@ export class MVTSingleLayerVectorSource extends AbstractSource } canFormatFeatureProperties() { - return false; + return true; } getMinZoom() { @@ -198,6 +199,18 @@ export class MVTSingleLayerVectorSource extends AbstractSource return this._descriptor.maxSourceZoom; } + getFeatureProperties( + id: string | number, + mbProperties: GeoJsonProperties + ): GeoJsonProperties | null { + // Just echo the properties back + return mbProperties; + } + getFeatureGeometry(id: string | number, mbProperties: GeoJsonProperties): Geometry | null { + // Cannot get the raw geometry for a simple tiled service + return null; + } + getBoundsForFilters(searchFilters: VectorSourceRequestMeta): MapExtent { return { maxLat: 90, @@ -218,6 +231,26 @@ export class MVTSingleLayerVectorSource extends AbstractSource supportsFieldMeta(): boolean { return false; } + + async filterAndFormatPropertiesToHtml( + properties: GeoJsonProperties, + featureId?: string | number + ): Promise { + const tooltips = []; + for (const key in properties) { + if (properties.hasOwnProperty(key)) { + const field = this._tooltipFields.find((mvtField: MVTField) => { + return mvtField.getName() === key; + }); + + if (field) { + const tooltip = new TooltipProperty(key, key, properties[key]); + tooltips.push(tooltip); + } + } + } + return tooltips; + } } registerSource({ diff --git a/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/update_source_editor.tsx b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/update_source_editor.tsx index c83fd7eb79f33..e486e7881dd25 100644 --- a/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/update_source_editor.tsx +++ b/x-pack/plugins/maps/public/layers/sources/mvt_single_layer_vector_source/update_source_editor.tsx @@ -42,14 +42,12 @@ export class UpdateSourceEditor extends Component { async _loadFields() { const fields = await this.props.source.getFields(); - console.log('load fields', fields); if (this._isMounted) { this.setState({ fields }); } } _onTooltipPropertiesSelect = (propertyNames: string[]) => { - console.log('propertiy names', propertyNames); this.props.onChange({ propName: 'tooltipProperties', value: propertyNames }); }; @@ -69,9 +67,9 @@ export class UpdateSourceEditor extends Component { diff --git a/x-pack/plugins/maps/public/layers/sources/vector_source/vector_source.d.ts b/x-pack/plugins/maps/public/layers/sources/vector_source/vector_source.d.ts index ab2f11433e99f..6c6a2369cca9a 100644 --- a/x-pack/plugins/maps/public/layers/sources/vector_source/vector_source.d.ts +++ b/x-pack/plugins/maps/public/layers/sources/vector_source/vector_source.d.ts @@ -5,7 +5,7 @@ */ /* eslint-disable @typescript-eslint/consistent-type-definitions */ -import { FeatureCollection } from 'geojson'; +import { FeatureCollection, GeoJsonProperties, Geometry } from 'geojson'; import { AbstractSource, ISource } from '../source'; import { IField } from '../../fields/field'; import { @@ -15,6 +15,7 @@ import { VectorSourceSyncMeta, } from '../../../../common/descriptor_types'; import { VECTOR_SHAPE_TYPES } from '../vector_feature_types'; +import { ITooltipProperty } from '../../tooltips/tooltip_property'; export type GeoJsonFetchMeta = ESSearchSourceResponseMeta; @@ -38,6 +39,8 @@ export interface IVectorSource extends ISource { getApplyGlobalQuery(): boolean; createField({ fieldName }: { fieldName: string }): IField; supportsFieldMeta(): boolean; + canFormatFeatureProperties(): boolean; + filterAndFormatPropertiesToHtml(properties: GeoJsonProperties): Promise; } export class AbstractVectorSource extends AbstractSource implements IVectorSource { @@ -57,6 +60,7 @@ export class AbstractVectorSource extends AbstractSource implements IVectorSourc getFieldNames(): string[]; createField({ fieldName }: { fieldName: string }): IField; supportsFieldMeta(): boolean; + filterAndFormatPropertiesToHtml(properties: GeoJsonProperties): Promise; } export interface ITiledSingleLayerVectorSource extends IVectorSource { @@ -68,4 +72,10 @@ export interface ITiledSingleLayerVectorSource extends IVectorSource { }>; getMinZoom(): number; getMaxZoom(): number; + + getFeatureProperties( + id: string | number, + mbProperties: GeoJsonProperties + ): GeoJsonProperties | null; + getFeatureGeometry(id: string | number, mbProperties: GeoJsonProperties): Geometry | null; } diff --git a/x-pack/plugins/maps/public/layers/styles/vector/components/symbol/icon_map_select.js b/x-pack/plugins/maps/public/layers/styles/vector/components/symbol/icon_map_select.js index bcf694d6aece8..b88f247bb6e53 100644 --- a/x-pack/plugins/maps/public/layers/styles/vector/components/symbol/icon_map_select.js +++ b/x-pack/plugins/maps/public/layers/styles/vector/components/symbol/icon_map_select.js @@ -40,8 +40,6 @@ export function IconMapSelect({ /> ); } - - console.log('render stylemap select'); return ( ; getValidJoins(): IJoin[]; getSource(): IVectorSource; + getFeatureById( + id: string | number | undefined, + meta: { mbProperties: GeoJsonProperties } + ): Feature; + getPropertiesForTooltip(properties: GeoJsonProperties, featureId?: string | number); } export class VectorLayer extends AbstractLayer implements IVectorLayer { @@ -66,4 +72,9 @@ export class VectorLayer extends AbstractLayer implements IVectorLayer { _setMbPointsProperties(mbMap: unknown, mvtSourceLayer?: string): void; _setMbLinePolygonProperties(mbMap: unknown, mvtSourceLayer?: string): void; getSource(): IVectorSource; + getFeatureById( + id: string | number | undefined, + meta: { mbProperties: GeoJsonProperties } + ): Feature; + getPropertiesForTooltip(properties: GeoJsonProperties, featureId?: string | number); } diff --git a/x-pack/plugins/maps/public/layers/vector_layer.js b/x-pack/plugins/maps/public/layers/vector_layer.js index 17b7f8152d76d..a48f853a9c080 100644 --- a/x-pack/plugins/maps/public/layers/vector_layer.js +++ b/x-pack/plugins/maps/public/layers/vector_layer.js @@ -894,8 +894,9 @@ export class VectorLayer extends AbstractLayer { } } - async getPropertiesForTooltip(properties) { - let allTooltips = await this.getSource().filterAndFormatPropertiesToHtml(properties); + async getPropertiesForTooltip(properties, featureId) { + const vectorSource = this.getSource(); + let allTooltips = await vectorSource.filterAndFormatPropertiesToHtml(properties, featureId); this._addJoinsToSourceTooltips(allTooltips); for (let i = 0; i < this.getJoins().length; i++) { From a33b1969b90b29bda890986a3dabf00841bb442d Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Sun, 26 Apr 2020 23:09:18 -0400 Subject: [PATCH 10/97] enable custom palettes --- .../styles/vector/components/color/color_map_select.js | 2 +- .../styles/vector/components/symbol/icon_map_select.js | 8 ++++++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/x-pack/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js b/x-pack/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js index bcae1c4835394..51d25016ec1fc 100644 --- a/x-pack/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js +++ b/x-pack/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js @@ -89,7 +89,7 @@ export class ColorMapSelect extends Component { }; _renderColorStopsInput() { - if (this.props.supportsAutoDomain) { + if (this.props.supportsAutoDomain && !this.props.useCustomColorMap) { return null; } diff --git a/x-pack/plugins/maps/public/layers/styles/vector/components/symbol/icon_map_select.js b/x-pack/plugins/maps/public/layers/styles/vector/components/symbol/icon_map_select.js index b88f247bb6e53..1fe2fd99afd98 100644 --- a/x-pack/plugins/maps/public/layers/styles/vector/components/symbol/icon_map_select.js +++ b/x-pack/plugins/maps/public/layers/styles/vector/components/symbol/icon_map_select.js @@ -40,15 +40,19 @@ export function IconMapSelect({ /> ); } + + const field = styleProperty.getField(); + const defaultOptions = field.supportsAutoDomain() ? getIconPaletteOptions(isDarkMode) : []; + return ( From 99aa6ca42e436710d04502085ff7312874be86ec Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Sun, 26 Apr 2020 23:23:50 -0400 Subject: [PATCH 11/97] fix label text and orientation --- .../vector/properties/dynamic_orientation_property.js | 7 +++---- .../styles/vector/properties/dynamic_text_property.js | 6 +++++- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/x-pack/plugins/maps/public/layers/styles/vector/properties/dynamic_orientation_property.js b/x-pack/plugins/maps/public/layers/styles/vector/properties/dynamic_orientation_property.js index ae4d935e2457b..bba6c49a1db95 100644 --- a/x-pack/plugins/maps/public/layers/styles/vector/properties/dynamic_orientation_property.js +++ b/x-pack/plugins/maps/public/layers/styles/vector/properties/dynamic_orientation_property.js @@ -11,10 +11,9 @@ import { VECTOR_STYLES } from '../../../../../common/constants'; export class DynamicOrientationProperty extends DynamicStyleProperty { syncIconRotationWithMb(symbolLayerId, mbMap) { if (this._options.field && this._options.field.name) { - const targetName = getComputedFieldName( - VECTOR_STYLES.ICON_ORIENTATION, - this._options.field.name - ); + const targetName = this._field.supportsAutoDomain() + ? getComputedFieldName(VECTOR_STYLES.ICON_ORIENTATION, this._field.getName()) + : this._field.getName(); // Using property state instead of feature-state because layout properties do not support feature-state mbMap.setLayoutProperty(symbolLayerId, 'icon-rotate', ['coalesce', ['get', targetName], 0]); } else { diff --git a/x-pack/plugins/maps/public/layers/styles/vector/properties/dynamic_text_property.js b/x-pack/plugins/maps/public/layers/styles/vector/properties/dynamic_text_property.js index de868f3f92650..1128280714c3e 100644 --- a/x-pack/plugins/maps/public/layers/styles/vector/properties/dynamic_text_property.js +++ b/x-pack/plugins/maps/public/layers/styles/vector/properties/dynamic_text_property.js @@ -9,8 +9,12 @@ import { getComputedFieldName } from '../style_util'; export class DynamicTextProperty extends DynamicStyleProperty { syncTextFieldWithMb(mbLayerId, mbMap) { + console.log('synctextfieldwithmb'); if (this._field && this._field.isValid()) { - const targetName = getComputedFieldName(this._styleName, this._options.field.name); + // Fields that don't support auto-domain, are not normalized with a field-formatter and stored into a computed-field + const targetName = this._field.supportsAutoDomain() + ? getComputedFieldName(this._styleName, this._field.getName()) + : this._field.getName(); mbMap.setLayoutProperty(mbLayerId, 'text-field', ['coalesce', ['get', targetName], '']); } else { mbMap.setLayoutProperty(mbLayerId, 'text-field', null); From c5c02d718e8731d4cc0e60e26fd53c0aa8933c5e Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Thu, 14 May 2020 18:26:12 -0400 Subject: [PATCH 12/97] fix merge errors --- ....ts => mvt_single_layer_vector_source.tsx} | 107 +++++++++++++++--- .../properties/dynamic_text_property.js | 1 - 2 files changed, 89 insertions(+), 19 deletions(-) rename x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/{mvt_single_layer_vector_source.ts => mvt_single_layer_vector_source.tsx} (59%) 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.tsx similarity index 59% rename from x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.ts rename to x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx index b497f10188fa6..e92a293ae9b7a 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.tsx @@ -6,21 +6,25 @@ import { i18n } from '@kbn/i18n'; import uuid from 'uuid/v4'; -import { AbstractSource, ImmutableSourceProperty } from '../source'; +import React from 'react'; +import { GeoJsonProperties, Geometry } from 'geojson'; +import { FIELD_ORIGIN, MAX_ZOOM, MIN_ZOOM, SOURCE_TYPES } from '../../../../common/constants'; import { GeoJsonWithMeta, ITiledSingleLayerVectorSource } from '../vector_source'; -import { MAX_ZOOM, MIN_ZOOM, SOURCE_TYPES } from '../../../../common/constants'; import { VECTOR_SHAPE_TYPES } from '../vector_feature_types'; import { IField } from '../../fields/field'; import { registerSource } from '../source_registry'; import { getDataSourceLabel, getUrlLabel } from '../../../../common/i18n_getters'; import { MapExtent, + MVTFieldDescriptor, TiledSingleLayerVectorSourceDescriptor, VectorSourceRequestMeta, VectorSourceSyncMeta, } from '../../../../common/descriptor_types'; -import { TiledSingleLayerVectorSourceDescriptor } from '../../../../common/descriptor_types'; -import { ITooltipProperty } from '../../tooltips/tooltip_property'; +import { MVTField } from '../../fields/mvt_field'; +import { UpdateSourceEditor } from './update_source_editor'; +import { ITooltipProperty, TooltipProperty } from '../../tooltips/tooltip_property'; +import { AbstractSource, ImmutableSourceProperty } from '../source'; export const sourceTitle = i18n.translate( 'xpack.maps.source.MVTSingleLayerVectorSource.sourceTitle', @@ -52,21 +56,48 @@ export class MVTSingleLayerVectorSource extends AbstractSource } readonly _descriptor: TiledSingleLayerVectorSourceDescriptor; + readonly _tooltipFields: MVTField[]; constructor( sourceDescriptor: TiledSingleLayerVectorSourceDescriptor, inspectorAdapters?: object ) { super(sourceDescriptor, inspectorAdapters); - this._descriptor = sourceDescriptor; + this._descriptor = MVTSingleLayerVectorSource.createDescriptor(sourceDescriptor); + this._tooltipFields = this._descriptor.tooltipProperties.map(fieldName => { + return this.createField({ fieldName }); + }); } - renderSourceSettingsEditor() { - return null; + renderSourceSettingsEditor({ onChange }) { + return ( + + ); } getFieldNames(): string[] { - return []; + return this._descriptor.fields.map((field: MVTFieldDescriptor) => { + return field.name; + }); + } + + getFieldByName(fieldName: string): IField | null { + return this.createField({ fieldName }); + } + + createField({ fieldName }: { fieldName: string }): IField { + const field = this._descriptor.fields.find((f: MVTFieldDescriptor) => { + return f.name === fieldName; + }); + if (!field) { + throw new Error(`Cannot create field for fieldName ${fieldName}`); + } + return new MVTField({ + fieldName: field.name, + type: field.type, + source: this, + origin: FIELD_ORIGIN.SOURCE, + }); } getGeoJsonWithMeta( @@ -74,13 +105,19 @@ export class MVTSingleLayerVectorSource extends AbstractSource searchFilters: unknown[], registerCancelCallback: (callback: () => void) => void ): Promise { - // todo: remove this method - // This is a consequence of ITiledSingleLayerVectorSource extending IVectorSource. + // Having this method here is a consequence of ITiledSingleLayerVectorSource extending IVectorSource. throw new Error('Does not implement getGeoJsonWithMeta'); } async getFields(): Promise { - return []; + return this._descriptor.fields.map((field: MVTFieldDescriptor) => { + return new MVTField({ + fieldName: field.name, + type: field.type, + source: this, + origin: FIELD_ORIGIN.SOURCE, + }); + }); } async getImmutableProperties(): Promise { @@ -105,6 +142,12 @@ export class MVTSingleLayerVectorSource extends AbstractSource }), value: this._descriptor.maxSourceZoom.toString(), }, + { + label: i18n.translate('xpack.maps.source.MVTSingleLayerVectorSource.fields', { + defaultMessage: 'Fields', + }), + value: this._descriptor.fields.map(({ name, type }) => `${name}(${type})`).join(', '), + }, ]; } @@ -126,7 +169,7 @@ export class MVTSingleLayerVectorSource extends AbstractSource } canFormatFeatureProperties() { - return false; + return true; } getMinZoom() { @@ -137,6 +180,18 @@ export class MVTSingleLayerVectorSource extends AbstractSource return this._descriptor.maxSourceZoom; } + getFeatureProperties( + id: string | number, + mbProperties: GeoJsonProperties + ): GeoJsonProperties | null { + // Just echo the properties back + return mbProperties; + } + getFeatureGeometry(id: string | number, mbProperties: GeoJsonProperties): Geometry | null { + // Cannot get the raw geometry for a simple tiled service + return null; + } + getBoundsForFilters(searchFilters: VectorSourceRequestMeta): MapExtent { return { maxLat: 90, @@ -146,10 +201,6 @@ export class MVTSingleLayerVectorSource extends AbstractSource }; } - getFieldByName(fieldName: string): IField | null { - return null; - } - getSyncMeta(): VectorSourceSyncMeta { return null; } @@ -158,8 +209,28 @@ export class MVTSingleLayerVectorSource extends AbstractSource return false; } - async filterAndFormatPropertiesToHtml(properties: unknown): Promise { - return []; + supportsFieldMeta(): boolean { + return false; + } + + async filterAndFormatPropertiesToHtml( + properties: GeoJsonProperties, + featureId?: string | number + ): Promise { + const tooltips = []; + for (const key in properties) { + if (properties.hasOwnProperty(key)) { + const field = this._tooltipFields.find((mvtField: MVTField) => { + return mvtField.getName() === key; + }); + + if (field) { + const tooltip = new TooltipProperty(key, key, properties[key]); + tooltips.push(tooltip); + } + } + } + return tooltips; } } diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_text_property.js b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_text_property.js index 1128280714c3e..cbbc55bc19b47 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_text_property.js +++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_text_property.js @@ -9,7 +9,6 @@ import { getComputedFieldName } from '../style_util'; export class DynamicTextProperty extends DynamicStyleProperty { syncTextFieldWithMb(mbLayerId, mbMap) { - console.log('synctextfieldwithmb'); if (this._field && this._field.isValid()) { // Fields that don't support auto-domain, are not normalized with a field-formatter and stored into a computed-field const targetName = this._field.supportsAutoDomain() From 81423bd950d71b832f7ae1611746840cf694ff05 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Tue, 9 Jun 2020 16:16:47 -0400 Subject: [PATCH 13/97] remove dupe import --- .../mvt_single_layer_vector_source.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx index 93630b401b72e..dbfd02290f369 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx @@ -24,7 +24,6 @@ import { import { MVTField } from '../../fields/mvt_field'; import { UpdateSourceEditor } from './update_source_editor'; import { ITooltipProperty, TooltipProperty } from '../../tooltips/tooltip_property'; -import { AbstractSource, ImmutableSourceProperty } from '../source'; export const sourceTitle = i18n.translate( 'xpack.maps.source.MVTSingleLayerVectorSource.sourceTitle', From 9d41d94d5ada6e543ee7ff7a442428d66f1930c9 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Wed, 10 Jun 2020 12:07:56 -0400 Subject: [PATCH 14/97] stash commit --- .../maps/public/angular/map_controller.js | 1 + .../maps/public/classes/fields/mvt_field.ts | 9 +- .../maps/public/classes/layers/layer.tsx | 2 + .../tiled_vector_layer/tiled_vector_layer.tsx | 29 ++++++- .../mvt_single_layer_source_settings.tsx | 87 +++++++++++++++++++ .../mvt_single_layer_vector_source.tsx | 8 +- .../mvt_single_layer_vector_source_editor.tsx | 62 ++++--------- .../update_source_editor.tsx | 73 +++++++++++++++- .../connected_components/layer_panel/view.js | 9 +- 9 files changed, 229 insertions(+), 51 deletions(-) create mode 100644 x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx diff --git a/x-pack/legacy/plugins/maps/public/angular/map_controller.js b/x-pack/legacy/plugins/maps/public/angular/map_controller.js index 70d5195feef42..72f74b536f4b3 100644 --- a/x-pack/legacy/plugins/maps/public/angular/map_controller.js +++ b/x-pack/legacy/plugins/maps/public/angular/map_controller.js @@ -385,6 +385,7 @@ app.controller( }); // sync store with savedMap mapState + console.log('ms', savedMap, savedMap.mapStateJSON); let savedObjectFilters = []; if (savedMap.mapStateJSON) { const mapState = JSON.parse(savedMap.mapStateJSON); diff --git a/x-pack/plugins/maps/public/classes/fields/mvt_field.ts b/x-pack/plugins/maps/public/classes/fields/mvt_field.ts index 9dd6a15385fbe..bb56379953e84 100644 --- a/x-pack/plugins/maps/public/classes/fields/mvt_field.ts +++ b/x-pack/plugins/maps/public/classes/fields/mvt_field.ts @@ -7,7 +7,7 @@ import { AbstractField, IField } from './field'; import { FIELD_ORIGIN } from '../../../common/constants'; import { ITiledSingleLayerVectorSource, IVectorSource } from '../sources/vector_source'; -import { MVTFieldType } from '../../../common/descriptor_types'; +import { MVTFieldDescriptor, MVTFieldType } from '../../../common/descriptor_types'; export class MVTField extends AbstractField implements IField { private readonly _source: ITiledSingleLayerVectorSource; @@ -28,6 +28,13 @@ export class MVTField extends AbstractField implements IField { this._type = type; } + getMVTFieldDescriptor(): MVTFieldDescriptor { + return { + type: this._type, + name: this.getName(), + }; + } + getSource(): IVectorSource { return this._source; } diff --git a/x-pack/plugins/maps/public/classes/layers/layer.tsx b/x-pack/plugins/maps/public/classes/layers/layer.tsx index 2250d5663378c..179e83c2f4dcb 100644 --- a/x-pack/plugins/maps/public/classes/layers/layer.tsx +++ b/x-pack/plugins/maps/public/classes/layers/layer.tsx @@ -331,6 +331,7 @@ export class AbstractLayer implements ILayer { _removeStaleMbSourcesAndLayers(mbMap: unknown) { if (this._requiresPrevSourceCleanup(mbMap)) { + console.log('requresprevsourcelcan'); // @ts-ignore const mbStyle = mbMap.getStyle(); // @ts-ignore @@ -346,6 +347,7 @@ export class AbstractLayer implements ILayer { // @ts-ignore if (this.ownsMbSourceId(mbSourceId)) { // @ts-ignore + console.log('remnove source', mbSourceId); mbMap.removeSource(mbSourceId); } }); diff --git a/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx index b800ff5788080..71a094f520b55 100644 --- a/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx +++ b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx @@ -19,6 +19,7 @@ import { VectorLayerDescriptor, VectorSourceRequestMeta, } from '../../../../common/descriptor_types'; +import { MVTSingleLayerVectorSourceConfig } from '../../sources/mvt_single_layer_vector_source/types'; export class TiledVectorLayer extends VectorLayer { static type = LAYER_TYPE.TILED_VECTOR; @@ -65,12 +66,25 @@ export class TiledVectorLayer extends VectorLayer { ); const prevDataRequest = this.getSourceDataRequest(); - const canSkip = await canSkipSourceUpdate({ + const canSkipBecauseNoChangesInState = await canSkipSourceUpdate({ source: this._source as ISource, prevDataRequest, nextMeta: searchFilters, }); - if (canSkip) { + + console.log('pdr', prevDataRequest, this._source); + let canSkipBecauseNoChangesInZoom = false; + if (prevDataRequest) { + const data: MVTSingleLayerVectorSourceConfig = prevDataRequest.getData() as MVTSingleLayerVectorSourceConfig; + canSkipBecauseNoChangesInZoom = + data.minSourceZoom === this._source.getMinZoom() && + data.maxSourceZoom === this._source.getMaxZoom(); + } + + console.log(canSkipBecauseNoChangesInZoom, canSkipBecauseNoChangesInState); + + if (canSkipBecauseNoChangesInState && canSkipBecauseNoChangesInZoom) { + console.log('can skip update'); return null; } @@ -84,14 +98,17 @@ export class TiledVectorLayer extends VectorLayer { } async syncData(syncContext: DataRequestContext) { + console.log('syncData'); await this._syncSourceStyleMeta(syncContext, this._source, this._style); await this._syncSourceFormatters(syncContext, this._source, this._style); await this._syncMVTUrlTemplate(syncContext); } _syncSourceBindingWithMb(mbMap: unknown) { + console.log('syncsourcedata'); // @ts-ignore const mbSource = mbMap.getSource(this.getId()); + console.log('mbs',mbSource); if (!mbSource) { const sourceDataRequest = this.getSourceDataRequest(); if (!sourceDataRequest) { @@ -109,6 +126,7 @@ export class TiledVectorLayer extends VectorLayer { const sourceId = this.getId(); // @ts-ignore + mbMap.addSource(sourceId, { type: 'vector', tiles: [sourceMeta.urlTemplate], @@ -131,11 +149,13 @@ export class TiledVectorLayer extends VectorLayer { } const sourceMeta: TiledSingleLayerVectorSourceDescriptor = sourceDataRequest.getData() as MVTSingleLayerVectorSourceConfig; + console.log('syncstylepore', sourceMeta.layerName); this._setMbPointsProperties(mbMap, sourceMeta.layerName); this._setMbLinePolygonProperties(mbMap, sourceMeta.layerName); } _requiresPrevSourceCleanup(mbMap: unknown): boolean { + console.log('does it require cleanup?'); // @ts-ignore const mbTileSource = mbMap.getSource(this.getId()); if (!mbTileSource) { @@ -146,19 +166,24 @@ export class TiledVectorLayer extends VectorLayer { return false; } const tiledSourceMeta: TiledSingleLayerVectorSourceDescriptor | null = dataRequest.getData() as MVTSingleLayerVectorSourceConfig; + + console.log('so is this different?', mbTileSource, tiledSourceMeta); if ( mbTileSource.tiles[0] === tiledSourceMeta.urlTemplate && mbTileSource.minzoom === tiledSourceMeta.minSourceZoom && mbTileSource.maxzoom === tiledSourceMeta.maxSourceZoom ) { + // TileURL and zoom-range captures all the state. If this does not change, no updates are required. return false; } + console.log('YES cleanuo'); return true; } syncLayerWithMB(mbMap: unknown) { + console.log('synclayewithmb'); this._removeStaleMbSourcesAndLayers(mbMap); this._syncSourceBindingWithMb(mbMap); this._syncStylePropertiesWithMb(mbMap); diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx new file mode 100644 index 0000000000000..ca4638fafab8c --- /dev/null +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx @@ -0,0 +1,87 @@ +/* + * 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. + */ +/* eslint-disable @typescript-eslint/consistent-type-definitions */ + +import React, { Fragment, Component, ChangeEvent } from 'react'; +import { EuiFieldText, EuiFormRow } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; +import { MAX_ZOOM, MIN_ZOOM } from '../../../../common/constants'; +import { ValidatedDualRange, Value } from '../../../../../../../src/plugins/kibana_react/public'; +import { MVTFieldConfigEditor } from './mvt_field_config_editor'; +import { MVTFieldDescriptor } from '../../../../common/descriptor_types'; + +export interface Props { + handleLayerNameInputChange: (layerName: string) => void; + handleFieldChange: (fields: MVTFieldDescriptor[]) => void; + handleZoomRangeChange: ({ minSourceZoom: number, maxSourceZoom: number }) => void; + layerName: string; + fields: MVTFieldDescriptor[]; + minSourceZoom: number; + maxSourceZoom: number; +} + +export class MVTSingleLayerSourceSettings extends Component { + _handleLayerNameInputChange = (e: ChangeEvent) => { + const layerName = e.target.value; + this.props.handleLayerNameInputChange(layerName); + }; + + _handleFieldChange = (fields: MVTFieldDescriptor[]) => { + this.props.handleFieldChange(fields); + }; + + _handleZoomRangeChange = (e: Value) => { + const minSourceZoom = parseInt(e[0] as string, 10); + const maxSourceZoom = parseInt(e[1] as string, 10); + this.props.handleZoomRangeChange({ minSourceZoom, maxSourceZoom }); + }; + + render() { + return ( + + + + + + + + + + ); + } +} diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx index dbfd02290f369..58932d82a278f 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx @@ -69,6 +69,7 @@ export class MVTSingleLayerVectorSource extends AbstractSource } renderSourceSettingsEditor({ onChange }) { + console.log('render source settings editor', onChange); return ( ); @@ -119,6 +120,10 @@ export class MVTSingleLayerVectorSource extends AbstractSource }); } + getLayerName():string { + return this._descriptor.layerName; + } + async getImmutableProperties(): Promise { return [ { label: getDataSourceLabel(), value: sourceTitle }, @@ -151,10 +156,11 @@ export class MVTSingleLayerVectorSource extends AbstractSource } async getDisplayName(): Promise { - return this._descriptor.layerName; + return this.getLayerName(); } async getUrlTemplateWithMeta() { + console.log('geturltemplate withmeta'); return { urlTemplate: this._descriptor.urlTemplate, layerName: this._descriptor.layerName, diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx index 5c3d008d49ef8..111024eb8f143 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx @@ -16,6 +16,7 @@ import { MVTFieldDescriptor, TiledSingleLayerVectorSourceDescriptor, } from '../../../../common/descriptor_types'; +import { MVTSingleLayerSourceSettings } from './mvt_single_layer_source_settings'; export interface Props { onSourceConfigChange: (sourceConfig: TiledSingleLayerVectorSourceDescriptor) => void; @@ -65,8 +66,7 @@ export class MVTSingleLayerVectorSourceEditor extends Component { ); }; - _handleLayerNameInputChange = (e: ChangeEvent) => { - const layerName = e.target.value; + _handleLayerNameInputChange = (layerName: string) => { this.setState( { layerName, @@ -84,10 +84,13 @@ export class MVTSingleLayerVectorSourceEditor extends Component { ); }; - _handleZoomRangeChange = (e: Value) => { - const minSourceZoom = parseInt(e[0] as string, 10); - const maxSourceZoom = parseInt(e[1] as string, 10); - + _handleZoomRangeChange = ({ + minSourceZoom, + maxSourceZoom, + }: { + minSourceZoom: number; + maxSourceZoom: number; + }) => { if (this.state.minSourceZoom !== minSourceZoom || this.state.maxSourceZoom !== maxSourceZoom) { this.setState({ minSourceZoom, maxSourceZoom }, () => this._sourceConfigChange()); } @@ -103,44 +106,15 @@ export class MVTSingleLayerVectorSourceEditor extends Component { > - - - - - - - ); diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx index e486e7881dd25..c8909dd56d74c 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx @@ -12,6 +12,9 @@ import { FormattedMessage } from '@kbn/i18n/react'; import { TooltipSelector } from '../../../components/tooltip_selector'; import { MVTField } from '../../fields/mvt_field'; import { MVTSingleLayerVectorSource } from './mvt_single_layer_vector_source'; +import { MVTSingleLayerVectorSourceEditor } from './mvt_single_layer_vector_source_editor'; +import { MVTSingleLayerSourceSettings } from './mvt_single_layer_source_settings'; +import { MVTFieldDescriptor } from '../../../../common/descriptor_types'; export interface Props { tooltipFields: MVTFields[]; @@ -51,14 +54,71 @@ export class UpdateSourceEditor extends Component { this.props.onChange({ propName: 'tooltipProperties', value: propertyNames }); }; - render() { + _handleLayerNameInputChange = (layerName: string) => { + console.log('ln', layerName); + this.props.onChange({ propName: 'layerName', value: layerName }); + }; + + _handleFieldChange = (fields: MVTFieldDescriptor[]) => { + console.log('f', fields); + this.props.onChange({ propName: 'fields', value: fields }); + }; + + _handleZoomRangeChange = ({ + minSourceZoom, + maxSourceZoom, + }: { + minSourceZoom: number; + maxSourceZoom: number; + }) => { + console.log('zr', minSourceZoom, maxSourceZoom); + this.props.onChange({ propName: 'minSourceZoom', value: minSourceZoom }); + this.props.onChange({ propName: 'maxSourceZoom', value: maxSourceZoom }); + }; + + _renderSourceSettingsCard() { + console.log(this.props.source); + + const fields: MVTFieldDescriptor[] = (this.state.fields || []).map((field: MVTField) => { + return field.getMVTFieldDescriptor(); + }); + + return ( + + + +
+ +
+ + + + + + + + ); + } + + _renderTooltipSelectionCard() { return (
@@ -77,4 +137,13 @@ export class UpdateSourceEditor extends Component { ); } + + render() { + return ( + + {this._renderSourceSettingsCard()} + {this._renderTooltipSelectionCard()} + + ); + } } diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/view.js b/x-pack/plugins/maps/public/connected_components/layer_panel/view.js index f34c402a4d417..59e43651229c7 100644 --- a/x-pack/plugins/maps/public/connected_components/layer_panel/view.js +++ b/x-pack/plugins/maps/public/connected_components/layer_panel/view.js @@ -32,6 +32,7 @@ import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_reac import { Storage } from '../../../../../../src/plugins/kibana_utils/public'; import { getData, getCore } from '../../kibana_services'; +import _ from 'lodash'; const localStorage = new Storage(window.localStorage); @@ -53,6 +54,10 @@ export class LayerPanel extends React.Component { this._isMounted = false; } + componentDidUpdate(prevProps, prevState, snapshot) { + this.loadImmutableSourceProperties(); + } + loadDisplayName = async () => { if (!this.props.selectedLayer) { return; @@ -71,7 +76,9 @@ export class LayerPanel extends React.Component { const immutableSourceProps = await this.props.selectedLayer.getImmutableSourceProperties(); if (this._isMounted) { - this.setState({ immutableSourceProps }); + if (!_.isEqual(this.state.immutableSourceProps, immutableSourceProps)) { + this.setState({ immutableSourceProps }); + } } }; From 6d2e8d9c09c4f9da3598d0eed566aa175a754bd7 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Thu, 18 Jun 2020 18:31:38 -0400 Subject: [PATCH 15/97] tmp commit --- .../maps/common/descriptor_types/sources.ts | 8 +- .../layers/heatmap_layer/heatmap_layer.js | 2 +- .../maps/public/classes/layers/layer.tsx | 16 +-- .../tiled_vector_layer/tiled_vector_layer.tsx | 123 ++++++++++-------- .../layers/vector_layer/vector_layer.js | 8 +- .../mvt_single_layer_vector_source.tsx | 5 +- .../update_source_editor.tsx | 5 - .../sources/vector_source/vector_source.d.ts | 1 + 8 files changed, 87 insertions(+), 81 deletions(-) diff --git a/x-pack/plugins/maps/common/descriptor_types/sources.ts b/x-pack/plugins/maps/common/descriptor_types/sources.ts index 3ddbf87e45d22..2653848004379 100644 --- a/x-pack/plugins/maps/common/descriptor_types/sources.ts +++ b/x-pack/plugins/maps/common/descriptor_types/sources.ts @@ -111,9 +111,13 @@ export type TiledSingleLayerVectorSourceDescriptor = AbstractSourceDescriptor & // These are the min/max zoom levels of the availability of the a particular layerName in the tileset at urlTemplate. // These are _not_ the visible zoom-range of the data on a map. - // Tiled data can be displayed at higher levels of zoom than that they are stored in the tileset. - // e.g. EMS basemap data from level 14 is at most detailed resolution and can be displayed at higher levels + // These are important so mapbox does not issue invalid requests based on the zoom level. + + // Tiled layer data cannot be displayed at lower levels of zoom than that they are stored in the tileset. + // e.g. building footprints at level 14 cannot be displayed at level 0. minSourceZoom: number; + // Tiled layer data can be displayed at higher levels of zoom than that they are stored in the tileset. + // e.g. EMS basemap data from level 14 is at most detailed resolution and can be displayed at higher levels maxSourceZoom: number; fields: MVTFieldDescriptor[]; diff --git a/x-pack/plugins/maps/public/classes/layers/heatmap_layer/heatmap_layer.js b/x-pack/plugins/maps/public/classes/layers/heatmap_layer/heatmap_layer.js index f6b9bd6280290..adcc86b9d1546 100644 --- a/x-pack/plugins/maps/public/classes/layers/heatmap_layer/heatmap_layer.js +++ b/x-pack/plugins/maps/public/classes/layers/heatmap_layer/heatmap_layer.js @@ -91,7 +91,7 @@ export class HeatmapLayer extends VectorLayer { resolution: this.getSource().getGridResolution(), }); mbMap.setPaintProperty(heatmapLayerId, 'heatmap-opacity', this.getAlpha()); - mbMap.setLayerZoomRange(heatmapLayerId, this._descriptor.minZoom, this._descriptor.maxZoom); + mbMap.setLayerZoomRange(heatmapLayerId, this.getMinZoom(), this.getMaxZoom()); } getLayerTypeIconName() { diff --git a/x-pack/plugins/maps/public/classes/layers/layer.tsx b/x-pack/plugins/maps/public/classes/layers/layer.tsx index 179e83c2f4dcb..d62b8340767bb 100644 --- a/x-pack/plugins/maps/public/classes/layers/layer.tsx +++ b/x-pack/plugins/maps/public/classes/layers/layer.tsx @@ -331,23 +331,21 @@ export class AbstractLayer implements ILayer { _removeStaleMbSourcesAndLayers(mbMap: unknown) { if (this._requiresPrevSourceCleanup(mbMap)) { - console.log('requresprevsourcelcan'); - // @ts-ignore + // @ts-expect-error const mbStyle = mbMap.getStyle(); - // @ts-ignore + // @ts-expect-error mbStyle.layers.forEach((mbLayer) => { - // @ts-ignore + // @ts-expect-error if (this.ownsMbLayerId(mbLayer.id)) { - // @ts-ignore + // @ts-expect-error mbMap.removeLayer(mbLayer.id); } }); - // @ts-ignore + // @ts-expect-error Object.keys(mbStyle.sources).some((mbSourceId) => { - // @ts-ignore + // @ts-expect-error if (this.ownsMbSourceId(mbSourceId)) { - // @ts-ignore - console.log('remnove source', mbSourceId); + // @ts-expect-error mbMap.removeSource(mbSourceId); } }); diff --git a/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx index 71a094f520b55..6016e810cea03 100644 --- a/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx +++ b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx @@ -21,6 +21,8 @@ import { } from '../../../../common/descriptor_types'; import { MVTSingleLayerVectorSourceConfig } from '../../sources/mvt_single_layer_vector_source/types'; +const DELIMITER = '~'; + export class TiledVectorLayer extends VectorLayer { static type = LAYER_TYPE.TILED_VECTOR; @@ -66,26 +68,16 @@ export class TiledVectorLayer extends VectorLayer { ); const prevDataRequest = this.getSourceDataRequest(); - const canSkipBecauseNoChangesInState = await canSkipSourceUpdate({ - source: this._source as ISource, - prevDataRequest, - nextMeta: searchFilters, - }); - - console.log('pdr', prevDataRequest, this._source); - let canSkipBecauseNoChangesInZoom = false; if (prevDataRequest) { const data: MVTSingleLayerVectorSourceConfig = prevDataRequest.getData() as MVTSingleLayerVectorSourceConfig; - canSkipBecauseNoChangesInZoom = + const canSkipBecauseNoChanges = + data.layerName === this._source.getLayerName() && data.minSourceZoom === this._source.getMinZoom() && data.maxSourceZoom === this._source.getMaxZoom(); - } - - console.log(canSkipBecauseNoChangesInZoom, canSkipBecauseNoChangesInState); - if (canSkipBecauseNoChangesInState && canSkipBecauseNoChangesInZoom) { - console.log('can skip update'); - return null; + if (canSkipBecauseNoChanges) { + return null; + } } startLoading(SOURCE_DATA_REQUEST_ID, requestToken, searchFilters); @@ -98,47 +90,55 @@ export class TiledVectorLayer extends VectorLayer { } async syncData(syncContext: DataRequestContext) { - console.log('syncData'); await this._syncSourceStyleMeta(syncContext, this._source, this._style); await this._syncSourceFormatters(syncContext, this._source, this._style); await this._syncMVTUrlTemplate(syncContext); } - _syncSourceBindingWithMb(mbMap: unknown) { - console.log('syncsourcedata'); - // @ts-ignore - const mbSource = mbMap.getSource(this.getId()); - console.log('mbs',mbSource); - if (!mbSource) { - const sourceDataRequest = this.getSourceDataRequest(); - if (!sourceDataRequest) { - // this is possible if the layer was invisible at startup. - // the actions will not perform any data=syncing as an optimization when a layer is invisible - // when turning the layer back into visible, it's possible the url has not been resovled yet. - return; - } - - const sourceMeta: TiledSingleLayerVectorSourceDescriptor | null = sourceDataRequest.getData() as MVTSingleLayerVectorSourceConfig; - if (!sourceMeta) { - return; - } + // getId() { + // return this._descriptor.id + DELIMITER + this._source.getLayerName() + DELIMITER; + // } - const sourceId = this.getId(); + _getMbSourceId(): string { + return this.getId(); + } - // @ts-ignore + _syncSourceBindingWithMb(mbMap: unknown) { + // @ts-expect-error + const mbSource = mbMap.getSource(this._getMbSourceId()); + if (mbSource) { + return; + } + const sourceDataRequest = this.getSourceDataRequest(); + if (!sourceDataRequest) { + // this is possible if the layer was invisible at startup. + // the actions will not perform any data=syncing as an optimization when a layer is invisible + // when turning the layer back into visible, it's possible the url has not been resovled yet. + return; + } - mbMap.addSource(sourceId, { - type: 'vector', - tiles: [sourceMeta.urlTemplate], - minzoom: sourceMeta.minSourceZoom, - maxzoom: sourceMeta.maxSourceZoom, - }); + const sourceMeta: TiledSingleLayerVectorSourceDescriptor | null = sourceDataRequest.getData() as MVTSingleLayerVectorSourceConfig; + if (!sourceMeta) { + return; } + + const mbSourceId = this._getMbSourceId(); + // @ts-expect-error + mbMap.addSource(mbSourceId, { + type: 'vector', + tiles: [sourceMeta.urlTemplate], + minzoom: sourceMeta.minSourceZoom, + maxzoom: sourceMeta.maxSourceZoom, + }); + } + + ownsMbSourceId(mbSourceId): boolean { + return mbSourceId === this._getMbSourceId(); } _syncStylePropertiesWithMb(mbMap: unknown) { // @ts-ignore - const mbSource = mbMap.getSource(this.getId()); + const mbSource = mbMap.getSource(this._getMbSourceId()); if (!mbSource) { return; } @@ -149,41 +149,50 @@ export class TiledVectorLayer extends VectorLayer { } const sourceMeta: TiledSingleLayerVectorSourceDescriptor = sourceDataRequest.getData() as MVTSingleLayerVectorSourceConfig; - console.log('syncstylepore', sourceMeta.layerName); this._setMbPointsProperties(mbMap, sourceMeta.layerName); this._setMbLinePolygonProperties(mbMap, sourceMeta.layerName); } _requiresPrevSourceCleanup(mbMap: unknown): boolean { - console.log('does it require cleanup?'); // @ts-ignore - const mbTileSource = mbMap.getSource(this.getId()); + const mbTileSource = mbMap.getSource(this._getMbSourceId()); if (!mbTileSource) { return false; } + const dataRequest = this.getSourceDataRequest(); if (!dataRequest) { return false; } const tiledSourceMeta: TiledSingleLayerVectorSourceDescriptor | null = dataRequest.getData() as MVTSingleLayerVectorSourceConfig; - console.log('so is this different?', mbTileSource, tiledSourceMeta); - if ( - mbTileSource.tiles[0] === tiledSourceMeta.urlTemplate && - mbTileSource.minzoom === tiledSourceMeta.minSourceZoom && - mbTileSource.maxzoom === tiledSourceMeta.maxSourceZoom - ) { - - // TileURL and zoom-range captures all the state. If this does not change, no updates are required. + if (!tiledSourceMeta) { return false; } - console.log('YES cleanuo'); - return true; + // check if layername has changed + const isSourceDifferent = + mbTileSource.tiles[0] !== tiledSourceMeta.urlTemplate || + mbTileSource.minzoom !== tiledSourceMeta.minSourceZoom || + mbTileSource.maxzoom !== tiledSourceMeta.maxSourceZoom; + + if (isSourceDifferent) { + return true; + } + + const layerIds = this.getMbLayerIds(); + // just check the first layer + for (let i = 0; i < layerIds.length; i++) { + const mbLayer = mbMap.getLayer(layerIds[i]); + if (mbLayer && mbLayer.sourceLayer !== tiledSourceMeta.layerName) { + return true; + } + } + + return false; } syncLayerWithMB(mbMap: unknown) { - console.log('synclayewithmb'); this._removeStaleMbSourcesAndLayers(mbMap); this._syncSourceBindingWithMb(mbMap); this._syncStylePropertiesWithMb(mbMap); diff --git a/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.js b/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.js index 7bb89a9de2dfd..355df206aa2da 100644 --- a/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.js +++ b/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.js @@ -672,10 +672,10 @@ export class VectorLayer extends AbstractLayer { } this.syncVisibilityWithMb(mbMap, markerLayerId); - mbMap.setLayerZoomRange(markerLayerId, this._descriptor.minZoom, this._descriptor.maxZoom); + mbMap.setLayerZoomRange(markerLayerId, this.getMinZoom(), this.getMaxZoom()); if (markerLayerId !== textLayerId) { this.syncVisibilityWithMb(mbMap, textLayerId); - mbMap.setLayerZoomRange(textLayerId, this._descriptor.minZoom, this._descriptor.maxZoom); + mbMap.setLayerZoomRange(textLayerId, this.getMinZoom(), this.getMaxZoom()); } } @@ -802,14 +802,14 @@ export class VectorLayer extends AbstractLayer { }); this.syncVisibilityWithMb(mbMap, fillLayerId); - mbMap.setLayerZoomRange(fillLayerId, this._descriptor.minZoom, this._descriptor.maxZoom); + mbMap.setLayerZoomRange(fillLayerId, this.getMinZoom(), this.getMaxZoom()); const fillFilterExpr = getFillFilterExpression(hasJoins); if (fillFilterExpr !== mbMap.getFilter(fillLayerId)) { mbMap.setFilter(fillLayerId, fillFilterExpr); } this.syncVisibilityWithMb(mbMap, lineLayerId); - mbMap.setLayerZoomRange(lineLayerId, this._descriptor.minZoom, this._descriptor.maxZoom); + mbMap.setLayerZoomRange(lineLayerId, this.getMinZoom(), this.getMaxZoom()); const lineFilterExpr = getLineFilterExpression(hasJoins); if (lineFilterExpr !== mbMap.getFilter(lineLayerId)) { mbMap.setFilter(lineLayerId, lineFilterExpr); diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx index 58932d82a278f..868f65afb44e0 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx @@ -69,7 +69,7 @@ export class MVTSingleLayerVectorSource extends AbstractSource } renderSourceSettingsEditor({ onChange }) { - console.log('render source settings editor', onChange); + // console.log('render source settings editor', onChange); return ( ); @@ -120,7 +120,7 @@ export class MVTSingleLayerVectorSource extends AbstractSource }); } - getLayerName():string { + getLayerName(): string { return this._descriptor.layerName; } @@ -160,7 +160,6 @@ export class MVTSingleLayerVectorSource extends AbstractSource } async getUrlTemplateWithMeta() { - console.log('geturltemplate withmeta'); return { urlTemplate: this._descriptor.urlTemplate, layerName: this._descriptor.layerName, diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx index c8909dd56d74c..317ee95fb1a4a 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx @@ -55,12 +55,10 @@ export class UpdateSourceEditor extends Component { }; _handleLayerNameInputChange = (layerName: string) => { - console.log('ln', layerName); this.props.onChange({ propName: 'layerName', value: layerName }); }; _handleFieldChange = (fields: MVTFieldDescriptor[]) => { - console.log('f', fields); this.props.onChange({ propName: 'fields', value: fields }); }; @@ -71,14 +69,11 @@ export class UpdateSourceEditor extends Component { minSourceZoom: number; maxSourceZoom: number; }) => { - console.log('zr', minSourceZoom, maxSourceZoom); this.props.onChange({ propName: 'minSourceZoom', value: minSourceZoom }); this.props.onChange({ propName: 'maxSourceZoom', value: maxSourceZoom }); }; _renderSourceSettingsCard() { - console.log(this.props.source); - const fields: MVTFieldDescriptor[] = (this.state.fields || []).map((field: MVTField) => { return field.getMVTFieldDescriptor(); }); 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 8432ee81527a1..979be5c8cee8f 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 @@ -88,4 +88,5 @@ export interface ITiledSingleLayerVectorSource extends IVectorSource { }>; getMinZoom(): number; getMaxZoom(): number; + getLayerName(): string; } From fd785335fc16f5d1b5cb8965b0c5bf8e7dca3219 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Tue, 23 Jun 2020 01:35:20 -0400 Subject: [PATCH 16/97] debounce settings --- .../tiled_vector_layer/tiled_vector_layer.tsx | 6 +- .../ems_file_source/update_source_editor.tsx | 2 +- .../mvt_single_layer_source_settings.tsx | 68 ++++++++++++++++--- .../mvt_single_layer_vector_source.tsx | 1 - .../mvt_single_layer_vector_source_editor.tsx | 33 ++------- .../update_source_editor.tsx | 30 ++++---- .../connected_components/layer_panel/view.js | 9 ++- 7 files changed, 88 insertions(+), 61 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx index 6016e810cea03..86909e8bd5f65 100644 --- a/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx +++ b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx @@ -149,12 +149,16 @@ export class TiledVectorLayer extends VectorLayer { } const sourceMeta: TiledSingleLayerVectorSourceDescriptor = sourceDataRequest.getData() as MVTSingleLayerVectorSourceConfig; + if (sourceMeta.layerName === '') { + return; + } + this._setMbPointsProperties(mbMap, sourceMeta.layerName); this._setMbLinePolygonProperties(mbMap, sourceMeta.layerName); } _requiresPrevSourceCleanup(mbMap: unknown): boolean { - // @ts-ignore + // @ts-expect-error const mbTileSource = mbMap.getSource(this._getMbSourceId()); if (!mbTileSource) { return false; diff --git a/x-pack/plugins/maps/public/classes/sources/ems_file_source/update_source_editor.tsx b/x-pack/plugins/maps/public/classes/sources/ems_file_source/update_source_editor.tsx index ac69505a9bed5..c82956f530fc0 100644 --- a/x-pack/plugins/maps/public/classes/sources/ems_file_source/update_source_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/ems_file_source/update_source_editor.tsx @@ -15,7 +15,7 @@ import { OnSourceChangeArgs } from '../../../connected_components/layer_panel/vi interface Props { layerId: string; - onChange: (args: OnSourceChangeArgs) => void; + onChange: (...args: OnSourceChangeArgs) => void; source: IEmsFileSource; tooltipFields: IField[]; } diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx index ca4638fafab8c..b8f6413fc45c3 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx @@ -8,15 +8,26 @@ import React, { Fragment, Component, ChangeEvent } from 'react'; import { EuiFieldText, EuiFormRow } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; +import _ from 'lodash'; import { MAX_ZOOM, MIN_ZOOM } from '../../../../common/constants'; import { ValidatedDualRange, Value } from '../../../../../../../src/plugins/kibana_react/public'; import { MVTFieldConfigEditor } from './mvt_field_config_editor'; import { MVTFieldDescriptor } from '../../../../common/descriptor_types'; +export type MVTSettings = { + layerName: string; + fields: MVTFieldDescriptor[]; + minSourceZoom: number; + maxSourceZoom: number; +}; + +export interface State { + currentSettings: MVTSettings; + prevSettings: MVTSettings; +} + export interface Props { - handleLayerNameInputChange: (layerName: string) => void; - handleFieldChange: (fields: MVTFieldDescriptor[]) => void; - handleZoomRangeChange: ({ minSourceZoom: number, maxSourceZoom: number }) => void; + handleChange: (args: State) => void; layerName: string; fields: MVTFieldDescriptor[]; minSourceZoom: number; @@ -24,19 +35,49 @@ export interface Props { } export class MVTSingleLayerSourceSettings extends Component { + state = { + currentSettings: null, + prevSettings: null, + }; + + static getDerivedStateFromProps(nextProps, prevState) { + const newSettings = { + layerName: nextProps.layerName, + fields: nextProps.fields, + minSourceZoom: nextProps.minSourceZoom, + maxSourceZoom: nextProps.maxSourceZoom, + }; + + if (_.isEqual(newSettings, prevState.prevSettings)) { + return null; + } + + return { + prevSettings: newSettings, + currentSettings: newSettings, + }; + } + + _handleChange = _.debounce(() => { + this.props.handleChange(this.state.currentSettings); + }, 200); + _handleLayerNameInputChange = (e: ChangeEvent) => { const layerName = e.target.value; - this.props.handleLayerNameInputChange(layerName); + const currentSettings = { ...this.state.currentSettings, layerName }; + this.setState({ currentSettings }, this._handleChange); }; _handleFieldChange = (fields: MVTFieldDescriptor[]) => { - this.props.handleFieldChange(fields); + const currentSettings = { ...this.state.currentSettings, fields }; + this.setState({ currentSettings }, this._handleChange); }; _handleZoomRangeChange = (e: Value) => { const minSourceZoom = parseInt(e[0] as string, 10); const maxSourceZoom = parseInt(e[1] as string, 10); - this.props.handleZoomRangeChange({ minSourceZoom, maxSourceZoom }); + const currentSettings = { ...this.state.currentSettings, minSourceZoom, maxSourceZoom }; + this.setState({ currentSettings }, this._handleChange); }; render() { @@ -50,7 +91,10 @@ export class MVTSingleLayerSourceSettings extends Component { } )} > - + { } )} > - + ); diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx index 111024eb8f143..06282e3578aeb 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx @@ -66,34 +66,13 @@ export class MVTSingleLayerVectorSourceEditor extends Component { ); }; - _handleLayerNameInputChange = (layerName: string) => { - this.setState( - { - layerName, - }, - () => this._sourceConfigChange() - ); - }; - - _handleFieldChange = (fields: MVTFieldDescriptor[]) => { - this.setState( - { - fields, - }, - () => this._sourceConfigChange() - ); - }; - - _handleZoomRangeChange = ({ - minSourceZoom, - maxSourceZoom, - }: { + _handleChange = (state: { + layerName: string; + fields: MVTFieldDescriptor[]; minSourceZoom: number; maxSourceZoom: number; }) => { - if (this.state.minSourceZoom !== minSourceZoom || this.state.maxSourceZoom !== maxSourceZoom) { - this.setState({ minSourceZoom, maxSourceZoom }, () => this._sourceConfigChange()); - } + this.setState(state, () => this._sourceConfigChange()); }; render() { @@ -108,9 +87,7 @@ export class MVTSingleLayerVectorSourceEditor extends Component { void; + onChange: (...args: OnSourceChangeArgs) => void; source: MVTSingleLayerVectorSource; } @@ -54,23 +55,18 @@ export class UpdateSourceEditor extends Component { this.props.onChange({ propName: 'tooltipProperties', value: propertyNames }); }; - _handleLayerNameInputChange = (layerName: string) => { - this.props.onChange({ propName: 'layerName', value: layerName }); - }; - - _handleFieldChange = (fields: MVTFieldDescriptor[]) => { - this.props.onChange({ propName: 'fields', value: fields }); - }; - - _handleZoomRangeChange = ({ - minSourceZoom, - maxSourceZoom, - }: { + _handleChange = (state: { + layerName: string; + fields: MVTFieldDescriptor[]; minSourceZoom: number; maxSourceZoom: number; }) => { - this.props.onChange({ propName: 'minSourceZoom', value: minSourceZoom }); - this.props.onChange({ propName: 'maxSourceZoom', value: maxSourceZoom }); + this.props.onChange( + { propName: 'layerName', value: state.layerName }, + { propName: 'fields', value: state.fields }, + { propName: 'minSourceZoom', value: state.minSourceZoom }, + { propName: 'maxSourceZoom', value: state.maxSourceZoom } + ); }; _renderSourceSettingsCard() { @@ -91,9 +87,7 @@ export class UpdateSourceEditor extends Component { { - this.props.updateSourceProp(this.props.selectedLayer.getId(), propName, value, newLayerType); + _onSourceChange = (...args) => { + for (let i = 0; i < args.length; i++) { + const { propName, value, newLayerType } = args[i]; + this.props.updateSourceProp(this.props.selectedLayer.getId(), propName, value, newLayerType); + } }; _renderFilterSection() { From 907c7b03c4cf32d985fd571d837afba5b2baf4ce Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Tue, 23 Jun 2020 01:38:26 -0400 Subject: [PATCH 17/97] return null --- .../mvt_single_layer_vector_source.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx index a64498094d8f3..4d135ecd0a610 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx @@ -81,7 +81,11 @@ export class MVTSingleLayerVectorSource extends AbstractSource } getFieldByName(fieldName: string): IField | null { - return this.createField({ fieldName }); + try { + return this.createField({ fieldName }); + } catch (e) { + return null; + } } createField({ fieldName }: { fieldName: string }): IField { From fb3a399f5324dcd2b90b94ef60ea9723841b23fb Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Tue, 23 Jun 2020 01:41:40 -0400 Subject: [PATCH 18/97] slight rearrangement --- .../mvt_single_layer_source_settings.tsx | 55 +++++++++++-------- 1 file changed, 32 insertions(+), 23 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx index b8f6413fc45c3..0ef08dd2b0f97 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx @@ -98,7 +98,38 @@ export class MVTSingleLayerSourceSettings extends Component { + + + { onChange={this._handleFieldChange} /> - ); } From a689ecbf41ca26936ab7b0bfc4efae994dc865ec Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Tue, 23 Jun 2020 01:46:43 -0400 Subject: [PATCH 19/97] tooltip guard --- .../mvt_single_layer_vector_source.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx index 4d135ecd0a610..2d31f5b4eda2a 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx @@ -63,9 +63,11 @@ export class MVTSingleLayerVectorSource extends AbstractSource ) { super(sourceDescriptor, inspectorAdapters); this._descriptor = MVTSingleLayerVectorSource.createDescriptor(sourceDescriptor); - this._tooltipFields = this._descriptor.tooltipProperties.map((fieldName) => { - return this.createField({ fieldName }); - }); + this._tooltipFields = this._descriptor.tooltipProperties + .map((fieldName) => { + return this.getFieldByName(fieldName); + }) + .filter((f) => f !== null); } renderSourceSettingsEditor({ onChange }) { From 633358d10a9a4982200e3b1127e467657d5627ca Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Tue, 23 Jun 2020 12:00:26 -0400 Subject: [PATCH 20/97] minor tweaks --- .../es_search_source/load_index_settings.js | 1 - .../mvt_field_config_editor.tsx | 6 ++-- .../mvt_single_layer_source_settings.tsx | 28 ++++++++++--------- .../mvt_single_layer_vector_source_editor.tsx | 1 + .../update_source_editor.tsx | 1 + 5 files changed, 21 insertions(+), 16 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/sources/es_search_source/load_index_settings.js b/x-pack/plugins/maps/public/classes/sources/es_search_source/load_index_settings.js index d5d24da225232..d4a8a31c1b060 100644 --- a/x-pack/plugins/maps/public/classes/sources/es_search_source/load_index_settings.js +++ b/x-pack/plugins/maps/public/classes/sources/es_search_source/load_index_settings.js @@ -50,7 +50,6 @@ async function fetchIndexSettings(indexPatternTitle) { toastDisplayed = true; toasts.addWarning(warningMsg); } - console.warn(warningMsg); return { maxResultWindow: DEFAULT_MAX_RESULT_WINDOW, maxInnerResultWindow: DEFAULT_MAX_INNER_RESULT_WINDOW, diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx index ab7f79b426ff7..ae56fe25b52d1 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx @@ -13,6 +13,7 @@ import { EuiFlexItem, EuiSuperSelect, EuiFieldText, + EuiSpacer, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { MVTFieldDescriptor, MVTFieldType } from '../../../../common/descriptor_types'; @@ -77,7 +78,7 @@ export class MVTFieldConfigEditor extends Component { onChange(value)} + onChange={(value) => onChange(value)} /> ); } @@ -97,7 +98,7 @@ export class MVTFieldConfigEditor extends Component { _renderFieldConfig() { return this.props.fields.map((mvtFieldConfig: MVTFieldDescriptor, index: number) => { return ( - + {this._renderFieldNameInput(mvtFieldConfig, index)} {this._renderFieldTypeDropDown(mvtFieldConfig, index)} @@ -124,6 +125,7 @@ export class MVTFieldConfigEditor extends Component { return ( {this._renderFieldConfig()} + {'Add field'} diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx index 0ef08dd2b0f97..d1a4560da746f 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx @@ -32,6 +32,7 @@ export interface Props { fields: MVTFieldDescriptor[]; minSourceZoom: number; maxSourceZoom: number; + includeFields: boolean; } export class MVTSingleLayerSourceSettings extends Component { @@ -81,6 +82,19 @@ export class MVTSingleLayerSourceSettings extends Component { }; render() { + const fieldEditor = this.props.includeFields ? ( + + + + ) : null; + return ( { )} /> - - - + {fieldEditor} ); } diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx index 06282e3578aeb..83fb5537665f3 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx @@ -92,6 +92,7 @@ export class MVTSingleLayerVectorSourceEditor extends Component { fields={this.state.fields} minSourceZoom={this.state.minSourceZoom} maxSourceZoom={this.state.maxSourceZoom} + includeFields={false} /> ); diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx index 9bceac62295b2..143beefa4a2fd 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx @@ -92,6 +92,7 @@ export class UpdateSourceEditor extends Component { fields={fields} minSourceZoom={this.props.source.getMinZoom()} maxSourceZoom={this.props.source.getMaxZoom()} + includeFields={true} /> From 9f737f6f2c09d6920d1eb5e3b544aee16cdc876a Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Tue, 23 Jun 2020 14:31:38 -0400 Subject: [PATCH 21/97] feedback --- x-pack/plugins/maps/common/constants.ts | 5 +++++ .../maps/common/descriptor_types/sources.ts | 14 ++++++++------ .../plugins/maps/public/classes/fields/field.ts | 8 +++++--- .../maps/public/classes/fields/mvt_field.ts | 8 ++++---- .../plugins/maps/public/classes/layers/layer.tsx | 4 ++++ .../classes/layers/tile_layer/tile_layer.js | 6 +++--- .../tiled_vector_layer/tiled_vector_layer.tsx | 16 ++-------------- .../classes/layers/vector_layer/vector_layer.js | 4 ++-- .../mvt_field_config_editor.tsx | 7 ++++--- .../mvt_single_layer_vector_source_editor.tsx | 2 -- .../update_source_editor.tsx | 1 - .../vector/properties/dynamic_text_property.js | 3 ++- 12 files changed, 39 insertions(+), 39 deletions(-) diff --git a/x-pack/plugins/maps/common/constants.ts b/x-pack/plugins/maps/common/constants.ts index be3de22fa011e..503a3e8fde796 100644 --- a/x-pack/plugins/maps/common/constants.ts +++ b/x-pack/plugins/maps/common/constants.ts @@ -220,6 +220,11 @@ export enum SCALING_TYPES { export const RGBA_0000 = 'rgba(0,0,0,0)'; +export enum MVTFieldType { + STRING = 'String', + NUMBER = 'Number', +} + export const SPATIAL_FILTERS_LAYER_ID = 'SPATIAL_FILTERS_LAYER_ID'; export enum INITIAL_LOCATION { diff --git a/x-pack/plugins/maps/common/descriptor_types/sources.ts b/x-pack/plugins/maps/common/descriptor_types/sources.ts index 2653848004379..47cfd98b48150 100644 --- a/x-pack/plugins/maps/common/descriptor_types/sources.ts +++ b/x-pack/plugins/maps/common/descriptor_types/sources.ts @@ -6,7 +6,14 @@ /* eslint-disable @typescript-eslint/consistent-type-definitions */ import { Query } from 'src/plugins/data/public'; -import { AGG_TYPE, GRID_RESOLUTION, RENDER_AS, SORT_ORDER, SCALING_TYPES } from '../constants'; +import { + AGG_TYPE, + GRID_RESOLUTION, + RENDER_AS, + SORT_ORDER, + SCALING_TYPES, + MVTFieldType, +} from '../constants'; import { StyleDescriptor, VectorStyleDescriptor } from './style_property_descriptor_types'; import { DataRequestDescriptor } from './data_request_descriptor_types'; @@ -95,11 +102,6 @@ export type XYZTMSSourceDescriptor = AbstractSourceDescriptor & urlTemplate: string; }; -export enum MVTFieldType { - String = 'String', - Number = 'Number', -} - export type MVTFieldDescriptor = { name: string; type: MVTFieldType; diff --git a/x-pack/plugins/maps/public/classes/fields/field.ts b/x-pack/plugins/maps/public/classes/fields/field.ts index e6032c3f55675..410b38e79ffe4 100644 --- a/x-pack/plugins/maps/public/classes/fields/field.ts +++ b/x-pack/plugins/maps/public/classes/fields/field.ts @@ -20,7 +20,12 @@ export interface IField { isValid(): boolean; getOrdinalFieldMetaRequest(): Promise; getCategoricalFieldMetaRequest(size: number): Promise; + + // Determines whether Maps-app can automatically determine the domain of the field-values + // if this is not the case (e.g. for .mvt tiled data), + // then styling properties that require the domain to be known cannot use this property. supportsAutoDomain(): boolean; + supportsFieldMeta(): boolean; } @@ -83,9 +88,6 @@ export class AbstractField implements IField { } supportsAutoDomain(): boolean { - // Determines whether MAps can determine the domain of the field-values - // if this is not the case (e.g. for non-geojson data), than styling properties that require the domain to be known - // cannot use this property. return true; } } diff --git a/x-pack/plugins/maps/public/classes/fields/mvt_field.ts b/x-pack/plugins/maps/public/classes/fields/mvt_field.ts index bb56379953e84..8f9856ef1da46 100644 --- a/x-pack/plugins/maps/public/classes/fields/mvt_field.ts +++ b/x-pack/plugins/maps/public/classes/fields/mvt_field.ts @@ -5,9 +5,9 @@ */ import { AbstractField, IField } from './field'; -import { FIELD_ORIGIN } from '../../../common/constants'; +import { FIELD_ORIGIN, MVTFieldType } from '../../../common/constants'; import { ITiledSingleLayerVectorSource, IVectorSource } from '../sources/vector_source'; -import { MVTFieldDescriptor, MVTFieldType } from '../../../common/descriptor_types'; +import { MVTFieldDescriptor } from '../../../common/descriptor_types'; export class MVTField extends AbstractField implements IField { private readonly _source: ITiledSingleLayerVectorSource; @@ -40,9 +40,9 @@ export class MVTField extends AbstractField implements IField { } async getDataType(): Promise { - if (this._type === MVTFieldType.String) { + if (this._type === MVTFieldType.STRING) { return 'string'; - } else if (this._type === MVTFieldType.Number) { + } else if (this._type === MVTFieldType.NUMBER) { return 'number'; } else { throw new Error(`Unrecognized MVT field-type ${this._type}`); diff --git a/x-pack/plugins/maps/public/classes/layers/layer.tsx b/x-pack/plugins/maps/public/classes/layers/layer.tsx index d62b8340767bb..90d712dc03990 100644 --- a/x-pack/plugins/maps/public/classes/layers/layer.tsx +++ b/x-pack/plugins/maps/public/classes/layers/layer.tsx @@ -325,6 +325,10 @@ export class AbstractLayer implements ILayer { return this._source.getMinZoom(); } + _getMbSourceId() { + return this.getId(); + } + _requiresPrevSourceCleanup(mbMap: unknown) { return false; } diff --git a/x-pack/plugins/maps/public/classes/layers/tile_layer/tile_layer.js b/x-pack/plugins/maps/public/classes/layers/tile_layer/tile_layer.js index 02df8acbfffad..3e2009c24a2e4 100644 --- a/x-pack/plugins/maps/public/classes/layers/tile_layer/tile_layer.js +++ b/x-pack/plugins/maps/public/classes/layers/tile_layer/tile_layer.js @@ -74,8 +74,8 @@ export class TileLayer extends AbstractLayer { return; } - const sourceId = this.getId(); - mbMap.addSource(sourceId, { + const mbSourceId = this._getMbSourceId(); + mbMap.addSource(mbSourceId, { type: 'raster', tiles: [tmsSourceData.url], tileSize: 256, @@ -85,7 +85,7 @@ export class TileLayer extends AbstractLayer { mbMap.addLayer({ id: mbLayerId, type: 'raster', - source: sourceId, + source: mbSourceId, minzoom: this._descriptor.minZoom, maxzoom: this._descriptor.maxZoom, }); diff --git a/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx index 86909e8bd5f65..c832d1fbf62a2 100644 --- a/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx +++ b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx @@ -10,10 +10,8 @@ import { Feature, GeoJsonProperties } from 'geojson'; import { VectorStyle } from '../../styles/vector/vector_style'; import { SOURCE_DATA_REQUEST_ID, LAYER_TYPE } from '../../../../common/constants'; import { VectorLayer, VectorLayerArguments } from '../vector_layer/vector_layer'; -import { canSkipSourceUpdate } from '../../util/can_skip_fetch'; import { ITiledSingleLayerVectorSource } from '../../sources/vector_source'; import { DataRequestContext } from '../../../actions'; -import { ISource } from '../../sources/source'; import { TiledSingleLayerVectorSourceDescriptor, VectorLayerDescriptor, @@ -21,8 +19,6 @@ import { } from '../../../../common/descriptor_types'; import { MVTSingleLayerVectorSourceConfig } from '../../sources/mvt_single_layer_vector_source/types'; -const DELIMITER = '~'; - export class TiledVectorLayer extends VectorLayer { static type = LAYER_TYPE.TILED_VECTOR; @@ -95,14 +91,6 @@ export class TiledVectorLayer extends VectorLayer { await this._syncMVTUrlTemplate(syncContext); } - // getId() { - // return this._descriptor.id + DELIMITER + this._source.getLayerName() + DELIMITER; - // } - - _getMbSourceId(): string { - return this.getId(); - } - _syncSourceBindingWithMb(mbMap: unknown) { // @ts-expect-error const mbSource = mbMap.getSource(this._getMbSourceId()); @@ -174,7 +162,6 @@ export class TiledVectorLayer extends VectorLayer { return false; } - // check if layername has changed const isSourceDifferent = mbTileSource.tiles[0] !== tiledSourceMeta.urlTemplate || mbTileSource.minzoom !== tiledSourceMeta.minSourceZoom || @@ -185,10 +172,11 @@ export class TiledVectorLayer extends VectorLayer { } const layerIds = this.getMbLayerIds(); - // just check the first layer for (let i = 0; i < layerIds.length; i++) { const mbLayer = mbMap.getLayer(layerIds[i]); if (mbLayer && mbLayer.sourceLayer !== tiledSourceMeta.layerName) { + // If the source-pointer of one of the layers is stale, they will all be stale. + // In this case, all the mb-layers need to be removed and re-added. return true; } } diff --git a/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.js b/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.js index 355df206aa2da..44c53149c8753 100644 --- a/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.js +++ b/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.js @@ -822,9 +822,9 @@ export class VectorLayer extends AbstractLayer { } _syncSourceBindingWithMb(mbMap) { - const mbSource = mbMap.getSource(this.getId()); + const mbSource = mbMap.getSource(this._getMbSourceId()); if (!mbSource) { - mbMap.addSource(this.getId(), { + mbMap.addSource(this._getMbSourceId(), { type: 'geojson', data: EMPTY_FEATURE_COLLECTION, }); diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx index ae56fe25b52d1..f40340a561e1c 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx @@ -16,12 +16,13 @@ import { EuiSpacer, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { MVTFieldDescriptor, MVTFieldType } from '../../../../common/descriptor_types'; +import { MVTFieldDescriptor } from '../../../../common/descriptor_types'; import { FieldIcon } from '../../../../../../../src/plugins/kibana_react/public'; +import { MVTFieldType } from '../../../../common/constants'; const FIELD_TYPE_OPTIONS = [ { - value: MVTFieldType.String, + value: MVTFieldType.STRING, inputDisplay: ( @@ -30,7 +31,7 @@ const FIELD_TYPE_OPTIONS = [ ), }, { - value: MVTFieldType.Number, + value: MVTFieldType.NUMBER, inputDisplay: ( diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx index 83fb5537665f3..f7b1b38df170c 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx @@ -10,8 +10,6 @@ import _ from 'lodash'; import { EuiFieldText, EuiFormRow } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { MAX_ZOOM, MIN_ZOOM } from '../../../../common/constants'; -import { ValidatedDualRange, Value } from '../../../../../../../src/plugins/kibana_react/public'; -import { MVTFieldConfigEditor } from './mvt_field_config_editor'; import { MVTFieldDescriptor, TiledSingleLayerVectorSourceDescriptor, diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx index 143beefa4a2fd..20410682b494d 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx @@ -12,7 +12,6 @@ import { FormattedMessage } from '@kbn/i18n/react'; import { TooltipSelector } from '../../../components/tooltip_selector'; import { MVTField } from '../../fields/mvt_field'; import { MVTSingleLayerVectorSource } from './mvt_single_layer_vector_source'; -import { MVTSingleLayerVectorSourceEditor } from './mvt_single_layer_vector_source_editor'; import { MVTSingleLayerSourceSettings } from './mvt_single_layer_source_settings'; import { MVTFieldDescriptor } from '../../../../common/descriptor_types'; import { OnSourceChangeArgs } from '../../../connected_components/layer_panel/view'; diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_text_property.js b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_text_property.js index cbbc55bc19b47..ffe0d73a19bb5 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_text_property.js +++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_text_property.js @@ -10,7 +10,8 @@ import { getComputedFieldName } from '../style_util'; export class DynamicTextProperty extends DynamicStyleProperty { syncTextFieldWithMb(mbLayerId, mbMap) { if (this._field && this._field.isValid()) { - // Fields that don't support auto-domain, are not normalized with a field-formatter and stored into a computed-field + // Fields that support auto-domain are normalized with a field-formatter and stored into a computed-field + // Otherwise, the raw value is just carried over and no computed field is created. const targetName = this._field.supportsAutoDomain() ? getComputedFieldName(this._styleName, this._field.getName()) : this._field.getName(); From 42a250bd564a29749479a4d07aa76af3be7ec586 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Tue, 23 Jun 2020 15:30:47 -0400 Subject: [PATCH 22/97] ts fixes --- .../maps/common/descriptor_types/sources.ts | 5 ++++- .../mvt_single_layer_source_settings.tsx | 2 +- .../mvt_single_layer_vector_source.tsx | 15 +++++++++------ .../mvt_single_layer_vector_source_editor.tsx | 4 ++-- .../update_source_editor.tsx | 18 ++++++------------ .../maps/public/classes/sources/source.ts | 2 +- 6 files changed, 23 insertions(+), 23 deletions(-) diff --git a/x-pack/plugins/maps/common/descriptor_types/sources.ts b/x-pack/plugins/maps/common/descriptor_types/sources.ts index 47cfd98b48150..0786c3349f02e 100644 --- a/x-pack/plugins/maps/common/descriptor_types/sources.ts +++ b/x-pack/plugins/maps/common/descriptor_types/sources.ts @@ -107,7 +107,7 @@ export type MVTFieldDescriptor = { type: MVTFieldType; }; -export type TiledSingleLayerVectorSourceDescriptor = AbstractSourceDescriptor & { +export type TiledSingleLayerVectorSourceSettings = { urlTemplate: string; layerName: string; @@ -126,6 +126,9 @@ export type TiledSingleLayerVectorSourceDescriptor = AbstractSourceDescriptor & tooltipProperties: string[]; }; +export type TiledSingleLayerVectorSourceDescriptor = AbstractSourceDescriptor & + TiledSingleLayerVectorSourceSettings; + export type JoinDescriptor = { leftField: string; right: ESTermSourceDescriptor; diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx index d1a4560da746f..3b1a96b79e1bc 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx @@ -27,7 +27,7 @@ export interface State { } export interface Props { - handleChange: (args: State) => void; + handleChange: (args: MVTSettings) => void; layerName: string; fields: MVTFieldDescriptor[]; minSourceZoom: number; diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx index 2d31f5b4eda2a..3032841829c1e 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx @@ -8,11 +8,10 @@ import { i18n } from '@kbn/i18n'; import uuid from 'uuid/v4'; import React from 'react'; import { GeoJsonProperties, Geometry } from 'geojson'; -import { AbstractSource, ImmutableSourceProperty } from '../source'; +import { AbstractSource, ImmutableSourceProperty, SourceEditorArgs } from '../source'; import { BoundsFilters, GeoJsonWithMeta, ITiledSingleLayerVectorSource } from '../vector_source'; import { FIELD_ORIGIN, MAX_ZOOM, MIN_ZOOM, SOURCE_TYPES } from '../../../../common/constants'; import { VECTOR_SHAPE_TYPES } from '../vector_feature_types'; -import { IField } from '../../fields/field'; import { registerSource } from '../source_registry'; import { getDataSourceLabel, getUrlLabel } from '../../../../common/i18n_getters'; import { @@ -70,7 +69,11 @@ export class MVTSingleLayerVectorSource extends AbstractSource .filter((f) => f !== null); } - renderSourceSettingsEditor({ onChange }) { + async supportsFitToBounds() { + return false; + } + + renderSourceSettingsEditor({ onChange }: SourceEditorArgs) { return ( ); @@ -82,7 +85,7 @@ export class MVTSingleLayerVectorSource extends AbstractSource }); } - getFieldByName(fieldName: string): IField | null { + getFieldByName(fieldName: string): MVTField | null { try { return this.createField({ fieldName }); } catch (e) { @@ -90,7 +93,7 @@ export class MVTSingleLayerVectorSource extends AbstractSource } } - createField({ fieldName }: { fieldName: string }): IField { + createField({ fieldName }: { fieldName: string }): MVTField { const field = this._descriptor.fields.find((f: MVTFieldDescriptor) => { return f.name === fieldName; }); @@ -114,7 +117,7 @@ export class MVTSingleLayerVectorSource extends AbstractSource throw new Error('Does not implement getGeoJsonWithMeta'); } - async getFields(): Promise { + async getFields(): Promise { return this._descriptor.fields.map((field: MVTFieldDescriptor) => { return new MVTField({ fieldName: field.name, diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx index f7b1b38df170c..4e04eb14f1c37 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx @@ -12,12 +12,12 @@ import { i18n } from '@kbn/i18n'; import { MAX_ZOOM, MIN_ZOOM } from '../../../../common/constants'; import { MVTFieldDescriptor, - TiledSingleLayerVectorSourceDescriptor, + TiledSingleLayerVectorSourceSettings, } from '../../../../common/descriptor_types'; import { MVTSingleLayerSourceSettings } from './mvt_single_layer_source_settings'; export interface Props { - onSourceConfigChange: (sourceConfig: TiledSingleLayerVectorSourceDescriptor) => void; + onSourceConfigChange: (sourceConfig: TiledSingleLayerVectorSourceSettings) => void; } interface State { diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx index 20410682b494d..d052bd398be30 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx @@ -8,17 +8,16 @@ import React, { Component, Fragment } from 'react'; import { EuiTitle, EuiPanel, EuiSpacer } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; -// @ts-ignore import { TooltipSelector } from '../../../components/tooltip_selector'; import { MVTField } from '../../fields/mvt_field'; import { MVTSingleLayerVectorSource } from './mvt_single_layer_vector_source'; -import { MVTSingleLayerSourceSettings } from './mvt_single_layer_source_settings'; +import { MVTSettings, MVTSingleLayerSourceSettings } from './mvt_single_layer_source_settings'; import { MVTFieldDescriptor } from '../../../../common/descriptor_types'; import { OnSourceChangeArgs } from '../../../connected_components/layer_panel/view'; export interface Props { - tooltipFields: MVTFields[]; - onChange: (...args: OnSourceChangeArgs) => void; + tooltipFields: MVTField[]; + onChange: (...args: OnSourceChangeArgs[]) => void; source: MVTSingleLayerVectorSource; } @@ -32,7 +31,7 @@ export class UpdateSourceEditor extends Component { fields: null, }; - readonly _isMounted: boolean; + private _isMounted: boolean = false; componentDidMount() { this._isMounted = true; @@ -44,7 +43,7 @@ export class UpdateSourceEditor extends Component { } async _loadFields() { - const fields = await this.props.source.getFields(); + const fields: MVTField[] = (await this.props.source.getFields()) as MVTField[]; if (this._isMounted) { this.setState({ fields }); } @@ -54,12 +53,7 @@ export class UpdateSourceEditor extends Component { this.props.onChange({ propName: 'tooltipProperties', value: propertyNames }); }; - _handleChange = (state: { - layerName: string; - fields: MVTFieldDescriptor[]; - minSourceZoom: number; - maxSourceZoom: number; - }) => { + _handleChange = (state: MVTSettings) => { this.props.onChange( { propName: 'layerName', value: state.layerName }, { propName: 'fields', value: state.fields }, diff --git a/x-pack/plugins/maps/public/classes/sources/source.ts b/x-pack/plugins/maps/public/classes/sources/source.ts index a7bf6a19103f3..4ed1b2151b94c 100644 --- a/x-pack/plugins/maps/public/classes/sources/source.ts +++ b/x-pack/plugins/maps/public/classes/sources/source.ts @@ -17,7 +17,7 @@ import { MAX_ZOOM, MIN_ZOOM } from '../../../common/constants'; import { OnSourceChangeArgs } from '../../connected_components/layer_panel/view'; export type SourceEditorArgs = { - onChange: (args: OnSourceChangeArgs) => void; + onChange: (...args: OnSourceChangeArgs[]) => void; }; export type ImmutableSourceProperty = { From 9ef9277634450024d20a89a9967efb3087306db0 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Tue, 23 Jun 2020 15:43:14 -0400 Subject: [PATCH 23/97] ts fixes --- .../maps/common/descriptor_types/sources.ts | 6 ++-- .../mvt_single_layer_source_settings.tsx | 30 ++++++++++++------- .../mvt_single_layer_vector_source.tsx | 2 +- 3 files changed, 23 insertions(+), 15 deletions(-) diff --git a/x-pack/plugins/maps/common/descriptor_types/sources.ts b/x-pack/plugins/maps/common/descriptor_types/sources.ts index 0786c3349f02e..80f96a8ccfe63 100644 --- a/x-pack/plugins/maps/common/descriptor_types/sources.ts +++ b/x-pack/plugins/maps/common/descriptor_types/sources.ts @@ -91,7 +91,6 @@ export type KibanaTilemapSourceDescriptor = AbstractSourceDescriptor; export type WMSSourceDescriptor = AbstractSourceDescriptor & { serviceUrl: string; - layers: string; styles: string; attributionText: string; attributionUrl: string; @@ -123,11 +122,12 @@ export type TiledSingleLayerVectorSourceSettings = { maxSourceZoom: number; fields: MVTFieldDescriptor[]; - tooltipProperties: string[]; }; export type TiledSingleLayerVectorSourceDescriptor = AbstractSourceDescriptor & - TiledSingleLayerVectorSourceSettings; + TiledSingleLayerVectorSourceSettings & { + tooltipProperties: string[]; + }; export type JoinDescriptor = { leftField: string; diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx index 3b1a96b79e1bc..3ad215858cac3 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx @@ -36,11 +36,6 @@ export interface Props { } export class MVTSingleLayerSourceSettings extends Component { - state = { - currentSettings: null, - prevSettings: null, - }; - static getDerivedStateFromProps(nextProps, prevState) { const newSettings = { layerName: nextProps.layerName, @@ -64,20 +59,33 @@ export class MVTSingleLayerSourceSettings extends Component { }, 200); _handleLayerNameInputChange = (e: ChangeEvent) => { - const layerName = e.target.value; - const currentSettings = { ...this.state.currentSettings, layerName }; + const currentSettings = { + layerName: e.target.value, + minSourceZoom: this.state.currentSettings.minSourceZoom, + maxSourceZoom: this.state.currentSettings.maxSourceZoom, + fields: this.state.currentSettings.fields, + }; + this.setState({ currentSettings }, this._handleChange); }; _handleFieldChange = (fields: MVTFieldDescriptor[]) => { - const currentSettings = { ...this.state.currentSettings, fields }; + const currentSettings = { + layerName: this.state.currentSettings.layerName, + minSourceZoom: this.state.currentSettings.minSourceZoom, + maxSourceZoom: this.state.currentSettings.maxSourceZoom, + fields, + }; this.setState({ currentSettings }, this._handleChange); }; _handleZoomRangeChange = (e: Value) => { - const minSourceZoom = parseInt(e[0] as string, 10); - const maxSourceZoom = parseInt(e[1] as string, 10); - const currentSettings = { ...this.state.currentSettings, minSourceZoom, maxSourceZoom }; + const currentSettings = { + layerName: this.state.currentSettings.layerName, + fields: this.state.currentSettings.fields, + minSourceZoom: parseInt(e[0] as string, 10), + maxSourceZoom: parseInt(e[1] as string, 10), + }; this.setState({ currentSettings }, this._handleChange); }; diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx index 3032841829c1e..7c48db171df2b 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx @@ -66,7 +66,7 @@ export class MVTSingleLayerVectorSource extends AbstractSource .map((fieldName) => { return this.getFieldByName(fieldName); }) - .filter((f) => f !== null); + .filter((f) => f !== null) as MVTField[]; } async supportsFitToBounds() { From df3ac2cfb9da2fadd19058e1fd7f2df8968f5a72 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Tue, 23 Jun 2020 15:58:16 -0400 Subject: [PATCH 24/97] more ts fixes --- .../classes/layers/vector_layer/vector_layer.d.ts | 14 +++++++++++++- .../classes/layers/vector_layer/vector_layer.js | 8 ++++---- .../ems_file_source/update_source_editor.tsx | 2 +- .../layer_wizard.tsx | 6 ++---- .../mvt_field_config_editor.tsx | 2 +- .../mvt_single_layer_source_settings.tsx | 4 ++-- 6 files changed, 23 insertions(+), 13 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.d.ts b/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.d.ts index 4ed987cac70a8..6e7485dabbc0c 100644 --- a/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.d.ts +++ b/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.d.ts @@ -18,6 +18,7 @@ import { IJoin } from '../../joins/join'; import { IVectorStyle } from '../../styles/vector/vector_style'; import { IField } from '../../fields/field'; import { DataRequestContext } from '../../../actions'; +import { ITooltipProperty } from '../../tooltips/tooltip_property'; export type VectorLayerArguments = { source: IVectorSource; @@ -36,7 +37,10 @@ export interface IVectorLayer extends ILayer { id: string | number | undefined, meta: { mbProperties: GeoJsonProperties } ): Feature; - getPropertiesForTooltip(properties: GeoJsonProperties, featureId?: string | number); + getPropertiesForTooltip( + properties: GeoJsonProperties, + featureId?: string | number + ): Promise; } export class VectorLayer extends AbstractLayer implements IVectorLayer { @@ -81,4 +85,12 @@ export class VectorLayer extends AbstractLayer implements IVectorLayer { _setMbLinePolygonProperties(mbMap: unknown, mvtSourceLayer?: string): void; getSource(): IVectorSource; getStyle(): IVectorStyle; + getFeatureById( + id: string | number | undefined, + meta: { mbProperties: GeoJsonProperties } + ): Feature; + getPropertiesForTooltip( + properties: GeoJsonProperties, + featureId?: string | number + ): Promise; } diff --git a/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.js b/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.js index 44c53149c8753..a4be6080b7e60 100644 --- a/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.js +++ b/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.js @@ -892,16 +892,16 @@ export class VectorLayer extends AbstractLayer { async getPropertiesForTooltip(properties, featureId) { const vectorSource = this.getSource(); - let allTooltips = await vectorSource.filterAndFormatPropertiesToHtml(properties, featureId); - this._addJoinsToSourceTooltips(allTooltips); + let allProperties = await vectorSource.filterAndFormatPropertiesToHtml(properties, featureId); + this._addJoinsToSourceTooltips(allProperties); for (let i = 0; i < this.getJoins().length; i++) { const propsFromJoin = await this.getJoins()[i].filterAndFormatPropertiesForTooltip( properties ); - allTooltips = [...allTooltips, ...propsFromJoin]; + allProperties = [...allProperties, ...propsFromJoin]; } - return allTooltips; + return allProperties; } canShowTooltip() { diff --git a/x-pack/plugins/maps/public/classes/sources/ems_file_source/update_source_editor.tsx b/x-pack/plugins/maps/public/classes/sources/ems_file_source/update_source_editor.tsx index c82956f530fc0..7021859ee9827 100644 --- a/x-pack/plugins/maps/public/classes/sources/ems_file_source/update_source_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/ems_file_source/update_source_editor.tsx @@ -15,7 +15,7 @@ import { OnSourceChangeArgs } from '../../../connected_components/layer_panel/vi interface Props { layerId: string; - onChange: (...args: OnSourceChangeArgs) => void; + onChange: (...args: OnSourceChangeArgs[]) => void; source: IEmsFileSource; tooltipFields: IField[]; } diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/layer_wizard.tsx index 067c7f5a47ca3..44bf96fc29883 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/layer_wizard.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/layer_wizard.tsx @@ -6,14 +6,12 @@ import { i18n } from '@kbn/i18n'; import React from 'react'; -import { - MVTSingleLayerVectorSourceEditor, - MVTSingleLayerVectorSourceConfig, -} from './mvt_single_layer_vector_source_editor'; +import { MVTSingleLayerVectorSourceEditor } from './mvt_single_layer_vector_source_editor'; import { MVTSingleLayerVectorSource, sourceTitle } from './mvt_single_layer_vector_source'; import { LayerWizard, RenderWizardArguments } from '../../layers/layer_wizard_registry'; import { TiledVectorLayer } from '../../layers/tiled_vector_layer/tiled_vector_layer'; import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants'; +import { MVTSingleLayerVectorSourceConfig } from './types'; export const mvtVectorSourceWizardConfig: LayerWizard = { categories: [LAYER_WIZARD_CATEGORY.REFERENCE], diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx index f40340a561e1c..6d02870cb87aa 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx @@ -62,7 +62,7 @@ export class MVTFieldConfigEditor extends Component { _addField = () => { const newFields = this.props.fields.slice(); newFields.push({ - type: MVTFieldType.String, + type: MVTFieldType.STRING, name: 'Foobar', }); this.props.onChange(newFields); diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx index 3ad215858cac3..001f2ccff8e1a 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx @@ -36,7 +36,7 @@ export interface Props { } export class MVTSingleLayerSourceSettings extends Component { - static getDerivedStateFromProps(nextProps, prevState) { + static getDerivedStateFromProps(nextProps: Props, prevState: State) { const newSettings = { layerName: nextProps.layerName, fields: nextProps.fields, @@ -44,7 +44,7 @@ export class MVTSingleLayerSourceSettings extends Component { maxSourceZoom: nextProps.maxSourceZoom, }; - if (_.isEqual(newSettings, prevState.prevSettings)) { + if (prevState && _.isEqual(newSettings, prevState.prevSettings)) { return null; } From d0994af610f8c9ef1f999c632608c3263a4bc114 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Tue, 23 Jun 2020 16:51:52 -0400 Subject: [PATCH 25/97] ts fixes --- .../maps/public/classes/layers/layer.tsx | 5 +--- .../tiled_vector_layer/tiled_vector_layer.tsx | 23 +++++++++++-------- .../layers/vector_layer/vector_layer.d.ts | 4 ++-- .../layers/vector_layer/vector_layer.js | 2 +- .../layer_wizard.tsx | 4 ++-- .../mvt_single_layer_vector_source.tsx | 20 +++++++++------- .../sources/vector_source/vector_source.d.ts | 8 +++++++ 7 files changed, 40 insertions(+), 26 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/layers/layer.tsx b/x-pack/plugins/maps/public/classes/layers/layer.tsx index 90d712dc03990..e122d1cda3ed9 100644 --- a/x-pack/plugins/maps/public/classes/layers/layer.tsx +++ b/x-pack/plugins/maps/public/classes/layers/layer.tsx @@ -339,15 +339,12 @@ export class AbstractLayer implements ILayer { const mbStyle = mbMap.getStyle(); // @ts-expect-error mbStyle.layers.forEach((mbLayer) => { - // @ts-expect-error if (this.ownsMbLayerId(mbLayer.id)) { // @ts-expect-error mbMap.removeLayer(mbLayer.id); } }); - // @ts-expect-error Object.keys(mbStyle.sources).some((mbSourceId) => { - // @ts-expect-error if (this.ownsMbSourceId(mbSourceId)) { // @ts-expect-error mbMap.removeSource(mbSourceId); @@ -433,7 +430,7 @@ export class AbstractLayer implements ILayer { throw new Error('Should implement AbstractLayer#ownsMbLayerId'); } - ownsMbSourceId(sourceId: string): boolean { + ownsMbSourceId(mbSourceId: string): boolean { throw new Error('Should implement AbstractLayer#ownsMbSourceId'); } diff --git a/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx index c832d1fbf62a2..b7a19364d1c9d 100644 --- a/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx +++ b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx @@ -13,7 +13,6 @@ import { VectorLayer, VectorLayerArguments } from '../vector_layer/vector_layer' import { ITiledSingleLayerVectorSource } from '../../sources/vector_source'; import { DataRequestContext } from '../../../actions'; import { - TiledSingleLayerVectorSourceDescriptor, VectorLayerDescriptor, VectorSourceRequestMeta, } from '../../../../common/descriptor_types'; @@ -105,7 +104,7 @@ export class TiledVectorLayer extends VectorLayer { return; } - const sourceMeta: TiledSingleLayerVectorSourceDescriptor | null = sourceDataRequest.getData() as MVTSingleLayerVectorSourceConfig; + const sourceMeta: MVTSingleLayerVectorSourceConfig | null = sourceDataRequest.getData() as MVTSingleLayerVectorSourceConfig; if (!sourceMeta) { return; } @@ -120,8 +119,8 @@ export class TiledVectorLayer extends VectorLayer { }); } - ownsMbSourceId(mbSourceId): boolean { - return mbSourceId === this._getMbSourceId(); + ownsMbSourceId(mbSourceId: string): boolean { + return this._getMbSourceId() === mbSourceId; } _syncStylePropertiesWithMb(mbMap: unknown) { @@ -135,8 +134,7 @@ export class TiledVectorLayer extends VectorLayer { if (!sourceDataRequest) { return; } - const sourceMeta: TiledSingleLayerVectorSourceDescriptor = sourceDataRequest.getData() as MVTSingleLayerVectorSourceConfig; - + const sourceMeta: MVTSingleLayerVectorSourceConfig = sourceDataRequest.getData() as MVTSingleLayerVectorSourceConfig; if (sourceMeta.layerName === '') { return; } @@ -156,7 +154,7 @@ export class TiledVectorLayer extends VectorLayer { if (!dataRequest) { return false; } - const tiledSourceMeta: TiledSingleLayerVectorSourceDescriptor | null = dataRequest.getData() as MVTSingleLayerVectorSourceConfig; + const tiledSourceMeta: MVTSingleLayerVectorSourceConfig | null = dataRequest.getData() as MVTSingleLayerVectorSourceConfig; if (!tiledSourceMeta) { return false; @@ -173,6 +171,7 @@ export class TiledVectorLayer extends VectorLayer { const layerIds = this.getMbLayerIds(); for (let i = 0; i < layerIds.length; i++) { + // @ts-expect-error const mbLayer = mbMap.getLayer(layerIds[i]); if (mbLayer && mbLayer.sourceLayer !== tiledSourceMeta.layerName) { // If the source-pointer of one of the layers is stale, they will all be stale. @@ -202,10 +201,16 @@ export class TiledVectorLayer extends VectorLayer { getFeatureById( id: string | number | undefined, meta: { mbProperties: GeoJsonProperties } - ): Feature { + ): Feature | null { + const geometry = this._source.getFeatureGeometry(id, meta.mbProperties); + if (geometry === null) { + return null; + } + return { + type: 'Feature', properties: this._source.getFeatureProperties(id, meta.mbProperties), - geometry: this._source.getFeatureGeometry(id, meta.mbProperties), + geometry, id, }; } diff --git a/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.d.ts b/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.d.ts index 6e7485dabbc0c..74d382e0d7a80 100644 --- a/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.d.ts +++ b/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.d.ts @@ -36,7 +36,7 @@ export interface IVectorLayer extends ILayer { getFeatureById( id: string | number | undefined, meta: { mbProperties: GeoJsonProperties } - ): Feature; + ): Feature | null; getPropertiesForTooltip( properties: GeoJsonProperties, featureId?: string | number @@ -88,7 +88,7 @@ export class VectorLayer extends AbstractLayer implements IVectorLayer { getFeatureById( id: string | number | undefined, meta: { mbProperties: GeoJsonProperties } - ): Feature; + ): Feature | null; getPropertiesForTooltip( properties: GeoJsonProperties, featureId?: string | number diff --git a/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.js b/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.js index a4be6080b7e60..ed69ff80d635f 100644 --- a/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.js +++ b/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.js @@ -913,7 +913,7 @@ export class VectorLayer extends AbstractLayer { getFeatureById(id) { const featureCollection = this._getSourceFeatureCollection(); if (!featureCollection) { - return; + return null; } return featureCollection.features.find((feature) => { diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/layer_wizard.tsx index 44bf96fc29883..6312b58c1c3c9 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/layer_wizard.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/layer_wizard.tsx @@ -11,7 +11,7 @@ import { MVTSingleLayerVectorSource, sourceTitle } from './mvt_single_layer_vect import { LayerWizard, RenderWizardArguments } from '../../layers/layer_wizard_registry'; import { TiledVectorLayer } from '../../layers/tiled_vector_layer/tiled_vector_layer'; import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants'; -import { MVTSingleLayerVectorSourceConfig } from './types'; +import { TiledSingleLayerVectorSourceSettings } from '../../../../common/descriptor_types'; export const mvtVectorSourceWizardConfig: LayerWizard = { categories: [LAYER_WIZARD_CATEGORY.REFERENCE], @@ -20,7 +20,7 @@ export const mvtVectorSourceWizardConfig: LayerWizard = { }), icon: 'grid', renderWizard: ({ previewLayers, mapColors }: RenderWizardArguments) => { - const onSourceConfigChange = (sourceConfig: MVTSingleLayerVectorSourceConfig) => { + const onSourceConfigChange = (sourceConfig: TiledSingleLayerVectorSourceSettings) => { const sourceDescriptor = MVTSingleLayerVectorSource.createDescriptor(sourceConfig); const layerDescriptor = TiledVectorLayer.createDescriptor({ sourceDescriptor }, mapColors); previewLayers([layerDescriptor]); diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx index 7c48db171df2b..54464be717184 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx @@ -40,14 +40,16 @@ export class MVTSingleLayerVectorSource extends AbstractSource maxSourceZoom, fields, tooltipProperties, - }: TiledSingleLayerVectorSourceDescriptor) { + }: Partial) { return { type: SOURCE_TYPES.MVT_SINGLE_LAYER, id: uuid(), - urlTemplate, - layerName, - minSourceZoom: Math.max(MIN_ZOOM, minSourceZoom), - maxSourceZoom: Math.min(MAX_ZOOM, maxSourceZoom), + urlTemplate: urlTemplate ? urlTemplate : '', + layerName: layerName ? layerName : '', + minSourceZoom: + typeof minSourceZoom === 'number' ? Math.max(MIN_ZOOM, minSourceZoom) : MIN_ZOOM, + maxSourceZoom: + typeof maxSourceZoom === 'number' ? Math.min(MAX_ZOOM, maxSourceZoom) : MAX_ZOOM, fields: fields ? fields : [], tooltipProperties: tooltipProperties ? tooltipProperties : [], }; @@ -193,13 +195,15 @@ export class MVTSingleLayerVectorSource extends AbstractSource } getFeatureProperties( - id: string | number, + id: string | number | undefined, mbProperties: GeoJsonProperties ): GeoJsonProperties | null { - // Just echo the properties back return mbProperties; } - getFeatureGeometry(id: string | number, mbProperties: GeoJsonProperties): Geometry | null { + getFeatureGeometry( + id: string | number | undefined, + mbProperties: GeoJsonProperties + ): Geometry | null { // Cannot get the raw geometry for a simple tiled service return null; } 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 979be5c8cee8f..f1063d7371e89 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 @@ -89,4 +89,12 @@ export interface ITiledSingleLayerVectorSource extends IVectorSource { getMinZoom(): number; getMaxZoom(): number; getLayerName(): string; + getFeatureProperties( + id: string | number | undefined, + mbProperties: GeoJsonProperties + ): GeoJsonProperties | null; + getFeatureGeometry( + id: string | number | undefined, + mbProperties: GeoJsonProperties + ): Geometry | null; } From a81a22aefaf5c2bf9462e5947a206e49a265f0e6 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Tue, 23 Jun 2020 17:04:47 -0400 Subject: [PATCH 26/97] jest test --- .../sources/mvt_single_layer_vector_source/layer_wizard.tsx | 2 +- .../map/mb/tooltip_control/tooltip_control.test.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/layer_wizard.tsx index 6312b58c1c3c9..1973570765295 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/layer_wizard.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/layer_wizard.tsx @@ -16,7 +16,7 @@ import { TiledSingleLayerVectorSourceSettings } from '../../../../common/descrip export const mvtVectorSourceWizardConfig: LayerWizard = { categories: [LAYER_WIZARD_CATEGORY.REFERENCE], description: i18n.translate('xpack.maps.source.mvtVectorSourceWizard', { - defaultMessage: 'Vector source wizard', + defaultMessage: '.mvt vector tiles', }), icon: 'grid', renderWizard: ({ previewLayers, mapColors }: RenderWizardArguments) => { diff --git a/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_control.test.js b/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_control.test.js index 31964c3395417..741088b4c428b 100644 --- a/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_control.test.js +++ b/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_control.test.js @@ -236,7 +236,7 @@ describe('TooltipControl', () => { sinon.assert.notCalled(closeOnClickTooltipStub); sinon.assert.calledWith(openOnClickTooltipStub, { - features: [{ id: 1, layerId: 'tfi3f' }], + features: [{ id: 1, layerId: 'tfi3f', meta: { mbProperties: { __kbn__feature_id__: 1 } } }], location: [100, 30], }); }); From 753fb303cbb63b27a2ea3febd54af7c6c4e8500e Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Wed, 24 Jun 2020 10:23:05 -0400 Subject: [PATCH 27/97] fix typo --- .../classes/sources/es_search_source/load_index_settings.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/x-pack/plugins/maps/public/classes/sources/es_search_source/load_index_settings.js b/x-pack/plugins/maps/public/classes/sources/es_search_source/load_index_settings.js index d4a8a31c1b060..45f5ec8a33a09 100644 --- a/x-pack/plugins/maps/public/classes/sources/es_search_source/load_index_settings.js +++ b/x-pack/plugins/maps/public/classes/sources/es_search_source/load_index_settings.js @@ -50,6 +50,8 @@ async function fetchIndexSettings(indexPatternTitle) { toastDisplayed = true; toasts.addWarning(warningMsg); } + + console.warn(warningMsg); return { maxResultWindow: DEFAULT_MAX_RESULT_WINDOW, maxInnerResultWindow: DEFAULT_MAX_INNER_RESULT_WINDOW, From 9a7ba7b80b16a4204082eca0335a5da3abecf1d4 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Wed, 24 Jun 2020 10:23:29 -0400 Subject: [PATCH 28/97] spacing --- .../classes/sources/es_search_source/load_index_settings.js | 1 - 1 file changed, 1 deletion(-) diff --git a/x-pack/plugins/maps/public/classes/sources/es_search_source/load_index_settings.js b/x-pack/plugins/maps/public/classes/sources/es_search_source/load_index_settings.js index 45f5ec8a33a09..d5d24da225232 100644 --- a/x-pack/plugins/maps/public/classes/sources/es_search_source/load_index_settings.js +++ b/x-pack/plugins/maps/public/classes/sources/es_search_source/load_index_settings.js @@ -50,7 +50,6 @@ async function fetchIndexSettings(indexPatternTitle) { toastDisplayed = true; toasts.addWarning(warningMsg); } - console.warn(warningMsg); return { maxResultWindow: DEFAULT_MAX_RESULT_WINDOW, From bc20cec8f0fa0d2cf4402bdc4b1c84d1fbafddad Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Wed, 24 Jun 2020 15:08:13 -0400 Subject: [PATCH 29/97] fix typing --- .../plugins/maps/common/descriptor_types/sources.ts | 1 + .../tiled_vector_layer/tiled_vector_layer.tsx | 13 +++++++++++-- .../classes/layers/vector_layer/vector_layer.js | 4 ++-- .../mvt_single_layer_vector_source.tsx | 1 + 4 files changed, 15 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/maps/common/descriptor_types/sources.ts b/x-pack/plugins/maps/common/descriptor_types/sources.ts index 80f96a8ccfe63..dfbb4a8ff929d 100644 --- a/x-pack/plugins/maps/common/descriptor_types/sources.ts +++ b/x-pack/plugins/maps/common/descriptor_types/sources.ts @@ -91,6 +91,7 @@ export type KibanaTilemapSourceDescriptor = AbstractSourceDescriptor; export type WMSSourceDescriptor = AbstractSourceDescriptor & { serviceUrl: string; + layers: string; styles: string; attributionText: string; attributionUrl: string; diff --git a/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx index b7a19364d1c9d..ffea1febe2e4e 100644 --- a/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx +++ b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx @@ -203,13 +203,22 @@ export class TiledVectorLayer extends VectorLayer { meta: { mbProperties: GeoJsonProperties } ): Feature | null { const geometry = this._source.getFeatureGeometry(id, meta.mbProperties); + const properties = this._source.getFeatureProperties(id, meta.mbProperties); if (geometry === null) { - return null; + return { + type: 'Feature', + properties, + id, + geometry: { + type: 'Point', + coordinates: [0, 0], + }, + }; } return { type: 'Feature', - properties: this._source.getFeatureProperties(id, meta.mbProperties), + properties, geometry, id, }; diff --git a/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.js b/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.js index ed69ff80d635f..0a4fcfc23060c 100644 --- a/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.js +++ b/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.js @@ -890,9 +890,9 @@ export class VectorLayer extends AbstractLayer { } } - async getPropertiesForTooltip(properties, featureId) { + async getPropertiesForTooltip(properties) { const vectorSource = this.getSource(); - let allProperties = await vectorSource.filterAndFormatPropertiesToHtml(properties, featureId); + let allProperties = await vectorSource.filterAndFormatPropertiesToHtml(properties); this._addJoinsToSourceTooltips(allProperties); for (let i = 0; i < this.getJoins().length; i++) { diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx index 54464be717184..5d96254487322 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx @@ -64,6 +64,7 @@ export class MVTSingleLayerVectorSource extends AbstractSource ) { super(sourceDescriptor, inspectorAdapters); this._descriptor = MVTSingleLayerVectorSource.createDescriptor(sourceDescriptor); + this._tooltipFields = this._descriptor.tooltipProperties .map((fieldName) => { return this.getFieldByName(fieldName); From f79904becd5c0dd708e39d716bd2e243df3d0276 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Wed, 24 Jun 2020 15:59:17 -0400 Subject: [PATCH 30/97] add unit test --- .../mvt_single_layer_vector_source.test.tsx | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.test.tsx diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.test.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.test.tsx new file mode 100644 index 0000000000000..230c086cd3935 --- /dev/null +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.test.tsx @@ -0,0 +1,25 @@ +/* + * 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 { MVTSingleLayerVectorSource } from './mvt_single_layer_vector_source'; +import { SOURCE_TYPES } from '../../../../common/constants'; +import { TiledSingleLayerVectorSourceDescriptor } from '../../../../common/descriptor_types'; + +const descriptor: TiledSingleLayerVectorSourceDescriptor = { + type: SOURCE_TYPES.MVT_SINGLE_LAYER, + urlTemplate: 'https://example.com/{x}/{y}/{z}.pbf', + layerName: 'foobar', + minSourceZoom: 4, + maxSourceZoom: 14, + fields: [], +}; +describe('xyz Tilemap Source', () => { + it('should echo configuration', async () => { + const source = new MVTSingleLayerVectorSource(descriptor); + const config = await source.getUrlTemplateWithMeta(); + expect(config.urlTemplate).toEqual(descriptor.urlTemplate); + }); +}); From 9b81fc113f7c9db4c14bf5c3082becc0b7e927d3 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Wed, 24 Jun 2020 16:16:28 -0400 Subject: [PATCH 31/97] add more tests --- .../mvt_single_layer_vector_source.test.tsx | 43 ++++++++++++++++++- 1 file changed, 41 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.test.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.test.tsx index 230c086cd3935..8b6b9c5c5c1cf 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.test.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.test.tsx @@ -5,7 +5,7 @@ */ import { MVTSingleLayerVectorSource } from './mvt_single_layer_vector_source'; -import { SOURCE_TYPES } from '../../../../common/constants'; +import { MVTFieldType, SOURCE_TYPES } from '../../../../common/constants'; import { TiledSingleLayerVectorSourceDescriptor } from '../../../../common/descriptor_types'; const descriptor: TiledSingleLayerVectorSourceDescriptor = { @@ -15,11 +15,50 @@ const descriptor: TiledSingleLayerVectorSourceDescriptor = { minSourceZoom: 4, maxSourceZoom: 14, fields: [], + tooltipProperties: [], }; -describe('xyz Tilemap Source', () => { + +describe('getUrlTemplateWithMeta', () => { it('should echo configuration', async () => { const source = new MVTSingleLayerVectorSource(descriptor); const config = await source.getUrlTemplateWithMeta(); expect(config.urlTemplate).toEqual(descriptor.urlTemplate); + expect(config.layerName).toEqual(descriptor.layerName); + expect(config.minSourceZoom).toEqual(descriptor.minSourceZoom); + expect(config.maxSourceZoom).toEqual(descriptor.maxSourceZoom); + }); +}); + +describe('filterAndFormatPropertiesToHtml', () => { + const descriptorWithFields = { + ...descriptor, + fields: [ + { + name: 'foo', + type: MVTFieldType.STRING, + }, + { + name: 'food', + type: MVTFieldType.STRING, + }, + { + name: 'fooz', + type: MVTFieldType.NUMBER, + }, + ], + tooltipProperties: ['foo', 'fooz'], + }; + + it('should get tooltipproperties', async () => { + const source = new MVTSingleLayerVectorSource(descriptorWithFields); + const tooltipProperties = await source.filterAndFormatPropertiesToHtml({ + foo: 'bar', + fooz: 123, + }); + expect(tooltipProperties.length).toEqual(2); + expect(tooltipProperties[0].getPropertyName()).toEqual('foo'); + expect(tooltipProperties[0].getHtmlDisplayValue()).toEqual('bar'); + expect(tooltipProperties[1].getPropertyName()).toEqual('fooz'); + expect(tooltipProperties[1].getHtmlDisplayValue()).toEqual('123'); }); }); From b249ce6b2c015998b68d08b527b9498ab0a1563a Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Wed, 24 Jun 2020 16:22:51 -0400 Subject: [PATCH 32/97] add snapshot test --- .../update_source_editor.test.tsx.snap | 57 +++++++++++++++++++ .../update_source_editor.test.tsx | 35 ++++++++++++ 2 files changed, 92 insertions(+) create mode 100644 x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/update_source_editor.test.tsx.snap create mode 100644 x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.test.tsx diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/update_source_editor.test.tsx.snap b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/update_source_editor.test.tsx.snap new file mode 100644 index 0000000000000..13f205254dc95 --- /dev/null +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/update_source_editor.test.tsx.snap @@ -0,0 +1,57 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should render update source editor 1`] = ` + + + +
+ +
+ + + + + + + +
+ +
+ + + + + + +`; diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.test.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.test.tsx new file mode 100644 index 0000000000000..00819791548c8 --- /dev/null +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.test.tsx @@ -0,0 +1,35 @@ +/* + * 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. + */ + +jest.mock('../../../kibana_services', () => ({})); + +import React from 'react'; +import { shallow } from 'enzyme'; + +import { UpdateSourceEditor } from './update_source_editor'; +import { MVTSingleLayerVectorSource } from './mvt_single_layer_vector_source'; +import { TiledSingleLayerVectorSourceDescriptor } from '../../../../common/descriptor_types'; +import { SOURCE_TYPES } from '../../../../common/constants'; + +const descriptor: TiledSingleLayerVectorSourceDescriptor = { + type: SOURCE_TYPES.MVT_SINGLE_LAYER, + urlTemplate: 'https://example.com/{x}/{y}/{z}.pbf', + layerName: 'foobar', + minSourceZoom: 4, + maxSourceZoom: 14, + fields: [], + tooltipProperties: [], +}; + +test('should render update source editor', async () => { + const source = new MVTSingleLayerVectorSource(descriptor); + + const component = shallow( + {}} /> + ); + + expect(component).toMatchSnapshot(); +}); From adc872bc989ad3677cbd7c67ef5ff6cd29d881c2 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Wed, 24 Jun 2020 16:28:09 -0400 Subject: [PATCH 33/97] add snapshot --- ...e_layer_vector_source_editor.test.tsx.snap | 28 +++++++++++++++++++ ...single_layer_vector_source_editor.test.tsx | 18 ++++++++++++ .../update_source_editor.test.tsx | 2 +- 3 files changed, 47 insertions(+), 1 deletion(-) create mode 100644 x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_vector_source_editor.test.tsx.snap create mode 100644 x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.test.tsx diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_vector_source_editor.test.tsx.snap b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_vector_source_editor.test.tsx.snap new file mode 100644 index 0000000000000..525a99e030204 --- /dev/null +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_vector_source_editor.test.tsx.snap @@ -0,0 +1,28 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should render source creation editor 1`] = ` + + + + + + +`; diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.test.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.test.tsx new file mode 100644 index 0000000000000..986756f840014 --- /dev/null +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.test.tsx @@ -0,0 +1,18 @@ +/* + * 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. + */ + +jest.mock('../../../kibana_services', () => ({})); + +import React from 'react'; +import { shallow } from 'enzyme'; + +import { MVTSingleLayerVectorSourceEditor } from './mvt_single_layer_vector_source_editor'; + +test('should render source creation editor (fields should _not_ be included)', async () => { + const component = shallow( {}} />); + + expect(component).toMatchSnapshot(); +}); diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.test.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.test.tsx index 00819791548c8..fd19379058e3b 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.test.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.test.tsx @@ -24,7 +24,7 @@ const descriptor: TiledSingleLayerVectorSourceDescriptor = { tooltipProperties: [], }; -test('should render update source editor', async () => { +test('should render update source editor (fields _should_ be included)', async () => { const source = new MVTSingleLayerVectorSource(descriptor); const component = shallow( From f9d974cb9ffb9b1744bdfce5a1f50376175e8c59 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Wed, 24 Jun 2020 16:35:32 -0400 Subject: [PATCH 34/97] add field editor snapshot test --- .../mvt_field_config_editor.test.tsx.snap | 191 ++++++++++++++++++ .../mvt_field_config_editor.test.tsx | 33 +++ 2 files changed, 224 insertions(+) create mode 100644 x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap create mode 100644 x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.test.tsx diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap new file mode 100644 index 0000000000000..a959c4897e83e --- /dev/null +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap @@ -0,0 +1,191 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should render field editor 1`] = ` + + + + + + + + + + String + + , + "value": "String", + }, + Object { + "inputDisplay": + + + Number + + , + "value": "Number", + }, + ] + } + valueOfSelected="String" + /> + + + + + + + + + + + + + + String + + , + "value": "String", + }, + Object { + "inputDisplay": + + + Number + + , + "value": "Number", + }, + ] + } + valueOfSelected="String" + /> + + + + + + + + + + + + + + String + + , + "value": "String", + }, + Object { + "inputDisplay": + + + Number + + , + "value": "Number", + }, + ] + } + valueOfSelected="Number" + /> + + + + + + + + Add field + + +`; diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.test.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.test.tsx new file mode 100644 index 0000000000000..b62db6bb95776 --- /dev/null +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.test.tsx @@ -0,0 +1,33 @@ +/* + * 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. + */ + +jest.mock('../../../kibana_services', () => ({})); + +import React from 'react'; +import { shallow } from 'enzyme'; + +import { MVTFieldConfigEditor } from './mvt_field_config_editor'; +import { MVTFieldType } from '../../../../common/constants'; + +test('should render field editor', async () => { + const fields = [ + { + name: 'foo', + type: MVTFieldType.STRING, + }, + { + name: 'food', + type: MVTFieldType.STRING, + }, + { + name: 'fooz', + type: MVTFieldType.NUMBER, + }, + ]; + const component = shallow( {}} />); + + expect(component).toMatchSnapshot(); +}); From 6e2ffb0d2108b0ed96a5b5a07000e082a1c9799e Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Thu, 25 Jun 2020 15:01:48 -0400 Subject: [PATCH 35/97] fix snapshot --- .../update_source_editor.test.tsx.snap | 56 +++++++++++++++++++ 1 file changed, 56 insertions(+) diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/update_source_editor.test.tsx.snap b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/update_source_editor.test.tsx.snap index 13f205254dc95..df7713f3a3019 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/update_source_editor.test.tsx.snap +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/update_source_editor.test.tsx.snap @@ -1,5 +1,61 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`should render update source editor (fields _should_ be included) 1`] = ` + + + +
+ +
+ + + + + + + +
+ +
+ + + + + + +`; + exports[`should render update source editor 1`] = ` From 4c92c6b61bc03676ec6d113fd5c199afdb8528a2 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Thu, 25 Jun 2020 15:09:47 -0400 Subject: [PATCH 36/97] add snapshot --- ...single_layer_source_settings.test.tsx.snap | 128 ++++++++++++++++++ .../mvt_single_layer_source_settings.test.tsx | 48 +++++++ 2 files changed, 176 insertions(+) create mode 100644 x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_source_settings.test.tsx.snap create mode 100644 x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.test.tsx diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_source_settings.test.tsx.snap b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_source_settings.test.tsx.snap new file mode 100644 index 0000000000000..afe1c72a0d536 --- /dev/null +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_source_settings.test.tsx.snap @@ -0,0 +1,128 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should render with fields 1`] = ` + + + + + + + + + + + +`; + +exports[`should render without fields 1`] = ` + + + + + + + + +`; diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.test.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.test.tsx new file mode 100644 index 0000000000000..af8f54fc3b504 --- /dev/null +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.test.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 { MVTFieldDescriptor } from '../../../../common/descriptor_types'; + +jest.mock('../../../kibana_services', () => ({})); + +import React from 'react'; +import { shallow } from 'enzyme'; + +import { MVTSingleLayerSourceSettings } from './mvt_single_layer_source_settings'; +import { MVTFieldType } from '../../../../common/constants'; + +const defaultSettings = { + handleChange: () => {}, + layerName: 'foobar', + fields: [ + { + name: 'foo', + type: MVTFieldType.STRING, + }, + { + name: 'food', + type: MVTFieldType.STRING, + }, + { + name: 'fooz', + type: MVTFieldType.NUMBER, + }, + ], + minSourceZoom: 4, + maxSourceZoom: 14, + includeFields: true, +}; + +test('should render with fields', async () => { + const component = shallow(); + expect(component).toMatchSnapshot(); +}); + +test('should render without fields', async () => { + const settings = { ...defaultSettings, includeFields: false }; + const component = shallow(); + expect(component).toMatchSnapshot(); +}); From 508b1c63fcfd7122d4dd60e6150b6094db715146 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Thu, 25 Jun 2020 15:12:34 -0400 Subject: [PATCH 37/97] remove unused import --- .../mvt_single_layer_source_settings.test.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.test.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.test.tsx index af8f54fc3b504..22436fbe5117d 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.test.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.test.tsx @@ -4,8 +4,6 @@ * you may not use this file except in compliance with the Elastic License. */ -import { MVTFieldDescriptor } from '../../../../common/descriptor_types'; - jest.mock('../../../kibana_services', () => ({})); import React from 'react'; From 9634353cf92af8cfbb621eea1889eda6a03febef Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Thu, 25 Jun 2020 15:39:40 -0400 Subject: [PATCH 38/97] test stub for mvt layer fix optional param more checks --- .../tiled_vector_layer.test.ts | 64 +++++++++++++++++++ .../tiled_vector_layer/tiled_vector_layer.tsx | 4 +- 2 files changed, 66 insertions(+), 2 deletions(-) create mode 100644 x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.test.ts diff --git a/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.test.ts b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.test.ts new file mode 100644 index 0000000000000..f7eb41a0f4649 --- /dev/null +++ b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.test.ts @@ -0,0 +1,64 @@ +/* + * 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. + */ +jest.mock('ui/new_platform'); +jest.mock('../../../kibana_services', () => { + return { + getUiSettings() { + return { + get() { + return false; + }, + }; + }, + }; +}); + +import { MVTSingleLayerVectorSource } from '../../sources/mvt_single_layer_vector_source'; +import { + TiledSingleLayerVectorSourceDescriptor, + VectorLayerDescriptor, +} from '../../../../common/descriptor_types'; +import { SOURCE_TYPES } from '../../../../common/constants'; +import { TiledVectorLayer } from './tiled_vector_layer'; + +function createLayer( + layerOptions: Partial = {}, + sourceOptions: Partial = {} +): TiledVectorLayer { + const sourceDescriptor: TiledSingleLayerVectorSourceDescriptor = { + type: SOURCE_TYPES.MVT_SINGLE_LAYER, + urlTemplate: 'https://example.com/{x}/{y}/{z}.pbf', + layerName: 'foobar', + minSourceZoom: 4, + maxSourceZoom: 14, + fields: [], + tooltipProperties: [], + ...sourceOptions, + }; + const mvtSource = new MVTSingleLayerVectorSource(sourceDescriptor); + + const defaultLayerOptions = { + ...layerOptions, + sourceDescriptor, + }; + const layerDescriptor = TiledVectorLayer.createDescriptor(defaultLayerOptions); + return new TiledVectorLayer({ layerDescriptor, source: mvtSource }); +} + +describe('visiblity', () => { + it('should get minzoom from source', async () => { + const layer: TiledVectorLayer = createLayer({}, {}); + expect(layer.getMinZoom()).toEqual(4); + }); + it('should get maxzoom from default', async () => { + const layer: TiledVectorLayer = createLayer({}, {}); + expect(layer.getMaxZoom()).toEqual(24); + }); + it('should get maxzoom from layer options', async () => { + const layer: TiledVectorLayer = createLayer({ maxZoom: 10 }, {}); + expect(layer.getMaxZoom()).toEqual(10); + }); +}); diff --git a/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx index ffea1febe2e4e..4a929084791ca 100644 --- a/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx +++ b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx @@ -23,13 +23,13 @@ export class TiledVectorLayer extends VectorLayer { static createDescriptor( descriptor: Partial, - mapColors: string[] + mapColors?: string[] ): VectorLayerDescriptor { const layerDescriptor = super.createDescriptor(descriptor, mapColors); layerDescriptor.type = TiledVectorLayer.type; if (!layerDescriptor.style) { - const styleProperties = VectorStyle.createDefaultStyleProperties(mapColors); + const styleProperties = VectorStyle.createDefaultStyleProperties(mapColors ? mapColors : []); layerDescriptor.style = VectorStyle.createDescriptor(styleProperties); } From 94efbf64f6d4fc646160b630027b61e9a290e265 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Thu, 25 Jun 2020 15:56:49 -0400 Subject: [PATCH 39/97] add snapshot test more unit tests more unit tests ts fixes --- .../tiled_vector_layer.test.tsx.snap | 8 +++++ ...er.test.ts => tiled_vector_layer.test.tsx} | 32 +++++++++++++++++++ .../tiled_vector_layer/tiled_vector_layer.tsx | 18 +++-------- 3 files changed, 44 insertions(+), 14 deletions(-) create mode 100644 x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/__snapshots__/tiled_vector_layer.test.tsx.snap rename x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/{tiled_vector_layer.test.ts => tiled_vector_layer.test.tsx} (69%) diff --git a/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/__snapshots__/tiled_vector_layer.test.tsx.snap b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/__snapshots__/tiled_vector_layer.test.tsx.snap new file mode 100644 index 0000000000000..f0ae93601ce8a --- /dev/null +++ b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/__snapshots__/tiled_vector_layer.test.tsx.snap @@ -0,0 +1,8 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`icon should use vector icon 1`] = ` +
+`; diff --git a/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.test.ts b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.test.tsx similarity index 69% rename from x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.test.ts rename to x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.test.tsx index f7eb41a0f4649..331a2e9e1733f 100644 --- a/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.test.ts +++ b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.test.tsx @@ -16,6 +16,9 @@ jest.mock('../../../kibana_services', () => { }; }); +import { shallow } from 'enzyme'; + +import { Feature } from 'geojson'; import { MVTSingleLayerVectorSource } from '../../sources/mvt_single_layer_vector_source'; import { TiledSingleLayerVectorSourceDescriptor, @@ -62,3 +65,32 @@ describe('visiblity', () => { expect(layer.getMaxZoom()).toEqual(10); }); }); + +describe('icon', () => { + it('should use vector icon', async () => { + const layer: TiledVectorLayer = createLayer({}, {}); + + const iconAndTooltipContent = layer.getCustomIconAndTooltipContent(); + const component = shallow(iconAndTooltipContent.icon); + expect(component).toMatchSnapshot(); + }); +}); + +describe('getFeatureById', () => { + it('should echo properties with dummy geometry', async () => { + const layer: TiledVectorLayer = createLayer({}, {}); + + const properties = { + foo: 'bar', + }; + const feature = layer.getFeatureById(undefined, { mbProperties: properties }) as Feature; + + expect(feature.properties).toEqual(properties); + expect(feature.geometry).toEqual({ + type: 'Point', + coordinates: [0, 0], + }); + expect(feature.id).toEqual(undefined); + expect(feature.type).toEqual('Feature'); + }); +}); diff --git a/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx index 4a929084791ca..0ef1157e1e682 100644 --- a/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx +++ b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx @@ -202,25 +202,15 @@ export class TiledVectorLayer extends VectorLayer { id: string | number | undefined, meta: { mbProperties: GeoJsonProperties } ): Feature | null { - const geometry = this._source.getFeatureGeometry(id, meta.mbProperties); const properties = this._source.getFeatureProperties(id, meta.mbProperties); - if (geometry === null) { - return { - type: 'Feature', - properties, - id, - geometry: { - type: 'Point', - coordinates: [0, 0], - }, - }; - } - return { type: 'Feature', properties, - geometry, id, + geometry: { + type: 'Point', + coordinates: [0, 0], + }, }; } } From 501fd8909195647afdcef72ad1d316e22dce9f0a Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Thu, 25 Jun 2020 17:52:12 -0400 Subject: [PATCH 40/97] add data syncing unit test --- .../layers/__tests__/mock_sync_context.ts | 40 +++++++++ .../tiled_vector_layer.test.tsx | 87 ++++++++++++++++++- 2 files changed, 123 insertions(+), 4 deletions(-) create mode 100644 x-pack/plugins/maps/public/classes/layers/__tests__/mock_sync_context.ts diff --git a/x-pack/plugins/maps/public/classes/layers/__tests__/mock_sync_context.ts b/x-pack/plugins/maps/public/classes/layers/__tests__/mock_sync_context.ts new file mode 100644 index 0000000000000..8c4eb49d5040d --- /dev/null +++ b/x-pack/plugins/maps/public/classes/layers/__tests__/mock_sync_context.ts @@ -0,0 +1,40 @@ +/* + * 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 sinon from 'sinon'; +import { DataRequestContext } from '../../../actions'; +import { DataMeta, MapFilters } from '../../../../common/descriptor_types'; + +export class MockSyncContext implements DataRequestContext { + dataFilters: MapFilters; + isRequestStillActive: (dataId: string, requestToken: symbol) => boolean; + onLoadError: (dataId: string, requestToken: symbol, errorMessage: string) => void; + registerCancelCallback: (requestToken: symbol, callback: () => void) => void; + startLoading: (dataId: string, requestToken: symbol, meta: DataMeta) => void; + stopLoading: (dataId: string, requestToken: symbol, data: object, meta: DataMeta) => void; + updateSourceData: (newData: unknown) => void; + + constructor({ dataFilters }: { dataFilters: Partial }) { + const mapFilters: MapFilters = { + filters: [], + timeFilters: { + from: 'now', + to: '15m', + mode: 'relative', + }, + zoom: 0, + ...dataFilters, + }; + + this.dataFilters = mapFilters; + this.isRequestStillActive = sinon.spy(); + this.onLoadError = sinon.spy(); + this.registerCancelCallback = sinon.spy(); + this.startLoading = sinon.spy(); + this.stopLoading = sinon.spy(); + this.updateSourceData = sinon.spy(); + } +} diff --git a/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.test.tsx b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.test.tsx index 331a2e9e1733f..8bb1f4c0f12e8 100644 --- a/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.test.tsx +++ b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.test.tsx @@ -3,6 +3,9 @@ * or more contributor license agreements. Licensed under the Elastic License; * you may not use this file except in compliance with the Elastic License. */ +import { MockSyncContext } from '../__tests__/mock_sync_context'; +import sinon from 'sinon'; + jest.mock('ui/new_platform'); jest.mock('../../../kibana_services', () => { return { @@ -21,22 +24,27 @@ import { shallow } from 'enzyme'; import { Feature } from 'geojson'; import { MVTSingleLayerVectorSource } from '../../sources/mvt_single_layer_vector_source'; import { + DataRequestDescriptor, TiledSingleLayerVectorSourceDescriptor, VectorLayerDescriptor, } from '../../../../common/descriptor_types'; import { SOURCE_TYPES } from '../../../../common/constants'; import { TiledVectorLayer } from './tiled_vector_layer'; +const defaultConfig = { + urlTemplate: 'https://example.com/{x}/{y}/{z}.pbf', + layerName: 'foobar', + minSourceZoom: 4, + maxSourceZoom: 14, +}; + function createLayer( layerOptions: Partial = {}, sourceOptions: Partial = {} ): TiledVectorLayer { const sourceDescriptor: TiledSingleLayerVectorSourceDescriptor = { type: SOURCE_TYPES.MVT_SINGLE_LAYER, - urlTemplate: 'https://example.com/{x}/{y}/{z}.pbf', - layerName: 'foobar', - minSourceZoom: 4, - maxSourceZoom: 14, + ...defaultConfig, fields: [], tooltipProperties: [], ...sourceOptions, @@ -94,3 +102,74 @@ describe('getFeatureById', () => { expect(feature.type).toEqual('Feature'); }); }); + +describe('syncData', () => { + it('Should sync with source-params', async () => { + const layer: TiledVectorLayer = createLayer({}, {}); + + const syncContext = new Mock_sync_context({ dataFilters: {} }); + + await layer.syncData(syncContext); + // @ts-expect-error + sinon.assert.calledOnce(syncContext.startLoading); + // @ts-expect-error + sinon.assert.calledOnce(syncContext.stopLoading); + + // @ts-expect-error + const call = syncContext.stopLoading.getCall(0); + expect(call.args[2]).toEqual(defaultConfig); + }); + + it('Should not resync when no changes to source params', async () => { + const layer1: TiledVectorLayer = createLayer({}, {}); + const syncContext1 = new Mock_sync_context({ dataFilters: {} }); + + await layer1.syncData(syncContext1); + + const dataRequestDescriptor: DataRequestDescriptor = { + data: { ...defaultConfig }, + dataId: 'source', + }; + const layer2: TiledVectorLayer = createLayer( + { + __dataRequests: [dataRequestDescriptor], + }, + {} + ); + const syncContext2 = new Mock_sync_context({ dataFilters: {} }); + await layer2.syncData(syncContext2); + // @ts-expect-error + sinon.assert.notCalled(syncContext2.startLoading); + // @ts-expect-error + sinon.assert.notCalled(syncContext2.stopLoading); + }); + + it('Should resync when changes to source params', async () => { + const layer1: TiledVectorLayer = createLayer({}, {}); + const syncContext1 = new Mock_sync_context({ dataFilters: {} }); + + await layer1.syncData(syncContext1); + + const dataRequestDescriptor: DataRequestDescriptor = { + data: defaultConfig, + dataId: 'source', + }; + const layer2: TiledVectorLayer = createLayer( + { + __dataRequests: [dataRequestDescriptor], + }, + { layerName: 'barfoo' } + ); + const syncContext2 = new Mock_sync_context({ dataFilters: {} }); + await layer2.syncData(syncContext2); + + // @ts-expect-error + sinon.assert.calledOnce(syncContext2.startLoading); + // @ts-expect-error + sinon.assert.calledOnce(syncContext2.stopLoading); + + // @ts-expect-error + const call = syncContext2.stopLoading.getCall(0); + expect(call.args[2]).toEqual({ ...defaultConfig, layerName: 'barfoo' }); + }); +}); From 355f7eee784f23aabf0bbbbcd228d895f502976e Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Thu, 25 Jun 2020 18:01:12 -0400 Subject: [PATCH 41/97] fix autorefactor --- .../tiled_vector_layer/tiled_vector_layer.test.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.test.tsx b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.test.tsx index 8bb1f4c0f12e8..1849dca8c9bc7 100644 --- a/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.test.tsx +++ b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.test.tsx @@ -107,7 +107,7 @@ describe('syncData', () => { it('Should sync with source-params', async () => { const layer: TiledVectorLayer = createLayer({}, {}); - const syncContext = new Mock_sync_context({ dataFilters: {} }); + const syncContext = new MockSyncContext({ dataFilters: {} }); await layer.syncData(syncContext); // @ts-expect-error @@ -122,7 +122,7 @@ describe('syncData', () => { it('Should not resync when no changes to source params', async () => { const layer1: TiledVectorLayer = createLayer({}, {}); - const syncContext1 = new Mock_sync_context({ dataFilters: {} }); + const syncContext1 = new MockSyncContext({ dataFilters: {} }); await layer1.syncData(syncContext1); @@ -136,7 +136,7 @@ describe('syncData', () => { }, {} ); - const syncContext2 = new Mock_sync_context({ dataFilters: {} }); + const syncContext2 = new MockSyncContext({ dataFilters: {} }); await layer2.syncData(syncContext2); // @ts-expect-error sinon.assert.notCalled(syncContext2.startLoading); @@ -146,7 +146,7 @@ describe('syncData', () => { it('Should resync when changes to source params', async () => { const layer1: TiledVectorLayer = createLayer({}, {}); - const syncContext1 = new Mock_sync_context({ dataFilters: {} }); + const syncContext1 = new MockSyncContext({ dataFilters: {} }); await layer1.syncData(syncContext1); @@ -160,7 +160,7 @@ describe('syncData', () => { }, { layerName: 'barfoo' } ); - const syncContext2 = new Mock_sync_context({ dataFilters: {} }); + const syncContext2 = new MockSyncContext({ dataFilters: {} }); await layer2.syncData(syncContext2); // @ts-expect-error From 229bf3b22a2c70f436807a43340ce6d6905d83c4 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Fri, 26 Jun 2020 10:51:14 -0400 Subject: [PATCH 42/97] fix merge and replace snapshots --- ...e_layer_vector_source_editor.test.tsx.snap | 2 +- .../update_source_editor.test.tsx.snap | 56 ------------------- .../mvt_single_layer_vector_source.tsx | 13 +++-- 3 files changed, 10 insertions(+), 61 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_vector_source_editor.test.tsx.snap b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_vector_source_editor.test.tsx.snap index 525a99e030204..932aa4d6ab128 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_vector_source_editor.test.tsx.snap +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_vector_source_editor.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`should render source creation editor 1`] = ` +exports[`should render source creation editor (fields should _not_ be included) 1`] = ` `; - -exports[`should render update source editor 1`] = ` - - - -
- -
- - - - - - - -
- -
- - - - - - -`; diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx index 5d96254487322..b68ebdf5f5ee3 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx @@ -10,8 +10,13 @@ import React from 'react'; import { GeoJsonProperties, Geometry } from 'geojson'; import { AbstractSource, ImmutableSourceProperty, SourceEditorArgs } from '../source'; import { BoundsFilters, GeoJsonWithMeta, ITiledSingleLayerVectorSource } from '../vector_source'; -import { FIELD_ORIGIN, MAX_ZOOM, MIN_ZOOM, SOURCE_TYPES } from '../../../../common/constants'; -import { VECTOR_SHAPE_TYPES } from '../vector_feature_types'; +import { + FIELD_ORIGIN, + MAX_ZOOM, + MIN_ZOOM, + SOURCE_TYPES, + VECTOR_SHAPE_TYPE, +} from '../../../../common/constants'; import { registerSource } from '../source_registry'; import { getDataSourceLabel, getUrlLabel } from '../../../../common/i18n_getters'; import { @@ -179,8 +184,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() { From 80cf10960cab4f396c4a1d07f7a27d5b8033e7be Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Fri, 26 Jun 2020 13:19:30 -0400 Subject: [PATCH 43/97] field editor changes --- .../mvt_field_config_editor.tsx | 89 +++++++++++++++---- .../mvt_single_layer_source_settings.tsx | 18 +++- .../update_source_editor.tsx | 10 +-- 3 files changed, 94 insertions(+), 23 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx index 6d02870cb87aa..1285e784bc3cf 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx @@ -16,6 +16,7 @@ import { EuiSpacer, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; +import _ from 'lodash'; import { MVTFieldDescriptor } from '../../../../common/descriptor_types'; import { FieldIcon } from '../../../../../../../src/plugins/kibana_react/public'; import { MVTFieldType } from '../../../../common/constants'; @@ -26,7 +27,11 @@ const FIELD_TYPE_OPTIONS = [ inputDisplay: ( - String + + {i18n.translate('xpack.maps.mvtSource.stringFieldLabel', { + defaultMessage: 'string', + })} + ), }, @@ -35,7 +40,11 @@ const FIELD_TYPE_OPTIONS = [ inputDisplay: ( - Number + + {i18n.translate('xpack.maps.mvtSource.numberFieldLabel', { + defaultMessage: 'number', + })} + ), }, @@ -47,32 +56,66 @@ export interface Props { } // eslint-disable-next-line @typescript-eslint/no-empty-interface -interface State {} +interface State { + previousFields: MVTFieldDescriptor[]; + currentFields: MVTFieldDescriptor[]; +} export class MVTFieldConfigEditor extends Component { - state = {}; + state = { + currentFields: [], + previousFields: [], + }; + + static getDerivedStateFromProps(nextProps: Props, prevState: State) { + if (_.isEqual(nextProps.fields, prevState.previousFields)) { + return null; + } + return { + currentFields: nextProps.fields, + previousFields: nextProps.fields, + }; + } + + _notifyChange = () => { + const invalid = this.state.currentFields.some((field) => { + return field.name === ''; + }); + + if (!invalid) { + this.props.onChange(this.state.currentFields); + } + }; + + _fieldChange(newFields) { + this.setState( + { + currentFields: newFields, + }, + this._notifyChange + ); + } _removeField(index: number) { - const newFields = this.props.fields.slice(); + const newFields = this.state.currentFields.slice(); newFields.splice(index, 1); - - this.props.onChange(newFields); + this._fieldChange(newFields); } _addField = () => { - const newFields = this.props.fields.slice(); + const newFields = this.state.currentFields.slice(); newFields.push({ type: MVTFieldType.STRING, - name: 'Foobar', + name: '', }); - this.props.onChange(newFields); + this._fieldChange(newFields); }; _renderFieldTypeDropDown(mvtFieldConfig: MVTFieldDescriptor, index: number) { const onChange = (type: MVTFieldType) => { - const newFields = this.props.fields.slice(); + const newFields = this.state.currentFields.slice(); newFields[index].type = type; - this.props.onChange(newFields); + this._fieldChange(newFields); }; return ( @@ -87,17 +130,31 @@ export class MVTFieldConfigEditor extends Component { _renderFieldNameInput(mvtFieldConfig: MVTFieldDescriptor, index: number) { const onChange = (e: ChangeEvent) => { const name = e.target.value; - const newFields = this.props.fields.slice(); + const newFields = this.state.currentFields.slice(); newFields[index].name = name; - this.props.onChange(newFields); + this._fieldChange(newFields); }; + + const isInvalid = mvtFieldConfig.name === ''; + const placeholderText = isInvalid + ? i18n.translate('xpack.maps.mvtSource.fieldPlaceholderText', { + defaultMessage: 'Field name', + }) + : ''; + return ( - + ); } _renderFieldConfig() { - return this.props.fields.map((mvtFieldConfig: MVTFieldDescriptor, index: number) => { + return this.state.currentFields.map((mvtFieldConfig: MVTFieldDescriptor, index: number) => { return ( {this._renderFieldNameInput(mvtFieldConfig, index)} diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx index 001f2ccff8e1a..964a213842dd4 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx @@ -59,6 +59,9 @@ export class MVTSingleLayerSourceSettings extends Component { }, 200); _handleLayerNameInputChange = (e: ChangeEvent) => { + if (e.target.value === this.state.currentSettings.layerName) { + return; + } const currentSettings = { layerName: e.target.value, minSourceZoom: this.state.currentSettings.minSourceZoom, @@ -70,6 +73,9 @@ export class MVTSingleLayerSourceSettings extends Component { }; _handleFieldChange = (fields: MVTFieldDescriptor[]) => { + if (_.isEqual(this.state.currentSettings.fields, fields)) { + return; + } const currentSettings = { layerName: this.state.currentSettings.layerName, minSourceZoom: this.state.currentSettings.minSourceZoom, @@ -80,11 +86,19 @@ export class MVTSingleLayerSourceSettings extends Component { }; _handleZoomRangeChange = (e: Value) => { + const minZoom = parseInt(e[0] as string, 10); + const maxZoom = parseInt(e[1] as string, 10); + if ( + this.state.currentSettings.fields.minSourceZoom === minZoom && + this.state.currentSettings.fields.maxSourceZoom === maxZoom + ) { + return; + } const currentSettings = { layerName: this.state.currentSettings.layerName, fields: this.state.currentSettings.fields, - minSourceZoom: parseInt(e[0] as string, 10), - maxSourceZoom: parseInt(e[1] as string, 10), + minSourceZoom: minZoom, + maxSourceZoom: maxZoom, }; this.setState({ currentSettings }, this._handleChange); }; diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx index d052bd398be30..790392e17ca48 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx @@ -53,12 +53,12 @@ export class UpdateSourceEditor extends Component { this.props.onChange({ propName: 'tooltipProperties', value: propertyNames }); }; - _handleChange = (state: MVTSettings) => { + _handleChange = (settings: MVTSettings) => { this.props.onChange( - { propName: 'layerName', value: state.layerName }, - { propName: 'fields', value: state.fields }, - { propName: 'minSourceZoom', value: state.minSourceZoom }, - { propName: 'maxSourceZoom', value: state.maxSourceZoom } + { propName: 'layerName', value: settings.layerName }, + { propName: 'fields', value: settings.fields }, + { propName: 'minSourceZoom', value: settings.minSourceZoom }, + { propName: 'maxSourceZoom', value: settings.maxSourceZoom } ); }; From bf9d298d61460f85ed5ff576da6cd04275e27ef2 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Fri, 26 Jun 2020 14:17:31 -0400 Subject: [PATCH 44/97] field editor changes --- .../mvt_field_config_editor.test.tsx.snap | 18 ++++++---- .../mvt_field_config_editor.tsx | 4 +-- .../mvt_single_layer_source_settings.tsx | 1 + .../mvt_single_layer_vector_source.tsx | 4 +++ .../update_source_editor.tsx | 34 ++----------------- 5 files changed, 22 insertions(+), 39 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap index a959c4897e83e..4c0608a277b6d 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap @@ -9,7 +9,9 @@ exports[`should render field editor 1`] = ` @@ -29,7 +31,7 @@ exports[`should render field editor 1`] = ` type="string" /> - String + string , "value": "String", @@ -40,7 +42,7 @@ exports[`should render field editor 1`] = ` type="number" /> - Number + number , "value": "Number", @@ -67,7 +69,9 @@ exports[`should render field editor 1`] = ` @@ -87,7 +91,7 @@ exports[`should render field editor 1`] = ` type="string" /> - String + string , "value": "String", @@ -98,7 +102,7 @@ exports[`should render field editor 1`] = ` type="number" /> - Number + number , "value": "Number", @@ -125,7 +129,9 @@ exports[`should render field editor 1`] = ` @@ -145,7 +151,7 @@ exports[`should render field editor 1`] = ` type="string" /> - String + string , "value": "String", @@ -156,7 +162,7 @@ exports[`should render field editor 1`] = ` type="number" /> - Number + number , "value": "Number", diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx index 1285e784bc3cf..c5573323480bf 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx @@ -77,7 +77,7 @@ export class MVTFieldConfigEditor extends Component { }; } - _notifyChange = () => { + _notifyChange = _.debounce(() => { const invalid = this.state.currentFields.some((field) => { return field.name === ''; }); @@ -85,7 +85,7 @@ export class MVTFieldConfigEditor extends Component { if (!invalid) { this.props.onChange(this.state.currentFields); } - }; + }); _fieldChange(newFields) { this.setState( diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx index 964a213842dd4..14bbe5f73b78f 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx @@ -94,6 +94,7 @@ export class MVTSingleLayerSourceSettings extends Component { ) { return; } + const currentSettings = { layerName: this.state.currentSettings.layerName, fields: this.state.currentSettings.fields, diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx index b68ebdf5f5ee3..ee59e87683bcf 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx @@ -93,6 +93,10 @@ export class MVTSingleLayerVectorSource extends AbstractSource }); } + getFieldDescriptors(): MVTFieldDescriptor[] { + return this._descriptor.fields; + } + getFieldByName(fieldName: string): MVTField | null { try { return this.createField({ fieldName }); diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx index 790392e17ca48..848fa20e07c47 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx @@ -22,33 +22,9 @@ export interface Props { } // eslint-disable-next-line @typescript-eslint/no-empty-interface -interface State { - fields: null | MVTField[]; -} +interface State {} export class UpdateSourceEditor extends Component { - state = { - fields: null, - }; - - private _isMounted: boolean = false; - - componentDidMount() { - this._isMounted = true; - this._loadFields(); - } - - componentWillUnmount() { - this._isMounted = false; - } - - async _loadFields() { - const fields: MVTField[] = (await this.props.source.getFields()) as MVTField[]; - if (this._isMounted) { - this.setState({ fields }); - } - } - _onTooltipPropertiesSelect = (propertyNames: string[]) => { this.props.onChange({ propName: 'tooltipProperties', value: propertyNames }); }; @@ -63,10 +39,6 @@ export class UpdateSourceEditor extends Component { }; _renderSourceSettingsCard() { - const fields: MVTFieldDescriptor[] = (this.state.fields || []).map((field: MVTField) => { - return field.getMVTFieldDescriptor(); - }); - return ( @@ -82,7 +54,7 @@ export class UpdateSourceEditor extends Component { { From baaa565f16f7997d8012a5e01a4b0c3b57cee5e5 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Fri, 26 Jun 2020 14:29:53 -0400 Subject: [PATCH 45/97] ts fixes --- .../mvt_field_config_editor.tsx | 10 +++++----- .../mvt_single_layer_source_settings.tsx | 4 ++-- .../mvt_single_layer_vector_source.tsx | 20 +++++++++---------- .../update_source_editor.tsx | 8 +++++--- 4 files changed, 22 insertions(+), 20 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx index c5573323480bf..98dff40f09885 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx @@ -62,7 +62,7 @@ interface State { } export class MVTFieldConfigEditor extends Component { - state = { + state: State = { currentFields: [], previousFields: [], }; @@ -78,7 +78,7 @@ export class MVTFieldConfigEditor extends Component { } _notifyChange = _.debounce(() => { - const invalid = this.state.currentFields.some((field) => { + const invalid = this.state.currentFields.some((field: MVTFieldDescriptor) => { return field.name === ''; }); @@ -87,7 +87,7 @@ export class MVTFieldConfigEditor extends Component { } }); - _fieldChange(newFields) { + _fieldChange(newFields: MVTFieldDescriptor[]) { this.setState( { currentFields: newFields, @@ -97,13 +97,13 @@ export class MVTFieldConfigEditor extends Component { } _removeField(index: number) { - const newFields = this.state.currentFields.slice(); + const newFields: MVTFieldDescriptor[] = this.state.currentFields.slice(); newFields.splice(index, 1); this._fieldChange(newFields); } _addField = () => { - const newFields = this.state.currentFields.slice(); + const newFields: MVTFieldDescriptor[] = this.state.currentFields.slice(); newFields.push({ type: MVTFieldType.STRING, name: '', diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx index 14bbe5f73b78f..22d7258204774 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx @@ -89,8 +89,8 @@ export class MVTSingleLayerSourceSettings extends Component { const minZoom = parseInt(e[0] as string, 10); const maxZoom = parseInt(e[1] as string, 10); if ( - this.state.currentSettings.fields.minSourceZoom === minZoom && - this.state.currentSettings.fields.maxSourceZoom === maxZoom + this.state.currentSettings.minSourceZoom === minZoom && + this.state.currentSettings.maxSourceZoom === maxZoom ) { return; } diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx index ee59e87683bcf..d933054939625 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx @@ -93,8 +93,15 @@ export class MVTSingleLayerVectorSource extends AbstractSource }); } - getFieldDescriptors(): MVTFieldDescriptor[] { - return this._descriptor.fields; + getMVTFields(): MVTField[] { + return this._descriptor.fields.map((field: MVTFieldDescriptor) => { + return new MVTField({ + fieldName: field.name, + type: field.type, + source: this, + origin: FIELD_ORIGIN.SOURCE, + }); + }); } getFieldByName(fieldName: string): MVTField | null { @@ -130,14 +137,7 @@ export class MVTSingleLayerVectorSource extends AbstractSource } async getFields(): Promise { - return this._descriptor.fields.map((field: MVTFieldDescriptor) => { - return new MVTField({ - fieldName: field.name, - type: field.type, - source: this, - origin: FIELD_ORIGIN.SOURCE, - }); - }); + return this.getMVTFields(); } getLayerName(): string { diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx index 848fa20e07c47..217c4c04b6f74 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx @@ -12,7 +12,6 @@ import { TooltipSelector } from '../../../components/tooltip_selector'; import { MVTField } from '../../fields/mvt_field'; import { MVTSingleLayerVectorSource } from './mvt_single_layer_vector_source'; import { MVTSettings, MVTSingleLayerSourceSettings } from './mvt_single_layer_source_settings'; -import { MVTFieldDescriptor } from '../../../../common/descriptor_types'; import { OnSourceChangeArgs } from '../../../connected_components/layer_panel/view'; export interface Props { @@ -39,6 +38,9 @@ export class UpdateSourceEditor extends Component { }; _renderSourceSettingsCard() { + const fieldDescriptors = this.props.source.getMVTFields().map((field: MVTField) => { + return field.getMVTFieldDescriptor(); + }); return ( @@ -54,7 +56,7 @@ export class UpdateSourceEditor extends Component { { From 9c7de48cc3bf7c0ab04012f7901a692a151d3bbe Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Fri, 26 Jun 2020 14:38:17 -0400 Subject: [PATCH 46/97] update snapshots --- .../update_source_editor.tsx | 29 +++++++++++++------ 1 file changed, 20 insertions(+), 9 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx index 217c4c04b6f74..ce28ea6ecba89 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx @@ -13,6 +13,7 @@ import { MVTField } from '../../fields/mvt_field'; import { MVTSingleLayerVectorSource } from './mvt_single_layer_vector_source'; import { MVTSettings, MVTSingleLayerSourceSettings } from './mvt_single_layer_source_settings'; import { OnSourceChangeArgs } from '../../../connected_components/layer_panel/view'; +import { MVTFieldDescriptor } from '../../../../common/descriptor_types'; export interface Props { tooltipFields: MVTField[]; @@ -29,18 +30,28 @@ export class UpdateSourceEditor extends Component { }; _handleChange = (settings: MVTSettings) => { - this.props.onChange( - { propName: 'layerName', value: settings.layerName }, - { propName: 'fields', value: settings.fields }, - { propName: 'minSourceZoom', value: settings.minSourceZoom }, - { propName: 'maxSourceZoom', value: settings.maxSourceZoom } - ); + const changes: OnSourceChangeArgs = []; + if (settings.layerName !== this.props.layerName) { + changes.push({ propName: 'layerName', value: settings.layerName }); + } + if (settings.minSourceZoom !== this.props.minSourceZoom) { + changes.push({ propName: 'minSourceZoom', value: settings.minSourceZoom }); + } + if (settings.maxSourceZoom !== this.props.maxSourceZoom) { + changes.push({ propName: 'maxSourceZoom', value: settings.maxSourceZoom }); + } + if (!_.isEqual(settings.fields !== this.props.fields)) { + changes.push({ propName: 'fields', value: settings.fields }); + } + this.props.onChange(...changes); }; _renderSourceSettingsCard() { - const fieldDescriptors = this.props.source.getMVTFields().map((field: MVTField) => { - return field.getMVTFieldDescriptor(); - }); + const fieldDescriptors: MVTFieldDescriptor[] = this.props.source + .getMVTFields() + .map((field: MVTField) => { + return field.getMVTFieldDescriptor(); + }); return ( From d0613e983d3282ed858c4da48a2a5a25e5215958 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Fri, 26 Jun 2020 15:27:42 -0400 Subject: [PATCH 47/97] fix things --- .../mvt_field_config_editor.tsx | 15 +++- .../mvt_single_layer_source_settings.tsx | 90 ++++++++++--------- .../update_source_editor.tsx | 2 +- 3 files changed, 61 insertions(+), 46 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx index 98dff40f09885..04eccae14928c 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx @@ -71,9 +71,10 @@ export class MVTFieldConfigEditor extends Component { if (_.isEqual(nextProps.fields, prevState.previousFields)) { return null; } + const clonedFields = _.cloneDeep(nextProps.fields); return { - currentFields: nextProps.fields, - previousFields: nextProps.fields, + currentFields: clonedFields, + previousFields: clonedFields, }; } @@ -114,7 +115,10 @@ export class MVTFieldConfigEditor extends Component { _renderFieldTypeDropDown(mvtFieldConfig: MVTFieldDescriptor, index: number) { const onChange = (type: MVTFieldType) => { const newFields = this.state.currentFields.slice(); - newFields[index].type = type; + newFields[index] = { + type, + name: newFields[index].name, + }; this._fieldChange(newFields); }; @@ -131,7 +135,10 @@ export class MVTFieldConfigEditor extends Component { const onChange = (e: ChangeEvent) => { const name = e.target.value; const newFields = this.state.currentFields.slice(); - newFields[index].name = name; + newFields[index] = { + name, + type: newFields[index].type, + }; this._fieldChange(newFields); }; diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx index 22d7258204774..c6213c31463b9 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx @@ -22,8 +22,14 @@ export type MVTSettings = { }; export interface State { - currentSettings: MVTSettings; - prevSettings: MVTSettings; + currentLayerName: 'string'; + currentMinSourceZoom: number; + currentMaxSourceZoom: number; + currentFields: MVTFieldDescriptor[]; + previousLayerName: 'string'; + previousMinSourceZoom: number; + previousMaxSourceZoom: number; + previousFields: MVTFieldDescriptor[]; } export interface Props { @@ -44,64 +50,69 @@ export class MVTSingleLayerSourceSettings extends Component { maxSourceZoom: nextProps.maxSourceZoom, }; - if (prevState && _.isEqual(newSettings, prevState.prevSettings)) { + const previous = prevState + ? { + layerName: prevState.previousLayerName, + fields: prevState.previousFields, + minSourceZoom: prevState.previousMinSourceZoom, + maxSourceZoom: prevState.previousMaxSourceZoom, + } + : null; + + if (_.isEqual(previous, newSettings)) { return null; } + const clonedFields = _.cloneDeep(nextProps.fields); return { - prevSettings: newSettings, - currentSettings: newSettings, + currentLayerName: nextProps.layerName, + currentMinSourceZoom: nextProps.minSourceZoom, + currentMaxSourceZoom: nextProps.maxSourceZoom, + currentFields: clonedFields, + previousLayerName: nextProps.layerName, + previousMinSourceZoom: nextProps.minSourceZoom, + previousMaxSourceZoom: nextProps.maxSourceZoom, + previousFields: clonedFields, }; } _handleChange = _.debounce(() => { - this.props.handleChange(this.state.currentSettings); + this.props.handleChange({ + layerName: this.state.currentLayerName, + minSourceZoom: this.state.currentMinSourceZoom, + maxSourceZoom: this.state.currentMaxSourceZoom, + fields: this.state.currentFields, + }); }, 200); _handleLayerNameInputChange = (e: ChangeEvent) => { - if (e.target.value === this.state.currentSettings.layerName) { + const layerName = e.target.value; + if (layerName === this.state.currentLayerName) { return; } - const currentSettings = { - layerName: e.target.value, - minSourceZoom: this.state.currentSettings.minSourceZoom, - maxSourceZoom: this.state.currentSettings.maxSourceZoom, - fields: this.state.currentSettings.fields, - }; - - this.setState({ currentSettings }, this._handleChange); + this.setState({ currentLayerName: e.targetValue }, this._handleChange); }; _handleFieldChange = (fields: MVTFieldDescriptor[]) => { - if (_.isEqual(this.state.currentSettings.fields, fields)) { + if (_.isEqual(this.state.currentFields, fields)) { return; } - const currentSettings = { - layerName: this.state.currentSettings.layerName, - minSourceZoom: this.state.currentSettings.minSourceZoom, - maxSourceZoom: this.state.currentSettings.maxSourceZoom, - fields, - }; - this.setState({ currentSettings }, this._handleChange); + this.setState({ currentFields: fields }, this._handleChange); }; _handleZoomRangeChange = (e: Value) => { - const minZoom = parseInt(e[0] as string, 10); - const maxZoom = parseInt(e[1] as string, 10); + const minSourceZoom = parseInt(e[0] as string, 10); + const maxSourceZoom = parseInt(e[1] as string, 10); if ( - this.state.currentSettings.minSourceZoom === minZoom && - this.state.currentSettings.maxSourceZoom === maxZoom + this.state.currentMinSourceZoom === minSourceZoom && + this.state.currentMaxSourceZoom === maxSourceZoom ) { return; } - - const currentSettings = { - layerName: this.state.currentSettings.layerName, - fields: this.state.currentSettings.fields, - minSourceZoom: minZoom, - maxSourceZoom: maxZoom, - }; - this.setState({ currentSettings }, this._handleChange); + this.setState( + { currentMaxSourceZoom: minSourceZoom, currentMaxSourceZoom: maxSourceZoom }, + this._handleChange + ); }; render() { @@ -112,7 +123,7 @@ export class MVTSingleLayerSourceSettings extends Component { })} > @@ -129,7 +140,7 @@ export class MVTSingleLayerSourceSettings extends Component { )} > @@ -146,10 +157,7 @@ export class MVTSingleLayerSourceSettings extends Component { formRowDisplay="columnCompressed" min={MIN_ZOOM} max={MAX_ZOOM} - value={[ - this.state.currentSettings.minSourceZoom, - this.state.currentSettings.maxSourceZoom, - ]} + value={[this.state.currentMinSourceZoom, this.state.currentMaxSourceZoom]} showInput="inputWithPopover" showRange showLabels diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx index ce28ea6ecba89..26c31d7b09f0c 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx @@ -40,7 +40,7 @@ export class UpdateSourceEditor extends Component { if (settings.maxSourceZoom !== this.props.maxSourceZoom) { changes.push({ propName: 'maxSourceZoom', value: settings.maxSourceZoom }); } - if (!_.isEqual(settings.fields !== this.props.fields)) { + if (!_.isEqual(settings.fields, this.props.fields)) { changes.push({ propName: 'fields', value: settings.fields }); } this.props.onChange(...changes); From 574a29e507a555d11acb2d9bcb8c393c94274ca7 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Fri, 26 Jun 2020 16:13:31 -0400 Subject: [PATCH 48/97] fix names --- .../mvt_single_layer_source_settings.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx index c6213c31463b9..f244109c4ab15 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx @@ -42,6 +42,17 @@ export interface Props { } export class MVTSingleLayerSourceSettings extends Component { + state = { + currentLayerName: '', + currentMinSourceZoom: MIN_ZOOM, + currentMaxSourceZoom: MAX_ZOOM, + currentFields: [], + previousLayerName: '', + previousMinSourceZoom: MIN_ZOOM, + previousMaxSourceZoom: MAX_ZOOM, + previousFields: [], + }; + static getDerivedStateFromProps(nextProps: Props, prevState: State) { const newSettings = { layerName: nextProps.layerName, @@ -90,7 +101,7 @@ export class MVTSingleLayerSourceSettings extends Component { if (layerName === this.state.currentLayerName) { return; } - this.setState({ currentLayerName: e.targetValue }, this._handleChange); + this.setState({ currentLayerName: layerName }, this._handleChange); }; _handleFieldChange = (fields: MVTFieldDescriptor[]) => { @@ -110,7 +121,7 @@ export class MVTSingleLayerSourceSettings extends Component { return; } this.setState( - { currentMaxSourceZoom: minSourceZoom, currentMaxSourceZoom: maxSourceZoom }, + { currentMinSourceZoom: minSourceZoom, currentMaxSourceZoom: maxSourceZoom }, this._handleChange ); }; From 94024fa31235d383888be868f7417195a3e367c1 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Fri, 26 Jun 2020 17:37:43 -0400 Subject: [PATCH 49/97] fix tooltip --- .../mvt_single_layer_vector_source.test.tsx | 25 +++++++++++++++++++ .../mvt_single_layer_vector_source.tsx | 14 ++++++++++- 2 files changed, 38 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.test.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.test.tsx index 8b6b9c5c5c1cf..4a31f940d793c 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.test.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.test.tsx @@ -29,6 +29,31 @@ describe('getUrlTemplateWithMeta', () => { }); }); +describe('canFormatFeatureProperties', () => { + it('false if no tooltips', async () => { + const source = new MVTSingleLayerVectorSource(descriptor); + expect(source.canFormatFeatureProperties()).toEqual(false); + }); + it('true if at least one matching tooltip', async () => { + const descriptorWithTooltips = { + ...descriptor, + fields: [{ name: 'foobar', type: MVTFieldType.STRING }], + tooltipProperties: ['foo', 'foobar', 'bar'], + }; + const source = new MVTSingleLayerVectorSource(descriptorWithTooltips); + expect(source.canFormatFeatureProperties()).toEqual(true); + }); + it('false if no matching tooltip', async () => { + const descriptorWithTooltips = { + ...descriptor, + fields: [{ name: 'foobar', type: MVTFieldType.STRING }], + tooltipProperties: ['foo', 'bar'], + }; + const source = new MVTSingleLayerVectorSource(descriptorWithTooltips); + expect(source.canFormatFeatureProperties()).toEqual(false); + }); +}); + describe('filterAndFormatPropertiesToHtml', () => { const descriptorWithFields = { ...descriptor, diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx index d933054939625..c936024808676 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx @@ -193,7 +193,19 @@ export class MVTSingleLayerVectorSource extends AbstractSource } canFormatFeatureProperties() { - return true; + if (!this._tooltipFields.length) { + return false; + } + + for (let i = 0; i < this._tooltipFields.length; i++) { + const tooltip: MVTField = this._tooltipFields[i]; + for (let j = 0; j < this._descriptor.fields.length; j++) { + if (tooltip.getName() === this._descriptor.fields[j].name) { + return true; + } + } + } + return false; } getMinZoom() { From 9633a736010a59a91b2389285687a227f157e76d Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Fri, 26 Jun 2020 18:12:42 -0400 Subject: [PATCH 50/97] add more error handling --- .../mvt_field_config_editor.test.tsx.snap | 392 ++++++++++++++++++ .../mvt_field_config_editor.test.tsx | 40 ++ .../mvt_field_config_editor.tsx | 10 +- 3 files changed, 441 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap index 4c0608a277b6d..2f50f4fd59370 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap @@ -1,5 +1,397 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`should render error for dupes 1`] = ` + + + + + + + + + + string + + , + "value": "String", + }, + Object { + "inputDisplay": + + + number + + , + "value": "Number", + }, + ] + } + valueOfSelected="String" + /> + + + + + + + + + + + + + + string + + , + "value": "String", + }, + Object { + "inputDisplay": + + + number + + , + "value": "Number", + }, + ] + } + valueOfSelected="String" + /> + + + + + + + + + + + + + + string + + , + "value": "String", + }, + Object { + "inputDisplay": + + + number + + , + "value": "Number", + }, + ] + } + valueOfSelected="Number" + /> + + + + + + + + Add field + + +`; + +exports[`should render error for empty name 1`] = ` + + + + + + + + + + string + + , + "value": "String", + }, + Object { + "inputDisplay": + + + number + + , + "value": "Number", + }, + ] + } + valueOfSelected="String" + /> + + + + + + + + + + + + + + string + + , + "value": "String", + }, + Object { + "inputDisplay": + + + number + + , + "value": "Number", + }, + ] + } + valueOfSelected="String" + /> + + + + + + + + + + + + + + string + + , + "value": "String", + }, + Object { + "inputDisplay": + + + number + + , + "value": "Number", + }, + ] + } + valueOfSelected="Number" + /> + + + + + + + + Add field + + +`; + exports[`should render field editor 1`] = ` { expect(component).toMatchSnapshot(); }); + +test('should render error for empty name', async () => { + const fields = [ + { + name: 'foo', + type: MVTFieldType.STRING, + }, + { + name: '', + type: MVTFieldType.STRING, + }, + { + name: 'fooz', + type: MVTFieldType.NUMBER, + }, + ]; + const component = shallow( {}} />); + + expect(component).toMatchSnapshot(); +}); + +test('should render error for dupes', async () => { + const fields = [ + { + name: 'foo', + type: MVTFieldType.STRING, + }, + { + name: 'bar', + type: MVTFieldType.STRING, + }, + { + name: 'foo', + type: MVTFieldType.NUMBER, + }, + ]; + const component = shallow( {}} />); + + expect(component).toMatchSnapshot(); +}); diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx index 04eccae14928c..084f349b17426 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx @@ -142,7 +142,15 @@ export class MVTFieldConfigEditor extends Component { this._fieldChange(newFields); }; - const isInvalid = mvtFieldConfig.name === ''; + const emptyName = mvtFieldConfig.name === ''; + let hasDupes = false; + for (let i = 0; i < this.state.currentFields.length; i++) { + if (i !== index && mvtFieldConfig.name === this.state.currentFields[i].name) { + hasDupes = true; + break; + } + } + const isInvalid = emptyName || hasDupes; const placeholderText = isInvalid ? i18n.translate('xpack.maps.mvtSource.fieldPlaceholderText', { defaultMessage: 'Field name', From cef7d8d9e0fdf917dd6e85d1ca7e01c2fb1c4755 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Fri, 26 Jun 2020 18:40:41 -0400 Subject: [PATCH 51/97] improve copy --- .../mvt_field_config_editor.test.tsx.snap | 33 +++++++++---------- ...single_layer_source_settings.test.tsx.snap | 5 +++ ...e_layer_vector_source_editor.test.tsx.snap | 2 ++ .../layer_wizard.tsx | 2 +- .../mvt_field_config_editor.tsx | 10 +++--- .../mvt_single_layer_source_settings.tsx | 20 +++++++++++ .../mvt_single_layer_vector_source.tsx | 2 +- .../mvt_single_layer_vector_source_editor.tsx | 15 ++++++++- 8 files changed, 64 insertions(+), 25 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap index 2f50f4fd59370..17772da5a492d 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap @@ -185,14 +185,13 @@ exports[`should render error for dupes 1`] = ` - - Add field - + Add + `; @@ -381,14 +380,13 @@ exports[`should render error for empty name 1`] = ` - - Add field - + Add + `; @@ -577,13 +575,12 @@ exports[`should render field editor 1`] = ` - - Add field - + Add + `; diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_source_settings.test.tsx.snap b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_source_settings.test.tsx.snap index afe1c72a0d536..142756ba907b7 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_source_settings.test.tsx.snap +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_source_settings.test.tsx.snap @@ -8,6 +8,7 @@ exports[`should render with fields 1`] = ` fullWidth={false} hasChildLabel={true} hasEmptyLabelSpace={false} + helpText="Name of the target data layer in the tile" label="Layer name" labelType="label" > @@ -22,6 +23,7 @@ exports[`should render with fields 1`] = ` fullWidth={false} hasChildLabel={true} hasEmptyLabelSpace={false} + helpText="Zoom levels where the layer is present in the tiles. This does not correspond directly to visibility. Layer data from lower levels can always be displayed at higher zoom levels (but not vice versa)." label="Available levels" labelType="label" > @@ -52,6 +54,7 @@ exports[`should render with fields 1`] = ` fullWidth={false} hasChildLabel={true} hasEmptyLabelSpace={false} + helpText="Fields which are available in the tile for the layer. These can be used for tooltips and dynamic styling." label="Fields" labelType="label" > @@ -86,6 +89,7 @@ exports[`should render without fields 1`] = ` fullWidth={false} hasChildLabel={true} hasEmptyLabelSpace={false} + helpText="Name of the target data layer in the tile" label="Layer name" labelType="label" > @@ -100,6 +104,7 @@ exports[`should render without fields 1`] = ` fullWidth={false} hasChildLabel={true} hasEmptyLabelSpace={false} + helpText="Zoom levels where the layer is present in the tiles. This does not correspond directly to visibility. Layer data from lower levels can always be displayed at higher zoom levels (but not vice versa)." label="Available levels" labelType="label" > diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_vector_source_editor.test.tsx.snap b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_vector_source_editor.test.tsx.snap index 932aa4d6ab128..c700acbdb51bb 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_vector_source_editor.test.tsx.snap +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_vector_source_editor.test.tsx.snap @@ -8,10 +8,12 @@ exports[`should render source creation editor (fields should _not_ be included) fullWidth={false} hasChildLabel={true} hasEmptyLabelSpace={false} + helpText="URL of the .mvt vector tile service. e.g. http://company.com/{z}/{x}/{y}.pbf" label="Url" labelType="label" > diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/layer_wizard.tsx index 1973570765295..32fa329be85df 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/layer_wizard.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/layer_wizard.tsx @@ -16,7 +16,7 @@ import { TiledSingleLayerVectorSourceSettings } from '../../../../common/descrip export const mvtVectorSourceWizardConfig: LayerWizard = { categories: [LAYER_WIZARD_CATEGORY.REFERENCE], description: i18n.translate('xpack.maps.source.mvtVectorSourceWizard', { - defaultMessage: '.mvt vector tiles', + defaultMessage: 'Data service implementing the Mapbox vector tile specification', }), icon: 'grid', renderWizard: ({ previewLayers, mapColors }: RenderWizardArguments) => { diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx index 084f349b17426..a587bfd4b9f2d 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx @@ -7,10 +7,10 @@ import React, { ChangeEvent, Component, Fragment } from 'react'; import { - EuiButton, EuiButtonIcon, EuiFlexGroup, EuiFlexItem, + EuiButtonEmpty, EuiSuperSelect, EuiFieldText, EuiSpacer, @@ -199,9 +199,11 @@ export class MVTFieldConfigEditor extends Component { {this._renderFieldConfig()} - - {'Add field'} - + + {i18n.translate('xpack.maps.mvtSource.addFieldLabel', { + defaultMessage: 'Add', + })} + ); } diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx index f244109c4ab15..cf69868b54eac 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx @@ -132,6 +132,13 @@ export class MVTSingleLayerSourceSettings extends Component { label={i18n.translate('xpack.maps.source.MVTSingleLayerVectorSourceEditor.fieldsMessage', { defaultMessage: 'Fields', })} + helpText={i18n.translate( + 'xpack.maps.source.MVTSingleLayerVectorSourceEditor.fieldsHelpMessage', + { + defaultMessage: + 'Fields which are available in the tile for the layer. These can be used for tooltips and dynamic styling.', + } + )} > { defaultMessage: 'Layer name', } )} + helpText={i18n.translate( + 'xpack.maps.source.MVTSingleLayerVectorSourceEditor.layerNameHelpMessage', + { + defaultMessage: 'Name of the target data layer in the tile', + } + )} > { defaultMessage: 'Available levels', } )} + helpText={i18n.translate( + 'xpack.maps.source.MVTSingleLayerVectorSourceEditor.zoomRangeHelpMessage', + { + defaultMessage: + 'Zoom levels where the layer is present in the tiles. This does not correspond directly to visibility. Layer data from lower levels can always be displayed at higher zoom levels (but not vice versa).', + } + )} > { label={i18n.translate('xpack.maps.source.MVTSingleLayerVectorSourceEditor.urlMessage', { defaultMessage: 'Url', })} + helpText={i18n.translate( + 'xpack.maps.source.MVTSingleLayerVectorSourceEditor.urlHelpMessage', + { + defaultMessage: 'URL of the .mvt vector tile service. e.g. {url}', + values: { + url: 'http://company.com/{z}/{x}/{y}.pbf', + }, + } + )} > - + Date: Fri, 26 Jun 2020 18:50:17 -0400 Subject: [PATCH 52/97] styling changes --- .../mvt_field_config_editor.test.tsx.snap | 162 +++++++++--------- .../mvt_field_config_editor.tsx | 31 ++-- 2 files changed, 97 insertions(+), 96 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap index 17772da5a492d..acbda925feff0 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap @@ -17,6 +17,15 @@ exports[`should render error for dupes 1`] = ` + } compressed={false} fullWidth={false} hasDividers={false} @@ -52,15 +61,6 @@ exports[`should render error for dupes 1`] = ` valueOfSelected="String" /> - - - + } compressed={false} fullWidth={false} hasDividers={false} @@ -112,15 +121,6 @@ exports[`should render error for dupes 1`] = ` valueOfSelected="String" /> - - - + } compressed={false} fullWidth={false} hasDividers={false} @@ -172,15 +181,6 @@ exports[`should render error for dupes 1`] = ` valueOfSelected="Number" /> - - - + } compressed={false} fullWidth={false} hasDividers={false} @@ -247,15 +256,6 @@ exports[`should render error for empty name 1`] = ` valueOfSelected="String" /> - - - + } compressed={false} fullWidth={false} hasDividers={false} @@ -307,15 +316,6 @@ exports[`should render error for empty name 1`] = ` valueOfSelected="String" /> - - - + } compressed={false} fullWidth={false} hasDividers={false} @@ -367,15 +376,6 @@ exports[`should render error for empty name 1`] = ` valueOfSelected="Number" /> - - - + } compressed={false} fullWidth={false} hasDividers={false} @@ -442,15 +451,6 @@ exports[`should render field editor 1`] = ` valueOfSelected="String" /> - - - + } compressed={false} fullWidth={false} hasDividers={false} @@ -502,15 +511,6 @@ exports[`should render field editor 1`] = ` valueOfSelected="String" /> - - - + } compressed={false} fullWidth={false} hasDividers={false} @@ -562,15 +571,6 @@ exports[`should render field editor 1`] = ` valueOfSelected="Number" /> - - - { this._fieldChange(newFields); }; + const addButton = ( + { + this._removeField(index); + }} + title={i18n.translate('xpack.maps.mvtSource.trashButtonTitle', { + defaultMessage: 'Remove field', + })} + aria-label={i18n.translate('xpack.maps.mvtSource.trashButtonAriaLabel', { + defaultMessage: 'Remove field', + })} + /> + ); return ( onChange(value)} + append={addButton} /> ); } @@ -174,21 +190,6 @@ export class MVTFieldConfigEditor extends Component { {this._renderFieldNameInput(mvtFieldConfig, index)} {this._renderFieldTypeDropDown(mvtFieldConfig, index)} - - { - this._removeField(index); - }} - title={i18n.translate('xpack.maps.mvtSource.trashButtonTitle', { - defaultMessage: 'Remove field', - })} - aria-label={i18n.translate('xpack.maps.mvtSource.trashButtonAriaLabel', { - defaultMessage: 'Remove field', - })} - /> - ); }); From b0cac12c4f181edc55ff6100a2d33706508ca976 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Fri, 26 Jun 2020 19:16:32 -0400 Subject: [PATCH 53/97] style option box a little better --- .../mvt_field_config_editor.test.tsx.snap | 462 ++++++++++++------ ...single_layer_source_settings.test.tsx.snap | 56 ++- .../mvt_field_config_editor.tsx | 67 ++- .../mvt_single_layer_source_settings.test.tsx | 6 + .../mvt_single_layer_source_settings.tsx | 46 +- 5 files changed, 447 insertions(+), 190 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap index acbda925feff0..befff16f33a1f 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap @@ -35,25 +35,41 @@ exports[`should render error for dupes 1`] = ` options={ Array [ Object { - "inputDisplay": - - + "inputDisplay": + + + + string - - , + + , "value": "String", }, Object { - "inputDisplay": - - + "inputDisplay": + + + + number - - , + + , "value": "Number", }, ] @@ -95,25 +111,41 @@ exports[`should render error for dupes 1`] = ` options={ Array [ Object { - "inputDisplay": - - + "inputDisplay": + + + + string - - , + + , "value": "String", }, Object { - "inputDisplay": - - + "inputDisplay": + + + + number - - , + + , "value": "Number", }, ] @@ -155,25 +187,41 @@ exports[`should render error for dupes 1`] = ` options={ Array [ Object { - "inputDisplay": - - + "inputDisplay": + + + + string - - , + + , "value": "String", }, Object { - "inputDisplay": - - + "inputDisplay": + + + + number - - , + + , "value": "Number", }, ] @@ -185,13 +233,23 @@ exports[`should render error for dupes 1`] = ` - - Add - + + + Add + + + `; @@ -230,25 +288,41 @@ exports[`should render error for empty name 1`] = ` options={ Array [ Object { - "inputDisplay": - - + "inputDisplay": + + + + string - - , + + , "value": "String", }, Object { - "inputDisplay": - - + "inputDisplay": + + + + number - - , + + , "value": "Number", }, ] @@ -290,25 +364,41 @@ exports[`should render error for empty name 1`] = ` options={ Array [ Object { - "inputDisplay": - - + "inputDisplay": + + + + string - - , + + , "value": "String", }, Object { - "inputDisplay": - - + "inputDisplay": + + + + number - - , + + , "value": "Number", }, ] @@ -350,25 +440,41 @@ exports[`should render error for empty name 1`] = ` options={ Array [ Object { - "inputDisplay": - - + "inputDisplay": + + + + string - - , + + , "value": "String", }, Object { - "inputDisplay": - - + "inputDisplay": + + + + number - - , + + , "value": "Number", }, ] @@ -380,13 +486,23 @@ exports[`should render error for empty name 1`] = ` - - Add - + + + Add + + + `; @@ -425,25 +541,41 @@ exports[`should render field editor 1`] = ` options={ Array [ Object { - "inputDisplay": - - + "inputDisplay": + + + + string - - , + + , "value": "String", }, Object { - "inputDisplay": - - + "inputDisplay": + + + + number - - , + + , "value": "Number", }, ] @@ -485,25 +617,41 @@ exports[`should render field editor 1`] = ` options={ Array [ Object { - "inputDisplay": - - + "inputDisplay": + + + + string - - , + + , "value": "String", }, Object { - "inputDisplay": - - + "inputDisplay": + + + + number - - , + + , "value": "Number", }, ] @@ -545,25 +693,41 @@ exports[`should render field editor 1`] = ` options={ Array [ Object { - "inputDisplay": - - + "inputDisplay": + + + + string - - , + + , "value": "String", }, Object { - "inputDisplay": - - + "inputDisplay": + + + + number - - , + + , "value": "Number", }, ] @@ -575,12 +739,22 @@ exports[`should render field editor 1`] = ` - - Add - + + + Add + + + `; diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_source_settings.test.tsx.snap b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_source_settings.test.tsx.snap index 142756ba907b7..1fb81dc777c85 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_source_settings.test.tsx.snap +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_source_settings.test.tsx.snap @@ -1,5 +1,57 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`should not render when no layername 1`] = ` + + + + + + + + +`; + exports[`should render with fields 1`] = ` @@ -54,7 +107,7 @@ exports[`should render with fields 1`] = ` fullWidth={false} hasChildLabel={true} hasEmptyLabelSpace={false} - helpText="Fields which are available in the tile for the layer. These can be used for tooltips and dynamic styling." + helpText="Fields which are available in the \`foobar\` layer. These can be used for tooltips and dynamic styling." label="Fields" labelType="label" > @@ -94,6 +147,7 @@ exports[`should render without fields 1`] = ` labelType="label" > diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx index c8faad4819550..4d00cbeba887d 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx @@ -14,6 +14,7 @@ import { EuiSuperSelect, EuiFieldText, EuiSpacer, + EuiHighlight, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import _ from 'lodash'; @@ -21,34 +22,44 @@ import { MVTFieldDescriptor } from '../../../../common/descriptor_types'; import { FieldIcon } from '../../../../../../../src/plugins/kibana_react/public'; import { MVTFieldType } from '../../../../common/constants'; +function makeOption({ + value, + icon, + message, +}: { + value: MVTFieldType; + icon: string; + message: string; +}) { + return { + value, + inputDisplay: ( + + + + + {message} + + ), + }; +} + const FIELD_TYPE_OPTIONS = [ { value: MVTFieldType.STRING, - inputDisplay: ( - - - - {i18n.translate('xpack.maps.mvtSource.stringFieldLabel', { - defaultMessage: 'string', - })} - - - ), + icon: 'string', + message: i18n.translate('xpack.maps.mvtSource.stringFieldLabel', { + defaultMessage: 'string', + }), }, { value: MVTFieldType.NUMBER, - inputDisplay: ( - - - - {i18n.translate('xpack.maps.mvtSource.numberFieldLabel', { - defaultMessage: 'number', - })} - - - ), + icon: 'number', + message: i18n.translate('xpack.maps.mvtSource.numberFieldLabel', { + defaultMessage: 'number', + }), }, -]; +].map(makeOption); export interface Props { fields: MVTFieldDescriptor[]; @@ -200,11 +211,15 @@ export class MVTFieldConfigEditor extends Component { {this._renderFieldConfig()} - - {i18n.translate('xpack.maps.mvtSource.addFieldLabel', { - defaultMessage: 'Add', - })} - + + + + {i18n.translate('xpack.maps.mvtSource.addFieldLabel', { + defaultMessage: 'Add', + })} + + + ); } diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.test.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.test.tsx index 22436fbe5117d..04b83b23d36b3 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.test.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.test.tsx @@ -44,3 +44,9 @@ test('should render without fields', async () => { const component = shallow(); expect(component).toMatchSnapshot(); }); + +test('should not render when no layername', async () => { + const settings = { ...defaultSettings, layerName: '' }; + const component = shallow(); + expect(component).toMatchSnapshot(); +}); diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx index cf69868b54eac..af5e81302484a 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx @@ -127,25 +127,32 @@ export class MVTSingleLayerSourceSettings extends Component { }; render() { - const fieldEditor = this.props.includeFields ? ( - - - - ) : null; + const fieldEditor = + this.props.includeFields && this.state.currentLayerName !== '' ? ( + + + + ) : null; return ( @@ -166,6 +173,7 @@ export class MVTSingleLayerSourceSettings extends Component { Date: Fri, 26 Jun 2020 19:39:33 -0400 Subject: [PATCH 54/97] ts fixes --- .../mvt_field_config_editor.tsx | 1 - .../mvt_single_layer_source_settings.tsx | 4 ++-- .../update_source_editor.tsx | 22 ++++++++++--------- 3 files changed, 14 insertions(+), 13 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx index 4d00cbeba887d..84c59b499aefe 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx @@ -14,7 +14,6 @@ import { EuiSuperSelect, EuiFieldText, EuiSpacer, - EuiHighlight, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import _ from 'lodash'; diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx index af5e81302484a..46a180ee59947 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx @@ -22,11 +22,11 @@ export type MVTSettings = { }; export interface State { - currentLayerName: 'string'; + currentLayerName: string; currentMinSourceZoom: number; currentMaxSourceZoom: number; currentFields: MVTFieldDescriptor[]; - previousLayerName: 'string'; + previousLayerName: string; previousMinSourceZoom: number; previousMaxSourceZoom: number; previousFields: MVTFieldDescriptor[]; diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx index 26c31d7b09f0c..8262eec47fb15 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx @@ -30,28 +30,30 @@ export class UpdateSourceEditor extends Component { }; _handleChange = (settings: MVTSettings) => { - const changes: OnSourceChangeArgs = []; - if (settings.layerName !== this.props.layerName) { + const changes: OnSourceChangeArgs[] = []; + if (settings.layerName !== this.props.source.getLayerName()) { changes.push({ propName: 'layerName', value: settings.layerName }); } - if (settings.minSourceZoom !== this.props.minSourceZoom) { + if (settings.minSourceZoom !== this.props.source.getMinZoom()) { changes.push({ propName: 'minSourceZoom', value: settings.minSourceZoom }); } - if (settings.maxSourceZoom !== this.props.maxSourceZoom) { + if (settings.maxSourceZoom !== this.props.source.getMaxZoom()) { changes.push({ propName: 'maxSourceZoom', value: settings.maxSourceZoom }); } - if (!_.isEqual(settings.fields, this.props.fields)) { + if (!_.isEqual(settings.fields, this._getFieldDescriptors())) { changes.push({ propName: 'fields', value: settings.fields }); } this.props.onChange(...changes); }; + _getFieldDescriptors(): MVTFieldDescriptor[] { + return this.props.source.getMVTFields().map((field: MVTField) => { + return field.getMVTFieldDescriptor(); + }); + } + _renderSourceSettingsCard() { - const fieldDescriptors: MVTFieldDescriptor[] = this.props.source - .getMVTFields() - .map((field: MVTField) => { - return field.getMVTFieldDescriptor(); - }); + const fieldDescriptors: MVTFieldDescriptor[] = this._getFieldDescriptors(); return ( From ef248c951094c281cf01f0c0c9bcf2c39bec1ce3 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Fri, 26 Jun 2020 20:06:11 -0400 Subject: [PATCH 55/97] fix console error --- .../classes/styles/vector/components/field_select.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/field_select.js b/x-pack/plugins/maps/public/classes/styles/vector/components/field_select.js index 51700a5e83394..dcc1f1eadbd54 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/components/field_select.js +++ b/x-pack/plugins/maps/public/classes/styles/vector/components/field_select.js @@ -81,9 +81,16 @@ export function FieldSelect({ fields, selectedFieldName, onChange, styleName, .. let selectedOption; if (selectedFieldName) { - selectedOption = fields.find((field) => { + const field = fields.find((field) => { return field.name === selectedFieldName; }); + //Do not spread in all the other unused values (e.g. type, supportsAutoDomain etc...) + if (field) { + selectedOption = { + value: field.value, + label: field.label, + }; + } } return ( From 034430c437ecabaf61f4b5f43d166bbaefff022a Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Mon, 29 Jun 2020 12:02:41 -0400 Subject: [PATCH 56/97] remove mbProperties from interface --- .../common/descriptor_types/map_descriptor.ts | 2 ++ .../tiled_vector_layer.test.tsx | 21 ++++++++++--------- .../tiled_vector_layer/tiled_vector_layer.tsx | 19 ++++------------- .../layers/vector_layer/vector_layer.d.ts | 10 ++------- .../features_tooltip/feature_properties.js | 2 +- .../map/mb/tooltip_control/tooltip_popover.js | 17 +++++++-------- 6 files changed, 28 insertions(+), 43 deletions(-) diff --git a/x-pack/plugins/maps/common/descriptor_types/map_descriptor.ts b/x-pack/plugins/maps/common/descriptor_types/map_descriptor.ts index 00380ca12a486..2d5d6361dcc45 100644 --- a/x-pack/plugins/maps/common/descriptor_types/map_descriptor.ts +++ b/x-pack/plugins/maps/common/descriptor_types/map_descriptor.ts @@ -5,6 +5,7 @@ */ /* eslint-disable @typescript-eslint/consistent-type-definitions */ +import { GeoJsonProperties } from 'geojson'; import { Query } from '../../../../../src/plugins/data/common'; import { DRAW_TYPE, ES_GEO_FIELD_TYPE, ES_SPATIAL_RELATIONS } from '../constants'; @@ -41,6 +42,7 @@ export type Goto = { export type TooltipFeature = { id: number; layerId: string; + mbProperties?: GeoJsonProperties; }; export type TooltipState = { diff --git a/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.test.tsx b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.test.tsx index 1849dca8c9bc7..b142a8c164394 100644 --- a/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.test.tsx +++ b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.test.tsx @@ -85,21 +85,22 @@ describe('icon', () => { }); describe('getFeatureById', () => { - it('should echo properties with dummy geometry', async () => { + it('should return null feature', async () => { const layer: TiledVectorLayer = createLayer({}, {}); const properties = { foo: 'bar', }; - const feature = layer.getFeatureById(undefined, { mbProperties: properties }) as Feature; - - expect(feature.properties).toEqual(properties); - expect(feature.geometry).toEqual({ - type: 'Point', - coordinates: [0, 0], - }); - expect(feature.id).toEqual(undefined); - expect(feature.type).toEqual('Feature'); + const feature = layer.getFeatureById(undefined) as Feature; + expect(feature).toEqual(null); + + // expect(feature.properties).toEqual(properties); + // expect(feature.geometry).toEqual({ + // type: 'Point', + // coordinates: [0, 0], + // }); + // expect(feature.id).toEqual(undefined); + // expect(feature.type).toEqual('Feature'); }); }); diff --git a/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx index 0ef1157e1e682..3128bc61b8eb0 100644 --- a/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx +++ b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx @@ -6,7 +6,7 @@ import React from 'react'; import { EuiIcon } from '@elastic/eui'; -import { Feature, GeoJsonProperties } from 'geojson'; +import { Feature } from 'geojson'; import { VectorStyle } from '../../styles/vector/vector_style'; import { SOURCE_DATA_REQUEST_ID, LAYER_TYPE } from '../../../../common/constants'; import { VectorLayer, VectorLayerArguments } from '../vector_layer/vector_layer'; @@ -198,19 +198,8 @@ export class TiledVectorLayer extends VectorLayer { return Math.max(this._source.getMinZoom(), super.getMinZoom()); } - getFeatureById( - id: string | number | undefined, - meta: { mbProperties: GeoJsonProperties } - ): Feature | null { - const properties = this._source.getFeatureProperties(id, meta.mbProperties); - return { - type: 'Feature', - properties, - id, - geometry: { - type: 'Point', - coordinates: [0, 0], - }, - }; + getFeatureById(id: string | number | undefined): Feature | null { + // Cannot return the feature + return null; } } diff --git a/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.d.ts b/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.d.ts index 74d382e0d7a80..ea8e2996b1cf3 100644 --- a/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.d.ts +++ b/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.d.ts @@ -33,10 +33,7 @@ export interface IVectorLayer extends ILayer { getValidJoins(): IJoin[]; getSource(): IVectorSource; getStyle(): IVectorStyle; - getFeatureById( - id: string | number | undefined, - meta: { mbProperties: GeoJsonProperties } - ): Feature | null; + getFeatureById(id: string | number | undefined): Feature | null; getPropertiesForTooltip( properties: GeoJsonProperties, featureId?: string | number @@ -85,10 +82,7 @@ export class VectorLayer extends AbstractLayer implements IVectorLayer { _setMbLinePolygonProperties(mbMap: unknown, mvtSourceLayer?: string): void; getSource(): IVectorSource; getStyle(): IVectorStyle; - getFeatureById( - id: string | number | undefined, - meta: { mbProperties: GeoJsonProperties } - ): Feature | null; + getFeatureById(id: string | number | undefined): Feature | null; getPropertiesForTooltip( properties: GeoJsonProperties, featureId?: string | number diff --git a/x-pack/plugins/maps/public/connected_components/map/features_tooltip/feature_properties.js b/x-pack/plugins/maps/public/connected_components/map/features_tooltip/feature_properties.js index 3edfd833ed226..a54f848ed80c8 100644 --- a/x-pack/plugins/maps/public/connected_components/map/features_tooltip/feature_properties.js +++ b/x-pack/plugins/maps/public/connected_components/map/features_tooltip/feature_properties.js @@ -65,7 +65,7 @@ export class FeatureProperties extends React.Component { properties = await this.props.loadFeatureProperties({ layerId: nextLayerId, featureId: nextFeatureId, - meta: meta, + mbProperties: meta.mbProperties, }); } catch (error) { if (this._isMounted) { diff --git a/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_popover.js b/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_popover.js index bb5085417f1da..2efba44837a5b 100644 --- a/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_popover.js +++ b/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_popover.js @@ -56,13 +56,13 @@ export class TooltipPopover extends Component { // Must load original geometry instead of using geometry from mapbox feature. // Mapbox feature geometry is from vector tile and is not the same as the original geometry. - _loadFeatureGeometry = ({ layerId, featureId, meta }) => { + _loadFeatureGeometry = ({ layerId, featureId }) => { const tooltipLayer = this._findLayerById(layerId); if (!tooltipLayer) { return null; } - const targetFeature = tooltipLayer.getFeatureById(featureId, meta); + const targetFeature = tooltipLayer.getFeatureById(featureId); if (!targetFeature) { return null; } @@ -70,18 +70,17 @@ export class TooltipPopover extends Component { return targetFeature.geometry; }; - _loadFeatureProperties = async ({ layerId, featureId, meta }) => { + _loadFeatureProperties = async ({ layerId, featureId, mbProperties }) => { const tooltipLayer = this._findLayerById(layerId); if (!tooltipLayer) { return []; } - const targetFeature = tooltipLayer.getFeatureById(featureId, meta); - if (!targetFeature) { - return []; - } + const targetFeature = tooltipLayer.getFeatureById(featureId); - return await tooltipLayer.getPropertiesForTooltip(targetFeature.properties); + // fallback to mbProperties if the layer itself cannot get a feature. + const properties = targetFeature ? targetFeature.properties : mbProperties; + return await tooltipLayer.getPropertiesForTooltip(properties); }; _loadPreIndexedShape = async ({ layerId, featureId }) => { @@ -90,7 +89,7 @@ export class TooltipPopover extends Component { return null; } - const targetFeature = tooltipLayer.getFeatureById(featureId, { mbProperties: {} }); + const targetFeature = tooltipLayer.getFeatureById(featureId); if (!targetFeature) { return null; } From 6bf83a60e73b5e09f8b8e5bb4239bac47fa2c0b3 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Mon, 29 Jun 2020 12:10:35 -0400 Subject: [PATCH 57/97] remove unused method --- .../mvt_single_layer_vector_source.tsx | 6 ------ .../public/classes/sources/vector_source/vector_source.d.ts | 4 ---- 2 files changed, 10 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx index 930702d944302..2a44c5514af42 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx @@ -216,12 +216,6 @@ export class MVTSingleLayerVectorSource extends AbstractSource return this._descriptor.maxSourceZoom; } - getFeatureProperties( - id: string | number | undefined, - mbProperties: GeoJsonProperties - ): GeoJsonProperties | null { - return mbProperties; - } getFeatureGeometry( id: string | number | undefined, mbProperties: GeoJsonProperties 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 e4e9a20d7fcd0..6b77378592ab1 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 @@ -89,10 +89,6 @@ export interface ITiledSingleLayerVectorSource extends IVectorSource { getMinZoom(): number; getMaxZoom(): number; getLayerName(): string; - getFeatureProperties( - id: string | number | undefined, - mbProperties: GeoJsonProperties - ): GeoJsonProperties | null; getFeatureGeometry( id: string | number | undefined, mbProperties: GeoJsonProperties From a6cd19e0a3fe9d1dfc3662c7cd919997d1fa5dac Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Mon, 29 Jun 2020 12:16:37 -0400 Subject: [PATCH 58/97] remove cruft --- .../mvt_single_layer_vector_source.tsx | 8 -------- .../classes/sources/vector_source/vector_source.d.ts | 4 ---- 2 files changed, 12 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx index 2a44c5514af42..15e8a55a3846b 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx @@ -216,14 +216,6 @@ export class MVTSingleLayerVectorSource extends AbstractSource return this._descriptor.maxSourceZoom; } - getFeatureGeometry( - id: string | number | undefined, - mbProperties: GeoJsonProperties - ): Geometry | null { - // Cannot get the raw geometry for a simple tiled service - return null; - } - getBoundsForFilters( boundsFilters: BoundsFilters, registerCancelCallback: (requestToken: symbol, callback: () => void) => void 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 6b77378592ab1..f65bf082bb424 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 @@ -89,8 +89,4 @@ export interface ITiledSingleLayerVectorSource extends IVectorSource { getMinZoom(): number; getMaxZoom(): number; getLayerName(): string; - getFeatureGeometry( - id: string | number | undefined, - mbProperties: GeoJsonProperties - ): Geometry | null; } From d0dcff8710c3b822aed03f75a96d0bb9b80d5d2a Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Mon, 29 Jun 2020 12:19:03 -0400 Subject: [PATCH 59/97] rename for consistency --- x-pack/plugins/maps/common/constants.ts | 2 +- .../maps/common/descriptor_types/sources.ts | 4 ++-- .../maps/public/classes/fields/mvt_field.ts | 10 +++++----- .../mvt_field_config_editor.test.tsx | 20 +++++++++---------- .../mvt_field_config_editor.tsx | 12 +++++------ .../mvt_single_layer_source_settings.test.tsx | 8 ++++---- .../mvt_single_layer_vector_source.test.tsx | 12 +++++------ 7 files changed, 34 insertions(+), 34 deletions(-) diff --git a/x-pack/plugins/maps/common/constants.ts b/x-pack/plugins/maps/common/constants.ts index df7b8ba8a416c..2d3f54f0e1990 100644 --- a/x-pack/plugins/maps/common/constants.ts +++ b/x-pack/plugins/maps/common/constants.ts @@ -222,7 +222,7 @@ export enum SCALING_TYPES { export const RGBA_0000 = 'rgba(0,0,0,0)'; -export enum MVTFieldType { +export enum MVT_FIELD_TYPE { STRING = 'String', NUMBER = 'Number', } diff --git a/x-pack/plugins/maps/common/descriptor_types/sources.ts b/x-pack/plugins/maps/common/descriptor_types/sources.ts index dfbb4a8ff929d..3161336859c84 100644 --- a/x-pack/plugins/maps/common/descriptor_types/sources.ts +++ b/x-pack/plugins/maps/common/descriptor_types/sources.ts @@ -12,7 +12,7 @@ import { RENDER_AS, SORT_ORDER, SCALING_TYPES, - MVTFieldType, + MVT_FIELD_TYPE, } from '../constants'; import { StyleDescriptor, VectorStyleDescriptor } from './style_property_descriptor_types'; import { DataRequestDescriptor } from './data_request_descriptor_types'; @@ -104,7 +104,7 @@ export type XYZTMSSourceDescriptor = AbstractSourceDescriptor & export type MVTFieldDescriptor = { name: string; - type: MVTFieldType; + type: MVT_FIELD_TYPE; }; export type TiledSingleLayerVectorSourceSettings = { diff --git a/x-pack/plugins/maps/public/classes/fields/mvt_field.ts b/x-pack/plugins/maps/public/classes/fields/mvt_field.ts index 8f9856ef1da46..eb2bb94b36a69 100644 --- a/x-pack/plugins/maps/public/classes/fields/mvt_field.ts +++ b/x-pack/plugins/maps/public/classes/fields/mvt_field.ts @@ -5,13 +5,13 @@ */ import { AbstractField, IField } from './field'; -import { FIELD_ORIGIN, MVTFieldType } from '../../../common/constants'; +import { FIELD_ORIGIN, MVT_FIELD_TYPE } from '../../../common/constants'; import { ITiledSingleLayerVectorSource, IVectorSource } from '../sources/vector_source'; import { MVTFieldDescriptor } from '../../../common/descriptor_types'; export class MVTField extends AbstractField implements IField { private readonly _source: ITiledSingleLayerVectorSource; - private readonly _type: MVTFieldType; + private readonly _type: MVT_FIELD_TYPE; constructor({ fieldName, type, @@ -21,7 +21,7 @@ export class MVTField extends AbstractField implements IField { fieldName: string; source: ITiledSingleLayerVectorSource; origin: FIELD_ORIGIN; - type: MVTFieldType; + type: MVT_FIELD_TYPE; }) { super({ fieldName, origin }); this._source = source; @@ -40,9 +40,9 @@ export class MVTField extends AbstractField implements IField { } async getDataType(): Promise { - if (this._type === MVTFieldType.STRING) { + if (this._type === MVT_FIELD_TYPE.STRING) { return 'string'; - } else if (this._type === MVTFieldType.NUMBER) { + } else if (this._type === MVT_FIELD_TYPE.NUMBER) { return 'number'; } else { throw new Error(`Unrecognized MVT field-type ${this._type}`); diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.test.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.test.tsx index 73c884b2c1aaf..4311b05726527 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.test.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.test.tsx @@ -10,21 +10,21 @@ import React from 'react'; import { shallow } from 'enzyme'; import { MVTFieldConfigEditor } from './mvt_field_config_editor'; -import { MVTFieldType } from '../../../../common/constants'; +import { MVT_FIELD_TYPE } from '../../../../common/constants'; test('should render field editor', async () => { const fields = [ { name: 'foo', - type: MVTFieldType.STRING, + type: MVT_FIELD_TYPE.STRING, }, { name: 'food', - type: MVTFieldType.STRING, + type: MVT_FIELD_TYPE.STRING, }, { name: 'fooz', - type: MVTFieldType.NUMBER, + type: MVT_FIELD_TYPE.NUMBER, }, ]; const component = shallow( {}} />); @@ -36,15 +36,15 @@ test('should render error for empty name', async () => { const fields = [ { name: 'foo', - type: MVTFieldType.STRING, + type: MVT_FIELD_TYPE.STRING, }, { name: '', - type: MVTFieldType.STRING, + type: MVT_FIELD_TYPE.STRING, }, { name: 'fooz', - type: MVTFieldType.NUMBER, + type: MVT_FIELD_TYPE.NUMBER, }, ]; const component = shallow( {}} />); @@ -56,15 +56,15 @@ test('should render error for dupes', async () => { const fields = [ { name: 'foo', - type: MVTFieldType.STRING, + type: MVT_FIELD_TYPE.STRING, }, { name: 'bar', - type: MVTFieldType.STRING, + type: MVT_FIELD_TYPE.STRING, }, { name: 'foo', - type: MVTFieldType.NUMBER, + type: MVT_FIELD_TYPE.NUMBER, }, ]; const component = shallow( {}} />); diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx index 84c59b499aefe..b93eb5c22133c 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx @@ -19,14 +19,14 @@ import { i18n } from '@kbn/i18n'; import _ from 'lodash'; import { MVTFieldDescriptor } from '../../../../common/descriptor_types'; import { FieldIcon } from '../../../../../../../src/plugins/kibana_react/public'; -import { MVTFieldType } from '../../../../common/constants'; +import { MVT_FIELD_TYPE } from '../../../../common/constants'; function makeOption({ value, icon, message, }: { - value: MVTFieldType; + value: MVT_FIELD_TYPE; icon: string; message: string; }) { @@ -45,14 +45,14 @@ function makeOption({ const FIELD_TYPE_OPTIONS = [ { - value: MVTFieldType.STRING, + value: MVT_FIELD_TYPE.STRING, icon: 'string', message: i18n.translate('xpack.maps.mvtSource.stringFieldLabel', { defaultMessage: 'string', }), }, { - value: MVTFieldType.NUMBER, + value: MVT_FIELD_TYPE.NUMBER, icon: 'number', message: i18n.translate('xpack.maps.mvtSource.numberFieldLabel', { defaultMessage: 'number', @@ -116,14 +116,14 @@ export class MVTFieldConfigEditor extends Component { _addField = () => { const newFields: MVTFieldDescriptor[] = this.state.currentFields.slice(); newFields.push({ - type: MVTFieldType.STRING, + type: MVT_FIELD_TYPE.STRING, name: '', }); this._fieldChange(newFields); }; _renderFieldTypeDropDown(mvtFieldConfig: MVTFieldDescriptor, index: number) { - const onChange = (type: MVTFieldType) => { + const onChange = (type: MVT_FIELD_TYPE) => { const newFields = this.state.currentFields.slice(); newFields[index] = { type, diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.test.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.test.tsx index 04b83b23d36b3..bee0f144da5ed 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.test.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.test.tsx @@ -10,7 +10,7 @@ import React from 'react'; import { shallow } from 'enzyme'; import { MVTSingleLayerSourceSettings } from './mvt_single_layer_source_settings'; -import { MVTFieldType } from '../../../../common/constants'; +import { MVT_FIELD_TYPE } from '../../../../common/constants'; const defaultSettings = { handleChange: () => {}, @@ -18,15 +18,15 @@ const defaultSettings = { fields: [ { name: 'foo', - type: MVTFieldType.STRING, + type: MVT_FIELD_TYPE.STRING, }, { name: 'food', - type: MVTFieldType.STRING, + type: MVT_FIELD_TYPE.STRING, }, { name: 'fooz', - type: MVTFieldType.NUMBER, + type: MVT_FIELD_TYPE.NUMBER, }, ], minSourceZoom: 4, diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.test.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.test.tsx index 4a31f940d793c..2de5668147cbb 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.test.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.test.tsx @@ -5,7 +5,7 @@ */ import { MVTSingleLayerVectorSource } from './mvt_single_layer_vector_source'; -import { MVTFieldType, SOURCE_TYPES } from '../../../../common/constants'; +import { MVT_FIELD_TYPE, SOURCE_TYPES } from '../../../../common/constants'; import { TiledSingleLayerVectorSourceDescriptor } from '../../../../common/descriptor_types'; const descriptor: TiledSingleLayerVectorSourceDescriptor = { @@ -37,7 +37,7 @@ describe('canFormatFeatureProperties', () => { it('true if at least one matching tooltip', async () => { const descriptorWithTooltips = { ...descriptor, - fields: [{ name: 'foobar', type: MVTFieldType.STRING }], + fields: [{ name: 'foobar', type: MVT_FIELD_TYPE.STRING }], tooltipProperties: ['foo', 'foobar', 'bar'], }; const source = new MVTSingleLayerVectorSource(descriptorWithTooltips); @@ -46,7 +46,7 @@ describe('canFormatFeatureProperties', () => { it('false if no matching tooltip', async () => { const descriptorWithTooltips = { ...descriptor, - fields: [{ name: 'foobar', type: MVTFieldType.STRING }], + fields: [{ name: 'foobar', type: MVT_FIELD_TYPE.STRING }], tooltipProperties: ['foo', 'bar'], }; const source = new MVTSingleLayerVectorSource(descriptorWithTooltips); @@ -60,15 +60,15 @@ describe('filterAndFormatPropertiesToHtml', () => { fields: [ { name: 'foo', - type: MVTFieldType.STRING, + type: MVT_FIELD_TYPE.STRING, }, { name: 'food', - type: MVTFieldType.STRING, + type: MVT_FIELD_TYPE.STRING, }, { name: 'fooz', - type: MVTFieldType.NUMBER, + type: MVT_FIELD_TYPE.NUMBER, }, ], tooltipProperties: ['foo', 'fooz'], From d066db755990e180ad74793d3d4a6a9f8aa450c7 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Mon, 29 Jun 2020 14:03:51 -0400 Subject: [PATCH 60/97] remove unused param --- .../classes/layers/vector_layer/vector_layer.d.ts | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.d.ts b/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.d.ts index ea8e2996b1cf3..46b772bed91e8 100644 --- a/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.d.ts +++ b/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.d.ts @@ -34,10 +34,7 @@ export interface IVectorLayer extends ILayer { getSource(): IVectorSource; getStyle(): IVectorStyle; getFeatureById(id: string | number | undefined): Feature | null; - getPropertiesForTooltip( - properties: GeoJsonProperties, - featureId?: string | number - ): Promise; + getPropertiesForTooltip(properties: GeoJsonProperties): Promise; } export class VectorLayer extends AbstractLayer implements IVectorLayer { @@ -83,8 +80,5 @@ export class VectorLayer extends AbstractLayer implements IVectorLayer { getSource(): IVectorSource; getStyle(): IVectorStyle; getFeatureById(id: string | number | undefined): Feature | null; - getPropertiesForTooltip( - properties: GeoJsonProperties, - featureId?: string | number - ): Promise; + getPropertiesForTooltip(properties: GeoJsonProperties): Promise; } From 3c2ab697a7a25af41978682ba5925387985e9b87 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Mon, 29 Jun 2020 14:18:08 -0400 Subject: [PATCH 61/97] feedback --- .../tiled_vector_layer/tiled_vector_layer.tsx | 2 +- .../classes/layers/vector_layer/vector_layer.d.ts | 4 ++-- .../map/features_tooltip/feature_properties.js | 6 +++--- .../map/mb/tooltip_control/tooltip_control.js | 15 ++++++--------- .../mb/tooltip_control/tooltip_control.test.js | 2 +- .../map/mb/tooltip_control/tooltip_popover.js | 9 ++++++--- 6 files changed, 19 insertions(+), 19 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx index 3128bc61b8eb0..76ff7199b5cc1 100644 --- a/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx +++ b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx @@ -198,7 +198,7 @@ export class TiledVectorLayer extends VectorLayer { return Math.max(this._source.getMinZoom(), super.getMinZoom()); } - getFeatureById(id: string | number | undefined): Feature | null { + getFeatureById(id: string | number): Feature | null { // Cannot return the feature return null; } diff --git a/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.d.ts b/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.d.ts index 46b772bed91e8..77daf9c9af570 100644 --- a/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.d.ts +++ b/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.d.ts @@ -33,7 +33,7 @@ export interface IVectorLayer extends ILayer { getValidJoins(): IJoin[]; getSource(): IVectorSource; getStyle(): IVectorStyle; - getFeatureById(id: string | number | undefined): Feature | null; + getFeatureById(id: string | number): Feature | null; getPropertiesForTooltip(properties: GeoJsonProperties): Promise; } @@ -79,6 +79,6 @@ export class VectorLayer extends AbstractLayer implements IVectorLayer { _setMbLinePolygonProperties(mbMap: unknown, mvtSourceLayer?: string): void; getSource(): IVectorSource; getStyle(): IVectorStyle; - getFeatureById(id: string | number | undefined): Feature | null; + getFeatureById(id: string | number): Feature | null; getPropertiesForTooltip(properties: GeoJsonProperties): Promise; } diff --git a/x-pack/plugins/maps/public/connected_components/map/features_tooltip/feature_properties.js b/x-pack/plugins/maps/public/connected_components/map/features_tooltip/feature_properties.js index a54f848ed80c8..5e2a153b2ccbf 100644 --- a/x-pack/plugins/maps/public/connected_components/map/features_tooltip/feature_properties.js +++ b/x-pack/plugins/maps/public/connected_components/map/features_tooltip/feature_properties.js @@ -35,11 +35,11 @@ export class FeatureProperties extends React.Component { this._fetchProperties({ nextFeatureId: this.props.featureId, nextLayerId: this.props.layerId, - meta: this.props.meta, + mbProperties: this.props.mbProperties, }); }; - _fetchProperties = async ({ nextLayerId, nextFeatureId, meta }) => { + _fetchProperties = async ({ nextLayerId, nextFeatureId, mbProperties }) => { if (this.prevLayerId === nextLayerId && this.prevFeatureId === nextFeatureId) { // do not reload same feature properties return; @@ -65,7 +65,7 @@ export class FeatureProperties extends React.Component { properties = await this.props.loadFeatureProperties({ layerId: nextLayerId, featureId: nextFeatureId, - mbProperties: meta.mbProperties, + mbProperties: mbProperties, }); } catch (error) { if (this._isMounted) { diff --git a/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_control.js b/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_control.js index 1e22573f7e2cf..6e8bf6382cd5f 100644 --- a/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_control.js +++ b/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_control.js @@ -53,7 +53,7 @@ export class TooltipControl extends React.Component { }); } - _getIdsAndFeaturesMeta(mbFeatures) { + _getTooltipFeatures(mbFeatures) { const uniqueFeatures = []; //there may be duplicates in the results from mapbox //this is because mapbox returns the results per tile @@ -76,9 +76,7 @@ export class TooltipControl extends React.Component { uniqueFeatures.push({ id: featureId, layerId: layerId, - meta: { - mbProperties: mbFeature.properties, - }, + mbProperties: mbFeature.properties, }); } } @@ -102,9 +100,9 @@ export class TooltipControl extends React.Component { const targetMbFeataure = mbFeatures[0]; const popupAnchorLocation = justifyAnchorLocation(e.lngLat, targetMbFeataure); - const features = this._getIdsAndFeaturesMeta(mbFeatures); + const features = this._getTooltipFeatures(mbFeatures); this.props.openOnClickTooltip({ - features: features, + features, location: popupAnchorLocation, }); }; @@ -131,10 +129,9 @@ export class TooltipControl extends React.Component { } const popupAnchorLocation = justifyAnchorLocation(e.lngLat, targetMbFeature); - const featuresAndMeta = this._getIdsAndFeaturesMeta(mbFeatures); + const features = this._getTooltipFeatures(mbFeatures); this.props.openOnHoverTooltip({ - mbFeatures, - features: featuresAndMeta, + features: features, location: popupAnchorLocation, }); }, 100); diff --git a/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_control.test.js b/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_control.test.js index 741088b4c428b..feac956316f7c 100644 --- a/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_control.test.js +++ b/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_control.test.js @@ -236,7 +236,7 @@ describe('TooltipControl', () => { sinon.assert.notCalled(closeOnClickTooltipStub); sinon.assert.calledWith(openOnClickTooltipStub, { - features: [{ id: 1, layerId: 'tfi3f', meta: { mbProperties: { __kbn__feature_id__: 1 } } }], + features: [{ id: 1, layerId: 'tfi3f', mbProperties: { __kbn__feature_id__: 1 } }], location: [100, 30], }); }); diff --git a/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_popover.js b/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_popover.js index 2efba44837a5b..81d30947f14da 100644 --- a/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_popover.js +++ b/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_popover.js @@ -58,7 +58,7 @@ export class TooltipPopover extends Component { // Mapbox feature geometry is from vector tile and is not the same as the original geometry. _loadFeatureGeometry = ({ layerId, featureId }) => { const tooltipLayer = this._findLayerById(layerId); - if (!tooltipLayer) { + if (!tooltipLayer || typeof featureId === 'undefined') { return null; } @@ -76,7 +76,10 @@ export class TooltipPopover extends Component { return []; } - const targetFeature = tooltipLayer.getFeatureById(featureId); + let targetFeature; + if (typeof featureId !== 'undefined') { + targetFeature = tooltipLayer.getFeatureById(featureId); + } // fallback to mbProperties if the layer itself cannot get a feature. const properties = targetFeature ? targetFeature.properties : mbProperties; @@ -85,7 +88,7 @@ export class TooltipPopover extends Component { _loadPreIndexedShape = async ({ layerId, featureId }) => { const tooltipLayer = this._findLayerById(layerId); - if (!tooltipLayer) { + if (!tooltipLayer || typeof featureId === 'undefined') { return null; } From 69232acf809885ca24a72e130b4603387f3d6f63 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Mon, 29 Jun 2020 14:35:38 -0400 Subject: [PATCH 62/97] feedback --- .../tiled_vector_layer/tiled_vector_layer.test.tsx | 14 +------------- .../mvt_single_layer_vector_source.tsx | 2 +- .../map/features_tooltip/features_tooltip.js | 2 +- 3 files changed, 3 insertions(+), 15 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.test.tsx b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.test.tsx index b142a8c164394..c18064fc67b89 100644 --- a/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.test.tsx +++ b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.test.tsx @@ -87,20 +87,8 @@ describe('icon', () => { describe('getFeatureById', () => { it('should return null feature', async () => { const layer: TiledVectorLayer = createLayer({}, {}); - - const properties = { - foo: 'bar', - }; - const feature = layer.getFeatureById(undefined) as Feature; + const feature = layer.getFeatureById('foobar') as Feature; expect(feature).toEqual(null); - - // expect(feature.properties).toEqual(properties); - // expect(feature.geometry).toEqual({ - // type: 'Point', - // coordinates: [0, 0], - // }); - // expect(feature.id).toEqual(undefined); - // expect(feature.type).toEqual('Feature'); }); }); diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx index 15e8a55a3846b..c2132fb540f7e 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx @@ -7,7 +7,7 @@ import { i18n } from '@kbn/i18n'; import uuid from 'uuid/v4'; import React from 'react'; -import { GeoJsonProperties, Geometry } from 'geojson'; +import { GeoJsonProperties } from 'geojson'; import { AbstractSource, ImmutableSourceProperty, SourceEditorArgs } from '../source'; import { BoundsFilters, GeoJsonWithMeta, ITiledSingleLayerVectorSource } from '../vector_source'; import { diff --git a/x-pack/plugins/maps/public/connected_components/map/features_tooltip/features_tooltip.js b/x-pack/plugins/maps/public/connected_components/map/features_tooltip/features_tooltip.js index 1d26ec732112c..e058c8c368b0a 100644 --- a/x-pack/plugins/maps/public/connected_components/map/features_tooltip/features_tooltip.js +++ b/x-pack/plugins/maps/public/connected_components/map/features_tooltip/features_tooltip.js @@ -133,7 +133,7 @@ export class FeaturesTooltip extends React.Component { Date: Mon, 29 Jun 2020 14:44:39 -0400 Subject: [PATCH 63/97] ensure properties are always present --- .../classes/layers/tiled_vector_layer/tiled_vector_layer.tsx | 1 - .../map/mb/tooltip_control/tooltip_popover.js | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx index 76ff7199b5cc1..c9ae1c805fa30 100644 --- a/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx +++ b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx @@ -199,7 +199,6 @@ export class TiledVectorLayer extends VectorLayer { } getFeatureById(id: string | number): Feature | null { - // Cannot return the feature return null; } } diff --git a/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_popover.js b/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_popover.js index 81d30947f14da..56e26c1609192 100644 --- a/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_popover.js +++ b/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_popover.js @@ -83,7 +83,7 @@ export class TooltipPopover extends Component { // fallback to mbProperties if the layer itself cannot get a feature. const properties = targetFeature ? targetFeature.properties : mbProperties; - return await tooltipLayer.getPropertiesForTooltip(properties); + return await tooltipLayer.getPropertiesForTooltip(properties || {}); }; _loadPreIndexedShape = async ({ layerId, featureId }) => { From 405afe1bdcca15869cac5f083bd69a162b1d30a0 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Mon, 29 Jun 2020 14:53:26 -0400 Subject: [PATCH 64/97] handle possible null values --- x-pack/plugins/maps/common/descriptor_types/map_descriptor.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/maps/common/descriptor_types/map_descriptor.ts b/x-pack/plugins/maps/common/descriptor_types/map_descriptor.ts index 2d5d6361dcc45..e0f90c0084843 100644 --- a/x-pack/plugins/maps/common/descriptor_types/map_descriptor.ts +++ b/x-pack/plugins/maps/common/descriptor_types/map_descriptor.ts @@ -42,7 +42,7 @@ export type Goto = { export type TooltipFeature = { id: number; layerId: string; - mbProperties?: GeoJsonProperties; + mbProperties?: GeoJsonProperties | null; }; export type TooltipState = { From 53718ba774bcba27b32eaa0d3f652a233d8c5b7b Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Mon, 29 Jun 2020 15:13:08 -0400 Subject: [PATCH 65/97] feedback --- .../maps/common/descriptor_types/map_descriptor.ts | 2 +- .../map/mb/tooltip_control/tooltip_control.js | 9 ++++++++- .../map/mb/tooltip_control/tooltip_popover.js | 3 +-- 3 files changed, 10 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/maps/common/descriptor_types/map_descriptor.ts b/x-pack/plugins/maps/common/descriptor_types/map_descriptor.ts index e0f90c0084843..53cda64214324 100644 --- a/x-pack/plugins/maps/common/descriptor_types/map_descriptor.ts +++ b/x-pack/plugins/maps/common/descriptor_types/map_descriptor.ts @@ -42,7 +42,7 @@ export type Goto = { export type TooltipFeature = { id: number; layerId: string; - mbProperties?: GeoJsonProperties | null; + mbProperties: GeoJsonProperties; }; export type TooltipState = { diff --git a/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_control.js b/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_control.js index 6e8bf6382cd5f..605a5e9696668 100644 --- a/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_control.js +++ b/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_control.js @@ -72,11 +72,18 @@ export class TooltipControl extends React.Component { } } if (!match) { + // "tags" (aka properties) are optional in .mvt tiles. + // It's not entirely clear how mapbox-gl handles those. + // - As null value (as defined in https://tools.ietf.org/html/rfc7946#section-3.2) + // - As undefined value + // - As empty object literal + // To avoid ambiguity, normalize properties to empty object literal. + const mbProperties = mbFeature.properties ? mbFeature : {}; //This keeps track of first properties (assuming these will be identical for features in different tiles uniqueFeatures.push({ id: featureId, layerId: layerId, - mbProperties: mbFeature.properties, + mbProperties, }); } } diff --git a/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_popover.js b/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_popover.js index 56e26c1609192..6c42057680408 100644 --- a/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_popover.js +++ b/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_popover.js @@ -81,9 +81,8 @@ export class TooltipPopover extends Component { targetFeature = tooltipLayer.getFeatureById(featureId); } - // fallback to mbProperties if the layer itself cannot get a feature. const properties = targetFeature ? targetFeature.properties : mbProperties; - return await tooltipLayer.getPropertiesForTooltip(properties || {}); + return await tooltipLayer.getPropertiesForTooltip(properties); }; _loadPreIndexedShape = async ({ layerId, featureId }) => { From 62af3c1f407c2096805ea91adfe37bb319da7583 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Mon, 29 Jun 2020 15:16:32 -0400 Subject: [PATCH 66/97] typo --- .../map/mb/tooltip_control/tooltip_control.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_control.js b/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_control.js index 605a5e9696668..84a29db852539 100644 --- a/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_control.js +++ b/x-pack/plugins/maps/public/connected_components/map/mb/tooltip_control/tooltip_control.js @@ -78,7 +78,7 @@ export class TooltipControl extends React.Component { // - As undefined value // - As empty object literal // To avoid ambiguity, normalize properties to empty object literal. - const mbProperties = mbFeature.properties ? mbFeature : {}; + const mbProperties = mbFeature.properties ? mbFeature.properties : {}; //This keeps track of first properties (assuming these will be identical for features in different tiles uniqueFeatures.push({ id: featureId, From 65dd62fdeaffcc7f67b4546b6d40d04a669ffcbc Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Mon, 29 Jun 2020 15:28:58 -0400 Subject: [PATCH 67/97] update SIEM --- .../embeddables/map_tool_tip/map_tool_tip.test.tsx | 5 +++-- .../public/network/components/embeddables/types.ts | 5 ----- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/x-pack/plugins/security_solution/public/network/components/embeddables/map_tool_tip/map_tool_tip.test.tsx b/x-pack/plugins/security_solution/public/network/components/embeddables/map_tool_tip/map_tool_tip.test.tsx index ff6e8859be049..98d4d3bd8faba 100644 --- a/x-pack/plugins/security_solution/public/network/components/embeddables/map_tool_tip/map_tool_tip.test.tsx +++ b/x-pack/plugins/security_solution/public/network/components/embeddables/map_tool_tip/map_tool_tip.test.tsx @@ -7,7 +7,7 @@ import { shallow } from 'enzyme'; import React from 'react'; import { MapToolTipComponent } from './map_tool_tip'; -import { MapFeature } from '../types'; +import { TooltipFeature } from '../../../../../../maps/common/descriptor_types'; describe('MapToolTip', () => { test('placeholder component renders correctly against snapshot', () => { @@ -18,10 +18,11 @@ describe('MapToolTip', () => { test('full component renders correctly against snapshot', () => { const addFilters = jest.fn(); const closeTooltip = jest.fn(); - const features: MapFeature[] = [ + const features: TooltipFeature[] = [ { id: 1, layerId: 'layerId', + mbProperties: {}, }, ]; const getLayerName = jest.fn(); diff --git a/x-pack/plugins/security_solution/public/network/components/embeddables/types.ts b/x-pack/plugins/security_solution/public/network/components/embeddables/types.ts index f91fd677ba7fe..e3ca3c5b84289 100644 --- a/x-pack/plugins/security_solution/public/network/components/embeddables/types.ts +++ b/x-pack/plugins/security_solution/public/network/components/embeddables/types.ts @@ -36,11 +36,6 @@ export type SetQuery = (params: { refetch: inputsModel.Refetch; }) => void; -export interface MapFeature { - id: number; - layerId: string; -} - export interface FeatureGeometry { coordinates: [number]; type: string; From 67c30db0b73e4f834470d1ed6339d6b9fd65f7f0 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Mon, 29 Jun 2020 16:01:31 -0400 Subject: [PATCH 68/97] feedback --- .../common/descriptor_types/map_descriptor.ts | 2 +- .../mvt_single_layer_vector_source.test.tsx | 11 +++++++++ .../mvt_single_layer_vector_source.tsx | 24 ------------------- .../classes/tooltips/tooltip_property.ts | 2 +- .../connected_components/layer_panel/view.js | 5 +--- .../map/features_tooltip/features_tooltip.js | 1 - 6 files changed, 14 insertions(+), 31 deletions(-) diff --git a/x-pack/plugins/maps/common/descriptor_types/map_descriptor.ts b/x-pack/plugins/maps/common/descriptor_types/map_descriptor.ts index 53cda64214324..027cc886cd7f7 100644 --- a/x-pack/plugins/maps/common/descriptor_types/map_descriptor.ts +++ b/x-pack/plugins/maps/common/descriptor_types/map_descriptor.ts @@ -40,7 +40,7 @@ export type Goto = { }; export type TooltipFeature = { - id: number; + id?: number | string; layerId: string; mbProperties: GeoJsonProperties; }; diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.test.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.test.tsx index 2de5668147cbb..308de4d72504b 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.test.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.test.tsx @@ -87,3 +87,14 @@ describe('filterAndFormatPropertiesToHtml', () => { expect(tooltipProperties[1].getHtmlDisplayValue()).toEqual('123'); }); }); + +describe('getImmutableSourceProperties', () => { + it('should only show immutable props', async () => { + const source = new MVTSingleLayerVectorSource(descriptor); + const properties = await source.getImmutableProperties(); + expect(properties).toEqual([ + { label: 'Data source', value: '.pbf vector tiles' }, + { label: 'Url', value: 'https://example.com/{x}/{y}/{z}.pbf' }, + ]); + }); +}); diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx index c2132fb540f7e..48c5bda743866 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx @@ -148,30 +148,6 @@ export class MVTSingleLayerVectorSource extends AbstractSource return [ { label: getDataSourceLabel(), value: sourceTitle }, { label: getUrlLabel(), value: this._descriptor.urlTemplate }, - { - label: i18n.translate('xpack.maps.source.MVTSingleLayerVectorSource.layerNameMessage', { - defaultMessage: 'Layer name', - }), - value: this._descriptor.layerName, - }, - { - label: i18n.translate('xpack.maps.source.MVTSingleLayerVectorSource.minZoomMessage', { - defaultMessage: 'Min zoom', - }), - value: this._descriptor.minSourceZoom.toString(), - }, - { - label: i18n.translate('xpack.maps.source.MVTSingleLayerVectorSource.maxZoomMessage', { - defaultMessage: 'Max zoom', - }), - value: this._descriptor.maxSourceZoom.toString(), - }, - { - label: i18n.translate('xpack.maps.source.MVTSingleLayerVectorSource.fields', { - defaultMessage: 'Fields', - }), - value: this._descriptor.fields.map(({ name, type }) => `${name}(${type})`).join(', '), - }, ]; } diff --git a/x-pack/plugins/maps/public/classes/tooltips/tooltip_property.ts b/x-pack/plugins/maps/public/classes/tooltips/tooltip_property.ts index 7149fe29f90ec..7bb79d8d341d3 100644 --- a/x-pack/plugins/maps/public/classes/tooltips/tooltip_property.ts +++ b/x-pack/plugins/maps/public/classes/tooltips/tooltip_property.ts @@ -19,7 +19,7 @@ export interface ITooltipProperty { export interface LoadFeatureProps { layerId: string; - featureId: number; + featureId?: number | string; } export interface FeatureGeometry { diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/view.js b/x-pack/plugins/maps/public/connected_components/layer_panel/view.js index 10ba8d7cf1170..ff7133fcdb4f6 100644 --- a/x-pack/plugins/maps/public/connected_components/layer_panel/view.js +++ b/x-pack/plugins/maps/public/connected_components/layer_panel/view.js @@ -31,7 +31,6 @@ import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_reac import { Storage } from '../../../../../../src/plugins/kibana_utils/public'; import { getData, getCore } from '../../kibana_services'; -import _ from 'lodash'; const localStorage = new Storage(window.localStorage); @@ -75,9 +74,7 @@ export class LayerPanel extends React.Component { const immutableSourceProps = await this.props.selectedLayer.getImmutableSourceProperties(); if (this._isMounted) { - if (!_.isEqual(this.state.immutableSourceProps, immutableSourceProps)) { - this.setState({ immutableSourceProps }); - } + this.setState({ immutableSourceProps }); } }; diff --git a/x-pack/plugins/maps/public/connected_components/map/features_tooltip/features_tooltip.js b/x-pack/plugins/maps/public/connected_components/map/features_tooltip/features_tooltip.js index e058c8c368b0a..d91bc8e803ab9 100644 --- a/x-pack/plugins/maps/public/connected_components/map/features_tooltip/features_tooltip.js +++ b/x-pack/plugins/maps/public/connected_components/map/features_tooltip/features_tooltip.js @@ -104,7 +104,6 @@ export class FeaturesTooltip extends React.Component { const currentFeatureGeometry = this.props.loadFeatureGeometry({ layerId: this.state.currentFeature.layerId, featureId: this.state.currentFeature.id, - meta: this.state.currentFeature.meta, }); const geoFields = this._filterGeoFields(currentFeatureGeometry); From c53351a885064d171f755e4bb848888514ccbbdd Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Mon, 29 Jun 2020 16:06:32 -0400 Subject: [PATCH 69/97] remove cruft --- .../layers/tiled_vector_layer/tiled_vector_layer.test.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.test.tsx b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.test.tsx index c18064fc67b89..ecd625db34411 100644 --- a/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.test.tsx +++ b/x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.test.tsx @@ -6,7 +6,6 @@ import { MockSyncContext } from '../__tests__/mock_sync_context'; import sinon from 'sinon'; -jest.mock('ui/new_platform'); jest.mock('../../../kibana_services', () => { return { getUiSettings() { From 55798c4a073756cf1bb06817bd9d2494e9608cfb Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Mon, 29 Jun 2020 17:15:11 -0400 Subject: [PATCH 70/97] remove unused translations --- x-pack/plugins/translations/translations/ja-JP.json | 3 --- x-pack/plugins/translations/translations/zh-CN.json | 3 --- 2 files changed, 6 deletions(-) diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 31aea2d7eb54b..88bd1221e4ae7 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -9221,9 +9221,6 @@ "xpack.maps.source.kbnTMSDescription": "kibana.yml で構成されたマップタイルです", "xpack.maps.source.kbnTMSTitle": "カスタムタイルマップサービス", "xpack.maps.source.mapSettingsPanel.initialLocationLabel": "マップの初期位置情報", - "xpack.maps.source.MVTSingleLayerVectorSource.layerNameMessage": "レイヤー名", - "xpack.maps.source.MVTSingleLayerVectorSource.maxZoomMessage": "最大ズーム", - "xpack.maps.source.MVTSingleLayerVectorSource.minZoomMessage": "最小ズーム", "xpack.maps.source.MVTSingleLayerVectorSource.sourceTitle": "ベトルタイルレイヤー", "xpack.maps.source.MVTSingleLayerVectorSourceEditor.dataZoomRangeMessage": "ズームレベル", "xpack.maps.source.MVTSingleLayerVectorSourceEditor.layerNameMessage": "レイヤー名", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index d622abd6cd7f7..129df19eda5c2 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -9226,9 +9226,6 @@ "xpack.maps.source.kbnTMSDescription": "在 kibana.yml 中配置的地图磁贴", "xpack.maps.source.kbnTMSTitle": "定制磁贴地图服务", "xpack.maps.source.mapSettingsPanel.initialLocationLabel": "初始地图位置", - "xpack.maps.source.MVTSingleLayerVectorSource.layerNameMessage": "图层名称", - "xpack.maps.source.MVTSingleLayerVectorSource.maxZoomMessage": "最大缩放", - "xpack.maps.source.MVTSingleLayerVectorSource.minZoomMessage": "最小缩放", "xpack.maps.source.MVTSingleLayerVectorSource.sourceTitle": "矢量磁贴图层", "xpack.maps.source.MVTSingleLayerVectorSourceEditor.dataZoomRangeMessage": "缩放级别", "xpack.maps.source.MVTSingleLayerVectorSourceEditor.layerNameMessage": "图层名称", From d1ea7fd8cc845785b6848c1cc2d628267fafe296 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Tue, 30 Jun 2020 09:37:29 -0400 Subject: [PATCH 71/97] feedback --- .../styles/vector/properties/dynamic_orientation_property.js | 4 ++-- .../classes/styles/vector/properties/dynamic_text_property.js | 2 +- .../maps/public/connected_components/layer_panel/view.js | 4 ---- 3 files changed, 3 insertions(+), 7 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_orientation_property.js b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_orientation_property.js index bba6c49a1db95..763eb81ad0f98 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_orientation_property.js +++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_orientation_property.js @@ -10,9 +10,9 @@ import { VECTOR_STYLES } from '../../../../../common/constants'; export class DynamicOrientationProperty extends DynamicStyleProperty { syncIconRotationWithMb(symbolLayerId, mbMap) { - if (this._options.field && this._options.field.name) { + if (this._field && this._field.isValid()) { const targetName = this._field.supportsAutoDomain() - ? getComputedFieldName(VECTOR_STYLES.ICON_ORIENTATION, this._field.getName()) + ? getComputedFieldName(VECTOR_STYLES.ICON_ORIENTATION, this.getFieldName()) : this._field.getName(); // Using property state instead of feature-state because layout properties do not support feature-state mbMap.setLayoutProperty(symbolLayerId, 'icon-rotate', ['coalesce', ['get', targetName], 0]); diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_text_property.js b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_text_property.js index ffe0d73a19bb5..a7a3130875a95 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_text_property.js +++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_text_property.js @@ -13,7 +13,7 @@ export class DynamicTextProperty extends DynamicStyleProperty { // Fields that support auto-domain are normalized with a field-formatter and stored into a computed-field // Otherwise, the raw value is just carried over and no computed field is created. const targetName = this._field.supportsAutoDomain() - ? getComputedFieldName(this._styleName, this._field.getName()) + ? getComputedFieldName(this._styleName, this.getFieldName()) : this._field.getName(); mbMap.setLayoutProperty(mbLayerId, 'text-field', ['coalesce', ['get', targetName], '']); } else { diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/view.js b/x-pack/plugins/maps/public/connected_components/layer_panel/view.js index ff7133fcdb4f6..3b975c20dec40 100644 --- a/x-pack/plugins/maps/public/connected_components/layer_panel/view.js +++ b/x-pack/plugins/maps/public/connected_components/layer_panel/view.js @@ -52,10 +52,6 @@ export class LayerPanel extends React.Component { this._isMounted = false; } - componentDidUpdate() { - this.loadImmutableSourceProperties(); - } - loadDisplayName = async () => { if (!this.props.selectedLayer) { return; From 23369e114292e9f7c734b6648e889cd2734eaf62 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Tue, 30 Jun 2020 09:39:56 -0400 Subject: [PATCH 72/97] improve readability --- .../public/connected_components/layer_panel/view.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/view.js b/x-pack/plugins/maps/public/connected_components/layer_panel/view.js index 3b975c20dec40..557fe5fd5f705 100644 --- a/x-pack/plugins/maps/public/connected_components/layer_panel/view.js +++ b/x-pack/plugins/maps/public/connected_components/layer_panel/view.js @@ -43,16 +43,16 @@ export class LayerPanel extends React.Component { componentDidMount() { this._isMounted = true; - this.loadDisplayName(); - this.loadImmutableSourceProperties(); - this.loadLeftJoinFields(); + this._loadDisplayName(); + this._loadImmutableSourceProperties(); + this._loadLeftJoinFields(); } componentWillUnmount() { this._isMounted = false; } - loadDisplayName = async () => { + _loadDisplayName = async () => { if (!this.props.selectedLayer) { return; } @@ -63,7 +63,7 @@ export class LayerPanel extends React.Component { } }; - loadImmutableSourceProperties = async () => { + _loadImmutableSourceProperties = async () => { if (!this.props.selectedLayer) { return; } @@ -74,7 +74,7 @@ export class LayerPanel extends React.Component { } }; - async loadLeftJoinFields() { + async _loadLeftJoinFields() { if (!this.props.selectedLayer || !this.props.selectedLayer.isJoinable()) { return; } From d67cd317b21b7acb8960d1cbd2ea5b8e595f2957 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Tue, 30 Jun 2020 10:28:27 -0400 Subject: [PATCH 73/97] fix brittle test --- .../functional/apps/maps/documents_source/search_hits.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/x-pack/test/functional/apps/maps/documents_source/search_hits.js b/x-pack/test/functional/apps/maps/documents_source/search_hits.js index 68d3c2536ee0b..5d75679432c97 100644 --- a/x-pack/test/functional/apps/maps/documents_source/search_hits.js +++ b/x-pack/test/functional/apps/maps/documents_source/search_hits.js @@ -76,7 +76,11 @@ export default function ({ getPageObjects, getService }) { const { lat, lon, zoom } = await PageObjects.maps.getView(); expect(Math.round(lat)).to.equal(41); expect(Math.round(lon)).to.equal(-102); - expect(Math.round(zoom)).to.equal(5); + + // Centering is correct, but screen-size and dpi affect zoom level, + // causing this test to be brittle in different environments + // Expecting zoom-level to be between ]4,5] + expect(Math.ceil(zoom)).to.equal(5); }); }); From cc9bcccb921cc622441472ad4004e5d2b83c381d Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Tue, 30 Jun 2020 10:45:53 -0400 Subject: [PATCH 74/97] fix snapshot after master merge --- .../mvt_single_layer_vector_source_editor.test.tsx.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_vector_source_editor.test.tsx.snap b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_vector_source_editor.test.tsx.snap index c700acbdb51bb..6e6c8269dfd47 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_vector_source_editor.test.tsx.snap +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_vector_source_editor.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`should render source creation editor (fields should _not_ be included) 1`] = ` - + - + `; From f225181e0acd04ccf1a42d963b33147eb8f71be8 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Tue, 30 Jun 2020 11:41:55 -0400 Subject: [PATCH 75/97] remove unused method --- .../mvt_single_layer_vector_source.tsx | 4 ---- .../public/classes/sources/vector_source/vector_source.d.ts | 2 -- .../public/classes/sources/vector_source/vector_source.js | 4 ---- 3 files changed, 10 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx index 48c5bda743866..1c17aa4a430bd 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx @@ -207,10 +207,6 @@ export class MVTSingleLayerVectorSource extends AbstractSource return false; } - supportsFieldMeta(): boolean { - return false; - } - async filterAndFormatPropertiesToHtml( properties: GeoJsonProperties, featureId?: string | number 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 f65bf082bb424..42993bf36f618 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 @@ -52,7 +52,6 @@ export interface IVectorSource extends ISource { getFieldNames(): string[]; getApplyGlobalQuery(): boolean; createField({ fieldName }: { fieldName: string }): IField; - supportsFieldMeta(): boolean; canFormatFeatureProperties(): boolean; } @@ -76,7 +75,6 @@ export class AbstractVectorSource extends AbstractSource implements IVectorSourc getApplyGlobalQuery(): boolean; getFieldNames(): string[]; createField({ fieldName }: { fieldName: string }): IField; - supportsFieldMeta(): boolean; } export interface ITiledSingleLayerVectorSource extends IVectorSource { 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 9fb46ddd2f8f8..ecb13bb875721 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 @@ -137,8 +137,4 @@ export class AbstractVectorSource extends AbstractSource { getSyncMeta() { return {}; } - - supportsFieldMeta() { - return true; - } } From 9f3a6e574db9f8f03e88526a12a728a33a74cbd3 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Tue, 30 Jun 2020 14:16:38 -0400 Subject: [PATCH 76/97] feedback --- .../mvt_field_config_editor.test.tsx.snap | 320 +----------------- ...single_layer_source_settings.test.tsx.snap | 17 +- .../mvt_field_config_editor.test.tsx | 18 +- .../mvt_field_config_editor.tsx | 28 +- .../mvt_single_layer_source_settings.test.tsx | 19 +- .../mvt_single_layer_source_settings.tsx | 4 +- 6 files changed, 24 insertions(+), 382 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap index befff16f33a1f..f0252956ea5b1 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap @@ -8,7 +8,7 @@ exports[`should render error for dupes 1`] = ` > - - - - } - compressed={false} - fullWidth={false} - hasDividers={false} - isInvalid={false} - isLoading={false} - onChange={[Function]} - options={ - Array [ - Object { - "inputDisplay": - - - - - string - - , - "value": "String", - }, - Object { - "inputDisplay": - - - - - number - - , - "value": "Number", - }, - ] - } - valueOfSelected="String" - /> - - - - - - - - - } - compressed={false} - fullWidth={false} - hasDividers={false} - isInvalid={false} - isLoading={false} - onChange={[Function]} - options={ - Array [ - Object { - "inputDisplay": - - - - - string - - , - "value": "String", - }, - Object { - "inputDisplay": - - - - - number - - , - "value": "Number", - }, - ] - } - valueOfSelected="String" - /> - - - - - - - - - - - - } - compressed={false} - fullWidth={false} - hasDividers={false} - isInvalid={false} - isLoading={false} - onChange={[Function]} - options={ - Array [ - Object { - "inputDisplay": - - - - - string - - , - "value": "String", - }, - Object { - "inputDisplay": - - - - - number - - , - "value": "Number", - }, - ] - } - valueOfSelected="Number" - /> - - @@ -514,10 +286,10 @@ exports[`should render field editor 1`] = ` > @@ -590,87 +362,11 @@ exports[`should render field editor 1`] = ` > - - - - } - compressed={false} - fullWidth={false} - hasDividers={false} - isInvalid={false} - isLoading={false} - onChange={[Function]} - options={ - Array [ - Object { - "inputDisplay": - - - - - string - - , - "value": "String", - }, - Object { - "inputDisplay": - - - - - number - - , - "value": "Number", - }, - ] - } - valueOfSelected="String" - /> - - - - - diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_source_settings.test.tsx.snap b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_source_settings.test.tsx.snap index 1fb81dc777c85..0152ae34b4874 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_source_settings.test.tsx.snap +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_source_settings.test.tsx.snap @@ -112,22 +112,7 @@ exports[`should render with fields 1`] = ` labelType="label" > diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.test.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.test.tsx index 4311b05726527..0121dc45cb9ee 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.test.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.test.tsx @@ -19,11 +19,7 @@ test('should render field editor', async () => { type: MVT_FIELD_TYPE.STRING, }, { - name: 'food', - type: MVT_FIELD_TYPE.STRING, - }, - { - name: 'fooz', + name: 'bar', type: MVT_FIELD_TYPE.NUMBER, }, ]; @@ -34,18 +30,10 @@ test('should render field editor', async () => { test('should render error for empty name', async () => { const fields = [ - { - name: 'foo', - type: MVT_FIELD_TYPE.STRING, - }, { name: '', type: MVT_FIELD_TYPE.STRING, }, - { - name: 'fooz', - type: MVT_FIELD_TYPE.NUMBER, - }, ]; const component = shallow( {}} />); @@ -58,10 +46,6 @@ test('should render error for dupes', async () => { name: 'foo', type: MVT_FIELD_TYPE.STRING, }, - { - name: 'bar', - type: MVT_FIELD_TYPE.STRING, - }, { name: 'foo', type: MVT_FIELD_TYPE.NUMBER, diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx index b93eb5c22133c..ba0d55c1a8b98 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx @@ -67,24 +67,17 @@ export interface Props { // eslint-disable-next-line @typescript-eslint/no-empty-interface interface State { - previousFields: MVTFieldDescriptor[]; currentFields: MVTFieldDescriptor[]; } export class MVTFieldConfigEditor extends Component { state: State = { currentFields: [], - previousFields: [], }; - static getDerivedStateFromProps(nextProps: Props, prevState: State) { - if (_.isEqual(nextProps.fields, prevState.previousFields)) { - return null; - } - const clonedFields = _.cloneDeep(nextProps.fields); + static getDerivedStateFromProps(nextProps: Props) { return { - currentFields: clonedFields, - previousFields: clonedFields, + currentFields: _.cloneDeep(nextProps.fields), }; } @@ -176,20 +169,17 @@ export class MVTFieldConfigEditor extends Component { break; } } - const isInvalid = emptyName || hasDupes; - const placeholderText = isInvalid - ? i18n.translate('xpack.maps.mvtSource.fieldPlaceholderText', { - defaultMessage: 'Field name', - }) - : ''; - return ( ); } diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.test.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.test.tsx index bee0f144da5ed..ea736c6532784 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.test.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.test.tsx @@ -15,23 +15,10 @@ import { MVT_FIELD_TYPE } from '../../../../common/constants'; const defaultSettings = { handleChange: () => {}, layerName: 'foobar', - fields: [ - { - name: 'foo', - type: MVT_FIELD_TYPE.STRING, - }, - { - name: 'food', - type: MVT_FIELD_TYPE.STRING, - }, - { - name: 'fooz', - type: MVT_FIELD_TYPE.NUMBER, - }, - ], + fields: [], minSourceZoom: 4, maxSourceZoom: 14, - includeFields: true, + showFields: true, }; test('should render with fields', async () => { @@ -40,7 +27,7 @@ test('should render with fields', async () => { }); test('should render without fields', async () => { - const settings = { ...defaultSettings, includeFields: false }; + const settings = { ...defaultSettings, showFields: false }; const component = shallow(); expect(component).toMatchSnapshot(); }); diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx index 46a180ee59947..d2812fa03e061 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx @@ -38,7 +38,7 @@ export interface Props { fields: MVTFieldDescriptor[]; minSourceZoom: number; maxSourceZoom: number; - includeFields: boolean; + showFields: boolean; } export class MVTSingleLayerSourceSettings extends Component { @@ -128,7 +128,7 @@ export class MVTSingleLayerSourceSettings extends Component { render() { const fieldEditor = - this.props.includeFields && this.state.currentLayerName !== '' ? ( + this.props.showFields && this.state.currentLayerName !== '' ? ( Date: Tue, 30 Jun 2020 14:38:53 -0400 Subject: [PATCH 77/97] revert some feedback --- .../mvt_field_config_editor.test.tsx.snap | 14 +++++----- ...e_layer_vector_source_editor.test.tsx.snap | 2 +- .../update_source_editor.test.tsx.snap | 2 +- .../mvt_field_config_editor.tsx | 28 +++++++++++++------ .../mvt_single_layer_vector_source_editor.tsx | 2 +- .../update_source_editor.tsx | 2 +- 6 files changed, 30 insertions(+), 20 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap index f0252956ea5b1..90b147fe445bd 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap @@ -8,7 +8,7 @@ exports[`should render error for dupes 1`] = ` > @@ -362,10 +362,10 @@ exports[`should render field editor 1`] = ` > diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_vector_source_editor.test.tsx.snap b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_vector_source_editor.test.tsx.snap index 6e6c8269dfd47..ccd0e0064d075 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_vector_source_editor.test.tsx.snap +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_vector_source_editor.test.tsx.snap @@ -21,10 +21,10 @@ exports[`should render source creation editor (fields should _not_ be included) `; diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/update_source_editor.test.tsx.snap b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/update_source_editor.test.tsx.snap index e8c81783fb2b3..bccf2b17e2b5d 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/update_source_editor.test.tsx.snap +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/update_source_editor.test.tsx.snap @@ -20,10 +20,10 @@ exports[`should render update source editor (fields _should_ be included) 1`] = { state: State = { currentFields: [], + previousFields: [], }; - static getDerivedStateFromProps(nextProps: Props) { + static getDerivedStateFromProps(nextProps: Props, prevState: State) { + if (_.isEqual(nextProps.fields, prevState.previousFields)) { + return null; + } + const clonedFields = _.cloneDeep(nextProps.fields); return { - currentFields: _.cloneDeep(nextProps.fields), + currentFields: clonedFields, + previousFields: clonedFields, }; } @@ -169,17 +176,20 @@ export class MVTFieldConfigEditor extends Component { break; } } + const isInvalid = emptyName || hasDupes; + const placeholderText = isInvalid + ? i18n.translate('xpack.maps.mvtSource.fieldPlaceholderText', { + defaultMessage: 'Field name', + }) + : ''; + return ( ); } diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx index bf5e424f08060..8cf31bbbb17ad 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx @@ -103,7 +103,7 @@ export class MVTSingleLayerVectorSourceEditor extends Component { fields={this.state.fields} minSourceZoom={this.state.minSourceZoom} maxSourceZoom={this.state.maxSourceZoom} - includeFields={false} + showFields={false} /> ); diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx index 8262eec47fb15..50974e227a77e 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx @@ -72,7 +72,7 @@ export class UpdateSourceEditor extends Component { fields={fieldDescriptors} minSourceZoom={this.props.source.getMinZoom()} maxSourceZoom={this.props.source.getMaxZoom()} - includeFields={true} + showFields={true} /> From 0883009b45f78d118d937eb26f9c1981e3ff58bc Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Tue, 30 Jun 2020 14:43:25 -0400 Subject: [PATCH 78/97] remove micro-optimization --- .../mvt_single_layer_source_settings.tsx | 22 +++++-------------- 1 file changed, 5 insertions(+), 17 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx index d2812fa03e061..03c93e9da6769 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx @@ -97,31 +97,19 @@ export class MVTSingleLayerSourceSettings extends Component { }, 200); _handleLayerNameInputChange = (e: ChangeEvent) => { - const layerName = e.target.value; - if (layerName === this.state.currentLayerName) { - return; - } - this.setState({ currentLayerName: layerName }, this._handleChange); + this.setState({ currentLayerName: e.target.value }, this._handleChange); }; _handleFieldChange = (fields: MVTFieldDescriptor[]) => { - if (_.isEqual(this.state.currentFields, fields)) { - return; - } this.setState({ currentFields: fields }, this._handleChange); }; _handleZoomRangeChange = (e: Value) => { - const minSourceZoom = parseInt(e[0] as string, 10); - const maxSourceZoom = parseInt(e[1] as string, 10); - if ( - this.state.currentMinSourceZoom === minSourceZoom && - this.state.currentMaxSourceZoom === maxSourceZoom - ) { - return; - } this.setState( - { currentMinSourceZoom: minSourceZoom, currentMaxSourceZoom: maxSourceZoom }, + { + currentMinSourceZoom: parseInt(e[0] as string, 10), + currentMaxSourceZoom: parseInt(e[1] as string, 10), + }, this._handleChange ); }; From fcfba1d7a4caa7c4f5544452a966c3348bb1d2ac Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Tue, 30 Jun 2020 15:02:24 -0400 Subject: [PATCH 79/97] initialize in constructor --- .../mvt_field_config_editor.tsx | 16 +----- .../mvt_single_layer_source_settings.tsx | 50 ++----------------- 2 files changed, 5 insertions(+), 61 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx index b93eb5c22133c..cef6f377358c1 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx @@ -65,29 +65,15 @@ export interface Props { onChange: (fields: MVTFieldDescriptor[]) => void; } -// eslint-disable-next-line @typescript-eslint/no-empty-interface interface State { - previousFields: MVTFieldDescriptor[]; currentFields: MVTFieldDescriptor[]; } export class MVTFieldConfigEditor extends Component { state: State = { - currentFields: [], - previousFields: [], + currentFields: _.cloneDeep(this.props.fields), }; - static getDerivedStateFromProps(nextProps: Props, prevState: State) { - if (_.isEqual(nextProps.fields, prevState.previousFields)) { - return null; - } - const clonedFields = _.cloneDeep(nextProps.fields); - return { - currentFields: clonedFields, - previousFields: clonedFields, - }; - } - _notifyChange = _.debounce(() => { const invalid = this.state.currentFields.some((field: MVTFieldDescriptor) => { return field.name === ''; diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx index 03c93e9da6769..1f5bf4ea4a353 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx @@ -26,10 +26,6 @@ export interface State { currentMinSourceZoom: number; currentMaxSourceZoom: number; currentFields: MVTFieldDescriptor[]; - previousLayerName: string; - previousMinSourceZoom: number; - previousMaxSourceZoom: number; - previousFields: MVTFieldDescriptor[]; } export interface Props { @@ -43,50 +39,12 @@ export interface Props { export class MVTSingleLayerSourceSettings extends Component { state = { - currentLayerName: '', - currentMinSourceZoom: MIN_ZOOM, - currentMaxSourceZoom: MAX_ZOOM, - currentFields: [], - previousLayerName: '', - previousMinSourceZoom: MIN_ZOOM, - previousMaxSourceZoom: MAX_ZOOM, - previousFields: [], + currentLayerName: this.props.layerName, + currentMinSourceZoom: this.props.minSourceZoom, + currentMaxSourceZoom: this.props.maxSourceZoom, + currentFields: _.cloneDeep(this.props.fields), }; - static getDerivedStateFromProps(nextProps: Props, prevState: State) { - const newSettings = { - layerName: nextProps.layerName, - fields: nextProps.fields, - minSourceZoom: nextProps.minSourceZoom, - maxSourceZoom: nextProps.maxSourceZoom, - }; - - const previous = prevState - ? { - layerName: prevState.previousLayerName, - fields: prevState.previousFields, - minSourceZoom: prevState.previousMinSourceZoom, - maxSourceZoom: prevState.previousMaxSourceZoom, - } - : null; - - if (_.isEqual(previous, newSettings)) { - return null; - } - - const clonedFields = _.cloneDeep(nextProps.fields); - return { - currentLayerName: nextProps.layerName, - currentMinSourceZoom: nextProps.minSourceZoom, - currentMaxSourceZoom: nextProps.maxSourceZoom, - currentFields: clonedFields, - previousLayerName: nextProps.layerName, - previousMinSourceZoom: nextProps.minSourceZoom, - previousMaxSourceZoom: nextProps.maxSourceZoom, - previousFields: clonedFields, - }; - } - _handleChange = _.debounce(() => { this.props.handleChange({ layerName: this.state.currentLayerName, From d4cb02095f84a579178adcec4327f97f6908a3ce Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Tue, 30 Jun 2020 15:08:23 -0400 Subject: [PATCH 80/97] simplify wording --- ...single_layer_source_settings.test.tsx.snap | 172 ------------------ .../mvt_single_layer_source_settings.tsx | 8 +- 2 files changed, 1 insertion(+), 179 deletions(-) delete mode 100644 x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_source_settings.test.tsx.snap diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_source_settings.test.tsx.snap b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_source_settings.test.tsx.snap deleted file mode 100644 index 0152ae34b4874..0000000000000 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_source_settings.test.tsx.snap +++ /dev/null @@ -1,172 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`should not render when no layername 1`] = ` - - - - - - - - -`; - -exports[`should render with fields 1`] = ` - - - - - - - - - - - -`; - -exports[`should render without fields 1`] = ` - - - - - - - - -`; diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx index 1f5bf4ea4a353..2d66697f5a722 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx @@ -106,13 +106,7 @@ export class MVTSingleLayerSourceSettings extends Component { label={i18n.translate( 'xpack.maps.source.MVTSingleLayerVectorSourceEditor.layerNameMessage', { - defaultMessage: 'Layer name', - } - )} - helpText={i18n.translate( - 'xpack.maps.source.MVTSingleLayerVectorSourceEditor.layerNameHelpMessage', - { - defaultMessage: 'Name of the target data layer in the tile', + defaultMessage: 'Tile layer', } )} > From 91c5ef42a140192d2cb71d35cae1955e9a3cd3f4 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Tue, 30 Jun 2020 15:20:22 -0400 Subject: [PATCH 81/97] add snapshot --- ...single_layer_source_settings.test.tsx.snap | 169 ++++++++++++++++++ 1 file changed, 169 insertions(+) create mode 100644 x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_source_settings.test.tsx.snap diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_source_settings.test.tsx.snap b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_source_settings.test.tsx.snap new file mode 100644 index 0000000000000..6e802655eab40 --- /dev/null +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_source_settings.test.tsx.snap @@ -0,0 +1,169 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should not render when no layername 1`] = ` + + + + + + + + +`; + +exports[`should render with fields 1`] = ` + + + + + + + + + + + +`; + +exports[`should render without fields 1`] = ` + + + + + + + + +`; From a317465b74ef317e4059a5ea6aff284f318bc7dd Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Tue, 30 Jun 2020 15:35:12 -0400 Subject: [PATCH 82/97] naming --- .../mvt_field_config_editor.test.tsx.snap | 4 ++-- .../mvt_single_layer_source_settings.test.tsx.snap | 2 +- .../mvt_field_config_editor.tsx | 13 ++++--------- .../mvt_single_layer_source_settings.test.tsx | 2 +- 4 files changed, 8 insertions(+), 13 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap index 90b147fe445bd..3ad6862be0921 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap @@ -289,7 +289,7 @@ exports[`should render field editor 1`] = ` aria-label="Fieldname" isInvalid={false} onChange={[Function]} - placeholder="" + placeholder="Field name" value="foo" /> @@ -365,7 +365,7 @@ exports[`should render field editor 1`] = ` aria-label="Fieldname" isInvalid={false} onChange={[Function]} - placeholder="" + placeholder="Field name" value="bar" /> diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_source_settings.test.tsx.snap b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_source_settings.test.tsx.snap index 6e802655eab40..ec0b86149240c 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_source_settings.test.tsx.snap +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_source_settings.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`should not render when no layername 1`] = ` +exports[`should not render fields-editor when there is no layername 1`] = ` { break; } } - const isInvalid = emptyName || hasDupes; - const placeholderText = isInvalid - ? i18n.translate('xpack.maps.mvtSource.fieldPlaceholderText', { - defaultMessage: 'Field name', - }) - : ''; - return ( ); } diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.test.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.test.tsx index ea736c6532784..f3900292b5890 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.test.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.test.tsx @@ -32,7 +32,7 @@ test('should render without fields', async () => { expect(component).toMatchSnapshot(); }); -test('should not render when no layername', async () => { +test('should not render fields-editor when there is no layername', async () => { const settings = { ...defaultSettings, layerName: '' }; const component = shallow(); expect(component).toMatchSnapshot(); From 96443f1ec152a8d890400311b974f0a78760063e Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Tue, 30 Jun 2020 16:09:03 -0400 Subject: [PATCH 83/97] add clarifying comment --- .../mvt_single_layer_source_settings.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx index 2d66697f5a722..fa56d3456b5db 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx @@ -38,6 +38,9 @@ export interface Props { } export class MVTSingleLayerSourceSettings extends Component { + // Tracking in state to allow for debounce. + // Changes to layer-name and/or min/max zoom require heavy operation at map-level (removing and re-adding all sources/layers) + // To preserve snappyness of typing, debounce the dispatches. state = { currentLayerName: this.props.layerName, currentMinSourceZoom: this.props.minSourceZoom, From 8f0cc4607bec0e146c77d297c76195e7709b3380 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Tue, 30 Jun 2020 17:36:46 -0400 Subject: [PATCH 84/97] remove unused import --- .../mvt_single_layer_source_settings.test.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.test.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.test.tsx index f3900292b5890..b5c75b97e6cb2 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.test.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.test.tsx @@ -10,7 +10,6 @@ import React from 'react'; import { shallow } from 'enzyme'; import { MVTSingleLayerSourceSettings } from './mvt_single_layer_source_settings'; -import { MVT_FIELD_TYPE } from '../../../../common/constants'; const defaultSettings = { handleChange: () => {}, From 1706c41e93d2144af246d7bef4756504451e7588 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Tue, 30 Jun 2020 19:41:32 -0400 Subject: [PATCH 85/97] sanitize tooltips --- .../mvt_single_layer_vector_source.test.tsx | 13 ++------- .../mvt_single_layer_vector_source.tsx | 28 ++++++------------- .../update_source_editor.tsx | 19 +++++++++++++ 3 files changed, 29 insertions(+), 31 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.test.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.test.tsx index 308de4d72504b..bc08baad7a842 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.test.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.test.tsx @@ -34,24 +34,15 @@ describe('canFormatFeatureProperties', () => { const source = new MVTSingleLayerVectorSource(descriptor); expect(source.canFormatFeatureProperties()).toEqual(false); }); - it('true if at least one matching tooltip', async () => { + it('true if tooltip', async () => { const descriptorWithTooltips = { ...descriptor, fields: [{ name: 'foobar', type: MVT_FIELD_TYPE.STRING }], - tooltipProperties: ['foo', 'foobar', 'bar'], + tooltipProperties: ['foobar'], }; const source = new MVTSingleLayerVectorSource(descriptorWithTooltips); expect(source.canFormatFeatureProperties()).toEqual(true); }); - it('false if no matching tooltip', async () => { - const descriptorWithTooltips = { - ...descriptor, - fields: [{ name: 'foobar', type: MVT_FIELD_TYPE.STRING }], - tooltipProperties: ['foo', 'bar'], - }; - const source = new MVTSingleLayerVectorSource(descriptorWithTooltips); - expect(source.canFormatFeatureProperties()).toEqual(false); - }); }); describe('filterAndFormatPropertiesToHtml', () => { diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx index 1c17aa4a430bd..ae28828dec5a8 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source.tsx @@ -169,19 +169,7 @@ export class MVTSingleLayerVectorSource extends AbstractSource } canFormatFeatureProperties() { - if (!this._tooltipFields.length) { - return false; - } - - for (let i = 0; i < this._tooltipFields.length; i++) { - const tooltip: MVTField = this._tooltipFields[i]; - for (let j = 0; j < this._descriptor.fields.length; j++) { - if (tooltip.getName() === this._descriptor.fields[j].name) { - return true; - } - } - } - return false; + return !!this._tooltipFields.length; } getMinZoom() { @@ -214,13 +202,13 @@ export class MVTSingleLayerVectorSource extends AbstractSource const tooltips = []; for (const key in properties) { if (properties.hasOwnProperty(key)) { - const field = this._tooltipFields.find((mvtField: MVTField) => { - return mvtField.getName() === key; - }); - - if (field) { - const tooltip = new TooltipProperty(key, key, properties[key]); - tooltips.push(tooltip); + for (let i = 0; i < this._tooltipFields.length; i++) { + const mvtField = this._tooltipFields[i]; + if (mvtField.getName() === key) { + const tooltip = new TooltipProperty(key, key, properties[key]); + tooltips.push(tooltip); + break; + } } } } diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx index 50974e227a77e..6b25b8f4d24af 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx @@ -42,6 +42,25 @@ export class UpdateSourceEditor extends Component { } if (!_.isEqual(settings.fields, this._getFieldDescriptors())) { changes.push({ propName: 'fields', value: settings.fields }); + + // Remove dangling tooltips. + // This behaves similar to how stale styling properties are removed (e.g. on metric-change in agg sources) + const sanitizedTooltips = []; + for (let i = 0; i < this.props.tooltipFields.length; i++) { + const tooltipName = this.props.tooltipFields[i].getName(); + let hasMatch = false; + for (let j = 0; j < settings.fields.length; j++) { + if (settings.fields[j].name === tooltipName) { + hasMatch = true; + sanitizedTooltips.push(tooltipName); + break; + } + } + } + + if (!_.isEqual(sanitizedTooltips, this.props.tooltipFields)) { + changes.push({ propName: 'tooltipProperties', value: sanitizedTooltips }); + } } this.props.onChange(...changes); }; From aab1d583b5effb7f1de3dc3d3af0d216d0f5302f Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Tue, 30 Jun 2020 19:42:21 -0400 Subject: [PATCH 86/97] remove cruft --- .../mvt_single_layer_vector_source/update_source_editor.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx index 6b25b8f4d24af..2a4ad37e42d00 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx @@ -48,10 +48,8 @@ export class UpdateSourceEditor extends Component { const sanitizedTooltips = []; for (let i = 0; i < this.props.tooltipFields.length; i++) { const tooltipName = this.props.tooltipFields[i].getName(); - let hasMatch = false; for (let j = 0; j < settings.fields.length; j++) { if (settings.fields[j].name === tooltipName) { - hasMatch = true; sanitizedTooltips.push(tooltipName); break; } From f00612c08e51d8cb49065136e42f49fefb08a7bd Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Wed, 1 Jul 2020 11:01:52 -0400 Subject: [PATCH 87/97] feedback --- .../mvt_field_config_editor.tsx | 12 ++++-------- .../mvt_single_layer_source_settings.tsx | 6 +++--- .../update_source_editor.tsx | 2 +- 3 files changed, 8 insertions(+), 12 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx index 116bd894f46f6..effc4292a205c 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx @@ -60,7 +60,7 @@ const FIELD_TYPE_OPTIONS = [ }, ].map(makeOption); -export interface Props { +interface Props { fields: MVTFieldDescriptor[]; onChange: (fields: MVTFieldDescriptor[]) => void; } @@ -155,13 +155,9 @@ export class MVTFieldConfigEditor extends Component { }; const emptyName = mvtFieldConfig.name === ''; - let hasDupes = false; - for (let i = 0; i < this.state.currentFields.length; i++) { - if (i !== index && mvtFieldConfig.name === this.state.currentFields[i].name) { - hasDupes = true; - break; - } - } + const hasDupes = + this.state.currentFields.filter((field) => field.name === mvtFieldConfig.name).length > 1; + return ( void; layerName: string; fields: MVTFieldDescriptor[]; diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx index 2a4ad37e42d00..a959912718197 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx @@ -15,7 +15,7 @@ import { MVTSettings, MVTSingleLayerSourceSettings } from './mvt_single_layer_so import { OnSourceChangeArgs } from '../../../connected_components/layer_panel/view'; import { MVTFieldDescriptor } from '../../../../common/descriptor_types'; -export interface Props { +interface Props { tooltipFields: MVTField[]; onChange: (...args: OnSourceChangeArgs[]) => void; source: MVTSingleLayerVectorSource; From 68c26edcccfa5ca4ca8bb576fe9a87d6e3ad1f54 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Wed, 1 Jul 2020 11:11:30 -0400 Subject: [PATCH 88/97] fix typo --- .../mvt_single_layer_source_settings.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx index dd4d12dfee525..bd2108edc52f3 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx @@ -14,7 +14,7 @@ import { ValidatedDualRange, Value } from '../../../../../../../src/plugins/kiba import { MVTFieldConfigEditor } from './mvt_field_config_editor'; import { MVTFieldDescriptor } from '../../../../common/descriptor_types'; -type MVTSettings = { +export type MVTSettings = { layerName: string; fields: MVTFieldDescriptor[]; minSourceZoom: number; From 7878b896fa4e4ab9d6aa976073cc240d1597cc71 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Wed, 1 Jul 2020 11:36:06 -0400 Subject: [PATCH 89/97] remove export --- .../mvt_single_layer_vector_source_editor.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx index 8cf31bbbb17ad..49487e96a4544 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor.tsx @@ -16,7 +16,7 @@ import { } from '../../../../common/descriptor_types'; import { MVTSingleLayerSourceSettings } from './mvt_single_layer_source_settings'; -export interface Props { +interface Props { onSourceConfigChange: (sourceConfig: TiledSingleLayerVectorSourceSettings) => void; } From 7ccf07575ebe4ce16ee7322d5b81d2701aeb42d4 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Wed, 1 Jul 2020 17:20:57 +0100 Subject: [PATCH 90/97] Design fixes --- .../validated_range/validated_dual_range.tsx | 4 +- .../mvt_field_config_editor.tsx | 36 +++--- .../mvt_single_layer_source_settings.tsx | 114 ++++++++++-------- 3 files changed, 89 insertions(+), 65 deletions(-) diff --git a/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx b/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx index 63b9b48ec809e..45592c8a703af 100644 --- a/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx +++ b/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx @@ -17,7 +17,7 @@ * under the License. */ import { i18n } from '@kbn/i18n'; -import React, { Component } from 'react'; +import React, { Component, ReactNode } from 'react'; import { EuiFormRow, EuiDualRange } from '@elastic/eui'; import { EuiFormRowDisplayKeys } from '@elastic/eui/src/components/form/form_row/form_row'; import { EuiDualRangeProps } from '@elastic/eui/src/components/form/range/dual_range'; @@ -32,7 +32,7 @@ export type ValueMember = EuiDualRangeProps['value'][0]; interface Props extends Omit { value?: Value; allowEmptyRange?: boolean; - label?: string; + label?: string | ReactNode; formRowDisplay?: EuiFormRowDisplayKeys; onChange?: (val: [string, string]) => void; min?: number; diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx index cef6f377358c1..a05340fc1ee7a 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx @@ -118,7 +118,18 @@ export class MVTFieldConfigEditor extends Component { this._fieldChange(newFields); }; - const addButton = ( + return ( + onChange(value)} + compressed + /> + ); + } + + _renderFieldButtonDelete(index: number) { + return ( { })} /> ); - return ( - onChange(value)} - append={addButton} - /> - ); } _renderFieldNameInput(mvtFieldConfig: MVTFieldDescriptor, index: number) { @@ -176,6 +179,7 @@ export class MVTFieldConfigEditor extends Component { aria-label={'Fieldname'} placeholder={placeholderText} isInvalid={isInvalid} + compressed /> ); } @@ -183,10 +187,14 @@ export class MVTFieldConfigEditor extends Component { _renderFieldConfig() { return this.state.currentFields.map((mvtFieldConfig: MVTFieldDescriptor, index: number) => { return ( - - {this._renderFieldNameInput(mvtFieldConfig, index)} - {this._renderFieldTypeDropDown(mvtFieldConfig, index)} - + <> + + {this._renderFieldNameInput(mvtFieldConfig, index)} + {this._renderFieldTypeDropDown(mvtFieldConfig, index)} + {this._renderFieldButtonDelete(index)} + + + ); }); } @@ -195,7 +203,7 @@ export class MVTFieldConfigEditor extends Component { return ( {this._renderFieldConfig()} - + diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx index 2d66697f5a722..6a586c96579d6 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx @@ -6,7 +6,7 @@ /* eslint-disable @typescript-eslint/consistent-type-definitions */ import React, { Fragment, Component, ChangeEvent } from 'react'; -import { EuiFieldText, EuiFormRow } from '@elastic/eui'; +import { EuiFieldText, EuiFormRow, EuiToolTip, EuiIcon } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import _ from 'lodash'; import { MAX_ZOOM, MIN_ZOOM } from '../../../../common/constants'; @@ -76,22 +76,31 @@ export class MVTSingleLayerSourceSettings extends Component { const fieldEditor = this.props.showFields && this.state.currentLayerName !== '' ? ( + + {i18n.translate( + 'xpack.maps.source.MVTSingleLayerVectorSourceEditor.fieldsMessage', + { + defaultMessage: 'Fields', + } + )}{' '} + + + + } > { return ( { value={this.state.currentLayerName} onChange={this._handleLayerNameInputChange} isInvalid={this.state.currentLayerName === ''} + compressed /> - + + {i18n.translate( + 'xpack.maps.source.MVTSingleLayerVectorSourceEditor.zoomRangeTopMessage', + { + defaultMessage: 'Available levels', + } + )}{' '} + + + + } + formRowDisplay="columnCompressed" + value={[this.state.currentMinSourceZoom, this.state.currentMaxSourceZoom]} + min={MIN_ZOOM} + max={MAX_ZOOM} + onChange={this._handleZoomRangeChange} + allowEmptyRange={false} + showInput="inputWithPopover" + compressed + showLabels + prepend={i18n.translate( + 'xpack.maps.source.MVTSingleLayerVectorSourceEditor.dataZoomRangeMessage', { - defaultMessage: - 'Zoom levels where the layer is present in the tiles. This does not correspond directly to visibility. Layer data from lower levels can always be displayed at higher zoom levels (but not vice versa).', + defaultMessage: 'Zoom', } )} - > - - + /> {fieldEditor} ); From 188ac1b97d943fc9c1493bb5461532c70326b8f9 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Wed, 1 Jul 2020 10:33:53 -0600 Subject: [PATCH 91/97] clean up supportsAutoDomain --- patch.txt | 60 +++++++++++++++++++ .../components/color/color_map_select.js | 8 +-- .../components/color/dynamic_color_form.js | 6 +- .../vector/components/style_map_select.js | 1 + .../components/symbol/dynamic_icon_form.js | 19 +++++- .../components/symbol/icon_map_select.js | 9 +-- 6 files changed, 88 insertions(+), 15 deletions(-) create mode 100644 patch.txt diff --git a/patch.txt b/patch.txt new file mode 100644 index 0000000000000..a80013d1662fb --- /dev/null +++ b/patch.txt @@ -0,0 +1,60 @@ +diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/color/color_map_select.js b/x-pack/plugins/maps/public/classes/styles/vector/components/color/color_map_select.js +index 9042800a1ed..6b3e366ac4d 100644 +--- a/x-pack/plugins/maps/public/classes/styles/vector/components/color/color_map_select.js ++++ b/x-pack/plugins/maps/public/classes/styles/vector/components/color/color_map_select.js +@@ -89,7 +89,7 @@ export class ColorMapSelect extends Component { + }; + + _renderColorStopsInput() { +- if (this.props.supportsAutoDomain && !this.props.useCustomColorMap) { ++ if (!this.props.useCustomColorMap) { + return null; + } + +@@ -128,11 +128,11 @@ export class ColorMapSelect extends Component { + inputDisplay: this.props.customOptionLabel, + 'data-test-subj': `colorMapSelectOption_${CUSTOM_COLOR_MAP}`, + }, +- ...(this.props.supportsAutoDomain ? this.props.colorMapOptions : []), ++ ...this.props.colorMapOptions, + ]; + + let valueOfSelected; +- if (this.props.useCustomColorMap || !this.props.supportsAutoDomain) { ++ if (this.props.useCustomColorMap) { + valueOfSelected = CUSTOM_COLOR_MAP; + } else { + valueOfSelected = this.props.colorMapOptions.find( +@@ -151,7 +151,7 @@ export class ColorMapSelect extends Component { + {toggle} + + { + const fieldName = styleProperty.getFieldName(); + if (!fieldName) { + return null; + } + + return fields.find((field) => { + return field.name === fieldName; + }); + }; + function renderIconMapSelect() { - if (!styleOptions.field || !styleOptions.field.name) { + const field = getField(); + if (!field) { return null; } return ( ); diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/icon_map_select.js b/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/icon_map_select.js index 1fe2fd99afd98..de73fb6a07f14 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/icon_map_select.js +++ b/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/icon_map_select.js @@ -8,7 +8,6 @@ import React from 'react'; import { StyleMapSelect } from '../style_map_select'; import { i18n } from '@kbn/i18n'; -import { getIconPaletteOptions } from '../../symbol_utils'; import { IconStops } from './icon_stops'; export function IconMapSelect({ @@ -19,6 +18,7 @@ export function IconMapSelect({ styleProperty, symbolOptions, useCustomIconMap, + paletteOptions, }) { function onMapSelectChange({ customMapStops, selectedMapId, useCustomMap }) { onChange({ @@ -41,18 +41,15 @@ export function IconMapSelect({ ); } - const field = styleProperty.getField(); - const defaultOptions = field.supportsAutoDomain() ? getIconPaletteOptions(isDarkMode) : []; - return ( From 77a99ab67e5c0e10fe4e8c02f1248e2a4b0ae5ba Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Wed, 1 Jul 2020 10:36:53 -0600 Subject: [PATCH 92/97] remove patch.txt --- patch.txt | 60 ------------------------------------------------------- 1 file changed, 60 deletions(-) delete mode 100644 patch.txt diff --git a/patch.txt b/patch.txt deleted file mode 100644 index a80013d1662fb..0000000000000 --- a/patch.txt +++ /dev/null @@ -1,60 +0,0 @@ -diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/color/color_map_select.js b/x-pack/plugins/maps/public/classes/styles/vector/components/color/color_map_select.js -index 9042800a1ed..6b3e366ac4d 100644 ---- a/x-pack/plugins/maps/public/classes/styles/vector/components/color/color_map_select.js -+++ b/x-pack/plugins/maps/public/classes/styles/vector/components/color/color_map_select.js -@@ -89,7 +89,7 @@ export class ColorMapSelect extends Component { - }; - - _renderColorStopsInput() { -- if (this.props.supportsAutoDomain && !this.props.useCustomColorMap) { -+ if (!this.props.useCustomColorMap) { - return null; - } - -@@ -128,11 +128,11 @@ export class ColorMapSelect extends Component { - inputDisplay: this.props.customOptionLabel, - 'data-test-subj': `colorMapSelectOption_${CUSTOM_COLOR_MAP}`, - }, -- ...(this.props.supportsAutoDomain ? this.props.colorMapOptions : []), -+ ...this.props.colorMapOptions, - ]; - - let valueOfSelected; -- if (this.props.useCustomColorMap || !this.props.supportsAutoDomain) { -+ if (this.props.useCustomColorMap) { - valueOfSelected = CUSTOM_COLOR_MAP; - } else { - valueOfSelected = this.props.colorMapOptions.find( -@@ -151,7 +151,7 @@ export class ColorMapSelect extends Component { - {toggle} - - Date: Wed, 1 Jul 2020 11:03:22 -0600 Subject: [PATCH 93/97] cleanup --- .../components/color/color_map_select.js | 37 +++++++++++-------- .../components/color/dynamic_color_form.js | 14 +++---- .../vector/components/style_map_select.js | 27 ++++++++------ .../components/symbol/dynamic_icon_form.js | 7 +--- .../components/symbol/icon_map_select.js | 6 ++- 5 files changed, 49 insertions(+), 42 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/color/color_map_select.js b/x-pack/plugins/maps/public/classes/styles/vector/components/color/color_map_select.js index e6f5feaa86ad0..fe2f302504a15 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/components/color/color_map_select.js +++ b/x-pack/plugins/maps/public/classes/styles/vector/components/color/color_map_select.js @@ -89,7 +89,7 @@ export class ColorMapSelect extends Component { }; _renderColorStopsInput() { - if (!this.props.useCustomColorMap) { + if (!this.props.isCustomOnly && !this.props.useCustomColorMap) { return null; } @@ -122,6 +122,10 @@ export class ColorMapSelect extends Component { } _renderColorMapSelections() { + if (this.props.isCustomOnly) { + return null; + } + const colorMapOptionsWithCustom = [ { value: CUSTOM_COLOR_MAP, @@ -147,20 +151,22 @@ export class ColorMapSelect extends Component { ) : null; return ( - - {toggle} - - - - + + + {toggle} + + + + + + ); } @@ -168,7 +174,6 @@ export class ColorMapSelect extends Component { return ( {this._renderColorMapSelections()} - {this._renderColorStopsInput()} ); diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/color/dynamic_color_form.js b/x-pack/plugins/maps/public/classes/styles/vector/components/color/dynamic_color_form.js index f2b2b659153ed..90070343a1b48 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/components/color/dynamic_color_form.js +++ b/x-pack/plugins/maps/public/classes/styles/vector/components/color/dynamic_color_form.js @@ -90,7 +90,8 @@ export function DynamicColorForm({ if (styleProperty.isOrdinal()) { return ( - - {this.props.renderCustomStopsInput(this._onCustomMapChange)} - - ); - } - - render() { const mapOptionsWithCustom = [ { value: CUSTOM_MAP, @@ -81,13 +78,21 @@ export class StyleMapSelect extends Component { return ( + + + ); + } + + render() { + return ( + + {this._renderMapSelect()} {this._renderCustomStopsInput()} ); diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/dynamic_icon_form.js b/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/dynamic_icon_form.js index 8a8462a4c51cd..190306c21abdc 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/dynamic_icon_form.js +++ b/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/dynamic_icon_form.js @@ -9,7 +9,6 @@ import React, { Fragment } from 'react'; import { FieldSelect } from '../field_select'; import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui'; import { IconMapSelect } from './icon_map_select'; -import { getIconPaletteOptions } from '../../symbol_utils'; export function DynamicIconForm({ fields, @@ -56,14 +55,12 @@ export function DynamicIconForm({ return ( ); } diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/icon_map_select.js b/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/icon_map_select.js index de73fb6a07f14..6cfe656d65a1e 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/icon_map_select.js +++ b/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/icon_map_select.js @@ -9,6 +9,7 @@ import React from 'react'; import { StyleMapSelect } from '../style_map_select'; import { i18n } from '@kbn/i18n'; import { IconStops } from './icon_stops'; +import { getIconPaletteOptions } from '../../symbol_utils'; export function IconMapSelect({ customIconStops, @@ -18,7 +19,7 @@ export function IconMapSelect({ styleProperty, symbolOptions, useCustomIconMap, - paletteOptions, + isCustomOnly, }) { function onMapSelectChange({ customMapStops, selectedMapId, useCustomMap }) { onChange({ @@ -47,11 +48,12 @@ export function IconMapSelect({ customOptionLabel={i18n.translate('xpack.maps.styles.icon.customMapLabel', { defaultMessage: 'Custom icon palette', })} - options={paletteOptions} + options={getIconPaletteOptions(isDarkMode)} customMapStops={customIconStops} useCustomMap={useCustomIconMap} selectedMapId={iconPaletteId} renderCustomStopsInput={renderCustomIconStopsInput} + isCustomOnly={isCustomOnly} /> ); } From e06d763706be8e214b0ed8d3b8cdb5ee2b018d75 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Wed, 1 Jul 2020 11:05:49 -0600 Subject: [PATCH 94/97] clean-up --- .../vector/components/symbol/dynamic_icon_form.js | 15 ++------------- 1 file changed, 2 insertions(+), 13 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/dynamic_icon_form.js b/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/dynamic_icon_form.js index 190306c21abdc..e3724d42a783b 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/dynamic_icon_form.js +++ b/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/dynamic_icon_form.js @@ -35,19 +35,8 @@ export function DynamicIconForm({ }); }; - const getField = () => { - const fieldName = styleProperty.getFieldName(); - if (!fieldName) { - return null; - } - - return fields.find((field) => { - return field.name === fieldName; - }); - }; - function renderIconMapSelect() { - const field = getField(); + const field = styleProperty.getField(); if (!field) { return null; } @@ -60,7 +49,7 @@ export function DynamicIconForm({ onChange={onIconMapChange} isDarkMode={isDarkMode} symbolOptions={symbolOptions} - isCustomOnly={!field.supportsAutoDomain} + isCustomOnly={!field.supportsAutoDomain()} /> ); } From 37bb6261e96027fe5f47d24b30a842f8bf36f98c Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Wed, 1 Jul 2020 14:19:00 -0400 Subject: [PATCH 95/97] Merge in styling changes --- .../layers/file_upload_wizard/wizard.tsx | 2 +- .../mvt_field_config_editor.test.tsx.snap | 135 +++++++---- ...single_layer_source_settings.test.tsx.snap | 220 ++++++++++-------- 3 files changed, 211 insertions(+), 146 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/layers/file_upload_wizard/wizard.tsx b/x-pack/plugins/maps/public/classes/layers/file_upload_wizard/wizard.tsx index 859d6092dc64d..368dcda6b3a5f 100644 --- a/x-pack/plugins/maps/public/classes/layers/file_upload_wizard/wizard.tsx +++ b/x-pack/plugins/maps/public/classes/layers/file_upload_wizard/wizard.tsx @@ -16,7 +16,7 @@ import { import { getFileUploadComponent } from '../../../kibana_services'; import { GeojsonFileSource } from '../../sources/geojson_file_source'; import { VectorLayer } from '../../layers/vector_layer/vector_layer'; -// @ts-ignore +// @ts-expect-error import { createDefaultLayerDescriptor } from '../../sources/es_search_source'; import { RenderWizardArguments } from '../../layers/layer_wizard_registry'; diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap index 3ad6862be0921..f6d0129e85abf 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_field_config_editor.test.tsx.snap @@ -3,12 +3,14 @@ exports[`should render error for dupes 1`] = ` - } - compressed={false} + compressed={true} fullWidth={false} hasDividers={false} isInvalid={false} @@ -77,14 +70,30 @@ exports[`should render error for dupes 1`] = ` valueOfSelected="String" /> + + + + - } - compressed={false} + compressed={true} fullWidth={false} hasDividers={false} isInvalid={false} @@ -153,10 +153,24 @@ exports[`should render error for dupes 1`] = ` valueOfSelected="Number" /> + + + + - } - compressed={false} + compressed={true} fullWidth={false} hasDividers={false} isInvalid={false} @@ -254,10 +261,24 @@ exports[`should render error for empty name 1`] = ` valueOfSelected="String" /> + + + + - } - compressed={false} + compressed={true} fullWidth={false} hasDividers={false} isInvalid={false} @@ -355,14 +369,30 @@ exports[`should render field editor 1`] = ` valueOfSelected="String" /> + + + + - } - compressed={false} + compressed={true} fullWidth={false} hasDividers={false} isInvalid={false} @@ -431,10 +452,24 @@ exports[`should render field editor 1`] = ` valueOfSelected="Number" /> + + + + - - - + label={ + + + Available levels + + + + + } + max={24} + min={0} + onChange={[Function]} + prepend="Zoom" + showInput="inputWithPopover" + showLabels={true} + value={ + Array [ + 4, + 14, + ] + } + /> `; @@ -55,7 +60,7 @@ exports[`should render with fields 1`] = ` - - - + label={ + + + Available levels + + + + + } + max={24} + min={0} + onChange={[Function]} + prepend="Zoom" + showInput="inputWithPopover" + showLabels={true} + value={ + Array [ + 4, + 14, + ] + } + /> + + Fields + + + + + } labelType="label" > - - - + label={ + + + Available levels + + + + + } + max={24} + min={0} + onChange={[Function]} + prepend="Zoom" + showInput="inputWithPopover" + showLabels={true} + value={ + Array [ + 4, + 14, + ] + } + /> `; From 78532998c53d8defcc1e26e99a2bb823a21af663 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Wed, 1 Jul 2020 15:55:33 -0400 Subject: [PATCH 96/97] Tweak message format --- ...single_layer_source_settings.test.tsx.snap | 14 +++++++- .../mvt_single_layer_source_settings.tsx | 35 +++++++++++++------ 2 files changed, 38 insertions(+), 11 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_source_settings.test.tsx.snap b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_source_settings.test.tsx.snap index b6066a733d087..699173bd362fa 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_source_settings.test.tsx.snap +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/__snapshots__/mvt_single_layer_source_settings.test.tsx.snap @@ -118,7 +118,19 @@ exports[`should render with fields 1`] = ` label={ + Fields which are available in + + + foobar + + . + + + These can be used for tooltips and dynamic styling. + + } delay="regular" position="top" > diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx index e6e554820291f..208a93b41cc90 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx @@ -8,6 +8,7 @@ import React, { Fragment, Component, ChangeEvent } from 'react'; import { EuiFieldText, EuiFormRow, EuiToolTip, EuiIcon } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; +import { FormattedMessage } from '@kbn/i18n/react'; import _ from 'lodash'; import { MAX_ZOOM, MIN_ZOOM } from '../../../../common/constants'; import { ValidatedDualRange, Value } from '../../../../../../../src/plugins/kibana_react/public'; @@ -76,22 +77,36 @@ export class MVTSingleLayerSourceSettings extends Component { }; render() { + const preMessage = i18n.translate( + 'xpack.maps.source.MVTSingleLayerVectorSourceEditor.fieldsPreHelpMessage', + { + defaultMessage: 'Fields which are available in ', + } + ); + const message = ( + <> + {this.state.currentLayerName}.{' '} + + ); + const postMessage = i18n.translate( + 'xpack.maps.source.MVTSingleLayerVectorSourceEditor.fieldsPostHelpMessage', + { + defaultMessage: 'These can be used for tooltips and dynamic styling.', + } + ); const fieldEditor = this.props.showFields && this.state.currentLayerName !== '' ? ( + {preMessage} + {message} + {postMessage} + + } > {i18n.translate( From d8603d72e123f75c90082d0e1bef209b7b8f7f3a Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Wed, 1 Jul 2020 20:03:23 -0400 Subject: [PATCH 97/97] fix broken import --- .../mvt_single_layer_source_settings.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx index 208a93b41cc90..cd3fd97cf66a6 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_single_layer_source_settings.tsx @@ -8,7 +8,6 @@ import React, { Fragment, Component, ChangeEvent } from 'react'; import { EuiFieldText, EuiFormRow, EuiToolTip, EuiIcon } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { FormattedMessage } from '@kbn/i18n/react'; import _ from 'lodash'; import { MAX_ZOOM, MIN_ZOOM } from '../../../../common/constants'; import { ValidatedDualRange, Value } from '../../../../../../../src/plugins/kibana_react/public';