From 47a0e53898a750732ccf8dfd9e12edec11b69008 Mon Sep 17 00:00:00 2001
From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com>
Date: Thu, 8 Aug 2024 17:12:34 -0400
Subject: [PATCH 1/3] reducing the number of fractional digits in the data.

---
 src/components/legend/legend.js | 100 ++++++++++++++++++++------------
 1 file changed, 64 insertions(+), 36 deletions(-)

diff --git a/src/components/legend/legend.js b/src/components/legend/legend.js
index 1bbe4c01..9bdea3cc 100644
--- a/src/components/legend/legend.js
+++ b/src/components/legend/legend.js
@@ -1,10 +1,13 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { Avatar, Box, Card, Stack } from '@mui/joy';
 import { useLayers } from '@context';
 import { getNamespacedEnvParam } from "@utils";
 
-export const MapLegend = () => {
+import Draggable from "react-draggable";
+import { Resizable } from "react-resizable";
+import "react-resizable/css/styles.css";
 
+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
@@ -54,40 +57,65 @@ export const MapLegend = () => {
         legendVisibilty = "hidden";
     }
 
+    // define the starting size of the card
+    const [newWidth, setNewWidth] = React.useState(50);
+    const [newHeight, setNewHeight] = React.useState(750);
+
+    // create a reference to avoid the findDOMNode deprecation issue
+    const nodeRef = React.useRef(null);
+
     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: 410,
-            borderRadius: 'sm',
-            visibility: legendVisibilty,
-        }}         
-        >
-            <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>
+        <Fragment>
+            <Draggable
+                nodeRef={ nodeRef }
+                handle="#draggable-card"
+                cancel={'[class*="MuiDialogContent-root"]'}>
+                <Resizable
+                    height={ newHeight }
+                    width={ newWidth }
+                    maxWidth=""
+                    onResize={ (event) => {
+                        console.log('width:' + newWidth + ', height:' + newHeight);
+                        setNewWidth(newWidth + event.movementX);
+                        setNewHeight(newHeight + event.movementY);
+                    }}
+                    axis="x"
+                >
+                    <Card
+                        ref={ nodeRef }
+                        aria-labelledby="draggable-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: newHeight,
+                            width: newWidth,
+                            padding: '10px',
+                            zIndex: 410,
+                            borderRadius: 'sm',
+                            visibility: legendVisibilty
+                        }}
+                    >
+                        <Stack
+                            sx={{ height: '100%'}}
+                            direciton="column"
+                            gap={ 1 }
+                            alignItems="center"
+                        >
+                            <Avatar variant="outlined" id="draggable-card"  sx={{ cursor: 'move' }}>
+                                <LegendIcon size="lg" color="primary" />
+                            </Avatar>
+
+                            <Box component="img" height={ newHeight } width={ newWidth } alt="Legend" src={ legendUrl } />
+                        </Stack>
+                    </Card>
+                </Resizable>
+            </Draggable>
+        </Fragment>
     );
 };
\ No newline at end of file

From c9b2009cd0c9eb26f967a6ebd5fbe2a8879d2fac Mon Sep 17 00:00:00 2001
From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com>
Date: Fri, 9 Aug 2024 10:24:39 -0400
Subject: [PATCH 2/3] adding drag/resize functionality to the legend

---
 src/components/legend/legend.js | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/legend/legend.js b/src/components/legend/legend.js
index 9bdea3cc..690ac401 100644
--- a/src/components/legend/legend.js
+++ b/src/components/legend/legend.js
@@ -58,12 +58,18 @@ export const MapLegend = () => {
     }
 
     // define the starting size of the card
-    const [newWidth, setNewWidth] = React.useState(50);
-    const [newHeight, setNewHeight] = React.useState(750);
+    const [newWidth, setNewWidth] = React.useState(75);
+    const [newHeight, setNewHeight] = React.useState(600);
 
     // create a reference to avoid the findDOMNode deprecation issue
     const nodeRef = React.useRef(null);
 
+    // declare the mins/maxes for the dialog content area
+    const minWidth = 40;
+    const minHeight = 450;
+    const maxWidth = 100;
+    const maxHeight = 700;
+
     return (
         <Fragment>
             <Draggable
@@ -93,25 +99,29 @@ export const MapLegend = () => {
                             transition: 'filter 250ms',
                             filter: 'opacity(0.9)',
                             '&:hover': { filter: 'opacity(1.0)' },
-                            height: newHeight,
-                            width: newWidth,
                             padding: '10px',
                             zIndex: 410,
                             borderRadius: 'sm',
-                            visibility: legendVisibilty
+                            visibility: legendVisibilty,
+                            height: newHeight+60, width: newWidth,
+                            minWidth: minWidth, minHeight: minHeight+70, maxWidth: maxWidth, maxHeight: maxHeight+70
                         }}
                     >
                         <Stack
-                            sx={{ height: '100%'}}
+                            //sx={{ height: '100%' }}
                             direciton="column"
                             gap={ 1 }
                             alignItems="center"
                         >
-                            <Avatar variant="outlined" id="draggable-card"  sx={{ cursor: 'move' }}>
+                            <Avatar variant="outlined" id="draggable-card"  sx={{ m: 0, p: 0, height: 40, cursor: 'move' }}>
                                 <LegendIcon size="lg" color="primary" />
                             </Avatar>
 
-                            <Box component="img" height={ newHeight } width={ newWidth } alt="Legend" src={ legendUrl } />
+                            <Box component="img" alt="Legend" src={ legendUrl }
+                            //     height={ newHeight } width={ newWidth }
+                                 sx={{ height: newHeight, width: newWidth,
+                                 minWidth: minWidth, minHeight: minHeight, maxWidth: maxWidth, maxHeight: maxHeight }}
+                            />
                         </Stack>
                     </Card>
                 </Resizable>

From a6a29f0a21dc242ff865e85264255e751a43f09e Mon Sep 17 00:00:00 2001
From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com>
Date: Fri, 9 Aug 2024 10:38:08 -0400
Subject: [PATCH 3/3] removing maxWidth from control

---
 src/components/legend/legend.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/legend/legend.js b/src/components/legend/legend.js
index 690ac401..5719ed89 100644
--- a/src/components/legend/legend.js
+++ b/src/components/legend/legend.js
@@ -79,7 +79,7 @@ export const MapLegend = () => {
                 <Resizable
                     height={ newHeight }
                     width={ newWidth }
-                    maxWidth=""
+                    //maxWidth=""
                     onResize={ (event) => {
                         console.log('width:' + newWidth + ', height:' + newHeight);
                         setNewWidth(newWidth + event.movementX);