Feature/dialog cascade

src/app.js

@@ -23,8 +23,11 @@ const Content = () => {
         <Fragment>
             {
                 // for each observation selected
-                selectedObservations.map (function (obs) {
-                    // render the observation
+                selectedObservations.map (function (obs, idx) {
+                    // add in an index used to cascade the dialogs
+                    obs['index']=idx;
+
+                    // render the observation draggable dialog
                     return <ObservationDialog key={obs["station_name"]} obs={obs} />;
                 })
             }

src/components/control-panel/control-panel.js

@@ -277,7 +277,7 @@ export const ControlPanel = () => {
         '&:hover': { filter: 'opacity(1.0)' },
         height: 'auto',
         width: '300px',
-        zIndex: 401,
+        zIndex: 410,
         borderRadius: 'sm',
       }}
     >

src/components/dialog/base-floating-dialog.js

@@ -15,6 +15,7 @@ import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
 // define the properties of this component's input
 BaseFloatingDialog.propTypes = {
     title: PropTypes.string,
+    index: PropTypes.any,
     dialogObject: PropTypes.any,
     dataKey: PropTypes.any,
     dataList: PropTypes.any,
@@ -27,13 +28,14 @@ BaseFloatingDialog.propTypes = {
  * Note: this component
  *
  * @param title - the name of the dialog: string
+ * @param index - the index of the data
  * @param dialogObject the object to render in the dialog: {JSX.Element}
  * @param dataKey - the key to the data list elements in state: string
  * @param dataList - a data list in state: array
  * @param setDataList - method to update a data list in state: function
  * @param map - a reference to the map state: object
  */
-export default function BaseFloatingDialog({ title, dialogObject, dataKey, dataList, setDataList, map} ) {
+export default function BaseFloatingDialog({ title, index, dialogObject, dataKey, dataList, setDataList, map} ) {
     /**
     * the close dialog handler
     */
@@ -62,8 +64,9 @@ export default function BaseFloatingDialog({ title, dialogObject, dataKey, dataL
                 TransitionComponent={ Transition }
                 disableEnforceFocus
                 style={{ pointerEvents: 'none' }}
-                PaperProps={{ sx: { width: 750,  height: 465, pointerEvents: 'auto' } }}
-                sx={{ zIndex: 402, width: 750, height: 465, '.MuiBackdrop-root': { backgroundColor: 'transparent' }}}
+                PaperProps={{ sx: { width: 800,  height: 465, pointerEvents: 'auto' } }}
+                sx={{ zIndex: 405, width: 800, height: 465, '.MuiBackdrop-root': { backgroundColor: 'transparent' },
+                        left: index * 20, top: 20 + index * 43 }}
             >
                 <DialogTitle sx={{ cursor: 'move', backgroundColor: 'lightblue', textAlign: 'center',
                                 fontSize: 14, height: 45, p: 1.5 }} id="draggable-dialog"> { title }
@@ -73,7 +76,7 @@ export default function BaseFloatingDialog({ title, dialogObject, dataKey, dataL
                     <CloseOutlinedIcon color={"primary"}/>
                 </IconButton>
 
-                <DialogContent sx={{ backgroundColor: 'white', fontSize: 11, m: 0, width: 590, height: 350 }}>{ dialogObject }</DialogContent>
+                <DialogContent sx={{ backgroundColor: 'white', fontSize: 11, m: 0, width: "100%", height: 350 }}>{ dialogObject }</DialogContent>
             </Dialog>
         </Fragment>
     );
@@ -87,15 +90,19 @@ export default function BaseFloatingDialog({ title, dialogObject, dataKey, dataL
 * @constructor
 */
 function PaperComponent(props) {
+    // create a reference to avoid the findDOMNode deprecation issue
+    const nodeRef = React.useRef(null);
+
+    // render the component
     return (
-        <Draggable  defaultPosition={{x: 0, y: 0 }} handle="#draggable-dialog" cancel={'[class*="MuiDialogContent-root"]'}>
-            <Paper { ...props } />
+        <Draggable nodeRef={nodeRef} handle="#draggable-dialog" cancel={'[class*="MuiDialogContent-root"]'}>
+            <Paper ref={nodeRef} {...props} />
         </Draggable>
     );
 }
 
 /**
-* This creates an animated transition for the dialog that pops up
+ * This creates an animated transition for the dialog that pops up
 *
 * @type {React.ForwardRefExoticComponent<React.PropsWithoutRef<{}> & React.RefAttributes<any>>}
 */

src/components/dialog/observation-chart.js

@@ -2,6 +2,7 @@ import React from 'react';
 import axios from 'axios';
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Legend, ResponsiveContainer, Tooltip } from 'recharts';
 import { useQuery } from '@tanstack/react-query';
+import { useSettings } from "@context";
 
 /**
  * renders the observations as a chart
@@ -57,6 +58,9 @@ function getObsChartData(url) {
  * @constructor
  */
 function CreateObsChart(url) {
+    // get the settings for the Y-axis min/max values
+    const { obsChartY } = useSettings();
+
     // call to get the data. expect back some information too
     const { status, data, error } = getObsChartData(url.url);
 
@@ -66,12 +70,12 @@ function CreateObsChart(url) {
             { status === 'pending' ? (
                 <div>Loading...</div>
             ) : status === 'error' ? (
-                <div>Error: {error.message}</div>
+                <div>Error: { error.message }</div>
             ) : (
-                <LineChart data={data} margin={{ left: -10 }}>
+                <LineChart data={ data } margin={{ left: -10 }}>
                     <CartesianGrid strokeDasharray="3 3" />
-                    <XAxis dataKey="time" allowDuplicatedCategory={false} />
-                    <YAxis domain={['auto', 'auto']}/>
+                    <XAxis dataKey="time" allowDuplicatedCategory={ false } />
+                    <YAxis tickCount="10" domain={ obsChartY } />
                     <Tooltip />
                     <Legend align={ 'center' } />
                     <Line type="monotone" dataKey="Observations" stroke="black" strokeWidth={2} dot={false} isAnimationActive={false} />

src/components/dialog/observation-dialog.js

@@ -1,6 +1,6 @@
-import React, {Fragment} from 'react';
+import React, { Fragment } from 'react';
 import BaseFloatingDialog from "@dialog/base-floating-dialog";
-import {useLayers} from "@context";
+import { useLayers } from "@context";
 import ObservationChart from "@dialog/observation-chart";
 
 /**
@@ -23,15 +23,16 @@ export const ObservationDialog = (obs_data) => {
         // create the chart
         return (
             <Fragment>
-                <ObservationChart url={url} />
+                <ObservationChart url={ url } />
             </Fragment>
         );
     };
 
     // create a data object for the base dialog to use to render
     const floaterArgs = {
         title: obs_data.obs['location_name'],
-        dialogObject: {...graphObj(obs_data.obs['csvurl'])},
+        index: obs_data.obs['index'],
+        dialogObject: { ...graphObj(obs_data.obs['csvurl']) },
         dataKey: obs_data.obs['id'],
         dataList: selectedObservations,
         setDataList: setSelectedObservations,
@@ -41,7 +42,7 @@ export const ObservationDialog = (obs_data) => {
     // render the dialog
     return (
         <Fragment>
-            <BaseFloatingDialog {...floaterArgs} />
+            <BaseFloatingDialog { ...floaterArgs } />
         </Fragment>
     );
 };

src/components/legend/legend.js

@@ -64,7 +64,7 @@ export const MapLegend = () => {
             height: 'auto',
             width: '100px',
             padding: '10px',
-            zIndex: 401,
+            zIndex: 410,
             borderRadius: 'sm',
             visibility: legendVisibilty,
         }}         

src/components/map/default-layers.js

@@ -29,7 +29,8 @@ export const DefaultLayers = () => {
     const {
         defaultModelLayers,
         setDefaultModelLayers,
-        setSelectedObservations
+        setSelectedObservations,
+        setShowShareComment
     } = useLayers();
 
     const obsPointToLayer = ((feature, latlng) => {
@@ -71,7 +72,6 @@ export const DefaultLayers = () => {
           layer.on("mouseout", function () {
             this.closePopup();
           });
-
           layer.on("click", function (e) {
             // this id is used to remove a selected observation from the selectedObservations list when the dialog is closed
             feature.properties.id = feature.properties.station_name;
@@ -145,8 +145,13 @@ export const DefaultLayers = () => {
                                 "&typeName=" +
                                 obsLayer.layers;
                 const {data} = await axios.get(obs_url);
+
+                // save the observation data
                 setObsData(data);
 
+                // turn on the show comment state
+                setShowShareComment(true);
+
                 // update the selected observations specified on the share link
                 addSharedObservations(map, shared_params['obs'], setSelectedObservations);
             }

src/components/share/buildlink.js

@@ -22,6 +22,7 @@ export const BuildLink = () => {
      */
     const createLink = (comment) => {
         // get the list of selected layers from state
+        // this forces the group at the top to be the reproduced in the share line
         const run_id = defaultModelLayers
             // get all the distinct groups
             .filter((val, idx, self) =>

src/components/share/share-comment.js

@@ -1,6 +1,8 @@
 import React, { Fragment } from 'react';
-import { Typography, Card } from '@mui/joy';
-import { parseSharedURL } from "@utils/map-utils";
+import { Typography, Card, IconButton } from '@mui/joy';
+import { parseSharedURL} from "@utils/map-utils";
+import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
+import { useLayers } from "@context";
 
 /**
  * renders the shared content on the app as defined in the query string
@@ -9,14 +11,28 @@ import { parseSharedURL } from "@utils/map-utils";
  * @constructor
  */
 export const ShareComment = () => {
+    // get the show shared comment state
+    const { showShareComment, setShowShareComment } = useLayers();
+
     // parse the hash of the sharing URL
     const shared_params = parseSharedURL();
 
+    /**
+    * the close dialog handler
+    */
+    const handleClose = () => {
+        setShowShareComment(false);
+    };
+
     // if there was a comment, display it
-    if ( shared_params['comment'] !== '') {
+    if ( shared_params['comment'] !== '' && showShareComment ) {
         return (
             <Card variant="outlined" sx={{maxWidth: '100%'}}>
                 <Typography sx={{ wordBreak: "break-word" }} color={"primary"}>Share comment: { shared_params['comment']}</Typography>
+
+                <IconButton size="small" autoFocus onClick={ handleClose } sx={{ position: 'absolute', right: 8, top: 8 }}>
+                    <CloseOutlinedIcon color={"primary"}/>
+                </IconButton>
             </Card>
         );
     }

src/components/share/share.js

@@ -24,7 +24,7 @@ export const Share = () => {
                     height: 50,
                     width: 80,
                     padding: '0px',
-                    zIndex: 401,
+                    zIndex: 410,
                     borderRadius: 'sm'
               }}>
                 <Stack

src/components/sidebar/sidebar.js

@@ -28,7 +28,7 @@ export const Sidebar = () => {
           position: 'absolute',
           top: 0, left: 0,
           height: '100vh',
-          zIndex: 401,
+          zIndex: 410,
           maxWidth: '68px',
           overflow: 'hidden',
           p: 0,

src/components/sidebar/tray.js

@@ -17,7 +17,7 @@ export const Tray = ({ active, Contents, title, closeHandler }) => {
         transition: 'transform 250ms',
         height: '100vh',
         width: TRAY_WIDTH,
-        zIndex: 401,
+        zIndex: 410,
         filter: 'drop-shadow(0 0 8px rgba(0, 0, 0, 0.2))',
         overflowX: 'hidden',
         overflowY: 'auto',