From c797d6bea84b7e653cc9d86c48546f41f9206c00 Mon Sep 17 00:00:00 2001
From: Lisa Stillwell <lisa@renci.org>
Date: Wed, 5 Jun 2024 13:48:06 -0400
Subject: [PATCH 1/2] first draft of map legend

---
 src/app.js                      |  2 ++
 src/components/legend/index.js  |  1 +
 src/components/legend/legend.js | 64 +++++++++++++++++++++++++++++++++
 3 files changed, 67 insertions(+)
 create mode 100644 src/components/legend/index.js
 create mode 100644 src/components/legend/legend.js

diff --git a/src/app.js b/src/app.js
index 4425dab2..eae1e6ff 100644
--- a/src/app.js
+++ b/src/app.js
@@ -4,6 +4,7 @@ import { ObservationDialog } from "@components/dialog/observation-dialog";
 import { useLayers } from '@context';
 import { Sidebar } from '@components/sidebar';
 import { ControlPanel } from '@components/control-panel';
+import { MapLegend } from '@components/legend';
 
 export const App = () => {
     // install the selected observation list from the layer context
@@ -23,6 +24,7 @@ export const App = () => {
             <Map />
             <Sidebar />
             <ControlPanel/>
+            <MapLegend />
         </Fragment>
     );
 };
diff --git a/src/components/legend/index.js b/src/components/legend/index.js
new file mode 100644
index 00000000..74075732
--- /dev/null
+++ b/src/components/legend/index.js
@@ -0,0 +1 @@
+export * from './legend';
\ No newline at end of file
diff --git a/src/components/legend/legend.js b/src/components/legend/legend.js
new file mode 100644
index 00000000..38f12bb1
--- /dev/null
+++ b/src/components/legend/legend.js
@@ -0,0 +1,64 @@
+import React from 'react';
+import { Avatar, Box, Card, Stack } from '@mui/joy';
+import { useLayers } from '@context';
+
+export const MapLegend = () => {
+
+    const {
+        defaultModelLayers,
+        layerTypes,
+    } = useLayers();
+
+    let LegendIcon = layerTypes['maxele63'].icon;
+    let legendUrl = '';
+
+    // need to find the top-most layer that is currently visible
+    const legendLayer = defaultModelLayers.find(layer => layer.state.visible && layer.properties.product_type !== 'obs');
+    if (legendLayer) {
+        LegendIcon = layerTypes[legendLayer.properties.product_type].icon;
+
+        // now build appropriate url for retrieving the legend graphic
+        const workspace = legendLayer.layers.split(':')[0];
+        const layerName = legendLayer.layers.split(':')[1];
+        legendUrl = `${process.env.REACT_APP_GS_DATA_URL}` + 
+                    workspace + "/" +
+                    "ows?service=WMS&request=GetLegendGraphic&TRANSPARENT=TRUE&LEGEND_OPTIONS=layout:verticle&format=image%2Fpng&width=20&height=20&layer=" +
+                    layerName;
+    }
+
+    return (
+        <Card
+            variant="soft"
+            sx={{
+            p: 0,
+            position: 'absolute',
+            top: 'calc(4 * var(--joy-spacing))',
+            right: 'calc(4 * var(--joy-spacing))',
+            transition: 'filter 250ms',
+            filter: 'opacity(0.9)',
+            '&:hover': { filter: 'opacity(1.0)' },
+            height: 'auto',
+            width: '100px',
+            padding: '10px',
+            zIndex: 999,
+            borderRadius: 'sm',
+        }}         
+        >
+            <Stack 
+                sx={{ height: '100%'}}
+                direciton="column" 
+                gap={ 1 } 
+                alignItems="center">
+                <Avatar variant="outlined">
+                    <LegendIcon size="lg" color="primary" />
+                </Avatar>
+                <Box
+                    component="img"
+                    width="50px"
+                    alt="Legend"
+                    src={legendUrl}
+                />
+            </Stack>
+        </Card>
+    );
+};
\ No newline at end of file

From 496a5dcf72be5b4fcefeab11869f5c2d3cb435c7 Mon Sep 17 00:00:00 2001
From: Lisa Stillwell <lisa@renci.org>
Date: Fri, 7 Jun 2024 11:14:19 -0400
Subject: [PATCH 2/2] add real style names

---
 src/components/legend/legend.js | 27 ++++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/components/legend/legend.js b/src/components/legend/legend.js
index 38f12bb1..ee579130 100644
--- a/src/components/legend/legend.js
+++ b/src/components/legend/legend.js
@@ -4,10 +4,23 @@ import { useLayers } from '@context';
 
 export const MapLegend = () => {
 
+    // set correct map styles for layer name
+    // may want to move this somewhere else later
+    // for the implementation of user designed styles
+    const layerStyles = {
+        'maxele63': 'maxele_style_v3ui',
+        'maxwvel63': 'maxwvel_style_v3ui',
+        'swan_HS_max63': 'swan_style_v3ui',
+        'maxinundepth63': 'maxele_style_v3ui',
+        'maxele_level_downscaled_epsg4326': 'maxele_style_v3ui',
+        'hec_ras_water_surface': 'maxele_style_v3ui'
+    };
+
     const {
         defaultModelLayers,
         layerTypes,
     } = useLayers();
+    let legendVisibilty = "hidden";
 
     let LegendIcon = layerTypes['maxele63'].icon;
     let legendUrl = '';
@@ -20,10 +33,21 @@ export const MapLegend = () => {
         // now build appropriate url for retrieving the legend graphic
         const workspace = legendLayer.layers.split(':')[0];
         const layerName = legendLayer.layers.split(':')[1];
+        const style = layerStyles[layerName.substring(layerName.indexOf('_')+1)];
+
         legendUrl = `${process.env.REACT_APP_GS_DATA_URL}` + 
                     workspace + "/" +
                     "ows?service=WMS&request=GetLegendGraphic&TRANSPARENT=TRUE&LEGEND_OPTIONS=layout:verticle&format=image%2Fpng&width=20&height=20&layer=" +
-                    layerName;
+                    layerName + 
+                    "&style=" + style;
+    
+        // all set - show the legend
+        legendVisibilty = "visible";
+
+    }
+    else {
+        // if no layers turned on, hide legend
+        legendVisibilty = "hidden";
     }
 
     return (
@@ -42,6 +66,7 @@ export const MapLegend = () => {
             padding: '10px',
             zIndex: 999,
             borderRadius: 'sm',
+            visibility: legendVisibilty,
         }}         
         >
             <Stack