From 72b0ea2ff484b40800503628a8ad478ef18be600 Mon Sep 17 00:00:00 2001 From: Alex Date: Thu, 18 Jan 2024 21:49:09 -0500 Subject: [PATCH] Removed the loadPlugin(s) functions as we're now loading plugins 3 ways, not just corePackages anymore. added support to load plugins in the app-bar similar to footer-tabs. core packages simplified, now only for swiper at the moment. Fix now that logTraceUseEffectMount is officially removed. Can now trace detailed what layer is holding the map ready state hostage. --- .../configs/loading-packages-config.json | 7 +- .../configs/package-bp1-lcc-config.json | 7 +- .../public/configs/package-bp2-wm-config.json | 7 +- ...age-footer-panel-geochart-map1-config.json | 4 +- ...age-footer-panel-geochart-map2-config.json | 4 +- .../configs/package-geochart-map1-config.json | 7 +- .../configs/package-geochart-map2-config.json | 7 +- .../public/configs/package-swiper-config.json | 5 ++ .../configs/package-time-slider-config.json | 2 +- .../configs/package-time-slider2-config.json | 2 +- .../public/configs/raw-data-table.json | 1 - .../public/configs/sample-config.json | 7 +- packages/geoview-core/schema.json | 60 +++++++++++++++ .../src/api/event-processors/index.ts | 6 +- .../geoview-core/src/api/plugin/plugin.ts | 75 +------------------ .../src/core/components/app-bar/app-bar.tsx | 31 +++++++- .../components/footer-tabs/footer-tabs.tsx | 8 +- .../src/core/components/map/map.tsx | 73 ++++++++++++------ .../src/core/stores/geoview-store.ts | 3 +- .../core/utils/config/config-validation.ts | 2 + .../geoview-core/src/core/utils/logger.ts | 3 - .../raster/abstract-geoview-raster.ts | 38 ++++++++++ .../geo/layer/other/cluster-placeholder.ts | 1 - .../src/geo/map/map-schema-types.ts | 15 +++- .../geoview-core/src/geo/map/map-viewer.ts | 4 +- packages/geoview-geochart/src/geochart.tsx | 4 +- 26 files changed, 259 insertions(+), 124 deletions(-) diff --git a/packages/geoview-core/public/configs/loading-packages-config.json b/packages/geoview-core/public/configs/loading-packages-config.json index c4e1c296bf9..d26c2d92972 100644 --- a/packages/geoview-core/public/configs/loading-packages-config.json +++ b/packages/geoview-core/public/configs/loading-packages-config.json @@ -14,6 +14,11 @@ }, "theme": "dark", "components": ["north-arrow", "overview-map"], - "corePackages": ["basemap-panel"], + "corePackages": [], + "appBarTabs": { + "tabs": { + "core": ["basemap-panel"] + } + }, "suportedLanguages": ["en"] } diff --git a/packages/geoview-core/public/configs/package-bp1-lcc-config.json b/packages/geoview-core/public/configs/package-bp1-lcc-config.json index b077e43af93..8ce3ae9b90a 100644 --- a/packages/geoview-core/public/configs/package-bp1-lcc-config.json +++ b/packages/geoview-core/public/configs/package-bp1-lcc-config.json @@ -12,7 +12,12 @@ "labeled": true } }, - "corePackages": ["basemap-panel"], + "corePackages": [], + "appBarTabs": { + "tabs": { + "core": ["basemap-panel"] + } + }, "components": ["overview-map", "north-arrow"], "theme": "dark", "suportedLanguages": ["en", "fr"] diff --git a/packages/geoview-core/public/configs/package-bp2-wm-config.json b/packages/geoview-core/public/configs/package-bp2-wm-config.json index e867466fbd4..d91234bc94a 100644 --- a/packages/geoview-core/public/configs/package-bp2-wm-config.json +++ b/packages/geoview-core/public/configs/package-bp2-wm-config.json @@ -12,7 +12,12 @@ "labeled": true } }, - "corePackages": ["basemap-panel"], + "corePackages": [], + "appBarTabs": { + "tabs": { + "core": ["basemap-panel"] + } + }, "components": ["north-arrow", "overview-map"], "theme": "dark", "suportedLanguages": ["en", "fr"] diff --git a/packages/geoview-core/public/configs/package-footer-panel-geochart-map1-config.json b/packages/geoview-core/public/configs/package-footer-panel-geochart-map1-config.json index 1810b38e63c..940c03d5d93 100644 --- a/packages/geoview-core/public/configs/package-footer-panel-geochart-map1-config.json +++ b/packages/geoview-core/public/configs/package-footer-panel-geochart-map1-config.json @@ -149,9 +149,7 @@ ] } }, - "corePackages": [ - "geochart" - ], + "corePackages": [], "suportedLanguages": [ "en", "fr" diff --git a/packages/geoview-core/public/configs/package-footer-panel-geochart-map2-config.json b/packages/geoview-core/public/configs/package-footer-panel-geochart-map2-config.json index 3103e76d2d3..f69329c8b14 100644 --- a/packages/geoview-core/public/configs/package-footer-panel-geochart-map2-config.json +++ b/packages/geoview-core/public/configs/package-footer-panel-geochart-map2-config.json @@ -145,9 +145,7 @@ "core": ["legend", "layers", "details", "geochart"] } }, - "corePackages": [ - "geochart" - ], + "corePackages": [], "suportedLanguages": [ "en", "fr" diff --git a/packages/geoview-core/public/configs/package-geochart-map1-config.json b/packages/geoview-core/public/configs/package-geochart-map1-config.json index 6fa8f690cdb..de5f4d40720 100644 --- a/packages/geoview-core/public/configs/package-geochart-map1-config.json +++ b/packages/geoview-core/public/configs/package-geochart-map1-config.json @@ -110,6 +110,11 @@ ] }, "theme": "dark", - "corePackages": ["geochart"], + "corePackages": [], + "footerTabs": { + "tabs": { + "core": ["geochart"] + } + }, "suportedLanguages": ["en", "fr"] } \ No newline at end of file diff --git a/packages/geoview-core/public/configs/package-geochart-map2-config.json b/packages/geoview-core/public/configs/package-geochart-map2-config.json index d66d428f956..86670f41218 100644 --- a/packages/geoview-core/public/configs/package-geochart-map2-config.json +++ b/packages/geoview-core/public/configs/package-geochart-map2-config.json @@ -110,6 +110,11 @@ ] }, "theme": "light", - "corePackages": ["geochart"], + "corePackages": [], + "footerTabs": { + "tabs": { + "core": ["geochart"] + } + }, "suportedLanguages": ["en", "fr"] } \ No newline at end of file diff --git a/packages/geoview-core/public/configs/package-swiper-config.json b/packages/geoview-core/public/configs/package-swiper-config.json index c76a1e665f9..58625b7221d 100644 --- a/packages/geoview-core/public/configs/package-swiper-config.json +++ b/packages/geoview-core/public/configs/package-swiper-config.json @@ -25,6 +25,11 @@ }, "theme": "light", "components": ["north-arrow", "overview-map"], + "appBarTabs": { + "tabs": { + "core": ["basemap-panel"] + } + }, "corePackages": ["swiper"], "externalPackages": [], "suportedLanguages": ["en"] diff --git a/packages/geoview-core/public/configs/package-time-slider-config.json b/packages/geoview-core/public/configs/package-time-slider-config.json index 7a776df36e9..7ebe846f8e4 100644 --- a/packages/geoview-core/public/configs/package-time-slider-config.json +++ b/packages/geoview-core/public/configs/package-time-slider-config.json @@ -64,7 +64,7 @@ "core": ["legend", "layers", "details", "data-table", "time-slider"] } }, - "corePackages": ["time-slider"], + "corePackages": [], "externalPackages": [], "suportedLanguages": ["en"] } diff --git a/packages/geoview-core/public/configs/package-time-slider2-config.json b/packages/geoview-core/public/configs/package-time-slider2-config.json index b802cb499c7..1aa7dd3e93e 100644 --- a/packages/geoview-core/public/configs/package-time-slider2-config.json +++ b/packages/geoview-core/public/configs/package-time-slider2-config.json @@ -64,7 +64,7 @@ "core": ["legend", "layers", "details", "time-slider"] } }, - "corePackages": ["time-slider"], + "corePackages": [], "externalPackages": [], "suportedLanguages": ["en"] } diff --git a/packages/geoview-core/public/configs/raw-data-table.json b/packages/geoview-core/public/configs/raw-data-table.json index b70d6ef654d..8e4c705fda4 100644 --- a/packages/geoview-core/public/configs/raw-data-table.json +++ b/packages/geoview-core/public/configs/raw-data-table.json @@ -133,7 +133,6 @@ "core": ["legend", "layers", "details", "data-table"] } }, - "corePackages": [], "externalPackages": [], "suportedLanguages": [ "fr", diff --git a/packages/geoview-core/public/configs/sample-config.json b/packages/geoview-core/public/configs/sample-config.json index 3bfc4bee6ca..8756de28b29 100644 --- a/packages/geoview-core/public/configs/sample-config.json +++ b/packages/geoview-core/public/configs/sample-config.json @@ -117,7 +117,12 @@ }, "theme": "dark", "components": ["north-arrow", "overview-map"], - "corePackages": ["basemap-panel"], + "corePackages": [], + "appBarTabs": { + "tabs": { + "core": ["basemap-panel"] + } + }, "externalPackages": [], "serviceUrls": { "keys": "https://geocore.api.geo.ca" diff --git a/packages/geoview-core/schema.json b/packages/geoview-core/schema.json index 8ea302ab4dc..43754bf1441 100644 --- a/packages/geoview-core/schema.json +++ b/packages/geoview-core/schema.json @@ -1576,6 +1576,63 @@ "tabs" ] }, + "TypeAppBarTabsProps": { + "type": "object", + "additionalProperties": false, + "properties": { + "tabs": { + "type": "object", + "description": "Available tabs", + "properties": { + "core": { + "type": "array", + "items": { + "type": "string", + "enum": [ + "basemap-panel", + "layers", + "geochart" + ] + }, + "minItems": 1, + "default": [], + "uniqueItems": true, + "description": "Default core tabs of app-bar to use" + }, + "custom": { + "type": "array", + "items": { + "type": "object", + "properties": { + "id": { + "type": "string" + }, + "defaultTabs": { + "type": "string" + }, + "contentHTML": { + "type": "string" + } + } + }, + "minItems": 0, + "default": [], + "uniqueItems": true, + "description": "Custom tabs of app-bar to use" + } + }, + "additionalProperties": false + }, + "collapsed": { + "type": "boolean", + "default": false, + "description": "State of app-bar when map is loaded (expanded or collapsed)" + } + }, + "required": [ + "tabs" + ] + }, "TypeOverviewMapProps": { "type": "object", "additionalProperties": false, @@ -1696,6 +1753,9 @@ "footerTabs": { "$ref": "#/definitions/TypeFooterTabsProps" }, + "appBarTabs": { + "$ref": "#/definitions/TypeAppBarTabsProps" + }, "overviewMap": { "$ref": "#/definitions/TypeOverviewMapProps" }, diff --git a/packages/geoview-core/src/api/event-processors/index.ts b/packages/geoview-core/src/api/event-processors/index.ts index c66ee7101e5..2034644e339 100644 --- a/packages/geoview-core/src/api/event-processors/index.ts +++ b/packages/geoview-core/src/api/event-processors/index.ts @@ -19,7 +19,8 @@ export function initializeEventProcessors(store: GeoviewStoreType) { mapEventProcessor.onInitialize(store); // package stores, only create if needed - if (store.getState().mapConfig!.corePackages?.includes('time-slider')) timeSliderEventProcessor.onInitialize(store); + // TODO: Change this check for something more generic that checks in appBarTabs too + if (store.getState().mapConfig!.footerTabs?.tabs.core.includes('time-slider')) timeSliderEventProcessor.onInitialize(store); } export function destroyEventProcessors(store: GeoviewStoreType) { @@ -30,5 +31,6 @@ export function destroyEventProcessors(store: GeoviewStoreType) { mapEventProcessor.onDestroy(store); // package stores, only destroy if created - if (store.getState().mapConfig!.corePackages?.includes('time-slider')) timeSliderEventProcessor.onDestroy(store); + // TODO: Change this check for something more generic that checks in appBarTabs too + if (store.getState().mapConfig!.footerTabs?.tabs.core.includes('time-slider')) timeSliderEventProcessor.onDestroy(store); } diff --git a/packages/geoview-core/src/api/plugin/plugin.ts b/packages/geoview-core/src/api/plugin/plugin.ts index 31e99be06ca..690328ed481 100644 --- a/packages/geoview-core/src/api/plugin/plugin.ts +++ b/packages/geoview-core/src/api/plugin/plugin.ts @@ -12,9 +12,7 @@ import { whenThisThen, showError } from '@/core/utils/utilities'; import { api } from '@/app'; import { AbstractPlugin } from './abstract-plugin'; import { TypePluginStructure } from './plugin-types'; -import { toJsonObject, TypeJsonObject, TypeJsonValue } from '@/core/types/global-types'; -import { UIEventProcessor } from '../event-processors/event-processor-children/ui-event-processor'; -import { logger } from '@/core/utils/logger'; +import { TypeJsonObject, TypeJsonValue } from '@/core/types/global-types'; /** * Class to manage plugins @@ -208,16 +206,9 @@ export class Plugin { * @param {string} mapId the map id to remove the plugin from */ removePlugin = (pluginId: string, mapId: string): void => { - if (mapId) { - if (!api.maps?.[mapId]?.plugins?.[pluginId]) { - const plugin = api.maps[mapId].plugins[pluginId]; - - // call the removed function on the plugin - if (typeof plugin.removed === 'function') plugin.removed(); - } - - delete api.maps[mapId].plugins[pluginId]; - } + // Get the plugin and remove it + api.maps[mapId]?.plugins[pluginId]?.removed?.(); + delete api.maps[mapId].plugins[pluginId]; }; /** @@ -239,62 +230,4 @@ export class Plugin { } } }; - - /** - * A function that will load each plugin on a map then checks if there are a next plugin to load - * - * @param {string} mapIndex the map index to load the plugin at - * @param {string} pluginIndex the plugin index to load - */ - loadPlugin = (mapIndex: number, pluginIndex: number) => { - const mapId = Object.keys(api.maps)[mapIndex]; - - // check if the map at this index have core packages and if there is a package at the plugin index - const corePackages = UIEventProcessor.getCorePackageComponents(mapId); - if (corePackages[pluginIndex]) { - const pluginId = corePackages[pluginIndex]; - - // load the plugin from the script tag or create it - this.loadScript(pluginId).then((constructor) => { - // add the plugin by passing in the loaded constructor from the script tag - this.addPlugin( - pluginId, - mapId, - constructor, - toJsonObject({ - mapId, - }) - ); - - // check if there is a next plugin at the current map index - if (corePackages[pluginIndex + 1]) { - // load next plugin at the same map index - this.loadPlugin(mapIndex, pluginIndex + 1); - // if no more plugins at current map index then check if there is another map - } else if (Object.keys(api.maps)[mapIndex + 1]) { - // try to load first plugin at the next map - this.loadPlugin(mapIndex + 1, 0); - } - }); - // if previous map did not have any packages then try to load packages from next map - } else if (Object.keys(api.maps)[mapIndex + 1]) { - // load packages at next map if exists - this.loadPlugin(mapIndex + 1, 0); - // if no plugins loaded then call init callback function - } - }; - - /** - * Load plugins provided by map config - */ - loadPlugins = (): void => { - // Log - logger.logTraceCore('loadPlugins'); - - // check if a map exists - if (Object.keys(api.maps)[0]) { - // start loading core packages on first map and first package - this.loadPlugin(0, 0); - } - }; } diff --git a/packages/geoview-core/src/core/components/app-bar/app-bar.tsx b/packages/geoview-core/src/core/components/app-bar/app-bar.tsx index 2992fd91890..2fa563dec61 100644 --- a/packages/geoview-core/src/core/components/app-bar/app-bar.tsx +++ b/packages/geoview-core/src/core/components/app-bar/app-bar.tsx @@ -3,7 +3,7 @@ import { useState, useRef, useEffect, useCallback, Fragment } from 'react'; import { useTheme } from '@mui/material/styles'; import { Box, List, ListItem, Panel, IconButton } from '@/ui'; -import { api, useGeoViewMapId } from '@/app'; +import { AbstractPlugin, TypeJsonObject, TypeJsonValue, api, toJsonObject, useGeoViewMapId } from '@/app'; import { EVENT_NAMES } from '@/api/events/event-types'; import { payloadIsAButtonPanel, ButtonPanelPayload, PayloadBaseClass } from '@/api/events/payloads'; @@ -16,6 +16,7 @@ import Version from './buttons/version'; import { getSxClasses } from './app-bar-style'; import { useUIActiveFocusItem, useUIAppbarComponents } from '@/core/stores/store-interface-and-intial-values/ui-state'; import { useMapInteraction } from '@/core/stores/store-interface-and-intial-values/map-state'; +import { useGeoViewConfig } from '@/core/stores/geoview-store'; import { logger } from '@/core/utils/logger'; /** @@ -39,6 +40,9 @@ export function Appbar(): JSX.Element { const appBarPanelCloseListenerFunction = () => setSelectedAppbarButtonId(''); + // get store config for app bar tabs to add (similar logic as in footer-tabs) + const appBarTabsConfig = useGeoViewConfig()?.appBarTabs; + // #region REACT HOOKS const addButtonPanel = useCallback( (payload: ButtonPanelPayload) => { @@ -97,6 +101,31 @@ export function Appbar(): JSX.Element { }, [addButtonPanel, mapId, removeButtonPanel, selectedAppBarButtonId]); // #endregion + /** + * Create default tabs from configuration parameters (similar logic as in footer-tabs). + */ + useEffect(() => { + // Log + logger.logTraceUseEffect('app-bar.appBarTabsConfig'); + + // Packages tab + if (appBarTabsConfig && appBarTabsConfig.tabs.core.includes('basemap-panel')) { + // create a new tab by loading the plugin + api.plugin + .loadScript('basemap-panel') + .then((constructor: AbstractPlugin | ((pluginId: string, props: TypeJsonObject) => TypeJsonValue)) => { + api.plugin.addPlugin( + 'basemap-panel', + mapId, + constructor, + toJsonObject({ + mapId, + }) + ); + }); + } + }, [appBarTabsConfig, mapId]); + return ( diff --git a/packages/geoview-core/src/core/components/footer-tabs/footer-tabs.tsx b/packages/geoview-core/src/core/components/footer-tabs/footer-tabs.tsx index 3ede1791f42..a3a12eea168 100644 --- a/packages/geoview-core/src/core/components/footer-tabs/footer-tabs.tsx +++ b/packages/geoview-core/src/core/components/footer-tabs/footer-tabs.tsx @@ -65,7 +65,7 @@ export function FooterTabs(): JSX.Element | null { const footerPanelResizeValues = useUIFooterPanelResizeValues(); const { setFooterPanelResizeValue } = useUIStoreActions(); - // get store config for footer tabs to add + // get store config for footer tabs to add (similar logic as in app-bar) const footerTabsConfig = useGeoViewConfig()?.footerTabs; /** @@ -265,7 +265,7 @@ export function FooterTabs(): JSX.Element | null { }, [isCollapsed, isMapFullScreen]); /** - * Create default tabs from configuration parameters + * Create default tabs from configuration parameters (similar logic as in app-bar). */ useEffect(() => { // Log @@ -351,9 +351,7 @@ export function FooterTabs(): JSX.Element | null { ); }); } - - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + }, [footerTabsConfig, mapId]); // Handle focus using dynamic focus button const handleDynamicFocus = () => { diff --git a/packages/geoview-core/src/core/components/map/map.tsx b/packages/geoview-core/src/core/components/map/map.tsx index 39d9c906706..f3b8133795e 100644 --- a/packages/geoview-core/src/core/components/map/map.tsx +++ b/packages/geoview-core/src/core/components/map/map.tsx @@ -1,5 +1,4 @@ -/* eslint-disable react/jsx-props-no-spreading */ -import { useEffect, useRef, MutableRefObject } from 'react'; +import { useEffect, useRef, useCallback, MutableRefObject } from 'react'; import OLMap from 'ol/Map'; import View from 'ol/View'; @@ -25,7 +24,8 @@ import { useMapStoreActions, } from '@/core/stores/store-interface-and-intial-values/map-state'; import { useGeoViewConfig, useGeoViewMapId } from '@/core/stores/geoview-store'; -import { api } from '@/app'; +import { api, toJsonObject } from '@/app'; +import { logger } from '@/core/utils/logger'; export function Map(): JSX.Element { const defaultTheme = useTheme(); @@ -47,23 +47,41 @@ export function Map(): JSX.Element { // TODO: use store const viewer: MapViewer = api.maps[mapId]; - const initCGPVMap = (cgpvMap: OLMap) => { - cgpvMap.set('mapId', mapId); - - // initialize the map viewer and load plugins - viewer.initMap(cgpvMap); + const initCGPVMap = useCallback( + (cgpvMap: OLMap) => { + // Log + logger.logTraceUseCallback('map.initCGPVMap'); + + cgpvMap.set('mapId', mapId); + + // initialize the map viewer and load plugins + viewer.initMap(cgpvMap); + + // load basemap from selected options + createBaseMapFromOptions(); + + // Load the core packages which are the ones who load on map (not footer plugin, not app-bar plugin) + mapStoreConfig?.corePackages?.forEach((corePackage: string) => { + api.plugin.loadScript(corePackage).then((constructor) => { + // add the plugin by passing in the loaded constructor from the script tag + api.plugin.addPlugin( + corePackage, + mapId, + constructor, + toJsonObject({ + mapId, + }) + ); + }); + }); + }, + [createBaseMapFromOptions, mapId, mapStoreConfig?.corePackages, viewer] + ); - // load basemap from selected options - createBaseMapFromOptions(); + const initMap = useCallback((): void => { + // Log + logger.logTraceUseCallback('map.initMap'); - // call the ready function since rendering of this map instance is done - api.ready(() => { - // load plugins once all maps have rendered - api.plugin.loadPlugins(); - }); - }; - - const initMap = (): void => { // create map projection object from code const projection = api.projection.projections[projectionCode]; @@ -90,12 +108,25 @@ export function Map(): JSX.Element { }); initCGPVMap(initialMap); - }; + }, [ + createEmptyBasemap, + initCGPVMap, + mapId, + mapStoreConfig?.map.viewSettings.center, + mapStoreConfig?.map.viewSettings.extent, + mapStoreConfig?.map.viewSettings.maxZoom, + mapStoreConfig?.map.viewSettings.minZoom, + mapStoreConfig?.map.viewSettings.zoom, + projectionCode, + ]); useEffect(() => { + // Log + logger.logTraceUseEffect('map.initMap'); + + // Init the map on first render initMap(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + }, [initMap]); return ( /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */ diff --git a/packages/geoview-core/src/core/stores/geoview-store.ts b/packages/geoview-core/src/core/stores/geoview-store.ts index 124575b4557..9a476f1d156 100644 --- a/packages/geoview-core/src/core/stores/geoview-store.ts +++ b/packages/geoview-core/src/core/stores/geoview-store.ts @@ -54,7 +54,8 @@ export const geoviewStoreDefinition = (set: TypeSetStore, get: TypeGetStore) => get().uiState.setDefaultConfigValues(config); // packages states, only create if needed - if (config.corePackages?.includes('time-slider')) set({ timeSliderState: initializeTimeSliderState(set, get) }); + // TODO: Change this check for something more generic that checks in appBarTabs too + if (config.footerTabs?.tabs.core.includes('time-slider')) set({ timeSliderState: initializeTimeSliderState(set, get) }); }, // core states diff --git a/packages/geoview-core/src/core/utils/config/config-validation.ts b/packages/geoview-core/src/core/utils/config/config-validation.ts index 6ad5d4e9871..1c7d28e1682 100644 --- a/packages/geoview-core/src/core/utils/config/config-validation.ts +++ b/packages/geoview-core/src/core/utils/config/config-validation.ts @@ -750,6 +750,8 @@ export class ConfigValidation { displayLanguage: this._displayLanguage, appBar: tempMapFeaturesConfig.appBar, navBar: tempMapFeaturesConfig.navBar, + // TODO: FEATURE #1713 Refactor - to have appBar and footer only instead of appBar, appBarTabs, footerTabs as it is now + appBarTabs: tempMapFeaturesConfig.appBarTabs, footerTabs: tempMapFeaturesConfig.footerTabs, overviewMap: tempMapFeaturesConfig.overviewMap, externalPackages: tempMapFeaturesConfig.externalPackages, diff --git a/packages/geoview-core/src/core/utils/logger.ts b/packages/geoview-core/src/core/utils/logger.ts index 100822af140..69ddd01f8e0 100644 --- a/packages/geoview-core/src/core/utils/logger.ts +++ b/packages/geoview-core/src/core/utils/logger.ts @@ -161,9 +161,6 @@ export class ConsoleLogger { this.logLevel(LOG_TRACE_USE_EFFECT, 'U_EFF', 'mediumorchid', useEffectFunction, ...message); }; - // TODO: Obsolete. Remove once geochart has been redeployed.. temporary backwards compatibility support. - logTraceUseEffectMount = this.logTraceUseEffect; - /** * Logs trace information for core processing. * Only shows if LOG_ACTIVE is true. diff --git a/packages/geoview-core/src/geo/layer/geoview-layers/raster/abstract-geoview-raster.ts b/packages/geoview-core/src/geo/layer/geoview-layers/raster/abstract-geoview-raster.ts index d04e88f3265..73a1cf69f71 100644 --- a/packages/geoview-core/src/geo/layer/geoview-layers/raster/abstract-geoview-raster.ts +++ b/packages/geoview-core/src/geo/layer/geoview-layers/raster/abstract-geoview-raster.ts @@ -5,6 +5,7 @@ import LayerGroup from 'ol/layer/Group'; import { AbstractGeoViewLayer } from '@/geo/layer/geoview-layers/abstract-geoview-layers'; import { TypeLayerEntryConfig } from '@/geo/map/map-schema-types'; import { api } from '@/app'; +import { logger } from '@/core/utils/logger'; /** ***************************************************************************************************************************** * AbstractGeoViewRaster types @@ -50,7 +51,44 @@ export abstract class AbstractGeoViewRaster extends AbstractGeoViewLayer { layerConfig.olLayer!.get('source').un(`${layerType}loadend`, loadEndHandler); }; + // TODO: BUG: Careful, sometimes 'source' is undefined (esri-dynamic layer case - notably in use-cases template); + // TO.DOCONT: see NON-FIXING :( 'addLoadendListener_TEMPORARY' below for an alternate function layerConfig.olLayer!.get('source').once(`${layerType}loadend`, loadEndHandler); layerConfig.olLayer!.get('source').once(`${layerType}loaderror`, loadErrorHandler); } + + // TODO: Refactor - Either use or delete this temporary function replacing addLoadendListener + // TO.DOCONT: to better handle the error when no source is defined or when + // TO.DOCONT: something crashes, so that 'error' layer status is at least set. + // TO.DOCONT: That said, the issue leading to this alternative method still isn't fixed, + // TO.DOCONT: so I'm just leaving the method here for further debugging if necessary + addLoadendListener_TEMPORARY(layerPath: string, layerType: 'tile' | 'image'): void { + try { + // Get the layer config and DO NOT use async here, because THIS is the code + // that actually sets the 'loaded' status that getLayerConfigAsync is waiting for! + const layerConfig = this.getLayerConfig(layerPath); + let loadErrorHandler: () => void; + const loadEndHandler = () => { + this.setLayerStatus('loaded', layerPath); + layerConfig!.olLayer!.get('source').un(`${layerType}loaderror`, loadErrorHandler); + }; + loadErrorHandler = () => { + this.setLayerStatus('error', layerPath); + layerConfig!.olLayer!.get('source').un(`${layerType}loadend`, loadEndHandler); + }; + + // If found + if (layerConfig) { + // Wire the handlers for loadend and loaderror + layerConfig.olLayer!.get('source').once(`${layerType}loadend`, loadEndHandler); + layerConfig.olLayer!.get('source').once(`${layerType}loaderror`, loadErrorHandler); + } else throw new Error(`Couldn't find layer config for layer path ${layerPath}`); + } catch (error) { + // Error wire handlers, so better set error right away + this.setLayerStatus('error', layerPath); + + // Log + logger.logError('addLoadendListener\n', error); + } + } } diff --git a/packages/geoview-core/src/geo/layer/other/cluster-placeholder.ts b/packages/geoview-core/src/geo/layer/other/cluster-placeholder.ts index 5d98d667d42..75f73b2aaea 100644 --- a/packages/geoview-core/src/geo/layer/other/cluster-placeholder.ts +++ b/packages/geoview-core/src/geo/layer/other/cluster-placeholder.ts @@ -106,7 +106,6 @@ // }, // "theme": "dark", // "components": [], -// "corePackages": ["layers-panel"], // "suportedLanguages": ["en"] // } diff --git a/packages/geoview-core/src/geo/map/map-schema-types.ts b/packages/geoview-core/src/geo/map/map-schema-types.ts index abca7129b5c..ad8ac22f303 100644 --- a/packages/geoview-core/src/geo/map/map-schema-types.ts +++ b/packages/geoview-core/src/geo/map/map-schema-types.ts @@ -1217,6 +1217,8 @@ export type TypeMapFeaturesInstance = { appBar?: TypeAppBarProps; /** Nav bar properies. */ navBar?: TypeNavBarProps; + /** App bar properies. */ + appBarTabs?: TypeAppBarTabsProps; /** Footer bar properies. */ footerTabs?: TypeFooterTabsProps; /** Overview map properies. */ @@ -1379,6 +1381,17 @@ export type TypeAppBarProps = Array<'geolocator' | 'export'>; */ export type TypeNavBarProps = Array<'zoom' | 'fullscreen' | 'home' | 'location' | 'export'>; +/** ****************************************************************************************************************************** + * Configuration available for the footer tabs component. + */ +export type TypeAppBarTabsProps = { + tabs: { + core: Array<'basemap-panel' | 'layers-panel' | 'geochart'>; + custom: Array; // TODO: support custom tab by creating a Typeobject for it + }; + collapsed: boolean; +}; + /** ****************************************************************************************************************************** * Configuration available for the footer tabs component. */ @@ -1405,7 +1418,7 @@ export type TypeMapComponents = Array<'north-arrow' | 'overview-map'>; * the same loaction as core config (<>-<>.json). * Default = []. */ -export type TypeMapCorePackages = Array<'basemap-panel' | 'geochart' | 'time-slider' | 'swiper'>; +export type TypeMapCorePackages = Array<'swiper'>; /** ****************************************************************************************************************************** * List of external packages to initialize on viewer load. Default = []. diff --git a/packages/geoview-core/src/geo/map/map-viewer.ts b/packages/geoview-core/src/geo/map/map-viewer.ts index 70a2f760dfc..7b99451b86d 100644 --- a/packages/geoview-core/src/geo/map/map-viewer.ts +++ b/packages/geoview-core/src/geo/map/map-viewer.ts @@ -203,7 +203,9 @@ export class MapViewer { let allGeoviewLayerReady = this.mapFeaturesConfig.map.listOfGeoviewLayerConfig?.length === 0 || Object.keys(geoviewLayers).length !== 0; Object.keys(geoviewLayers).forEach((geoviewLayerId) => { - allGeoviewLayerReady &&= geoviewLayers[geoviewLayerId].allLayerEntryConfigProcessed(); + const layerIsReady = geoviewLayers[geoviewLayerId].allLayerEntryConfigProcessed(); + logger.logTraceDetailed('map-viewer.mapReady? layer ready?', geoviewLayerId, layerIsReady); + allGeoviewLayerReady &&= layerIsReady; }); if (allGeoviewLayerReady) { // Log diff --git a/packages/geoview-geochart/src/geochart.tsx b/packages/geoview-geochart/src/geochart.tsx index e75ed72e72c..e96ae62f7e5 100644 --- a/packages/geoview-geochart/src/geochart.tsx +++ b/packages/geoview-geochart/src/geochart.tsx @@ -192,7 +192,7 @@ export function GeoChart(props: GeoChartProps): JSX.Element { useEffect(() => { // Log const USE_EFFECT_FUNC = 'GEOVIEW-GEOCHART - storeLayerDataArray'; - logger.logTraceUseEffectMount(USE_EFFECT_FUNC, storeLayerDataArray); + logger.logTraceUseEffect(USE_EFFECT_FUNC, storeLayerDataArray); // Fetches the datasources associated with the layerDataArray coming from the store - reloading the Chart in the process fetchDatasources(storeLayerDataArray); @@ -207,7 +207,7 @@ export function GeoChart(props: GeoChartProps): JSX.Element { useEffect(() => { // Log const USE_EFFECT_FUNC = 'GEOVIEW-GEOCHART - init'; - logger.logTraceUseEffectMount(USE_EFFECT_FUNC, mapId); + logger.logTraceUseEffect(USE_EFFECT_FUNC, mapId); // Wire handlers on component mount cgpv.api.event.on(EVENT_CHART_CONFIG, handleChartConfig, mapId);