From aebdfa82b459b5933aeac80b4653c856256db593 Mon Sep 17 00:00:00 2001
From: Aysam Guerler <aysam.guerler@gmail.com>
Date: Thu, 13 Feb 2014 02:37:10 -0500
Subject: [PATCH] Upload: Add select2 selection fields, add select2 backbone
 wrapper

---
 static/scripts/mvc/ui.select.js               | 188 ++++++++++++++++++
 static/scripts/mvc/upload/upload-row.js       | 157 +++++++--------
 static/scripts/mvc/upload/upload-view.js      |  45 ++---
 static/scripts/packed/mvc/ui.select.js        |   1 +
 .../scripts/packed/mvc/upload/upload-row.js   |   2 +-
 .../scripts/packed/mvc/upload/upload-view.js  |   2 +-
 static/style/blue/base.css                    |  27 +--
 static/style/src/less/upload.less             |  24 ++-
 8 files changed, 319 insertions(+), 127 deletions(-)
 create mode 100644 static/scripts/mvc/ui.select.js
 create mode 100644 static/scripts/packed/mvc/ui.select.js

diff --git a/static/scripts/mvc/ui.select.js b/static/scripts/mvc/ui.select.js
new file mode 100644
index 00000000000..0c53933c853
--- /dev/null
+++ b/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
+}
+
+});
diff --git a/static/scripts/mvc/upload/upload-row.js b/static/scripts/mvc/upload/upload-row.js
index d9599e5b1da..62a8966db06 100644
--- a/static/scripts/mvc/upload/upload-row.js
+++ b/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>';
     }
     
 });
diff --git a/static/scripts/mvc/upload/upload-view.js b/static/scripts/mvc/upload/upload-view.js
index 057a2deb4a3..f4298691358 100644
--- a/static/scripts/mvc/upload/upload-view.js
+++ b/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;
         }
         
