sequenceserver 2.0.0.beta4 → 2.0.0.rc1

data/public/js/length_distribution.js

@@ -185,7 +185,7 @@ class Graph {
             .attr('class','bar')
             .attr('width',4)
             .attr('height',this._height)
-            .style('fill','rgb(95,122,183)');
+            .style('fill','#c74f14');
 
         query_line.append('text')
             .attr('dy', '0.75em')

data/public/js/query.js

@@ -0,0 +1,147 @@
+import React from 'react';
+import _ from 'underscore';
+
+import HitsOverview from './hits_overview';
+import LengthDistribution from './length_distribution'; // length distribution of hits
+import Utils from './utils'; // to use as mixin in HitsTable
+
+/**
+ * Query component displays query defline, graphical overview, length
+ * distribution, and hits table.
+ */
+export default React.createClass({
+
+    // Kind of public API //
+
+    /**
+     * Returns the id of query.
+     */
+    domID: function () {
+        return 'Query_' + this.props.query.number;
+    },
+
+    queryLength: function () {
+        return this.props.query.length;
+    },
+
+    /**
+     * Returns number of hits.
+     */
+    numhits: function () {
+        return this.props.query.hits.length;
+    },
+
+    // Life cycle methods //
+
+    render: function () {
+        return (
+            <div className="resultn" id={this.domID()}
+                data-query-len={this.props.query.length}
+                data-algorithm={this.props.program}>
+                { this.headerJSX() }
+                { this.numhits() && this.hitsListJSX() || this.noHitsJSX() }
+            </div>
+        );
+    },
+
+    headerJSX: function () {
+        var meta = `length: ${this.queryLength().toLocaleString()}`;
+        if (this.props.showQueryCrumbs) {
+            meta = `query ${this.props.query.number}, ` + meta;
+        }
+        return <div className="section-header">
+            <h3>
+                <strong>Query=&nbsp;{this.props.query.id}</strong>&nbsp;
+                {this.props.query.title}
+            </h3>
+            <span className="label label-reset pos-label">{ meta }</span>
+        </div>;
+    },
+
+    hitsListJSX: function () {
+        return <div className="section-content">
+            <HitsOverview key={'GO_' + this.props.query.number} query={this.props.query} program={this.props.program} collapsed={this.props.veryBig} />
+            <LengthDistribution key={'LD_' + this.props.query.id} query={this.props.query} algorithm={this.props.program} collapsed="true" />
+            <HitsTable key={'HT_' + this.props.query.number} query={this.props.query} imported_xml={this.props.imported_xml} />
+        </div>;
+    },
+
+    noHitsJSX: function () {
+        return <div className="section-content">
+            <strong> ****** No hits found ****** </strong>
+        </div>;
+    },
+
+    // Each update cycle will cause all previous queries to be re-rendered.
+    // We avoid that by implementing shouldComponentUpdate life-cycle hook.
+    // The trick is to simply check if the components has recieved props
+    // before.
+    shouldComponentUpdate: function () {
+        // If the component has received props before, query property will
+        // be set on it. If it is, we return false so that the component
+        // is not re-rendered. If the query property is not set, we return
+        // true: this must be the first time react is trying to render the
+        // component.
+        return !this.props.query;
+    }
+});
+
+/**
+ * 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 (
+            <div className="table-hit-overview">
+                <h4 className="caption" data-toggle="collapse" data-target={'#Query_'+this.props.query.number+'HT_'+this.props.query.number}>
+                    <i className="fa fa-minus-square-o"></i>&nbsp;
+                    <span>Summary table of hits</span>
+                </h4>
+                <div className="collapsed in"id={'Query_'+ this.props.query.number + 'HT_'+ this.props.query.number}>
+                    <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>}
+                            {!this.props.imported_xml && <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} className="btn-link">
+                                                    {hit.id}
+                                                </a>
+                                            </td>
+                                            {hasName && <td className="text-left">{hit.sciname}</td>}
+                                            {!this.props.imported_xml && <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>
+                </div>
+            </div>
+        );
+    }
+});

data/public/js/report.js

@@ -1,35 +1,16 @@
-import './sequenceserver'; // for custom $.tooltip function
+import './jquery_world'; // for custom $.tooltip function
 import React from 'react';
 import _ from 'underscore';
 
+import Sidebar from './sidebar';
 import Circos from './circos';
-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 Query from './query';
+import Hit from './hit';
 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 SequenceModal from './sequence_modal';
 import showErrorModal from './error_modal';
 
-/**
- * Dynamically create form and submit.
- */
-var downloadFASTA = function (sequence_ids, database_ids) {
-    var form = $('<form/>').attr('method', 'post').attr('action', 'get_sequence');
-    addField('sequence_ids', sequence_ids);
-    addField('database_ids', database_ids);
-    form.appendTo('body').submit().remove();
-
-    function addField(name, val) {
-        form.append(
-            $('<input>').attr('type', 'hidden').attr('name', name).val(val)
-        );
-    }
-};
-
 /**
  * Base component of report page. This component is later rendered into page's
  * '#view' element.
@@ -40,12 +21,39 @@ var Page = React.createClass({
             <div>
                 {/* Provide bootstrap .container element inside the #view for
                     the Report component to render itself in. */}
