diff --git a/packages/geoview-core/src/api/event-processors/event-processor-children/map-event-processor.ts b/packages/geoview-core/src/api/event-processors/event-processor-children/map-event-processor.ts index 79f53d3942a..7b4bbe8756e 100644 --- a/packages/geoview-core/src/api/event-processors/event-processor-children/map-event-processor.ts +++ b/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) => { diff --git a/packages/geoview-core/src/api/event-processors/event-processor-children/time-slider-event-processor.ts b/packages/geoview-core/src/api/event-processors/event-processor-children/time-slider-event-processor.ts index b45ed27c077..90f7634e349 100644 --- a/packages/geoview-core/src/api/event-processors/event-processor-children/time-slider-event-processor.ts +++ b/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 // ********************************************************** diff --git a/packages/geoview-core/src/core/stores/store-interface-and-intial-values/time-slider-state.ts b/packages/geoview-core/src/core/stores/store-interface-and-intial-values/time-slider-state.ts index b420d3e5ffa..2358d6dbfe7 100644 --- a/packages/geoview-core/src/core/stores/store-interface-and-intial-values/time-slider-state.ts +++ b/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); diff --git a/packages/geoview-core/src/geo/map/map-viewer.ts b/packages/geoview-core/src/geo/map/map-viewer.ts index db5c672046f..9f6bfc0d97b 100644 --- a/packages/geoview-core/src/geo/map/map-viewer.ts +++ b/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; } diff --git a/packages/geoview-time-slider/src/time-slider-panel.tsx b/packages/geoview-time-slider/src/time-slider-panel.tsx index 7339f97a24a..fe3536618be 100644 --- a/packages/geoview-time-slider/src/time-slider-panel.tsx +++ b/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(); + 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 => {