opensource/galaxy
3
0
Fork 0
mirror of https://github.com/galaxyproject/galaxy.git synced 2026-09-24 16:30:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

Charts/Ui: Improvements and fixes

Browse Source
This commit is contained in:
Aysam Guerler
2014-03-21 00:05:21 -04:00
parent 3e62378b2a
commit 292444eedf
17 changed files with 209 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/plugins/visualizations/charts/static/app.js
+17 -2
View File
@@ -59,8 +59,8 @@ return Backbone.View.extend(
this.setElement(this.portlet);
}
// hide views
this.charts_view.$el.hide();
// start with chart view
this.go('chart_view');
// events
var self = this;
@@ -72,6 +72,21 @@ return Backbone.View.extend(
this.render();
},
// loads a view and makes sure that all others are hidden
go: function(view_id) {
// pick view
switch (view_id) {
case 'chart_view' :
this.chart_view.show();
this.charts_view.hide();
break;
case 'charts_view' :
this.chart_view.hide();
this.charts_view.show();
break;
}
},
// render
render: function() {
this._refreshTitle();
config/plugins/visualizations/charts/static/build-app.js
+1 -1
View File
File diff suppressed because one or more lines are too long
config/plugins/visualizations/charts/static/charts/histogram/config.js
-40
View File
@@ -17,46 +17,6 @@ return $.extend(true, {}, nvd3_config, {
},
y_axis_tick : {
init : '.3'
},
separator_custom : {
title : 'Advanced',
type : 'separator'
},
bin_size : {
title : 'Bin size',
info : 'Provide the bin size for the histogram.',
type : 'select',
init : 1,
data : [
{
label : '0.001',
value : '0.001'
},
{
label : '0.01',
value : '0.01'
},
{
label : '0.1',
value : '0.1'
},
{
label : '1',
value : '1'
},
{
label : '10',
value : '10'
},
{
label : '100',
value : '100'
},
{
label : '1000',
value : '1000'
}
]
}
}
});
config/plugins/visualizations/charts/static/library/jobs.js
+1 -1
View File
@@ -92,7 +92,7 @@ return Backbone.Model.extend(
if (response && response.message && response.message.data && response.message.data.input) {
message = response.message.data.input + '.';
}
chart.state('failed', 'This visualization requires processing by the R-kit. Please make sure that it is installed. ' + message);
chart.state('failed', 'This visualization requires the R-kit. Please make sure it is installed. ' + message);
}
);
},
config/plugins/visualizations/charts/static/library/ui-table-form.js
+1 -1
View File
@@ -9,7 +9,7 @@ var View = Backbone.View.extend(
initialize: function(options) {
// ui elements
this.table_title = new Ui.Label({title: options.title});
this.table = new Table({content: options.content});
this.table = new Table.View({content: options.content});
// create element
var $view = $('<div/>');
config/plugins/visualizations/charts/static/library/ui-table.js
+5 -3
View File
@@ -1,8 +1,6 @@
// dependencies
define(['utils/utils'], function(Utils) {
// return
return Backbone.View.extend(
var View = Backbone.View.extend(
{
// current row
row: null,
@@ -202,4 +200,8 @@ return Backbone.View.extend(
}
});
return {
View: View
}
});
config/plugins/visualizations/charts/static/models/chart.js
-19
View File
@@ -58,25 +58,6 @@ return Backbone.Model.extend(
ready: function() {
return (this.get('state') == 'ok') || (this.get('state') == 'failed');
},
// save charts
save: function() {
/*/ create visualization
var vis = new Visualization({
type : 'charts',
config : this.attributes
});
// copy attributes
//vis.set(this.attributes);
// save visualization
vis.save()
.fail( function( xhr, status, message ){
console.error( xhr, status, message );
alert( 'Error loading data:\n' + xhr.responseText );
});*/
}
});
config/plugins/visualizations/charts/static/models/charts.js
+22 -1
View File
@@ -4,7 +4,28 @@ define(['plugin/models/chart'], function(Chart) {
// collection
return Backbone.Collection.extend(
{
model: Chart
model: Chart,
// save charts
save: function() {
// create visualization
var vis = new Visualization({
type : 'charts',
config : {
charts : []
}
});
// copy attributes
//vis.set(this.attributes);
// save visualization
vis.save()
.fail( function( xhr, status, message ){
console.error( xhr, status, message );
alert( 'Error loading data:\n' + xhr.responseText );
});
}
});
});
config/plugins/visualizations/charts/static/views/chart.js
+18 -15
View File
@@ -29,14 +29,14 @@ return Backbone.View.extend(
// table with chart types
//
var self = this;
this.table = new Table({
this.table = new Table.View({
header : false,
onconfirm : function(type) {
if (self.chart.groups.length > 0) {
// show modal
self.app.modal.show({
title : 'Switching to another chart type?',
body : 'If you continue your settings and selections will be reseted.',
body : 'If you continue your settings and selections will be cleared.',
buttons : {
'Cancel' : function() {
// hide modal
@@ -99,17 +99,11 @@ return Backbone.View.extend(
tooltip : 'Draw Chart',
title : 'Draw',
onclick : function() {
// ensure that data group is available
if (self.chart.groups.length == 0) {
self._addGroupModel();
}
// show charts
self.app.go('charts_view');
// save chart
self._saveChart();
// show charts
self.hide();
self.app.charts_view.$el.show();
}
}),
'back' : new Ui.ButtonIcon({
@@ -117,8 +111,7 @@ return Backbone.View.extend(
tooltip : 'Return to Viewer',
title : 'Return',
onclick : function() {
self.hide();
self.app.charts_view.$el.show();
self.app.go('charts_view');
}
})
}
@@ -214,6 +207,11 @@ return Backbone.View.extend(
this._resetChart();
},
// hide
show: function() {
this.$el.show();
},
// hide
hide: function() {
$('.tooltip').hide();
@@ -297,6 +295,11 @@ return Backbone.View.extend(
date : Utils.time()
});
// ensure that data group is available
if (this.chart.groups.length == 0) {
this._addGroupModel();
}
// create/get chart
var current = this.app.charts.get(this.chart.id);
if (!current) {
@@ -307,11 +310,11 @@ return Backbone.View.extend(
current.copy(this.chart);
}
// save
current.save();
// trigger redraw
current.trigger('redraw', current);
// save
this.app.charts.save();
}
});
config/plugins/visualizations/charts/static/views/charts.js
+81 -37
View File
@@ -14,18 +14,11 @@ return Backbone.View.extend(
this.viewport_view = new ViewportView(app);
// table
this.table = new Table({
this.table = new Table.View({
content : 'Add charts to this table.',
ondblclick : function(chart_id) {
// get chart
var chart = self.app.charts.get(chart_id);
self.app.chart.copy(chart);
// hide this element
self.hide();
// show chart view
self.app.chart_view.$el.show();
// attempt to load chart editor
self._showChartView(chart_id);
},
onchange : function(chart_id) {
// get chart
@@ -47,32 +40,46 @@ return Backbone.View.extend(
height : 100,
operations : {
'new' : new Ui.ButtonIcon({
icon : 'fa-magic',
tooltip: 'Create a new Chart',
title: 'New',
onclick: function() {
self.hide();
self.app.chart.reset();
self.app.chart_view.$el.show();
}
}),
icon : 'fa-magic',
tooltip : 'Create a new Chart',
title : 'New',
onclick : function() {
self.app.go('chart_view');
self.app.chart.reset();
}
}),
'edit' : new Ui.ButtonIcon({
icon : 'fa-gear',
tooltip : 'Customize this Chart',
title : 'Customize',
onclick : function() {
// check if element has been selected
var chart_id = self.table.value();
if (!chart_id) {
return;
}
// attempt to load chart editor
self._showChartView(chart_id);
}
}),
'delete' : new Ui.ButtonIcon({
icon : 'fa-trash-o',
tooltip: 'Delete this Chart',
title: 'Delete',
onclick: function() {
icon : 'fa-trash-o',
tooltip : 'Delete this Chart',
title : 'Delete',
onclick : function() {
// check if element has been selected
var chart_id = self.table.value();
if (!chart_id) {
return;
}
// title
var chart = self.app.charts.get(chart_id);
// show modal
self.app.modal.show({
// check if element has been selected
var chart_id = self.table.value();
if (!chart_id) {
return;
}
// title
var chart = self.app.charts.get(chart_id);
// show modal
self.app.modal.show({
title : 'Are you sure?',
body : 'The selected chart "' + chart.get('title') + '" will be irreversibly deleted.',
buttons : {
@@ -116,7 +123,12 @@ return Backbone.View.extend(
self._changeChart(chart);
});
},
// show
show: function() {
this.$el.show();
},
// hide
hide: function() {
$('.tooltip').hide();
@@ -147,11 +159,13 @@ return Backbone.View.extend(
// remove from to table
this.table.remove(chart.id);
// save
this.app.charts.save();
// check if table is empty
if (this.table.size() == 0) {
this.hide();
this.app.go('chart_view');
this.app.chart.reset();
this.app.chart_view.$el.show();
} else {
// select available chart
this.table.value(this.app.charts.last().id);
@@ -167,6 +181,36 @@ return Backbone.View.extend(
// select available chart
this.table.value(chart.id);
}
},
// show chart editor
_showChartView: function(chart_id) {
// get chart
var chart = this.app.charts.get(chart_id);
if (chart.ready()) {
// show chart view
this.app.go('chart_view');
// load chart into view
this.app.chart.copy(chart);
} else {
// show modal
var self = this;
this.app.modal.show({
title : 'Please wait!',
body : 'The selected chart "' + chart.get('title') + '" is currently being processed. Please wait...',
buttons : {
'Close' : function() {self.app.modal.hide();},
'Retry' : function() {
// hide modal
self.app.modal.hide();
// retry
self._showChartView(chart_id);
}
}
});
}
}
});
config/plugins/visualizations/charts/static/views/group.js
+1 -1
View File
@@ -29,7 +29,7 @@ return Backbone.View.extend(
self.group.set('key', self.group_key.value());
}
});
this.table = new Table({content: 'No data column.'});
this.table = new Table.View({content: 'No data column.'});
// create element
var $view = $('<div/>');
config/plugins/visualizations/charts/static/views/viewport.js
+3 -18
View File
@@ -27,14 +27,7 @@ return Backbone.View.extend(
this.portlet = new Portlet.View({
title : 'title',
height : this.options.height,
overflow : 'hidden',
operations : {
'edit' : new Ui.ButtonIcon({
icon : 'fa-gear',
tooltip : 'Customize Chart',
title : 'Customize'
})
}
overflow : 'hidden'
});
// set this element
@@ -80,15 +73,7 @@ return Backbone.View.extend(
// update portlet
this.portlet.title(chart.get('title'));
this.portlet.setOperation('edit', function() {
// get chart
self.app.chart.copy(chart);
// show edit
self.app.charts_view.hide();
self.app.chart_view.$el.show();
});
// show selected chart
item.$el.show();
@@ -124,7 +109,7 @@ return Backbone.View.extend(
self.app.log('viewport:_refreshChart()', 'Invalid attempt to refresh chart before completion.');
return;
}
// backup chart details
var chart_id = chart.id;
config/plugins/visualizations/charts/templates/charts.mako
+1 -2
View File
@@ -15,8 +15,7 @@
'libs/require',
'libs/underscore',
'libs/backbone/backbone',
'libs/d3',
'mvc/base-mvc')}
'libs/d3')}
## css
${h.css( 'base' )}
static/scripts/mvc/ui/ui-portlet.js
+9 -9
View File
@@ -141,31 +141,31 @@ var View = Backbone.View.extend(
// fill template
_template: function(options) {
var tmpl = '<div class="toolForm">';
var tmpl = '<div class="toolForm portlet-view no-highlight">';
if (options.title || options.icon) {
tmpl += '<div id="title" class="toolFormTitle" style="overflow: hidden;">' +
'<div id="operations" style="float: right;"></div>' +
tmpl += '<div id="title" class="toolFormTitle portlet-title">' +
'<div id="operations" class="portlet-operations"/>' +
'<div style="overflow: hidden;">';
if (options.icon)
tmpl += '<i style="padding-top: 3px; float: left; font-size: 1.2em" class="icon fa ' + options.icon + '">&nbsp;</i>';
tmpl += '<div class="portlet-title-icon fa ' + options.icon + '">&nbsp;</div>';
tmpl += '<div id="title-text" style="padding-top: 2px; float: left;">' + options.title + '</div>';
tmpl += '<div id="title-text" class="portlet-title-text">' + options.title + '</div>';
tmpl += '</div>' +
'</div>';
}
tmpl += '<div id="body" class="toolFormBody">';
tmpl += '<div id="body" class="toolFormBody portlet-body">';
if (options.placement == 'top') {
tmpl += '<div id="buttons" class="buttons" style="height: 50px; padding: 10px;"></div>';
tmpl += '<div id="buttons" class="portlet-buttons"/>';
}
tmpl += '<div id="content" class="content" style="height: inherit; padding: 10px;"></div>';
tmpl += '<div id="content" class="portlet-content"/>';
if (options.placement == 'bottom') {
tmpl += '<div id="buttons" class="buttons" style="height: 50px; padding: 10px;"></div>';
tmpl += '<div id="buttons" class="portlet-buttons"/>';
}
tmpl += '</div>' +
static/scripts/packed/mvc/ui/ui-portlet.js
+1 -1
View File
@@ -1 +1 @@
define(["utils/utils"],function(a){var b=Backbone.View.extend({visible:false,optionsDefault:{title:"",icon:"",buttons:null,body:null,height:null,operations:null,placement:"bottom",overflow:"auto"},$title:null,$content:null,$buttons:null,$operations:null,initialize:function(d){this.options=a.merge(d,this.optionsDefault);this.setElement(this._template(this.options));this.$content=this.$el.find("#content");this.$title=this.$el.find("#title-text");if(this.options.height){this.$el.find("#body").css("height",this.options.height);this.$el.find("#content").css("overflow",this.options.overflow)}this.$buttons=$(this.el).find("#buttons");if(this.options.buttons){var c=this;$.each(this.options.buttons,function(e,f){f.$el.prop("id",e);c.$buttons.append(f.$el)})}else{this.$buttons.remove()}this.$operations=$(this.el).find("#operations");if(this.options.operations){var c=this;$.each(this.options.operations,function(e,f){f.$el.prop("id",e);c.$operations.append(f.$el)})}if(this.options.body){this.append(this.options.body)}},append:function(c){this.$content.append(a.wrap(c))},content:function(){return this.$content},show:function(){this.$el.fadeIn("fast");this.visible=true},hide:function(){this.$el.fadeOut("fast");this.visible=false},enableButton:function(c){this.$buttons.find("#"+c).prop("disabled",false)},disableButton:function(c){this.$buttons.find("#"+c).prop("disabled",true)},hideOperation:function(c){this.$operations.find("#"+c).hide()},showOperation:function(c){this.$operations.find("#"+c).show()},setOperation:function(e,d){var c=this.$operations.find("#"+e);c.off("click");c.on("click",d)},title:function(d){var c=this.$title;if(d){c.html(d)}return c.html()},_template:function(d){var c='<div class="toolForm">';if(d.title||d.icon){c+='<div id="title" class="toolFormTitle" style="overflow: hidden;"><div id="operations" style="float: right;"></div><div style="overflow: hidden;">';if(d.icon){c+='<i style="padding-top: 3px; float: left; font-size: 1.2em" class="icon fa '+d.icon+'">&nbsp;</i>'}c+='<div id="title-text" style="padding-top: 2px; float: left;">'+d.title+"</div>";c+="</div></div>"}c+='<div id="body" class="toolFormBody">';if(d.placement=="top"){c+='<div id="buttons" class="buttons" style="height: 50px; padding: 10px;"></div>'}c+='<div id="content" class="content" style="height: inherit; padding: 10px;"></div>';if(d.placement=="bottom"){c+='<div id="buttons" class="buttons" style="height: 50px; padding: 10px;"></div>'}c+="</div></div>";return c}});return{View:b}});
define(["utils/utils"],function(a){var b=Backbone.View.extend({visible:false,optionsDefault:{title:"",icon:"",buttons:null,body:null,height:null,operations:null,placement:"bottom",overflow:"auto"},$title:null,$content:null,$buttons:null,$operations:null,initialize:function(d){this.options=a.merge(d,this.optionsDefault);this.setElement(this._template(this.options));this.$content=this.$el.find("#content");this.$title=this.$el.find("#title-text");if(this.options.height){this.$el.find("#body").css("height",this.options.height);this.$el.find("#content").css("overflow",this.options.overflow)}this.$buttons=$(this.el).find("#buttons");if(this.options.buttons){var c=this;$.each(this.options.buttons,function(e,f){f.$el.prop("id",e);c.$buttons.append(f.$el)})}else{this.$buttons.remove()}this.$operations=$(this.el).find("#operations");if(this.options.operations){var c=this;$.each(this.options.operations,function(e,f){f.$el.prop("id",e);c.$operations.append(f.$el)})}if(this.options.body){this.append(this.options.body)}},append:function(c){this.$content.append(a.wrap(c))},content:function(){return this.$content},show:function(){this.$el.fadeIn("fast");this.visible=true},hide:function(){this.$el.fadeOut("fast");this.visible=false},enableButton:function(c){this.$buttons.find("#"+c).prop("disabled",false)},disableButton:function(c){this.$buttons.find("#"+c).prop("disabled",true)},hideOperation:function(c){this.$operations.find("#"+c).hide()},showOperation:function(c){this.$operations.find("#"+c).show()},setOperation:function(e,d){var c=this.$operations.find("#"+e);c.off("click");c.on("click",d)},title:function(d){var c=this.$title;if(d){c.html(d)}return c.html()},_template:function(d){var c='<div class="toolForm portlet-view no-highlight">';if(d.title||d.icon){c+='<div id="title" class="toolFormTitle portlet-title"><div id="operations" class="portlet-operations"/><div style="overflow: hidden;">';if(d.icon){c+='<div class="portlet-title-icon fa '+d.icon+'">&nbsp;</div>'}c+='<div id="title-text" class="portlet-title-text">'+d.title+"</div>";c+="</div></div>"}c+='<div id="body" class="toolFormBody portlet-body">';if(d.placement=="top"){c+='<div id="buttons" class="portlet-buttons"/>'}c+='<div id="content" class="portlet-content"/>';if(d.placement=="bottom"){c+='<div id="buttons" class="portlet-buttons"/>'}c+="</div></div>";return c}});return{View:b}});
static/style/blue/base.css
+7
View File
@@ -1278,6 +1278,13 @@ label{font-weight:normal}
.upload-ftp .upload-ftp-help{margin-bottom:10px}
.upload-ftp .upload-ftp-warning{text-align:center;margin-top:20px}
.upload-settings .upload-settings-cover{position:absolute;width:100%;height:100%;top:0px;left:0px;background:#fff;opacity:0.4;cursor:no-drop}
.no-highlight{-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none;}
.portlet-view{min-width:300px}.portlet-view .portlet-title-icon{float:left;font-size:1.2em;padding-top:3px}
.portlet-view .portlet-title{overflow:hidden}
.portlet-view .portlet-title-text{float:left;padding-top:1px}
.portlet-view .portlet-operations{float:right;cursor:pointer}
.portlet-view .portlet-buttons{height:50px;padding:10px}
.portlet-view .portlet-content{height:inherit;padding:10px}
.popover-view{max-width:700px;display:none}.popover-view .popover-close{position:absolute;right:10px;top:7px;font-size:1.2em;cursor:pointer}
.popover-view .popover-title{padding:4px 10px}
.styled-select{position:relative;height:27px;overflow:hidden;border:1px solid #bfbfbf;-moz-border-radius:3px;border-radius:3px}.styled-select .button{position:relative;width:25px;height:100%;float:right;border-left:1px solid #bfbfbf;padding-left:9px;padding-top:4px;background:#f2f2f2}
static/style/src/less/ui.less
+41
View File
@@ -1,3 +1,44 @@
.no-highlight {
-webkit-user-select: none; /* webkit (safari, chrome) browsers */
-moz-user-select: none; /* mozilla browsers */
-khtml-user-select: none; /* webkit (konqueror) browsers */
-ms-user-select: none; /* IE10+ */
}
.portlet-view {
min-width: 300px;
.portlet-title-icon {
float: left;
font-size: 1.2em;
padding-top: 3px;
}
.portlet-title {
overflow: hidden;
}
.portlet-title-text {
float: left;
padding-top: 1px;
}
.portlet-operations {
float: right;
cursor: pointer;
}
.portlet-buttons {
height: 50px;
padding: 10px;
}
.portlet-content {
height: inherit;
padding: 10px;
}
}
.popover-view {
max-width: 700px;
display: none;