Cleaning up the removal functionality.

src/components/model-selection/modelSelectionForm.js

@@ -0,0 +1,92 @@
+import React, { Fragment } from 'react';
+import {Button, Input, Stack, Tabs, TabList, Tab, TabPanel, Divider} from '@mui/joy';
+import { useLayers } from "@context";
+
+// import {LayerCard} from "@components/trays/layers/layer-card";
+
+/**
+ * This component renders the layer selection form
+ *
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export const ModelSelectionForm = () => {
+    // get references to the filtered layer state
+    const {
+        //filteredModelLayers
+    } = useLayers();
+
+    // render the form
+    return (
+        <Fragment>
+            <Tabs aria-label="Type tabs" defaultValue={0}>
+                <TabList>
+                    <Tab>Tropical</Tab>
+                    <Tab>Synoptic</Tab>
+                </TabList>
+                <TabPanel value={0}>
+                    <form onSubmit = { formHandler }>
+                        <Stack spacing={1}>
+                            <Input name="tropical-storm-name" placeholder="Tropical storm name control" />
+                            <Input name="tropical-advisory" placeholder="Tropical advisory control" />
+                            <Input name="tropical-grid" placeholder="Tropical grid control" />
+                            <Input name="tropical-instance" placeholder="Tropical instance control" />
+
+                            <Button type="submit">Submit</Button>
+                            <Button type="reset">Reset</Button>
+                        </Stack>
+
+                        <Divider sx={{m: 2}} />
+
+                        <Stack sx={{ maxHeight: "400px", overflow: "auto" }}>
+                            {/* list of search results goes here
+                                may be able to leverage trays/layers/layer-card />
+                            */}
+                        </Stack>
+                    </form>
+                </TabPanel>
+                <TabPanel value={1}>
+                    <form onSubmit={ formHandler }>
+                        <Stack spacing={1}>
+                            <Input name="synoptic-date" placeholder="Synoptic date control" />
+                            <Input name="synoptic-cycle" placeholder="Synoptic cycle control" />
+                            <Input name="synoptic-grid" placeholder="Synoptic grid control" />
+                            <Input name="synoptic-instance" placeholder="Synoptic instance control" />
+
+                            <Button type="submit">Submit</Button>
+                            <Button type="reset">Reset</Button>
+                        </Stack>
+
+                        <Divider sx={{m: 2}} />
+
+                        <Stack sx={{ maxHeight: "400px", overflow: "auto" }}>
+                            {/* list of search results goes here
+                                may be able to leverage trays/layers/layer-card />
+                            */}
+                        </Stack>
+                    </form>
+                </TabPanel>
+            </Tabs>
+        </Fragment>
+    );
+};
+
+/**
+ * this method populates the controls on the form.
+ *
+ */
+// const dataLoader = () => {
+//
+// };
+
+/**
+ * method to initiate a model search with the filter selections on the form
+ *
+ * @param event
+ */
+const formHandler = (event) => {
+        event.preventDefault();
+        const formData = new FormData(event.target);
+        const formJson = Object.fromEntries(formData.entries());
+        alert(JSON.stringify(formJson));
+};

src/components/sidebar/sidebar.js

@@ -1,10 +1,6 @@
 import React from 'react';
 import { Fragment, useCallback, useState } from 'react';
-import {
-  List,
-  Sheet,
-  useTheme,
-} from '@mui/joy';
+import { List, Sheet, useTheme } from '@mui/joy';
 import { Tray } from './tray';
 import { MenuItem } from './menu-item';
 import SidebarTrays from '../trays';

src/components/sidebar/tray.js

@@ -1,16 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  DialogContent,
-  DialogTitle,
-  Divider,
-  IconButton,
-  Sheet,
-  Stack,
-} from '@mui/joy';
-import {
-  KeyboardDoubleArrowLeft as CloseTrayIcon,
-} from '@mui/icons-material';
+import { DialogContent, DialogTitle, Divider, IconButton, Sheet, Stack } from '@mui/joy';
+import { KeyboardDoubleArrowLeft as CloseTrayIcon } from '@mui/icons-material';
 
 const TRAY_WIDTH = '500px';
 

