Merge pull request #139 from RENCI/#38-resizeable-obs-dialog

#38 resizeable obs dialog
RENCI · Aug 2, 2024 · da0ac9d · da0ac9d
2 parents 93a73e0 + 19d5b93
commit da0ac9d
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 51 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -74,6 +74,7 @@
     "react-leaflet": "^4.2.1",
     "react-map-gl": "^7.1.7",
     "react-query": "^3.39.3",
+    "react-resizable": "^3.0.5",
     "react-router-dom": "^6.23.1",
     "react-timeago": "^7.2.0",
     "recharts": "^2.12.6",

diff --git a/src/components/dialog/base-floating-dialog.js b/src/components/dialog/base-floating-dialog.js
@@ -1,15 +1,21 @@
-import React, {Fragment} from 'react';
-import Draggable from 'react-draggable';
+import React, { Fragment } from 'react';
+import { Box, Stack } from '@mui/joy';
+import Draggable from "react-draggable";
 import PropTypes from 'prop-types';
 
-import IconButton from '@mui/material/IconButton';
+import { Resizable } from "react-resizable";
+import "react-resizable/css/styles.css";
+
+import { markUnclicked } from '@utils/map-utils';
+
 import CssBaseline from '@mui/material/CssBaseline';
 import Dialog from '@mui/material/Dialog';
 import DialogContent from '@mui/material/DialogActions';
 import DialogTitle from '@mui/material/DialogTitle';
+
 import Paper from '@mui/material/Paper';
 import Slide from '@mui/material/Slide';
-import { markUnclicked } from '@utils/map-utils';
+import IconButton from '@mui/material/IconButton';
 import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
 
 // define the properties of this component's input
