import React , { useEffect , useState , useRef } from 'react' ; import uuid from 'uuid' ; import styled from 'styled-components' ; import { MapEmbeddable , MapEmbeddableInput , } from '../../../../../../maps/public' ; import { MAP_SAVED_OBJECT_TYPE } from '../../../../../../maps/common' ; import { useKibana } from '../../../../../../../../src/plugins/kibana_react/public' ; import { ErrorEmbeddable , ViewMode , isErrorEmbeddable , } from '../../../../../../../../src/plugins/embeddable/public' ; import { useLayerList } from './use_layer_list' ; import { useLegacyUrlParams } from '../../../../context/url_params_context/use_url_params' ; import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context' ; import type { RenderTooltipContentParams } from '../../../../../../maps/public' ; import { MapToolTip } from './map_tooltip' ; import { useMapFilters } from './use_map_filters' ; import { EmbeddableStart } from '../../../../../../../../src/plugins/embeddable/public' ; const EmbeddedPanel = styled . div `
  z-index: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  .embPanel__content {
    display: flex;
    flex: 1 1 100%;
    z-index: 1;
    min-height: 0; // Absolute must for Firefox to scroll contents
  }
  &&& .mapboxgl-canvas {
    animation: none !important;
  }
` ; interface KibanaDeps { embeddable : EmbeddableStart ; } export function EmbeddedMapComponent ( ) { const { urlParams } = useLegacyUrlParams ( ) ; const apmPluginContext = useApmPluginContext ( ) ; const { start , end , serviceName } = urlParams ; const mapFilters = useMapFilters ( ) ; const layerList = useLayerList ( ) ; const [ embeddable , setEmbeddable ] = useState < MapEmbeddable | ErrorEmbeddable | undefined > ( ) ; const embeddableRoot = useRef < HTMLDivElement > ( null ) ; const { services : { embeddable : embeddablePlugin } , } = useKibana < KibanaDeps > ( ) ; if ( ! embeddablePlugin ) { throw new Error ( 'Embeddable start plugin not found' ) ; } const factory = embeddablePlugin . getEmbeddableFactory ( MAP_SAVED_OBJECT_TYPE ) ; const input = { attributes : { title : '' } , id : uuid . v4 ( ) , filters : mapFilters , viewMode : ViewMode . VIEW , isLayerTOCOpen : false , query : { query : 'transaction.type : "page-load"' , language : 'kuery' , } , ... ( start && { timeRange : { from : new Date ( start ! ) . toISOString ( ) , to : new Date ( end ! ) . toISOString ( ) , } , } ) , hideFilterActions : true , } ; function renderTooltipContent ( { addFilters , closeTooltip , features , isLocked , getLayerName , loadFeatureProperties , } ) { const props = { addFilters , closeTooltip , isLocked , getLayerName , loadFeatureProperties , } ; return < MapToolTip { ... props } features = { features } / > ; } useEffect ( ( ) => { if ( embeddable != null && serviceName ) { embeddable . updateInput ( { filters : mapFilters } ) ; embeddable . reload ( ) ; } } , [ mapFilters ] ) ; useEffect ( ( ) => { if ( embeddable != null && start != null && end != null ) { const timeRange = { from : new Date ( start ) . toISOString ( ) , to : new Date ( end ) . toISOString ( ) , } ; embeddable . updateInput ( { timeRange } ) ; embeddable . reload ( ) ; } } , [ start , end ] ) ; useEffect ( ( ) => { async function setupEmbeddable ( ) { if ( ! factory ) { throw new Error ( 'Map embeddable not found.' ) ; } const embeddableObject = await factory . create ( { ... input , title : 'Visitors by region' , } ) ; if ( embeddableObject && ! isErrorEmbeddable ( embeddableObject ) ) { embeddableObject . setRenderTooltipContent ( renderTooltipContent ) ; const basemapLayerDescriptor = apmPluginContext . plugins . maps ? await apmPluginContext . plugins . maps . createLayerDescriptors . createBasemapLayerDescriptor ( ) : null ; if ( basemapLayerDescriptor ) { layerList . unshift ( basemapLayerDescriptor ) ; } await embeddableObject . setLayerList ( layerList ) ; } setEmbeddable ( embeddableObject ) ; } setupEmbeddable ( ) ; } , [ ] ) ; useEffect ( ( ) => { if ( embeddableRoot . current && embeddable && serviceName ) { embeddable . render ( embeddableRoot . current ) ; } } , [ embeddable , embeddableRoot , serviceName ] ) ; return ( < EmbeddedPanel > < div data - test - subj = "xpack.apm.regionMap.embeddedPanel" className = "embPanel__content" ref = { embeddableRoot } / > < /EmbeddedPanel>); } EmbeddedMapComponent . displayName = 'EmbeddedMap' ; export const EmbeddedMap = React . memo ( EmbeddedMapComponent ) ;