[E & A] Implement colormap configurability

app/scripts/components/common/map/layer-legend.tsx

@@ -25,6 +25,7 @@ import {
   WidgetItemHGroup
 } from '$styles/panel';
 import { LayerLegendCategorical, LayerLegendGradient } from '$types/veda';
+import { divergingColorMaps, sequentialColorMaps } from '$components/exploration/components/datasets/colorMaps';
 
 interface LayerLegendCommonProps {
   id: string;
@@ -300,18 +301,22 @@ export function LayerCategoricalGraphic(props: LayerLegendCategorical) {
   );
 }
 
-export function LayerGradientGraphic(props: LayerLegendGradient) {
+export const LayerGradientGraphic = (props: LayerLegendGradient) => {
   const { stops, min, max, unit } = props;
-
   const [hoverVal, setHoverVal] = useState(0);
 
   const moveListener = useCallback(
     (e) => {
-      const width = e.nativeEvent.target.clientWidth;
+      const target = e.nativeEvent.target;
+      const boundingRect = target.getBoundingClientRect();
+      const offsetX = e.nativeEvent.clientX - boundingRect.left;
+      const width = boundingRect.width;
+
       const scale = scaleLinear()
         .domain([0, width])
         .range([Number(min), Number(max)]);
-      setHoverVal(scale(e.nativeEvent.layerX));
+
+      setHoverVal(Math.max(Number(min), Math.min(Number(max), scale(offsetX))));
     },
     [min, max]
   );
@@ -340,4 +345,40 @@ export function LayerGradientGraphic(props: LayerLegendGradient) {
       {unit?.label && <dd className='unit'>{unit.label}</dd>}
     </LegendList>
   );
-}
+};
+
+export const LayerGradientColormapGraphic = (props: Omit<LayerLegendGradient, 'stops' | 'type'>) => {
+  const { colorMap, ...otherProps } = props;
+
+  const colormap = findColormapByName(colorMap ?? 'viridis');
+  if (!colormap) {
+    return null;
+  }
+
+  const stops = Object.values(colormap).map((value) => {
+    if (Array.isArray(value) && value.length === 4) {
+      return `rgba(${value.join(',')})`;
+    } else {
+      return `rgba(0, 0, 0, 1)`;
+    }
+  });
+
+  const processedStops = colormap.isReversed
+  ? stops.reduceRight((acc, stop) => [...acc, stop], [])
+  : stops;
+
+  return <LayerGradientGraphic type='gradient' stops={processedStops} {...otherProps} />;
+};
+
+export const findColormapByName = (name: string) => {
+  const isReversed = name.toLowerCase().endsWith('_r');
+  const baseName = isReversed ? name.slice(0, -2).toLowerCase() : name.toLowerCase();
+
+  const colormap = sequentialColorMaps[baseName] ?? divergingColorMaps[baseName];
+
+  if (!colormap) {
+    return null;
+  }
+
+  return { ...colormap, isReversed };
+};

app/scripts/components/common/map/style-generators/raster-paint-layer.tsx

