1 new commit in galaxy-central:

https://bitbucket.org/galaxy/galaxy-central/commits/bf94ed77f61a/ Changeset: bf94ed77f61a User: guerler Date: 2014-05-01 23:16:54 Summary: Charts: Heatmaps fix tab-spacing, code cleanup Affected #: 1 file

diff -r a924f00f31589ab8568a7e9c3b1f4f27a5916d42 -r bf94ed77f61a4fd6138ee098b675426f4a6fca97 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 @@ -58,15 +58,21 @@ // data indexing //

- // labels in alphabetical order + // labels (in alphabetical order) this.rowLabel = []; this.colLabel = [];

+ // index (order from original dataset) + this.rowIndex = []; + this.colIndex = []; + // unique keys (key indices are unique per label and indicate the labels rank in the alphabetical sorting) this.colRank = {}; this.rowRank = {};

- // identify unqiue labels + // + // identify and parse labels + // for (var i in this.data) { var cell = this.data[i];

@@ -75,14 +81,20 @@ if (this.colRank[col_label] === undefined) { this.colRank[col_label] = true; this.colLabel.push(col_label); + this.colIndex.push(col_label); } var row_label = cell.row_label; if (this.rowRank[row_label] === undefined) { this.rowRank[row_label] = true; this.rowLabel.push(row_label); + this.rowIndex.push(row_label); } }

+ // + // sort labels and update rank dictionary + // + // set sizes this.rowNumber = this.rowLabel.length this.colNumber = this.colLabel.length @@ -92,29 +104,22 @@ 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); + var row_rank = parseInt(i); + this.rowRank[row_label] = row_rank; }

// 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); + var col_rank = parseInt(i); + this.colRank[col_label] = col_rank; }

// - // parse indexing to cells, identify data range + // parse indexing from rank dictionary to cells + // identify data range //

// min/max @@ -139,12 +144,26 @@ } }

+ // + // translate original create cluster from order in original data + // + + // generate sorted key list for columns + for (var i in this.colIndex) { + this.colIndex[i] = this.colRank[this.colIndex[i]]; + } + // generate sorted key list for columns + for (var i in this.rowIndex) { + this.rowIndex[i] = this.rowRank[this.rowIndex[i]]; + } + // middle this.mid = (this.max + this.min) / 2;

// // set colors // + // identify buckets this.nColors = this.options.colors.length;

@@ -166,11 +185,11 @@

// add event to select field this.$select.on('change', function(){ - self._order(this.value); + self._sortByOrder(this.value); });

// - // draw + // finally draw the heatmap // this._draw(); }, @@ -217,6 +236,346 @@ this.heatMap = this._buildHeatMap(); this.legend = this._buildLegend(); }, + + // 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 + _sortByOrder: 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; + }); + } + },

// selection of cells _addSelectionTool: function() { @@ -224,455 +583,115 @@ // 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); + .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); + } + var p = d3.mouse(this); + sa.append("rect") + .attr({ + rx : 0, + ry : 0, + class : "selection", + x : p[0], + y : p[1], + width : 1, + height : 1 + }) + }) + .on("mousemove", function() { + var s = sa.select("rect.selection"); + + if(!s.empty()) { + var p = d3.mouse(this), + d = { + x : parseInt(s.attr("x"), 10), + y : parseInt(s.attr("y"), 10), + width : parseInt(s.attr("width"), 10), + height : parseInt(s.attr("height"), 10) + }, + move = { + x : p[0] - d.x, + y : p[1] - d.y + }; + + if(move.x < 1 || (move.x*2<d.width)) { + d.x = p[0]; + d.width -= move.x; + } else { + d.width = move.x; } - var p = d3.mouse(this); - sa.append("rect") - .attr({ - rx : 0, - ry : 0, - class : "selection", - x : p[0], - y : p[1], - width : 1, - height : 1 - }) - }) - .on("mousemove", function() { - var s = sa.select("rect.selection"); - - if(!s.empty()) { - var p = d3.mouse(this), - d = { - x : parseInt(s.attr("x"), 10), - y : parseInt(s.attr("y"), 10), - width : parseInt(s.attr("width"), 10), - height : parseInt(s.attr("height"), 10) - }, - move = { - x : p[0] - d.x, - y : p[1] - d.y - }; - - if(move.x < 1 || (move.x*2<d.width)) { - d.x = p[0]; - d.width -= move.x; - } else { - d.width = move.x; - }

- if(move.y < 1 || (move.y*2<d.height)) { - d.y = p[1]; - d.height -= move.y; - } else { - d.height = move.y; - } - s.attr(d); - - // 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) { - 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 && - (this.y.baseVal.value)+cellSize >= d.y && (this.y.baseVal.value)<=d.y+d.height) - { - d3.select(this) - .classed("cell-selection", true) - .classed("cell-selected", true); + if(move.y < 1 || (move.y*2<d.height)) { + d.y = p[1]; + d.height -= move.y; + } else { + d.height = move.y; + } + s.attr(d); + + // 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) { + 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 && + (this.y.baseVal.value)+cellSize >= d.y && (this.y.baseVal.value)<=d.y+d.height) + { + d3.select(this) + .classed("cell-selection", true) + .classed("cell-selected", true);

- d3.select(".r"+(cell_d.row_rank)) - .classed("text-selection",true) - .classed("text-selected",true); + d3.select(".r"+(cell_d.row_rank)) + .classed("text-selection",true) + .classed("text-selected",true);

- d3.select(".c"+(cell_d.col_rank)) - .classed("text-selection",true) - .classed("text-selected",true); - } - }); - } - }) - .on("mouseup", function() { + d3.select(".c"+(cell_d.col_rank)) + .classed("text-selection",true) + .classed("text-selected",true); + } + }); + } + }) + .on("mouseup", function() { + // remove selection frame + sa.selectAll("rect.selection").remove(); + + // remove temporary selection marker class + d3.selectAll(".cell-selection").classed("cell-selection", false); + d3.selectAll(".text-selection").classed("text-selection",false); + }) + .on("mouseout", function() { + if(d3.event.relatedTarget.tagName=='html') { // remove selection frame sa.selectAll("rect.selection").remove(); - + // remove temporary selection marker class d3.selectAll(".cell-selection").classed("cell-selection", false); - d3.selectAll(".text-selection").classed("text-selection",false); - }) - .on("mouseout", function() { - if(d3.event.relatedTarget.tagName=='html') { - // remove selection frame - sa.selectAll("rect.selection").remove(); - - // remove temporary selection marker class - d3.selectAll(".cell-selection").classed("cell-selection", false); - d3.selectAll(".rowLabel").classed("text-selected",false); - d3.selectAll(".colLabel").classed("text-selected",false); - } - }); - }, - - // 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(''); + d3.selectAll(".rowLabel").classed("text-selected",false); + d3.selectAll(".colLabel").classed("text-selected",false); } - - // 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">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>'; - }, - - // template - _templateTooltip: function() { - return '<div id="heatmap-tooltip" class="hidden">' + - '<p><span id="value"></p>' - '</div>'; - } - }); + // template + _templateSelect: function() { + return '<select id="order">' + + '<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>'; + }, + + // template + _templateTooltip: function() { + return '<div id="heatmap-tooltip" class="hidden">' + + '<p><span id="value"></p>' + '</div>'; + } +}); }); \ No newline at end of file

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.