Flowsheet Visualizer for Developers

Flowsheet Visualizer for Developers#

Start FV example#

After installation you can start to run the flowsheet visualizer example by run:

python -m idaes_ui.fv.example

If you have Node.js 18 installed you can also run:

npm run ui

Code structure#

Python part:#

The Python code is responsible for backend tasks, such as starting the HTTP server, converting the flowsheet model to a JSON file, etc.

All files related to the FV on the Python side are located in repo_root/idaes_ui/fv/

Includes:

  1. FV visualizer

  2. FV backend server

  3. FV flowsheet

  4. FV diagnostics

  5. FV settings

  6. FV example

  7. FV test

UI part#

The JS code is responsible for frontend tasks and handles browser-side UI rendering. It uses React and Node.js to generate a modern single-page application.

All UI files are loaded in repo_root/IDAES-UI/

How to make changes#

Make change in backend#

You can start FV with pip install -e . , Once FV successfully started, you can make direct changes to the code and save to apply your changes.

Make change in frontend#

  1. Navigate to repo_root/IDAES-UI/

  2. Make sure you have Node.js 18 installed, and then run npm install

  3. Run vite run dev command to start the frontend development server in the browser.

Attention:
The frontend UI development environment requires the Python backend server to be started and running, or the API calls will fail, and the diagram will not display in the browser.

Build React#

The changes you make in the IDAES-UI folder are only for the development environment. To apply your changes to FV, you need to run the npm run build command.

Learn more about IDAES UI:#

Currently there is one IDAES UI, the Flowsheet Visualizer (FV). The architecture and design of the FV uses a pattern that is shared across other UIs in other Advanced Process Systems Engineering applications based on the IDAES Integrated Platform (IDAES-IP), e.g. WaterTAP and PARETO. The basics of this design are illustrated below. The main goal of a common design is to enable web applications that can be run on the desktop by an individual user or as a service across users. A secondary goal is to build a common set of front-end and back-end UI support libraries that can unify and accelerate application development across the IDAES-IP.

Contents