Commit 2d1f5c8e authored by maxchaza's avatar maxchaza
Browse files

Ducumentation

parent bd981be3
/** /**
* @class metExploreD3.GraphCaption
* Drawing caption
* Add update convexhulls
* @author MC * @author MC
* (a)description : Drawing caption * @uses metExploreD3.GraphNode
* @uses metExploreD3.GraphUtils
*/ */
metExploreD3.GraphCaption = { metExploreD3.GraphCaption = {
/***************************************************** /*****************************************************
...@@ -443,6 +448,7 @@ metExploreD3.GraphCaption = { ...@@ -443,6 +448,7 @@ metExploreD3.GraphCaption = {
/***************************************************** /*****************************************************
* Maj caption for convex hulls * Maj caption for convex hulls
* @param {String} panel Panel to update convex hull
*/ */
majCaption : function(panel){ majCaption : function(panel){
var s_GeneralStyle = _metExploreViz.getGeneralStyle(); var s_GeneralStyle = _metExploreViz.getGeneralStyle();
...@@ -567,6 +573,9 @@ metExploreD3.GraphCaption = { ...@@ -567,6 +573,9 @@ metExploreD3.GraphCaption = {
/***************************************************** /*****************************************************
* Maj caption color for convex hulls and links * 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){ majCaptionColor : function(components, selectedComponent, panel){
var generalStyle = _metExploreViz.getGeneralStyle(); var generalStyle = _metExploreViz.getGeneralStyle();
...@@ -621,7 +630,8 @@ metExploreD3.GraphCaption = { ...@@ -621,7 +630,8 @@ metExploreD3.GraphCaption = {
}, },
/***************************************************** /*****************************************************
* Draw caption of metabolic compartiments * Draw caption of metabolic compartments
* @fires afterColorCalculating
*/ */
colorMetaboliteLegend : function(){ colorMetaboliteLegend : function(){
// Load user's preferences // Load user's preferences
...@@ -653,6 +663,7 @@ metExploreD3.GraphCaption = { ...@@ -653,6 +663,7 @@ metExploreD3.GraphCaption = {
/***************************************************** /*****************************************************
* Draw caption of pathways * Draw caption of pathways
* @fires afterColorCalculating
*/ */
colorPathwayLegend : function(){ colorPathwayLegend : function(){
......
/** /**
* @class metExploreD3.GraphColorScaleEditor
* @author Maxime Chazalviel * @author Maxime Chazalviel
* (a)description : Style Edition * Manage the scale editor of colors
*/ */
metExploreD3.GraphColorScaleEditor = { 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, colorRange: undefined,
values: undefined, values: undefined,
colorDomain: undefined, colorDomain: undefined,
...@@ -29,6 +52,14 @@ metExploreD3.GraphColorScaleEditor = { ...@@ -29,6 +52,14 @@ metExploreD3.GraphColorScaleEditor = {
valueMinInit: undefined, valueMinInit: undefined,
valueMaxInit: undefined, valueMaxInit: undefined,
/**
*
* @param svg
* @param width
* @param height
* @param margin
* @param scaleRange
*/
createColorScaleCaption : function(svg, width, height, margin, scaleRange){ createColorScaleCaption : function(svg, width, height, margin, scaleRange){
var me = this; var me = this;
...@@ -140,6 +171,17 @@ metExploreD3.GraphColorScaleEditor = { ...@@ -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){ createColorScaleEditor : function(svg, width, height, margin, but, textfieldValue, delButton, scaleRange){
var me = this; var me = this;
me.svg=svg; me.svg=svg;
...@@ -285,6 +327,9 @@ metExploreD3.GraphColorScaleEditor = { ...@@ -285,6 +327,9 @@ metExploreD3.GraphColorScaleEditor = {
me.update(); me.update();
}, },
/**
*
*/
reset : function(){ reset : function(){
var me = this; var me = this;
me.colorRange = me.colorRangeInit.slice(0); me.colorRange = me.colorRangeInit.slice(0);
...@@ -297,6 +342,11 @@ metExploreD3.GraphColorScaleEditor = { ...@@ -297,6 +342,11 @@ metExploreD3.GraphColorScaleEditor = {
me.update(); me.update();
}, },
/**
*
* @param val
*/
updateValues : function(val){ updateValues : function(val){
var me = this; var me = this;
var indexVal = me.selectedValue-1; var indexVal = me.selectedValue-1;
...@@ -350,11 +400,24 @@ metExploreD3.GraphColorScaleEditor = { ...@@ -350,11 +400,24 @@ metExploreD3.GraphColorScaleEditor = {
} }
} }
}, },
/**
*
* @param indexVal
* @param theLinearGradient
* @param deltaX
*/
updateLinearGradient : function(indexVal,theLinearGradient, deltaX){ updateLinearGradient : function(indexVal,theLinearGradient, deltaX){
this.values.splice(indexVal, 1, this.scalePercentInValueCaption(this.round(this.scaleXInPercent(d3.event.x+deltaX)))); this.values.splice(indexVal, 1, this.scalePercentInValueCaption(this.round(this.scaleXInPercent(d3.event.x+deltaX))));
theLinearGradient theLinearGradient
.attr("offset", this.round(this.scaleXInPercent(d3.event.x+deltaX))+"%"); .attr("offset", this.round(this.scaleXInPercent(d3.event.x+deltaX))+"%");
}, },
/**
*
* @param color
* @param svg
*/
updateColor : function(color, svg){ updateColor : function(color, svg){
if(isNaN(this.selectedValue)){ if(isNaN(this.selectedValue)){
...@@ -373,9 +436,20 @@ metExploreD3.GraphColorScaleEditor = { ...@@ -373,9 +436,20 @@ metExploreD3.GraphColorScaleEditor = {
this.update(); this.update();
} }
}, },
/**
*
* @param operation
* @return {number}
*/
round : function(operation){ round : function(operation){
return Math.round((operation) * 100) / 100; return Math.round((operation) * 100) / 100;
}, },
/**
*
* @param svg
*/
addColor : function(svg){ addColor : function(svg){
var me = this; var me = this;
...@@ -393,6 +467,10 @@ metExploreD3.GraphColorScaleEditor = { ...@@ -393,6 +467,10 @@ metExploreD3.GraphColorScaleEditor = {
me.update(); me.update();
}, },
/**
*
*/
delColor : function(){ delColor : function(){
var me = this; var me = this;
if(me.values.length>2) if(me.values.length>2)
...@@ -406,6 +484,10 @@ metExploreD3.GraphColorScaleEditor = { ...@@ -406,6 +484,10 @@ metExploreD3.GraphColorScaleEditor = {
me.update(); me.update();
} }
}, },
/**
*
*/
update : function(){ update : function(){
var me = this; var me = this;
var svg = me.svg; var svg = me.svg;
...@@ -537,6 +619,11 @@ metExploreD3.GraphColorScaleEditor = { ...@@ -537,6 +619,11 @@ metExploreD3.GraphColorScaleEditor = {
}, },
/**
*
* @return {[]}
*/
getScaleRange: function(){ getScaleRange: function(){
var me = this; var me = this;
......
/** /**
* @class metExploreD3.GraphPanel
* Basic graph functions
*
* Hierarchical drawing algorithm
* Distance algorithm
* Extraction algorithm
* Cycle detection algorithm
* Alignment function
*
* @author MC * @author MC
* (a)description : Basic graph functions * @uses metExploreD3.GraphNode
* @uses metExploreD3.GraphNetwork
* @uses metExploreD3.GraphStyleEdition
* @uses metExploreD3.GraphLink
*/ */
metExploreD3.GraphFunction = { metExploreD3.GraphFunction = {
/***************************************************** /*****************************************************
...@@ -216,7 +227,7 @@ metExploreD3.GraphFunction = { ...@@ -216,7 +227,7 @@ metExploreD3.GraphFunction = {
/** /**
* Breadth First Search * Breadth First Search
* @param node * @param {NodeData} node
* @returns {*|Graph} * @returns {*|Graph}
*/ */
bfs : function (node){ bfs : function (node){
...@@ -327,7 +338,7 @@ metExploreD3.GraphFunction = { ...@@ -327,7 +338,7 @@ metExploreD3.GraphFunction = {
/** /**
* Highlight sinks in visualisation * Highlight sinks in visualisation
* @param panel * @param {String} panel
*/ */
highlightSink : function(panel) { highlightSink : function(panel) {
var nodes=d3.select("#"+panel).select("#D3viz").selectAll("g.node"); var nodes=d3.select("#"+panel).select("#D3viz").selectAll("g.node");
...@@ -359,7 +370,7 @@ metExploreD3.GraphFunction = { ...@@ -359,7 +370,7 @@ metExploreD3.GraphFunction = {
/** /**
* Highlight sinks in visualisation * Highlight sinks in visualisation
* @param panel * @param {String} panel
*/ */
highlightSource : function(panel) { highlightSource : function(panel) {
var nodes=d3.select("#"+panel).select("#D3viz").selectAll("g.node"); var nodes=d3.select("#"+panel).select("#D3viz").selectAll("g.node");
...@@ -391,7 +402,7 @@ metExploreD3.GraphFunction = { ...@@ -391,7 +402,7 @@ metExploreD3.GraphFunction = {
/** /**
* Allows horizontal alignment of selected nodes * Allows horizontal alignment of selected nodes
* @param panel * @param {String} panel
*/ */
horizontalAlign : function(panel) { horizontalAlign : function(panel) {
var nodes = _metExploreViz.getSessionById(panel).getSelectedNodes(); var nodes = _metExploreViz.getSessionById(panel).getSelectedNodes();
...@@ -428,7 +439,7 @@ metExploreD3.GraphFunction = { ...@@ -428,7 +439,7 @@ metExploreD3.GraphFunction = {
/** /**
* Allows vertical alignment of selected nodes * Allows vertical alignment of selected nodes
* @param panel * @param {String} panel
*/ */
verticalAlign : function(panel) { verticalAlign : function(panel) {
var nodes = _metExploreViz.getSessionById(panel).getSelectedNodes(); var nodes = _metExploreViz.getSessionById(panel).getSelectedNodes();
...@@ -465,7 +476,7 @@ metExploreD3.GraphFunction = { ...@@ -465,7 +476,7 @@ metExploreD3.GraphFunction = {
/** /**
* Inverse x axis position of selected nodes from them median x * Inverse x axis position of selected nodes from them median x
* @param panel * @param {String} panel
*/ */
horizontalReverse : function(panel) { horizontalReverse : function(panel) {
metExploreD3.GraphNode.fixSelectedNode(); metExploreD3.GraphNode.fixSelectedNode();
...@@ -500,7 +511,7 @@ metExploreD3.GraphFunction = { ...@@ -500,7 +511,7 @@ metExploreD3.GraphFunction = {
/** /**
* Inverse y axis position of selected nodes from them median y * Inverse y axis position of selected nodes from them median y
* @param panel * @param {String} panel
*/ */
verticalReverse : function(panel) { verticalReverse : function(panel) {
metExploreD3.GraphNode.fixSelectedNode(); metExploreD3.GraphNode.fixSelectedNode();
...@@ -540,9 +551,10 @@ metExploreD3.GraphFunction = { ...@@ -540,9 +551,10 @@ metExploreD3.GraphFunction = {
colorDistanceOnNode : function(graph, func){ colorDistanceOnNode : function(graph, func){
var networkData = _metExploreViz.getSessionById('viz').getD3Data(); var networkData = _metExploreViz.getSessionById('viz').getD3Data();
var maxDistance = 0; var maxDistance = 0;
for (var key in graph.nodes) { for (var key in graph.nodes) {
var dist = graph.nodes[key].distance; var dist = graph.nodes[key].distance;
if(maxDistance<dist)
if(maxDistance<dist)
maxDistance=dist; maxDistance=dist;
networkData.getNodeById(key).distance = dist; networkData.getNodeById(key).distance = dist;
} }
...@@ -552,7 +564,7 @@ metExploreD3.GraphFunction = { ...@@ -552,7 +564,7 @@ metExploreD3.GraphFunction = {
.range(["blue", "white"]); .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); }); .style("fill", function(node) { return color(node.distance); });
if(func!=undefined){ if(func!=undefined){
...@@ -560,6 +572,9 @@ metExploreD3.GraphFunction = { ...@@ -560,6 +572,9 @@ metExploreD3.GraphFunction = {
} }
}, },
/**
* POC : Color nodes in function of graph distances
*/
test3 : function(){ test3 : function(){
var networkData = _metExploreViz.getSessionById('viz').getD3Data(); var networkData = _metExploreViz.getSessionById('viz').getD3Data();
...@@ -594,27 +609,17 @@ metExploreD3.GraphFunction = { ...@@ -594,27 +609,17 @@ metExploreD3.GraphFunction = {
metExploreD3.GraphFunction.colorDistanceOnNode(finalGraph); metExploreD3.GraphFunction.colorDistanceOnNode(finalGraph);
}); });
}, },
testFlux : function(){
/**
var networkData = _metExploreViz.getSessionById('viz').getD3Data(); * POC : Color nodes in function of graph distances
*/
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;
});
},
test : function(){ test : function(){
var networkData = _metExploreViz.getSessionById('viz').getD3Data(); var networkData = _metExploreViz.getSessionById('viz').getD3Data();
d3.select("#viz").select("#D3viz").select("#graphComponent").selectAll("g.node") d3.select("#viz").select("#D3viz").select("#graphComponent").selectAll("g.node")
.on("click", function(node){ .on("click", function(node){
console.log("test");
metExploreD3.GraphFunction.colorDistanceOnNode(metExploreD3.GraphFunction.bfs(node)); metExploreD3.GraphFunction.colorDistanceOnNode(metExploreD3.GraphFunction.bfs(node));
}); });
}, },
...@@ -622,6 +627,7 @@ metExploreD3.GraphFunction = { ...@@ -622,6 +627,7 @@ metExploreD3.GraphFunction = {
/******************************************* /*******************************************
* Hierarchical drawing of the current tulip network * Hierarchical drawing of the current tulip network
* It uses the default algorithm provided by Tulip.js * It uses the default algorithm provided by Tulip.js
* @deprecated
*/ */
hierarchicalDrawingTulip : function(){ hierarchicalDrawingTulip : function(){
var algo = "Hierarchical Tree (R-T Extended)"; var algo = "Hierarchical Tree (R-T Extended)";
...@@ -633,6 +639,7 @@ metExploreD3.GraphFunction = { ...@@ -633,6 +639,7 @@ metExploreD3.GraphFunction = {
/******************************************* /*******************************************
* Sugiyama (OGDF) drawing of the current tulip network * Sugiyama (OGDF) drawing of the current tulip network
* It uses the default algorithm provided by Tulip.js * It uses the default algorithm provided by Tulip.js
* @deprecated
*/ */
sugiyamaDrawing : function(){ sugiyamaDrawing : function(){
var algo = "Sugiyama (OGDF)"; var algo = "Sugiyama (OGDF)";
...@@ -646,6 +653,7 @@ metExploreD3.GraphFunction = { ...@@ -646,6 +653,7 @@ metExploreD3.GraphFunction = {
/******************************************* /*******************************************
* Betweenness Centrality of the current tulip network * Betweenness Centrality of the current tulip network
* It uses the default algorithm provided by Tulip.js * It uses the default algorithm provided by Tulip.js
* @deprecated
*/ */
betweennessCentrality : function(){ betweennessCentrality : function(){
var algo = "Betweenness Centrality"; var algo = "Betweenness Centrality";
...@@ -658,6 +666,7 @@ metExploreD3.GraphFunction = { ...@@ -658,6 +666,7 @@ metExploreD3.GraphFunction = {
/******************************************* /*******************************************
* Layout drawing application provided by the tulip.js library * Layout drawing application provided by the tulip.js library
* @deprecated
*/ */
applyTulipLayoutAlgorithmInWorker : function(algo, parameters) { applyTulipLayoutAlgorithmInWorker : function(algo, parameters) {
...@@ -792,6 +801,7 @@ metExploreD3.GraphFunction = { ...@@ -792,6 +801,7 @@ metExploreD3.GraphFunction = {
/******************************************* /*******************************************
* Algorithms provided by the tulip.js library * Algorithms provided by the tulip.js library
* @deprecated
*/ */
applyTulipDoubleAlgorithmInWorker : function(algo, parameters) { applyTulipDoubleAlgorithmInWorker : function(algo, parameters) {
...@@ -940,25 +950,13 @@ metExploreD3.GraphFunction = { ...@@ -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 * Extract a subnetwork based on lightest path length
* between each pair of selected nodes it returns a graph * between each pair of selected nodes it returns a graph
* where nodes have a subnet attribute telling wether they * where nodes have a subnet attribute telling wether they
* are in subnet or not * are in subnet or not
* @param {Graph} graph Network structure
* @param {Array} nodeToLink Array of node ids
*/ */
extractSubNetwork : function(graph, nodeToLink) { extractSubNetwork : function(graph, nodeToLink) {
var session = _metExploreViz.getSessionById('viz'); var session = _metExploreViz.getSessionById('viz');
...@@ -1140,7 +1138,10 @@ metExploreD3.GraphFunction = { ...@@ -1140,7 +1138,10 @@ metExploreD3.GraphFunction = {
} }
}, },
/**
* Build Directed graph from visualisation
* @return {Graph}
*/
getGraph : function() { getGraph : function() {
var session = _metExploreViz.getSessionById( 'viz');