Color maps range slider implementation (#1190)

**Related Ticket:**
#1102

### Description of Changes
Creation and implementation of new range slider component. 

### Notes & Questions About Changes
-There is a identified bug that while dragging the slider thumbs you can
drag the entire panel up and down influencing the parent component
position.
-Additional functionality: If input field is left empty and clicked
outside of the default _min_ or _max_ should auto populate the field.

### Validation / Testing
Navigate to a data exploration and add a layer to the timeline. 
- **Layers:**
- Confirm that **min** and **max** are accurate to value in the layer
legend view.
- Switch to another layer with different value confirm that the min and
max in the range slider are accurate.
- Select a layer with a min value less than 0 (net ecosystem exchange)
you should see a middle marker that represents the center of the current
gradient values.
- **Slider:**
- You should not be able to drag the min slider past the max slider, or
the max slider past the min slider.
- **Text Inputs:**
- You should be able to type in a value greater or lower than the min
max of the layer but then be shown with the error message _Please enter
a value between {min} and {max}_ no change to the slider range or the
map.
- After selecting a different max that is less than the layers absolute
maximum with either slider or input, if you enter in a value in the min
text input that is greater than the newly selected max you should be
presented with an error message _Please enter a value less than {max}_
- After selecting a different min that is larger than the layers
absolute minimum with either slider or input, if you enter in a value in
the max text input that is greater than the newly selected max you
should be presented with an error message _Please enter a value larger
than {min}_

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

@@ -13,6 +13,7 @@ interface RasterPaintLayerProps extends BaseGeneratorParams {
   colorMap?: string | undefined;
   tileParams: Record<string, any>;
   generatorPrefix?: string;
+  reScale?: { min: number; max: number };
 }
 
 export function RasterPaintLayer(props: RasterPaintLayerProps) {
@@ -24,16 +25,23 @@ export function RasterPaintLayer(props: RasterPaintLayerProps) {
     hidden,
     opacity,
     colorMap,
-    generatorPrefix = 'raster',
+    reScale,
+    generatorPrefix = 'raster'
   } = props;
 
   const { updateStyle } = useMapStyle();
   const [minZoom] = zoomExtent ?? [0, 20];
   const generatorId = `${generatorPrefix}-${id}`;
 
   const updatedTileParams = useMemo(() => {
-    return { ...tileParams, ...colorMap &&  {colormap_name: colorMap}};
-  }, [tileParams, colorMap]);
+    return {
+      ...tileParams,
+      ...(colorMap && {
+        colormap_name: colorMap
+      }),
+      ...(reScale && { rescale: Object.values(reScale) })
+    };
+  }, [tileParams, colorMap, reScale]);
 
   //
   // Generate Mapbox GL layers and sources for raster timeseries
@@ -47,7 +55,9 @@ 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',
@@ -63,8 +73,8 @@ export function RasterPaintLayer(props: RasterPaintLayerProps) {
         paint: {
           'raster-opacity': hidden ? 0 : rasterOpacity,
           'raster-opacity-transition': {
-            duration: 320,
-          },
+            duration: 320
+          }
         },
         minzoom: minZoom,
         metadata: {
@@ -93,7 +103,8 @@ export function RasterPaintLayer(props: RasterPaintLayerProps) {
       tileApiEndpoint,
       haveTileParamsChanged,
       generatorParams,
-      colorMap
+      colorMap,
+      reScale
       // 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,7 +270,9 @@ 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) {
@@ -284,10 +286,14 @@ 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;
           }
         }
 
@@ -361,7 +367,8 @@ export function RasterTimeseries(props: RasterTimeseriesProps) {
           {
             assets: 'cog_default',
             ...(sourceParams ?? {}),
-            ...colorMap &&  {colormap_name: colorMap}
+            ...(colorMap && { colormap_name: colorMap }),
+            ...(reScale && {rescale: Object.values(reScale)})
           },
           // Temporary solution to pass different tile parameters for hls data
           {
@@ -489,6 +496,7 @@ export function RasterTimeseries(props: RasterTimeseriesProps) {
   }, [
     mosaicUrl,
     colorMap,
+    reScale,
     points,
     minZoom,
     haveSourceParamsChanged,

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

@@ -54,6 +54,7 @@ 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,3 +2,5 @@ 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/common/uswds/input.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { TextInput, TextInputMask } from "@trussworks/react-uswds";
+
+export function USWDSTextInput(props) {
+  return <TextInput {...props} />;
+}
+
+export function USWDSTextInputMask(props) {
+    return <TextInputMask {...props} />;
+  }

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

@@ -157,6 +157,17 @@ 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/color-range-slider.scss

@@ -0,0 +1,50 @@
+/* Removing the default appearance */
+.thumb,
+.thumb::-webkit-slider-thumb {
+  touch-action: 'none';
+
+  -webkit-appearance: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.thumb {
+  pointer-events: none;
+}
+/* For Chrome browsers */
+.thumb::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  pointer-events: all;
+  width: 20px;
+  height: 20px;
+  background-color: #fff;
+  border-radius: 50%;
+  border: 2px solid #1565ef;
+  border-width: 1px;
+  box-shadow: 0 0 0 1px #c6c6c6;
+  cursor: pointer;
+}
+
+/* For Firefox browsers */
+.thumb::-moz-range-thumb {
+  -webkit-appearance: none;
+  pointer-events: all;
+  width: 20px;
+  height: 20px;
+  background-color: #fff;
+  border-radius: 50%;
+  border: 2px solid #1565ef;
+  border-width: 1px;
+  box-shadow: 0 0 0 1px #c6c6c6;
+  cursor: pointer;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type='number'] {
+  -moz-appearance: textfield;
+}