example of simpler code layout

IDAES-UI/src/App.tsx

@@ -1,4 +1,5 @@
 import Header from "./components/header_component/header";
+import Header from "./comp/Header";
 import FlowsheetWrapper from './components/flowsheet_main_component/flowsheet_wrapper';
 
 import '@fontsource/roboto/300.css';

IDAES-UI/src/AppContext.tsx

@@ -0,0 +1,158 @@
+import {createContext, useState, ReactNode, useEffect} from "react";
+import {context_parse_url} from "./contextFN_parse_url";
+import {ToggleStreamTableInLogInterface} from "@/interface/appMainContext_interface";
+
+export const AppContext = createContext<any>({});
+
+export function AppContextProvider({children}: { children: ReactNode }) {
+    //read app setting from localstorage
+    const appSettingObj = readFromLocalStorage();
+    //get which env app is running on
+    const currentENV = import.meta.env.VITE_MODE;
+    //get python server running port;
+    const {server_port, fv_id} = context_parse_url() ?? {
+        server_port: "49999",
+        fv_id: "sample_visualization"
+    };
+    // state for variable
+    const [showVariable, setShowVariable] = useState({})
+    //App panel control
+    const [panelState, setPanelState] = useState({
+        fvWrapper: {
+            panelName: "fvWrapper",
+            show: true,
+            size: {
+                maxSize: 100,
+                defaultSize: 70
+            }
+        },
+        fv: {
+            panelName: "Flowsheet",
+            show: true,
+            size: {
+                minSize: 100,
+                defaultSize: 70
+            }
+        },
+        diagnostics: {
+            panelName: "Diagnostics",
+            // panel show state read from loacl storage.
+            show: appSettingObj.diagnosticsPanelShow == undefined ? false : appSettingObj.diagnosticsPanelShow,
+            size: {
+                minSize: 100,
+                defaultSize: 70
+            }
+        },
+        diagnosticsLogs: {
+            panelName: "Stream Table",
+            show: false,
+            size: {
+                maxSize: 100,
+                defaultSize: 30
+            }
+        },
+        streamTable: {
+            panelName: "Stream Table",
+            show: true,
+            size: {
+                maxSize: 100,
+                defaultSize: 30
+            }
+        },
+        // report : {
+        //   panelName : "Report",
+        //   show : false
+        // },
+        // diagnostics : {
+        //   panelName : "Diagnostics",
+        //   show : true
+        // },
+    });
+    //App panel control end
+
+    /**
+     * Context for flowsheet
+     */
+    const [fvHeaderState, setFvHeaderState] = useState({
+        isShowSteamName: true,
+        isShowLabels: false
+    })
+    /**
+     * Context for diagnostics
+     */
+    const [diagnosticsNextStepsOutputState, setDiagnosticsNextStepsOutputState] = useState({});
+    const [diagnosticsRunFnNameListState, setDiagnosticsRunFnNameListState] = useState([]);
+    const [diagnosticsRunnerDisplayState, setDiagnosticsRunnerDisplayState] = useState<String>("");
+    //use to switch between true and false to control useEffect to refetch backend to get the most recent diagnostics data
+    const [diagnosticsRefreshState, setDiagnosticsRefreshState] = useState<Boolean>(true);
+    const [diagnosticsHistoryState, setDiagnosticsHistory] = useState(0);
+
+    /**
+     * Context for variables
+     */
+    const [variablesExpandState, setVariablesExpandState] = useState({
+        expand: false,
+        expandState: {}
+    });
+
+    // context for toggle stream table and diagnostics in diagnostics runner panel
+    const [viewInLogPanel, setViewInLogPanel] = useState<ToggleStreamTableInLogInterface>({
+        streamTable: true,
+        diagnosticsLogs: false,
+    });
+
+    return (
+        <AppContext.Provider value={
+            {
+                //from url
+                server_port,
+                fv_id,
+                //view btn
+                panelState,
+                setPanelState,
+                //variables open and close
+                showVariable,
+                setShowVariable,
+                //fv
+                fvHeaderState,
+                setFvHeaderState,
+                //diagnostics run function state
+                diagnosticsRunFnNameListState,
+                setDiagnosticsRunFnNameListState,
+                //diagnostics refresh btn control state
+                diagnosticsRefreshState,
+                setDiagnosticsRefreshState,
+                //diagnostics next step output state
+                diagnosticsNextStepsOutputState,
+                setDiagnosticsNextStepsOutputState,
+                // diagnostics display which content to display
+                diagnosticsRunnerDisplayState,
+                setDiagnosticsRunnerDisplayState,
+                // this records which diagnostics output is display in the log panel
+                diagnosticsHistoryState,
+                setDiagnosticsHistory,
+                // bottom view panel display stream table or diagnostics panel
+                viewInLogPanel,
+                setViewInLogPanel,
+                //variables
+                variablesExpandState,
+                setVariablesExpandState,
+                // expandVariablesHandler,
+            }
+        }>
+            {children}
+        </AppContext.Provider>
+    )
+}
+
+
+/**
+ * @description this function read app setting from local storage and
+ * return the js obj format of app setting
+ * @returns js object contains app settings
+ */
+function readFromLocalStorage() {
+    const appSettingLocalStorage = localStorage.getItem("appSetting")!;
+    const appSettingObj = JSON.parse(appSettingLocalStorage)
+    return appSettingObj;
+}

IDAES-UI/src/DiagnosticsToggle.module.css

