From 2de52bb3bf1455f70b16716c99faeb64ffcfb740 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 16 Mar 2015 02:17:35 -0400
Subject: [PATCH] Ui: Add js-part of library data tool parameter, code
 adjustments to select/option fields

---
 .../scripts/mvc/form/form-parameters.js       |  21 ++-
 client/galaxy/scripts/mvc/ui/ui-options.js    |  51 ++-----
 .../scripts/mvc/ui/ui-select-default.js       | 101 +++++---------
 .../scripts/mvc/ui/ui-select-library.js       | 132 ++++++++++++++++++
 static/scripts/mvc/form/form-parameters.js    |  21 ++-
 static/scripts/mvc/ui/ui-options.js           |  51 ++-----
 static/scripts/mvc/ui/ui-select-default.js    | 101 +++++---------
 static/scripts/mvc/ui/ui-select-library.js    | 132 ++++++++++++++++++
 .../packed/mvc/form/form-parameters.js        |   2 +-
 static/scripts/packed/mvc/ui/ui-options.js    |   2 +-
 .../packed/mvc/ui/ui-select-default.js        |   2 +-
 .../packed/mvc/ui/ui-select-library.js        |   1 +
 12 files changed, 404 insertions(+), 213 deletions(-)
 create mode 100644 client/galaxy/scripts/mvc/ui/ui-select-library.js
 create mode 100644 static/scripts/mvc/ui/ui-select-library.js
 create mode 100644 static/scripts/packed/mvc/ui/ui-select-library.js

diff --git a/client/galaxy/scripts/mvc/form/form-parameters.js b/client/galaxy/scripts/mvc/form/form-parameters.js
index 77f0ebf2c10..7707221b312 100644
--- a/client/galaxy/scripts/mvc/form/form-parameters.js
+++ b/client/galaxy/scripts/mvc/form/form-parameters.js
@@ -4,8 +4,9 @@
 define(['utils/utils',
         'mvc/ui/ui-misc',
         'mvc/form/form-select-content',
+        'mvc/ui/ui-select-library',
         'mvc/ui/ui-color-picker'],
-    function(Utils, Ui, SelectContent, ColorPicker) {
+    function(Utils, Ui, SelectContent, SelectLibrary, ColorPicker) {
 
     // create form view
     return Backbone.Model.extend({
@@ -24,7 +25,8 @@ define(['utils/utils',
             'color'             : '_fieldColor',
             'hidden'            : '_fieldHidden',
             'hidden_data'       : '_fieldHidden',
-            'baseurl'           : '_fieldHidden'
+            'baseurl'           : '_fieldHidden',
+            'library_data'      : '_fieldLibrary'
         },
         
         // initialize
@@ -141,6 +143,7 @@ define(['utils/utils',
                 id          : 'field-' + input_def.id,
                 data        : options,
                 error_text  : input_def.error_text || 'No options available',
+                optional    : input_def.optional && input_def.default_value === null,
                 multiple    : input_def.multiple,
                 searchable  : input_def.searchable,
                 onchange    : function() {
@@ -251,6 +254,20 @@ define(['utils/utils',
                     self.app.trigger('change');
                 }
             });
+        },
+
+        /** Library dataset field
+        */
+        _fieldLibrary: function(input_def) {
+            var self = this;
+            return new SelectLibrary.View({
+                id          : 'field-' + input_def.id,
+                optional    : input_def.optional,
+                multiple    : input_def.multiple,
+                onchange    : function() {
+                    self.app.trigger('change');
+                }
+            });
         }
     });
 
diff --git a/client/galaxy/scripts/mvc/ui/ui-options.js b/client/galaxy/scripts/mvc/ui/ui-options.js
index 1e82cea6a5e..6658d09ccad 100644
--- a/client/galaxy/scripts/mvc/ui/ui-options.js
+++ b/client/galaxy/scripts/mvc/ui/ui-options.js
@@ -39,7 +39,7 @@ var Base = Backbone.View.extend({
             this.all_button = new ButtonCheck({
                 onclick: function() {
                     self.$('input').prop('checked', self.all_button.value() !== 0);
-                    self._change();
+                    self.trigger('change');
                 }
             });
             this.$menu.append(this.all_button.$el);
@@ -60,7 +60,7 @@ var Base = Backbone.View.extend({
 
         // add change event. fires on trigger
         this.on('change', function() {
-            self._change();
+            this.options.onchange && this.options.onchange(this.value());
         });
     },
 
@@ -91,7 +91,7 @@ var Base = Backbone.View.extend({
         var self = this;
         this.$('input').on('change', function() {
             self.value(self._getValue());
-            self._change();
+            self.trigger('change');
         });
 
         // set previous value
@@ -105,26 +105,30 @@ var Base = Backbone.View.extend({
         if (new_value !== undefined) {
             // reset selection
             this.$('input').prop('checked', false);
-
             // set value
             if (new_value !== null) {
                 // check if its an array
                 if (!(new_value instanceof Array)) {
                     new_value = [new_value];
                 }
-
                 // update to new selection
                 for (var i in new_value) {
                     this.$('input[value="' + new_value[i] + '"]').first().prop('checked', true);
                 }
             };
         }
-
-        // refresh
-        this._refresh();
-
-        // get and return value
-        return this._getValue();
+        // get current value
+        var current = this._getValue();
+        if (this.all_button) {
+            var value = current;
+            if (!(value instanceof Array)) {
+                value = 0;
+            } else {
+                value = value.length;
+            }
+            this.all_button.value(value, this._size());
+        }
+        return current;
     },
 
     /** Check if selected value exists (or any if multiple)
@@ -167,21 +171,6 @@ var Base = Backbone.View.extend({
     /** Hide wait message
     */
     unwait: function() {
-        this._refresh();
-    },
-
-    /** Trigger custom onchange callback function
-    */
-    _change: function() {
-        if (this.options.onchange) {
-            this.options.onchange(this._getValue());
-        }
-    },
-
-    /** Refresh options view
-    */
-    _refresh: function() {
-        // show/hide messages
         var total = this._size();
         if (total == 0) {
             this._messageShow(this.options.error_text, 'danger');
@@ -192,16 +181,6 @@ var Base = Backbone.View.extend({
             this.$options.css('display', 'inline-block');
             this.$menu.show();
         }
-        // refresh select/unselect button
-        if (this.all_button) {
-            var value = this._getValue();
-            if (!(value instanceof Array)) {
-                value = 0;
-            } else {
-                value = value.length;
-            }
-            this.all_button.value(value, total);
-        }
     },
 
     /** Return current selection
diff --git a/client/galaxy/scripts/mvc/ui/ui-select-default.js b/client/galaxy/scripts/mvc/ui/ui-select-default.js
index e2f441b8890..9b4f4e502ad 100644
--- a/client/galaxy/scripts/mvc/ui/ui-select-default.js
+++ b/client/galaxy/scripts/mvc/ui/ui-select-default.js
@@ -6,7 +6,7 @@ define(['utils/utils', 'mvc/ui/ui-button-check'], function(Utils, ButtonCheck) {
  */
 var View = Backbone.View.extend({
     // options
-    optionsDefault : {
+    optionsDefault: {
         id          : Utils.uid(),
         cls         : 'ui-select',
         error_text  : 'No data available',
@@ -19,7 +19,7 @@ var View = Backbone.View.extend({
     },
 
     // initialize
-    initialize : function(options) {
+    initialize: function(options) {
         // link this
         var self = this;
 
@@ -45,7 +45,7 @@ var View = Backbone.View.extend({
                             new_value = self._availableOptions();
                         }
                         self.value(new_value);
-                        self._change();
+                        self.trigger('change');
                     }
                 });
                 this.$el.prepend(this.all_button.$el);
@@ -56,7 +56,7 @@ var View = Backbone.View.extend({
             this.$button.remove();
         }
 
-        // refresh
+        // update initial options
         this.update(this.options.data);
 
         // set initial value
@@ -78,18 +78,18 @@ var View = Backbone.View.extend({
 
         // add change event. fires only on user activity
         this.$select.on('change', function() {
-            self._change();
+            self.trigger('change');
         });
 
         // add change event. fires on trigger
         this.on('change', function() {
-            self._change();
+            self.options.onchange && self.options.onchange(this.value());
         });
     },
 
     /** Return/Set current selection
     */
-    value : function (new_value) {
+    value: function (new_value) {
         // set new value
         if (new_value !== undefined) {
             if (new_value === null) {
@@ -102,12 +102,12 @@ var View = Backbone.View.extend({
                 }
             }
         }
-
-        // refresh
-        this._refresh();
-
-        // validate and return value
-        return this._getValue();
+        // get current value
+        var current = this._getValue();
+        if (this.all_button) {
+            this.all_button.value($.isArray(current) && current.length || 0, this._size());
+        }
+        return current;
     },
 
     /** Return the first select option
@@ -123,7 +123,7 @@ var View = Backbone.View.extend({
 
     /** Return the label/text of the current selection
     */
-    text : function () {
+    text: function () {
         return this.$select.find('option:selected').text();
     },
 
@@ -173,28 +173,7 @@ var View = Backbone.View.extend({
         this.$select.prop('disabled', true);
     },
 
-    /** Add a select option
-    */
-    add: function(options) {
-        // add options
-        this.$select.append(this._templateOption(options));
-        
-        // refresh
-        this._refresh();
-    },
-
-    /** Delete a select option
-    */
-    del: function(value) {
-        // remove option
-        this.$select.find('option[value=' + value + ']').remove();
-        this.$select.trigger('change');
-
-        // refresh
-        this._refresh();
-    },
-
-    /** Update select options
+    /** Update all available options at once
     */
     update: function(options) {
         // backup current value
@@ -213,6 +192,18 @@ var View = Backbone.View.extend({
             this.$select.append(this._templateOption(options[key]));
         }
 
+        // count remaining entries
+        if (this._size() == 0) {
+            // disable select field
+            this.disable();
+
+            // create placeholder
+            this.$select.append(this._templateOption({value : '__null__', label : this.options.error_text}));
+        } else {
+            // enable select field
+            this.enable();
+        }
+
         // update to searchable field (in this case select2)
         if (this.options.searchable) {
             this.$select.select2('destroy');
@@ -240,15 +231,8 @@ var View = Backbone.View.extend({
         return this.$select.find('option[value="' + value + '"]').length > 0;
     },
 
-    /** Trigger custom onchange callback
+    /** Get current value from dom
     */
-    _change: function() {
-        if (this.options.onchange) {
-            this.options.onchange(this._getValue());
-        }
-    },
-
-    /** Validate */
     _getValue: function() {
         var val = this.$select.val();
         if (!Utils.validate(val)) {
@@ -257,29 +241,6 @@ var View = Backbone.View.extend({
         return val;
     },
 
-    /** Refresh the select view
-    */
-    _refresh: function() {
-        // count remaining entries
-        var total = this.$select.find('option').length;
-        if (total == 0) {
-            // disable select field
-            this.disable();
-
-            // create placeholder
-            this.$select.empty();
-            this.$select.append(this._templateOption({value : '__null__', label : this.options.error_text}));
-        } else {
-            // enable select field
-            this.enable();
-        }
-        // refresh select/unselect button
-        if (this.all_button) {
-            var value = this._getValue();
-            this.all_button.value($.isArray(value) && value.length || 0, total);
-        }
-    },
-
     /** Returns all currently available options
     */
     _availableOptions: function() {
@@ -290,6 +251,12 @@ var View = Backbone.View.extend({
         return available;
     },
 
+    /** Number of available options
+    */
+    _size: function() {
+        return this.$select.find('option').length;
+    },
+
     /** Template for select options
     */
     _templateOption: function(options) {
diff --git a/client/galaxy/scripts/mvc/ui/ui-select-library.js b/client/galaxy/scripts/mvc/ui/ui-select-library.js
new file mode 100644
index 00000000000..aaa105def18
--- /dev/null
+++ b/client/galaxy/scripts/mvc/ui/ui-select-library.js
@@ -0,0 +1,132 @@
+// dependencies
+define(['utils/utils', 'mvc/ui/ui-misc', 'mvc/ui/ui-tabs', 'mvc/tools/tools-template'],
+        function(Utils, Ui, Tabs, ToolTemplate) {
+
+// collection of libraries
+var Libraries = Backbone.Collection.extend({
+    url: galaxy_config.root + 'api/libraries'
+});
+
+// collection of dataset
+var LibraryDatasets = Backbone.Collection.extend({
+    initialize: function() {
+        var self = this;
+        this.config = new Backbone.Model({ library_id: null });
+        this.config.on('change', function() {
+            self.fetch({reset: true});
+        });
+    },
+    url: function() {
+        return galaxy_config.root + 'api/libraries/' + this.config.get('library_id') + '/contents'
+    }
+});
+
+// hda/hdca content selector ui element
+var View = Backbone.View.extend({
+    // initialize
+    initialize : function(options) {
+        // link this
+        var self = this;
+
+        // collections
+        this.libraries  = new Libraries();
+        this.datasets   = new LibraryDatasets();
+
+        // link app and options
+        this.options = options;
+
+        // select field for the library
+        this.library_select = new Ui.Select.View({
+            optional    : options.optional,
+            onchange    : function(value) {
+                self.datasets.config.set('library_id', value);
+            }
+        });
+
+        // select field for the library dataset
+        this.dataset_select = new Ui.Select.View({
+            optional    : options.optional,
+            multiple    : options.multiple,
+            onchange    : function() {
+                self.trigger('change');
+            }
+        });
+
+        // add reset handler for fetched libraries
+        this.libraries.on('reset', function() {
+            var data = [];
+            self.libraries.each(function(model) {
+                data.push({
+                    value   : model.id,
+                    label   : model.get('name')
+                });
+            });
+            self.library_select.update(data);
+            self.trigger('change');
+        });
+
+        // add reset handler for fetched library datasets
+        this.datasets.on('reset', function() {
+            var data = [];
+            var library_current = self.library_select.text();
+            if (library_current !== null) {
+                self.datasets.each(function(model) {
+                    if (model.get('type') === 'file') {
+                        data.push({
+                            value   : model.id,
+                            label   : library_current + model.get('name')
+                        });
+                    }
+                });
+            }
+            self.dataset_select.update(data);
+            self.trigger('change');
+        });
+
+        // add change event. fires on trigger
+        this.on('change', function() {
+            options.onchange && options.onchange(self.value());
+        });
+
+        // create element
+        this.setElement(this._template());
+        this.$('.library-select').append(this.library_select.$el);
+        this.$('.dataset-select').append(this.dataset_select.$el);
+
+        // initial fetch of libraries
+        this.libraries.fetch({
+            reset: true,
+            success: function() {
+                self.library_select.trigger('change');
+                if (self.options.value !== undefined) {
+                    self.value(self.options.value);
+                }
+            }
+        });
+    },
+
+    /** Return/Set currently selected library datasets */
+    value: function(new_val) {
+        return this.dataset_select.value();
+    },
+
+    /** Template */
+    _template: function() {
+        return  '<div class="ui-select-library">' +
+                    '<div class="library ui-margin-bottom">' +
+                        '<span class="library-title">Select Library</span>' +
+                        '<span class="library-select"/>' +
+                    '</div>' +
+                    '<div class="dataset">' +
+                        '<span class="dataset-title">Select Dataset</span>' +
+                        '<span class="dataset-select"/>' +
+                    '</div>' +
+                '</div>';
+    }
+});
+
+return {
+    View: View
+}
+
+});
diff --git a/static/scripts/mvc/form/form-parameters.js b/static/scripts/mvc/form/form-parameters.js
index 77f0ebf2c10..7707221b312 100644
--- a/static/scripts/mvc/form/form-parameters.js
+++ b/static/scripts/mvc/form/form-parameters.js
@@ -4,8 +4,9 @@
 define(['utils/utils',
         'mvc/ui/ui-misc',
         'mvc/form/form-select-content',
+        'mvc/ui/ui-select-library',
         'mvc/ui/ui-color-picker'],
-    function(Utils, Ui, SelectContent, ColorPicker) {
+    function(Utils, Ui, SelectContent, SelectLibrary, ColorPicker) {
 
     // create form view
     return Backbone.Model.extend({
@@ -24,7 +25,8 @@ define(['utils/utils',
             'color'             : '_fieldColor',
             'hidden'            : '_fieldHidden',
             'hidden_data'       : '_fieldHidden',
-            'baseurl'           : '_fieldHidden'
+            'baseurl'           : '_fieldHidden',
+            'library_data'      : '_fieldLibrary'
         },
         
         // initialize
@@ -141,6 +143,7 @@ define(['utils/utils',
                 id          : 'field-' + input_def.id,
                 data        : options,
                 error_text  : input_def.error_text || 'No options available',
+                optional    : input_def.optional && input_def.default_value === null,
                 multiple    : input_def.multiple,
                 searchable  : input_def.searchable,
                 onchange    : function() {
@@ -251,6 +254,20 @@ define(['utils/utils',
                     self.app.trigger('change');
                 }
             });
+        },
+
+        /** Library dataset field
+        */
+        _fieldLibrary: function(input_def) {
+            var self = this;
+            return new SelectLibrary.View({
+                id          : 'field-' + input_def.id,
+                optional    : input_def.optional,
+                multiple    : input_def.multiple,
+                onchange    : function() {
+                    self.app.trigger('change');
+                }
+            });
         }
     });
 
diff --git a/static/scripts/mvc/ui/ui-options.js b/static/scripts/mvc/ui/ui-options.js
index 1e82cea6a5e..6658d09ccad 100644
--- a/static/scripts/mvc/ui/ui-options.js
+++ b/static/scripts/mvc/ui/ui-options.js
@@ -39,7 +39,7 @@ var Base = Backbone.View.extend({
             this.all_button = new ButtonCheck({
                 onclick: function() {
                     self.$('input').prop('checked', self.all_button.value() !== 0);
-                    self._change();
+                    self.trigger('change');
                 }
             });
             this.$menu.append(this.all_button.$el);
@@ -60,7 +60,7 @@ var Base = Backbone.View.extend({
 
         // add change event. fires on trigger
         this.on('change', function() {
-            self._change();
+            this.options.onchange && this.options.onchange(this.value());
         });
     },
 
@@ -91,7 +91,7 @@ var Base = Backbone.View.extend({
         var self = this;
         this.$('input').on('change', function() {
             self.value(self._getValue());
-            self._change();
+            self.trigger('change');
         });
 
         // set previous value
@@ -105,26 +105,30 @@ var Base = Backbone.View.extend({
         if (new_value !== undefined) {
             // reset selection
             this.$('input').prop('checked', false);
-
             // set value
             if (new_value !== null) {
                 // check if its an array
                 if (!(new_value instanceof Array)) {
                     new_value = [new_value];
                 }
-
                 // update to new selection
                 for (var i in new_value) {
                     this.$('input[value="' + new_value[i] + '"]').first().prop('checked', true);
                 }
             };
         }
-
-        // refresh
-        this._refresh();
-
-        // get and return value
-        return this._getValue();
+        // get current value
+        var current = this._getValue();
+        if (this.all_button) {
+            var value = current;
+            if (!(value instanceof Array)) {
+                value = 0;
+            } else {
+                value = value.length;
+            }
+            this.all_button.value(value, this._size());
+        }
+        return current;
     },
 
     /** Check if selected value exists (or any if multiple)
@@ -167,21 +171,6 @@ var Base = Backbone.View.extend({
     /** Hide wait message
     */
     unwait: function() {
-        this._refresh();
-    },
-
-    /** Trigger custom onchange callback function
-    */
-    _change: function() {
-        if (this.options.onchange) {
-            this.options.onchange(this._getValue());
-        }
-    },
-
-    /** Refresh options view
-    */
-    _refresh: function() {
-        // show/hide messages
         var total = this._size();
         if (total == 0) {
             this._messageShow(this.options.error_text, 'danger');
@@ -192,16 +181,6 @@ var Base = Backbone.View.extend({
             this.$options.css('display', 'inline-block');
             this.$menu.show();
         }
-        // refresh select/unselect button
-        if (this.all_button) {
-            var value = this._getValue();
-            if (!(value instanceof Array)) {
-                value = 0;
-            } else {
-                value = value.length;
-            }
-            this.all_button.value(value, total);
-        }
     },
 
     /** Return current selection
diff --git a/static/scripts/mvc/ui/ui-select-default.js b/static/scripts/mvc/ui/ui-select-default.js
index e2f441b8890..9b4f4e502ad 100644
--- a/static/scripts/mvc/ui/ui-select-default.js
+++ b/static/scripts/mvc/ui/ui-select-default.js
@@ -6,7 +6,7 @@ define(['utils/utils', 'mvc/ui/ui-button-check'], function(Utils, ButtonCheck) {
  */
 var View = Backbone.View.extend({
     // options
-    optionsDefault : {
+    optionsDefault: {
         id          : Utils.uid(),
         cls         : 'ui-select',
         error_text  : 'No data available',
@@ -19,7 +19,7 @@ var View = Backbone.View.extend({
     },
 
     // initialize
-    initialize : function(options) {
+    initialize: function(options) {
         // link this
         var self = this;
 
@@ -45,7 +45,7 @@ var View = Backbone.View.extend({
                             new_value = self._availableOptions();
                         }
                         self.value(new_value);
-                        self._change();
+                        self.trigger('change');
                     }
                 });
                 this.$el.prepend(this.all_button.$el);
@@ -56,7 +56,7 @@ var View = Backbone.View.extend({
             this.$button.remove();
         }
 
-        // refresh
+        // update initial options
         this.update(this.options.data);
 
         // set initial value
@@ -78,18 +78,18 @@ var View = Backbone.View.extend({
 
         // add change event. fires only on user activity
         this.$select.on('change', function() {
-            self._change();
+            self.trigger('change');
         });
 
         // add change event. fires on trigger
         this.on('change', function() {
-            self._change();
+            self.options.onchange && self.options.onchange(this.value());
         });
     },
 
     /** Return/Set current selection
     */
-    value : function (new_value) {
+    value: function (new_value) {
         // set new value
         if (new_value !== undefined) {
             if (new_value === null) {
@@ -102,12 +102,12 @@ var View = Backbone.View.extend({
                 }
             }
         }
-
-        // refresh
-        this._refresh();
-
-        // validate and return value
-        return this._getValue();
+        // get current value
+        var current = this._getValue();
+        if (this.all_button) {
+            this.all_button.value($.isArray(current) && current.length || 0, this._size());
+        }
+        return current;
     },
 
     /** Return the first select option
@@ -123,7 +123,7 @@ var View = Backbone.View.extend({
 
     /** Return the label/text of the current selection
     */
-    text : function () {
+    text: function () {
         return this.$select.find('option:selected').text();
     },
 
@@ -173,28 +173,7 @@ var View = Backbone.View.extend({
         this.$select.prop('disabled', true);
     },
 
-    /** Add a select option
-    */
-    add: function(options) {
-        // add options
-        this.$select.append(this._templateOption(options));
-        
-        // refresh
-        this._refresh();
-    },
-
-    /** Delete a select option
-    */
-    del: function(value) {
-        // remove option
-        this.$select.find('option[value=' + value + ']').remove();
-        this.$select.trigger('change');
-
-        // refresh
-        this._refresh();
-    },
-
-    /** Update select options
+    /** Update all available options at once
     */
     update: function(options) {
         // backup current value
@@ -213,6 +192,18 @@ var View = Backbone.View.extend({
             this.$select.append(this._templateOption(options[key]));
         }
 
+        // count remaining entries
+        if (this._size() == 0) {
+            // disable select field
+            this.disable();
+
+            // create placeholder
+            this.$select.append(this._templateOption({value : '__null__', label : this.options.error_text}));
+        } else {
+            // enable select field
+            this.enable();
+        }
+
         // update to searchable field (in this case select2)
         if (this.options.searchable) {
             this.$select.select2('destroy');
@@ -240,15 +231,8 @@ var View = Backbone.View.extend({
         return this.$select.find('option[value="' + value + '"]').length > 0;
     },
 
-    /** Trigger custom onchange callback
+    /** Get current value from dom
     */
-    _change: function() {
-        if (this.options.onchange) {
-            this.options.onchange(this._getValue());
-        }
-    },
-
-    /** Validate */
     _getValue: function() {
         var val = this.$select.val();
         if (!Utils.validate(val)) {
@@ -257,29 +241,6 @@ var View = Backbone.View.extend({
         return val;
     },
 
-    /** Refresh the select view
-    */
-    _refresh: function() {
-        // count remaining entries
-        var total = this.$select.find('option').length;
-        if (total == 0) {
-            // disable select field
-            this.disable();
-
-            // create placeholder
-            this.$select.empty();
-            this.$select.append(this._templateOption({value : '__null__', label : this.options.error_text}));
-        } else {
-            // enable select field
-            this.enable();
-        }
-        // refresh select/unselect button
-        if (this.all_button) {
-            var value = this._getValue();
-            this.all_button.value($.isArray(value) && value.length || 0, total);
-        }
-    },
-
     /** Returns all currently available options
     */
     _availableOptions: function() {
@@ -290,6 +251,12 @@ var View = Backbone.View.extend({
         return available;
     },
 
+    /** Number of available options
+    */
+    _size: function() {
+        return this.$select.find('option').length;
+    },
+
     /** Template for select options
     */
     _templateOption: function(options) {
diff --git a/static/scripts/mvc/ui/ui-select-library.js b/static/scripts/mvc/ui/ui-select-library.js
new file mode 100644
index 00000000000..aaa105def18
--- /dev/null
+++ b/static/scripts/mvc/ui/ui-select-library.js
@@ -0,0 +1,132 @@
+// dependencies
+define(['utils/utils', 'mvc/ui/ui-misc', 'mvc/ui/ui-tabs', 'mvc/tools/tools-template'],
+        function(Utils, Ui, Tabs, ToolTemplate) {
+
+// collection of libraries
+var Libraries = Backbone.Collection.extend({
+    url: galaxy_config.root + 'api/libraries'
+});
+
+// collection of dataset
+var LibraryDatasets = Backbone.Collection.extend({
+    initialize: function() {
+        var self = this;
+        this.config = new Backbone.Model({ library_id: null });
+        this.config.on('change', function() {
+            self.fetch({reset: true});
+        });
+    },
+    url: function() {
+        return galaxy_config.root + 'api/libraries/' + this.config.get('library_id') + '/contents'
+    }
+});
+
+// hda/hdca content selector ui element
+var View = Backbone.View.extend({
+    // initialize
+    initialize : function(options) {
+        // link this
+        var self = this;
+
+        // collections
+        this.libraries  = new Libraries();
+        this.datasets   = new LibraryDatasets();
+
+        // link app and options
+        this.options = options;
+
+        // select field for the library
+        this.library_select = new Ui.Select.View({
+            optional    : options.optional,
+            onchange    : function(value) {
+                self.datasets.config.set('library_id', value);
+            }
+        });
+
+        // select field for the library dataset
+        this.dataset_select = new Ui.Select.View({
+            optional    : options.optional,
+            multiple    : options.multiple,
+            onchange    : function() {
+                self.trigger('change');
+            }
+        });
+
+        // add reset handler for fetched libraries
+        this.libraries.on('reset', function() {
+            var data = [];
+            self.libraries.each(function(model) {
+                data.push({
+                    value   : model.id,
+                    label   : model.get('name')
+                });
+            });
+            self.library_select.update(data);
+            self.trigger('change');
+        });
+
+        // add reset handler for fetched library datasets
+        this.datasets.on('reset', function() {
+            var data = [];
+            var library_current = self.library_select.text();
+            if (library_current !== null) {
+                self.datasets.each(function(model) {
+                    if (model.get('type') === 'file') {
+                        data.push({
+                            value   : model.id,
+                            label   : library_current + model.get('name')
+                        });
+                    }
+                });
+            }
+            self.dataset_select.update(data);
+            self.trigger('change');
+        });
+
+        // add change event. fires on trigger
+        this.on('change', function() {
+            options.onchange && options.onchange(self.value());
+        });
+
+        // create element
+        this.setElement(this._template());
+        this.$('.library-select').append(this.library_select.$el);
+        this.$('.dataset-select').append(this.dataset_select.$el);
+
+        // initial fetch of libraries
+        this.libraries.fetch({
+            reset: true,
+            success: function() {
+                self.library_select.trigger('change');
+                if (self.options.value !== undefined) {
+                    self.value(self.options.value);
+                }
+            }
+        });
+    },
+
+    /** Return/Set currently selected library datasets */
+    value: function(new_val) {
+        return this.dataset_select.value();
+    },
+
+    /** Template */
+    _template: function() {
+        return  '<div class="ui-select-library">' +
+                    '<div class="library ui-margin-bottom">' +
+                        '<span class="library-title">Select Library</span>' +
+                        '<span class="library-select"/>' +
+                    '</div>' +
+                    '<div class="dataset">' +
+                        '<span class="dataset-title">Select Dataset</span>' +
+                        '<span class="dataset-select"/>' +
+                    '</div>' +
+                '</div>';
+    }
+});
+
+return {
+    View: View
+}
+
+});
diff --git a/static/scripts/packed/mvc/form/form-parameters.js b/static/scripts/packed/mvc/form/form-parameters.js
index cbee0d8cfa1..e213405a8af 100644
--- a/static/scripts/packed/mvc/form/form-parameters.js
+++ b/static/scripts/packed/mvc/form/form-parameters.js
@@ -1 +1 @@
-define(["utils/utils","mvc/ui/ui-misc","mvc/form/form-select-content","mvc/ui/ui-color-picker"],function(c,d,a,b){return Backbone.Model.extend({types:{text:"_fieldText",select:"_fieldSelect",data_column:"_fieldSelect",genomebuild:"_fieldSelect",data:"_fieldData",data_collection:"_fieldData",integer:"_fieldSlider","float":"_fieldSlider","boolean":"_fieldBoolean",drill_down:"_fieldDrilldown",color:"_fieldColor",hidden:"_fieldHidden",hidden_data:"_fieldHidden",baseurl:"_fieldHidden"},initialize:function(f,e){this.app=f},create:function(e){if(e.value===undefined){e.value=null}if(e.default_value===undefined){e.default_value=e.value}var g=null;var f=this.types[e.type];if(f&&typeof(this[f])==="function"){g=this[f].call(this,e)}if(!g){this.app.incompatible=true;if(e.options){g=this._fieldSelect(e)}else{g=this._fieldText(e)}console.debug("tools-form::_addRow() : Auto matched field type ("+e.type+").")}if(e.value!==undefined){g.value(e.value)}return g},_fieldData:function(e){if(!this.app.options.is_dynamic){e.info="Data input '"+e.name+"' ("+c.textify(e.extensions.toString())+")";e.value=null;return this._fieldHidden(e)}var f=this;return new a.View(this.app,{id:"field-"+e.id,extensions:e.extensions,optional:e.optional,multiple:e.multiple,type:e.type,data:e.options,onchange:function(){f.app.trigger("change")}})},_fieldSelect:function(e){if(!this.app.options.is_dynamic&&e.is_dynamic){return this._fieldText(e)}if(e.type=="data_column"){e.error_text="Missing columns in referenced dataset."}var g=[];for(var h in e.options){var j=e.options[h];g.push({label:j[0],value:j[1]})}var k=d.Select;switch(e.display){case"checkboxes":k=d.Checkbox;break;case"radio":k=d.Radio;break}var f=this;return new k.View({id:"field-"+e.id,data:g,error_text:e.error_text||"No options available",multiple:e.multiple,searchable:e.searchable,onchange:function(){f.app.trigger("change")}})},_fieldDrilldown:function(e){if(!this.app.options.is_dynamic&&e.is_dynamic){return this._fieldText(e)}var f=this;return new d.Drilldown.View({id:"field-"+e.id,data:e.options,display:e.display,onchange:function(){f.app.trigger("change")}})},_fieldText:function(e){if(e.options){e.area=e.multiple;if(!c.validate(e.value)){e.value=""}else{if(e.value instanceof Array){e.value=value.toString()}else{e.value=String(e.value).replace(/[\[\]'"\s]/g,"");if(e.multiple){e.value=e.value.replace(/,/g,"\n")}}}}var f=this;return new d.Input({id:"field-"+e.id,area:e.area,onchange:function(){f.app.trigger("change")}})},_fieldSlider:function(e){var f=this;return new d.Slider.View({id:"field-"+e.id,precise:e.type=="float",min:e.min,max:e.max,onchange:function(){f.app.trigger("change")}})},_fieldHidden:function(e){return new d.Hidden({id:"field-"+e.id,info:e.info})},_fieldBoolean:function(e){var f=this;return new d.RadioButton.View({id:"field-"+e.id,data:[{label:"Yes",value:"true"},{label:"No",value:"false"}],onchange:function(){f.app.trigger("change")}})},_fieldColor:function(e){var f=this;return new b({id:"field-"+e.id,onchange:function(){f.app.trigger("change")}})}});return{View:View}});
\ No newline at end of file
+define(["utils/utils","mvc/ui/ui-misc","mvc/form/form-select-content","mvc/ui/ui-select-library","mvc/ui/ui-color-picker"],function(d,e,a,c,b){return Backbone.Model.extend({types:{text:"_fieldText",select:"_fieldSelect",data_column:"_fieldSelect",genomebuild:"_fieldSelect",data:"_fieldData",data_collection:"_fieldData",integer:"_fieldSlider","float":"_fieldSlider","boolean":"_fieldBoolean",drill_down:"_fieldDrilldown",color:"_fieldColor",hidden:"_fieldHidden",hidden_data:"_fieldHidden",baseurl:"_fieldHidden",library_data:"_fieldLibrary"},initialize:function(g,f){this.app=g},create:function(f){if(f.value===undefined){f.value=null}if(f.default_value===undefined){f.default_value=f.value}var h=null;var g=this.types[f.type];if(g&&typeof(this[g])==="function"){h=this[g].call(this,f)}if(!h){this.app.incompatible=true;if(f.options){h=this._fieldSelect(f)}else{h=this._fieldText(f)}console.debug("tools-form::_addRow() : Auto matched field type ("+f.type+").")}if(f.value!==undefined){h.value(f.value)}return h},_fieldData:function(f){if(!this.app.options.is_dynamic){f.info="Data input '"+f.name+"' ("+d.textify(f.extensions.toString())+")";f.value=null;return this._fieldHidden(f)}var g=this;return new a.View(this.app,{id:"field-"+f.id,extensions:f.extensions,optional:f.optional,multiple:f.multiple,type:f.type,data:f.options,onchange:function(){g.app.trigger("change")}})},_fieldSelect:function(f){if(!this.app.options.is_dynamic&&f.is_dynamic){return this._fieldText(f)}if(f.type=="data_column"){f.error_text="Missing columns in referenced dataset."}var h=[];for(var j in f.options){var k=f.options[j];h.push({label:k[0],value:k[1]})}var l=e.Select;switch(f.display){case"checkboxes":l=e.Checkbox;break;case"radio":l=e.Radio;break}var g=this;return new l.View({id:"field-"+f.id,data:h,error_text:f.error_text||"No options available",optional:f.optional&&f.default_value===null,multiple:f.multiple,searchable:f.searchable,onchange:function(){g.app.trigger("change")}})},_fieldDrilldown:function(f){if(!this.app.options.is_dynamic&&f.is_dynamic){return this._fieldText(f)}var g=this;return new e.Drilldown.View({id:"field-"+f.id,data:f.options,display:f.display,onchange:function(){g.app.trigger("change")}})},_fieldText:function(f){if(f.options){f.area=f.multiple;if(!d.validate(f.value)){f.value=""}else{if(f.value instanceof Array){f.value=value.toString()}else{f.value=String(f.value).replace(/[\[\]'"\s]/g,"");if(f.multiple){f.value=f.value.replace(/,/g,"\n")}}}}var g=this;return new e.Input({id:"field-"+f.id,area:f.area,onchange:function(){g.app.trigger("change")}})},_fieldSlider:function(f){var g=this;return new e.Slider.View({id:"field-"+f.id,precise:f.type=="float",min:f.min,max:f.max,onchange:function(){g.app.trigger("change")}})},_fieldHidden:function(f){return new e.Hidden({id:"field-"+f.id,info:f.info})},_fieldBoolean:function(f){var g=this;return new e.RadioButton.View({id:"field-"+f.id,data:[{label:"Yes",value:"true"},{label:"No",value:"false"}],onchange:function(){g.app.trigger("change")}})},_fieldColor:function(f){var g=this;return new b({id:"field-"+f.id,onchange:function(){g.app.trigger("change")}})},_fieldLibrary:function(f){var g=this;return new c.View({id:"field-"+f.id,optional:f.optional,multiple:f.multiple,onchange:function(){g.app.trigger("change")}})}});return{View:View}});
\ No newline at end of file
diff --git a/static/scripts/packed/mvc/ui/ui-options.js b/static/scripts/packed/mvc/ui/ui-options.js
index fb14f3dce83..194ea4a6e31 100644
--- a/static/scripts/packed/mvc/ui/ui-options.js
+++ b/static/scripts/packed/mvc/ui/ui-options.js
@@ -1 +1 @@
-define(["utils/utils","mvc/ui/ui-button-check"],function(c,e){var b=Backbone.View.extend({initialize:function(i){var h=this;this.optionsDefault={visible:true,data:[],id:c.uid(),error_text:"No data available.",wait_text:"Please wait...",multiple:false};this.options=c.merge(i,this.optionsDefault);this.setElement('<div class="ui-options"/>');this.$message=$("<div/>");this.$options=$(this._template(i));this.$menu=$('<div class="ui-options-menu"/>');this.$el.append(this.$message);this.$el.append(this.$menu);this.$el.append(this.$options);if(this.options.multiple){this.all_button=new e({onclick:function(){h.$("input").prop("checked",h.all_button.value()!==0);h._change()}});this.$menu.append(this.all_button.$el)}if(!this.options.visible){this.$el.hide()}this.update(this.options.data);if(this.options.value!==undefined){this.value(this.options.value)}this.on("change",function(){h._change()})},update:function(i){var l=this._getValue();this.$options.empty();if(this._templateOptions){this.$options.append(this._templateOptions(i))}else{for(var j in i){var k=$(this._templateOption(i[j]));k.addClass("ui-option");k.tooltip({title:i[j].tooltip,placement:"bottom"});this.$options.append(k)}}var h=this;this.$("input").on("change",function(){h.value(h._getValue());h._change()});this.value(l)},value:function(j){if(j!==undefined){this.$("input").prop("checked",false);if(j!==null){if(!(j instanceof Array)){j=[j]}for(var h in j){this.$('input[value="'+j[h]+'"]').first().prop("checked",true)}}}this._refresh();return this._getValue()},exists:function(j){if(j!==undefined){if(!(j instanceof Array)){j=[j]}for(var h in j){if(this.$('input[value="'+j[h]+'"]').length>0){return true}}}return false},first:function(){var h=this.$("input").first();if(h.length>0){return h.val()}else{return null}},wait:function(){if(this._size()==0){this._messageShow(this.options.wait_text,"info");this.$options.hide();this.$menu.hide()}},unwait:function(){this._refresh()},_change:function(){if(this.options.onchange){this.options.onchange(this._getValue())}},_refresh:function(){var h=this._size();if(h==0){this._messageShow(this.options.error_text,"danger");this.$options.hide();this.$menu.hide()}else{this._messageHide();this.$options.css("display","inline-block");this.$menu.show()}if(this.all_button){var i=this._getValue();if(!(i instanceof Array)){i=0}else{i=i.length}this.all_button.value(i,h)}},_getValue:function(){var h=[];this.$(":checked").each(function(){h.push($(this).val())});if(!c.validate(h)){return null}if(this.options.multiple){return h}else{return h[0]}},_size:function(){return this.$(".ui-option").length},_messageShow:function(i,h){this.$message.show();this.$message.removeClass();this.$message.addClass("ui-message alert alert-"+h);this.$message.html(i)},_messageHide:function(){this.$message.hide()},_template:function(){return'<div class="ui-options-list"/>'}});var a=b.extend({_templateOption:function(h){var i=c.uid();return'<div class="ui-option"><input id="'+i+'" type="'+this.options.type+'" name="'+this.options.id+'" value="'+h.value+'"/><label class="ui-options-label" for="'+i+'">'+h.label+"</label></div>"}});var f={};f.View=a.extend({initialize:function(h){h.type="radio";a.prototype.initialize.call(this,h)}});var d={};d.View=a.extend({initialize:function(h){h.multiple=true;h.type="checkbox";a.prototype.initialize.call(this,h)}});var g={};g.View=b.extend({initialize:function(h){b.prototype.initialize.call(this,h)},value:function(h){if(h!==undefined){this.$("input").prop("checked",false);this.$("label").removeClass("active");this.$('[value="'+h+'"]').prop("checked",true).closest("label").addClass("active")}return this._getValue()},_templateOption:function(j){var h="fa "+j.icon;if(!j.label){h+=" no-padding"}var i='<label class="btn btn-default">';if(j.icon){i+='<i class="'+h+'"/>'}i+='<input type="radio" name="'+this.options.id+'" value="'+j.value+'"/>';if(j.label){i+=j.label}i+="</label>";return i},_template:function(){return'<div class="btn-group ui-radiobutton" data-toggle="buttons"/>'}});return{Base:b,BaseIcons:a,Radio:f,RadioButton:g,Checkbox:d}});
\ No newline at end of file
+define(["utils/utils","mvc/ui/ui-button-check"],function(c,e){var b=Backbone.View.extend({initialize:function(i){var h=this;this.optionsDefault={visible:true,data:[],id:c.uid(),error_text:"No data available.",wait_text:"Please wait...",multiple:false};this.options=c.merge(i,this.optionsDefault);this.setElement('<div class="ui-options"/>');this.$message=$("<div/>");this.$options=$(this._template(i));this.$menu=$('<div class="ui-options-menu"/>');this.$el.append(this.$message);this.$el.append(this.$menu);this.$el.append(this.$options);if(this.options.multiple){this.all_button=new e({onclick:function(){h.$("input").prop("checked",h.all_button.value()!==0);h.trigger("change")}});this.$menu.append(this.all_button.$el)}if(!this.options.visible){this.$el.hide()}this.update(this.options.data);if(this.options.value!==undefined){this.value(this.options.value)}this.on("change",function(){this.options.onchange&&this.options.onchange(this.value())})},update:function(i){var l=this._getValue();this.$options.empty();if(this._templateOptions){this.$options.append(this._templateOptions(i))}else{for(var j in i){var k=$(this._templateOption(i[j]));k.addClass("ui-option");k.tooltip({title:i[j].tooltip,placement:"bottom"});this.$options.append(k)}}var h=this;this.$("input").on("change",function(){h.value(h._getValue());h.trigger("change")});this.value(l)},value:function(j){if(j!==undefined){this.$("input").prop("checked",false);if(j!==null){if(!(j instanceof Array)){j=[j]}for(var h in j){this.$('input[value="'+j[h]+'"]').first().prop("checked",true)}}}var l=this._getValue();if(this.all_button){var k=l;if(!(k instanceof Array)){k=0}else{k=k.length}this.all_button.value(k,this._size())}return l},exists:function(j){if(j!==undefined){if(!(j instanceof Array)){j=[j]}for(var h in j){if(this.$('input[value="'+j[h]+'"]').length>0){return true}}}return false},first:function(){var h=this.$("input").first();if(h.length>0){return h.val()}else{return null}},wait:function(){if(this._size()==0){this._messageShow(this.options.wait_text,"info");this.$options.hide();this.$menu.hide()}},unwait:function(){var h=this._size();if(h==0){this._messageShow(this.options.error_text,"danger");this.$options.hide();this.$menu.hide()}else{this._messageHide();this.$options.css("display","inline-block");this.$menu.show()}},_getValue:function(){var h=[];this.$(":checked").each(function(){h.push($(this).val())});if(!c.validate(h)){return null}if(this.options.multiple){return h}else{return h[0]}},_size:function(){return this.$(".ui-option").length},_messageShow:function(i,h){this.$message.show();this.$message.removeClass();this.$message.addClass("ui-message alert alert-"+h);this.$message.html(i)},_messageHide:function(){this.$message.hide()},_template:function(){return'<div class="ui-options-list"/>'}});var a=b.extend({_templateOption:function(h){var i=c.uid();return'<div class="ui-option"><input id="'+i+'" type="'+this.options.type+'" name="'+this.options.id+'" value="'+h.value+'"/><label class="ui-options-label" for="'+i+'">'+h.label+"</label></div>"}});var f={};f.View=a.extend({initialize:function(h){h.type="radio";a.prototype.initialize.call(this,h)}});var d={};d.View=a.extend({initialize:function(h){h.multiple=true;h.type="checkbox";a.prototype.initialize.call(this,h)}});var g={};g.View=b.extend({initialize:function(h){b.prototype.initialize.call(this,h)},value:function(h){if(h!==undefined){this.$("input").prop("checked",false);this.$("label").removeClass("active");this.$('[value="'+h+'"]').prop("checked",true).closest("label").addClass("active")}return this._getValue()},_templateOption:function(j){var h="fa "+j.icon;if(!j.label){h+=" no-padding"}var i='<label class="btn btn-default">';if(j.icon){i+='<i class="'+h+'"/>'}i+='<input type="radio" name="'+this.options.id+'" value="'+j.value+'"/>';if(j.label){i+=j.label}i+="</label>";return i},_template:function(){return'<div class="btn-group ui-radiobutton" data-toggle="buttons"/>'}});return{Base:b,BaseIcons:a,Radio:f,RadioButton:g,Checkbox:d}});
\ No newline at end of file
diff --git a/static/scripts/packed/mvc/ui/ui-select-default.js b/static/scripts/packed/mvc/ui/ui-select-default.js
index 376b3bc9eed..15516b59aa9 100644
--- a/static/scripts/packed/mvc/ui/ui-select-default.js
+++ b/static/scripts/packed/mvc/ui/ui-select-default.js
@@ -1 +1 @@
-define(["utils/utils","mvc/ui/ui-button-check"],function(a,b){var c=Backbone.View.extend({optionsDefault:{id:a.uid(),cls:"ui-select",error_text:"No data available",empty_text:"No selection",visible:true,wait:false,multiple:false,searchable:true,optional:false},initialize:function(e){var d=this;this.options=a.merge(e,this.optionsDefault);this.setElement(this._template(this.options));this.$select=this.$el.find(".select");this.$icon=this.$el.find(".icon");this.$button=this.$el.find(".button");if(this.options.multiple){if(this.options.searchable){this.all_button=new b({onclick:function(){var f=[];if(d.all_button.value()!==0){f=d._availableOptions()}d.value(f);d._change()}});this.$el.prepend(this.all_button.$el)}this.$el.addClass("ui-select-multiple");this.$select.prop("multiple",true);this.$button.remove()}this.update(this.options.data);if(this.options.value!==undefined){this.value(this.options.value)}if(!this.options.visible){this.hide()}if(this.options.wait){this.wait()}else{this.show()}this.$select.on("change",function(){d._change()});this.on("change",function(){d._change()})},value:function(d){if(d!==undefined){if(d===null){d="__null__"}if(this.exists(d)||this.options.multiple){this.$select.val(d);if(this.$select.select2){this.$select.select2("val",d)}}}this._refresh();return this._getValue()},first:function(){var d=this.$select.find("option").first();if(d.length>0){return d.val()}else{return null}},text:function(){return this.$select.find("option:selected").text()},show:function(){this.unwait();this.$select.show();this.$el.show()},hide:function(){this.$el.hide()},wait:function(){this.$icon.removeClass();this.$icon.addClass("fa fa-spinner fa-spin")},unwait:function(){this.$icon.removeClass();this.$icon.addClass("fa fa-caret-down")},disabled:function(){return this.$select.is(":disabled")},enable:function(){this.$select.prop("disabled",false)},disable:function(){this.$select.prop("disabled",true)},add:function(d){this.$select.append(this._templateOption(d));this._refresh()},del:function(d){this.$select.find("option[value="+d+"]").remove();this.$select.trigger("change");this._refresh()},update:function(d){var f=this._getValue();this.$select.find("option").remove();if(!this.options.multiple&&this.options.optional){this.$select.append(this._templateOption({value:"__null__",label:this.options.empty_text}))}for(var e in d){this.$select.append(this._templateOption(d[e]))}if(this.options.searchable){this.$select.select2("destroy");this.$select.select2()}this.value(f);if(this._getValue()===null){this.value(this.first())}},setOnChange:function(d){this.options.onchange=d},exists:function(d){return this.$select.find('option[value="'+d+'"]').length>0},_change:function(){if(this.options.onchange){this.options.onchange(this._getValue())}},_getValue:function(){var d=this.$select.val();if(!a.validate(d)){return null}return d},_refresh:function(){var d=this.$select.find("option").length;if(d==0){this.disable();this.$select.empty();this.$select.append(this._templateOption({value:"__null__",label:this.options.error_text}))}else{this.enable()}if(this.all_button){var e=this._getValue();this.all_button.value($.isArray(e)&&e.length||0,d)}},_availableOptions:function(){var d=[];this.$select.find("option").each(function(f,g){d.push($(g).attr("value"))});return d},_templateOption:function(d){return'<option value="'+d.value+'">'+d.label+"</option>"},_template:function(d){return'<div id="'+d.id+'" class="'+d.cls+'"><select id="'+d.id+'_select" class="select"/><div class="button"><i class="icon"/></div></div>'}});return{View:c}});
\ No newline at end of file
+define(["utils/utils","mvc/ui/ui-button-check"],function(a,b){var c=Backbone.View.extend({optionsDefault:{id:a.uid(),cls:"ui-select",error_text:"No data available",empty_text:"No selection",visible:true,wait:false,multiple:false,searchable:true,optional:false},initialize:function(e){var d=this;this.options=a.merge(e,this.optionsDefault);this.setElement(this._template(this.options));this.$select=this.$el.find(".select");this.$icon=this.$el.find(".icon");this.$button=this.$el.find(".button");if(this.options.multiple){if(this.options.searchable){this.all_button=new b({onclick:function(){var f=[];if(d.all_button.value()!==0){f=d._availableOptions()}d.value(f);d.trigger("change")}});this.$el.prepend(this.all_button.$el)}this.$el.addClass("ui-select-multiple");this.$select.prop("multiple",true);this.$button.remove()}this.update(this.options.data);if(this.options.value!==undefined){this.value(this.options.value)}if(!this.options.visible){this.hide()}if(this.options.wait){this.wait()}else{this.show()}this.$select.on("change",function(){d.trigger("change")});this.on("change",function(){d.options.onchange&&d.options.onchange(this.value())})},value:function(d){if(d!==undefined){if(d===null){d="__null__"}if(this.exists(d)||this.options.multiple){this.$select.val(d);if(this.$select.select2){this.$select.select2("val",d)}}}var e=this._getValue();if(this.all_button){this.all_button.value($.isArray(e)&&e.length||0,this._size())}return e},first:function(){var d=this.$select.find("option").first();if(d.length>0){return d.val()}else{return null}},text:function(){return this.$select.find("option:selected").text()},show:function(){this.unwait();this.$select.show();this.$el.show()},hide:function(){this.$el.hide()},wait:function(){this.$icon.removeClass();this.$icon.addClass("fa fa-spinner fa-spin")},unwait:function(){this.$icon.removeClass();this.$icon.addClass("fa fa-caret-down")},disabled:function(){return this.$select.is(":disabled")},enable:function(){this.$select.prop("disabled",false)},disable:function(){this.$select.prop("disabled",true)},update:function(d){var f=this._getValue();this.$select.find("option").remove();if(!this.options.multiple&&this.options.optional){this.$select.append(this._templateOption({value:"__null__",label:this.options.empty_text}))}for(var e in d){this.$select.append(this._templateOption(d[e]))}if(this._size()==0){this.disable();this.$select.append(this._templateOption({value:"__null__",label:this.options.error_text}))}else{this.enable()}if(this.options.searchable){this.$select.select2("destroy");this.$select.select2()}this.value(f);if(this._getValue()===null){this.value(this.first())}},setOnChange:function(d){this.options.onchange=d},exists:function(d){return this.$select.find('option[value="'+d+'"]').length>0},_getValue:function(){var d=this.$select.val();if(!a.validate(d)){return null}return d},_availableOptions:function(){var d=[];this.$select.find("option").each(function(f,g){d.push($(g).attr("value"))});return d},_size:function(){return this.$select.find("option").length},_templateOption:function(d){return'<option value="'+d.value+'">'+d.label+"</option>"},_template:function(d){return'<div id="'+d.id+'" class="'+d.cls+'"><select id="'+d.id+'_select" class="select"/><div class="button"><i class="icon"/></div></div>'}});return{View:c}});
\ No newline at end of file
diff --git a/static/scripts/packed/mvc/ui/ui-select-library.js b/static/scripts/packed/mvc/ui/ui-select-library.js
new file mode 100644
index 00000000000..bf1f2b9446c
--- /dev/null
+++ b/static/scripts/packed/mvc/ui/ui-select-library.js
@@ -0,0 +1 @@
+define(["utils/utils","mvc/ui/ui-misc","mvc/ui/ui-tabs","mvc/tools/tools-template"],function(e,g,b,a){var d=Backbone.Collection.extend({url:galaxy_config.root+"api/libraries"});var c=Backbone.Collection.extend({initialize:function(){var h=this;this.config=new Backbone.Model({library_id:null});this.config.on("change",function(){h.fetch({reset:true})})},url:function(){return galaxy_config.root+"api/libraries/"+this.config.get("library_id")+"/contents"}});var f=Backbone.View.extend({initialize:function(i){var h=this;this.libraries=new d();this.datasets=new c();this.options=i;this.library_select=new g.Select.View({optional:i.optional,onchange:function(j){h.datasets.config.set("library_id",j)}});this.dataset_select=new g.Select.View({optional:i.optional,multiple:i.multiple,onchange:function(){h.trigger("change")}});this.libraries.on("reset",function(){var j=[];h.libraries.each(function(k){j.push({value:k.id,label:k.get("name")})});h.library_select.update(j);h.trigger("change")});this.datasets.on("reset",function(){var k=[];var j=h.library_select.text();if(j!==null){h.datasets.each(function(l){if(l.get("type")==="file"){k.push({value:l.id,label:j+l.get("name")})}})}h.dataset_select.update(k);h.trigger("change")});this.on("change",function(){i.onchange&&i.onchange(h.value())});this.setElement(this._template());this.$(".library-select").append(this.library_select.$el);this.$(".dataset-select").append(this.dataset_select.$el);this.libraries.fetch({reset:true,success:function(){h.library_select.trigger("change");if(h.options.value!==undefined){h.value(h.options.value)}}})},value:function(h){return this.dataset_select.value()},_template:function(){return'<div class="ui-select-library"><div class="library ui-margin-bottom"><span class="library-title">Select Library</span><span class="library-select"/></div><div class="dataset"><span class="dataset-title">Select Dataset</span><span class="dataset-select"/></div></div>'}});return{View:f}});
\ No newline at end of file