Code recovery (#1804)

packages/geoview-core/public/templates/layers/esri-feature.html

@@ -108,31 +108,38 @@ <h4 id="HLYR1">1. Many Esri Feature Layers</h4>
                 'metadataAccessPath': { 'en': 'https://maps-cartes.ec.gc.ca/arcgis/rest/services/DMS/DEU_CSO_Volume/MapServer/' },
                 'geoviewLayerType': 'esriFeature',
                 'listOfLayerEntryConfig': [
-                  {
-                    'layerId': '8',
-                    'layerFilter': 'Total_CSO_Volume > 5000000',
-                    'initialSettings': { 'visible': 'yes' }
-                  }
-                ]
-              }
-            ]
-          },
-          'components': ['overview-map', 'north-arrow'],
-          'corePackages': [],
-          'theme': 'dark',
-          'suportedLanguages': ['en']
-        }"
-    ></div>
-    <button type="button" class="collapsible">Visibility and filters</button>
-    <pre id="layer1-buttons-pre" class="panel"></pre>
-    <button class="collapsible">Get Legend</button>
-    <pre id="LegendsId1-table-pre" class="panel"></pre>
-    <button type="button" class="collapsible">Get Feature Info</button>
-    <pre id="ResultSetId1-click" class="panel">Click on feature on the map</pre>
-    <button type="button" class="collapsible" id="AllFeatureInfo1">Get All Feature Info</button>
-    <pre id="ResultSetId1-all" class="panel"></pre>
-    <hr />
-    <p>This map has a wms layer added from configuration.</p>
+                {
+                  'layerId': '8',
+                  'layerFilter': 'Total_CSO_Volume > 5000000',
+                  'initialSettings': { 'visible': 'yes' },
+                  'source': { 'featureInfo': { 'queryable': true } }
+                }
+              ]
+            }
+          ]
+        },
+        'components': ['overview-map', 'north-arrow'],
+        'corePackages': [],
+        'theme': 'dark',
+        'suportedLanguages': ['en']
+      }"
+  ></div>
+  <button type="button" class="collapsible">Visibility and filters</button>
+  <pre id="layer1-buttons-pre" class="panel"></pre>
+
+  <button class="collapsible">Get Legend</button>
+  <pre id="LegendsId1-table-pre" class="panel"></pre>
+
+  <button type="button" class="collapsible">Get Feature Info</button>
+  <pre id="ResultSetId1-click" class="panel">Click on feature on the map</pre>
+
+  <button type="button" class="collapsible" id="AllFeatureInfo1">Get All Feature Info</button>
+  <pre class="panel">
+    <select name="dropdown1" id="dropdown1"></select>
+    <div id="ResultSetId1-all-features"></div>
+  </pre>
+  <hr />
+  <p>This map has a wms layer added from configuration.</p>
     <button type="button" class="collapsible">Configuration Snippet</button>
     <pre id="LYR1CS" class="panel"></pre>
     <hr />
@@ -375,7 +382,7 @@ <h4 id="HLYR4">4. Many Esri Feature Layers - with footer bar</h4>
                 const layerConfig = cgpv.api.maps.LYR2.layer.registeredLayers['historical-flood/0'];
                 const checkbox = document.getElementById('checkbox-LYR2-historical-flood');
                 cgpv.api.maps.LYR2.layer.geoviewLayer('historical-flood/0').applyViewFilter(
-                  LYR2_FILTERS[j],
+                  LYR2_FILTERS[i],
                   checkbox.value !== 'true'
                 );
                 if (++i === LYR2_FILTERS.length) i = 0;
@@ -425,27 +432,44 @@ <h4 id="HLYR4">4. Many Esri Feature Layers - with footer bar</h4>
       });
 
       // LYR1 ===================================================================================================================