src/components/trays/index.js

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

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Stack } from '@mui/joy';
+import { Checklist as ModelSelectionIcon} from '@mui/icons-material';
+
+// import the component that will allow the user to make model selections
+import { ModelSelection } from "./model-selection.js";
+
+// get an icon for the tray
+export const icon = <ModelSelectionIcon />;
+
+// create a title for this tray element
+export const title = 'ADCIRC Model selection';
+
+/**
+ * render the removal component
+ *
+ * @returns {JSX.Element}
+ */
+export const trayContents = () => (
+      <Stack gap={ 2 } p={ 2 }>
+            <ModelSelection />
+      </Stack>
+    );

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

@@ -0,0 +1,17 @@
+import React, { Fragment } from 'react';
+import { ModelSelectionForm } from "@model-selection/modelSelectionForm.js";
+
+/**
+ * component that handles the selection of layers for the map.
+ *
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export const ModelSelection = () => {
+    // render the layer selection component
+    return (
+        <Fragment>
+            <ModelSelectionForm />
+        </Fragment>
+  );
+};

src/components/trays/remove/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Stack } from '@mui/joy';
+import { Delete as RemoveIcon} from '@mui/icons-material';
+
+// import the components that will remove selected items from state
+import { RemoveObservations } from "./remove-observations";
+import { RemoveModels } from "./remove-models";
+
+// get an icon for the tray
+export const icon = <RemoveIcon />;
+
+// create a title for this tray element
+export const title = 'Remove items';
+
+/**
+ * render the tray
+ *
+ * @returns {JSX.Element}
+ */
+export const trayContents = () => (
+      <Stack gap={ 2 } p={ 2 }>
+            <RemoveObservations />
+            <RemoveModels />
+      </Stack>
+    );

src/components/trays/remove/remove-models.js

@@ -0,0 +1,30 @@
+import React, { Fragment } from 'react';
+import { Button } from '@mui/joy';
+import {useLayers} from "@context";
+
+/**
+ * component that handles the removal of models.
+ *
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export const RemoveModels = () => {
+    // get references to the model data/list
+    const {
+
+    } = useLayers();
+
+    /**
+     * remove the observation selections from state and map
+     */
+    function removeModels() {
+        alert("Not ready yet.");
+    }
+
+    // render the button
+    return (
+        <Fragment>
+            <Button color="primary" onClick={() => removeModels()}>Remove selected models</Button>
+        </Fragment>
+  );
+};

src/components/trays/observations/removeObservations.js → src/components/trays/remove/remove-observations.js

@@ -1,10 +1,9 @@
 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.
+ * component that handles the removal of observations.
  *
  * @returns {JSX.Element}
  * @constructor
@@ -20,7 +19,7 @@ export const RemoveObservations = () => {
     /**
      * remove the observation selections from state and map
      */
-    function removeAllObservations() {
+    function removeObservations() {
         // remove all the targets on the map
         map.eachLayer((layer) => {
             // if this is an observation selection marker
@@ -37,7 +36,7 @@ export const RemoveObservations = () => {
     // render the button
     return (
         <Fragment>
-            <Button color="primary" onClick={() => removeAllObservations()}>Remove all observation selections</Button>
+            <Button color="primary" onClick={() => removeObservations()}>Remove selected observations</Button>
         </Fragment>
   );
 };

webpack.config.js

@@ -99,10 +99,11 @@ module.exports = {
       '@components': path.resolve(__dirname, 'src/components/'),
       '@content': path.resolve(__dirname, 'src/content/'),
       '@context': path.resolve(__dirname, 'src/context/'),
+      '@dialog': path.resolve(__dirname, 'src/components/dialog'),
       '@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')
+      '@model-selection': path.resolve(__dirname, 'src/components/model-selection'),
+      '@utils': path.resolve(__dirname, 'src/utils/')
     }
   },