Application Architecture - HelikarLab/ode-app GitHub Wiki

Repository Structure 📚

Please use the following repository structure as reference to understand the application architecture better.

 |- client              -> Contains the code of the react client
    |- build            -> Build of the react client
    |- src              -> Source files of the react client
        |- components   -> React components
        |- store        -> Global store
        |- assets       -> Static assets
 |- server              -> Contains the code of the node server
    |- routes           -> API routes
    |- controllers      -> API controllers
    |- models           -> Sequelize(SQL) models
    |- config           -> Configuration files
    |- python           -> Python scripts to parse SBML files and simulate ODE models
        |- lib          -> Custom stimator library wheel package
    |- scripts          -> Utility scripts
 |- cypress             -> Contains all the tests for the project
 |- docker-compose.yml  -> Docker Compose files that runs the application using docker
 |- package.json        -> The main package.json governing the yarn workspaces
 |- README.md           -> Basic README with getting started instructions

Architecture Diagram ⚡

ODE App Architecture

NodeJS Express Server 🪐

The express server is essentially a RESTful API which is responsible for communication with the ReactJS frontend (client), database and the python scripts.

The database connection, schema and operations are handled in the server by Sequelize.

The python scripts are ran using the python-shell.

API Routes Available

API Route	Function
POST /api/uploadSbml	Parses the sbml file sent and returns a json object of the model
GET/api/model/get/all	Fetches all models stored in the database
GET /api/model/get/:id	Fetches a specific model by id from the database
POST /api/model/add	Adds a new model to the database
POST /api/simulate	Simulates the model sent and returns the concentration data

Each API has a route and controller assigned to it;

Route: The route defines the path to be hit for to make the API call.
Controller: The controller is responsible for handling the request; processing data, making calls to the database and sending an appropriate response.

ReactJS Frontend ⚛

The frontend is the component of the application that the user interacts with.

It uses a easy to use state library built over Redux; easy-peasy and bootstrap based components from reactstrap.

A loose structure of the frontend would be:

Root App
- Navbar
- Model Tab
- Simulation Tab

Navbar

Contains the option buttons for importing SBML files and loading models from the database.

Model Tab

The model tab can be further divided into 4 panels:

Graph Panel: The panel that visualizes the model in a graph using the ccNetViz graph library.
Reactions Panel: The panel that displays the list of reactions in the model loaded on the application.
Species Panel: The panel that displays the list of species in the model loaded on the application.
Info Panel: The panel that displays the information of the reaction or specie clicked from the reaction/specie panel.

Simulation Tab

The simulation tab can be further divided into 4 panel:

Settings Panel: The panel that displays the settings of the simulation. It has input fields for the duration of the simulation, no. of data points required and other fields like the max/min initial concentration of all the species taking part in the simulation.
Species Panel: The panel that displays the species taking part in the simulation. It has a slider to set its initial concentration and a toggle option which lets you toggle it on or off from the plot.
Reactions Panel: The panel that displays all the reactions in the model. It has a toggle option which lets you toggle it on or off in the reaction. Also has a select option to select which kinetic law needs to be applied to the reaction.
Plot Panel: The panel that displays the results of the simulation in the form of a plot of the concentrations of all the species.

Python Scripts 🐍

`parse.py`

This python script takes in a SBML file as an argument, parses it using python-libsbml and converts the underlying model to a frontend readable JSON object and then returns it.

`simulation.py`

This python script takes a JSON object which contains the reactions/species and some configuration. A custom version of stimator is used to simulate the model. The script forms a model string using all the reactions and then uses stimator to get the concentration data and then returns it.

PostgreSQL Database 🐘

The database uses schemas made using Sequelize ORM present in the /server/models directory.

There are 4 models currently which correspond to 4 tables:

Table	Purpose
Models	Stores all the information relevant to a SBML Model
Compartments	Stores the compartments present in all the models
Reactions	Stores the reactions present in all the models
Species	Stores the species present in all the models