Skip to content
GitLab
Commit d35f7b8c authored by maxchaza's avatar maxchaza
Browse files

Documentation use new tags

parent 1de2d841
Hide whitespace changes
Inline Side-by-side
resources/lib/functions/Features.js
View file @ d35f7b8c
/**
* @class metExploreD3.Features
* Feature flipping allows to enable function in function of user
* @author MC
* (a)description : Feature flipping allows to enable function in function of user
* @experimental
*/
metExploreD3.Features = {
......
resources/lib/functions/GraphFunction.js
View file @ d35f7b8c
......@@ -5,6 +5,215 @@
metExploreD3.GraphFunction = {
/*****************************************************
* Draw network in a hierarchical way
*/
hierarchicalDrawing : function() {
//graph structure used by dagre library (and behind graphviz) to compute the drawing
var graph = new dagre.graphlib.Graph().setGraph({});
var session = _metExploreViz.getSessionById('viz');
//create the graph structure from the MetExploreViz graph
//In order to reduce the number of layers, we won't consider all ther reactions to be nodes in the dagre graph
//If a reaction has only one substrate and one product (two connected links), we won't use it in the computation
//Algorithm is as follow:
//For each reaction node in the original graph
// if the node has two links
// if it is the first time we visit the reaction
// add the substrate as a node in the graph
// add the product as a node in the graph
// add the edge (substrate,product) in the graph
// set the label of the edge as the id of the reaction
// else
// find the reaciton r corresponding to the edge in the graph which has the same substrate and product
// add the current reaction to the associated reaction list of r
// else
// for each link connected to the reaction
// add the metabolite to the graph
// add the reaction to the graph
// add the edge (metabolite,reaction) to the graph
session.getD3Data().getNodes()
.filter(function (node){return node.biologicalType=="reaction" && !node.isHidden();})
.filter(function (node){
// check if the reaction has only one substrate and one product
var connectedLinks=session.getD3Data().getLinks()
.filter(function(link){
return (link.source == node) || (link.target == node);
});
//console.log(connectedLinks);
if(connectedLinks.length==2){
//the node won't be used in the computation so we are going to add the source and the target and connect them
//For each of both links, get the source node and target nodes
var source;
var target;
connectedLinks.forEach(function(link){
if(link.source == node){
target=link.getTarget();
}
if(link.target == node){
source=link.getSource();
}
});
if(source && target) {
var sourceNode = graph.setNode(source, {label: source.id});
var targetNode = graph.setNode(target, {label: target.id});
if (graph.edge(source, target)) {
//The label of the reaction which has the same substrate and product and is already in the graph.
var referenceReactionLabel = graph.edge(source, target).label;
var referenceNode = session.getD3Data().getNodes()
.find(function (n) {
return n.id == referenceReactionLabel;
});
//if the edge is already in the graph we have to store the reaction since it won't be placed in the final view.
//indeed dagre doesn't allow multi-edges.
// who have to associate the current reaction to the one that will be drawn
if (!referenceNode.associatedReactions) {
var associatedReactions = [];
referenceNode.associatedReactions = associatedReactions;
referenceNode.associatedReactions.push(node);
}
else {
referenceNode.associatedReactions.push(node);
}
}
else {
graph.setEdge(source.id, target.id, {label: node.getId()});
}
}
}
else{
//Add the reaction to the node list
//add connection to the reaction and substrate product
connectedLinks.forEach(function(link){
graph.setNode(link.getSource(), {label:link.getSource().id});
graph.setNode(link.getTarget(), {label:link.getTarget().id});
graph.setEdge(link.getSource().id, link.getTarget().id, { label: link.getSource().id+' -- '+link.getTarget().id });
});
}
});
var layout=dagre.layout(graph);
//-----Drawing the graph
//For each node of the visualised graph
// if the node is in the Dagre graph
// use the Dagre coordinates to draw the node
// else
// for each edge
// if the edge has a reaction as a label (it means this reaction has no corresponding node in the Dagre graph)
// affect to the coordinates of the first bend to the reaction
// for r=0 to the size of associated reaction AR table
// set same y to AR[r]
// set AR[r].x <- x+ 10*(AR[r]+1)
d3.select("#viz").select("#D3viz").select("#graphComponent").selectAll("g.node")
.each(function(node){
//place nodes that were in the graph
if(graph.node(node)){
var x;
var y;
graph.nodes().forEach(function(n) {
var nodeG = graph.node(n);
if(nodeG.label === node.getId())
{
x=nodeG.x;
y=nodeG.y;
}
});
node.px = x;
node.py = y;
node.x = x;
node.y = y;
node.setLocked(true);
node.fixed=node.isLocked();
metExploreD3.GraphNode.fixNode(node);
}
//place nodes that were not in the graph
else
{
for(label in graph._edgeLabels){
//look for the edge where the node is located
var edgeLabel=graph._edgeLabels[label].label;
if(edgeLabel == node.getId()){
node.px = graph._edgeLabels[label].points[1].x;
node.py = graph._edgeLabels[label].points[1].y;
node.x = graph._edgeLabels[label].points[1].x;
node.y = graph._edgeLabels[label].points[1].y;
node.setLocked(true);
node.fixed=node.isLocked();
metExploreD3.GraphNode.fixNode(node);
if(node.associatedReactions){
for(associated in node.associatedReactions){
var associatedNode=node.associatedReactions[associated];
associatedNode.px=node.px+10*(associated+1);
associatedNode.py=node.py;
associatedNode.x=node.x+10*(associated+1);
associatedNode.y=node.y;
associatedNode.setLocked(true);
associatedNode.fixed=associatedNode.isLocked();
metExploreD3.GraphNode.fixNode(associatedNode);
}
}
}
}
}
});
metExploreD3.GraphNetwork.tick("viz");
// d3.select("#viz").select("#D3viz").select("#graphComponent").selectAll("path.link.reaction")
// .each(function(link){
// //console.log("---draw edges");
// var source=link.getSource();
// console.log(source.getId())
// var target=link.getTarget();
// // for all the edges in the Dagre graph
// // if it corresponds to a link
// // Draw the liknk with the points of the Dagre graph.
// for(label in graph._edgeLabels){
// //look for the edge where the node is located
// var edgeSource=graph._edgeLabels[label].label.split(" -- ")[0];
// var edgeTarget=graph._edgeLabels[label].label.split(" -- ")[1];
// if(edgeSource==source.getId() && edgeTarget==target.getId()){
// //get coordinates in DAGRE
// //console.log(link);
// console.log(d3.select(this).attr("d"));
// var lineData = [ { "x": 120, "y": 20}, { "x": 120, "y": 100},
// { "x": 40, "y": 100}, { "x": 40, "y": 180},
// { "x": 500, "y": 180}, { "x": 500, "y": 100}];
// var lineFunction = d3.svg.line()
// .x(function(d) { return d.x; })
// .y(function(d) { return d.y; })
// .interpolate("linear");
// d3.select(this).attr("d",lineFunction(lineData));
// console.log("after",d3.select(this).attr("d"));
// //d3.select(this).attr("d", );
// }
// }
// });
},
/**
* Breadth First Search
* @param node
......@@ -414,7 +623,7 @@ metExploreD3.GraphFunction = {
* Hierarchical drawing of the current tulip network
* It uses the default algorithm provided by Tulip.js
*/
hierarchicalDrawing : function(){
hierarchicalDrawingTulip : function(){
var algo = "Hierarchical Tree (R-T Extended)";
var params = [];
params.push({"name":"node spacing", "value":50});
......
resources/lib/functions/GraphNode.js
View file @ d35f7b8c
/**
* @author MC
* (a)description : Nodes drawing
* Nodes drawing
* @property {Number}
*/
metExploreD3.GraphNode = {
......
resources/lib/functions/GraphUtils.js
View file @ d35f7b8c
/**
* @class metExploreD3.GraphUtils
* Basic functions
* @author MC
* (a)description : Basic functions
*/
metExploreD3.GraphUtils = {
decodeJSON : function(json){
/*****************************************************
* Decode external JSONs
* @param {String} json Active string from imports
*/
decodeJSON : function(json){
try {
var jsonParsed = Ext.decode(json);
}
......@@ -12,6 +18,20 @@ metExploreD3.GraphUtils = {
}
return jsonParsed;
},
/*****************************************************
* Decode external JSONs
* @param {String} url WebService to call https://vm-metexplore-prod.toulouse.inra.fr/metexplore-webservice-documentation/
* @param {Function} func Callback function
*
* Example :
* @example
* metExploreViz.GraphUtils.launchWebService(
* "http://metexplore.toulouse.inra.fr:8080/metExploreWebService/mapping/graphresult/38285/filteredbypathway?pathwayidlist=(123757,123787)",
* function(myJsonString){
* })
*
*/
launchWebService : function(url, func){
//var mapJSON = '{"name": "mapping_D-Galactose", "mappings":[{"name": "conditionName1", "data": [{"node" : "D-Galactose"}, {"node" : "D-galactose"}] }]}';
$.ajax({
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment