MetExploreViz

Everything in MetExploreViz is scoped under the metExploreViz namespace.

See one of:

Core
GraphPanel - To manage the panel where is the graph
GraphNetwork - To manage your network
GraphNode - To draw and manage nodes
GraphMapping - To map data on nodes or links
GraphUtils - Some useful functions

Core

metExploreViz provides some features to manage the style of the visualisation and general functions

Style management

In MetExploreViz, you can manage and change 4 differents style:

GeneralStyle - Object to manage global style of your visualization:
- siteName: the site name
- minContinuous: the color for min value in continuous mapping
- maxContinuous: the color for max value in continuous mapping
- max: a threshold to optimize drawing
- dispLabel: if the node labels are displayed
- dispLink: if the links are displayed
- dispConvexhull: if the compartments is highlighted with convex hulls
- dispPathwaysOnLinks: if the pathways are highlighted on links
- clust: if the components highlighted are clustered
- dispCaption: what caption is displayed
- eventForNodeInfo: enable or not event for nodes informations
- loadButtonHidden: hide or not loading button at initialisation of div
- windowsAlertDisable: enable or not windows alert
```
var GeneralStyle = function(siteName, minContinuous, maxContinuous, max, dispLabel, dispLink,
    dispConvexhull, dispPathwaysOnLinks, clust, dispCaption, eventForNodeInfo, loadButtonHidden,
    windowsAlertDisable){
        // ...
};
```
MetaboliteStyle - Object to manage global metabolites styles:
- backgroundColor: metabolite node color
- height: metabolite node height
- width: metabolite node width
- rx: metabolite node shape for x axis
- ry: metabolite node shape for y axis
- opacity: metabolite node opacity
- strokeColor: metabolite node border color
- strokeWidth: metabolite node border width
- fontColor: metabolite label color
- fontSize: metabolite label size
- fontWeight: metabolite label thickness
- labelOpacity: metabolite label opacity
- displayNodeName: choose metabolite label to display
- useAlias: change metabolite label
```
var MetaboliteStyle = function(backgroundColor, height, width, rx, ry, opacity, strokeColor,
    strokeWidth, fontColor, fontSize, fontWeight, labelOpacity, displayNodeName, useAlias){
        // ...
};
```
ReactionStyle - Object to manage global reactions styles:
- backgroundColor: reaction node color
- height: reaction node height
- width: reaction node width
- rx: reaction node shape for x axis
- ry: reaction node shape for y axis
- opacity: reaction node opacity
- strokeColor: reaction node border color
- strokeWidth: reaction node border width
- fontColor: reaction label color
- fontSize: reaction label size
- fontWeight: reaction label thickness
- labelOpacity: reaction label opacity
- displayNodeName: choose reaction label to display
- useAlias: change reaction label
```
var ReactionStyle = function(backgroundColor, height, width, rx, ry, opacity, strokeColor,
    strokeWidth, fontColor, fontSize, fontWeight, labelOpacity, displayNodeName, useAlias){
        // ...
};
```
LinkStyle - Object to manage global links styles:
- size: link max length
- lineWidth: link width
- markerWidth: arrow head width
- markerHeight: arrow head height
- markerInColor: arrow head color for IN interaction
- markerOutColor: arrow head color for OUT interaction
- markerStrokeColor: arrow head border color
- markerStrokeWidth: arrow head border width
- strokeColor: link color
- opacity: link opacity
```
var LinkStyle = function(size, lineWidth, markerWidth, markerHeight, markerInColor,
    markerOutColor, markerStrokeColor, markerStrokeWidth, strokeColor, opacity){
        // ...
};
```

# metExploreViz.setGeneralStyle(style)

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

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

# metExploreViz.setMetaboliteStyle(style)

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

var style = metExploreViz.createMetaboliteStyle("white", 14, 14, 7, 7, 1, "red", 2, "black", 5, 500, 1,
    "name", false);
metExploreViz.setMetaboliteStyle(style);

# metExploreViz.setReactionStyle(style)

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

var style = metExploreViz.createReactionStyle("white", 14, 14, 7, 7, 1, "red", 2, "black", 5, 500, 1,
    "dbIdentifier", false);
metExploreViz.setReactionStyle(style);

# metExploreViz.setLinkStyle(style)

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

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

Find component

Some features and functions in MetExploreViz need to use component object as argument. To find and use component as object, you can used the function below.

# metExploreViz.findCmpt("componentName")

var component = metExploreViz.findCmpt("componentName");

For style change and mapping application, the following components must be used:

For reactions nodes: reactionStyleForm
For metabolites nodes: metaboliteStyleForm
For links: linkStyleForm

Get objects

Somes functions are dedicated to get metExploreViz objects like nodes or styles.

# metExploreViz.getStyles()

This function return an array that contains all styles properties.

var style = metExploreViz.getStyles();

