Skip to content

Commit

Permalink
use shared MlEmbeddedMapComponent in explorer
Browse files Browse the repository at this point in the history
  • Loading branch information
@alvarezmelissa87
alvarezmelissa87 committed Jan 27, 2021
1 parent 1912759 commit c7b782b
Show file tree
Hide file tree
Showing 3 changed files with 14 additions and 145 deletions.
11 changes: 2 additions & 9 deletions x-pack/plugins/ml/public/application/components/ml_embedded_map/ml_embedded_map.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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
},
};
Expand Down
142 changes: 10 additions & 132 deletions ...ck/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_embedded_map.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<any>;
severity: number;
}

export function EmbeddedMapComponent({ seriesConfig, severity }: Props) {
const [embeddable, setEmbeddable] = useState<MapEmbeddable | ErrorEmbeddable | undefined>();
const id = useMemo(() => htmlIdGenerator()(), []);
export function EmbeddedMapComponentWrapper({ seriesConfig }: Props) {
const [layerList, setLayerList] = useState<LayerDescriptor[]>([]);

const embeddableRoot: React.RefObject<HTMLDivElement> = useRef<HTMLDivElement>(null);
const layerList = useRef<LayerDescriptor[]>([]);
const {
services: { embeddable: embeddablePlugin, maps: mapsPlugin },
} = useMlKibana();

const factory:
| EmbeddableFactory<MapEmbeddableInput, MapEmbeddableOutput, MapEmbeddable>
| 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 (
<div
style={{
width: '100%',
height: 300,
}}
>
<div
data-test-subj="xpack.ml.explorer.embeddedMapPanel"
ref={embeddableRoot}
style={{
width: '100%',
height: '100%',
display: 'flex',
flex: '1 1 100%',
zIndex: 1,
minHeight: 0, // Absolute must for Firefox to scroll contents
}}
/>
<div data-test-subj="xpack.ml.explorer.embeddedMap" style={{ width: '100%', height: 300 }}>
<MlEmbeddedMapComponent layerList={layerList} />
</div>
);
}
6 changes: 2 additions & 4 deletions x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -159,10 +159,8 @@ function ExplorerChartContainer({
return (
<MlTooltipComponent>
{(tooltipService) => (
<EmbeddedMapComponent
tooManyBuckets={tooManyBuckets}
<EmbeddedMapComponentWrapper
seriesConfig={series}
severity={severity}
tooltipService={tooltipService}
/>
)}
Expand Down

0 comments on commit c7b782b

Please sign in to comment.