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

Add two values compute and graph distrib two values

Change condition selection for two values
Change tick and link refresh
parent cebc62f0
......@@ -31,7 +31,7 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingForm', {
items: [
{
xtype: 'label',
html: 'Select file',
html: 'Select file :',
margin: '15 15 5 15'
},
......@@ -64,7 +64,7 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingForm', {
{
xtype: 'label',
html: 'Select number of value to visualize',
html: 'Select number of value to visualize :',
margin: '15 15 5 15'
},
......@@ -101,10 +101,18 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingForm', {
{
xtype: 'label',
html: 'Select condition to visualize',
html: 'Select condition to visualize :',
margin: '15 15 5 15'
},
{
xtype: 'label',
html: 'First condition',
margin: '5 15 5 15',
hidden: true,
reference: 'firstConditionLabel'
},
{
border: false,
xtype: 'panel',
......@@ -132,6 +140,43 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingForm', {
]
},
{
xtype: 'label',
html: 'Second condition',
margin: '5 15 5 15',
hidden: true,
reference: 'secondConditionLabel'
},
{
border: false,
xtype: 'panel',
autoScroll: true,
hidden: true,
reference: 'secondConditionBox',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
store: {
fields: ['fluxCond']
},
xtype: 'combobox',
displayField: 'fluxCond',
valueField: 'fluxCond',
queryMode: 'local',
editable: false,
emptyText: '-- Select Condition --',
margin: '5 5 5 5',
width: '100%',
anyMatch: true,
reference: 'selectConditionFlux2'
}
]
},
{
xtype: 'button',
html: 'Display',
......
......@@ -44,15 +44,17 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController',
view.lookupReference('selectColNumber').on({
change: function(){
if (view.lookupReference('selectColNumber').getValue() === "one"){
console.log("just one col please");
view.lookupReference("secondConditionLabel").setHidden(true);
view.lookupReference("firstConditionLabel").setHidden(true);
view.lookupReference("secondConditionBox").setHidden(true);
var selectedFile = view.lookupReference("selectFile").getValue();
console.log("this file",selectedFile);
me.colParse(1, selectedFile);
}
if (view.lookupReference('selectColNumber').getValue() === "two"){
console.log("I take two col please");
view.lookupReference("secondConditionLabel").setHidden(false);
view.lookupReference("firstConditionLabel").setHidden(false);
view.lookupReference("secondConditionBox").setHidden(false);
var selectedFile = view.lookupReference("selectFile").getValue();
console.log("this file",selectedFile);
me.colParse(2, selectedFile);
}
}
......@@ -60,19 +62,26 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController',
view.lookupReference('runFluxVizu').on({
click: function(){
if (metExploreD3.GraphStyleEdition.fluxPath === false){
if (metExploreD3.GraphStyleEdition.fluxPath1 === false && metExploreD3.GraphStyleEdition.fluxPath2 === false){
var selectedFile = view.lookupReference('selectFile').getValue();
var nbColSelect = view.lookupReference('selectColNumber').getValue();
var condSelect = view.lookupReference('selectConditionFlux').getValue();
me.computeFlux(selectedFile, nbColSelect, condSelect);
metExploreD3.GraphStyleEdition.fluxPath = true;
if (nbColSelect === "one"){
metExploreD3.GraphStyleEdition.fluxPath1 = true;
me.computeFlux(selectedFile, nbColSelect, condSelect,"null");
}
if (nbColSelect === "two"){
metExploreD3.GraphStyleEdition.fluxPath2 = true;
var condSelect2 = view.lookupReference('selectConditionFlux2').getValue();
me.computeFlux(selectedFile, nbColSelect, condSelect, condSelect2);
}
view.lookupReference('runFluxVizu').setText("Remove display");
}
else{
metExploreD3.GraphStyleEdition.fluxPath = false;
metExploreD3.GraphStyleEdition.fluxPath1 = false;
metExploreD3.GraphStyleEdition.fluxPath2 = false;
metExploreD3.GraphLink.tick('viz');
metExploreD3.GraphCaption.drawCaption();
metExploreD3.GraphFlux.restoreStyles(_metExploreViz.linkStyle);
......@@ -95,28 +104,29 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController',
});
var fluxCondition = fluxList[fileIndex].conditions;
var comboComponent = this.getView().lookupReference('selectConditionFlux');
var condStore = comboComponent.getStore();
var listCond = [];
if(nbCol === 1){
for (var i = 0; i < fluxCondition.length; i++){
var cond = fluxCondition[i];
var tmp = {fluxCond:cond};
listCond.push(tmp);
}
for (var i = 0; i < fluxCondition.length; i++){
var cond = fluxCondition[i];
var tmp = {fluxCond:cond};
listCond.push(tmp);
}
if(nbCol === 2){
for (var i = 0; i < fluxCondition.length; i=i+2){
var cond = fluxCondition[i]+" / "+fluxCondition[i+1];
var tmp = {fluxCond:cond};
listCond.push(tmp);
}
}
if (nbCol === 1){
var comboComponent = this.getView().lookupReference('selectConditionFlux');
var condStore = comboComponent.getStore();
condStore.setData(listCond);
condStore.setData(listCond);
}
if (nbCol === 2){
var comboComponent = this.getView().lookupReference('selectConditionFlux');
var comboComponent2 = this.getView().lookupReference('selectConditionFlux2');
var condStore = comboComponent.getStore();
var condStore2 = comboComponent2.getStore();
condStore.setData(listCond);
condStore2.setData(listCond);
}
},
fileParse: function(){
......@@ -133,7 +143,7 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController',
condStore.setData(fileName);
},
computeFlux: function(selectedFile, nbCol, condSelect){
computeFlux: function(selectedFile, nbCol, condSelect, condSelect2){
var fluxList = _metExploreViz.flux;
var fileIndex = [];
fluxList.forEach(function(list, i){
......@@ -162,7 +172,7 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController',
}
if (nbCol === "two"){
var condSplit = condSelect.split(" / ");
var condSplit = [condSelect, condSelect2];
var indexCond = [];
for (var i = 0; i < fluxCond.length; i++){
......@@ -182,7 +192,12 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController',
}
}
metExploreD3.GraphFlux.displayChoice(conData, targetLabel, nbCol);
metExploreD3.GraphFlux.graphDistrib(conData);
if (nbCol === "one"){
metExploreD3.GraphFlux.graphDistribOne(conData);
}
if (nbCol === "two"){
metExploreD3.GraphFlux.graphDistribTwo(conData);
}
}
});
......@@ -454,7 +454,7 @@ metExploreD3.GraphCaption = {
},
/*****************************************************
* Draw caption for flux mode
* Draw caption for flux mode 1 value
*/
drawCaptionFluxMode : function(){
d3.select("#viz")
......@@ -748,6 +748,301 @@ metExploreD3.GraphCaption = {
},
/*****************************************************
* Draw caption for flux mode 2 value
*/
drawCaptionTwoFluxMode : function(){
d3.select("#viz")
.select("#D3viz")
.select(".logoViz")
.remove();
d3.select("#viz")
.select("#D3viz")
.selectAll(".linkCaptionRev")
.remove();
d3.select("#viz")
.select("#D3viz")
.selectAll(".reactionCaption")
.remove();
d3.select("#viz")
.select("#D3viz")
.selectAll(".textCaptionRev")
.remove();
d3.select("#viz")
.select("#D3viz")
.selectAll(".metaboliteCaption")
.remove();
// Load user's preferences
var reactionStyle = metExploreD3.getReactionStyle();
var maxDimRea = Math.max(reactionStyle.getWidth(),reactionStyle.getHeight());
var xRea = 15/maxDimRea;
var metaboliteStyle = metExploreD3.getMetaboliteStyle();
var maxDimMet = Math.max(metaboliteStyle.getWidth(),metaboliteStyle.getHeight());
var xMet = 15/maxDimMet;
// This part create the legend of the representation and
// add a mention to Metexplore in the right bottom
// corner
var sx = 15/2 - reactionStyle.getWidth()*xRea/2;
var sy = 15;
var linkStyle = metExploreD3.getLinkStyle();
var path1 = "M"+(50 + 15/2 - reactionStyle.getWidth()*xRea/2 - reactionStyle.getWidth()*xRea)+","+sy+
"L"+sx+","+sy;
var path2 = "M"+(50 + 15/2 - reactionStyle.getWidth()*xRea/2)+","+sy+
"L"+(sx+90)+","+sy;
var path3 = "M"+(50 + 15/2 - reactionStyle.getWidth()*xRea/2)+","+sy+
"L"+(sx+80)+","+sy+"L"+(sx+80)+","+(sy-5)+"L"+(sx+90)+","+sy+"L"+
(sx+80)+","+(sy+5)+"L"+(sx+80)+","+sy;
var path4 = "M"+(50 + 15/2 - reactionStyle.getWidth()*xRea/2 - reactionStyle.getWidth()*xRea)+","+sy+
"L"+(sx+10)+","+sy+
"L"+(sx+10)+","+(sy-5)+
"L"+sx+","+sy+
"L"+(sx+10)+","+(sy+5)+
"L"+(sx+10)+","+sy;
// Reaction without flux data
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,"+(40-(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",path1)
.attr("class", 'linkCaptionRev')
.attr("fill-rule", "evenodd")
.attr("fill", 'white')
.style("stroke",linkStyle.getStrokeColor())
.style("stroke-width", 1.5)
.style("stroke-linejoin", "bevel")
.attr("transform","translate(15,40)");
d3.select("#viz").select("#D3viz")
.append("svg:path")
.attr("class", String)
.attr("d",path3)
.attr("class", 'linkCaptionRev')
.attr("fill-rule", "evenodd")
.attr("fill", 'white')
.style("stroke",linkStyle.getStrokeColor())
.style("stroke-width", 1.5)
.style("stroke-linejoin", "bevel")
.attr("transform","translate(15,40)");
d3.select("#viz").select("#D3viz")
.append("svg:text")
.text('Reaction without flux data')
.attr('class', 'textCaptionRev')
.attr('x', 20)
.attr('y', 15)
.attr("transform", "translate(0,65)");
// Reaction with positive 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,"+(85-(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",path1)
.attr("class", 'linkCaptionRev')
.attr("fill-rule", "evenodd")
.attr("fill", 'white')
.style("stroke","blue")
.style("stroke-width", 1.5)
.style("stroke-linejoin", "bevel")
.attr("transform","translate(15,85)");
d3.select("#viz").select("#D3viz")
.append("svg:path")
.attr("class", String)
.attr("d",path3)
.attr("class", 'linkCaptionRev')
.attr("fill-rule", "evenodd")
.attr("fill", 'white')
.style("stroke","blue")
.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 first condition value')
.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",path1)
.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",path3)
.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 second condition value')
.attr('class', 'textCaptionRev')
.attr('x', 20)
.attr('y', 15)
.attr("transform", "translate(0,155)");
// Reaction with null 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,"+(175-(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",path1)
.attr("class", 'linkCaptionRev')
.attr("fill-rule", "evenodd")
.attr("fill", 'white')
.style("stroke",linkStyle.getStrokeColor())
.style("stroke-width", 1.5)
.style("stroke-linejoin", "bevel")
.style("stroke", "black")
.style("stroke-dasharray",8)
.attr("transform","translate(15,175)");
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",linkStyle.getStrokeColor())
.style("stroke-width", 1.5)
.style("stroke-linejoin", "bevel")
.style("stroke", "black")
.style("stroke-dasharray",8)
.attr("transform","translate(15,175)");
d3.select("#viz").select("#D3viz")
.append("svg:text")
.attr('class', 'textCaptionRev')
.text('Reaction with 0 flux')
.attr('x', 20)
.attr('y', 15)
.attr("transform", "translate(0,200)");
if(d3.select("#viz")
.select("#D3viz")
.select("#logoViz")){
var logo = d3.select("#viz")
.select("#D3viz")
.append("svg:g")
.attr("class","logoViz").attr("id","logoViz")
logo.append("image")
.attr("xlink:href", "resources/icons/metExploreViz_Logo.svg")
.attr("width", "75")
.attr("height", "75")
.attr('x', $("#viz").width() - 124)
.attr('y', $("#viz").height() - 100);
logo.append("svg:text")
.attr('id', 'metexplore')
.text('MetExploreViz v'+Ext.manifest.version)
.attr('x', $("#viz").width() - 150)
.attr('y', $("#viz").height() - 10);
}
d3.select("#viz").select("#D3viz")
.append("svg:rect")
.attr('class', 'metaboliteCaption')
.attr('x', 15/2 - metaboliteStyle.getWidth()*xMet/2)
.attr('y', 15 + 15/2 - metaboliteStyle.getHeight()*xMet/2)
.attr("width", metaboliteStyle.getWidth()*xMet)
.attr("height", metaboliteStyle.getHeight()*xMet)
.attr("rx", metaboliteStyle.getRX()*xMet)
.attr("ry", metaboliteStyle.getRY()*xMet)
.attr("fill", "white")
.style("stroke", "#000000")
.style("stroke-width", 2)
.attr("transform","translate(15,230)");
d3.select("#viz").select("#D3viz")
.append("svg:text")
.attr('class', 'textCaptionRev')
.text('Metabolites')
.attr('x', 20)
.attr('y',15)
.attr("transform","translate(30,240)");
},
/*****************************************************
* Maj caption for convex hulls
* @param {String} panel Panel to update convex hull
......
This diff is collapsed.
......@@ -408,9 +408,12 @@ metExploreD3.GraphLink = {
}
}
if (metExploreD3.GraphStyleEdition.fluxPath === true){
if (metExploreD3.GraphStyleEdition.fluxPath1 === true){
metExploreD3.GraphFlux.curveEdge();
}
if (metExploreD3.GraphStyleEdition.fluxPath2 === true){
metExploreD3.GraphFlux.curveTwoEdge();
}
if(metExploreD3.getGeneralStyle().isDisplayedPathwaysOnLinks())
metExploreD3.GraphCaption.majCaptionPathwayOnLink();
......@@ -669,9 +672,12 @@ metExploreD3.GraphLink = {
metExploreD3.GraphLink.bundleLinks(panel);
}
}
else if (metExploreD3.GraphStyleEdition.fluxPath === true){
else if (metExploreD3.GraphStyleEdition.fluxPath1 === true){
metExploreD3.GraphFlux.curveEdge();
}
else if (metExploreD3.GraphStyleEdition.fluxPath2 === true){
metExploreD3.GraphFlux.curveTwoEdge();
}
else {
var scale = metExploreD3.getScaleById("viz");
......
......@@ -19,7 +19,8 @@ metExploreD3.GraphStyleEdition = {
editMode: false,
curvedPath: false,
allDrawnCycles: [],
fluxPath: false,
fluxPath1: false,
fluxPath2: false,
/*******************************************
* Apply respective styles to labels
......