Use VizDataset data type for block map, set a default value for inter…

…active (#1006) **Related Ticket:** Kind of related to #905 ? We would still need to revisit 'compare' - but I think we can deprecate it soon? ### Description of Changes - Make BlockMap use the new type `VizDataset.` - Simplify some redundant logic (ex. `resolveConfig` now happens at the layer level, so I don't think we need to do it on block map level) - While working on it, I realized that a new flag, `interactive,` blocks the interaction such as dragging to pan - I set the default value as `true` (which was an implicit value before.)
NASA-IMPACT · Jun 28, 2024 · 891d988 · 891d988
2 parents 3f22594 + 3cfd052
commit 891d988
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 109 deletions.
diff --git 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<TimelineDataset[] | undefined>();
-  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<VizDataset[]>(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<DatasetDatumFnResolverBag>(
-    () => ({
-      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<MapboxOptions> = {
     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) {
         }}
       >
         <Basemap basemapStyleId={mapBasemapId} />
-        {dataset && selectedDatetime && layerId && baseLayerResolvedData && (
+        {selectedDatetime && baseDataLayer && (
           <Layer
-            key={baseLayerResolvedData.id}
-            id={`base-${baseLayerResolvedData.id}`}
-            dataset={baseDataLayer as unknown as TimelineDatasetSuccess}
+            key={baseDataLayer.data.id}
+            id={`base-${baseDataLayer.data.id}`}
+            dataset={baseDataLayer}
             selectedDay={selectedDatetime}
           />
         )}
-        {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
           <LayerLegendContainer>
             <LayerLegend
-              id={`base-${baseLayerResolvedData.id}`}
-              title={baseLayerResolvedData.name}
-              description={baseLayerResolvedData.description}
-              {...baseLayerResolvedData.legend}
+              id={`base-${baseDataLayer.data.id}`}
+              title={baseDataLayer.data.name}
+              description={baseDataLayer.data.description}
+              {...baseDataLayer.data.legend}
             />
-            {compareLayerResolvedData?.legend &&
+            {compareDataLayer?.data.legend &&
               !!selectedCompareDatetime &&
-              baseLayerResolvedData.id !== compareLayerResolvedData.id && (
+              baseDataLayer.data.id !== compareDataLayer.data.id && (
                 <LayerLegend
-                  id={`compare-${compareLayerResolvedData.id}`}
-                  title={compareLayerResolvedData.name}
-                  description={compareLayerResolvedData.description}
-                  {...compareLayerResolvedData.legend}
+                  id={`compare-${compareDataLayer.data.id}`}
+                  title={compareDataLayer.data.name}
+                  description={compareDataLayer.data.description}
+                  {...compareDataLayer.data.legend}
                 />
               )}
           </LayerLegendContainer>
@@ -364,19 +329,19 @@ function MapBlock(props: MapBlockProps) {
           {selectedDatetime && selectedCompareDatetime ? (
             <MapMessage
               id='compare-message'
-              active={!!(selectedCompareDatetime && compareLayerResolvedData)}
+              active={!!(compareDataLayer && selectedCompareDatetime)}
             >
               {computedCompareLabel}
             </MapMessage>
           ) : (
             <MapMessage
               id='single-map-message'
-              active={!!(selectedDatetime && baseLayerResolvedData)}
+              active={!!(selectedDatetime && baseDataLayer)}
             >
               {selectedDatetime &&
                 formatSingleDate(
                   selectedDatetime,
-                  baseLayerResolvedData?.timeDensity
+                  baseDataLayer?.data.timeDensity
                 )}
             </MapMessage>
           )}
@@ -387,16 +352,11 @@ function MapBlock(props: MapBlockProps) {
         {selectedCompareDatetime && (
           <Compare>
             <Basemap basemapStyleId={mapBasemapId} />
-            {dataset &&
-              selectedCompareDatetime &&
-              layerId &&
-              compareLayerResolvedData && (
+            {compareDataLayer && (
                 <Layer
-                  key={compareLayerResolvedData.id}
-                  id={`compare-${compareLayerResolvedData.id}`}
-                  dataset={
-                    compareDataLayer as unknown as TimelineDatasetSuccess
-                  }
+                  key={compareDataLayer.data.id}
+                  id={`compare-${compareDataLayer.data.id}`}
+                  dataset={compareDataLayer}
                   selectedDay={selectedCompareDatetime}
                 />
               )}

diff --git 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;
       }
     };