[TEMPORARY] GeoChart in store

docs/programming/logging.md

@@ -11,7 +11,7 @@ The logger class can be found here:  [https://github.com/Canadian-Geospatial-Pla
 The `logger` provides functions for high-level logging abstraction following best-practices concepts and the following constants:
 ```ts
 // The most detailed messages. Disabled by default. Only shows if actually running in dev environment, never shown otherwise.
-export const LOG_TRACE_DETAILED = 1;
+export const LOG_TRACE_DETAILED 1;
 // For tracing useEffect unmounting. 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_UNMOUNT = 2;
 // For tracing rendering. Disabled by default. Only shows if running in dev environment or GEOVIEW_LOG_ACTIVE key is set in local storage.
@@ -31,6 +31,7 @@ export const LOG_WARNING = 40;
 // For errors and exceptions that cannot be handled. Enabled by default. Shows all the time.
 export const LOG_ERROR = 50;
 ```
+![image](https://github.com/Canadian-Geospatial-Platform/geoview/assets/3472990/0e9b93a7-c660-4768-ac8d-aa0b37f04d0b)
 
 The `logger` is active when (1) running in dev environment or (2) the local storage `GEOVIEW_LOG_ACTIVE` key is set.
 

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

@@ -239,7 +239,10 @@ export class LegendEventProcessor extends AbstractEventProcessor {
         return layer.layerStatus === 'processed';
       });
       if (validFirstLayer) {
+        // Set the selected layer path in the store
         getGeoViewStore(mapId).getState().layerState.actions.setSelectedLayerPath(validFirstLayer.layerPath);
+        // Log
+        logger.logDebug(`Selected layer ${validFirstLayer.layerPath}`);
       } else {
         // Log
         logger.logError(`Couldn't select a layer as none were processed in time`);

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

@@ -75,7 +75,6 @@ export function Appbar(): JSX.Element {
   useEffect(() => {
     // Log
     logger.logTraceUseEffect('APP-BAR - addButtonPanel', mapId);
-    logger.logDebug('APP-BAR - addButtonPanel', mapId); // remove this one when things stabilize
 
     const appBarPanelCreateListenerFunction = (payload: PayloadBaseClass) => {
       if (payloadIsAButtonPanel(payload)) addButtonPanel(payload);

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

@@ -270,7 +270,6 @@ export function FooterTabs(): JSX.Element | null {
   useEffect(() => {
     // Log
     logger.logTraceUseEffect('FOOTER-TABS - mount');
-    logger.logDebug('FOOTER-TABS - mount'); // remove this one when things stabilize
 
     if (footerTabsConfig && footerTabsConfig.tabs.core.includes('legend')) {
       // create new tab and add the Layers component to the footer tab

packages/geoview-core/src/core/utils/logger.ts

@@ -62,7 +62,7 @@ const formatTime = (date: Date): string => {
 type ColorCode = {
   darkorange: string;
   dodgerblue: string;
-  tomato: string;
+  yellowgreen: string;
   green: string;
   plum: string;
   turquoise: string;
@@ -227,7 +227,7 @@ export class ConsoleLogger {
     if (hours) logMsg = `${hours} hours, ${mins} minutes, ${seconds} seconds, and ${timeSpan} ms`;
 
     // Redirect
-    this.logLevel(LOG_DEBUG, 'MARKR', 'tomato', logMsg, ...message, `(${markerKey})`); // Not a typo, 5 characters for alignment
+    this.logLevel(LOG_DEBUG, 'MARKR', 'yellowgreen', logMsg, ...message, `(${markerKey})`); // Not a typo, 5 characters for alignment
   };
 
   /**

packages/geoview-core/src/geo/layer/geoview-layers/abstract-geoview-layers.ts

@@ -782,27 +782,53 @@ export abstract class AbstractGeoViewLayer {
    */
   async getFeatureInfo(queryType: QueryType, layerPath: string, location: TypeLocation = null): Promise<TypeArrayOfFeatureInfoEntries> {
     try {
+      // Get the layer config
       const layerConfig = this.getLayerConfig(layerPath);
+
       if (!layerConfig || !layerConfig.source?.featureInfo?.queryable) return [];
 
+      // Log
+      logger.logTraceCore('abstract-geoview-layers.getFeatureInfo', queryType, layerPath);
+      const logMarkerKey = `${queryType} | ${layerPath}`;
+      logger.logMarkerStart(logMarkerKey);
+
+      let promiseGetFeature: Promise<TypeArrayOfFeatureInfoEntries>;
       switch (queryType) {
         case 'all':
-          return await this.getAllFeatureInfo(layerPath);
+          promiseGetFeature = this.getAllFeatureInfo(layerPath);
+          break;
         case 'at_pixel':
-          return await this.getFeatureInfoAtPixel(location as Pixel, layerPath);
+          promiseGetFeature = this.getFeatureInfoAtPixel(location as Pixel, layerPath);
+          break;
         case 'at_coordinate':
-          return await this.getFeatureInfoAtCoordinate(location as Coordinate, layerPath);
+          promiseGetFeature = this.getFeatureInfoAtCoordinate(location as Coordinate, layerPath);
+          break;
         case 'at_long_lat':
-          return await this.getFeatureInfoAtLongLat(location as Coordinate, layerPath);
+          promiseGetFeature = this.getFeatureInfoAtLongLat(location as Coordinate, layerPath);
+          break;
         case 'using_a_bounding_box':
-          return await this.getFeatureInfoUsingBBox(location as Coordinate[], layerPath);
+          promiseGetFeature = this.getFeatureInfoUsingBBox(location as Coordinate[], layerPath);
+          break;
         case 'using_a_polygon':
-          return await this.getFeatureInfoUsingPolygon(location as Coordinate[], layerPath);
+          promiseGetFeature = this.getFeatureInfoUsingPolygon(location as Coordinate[], layerPath);
+          break;
         default:
+          // Default is empty array
+          promiseGetFeature = Promise.resolve([]);
+
           // Log
           logger.logWarning(`Queries using ${queryType} are invalid.`);
-          return [];
+          break;
       }
+
+      // Wait for results
+      const arrayOfFeatureInfoEntries = await promiseGetFeature;
+
+      // Log
+      logger.logMarkerCheck(logMarkerKey, 'to getFeatureInfo', arrayOfFeatureInfoEntries);
+
+      // Return the result
+      return arrayOfFeatureInfoEntries;
     } catch (error) {
       // Log
       logger.logError(error);
@@ -919,6 +945,9 @@ export abstract class AbstractGeoViewLayer {
       // This will register all existing layers to a newly created layer set.
       this.registerToLayerSetListenerFunctions[layerPath].requestLayerInventory = (payload) => {
         if (payloadIsRequestLayerInventory(payload)) {
+          // Log
+          logger.logTraceDetailed('abstract-geoview-layers on requestLayerInventory', this.mapId, payload);
+
           const { layerSetId } = payload;
           api.event.emit(LayerSetPayload.createLayerRegistrationPayload(this.mapId, layerPath, 'add', layerSetId));
         }
@@ -934,6 +963,9 @@ export abstract class AbstractGeoViewLayer {
     if (!this.registerToLayerSetListenerFunctions[layerPath].queryLegend) {
       this.registerToLayerSetListenerFunctions[layerPath].queryLegend = (payload) => {
         if (payloadIsQueryLegend(payload)) {
+          // Log
+          logger.logTraceDetailed('abstract-geoview-layers on queryLegend', this.mapId, payload);
+
           this.getLegend(layerPath).then((queryResult) => {
             api.event.emit(GetLegendsPayload.createLegendInfoPayload(this.mapId, layerPath, queryResult));
           });
@@ -950,13 +982,17 @@ export abstract class AbstractGeoViewLayer {
     if (!this.registerToLayerSetListenerFunctions[layerPath].queryLayer) {
       if ('featureInfo' in layerConfig.source! && layerConfig.source.featureInfo?.queryable) {
         // Listen to events that request to query a layer and return the resultset to the requester.
-        this.registerToLayerSetListenerFunctions[layerPath].queryLayer = (payload) => {
+        this.registerToLayerSetListenerFunctions[layerPath].queryLayer = async (payload) => {
           if (payloadIsQueryLayer(payload)) {
+            // Log
+            logger.logTraceDetailed('abstract-geoview-layers on queryLayer', this.mapId, payload);
+
             const { queryType, location, eventType, disabledLayers } = payload;
             if (disabledLayers[layerPath]) return;
-            this.getFeatureInfo(queryType, layerPath, location).then((queryResult) => {
-              api.event.emit(GetFeatureInfoPayload.createQueryResultPayload(this.mapId, layerPath, queryType, queryResult, eventType));
-            });
+
+            // Get Feature Info
+            const queryResult = await this.getFeatureInfo(queryType, layerPath, location);
+            api.event.emit(GetFeatureInfoPayload.createQueryResultPayload(this.mapId, layerPath, queryType, queryResult, eventType));
           }
         };
 

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

@@ -161,6 +161,9 @@ export class MapViewer {
             EVENT_NAMES.LAYER.EVENT_LAYER_ADDED,
             (payload) => {
               if (payloadIsGeoViewLayerAdded(payload)) {
+                // Log
+                logger.logTraceDetailed('map-viewer on EVENT_NAMES.LAYER.EVENT_LAYER_ADDED', this.mapId, payload);
+
                 const { geoviewLayer } = payload;
                 MapEventProcessor.setLayerZIndices(this.mapId);
                 if (geoviewLayer.allLayerEntryConfigProcessed()) {
@@ -209,6 +212,7 @@ export class MapViewer {
         });
         if (allGeoviewLayerReady) {
           // Log
+          logger.logInfo('Map is ready', this.mapId);
           logger.logMarkerCheck(`mapReady-${this.mapId}`, 'for map to be ready');
           MapEventProcessor.setMapLoaded(this.mapId);
           clearInterval(layerInterval);