Merge branch 'observation-chart' of https://github.com/RENCI/APSViz-U…

…I-V3 into use-reducer # Conflicts: # src/app.js # src/components/dialog/base-floating-dialog.js # src/components/dialog/observation-dialog.js
RENCI · May 7, 2024 · 9e82a77 · 9e82a77
2 parents 02b2ccf + 88583f5
commit 9e82a77
Show file tree

Hide file tree

Showing 8 changed files with 97 additions and 40 deletions.
diff --git a/src/app.js b/src/app.js
@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import { Map } from '@components/map';
-import { ObservationDialog } from "@components/map/observation-dialog";
+import ObservationDialog from "@components/dialog/observation-dialog";
 import { useLayers } from '@context';
 import { Sidebar } from '@components/sidebar';
 

diff --git a/src/utils/base-floating-dialog.js → ...components/dialog/base-floating-dialog.js b/src/utils/base-floating-dialog.js → ...components/dialog/base-floating-dialog.js
@@ -10,16 +10,14 @@ 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';
 
 // define the properties of this component
 BaseFloatingDialog.propTypes = {
     title: PropTypes.string,
     dialogObject: PropTypes.any,
     dataKey: PropTypes.any,
     dataList: PropTypes.any,
-    setDataList: PropTypes.func,
-    map: PropTypes.any,
+    setDataList: PropTypes.func
 };
 
 /**
@@ -61,14 +59,14 @@ export default function BaseFloatingDialog({ title, dialogObject, dataKey, dataL
                     TransitionComponent={Transition}
                     disableEnforceFocus
                     style={{ pointerEvents: 'none' }}
-                    PaperProps={{ style: { pointerEvents: 'auto'} }}
-                    sx={{ '.MuiBackdrop-root': { backgroundColor: 'transparent' }}}
+                    PaperProps={{ sx: { width: 750,  height: 510, pointerEvents: 'auto'} }}
+                    sx={{ width: 750, height: 510, '.MuiBackdrop-root': { backgroundColor: 'transparent' }}}
                 >
                     <DialogTitle sx={{cursor: 'move', backgroundColor: 'lightblue', textAlign: 'center', fontSize: 14, height: 35, m: 0, p: 1 }} id="draggable-dialog-title"> { title } </DialogTitle>
 
-                    <DialogContent sx={{backgroundColor: 'white'}}>{ dialogObject }</DialogContent>
+                    <DialogContent sx={{backgroundColor: 'white', fontSize: 14, height: 375 }}>{ dialogObject }</DialogContent>
 
-                    <DialogActions sx={{backgroundColor: 'lightgray'}}><Button autoFocus onClick={handleClose}> Close </Button></DialogActions>
+                    <DialogActions sx={{backgroundColor: 'lightgray', height: 35, m: 0, p: 1}}><Button style={{fontSize: 14}} autoFocus onClick={handleClose}> Close </Button></DialogActions>
                 </Dialog>
         </Fragment>
     );

diff --git a/src/utils/observation-chart.js → src/components/dialog/observation-chart.js b/src/utils/observation-chart.js → src/components/dialog/observation-chart.js
@@ -9,10 +9,10 @@ ObservationChart.propTypes = {
 };
 
 /**
- * converts CSV data to json format
+ * converts CSV data into json format
  *
  * @param csvData
- * @returns {string}
+ * @returns {*[]}
  */
 function csvToJSON(csvData) {
     // ensure that there is csv data to convert
@@ -44,7 +44,7 @@ function csvToJSON(csvData) {
             ret_val.push(jsonObj);
         }
 
-        // TODO: return the data as a json string (for now)
+        // return the json data representation
         return ret_val;
     }
 }
@@ -76,30 +76,24 @@ export default function ObservationChart(dataUrl) {
                 });
         };
 
+        // finish off the data retrieval
         fetchData().then();
     }, [dataUrl]);
 
     // render the chart.
     return (
         <Fragment>
-        <LineChart
-          width={500}
-          height={300}
-          data={stationObs}
-          margin={{
-            top: 0,
-            right: 0,
-            left: 0,
-            bottom: 0,
-          }}
-        >
-          <CartesianGrid strokeDasharray="3 3" />
-          <XAxis dataKey="time" />
-          <YAxis type="number" domain={['auto', 'auto']} />
-          <Tooltip />
-          <Legend />
-          <Line type="monotone" dataKey="Observations" stroke="#8884d8" strokeWidth={2} dot={false} isAnimationActive={false} />
-          <Line type="monotone" dataKey="NOAA Tidal Predictions" stroke="#82ca9d" strokeWidth={2} dot={false} isAnimationActive={false} />
-        </LineChart></Fragment>
+            <LineChart width={550} height={300} data={stationObs} margin={{  top: 0, right: 0, left: 0, bottom: 0 }}>
+                <CartesianGrid strokeDasharray="3 3" />
+                <XAxis dataKey="time" />
+                <YAxis />
+                <Tooltip />
+                <Legend verticalAlign="top" height={20} />
+                <Line type="monotone" dataKey="Observations" stroke="gray" strokeWidth={2} dot={false} isAnimationActive={false} />
+                <Line type="monotone" 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" dataKey="Difference (APS-OBS)" stroke="red" strokeWidth={2} dot={false} isAnimationActive={false} />
+            </LineChart>
+        </Fragment>
     );
