Intermediate PR: Additional model search functionality

src/components/dialog/observation-chart.js

@@ -15,6 +15,17 @@ export default function ObservationChart(url) {
     return (<CreateObsChart url={ url.url } />);
 }
 
+/**
+ * this suppresses the re-chart errors on the x/y-axis rendering.
+ *
+ * @type {{(message?: any, ...optionalParams: any[]): void, (...data: any[]): void}}
+ */
+const error = console.error;
+console.error = (...args) => {
+  if (/defaultProps/.test(args[0])) return;
+  error(...args);
+};
+
 /**
  * Retrieves and returns the chart data in json format
  *

src/components/model-selection/DropDownOptions.js

@@ -0,0 +1,45 @@
+import React, {Fragment} from "react";
+import PropTypes from 'prop-types';
+import {Option} from '@mui/joy';
+
+/**
+ * returns a list of drop down options for that data/type.
+ *
+ * @param data
+ * @param type
+ * @constructor
+ */
+export default function DropDownOptions(data) {
+    // set component prop types
+    DropDownOptions.propTypes = { data: PropTypes.any };
+
+    // do not render if there is no data
+    if (data.data != null) {
+        // if there is a warning getting the result
+        if (data.data['Warning'] !== undefined) {
+            return (
+                <div>
+                    Warning: {data.data['Warning']}
+                </div>
+            );
+        }
+        // if there is an error getting the result
+        else if(data.data['Error'] !== undefined) {
+            return (
+                <div>
+                    Error: {data.data['Error']}
+                </div>
+            );
+        }
+        // return all the options
+        else {
+            return (
+                <Fragment>
+                    {data.data[data.type].filter(item => item !== "").map(item => (
+                        <Option key={item} value={item}>{item}</Option>
+                    ))}
+                </Fragment>
+            );
+        }
+    }
+}

src/components/model-selection/catalogItems.js

@@ -0,0 +1,78 @@
+import React, {Fragment, useState} from "react";
+import PropTypes from 'prop-types';
+import {AccordionGroup, Accordion, AccordionSummary, AccordionDetails, Stack} from '@mui/joy';
+
+/**
+ * returns a list of drop down options for that data/type.
+ *
+ * @param data
+ * @param type
+ * @constructor
+ */
+export default function CatalogItems(data) {
+    // set component prop types
+    CatalogItems.propTypes = { data: PropTypes.any };
+
+    // create some state for what catalog accordian is expanded/not expanded
+    const [accordianIndex, setAccordianIndex] = useState(-1);
+
+    // do not render if there is no data
+    if (data.data != null) {
+        // if there is a warning getting the result
+        if (data.data['Warning'] !== undefined) {
+            return (
+                <div>
+                    Warning: {data.data['Warning']}
+                </div>
+            );
+        }
+        // if there is an error getting the result
+        else if(data.data['Error'] !== undefined) {
+            return (
+                <div>
+                    Error: {data.data['Error']}
+                </div>
+            );
+        }
+        // return all the data cards
+        else {
+            return (
+                <Fragment>
+                    <AccordionGroup sx={{maxWidth: 410, size: "sm", variant: "soft"}}>
+                        {
+                            data
+                                .data['catalog']
+                                .filter(catalogs => catalogs !== "")
+                                .map((catalog, itemIndex) =>
+                                (
+                                    <Stack key={ itemIndex } spacing={1}>
+                                        <Accordion
+                                            key={ itemIndex }
+                                            sx={{ p: 0 }}
+                                            expanded={accordianIndex === itemIndex}
+                                            onChange={(event, expanded) => {
+                                                setAccordianIndex(expanded ? itemIndex : null);
+                                            }}>
+
+                                            <AccordionSummary>
+                                                Model date: {catalog['id']}
+                                            </AccordionSummary>
+
+                                            <AccordionDetails>
+                                                {catalog['members'].map((member, memberIndex) => (
+                                                    <Stack key={ memberIndex }>
+                                                         {member['id'] }
+                                                    </Stack>
+                                                ))}
+                                            </AccordionDetails>
+                                        </Accordion>
+                                    </Stack>
+                                )
+                            )
+                        }
+                    </AccordionGroup>
+                </Fragment>
+            );
+        }
+    }
+}

src/components/model-selection/modelSelectionTray.js

@@ -0,0 +1,40 @@
+import React, {Fragment} from 'react';
+import {Tab, Tabs, TabList, TabPanel} from '@mui/joy';
+import {SynopticTabForm} from "@model-selection/synopticTab";
+import {TropicalTabForm} from "@model-selection/tropicalTab";
+
+/**
+ * This component renders the layer selection form
+ *
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export const ModelSelectionTray = () => {
+    // render the form
+    return (
+        <Fragment>
+            <Tabs aria-label="Type tabs" defaultValue={0}>
+                <TabList>
+                    <Tab>Tropical</Tab>
+                    <Tab>Synoptic</Tab>
+                </TabList>
+
+                <TabPanel value={0}>
+                    <TropicalTabForm/>
+                </TabPanel>
+
+                <TabPanel value={1}>
+                    <SynopticTabForm/>
+                </TabPanel>
+            </Tabs>
+        </Fragment>
+    );
+};
+
+/**
+ * this method populates the controls on the form.
+ *
+ */
+// const dataLoader = () => {
+//
+// };