Revert "Color maps range slider implementation (#1190)"

This reverts commit 233a31c, reversing
changes made to 46e1c5d.

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

@@ -13,7 +13,6 @@ interface RasterPaintLayerProps extends BaseGeneratorParams {
   colorMap?: string | undefined;
   tileParams: Record<string, any>;
   generatorPrefix?: string;
-  reScale?: { min: number; max: number };
 }
 
 export function RasterPaintLayer(props: RasterPaintLayerProps) {
@@ -25,23 +24,16 @@ export function RasterPaintLayer(props: RasterPaintLayerProps) {
     hidden,
     opacity,
     colorMap,
-    reScale,
-    generatorPrefix = 'raster'
+    generatorPrefix = 'raster',
   } = props;
 
   const { updateStyle } = useMapStyle();
   const [minZoom] = zoomExtent ?? [0, 20];
   const generatorId = `${generatorPrefix}-${id}`;
 
   const updatedTileParams = useMemo(() => {
-    return {
-      ...tileParams,
-      ...(colorMap && {
-        colormap_name: colorMap
-      }),
-      ...(reScale && { rescale: Object.values(reScale) })
-    };
-  }, [tileParams, colorMap, reScale]);
+    return { ...tileParams, ...colorMap &&  {colormap_name: colorMap}};
+  }, [tileParams, colorMap]);
 
   //
   // Generate Mapbox GL layers and sources for raster timeseries
