[galaxy-commits] commit/galaxy-central: guerler: Charts: Fixes for heatmaps

5 May 2014

1 new commit in galaxy-central:

https://bitbucket.org/galaxy/galaxy-central/commits/74b6e23ed788/
Changeset:   74b6e23ed788
User:        guerler
Date:        2014-05-05 22:02:16
Summary:     Charts: Fixes for heatmaps
Affected #:  3 files

diff -r c69894bb9855d38560eb9a55eaaedcd150930f10 -r 74b6e23ed7882f3c091d2b66ce85025241372017 config/plugins/visualizations/charts/static/charts/heatmap/config.js

--- a/config/plugins/visualizations/charts/static/charts/heatmap/config.js
+++ b/config/plugins/visualizations/charts/static/charts/heatmap/config.js
@@ -1,10 +1,12 @@
 define([], function() {
 
 return {
-    title   : 'Heatmap',
-    library : '',
-    tag     : 'div',
+    title       : 'Heatmap',
+    library     : '',
+    tag         : 'div',
     use_panels  : true,
+    
+    // columns
     columns : {
         col_label : {
             title       : 'Columns',
@@ -19,6 +21,7 @@
         },
     },
     
+    // settings
     settings: {
         color_set : {
             title       : 'Color scheme',
@@ -107,6 +110,38 @@
                     value   : 'wysiwyg'
                 }
             ]
+        },
+       
+        sorting : {
+            title       : 'Sorting',
+            info        : 'How should the columns be clustered?',
+            type        : 'select',
+            init        : 'hclust',
+            data        : [
+                {
+                    label   : 'Read from dataset',
+                    value   : 'hclust'
+                },
+                {
+                    label   : 'Sort column and row labels',
+                    value   : 'byboth'
+                },
+                {
+                    label   : 'Sort column labels',
+                    value   : 'bycolumns'
+                },
+                {
+                    label   : 'Sort by rows',
+                    value   : 'byrow'
+                }
+            ]
+        }
+    },
+    
+    // menu definition
+    menu : function() {
+        return {
+            color_set : this.settings.color_set
         }
     }
 };

diff -r c69894bb9855d38560eb9a55eaaedcd150930f10 -r 74b6e23ed7882f3c091d2b66ce85025241372017 config/plugins/visualizations/charts/static/charts/heatmap/heatmap-plugin.js
--- a/config/plugins/visualizations/charts/static/charts/heatmap/heatmap-plugin.js
+++ b/config/plugins/visualizations/charts/static/charts/heatmap/heatmap-plugin.js
@@ -180,26 +180,22 @@
         //
         // add ui elements
         //
-        // create ui elements
+        // create tooltip
         this.$tooltip = $(this._templateTooltip());
-        this.$select  = $(this._templateSelect());
-        
-        // append
         this.$el.append(this.$tooltip);
-        this.$el.append(this.$select);
-        
-        // add event to select field
-        this.$select.on('change', function(){
-            self._sortByOrder(this.value);
-        });
         
         //
         // finally draw the heatmap
         //
-        this._draw();
+        this._build();
+        
+        // catch window resize event
+        $(window).resize(function () {
+            self._build();
+        });
     },
     
-    _draw: function() {
+    _build: function() {
         // link this
         var self = this;
         
@@ -212,7 +208,7 @@
         this.height = this.heightContainer;
         
         // calculate cell size
-        this.cellSize = Math.min(((this.height - 50) / (this.rowNumber + this.margin.top + this.margin.bottom)),
+        this.cellSize = Math.min(((this.height) / (this.rowNumber + this.margin.top + this.margin.bottom)),
                                  (this.width / (this.colNumber + this.margin.left + this.margin.right)));
         
         // set font size
@@ -227,22 +223,27 @@
         var width               = this.width;
         var height              = this.height;
         
+        // reset svg
+        if (this.svg !== undefined) {
+            this.$el.find('svg').remove();
+        }
+        
         // add main group and translate
         this.svg = d3.select(this.$el[0]).append('svg')
             .append('g')
             .attr('transform', 'translate(' + (this.widthContainer - width) / 2 + ',' +
-                                              (this.heightContainer - height) / 2 + ')')
-      
+                                              (this.heightContainer - height) / 2 + ')');
+                            
         // reset sorting
         this.rowSortOrder   = false;
         this.colSortOrder   = false;
         
         // build
-        this._buildRowLabels();
-        this._buildColLabels();
-        this._buildHeatMap();
-        this._buildLegend();
-        this._buildTitle();
+        this.d3RowLabels = this._buildRowLabels();
+        this.d3ColLabels = this._buildColLabels();
+        this.d3HeatMap = this._buildHeatMap();
+        this.d3Legend = this._buildLegend();
+        this.d3Title = this._buildTitle();
     },
         
     // build title
@@ -258,7 +259,7 @@
         var title       = this.options.title;
         
         // add title
-        this.svg.append('g')
+        return this.svg.append('g')
             .append('text')
             .attr('x', width / 2)
             .attr('y', height + 3 * cellSize + fontSize + 3)
@@ -323,6 +324,9 @@
             })
             .attr('y', height + cellSize - 3)
             .style('font-size', fontSize + 'px');
+            
+        // return
+        return legend;
     },
     
     // build column labels
@@ -366,6 +370,9 @@
                 self._sortByLabel('c', 'row', self.rowNumber, i, self.colSortOrder);
                 d3.select('#order').property('selectedIndex', 4).node().focus();
             });
+            
+        // return
+        return colLabels;
     },
     
     // build row labels
@@ -409,6 +416,9 @@
                 self._sortByLabel('r', 'col', self.colNumber, i, self.rowSortOrder);
                 d3.select('#order').property('selectedIndex', 4).node().focus();
             });
+            
+        // return
+        return rowLabels;
     },
     
     // build heat map
@@ -424,7 +434,7 @@
         var colLabel = this.colLabel;
         
         // heat map
-        var heatMap = this.svg.append('g').attr('class','g3')
+        var heatmap = this.svg.append('g').attr('class','g3')
             .selectAll('.cellg')
             .data(self.data, function(d) {
                 return d.row + ':' + d.col;
@@ -466,6 +476,9 @@
                 d3.selectAll('.colLabel').classed('text-highlight',false);
                 d3.select('#heatmap-tooltip').classed('hidden', true);
             });
+            
+        // return
+        return heatmap;
     },
     
     // change ordering of cells

diff -r c69894bb9855d38560eb9a55eaaedcd150930f10 -r 74b6e23ed7882f3c091d2b66ce85025241372017 config/plugins/visualizations/charts/static/views/viewport.js
--- a/config/plugins/visualizations/charts/static/views/viewport.js
+++ b/config/plugins/visualizations/charts/static/views/viewport.js
@@ -6,7 +6,8 @@
 return Backbone.View.extend({
 
     // list of canvas elements
-    canvas: [],
+    container_list: [],
+    canvas_list: [],
     
     // initialize
     initialize: function(app, options) {
@@ -26,7 +27,7 @@
         this._fullscreen(this.$el, 80);
         
         // create canvas element
-        this._createCanvas('div');
+        this._createContainer('div');
         
         // events
         var self = this;
@@ -38,6 +39,7 @@
         this.chart.on('set:state', function() {
             // get info element
             var $info = self.$el.find('#info');
+            var $container = self.$el.find('container');
             
             // get icon
             var $icon = $info.find('#icon');
@@ -49,11 +51,15 @@
             $info.show();
             $info.find('#text').html(self.chart.get('state_info'));
 
+            // hide containers
+            $container.hide();
+
             // check status
             var state = self.chart.get('state');
             switch (state) {
                 case 'ok':
                     $info.hide();
+                    $container.show()
                     break;
                 case 'failed':
                     $icon.addClass('fa fa-warning');
@@ -86,29 +92,35 @@
     },
     
     // creates n canvas elements
-    _createCanvas: function(tag, n) {
+    _createContainer: function(tag, n) {
         // check size of requested canvas elements
         n = n || 1;
     
         // clear previous canvas elements
-        for (var i in this.canvas) {
-            this.canvas[i].remove();
-            this.canvas.slice(i, 0);
+        for (var i in this.container_list) {
+            this.container_list[i].remove();
         }
         
+        // reset lists
+        this.container_list = [];
+        this.canvas_list = [];
+        
         // create requested canvas elements
         for (var i = 0; i < n; i++) {
             // create element
-            var canvas_el = $(this._templateCanvas(tag, parseInt(100 / n)));
+            var canvas_el = $(this._templateContainer(tag, parseInt(100 / n)));
             
             // add to view
             this.$el.append(canvas_el);
             
-            // find canvas element
+            // add to list
+            this.container_list[i] = canvas_el;
+            
+            // add a separate list for canvas elements
             if (tag == 'svg') {
-                this.canvas[i] = d3.select(canvas_el[0]);
+                this.canvas_list[i] = d3.select(canvas_el.find('#canvas')[0]);
             } else {
-                this.canvas[i] = canvas_el;
+                this.canvas_list[i] = canvas_el.find('#canvas');
             }
         }
     },
@@ -137,7 +149,7 @@
         }
         
         // create canvas element and add to canvas list
-        this._createCanvas(this.chart_settings.tag, n_panels);
+        this._createContainer(this.chart_settings.tag, n_panels);
             
         // set chart state
         chart.state('wait', 'Please wait...');
@@ -145,6 +157,7 @@
         // clean up data if there is any from previous jobs
         if (!this.chart_settings.execute ||
             (this.chart_settings.execute && chart.get('modified'))) {
+            
             // reset jobs
             this.app.jobs.cleanup(chart);
             
@@ -156,7 +169,7 @@
         var self = this;
         require(['plugin/charts/' + chart_type + '/' + chart_type], function(ChartView) {
             // create chart
-            var view = new ChartView(self.app, {canvas : self.canvas});
+            var view = new ChartView(self.app, {canvas : self.canvas_list});
             
             // request data
             if (self.chart_settings.execute) {
@@ -269,8 +282,11 @@
     },
     
     // template svg/div element
-    _templateCanvas: function(tag, width) {
-        return '<' + tag + ' class="canvas" style="float: left; display: block; width:' + width + '%; height: 100%;"/>';
+    _templateContainer: function(tag, width) {
+        return  '<div class="container" style="float: left; display: block; width:' + width + '%; height: 100%;">' +
+                    '<div id="menu"/>' +
+                    '<' + tag + ' id="canvas" class="canvas" style="display: block; width:100%; height: inherit;">' +
+                '</div>';
     }
     
 });

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: guerler: Charts: Fixes for heatmaps

commits-noreply＠bitbucket.org