Use Promise.allSettled on queries to multiple overlapping extents to

wait until all results are in before merging into popup interface. Extend waiting period to 1s when re-ordering extents via layer control, so that browser processing can finish.
Maps4HTML · Sep 25, 2023 · 31b5b99 · 31b5b99
1 parent 1e89c54
commit 31b5b99
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 11 deletions.
diff --git a/src/mapml/handlers/QueryHandler.js b/src/mapml/handlers/QueryHandler.js
@@ -82,9 +82,13 @@ export var QueryHandler = L.Handler.extend({
       );
     let templates = layer.getQueryTemplates(pcrsClick);
 
-    var fetchFeatures = function (template, obj, lastOne) {
+    let fetches = [];
+
+    var fetchFeatures = function (template, obj) {
       const parser = new DOMParser();
-      fetch(L.Util.template(template.template, obj), { redirect: 'follow' })
+      return fetch(L.Util.template(template.template, obj), {
+        redirect: 'follow'
+      })
         .then((response) => {
           if (response.status >= 200 && response.status < 300) {
             return response.text().then((text) => {
@@ -137,13 +141,7 @@ export var QueryHandler = L.Handler.extend({
                 .querySelector('map-feature');
             layer._mapmlFeatures.push(feature);
           }
-          if (lastOne) {
-            // create connection between queried <map-feature> and its parent <map-extent>
-            for (let feature of layer._mapmlFeatures) {
-              feature._extentEl = template._extentEl;
-            }
-            displayFeaturesPopup(layer._mapmlFeatures, e.latlng);
-          }
+          return layer._mapmlFeatures;
         })
         .catch((err) => {
           console.log('Looks like there was a problem. Status: ' + err.message);
@@ -247,10 +245,19 @@ export var QueryHandler = L.Handler.extend({
       }
 
       if (template.extentBounds.contains(pcrsClick)) {
-        let lastOne = i === templates.length - 1 ? true : false;
-        fetchFeatures(template, obj, lastOne);
+        fetches.push(fetchFeatures(template, obj));
       }
     }
+    Promise.allSettled(fetches).then(() => {
+      // create connection between queried <map-feature> and its parent <map-extent>
+      if (layer._mapmlFeatures) {
+        for (let feature of layer._mapmlFeatures) {
+          feature._extentEl = template._extentEl;
+        }
+        displayFeaturesPopup(layer._mapmlFeatures, e.latlng);
+      }
+    });
+
     function displayFeaturesPopup(features, loc) {
       if (features.length === 0) return;
       let f = M.featureLayer(features, {

diff --git a/test/e2e/layers/multipleHeterogeneousQueryExtents.test.js b/test/e2e/layers/multipleHeterogeneousQueryExtents.test.js
@@ -92,6 +92,8 @@ test.describe('Multiple Extent Queries with heterogeneous response content types
       (span) => span.innerText.toLowerCase()
     );
     expect(thirdExtentInLayerControl).toEqual('html query response');
+
+    await page.waitForTimeout(1000);
 
     await page.click('div');
     await page.waitForSelector(