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 for local servers and codespace servers.

Table of Contents

1. Features

2. For Users

3. For Developers

Features

• Upload JSON File: Upload a JSON file with application and platform model as defined in schema 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.

• 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.

• 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.

• 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:

   git clone https://github.com/linem-davton/graphdraw-frontend.git
   

3. Navigate to the Project Directory

   • Change to the project directory:

     cd your-repo
     

4. Install Dependencies

   • Install the necessary dependencies for the frontend:

     npm install
     

5. Run the Application

   • Start the backend server:

     python src/backend.py
     

   • Start the frontend development server:

     npm run dev
     

   • Open your browser and navigate to 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:

      git commit -m "Add feature X"
     

   • Push your changes to your forked repository:

      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.