Feat/use titiler cmr (#1131)

**Related Ticket:** #1056 ### Description of Changes This change was actually relatively straightforward. Titiler-cmr handles the business of searching CMR for which assets to tile, which means that logic no longer needs to exist in veda-ui. We can just pass the concept id and other parameters directly to titiler-cmr. The asset discovery logic _was_ happening in the useCmr hook which searched [CMR STAC endpoints](https://cmr.earthdata.nasa.gov/stac) (endpoints plural because there are different catalogues for different DAACs) for data. This was especially messy given the S3 urls are not in the CMR STAC item representations, so we had to replace an https protocol and host with the S3 protocol and bucket name. Itemized changes: * Remove useCmr hook * Change parameterization to RasterPaintLayer to make the url optional: titiler-xarray requires a url parameter, whereas titiler-cmr does not. * Removed TRMM layer as this dataset is not yet in VEDA STAC (necessary to be included in the dashboard) ### Notes * dev-titiler-xarray.delta-backend.com uses `datetime` which is consistent with titiler-cmr, however this change has not yet been deployed to prod-titiler-xarray.delta-backend.com. ### Validation / Testing [Loaded and toggled both layers in the deploy preview](https://deploy-preview-1131--veda-ui.netlify.app/exploration?datasets=%5B%7B%22id%22%3A%22GPM_3IMERGDF.v07%22%2C%22settings%22%3A%7B%22isVisible%22%3Afalse%2C%22opacity%22%3A100%2C%22analysisMetrics%22%3A%5B%7B%22id%22%3A%22mean%22%2C%22label%22%3A%22Average%22%2C%22chartLabel%22%3A%22Average%22%2C%22themeColor%22%3A%22infographicB%22%7D%2C%7B%22id%22%3A%22std%22%2C%22label%22%3A%22St+Deviation%22%2C%22chartLabel%22%3A%22St+Deviation%22%2C%22themeColor%22%3A%22infographicD%22%7D%5D%7D%7D%2C%7B%22id%22%3A%22combined_CMIP6_daily_GISS-E2-1-G_tas_kerchunk_DEMO%22%2C%22settings%22%3A%7B%22isVisible%22%3Atrue%2C%22opacity%22%3A100%2C%22analysisMetrics%22%3A%5B%7B%22id%22%3A%22mean%22%2C%22label%22%3A%22Average%22%2C%22chartLabel%22%3A%22Average%22%2C%22themeColor%22%3A%22infographicB%22%7D%2C%7B%22id%22%3A%22std%22%2C%22label%22%3A%22St+Deviation%22%2C%22chartLabel%22%3A%22St+Deviation%22%2C%22themeColor%22%3A%22infographicD%22%7D%5D%7D%7D%5D&taxonomy=%7B%7D&search=&date=2006-12-22T08%3A00%3A00.000Z)
NASA-IMPACT · Sep 12, 2024 · fe91ed7 · fe91ed7
2 parents 54f476b + 7d884b6
commit fe91ed7
Show file tree

Hide file tree

Showing 8 changed files with 114 additions and 175 deletions.
diff --git a/app/scripts/components/common/map/style-generators/cmr-timeseries.tsx b/app/scripts/components/common/map/style-generators/cmr-timeseries.tsx
@@ -1,19 +1,10 @@
 import React from 'react';
-import { CMRTimeseriesProps } from '../types';
-import { RasterPaintLayer } from './raster-paint-layer';
-import { useCMR } from './hooks';
 
-export function CMRTimeseries(props: CMRTimeseriesProps) {
-  const {
-    id,
-    stacCol,
-    stacApiEndpoint,
-    date,
-    assetUrlReplacements,
-    onStatusChange,
-  } = props;
+import { BaseTimeseriesProps } from '../types';
+import { RasterPaintLayer } from './raster-paint-layer';
 
-  const stacApiEndpointToUse = stacApiEndpoint?? process.env.API_STAC_ENDPOINT;
-  const assetUrl = useCMR({ id, stacCol, stacApiEndpointToUse, date, assetUrlReplacements, stacApiEndpoint, onStatusChange });
-  return <RasterPaintLayer {...props} assetUrl={assetUrl} />;
-}
+export function CMRTimeseries(props: BaseTimeseriesProps) {
+  const { date, sourceParams } = props;
+  const tileParams = { datetime: date, ...sourceParams };
+  return <RasterPaintLayer {...props} tileParams={tileParams} generatorPrefix='cmr-timeseries' />;
+}
diff --git a/app/scripts/components/common/map/style-generators/raster-paint-layer.tsx b/app/scripts/components/common/map/style-generators/raster-paint-layer.tsx
@@ -8,58 +8,50 @@ import useGeneratorParams from '../hooks/use-generator-params';
 
 interface RasterPaintLayerProps extends BaseGeneratorParams {
   id: string;
-  date?: Date;
-  sourceParams?: Record<string, any>;
   tileApiEndpoint?: string;
   zoomExtent?: number[];
-  assetUrl: string;
   colorMap?: string | undefined;
+  tileParams: Record<string, any>;
+  generatorPrefix?: string;
 }
 
 export function RasterPaintLayer(props: RasterPaintLayerProps) {
   const {
     id,
     tileApiEndpoint,
-    date,
-    sourceParams,
+    tileParams,
     zoomExtent,
-    assetUrl,
     hidden,
     opacity,
-    colorMap
+    colorMap,
+    generatorPrefix = 'raster',
   } = props;
 
   const { updateStyle } = useMapStyle();
   const [minZoom] = zoomExtent ?? [0, 20];
-  const generatorId = `zarr-timeseries-${id}`;
+  const generatorId = `${generatorPrefix}-${id}`;
 
-  const updatedSourceParams = useMemo(() => {
-    return { ...sourceParams, ...colorMap &&  {colormap_name: colorMap}};
-  }, [sourceParams, colorMap]);
+  const updatedTileParams = useMemo(() => {
+    return { ...tileParams, ...colorMap &&  {colormap_name: colorMap}};
+  }, [tileParams, colorMap]);
 
   //
   // Generate Mapbox GL layers and sources for raster timeseries
   //
-  const haveSourceParamsChanged = useMemo(
-    () => JSON.stringify(updatedSourceParams),
-    [updatedSourceParams]
+  const haveTileParamsChanged = useMemo(
+    () => JSON.stringify(updatedTileParams),
+    [updatedTileParams]
   );
 
   const generatorParams = useGeneratorParams(props);
 
   useEffect(
     () => {
-      if (!assetUrl) return;
-
-      const tileParams = qs.stringify({
-        url: assetUrl,
-        time_slice: date,
-        ...updatedSourceParams,
-      });
+      const tileParamsAsString = qs.stringify(updatedTileParams, { arrayFormat: 'comma' });
 
       const zarrSource: RasterSource = {
         type: 'raster',
-        url: `${tileApiEndpoint}?${tileParams}`
+        url: `${tileApiEndpoint}?${tileParamsAsString}`
       };
 
       const rasterOpacity = typeof opacity === 'number' ? opacity / 100 : 1;
@@ -76,8 +68,7 @@ export function RasterPaintLayer(props: RasterPaintLayerProps) {
         },
         minzoom: minZoom,
         metadata: {
-          layerOrderPosition: 'raster',
-          colorMapVersion: colorMap,
+          layerOrderPosition: 'raster'
         }
       };
 
@@ -98,11 +89,9 @@ export function RasterPaintLayer(props: RasterPaintLayerProps) {
     [
       updateStyle,
       id,
-      date,
-      assetUrl,
       minZoom,
       tileApiEndpoint,
-      haveSourceParamsChanged,
+      haveTileParamsChanged,
       generatorParams,
       colorMap
       // generatorParams includes hidden and opacity

diff --git a/app/scripts/components/common/map/style-generators/zarr-timeseries.tsx b/app/scripts/components/common/map/style-generators/zarr-timeseries.tsx
@@ -11,9 +11,15 @@ export function ZarrTimeseries(props: BaseTimeseriesProps) {
     stacApiEndpoint,
     date,
     onStatusChange,
+    sourceParams,
   } = props;
 
   const stacApiEndpointToUse = stacApiEndpoint?? process.env.API_STAC_ENDPOINT;
   const assetUrl = useZarr({id, stacCol, stacApiEndpointToUse, date, onStatusChange});
-  return <RasterPaintLayer {...props} assetUrl={assetUrl} />;
-}
+  const tileParams = {
+    url: assetUrl,
+    datetime: date,
+    ...sourceParams,
+  };
+  return <RasterPaintLayer {...props} tileParams={tileParams} generatorPrefix='zarr-timeseries' />;
+}
diff --git a/app/scripts/components/exploration/components/map/layer.tsx b/app/scripts/components/exploration/components/map/layer.tsx
@@ -79,9 +79,7 @@ export function Layer(props: LayerProps) {
         <CMRTimeseries
           id={layerId}
           stacCol={dataset.data.stacCol}
-          stacApiEndpoint={dataset.data.stacApiEndpoint}
           tileApiEndpoint={dataset.data.tileApiEndpoint}
-          assetUrlReplacements={dataset.data.assetUrlReplacements}
           date={relevantDate}
           zoomExtent={params.zoomExtent}
           sourceParams={params.sourceParams}

diff --git a/mock/datasets/GPM_3IMERGDF.data.mdx b/mock/datasets/GPM_3IMERGDF.data.mdx
@@ -1,45 +1,59 @@
 ---
 id: GPM_3IMERGDF.v07
 name: 'GPM IMERG Daily Precipitation'
-description: "GPM IMERG Final Precipitation L3 1 day 0.1 degree x 0.1 degree"
+description: 'GPM IMERG Final Precipitation L3 1 day 0.1 degree x 0.1 degree'
 media:
   src: ::file ./gpmimergdaily.png
   alt: CMIP6 Near-Surface Air Temperature Screenshot
   author:
     name: NASA
-    url:   
+    url:
 taxonomy:
   - name: Topics
     values:
       - Climate
 layers:
   - id: GPM_3IMERGDF.v07
     type: cmr
-    stacApiEndpoint: 'https://cmr.earthdata.nasa.gov/cloudstac/GES_DISC'
-    tileApiEndpoint: 'https://prod-titiler-xarray.delta-backend.com/tilejson.json'
-    stacCol: GPM_3IMERGDF.v07
-    assetUrlReplacements:
-      from: https://data.gesdisc.earthdata.nasa.gov/data
-      to: s3://gesdisc-cumulus-prod-protected
+    stacCol: GPM_3IMERGDF
+    tileApiEndpoint: 'https://dev-titiler-cmr.delta-backend.com/WebMercatorQuad/tilejson.json'
     name: GPM IMERG Final Precipitation L3 1 day 0.1 degree x 0.1 degree
-    description: "GPM Level 3 IMERG Final Daily 10 x 10 km (GPM_3IMERGDF) accumulated precipitation"
+    description: 'GPM Level 3 IMERG Final Daily 10 x 10 km (GPM_3IMERGDF) accumulated precipitation'
     time_density: day
     zoomExtent:
       - 0
       - 20
     sourceParams:
-      resampling_method: bilinear
+      resampling: bilinear
       variable: precipitation
       colormap_name: gnbu
-      rescale: 0,46
+      rescale:
+       - 0
+       - 46
       maxzoom: 12
+      concept_id: C2723754864-GES_DISC
+      backend: xarray
     legend:
-      unit: 
-        label: 
+      unit:
+        label:
       type: gradient
-      min: "0 mm/hr"
-      max: "46 mm/hr"
-      stops: ['#f7fcf0', '#e6f5e1', '#d7efd1', '#c5e8c2', '#abdeb6', '#8bd2bf', '#6bc3c9', '#4bafd1', '#3193c2', '#1878b4', '#085da0', '#084081']
+      min: '0 mm/hr'
+      max: '46 mm/hr'
+      stops:
+        [
+          '#f7fcf0',
+          '#e6f5e1',
+          '#d7efd1',
+          '#c5e8c2',
+          '#abdeb6',
+          '#8bd2bf',
+          '#6bc3c9',
+          '#4bafd1',
+          '#3193c2',
+          '#1878b4',
+          '#085da0',
+          '#084081'
+        ]
 ---
 
 <Block>
@@ -48,7 +62,7 @@ layers:
 
 ## Dataset Description
 
-This dataset is the GPM Level 3 IMERG *Final* Daily 10 x 10 km (GPM_3IMERGDF) derived from the half-hourly GPM_3IMERGHH. The derived result represents the Final estimate of the daily mean precipitation rate in mm/day. The dataset is produced by first computing the mean precipitation rate in (mm/hour) in every grid cell, and then multiplying the result by 24.
+This dataset is the GPM Level 3 IMERG _Final_ Daily 10 x 10 km (GPM_3IMERGDF) derived from the half-hourly GPM_3IMERGHH. The derived result represents the Final estimate of the daily mean precipitation rate in mm/day. The dataset is produced by first computing the mean precipitation rate in (mm/hour) in every grid cell, and then multiplying the result by 24.
 
 Source: [https://disc.gsfc.nasa.gov/datasets/GPM_3IMERGDF_07/summary](https://disc.gsfc.nasa.gov/datasets/GPM_3IMERGDF_07/summary)
 

diff --git a/mock/datasets/TRMM_3B42_Daily.data.mdx b/mock/datasets/TRMM_3B42_Daily.data.mdx