[Vega] Use mapbox instead of leaflet (#88605)

* [WIP][Vega] Use mapbox instead of leaflet #78395

add MapServiceSettings class

some work

add tms_raster_layer

add LayerParameters type

clenup view.ts

some cleeanup

fix grammar

some refactoring and add attribution control

Some refactoring

Add some validation for zoom settings and destroy handler

Some refactoring

some work

fix bundle size

Move getZoomSettings to the separate file

update licence

some work

move logger to createViewConfig

add throttling for updating vega layer

* move EMSClient to a separate bundle

* [unit testing] add tests for validation_helper.ts

* [Bundle optimization] lazy loading of '@elastic/ems-client' only if user open map layer

* [Map] fix cursor: crosshair -> auto

* [unit testing] add tests for tms_raster_layer.test

* [unit testing] add tests for vega_layer.ts

* VSI related code was moved into a separate file / unit tests were added

* Add functional test for vega map

* [unit testing] add tests for map_service_setting.ts

* Add unload in function test and delete some unneeded code from test

* road_map -> road_map_desaturated

* [unit testing] add more tests for map_service_settings.test.ts

* Add unit tests for view.ts

* Fix some remarks

* Fix unit tests

* remove tms_tile_layers enum

* [unit testing] fix map_service_settings.test.ts

* Fix unit test for view.ts

* Fix some comments

* Fix type check

* Fix CI

Co-authored-by: Alexey Antonov <[email protected]>
Co-authored-by: Kibana Machine <[email protected]>

Author: 3 people

src/plugins/vis_type_vega/public/__snapshots__/vega_visualization.test.js.snap

@@ -17,17 +17,18 @@ import {
   setData,
   setInjectedVars,
   setUISettings,
-  setMapsLegacyConfig,
   setInjectedMetadata,
+  setMapServiceSettings,
 } from './services';
 
 import { createVegaFn } from './vega_fn';
 import { createVegaTypeDefinition } from './vega_type';
-import { IServiceSettings } from '../../maps_legacy/public';
+import { IServiceSettings, MapsLegacyPluginSetup } from '../../maps_legacy/public';
 import { ConfigSchema } from '../config';
 
 import { getVegaInspectorView } from './vega_inspector';
 import { getVegaVisRenderer } from './vega_vis_renderer';
+import { MapServiceSettings } from './vega_view/vega_map_view/map_service_settings';
 
 /** @internal */
 export interface VegaVisualizationDependencies {
@@ -44,7 +45,7 @@ export interface VegaPluginSetupDependencies {
   visualizations: VisualizationsSetup;
   inspector: InspectorSetup;
   data: DataPublicPluginSetup;
-  mapsLegacy: any;
+  mapsLegacy: MapsLegacyPluginSetup;
 }
 
 /** @internal */
@@ -68,8 +69,12 @@ export class VegaPlugin implements Plugin<Promise<void>, void> {
       enableExternalUrls: this.initializerContext.config.get().enableExternalUrls,
       emsTileLayerId: core.injectedMetadata.getInjectedVar('emsTileLayerId', true),
     });
+
     setUISettings(core.uiSettings);
-    setMapsLegacyConfig(mapsLegacy.config);
+
+    setMapServiceSettings(
+      new MapServiceSettings(mapsLegacy.config, this.initializerContext.env.packageInfo.version)
+    );
 
     const visualizationDependencies: Readonly<VegaVisualizationDependencies> = {
       core,

src/plugins/vis_type_vega/public/plugin.ts

@@ -10,7 +10,7 @@ import { CoreStart, NotificationsStart, IUiSettingsClient } from 'src/core/publi
 
 import { DataPublicPluginStart } from '../../data/public';
 import { createGetterSetter } from '../../kibana_utils/public';
-import { MapsLegacyConfig } from '../../maps_legacy/config';
+import { MapServiceSettings } from './vega_view/vega_map_view/map_service_settings';
 
 export const [getData, setData] = createGetterSetter<DataPublicPluginStart>('Data');
 
@@ -24,13 +24,14 @@ export const [getInjectedMetadata, setInjectedMetadata] = createGetterSetter<
   CoreStart['injectedMetadata']
 >('InjectedMetadata');
 
+export const [
+  getMapServiceSettings,
+  setMapServiceSettings,
+] = createGetterSetter<MapServiceSettings>('MapServiceSettings');
+
 export const [getInjectedVars, setInjectedVars] = createGetterSetter<{
   enableExternalUrls: boolean;
   emsTileLayerId: unknown;
 }>('InjectedVars');
 
-export const [getMapsLegacyConfig, setMapsLegacyConfig] = createGetterSetter<MapsLegacyConfig>(
-  'MapsLegacyConfig'
-);
-
 export const getEnableExternalUrls = () => getInjectedVars().enableExternalUrls;

src/plugins/vis_type_vega/public/services.ts

@@ -1,7 +1,7 @@
 {
   "$schema": "https://vega.github.io/schema/vega/v5.json",
   "config": {
-    "kibana": { "renderer": "svg", "type": "map", "mapStyle": false}
+    "kibana": { "type": "map", "mapStyle": "default", "latitude": 25, "longitude": -70, "zoom": 3}
   },
   "width": 512,
   "height": 512,

src/plugins/vis_type_vega/public/test_utils/vega_map_test.json

@@ -18,12 +18,21 @@ interface VegaViewParams {
   serviceSettings: IServiceSettings;
   filterManager: DataPublicPluginStart['query']['filterManager'];
   timefilter: DataPublicPluginStart['query']['timefilter']['timefilter'];
-  // findIndex: (index: string) => Promise<...>;
 }
 
 export class VegaBaseView {
   constructor(params: VegaViewParams);
   init(): Promise<void>;
   onError(error: any): void;
+  onWarn(error: any): void;
+  setView(map: any): void;
+  setDebugValues(view: any, spec: any, vlspec: any): void;
+  _addDestroyHandler(handler: Function): void;
+
   destroy(): Promise<void>;
+
+  _$container: any;
+  _parser: any;
+  _vegaViewConfig: any;
+  _serviceSettings: any;
 }

src/plugins/vis_type_vega/public/vega_view/vega_base_view.d.ts

@@ -160,8 +160,6 @@ export class VegaBaseView {
 
   createViewConfig() {
     const config = {
-      // eslint-disable-next-line import/namespace
-      logLevel: vega.Warn, // note: eslint has a false positive here
       renderer: this._parser.renderer,
     };
 
@@ -189,6 +187,13 @@ export class VegaBaseView {
     };
     config.loader = loader;
 
+    const logger = vega.logger(vega.Warn);
+
+    logger.warn = this.onWarn.bind(this);
+    logger.error = this.onError.bind(this);
+
+    config.logger = logger;
+
     return config;
   }