@@ -0,0 +1,50 @@
+.headerDiagnosticsBtnContainer{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 10px;
+}
+
+.headerDiagnosticsBtnContainer > p{
+    color: white;
+}
+
+.taggleBtn{
+    width: 60px;
+    height: 30px;
+    position: relative;
+    display: inline-block;
+    border-radius: 15px;
+    border: 1px solid white;
+    background-color: white;
+}
+
+.taggleBtn:hover{
+    cursor: pointer;
+}
+
+.toggleBtnInnerOn,
+.toggleBtnInnerOff{
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    transition: .3s ease-in-out;
+}
+
+.toggleBtnInnerOn{
+    right: 0;
+    background-color: green;
+}
+
+.toggleBtnInnerOff{
+    left: 0;
+    background-color: red;
+}
+
+.faIcon{
+    color: white;
+}

IDAES-UI/src/DiagnosticsToggle.tsx

@@ -0,0 +1,79 @@
+import { useContext } from "react";
+import { AppContext } from "./AppContext";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCheck, faX } from "@fortawesome/free-solid-svg-icons";
+import styles from './DiagnosticsToggle.module.css';
+import btnStyles from "./HeaderButtons.module.css"
+
+/**
+ * Toggle whether diagnostics is on or off.
+ * Changes will modify the application panel layout.
+ *
+ * @constructor
+ */
+export default function DiagnosticsToggle(){
+    const {panelState, setPanelState, setViewInLogPanel} = useContext(AppContext);
+    /**
+     * @description diagnostics header toggle btn handler, this controls:
+     * 1. diagnostics panel show or hide.
+     * 2. bottom panel, stream table show or diagnostics logs show when toggle this header diagnostics button.
+     */
+    function toggleDiagnosticHandler(){
+        // control diagnostics panel show or hide
+        setPanelState((prev:any)=>{
+            // update diagnostics panel show bool
+            const copyState = {...prev};
+            const currentDiagnosticsPanelShow = !copyState.diagnostics.show;
+            copyState.diagnostics.show = currentDiagnosticsPanelShow
+
+            // update loacl storage 
+            const appSettingLocalStorage = localStorage.getItem("appSetting")!;
+            const appSettingObj = JSON.parse(appSettingLocalStorage);
+            appSettingObj.diagnosticsPanelShow = currentDiagnosticsPanelShow;
+            localStorage.setItem("appSetting",JSON.stringify(appSettingObj))
+
+            //update state
+            return copyState;
+        })
+
+        /**
+         * control bottom panel show stream or diagnostics logs by update viewInLogPanel state:
+         * logic:
+         * base on panelState.diagnostics.show
+         * diagnostics panel show, default should show diagnostics log
+         * diagnostics panel not show. default stream table shows
+         * 
+         * the bottom panel toggle is in mosaic panel.
+         */
+        setViewInLogPanel((prev:{streamTable:boolean, diagnosticsLogs:boolean})=>{
+            const copyState = {...prev};
+            if(panelState.diagnostics.show){
+                copyState.streamTable = false;
+                copyState.diagnosticsLogs = true;
+            }
+
+            if(!panelState.diagnostics.show){
+                copyState.streamTable = true;
+                copyState.diagnosticsLogs = false;
+            }
+            return copyState;
+        })
+    }
+
+    const btnStyle = panelState.diagnostics.show ? styles.toggleBtnInnerOn : styles.toggleBtnInnerOff;
+    const btnIcon = panelState.diagnostics.show ?
+                    <FontAwesomeIcon icon={faCheck} className={styles.faIcon}/> :
+                    <FontAwesomeIcon icon={faX} className={styles.faIcon}/>;
+    return(
+        <div 
+            id="headerDiagnosticsBtn" 
+            className={styles.headerDiagnosticsBtnContainer}
+            onClick={toggleDiagnosticHandler}
+        >
+            <span className={btnStyles.toggleBtn}>
+                <span className={btnStyle}>{btnIcon}</span>
+            </span>
+            <p>Diagnostics</p>
+        </div>
+    )
+}

IDAES-UI/src/Header.module.css

@@ -0,0 +1,48 @@
+#header p {
+  margin-bottom: 0;
+}
+
+.headerContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--black);
+  position: relative;
+}
+
+/* Logo */
+
+.headerLeftMainContainer{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 20px;
+}
+
+.headerLogoContainer{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 5px;
+  padding-right: 20px;
+  border-right: 1px solid white;
+}
+
+.headerLogo{
+  max-width: 70px;
+}
+
+.headerLogoText{
+  color: white;
+  font-size: 35px;
+  font-weight: 300;
+}
+
+.headerFlowsheetName{
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  color: white;
+}

IDAES-UI/src/Header.tsx

@@ -0,0 +1,35 @@
+import HeaderButtons from "./HeaderButtons";
+import DiagnosticsToggle from "./DiagnosticsToggle";
+import styles from "./Header.module.css";
+import idaes_logo from "@/assets/images/idaes-logo.png";
+
+/**
+ * @description Application header
+ * @returns Header component
+ */
+export default function Header() {
+    const flowsheetName = fv_id ? fv_id : "Name not found";
+    return (
+        <header id="header" className='.header_container'>
+            <div className={styles.headerLeftMainContainer}>
+                {/* -- IDAES logo -- */}
+                <div id="headerLogoContainer"
+                     className={styles.headerLogoContainer}>
+                    <img src={idaes_logo}
+                         alt="IDAES logo"
+                         id="headerLogo"
+                         className={styles.headerLogo}
+                    />
+                    <p id="headerLogoText" className={styles.headerLogoText}>IDAES</p>
+                </div>
+                <DiagnosticsToggle/>
+            </div>
+            {/* -- Flowsheet name -- */}
+            <p id="flowsheet_name_title"
+               className={styles.headerFlowsheetName}>{flowsheetName}
+            </p>
+            {/* -- Header buttons */}
+            <HeaderButtons/>
+        </header>
+    )
+}