Include the library

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

Use case

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

Go to MetExploreViz API Reference to see more functions !

Example

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.

Launch drawing from local JSON file

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 # fetch(path) method for this.

MetExploreViz.onloadMetExploreViz(function(){
    fetch("path")
        .then(response => response.json())
        .then(json => JSON.stringify(json))
        .then(jsonString => metExploreViz.GraphPanel.refreshPanel(jsonString));
});

Highlight Nodes

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

Map Nodes

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

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 = ["NADPH", "H+", "H2O"];
        metExploreViz.GraphNode.loadSideCompounds(sideCompounds);
        metExploreViz.GraphNetwork.duplicateSideCompounds();
    });
});

Webservices

MetExplore team also develops webservice return file usable in MetExploreViz.

For example, several returns are allowed:

All of the graph
A network filtered by pathway

All graph

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/

Filtered by pathway

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/

Installation

Download MetExploreViz