fix(time-slider): fixes error when removing map (#2361)

Closes #2327

packages/geoview-core/src/api/event-processors/event-processor-children/map-event-processor.ts

@@ -84,7 +84,7 @@ export class MapEventProcessor extends AbstractEventProcessor {
       (state) => state.mapState.orderedLayerInfo,
       (cur) => {
         // Log
-        logger.logTraceCoreStoreSubscription('MAP EVENT PROCESSOR - orderedLaterInfo', mapId, cur);
+        logger.logTraceCoreStoreSubscription('MAP EVENT PROCESSOR - orderedLayerInfo', mapId, cur);
 
         const curVisibleLayers = cur
           .map((layerInfo) => {

packages/geoview-core/src/api/event-processors/event-processor-children/time-slider-event-processor.ts

@@ -154,6 +154,17 @@ export class TimeSliderEventProcessor extends AbstractEventProcessor {
       reversed: undefined,
     };
   }
+
+  /**
+   * Sets the selected layer path
+   * @param {string} mapId - The map id of the state to act on
+   * @param {string} layerPath - The layer path to use
+   */
+  static setSelectedLayerPath(mapId: string, layerPath: string): void {
+    // Redirect
+    this.getTimesliderState(mapId)?.setterActions.setSelectedLayerPath(layerPath);
+  }
+
   // #endregion
 
   // **********************************************************

packages/geoview-core/src/core/stores/store-interface-and-intial-values/time-slider-state.ts

@@ -11,6 +11,7 @@ type TimeSliderActions = ITimeSliderState['actions'];
 
 export interface ITimeSliderState {
   timeSliderLayers: TimeSliderLayerSet;
+  selectedLayerPath: string;
 
   actions: {
     setTitle: (layerPath: string, title: string) => void;
@@ -19,6 +20,7 @@ export interface ITimeSliderState {
     setFiltering: (layerPath: string, filter: boolean) => void;
     setLocked: (layerPath: string, locked: boolean) => void;
     setReversed: (layerPath: string, locked: boolean) => void;
+    setSelectedLayerPath: (layerPath: string) => void;
     setDefaultValue: (layerPath: string, defaultValue: string) => void;
     setValues: (layerPath: string, values: number[]) => void;
   };
@@ -32,6 +34,7 @@ export interface ITimeSliderState {
     setFiltering: (layerPath: string, filter: boolean) => void;
     setLocked: (layerPath: string, locked: boolean) => void;
     setReversed: (layerPath: string, locked: boolean) => void;
+    setSelectedLayerPath: (layerPath: string) => void;
     setDefaultValue: (layerPath: string, defaultValue: string) => void;
     setValues: (layerPath: string, values: number[]) => void;
   };
@@ -48,6 +51,7 @@ export interface ITimeSliderState {
 export function initializeTimeSliderState(set: TypeSetStore, get: TypeGetStore): ITimeSliderState {
   const init = {
     timeSliderLayers: {},
+    selectedLayerPath: '',
 
     // #region ACTIONS
 
@@ -77,6 +81,10 @@ export function initializeTimeSliderState(set: TypeSetStore, get: TypeGetStore):
         // Redirect to setter
         get().timeSliderState.setterActions.setReversed(layerPath, reversed);
       },
+      setSelectedLayerPath(layerPath: string): void {
+        // Redirect to setter
+        get().timeSliderState.setterActions.setSelectedLayerPath(layerPath);
+      },
       setDefaultValue(layerPath: string, defaultValue: string): void {
         // Redirect to setter
         get().timeSliderState.setterActions.setDefaultValue(layerPath, defaultValue);
@@ -167,6 +175,14 @@ export function initializeTimeSliderState(set: TypeSetStore, get: TypeGetStore):
           },
         });
       },
+      setSelectedLayerPath(layerPath: string): void {
+        set({
+          timeSliderState: {
+            ...get().timeSliderState,
+            selectedLayerPath: layerPath,
+          },
+        });
+      },
       setDefaultValue(layerPath: string, defaultValue: string): void {
         const sliderLayers = get().timeSliderState.timeSliderLayers;
         sliderLayers[layerPath].defaultValue = defaultValue;
@@ -220,5 +236,6 @@ export interface TypeTimeSliderValues {
 // Layer state selectors
 // **********************************************************
 export const useTimeSliderLayers = (): TimeSliderLayerSet => useStore(useGeoViewStore(), (state) => state.timeSliderState.timeSliderLayers);
+export const useTimeSliderSelectedLayerPath = (): string => useStore(useGeoViewStore(), (state) => state.timeSliderState.selectedLayerPath);
 
 export const useTimeSliderStoreActions = (): TimeSliderActions => useStore(useGeoViewStore(), (state) => state.timeSliderState.actions);

packages/geoview-core/src/geo/map/map-viewer.ts

@@ -1142,16 +1142,21 @@ export class MapViewer {
   /**
    * Remove map
    *
-   * @param {boolean} deleteContainer true if we want to delete div from the page
-   * @returns {HTMLElement} return the HTML element
+   * @param {boolean} deleteContainer - True if we want to delete div from the page
+   * @returns {HTMLElement} The HTML element
    */
   remove(deleteContainer: boolean): HTMLElement {
-    // get the map container to unmount
-    // remove geoview-class if we need to reuse the div
+    // Get the map container to unmount
+    // Remove geoview-class if we need to reuse the div
     const mapContainer = document.getElementById(this.mapId)!;
     mapContainer.classList.remove('geoview-map');
 
-    // unload all loaded plugins on the map
+    // If this is done after plugin removal, it triggers a rerender, and the plugins can cause an error, depending on state
+    // Remove the dom element (remove rendered map and overview map)
+    if (this.overviewRoot) this.overviewRoot.unmount();
+    unmountMap(this.mapId);
+
+    // Unload all loaded plugins on the map
     Plugin.removePlugins(this.mapId)
       .then(() => {
         // Remove all layers
@@ -1161,17 +1166,13 @@ export class MapViewer {
           // Failed to remove layers, eat the exception and continue to remove the map
         }
 
-        // remove the dom element (remove rendered map and overview map)
-        if (this.overviewRoot) this.overviewRoot?.unmount();
-        unmountMap(this.mapId);
-
-        // delete store and event processor
+        // Delete store and event processor
         removeGeoviewStore(this.mapId);
 
-        // if deleteContainer, delete the HTML div
+        // If deleteContainer, delete the HTML div
         if (deleteContainer) mapContainer.remove();
 
-        // delete the map instance from the maps array, will delete attached plugins
+        // Delete the map instance from the maps array, will delete attached plugins
         // TODO: need a time out here because if not, map is deleted before everything is done on the map
         // TO.DOCONT: This whole sequence need to be async
         setTimeout(() => delete api.maps[this.mapId], 1000);
@@ -1180,7 +1181,7 @@ export class MapViewer {
         logger.logError(`Couldn't remove map in map-viewer`, error);
       });
 
-    // return the map container to be remove
+    // Return the map container to be remove
     return mapContainer;
   }
 

packages/geoview-time-slider/src/time-slider-panel.tsx

@@ -3,6 +3,8 @@ import { LayerListEntry, Layout } from 'geoview-core/src/core/components/common'
 import {
   TypeTimeSliderValues,
   useTimeSliderLayers,
+  useTimeSliderSelectedLayerPath,
+  useTimeSliderStoreActions,
 } from 'geoview-core/src/core/stores/store-interface-and-intial-values/time-slider-state';
 import { useMapVisibleLayers } from 'geoview-core/src/core/stores/store-interface-and-intial-values/map-state';
 import { useLayerLegendLayers } from 'geoview-core/src/core/stores/store-interface-and-intial-values/layer-state';
@@ -29,27 +31,29 @@ export function TimeSliderPanel(props: TypeTimeSliderProps): JSX.Element {
   const { mapId, configObj } = props;
   const { cgpv } = window as TypeWindow;
   const { react } = cgpv;
-  const { useState, useCallback, useMemo, useEffect } = react;
-
-  // internal state
-  const [selectedLayerPath, setSelectedLayerPath] = useState<string>();
+  const { useCallback, useMemo, useEffect } = react;
 
   // get values from store
   const visibleLayers = useMapVisibleLayers() as string[];
   const timeSliderLayers = useTimeSliderLayers();
+  const selectedLayerPath = useTimeSliderSelectedLayerPath();
+  const { setSelectedLayerPath } = useTimeSliderStoreActions();
   const legendLayers = useLayerLegendLayers();
 
   /**
    * handle Layer list when clicked on each layer.
    * @param {LayerListEntry} layer layer clicked by the user.
    */
-  const handleClickLayerList = useCallback((layer: LayerListEntry) => {
-    // Log
-    logger.logTraceUseCallback('TIME-SLIDER-PANEL - handleLayerList');
+  const handleClickLayerList = useCallback(
+    (layer: LayerListEntry) => {
+      // Log
+      logger.logTraceUseCallback('TIME-SLIDER-PANEL - handleLayerList');
 
-    // Set the layer path
-    setSelectedLayerPath(layer.layerPath);
-  }, []);
+      // Set the layer path
+      setSelectedLayerPath(layer.layerPath);
+    },
+    [setSelectedLayerPath]
+  );
 
   /**
    * Get dates for current filters
@@ -115,7 +119,7 @@ export function TimeSliderPanel(props: TypeTimeSliderProps): JSX.Element {
       // Clear the selected layer path
       setSelectedLayerPath('');
     }
-  }, [memoLayersList, selectedLayerPath]);
+  }, [memoLayersList, selectedLayerPath, setSelectedLayerPath]);
 
   const handleGuideIsOpen = useCallback(
     (guideIsOpen: boolean): void => {