sequenceserver 1.1.0.beta8 → 1.1.0.beta10

data/public/js/circos.js

@@ -11,7 +11,7 @@ class Graph {
   }
 
   static className() {
-    return 'circos-distribution collapse';
+    return 'circos';
   }
 
   static collapseId(props) {

data/public/js/grapher.js

@@ -18,8 +18,9 @@ export default function Grapher(Graph) {
         }
 
         render () {
+            var cssClasses = Graph.className() + ' grapher';
             return (
-                <div className="grapher" ref="grapher">
+                <div ref="grapher" className={cssClasses}>
                     <div className="grapher-header">
                         <h5 className="caption" data-toggle="collapse"
                             data-target={"#"+this.collapseId()}>
@@ -113,9 +114,13 @@ $(window).resize(_.debounce(function () {
 // Swap-icon and toggle .graph-links on collapse.
 $('body').on('hidden.bs.collapse', ".collapse", function () {
     var component = Graphers[$(this).attr('id')];
-    component.setState({ collapsed: true });
+    if (component) {
+        component.setState({ collapsed: true });
+    }
 });
 $('body').on('shown.bs.collapse', ".collapse", function () {
     var component = Graphers[$(this).attr('id')];
-    component.setState({ collapsed: false });
+    if (component) {
+        component.setState({ collapsed: false });
+    }
 });

data/public/js/hits_overview.js

@@ -6,7 +6,7 @@ import * as Helpers from './visualisation_helpers';
 class Graph {
 
   static name() {
-    return 'Matching sequences';
+    return 'Graphical overview of hits';
   }
 
   static className() {
@@ -207,14 +207,12 @@ class Graph {
 
   graphIt($queryDiv, $graphDiv, index, howMany, opts, inhits) {
     /* barHeight: Height of each hit track.
-     * barPadding: Padding around each hit track.
      * legend: Height reserved for the overview legend.
      * margin: Margin around the svg element.
      */
     var defaults = {
-        barHeight: 2,
-        barPadding: 1,
-        legend: 5,
+        barHeight: 3,
+        legend: inhits.length > 1 ? 3 : 0,
         margin: 20
     },
         options = $.extend(defaults, opts);
@@ -233,7 +231,7 @@ class Graph {
     var q_i = $queryDiv.attr('id');
 
     var width = $graphDiv.width();
-    var height = hits.length * (options.barHeight + options.barPadding) +
+    var height = hits.length * (options.barHeight) +
         2 * options.legend + 5 * options.margin;
     // var height = $graphDiv.height();
 

data/public/js/hsp.js

@@ -0,0 +1,283 @@
+import React from 'react';
+import _ from 'underscore';
+
+import Utils from './utils';
+import * as Helpers from './visualisation_helpers';
+
+var HSPComponents = {};
+
+/**
+ * Alignment viewer.
+ */
+export default class HSP extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.hsp = props.hsp;
+    }
+
+    domID() {
+        return "Query_" + this.props.query.number + "_hit_" +
+            this.props.hit.number + "_" + this.props.hsp.number;
+    }
+
+    // Renders pretty formatted alignment.
+    render () {
+        return (
+            <div className="hsp" id={this.domID()} key={this.domID()} ref="hsp">
+                <pre className="pre-reset hsp-stats">
+                    {Helpers.toLetters(this.hsp.number) + "."}&nbsp;{this.hspStats()}
+                </pre>
+                {this.hspLines()}
+            </div>
+        );
+    }
+
+    componentDidMount () {
+        HSPComponents[this.domID()] = this;
+        this.draw();
+    }
+
+    draw () {
+        this.chars = $(React.findDOMNode(this.refs.hsp)).width() / 7.35;
+        this.forceUpdate();
+    }
+
+    /**
+     * Return prettified stats for the given hsp and based on the BLAST
+     * algorithm.
+     */
+    hspStats () {
+        let line = [];
+
+        // Bit score and total score.
+        line.push(`Score: ${Utils.inTwoDecimal(this.hsp.bit_score)} (${this.hsp.score}), `);
+
+        // E value
+        line.push(`E value: `); line.push(Utils.inExponential(this.hsp.evalue)); line.push(', ');
+
+        // Identity
+        line.push([`Identities: ${Utils.inFraction(this.hsp.identity, this.hsp.length)} (${Utils.inPercentage(this.hsp.identity, this.hsp.length)}), `]);
+
+        // Positives (if this is a protein alignment).
+        if (this.props.algorithm === 'blastp' ||
+            this.props.algorithm === 'tblastx') {
+            line.push(`Positives: ${Utils.inFraction(this.hsp.positives, this.hsp.length)} (${Utils.inPercentage(this.hsp.positives, this.hsp.length)}), `)
+        }
+
+        // Gaps
+        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)}`)
+                break;
+            case 'blastn':
+                line.push(`Strand: ${(this.hsp.qframe > 0 ? '+' : '-')} / ${(this.hsp.sframe > 0 ? '+' : '-')}`)
+                break;
+            case 'blastx':
+                line.push(`Query Frame: ${this.hsp.qframe}`)
+                break;
+            case 'tblastn':
+                line.push(`Hit Frame: ${this.hsp.sframe}`)
+                break;
+        }
+
+        return line;
+    }
+
+    hspLines () {
+        var pp = [];
+        var lines = this.lines();
+        var nqseq = this.nqseq();
+        var nsseq = this.nsseq();
+        var width = this.width();
+        var chars = this.chars - 2 * width - 8;
+
+        for (let i = 1; i <= lines; i++) {
+            let line = [];
+            let seq_start_index = chars * (i - 1);
+            let seq_stop_index = seq_start_index + chars;
+
+            let lqstart = nqseq;
+            let lqseq = this.hsp.qseq.slice(seq_start_index, seq_stop_index);
+            let lqend = nqseq + (lqseq.length - lqseq.split('-').length) *
+                this.qframe_unit() * this.qframe_sign();
+            nqseq = lqend + this.qframe_unit() * this.qframe_sign();
+
+            let lmseq = this.hsp.midline.slice(seq_start_index, seq_stop_index);
+
+            let lsstart = nsseq;
+            let lsseq = this.hsp.sseq.slice(seq_start_index, seq_stop_index);
+            let lsend = nsseq + (lsseq.length - lsseq.split('-').length) *
+                this.sframe_unit() * this.sframe_sign();
+            nsseq = lsend + this.sframe_unit() * this.sframe_sign();
+
+            line.push(this.spanCoords('Query   ' + this.formatCoords(lqstart, width) + ' '));
+            line.push(lqseq);
+            line.push(this.spanCoords(' ' + lqend));
+            line.push(<br/>);
+
+            line.push(this.formatCoords('', width + 8) + ' ');
+            line.push(lmseq);
+            line.push(<br/>);
+
+            line.push(this.spanCoords('Subject ' + this.formatCoords(lsstart, width) + ' '));
+            line.push(lsseq);
+            line.push(this.spanCoords(' ' + lsend))
+            line.push(<br/>);
+
+            pp.push((<pre className="pre-reset hsp-lines">{line}</pre>));
+        }
+
+        return pp;
+    }
+
+    // Number of lines of pairwise-alignment (i.e., each line consists of 3
+    // lines). We draw as many pre tags.
+    lines() {
+        return Math.ceil(this.hsp.length / this.chars);
+    }
+
+    // Width of each line of alignment.
+    width() {
+        return _.max(_.map([this.hsp.qstart, this.hsp.qend,
+                                this.hsp.sstart, this.hsp.send],
+                                (n) => { return n.toString().length }));
+    }
+
+    // Alignment start coordinate for query sequence.
+    //
+    // This will be qstart or qend depending on the direction in which the
+    // (translated) query sequence aligned.
+    nqseq () {
+        switch (this.props.algorithm) {
+            case 'blastp':
+            case 'blastx':
+            case 'tblastn':
+            case 'tblastx':
+                return this.hsp.qframe >= 0 ? this.hsp.qstart : this.hsp.qend;
+            case 'blastn':
+                // BLASTN is a bit weird in that, no matter which direction the query
+                // sequence aligned in, qstart is taken as alignment start coordinate
+                // for query.
+                return this.hsp.qstart;
+        }
+    }
+
+    // Alignment start coordinate for subject sequence.
+    //
+    // This will be sstart or send depending on the direction in which the
+    // (translated) subject sequence aligned.
+    nsseq () {
+        switch (this.props.algorithm) {
+            case 'blastp':
+            case 'blastx':
+            case 'tblastn':
+            case 'tblastx':
+                return this.hsp.sframe >= 0 ? this.hsp.sstart : this.hsp.send;
+            case 'blastn':
+                // BLASTN is a bit weird in that, no matter which direction the
+                // subject sequence aligned in, sstart is taken as alignment
+                // start coordinate for subject.
+                return this.hsp.sstart
+        }
+    }
+
+    // Jump in query coordinate.
+    //
+    // Roughly,
+    //
+    //   qend = qstart + n * qframe_unit
+    //
+    // This will be 1 or 3 depending on whether the query sequence was
+    // translated or not.
+    qframe_unit () {
+        switch (this.props.algorithm) {
+            case 'blastp':
+            case 'blastn':
+            case 'tblastn':
+                return 1;
+            case 'blastx':
+                // _Translated_ nucleotide query against protein database.
+            case 'tblastx':
+                // _Translated_ nucleotide query against translated
+                // nucleotide database.
+                return 3;
+        }
+    }
+
+    // Jump in subject coordinate.
+    //
+    // Roughly,
+    //
+    //   send = sstart + n * sframe_unit
+    //
+    // This will be 1 or 3 depending on whether the subject sequence was
+    // translated or not.
+    sframe_unit () {
+        switch (this.props.algorithm) {
+            case 'blastp':
+            case 'blastx':
+            case 'blastn':
+                return 1;
+            case 'tblastn':
+                // Protein query against _translated_ nucleotide database.
+                return 3;
+            case 'tblastx':
+                // Translated nucleotide query against _translated_
+                // nucleotide database.
+                return 3;
+        }
+    }
+
+    // If we should add or subtract qframe_unit from qstart to arrive at qend.
+    //
+    // Roughly,
+    //
+    //   qend = qstart + (qframe_sign) * n * qframe_unit
+    //
+    // This will be +1 or -1, depending on the direction in which the
+    // (translated) query sequence aligned.
+    qframe_sign () {
+        return this.hsp.qframe >= 0 ? 1 : -1;
+    }
+
+    // If we should add or subtract sframe_unit from sstart to arrive at send.
+    //
+    // Roughly,
+    //
+    //   send = sstart + (sframe_sign) * n * sframe_unit
+    //
+    // This will be +1 or -1, depending on the direction in which the
+    // (translated) subject sequence aligned.
+    sframe_sign () {
+        return this.hsp.sframe >= 0 ? 1 : -1;
+    }
+
+
+    /**
+     * Pad given coord with ' ' till its length == width. Returns undefined if
+     * width is not supplied.
+     */
+    formatCoords (coord, width) {
+        if (width) {
+            let padding = width - coord.toString().length;
+            return Array(padding + 1).join(' ').concat([coord]);
+        }
+    }
+
+    spanCoords (text) {
+        return <span className="hsp-coords">{text}</span>
+    }
+}
+
+// Redraw if window resized.
+$(window).resize(_.debounce(function () {
+    _.each(HSPComponents, (comp) => {
+        comp.draw();
+    });
+}, 100));

data/public/js/kablammo.js

@@ -19,7 +19,7 @@ import * as Helpers from './visualisation_helpers';
 
 class Graph {
   static name() {
-    return 'Matching region(s)';
+    return 'Graphical overview of aligning region(s)';
   }
 
   static className() {
@@ -36,7 +36,7 @@ class Graph {
 
   constructor($svgContainer, props) {
     this._zoom_scale_by = 1.4;
-    this._padding_x = 17.5;
+    this._padding_x = 12;
     this._padding_y = 50;
 
     this._canvas_height = $svgContainer.height();
@@ -212,7 +212,7 @@ class Graph {
                  var a = self._scales.query.height;
                  var b = self._scales.subject.height;
                  var middle = ( b - a ) / 2;
-                 return a + middle + 5; // + 5 for font-height 10px
+                 return a + middle + 2; // for font-height 10px
              })
              .text(function(hsp) {
                return Helpers.toLetters(hsp.number)

data/public/js/report.js

@@ -7,9 +7,11 @@ import HitsOverview from './hits_overview';
 import LengthDistribution from './length_distribution'; // length distribution of hits
 import HSPOverview from './kablammo';
 import AlignmentExporter from './alignment_exporter'; // to download textual alignment
+import HSP from './hsp';
 import './sequence';
 
 import * as Helpers from './visualisation_helpers'; // for toLetters
+import Utils from './utils'; // to use as mixin in Hit and HitsTable
 import showErrorModal from './error_modal';
 
 /**
@@ -29,296 +31,557 @@ var downloadFASTA = function (sequence_ids, database_ids) {
 }
 
 /**
- * Pretty formats number
+ * Base component of report page. This component is later rendered into page's
+ * '#view' element.
  */
-var Utils = {
+var Page = React.createClass({
+    render: function () {
+        return (
+            <div>
+                {/* Provide bootstrap .container element inside the #view for
+                    the Report component to render itself in. */}
+                <div className="container"><Report ref="report"/></div>
+
+                {/* Required by Grapher for SVG and PNG download */}
+                <canvas id="png-exporter" hidden></canvas>
+            </div>
+        );
+    }
+});
+
+/**
+ * Renders entire report.
+ *
+ * Composed of Query and Sidebar components.
+ */
+var Report = React.createClass({
+
+    // Model //
+
+    getInitialState: function () {
+        this.fetchResults();
+        this.updateCycle = 0;
+
+        return {
+            search_id:       '',
+            program:         '',
+            program_version: '',
+            submitted_at:    '',
+            queries:         [],
+            querydb:         [],
+            params:          [],
+            stats:           []
+        };
+    },
 
     /**
-     * Render URL for sequence-viewer.
+     * Fetch results.
      */
-    a: function (link) {
-        if (link.title && link.url)
-        {
-            return (
-                <a href={link.url} className={link.class} target='_blank'>
-                    {link.icon && <i className={"fa " + link.icon}></i>}
-                    {" " + link.title + " "}
-                </a>
-            );
+    fetchResults: function () {
+        var intervals = [200, 400, 800, 1200, 2000, 3000, 5000];
+        var component = this;
+
+        function poll () {
+            $.getJSON(location.pathname + '.json')
+                .complete(function (jqXHR) {
+                    switch (jqXHR.status) {
+                        case 202:
+                            var interval;
+                            if (intervals.length === 1) {
+                                interval = intervals[0];
+                            }
+                            else {
+                                interval = intervals.shift();
+                            }
+                            setTimeout(poll, interval);
+                            break;
+                        case 200:
+                            component.updateState(jqXHR.responseJSON);
+                            break;
+                        case 404:
+                        case 400:
+                        case 500:
+                            showErrorModal(jqXHR.responseJSON);
+                            break;
+                    }
+                });
         }
+
+        poll();
     },
 
+    /**
+     * Incrementally update state so that the rendering process is
+     * not overwhelemed when there are too many queries.
+     */
+    updateState: function(responseJSON) {
+        var queries = responseJSON.queries;
+
+        // Render results for first 50 queries and set flag if total queries is
+        // more than 250.
+        var numHits = 0;
+        responseJSON.veryBig = queries.length > 250;
+        //responseJSON.veryBig = !_.every(queries, (query) => {
+            //numHits += query.hits.length;
+            //return (numHits <= 500);
+        //});
+        responseJSON.queries = queries.splice(0, 50);
+        this.setState(responseJSON);
+
+        // Render results for remaining queries.
+        var update = function () {
+            if (queries.length > 0) {
+                this.setState({
+                    queries: this.state.queries.concat(queries.splice(0, 50))
+                });
+                setTimeout(update.bind(this), 500);
+            }
+            else {
+                this.componentFinishedUpdating();
+            }
+        };
+        setTimeout(update.bind(this), 500);
+    },
 
-    /***********************************
-     * Formatters for hits & hsp table *
-     ***********************************/
 
-    // Formats an array of two elements as "first (last)".
-    format_2_tuple: function (tuple) {
-        return (tuple[0] + " (" + tuple[tuple.length - 1] + ")");
+    // View //
+    render: function () {
+        return this.isResultAvailable() ?
+            this.resultsJSX() : this.loadingJSX();
     },
 
     /**
-     * Returns fraction as percentage
+     * Returns loading message
      */
-    inPercentage: function (num , den) {
-        return (num * 100.0 / den).toFixed(2);
+    loadingJSX: function () {
+        return (
+            <div
+                className="row">
+                <div
+                    className="col-md-6 col-md-offset-3 text-center">
+                    <h1>
+                        <i className="fa fa-cog fa-spin"></i>&nbsp; BLAST-ing
+                    </h1>
+                    <p>
+                        <br/>
+                        This can take some time depending on the size of your query and
+                        database(s). The page will update automatically when BLAST is
+                        done.
+                        <br/>
+                        <br/>
+                        You can bookmark the page and come back to it later or share
+                        the link with someone.
+                    </p>
+                </div>
+            </div>
+        );
     },
 
     /**
-     * Returns fractional representation as String.
+     * Return results JSX.
      */
-    inFraction: function (num , den) {
-        return num + "/" + den;
+    resultsJSX: function () {
+        return (
+            <div className="row">
+                { this.shouldShowSidebar() &&
+                    (
+                        <div
+                            className="col-md-3 hidden-sm hidden-xs">
+                            <SideBar data={this.state} shouldShowIndex={this.shouldShowIndex()}/>
+                        </div>
+                    )
+                }
+                <div className={this.shouldShowSidebar() ?
+                    'col-md-9' : 'col-md-12'}>
+                    { this.overviewJSX() }
+                    { this.isHitsAvailable() 
+                    ? <Circos queries={this.state.queries}
+                        program={this.state.program} collapsed="true"/> 
+                    : <span></span> }
+                    {
+                        _.map(this.state.queries, _.bind(function (query) {
+                            return (
+                                <Query key={"Query_"+query.id} query={query} data={this.state}
+                                    selectHit={this.selectHit}/>
+                                );
+                        }, this))
+                    }
+                </div>
+            </div>
+        );
     },
 
     /**
-     * Returns given Float as String formatted to two decimal places.
+     * Renders report overview.
      */
-    inTwoDecimal: function (num) {
-        return num.toFixed(2)
+    overviewJSX: function () {
+        return (
+            <div className="overview">
+                <pre className="pre-reset">
+                    {this.state.program_version}{this.state.submitted_at
+                            && `; query submitted on ${this.state.submitted_at}`}
+                    <br/>
+                    Databases ({this.state.stats.nsequences} sequences,&nbsp;
+                    {this.state.stats.ncharacters} characters): {
+                        this.state.querydb.map((db) => { return db.title }).join(", ")
+                    }
+                    <br/>
+                    Parameters: {
+                        _.map(this.state.params, function (val, key) {
+                            return key + " " + val;
+                        }).join(", ")
+                    }
+                </pre>
+            </div>
+        );
     },
 
+
+    // Controller //
+
     /**
-     * Returns zero if num is zero. Returns two decimal representation of num
-     * if num is between [1..10). Returns num in scientific notation otherwise.
+     * Returns true if results have been fetched.
+     *
+     * A holding message is shown till results are fetched.
      */
-    inExponential: function (num) {
-        // Nothing to do if num is 0.
-        if (num === 0) {
-            return 0
-        }
+    isResultAvailable: function () {
+        return this.state.queries.length >= 1;
+    },
 
-        // Round to two decimal places if in the rane [1..10).
-        if (num >= 1 && num < 10)
-        {
-            return this.inTwoDecimal(num)
-        }
+    isHitsAvailable: function () {
+        var cnt = 0;
+        _.each(this.state.queries, function (query) {
+            if(query.hits.length == 0) cnt++;
+        });
+        return !(cnt == this.state.queries.length);
+    },
 
-        // Return numbers in the range [0..1) and [10..Inf] in
-        // scientific format.
-        var exp = num.toExponential(2);
-        var parts = exp.split("e");
-        var base  = parts[0];
-        var power = parts[1];
-        return <span>{base} &times; 10<sup>{power}</sup></span>;
-    }
-};
+    /**
+     * Returns true if sidebar should be shown.
+     *
+     * Sidebar is not shown if there is only one query and there are no hits
+     * corresponding to the query.
+     */
+    shouldShowSidebar: function () {
+        return !(this.state.queries.length == 1 &&
+                 this.state.queries[0].hits.length == 0);
+    },
 
-/**
- * Component for sequence-viewer links.
- */
-var SequenceViewer = (function () {
+    /**
+     * Returns true if index should be shown in the sidebar.
+     *
+     * Index is not shown in the sidebar if there are more than eight queries
+     * in total.
+     */
+    shouldShowIndex: function () {
+        return this.state.queries.length <= 8;
+    },
 
-    var Viewer = React.createClass({
+    /**
+     * Called after first call to render. The results may not be available at
+     * this stage and thus results DOM cannot be scripted here, unless using
+     * delegated events bound to the window, document, or body.
+     */
+    componentDidMount: function () {
+        // This sets up an event handler which enables users to select text
+        // from hit header without collapsing the hit.
+        this.preventCollapseOnSelection();
+    },
 
-        /**
-         * The CSS class name that will be assigned to the widget container. ID
-         * assigned to the widget container is derived from the same.
-         */
-        widgetClass: 'biojs-vis-sequence',
+    /**
+     * Called after each state change. Only a part of results DOM may be
+     * available after a state change.
+     */
+    componentDidUpdate: function () {
+        // We track the number of updates to the component.
+        this.updateCycle += 1;
 
-        // Lifecycle methods. //
+        // Lock sidebar in its position on first update of
+        // results DOM.
+        if (this.updateCycle === 1 ) this.affixSidebar();
+    },
 
-        render: function () {
-            this.widgetID =
-                this.widgetClass + '-' + (new Date().getUTCMilliseconds());
+    /**
+     * Prevents folding of hits during text-selection, etc.
+     */
 
-            return (
-                <div
-                    className="fastan">
-                    <div
-                        className="section-header">
-                        <h4>
-                            {this.props.sequence.id}
-                            <small>
-                                &nbsp; {this.props.sequence.title}
-                            </small>
-                        </h4>
-                    </div>
-                    <div
-                        className="section-content">
-                        <div
-                            className={this.widgetClass} id={this.widgetID}>
-                        </div>
-                    </div>
-                </div>
-            );
-        },
+    /**
+     * Called after all results have been rendered.
+     */
+    componentFinishedUpdating: function () {
+        this.shouldShowIndex() && this.setupScrollSpy();
+    },
 
-        componentDidMount: function () {
-            // attach BioJS sequence viewer
-            var widget = new Sequence({
-                sequence: this.props.sequence.value,
-                target: this.widgetID,
-                format: 'PRIDE',
-                columns: {
-                    size: 40,
-                    spacedEach: 5
-                },
-                formatOptions: {
-                    title: false,
-                    footer: false
+    /**
+     * Prevents folding of hits during text-selection.
+     */
+    preventCollapseOnSelection: function () {
+        $('body').on('mousedown', ".hit > .section-header > h4", function (event) {
+            var $this = $(this);
+            $this.on('mouseup mousemove', function handler(event) {
+                if (event.type === 'mouseup') {
+                    // user wants to toggle
+                    $this.attr('data-toggle', 'collapse');
+                    $this.find('.fa-chevron-down').toggleClass('fa-rotate-270');
+                } else {
+                    // user wants to select
+                    $this.attr('data-toggle', '');
                 }
+                $this.off('mouseup mousemove', handler);
             });
-            widget.hideFormatSelector();
-        }
-    });
-
-    return React.createClass({
-
-        // Kind of public API. //
-
-        /**
-         * Shows sequence viewer.
-         */
-        show: function () {
-            this.modal().modal('show');
-        },
-
-
-        // Internal helpers. //
-
-        modal: function () {
-            return $(React.findDOMNode(this.refs.modal));
-        },
+        });
+    },
 
-        resultsJSX: function () {
-            return (
-                <div className="modal-body">
-                    {
-                        _.map(this.state.error_msgs, _.bind(function (error_msg) {
-                            return (
-                                <div
-                                    className="fastan">
-                                    <div
-                                        className="section-header">
-                                        <h4>
-                                            {error_msg[0]}
-                                        </h4>
-                                    </div>
-                                    <div
-                                        className="section-content">
-                                        <pre
-                                            className="pre-reset">
-                                            {error_msg[1]}
-                                        </pre>
-                                    </div>
-                                </div>
-                            );
-                        }, this))
-                    }
-                    {
-                        _.map(this.state.sequences, _.bind(function (sequence) {
-                            return (<Viewer sequence={sequence}/>);
-                        }, this))
-                    }
-                </div>
-            );
-        },
+    /**
+     * Affixes the sidebar.
+     */
+    affixSidebar: function () {
+        var $sidebar = $('.sidebar');
+        $sidebar.affix({
+            offset: {
+                top: $sidebar.offset().top
+            }
+        });
+    },
 
-        loadingJSX: function () {
-            return (
-                <div className="modal-body text-center">
-                    <i className="fa fa-spinner fa-3x fa-spin"></i>
-                </div>
-            );
-        },
+    /**
+     * For the query in viewport, highlights corresponding entry in the index.
+     */
+    setupScrollSpy: function () {
+        $('body').scrollspy({target: '.sidebar'});
+    },
 
+    /**
+     * Event-handler when hit is selected
+     * Adds glow to hit component.
+     * Updates number of Fasta that can be downloaded
+     */
+    selectHit: function (id) {
 
-        // Lifecycle methods. //
+        var checkbox = $("#" + id);
+        var num_checked  = $('.hit-links :checkbox:checked').length;
 
-        getInitialState: function () {
-            return {
-                error_msgs: [],
-                sequences:  [],
-                requestCompleted: false
-            };
-        },
+        if (!checkbox || !checkbox.val()) {
+            return;
+        }
 
-        render: function () {
-            return (
-                <div
-                    className="modal sequence-viewer"
-                    ref="modal" tabIndex="-1">
-                    <div
-                        className="modal-dialog">
-                        <div
-                            className="modal-content">
-                            <div
-                                className="modal-header">
-                                <h3>View sequence</h3>
-                            </div>
+        var $hit = $(checkbox.data('target'));
 
-                            { this.state.requestCompleted &&
-                                    this.resultsJSX() || this.loadingJSX() }
-                        </div>
-                    </div>
-                </div>
-            );
-        },
+        // Highlight selected hit and sync checkboxes if sequence viewer is open.
+        if (checkbox.is(":checked")) {
+            $hit
+            .addClass('glow')
+            .find(":checkbox").not(checkbox).check();
+            var $a = $('.download-fasta-of-selected');
+            var $b = $('.download-alignment-of-selected');
+            $b.enable()
+            var $n = $a.find('span');
+            $a
+            .enable()
+        }
 
-        componentDidMount: function () {
-            // Display modal with a spinner.
-            this.show();
+        else {
+            $hit
+            .removeClass('glow')
+            .find(":checkbox").not(checkbox).uncheck();
+        }
 
-            // Fetch sequence and update state.
-            $.getJSON(this.props.url)
-                .done(_.bind(function (response) {
-                    this.setState({
-                        sequences: response.sequences,
-                        error_msgs: response.error_msgs,
-                        requestCompleted: true
-                    })
-                }, this))
-                .fail(function (jqXHR, status, error) {
-                    showErrorModal(jqXHR, function () {
-                        this.hide();
-                    });
-                });
+        if (num_checked >= 1)
+        {
+            var $a = $('.download-fasta-of-selected');
+            var $b = $('.download-alignment-of-selected');
+            $a.find('.text-bold').html(num_checked);
+            $b.find('.text-bold').html(num_checked);
+        }
 
-            this.modal().on('hidden.bs.modal', this.props.onHide);
-        },
-    });
-})();
+        if (num_checked == 0) {
+            var $a = $('.download-fasta-of-selected');
+            var $b = $('.download-alignment-of-selected');
+            $a.addClass('disabled').find('.text-bold').html('');
+            $b.addClass('disabled').find('.text-bold').html('');
+        }
+    },
+});
 
 /**
- * Component for each hit.
+ * Renders report for each query sequence.
+ *
+ * Composed of graphical overview, tabular summary (HitsTable),
+ * and a list of Hits.
  */
-var Hit = React.createClass({
-    mixins: [Utils],
+var Query = React.createClass({
 
-    /**
-     * Returns accession number of the hit sequence.
-     */
-    accession: function () {
-        return this.props.hit.accession;
-    },
+    // Kind of public API //
 
     /**
-     * Returns length of the hit sequence.
+     * Returns the id of query.
      */
-    length: function () {
-        return this.props.hit.length;
+    domID: function () {
+        return "Query_" + this.props.query.number;
     },
 
-    // Internal helpers. //
-
     /**
-     * Returns id that will be used for the DOM node corresponding to the hit.
+     * Returns number of hits.
      */
-    domID: function () {
-        return "Query_" + this.props.query.number + "_hit_" + this.props.hit.number;
-    },
-
-    databaseIDs: function () {
-        return _.map(this.props.querydb, _.iteratee('id'));
+    numhits: function () {
+        return this.props.query.hits.length;
     },
 
-    showSequenceViewer: function (event) {
-        this.setState({ showSequenceViewer: true });
-        event && event.preventDefault();
-    },
+    // Life cycle methods //
+
+    render: function () {
+        return (
+            <div
+                className="resultn" id={this.domID()}
+                data-query-len={this.props.query.length}
+                data-algorithm={this.props.data.program}>
+                <div
+                    className="section-header">
+                    <h3>
+                        Query= {this.props.query.id}
+                        &nbsp;
+                        <small>
+                            {this.props.query.title}
+                        </small>
+                    </h3>
+                    <span
+                        className="label label-reset pos-label"
+                        title={"Query" + this.props.query.number + "."}
+                        data-toggle="tooltip">
+                        {this.props.query.number + "/" + this.props.data.queries.length}
+                    </span>
+                </div>
+                {this.numhits() &&
+                    (
+                        <div className="section-content">
+                            <HitsOverview key={"GO_"+this.props.query.number} query={this.props.query} program={this.props.data.program} collapsed={this.props.data.veryBig}/>
+                            <LengthDistribution key={"LD_"+this.props.query.id} query={this.props.query} algorithm={this.props.data.program} collapsed="true"/>
+                            <HitsTable key={"HT_"+this.props.query.number} query={this.props.query}/>
+                            <div
+                                id="hits">
+                                {
+                                    _.map(this.props.query.hits, _.bind(function (hit) {
+                                        return (
+                                            <Hit
+                                                hit={hit}
+                                                key={"HIT_"+hit.number}
+                                                algorithm={this.props.data.program}
+                                                querydb={this.props.data.querydb}
+                                                query={this.props.query}
+                                                selectHit={this.props.selectHit}/>
+                                        );
+                                    }, this))
+                                }
+                            </div>
+                        </div>
+                    ) || (
+                        <div
+                            className="section-content">
+                            <p>
+                                Query length: {this.props.query.length}
+                            </p>
+                            <br/>
+                            <br/>
+                            <p>
+                                <strong> ****** No hits found ****** </strong>
+                            </p>
+                        </div>
+                    )
+                }
+            </div>
+        )
+    },
+});
+
+/**
+ * Renders summary of all hits per query in a tabular form.
+ */
+var HitsTable = React.createClass({
+    mixins: [Utils],
+    render: function () {
+        var count = 0,
+          hasName = _.every(this.props.query.hits, function(hit) {
+            return hit.sciname !== '';
+          });
+
+        return (
+            <table
+                className="table table-hover table-condensed tabular-view">
+                <thead>
+                    <th className="text-left">#</th>
+                    <th>Similar sequences</th>
+                    {hasName && <th className="text-left">Species</th>}
+                    <th className="text-right">Query coverage (%)</th>
+                    <th className="text-right">Total score</th>
+                    <th className="text-right">E value</th>
+                    <th className="text-right" data-toggle="tooltip"
+                        data-placement="left" title="Total identity of all hsps / total length of all hsps">
+                        Identity (%)
+                    </th>
+                </thead>
+                <tbody>
+                    {
+                        _.map(this.props.query.hits, _.bind(function (hit) {
+                            return (
+                                <tr key={hit.number}>
+                                    <td className="text-left">{hit.number + "."}</td>
+                                    <td>
+                                        <a href={"#Query_" + this.props.query.number + "_hit_" + hit.number}>
+                                            {hit.id}
+                                        </a>
+                                    </td>
+                                    {hasName && <td className="text-left">{hit.sciname}</td>}
+                                    <td className="text-right">{hit.qcovs}</td>
+                                    <td className="text-right">{hit.score}</td>
+                                    <td className="text-right">{this.inExponential(hit.hsps[0].evalue)}</td>
+                                    <td className="text-right">{hit.identity}</td>
+                                </tr>
+                            )
+                        }, this))
+                    }
+                </tbody>
+            </table>
+        );
+    }
+});
+
+/**
+ * Component for each hit.
+ */
+var Hit = React.createClass({
+    mixins: [Utils],
+
+    /**
+     * Returns accession number of the hit sequence.
+     */
+    accession: function () {
+        return this.props.hit.accession;
+    },
+
+    /**
+     * Returns length of the hit sequence.
+     */
+    length: function () {
+        return this.props.hit.length;
+    },
+
+    // Internal helpers. //
+
+    /**
+     * Returns id that will be used for the DOM node corresponding to the hit.
+     */
+    domID: function () {
+        return "Query_" + this.props.query.number + "_hit_" + this.props.hit.number;
+    },
+
+    databaseIDs: function () {
+        return _.map(this.props.querydb, _.iteratee('id'));
+    },
+
+    showSequenceViewer: function (event) {
+        this.setState({ showSequenceViewer: true });
+        event && event.preventDefault();
+    },
 
     hideSequenceViewer: function () {
         this.setState({ showSequenceViewer: false });
@@ -346,67 +609,6 @@ var Hit = React.createClass({
         aln_exporter.export_alignments(hsps, this.props.query.id+"_"+this.props.hit.id);
     },
 
-    /**
-     * Return prettified stats for the given hsp and based on the BLAST
-     * algorithm.
-     */
-    getHSPStats: function (hsp) {
-        var stats = {
-            'Score': this.format_2_tuple([
-                this.inTwoDecimal(hsp.bit_score),
-                hsp.score
-            ]),
-
-            'E value': this.inExponential(hsp.evalue),
-
-            'Identities': this.format_2_tuple([
-                this.inFraction(hsp.identity, hsp.length),
-                this.inPercentage(hsp.identity, hsp.length)
-            ]),
-
-            'Gaps': this.format_2_tuple([
-                this.inFraction(hsp.gaps, hsp.length),
-                this.inPercentage(hsp.gaps, hsp.length)
-            ]),
-
-            'Coverage': hsp.qcovhsp
-        };
-
-        switch (this.props.algorithm) {
-        case 'tblastx':
-            _.extend(stats, {
-                'Frame': this.inFraction(hsp.qframe, hsp.sframe)
-            });
-            // fall-through
-        case 'blastp':
-            _.extend(stats, {
-                'Positives': this.format_2_tuple([
-                    this.inFraction(hsp.positives, hsp.length),
-                    this.inPercentage(hsp.positives, hsp.length)
-                ])
-            });
-            break;
-        case 'blastn':
-            _.extend(stats, {
-                'Strand': (hsp.qframe > 0 ? '+' : '-') +
-                          "/"                          +
-                          (hsp.sframe > 0 ? '+' : '-')
-            });
-            break;
-        case 'blastx':
-            _.extend(stats, {
-                'Query Frame': hsp.qframe
-            });
-            break;
-        case 'tblastn':
-            _.extend(stats, {
-                'Hit Frame': hsp.sframe
-            });
-            break;
-        }
-
-        return stats;
-    },
 
     // Life cycle methods //
 
@@ -515,206 +717,200 @@ var Hit = React.createClass({
                     <HSPOverview key={"kablammo"+this.props.query.id}
                         query={this.props.query} hit={this.props.hit}
                         algorithm={this.props.algorithm}/>
-                    <table
-                      className="table hsps">
-                        <tbody>
-                            {
-                                _.map (this.props.hit.hsps, _.bind( function (hsp) {
-                                    stats_returned = this.getHSPStats(hsp);
-                                    return (
-                                        <tr
-                                          id={"Alignment_Query_" + this.props.query.number + "_hit_"
-                                                  + this.props.hit.number + "_" + hsp.number}
-                                          key={"Query_"+this.props.query.id+"_Hit_"+this.props.hit.id+"_"+hsp.number}>
-                                            <td>
-                                                {Helpers.toLetters(hsp.number) + "."}
-                                            </td>
-                                            <td
-                                                style={{width: "100%"}}>
-                                                <div
-                                                    className="hsp"
-                                                    id={"Query_" + this.props.query.number + "_hit_"
-                                                         + this.props.hit.number + "_" + hsp.number}
-                                                    data-hsp-evalue={hsp.evalue}
-                                                    data-hsp-start={hsp.qstart}
-                                                    data-hsp-end={hsp.qend}
-                                                    data-hsp-frame={hsp.sframe}>
-                                                    <table
-                                                      className="table table-condensed hsp-stats">
-                                                        <thead>
-                                                        {
-                                                            _.map(stats_returned, function (value , key) {
-                                                                return(<th key={value+"_"+key}>{key}</th>);
-                                                            })
-                                                        }
-                                                        </thead>
-                                                        <tbody>
-                                                            <tr>
-                                                                {
-                                                                    _.map(stats_returned, _.bind(function (value, key) {
-                                                                        return(<th key={value+"_"+key}>{value}</th>);
-                                                                    }, this))
-                                                                }
-                                                            </tr>
-                                                        </tbody>
-                                                    </table>
-                                                    <div className="alignment">{hsp.pp}</div>
-                                                </div>
-                                            </td>
-                                        </tr>
-                                    )
-                                }, this))
-                            }
-                        </tbody>
-                    </table>
+                    { this.hspListJSX() }
                 </div>
             </div>
         );
-    }
-});
-
-/**
- * Renders summary of all hits per query in a tabular form.
- */
-var HitsTable = React.createClass({
-    mixins: [Utils],
-    render: function () {
-        var count = 0,
-          hasName = _.every(this.props.query.hits, function(hit) {
-            return hit.sciname !== '';
-          });
+    },
 
-        return (
-            <table
-                className="table table-hover table-condensed tabular-view">
-                <thead>
-                    <th className="text-left">#</th>
-                    <th>Similar sequences</th>
-                    {hasName && <th className="text-left">Species</th>}
-                    <th className="text-right">Query coverage (%)</th>
-                    <th className="text-right">Total score</th>
-                    <th className="text-right">E value</th>
-                    <th className="text-right" data-toggle="tooltip"
-                        data-placement="left" title="Total identity of all hsps / total length of all hsps">
-                        Identity (%)
-                    </th>
-                </thead>
-                <tbody>
-                    {
-                        _.map(this.props.query.hits, _.bind(function (hit) {
-                            return (
-                                <tr key={hit.number}>
-                                    <td className="text-left">{hit.number + "."}</td>
-                                    <td>
-                                        <a href={"#Query_" + this.props.query.number + "_hit_" + hit.number}>
-                                            {hit.id}
-                                        </a>
-                                    </td>
-                                    {hasName && <td className="text-left">{hit.sciname}</td>}
-                                    <td className="text-right">{hit.qcovs}</td>
-                                    <td className="text-right">{hit.score}</td>
-                                    <td className="text-right">{this.inExponential(hit.hsps[0].evalue)}</td>
-                                    <td className="text-right">{hit.identity}</td>
-                                </tr>
-                            )
-                        }, this))
-                    }
-                </tbody>
-            </table>
-        );
+    hspListJSX: function () {
+        return <div className="hsps">
+            {
+                this.props.hit.hsps.map((hsp) => {
+                    return <HSP algorithm={this.props.algorithm} hsp={hsp}
+                        query={this.props.query} hit={this.props.hit}/>}, this)
+            }
+        </div>
     }
 });
 
+
 /**
- * Renders report for each query sequence.
- *
- * Composed of graphical overview, tabular summary (HitsTable),
- * and a list of Hits.
+ * Component for sequence-viewer links.
  */
-var Query = React.createClass({
+var SequenceViewer = (function () {
 
-    // Kind of public API //
+    var Viewer = React.createClass({
 
-    /**
-     * Returns the id of query.
-     */
-    domID: function () {
-        return "Query_" + this.props.query.number;
-    },
+        /**
+         * The CSS class name that will be assigned to the widget container. ID
+         * assigned to the widget container is derived from the same.
+         */
+        widgetClass: 'biojs-vis-sequence',
 
-    /**
-     * Returns number of hits.
-     */
-    numhits: function () {
-        return this.props.query.hits.length;
-    },
+        // Lifecycle methods. //
 
-    // Life cycle methods //
+        render: function () {
+            this.widgetID =
+                this.widgetClass + '-' + (new Date().getUTCMilliseconds());
 
-    render: function () {
-        return (
-            <div
-                className="resultn" id={this.domID()}
-                data-query-len={this.props.query.length}
-                data-algorithm={this.props.data.program}>
+            return (
                 <div
-                    className="section-header">
-                    <h3>
-                        Query= {this.props.query.id}
-                        &nbsp;
-                        <small>
-                            {this.props.query.title}
-                        </small>
-                    </h3>
-                    <span
-                        className="label label-reset pos-label"
-                        title={"Query" + this.props.query.number + "."}
-                        data-toggle="tooltip">
-                        {this.props.query.number + "/" + this.props.data.queries.length}
-                    </span>
+                    className="fastan">
+                    <div
+                        className="section-header">
+                        <h4>
+                            {this.props.sequence.id}
+                            <small>
+                                &nbsp; {this.props.sequence.title}
+                            </small>
+                        </h4>
+                    </div>
+                    <div
+                        className="section-content">
+                        <div
+                            className={this.widgetClass} id={this.widgetID}>
+                        </div>
+                    </div>
                 </div>
-                {this.numhits() &&
-                    (
-                        <div className="section-content">
-                            <HitsOverview key={"GO_"+this.props.query.number} query={this.props.query} program={this.props.data.program} collapsed={this.props.data.veryBig}/>
-                            <LengthDistribution key={"LD_"+this.props.query.id} query={this.props.query} algorithm={this.props.data.program} collapsed="true"/>
-                            <HitsTable key={"HT_"+this.props.query.number} query={this.props.query}/>
+            );
+        },
+
+        componentDidMount: function () {
+            // attach BioJS sequence viewer
+            var widget = new Sequence({
+                sequence: this.props.sequence.value,
+                target: this.widgetID,
+                format: 'PRIDE',
+                columns: {
+                    size: 40,
+                    spacedEach: 5
+                },
+                formatOptions: {
+                    title: false,
+                    footer: false
+                }
+            });
+            widget.hideFormatSelector();
+        }
+    });
+
+    return React.createClass({
+
+        // Kind of public API. //
+
+        /**
+         * Shows sequence viewer.
+         */
+        show: function () {
+            this.modal().modal('show');
+        },
+
+
+        // Internal helpers. //
+
+        modal: function () {
+            return $(React.findDOMNode(this.refs.modal));
+        },
+
+        resultsJSX: function () {
+            return (
+                <div className="modal-body">
+                    {
+                        _.map(this.state.error_msgs, _.bind(function (error_msg) {
+                            return (
+                                <div
+                                    className="fastan">
+                                    <div
+                                        className="section-header">
+                                        <h4>
+                                            {error_msg[0]}
+                                        </h4>
+                                    </div>
+                                    <div
+                                        className="section-content">
+                                        <pre
+                                            className="pre-reset">
+                                            {error_msg[1]}
+                                        </pre>
+                                    </div>
+                                </div>
+                            );
+                        }, this))
+                    }
+                    {
+                        _.map(this.state.sequences, _.bind(function (sequence) {
+                            return (<Viewer sequence={sequence}/>);
+                        }, this))
+                    }
+                </div>
+            );
+        },
+
+        loadingJSX: function () {
+            return (
+                <div className="modal-body text-center">
+                    <i className="fa fa-spinner fa-3x fa-spin"></i>
+                </div>
+            );
+        },
+
+
+        // Lifecycle methods. //
+
+        getInitialState: function () {
+            return {
+                error_msgs: [],
+                sequences:  [],
+                requestCompleted: false
+            };
+        },
+
+        render: function () {
+            return (
+                <div
+                    className="modal sequence-viewer"
+                    ref="modal" tabIndex="-1">
+                    <div
+                        className="modal-dialog">
+                        <div
+                            className="modal-content">
                             <div
-                                id="hits">
-                                {
-                                    _.map(this.props.query.hits, _.bind(function (hit) {
-                                        return (
-                                            <Hit
-                                                hit={hit}
-                                                key={"HIT_"+hit.number}
-                                                algorithm={this.props.data.program}
-                                                querydb={this.props.data.querydb}
-                                                query={this.props.query}
-                                                selectHit={this.props.selectHit}/>
-                                        );
-                                    }, this))
-                                }
+                                className="modal-header">
+                                <h3>View sequence</h3>
                             </div>
+
+                            { this.state.requestCompleted &&
+                                    this.resultsJSX() || this.loadingJSX() }
                         </div>
-                    ) || (
-                        <div
-                            className="section-content">
-                            <p>
-                                Query length: {this.props.query.length}
-                            </p>
-                            <br/>
-                            <br/>
-                            <p>
-                                <strong> ****** No hits found ****** </strong>
-                            </p>
-                        </div>
-                    )
-                }
-            </div>
-        )
-    },
-});
+                    </div>
+                </div>
+            );
+        },
+
+        componentDidMount: function () {
+            // Display modal with a spinner.
+            this.show();
+
+            // Fetch sequence and update state.
+            $.getJSON(this.props.url)
+                .done(_.bind(function (response) {
+                    this.setState({
+                        sequences: response.sequences,
+                        error_msgs: response.error_msgs,
+                        requestCompleted: true
+                    })
+                }, this))
+                .fail(function (jqXHR, status, error) {
+                    showErrorModal(jqXHR, function () {
+                        this.hide();
+                    });
+                });
 
+            this.modal().on('hidden.bs.modal', this.props.onHide);
+        },
+    });
+})();
 
 /**
  * Renders links for downloading hit information in different formats.
@@ -912,382 +1108,4 @@ var SideBar = React.createClass({
     },
 });
 
-/**
- * Renders entire report.
- *
- * Composed of Query and Sidebar components.
- */
-var Report = React.createClass({
-
-    // Model //
-
-    getInitialState: function () {
-        this.fetchResults();
-        this.updateCycle = 0;
-
-        return {
-            search_id:       '',
-            program:         '',
-            program_version: '',
-            queries:         [],
-            querydb:         [],
-            params:          [],
-            stats:           []
-        };
-    },
-
-    /**
-     * Fetch results.
-     */
-    fetchResults: function () {
-        var intervals = [200, 400, 800, 1200, 2000, 3000, 5000];
-        var component = this;
-
-        function poll () {
-            $.getJSON(location.pathname + '.json')
-                .complete(function (jqXHR) {
-                    switch (jqXHR.status) {
-                        case 202:
-                            var interval;
-                            if (intervals.length === 1) {
-                                interval = intervals[0];
-                            }
-                            else {
-                                interval = intervals.shift();
-                            }
-                            setTimeout(poll, interval);
-                            break;
-                        case 200:
-                            component.updateState(jqXHR.responseJSON);
-                            break;
-                        case 404:
-                        case 400:
-                        case 500:
-                            showErrorModal(jqXHR.responseJSON);
-                            break;
-                    }
-                });
-        }
-
-        poll();
-    },
-
-    /**
-     * Incrementally update state so that the rendering process is
-     * not overwhelemed when there are too many queries.
-     */
-    updateState: function(responseJSON) {
-        var queries = responseJSON.queries;
-
-        // Render results for first 50 queries and set flag if total queries is
-        // more than 250.
-        var numHits = 0;
-        responseJSON.veryBig = queries.length > 250;
-        //responseJSON.veryBig = !_.every(queries, (query) => {
-            //numHits += query.hits.length;
-            //return (numHits <= 500);
-        //});
-        responseJSON.queries = queries.splice(0, 50);
-        this.setState(responseJSON);
-
-        // Render results for remaining queries.
-        var update = function () {
-            if (queries.length > 0) {
-                this.setState({
-                    queries: this.state.queries.concat(queries.splice(0, 50))
-                });
-                setTimeout(update.bind(this), 500);
-            }
-            else {
-                this.componentFinishedUpdating();
-            }
-        };
-        setTimeout(update.bind(this), 500);
-    },
-
-
-    // View //
-    render: function () {
-        return this.isResultAvailable() ?
-            this.resultsJSX() : this.loadingJSX();
-    },
-
-    /**
-     * Returns loading message
-     */
-    loadingJSX: function () {
-        return (
-            <div
-                className="row">
-                <div
-                    className="col-md-6 col-md-offset-3 text-center">
-                    <h1>
-                        <i
-                            className="fa fa-cog fa-spin"></i>&nbsp;
-                        BLAST-ing
-                    </h1>
-                    <p>
-                        <br/>
-                        This can take some time depending on the size of your query and
-                        database(s). The page will update automatically when BLAST is
-                        done.
-                        <br/>
-                        <br/>
-                        You can bookmark the page and come back to it later or share
-                        the link with someone.
-                    </p>
-                </div>
-            </div>
-        );
-    },
-
-    /**
-     * Return results JSX.
-     */
-    resultsJSX: function () {
-        return (
-            <div className="row">
-                { this.shouldShowSidebar() &&
-                    (
-                        <div
-                            className="col-md-3 hidden-sm hidden-xs">
-                            <SideBar data={this.state} shouldShowIndex={this.shouldShowIndex()}/>
-                        </div>
-                    )
-                }
-                <div className={this.shouldShowSidebar() ?
-                    'col-md-9' : 'col-md-12'}>
-                    { this.overviewJSX() }
-                    { this.isHitsAvailable() 
-                    ? <Circos queries={this.state.queries}
-                        program={this.state.program} collapsed="true"/> 
-                    : <span></span> }
-                    {
-                        _.map(this.state.queries, _.bind(function (query) {
-                            return (
-                                <Query key={"Query_"+query.id} query={query} data={this.state}
-                                    selectHit={this.selectHit}/>
-                                );
-                        }, this))
-                    }
-                </div>
-            </div>
-        );
-    },
-
-    /**
-     * Renders report overview.
-     */
-    overviewJSX: function () {
-        return (
-            <div
-                className="overview">
-                <pre
-                    className="pre-reset">
-                    {this.state.program_version}
-                    <br/>
-                    <br/>
-                    {
-                        _.map(this.state.querydb, function (db) {
-                            return db.title;
-                        }).join(", ")
-                    }
-                    <br/>
-                    Total: {this.state.stats.nsequences} sequences,
-                    {this.state.stats.ncharacters} characters
-                    <br/>
-                    <br/>
-                    {
-                        _.map(this.state.params, function (val, key) {
-                            return key + " " + val;
-                        }).join(", ")
-                    }
-                </pre>
-            </div>
-        );
-    },
-
-
-    // Controller //
-
-    /**
-     * Returns true if results have been fetched.
-     *
-     * A holding message is shown till results are fetched.
-     */
-    isResultAvailable: function () {
-        return this.state.queries.length >= 1;
-    },
-
-    isHitsAvailable: function () {
-        var cnt = 0;
-        _.each(this.state.queries, function (query) {
-            if(query.hits.length == 0) cnt++;
-        });
-        return !(cnt == this.state.queries.length);
-    },
-
-    /**
-     * Returns true if sidebar should be shown.
-     *
-     * Sidebar is not shown if there is only one query and there are no hits
-     * corresponding to the query.
-     */
-    shouldShowSidebar: function () {
-        return !(this.state.queries.length == 1 &&
-                 this.state.queries[0].hits.length == 0);
-    },
-
-    /**
-     * Returns true if index should be shown in the sidebar.
-     *
-     * Index is not shown in the sidebar if there are more than eight queries
-     * in total.
-     */
-    shouldShowIndex: function () {
-        return this.state.queries.length <= 8;
-    },
-
-    /**
-     * Called after first call to render. The results may not be available at
-     * this stage and thus results DOM cannot be scripted here, unless using
-     * delegated events bound to the window, document, or body.
-     */
-    componentDidMount: function () {
-        // This sets up an event handler which enables users to select text
-        // from hit header without collapsing the hit.
-        this.preventCollapseOnSelection();
-    },
-
-    /**
-     * Called after each state change. Only a part of results DOM may be
-     * available after a state change.
-     */
-    componentDidUpdate: function () {
-        // We track the number of updates to the component.
-        this.updateCycle += 1;
-
-        // Lock sidebar in its position on first update of
-        // results DOM.
-        if (this.updateCycle === 1 ) this.affixSidebar();
-    },
-
-    /**
-     * Prevents folding of hits during text-selection, etc.
-     */
-
-    /**
-     * Called after all results have been rendered.
-     */
-    componentFinishedUpdating: function () {
-        this.shouldShowIndex() && this.setupScrollSpy();
-    },
-
-    /**
-     * Prevents folding of hits during text-selection.
-     */
-    preventCollapseOnSelection: function () {
-        $('body').on('mousedown', ".hit > .section-header > h4", function (event) {
-            var $this = $(this);
-            $this.on('mouseup mousemove', function handler(event) {
-                if (event.type === 'mouseup') {
-                    // user wants to toggle
-                    $this.attr('data-toggle', 'collapse');
-                    $this.find('.fa-chevron-down').toggleClass('fa-rotate-270');
-                } else {
-                    // user wants to select
-                    $this.attr('data-toggle', '');
-                }
-                $this.off('mouseup mousemove', handler);
-            });
-        });
-    },
-
-    /**
-     * Affixes the sidebar.
-     */
-    affixSidebar: function () {
-        var $sidebar = $('.sidebar');
-        $sidebar.affix({
-            offset: {
-                top: $sidebar.offset().top
-            }
-        });
-    },
-
-    /**
-     * For the query in viewport, highlights corresponding entry in the index.
-     */
-    setupScrollSpy: function () {
-        $('body').scrollspy({target: '.sidebar'});
-    },
-
-    /**
-     * Event-handler when hit is selected
-     * Adds glow to hit component.
-     * Updates number of Fasta that can be downloaded
-     */
-    selectHit: function (id) {
-
-        var checkbox = $("#" + id);
-        var num_checked  = $('.hit-links :checkbox:checked').length;
-
-        if (!checkbox || !checkbox.val()) {
-            return;
-        }
-
-        var $hit = $(checkbox.data('target'));
-
-        // Highlight selected hit and sync checkboxes if sequence viewer is open.
-        if (checkbox.is(":checked")) {
-            $hit
-            .addClass('glow')
-            .find(":checkbox").not(checkbox).check();
-            var $a = $('.download-fasta-of-selected');
-            var $b = $('.download-alignment-of-selected');
-            $b.enable()
-            var $n = $a.find('span');
-            $a
-            .enable()
-        }
-
-        else {
-            $hit
-            .removeClass('glow')
-            .find(":checkbox").not(checkbox).uncheck();
-        }
-
-        if (num_checked >= 1)
-        {
-            var $a = $('.download-fasta-of-selected');
-            var $b = $('.download-alignment-of-selected');
-            $a.find('.text-bold').html(num_checked);
-            $b.find('.text-bold').html(num_checked);
-        }
-
-        if (num_checked == 0) {
-            var $a = $('.download-fasta-of-selected');
-            var $b = $('.download-alignment-of-selected');
-            $a.addClass('disabled').find('.text-bold').html('');
-            $b.addClass('disabled').find('.text-bold').html('');
-        }
-    },
-});
-
-var Page = React.createClass({
-    render: function () {
-        return (
-            <div>
-                <div className="container">
-                    <Report ref="report"/>
-                </div>
-
-                <div id='circos-demo' className='modal'></div>
-
-                <canvas id="png-exporter" hidden></canvas>
-            </div>
-        );
-    }
-});
-
 React.render(<Page/>, document.getElementById('view'));