Add BioJS plugin for multiple sequence alignments

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

@@ -253,19 +253,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' ) );
+            }));
         }
     });
 

config/plugins/visualizations/charts/config/charts.xml

@@ -6,11 +6,12 @@
             <model_class>HistoryDatasetAssociation</model_class>
             <test type="isinstance" test_attr="datatype" result_type="datatype">tabular.Tabular</test>
             <test type="isinstance" test_attr="datatype" result_type="datatype">tabular.CSV</test>
+            <test type="isinstance" test_attr="datatype" result_type="datatype">data.Text</test>
             <to_param param_attr="id">dataset_id</to_param>
         </data_source>
     </data_sources>
     <params>
         <param type="dataset" var_name_in_template="hda" required="true">dataset_id</param>
     </params>
     <entry_point entry_point_type="mako">charts.mako</entry_point>
-</visualization>
+</visualization>

config/plugins/visualizations/charts/static/app.css

@@ -1,3 +1,7 @@
+.charts-viewer {
+    overflow: auto;
+}
+
 .charts-viewer .ui-message {
     position: absolute;
     width: calc(100% - 20px);

config/plugins/visualizations/charts/static/app.js

@@ -4,21 +4,29 @@
 define( [ 'mvc/ui/ui-modal', 'mvc/ui/ui-portlet', 'mvc/ui/ui-misc', 'utils/utils', 'plugin/components/storage', 'plugin/components/model', 'utils/deferred', 'plugin/views/viewer', 'plugin/views/editor', 'plugin/charts/types' ],
     function( Modal, Portlet, Ui, Utils, Storage, Chart, Deferred, Viewer, Editor, Types ) {
     return Backbone.View.extend({
-        initialize: function(options){
-            this.options = options;
-            this.modal = parent.Galaxy && parent.Galaxy.modal || new Modal.View();
-            this.types = Types;
-            this.chart = new Chart();
-            this.storage = new Storage( this );
-            this.deferred = new Deferred();
+        initialize: function( options ) {
+            var self = this;
+            Utils.get({
+                url     : Galaxy.root + 'api/datasets/' + options.config.dataset_id,
+                cache   : true,
+                success : function( dataset ) {
+                    self.dataset = dataset;
+                    self._build( options );
+                }
+            });
+        },
 
-            // views
-            this.viewer = new Viewer( this );
-            this.editor = new Editor( this );
+        _build: function( options ) {
+            this.options    = options;
+            this.types      = Types;
+            this.chart      = new Chart();
+            this.modal      = parent.Galaxy && parent.Galaxy.modal || new Modal.View();
+            this.storage    = new Storage( this.chart, this.types, options );
+            this.deferred   = new Deferred();
+            this.viewer     = new Viewer( this );
+            this.editor     = new Editor( this );
             this.$el.append( this.viewer.$el );
             this.$el.append( this.editor.$el );
-
-            // pick start screen
             if ( !this.storage.load() ) {
                 this.go( 'editor' );
             } else {
@@ -35,12 +43,6 @@ define( [ 'mvc/ui/ui-modal', 'mvc/ui/ui-portlet', 'mvc/ui/ui-misc', 'utils/utils
             this[ view_id ].show();
         },
 
-        /** Message */
-        showModal: function( title, body ) {
-            var self = this;
-            this.modal.show( { title: title, body: body, buttons: { 'Close': function() { self.modal.hide() } } } );
-        },
-
         /** Split chart type into path components */
         split: function( chart_type ) {
             var path = chart_type.split( /_(.+)/ );

config/plugins/visualizations/charts/static/charts/biojs/msa/config.js

@@ -0,0 +1,15 @@
+define( [], function() {
+    return {
+        title       : 'Multiple Sequence Alignment',
+        category    : 'Sequence',
+        library     : 'BioJS',
+        datatypes   : [ 'txt' ],
+        keywords    : 'biojs',
+        description : 'The MSA viewer is a modular, reusable component to visualize large MSAs interactively on the web.',
+        settings    : {
+            conserv: { label :'Show conservation', help : 'Do you want to display a bar diagram indicating sequence conservation?', type : 'boolean', value: 'true' },
+            overviewbox: { label :'Show overview box', help : 'Do you want to display the overview box below the sequence alignments?', type : 'boolean', value: 'true' },
+            menu: { label :'Show interactive menu', help : 'Do you want to show a menu for interactive configuration?', type : 'boolean', value: 'true' }
+        }
+    }
+});

config/plugins/visualizations/charts/static/charts/biojs/msa/wrapper.js

@@ -0,0 +1,21 @@
+define( [ 'utils/utils' ], function( Utils ) {
+    return Backbone.Model.extend({
+        initialize: function( options ) {
+            var chart = options.chart;
+            var dataset = options.dataset;
+            var settings = chart.settings;
+            var m = new msa.msa({
+                el: $( '#'  + options.targets[ 0 ] ),
+                vis: {  conserv: settings.get( 'conserv' ) == 'true',
+                        overviewbox: settings.get( 'overviewbox' ) == 'true' },
+                menu: 'small',
+                bootstrapMenu: settings.get( 'menu' ) == 'true'
+            });
+            m.u.file.importURL( dataset.download_url, function() {
+                m.render();
+                chart.state( 'ok', 'Chart drawn.' );
+                options.process.resolve();
+            });
+        }
+    });
+});

config/plugins/visualizations/charts/static/charts/jqplot/bar/wrapper.js

@@ -1,6 +1,6 @@
 define( [ 'plugin/charts/jqplot/common/wrapper' ], function( Plot ) {
     return Backbone.Model.extend({
-        initialize: function( app, options ) {
+        initialize: function( options ) {
             options.makeConfig = function( groups, plot_config ){
                 $.extend( true, plot_config, {
                     seriesDefaults: {
@@ -16,7 +16,7 @@ define( [ 'plugin/charts/jqplot/common/wrapper' ], function( Plot ) {
                     }
                 });
             };
-            new Plot( app, options );
+            new Plot( options );
         }
     });
 });

config/plugins/visualizations/charts/static/charts/jqplot/boxplot/wrapper.js

@@ -1,18 +1,18 @@
 define( [ 'plugin/charts/jqplot/common/wrapper', 'plugin/components/jobs', 'plugin/charts/utilities/tabular-utilities' ], function( Plot, Jobs, Utilities ) {
     return Backbone.View.extend({
-        initialize: function( app, options ) {
-            Jobs.request( app, Utilities.buildJobDictionary( 'boxplot', app.chart ), function( dataset ) {
-                var request_dictionary = Utilities.buildRequestDictionary( app.chart, dataset.id );
+        initialize: function( options ) {
+            Jobs.request( options.chart, Utilities.buildJobDictionary( 'boxplot', options.chart ), function( dataset ) {
+                var request_dictionary = Utilities.buildRequestDictionary( options.chart, dataset.id );
                 var chart = options.chart;
                 var index = 0;
                 _.each( request_dictionary.groups, function( group ) {
                     group.columns = { x: { index : index++ } };
                 });
-                var plot = new Plot( app, {
+                var plot = new Plot( {
                     process             : options.process,
                     chart               : options.chart,
                     request_dictionary  : request_dictionary,
-                    canvas_list         : options.canvas_list,
+                    targets             : options.targets,
                     makeConfig          : function( groups, plot_config ){
                         var boundary = Utilities.getDomains( groups, 'x' );
                         $.extend( true, plot_config, {

config/plugins/visualizations/charts/static/charts/jqplot/common/config.js

@@ -6,6 +6,7 @@ define( [ 'plugin/charts/utilities/tabular-form' ], function( default_config ) {
         tag         : 'div',
         zoomable    : true,
         keywords    : 'jqplot',
+        exports     : [ 'png' ],
         settings    : {
             x_axis_grid : {
                 label       : 'Axis grid',

config/plugins/visualizations/charts/static/charts/jqplot/common/wrapper.js

@@ -1,7 +1,7 @@
 /** This is the common wrapper for jqplot based visualizations. */
 define( [ 'plugin/charts/jqplot/common/plot-config', 'plugin/charts/utilities/tabular-utilities' ], function( configmaker, Utilities ) {
     return Backbone.View.extend({
-        initialize: function( app, options ) {
+        initialize: function( options ) {
             this.options = options;
             var self = this;
             options.render = function( canvas_id, groups ) {

config/plugins/visualizations/charts/static/charts/jqplot/histogram_discrete/wrapper.js

@@ -1,8 +1,8 @@
 define( [ 'plugin/charts/utilities/tabular-utilities', 'plugin/components/jobs', 'plugin/charts/jqplot/common/wrapper' ], function( Utilities, Jobs, Plot ) {
     return Backbone.Model.extend({
-        initialize: function( app, options ) {
-            Jobs.request( app, Utilities.buildJobDictionary( 'histogramdiscrete', app.chart ), function( dataset ) {
-                var request_dictionary = Utilities.buildRequestDictionary( app.chart, dataset.id );
+        initialize: function( options ) {
+            Jobs.request( options.chart, Utilities.buildJobDictionary( 'histogramdiscrete', options.chart ), function( dataset ) {
+                var request_dictionary = Utilities.buildRequestDictionary( options.chart, dataset.id );
                 var index = 1;
                 var tmp_dict = { id : request_dictionary.id, groups : [] };
                 _.each( request_dictionary.groups, function( group ) {
@@ -18,7 +18,7 @@ define( [ 'plugin/charts/utilities/tabular-utilities', 'plugin/components/jobs',
                         axes: { xaxis: { min : -1 }, yaxis: { pad : 1.2 } }
                     });
                 };
-                new Plot( app, options );
+                new Plot( options );
             });
         }
     });

config/plugins/visualizations/charts/static/charts/jqplot/line/wrapper.js

@@ -1,7 +1,7 @@
 define( [ 'plugin/charts/jqplot/common/wrapper' ], function( Plot ) {
     return Backbone.Model.extend({
-        initialize: function( app, options ) {
-            new Plot( app, options );
+        initialize: function( options ) {
+            new Plot( options );
         }
     });
 });

config/plugins/visualizations/charts/static/charts/jqplot/scatter/wrapper.js

@@ -1,6 +1,6 @@
 define( [ 'plugin/charts/jqplot/common/wrapper' ], function( Plot ) {
     return Backbone.Model.extend({
-        initialize: function( app, options ) {
+        initialize: function( options ) {
             options.makeConfig = function( groups, plot_config ) {
                 $.extend( true, plot_config, {
                     seriesDefaults: {
@@ -12,7 +12,7 @@ define( [ 'plugin/charts/jqplot/common/wrapper' ], function( Plot ) {
                     }
                 });
             };
-            new Plot( app, options );
+            new Plot( options );
         }
     });
 });

config/plugins/visualizations/charts/static/charts/nvd3/bar/wrapper.js

@@ -1,8 +1,8 @@
 define( [ 'plugin/charts/nvd3/common/wrapper' ], function( NVD3 ) {
     return Backbone.Model.extend({
-        initialize: function( app, options ) {
+        initialize: function( options ) {
             options.type = 'multiBarChart';
-            new NVD3( app, options );
+            new NVD3( options );
         }
     });
 });

config/plugins/visualizations/charts/static/charts/nvd3/bar_horizontal/wrapper.js

@@ -1,8 +1,8 @@
 define( [ 'plugin/charts/nvd3/common/wrapper' ], function( NVD3 ) {
     return Backbone.Model.extend({
-        initialize: function( app, options ) {
+        initialize: function( options ) {
             options.type = 'multiBarHorizontalChart';
-            new NVD3( app, options );
+            new NVD3( options );
         }
     });
 });

config/plugins/visualizations/charts/static/charts/nvd3/bar_horizontal_stacked/wrapper.js

@@ -1,11 +1,11 @@
 define( [ 'plugin/charts/nvd3/common/wrapper' ], function( NVD3 ) {
     return Backbone.Model.extend({
-        initialize: function( app, options ) {
+        initialize: function( options ) {
             options.type = 'multiBarHorizontalChart';
             options.makeConfig = function( nvd3_model ) {
                 nvd3_model.stacked( true );
             };
-            new NVD3( app, options );
+            new NVD3( options );
         }
     });
 });

config/plugins/visualizations/charts/static/charts/nvd3/bar_stacked/wrapper.js

@@ -1,11 +1,11 @@
 define( [ 'plugin/charts/nvd3/common/wrapper' ], function( NVD3 ) {
     return Backbone.Model.extend({
-        initialize: function( app, options ) {
+        initialize: function( options ) {
             options.type = 'multiBarChart';
             options.makeConfig = function( nvd3_model ) {
                 nvd3_model.stacked( true );
             };
-            new NVD3( app, options );
+            new NVD3( options );
         }
     });
 });