From 4d5b06ce9b310d59eb26a701363a4267ffb0eb75 Mon Sep 17 00:00:00 2001
From: Lisa Stillwell <lisa@renci.org>
Date: Tue, 15 Oct 2024 16:44:50 -0400
Subject: [PATCH 1/4] #295 changes to move layer opacity to settings

---
 src/components/map/adcirc-raster-layer.js     | 24 +++++++++++++--
 src/components/map/default-layers.js          |  4 +--
 .../trays/layers/layer-card-actions.js        | 10 +++----
 .../trays/settings/colormaps/style-edit.js    | 30 +++++++++++++++++++
 src/context/settings.js                       | 22 ++++++++++++++
 5 files changed, 80 insertions(+), 10 deletions(-)

diff --git a/src/components/map/adcirc-raster-layer.js b/src/components/map/adcirc-raster-layer.js
index 9a405c4f..bbad1d90 100644
--- a/src/components/map/adcirc-raster-layer.js
+++ b/src/components/map/adcirc-raster-layer.js
@@ -4,6 +4,10 @@ import SldStyleParser from 'geostyler-sld-parser';
 import { getNamespacedEnvParam, restoreColorMapType } from '@utils/map-utils';
 import { useSettings } from '@context';
 
+const MAXELE = 'maxele';
+const MAXWVEL = 'maxwvel';
+const SWAN = 'swan';
+
 export const AdcircRasterLayer = (layer) => {
     const sldParser = new SldStyleParser();
     const gs_wfs_url = `${ getNamespacedEnvParam('REACT_APP_GS_DATA_URL') }`;
@@ -11,11 +15,13 @@ export const AdcircRasterLayer = (layer) => {
 
     const {
         mapStyle,
+        layerOpacity,
     } = useSettings();
 
     const [currentStyle, setCurrentStyle] = useState("");
+    const [productType, setProductType] = useState("");
 
-   useEffect(() => {
+    useEffect(() => {
         if(layer.layer.properties) {
             let style = "";
             switch(layer.layer.properties.product_type) {
@@ -42,7 +48,19 @@ export const AdcircRasterLayer = (layer) => {
                     });
                 }); 
         }
-      }, [mapStyle]);
+    }, [mapStyle]);
+
+    useEffect(() => {
+        // get current product layer in order to set opacity
+        if (layer.layer.properties.product_type.includes(MAXWVEL)) 
+            setProductType(MAXWVEL);
+        else
+        if (layer.layer.properties.product_type.includes(SWAN)) 
+            setProductType(SWAN);
+        else
+        setProductType(MAXELE);
+    }, [layerOpacity]);
+
       
     // memorizing this params object prevents
     // that map flicker on state changes.
@@ -57,7 +75,7 @@ export const AdcircRasterLayer = (layer) => {
             url={gs_wms_url}
             layers={layer.layer.layers}
             params={wmsLayerParams}
-            opacity={layer.layer.state.opacity}
+            opacity={layerOpacity[productType].current}
         />
     );
 
diff --git a/src/components/map/default-layers.js b/src/components/map/default-layers.js
index 92748367..396520f6 100644
--- a/src/components/map/default-layers.js
+++ b/src/components/map/default-layers.js
@@ -13,14 +13,14 @@ const newLayerDefaultState = (layer) => {
     if (['obs', 'maxele63'].includes(product_type)) {
         return ({
             visible: true,
-            opacity: 1.0,
+            //opacity: 1.0,
             style: "",
         });
     }
   
     return ({
         visible: false,
-        opacity: 1.0,
+        //opacity: 1.0,
         style: "",
     });
   };
