Extend charts with more visualizations, adjust interface

client/galaxy/scripts/mvc/tool/tool-form-base.js

@@ -255,19 +255,13 @@ define(['utils/utils', 'utils/deferred', 'mvc/ui/ui-misc', 'mvc/form/form-view',
                     title   : 'Requirements',
                     tooltip : 'Display tool requirements',
                     onclick : function() {
-                        if (!this.visible || self.portlet.collapsed ) {
-                            this.visible = true;
+                        if ( !this.requirements_visible || self.portlet.collapsed ) {
+                            this.requirements_visible = true;
                             self.portlet.expand();
-                            self.message.update({
-                                persistent  : true,
-                                message     : self._templateRequirements(options),
-                                status      : 'info'
-                            });
+                            self.message.update( { persistent : true, message : self._templateRequirements( options ), status : 'info' } );
                         } else {
-                            this.visible = false;
-                            self.message.update({
-                                message     : ''
-                            });
+                            this.requirements_visible = false;
+                            self.message.update( { message : '' } );
                         }
                     }
                 });

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

@@ -223,9 +223,11 @@ define( [ 'utils/utils' ], function( Utils ) {
                 visible         : true,
                 tag             : ''
             }).set( options );
+            this.collection = new Backbone.Collection();
             this.setElement( $( '<div/>' ).append( this.$root = $( '<div/>' ).append( this.$icon  = $( '<i/>' ) )
                                                                              .append( this.$title = $( '<span/>' ) ) ) );
             this.listenTo( this.model, 'change', this.render, this );
+            this.listenTo( this.collection, 'change add remove reset', this.render, this );
             this.render();
         },
 
@@ -237,7 +239,7 @@ define( [ 'utils/utils' ], function( Utils ) {
                     .addClass( options.cls )
                     .attr( 'id', options.id )
                     .css( { float   : options.floating,
-                            display : options.visible ? 'block' : 'none' } );
+                            display : options.visible && this.collection.where( { visible: true } ).length > 0 ? 'block' : 'none' } );
             this.$root.addClass( 'root button dropdown-toggle' )
                       .attr( 'data-toggle', 'dropdown' )
                       .tooltip( { title: options.tooltip, placement: 'bottom' } )
@@ -249,40 +251,46 @@ define( [ 'utils/utils' ], function( Utils ) {
             this.$icon.removeClass().addClass( 'icon fa' ).addClass( options.icon );
             this.$title.removeClass().addClass( 'title' ).html( options.title );
             options.icon && options.title && this.$icon.addClass( 'ui-margin-right' );
+            this.$menu && this.$menu.remove();
+            if ( this.collection.length > 0 ) {
+                this.$menu = $( '<ul/>' ).addClass( 'menu dropdown-menu' )
+                                         .addClass( 'pull-' + self.model.get( 'pull' ) )
+                                         .attr( 'role', 'menu' );
+                this.$el.append( this.$menu );
+            }
+            this.collection.each( function( submodel ) {
+                var suboptions = submodel.attributes;
+                if ( suboptions.visible ) {
+                    var $link = $( '<a/>' ).addClass( 'dropdown-item' )
+                                           .attr( { href : suboptions.href, target : suboptions.target } )
+                                           .append( $( '<i/>' ).addClass( 'fa' )
+                                                               .addClass( suboptions.icon )
+                                                               .css( 'display', suboptions.icon ? 'inline-block' : 'none' ) )
+                                           .append( suboptions.title )
+                                           .on( 'click', function( e ) {
+                                                if ( suboptions.onclick ) {
+                                                    e.preventDefault();
+                                                    suboptions.onclick();
+                                                }
+                                           } );
+                    self.$menu.append( $( '<li/>' ).append( $link ) );
+                    suboptions.divider && self.$menu.append( $( '<li/>' ).addClass( 'divider' ) );
+                }
+            });
         },
 
         /** Add a new menu item */
         addMenu: function ( options ) {
-            var options = Utils.merge( options, {
+            this.collection.add( Utils.merge( options, {
                 title       : '',
                 target      : '',
                 href        : '',
                 onclick     : null,
                 divider     : false,
+                visible     : true,
                 icon        : null,
                 cls         : 'button-menu btn-group'
-            });
-            if ( !this.$menu ) {
-                this.$menu = $( '<ul/>' ).addClass( 'menu dropdown-menu' )
-                                         .addClass( 'pull-' + this.model.get( 'pull' ) )
-                                         .attr( 'role', 'menu' );
-                this.$el.append( this.$menu );
-            }
-            var $link = $( '<a/>' ).addClass( 'dropdown-item' )
-                                   .attr( { href    : options.href,
-                                            target  : options.target } )
-                                   .append( $( '<i/>' ).addClass( 'fa' )
-                                                       .addClass( options.icon )
-                                                       .css( 'display', options.icon ? 'inline-block' : 'none' ) )
-                                   .append( options.title )
-                                   .on( 'click', function( e ) {
-                                        if ( options.onclick ) {
-                                            e.preventDefault();
-                                            options.onclick();
-                                        }
-                                   } );
-            this.$menu.append( $( '<li/>' ).append( $link ) );
-            options.divider && this.$menu.append( $( '<li/>' ).addClass( 'divider' ) );
+            }));
         }
     });