Web application to visualise metabolic pathways in a 3-dimensional space. Uses 3D Force Graph and ThreeJS libraries.
git clone https://gitlab.gencovery.com/dev/internships/2020/m1-ubordeaux/testclass.git
Node installation :
sudo apt install npm
Server installation, with the http-server package :
sudo npm install -g http-server
To run the web application, browser use is required. Only Chrome and Firefox browser are guaranteed. Local node server is required (See below).
cd testclass/
http-server
Open the first link to open the browser (http://127.0.0.1:8080).
Students of the Bioinformatics Master of the University of Bordeaux.
Marine ALVES DE BARROS - marine.alves-de-barros@etu.u-bordeaux.fr
Mathieu BOLTEAU - mathieu.bolteau1@gmail.com
Mélanie CARRIAT - melanie.carriat@etu.u-bordeaux.fr
Solweig HENNECHART - solweig.hennechart@etu.u-bordeaux.fr
- Google Chrome 79.0.3945.117
- Firefox 72.0.1
- Node 6.13.4
Classes implemented are organised like this diagram :
- stringToJSON()
Transforms each JSON file data as string from the list to JSON object
- parseJSON() ⇒
Map Parses the JSON object and instanciates the objects
- putElementToPreviousElementCompound(pathway, idCompoundToSearch, idElementToAdd)
Adds the id of the reaction to the PreviousElement list of metabolites
- putElementToNextElementCompound(patwhay, idCompoundToSearch, idElementToAdd)
Add the id of the reaction to the NextElement list of the metabolite
- initCofact(list, pathway) ⇒
Object Creates Cofactors list for duplication
- getObjectById(list, id) ⇒
Element|boolean Gets an element corresponding to an id if it's found else, returns false
- duplicreate3dForceObject(map, cofact_list) ⇒
Object Creates the 3D-Force object required to display the graph with the 3D-Force Graph library with duplication possibility
- create3dForceObject(map) ⇒
Object Creates the 3D-Force object required to display the graph with 3D-Force Graph library
- jsonFileToGraph()
Reads and parses JSON file, to display the graph
- arrowlink(graph3D)
Sets links to arrows with chosen characteristics
- particuleLink(graph3D)
Adds directional particles to links
- formNode(value, sizeproportion) ⇒
Object Allows the choice of the node geometry between TorusKnot, Sphere and Box.
- displayGraph(object, map)
Displays graphs and loads elements information on click
- graphChange()
Applies custom changes
- loadFileAsText()
Loads files selected by the user and calls conversion function
- get3dForceObject() ⇒
Object Gets and returns currently displayed graph
- saveGraphToJSON()
Calls functions to save displayed graph as a new JSON file
- createNewFile(SAVE_GRAPH_EXTENSION)
Creates JSON file(s) with modifications from the graph
- modifyJSONObject(object3dForce)
Modifies the coordinates in the JSON object with the coordinates of the graph
- getCofactList() ⇒
Object Return cofactors' id in list with user selection on interface
Transforms each JSON file data as string from the list to JSON object
Parses the JSON object and instanciates the objects
Kind: global function
Returns: Map - Map object which contains the elements
Adds the id of the reaction to the PreviousElement list of metabolites
Kind: global function
| Param | Type | Description |
|---|---|---|
| pathway | Pathway |
Pathway object which is created during the parsing |
| idCompoundToSearch | String |
Id of the compound where the reaction id will be added in PreviousElements list |
| idElementToAdd | String |
Id of the reaction to add |
Add the id of the reaction to the NextElement list of the metabolite
Kind: global function
| Param | Type | Description |
|---|---|---|
| patwhay | Pathway |
Pathway object which is created during the parsing |
| idCompoundToSearch | String |
Id of the compound where the reaction id will be added in next elements |
| idElementToAdd | String |
Id of the reaction to add |
Creates Cofactors list for duplication
Kind: global function
Returns: Object - list of Cofactor objects
| Param | Type | Description |
|---|---|---|
| list | Object |
array containing id of certain elements |
| pathway | Pathway |
object which is created during the parsing |
Gets an element corresponding to an id if it's found else, returns false
Kind: global function
Returns: Element | boolean - Element object or "false"(boolean)
| Param | Type | Description |
|---|---|---|
| list | Object |
List containing objects |
| id | String |
String corresponding to an element's id |
Creates the 3D-Force object required to display the graph with the 3D-Force Graph library with duplication possibility
Kind: global function
Returns: Object - 3D-Force object which contains nodes and links data
| Param | Type | Description |
|---|---|---|
| map | Map |
Map object which contains the pathways |
| cofact_list | Object |
list of cofactor ids to duplicate |
Creates the 3D-Force object required to display the graph with 3D-Force Graph library
Kind: global function
Returns: Object - 3D-Force object which contains nodes and links data
| Param | Type | Description |
|---|---|---|
| map | Map |
Map object which contains the pathways |
Reads and parses JSON file, to display the graph
Sets links to arrows with chosen characteristics
Kind: global function
| Param | Type | Description |
|---|---|---|
| graph3D | Object |
3D-Force graph object |
Adds directional particles to links
Kind: global function
| Param | Type | Description |
|---|---|---|
| graph3D | Object |
3D-Force graph object |
Allows the choice of the node geometry between TorusKnot, Sphere and Box.
Kind: global function
Returns: Object - 3D Force Graph Icon
| Param | Type | Description |
|---|---|---|
| value | String |
corresponds to the choice of geometry we want to apply to our nodes |
| sizeproportion | Number |
is useful in order to display bigger reaction nodes compared to the metabolites ones |
Displays graphs and loads elements information on click
Kind: global function
| Param | Type | Description |
|---|---|---|
| object | Object |
3D-Force object which contains nodes and links data |
| map | Map |
Map object which contains the pathways data |
Applies custom changes
Loads files selected by the user and calls conversion function
Gets and returns currently displayed graph
Kind: global function
Returns: Object - ForceObject 3D Force Graph object which contains data
Calls functions to save displayed graph as a new JSON file
Creates JSON file(s) with modifications from the graph
Kind: global function
| Param | Type | Description |
|---|---|---|
| SAVE_GRAPH_EXTENSION | String |
new file name extension |
Modifies the coordinates in the JSON object with the coordinates of the graph
Kind: global function
| Param | Type | Description |
|---|---|---|
| object3dForce | Object |
3D Force Graph object |
Return cofactors' id in list with user selection on interface
Kind: global function
Returns: Object - Cofactors List