Signal Flow Graph Solver

A web-based signal flow graph solver built using angular and spring boot frameworks.

Contents:

• Main Features
• Sample Runs
• User Guide
• Frameworks and technology used
• How to run
• Demo Video

---

Main Features:

Our program supports an exceptional UI powered by the JointJS Library. It makes it easier for the user to interact with the flow graph, modifying edges and moving nodes around to make it clear and easy to deal with.

The main features of the program can be summed up as follows:

• A user-friendly UI built with Angular components.

• Interactive buttons and various CSS active and hover effects.

• Draggable graph nodes, and smart dynamic edge routing mechanisms

• The ability to select different graph elements, change their colors, and display information about them in the data box located on the right side of the screen.

• The ability to delete selected edges, providing smart buttons that only are enabled if an edge is selected. (As the “set weight” button shown above, and the delete button shown below)

• Compatibility with self-loops.

• The main purpose of the program is solving a signal flow graph, displaying the results in a pop-up window after taking the desired source and destination nodes from the user.

• Efficient back-end algorithms that take almost no time to compute the results and send them back to the front-end using the suitable HTTP requests.

---

Sample Runs:

Sample Run 1: Simple graph Add nodes using the “Add Node” button.

Now, connect them using the “Add Link” button.

Then, select each individual edge using the “Select” button and update its weight as desired using the “Update Weight” button and the input text area.

Click on the submit button and specify the source and destination nodes.

Finally, submit to the backend and receive the results.

Sample Run 2: Complex Graph Repeat the same steps, but increase the number of nodes and add loops with negative gains to the flow graph. The resulting graph becomes:

Submit to the backend (source = 0, destination = 7), the correct results are received as follows:

Sample Run 3: Very Complex Graph

Assuming the following constant gains: A32 = 2 A77 = -1 A43 = 3 A67 = -1 A54 = 4 A56 = -1 A65 = 5 A45 = -1 A76 = 6 A34 = -1 A72 = 8 A23 = -1 A42 = 6 A57 = -2

The graph is drawn like this to make the edges clear:

And after submitting to the backend, we get:

---

User Guide

Introduction

The signal flow graph solver web application is a powerful tool for solving signal flow graphs. With this application, you can easily define nodes and edges, and let the solver do the work to find the solution. This user guide will provide you with clear and comprehensive instructions on how to use the application.

Getting Started

To access the application, follow the steps provided in the installation guide section.

Input and Output

To input a signal flow graph, add nodes and edges to the graph using the provided buttons. Once you have defined the graph, click the "Submit" button to run the solver. The results will be displayed on the screen, showing the solution to the signal flow graph. You can modify the graph at any time by adding or moving nodes and edges (edges can also be deleted).

Troubleshooting

If you encounter any issues while using the signal flow graph solver web application, try the following troubleshooting tips: • Check that you have input the signal flow graph correctly • Ensure that the graph provided has a valid solution. • Double check the weights on each edge.

---

Frameworks and technology used

This project is developed as a web environment. • For the frontend part: Angular Framework is used. o JointJS Library is integrated with the Angular environment to power the UI with distinctive features. o An HTTP client module is added to the front-end for linking purposes. • For the backend part: Spring Boot and java are used.

---

How to run:

After cloning the repository from the GitHub link provided in the form, follow the following steps:

• Frontend:

  • This project was generated with Angular CLI -> version 15.0.2.
  • Run "ng serve" (in a CMD navigated to the project directory) for a dev server.
  • Navigate to "http://localhost:4200/". The application will automatically reload if you change any of the source files.
  • Run "ng build" to build the project. The build artifacts will be stored in the "dist/" directory.
  • To get more help on the Angular CLI use "ng help" or go check out the Angular CLI Overview and Command Reference
  • You also must run the following commands (for windows: use windows PowerShell or CMD, for Linux: use the Linux Terminal Window) inside the project directory to add the JointJS library modules to the angular environment: • npm install jointjs • npm install jquery • npm install backbone

• Backend:

  • Download IntelliJ IDEA from the official website.
  • Open the backend directory from IntelliJ.
  • Navigate to src/main/java/com.cs2025.SignalFlowGraphBackend.
  • You will find a class named “SignalFlowGraphBackendApplication”, run its main method.
  • If any error occurs, it is likely that you did not allow IntelliJ to build the Maven project module, if that is the case, you will find a small box at the right bottom corner of the screen that says, “A Maven build is found.” and asks for permission to build the project. Give permission, wait for a couple of minutes and you should be good to go.
  • If any other errors occur, just copy the error code and Google it, you should find solutions easily.

---

Demo Video:

signal-flow-graph-video.mp4