Merge pull request #47 from CopyDemon/main

For Issue 46: Fixed the malfunction of the Zoom button when the fv display is in full-screen mode.

IDAES-UI/src/components/flowsheet_main_component/flowsheet_component/flowsheet_functions/mainFV.tsx

@@ -43,6 +43,7 @@ export class MainFV {
   _save_time_interval:any;
   stream_table:any;
   toolbar: any;
+  cleanToolBarEvent: any;
 
 
   constructor (flowsheetId:any, port:string | number, isFvShow:boolean, isVariablesShow:boolean, isStreamTableShow:boolean) {
@@ -83,7 +84,6 @@ export class MainFV {
      */
     axios.get(this.getFSUrl)
     .then((response) => {
-        console.log(this.getFSUrl)
         //get data from python server /fs
         this.model = response.data;
         //debug when flowsheet has no position it should not stack on each other
@@ -93,12 +93,18 @@ export class MainFV {
         //render stream table
         //if statment control when stream table not show the stream table should not render
         if(isStreamTableShow) this.stream_table = new StreamTable(this, this.model);
+        // new this.toolbar
         this.toolbar = new Toolbar(this, this.paper, this.stream_table, this.flowsheetId, this.getFSUrl,this.putFSUrl, this.isFvShow);
+        // get toolbar event cleanup function
+        this.cleanToolBarEvent = this.toolbar.cleanUpEvent;
     })
     .catch((error) => {
         console.log(error.message);
         console.log(error.response.status);
     });
+
+    // cleanup #fv container extra joint paper element
+    this.fvExtraContentCleanUp()
   }
 
   /**
@@ -318,4 +324,30 @@ export class MainFV {
         this.informUser(2, "Fatal error: cannot save current model: " + error);
       });
     }
+
+    /**
+     * @Description This function help check if fv has mutiple children,
+     * if has will remove all children and keep the last one.
+     * 
+     * @Reason When react render, will create a new instence of MainFv,
+     * it will create a new fv display stack under the old one.
+     * this behivor cause zoom in and out btn not working so we need to clear all
+     * fv display other than the last one.
+     * 
+     * @returns void
+     */
+    fvExtraContentCleanUp(){
+      let fv = document.getElementById("fv");
+
+      //validation if fv and fv has mutiple child
+      if(!fv || fv.childNodes.length <= 1){
+          return;
+      }
+
+      //get fv last child and remove others
+      let lastFvChild = fv.childNodes[fv?.childNodes.length - 1]
+      while(fv.firstChild !== fv.lastChild){
+          fv.removeChild(fv.firstChild as Node)
+      }
+    }
 }

IDAES-UI/src/components/flowsheet_main_component/flowsheet_component/flowsheet_functions/stream_table.tsx

@@ -143,6 +143,10 @@ export class StreamTable {
         // Get the hide fields list
         const hide_fields_list = document.querySelector("#hide-fields-list");
 
+        // reset hide_fields_list innerHTML to empty for prevent accumulating duplicate list items.
+        if(hide_fields_list){
+            hide_fields_list.innerHTML = "";
+        }
         // Specify the column headers
         let columns = stream_table_data["columns"];
         let column_defs = [];

IDAES-UI/src/components/flowsheet_main_component/flowsheet_component/flowsheet_functions/toolbar.tsx

@@ -31,13 +31,17 @@ export class Toolbar {
   getFSUrl: string;
   putFSUrl:string;
   isFvShow:boolean;
+  zoomRate:number;
 
   toggleStreamNameBtn:HTMLElement | undefined;
   toggleLabelsBtn:HTMLElement | undefined;
 
   zoomInBtn:HTMLElement | undefined;
   zoomOutBtn:HTMLElement | undefined;
-  zoomToFitBtn: HTMLElement | undefined;
+  zoomFitBtn: HTMLElement | undefined;
+  zoomInHandler: (() => void) | undefined;
+  zoomOutHandler: (() => void) | undefined;
+  zoomFitHandler: (() => void) | undefined;
 
   constructor(app:any, paper:any, stream_table:any | undefined, flowsheetId:string, getFSUrl:string, putFSUrl:string, isFvShow:boolean) {
     //initial arguments
@@ -48,6 +52,10 @@ export class Toolbar {
     this.getFSUrl = getFSUrl;
     this.putFSUrl = putFSUrl;
     this.isFvShow = isFvShow;
+    this.zoomRate = 0.2;
+    this.zoomInHandler = undefined;
+    this.zoomOutHandler = undefined;
+    this.zoomFitHandler = undefined;
     // this.setupPageToolbar();
     // this.setupFlowsheetToolbar(); 
 
@@ -60,9 +68,16 @@ export class Toolbar {
 
     //call & register click event to save flowsheet
     this.registerEventSave(this.putFSUrl)
-
+
+    /**
+     * Tool bar zoom in out and fit
+     */
     //isFvShow repersent stream name, labels, zoom in, zoom out, zoom fit btn
     //if !isFvShow these event has no need to register event
+
+    this.zoomInBtn = document.querySelector("#zoom-in-btn") as HTMLElement;
+    this.zoomOutBtn = document.querySelector("#zoom-out-btn") as HTMLElement;
+    this.zoomFitBtn = document.querySelector("#zoom-to-fit") as HTMLElement;
     if(isFvShow){
         /**
          * Tool bar stream names toggle
@@ -85,14 +100,11 @@ export class Toolbar {
         /**
          * Tool bar zoom in out and fit
          */
-        //initial zoom btn from selector assign to this
-        this.zoomInBtn = document.querySelector("#zoom-in-btn") as HTMLElement;
-        this.zoomOutBtn = document.querySelector("#zoom-out-btn") as HTMLElement;
-        this.zoomToFitBtn = document.querySelector("#zoom-to-fit") as HTMLElement;
+        //registerZoomEvent
         //call registerZoomEvent function, register 3 zoom events to zoom in zoom out zoom to fit btn on dom
         //when button is not exist it should not register event, one example is isFvShow = false
-        if(this.zoomInBtn && this.zoomOutBtn && this.zoomToFitBtn){
-            this.registerZoomEvent(this.zoomInBtn, this.zoomOutBtn, this.zoomToFitBtn);
+        if(this.zoomInBtn && this.zoomOutBtn && this.zoomFitBtn){
+            this.registerZoomEvent(this.zoomInBtn, this.zoomOutBtn, this.zoomFitBtn);
         }
     }
   }
@@ -104,21 +116,32 @@ export class Toolbar {
    * @param zoomOutBtn HTML element, selected by ID zoom-out-btn
    * @param zoomToFitBtn HTML element, selected by ID zoom-to-fit
    */
-  registerZoomEvent(zoomInBtn:HTMLElement, zoomOutBtn:HTMLElement, zoomToFitBtn:HTMLElement){
-    // Zoom in event listener
-    zoomInBtn.addEventListener("click", () => {
-        this._paper.paperScroller.zoom(0.2, { max: 4 });
-    });
+  registerZoomEvent(zoomInBtn:HTMLElement, zoomOutBtn:HTMLElement, zoomFitBtn:HTMLElement){
+    this.zoomInHandler = () => this.zoomInEvent(this._paper.paperScroller, this.zoomRate);
+    this.zoomOutHandler = () => this.zoomOutEvent(this._paper.paperScroller, this.zoomRate);
+    this.zoomFitHandler = () => this.zoomFitEvent();
 
+    // Zoom in event listener
+    zoomInBtn.addEventListener("click", this.zoomInHandler as EventListener);
     // Zoom out event listener
-    zoomOutBtn.addEventListener("click", () => {
-        this._paper.paperScroller.zoom(-0.2, { min: 0.2 });
-    });
-
+    zoomOutBtn.addEventListener("click", this.zoomOutHandler as EventListener);
     // Zoom to fit event listener
-    zoomToFitBtn.addEventListener("click", () => {
-        this._paper.zoomToFit();
-    });
+    zoomFitBtn.addEventListener("click", this.zoomFitHandler as EventListener);
+  }
+
+  /**
+   * create zoom events handler
+   */
+  zoomInEvent(paperScroller:any, zoomRate:number){
+        paperScroller.zoom(zoomRate, { max: 100 });
+  }
+
+  zoomOutEvent(paperScroller:any, zoomRate:number){
+    paperScroller.zoom(-(zoomRate), { min: 0.01 });
+  }
+
+  zoomFitEvent(){
+    this._paper.zoomToFit();
   }
 
   /**
@@ -217,4 +240,30 @@ export class Toolbar {
             this._app.saveModel(save_url, this._paper.graph);
         });
     }
+
+    /**
+     * Description: clean up event, when react update state new class instance will be created
+     * event listener will double registered, have to remove them to prevent multiple event trigger at one click issue.
+     * 
+     * this remove event by clone current node and replace the old node, way to reset event.
+     */
+
+    cleanUpEvent(){
+        let zoomInBtn = document.getElementById('zoom-in-btn');
+        let zoomOutBtn = document.getElementById('zoom-out-btn');
+        let zoomFitBtn = document.getElementById('zoom-to-fit');
+
+        if(zoomInBtn){
+            let zoomInBtnClone = zoomInBtn.cloneNode(true);
+            zoomInBtn.parentNode!.replaceChild(zoomInBtnClone, zoomInBtn);
+        };
+        if(zoomOutBtn){
+            let zoomOutBtnClone = zoomOutBtn.cloneNode(true);
+            zoomOutBtn.parentNode!.replaceChild(zoomOutBtnClone, zoomOutBtn);
+        };
+        if(zoomFitBtn){
+            let zoomFitBtnClone = zoomFitBtn.cloneNode(true);
+            zoomFitBtn.parentNode!.replaceChild(zoomFitBtnClone, zoomFitBtn);
+        };
+    }
 }

IDAES-UI/src/components/flowsheet_main_component/flowsheet_component/flowsheet_functions/universal_functions.tsx

@@ -25,14 +25,14 @@ export function minimizePanel(panelStatekey:string, setState:setPanelState){
  * @param panelStateKey string, the key of panelState, which panel you want to maxmize
  * @param setState callback fn, setPanelState, read from context
  */
-export function maxmizePanel(panelStateKey:string, setState:setPanelState){
-  setState((prevState:PanelStateInterface)=>{
-    const newState = {...prevState};
-    Object.keys(newState).forEach((objKey:string)=>{
-      if(objKey !== panelStateKey){
-        newState[objKey].show = false;
-      }
-    })
-    return newState;
-  })
-}
+// export function maxmizePanel(panelStateKey:string, setState:setPanelState){
+//   setState((prevState:PanelStateInterface)=>{
+//     const newState = {...prevState};
+//     Object.keys(newState).forEach((objKey:string)=>{
+//       if(objKey !== panelStateKey){
+//         newState[objKey].show = false;
+//       }
+//     })
+//     return newState;
+//   })
+// }

IDAES-UI/src/components/flowsheet_main_component/flowsheet_component/flowsheet_header/flowsheet_header_component.tsx

@@ -4,7 +4,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faMagnifyingGlassPlus, faMagnifyingGlassMinus,faExpand, faUpRightAndDownLeftFromCenter, faMinus, faSquareCheck, faSquare } from '@fortawesome/free-solid-svg-icons'
 
 import {FvHeaderStateInterface} from "../../../../interface/appMainContext_interface";
-import {minimizePanel, maxmizePanel} from "../flowsheet_functions/universal_functions";
+import { minimizePanel } from "../flowsheet_functions/universal_functions";
 import css from "./flowsheet_header.module.css";
 
 export default function FlowsheetHeader(){
@@ -29,8 +29,8 @@ export default function FlowsheetHeader(){
   }
 
   return(
-    <div className={`pd-md ${css.flowsheetHeader_main_container}`}>
-      <p className={css.flowsheetHeader_title}>FLOWSHEET</p>
+    <div id="flowsheet-header-component" className={`pd-md ${css.flowsheetHeader_main_container}`}>
+      <p id="flowsheet-header-component-title" className={css.flowsheetHeader_title}>FLOWSHEET</p>
       <div className={css.flowsheetHeader_icon_container}>
         <span id="stream-names-toggle"
               className={`pd-sm ${css.flowsheet_header_icon_container}`}
@@ -70,12 +70,7 @@ export default function FlowsheetHeader(){
           <FontAwesomeIcon icon={faExpand} />
         </span>
         <span 
-          className={`pd-sm ${css.flowsheet_header_icon_container} ${css.flowsheetHeader_small_icon}`}
-          onClick={()=>maxmizePanel('fv', setPanelState)}
-          >
-          <FontAwesomeIcon icon={faUpRightAndDownLeftFromCenter} />
-        </span>
-        <span 
+          id="minimize-flowsheet-panel-btn"
           className={`pd-sm ${css.flowsheet_header_icon_container} 
           ${css.flowsheetHeader_small_icon}`}
           onClick={()=>minimizePanel('fv', setPanelState)}

IDAES-UI/src/components/flowsheet_main_component/flowsheet_wrapper.tsx

@@ -27,7 +27,11 @@ export default function FlowsheetWrapper(){
     //get server port base on UI port number, vite running on 5173 on dev
     server_port == "5173" ? server_port ="8099" : server_port = server_port;
     //when template loaded then render flowsheet, variable, stream table to page with minFV class.
-    new MainFV(fv_id, server_port, isFvShow, false, isStreamTableShow); //The false is placeholder for isVariableShow, now variable panel is not show
+    const fv = new MainFV(fv_id, server_port, isFvShow, false, isStreamTableShow); //The false is placeholder for isVariableShow, now variable panel is not show
+
+    return ()=>{
+        fv.cleanToolBarEvent()
+    }
   },[isFvShow, isStreamTableShow])
 
   return(

IDAES-UI/src/components/flowsheet_main_component/minimized_bar_component/minimized_bar_component.tsx

@@ -46,7 +46,6 @@ export default function MinimizedBar(){
       const newState = {...prevState}
       Object.keys(newState).forEach((objKey:string)=>{
         if(newState[objKey].panelName === panelName){
-          console.log(newState[objKey])
           newState[objKey].show = !newState[objKey].show
         }
       })

IDAES-UI/src/components/flowsheet_main_component/stream_table_component/stream_table_header/stream_table_header.module.css

@@ -12,12 +12,23 @@
   border-bottom: 1px solid black;
 }
 
+/*stream table header right container*/
+.stream_table_right_container{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 20px;
+}
+
+/*stream table title*/
 .stream_table_title{
   font-weight: bold;
   font-size: 20px;
   color: rgb(16,16,16);
 }
 
+
+/*hide field btn and dropdown*/
 .hideFieldBtn{
   padding: 10px 20px;
   border: 1px solid black;
@@ -92,4 +103,31 @@
   width: 0;
   height: 0;
   display: none;
+}
+
+/*minimize btn*/
+.flowsheet_header_icon_container{
+  padding: 10px 10px !important;
+  border: 1px solid black;
+}
+
+.flowsheetHeader_small_icon:hover{
+  cursor: pointer;
+  color: white;
+  background-color: #161616;
+  transition: .3s ease-in-out;
+}
+
+.flowsheetHeader_small_icon{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 30px;
+  height: 30px;
+  margin-right: 10px;
+  padding: 5px !important;
+  background-color: #D9D9D9;
+  border: none;
+  border-radius: 6px;
 }