Skip to content

GitLab

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
Expand all Hide whitespace changes
Inline Side-by-side
app/view/form/fluxMappingForm/FluxMappingForm.js
View file @ f95a56a8
......@@ -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',
......
app/view/form/fluxMappingForm/FluxMappingFormController.js
View file @ f95a56a8
......@@ -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);
}
}
});
resources/lib/functions/GraphCaption.js
View file @ f95a56a8
......@@ -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
......
resources/lib/functions/GraphFlux.js
View file @ f95a56a8
This diff is collapsed.
resources/lib/functions/GraphLink.js
View file @ f95a56a8
......@@ -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");
......
resources/lib/functions/GraphStyleEdition.js
View file @ f95a56a8
......@@ -19,7 +19,8 @@ metExploreD3.GraphStyleEdition = {
editMode: false,
curvedPath: false,
allDrawnCycles: [],
fluxPath: false,
fluxPath1: false,
fluxPath2: false,
/*******************************************
* Apply respective styles to labels
......