Add idSuffix to vector layer, clean up

NASA-IMPACT · Jun 1, 2023 · 8169d2e · 8169d2e
1 parent 94ba895
commit 8169d2e
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 16 deletions.
diff --git a/app/scripts/components/common/blocks/scrollytelling/index.tsx b/app/scripts/components/common/blocks/scrollytelling/index.tsx
@@ -179,7 +179,7 @@ function useMapLayersFromChapters(chList: ScrollyChapter[]) {
   const resolvedLayers = useMemo(
     () =>
       asyncLayers.map(({ baseLayer }, index) => {
-        if (baseLayer?.status !== S_SUCCEEDED || !baseLayer.data) return null;
+        if (baseLayer.status !== S_SUCCEEDED || !baseLayer.data) return null;
 
         if (resolvedLayersCache.current[index]) {
           return resolvedLayersCache.current[index];
@@ -217,7 +217,7 @@ function useMapLayersFromChapters(chList: ScrollyChapter[]) {
   );
 
   const resolvedStatus = useMemo(
-    () => asyncLayers.map(({ baseLayer }) => baseLayer?.status),
+    () => asyncLayers.map(({ baseLayer }) => baseLayer.status),
     [asyncLayers]
   );
 
@@ -383,8 +383,8 @@ function Scrollytelling(props) {
         >
           {activeChapterLayer?.runtimeData.datetime
             ? formatSingleDate(
-                activeChapterLayer?.runtimeData.datetime,
-                activeChapterLayer?.layer.timeseries.timeDensity
+                activeChapterLayer.runtimeData.datetime,
+                activeChapterLayer.layer.timeseries.timeDensity
               )
             : null}
         </MapMessage>
@@ -441,7 +441,7 @@ function Scrollytelling(props) {
                   sourceParams={layer.sourceParams}
                   zoomExtent={layer.zoomExtent}
                   onStatusChange={onLayerLoadSuccess}
-                  suffix={'scrolly-'+ lIdx}
+                  idSuffix={'scrolly-'+ lIdx}
                   isHidden={isHidden}
                 />
               );

diff --git a/app/scripts/components/common/mapbox/layers/raster-timeseries.tsx b/app/scripts/components/common/mapbox/layers/raster-timeseries.tsx
@@ -45,7 +45,7 @@ interface MapLayerRasterTimeseriesProps {
   zoomExtent?: [number, number];
   onStatusChange?: (result: { status: ActionStatus; id: string }) => void;
   isHidden: boolean;
-  suffix?: string
+  idSuffix?: string
 }
 
 export interface StacFeature {
@@ -74,13 +74,14 @@ export function MapLayerRasterTimeseries(props: MapLayerRasterTimeseriesProps) {
     zoomExtent,
     onStatusChange,
     isHidden,
-    suffix = ''
+    idSuffix = ''
   } = props;
 
   const theme = useTheme();
   const { updateStyle } = useMapStyle();
 
   const minZoom = zoomExtent?.[0] ?? 0;
+  const generatorId = 'raster-timeseries' + idSuffix;
 
   // Status tracking.
   // A raster timeseries layer has a base layer and may have markers.
@@ -406,7 +407,7 @@ export function MapLayerRasterTimeseries(props: MapLayerRasterTimeseriesProps) {
       }
 
       updateStyle({
-        generatorId: 'raster-timeseries' + suffix,
+        generatorId,
         sources,
         layers
       });
@@ -420,7 +421,7 @@ export function MapLayerRasterTimeseries(props: MapLayerRasterTimeseriesProps) {
       points,
       haveSourceParamsChanged,
       isHidden,
-      suffix
+      generatorId
     ]
   );
 
@@ -430,12 +431,12 @@ export function MapLayerRasterTimeseries(props: MapLayerRasterTimeseriesProps) {
   useEffect(() => {
     return () => {
       updateStyle({
-        generatorId: 'raster-timeseries' + suffix,
+        generatorId,
         sources: {},
         layers: []
       });
     };
-  }, [updateStyle, suffix]);
+  }, [updateStyle, generatorId]);
 
   //
   // Listen to mouse events on the markers layer

diff --git a/app/scripts/components/common/mapbox/layers/vector-timeseries.tsx b/app/scripts/components/common/mapbox/layers/vector-timeseries.tsx
@@ -28,6 +28,7 @@ interface MapLayerVectorTimeseriesProps {
   zoomExtent?: [number, number];
   onStatusChange?: (result: { status: ActionStatus; id: string }) => void;
   isHidden: boolean;
+  idSuffix?: string;
 }
 
 export function MapLayerVectorTimeseries(props: MapLayerVectorTimeseriesProps) {
@@ -39,7 +40,8 @@ export function MapLayerVectorTimeseries(props: MapLayerVectorTimeseriesProps) {
     sourceParams,
     zoomExtent,
     onStatusChange,
-    isHidden
+    isHidden,
+    idSuffix = ''
   } = props;
 
   const theme = useTheme();
@@ -48,6 +50,8 @@ export function MapLayerVectorTimeseries(props: MapLayerVectorTimeseriesProps) {
 
   const [minZoom, maxZoom] = zoomExtent ?? [0, 20];
 
+  const generatorId = 'vector-timeseries' + idSuffix;
+
   //
   // Get the tiles url
   //
@@ -204,7 +208,7 @@ export function MapLayerVectorTimeseries(props: MapLayerVectorTimeseriesProps) {
     ].filter(Boolean) as AnyLayer[];
 
     updateStyle({
-      generatorId: 'vector-timeseries',
+      generatorId,
       sources,
       layers
     });
@@ -219,7 +223,8 @@ export function MapLayerVectorTimeseries(props: MapLayerVectorTimeseriesProps) {
     minZoom,
     maxZoom,
     isHidden,
-    haveSourceParamsChanged
+    haveSourceParamsChanged,
+    generatorId
   ]);
 
   //
@@ -228,12 +233,12 @@ export function MapLayerVectorTimeseries(props: MapLayerVectorTimeseriesProps) {
   useEffect(() => {
     return () => {
       updateStyle({
-        generatorId: 'vector-timeseries',
+        generatorId,
         sources: {},
         layers: []
       });
     };
-  }, [updateStyle]);
+  }, [updateStyle, generatorId]);
 
   //
   // Listen to mouse events on the markers layer