Upload: Add select2 selection fields, add select2 backbone wrapper

static/scripts/mvc/ui.select.js

@@ -0,0 +1,188 @@
+// dependencies
+define(['utils/utils'], function(Utils) {
+
+// plugin
+var View = Backbone.View.extend(
+{
+    // options
+    optionsDefault: {
+        css         : '',
+        placeholder : 'No data available',
+        data        : []
+    },
+    
+    // initialize
+    initialize : function(options) {
+        // configure options
+        this.options = Utils.merge(options, this.optionsDefault);
+        
+        // create new element
+        this.setElement(this._template(this.options));
+        
+        // add to dom
+        this.options.container.append(this.$el);
+        
+        // link selection dictionary
+        this.select_data = this.options.data;
+        
+        // refresh
+        this._refresh();
+        
+        // initial value
+        if (this.options.value) {
+            this._setValue(this.options.value);
+        }
+        
+        // add change event
+        var self = this;
+        if (this.options.onchange) {
+            this.$el.on('change', function() {
+                self.options.onchange(self.value());
+            });
+        }
+    },
+    
+    // value
+    value : function (new_value) {
+        // get current id/value
+        var before = this._getValue();
+        
+        // check if new_value is defined
+        if (new_value !== undefined) {
+            this._setValue(new_value);
+        }
+        
+        // get current id/value
+        var after = this._getValue();
+        if(after === undefined) {
+            return null;
+        } else {
+            // fire onchange
+            if ((after != before && this.options.onchange)) {
+                this.options.onchange(after);
+            }
+            
+            // return current value
+            return after;
+        }
+    },
+    
+    // label
+    text : function () {
+        return this.$el.select2('data').text;
+    },
+    
+    // disabled
+    disabled: function() {
+        return !this.$el.select2('enable');
+    },
+
+    // enable
+    enable: function() {
+        this.$el.select2('enable', true);
+    },
+        
+    // disable
+    disable: function() {
+        this.$el.select2('enable', false);
+    },
+    
+    // add
+    add: function(options) {
+        // add options
+        this.select_data.push({
+            id      : options.id,
+            text    : options.text
+        });
+        
+        // refresh
+        this._refresh();
+    },
+    
+    // remove
+    remove: function(id) {
+        // search option
+        var index = this._getIndex(id);
+        
+        // check if found
+        if (index != -1) {
+            // remove options
+            this.select_data.splice(index, 1);
+        
+            // refresh
+            this._refresh();
+        }
+    },
+    
+    // update
+    update: function(options) {
+        // copy options
+        this.select_data = [];
+        for (var key in options.data) {
+            this.select_data.push(options.data[key]);
+        }
+        
+        // refresh
+        this._refresh();
+    },
+    
+    // refresh
+    _refresh: function() {
+    
+        // link select data
+        var select_data = this.select_data;
+        if (!select_data || select_data.length == 0) {
+            select_data = [];
+        }
+        
+        // selected
+        var selected = this._getValue();
+        
+        // add select2 data
+        this.$el.select2({
+            data                : select_data,
+            containerCssClass   : this.options.css,
+            placeholder         : this.options.placeholder
+        });
+        
+        // select
+        var index = this._getIndex(selected);
+        if (index != -1) {
+            this._setValue(selected);
+        }
+    },
+    
+    // get index
+    _getIndex: function(value) {
+        // search index
+        for (var key in this.select_data) {
+            if (this.select_data[key].id == value) {
+                return key;
+            }
+        }
+        
+        // not found
+        return -1;
+    },
+    
+    // get value
+    _getValue: function() {
+        return this.$el.select2('val');
+    },
+    
+    // set value
+    _setValue: function(new_value) {
+        this.$el.select2('val', new_value);
+    },
+    
+    // element
+    _template: function(options) {
+        return '<input type="hidden"/>';
+    }
+});
+
+return {
+    View : View
+}
+
+});

static/scripts/mvc/upload/upload-row.js