diff --git a/static/scripts/packed/mvc/ui.select.js b/static/scripts/packed/mvc/ui.select.js
new file mode 100644
index 00000000000..a338e528226
--- /dev/null
+++ b/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}});
\ No newline at end of file
diff --git a/static/scripts/packed/mvc/upload/upload-row.js b/static/scripts/packed/mvc/upload/upload-row.js
index 73bbd7b1e83..5b319adf2f0 100644
--- a/static/scripts/packed/mvc/upload/upload-row.js
+++ b/static/scripts/packed/mvc/upload/upload-row.js
@@ -1 +1 @@
-define(["utils/utils","mvc/upload/upload-model","mvc/upload/upload-extensions","mvc/upload/upload-settings","mvc/ui.popover"],function(d,b,e,a,c){return Backbone.View.extend({options:{padding:8},status_classes:{init:"upload-icon-button fa fa-trash-o",queued:"upload-icon fa fa-spinner fa-spin",running:"upload-icon fa fa-spinner fa-spin",success:"upload-icon-button fa fa-check",error:"upload-icon-button fa fa-exclamation-triangle"},settings:null,initialize:function(i,g){this.app=i;var f=this;this.model=new b.Model(g);this.setElement(this._template(g));var h=this.$el;this.settings=new c.View({title:"Upload configuration",container:h.find("#settings"),placement:"bottom"});h.find("#symbol").on("click",function(){f._removeRow()});h.find("#extension-info").on("click",function(j){f._showExtensionInfo()}).on("mousedown",function(j){j.preventDefault()});h.find("#settings").on("click",function(j){f._showSettings()}).on("mousedown",function(j){j.preventDefault()});h.find("#text-content").on("keyup",function(j){f.model.set("url_paste",$(j.target).val());f.model.set("file_size",$(j.target).val().length)});h.find("#genome").on("change",function(j){f.model.set("genome",$(j.target).val())});h.find("#extension").on("change",function(j){f.model.set("extension",$(j.target).val())});h.find("#space_to_tabs").on("change",function(j){f.model.set("space_to_tabs",$(j.target).prop("checked"))});this.model.on("change:percentage",function(){f._refreshPercentage()});this.model.on("change:status",function(){f._refreshStatus()});this.model.on("change:extension",function(){f._destroyExtensionInfo()});this.model.on("change:info",function(){f._refreshInfo()});this.model.on("change:genome",function(){f._refreshGenome()});this.model.on("change:file_size",function(){f._refreshFileSize()});this.model.on("remove",function(){f._destroyExtensionInfo();f.remove()});this.app.collection.on("reset",function(){f._destroyExtensionInfo();f.remove()})},render:function(){var m=this.model.get("file_name");var g=this.model.get("file_size");var j=this.model.get("file_mode");var i=this.$el;i.find("#title").html(m);i.find("#size").html(d.bytesToString(g));i.find("#mode").removeClass().addClass("mode");if(j=="new"){var l=i.find("#text");var k=this.options.padding;var h=i.width()-2*k;var f=i.height()-k;l.css("width",h+"px");l.css("top",f+"px");i.height(f+l.height()+2*k);l.show();i.find("#mode").addClass("fa fa-pencil")}if(j=="local"){i.find("#mode").addClass("fa fa-laptop")}if(j=="ftp"){i.find("#mode").addClass("fa fa-code-fork")}},_refreshGenome:function(){var f=this.model.get("genome");this.$el.find("#genome").val(f)},_refreshInfo:function(){var f=this.model.get("info");if(f){this.$el.find("#info").html("<strong>Failed: </strong>"+f).show()}else{this.$el.find("#info").hide()}},_refreshPercentage:function(){var f=parseInt(this.model.get("percentage"));this.$el.find(".progress-bar").css({width:f+"%"});if(f!=100){this.$el.find("#percentage").html(f+"%")}else{this.$el.find("#percentage").html("Adding to history...")}},_refreshStatus:function(){var g=this.$el;var f=this.model.get("status");var i=this.status_classes[f];var h=this.$el.find("#symbol");h.removeClass();h.addClass(i);if(f=="init"){g.find("#text-content").attr("disabled",false);g.find("#genome").attr("disabled",false);g.find("#extension").attr("disabled",false);g.find("#space_to_tabs").attr("disabled",false)}else{g.find("#text-content").attr("disabled",true);g.find("#genome").attr("disabled",true);g.find("#extension").attr("disabled",true);g.find("#space_to_tabs").attr("disabled",true)}if(f=="success"){g.addClass("success");g.find("#percentage").html("100%")}if(f=="error"){g.addClass("danger");g.find(".progress").remove()}},_refreshFileSize:function(){var f=this.model.get("file_size");this.$el.find("#size").html(d.bytesToString(f))},_removeRow:function(){var f=this.model.get("status");if(f=="init"||f=="success"||f=="error"){this.app.collection.remove(this.model)}},_showExtensionInfo:function(){var f=$(this.el).find("#extension-info");var h=this.model.get("extension");var g=$(this.el).find("#extension").find("option:selected").text();if(!this.extension_popup){this.extension_popup=new c.View({content:e(h),placement:"bottom",container:f})}if(!this.extension_popup.visible){this.extension_popup.title(g);this.extension_popup.empty();this.extension_popup.append(e(h));this.extension_popup.show()}else{this.extension_popup.hide()}},_showSettings:function(){if(!this.settings.visible){this.settings.empty();this.settings.append((new a(this)).$el);this.settings.show()}else{this.settings.hide()}},_destroyExtensionInfo:function(){this.$el.find("#extension-info").popover("destroy")},_template:function(h){var g=this;var f='<tr id="upload-item-'+h.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></div></td><td><div id="size" class="size"></div></td>';f+='<td><select id="extension" class="extension">';for(key in g.app.select_extension){f+='<option value="'+g.app.select_extension[key][1]+'">'+g.app.select_extension[key][0]+"</option>"}f+='</select>&nbsp;&nbsp;<i id="extension-info" class="upload-icon-button fa fa-search"/></td>';f+='<td><select id="genome" class="genome">';for(key in g.app.select_genome){f+='<option value="'+g.app.select_genome[key][1]+'">'+g.app.select_genome[key][0]+"</option>"}f+="</select></td>";f+='<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="symbol" class="'+this.status_classes.init+'"></div></td></tr>';return f}})});
\ No newline at end of file
+define(["utils/utils","mvc/upload/upload-model","mvc/upload/upload-extensions","mvc/upload/upload-settings","mvc/ui.popover","mvc/ui.select"],function(d,b,f,a,c,e){return Backbone.View.extend({options:{padding:8},status_classes:{init:"upload-icon-button fa fa-trash-o",queued:"upload-icon fa fa-spinner fa-spin",running:"upload-icon fa fa-spinner fa-spin",success:"upload-icon-button fa fa-check",error:"upload-icon-button fa fa-exclamation-triangle"},settings:null,select_genome:null,select_extension:null,initialize:function(j,h){this.app=j;var g=this;this.model=new b.Model(h);this.setElement(this._template(h));var i=this.$el;this.settings=new c.View({title:"Upload configuration",container:i.find("#settings"),placement:"bottom"});this.select_genome=new e.View({css:"genome",onchange:function(){g.model.set("genome",g.select_genome.value())},data:g.app.list_genomes,container:i.find("#genome"),value:g.model.get("genome")});this.select_extension=new e.View({css:"extension",onchange:function(){g.model.set("extension",g.select_extension.value())},data:g.app.list_extensions,container:i.find("#extension"),value:g.model.get("extension")});i.find("#symbol").on("click",function(){g._removeRow()});i.find("#extension-info").on("click",function(k){g._showExtensionInfo()}).on("mousedown",function(k){k.preventDefault()});i.find("#settings").on("click",function(k){g._showSettings()}).on("mousedown",function(k){k.preventDefault()});i.find("#text-content").on("keyup",function(k){g.model.set("url_paste",$(k.target).val());g.model.set("file_size",$(k.target).val().length)});i.find("#space_to_tabs").on("change",function(k){g.model.set("space_to_tabs",$(k.target).prop("checked"))});this.model.on("change:percentage",function(){g._refreshPercentage()});this.model.on("change:status",function(){g._refreshStatus()});this.model.on("change:info",function(){g._refreshInfo()});this.model.on("change:genome",function(){g._refreshGenome()});this.model.on("change:file_size",function(){g._refreshFileSize()});this.model.on("remove",function(){g.remove()});this.app.collection.on("reset",function(){g.remove()})},render:function(){var n=this.model.get("file_name");var h=this.model.get("file_size");var k=this.model.get("file_mode");var j=this.$el;j.find("#title").html(n);j.find("#size").html(d.bytesToString(h));j.find("#mode").removeClass().addClass("mode");if(k=="new"){var m=j.find("#text");var l=this.options.padding;var i=j.width()-2*l;var g=j.height()-l;m.css("width",i+"px");m.css("top",g+"px");j.height(g+m.height()+2*l);m.show();j.find("#mode").addClass("fa fa-pencil")}if(k=="local"){j.find("#mode").addClass("fa fa-laptop")}if(k=="ftp"){j.find("#mode").addClass("fa fa-code-fork")}},_refreshGenome:function(){var g=this.model.get("genome");this.select_genome.value(g)},_refreshInfo:function(){var g=this.model.get("info");if(g){this.$el.find("#info").html("<strong>Failed: </strong>"+g).show()}else{this.$el.find("#info").hide()}},_refreshPercentage:function(){var g=parseInt(this.model.get("percentage"));this.$el.find(".progress-bar").css({width:g+"%"});if(g!=100){this.$el.find("#percentage").html(g+"%")}else{this.$el.find("#percentage").html("Adding to history...")}},_refreshStatus:function(){var h=this.$el;var g=this.model.get("status");var j=this.status_classes[g];var i=this.$el.find("#symbol");i.removeClass();i.addClass(j);if(g=="init"){this.select_genome.enable();this.select_extension.enable();h.find("#text-content").attr("disabled",false);h.find("#space_to_tabs").attr("disabled",false)}else{this.select_genome.disable();this.select_extension.disable();h.find("#text-content").attr("disabled",true);h.find("#space_to_tabs").attr("disabled",true)}if(g=="success"){h.addClass("success");h.find("#percentage").html("100%")}if(g=="error"){h.addClass("danger");h.find(".progress").remove()}},_refreshFileSize:function(){var g=this.model.get("file_size");this.$el.find("#size").html(d.bytesToString(g))},_removeRow:function(){var g=this.model.get("status");if(g=="init"||g=="success"||g=="error"){this.app.collection.remove(this.model)}},_showExtensionInfo:function(){var g=$(this.el).find("#extension-info");var i=this.model.get("extension");var h=this.select_extension.text();if(!this.extension_popup){this.extension_popup=new c.View({content:f(i),placement:"bottom",container:g})}if(!this.extension_popup.visible){this.extension_popup.title(h);this.extension_popup.empty();this.extension_popup.append(f(i));this.extension_popup.show()}else{this.extension_popup.hide()}},_showSettings:function(){if(!this.settings.visible){this.settings.empty();this.settings.append((new a(this)).$el);this.settings.show()}else{this.settings.hide()}},_template:function(g){return'<tr id="upload-item-'+g.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></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></div></td><td><div id="symbol" class="'+this.status_classes.init+'"></div></td></tr>'}})});
\ No newline at end of file
diff --git a/static/scripts/packed/mvc/upload/upload-view.js b/static/scripts/packed/mvc/upload/upload-view.js
index 52e5409ec2c..39f787643b7 100644
--- a/static/scripts/packed/mvc/upload/upload-view.js
+++ b/static/scripts/packed/mvc/upload/upload-view.js
@@ -1 +1 @@
-define(["galaxy.modal","utils/utils","mvc/upload/upload-button","mvc/upload/upload-model","mvc/upload/upload-row","mvc/upload/upload-ftp","mvc/ui.popover","mvc/ui","utils/uploadbox"],function(a,f,e,c,b,g,d){return Backbone.View.extend({options:{nginx_upload_path:""},modal:null,ui_button:null,uploadbox:null,current_history:null,upload_size:0,select_extension:[["Auto-detect","auto"]],select_genome:[["Unspecified (?)","?"]],collection:new c.Collection(),ftp:null,counter:{announce:0,success:0,error:0,running:0,reset:function(){this.announce=this.success=this.error=this.running=0}},initialize:function(i){var h=this;if(!Galaxy.currHistoryPanel||!Galaxy.currHistoryPanel.model){window.setTimeout(function(){h.initialize()},500);return}if(!Galaxy.currUser.get("id")){return}this.ui_button=new e.Model({icon:"fa-upload",tooltip:"Download from URL or upload files from disk",label:"Load Data",onclick:function(j){if(j){h._eventShow(j)}},onunload:function(){if(h.counter.running>0){return"Several uploads are still processing."}}});$("#left .unified-panel-header-inner").append((new e.View(this.ui_button)).$el);var h=this;f.jsonFromUrl(galaxy_config.root+"api/datatypes?upload_only=True",function(j){for(key in j){h.select_extension.push([j[key],j[key]])}});f.jsonFromUrl(galaxy_config.root+"api/genomes",function(j){var k=h.select_genome[0];h.select_genome=[];for(key in j){if(j[key].length>1){if(j[key][1]!==k[1]){h.select_genome.push(j[key])}}}h.select_genome.sort(function(m,l){return m[0]>l[0]?1:m[0]<l[0]?-1:0});h.select_genome.unshift(k)});if(i){this.options=_.defaults(i,this.options)}this.collection.on("remove",function(j){h._eventRemove(j)});this.collection.on("change:genome",function(k){var j=k.get("genome");h.collection.each(function(l){if(l.get("status")=="init"&&l.get("genome")=="?"){l.set("genome",j)}})})},_eventShow:function(j){j.preventDefault();if(!this.modal){var h=this;this.modal=new a.GalaxyModal({title:"Download data directly from web or upload files from your disk",body:this._template("upload-box","upload-info"),buttons:{"Choose local file":function(){h.uploadbox.select()},"Choose FTP file":function(){h._eventFtp()},"Create new file":function(){h._eventCreate()},Start:function(){h._eventStart()},Pause:function(){h._eventStop()},Reset:function(){h._eventReset()},Close:function(){h.modal.hide()},},height:"400",width:"900",closing_events:true});this.setElement("#upload-box");var h=this;this.uploadbox=this.$el.uploadbox({announce:function(k,l,m){h._eventAnnounce(k,l,m)},initialize:function(k,l,m){return h._eventInitialize(k,l,m)},progress:function(k,l,m){h._eventProgress(k,l,m)},success:function(k,l,m){h._eventSuccess(k,l,m)},error:function(k,l,m){h._eventError(k,l,m)},complete:function(){h._eventComplete()}});this._updateScreen();if(this.options.ftp_upload_dir&&this.options.ftp_upload_site){var i=this.modal.getButton("Choose FTP file");this.ftp=new d.View({title:"FTP files",container:i})}else{this.modal.hideButton("Choose FTP file")}}this.modal.show()},_eventRemove:function(i){var h=i.get("status");if(h=="success"){this.counter.success--}else{if(h=="error"){this.counter.error--}else{this.counter.announce--}}this._updateScreen();this.uploadbox.remove(i.id)},_eventAnnounce:function(h,i,k){this.counter.announce++;this._updateScreen();var j=new b(this,{id:h,file_name:i.name,file_size:i.size,file_mode:i.mode,file_path:i.path});this.collection.add(j.model);$(this.el).find("tbody:first").append(j.$el);j.render()},_eventInitialize:function(m,j,s){var k=this.collection.get(m);k.set("status","running");var o=k.get("file_name");var n=k.get("file_path");var h=k.get("file_mode");var p=k.get("extension");var r=k.get("genome");var q=k.get("url_paste");var l=k.get("space_to_tabs");var i=k.get("to_posix_lines");if(!q&&!(j.size>0)){return null}this.uploadbox.configure({url:this.options.nginx_upload_path});tool_input={};if(h=="local"){this.uploadbox.configure({paramname:"files_0|file_data"})}else{this.uploadbox.configure({paramname:null})}if(h=="new"){tool_input["files_0|url_paste"]=q}if(h=="ftp"){tool_input["files_0|ftp_files"]=n}tool_input.dbkey=r;tool_input.file_type=p;tool_input["files_0|type"]="upload_dataset";tool_input.space_to_tabs=l;tool_input.to_posix_lines=i;data={};data.history_id=this.current_history;data.tool_id="upload1";data.inputs=JSON.stringify(tool_input);return data},_eventProgress:function(i,j,h){var k=this.collection.get(i);k.set("percentage",h);this.ui_button.set("percentage",this._upload_percentage(h,j.size))},_eventSuccess:function(i,j,l){var k=this.collection.get(i);k.set("percentage",100);k.set("status","success");var h=k.get("file_size");this.ui_button.set("percentage",this._upload_percentage(100,h));this.upload_completed+=h*100;this.counter.announce--;this.counter.success++;this._updateScreen();Galaxy.currHistoryPanel.refreshHdas()},_eventError:function(h,i,k){var j=this.collection.get(h);j.set("percentage",100);j.set("status","error");j.set("info",k);this.ui_button.set("percentage",this._upload_percentage(100,i.size));this.ui_button.set("status","danger");this.upload_completed+=i.size*100;this.counter.announce--;this.counter.error++;this._updateScreen()},_eventComplete:function(){this.collection.each(function(h){if(h.get("status")=="queued"){h.set("status","init")}});this.counter.running=0;this._updateScreen()},_eventFtp:function(){if(!this.ftp.visible){this.ftp.empty();this.ftp.append((new g(this)).$el);this.ftp.show()}else{this.ftp.hide()}},_eventCreate:function(){this.uploadbox.add([{name:"New File",size:0,mode:"new"}])},_eventStart:function(){if(this.counter.announce==0||this.counter.running>0){return}var h=this;this.upload_size=0;this.upload_completed=0;this.collection.each(function(i){if(i.get("status")=="init"){i.set("status","queued");h.upload_size+=i.get("file_size")}});this.ui_button.set("percentage",0);this.ui_button.set("status","success");this.current_history=Galaxy.currHistoryPanel.model.get("id");this.counter.running=this.counter.announce;this._updateScreen();this.uploadbox.start()},_eventStop:function(){if(this.counter.running==0){return}this.ui_button.set("status","info");this.uploadbox.stop();$("#upload-info").html("Queue will pause after completing the current file...")},_eventReset:function(){if(this.counter.running==0){this.collection.reset();this.counter.reset();this._updateScreen();this.uploadbox.reset();this.ui_button.set("percentage",0)}},_updateScreen:function(){if(this.counter.announce==0){if(this.uploadbox.compatible()){message="You can Drag & Drop files into this box."}else{message="Unfortunately, your browser does not support multiple file uploads or drag&drop.<br>Some supported browsers are: Firefox 4+, Chrome 7+, IE 10+, Opera 12+ or Safari 6+."}}else{if(this.counter.running==0){message="You added "+this.counter.announce+" file(s) to the queue. Add more files or click 'Start' to proceed."}else{message="Please wait..."+this.counter.announce+" out of "+this.counter.running+" remaining."}}$("#upload-info").html(message);if(this.counter.running==0&&this.counter.announce+this.counter.success+this.counter.error>0){this.modal.enableButton("Reset")}else{this.modal.disableButton("Reset")}if(this.counter.running==0&&this.counter.announce>0){this.modal.enableButton("Start")}else{this.modal.disableButton("Start")}if(this.counter.running>0){this.modal.enableButton("Pause")}else{this.modal.disableButton("Pause")}if(this.counter.running==0){this.modal.enableButton("Choose local file");this.modal.enableButton("Choose FTP file");this.modal.enableButton("Create new file")}else{this.modal.disableButton("Choose local file");this.modal.disableButton("Choose FTP file");this.modal.disableButton("Create new file")}if(this.counter.announce+this.counter.success+this.counter.error>0){$(this.el).find("#upload-table").show()}else{$(this.el).find("#upload-table").hide()}},_upload_percentage:function(h,i){return(this.upload_completed+(h*i))/this.upload_size},_template:function(i,h){return'<div id="'+i+'" class="upload-box"><table id="upload-table" class="table table-striped" style="display: none;"><thead><tr><th>Name</th><th>Size</th><th>Type</th><th>Genome</th><th>Settings</th><th>Status</th><th></th></tr></thead><tbody></tbody></table></div><h6 id="'+h+'" class="upload-info"></h6>'}})});
\ No newline at end of file
+define(["galaxy.modal","utils/utils","mvc/upload/upload-button","mvc/upload/upload-model","mvc/upload/upload-row","mvc/upload/upload-ftp","mvc/ui.popover","mvc/ui","utils/uploadbox"],function(a,f,e,c,b,g,d){return Backbone.View.extend({options:{nginx_upload_path:""},modal:null,ui_button:null,uploadbox:null,current_history:null,upload_size:0,list_extensions:[{id:"auto",text:"Auto-detect"}],list_genomes:[],collection:new c.Collection(),ftp:null,counter:{announce:0,success:0,error:0,running:0,reset:function(){this.announce=this.success=this.error=this.running=0}},initialize:function(i){var h=this;if(!Galaxy.currHistoryPanel||!Galaxy.currHistoryPanel.model){window.setTimeout(function(){h.initialize()},500);return}if(!Galaxy.currUser.get("id")){return}this.ui_button=new e.Model({icon:"fa-upload",tooltip:"Download from URL or upload files from disk",label:"Load Data",onclick:function(j){if(j){h._eventShow(j)}},onunload:function(){if(h.counter.running>0){return"Several uploads are still processing."}}});$("#left .unified-panel-header-inner").append((new e.View(this.ui_button)).$el);var h=this;f.jsonFromUrl(galaxy_config.root+"api/datatypes?upload_only=True",function(j){for(key in j){h.list_extensions.push({id:j[key],text:j[key]})}});f.jsonFromUrl(galaxy_config.root+"api/genomes",function(j){for(key in j){h.list_genomes.push({id:j[key][1],text:j[key][0]})}h.list_genomes.sort(function(l,k){return l.id>k.id?1:l.id<k.id?-1:0})});if(i){this.options=_.defaults(i,this.options)}this.collection.on("remove",function(j){h._eventRemove(j)});this.collection.on("change:genome",function(k){var j=k.get("genome");h.collection.each(function(l){if(l.get("status")=="init"&&l.get("genome")=="?"){l.set("genome",j)}})})},_eventShow:function(j){j.preventDefault();if(!this.modal){var h=this;this.modal=new a.GalaxyModal({title:"Download data directly from web or upload files from your disk",body:this._template("upload-box","upload-info"),buttons:{"Choose local file":function(){h.uploadbox.select()},"Choose FTP file":function(){h._eventFtp()},"Create new file":function(){h._eventCreate()},Start:function(){h._eventStart()},Pause:function(){h._eventStop()},Reset:function(){h._eventReset()},Close:function(){h.modal.hide()},},height:"400",width:"900",closing_events:true});this.setElement("#upload-box");var h=this;this.uploadbox=this.$el.uploadbox({announce:function(k,l,m){h._eventAnnounce(k,l,m)},initialize:function(k,l,m){return h._eventInitialize(k,l,m)},progress:function(k,l,m){h._eventProgress(k,l,m)},success:function(k,l,m){h._eventSuccess(k,l,m)},error:function(k,l,m){h._eventError(k,l,m)},complete:function(){h._eventComplete()}});this._updateScreen();if(this.options.ftp_upload_dir&&this.options.ftp_upload_site){var i=this.modal.getButton("Choose FTP file");this.ftp=new d.View({title:"FTP files",container:i})}else{this.modal.hideButton("Choose FTP file")}}this.modal.show()},_eventRemove:function(i){var h=i.get("status");if(h=="success"){this.counter.success--}else{if(h=="error"){this.counter.error--}else{this.counter.announce--}}this._updateScreen();this.uploadbox.remove(i.id)},_eventAnnounce:function(h,i,k){this.counter.announce++;this._updateScreen();var j=new b(this,{id:h,file_name:i.name,file_size:i.size,file_mode:i.mode,file_path:i.path});this.collection.add(j.model);$(this.el).find("tbody:first").append(j.$el);j.render()},_eventInitialize:function(m,j,s){var k=this.collection.get(m);k.set("status","running");var o=k.get("file_name");var n=k.get("file_path");var h=k.get("file_mode");var p=k.get("extension");var r=k.get("genome");var q=k.get("url_paste");var l=k.get("space_to_tabs");var i=k.get("to_posix_lines");if(!q&&!(j.size>0)){return null}this.uploadbox.configure({url:this.options.nginx_upload_path});if(h=="local"){this.uploadbox.configure({paramname:"files_0|file_data"})}else{this.uploadbox.configure({paramname:null})}tool_input={};if(h=="new"){tool_input["files_0|url_paste"]=q}if(h=="ftp"){tool_input["files_0|ftp_files"]=n}tool_input.dbkey=r;tool_input.file_type=p;tool_input["files_0|type"]="upload_dataset";tool_input.space_to_tabs=l;tool_input.to_posix_lines=i;data={};data.history_id=this.current_history;data.tool_id="upload1";data.inputs=JSON.stringify(tool_input);return data},_eventProgress:function(i,j,h){var k=this.collection.get(i);k.set("percentage",h);this.ui_button.set("percentage",this._upload_percentage(h,j.size))},_eventSuccess:function(i,j,l){var k=this.collection.get(i);k.set("percentage",100);k.set("status","success");var h=k.get("file_size");this.ui_button.set("percentage",this._upload_percentage(100,h));this.upload_completed+=h*100;this.counter.announce--;this.counter.success++;this._updateScreen();Galaxy.currHistoryPanel.refreshHdas()},_eventError:function(h,i,k){var j=this.collection.get(h);j.set("percentage",100);j.set("status","error");j.set("info",k);this.ui_button.set("percentage",this._upload_percentage(100,i.size));this.ui_button.set("status","danger");this.upload_completed+=i.size*100;this.counter.announce--;this.counter.error++;this._updateScreen()},_eventComplete:function(){this.collection.each(function(h){if(h.get("status")=="queued"){h.set("status","init")}});this.counter.running=0;this._updateScreen()},_eventFtp:function(){if(!this.ftp.visible){this.ftp.empty();this.ftp.append((new g(this)).$el);this.ftp.show()}else{this.ftp.hide()}},_eventCreate:function(){this.uploadbox.add([{name:"New File",size:0,mode:"new"}])},_eventStart:function(){if(this.counter.announce==0||this.counter.running>0){return}var h=this;this.upload_size=0;this.upload_completed=0;this.collection.each(function(i){if(i.get("status")=="init"){i.set("status","queued");h.upload_size+=i.get("file_size")}});this.ui_button.set("percentage",0);this.ui_button.set("status","success");this.current_history=Galaxy.currHistoryPanel.model.get("id");this.counter.running=this.counter.announce;this._updateScreen();this.uploadbox.start()},_eventStop:function(){if(this.counter.running==0){return}this.ui_button.set("status","info");this.uploadbox.stop();$("#upload-info").html("Queue will pause after completing the current file...")},_eventReset:function(){if(this.counter.running==0){this.collection.reset();this.counter.reset();this._updateScreen();this.uploadbox.reset();this.ui_button.set("percentage",0)}},_updateScreen:function(){if(this.counter.announce==0){if(this.uploadbox.compatible()){message="You can Drag & Drop files into this box."}else{message="Unfortunately, your browser does not support multiple file uploads or drag&drop.<br>Some supported browsers are: Firefox 4+, Chrome 7+, IE 10+, Opera 12+ or Safari 6+."}}else{if(this.counter.running==0){message="You added "+this.counter.announce+" file(s) to the queue. Add more files or click 'Start' to proceed."}else{message="Please wait..."+this.counter.announce+" out of "+this.counter.running+" remaining."}}$("#upload-info").html(message);if(this.counter.running==0&&this.counter.announce+this.counter.success+this.counter.error>0){this.modal.enableButton("Reset")}else{this.modal.disableButton("Reset")}if(this.counter.running==0&&this.counter.announce>0){this.modal.enableButton("Start")}else{this.modal.disableButton("Start")}if(this.counter.running>0){this.modal.enableButton("Pause")}else{this.modal.disableButton("Pause")}if(this.counter.running==0){this.modal.enableButton("Choose local file");this.modal.enableButton("Choose FTP file");this.modal.enableButton("Create new file")}else{this.modal.disableButton("Choose local file");this.modal.disableButton("Choose FTP file");this.modal.disableButton("Create new file")}if(this.counter.announce+this.counter.success+this.counter.error>0){$(this.el).find("#upload-table").show()}else{$(this.el).find("#upload-table").hide()}},_upload_percentage:function(h,i){return(this.upload_completed+(h*i))/this.upload_size},_template:function(i,h){return'<div id="'+i+'" class="upload-box"><table id="upload-table" class="table table-striped" style="display: none;"><thead><tr><th>Name</th><th>Size</th><th>Type</th><th>Genome</th><th>Settings</th><th>Status</th><th></th></tr></thead><tbody></tbody></table></div><h6 id="'+h+'" class="upload-info"></h6>'}})});
\ No newline at end of file
diff --git a/static/style/blue/base.css b/static/style/blue/base.css
index 92e79095176..ec460de2e1e 100644
--- a/static/style/blue/base.css
+++ 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}
diff --git a/static/style/src/less/upload.less b/static/style/src/less/upload.less
index 2d7526aa8a1..314e51f4030 100644
--- a/static/style/src/less/upload.less
+++ b/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;