Everything in MetExploreViz is scoped under the metExploreViz
namespace.
See one of:
metExploreViz
provides some features to manage the style of the visualisation and general functions
In MetExploreViz, you can manage and change 4 differents style:
var GeneralStyle = function(siteName, minContinuous, maxContinuous, max, dispLabel, dispLink,
dispConvexhull, dispPathwaysOnLinks, clust, dispCaption, eventForNodeInfo, loadButtonHidden,
windowsAlertDisable){
// ...
};
var MetaboliteStyle = function(backgroundColor, height, width, rx, ry, opacity, strokeColor,
strokeWidth, fontColor, fontSize, fontWeight, labelOpacity, displayNodeName, useAlias){
// ...
};
var ReactionStyle = function(backgroundColor, height, width, rx, ry, opacity, strokeColor,
strokeWidth, fontColor, fontSize, fontWeight, labelOpacity, displayNodeName, useAlias){
// ...
};
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);
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:
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.
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.
metExploreViz.GraphPanel provides some features to manage the window where is integrated MetExploreViz
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
});
});
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();
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);
metExploreViz.GraphNode provides some features to manage nodes object into your network.
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");
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);
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");
metExploreViz.GraphMapping provides some functions to load mapping data and map this data on nodes and/or links.
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);
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);
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();
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);