@@ -36,6 +42,9 @@ BaseFloatingDialog.propTypes = {
  * @param map - a reference to the map state: object
  */
 export default function BaseFloatingDialog({ title, index, dialogObject, dataKey, dataList, setDataList, map} ) {
+    const [width, setWidth] = React.useState(600);
+    const [height, setHeight] = React.useState(300);
+
     /**
     * the close dialog handler
     */
@@ -51,36 +60,54 @@ export default function BaseFloatingDialog({ title, index, dialogObject, dataKey
     };
 
     /**
-    * configure and render the floating dialog
+    * configure and render the resizeable floating dialog
     */
     return (
         <Fragment>
             <CssBaseline />
-            <Dialog
-                aria-labelledby="draggable-dialog"
-                open={ true }
-                onClose={ handleClose }
-                PaperComponent={ PaperComponent }
-                TransitionComponent={ Transition }
-                disableEnforceFocus
-                style={{ pointerEvents: 'none' }}
-                PaperProps={{ sx: { width: 800,  height: 505, pointerEvents: 'auto' } }}
-                sx={{ zIndex: 405, width: 800, height: 505, '.MuiBackdrop-root': { backgroundColor: 'transparent' },
-                        left: index * 20, top: 20 + index * 43 }}
+            <Resizable
+                height={ height }
+                width={ width }
+                maxWidth=""
+                onResize={ (event) => {
+                    setWidth(width + event.movementX);
+                    setHeight(height + event.movementY);
+                }}
+                axis="x"
+                draggableOpts={{ handleSize: [20, 20] }}
             >
-                <DialogTitle sx={{ cursor: 'move', backgroundColor: 'lightblue', textAlign: 'center',
-                                fontSize: 14, height: 45, p: 1.5 }} id="draggable-dialog"> { title }
-                </DialogTitle>
-
-                <IconButton size="small" autoFocus onClick={ handleClose } sx={{ position: 'absolute', right: 8, top: 5 }}>
-                    <CloseOutlinedIcon color={"primary"}/>
-                </IconButton>
+                <Dialog
+                    aria-labelledby="draggable-dialog"
+                    open={ true }
+                    onClose={ handleClose }
+                    PaperComponent={ PaperComponent }
+                    TransitionComponent={ Transition }
+                    disableEnforceFocus
+                    style={{ pointerEvents: 'none' }}
+                    PaperProps={{ sx: { pointerEvents: 'auto' } }}
+                    sx={{ zIndex: 405, '.MuiBackdrop-root': { backgroundColor: 'transparent' }, left: index * 50, top: index * 75 }}>
+                    <DialogTitle
+                        id="draggable-dialog"
+                        sx={{ cursor: 'move', backgroundColor: 'lightblue', textAlign: 'left', fontSize: 14, height: 40, p: 1.3 }}>
+                        <Stack direction="row" justifyContent="space-between">
+                            { title }
+                            <IconButton size="small" onClick={ handleClose } sx={{ marginTop: -.9, marginRight: -1 }}>
+                                <CloseOutlinedIcon color={"primary"}/>
+                            </IconButton>
+                        </Stack>
+                    </DialogTitle>
 
-                <DialogContent sx={{ backgroundColor: 'white', fontSize: 11, m: 0, height: 395 }}>{ dialogObject }</DialogContent>
-            </Dialog>
+                    <DialogContent
+                        sx={{ backgroundColor: 'white', fontSize: 11, m: 0 }}>
+                        <Box sx={{ height: height, width: width }}>
+                            { dialogObject }
+                        </Box>
+                    </DialogContent>
+                </Dialog>
+            </Resizable>
         </Fragment>
     );
-};
+}
 
 /**
 * This creates a 3D dialog.

diff --git a/src/components/dialog/observation-chart.js b/src/components/dialog/observation-chart.js
@@ -61,7 +61,7 @@ function getObsChartData(url) {
                     // send the error message to the console
                     console.error(error.message);
 
-                    // make sure we dont render anything
+                    // make sure we do not render anything
                     return "";
                 });
 
@@ -193,29 +193,28 @@ function CreateObsChart(url) {
 
     // render the chart
     return (
-        <ResponsiveContainer width="100%" height="100%">
-            { status === 'pending' ? (
-                <div>Gathering chart data...</div>
-            ) : status === 'error' ? (
-                <div>There was a problem with observation data for this location.</div>
-            ) : (
-                <LineChart data={ data } margin={{ left: -25 }} >
-                    <CartesianGrid strokeDasharray="1 1" />
-
-                    <XAxis tick={{ stroke: 'tan', strokeWidth: .5 }} tickSize="10" dataKey="time" tickFormatter={ (value) => formatX_axis(value) }/>
-
-                    <ReferenceLine y={0} stroke="#000000" />
-                    <YAxis ticks={ maxValue } tick={{ stroke: 'tan', strokeWidth: .5 }} tickFormatter={ (value) => formatY_axis(value) } />
-
-                    <Tooltip />
-                    <Legend align="right" />
-                    <Line type="monotone" dataKey="Observations" stroke="black" strokeWidth={2} dot={false} isAnimationActive={false} />
-                    <Line type="monotone" strokeDasharray="3 1" dataKey="NOAA Tidal Predictions" stroke="teal" strokeWidth={2} dot={false} isAnimationActive={false} />
-                    <Line type="monotone" dataKey="APS Nowcast" stroke="CornflowerBlue" strokeWidth={2} dot={false} isAnimationActive={false} />
-                    <Line type="monotone" strokeDasharray="4 1 2" dataKey="APS Forecast" stroke="LimeGreen" strokeWidth={2} dot={false} isAnimationActive={false} />
-                    <Line type="monotone" dataKey="Difference (APS-OBS)" stroke="red" strokeWidth={2} dot={false} isAnimationActive={false} />
-                </LineChart>
-            )}
+        <ResponsiveContainer>
+            {
+                status === 'pending' ? ( <div>Gathering chart data...</div> ) :
+                status === 'error' ? ( <div>There was a problem with observation data for this location.</div> ) :
+                    <LineChart data={ data } margin={{ left: -25 }} >
+                        <CartesianGrid strokeDasharray="1 1" />
+
+                        <XAxis tick={{ stroke: 'tan', strokeWidth: .5 }} tickSize="10" dataKey="time" tickFormatter={ (value) => formatX_axis(value) }/>
+
+                        <ReferenceLine y={0} stroke="#000000" />
+                        <YAxis ticks={ maxValue } tick={{ stroke: 'tan', strokeWidth: .5 }} tickFormatter={ (value) => formatY_axis(value) } />
+
+                        <Tooltip />
+                        <Legend align="right" />
+
+                        <Line type="monotone" dataKey="Observations" stroke="black" strokeWidth={2} dot={false} isAnimationActive={false} />
+                        <Line type="monotone" strokeDasharray="3 1" dataKey="NOAA Tidal Predictions" stroke="teal" strokeWidth={2} dot={false} isAnimationActive={false} />
+                        <Line type="monotone" dataKey="APS Nowcast" stroke="CornflowerBlue" strokeWidth={2} dot={false} isAnimationActive={false} />
+                        <Line type="monotone" strokeDasharray="4 1 2" dataKey="APS Forecast" stroke="LimeGreen" strokeWidth={2} dot={false} isAnimationActive={false} />
+                        <Line type="monotone" dataKey="Difference (APS-OBS)" stroke="red" strokeWidth={2} dot={false} isAnimationActive={false} />
+                    </LineChart>
+            }
         </ResponsiveContainer>
     );
 }
@@ -242,7 +241,7 @@ function get_yaxis_ticks(data) {
         theKeys.forEach((aKey) => {
             // identify the max value in the array of values
             const newVal = Math.max(...data
-                // make sure we dont run into any null or undefined values in the data
+                // make sure we do not run into any null or undefined values in the data
                 .filter(function(o) { return !(o[aKey] === undefined || o[aKey] === null); })
                 // create the array of all the values
                 .map(o => o[aKey]));