Merge pull request #134 from sufikaur/input-change-flag

Add input change flag

electron/ui/cypress/e2e/FlowsheetTesting.cy.js

@@ -172,4 +172,163 @@ describe('WaterTAP UI Testing', () => {
 
         })
     })
+
+    // RO is most kikely the most canonical 
+    // Exclusively run on 'RO with energy recovery flowsheet'
+    it('input change flag for RO with energy recovery- value change', () => {
+        cy.load_flowsheets_list()
+        cy.screenshot('loaded flowsheet list page')
+
+        const flowsheet_name = 'RO with energy recovery flowsheet'
+
+        // load flowsheet
+        cy.load_flowsheet(flowsheet_name)
+        cy.screenshot('loaded '+ flowsheet_name)
+
+        // solve flowsheet
+        cy.solve_flowsheet()
+        cy.screenshot("solved "+flowsheet_name)
+
+        // check no flag
+        cy.get('#inputChangeFlag').should('not.exist');
+        cy.screenshot('value: no-input-change-no-flag-'+flowsheet_name)
+
+        // go to inputs
+        cy.findByRole('tab', {name: /input/i}).click();
+        cy.screenshot('value: input-tab-click-' + flowsheet_name);
+
+        cy.findByRole('textbox', {name: 'Water mass flowrate'}).invoke('val').then((val) => {
+            const changed_val = val * 1.02
+
+            // change input 
+            cy.enter_text('role' ,'textbox', changed_val, 'Water mass flowrate')
+
+            // Take the screenshot after the input has v has been logged
+            cy.screenshot('value: input-change-' + flowsheet_name);
+
+        });
+
+        // go to outputs
+        cy.findByRole('tab', {name: /output/i}).click()
+
+        // check for flag 
+        cy.get('#inputChangeFlag').should('exist');
+        cy.screenshot('value: output-flag-after-input-change-flag' + flowsheet_name);
+
+        // return to inputs 
+        cy.findByRole('tab', {name: /input/i}).click();
+
+        // solve flowsheet
+        cy.solve_flowsheet()
+
+        // check no flag after solving again
+        cy.get('#inputChangeFlag').should('not.exist');
+        cy.screenshot("value: re-solved-after-input-change-no-flag "+flowsheet_name)
+    })
+
+    it('input change flag for RO with energy recovery value change- fixed/free change', () => {
+        cy.load_flowsheets_list()
+        cy.screenshot('fixed/free: loaded flowsheet list page')
+
+        const flowsheet_name = 'RO with energy recovery flowsheet'
+
+        const flowsheet = flowsheets.find(flowsheet => flowsheet.name === flowsheet_name);
+
+        // load flowsheet
+        cy.load_flowsheet(flowsheet.name)
+        cy.screenshot('fixed/free: loaded '+flowsheet.name)
+
+        // solve flowsheet
+        cy.solve_flowsheet()
+        cy.screenshot("fixed/free: solved "+flowsheet.name)
+
+
+        cy.findByRole('tab', {name: /output/i}).click();
+
+        // check no flag
+        cy.get('#inputChangeFlag').should('not.exist');
+        cy.screenshot('fixed/free: no-input-change-no-flag-'+flowsheet.name)
+
+        cy.findByRole('tab', {name: /input/i}).click();
+
+
+        // set free variable
+        cy.get('.'+flowsheet.sweepVariable+'_fixed-free-select').click()
+        cy.wait(100)
+        cy.findByRole('option', { name: /free/i }).click()
+        cy.get('.'+flowsheet.sweepVariable+'_fixed-free-select').click()
+        cy.wait(100)
+
+        cy.findByRole('option', { name: /fixed/i }).click()
+
+        cy.wait(100)
+        cy.screenshot('fixed/free: change-option-free '+flowsheet.name)
+
+        // go to outputs
+        cy.findByRole('tab', {name: /output/i}).click()
+        cy.screenshot('fixed/free: LOOK' + flowsheet.name);
+
+        cy.wait(500)
+
+        // // check for flag 
+        cy.get('#inputChangeFlag').should('exist');
+        cy.screenshot('fixed/free: output-flag-after-input-change-flag ' + flowsheet.name);
+
+    })
+
+    it('input change flag for RO with energy recovery value change- bounds change', () => {
+        cy.load_flowsheets_list()
+        cy.screenshot('bounds: loaded flowsheet list page')
+
+        const flowsheet_name = 'RO with energy recovery flowsheet'
+
+        const flowsheet = flowsheets.find(flowsheet => flowsheet.name === flowsheet_name);
+
+        // load flowsheet
+        cy.load_flowsheet(flowsheet.name)
+        cy.screenshot('bounds: loaded '+flowsheet.name)
+
+        // solve flowsheet
+        cy.solve_flowsheet()
+        cy.screenshot("bounds: solved "+flowsheet.name)
+
+
+        cy.findByRole('tab', {name: /output/i}).click();
+
+        // check no flag
+        cy.get('#inputChangeFlag').should('not.exist');
+        cy.screenshot('bounds: no-input-change-no-flag-'+flowsheet.name)
+
+        cy.findByRole('tab', {name: /input/i}).click();
+
+
+        // set free variable
+        cy.get('.'+flowsheet.sweepVariable+'_fixed-free-select').click()
+        cy.wait(100)
+        cy.findByRole('option', { name: /free/i }).click()
+        cy.wait(100)
+        cy.screenshot('bounds: change-option-free '+flowsheet.name)
+
+        // enter lower and upper bounds
+        cy.enter_text('class', flowsheet.sweepVariable+'_lower_input', flowsheet.sweepValues[0])
+        cy.enter_text('class', flowsheet.sweepVariable+'_upper_input', flowsheet.sweepValues[1])
+
+
+        // go to outputs
+        cy.findByRole('tab', {name: /output/i}).click()
+
+        // check for flag 
+        cy.get('#inputChangeFlag').should('exist');
+        cy.screenshot('bounds: output-flag-after-input-change-flag ' + flowsheet.name);
+
+        // return to inputs 
+        cy.findByRole('tab', {name: /input/i}).click();
+
+        // solve flowsheet
+        cy.solve_flowsheet()
+
+        // check no flag after solving again
+        cy.get('#inputChangeFlag').should('not.exist');
+        cy.screenshot("bounds: re-solved-after-input-change-no-flag "+flowsheet_name)
+    })
 })

