diff --git a/app/scripts/components/common/blocks/block-map.tsx b/app/scripts/components/common/blocks/block-map.tsx index f74d6b99b..211c455b4 100644 --- a/app/scripts/components/common/blocks/block-map.tsx +++ b/app/scripts/components/common/blocks/block-map.tsx @@ -1,8 +1,8 @@ import React, { useMemo, useState, useEffect } from 'react'; import styled from 'styled-components'; -import { DatasetDatumFnResolverBag, ProjectionOptions, datasets } from 'veda'; +// @NOTE: This should be replaced by types/veda once the changes are consolidated +import { ProjectionOptions } from 'veda'; import { MapboxOptions } from 'mapbox-gl'; -import * as dateFns from 'date-fns'; import { convertProjectionToMapbox, projectionDefault, @@ -15,7 +15,6 @@ import MapMessage from '../map/map-message'; import { formatCompareDate, formatSingleDate, - resolveConfigFunctions } from '../map/utils'; import { BasemapId, @@ -30,10 +29,10 @@ import { ScaleControl } from '$components/common/map/controls'; import { Layer } from '$components/exploration/components/map/layer'; -import { S_SUCCEEDED } from '$utils/status'; import { - TimelineDataset, - TimelineDatasetSuccess + VizDataset, + VizDatasetSuccess, + DatasetStatus } from '$components/exploration/types.d.ts'; import { reconcileDatasets } from '$components/exploration/data-utils'; @@ -126,11 +125,25 @@ interface MapBlockProps { layerId: string; } +const getDataLayer = (layerIndex: number, layers: VizDataset[] | undefined): (VizDatasetSuccess | null) => { + if (!layers || layers.length <= layerIndex) return null; + const layer = layers[layerIndex]; + + // @NOTE: What to do when data returns ERROR + if (layer.status !== DatasetStatus.SUCCESS) return null; + return { + ...layer, + settings: { + isVisible: true, + opacity: 100 + } + }; +}; + function MapBlock(props: MapBlockProps) { const generatedId = useMemo(() => `map-${++mapInstanceId}`, []); const { - datasetId, layerId, dateTime, compareDateTime, @@ -144,36 +157,35 @@ function MapBlock(props: MapBlockProps) { } = props; const errors = validateBlockProps(props); + if (errors.length) { throw new HintedError('Malformed Map Block', errors); } - const [baseLayers, setBaseLayers] = useState(); - const [compareLayers, setCompareLayers] = useState< - TimelineDataset[] | undefined - >(); - - const [baseMapStaticData] = reconcileDatasets([layerId], datasetLayers, []); - const baseMapStaticCompareData = baseMapStaticData.data.compare; - - let compareLayerId: undefined | string; - if (baseMapStaticCompareData && 'layerId' in baseMapStaticCompareData) { - compareLayerId = baseMapStaticCompareData.layerId; - } + const layersToFetch = useMemo(() => { + const [baseMapStaticData] = reconcileDatasets([layerId], datasetLayers, []); + let totalLayers = [baseMapStaticData]; + const baseMapStaticCompareData = baseMapStaticData.data.compare; + if (baseMapStaticCompareData && 'layerId' in baseMapStaticCompareData) { + const compareLayerId = baseMapStaticCompareData.layerId; + const [compareMapStaticData] = reconcileDatasets( + compareLayerId ? [compareLayerId] : [], + datasetLayers, + [] + ); + totalLayers = [...totalLayers, compareMapStaticData]; + } + return totalLayers; + },[layerId]); - const [compareMapStaticData] = reconcileDatasets( - compareLayerId ? [compareLayerId] : [], - datasetLayers, - [] - ); + const [layers, setLayers] = useState(layersToFetch); - useReconcileWithStacMetadata([baseMapStaticData], setBaseLayers); - useReconcileWithStacMetadata([compareMapStaticData], setCompareLayers); + useReconcileWithStacMetadata(layers, setLayers); - const selectedDatetime = dateTime + const selectedDatetime: (Date | undefined) = dateTime ? utcString2userTzDate(dateTime) : undefined; - const selectedCompareDatetime = compareDateTime + const selectedCompareDatetime: (Date | undefined) = compareDateTime ? utcString2userTzDate(compareDateTime) : undefined; @@ -197,57 +209,11 @@ function MapBlock(props: MapBlockProps) { const [, setProjection] = useState(projectionStart); - const dataset = datasetId ? datasets[datasetId] : null; + const baseDataLayer: (VizDatasetSuccess | null) = useMemo(() => getDataLayer(0, layers), [layers]); + const compareDataLayer: (VizDatasetSuccess | null) = useMemo(() => getDataLayer(1, layers), [layers]); - const resolverBag = useMemo( - () => ({ - datetime: selectedDatetime, - compareDatetime: selectedCompareDatetime, - dateFns - }), - [selectedDatetime, selectedCompareDatetime] - ); - - const [baseLayerResolvedData] = useMemo(() => { - if (!baseLayers || baseLayers.length !== 1) return [null, null]; - const baseLayer = baseLayers[0]; - - if (baseLayer.status !== S_SUCCEEDED) return [null, null]; - - const bag = { ...resolverBag, raw: baseLayer.data }; - const data = resolveConfigFunctions(baseLayer.data, bag); - return [data]; - }, [baseLayers, resolverBag]); - - const baseDataLayer: TimelineDataset | null = { - data: baseLayerResolvedData, - settings: { - isVisible: true, - opacity: 100 - } - } as unknown as TimelineDataset; - const baseTimeDensity = baseLayerResolvedData?.timeDensity; - - // Resolve data needed for the compare layer once it is loaded. - const [compareLayerResolvedData] = useMemo(() => { - if (!compareLayers || compareLayers.length !== 1) return [null, null]; - const compareLayer = compareLayers[0]; - - if (compareLayer.status !== S_SUCCEEDED) return [null, null]; - // Include access to raw data. - const bag = { ...resolverBag, raw: compareLayer.data }; - const data = resolveConfigFunctions(compareLayer.data, bag); - return [data]; - }, [compareLayers, resolverBag]); - - const compareDataLayer: TimelineDataset | null = { - data: compareLayerResolvedData, - settings: { - isVisible: true, - opacity: 100 - } - } as unknown as TimelineDataset; - const compareTimeDensity = compareLayerResolvedData?.timeDensity; + const baseTimeDensity = baseDataLayer?.data.timeDensity; + const compareTimeDensity = compareDataLayer?.data.timeDensity; const mapOptions: Partial = { style: DEFAULT_MAP_STYLE_URL, @@ -292,8 +258,8 @@ function MapBlock(props: MapBlockProps) { const computedCompareLabel = useMemo(() => { // Use a provided label if it exist. - if (compareLabel && compareLayerResolvedData) { - const providedLabel = compareLayerResolvedData.mapLabel as string; + if (compareLabel && compareDataLayer) { + const providedLabel = compareDataLayer.data.mapLabel as string; return providedLabel; } @@ -308,7 +274,7 @@ function MapBlock(props: MapBlockProps) { : null; }, [ compareLabel, - compareLayerResolvedData, + compareDataLayer, selectedDatetime, compareToDate, baseTimeDensity, @@ -329,33 +295,32 @@ function MapBlock(props: MapBlockProps) { }} > - {dataset && selectedDatetime && layerId && baseLayerResolvedData && ( + {selectedDatetime && baseDataLayer && ( )} - {baseLayerResolvedData?.legend && ( + {baseDataLayer?.data.legend && ( // Map overlay element // Layer legend for the active layer. - // @NOTE: LayerLegendContainer is in old mapbox directory, may want to move this over to /map directory once old directory is deprecated - {compareLayerResolvedData?.legend && + {compareDataLayer?.data.legend && !!selectedCompareDatetime && - baseLayerResolvedData.id !== compareLayerResolvedData.id && ( + baseDataLayer.data.id !== compareDataLayer.data.id && ( )} @@ -364,19 +329,19 @@ function MapBlock(props: MapBlockProps) { {selectedDatetime && selectedCompareDatetime ? ( {computedCompareLabel} ) : ( {selectedDatetime && formatSingleDate( selectedDatetime, - baseLayerResolvedData?.timeDensity + baseDataLayer?.data.timeDensity )} )} @@ -387,16 +352,11 @@ function MapBlock(props: MapBlockProps) { {selectedCompareDatetime && ( - {dataset && - selectedCompareDatetime && - layerId && - compareLayerResolvedData && ( + {compareDataLayer && ( )} 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 8daf4cb21..76fd7c276 100644 --- a/app/scripts/components/common/map/style-generators/raster-timeseries.tsx +++ b/app/scripts/components/common/map/style-generators/raster-timeseries.tsx @@ -204,6 +204,9 @@ export function RasterTimeseries(props: RasterTimeseriesProps) { 'color: red;', id ); + // Temporarily turning on log for debugging + /* eslint-disable-next-line no-console */ + console.log(error); return; } };