Download the latest version here.
Let's go to use MetExploreViz !
We are going to use the MetExploreViz API Reference to integrate the library in a website.
After downloaded a version of MetExploreViz and placed the folder in your projet, we import MetExploreViz in your header:
<script type="text/javascript" src="js/metExploreViz/metexploreviz.js" charset="utf-8"> </script>
Create a division to integrate the visualisation:
<div class="visu" id="visu" style="width:100%; height:400px; "></div>
And load the library in the webpage:
<script type="text/javascript">
MetExploreViz.initFrame("visu");
</script>
In order for your project to be functional, it is necessary to use a server (local or remote).
When the library is installed we are able to launch drawing with files but we want to launch drawing programmatically. To be sure that MetExploreViz is defined we have to use all functions in this one:
MetExploreViz.onloadMetExploreViz(function(){
// All functions to interact with MetExploreViz
});
In this function you can call the function to launch the drawing:
var myJsonString = '{"nodes":[{"name":"aspartate transaminase","dbIdentifier":"R_ASPTA","ec":"2.6.1.1","id":"2405504","reactionReversibility":true,"biologicalType":"reaction"},{.....],"links":[{"id":"2405504 -- 1109303","source":1,"target":0,"interaction":"in","reversible":true},{....],"mappingdata":[{"name":"Global Mapping","targetLabel":"metaboliteId","mappings":[{"name":"Control Condition","data":[{"node":"1107024"},{"node":"1107031"},{"node":"1107950"}]}]}]}';
metExploreViz.GraphPanel.refreshPanel(myJsonString);
var myJsonString = '{"nodes":[{"name":"aspartate transaminase","dbIdentifier":"R_ASPTA","ec":"2.6.1.1","id":"2405504","reactionReversibility":true,"biologicalType":"reaction"},{.....],"links":[{"id":"2405504 -- 1109303","source":1,"target":0,"interaction":"in","reversible":true},{....],"mappingdata":[{"name":"Global Mapping","targetLabel":"metaboliteId","mappings":[{"name":"Control Condition","data":[{"node":"1107024"},{"node":"1107031"},{"node":"1107950"}]}]}]}';
//Run graph
metExploreViz.GraphPanel.refreshPanel(myJsonString, function(){
metExploreViz.onloadSession(function(){
// Interations with the network
});
});
The function metExploreViz.onloadSession()
allows to launch other functions only when the network is drew.
You can also use callback functions in others functions to launch their sequentially and programmatically.
MetExploreViz.onloadMetExploreViz(function(){ //Callback when library is loaded
metExploreViz.GraphPanel.refreshPanel(myJsonString,
function(){ //Callback when network is drew
metExploreViz.onloadSession(function(){
var mapJSON = metExploreViz.GraphUtils.parseWebServiceMapping(myJsonString);
//Load mapping
metExploreViz.GraphMapping.loadDataFromJSON(mapJSON);
//Highlight
metExploreViz.GraphMapping.mapNodes("Global Mapping",
function(){ //Callback when node are mapped
var sideCompounds = ["M_adp_m", "M_adp_c", "M_amp_c", "M_amp_m", "M_amp_r"];
metExploreViz.GraphNode.loadSideCompounds(sideCompounds);
metExploreViz.GraphNetwork.duplicateSideCompounds();
}
);
});
}
);
});
Let's look at few concrete examples of using the MetExploreViz API. In this section, you will find the code and it's application below.
You have seen before that it was possible to launch drawing with variable in your script.
But, as part of a workflow for example, you may want to be able to launch drawing from a local JSON file.
You can use
MetExploreViz.onloadMetExploreViz(function(){
fetch("path")
.then(response => response.json())
.then(json => JSON.stringify(json))
.then(jsonString => metExploreViz.GraphPanel.refreshPanel(jsonString));
});
Once network drawing, it's possible to highlight nodes from data file.
Firstly, we have to load the data file, MetExploreViz allows this with the function metExploreViz.GraphMapping.loadDataTSV(url).
Then use the function metExploreViz.GraphMapping.mapNodes(fileName)
to map data on nodes.
MetExploreViz.onloadMetExploreViz(function(){
metExploreViz.onloadSession(function(){
//Load mapping - path start at MetExploreViz folder
metExploreViz.GraphMapping.loadDataTSV("path");
//Highlight
metExploreViz.GraphMapping.mapNodes("map.tsv");
});
});
To map data on nodes or links from data file, we have to load the data file with the same function that for highlight nodes.
Then, you have to get style component (link, metabolite or reaction) with the function metExploreViz.findCmpt(componentName)
After that, you have to select specific style to apply mapping on with the function styleForm.query("aStyleForm").find(function(aStyleForm){ return aStyleForm.title === "specificStyleName"})
Last, you can apply mapping data on your style with the function metExploreViz.GraphMapping.graphMappingDiscreteData(fileName / condition, component)
MetExploreViz.onloadMetExploreViz(function(){
metExploreViz.onloadSession(function(){
// Load data
metExploreViz.GraphMapping.loadDataTSV("path");
// get link style component
var styleForm = metExploreViz.findCmpt('linkStyleForm');
// select specific style
var backgroundForm = styleForm.query("aStyleForm").find(function(aStyleForm){ return aStyleForm.title === "Link color" });
// apply mapping on selected style
metExploreViz.GraphMapping.graphMappingDiscreteData("map.tsv / condition", backgroundForm);
});
});
MetExploreViz allows you to duplicate side compounds programmatically.
After network drawing you have to load side componds with the function metExploreViz.GraphNode.loadSideCompounds(arrayOfMetabolicDataBaseIdentifiers)
Then use the function metExploreViz.GraphNetwork.duplicateSideCompounds()
to duplicate the side compounds.
MetExploreViz.onloadMetExploreViz(function(){
metExploreViz.onloadSession(function(){
var sideCompounds = ["NADPH", "H+", "H2O"];
metExploreViz.GraphNode.loadSideCompounds(sideCompounds);
metExploreViz.GraphNetwork.duplicateSideCompounds();
});
});
MetExplore team also develops webservice return file usable in MetExploreViz.
For example, several returns are allowed:
You can get JSON of network using the following request and biosource id from MetExplore database.
https://metexplore.toulouse.inrae.fr/metexplore-api/viz/idBioSource/
You can get JSON of network that contains only specified pathways using the following request, biosource id and pathway id (or list of pathway id) from MetExplore database.
https://metexplore.toulouse.inrae.fr/metexplore-api/viz/idBioSource/idPathway/
To access the pathway id list of the desired network, you can used the following request.
https://metexplore.toulouse.inrae.fr/metexplore-api/idBioSource/pathway/