Merge pull request #5081 from dannon/fix-charts-packing

Viz plugin loading fixes

client/galaxy/scripts/mvc/form/form-data.js

@@ -1,6 +1,5 @@
 /* This class maps the form dom to an api compatible javascript dictionary. */
-import Utils from "utils/utils";
-var Manager = Backbone.Model.extend({
+export var Manager = Backbone.Model.extend({
     initialize: function(app) {
         this.app = app;
     },
@@ -33,7 +32,9 @@ var Manager = Backbone.Model.extend({
         function add(flat_id, input_id, input_value) {
             self.flat_dict[flat_id] = input_id;
             result_dict[flat_id] = input_value;
-            self.app.element_list[input_id] && self.app.element_list[input_id].$el.attr("tour_id", flat_id);
+            if (self.app.element_list[input_id]) {
+                self.app.element_list[input_id].$el.attr("tour_id", flat_id);
+            }
         }
         // converter between raw dictionary and job dictionary
         function convert(identifier, head) {
@@ -42,7 +43,7 @@ var Manager = Backbone.Model.extend({
                 if (node.input) {
                     var input = node.input;
                     var flat_id = identifier;
-                    if (identifier != "") {
+                    if (identifier !== "") {
                         flat_id += "|";
                     }
                     flat_id += input.name;
@@ -62,7 +63,7 @@ var Manager = Backbone.Model.extend({
                                 }
                             }
                             block_indices.sort((a, b) => a - b);
-                            var index = 0;
+                            index = 0;
                             for (var i in block_indices) {
                                 convert(`${flat_id}_${index++}`, node[block_prefix + block_indices[i]]);
                             }
@@ -81,7 +82,7 @@ var Manager = Backbone.Model.extend({
                         default:
                             var field = self.app.field_list[input.id];
                             if (field && field.value) {
-                                var value = field.value();
+                                value = field.value();
                                 if (input.ignore === undefined || input.ignore != value) {
                                     if (field.collapsed && input.collapsible_value) {
                                         value = input.collapsible_value;
@@ -120,7 +121,9 @@ var Manager = Backbone.Model.extend({
     matchModel: function(model, callback) {
         var self = this;
         visitInputs(model.inputs, (input, name) => {
-            self.flat_dict[name] && callback(input, self.flat_dict[name]);
+            if (self.flat_dict[name]) {
+                callback(input, self.flat_dict[name]);
+            }
         });
     },
 
@@ -132,7 +135,9 @@ var Manager = Backbone.Model.extend({
         function search(id, head) {
             if (typeof head === "string") {
                 var input_id = self.flat_dict[id];
-                input_id && (result[input_id] = head);
+                if (input_id) {
+                    result[input_id] = head;
+                }
             } else {
                 for (var i in head) {
                     var new_id = i;
@@ -174,7 +179,7 @@ var Manager = Backbone.Model.extend({
  * @param{dict}   input     - Definition of conditional input parameter
  * @param{dict}   value     - Current value
  */
-var matchCase = (input, value) => {
+export var matchCase = (input, value) => {
     if (input.test_param.type == "boolean") {
         if (value == "true") {
             value = input.test_param.truevalue || "true";
@@ -194,7 +199,7 @@ var matchCase = (input, value) => {
  * @param{dict}   inputs    - Nested dictionary of input elements
  * @param{dict}   callback  - Called with the mapped dictionary object and corresponding model node
  */
-var visitInputs = (inputs, callback, prefix, context) => {
+export var visitInputs = (inputs, callback, prefix, context) => {
     context = $.extend(true, {}, context);
     _.each(inputs, input => {
         if (input && input.type && input.name) {

client/galaxy/scripts/mvc/form/form-parameters.js

@@ -41,7 +41,9 @@ export default Backbone.Model.extend({
             field = input_def.options ? this._fieldSelect(input_def) : this._fieldText(input_def);
             Galaxy.emit.debug("form-parameters::_addRow()", `Auto matched field type (${input_def.type}).`);
         }
-        input_def.value === undefined && (input_def.value = null);
+        if (input_def.value === undefined) {
+            input_def.value = null;
+        }
         field.value(input_def.value);
         return field;
     },

client/galaxy/scripts/mvc/form/form-repeat.js

@@ -2,7 +2,8 @@
 import Utils from "utils/utils";
 import Portlet from "mvc/ui/ui-portlet";
 import Ui from "mvc/ui/ui-misc";
-var View = Backbone.View.extend({
+
+export var View = Backbone.View.extend({
     initialize: function(options) {
         this.list = {};
         this.options = Utils.merge(options, {
@@ -17,7 +18,9 @@ var View = Backbone.View.extend({
             tooltip: `Add new ${this.options.title} block`,
             cls: "ui-button-icon ui-clear-float form-repeat-add",
             onclick: function() {
-                options.onnew && options.onnew();
+                if (options.onnew) {
+                    options.onnew();
+                }
             }
         });
         this.setElement(
@@ -43,7 +46,9 @@ var View = Backbone.View.extend({
             tooltip: "Delete this repeat block",
             cls: "ui-button-icon-plain form-repeat-delete",
             onclick: function() {
-                options.ondel && options.ondel();
+                if (options.ondel) {
+                    options.ondel();
+                }
             }
         });
         var portlet = new Portlet.View({
@@ -56,7 +61,9 @@ var View = Backbone.View.extend({
         portlet.$el.addClass("section-row").hide();
         this.list[options.id] = portlet;
         this.$list.append(portlet.$el.fadeIn("fast"));
-        this.options.max > 0 && this.size() >= this.options.max && this.button_new.disable();
+        if (this.options.max > 0 && this.size() >= this.options.max) {
+            this.button_new.disable();
+        }
         this._refresh();
     },
 
@@ -85,12 +92,13 @@ var View = Backbone.View.extend({
         _.each(this.list, portlet => {
             portlet.hideOperation("button_delete");
         });
-        _.isEmpty(this.list) &&
+        if (_.isEmpty(this.list)) {
             this.$el.append(
                 $("<div/>")
                     .addClass("ui-form-info")
                     .html(this.options.empty_text)
             );
+        }
     },
 
     /** Refresh view */

client/galaxy/scripts/mvc/form/form-view.js

@@ -1,12 +1,12 @@
 /**
     This is the main class of the form plugin. It is referenced as 'app' in lower level modules.
 */
-import Utils from "utils/utils";
 import Portlet from "mvc/ui/ui-portlet";
 import Ui from "mvc/ui/ui-misc";
 import FormSection from "mvc/form/form-section";
 import FormData from "mvc/form/form-data";
-export default Backbone.View.extend({
+
+export var View = Backbone.View.extend({
     initialize: function(options) {
         this.model = new Backbone.Model({
             initial_errors: false,
@@ -95,7 +95,6 @@ export default Backbone.View.extend({
         if (options && options.errors) {
             var error_messages = this.data.matchResponse(options.errors);
             for (var input_id in this.element_list) {
-                var input = this.element_list[input_id];
                 if (error_messages[input_id]) {
                     this.highlight(input_id, error_messages[input_id], true);
                 }
@@ -118,7 +117,9 @@ export default Backbone.View.extend({
         this.data = new FormData.Manager(this);
         this._renderForm();
         this.data.create();
-        this.model.get("initial_errors") && this.errors(this.model.attributes);
+        if (this.model.get("initial_errors")) {
+            this.errors(this.model.attributes);
+        }
         // add listener which triggers on checksum change, and reset the form input wrappers
         var current_check = this.data.checksum();
         this.on("change", input_id => {
@@ -160,13 +161,18 @@ export default Backbone.View.extend({
         this.portlet.append(this.message.$el);
         this.portlet.append(this.section.$el);
         this.$el.empty();
-        options.inputs && this.$el.append(this.portlet.$el);
-        options.message &&
+        if (options.inputs) {
+            this.$el.append(this.portlet.$el);
+        }
+        if (options.message) {
             this.message.update({
                 persistent: true,
                 status: options.status,
                 message: options.message
             });
+        }
         Galaxy.emit.debug("form-view::initialize()", "Completed");
     }
 });
+
+export default View;

client/galaxy/scripts/mvc/ui/ui-misc.js

@@ -1,15 +1,15 @@
 /**
  *  This class contains backbone wrappers for basic ui elements such as Images, Labels, Buttons, Input fields etc.
  */
-import Utils from "utils/utils";
 import Select from "mvc/ui/ui-select-default";
 import Slider from "mvc/ui/ui-slider";
 import Options from "mvc/ui/ui-options";
 import Drilldown from "mvc/ui/ui-drilldown";
 import Buttons from "mvc/ui/ui-buttons";
 import Modal from "mvc/ui/ui-modal";
+
 /** Label wrapper */
-var Label = Backbone.View.extend({
+export var Label = Backbone.View.extend({
     tagName: "label",
     initialize: function(options) {
         this.model = (options && options.model) || new Backbone.Model(options);
@@ -35,7 +35,7 @@ var Label = Backbone.View.extend({
 });
 
 /** Displays messages used e.g. in the tool form */
-var Message = Backbone.View.extend({
+export var Message = Backbone.View.extend({
     initialize: function(options) {
         this.model =
             (options && options.model) ||
@@ -85,14 +85,14 @@ var Message = Backbone.View.extend({
     }
 });
 
-var UnescapedMessage = Message.extend({
+export var UnescapedMessage = Message.extend({
     messageForDisplay: function() {
         return this.model.get("message");
     }
 });
 
 /** Renders an input element used e.g. in the tool form */
-var Input = Backbone.View.extend({
+export var Input = Backbone.View.extend({
     initialize: function(options) {
         this.model =
             (options && options.model) ||
@@ -158,7 +158,7 @@ var Input = Backbone.View.extend({
 });
 
 /** Creates a hidden element input field used e.g. in the tool form */
-var Hidden = Backbone.View.extend({
+export var Hidden = Backbone.View.extend({
     initialize: function(options) {
         this.model = (options && options.model) || new Backbone.Model(options);
         this.setElement(
@@ -182,7 +182,7 @@ var Hidden = Backbone.View.extend({
 });
 
 /** Creates a upload element input field */
-var Upload = Backbone.View.extend({
+export var Upload = Backbone.View.extend({
     initialize: function(options) {
         var self = this;
         this.model = (options && options.model) || new Backbone.Model(options);
@@ -232,6 +232,21 @@ var Upload = Backbone.View.extend({
     }
 });
 
+/* Make more Ui stuff directly available at this namespace (for backwards
+ * compatibility).  We should eliminate this practice, though, and just require
+ * what we need where we need it, allowing for better package optimization.
+ */
+
+export let Button = Buttons.ButtonDefault;
+export let ButtonIcon = Buttons.ButtonIcon;
+export let ButtonCheck = Buttons.ButtonCheck;
+export let ButtonMenu = Buttons.ButtonMenu;
+export let ButtonLink = Buttons.ButtonLink;
+export let Checkbox = Options.Checkbox;
+export let RadioButton = Options.RadioButton;
+export let Radio = Options.Radio;
+export { Select, Slider, Drilldown };
+
 export default {
     Button: Buttons.ButtonDefault,
     ButtonIcon: Buttons.ButtonIcon,

client/galaxy/scripts/mvc/ui/ui-modal.js

@@ -1,4 +1,4 @@
-var View = Backbone.View.extend({
+export var View = Backbone.View.extend({
     className: "ui-modal",
 
     // defaults

client/galaxy/scripts/mvc/ui/ui-portlet.js

@@ -1,6 +1,7 @@
 import Utils from "utils/utils";
 import Ui from "mvc/ui/ui-misc";
-var View = Backbone.View.extend({
+
+export var View = Backbone.View.extend({
     visible: false,
     initialize: function(options) {
         var self = this;

client/galaxy/scripts/mvc/ui/ui-slider.js

@@ -1,4 +1,5 @@
 import Utils from "utils/utils";
+
 var View = Backbone.View.extend({
     initialize: function(options) {
         var self = this;

client/galaxy/scripts/mvc/ui/ui-tabs.js

@@ -1,10 +1,8 @@
 /**
  *  Renders tabs e.g. used in the charts editor, behaves similar to repeat and section rendering
  */
-import Utils from "utils/utils";
-var View = Backbone.View.extend({
+export var View = Backbone.View.extend({
     initialize: function(options) {
-        var self = this;
         this.collection = new Backbone.Collection();
         this.model =
             (options && options.model) ||

client/galaxy/scripts/mvc/ui/ui-thumbnails.js

@@ -1,8 +1,8 @@
 /** This class renders the selection grid. */
 import Utils from "utils/utils";
-import Ui from "mvc/ui/ui-misc";
 import Tabs from "mvc/ui/ui-tabs";
-var View = Backbone.View.extend({
+
+export var View = Backbone.View.extend({
     events: {
         "click .ui-thumbnails-item": "_onclick",
         "dblclick .ui-thumbnails-item": "_ondblclick"
@@ -26,16 +26,14 @@ var View = Backbone.View.extend({
     },
 
     _renderDefault: function() {
-        var self = this;
-        var index = [];
         var title_length = 20;
         var $el = $("<div/>").addClass("ui-thumbnails-grid");
         this.collection.each(model => {
             if (model.get("keywords").indexOf("default") !== -1) {
                 var title = model.get("title");
                 $el.append(
                     $(
-                        self._templateThumbnailItem({
+                        this._templateThumbnailItem({
                             id: model.id,
                             title: title.length < title_length ? title : `${title.substr(0, title_length)}...`,
                             title_icon: model.get("title_icon"),
@@ -51,7 +49,7 @@ var View = Backbone.View.extend({
         if ($el.children().length > 0) {
             this.tabs.add({
                 id: Utils.uid(),
-                title: self.model.get("title_default"),
+                title: this.model.get("title_default"),
                 $el: $el
             });
         }
@@ -82,7 +80,9 @@ var View = Backbone.View.extend({
             this.$(`[value="${new_value}"]`).addClass("ui-thumbnail-current");
             var after = this.$(".ui-thumbnail-current").attr("value");
             var change_handler = this.model.get("onchange");
-            after != before && change_handler && change_handler(after);
+            if (after != before && change_handler) {
+                change_handler(after);
+            }
         }
         return this.$(".ui-thumbnail-current").attr("value");
     },
@@ -97,8 +97,10 @@ var View = Backbone.View.extend({
     },
 
     /** Add double click handler */
-    _ondblclick: function(e) {
-        this.model.get("ondblclick") && this.model.get("ondblclick")(this.value());
+    _ondblclick: function() {
+        if (this.model.get("ondblclick")) {
+            this.model.get("ondblclick")(this.value());
+        }
     },
 
     /* Thumbnail template with image */