commit/galaxy-central: guerler: Ui/Charts: Enable user to add/remove tabs and include that in Charts - galaxy-commits

24 Feb 2014

1 new commit in galaxy-central:
https://bitbucket.org/galaxy/galaxy-central/commits/462a28f96c21/
Changeset:   462a28f96c21
User:        guerler
Date:        2014-02-24 06:44:07
Summary:     Ui/Charts: Enable user to add/remove tabs and include that in Charts
Affected #:  12 files
diff -r fac578cca75887d811e67993a655fed20c0d8713 -r 462a28f96c2172113d1cad657e271e792493b49e config/plugins/visualizations/charts/static/app.js

--- a/config/plugins/visualizations/charts/static/app.js
+++ b/config/plugins/visualizations/charts/static/app.js
@@ -1,10 +1,10 @@
 // dependencies
 define(['mvc/ui/ui-portlet', 'plugin/library/ui', 'utils/utils',
-        'plugin/views/charts', 'plugin/views/viewport', 'plugin/views/chart', 'plugin/views/group',
-        'plugin/models/config', 'plugin/models/datasets', 'plugin/models/chart', 'plugin/models/charts', 'plugin/models/group', 'plugin/models/types'],
+        'plugin/views/charts', 'plugin/views/viewport', 'plugin/views/chart',
+        'plugin/models/config', 'plugin/models/datasets', 'plugin/models/chart', 'plugin/models/charts', 'plugin/models/types'],
         function(   Portlet, Ui, Utils,
-                    ChartsView, ViewportView, ChartView, GroupView,
-                    Config, Datasets, Chart, Charts, Group, Types
+                    ChartsView, ViewportView, ChartView,
+                    Config, Datasets, Chart, Charts, Types
                 ) {
// widget
@@ -26,14 +26,12 @@
         this.types = new Types();
         this.chart = new Chart();
         this.charts = new Charts();
-        this.group = new Group();
// create dataset handler
         this.datasets = new Datasets(this);
// create views
         this.charts_view = new ChartsView(this);
-        this.group_view = new GroupView(this);
         this.chart_view = new ChartView(this);
         this.viewport_view = new ViewportView(this);
@@ -49,9 +47,8 @@
// append views
         this.portlet.append(this.charts_view.$el);
-        this.portlet.append(this.group_view.$el);
         this.portlet.append(this.chart_view.$el);
-        
+
         // set element
         if (!this.options.config.widget) {
             this.setElement(this.portlet.$el);
@@ -60,7 +57,6 @@
         }
// hide views
-        this.group_view.$el.hide();
         this.charts_view.$el.hide();
// events
diff -r fac578cca75887d811e67993a655fed20c0d8713 -r 462a28f96c2172113d1cad657e271e792493b49e config/plugins/visualizations/charts/static/library/table.js
--- a/config/plugins/visualizations/charts/static/library/table.js
+++ b/config/plugins/visualizations/charts/static/library/table.js
@@ -20,8 +20,8 @@
// events
     events : {
-        'click'     : 'onclick',
-        'dblclick'  : 'ondblclick'
+        'click'     : '_onclick',
+        'dblclick'  : '_ondblclick'
     },
// first
@@ -33,7 +33,7 @@
         this.options = Utils.merge(options, this.optionsDefault);
// create new element
-        this.setElement(this.template(options));
+        this.setElement(this._template(options));
// initialize row
         this.row = $('<tr></tr>');
@@ -64,46 +64,26 @@
// append
     append: function(id) {
-        this.commit(id);
+        this._commit(id);
     },
// prepend
     prepend: function(id) {
-        this.commit(id, true);
-    },
-    
-    // commit
-    commit: function(id, prepend) {
-        // add
-        this.row.attr('id', id);
-       
-        // add row
-        if (prepend) {
-            $(this.el).find('tbody').prepend(this.row);
-        } else {
-            $(this.el).find('tbody').append(this.row);
-        }
-        
-        // row
-        this.row = $('<tr></tr>');
-        
-        // row count
-        this.row_count++;
-        this.refresh();
+        this._commit(id, true);
     },
// remove
     remove: function(id) {
         $(this.el).find('#' + id).remove();
         this.row_count--;
-        this.refresh();
+        this._refresh();
     },
// remove
     removeAll: function() {
         $(this.el).find('tbody').html('');
         this.row_count = 0;
-        this.refresh();
+        this._refresh();
     },
// value
@@ -134,13 +114,28 @@
         }
     },
