Merge pull request #19 from RENCI/skeleton

merge skeleton into version2

.gitattributes

@@ -1 +1,3 @@
 CHANGES.md merge=union
+.env filter=git-crypt diff=git-crypt
+.env.development filter=git-crypt diff=git-crypt

.gitignore

@@ -26,3 +26,5 @@ pancake/
 yarn-error.log
 
 package-lock.json
+
+terria-git-crypt-key

lib/Views/UserInterface.jsx

@@ -1,27 +1,35 @@
 import PropTypes from "prop-types";
-import React from "react";
+import React, { useMemo, useState } from "react";
 // import RelatedMaps from "terriajs/lib/ReactViews/RelatedMaps/RelatedMaps";
 import StandardUserInterface from "terriajs/lib/ReactViews/StandardUserInterface/StandardUserInterface";
 import version from "../../version";
+import { Context } from "../context/context";
 import "./global.scss";
 import IconSection from "./layerSelection/iconSection";
 import SwipeableEdgeDrawer from "./selectedLayers/swipeableDrawer";
 
 export default function UserInterface(props) {
   const [open, setOpen] = React.useState(false);
+  const [layerData, setLayertData] = useState("default data");
+  // const value = useMemo(() => ({ layerData, setLayertData }), [layerData]);
+
   // const relatedMaps = props.viewState.terria.configParameters.relatedMaps;
   const toggleDrawer = (newOpen) => () => {
     setOpen(newOpen);
   };
   return (
     <>
-      <IconSection />
-      <StandardUserInterface
-        {...props}
-        version={version}
-        style={{ maxHeight: "400px !important" }}
-      />
-      <SwipeableEdgeDrawer open={open} toggleDrawer={toggleDrawer} />
+      <Context.Provider
+        value={{ layers: layerData, setLayerData: setLayertData }}
+      >
+        <IconSection />
+        <StandardUserInterface
+          {...props}
+          version={version}
+          style={{ maxHeight: "400px !important" }}
+        />
+        <SwipeableEdgeDrawer open={open} toggleDrawer={toggleDrawer} />
+      </Context.Provider>
     </>
   );
 }

lib/Views/filterPanel/AdcircFilterPanel.jsx

@@ -1,5 +1,7 @@
-import React, { useState } from "react";
-
+import React from "react";
+import { Get } from "react-axios";
+import { useState, useContext } from "react";
+import { Context } from "../../context/context";
 import FormControl from "@mui/material/FormControl";
 import FormLabel from "@mui/material/FormLabel";
 import RadioGroup from "@mui/material/RadioGroup";
@@ -9,31 +11,59 @@ import SynopticPanel from "./SynopticPanel";
 import TropicalPanel from "./TropicalPanel";
 
 export default function AdcircFilterForm() {
-  // const [textValue, setTextValue] = useState("");
-  const [panel, setPanel] = useState("Synoptic");
+  const { layers, setLayerData } = useContext(Context);
+  const [panel, setPanel] = useState("synoptic");
+
+  // console.log(layers);
 
   return (
-    <FormControl>
-      <FormLabel id="demo-radio-buttons-group-label">ADCIRC Run Type</FormLabel>
-      <RadioGroup
-        row
-        aria-labelledby="demo-radio-buttons-group-label"
-        defaultValue="Synoptic"
-        name="radio-buttons-group"
+    <>
+      <FormControl sx={{ margin: 2 }}>
+        <FormLabel id="demo-radio-buttons-group-label">
+          ADCIRC Run Type
+        </FormLabel>
+        <RadioGroup
+          row
+          aria-labelledby="demo-radio-buttons-group-label"
+          defaultValue="Synoptic"
+          name="radio-buttons-group"
+        >
+          <FormControlLabel
+            value="Synoptic"
+            control={<Radio onChange={() => setPanel("synoptic")} />}
+            label="Synoptic"
+          />
+          <FormControlLabel
+            value="Tropical"
+            control={<Radio onChange={() => setPanel("tropical")} />}
+            label="Tropical"
+          />
+        </RadioGroup>
+      </FormControl>
+      <Get
+        url="https://apsviz-ui-data-dev.apps.renci.org/get_pulldown_data"
+        params={{ met_class: panel }}
       >
-        <FormControlLabel
-          value="Synoptic"
-          control={<Radio onChange={() => setPanel("Synoptic")} />}
-          label="Synoptic"
-        />
-        <FormControlLabel
-          value="Tropical"
-          control={<Radio onChange={() => setPanel("Tropical")} />}
-          label="Tropical"
-        />
-      </RadioGroup>
-
-      {panel === "Synoptic" ? <SynopticPanel /> : <TropicalPanel />}
-    </FormControl>
+        {(error, response, isLoading, makeRequest, axios) => {
+          if (error) {
+            return <div>Something bad happened</div>;
+          } else if (isLoading) {
+            return <div>Loading...</div>;
+          } else if (response !== null) {
+            // setLayerData(response);
+            return (
+              <div>
+                {panel === "synoptic" ? (
+                  <SynopticPanel data={response} />
+                ) : (
+                  <TropicalPanel data={response} />
+                )}
+              </div>
+            );
+          }
+          return <div>Default message before request is made.</div>;
+        }}
+      </Get>
+    </>
   );
 }

lib/Views/filterPanel/CommonPanel.jsx

@@ -1,29 +1,28 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
+
+// import { getSynopticCatalog } from "../../utils/webServices";
 
 import FormControl from "@mui/material/FormControl";
 import InputLabel from "@mui/material/InputLabel";
 import MenuItem from "@mui/material/MenuItem";
 import Select from "@mui/material/Select";
-import List from "@mui/material/List";
-import ListItem from "@mui/material/ListItem";
-import ListItemButton from "@mui/material/ListItemButton";
-import ListItemIcon from "@mui/material/ListItemIcon";
-import ListItemText from "@mui/material/ListItemText";
-import Checkbox from "@mui/material/Checkbox";
-import IconButton from "@mui/material/IconButton";
-import CommentIcon from "@mui/icons-material/Comment";
 
-export default function CommonPanel() {
-  const [grid, setGrid] = React.useState("");
-  const [instance, setInstance] = React.useState("");
+export default function CommonPanel(props) {
+  // const [grid, setGrid] = React.useState("");
+  // const [instance, setInstance] = React.useState("");
   const [checked, setChecked] = React.useState([0]);
 
+  // useEffect(() => {
+  //   // Call for synoptic
+  //   getSynopticCatalog()
+  // });
+
   const handleGridChange = (event) => {
-    setGrid(event.target.value);
+    props.setGrid(event.target.value);
   };
 
   const handleInstanceChange = (event) => {
-    setInstance(event.target.value);
+    props.setInstance(event.target.value);
   };
 
   const handleToggle = (value) => () => {
@@ -41,68 +40,45 @@ export default function CommonPanel() {
 
   return (
     <div>
-      <FormControl fullWidth>
-        <InputLabel id="demo-simple-select-label1">Grid</InputLabel>
-        <Select
-          labelId="demo-simple-select-label2"
-          id="demo-simple-select"
-          value={grid}
-          label="Grid"
-          onChange={handleGridChange}
-        >
-          <MenuItem value={0}>00</MenuItem>
-        </Select>
-      </FormControl>
-
-      <FormControl fullWidth>
-        <InputLabel id="demo-simple-select-label3">Instance</InputLabel>
-        <Select
-          labelId="demo-simple-select-label4"
-          id="demo-simple-select2"
-          value={instance}
-          label="Instance"
-          onChange={handleInstanceChange}
-        >
-          <MenuItem value={0}>sample instance</MenuItem>
-        </Select>
-      </FormControl>
-      <List sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}>
-        {[0, 1, 2, 3].map((value) => {
-          const labelId = `checkbox-list-label-${value}`;
+      <form>
+        <FormControl fullWidth>
+          <InputLabel id="demo-simple-select-label1">Grid</InputLabel>
+          <Select
+            labelId="demo-simple-select-label2"
+            id="demo-simple-select"
+            value={props.grid}
+            label="Grid"
+            onChange={handleGridChange}
+          >
+            {props.data.grid_types &&
+              props.data.grid_types.map((grid) => {
+                if (grid == "") {
+                  return <MenuItem value={grid}>NULL</MenuItem>;
+                }
+                return <MenuItem value={grid}>{grid}</MenuItem>;
+              })}
+          </Select>
+        </FormControl>
 
-          return (
-            <ListItem
-              key={value}
-              secondaryAction={
-                <IconButton edge="end" aria-label="comments">
-                  <CommentIcon />
-                </IconButton>
-              }
-              disablePadding
-            >
-              <ListItemButton
-                role={undefined}
-                onClick={handleToggle(value)}
-                dense
-              >
-                <ListItemIcon>
-                  <Checkbox
-                    edge="start"
-                    checked={checked.indexOf(value) !== -1}
-                    tabIndex={-1}
-                    disableRipple
-                    inputProps={{ "aria-labelledby": labelId }}
-                  />
-                </ListItemIcon>
-                <ListItemText
-                  id={labelId}
-                  primary={`Layer item ${value + 1}`}
-                />
-              </ListItemButton>
-            </ListItem>
-          );
-        })}
-      </List>
+        <FormControl fullWidth>
+          <InputLabel id="demo-simple-select-label3">Instance</InputLabel>
+          <Select
+            labelId="demo-simple-select-label4"
+            id="demo-simple-select2"
+            value={props.instance}
+            label="Instance"
+            onChange={handleInstanceChange}
+          >
+            {props.data.instance_names &&
+              props.data.instance_names.map((name) => {
+                if (name == "") {
+                  return <MenuItem value={name}>NULL</MenuItem>;
+                }
+                return <MenuItem value={name}>{name}</MenuItem>;
+              })}
+          </Select>
+        </FormControl>
+      </form>
     </div>
   );
 }