import React , { useState , useEffect } from 'react' ; import { Dictionary } from '../../../../common/types/common' ; import { LayerDescriptor } from '../../../../../maps/common' ; import { getMLAnomaliesActualLayer , getMLAnomaliesTypicalLayer } from './map_config' ; import { MlEmbeddedMapComponent } from '../../components/ml_embedded_map' ; interface Props { seriesConfig : Dictionary < any > ; } export function EmbeddedMapComponentWrapper ( { seriesConfig } ) { const [ layerList , setLayerList ] = useState < LayerDescriptor [ ] > ( [ ] ) ; useEffect ( ( ) => { if ( seriesConfig . mapData && seriesConfig . mapData . length > 0 ) { setLayerList ( [ getMLAnomaliesActualLayer ( seriesConfig . mapData ) , getMLAnomaliesTypicalLayer ( seriesConfig . mapData ) , ] ) ; } } , [ seriesConfig ] ) ; return ( < div data - test - subj = "xpack.ml.explorer.embeddedMap" style = { { width : '100%' , height : 300 } } > < MlEmbeddedMapComponent layerList = { layerList } /> < /div>); }