-      const getAllFeatureInfo1 = document.getElementById('AllFeatureInfo1');
-      getAllFeatureInfo1.addEventListener('click', function (e) {
-            cgpv.api.event.emit({ event: 'map/get_all_features', handlerName: 'LYR1' });
-          });
-
       cgpv.api.event.on(
-        cgpv.api.eventNames.GET_FEATURE_INFO.ALL_QUERIES_DONE,
+        cgpv.api.eventNames.MAP.EVENT_MAP_LOADED,
         (payload) => {
-          const { layerSetId, resultsSet, eventType } = payload;
-          createInfoTable('LYR1', 'ResultSetId1', resultsSet, eventType);
-        },
-        'LYR1/FeatureInfoLayerSet'
-      );
+          const lyr1RegisteredLayers = cgpv.api.maps.LYR1.layer.registeredLayers;
+          const dropDownContent = document.getElementById('dropdown1');
+          Object.keys(lyr1RegisteredLayers).forEach((layerPath) => {
+            if (lyr1RegisteredLayers[layerPath].layerStatus === 'loaded') {
+              const layerName = lyr1RegisteredLayers[layerPath]?.layerName?.en;
+              element = document.createElement('option');
+              element.value = layerPath;
+              element.innerText = layerName ? layerName : lyr1RegisteredLayers[layerPath].layerId;
+              dropDownContent.appendChild(element);
+            }
+          });
+          dropDownContent.addEventListener('click', (e) => {
+            cgpv.api.getFeatureInfoLayerSet('LYR1').triggerGetAllFeatureInfo(e.currentTarget.value, 'all');
+          });
 
-      cgpv.api.event.on(
-        cgpv.api.eventNames.GET_LEGENDS.LEGENDS_LAYERSET_UPDATED,
-        (payload) => {
-          const { resultsSet } = payload;
-          displayLegend('LegendsId1', resultsSet);
-        },
-        'LYR1/LegendsLayerSet'
+          cgpv.api.event.on(
+            cgpv.api.eventNames.GET_FEATURE_INFO.ALL_QUERIES_DONE,
+            (payload) => {
+              const { layerSetId, resultsSet, eventType } = payload;
+              createInfoTable('LYR1', 'ResultSetId1', resultsSet, eventType);
+            },
+            'LYR1/FeatureInfoLayerSet'
+          );
+
+          cgpv.api.event.on(
+            cgpv.api.eventNames.GET_LEGENDS.LEGENDS_LAYERSET_UPDATED,
+            (payload) => {
+              const { resultsSet } = payload;
+              displayLegend('LegendsId1', resultsSet);
+            },
+            'LYR1/LegendsLayerSet'
+          );
+
+          },
+          'LYR1'
       );
 
       listenToLegendLayerSetChanges('HLYR1-state', 'LYR1/LegendsLayerSet');

packages/geoview-core/public/templates/layers/layerlib.js