-    // confirm new value
-    confirm: function(new_value) {
-        this.value(new_value);
+    // commit
+    _commit: function(id, prepend) {
+        // add
+        this.row.attr('id', id);
+       
+        // add row
+        if (prepend) {
+            $(this.el).find('tbody').prepend(this.row);
+        } else {
+            $(this.el).find('tbody').append(this.row);
+        }
+        
+        // row
+        this.row = $('<tr></tr>');
+        
+        // row count
+        this.row_count++;
+        this._refresh();
     },
// onclick
-    onclick: function(e) {
+    _onclick: function(e) {
         // get values
         var old_value = this.value();
         var new_value = $(e.target).closest('tr').attr('id');
@@ -150,13 +145,13 @@
             if (this.options.onconfirm) {
                 this.options.onconfirm(new_value);
             } else {
-                this.confirm(new_value);
+                this.value(new_value);
             }
         }
     },
-    // onclick
-    ondblclick: function(e) {
+    // ondblclick
+    _ondblclick: function(e) {
         var value = this.value();
         if (value && this.options.ondblclick) {
             this.options.ondblclick(value);
@@ -164,7 +159,7 @@
     },
// refresh
-    refresh: function() {
+    _refresh: function() {
         if (this.row_count == 0) {
             this.$el.find('tmessage').show();
         } else {
@@ -173,7 +168,7 @@
     },
// load html template
-    template: function(options)
+    _template: function(options)
     {
         return  '<div>' +
                     '<table class="grid">' +
diff -r fac578cca75887d811e67993a655fed20c0d8713 -r 462a28f96c2172113d1cad657e271e792493b49e config/plugins/visualizations/charts/static/library/ui.js
--- a/config/plugins/visualizations/charts/static/library/ui.js
+++ b/config/plugins/visualizations/charts/static/library/ui.js
@@ -6,7 +6,7 @@
 {
     // options
     optionsDefault: {
-        label : ''
+        title  : ''
     },
// initialize
@@ -15,17 +15,17 @@
         this.options = Utils.merge(options, this.optionsDefault);
// create new element
-        this.setElement(this.template(this.options));
+        this.setElement(this._template(this.options));
     },
// template
-    template: function(options) {
-        return '<label><b>' + options.label + '</b></label>';
+    _template: function(options) {
+        return '<label><b>' + options.title + '</b></label>';
     },
// value
     value: function() {
-        return options.label;
+        return options.title;
     }
 });
@@ -35,10 +35,9 @@
     // options
     optionsDefault: {
         id    : null,
-        label : '',
+        title : '',
         float : 'right',
         cls   : 'btn-default',
-        type  : 'submit',
         icon  : ''
     },
@@ -52,43 +51,99 @@
// add event
         $(this.el).on('click', options.onclick);
+        
+        // add tooltip
+        $(this.el).tooltip({title: options.tooltip, placement: 'bottom'});
+    },
+    
+    // element
+    _template: function(options) {
+        var str =   '<button id="' + options.id + '" type="submit" style="margin-right: 5px; float: ' + options.float + ';" type="button" class="btn ' + options.cls + '">';
+        if (options.icon) {
+            str +=      '<i class="icon fa ' + options.icon + '"></i>&nbsp;' ;
+        }
+        str +=          options.title +
+                    '</button>';
+        return str;
+    }
+});
+
+// plugin
+var ButtonIcon = Backbone.View.extend(
+{
+    // options
+    optionsDefault: {
+        title   : '',
+        id      : null,
+        float   : 'right',
+        cls     : 'icon-btn',
+        icon    : '',
+        tooltip : ''
+    },
+    
+    // initialize
+    initialize : function(options) {
+        // get options
+        this.options = Utils.merge(options, this.optionsDefault);
+            
+        // create new element
+        this.setElement(this._template(this.options));
+        
+        // add event
+        $(this.el).on('click', options.onclick);
+        
+        // add tooltip
+        $(this.el).tooltip({title: options.tooltip, placement: 'bottom'});
+    },
+    
+    // element
+    _template: function(options) {
+        // width
+        var width = '';
+        if (options.title) {
+            width = 'width: auto;';
+        }
+        
+        // string
+        var str =   '<div id="' + options.id + '" style="margin-right: 5px; float: ' + options.float + '; ' + width + '" class="' + options.cls + '">';
+    
+        // title
+        if (options.title) {
+            str +=      '<div style="margin-right: 5px; margin-left: 5px;">' +
+                            '<i class="icon fa ' + options.icon + '"/>&nbsp;' +
+                            '<span style="position: relative; font-size: 0.8em; top: -1px;">' + options.title + '</span>' +
+                        '</div>';
+        } else {
+            str +=      '<i class="icon fa ' + options.icon + '"/>';
+        }
+        str +=      '</div>';
+        return str;
+    }
+});
+
+// plugin
+var Anchor = Backbone.View.extend(
+{
+    // options
+    optionsDefault: {
+        title  : ''
+    },
+    
+    // initialize
+    initialize : function(options) {
+        // get options
+        this.options = Utils.merge(options, this.optionsDefault);
+            
+        // create new element
+        this.setElement(this._template(this.options));
+        
+        // add event
+        $(this.el).on('click', options.onclick);
     },
// element
     _template: function(options) {
-        var str =   '<button id="' + options.id + '" type="' + options.type + '" style="margin-right: 5px; float: ' + options.float + ';" type="button" class="btn ' + options.cls + '">';
-        if (options.icon) {
-            str +=      '<i class="icon fa ' + options.icon + '"></i>&nbsp;' ;
-        }
-        str +=          options.label +
-                    '</button>';
-        return str;
-    }
-});
-
-// plugin
-var Anchor = Backbone.View.extend(
-{
-    // options
-    optionsDefault: {
-        label : ''
-    },
-    
-    // initialize
-    initialize : function(options) {
-        // get options
-        this.options = Utils.merge(options, this.optionsDefault);
-            
-        // create new element
-        this.setElement(this._template(this.options));
-        
-        // add event
-        $(this.el).on('click', options.onclick);
-    },
-    
-    // element
-    _template: function(options) {
-        return '<div><a href="javascript:void(0)">' + options.label + '</a></div>';
+        return '<div><a href="javascript:void(0)">' + options.title + '</a></div>';
     }
 });
@@ -118,7 +173,7 @@
// show message
         if (options.message != '') {
-            this.$el.html(this.template(this.options));
+            this.$el.html(this._template(this.options));
             this.$el.fadeIn();
// check if message is persistent
@@ -139,7 +194,7 @@
     },
// element
-    template: function(options) {
+    _template: function(options) {
         return '<div class="alert alert-' + options.status + '" style="padding: 2px 2px 2px 10px;">' + options.message + '</div>';
     }
 });
@@ -159,7 +214,7 @@
         this.options = Utils.merge(options, this.optionsDefault);
// create new element
-        this.setElement(this.template(this.options));
+        this.setElement(this._template(this.options));
// add click event
         var self = this;
@@ -172,7 +227,7 @@
     },
