Merge pull request #300 from RENCI/issue295

Issue295

src/components/map/adcirc-raster-layer.js

@@ -4,16 +4,22 @@ import SldStyleParser from 'geostyler-sld-parser';
 import { getNamespacedEnvParam, markClicked, restoreColorMapType } from '@utils/map-utils';
 import { useLayers, 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') }`;
     const gs_wms_url = gs_wfs_url + 'wms';
 
     const {
         mapStyle,
+        layerOpacity,
     } = useSettings();
 
     const [currentStyle, setCurrentStyle] = useState("");
+    const [productType, setProductType] = useState("");
 
     useEffect(() => {
         if(layer.layer.properties) {
@@ -44,6 +50,18 @@ export const AdcircRasterLayer = (layer) => {
         }
     }, [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]);
+
+
     // get the observation points selected, default layers and alert message from state
     const {
         setSelectedObservations,
@@ -135,7 +153,7 @@ export const AdcircRasterLayer = (layer) => {
             url={gs_wms_url}
             layers={layer.layer.layers}
             params={wmsLayerParams}
-            opacity={layer.layer.state.opacity}
+            opacity={layerOpacity[productType].current}
         />
     );
 };

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: "",
     });
   };

src/components/trays/layers/layer-card-actions.js

@@ -2,25 +2,18 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {
   Box,
-  FormControl,
-  FormLabel,
   ListItemDecorator,
-  Slider,
   Tab,
   TabList,
   Tabs,
   TabPanel,
   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}>
@@ -29,12 +22,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 +37,7 @@ export const LayerActions = ({ layer }) => {
         </TabList>
       </Stack>
 
-      <TabPanel value={ 0 } sx={{
+{/*       <TabPanel value={ 0 } sx={{
         '.MuiFormLabel-root': {
           width: '120px',
           justifyContent: 'flex-end',
@@ -77,9 +70,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',

src/components/trays/settings/colormaps/style-edit.js

@@ -7,6 +7,9 @@ import {
   Select,
   Button,
   Typography,
+  Slider,
+  Box,
+  Divider,
 } from '@mui/joy';
 import SldStyleParser from 'geostyler-sld-parser';
 import { ColorMapEditor } from '@renci/apsviz-geostyler';
@@ -26,6 +29,7 @@ export const StyleEditor = () => {
 
     const {
         mapStyle,
+        layerOpacity,
     } = useSettings();
 
     const [colormap, setColormap] = useState();
@@ -183,6 +187,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,10 +213,27 @@ export const StyleEditor = () => {
             </Select>
             {colormap &&
             <Stack direction="column" gap={ 1 } alignItems="left">
+                 <Divider />
+                <Box width={300} >
+                    <Typography level="title-md">Layer 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>
+                <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>
     );

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>

src/context/settings.js

@@ -32,6 +32,11 @@ export const SettingsProvider = ({ children }) => {
   const [storedMaxwvelStyle, setStoredMaxwvelStyle] = useLocalStorage('maxwvel', maxwvelStyle);
   const [storedSwanStyle, setStoredSwanStyle] = useLocalStorage('swan', swanStyle);
 
+  // opacity now handled at layer type level
+  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={{
       booleanValue,
@@ -56,6 +61,21 @@ export const SettingsProvider = ({ children }) => {
 
         }
       },
+
+      layerOpacity: {
+        maxele: {
+          current: storedMaxeleOpacity,
+          set: setStoredMaxeleOpacity,
+        },
+        maxwvel: {
+          current: storedMaxwvelOpacity,
+          set: setStoredMaxwvelOpacity,
+        },
+        swan: {
+          current: storedSwanOpacity,
+          set: setStoredSwanOpacity,
+        }
+      },
     }}>
       { children }
     </SettingsContext.Provider>