README.md

# Flow Sheet Simulator

Flow Sheet Simulator is a demo application that allows users to create and simulate flow sheets. It integrates a React frontend, an Express backend, and a Python script to perform simulations based on user-defined nodes and edges.

## Table of Contents

- [Features](#features)
- [Installation](#installation)
  - [Using Devcontainer](#using-devcontainer)
  - [Frontend Setup](#frontend-setup)
  - [Backend Setup](#backend-setup)
- [Running the Application](#running-the-application)
- [Communication Process](#communication-process)
- [Technologies Used](#technologies-used)
- [Contributing](#contributing)
- [License](#license)

## Features

- **🤯Calulates the sum of two arbitrary integers (at the moment)!🤯**
- Interactive flow sheet creation with draggable nodes and edges.
- Real-time simulation of flow processes.
- Backend processing using Python for calculations.
- Seamless integration between frontend, backend, and Python scripts.

## Installation

### Using Devcontainer

The project is configured to use a Devcontainer for a consistent development environment.

0. **(If not installed) Install Docker:**
   - [Docker Desktop](https://www.docker.com/products/docker-desktop)

1. **Install Visual Studio Code and Extensions:**
   - [Visual Studio Code](https://code.visualstudio.com/)
   - [Remote - Containers Extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)

2. **Set Up the Devcontainer:**
   - Open the project in VS Code.
   - Click on the green icon in the bottom-left corner.
   - Select "Reopen in Container".
   - The necessary dependencies will be installed automatically.

### Frontend Setup

1. **Navigate to the Frontend Directory:**
1. **Navigate to the Frontend Directory:**

    ```bash
    cd flow-sheet-simulator/frontend
    ```

2. **Install ``npm`` Dependencies:**

    ```bash
    npm install
    ```

### Backend Setup

1. **Navigate to the Backend Directory:**

    ```bash
    cd ../backend
    ```

2. **Install ``npm`` Dependencies:**

    ```bash
    npm install
    ```

## Running the Application

1. **Start the Backend Server:**

    ```bash
    cd flow-sheet-simulator/backend
    npm start
    ```

    The backend server will run on [http://localhost:3001](http://localhost:3001).

2. **Start the Frontend Application:**
    Create a new terminal window and navigate to the frontend directory.

    ```bash
    cd flow-sheet-simulator/frontend
    npm start
    ```

    The frontend application will open in your default browser at [http://localhost:3000](http://localhost:3000).

    *Important: Keep both the frontend and backend servers running to use the application.*

## Communication Process

1. **Frontend Interaction:**
   - Users modify the two nodes in the React frontend.
   - Upon clicking the "Play" button, the frontend sends a POST request to the backend at `http://localhost:3001/simulate` with the current `nodes` and `edges` data.

2. **Backend Processing:**
   - The Express backend receives the simulation request.
   - It spawns a Python process, executing `process_simulator.py`, passing the `nodes` and `edges` data via stdin.

3. **Python Simulation:**
   - The Python script processes the input data, performing calculations based on the defined nodes and edges.
   - It returns the simulation results as JSON to the backend.

4. **Returning Results:**
   - The backend sends the simulation results back to the frontend.
   - The frontend displays the results to the user in a user-friendly format.

```mermaid
graph LR
    A[User] -->|Modifies Nodes/Edges| B[React Frontend]
    B -->|POST /simulate| C[Express Backend]
    C -->|Spawn Python Process| D[Python Script]
    D -->|Process Data| C
    C -->|Return Results| B
    B -->|Display Results| A
```

## Technologies Used

- **Frontend:**
  - React
  - React Flow
  - Axios

- **Backend:**
  - Node.js
  - Express

- **Python:**
  - Python 3

- **Development Tools:**
  - Visual Studio Code
  - Devcontainer

## Contributing

Contributions are welcome! Please fork the repository and submit a pull request for any enhancements or bug fixes.

## License

This project is licensed under the [MIT License](LICENSE).