[ML] decouple ML plugin from Map embeddable (#182409)

Part of #182020 --------- Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
elastic · May 7, 2024 · 8c20433 · 8c20433
1 parent 9ffe1df
commit 8c20433
Show file tree

Hide file tree

Showing 10 changed files with 53 additions and 185 deletions.
diff --git a/x-pack/plugins/maps/public/index.ts b/x-pack/plugins/maps/public/index.ts
@@ -26,6 +26,7 @@ export type {
 } from './classes/tooltips/tooltip_property';
 
 export type { MapsSetupApi, MapsStartApi } from './api';
+export type { CreateLayerDescriptorParams } from './classes/sources/es_search_source/create_layer_descriptor';
 
 export type { MapEmbeddable, MapEmbeddableInput, MapEmbeddableOutput } from './embeddable';
 export { type MapApi, isMapApi } from './embeddable/map_api';

diff --git a/x-pack/plugins/ml/public/application/components/ml_embedded_map/index.ts b/x-pack/plugins/ml/public/application/components/ml_embedded_map/index.ts
diff --git a/x-pack/plugins/ml/public/application/components/ml_embedded_map/ml_embedded_map.tsx b/x-pack/plugins/ml/public/application/components/ml_embedded_map/ml_embedded_map.tsx
diff --git a/x-pack/plugins/ml/public/application/explorer/anomalies_map.tsx b/x-pack/plugins/ml/public/application/explorer/anomalies_map.tsx
@@ -18,6 +18,7 @@ import {
   htmlIdGenerator,
 } from '@elastic/eui';
 import type { VectorLayerDescriptor } from '@kbn/maps-plugin/common';
+import { INITIAL_LOCATION } from '@kbn/maps-plugin/common';
 import {
   FIELD_ORIGIN,
   LAYER_TYPE,
@@ -29,7 +30,6 @@ import type { EMSTermJoinConfig } from '@kbn/maps-plugin/public';
 import { isDefined } from '@kbn/ml-is-defined';
 import type { MlAnomaliesTableRecord } from '@kbn/ml-anomaly-utils';
 import { useMlKibana } from '../contexts/kibana';
-import { MlEmbeddedMapComponent } from '../components/ml_embedded_map';
 
 const MAX_ENTITY_VALUES = 3;
 
@@ -253,7 +253,16 @@ export const AnomaliesMap: FC<Props> = ({ anomalies, jobIds }) => {
             data-test-subj="mlAnomalyExplorerAnomaliesMap"
             style={{ width: '100%', height: 300 }}
           >
-            <MlEmbeddedMapComponent layerList={layerList} />
+            {mapsPlugin && (
+              <mapsPlugin.Map
+                layerList={layerList}
+                hideFilterActions={true}
+                mapSettings={{
+                  initialLocation: INITIAL_LOCATION.AUTO_FIT_TO_BOUNDS,
+                  autoFitToDataBounds: true,
+                }}
+              />
+            )}
           </div>
         </EuiAccordion>
       </EuiPanel>

diff --git a/...ck/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_embedded_map.tsx b/...ck/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_embedded_map.tsx
@@ -7,14 +7,19 @@
 
 import React, { useState, useEffect } from 'react';
 import type { LayerDescriptor } from '@kbn/maps-plugin/common';
+import { INITIAL_LOCATION } from '@kbn/maps-plugin/common';
 import type { Dictionary } from '../../../../common/types/common';
 import { getMLAnomaliesActualLayer, getMLAnomaliesTypicalLayer } from './map_config';
-import { MlEmbeddedMapComponent } from '../../components/ml_embedded_map';
+import { useMlKibana } from '../../contexts/kibana';
 interface Props {
   seriesConfig: Dictionary<any>;
 }
 
 export function EmbeddedMapComponentWrapper({ seriesConfig }: Props) {
+  const {
+    services: { maps: mapsPlugin },
+  } = useMlKibana();
+
   const [layerList, setLayerList] = useState<LayerDescriptor[]>([]);
 
   useEffect(() => {
@@ -26,9 +31,16 @@ export function EmbeddedMapComponentWrapper({ seriesConfig }: Props) {
     }
   }, [seriesConfig]);
 
-  return (
+  return mapsPlugin ? (
     <div data-test-subj="xpack.ml.explorer.embeddedMap" style={{ width: '100%', height: 300 }}>
-      <MlEmbeddedMapComponent layerList={layerList} />
+      <mapsPlugin.Map
+        layerList={layerList}
+        hideFilterActions={true}
+        mapSettings={{
+          initialLocation: INITIAL_LOCATION.AUTO_FIT_TO_BOUNDS,
+          autoFitToDataBounds: true,
+        }}
+      />
     </div>
-  );
+  ) : null;
 }
diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/common/map_loader/map_loader.ts b/x-pack/plugins/ml/public/application/jobs/new_job/common/map_loader/map_loader.ts
@@ -9,7 +9,7 @@ import memoizeOne from 'memoize-one';
 import { isEqual } from 'lodash';
 import type { DataView } from '@kbn/data-views-plugin/common';
 import type { ES_GEO_FIELD_TYPE, LayerDescriptor } from '@kbn/maps-plugin/common';
-import type { MapsStartApi } from '@kbn/maps-plugin/public';
+import type { CreateLayerDescriptorParams, MapsStartApi } from '@kbn/maps-plugin/public';
 import type { Query } from '@kbn/es-query';
 import type { Field, SplitField } from '@kbn/ml-anomaly-utils';
 import { ChartLoader } from '../chart_loader';
@@ -30,7 +30,6 @@ export class MapLoader extends ChartLoader {
     geoField: Field,
     splitField: SplitField,
     fieldValues: string[],
-    filters?: any[],
     savedSearchQuery?: Query
   ) {
     const layerList: LayerDescriptor[] = [];
@@ -41,11 +40,10 @@ export class MapLoader extends ChartLoader {
           ? `${splitField.name}:${fieldValues[0]} ${query ? `and ${query}` : ''}`
           : `${query ? query : ''}`;
 
-      const params: any = {
+      const params: CreateLayerDescriptorParams = {
         indexPatternId: this._dataView.id,
         geoFieldName: geoField.name,
         geoFieldType: geoField.type as unknown as ES_GEO_FIELD_TYPE,
-        filters: filters ?? [],
         query: { query: queryString, language: 'kuery' },
       };
 

diff --git a/...n/jobs/new_job/pages/components/pick_fields_step/components/geo_view/geo_map_examples.tsx b/...n/jobs/new_job/pages/components/pick_fields_step/components/geo_view/geo_map_examples.tsx
@@ -9,9 +9,10 @@ import type { FC } from 'react';
 import React from 'react';
 import { EuiFlexGrid, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import type { LayerDescriptor } from '@kbn/maps-plugin/common';
+import { INITIAL_LOCATION } from '@kbn/maps-plugin/common';
 import type { Aggregation, Field, SplitField } from '@kbn/ml-anomaly-utils';
 import { SplitCards, useAnimateSplit } from '../split_cards';
-import { MlEmbeddedMapComponent } from '../../../../../../../components/ml_embedded_map';
+import { useMlKibana } from '../../../../../../../contexts/kibana';
 import { JOB_TYPE } from '../../../../../../../../../common/constants/new_job';
 import { DetectorTitle } from '../detector_title';
 
@@ -31,6 +32,10 @@ export const GeoMapExamples: FC<Props> = ({
   geoAgg,
   layerList,
 }) => {
+  const {
+    services: { maps: mapsPlugin },
+  } = useMlKibana();
+
   const animateSplit = useAnimateSplit();
 
   return (
@@ -46,9 +51,18 @@ export const GeoMapExamples: FC<Props> = ({
           <>
             {geoAgg && geoField ? <DetectorTitle index={0} agg={geoAgg} field={geoField} /> : null}
             <EuiSpacer size="s" />
-            <span data-test-subj="mlGeoJobWizardMap" style={{ width: '100%', height: 400 }}>
-              <MlEmbeddedMapComponent layerList={layerList} />
-            </span>
+            {mapsPlugin && (
+              <span data-test-subj="mlGeoJobWizardMap" style={{ width: '100%', height: 400 }}>
+                <mapsPlugin.Map
+                  layerList={layerList}
+                  hideFilterActions={true}
+                  mapSettings={{
+                    initialLocation: INITIAL_LOCATION.AUTO_FIT_TO_BOUNDS,
+                    autoFitToDataBounds: true,
+                  }}
+                />
+              </span>
+            )}
           </>
         </EuiFlexItem>
       </EuiFlexGrid>

diff --git a/...n/jobs/new_job/pages/components/pick_fields_step/components/geo_view/metric_selection.tsx b/...n/jobs/new_job/pages/components/pick_fields_step/components/geo_view/metric_selection.tsx
@@ -29,7 +29,7 @@ export const GeoDetector: FC<Props> = ({ setIsValid }) => {
   const [layerList, setLayerList] = useState<LayerDescriptor[]>([]);
 
   const {
-    services: { data, notifications: toasts },
+    services: { notifications: toasts },
   } = useMlKibana();
   const { mapLoader } = useContext(JobCreatorContext);
 
@@ -72,14 +72,12 @@ export const GeoDetector: FC<Props> = ({ setIsValid }) => {
   useEffect(() => {
     async function getMapLayersForGeoJob() {
       if (jobCreator.geoField) {
-        const { filter, query } = jobCreator.savedSearchQuery ?? {};
-        const filters = [...data.query.filterManager.getFilters(), ...(filter ?? [])];
+        const { query } = jobCreator.savedSearchQuery ?? {};
 
         const layers = await mapLoader.getMapLayersForGeoJob(
           jobCreator.geoField,
           jobCreator.splitField,
           fieldValues,
-          filters,
           query
         );
         setLayerList(layers);

diff --git a/...ew_job/pages/components/pick_fields_step/components/geo_view/metric_selection_summary.tsx b/...ew_job/pages/components/pick_fields_step/components/geo_view/metric_selection_summary.tsx
@@ -24,7 +24,7 @@ export const GeoDetectorsSummary: FC = () => {
   const splitField = jobCreator.splitField;
 
   const {
-    services: { data, notifications },
+    services: { notifications },
   } = useMlKibana();
 
   // Load example field values for summary view
@@ -56,14 +56,12 @@ export const GeoDetectorsSummary: FC = () => {
   useEffect(() => {
     async function getMapLayersForGeoJob() {
       if (geoField) {
-        const { filter, query } = jobCreator.savedSearchQuery ?? {};
-        const filters = [...data.query.filterManager.getFilters(), ...(filter ?? [])];
+        const { query } = jobCreator.savedSearchQuery ?? {};
 
         const layers = await mapLoader.getMapLayersForGeoJob(
           geoField,
           splitField,
           fieldValues,
-          filters,
           query
         );
         setLayerList(layers);

diff --git a/x-pack/test/functional/services/ml/job_wizard_geo.ts b/x-pack/test/functional/services/ml/job_wizard_geo.ts
@@ -46,7 +46,7 @@ export function MachineLearningJobWizardGeoProvider({ getService }: FtrProviderC
       );
 
       await testSubjects.existOrFail('mlGeoJobWizardMap');
-      await testSubjects.existOrFail('mlEmbeddedMapContent');
+      await testSubjects.existOrFail('mapContainer');
     },
   };
 }