added GUI and visualization

Author: menon-karthik

documentation/rom_simulation/0d-solver/solver/readme.md

@@ -428,6 +428,116 @@ Parameter key                        | Description  
 `set_capacitance_to_zero`            | Toggle whether all capacitances should be manually set to zero    | False  
 `initial_damping_factor`             | Initial damping factor for Levenberg-Marquardt optimization       | 1.0  
 
+## svZeroDVisualization
+
+### About
+
+svZeroDVisualization is a web application designed for visualizing 0D simulation results and the 0D network. It allows users to interactively explore and analyze their simulation data through an intuitive interface.
+This application is available in the  `applications` folder.
+
+
+### Architecture
+svZeroDVisualization is built using a robust architecture that includes:
+- Frontend: Utilizes HTML, CSS, Dash, and Plotly for creating a dynamic and interactive user interface. This setup allows for effective visualization and interaction with the 0D network and simulation results.
+- Backend: Powered by a Flask application that handles the server-side logic. It leverages NetworkX for managing and visualizing the network graph and a Python code to determine network connections.
+
+### Installing Dependencies
+
+1. We recommend using a virtual environment to help manage project-specific
+dependencies and avoid conflicts with other projects.
+    - Using venv:
+    ```bash
+    python -m venv venv
+    source venv/bin/activate  # On Windows use `venv\Scripts\activate`
+    ```
+    - Using Conda:
+    ```bash
+    conda create --name myenv python=3.12  # Replace with your desired Python version
+    conda activate myenv
+    ```
+
+2. Install the necessary packages:
+    ```bash
+    pysvzerod
+    pandas
+    matplotlib
+    networkx
+    dash
+    plotly
+    numpy
+    argparse
+    ```
+
+### How to Use
+Note: Files related to this application are in the `applications`folder, within the `dirgraph_visualization` subdirectory.
+
+1. Command line execution: Pass the file path to your input JSON file and the output directory where you want the visualization to be saved as command line arguments.
+    - Pass a third argument `export_csv` optionally if you want to save svZeroDSolver raw output.
+    - The program will execute svZeroDSolver, generate a directed graph visualization of your network, parse simulation results, and display the results along with the corresponding nodes on a local Flask server.
+    ```bash
+    python applications/svZeroDVisualization/visualize_simulation.py 'tests/cases/chamber_elastance_inductor.json' './output/circuit_img/dir_graph'
+    ```
+
+2. Once the server is open, you can click on a node to inspect further.
+    - The data for that node will be displayed, including the simulation parameters input for that node, pressure/flow data, and any internal variables if present.
+    - Additional features include the ability to download figures and use the trace function
+   for more detailed inspection of network elements. The trace feature allows users to filter the
+   view by specific element types, such as isolating and examining only the blood vessels or
+   identifying the locations of the chambers within the network. This functionality enhances the
+   ability to focus on and analyze particular components of the network with precision.
+
+## svZeroDGUI
+
+### About
+
+The svZeroDGUI application is designed to facilitate the creation of 0D model input files
+through an intuitive graphical user interface. Located in the `applications` folder,
+this tool allows users to generate input files for the svZeroDSolver by visually
+drawing and configuring the network.
+
+Unlike manual file creation, which can be
+cumbersome and error-prone, svZeroDGUI provides an easy-to-use interface that
+simplifies the process of defining network components such as vessels, junctions, and
+boundary conditions. This application is especially valuable for users who lack access to
+3D models or seek an efficient alternative to manual file generation, making the model creation
+process both faster and more user-friendly.
+
+### Architecture
+
+svZeroDGUI is built using a robust architecture that includes:
+* Frontend: The frontend is developed with HTML, CSS, and JavaScript to create a
+responsive and user-friendly interface. It utilizes Cytoscape.js, a popular package for creating
+interactive elements and graphical networks.
+
+*  Backend: Flask app, Node.js for server-side logic, and Cypress for testing.
+This architecture supports an intuitive user experience for
+generating and managing 0D input files through a graphical interface.
+
+### How to Use
+1. Create a virtual environment with the required `flask` dependency. If using `conda`, use the below commands:
+    ```bash
+    conda create -n svZeroDGUI python=3.10 flask
+    conda activate svZeroDGUI
+    ```
+2. Navigate to the `applications` folder and then to the `create_0dmodel` subdirectory.
+3. Launch the `app.py` file.
+    ```bash
+    python applications/svZeroDGUI/app.py
+    ```
+4. Select a node type and name the node.
+    - For vessels, after drawing the node, click on it to open a form
+where you can enter details such as vessel length, diameter, and more.
+    - For junctions, click the node to specify if it’s a Normal %Junction
+or a Blood Vessel %Junction.
+5. To draw edges between nodes, toggle the `Draw on` button on the right.
+Once active, you can start connecting nodes by drawing edges between them.
+6. When you wish to stop drawing edges and continue adding or moving nodes,
+click the `Draw off` button.
+7. Once you’ve completed the network, click `Export to JSON` on the right.
+If there are any incorrect connections or patterns, an alert will prompt you
+to make necessary changes so the network can be processed by svZeroDSolver.
+8. Open the downloaded JSON file and add any additional information,
+such as boundary condition data, before running it through svZeroDSolver.
 
 ## 0D Solver Theory
 We highlight here the theory behind the 0D solver. For equations and implementation details, we refer to the [documentation](https://simvascular.github.io/svZeroDSolver/index.html) throught this guide.