Merge pull request watertap-org#17 from dangunter/main

more fixes and tweaks
lbianchi-lbl · Jun 26, 2022 · 92cf052 · 92cf052
2 parents 4767797 + 6960fff
commit 92cf052
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 13 deletions.
diff --git a/electron/ui/src/components/InputAccordion/InputAccordion.js b/electron/ui/src/components/InputAccordion/InputAccordion.js
@@ -32,6 +32,7 @@ export default function InputAccordion(props) {
 
 
     const renderFields = () => {
+        console.debug("renderFields, data=", data)
         return Object.keys(data.variables).map((key)=>{
             let vItem = data.variables[key];
             return <InputWrapper key={key} fieldData={vItem} />

diff --git a/electron/ui/src/components/InputWrapper/InputWrapper.js b/electron/ui/src/components/InputWrapper/InputWrapper.js
@@ -26,6 +26,15 @@ export default function InputWrapper(props) {
         fieldData.value.value = event.target.value;
     };
 
+    const displayUnits = (d) => {
+        let u = d.display_units
+        // replace USD currency with simple '$'
+        u = u.replace(/USD_[^/]*/, "$")
+        u = u.replace(/USD/, "$")
+        console.log("displayUnits:", u)
+        return {__html: u}
+    }
+
     return  <Tooltip title={fieldData.description}>
                 <TextField id="outlined-basic" 
                         label={fieldData.display_name}
@@ -35,7 +44,11 @@ export default function InputWrapper(props) {
                         onChange={handleFieldChange}
                         fullWidth 
                         InputProps={{
-                            endAdornment:<InputAdornment position="end">{fieldData.display_units}</InputAdornment>
+                            endAdornment:
+                                <InputAdornment position="end">
+                                <span dangerouslySetInnerHTML={displayUnits(fieldData)}>
+                                </span>
+                                </InputAdornment>
                         }}
                 />
             </Tooltip>

diff --git a/electron/ui/src/views/FlowsheetConfig/ConfigInput/ConfigInput.js b/electron/ui/src/views/FlowsheetConfig/ConfigInput/ConfigInput.js
@@ -77,17 +77,65 @@ export default function ConfigInput(props) {
     };
 
 
-
+    /**
+     * Collect all variables from 'block' and its subblocks.
+     *
+     * @param Object Root block
+     * @returns Object with a flattened map of variables
+     */
+    const extractVariables = (block) => {
+        console.debug("extractVariables. block=", block.display_name)
+        let bvars = { ...block.variables }  // shallow copy
+        // iterate through subblocks
+        for (const [_, subblock] of Object.entries(block.blocks)) {
+            // add extracted values of each subblock to this one (recursively)
+            let subv = extractVariables(subblock)
+            for (const [key, value] of Object.entries(subv)) {
+                bvars[key] = value
+            }
+        }
+        console.debug("Block and subblock vars:", bvars)
+        return bvars
+    }
+
+    /**
+     * Organize variables into sections by their 'category' attribute.
+     *
+     * @returns Object {<category-name>: [list, of, variable, objects]}
+     */
+    const organizeVariables = (bvars) => {
+        let var_sections = {}
+        for (const [key, v] of Object.entries(bvars)) {
+            console.debug("organizeVariables:map. variable=", key)
+            let catg = v.category
+            if (!Object.hasOwn(var_sections, catg)) {
+                var_sections[catg] = {display_name: catg, variables: {}}
+            }
+            var_sections[catg]["variables"][key] = v
+        }
+        return var_sections
+    }
+
     const renderInputAccordions = () => {
-        let sectionBlocks = flowsheetData.blocks.fs.blocks;
-        return Object.keys(sectionBlocks).map((key)=>{
-            //console.log("key:",key);
+        console.debug("calling extractVariables with root block:", flowsheetData.blocks.fs)
+        let variables = extractVariables(flowsheetData.blocks.fs)
+        let var_sections = organizeVariables(variables)
+        console.debug("var_sections:", var_sections)
+        // let sectionBlocks = flowsheetData.blocks.fs.blocks
+        return Object.keys(var_sections).map((key)=>{
             let _key = key + Math.floor(Math.random() * 100001);
-            //console.log("_key:",_key);
             return (<Grid item xs={6} key={_key}>
-                        <InputAccordion  dataKey={key} data={sectionBlocks[key]}></InputAccordion>
+                        <InputAccordion  dataKey={key} data={var_sections[key]}></InputAccordion>
                     </Grid>)
         })
+        // return Object.keys(sectionBlocks).map((key)=>{
+        //     //console.log("key:",key);
+        //     let _key = key + Math.floor(Math.random() * 100001);
+        //     //console.log("_key:",_key);
+        //     return (<Grid item xs={6} key={_key}>
+        //                 <InputAccordion  dataKey={key} data={sectionBlocks[key]}></InputAccordion>
+        //             </Grid>)
+        // })
     };
 
 
@@ -103,11 +151,9 @@ export default function ConfigInput(props) {
             </Toolbar>
 
             <Grid container spacing={2} alignItems="flex-start">
-
-            {   
-                renderInputAccordions()
-            }
-
+                {
+                    renderInputAccordions()
+                }
             </Grid>
 
 
@@ -118,7 +164,7 @@ export default function ConfigInput(props) {
                         Object.keys(costingBlocks).map((key)=><InputAccordion key={key} dataKey={key} data={costingBlocks[key]}></InputAccordion>)
                     }
                 </Grid>
-                <Grid item xs={6}> 
+                <Grid item xs={6}>
                     {   
                         Object.keys(parametersBlocks).map((key)=><InputAccordion key={key} dataKey={key} data={parametersBlocks[key]}></InputAccordion>) 
                     }