sequenceserver 2.0.0.beta3 → 2.0.0.beta4

data/public/js/hsp.js

@@ -45,10 +45,15 @@ export default class HSP extends React.Component {
     }
 
     /**
-     * Return prettified stats for the given hsp and based on the BLAST
-     * algorithm.
+     * Returns an array of span elements or plain strings (React automatically
+     * adds span tag around strings). This array is passed as it is to JSX to be
+     * rendered just above the pairwise alignment (see render method).
+     *
+     * We cannot return a string from this method otherwise we wouldn't be able
+     * to use JSX elements to format text (like, superscript).
      */
     hspStats () {
+        // An array to hold text or span elements that make up the line.
         let line = [];
 
         // Bit score and total score.
@@ -69,23 +74,23 @@ export default class HSP extends React.Component {
         }
 
         // Gaps
-        line.push(`Gaps: ${Utils.inFraction(this.hsp.gaps, this.hsp.length)} (${Utils.inPercentage(this.hsp.gaps, this.hsp.length)}), `);
+        line.push(`Gaps: ${Utils.inFraction(this.hsp.gaps, this.hsp.length)} (${Utils.inPercentage(this.hsp.gaps, this.hsp.length)})`);
 
         // Query coverage
         //line.push(`Query coverage: ${this.hsp.qcovhsp}%, `)
 
         switch (this.props.algorithm) {
             case 'tblastx':
-                line.push(`Frame: ${Utils.inFraction(this.hsp.qframe, this.hsp.sframe)}`)
+                line.push(`, Frame: ${Utils.inFraction(this.hsp.qframe, this.hsp.sframe)}`)
                 break;
             case 'blastn':
-                line.push(`Strand: ${(this.hsp.qframe > 0 ? '+' : '-')} / ${(this.hsp.sframe > 0 ? '+' : '-')}`)
+                line.push(`, Strand: ${(this.hsp.qframe > 0 ? '+' : '-')} / ${(this.hsp.sframe > 0 ? '+' : '-')}`)
                 break;
             case 'blastx':
-                line.push(`Query Frame: ${this.hsp.qframe}`)
+                line.push(`, Query Frame: ${this.hsp.qframe}`)
                 break;
             case 'tblastn':
-                line.push(`Hit Frame: ${this.hsp.sframe}`)
+                line.push(`, Hit Frame: ${this.hsp.sframe}`)
                 break;
         }
 

data/public/js/length_distribution.js

@@ -8,246 +8,253 @@ import * as Helpers from './visualisation_helpers';
  */
 
 class Graph {
-  static name() {
-    return 'Length distribution of hits';
-  }
-
-  static className() {
-    return 'length-distribution';
-  }
-
-  static collapseId(props) {
-    return 'length_'+props.query.number;
-  }
-
-  static dataName(props) {
-      return 'length-distribution-'+props.query.id
-  }
-
-  constructor($svg_container, props) {
-    this.query = props.query;
-    this._seq_type = Helpers.get_seq_type(props.algorithm);
-    this.svg_container = $svg_container
-
-    this._margin = {top: 30, right: 25, bottom: 55, left: 12.5};
-    this.initiate($svg_container.width(), $svg_container.height());
-  }
-
-  initiate(width, height) {
-    this._width = width - this._margin.left - this._margin.right;
-    this._height = height - this._margin.top - this._margin.bottom;
-    this.svg = d3.select(this.svg_container[0]).insert('svg', ':first-child')
-        .attr('width', this._width + this._margin.right + this._margin.left)
-        .attr('height', this._height + this._margin.top + this._margin.bottom)
-        .append('g')
-        .attr('transform','translate('+this._margin.left+','+this._margin.top+')');
-    this.hit_lengths();
-    this.define_scale_and_bins();
-    this.update_data();
-    this.draw();
-  }
-
-  draw() {
-    this.draw_rectangles();
-    this.draw_query_line();
-    this.draw_axes();
-    this.setupTooltip();
-  }
-
-  define_scale_and_bins() {
-    this._scale_x = d3.scale.linear()
-        .domain([
-          0,
-          (d3.max([this.query.length,d3.max(this._data)]) * 1.05)
-        ])
-        .range([0, this._width]);
-    this._bins = d3.layout.histogram()
-        .range(this._scale_x.domain())
-        .bins(this._scale_x.ticks(50))
-        (this._data);
-    this._scale_y = d3.scale.linear()
-        .domain([0, d3.max(this._bins, function(d) { return d.length })])
-        .range([this._height, 0]);
-  }
-
-  hit_lengths() {
-    this._data = _.map(this.query.hits, _.iteratee('length'))
-  }
-
-  setupTooltip() {
-      this.svg_container.find('[data-toggle="tooltip"]').tooltip({
-          'placement': 'top', 'container': 'body', 'html': 'true',
-          'delay': 0, 'white-space': 'nowrap'
-      });
-  }
-
-  setupResponsiveness() {
-    var currentWidth = $(window).width();
-    console.log('cureent '+currentWidth);
-    var debounced_draw = _.debounce(_.bind(function () {
-      if (currentWidth != $(window).width()) {
-        console.log('redraw initiated '+this._height);
-        this.draw();
-        currentWidth = $(window).width();
-      }
-    }, this), 125);
-    $(window).resize(debounced_draw);
-  }
-
-  tick_formatter(seq_type) {
-    var ticks = this._scale_x.ticks();
-    var format = d3.format('.1f');
-    var prefix = d3.formatPrefix(ticks[ticks.length - 1]);
-    var suffixes = {amino_acid: 'aa', nucleic_acid: 'bp'};
-    return function (d) {
-      if (d === 0) { return ; }
-      if (_.indexOf(ticks,d) >= 0) {
-        if (suffixes[seq_type] == 'aa') {
-          return (d + ' ' + suffixes[seq_type])
+    static name() {
+        return 'Length distribution of hits';
+    }
+
+    static className() {
+        return 'length-distribution';
+    }
+
+    static collapseId(props) {
+        return 'length_'+props.query.number;
+    }
+
+    static dataName(props) {
+        return 'length-distribution-'+props.query.id;
+    }
+
+    constructor($svg_container, props) {
+        this.query = props.query;
+        this._seq_type = Helpers.get_seq_type(props.algorithm);
+        this.svg_container = $svg_container;
+        if (props.algorithm == 'blastx') {
+            this.query_length = this.query.length / 3;
+        } else if (props.algorithm == 'tblastn') {
+            this.query_length = this.query.length * 3;
         } else {
-          return (format(prefix.scale(d)) + ' ' + prefix.symbol + suffixes[seq_type]);
+            this.query_length = this.query.length;
         }
-      } else {
-        return ;
-      }
-    };
-  }
-
-  update_data() {
-    var self = this;
-    var data2 = [];
-    this._bins.map(function (bin) {
-      var inner_data = [];
-      bin.reverse();
-      var y0 = bin.length;
-      bin.map(function (d,i) {
-        var y1 = bin.length - (i+1);
-        var len_index = _.findIndex(self.query.hits, {length: d});
-        var item = {
-          value: d,
-          id: self.query.hits[len_index].id,
-          evalue: self.query.hits[len_index].evalue,
-          url: '#Query_'+self.query.number+'_hit_'+self.query.hits[len_index].number,
-          y0: y0,
-          y1: y0 += (y1 - y0),
-          color: Helpers.get_colors_for_evalue(self.query.hits[len_index].evalue,self.query.hits)
-        };
-        inner_data.push(item);
-      })
-      var item = {data: inner_data, x: bin.x, dx: bin.dx, length: bin.length};
-      data2.push(item);
-    })
-    this._update_data = data2;
-  }
-
-  draw_rectangles() {
-    var self = this;
-    var bar = this.svg.selectAll('.bar')
-        .data(this._update_data)
-        .enter().append('g')
-        .attr('class', 'g')
-        .attr('transform', function(d) {
-          return 'translate('+(self._scale_x(d.x)+self._margin.left)+',0)';
+        this._margin = {top: 30, right: 25, bottom: 55, left: 12.5};
+        this.initiate($svg_container.width(), $svg_container.height());
+    }
+
+    initiate(width, height) {
+        this._width = width - this._margin.left - this._margin.right;
+        this._height = height - this._margin.top - this._margin.bottom;
+        this.svg = d3.select(this.svg_container[0]).insert('svg', ':first-child')
+            .attr('width', this._width + this._margin.right + this._margin.left)
+            .attr('height', this._height + this._margin.top + this._margin.bottom)
+            .append('g')
+            .attr('transform','translate('+this._margin.left+','+this._margin.top+')');
+        this.hit_lengths();
+        this.define_scale_and_bins();
+        this.update_data();
+        this.draw();
+    }
+
+    draw() {
+        this.draw_rectangles();
+        this.draw_query_line();
+        this.draw_axes();
+        this.setupTooltip();
+    }
+
+    define_scale_and_bins() {
+        this._scale_x = d3.scale.linear()
+            .domain([
+                0,
+                (d3.max([this.query_length, d3.max(this._data)]) * 1.01)
+            ]).nice()
+            .range([0, this._width]);
+        this._bins = d3.layout.histogram()
+            .range(this._scale_x.domain())
+            .bins(this._scale_x.ticks(50))
+            (this._data);
+        this._scale_y = d3.scale.linear()
+            .domain([0, d3.max(this._bins, function(d) { return d.length; })])
+            .range([this._height, 0]).nice();
+    }
+
+    hit_lengths() {
+        this._data = _.map(this.query.hits, _.iteratee('length'));
+    }
+
+    setupTooltip() {
+        this.svg_container.find('[data-toggle="tooltip"]').tooltip({
+            'placement': 'top', 'container': 'body', 'html': 'true',
+            'delay': 0, 'white-space': 'nowrap'
         });
+    }
 
-    bar.selectAll('rect')
-        .data(function (d) { return d.data; })
-        .enter().append('a')
-        .attr('xlink:href', function(i) { return i.url })
-        .append('rect')
-        .attr('class','bar')
-        .attr('data-toggle','tooltip')
-        .attr('title', function(i) {
-          return i.id+' '+'<br>E Value: '+Helpers.prettify_evalue(i.evalue)+'<br>Length: '+i.value;
-        })
-        .attr('x', 1)
-        .attr('y', function(i) { return (self._scale_y(i.y0)); })
-        .attr('width', self._scale_x(this._bins[1].x) - self._scale_x(this._bins[0].x) - 1)
-        .attr('height', function (i) { return self._scale_y(i.y1) - self._scale_y(i.y0); })
-        .attr('fill', function(i) {
-          return i.color;
+    setupResponsiveness() {
+        var currentWidth = $(window).width();
+        console.log('cureent '+currentWidth);
+        var debounced_draw = _.debounce(_.bind(function () {
+            if (currentWidth != $(window).width()) {
+                console.log('redraw initiated '+this._height);
+                this.draw();
+                currentWidth = $(window).width();
+            }
+        }, this), 125);
+        $(window).resize(debounced_draw);
+    }
+
+    tick_formatter(seq_type) {
+        var ticks = this._scale_x.ticks();
+        var format = d3.format('.1f');
+        var prefix = d3.formatPrefix(ticks[ticks.length - 1]);
+        var suffixes = {amino_acid: 'aa', nucleic_acid: 'bp'};
+        return function (d) {
+            if (d === 0) { return ; }
+            if (_.indexOf(ticks,d) >= 0) {
+                if (suffixes[seq_type] == 'aa') {
+                    return (d + ' ' + suffixes[seq_type]);
+                } else {
+                    return (format(prefix.scale(d)) + ' ' + prefix.symbol + suffixes[seq_type]);
+                }
+            } else {
+                return ;
+            }
+        };
+    }
+
+    update_data() {
+        var self = this;
+        var data2 = [];
+        this._bins.map(function (bin) {
+            var inner_data = [];
+            bin.reverse();
+            var y0 = bin.length;
+            bin.map(function (d,i) {
+                var y1 = bin.length - (i+1);
+                var len_index = _.findIndex(self.query.hits, {length: d});
+                var item = {
+                    value: d,
+                    id: self.query.hits[len_index].id,
+                    evalue: self.query.hits[len_index].evalue,
+                    url: '#Query_'+self.query.number+'_hit_'+self.query.hits[len_index].number,
+                    y0: y0,
+                    y1: y0 += (y1 - y0),
+                    color: Helpers.get_colors_for_evalue(self.query.hits[len_index].evalue,self.query.hits)
+                };
+                inner_data.push(item);
+            });
+            var item = {data: inner_data, x: bin.x, dx: bin.dx, length: bin.length};
+            data2.push(item);
         });
-  }
-
-  draw_query_line() {
-    var query_line = this.svg.append('g')
-        .attr('class','query_line')
-        .attr('transform','translate('+(this._margin.left+this._scale_x(this.query.length))+',0)');
-
-    query_line.append('rect')
-        .attr('x',1)
-        .attr('class','bar')
-        .attr('width',4)
-        .attr('height',this._height)
-        .style('fill','rgb(95,122,183)');
-
-    query_line.append('text')
-        .attr('dy', '0.75em')
-        .attr('y', -10)
-        .attr('x', 2)
-        .attr('text-anchor','start')
-        .text('Query')
-        .style('fill','#000')
-        .attr('transform','rotate(-45)');
-  }
-
-  draw_axes() {
-    var space, len;
-    len = this._scale_y.ticks().length;
-    if (len >= 8) {
-      space = 8;
-    } else {
-      space = len;
-    }
-    var formatter = this.tick_formatter(this._seq_type.subject_seq_type);
-    var x_axis = d3.svg.axis()
-        .scale(this._scale_x)
-        .orient('bottom')
-        .ticks(50)
-        .tickFormat(formatter);
-    var y_axis = d3.svg.axis()
-        .scale(this._scale_y)
-        .orient('left')
-        .tickValues(this._scale_y.ticks(space))
-        .tickFormat(function (e) {
-          if (Math.floor(e) != e) {
-            return ;
-          }
-          return e;
+        this._update_data = data2;
+    }
+
+    draw_rectangles() {
+        var self = this;
+        var bar = this.svg.selectAll('.bar')
+            .data(this._update_data)
+            .enter().append('g')
+            .attr('class', 'g')
+            .attr('transform', function(d) {
+                return 'translate('+(self._scale_x(d.x)+self._margin.left)+',0)';
+            });
+
+        bar.selectAll('rect')
+            .data(function (d) { return d.data; })
+            .enter().append('a')
+            .attr('xlink:href', function(i) { return i.url; })
+            .append('rect')
+            .attr('class','bar')
+            .attr('data-toggle','tooltip')
+            .attr('title', function(i) {
+                return i.id+' '+'<br>E value: '+Helpers.prettify_evalue(i.evalue)+'<br>Length: '+i.value;
+            })
+            .attr('x', 1)
+            .attr('y', function(i) { return (self._scale_y(i.y0)); })
+            .attr('width', self._scale_x(this._bins[1].x) - self._scale_x(this._bins[0].x) - 1)
+            .attr('height', function (i) { return self._scale_y(i.y1) - self._scale_y(i.y0); })
+            .attr('fill', function(i) {
+                return i.color;
+            });
+    }
+
+    draw_query_line() {
+        var query_line = this.svg.append('g')
+            .attr('class','query_line')
+            .attr('transform','translate('+(this._margin.left+this._scale_x(this.query_length))+',0)');
+
+        query_line.append('rect')
+            .attr('x',1)
+            .attr('class','bar')
+            .attr('width',4)
+            .attr('height',this._height)
+            .style('fill','rgb(95,122,183)');
+
+        query_line.append('text')
+            .attr('dy', '0.75em')
+            .attr('y', -10)
+            .attr('x', 2)
+            .attr('text-anchor','start')
+            .text('Query')
+            .style('fill','#000')
+            .attr('transform','rotate(-45)');
+    }
+
+    draw_axes() {
+        var space, len;
+        len = this._scale_y.ticks().length;
+        if (len >= 5) {
+            space = 5;
+        } else {
+            space = len;
+        }
+        var formatter = this.tick_formatter(this._seq_type.subject_seq_type);
+        var x_axis = d3.svg.axis()
+            .scale(this._scale_x)
+            .orient('bottom')
+            .ticks(50)
+            .tickFormat(formatter);
+        var y_axis = d3.svg.axis()
+            .scale(this._scale_y)
+            .orient('left')
+            .tickValues(this._scale_y.ticks(space))
+            .outerTickSize(0)
+            .tickFormat(function (e) {
+                if (Math.floor(e) != e) {
+                    return ;
+                }
+                return e;
+            });
+        var ticks = this._scale_y.ticks();
+        for (var i in ticks) {
+            if (ticks[i] % 1 != 0) {
+                y_axis.tickValues(d3.range(0, d3.max(this._bins, function(d) { return d.length; })+1));
+                break;
+            }
+        }
+        var self = this;
+        var xContainer = this.svg.append('g')
+            .attr('class', 'axis axis--x')
+            .attr('transform', 'translate('+this._margin.left+','+this._height+')')
+            .call(x_axis);
+
+        xContainer.selectAll('line').attr('y2',function (d) {
+            var ticks = self._scale_x.ticks();
+            if (_.indexOf(ticks, d) >= 0) {
+                return 7;
+            } else {
+                return 4;
+            }
         });
-    var ticks = this._scale_y.ticks();
-    for (var i in ticks) {
-      if (ticks[i] % 1 != 0) {
-        y_axis.tickValues(d3.range(0, d3.max(this._bins, function(d) { return d.length })+1));
-        break;
-      }
-    }
-    var self = this;
-    var xContainer = this.svg.append('g')
-        .attr('class', 'axis axis--x')
-        .attr('transform', 'translate('+this._margin.left+','+this._height+')')
-        .call(x_axis);
-
-    xContainer.selectAll('line').attr('y2',function (d) {
-      var ticks = self._scale_x.ticks();
-      if (_.indexOf(ticks, d) >= 0) {
-        return 7;
-      } else {
-        return 4;
-      }
-    });
-
-    xContainer.selectAll('text').style('text-anchor','end')
-        .attr('x', '-8px')
-        .attr('y', '3px')
-        .attr('dy', '0')
-        .attr('transform','rotate(-90)');
-
-    var yContainer = this.svg.append('g')
-        .attr('class','axis axis--y')
-        .attr('transform','translate('+this._margin.left+',0)')
-        .call(y_axis);
-  }
+
+        xContainer.selectAll('text').style('text-anchor','end')
+            .attr('x', '-8px')
+            .attr('y', '3px')
+            .attr('dy', '0')
+            .attr('transform','rotate(-90)');
+
+        var yContainer = this.svg.append('g')
+            .attr('class','axis axis--y')
+            .attr('transform','translate('+this._margin.left+',0)')
+            .call(y_axis);
+    }
 }
 
 var LengthDistribution = Grapher(Graph);