Commit 70d0e48d authored by Jean-Clement Gallardo's avatar Jean-Clement Gallardo
Browse files

Add comment

parent bb1fe2d8
...@@ -310,6 +310,11 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController', ...@@ -310,6 +310,11 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController',
}); });
}, },
/**
* Parse selected file and fill one or two combobox with conditions
* @param {String} nbCol number of value to visualise
* @param {String} selectedFile file to parse
*/
colParse: function(nbCol, selectedFile){ colParse: function(nbCol, selectedFile){
var fluxList = _metExploreViz.flux; var fluxList = _metExploreViz.flux;
var fileIndex = []; var fileIndex = [];
...@@ -345,6 +350,9 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController', ...@@ -345,6 +350,9 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController',
} }
}, },
/**
* Parse flux object and fill combobox to select file
*/
fileParse: function(){ fileParse: function(){
var fluxList = _metExploreViz.flux; var fluxList = _metExploreViz.flux;
var fileName = []; var fileName = [];
...@@ -359,6 +367,16 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController', ...@@ -359,6 +367,16 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController',
condStore.setData(fileName); condStore.setData(fileName);
}, },
/**
* Regroup params to launch display flux visualisation and ditribution graph functions
* @param {String} selectedFile file to parse
* @param {String} nbCol number of value to visualise
* @param {String} condSelect first condition name
* @param {String} condSelect2 second condition name
* @param {String} color hexadecimal to color condition
* @param {Boolean} switchGraph swtich between all value or display value for distribution graph
* @param {String} scaleSelector scale mod select
*/
computeFlux: function(selectedFile, nbCol, condSelect, condSelect2, color, switchGraph, scaleSelector){ computeFlux: function(selectedFile, nbCol, condSelect, condSelect2, color, switchGraph, scaleSelector){
var me = this; var me = this;
var view = me.getView(); var view = me.getView();
...@@ -386,6 +404,14 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController', ...@@ -386,6 +404,14 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController',
} }
}, },
/**
* Get flux values from selected file and conditions
* @param {String} selectedFile file to parse
* @param {String} nbCol number of condition to display
* @param {String} condSelect first condition name
* @param {String} condSelect2 second condition name
* @returns {Array}
*/
getFluxData: function(selectedFile, nbCol, condSelect, condSelect2){ getFluxData: function(selectedFile, nbCol, condSelect, condSelect2){
var fluxList = _metExploreViz.flux; var fluxList = _metExploreViz.flux;
var fileIndex = []; var fileIndex = [];
...@@ -439,6 +465,13 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController', ...@@ -439,6 +465,13 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController',
return fluxData; return fluxData;
}, },
/**
* Draw scale graph
* @param {String} selectedFile file to parse
* @param {String} selectedCond first condition name
* @param {String} selectedCond2 second condition name
* @param {String} nbCol number of condition to display
*/
drawScaleEditor: function(selectedFile, selectedCond, selectedCond2, nbCol) { drawScaleEditor: function(selectedFile, selectedCond, selectedCond2, nbCol) {
var me = this; var me = this;
var view = me.getView(); var view = me.getView();
...@@ -545,6 +578,9 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController', ...@@ -545,6 +578,9 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController',
}, },
/**
* Update scale graph
*/
updateScaleEditor: function(){ updateScaleEditor: function(){
var me = this; var me = this;
var view = me.getView(); var view = me.getView();
...@@ -621,6 +657,11 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController', ...@@ -621,6 +657,11 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController',
}, },
/**
* Reset scale graph
* @param {String} cond select scale graph to reset
* @param {Object} svgView view where the scale data is store
*/
resetScale: function(cond, svgView){ resetScale: function(cond, svgView){
var me = this; var me = this;
var view = me.getView(); var view = me.getView();
......
...@@ -115,7 +115,6 @@ Ext.define('metExploreViz.view.form.fluxScaleEditor.FluxScaleEditorController', ...@@ -115,7 +115,6 @@ Ext.define('metExploreViz.view.form.fluxScaleEditor.FluxScaleEditorController',
view.lookupReference('resetButton').on({ view.lookupReference('resetButton').on({
click : function(){ click : function(){
// metExploreD3.GraphNumberScaleEditor.reset();
metExploreD3.fireEvent2Arg("fluxMapping", "resetScale", view.cond, view); metExploreD3.fireEvent2Arg("fluxMapping", "resetScale", view.cond, view);
var width = 450; var width = 450;
......
...@@ -12,6 +12,16 @@ ...@@ -12,6 +12,16 @@
metExploreD3.GraphFlux = { metExploreD3.GraphFlux = {
/**
* Get the parameters from flux panel and call display function
* @param {Array} fluxData flux values
* @param {String} targetLabel label use in dataset
* @param {String} nbCol number of condition to visualize
* @param {String} color color associated conditions
* @param {String} scaleSelector scale selected
* @param {Array} scaleRange1 scale range for the first condition
* @param {Array} scaleRange2 scale range for the second condition
*/
displayChoice: function(fluxData, targetLabel, nbCol, color, scaleSelector, scaleRange1, scaleRange2){ displayChoice: function(fluxData, targetLabel, nbCol, color, scaleSelector, scaleRange1, scaleRange2){
var session = _metExploreViz.getSessionById('viz'); var session = _metExploreViz.getSessionById('viz');
var networkData = session.getD3Data(); var networkData = session.getD3Data();
...@@ -24,6 +34,11 @@ metExploreD3.GraphFlux = { ...@@ -24,6 +34,11 @@ metExploreD3.GraphFlux = {
} }
}, },
/**
* Create scale range from flux data
* @param {Array} fluxData flux values
* @param {String} targetLabel label use in dataset
*/
getScale: function(fluxData, targetLabel){ getScale: function(fluxData, targetLabel){
var valuesPos = []; var valuesPos = [];
var valuesNeg = []; var valuesNeg = [];
...@@ -86,6 +101,15 @@ metExploreD3.GraphFlux = { ...@@ -86,6 +101,15 @@ metExploreD3.GraphFlux = {
return scaleRange; return scaleRange;
}, },
/**
* Display flux visualisation for one condition
* @param {Array} fluxData flux values
* @param {NetworkData} networkData
* @param {String} targetLabel label use in dataset
* @param {String} color color associated conditions
* @param {String} scaleSelector scale selected
* @param {Array} scaleRange scale range
*/
oneCompute: function(fluxData, networkData, targetLabel, color, scaleSelector, scaleRange){ oneCompute: function(fluxData, networkData, targetLabel, color, scaleSelector, scaleRange){
var valuePos = {}; var valuePos = {};
var valueNeg = {}; var valueNeg = {};
...@@ -155,6 +179,16 @@ metExploreD3.GraphFlux = { ...@@ -155,6 +179,16 @@ metExploreD3.GraphFlux = {
metExploreD3.GraphFlux.curveEdge(); metExploreD3.GraphFlux.curveEdge();
}, },
/**
* Display flux visualisation for two condition
* @param {Array} fluxData flux values
* @param {NetworkData} networkData
* @param {String} targetLabel label use in dataset
* @param {String} color colors associated conditions
* @param {String} scaleSelector scale selected
* @param {Array} scaleRange1 scale range for the first condition
* @param {Array} scaleRange2 scale range for the second condition
*/
twoCompute: function(fluxData, networkData, targetLabel, color, scaleSelector, scaleRange1, scaleRange2){ twoCompute: function(fluxData, networkData, targetLabel, color, scaleSelector, scaleRange1, scaleRange2){
var valuePos = {first:{}, second:{}}; var valuePos = {first:{}, second:{}};
var valueNeg = {first:{}, second:{}}; var valueNeg = {first:{}, second:{}};
...@@ -251,6 +285,14 @@ metExploreD3.GraphFlux = { ...@@ -251,6 +285,14 @@ metExploreD3.GraphFlux = {
metExploreD3.GraphFlux.curveTwoEdge(); metExploreD3.GraphFlux.curveTwoEdge();
}, },
/**
* Compute link width in function of his flux value
* @param {Dict} fluxDistri Object that contains min, max and intermediate values for the current dataset
* @param {Int} fluxValue flux value
* @param {String} scaleSelector scale mod selected
* @param {Array} scaleRange scale range for this condition
* @returns {Int}
*/
computeWidth: function(fluxDistri, fluxValue, scaleSelector, scaleRange){ computeWidth: function(fluxDistri, fluxValue, scaleSelector, scaleRange){
if (scaleSelector === "Manual"){ if (scaleSelector === "Manual"){
return metExploreD3.GraphFlux.computeManualWidth(scaleRange, fluxValue);; return metExploreD3.GraphFlux.computeManualWidth(scaleRange, fluxValue);;
...@@ -293,6 +335,12 @@ metExploreD3.GraphFlux = { ...@@ -293,6 +335,12 @@ metExploreD3.GraphFlux = {
} }
}, },
/**
* Compute link width in function of his flux value when manual scale is active
* @param {Array} scaleRange scale range for one condition
* @param {Int} fluxValue flux value
* @returns {Int}
*/
computeManualWidth: function(scaleRange, fluxValue){ computeManualWidth: function(scaleRange, fluxValue){
var data = []; var data = [];
var rangeCaption = []; var rangeCaption = [];
...@@ -319,6 +367,11 @@ metExploreD3.GraphFlux = { ...@@ -319,6 +367,11 @@ metExploreD3.GraphFlux = {
} }
}, },
/**
* Create dict which contains min, max and intermediate value from dataset
* @param {Array} fluxValues flux values for one specific condition
* @returns {Dict}
*/
fluxDistribution: function(fluxValues){ fluxDistribution: function(fluxValues){
var distrib = {}; var distrib = {};
...@@ -339,6 +392,12 @@ metExploreD3.GraphFlux = { ...@@ -339,6 +392,12 @@ metExploreD3.GraphFlux = {
return distrib; return distrib;
}, },
/**
* Find specific quantile from dataset
* @param {Array} values flux values for one specific condition
* @param {Int} q quantile to find in the dataset
* @returns {Array}
*/
findQuantile: function(values, q){ findQuantile: function(values, q){
var sortedValues = values.slice().sort(function(a, b){ var sortedValues = values.slice().sort(function(a, b){
return a - b; return a - b;
...@@ -353,6 +412,9 @@ metExploreD3.GraphFlux = { ...@@ -353,6 +412,9 @@ metExploreD3.GraphFlux = {
return [minValue, quantile, maxValue]; return [minValue, quantile, maxValue];
}, },
/**
* browse reactions nodes, assign width and color to their link for one condition and call caption function
*/
curveEdge: function(){ curveEdge: function(){
var panel = "viz"; var panel = "viz";
var reactionStyle = metExploreD3.getReactionStyle(); var reactionStyle = metExploreD3.getReactionStyle();
...@@ -573,6 +635,9 @@ metExploreD3.GraphFlux = { ...@@ -573,6 +635,9 @@ metExploreD3.GraphFlux = {
}, },
/**
* browse reactions nodes, assign width and color to their link for two conditions and call caption function
*/
curveTwoEdge: function(){ curveTwoEdge: function(){
var reactionStyle = metExploreD3.getReactionStyle(); var reactionStyle = metExploreD3.getReactionStyle();
var reactions = d3.select("#viz").select("#D3viz").select("#graphComponent") var reactions = d3.select("#viz").select("#D3viz").select("#graphComponent")
...@@ -983,10 +1048,20 @@ metExploreD3.GraphFlux = { ...@@ -983,10 +1048,20 @@ metExploreD3.GraphFlux = {
} }
}); });
metExploreD3.GraphCaption.drawCaptionTwoFluxMode(); metExploreD3.GraphCaption.drawCaptionTwoFluxMode();
}, },
/**
* Compute link path with arrow head with horizontal start
* @param {Int} startX position X of the start node
* @param {Int} startY position Y of the start node
* @param {Int} firstPointX first X control point for the path
* @param {Int} firstPointY first Y control point for the path
* @param {Int} endX position X of the end node
* @param {Int} endY position Y of the end node
* @param {Int} fluxValue flux value assign to the start node to know the direction of the reaction
* @param {Int} shiftValue shift value for two edge compute
* @returns {String}
*/
computePathHorizontalEnd : function (startX, startY, firstPointX, firstPointY, endX, endY, fluxValue, shiftValue) { computePathHorizontalEnd : function (startX, startY, firstPointX, firstPointY, endX, endY, fluxValue, shiftValue) {
// Compute the coordinates of the last point of the arc (the point in contact of the periphery of the target node) // Compute the coordinates of the last point of the arc (the point in contact of the periphery of the target node)
var metaboliteStyle = metExploreD3.getMetaboliteStyle(); var metaboliteStyle = metExploreD3.getMetaboliteStyle();
...@@ -1156,6 +1231,18 @@ metExploreD3.GraphFlux = { ...@@ -1156,6 +1231,18 @@ metExploreD3.GraphFlux = {
return path; return path;
}, },
/**
* Compute link path with arrow head with vertical start
* @param {Int} startX position X of the start node
* @param {Int} startY position Y of the start node
* @param {Int} firstPointX first X control point for the path
* @param {Int} firstPointY first Y control point for the path
* @param {Int} endX position X of the end node
* @param {Int} endY position Y of the end node
* @param {Int} fluxValue flux value assign to the start node to know the direction of the reaction
* @param {Int} shiftValue shift value for two edge compute
* @returns {String}
*/
computePathVerticalEnd : function (startX, startY, firstPointX, firstPointY, endX, endY, fluxValue, shiftValue) { computePathVerticalEnd : function (startX, startY, firstPointX, firstPointY, endX, endY, fluxValue, shiftValue) {
// Compute the coordinates of the last point of the arc (the point in contact of the periphery of the target node) // Compute the coordinates of the last point of the arc (the point in contact of the periphery of the target node)
var metaboliteStyle = metExploreD3.getMetaboliteStyle(); var metaboliteStyle = metExploreD3.getMetaboliteStyle();
...@@ -1260,7 +1347,6 @@ metExploreD3.GraphFlux = { ...@@ -1260,7 +1347,6 @@ metExploreD3.GraphFlux = {
else { else {
if (endX < startX){ if (endX < startX){
if (firstPointY < startY){ if (firstPointY < startY){
// 1
lastPointY = endY - (metaboliteStyle.getWidth() / 2); lastPointY = endY - (metaboliteStyle.getWidth() / 2);
beforeLastPointY = lastPointY - 5; beforeLastPointY = lastPointY - 5;
beforeLastPointX = beforeLastPointX - (shiftValue*2); beforeLastPointX = beforeLastPointX - (shiftValue*2);
...@@ -1273,7 +1359,6 @@ metExploreD3.GraphFlux = { ...@@ -1273,7 +1359,6 @@ metExploreD3.GraphFlux = {
var control2Y = controlY - shiftValue; var control2Y = controlY - shiftValue;
} }
else { else {
// 2
lastPointY = endY + (metaboliteStyle.getWidth() / 2); lastPointY = endY + (metaboliteStyle.getWidth() / 2);
beforeLastPointY = lastPointY + 5; beforeLastPointY = lastPointY + 5;
beforeLastPointX = beforeLastPointX - (shiftValue*2); beforeLastPointX = beforeLastPointX - (shiftValue*2);
...@@ -1288,7 +1373,6 @@ metExploreD3.GraphFlux = { ...@@ -1288,7 +1373,6 @@ metExploreD3.GraphFlux = {
} }
if (endX > startX){ if (endX > startX){
if (firstPointY < startY){ if (firstPointY < startY){
// 3
lastPointY = endY - (metaboliteStyle.getWidth() / 2); lastPointY = endY - (metaboliteStyle.getWidth() / 2);
beforeLastPointY = lastPointY - 5; beforeLastPointY = lastPointY - 5;
beforeLastPointX = beforeLastPointX - (shiftValue*2); beforeLastPointX = beforeLastPointX - (shiftValue*2);
...@@ -1301,7 +1385,6 @@ metExploreD3.GraphFlux = { ...@@ -1301,7 +1385,6 @@ metExploreD3.GraphFlux = {
var control2Y = controlY + shiftValue; var control2Y = controlY + shiftValue;
} }
else { else {
// 4
lastPointY = endY + (metaboliteStyle.getWidth() / 2); lastPointY = endY + (metaboliteStyle.getWidth() / 2);
beforeLastPointY = lastPointY + 5; beforeLastPointY = lastPointY + 5;
beforeLastPointX = beforeLastPointX - (shiftValue*2); beforeLastPointX = beforeLastPointX - (shiftValue*2);
...@@ -1329,6 +1412,10 @@ metExploreD3.GraphFlux = { ...@@ -1329,6 +1412,10 @@ metExploreD3.GraphFlux = {
return path; return path;
}, },
/**
* Remove flux display and restore link style
* @param {LinkStyle} linkStyle Store which contains links style
*/
restoreStyles: function(linkStyle){ restoreStyles: function(linkStyle){
// remove all flux value from nodes // remove all flux value from nodes
var reactions = d3.select("#viz").select("#D3viz").select("#graphComponent") var reactions = d3.select("#viz").select("#D3viz").select("#graphComponent")
...@@ -1375,6 +1462,14 @@ metExploreD3.GraphFlux = { ...@@ -1375,6 +1462,14 @@ metExploreD3.GraphFlux = {
} }
}, },
/**
* Create distribution graph for one condition
* @param {Array} fluxData flux data for the first condition
* @param {String} color hexadecimal to color graph first condition
* @param {Boolean} switchGraph switch between only data on network and all data in dataset
* @param {String} scaleSelector compute different graph in function of scale selector mod select
* @param {Array} scaleRange scale range for the first condition
*/
graphDistribOne: function(fluxData, color, switchGraph, scaleSelector, scaleRange){ graphDistribOne: function(fluxData, color, switchGraph, scaleSelector, scaleRange){
var data = []; var data = [];
var valNeg = []; var valNeg = [];
...@@ -1516,6 +1611,15 @@ metExploreD3.GraphFlux = { ...@@ -1516,6 +1611,15 @@ metExploreD3.GraphFlux = {
} }
}, },
/**
* Create distribution graph for two condition
* @param {Array} fluxData flux data for the two conditions
* @param {String} color hexadecimal to color graph two conditions
* @param {Boolean} switchGraph switch between only data on network and all data in dataset
* @param {String} scaleSelector compute different graph in function of scale selector mod select
* @param {Array} scaleRange1 scale range for the first condition
* @param {Array} scaleRange2 scale range for the second condition
*/
graphDistribTwo: function(fluxData, color, switchGraph, scaleSelector, scaleRange1, scaleRange2){ graphDistribTwo: function(fluxData, color, switchGraph, scaleSelector, scaleRange1, scaleRange2){
var data1 = []; var data1 = [];
var data2 = []; var data2 = [];
...@@ -1728,6 +1832,9 @@ metExploreD3.GraphFlux = { ...@@ -1728,6 +1832,9 @@ metExploreD3.GraphFlux = {
} }
}, },
/**
* Function to compute density estimator
*/
kernelDensityEstimator: function(kernel, X){ kernelDensityEstimator: function(kernel, X){
return function(V) { return function(V) {
return X.map(function(x) { return X.map(function(x) {
...@@ -1736,16 +1843,33 @@ metExploreD3.GraphFlux = { ...@@ -1736,16 +1843,33 @@ metExploreD3.GraphFlux = {
}; };
}, },
/**
* Function to compute kernel
*/
kernelEpanechnikov: function(k){ kernelEpanechnikov: function(k){
return function(v) { return function(v) {
return Math.abs(v /= k) <= 1 ? 0.75 * (1 - v * v) / k : 0; return Math.abs(v /= k) <= 1 ? 0.75 * (1 - v * v) / k : 0;
}; };
}, },
/**
* Remove distribution graph
*/
removeGraphDistrib: function(){ removeGraphDistrib: function(){
d3.select("#graphDistrib").selectAll("#distrib").remove(); d3.select("#graphDistrib").selectAll("#distrib").remove();
}, },
/**
* Compute link path without arrow head for vertical start
* @param {Int} startX position X of the start node
* @param {Int} startY position Y of the start node
* @param {Int} firstPointX first X control point for the path
* @param {Int} firstPointY first Y control point for the path
* @param {Int} endX position X of the end node
* @param {Int} endY position Y of the end node
* @param {Int} shiftValue shift value for two edge compute
* @returns {String}
*/
twoPathVertical : function (startX, startY, firstPointX, firstPointY, endX, endY, shiftValue) { twoPathVertical : function (startX, startY, firstPointX, firstPointY, endX, endY, shiftValue) {
// Compute the coordinates of the last point of the arc (the point in contact of the periphery of the target node) // Compute the coordinates of the last point of the arc (the point in contact of the periphery of the target node)
var metaboliteStyle = metExploreD3.getMetaboliteStyle(); var metaboliteStyle = metExploreD3.getMetaboliteStyle();
...@@ -1894,6 +2018,17 @@ metExploreD3.GraphFlux = { ...@@ -1894,6 +2018,17 @@ metExploreD3.GraphFlux = {
return path; return path;
}, },
/**
* Compute link path without arrow head for horizontal start
* @param {Int} startX position X of the start node
* @param {Int} startY position Y of the start node
* @param {Int} firstPointX first X control point for the path
* @param {Int} firstPointY first Y control point for the path
* @param {Int} endX position X of the end node
* @param {Int} endY position Y of the end node
* @param {Int} shiftValue shift value for two edge compute
* @returns {String}
*/
twoPathHorizontal : function (startX, startY, firstPointX, firstPointY, endX, endY, shiftValue) { twoPathHorizontal : function (startX, startY, firstPointX, firstPointY, endX, endY, shiftValue) {
// Compute the coordinates of the last point of the arc (the point in contact of the periphery of the target node) // Compute the coordinates of the last point of the arc (the point in contact of the periphery of the target node)
var metaboliteStyle = metExploreD3.getMetaboliteStyle(); var metaboliteStyle = metExploreD3.getMetaboliteStyle();
...@@ -2041,6 +2176,11 @@ metExploreD3.GraphFlux = { ...@@ -2041,6 +2176,11 @@ metExploreD3.GraphFlux = {
return path; return path;
}, },
/**
* Add label and flux value on network
* @param {Int} size font size
* @param {String} label label to display
*/
addValueOnEdge: function(size, label){ addValueOnEdge: function(size, label){
var reactions = d3.select("#viz").select("#D3viz").select("#graphComponent") var reactions = d3.select("#viz").select("#D3viz").select("#graphComponent")
.selectAll("g.node") .selectAll("g.node")
...@@ -2106,10 +2246,17 @@ metExploreD3.GraphFlux = { ...@@ -2106,10 +2246,17 @@ metExploreD3.GraphFlux = {
}); });
}, },
/**
* Remove label and flux value on network
*/
removeValueOnEdge: function(){ removeValueOnEdge: function(){
d3.select("#viz").select("#D3viz").select("#graphComponent").selectAll("text.valueLabel").remove(); d3.select("#viz").select("#D3viz").select("#graphComponent").selectAll("text.valueLabel").remove();
}, },
/**
* Drag function for label and flux value on network
* @param {Object} d
*/
dragMove: function(d){ dragMove: function(d){
d3.select(this) d3.select(this)
.attr("y", d3.event.y) .attr("y", d3.event.y)
...@@ -2123,6 +2270,10 @@ metExploreD3.GraphFlux = { ...@@ -2123,6 +2270,10 @@ metExploreD3.GraphFlux = {
}); });
}, },
/**
* Set font size for label and flux value on network
* @param {Int} size font size
*/
setFontSize: function(size){ setFontSize: function(size){