Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
metexplore
MetExploreViz
Commits
d35f7b8c
Commit
d35f7b8c
authored
Apr 07, 2020
by
maxchaza
Browse files
Documentation use new tags
parent
1de2d841
Changes
4
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
(){
hierarchicalDrawing
Tulip
:
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
({
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment