From 24a6ca4551bc57b0ec0650f7215f2ec38c7d2f2c Mon Sep 17 00:00:00 2001 From: snmln Date: Tue, 29 Oct 2024 15:54:19 -0400 Subject: [PATCH] Revert "Color maps range slider implementation (#1190)" This reverts commit 233a31c2ba96261894012fa2008ace6716010adb, reversing changes made to 46e1c5df246aafec25b760e231938607cd1cd41e. --- .../style-generators/raster-paint-layer.tsx | 25 +--- .../style-generators/raster-timeseries.tsx | 20 +-- app/scripts/components/common/map/types.d.ts | 1 - app/scripts/components/common/uswds/index.tsx | 2 - app/scripts/components/common/uswds/input.tsx | 10 -- .../components/exploration/atoms/hooks.ts | 11 -- .../components/datasets/colormap-options.tsx | 127 ++++-------------- .../components/datasets/data-layer-card.tsx | 123 ++++++----------- .../components/datasets/dataset-list-item.tsx | 6 +- .../exploration/components/map/layer.tsx | 6 +- .../components/exploration/types.d.ts.ts | 7 +- 11 files changed, 85 insertions(+), 253 deletions(-) delete mode 100644 app/scripts/components/common/uswds/input.tsx 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 index e5aa8479d..bf5f170bf 100644 --- a/app/scripts/components/common/map/style-generators/raster-paint-layer.tsx +++ b/app/scripts/components/common/map/style-generators/raster-paint-layer.tsx @@ -13,7 +13,6 @@ interface RasterPaintLayerProps extends BaseGeneratorParams { colorMap?: string | undefined; tileParams: Record; generatorPrefix?: string; - reScale?: { min: number; max: number }; } export function RasterPaintLayer(props: RasterPaintLayerProps) { @@ -25,8 +24,7 @@ export function RasterPaintLayer(props: RasterPaintLayerProps) { hidden, opacity, colorMap, - reScale, - generatorPrefix = 'raster' + generatorPrefix = 'raster', } = props; const { updateStyle } = useMapStyle(); @@ -34,14 +32,8 @@ export function RasterPaintLayer(props: RasterPaintLayerProps) { 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, diff --git a/app/scripts/components/common/map/style-generators/raster-timeseries.tsx b/app/scripts/components/common/map/style-generators/raster-timeseries.tsx index d0bd548c8..271bf74ac 100644 --- a/app/scripts/components/common/map/style-generators/raster-timeseries.tsx +++ b/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, diff --git a/app/scripts/components/common/map/types.d.ts b/app/scripts/components/common/map/types.d.ts index 47ad68c4f..899931d39 100644 --- a/app/scripts/components/common/map/types.d.ts +++ b/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 { diff --git a/app/scripts/components/common/uswds/index.tsx b/app/scripts/components/common/uswds/index.tsx index a8f151d6b..e5410b060 100644 --- a/app/scripts/components/common/uswds/index.tsx +++ b/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'; diff --git a/app/scripts/components/common/uswds/input.tsx b/app/scripts/components/common/uswds/input.tsx deleted file mode 100644 index f239b6bc5..000000000 --- a/app/scripts/components/common/uswds/input.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from "react"; -import { TextInput, TextInputMask } from "@trussworks/react-uswds"; - -export function USWDSTextInput(props) { - return ; -} - -export function USWDSTextInputMask(props) { - return ; - } \ No newline at end of file diff --git a/app/scripts/components/exploration/atoms/hooks.ts b/app/scripts/components/exploration/atoms/hooks.ts index 115f374f3..93ea7f5d1 100644 --- a/app/scripts/components/exploration/atoms/hooks.ts +++ b/app/scripts/components/exploration/atoms/hooks.ts @@ -157,17 +157,6 @@ export function useTimelineDatasetColormap( return useAtom(colorMapAtom); } -export function useTimelineDatasetColormapScale( - datasetAtom: PrimitiveAtom -) { - const colorMapScaleAtom = useMemo(() => { - return focusAtom(datasetAtom, (optic) => - optic.prop('settings').prop('scale') - ); - }, [datasetAtom]); - - return useAtom(colorMapScaleAtom); -} export const useTimelineDatasetAnalysis = ( datasetAtom: PrimitiveAtom ) => { diff --git a/app/scripts/components/exploration/components/datasets/colormap-options.tsx b/app/scripts/components/exploration/components/datasets/colormap-options.tsx index a57451778..a6ce07e21 100644 --- a/app/scripts/components/exploration/components/datasets/colormap-options.tsx +++ b/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(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 (
-
- Colormap options -
- -
- -
- +
Colormap options
+
+
+ {isReversed ? ( ) : ( )} - +
@@ -193,21 +125,13 @@ export function ColormapOptions({ return (
handleColorMapSelect(name.toLowerCase())} >
+ )} + {showNonConfigurableCmap && - )} + />} + ); diff --git a/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx b/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx index 8c1d08441..a80792c32 100644 --- a/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx +++ b/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx @@ -33,8 +33,7 @@ import { useTimelineDatasetAtom, useTimelineDatasetColormap, useTimelineDatasetSettings, - useTimelineDatasetVisibility, - useTimelineDatasetColormapScale + useTimelineDatasetVisibility } from '$components/exploration/atoms/hooks'; import { useAnalysisController, @@ -104,7 +103,6 @@ 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(); const [, setSetting] = useTimelineDatasetSettings(datasetAtom); @@ -211,7 +209,7 @@ export function DatasetListItem(props: DatasetListItemProps) {
- +
{modalLayerInfo && ( ); case 'cmr': @@ -88,7 +88,6 @@ export function Layer(props: LayerProps) { opacity={opacity} onStatusChange={onStatusChange} colorMap={colorMap} - reScale={scale} /> ); case 'raster': @@ -106,7 +105,6 @@ export function Layer(props: LayerProps) { opacity={opacity} onStatusChange={onStatusChange} colorMap={colorMap} - reScale={scale} /> ); default: diff --git a/app/scripts/components/exploration/types.d.ts.ts b/app/scripts/components/exploration/types.d.ts.ts index 2ada067a1..b6daad9f4 100644 --- a/app/scripts/components/exploration/types.d.ts.ts +++ b/app/scripts/components/exploration/types.d.ts.ts @@ -95,10 +95,7 @@ export interface DatasetData extends EnhancedDatasetLayer { timeDensity: TimeDensity; domain: Date[]; } -export interface colorMapScale { - min: number; - max: number; -} + export interface DatasetSettings { // Whether or not the layer should be shown on the map. isVisible?: boolean; @@ -108,8 +105,6 @@ export interface DatasetSettings { analysisMetrics?: DataMetric[]; // Active colormap of the layer. colorMap?: string; - // Active colormap scale - scale?: colorMapScale; } // Any sort of meta information the dataset like: