Everything in MetExploreViz is scoped under the metExploreViz namespace.

See one of:

• Core
• GraphPanel - To manage the panel where is the graph
• GraphNode - To draw and manage nodes
• GraphMapping - To map data on nodes
• GraphUtils - Some useful functions

Core

metExploreViz provides some features to manage the style of the visualisation like:

• GeneralStyle - To manage the siteName, the color for min value in continuous mapping, the color for max value in continuous mapping, a threshold to optimize drawing, if the node labels are displayed, if the links are displayed, if the compartments or pathways are highlighted, if the components highligthed are clustered, what caption are displayed
• MetaboliteStyle - To manage the height, width, rx, ry, fontSize, strokeWidth, displayNodeName, strokeColor of metabolites
• Reaction style - To manage the height, width, rx, ry, displayNodeName, fontSize, strokeColor, strokeWidth of reactions
• LinkStyle - To manage the size, lineWidth, markerWidth, markerHeight, markerInColor, markerOutColor, markerStrokeColor, markerStrokeWidth, strokeColor of links

# metExploreViz.setGeneralStyle(style)

So to change general style you could create new general style and set the style by default.

var style = new GeneralStyle("Website", "yellow", "blue", 500, false, false, false, false, false);
metExploreViz.setGeneralStyle(style);

# metExploreViz.setMetaboliteStyle(style)

So to change metabolite style you could create new metabolite style and set the style by default.

var style = new MetaboliteStyle(20, 20, 10, 10, 12, 2,'name', '#b2ae92');
metExploreViz.setMetaboliteStyle(style);

# metExploreViz.setReactionStyle(style)

So to change reaction style you could create new reaction style and set the style by default.

var style = new ReactionStyle(20, 80, 6, 6, 'ec', 20, '#154B7D', 1);
metExploreViz.setReactionStyle(style);

# metExploreViz.setLinkStyle(style)

So to change link style you could create new link style and set the style by default.

var style = new LinkStyle(25, 2, 5, 5, 'red', 'green', 'black', '0.7', '#000000');
metExploreViz.setLinkStyle(style);

# metExploreViz.fireEventParentWebSite("eventName", arg)

To bind your data with the visualisation, MetExploreViz sends events. For example, when you assign metabolite as a side compound. So to use this you could add listener on your DOM like this:

document.addEventListener('eventName', function (e) {
    // Your function
    var eventArg = e.value;    
}, false);

For the moment the event developed are:

• "sidecompound": With the node as argument.

# metExploreViz.newNetworkData()

To bind your data with the visualisation, MetExploreViz sends events. For example, when you assign metabolite as a side compound. So to use this you could add listener on your DOM like this:

document.addEventListener('eventName', function (e) {
    // Your function
    var eventArg = e.value;    
}, false);

For the moment the event developed are:

• "sidecompound": With the node as argument.

GraphPanel

metExploreViz.GraphPanel provides some features to manage the window where is integrated MetExploreViz

# metExploreViz.GraphPanel.refreshPanel(yourJsonString)

So, if you have your data on un website you can compute this to use the past function like this:

var networkData = metExploreViz.newNetworkData('viz');
....
var myJsonString = JSON.stringify(networkData);

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(){
        
        var mapJSON = metExploreViz.GraphUtils.parseWebServiceMapping(myJsonString);
        //Load mapping
        metExploreViz.GraphMapping.loadDataFromJSON(mapJSON);
        //Highlight
        metExploreViz.GraphMapping.mapNodes("Global Mapping");
        // //Color nodes
        //metExploreViz.GraphMapping.graphMappingContinuousData("mapping_D-Galactose", "conditionName1");
    }); 
});   

GraphNode

# metExploreViz.GraphNode.setIsSideCompoundById(idMetabolite, bool)

This function allows to bind the visualisation with your data. It could be used when you change the attribute isSideCompound of metabolite.

# metExploreViz.GraphNode.selectNodeFromGrid(node)

This function allows to select node in the visualisation from your website data.ble as a Java executable file (.jar format) via command line or graphical user interface.

GraphMapping

metExploreViz.GraphMapping provides some features to map data on nodes.

# metExploreViz.GraphMapping.loadDataFromJSON(yourJsonString)

So, if you have your data on un website you can compute this to use the past function like this:

//Load mapping
metExploreViz.GraphMapping.loadDataFromJSON(mapJSON);

# metExploreViz.GraphMapping.mapNodes(theMappingNane)

So, if you have loaded your data in the visualisation with the previous function you can highlight mapped nodes like this:

//Highlight
metExploreViz.GraphMapping.mapNodes("Mappingname");

# metExploreViz.GraphMapping.graphMappingContinuousData(theMappingNane, )

So, if you have your data on un website you can compute this to use the past function like this:

//Color nodes
//metExploreViz.GraphMapping.graphMappingContinuousData("mapping_D-Galactose", "conditionName1");

GraphUtils

# metExploreViz.GraphNode.setIsSideCompoundById(idMetabolite, bool)

This function allows to bind the visualisation with your data. It could be used when you change the attribute isSideCompound of metabolite.

# metExploreViz.GraphNode.selectNodeFromGrid(node)

This function allows to select node in the visualisation from your website data.ble as a Java executable file (.jar format) via command line or graphical user interface.