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
2d1f5c8e
Commit
2d1f5c8e
authored
Apr 15, 2020
by
maxchaza
Browse files
Ducumentation
parent
bd981be3
Changes
10
Expand all
Hide whitespace changes
Inline
Side-by-side
resources/lib/functions/GraphCaption.js
View file @
2d1f5c8e
/**
* @class metExploreD3.GraphCaption
* Drawing caption
* Add update convexhulls
* @author MC
* (a)description : Drawing caption
* @uses metExploreD3.GraphNode
* @uses metExploreD3.GraphUtils
*/
metExploreD3
.
GraphCaption
=
{
/*****************************************************
...
...
@@ -443,6 +448,7 @@ metExploreD3.GraphCaption = {
/*****************************************************
* Maj caption for convex hulls
* @param {String} panel Panel to update convex hull
*/
majCaption
:
function
(
panel
){
var
s_GeneralStyle
=
_metExploreViz
.
getGeneralStyle
();
...
...
@@ -567,6 +573,9 @@ metExploreD3.GraphCaption = {
/*****************************************************
* Maj caption color for convex hulls and links
* @param {Object} components Component to update
* @param {"Compartments"|"Pathways"} selectedComponent
* @param {String} panel Panel to update convex hull
*/
majCaptionColor
:
function
(
components
,
selectedComponent
,
panel
){
var
generalStyle
=
_metExploreViz
.
getGeneralStyle
();
...
...
@@ -621,7 +630,8 @@ metExploreD3.GraphCaption = {
},
/*****************************************************
* Draw caption of metabolic compartiments
* Draw caption of metabolic compartments
* @fires afterColorCalculating
*/
colorMetaboliteLegend
:
function
(){
// Load user's preferences
...
...
@@ -653,6 +663,7 @@ metExploreD3.GraphCaption = {
/*****************************************************
* Draw caption of pathways
* @fires afterColorCalculating
*/
colorPathwayLegend
:
function
(){
...
...
resources/lib/functions/GraphColorScaleEditor.js
View file @
2d1f5c8e
/**
* @class metExploreD3.GraphColorScaleEditor
* @author Maxime Chazalviel
*
(a)description : Style Edition
*
Manage the scale editor of colors
*/
metExploreD3
.
GraphColorScaleEditor
=
{
/**
* @property {Function} colorRange d3.scaleLinear()
* @property {Object} values
* @property {Array} colorDomain
* @property {Array} color
* @property {Function} xScale d3.scaleLinear()
* @property {Function} scaleXInPercent d3.scaleLinear()
* @property {Function} scalePercentInX d3.scaleLinear()
* @property {Object} button
* @property {Object} delButton
* @property {Number} textfieldValue
* @property {Number} valueMin
* @property {Number} valueMax
* @property {Number} selectedValue
* @property {Function} scaleValueInPercentCaption d3.scaleLinear()
* @property {Function} scalePercentInValueCaption d3.scaleLinear()
* @property {Array} colorRangeInit
* @property {Object} valuesInit
* @property {Array} colorDomainInit
* @property {Number} valueMinInit
* @property {Number} valueMaxInit
*/
colorRange
:
undefined
,
values
:
undefined
,
colorDomain
:
undefined
,
...
...
@@ -29,6 +52,14 @@ metExploreD3.GraphColorScaleEditor = {
valueMinInit
:
undefined
,
valueMaxInit
:
undefined
,
/**
*
* @param svg
* @param width
* @param height
* @param margin
* @param scaleRange
*/
createColorScaleCaption
:
function
(
svg
,
width
,
height
,
margin
,
scaleRange
){
var
me
=
this
;
...
...
@@ -140,6 +171,17 @@ metExploreD3.GraphColorScaleEditor = {
})
},
/**
*
* @param svg
* @param width
* @param height
* @param margin
* @param but
* @param textfieldValue
* @param delButton
* @param scaleRange
*/
createColorScaleEditor
:
function
(
svg
,
width
,
height
,
margin
,
but
,
textfieldValue
,
delButton
,
scaleRange
){
var
me
=
this
;
me
.
svg
=
svg
;
...
...
@@ -285,6 +327,9 @@ metExploreD3.GraphColorScaleEditor = {
me
.
update
();
},
/**
*
*/
reset
:
function
(){
var
me
=
this
;
me
.
colorRange
=
me
.
colorRangeInit
.
slice
(
0
);
...
...
@@ -297,6 +342,11 @@ metExploreD3.GraphColorScaleEditor = {
me
.
update
();
},
/**
*
* @param val
*/
updateValues
:
function
(
val
){
var
me
=
this
;
var
indexVal
=
me
.
selectedValue
-
1
;
...
...
@@ -350,11 +400,24 @@ metExploreD3.GraphColorScaleEditor = {
}
}
},
/**
*
* @param indexVal
* @param theLinearGradient
* @param deltaX
*/
updateLinearGradient
:
function
(
indexVal
,
theLinearGradient
,
deltaX
){
this
.
values
.
splice
(
indexVal
,
1
,
this
.
scalePercentInValueCaption
(
this
.
round
(
this
.
scaleXInPercent
(
d3
.
event
.
x
+
deltaX
))));
theLinearGradient
.
attr
(
"
offset
"
,
this
.
round
(
this
.
scaleXInPercent
(
d3
.
event
.
x
+
deltaX
))
+
"
%
"
);
},
/**
*
* @param color
* @param svg
*/
updateColor
:
function
(
color
,
svg
){
if
(
isNaN
(
this
.
selectedValue
)){
...
...
@@ -373,9 +436,20 @@ metExploreD3.GraphColorScaleEditor = {
this
.
update
();
}
},
/**
*
* @param operation
* @return {number}
*/
round
:
function
(
operation
){
return
Math
.
round
((
operation
)
*
100
)
/
100
;
},
/**
*
* @param svg
*/
addColor
:
function
(
svg
){
var
me
=
this
;
...
...
@@ -393,6 +467,10 @@ metExploreD3.GraphColorScaleEditor = {
me
.
update
();
},
/**
*
*/
delColor
:
function
(){
var
me
=
this
;
if
(
me
.
values
.
length
>
2
)
...
...
@@ -406,6 +484,10 @@ metExploreD3.GraphColorScaleEditor = {
me
.
update
();
}
},
/**
*
*/
update
:
function
(){
var
me
=
this
;
var
svg
=
me
.
svg
;
...
...
@@ -537,6 +619,11 @@ metExploreD3.GraphColorScaleEditor = {
},
/**
*
* @return {[]}
*/
getScaleRange
:
function
(){
var
me
=
this
;
...
...
resources/lib/functions/GraphFunction.js
View file @
2d1f5c8e
/**
* @class metExploreD3.GraphPanel
* Basic graph functions
*
* Hierarchical drawing algorithm
* Distance algorithm
* Extraction algorithm
* Cycle detection algorithm
* Alignment function
*
* @author MC
* (a)description : Basic graph functions
* @uses metExploreD3.GraphNode
* @uses metExploreD3.GraphNetwork
* @uses metExploreD3.GraphStyleEdition
* @uses metExploreD3.GraphLink
*/
metExploreD3
.
GraphFunction
=
{
/*****************************************************
...
...
@@ -216,7 +227,7 @@ metExploreD3.GraphFunction = {
/**
* Breadth First Search
* @param node
* @param
{NodeData}
node
* @returns {*|Graph}
*/
bfs
:
function
(
node
){
...
...
@@ -327,7 +338,7 @@ metExploreD3.GraphFunction = {
/**
* Highlight sinks in visualisation
* @param panel
* @param
{String}
panel
*/
highlightSink
:
function
(
panel
)
{
var
nodes
=
d3
.
select
(
"
#
"
+
panel
).
select
(
"
#D3viz
"
).
selectAll
(
"
g.node
"
);
...
...
@@ -359,7 +370,7 @@ metExploreD3.GraphFunction = {
/**
* Highlight sinks in visualisation
* @param panel
* @param
{String}
panel
*/
highlightSource
:
function
(
panel
)
{
var
nodes
=
d3
.
select
(
"
#
"
+
panel
).
select
(
"
#D3viz
"
).
selectAll
(
"
g.node
"
);
...
...
@@ -391,7 +402,7 @@ metExploreD3.GraphFunction = {
/**
* Allows horizontal alignment of selected nodes
* @param panel
* @param
{String}
panel
*/
horizontalAlign
:
function
(
panel
)
{
var
nodes
=
_metExploreViz
.
getSessionById
(
panel
).
getSelectedNodes
();
...
...
@@ -428,7 +439,7 @@ metExploreD3.GraphFunction = {
/**
* Allows vertical alignment of selected nodes
* @param panel
* @param
{String}
panel
*/
verticalAlign
:
function
(
panel
)
{
var
nodes
=
_metExploreViz
.
getSessionById
(
panel
).
getSelectedNodes
();
...
...
@@ -465,7 +476,7 @@ metExploreD3.GraphFunction = {
/**
* Inverse x axis position of selected nodes from them median x
* @param panel
* @param
{String}
panel
*/
horizontalReverse
:
function
(
panel
)
{
metExploreD3
.
GraphNode
.
fixSelectedNode
();
...
...
@@ -500,7 +511,7 @@ metExploreD3.GraphFunction = {
/**
* Inverse y axis position of selected nodes from them median y
* @param panel
* @param
{String}
panel
*/
verticalReverse
:
function
(
panel
)
{
metExploreD3
.
GraphNode
.
fixSelectedNode
();
...
...
@@ -540,9 +551,10 @@ metExploreD3.GraphFunction = {
colorDistanceOnNode
:
function
(
graph
,
func
){
var
networkData
=
_metExploreViz
.
getSessionById
(
'
viz
'
).
getD3Data
();
var
maxDistance
=
0
;
for
(
var
key
in
graph
.
nodes
)
{
var
dist
=
graph
.
nodes
[
key
].
distance
;
if
(
maxDistance
<
dist
)
for
(
var
key
in
graph
.
nodes
)
{
var
dist
=
graph
.
nodes
[
key
].
distance
;
if
(
maxDistance
<
dist
)
maxDistance
=
dist
;
networkData
.
getNodeById
(
key
).
distance
=
dist
;
}
...
...
@@ -552,7 +564,7 @@ metExploreD3.GraphFunction = {
.
range
([
"
blue
"
,
"
white
"
]);
d3
.
select
(
"
#viz
"
).
select
(
"
#D3viz
"
).
select
(
"
#graphComponent
"
).
selectAll
(
"
g.node
"
)
d3
.
select
(
"
#viz
"
).
select
(
"
#D3viz
"
).
select
(
"
#graphComponent
"
).
selectAll
(
"
g.node
"
)
.
selectAll
(
"
rect:not(.fontSelected)
"
)
.
style
(
"
fill
"
,
function
(
node
)
{
return
color
(
node
.
distance
);
});
if
(
func
!=
undefined
){
...
...
@@ -560,6 +572,9 @@ metExploreD3.GraphFunction = {
}
},
/**
* POC : Color nodes in function of graph distances
*/
test3
:
function
(){
var
networkData
=
_metExploreViz
.
getSessionById
(
'
viz
'
).
getD3Data
();
...
...
@@ -594,27 +609,17 @@ metExploreD3.GraphFunction = {
metExploreD3
.
GraphFunction
.
colorDistanceOnNode
(
finalGraph
);
});
},
testFlux
:
function
(){
var
networkData
=
_metExploreViz
.
getSessionById
(
'
viz
'
).
getD3Data
();
var
color
=
d3
.
scaleLinear
()
.
domain
([
0
,
0.1
,
0.2
,
0.5
,
1
])
.
range
([
-
30
,
-
50
,
-
60
,
-
500
-
600
]);
metExploreD3
.
getGlobals
().
getSessionById
(
'
viz
'
).
getForce
().
charge
(
function
(
node
){
var
value
=
d3
.
select
(
'
g#node
'
+
node
.
getId
()
+
'
.node
'
).
attr
(
'
opacity
'
);
var
val
=
color
(
value
);
return
val
;
});
},
/**
* POC : Color nodes in function of graph distances
*/
test
:
function
(){
var
networkData
=
_metExploreViz
.
getSessionById
(
'
viz
'
).
getD3Data
();
d3
.
select
(
"
#viz
"
).
select
(
"
#D3viz
"
).
select
(
"
#graphComponent
"
).
selectAll
(
"
g.node
"
)
.
on
(
"
click
"
,
function
(
node
){
console
.
log
(
"
test
"
);
metExploreD3
.
GraphFunction
.
colorDistanceOnNode
(
metExploreD3
.
GraphFunction
.
bfs
(
node
));
});
},
...
...
@@ -622,6 +627,7 @@ metExploreD3.GraphFunction = {
/*******************************************
* Hierarchical drawing of the current tulip network
* It uses the default algorithm provided by Tulip.js
* @deprecated
*/
hierarchicalDrawingTulip
:
function
(){
var
algo
=
"
Hierarchical Tree (R-T Extended)
"
;
...
...
@@ -633,6 +639,7 @@ metExploreD3.GraphFunction = {
/*******************************************
* Sugiyama (OGDF) drawing of the current tulip network
* It uses the default algorithm provided by Tulip.js
* @deprecated
*/
sugiyamaDrawing
:
function
(){
var
algo
=
"
Sugiyama (OGDF)
"
;
...
...
@@ -646,6 +653,7 @@ metExploreD3.GraphFunction = {
/*******************************************
* Betweenness Centrality of the current tulip network
* It uses the default algorithm provided by Tulip.js
* @deprecated
*/
betweennessCentrality
:
function
(){
var
algo
=
"
Betweenness Centrality
"
;
...
...
@@ -658,6 +666,7 @@ metExploreD3.GraphFunction = {
/*******************************************
* Layout drawing application provided by the tulip.js library
* @deprecated
*/
applyTulipLayoutAlgorithmInWorker
:
function
(
algo
,
parameters
)
{
...
...
@@ -792,6 +801,7 @@ metExploreD3.GraphFunction = {
/*******************************************
* Algorithms provided by the tulip.js library
* @deprecated
*/
applyTulipDoubleAlgorithmInWorker
:
function
(
algo
,
parameters
)
{
...
...
@@ -940,25 +950,13 @@ metExploreD3.GraphFunction = {
}
},
drawNetwork
:
function
()
{
},
randomDrawing
:
function
()
{
},
// Force based drawing
// Use the arbor version of the algorithm provided by
// Cytoscape
// If there are more than maxDisplayedLabels,then the
// animation is not used
stopSpringDrawing
:
function
()
{
},
/**
* Extract a subnetwork based on lightest path length
* between each pair of selected nodes it returns a graph
* where nodes have a subnet attribute telling wether they
* are in subnet or not
* @param {Graph} graph Network structure
* @param {Array} nodeToLink Array of node ids
*/
extractSubNetwork
:
function
(
graph
,
nodeToLink
)
{
var
session
=
_metExploreViz
.
getSessionById
(
'
viz
'
);
...
...
@@ -1140,7 +1138,10 @@ metExploreD3.GraphFunction = {
}
},
/**
* Build Directed graph from visualisation
* @return {Graph}
*/
getGraph
:
function
()
{
var
session
=
_metExploreViz
.
getSessionById
(
'
viz
'
);
var
graph
=
new
Graph
();
...
...
@@ -1183,6 +1184,10 @@ metExploreD3.GraphFunction = {
return
graph
;
},
/**
* Build Not Directed graph from visualisation
* @return {Graph}
*/
getGraphNotDirected
:
function
()
{
var
session
=
_metExploreViz
.
getSessionById
(
'
viz
'
);
var
graph
=
new
Graph
();
...
...
@@ -1207,10 +1212,15 @@ metExploreD3.GraphFunction = {
return
graph
;
},
// Once the shortest path is computed, we have, for each
// node on the path its predecessor
// It is necessary to go backward in order to get the right
// path
/**
* Once the shortest path is computed, we have, for each
* node on the path its predecessor
* It is necessary to go backward in order to get the right path
* @param {Graph} graph
* @param {Number} nodeJid
* @return {any[]}
*/
getPathBasedOnPredecessors
:
function
(
graph
,
nodeJid
)
{
var
path
=
new
Array
();
// get the path from I to J
...
...
@@ -1242,6 +1252,7 @@ metExploreD3.GraphFunction = {
/**
* Hihglight nodes and edges belonging to a subnetwork
* @param {Array} nodeToLink Array of node ids
*/
keepOnlySubnetwork
:
function
(
nodeToLink
)
{
var
session
=
_metExploreViz
.
getSessionById
(
'
viz
'
);
...
...
@@ -1376,6 +1387,7 @@ metExploreD3.GraphFunction = {
/**
* Hihglight nodes and edges belonging to a subnetwork
* @param {Array} nodeToLink Array of node ids
*/
highlightSubnetwork
:
function
(
nodeToLink
)
{
var
session
=
_metExploreViz
.
getSessionById
(
'
viz
'
);
...
...
@@ -2662,4 +2674,4 @@ metExploreD3.GraphFunction = {
});
return
result
;
}
}
\ No newline at end of file
};
\ No newline at end of file
resources/lib/functions/GraphLink.js
View file @
2d1f5c8e
/**
* @author MC
* Links drawing
*
* Links initialization
* Add, update and remove links
* Tick of links
* Drawing functions for links
* Add, update and remove links convex hull (to refactor in other file)
*
* @uses metExploreD3.GraphUtil
* @uses metExploreD3.GraphStyleEdition
...
...
resources/lib/functions/GraphMapping.js
View file @
2d1f5c8e
This diff is collapsed.
Click to expand it.
resources/lib/functions/GraphNetwork.js
View file @
2d1f5c8e
...
...
@@ -1332,6 +1332,7 @@ metExploreD3.GraphNetwork = {
/*******************************************
* Refresh the graph data, it generate graph visualization
* @param {String} panel : The panel to refresh
* @throws error in function
*/
refreshViz
:
function
(
panel
){
var
mask
=
metExploreD3
.
createLoadMask
(
"
Draw graph
"
,
panel
);
...
...
resources/lib/functions/GraphNode.js
View file @
2d1f5c8e
/**
* @author MC
* Nodes drawing
*
* Node Events and Interactions initialisation
* Add, update and remove nodes
* Tick of nodes
* Search and highlight nodes
*
* @uses metExploreD3.GraphLink
* @uses metExploreD3.GraphPanel
...
...
resources/lib/functions/GraphNumberScaleEditor.js
View file @
2d1f5c8e
/**
* @class metExploreD3.GraphColorScaleEditor
* @author Maxime Chazalviel
*
(a)description : Sty
le
E
dit
ion
*
Manage the sca
le
e
dit
or of numbers
*/
metExploreD3
.
GraphNumberScaleEditor
=
{
...
...
resources/lib/functions/GraphPanel.js
View file @
2d1f5c8e
...
...
@@ -304,6 +304,7 @@ metExploreD3.GraphPanel = {
* Fill the data models imported from JSON file
* @param {Object} json JSON to load
* @param {Function} endFunc Callback function
* @fires loadNetworkBiosource jsoninit initiateviz sideCompound jsonmapping reloadMapping closeMapping
* @private
*/
loadDataJSON
:
function
(
json
,
endFunc
){
...
...
@@ -586,6 +587,7 @@ metExploreD3.GraphPanel = {
* Fill the data models with the store reaction
* @param {Object} json JSON to load
* @param {Function} func Callback function
* @fires loadNetworkBiosource jsoninit jsonmapping
* @private
*/
initDataJSON
:
function
(
json
,
func
){
...
...
@@ -724,6 +726,7 @@ metExploreD3.GraphPanel = {
/*****************************************************
* Initialization of visualization
* @param {String} vizEngine : library used to make the visualization
* @fires initiateviz
* @private
*/
initiateViz
:
function
(
vizEngine
)
{
...
...
resources/lib/functions/GraphStyleEdition.js
View file @
2d1f5c8e
...
...
@@ -2,6 +2,10 @@
* @class metExploreD3.GraphStyleEdition
* Style Edition
*
* Manage label edition mode
* Manage image mapping
* Generic functions to set elements styles
*
* @author Adrien Rohan
*
* @uses metExploreD3.GraphLink
...
...
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