migrating changes from color-maps-range-slider #1190

NASA-IMPACT · Nov 27, 2024 · 459eef5 · 459eef5
1 parent 7fdb52e
commit 459eef5
Show file tree

Hide file tree

Showing 10 changed files with 58 additions and 21 deletions.
diff --git a/app/scripts/components/common/map/style-generators/raster-timeseries.tsx b/app/scripts/components/common/map/style-generators/raster-timeseries.tsx
@@ -63,7 +63,9 @@ export function RasterTimeseries(props: RasterTimeseriesProps) {
     stacApiEndpoint,
     tileApiEndpoint,
     colorMap,
-    reScale
+    reScale,
+    envApiStacEndpoint,
+    envApiRasterEndpoint
   } = props;
 
   const { current: mapInstance } = useMaps();
@@ -368,7 +370,7 @@ export function RasterTimeseries(props: RasterTimeseriesProps) {
             assets: 'cog_default',
             ...(sourceParams ?? {}),
             ...(colorMap && { colormap_name: colorMap }),
-            ...(reScale && {rescale: Object.values(reScale)})
+            ...(reScale && { rescale: Object.values(reScale) })
           },
           // Temporary solution to pass different tile parameters for hls data
           {

diff --git a/app/scripts/components/common/map/types.d.ts b/app/scripts/components/common/map/types.d.ts
@@ -55,6 +55,8 @@ export interface BaseTimeseriesProps extends BaseGeneratorParams {
   onStatusChange?: (result: { status: ActionStatus; id: string }) => void;
   colorMap?: string;
   reScale?: { min: number; max: number };
+  envApiStacEndpoint: string;
+  envApiRasterEndpoint: string;
 }
 
 // export interface ZarrTimeseriesProps extends BaseTimeseriesProps {

diff --git a/app/scripts/components/common/uswds/index.tsx b/app/scripts/components/common/uswds/index.tsx
@@ -2,5 +2,4 @@ export { USWDSAlert } from './alert';
 export { USWDSButtonGroup, USWDSButton } from './button';
 export { USWDSLink } from './link';
 export { USWDSBanner, USWDSBannerContent } from './banner';
-
 export { USWDSTextInput, USWDSTextInputMask } from './input';
diff --git a/app/scripts/components/common/uswds/input.tsx b/app/scripts/components/common/uswds/input.tsx
@@ -1,10 +1,10 @@
-import React from "react";
-import { TextInput, TextInputMask } from "@trussworks/react-uswds";
+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} />;
-  }
+  return <TextInputMask {...props} />;
+}
diff --git a/app/scripts/components/exploration/atoms/hooks.ts b/app/scripts/components/exploration/atoms/hooks.ts
@@ -180,3 +180,15 @@ export const useTimelineDatasetAnalysis = (
     )
   );
 };
+
+export function useTimelineDatasetColormapScale(
+  datasetAtom: PrimitiveAtom<TimelineDataset>
+) {
+  const colorMapScaleAtom = useMemo(() => {
+    return focusAtom(datasetAtom, (optic) =>
+      optic.prop('settings').prop('scale')
+    );
+  }, [datasetAtom]);
+
+  return useAtom(colorMapScaleAtom);
+}
diff --git a/app/scripts/components/exploration/components/datasets/colormap-options.tsx b/app/scripts/components/exploration/components/datasets/colormap-options.tsx
@@ -1,17 +1,15 @@
 import React, { useEffect, useState } from 'react';
 import { Icon } from '@trussworks/react-uswds';
 import { CollecticonDrop } from '@devseed-ui/collecticons';
-
 import {
   sequentialColorMaps,
   divergingColorMaps,
   restColorMaps
 } from './colorMaps';
 
 import './colormap-options.scss';
-import { ColorRangeSlider } from './colorRangeSlider';
+import { ColorRangeSlider } from './colorRangeSlider/index';
 import { colorMapScale } from '$components/exploration/types.d.ts';
-
 export const DEFAULT_COLORMAP = 'viridis';
 
 const CURATED_SEQUENTIAL_COLORMAPS = [
@@ -172,7 +170,6 @@ export function ColormapOptions({
           <label className='font-ui-3xs text-gray-90 text-semibold margin-right-1'>
             Reverse
           </label>
-
           {isReversed ? (
             <Icon.ToggleOn className='text-primary' size={4} />
           ) : (

diff --git a/app/scripts/components/exploration/components/datasets/data-layer-card.tsx b/app/scripts/components/exploration/components/datasets/data-layer-card.tsx
@@ -22,7 +22,10 @@ import {
   LayerGradientColormapGraphic
 } from '$components/common/map/layer-legend';
 
-import { TimelineDataset, colorMapScale } from '$components/exploration/types.d.ts';
+import {
+  TimelineDataset,
+  colorMapScale
+} from '$components/exploration/types.d.ts';
 import { CollecticonDatasetLayers } from '$components/common/icons/dataset-layers';
 import { ParentDatasetTitle } from '$components/common/catalog/catalog-content';
 import { checkEnvFlag } from '$utils/utils';
@@ -37,7 +40,7 @@ interface CardProps {
   setVisible: any;
   colorMap: string | undefined;
   setColorMap: (colorMap: string) => void;
-  colorMapScale:colorMapScale | undefined;
+  colorMapScale: colorMapScale | undefined;
   setColorMapScale: (colorMapScale: colorMapScale) => void;
   onClickLayerInfo: () => void;
   datasetLegend: LayerLegendCategorical | LayerLegendGradient | undefined;

diff --git a/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx b/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx
@@ -104,8 +104,10 @@ export function DatasetListItem(props: DatasetListItemProps) {
 
   const [isVisible, setVisible] = useTimelineDatasetVisibility(datasetAtom);
   const [colorMap, setColorMap] = useTimelineDatasetColormap(datasetAtom);
-  const [colorMapScale, setColorMapScale]=useTimelineDatasetColormapScale(datasetAtom);
-  const [modalLayerInfo, setModalLayerInfo] = React.useState<LayerInfoModalData>();
+  const [colorMapScale, setColorMapScale] =
+    useTimelineDatasetColormapScale(datasetAtom);
+  const [modalLayerInfo, setModalLayerInfo] =
+    React.useState<LayerInfoModalData>();
   const [, setSetting] = useTimelineDatasetSettings(datasetAtom);
 
   const queryClient = useQueryClient();
@@ -121,7 +123,10 @@ export function DatasetListItem(props: DatasetListItemProps) {
   }, [queryClient, datasetId]);
 
   const onClickLayerInfo = useCallback(() => {
-    const parentInfoDesc = findDatasetAttribute({datasetId: dataset.data.parentDataset.id, attr: 'infoDescription'});
+    const parentInfoDesc = findDatasetAttribute({
+      datasetId: dataset.data.parentDataset.id,
+      attr: 'infoDescription'
+    });
     const data: LayerInfoModalData = {
       name: dataset.data.name,
       description: dataset.data.description,
@@ -188,7 +193,6 @@ export function DatasetListItem(props: DatasetListItemProps) {
     [dataset]
   );
 
-
   const onDragging = (e) => {
     controls.start(e);
   };
@@ -210,8 +214,19 @@ export function DatasetListItem(props: DatasetListItemProps) {
       <DatasetItem>
         <DatasetHeader>
           <DatasetHeaderInner>
-            <div style={{width: '100%'}} onPointerDown={onDragging}>
-              <DataLayerCard dataset={dataset} datasetAtom={datasetAtom} colorMap={colorMap} colorMapScale={colorMapScale} setColorMap={setColorMap} setColorMapScale={setColorMapScale} isVisible={isVisible} setVisible={setVisible} datasetLegend={datasetLegend} onClickLayerInfo={onClickLayerInfo} />
+            <div style={{ width: '100%' }} onPointerDown={onDragging}>
+              <DataLayerCard
+                dataset={dataset}
+                datasetAtom={datasetAtom}
+                colorMap={colorMap}
+                colorMapScale={colorMapScale}
+                setColorMap={setColorMap}
+                setColorMapScale={setColorMapScale}
+                isVisible={isVisible}
+                setVisible={setVisible}
+                datasetLegend={datasetLegend}
+                onClickLayerInfo={onClickLayerInfo}
+              />
             </div>
             {modalLayerInfo && (
               <LayerInfoModal
@@ -394,4 +409,4 @@ function DatasetTrackBlock(props: DatasetTrackBlockProps) {
       />
     </g>
   );
-}
+}
diff --git a/app/scripts/components/exploration/components/map/layer.tsx b/app/scripts/components/exploration/components/map/layer.tsx
@@ -72,6 +72,8 @@ export function Layer(props: LayerProps) {
           onStatusChange={onStatusChange}
           colorMap={colorMap}
           reScale={scale}
+          envApiStacEndpoint={envApiStacEndpoint}
+          envApiRasterEndpoint={envApiRasterEndpoint}
         />
       );
     case 'cmr':
@@ -89,6 +91,8 @@ export function Layer(props: LayerProps) {
           onStatusChange={onStatusChange}
           colorMap={colorMap}
           reScale={scale}
+          envApiStacEndpoint={envApiStacEndpoint}
+          envApiRasterEndpoint={envApiRasterEndpoint}
         />
       );
     case 'raster':
@@ -107,6 +111,8 @@ export function Layer(props: LayerProps) {
           onStatusChange={onStatusChange}
           colorMap={colorMap}
           reScale={scale}
+          envApiStacEndpoint={envApiStacEndpoint}
+          envApiRasterEndpoint={envApiRasterEndpoint}
         />
       );
     default:

diff --git a/app/scripts/components/exploration/types.d.ts.ts b/app/scripts/components/exploration/types.d.ts.ts
@@ -108,7 +108,8 @@ export interface DatasetSettings {
   analysisMetrics?: DataMetric[];
   // Active colormap of the layer.
   colorMap?: string;
-  // Active colormap scale
+  // Active colormap scale.
+
   scale?: colorMapScale;
 }