electron/ui/cypress/support/commands.js

@@ -126,10 +126,13 @@ Cypress.Commands.add('enter_text', (identifier, role_or_class, value, name ) =>
     input_textbox.click({force:true});
     if (identifier === "role") {
         input_textbox = cy.findByRole(role_or_class, {name: name});
+        input_textbox.clear().type(value)
+
     }
     else if (identifier === "class") {
         input_textbox = cy.get('.'+role_or_class);
+        input_textbox.type('{backspace}{backspace}{backspace}{backspace}' + value);
+
     }
-    input_textbox.type('{backspace}{backspace}{backspace}{backspace}' + value);
     cy.wait(500);
 })

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

@@ -22,7 +22,8 @@ export default function ConfigInput(props) {
         reset,
         solveType,
         numberOfSubprocesses,
-        setNumberOfSubprocesses
+        setNumberOfSubprocesses,
+        setInputsChanged
     } = props;
     const [displayData, setDisplayData] = useState({})
     const [previousConfigs, setPreviousConfigs] = useState([])
@@ -147,6 +148,7 @@ export default function ConfigInput(props) {
         const inputs = getInputs(tempFlowsheetData)
         console.debug('updating ' + id + ' with value ' + value + '. previous value was ' + inputs[id].value)
         inputs[id].value = value
+        setInputsChanged(true)
     }
 
     const handleUpdateFixed = (id, value, type) => {
@@ -155,20 +157,23 @@ export default function ConfigInput(props) {
         inputs[id].fixed = value;
         inputs[id].is_sweep = (type === "sweep");
         updateFlowsheetData(tempFlowsheetData, null)
+        setInputsChanged(true)
         runButtonRef.current?.checkDisableRun()
         // checkDisableRun()
     }
 
     const handleUpdateBounds = (id, value, bound) => {
         let tempFlowsheetData = {...flowsheetData}
         const inputs = getInputs(tempFlowsheetData)
+        setInputsChanged(true)
         inputs[id][bound] = value
     }
 
     const handleUpdateSamples = (id, value) => {
         let tempFlowsheetData = {...flowsheetData}
         const inputs = getInputs(tempFlowsheetData)
         inputs[id].num_samples = value
+        setInputsChanged(true)
         console.debug('updating samples ' + id + ' with value ' + value + ' ' + inputs[id].num_samples)
     }
     /**
@@ -245,7 +250,12 @@ export default function ConfigInput(props) {
             if (Object.keys(displayData).length > 0) {
                 let var_sections = organizeVariables(displayData.exports)
                 return Object.entries(var_sections).map(([key, value]) => {
-                    let _key = key + Math.floor(Math.random() * 100001);
+                    let _key;
+                    if (key === undefined || key === null) {
+                        _key = key + Math.floor(Math.random() * 100001);
+                    } else {
+                    _key = key + value.display_name + value.output_variables;
+                    }
                     if (Object.keys(value.input_variables).length > 0) {
                         return (<Grid item xs={6} key={_key}>
                             <InputAccordion

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import {useParams} from "react-router-dom";
-import Grid from '@mui/material/Grid';
+import { Grid, Box, Alert } from '@mui/material';
 import {
     downloadSweepResults,
     downloadSingleOutput,
@@ -13,7 +13,7 @@ import SingleOutput from "../../../components/SingleOutput/SingleOutput";
 
 export default function ConfigOutput(props) {
     let params = useParams();
-    const {outputData, isSweep} = props;
+    const {outputData, isSweep, inputsChanged} = props;
 
     // Use a temporary hyperlink to download sweep output
     const downloadSweepOutput = () => {
@@ -32,16 +32,21 @@ export default function ConfigOutput(props) {
 
     // Return either sweep or single-output version
     return (
-        <Grid container spacing={2} alignItems="flex-start">
-            {isSweep ?
-                <SweepOutput outputData={outputData}
-                             downloadOutput={downloadSweepOutput}/>
-                :
-                <SingleOutput outputData={outputData}
-                              downloadOutput={downloadSingleOutput}
-                              saveConfig={saveConfig}/>
-            }
-        </Grid>
+        <Box>
+            {inputsChanged ?
+                <Alert id = 'inputChangeFlag' color="warning" severity='warning' sx={{ mb: '2rem' }}>
+                    Inputs changed since last run
+                </Alert> : <></>}
+            <Grid container spacing={2} alignItems="flex-start">
+                {isSweep ?
+                    <SweepOutput outputData={outputData}
+                        downloadOutput={downloadSweepOutput} />
+                    :
+                    <SingleOutput outputData={outputData}
+                        downloadOutput={downloadSingleOutput}
+                        saveConfig={saveConfig} />
+                }
+            </Grid>
+        </Box>
     );
 }
-

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

@@ -89,6 +89,8 @@ export default function FlowsheetConfig(props) {
     const theme = props.theme;
     console.log("flowsheet config theme=", theme);
 
+    const [inputsChanged, setInputsChanged] = useState(false);
+
     useEffect(() => {
         console.log("params.id", params.id);
         if (!params.hasOwnProperty("id") || !params.id)
@@ -215,6 +217,7 @@ export default function FlowsheetConfig(props) {
         setFlowsheetData(tempFlowsheetData);
         setTabValue(1);
         setSolveDialogOpen(false);
+        setInputsChanged(false)
     }
 
     const handleError = (msg) => {
@@ -390,10 +393,10 @@ export default function FlowsheetConfig(props) {
                                                     <Tab
                                                         label="Input" {...a11yProps(0)} />
                                                     <Tab label="Output"
-                                                         disabled={!flowsheetData.outputData} {...a11yProps(1)} />
+                                                        disabled={!flowsheetData.outputData} {...a11yProps(1)} />
                                                     {solveType === "solve" &&
                                                         <Tab label="Compare"
-                                                             disabled={!flowsheetData.outputData} {...a11yProps(2)} />}
+                                                            disabled={!flowsheetData.outputData} {...a11yProps(2)} />}
                                                 </Tabs>
                                             </div>
 
@@ -411,14 +414,16 @@ export default function FlowsheetConfig(props) {
                                             handleSelectSolveType={handleSelectSolveType}
                                             numberOfSubprocesses={props.numberOfSubprocesses}
                                             setNumberOfSubprocesses={props.setNumberOfSubprocesses}
-                                        >
-                                        </ConfigInput>
+                                            setInputsChanged={setInputsChanged}
+                                        />
                                     </TabPanel>
                                     <TabPanel value={tabValue} index={1}>
                                         <ConfigOutput outputData={flowsheetData}
                                                       updateFlowsheetData={updateFlowsheetData}
                                                       isSweep={sweep}
-                                                      solveType={solveType}>
+                                                      solveType={solveType}
+                                                      inputsChanged={inputsChanged}
+                                        >
                                         </ConfigOutput>
                                     </TabPanel>
                                     <TabPanel value={tabValue} index={2}>