// element
-    template: function(options) {
+    _template: function(options) {
         return  '<div class="search">' +
                     '<form onsubmit="return false;">' +
                         '<input id="search" class="form-control input-sm" type="text" name="search" placeholder="Search..." value="' + options.searchword + '">' +
@@ -189,7 +244,7 @@
 {
     // options
     optionsDefault: {
-        label   : 'Unlabeled',
+        title   : 'Unlabeled',
         body    : null
     },
@@ -199,7 +254,7 @@
         this.options = Utils.merge(options, this.optionsDefault);
// create new element
-        this.setElement(this.template(this.options));
+        this.setElement(this._template(this.options));
if (this.options.body) {
             this.$el.find('.body').append(this.options.body);
@@ -207,9 +262,9 @@
     },
// element
-    template: function(options) {
+    _template: function(options) {
         return  '<div id="title" class="title">' +
-                    options.label + ':' +
+                    options.title + ':' +
                 '</div>';
     }
 });
@@ -370,48 +425,6 @@
 });
// plugin
-var ButtonIcon = Backbone.View.extend(
-{
-    // options
-    optionsDefault: {
-        id      : null,
-        label   : '',
-        float   : 'right',
-        cls     : 'icon-btn',
-        type    : 'submit',
-        icon    : '',
-        tooltip : ''
-    },
-    
-    // initialize
-    initialize : function(options) {
-        // get options
-        this.options = Utils.merge(options, this.optionsDefault);
-            
-        // create new element
-        this.setElement(this.template(this.options));
-        
-        // add event
-        $(this.el).on('click', options.onclick);
-        
-        // add tooltip
-        $(this.el).tooltip({title: options.tooltip, placement: 'bottom'});
-    },
-    
-    // element
-    template: function(options) {
-        var str =   '<a id="' + options.id + '" style="margin-right: 5px; float: ' + options.float + ';" class="' + options.cls + '">';
-        if (options.icon) {
-            str +=      '<i class="icon fa ' + options.icon + '"></i>';
-        }
-        str +=          options.label +
-                    '</a>';
-        return str;
-    }
-});
-
-
-// plugin
 var Input = Backbone.View.extend(
 {
     // options
@@ -429,7 +442,7 @@
         this.options = Utils.merge(options, this.optionsDefault);
// create new element
-        this.setElement(this.template(this.options));
+        this.setElement(this._template(this.options));
// disable input field
         if (this.options.disabled) {
@@ -440,6 +453,14 @@
         if (!this.options.visible) {
             this.$el.hide();
         }
+        
+        // onchange event handler
+        var self = this;
+        if (this.options.onchange) {
+            this.$el.on('input', function() {
+                self.options.onchange();
+            });
+        }
     },
// value
@@ -451,7 +472,7 @@
     },
// element
-    template: function(options) {
+    _template: function(options) {
         return '<input id="' + options.id + '" type="' + options.type + '" value="' + options.value + '" placeholder="' + options.placeholder + '" class="form-control">';
     }
 });
diff -r fac578cca75887d811e67993a655fed20c0d8713 -r 462a28f96c2172113d1cad657e271e792493b49e config/plugins/visualizations/charts/static/library/ui.select.js
--- a/config/plugins/visualizations/charts/static/library/ui.select.js
+++ b/config/plugins/visualizations/charts/static/library/ui.select.js
@@ -19,6 +19,11 @@
         // create new element
         this.setElement(this._template(this.options));