diff --git a/src/components/trays/layers/layer-card-actions.js b/src/components/trays/layers/layer-card-actions.js
index 09d0a3d7..1c097c13 100644
--- a/src/components/trays/layers/layer-card-actions.js
+++ b/src/components/trays/layers/layer-card-actions.js
@@ -29,12 +29,12 @@ export const LayerActions = ({ layer }) => {
         justifyContent="space-between"
       >
         <TabList size="sm" sx={{ flex: 1 }}>
-          <Tab variant="plain" color="primary">
+{/*           <Tab variant="plain" color="primary">
             <ListItemDecorator>
               <AppearanceIcon fontSize="sm" />
             </ListItemDecorator>
             Appearance
-          </Tab>
+          </Tab> */}
           <Tab variant="plain" color="primary">
             <ListItemDecorator>
               <MetadataIcon fontSize="sm" />
@@ -44,7 +44,7 @@ export const LayerActions = ({ layer }) => {
         </TabList>
       </Stack>
 
-      <TabPanel value={ 0 } sx={{
+{/*       <TabPanel value={ 0 } sx={{
         '.MuiFormLabel-root': {
           width: '120px',
           justifyContent: 'flex-end',
@@ -77,9 +77,9 @@ export const LayerActions = ({ layer }) => {
             alignItems: 'center',
           }}>Coming soon...</Box>
         </FormControl>
-      </TabPanel>
+      </TabPanel> */}
       
-      <TabPanel value={ 1 }>
+      <TabPanel value={ 0 }>
         <Box component="pre" sx={{
           fontSize: '75%',
           color: 'text.primary',
diff --git a/src/components/trays/settings/colormaps/style-edit.js b/src/components/trays/settings/colormaps/style-edit.js
index 2790d2b3..536c495e 100644
--- a/src/components/trays/settings/colormaps/style-edit.js
+++ b/src/components/trays/settings/colormaps/style-edit.js
@@ -7,6 +7,8 @@ import {
   Select,
   Button,
   Typography,
+  Slider,
+  Box,
 } from '@mui/joy';
 import SldStyleParser from 'geostyler-sld-parser';
 import { ColorMapEditor } from '@renci/apsviz-geostyler';
@@ -26,6 +28,7 @@ export const StyleEditor = () => {
 
     const {
         mapStyle,
+        layerOpacity,
     } = useSettings();
 
     const [colormap, setColormap] = useState();
@@ -183,6 +186,20 @@ export const StyleEditor = () => {
         });
     };
 
+    const getProductType = () => {
+        let type = MAXELE;
+
+        if (style) {
+            if (style.includes(MAXWVEL)) type = MAXWVEL;
+            else
+            if (style.includes(SWAN)) type = SWAN;
+        }
+
+        return type;
+    }
+
+    const productType = getProductType();
+
     return (
         <Stack direction="column" gap={ 2 } alignItems="left">
             <Select placeholder="Choose Product Type To Style ..." onChange={handleProductChange}>
@@ -195,6 +212,19 @@ export const StyleEditor = () => {
             </Select>
             {colormap &&
             <Stack direction="column" gap={ 1 } alignItems="left">
+                <Box width={300} >
+                    <Typography level="title-md">Opacity</Typography>
+                    <Slider
+                        aria-label="opacity slider"
+                        value={ layerOpacity[productType].current }
+                        step={ 0.01 }
+                        min={ 0.01 }
+                        max={ 1.0 }
+                        valueLabelDisplay="auto"
+                        sx={{ mr: '10px'}}
+                        onChange={ (event, newValue) => layerOpacity[productType].set(newValue) }
+                    />
+                </Box>
                 <ColorMapEditor colorMap={colormap} extendedField={extendedField} onChange={onColorMapChange}/>
                 <Button variant="soft" onClick={saveStyle} sx={{width: "200px"}}>
                     <Typography level="title-md">Save New Colormap</Typography>
diff --git a/src/context/settings.js b/src/context/settings.js
index 7be554ff..6cd4c832 100644
--- a/src/context/settings.js
+++ b/src/context/settings.js
@@ -2,6 +2,7 @@ import React, {
   createContext,
   useCallback,
   useContext,
+  useState,
   useMemo
 } from "react";
 
@@ -32,6 +33,12 @@ export const SettingsProvider = ({ children }) => {
   const [storedMaxwvelStyle, setStoredMaxwvelStyle] = useLocalStorage('maxwvel', maxwvelStyle);
   const [storedSwanStyle, setStoredSwanStyle] = useLocalStorage('swan', swanStyle);
 
+  // opacity now handled at layer type level
+  // not saving in local storage for now
+  const [maxeleOpacity, setMaxeleOpacity] = useState(1.0);
+  const [maxwvelOpacity, setMaxwvelOpacity] = useState(1.0);
+  const [swanOpacity, setSwanOpacity] = useState(1.0);
+
   return (
     <SettingsContext.Provider value={{
       booleanValue,
@@ -56,6 +63,21 @@ export const SettingsProvider = ({ children }) => {
 
         }
       },
+
+      layerOpacity: {
+        maxele: {
+          current: maxeleOpacity,
+          set: setMaxeleOpacity,
+        },
+        maxwvel: {
+          current: maxwvelOpacity,
+          set: setMaxwvelOpacity,
+        },
+        swan: {
+          current: swanOpacity,
+          set: setSwanOpacity,
+        }
+      },
     }}>
       { children }
     </SettingsContext.Provider>

From 76dc185974ab6c6ab2bd6b7b4d23ede6153962cd Mon Sep 17 00:00:00 2001
From: Lisa Stillwell <lisa@renci.org>
Date: Thu, 17 Oct 2024 14:11:10 -0400
Subject: [PATCH 2/4] #295 updated to make layer opacity persistant

---
 .../trays/layers/layer-card-actions.js        |  7 -------
 .../trays/settings/colormaps/style-edit.js    |  2 +-
 src/components/trays/settings/index.js        |  4 ++--
 src/context/settings.js                       | 20 +++++++++----------
 4 files changed, 12 insertions(+), 21 deletions(-)

diff --git a/src/components/trays/layers/layer-card-actions.js b/src/components/trays/layers/layer-card-actions.js
index 1c097c13..6fb80dad 100644
--- a/src/components/trays/layers/layer-card-actions.js
+++ b/src/components/trays/layers/layer-card-actions.js
@@ -2,10 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {
   Box,
-  FormControl,
-  FormLabel,
   ListItemDecorator,
-  Slider,
   Tab,
   TabList,
   Tabs,
@@ -13,14 +10,10 @@ import {
   Stack,
 } from '@mui/joy';
 import {
-  FormatPaint as AppearanceIcon,
   DataObject as MetadataIcon,
 } from '@mui/icons-material';
-import { useLayers, useSettings } from '@context';
 
 export const LayerActions = ({ layer }) => {
-  const { darkMode } = useSettings();
-  const { setLayerOpacity } = useLayers();
 
   return (
     <Tabs defaultValue={0}>
diff --git a/src/components/trays/settings/colormaps/style-edit.js b/src/components/trays/settings/colormaps/style-edit.js
index 536c495e..1cfffb89 100644
--- a/src/components/trays/settings/colormaps/style-edit.js
+++ b/src/components/trays/settings/colormaps/style-edit.js
@@ -196,7 +196,7 @@ export const StyleEditor = () => {
         }
 
         return type;
-    }
+    };
 
     const productType = getProductType();
 
diff --git a/src/components/trays/settings/index.js b/src/components/trays/settings/index.js
index d6e07fa7..fdbd58ac 100644
--- a/src/components/trays/settings/index.js
+++ b/src/components/trays/settings/index.js
@@ -14,10 +14,10 @@ export const trayContents = () => (
   <Stack gap={ 1 } p={ 1 }>
     <Typography level="title-lg">Set/Unset Dark Mode</Typography>
     <DarkModeToggle />
-    <Divider />
+    <Divider sx={{marginTop: 3}}/>
     <Typography level="title-lg">Select a Basemap</Typography>
     <BaseMaps />
-    <Divider />
+    <Divider sx={{marginTop: 3}}/>
     <Typography mb={1} level="title-lg">Edit ADCIRC Layer Colormaps</Typography>
     <DataRangeEdit />
   </Stack>
diff --git a/src/context/settings.js b/src/context/settings.js
index 6cd4c832..898ee852 100644
--- a/src/context/settings.js
+++ b/src/context/settings.js
@@ -2,7 +2,6 @@ import React, {
   createContext,
   useCallback,
   useContext,
-  useState,
   useMemo
 } from "react";
 
@@ -34,10 +33,9 @@ export const SettingsProvider = ({ children }) => {
   const [storedSwanStyle, setStoredSwanStyle] = useLocalStorage('swan', swanStyle);
 
   // opacity now handled at layer type level
-  // not saving in local storage for now
-  const [maxeleOpacity, setMaxeleOpacity] = useState(1.0);
-  const [maxwvelOpacity, setMaxwvelOpacity] = useState(1.0);
-  const [swanOpacity, setSwanOpacity] = useState(1.0);
+  const [storedMaxeleOpacity, setStoredMaxeleOpacity] = useLocalStorage('maxele_opacity', 1.0);
+  const [storedMaxwvelOpacity, setStoredMaxwvelOpacity] = useLocalStorage('maxwvel_opacity',1.0);
+  const [storedSwanOpacity, setStoredSwanOpacity] = useLocalStorage('swan_opacity',1.0);
 
   return (
     <SettingsContext.Provider value={{
@@ -66,16 +64,16 @@ export const SettingsProvider = ({ children }) => {
 
       layerOpacity: {
         maxele: {
-          current: maxeleOpacity,
-          set: setMaxeleOpacity,
+          current: storedMaxeleOpacity,
+          set: setStoredMaxeleOpacity,
         },
         maxwvel: {
-          current: maxwvelOpacity,
-          set: setMaxwvelOpacity,
+          current: storedMaxwvelOpacity,
+          set: setStoredMaxwvelOpacity,
         },
         swan: {
-          current: swanOpacity,
-          set: setSwanOpacity,
+          current: storedSwanOpacity,
+          set: setStoredSwanOpacity,
         }
       },
     }}>

From c0418f772c5992c383e9a2ce3868cf074b7315c9 Mon Sep 17 00:00:00 2001
From: Lisa Stillwell <lisa@renci.org>
Date: Fri, 18 Oct 2024 13:51:02 -0400
Subject: [PATCH 3/4] added dividers to keep sections straight

---
 src/components/trays/settings/colormaps/style-edit.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/trays/settings/colormaps/style-edit.js b/src/components/trays/settings/colormaps/style-edit.js
index 1cfffb89..ddf8cb9b 100644
--- a/src/components/trays/settings/colormaps/style-edit.js
+++ b/src/components/trays/settings/colormaps/style-edit.js
@@ -9,6 +9,7 @@ import {
   Typography,
   Slider,
   Box,
+  Divider,
 } from '@mui/joy';
 import SldStyleParser from 'geostyler-sld-parser';
 import { ColorMapEditor } from '@renci/apsviz-geostyler';
@@ -212,8 +213,9 @@ export const StyleEditor = () => {
             </Select>
             {colormap &&
             <Stack direction="column" gap={ 1 } alignItems="left">
+                 <Divider />
                 <Box width={300} >
-                    <Typography level="title-md">Opacity</Typography>
+                    <Typography level="title-md">LayerOpacity</Typography>
                     <Slider
                         aria-label="opacity slider"
                         value={ layerOpacity[productType].current }
@@ -225,10 +227,13 @@ export const StyleEditor = () => {
                         onChange={ (event, newValue) => layerOpacity[productType].set(newValue) }
                     />
                 </Box>
+                <Divider />
+                <Typography level="title-md">ColorMap</Typography>
                 <ColorMapEditor colorMap={colormap} extendedField={extendedField} onChange={onColorMapChange}/>
                 <Button variant="soft" onClick={saveStyle} sx={{width: "200px"}}>
                     <Typography level="title-md">Save New Colormap</Typography>
                 </Button>
+                <Divider />
             </Stack>}
         </Stack>
     );

From 844bcbc7ebcec07cdffaa03d2a2d01c8f1e7d5c8 Mon Sep 17 00:00:00 2001
From: Lisa Stillwell <lisa@renci.org>
Date: Fri, 18 Oct 2024 14:18:23 -0400
Subject: [PATCH 4/4] added space for LayerOpacity

---
 src/components/trays/settings/colormaps/style-edit.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/trays/settings/colormaps/style-edit.js b/src/components/trays/settings/colormaps/style-edit.js
index ddf8cb9b..aa066d73 100644
--- a/src/components/trays/settings/colormaps/style-edit.js
+++ b/src/components/trays/settings/colormaps/style-edit.js
@@ -215,7 +215,7 @@ export const StyleEditor = () => {
             <Stack direction="column" gap={ 1 } alignItems="left">
                  <Divider />
                 <Box width={300} >
-                    <Typography level="title-md">LayerOpacity</Typography>
+                    <Typography level="title-md">Layer Opacity</Typography>
                     <Slider
                         aria-label="opacity slider"
                         value={ layerOpacity[productType].current }