[Maps] Add styling and tooltip support to mapbox mvt vector tile sources (#64488)

* tmp commit

* rename

* more boilerpalte

* more boiler

* more boilerpalte

* typing

* fix import

* boilerplate

* more boiler

* enable custom palettes

* fix label text and orientation

* fix merge errors

* remove dupe import

* stash commit

* tmp commit

* debounce settings

* return null

* slight rearrangement

* tooltip guard

* minor tweaks

* feedback

* ts fixes

* ts fixes

* more ts fixes

* ts fixes

* jest test

* fix typo

* spacing

* fix typing

* add unit test

* add more tests

* add snapshot test

* add snapshot

* add field editor snapshot test

* fix snapshot

* add snapshot

* remove unused import

* test stub for mvt layer

fix optional param

more checks

* add snapshot test

more unit tests

more unit tests

ts fixes

* add data syncing unit test

* fix autorefactor

* fix merge and replace snapshots

* field editor changes

* field editor changes

* ts fixes

* update snapshots

* fix things

* fix names

* fix tooltip

* add more error handling

* improve copy

* styling changes

* style option box a little better

* ts fixes

* fix console error

* remove mbProperties from interface

* remove unused method

* remove cruft

* rename for consistency

* remove unused param

* feedback

* feedback

* ensure properties are always present

* handle possible null values

* feedback

* typo

* update SIEM

* feedback

* remove cruft

* remove unused translations

* feedback

* improve readability

* fix brittle test

* fix snapshot after master merge

* remove unused method

* feedback

* revert some feedback

* remove micro-optimization

* initialize in constructor

* simplify wording

* add snapshot

* naming

* add clarifying comment

* remove unused import

* sanitize tooltips

* remove cruft

* feedback

* fix typo

* remove export

* Design fixes

* clean up supportsAutoDomain

* remove patch.txt

* cleanup

* clean-up

* Merge in styling changes

* Tweak message format

* fix broken import

Co-authored-by: Elastic Machine <[email protected]>
Co-authored-by: miukimiu <[email protected]>
Co-authored-by: Nathan Reese <[email protected]>

Author: 4 people

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/data_request_descriptor_types.d.ts renamed to x-pack/plugins/maps/common/descriptor_types/data_request_descriptor_types.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/index.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/map_descriptor.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/common/descriptor_types/descriptor_types.d.ts renamed to x-pack/plugins/maps/common/descriptor_types/sources.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/common/descriptor_types/style_property_descriptor_types.d.ts renamed to x-pack/plugins/maps/common/descriptor_types/style_property_descriptor_types.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/es_agg_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;
+  }
+}