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

For flux value on network add font size change and select label to display

+ ehance scale calcul
parent 2bd1ca14
......@@ -212,6 +212,52 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingForm', {
reference: 'addValueNetwork'
},
{
xtype: 'textfield',
value: '10',
fieldLabel: 'Font size ',
scale: 'large',
hidden: true,
reference: 'fontSize',
margin: '5 5 5 5',
enableKeyEvents: true
},
{
border: false,
xtype: 'panel',
autoScroll: true,
hidden: true,
reference: 'selectLabel',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
store: {
fields: ['labels'],
data: [
{"labels":"Reaction Name"},
{"labels":"Reaction ID"},
{"labels":"Reaction DB ID"}
]
},
xtype: 'combobox',
fieldLabel: 'Label ',
displayField: 'labels',
valueField: 'labels',
queryMode: 'local',
editable: false,
emptyText: '-- Select Label --',
value: 'Reaction Name',
margin: '5 5 5 5',
width: '100%',
anyMatch: true,
reference: 'selectLabelDisplayed'
}]
},
{
xtype: 'button',
html: 'Display',
......
......@@ -86,7 +86,9 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController',
me.computeFlux(selectedFile, nbColSelect, condSelect, condSelect2, color);
}
if (view.lookupReference('addValueNetwork').getValue() === true){
metExploreD3.GraphFlux.addValueOnEdge(color);
var size = view.lookupReference('fontSize').getValue();
var label = view.lookupReference('selectLabelDisplayed').getValue();
metExploreD3.GraphFlux.addValueOnEdge(size, label);
}
view.lookupReference('runFluxVizu').setText("Remove display");
}
......@@ -110,14 +112,46 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController',
change: function(){
if (metExploreD3.GraphStyleEdition.fluxPath1 === true || metExploreD3.GraphStyleEdition.fluxPath2 === true){
if (view.lookupReference('addValueNetwork').getValue() === true){
metExploreD3.GraphFlux.addValueOnEdge();
var size = view.lookupReference('fontSize').getValue();
var label = view.lookupReference('selectLabelDisplayed').getValue();
metExploreD3.GraphFlux.addValueOnEdge(size, label);
}
if (view.lookupReference('addValueNetwork').getValue() === false){
metExploreD3.GraphFlux.removeValueOnEdge();
}
}
if (view.lookupReference('addValueNetwork').getValue() === true){
view.lookupReference('fontSize').setHidden(false);
view.lookupReference('selectLabel').setHidden(false);
}
if (view.lookupReference('addValueNetwork').getValue() === false){
view.lookupReference('fontSize').setHidden(true);
view.lookupReference('selectLabel').setHidden(true);
}
}
});
view.lookupReference('fontSize').on({
keypress: function(field, event){
if (event.getKey() === event.ENTER){
var size = view.lookupReference('fontSize').getValue();
metExploreD3.GraphFlux.setFontSize(size);
}
}
});
view.lookupReference('selectLabelDisplayed').on({
change: function(){
if (metExploreD3.GraphStyleEdition.fluxPath1 === true || metExploreD3.GraphStyleEdition.fluxPath2 === true){
if (view.lookupReference('addValueNetwork').getValue() === true){
metExploreD3.GraphFlux.removeValueOnEdge();
var size = view.lookupReference('fontSize').getValue();
var label = view.lookupReference('selectLabelDisplayed').getValue();
metExploreD3.GraphFlux.addValueOnEdge(size, label);
}
}
}
})
},
colParse: function(nbCol, selectedFile){
......
......@@ -189,26 +189,48 @@ metExploreD3.GraphFlux = {
},
computeWidth: function(fluxDistri, fluxValue){
var min = fluxDistri["min"];
var inter = fluxDistri["inter"];
var max = fluxDistri["max"];
if (fluxValue < 0){
fluxValue = fluxValue*(-1);
}
if (fluxValue === fluxDistri["min"]){
if (fluxValue === min){
return 1;
}
if (fluxValue === fluxDistri["max"]){
if (fluxValue === max){
return 5;
}
if (fluxValue === fluxDistri["inter"]){
return 2.5;
if (fluxValue === inter){
return 3;
}
if (fluxValue > fluxDistri["inter"]){
return 2.5+(fluxValue*0.005);
if (fluxValue > inter){
var coef = 2 / (max - inter);
var widthCompute = 3 + (fluxValue - inter) * coef;
return widthCompute;
}
if (fluxValue < fluxDistri["inter"]){
return 2.5-(fluxValue*0.005);
if (fluxValue < inter){
var coef = 2 / (inter - min);
var widthCompute = 3 - (inter - fluxValue) * coef;
return widthCompute;
}
},
// Pour value > inter
// 2/(max-inter) === coef multiplicateur
// (value-inter)*coef + 3 === width
// ex : inter = 300, max = 540, value = 400 -> coef = 0,0083 => width = 3,83
// value = 500 -> width = 4,66
// value = 540 -> width = 4,992
// Pour value < inter
// 2/(inter-min) === coef
// 3 - (inter-value)*coef === width
// ex : inter = 300, min = 40, value = 100 -> coef = 0,0077 => width = 1,46
// value = 250 -> width = 2,615
// value = 50 -> width = 1,075
fluxDistribution: function(fluxValues){
var distrib = {};
......@@ -1595,7 +1617,7 @@ metExploreD3.GraphFlux = {
return path;
},
addValueOnEdge: function(){
addValueOnEdge: function(size, label){
var reactions = d3.select("#viz").select("#D3viz").select("#graphComponent")
.selectAll("g.node")
.filter(function(node){
......@@ -1606,6 +1628,16 @@ metExploreD3.GraphFlux = {
.on("drag", metExploreD3.GraphFlux.dragMove);
reactions.each(function(react){
if (label === "Reaction Name"){
var textLabel = react.name;
}
if (label === "Reaction ID"){
var textLabel = react.id;
}
if (label === "Reaction DB ID"){
var textLabel = react.dbIdentifier;
}
if (react.axe === "horizontal"){
var posX = react.x-20;
var posY = react.y+15;
......@@ -1620,9 +1652,9 @@ metExploreD3.GraphFlux = {
.attr("x", posX)
.attr("y", posY)
.attr("fill", react.color1)
.attr("font-size", 10)
.attr("font-size", size)
.classed("valueLabel", true)
.text(react.name+" : "+react.valueCond1)
.text(textLabel+" : "+react.valueCond1)
.call(labelDrag);
}
if (react.valueCond2 !== undefined && react.valueCond1 !== undefined){
......@@ -1636,16 +1668,16 @@ metExploreD3.GraphFlux = {
.attr("fill", react.color1)
.attr("x", posX)
.attr("y", posY)
.attr("font-size", 10)
.attr("font-size", size)
.classed("valueLabel", true)
.text(react.name+" : "+react.valueCond1);
.text(textLabel+" : "+react.valueCond1);
valueLabel.append("text")
.attr("fill", react.color2)
.attr("x", posX)
.attr("y", posY+15)
.attr("font-size", 10)
.attr("font-size", size)
.classed("valueLabel", true)
.text(react.name+" : "+react.valueCond2);
.text(textLabel+" : "+react.valueCond2);
}
});
},
......@@ -1665,6 +1697,14 @@ metExploreD3.GraphFlux = {
.attr("y", d3.event.y+(i*15));
});
},
setFontSize: function(size){
var labels = d3.select("#viz").select("#D3viz").select("#graphComponent").selectAll("text.valueLabel");
var labelGroup = labels._groups;
labelGroup[0].forEach(function(label){
d3.select(label).attr("font-size", size);
});
}
};
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment