Canadian-Geospatial-Platform · jolevesq · Oct 10, 2023 · Sep 29, 2023
diff --git a/docs/app/event/LegendsLayerSet/LegendsLayerSet-event-managment.md b/docs/app/event/LegendsLayerSet/LegendsLayerSet-event-managment.md
@@ -20,7 +20,7 @@ The `layerPath` parameter is used to link the legend to the layer entry configur
 
 The class can be instantiated using the constructor or the create method. At creation time, the constructor instantiates a `LayerSet` object which will send a `LAYER_SET.REQUEST_LAYER_INVENTORY` event using a `mapId/LayerSetId` handler in order to get the list of all the layerPaths existing on the map. Throughout its existence, the `LegendsLayerSet` instance listens, through its `LayerSet` property, to the `LAYER_SET.LAYER_REGISTRATION` events that are emitted when a layer is created/destroyed on the map or in response to the inventory request to update its `ResultSet` property. It also listens to the `GET_LEGENDS.LEGEND_INFO` event. This listener receives the legend information returned by the layer's `getLegend` call and store it in the `LayerSet`. If all the registered layers have their legend information, a `GET_LEGENDS.LEGENDS_LAYERSET_UPDATED` event is triggered with a `mapId/LayerSetId` handler.
 
-When created, the `LegendsLayerSet` is in a idle state. To start it, the instance listens to a `GET_LEGENDS.TRIGGER` event. This event is only listen once and when it is received, a `LAYER_SET.UPDATED` listener is attached to the instance to wait for `LayerSet` modifications. Then, a `GET_LEGENDS.QUERY_LEGEND` event will be emited to all undefined legend of the `LayerSet` to obtain the legends.
+When the `LegendsLayerSet` is created, a `LAYER_SET.UPDATED` listener is attached to the instance to wait for `LayerSet` modifications. Then, a `GET_LEGENDS.QUERY_LEGEND` event will be emited to all undefined legend of the `LayerSet` to obtain the legends.
 
 The `LAYER_SET.UPDATED` listener will catch layer add/remove applied to the map. If a layer is added, a `GET_LEGENDS.QUERY_LEGEND` event will be emited for it and when all the registered layers have received their legend information, a `GET_LEGENDS.LEGENDS_LAYERSET_UPDATED` event is emited using the `mapId/LayerSetId` as handler. The `GET_LEGENDS.LEGENDS_LAYERSET_UPDATED` event is also emited when a layer is removed from the map to signal that a legend has been removed.
 

diff --git a/packages/geoview-core/public/css/style.css b/packages/geoview-core/public/css/style.css
@@ -152,3 +152,32 @@ td {
   text-align: center;
   font-size: smaller;
 }
+
+table.info, th.info, td.info, th.infoCol1, td.infoCol1 {
+  border: 1px solid black;
+}
+th.info, td.info, th.infoCol1, td.infoCol1 {
+  padding: 15px;
+  width: 15%;
+}
+th.info, th.infoCol1, td.infoCol1 {
+  text-align: left;
+  font-weight: bold;
+  font-size: 15px;
+}
+
+table.state {
+  font-family: arial, sans-serif;
+  border-collapse: collapse;
+  width: 100%;
+}
+
+td.state, th.state {
+  border: 1px solid #dddddd;
+  text-align: left;
+  padding: 8px;
+}
+
+table.state {
+  display: flex;
+}
diff --git a/packages/geoview-core/public/templates/codedoc.js b/packages/geoview-core/public/templates/codedoc.js
@@ -69,15 +69,14 @@ function createCollapsible() {
   let i;
 
   for (i = 0; i < coll.length; i++) {
+    const content = coll[i].nextElementSibling;
+    if (coll[i].classList.contains('active')) content.style.display = 'block';
+    else content.style.display = 'none';
     // eslint-disable-next-line func-names
     coll[i].addEventListener('click', function () {
       this.classList.toggle('active');
-      const content = this.nextElementSibling;
-      if (content.style.display === 'block') {
-        content.style.display = 'none';
-      } else {
-        content.style.display = 'block';
-      }
+      if (this.classList.contains('active')) content.style.display = 'block';
+      else content.style.display = 'none';
     });
   }
 }
@@ -112,6 +111,7 @@ function wireLogs(api, mapId, logsDomId) {
       (payload) => {
         // Log the event
         addLog(logsDomId, payload.event);
+        // eslint-disable-next-line no-console
         console.log(payload);
       },
       mapId

diff --git a/packages/geoview-core/public/templates/layers/esri-dynamic.html b/packages/geoview-core/public/templates/layers/esri-dynamic.html
@@ -66,9 +66,10 @@ <h1><strong>ESRI Dynamic Layers</strong></h1>
 
     <div class="map-title-holder">
       <h4 id="HLYR1">1. Many ESRI Dynamic Layers with legend settings in the config</h4>
-      &nbsp;<h5 id="HLYR1-state">(undefined)</h5>
       <a class="ref-link" href="#top">Top</a>
     </div>
+    <button class="collapsible active">Map Status Flags</button>
+    <pre style="height: 20pc; overflow-y: scroll" id="HLYR1-state" class="panel map-title-holder"></pre>
     <div
       id="LYR1"
       class="llwp-map"
@@ -497,7 +498,9 @@ <h4 id="HLYR1">1. Many ESRI Dynamic Layers with legend settings in the config</h
     <button class="collapsible">Get Legend</button>
     <pre style="height: 20pc; overflow-y: scroll" id="LegendsId1-table-pre" class="panel"></pre>
     <button type="button" class="collapsible">Get Feature Info</button>
-    <pre style="height: 20pc; overflow-y: scroll" id="ResultSetId1" class="panel">Click on feature on the map</pre>
+    <pre style="height: 20pc; overflow-y: scroll" id="ResultSetId1-at_long_lat" class="panel">Click on feature on the map</pre>
+    <button type="button" class="collapsible">Get All Feature Info</button>
+    <pre style="height: 20pc; overflow-y: scroll" id="ResultSetId1-all" class="panel">Comming soon!</pre>
     <hr />
     <button type="button" class="collapsible">Configuration Snippet</button>
     <pre id="LYR1CS" class="panel"></pre>
@@ -507,9 +510,10 @@ <h4 id="HLYR1">1. Many ESRI Dynamic Layers with legend settings in the config</h
 
     <div class="map-title-holder">
       <h4 id="HLYR2">2. Date filtering using time zone changed and non ISO date format</h4>
-      &nbsp;<h5 id="HLYR2-state">(undefined)</h5>
       <a class="ref-link" href="#top">Top</a>
     </div>
+    <button class="collapsible active">Map Status Flags</button>
+    <pre style="height: 20pc; overflow-y: scroll" id="HLYR2-state" class="panel map-title-holder"></pre>
     <div
       id="LYR2"
       class="llwp-map"
@@ -556,7 +560,9 @@ <h4 id="HLYR2">2. Date filtering using time zone changed and non ISO date format
     <button class="collapsible">Get Legend</button>
     <pre style="height: 20pc; overflow-y: scroll" id="LegendsId2-table-pre" class="panel"></pre>
     <button type="button" class="collapsible" >Get Feature Info</button>
-    <pre style="height: 20pc; overflow-y: scroll" id="ResultSetId2" class="panel">Click on feature on the map</pre>
+    <pre style="height: 20pc; overflow-y: scroll" id="ResultSetId2-at_long_lat" class="panel">Click on feature on the map</pre>
+    <button type="button" class="collapsible">Get All Feature Info</button>
+    <pre style="height: 20pc; overflow-y: scroll" id="ResultSetId2-all" class="panel">Comming soon!</pre>
     <hr />
     <button type="button" class="collapsible">Configuration Snippet</button>
     <pre id="LYR2CS" class="panel"></pre>
@@ -566,9 +572,10 @@ <h4 id="HLYR2">2. Date filtering using time zone changed and non ISO date format
 
     <div class="map-title-holder">
       <h4 id="HLYR3">3. Date filtering using ISO UTC dates</h4>
-      &nbsp;<h5 id="HLYR3-state">(undefined)</h5>
       <a class="ref-link" href="#top">Top</a>
     </div>
+    <button class="collapsible active">Map Status Flags</button>
+    <pre style="height: 20pc; overflow-y: scroll" id="HLYR3-state" class="panel map-title-holder"></pre>
     <div
       id="LYR3"
       class="llwp-map"
@@ -614,7 +621,9 @@ <h4 id="HLYR3">3. Date filtering using ISO UTC dates</h4>
     <button class="collapsible">Get Legend</button>
     <pre style="height: 20pc; overflow-y: scroll" id="LegendsId3-table-pre" class="panel"></pre>
     <button type="button" class="collapsible" >Get Feature Info</button>
-    <pre style="height: 20pc; overflow-y: scroll" id="ResultSetId3" class="panel">Click on feature on the map</pre>
+    <pre style="height: 20pc; overflow-y: scroll" id="ResultSetId3-at_long_lat" class="panel">Click on feature on the map</pre>
+    <button type="button" class="collapsible">Get All Feature Info</button>
+    <pre style="height: 20pc; overflow-y: scroll" id="ResultSetId3-all" class="panel">Comming soon!</pre>
     <hr />
     <button type="button" class="collapsible">Configuration Snippet</button>
     <pre id="LYR3CS" class="panel"></pre>
@@ -630,16 +639,9 @@ <h4 id="HLYR3">3. Date filtering using ISO UTC dates</h4>
         console.log(`api is ready for ${mapId}`);
 
         if (mapId === 'allMaps') {
-          //create snippets
-          createCodeSnippet();
-          createConfigSnippet();
-
           createTableOfFilter('LYR1');
           createTableOfFilter('LYR2');
           createTableOfFilter('LYR3');
-          cgpv.api.event.emit({ handlerName: 'LYR1/$LegendsLayerSet$', event: cgpv.api.eventNames.GET_LEGENDS.TRIGGER });
-          cgpv.api.event.emit({ handlerName: 'LYR2/$LegendsLayerSet$', event: cgpv.api.eventNames.GET_LEGENDS.TRIGGER });
-          cgpv.api.event.emit({ handlerName: 'LYR3/$LegendsLayerSet$', event: cgpv.api.eventNames.GET_LEGENDS.TRIGGER });
 
           const field2 = cgpv.api.maps.LYR2.layer.geoviewLayers['historical-flood'].layerTemporalDimension['historical-flood/0'].field;
           const LYR2_FILTERS = [`${field2} >= date '01/01/2018 05:00:00' and ${field2} <= date '12/31/2019 19:00:00-05:00'`,
@@ -702,103 +704,70 @@ <h4 id="HLYR3">3. Date filtering using ISO UTC dates</h4>
       cgpv.api.event.on(
         cgpv.api.eventNames.GET_FEATURE_INFO.ALL_QUERIES_DONE,
         (payload) => {
-          const { layerSetId, resultSets } = payload;
-          createInfoTable('LYR1', 'ResultSetId1', resultSets);
+          const { layerSetId, resultSets, queryType } = payload;
+          createInfoTable('LYR1', 'ResultSetId1', resultSets, queryType);
         },
-        'LYR1/$FeatureInfoLayerSet$'
+        'LYR1/FeatureInfoLayerSet'
       );
 
-      const LegendsLayerSet1 = cgpv.api.getLegendsLayerSet('LYR1');
       cgpv.api.event.on(
         cgpv.api.eventNames.GET_LEGENDS.LEGENDS_LAYERSET_UPDATED,
         (payload) => {
           const { resultSets } = payload;
           displayLegend('LegendsId1', resultSets);
         },
-        'LYR1/$LegendsLayerSet$'
+        'LYR1/LegendsLayerSet'
       );
 
+      listenToLegendLayerSetChanges('HLYR1-state', 'LYR1/LegendsLayerSet');
+
       // LYR2 ===================================================================================================================
       const featureInfoLayerSet2 = cgpv.api.getFeatureInfoLayerSet('LYR2');
       cgpv.api.event.on(
         cgpv.api.eventNames.GET_FEATURE_INFO.ALL_QUERIES_DONE,
         (payload) => {
-          const { layerSetId, resultSets } = payload;
-          createInfoTable('LYR2', 'ResultSetId2', resultSets);
+          const { layerSetId, resultSets, queryType } = payload;
+          createInfoTable('LYR2', 'ResultSetId2', resultSets, queryType);
         },
-        'LYR2/$FeatureInfoLayerSet$'
+        'LYR2/FeatureInfoLayerSet'
       );
 
-      const LegendsLayerSet2 = cgpv.api.getLegendsLayerSet('LYR2');
       cgpv.api.event.on(
         cgpv.api.eventNames.GET_LEGENDS.LEGENDS_LAYERSET_UPDATED,
         (payload) => {
           const { resultSets } = payload;
           displayLegend('LegendsId2', resultSets);
         },
-        'LYR2/$LegendsLayerSet$'
+        'LYR2/LegendsLayerSet'
       );
 
+      listenToLegendLayerSetChanges('HLYR2-state', 'LYR2/LegendsLayerSet');
+
       // LYR3 ===================================================================================================================
       const featureInfoLayerSet3 = cgpv.api.getFeatureInfoLayerSet('LYR3');
       cgpv.api.event.on(
         cgpv.api.eventNames.GET_FEATURE_INFO.ALL_QUERIES_DONE,
         (payload) => {
-          const { layerSetId, resultSets } = payload;
-          createInfoTable('LYR3', 'ResultSetId3', resultSets);
+          const { layerSetId, resultSets, queryType } = payload;
+          createInfoTable('LYR3', 'ResultSetId3', resultSets, queryType);
         },
-        'LYR3/$FeatureInfoLayerSet$'
+        'LYR3/FeatureInfoLayerSet'
       );
 
-      const LegendsLayerSet3 = cgpv.api.getLegendsLayerSet('LYR3');
       cgpv.api.event.on(
         cgpv.api.eventNames.GET_LEGENDS.LEGENDS_LAYERSET_UPDATED,
         (payload) => {
           const { resultSets } = payload;
           displayLegend('LegendsId3', resultSets);
         },
-        'LYR3/$LegendsLayerSet$'
+        'LYR3/LegendsLayerSet'
       );
 
-      window.setInterval(() => {
-        const displayField1 = document.getElementById('HLYR1-state');
-        const geoviewLayers = cgpv.api.getFeatureInfoLayerSet('LYR1').resultSets;
-        if (geoviewLayers) {
-          const output = Object.keys(geoviewLayers).reduce((outputValue, layerId) => {
-            const layerName = cgpv.api.maps.LYR1.layer.registeredLayers[layerId].layerName.en;
-            const { layerPhase, layerStatus } = geoviewLayers[layerId];
-            return `${outputValue}${layerName} - status: ${layerStatus}, phase: ${layerPhase}, `;
-          }, '(');
-          displayField1.textContent = output && output !== '(' ? `${output.slice(0, -2)})` : '(undefined)';
-        } else displayField1.textContent = '(undefined)';
-      }, 250)
-
-      window.setInterval(() => {
-        const displayField2 = document.getElementById('HLYR2-state');
-        const geoviewLayers = cgpv.api.getFeatureInfoLayerSet('LYR2').resultSets;
-        if (geoviewLayers) {
-          const output = Object.keys(geoviewLayers).reduce((outputValue, layerId) => {
-            const layerName = cgpv.api.maps.LYR2.layer.registeredLayers[layerId].layerName.en;
-            const { layerPhase, layerStatus } = geoviewLayers[layerId];
-            return `${outputValue}${layerName} - status: ${layerStatus}, phase: ${layerPhase}, `;
-          }, '(');
-          displayField2.textContent = output && output !== '(' ? `${output.slice(0, -2)})` : '(undefined)';
-        } else displayField2.textContent = '(undefined)';
-      }, 250)
-
-      window.setInterval(() => {
-        const displayField3 = document.getElementById('HLYR3-state');
-        const geoviewLayers = cgpv.api.getFeatureInfoLayerSet('LYR3').resultSets;
-        if (geoviewLayers) {
-          const output = Object.keys(geoviewLayers).reduce((outputValue, layerId) => {
-            const layerName = cgpv.api.maps.LYR3.layer.registeredLayers[layerId].layerName.en;
-            const { layerPhase, layerStatus } = geoviewLayers[layerId];
-            return `${outputValue}${layerName} - status: ${layerStatus}, phase: ${layerPhase}, `;
-          }, '(');
-          displayField3.textContent = output && output !== '(' ? `${output.slice(0, -2)})` : '(undefined)';;
-        } else displayField3.textContent = '(undefined)';
-      }, 250)
+      listenToLegendLayerSetChanges('HLYR3-state', 'LYR3/LegendsLayerSet');
 
+      //create snippets
+      createCodeSnippet();
+      createConfigSnippet();
     </script>
   </body>
 </html>