sequenceserver 2.0.0.beta4 → 2.0.0.rc5

data/public/js/hit.js

@@ -0,0 +1,217 @@
+import React from 'react';
+import _ from 'underscore';
+
+import HSPOverview from './kablammo';
+import downloadFASTA from './download_fasta';
+import AlignmentExporter from './alignment_exporter'; // to download textual alignment
+
+/**
+ * Component for each hit. Receives props from Report. Has no state.
+ */
+export default React.createClass({
+    /**
+     * 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 () {
+        this.props.showSequenceModal(this.viewSequenceLink());
+    },
+
+    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 //
+
+    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>
+        );
+    },
+
+    // See Query.shouldComponentUpdate. The same applies for hits.
+    shouldComponentUpdate: function () {
+        return !this.props.hit;
+    },
+
+    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>
+                <i className="fa fa-minus-square-o"></i>&nbsp;
+                <strong>{this.props.hit.id}</strong>&nbsp;
+                {this.props.hit.title}
+            </h4>
+            <span className="label label-reset pos-label">{meta}</span>
+        </div>;
+    },
+
+    contentJSX: function () {
+        return <div className="section-content" data-parent-hit={this.domID()}>
+            { this.hitLinks() }
+            <HSPOverview key={'kablammo' + this.props.query.id} query={this.props.query}
+                hit={this.props.hit} algorithm={this.props.algorithm}
+                showHSPCrumbs={this.props.hit.hsps.length > 1}
+                collapsed={this.props.veryBig} />
+        </div>;
+    },
+
+    hitLinks: function () {
+        var btns = [];
+        if (!this.props.imported_xml) {
+            btns = btns.concat([
+                this.viewSequenceButton(),
+                this.downloadFASTAButton()
+            ]);
+        }
+        btns.push(this.downloadAlignmentButton());
+
+        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>
+                {
+                    btns.map((btn) => {
+                        return [<span className="line">|</span>, this.button(btn)];
+                    })
+                }
+                {
+                    this.props.hit.links.map((link) => {
+                        return [<span className="line">|</span>, this.a(link)];
+                    })
+                }
+            </div>
+        );
+    },
+
+    // Return JSX for view sequence button.
+    viewSequenceButton: function () {
+        if (this.hitLength() > 10000) {
+            return {
+                text: 'Sequence',
+                icon: 'fa-eye',
+                className: 'view-sequence',
+                title: 'Sequence too long',
+            };
+        }
+        else {
+            return {
+                text: 'Sequence',
+                icon: 'fa-eye',
+                className: 'view-sequence',
+                onClick: () => this.showSequenceViewer()
+            };
+
+        }
+    },
+
+    downloadFASTAButton: function () {
+        return {
+            text: 'FASTA',
+            icon: 'fa-download',
+            className: 'download-fa',
+            onClick: () => this.downloadFASTA()
+        };
+    },
+
+    downloadAlignmentButton: function () {
+        return {
+            text: 'Alignment',
+            icon: 'fa-download',
+            className: 'download-aln',
+            onClick: () => this.downloadAlignment()
+        };
+    },
+
+    button: function ({text, icon, title, className, onClick}) {
+        if (onClick) {
+            return <button className={`btn-link ${className}`}
+                title={title} onClick={onClick}><i className={`fa ${icon}`}></i> {text}
+            </button>;
+        }
+        else {
+            return <button className="btn-link view-sequence disabled"
+                title={title} disabled="true">
+                <i className={`fa ${icon}`}></i> {text}
+            </button>;
+        }
+    },
+
+    /**
+     * Render URL for sequence-viewer.
+     */
+    a: function (link) {
+        if (!link.title || !link.url) return;
+
+        let className = 'btn btn-link';
+        if (link.class) className = `${className} ${link.class}`;
+        return <a href={link.url} className={className} target='_blank'>
+            {link.icon && <i className={'fa ' + link.icon}></i>}
+            {' ' + link.title + ' '}
+        </a>;
+    }
+});

data/public/js/hits_overview.js

