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

Ducumentation

parent bd981be3
/**
* @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(){
......
/**
* @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;
......
/**
* @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
/**
* @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
......
/**
* @class metExploreD3.GraphMapping
* Function to manage mapping data
*
* Import data
* Map data on nodes and links
* Map image on node
*
* @author MC
* (a)description : Fonctions to map data on metabolic networks
* @uses metExploreD3.GraphLink
* @uses metExploreD3.GraphUtils
* @uses metExploreD3.GraphStyleEdition
*/
metExploreD3.GraphMapping = {
compareMappingConditionChart : function(){
var sessions = _metExploreViz.getSessionsSet();
var arrayNodes = [];
var mappingName = [];
var condName = [];
for (var key in sessions) {
mappingName.push(sessions[key].getActiveMapping());
condName.push(sessions[key].isMapped());
if(key!='viz'){
arrayNodes = sessions[key].getD3Data().getNodes().concat(arrayNodes);
}
}
var categories = [];
arrayNodes.forEach(function(node){
var index = arrayNodes.filter(function(n){ return n.getIdentifier()==node.getIdentifier(); });
if(index.length>1 && categories.indexOf(node)==-1 && node.getMappingDataByNameAndCond(mappingName[0], condName[0])!=undefined)
categories.push(node);
});
var categoriesName=categories.map(function(node){return node.getName()});
var mapping = _metExploreViz.getMappingByName(mappingName);
var dataCond1 = categories.map(function(node){return -Math.abs(parseInt(node.getMappingDataByNameAndCond(mappingName[0], condName[0]).getMapValue()))});
var dataCond2 = categories.map(function(node){return Math.abs(parseInt(node.getMappingDataByNameAndCond(mappingName[1], condName[1]).getMapValue()))});
var conditions2=
[
{
name: condName[0],
data: dataCond1
}, {
name: condName[1],
data: dataCond2
}
];
// donnees.forEach(function(aData){
// aData.color=scale(aData.z);
// });
var dataChart2 = {categories:categoriesName, conditions:conditions2};
var compareChart = new MetXCompareBar(dataChart2, 1300, categoriesName.length*15, "xaxis", "yaxis", mappingName[0]+" analysis");
// console.log(d3.select(compareChart));
// var array = [];
// d3.select(compareChart).select('svg').selectAll('.highcharts-series').selectAll('rect').each(function(){array.push(this.height.animVal.value)});
// console.log(array);
// var scale = d3.scaleLinear()
// .domain([Math.min.apply(null, array),Math.max.apply(null, array)])
// .range([sessions["viz"].getValueMappingsSet()[1].getValue(),sessions["viz"].getValueMappingsSet()[0].getValue()]);
// d3.select(compareChart).selectAll('svg').selectAll('.highcharts-series').selectAll('rect').attr('fill', function(){return scale(this.height.animVal.value)})
return compareChart;
},
/***********************************************
* Mapping to data from file
* This function will assignmapping value to each nodes in datas
*/
* Mapping to data from file TSV
* This function will assign mapping value to each nodes in data
* @param {Mapping} mapping Empty mapping object
* @param {Object} objects Data conditions to assign
* @throws error in function
*/
mapNodeDataFile: function(mapping, objects) {
var session = _metExploreViz.getSessionById('viz');
var force = session.getForce();
......@@ -199,7 +151,10 @@ metExploreD3.GraphMapping = {
/***********************************************
* Mapping to data
* This function will assignmapping value to each nodes in datas
* This function will assign mapping value to each nodes in data
* @param {Mapping} mapping Empty mapping object
* @param {Object} objects Data conditions to assign
* @throws error in function
*/
mapNodeData: function(mapping, lines) {
var myMask = metExploreD3.createLoadMask("Mapping in progress...", 'graphPanel');
......@@ -321,349 +276,269 @@ metExploreD3.GraphMapping = {
}
},
/***********************************************
* Mapping to binary data 0 1
* This function will look at metabolites that have data
* maped and will color their stroke in red
* !!!!! Have to be modified in order to do some batch
* rendering
/*****************************************************
* Reload Mapping
* @param {Mapping} mapping Mapping object
* @throws error in function
*/
mapNodes : function(mappingName, func) {
metExploreD3.onloadMapping(mappingName, function(){
reloadMapping : function(mapping) {
var session = _metExploreViz.getSessionById('viz');