diff --git a/README.md b/README.md index eaa2d5ae..4d72bd93 100644 --- a/README.md +++ b/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 /electron npm run dist:mac -``` \ No newline at end of file +``` diff --git a/backend/app/routers/flowsheets.py b/backend/app/routers/flowsheets.py index 119904c3..e4ddec15 100644 --- a/backend/app/routers/flowsheets.py +++ b/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 diff --git a/electron/ui/src/components/FlowsheetOptions/FlowsheetOptions.js b/electron/ui/src/components/FlowsheetOptions/FlowsheetOptions.js new file mode 100644 index 00000000..209fb02c --- /dev/null +++ b/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( + + {opt.description} + {opt.long_description} + + }> + { + setOption(event.target.value); + }} /> + + ); + } + // Put a Box around all the TextField components + return {optionItems} + } + + // Create and return an Accordion component with the option items inside it + return ( + + Flowsheet options + {renderOptionItems()} + + ) + +} \ No newline at end of file diff --git a/electron/ui/src/views/FlowsheetConfig/ConfigInput/ConfigInput.js b/electron/ui/src/views/FlowsheetConfig/ConfigInput/ConfigInput.js index 52fe710f..7e3a441f 100644 --- a/electron/ui/src/views/FlowsheetConfig/ConfigInput/ConfigInput.js +++ b/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 ( <> @@ -274,6 +274,11 @@ export default function ConfigInput(props) { + + + + + {