From c7b782b0394f9dfbd3076f3ba30d419ef9532a31 Mon Sep 17 00:00:00 2001 From: Melissa Alvarez Date: Wed, 27 Jan 2021 16:56:40 -0700 Subject: [PATCH] use shared MlEmbeddedMapComponent in explorer --- .../ml_embedded_map/ml_embedded_map.tsx | 11 +- .../explorer_chart_embedded_map.tsx | 142 ++---------------- .../explorer_charts_container.js | 6 +- 3 files changed, 14 insertions(+), 145 deletions(-) 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 index d5fdc9d52a102..12c7d6ac69bb1 100644 --- 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 @@ -8,6 +8,7 @@ import React, { useEffect, useRef, useState } from 'react'; import { htmlIdGenerator } from '@elastic/eui'; import { LayerDescriptor } from '../../../../../maps/common/descriptor_types'; +import { INITIAL_LOCATION } from '../../../../../maps/common/constants'; import { MapEmbeddable, MapEmbeddableInput, @@ -81,21 +82,13 @@ export function MlEmbeddedMapComponent({ viewMode: ViewMode.VIEW, isLayerTOCOpen: false, hideFilterActions: true, - // Zoom Lat/Lon values are set to make sure map is in center in the panel - // It will also omit Greenland/Antarctica etc. NOTE: Can be removed when initialLocation is set - mapCenter: { - lon: 11, - lat: 20, - zoom: 1, - }, // can use mapSettings to center map on anomalies mapSettings: { disableInteractive: false, hideToolbarOverlay: false, hideLayerControl: false, hideViewControl: false, - // Doesn't currently work with GEO_JSON. Will uncomment when https://github.com/elastic/kibana/pull/88294 is in - // initialLocation: INITIAL_LOCATION.AUTO_FIT_TO_BOUNDS, // this will startup based on data-extent + initialLocation: INITIAL_LOCATION.AUTO_FIT_TO_BOUNDS, // this will startup based on data-extent autoFitToDataBounds: true, // this will auto-fit when there are changes to the filter and/or query }, }; diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_embedded_map.tsx b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_embedded_map.tsx index 8d84cd3b47ffb..fc1621e962f36 100644 --- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_embedded_map.tsx +++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_embedded_map.tsx @@ -4,152 +4,30 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { useMemo, useState, useRef, useEffect } from 'react'; -import { htmlIdGenerator } from '@elastic/eui'; -import { - EmbeddableFactory, - ErrorEmbeddable, - isErrorEmbeddable, - ViewMode, -} from '../../../../../../../src/plugins/embeddable/public'; -import { - MapEmbeddable, - MapEmbeddableInput, - MapEmbeddableOutput, - // eslint-disable-next-line @kbn/eslint/no-restricted-paths -} from '../../../../../maps/public/embeddable'; +import React, { useState, useEffect } from 'react'; import { Dictionary } from '../../../../common/types/common'; -import { useMlKibana } from '../../contexts/kibana'; -import { MAP_SAVED_OBJECT_TYPE, INITIAL_LOCATION } from '../../../../../maps/common/constants'; import { LayerDescriptor } from '../../../../../maps/common/descriptor_types'; import { getMLAnomaliesActualLayer, getMLAnomaliesTypicalLayer } from './map_config'; +import { MlEmbeddedMapComponent } from '../../components/ml_embedded_map'; interface Props { seriesConfig: Dictionary; - severity: number; } -export function EmbeddedMapComponent({ seriesConfig, severity }: Props) { - const [embeddable, setEmbeddable] = useState(); - const id = useMemo(() => htmlIdGenerator()(), []); +export function EmbeddedMapComponentWrapper({ seriesConfig }: Props) { + const [layerList, setLayerList] = useState([]); - const embeddableRoot: React.RefObject = useRef(null); - const layerList = useRef([]); - const { - services: { embeddable: embeddablePlugin, maps: mapsPlugin }, - } = useMlKibana(); - - const factory: - | EmbeddableFactory - | undefined = embeddablePlugin - ? embeddablePlugin.getEmbeddableFactory(MAP_SAVED_OBJECT_TYPE) - : undefined; - - const input: MapEmbeddableInput = { - id, - attributes: { title: '' }, - filters: [], - hidePanelTitles: true, - refreshConfig: { - value: 0, - pause: false, - }, - viewMode: ViewMode.VIEW, - isLayerTOCOpen: false, - hideFilterActions: true, - mapSettings: { - disableInteractive: false, - hideToolbarOverlay: true, - hideLayerControl: false, - hideViewControl: false, - initialLocation: INITIAL_LOCATION.AUTO_FIT_TO_BOUNDS, // this will startup based on data-extent - autoFitToDataBounds: true, // this will auto-fit when there are changes to the filter and/or query - }, - }; - - // Update the layer list with updated geo points upon refresh useEffect(() => { - if ( - embeddable && - !isErrorEmbeddable(embeddable) && - seriesConfig.mapData && - seriesConfig.mapData.length > 0 - ) { - layerList.current = [ - layerList.current[0], + if (seriesConfig.mapData && seriesConfig.mapData.length > 0) { + setLayerList([ getMLAnomaliesActualLayer(seriesConfig.mapData), getMLAnomaliesTypicalLayer(seriesConfig.mapData), - ]; - embeddable.setLayerList(layerList.current); - } - }, [embeddable, seriesConfig.mapData]); - - useEffect(() => { - async function setupEmbeddable() { - if (!factory) { - // eslint-disable-next-line no-console - console.error('Map embeddable not found.'); - return; - } - const embeddableObject = await factory.create({ - ...input, - title: 'Explorer map', - }); - - if (embeddableObject && !isErrorEmbeddable(embeddableObject)) { - const basemapLayerDescriptor = mapsPlugin - ? await mapsPlugin.createLayerDescriptors.createBasemapLayerDescriptor() - : null; - - if (basemapLayerDescriptor) { - layerList.current = [basemapLayerDescriptor]; - await embeddableObject.setLayerList(layerList.current); - } - } - - setEmbeddable(embeddableObject); + ]); } - - setupEmbeddable(); - // we want this effect to execute exactly once after the component mounts - }, []); - - // We can only render after embeddable has already initialized - useEffect(() => { - if (embeddableRoot?.current && embeddable) { - embeddable.render(embeddableRoot.current); - } - }, [embeddable, embeddableRoot, seriesConfig.mapData]); - - if (!embeddablePlugin) { - // eslint-disable-next-line no-console - console.error('Embeddable start plugin not found'); - return null; - } - if (!mapsPlugin) { - // eslint-disable-next-line no-console - console.error('Maps start plugin not found'); - return null; - } + }, [seriesConfig]); return ( -
-
+
+
); } diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.js b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.js index 8a369dd978c68..9921b5f991844 100644 --- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.js +++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.js @@ -22,7 +22,7 @@ import { } from '../../util/chart_utils'; import { ExplorerChartDistribution } from './explorer_chart_distribution'; import { ExplorerChartSingleMetric } from './explorer_chart_single_metric'; -import { EmbeddedMapComponent } from './explorer_chart_embedded_map'; +import { EmbeddedMapComponentWrapper } from './explorer_chart_embedded_map'; import { ExplorerChartLabel } from './components/explorer_chart_label'; import { CHART_TYPE } from '../explorer_constants'; @@ -159,10 +159,8 @@ function ExplorerChartContainer({ return ( {(tooltipService) => ( - )}