@@ -3,13 +3,15 @@ define(['utils/utils',
         'mvc/upload/upload-model',
         'mvc/upload/upload-extensions',
         'mvc/upload/upload-settings',
-        'mvc/ui.popover'],
+        'mvc/ui.popover',
+        'mvc/ui.select'],
        
         function(   Utils,
                     UploadModel,
                     UploadExtensions,
                     UploadSettings,
-                    Popover
+                    Popover,
+                    Select
                 ) {
 
 // item view
@@ -31,6 +33,12 @@ return Backbone.View.extend({
     // handle for settings popover
     settings: null,
     
+    // genome selector
+    select_genome : null,
+    
+    // extension selector
+    select_extension : null,
+    
     // render
     initialize: function(app, options) {
         // link app
@@ -55,6 +63,28 @@ return Backbone.View.extend({
             placement   : 'bottom'
         });
 
+        // select genomes
+        this.select_genome = new Select.View({
+            css: 'genome',
+            onchange : function() {
+                self.model.set('genome', self.select_genome.value());
+            },
+            data: self.app.list_genomes,
+            container: it.find('#genome'),
+            value: self.model.get('genome')
+        });
+
+        // select extension
+        this.select_extension = new Select.View({
+            css: 'extension',
+            onchange : function() {
+                self.model.set('extension', self.select_extension.value());
+            },
+            data: self.app.list_extensions,
+            container: it.find('#extension'),
+            value: self.model.get('extension')
+        });
+        
         //
         // ui events
         //
@@ -76,16 +106,6 @@ return Backbone.View.extend({
             self.model.set('file_size', $(e.target).val().length);
         });
         
-        // handle genome selection
-        it.find('#genome').on('change', function(e) {
-            self.model.set('genome', $(e.target).val());
-        });
-        
-        // handle extension selection
-        it.find('#extension').on('change', function(e) {
-            self.model.set('extension', $(e.target).val());
-        });
-        
         // handle space to tabs button
         it.find('#space_to_tabs').on('change', function(e) {
             self.model.set('space_to_tabs', $(e.target).prop('checked'));
@@ -100,9 +120,6 @@ return Backbone.View.extend({
         this.model.on('change:status', function() {
             self._refreshStatus();
         });
-        this.model.on('change:extension', function() {
-            self._destroyExtensionInfo();
-        });
         this.model.on('change:info', function() {
             self._refreshInfo();
         });
@@ -113,11 +130,9 @@ return Backbone.View.extend({
             self._refreshFileSize();
         });
         this.model.on('remove', function() {
-            self._destroyExtensionInfo();
             self.remove();
         });
         this.app.collection.on('reset', function() {
-            self._destroyExtensionInfo();
             self.remove();
         });
     },
@@ -189,7 +204,7 @@ return Backbone.View.extend({
     {
         // update genome info on screen
         var genome = this.model.get('genome');
-        this.$el.find('#genome').val(genome);
+        this.select_genome.value(genome);
     },
         
     // progress
@@ -231,17 +246,23 @@ return Backbone.View.extend({
         
         // set new status class
         sy.addClass(status_class);
-        
+       
         // enable form fields
         if (status == 'init') {
+            // select fields
+            this.select_genome.enable();
+            this.select_extension.enable();
+       
+            // default fields
             it.find('#text-content').attr('disabled', false);
-            it.find('#genome').attr('disabled', false);
-            it.find('#extension').attr('disabled', false);
             it.find('#space_to_tabs').attr('disabled', false);
         } else {
+            // select fields
+            this.select_genome.disable();
+            this.select_extension.disable();
+       
+            // default fields
             it.find('#text-content').attr('disabled', true);
-            it.find('#genome').attr('disabled', true);
-            it.find('#extension').attr('disabled', true);
             it.find('#space_to_tabs').attr('disabled', true);
         }
         
@@ -275,7 +296,6 @@ return Backbone.View.extend({
         
         // only remove from queue if not in processing line
         if (status == 'init' || status == 'success' || status == 'error') {
-            // remove from collection
             this.app.collection.remove(this.model);
         }
     },
@@ -286,7 +306,7 @@ return Backbone.View.extend({
         // initialize
         var $el = $(this.el).find('#extension-info');
         var extension = this.model.get('extension');
-        var title = $(this.el).find('#extension').find('option:selected').text();
+        var title = this.select_extension.text();
         
         // create popup
         if (!this.extension_popup) {
@@ -323,66 +343,43 @@ return Backbone.View.extend({
         }
     },
 
-    // attach file info popup
-    _destroyExtensionInfo : function()
-    {
-        this.$el.find('#extension-info').popover('destroy');
-    },
-
     // template
     _template: function(options)
     {
-        // link this
-        var self = this;
-        
-        // construct template
-        var tmpl = '<tr id="upload-item-' + options.id + '" class="upload-item">' +
-                        '<td>' +
-                            '<div style="position: relative;">' +
-                                '<div id="mode"></div>' +
-                                '<div id="title" class="title"></div>' +
-                                '<div id="text" class="text">' +
-                                    '<div class="text-info">You can tell Galaxy to download data from web by entering URL in this box (one per line). You can also directly paste the contents of a file.</div>' +
-                                    '<textarea id="text-content" class="text-content form-control"></textarea>' +
-                                '</div>' +
+        return  '<tr id="upload-item-' + options.id + '" class="upload-item">' +
+                    '<td>' +
+                        '<div style="position: relative;">' +
+                            '<div id="mode"></div>' +
+                            '<div id="title" class="title"></div>' +
+                            '<div id="text" class="text">' +
+                                '<div class="text-info">You can tell Galaxy to download data from web by entering URL in this box (one per line). You can also directly paste the contents of a file.</div>' +
+                                '<textarea id="text-content" class="text-content form-control"></textarea>' +
                             '</div>' +
-                        '</td>' +
-                        '<td>' +
-                            '<div id="size" class="size"></div>' +
-                        '</td>';
-
-        // add file type selectore
-        tmpl +=         '<td>' +
-                            '<select id="extension" class="extension">';
-        for (key in self.app.select_extension)
-            tmpl +=             '<option value="' + self.app.select_extension[key][1] + '">' + self.app.select_extension[key][0] + '</option>';
-        tmpl +=             '</select>' +
-                            '&nbsp;&nbsp;<i id="extension-info" class="upload-icon-button fa fa-search"/>' +
-                        '</td>';                        
-
-        // add genome selector
-        tmpl +=         '<td>' +
-                            '<select id="genome" class="genome">';
-        for (key in self.app.select_genome)
-            tmpl +=             '<option value="' + self.app.select_genome[key][1] + '">' + self.app.select_genome[key][0] + '</option>';
-        tmpl +=             '</select>' +
-                        '</td>';
-        
-        // add next row
-        tmpl +=         '<td><div id="settings" class="upload-icon-button fa fa-gear"></div>' +
-                        '<td>' +
-                            '<div id="info" class="info">' +
-                                '<div class="progress">' +
-                                    '<div class="progress-bar progress-bar-success"></div>' +
-                                    '<div id="percentage" class="percentage">0%</div>' +
-                                '</div>' +
+                        '</div>' +
+                    '</td>' +
+                    '<td>' +
+                        '<div id="size" class="size"></div>' +
+                    '</td>' +
+                    '<td>' +
+                        '<div id="extension" class="extension" style="float: left;"/>&nbsp;&nbsp' +
+                        '<div id="extension-info" class="upload-icon-button fa fa-search"/>' +
+                    '</td>' +
+                    '<td>' +
+                        '<div id="genome" class="genome" />' +
+                    '</td>' +
+                    '<td><div id="settings" class="upload-icon-button fa fa-gear"></div>' +
+                    '<td>' +
+                        '<div id="info" class="info">' +
+                            '<div class="progress">' +
+                                '<div class="progress-bar progress-bar-success"></div>' +
+                                '<div id="percentage" class="percentage">0%</div>' +
                             '</div>' +
-                        '</td>' +
-                        '<td><div id="symbol" class="' + this.status_classes.init + '"></div></td>' +
-                    '</tr>';
-        
-        // return html string
-        return tmpl;
+                        '</div>' +
+                    '</td>' +
+                    '<td>' +
+                        '<div id="symbol" class="' + this.status_classes.init + '"></div>' +
+                    '</td>' +
+                '</tr>';
     }
     
 });

static/scripts/mvc/upload/upload-view.js

@@ -42,10 +42,10 @@ return Backbone.View.extend(
     upload_size: 0,
     
     // extension types
-    select_extension :[['Auto-detect', 'auto']],
+    list_extensions :[{id: 'auto', text: 'Auto-detect'}],
     
     // genomes
-    select_genome : [['Unspecified (?)', '?']],
+    list_genomes : [],
     
     // collection
     collection : new UploadModel.Collection(),
@@ -107,32 +107,30 @@ return Backbone.View.extend(
         var self = this;
         Utils.jsonFromUrl(galaxy_config.root + "api/datatypes?upload_only=True",
             function(datatypes) {
-                for (key in datatypes)
-                    self.select_extension.push([datatypes[key], datatypes[key]]);
+                for (key in datatypes) {
+                    self.list_extensions.push({
+                        id      : datatypes[key],
+                        text    : datatypes[key]
+                    });
+                }
             });
             
         // load genomes
         Utils.jsonFromUrl(galaxy_config.root + "api/genomes",
             function(genomes) {
-                // backup default
-                var def = self.select_genome[0];
-                
-                // fill array
-                self.select_genome = [];
-                for (key in genomes)
-                    if (genomes[key].length > 1)
-                        if (genomes[key][1] !== def[1])
-                            self.select_genome.push(genomes[key]);
-                
+                for (key in genomes) {
+                    self.list_genomes.push({
+                        id      : genomes[key][1],
+                        text    : genomes[key][0]
+                    });
+                }
+                    
                 // sort
-                self.select_genome.sort(function(a, b) {
-                    return a[0] > b[0] ? 1 : a[0] < b[0] ? -1 : 0;
+                self.list_genomes.sort(function(a, b) {
+                    return a.id > b.id ? 1 : a.id < b.id ? -1 : 0;
                 });
-
-                // insert default back to array
-                self.select_genome.unshift(def);
             });
-        
+            
         // read in options
         if (options) {
             this.options = _.defaults(options, this.options);
@@ -296,9 +294,6 @@ return Backbone.View.extend(
         // configure uploadbox
         this.uploadbox.configure({url : this.options.nginx_upload_path});
         
-        // configure tool
-        tool_input = {};
-        
         // local files
         if (file_mode == 'local') {
             this.uploadbox.configure({paramname : 'files_0|file_data'});
@@ -306,6 +301,9 @@ return Backbone.View.extend(
             this.uploadbox.configure({paramname : null});
         }
         
+        // configure tool
+        tool_input = {};
+        
         // new files
         if (file_mode == 'new') {
             tool_input['files_0|url_paste'] = url_paste;
@@ -313,7 +311,6 @@ return Backbone.View.extend(
         
         // files from ftp
         if (file_mode == 'ftp') {
-            // add to tool configuration
             tool_input['files_0|ftp_files'] = file_path;
         }
         

static/scripts/packed/mvc/ui.select.js

@@ -0,0 +1 @@
+define(["utils/utils"],function(a){var b=Backbone.View.extend({optionsDefault:{css:"",placeholder:"No data available",data:[]},initialize:function(d){this.options=a.merge(d,this.optionsDefault);this.setElement(this._template(this.options));this.options.container.append(this.$el);this.select_data=this.options.data;this._refresh();if(this.options.value){this._setValue(this.options.value)}var c=this;if(this.options.onchange){this.$el.on("change",function(){c.options.onchange(c.value())})}},value:function(c){var d=this._getValue();if(c!==undefined){this._setValue(c)}var e=this._getValue();if(e===undefined){return null}else{if((e!=d&&this.options.onchange)){this.options.onchange(e)}return e}},text:function(){return this.$el.select2("data").text},disabled:function(){return !this.$el.select2("enable")},enable:function(){this.$el.select2("enable",true)},disable:function(){this.$el.select2("enable",false)},add:function(c){this.select_data.push({id:c.id,text:c.text});this._refresh()},remove:function(d){var c=this._getIndex(d);if(c!=-1){this.select_data.splice(c,1);this._refresh()}},update:function(c){this.select_data=[];for(var d in c.data){this.select_data.push(c.data[d])}this._refresh()},_refresh:function(){var e=this.select_data;if(!e||e.length==0){e=[]}var d=this._getValue();this.$el.select2({data:e,containerCssClass:this.options.css,placeholder:this.options.placeholder});var c=this._getIndex(d);if(c!=-1){this._setValue(d)}},_getIndex:function(d){for(var c in this.select_data){if(this.select_data[c].id==d){return c}}return -1},_getValue:function(){return this.$el.select2("val")},_setValue:function(c){this.$el.select2("val",c)},_template:function(c){return'<input type="hidden"/>'}});return{View:b}});

static/style/blue/base.css

@@ -1259,16 +1259,17 @@ label{font-weight:normal}
 .upload-icon{font-size:1.2em;width:1.2em}
 .upload-icon-button{font-size:1.2em;width:1.2em;cursor:pointer}
 .upload-info{font-weight:normal;text-align:center}
-.upload-box{width:100%;height:95%;text-align:center;overflow:scroll;font-size:12px;line-height:1.33;-moz-border-radius:5px;border-radius:5px;border:1px dashed #bfbfbf;padding:10px;overflow-x:hidden;-ms-overflow-style:none}.upload-box .popover{max-width:500px;width:auto}
-.upload-box .table{width:100%}
+.upload-box{width:100%;height:95%;text-align:center;overflow:scroll;font-size:12px;line-height:1.33;-moz-border-radius:5px;border-radius:5px;border:1px dashed #bfbfbf;padding:10px;overflow-x:hidden;-ms-overflow-style:none}.upload-box .table{width:100%}
 .upload-box .table th{text-align:center;white-space:nowrap}
 .upload-box .table td{margin:0px;paddign:0px}
+.upload-box .upload-item .select2-arrow b{background-position:0 -3px}
+.upload-box .upload-item .select2-choice{max-height:20px;line-height:18px;background:transparent}
 .upload-box .mode{float:left;font-size:1.2em;width:1.2em;color:#555}
 .upload-box .title{width:130px;word-wrap:break-word;font-size:11px;float:left}
 .upload-box .text{position:absolute;display:none}.upload-box .text .text-content{font-size:11px;width:100%;height:50px;resize:none;background:inherit;color:#000}
 .upload-box .text .text-info{font-size:11px}
-.upload-box .extension{width:100px;font-size:11px}
-.upload-box .genome{width:150px;font-size:11px}
+.upload-box .extension{width:100px;min-width:100px;font-size:11px}
+.upload-box .genome{width:150px;min-width:150px;font-size:11px}
 .upload-box .size{width:60px;white-space:nowrap}
 .upload-box .info{width:130px;font-size:11px;line-height:1.2em}.upload-box .info .progress{top:1px;position:relative;width:100%;padding:0px;margin:0px;line-height:1.55em}.upload-box .info .progress .progress-bar{border-radius:inherit;-moz-border-radius:inherit}
 .upload-box .info .progress .percentage{position:absolute;text-align:center;width:100%;color:#fff}
@@ -1683,15 +1684,15 @@ div.historyItem-noPermission{filter:alpha(opacity=60);-moz-opacity:.60;opacity:.
 div.historyItem-paused{background:#d9edf7}div.historyItem-paused .state-icon{line-height:16px;font-family:FontAwesome;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}div.historyItem-paused .state-icon:before{content:"\f04c"}
 div.historyItem-new .state-icon{line-height:16px;font-family:FontAwesome;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}div.historyItem-new .state-icon:before{content:"\f071"}
 div.historyItemTitleBar.spinner .state-icon{background:url(data_running.gif) 0 1px no-repeat !important}
-div.historyItemButtons{float:right}div.historyItemButtons .icon-button.display{background-image:url(sprite-history-buttons.png);background-position:0px -48px;width:16px;height:16px;height:16px}
-div.historyItemButtons .icon-button.display:hover{background-image:url(sprite-history-buttons.png);background-position:0px -64px;width:16px;height:16px;height:16px}
-div.historyItemButtons .icon-button.display_disabled{background-image:url(sprite-history-buttons.png);background-position:0px -80px;width:16px;height:16px;height:16px}
-div.historyItemButtons .icon-button.delete{background-image:url(sprite-history-buttons.png);background-position:0px 0px;width:16px;height:16px;height:16px}
-div.historyItemButtons .icon-button.delete:hover{background-image:url(sprite-history-buttons.png);background-position:0px -16px;width:16px;height:16px;height:16px}
-div.historyItemButtons .icon-button.delete_disabled{background-image:url(sprite-history-buttons.png);background-position:0px -32px;width:16px;height:16px;height:16px}
-div.historyItemButtons .icon-button.edit{background-image:url(sprite-history-buttons.png);background-position:0px -96px;width:16px;height:16px;height:16px}
-div.historyItemButtons .icon-button.edit:hover{background-image:url(sprite-history-buttons.png);background-position:0px -112px;width:16px;height:16px;height:16px}
-div.historyItemButtons .icon-button.edit_disabled{background-image:url(sprite-history-buttons.png);background-position:0px -128px;width:16px;height:16px;height:16px}
+div.historyItemButtons{float:right}div.historyItemButtons .icon-button.display{background-image:url(sprite-history-buttons.png);background-position:0px -48px;width:16px;height:16px}
+div.historyItemButtons .icon-button.display:hover{background-image:url(sprite-history-buttons.png);background-position:0px -64px;width:16px;height:16px}
+div.historyItemButtons .icon-button.display_disabled{background-image:url(sprite-history-buttons.png);background-position:0px -80px;width:16px;height:16px}
+div.historyItemButtons .icon-button.delete{background-image:url(sprite-history-buttons.png);background-position:0px 0px;width:16px;height:16px}
+div.historyItemButtons .icon-button.delete:hover{background-image:url(sprite-history-buttons.png);background-position:0px -16px;width:16px;height:16px}
+div.historyItemButtons .icon-button.delete_disabled{background-image:url(sprite-history-buttons.png);background-position:0px -32px;width:16px;height:16px}
+div.historyItemButtons .icon-button.edit{background-image:url(sprite-history-buttons.png);background-position:0px -96px;width:16px;height:16px}
+div.historyItemButtons .icon-button.edit:hover{background-image:url(sprite-history-buttons.png);background-position:0px -112px;width:16px;height:16px}
+div.historyItemButtons .icon-button.edit_disabled{background-image:url(sprite-history-buttons.png);background-position:0px -128px;width:16px;height:16px}
 div.historyItemBody div{padding-top:2px}
 pre.peek{background:white;color:black;width:100%;font-size:10px;overflow:auto}pre.peek th{color:white;background:#5f6990}
 pre.peek table,pre.peek th,pre.peek tr,pre.peek td{font-family:Monaco,Menlo,Consolas,"Courier New",monospace;font-size:10px}

static/style/src/less/upload.less

@@ -71,11 +71,6 @@
     overflow-x      : hidden;
     -ms-overflow-style: none;
 
-    .popover {
-        max-width: 500px;
-        width: auto;
-    }
-
     .table {
         width : 100%;
     }
@@ -89,7 +84,19 @@
         margin: 0px;
         paddign: 0px;
     }
-    
+
+    .upload-item {
+        .select2-arrow b {
+            background-position: 0 -3px;
+        }
+        
+        .select2-choice {
+            max-height: 20px;
+            line-height: 18px;
+            background: transparent;
+        }
+    }
+
     .mode {
         float: left;
         font-size: 1.2em;
@@ -119,20 +126,21 @@
         
         .text-info {
             font-size : @font-size-small;
-            // color : @gray-light;
         }
     }
     
     .extension {
         width: 100px;
+        min-width: 100px;
         font-size : @font-size-small;
     }
 
     .genome {
         width: 150px;
+        min-width: 150px;
         font-size : @font-size-small;
     }
-    
+
     .size {
         width: 60px;
         white-space: nowrap;