[8.x] [maps embeddable] fix map layers disappear from map panel when using session storage to continue editing a dashboard (#193629) (#193797)

# Backport This will backport the following commits from `main` to `8.x`: - [[maps embeddable] fix map layers disappear from map panel when using session storage to continue editing a dashboard (#193629)](https://github.com/elastic/kibana/pull/193629)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Nathan Reese <reese.nathan@elastic.co>
2025-04-23 09:19:04 -04:00 · 2024-09-24 08:24:03 +10:00 · 2024-09-24 08:24:03 +10:00 · 58480def90
commit 58480def90
parent b9c29e9bfa
10 changed files with 79 additions and 45 deletions
--- a/x-pack/plugins/maps/public/api/start_api.ts
+++ b/x-pack/plugins/maps/public/api/start_api.ts
@ -9,7 +9,7 @@ import type { LayerDescriptor } from '../../common/descriptor_types';
 import type { CreateLayerDescriptorParams } from '../classes/sources/es_search_source';
 import type { SampleValuesConfig, EMSTermJoinConfig } from '../ems_autosuggest';
 import type { Props as PassiveMapProps } from '../lens/passive_map';
-import type { Props as MapProps } from '../react_embeddable/map_renderer';
+import type { Props as MapProps } from '../react_embeddable/map_renderer/map_renderer';

 export interface MapsStartApi {
  createLayerDescriptors: {
--- a/x-pack/plugins/maps/public/legacy_visualizations/region_map/region_map_visualization.tsx
+++ b/x-pack/plugins/maps/public/legacy_visualizations/region_map/region_map_visualization.tsx
@ -11,7 +11,7 @@ import { first } from 'rxjs';
 import type { Filter } from '@kbn/es-query';
 import type { Query, TimeRange } from '@kbn/es-query';
 import { RegionMapVisConfig } from './types';
-import { MapRenderer } from '../../react_embeddable/map_renderer';
+import { MapRenderer } from '../../react_embeddable/map_renderer/map_renderer';
 import { createRegionMapLayerDescriptor } from '../../classes/layers/create_region_map_layer_descriptor';

 interface Props {
--- a/x-pack/plugins/maps/public/legacy_visualizations/tile_map/tile_map_visualization.tsx
+++ b/x-pack/plugins/maps/public/legacy_visualizations/tile_map/tile_map_visualization.tsx
@ -11,7 +11,7 @@ import { first } from 'rxjs';
 import type { Filter } from '@kbn/es-query';
 import type { Query, TimeRange } from '@kbn/es-query';
 import type { TileMapVisConfig } from './types';
-import { MapRenderer } from '../../react_embeddable/map_renderer';
+import { MapRenderer } from '../../react_embeddable/map_renderer/map_renderer';
 import { createTileMapLayerDescriptor } from '../../classes/layers/create_tile_map_layer_descriptor';

 interface Props {
--- a/x-pack/plugins/maps/public/lens/passive_map.tsx
+++ b/x-pack/plugins/maps/public/lens/passive_map.tsx
@ -53,6 +53,7 @@ export function PassiveMap(props: Props) {
      <ReactEmbeddableRenderer<MapSerializedState, MapRuntimeState, MapApi>
        type={MAP_SAVED_OBJECT_TYPE}
        getParentApi={() => ({
+          hideFilterActions: true,
          getSerializedStateForChild: () => {
            const basemapLayerDescriptor = createBasemapLayerDescriptor();
            const intialLayers = basemapLayerDescriptor ? [basemapLayerDescriptor] : [];
@ -66,7 +67,6 @@ export function PassiveMap(props: Props) {
                hidePanelTitles: true,
                viewMode: ViewMode.VIEW,
                isLayerTOCOpen: false,
-                hideFilterActions: true,
                mapSettings: {
                  disableInteractive: false,
                  hideToolbarOverlay: false,
--- a/x-pack/plugins/maps/public/plugin.ts
+++ b/x-pack/plugins/maps/public/plugin.ts
@ -88,7 +88,7 @@ import { VectorTileInspectorView } from './inspector/vector_tile_adapter/vector_
 import { PassiveMapLazy, setupLensChoroplethChart } from './lens';
 import { CONTENT_ID, LATEST_VERSION } from '../common/content_management';
 import { setupMapEmbeddable } from './react_embeddable/setup_map_embeddable';
-import { MapRendererLazy } from './react_embeddable/map_renderer_lazy';
+import { MapRendererLazy } from './react_embeddable/map_renderer/map_renderer_lazy';

 export interface MapsPluginSetupDependencies {
  cloud?: CloudSetup;
--- a/x-pack/plugins/maps/public/react_embeddable/map_react_embeddable.tsx
+++ b/x-pack/plugins/maps/public/react_embeddable/map_react_embeddable.tsx
@ -40,6 +40,9 @@ import { initializeDataViews } from './initialize_data_views';
 import { initializeFetch } from './initialize_fetch';
 import { initializeEditApi } from './initialize_edit_api';
 import { extractReferences } from '../../common/migrations/references';
+import { MapAttributes } from '../../common/content_management';
+import { MapSettings } from '../../common/descriptor_types';
+import { isMapRendererApi } from './map_renderer/types';

 export function getControlledBy(id: string) {
  return `mapEmbeddablePanel${id}`;
@ -65,6 +68,10 @@ export const mapEmbeddableFactory: ReactEmbeddableFactory<
    });
    await savedMap.whenReady();

+    const attributes$ = new BehaviorSubject<MapAttributes | undefined>(state.attributes);
+    const mapSettings$ = new BehaviorSubject<Partial<MapSettings> | undefined>(state.mapSettings);
+    const savedObjectId$ = new BehaviorSubject<string | undefined>(state.savedObjectId);
+
    // eslint bug, eslint thinks api is never reassigned even though it is
    // eslint-disable-next-line prefer-const
    let api: MapApi | undefined;
@ -171,14 +178,14 @@ export const mapEmbeddableFactory: ReactEmbeddableFactory<
        }),
        ...crossPanelActions.comparators,
        ...reduxSync.comparators,
+        attributes: [attributes$, (next: MapAttributes | undefined) => attributes$.next(next)],
+        mapSettings: [
+          mapSettings$,
+          (next: Partial<MapSettings> | undefined) => mapSettings$.next(next),
+        ],
+        savedObjectId: [savedObjectId$, (next: string | undefined) => savedObjectId$.next(next)],
        // readonly comparators
-        attributes: getUnchangingComparator(),
        mapBuffer: getUnchangingComparator(),
-        savedObjectId: getUnchangingComparator(),
-        mapSettings: getUnchangingComparator(),
-        hideFilterActions: getUnchangingComparator(),
-        isSharable: getUnchangingComparator(),
-        tooltipRenderer: getUnchangingComparator(),
      }
    );

@ -229,17 +236,28 @@ export const mapEmbeddableFactory: ReactEmbeddableFactory<
            <MapContainer
              onSingleValueTrigger={actionHandlers.onSingleValueTrigger}
              addFilters={
-                state.hideFilterActions || areTriggersDisabled(api)
+                (isMapRendererApi(parentApi) &&
+                  typeof parentApi.hideFilterActions === 'boolean' &&
+                  parentApi.hideFilterActions) ||
+                areTriggersDisabled(api)
                  ? null
                  : actionHandlers.addFilters
              }
              getFilterActions={actionHandlers.getFilterActions}
              getActionContext={actionHandlers.getActionContext}
-              renderTooltipContent={state.tooltipRenderer}
+              renderTooltipContent={
+                isMapRendererApi(parentApi) && parentApi.getTooltipRenderer
+                  ? parentApi.getTooltipRenderer()
+                  : undefined
+              }
              title={panelTitle ?? defaultPanelTitle}
              description={panelDescription ?? defaultPanelDescription}
              waitUntilTimeLayersLoad$={waitUntilTimeLayersLoad$(savedMap.getStore())}
-              isSharable={state.isSharable ?? true}
+              isSharable={
+                isMapRendererApi(parentApi) && typeof parentApi.isSharable === 'boolean'
+                  ? parentApi.isSharable
+                  : true
+              }
            />
          </Provider>
        );
--- a/x-pack/plugins/maps/public/react_embeddable/map_renderer/map_renderer.tsx
+++ b/x-pack/plugins/maps/public/react_embeddable/map_renderer/map_renderer.tsx
@ -9,11 +9,16 @@ import React, { useEffect, useRef } from 'react';
 import type { Filter, Query, TimeRange } from '@kbn/es-query';
 import { ReactEmbeddableRenderer } from '@kbn/embeddable-plugin/public';
 import { useSearchApi } from '@kbn/presentation-publishing';
-import type { LayerDescriptor, MapCenterAndZoom, MapSettings } from '../../common/descriptor_types';
-import { createBasemapLayerDescriptor } from '../classes/layers/create_basemap_layer_descriptor';
-import { MapApi, MapRuntimeState, MapSerializedState } from './types';
-import { MAP_SAVED_OBJECT_TYPE } from '../../common/constants';
-import { RenderToolTipContent } from '../classes/tooltips/tooltip_property';
+import type {
+  LayerDescriptor,
+  MapCenterAndZoom,
+  MapSettings,
+} from '../../../common/descriptor_types';
+import { createBasemapLayerDescriptor } from '../../classes/layers/create_basemap_layer_descriptor';
+import { MapApi, MapRuntimeState, MapSerializedState } from '../types';
+import { MAP_SAVED_OBJECT_TYPE } from '../../../common/constants';
+import { RenderToolTipContent } from '../../classes/tooltips/tooltip_property';
+import { MAP_RENDERER_TYPE } from './types';

 function getLayers(layerList: LayerDescriptor[]) {
  const basemapLayer = createBasemapLayerDescriptor();
@ -61,30 +66,27 @@ export function MapRenderer(props: Props) {
      <ReactEmbeddableRenderer<MapSerializedState, MapRuntimeState, MapApi>
        type={MAP_SAVED_OBJECT_TYPE}
        getParentApi={() => ({
-          ...searchApi,
+          type: MAP_RENDERER_TYPE,
+          getTooltipRenderer: props.getTooltipRenderer,
+          hideFilterActions: props.hideFilterActions,
+          isSharable: props.isSharable,
          getSerializedStateForChild: () => {
-            const rawState: MapSerializedState = {
-              attributes: {
-                title: props.title ?? '',
-                layerListJSON: JSON.stringify(getLayers(props.layerList)),
-              },
-              hidePanelTitles: !Boolean(props.title),
-              isLayerTOCOpen:
-                typeof props.isLayerTOCOpen === 'boolean' ? props.isLayerTOCOpen : false,
-              hideFilterActions:
-                typeof props.hideFilterActions === 'boolean' ? props.hideFilterActions : false,
-              mapCenter: props.mapCenter,
-              mapSettings: props.mapSettings ?? {},
-              isSharable: props.isSharable,
-            };
-            if (props.getTooltipRenderer) {
-              rawState.tooltipRenderer = props.getTooltipRenderer();
-            }
            return {
-              rawState,
+              rawState: {
+                attributes: {
+                  title: props.title ?? '',
+                  layerListJSON: JSON.stringify(getLayers(props.layerList)),
+                },
+                hidePanelTitles: !Boolean(props.title),
+                isLayerTOCOpen:
+                  typeof props.isLayerTOCOpen === 'boolean' ? props.isLayerTOCOpen : false,
+                mapCenter: props.mapCenter,
+                mapSettings: props.mapSettings ?? {},
+              },
              references: [],
            };
          },
+          ...searchApi,
        })}
        onApiAvailable={(api) => {
          mapApiRef.current = api;
--- a/x-pack/plugins/maps/public/react_embeddable/map_renderer/map_renderer_lazy.tsx
+++ b/x-pack/plugins/maps/public/react_embeddable/map_renderer/map_renderer_lazy.tsx
--- a/x-pack/plugins/maps/public/react_embeddable/map_renderer/types.ts
+++ b/x-pack/plugins/maps/public/react_embeddable/map_renderer/types.ts
@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { HasType, apiIsOfType } from '@kbn/presentation-publishing';
+import { RenderToolTipContent } from '../../classes/tooltips/tooltip_property';
+
+export const MAP_RENDERER_TYPE = 'mapRenderer';
+
+export type MapRendererApi = HasType<typeof MAP_RENDERER_TYPE> & {
+  getTooltipRenderer?: () => RenderToolTipContent;
+  hideFilterActions?: boolean;
+  isSharable?: boolean;
+};
+
+export function isMapRendererApi(api: unknown): api is MapRendererApi {
+  return Boolean(api && apiIsOfType(api, MAP_RENDERER_TYPE));
+}
--- a/x-pack/plugins/maps/public/react_embeddable/types.ts
+++ b/x-pack/plugins/maps/public/react_embeddable/types.ts
@ -31,7 +31,6 @@ import {
  MapSettings,
 } from '../../common/descriptor_types';
 import { ILayer } from '../classes/layers/layer';
-import { RenderToolTipContent } from '../classes/tooltips/tooltip_property';
 import { EventHandlers } from '../reducers/non_serializable_instances';

 export type MapSerializedState = SerializedTitles &
@ -47,15 +46,9 @@ export type MapSerializedState = SerializedTitles &
    mapBuffer?: MapExtent;
    mapSettings?: Partial<MapSettings>;
    hiddenLayers?: string[];
-    hideFilterActions?: boolean;
    timeRange?: TimeRange;
    filterByMapExtent?: boolean;
    isMovementSynchronized?: boolean;
-
-    // Configuration item that are never persisted
-    // Putting in state as a temporary work around
-    isSharable?: boolean;
-    tooltipRenderer?: RenderToolTipContent;
  };

 export type MapRuntimeState = MapSerializedState;