# metExploreViz.getNodeById(nodeID, vizPanel)

This function allows you to get a specific node object by their ID.

var nodeById = metExploreViz.getNodeById("M199208", "viz");

# metExploreViz.getNodeByName(nodeName, vizPanel)

This function allows you to get a specific node object by their name.

var nodeByName = metExploreViz.getNodeByName("acetyl-CoA", "viz");

# metExploreViz.getAllNodes(vizPanel)

This function allows you to get an array that contains all nodes objects from your network.

var allNodes = metExploreViz.getAllNodes("viz");

# metExploreViz.getSessionById(vizPanel)

This function allows you to get metExploreViz session object.

metExploreViz.getSessionById("viz");

vizPanel argument corresponds to the ID you gave to the div tag of your visualization.

Workflow

metExploreViz.onloadSession function allow users to use programmatically others functions.

# metExploreViz.onloadSession(function)
This function must be used with a callback function that contains your pipeline to launch functions after launching drawing.

metExploreViz.onloadSession(function(){
    // functions
});

To fully implement this function, you must used metExploreViz.graphPanel function call refreshPanel.

GraphPanel

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

Initialisation of network visualisation

# metExploreViz.GraphPanel.refreshPanel(yourJsonString, function)

This function allows you to initiate visualisation with your data and launch function.

metExploreViz.GraphPanel.refreshPanel(myJsonString, function(){
    // functions launch before initialisation of visualisation
    metExploreViz.onloadSession(function(){
        // function launch after initialisation of visualisation
    });
});

GraphNetwork

metExploreViz.GraphNetwork provides functions dedicated to manage your network visualization.

Nodes management

Some functions are dedicated to nodes duplication and to manage side compounds.

# metExploreViz.GraphNetwork.duplicateANode(nodeObject, vizPanel)

This function allows you to duplicate node.

var node = metExploreViz.getNodeByName("acetyl-CoA");
metExploreViz.GraphNetwork.duplicateANode(node, "viz");

# metExploreViz.GraphNetwork.duplicateSideCompounds(vizPanel, callback)

This function allows you to duplicate all side compounds in your network. Callback function is optional.

metExploreViz.GraphNetwork.duplicateSideCompounds("viz", func);

# metExploreViz.GraphNetwork.duplicateSideCompoundsById(arrayId, vizPanel)

This function allows you to duplicate specific side compounds.

metExploreViz.GraphNetwork.duplicateSideCompoundsById(["M199208", "M198152"], "viz");

# metExploreViz.GraphNetwork.removeSideCompounds()

This function allows you to remove all side compounds in your network.

metExploreViz.GraphNetwork.removeSideCompounds();

Network management

Some functions are dedicated to manage global network options.

# metExploreViz.GraphNetwork.play()

This functions allows you to play or stop animations depebdubg on network state.

metExploreViz.GraphNetwork.play();

# metExploreViz.GraphNetwork.rescale(vizPanel, callback)

This function allows you to rescale network to fit with visulization div.

metExploreViz.GraphNetwork.rescale();

# metExploreViz.GraphNetwork.updateNetwork(vizPanel, vizObject)

This function allows you to update network status. For example, after side compounds duplication, you need to update your network to see modifications.

var session = metExploreViz.getSessionById("viz");
metExploreViz.GraphNetwork.updateNetwork("viz", session);

GraphNode

metExploreViz.GraphNode provides some features to manage nodes object into your network.

Find nodes

Some functions are dedicated to find and select nodes

# metExploreViz.GraphNode.highlightANode(nodeID)

This function allows you to select, fix and grow up a node.

metExploreViz.GraphNode.highlightANode("M199208");

# metExploreViz.GraphNode.searchNode(String)

This functions allows you to find and select one or several nodes with a fuzzy search.

metExploreViz.GraphNode.searchNode("acetyl");

# metExploreViz.GraphNode.selectNodesOfPathway(pathwayName, vizPanel)

This functions allows you to find and select all the nodes from a specific pathway.

metExploreViz.GraphNode.selectNodesOfPathway("formylTHF biosynthesis I", "viz");

Side compounds

Some functions are dedicated to load and set nodes as side compounds.

# metExploreViz.GraphNode.loadSideCompounds(arrayNode)

This function allows you to load a list of metabolites and set this metabolites as side compounds.

var nodeArray = ["H2O", "ATP", "ADP"];
metExploreViz.GraphNode.loadSideCompounds(nodeArray);

# metExploreViz.GraphNode.setIsSideCompoundById(idMetabolite, bool)

This function allows you to change side compound status for a specific node.

metExploreViz.GraphNode.setIsSideCompoundById("M199208", true);
metExploreViz.GraphNode.setIsSideCompoundById("M199208", false);

Refresh node visualisation

Some nodes properties change need a refresh to be applied on your network.

# metExploreViz.GraphNode.refreshNode(vizPanel)