+        // initial value
+        if (this.options.value) {
+            this.$el.val(this.options.value);
+        }
+        
         // add change event
         var self = this;
         if (this.options.onchange) {
diff -r fac578cca75887d811e67993a655fed20c0d8713 -r 462a28f96c2172113d1cad657e271e792493b49e config/plugins/visualizations/charts/static/models/group.js
--- a/config/plugins/visualizations/charts/static/models/group.js
+++ b/config/plugins/visualizations/charts/static/models/group.js
@@ -4,6 +4,12 @@
 // model
 return Backbone.Model.extend(
 {
+    // options
+    defaults : {
+        label           : 'Data label',
+        date            : ''
+    },
+    
     // reset
     reset: function()
     {
diff -r fac578cca75887d811e67993a655fed20c0d8713 -r 462a28f96c2172113d1cad657e271e792493b49e config/plugins/visualizations/charts/static/views/chart.js
--- a/config/plugins/visualizations/charts/static/views/chart.js
+++ b/config/plugins/visualizations/charts/static/views/chart.js
@@ -1,6 +1,6 @@
 // dependencies
-define(['mvc/ui/ui-tabs', 'plugin/library/table', 'plugin/library/ui', 'utils/utils', 'plugin/models/chart', 'plugin/views/groups'],
-    function(Tabs, Table, Ui, Utils, Chart, GroupsView) {
+define(['mvc/ui/ui-tabs', 'plugin/library/table', 'plugin/library/ui', 'utils/utils', 'plugin/models/chart', 'plugin/models/group', 'plugin/views/group'],
+    function(Tabs, Table, Ui, Utils, Chart, Group, GroupView) {
// widget
 return Backbone.View.extend(
@@ -28,10 +28,9 @@
         this.title = new Ui.Input({placeholder: 'Chart title'});
         this.dataset = new Ui.Input({value : app.options.dataset.id, disabled: true, visible: false});
-        // configure dataset
-        this.groups_view = new GroupsView(this.app);
-        
-        // table
+        //
+        // table with chart types
+        //
         var self = this;
         this.table = new Table({
             header : false,
@@ -40,7 +39,7 @@
                     // show modal
                     self.app.modal.show({
                         title   : 'Switching the chart type?',
-                        body    : 'You configured data sources. If you switch chart types your configurations will be removed.',
+                        body    : 'If you continue your data selections will cleared.',
                         buttons : {
                             'Cancel'    : function() {
                                 // hide modal
@@ -51,13 +50,13 @@
                                 self.app.modal.hide();
// confirm
-                                self.table.confirm(type);
+                                self.table.value(type);
                             }
                         }
                     });
                 } else {
                     // confirm
-                    self.table.confirm(type);
+                    self.table.value(type);
                 }
             },
             onchange : function(type) {
@@ -70,7 +69,7 @@
             content: 'No chart types available'
         });
-        // add types
+        // load chart types into table
         var types_n = 0;
         var types = app.types.attributes;
         for (var id in types){
@@ -80,47 +79,55 @@
             this.table.append(id);
         }
+        //
+        // tabs
+        //
+        this.tabs = new Tabs.View({
+            title_new       : 'Add Data',
+            onnew           : function() {
+                self._addGroupModel();
+            },
+            operations      : {
+                'save'  : new Ui.ButtonIcon({
+                            icon    : 'fa-save',
+                            tooltip : 'Draw Chart',
+                            title   : 'Draw',
+                            onclick : function() {
+                                // ensure that data group is available
+                                if (self.chart.groups.length == 0) {
+                                    var group = self._addGroupModel();
+                                    self.tabs.show(group.id);
+                                }
+                                
+                                // save chart
+                                self._saveChart();
+                            }
+                        }),
+                'back'  : new Ui.ButtonIcon({
+                            icon    : 'fa-caret-left',
+                            tooltip : 'Return to Viewer',
+                            title   : 'Return',
+                            onclick : function() {
+                                self.$el.hide();
+                                self.app.charts_view.$el.show();
+                            }
+                        })
+            }
+        });
+        
         // construct element
         var $settings = $('<div/>');
         $settings.append(Utils.wrap(this.message.$el));
-        $settings.append(Utils.wrap((new Ui.Label({ label : 'Provide a chart title:'})).$el));
+        $settings.append(Utils.wrap((new Ui.Label({ title : 'Provide a chart title:'})).$el));
         $settings.append(Utils.wrap(this.title.$el));
-        $settings.append(Utils.wrap((new Ui.Label({ label : 'Select a chart type:'})).$el));
+        $settings.append(Utils.wrap((new Ui.Label({ title : 'Select a chart type:'})).$el));
         $settings.append(Utils.wrap(this.table.$el));
-
-        // tabs
-        this.tabs = new Tabs.View({
-            operations : {
-                'save'      : new Ui.ButtonIcon({
-                                icon    : 'fa-save',
-                                tooltip : 'Save Chart',
-                                onclick : function() {
-                                    self._saveChart();
-                                }
-                            }),
-                'back'      : new Ui.ButtonIcon({
-                                icon    : 'fa-caret-left',
-                                tooltip : 'Return',
-                                onclick : function() {
-                                    self.$el.hide();
-                                    self.app.charts_view.$el.show();
-                                }
-                            })
-            }
-        });
// add tab
         this.tabs.add({
-            $el: $settings,
-            title: 'Start',
-            id: 'settings'
-        });
-        
-        // add tab
-        this.tabs.add({
-            $el: this.groups_view.$el,
-            title: 'Chart Groups',
-            id: 'groups'
+            id      : 'settings',
+            title   : 'Start',
+            $el     : $settings
         });
// elements
@@ -129,7 +136,7 @@
         // hide back button on startup
         this.tabs.hideOperation('back');
-        // model events
+        // chart events
         var self = this;
         this.chart.on('change:title', function(chart) {
             self.title.value(chart.get('title'));
@@ -141,7 +148,7 @@
             self._resetChart();
         });
-        // collection events
+        // charts events
         this.app.charts.on('add', function(chart) {
             self.tabs.showOperation('back');
         });
@@ -154,12 +161,66 @@
             self.tabs.hideOperation('back');
         });
+        // groups events
+        this.app.chart.groups.on('add', function(group) {
+            self._addGroup(group);
+        });
+        this.app.chart.groups.on('remove', function(group) {
+            self._removeGroup(group);
+        });
+        this.app.chart.groups.on('reset', function(group) {
+            self._removeAllGroups();
+        });
+                
         // reset
         this._resetChart();
     },
+    // new group
+    _addGroupModel: function() {
+        var group = new Group({
+            id          : Utils.uuid(),
+            dataset_id  : this.chart.get('dataset_id')
+        });
+        this.chart.groups.add(group);
+        return group;
+    },
+
+    // add group
+    _addGroup: function(group) {
+        // link this
+        var self = this;
+        
+        // create view
+        var group_view = new GroupView(this.app, {group: group});
+        
+        // number of groups
+        var count = self.chart.groups.length;
+        
+        // add new tab
+        this.tabs.add({
+            title           : count + ': Chart Data',
+            id              : group.id,
+            $el             : group_view.$el,
+            ondel           : function() {
+                self.chart.groups.remove(group.id);
+            }
+        });
+    },
+    
+    // remove group
+    _removeGroup: function(group) {
+        this.tabs.del(group.id);
+    },
+
+    // remove group
+    _removeAllGroups: function(group) {
+        this.tabs.delRemovable();
+    },
+    
     // reset
     _resetChart: function() {
+        // reset chart details
         this.chart.set('id', Utils.uuid());
         this.chart.set('dataset_id', this.app.options.dataset.id);
         this.chart.set('type', 'bardiagram');
diff -r fac578cca75887d811e67993a655fed20c0d8713 -r 462a28f96c2172113d1cad657e271e792493b49e config/plugins/visualizations/charts/static/views/charts.js
--- a/config/plugins/visualizations/charts/static/views/charts.js
+++ b/config/plugins/visualizations/charts/static/views/charts.js
@@ -1,5 +1,5 @@
 // dependencies
-define(['mvc/ui/ui-portlet', 'plugin/library/table', 'plugin/library/ui', 'utils/utils'], function(Portlet, Table, Ui, Utils) {
+define(['mvc/ui/ui-portlet', 'plugin/library/table', 'plugin/library/ui', 'utils/utils', 'plugin/models/group'], function(Portlet, Table, Ui, Utils, Group) {
// widget
 return Backbone.View.extend(
@@ -17,11 +17,11 @@
                 // get chart
                 var chart = self.app.charts.get(chart_id);
                 self.app.chart.copy(chart);
-                               
-                // show edit
+                
+                // hide this element
                 self.$el.hide();
-                // update model and show create
+                // show chart view
                 self.app.chart_view.$el.show();
             },
             onchange : function(chart_id) {
diff -r fac578cca75887d811e67993a655fed20c0d8713 -r 462a28f96c2172113d1cad657e271e792493b49e config/plugins/visualizations/charts/static/views/group.js
--- a/config/plugins/visualizations/charts/static/views/group.js
+++ b/config/plugins/visualizations/charts/static/views/group.js
@@ -12,46 +12,34 @@
     initialize: function(app, options) {
         // link app
         this.app = app;
-    
+        
+        // link this
+        var self = this;
+        
         // get current chart object
         this.chart = this.app.chart;
-        this.group = this.app.group;
+        
+        // access group
+        this.group = options.group;
// ui elements
-        this.message = new Ui.Message();
-        this.label = new Ui.Input({placeholder: 'Group label'});
+        this.label = new Ui.Input({
+            placeholder: 'Data label',
+            onchange: function() {
+                self.group.set('label', self.label.value());
+            }
+        });
         this.table = new Table({content: 'No data column.'});
// add table to portlet
-        var self = this;
-        this.portlet = new Portlet.View({
-            icon : 'fa-edit',
-            title : 'Define group properties:',
-            operations : {
-                'save'      : new Ui.ButtonIcon({
-                                icon    : 'fa-save',
-                                tooltip : 'Save',
-                                onclick : function() {
-                                    // save/add group
-                                    self._saveGroup();
-                                }
-                            }),
-                'back'      : new Ui.ButtonIcon({
-                                icon    : 'fa-caret-left',
-                                tooltip : 'Return',
-                                onclick : function() {
-                                    self.$el.hide();
-                                    self.app.chart_view.$el.show();
-                                }
-                            })
-            }
-        });
-        this.portlet.append(this.message.$el);
-        this.portlet.append(this.label.$el);
-        this.portlet.append(this.table.$el);
+        var $view = $('<div/>');
+        $view.append(Utils.wrap((new Ui.Label({title: 'Provide a label:'})).$el));
+        $view.append(Utils.wrap(this.label.$el));
+        $view.append(Utils.wrap((new Ui.Label({title: 'Select columns:'})).$el));
+        $view.append(Utils.wrap(this.table.$el));
// add element
-        this.setElement(this.portlet.$el);
+        this.setElement($view);
// change
         var self = this;
@@ -67,20 +55,17 @@
         this.group.on('change', function() {
             self._refreshGroup();
         });
-        this.group.on('reset', function() {
-            self._resetGroup();
-        });
+        
+        // refresh
+        this._refresh();
     },
-    // show
-    show: function() {
-        this.$el.show();
-    },
-    
-    // reset
-    _resetGroup: function() {
-        this.group.set('id', Utils.uuid());
-        this.group.set('label', 'Group label');
+    // render
+    _refresh: function() {
+        this._refreshDataset();
+        this._refreshType();
+        this._refreshLabel();
+        this._refreshGroup();
     },
// update dataset
@@ -98,7 +83,7 @@
// check
         if (!dataset) {
-            this.app.log('Config::render()', 'Failed to retrieve dataset.');
+            this.app.log('Group::_refreshDataset()', 'Failed to retrieve dataset.');
             return;
         }
@@ -138,9 +123,13 @@
                     data : this.columns,
                     onchange : function(value) {
                         self.group.set(this.gid, value);
-                    }
+                    },
+                    value : this.group.get(id)
                 });
+                // set model value
+                this.group.set(id, select.value());
+                
                 // add row to table
                 this.table.add(data_def.title);
                 this.table.add(select.$el);
@@ -154,14 +143,7 @@
// update
     _refreshGroup: function() {
-        // update select fields
-        for (var id in this.list) {
-            var col = this.group.get(id);
-            if (col === undefined) {
-                col = 0;
-            }
-            this.list[id].value(col);
-        }
+        this.group.set('date', Utils.time());
     },
// update label
@@ -171,48 +153,6 @@
             label_text = '';
         }
         this.label.value(label_text);
-    },
-    
-    // create group
-    _saveGroup: function() {
-        // get current chart
-        var chart = this.chart;
-        
-        // update group object
-        var group = this.group;
-        for (var key in this.list) {
-            group.set(key, this.list[key].value());
-        }
-        
-        // add label
-        group.set({
-            dataset_id  : this.chart.get('dataset_id'),
-            label       : this.label.value(),
-            date        : Utils.time()
-        });
-        
-        // validate
-        if (!group.get('label')) {
-            this.message.update({message : 'Please enter a label for your group.'});
-            return;
-        }
-        
-        // get groups of current chart
-        var groups = this.chart.groups;
-        
-        // create/update group
-        var group_update = groups.get(group.id);
-        if (group_update) {
-            group_update.set(group.attributes);
-        } else {
-            groups.add(group.clone());
-        }
-        
-        // hide
-        this.$el.hide();
-        
-        // update main
-        this.app.chart_view.$el.show();
     }
 });
diff -r fac578cca75887d811e67993a655fed20c0d8713 -r 462a28f96c2172113d1cad657e271e792493b49e config/plugins/visualizations/charts/static/views/groups.js
--- a/config/plugins/visualizations/charts/static/views/groups.js
+++ /dev/null
@@ -1,154 +0,0 @@
-// dependencies
-define(['mvc/ui/ui-portlet', 'plugin/library/table', 'plugin/library/ui', 'utils/utils'], function(Portlet, Table, Ui, Utils) {
-
-// chart config
-return Backbone.View.extend(
-{
-    // initialize
-    initialize: function(app, options) {
-        // link app
-        this.app = app;
-    
-        // get current chart object
-        this.chart = this.app.chart;
-        
-        // table
-        this.table = new Table({
-            content     : 'Add data columns to this table.',
-            ondblclick  : function(group_id) {
-                // get group
-                var group = self.app.chart.groups.get(group_id);
-                
-                // show edit
-                self.app.chart_view.$el.hide();
-                self.app.group_view.show();
-                self.app.group_view.group.set(group.attributes);
-            }
-        });
-        
-        // add table to portlet
-        var self = this;
-        this.portlet = new Portlet.View({
-            icon : '',
-            title : 'Select data columns:',
-            height : 100,
-            operations : {
-                'new'   : new Ui.ButtonIcon({
-                            icon : 'fa-plus',
-                            tooltip: 'Create',
-                            onclick: function() {
-                                self.app.group.reset();
-                                self.app.chart_view.$el.hide();
-                                self.app.group_view.show();
-                            }
-                        }),
-                'edit'  : new Ui.ButtonIcon({
-                            icon : 'fa-pencil',
-                            tooltip: 'Edit',
-                            onclick: function() {
-                                // check if element has been selected
-                                var group_id = self.table.value();
-                                if (!group_id) {
-                                    return;
-                                }
-                                
-                                // get group
-                                var group = self.app.chart.groups.get(group_id);
-                                
-                                // show edit
-                                self.app.chart_view.$el.hide();
-                                self.app.group_view.show();
-                                self.app.group_view.group.set(group.attributes);
-                            }
-                        }),
-                'delete' : new Ui.ButtonIcon({
-                            icon : 'fa-minus',
-                            tooltip: 'Delete',
-                            onclick: function() {
-                                // check if element has been selected
-                                var id = self.table.value();
-                                if (!id) {
-                                    return;
-                                }
-                                // remove group from chart
-                                self.chart.groups.remove(id);
-                            }
-                        })
-            }
-        });
-        this.portlet.append(this.table.$el);
-        
-        // add element
-        this.setElement(this.portlet.$el);
-        
-        // change
-        var self = this;
-        this.chart.on('change', function() {
-            self._refresh();
-        });
-        this.chart.on('reset', function() {
-            self._removeGroupAll();
-        });
-        this.chart.on('change:type', function() {
-            self.app.group_view.trigger('change');
-        });
-        this.chart.groups.on('add', function(group) {
-            self._addGroup(group);
-        });
-        this.chart.groups.on('remove', function(group) {
-            self._removeGroup(group);
-        });
-        this.chart.groups.on('reset', function(group) {
-            self._removeGroupAll();
-        });
-        this.chart.groups.on('change', function(group) {
-            self._removeGroup(group);
-            self._addGroup(group);
-        });
-    },
-    
-    // refresh
-    _refresh: function() {
-        this._removeGroupAll();
-        var self = this;
-        var groups = this.chart.groups;
-        if (groups) {
-            groups.each(function(group) { self._addGroup(group); });
-        }
-    },
-    
-    // add
-    _addGroup: function(group) {
-        // make custom info string
-        var info = '[';
-        var chart_type = this.chart.get('type');
-        if (chart_type) {
-            var chart_settings = this.app.types.get(chart_type);
-            for (var key in chart_settings.data) {
-                info += key + '=' + group.get(key) + ', '
-            }
-        }
-        info = info.substring(0, info.length - 2) + ']';
-        
-        // add to table
-        this.table.add(group.get('label'));
-        this.table.add(info);
-        this.table.add('Last changed: ' + group.get('date'));
-        this.table.prepend(group.id);
-        this.table.value(group.id);
-    },
-    
-    // remove
-    _removeGroup: function(group) {
-        // remove from to table
-        this.table.remove(group.id);
-    },
-    
-    // data config reset
-    _removeGroupAll: function() {
-        // reset options table
-        this.table.removeAll();
-    }
-});
-
-});
\ No newline at end of file
diff -r fac578cca75887d811e67993a655fed20c0d8713 -r 462a28f96c2172113d1cad657e271e792493b49e static/scripts/mvc/ui/ui-portlet.js
--- a/static/scripts/mvc/ui/ui-portlet.js
+++ b/static/scripts/mvc/ui/ui-portlet.js
@@ -109,12 +109,12 @@
         this.$buttons.find('#' + id).prop('disabled', true);
     },
-    // enable operation
+    // hide operation
     hideOperation: function(id) {
         this.$operations.find('#' + id).hide();
     },
-    // disable operation
+    // show operation
     showOperation: function(id) {
         this.$operations.find('#' + id).show();
     },
diff -r fac578cca75887d811e67993a655fed20c0d8713 -r 462a28f96c2172113d1cad657e271e792493b49e static/scripts/mvc/ui/ui-tabs.js
--- a/static/scripts/mvc/ui/ui-tabs.js
+++ b/static/scripts/mvc/ui/ui-tabs.js
@@ -12,9 +12,14 @@
     $nav: null,
     $content: null,
+    // first
+    first_tab: null,
+    
     // defaults options
     optionsDefault: {
-        operations: null,
+        title_new       : '',
+        operations      : null,
+        onnew           : null
     },
// initialize
@@ -22,10 +27,12 @@
         // configure options
         this.options = Utils.merge(options, this.optionsDefault);
-        // create element
+        // create tabs
         var $tabs = $(this._template(this.options));
-        this.$nav = $tabs.find('.tab-navigation');
-        this.$content = $tabs.find('.tab-content');
+        
+        // link elements
+        this.$nav       = $tabs.find('.tab-navigation');
+        this.$content   = $tabs.find('.tab-content');
// create new element
         this.setElement($tabs);
@@ -38,42 +45,111 @@
                 self.$nav.append(item.$el);
             });
         }
+        
+        // add built-in add-new-tab tab
+        if (this.options.onnew) {
+            // create tab object
+            var $tab_new = $(this._template_tab_new(this.options));
+            
+            // append to navbar
+            this.$nav.append($tab_new);
+            
+            // add tooltip
+            $tab_new.tooltip({title: 'Add a new tab', placement: 'bottom'});
+            
+            // link click event
+            $tab_new.on('click', function(e) {
+                $tab_new.tooltip('hide');
+                self.options.onnew();
+            });
+        }
     },
