Move server to fastapi

.github/actions/install/action.yml

@@ -35,12 +35,12 @@ runs:
     - name: Check out repository
       if: inputs.variant == 'dev'
       uses: actions/checkout@v3
+    - name: install current repository
+      run: pip install .
     - name: Install using pip (requirements-dev.txt)
       if: inputs.variant == 'dev'
       shell: bash -l {0}
-      run: |
-        pip install --progress-bar off -r requirements-dev.txt
-
+      run: pip install --progress-bar off -r requirements-dev.txt
     - name: Install using pip (git+... URL)
       if: inputs.variant == 'standard'
       shell: bash -l {0}

.github/workflows/core.yml

@@ -65,7 +65,7 @@ jobs:
             runner-image: ubuntu-20.04
           - os: win64
             runner-image: windows-2022
-    steps:
+    steps:  
       - uses: IDAES/idaes-ui/.github/actions/install@main
         with:
           variant: ${{ matrix.install-variant }}
@@ -114,13 +114,18 @@ jobs:
             package.json
             package-lock.json
             cypress.config.js
+
       - name: Install node packages
         run: npm install
+
       - name: Start UI
-        run: npm run ui & echo "UI Server started"
+        run: |
+          python -m idaes_ui.fv.example & 
+          sleep 30
+
       - name: Cypress run
         uses: cypress-io/github-action@v5
         with:
-          wait-on-timeout: 20
+          wait-on-timeout: 50
           command: npm run test
           browser: chrome

.gitignore

@@ -138,6 +138,8 @@ dmypy.json
 # auto generated files
 sample_visualization.json
 shared_variable.json
+*.pickle
+saved_flowsheet/
 
 # cypress
 screenshots

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

@@ -35,6 +35,8 @@ export class MainFV {
   baseUrl:string;
   getFSUrl:string;
   putFSUrl:string;
+  saveFSUrl:string;
+  getAppSettingUrl:string;
   model:any;
   paper:any;
   _is_graph_changed:boolean;
@@ -43,6 +45,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) {
@@ -53,9 +56,11 @@ export class MainFV {
     this.isStreamTableShow = isStreamTableShow;
 
     //Gerneate url for fetch data
-    this.baseUrl = `http://localhost:${port}`
-    this.getFSUrl = VITE_MODE === "dev" ? `${this.baseUrl}/fs?id=${flowsheetId}` : `/fs?id=${flowsheetId}`;
-    this.putFSUrl = VITE_MODE === "dev" ? `${this.baseUrl}/fs?id=${flowsheetId}` : `/fs?id=${flowsheetId}`;
+    this.baseUrl = `http://localhost:${port}`;
+    this.getFSUrl = `${this.baseUrl}/api/get_fs?get_which=flowsheet`;
+    this.putFSUrl = `${this.baseUrl}/api/put_fs`;
+    this.saveFSUrl = `${this.baseUrl}/api/post_save_flowsheet`;
+    this.getAppSettingUrl = `${this.baseUrl}/api/get_app_setting`;
 
     //Define model
     this.model = {}
@@ -70,35 +75,40 @@ export class MainFV {
     // Setting name (key) that defines the save model time interval
     this._save_time_interval_key = 'save_time_interval';
     this._default_save_time_interval = 5000; // Default time interval
-    this._save_time_interval = this.getSaveTimeInterval();
+    this._save_time_interval = this.getSaveTimeInterval(this.getAppSettingUrl);
     this.setupGraphChangeChecker(this._save_time_interval, flowsheetId);
 
-    //fetch model data from python server, once get data then render model and stream table
-    //default is from sample_visualization if no ?example=1 etc. in url
-    //define if fetch from example
-    this.setGetFSUrl();
-
     /**
      * @param 
      */
     axios.get(this.getFSUrl)
     .then((response) => {
-        console.log(this.getFSUrl)
         //get data from python server /fs
-        this.model = response.data;
+        if(response.data._old && response.data._new){
+          this.model = response.data._new
+        }else{
+          this.model = response.data;
+        }
+
         //debug when flowsheet has no position it should not stack on each other
         isDevTest && this.debug_removeFlowsheetPosition(this.model);
         //render model
         if(isFvShow) this.renderModel(this.model); //this only run when fv is show
         //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()
   }
 
   /**
@@ -224,15 +234,12 @@ export class MainFV {
     });
   }
 
-    /**
-     * Get the save time interval value from the application's setting block.
-     */
-  getSaveTimeInterval() {
-    //question:
-    //this is the old way to write setting_url question its key=" then concat, should I keep "?
-    //let settings_url = `${this.baseUrl}/setting?setting_key="`.concat(this._save_time_interval_key);
-
-    let settings_url = `${this.baseUrl}/setting?setting_key=${this._save_time_interval_key}`;
+  /**
+   * @description Get the save time interval value from the application's setting block.
+   * @returns save_time_interval
+   */
+  getSaveTimeInterval(setting_url:string) {
+    let settings_url = `${this.baseUrl}/api/get_app_setting`;
     let save_time_interval = this._default_save_time_interval;
 
     axios.get(settings_url, {
@@ -241,7 +248,7 @@ export class MainFV {
       }
     })
     .then((response) => {
-      if (response.data.value != 'None') {
+      if (response.data.value) {
           save_time_interval = response.data.value;
       } else {
           this.informUser(
@@ -282,6 +289,7 @@ export class MainFV {
 
       var graphChangedChecker = setInterval(() => {
           if (this._is_graph_changed) {
+              console.log(this.paper.graph)
               this.saveModel(flowsheet_url, this.paper.graph);
               // reset flag
               this._is_graph_changed = false;
@@ -304,18 +312,50 @@ export class MainFV {
      * @param model The model to save
      */
     saveModel(url:any, model:any) {
-      let clientData = JSON.stringify(model.toJSON());
-      axios.put(url, clientData, {
+      let modelData = {
+          "flowsheet_type": "jjs_fs",
+          "flowsheet": model //data type in python is dict
+      };
+      axios.put(url, JSON.stringify(modelData), {
         headers: {
             'Content-Type': 'application/json'
         }
       })
       .then((response) => {
         console.log(`saved`)
+        console.log(response.data)
         this.informUser(0, "Saved new model values");
       })
       .catch((error) => {
         this.informUser(2, "Fatal error: cannot save current model: " + error);
       });
+
+      axios.post(this.saveFSUrl, JSON.stringify({save_flowsheet_model:true})).then(res=>res).then(data => console.log(data))
+    }
+
+    /**
+     * @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);
+        };
+    }
 }