Commit 17602346 authored by maxchaza's avatar maxchaza
Browse files

Documentation of GraphNetwork

parent b202afa0
/**
* @author MC
* (a)description : Tu manage the metabolic network
* To manage the metabolic network
*
* Events & Interactions initialization
* Comparison functions : alignments, link
* Refresh viz & Tick of animation
* Node & Link operations (maybe to pass in GraphNode and GraphLink)
*
* @property {Function} [task=""]
* @property {Boolean} [brushing=false]
* @property {Function} [brushEvnt=undefined]
* @property {Function} [taskZoom=""]
* @property {Boolean} [first=true]
* @property {Boolean} [focus=false]
* @property {Boolean} [scrollable=false]
*
* @uses metExploreD3.GraphLink
* @uses metExploreD3.GraphNode
* @uses metExploreD3.GraphStyleEdition
* @uses metExploreD3.GraphPanel
* @uses metExploreD3.GraphUtils
* @uses metExploreD3.GraphCaption
* @uses metExploreD3.GraphFunction
*/
metExploreD3.GraphNetwork = {
task:"",
......@@ -16,7 +36,7 @@ metExploreD3.GraphNetwork = {
scrollable: false,
/*******************************************
* Initialization of variables
* @param {string} panel : The panel where are the node
* @param {String} panel The panel where are the node
*/
delayedInitialisation : function(panel) {
......@@ -41,7 +61,7 @@ metExploreD3.GraphNetwork = {
/*******************************************
* Refresh the graph interface & resize it if it's big at the beginnning
* @param {string} panel : The panel to refresh
* @param {string} panel The panel to refresh
*/
tick : function(panel){
if((_metExploreViz.getComparedPanelById(panel)!==null || panel==="viz") && _metExploreViz.getSessionById(panel).getForce()){
......@@ -78,7 +98,6 @@ metExploreD3.GraphNetwork = {
}
}
}
}
// Control if the user can see all the graph
......@@ -86,77 +105,15 @@ metExploreD3.GraphNetwork = {
session.setResizable(false);
metExploreD3.GraphNetwork.task.cancel();
metExploreD3.GraphNetwork.rescale(panel);
// metExploreD3.GraphNetwork.task.cancel();
// var vizRect = document.getElementById(panel).getBoundingClientRect();
// var graphComponent = d3.select("#"+panel).select("#D3viz").select('#graphComponent');
// var graphComponentRect = d3.select("#"+panel).select("#D3viz").node().getElementById('graphComponent').getBoundingClientRect();
//
// var width = parseInt(metExploreD3.GraphPanel.getHeight(panel));
// var height = parseInt(metExploreD3.GraphPanel.getWidth(panel));
//
// if(vizRect.top>graphComponentRect.top
// || vizRect.left>graphComponentRect.left
// || vizRect.bottom<graphComponentRect.bottom
// || vizRect.right<graphComponentRect.right)
// {
// var dataLength =session.getD3Data().getNodesLength();
// var delay = 3000;
// if (dataLength < generalStyle.getReactionThreshold() || !generalStyle.isDisplayedLabelsForOpt())
// delay = 3000;
//
//
//
// var zoomListener = scale.getZoom();
//
// var updateScale = 0.01*dataLength/100;
// var newScale = previousScale-(previousScale*updateScale);
// zoomListener.scaleBy(d3.select("#"+panel).select("#D3viz"), newScale);
//
// var newWidth = newScale*width;
// var newHeight = newScale*height;
// var xScale = (width-newWidth)/2;
// var yScale = (height-newHeight)/2;
// zoomListener.translateBy(d3.select("#"+panel).select("#D3viz"), xScale, yScale);
//
// scale.setZoomScale(newScale);
//
// }
// else
// {
// if(!((vizRect.top+height/10>graphComponentRect.top && vizRect.bottom-height/10<graphComponentRect.bottom)
// || (vizRect.left+width/10>graphComponentRect.left && vizRect.right-width/10<graphComponentRect.right))){
// var dataLength =session.getD3Data().getNodesLength();
// var delay = 3000;
// if (dataLength < generalStyle.getReactionThreshold() || !generalStyle.isDisplayedLabelsForOpt())
// delay = 3000;
//
// metExploreD3.fixDelay(metExploreD3.GraphNetwork.task, delay);
//
// var zoomListener = scale.getZoom();
//
// if(updateScale==undefined) updateScale = 0.01;
// else updateScale = updateScale/2;
//
// var newScale = previousScale+(previousScale*updateScale);
// zoomListener.scaleBy(d3.select("#"+panel).select("#D3viz"), newScale);
//
// var newWidth = newScale*width;
// var newHeight = newScale*height;
// var xScale = (width-newWidth)/2;
// var yScale = (height-newHeight)/2;
//
// zoomListener.translateBy(d3.select("#"+panel).select("#D3viz"), xScale,yScale);
//
// scale.setZoomScale(newScale);
//
// }
// }
}
}
},
////////////////////////////////////////////////////////////// Event on nodes
/*******************************************
* Rescale the SVG to fit with the frame
* @param {String} panel The panel to refresh
* @param {Function} func Callback function
*/
rescale : function(panel, func){
var mask = metExploreD3.createLoadMask("Rescaling graph", panel);
......@@ -254,7 +211,7 @@ metExploreD3.GraphNetwork = {
}
},
////////////////////////////////////////////////////////////// Events
/*******************************************
* Change the cursor state to move the graph
*/
......@@ -281,7 +238,7 @@ metExploreD3.GraphNetwork = {
/*******************************************
* Zoom on the main panel and on link graph
* @param {string} panel : The panel to refresh
* @param {string} panel : The panel to zoom
*/
zoom:function(panel) {
var d3EventScale = d3.event.transform.k;
......@@ -358,7 +315,6 @@ metExploreD3.GraphNetwork = {
/*******************************************
* Zoom out the main panel and on link graph with button
* @param {} panel : The panel to refresh
*/
zoomOut:function() {
_MyThisGraphNode.dblClickable=false;
......@@ -372,10 +328,9 @@ metExploreD3.GraphNetwork = {
scale.setZoomScale(scale.getZoomScale()*0.9);
},
/*******************************************
* Refresh the graph data, it generate graph visualization
* @param {String} panel The panel to refresh
* Assign brush event
* @param {String} panel The panel to assign brush event
*/
defineBrush: function(panel) {
......@@ -630,14 +585,11 @@ metExploreD3.GraphNetwork = {
},
////////////////////////////////////////////////////////////// Event on nodes
/*******************************************
* Put animation button on
* @param {} panel : The panel where the button must be on
* @param {String} panel The panel where the button must be on
*/
animationButtonOn:function(panel) {
// disable button
d3.select("#"+panel).select("#buttonAnim").select("image").remove();
......@@ -646,7 +598,7 @@ metExploreD3.GraphNetwork = {
/*******************************************
* Put animation button off
* @param {} panel : The panel where the button must be off
* @param {String} panel The panel where the button must be off
*/
animationButtonOff:function(panel) {
// disable button
......@@ -715,13 +667,13 @@ metExploreD3.GraphNetwork = {
}
},
///// Events
////////////////////////////////////////////////////////////// Compared network
/*******************************************
* Link or unlink the main graph and the selected graph
*/
setLink:function(d) {
setLink:function() {
that = this;
var panel = this.parentNode.parentNode.id;
var session = _metExploreViz.getSessionById(panel);
......@@ -740,7 +692,7 @@ metExploreD3.GraphNetwork = {
/*******************************************
* Link the main graph and the selected graph
* @param {} panel : The panel to link
* @param {String} panel The panel to link
*/
link :function(panel){
var session = _metExploreViz.getSessionById(panel);
......@@ -797,7 +749,7 @@ metExploreD3.GraphNetwork = {
/*******************************************
* Unlink the main graph and the selected graph
* @param {} panel : The panel to unlink
* @param {String} panel The panel to unlink
*/
unLink :function(panel){
var session = _metExploreViz.getSessionById(panel);
......@@ -835,7 +787,8 @@ metExploreD3.GraphNetwork = {
/*******************************************
* Align linked graphs
* @param {} panel : The panel to align with the main
* @param {String} panel : The panel to align with the main
* @param {String} panel2 : The panel to align with the main
*/
graphAlignment : function(panel, panel2){
var session = _metExploreViz.getSessionById(panel);
......@@ -875,7 +828,6 @@ metExploreD3.GraphNetwork = {
/*******************************************
* Link mapping of compared networks
* @param {} panel : The panel to align with the main
*/
mappingAlignment : function(){
that = this;
......@@ -994,64 +946,10 @@ metExploreD3.GraphNetwork = {
////////////////////////////////////////////////////////////// Compared network
////////////////////////////////////////////////////////////// GraphPanel?
initShortCut: function () {
d3.select("body")
.on("keydown", function () {
_MyThisGraphNode.charKey = d3.event.keyCode;
_MyThisGraphNode.ctrlKey = d3.event.ctrlKey;
_MyThisGraphNode.altKey = d3.event.altKey;
var activesession = _metExploreViz.getSessionById(_MyThisGraphNode.activePanel);
//H 72
if (_MyThisGraphNode.charKey == 72 && !_MyThisGraphNode.altKey && activesession.getSelectedNodes().length > 0 && metExploreD3.GraphNetwork.focus) {
metExploreD3.GraphFunction.horizontalAlign(_MyThisGraphNode.activePanel);
}
if (_MyThisGraphNode.charKey == 72 && _MyThisGraphNode.altKey && activesession.getSelectedNodes().length > 0 && metExploreD3.GraphNetwork.focus) {
metExploreD3.GraphFunction.horizontalReverse(_MyThisGraphNode.activePanel);
}
//V 86
if (_MyThisGraphNode.charKey == 86 && !_MyThisGraphNode.altKey && activesession.getSelectedNodes().length > 0 && metExploreD3.GraphNetwork.focus) {
metExploreD3.GraphFunction.verticalAlign(_MyThisGraphNode.activePanel);
}
if (_MyThisGraphNode.charKey == 86 && _MyThisGraphNode.altKey && activesession.getSelectedNodes().length > 0 && metExploreD3.GraphNetwork.focus) {
metExploreD3.GraphFunction.verticalReverse(_MyThisGraphNode.activePanel);
}
// 65=A
if (_MyThisGraphNode.charKey == 65 && _MyThisGraphNode.ctrlKey && metExploreD3.GraphNetwork.focus) {
d3.select("#" + _MyThisGraphNode.activePanel).select("#D3viz").select("#graphComponent").selectAll("g.node")
.each(function (node) {
if (!node.isSelected()) {
_MyThisGraphNode.selection(node, _MyThisGraphNode.activePanel);
}
});
}
})
.on("keyup", function (e) {
// 46=Suppr
var activesession = _metExploreViz.getSessionById(_MyThisGraphNode.activePanel);
if (_MyThisGraphNode.charKey == 46 && activesession.getSelectedNodes().length > 0 && metExploreD3.GraphNetwork.focus) {
metExploreD3.displayMessageYesNo("Selected nodes", 'Do you want remove selected nodes?', function (btn) {
if (btn == "yes") {
metExploreD3.GraphNetwork.removeSelectedNode(_MyThisGraphNode.activePanel)
}
});
}
_MyThisGraphNode.charKey = 'none';
_MyThisGraphNode.ctrlKey = d3.event.ctrlKey;
});
},
////////////////////////////////////////////////////////////// GraphPanel?
/*******************************************
* Refresh the graph data, it generate graph visualization
* @param {} panel : The panel to refresh
* @param {String} panel : The panel to refresh
*/
refreshSvg : function(panel) {
......@@ -1065,7 +963,7 @@ metExploreD3.GraphNetwork = {
}
}, false);
metExploreD3.GraphNetwork.initShortCut();
metExploreD3.GraphPanel.initShortCut();
......@@ -1429,6 +1327,10 @@ metExploreD3.GraphNetwork = {
},
/*******************************************
* Refresh the graph data, it generate graph visualization
* @param {String} panel : The panel to refresh
*/
refreshViz : function(panel){
var mask = metExploreD3.createLoadMask("Draw graph", panel);
metExploreD3.showMask(mask);
......@@ -1483,6 +1385,7 @@ metExploreD3.GraphNetwork = {
/**
* Init centroids to clust nodes in function of pathways or compartments
* @param panel
* @deprecated
*/
initCentroids : function(panel){
//d3.select("#viz").select("#D3viz").select("#graphComponent").selectAll("g.node").filter(function(node){return node.getPathways().length>1}).style("fill", 'red');
......@@ -1647,12 +1550,12 @@ metExploreD3.GraphNetwork = {
/////////////////////////////////////////////////////GraphLink?
/*******************************************
* Add link in visualization
* @param {} identifier : Id of this link
* @param {} source : Source of this link
* @param {} target : Target of this link
* @param {} interaction : Interaction beetween nodes of this link
* @param {} reversible : Reversibility of link
* @param {} panel : The panel where is the new link
* @param {String} identifier : Id of this link
* @param {NodeData} source : Source of this link
* @param {NodeData} target : Target of this link
* @param {String} interaction : Interaction beetween nodes of this link "in/out"
* @param {Boolean} reversible : Reversibility of link
* @param {String} panel : The panel where is the new link
*/
addLinkInDrawing:function(identifier,source,target,interaction,reversible,panel, hide){
......@@ -1663,10 +1566,7 @@ metExploreD3.GraphNetwork = {
/*******************************************
* identifier parameter is used if there is a new parameter to add.
* @param {} panel : The panel to unlink
* @param {} panel : The panel to unlink
* @param {} panel : The panel to unlink
* @returns {} newNode : The created node
* @returns {NodeData} newNode : The created node
*/
addPathwayLinks: function(newNode){
var pathwayName = newNode.getName();
......@@ -1704,10 +1604,7 @@ metExploreD3.GraphNetwork = {
/*******************************************
* identifier parameter is used if there is a new parameter to add.
* @param {} panel : The panel to unlink
* @param {} panel : The panel to unlink
* @param {} panel : The panel to unlink
* @returns {} newNode : The created node
* @returns {NodeData} newNode : The created node
*/
addPathwayLinksData: function(newNode){
var pathwayName = newNode.getName();
......@@ -1773,10 +1670,7 @@ metExploreD3.GraphNetwork = {
/*******************************************
* identifier parameter is used if there is a new parameter to add.
* @param {} panel : The panel to unlink
* @param {} panel : The panel to unlink
* @param {} panel : The panel to unlink
* @returns {} newNode : The created node
* @returns {NodeData} newNode : The created node
*/
addPathwayLinksDataSinkSource: function(newNode){
var pathwayName = newNode.getName();
......@@ -1841,6 +1735,9 @@ metExploreD3.GraphNetwork = {
metExploreD3.GraphNetwork.tick("viz");
},
/*******************************************
* Remove end markers
*/
removeMarkerEnd : function(){
d3.select("#viz").select("#D3viz").select("#graphComponent").selectAll("path.link.reaction").attr("marker-end", "none");
},
......@@ -1850,10 +1747,10 @@ metExploreD3.GraphNetwork = {
/////////////////////////////////////////////////////GraphNode?
/*******************************************
* identifier parameter is used if there is a new parameter to add.
* @param {} panel : The panel to unlink
* @param {} panel : The panel to unlink
* @param {} panel : The panel to unlink
* @returns {} newNode : The created node
* @param {NodeData} theNode The node to create
* @param {String} theNodeId Id the node to create
* @param {String} reactionId Reaction linked to metabolite created
* @returns {String} panel : The panel to update
*/
addMetaboliteInDrawing: function(theNode, theNodeId, reactionId, panel){
......@@ -1923,6 +1820,9 @@ metExploreD3.GraphNetwork = {
return newNode;
},
/*******************************************
* Init node data for pathways.
*/
initPathwaysData:function(){
var session = _metExploreViz.getSessionById("viz");
var networkData = session.getD3Data();
......@@ -1982,6 +1882,10 @@ metExploreD3.GraphNetwork = {
});
},
/*******************************************
* Init DOM for a pathway.
* @param pathName Name of the pathway to update
*/
initPathway:function(pathName){
var activePanel = _MyThisGraphNode.activePanel;
if(!activePanel) activePanel='viz';
......@@ -1997,13 +1901,10 @@ metExploreD3.GraphNetwork = {
});
},
/*******************************************
* identifier parameter is used if there is a new parameter to add.
* @param {} panel : The panel to unlink
* @param {} panel : The panel to unlink
* @param {} panel : The panel to unlink
* @returns {} newNode : The created node
* Add pathway element
* @param pathName Name of the pathway to update
* @returns {NodeData} newNode : The created node
*/
addPathwayNode: function(pathwayName){
var panel = "viz";
......@@ -2110,11 +2011,10 @@ metExploreD3.GraphNetwork = {
},
/*******************************************
* identifier parameter is used if there is a new parameter to add.
* @param {} panel : The panel to unlink
* @param {} panel : The panel to unlink
* @param {} panel : The panel to unlink
* @returns {} newNode : The created node
* Expand pathway : hide a pathway node & show all nodes present in this pathway
* @param {String} pathwayName The pathway to expand
* @param {String} panel The panel
* @fires enableMakeClusters
*/
expandPathwayNode: function(pathwayName, panel){
var session = _metExploreViz.getSessionById(panel);
......@@ -2142,11 +2042,9 @@ metExploreD3.GraphNetwork = {
},
/*******************************************
* identifier parameter is used if there is a new parameter to add.
* @param {} panel : The panel to unlink
* @param {} panel : The panel to unlink
* @param {} panel : The panel to unlink
* @returns {} newNode : The created node
* Expand all pathways : hide all pathway nodes & show all nodes present in all pathway
* @param {String} panel The panel
* @fires enableMakeClusters
*/
expandAllPathwayNode: function(panel){
......@@ -2178,13 +2076,10 @@ metExploreD3.GraphNetwork = {
metExploreD3.fireEvent("vizIdDrawing", "enableMakeClusters");
},
/*******************************************
* identifier parameter is used if there is a new parameter to add.
* @param {} panel : The panel to unlink
* @param {} panel : The panel to unlink
* @param {} panel : The panel to unlink
* @returns {} newNode : The created node
* Collapse pathway : Show pathway node & hide all nodes present in this pathway and not present in other pathway extended
* @param {String} pathwayName The pathway to collapse
* @fires enableMakeClusters
*/
collapsePathway: function(pathwayName){
var activePanel = _MyThisGraphNode.activePanel;
......@@ -2258,11 +2153,9 @@ metExploreD3.GraphNetwork = {
},
/*******************************************
* identifier parameter is used if there is a new parameter to add.
* @param {} panel : The panel to unlink
* @param {} panel : The panel to unlink
* @param {} panel : The panel to unlink
* @returns {} newNode : The created node
* Collapse all pathways : Show all pathway nodes & hide all nodes present in a pathway
* @param {String} panel The panel
* @fires enableMakeClusters
*/
collapseAllPathway: function(panel){
var activePanel = panel;
......@@ -2331,8 +2224,9 @@ metExploreD3.GraphNetwork = {
/*******************************************
* Duplicate a node
* Each time the metabolite occurs in a reaction we create a new node and connect it only to the reaction
* @param {} theNode : The node to duplicate
* @param {} panel : The panel to unlink
* @param {NodeData} theNode The node to duplicate
* @param {String} panel The panel to unlink
* @fires fireEventParentWebSite_sideCompound
*/
duplicateANode : function(theNode, panel) {
var session = _metExploreViz.getSessionById(panel);
......@@ -2433,7 +2327,9 @@ metExploreD3.GraphNetwork = {
/************************************
* Duplicate side compounds
* @param {} panel : The panel where the SC must be duplicated
* @param {String} panel The panel where the SC must be duplicated
* @param {Function} func Callback function
* @fires enableMakeClusters afterDuplicate
*/
duplicateSideCompounds : function(panel, func){
......@@ -2537,7 +2433,9 @@ metExploreD3.GraphNetwork = {
/*******************************************
* Duplicate side compounds with an ids array
* @param {} panel : The panel where the SC must be duplicated
* @param {Array} ids Array of metabolite ids
* @param {String} panel The panel where the SC must be duplicated
* @fires enableMakeClusters
*/
duplicateSideCompoundsById : function(ids, panel){
......@@ -2588,8 +2486,9 @@ metExploreD3.GraphNetwork = {
},
/*******************************************
* Duplicate side compounds which is selected
* @param {} panel : The panel where the SC must be duplicated
* Duplicate side compounds selected
* @param {String} panel The panel where the SC must be duplicated
* @fires enableMakeClusters afterDuplicate
*/
duplicateSideCompoundsSelected : function(panel) {
var vis = d3.select("#"+panel).select("#D3viz");
......@@ -2692,7 +2591,9 @@ metExploreD3.GraphNetwork = {
/*******************************************
* Duplicate a side compound which is selected
* @param {} panel : The panel where the SC must be duplicated
* @param {NodeData} theNode Node to duplicate
* @param {String} panel The panel where the SC must be duplicated
* @fires enableMakeClusters afterDuplicate
*/
duplicateASideCompoundSelected : function(theNode, panel) {
var session = _metExploreViz.getSessionById(panel);
......@@ -2791,8 +2692,8 @@ metExploreD3.GraphNetwork = {
/*******************************************
* Duplication of side compounds
* @param {} theNodeElement : node to duplicate
* @param {} panel :panel where node must be duplicated
* @param {Element} theNodeElement Node to duplicate
* @param {String} panel Panel where node must be duplicated
*/
duplicateSideCompound : function(theNodeElement, panel){
......@@ -2844,7 +2745,7 @@ metExploreD3.GraphNetwork = {
/*******************************************
* Remove selected nodes
* @param {} panel : The panel where are selected nodes
* @param {String} panel The panel where are selected nodes
*/
removeSelectedNode : function(panel) {
var session = _metExploreViz.getSessionById(panel);
......@@ -2931,7 +2832,8 @@ metExploreD3.GraphNetwork = {
/*******************************************
* Remove only clicked node
* @param {} panel : The panel where are selected nodes
* @param {NodeData} theNode Node to remove
* @param {String} panel Panel where node must be duplicated
*/
removeOnlyClickedNode : function(theNode, panel) {
var session = _metExploreViz.getSessionById(panel);
......@@ -3003,11 +2905,10 @@ metExploreD3.GraphNetwork = {
/*******************************************
* Remove a node from convex hull (pathway or compartment)
* @param {} theNode : The node to remove
* @param {} panel : The panel
* @param {NodeData} theNode The node to remove
* @param {String} panel The panel
*/
removeNodeFromConvexHull : function(theNode, panel, setdata) {
if(setdata===undefined) setdata=true;
removeNodeFromConvexHull : function(theNode, panel) {
var session = _metExploreViz.getSessionById(panel);
// Remove the node from group to draw convex hulls
......@@ -3089,7 +2990,8 @@ metExploreD3.GraphNetwork = {
/*******************************************
* Remove node which is Isolated
* @param {} panel : The panel
* @param {NodeData} nodeRemoved Node to remove
* @param {String} panel Panel where node must be duplicated
*/
removeIsolatedNode : function(nodeRemoved, panel) {
var session = _metExploreViz.getSessionById(panel);
......@@ -3135,6 +3037,7 @@ metExploreD3.GraphNetwork = {
/*******************************************