Consolidate cross-cutting concerns between region & coordinate maps in new maps_legacy plugin (#64123)

Author: Aaron Caldwell

src/legacy/core_plugins/kibana/public/__tests__/vis_type_vega/vega_visualization.js

@@ -59,12 +59,14 @@ import {
   setData,
   setSavedObjects,
   setNotifications,
+  setKibanaMapFactory,
   // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 } from '../../../../../../plugins/vis_type_vega/public/services';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { setInjectedVarFunc } from '../../../../../../plugins/maps_legacy/public/kibana_services';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { ServiceSettings } from '../../../../../../plugins/maps_legacy/public/map/service_settings';
+import { getKibanaMapFactoryProvider } from '../../../../../../plugins/maps_legacy/public';
 
 const THRESHOLD = 0.1;
 const PIXEL_DIFF = 30;
@@ -77,6 +79,18 @@ describe('VegaVisualizations', () => {
   let vegaVisualizationDependencies;
   let vegaVisType;
 
+  const coreSetupMock = {
+    notifications: {
+      toasts: {},
+    },
+    uiSettings: {
+      get: () => {},
+    },
+    injectedMetadata: {
+      getInjectedVar: () => {},
+    },
+  };
+  setKibanaMapFactory(getKibanaMapFactoryProvider(coreSetupMock));
   setInjectedVars({
     emsTileLayerId: {},
     enableExternalUrls: true,

src/legacy/core_plugins/region_map/public/__tests__/region_map_visualization.js

@@ -54,6 +54,7 @@ import { BaseVisType } from '../../../../../plugins/visualizations/public/vis_ty
 import { setInjectedVarFunc } from '../../../../../plugins/maps_legacy/public/kibana_services';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { ServiceSettings } from '../../../../../plugins/maps_legacy/public/map/service_settings';
+import { getBaseMapsVis } from '../../../../../plugins/maps_legacy/public';
 
 const THRESHOLD = 0.45;
 const PIXEL_DIFF = 96;
@@ -101,7 +102,7 @@ describe('RegionMapsVisualizationTests', function() {
 
   let getManifestStub;
   beforeEach(
-    ngMock.inject((Private, $injector) => {
+    ngMock.inject(() => {
       setInjectedVarFunc(injectedVar => {
         switch (injectedVar) {
           case 'mapConfig':
@@ -127,17 +128,28 @@ describe('RegionMapsVisualizationTests', function() {
         }
       });
       const serviceSettings = new ServiceSettings();
-      const uiSettings = $injector.get('config');
       const regionmapsConfig = {
         includeElasticMapsService: true,
         layers: [],
       };
+      const coreSetupMock = {
+        notifications: {
+          toasts: {},
+        },
+        uiSettings: {
+          get: () => {},
+        },
+        injectedMetadata: {
+          getInjectedVar: () => {},
+        },
+      };
+      const BaseMapsVisualization = getBaseMapsVis(coreSetupMock, serviceSettings);
 
       dependencies = {
         serviceSettings,
-        $injector,
         regionmapsConfig,
-        uiSettings,
+        uiSettings: coreSetupMock.uiSettings,
+        BaseMapsVisualization,
       };
 
       regionMapVisType = new BaseVisType(createRegionMapTypeDefinition(dependencies));

src/legacy/core_plugins/region_map/public/components/region_map_options.tsx

@@ -32,8 +32,7 @@ import {
   SelectOption,
   SwitchOption,
 } from '../../../../../plugins/charts/public';
-import { WmsOptions } from '../../../tile_map/public/components/wms_options';
-import { RegionMapVisParams } from '../types';
+import { RegionMapVisParams, WmsOptions } from '../../../../../plugins/maps_legacy/public';
 
 const mapLayerForOption = ({ layerId, name }: VectorLayer) => ({
   text: name,

src/legacy/core_plugins/region_map/public/legacy.ts

@@ -21,17 +21,12 @@ import { PluginInitializerContext } from 'kibana/public';
 import { npSetup, npStart } from 'ui/new_platform';
 
 import { RegionMapPluginSetupDependencies } from './plugin';
-import { LegacyDependenciesPlugin } from './shim';
 import { plugin } from '.';
 
 const plugins: Readonly<RegionMapPluginSetupDependencies> = {
   expressions: npSetup.plugins.expressions,
   visualizations: npSetup.plugins.visualizations,
   mapsLegacy: npSetup.plugins.mapsLegacy,
-
-  // Temporary solution
-  // It will be removed when all dependent services are migrated to the new platform.
-  __LEGACY: new LegacyDependenciesPlugin(),
 };
 
 const pluginInstance = plugin({} as PluginInitializerContext);

src/legacy/core_plugins/region_map/public/plugin.ts

@@ -25,28 +25,28 @@ import {
 } from '../../../../core/public';
 import { Plugin as ExpressionsPublicPlugin } from '../../../../plugins/expressions/public';
 import { VisualizationsSetup } from '../../../../plugins/visualizations/public';
-
-import { LegacyDependenciesPlugin, LegacyDependenciesPluginSetup } from './shim';
-
 // @ts-ignore
 import { createRegionMapFn } from './region_map_fn';
 // @ts-ignore
 import { createRegionMapTypeDefinition } from './region_map_type';
-import { IServiceSettings, MapsLegacyPluginSetup } from '../../../../plugins/maps_legacy/public';
+import {
+  getBaseMapsVis,
+  IServiceSettings,
+  MapsLegacyPluginSetup,
+} from '../../../../plugins/maps_legacy/public';
 
 /** @private */
-interface RegionMapVisualizationDependencies extends LegacyDependenciesPluginSetup {
+interface RegionMapVisualizationDependencies {
   uiSettings: IUiSettingsClient;
   regionmapsConfig: RegionMapsConfig;
   serviceSettings: IServiceSettings;
-  notificationService: any;
+  BaseMapsVisualization: any;
 }
 
 /** @internal */
 export interface RegionMapPluginSetupDependencies {
   expressions: ReturnType<ExpressionsPublicPlugin['setup']>;
   visualizations: VisualizationsSetup;
-  __LEGACY: LegacyDependenciesPlugin;
   mapsLegacy: MapsLegacyPluginSetup;
 }
 
@@ -66,14 +66,13 @@ export class RegionMapPlugin implements Plugin<Promise<void>, void> {
 
   public async setup(
     core: CoreSetup,
-    { expressions, visualizations, mapsLegacy, __LEGACY }: RegionMapPluginSetupDependencies
+    { expressions, visualizations, mapsLegacy }: RegionMapPluginSetupDependencies
   ) {
     const visualizationDependencies: Readonly<RegionMapVisualizationDependencies> = {
       uiSettings: core.uiSettings,
       regionmapsConfig: core.injectedMetadata.getInjectedVar('regionmap') as RegionMapsConfig,
       serviceSettings: mapsLegacy.serviceSettings,
-      notificationService: core.notifications.toasts,
-      ...(await __LEGACY.setup()),
+      BaseMapsVisualization: getBaseMapsVis(core, mapsLegacy.serviceSettings),
     };
 
     expressions.registerFunction(createRegionMapFn);

src/legacy/core_plugins/region_map/public/region_map_type.js

@@ -23,9 +23,7 @@ import { createRegionMapVisualization } from './region_map_visualization';
 import { RegionMapOptions } from './components/region_map_options';
 import { truncatedColorSchemas } from '../../../../plugins/charts/public';
 import { Schemas } from '../../../../plugins/vis_default_editor/public';
-
-// TODO: reference to TILE_MAP plugin should be removed
-import { ORIGIN } from '../../tile_map/common/origin';
+import { ORIGIN } from '../../../../plugins/maps_legacy/public';
 
 export function createRegionMapTypeDefinition(dependencies) {
   const { uiSettings, regionmapsConfig, serviceSettings } = dependencies;

src/legacy/core_plugins/region_map/public/region_map_visualization.js

@@ -21,30 +21,21 @@ import { i18n } from '@kbn/i18n';
 import ChoroplethLayer from './choropleth_layer';
 import { getFormat } from 'ui/visualize/loader/pipeline_helpers/utilities';
 import { toastNotifications } from 'ui/notify';
-
-import { TileMapTooltipFormatter } from './tooltip_formatter';
 import { truncatedColorMaps } from '../../../../plugins/charts/public';
-
-// TODO: reference to TILE_MAP plugin should be removed
-import { BaseMapsVisualizationProvider } from '../../tile_map/public/base_maps_visualization';
+import { tooltipFormatter } from './tooltip_formatter';
+import { mapTooltipProvider } from '../../../../plugins/maps_legacy/public';
 
 export function createRegionMapVisualization({
   serviceSettings,
-  $injector,
   uiSettings,
-  notificationService,
+  BaseMapsVisualization,
 }) {
-  const BaseMapsVisualization = new BaseMapsVisualizationProvider(
-    serviceSettings,
-    notificationService
-  );
-  const tooltipFormatter = new TileMapTooltipFormatter($injector);
-
   return class RegionMapsVisualization extends BaseMapsVisualization {
     constructor(container, vis) {
       super(container, vis);
       this._vis = this.vis;
       this._choroplethLayer = null;
+      this._tooltipFormatter = mapTooltipProvider(container, tooltipFormatter);
     }
 
     async render(esResponse, visParams) {
@@ -89,7 +80,7 @@ export function createRegionMapVisualization({
       this._choroplethLayer.setMetrics(results, metricFieldFormatter, valueColumn.name);
       if (termColumn && valueColumn) {
         this._choroplethLayer.setTooltipFormatter(
-          tooltipFormatter,
+          this._tooltipFormatter,
           metricFieldFormatter,
           termColumn.name,
           valueColumn.name
@@ -123,7 +114,7 @@ export function createRegionMapVisualization({
       this._choroplethLayer.setColorRamp(truncatedColorMaps[visParams.colorSchema].value);
       this._choroplethLayer.setLineWeight(visParams.outlineWeight);
       this._choroplethLayer.setTooltipFormatter(
-        tooltipFormatter,
+        this._tooltipFormatter,
         metricFieldFormatter,
         this._metricLabel
       );

src/legacy/core_plugins/region_map/public/tooltip.html

@@ -17,39 +17,24 @@
  * under the License.
  */
 
-import $ from 'jquery';
-import template from './tooltip.html';
-
-export const TileMapTooltipFormatter = $injector => {
-  const $rootScope = $injector.get('$rootScope');
-  const $compile = $injector.get('$compile');
-
-  const $tooltipScope = $rootScope.$new();
-  const $el = $('<div>').html(template);
-
-  $compile($el)($tooltipScope);
-
-  return function tooltipFormatter(metric, fieldFormatter, fieldName, metricName) {
-    if (!metric) {
-      return '';
-    }
-
-    $tooltipScope.details = [];
-    if (fieldName && metric) {
-      $tooltipScope.details.push({
-        label: fieldName,
-        value: metric.term,
-      });
-    }
-
-    if (metric) {
-      $tooltipScope.details.push({
-        label: metricName,
-        value: fieldFormatter ? fieldFormatter.convert(metric.value, 'text') : metric.value,
-      });
-    }
-
-    $tooltipScope.$apply();
-    return $el.html();
-  };
-};
+export function tooltipFormatter(metric, fieldFormatter, fieldName, metricName) {
+  if (!metric) {
+    return '';
+  }
+
+  const details = [];
+  if (fieldName && metric) {
+    details.push({
+      label: fieldName,
+      value: metric.term,
+    });
+  }
+
+  if (metric) {
+    details.push({
+      label: metricName,
+      value: fieldFormatter ? fieldFormatter.convert(metric.value, 'text') : metric.value,
+    });
+  }
+  return details;
+}

src/legacy/core_plugins/region_map/public/tooltip_formatter.js

@@ -18,8 +18,7 @@
  */
 
 import { FileLayer, VectorLayer } from '../../../../plugins/maps_legacy/public';
-// TODO: reference to TILE_MAP plugin should be removed
-import { ORIGIN } from '../../../../legacy/core_plugins/tile_map/common/origin';
+import { ORIGIN } from '../../../../plugins/maps_legacy/public';
 
 export const mapToLayerWithId = (prefix: string, layer: FileLayer): VectorLayer => ({
   ...layer,