Decrease calls to filter variants

package.json

@@ -1,6 +1,6 @@
 {
   "name": "liwo-static",
-  "version": "2.52.0",
+  "version": "3.2.1",
   "private": true,
   "scripts": {
     "serve": "vite",
@@ -58,4 +58,4 @@
     "vite": "^4.4.6",
     "vitest": "^0.34.6"
   }
-}
+}

src/lib/load-breach.js

@@ -146,13 +146,30 @@ export async function getScenarioInfo (scenarioIds, featureInfoByScenarioId) {
   return data
 }
 
+let filterVariantsPromise = null;
+
+async function loadFilterVariants() {
+  if(!filterVariantsPromise) {
+    const services = await mapConfig.getServices()
+    const FILTERS_BASE_URL = services.WEBSERVICE_URL_V2
+    const FILTERS_API_URL = `${FILTERS_BASE_URL}/filter_variants`
+
+    filterVariantsPromise = fetch(FILTERS_API_URL, {
+      method: 'GET',
+      mode: 'cors',
+      credentials: 'omit',
+      headers
+    }).then(res => res.json())
+  }
+
+  return filterVariantsPromise
+}
+
 async function loadBreachLayer (breachId, layerName) {
   // Load the dataset  for a breach
   const services = await mapConfig.getServices()
   const BREACHES_BASE_URL = services.WEBSERVICE_URL
-  const FILTERS_BASE_URL = services.WEBSERVICE_URL_V2
   const BREACHES_API_URL = `${BREACHES_BASE_URL}/Tools/FloodImage.asmx/GetScenariosPerBreachGeneric`
-  const FILTERS_API_URL = `${FILTERS_BASE_URL}/filter_variants`
 
   const breachFetch = await fetch(BREACHES_API_URL, {
     method: 'POST',
@@ -163,25 +180,17 @@ async function loadBreachLayer (breachId, layerName) {
       breachid: breachId,
       layername: layerName
     })
-  })
-
-  const filterFetch = await fetch(FILTERS_API_URL, {
-    method: 'GET',
-    mode: 'cors',
-    credentials: 'omit',
-    headers
-  })
+  }).then(res => res.json())
 
-  const [breachData, filtersData] = await Promise.all([breachFetch, filterFetch])
-    .then(responses => responses.map(response => response.json()))
+  const [breachData, filtersData] = await Promise.all([breachFetch, loadFilterVariants()])
 
   const properties = await filtersData
 
   if (properties.length) {
     store.commit('setVariantFilterProperties', { properties, breachId })
   }
 
-  const data = await breachData.then(data => JSON.parse(data.d))
+  const data = JSON.parse(breachData.d)
 
   // get the first layerset if available, otherwise return null
   let result = null

src/map.config.js

@@ -85,24 +85,22 @@ const tileLayers = [
   },
 ];
 
-var services = null;
+var servicePromise = null;
 
 async function getServices() {
   // return the content of webconfig.json
   // return if we already fetched it (memoize0
-  if (services) {
-    return services;
+  if (servicePromise) {
+    return servicePromise;
   }
 
   let url = 'config/webconfig.json'
   if (location.hostname.includes('netlify.app')) {
     url = 'config/webconfig-netlify.json'
   }
 
-  const resp = await fetch(url);
-  const result = await resp.json();
-  services = result;
-  return result;
+  servicePromise = fetch(url).then(res => res.json());
+  return servicePromise;
 }
 
 export default {