// append
     add: function(options) {
-        // collect parameters
-        var $el = options.$el;
-        var title = options.title;
+        // get tab id
         var id = options.id;
// create tab object
         var tab = {
-            $title : $(this._template_tab(options)),
-            $content : $(this._template_tab_content(options))
+            $title      : $(this._template_tab(options)),
+            $content    : $(this._template_tab_content(options)),
+            removable   : options.ondel ? true : false
         }
-        // add nav element
-        this.$nav.append(tab.$title);
-        
-        // add content
-        tab.$content.append($el);
-        this.$content.append(tab.$content);
-        
         // add to list
         this.list[id] = tab;
-        // check list size
+        // add a new tab either before the add-new-tab tab or behind the last tab
+        if (this.options.onnew) {
+            this.$nav.find('#new-tab').before(tab.$title);
+        } else {
+            this.$nav.append(tab.$title);
+        }
+        
+        // add content
+        tab.$content.append(options.$el);
+        this.$content.append(tab.$content);
+        
+        // activate this tab if this is the first tab
         if (_.size(this.list) == 1) {
             tab.$title.addClass('active');
             tab.$content.addClass('active');
+            this.first_tab = id;
+        }
+        
+        // add click event to remove tab
+        if (options.ondel) {
+            var $del_icon = tab.$title.find('#delete');
+            $del_icon.tooltip({title: 'Delete this tab', placement: 'bottom'});
+            $del_icon.on('click', function(e) {
+                $del_icon.tooltip('destroy');
+                options.ondel();
+                return false;
+            });
+        }
+    },
+    
+    // delete tab
+    del: function(id) {
+        // delete tab from list/dom
+        var tab = this.list[id];
+        tab.$title.remove();
+        tab.$content.remove();
+        delete tab;
+        
+        // check if first tab has been deleted
+        if (this.first_tab == id) {
+            this.first_tab = null;
+        }
+        
+        // show first tab
+        if (this.first_tab != null) {
+            this.show(this.first_tab);
+        }
+    },
+    
+    // delete tab
+    delRemovable: function() {
+        // delete tab from list/dom
+        for (var id in this.list) {
+            var tab = this.list[id];
+            if (tab.removable) {
+                this.del(id);
+            }
         }
     },
