I've created an Android app which allows you to build and simulate simplified gene regulatory networks.
About This Project
GRN Explorer is an app which I’ve created using Android Studio and React Native CLI. This app allows you to create, edit and simulate simplified GRNs (Gene Regulatory Networks). These networks are biologically-inspired and can model the complex dynamics of genes inside cells, where genes can activate or inhibit the transcription of other genes.
Overview of the App's Features
1) Home Page
- Users can create new projects from an empty or existing template.
- Users can duplicate and delete projects via the ellipsis button.
- Users can open a project by clicking it, which will take the user to the GRN Editor.
2) Help Page
- Users can access a help page which explains how to use the app.
3) GRN Editor Tab
- The editor features a GUI where users can pan and zoom the canvas.
- Users can add new nodes and connections between nodes.
- Users can select a particular node or connection by clicking it, and they can choose to delete the node / connection.
- Users can drag nodes to change their position on the canvas.
- Users can modify the strength of a connection’s weight by selecting a connection and choosing a weight value between -1 and +1. -1 represents maximum inhibition and +1 represents maximum excitation.
- The editor also features Undo / Redo buttons.
4) GRN Simulator Tab
- The simulator features a Play/Pause button and a Stop button which can be used to control the simulation of the network.
- When the user presses Play, the simulation of the gene regulatory network begins, and line graphs will appear with the current activity level for each node.
- The simulator has a settings page, where the user can change the simulation’s properties.
App Implementation Details
I created the app in TypeScript using the React Native framework. I chose this framework because it is cross-platform which allows the app to work across both IOS and Android under a single codebase.
Database Management
I used ‘react-native-sqlite-storage’ to manage the app’s database using sqlite, which is stored locally on the user’s device. I have created a Projects table which holds data about each project created by the user.
Navigation and Page Management
I have used React Navigation to create a Stack Navigation system which specifies the different pages of the app: Home Screen, Help Screen, and Editor / Simulator Screen.
GUI Editor
I have used the React Native Skia library to help display the graphical elements of the GRN Editor canvas such as nodes and connections. I used SVGs (Scalable Vector Graphics) to display the nodes and connections, as this allows the canvas to be zoomed in without losing resolution. I have also used the ‘react-native-gesture-handler’ library to manage the pinch, pan and tap gesture events which allow the user to interact with the canvas.
Selecting Elements on the GUI
Each node and connection have an invisible bounding rectangle which defines the region where the element can be selected by a tap event. Using rectangles makes it easier to highlight the correct selected element when the user presses a certain location. This app uses Bezier curves when there are two bidirectional connections between nodes so that they are both visible. To accurately ensure that the nearest element is selected, the app computes an approximation of each Bezier curve to a series of line segments by subdivision. The distance from each of the line segments to the user’s location is then calculated to determine whether the user has selected the particular connection.
Editor State Management
In the GRN Editor, the user can modify the network in different ways such as adding a new node or connection, editing an existing connection or deleting a particular node or connection. All of these actions have an effect on the current state of the network, and the canvas and the internal state needs to be updated correctly. To manage these events, I created two reducer functions: one to manage actions on nodes, another to manage actions on node connections. This makes it easier to invoke actions when using the undo and redo buttons.