Merge branch 'develop' of https://github.com/Canadian-Geospatial-Plat…

…form/geoview into 1280-footer-tabs-app-bar

docs/programming/logging.md

@@ -18,8 +18,14 @@ export const LOG_TRACE_USE_EFFECT_UNMOUNT = 2;
 export const LOG_TRACE_RENDER = 3;
 // For tracing useCallback. Disabled by default. Only shows if running in dev environment or GEOVIEW_LOG_ACTIVE key is set in local storage.
 export const LOG_TRACE_USE_CALLBACK = 4;
+// For tracing useMemo. Disabled by default. Only shows if running in dev environment or GEOVIEW_LOG_ACTIVE key is set in local storage.
+export const LOG_TRACE_USE_MEMO = 5;
 // For tracing useEffect mounting. Disabled by default. Only shows if running in dev environment or GEOVIEW_LOG_ACTIVE key is set in local storage.
-export const LOG_TRACE_USE_EFFECT = 5;
+export const LOG_TRACE_USE_EFFECT = 6;
+// For tracing store subscription events. Disabled by default. Only shows if running in dev environment or GEOVIEW_LOG_ACTIVE key is set in local storage.
+export const LOG_TRACE_CORE_STORE_SUBSCRIPTION = 8;
+// For tracing api events. Disabled by default. Only shows if running in dev environment or GEOVIEW_LOG_ACTIVE key is set in local storage.
+export const LOG_TRACE_CORE_API_EVENT = 9;
 // For tracing core functions. Disabled by default. Only shows if running in dev environment or GEOVIEW_LOG_ACTIVE key is set in local storage.
 export const LOG_TRACE_CORE = 10;
 // Default. For debugging and development. Enabled by default. Only shows if running in dev environment or GEOVIEW_LOG_ACTIVE key is set in local storage.
@@ -35,7 +41,7 @@ export const LOG_ERROR = 50;
 
 The `logger` is active when (1) running in dev environment or (2) the local storage `GEOVIEW_LOG_ACTIVE` key is set.
 
-The `logger` singleton is created using the logging level specified by the local storage `GEOVIEW_LOG_LEVEL` value. __To change your logging level, edit that local storage key__. When no value can be found, the local storage is set to LOG_DEBUG level.
+The `logger` singleton is created using the logging level specified by the local storage `GEOVIEW_LOG_LEVEL` value. When `GEOVIEW_LOG_LEVEL` is a number, all levels above the specified number are logged. When `GEOVIEW_LOG_LEVEL` is a comma separate value e.g.: "4, 6,10" then only those levels and all levels >= 20 are logged. __To change your logging level, edit that local storage key__. When no value can be found, the local storage is set to LOG_DEBUG level.
 
 The `LOG_TRACE` functions are used when the developer wants to view the call stack in the console. The calls to `logger.logTrace` are meant to remain in the code forever. By default they will just be ignored, because the logger logs level LOG_DEBUG and higher. There is a extra level of granularity for tracing (`LOG_TRACE_USE_EFFECT`, `LOG_TRACE_RENDER`, etc) , due to GeoView needs.
 

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

