import React , { useEffect , useRef , useState } from 'react' ; import { htmlIdGenerator } from '@elastic/eui' ; import { INITIAL_LOCATION , LayerDescriptor , MAP_SAVED_OBJECT_TYPE , } from '../../../../../maps/common' ; import type { MapEmbeddable , MapEmbeddableInput , MapEmbeddableOutput , RenderTooltipContentParams , } from '../../../../../maps/public' ; import { EmbeddableFactory , ErrorEmbeddable , isErrorEmbeddable , ViewMode , } from '../../../../../../../src/plugins/embeddable/public' ; import { useMlKibana } from '../../contexts/kibana' ; export function MlEmbeddedMapComponent ( { layerList , mapEmbeddableInput , renderTooltipContent , } ) { const [ embeddable , setEmbeddable ] = useState < ErrorEmbeddable | MapEmbeddable | undefined > ( ) ; const embeddableRoot = useRef < HTMLDivElement > ( null ) ; const baseLayers = useRef < LayerDescriptor [ ] > ( ) ; const { services : { embeddable : embeddablePlugin , maps : mapsPlugin } , } = useMlKibana ( ) ; const factory = embeddablePlugin ? embeddablePlugin . getEmbeddableFactory ( MAP_SAVED_OBJECT_TYPE ) : undefined ; useEffect ( ( ) => { async function updateIndexPatternSearchLayer ( ) { if ( embeddable && ! isErrorEmbeddable ( embeddable ) && Array . isArray ( layerList ) && Array . isArray ( baseLayers . current ) ) { embeddable . setLayerList ( [ ... baseLayers . current , ... layerList ] ) ; } } updateIndexPatternSearchLayer ( ) ; } , [ embeddable , layerList ] ) ; useEffect ( ( ) => { async function setupEmbeddable ( ) { if ( ! factory ) { console . error ( 'Map embeddable not found.' ) ; return ; } const input = { id : htmlIdGenerator ( ) ( ) , attributes : { title : '' } , filters : [ ] , hidePanelTitles : true , viewMode : ViewMode . VIEW , isLayerTOCOpen : false , hideFilterActions : true , mapSettings : { disableInteractive : false , hideToolbarOverlay : false , hideLayerControl : false , hideViewControl : false , initialLocation : INITIAL_LOCATION . AUTO_FIT_TO_BOUNDS , autoFitToDataBounds : true , } , } ; const embeddableObject = await factory . create ( input ) ; if ( embeddableObject && ! isErrorEmbeddable ( embeddableObject ) ) { const basemapLayerDescriptor = mapsPlugin ? await mapsPlugin . createLayerDescriptors . createBasemapLayerDescriptor ( ) : null ; if ( basemapLayerDescriptor ) { baseLayers . current = [ basemapLayerDescriptor ] ; await embeddableObject . setLayerList ( baseLayers . current ) ; } } setEmbeddable ( embeddableObject ) ; } setupEmbeddable ( ) ; } , [ ] ) ; useEffect ( ( ) => { if ( embeddable && ! isErrorEmbeddable ( embeddable ) && mapEmbeddableInput !== undefined ) { embeddable . updateInput ( mapEmbeddableInput ) ; } } , [ embeddable , mapEmbeddableInput ] ) ; useEffect ( ( ) => { if ( embeddable && ! isErrorEmbeddable ( embeddable ) && renderTooltipContent !== undefined ) { embeddable . setRenderTooltipContent ( renderTooltipContent ) ; } } , [ embeddable , renderTooltipContent ] ) ; useEffect ( ( ) => { if ( embeddableRoot . current && embeddable ) { embeddable . render ( embeddableRoot . current ) ; } } , [ embeddable , embeddableRoot ] ) ; if ( ! embeddablePlugin ) { console . error ( 'Embeddable start plugin not found' ) ; return null ; } if ( ! mapsPlugin ) { console . error ( 'Maps start plugin not found' ) ; return null ; } return ( < div data - test - subj = "mlEmbeddedMapContent" className = "mlEmbeddedMapContent" ref = { embeddableRoot } / > ) ; }