@@ -55,9 +47,7 @@ export function RasterPaintLayer(props: RasterPaintLayerProps) {
 
   useEffect(
     () => {
-      const tileParamsAsString = qs.stringify(updatedTileParams, {
-        arrayFormat: 'comma'
-      });
+      const tileParamsAsString = qs.stringify(updatedTileParams, { arrayFormat: 'comma' });
 
       const zarrSource: RasterSource = {
         type: 'raster',
@@ -73,8 +63,8 @@ export function RasterPaintLayer(props: RasterPaintLayerProps) {
         paint: {
           'raster-opacity': hidden ? 0 : rasterOpacity,
           'raster-opacity-transition': {
-            duration: 320
-          }
+            duration: 320,
+          },
         },
         minzoom: minZoom,
         metadata: {
@@ -103,8 +93,7 @@ export function RasterPaintLayer(props: RasterPaintLayerProps) {
       tileApiEndpoint,
       haveTileParamsChanged,
       generatorParams,
-      colorMap,
-      reScale
+      colorMap
       // generatorParams includes hidden and opacity
       // hidden,
       // opacity,

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

@@ -63,10 +63,10 @@ export function RasterTimeseries(props: RasterTimeseriesProps) {
     stacApiEndpoint,
     tileApiEndpoint,
     colorMap,
-    reScale
   } = props;
 
   const { current: mapInstance } = useMaps();
+
   const theme = useTheme();
   const { updateStyle } = useMapStyle();
 
@@ -270,9 +270,7 @@ export function RasterTimeseries(props: RasterTimeseriesProps) {
             controller
           });
           const mosaicUrl = responseData.links[1].href;
-          setMosaicUrl(
-            mosaicUrl.replace('/{tileMatrixSetId}', '/WebMercatorQuad')
-          );
+          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...
           if (error.request) {
@@ -286,14 +284,10 @@ export function RasterTimeseries(props: RasterTimeseriesProps) {
             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;
+              console.log('Titiler /register %cEndpoint error', 'color: red;', error);
+              throw error;
           }
         }
 
@@ -367,8 +361,7 @@ export function RasterTimeseries(props: RasterTimeseriesProps) {
           {
             assets: 'cog_default',
             ...(sourceParams ?? {}),
-            ...(colorMap && { colormap_name: colorMap }),
-            ...(reScale && {rescale: Object.values(reScale)})
+            ...colorMap &&  {colormap_name: colorMap}
           },
           // Temporary solution to pass different tile parameters for hls data
           {
@@ -496,7 +489,6 @@ export function RasterTimeseries(props: RasterTimeseriesProps) {
   }, [
     mosaicUrl,
     colorMap,
-    reScale,
     points,
     minZoom,
     haveSourceParamsChanged,

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

@@ -54,7 +54,6 @@ export interface BaseTimeseriesProps extends BaseGeneratorParams {
   zoomExtent?: number[];
   onStatusChange?: (result: { status: ActionStatus; id: string }) => void;
   colorMap?: string;
-  reScale?: { min: number; max: number };
 }
 
 // export interface ZarrTimeseriesProps extends BaseTimeseriesProps {

app/scripts/components/common/uswds/index.tsx

@@ -2,5 +2,3 @@ export { USWDSAlert } from './alert';
 export { USWDSButtonGroup, USWDSButton } from './button';
 export { USWDSLink } from './link';
 export { USWDSBanner, USWDSBannerContent } from './banner';
-
-export { USWDSTextInput, USWDSTextInputMask } from './input';

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

@@ -157,17 +157,6 @@ export function useTimelineDatasetColormap(
   return useAtom(colorMapAtom);
 }
 
-export function useTimelineDatasetColormapScale(
-  datasetAtom: PrimitiveAtom<TimelineDataset>
-) {
-  const colorMapScaleAtom = useMemo(() => {
-    return focusAtom(datasetAtom, (optic) =>
-      optic.prop('settings').prop('scale')
-    );
-  }, [datasetAtom]);
-
-  return useAtom(colorMapScaleAtom);
-}
 export const useTimelineDatasetAnalysis = (
   datasetAtom: PrimitiveAtom<TimelineDataset>
 ) => {

app/scripts/components/exploration/components/datasets/colormap-options.tsx

@@ -1,40 +1,23 @@
 import React, { useEffect, useState } from 'react';
-import { Icon } from '@trussworks/react-uswds';
+import { Icon } from "@trussworks/react-uswds";
 import { CollecticonDrop } from '@devseed-ui/collecticons';
-
-import {
-  sequentialColorMaps,
-  divergingColorMaps,
-  restColorMaps
-} from './colorMaps';
+import { sequentialColorMaps, divergingColorMaps, restColorMaps } from './colorMaps';
 
 import './colormap-options.scss';
-import { ColorRangeSlider } from './colorRangeSlider';
-import { colorMapScale } from '$components/exploration/types.d.ts';
 
 export const DEFAULT_COLORMAP = 'viridis';
 
 const CURATED_SEQUENTIAL_COLORMAPS = [
-  'viridis',
-  'plasma',
-  'inferno',
-  'magma',
-  'cividis',
-  'purples',
-  'blues',
-  'reds',
-  'greens',
-  'oranges',
-  'ylgnbu',
-  'ylgn',
-  'gnbu'
+  'viridis', 'plasma', 'inferno', 'magma', 'cividis',
+  'purples', 'blues', 'reds', 'greens', 'oranges',
+  'ylgnbu', 'ylgn', 'gnbu'
 ];
 
-const CURATED_DIVERGING_COLORMAPS = ['rdbu', 'rdylbu', 'bwr', 'coolwarm'];
+const CURATED_DIVERGING_COLORMAPS = [
+  'rdbu', 'rdylbu', 'bwr', 'coolwarm'
+];
 
-export const classifyColormap = (
-  colormapName: string
-): 'sequential' | 'diverging' | 'rest' | 'unknown' => {
+export const classifyColormap = (colormapName: string): 'sequential' | 'diverging' | 'rest' | 'unknown' => {
   const baseName = normalizeColorMap(colormapName);
 
   if (sequentialColorMaps[baseName]) {
@@ -50,16 +33,9 @@ export const classifyColormap = (
 interface ColormapOptionsProps {
   colorMap: string | undefined;
   setColorMap: (colorMap: string) => void;
-  min: number;
-  max: number;
-  setColorMapScale: (colorMapScale: colorMapScale) => void;
-  colorMapScale: colorMapScale | undefined;
 }
 
-export const getColormapColors = (
-  colormapName: string,
-  isReversed: boolean
-): string[] => {
+export const getColormapColors = (colormapName: string, isReversed: boolean): string[] => {
   const baseName = normalizeColorMap(colormapName);
   const colormapData =
     sequentialColorMaps[baseName] ||
@@ -73,19 +49,10 @@ export const getColormapColors = (
     return `rgba(${r}, ${g}, ${b}, ${a})`;
   });
 
-  return isReversed
-    ? colors.reduceRight((acc, color) => [...acc, color], [])
-    : colors;
+  return isReversed ? colors.reduceRight((acc, color) => [...acc, color], []) : colors;
 };
 
-export function ColormapOptions({
-  colorMap = DEFAULT_COLORMAP,
-  min,
-  max,
-  setColorMap,
-  setColorMapScale,
-  colorMapScale
-}: ColormapOptionsProps) {
+export function ColormapOptions({ colorMap = DEFAULT_COLORMAP, setColorMap}: ColormapOptionsProps) {
   const initialIsReversed = colorMap.endsWith('_r');
   const initialColorMap = normalizeColorMap(colorMap);
 
@@ -96,15 +63,9 @@ export function ColormapOptions({
   const [customColorMap, setCustomColorMap] = useState<string | null>(null);
 
   useEffect(() => {
-    if (
-      colormapType === 'sequential' &&
-      !CURATED_SEQUENTIAL_COLORMAPS.includes(selectedColorMap)
-    ) {
+    if (colormapType === 'sequential' && !CURATED_SEQUENTIAL_COLORMAPS.includes(selectedColorMap)) {
       setCustomColorMap(selectedColorMap);
-    } else if (
-      colormapType === 'diverging' &&
-      !CURATED_DIVERGING_COLORMAPS.includes(selectedColorMap)
-    ) {
+    } else if (colormapType === 'diverging' && !CURATED_DIVERGING_COLORMAPS.includes(selectedColorMap)) {
       setCustomColorMap(selectedColorMap);
     }
   }, [selectedColorMap, colormapType]);
@@ -113,25 +74,15 @@ export function ColormapOptions({
 
   if (colormapType === 'sequential') {
     if (customColorMap) {
-      availableColormaps = [
-        { name: customColorMap },
-        ...CURATED_SEQUENTIAL_COLORMAPS.map((name) => ({ name }))
-      ];
+      availableColormaps = [{ name: customColorMap }, ...CURATED_SEQUENTIAL_COLORMAPS.map(name => ({ name }))];
     } else {
-      availableColormaps = CURATED_SEQUENTIAL_COLORMAPS.map((name) => ({
-        name
-      }));
+      availableColormaps = CURATED_SEQUENTIAL_COLORMAPS.map(name => ({ name }));
     }
   } else if (colormapType === 'diverging') {
     if (customColorMap) {
-      availableColormaps = [
-        { name: customColorMap },
-        ...CURATED_DIVERGING_COLORMAPS.map((name) => ({ name }))
-      ];
+      availableColormaps = [{ name: customColorMap }, ...CURATED_DIVERGING_COLORMAPS.map(name => ({ name }))];
     } else {
-      availableColormaps = CURATED_DIVERGING_COLORMAPS.map((name) => ({
-        name
-      }));
+      availableColormaps = CURATED_DIVERGING_COLORMAPS.map(name => ({ name }));
     }
   } else if (colormapType === 'rest') {
     availableColormaps = [{ name: selectedColorMap }];
@@ -154,36 +105,17 @@ export function ColormapOptions({
 
   return (
     <div className='colormap-options__container bg-white shadow-1 maxh-mobile-lg'>
-      <div className='display-flex flex-align-center text-gray-90 padding-2 font-heading-xs text-bold'>
-        <CollecticonDrop className='margin-right-1' /> Colormap options
-      </div>
-
-      <div className='display-flex flex-align-center flex-column flex-justify border-top-1px border-bottom-1px border-base-lightest bg-base-lightest padding-2'>
-        <ColorRangeSlider
-          min={min}
-          max={max}
-          colorMapScale={colorMapScale}
-          setColorMapScale={setColorMapScale}
-        />
-        <div
-          className='display-flex flex-align-center width-full padding-top-1'
-          onClick={handleReverseToggle}
-        >
-          <label className='font-ui-3xs text-gray-90 text-semibold margin-right-1'>
-            Reverse
-          </label>
+      <div className='display-flex flex-align-center text-gray-90 padding-2 font-heading-xs text-bold'><CollecticonDrop className='margin-right-1' /> Colormap options</div>
 
+      <div className='display-flex flex-align-center flex-justify border-top-1px border-bottom-1px border-base-lightest bg-base-lightest padding-2'>
+        <div className='display-flex flex-align-center' onClick={handleReverseToggle}>
+          <label className='font-ui-3xs text-gray-90 text-semibold margin-right-1'>Reverse</label>
           {isReversed ? (
             <Icon.ToggleOn className='text-primary' size={4} />
           ) : (
             <Icon.ToggleOff className='text-base-light' size={4} />
           )}
-          <input
-            className='colormap-options__input'
-            checked={isReversed}
-            type='checkbox'
-            readOnly
-          />
+          <input className='colormap-options__input' checked={isReversed} type='checkbox' readOnly />
         </div>
       </div>
 
@@ -193,21 +125,13 @@ export function ColormapOptions({
 
           return (
             <div
-              className={`colormap-options__item display-flex flex-align-center flex-justify padding-2 border-bottom-1px border-base-lightest radius-md ${
-                selectedColorMap.toLowerCase() === name.toLowerCase()
-                  ? 'selected'
-                  : ''
-              }`}
+              className={`colormap-options__item display-flex flex-align-center flex-justify padding-2 border-bottom-1px border-base-lightest radius-md ${selectedColorMap.toLowerCase() === name.toLowerCase() ? 'selected' : ''}`}
               key={name}
               onClick={() => handleColorMapSelect(name.toLowerCase())}
             >
               <div
                 className='colormap-options__preview display-flex border-1px border-base-lightest radius-md margin-right-2'
-                style={{
-                  background: `linear-gradient(to right, ${previewColors.join(
-                    ', '
-                  )})`
-                }}
+                style={{ background: `linear-gradient(to right, ${previewColors.join(', ')})` }}
               />
               <label className='colormap-options__label text-gray-90 font-heading-xs flex-1'>
                 {name}
@@ -220,6 +144,7 @@ export function ColormapOptions({
   );
 }
 
+
 function normalizeColorMap(colorMap: string): string {
   return colorMap.replace(/_r$/, '');
 }