wire up layer visibility, with only the default layers, in a p.o.c. k…

…ind of way fix white-space value
RENCI · May 1, 2024 · a109812 · a109812
1 parent 46f4939
commit a109812
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 37 deletions.
diff --git a/src/components/map/default-layers.js b/src/components/map/default-layers.js
@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { WMSTileLayer, GeoJSON } from 'react-leaflet';
 import { CircleMarker } from 'leaflet';
 import { useLayers } from '@context';
@@ -87,7 +87,12 @@ export const DefaultLayers = () => {
               data.workbench.forEach(function (layer_id) {
                 const layer = getCatalogEntry(data.catalog, layer_id);
                 if (layer)
-                    layer_list.push(layer);
+                    layer_list.push({
+                        ...layer,
+                        state: {
+                            visible: true,
+                        }
+                    });
 
                     // TODO: do we really need to do this here??!
                     // if this is an obs layer, need to retrieve
@@ -130,15 +135,12 @@ export const DefaultLayers = () => {
         getDefaultLayers().then();
       }, []);
 
-    //console.log("defaultModelLayers: " + JSON.stringify(defaultModelLayers, null, 2))
-
-    return (
-        <>
-        {defaultModelLayers.map((layer, index) => {
+    return defaultModelLayers
+        .filter(layer => layer.state.visible)
+        .map((layer, index) => {
             const pieces = layer.id.split('-');
             const type = pieces[pieces.length-1];
-            //console.log("type: " + JSON.stringify(type, null, 2))
-            if( type === "obs" && obsData !== "") {
+            if (type === "obs" && obsData !== "") {
                 //console.log("obsData: " + JSON.stringify(obsData, null, 2));
                 return (
                     <GeoJSON
@@ -148,8 +150,7 @@ export const DefaultLayers = () => {
                         onEachFeature = {onEachObsFeature}
                     />
                 );
-            }
-            else {
+            } else {
                 return (
                     <WMSTileLayer
                         key = {index}
@@ -168,7 +169,5 @@ export const DefaultLayers = () => {
                     />
                 );
             }
-        })};
-        </>
-    );
+        });
 };
diff --git a/src/components/trays/layers/list.js b/src/components/trays/layers/list.js
@@ -18,15 +18,12 @@ import {
 import { useLayers } from '@context';
 
 export const LayersList = () => {
-  const { defaultModelLayers } = useLayers();
+  const { defaultModelLayers, toggleLayerVisibility } = useLayers();
   const layers = [...defaultModelLayers];
 
-  console.log(layers);
+  console.table(layers[0]);
 
   const [expandedIds, setExpandedIds] = useState(new Set());
-  // of course, this is dummy state.
-  // real state will be maintained in some higher-up context.
-  const [visibleIds, setVisibleIds] = useState(new Set());
 
   const handleToggleExpansion = id => () => {
     const _expandedIds = new Set([...expandedIds]);
@@ -39,23 +36,12 @@ export const LayersList = () => {
     setExpandedIds(_expandedIds);
   };
 
-  const handleToggleVisibilitySwitch = id => () => {
-    const _visibleIds = new Set([...visibleIds]);
-    if (_visibleIds.has(id)) {
-      _visibleIds.delete(id);
-      setVisibleIds(_visibleIds);
-      return;
-    }
-    _visibleIds.add(id);
-    setVisibleIds(_visibleIds);
-  };
-
   return (
     <AccordionGroup variant="soft">
       {
         layers.map(layer => {
           const isExpanded = expandedIds.has(layer.id);
-          const isVisible = visibleIds.has(layer.id);
+          const isVisible = layer.state.visible;
 
           return (
             <Accordion
@@ -107,7 +93,7 @@ export const LayersList = () => {
                     sx={{
                       overflow: 'hidden',
                       textOverflow: 'ellipsis',
-                      whiteSpace: 'no-wrap',
+                      whiteSpace: 'nowrap',
                     }}
                   >
                     { layer.layers }
@@ -116,8 +102,8 @@ export const LayersList = () => {
 
                 <Switch
                   size="sm"
-                  onChange={ handleToggleVisibilitySwitch(layer.id) }
                   checked={ isVisible }
+                  onChange={ () => toggleLayerVisibility(layer.id) }
                 />
 
                 <IconButton onClick={ handleToggleExpansion(layer.id) }>

diff --git a/src/context/map-context.js b/src/context/map-context.js
@@ -5,9 +5,25 @@ export const LayersContext = createContext({});
 export const useLayers = () => useContext(LayersContext);
 
 export const LayersProvider = ({ children }) => {
-    const [defaultModelLayers, setDefaultModelLayers] = useState([]);
-    const [filteredModelLayers, setFilteredModelLayers] = useState([]);
-    const [map, setMap] = useState(null);
+  const [defaultModelLayers, setDefaultModelLayers] = useState([]);
+  const [filteredModelLayers, setFilteredModelLayers] = useState([]);
+  const [map, setMap] = useState(null);
+
+  const toggleLayerVisibility = id => {
+    const newLayers = [...defaultModelLayers];
+    const index = newLayers.findIndex(l => l.id === id);
+    if (index === -1) {
+      new Error('Could not locate layer', id);
+      return;
+    }
+    const alteredLayer = newLayers[index];
+    alteredLayer.state.visible = !alteredLayer.state.visible;
+    setDefaultModelLayers([
+      ...newLayers.slice(0, index),
+      { ...alteredLayer },
+      ...newLayers.slice(index + 1),
+    ]);
+  };
 
   return (
     <LayersContext.Provider
@@ -17,7 +33,8 @@ export const LayersProvider = ({ children }) => {
         defaultModelLayers,
         setDefaultModelLayers,
         filteredModelLayers,
-        setFilteredModelLayers
+        setFilteredModelLayers,
+        toggleLayerVisibility,
       }}
     >
       {children}