-};
+};
diff --git a/src/components/map/observation-dialog.js → src/components/dialog/observation-dialog.js b/src/components/map/observation-dialog.js → src/components/dialog/observation-dialog.js
@@ -1,40 +1,48 @@
 import React, {Fragment} from 'react';
 import PropTypes from 'prop-types';
-import BaseFloatingDialog from "@utils/base-floating-dialog";
+import BaseFloatingDialog from "@dialog/base-floating-dialog";
 import {useLayers} from "@context";
-import ObservationChart from "@utils/observation-chart";
+import ObservationChart from "@dialog/observation-chart";
 
 // define the properties of this component
-/* ObservationDialog.propTypes = {
+ObservationDialog.propTypes = {
   obs_data: PropTypes.object
-}; */
+};
 
 //export default function ObservationDialog(obs_data) {
 export const ObservationDialog = (obs_data)  => {
 
+/**
+ * This component renders the observation dialog, including the chart
+ *
+ * @param obs_data
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export default function ObservationDialog(obs_data) {
     // get references to the observation data/list
     const {
-        map,
         selectedObservations,
         setSelectedObservations
     } = useLayers();
 
     // create a graph using data from this url
     const graphObj = (url) => {
-        const args = {dataUrl: url};
+        // create the data object
+        const args = { dataUrl: url };
 
+        // create the chart
         return (
             <Fragment>
-                <ObservationChart {...args} />
+                <ObservationChart { ...args } />
             </Fragment>
         );
     };
 
     // create an object for the base dialog
     const floaterArgs = {title: obs_data.obs.location_name, dialogObject: {...graphObj(obs_data.obs.csvurl)}, dataKey: obs_data.obs.station_name, dataList: selectedObservations, setDataList: setSelectedObservations, map: map};
 
-    // render the dialog.
-    // the key here will be used to remove the dialog from the selected observation list when the dialog is closed
+    // render the dialog
     return (
         <Fragment>
             <BaseFloatingDialog {...floaterArgs} />

diff --git a/src/components/trays/index.js b/src/components/trays/index.js
@@ -1,11 +1,13 @@
 import * as layers from './layers';
 import * as hurricanes from './hurricanes';
+import * as removeObservationSelections from './observations';
 import * as settings from './settings';
 
 export default {
   layers,
   hurricanes,
   settings,
+  removeObservationSelections
 };
 
 /*

diff --git a/src/components/trays/observations/index.js b/src/components/trays/observations/index.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Stack } from '@mui/joy';
+import { ClearAll as RemoveObservationsIcon} from '@mui/icons-material';
+
+// import the component that will do the observation removal from state
+import { RemoveObservations } from "./removeObservations";
+
+// get an icon for the tray
+export const icon = <RemoveObservationsIcon />;
+
+// create a title for this tray element
+export const title = 'Remove observations';
+
+/**
+ * render the removal component
+ *
+ * @returns {JSX.Element}
+ */
+export const trayContents = () => (
+      <Stack gap={ 2 } p={ 2 }>
+            <RemoveObservations />
+      </Stack>
+    );
diff --git a/src/components/trays/observations/removeObservations.js b/src/components/trays/observations/removeObservations.js
@@ -0,0 +1,31 @@
+import React, { Fragment } from 'react';
+import { Button } from '@mui/joy';
+
+import {useLayers} from "@context";
+
+/**
+ * component that handles the removal of all observation selections from the map.
+ *
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export const RemoveObservations = () => {
+    // get references to the observation data/list
+    const {
+        selectedObservations,
+        setSelectedObservations
+    } = useLayers();
+
+    // remove the observation selections from state
+    function removeAllObservations() {
+        // remove all items from the data list
+        setSelectedObservations(selectedObservations.filter(item => item === undefined));
+    }
+
+    // render the button
+    return (
+        <Fragment>
+            <Button color="primary" onClick={() => removeAllObservations()}>Remove all observation selections</Button>
+        </Fragment>
+  );
+};
diff --git a/webpack.config.js b/webpack.config.js
@@ -102,6 +102,7 @@ module.exports = {
       '@hooks': path.resolve(__dirname, 'src/hooks/'),
       '@images': path.resolve(__dirname, 'src/images/'),
       '@utils': path.resolve(__dirname, 'src/utils/'),
+      '@dialog': path.resolve(__dirname, 'src/components/dialog')
     }
   },