Skip to content

GitLab

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

Manual scale edit for flux

parent 1fc99ad8
Hide whitespace changes
Inline Side-by-side
app/view/form/fluxMappingForm/FluxMappingForm.js
View file @ cbc74ca3
...@@ -243,12 +243,64 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingForm', { ...@@ -243,12 +243,64 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingForm', {
}, },
{ {
xtype: "panel", xtype: 'panel',
reference: "scaleEditor", layout: {
height: 110, type: 'hbox'
hidden:true, },
width: 550, items: [
html: "<svg id='scaleEditor' height='110' width='250px'> </svg>" {
xtype: "panel",
reference: "scaleEditor",
height: 110,
hidden:true,
width: '50%',
style: {
'text-align': 'center'
},
html: "<svg id='scaleEditor' height='110' width='250px'> </svg>"
},
{
xtype: "panel",
reference: "scaleEditor2",
height: 110,
hidden:true,
width: '50%',
style: {
'text-align': 'center'
},
html: "<svg id='scaleEditor2' height='110' width='250px'> </svg>"
}
]
},
{
xtype: 'panel',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
xtype: 'label',
html: 'First condition',
reference: 'scaleEditorLabel1',
hidden: true,
style: {
'text-align': 'center'
},
width: '50%'
},
{
xtype: 'label',
html: 'Second condition',
reference: 'scaleEditorLabel2',
hidden: true,
style: {
'text-align': 'center'
},
width: '50%'
}
]
}, },
{ {
......
app/view/form/fluxMappingForm/FluxMappingFormController.js
View file @ cbc74ca3
...@@ -6,6 +6,9 @@ ...@@ -6,6 +6,9 @@
Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController', { Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController', {
extend: 'Ext.app.ViewController', extend: 'Ext.app.ViewController',
alias: 'controller.form-fluxMappingForm-fluxMappingForm', alias: 'controller.form-fluxMappingForm-fluxMappingForm',
requires: [
"metExploreViz.view.form.fluxScaleEditor.FluxScaleEditor"
],
/** /**
* Aplies event linsteners to the view * Aplies event linsteners to the view
...@@ -25,6 +28,9 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController', ...@@ -25,6 +28,9 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController',
}, },
fileLoad: function(){ fileLoad: function(){
view.enable(); view.enable();
},
updateScaleEditor: function(){
me.updateScaleEditor();
} }
}); });
...@@ -47,11 +53,21 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController', ...@@ -47,11 +53,21 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController',
view.lookupReference("secondConditionLabel").setHidden(false); view.lookupReference("secondConditionLabel").setHidden(false);
view.lookupReference("firstConditionLabel").setHidden(false); view.lookupReference("firstConditionLabel").setHidden(false);
view.lookupReference("secondConditionBox").setHidden(false); view.lookupReference("secondConditionBox").setHidden(false);
if (view.lookupReference('scaleSelector').getValue() === "Manual"){
view.lookupReference('scaleEditorLabel1').setHidden(false);
view.lookupReference('scaleEditorLabel2').setHidden(false);
view.lookupReference('scaleEditor2').setHidden(false);
}
} }
if (view.lookupReference('selectColNumber').getValue() === "one"){ if (view.lookupReference('selectColNumber').getValue() === "one"){
view.lookupReference("secondConditionLabel").setHidden(true); view.lookupReference("secondConditionLabel").setHidden(true);
view.lookupReference("firstConditionLabel").setHidden(true); view.lookupReference("firstConditionLabel").setHidden(true);
view.lookupReference("secondConditionBox").setHidden(true); view.lookupReference("secondConditionBox").setHidden(true);
if (view.lookupReference('scaleSelector').getValue() === "Manual"){
view.lookupReference('scaleEditorLabel2').setHidden(true);
view.lookupReference('scaleEditorLabel1').setHidden(true);
view.lookupReference('scaleEditor2').setHidden(true);
}
} }
if (view.lookupReference('selectFile').getValue() !== null){ if (view.lookupReference('selectFile').getValue() !== null){
if (view.lookupReference('selectColNumber').getValue() === "one"){ if (view.lookupReference('selectColNumber').getValue() === "one"){
...@@ -200,14 +216,72 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController', ...@@ -200,14 +216,72 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController',
view.lookupReference('scaleSelector').on({ view.lookupReference('scaleSelector').on({
change: function(){ change: function(){
if (this.getValue() === "Manual"){ if (this.getValue() === "Manual"){
view.lookupReference('scaleEditor').setHidden(false); var nbCol = view.lookupReference('selectColNumber').getValue();
var condSelect = view.lookupReference('selectConditionFlux').getValue(); if (nbCol === "one"){
if (condSelect !== null){ var condSelect = view.lookupReference('selectConditionFlux').getValue();
me.drawScaleEditor(); if (condSelect !== null){
view.lookupReference('scaleEditor').setHidden(false);
var selectedFile = view.lookupReference('selectFile').getValue();
me.drawScaleEditor(selectedFile, condSelect, "null", nbCol);
}
}
if (nbCol === "two"){
var condSelect = view.lookupReference('selectConditionFlux').getValue();
var condSelect2 = view.lookupReference('selectConditionFlux2').getValue();
if (condSelect !== null){
view.lookupReference('scaleEditor').setHidden(false);
view.lookupReference('scaleEditorLabel1').setHidden(false);
}
if (condSelect2 !== null){
view.lookupReference('scaleEditor2').setHidden(false);
view.lookupReference('scaleEditorLabel2').setHidden(false);
}
if (condSelect !== null && condSelect2 !== null){
var selectedFile = view.lookupReference('selectFile').getValue();
me.drawScaleEditor(selectedFile, condSelect, condSelect2, nbCol);
}
} }
} }
if (this.getValue() !== "Manual"){ if (this.getValue() !== "Manual"){
view.lookupReference('scaleEditor').setHidden(true); view.lookupReference('scaleEditor').setHidden(true);
view.lookupReference('scaleEditor2').setHidden(true);
view.lookupReference('scaleEditorLabel1').setHidden(true);
view.lookupReference('scaleEditorLabel2').setHidden(true);
}
}
});
view.lookupReference('selectConditionFlux').on({
change: function(){
if (view.lookupReference('scaleSelector').getValue() === "Manual"){
view.lookupReference('scaleEditor').setHidden(false);
var condSelect = view.lookupReference('selectConditionFlux').getValue();
var condSelect2 = view.lookupReference('selectConditionFlux2').getValue();
var selectedFile = view.lookupReference('selectFile').getValue();
var nbColSelect = view.lookupReference('selectColNumber').getValue();
if (condSelect2 === undefined){
me.drawScaleEditor(selectedFile, condSelect, "null", nbColSelect);
}
if (condSelect2 !== undefined){
me.drawScaleEditor(selectedFile, condSelect, condSelect2, nbColSelect);
}
}
}
});
view.lookupReference('selectConditionFlux2').on({
change: function(){
if (view.lookupReference('scaleSelector').getValue() === "Manual"){
view.lookupReference('scaleEditor2').setHidden(false);
view.lookupReference('scaleEditorLabel2').setHidden(false);
view.lookupReference('scaleEditorLabel1').setHidden(false);
var condSelect = view.lookupReference('selectConditionFlux').getValue();
var condSelect2 = view.lookupReference('selectConditionFlux2').getValue();
var selectedFile = view.lookupReference('selectFile').getValue();
var nbColSelect = view.lookupReference('selectColNumber').getValue();
me.drawScaleEditor(selectedFile, condSelect, condSelect2, nbColSelect);
} }
} }
}); });
...@@ -263,6 +337,33 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController', ...@@ -263,6 +337,33 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController',
}, },
computeFlux: function(selectedFile, nbCol, condSelect, condSelect2, color, switchGraph, scaleSelector){ computeFlux: function(selectedFile, nbCol, condSelect, condSelect2, color, switchGraph, scaleSelector){
var me = this;
var view = me.getView();
var data = this.getFluxData(selectedFile, nbCol, condSelect, condSelect2);
var conData = data[0];
var targetLabel = data[1];
var scaleRange1 = [];
var scaleRange2 = [];
var scaleSave = view[selectedFile];
if (scaleSave !== undefined){
var scaleRange1 = scaleSave[condSelect];
var scaleRange2 = scaleSave[condSelect2];
}
metExploreD3.GraphFlux.displayChoice(conData, targetLabel, nbCol, color, scaleSelector, scaleRange1, scaleRange2);
if (nbCol === "one"){
metExploreD3.GraphFlux.graphDistribOne(conData, color, switchGraph, scaleSelector, scaleRange1);
}
if (nbCol === "two"){
metExploreD3.GraphFlux.graphDistribTwo(conData, color, switchGraph, scaleSelector, scaleRange1, scaleRange2);
}
},
getFluxData: function(selectedFile, nbCol, condSelect, condSelect2){
var fluxList = _metExploreViz.flux; var fluxList = _metExploreViz.flux;
var fileIndex = []; var fileIndex = [];
fluxList.forEach(function(list, i){ fluxList.forEach(function(list, i){
...@@ -311,45 +412,183 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController', ...@@ -311,45 +412,183 @@ Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormController',
conData.push(data); conData.push(data);
} }
} }
var fluxData = [conData, targetLabel];
return fluxData;
},
metExploreD3.GraphFlux.displayChoice(conData, targetLabel, nbCol, color, scaleSelector); drawScaleEditor: function(selectedFile, selectedCond, selectedCond2, nbCol) {
var me = this;
var view = me.getView();
if (nbCol === "one"){ var margin = 0;
metExploreD3.GraphFlux.graphDistribOne(conData, color, switchGraph, scaleSelector); var width = 190;
var height = 50;
var data = this.getFluxData(selectedFile, nbCol, selectedCond, selectedCond2);
var fluxData = data[0];
var targetLabel = data[1];
var dataSave = view[selectedFile];
if (dataSave === undefined){
dataSave = {};
} }
if (nbCol === "two"){ if (nbCol === "two"){
metExploreD3.GraphFlux.graphDistribTwo(conData, color, switchGraph, scaleSelector); var fluxData1 = [];
var fluxData2 = [];
for (var i = 0; i < fluxData.length; i++){
var tmp = [fluxData[i][0], fluxData[i][1]];
fluxData1.push(tmp);
var tmp = [fluxData[i][0], fluxData[i][2]];
fluxData2.push(tmp);
}
var scaleRange1 = metExploreD3.GraphFlux.getScale(fluxData1, targetLabel);
var scaleRange2 = metExploreD3.GraphFlux.getScale(fluxData2, targetLabel);
if (dataSave[selectedCond] !== undefined){
scaleRange1 = dataSave[selectedCond];
}
if (dataSave[selectedCond] === undefined) {
dataSave[selectedCond] = scaleRange1;
}
if (dataSave[selectedCond2] !== undefined){
scaleRange2 = dataSave[selectedCond2];
}
if (dataSave[selectedCond2] === undefined) {
dataSave[selectedCond2] = scaleRange2;
}
view[selectedFile] = dataSave;
var svg = d3.select(view.lookupReference('scaleEditor').el.dom).select("#scaleEditor");
metExploreD3.GraphNumberScaleEditor.createNumberScaleCaption(svg, width, height, margin, scaleRange1);
svg.on("click", function(){
var win = Ext.create("metExploreViz.view.form.fluxScaleEditor.FluxScaleEditor", {
scaleRange: scaleRange1,
cond: "first"
});
win.show();
});
var svg2 = d3.select(view.lookupReference('scaleEditor2').el.dom).select("#scaleEditor2");
metExploreD3.GraphNumberScaleEditor.createNumberScaleCaption(svg2, width, height, margin, scaleRange2);
svg2.on("click", function(){
var win = Ext.create("metExploreViz.view.form.fluxScaleEditor.FluxScaleEditor", {
scaleRange: scaleRange2,
cond: "second"
});
win.show();
});
}
if (nbCol === "one"){
var scaleRange = metExploreD3.GraphFlux.getScale(fluxData, targetLabel);
if (dataSave[selectedCond] !== undefined){
scaleRange = dataSave[selectedCond];
}
else {
dataSave[selectedCond] = scaleRange;
}
view[selectedFile] = dataSave;
var svg = d3.select(view.lookupReference('scaleEditor').el.dom).select("#scaleEditor");
metExploreD3.GraphNumberScaleEditor.createNumberScaleCaption(svg, width, height, margin, scaleRange);
svg.on("click", function(){
var win = Ext.create("metExploreViz.view.form.fluxScaleEditor.FluxScaleEditor", {
scaleRange: scaleRange,
cond: "first"
});
win.show();
});
} }
}, },
drawScaleEditor : function() { updateScaleEditor: function(){
var me = this; var me = this;
var view = me.getView(); var view = me.getView();
var margin = 0; var margin = 0;
var width = 190; var width = 190;
var height = 50; var height = 50;
var scaleRange = [ var selectedFile = view.lookupReference('selectFile').getValue();
{id:"start",value:-10,styleValue:1},
{id:1,value:-10,styleValue:1}, var scaleRange = Ext.getCmp("fluxScaleEditorID").scaleRange;
{id:2,value:1000,styleValue:5}, var cond = Ext.getCmp("fluxScaleEditorID").cond;
{id:"end",value:1000,styleValue:5}
]; if (cond === "first"){
var selectedCond = view.lookupReference('selectConditionFlux').getValue();
var dataSave = view[selectedFile];
if (dataSave !== undefined){
dataSave[selectedCond] = scaleRange;
}
else {
dataSave = {};
dataSave[selectedCond] = scaleRange;
}
view[selectedFile] = dataSave;
var svg = d3.select(view.lookupReference('scaleEditor').el.dom).select("#scaleEditor");
svg.selectAll("*").remove();
svg = d3.select(view.lookupReference('scaleEditor').el.dom).select("#scaleEditor");
var svg = d3.select(view.lookupReference('scaleEditor').el.dom).select("#scaleEditor"); metExploreD3.GraphNumberScaleEditor.createNumberScaleCaption(svg, width, height, margin, scaleRange);
var test = d3.select("#viz");
metExploreD3.GraphNumberScaleEditor.createNumberScaleCaption(svg, width, height, margin, scaleRange); svg.on("click", function(){
var win = Ext.create("metExploreViz.view.form.fluxScaleEditor.FluxScaleEditor", {
scaleRange: scaleRange,
cond: 'first'
});
win.show();
});
}
svg.on("click", function(){ if (cond === "second"){
var win = Ext.create("metExploreViz.view.form.continuousNumberMappingEditor.ContinuousNumberMappingEditor", { var selectedCond = view.lookupReference('selectConditionFlux2').getValue();
height : 300,
aStyleFormParent : view var dataSave = view[selectedFile];
}); if (dataSave !== undefined){
dataSave[selectedCond] = scaleRange;
}
else {
dataSave = {};
dataSave[selectedCond] = scaleRange;
}
view[selectedFile] = dataSave;
var svg = d3.select(view.lookupReference('scaleEditor2').el.dom).select("#scaleEditor2");
svg.selectAll("*").remove();
svg = d3.select(view.lookupReference('scaleEditor2').el.dom).select("#scaleEditor2");
metExploreD3.GraphNumberScaleEditor.createNumberScaleCaption(svg, width, height, margin, scaleRange);
svg.on("click", function(){
var win = Ext.create("metExploreViz.view.form.fluxScaleEditor.FluxScaleEditor", {
scaleRange: scaleRange,
cond: 'second'
});
win.show();
});
}
win.show();
});
} }
......
app/view/form/fluxScaleEditor/FluxScaleEditor.js 0 → 100644
View file @ cbc74ca3
<
/**
* @author JCG
* (a)description Window to edit scale for flux
* fluxScaleEditor
*/
Ext.define('metExploreViz.view.form.fluxScaleEditor.FluxScaleEditor', {
extend: 'Ext.window.Window',
alias: 'widget.fluxScaleEditor',
requires: [
"metExploreViz.view.form.fluxScaleEditor.FluxScaleEditorController"
],
controller: "form-fluxScaleEditor-fluxScaleEditor",
title: 'flux scale editor',
id: 'fluxScaleEditorID',
height: "400px",
maxWidth: 600,
minWidth: 600,
x: 100,
y: 100,
maxHeight: 460,
minHeight: 460,
layout:{
type:'vbox',
align:'stretch'
},
items: [
{
xtype: "panel",
reference: "scaleEditor",
height: 150,
width: 550,
html: "<svg id='svgScaleEditor' height='150' width='600px'> </svg>"
},
{
xtype: 'fieldset',
title: 'Edit position and value of selected number',
instructions: 'Edit position and value of selected number',
layout:{
type:'hbox'
},
margin: "5 15 5 15",
items: [
{
margin: "10 0 10 0",
xtype: 'label',
html: 'Value :'
},
{
margin: "5 15 5 15",
reference: "textfieldValue",
xtype: 'numberfield',
label: 'Position',
value: ''
},{
margin: "10 0 10 0",
xtype: 'label',
html: 'Number :'
},{
xtype: 'button',
margin: "5 40 5 10",
disabled: true,
hidden: true,
cls: "aStyleFormButton",
reference: "disabledButton",
border: "1px",
text: '',
height:"30px",
width:"30px",
listeners : {
render: function(c) {
if(c.isDisabled())
c.setTooltip("To set the number property, select a slider");
},
disable: function(c) {
c.setTooltip("To set the number property, select a slider");
},
enable: function(c) {
c.setTooltip("");
}
}
},{
xtype: 'numberfield',
html: 'Number :',
reference: "numberButton",
hidden: false,
border: false,
cls: "aStyleFormNumber",
margin: "5 40 5 10",
height:"30px",
width:"100px"
},
{
margin: "5 15 5 15",
xtype: 'button',
reference: 'delButton',
text: 'Remove'
}
]
}