Merge pull request #65 from RENCI/help-about

Adding a help/about tray

src/components/help-about/helpAboutTray.js

@@ -0,0 +1,24 @@
+import React, {Fragment} from 'react';
+
+/**
+ * This component renders the help/about try
+ *
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export const HelpAboutTray = () => {
+    // render the form
+    return (
+        <Fragment>
+            <div>App version: {process.env.REACT_APP_VERSION}</div>
+        </Fragment>
+    );
+};
+
+/**
+ * this method populates the controls on the form.
+ *
+ */
+// const dataLoader = () => {
+//
+// };

src/components/model-selection/modelSelectionTray.js

@@ -4,7 +4,7 @@ import {SynopticTabForm} from "@model-selection/synopticTab";
 import {TropicalTabForm} from "@model-selection/tropicalTab";
 
 /**
- * This component renders the layer selection form
+ * This component renders the model selection tray
  *
  * @returns {JSX.Element}
  * @constructor
@@ -30,11 +30,3 @@ export const ModelSelectionTray = () => {
         </Fragment>
     );
 };
-
-/**
- * this method populates the controls on the form.
- *
- */
-// const dataLoader = () => {
-//
-// };

src/components/trays/help_about/help_about.js

@@ -0,0 +1,17 @@
+import React, { Fragment } from 'react';
+import { HelpAboutTray } from "@help-about/helpAboutTray.js";
+
+/**
+ * component that renders the help/about tray.
+ *
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export const HelpAbout = () => {
+    // render the layer selection component
+    return (
+        <Fragment>
+            <HelpAboutTray />
+        </Fragment>
+  );
+};

src/components/trays/help_about/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Stack } from '@mui/joy';
+import { HelpCenter as HelpAboutIcon} from '@mui/icons-material';
+
+// import the component that will allow the user to view things about the app
+import { HelpAbout } from "./help_about.js";
+
+// get an icon for the tray
+export const icon = <HelpAboutIcon />;
+
+// create a title for this tray element
+export const title = 'ADCIRC Help/About';
+
+/**
+ * render the removal component
+ *
+ * @returns {JSX.Element}
+ */
+export const trayContents = () => (
+      <Stack gap={ 2 } p={ 2 }>
+            <HelpAbout />
+      </Stack>
+    );

src/components/trays/index.js

@@ -3,13 +3,15 @@ import * as layers from './layers';
 import * as model_selection from './model-selection';
 import * as remove_items from './remove';
 import * as settings from './settings';
+import * as help_about from './help_about';
 
 export default {
   layers,
   hurricanes,
   model_selection,
   remove_items,
-  settings
+  settings,
+  help_about
 };
 
 /*

src/components/trays/model-selection/model-selection.js

@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
 import { ModelSelectionTray } from "@model-selection/modelSelectionTray.js";
 
 /**
- * component that handles the selection of layers for the map.
+ * component that handles the filtered selections of layers for the map.
  *
  * @returns {JSX.Element}
  * @constructor

webpack.config.js

@@ -103,7 +103,8 @@ module.exports = {
       '@hooks': path.resolve(__dirname, 'src/hooks/'),
       '@images': path.resolve(__dirname, 'src/images/'),
       '@model-selection': path.resolve(__dirname, 'src/components/model-selection'),
-      '@utils': path.resolve(__dirname, 'src/utils/')
+      '@utils': path.resolve(__dirname, 'src/utils/'),
+      '@help-about': path.resolve(__dirname, 'src/components/help-about/'),
     }
   },