sequenceserver 2.2.0 → 3.0

data/public/js/report.js

@@ -8,15 +8,14 @@ import { ReportQuery } from './query';
 import Hit from './hit';
 import HSP from './hsp';
 import AlignmentExporter from './alignment_exporter';
-
-
-
+import ReportPlugins from 'report_plugins';
 
 /**
  * Renders entire report.
  *
  * Composed of Query and Sidebar components.
  */
+
 class Report extends Component {
     constructor(props) {
         super(props);
@@ -47,15 +46,21 @@ class Report extends Component {
         this.prepareAlignmentOfSelectedHits = this.prepareAlignmentOfSelectedHits.bind(this);
         this.prepareAlignmentOfAllHits = this.prepareAlignmentOfAllHits.bind(this);
         this.setStateFromJSON = this.setStateFromJSON.bind(this);
+        this.plugins = new ReportPlugins(this);
     }
+
     /**
    * Fetch results.
    */
     fetchResults() {
+        const path = location.pathname + '.json' + location.search;
+        this.pollPeriodically(path, this.setStateFromJSON, this.props.showErrorModal);
+    }
+
+    pollPeriodically(path, callback, errCallback) {
         var intervals = [200, 400, 800, 1200, 2000, 3000, 5000];
-        var component = this;
         function poll() {
-            $.getJSON(location.pathname + '.json' + location.search).complete(function (jqXHR) {
+            $.getJSON(path).complete(function (jqXHR) {
                 switch (jqXHR.status) {
                 case 202:
                     var interval;
@@ -67,12 +72,12 @@ class Report extends Component {
                     setTimeout(poll, interval);
                     break;
                 case 200:
-                    component.setStateFromJSON(jqXHR.responseJSON);
+                    callback(jqXHR.responseJSON);
                     break;
-                case 404:
                 case 400:
+                case 422:
                 case 500:
-                    component.props.showErrorModal(jqXHR.responseJSON);
+                    errCallback(jqXHR.responseJSON);
                     break;
                 }
             });
@@ -93,6 +98,7 @@ class Report extends Component {
             this.setState(responseJSON, this.prepareAlignmentOfAllHits);
         }
     }
+
     /**
    * 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
@@ -100,6 +106,7 @@ class Report extends Component {
    */
     componentDidMount() {
         this.fetchResults();
+        this.plugins.init();
         // This sets up an event handler which enables users to select text from
         // hit header without collapsing the hit.
         this.preventCollapseOnSelection();
@@ -112,7 +119,7 @@ class Report extends Component {
    * and circos would have been rendered at this point. At this stage we kick
    * start iteratively adding 1 HSP to the page every 25 milli-seconds.
    */
-    componentDidUpdate() {
+    componentDidUpdate(prevProps, prevState) {
         // Log to console how long the last update take?
         // console.log((Date.now() - this.lastTimeStamp) / 1000);
 
@@ -130,6 +137,8 @@ class Report extends Component {
         } else {
             this.componentFinishedUpdating();
         }
+
+        this.plugins.componentDidUpdate(prevProps, prevState);
     }
 
     /**
@@ -140,13 +149,14 @@ class Report extends Component {
         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
+            // 3 hsps 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(
                     <ReportQuery
-                        key={'Query_' + query.number}
+                        key={'Query_' + query.id}
                         query={query}
                         program={this.state.program}
                         querydb={this.state.querydb}
@@ -156,6 +166,8 @@ class Report extends Component {
                         veryBig={this.state.veryBig}
                     />
                 );
+
+                results.push(...this.plugins.queryResults(query));
             }
 
             while (this.nextHit < query.hits.length) {
@@ -190,11 +202,11 @@ class Report extends Component {
                         <HSP
                             key={
                                 'Query_' +
-                query.number +
-                '_Hit_' +
-                hit.number +
-                '_HSP_' +
-                hsp.number
+                                query.number +
+                                '_Hit_' +
+                                hit.number +
+                                '_HSP_' +
+                                hsp.number
                             }
                             query={query}
                             hit={hit}
@@ -261,6 +273,9 @@ class Report extends Component {
                         <br />
             You can bookmark the page and come back to it later or share the
             link with someone.
+                        <br />
+                        <br />
+                        { process.env.targetEnv === 'cloud' && <b>If the job takes more than 10 minutes to complete, we will send you an email upon completion.</b> }
                     </p>
                 </div>
             </div>
@@ -451,7 +466,7 @@ class Report extends Component {
     toggleTable() {
         $('body').on(
             'mousedown',
-            '.resultn > .section-content > .table-hit-overview > .caption',
+            '.resultn .caption[data-toggle="collapse"]',
             function (event) {
                 var $this = $(this);
                 $this.on('mouseup mousemove', function handler(event) {
@@ -509,6 +524,7 @@ class Report extends Component {
         } else {
             $hit.removeClass('glow');
             $hit.next('.hsp').removeClass('glow');
+            $('.download-fasta-of-selected').attr('href', '#').removeAttr('download');
         }
 
         var $a = $('.download-fasta-of-selected');

data/public/js/search.js

@@ -3,14 +3,6 @@ import React, { Component } from "react";
 import { createRoot } from "react-dom/client";
 import { DnD } from "./dnd";
 import { Form } from "./form";
-/**
- * Load necessary polyfills.
- */
-$.webshims.setOptions(
-  "basePath",
-  "/vendor/npm/webshim@1.15.8/js-webshim/minified/shims/"
-);
-$.webshims.polyfill("forms");
 
 /**
  * Clear sessionStorage on reload.

data/public/js/sidebar.js

@@ -4,7 +4,7 @@ import _ from 'underscore';
 import downloadFASTA from './download_fasta';
 import asMailtoHref from './mailto';
 import CloudShareModal from './cloud_share_modal';
-
+import DownloadLinks from 'download_links';
 /**
  * checks whether code is being run by jest
  */
@@ -172,6 +172,9 @@ export default class extends Component {
         var sequence_ids = $('.hit-links :checkbox:checked').map(function () {
             return this.value;
         }).get();
+        if (sequence_ids.length === 0) {
+            return false;
+        }
         var database_ids = _.map(this.props.data.querydb, _.iteratee('id'));
         downloadFASTA(sequence_ids, database_ids);
         return false;
@@ -347,6 +350,7 @@ export default class extends Component {
                             </a>
                         </li>
                     }
+                    <DownloadLinks imported_xml={this.props.data.imported_xml} search_id={this.props.data.search_id} />
                 </ul>
             </div>
         );
@@ -406,6 +410,12 @@ export default class extends Component {
                 {this.topPanelJSX()}
                 {this.downloadsPanelJSX()}
                 {this.sharingPanelJSX()}
+                <div className="referral-panel">
+                    <div className="section-header-sidebar">
+                        <h4>Recommend SequenceServer</h4>
+                        <p><a href="https://sequenceserver.com/referral-program" target="_blank">Earn up to $100 per signup</a></p>
+                    </div>
+                </div>
             </div>
         );
     }

data/public/js/tests/mock_data/sequences.js

@@ -29,4 +29,21 @@ GAGATGGAAATGGCCGATTACCCGCTCGCCTATGATATTTCCCCGTATCTTCCGCCGTTC
 CTGTCGCGAGCGAGGGCACGGGGAATGTTAGACGGTCGCTTCGCCGGCAGACGCTACCGA
 AGGGAGTCGCGGGGCATTCACGAGGAGTGTTGCATCAACGGATGTACGATAAACGAATTG
 ACCAGCTACTGCGGCCCC
-`;
+`;
+
+export const FASTQ_SEQUENCE =
+`@SRR001666.1 071112_SLXA-EAS1_s_7:5:1:817:345 length=72
+GGGTGATGGCCGCTGCCGATGGCGTCAAATCCCACCAAGTTACCCTTAACAACTTAAGGGTTTTCAAATAGA
++SRR001666.1 071112_SLXA-EAS1_s_7:5:1:817:345 length=72
+IIIIIIIIIIIIIIIIIIIIIIIIIIIIII9IG9ICIIIIIIIIIIIIIIIIIIIIDIIIIIII>IIIIII/
+@SRR001666.2 071112_SLXA-EAS1_s_7:5:1:801:338 length=72
+GTTCAGGGATACGACGTTTGTATTTTAAGAATCTGAAGCAGAAGTCGATGATAATACGCGTCGTTTTATCAT
++SRR001666.2 071112_SLXA-EAS1_s_7:5:1:801:338 length=72
+IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII6IBIIIIIIIIIIIIIIIIIIIIIIIGII>IIIII-I)8I
+`;
+
+export const FASTA_OF_FASTQ_SEQUENCE =
+`>SRR001666.1 071112_SLXA-EAS1_s_7:5:1:817:345 length=72
+GGGTGATGGCCGCTGCCGATGGCGTCAAATCCCACCAAGTTACCCTTAACAACTTAAGGGTTTTCAAATAGA
+>SRR001666.2 071112_SLXA-EAS1_s_7:5:1:801:338 length=72
+GTTCAGGGATACGACGTTTGTATTTTAAGAATCTGAAGCAGAAGTCGATGATAATACGCGTCGTTTTATCAT`;

data/public/js/tests/search_query.spec.js

@@ -3,7 +3,7 @@
 import { render, screen, fireEvent } from '@testing-library/react';
 import { SearchQueryWidget } from '../query';
 import { Form } from '../form';
-import { AMINO_ACID_SEQUENCE, NUCLEOTIDE_SEQUENCE } from './mock_data/sequences';
+import { AMINO_ACID_SEQUENCE, NUCLEOTIDE_SEQUENCE, FASTQ_SEQUENCE, FASTA_OF_FASTQ_SEQUENCE } from './mock_data/sequences';
 import '@testing-library/jest-dom/extend-expect';
 import '@testing-library/react/dont-cleanup-after-each';
 
@@ -16,7 +16,7 @@ describe('SEARCH COMPONENT', () => {
         } />).container;
         inputEl = screen.getByRole('textbox', { name: '' });
     });
-    
+
     test('should render the search component textarea', () => {
         expect(inputEl).toHaveClass('form-control');
     });
@@ -47,7 +47,7 @@ describe('SEARCH COMPONENT', () => {
         expect(activeNotification.id).toBe('nucleotide-sequence-notification');
         expect(alertWrapper).toHaveTextContent('Detected: nucleotide sequence(s).');
     });
-    
+
     test('should correctly detect the mixed sequences and show error notification', () => {
         fireEvent.change(inputEl, { target: { value: `${NUCLEOTIDE_SEQUENCE}${AMINO_ACID_SEQUENCE}` } });
         const activeNotification = container.querySelector('.notification.active');
@@ -55,4 +55,13 @@ describe('SEARCH COMPONENT', () => {
         const alertWrapper = activeNotification.children[0];
         expect(alertWrapper).toHaveTextContent('Error: mixed nucleotide and amino-acid sequences detected.');
     });
+
+    test('should correctly detect FASTQ and convert it to FASTA', () => {
+        fireEvent.change(inputEl, { target: { value: FASTQ_SEQUENCE } });
+        const activeNotification = container.querySelector('.notification.active');
+        const alertWrapper = activeNotification.children[0];
+        expect(activeNotification.id).toBe('fastq-sequence-notification');
+        expect(alertWrapper).toHaveTextContent('Detected FASTQ and automatically converted to FASTA.');
+        expect(inputEl).toHaveValue(FASTA_OF_FASTQ_SEQUENCE);
+    });
 });