[Maps] EMS baselayer should load cleanly (#88531)

x-pack/plugins/maps/common/descriptor_types/data_request_descriptor_types.ts

@@ -87,13 +87,18 @@ export type ESGeoLineSourceResponseMeta = {
   totalEntities: number;
 };
 
+export type VectorTileLayerMeta = {
+  tileLayerId: string;
+};
+
 // Partial because objects are justified downstream in constructors
 export type DataMeta = Partial<
   VectorSourceRequestMeta &
     VectorJoinSourceRequestMeta &
     VectorStyleRequestMeta &
     ESSearchSourceResponseMeta &
-    ESGeoLineSourceResponseMeta
+    ESGeoLineSourceResponseMeta &
+    VectorTileLayerMeta
 >;
 
 type NumericalStyleFieldData = {

x-pack/plugins/maps/public/actions/data_request_actions.ts

@@ -47,8 +47,8 @@ import { IVectorStyle } from '../classes/styles/vector/vector_style';
 const FIT_TO_BOUNDS_SCALE_FACTOR = 0.1;
 
 export type DataRequestContext = {
-  startLoading(dataId: string, requestToken: symbol, meta: DataMeta): void;
-  stopLoading(dataId: string, requestToken: symbol, data: object, meta?: DataMeta): void;
+  startLoading(dataId: string, requestToken: symbol, requestMeta: DataMeta): void;
+  stopLoading(dataId: string, requestToken: symbol, data: object, resultsMeta?: DataMeta): void;
   onLoadError(dataId: string, requestToken: symbol, errorMessage: string): void;
   updateSourceData(newData: unknown): void;
   isRequestStillActive(dataId: string, requestToken: symbol): boolean;

x-pack/plugins/maps/public/classes/layers/create_basemap_layer_descriptor.ts

@@ -11,7 +11,6 @@ import { getEMSSettings } from '../../kibana_services';
 // @ts-expect-error
 import { KibanaTilemapSource } from '../sources/kibana_tilemap_source';
 import { TileLayer } from './tile_layer/tile_layer';
-// @ts-expect-error
 import { VectorTileLayer } from './vector_tile_layer/vector_tile_layer';
 // @ts-expect-error
 import { EMSTMSSource } from '../sources/ems_tms_source';

x-pack/plugins/maps/public/classes/layers/vector_tile_layer/vector_tile_layer.d.ts

@@ -0,0 +1,12 @@
+/*
+ * 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 { ITileLayerArguments, TileLayer } from '../tile_layer/tile_layer';
+
+export class VectorTileLayer extends TileLayer {
+  static type: string;
+  constructor(args: ITileLayerArguments);
+}

x-pack/plugins/maps/public/classes/layers/vector_tile_layer/vector_tile_layer.js

@@ -44,7 +44,7 @@ export class VectorTileLayer extends TileLayer {
     return prevMeta.tileLayerId === nextMeta.tileLayerId;
   }
 
-  async syncData({ startLoading, stopLoading, onLoadError, dataFilters }) {
+  async syncData({ startLoading, stopLoading, onLoadError }) {
     const nextMeta = { tileLayerId: this.getSource().getTileLayerId() };
     const canSkipSync = this._canSkipSync({
       prevDataRequest: this.getSourceDataRequest(),
@@ -56,14 +56,14 @@ export class VectorTileLayer extends TileLayer {
 
     const requestToken = Symbol(`layer-source-refresh:${this.getId()} - source`);
     try {
-      startLoading(SOURCE_DATA_REQUEST_ID, requestToken, dataFilters);
+      startLoading(SOURCE_DATA_REQUEST_ID, requestToken, nextMeta);
       const styleAndSprites = await this.getSource().getVectorStyleSheetAndSpriteMeta(isRetina());
       const spriteSheetImageData = await loadSpriteSheetImageData(styleAndSprites.spriteMeta.png);
       const data = {
         ...styleAndSprites,
         spriteSheetImageData,
       };
-      stopLoading(SOURCE_DATA_REQUEST_ID, requestToken, data, nextMeta);
+      stopLoading(SOURCE_DATA_REQUEST_ID, requestToken, data);
     } catch (error) {
       onLoadError(SOURCE_DATA_REQUEST_ID, requestToken, error.message);
     }

x-pack/plugins/maps/public/classes/layers/vector_tile_layer/vector_tile_layer.test.ts

@@ -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.
+ */
+
+import { ITileLayerArguments } from '../tile_layer/tile_layer';
+import { SOURCE_TYPES } from '../../../../common/constants';
+import { MapFilters, XYZTMSSourceDescriptor } from '../../../../common/descriptor_types';
+import { ITMSSource, AbstractTMSSource } from '../../sources/tms_source';
+import { ILayer } from '../layer';
+import { VectorTileLayer } from './vector_tile_layer';
+import { DataRequestContext } from '../../../actions';
+
+const sourceDescriptor: XYZTMSSourceDescriptor = {
+  type: SOURCE_TYPES.EMS_XYZ,
+  urlTemplate: 'https://example.com/{x}/{y}/{z}.png',
+  id: 'mockSourceId',
+};
+
+class MockTileSource extends AbstractTMSSource implements ITMSSource {
+  readonly _descriptor: XYZTMSSourceDescriptor;
+  constructor(descriptor: XYZTMSSourceDescriptor) {
+    super(descriptor, {});
+    this._descriptor = descriptor;
+  }
+
+  async getDisplayName(): Promise<string> {
+    return this._descriptor.urlTemplate;
+  }
+
+  async getUrlTemplate(): Promise<string> {
+    return 'template/{x}/{y}/{z}.png';
+  }
+
+  getTileLayerId() {
+    return this._descriptor.id;
+  }
+
+  getVectorStyleSheetAndSpriteMeta() {
+    throw new Error('network error');
+  }
+}
+
+describe('VectorTileLayer', () => {
+  it('should correctly inject tileLayerId in meta', async () => {
+    const source = new MockTileSource(sourceDescriptor);
+
+    const args: ITileLayerArguments = {
+      source,
+      layerDescriptor: { id: 'layerid', sourceDescriptor },
+    };
+
+    const layer: ILayer = new VectorTileLayer(args);
+
+    let actualMeta;
+    let actualErrorMessage;
+    const mockContext = ({
+      startLoading: (requestId: string, token: string, meta: unknown) => {
+        actualMeta = meta;
+      },
+      onLoadError: (requestId: string, token: string, message: string) => {
+        actualErrorMessage = message;
+      },
+      dataFilters: ({ foo: 'bar' } as unknown) as MapFilters,
+    } as unknown) as DataRequestContext;
+
+    await layer.syncData(mockContext);
+
+    expect(actualMeta).toStrictEqual({ tileLayerId: 'mockSourceId' });
+    expect(actualErrorMessage).toStrictEqual('network error');
+  });
+});

x-pack/plugins/maps/public/selectors/map_selectors.ts

@@ -76,7 +76,7 @@ export function createLayerInstance(
         joins,
       });
     case VectorTileLayer.type:
-      return new VectorTileLayer({ layerDescriptor, source });
+      return new VectorTileLayer({ layerDescriptor, source: source as ITMSSource });
     case HeatmapLayer.type:
       return new HeatmapLayer({ layerDescriptor, source });
     case BlendedVectorLayer.type: