[Maps] Add styling and tooltip support to mapbox mvt vector tile sources

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<EuiDualRangeProps, 'value' | 'onChange' | 'min' | 'max'> {
   value?: Value;
   allowEmptyRange?: boolean;
-  label?: string;
+  label?: string | ReactNode;
   formRowDisplay?: EuiFormRowDisplayKeys;
   onChange?: (val: [string, string]) => void;
   min?: number;

x-pack/plugins/maps/common/constants.ts

@@ -223,6 +223,11 @@ export enum SCALING_TYPES {
 
 export const RGBA_0000 = 'rgba(0,0,0,0)';
 
+export enum MVT_FIELD_TYPE {
+  STRING = 'String',
+  NUMBER = 'Number',
+}
+
 export const SPATIAL_FILTERS_LAYER_ID = 'SPATIAL_FILTERS_LAYER_ID';
 
 export enum INITIAL_LOCATION {

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';

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';
 
@@ -39,8 +40,9 @@ export type Goto = {
 };
 
 export type TooltipFeature = {
-  id: number;
+  id?: number | string;
   layerId: string;
+  mbProperties: GeoJsonProperties;
 };
 
 export type TooltipState = {

x-pack/plugins/maps/common/descriptor_types/descriptor_types.d.ts → x-pack/plugins/maps/common/descriptor_types/sources.ts

@@ -7,7 +7,14 @@
 
 import { FeatureCollection } from 'geojson';
 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,
+  MVT_FIELD_TYPE,
+} from '../constants';
 import { StyleDescriptor, VectorStyleDescriptor } from './style_property_descriptor_types';
 import { DataRequestDescriptor } from './data_request_descriptor_types';
 
@@ -96,18 +103,34 @@ export type XYZTMSSourceDescriptor = AbstractSourceDescriptor &
     urlTemplate: string;
   };
 
-export type TiledSingleLayerVectorSourceDescriptor = AbstractSourceDescriptor & {
+export type MVTFieldDescriptor = {
+  name: string;
+  type: MVT_FIELD_TYPE;
+};
+
+export type TiledSingleLayerVectorSourceSettings = {
   urlTemplate: string;
   layerName: string;
 
   // 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[];
 };
 
+export type TiledSingleLayerVectorSourceDescriptor = AbstractSourceDescriptor &
+  TiledSingleLayerVectorSourceSettings & {
+    tooltipProperties: string[];
+  };
+
 export type GeojsonFileSourceDescriptor = {
   __featureCollection: FeatureCollection;
   name: string;

x-pack/plugins/maps/public/classes/fields/es_agg_field.ts

@@ -128,6 +128,10 @@ export class ESAggField implements IESAggField {
   async getCategoricalFieldMetaRequest(size: number): Promise<unknown> {
     return this._esDocField ? this._esDocField.getCategoricalFieldMetaRequest(size) : null;
   }
+
+  supportsAutoDomain(): boolean {
+    return true;
+  }
 }
 
 export function esAggFieldsFactory(

x-pack/plugins/maps/public/classes/fields/field.ts

@@ -20,6 +20,12 @@ export interface IField {
   isValid(): boolean;
   getOrdinalFieldMetaRequest(): Promise<unknown>;
   getCategoricalFieldMetaRequest(size: number): Promise<unknown>;
+
+  // 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;
 }
 
@@ -80,4 +86,8 @@ export class AbstractField implements IField {
   async getCategoricalFieldMetaRequest(size: number): Promise<unknown> {
     return null;
   }
+
+  supportsAutoDomain(): boolean {
+    return true;
+  }
 }

x-pack/plugins/maps/public/classes/fields/mvt_field.ts

@@ -0,0 +1,59 @@
+/*
+ * 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 { 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: MVT_FIELD_TYPE;
+  constructor({
+    fieldName,
+    type,
+    source,
+    origin,
+  }: {
+    fieldName: string;
+    source: ITiledSingleLayerVectorSource;
+    origin: FIELD_ORIGIN;
+    type: MVT_FIELD_TYPE;
+  }) {
+    super({ fieldName, origin });
+    this._source = source;
+    this._type = type;
+  }
+
+  getMVTFieldDescriptor(): MVTFieldDescriptor {
+    return {
+      type: this._type,
+      name: this.getName(),
+    };
+  }
+
+  getSource(): IVectorSource {
+    return this._source;
+  }
+
+  async getDataType(): Promise<string> {
+    if (this._type === MVT_FIELD_TYPE.STRING) {
+      return 'string';
+    } else if (this._type === MVT_FIELD_TYPE.NUMBER) {
+      return 'number';
+    } else {
+      throw new Error(`Unrecognized MVT field-type ${this._type}`);
+    }
+  }
+
+  async getLabel(): Promise<string> {
+    return this.getName();
+  }
+
+  supportsAutoDomain() {
+    return false;
+  }
+}

x-pack/plugins/maps/public/classes/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;
   }

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<MapFilters> }) {
+    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();
+  }
+}

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';
 

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() {

x-pack/plugins/maps/public/classes/layers/layer.tsx

@@ -325,27 +325,28 @@ export class AbstractLayer implements ILayer {
     return this._source.getMinZoom();
   }
 
+  _getMbSourceId() {
+    return this.getId();
+  }
+
   _requiresPrevSourceCleanup(mbMap: unknown) {
     return false;
   }
 
   _removeStaleMbSourcesAndLayers(mbMap: unknown) {
     if (this._requiresPrevSourceCleanup(mbMap)) {
-      // @ts-ignore
+      // @ts-expect-error
       const mbStyle = mbMap.getStyle();
-      // @ts-ignore
+      // @ts-expect-error
       mbStyle.layers.forEach((mbLayer) => {
-        // @ts-ignore
         if (this.ownsMbLayerId(mbLayer.id)) {
-          // @ts-ignore
+          // @ts-expect-error
           mbMap.removeLayer(mbLayer.id);
         }
       });
-      // @ts-ignore
       Object.keys(mbStyle.sources).some((mbSourceId) => {
-        // @ts-ignore
         if (this.ownsMbSourceId(mbSourceId)) {
-          // @ts-ignore
+          // @ts-expect-error
           mbMap.removeSource(mbSourceId);
         }
       });
@@ -429,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');
   }
 

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,
       });