@@ -13,6 +13,7 @@ interface RasterPaintLayerProps extends BaseGeneratorParams {
   tileApiEndpoint?: string;
   zoomExtent?: number[];
   assetUrl: string;
+  colorMap?: string | undefined;
 }
 
 export function RasterPaintLayer(props: RasterPaintLayerProps) {
@@ -24,19 +25,24 @@ export function RasterPaintLayer(props: RasterPaintLayerProps) {
     zoomExtent,
     assetUrl,
     hidden,
-    opacity
+    opacity,
+    colorMap
   } = props;
 
   const { updateStyle } = useMapStyle();
   const [minZoom] = zoomExtent ?? [0, 20];
   const generatorId = `zarr-timeseries-${id}`;
 
+  const updatedSourceParams = useMemo(() => {
+    return { ...sourceParams, ...colorMap &&  {colormap_name: colorMap}};
+  }, [sourceParams, colorMap]);
+
   //
   // Generate Mapbox GL layers and sources for raster timeseries
   //
   const haveSourceParamsChanged = useMemo(
-    () => JSON.stringify(sourceParams),
-    [sourceParams]
+    () => JSON.stringify(updatedSourceParams),
+    [updatedSourceParams]
   );
 
   const generatorParams = useGeneratorParams(props);
@@ -48,7 +54,7 @@ export function RasterPaintLayer(props: RasterPaintLayerProps) {
       const tileParams = qs.stringify({
         url: assetUrl,
         time_slice: date,
-        ...sourceParams
+        ...updatedSourceParams,
       });
 
       const zarrSource: RasterSource = {
@@ -65,12 +71,13 @@ export function RasterPaintLayer(props: RasterPaintLayerProps) {
         paint: {
           'raster-opacity': hidden ? 0 : rasterOpacity,
           'raster-opacity-transition': {
-            duration: 320
-          }
+            duration: 320,
+          },
         },
         minzoom: minZoom,
         metadata: {
-          layerOrderPosition: 'raster'
+          layerOrderPosition: 'raster',
+          colorMapVersion: colorMap,
         }
       };
 
@@ -96,7 +103,8 @@ export function RasterPaintLayer(props: RasterPaintLayerProps) {
       minZoom,
       tileApiEndpoint,
       haveSourceParamsChanged,
-      generatorParams
+      generatorParams,
+      colorMap
       // generatorParams includes hidden and opacity
       // hidden,
       // opacity,
@@ -119,4 +127,4 @@ export function RasterPaintLayer(props: RasterPaintLayerProps) {
   }, [updateStyle, generatorId]);
 
   return null;
-}
+}

app/scripts/components/common/map/style-generators/raster-timeseries.tsx

@@ -61,7 +61,8 @@ export function RasterTimeseries(props: RasterTimeseriesProps) {
     hidden,
     opacity,
     stacApiEndpoint,
-    tileApiEndpoint
+    tileApiEndpoint,
+    colorMap,
   } = props;
 
   const { current: mapInstance } = useMaps();