This function allows you to refresh and update nodes properties change.

metExploreViz.GraphNode.refreshNode("viz");

GraphMapping

metExploreViz.GraphMapping provides some functions to load mapping data and map this data on nodes and/or links.

Load mapping data

Some functions are dedicated to load mapping data.

# metExploreViz.GraphMapping.loadDataFromJSON(jsonString)

This function allows you to load mapping data from a json string.

metExploreViz.GraphMapping.loadDataFromJSON(jsonString);

# metExploreViz.GraphMapping.loadDataTSV(url, callback)

This function allows you to load mapping data from a TSV file. Callback function is optional.

metExploreViz.GraphMapping.loadDataTSV(pathFile, func);

Map data

Some functions are dedicated to map data on your network.

# metExploreViz.GraphMapping.mapNodes(mappingName, callback)

This function allows you to highlight the nodes that are mapped in a given mapping. Callback function is optional.

metExploreViz.GraphMapping.loadDataTSV("mappingName");
metExploreViz.GraphMapping.mapNodes("mappingName");

# metExploreViz.GraphMapping.graphMappingContinuousData(name, cmpt, callback)

This function allows you to display mapping data through a specific style with continuous data.

// choose element (link, reaction or metabolite)
var styleForm = metExploreViz.getCmpt("linkStyleForm");
// choose specific style
var linkColorForm = styleForm.query("aStyleForm").find(function(aStyleForm){ return aStyleForm.title === "Link color" });
// launch mapping
metExploreViz.graphMappingContinuousData("mappingName / conditionName", linkColorForm);

# metExploreViz.GraphMapping.graphMappingDiscreteData(name, cmpt, callback)

This function allows you to display mapping data through a specific style with discrete data.

// choose element (link, reaction or metabolite)
var styleForm = metExploreViz.getCmpt("linkStyleForm");
// choose specific style
var linkColorForm = styleForm.query("aStyleForm").find(function(aStyleForm){ return aStyleForm.title === "Link color" });
// launch mapping
metExploreViz.graphMappingDiscreteData("mappingName / conditionName", linkColorForm);

# metExploreViz.GraphMapping.graphMappingAsSelectionData(name, cmpt, callback)

This function allows you to change specific style if element is mapped in a given mapping.

// choose element (link, reaction or metabolite)
var styleForm = metExploreViz.getCmpt("linkStyleForm");
// choose specific style
var linkColorForm = styleForm.query("aStyleForm").find(function(aStyleForm){ return aStyleForm.title === "Link color" });
// launch mapping
metExploreViz.graphMappingAsSelectionData("mappingName / conditionName", linkColorForm);

# metExploreViz.GraphMapping.mapImageToNode(fileList, label)

This function allows you to map image to specific node. The name of the file must match the name of the node on which you want to map the image, according to the choosen label. You can import one or several files.

metExploreViz.GraphMapping.mapImageToNode([pathFile1, pathFile2, ...], "name");

# metExploreViz.GraphMapping.setDiscreteMappingColor(color, mappingValue, conditionName, selectedMapping)

This function allows you to bind specific color to your mapping value.

metExploreViz.GraphMapping.setDiscreteMappingColor("#000000", "14", conditionName, mappingName);

GraphUtils

metExploreViz.GraphUtils provides some functions dedicated to save and export your visualization in differents format.

Export functions

Some functions are dedicated to export your network visulization in differents format.

# metExploreViz.GraphUtils.exportPNG(size)

This function allows you to export your network visualization as png format.

metExploreViz.GraphUtils.exportPNG(1);

# metExploreViz.GraphUtils.exportJPG(size)

This function allows you to export your network visualization as jpg format.

metExploreViz.GraphUtils.exportJPG(2);

# metExploreViz.GraphUtils.exportSVG()

This function allows you to export your network visualization as svg format.

metExploreViz.GraphUtils.exportSVG();

Save functions

Some functions are dedicated to save and download network, styles or nodes coordinates.

# metExploreViz.GraphUtils.saveNetworkDot()

This function allows you to save and download your network as dot.

metExploreViz.GraphUtils.saveNetworkDot();

# metExploreViz.GraphUtils.saveNetworkGml()

This function allows you to save and download your network as gml.

metExploreViz.GraphUtils.saveNetworkGml();

# metExploreViz.GraphUtils.saveNetworkJSON()

This function allows you to save and download your network as json.

metExploreViz.GraphUtils.saveNetworkJSON();

# metExploreViz.GraphUtils.saveNetworkCoordinates()

This function allows you to save and download nodes coordinates as json.

metExploreViz.GraphUtils.saveNetworkCoordinates();

# metExploreViz.GraphUtils.saveStyles(scaleRange, bool)

This function allows you to save and download network styles as json.

var scale = metExploreViz.getStyles();
metExploreViz.GraphUtils.saveStyles(scale, true);

API Reference