Merge pull request #33 from MichaelPesce/add-logo-dropdown

Add dropdown on logo for switching project versions

Author: MichaelPesce

README.md

@@ -1,9 +1,9 @@
 # idaes-flowsheet-processor-ui
 
 This repository is for work on the user interface (UI) for the IDAES Flowsheet Processor.
-The UI installer can be downloaded from our homepage at: https://prommis.github.io/
+The UI installer can be downloaded from our [download site](https://prommis.github.io/idaes-flowsheet-processor-ui/docs/Download/watertap).
 
-[Documentation website](https://prommis.github.io/idaes-flowsheet-processor-ui/)
+For information on using the UI, check out our [Documentation website](https://prommis.github.io/idaes-flowsheet-processor-ui/).
 
 ## Getting started (developer)
 

environment.yml

@@ -6,4 +6,5 @@ dependencies:
   - pip
   - nodejs=22.3.0
   - pip:
+    - .
     - -r backend/requirements.txt

frontend/src/App.js

@@ -61,7 +61,8 @@ function App() {
 
     const changeTheme = (new_theme) => {
         localStorage.setItem("theme", new_theme)
-        window.location.reload()
+        window.location.hash = "#/flowsheets";
+        window.location.reload();
     }
 
     const subProcState = {value: numberOfSubprocesses, setValue: setNumberOfSubprocesses}

frontend/src/components/Boilerplate/Header/Header.js

@@ -1,5 +1,5 @@
 import './Header.css';
-import React from 'react';
+import React, { useState } from 'react';
 import LoggingPanel from '../../LoggingPanel/LoggingPanel';
 import {useNavigate} from "react-router-dom";
 import {Menu, MenuItem, IconButton} from '@mui/material';
@@ -8,23 +8,38 @@ import {themes} from '../../../theme';
 
 export default function Header({theme, changeTheme}) {
     let navigate = useNavigate();
-    const [showLogs, setShowLogs] = React.useState(false)
-    const [actionsList, setActionsList] = React.useState(false)
-    const [anchorEl, setAnchorEl] = React.useState(null);
+    const [showLogs, setShowLogs] = useState(false);
+    const [menuActionsList, setMenuActionsList] = useState(false);
+    const [menuAnchorEl, setMenuAnchorEl] = useState(null);
+    const [logoMenuAnchor, setLogoMenuAnchor] = useState(null);
+    const [logoActionsList, setLogoActionsList] = useState(false);
+    const [current_theme, setCurrentTheme] = useState(localStorage.getItem("theme"));
 
     const handleNavigateHome = () => {
-        // setActionsList(!actionsList)
         navigate("/flowsheets", {replace: true})
     }
 
     const handleShowLogs = () => {
         setShowLogs(!showLogs)
-        setActionsList(false)
+        setMenuActionsList(false)
     }
 
     const handleShowActions = (event) => {
-        setActionsList(!actionsList)
-        setAnchorEl(event.currentTarget);
+        setMenuActionsList(!menuActionsList)
+        setMenuAnchorEl(event.currentTarget);
+    }
+
+    const handleShowLogoActions = (event) => {
+        if (process.env.NODE_ENV === 'development') {
+            setLogoActionsList(!logoActionsList)
+            setLogoMenuAnchor(event.currentTarget);
+        }
+    }
+
+    const getLogoStyle = () => {
+        const logoStyle = {color: theme.header.color}
+        if (process.env.NODE_ENV === 'development') logoStyle.cursor = 'pointer';
+        return logoStyle;
     }
 
     return (
@@ -37,25 +52,38 @@ export default function Header({theme, changeTheme}) {
                 }} onClick={handleNavigateHome}>
                     <img  data-testid="project-logo" src={theme.logoOnly} alt={`${theme.project} logo`}/>
                 </div>
-                <div id="titlebar-name" style={{color: theme.header.color}}>
+                <div id="titlebar-name" style={getLogoStyle()} onClick={handleShowLogoActions}>
                     {theme.projectTitle}
+                    <Menu
+                        id="actions-list"
+                        anchorEl={logoMenuAnchor}
+                        open={logoActionsList}
+                        onClose={() => setLogoActionsList(false)}
+                    >
+                        {process.env.NODE_ENV === 'development' && (
+                            Object.keys(themes).map((key, idx) => {
+                                if (key !== current_theme && key !== "watertap") return (
+                                    <MenuItem key={`logo_${key}`} className="change_theme" onClick={() => changeTheme(key)}>Switch to {key.replace("nawi", "watertap")}</MenuItem>
+                                )
+                            })
+                        )}
+                    </Menu>
                 </div>
                 <div className="right">
                     <IconButton className="header-actions" style={{color: theme.menuButton.color}} onClick={handleShowActions}>
                         <ListIcon/>
                     </IconButton>
                     <Menu
                         id="actions-list"
-                        anchorEl={anchorEl}
-                        open={actionsList}
-                        onClose={() => setActionsList(false)}
+                        anchorEl={menuAnchorEl}
+                        open={menuActionsList}
+                        onClose={() => setMenuActionsList(false)}
                     >
                         <MenuItem className="view-logs" onClick={handleShowLogs}>View Logs</MenuItem>
                         {process.env.NODE_ENV === 'development' && (
                             Object.keys(themes).map((key, idx) => {
-                                let current_theme = localStorage.getItem("theme")
                                 if (key !== current_theme && key !== "watertap") return (
-                                    <MenuItem key={key} className="change_theme" onClick={() => changeTheme(key)}>Switch to {key.replace("nawi", "watertap")}</MenuItem>
+                                    <MenuItem key={`menu_${key}`} className="change_theme" onClick={() => changeTheme(key)}>Switch to {key.replace("nawi", "watertap")}</MenuItem>
                                 )
                             })
                         )}

frontend/src/components/FlowsheetsListTable/FlowsheetsListTable.js

@@ -68,8 +68,8 @@ export default function FlowsheetsListTable(props) {
                         tempRows.push(fs)
                     }
                 }
-                console.log('setting table rows: ')
-                console.log(tempRows)
+                // console.log('setting table rows: ')
+                // console.log(tempRows)
                 setTableRows(tempRows)
             } catch (e) {
                 setTableRows([...props.rows])
@@ -89,7 +89,7 @@ export default function FlowsheetsListTable(props) {
 
     const handleFlowsheetClick = (id, built, options) => {
         let hasOptions = false
-        if (Object.keys(options).length > 1) hasOptions = true
+        if (Object.keys(options).length >= 1) hasOptions = true
         navigate("/flowsheet/" + id + "/config", {
             replace: true,
             state: {built: built, hasOptions: hasOptions}
@@ -212,7 +212,7 @@ export default function FlowsheetsListTable(props) {
                         </TableHead>
                         <TableBody>
                             {Object.keys(CATEGORIES).map((key) => {
-                                console.log('FlowsheetListTable key=', key);
+                                // console.log('FlowsheetListTable key=', key);
                                 let result = null;
                                 if ((key === 'Custom Flowsheets' && checkForCustomFlowsheets()) ||
                                     CATEGORIES[key].length > 0) {

website/docs/HowTo/how_to_use_ui.mdx

@@ -7,6 +7,7 @@ import HowToUseAbout from '@site/src/components/HowToContent/HowToUseAbout';
 import HowToRunOptimization from '@site/src/components/HowToContent/HowToRunOptimization';
 import HowToRunSensitivityAnalysis from '@site/src/components/HowToContent/HowToRunSensitivityAnalysis';
 import HowToUploadFlowsheet from '@site/src/components/HowToContent/HowToUploadFlowsheet';
+import HowToSwitchVersion from '@site/src/components/HowToContent/HowToSwitchVersion';
 import Troubleshooting from '@site/src/components/HowToContent/Troubleshooting';
 
 
@@ -23,5 +24,8 @@ import Troubleshooting from '@site/src/components/HowToContent/Troubleshooting';
 ### Upload a flowsheet{#upload-a-flowsheet}
 <HowToUploadFlowsheet/>
 
+### Switch UI Project Version{#switch-version}
+<HowToSwitchVersion/>
+
 ### Troubleshooting{#troubleshooting}
 <Troubleshooting/>

website/src/components/AboutContent/AboutContent.js

@@ -15,7 +15,7 @@ const styles = {
     width: 'calc(33.33% - 20px)',
     display: 'inline-block',
     verticalAlign: 'top',
-    '@media (max-width: 768px)': {
+    '@media (maxWidth: 768px)': {
       width: '100%',
       margin: 10,
     },
@@ -52,7 +52,7 @@ function AboutContent() {
                 <h3>Screenshots</h3>
                 {
                     screenshots.map((screenshot) => (
-                        <div style={styles.screenshotContainer}>
+                        <div style={styles.screenshotContainer} key={screenshot.description}>
                             <img src={screenshot.src} alt={screenshot.description} style={{ width: '100%', height: 'auto' }} />
                         </div>
                     ))

website/src/components/HowToContent/HowToSwitchVersion.js

@@ -0,0 +1,42 @@
+const styles = {
+  container: {
+    margin: '40px auto',
+    padding: 20,
+    backgroundColor: '#f9f9f9',
+    border: '1px solid #ddd',
+    borderRadius: 10,
+    boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)',
+    width: '100%'
+  },
+  imageContainer: {
+    margin: 10,
+    width: '50%',
+    textAlign: 'center',
+  },
+  image: {
+    boxShadow: '0 0 10px rgba(0, 0, 0, 0.4)',
+    borderRadius: 10,
+    padding: 20,
+    marginTop: 10
+  }
+};
+
+function HowToSwitchVersion() {
+
+
+    return (
+    <div style={{marginTop: '20px'}}>
+        <p>
+            If you would like to switch project versions (eg. from WaterTAP to PrOMMIS), click on the project name in the top left:
+            <img 
+                style={styles.image}
+                src={require('@site/static/img/switch-project-version.png').default}
+            />
+            <i>Note: This feature is only availabe in development mode and in the generic release of the Flowsheet Processor UI.</i>
+        </p>
+    </div>
+    
+  );
+}
+
+export default HowToSwitchVersion;

website/src/components/InstallerTable/InstallerTable.js

@@ -56,6 +56,39 @@ function InstallerTable({owner, repo}) {
   const [releases, setReleases] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(false);
+  const project = repo === "idaes-pse" ? "idaes" : repo.toLowerCase();
+
+  const fetchElectronBuildReleases = async () => {
+    // if the project repository has no releases with UIs, we check the idaes-electron-build repo for releases
+    try {
+      const response = await fetch(`https://api.github.com/repos/prommis/idaes-electron-build/releases`);
+      if (!response.ok) {
+        throw new Error(`Failed to fetch releases: ${response.status}`);
+      }
+      const releasesData = await response.json();
+      formatElectronBuildReleaseData(releasesData)
+
+    } catch (error) {
+      setError(true);
+      setLoading(false);
+    }
+  }
+
+  const formatElectronBuildReleaseData = (data) => {
+    let releasesWithInstaller = []
+    for (let release of data) {
+        if (release.assets?.length > 0) {
+            for (let asset of release.assets) {
+                if (asset.name.toLowerCase().includes(project) && (asset.name.endsWith(".exe") || asset.name.endsWith(".dmg"))) {
+                    releasesWithInstaller.push(release)
+                    break
+                }
+            }
+        }
+    }
+    setReleases(releasesWithInstaller)
+    setLoading(false);
+  }
 
   useEffect(() => {
     const fetchReleases = async () => {
@@ -89,8 +122,12 @@ function InstallerTable({owner, repo}) {
             }
         }
     }
-    setReleases(releasesWithInstaller)
-    setLoading(false);
+    if (releasesWithInstaller.length > 0) {
+      setReleases(releasesWithInstaller)
+      setLoading(false);
+    } else // check idaes-electron-build repo for releases
+      fetchElectronBuildReleases()
+
   }
 
   const populateTable = () => {
@@ -108,8 +145,8 @@ function InstallerTable({owner, repo}) {
       const version = release.tag_name;
       if (version.toLowerCase().includes('rc')) return null;
 
-      const windowsLink = release.assets.find(asset => asset.name.endsWith(".exe"));
-      const macLink = release.assets.find(asset => asset.name.endsWith(".dmg"));
+      const windowsLink = release.assets.find(asset => asset.name.toLowerCase().includes(project) && asset.name.endsWith(".exe"));
+      const macLink = release.assets.find(asset => asset.name.toLowerCase().includes(project) && asset.name.endsWith(".dmg"));
 
       return (
         <tr key={version} style={index === 0 ? { ...styles.td, ...styles.stableReleaseTd } : styles.td}>