<script type="text/javascript" src="js/metExploreViz/metexploreviz.js" charset="utf-8">  </script>

<div class="visu" id="visu" style="width:100%; height:400px; "></div>

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

Download json

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

Download mapping

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