[galaxy-commits] commit/galaxy-central: jeremy goecks: Trackster: replace custom config settings model and view with generic model/view from config.js. Improvements for generic config model/view. Whitespace fixes.

28 Feb 2014

1 new commit in galaxy-central:

https://bitbucket.org/galaxy/galaxy-central/commits/edff37d76463/
Changeset:   edff37d76463
User:        jeremy goecks
Date:        2014-02-28 21:27:59
Summary:     Trackster: replace custom config settings model and view with generic model/view from config.js. Improvements for generic config model/view. Whitespace fixes.
Affected #:  4 files

diff -r e059dbc01b575b856509c2e2baccac3750b6eeb5 -r edff37d76463a468753477080f65886d4a53619e static/scripts/utils/config.js

--- a/static/scripts/utils/config.js
+++ b/static/scripts/utils/config.js
@@ -16,9 +16,14 @@
             this.set(_.extend({}, defaults, options));
         }
 
-        // If type color and no value, get random color.
-        if (this.get('type') === 'color' && !this.get('value')) {
-            this.set('value', util_mod.get_random_color());
+        if (!this.get('value')) {
+            if (this.get('type') === 'color') {
+                // For color setting, set random color.
+                this.set('value', util_mod.get_random_color());
+            }
+            else {
+                this.set_value(this.get('default_value'));
+            }
         }
     },
 
@@ -90,23 +95,49 @@
         }
 
         return undefined;
-    }
+    },
+
+    /**
+     * Set value for a setting.
+     */
+    set_value: function(key, value) {
+        var s = this.get(key);
+        if (s) {
+            return s.set_value(value);
+        }
+
+        return undefined;
+     },
+
+     /**
+      * Set default value for a setting.
+      */
+     set_default_value: function(key, default_value) {
+        var s = this.get(key);
+        if (s) {
+            return s.set('default_value', default_value);
+        }
+
+        return undefined;
+     }
 },
 {
     /**
-     * Utility function that creates a ConfigSettingsCollection from a standard dictionary
-     * with configuration key-value pairs.
+     * Utility function that creates a ConfigSettingsCollection from a set of models
+     * and a saved_values dictionary.
      */
-    from_config_dict: function(config_dict) {
-        // Create a list of key-value dicts suitable for sending to a collection.
-        var settings_list = _.map(_.keys(config_dict), function(key) {
-            return {
-                key: key,
-                value: config_dict[key]
-            };
-        });
-
-        return new ConfigSettingCollection(settings_list);
+    from_models_and_saved_values: function(models, saved_values) {
+        // Update models with saved values.
+        if (saved_values) {
+            _.each(models, function(m) {
+                if (saved_values[m.key]) {
+                    // Found saved value, so update model.
+                    m.value = saved_values[m.key];
+                }
+            });
+        }
+        
+        return new ConfigSettingCollection(models);
     }
 });
 
@@ -265,7 +296,7 @@
                 var id = 'param_' + index;
                 var value = self.$el.find( '#' + id ).val();
                 if ( setting.get('type') === 'bool' ) {
-                    value = container.find( '#' + id ).is( ':checked' );
+                    value = self.$el.find( '#' + id ).is( ':checked' );
                 }
                 setting.set_value(value);
             }

diff -r e059dbc01b575b856509c2e2baccac3750b6eeb5 -r edff37d76463a468753477080f65886d4a53619e static/scripts/viz/trackster.js
--- a/static/scripts/viz/trackster.js
+++ b/static/scripts/viz/trackster.js
@@ -199,7 +199,7 @@
     init_editor : function ()
     {
         // set title
-        $("#center .unified-panel-title").text(view.prefs.name + " (" + view.dbkey + ")");
+        $("#center .unified-panel-title").text(view.config.get_value('name') + " (" + view.dbkey + ")");
         
         // add dataset
         if (galaxy_config.app.add_dataset)
@@ -208,7 +208,7 @@
                 data: { hda_ldda: 'hda', data_type: 'track_config' },
                 dataType: "json",
                 success: function(track_data) { view.add_drawable( trackster_ui.object_from_template(track_data, view, view) ); }
-            });      
+            });
 
         // initialize icons
         $("#add-bookmark-button").click(function()

diff -r e059dbc01b575b856509c2e2baccac3750b6eeb5 -r edff37d76463a468753477080f65886d4a53619e static/scripts/viz/trackster/tracks.js
--- a/static/scripts/viz/trackster/tracks.js
+++ b/static/scripts/viz/trackster/tracks.js
@@ -1,7 +1,7 @@
 define( ["libs/underscore", "viz/visualization", "viz/trackster/util", 
          "viz/trackster/slotting", "viz/trackster/painters", "viz/trackster/filters",
-         "mvc/data", "mvc/tools" ], 
-         function(_, visualization, util, slotting, painters, filters_mod, data, tools_mod) {
+         "mvc/data", "mvc/tools", "utils/config" ], 
+         function(_, visualization, util, slotting, painters, filters_mod, data, tools_mod, config_mod) {
 
 var extend = _.extend;
 
@@ -207,26 +207,23 @@
     
     // -- Set up drawable configuration. --
 
-    this.config = new Config({
-        params: this.config_params,
-        onchange: this.config_onchange,
-        saved_values: obj_dict.prefs
-    });
-    this.prefs = this.config.get('values');
-
+    this.config = config_mod.ConfigSettingCollection.from_models_and_saved_values(this.config_params, obj_dict.prefs);
+    console.log(obj_dict.prefs);
+    this.config.each(function(s) { console.log(s.id, s.get('value')) })
+    
     // If there's no saved name, use object name.
-    if (!this.prefs.name) {
-        this.prefs.name = obj_dict.name;
+    if (!this.config.get_value('name')) {
+        this.config.set_value('name', obj_dict.name);
     }
     if (this.config_onchange) {
-        this.config.on('change:values', this.config_onchange, this);
+        this.config.on('change', this.config_onchange, this);
     }
     
     // Build Drawable HTML and behaviors.
     this.container_div = this.build_container_div();
     this.header_div = this.build_header_div();
     
-    if (this.header_div) { 
+    if (this.header_div) {
         this.container_div.append(this.header_div);
         
         // Icons container.
@@ -257,14 +254,14 @@
         title: "Hide/show content",
         css_class: "toggle",
         on_click_fn: function(drawable) {
-            if ( drawable.prefs.content_visible ) {
+            if ( drawable.config.get_value('content_visible') ) {
                 drawable.action_icons.toggle_icon.addClass("toggle-expand").removeClass("toggle");
                 drawable.hide_contents();
-                drawable.prefs.content_visible = false;
-            } 
+                drawable.config.set_value('content_visible', false);
+            }
             else {
                 drawable.action_icons.toggle_icon.addClass("toggle").removeClass("toggle-expand");
-                drawable.prefs.content_visible = true;
+                drawable.config.set_value('content_visible', true);
                 drawable.show_contents();
             }
         }
@@ -275,10 +272,10 @@
         title: "Edit settings",
         css_class: "gear",
         on_click_fn: function(drawable) {
-            var view = new ConfigView({
-                model: drawable.config
+            var view = new config_mod.ConfigSettingCollectionView({
+                collection: drawable.config
             });
-            view.render();
+            view.render_in_modal('Configure Track');
         }
     },
     // Remove.
@@ -295,7 +292,7 @@
 ];
 
 extend(Drawable.prototype, {
-    config_params: [ 
+    config_params: [
             { key: 'name', label: 'Name', type: 'text', default_value: '' },
             { key: 'content_visible', type: 'bool', default_value: true, hidden: true }
     ],
@@ -311,7 +308,7 @@
     },
 
     can_draw: function() {
-        if (this.enabled && this.prefs.content_visible) { 
+        if (this.enabled && this.config.get_value('content_visible')) {
             return true;
         }
         
@@ -330,11 +327,11 @@
 
     /**
      * Set drawable name.
-     */ 
+     */
     set_name: function(new_name) {
-        this.old_name = this.prefs.name;
-        this.prefs.name = new_name;
-        this.name_div.text(this.prefs.name);
+        this.old_name = this.config.get_value('name');
+        this.config.set_value('name', new_name);
+        this.name_div.text(new_name);
     },
 
     /**
@@ -342,8 +339,8 @@
      */
     revert_name: function() {
         if (this.old_name) {
-            this.prefs.name = this.old_name;
-            this.name_div.text(this.prefs.name);
+            this.config.set_value('name', this.old_name);
+            this.name_div.text(this.old_name);
         }
     },
 
@@ -355,7 +352,7 @@
         
         this.container.remove_drawable(this);
         var view = this.view;
-        this.container_div.hide(0, function() { 
+        this.container_div.hide(0, function() {
             $(this).remove();
             // HACK: is there a better way to update the view?
             view.update_intro_div();
@@ -364,7 +361,7 @@
 
     /**
      * Build drawable's container div; this is the parent div for all drawable's elements.
-     */ 
+     */
     build_container_div: function() {},
 
     /**
@@ -473,7 +470,7 @@
             dictified_drawables.push(this.drawables[i].to_dict());
         }
         return {
-            prefs: this.prefs,
+            prefs: this.config.to_key_value_dict(),
             obj_type: this.obj_type,
             drawables: dictified_drawables
         };
@@ -668,7 +665,7 @@
     build_header_div: function() {
         var header_div = $("<div/>").addClass("track-header");
         header_div.append($("<div/>").addClass(this.drag_handle_class));
-        this.name_div = $("<div/>").addClass("track-name").text(this.prefs.name).appendTo(header_div);
+        this.name_div = $("<div/>").addClass("track-name").text(this.config.get_value('name')).appendTo(header_div);
         return header_div;
     },
 
@@ -829,7 +826,7 @@
      */
     show_composite_track: function() {
         var composite_track = new CompositeTrack(this.view, this.view, {
-            name: this.prefs.name,
+            name: this.config.get_value('name'),
             drawables: this.drawables
         });
         var index = this.container.replace_drawable(this, composite_track, true);
@@ -898,19 +895,15 @@
         this.reset();
 
         // Define track configuration
-        this.config = new Config( {
-            track: this,
-            params: [
+        this.config = new config_mod.ConfigSettingCollection({
+            models: [
                 { key: 'a_color', label: 'A Color', type: 'color', default_value: "#FF0000" },
                 { key: 'c_color', label: 'C Color', type: 'color', default_value: "#00FF00" },
                 { key: 'g_color', label: 'G Color', type: 'color', default_value: "#0000FF" },
                 { key: 't_color', label: 'T Color', type: 'color', default_value: "#FF00FF" },
                 { key: 'n_color', label: 'N Color', type: 'color', default_value: "#AAAAAA" }
-            ], 
+            ],
             saved_values: obj_dict.prefs,
-            onchange: function() {
-                track.request_redraw({ clear_tile_cache: true });
-            }
         });
     },
 
@@ -1819,7 +1812,7 @@
         // already in group, add track to group.
         if (current_track.container === view) {
             // Create new group.
-            var group = new DrawableGroup(view, view, { name: track.prefs.name });
+            var group = new DrawableGroup(view, view, { name: track.config.get_value('name') });
             
             // Replace track with group.
             var index = current_track.container.replace_drawable(current_track, group, false);
@@ -1923,241 +1916,6 @@
 };
 
 /**
- * Configuration object.
- */
-var Config = Backbone.Model.extend({
-    initialize: function(options) {
-        // values is a simple param_key-to-value dictionary used to store
-        // param values.
-        var values = {};
-
-        // Set default values.
-        _.each(options.params, function(p) {
-            // For color parameters without a default value, assign a random color.
-            values[p.key] = (p.type === 'color' && !p.default_value ? util.get_random_color() : p.default_value );
-
-        });
-
-        // Restore saved values.
-        if (options.saved_values) {
-            _.each( this.get('params'), function(p) {
-                if (p.key in options.saved_values) {
-                    values[p.key] = options.saved_values[p.key];
-                }
-            }); 
-        }
-
-        this.set('values', values);
-    },
-
-    /**
-     * Set default value for parameter.
-     */
-    set_param_default_value: function(key, default_value) {
-        var param = _.find(this.get('params'), function(p) {
-            return p.key === key;
-        });
-
-        if (param) {
-            param.default_value = default_value;
-        }
-    },
-
-    /**
-     * Set a parameter's value. Returns true if value changed, false if value changed.
-     */
-    set_param_value: function(key, value) {
-        // Find param.
-        var param = _.find(this.get('params'), function(p) {
-            return p.key === key;
-        });
-
-        if (param) {
-            // Parse value from string.
-            if (typeof value === "string" || value instanceof String) {
-                // Parse string.
-                if (value.trim() === '') {
-                   // If empty value, use default.
-                    value = param.default_value;
-                } else if ( param.type === 'float' ) {
-                    value = parseFloat( value );
-                } else if ( param.type === 'int' ) {
-                    value = parseInt( value, 10 );
-                }
-            }
-        }
-
-        // Set value and return true if changed, false otherwise.
-        if (this.get('values')[key] !== value) {
-            this.get('values')[key] = value;
-            // HACK: custom event trigger needed to indicate that values were updated. 
-            this.trigger('change:values');
-            return true;
-        }
-        else {
-            return false;
-        }
-    }
-});
-
-var ConfigView = Backbone.View.extend({
-
-    /**
-     * Build and show form for modifying configuration. Currently uses Galaxy modals.
-     */
-    render: function() {
-        //
-        // Build config selection UI.
-        //
-
-        var track_config = this.model;
-
-        // Prevent propagation of keydown events to viz to avoid inadvertent navigation.
-        var container = $("<div/>").keydown(function(e) {
-            e.stopPropagation();
-        });
-        var param;
-        // Function to process parameters recursively
-        function handle_params( params, container ) {
-            for ( var index = 0; index < params.length; index++ ) {
-                param = params[index];
-                // Hidden params have no representation in the form
-                if ( param.hidden ) { continue; }
-                // Build row for param
-                var id = 'param_' + index;
-                var value = track_config.get('values')[ param.key ];
-                var row = $("<div class='form-row' />").appendTo( container );
-                row.append( $('<label />').attr("for", id ).text( param.label + ":" ) );
-                // Draw parameter as checkbox
-                if ( param.type === 'bool' ) {
-                    row.append( $('<input type="checkbox" />').attr("id", id ).attr("name", id ).attr( 'checked', value ) );
-                // Draw parameter as textbox
-                } 
-                else if ( param.type === 'text' ) {
-                    row.append( $('<input type="text"/>').attr("id", id ).val(value).click( function() { $(this).select(); }));
-                // Draw paramter as select area
-                } 
-                else if ( param.type === 'select' ) {
-                    var select = $('<select />').attr("id", id);
-                    for ( var i = 0; i < param.options.length; i++ ) {
-                        $("<option/>").text( param.options[i].label ).attr( "value", param.options[i].value ).appendTo( select );
-                    }
-                    select.val( value );
-                    row.append( select );
-                // Draw parameter as color picker
-                } 
-                else if ( param.type === 'color' ) {
-                    var 
-                        container_div = $("<div/>").appendTo(row),
-                        input = $('<input/>').attr({
-                            id: id,
-                            name: id
-                        }).val( value ).addClass('color-input') 
-                            .appendTo(container_div).click(function(e) {
-                            // Hide other pickers.
-                            $(".tooltip").removeClass( "in" );
-                            
-                            // Show input's color picker.
-                            var tip = $(this).siblings(".tooltip").addClass( "in" );
-                            tip.css( { 
-                                // left: $(this).position().left + ( $(input).width() / 2 ) - 60,
-                                // top: $(this).position().top + $(this.height)
-                                left: $(this).position().left + $(this).width() + 5,
-                                top: $(this).position().top + Galaxy.modal.scrollTop() - ( $(tip).height() / 2 ) + ( $(this).height() / 2 )
-                                } ).show();
-                            // Click management: 
-                            
-                            // Keep showing tip if clicking in tip.
-                            tip.click(function(e) {
-                                e.stopPropagation();
-                            });
-                            
-                            // Hide tip if clicking outside of tip.
-                            $(document).bind( "click.color-picker", function() {
-                                tip.hide();
-                                $(document).unbind( "click.color-picker" );
-                            });
-                            
-                            // No propagation to avoid triggering document click (and tip hiding) above.
-                            e.stopPropagation();
-                        }),
-                        // Icon for setting a new random color; behavior set below.
-                        new_color_icon = $("<a href='javascript:void(0)'/>").addClass("icon-button arrow-circle").appendTo(container_div)
-                                         .attr("title", "Set new random color").tooltip(),
-                        // Color picker in tool tip style.
-                        tip = $( "<div class='tooltip right' style='position: absolute;' />" ).appendTo(container_div).hide(),
-                        // Inner div for padding purposes
-                        tip_inner = $("<div class='tooltip-inner' style='text-align: inherit'></div>").appendTo(tip),
-                        tip_arrow = $("<div class='tooltip-arrow'></div>").appendTo(tip),
-                        farb_obj = $.farbtastic(tip_inner, { width: 100, height: 100, callback: input, color: value });
-                    
-                    // Clear floating.
-                    container_div.append( $("<div/>").css("clear", "both"));
-                    
-                    // Use function to fix farb_obj value.
-                    (function(fixed_farb_obj) {
-                        new_color_icon.click(function() {
-                            fixed_farb_obj.setColor(util.get_random_color());
-                        });  
-                    })(farb_obj);
-                      
-                } 
-                else {
-                    row.append( $('<input />').attr("id", id ).attr("name", id ).val( value ) ); 
-                }
-                // Help text
-                if ( param.help ) {
-                    row.append( $("<div class='help'/>").text( param.help ) );
-                }
-            }
-        }
-        // Handle top level parameters in order
-        handle_params( track_config.get('params'), container );
-
-        //
-        // Use Galaxy modal to display config.
-        //
-
-        var self = this,
-            cancel_fn = function() { Galaxy.modal.hide(); $(window).unbind("keypress.check_enter_esc"); },
-            ok_fn = function() { 
-                self.update_from_form( $(Galaxy.modal.el) );
-                Galaxy.modal.hide();
-                $(window).unbind("keypress.check_enter_esc");
-            },
-            check_enter_esc = function(e) {
-                if ((e.keyCode || e.which) === 27) { // Escape key
-                    cancel_fn();
-                } else if ((e.keyCode || e.which) === 13) { // Enter key
-                    ok_fn();
-                }
-            };
-
-        $(window).bind("keypress.check_enter_esc", check_enter_esc);
-        Galaxy.modal.show({title: "Configure", body: container, buttons : {'Cancel' : cancel_fn, 'Ok' : ok_fn } });
-    },
-
-    /**
-     * Update configuration from form.
-     */
-    update_from_form: function( container ) {
-        var model = this.model;
-        var changed = false;
-        _.each(model.get('params'), function(param, index) {
-            if ( !param.hidden ) {
-                // Get value from form element.
-                var id = 'param_' + index;
-                var value = container.find( '#' + id ).val();
-                if ( param.type === 'bool' ) {
-                    value = container.find( '#' + id ).is( ':checked' );
-                }
-                changed = model.set_param_value(param.key, value) || changed;
-            }
-        });
-    }
-});
-
-/**
  * Tiles drawn by tracks.
  */
 var Tile = function(track, region, w_scale, canvas, data) {
@@ -2376,8 +2134,8 @@
     this.data_url_extra_params = {};
     this.data_query_wait = ('data_query_wait' in obj_dict ? obj_dict.data_query_wait : DEFAULT_DATA_QUERY_WAIT);
     // A little ugly creating data manager right now due to transition to Backbone-based objects.
-    this.data_manager = ('data_manager' in obj_dict ? 
-                         obj_dict.data_manager : 
+    this.data_manager = ('data_manager' in obj_dict ?
+                         obj_dict.data_manager :
                          new visualization.GenomeDataManager({
                              dataset: this.dataset,
                              // HACK: simulate 'genome' attributes from view for now.
@@ -2395,13 +2153,13 @@
     // Height attributes: min height, max height, and visible height.
     this.min_height_px = 16;
     this.max_height_px = 800;
-    this.visible_height_px = this.prefs.height;
+    this.visible_height_px = this.config.get_value('height');
             
     //
     // Create content div, which is where track is displayed, and add to container if available.
     //
     this.content_div = $("<div class='track-content'>").appendTo(this.container_div);
-    if (this.container) { 
+    if (this.container) {
         this.container.content_div.append(this.container_div);
         if ( !("resize" in obj_dict) || obj_dict.resize ) {
             this.add_resize_handle();
@@ -2459,7 +2217,7 @@
 
                 // Update track name.
                 if (track.tool.is_visible()) {
-                    track.set_name(track.prefs.name + track.tool_region_and_parameters_str());
+                    track.set_name(track.config.get_value('name') + track.tool_region_and_parameters_str());
                 }
                 else {
                     track.revert_name();
@@ -2475,8 +2233,8 @@
             css_class: "arrow-split",
             on_click_fn: function(track) {
                 var template =
-                    '<strong>Tool</strong>: <%= track.tool.get("name") %><br/>' + 
-                    '<strong>Dataset</strong>: <%= track.prefs.name %><br/>' +
+                    '<strong>Tool</strong>: <%= track.tool.get("name") %><br/>' +
+                    '<strong>Dataset</strong>: <%= track.config.get("name") %><br/>' +
                     '<strong>Region(s)</strong>: <select name="regions">' +
                     '<option value="cur">current viewing area</option>' +
                     '<option value="bookmarks">bookmarks</option>' +
@@ -2492,7 +2250,7 @@
                                 start: view.low,
                                 end: view.high
                             }),
-                            bookmarked_regions = _.map($(".bookmark"), function(elt) { 
+                            bookmarked_regions = _.map($(".bookmark"), function(elt) {
                                 return new visualization.GenomeRegion({from_str: $(elt).children(".position").text()});
                             });
 
@@ -2548,8 +2306,8 @@
     build_header_div: function() {
         var header_div = $("<div class='track-header'/>");
         if (this.view.editor) { this.drag_div = $("<div/>").addClass(this.drag_handle_class).appendTo(header_div); }
-        this.name_div = $("<div/>").addClass("track-name").appendTo(header_div).text(this.prefs.name)
-                        .attr( "id", this.prefs.name.replace(/\s+/g,'-').replace(/[^a-zA-Z0-9\-]/g,'').toLowerCase() );
+        this.name_div = $("<div/>").addClass("track-name").appendTo(header_div).text(this.config.get_value('name'))
+                        .attr( "id", this.config.get_value('name').replace(/\s+/g,'-').replace(/[^a-zA-Z0-9\-]/g,'').toLowerCase() );
         return header_div;
     },
 
@@ -2578,7 +2336,7 @@
         var drag_control = $( "<div class='track-resize'>" );
         // Control shows on hover over track, stays while dragging
         $(track.container_div).hover( function() { 
-            if ( track.prefs.content_visible ) {
+            if ( track.config.get_value('content_visible') ) {
                 in_handle = true;
                 drag_control.show(); 
             }
@@ -2597,10 +2355,10 @@
             track.visible_height_px = (track.max_height_px === new_height ? 0 : new_height);
             track.on_resize();
         }).bind( "dragend", function( e, d ) {
-            track.tile_cache.clear();    
+            track.tile_cache.clear();
             in_drag = false;
             if (!in_handle) { drag_control.hide(); }
-            track.config.get('values').height = track.visible_height_px;
+            track.config.set('height', track.visible_height_px);
             track.changed();
         }).appendTo(track.container_div);
     },
@@ -2611,16 +2369,15 @@
     set_display_modes: function(new_modes, init_mode) {
         // Set modes, init mode.
         this.display_modes = new_modes;
-        this.mode = (init_mode ? init_mode : 
-                     (this.config && this.config.get('values').mode ? 
-                      this.config.get('values').mode : this.display_modes[0])
+        this.mode = (init_mode ? init_mode :
+                     (this.config && this.config.get_value('mode') ?
+                      this.config.get_value('mode') : this.display_modes[0])
                     );
         
         this.action_icons.mode_icon.attr("title", "Set display mode (now: " + this.mode + ")");
 
         // Setup popup menu for changing modes.
-        var 
-            track = this,
+        var track = this,
             mode_mapping = {};
         for (var i = 0, len = track.display_modes.length; i < len; i++) {
             var mode = track.display_modes[i];
@@ -2822,10 +2579,10 @@
                 min_value = Math.floor( Math.min( 0, Math.max( min_value, data.mean - 2 * data.sd ) ) );
                 max_value = Math.ceil( Math.max( 0, Math.min( max_value, data.mean + 2 * data.sd ) ) );
                 // Update config, prefs
-                track.config.set_param_default_value('min_value', min_value);
-                track.config.set_param_default_value('max_value', max_value);
-                track.prefs.min_value = min_value;
-                track.prefs.max_value = max_value;
+                track.config.set_default_value('min_value', min_value);
+                track.config.set_default_value('max_value', max_value);
+                track.config.set_value('min_value', min_value);
+                track.config.set_value('max_value', max_value);
             }
         });
     },
@@ -2879,7 +2636,7 @@
     
     // Add tiles_div, overlay_div to content_div.
     this.tiles_div = $("<div/>").addClass("tiles").appendTo(this.content_div);
-    if (!this.prefs.content_visible) {
+    if (!this.config.get_value('content_visible')) {
         this.tiles_div.hide();
     }
     this.overlay_div = $("<div/>").addClass("overlay").appendTo(this.content_div);
@@ -2934,13 +2691,14 @@
      * Use from_dict to recreate object.
      */
     to_dict: function() {
+        console.log(this.config.to_key_value_dict());
         return {
             track_type: this.get_type(),
             dataset: {
                 id: this.dataset.id,
                 hda_ldda: this.dataset.get('hda_ldda')
             },
-            prefs: this.prefs,
+            prefs: this.config.to_key_value_dict(),
             mode: this.mode,
             filters: this.filters_manager.to_dict(),
             tool_state: (this.tool ? this.tool.state_dict() : {})
@@ -2958,7 +2716,8 @@
               high: track.view.max_high, hda_ldda: track.dataset.get('hda_ldda') }, 
             function(result) {
                 var data = result.data;
-                if ( isNaN(parseFloat(track.prefs.min_value)) || isNaN(parseFloat(track.prefs.max_value)) ) {
+                if ( isNaN(parseFloat(track.config.get_value('min_value'))) ||
+                     isNaN(parseFloat(track.config.get_value('max_value'))) ) {
                     // Compute default minimum and maximum values
                     var min_value = data.min,
                         max_value = data.max;
@@ -2967,8 +2726,8 @@
                     min_value = Math.floor( Math.min( 0, Math.max( min_value, data.mean - 2 * data.sd ) ) );
                     max_value = Math.ceil( Math.max( 0, Math.min( max_value, data.mean + 2 * data.sd ) ) );
                     // Update the prefs
-                    track.prefs.min_value = min_value;
-                    track.prefs.max_value = max_value;
+                    track.config.set_value('min_value', min_value);
+                    track.config.set_value('max_value', max_value);
                 }
             });
     },
@@ -2980,7 +2739,7 @@
         var track = this;
         // TODO: is it necessary to store the mode in two places (.mode and track_config)?
         track.mode = new_mode;
-        track.config.get('values').mode = new_mode;
+        track.config.set_value('mode', new_mode);
         // FIXME: find a better way to get Auto data w/o clearing cache; using mode in the
         // data manager would work if Auto data were checked for compatibility when a specific
         // mode is chosen.
@@ -3151,11 +2910,11 @@
 
         if (label.length !== 0) {
             // Label already exists, so update value.
-            label.text(track.prefs[pref_name]);
+            label.text(track.config.get_value(pref_name));
         }
         else {
             // Add label.
-            label = $("<div/>").text(track.prefs[pref_name]).make_text_editable({
+            label = $("<div/>").text(track.config.get_value(pref_name)).make_text_editable({
                 num_cols: 12,
                 on_finish: function(new_val) {
                     $(".tooltip").remove();
@@ -3163,7 +2922,7 @@
                     on_change();
                 },
                 help_text: "Set " + text + " value"
-            }).addClass('yaxislabel ' + css_class).css("color", this.prefs.label_color);
+            }).addClass('yaxislabel ' + css_class).css("color", this.config.get_value('label_color'));
             this.container_div.prepend(label);
         }
     },
@@ -3376,7 +3135,7 @@
      */
     _draw_line_track_tile: function(result, ctx, mode, region, w_scale) {
         var canvas = ctx.canvas,
-            painter = new painters.LinePainter(result.data, region.get('start'), region.get('end'), this.prefs, mode);
+            painter = new painters.LinePainter(result.data, region.get('start'), region.get('end'), this.config.to_key_value_dict(), mode);
         painter.draw(ctx, canvas.width, canvas.height, w_scale);
         
         return new LineTrackTile(this, region, w_scale, canvas, result.data);
@@ -3691,7 +3450,7 @@
     show_group: function() {
         // Create group with individual tracks.
         var group = new DrawableGroup(this.view, this.container, {
-                name: this.prefs.name
+                name: this.config.get_value('name')
             }),
             track;
         for (var i = 0; i < this.drawables.length; i++) {
@@ -3718,16 +3477,16 @@
         //
         
         // Get smallest min, biggest max.
-        var min = _.min(_.map(this.drawables, function(d) { return d.prefs.min_value; })),
-            max = _.max(_.map(this.drawables, function(d) { return d.prefs.max_value; }));
+        var min = _.min(_.map(this.drawables, function(d) { return d.config.get_value('min_value'); })),
+            max = _.max(_.map(this.drawables, function(d) { return d.config.get_value('max_value') }));
             
-        this.prefs.min_value = min;
-        this.prefs.max_value = max;
+        this.config.set_value('min_value', min);
+        this.config.set_value('max_value', max);
         
         // Set all tracks to smallest min, biggest max.
         _.each(this.drawables, function(d) {
-            d.prefs.min_value = min;
-            d.prefs.max_value = max;
+            d.config.set_value('min_value', min);
+            d.config.set_value('max_value', max);
         });
     },
 
@@ -3735,10 +3494,12 @@
      * Update minimum, maximum for component tracks.
      */
     update_all_min_max: function() {
-        var track = this;
+        var track = this,
+            min_value = this.config.get_value('min_value'),
+            max_value = this.config.get_value('max_value');
         _.each(this.drawables, function(d) {
-            d.prefs.min_value = track.prefs.min_value;
-            d.prefs.max_value = track.prefs.max_value;
+            d.config.set_value('min_value', min_value);
+            d.config.set_value('max_value', max_value);
         });
         this.request_draw({ clear_tile_cache: true });
     },
@@ -3861,16 +3622,16 @@
     display_modes: CONTINUOUS_DATA_MODES,
 
     config_params: _.union( Drawable.prototype.config_params, [
-            { key: 'color', label: 'Color', type: 'color' },
-            { key: 'min_value', label: 'Min Value', type: 'float', default_value: undefined },
-            { key: 'max_value', label: 'Max Value', type: 'float', default_value: undefined },
-            { key: 'mode', type: 'string', default_value: this.mode, hidden: true },
-            { key: 'height', type: 'int', default_value: 30, hidden: true }
+        { key: 'color', label: 'Color', type: 'color' },
+        { key: 'min_value', label: 'Min Value', type: 'float', default_value: undefined },
+        { key: 'max_value', label: 'Max Value', type: 'float', default_value: undefined },
+        { key: 'mode', type: 'string', default_value: this.mode, hidden: true },
+        { key: 'height', type: 'int', default_value: 30, hidden: true }
     ] ),
     
     config_onchange: function() {
-            this.set_name(this.prefs.name);
-            this.request_draw({ clear_tile_cache: true });
+        this.set_name(this.config.get_value('name'));
+        this.request_draw({ clear_tile_cache: true });
     },
     
     /**
@@ -3924,7 +3685,7 @@
     ] ),
 
     config_onchange: function() {
-        this.set_name(this.prefs.name);
+        this.set_name(this.config.get_value('name'));
         this.request_draw({ clear_tile_cache: true });
     },
 
@@ -3934,7 +3695,7 @@
     draw_tile: function(result, ctx, mode, region, w_scale) {
         // Paint onto canvas.
         var canvas = ctx.canvas,
-            painter = new painters.DiagonalHeatmapPainter(result.data, region.get('start'), region.get('end'), this.prefs, mode);
+            painter = new painters.DiagonalHeatmapPainter(result.data, region.get('start'), region.get('end'), this.config.to_key_value_dict(), mode);
         painter.draw(ctx, canvas.width, canvas.height, w_scale);
         
         return new Tile(this, region, w_scale, canvas, result.data);
@@ -3973,7 +3734,7 @@
     ] ),
 
     config_onchange: function() {
-        this.set_name(this.prefs.name);
+        this.set_name(this.config.get_value('name'));
         this.set_painter_from_config();
         this.request_draw({ clear_tile_cache: true });
     },
@@ -4158,7 +3919,7 @@
             var rows_required = this.incremental_slots(w_scale, result.data, mode);
             // HACK: use dummy painter to get required height. Painter should be extended so that get_required_height
             // works as a static function.
-            var dummy_painter = new (this.painter)(null, null, null, this.prefs, mode);
+            var dummy_painter = new (this.painter)(null, null, null, this.config.to_key_value_dict(), mode);
             return Math.max(this.min_height_px, dummy_painter.get_required_height(rows_required, canvas_width) );
         }
     },
@@ -4219,14 +3980,14 @@
         // Create painter.
         var filter_alpha_scaler = (this.filters_manager.alpha_filter ? new FilterScaler(this.filters_manager.alpha_filter) : null),
             filter_height_scaler = (this.filters_manager.height_filter ? new FilterScaler(this.filters_manager.height_filter) : null),
-            painter = new (this.painter)(filtered, tile_low, tile_high, this.prefs, mode, filter_alpha_scaler, filter_height_scaler, 
+            painter = new (this.painter)(filtered, tile_low, tile_high, this.config.to_key_value_dict(), mode, filter_alpha_scaler, filter_height_scaler, 
                                          // HACK: ref_seq only be defined for ReadTracks, and only the ReadPainter accepts that argument
                                          ref_seq,
                                          // Only the ReadPainer will use this function
                                          function(b) { return track.view.get_base_color(b); });
         var feature_mapper = null;
 
-        ctx.fillStyle = this.prefs.block_color;
+        ctx.fillStyle = this.config.get_value('block_color');
         ctx.font = ctx.canvas.manager.default_font;
         ctx.textAlign = "right";
         
@@ -4262,11 +4023,11 @@
         { key: 'show_labels', label: 'Show summary and sample labels', type: 'bool', default_value: true },
         { key: 'summary_height', label: 'Locus summary height', type: 'float', default_value: 20 },
         { key: 'mode', type: 'string', default_value: this.mode, hidden: true },
-        { key: 'height', type: 'int', default_value: 0, hidden: true }
+        { key: 'height', type: 'int', default_value: 32, hidden: true }
     ] ),
     
     config_onchange: function() {
-        this.set_name(this.prefs.name);
+        this.set_name(this.config.get_value('name'));
         this.request_draw({ clear_tile_cache: true });
     },
 
@@ -4280,7 +4041,7 @@
         }
         else { // result.dataset_type === 'variant'
             var view = this.view,
-                painter = new (this.painter)(result.data, region.get('start'), region.get('end'), this.prefs, mode,
+                painter = new (this.painter)(result.data, region.get('start'), region.get('end'), this.config.to_key_value_dict(), mode,
                                              function(b) { return view.get_base_color(b); });
             painter.draw(ctx, ctx.canvas.width, ctx.canvas.height, w_scale);
             return new Tile(this, region, w_scale, ctx.canvas, result.data);
@@ -4312,7 +4073,7 @@
                 }
             }
             
-            var dummy_painter = new (this.painter)(null, null, null, this.prefs, mode);
+            var dummy_painter = new (this.painter)(null, null, null, this.config.to_key_value_dict(), mode);
             return dummy_painter.get_required_height(num_samples);
         }
     },
@@ -4343,7 +4104,7 @@
 
         // Add summary/sample labels if needed and not already included.
         var sample_names = this.dataset.get_metadata('sample_names');
-        if (line_track_tiles.length === 0 && this.prefs.show_labels && sample_names && sample_names.length > 1) {
+        if (line_track_tiles.length === 0 && this.config.get_value('show_labels') && sample_names && sample_names.length > 1) {
             var font_size;
 
             // Add and/or style labels.
@@ -4351,21 +4112,21 @@
                 // Add summary and sample labels.
 
                 // Add summary label to middle of summary area.
-                font_size = this.prefs.summary_height / 2;
+                font_size = this.config.get_value('summary_height') / 2;
                 this.tiles_div.prepend(
                     $("<div/>").text('Summary').addClass('yaxislabel variant top').css({
                         'font-size': font_size + 'px',
-                        'top': (this.prefs.summary_height - font_size) / 2 + 'px'
+                        'top': (this.config.get_value('summary_height') - font_size) / 2 + 'px'
                     })
                 );
                 
                 // Show sample labels.
-                if (this.prefs.show_sample_data) {
+                if (this.config.get_value('show_sample_data')) {
                     var samples_div_html = sample_names.join('<br/>');
 
                     this.tiles_div.prepend( 
                         $("<div/>").html(samples_div_html).addClass('yaxislabel variant top sample').css({
-                            'top': this.prefs.summary_height,
+                            'top': this.config.get_value('summary_height')
                         })
                     );
                 }
@@ -4380,7 +4141,7 @@
                 'line-height': font_size
             });
             // Color labels to preference color.
-            $(this.tiles_div).find('.yaxislabel').css('color', this.prefs.label_color);
+            $(this.tiles_div).find('.yaxislabel').css('color', this.config.get_value('label_color'));
         }
         else {
             // Remove all labels.
@@ -4414,7 +4175,7 @@
     ] ),
 
     config_onchange: function() {
-        this.set_name(this.prefs.name);
+        this.set_name(this.config.get_value('name'));
         this.request_draw({ clear_tile_cache: true });
     }
 });

diff -r e059dbc01b575b856509c2e2baccac3750b6eeb5 -r edff37d76463a468753477080f65886d4a53619e static/scripts/viz/trackster_ui.js
--- a/static/scripts/viz/trackster_ui.js
+++ b/static/scripts/viz/trackster_ui.js
@@ -75,7 +75,7 @@
                 });
 
                 // FIXME: give unique IDs to Drawables and save overview as ID.
-                var overview_track_name = (view.overview_drawable ? view.overview_drawable.prefs.name : null),
+                var overview_track_name = (view.overview_drawable ? view.overview_drawable.config.get_value('name') : null),
                     viz_config = {
                         'view': view.to_dict(),
                         'viewport': { 'chrom': view.chrom, 'start': view.low , 'end': view.high, 'overview': overview_track_name },
@@ -86,9 +86,9 @@
                     url: galaxy_config.root + "visualization/save",
                     type: "POST",
                     dataType: "json",
-                    data: { 
+                    data: {
                         'id'        : view.vis_id,
-                        'title'     : view.prefs.name,
+                        'title'     : view.config.get_value('name'),
                         'dbkey'     : view.dbkey,
                         'type'      : 'trackster',
                         'vis_json'  : JSON.stringify(viz_config)
@@ -265,7 +265,7 @@
             // Set overview.
             var overview_drawable;
             for (var i = 0; i < view.drawables.length; i++) {
-                if (view.drawables[i].prefs.name === overview_drawable_name) {
+                if (view.drawables[i].config.get_value('name') === overview_drawable_name) {
                     view.set_overview(view.drawables[i]);
                     break;
                 }

Repository URL: https://bitbucket.org/galaxy/galaxy-central/

--

This is a commit notification from bitbucket.org. You are receiving
this because you have the service enabled, addressing the recipient of
this email.

    

[galaxy-commits] commit/galaxy-central: jeremy goecks: Trackster: replace custom config settings model and view with generic model/view from config.js. Improvements for generic config model/view. Whitespace fixes.

commits-noreply＠bitbucket.org