From 9006c047801849affdd580d57a2f12c8002cebee Mon Sep 17 00:00:00 2001
From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com>
Date: Wed, 8 May 2024 17:24:56 -0400
Subject: [PATCH 01/16] initial insert of the filter dialog

---
 .../layer-selection/layerSelectionForm.js     | 57 +++++++++++++++++++
 src/components/sidebar/sidebar.js             |  6 +-
 src/components/sidebar/tray.js                | 13 +----
 src/components/trays/index.js                 |  8 ++-
 src/components/trays/layer-selection/index.js | 23 ++++++++
 .../layer-selection/layerSelectionTray.js     | 17 ++++++
 webpack.config.js                             |  5 +-
 7 files changed, 108 insertions(+), 21 deletions(-)
 create mode 100644 src/components/layer-selection/layerSelectionForm.js
 create mode 100644 src/components/trays/layer-selection/index.js
 create mode 100644 src/components/trays/layer-selection/layerSelectionTray.js

diff --git a/src/components/layer-selection/layerSelectionForm.js b/src/components/layer-selection/layerSelectionForm.js
new file mode 100644
index 00000000..ea90f0d4
--- /dev/null
+++ b/src/components/layer-selection/layerSelectionForm.js
@@ -0,0 +1,57 @@
+import React, { Fragment } from 'react';
+import Button from '@mui/joy/Button';
+import Input from '@mui/joy/Input';
+import Stack from '@mui/joy/Stack';
+import {Tabs, TabList, Tab, TabPanel} from '@mui/joy';
+
+import { useLayers } from "@context";
+import CssBaseline from '@mui/material/CssBaseline';
+
+/**
+ * This component renders the layer selection form
+ *
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export const LayerSelectionForm = () => {
+    // get references to the filtered layer state
+    const {
+        //filteredModelLayers
+    } = useLayers();
+
+    // render the form
+    return (
+        <Fragment>
+            <CssBaseline />
+            <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" placeholder="Tropical tab control" required />
+                            <Button type="submit">Submit</Button>
+                        </Stack>
+                    </form>
+                </TabPanel>
+                <TabPanel value={1}>
+                    <form onSubmit={ formHandler }>
+                        <Stack spacing={1}>
+                            <Input name="synoptic" placeholder="Synoptic tab control" required />
+                            <Button type="submit">Submit</Button>
+                        </Stack>
+                    </form>
+                </TabPanel>
+            </Tabs>
+        </Fragment>
+    );
+};
+
+const formHandler = (event) => {
+        event.preventDefault();
+        const formData = new FormData(event.target);
+        const formJson = Object.fromEntries(formData.entries());
+        alert(JSON.stringify(formJson));
+};
\ No newline at end of file
diff --git a/src/components/sidebar/sidebar.js b/src/components/sidebar/sidebar.js
index ebd34f1f..851b4dcd 100644
--- a/src/components/sidebar/sidebar.js
+++ b/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';
diff --git a/src/components/sidebar/tray.js b/src/components/sidebar/tray.js
index 1b9a7467..9053b382 100644
--- a/src/components/sidebar/tray.js
+++ b/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';
 
diff --git a/src/components/trays/index.js b/src/components/trays/index.js
index 9d73f1ca..2a10dfe7 100644
--- a/src/components/trays/index.js
+++ b/src/components/trays/index.js
@@ -1,13 +1,15 @@
-import * as layers from './layers';
 import * as hurricanes from './hurricanes';
+import * as layers from './layers';
+import * as layerSelection from './layer-selection';
 import * as removeObservationSelections from './observations';
 import * as settings from './settings';
 
 export default {
   layers,
+  layerSelection,
   hurricanes,
-  settings,
-  removeObservationSelections
+  removeObservationSelections,
+  settings
 };
 
 /*
diff --git a/src/components/trays/layer-selection/index.js b/src/components/trays/layer-selection/index.js
new file mode 100644
index 00000000..37e69fbb
--- /dev/null
+++ b/src/components/trays/layer-selection/index.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Stack } from '@mui/joy';
+import { Checklist as LayerSelectionIcon} from '@mui/icons-material';
+
+// import the component that will allow to user to make layer selections
+import { LayerSelectionTray } from "./layerSelectionTray.js";
+
+// get an icon for the tray
+export const icon = <LayerSelectionIcon />;
+
+// create a title for this tray element
+export const title = 'Layer selection';
+
+/**
+ * render the removal component
+ *
+ * @returns {JSX.Element}
+ */
+export const trayContents = () => (
+      <Stack gap={ 2 } p={ 2 }>
+            <LayerSelectionTray />
+      </Stack>
+    );
diff --git a/src/components/trays/layer-selection/layerSelectionTray.js b/src/components/trays/layer-selection/layerSelectionTray.js
new file mode 100644
index 00000000..6b3f2082
--- /dev/null
+++ b/src/components/trays/layer-selection/layerSelectionTray.js
@@ -0,0 +1,17 @@
+import React, { Fragment } from 'react';
+import { LayerSelectionForm } from "@layer-selection/layerSelectionForm.js";
+
+/**
+ * component that handles the selection of layers for the map.
+ *
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export const LayerSelectionTray = () => {
+    // render the layer selection component
+    return (
+        <Fragment>
+            <LayerSelectionForm />
+        </Fragment>
+  );
+};
diff --git a/webpack.config.js b/webpack.config.js
index 89317a17..ba5a3b39 100644
--- a/webpack.config.js
+++ b/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')
+      '@layer-selection': path.resolve(__dirname, 'src/components/layer-selection'),
+      '@utils': path.resolve(__dirname, 'src/utils/')
     }
   },
 

From 9dd73fbab9e80a200398d8f191723e270798128b Mon Sep 17 00:00:00 2001
From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com>
Date: Thu, 9 May 2024 11:35:19 -0400
Subject: [PATCH 02/16] changing title to match UI V2

---
 src/components/trays/layer-selection/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/trays/layer-selection/index.js b/src/components/trays/layer-selection/index.js
index 37e69fbb..3d4e1013 100644
--- a/src/components/trays/layer-selection/index.js
+++ b/src/components/trays/layer-selection/index.js
@@ -9,7 +9,7 @@ import { LayerSelectionTray } from "./layerSelectionTray.js";
 export const icon = <LayerSelectionIcon />;
 
 // create a title for this tray element
-export const title = 'Layer selection';
+export const title = 'ADCIRC Layer selection';
 
 /**
  * render the removal component

From ea5ea5adee20377ac080ee2eb16f5b9c5332515c Mon Sep 17 00:00:00 2001
From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com>
Date: Thu, 9 May 2024 11:35:42 -0400
Subject: [PATCH 03/16] adding form placeholders

---
 .../layer-selection/layerSelectionForm.js          | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/layer-selection/layerSelectionForm.js b/src/components/layer-selection/layerSelectionForm.js
index ea90f0d4..e23ccca3 100644
--- a/src/components/layer-selection/layerSelectionForm.js
+++ b/src/components/layer-selection/layerSelectionForm.js
@@ -31,16 +31,26 @@ export const LayerSelectionForm = () => {
                 <TabPanel value={0}>
                     <form onSubmit = { formHandler }>
                         <Stack spacing={1}>
-                            <Input name="tropical" placeholder="Tropical tab control" required />
+                            <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>
                     </form>
                 </TabPanel>
                 <TabPanel value={1}>
                     <form onSubmit={ formHandler }>
                         <Stack spacing={1}>
-                            <Input name="synoptic" placeholder="Synoptic tab control" required />
+                            <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>
                     </form>
                 </TabPanel>

From d176dbe626421e903b6c4621d168300e46273855 Mon Sep 17 00:00:00 2001
From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com>
Date: Thu, 9 May 2024 14:17:50 -0400
Subject: [PATCH 04/16] refactoring for new name

---
 .../modelSelectionForm.js}                    |  2 +-
 src/components/trays/index.js                 |  4 ++--
 src/components/trays/layer-selection/index.js | 23 -------------------
 src/components/trays/model-selection/index.js | 23 +++++++++++++++++++
 .../modelSelectionTray.js}                    |  6 ++---
 webpack.config.js                             |  2 +-
 6 files changed, 30 insertions(+), 30 deletions(-)
 rename src/components/{layer-selection/layerSelectionForm.js => model-selection/modelSelectionForm.js} (98%)
 delete mode 100644 src/components/trays/layer-selection/index.js
 create mode 100644 src/components/trays/model-selection/index.js
 rename src/components/trays/{layer-selection/layerSelectionTray.js => model-selection/modelSelectionTray.js} (66%)

diff --git a/src/components/layer-selection/layerSelectionForm.js b/src/components/model-selection/modelSelectionForm.js
similarity index 98%
rename from src/components/layer-selection/layerSelectionForm.js
rename to src/components/model-selection/modelSelectionForm.js
index e23ccca3..d4a56c6c 100644
--- a/src/components/layer-selection/layerSelectionForm.js
+++ b/src/components/model-selection/modelSelectionForm.js
@@ -13,7 +13,7 @@ import CssBaseline from '@mui/material/CssBaseline';
  * @returns {JSX.Element}
  * @constructor
  */
