sequenceserver 2.0.0.rc3 → 2.0.0.rc8

data/public/js/hit.js

@@ -16,6 +16,13 @@ export default React.createClass({
         return this.props.hit.accession;
     },
 
+    /**
+     * Returns id of the hit sequence.
+     */
+    sequenceID: function () {
+        return this.props.hit.id;
+    },
+
     /**
      * Returns length of the hit sequence.
      */
@@ -41,12 +48,14 @@ export default React.createClass({
     },
 
     viewSequenceLink: function () {
-        return encodeURI(`get_sequence/?sequence_ids=${this.accession()}&database_ids=${this.databaseIDs()}`);
+        var sequenceIDs = encodeURIComponent(this.sequenceID());
+        var databaseIDs = encodeURIComponent(this.databaseIDs());
+        return `get_sequence/?sequence_ids=${sequenceIDs}&database_ids=${databaseIDs}`;
     },
 
     downloadFASTA: function (event) {
-        var accessions = [this.accession()];
-        downloadFASTA(accessions, this.databaseIDs());
+        var sequenceIDs = [this.sequenceID()];
+        downloadFASTA(sequenceIDs, this.databaseIDs());
     },
 
     // Event-handler for exporting alignments.
@@ -129,7 +138,7 @@ export default React.createClass({
             <div className="hit-links">
                 <label>
                     <input type="checkbox" id={this.domID() + '_checkbox'}
-                        value={this.accession()} onChange={function () {
+                        value={this.sequenceID()} onChange={function () {
                             this.props.selectHit(this.domID() + '_checkbox');
                         }.bind(this)} data-target={'#' + this.domID()}
                     /> Select
@@ -182,7 +191,7 @@ export default React.createClass({
         return {
             text: 'Alignment',
             icon: 'fa-download',
-            className: 'download-fa',
+            className: 'download-aln',
             onClick: () => this.downloadAlignment()
         };
     },

data/public/js/jquery_world.js

@@ -55,7 +55,7 @@ import 'webshim';
             ._tooltip('destroy')
             ._tooltip($.extend({
                 container: 'body',
-                placement: 'left',
+                placement: 'bottom',
                 delay: {
                     show: 1000
                 }

data/public/js/query.js

@@ -92,10 +92,20 @@ export default React.createClass({
 var HitsTable = React.createClass({
     mixins: [Utils],
     render: function () {
-        var count = 0,
-            hasName = _.every(this.props.query.hits, function(hit) {
-                return hit.sciname !== '';
-            });
+        var hasName = _.every(this.props.query.hits, function(hit) {
+            return hit.sciname !== '';
+        });
+
+        // Width of sequence column is 55% when species name is not shown and
+        // query coverage is.
+        var seqwidth = 55;
+        // If we are going to show species name, then reduce the width of
+        // sequence column by the width of species column.
+        if (hasName) seqwidth -= 15;
+        // If we are not going to show query coverage (i.e. for imported XML),
+        // then increase the width of sequence column by the width of coverage
+        // column.
+        if (this.props.imported_xml) seqwidth += 15;
 
         return (
             <div className="table-hit-overview">
@@ -108,12 +118,12 @@ var HitsTable = React.createClass({
                         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"
+                            <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" data-toggle="tooltip"
                                 data-placement="left" title="Total identity of all hsps / total length of all hsps">
                         Identity (%)
                             </th>
@@ -124,12 +134,18 @@ var HitsTable = React.createClass({
                                     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 className="nowrap-ellipsis"
+                                                title={`${hit.id} ${hit.title}`}
+                                                data-toggle="tooltip" data-placement="left">
+                                                <a href={'#Query_' + this.props.query.number + '_hit_' + hit.number}
+                                                    className="btn-link">{hit.id} {hit.title}</a>
                                             </td>
-                                            {hasName && <td className="text-left">{hit.sciname}</td>}
+                                            {hasName &&
+                                                <td className="nowrap-ellipsis" title={hit.sciname}
+                                                    data-toggle="tooltip" data-placement="top">
+                                                    {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>

data/public/js/report.js

@@ -9,7 +9,7 @@ import Hit from './hit';
 import HSP from './hsp';
 
 import SequenceModal from './sequence_modal';
-import showErrorModal from './error_modal';
+import ErrorModal from './error_modal';
 
 /**
  * Base component of report page. This component is later rendered into page's
@@ -23,7 +23,8 @@ var Page = React.createClass({
                     the Report component to render itself in. */}
                 <div className="container">
                     <Report showSequenceModal={ _ => this.showSequenceModal(_) }
-                        getCharacterWidth={ () => this.getCharacterWidth() } />
+                        getCharacterWidth={ () => this.getCharacterWidth() }
+                        showErrorModal={ (...args) => this.showErrorModal(...args) } />
                 </div>
 
                 {/* Add a hidden span tag containing chars used in HSPs */}
@@ -34,7 +35,10 @@ var Page = React.createClass({
                 {/* Required by Grapher for SVG and PNG download */}
                 <canvas id="png-exporter" hidden></canvas>
 
-                <SequenceModal ref="sequenceModal" />
+                <SequenceModal ref="sequenceModal"
+                    showErrorModal={ (...args) => this.showErrorModal(...args) }/>
+
+                <ErrorModal ref="errorModal" />
             </div>
         );
     },
@@ -48,6 +52,10 @@ var Page = React.createClass({
         this.refs.sequenceModal.show(url);
     },
 
+    showErrorModal: function (errorData, beforeShow) {
+        this.refs.errorModal.show(errorData, beforeShow);
+    },
+
     getCharacterWidth: function () {
         if (!this.characterWidth) {
             var $hspChars = $(React.findDOMNode(this.refs.hspChars));
@@ -118,7 +126,7 @@ var Report = React.createClass({
                     case 404:
                     case 400:
                     case 500:
-                        showErrorModal(jqXHR.responseJSON);
+                        component.props.showErrorModal(jqXHR.responseJSON);
                         break;
                     }
                 });
@@ -157,8 +165,7 @@ var Report = React.createClass({
      * 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.
+     * start iteratively adding 1 HSP to the page every 25 milli-seconds.
      */
     componentDidUpdate: function () {
         // Log to console how long the last update take?

data/public/js/search.js

@@ -7,6 +7,14 @@ import _ from 'underscore';
  */
 $.webshims.polyfill('forms');
 
+/**
+ * Clear sessionStorage on reload.
+*/
+if (performance.navigation.type == performance.navigation.TYPE_RELOAD) {
+    sessionStorage.clear();
+    history.replaceState(null, '', location.href.split('?')[0]);
+}
+
 var Page = React.createClass({
     render: function () {
         return (
@@ -231,12 +239,13 @@ var Form = React.createClass({
         }.bind(this));
 
         /* Enable submitting form on Cmd+Enter */
-        $(document).bind('keydown', _.bind(function (e) {
-            if (e.ctrlKey && e.keyCode === 13 &&
-               !$('#method').is(':disabled')) {
-                $(this.getDOMNode()).trigger('submit');
+        $(document).on('keydown', (e)=> {
+            var $button = $('#method');
+            if (!$button.is(':disabled') &&
+                e.ctrlKey && e.key === 'Enter') {
+                $button.trigger('click');
             }
-        }, this));
+        });
     },
 
     determineBlastMethod: function () {
@@ -303,6 +312,17 @@ var Form = React.createClass({
         }
     },
 
+    handleNewTabCheckbox: function () {
+        setTimeout(() => {
+            if ($('#toggleNewTab').is(':checked')) {
+                $('#blast').attr('target', '_blank');
+            }
+            else {
+                $('#blast').attr('target', '_self');
+            }
+        });
+    },
+
     render: function () {
         return (
             <div className="container">
@@ -320,6 +340,15 @@ var Form = React.createClass({
                         onDatabaseTypeChanged={this.handleDatabaseTypeChanaged} />
                     <div className="form-group">
                         <Options ref="opts"/>
+                        <div className="col-md-2">
+                            <div className="form-group" style={{'textAlign': 'center', 'padding': '7px 0'}}>
+                                <label>
+                                    <input type="checkbox" id="toggleNewTab"
+                                        onChange={()=> { this.handleNewTabCheckbox(); }}
+                                    /> Open results in new tab
+                                </label>
+                            </div>
+                        </div>
                         <SearchButton ref="button" onAlgoChanged={this.handleAlgoChanged}/>
                     </div>
                 </form>
@@ -614,8 +643,7 @@ var MixedNotification = React.createClass({
                 style={{ display: 'none' }}>
                 <div
                     className="alert-danger col-md-10 col-md-offset-1">
-                    Detected: mixed nucleotide and amino-acid sequences. We
-                    can't handle that. Please try one sequence at a time.
+                    Error: mixed nucleotide and amino-acid sequences detected.
                 </div>
             </div>
         );
@@ -628,14 +656,12 @@ var Databases = React.createClass({
     },
 
     databases: function (category) {
-        if (!category) {
-            return this.props.databases.slice();
+        var databases = this.props.databases;
+        if (category) {
+            databases = _.select(databases, database => database.type === category);
         }
 
-        return _.select(this.props.databases,
-            function (database) {
-                return database.type === category;
-            });
+        return _.sortBy(databases, 'title');
     },
 
     nselected: function () {
@@ -649,7 +675,7 @@ var Databases = React.createClass({
 
     handleClick: function (database) {
         var type = this.nselected() ? database.type : '';
-        this.setState({type: type});
+        if (type != this.state.type) this.setState({type: type});
     },
 
     handleToggle: function (toggleState, type) {
@@ -736,10 +762,6 @@ var Databases = React.createClass({
         );
     },
 
-    //shouldComponentUpdate: function (props, state) {
-    //return !(state.type && state.type === this.state.type);
-    //},
-
     componentDidUpdate: function () {
         if (this.databases() && this.databases().length === 1) {
             $('.databases').find('input').prop('checked',true);
@@ -749,10 +771,8 @@ var Databases = React.createClass({
         if (this.props.preSelectedDbs) {
             var selectors = this.props.preSelectedDbs.map(db => `input[value=${db.id}]`);
             $(...selectors).prop('checked',true);
-            setTimeout(() => {
-                this.handleClick(this.props.preSelectedDbs[0]);
-                this.props.preSelectedDbs = null;
-            });
+            this.handleClick(this.props.preSelectedDbs[0]);
+            this.props.preSelectedDbs = null;
         }
         this.props.onDatabaseTypeChanged(this.state.type);
     }
@@ -777,7 +797,7 @@ var Options = React.createClass({
             classNames += ' yellow-background';
         }
         return (
-            <div className="col-md-8">
+            <div className="col-md-7">
                 <div className="form-group">
                     <div className="col-md-12">
                         <div className="input-group">
@@ -915,7 +935,7 @@ var SearchButton = React.createClass({
         var multi = methods.length > 1;
 
         return (
-            <div className="col-md-4">
+            <div className="col-md-3">
                 <div className="form-group">
                     <div className="col-md-12">
                         <div

data/public/js/sequence_modal.js

@@ -1,7 +1,6 @@
 import './sequence';
 import React from 'react';
 import _ from 'underscore';
-import showErrorModal from './error_modal';
 
 /**
  * Takes sequence accession as props, fetches the sequence from the server, and
@@ -54,6 +53,13 @@ export default class SequenceModal extends React.Component {
         });
     }
 
+    /**
+     * Hide sequence viewer.
+     */
+    hide () {
+        this.modal().modal('hide');
+    }
+
     /**
      * Loads sequence using AJAX and updates modal state.
      */
@@ -67,10 +73,9 @@ export default class SequenceModal extends React.Component {
                     requestCompleted: true
                 });
             }, this))
-            .fail(function (jqXHR, status, error) {
-                showErrorModal(jqXHR, function () {
-                    this.hide();
-                });
+            .fail((jqXHR, status, error) => {
+                this.hide();
+                this.props.showErrorModal(jqXHR.responseJSON);
             });
 
     }

data/public/js/sidebar.js

@@ -9,6 +9,15 @@ import AlignmentExporter from './alignment_exporter'; // to download textual ali
  * Renders links for navigating to each query.
  */
 export default React.createClass({
+    /**
+     * Clear sessionStorage - useful to initiate a new search in the same tab.
+     * Passing sessionStorage.clear directly as onclick callback didn't work
+     * (on macOS Chrome).
+    */
+    clearSession: function () {
+        sessionStorage.clear();
+    },
+
     /**
      * Event-handler for downloading fasta of all hits.
      */
@@ -16,7 +25,7 @@ export default React.createClass({
         var sequence_ids = [];
         this.props.data.queries.forEach(
             (query) => query.hits.forEach(
-                (hit) => sequence_ids.push(hit.accession)));
+                (hit) => sequence_ids.push(hit.id)));
         var database_ids = this.props.data.querydb.map((querydb) => querydb.id);
         downloadFASTA(sequence_ids, database_ids);
         return false;
@@ -66,7 +75,7 @@ export default React.createClass({
         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) {
+                if (_.indexOf(sequence_ids, hit.id) != -1) {
                     _.each(hit.hsps, function (hsp) {
                         hsp.hit_id = hit.id;
                         hsp.query_id = query.id;
@@ -84,43 +93,43 @@ export default React.createClass({
     render: function () {
         return (
             <div className="sidebar">
-                { this.props.shouldShowIndex && this.index() }
-                { this.downloads() }
+                { this.topPanelJSX() }
+                { this.downloadsPanelJSX() }
             </div>
         );
     },
 
-    index: function () {
+    topPanelJSX: function () {
+        var path = location.pathname.split('/');
+        // Get job id.
+        var job_id = path.pop();
+        // Deriving rootURL this way is required for subURI deployments
+        // - we cannot just send to '/'.
+        var rootURL = path.join('/');
+
         return (
-            <div className="index">
-                <div
-                    className="section-header-sidebar">
+            <div className="sidebar-top-panel">
+                <div className="section-header-sidebar">
                     <h4>
-                        { this.summary() }
+                        { this.summaryString() }
                     </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="btn-link nowrap-ellipsis hover-bold"
-                                        href={'#Query_' + query.number}
-                                        title={'Query= ' + query.id + ' ' + query.title}>
-                                        {'Query= ' + query.id}
-                                    </a>
-                                </li>
-                            );
-                        }, this))
-                    }
-                </ul>
+                <div>
+                    <a href={`${rootURL}/?job_id=${job_id}`}>
+                        <i className="fa fa-pencil"></i> Edit search
+                    </a>
+                    <span className="line">|</span>
+                    <a href={`${rootURL}/`}
+                        onClick={this.clearSession}>
+                        <i className="fa fa-file-o"></i> New search
+                    </a>
+                </div>
+                { this.props.shouldShowIndex && this.indexJSX() }
             </div>
         );
     },
 
-    summary: function () {
+    summaryString: function () {
         var program = this.props.data.program;
         var numqueries = this.props.data.queries.length;
         var numquerydb = this.props.data.querydb.length;
@@ -132,7 +141,22 @@ export default React.createClass({
         );
     },
 
-    downloads: function () {
+    indexJSX: function () {
+        return <ul className="nav hover-reset active-bold"> {
+            _.map(this.props.data.queries, (query)=> {
+                return <li key={'Side_bar_'+query.id}>
+                    <a className="btn-link nowrap-ellipsis hover-bold"
+                        title={'Query= ' + query.id + ' ' + query.title}
+                        href={'#Query_' + query.number}>
+                        {'Query= ' + query.id}
+                    </a>
+                </li>;
+            })
+        }
+        </ul>;
+    },
+
+    downloadsPanelJSX: function () {
         return (
             <div className="downloads">
                 <div className="section-header-sidebar">