diff --git a/.env b/.env index d16084474..65308c498 100644 --- a/.env +++ b/.env @@ -13,3 +13,4 @@ API_STAC_ENDPOINT='https://staging.openveda.cloud/api/stac' GOOGLE_FORM = 'https://docs.google.com/forms/d/e/1FAIpQLSfGcd3FDsM3kQIOVKjzdPn4f88hX8RZ4Qef7qBsTtDqxjTSkg/viewform?embedded=true' FEATURE_NEW_EXPLORATION = 'TRUE' +SHOW_CONFIGURABLE_COLOR_MAP = 'FALSE' \ No newline at end of file diff --git a/app/scripts/components/common/banner/styles.scss b/app/scripts/components/common/banner/styles.scss new file mode 100644 index 000000000..e69de29bb diff --git a/app/scripts/components/common/map/layer-legend.tsx b/app/scripts/components/common/map/layer-legend.tsx index 903082650..8b0001e0d 100644 --- a/app/scripts/components/common/map/layer-legend.tsx +++ b/app/scripts/components/common/map/layer-legend.tsx @@ -272,7 +272,6 @@ export function LayerLegendContainer(props: LayerLegendContainerProps) { export function LayerCategoricalGraphic(props: LayerLegendCategorical) { const { stops } = props; - return ( {stops.map((stop) => ( @@ -350,20 +349,19 @@ export const LayerGradientGraphic = (props: LayerLegendGradient) => { export const LayerGradientColormapGraphic = (props: Omit) => { const { colorMap, ...otherProps } = props; - const colormap = findColormapByName(colorMap ?? 'viridis'); - if (!colormap) { + const colormapResult = findColormapByName(colorMap ?? 'viridis'); + if (!colormapResult) { return null; } + const { foundColorMap, isReversed } = colormapResult; - 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 stops = Object.values(foundColorMap) + .filter(value => Array.isArray(value) && value.length === 4) + .map((value) => { + return `rgba(${(value as Array).join(',')})`; }); - const processedStops = colormap.isReversed + const processedStops = isReversed ? stops.reduceRight((acc, stop) => [...acc, stop], []) : stops; @@ -380,5 +378,5 @@ export const findColormapByName = (name: string) => { return null; } - return { ...colormap, isReversed }; + return { foundColorMap: {...colormap}, isReversed }; }; \ No newline at end of file diff --git a/app/scripts/components/exploration/components/datasets/data-layer-card.tsx b/app/scripts/components/exploration/components/datasets/data-layer-card.tsx index 28500c92e..2e22b869f 100644 --- a/app/scripts/components/exploration/components/datasets/data-layer-card.tsx +++ b/app/scripts/components/exploration/components/datasets/data-layer-card.tsx @@ -23,6 +23,7 @@ import { import { TimelineDataset } 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'; import 'tippy.js/dist/tippy.css'; import { LoadingSkeleton } from '$components/common/loading-skeleton'; @@ -102,6 +103,9 @@ const LegendColorMapTrigger = styled.div` cursor: pointer; `; +// Hiding configurable map for now until Instances are ready to adapt it +const showConfigurableColorMap = checkEnvFlag(process.env.SHOW_CONFIGURABLE_COLOR_MAP); + export default function DataLayerCard(props: CardProps) { const { dataset, @@ -176,38 +180,48 @@ export default function DataLayerCard(props: CardProps) { {datasetLegend?.type === 'categorical' && ( )} - {/* Show a loading skeleton when the color map is not categorical and the dataset - status is 'loading'. This is because we color map sometimes might come from the titiler - which could introduce a visual flash when going from the 'default' color map to the one - configured in titiler */} - {dataset.status === 'loading' && datasetLegend?.type === 'gradient' &&
} - {dataset.status === 'success' && datasetLegend?.type === 'gradient' && ( -
- - - } - appendTo={() => document.body} - visible={isColorMapOpen} - interactive={true} - placement='top' - onClickOutside={(_, event) => handleClickOutside(event)} - > - - - - -
- )} + + {/* Show a loading skeleton when the color map is not categorical and the dataset + status is 'loading'. This is because we color map sometimes might come from the titiler + which could introduce a visual flash when going from the 'default' color map to the one + configured in titiler */} + + {showConfigurableColorMap && dataset.status === 'loading' && datasetLegend?.type === 'gradient' &&
} + {showConfigurableColorMap && dataset.status === 'success' && datasetLegend?.type === 'gradient' && ( +
+ + + } + appendTo={() => document.body} + visible={isColorMapOpen} + interactive={true} + placement='top' + onClickOutside={(_, event) => handleClickOutside(event)} + > + + + + +
+ )} + {!showConfigurableColorMap && + datasetLegend?.type === 'gradient' && + } + );