[galaxy-commits] commit/galaxy-central: guerler: Charts: Heatmaps revised plugin code, now modularized and enabled for variable data

1 May 2014

1 new commit in galaxy-central:
https://bitbucket.org/galaxy/galaxy-central/commits/f6561aae5484/
Changeset:   f6561aae5484
User:        guerler
Date:        2014-05-01 21:25:06
Summary:     Charts: Heatmaps revised plugin code, now modularized and enabled for variable data
Affected #:  3 files
diff -r 5f89fecb2f0703ce237cc185b2ccbb2bc0fd2658 -r f6561aae5484240c8b76cc32a7b4b1f501b0e660 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
@@ -4,6 +4,7 @@
     title   : 'Heatmap',
     library : '',
     tag     : 'div',
+    use_panels  : true,
     columns : {
         col_label : {
             title       : 'Columns',
diff -r 5f89fecb2f0703ce237cc185b2ccbb2bc0fd2658 -r f6561aae5484240c8b76cc32a7b4b1f501b0e660 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
@@ -20,313 +20,215 @@
     cellSize: 0,
// color buckets
-    colorBuckets: 0,
+    nColors: 0,
// default settings
     optionsDefault: {
-        margin : {
+        pace    : 1000,
+        margin  : {
             top         : 50,
             right       : 10,
             bottom      : 50,
             left        : 100
         },
-        colors : ['#005824','#1A693B','#347B53','#4F8D6B','#699F83','#83B09B','#9EC2B3','#B8D4CB','#D2E6E3','#EDF8FB','#FFFFFF','#F1EEF6','#E6D3E1','#DBB9CD','#D19EB9','#C684A4','#BB6990','#B14F7C','#A63467','#9B1A53','#91003F']
+        colors  : ['#005824','#1A693B','#347B53','#4F8D6B','#699F83','#83B09B','#9EC2B3','#B8D4CB','#D2E6E3','#EDF8FB','#FFFFFF','#F1EEF6','#E6D3E1','#DBB9CD','#D19EB9','#C684A4','#BB6990','#B14F7C','#A63467','#9B1A53','#91003F']
     },
// initialize
     initialize: function(options) {
+        // link this
+        var self = this;
+        
         // load options
         this.options = Utils.merge(options, this.optionsDefault)
-        // add ui elements
-        this.options.div.append(this._templateTooltip());
-        this.options.div.append(this._templateSelect());
+        // check requirements
+        if (!this.options.data || !this.options.div) {
+            console.debug('FAILED - HeatMapPlugin::initialize() - Parameters (container and/or data) missing.');
+            return;
+        }
-        // access data
-        var data = this.options.data;
+        // link data
+        this.data = this.options.data;
-        // identify unique labels
-        var col_hash = {};
-        var row_hash = {};
+        // set element
+        this.setElement(this.options.div);
-        // create label indices
-        this.colNumber = 0;
-        this.rowNumber = 0;
-        for (var i in data) {
-            var cell = data[i];
+        //
+        // data indexing
+        //
+        
+        // labels in alphabetical order
+        this.rowLabel = [];
+        this.colLabel = [];
+        
+        // unique keys (key indices are unique per label and indicate the labels rank in the alphabetical sorting)
+        this.colRank = {};
+        this.rowRank = {};
+        
+        // identify unqiue labels
+        for (var i in this.data) {
+            var cell = this.data[i];
// add label to index list
             var col_label = cell.col_label;
-            if (col_hash[col_label] === undefined) {
-                col_hash[col_label] = ++this.colNumber;
+            if (this.colRank[col_label] === undefined) {
+                this.colRank[col_label] = true;
+                this.colLabel.push(col_label);
             }
             var row_label = cell.row_label;
-            if (row_hash[row_label] === undefined) {
-                row_hash[row_label] = ++this.rowNumber;
+            if (this.rowRank[row_label] === undefined) {
+                this.rowRank[row_label] = true;
+                this.rowLabel.push(row_label);
             }
         }
-        // add indices to data
-        for (var i in data) {
-            var cell = data[i];
-            cell.col = col_hash[cell.col_label];
-            cell.row = row_hash[cell.row_label];
+        // set sizes
+        this.rowNumber = this.rowLabel.length
+        this.colNumber = this.colLabel.length
+        
+        // sort labels alphabetical
+        this.rowLabel.sort();
+        this.colLabel.sort();
+        
+        // generate sorted key list for rows
+        this.rowIndex = []
+        for (var i in this.rowLabel) {
+            var row_label = this.rowLabel[i];
+            var row_index = parseInt(i);
+            this.rowRank[row_label] = row_index;
+            
+            // should contain clustering
+            this.rowIndex.push(row_index);
         }
-        // add row labels
-        this.rowIndex = []
-        for (var key in row_hash) {
-            this.rowLabel.push(key);
-            this.rowIndex.push(row_hash[key]);
+        // generate sorted key list for columns
+        this.colIndex = []
+        for (var i in this.colLabel) {
+            var col_label = this.colLabel[i];
+            var col_index = parseInt(i);
+            this.colRank[col_label] = col_index;
+            
+            // should contain clustering
+            this.colIndex.push(col_index);
         }
-        // add col labels
-        this.colIndex = []
-        for (var key in col_hash) {
-            this.colLabel.push(key);
-            this.colIndex.push(col_hash[key]);
+        //
+        // parse indexing to cells, identify data range
+        //
+        
+        // min/max
+        this.max = undefined;
+        this.min = undefined
+        
+        // add indices to data
+        for (var i in this.data) {
+            // get cell data
+            var cell = this.data[i];
+            
+            // add rank
+            cell.col_rank = this.colRank[cell.col_label];
+            cell.row_rank = this.rowRank[cell.row_label];
+            
+            // identify max/min values
+            if (this.min == undefined || this.min > cell.value) {
+                this.min = cell.value;
+            }
+            if (this.max == undefined || this.max < cell.value) {
+                this.max = cell.value;
+            }
         }
-        console.log(this.rowIndex);
-        console.log(this.colIndex);
+        // middle
+        this.mid = (this.max + this.min) / 2;
+        
+        //
+        // set colors
+        //
         // identify buckets
-        this.colorBuckets = this.options.colors.length;
+        this.nColors = this.options.colors.length;
+        // color scale
+        this.colorScale = d3.scale.quantile()
+            .domain([this.min, this.mid, this.max])
+            .range(this.options.colors);
+        
+        //
+        // add ui elements
+        //
+        // create ui elements
+        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._order(this.value);
+        });
+        
+        //
         // draw
-        this._draw(this.options.div, this.options.data);
+        //
+        this._draw();
     },
-    _draw: function(container, data) {
+    _draw: function() {
+        // link this
+        var self = this;
+        
+        // container
+        var container_width = this.$el.width();
+        var container_height = this.$el.height();
+        
         // get height
-        this.width = parseInt(container.width()) - this.options.margin.left;
-        this.height = parseInt(container.height()) - 2*this.options.margin.top;
+        this.width = this.$el.width() - this.options.margin.left - this.options.margin.right;
+        this.height = this.$el.height() - this.options.margin.top - this.options.margin.bottom;
// calculate cell size
-        this.cellSize = Math.min(   this.height / (this.rowNumber),
-                                    this.width / (this.colNumber));
+        this.cellSize = Math.min(parseInt(this.height / this.rowNumber),
+                                 parseInt(this.width / this.colNumber));
// set width/height for plugin
-        this.width  = this.options.cellSize * this.colNumber;
-        this.height = this.options.cellSize * this.rowNumber;
+        this.width  = this.cellSize * this.colNumber;
+        this.height = this.cellSize * this.rowNumber;
-        // set legend width
-        this.legendElementWidth = this.options.cellSize * 2.5;
-      
-        // configure
-        var margin = this.options.margin;
-        var cellSize = this.cellSize;
-        var colNumber = this.colNumber;
-        var rowNumber = this.rowNumber;
-        var colorBuckets = this.colorBuckets;
-        var colors = this.options.colors;
-        var rowIndex = this.rowIndex;
-        var colIndex = this.colIndex;
-        var colLabel = this.colLabel;
-        var rowLabel = this.rowLabel;
-        var width = this.width;
-        var height = this.height;
-        var legendElementWidth = this.legendElementWidth;
+        // get dimensions
+        var margin              = this.options.margin;
+        var width               = this.width;
+        var height              = this.height;
-        // color scale
-        var colorScale = d3.scale.quantile()
-            .domain([ -10, 0, 10])
-            .range(colors);
-        
-        // add graph
-        var svg = d3.select(container[0]).append('svg')
+        // add main group and translate
+        this.svg = d3.select(this.$el[0]).append('svg')
             .attr("width", width + margin.left + margin.right)
             .attr("height", height + margin.top + margin.bottom)
             .append("g")
-            .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
+            .attr("transform", "translate(" + (container_width - width) / 2 + "," + (container_height - height) / 2 + ")")
-        // row labels
-        var rowSortOrder=false;
-        var colSortOrder=false;
-        var rowLabels = svg.append("g")
-            .selectAll(".rowLabelg")
-            .data(rowLabel)
-            .enter()
-            .append("text")
-            .text(function (d) { return d; })
-            .attr("x", 0)
-            .attr("y", function (d, i) { return rowIndex.indexOf(i+1) * cellSize; })
-            .style("font-size", cellSize + "px")
-            .style("text-anchor", "end")
-            .attr("transform", "translate(-10," + cellSize / 1.5 + ")")
-            .attr("class", function (d,i) { return "rowLabel mono r"+i;} ) 
-            .on("mouseover", function(d) {
-                d3.select(this).classed("text-hover",true);
-                d3.select(this).style("font-size", parseInt(cellSize * 1.3) + "px");
-            })
-            .on("mouseout" , function(d) {
-                d3.select(this).classed("text-hover",false);
-                d3.select(this).style("font-size", parseInt(cellSize) + "px");
-            })
-            .on("click", function(d,i) {rowSortOrder=!rowSortOrder; sortbylabel("r",i,rowSortOrder);d3.select("#order").property("selectedIndex", 4).node().focus();;});
+        // reset sorting
+        this.rowSortOrder   = false;
+        this.colSortOrder   = false;
-        // column labels
-        var colLabels = svg.append("g")
-            .selectAll(".colLabelg")
-            .data(colLabel)
-            .enter()
-            .append("text")
-            .text(function (d) { return d; })
-            .attr("x", 0)
-            .attr("y", function (d, i) { return colIndex.indexOf(i+1) * cellSize; })
-            .style("font-size", cellSize + "px")
-            .style("text-anchor", "left")
-            .attr("transform", "translate("+cellSize/2 + ",-17) rotate (-90)")
-            .attr("class",  function (d,i) { return "colLabel mono c"+i;} )
-            .on("mouseover", function(d) {
-                d3.select(this).classed("text-hover",true);
-                d3.select(this).style("font-size", parseInt(cellSize * 1.3) + "px");
-            })
-            .on("mouseout" , function(d) {
-                d3.select(this).classed("text-hover",false);
-                d3.select(this).style("font-size", parseInt(cellSize) + "px");
-            })
-            .on("click", function(d,i) {colSortOrder=!colSortOrder;  sortbylabel("c",i,colSortOrder);d3.select("#order").property("selectedIndex", 4).node().focus();;});
-
-        // heat map
-        var heatMap = svg.append("g").attr("class","g3")
-            .selectAll(".cellg")
-            .data(data,function(d){return d.row+":"+d.col;})
-            .enter()
-            .append("rect")
-            .attr("x", function(d) { return colIndex.indexOf(d.col) * cellSize; })
-            .attr("y", function(d) { return rowIndex.indexOf(d.row) * cellSize; })
-            .attr("class", function(d){return "cell cell-border cr"+(d.row-1)+" cc"+(d.col-1);})
-            .attr("width", cellSize)
-            .attr("height", cellSize)
-            .style("fill", function(d) { return colorScale(d.value); })
-            // .on("click", function(d) {
-            //       var rowtext=d3.select(".r"+(d.row-1));
-            //       if(rowtext.classed("text-selected")==false){
-            //           rowtext.classed("text-selected",true);
-            //       }else{
-            //           rowtext.classed("text-selected",false);
-            //       }
-            //})
-            .on("mouseover", function(d){
-                //highlight text
-                d3.select(this).classed("cell-hover",true);
-                d3.selectAll(".rowLabel").classed("text-highlight",function(r,ri){ return ri==(d.row-1);});
-                d3.selectAll(".colLabel").classed("text-highlight",function(c,ci){ return ci==(d.col-1);});
-                //d3.selectAll(".colLabel").style("font-size", parseInt(cellSize * 1.3) + "px");
-                //d3.selectAll(".rowLabel").style("font-size", parseInt(cellSize * 1.3) + "px");
-                
-                //Update the tooltip position and value
-                d3.select("#heatmap-tooltip")
-                    .style("left", (d3.event.pageX+10) + "px")
-                    .style("top", (d3.event.pageY-10) + "px")
-                    .select("#value")
-                    .text("lables:"+rowLabel[d.row-1]+","+colLabel[d.col-1]+"\ndata:"+d.value+"\nrow-col-idx:"+d.col+","+d.row+"\ncell-xy "+this.x.baseVal.value+", "+this.y.baseVal.value);
-                //Show the tooltip
-                d3.select("#heatmap-tooltip").classed("hidden", false);
-            })
-            .on("mouseout", function(){
-                d3.select(this).classed("cell-hover",false);
-                d3.selectAll(".rowLabel").classed("text-highlight",false);
-                d3.selectAll(".colLabel").classed("text-highlight",false);
-                //d3.selectAll(".colLabel").style("font-size", parseInt(cellSize) + "px");
-                //d3.selectAll(".rowLabel").style("font-size", parseInt(cellSize) + "px");
-                d3.select("#heatmap-tooltip").classed("hidden", true);
-            });
-        
-        var legend = svg.selectAll(".legend")
-            .data([-10,-9,-8,-7,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,6,7,8,9,10])
-            .enter().append("g")
-            .attr("class", "legend");
-
-        legend.append("rect")
-            .attr("x", function(d, i) { return legendElementWidth * i; })
-            .attr("y", height+(cellSize*2))
-            .attr("width", legendElementWidth)
-            .attr("height", cellSize)
-            .style("fill", function(d, i) { return colors[i]; });
-
-        legend.append("text")
-            .attr("class", "mono")
-            .text(function(d) { return d; })
-            .attr("width", legendElementWidth)
-            .attr("x", function(d, i) { return legendElementWidth * i; })
-            .attr("y", height + (cellSize*4))
-            .style("font-size", cellSize + "px");
-
-        // change ordering of cells
-        function sortbylabel(rORc,i,sortOrder) {
-            var t = svg.transition().duration(3000);
-            var values=[];
-            var sorted; // sorted is zero-based index
-            d3.selectAll(".c"+rORc+i) 
-                .filter(function(ce){
-                values.push(ce.value);
-            });
-            if(rORc=="r"){ // sort valuesatio of a gene
-                sorted=d3.range(colNumber).sort(function(a,b){ if(sortOrder){ return values[b]-values[a];}else{ return values[a]-values[b];}});
-                t.selectAll(".cell")
-                    .attr("x", function(d) { return sorted.indexOf(d.col-1) * cellSize; });
-                t.selectAll(".colLabel")
-                    .attr("y", function (d, i) { return sorted.indexOf(i) * cellSize; });
-            } else { // sort valuesatio of a contrast
-                sorted=d3.range(rowNumber).sort(function(a,b){if(sortOrder){ return values[b]-values[a];}else{ return values[a]-values[b];}});
-                t.selectAll(".cell")
-                    .attr("y", function(d) { return sorted.indexOf(d.row-1) * cellSize; });
-                t.selectAll(".rowLabel")
-                    .attr("y", function (d, i) { return sorted.indexOf(i) * cellSize; });
-            }
-        }
-        
-        d3.select("#order").on("change",function(){
-            order(this.value);
-        });
-
-        function order(value) {
-            if(value=="hclust"){
-                var t = svg.transition().duration(3000);
-                t.selectAll(".cell")
-                    .attr("x", function(d) { return colIndex.indexOf(d.col) * cellSize; })
-                    .attr("y", function(d) { return rowIndex.indexOf(d.row) * cellSize; });
-
-                t.selectAll(".rowLabel")
-                    .attr("y", function (d, i) { return rowIndex.indexOf(i+1) * cellSize; });
-
-                t.selectAll(".colLabel")
-                    .attr("y", function (d, i) { return colIndex.indexOf(i+1) * cellSize; });
-
-            } else if (value=="probecontrast") {
-                var t = svg.transition().duration(3000);
-                t.selectAll(".cell")
-                    .attr("x", function(d) { return (d.col - 1) * cellSize; })
-                    .attr("y", function(d) { return (d.row - 1) * cellSize; });
-
-                t.selectAll(".rowLabel")
-                    .attr("y", function (d, i) { return i * cellSize; });
-
-                t.selectAll(".colLabel")
-                    .attr("y", function (d, i) { return i * cellSize; });
-            } else if (value=="probe") {
-                var t = svg.transition().duration(3000);
-                t.selectAll(".cell")
-                    .attr("y", function(d) { return (d.row - 1) * cellSize; });
-
-                t.selectAll(".rowLabel")
-                    .attr("y", function (d, i) { return i * cellSize; });
-            } else if (value=="contrast"){
-                var t = svg.transition().duration(3000);
-                t.selectAll(".cell")
-                    .attr("x", function(d) { return (d.col - 1) * cellSize; });
-                t.selectAll(".colLabel")
-                    .attr("y", function (d, i) { return i * cellSize; });
-            }
-        }
-        
+        // build
+        this.rowLabels      = this._buildRowLabels();
+        this.colLabels      = this._buildColLabels();
+        this.heatMap        = this._buildHeatMap();
+        this.legend         = this._buildLegend();
+    },
+    
+    // selection of cells
+    _addSelectionTool: function() {
+        //
+        // selection
+        //
         var sa=d3.select(".g3")
             .on("mousedown", function() {
                 if( !d3.event.altKey) {
-                    d3.selectAll(".cell-selected").classed("cell-selected",false);
-                    d3.selectAll(".rowLabel").classed("text-selected",false);
-                    d3.selectAll(".colLabel").classed("text-selected",false);
+                    d3.selectAll(".cell-selected").classed("cell-selected", false);
+                    d3.selectAll(".rowLabel").classed("text-selected", false);
+                    d3.selectAll(".colLabel").classed("text-selected", false);
                 }
                 var p = d3.mouse(this);
                 sa.append("rect")
@@ -374,8 +276,7 @@
                     // deselect all temporary selected state objects
                     d3.selectAll(".cell-selection.cell-selected").classed("cell-selected", false);
                     d3.selectAll(".text-selection.text-selected").classed("text-selected",false);
-
-                    d3.selectAll('.cell').filter(function(cell_d, i) {
+                    d3.selectAll(".cell").filter(function(cell_d, i) {
                         if(!d3.select(this).classed("cell-selected") &&
                             // inner circle inside selection frame
                             (this.x.baseVal.value)+cellSize >= d.x && (this.x.baseVal.value)<=d.x+d.width &&
@@ -385,11 +286,11 @@
                                     .classed("cell-selection", true)
                                     .classed("cell-selected", true);
-                                d3.select(".r"+(cell_d.row-1))
+                                d3.select(".r"+(cell_d.row_rank))
                                     .classed("text-selection",true)
                                     .classed("text-selected",true);
-                                d3.select(".c"+(cell_d.col-1))
+                                d3.select(".c"+(cell_d.col_rank))
                                     .classed("text-selection",true)
                                     .classed("text-selected",true);
                             }
@@ -417,14 +318,353 @@
             });
         },
+        // build legend
+        _buildLegend: function() {
+            // link this
+            var self = this;
+            
+            // gather data
+            var cellSize        = this.cellSize;
+            var height          = this.height;
+            var legendCellWidth = this.width / this.nColors;
+            
+            // create range labels
+            var dataRange = [];
+            for(var i = 0; i < this.nColors; i++) {
+                dataRange.push('');
+            }
+            
+            // prepare indices
+            var dataRangeMin = 0;
+            var dataRangeMid = parseInt((dataRange.length - 1) / 2);
+            var dataRangeMax = dataRange.length - 1;
+            
+            // add labels
+            dataRange[dataRangeMin] = this.min;
+            dataRange[dataRangeMid] = this.mid;
+            dataRange[dataRangeMax] = this.max;
+            
+            // create legend
+            var legend = this.svg.selectAll(".legend")
+                .data(dataRange)
+                .enter().append("g")
+                .attr("class", "legend");
+
+            // add boxes
+            legend.append("rect")
+                .attr("x", function(d, i) {
+                    return legendCellWidth * i;
+                })
+                .attr("y", height + cellSize)
+                .attr("width", legendCellWidth)
+                .attr("height", cellSize)
+                .style("fill", function(d, i) {
+                    return self.options.colors[i];
+                });
+
+            // add text
+            legend.append("text")
+                .attr("class", "mono")
+                .text(function(d) {
+                    return d;
+                })
+                .attr("width", legendCellWidth)
+                .attr("x", function(d, i) {
+                    return legendCellWidth * i;
+                })
+                .attr("y", height + cellSize)
+                .style("font-size", cellSize + "px");
+        },
+        
+        // build column labels
+        _buildColLabels: function() {
+            // link this
+            var self = this;
+            
+            // gather data
+            var cellSize = this.cellSize;
+            var colIndex = this.colIndex;
+            var colLabel = this.colLabel;
+            
+            // column labels
+            var colLabels = this.svg.append("g")
+                .selectAll(".colLabelg")
+                .data(colLabel)
+                .enter()
+                .append("text")
+                .text(function (d) {
+                    return d;
+                })
+                .attr("x", 0)
+                .attr("y", function (d, i) {
+                    return colIndex.indexOf(i) * cellSize;
+                })
+                .style("font-size", cellSize + "px")
+                .style("text-anchor", "left")
+                .attr("transform", "translate(" + cellSize / 2 + ", -17) rotate (-90)")
+                .attr("class",  function (d, i) {
+                    return "colLabel mono c" + i;
+                })
+                .on("mouseover", function(d) {
+                    d3.select(this).classed("text-hover",true);
+                    d3.select(this).style("font-size", parseInt(cellSize * 1.3) + "px");
+                })
+                .on("mouseout" , function(d) {
+                    d3.select(this).classed("text-hover",false);
+                    d3.select(this).style("font-size", parseInt(cellSize) + "px");
+                })
+                .on("click", function(d, i) {
+                    self.colSortOrder=!self.colSortOrder;
+                    self._sortByLabel("c", i, self.colSortOrder);
+                    d3.select("#order").property("selectedIndex", 4).node().focus();
+                });
+        },
+        
+        // build row labels
+        _buildRowLabels: function() {
+            // link this
+            var self = this;
+            
+            // gather data
+            var cellSize = this.cellSize;
+            var rowIndex = this.rowIndex;
+            var rowLabel = this.rowLabel;
+            
+            // draw labels
+            var rowLabels = this.svg.append("g")
+                .selectAll(".rowLabelg")
+                .data(rowLabel)
+                .enter()
+                .append("text")
+                .text(function (d) {
+                    return d;
+                })
+                .attr("x", 0)
+                .attr("y", function (d, i) {
+                    return rowIndex.indexOf(i) * cellSize;
+                })
+                .style("font-size", cellSize + "px")
+                .style("text-anchor", "end")
+                .attr("transform", "translate(-10," + cellSize / 1.5 + ")")
+                .attr("class", function (d, i) {
+                    return "rowLabel mono r" + i;
+                } )
+                .on("mouseover", function(d) {
+                    d3.select(this).classed("text-hover",true);
+                    d3.select(this).style("font-size", parseInt(cellSize * 1.3) + "px");
+                })
+                .on("mouseout" , function(d) {
+                    d3.select(this).classed("text-hover",false);
+                    d3.select(this).style("font-size", parseInt(cellSize) + "px");
+                })
+                .on("click", function(d, i) {
+                    self.rowSortOrder=!self.rowSortOrder;
+                    self._sortByLabel("r", i, self.rowSortOrder);
+                    d3.select("#order").property("selectedIndex", 4).node().focus();
+                });
+        },
+        
+        // build heat map
+        _buildHeatMap: function() {
+            // link this
+            var self = this;
+            
+            // gather data
+            var cellSize = this.cellSize;
+            var rowIndex = this.rowIndex;
+            var rowLabel = this.rowLabel;
+            var colIndex = this.colIndex;
+            var colLabel = this.colLabel;
+            
+            // heat map
+            var heatMap = this.svg.append("g").attr("class","g3")
+                .selectAll(".cellg")
+                .data(self.data, function(d) {
+                    return d.row_rank + ":" + d.col_rank;
+                })
+                .enter()
+                .append("rect")
+                .attr("x", function(d) {
+                    return colIndex.indexOf(d.col_rank) * cellSize;
+                })
+                .attr("y", function(d) {
+                    return rowIndex.indexOf(d.row_rank) * cellSize;
+                })
+                .attr("class", function(d){
+                    return "cell cell-border cr" + d.row_rank + " cc" + d.col_rank;
+                })
+                .attr("width", cellSize)
+                .attr("height", cellSize)
+                .style("fill", function(d) {
+                    return self.colorScale(d.value);
+                })
+                .on("mouseover", function(d){
+                    // highlight text
+                    d3.select(this).classed("cell-hover",true);
+                    d3.selectAll(".rowLabel").classed("text-highlight",function(r,ri){ return ri==(d.row_rank);});
+                    d3.selectAll(".colLabel").classed("text-highlight",function(c,ci){ return ci==(d.col_rank);});
+                    
+                    // update the tooltip position and value
+                    d3.select("#heatmap-tooltip")
+                        .style("left", (d3.event.pageX+10) + "px")
+                        .style("top", (d3.event.pageY-10) + "px")
+                        .select("#value")
+                        .text("Label: " + rowLabel[d.row_rank] + " | " + colLabel[d.col_rank] + ", Value: " + d.value);
+                    // show the tooltip
+                    d3.select("#heatmap-tooltip").classed("hidden", false);
+                })
+                .on("mouseout", function(){
+                    d3.select(this).classed("cell-hover",false);
+                    d3.selectAll(".rowLabel").classed("text-highlight",false);
+                    d3.selectAll(".colLabel").classed("text-highlight",false);
+                    d3.select("#heatmap-tooltip").classed("hidden", true);
+                });
+        },
+        
+        // change ordering of cells
+        _sortByLabel: function(rORc, i, sortOrder) {
+            // get cell size
+            var cellSize = this.cellSize;
+            
+            // define transition / prepare element
+            var t = this.svg.transition().duration(this.options.pace);
+            
+            // collect cells
+            var cells=[];
+            t.selectAll(".c" + rORc + i)
+                .filter(function(ce){
+                cells.push(ce);
+            });
+            
+            // sort cells
+            cells.sort(function(a, b) {
+                if (sortOrder) {
+                    return b.value - a.value;
+                } else {
+                    return a.value - b.value;
+                }
+            });
+                
+            // rows or columns
+            if(rORc == "r") {
+                // get sorted key list
+                var sorted = [];
+                for (var i in cells) {
+                    sorted.push(cells[i].col_rank);
+                }
+                
+                // sort cells
+                t.selectAll(".cell")
+                    .attr("x", function(d) {
+                        return sorted.indexOf(d.col_rank) * cellSize;
+                    });
+                    
+                // sort labels
+                t.selectAll(".colLabel")
+                    .attr("y", function (d, i) {
+                        return sorted.indexOf(i) * cellSize;
+                    });
+            } else {
+                // get sorted key list
+                sorted = [];
+                for (var i in cells) {
+                    sorted.push(cells[i].row_rank);
+                }
+                
+                // sort cells
+                t.selectAll(".cell")
+                    .attr("y", function(d) {
+                        return sorted.indexOf(d.row_rank) * cellSize;
+                });
+                
+                // sort labels
+                t.selectAll(".rowLabel")
+                    .attr("y", function (d, i) {
+                        return sorted.indexOf(i) * cellSize;
+                });
+            }
+        },
+
+        // sort function
+        _order: function (value) {
+            // link this
+            var self = this;
+            
+            // gather data
+            var cellSize = this.cellSize;
+            var rowIndex = this.rowIndex;
+            var rowLabel = this.rowLabel;
+            var colIndex = this.colIndex;
+            var colLabel = this.colLabel;
+            
+            // set duration / select element
+            var t = this.svg.transition().duration(this.options.pace);
+            if(value=="hclust"){
+                t.selectAll(".cell")
+                    .attr("x", function(d) {
+                        return colIndex.indexOf(d.col_rank) * cellSize;
+                    })
+                    .attr("y", function(d) {
+                        return rowIndex.indexOf(d.row_rank) * cellSize;
+                    });
+
+                t.selectAll(".rowLabel")
+                    .attr("y", function(d, i) {
+                        return rowIndex.indexOf(i) * cellSize;
+                    });
+
+                t.selectAll(".colLabel")
+                    .attr("y", function(d, i) {
+                        return colIndex.indexOf(i) * cellSize;
+                    });
+
+            } else if (value=="byboth") {
+                t.selectAll(".cell")
+                    .attr("x", function(d) {
+                        return d.col_rank * cellSize;
+                    })
+                    .attr("y", function(d) {
+                        return d.row_rank * cellSize;
+                    });
+
+                t.selectAll(".rowLabel")
+                    .attr("y", function (d, i) {
+                        return i * cellSize;
+                    });
+
+                t.selectAll(".colLabel")
+                    .attr("y", function (d, i) {
+                        return i * cellSize;
+                    });
+            } else if (value=="byrow") {
+                t.selectAll(".cell")
+                    .attr("y", function(d) {
+                        return d.row_rank * cellSize;
+                    });
+
+                t.selectAll(".rowLabel")
+                    .attr("y", function (d, i) {
+                        return i * cellSize;
+                    });
+            } else if (value=="bycol"){
+                t.selectAll(".cell")
+                    .attr("x", function(d) {
+                        return d.col_rank * cellSize;
+                    });
+                t.selectAll(".colLabel")
+                    .attr("y", function (d, i) {
+                        return i * cellSize;
+                    });
+            }
+        },
+        
         // template
         _templateSelect: function() {
             return  '<select id="order">' +
-                        '<option value="hclust">by cluster</option>' +
-                        '<option value="probecontrast">by probe name and contrast name</option>' +
-                        '<option value="probe">by probe name</option>' +
-                        '<option value="contrast">by contrast name</option>' +
-                        '<option value="custom">by log2 ratio</option>' +
+                        '<option value="hclust">Cluster</option>' +
+                        '<option value="byboth">Sort by row and column</option>' +
+                        '<option value="byrow">Sort by row label</option>' +
+                        '<option value="bycol">Sort by column label</option>' +
                     '</select>';
         },
diff -r 5f89fecb2f0703ce237cc185b2ccbb2bc0fd2658 -r f6561aae5484240c8b76cc32a7b4b1f501b0e660 config/plugins/visualizations/charts/static/charts/heatmap/heatmap.js
--- a/config/plugins/visualizations/charts/static/charts/heatmap/heatmap.js
+++ b/config/plugins/visualizations/charts/static/charts/heatmap/heatmap.js
@@ -1,5 +1,5 @@
 // dependencies
-define(['utils/utils', 'plugin/charts/heatmap/heatmap-plugin'], function(Utils, Plugin) {
+define(['utils/utils', 'plugin/charts/heatmap/heatmap-plugin'], function(Utils, HeatmapPlugin) {
// widget
 return Backbone.View.extend(
@@ -17,13 +17,17 @@
         var self = this;
         this.app.datasets.request(request_dictionary, function() {
-            console.log(request_dictionary.groups);
+            // loop through data groups
+            for (var group_index in request_dictionary.groups) {
+                // get group
+                var group = request_dictionary.groups[group_index];
-            // draw plot
-            new Plugin({
-                'data'  : request_dictionary.groups[0].values,
-                'div'   : self.options.canvas[0]
-            });
+                // draw plot
+                var heatmap = new HeatmapPlugin({
+                    'data'  : group.values,
+                    'div'   : self.options.canvas[group_index]
+                });
+            }
// set chart state
             chart.state('ok', 'Heat map drawn.');
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.

    

2024

2023

2022

2021

2020

2019

2018

2017

2016

2015

2014

2013

2012

2011

2010

[galaxy-commits] commit/galaxy-central: guerler: Charts: Heatmaps revised plugin code, now modularized and enabled for variable data