From 1e9bfb9dd59f557b2b51f64bf934bc9fa021dabc Mon Sep 17 00:00:00 2001 From: Hanbyul Jo Date: Tue, 18 Jun 2024 09:38:13 -0400 Subject: [PATCH 1/8] Use VizDataset data type for block map, set a default value for interactive --- .../components/common/blocks/block-map.tsx | 146 +++++++----------- .../components/common/map/map-component.tsx | 2 +- 2 files changed, 61 insertions(+), 87 deletions(-) diff --git a/app/scripts/components/common/blocks/block-map.tsx b/app/scripts/components/common/blocks/block-map.tsx index f74d6b99b..1290460fd 100644 --- a/app/scripts/components/common/blocks/block-map.tsx +++ b/app/scripts/components/common/blocks/block-map.tsx @@ -1,8 +1,7 @@ import React, { useMemo, useState, useEffect } from 'react'; import styled from 'styled-components'; -import { DatasetDatumFnResolverBag, ProjectionOptions, datasets } from 'veda'; +import { ProjectionOptions } from 'veda'; import { MapboxOptions } from 'mapbox-gl'; -import * as dateFns from 'date-fns'; import { convertProjectionToMapbox, projectionDefault, @@ -15,7 +14,6 @@ import MapMessage from '../map/map-message'; import { formatCompareDate, formatSingleDate, - resolveConfigFunctions } from '../map/utils'; import { BasemapId, @@ -32,8 +30,8 @@ import { import { Layer } from '$components/exploration/components/map/layer'; import { S_SUCCEEDED } from '$utils/status'; import { - TimelineDataset, - TimelineDatasetSuccess + VizDataset, + VizDatasetSuccess } from '$components/exploration/types.d.ts'; import { reconcileDatasets } from '$components/exploration/data-utils'; @@ -130,7 +128,6 @@ function MapBlock(props: MapBlockProps) { const generatedId = useMemo(() => `map-${++mapInstanceId}`, []); const { - datasetId, layerId, dateTime, compareDateTime, @@ -144,14 +141,13 @@ 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 [baseLayers, setBaseLayers] = useState(); + const [compareLayers, setCompareLayers] = useState(); const [baseMapStaticData] = reconcileDatasets([layerId], datasetLayers, []); const baseMapStaticCompareData = baseMapStaticData.data.compare; @@ -170,10 +166,10 @@ function MapBlock(props: MapBlockProps) { useReconcileWithStacMetadata([baseMapStaticData], setBaseLayers); useReconcileWithStacMetadata([compareMapStaticData], setCompareLayers); - const selectedDatetime = dateTime + const selectedDatetime: (Date | undefined) = dateTime ? utcString2userTzDate(dateTime) : undefined; - const selectedCompareDatetime = compareDateTime + const selectedCompareDatetime: (Date | undefined) = compareDateTime ? utcString2userTzDate(compareDateTime) : undefined; @@ -197,57 +193,39 @@ function MapBlock(props: MapBlockProps) { const [, setProjection] = useState(projectionStart); - const dataset = datasetId ? datasets[datasetId] : null; - - const resolverBag = useMemo( - () => ({ - datetime: selectedDatetime, - compareDatetime: selectedCompareDatetime, - dateFns - }), - [selectedDatetime, selectedCompareDatetime] - ); - - const [baseLayerResolvedData] = useMemo(() => { - if (!baseLayers || baseLayers.length !== 1) return [null, null]; + const baseDataLayer:(VizDatasetSuccess| null) = useMemo(() => { + if (!baseLayers || baseLayers.length !== 1) return null; const baseLayer = baseLayers[0]; - if (baseLayer.status !== S_SUCCEEDED) return [null, null]; + if (baseLayer.status !== S_SUCCEEDED) return null; + return { + ...baseLayer, + settings: { + isVisible: true, + opacity: 100 + } + }; + }, [baseLayers]); - 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; + const baseTimeDensity = baseDataLayer?.data.timeDensity; // Resolve data needed for the compare layer once it is loaded. - const [compareLayerResolvedData] = useMemo(() => { - if (!compareLayers || compareLayers.length !== 1) return [null, null]; + const compareDataLayer: (VizDatasetSuccess | null) = useMemo(() => { + if (!compareLayers || compareLayers.length !== 1) return 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; + if (compareLayer.status !== S_SUCCEEDED) return null; + + return { + ...compareLayer, + settings: { + isVisible: true, + opacity: 100 + } + }; + }, [compareLayers]); + + const compareTimeDensity = compareDataLayer?.data.timeDensity; const mapOptions: Partial = { style: DEFAULT_MAP_STYLE_URL, @@ -292,8 +270,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 +286,7 @@ function MapBlock(props: MapBlockProps) { : null; }, [ compareLabel, - compareLayerResolvedData, + compareDataLayer, selectedDatetime, compareToDate, baseTimeDensity, @@ -329,33 +307,33 @@ function MapBlock(props: MapBlockProps) { }} > - {dataset && selectedDatetime && layerId && baseLayerResolvedData && ( + {selectedDatetime && layerId && 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 +342,19 @@ function MapBlock(props: MapBlockProps) { {selectedDatetime && selectedCompareDatetime ? ( {computedCompareLabel} ) : ( {selectedDatetime && formatSingleDate( selectedDatetime, - baseLayerResolvedData?.timeDensity + baseDataLayer?.data.timeDensity )} )} @@ -387,16 +365,12 @@ function MapBlock(props: MapBlockProps) { {selectedCompareDatetime && ( - {dataset && - selectedCompareDatetime && - layerId && - compareLayerResolvedData && ( + {layerId && + compareDataLayer && ( )} diff --git a/app/scripts/components/common/map/map-component.tsx b/app/scripts/components/common/map/map-component.tsx index 6976d21b0..5903524bb 100644 --- a/app/scripts/components/common/map/map-component.tsx +++ b/app/scripts/components/common/map/map-component.tsx @@ -19,7 +19,7 @@ export default function MapComponent({ projection, mapRef, onMapLoad, - interactive + interactive = true }: { controls: ReactElement[]; isCompared?: boolean; From ebeb2b5a10d59501eed43a839d12f640d5497194 Mon Sep 17 00:00:00 2001 From: Hanbyul Jo Date: Thu, 20 Jun 2024 11:49:10 -0400 Subject: [PATCH 2/8] Use datasetstatus instead of string constant --- app/scripts/components/common/blocks/block-map.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/scripts/components/common/blocks/block-map.tsx b/app/scripts/components/common/blocks/block-map.tsx index 1290460fd..f85a2d278 100644 --- a/app/scripts/components/common/blocks/block-map.tsx +++ b/app/scripts/components/common/blocks/block-map.tsx @@ -28,10 +28,10 @@ import { ScaleControl } from '$components/common/map/controls'; import { Layer } from '$components/exploration/components/map/layer'; -import { S_SUCCEEDED } from '$utils/status'; import { VizDataset, - VizDatasetSuccess + VizDatasetSuccess, + DatasetStatus } from '$components/exploration/types.d.ts'; import { reconcileDatasets } from '$components/exploration/data-utils'; @@ -197,7 +197,7 @@ function MapBlock(props: MapBlockProps) { if (!baseLayers || baseLayers.length !== 1) return null; const baseLayer = baseLayers[0]; - if (baseLayer.status !== S_SUCCEEDED) return null; + if (baseLayer.status !== DatasetStatus.SUCCESS) return null; return { ...baseLayer, settings: { @@ -214,7 +214,7 @@ function MapBlock(props: MapBlockProps) { if (!compareLayers || compareLayers.length !== 1) return null; const compareLayer = compareLayers[0]; - if (compareLayer.status !== S_SUCCEEDED) return null; + if (compareLayer.status !== DatasetStatus.SUCCESS) return null; return { ...compareLayer, From 9e0f1daf6a540e488325d23329bb821cbdf9abe1 Mon Sep 17 00:00:00 2001 From: Hanbyul Jo Date: Thu, 20 Jun 2024 12:07:17 -0400 Subject: [PATCH 3/8] Consolidate base,compare layer approach --- .../components/common/blocks/block-map.tsx | 70 +++++++------------ 1 file changed, 27 insertions(+), 43 deletions(-) diff --git a/app/scripts/components/common/blocks/block-map.tsx b/app/scripts/components/common/blocks/block-map.tsx index f85a2d278..4a5e7f0b5 100644 --- a/app/scripts/components/common/blocks/block-map.tsx +++ b/app/scripts/components/common/blocks/block-map.tsx @@ -124,6 +124,20 @@ interface MapBlockProps { layerId: string; } +const getDataLayer = (layerIndex: number, layers: VizDataset[] | undefined): (VizDatasetSuccess | null) => { + if (!layers || layers.length <= layerIndex) return null; + const layer = layers[layerIndex]; + + if (layer.status !== DatasetStatus.SUCCESS) return null; + return { + ...layer, + settings: { + isVisible: true, + opacity: 100 + } + }; +}; + function MapBlock(props: MapBlockProps) { const generatedId = useMemo(() => `map-${++mapInstanceId}`, []); @@ -146,25 +160,23 @@ function MapBlock(props: MapBlockProps) { throw new HintedError('Malformed Map Block', errors); } - const [baseLayers, setBaseLayers] = useState(); - const [compareLayers, setCompareLayers] = useState(); - const [baseMapStaticData] = reconcileDatasets([layerId], datasetLayers, []); + let layersToFetch = [baseMapStaticData]; + const baseMapStaticCompareData = baseMapStaticData.data.compare; - - let compareLayerId: undefined | string; if (baseMapStaticCompareData && 'layerId' in baseMapStaticCompareData) { - compareLayerId = baseMapStaticCompareData.layerId; + const compareLayerId = baseMapStaticCompareData.layerId; + const [compareMapStaticData] = reconcileDatasets( + compareLayerId ? [compareLayerId] : [], + datasetLayers, + [] + ); + layersToFetch = [...layersToFetch, compareMapStaticData]; } - const [compareMapStaticData] = reconcileDatasets( - compareLayerId ? [compareLayerId] : [], - datasetLayers, - [] - ); + const [layers, setLayers] = useState(layersToFetch); - useReconcileWithStacMetadata([baseMapStaticData], setBaseLayers); - useReconcileWithStacMetadata([compareMapStaticData], setCompareLayers); + useReconcileWithStacMetadata(layersToFetch, setLayers); const selectedDatetime: (Date | undefined) = dateTime ? utcString2userTzDate(dateTime) @@ -193,38 +205,10 @@ function MapBlock(props: MapBlockProps) { const [, setProjection] = useState(projectionStart); - const baseDataLayer:(VizDatasetSuccess| null) = useMemo(() => { - if (!baseLayers || baseLayers.length !== 1) return null; - const baseLayer = baseLayers[0]; - - if (baseLayer.status !== DatasetStatus.SUCCESS) return null; - return { - ...baseLayer, - settings: { - isVisible: true, - opacity: 100 - } - }; - }, [baseLayers]); + const baseDataLayer: (VizDatasetSuccess | null) = useMemo(() => getDataLayer(0, layers), [layers]); + const compareDataLayer: (VizDatasetSuccess | null) = useMemo(() => getDataLayer(1, layers), [layers]); const baseTimeDensity = baseDataLayer?.data.timeDensity; - - // Resolve data needed for the compare layer once it is loaded. - const compareDataLayer: (VizDatasetSuccess | null) = useMemo(() => { - if (!compareLayers || compareLayers.length !== 1) return null; - const compareLayer = compareLayers[0]; - - if (compareLayer.status !== DatasetStatus.SUCCESS) return null; - - return { - ...compareLayer, - settings: { - isVisible: true, - opacity: 100 - } - }; - }, [compareLayers]); - const compareTimeDensity = compareDataLayer?.data.timeDensity; const mapOptions: Partial = { From c4b2ef51846812f2bc0c330369b75abaa4c13b29 Mon Sep 17 00:00:00 2001 From: Hanbyul Jo Date: Thu, 20 Jun 2024 12:09:05 -0400 Subject: [PATCH 4/8] Leaving a note about faux module --- app/scripts/components/common/blocks/block-map.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/app/scripts/components/common/blocks/block-map.tsx b/app/scripts/components/common/blocks/block-map.tsx index 4a5e7f0b5..74b888970 100644 --- a/app/scripts/components/common/blocks/block-map.tsx +++ b/app/scripts/components/common/blocks/block-map.tsx @@ -1,5 +1,6 @@ import React, { useMemo, useState, useEffect } from 'react'; import styled from 'styled-components'; +// @NOTE: This should be replaced by types/veda once the changes are consolidated import { ProjectionOptions } from 'veda'; import { MapboxOptions } from 'mapbox-gl'; import { From a2d1549da40ecc6ea01b6a9ff95cf11600c6f2a7 Mon Sep 17 00:00:00 2001 From: Hanbyul Jo Date: Tue, 25 Jun 2024 09:23:12 -0400 Subject: [PATCH 5/8] Remove outdated note --- app/scripts/components/common/blocks/block-map.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/app/scripts/components/common/blocks/block-map.tsx b/app/scripts/components/common/blocks/block-map.tsx index 74b888970..12035648a 100644 --- a/app/scripts/components/common/blocks/block-map.tsx +++ b/app/scripts/components/common/blocks/block-map.tsx @@ -303,7 +303,6 @@ function MapBlock(props: MapBlockProps) { {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 Date: Tue, 25 Jun 2024 09:45:26 -0400 Subject: [PATCH 6/8] Memo layers to fetch for block map --- .../components/common/blocks/block-map.tsx | 29 ++++++++++--------- 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/app/scripts/components/common/blocks/block-map.tsx b/app/scripts/components/common/blocks/block-map.tsx index 12035648a..888a20f25 100644 --- a/app/scripts/components/common/blocks/block-map.tsx +++ b/app/scripts/components/common/blocks/block-map.tsx @@ -129,6 +129,7 @@ const getDataLayer = (layerIndex: number, layers: VizDataset[] | undefined): (Vi 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, @@ -161,19 +162,21 @@ function MapBlock(props: MapBlockProps) { throw new HintedError('Malformed Map Block', errors); } - const [baseMapStaticData] = reconcileDatasets([layerId], datasetLayers, []); - let layersToFetch = [baseMapStaticData]; - - const baseMapStaticCompareData = baseMapStaticData.data.compare; - if (baseMapStaticCompareData && 'layerId' in baseMapStaticCompareData) { - const compareLayerId = baseMapStaticCompareData.layerId; - const [compareMapStaticData] = reconcileDatasets( - compareLayerId ? [compareLayerId] : [], - datasetLayers, - [] - ); - layersToFetch = [...layersToFetch, compareMapStaticData]; - } + 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 [layers, setLayers] = useState(layersToFetch); From 947259923e151bf8b9b99b7c2e7acd8429d377c1 Mon Sep 17 00:00:00 2001 From: Hanbyul Jo Date: Tue, 25 Jun 2024 09:57:49 -0400 Subject: [PATCH 7/8] Log errors for debugging --- .../common/map/style-generators/raster-timeseries.tsx | 3 +++ 1 file changed, 3 insertions(+) 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; } }; From 3cfd052a71c6e7b7b44b530904edaa274644324f Mon Sep 17 00:00:00 2001 From: Hanbyul Jo Date: Tue, 25 Jun 2024 10:26:45 -0400 Subject: [PATCH 8/8] Pass layers as state to reconcile --- app/scripts/components/common/blocks/block-map.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/app/scripts/components/common/blocks/block-map.tsx b/app/scripts/components/common/blocks/block-map.tsx index 888a20f25..211c455b4 100644 --- a/app/scripts/components/common/blocks/block-map.tsx +++ b/app/scripts/components/common/blocks/block-map.tsx @@ -178,9 +178,9 @@ function MapBlock(props: MapBlockProps) { return totalLayers; },[layerId]); - const [layers, setLayers] = useState(layersToFetch); + const [layers, setLayers] = useState(layersToFetch); - useReconcileWithStacMetadata(layersToFetch, setLayers); + useReconcileWithStacMetadata(layers, setLayers); const selectedDatetime: (Date | undefined) = dateTime ? utcString2userTzDate(dateTime) @@ -295,7 +295,7 @@ function MapBlock(props: MapBlockProps) { }} > - {selectedDatetime && layerId && baseDataLayer && ( + {selectedDatetime && baseDataLayer && ( - {layerId && - compareDataLayer && ( + {compareDataLayer && (