Skip to content

GitLab

Commit 3b410460 authored by Jean-Clement Gallardo's avatar Jean-Clement Gallardo
Browse files

Add user's choice color for condition (in graph and network) and value inter on distrib graph

parent 5202ff92
Hide whitespace changes
Inline Side-by-side
app/view/form/fluxMappingForm/FluxMappingForm.js
View file @ 3b410460
......@@ -133,9 +133,23 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingForm', {
editable: false,
emptyText: '-- Select Condition --',
margin: '5 5 5 5',
width: '100%',
width: '90%',
anyMatch: true,
reference: 'selectConditionFlux'
},
{
xtype: 'panel',
reference: "colorFirstCondition",
border: false,
margin: "5 5 5 5",
cls: "aStyleFormColor",
height:"30px",
width:"30px",
html: '<input ' +
'type="color" ' +
'id="html5colorpickerFlux1" ' +
'value="#0000ff" ' +
'style="width:30px; height:30px;">'
}
]
},
......@@ -170,9 +184,23 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingForm', {
editable: false,
emptyText: '-- Select Condition --',
margin: '5 5 5 5',
width: '100%',
width: '90%',
anyMatch: true,
reference: 'selectConditionFlux2'
},
{
xtype: 'panel',
reference: "colorSecondCondition",
margin: "5 5 5 5",
border: false,
cls: "aStyleFormColor",
height:"30px",
width:"30px",
html: '<input ' +
'type="color" ' +
'id="html5colorpickerFlux2" ' +
'value="#ff0000" ' +
'style="width:30px; height:30px;">'
}
]
},
......
app/view/form/fluxMappingForm/FluxMappingFormController.js
View file @ 3b410460
......@@ -68,13 +68,16 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController',
var condSelect = view.lookupReference('selectConditionFlux').getValue();
if (nbColSelect === "one"){
var color = document.getElementById("html5colorpickerFlux1").value;
metExploreD3.GraphStyleEdition.fluxPath1 = true;
me.computeFlux(selectedFile, nbColSelect, condSelect,"null");
me.computeFlux(selectedFile, nbColSelect, condSelect, "null", color);
}
if (nbColSelect === "two"){
var color = [document.getElementById("html5colorpickerFlux1").value,
document.getElementById("html5colorpickerFlux2").value];
metExploreD3.GraphStyleEdition.fluxPath2 = true;
var condSelect2 = view.lookupReference('selectConditionFlux2').getValue();
me.computeFlux(selectedFile, nbColSelect, condSelect, condSelect2);
me.computeFlux(selectedFile, nbColSelect, condSelect, condSelect2, color);
}
view.lookupReference('runFluxVizu').setText("Remove display");
}
......@@ -143,7 +146,7 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController',
condStore.setData(fileName);
},
computeFlux: function(selectedFile, nbCol, condSelect, condSelect2){
computeFlux: function(selectedFile, nbCol, condSelect, condSelect2, color){
var fluxList = _metExploreViz.flux;
var fileIndex = [];
fluxList.forEach(function(list, i){
......@@ -191,12 +194,12 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController',
conData.push(data);
}
}
metExploreD3.GraphFlux.displayChoice(conData, targetLabel, nbCol);
metExploreD3.GraphFlux.displayChoice(conData, targetLabel, nbCol, color);
if (nbCol === "one"){
metExploreD3.GraphFlux.graphDistribOne(conData);
metExploreD3.GraphFlux.graphDistribOne(conData, color);
}
if (nbCol === "two"){
metExploreD3.GraphFlux.graphDistribTwo(conData);
metExploreD3.GraphFlux.graphDistribTwo(conData, color);
}
}
......
resources/lib/functions/GraphCaption.js
View file @ 3b410460
......@@ -479,6 +479,8 @@ metExploreD3.GraphCaption = {
.remove();
// Load user's preferences
var color = document.getElementById("html5colorpickerFlux1").value;
var reactionStyle = metExploreD3.getReactionStyle();
var maxDimRea = Math.max(reactionStyle.getWidth(),reactionStyle.getHeight());
var xRea = 15/maxDimRea;
......@@ -555,7 +557,7 @@ metExploreD3.GraphCaption = {
.attr("transform", "translate(0,65)");
// Reaction with positive value
// Reaction with flux data
d3.select("#viz").select("#D3viz")
.append("svg:rect")
.attr('class', 'reactionCaption')
......@@ -577,7 +579,7 @@ metExploreD3.GraphCaption = {
.attr("class", 'linkCaptionRev')
.attr("fill-rule", "evenodd")
.attr("fill", 'white')
.style("stroke","green")
.style("stroke",color)
.style("stroke-width", 1.5)
.style("stroke-linejoin", "bevel")
.attr("transform","translate(15,85)");
......@@ -589,66 +591,19 @@ metExploreD3.GraphCaption = {
.attr("class", 'linkCaptionRev')
.attr("fill-rule", "evenodd")
.attr("fill", 'white')
.style("stroke","green")
.style("stroke",color)
.style("stroke-width", 1.5)
.style("stroke-linejoin", "bevel")
.attr("transform","translate(15,85)");
d3.select("#viz").select("#D3viz")
.append("svg:text")
.text('Reaction with positive value')
.text('Reaction with flux data')
.attr('class', 'textCaptionRev')
.attr('x', 20)
.attr('y', 15)
.attr("transform", "translate(0,110)");
// Reaction with negative value
d3.select("#viz").select("#D3viz")
.append("svg:rect")
.attr('class', 'reactionCaption')
.attr('x', 15/2 - reactionStyle.getWidth()*xRea/2)
.attr('y', 15)
.attr("width", reactionStyle.getWidth()*xRea)
.attr("height", reactionStyle.getHeight()*xRea)
.attr("rx", reactionStyle.getRX()*xRea)
.attr("ry", reactionStyle.getRY()*xRea)
.attr("fill", "white")
.attr("transform", "translate(50,"+(130-(reactionStyle.getHeight()*xRea /2))+")")
.style("stroke",reactionStyle.getStrokeColor())
.style("stroke-width", 2);
d3.select("#viz").select("#D3viz")
.append("svg:path")
.attr("class", String)
.attr("d",path4)
.attr("class", 'linkCaptionRev')
.attr("fill-rule", "evenodd")
.attr("fill", 'white')
.style("stroke","red")
.style("stroke-width", 1.5)
.style("stroke-linejoin", "bevel")
.attr("transform","translate(15,130)");
d3.select("#viz").select("#D3viz")
.append("svg:path")
.attr("class", String)
.attr("d",path2)
.attr("class", 'linkCaptionRev')
.attr("fill-rule", "evenodd")
.attr("fill", 'white')
.style("stroke","red")
.style("stroke-width", 1.5)
.style("stroke-linejoin", "bevel")
.attr("transform","translate(15,130)");
d3.select("#viz").select("#D3viz")
.append("svg:text")
.text('Reaction with negative value')
.attr('class', 'textCaptionRev')
.attr('x', 20)
.attr('y', 15)
.attr("transform", "translate(0,155)");
// Reaction with null value
d3.select("#viz").select("#D3viz")
......@@ -661,7 +616,7 @@ metExploreD3.GraphCaption = {
.attr("rx", reactionStyle.getRX()*xRea)
.attr("ry", reactionStyle.getRY()*xRea)
.attr("fill", "white")
.attr("transform", "translate(50,"+(175-(reactionStyle.getHeight()*xRea /2))+")")
.attr("transform", "translate(50,"+(130-(reactionStyle.getHeight()*xRea /2))+")")
.style("stroke",reactionStyle.getStrokeColor())
.style("stroke-width", 2);
......@@ -677,7 +632,7 @@ metExploreD3.GraphCaption = {
.style("stroke-linejoin", "bevel")
.style("stroke", "blue")
.style("stroke-dasharray",8)
.attr("transform","translate(15,175)");
.attr("transform","translate(15,130)");
d3.select("#viz").select("#D3viz")
.append("svg:path")
......@@ -691,7 +646,7 @@ metExploreD3.GraphCaption = {
.style("stroke-linejoin", "bevel")
.style("stroke", "blue")
.style("stroke-dasharray",8)
.attr("transform","translate(15,175)");
.attr("transform","translate(15,130)");
d3.select("#viz").select("#D3viz")
.append("svg:text")
......@@ -699,7 +654,7 @@ metExploreD3.GraphCaption = {
.text('Reaction with 0 flux')
.attr('x', 20)
.attr('y', 15)
.attr("transform", "translate(0,200)");
.attr("transform", "translate(0,155)");
if(d3.select("#viz")
.select("#D3viz")
......@@ -736,7 +691,7 @@ metExploreD3.GraphCaption = {
.attr("fill", "white")
.style("stroke", "#000000")
.style("stroke-width", 2)
.attr("transform","translate(15,230)");
.attr("transform","translate(15,200)");
d3.select("#viz").select("#D3viz")
.append("svg:text")
......@@ -744,7 +699,7 @@ metExploreD3.GraphCaption = {
.text('Metabolites')
.attr('x', 20)
.attr('y',15)
.attr("transform","translate(30,240)");
.attr("transform","translate(30,210)");
},
......@@ -774,6 +729,9 @@ metExploreD3.GraphCaption = {
.remove();
// Load user's preferences
var color1 = document.getElementById('html5colorpickerFlux1').value;
var color2 = document.getElementById('html5colorpickerFlux2').value;
var reactionStyle = metExploreD3.getReactionStyle();
var maxDimRea = Math.max(reactionStyle.getWidth(),reactionStyle.getHeight());
var xRea = 15/maxDimRea;
......@@ -850,7 +808,7 @@ metExploreD3.GraphCaption = {
.attr("transform", "translate(0,65)");
// Reaction with positive value
// Reaction first condition
d3.select("#viz").select("#D3viz")
.append("svg:rect")
.attr('class', 'reactionCaption')
......@@ -872,7 +830,7 @@ metExploreD3.GraphCaption = {
.attr("class", 'linkCaptionRev')
.attr("fill-rule", "evenodd")
.attr("fill", 'white')
.style("stroke","blue")
.style("stroke",color1)
.style("stroke-width", 1.5)
.style("stroke-linejoin", "bevel")
.attr("transform","translate(15,85)");
......@@ -884,7 +842,7 @@ metExploreD3.GraphCaption = {
.attr("class", 'linkCaptionRev')
.attr("fill-rule", "evenodd")
.attr("fill", 'white')
.style("stroke","blue")
.style("stroke",color1)
.style("stroke-width", 1.5)
.style("stroke-linejoin", "bevel")
.attr("transform","translate(15,85)");
......@@ -897,7 +855,7 @@ metExploreD3.GraphCaption = {
.attr('y', 15)
.attr("transform", "translate(0,110)");
// Reaction with negative value
// Reaction second condition
d3.select("#viz").select("#D3viz")
.append("svg:rect")
.attr('class', 'reactionCaption')
......@@ -919,7 +877,7 @@ metExploreD3.GraphCaption = {
.attr("class", 'linkCaptionRev')
.attr("fill-rule", "evenodd")
.attr("fill", 'white')
.style("stroke","red")
.style("stroke",color2)
.style("stroke-width", 1.5)
.style("stroke-linejoin", "bevel")
.attr("transform","translate(15,130)");
......@@ -931,7 +889,7 @@ metExploreD3.GraphCaption = {
.attr("class", 'linkCaptionRev')
.attr("fill-rule", "evenodd")
.attr("fill", 'white')
.style("stroke","red")
.style("stroke",color2)
.style("stroke-width", 1.5)
.style("stroke-linejoin", "bevel")
.attr("transform","translate(15,130)");
......
resources/lib/functions/GraphFlux.js
View file @ 3b410460
......@@ -11,19 +11,19 @@
metExploreD3.GraphFlux = {
displayChoice: function(fluxData, targetLabel, nbCol){
displayChoice: function(fluxData, targetLabel, nbCol, color){
var session = _metExploreViz.getSessionById('viz');
var networkData = session.getD3Data();
if (nbCol === "one"){
this.oneCompute(fluxData, networkData, targetLabel);
this.oneCompute(fluxData, networkData, targetLabel, color);
}
if (nbCol === "two"){
this.twoCompute(fluxData, networkData, targetLabel);
this.twoCompute(fluxData, networkData, targetLabel, color);
}
},
oneCompute: function(fluxData, networkData, targetLabel){
oneCompute: function(fluxData, networkData, targetLabel, color){
var valuePos = {};
var valueNeg = {};
var valPosDistri = [];
......@@ -76,17 +76,19 @@ metExploreD3.GraphFlux = {
if (Object.keys(valuePos).includes(nodes.id)){
var edgeWidth = metExploreD3.GraphFlux.computeWidth(posDistrib, valuePos[nodes.id]);
nodes.fluxDirection = edgeWidth;
nodes.color = color;
}
if (Object.keys(valueNeg).includes(nodes.id)){
var edgeWidth = metExploreD3.GraphFlux.computeWidth(negDistrib, valueNeg[nodes.id]);
nodes.fluxDirection = edgeWidth*(-1);
nodes.color = color;
}
}
}
metExploreD3.GraphFlux.curveEdge();
},
twoCompute: function(fluxData, networkData, targetLabel){
twoCompute: function(fluxData, networkData, targetLabel, color){
var valuePos = {first:{}, second:{}};
var valueNeg = {first:{}, second:{}};
var valPosDistri = [];
......@@ -109,6 +111,7 @@ metExploreD3.GraphFlux = {
var value2 = parseInt(fluxData[i][2], 10);
if (value1 === 0){
nodes.fluxDirection1 = value1;
nodes.color1 = color[0];
}
if (value1 > 0){
valuePos["first"][nodes.id] = value1;
......@@ -120,6 +123,7 @@ metExploreD3.GraphFlux = {
}
if (value2 === 0){
nodes.fluxDirection2 = value2;
nodes.color2 = color[1];
}
if (value2 > 0){
valuePos["second"][nodes.id] = value2;
......@@ -135,12 +139,6 @@ metExploreD3.GraphFlux = {
var posDistrib = metExploreD3.GraphFlux.fluxDistribution(valPosDistri);
var negDistrib = metExploreD3.GraphFlux.fluxDistribution(valNegDistri);
// var negDistrib1 = metExploreD3.GraphFlux.fluxDistribution(valueNeg["first"]);
// var posDistrib1 = metExploreD3.GraphFlux.fluxDistribution(valuePos["first"]);
//
// var negDistrib2 = metExploreD3.GraphFlux.fluxDistribution(valueNeg["second"]);
// var posDistrib2 = metExploreD3.GraphFlux.fluxDistribution(valuePos["second"]);
for (var i = 0; i < fluxData.length; i++){
if (targetLabel === "reactionName"){
......@@ -157,19 +155,23 @@ metExploreD3.GraphFlux = {
if (Object.keys(valuePos["first"]).includes(nodes.id)){
var edgeWidth = metExploreD3.GraphFlux.computeWidth(posDistrib, valuePos["first"][nodes.id]);
nodes.fluxDirection1 = edgeWidth;
nodes.color1 = color[0];
}
if (Object.keys(valueNeg["first"]).includes(nodes.id)){
var edgeWidth = metExploreD3.GraphFlux.computeWidth(negDistrib, valueNeg["first"][nodes.id]);
nodes.fluxDirection1 = edgeWidth*(-1);
nodes.color1 = color[0];
}
if (Object.keys(valuePos["second"]).includes(nodes.id)){
var edgeWidth = metExploreD3.GraphFlux.computeWidth(posDistrib, valuePos["second"][nodes.id]);
nodes.fluxDirection2 = edgeWidth;
nodes.color2 = color[1];
}
if (Object.keys(valueNeg["second"]).includes(nodes.id)){
var edgeWidth = metExploreD3.GraphFlux.computeWidth(negDistrib, valueNeg["second"][nodes.id]);
nodes.fluxDirection2 = edgeWidth*(-1);
nodes.color2 = color[1];
}
}
}
......@@ -199,16 +201,6 @@ metExploreD3.GraphFlux = {
fluxDistribution: function(fluxValues){
var distrib = {};
// var values = [];
// var reactId = Object.keys(fluxValues);
// reactId.forEach(function(id){
// if (fluxValues[id] < 0){
// values.push(fluxValues[id]*(-1));
// }
// else {
// values.push(fluxValues[id]);
// }
// });
var fluxQuantile = metExploreD3.GraphFlux.findQuantile(fluxValues, 0.5);
......@@ -363,7 +355,7 @@ metExploreD3.GraphFlux = {
.classed("vertical", false)
.classed(axe, true)
.style("opacity", 1)
.style("stroke","green")
.style("stroke", node.color)
.style("stroke-width",node.fluxDirection);
});
......@@ -388,7 +380,7 @@ metExploreD3.GraphFlux = {
.classed(axe, true)
.style("opacity", 1)
.style("stroke-linejoin", "miter")
.style("stroke","green")
.style("stroke", node.color)
.style("stroke-width",node.fluxDirection);
});
}
......@@ -412,7 +404,7 @@ metExploreD3.GraphFlux = {
.classed(axe, true)
.style("opacity", 1)
.style("stroke-linejoin", "miter")
.style("stroke","red")
.style("stroke", node.color)
.style("stroke-width",node.fluxDirection*(-1));
});
......@@ -434,7 +426,7 @@ metExploreD3.GraphFlux = {
.classed("vertical", false)
.classed(axe, true)
.style("opacity", 1)
.style("stroke","red")
.style("stroke", node.color)
.style("stroke-width",node.fluxDirection*(-1));
});
}
......@@ -519,7 +511,7 @@ metExploreD3.GraphFlux = {
.classed("vertical", false)
.classed(axe, true)
.style("opacity", 1)
.style("stroke","blue")
.style("stroke", node.color1)
.style("stroke-dasharray",8);
});
......@@ -542,7 +534,7 @@ metExploreD3.GraphFlux = {
.classed("vertical", false)
.classed(axe, true)
.style("opacity", 1)
.style("stroke","blue")
.style("stroke", node.color1)
.style("stroke-dasharray",8);
});
}
......@@ -569,7 +561,7 @@ metExploreD3.GraphFlux = {
.classed(axe, true)
.classed("reaction",false)
.style("opacity", 1)
.style("stroke","red")
.style("stroke", node.color2)
.style("stroke-dasharray",8)
.style("stroke-width",2);
});
......@@ -595,7 +587,7 @@ metExploreD3.GraphFlux = {
.classed("vertical", false)
.classed(axe, true)
.style("opacity", 1)
.style("stroke","red")
.style("stroke", node.color2)
.style("stroke-dasharray",8)
.style("stroke-width", 2);
});
......@@ -619,7 +611,7 @@ metExploreD3.GraphFlux = {
.classed("vertical", false)
.classed(axe, true)
.style("opacity", 1)
.style("stroke","blue")
.style("stroke", node.color1)
.style("stroke-width",node.fluxDirection1);
});
......@@ -644,7 +636,7 @@ metExploreD3.GraphFlux = {
.classed(axe, true)
.style("opacity", 1)
.style("stroke-linejoin", "miter")
.style("stroke","blue")
.style("stroke", node.color1)
.style("stroke-width",node.fluxDirection1);
});
}
......@@ -672,7 +664,7 @@ metExploreD3.GraphFlux = {
.classed("reaction",false)
.style("opacity", 1)
.style("stroke-dasharray", null)
.style("stroke","red")
.style("stroke", node.color2)
.style("stroke-width", node.fluxDirection2);
});
var newExit = exitingLinks.clone();
......@@ -700,7 +692,7 @@ metExploreD3.GraphFlux = {
.style("stroke-linejoin", "miter")
.style("opacity", 1)
.style("stroke-dasharray", null)
.style("stroke","red")
.style("stroke", node.color2)
.style("stroke-width", node.fluxDirection2);
});
}
......@@ -724,7 +716,7 @@ metExploreD3.GraphFlux = {
.classed(axe, true)
.style("opacity", 1)
.style("stroke-linejoin", "miter")
.style("stroke","blue")
.style("stroke", node.color1)
.style("stroke-width",node.fluxDirection1*(-1));
});
......@@ -747,7 +739,7 @@ metExploreD3.GraphFlux = {
.classed("vertical", false)
.classed(axe, true)
.style("opacity", 1)
.style("stroke","blue")
.style("stroke", node.color1)
.style("stroke-width",node.fluxDirection1*(-1));
});
}
......@@ -776,7 +768,7 @@ metExploreD3.GraphFlux = {
.style("stroke-linejoin", "miter")
.style("opacity", 1)
.style("stroke-dasharray", null)
.style("stroke","red")
.style("stroke", node.color2)
.style("stroke-width",node.fluxDirection2*(-1));
});
var newExit = exitingLinks.clone();
......@@ -802,7 +794,7 @@ metExploreD3.GraphFlux = {
.classed(axe, true)
.style("stroke-dasharray", null)
.style("opacity", 1)
.style("stroke","red")
.style("stroke", node.color2)
.style("stroke-width",node.fluxDirection2*(-1));
});
}
......@@ -1061,6 +1053,10 @@ metExploreD3.GraphFlux = {
node.fluxDirection = "";
node.fluxDirection1 = "";
node.fluxDirection2 = "";
node.color = "";
node.color1 = "";
node.color2 = "";
});
// remove link clone
......@@ -1089,10 +1085,14 @@ metExploreD3.GraphFlux = {
}
},
graphDistribOne: function(fluxData){
graphDistribOne: function(fluxData, color){
var data = [];
var valNeg = [];
var valPos = [];
var min = 0;
var max = 0;
fluxData.forEach(function(value) {
var val = value[1]*1;
data.push(val);
......@@ -1102,8 +1102,20 @@ metExploreD3.GraphFlux = {
if (max < val){
max = val;
}
if (val < 0){
valNeg.push(val);
}
if (val > 0){
valPos.push(val);