@@ -36,7 +36,12 @@ export class MapEventProcessor extends AbstractEventProcessor {
     const unsubMapLoaded = store.subscribe(
       (state) => state.mapState.mapLoaded,
       (cur, prev) => {
-        if (cur !== prev) api.event.emit(mapPayload(EVENT_NAMES.MAP.EVENT_MAP_LOADED, mapId, store.getState().mapState.mapElement!));
+        if (cur !== prev) {
+          // Log (too annoying, already have trace in EVENT_MAP_LOADED handler that works well)
+          // logger.logTraceCoreStoreSubscription('MAP EVENT PROCESSOR - mapLoaded (changed)', cur);
+
+          api.event.emit(mapPayload(EVENT_NAMES.MAP.EVENT_MAP_LOADED, mapId, store.getState().mapState.mapElement!));
+        }
       }
     );
 
@@ -45,6 +50,9 @@ export class MapEventProcessor extends AbstractEventProcessor {
       (state) => state.mapState.centerCoordinates,
       (cur, prev) => {
         if (cur !== prev) {
+          // Log (too annoying, already have trace in EVENT_MAP_MOVE_END handler that works well)
+          // logger.logTraceCoreStoreSubscription('MAP EVENT PROCESSOR - centerCoordinates (changed)', cur);
+
           api.event.emit(lngLatPayload(EVENT_NAMES.MAP.EVENT_MAP_MOVE_END, mapId, cur));
         }
       }
@@ -54,6 +62,9 @@ export class MapEventProcessor extends AbstractEventProcessor {
       (state) => state.mapState.pointerPosition,
       (cur, prev) => {
         if (cur! && cur !== prev) {
+          // Log (too annoying, already have trace in EVENT_MAP_POINTER_MOVE handler that works well)
+          // logger.logTraceCoreStoreSubscription('MAP EVENT PROCESSOR - pointerPosition (changed)', cur);
+
           api.event.emit(mapMouseEventPayload(EVENT_NAMES.MAP.EVENT_MAP_POINTER_MOVE, mapId, cur));
         }
       }
@@ -62,8 +73,10 @@ export class MapEventProcessor extends AbstractEventProcessor {
     const unsubMapProjection = store.subscribe(
       (state) => state.mapState.currentProjection,
       (cur, prev) => {
-        // because emit and on from api events can be trigger in loop, compare also the api value
-        if (cur !== prev && api.maps[mapId].getMapState().currentProjection !== cur!) {
+        if (cur! && cur !== prev) {
+          // Log (this event is raised, and we currently have no handles for it, by design)
+          logger.logTraceCoreStoreSubscription('MAP EVENT PROCESSOR - currentProjection (changed)', cur);
+
           api.event.emit(mapViewProjectionPayload(EVENT_NAMES.MAP.EVENT_MAP_VIEW_PROJECTION_CHANGE, mapId, cur!));
         }
       }
@@ -72,7 +85,10 @@ export class MapEventProcessor extends AbstractEventProcessor {
     const unsubMapSingleClick = store.subscribe(
       (state) => state.mapState.clickCoordinates,
       (cur, prev) => {
-        if (cur! && cur !== prev) {
+        if (cur && cur !== prev) {
+          // Log (too annoying, already have trace in EVENT_MAP_SINGLE_CLICK handler that works well)
+          // logger.logTraceCoreStoreSubscription('MAP EVENT PROCESSOR - currentProjection (changed)', cur);
+
           api.event.emit(mapMouseEventPayload(EVENT_NAMES.MAP.EVENT_MAP_SINGLE_CLICK, mapId, cur));
         }
       }
@@ -82,6 +98,9 @@ export class MapEventProcessor extends AbstractEventProcessor {
       (state) => state.mapState.zoom,
       (cur, prev) => {
         if (cur! && cur !== prev) {
+          // Log
+          logger.logTraceCoreStoreSubscription('MAP EVENT PROCESSOR - zoom (changed)', cur);
+
           api.event.emit(numberPayload(EVENT_NAMES.MAP.EVENT_MAP_ZOOM_END, mapId, cur));
         }
       }
@@ -93,6 +112,9 @@ export class MapEventProcessor extends AbstractEventProcessor {
     const unsubMapHighlightedFeatures = store.subscribe(
       (state) => state.mapState.highlightedFeatures,
       (curFeatures, prevFeatures) => {
+        // Log
+        logger.logTraceCoreStoreSubscription('MAP EVENT PROCESSOR - highlightedFeatures', curFeatures);
+
         if (curFeatures.length === 0) api.maps[mapId].layer.featureHighlight.removeHighlight('all');
         else {
           const curFeatureUids = curFeatures.map((feature) => (feature.geometry as TypeGeometry).ol_uid);
@@ -114,6 +136,9 @@ export class MapEventProcessor extends AbstractEventProcessor {
     const unsubMapSelectedFeatures = store.subscribe(
       (state) => state.mapState.selectedFeatures,
       (curFeatures, prevFeatures) => {
+        // Log
+        logger.logTraceCoreStoreSubscription('MAP EVENT PROCESSOR - selectedFeatures', curFeatures);
+
         // TODO: on reload, layer object is undefined, need to test for now and solve in #1580
         if (curFeatures.length === 0 && api.maps[mapId].layer !== undefined) api.maps[mapId].layer.featureHighlight.resetAnimation('all');
         else {
@@ -136,6 +161,9 @@ export class MapEventProcessor extends AbstractEventProcessor {
     const unsubLegendLayers = store.subscribe(
       (state) => state.layerState.legendLayers,
       (cur) => {
+        // Log
+        logger.logTraceCoreStoreSubscription('MAP EVENT PROCESSOR - legendLayers', cur);
+
         const orderedLayerPaths = MapEventProcessor.evaluateLayerPathsFromLegendsArray(cur);
         const prevLayerOrder = [...store.getState().mapState.layerOrder];
         if (JSON.stringify(prevLayerOrder) !== JSON.stringify(orderedLayerPaths))
@@ -168,7 +196,7 @@ export class MapEventProcessor extends AbstractEventProcessor {
   //! THIS IS THE ONLY FUNCTION TO SET STORE DIRECTLY
   static setMapLoaded(mapId: string): void {
     // Log
-    logger.logTraceCore('setMapLoaded', mapId);
+    logger.logTraceCore('MAP EVENT PROCESSOR - setMapLoaded', mapId);
 
     // use api to access map because this function will set map element in store
     const { map } = api.maps[mapId];

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

@@ -9,6 +9,7 @@ import {
   api,
   getLocalizedValue,
 } from '@/app';
+import { logger } from '@/core/utils/logger';
 
 import { AbstractEventProcessor } from '../abstract-event-processor';
 
@@ -22,6 +23,9 @@ export class TimeSliderEventProcessor extends AbstractEventProcessor {
     api.event.once(
       api.eventNames.MAP.EVENT_MAP_LOADED,
       () => {
+        // Log
+        logger.logTraceCoreAPIEvent('TIME SLIDER EVENT PROCESSOR - EVENT_MAP_LOADED');
+
         const orderedLayers = store.getState().mapState.layerOrder;
         const initialTimeSliderLayerPaths = TimeSliderEventProcessor.filterTimeSliderLayers(mapId, orderedLayers);
         if (initialTimeSliderLayerPaths) {
@@ -38,6 +42,9 @@ export class TimeSliderEventProcessor extends AbstractEventProcessor {
     const unsubLayerOrder = store.subscribe(
       (state) => state.mapState.layerOrder,
       (cur, prev) => {
+        // Log
+        logger.logTraceCoreStoreSubscription('TIME SLIDER EVENT PROCESSOR - layerOrder', cur);
+
         const newTimeSliderLayerPaths = TimeSliderEventProcessor.filterTimeSliderLayers(mapId, cur);
         const oldTimeSliderLayerPaths = TimeSliderEventProcessor.filterTimeSliderLayers(mapId, prev);
         const addedLayers = newTimeSliderLayerPaths.filter((layerPath) => !oldTimeSliderLayerPaths.includes(layerPath));

packages/geoview-core/src/api/events/payloads/map-view-projection-payload.ts

@@ -15,6 +15,7 @@ const validEvents: EventStringId[] = [EVENT_NAMES.MAP.EVENT_MAP_VIEW_PROJECTION_
  * @returns {boolean} returns true if the payload is valid
  */
 export const payloadIsAMapViewProjection = (verifyIfPayload: PayloadBaseClass): verifyIfPayload is MapViewProjectionPayload => {
+  // TODO: Refactor - Seems like this function is unused?
   return validEvents.includes(verifyIfPayload?.event);
 };
 

packages/geoview-core/src/api/plugin/footer-plugin.ts

@@ -61,7 +61,7 @@ export abstract class FooterPlugin extends AbstractPlugin {
    */
   onSelected(): void {
     // Log
-    logger.logTraceCore('footer-plugin.onSelected');
+    logger.logTraceCore('FOOTER-PLUGIN - onSelected');
 
     // TODO: Refactor - Move 'onSelected' in AbstractPlugin class so that AppBar can eventually benefit as well?
 

packages/geoview-core/src/app.tsx

@@ -46,6 +46,9 @@ export function unmountMap(mapId: string) {
  */
 export function addReloadListener(mapId: string) {
   const reloadHandler = (payload: types.PayloadBaseClass) => {
+    // Log
+    logger.logTraceCoreAPIEvent('APP - reloadHandler', payload);
+
     if (payloadIsAmapFeaturesConfig(payload)) {
       const { mapFeaturesConfig } = payload;
       if (mapFeaturesConfig) {
@@ -98,8 +101,13 @@ async function renderMap(mapElement: Element): Promise<void> {
     reactRoot[mapId] = createRoot(mapElement!);
     addReloadListener(mapId);
 
-    // TODO: Refactor - Activate <React.StrictMode>
+    // TODO: Refactor #1810 - Activate <React.StrictMode>
     reactRoot[mapId].render(<AppStart mapFeaturesConfig={configObj} />);
+    // reactRoot[mapId].render(
+    //   <React.StrictMode>
+    //     <AppStart mapFeaturesConfig={configObj} />
+    //   </React.StrictMode>
+    // );
   }
 }
 

packages/geoview-core/src/core/components/app-bar/app-bar.tsx

@@ -53,7 +53,6 @@ export function Appbar(): JSX.Element {
   const appBarComponents = useUIAppbarComponents();
   const { hideClickMarker } = useMapStoreActions();
   const activeFooterTabId = useUIActiveFooterBarTabId();
-  const appBarPanelCloseListenerFunction = () => setSelectedAppbarButtonId('');
 
   // get store config for app bar to add (similar logic as in footer-bar)
   const appBarConfig = useGeoViewConfig()?.appBar;
@@ -70,6 +69,9 @@ export function Appbar(): JSX.Element {
 
   const addButtonPanel = useCallback(
     (payload: ButtonPanelPayload) => {
+      // Log
+      logger.logTraceUseCallback('APP-BAR - addButtonPanel');
+
       setButtonPanelGroups((prevState) => {
         return {
           ...prevState,
@@ -86,6 +88,9 @@ export function Appbar(): JSX.Element {
 
   const removeButtonPanel = useCallback(
     (payload: ButtonPanelPayload) => {
+      // Log
+      logger.logTraceUseCallback('APP-BAR - removeButtonPanel');
+
       setButtonPanelGroups((prevState) => {
         const state = { ...prevState };
 
@@ -99,19 +104,31 @@ export function Appbar(): JSX.Element {
     [setButtonPanelGroups]
   );
 
+  const appBarPanelCloseListenerFunction = () => {
+    // Log
+    logger.logTraceCoreAPIEvent('APP-BAR - appBarPanelCloseListenerFunction');
+
+    setSelectedAppbarButtonId('');
+  };
+
   useEffect(() => {
     // Log
+    logger.logTraceUseEffect('APP-BAR - addButtonPanel', mapId);
 
     const appBarPanelCreateListenerFunction = (payload: PayloadBaseClass) => {
+      // Log
+      logger.logTraceCoreAPIEvent('APP-BAR - appBarPanelCreateListenerFunction', payload);
+
       if (payloadIsAButtonPanel(payload)) addButtonPanel(payload);
     };
 
     const appBarPanelRemoveListenerFunction = (payload: PayloadBaseClass) => {
+      // Log
+      logger.logTraceCoreAPIEvent('APP-BAR - appBarPanelRemoveListenerFunction', payload);
+
       if (payloadIsAButtonPanel(payload)) removeButtonPanel(payload);
     };
 
-    logger.logTraceUseEffect('APP-BAR - addButtonPanel', mapId);
-
     // listen to new panel creation
     api.event.on(EVENT_NAMES.APPBAR.EVENT_APPBAR_PANEL_CREATE, appBarPanelCreateListenerFunction, mapId);
 
@@ -130,6 +147,9 @@ export function Appbar(): JSX.Element {
   // #endregion
 
   useEffect(() => {
+    // Log
+    logger.logTraceUseEffect('APP-BAR - open detail panel when clicked on map', mapId);
+
     // open appbar detail drawer when click on map.
     if (activeFooterTabId === 'details' && buttonPanelGroups?.details?.AppbarPanelButtonDetails?.panel) {
       buttonPanelGroups.details.AppbarPanelButtonDetails.panel.open();
@@ -165,6 +185,9 @@ export function Appbar(): JSX.Element {
   }, [appBarConfig, mapId]);
 
   useEffect(() => {
+    // Log
+    logger.logTraceUseEffect('APP-BAR - create group of appbar buttons from footer bar group', mapId);
+
     // render footer bar tabs
     (appBarConfig?.tabs.core ?? [])
       .filter((tab) => tab === 'guide' || tab === 'details' || tab === 'legend')

packages/geoview-core/src/core/components/click-marker/click-marker.tsx

@@ -45,6 +45,9 @@ export function ClickMarker(): JSX.Element {
     const unsubMapSingleClick = getGeoViewStore(mapId).subscribe(
       (state) => state.mapState.clickCoordinates,
       (curClick, prevClick) => {
+        // Log
+        logger.logTraceCoreStoreSubscription('CLICK-MARKER - clickCoordinates', curClick);
+
         if (curClick !== prevClick) {
           markerCoordinates.current = curClick!.lnglat;
           showClickMarker({ lnglat: curClick!.lnglat });

packages/geoview-core/src/core/components/footer-bar/footer-bar.tsx

@@ -267,12 +267,18 @@ export function FooterBar(): JSX.Element | null {
   };
 
   const eventFooterBarCreateListenerFunction = (payload: PayloadBaseClass) => {
+    // Log
+    logger.logTraceCoreAPIEvent('FOOTER-BAR - eventFooterBarCreateListenerFunction', payload);
+
     if (payloadIsAFooterBar(payload)) {
       addTab(payload);
     }
   };
 
   const eventFooterBarRemoveListenerFunction = (payload: PayloadBaseClass) => {
+    // Log
+    logger.logTraceCoreAPIEvent('FOOTER-BAR - eventFooterBarRemoveListenerFunction', payload);
+
     if (payloadIsAFooterBar(payload)) removeTab(payload);
   };
 

packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip.tsx

@@ -65,6 +65,9 @@ export function HoverTooltip(): JSX.Element {
   const selectedFeature = useRef<TypeFeatureInfoEntry>();
 
   const allQueriesDoneListenerFunciton = (payload: PayloadBaseClass) => {
+    // Log
+    logger.logTraceCoreAPIEvent('HOVER-TOOLTIP - allQueriesDoneListenerFunciton', payload);
+
     if (payloadIsAllQueriesDone(payload)) {
       const { eventType, resultsSet } = payload;
       if (eventType === 'hover') {
@@ -107,6 +110,9 @@ export function HoverTooltip(): JSX.Element {
     const unsubMapPointer = getGeoViewStore(mapId).subscribe(
       (state) => state.mapState.pointerPosition,
       (curPos, prevPos) => {
+        // Log too annoying
+        // logger.logTraceCoreStoreSubscription('CLICK-MARKER - pointerPosition', mapId, curPos);
+
         if (curPos !== prevPos) {
           setShowTooltip(false);
           setTooltipValue('');
@@ -119,6 +125,9 @@ export function HoverTooltip(): JSX.Element {
     const unsubMapSingleClick = getGeoViewStore(mapId).subscribe(
       (state) => state.mapState.clickCoordinates,
       (curClick, prevClick) => {
+        // Log
+        logger.logTraceCoreStoreSubscription('CLICK-MARKER - clickCoordinates', mapId, curClick);
+
         if (curClick !== prevClick) {
           selectedFeature.current = undefined;
           setShowTooltip(false);

packages/geoview-core/src/core/components/layers/layers-toolbar.tsx

@@ -37,6 +37,9 @@ function ResponsiveButton(props: ResponsiveButtonProps): JSX.Element {
     logger.logTraceUseEffect('LAYERS-TOOLBAR - mount');
 
     const handleResize = () => {
+      // Log
+      logger.logTraceCore('LAYERS-TOOLBAR - window resize event');
+
       setScreenWidth(window.innerWidth);
     };
 

packages/geoview-core/src/core/components/legend/legend.tsx

@@ -99,6 +99,9 @@ export function Legend({ fullWidth }: LegendType): JSX.Element {
 
     // update subsets of list when window size updated.
     const formatLegendLayerList = () => {
+      // Log
+      logger.logTraceCore('LEGEND - window resize event');
+
       updateLegendLayerListByWindowSize(legendLayers);
     };
     window.addEventListener('resize', formatLegendLayerList);

packages/geoview-core/src/core/components/nav-bar/nav-bar.tsx

@@ -77,12 +77,18 @@ export function Navbar(): JSX.Element {
     logger.logTraceUseEffect('NAV-BAR - addButtonPanel', mapId);
 
     const navbarBtnPanelCreateListenerFunction = (payload: PayloadBaseClass) => {
+      // Log
+      logger.logTraceCoreAPIEvent('NAV-BAR - navbarBtnPanelCreateListenerFunction', payload);
+
       if (payloadIsAButtonPanel(payload)) addButtonPanel(payload);
     };
     // listen to new nav-bar panel creation
     api.event.on(EVENT_NAMES.NAVBAR.EVENT_NAVBAR_BUTTON_PANEL_CREATE, navbarBtnPanelCreateListenerFunction, mapId);
 
     const navbarBtnPanelRemoveListenerFunction = (payload: PayloadBaseClass) => {
+      // Log
+      logger.logTraceCoreAPIEvent('NAV-BAR - navbarBtnPanelRemoveListenerFunction', payload);
+
       if (payloadIsAButtonPanel(payload)) removeButtonPanel(payload);
     };
     // listen to new nav-bar panel removal