@@ -166,10 +166,10 @@ class Graph {
     drawLegend(svg, options, width, height, hits) {
         var svg_legend = svg.append('g')
             .attr('transform',
-                'translate(0,' + (height - 1.88 * options.margin) + ')');
+                'translate(0,' + (height - 1.75 * options.margin) + ')');
 
         svg_legend.append('rect')
-            .attr('x', 7 * (width - 2 * options.margin) / 10)
+            .attr('x', 7.5 * (width - 2 * options.margin) / 10)
             .attr('width', 2 * (width - 4 * options.margin) / 10)
             .attr('height', options.legend)
             .attr('fill', 'url(#legend-grad)');
@@ -177,7 +177,7 @@ class Graph {
         svg_legend.append('text')
             .attr('class',' legend-text')
             .attr('transform', 'translate(0, ' +options.legend +')')
-            .attr('x', 6 * (width - 2 * options.margin) / 10 - options.margin / 2)
+            .attr('x', 9.5 * (width - 2 * options.margin) / 10 + options.margin / 2)
             .text('Weaker hits');
         // .text(function() {
         //   return Helpers.prettify_evalue(hits[hits.length-1].hitEvalue);
@@ -186,7 +186,7 @@ class Graph {
         svg_legend.append('text')
             .attr('class',' legend-text')
             .attr('transform', 'translate(0, ' + options.legend + ')')
-            .attr('x', 9 * (width - 2 * options.margin) / 10 + options.margin / 2)
+            .attr('x', 6.7 * (width - 2 * options.margin) / 10 - options.margin / 2)
             .text('Stronger hits');
         // .text(function () {
         //   return Helpers.prettify_evalue(hits[0].hitEvalue);
@@ -196,9 +196,9 @@ class Graph {
             .attr('id', 'legend-grad')
             .selectAll('stop')
             .data([
-                {offset: '0%', color: '#ccc'},
-                {offset: '50%', color: '#888'},
-                {offset: '100%', color: '#000'}
+                {offset: '0%', color: '#000'},
+                {offset: '45%', color: '#c74f14'},
+                {offset: '100%', color: '#f6bea2'}
             ])
             .enter()
             .append('stop')
@@ -216,7 +216,7 @@ class Graph {
      * margin: Margin around the svg element.
      */
         var defaults = {
-                barHeight: 3,
+                barHeight: 4,
                 legend: inhits.length > 1 ? 3 : 0,
                 margin: 20
             },
@@ -237,7 +237,8 @@ class Graph {
 
         var width = $graphDiv.width();
         var height = hits.length * (options.barHeight) +
-        2 * options.legend + 5 * options.margin;
+                     2 * options.legend + 4 * options.margin;
+
         // var height = $graphDiv.height();
 
         var SEQ_TYPES = {
@@ -310,7 +311,7 @@ class Graph {
                     return d.hitEvalue;
                 }))
             ])
-            .range([40,150]);
+            .range([0,0.8]);
 
         svg.append('g')
             .attr('class', 'ghit')
@@ -330,9 +331,7 @@ class Graph {
                     // Drawing the HSPs connector line using the same
                     // color as that of the hit track (using lookahead).
                         var yHspline = y(d.hitId) + options.barHeight / 2;
-                        var hsplineColor = d3.rgb(gradScale(v.hspEvalue),
-                            gradScale(v.hspEvalue),
-                            gradScale(v.hspEvalue));
+                        var hsplineColor = d3.hsl(20, 0.82, gradScale(v.hspEvalue));
 
                         if (j+1 < d.length) {
                             if (d[j].hspEnd <= d[j+1].hspStart) {

data/public/js/hsp.js

@@ -17,16 +17,22 @@ export default class HSP extends React.Component {
     }
 
     domID() {
-        return "Query_" + this.props.queryNumber + "_hit_" +
-            this.props.hitNumber + "_" + this.hsp.number;
+        return 'Query_' + this.props.query.number + '_hit_' +
+            this.props.hit.number + '_' + this.props.hsp.number;
+    }
+
+    hitDOM_ID() {
+        return 'Query_' + this.props.query.number + '_hit_' + this.props.hit.number;
     }
 
     // Renders pretty formatted alignment.
     render () {
         return (
-            <div className="hsp" id={this.domID()} ref="hsp">
+            <div className="hsp" id={this.domID()} ref="hsp"
+                data-parent-hit={this.hitDOM_ID()}>
                 <pre className="pre-reset hsp-stats">
-                    {Helpers.toLetters(this.hsp.number) + "."}&nbsp;{this.hspStats()}
+                    {this.props.showHSPNumbers && `${Helpers.toLetters(this.hsp.number)}. `}
+                    {this.hspStats().map((s, i) => <span key={i}>{s}</span>)}
                 </pre>
                 {this.hspLines()}
             </div>
@@ -39,11 +45,17 @@ export default class HSP extends React.Component {
     }
 
     draw () {
-        var $container = $(React.findDOMNode(this.refs.hsp));
-        this.chars = Math.floor($container.width() / 7.5);
+        var charWidth = this.props.getCharacterWidth();
+        var containerWidth = $(React.findDOMNode(this.refs.hsp)).width();
+        this.chars = Math.floor((containerWidth - 4) / charWidth);
         this.forceUpdate();
     }
 
+    // See Query.shouldComponentUpdate. The same applies for hsp.
+    shouldComponentUpdate () {
+        return !this.props.hsp;
+    }
+
     /**
      * Returns an array of span elements or plain strings (React automatically
      * adds span tag around strings). This array is passed as it is to JSX to be
@@ -60,17 +72,17 @@ export default class HSP extends React.Component {
         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(', ');
+        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)}), `]);
+        line.push([`Identity: ${Utils.inFraction(this.hsp.identity, this.hsp.length)} (${Utils.inPercentage(this.hsp.identity, this.hsp.length)}), `]);
 
         // Positives (for protein alignment).
         if (this.props.algorithm === 'blastp' ||
             this.props.algorithm === 'blastx' ||
             this.props.algorithm === 'tblastn' ||
             this.props.algorithm === 'tblastx') {
-            line.push(`Positives: ${Utils.inFraction(this.hsp.positives, this.hsp.length)} (${Utils.inPercentage(this.hsp.positives, this.hsp.length)}), `)
+            line.push(`Positives: ${Utils.inFraction(this.hsp.positives, this.hsp.length)} (${Utils.inPercentage(this.hsp.positives, this.hsp.length)}), `);
         }
 
         // Gaps
@@ -80,23 +92,27 @@ export default class HSP extends React.Component {
         //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;
+        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;
     }
 
+    /**
+     * Returns array of pre tags containing the three query, middle, and subject
+     * lines that together comprise one 'rendered line' of HSP.
+     */
     hspLines () {
         // Space reserved for showing coordinates
         var width = this.width();
@@ -115,7 +131,6 @@ export default class HSP extends React.Component {
         var nqseq = this.nqseq();
         var nsseq = this.nsseq();
         for (let i = 1; i <= lines; i++) {
-            let line = [];
             let seq_start_index = chars * (i - 1);
             let seq_stop_index = seq_start_index + chars;
 
@@ -133,32 +148,37 @@ export default class HSP extends React.Component {
                 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 key={this.hsp.number + ',' + i}
-                className="pre-reset hsp-lines">{line}</pre>);
+            pp.push(
+                <pre key={this.hsp.number + ',' + i} className="pre-reset hsp-lines">
+                    <span className="hsp-coords">
+                        {`Query   ${this.formatCoords(lqstart, width)} `}
+                    </span>
+                    <span>{lqseq}</span>
+                    <span className="hsp-coords">{` ${lqend}`}</span>
+                    <br/>
+                    <span className="hsp-coords">
+                        {`${this.formatCoords('', width + 8)} `}
+                    </span>
+                    <span>{lmseq}</span>
+                    <br/>
+                    <span className="hsp-coords">
+                        {`Subject ${this.formatCoords(lsstart, width)} `}
+                    </span>
+                    <span>{lsseq}</span>
+                    <span className="hsp-coords">{` ${lsend}`}</span>
+                    <br/>
+                </pre>);
         }
 
         return pp;
     }
 
-    // Width of each line of alignment.
-    width() {
+    // Width of the coordinate part of hsp lines. Essentially the length of
+    // the largest coordinate.
+    width () {
         return _.max(_.map([this.hsp.qstart, this.hsp.qend,
-                                this.hsp.sstart, this.hsp.send],
-                                (n) => { return n.toString().length }));
+            this.hsp.sstart, this.hsp.send],
+        (n) => { return n.toString().length; }));
     }
 
     // Alignment start coordinate for query sequence.
@@ -167,16 +187,16 @@ export default class HSP extends React.Component {
     // (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;
+        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;
         }
     }
 
@@ -186,16 +206,16 @@ export default class HSP extends React.Component {
     // (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
+        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;
         }
     }
 
@@ -209,16 +229,16 @@ export default class HSP extends React.Component {
     // 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;
+        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;
         }
     }
 
@@ -232,17 +252,17 @@ export default class HSP extends React.Component {
     // 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;
+        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;
         }
     }
 
@@ -283,7 +303,7 @@ export default class HSP extends React.Component {
     }
 
     spanCoords (text) {
-        return <span className="hsp-coords">{text}</span>
+        return <span className="hsp-coords">{text}</span>;
     }
 }