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

Finish feature/FluxVizu

parents 1dfd6381 e6221044
......@@ -293,6 +293,14 @@
"path": "resources/lib/model/MappingData.js",
"bundle": true
},
{
"path": "resources/lib/model/Flux.js",
"bundle": true
},
{
"path": "resources/lib/model/FluxData.js",
"bundle": true
},
{
"path": "resources/lib/model/Scale.js",
"bundle": true
......@@ -364,6 +372,10 @@
{
"path": "resources/lib/functions/GraphStyleEdition.js",
"bundle": true
},
{
"path": "resources/lib/functions/GraphFlux.js",
"bundle": true
}
],
......
/**
* @author JCG
* ButtonImportFlux : Allows flux data import from a tab file
*/
Ext.define('metExploreViz.view.button.buttonImportFlux.ButtonImportFlux', {
extend: 'Ext.form.Panel',
alias:'widget.buttonImportFlux',
controller : 'buttonImportFlux',
requires: [
'metExploreViz.view.button.buttonImportFlux.ButtonImportFluxController'
],
hideLabel: true,
items: [{
// Allows opening file manager of client side
xtype: 'filefield',
name : 'fileData',
buttonOnly: true,
id : 'IDimportFL',
reference : 'importFluxHidden',
// Allows button GUI
buttonConfig: {
id : 'IDimportFlux'
}
}]
});
/**
* @author JCG
* ButtonImportFluxController : Allows flux data import from a tab file
* This class is the controller for the ButtonImportFlux view
*/
Ext.define('metExploreViz.view.button.buttonImportFlux.ButtonImportFluxController', {
extend: 'Ext.app.ViewController',
alias: 'controller.buttonImportFlux',
init: function() {
var me = this,
view = me.getView();
// Listener which allows opening file manager of client side
view.lookupReference('importFluxHidden').on({
change: function(){
metExploreD3.GraphUtils.handleFileSelect(view.lookupReference('importFluxHidden').fileInputEl.dom, me.loadData);
view.lookupReference('importFluxHidden').fileInputEl.dom.value = "";
},
scope:me
});
},
/*****************************************************
* Parse file and create flux object
* @param tabTxt : file content
* @param title : file title
*/
loadData : function(tabTxt, title) {
var me=this;
var data = tabTxt;
tabTxt = tabTxt.replace(/\r/g, "");
var lines = tabTxt.split('\n');
var firstLine = lines.splice(0, 1);
firstLine = firstLine[0].split('\t');
var targetName = firstLine.splice(0, 1);
var array = [];
for (var i = 0; i < _metExploreViz.flux.length; i++){
if (title === _metExploreViz.flux[i].name){
metExploreD3.displayWarning("Loaded file", "This file has already been loaded");
return;
}
}
if(targetName[0]=="Identifier" || targetName[0]=="reactionId" || targetName[0]=="Name") {
var flux = new Flux(title, firstLine, targetName[0], array);
for (var i = lines.length - 1; i >= 0; i--) {
lines[i] = lines[i].split('\t').map(function (val) {
return val.replace(",", ".");
});
if (lines[i].length === 1){
lines.pop(i);
}
}
flux.data = lines;
_metExploreViz.addFlux(flux);
metExploreD3.fireEvent("fluxMapping","fileParse");
metExploreD3.fireEvent("fluxMapping","fileLoad");
}
else {
// Warning for bad syntax file
metExploreD3.displayWarning("Syntaxe error", 'File have bad syntax.');
}
}
});
......@@ -14,7 +14,7 @@ Ext.define('metExploreViz.view.button.buttonImportMapping.ButtonImportMapping',
// Allows opening file manager of client side
xtype: 'filefield',
name : 'fileData',
buttonOnly: true,
buttonOnly: true,
id : 'IDimport',
reference : 'importMappingHidden',
// Allows button GUI
......@@ -22,4 +22,4 @@ Ext.define('metExploreViz.view.button.buttonImportMapping.ButtonImportMapping',
id : 'IDimportMapping'
}
}]
});
\ No newline at end of file
});
/**
* @author JCG
* (a)description fluxMappingForm : Display flux value caption
*/
Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingForm', {
extend: 'Ext.panel.Panel',
alias: 'widget.fluxMappingForm',
requires: [
"metExploreViz.view.form.fluxMappingForm.FluxMappingFormController",
"metExploreViz.view.form.fluxMappingForm.FluxMappingFormModel",
"metExploreViz.view.form.continuousNumberMappingEditor.ContinuousNumberMappingEditor"
],
controller: "form-fluxMappingForm-fluxMappingForm",
viewModel: {
type: "form-fluxMappingForm-fluxMappingForm"
},
layout:{
type:'vbox',
align:'stretch'
},
region:'north',
width:'100%',
margins:'0 0 0 0',
split:true,
animation: true,
autoScroll: true,
autoHeight: true,
disabled: true,
id: "fluxMappingID",
items: [
{
xtype: 'label',
html: 'Select file or mapping :',
margin: '15 15 5 15'
},
{
border: false,
xtype:'panel',
autoScroll: true,
layout:{
type:'hbox',
align:'stretch'
},
items: [
{
store: {
fields: ['file']
},
xtype: 'combobox',
displayField: 'file',
valueField: 'file',
queryMode: 'local',
editable: false,
emptyText: '-- Select file or mapping --',
margin: '5 5 5 5',
width: '100%',
anyMatch: true,
reference: 'selectFile'
}
]
},
{
xtype: 'label',
html: 'Select number of value to visualize :',
margin: '15 15 5 15'
},
{
border: false,
xtype:'panel',
autoScroll: true,
layout:{
type:'hbox',
align:'stretch'
},
items: [
{
store: {
fields: ['nbCol'],
data: [
{'nbCol':'one'},
{'nbCol':'two'}
]
},
xtype: 'combobox',
displayField: 'nbCol',
valueField: 'nbCol',
queryMode: 'local',
editable: false,
emptyText: '-- Number of value --',
margin: '5 5 5 5',
width: '100%',
anyMatch: true,
reference: 'selectColNumber'
}
]
},
{
xtype: 'label',
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',
autoScroll: true,
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: '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;">'
}
]
},
{
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: '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;">'
}
]
},
{
xtype: 'label',
html: 'Scale selector :',
margin: '15 15 5 15'
},
{
xtype: 'panel',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
store: {
fields: ['selectScale'],
data: [
{'selectScale' : 'Automatic'},
{'selectScale' : 'Proportional'},
{'selectScale' : 'Manual'}
]
},
xtype: 'combobox',
displayField: 'selectScale',
valueField: 'selectScale',
queryMode: 'local',
editable: false,
value: 'Automatic',
margin: '5 5 5 5',
width: '100%',
reference: 'scaleSelector'
}
]
},
{
xtype: 'panel',
layout: {
type: 'hbox'
},
items: [
{
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%'
}
]
},
{
xtype: 'checkboxfield',
boxLabel: 'Distribution graph : only display data',
reference: 'displayGraphDistrib',
margin: '5 5 5 5'
},
{
xtype: 'checkboxfield',
boxLabel: 'Add flux values on network',
margin: '0 0 0 5',
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 Identifier"},
{"labels":"None"}
]
},
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: 'panel',
layout: {
type: 'hbox'
},
items: [
{
xtype: 'button',
html: 'Display',
width: '75%',
margin: '5 5 5 5',
reference: 'runFluxVizu'
},
{
xtype: 'button',
html: 'Refresh',
width: '25%',
margin: '5 5 5 5',
reference: 'runNewParams',
disabled: true
}
]
},
{
xtype: 'panel',
layout: 'vbox',
margin: "15 5 5 5",
items: [
{
flex: 1,
html: "<div id='graphDistrib' height='100%' width='100%'></div>"
}
]
}
]
});
This diff is collapsed.
Ext.define('metExploreViz.view.form.fluxMappingForm.FluxMappingFormModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.form-fluxMappingForm-fluxMappingForm',
parent:'graphPanel',
data: {
name: 'metExploreViz'
}
});
/**
* @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',