-                <div className="container"><Report ref="report"/></div>
+                <div className="container">
+                    <Report showSequenceModal={ _ => this.showSequenceModal(_) }
+                        getCharacterWidth={ () => this.getCharacterWidth() } />
+                </div>
+
+                {/* Add a hidden span tag containing chars used in HSPs */}
+                <pre className="pre-reset hsp-lines" ref="hspChars" hidden>
+                    ABCDEFGHIJKLMNOPQRSTUVWXYZ +-
+                </pre>
 
                 {/* Required by Grapher for SVG and PNG download */}
                 <canvas id="png-exporter" hidden></canvas>
+
+                <SequenceModal ref="sequenceModal" />
             </div>
         );
+    },
+
+    componentDidMount: function () {
+        var job_id = location.pathname.substr(1);
+        sessionStorage.setItem('job_id', job_id);
+    },
+
+    showSequenceModal: function (url) {
+        this.refs.sequenceModal.show(url);
+    },
+
+    getCharacterWidth: function () {
+        if (!this.characterWidth) {
+            var $hspChars = $(React.findDOMNode(this.refs.hspChars));
+            this.characterWidth = $hspChars.width() / 29;
+        }
+        return this.characterWidth;
     }
 });
 
@@ -60,15 +68,22 @@ var Report = React.createClass({
 
     getInitialState: function () {
         this.fetchResults();
-        this.updateCycle = 0;
+
+        // Properties below are internal state used to render results in small
+        // slices (see updateState).
+        this.numUpdates = 0;
+        this.nextQuery = 0;
+        this.nextHit = 0;
+        this.nextHSP = 0;
+        this.maxHSPs = 3; // max HSPs to render in a cycle
 
         return {
             search_id:       '',
             program:         '',
             program_version: '',
             submitted_at:    '',
-            num_queries:     0,
             queries:         [],
+            results:         [],
             querydb:         [],
             params:          [],
             stats:           []
@@ -97,7 +112,7 @@ var Report = React.createClass({
                         setTimeout(poll, interval);
                         break;
                     case 200:
-                        component.updateState(jqXHR.responseJSON);
+                        component.setStateFromJSON(jqXHR.responseJSON);
                         break;
                     case 404:
                     case 400:
@@ -112,38 +127,139 @@ var Report = React.createClass({
     },
 
     /**
-     * Incrementally update state (50 queries at a time) so that the rendering
-     * process is not overwhelemed when there are too many queries.
+     * Calls setState after any required modification to responseJSON.
      */
-    updateState: function(responseJSON) {
-        var queries = responseJSON.queries;
-        responseJSON.num_queries = queries.length;
-        responseJSON.veryBig = queries.length > 250;
-        responseJSON.queries = queries.splice(0, 50);
+    setStateFromJSON: function(responseJSON) {
+        this.lastTimeStamp = Date.now();
         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 //
+    // Life-cycle methods //
     render: function () {
         return this.isResultAvailable() ?
             this.resultsJSX() : this.loadingJSX();
     },
 
+    /**
+     * Called as soon as the page has loaded and the user sees the loading spinner.
+     * We use this opportunity to setup services that make use of 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();
+        this.toggleTable();
+    },
+
+    /**
+     * Called for the first time after as BLAST results have been retrieved from
+     * the server and added to this.state by fetchResults. Only summary overview
+     * and circos would have been rendered at this point. At this stage we kick
+     * start iteratively updating 10 HSPs (and as many hits and queries) every
+     * 25 milli-seconds.
+     */
+    componentDidUpdate: function () {
+        // Log to console how long the last update take?
+        console.log((Date.now() - this.lastTimeStamp)/1000);
+
+        // Lock sidebar in its position on the first update.
+        if (this.nextQuery == 0 && this.nextHit == 0 && this.nextHSP == 0) {
+            this.affixSidebar();
+        }
+
+        // Queue next update if we have not rendered all results yet.
+        if (this.nextQuery < this.state.queries.length) {
+            // setTimeout is used to clear call stack and space out
+            // the updates giving the browser a chance to respond
+            // to user interactions.
+            setTimeout(() => this.updateState(), 25);
+        }
+        else {
+            this.componentFinishedUpdating();
+        }
+    },
+
+    /**
+     * Push next slice of results to React for rendering.
+     */
+    updateState: function() {
+        var results = [];
+        var numHSPsProcessed = 0;
+        while (this.nextQuery < this.state.queries.length) {
+            var query = this.state.queries[this.nextQuery];
+            // We may see a query multiple times during rendering because only
+            // 3 hsps or are rendered in each cycle, but we want to create the
+            // corresponding Query component only the first time we see it.
+            if (this.nextHit == 0 && this.nextHSP == 0) {
+                results.push(<Query key={'Query_'+query.number} query={query}
+                    program={this.state.program} querydb={this.state.querydb}
+                    showQueryCrumbs={this.state.queries.length > 1}
+                    imported_xml={this.state.imported_xml}
+                    veryBig={this.state.veryBig} />);
+            }
+
+            while (this.nextHit < query.hits.length) {
+                var hit = query.hits[this.nextHit];
+                // We may see a hit multiple times during rendering because only
+                // 10 hsps are rendered in each cycle, but we want to create the
+                // corresponding Hit component only the first time we see it.
+                if (this.nextHSP == 0) {
+                    results.push(<Hit key={'Query_'+query.number+'_Hit_'+hit.number} query={query}
+                        hit={hit} algorithm={this.state.program} querydb={this.state.querydb}
+                        selectHit={this.selectHit} imported_xml={this.state.imported_xml}
+                        showQueryCrumbs={this.state.queries.length > 1}
+                        showHitCrumbs={query.hits.length > 1}
+                        veryBig={this.state.veryBig}
+                        {... this.props} />
+                    );
+                }
+
+                while (this.nextHSP < hit.hsps.length) {
+                    // Get nextHSP and increment the counter.
+                    var hsp = hit.hsps[this.nextHSP++];
+                    results.push(
+                        <HSP key={'Query_'+query.number+'_Hit_'+hit.number+'_HSP_'+hsp.number}
+                            query={query} hit={hit} hsp={hsp} algorithm={this.state.program}
+                            showHSPNumbers={hit.hsps.length > 1} {... this.props} />
+                    );
+                    numHSPsProcessed++;
+                    if (numHSPsProcessed == this.maxHSPs) break;
+                }
+                // Are we here because we have iterated over all hsps of a hit,
+                // or because of the break clause in the inner loop?
+                if (this.nextHSP == hit.hsps.length) {
+                    this.nextHit = this.nextHit + 1;
+                    this.nextHSP = 0;
+                }
+                if (numHSPsProcessed == this.maxHSPs) break;
+            }
+
+            // Are we here because we have iterated over all hits of a query,
+            // or because of the break clause in the inner loop?
+            if (this.nextHit == query.hits.length) {
+                this.nextQuery = this.nextQuery + 1;
+                this.nextHit = 0;
+            }
+            if (numHSPsProcessed == this.maxHSPs) break;
+        }
+
+        // Push the components to react for rendering.
+        this.numUpdates++;
+        this.lastTimeStamp = Date.now();
+        this.setState({
+            results: this.state.results.concat(results),
+            veryBig: this.numUpdates >= 250
+        });
+    },
+
+    /**
+     * Called after all results have been rendered.
+     */
+    componentFinishedUpdating: function () {
+        this.shouldShowIndex() && this.setupScrollSpy();
+    },
+
     /**
      * Returns loading message
      */
@@ -179,25 +295,15 @@ var Report = React.createClass({
             <div className="row">
                 { this.shouldShowSidebar() &&
                     (
-                        <div
-                            className="col-md-3 hidden-sm hidden-xs">
-                            <SideBar data={this.state} shouldShowIndex={this.shouldShowIndex()}/>
+                        <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'}>
+                <div className={this.shouldShowSidebar() ? 'col-md-9' : 'col-md-12'}>
                     { this.overviewJSX() }
                     { this.circosJSX() }
-                    {
-                        _.map(this.state.queries, _.bind(function (query) {
-                            return (
-                                <Query key={'Query_'+query.id} query={query} showQueryCrumbs={this.state.num_queries > 1}
-                                    selectHit={this.selectHit} program={this.state.program} querydb={this.state.querydb}
-                                    veryBig={this.state.veryBig} imported_xml={this.state.imported_xml} />
-                            );
-                        }, this))
-                    }
+                    { this.state.results }
                 </div>
             </div>
         );
@@ -209,18 +315,18 @@ var Report = React.createClass({
     overviewJSX: function () {
         return (
             <div className="overview">
-                <p className="text-monospace">
-                    {this.state.program_version}{this.state.submitted_at
+                <p>
+                    <strong>{this.state.program_version}</strong>{this.state.submitted_at
                         && `, query submitted on ${this.state.submitted_at}`}
                 </p>
-                <p className="text-monospace">
-                    Databases: {
+                <p>
+                    <strong> Databases: </strong>{
                         this.state.querydb.map((db) => { return db.title; }).join(', ')
                     } ({this.state.stats.nsequences} sequences,&nbsp;
                     {this.state.stats.ncharacters} characters)
                 </p>
-                <p className="text-monospace">
-                    Parameters: {
+                <p>
+                    <strong>Parameters: </strong> {
                         _.map(this.state.params, function (val, key) {
                             return key + ' ' + val;
                         }).join(', ')
@@ -258,6 +364,10 @@ var Report = React.createClass({
         return this.state.queries.some(query => query.hits.length > 0);
     },
 
+    /**
+     * Does the report have at least two hits? This is used to determine
+     * whether Circos should be enabled or not.
+     */
     atLeastTwoHits: function () {
         var hit_num = 0;
         return this.state.queries.some(query => {
@@ -283,38 +393,7 @@ var Report = React.createClass({
      */
     shouldShowIndex: function () {
         var num_queries = this.state.queries.length;
-        return num_queries >= 2 && num_queries <= 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();
-    },
-
-    /**
-     * Called after all results have been rendered.
-     */
-    componentFinishedUpdating: function () {
-        this.shouldShowIndex() && this.setupScrollSpy();
+        return num_queries >= 2 && num_queries <= 12;
     },
 
     /**
@@ -326,12 +405,9 @@ var Report = React.createClass({
             $this.on('mouseup mousemove', function handler(event) {
                 if (event.type === 'mouseup') {
                     // user wants to toggle
-                    $this.attr('data-toggle', 'collapse');
-                    // Get the element indicated in the data-target attribute
-                    // and toggle the 'in' class for collapsing/expanding.
-                    var target = $('#' + $this.attr('data-target'));
-                    target.toggleClass('in');
-                    $this.find('.fa-chevron-down').toggleClass('fa-rotate-270');
+                    var hitID = $this.parents('.hit').attr('id');
+                    $(`div[data-parent-hit=${hitID}]`).toggle();
+                    $this.find('i').toggleClass('fa-minus-square-o fa-plus-square-o');
                 } else {
                     // user wants to select
                     $this.attr('data-toggle', '');
@@ -341,6 +417,19 @@ var Report = React.createClass({
         });
     },
 
+    /* Handling the fa icon when Hit Table is collapsed */
+    toggleTable: function () {
+        $('body').on('mousedown', '.resultn > .section-content > .table-hit-overview > .caption', function (event) {
+            var $this = $(this);
+            $this.on('mouseup mousemove', function handler(event) {
+                $this.find('i').toggleClass('fa-minus-square-o fa-plus-square-o');
+                $this.off('mouseup mousemove', handler);
+            });
+        });
+    },
+
+
+
     /**
      * Affixes the sidebar.
      */
@@ -379,12 +468,14 @@ var Report = React.createClass({
         // Highlight selected hit and enable 'Download FASTA/Alignment of
         // selected' links.
         if (checkbox.is(':checked')) {
-            $hit.find('.section-content').addClass('glow');
-            $('.download-alignment-of-selected').enable();
+            $hit.addClass('glow');
+            $hit.next('.hsp').addClass('glow');
             $('.download-fasta-of-selected').enable();
+            $('.download-alignment-of-selected').enable();
         }
         else {
-            $hit.find('.section-content').removeClass('glow');
+            $hit.removeClass('glow');
+            $hit.next('.hsp').removeClass('glow');
         }
 
         if (num_checked >= 1)
@@ -404,722 +495,4 @@ var Report = React.createClass({
     },
 });
 
-/**
- * Renders report for each query sequence.
- *
- * Composed of graphical overview, tabular summary (HitsTable),
- * and a list of Hits.
- */
-var Query = React.createClass({
-
-    // Kind of public API //
-
-    /**
-     * Returns the id of query.
-     */
-    domID: function () {
-        return 'Query_' + this.props.query.number;
-    },
-
-    queryLength: function () {
-        return this.props.query.length;
-    },
-
-    /**
-     * Returns number of hits.
-     */
-    numhits: function () {
-        return this.props.query.hits.length;
-    },
-
-    // Life cycle methods //
-
-    render: function () {
-        return (
-            <div className="resultn" id={this.domID()}
-                data-query-len={this.props.query.length}
-                data-algorithm={this.props.program}>
-                { this.headerJSX() }
-                { this.numhits() && this.hitsListJSX() || this.noHitsJSX() }
-            </div>
-        );
-    },
-
-    headerJSX: function () {
-        var meta = `length: ${this.queryLength().toLocaleString()}`;
-        if (this.props.showQueryCrumbs) {
-            meta = `query ${this.props.query.number}, ` + meta;
-        }
-        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">{ meta }</span>
-        </div>;
-    },
-
-    hitsListJSX: function () {
-        return <div className="section-content">
-            <HitsOverview key={'GO_' + this.props.query.number} query={this.props.query} program={this.props.program} collapsed={this.props.veryBig} />
-            <LengthDistribution key={'LD_' + this.props.query.id} query={this.props.query} algorithm={this.props.program} collapsed="true" />
-            <HitsTable key={'HT_' + this.props.query.number} query={this.props.query} imported_xml={this.props.imported_xml} />
-            <div id="hits">
-                {
-                    _.map(this.props.query.hits, _.bind(function (hit) {
-                        return (
-                            <Hit key={'HIT_' + hit.number} hit={hit}
-                                algorithm={this.props.program}
-                                querydb={this.props.querydb}
-                                query={this.props.query}
-                                imported_xml={this.props.imported_xml}
-                                selectHit={this.props.selectHit}
-                                showHitCrumbs={this.numhits() > 1}
-                                showQueryCrumbs={this.props.showQueryCrumbs} />
-                        );
-                    }, this))
-                }
-            </div>
-        </div>;
-    },
-
-    noHitsJSX: function () {
-        return <div className="section-content">
-            <br />
-            <p>
-                <strong> ****** No hits found ****** </strong>
-            </p>
-        </div>;
-    },
-
-    shouldComponentUpdate: function (nextProps, nextState) {
-        if (!this.props.query) return true;
-    }
-});
-
-/**
- * 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>}
-                    {!this.props.imported_xml && <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>}
-                                    {!this.props.imported_xml && <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.
-     */
-    hitLength: 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 });
-    },
-
-    viewSequenceLink: function () {
-        return encodeURI(`get_sequence/?sequence_ids=${this.accession()}&database_ids=${this.databaseIDs()}`);
-    },
-
-    downloadFASTA: function (event) {
-        var accessions = [this.accession()];
-        downloadFASTA(accessions, this.databaseIDs());
-    },
-
-    // Event-handler for exporting alignments.
-    // Calls relevant method on AlignmentExporter defined in alignment_exporter.js.
-    downloadAlignment: function (event) {
-        var hsps = _.map(this.props.hit.hsps, _.bind(function (hsp) {
-            hsp.query_id = this.props.query.id;
-            hsp.hit_id = this.props.hit.id;
-            return hsp;
-        }, this));
-
-        var aln_exporter = new AlignmentExporter();
-        aln_exporter.export_alignments(hsps, this.props.query.id+'_'+this.props.hit.id);
-    },
-
-
-    // Life cycle methods //
-
-    getInitialState: function () {
-        return { showSequenceViewer: false };
-    },
-
-    // Return JSX for view sequence button.
-    viewSequenceButton: function () {
-        if (this.hitLength() > 10000) {
-            return (
-                <button
-                    className="btn btn-link view-sequence disabled"
-                    title="Sequence too long" disabled="true">
-                    <i className="fa fa-eye"></i> Sequence
-                </button>
-            );
-        }
-        else {
-            return (
-                <button
-                    className="btn btn-link view-sequence"
-                    onClick={this.showSequenceViewer}>
-                    <i className="fa fa-eye"></i> Sequence
-                </button>
-            );
-        }
-    },
-
-    render: function () {
-        return (
-            <div className="hit" id={this.domID()} data-hit-def={this.props.hit.id}
-                data-hit-len={this.props.hit.length} data-hit-evalue={this.props.hit.evalue}>
-                { this.headerJSX() } { this.contentJSX() }
-            </div>
-        );
-    },
-
-    headerJSX: function () {
-        var meta = `length: ${this.hitLength().toLocaleString()}`;
-
-        if (this.props.showQueryCrumbs && this.props.showHitCrumbs) {
-            // Multiper queries, multiple hits
-            meta = `hit ${this.props.hit.number} of query ${this.props.query.number}, ` + meta;
-        }
-        else if (this.props.showQueryCrumbs && !this.props.showHitCrumbs) {
-            // Multiple queries, single hit
-            meta = `the only hit of query ${this.props.query.number}, ` + meta;
-        }
-        else if (!this.props.showQueryCrumbs && this.props.showHitCrumbs) {
-            // Single query, multiple hits
-            meta = `hit ${this.props.hit.number}, ` + meta;
-        }
-
-        return <div className="section-header">
-            <h4 data-toggle="collapse" data-target={this.domID() + '_content'}>
-                <i className="fa fa-chevron-down"></i>&nbsp;
-                <span>
-                    {this.props.hit.id}&nbsp;
-                    <small>{this.props.hit.title}</small>
-                </span>
-            </h4>
-            <span className="label label-reset pos-label">{ meta }</span>
-        </div>;
-    },
-
-    contentJSX: function () {
-        return <div id={this.domID() + '_content'} className="section-content collapse in">
-            { this.hitLinks() }
-            <HSPOverview key={'kablammo' + this.props.query.id} query={this.props.query}
-                hit={this.props.hit} algorithm={this.props.algorithm} />
-            { this.hspListJSX() }
-        </div>;
-    },
-
-    hitLinks: function () {
-        return (
-            <div className="hit-links">
-                <label>
-                    <input type="checkbox" id={this.domID() + '_checkbox'}
-                        value={this.accession()} onChange={function () {
-                            this.props.selectHit(this.domID() + '_checkbox');
-                        }.bind(this)} data-target={'#' + this.domID()}
-                    /> Select
-                </label>
-                {
-                    !this.props.imported_xml && [
-                        <span> | </span>,
-                        this.viewSequenceButton(),
-                        this.state.showSequenceViewer && <SequenceViewer
-                            url={this.viewSequenceLink()} onHide={this.hideSequenceViewer} />
-                    ]
-                }
-                {
-                    !this.props.imported_xml && [
-                        <span> | </span>,
-                        <button className='btn btn-link download-fa'
-                            onClick={this.downloadFASTA}>
-                            <i className="fa fa-download"></i> FASTA
-                        </button>
-                    ]
-                }
-                <span> | </span>
-                <button className='btn btn-link download-aln'
-                    onClick={this.downloadAlignment}>
-                    <i className="fa fa-download"></i> Alignment
-                </button>
-                {
-                    _.map(this.props.hit.links, _.bind(function (link) {
-                        return [<span> | </span>, this.a(link)];
-                    }, this))
-                }
-            </div>
-        );
-    },
-
-    hspListJSX: function () {
-        return <div className="hsps">
-            {
-                this.props.hit.hsps.map((hsp) => {
-                    return <HSP key={hsp.number}
-                        algorithm={this.props.algorithm}
-                        queryNumber={this.props.query.number}
-                        hitNumber={this.props.hit.number} hsp={hsp}/>;
-                }, this)
-            }
-        </div>;
-    }
-});
-
-
-/**
- * Component for sequence-viewer links.
- */
-var SequenceViewer = (function () {
-
-    var Viewer = React.createClass({
-
-        /**
-         * 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',
-
-        // Lifecycle methods. //
-
-        render: function () {
-            this.widgetID =
-                this.widgetClass + '-' + (new Date().getUTCMilliseconds());
-
-            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>
-            );
-        },
-
-        componentDidMount: function () {
-            // attach BioJS sequence viewer
-            var widget = new Sequence({
-                sequence: this.props.sequence.value,
-                target: this.widgetID,
-                format: 'PRIDE',
-                columns: {
-                    size: 40,
-                    spacedEach: 0
-                },
-                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
-                                className="modal-header">
-                                <h3>View sequence</h3>
-                            </div>
-
-                            { this.state.requestCompleted &&
-                                    this.resultsJSX() || this.loadingJSX() }
-                        </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.
- * Renders links for navigating to each query.
- */
-var SideBar = React.createClass({
-
-    /**
-     * Event-handler for downloading fasta of all hits.
-     */
-    downloadFastaOfAll: function () {
-        var sequence_ids = $('.hit-links :checkbox').map(function () {
-            return this.value;
-        }).get();
-        var database_ids = _.map(this.props.data.querydb, _.iteratee('id'));
-        downloadFASTA(sequence_ids, database_ids);
-        return false;
-    },
-
-    /**
-     * Handles downloading fasta of selected hits.
-     */
-    downloadFastaOfSelected: function () {
-        var sequence_ids = $('.hit-links :checkbox:checked').map(function () {
-            return this.value;
-        }).get();
-        var database_ids = _.map(this.props.data.querydb, _.iteratee('id'));
-        downloadFASTA(sequence_ids, database_ids);
-        return false;
-    },
-
-    downloadAlignmentOfAll: function() {
-        var sequence_ids = $('.hit-links :checkbox').map(function () {
-            return this.value;
-        }).get();
-        var hsps_arr = [];
-        var aln_exporter = new AlignmentExporter();
-        _.each(this.props.data.queries, _.bind(function (query) {
-            _.each(query.hits, function (hit) {
-                _.each(hit.hsps, function (hsp) {
-                    hsp.hit_id = hit.id;
-                    hsp.query_id = query.id;
-                    hsps_arr.push(hsp);
-                });
-            });
-        }, this));
-        console.log('len '+hsps_arr.length);
-        aln_exporter.export_alignments(hsps_arr, 'alignment-'+sequence_ids.length+'_hits');
-        return false;
-    },
-
-    downloadAlignmentOfSelected: function () {
-        var sequence_ids = $('.hit-links :checkbox:checked').map(function () {
-            return this.value;
-        }).get();
-        var hsps_arr = [];
-        var aln_exporter = new AlignmentExporter();
-        console.log('check '+sequence_ids.toString());
-        _.each(this.props.data.queries, _.bind(function (query) {
-            _.each(query.hits, function (hit) {
-                if (_.indexOf(sequence_ids, hit.accession) != -1) {
-                    _.each(hit.hsps, function (hsp) {
-                        hsp.hit_id = hit.id;
-                        hsp.query_id = query.id;
-                        hsps_arr.push(hsp);
-                    });
-                }
-            });
-        }, this));
-        aln_exporter.export_alignments(hsps_arr, 'alignment-'+sequence_ids.length+'_hits');
-        return false;
-    },
-
-
-    // JSX //
-    render: function () {
-        return (
-            <div className="sidebar">
-                { this.props.shouldShowIndex && this.index() }
-                { this.downloads() }
-            </div>
-        );
-    },
-
-    index: function () {
-        return (
-            <div className="index">
-                <div
-                    className="section-header">
-                    <h4>
-                        { this.summary() }
-                    </h4>
-                </div>
-                <ul
-                    className="nav hover-reset active-bold">
-                    {
-                        _.map(this.props.data.queries, _.bind(function (query) {
-                            return (
-                                <li key={'Side_bar_'+query.id}>
-                                    <a
-                                        className="nowrap-ellipsis hover-bold"
-                                        href={'#Query_' + query.number}
-                                        title={'Query= ' + query.id + ' ' + query.title}>
-                                        {'Query= ' + query.id}
-                                    </a>
-                                </li>
-                            );
-                        }, this))
-                    }
-                </ul>
-            </div>
-        );
-    },
-
-    summary: function () {
-        var program = this.props.data.program;
-        var numqueries = this.props.data.queries.length;
-        var numquerydb = this.props.data.querydb.length;
-
-        return (
-            program.toUpperCase() + ': ' +
-            numqueries + ' ' + (numqueries > 1 ? 'queries' : 'query') + ', ' +
-            numquerydb + ' ' + (numquerydb > 1 ? 'databases' : 'database')
-        );
-    },
-
-    downloads: function () {
-        return (
-            <div className="downloads">
-                <div className="section-header">
-                    <h4>
-                        Download FASTA, XML, TSV
-                    </h4>
-                </div>
-                <ul className="nav">
-                    {
-                        !this.props.data.imported_xml && <li>
-                            <a href="#" className="btn-link download-fasta-of-all"
-                                onClick={this.downloadFastaOfAll}>
-                                FASTA of all hits
-                            </a>
-                        </li>
-                    }
-                    {
-                        !this.props.data.imported_xml && <li>
-                            <a href="#" className="btn-link download-fasta-of-selected disabled"
-                                onClick={this.downloadFastaOfSelected}>
-                                FASTA of <span className="text-bold"></span> selected hit(s)
-                            </a>
-                        </li>
-                    }
-                    <li>
-                        <a href="#" className="btn-link download-alignment-of-all"
-                            onClick={this.downloadAlignmentOfAll}>
-                            Alignment of all hits
-                        </a>
-                    </li>
-                    <li>
-                        <a href="#" className="btn-link download-alignment-of-selected disabled"
-                            onClick={this.downloadAlignmentOfSelected}>
-                            Alignment of <span className="text-bold"></span> selected hit(s)
-                        </a>
-                    </li>
-                    {
-                        !this.props.data.imported_xml && <li>
-                            <a className="download" data-toggle="tooltip"
-                                title="15 columns: query and subject ID; scientific
-                                name, alignment length, mismatches, gaps, identity,
-                                start and end coordinates, e value, bitscore, query
-                                coverage per subject and per HSP."
-                                href={'download/' + this.props.data.search_id + '.std_tsv'}>
-                                Standard tabular report
-                            </a>
-                        </li>
-                    }
-                    {
-                        !this.props.data.imported_xml && <li>
-                            <a className="download" data-toggle="tooltip"
-                                title="44 columns: query and subject ID, GI,
-                                accessions, and length; alignment details;
-                                taxonomy details of subject sequence(s) and
-                                query coverage per subject and per HSP."
-                                href={'download/' + this.props.data.search_id + '.full_tsv'}>
-                                Full tabular report
-                            </a>
-                        </li>
-                    }
-                    {
-                        !this.props.data.imported_xml && <li>
-                            <a className="download" data-toggle="tooltip"
-                                title="Results in XML format."
-                                href={'download/' + this.props.data.search_id + '.xml'}>
-                                Full XML report
-                            </a>
-                        </li>
-                    }
-                </ul>
-            </div>
-        );
-    },
-});
-
 React.render(<Page/>, document.getElementById('view'));