-export const LayerSelectionForm = () => {
+export const ModelSelectionForm = () => {
     // get references to the filtered layer state
     const {
         //filteredModelLayers
diff --git a/src/components/trays/index.js b/src/components/trays/index.js
index 2a10dfe7..f9225a49 100644
--- a/src/components/trays/index.js
+++ b/src/components/trays/index.js
@@ -1,12 +1,12 @@
 import * as hurricanes from './hurricanes';
 import * as layers from './layers';
-import * as layerSelection from './layer-selection';
+import * as modelSelection from './model-selection';
 import * as removeObservationSelections from './observations';
 import * as settings from './settings';
 
 export default {
   layers,
-  layerSelection,
+  modelSelection,
   hurricanes,
   removeObservationSelections,
   settings
diff --git a/src/components/trays/layer-selection/index.js b/src/components/trays/layer-selection/index.js
deleted file mode 100644
index 3d4e1013..00000000
--- a/src/components/trays/layer-selection/index.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import { Stack } from '@mui/joy';
-import { Checklist as LayerSelectionIcon} from '@mui/icons-material';
-
-// import the component that will allow to user to make layer selections
-import { LayerSelectionTray } from "./layerSelectionTray.js";
-
-// get an icon for the tray
-export const icon = <LayerSelectionIcon />;
-
-// create a title for this tray element
-export const title = 'ADCIRC Layer selection';
-
-/**
- * render the removal component
- *
- * @returns {JSX.Element}
- */
-export const trayContents = () => (
-      <Stack gap={ 2 } p={ 2 }>
-            <LayerSelectionTray />
-      </Stack>
-    );
diff --git a/src/components/trays/model-selection/index.js b/src/components/trays/model-selection/index.js
new file mode 100644
index 00000000..e64d382d
--- /dev/null
+++ b/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 { ModelSelectionTray } from "./modelSelectionTray.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 }>
+            <ModelSelectionTray />
+      </Stack>
+    );
diff --git a/src/components/trays/layer-selection/layerSelectionTray.js b/src/components/trays/model-selection/modelSelectionTray.js
similarity index 66%
rename from src/components/trays/layer-selection/layerSelectionTray.js
rename to src/components/trays/model-selection/modelSelectionTray.js
index 6b3f2082..b1887d29 100644
--- a/src/components/trays/layer-selection/layerSelectionTray.js
+++ b/src/components/trays/model-selection/modelSelectionTray.js
@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import { LayerSelectionForm } from "@layer-selection/layerSelectionForm.js";
+import { ModelSelectionForm } from "@model-selection/modelSelectionForm.js";
 
 /**
  * component that handles the selection of layers for the map.
@@ -7,11 +7,11 @@ import { LayerSelectionForm } from "@layer-selection/layerSelectionForm.js";
  * @returns {JSX.Element}
  * @constructor
  */
-export const LayerSelectionTray = () => {
+export const ModelSelectionTray = () => {
     // render the layer selection component
     return (
         <Fragment>
-            <LayerSelectionForm />
+            <ModelSelectionForm />
         </Fragment>
   );
 };
diff --git a/webpack.config.js b/webpack.config.js
index ba5a3b39..8666822c 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -102,7 +102,7 @@ module.exports = {
       '@dialog': path.resolve(__dirname, 'src/components/dialog'),
       '@hooks': path.resolve(__dirname, 'src/hooks/'),
       '@images': path.resolve(__dirname, 'src/images/'),
-      '@layer-selection': path.resolve(__dirname, 'src/components/layer-selection'),
+      '@model-selection': path.resolve(__dirname, 'src/components/model-selection'),
       '@utils': path.resolve(__dirname, 'src/utils/')
     }
   },

From 5776de130e43bb1d22b5531d55d78887077f1f17 Mon Sep 17 00:00:00 2001
From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com>
Date: Thu, 9 May 2024 17:02:21 -0400
Subject: [PATCH 05/16] adding features

---
 .../model-selection/modelSelectionForm.js     | 39 +++++++++++++++----
 1 file changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/components/model-selection/modelSelectionForm.js b/src/components/model-selection/modelSelectionForm.js
index d4a56c6c..a10e6dad 100644
--- a/src/components/model-selection/modelSelectionForm.js
+++ b/src/components/model-selection/modelSelectionForm.js
@@ -1,11 +1,8 @@
 import React, { Fragment } from 'react';
-import Button from '@mui/joy/Button';
-import Input from '@mui/joy/Input';
-import Stack from '@mui/joy/Stack';
-import {Tabs, TabList, Tab, TabPanel} from '@mui/joy';
-
+import {Button, Input, Stack, Tabs, TabList, Tab, TabPanel, Divider} from '@mui/joy';
 import { useLayers } from "@context";
-import CssBaseline from '@mui/material/CssBaseline';
+
+// import {LayerCard} from "@components/trays/layers/layer-card";
 
 /**
  * This component renders the layer selection form
@@ -22,7 +19,6 @@ export const ModelSelectionForm = () => {
     // render the form
     return (
         <Fragment>
-            <CssBaseline />
             <Tabs aria-label="Type tabs" defaultValue={0}>
                 <TabList>
                     <Tab>Tropical</Tab>
@@ -39,6 +35,14 @@ export const ModelSelectionForm = () => {
                             <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}>
@@ -52,6 +56,14 @@ export const ModelSelectionForm = () => {
                             <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>
@@ -59,6 +71,19 @@ export const ModelSelectionForm = () => {
     );
 };
 
+/**
+ * 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);

From da6fcfaa5650939cc646fad6993519ff62e84957 Mon Sep 17 00:00:00 2001
From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com>
Date: Wed, 8 May 2024 17:24:56 -0400
Subject: [PATCH 06/16] initial insert of the filter dialog

---
 .../layer-selection/layerSelectionForm.js     | 57 +++++++++++++++++++
 src/components/sidebar/sidebar.js             |  6 +-
 src/components/sidebar/tray.js                | 13 +----
 src/components/trays/index.js                 |  8 ++-
 src/components/trays/layer-selection/index.js | 23 ++++++++
 .../layer-selection/layerSelectionTray.js     | 17 ++++++
 webpack.config.js                             |  5 +-
 7 files changed, 108 insertions(+), 21 deletions(-)
 create mode 100644 src/components/layer-selection/layerSelectionForm.js
 create mode 100644 src/components/trays/layer-selection/index.js
 create mode 100644 src/components/trays/layer-selection/layerSelectionTray.js

diff --git a/src/components/layer-selection/layerSelectionForm.js b/src/components/layer-selection/layerSelectionForm.js
new file mode 100644
index 00000000..ea90f0d4
--- /dev/null
+++ b/src/components/layer-selection/layerSelectionForm.js
@@ -0,0 +1,57 @@
+import React, { Fragment } from 'react';
+import Button from '@mui/joy/Button';
+import Input from '@mui/joy/Input';
+import Stack from '@mui/joy/Stack';
+import {Tabs, TabList, Tab, TabPanel} from '@mui/joy';
+
+import { useLayers } from "@context";
+import CssBaseline from '@mui/material/CssBaseline';
+
+/**
+ * This component renders the layer selection form
+ *
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export const LayerSelectionForm = () => {
+    // get references to the filtered layer state
+    const {
+        //filteredModelLayers
+    } = useLayers();
+
+    // render the form
+    return (
+        <Fragment>
+            <CssBaseline />
+            <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" placeholder="Tropical tab control" required />
+                            <Button type="submit">Submit</Button>
+                        </Stack>
+                    </form>
+                </TabPanel>
+                <TabPanel value={1}>
+                    <form onSubmit={ formHandler }>
+                        <Stack spacing={1}>
+                            <Input name="synoptic" placeholder="Synoptic tab control" required />
+                            <Button type="submit">Submit</Button>
+                        </Stack>
+                    </form>
+                </TabPanel>
+            </Tabs>
+        </Fragment>
+    );
+};
+
+const formHandler = (event) => {
+        event.preventDefault();
+        const formData = new FormData(event.target);
+        const formJson = Object.fromEntries(formData.entries());
+        alert(JSON.stringify(formJson));
+};
\ No newline at end of file
diff --git a/src/components/sidebar/sidebar.js b/src/components/sidebar/sidebar.js
index ebd34f1f..851b4dcd 100644
--- a/src/components/sidebar/sidebar.js
+++ b/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';
diff --git a/src/components/sidebar/tray.js b/src/components/sidebar/tray.js
index 1b9a7467..9053b382 100644
--- a/src/components/sidebar/tray.js
+++ b/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';
 
diff --git a/src/components/trays/index.js b/src/components/trays/index.js
index 9d73f1ca..2a10dfe7 100644
--- a/src/components/trays/index.js
+++ b/src/components/trays/index.js
@@ -1,13 +1,15 @@
-import * as layers from './layers';
 import * as hurricanes from './hurricanes';
+import * as layers from './layers';
+import * as layerSelection from './layer-selection';
 import * as removeObservationSelections from './observations';
 import * as settings from './settings';
 
 export default {
   layers,
+  layerSelection,
   hurricanes,
-  settings,
-  removeObservationSelections
+  removeObservationSelections,
+  settings
 };
 
 /*
diff --git a/src/components/trays/layer-selection/index.js b/src/components/trays/layer-selection/index.js
new file mode 100644
index 00000000..37e69fbb
--- /dev/null
+++ b/src/components/trays/layer-selection/index.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Stack } from '@mui/joy';
+import { Checklist as LayerSelectionIcon} from '@mui/icons-material';
+
+// import the component that will allow to user to make layer selections
+import { LayerSelectionTray } from "./layerSelectionTray.js";
+
+// get an icon for the tray
+export const icon = <LayerSelectionIcon />;
+
+// create a title for this tray element
+export const title = 'Layer selection';
+
+/**
+ * render the removal component
+ *
+ * @returns {JSX.Element}
+ */
+export const trayContents = () => (
+      <Stack gap={ 2 } p={ 2 }>
+            <LayerSelectionTray />
+      </Stack>
+    );
diff --git a/src/components/trays/layer-selection/layerSelectionTray.js b/src/components/trays/layer-selection/layerSelectionTray.js
new file mode 100644
index 00000000..6b3f2082
--- /dev/null
+++ b/src/components/trays/layer-selection/layerSelectionTray.js
@@ -0,0 +1,17 @@
+import React, { Fragment } from 'react';
+import { LayerSelectionForm } from "@layer-selection/layerSelectionForm.js";
+
+/**
+ * component that handles the selection of layers for the map.
+ *
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export const LayerSelectionTray = () => {
+    // render the layer selection component
+    return (
+        <Fragment>
+            <LayerSelectionForm />
+        </Fragment>
+  );
+};
diff --git a/webpack.config.js b/webpack.config.js
index 89317a17..ba5a3b39 100644
--- a/webpack.config.js
+++ b/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')
+      '@layer-selection': path.resolve(__dirname, 'src/components/layer-selection'),
+      '@utils': path.resolve(__dirname, 'src/utils/')
     }
   },
 

From 39e477d843f491cf348bde62d72d696d70716a74 Mon Sep 17 00:00:00 2001
From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com>
Date: Thu, 9 May 2024 11:35:19 -0400
Subject: [PATCH 07/16] changing title to match UI V2

---
 src/components/trays/layer-selection/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/trays/layer-selection/index.js b/src/components/trays/layer-selection/index.js
index 37e69fbb..3d4e1013 100644
--- a/src/components/trays/layer-selection/index.js
+++ b/src/components/trays/layer-selection/index.js
@@ -9,7 +9,7 @@ import { LayerSelectionTray } from "./layerSelectionTray.js";
 export const icon = <LayerSelectionIcon />;
 
 // create a title for this tray element
-export const title = 'Layer selection';
+export const title = 'ADCIRC Layer selection';
 
 /**
  * render the removal component

From 0e2e225d353484b0b8bafdb742bd69412640e9d9 Mon Sep 17 00:00:00 2001
From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com>
Date: Thu, 9 May 2024 11:35:42 -0400
Subject: [PATCH 08/16] adding form placeholders

---
 .../layer-selection/layerSelectionForm.js          | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/layer-selection/layerSelectionForm.js b/src/components/layer-selection/layerSelectionForm.js
index ea90f0d4..e23ccca3 100644
--- a/src/components/layer-selection/layerSelectionForm.js
+++ b/src/components/layer-selection/layerSelectionForm.js
@@ -31,16 +31,26 @@ export const LayerSelectionForm = () => {
                 <TabPanel value={0}>
                     <form onSubmit = { formHandler }>
                         <Stack spacing={1}>
-                            <Input name="tropical" placeholder="Tropical tab control" required />
+                            <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>
                     </form>
                 </TabPanel>
                 <TabPanel value={1}>
                     <form onSubmit={ formHandler }>
                         <Stack spacing={1}>
-                            <Input name="synoptic" placeholder="Synoptic tab control" required />
+                            <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>
                     </form>
                 </TabPanel>

From 42d7be64673d355370894a6650a7457739eaca4c Mon Sep 17 00:00:00 2001
From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com>
Date: Thu, 9 May 2024 14:17:50 -0400
Subject: [PATCH 09/16] refactoring for new name

---
 .../modelSelectionForm.js}                    |  2 +-
 src/components/trays/index.js                 |  4 ++--
 src/components/trays/layer-selection/index.js | 23 -------------------
 src/components/trays/model-selection/index.js | 23 +++++++++++++++++++
 .../modelSelectionTray.js}                    |  6 ++---
 webpack.config.js                             |  2 +-
 6 files changed, 30 insertions(+), 30 deletions(-)
 rename src/components/{layer-selection/layerSelectionForm.js => model-selection/modelSelectionForm.js} (98%)
 delete mode 100644 src/components/trays/layer-selection/index.js
 create mode 100644 src/components/trays/model-selection/index.js
 rename src/components/trays/{layer-selection/layerSelectionTray.js => model-selection/modelSelectionTray.js} (66%)

diff --git a/src/components/layer-selection/layerSelectionForm.js b/src/components/model-selection/modelSelectionForm.js
similarity index 98%
rename from src/components/layer-selection/layerSelectionForm.js
rename to src/components/model-selection/modelSelectionForm.js
index e23ccca3..d4a56c6c 100644
--- a/src/components/layer-selection/layerSelectionForm.js
+++ b/src/components/model-selection/modelSelectionForm.js
@@ -13,7 +13,7 @@ import CssBaseline from '@mui/material/CssBaseline';
  * @returns {JSX.Element}
  * @constructor
  */
-export const LayerSelectionForm = () => {
+export const ModelSelectionForm = () => {
     // get references to the filtered layer state
     const {
         //filteredModelLayers
diff --git a/src/components/trays/index.js b/src/components/trays/index.js
index 2a10dfe7..f9225a49 100644
--- a/src/components/trays/index.js
+++ b/src/components/trays/index.js
@@ -1,12 +1,12 @@
 import * as hurricanes from './hurricanes';
 import * as layers from './layers';
-import * as layerSelection from './layer-selection';
+import * as modelSelection from './model-selection';
 import * as removeObservationSelections from './observations';
 import * as settings from './settings';
 
 export default {
   layers,
-  layerSelection,
+  modelSelection,
   hurricanes,
   removeObservationSelections,
   settings
diff --git a/src/components/trays/layer-selection/index.js b/src/components/trays/layer-selection/index.js
deleted file mode 100644
index 3d4e1013..00000000
--- a/src/components/trays/layer-selection/index.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import { Stack } from '@mui/joy';
-import { Checklist as LayerSelectionIcon} from '@mui/icons-material';
-
-// import the component that will allow to user to make layer selections
-import { LayerSelectionTray } from "./layerSelectionTray.js";
-
-// get an icon for the tray
-export const icon = <LayerSelectionIcon />;
-
-// create a title for this tray element
-export const title = 'ADCIRC Layer selection';
-
-/**
- * render the removal component
- *
- * @returns {JSX.Element}
- */
-export const trayContents = () => (
-      <Stack gap={ 2 } p={ 2 }>
-            <LayerSelectionTray />
-      </Stack>
-    );
diff --git a/src/components/trays/model-selection/index.js b/src/components/trays/model-selection/index.js
new file mode 100644
index 00000000..e64d382d
--- /dev/null
+++ b/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 { ModelSelectionTray } from "./modelSelectionTray.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 }>
+            <ModelSelectionTray />
+      </Stack>
+    );
diff --git a/src/components/trays/layer-selection/layerSelectionTray.js b/src/components/trays/model-selection/modelSelectionTray.js
similarity index 66%
rename from src/components/trays/layer-selection/layerSelectionTray.js
rename to src/components/trays/model-selection/modelSelectionTray.js
index 6b3f2082..b1887d29 100644
--- a/src/components/trays/layer-selection/layerSelectionTray.js
+++ b/src/components/trays/model-selection/modelSelectionTray.js
@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import { LayerSelectionForm } from "@layer-selection/layerSelectionForm.js";
+import { ModelSelectionForm } from "@model-selection/modelSelectionForm.js";
 
 /**
  * component that handles the selection of layers for the map.
@@ -7,11 +7,11 @@ import { LayerSelectionForm } from "@layer-selection/layerSelectionForm.js";
  * @returns {JSX.Element}
  * @constructor
  */
-export const LayerSelectionTray = () => {
+export const ModelSelectionTray = () => {
     // render the layer selection component
     return (
         <Fragment>
-            <LayerSelectionForm />
+            <ModelSelectionForm />
         </Fragment>
   );
 };
diff --git a/webpack.config.js b/webpack.config.js
index ba5a3b39..8666822c 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -102,7 +102,7 @@ module.exports = {
       '@dialog': path.resolve(__dirname, 'src/components/dialog'),
       '@hooks': path.resolve(__dirname, 'src/hooks/'),
       '@images': path.resolve(__dirname, 'src/images/'),
-      '@layer-selection': path.resolve(__dirname, 'src/components/layer-selection'),
+      '@model-selection': path.resolve(__dirname, 'src/components/model-selection'),
       '@utils': path.resolve(__dirname, 'src/utils/')
     }
   },

From 13702406857b0a033f1df5ab42328c4ddf83783b Mon Sep 17 00:00:00 2001
From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com>
Date: Thu, 9 May 2024 17:02:21 -0400
Subject: [PATCH 10/16] adding features

---
 .../model-selection/modelSelectionForm.js     | 39 +++++++++++++++----
 1 file changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/components/model-selection/modelSelectionForm.js b/src/components/model-selection/modelSelectionForm.js
index d4a56c6c..a10e6dad 100644
--- a/src/components/model-selection/modelSelectionForm.js
+++ b/src/components/model-selection/modelSelectionForm.js
@@ -1,11 +1,8 @@
 import React, { Fragment } from 'react';
-import Button from '@mui/joy/Button';
-import Input from '@mui/joy/Input';
-import Stack from '@mui/joy/Stack';
-import {Tabs, TabList, Tab, TabPanel} from '@mui/joy';
-
+import {Button, Input, Stack, Tabs, TabList, Tab, TabPanel, Divider} from '@mui/joy';
 import { useLayers } from "@context";
-import CssBaseline from '@mui/material/CssBaseline';
+
+// import {LayerCard} from "@components/trays/layers/layer-card";
 
 /**
  * This component renders the layer selection form
@@ -22,7 +19,6 @@ export const ModelSelectionForm = () => {
     // render the form
     return (
         <Fragment>
-            <CssBaseline />
             <Tabs aria-label="Type tabs" defaultValue={0}>
                 <TabList>
                     <Tab>Tropical</Tab>
@@ -39,6 +35,14 @@ export const ModelSelectionForm = () => {
                             <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}>
@@ -52,6 +56,14 @@ export const ModelSelectionForm = () => {
                             <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>
@@ -59,6 +71,19 @@ export const ModelSelectionForm = () => {
     );
 };
 
+/**
+ * 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);

From df5358740bc063e266f150328b2f1963cb51e376 Mon Sep 17 00:00:00 2001
From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com>
Date: Tue, 14 May 2024 15:05:28 -0400
Subject: [PATCH 11/16] renaming things so they make more sense

---
 src/components/trays/delete/index.js          | 23 +++++++++++++++++++
 .../remove-observations.js}                   |  9 ++++----
 src/components/trays/index.js                 | 10 ++++----
 src/components/trays/model-selection/index.js |  4 ++--
 ...delSelectionTray.js => model-selection.js} |  2 +-
 src/components/trays/observations/index.js    | 23 -------------------
 6 files changed, 35 insertions(+), 36 deletions(-)
 create mode 100644 src/components/trays/delete/index.js
 rename src/components/trays/{observations/removeObservations.js => delete/remove-observations.js} (77%)
 rename src/components/trays/model-selection/{modelSelectionTray.js => model-selection.js} (89%)
 delete mode 100644 src/components/trays/observations/index.js

diff --git a/src/components/trays/delete/index.js b/src/components/trays/delete/index.js
new file mode 100644
index 00000000..d525dcd8
--- /dev/null
+++ b/src/components/trays/delete/index.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Stack } from '@mui/joy';
+import { Delete as RemoveIcon} from '@mui/icons-material';
+
+// import the component that will delete the selected observations from state
+import { RemoveSelectedObservations } from "./remove-observations";
+
+// 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 }>
+            <RemoveSelectedObservations />
+      </Stack>
+    );
diff --git a/src/components/trays/observations/removeObservations.js b/src/components/trays/delete/remove-observations.js
similarity index 77%
rename from src/components/trays/observations/removeObservations.js
rename to src/components/trays/delete/remove-observations.js
index 6751f0ac..33d05663 100644
--- a/src/components/trays/observations/removeObservations.js
+++ b/src/components/trays/delete/remove-observations.js
@@ -1,15 +1,14 @@
 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 things.
  *
  * @returns {JSX.Element}
  * @constructor
  */
-export const RemoveObservations = () => {
+export const RemoveSelectedObservations = () => {
     // get references to the observation data/list
     const {
         map,
@@ -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>
   );
 };
diff --git a/src/components/trays/index.js b/src/components/trays/index.js
index f9225a49..d29991c3 100644
--- a/src/components/trays/index.js
+++ b/src/components/trays/index.js
@@ -1,14 +1,14 @@
 import * as hurricanes from './hurricanes';
 import * as layers from './layers';
-import * as modelSelection from './model-selection';
-import * as removeObservationSelections from './observations';
+import * as ModelSelection from './model-selection';
+import * as RemoveSelectedObservations from './delete';
 import * as settings from './settings';
 
 export default {
   layers,
-  modelSelection,
+  ModelSelection,
   hurricanes,
-  removeObservationSelections,
+  RemoveSelectedObservations,
   settings
 };
 
@@ -22,7 +22,7 @@ export default {
      https://mui.com/material-ui/material-icons/
   - `trayContents`, ReactNode; the contents of the new tray
   
-  for example, this boilerplate should be sufficient starting place:
+  for example, this boilerplate should be a sufficient starting place:
   
      export const icon = <MyIcon />
      export const title = 'My New Tray'
diff --git a/src/components/trays/model-selection/index.js b/src/components/trays/model-selection/index.js
index e64d382d..6d1f09b7 100644
--- a/src/components/trays/model-selection/index.js
+++ b/src/components/trays/model-selection/index.js
@@ -3,7 +3,7 @@ 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 { ModelSelectionTray } from "./modelSelectionTray.js";
+import { ModelSelection } from "./model-selection.js";
 
 // get an icon for the tray
 export const icon = <ModelSelectionIcon />;
@@ -18,6 +18,6 @@ export const title = 'ADCIRC Model selection';
  */
 export const trayContents = () => (
       <Stack gap={ 2 } p={ 2 }>
-            <ModelSelectionTray />
+            <ModelSelection />
       </Stack>
     );
diff --git a/src/components/trays/model-selection/modelSelectionTray.js b/src/components/trays/model-selection/model-selection.js
similarity index 89%
rename from src/components/trays/model-selection/modelSelectionTray.js
rename to src/components/trays/model-selection/model-selection.js
index b1887d29..44f05193 100644
--- a/src/components/trays/model-selection/modelSelectionTray.js
+++ b/src/components/trays/model-selection/model-selection.js
@@ -7,7 +7,7 @@ import { ModelSelectionForm } from "@model-selection/modelSelectionForm.js";
  * @returns {JSX.Element}
  * @constructor
  */
-export const ModelSelectionTray = () => {
+export const ModelSelection = () => {
     // render the layer selection component
     return (
         <Fragment>
diff --git a/src/components/trays/observations/index.js b/src/components/trays/observations/index.js
deleted file mode 100644
index 6ce54ee1..00000000
--- a/src/components/trays/observations/index.js
+++ /dev/null
@@ -1,23 +0,0 @@
-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>
-    );

From 213a5db21a461b5e5ee1e4b88fbb7f29e17c837e Mon Sep 17 00:00:00 2001
From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com>
Date: Tue, 14 May 2024 15:14:38 -0400
Subject: [PATCH 12/16] renaming things so they make more sense

---
 src/components/trays/delete/index.js               | 4 ++--
 src/components/trays/delete/remove-observations.js | 2 +-
 src/components/trays/index.js                      | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/trays/delete/index.js b/src/components/trays/delete/index.js
index d525dcd8..4310a240 100644
--- a/src/components/trays/delete/index.js
+++ b/src/components/trays/delete/index.js
@@ -3,7 +3,7 @@ import { Stack } from '@mui/joy';
 import { Delete as RemoveIcon} from '@mui/icons-material';
 
 // import the component that will delete the selected observations from state
-import { RemoveSelectedObservations } from "./remove-observations";
+import { RemoveObservations } from "./remove-observations";
 
 // get an icon for the tray
 export const icon = <RemoveIcon />;
@@ -18,6 +18,6 @@ export const title = 'Remove items';
  */
 export const trayContents = () => (
       <Stack gap={ 2 } p={ 2 }>
-            <RemoveSelectedObservations />
+            <RemoveObservations />
       </Stack>
     );
diff --git a/src/components/trays/delete/remove-observations.js b/src/components/trays/delete/remove-observations.js
index 33d05663..ff294b04 100644
--- a/src/components/trays/delete/remove-observations.js
+++ b/src/components/trays/delete/remove-observations.js
@@ -8,7 +8,7 @@ import {useLayers} from "@context";
  * @returns {JSX.Element}
  * @constructor
  */
-export const RemoveSelectedObservations = () => {
+export const RemoveObservations = () => {
     // get references to the observation data/list
     const {
         map,
diff --git a/src/components/trays/index.js b/src/components/trays/index.js
index a469d2af..33e5ecfb 100644
--- a/src/components/trays/index.js
+++ b/src/components/trays/index.js
@@ -1,14 +1,14 @@
 import * as hurricanes from './hurricanes';
 import * as layers from './layers';
 import * as ModelSelection from './model-selection';
-import * as RemoveSelectedObservations from './delete';
+import * as RemoveObservations from './delete';
 import * as settings from './settings';
 
 export default {
   layers,
   ModelSelection,
   hurricanes,
-  RemoveSelectedObservations,
+  RemoveObservations,
   settings
 };
 

From 8e5a78323babad33508d5ea8765630134b043ca4 Mon Sep 17 00:00:00 2001
From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com>
Date: Tue, 14 May 2024 15:16:59 -0400
Subject: [PATCH 13/16] renaming things so they make more sense

---
 src/components/trays/index.js                                  | 2 +-
 src/components/trays/{delete => remove}/index.js               | 0
 src/components/trays/{delete => remove}/remove-observations.js | 0
 3 files changed, 1 insertion(+), 1 deletion(-)
 rename src/components/trays/{delete => remove}/index.js (100%)
 rename src/components/trays/{delete => remove}/remove-observations.js (100%)

diff --git a/src/components/trays/index.js b/src/components/trays/index.js
index 33e5ecfb..f9df20bf 100644
--- a/src/components/trays/index.js
+++ b/src/components/trays/index.js
@@ -1,7 +1,7 @@
 import * as hurricanes from './hurricanes';
 import * as layers from './layers';
 import * as ModelSelection from './model-selection';
-import * as RemoveObservations from './delete';
+import * as RemoveObservations from './remove';
 import * as settings from './settings';
 
 export default {
diff --git a/src/components/trays/delete/index.js b/src/components/trays/remove/index.js
similarity index 100%
rename from src/components/trays/delete/index.js
rename to src/components/trays/remove/index.js
diff --git a/src/components/trays/delete/remove-observations.js b/src/components/trays/remove/remove-observations.js
similarity index 100%
rename from src/components/trays/delete/remove-observations.js
rename to src/components/trays/remove/remove-observations.js

From 7793530531e7479598b40f916b9c70b6c2ccaea8 Mon Sep 17 00:00:00 2001
From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com>
Date: Tue, 14 May 2024 15:19:05 -0400
Subject: [PATCH 14/16] renaming things so they make more sense

---
 .../trays/model-selection/modelSelectionTray.js | 17 -----------------
 1 file changed, 17 deletions(-)
 delete mode 100644 src/components/trays/model-selection/modelSelectionTray.js

diff --git a/src/components/trays/model-selection/modelSelectionTray.js b/src/components/trays/model-selection/modelSelectionTray.js
deleted file mode 100644
index b1887d29..00000000
--- a/src/components/trays/model-selection/modelSelectionTray.js
+++ /dev/null
@@ -1,17 +0,0 @@
-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 ModelSelectionTray = () => {
-    // render the layer selection component
-    return (
-        <Fragment>
-            <ModelSelectionForm />
-        </Fragment>
-  );
-};

From 02a5dd8ed6b8f47bace964e5672ff84145aaf9d0 Mon Sep 17 00:00:00 2001
From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com>
Date: Tue, 14 May 2024 15:22:26 -0400
Subject: [PATCH 15/16] commenting out a warning for now.

---
 src/components/model-selection/modelSelectionForm.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/model-selection/modelSelectionForm.js b/src/components/model-selection/modelSelectionForm.js
index a10e6dad..7301e74a 100644
--- a/src/components/model-selection/modelSelectionForm.js
+++ b/src/components/model-selection/modelSelectionForm.js
@@ -75,9 +75,9 @@ export const ModelSelectionForm = () => {
  * this method populates the controls on the form.
  *
  */
-const dataLoader = () => {
-
-};
+// const dataLoader = () => {
+//
+// };
 
 /**
  * method to initiate a model search with the filter selections on the form

From 24a1ddb9dc9347077f6bf73271119c44ee8deb38 Mon Sep 17 00:00:00 2001
From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com>
Date: Tue, 14 May 2024 15:42:46 -0400
Subject: [PATCH 16/16] tidying up tray items, adding a placeholder for
 selected model removal

---
 src/components/trays/index.js                 |  8 ++---
 src/components/trays/remove/index.js          |  4 ++-
 src/components/trays/remove/remove-models.js  | 30 +++++++++++++++++++
 .../trays/remove/remove-observations.js       |  2 +-
 4 files changed, 38 insertions(+), 6 deletions(-)
 create mode 100644 src/components/trays/remove/remove-models.js

diff --git a/src/components/trays/index.js b/src/components/trays/index.js
index f9df20bf..d657e1d1 100644
--- a/src/components/trays/index.js
+++ b/src/components/trays/index.js
@@ -1,14 +1,14 @@
 import * as hurricanes from './hurricanes';
 import * as layers from './layers';
-import * as ModelSelection from './model-selection';
-import * as RemoveObservations from './remove';
+import * as model_selection from './model-selection';
+import * as remove_items from './remove';
 import * as settings from './settings';
 
 export default {
   layers,
-  ModelSelection,
   hurricanes,
-  RemoveObservations,
+  model_selection,
+  remove_items,
   settings
 };
 
diff --git a/src/components/trays/remove/index.js b/src/components/trays/remove/index.js
index 4310a240..009b8565 100644
--- a/src/components/trays/remove/index.js
+++ b/src/components/trays/remove/index.js
@@ -2,8 +2,9 @@ import React from 'react';
 import { Stack } from '@mui/joy';
 import { Delete as RemoveIcon} from '@mui/icons-material';
 
-// import the component that will delete the selected observations from state
+// 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 />;
@@ -19,5 +20,6 @@ export const title = 'Remove items';
 export const trayContents = () => (
       <Stack gap={ 2 } p={ 2 }>
             <RemoveObservations />
+            <RemoveModels />
       </Stack>
     );
diff --git a/src/components/trays/remove/remove-models.js b/src/components/trays/remove/remove-models.js
new file mode 100644
index 00000000..2ec2df6d
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/components/trays/remove/remove-observations.js b/src/components/trays/remove/remove-observations.js
index ff294b04..fca4b740 100644
--- a/src/components/trays/remove/remove-observations.js
+++ b/src/components/trays/remove/remove-observations.js
@@ -3,7 +3,7 @@ import { Button } from '@mui/joy';
 import {useLayers} from "@context";
 
 /**
- * component that handles the removal of things.
+ * component that handles the removal of observations.
  *
  * @returns {JSX.Element}
  * @constructor