WV-3301 TEMPO Operations Loading Issues

web/js/map/granule/granule-layer-builder.js

@@ -2,7 +2,7 @@ import OlLayerGroup from 'ol/layer/Group';
 import { throttle as lodashThrottle } from 'lodash';
 import OlCollection from 'ol/Collection';
 import { DEFAULT_NUM_GRANULES } from '../../modules/layers/constants';
-import { updateGranuleLayerState, addGranuleDateRanges } from '../../modules/layers/actions';
+import { updateGranuleLayerState } from '../../modules/layers/actions';
 import { getGranuleLayer } from '../../modules/layers/selectors';
 import {
   startLoading,
@@ -21,7 +21,6 @@ import {
   datelineShiftGranules,
   transformGranulesForProj,
 } from './util';
-import { getLayerGranuleRanges } from '../util';
 import util from '../../util/util';
 
 const { toISOStringSeconds } = util;
@@ -153,7 +152,11 @@ export default function granuleLayerBuilder(cache, store, createLayerWMTS) {
    * @param {array} ranges - array of date ranges
    * @returns {boolean} - true if date is within a range
   */
-  const isWithinRanges = (date, ranges) => ranges.some(([start, end]) => date >= new Date(start) && date <= new Date(end));
+  const isWithinRanges = (date, ranges) => {
+    if (!ranges) return false;
+
+    return ranges.some(([start, end]) => date >= new Date(start) && date <= new Date(end));
+  };
 
   /**
    * Get granuleCount number of granules that have visible imagery based on
@@ -202,19 +205,10 @@ export default function granuleLayerBuilder(cache, store, createLayerWMTS) {
     const { granuleCount, date, group } = options;
     const { count: currentCount } = getGranuleLayer(state, def.id) || {};
     const count = currentCount || granuleCount || def.count || DEFAULT_NUM_GRANULES;
-    let granuleDateRanges = null;
+    const { granuleDateRanges } = def;
 
     // get granule dates waiting for CMR query and filtering (if necessary)
     const availableGranules = await getQueriedGranuleDates(def, date, group);
-    // if opted in to CMR availability, get granule date ranges if needed
-    if (def.cmrAvailability) {
-      if (!def.granuleDateRanges) {
-        granuleDateRanges = await getLayerGranuleRanges(def);
-        store.dispatch(addGranuleDateRanges(def, granuleDateRanges));
-      } else {
-        granuleDateRanges = def.granuleDateRanges;
-      }
-    }
     const visibleGranules = getVisibleGranules(availableGranules, count, date, granuleDateRanges);
     const transformedGranules = transformGranulesForProj(visibleGranules, crs);
 

web/js/map/layerbuilder.js

@@ -33,7 +33,6 @@ import {
   createVectorUrl,
   getGeographicResolutionWMS,
   mergeBreakpointLayerAttributes,
-  getLayerGranuleRanges,
 } from './util';
 import { addGranuleDateRanges } from '../modules/layers/actions';
 import { datesInDateRanges, prevDateInDateRange } from '../modules/layers/util';
@@ -1140,16 +1139,17 @@ export default function mapLayerBuilder(config, cache, store) {
     let { date } = dateOptions;
     let layer = cache.getItem(key);
     const isGranule = type === 'granule';
-    let granuleDateRanges = null;
-
     // if opted in to CMR availability, get granule date ranges if needed
-    if (cmrAvailability) {
-      if (!def.granuleDateRanges) {
-        granuleDateRanges = await getLayerGranuleRanges(def);
-        store.dispatch(addGranuleDateRanges(def, granuleDateRanges));
-      } else {
-        granuleDateRanges = def.granuleDateRanges;
-      }
+    if (cmrAvailability && !def.granuleDateRanges) {
+      const worker = new Worker('js/workers/cmr.worker.js');
+      worker.onmessage = (event) => {
+        worker.terminate();
+        store.dispatch(addGranuleDateRanges(def, event.data));
+      };
+      worker.onerror = () => {
+        worker.terminate();
+      };
+      worker.postMessage({ funcName: 'getLayerGranuleRanges', args: [def] });
     }
 
     if (!layer || isGranule || def.type === 'titiler') {

web/js/map/util.js

@@ -275,108 +275,24 @@ export function extractDateFromTileErrorURL(url) {
   return null;
 }
 
-/**
- * @method makeTime
- * @param {string} date
- * @returns {number} time
- * @description
- * Convert date to time
-*/
-function makeTime(date) {
-  return new Date(date).getTime();
-}
-
-/**
- * @method mergeSortedGranuleDateRanges
- * @param {array} granules
- * @returns {array} mergedGranuleDateRanges
- * @description
- * Merge overlapping granule date ranges
-*/
-function mergeSortedGranuleDateRanges(granules) {
-  return granules.reduce((acc, [start, end]) => {
-    if (!acc.length) return [[start, end]];
-    // round start time down and end time up by 1 minute to account for small range gaps
-    const startTime = makeTime(start) - 60000;
-    const endTime = makeTime(end) + 60000;
-    const lastRangeEndTime = makeTime(acc.at(-1)[1]);
-    const lastRangeStartTime = makeTime(acc.at(-1)[0]);
-    if ((startTime >= lastRangeStartTime && startTime <= lastRangeEndTime) && (endTime >= lastRangeStartTime && endTime <= lastRangeEndTime)) { // within current range, ignore
-      return acc;
-    }
-    if (startTime > lastRangeEndTime) { // discontinuous, add new range
-      return [...acc, [start, end]];
-    }
-    if (startTime <= lastRangeEndTime && endTime > lastRangeEndTime) { // intersects current range, merge
-      return acc.with(-1, [acc.at(-1)[0], end]);
-    }
-    return acc;
-  }, []);
-}
-
-/**
- * @method requestGranules
- * @param {object} params
- * @returns {array} granules
- * @description
- * Request granules from CMR
-*/
-async function requestGranules(params) {
-  const {
-    shortName,
-    extent,
-    startDate,
-    endDate,
-  } = params;
-  const granules = [];
-  let hits = Infinity;
-  let searchAfter = false;
-  const url = `https://cmr.earthdata.nasa.gov/search/granules.json?shortName=${shortName}&bounding_box=${extent.join(',')}&temporal=${startDate}/${endDate}&sort_key=start_date&pageSize=2000`;
-  /* eslint-disable no-await-in-loop */
-  do { // run the query at least once
-    const headers = searchAfter ? { 'Cmr-Search-After': searchAfter, 'Client-Id': 'Worldview' } : { 'Client-Id': 'Worldview' };
-    const res = await fetch(url, { headers });
-    searchAfter = res.headers.get('Cmr-Search-After');
-    hits = parseInt(res.headers.get('Cmr-Hits'), 10);
-    const data = await res.json();
-    granules.push(...data.feed.entry);
-  } while (searchAfter || hits > granules.length); // searchAfter will not be present if there are no more results https://cmr.earthdata.nasa.gov/search/site/docs/search/api.html#search-after
-
-  return granules;
-}
 /**
  * @method getLayerGranuleRanges
  * @param {object} layer
  * @returns {array} granuleDateRanges
  * @description
  * Get granule date ranges for a given layer
 */
-export async function getLayerGranuleRanges(layer) {
-  const extent = [-180, -90, 180, 90];
-  const startDate = new Date(layer.startDate).toISOString();
-  const endDate = layer.endDate ? new Date(layer.endDate).toISOString() : new Date().toISOString();
-  const shortName = layer.conceptIds?.[0]?.shortName;
-  const nrtParams = {
-    shortName,
-    extent,
-    startDate,
-    endDate,
-  };
-  const nrtGranules = await requestGranules(nrtParams);
-  let nonNRTGranules = [];
-  if (shortName.includes('_NRT')) { // if NRT, also get non-NRT granules
-    const nonNRTShortName = shortName.replace('_NRT', '');
-    const nonNRTParams = {
-      shortName: nonNRTShortName,
-      extent,
-      startDate,
-      endDate,
+export function getLayerGranuleRanges(layer) {
+  const worker = new Worker('js/workers/cmr.worker.js');
+  return new Promise((resolve, reject) => {
+    worker.onmessage = (event) => {
+      resolve(event.data);
+      worker.terminate();
     };
-    nonNRTGranules = await requestGranules(nonNRTParams);
-  }
-  const granules = [...nonNRTGranules, ...nrtGranules];
-  const granuleDateRanges = granules.map(({ time_start: timeStart, time_end: timeEnd }) => [timeStart, timeEnd]);
-  const mergedGranuleDateRanges = mergeSortedGranuleDateRanges(granuleDateRanges); // merge overlapping granule ranges to simplify rendering
-
-  return mergedGranuleDateRanges;
+    worker.onerror = (error) => {
+      reject(error);
+      worker.terminate();
+    };
+    worker.postMessage({ funcName: 'getLayerGranuleRanges', args: [layer] });
+  });
 }

web/js/mapUI/components/update-projection/updateProjection.js

@@ -369,6 +369,22 @@ function UpdateProjection(props) {
     reloadLayers(null, false);
   }, [renderedPalettes]);
 
+  const selectL2Layers = (layers) => layers
+    .filter((layer) => layer.id.includes('L2'))
+    .map((layer) => layer.granuleDateRanges);
+
+  const prevActiveLayers = usePrevious(activeLayers);
+
+  useEffect(() => {
+    if (!ui.selected) return;
+    const prevL2Layers = selectL2Layers(prevActiveLayers);
+    const activeL2Layers = selectL2Layers(activeLayers);
+    const needsReload = activeL2Layers.some((dateRange, i) => dateRange?.length !== prevL2Layers[i]?.length);
+    if (needsReload) {
+      reloadLayers(null, true);
+    }
+  }, [activeLayers]);
+
   return null;
 }
 

web/js/workers/cmr.worker.js

@@ -0,0 +1,118 @@
+/**
+ * @method makeTime
+ * @param {string} date
+ * @returns {number} time
+ * @description
+ * Convert date to time
+*/
+function makeTime(date) {
+  return new Date(date).getTime();
+}
+
+/**
+ * @method mergeSortedGranuleDateRanges
+ * @param {array} granules
+ * @returns {array} mergedGranuleDateRanges
+ * @description
+ * Merge overlapping granule date ranges
+*/
+function mergeSortedGranuleDateRanges(granules) {
+  return granules.reduce((acc, [start, end]) => {
+    if (!acc.length) return [[start, end]];
+    // round start time down and end time up by 1 minute to account for small range gaps
+    const startTime = makeTime(start) - 60000;
+    const endTime = makeTime(end) + 60000;
+    const lastRangeEndTime = makeTime(acc.at(-1)[1]);
+    const lastRangeStartTime = makeTime(acc.at(-1)[0]);
+    if ((startTime >= lastRangeStartTime && startTime <= lastRangeEndTime) && (endTime >= lastRangeStartTime && endTime <= lastRangeEndTime)) { // within current range, ignore
+      return acc;
+    }
+    if (startTime > lastRangeEndTime) { // discontinuous, add new range
+      return [...acc, [start, end]];
+    }
+    if (startTime <= lastRangeEndTime && endTime > lastRangeEndTime) { // intersects current range, merge
+      return acc.with(-1, [acc.at(-1)[0], end]);
+    }
+    return acc;
+  }, []);
+}
+
+
+/**
+ * @method requestGranules
+ * @param {object} params
+ * @returns {array} granules
+ * @description
+ * Request granules from CMR
+*/
+async function requestGranules(params) {
+  const {
+    shortName,
+    extent,
+    startDate,
+    endDate,
+  } = params;
+  const granules = [];
+  let hits = Infinity;
+  let searchAfter = false;
+  const url = `https://cmr.earthdata.nasa.gov/search/granules.json?shortName=${shortName}&bounding_box=${extent.join(',')}&temporal=${startDate}/${endDate}&sort_key=start_date&pageSize=2000`;
+  /* eslint-disable no-await-in-loop */
+  do { // run the query at least once
+    const headers = searchAfter ? { 'Cmr-Search-After': searchAfter, 'Client-Id': 'Worldview' } : { 'Client-Id': 'Worldview' };
+    const res = await fetch(url, { headers });
+    searchAfter = res.headers.get('Cmr-Search-After');
+    hits = parseInt(res.headers.get('Cmr-Hits'), 10);
+    const data = await res.json();
+    granules.push(...data.feed.entry);
+  } while (searchAfter || hits > granules.length); // searchAfter will not be present if there are no more results https://cmr.earthdata.nasa.gov/search/site/docs/search/api.html#search-after
+
+  return granules;
+}
+
+/**
+ * @method getLayerGranuleRanges
+ * @param {object} layer
+ * @returns {array} granuleDateRanges
+ * @description
+ * Get granule date ranges for a given layer
+*/
+async function getLayerGranuleRanges(layer) {
+  const extent = [-180, -90, 180, 90];
+  const startDate = new Date(layer.startDate).toISOString();
+  const endDate = layer.endDate ? new Date(layer.endDate).toISOString() : new Date().toISOString();
+  const shortName = layer.conceptIds?.[0]?.shortName;
+  const nrtParams = {
+    shortName,
+    extent,
+    startDate,
+    endDate,
+  };
+  const nrtGranules = await requestGranules(nrtParams);
+  let nonNRTGranules = [];
+  if (shortName.includes('_NRT')) { // if NRT, also get non-NRT granules
+    const nonNRTShortName = shortName.replace('_NRT', '');
+    const nonNRTParams = {
+      shortName: nonNRTShortName,
+      extent,
+      startDate,
+      endDate,
+    };
+    nonNRTGranules = await requestGranules(nonNRTParams);
+  }
+  const granules = [...nonNRTGranules, ...nrtGranules];
+  const granuleDateRanges = granules.map(({ time_start: timeStart, time_end: timeEnd }) => [timeStart, timeEnd]);
+  const mergedGranuleDateRanges = mergeSortedGranuleDateRanges(granuleDateRanges); // merge overlapping granule ranges to simplify rendering
+
+  return mergedGranuleDateRanges;
+}
+
+
+const functions = {
+  getLayerGranuleRanges,
+};
+
+onmessage = async (event) => {
+  const { data } = event;
+  const result = await functions[data.funcName]?.(...data.args);
+  postMessage(result);
+};