@@ -259,7 +260,7 @@ export function RasterTimeseries(props: RasterTimeseriesProps) {
         LOG && console.log('Payload', payload);
         LOG && console.groupEnd();
         /* eslint-enable no-console */
-        
+
         let responseData;
 
         try {
@@ -271,19 +272,19 @@ export function RasterTimeseries(props: RasterTimeseriesProps) {
           const mosaicUrl = responseData.links[1].href;
           setMosaicUrl(mosaicUrl.replace('/{tileMatrixSetId}', '/WebMercatorQuad'));
         } catch (error) {
-          // @NOTE: conditional logic TO BE REMOVED once new BE endpoints have moved to prod... Fallback on old request url if new endpoints error with nonexistance... 
+          // @NOTE: conditional logic TO BE REMOVED once new BE endpoints have moved to prod... Fallback on old request url if new endpoints error with nonexistance...
           if (error.request) {
             // The request was made but no response was received
             responseData = await requestQuickCache<any>({
               url: `${tileApiEndpointToUse}/mosaic/register`, // @NOTE: This will fail anyways with "staging-raster.delta-backend.com" because its already deprecated...
               payload,
               controller
             });
-      
+
             const mosaicUrl = responseData.links[1].href;
             setMosaicUrl(mosaicUrl);
           } else {
-              LOG && 
+              LOG &&
               /* eslint-disable-next-line no-console */
               console.log('Titiler /register %cEndpoint error', 'color: red;', error);
               throw error;
@@ -321,6 +322,7 @@ export function RasterTimeseries(props: RasterTimeseriesProps) {
       changeStatus({ status: 'idle', context: STATUS_KEY.Layer });
     };
   }, [
+    colorMap,
     stacCollection
     // This hook depends on a series of properties, but whenever they change the
     // `stacCollection` is guaranteed to change because a new STAC request is
@@ -358,7 +360,8 @@ export function RasterTimeseries(props: RasterTimeseriesProps) {
         const tileParams = qs.stringify(
           {
             assets: 'cog_default',
-            ...(sourceParams ?? {})
+            ...(sourceParams ?? {}),
+            ...colorMap &&  {colormap_name: colorMap}
           },
           // Temporary solution to pass different tile parameters for hls data
           {
@@ -485,6 +488,7 @@ export function RasterTimeseries(props: RasterTimeseriesProps) {
     };
   }, [
     mosaicUrl,
+    colorMap,
     points,
     minZoom,
     haveSourceParamsChanged,

app/scripts/components/common/map/types.d.ts

@@ -53,6 +53,7 @@ export interface BaseTimeseriesProps extends BaseGeneratorParams {
   tileApiEndpoint?: string;
   zoomExtent?: number[];
   onStatusChange?: (result: { status: ActionStatus; id: string }) => void;
+  colorMap?: string;
 }
 
 // export interface ZarrTimeseriesProps extends BaseTimeseriesProps {
@@ -72,4 +73,3 @@ interface AssetUrlReplacement {
 export interface CMRTimeseriesProps extends BaseTimeseriesProps {
   assetUrlReplacements?: AssetUrlReplacement;
 }
-

app/scripts/components/exploration/atoms/datasets.ts

@@ -1,4 +1,5 @@
-import { datasetLayers, reconcileDatasets } from '../data-utils';
+import { datasetLayers } from '../data-utils';
+import { reconcileDatasets } from '../data-utils-no-faux-module';
 import { TimelineDataset, TimelineDatasetForUrl } from '../types.d.ts';
 import { atomWithUrlValueStability } from '$utils/params-location-atom/atom-with-url-value-stability';
 

app/scripts/components/exploration/atoms/hooks.ts

@@ -145,6 +145,18 @@ export function useTimelineDatasetVisibility(
   return useAtom(visibilityAtom);
 }
 
+export function useTimelineDatasetColormap(
+  datasetAtom: PrimitiveAtom<TimelineDataset>
+) {
+  const colorMapAtom = useMemo(() => {
+    return focusAtom(datasetAtom, (optic) =>
+      optic.prop('settings').prop('colorMap')
+    );
+  }, [datasetAtom]);
+
+  return useAtom(colorMapAtom);
+}
+
 export const useTimelineDatasetAnalysis = (
   datasetAtom: PrimitiveAtom<TimelineDataset>
 ) => {

app/scripts/components/exploration/atoms/rescale.ts

@@ -0,0 +1,11 @@
+import { atomWithUrlValueStability } from '$utils/params-location-atom/atom-with-url-value-stability';
+
+const initialParams = new URLSearchParams(window.location.search);
+
+export const reverseAtom = atomWithUrlValueStability<boolean>({
+  initialValue: initialParams.get('reverse') === 'true',
+  urlParam: 'reverse',
+  hydrate: (value) => value === 'true',
+  areEqual: (prev, next) => prev === next,
+  dehydrate: (value) => (value ? 'true' : 'false')
+});

app/scripts/components/exploration/components/dataset-selector-modal/index.tsx

@@ -14,10 +14,10 @@ import { glsp, themeVal } from '@devseed-ui/theme-provider';
 import { Link } from 'react-router-dom';
 import { timelineDatasetsAtom } from '../../atoms/datasets';
 import {
-  reconcileDatasets,
-  datasetLayers,
-  allExploreDatasets
-} from '../../data-utils';
+  reconcileDatasets
+} from '../../data-utils-no-faux-module';
+import {   datasetLayers,
+  allExploreDatasets} from '../../data-utils';
 import RenderModalHeader from './header';
 
 import ModalFooterRender from './footer';