@@ -45,7 +45,7 @@ const addBoundsPolygon = (mapId, bbox) => {
 
 // ==========================================================================================================================
 const createInfoTable = (mapId, resultsSetId, resultsSet, eventType) => {
-  if (eventType !== 'click') return;
+  if (!['click', 'all-features'].includes(eventType)) return;
   const infoTable = document.getElementById(`${resultsSetId}-${eventType}`);
   infoTable.textContent = '';
   const oldContent = document.getElementById(`layer${mapId.slice(-1)}-${eventType}-info`);

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

@@ -1,4 +1,3 @@
-import { isEqual } from 'lodash';
 import { TypeFeatureInfoResultsSet, EventType, TypeLayerData, TypeArrayOfLayerData } from '@/api/events/payloads/get-feature-info-payload';
 import { IFeatureInfoState } from '@/core/stores';
 
@@ -45,33 +44,15 @@ export class FeatureInfoEventProcessor extends AbstractEventProcessor {
    * @param {TypeFeatureInfoResultsSet} resultsSet The resul sets associated to the map.
    */
   static propagateFeatureInfoToStore(mapId: string, layerPath: string, eventType: EventType, resultsSet: TypeFeatureInfoResultsSet) {
-    // TODO: Refactor - Remove the unnecessary 'layerPath' parameter? It is kind of confusing.
-    // TO.DOCONT: Indeed, the layerPath is irrelevant as the whole resultsSet is reprocessed.
-    // TO.DOCONT: If the parameter is used only for logging purposes I'd suggest to name it clearly to remove confusion.
-    const layerPathInResultsSet = Object.keys(resultsSet);
-
     const featureInfoState = this.getFeatureInfoState(mapId);
-
     if (eventType === 'click') {
       /**
        * Create a details object for each layer which is then used to render layers in details panel.
        */
-      const layerDataArray = [] as TypeArrayOfLayerData;
-      let atLeastOneFeature = false;
-      layerPathInResultsSet.forEach((layerPathItem) => {
-        const newLayerData: TypeLayerData = resultsSet?.[layerPathItem]?.data.click as TypeLayerData;
-        if (!atLeastOneFeature) atLeastOneFeature = !!newLayerData.features?.length;
-        const layerDataFound = layerDataArray.find((layerEntry) => layerEntry.layerPath === layerPathItem);
-        if (layerDataFound) {
-          if (!isEqual(layerDataFound, newLayerData)) {
-            layerDataFound.features = newLayerData.features;
-            layerDataFound.layerStatus = newLayerData.layerStatus;
-            layerDataFound.layerName = newLayerData.layerName;
-          }
-        } else {
-          layerDataArray.push(newLayerData);
-        }
-      });
+      const layerDataArray = [...featureInfoState.layerDataArray];
+      if (!layerDataArray.find((layerEntry) => layerEntry.layerPath === layerPath))
+        layerDataArray.push(resultsSet?.[layerPath]?.data.click as TypeLayerData);
+      const atLeastOneFeature = layerDataArray.find((layerEntry) => !!layerEntry.features?.length) || false;
 
       // Update the layer data array in the store, all the time, for all statuses
       featureInfoState.actions.setLayerDataArray(layerDataArray);
@@ -92,42 +73,20 @@ export class FeatureInfoEventProcessor extends AbstractEventProcessor {
       /**
        * Create a hover object for each layer which is then used to render layers
        */
-      const hoverDataArray = [] as TypeArrayOfLayerData;
-      layerPathInResultsSet.forEach((layerPathItem) => {
-        const newLayerData: TypeLayerData = resultsSet?.[layerPathItem]?.data.hover as TypeLayerData;
-        const layerDataFound = hoverDataArray.find((layerEntry) => layerEntry.layerPath === layerPathItem);
-        if (layerDataFound) {
-          if (!isEqual(layerDataFound, newLayerData)) {
-            layerDataFound.features = newLayerData.features;
-            layerDataFound.layerStatus = newLayerData.layerStatus;
-            layerDataFound.layerName = newLayerData.layerName;
-          }
-        } else {
-          hoverDataArray.push(newLayerData);
-        }
-      });
-
-      featureInfoState.actions.setHoverDataArray(hoverDataArray);
+      const hoverDataArray = [...featureInfoState.hoverDataArray];
+      if (!hoverDataArray.find((layerEntry) => layerEntry.layerPath === layerPath)) {
+        hoverDataArray.push(resultsSet?.[layerPath]?.data.hover as TypeLayerData);
+        featureInfoState.actions.setHoverDataArray(hoverDataArray);
+      }
     } else if (eventType === 'all-features') {
       /**
        * Create a get all features info object for each layer which is then used to render layers
        */
-      const allFeaturesDataArray = [] as TypeArrayOfLayerData;
-      layerPathInResultsSet.forEach((layerPathItem) => {
-        const newLayerData: TypeLayerData = resultsSet?.[layerPathItem]?.data['all-features'] as TypeLayerData;
-        const layerDataFound = allFeaturesDataArray.find((layerEntry) => layerEntry.layerPath === layerPathItem);
-        if (layerDataFound) {
-          if (!isEqual(layerDataFound, newLayerData)) {
-            layerDataFound.features = newLayerData.features;
-            layerDataFound.layerStatus = newLayerData.layerStatus;
-            layerDataFound.layerName = newLayerData.layerName;
-          }
-        } else {
-          allFeaturesDataArray.push(newLayerData);
-        }
-      });
-
-      featureInfoState.actions.setAllFeaturesDataArray(allFeaturesDataArray);
+      const allFeaturesDataArray = [...featureInfoState.allFeaturesDataArray];
+      if (!allFeaturesDataArray.find((layerEntry) => layerEntry.layerPath === layerPath)) {
+        allFeaturesDataArray.push(resultsSet?.[layerPath]?.data['all-features'] as TypeLayerData);
+        featureInfoState.actions.setAllFeaturesDataArray(allFeaturesDataArray);
+      }
     }
   }
 

packages/geoview-core/src/api/events/constants/get-feature-info-constants.ts

@@ -6,7 +6,12 @@ import { EventStringId } from '../event-types';
  */
 
 /** Valid keys for the GET_FEATURE_INFO category */
-export type GetFeatureInfoEventKey = 'QUERY_LAYER' | 'ALL_QUERIES_DONE' | 'GET_ALL_LAYER_FEATURES' | 'QUERY_RESULT';
+export type GetFeatureInfoEventKey =
+  | 'QUERY_LAYER'
+  | 'ALL_QUERIES_DONE'
+  | 'GET_ALL_LAYER_FEATURES'
+  | 'QUERY_RESULT'
+  | 'FEATURE_INFO_LAYERSET_UPDATED';
 
 /** Record that associates GET_FEATURE_INFO's event keys to their event string id */
 export const GET_FEATURE_INFO: Record<GetFeatureInfoEventKey, EventStringId> = {
@@ -29,4 +34,9 @@ export const GET_FEATURE_INFO: Record<GetFeatureInfoEventKey, EventStringId> = {
    * Event triggered to send the result of the query
    */
   QUERY_RESULT: 'get_feature_info/query_result',
+
+  /**
+   * Event triggered to send the result of the query
+   */
+  FEATURE_INFO_LAYERSET_UPDATED: 'get_feature_info/feature_info_layerset_updated',
 };

packages/geoview-core/src/api/events/event-types.ts

@@ -59,6 +59,7 @@ export type EventStringId =
   | 'get_feature_info/get_all_layer_features'
   | 'get_feature_info/query_layer'
   | 'get_feature_info/query_result'
+  | 'get_feature_info/feature_info_layerset_updated'
   | 'get_legends/legends_layerset_updated'
   | 'get_legends/legend_info'
   | 'get_legends/query_legends'

packages/geoview-core/src/api/events/payloads/get-feature-info-payload.ts

@@ -9,13 +9,15 @@ import { PayloadBaseClass } from './payload-base-class';
 import { EventStringId, EVENT_NAMES } from '../event-types';
 import { TypeGeoviewLayerType } from '@/geo/layer/geoview-layers/abstract-geoview-layers';
 import { TypeLayerStatus } from '@/geo/map/map-schema-types';
+import { TypeResultsSet } from './layer-set-payload';
 
 /** Valid events that can create GetFeatureInfoPayload */
 const validEvents: EventStringId[] = [
   EVENT_NAMES.GET_FEATURE_INFO.QUERY_LAYER,
   EVENT_NAMES.GET_FEATURE_INFO.GET_ALL_LAYER_FEATURES,
   EVENT_NAMES.GET_FEATURE_INFO.ALL_QUERIES_DONE,
   EVENT_NAMES.GET_FEATURE_INFO.QUERY_RESULT,
+  EVENT_NAMES.GET_FEATURE_INFO.FEATURE_INFO_LAYERSET_UPDATED,
 ];
 
 export type EventType = 'click' | 'hover' | 'crosshaire-enter' | 'all-features';
@@ -114,6 +116,18 @@ export const payloadIsQueryLayer = (verifyIfPayload: PayloadBaseClass): verifyIf
   return verifyIfPayload?.event === EVENT_NAMES.GET_FEATURE_INFO.QUERY_LAYER;
 };
 
+/**
+ * type guard function that redefines a PayloadBaseClass as a TypeQueryAllLayerFeaturesPayload
+ * if the event attribute of the verifyIfPayload parameter is valid. The type assertion
+ * applies only to the true block of the if clause.
+ *
+ * @param {PayloadBaseClass} verifyIfPayload object to test in order to determine if the type assertion is valid
+ * @returns {boolean} returns true if the payload is valid
+ */
+export const payloadIsGetAllLayerFeatures = (verifyIfPayload: PayloadBaseClass): verifyIfPayload is TypeQueryAllLayerFeaturesPayload => {
+  return verifyIfPayload?.event === EVENT_NAMES.GET_FEATURE_INFO.GET_ALL_LAYER_FEATURES;
+};
+
 /**
  * Returns true if the payload is a TypeQueryLayerPayload with queryType equal to 'at_long_lat'.
  *
@@ -124,6 +138,20 @@ export const payloadIsQueryLayerQueryTypeAtLongLat = (verifyIfPayload: PayloadBa
   return payloadIsQueryLayer(verifyIfPayload) && verifyIfPayload.queryType === 'at_long_lat';
 };
 
+/**
+ * type guard function that redefines a PayloadBaseClass as a TypeFeatureInfoLayersetUpdatedPayload
+ * if the event attribute of the verifyIfPayload parameter is valid. The type assertion
+ * applies only to the true block of the if clause.
+ *
+ * @param {PayloadBaseClass} verifyIfPayload object to test in order to determine if the type assertion is valid
+ * @returns {boolean} returns true if the payload is valid
+ */
+export const payloadIsFeatureInfoLayersetUpdated = (
+  verifyIfPayload: PayloadBaseClass
+): verifyIfPayload is TypeFeatureInfoLayersetUpdatedPayload => {
+  return verifyIfPayload?.event === EVENT_NAMES.GET_FEATURE_INFO.FEATURE_INFO_LAYERSET_UPDATED;
+};
+
 /**
  * Additional attributes needed to define a GetFeatureInfoPayload
  */
@@ -136,6 +164,8 @@ export interface TypeQueryLayerPayload extends GetFeatureInfoPayload {
   eventType: EventType;
 }
 
+export type TypeQueryAllLayerFeaturesPayload = TypeQueryLayerPayload;
+
 /**
  * type guard function that redefines a PayloadBaseClass as a TypeAllQueriesDonePayload
  * if the event attribute of the verifyIfPayload parameter is valid. The type assertion
@@ -212,6 +242,18 @@ export const payloadIsGetFeatureInfo = (verifyIfPayload: PayloadBaseClass): veri
   return validEvents.includes(verifyIfPayload?.event);
 };
 
+/**
+ * Additional attributes needed to define a TypeAllLegendsDonePayload
+ */
+export interface TypeFeatureInfoLayersetUpdatedPayload extends GetFeatureInfoPayload {
+  // the layer path updated
+  layerPath: string;
+  // The result set containing all the legends of the layers loaded on the map.
+  resultsSet: TypeFeatureInfoResultsSet;
+  // The layer status that is associated to the layer path.
+  layerStatus: TypeLayerStatus;
+}
+
 /**
  * Class definition for GetFeatureInfoPayload
  *
@@ -263,7 +305,11 @@ export class GetFeatureInfoPayload extends PayloadBaseClass {
    *
    * @returns {TypeQueryLayerPayload} the queryLayerPayload object created
    */
-  static createGetAllLayerFeaturesPayload = (handlerName: string, queryType: QueryType, location: string): TypeQueryLayerPayload => {
+  static createGetAllLayerFeaturesPayload = (
+    handlerName: string,
+    queryType: QueryType,
+    location?: string
+  ): TypeQueryAllLayerFeaturesPayload => {
     const queryLayerPayload = new GetFeatureInfoPayload(
       EVENT_NAMES.GET_FEATURE_INFO.GET_ALL_LAYER_FEATURES,
       handlerName
@@ -331,4 +377,29 @@ export class GetFeatureInfoPayload extends PayloadBaseClass {
     queryResultPayload.eventType = eventType;
     return queryResultPayload;
   };
+
+  /**
+   * Static method used to create a "feature info updated" payload.
+   *
+   * @param {string | null} handlerName the handler Name
+   * @param {string} layerPath the layer path updated
+   * @param {TypeResultsSet | TypeFeatureInfoResultsSet} resultsSet the feature info resultset
+   *
+   * @returns {TypeFeatureInfoLayersetUpdatedPayload} the TypeFeatureInfoLayersetUpdatedPayload object created
+   */
+  static createFeatureInfoLayersetUpdatedPayload = (
+    handlerName: string,
+    layerPath: string,
+    resultsSet: TypeResultsSet | TypeFeatureInfoResultsSet,
+    layerStatus: TypeLayerStatus
+  ): TypeFeatureInfoLayersetUpdatedPayload => {
+    const featureInfoLayersetUpdatedPayload = new GetFeatureInfoPayload(
+      EVENT_NAMES.GET_FEATURE_INFO.FEATURE_INFO_LAYERSET_UPDATED,
+      handlerName
+    ) as TypeFeatureInfoLayersetUpdatedPayload;
+    featureInfoLayersetUpdatedPayload.layerPath = layerPath;
+    featureInfoLayersetUpdatedPayload.resultsSet = resultsSet as TypeFeatureInfoResultsSet;
+    featureInfoLayersetUpdatedPayload.layerStatus = layerStatus;
+    return featureInfoLayersetUpdatedPayload;
+  };
 }