Handle visibility in a generic way

NASA-IMPACT · Sep 18, 2023 · 9f1f6c4 · 9f1f6c4
1 parent aa1d0c4
commit 9f1f6c4
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 28 deletions.
diff --git a/app/scripts/components/common/map/style-generators/raster-timeseries.tsx b/app/scripts/components/common/map/style-generators/raster-timeseries.tsx
@@ -11,7 +11,7 @@ import {
 } from 'mapbox-gl';
 import { useTheme } from 'styled-components';
 import { featureCollection, point } from '@turf/helpers';
-import { StacFeature } from '../types';
+import { BaseGeneratorParams, StacFeature } from '../types';
 import { useMapStyle } from '../styles';
 import {
   FIT_BOUNDS_PADDING,
@@ -36,15 +36,14 @@ import {
 // Whether or not to print the request logs.
 const LOG = true;
 
-export interface RasterTimeseriesProps {
+export interface RasterTimeseriesProps extends BaseGeneratorParams {
   id: string;
   stacCol: string;
   date: Date;
   sourceParams?: Record<string, any>;
   zoomExtent?: number[];
   bounds?: number[];
   onStatusChange?: (result: { status: ActionStatus; id: string }) => void;
-  isHidden?: boolean;
   isPositionSet?: boolean;
 }
 
@@ -69,8 +68,8 @@ export function RasterTimeseries(props: RasterTimeseriesProps) {
     zoomExtent,
     bounds,
     onStatusChange,
-    isHidden,
-    isPositionSet
+    isPositionSet,
+    hidden,
   } = props;
 
 
@@ -383,11 +382,8 @@ export function RasterTimeseries(props: RasterTimeseriesProps) {
             id: id,
             type: 'raster',
             source: id,
-            layout: {
-              visibility: isHidden ? 'none' : 'visible'
-            },
             paint: {
-              'raster-opacity': Number(!isHidden),
+              'raster-opacity': Number(!hidden),
               'raster-opacity-transition': {
                 duration: 320
               }
@@ -423,7 +419,6 @@ export function RasterTimeseries(props: RasterTimeseriesProps) {
             source: pointsSourceId,
             layout: {
               ...(markerLayout as any),
-              visibility: isHidden ? 'none' : 'visible',
               'icon-allow-overlap': true
             },
             paint: {
@@ -446,7 +441,8 @@ export function RasterTimeseries(props: RasterTimeseriesProps) {
         updateStyle({
           generatorId,
           sources,
-          layers
+          layers,
+          params: props as BaseGeneratorParams
         });
       }
 
@@ -464,7 +460,7 @@ export function RasterTimeseries(props: RasterTimeseriesProps) {
       minZoom,
       points,
       haveSourceParamsChanged,
-      isHidden,
+      hidden,
       generatorId
     ]
   );

diff --git a/app/scripts/components/common/map/styles.tsx b/app/scripts/components/common/map/styles.tsx
@@ -1,4 +1,4 @@
-import { AnySourceImpl, Style } from 'mapbox-gl';
+import { AnyLayer, AnySourceImpl, Layer, Style } from 'mapbox-gl';
 import React, {
   ReactNode,
   createContext,
@@ -7,18 +7,18 @@ import React, {
   useEffect,
   useState
 } from 'react';
-import { ExtendedLayer, GeneratorParams, LayerOrderPosition } from './types';
+import { ExtendedLayer, GeneratorStyleParams, LayerOrderPosition } from './types';
 
 
 interface StylesContextType {
-  updateStyle: (params: GeneratorParams) => void;
+  updateStyle: (params: GeneratorStyleParams) => void;
   style?: Style;
   updateMetaData?: (params: unknown) => void;
   metaData?: unknown;
 }
 
 export const StylesContext = createContext<StylesContextType>({
-  updateStyle: (params: GeneratorParams) => {
+  updateStyle: (params: GeneratorStyleParams) => {
     return params;
   }
 });
@@ -37,7 +37,7 @@ export type ExtendedStyle = ReturnType<typeof generateStyle>;
 // Takes in a dictionary associating each generator id with a series of
 //  Mapbox layers and sources to be added to the final style. Outputs
 //  a style object directly usable by the map instance.
-const generateStyle = (stylesData: Record<string, GeneratorParams>) => {
+const generateStyle = (stylesData: Record<string, GeneratorStyleParams>) => {
   let sources: Record<string, AnySourceImpl> = {};
   let layers: ExtendedLayer[] = [];
 
@@ -48,15 +48,22 @@ const generateStyle = (stylesData: Record<string, GeneratorParams>) => {
       ...generatorParams.sources
     };
 
-    const layersWithMeta = [
-      ...generatorParams.layers.map((layer) => {
-        const metadata = layer.metadata ?? {};
-        metadata.generatorId = generatorId;
-        return { ...layer, metadata };
-      })
-    ];
+    const generatorLayers = generatorParams.layers.map((generatorLayer) => {
+      const metadata = generatorLayer.metadata ?? {};
+      metadata.generatorId = generatorId;
 
-    layers = [...layers, ...layersWithMeta];
+      const mapLayer = { ...generatorLayer, metadata } as Layer;
+
+      if (generatorParams.params?.hidden) {
+        mapLayer.layout = {
+          ...mapLayer.layout,
+          visibility: 'none'
+        };
+      }
+      return mapLayer as ExtendedLayer;
+    });
+
+    layers = [...layers, ...generatorLayers];
   });
 
   // Allow sort as it uses a copy of the array so mutating is ok
@@ -93,14 +100,14 @@ export function Styles({
   onStyleUpdate?: (style: ExtendedStyle) => void;
   children?: ReactNode;
 }) {
-  const [stylesData, setStylesData] = useState<Record<string, GeneratorParams>>(
+  const [stylesData, setStylesData] = useState<Record<string, GeneratorStyleParams>>(
     {}
   );
 
   const [style, setStyle] = useState<Style | undefined>();
 
   const updateStyle = useCallback(
-    (params: GeneratorParams) => {
+    (params: GeneratorStyleParams) => {
       setStylesData((prevStyle) => ({
         ...prevStyle,
         [params.generatorId]: params

diff --git a/app/scripts/components/common/map/types.d.ts b/app/scripts/components/common/map/types.d.ts
@@ -6,11 +6,16 @@ export type ExtendedLayer = AnyLayer & {
     [key: string]: any;
   };
 };
-export interface GeneratorParams {
+
+export interface BaseGeneratorParams {
+  hidden?: boolean;
+}
+export interface GeneratorStyleParams {
   generatorId: string;
   layers: ExtendedLayer[];
   sources: Record<string, AnySourceImpl>;
   metadata?: Record<string, unknown>;
+  params?: BaseGeneratorParams;
 }
 
 export type LayerOrderPosition =

diff --git a/app/scripts/components/exploration/index.tsx b/app/scripts/components/exploration/index.tsx
@@ -144,6 +144,7 @@ function Exploration() {
                         colormap_name: 'inferno',
                         rescale: [0, 255]
                       }}
+                      hidden={true}
                     />
                   </Compare>
                 )}