From 1bfa2f68b1f3dfb421e0d7f6614d400f22d46730 Mon Sep 17 00:00:00 2001
From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com>
Date: Thu, 8 Aug 2024 14:55:24 -0400
Subject: [PATCH 1/3] tidying up

---
 src/components/dialog/observation-chart.js | 44 +++++++++++-----------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/components/dialog/observation-chart.js b/src/components/dialog/observation-chart.js
index 142c406d..2e9cbc34 100644
--- a/src/components/dialog/observation-chart.js
+++ b/src/components/dialog/observation-chart.js
@@ -266,28 +266,28 @@ function CreateObsChart(c) {
     // render the chart
     return (
         <Fragment>
-            {
-                status === 'pending' ? ( <div>Gathering chart data...</div> ) :
-                status === 'error' ? ( <div>There was a problem with observation data for this location.</div> ) :
-                    <ResponsiveContainer>
-                        <LineChart data={ data } margin={{ left: -25 }} isHide={ c.chartProps.isHideLine }>
-                            <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 />
-
-                            <Line type="monotone" dataKey="Observations" stroke="black" strokeWidth={1} dot={false} isAnimationActive={false} hide={ c.chartProps.isHideLine['Observations'] }/>
-                            <Line type="monotone" dataKey="NOAA Tidal Predictions" stroke="teal" strokeWidth={1} dot={false} isAnimationActive={false} hide={ c.chartProps.isHideLine["NOAA Tidal Predictions"] }/>
-                            <Line type="monotone" dataKey="APS Nowcast" stroke="CornflowerBlue" strokeWidth={2} dot={false} isAnimationActive={false} hide={ c.chartProps.isHideLine["APS Nowcast"] }/>
-                            <Line type="monotone" dataKey="APS Forecast" stroke="LimeGreen" strokeWidth={2} dot={false} isAnimationActive={false} hide={ c.chartProps.isHideLine["APS Forecast"] }/>
-                            <Line type="monotone" dataKey="Difference (APS-OBS)" stroke="red" strokeWidth={1} dot={false} isAnimationActive={false} hide={ c.chartProps.isHideLine["Difference (APS-OBS)"] } />
-                        </LineChart>
-                    </ResponsiveContainer>
-            }
+        {
+            status === 'pending' ? ( <div>Gathering chart data...</div> ) :
+            status === 'error' ? ( <div>There was a problem with observation data for this location.</div> ) :
+                <ResponsiveContainer>
+                    <LineChart data={ data } margin={{ left: -25 }} isHide={ c.chartProps.isHideLine }>
+                        <CartesianGrid strokeDasharray="1 1" />
+
+                        <XAxis tick={{ stroke: 'tan', strokeWidth: .5 }} tickSize="10" dataKey="time" tickFormatter={ (value) => formatX_axis(value) }/>
+
+                        <ReferenceLine y={0} stroke="Black" strokeDasharray="3 3" />
+                        <YAxis ticks={ maxValue } tick={{ stroke: 'tan', strokeWidth: .5 }} tickFormatter={ (value) => formatY_axis(value) } />
+
+                        <Tooltip />
+
+                        <Line type="monotone" dataKey="Observations" stroke="black" strokeWidth={1} dot={false} isAnimationActive={false} hide={ c.chartProps.isHideLine['Observations'] }/>
+                        <Line type="monotone" dataKey="NOAA Tidal Predictions" stroke="teal" strokeWidth={1} dot={false} isAnimationActive={false} hide={ c.chartProps.isHideLine["NOAA Tidal Predictions"] }/>
+                        <Line type="monotone" dataKey="APS Nowcast" stroke="CornflowerBlue" strokeWidth={2} dot={false} isAnimationActive={false} hide={ c.chartProps.isHideLine["APS Nowcast"] }/>
+                        <Line type="monotone" dataKey="APS Forecast" stroke="LimeGreen" strokeWidth={2} dot={false} isAnimationActive={false} hide={ c.chartProps.isHideLine["APS Forecast"] }/>
+                        <Line type="monotone" dataKey="Difference (APS-OBS)" stroke="red" strokeWidth={1} dot={false} isAnimationActive={false} hide={ c.chartProps.isHideLine["Difference (APS-OBS)"] } />
+                    </LineChart>
+                </ResponsiveContainer>
+        }
         </Fragment>
     );
 }

From 1f86d0bb91f1e7610b603e295ca9e423d1c3a159 Mon Sep 17 00:00:00 2001
From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com>
Date: Thu, 8 Aug 2024 15:14:59 -0400
Subject: [PATCH 2/3] making the line view buttons flex/wrap, enforcing min
 width and height of the dialog content area

---
 src/components/dialog/base-floating-dialog.js | 98 ++++++++++---------
 1 file changed, 52 insertions(+), 46 deletions(-)

diff --git a/src/components/dialog/base-floating-dialog.js b/src/components/dialog/base-floating-dialog.js
index 2cb06750..5735b305 100644
--- a/src/components/dialog/base-floating-dialog.js
+++ b/src/components/dialog/base-floating-dialog.js
@@ -1,13 +1,10 @@
 import React, { Fragment } from 'react';
