# Schedule Visualization Frontend

This project is a React-based frontend designed to visualize task schedules along with Application and Platform model. It interfaces with a backend server, with the configuration specified in `config.json`, and is accessible via [eslab2.pages.dev](https://eslab2.pages.dev) for local servers and [codespace servers](https://eslab.es.eti.uni-siegen.de/eslab2/index.html).


## Table of Contents
1. [Features](#features)
2. [For Users](#for-users)
3. [For Developers](#for-developers)


## Features


- **Upload JSON File**: Upload a JSON file with application and platform model as defined in [schema](https://eslab2docs.pages.dev/README#api-input-schema-for-schedule-jobs) to visualize the model.

- **Add Nodes and Edges**: Modify the existing application and platform model by adding tasks, dependencies, nodes, and links.

- **Graph Visualization**: Clear visualization of the application and platform models, making it easy to understand task dependencies and node links.

- **Scheduling Algorithms**: Schedule the graph using five different algorithms, with changes in input model reflected automatically.

- **Schedule Visualization**: Visualize the resulting schedules in a bar graph format, providing a clear overview of the task timeline.

- **Cross-Platform Compatibility**: The application works seamlessly across different devices and browsers.


## For Users
 ### Accessing the Application

  - Accesible at [Distributed Scheduling](https://eslab.es.eti.uni-siegen.de/eslab2/index.html).

  - **Upload JSON File**: Click on the "Upload JSON" button to upload a pre-defined Application model. The  JSON file should follow the input schema defined at [eslab2docs](https://eslab2docs.pages.dev/README#api-input-schema-for-schedule-jobs).
  - **Load Default Json**: Loads default application and platform model.

  - **Saving and Exporting**: Export the updated JSON file containing the application and platform model, including any changes, using the "Download JSON" button. 


### Creating Application Model

  - **Add Tasks and Task Dependencies**: Create your own Application model by selecting the "Application model" on the screen. Use the "Add Tasks" button to create tasks individually and tasks dependencies using the "Add dependency" button.

  - **Adjusting Task Parameters**: WCET and deadline for a task can be changed by clicking on the task and adjusting the respective sliders.

  - **Delete Mode**: The tasks and Edges can be deleted by first clicking on the "Delete Mode" button then selecting the task or edge you want to delete.

  - **Generate Random Application Model**: Generate a random application model by entering the number of tasks, the maximum and minimum WCET for each task, the maximum deadline, and the offset between the WCET and the deadline.

  - **Visualizing the Application Model**: The Application model will be displayed as a directed acyclic graph. Nodes represent tasks, and edges represent dependencies between tasks.

### Creating Platform Model
   
  - **Add Nodes and Links**: Create your own Platform model by selecting the "Platform model" on the screen. Use the "Add Node" button to create nodes individually and links using the "Add Link" button.

  - **Sliders**: Link delay and bandwidth  can be adjusted by selecting the edge and adjusting the respective sliders.

  - **Delete Mode**: The nodes and links can be deleted by first clicking on the "Delete Mode" button then selecting the node or link you want to delete.

  - **Generate Random Platform Model**: Generate a random platform model by entering the number of compute, router, sensor, and actuator nodes, as well as the maximum and minimum link delays for each edge.

  - **Visualizing the Platform Model**:The Platform Model will be displayed as a graph. Nodes represent nodes, and edges represent links between the nodes.

### Hotkeys
   
   - **Tab**: Switches between the Application and Platform model.
   
   - **When Application Model is selected**:
      - **'1'** will add a task.
      - **'2'** will add a dependency.
      - **'w'** will cycle through the tasks.
      - **'d'** will delete the selected task.
         
   
   - **When Platform Model is selected**:
      - **'1'** will add a node.
      - **'2'** will add a link.
      - **'w'** will cycle through the links.
      - **'d'** will delete the selected link.
      
   - **Zooming and Panning** - Select a model then use the mouse wheel to zoom in and out and click and drag to pan.

### Visualizing Schedules

  - Along with the application and platform model, nine different schedules will be fetched from the backend, representing different algorithms.
   
  - The resulting schedules will be visualized in a bar graph format.
   
  - Users can compare the different schedules generated by the algorithms.
   
  - Any changes made in the application or platform model will be immediately reflected in the schedules.


## For Developers
1. **Fork the front-end Repository**
  - Go to the project repositories
  - Frontend: [Github Repository](https://github.com/linem-davton/graphdraw-frontend.git).
  - Click on the "Fork" button to create a copy of the repository in your GitHub account.

2. **Clone the Repository**
     - Clone the forked repository to your local machine:
      ```BASH
     git clone https://github.com/linem-davton/graphdraw-frontend.git
     ```
     

3. **Navigate to the Project Directory**
   - Change to the project directory:
     ```BASH
     cd your-repo
     ```

4. **Install Dependencies**
   - Install the necessary dependencies for the frontend:
     ```BASH
     npm install
     ```
   
5. **Run the Application**
   - Start the backend server:
      ```BASH
      python src/backend.py
      ```
    

   - Start the frontend development server:
      ```BASH
      npm run dev
      ```
     
   - Open your browser and navigate to [http://localhost:3000](http://localhost:3000) to view the application.

     

6. **Making Changes**
   - Create a new branch for your feature or bugfix:
     git checkout -b feature/your-feature-name
     
   - Make your changes in the codebase.

   - Commit your changes with a descriptive commit message:
     
     ```BASH
      git commit -m "Add feature X"
      ```

   - Push your changes to your forked   repository:
     ```BASH
      git push origin feature
     ``` 

7. **Submitting a Pull Request**
    - Go to the original repository on GitHub.
    - Click on the "New Pull Request" button.
    - Select your branch and submit the pull request for review.