Add ability to configure model options from the GUI

README.md

@@ -2,6 +2,8 @@
 
 This repository is for work on the user interface (UI) for the WaterTAP library. The UI installer can be downloaded from our homepage at: https://watertap-org.github.io/
 
+The core WaterTAP repository is at https://github.com/watertap-org/watertap
+
 ## Getting started (developer)
 
 ### Prerequisites
@@ -149,4 +151,4 @@ npm run dist:win
 ```console
 cd <watertap-ui-path>/electron
 npm run dist:mac
-```
+```

backend/app/routers/flowsheets.py

@@ -64,6 +64,8 @@ async def get_config(id_: str, build: str = "0") -> FlowsheetExport:
         if not info.built:
             flowsheet.build()
             info.updated(built=True)
+    print(f"@@ getConfig: fs_exp keys = {list(flowsheet.fs_exp.dict().keys())}")
+    print(f"@@ getConfig: fs_exp = {flowsheet.fs_exp.json()}")
     return flowsheet.fs_exp
 
 

electron/ui/src/components/FlowsheetOptions/FlowsheetOptions.js

@@ -0,0 +1,114 @@
+// React base
+import React from 'react';
+import {useEffect, useState} from 'react';
+// MUI components
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import Box from '@mui/material/Box';
+import Tooltip from '@mui/material/Tooltip';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+/* import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; */
+
+/**
+ * FlowsheetOptions component.
+ *
+ * Create a box showing the flowsheet options, which users can edit to set
+ * new values.
+ *
+ * Assume that there actually *are* options to display in the component.
+ *
+ * @param props
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export default function FlowsheetOptions({data}) {
+    console.info("All data =>", data);
+    let options = data.options;
+    console.info("Option data =>", options);
+    // Whether the values have changed
+    const [changed, setChanged] = useState(false);
+
+    // XXX: For accordion open/close
+    const [expanded, setExpanded] = useState(false);
+    // XXX: For accordion open/close
+    const handleAccordionChange = (panel) => (event, isExpanded) => {
+      setExpanded(isExpanded);
+    };
+
+    /**
+     * Convert input value to type specified in 't', which may be one of:
+     *   's' - string (no conversion)
+     *   'i' - integer
+     *   'f' - float
+     *
+     *   @returns {String|Number}
+     */
+    const convertValue = (v, t) => {
+        let cv = null;
+        switch (t) {
+            case 's':
+                cv = v;
+                break;
+            case 'i':
+                cv = parseInt(v);
+                break;
+            case 'f':
+                cv = parseFloat(v);
+                break;
+            default:
+                console.warning('Unknown type code: "' + t + '": not converting value:',v)
+                cv = v;
+        }
+        return cv;
+    }
+
+    /**
+     * Render all the flowsheet options for inclusion in an Accordion parent component.
+     * This is the main work of this component.
+     *
+     * @returns {JSX.Element}
+     */
+    const renderOptionItems = () => {
+        let optionItems = Array();
+        for (const [key, opt] of Object.entries(options)) {
+            // create setOption function for this option
+            const setOption = (value) =>  {
+                if (value != opt.value) {
+                    opt.value = value;
+                    setChanged(true);
+                }
+            }
+            // create and add a new TextField to the list
+            optionItems.push(
+                <Tooltip
+                    title={
+                      <React.Fragment>
+                        <Typography variant="body1">{opt.description}</Typography>
+                        <Typography variant="body2">{opt.long_description}</Typography>
+                      </React.Fragment>
+                }>
+                    <TextField
+                        id={key}
+                        label={opt.display_name}
+                        variant="outlined"
+                        value={opt.value}
+                        onChange={(event) => {
+                            setOption(event.target.value);
+                        }} />
+                </Tooltip>
+            );
+        }
+        // Put a Box around all the TextField components
+        return <Box>{optionItems}</Box>
+    }
+
+    // Create and return an Accordion component with the option items inside it
+    return (
+        <Accordion defaultExpanded="{true}">
+            <AccordionSummary>Flowsheet options</AccordionSummary>
+            {renderOptionItems()}
+        </Accordion>
+    )
+
+}

electron/ui/src/views/FlowsheetConfig/ConfigInput/ConfigInput.js

@@ -1,7 +1,8 @@
 
 import React from 'react'; 
 import {useEffect, useState } from 'react';    
-import InputAccordion from "../../../components/InputAccordion/InputAccordion"; 
+import InputAccordion from "../../../components/InputAccordion/InputAccordion";
+import FlowsheetOptions from "../../../components/FlowsheetOptions/FlowsheetOptions";
 import { loadConfig, listConfigNames }  from '../../../services/output.service.js'
 import { useParams } from "react-router-dom";
 import { deleteConfig }  from '../../../services/input.service.js'
@@ -222,8 +223,7 @@ export default function ConfigInput(props) {
         }
 
     };
-
-
+
     return ( 
         <>
             <Toolbar spacing={2}>
@@ -274,6 +274,11 @@ export default function ConfigInput(props) {
                 </Stack>
             </Toolbar>
 
+            <Grid container spacing={2} alignItems="flex-start">
+                <Grid item xs={6} key="flowsheet-options">
+                    <FlowsheetOptions data={flowsheetData.inputData} />
+                </Grid>
+            </Grid>
 
             <Grid container spacing={2} alignItems="flex-start">
                 {