// show
-    show: function(){
+    show: function(id){
+        // show tab view
         this.$el.fadeIn('fast');
         this.visible = true;
+        
+        // show selected tab
+        if (id) {
+            this.list[id].$title.find('a').tab('show');
+        }
     },
// hide
@@ -82,12 +158,12 @@
         this.visible = false;
     },
-    // enable operation
+    // hide operation
     hideOperation: function(id) {
         this.$nav.find('#' + id).hide();
     },
-    // disable operation
+    // show operation
     showOperation: function(id) {
         this.$nav.find('#' + id).show();
     },
@@ -100,8 +176,8 @@
     },
// title
-    title: function(id, new_label) {
-        var $el = this.$el.find('#title-' + id + ' a');
+    title: function(id, new_title) {
+        var $el = this.list[id].$title.find('#text');
         if (new_title) {
             $el.html(new_title);
         }
@@ -117,10 +193,29 @@
     },
// fill template tab
+    _template_tab_new: function(options) {
+        return  '<li id="new-tab">' +
+                    '<a href="javascript:void(0);">' +
+                        '<i style="font-size: 0.8em; margin-right: 5px;" class="fa fa-plus-circle"/>' +
+                            options.title_new +
+                    '</a>' +
+                '</li>';
+    },
+    
+    // fill template tab
     _template_tab: function(options) {
-        return  '<li id="title-' + options.id + '">' +
-                    '<a title="" href="#tab-' + options.id + '" data-toggle="tab" data-original-title="">' + options.title + '</a>' +
-                '</li>';
+        var tmpl =  '<li id="title-' + options.id + '">' +
+                        '<a title="" href="#tab-' + options.id + '" data-toggle="tab" data-original-title="">' +
+                            '<span id="text">' + options.title + '</span>';
+        
+        if (options.ondel) {
+            tmpl +=         '<i id="delete" style="font-size: 0.8em; margin-left: 5px; cursor: pointer;" class="fa fa-minus-circle"/>';
+        }
+        
+        tmpl +=         '</a>' +
+                    '</li>';
+        
+        return tmpl;
     },
// fill template tab content
diff -r fac578cca75887d811e67993a655fed20c0d8713 -r 462a28f96c2172113d1cad657e271e792493b49e static/scripts/packed/mvc/ui/ui-tabs.js
--- a/static/scripts/packed/mvc/ui/ui-tabs.js
+++ b/static/scripts/packed/mvc/ui/ui-tabs.js
@@ -1,1 +1,1 @@
-define(["utils/utils"],function(a){var b=Backbone.View.extend({visible:false,list:{},$nav:null,$content:null,optionsDefault:{operations:null,},initialize:function(e){this.options=a.merge(e,this.optionsDefault);var c=$(this._template(this.options));this.$nav=c.find(".tab-navigation");this.$content=c.find(".tab-content");this.setElement(c);if(this.options.operations){var d=this;$.each(this.options.operations,function(f,g){g.$el.prop("id",f);d.$nav.append(g.$el)})}},add:function(c){var d=c.$el;var f=c.title;var g=c.id;var e={$title:$(this._template_tab(c)),$content:$(this._template_tab_content(c))};this.$nav.append(e.$title);e.$content.append(d);this.$content.append(e.$content);this.list[g]=e;if(_.size(this.list)==1){e.$title.addClass("active");e.$content.addClass("active")}},show:function(){this.$el.fadeIn("fast");this.visible=true},hide:function(){this.$el.fadeOut("fast");this.visible=false},hideOperation:function(c){this.$nav.find("#"+c).hide()},showOperation:function(c){this.$nav.find("#"+c).show()},setOperation:function(e,d){var c=this.$nav.find("#"+e);c.off("click");c.on("click",d)},title:function(e,c){var d=this.$el.find("#title-"+e+" a");if(new_title){d.html(new_title)}return d.html()},_template:function(c){return'<div class="tabbable tabs-left"><ul class="tab-navigation nav nav-tabs"/><div class="tab-content"/></div>'},_template_tab:function(c){return'<li id="title-'+c.id+'"><a title="" href="#tab-'+c.id+'" data-toggle="tab" data-original-title="">'+c.title+"</a></li>"},_template_tab_content:function(c){return'<div id="tab-'+c.id+'" class="tab-pane"/>'}});return{View:b}});
\ No newline at end of file
+define(["utils/utils"],function(a){var b=Backbone.View.extend({visible:false,list:{},$nav:null,$content:null,first_tab:null,optionsDefault:{title_new:"",operations:null,onnew:null},initialize:function(e){this.options=a.merge(e,this.optionsDefault);var c=$(this._template(this.options));this.$nav=c.find(".tab-navigation");this.$content=c.find(".tab-content");this.setElement(c);if(this.options.operations){var d=this;$.each(this.options.operations,function(g,h){h.$el.prop("id",g);d.$nav.append(h.$el)})}if(this.options.onnew){var f=$(this._template_tab_new(this.options));this.$nav.append(f);f.tooltip({title:"Add a new tab",placement:"bottom"});f.on("click",function(g){f.tooltip("hide");d.options.onnew()})}},add:function(d){var f=d.id;var e={$title:$(this._template_tab(d)),$content:$(this._template_tab_content(d)),removable:d.ondel?true:false};this.list[f]=e;if(this.options.onnew){this.$nav.find("#new-tab").before(e.$title)}else{this.$nav.append(e.$title)}e.$content.append(d.$el);this.$content.append(e.$content);if(_.size(this.list)==1){e.$title.addClass("active");e.$content.addClass("active");this.first_tab=f}if(d.ondel){var c=e.$title.find("#delete");c.tooltip({title:"Delete this tab",placement:"bottom"});c.on("click",function(g){c.tooltip("destroy");d.ondel();return false})}},del:function(d){var c=this.list[d];c.$title.remove();c.$content.remove();delete c;if(this.first_tab==d){this.first_tab=null}if(this.first_tab!=null){this.show(this.first_tab)}},delRemovable:function(){for(var d in this.list){var c=this.list[d];if(c.removable){this.del(d)}}},show:function(c){this.$el.fadeIn("fast");this.visible=true;if(c){this.list[c].$title.find("a").tab("show")}},hide:function(){this.$el.fadeOut("fast");this.visible=false},hideOperation:function(c){this.$nav.find("#"+c).hide()},showOperation:function(c){this.$nav.find("#"+c).show()},setOperation:function(e,d){var c=this.$nav.find("#"+e);c.off("click");c.on("click",d)},title:function(e,d){var c=this.list[e].$title.find("#text");if(d){c.html(d)}return c.html()},_template:function(c){return'<div class="tabbable tabs-left"><ul class="tab-navigation nav nav-tabs"/><div class="tab-content"/></div>'},_template_tab_new:function(c){return'<li id="new-tab"><a href="javascript:void(0);"><i style="font-size: 0.8em; margin-right: 5px;" class="fa fa-plus-circle"/>'+c.title_new+"</a></li>"},_template_tab:function(d){var c='<li id="title-'+d.id+'"><a title="" href="#tab-'+d.id+'" data-toggle="tab" data-original-title=""><span id="text">'+d.title+"</span>";if(d.ondel){c+='<i id="delete" style="font-size: 0.8em; margin-left: 5px; cursor: pointer;" class="fa fa-minus-circle"/>'}c+="</a></li>";return c},_template_tab_content:function(c){return'<div id="tab-'+c.id+'" class="tab-pane"/>'}});return{View:b}});
\ No newline at end of file
Repository URL: https://bitbucket.org/galaxy/galaxy-central/
--
This is a commit notification from bitbucket.org. You are receiving
this because you have the service enabled, addressing the recipient of
this email.

    