-import { ToggleButtonGroup, Button, Box, Stack } from '@mui/joy'; //, Checkbox
+import { ToggleButtonGroup, ToggleButton, Box, Stack } from '@mui/material';
 import Draggable from "react-draggable";
 import PropTypes from 'prop-types';
-
 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';
@@ -18,6 +15,8 @@ import Slide from '@mui/material/Slide';
 import IconButton from '@mui/material/IconButton';
 import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
 
+import { markUnclicked } from '@utils/map-utils';
+
 // define the properties of this component's input
 BaseFloatingDialog.propTypes = {
     title: PropTypes.string,
@@ -45,9 +44,14 @@ BaseFloatingDialog.propTypes = {
  * @param toggleLineView - toggles the visibility of a chart line
  */
 export default function BaseFloatingDialog({ title, index, dialogObject, dataKey, dataList, setDataList, map, showLineButtonView, toggleLineView } ) {
-    const [newWidth, setNewWidth] = React.useState(600);
+    // declare state to capture the dialog size
+    const [newWidth, setNewWidth] = React.useState(460);
     const [newHeight, setNewHeight] = React.useState(300);
 
+    // declare the minimums for the dialog content area
+    const minWidth = 200;
+    const minHeight = 150;
+
     /**
     * the close dialog handler
     */
@@ -77,9 +81,9 @@ export default function BaseFloatingDialog({ title, index, dialogObject, dataKey
                     setNewHeight(newHeight + event.movementY);
                 }}
                 axis="x"
-                draggableOpts={{ handleSize: [20, 20] }}
-            >
+                draggableOpts={{ handleSize: [20, 20] }}>
                 <Dialog
+                    width="100%"
                     aria-labelledby="draggable-dialog"
                     open={ true }
                     onClose={ handleClose }
@@ -100,46 +104,48 @@ export default function BaseFloatingDialog({ title, index, dialogObject, dataKey
                         </Stack>
                     </DialogTitle>
 
-                    <DialogContent sx={{ fontSize: 11, m: 0 }}>
-                        <Stack direction="column" gap={ 1 } alignItems="center">
-                            <ToggleButtonGroup size="sm" onChange={(event, newValue) => { toggleLineView(newValue); }} sx={{ backgroundColor: 'White'}}>
-                                {(showLineButtonView("Observations")) ?
-                                <Button
-                                    value="Observations"
-                                    sx={{ '&:hover': { color: 'White', backgroundColor: 'Black' }, color: 'Black' , fontSize: 12 }}>
-                                    Observations</Button> : ''
-                                }
-
-                                {(showLineButtonView("NOAA Tidal Predictions")) ?
-                                <Button
-                                    value="NOAA Tidal Predictions"
-                                    sx={{ '&:hover': { color: 'White', backgroundColor: 'Teal' }, color: 'Teal', fontSize: 12 }}>
-                                    NOAA Tidal Predictions</Button> : ''
-                                }
-
-                                {(showLineButtonView("APS Nowcast")) ?
-                                <Button
-                                    value="APS Nowcast"
-                                    sx={{ '&:hover': { color: 'White', backgroundColor: 'CornflowerBlue' }, color: 'CornflowerBlue', fontSize: 12 }}>
-                                    APS Nowcast</Button> : ''
-                                }
-
-                                {(showLineButtonView("APS Forecast")) ?
-                                <Button
-                                    value="APS Forecast"
-                                    sx={{ '&:hover': { color: 'White', backgroundColor: 'LimeGreen' }, color: 'LimeGreen', fontSize: 12 }}>
-                                    APS Forecast</Button> : ''
-                                }
-
-                                {(showLineButtonView("Difference (APS-OBS)")) ?
-                                <Button
-                                    value="Difference (APS-OBS)"
-                                    sx={{ '&:hover': { color: 'White', backgroundColor: 'Red' }, color: 'Red', backgroundColor: 'White', fontSize: 12 }}>
-                                    Difference (APS-OBS)</Button> : ''
-                                }
+                    <DialogContent sx={{fontSize: 10, p: "5px"}}>
+                        <Stack direction="column" spacing={ '5px' } alignItems="center" >
+                            <ToggleButtonGroup variant="text" onChange={(event, newValue) => { toggleLineView(newValue); }}>
+                                <Stack display="wrap" sx={{ width: newWidth, minWidth: minWidth, flexWrap: "wrap"}} direction="row" spacing={'px'}  alignItems="center">
+                                    {showLineButtonView("Observations") ?
+                                        <Box><ToggleButton
+                                        value="Observations"
+                                        sx={{ '&:hover': { color: 'White', backgroundColor: 'Black' }, m: 0, p: "3px", color: 'Black' , fontSize: 9 }}>
+                                        Observations</ToggleButton></Box> : ''
+                                    }
+
+                                    {(showLineButtonView("APS Nowcast")) ?
+                                        <Box><ToggleButton
+                                        value="APS Nowcast"
+                                        sx={{ '&:hover': { color: 'White', backgroundColor: 'CornflowerBlue' }, m: 0, p: "3px", color: 'CornflowerBlue', fontSize: 9 }}>
+                                        APS Nowcast</ToggleButton></Box> : ''
+                                    }
+
+                                    {(showLineButtonView("APS Forecast")) ?
+                                        <Box><ToggleButton
+                                        value="APS Forecast"
+                                        sx={{ '&:hover': { color: 'White', backgroundColor: 'LimeGreen' }, m: 0, p: "3px", color: 'LimeGreen', fontSize: 9 }}>
+                                        APS Forecast</ToggleButton></Box> : ''
+                                    }
+
+                                    {(showLineButtonView("NOAA Tidal Predictions")) ?
+                                        <Box><ToggleButton
+                                        value="NOAA Tidal Predictions"
+                                        sx={{ '&:hover': { color: 'White', backgroundColor: 'Teal' }, m: 0, p: "3px", color: 'Teal', fontSize: 9 }}>
+                                        NOAA Tidal Predictions</ToggleButton></Box> : ''
+                                    }
+
+                                    {(showLineButtonView("Difference (APS-OBS)")) ?
+                                        <Box><ToggleButton
+                                        value="Difference (APS-OBS)"
+                                        sx={{ '&:hover': { color: 'White', backgroundColor: 'Red' }, m: 0, p: "3px", color: 'Red', fontSize: 9 }}>
+                                        Difference (APS-OBS)</ToggleButton></Box> : ''
+                                    }
+                                </Stack>
                             </ToggleButtonGroup>
 
-                            <Box sx={{ height: newHeight, width: newWidth }}> { dialogObject } </Box>
+                            <Box sx={{ width: newWidth, minWidth: minWidth, height: newHeight, minHeight: minHeight }}> { dialogObject } </Box>
                         </Stack>
                     </DialogContent>
                 </Dialog>
@@ -149,7 +155,7 @@ export default function BaseFloatingDialog({ title, index, dialogObject, dataKey
 }
 
 /**
-* This creates a 3D dialog.
+* This creates a draggable area for the dialog content
 *
 * @param props
 * @returns {JSX.Element}

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

---
 src/components/dialog/observation-chart.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/dialog/observation-chart.js b/src/components/dialog/observation-chart.js
index 2e9cbc34..6c626c3e 100644
--- a/src/components/dialog/observation-chart.js
+++ b/src/components/dialog/observation-chart.js
@@ -116,7 +116,7 @@ function csvToJSON(csvData, setLineButtonView) {
 
                 // data that is missing a value will not result in plotting
                 if (e["Observations"]) {
-                    e["Observations"] = +parseFloat(e["Observations"]).toFixed(4);
+                    e["Observations"] = +parseFloat(e["Observations"]).toFixed(3);
 
                     // set the line button to be in view
                     setLineButtonView("Observations");
@@ -125,7 +125,7 @@ function csvToJSON(csvData, setLineButtonView) {
                     e["Observations"] = null;
 
                 if (e["NOAA Tidal Predictions"]) {
-                    e["NOAA Tidal Predictions"] = +parseFloat(e["NOAA Tidal Predictions"]).toFixed(4);
+                    e["NOAA Tidal Predictions"] = +parseFloat(e["NOAA Tidal Predictions"]).toFixed(3);
 
                     // set the line button to be in view
                     setLineButtonView("NOAA Tidal Predictions");
@@ -134,7 +134,7 @@ function csvToJSON(csvData, setLineButtonView) {
                     e["NOAA Tidal Predictions"] = null;
 
                 if (e["APS Nowcast"]) {
-                    e["APS Nowcast"] = +parseFloat(e["APS Nowcast"]).toFixed(6);
+                    e["APS Nowcast"] = +parseFloat(e["APS Nowcast"]).toFixed(3);
 
                     // set the line button to be in view
                     setLineButtonView("APS Nowcast");
@@ -143,7 +143,7 @@ function csvToJSON(csvData, setLineButtonView) {
                     e["APS Nowcast"] = null;
 
                 if (e["APS Forecast"]) {
-                    e["APS Forecast"] = +parseFloat(e["APS Forecast"]).toFixed(6);
+                    e["APS Forecast"] = +parseFloat(e["APS Forecast"]).toFixed(3);
 
                     // set the line button to be in view
                     setLineButtonView("APS Forecast");
@@ -152,7 +152,7 @@ function csvToJSON(csvData, setLineButtonView) {
                     e["APS Forecast"] = null;
 
                 if (e["Difference (APS-OBS)"]) {
-                    e["Difference (APS-OBS)"] = +parseFloat(e["Difference (APS-OBS)"]).toFixed(6);
+                    e["Difference (APS-OBS)"] = +parseFloat(e["Difference (APS-OBS)"]).toFixed(3);
 
                     // set the line button to be in view
                     setLineButtonView("Difference (APS-OBS)");