Tutorial

Use case

Let's go to use MetExploreViz

We are going to use the MetExploreViz API Reference to integrate the library in a website. First, you have to install MetExploreViz. So 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>

Launch drawing

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);


To use programmatically other functions after launching drawing you can use this function with a callback function like this:
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.

Highlight nodes

Once network drawing, it's possible to highlight nodes from data file. Firtly, 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            
        metExploreViz.GraphMapping.loadDataTSV("../mappTabMeta.tsv");      
        //Highlight
        metExploreViz.GraphMapping.mapNodes("mappTabMeta.tsv");
    });
});


Map nodes

To map data on nodes from data file, we have to load the data file with the same function that for highlight nodes.

Then use the function # metExploreViz.GraphMapping.graphMappingDiscreteData(fileName, aCondition) to highlight nodes.

MetExploreViz.onloadMetExploreViz(function(){
    metExploreViz.onloadSession(function(){
        metExploreViz.GraphMapping.loadDataTSV("../../files/mappTabMeta.tsv");
        metExploreViz.GraphMapping.graphMappingDiscreteData("mappTabMeta.tsv", "3j");
    });
});

Duplicate side compounds

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 = ["M_adp_m", "M_adp_c", "M_amp_c", "M_amp_m", "M_amp_r", "M_amp_x", "M_atp_x", "M_atp_r", "M_atp_m", "M_atp_c", "M_hco3_c", "M_hco3_m", "M_co2_c", "M_co2_x", "M_co2_m", "M_ppi_c", "M_ppi_x", "M_ppi_r", "M_ppi_m", "M_fad_m", "M_fadh2_m", "M_gtp_c", "M_h2o2_x", "M_pi_m", "M_pi_c", "M_nad_x", "M_nad_c", "M_nad_m", "M_nadh_x", "M_nadh_m", "M_nadh_c", "M_nadp_m", "M_nadp_r", "M_nadp_x", "M_nadph_x", "M_nadph_r", "M_nadph_m", "M_o2_x", "M_o2_r", "M_o2_m", "M_h_r", "M_h_x", "M_h_l", "M_h_m", "M_h_c", "M_h_e", "M_so4_l", "M_h2o_x", "M_h2o_l", "M_h2o_m", "M_h2o_r", "M_h2o_e", "M_h2o_c"];
        metExploreViz.GraphNode.loadSideCompounds(sideCompounds);
        metExploreViz.GraphNetwork.duplicateSideCompounds();
    });
});

Callback

To launch sequentially and programmatically all functions. These allow to call callback function.

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.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", "M_amp_x", "M_atp_x", "M_atp_r", "M_atp_m", "M_atp_c", "M_hco3_c", "M_hco3_m", "M_co2_c", "M_co2_x", "M_co2_m", "M_ppi_c", "M_ppi_x", "M_ppi_r", "M_ppi_m", "M_fad_m", "M_fadh2_m", "M_gtp_c", "M_h2o2_x", "M_pi_m", "M_pi_c", "M_nad_x", "M_nad_c", "M_nad_m", "M_nadh_x", "M_nadh_m", "M_nadh_c", "M_nadp_m", "M_nadp_r", "M_nadp_x", "M_nadph_x", "M_nadph_r", "M_nadph_m", "M_o2_x", "M_o2_r", "M_o2_m", "M_h_r", "M_h_x", "M_h_l", "M_h_m", "M_h_c", "M_h_e", "M_so4_l", "M_h2o_x", "M_h2o_l", "M_h2o_m", "M_h2o_r", "M_h2o_e", "M_h2o_c"];
                        metExploreViz.GraphNode.loadSideCompounds(sideCompounds);
                        metExploreViz.GraphNetwork.duplicateSideCompounds();
                    }
                );
            }); 
        }
    );  
});


Use Webservices to visualise network

MetExplore team also develops webservice return file usable in MetExploreViz.

Several returns are allowed:

  • All of the graph
  • A network filtered by pathway
  • All of the graph with inchi mapping
  • A network with inchi mapping filtered by pathway

All graph

http://metexplore.toulouse.inra.fr:8080/metExploreWebService/graph/1363

Filtered by pathway

http://metexplore.toulouse.inra.fr:8080/metExploreWebService/graph/1363/filteredbypathway?pathwayidlist=(123770,123769)

All graph

http://metexplore.toulouse.inra.fr:8080/metExploreWebService/mapping/launchtokenmapping/inchi/1363

Filtered by pathway

http://metexplore.toulouse.inra.fr:8080/metExploreWebService/mapping/launchtokenmapping/inchi/1363/filteredbypathways