sequenceserver 2.0.0 → 2.1.0

data/public/js/jquery_world.js

@@ -1,9 +1,9 @@
-import 'jquery';
-import 'jquery-ui/ui/effect-drop';
-import 'jquery-ui/ui/effect-bounce';
+import $ from 'jquery';
+import '../packages/jquery-ui@1.11.4';
 import 'bootstrap';
 import 'webshim';
 
+global.$ = $;
 /**
  * Simple, small jQuery extensions for convenience.
  */
@@ -50,7 +50,7 @@ import 'webshim';
      * Initialise Bootstrap tooltip on an element with presets. Takes title.
      */
     $.fn._tooltip = $.fn.tooltip;
-    $.fn.tooltip  = function (options) {
+    $.fn.tooltip = function (options) {
         return this
             ._tooltip('destroy')
             ._tooltip($.extend({

data/public/js/mailto.js

@@ -0,0 +1,36 @@
+export default function asMailtoHref(querydb, program, numQueries, url, isOpenAccess) {
+    const dbsArr = formatDatabases(querydb);
+    const mailto = composeEmail(dbsArr, program, numQueries, url, isOpenAccess);
+    return encodeEmail(mailto);
+}
+
+function formatDatabases(querydb) {
+    return querydb
+        .slice(0, 15)
+        .map(db => ' ' + db.title);
+}
+
+function composeEmail(dbsArr, program, numQueries, url, isOpenAccess) {
+    const upperProgram = program.toUpperCase();
+    const accessStatement = isOpenAccess ? '' : 'The link will work if you have access to that particular SequenceServer instance.';
+
+    return `mailto:?subject=SequenceServer ${upperProgram} analysis results &body=Hello,
+
+        Here is a link to my recent ${upperProgram} analysis of ${numQueries} sequences.
+            ${url}
+
+        The following databases were used (up to 15 are shown):
+            ${dbsArr}
+
+        ${accessStatement}
+
+        Thank you for using SequenceServer, and please remember to cite our paper.
+
+        Best regards,
+
+        https://sequenceserver.com`;
+}
+
+function encodeEmail(mailto) {
+    return encodeURI(mailto).replace(/(%20){2,}/g, '');
+}

data/public/js/options.js

@@ -0,0 +1,84 @@
+import React, { Component } from 'react';
+// Component for the advanced params input field.
+export class Options extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { preOpts: {}, value: '', method: '' };
+        this.updateBox = this.updateBox.bind(this);
+        this.optionsJSX = this.optionsJSX.bind(this);
+        this.showAdvancedOptions = this.showAdvancedOptions.bind(this);
+    }
+
+    updateBox(value) {
+        this.setState({ value: value });
+    }
+
+
+    optionsJSX() {
+        return <span className="input-group-btn dropdown">
+            <button className="btn bnt-sm btn-default dropdown-toggle"
+                data-toggle="dropdown">
+                <i className="fa fa-caret-down"></i>
+            </button>
+            <ul id='advanced-params-dropdown'
+                className="dropdown-menu dropdown-menu-right">
+                {
+                    Object.entries(this.state.preOpts).map(
+                        ([key, value], index) => {
+                            value = value.join(' ');
+                            if (value.trim() === this.state.value.trim())
+                                var className = 'yellow-background';
+                            return <li key={index} className={className}
+                                onClick={() => this.updateBox(value)}>
+                                <strong>{key}:</strong>&nbsp;{value}
+                            </li>;
+                        }
+                    )
+                }
+            </ul>
+        </span>;
+    }
+    showAdvancedOptions(e) {
+        const ids = ['blastn', 'tblastn', 'blastp', 'blastx', 'tblastx'];
+        const method = this.state.method.toLowerCase();
+        // hide options for other algorithms and only show for selected algorithm
+        for (const id of ids) {
+            $(`#${id}`)[id === method ? 'show' : 'hide']();
+        }
+    }
+    render() {
+        var classNames = 'form-control';
+        if (this.state.value.trim()) {
+            classNames += ' yellow-background';
+        }
+        return (
+            <div className="col-md-7">
+                <div className="form-group">
+                    <div className="col-md-12">
+                        <div className="input-group">
+                            <label className="control-label" htmlFor="advanced">
+                                Advanced parameters:
+                                {/* only show link to advanced parameters if blast method is known */}
+                                {this.state.method && <sup style={{ marginLeft: '2px' }}>
+                                    <a href=''
+                                        onClick={this.showAdvancedOptions}
+                                        data-toggle="modal" data-target="#help">
+                                        <i className="fa fa-question-circle"></i>
+                                    </a>
+                                </sup>}
+                            </label>
+                            <input type="text" className={classNames}
+                                onChange={e => this.updateBox(e.target.value)}
+                                id="advanced" name="advanced" value={this.state.value}
+                                placeholder="eg: -evalue 1.0e-5 -num_alignments 100"
+                                title="View, and enter advanced parameters."
+                            />
+                            {Object.keys(this.state.preOpts).length > 1 && this.optionsJSX()}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+}

data/public/js/query.js

@@ -1,50 +1,47 @@
-import React from 'react';
+import React, { Component, createRef } 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
+import Utils from './utils';
 
 /**
  * Query component displays query defline, graphical overview, length
  * distribution, and hits table.
  */
-export default React.createClass({
-
+export class ReportQuery extends Component {
+    // 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() {
+        // 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;
+    }
     // Kind of public API //
 
     /**
      * Returns the id of query.
      */
-    domID: function () {
+    domID() {
         return 'Query_' + this.props.query.number;
-    },
+    }
 
-    queryLength: function () {
+    queryLength() {
         return this.props.query.length;
-    },
+    }
 
     /**
      * Returns number of hits.
      */
-    numhits: function () {
+    numhits() {
         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 () {
+    }
+    headerJSX() {
         var meta = `length: ${this.queryLength().toLocaleString()}`;
         if (this.props.showQueryCrumbs) {
             meta = `query ${this.props.query.number}, ` + meta;
@@ -54,45 +51,306 @@ export default React.createClass({
                 <strong>Query=&nbsp;{this.props.query.id}</strong>&nbsp;
                 {this.props.query.title}
             </h3>
-            <span className="label label-reset pos-label">{ meta }</span>
+            <span className="label label-reset pos-label">{meta}</span>
         </div>;
-    },
+    }
 
-    hitsListJSX: function () {
+    hitsListJSX() {
         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 () {
+    noHitsJSX() {
         return <div className="section-content">
             <strong> ****** No hits found ****** </strong>
         </div>;
-    },
+    }
+    render() {
+        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>
+        );
+    }
+}
 
-    // 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;
+
+/**
+ * Query widget for Search component.
+ */
+export class SearchQueryWidget extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            value: $('input#input_sequence').val() || ''
+        };
+        this.value = this.value.bind(this);
+        this.clear = this.clear.bind(this);
+        this.focus = this.focus.bind(this);
+        this.isEmpty = this.isEmpty.bind(this);
+        this.textarea = this.textarea.bind(this);
+        this.controls = this.controls.bind(this);
+        this.handleInput = this.handleInput.bind(this);
+        this.hideShowButton = this.hideShowButton.bind(this);
+        this.indicateError = this.indicateError.bind(this);
+        this.indicateNormal = this.indicateNormal.bind(this);
+        this.type = this.type.bind(this);
+        this.guessSequenceType = this.guessSequenceType.bind(this);
+        this.notify = this.notify.bind(this);
+
+        this.textareaRef = createRef()
+        this.controlsRef = createRef()
+    }
+
+
+    // LIFECYCLE Methods
+
+    componentDidMount() {
+        $('body').click(function () {
+            $('.notifications .active').hide('drop', { direction: 'up' }).removeClass('active');
+        });
+    }
+
+    componentDidUpdate() {
+        this.hideShowButton();
+        var type = this.type();
+        if (!type || type !== this._type) {
+            this._type = type;
+            this.notify(type);
+            this.props.onSequenceTypeChanged(type);
+        }
+    }
+
+    // Kind of public API. //
+
+    /**
+     * Returns query sequence if no argument is provided (or null or undefined
+     * is provided as argument). Otherwise, sets query sequenced to the given
+     * value and returns `this`.
+     *
+     * Default/initial state of query sequence is an empty string. Caller must
+     * explicitly provide empty string as argument to "reset" query sequence.
+     */
+    value(val) {
+        if (val == null) {
+            // i.e., val is null or undefined
+            return this.state.value;
+        }
+        else {
+            this.setState({
+                value: val
+            });
+            return this;
+        }
+    }
+
+    /**
+     * Clears textarea. Returns `this`.
+     *
+     * Clearing textarea also causes it to be focussed.
+     */
+    clear() {
+        return this.value('').focus();
     }
-});
+
+    /**
+     * Focuses textarea. Returns `this`.
+     */
+    focus() {
+        this.textarea().focus();
+        return this;
+    }
+
+    /**
+     * Returns true if query is absent ('', undefined, null), false otherwise.
+     */
+    isEmpty() {
+        return !this.value();
+    }
+
+
+    // Internal helpers. //
+
+    textarea() {
+        return $(this.textareaRef.current);
+    }
+
+    controls() {
+        return $(this.controlsRef.current);
+    }
+
+    handleInput(evt) {
+        this.value(evt.target.value);
+    }
+
+    /**
+     * Hides or shows 'clear sequence' button.
+     *
+     * Rendering the 'clear sequence' button takes into account presence or
+     * absence of a scrollbar.
+     *
+     * Called by `componentDidUpdate`.
+     */
+    hideShowButton() {
+        if (!this.isEmpty()) {
+            // Calculation below is based on -
+            // http://chris-spittles.co.uk/jquery-calculate-scrollbar-width/
+            // FIXME: can reflow be avoided here?
+            var textareaNode = this.textarea()[0];
+            var sequenceControlsRight = textareaNode.offsetWidth - textareaNode.clientWidth;
+            this.controls().css('right', sequenceControlsRight + 17);
+            this.controls().removeClass('hidden');
+        }
+        else {
+            // FIXME: what are lines 1, 2, & 3 doing here?
+            this.textarea().parent().removeClass('has-error');
+            this.$sequenceFile = $('#sequence-file');
+            this.$sequenceFile.empty();
+
+            this.controls().addClass('hidden');
+        }
+    }
+
+    /**
+     * Put red border around textarea.
+     */
+    indicateError() {
+        this.textarea().parent().addClass('has-error');
+    }
+
+    /**
+     * Put normal blue border around textarea.
+     */
+    indicateNormal() {
+        this.textarea().parent().removeClass('has-error');
+    }
+
+    /**
+     * Returns type of the query sequence (nucleotide, protein, mixed).
+     *
+     * Query widget supports executing a callback when the query type changes.
+     * Components interested in query type should register a callback instead
+     * of directly calling this method.
+     */
+    type() {
+        var sequences = this.value().split(/>.*/);
+
+        var type, tmp;
+
+        for (var i = 0; i < sequences.length; i++) {
+            tmp = this.guessSequenceType(sequences[i]);
+
+            // could not guess the sequence type; try the next sequence
+            if (!tmp) { continue; }
+
+            if (!type) {
+                // successfully guessed the type of atleast one sequence
+                type = tmp;
+            }
+            else if (tmp !== type) {
+                // user has mixed different type of sequences
+                return 'mixed';
+            }
+        }
+
+        return type;
+    }
+
+    /**
+     * Guesses and returns the type of the given sequence (nucleotide,
+     * protein).
+     */
+    guessSequenceType(sequence) {
+        // remove 'noisy' characters
+        sequence = sequence.replace(/[^A-Z]/gi, ''); // non-letter characters
+        sequence = sequence.replace(/[NX]/gi, ''); // ambiguous  characters
+
+        // can't determine the type of ultrashort queries
+        if (sequence.length < 10) {
+            return undefined;
+        }
+
+        // count the number of putative NA
+        var putative_NA_count = 0;
+        for (var i = 0; i < sequence.length; i++) {
+            if (sequence[i].match(/[ACGTU]/i)) {
+                putative_NA_count += 1;
+            }
+        }
+
+        var threshold = 0.9 * sequence.length;
+        return putative_NA_count > threshold ? 'nucleotide' : 'protein';
+    }
+
+    notify(type) {
+        clearTimeout(this.notification_timeout);
+        this.indicateNormal();
+        $('.notifications .active').hide().removeClass('active');
+
+        if (type) {
+            $('#' + type + '-sequence-notification').show('drop', { direction: 'up' }).addClass('active');
+
+            this.notification_timeout = setTimeout(function () {
+                $('.notifications .active').hide('drop', { direction: 'up' }).removeClass('active');
+            }, 5000);
+
+            if (type === 'mixed') {
+                this.indicateError();
+            }
+        }
+    }
+
+    render() {
+        return (
+            <div
+                className="col-md-12">
+                <div
+                    className="sequence">
+                    <textarea
+                        id="sequence" ref={this.textareaRef}
+                        className="form-control text-monospace"
+                        name="sequence" value={this.state.value}
+                        placeholder="Paste query sequence(s) or drag file
+                        containing query sequence(s) in FASTA format here ..."
+                        spellCheck="false" autoFocus
+                        onChange={this.handleInput}>
+                    </textarea>
+                </div>
+                <div
+                    className="hidden"
+                    style={{ position: 'absolute', top: '4px', right: '19px' }}
+                    ref={this.controlsRef}>
+                    <button
+                        type="button"
+                        className="btn btn-sm btn-default" id="btn-sequence-clear"
+                        title="Clear query sequence(s)."
+                        onClick={this.clear}>
+                        <span id="sequence-file"></span>
+                        <i className="fa fa-times"></i>
+                    </button>
+                </div>
+            </div>
+        );
+    }
+}
+
 
 /**
  * Renders summary of all hits per query in a tabular form.
  */
-var HitsTable = React.createClass({
-    mixins: [Utils],
-    render: function () {
-        var hasName = _.every(this.props.query.hits, function(hit) {
+
+class HitsTable extends Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        var hasName = _.every(this.props.query.hits, function (hit) {
             return hit.sciname !== '';
         });
 
@@ -109,21 +367,23 @@ var HitsTable = React.createClass({
 
         return (
             <div className="table-hit-overview">
-                <h4 className="caption" data-toggle="collapse" data-target={'#Query_'+this.props.query.number+'HT_'+this.props.query.number}>
+                <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>Sequences producing significant alignments</span>
                 </h4>
-                <div className="collapsed in"id={'Query_'+ this.props.query.number + 'HT_'+ this.props.query.number}>
+                <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 width={`${seqwidth}%`}>Similar sequences</th>
-                            {hasName && <th width="15%" className="text-left">Species</th>}
-                            {!this.props.imported_xml && <th width="15%" className="text-right">Query coverage (%)</th>}
-                            <th width="10%" className="text-right">Total score</th>
-                            <th width="10%" className="text-right">E value</th>
-                            <th width="10%" className="text-right">Identity (%)</th>
+                            <tr>
+                                <th className="text-left">#</th>
+                                <th width={`${seqwidth}%`}>Similar sequences</th>
+                                {hasName && <th width="15%" className="text-left">Species</th>}
+                                {!this.props.imported_xml && <th width="15%" className="text-right">Query coverage (%)</th>}
+                                <th width="10%" className="text-right">Total score</th>
+                                <th width="10%" className="text-right">E value</th>
+                                <th width="10%" className="text-right">Identity (%)</th>
+                            </tr>
                         </thead>
                         <tbody>
                             {
@@ -145,8 +405,8 @@ var HitsTable = React.createClass({
                                             }
                                             {!this.props.imported_xml && <td className="text-right">{hit.qcovs}</td>}
                                             <td className="text-right">{hit.total_score}</td>
-                                            <td className="text-right">{this.inExponential(hit.hsps[0].evalue)}</td>
-                                            <td className="text-right">{this.inPercentage(hit.hsps[0].identity, hit.hsps[0].length)}</td>
+                                            <td className="text-right">{Utils.inExponential(hit.hsps[0].evalue)}</td>
+                                            <td className="text-right">{Utils.inPercentage(hit.hsps[0].identity, hit.hsps[0].length)}</td>
                                         </tr>
                                     );
                                 }, this))
@@ -157,4 +417,4 @@ var HitsTable = React.createClass({
             </div>
         );
     }
-});
+}