sequenceserver 2.1.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);
@@ -28,6 +27,8 @@ class Report extends Component {
         this.nextHSP = 0;
         this.maxHSPs = 3; // max HSPs to render in a cycle
         this.state = {
+            user_warning: null,
+            download_links: [],
             search_id: '',
             seqserv_version: '',
             program: '',
@@ -45,16 +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() {
-        var intervals = [200, 400, 800, 1200, 2000, 3000, 5000];
-        var component = this;
+        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];
         function poll() {
-            $.getJSON(location.pathname + '.json').complete(function (jqXHR) {
+            $.getJSON(path).complete(function (jqXHR) {
                 switch (jqXHR.status) {
                 case 202:
                     var interval;
@@ -66,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;
                 }
             });
@@ -86,8 +92,13 @@ class Report extends Component {
     setStateFromJSON(responseJSON) {
         this.lastTimeStamp = Date.now();
         // the callback prepares the download link for all alignments
-        this.setState(responseJSON, this.prepareAlignmentOfAllHits);
+        if (responseJSON.user_warning == 'LARGE_RESULT') {
+            this.setState({user_warning: responseJSON.user_warning, download_links: responseJSON.download_links});
+        } else {
+            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
@@ -95,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();
@@ -107,9 +119,9 @@ 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() {
-    // Log to console how long the last update take?
-        console.log((Date.now() - this.lastTimeStamp) / 1000);
+    componentDidUpdate(prevProps, prevState) {
+        // 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) {
@@ -125,6 +137,8 @@ class Report extends Component {
         } else {
             this.componentFinishedUpdating();
         }
+
+        this.plugins.componentDidUpdate(prevProps, prevState);
     }
 
     /**
@@ -135,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}
@@ -151,6 +166,8 @@ class Report extends Component {
                         veryBig={this.state.veryBig}
                     />
                 );
+
+                results.push(...this.plugins.queryResults(query));
             }
 
             while (this.nextHit < query.hits.length) {
@@ -185,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}
@@ -256,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>
@@ -286,6 +306,40 @@ class Report extends Component {
         );
     }
 
+
+    warningJSX() {
+        return(
+            <div className="container">
+                <div className="row">
+                    <div className="col-md-6 col-md-offset-3 text-center">
+                        <h1>
+                            <i className="fa fa-exclamation-triangle"></i>&nbsp; Warning
+                        </h1>
+                        <p>
+                            <br />
+                            The BLAST result might be too large to load in the browser. If you have a powerful machine you can try loading the results anyway. Otherwise, you can download the results and view them locally.
+                        </p>
+                        <br />
+                        <p>
+                            {this.state.download_links.map((link, index) => {
+                                return (
+                                    <a href={link.url} className="btn btn-secondary" key={'download_link_' + index} >
+                                        {link.name}
+                                    </a>
+                                );
+                            })}
+                        </p>
+                        <br />
+                        <p>
+                            <a href={location.pathname + '?bypass_file_size_warning=true'} className="btn btn-primary">
+                                View results in browser anyway
+                            </a>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        );
+    }
     /**
    * Renders report overview.
    */
@@ -350,6 +404,15 @@ class Report extends Component {
         return this.state.queries.length >= 1;
     }
 
+    /**
+     * Indicates the response contains a warning message for the user
+     * in which case we should not render the results and render the
+     * warning instead.
+     **/
+    isUserWarningPresent() {
+        return this.state.user_warning;
+    }
+
     /**
    * Returns true if we have at least one hit.
    */
@@ -403,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) {
@@ -461,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');
@@ -539,7 +603,13 @@ class Report extends Component {
     }
 
     render() {
-        return this.isResultAvailable() ? this.resultsJSX() : this.loadingJSX();
+        if (this.isUserWarningPresent()) {
+            return this.warningJSX();
+        } else if (this.isResultAvailable()) {
+            return this.resultsJSX();
+        } else {
+            return this.loadingJSX();
+        }
     }
 }
 

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/advanced_parameters.spec.js

@@ -0,0 +1,36 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable no-undef */
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Form } from '../form';
+import { AMINO_ACID_SEQUENCE } from './mock_data/sequences';
+import data from './mock_data/databases.json';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/react/dont-cleanup-after-each';
+
+export const setMockJSONResult = (result) => {
+    global.$.getJSON = (_, cb) => cb(result);
+};
+describe('ADVANCED PARAMETERS', () => {
+    const getInputElement = () => screen.getByRole('textbox', { name: '' });
+    test('should not render the link to advanced parameters modal if blast algorithm is unknown', () => {
+        setMockJSONResult(data);
+        const {container } =render(<Form onSequenceTypeChanged={() => { }
+        } />);
+        const modalButton = container.querySelector('[data-target="#help"]');
+        expect(modalButton).toBeNull();
+    });
+    test('should render the link to advanced parameters modal if blast algorithm is known', () => {
+        setMockJSONResult(data);
+        const {container } =render(<Form onSequenceTypeChanged={() => { }
+        } />);
+        
+        const inputEl = getInputElement();
+        // populate search and select dbs to determine blast algorithm
+        fireEvent.change(inputEl, { target: { value: AMINO_ACID_SEQUENCE } });
+        const proteinSelectAllBtn = screen.getByRole('heading', { name: /protein databases/i }).parentElement.querySelector('button');
+        fireEvent.click(proteinSelectAllBtn);
+        const modalButton = container.querySelector('[data-target="#help"]');
+        expect(modalButton).not.toBeNull();
+    });
+});

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

@@ -0,0 +1,49 @@
+export const AMINO_ACID_SEQUENCE = `MNTLWLSLWDYPGKLPLNFMVFDTKDDLQAAYWRDPYSIPLAVIFEDPQPISQRLIYEIR
+TNPSYTLPPPPTKLYSAPISCRKNKTGHWMDDILSIKTGESCPVNNYLHSGFLALQMITD
+ITKIKLENSDVTIPDIKLIMFPKEPYTADWMLAFRVVIPLYMVLALSQFITYLLILIVGE
+KENKIKEGMKMMGLNDSVF
+>SI2.2.0_13722 locus=Si_gnF.scaffold06207[1925625..1928536].pep_1 quality=100.00
+MSANRLNVLVTLMLAVALLVTESGNAQVDGYLQFNPKRSAVSSPQKYCGKKLSNALQIIC
+DGVYNSMFKKSGQDFPPQNKRHIAHRINGNEEESFTTLKSNFLNWCVEVYHRHYRFVFVS
+EMEMADYPLAYDISPYLPPFLSRARARGMLDGRFAGRRYRRESRGIHEECCINGCTINEL
+TSYCGP
+`;
+export const NUCLEOTIDE_SEQUENCE = `ATGAATACCCTCTGGCTCTCTTTATGGGATTATCCCGGTAAGCTTCCCTTAAACTTCATG
+GTGTTTGACACGAAGGATGATCTGCAAGCAGCGTATTGGAGAGATCCTTACAGCATACCT
+CTGGCAGTTATCTTCGAGGACCCCCAACCGATATCACAGCGACTTATATATGAAATTAGG
+ACGAATCCTTCATACACTTTGCCGCCACCGCCAACCAAATTGTATTCTGCTCCGATCAGT
+TGTCGAAAGAATAAAACTGGTCACTGGATGGACGACATTTTATCGATAAAAACCGGTGAA
+TCTTGTCCCGTTAACAATTACTTGCATTCTGGCTTCTTGGCTCTGCAAATGATAACGGAT
+ATCACAAAGATAAAATTGGAAAATTCTGACGTGACAATACCGGATATTAAACTCATAATG
+TTTCCTAAAGAGCCGTATACCGCTGACTGGATGCTGGCCTTCAGAGTTGTTATTCCGCTT
+TACATGGTCTTGGCTCTCTCGCAATTTATCACTTATCTTCTGATCCTAATAGTTGGCGAG
+AAGGAAAATAAGATTAAAGAGGGAATGAAGATGATGGGCTTAAATGATTCTGTGTTT
+>SI2.2.0_13722 Si_gnF.scaffold06207[1925625..1928536].pep_1
+ATGTCCGCGAATCGATTGAACGTGCTGGTGACCCTGATGCTCGCCGTCGCGCTTCTTGTG
+ACGGAATCAGGAAATGCACAGGTGGATGGCTATCTCCAATTCAACCCAAAGCGATCCGCC
+GTGAGCTCGCCGCAGAAGTATTGCGGCAAAAAGCTTTCTAATGCTCTACAGATAATCTGT
+GATGGCGTGTACAATTCCATGTTTAAGAAGAGTGGTCAAGATTTTCCCCCGCAAAATAAG
+AGACACATAGCACACAGAATAAATGGGAATGAGGAAGAGAGCTTTACTACGTTAAAGTCG
+AATTTTTTAAACTGGTGTGTTGAAGTTTATCATCGTCACTACAGATTCGTTTTTGTTTCA
+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/report.spec.js

@@ -25,7 +25,14 @@ const TestSidebar = ({ long }) => {
     />;
 };
 
+const clickCheckboxes = (checkboxes, count) => {
+    Array.from(checkboxes).slice(0, count).forEach((checkbox) => {
+        fireEvent.click(checkbox);
+    });
+};
 describe('REPORT PAGE', () => {
+    global.URL.createObjectURL = jest.fn();//.mockReturnValue('xyz.test');
+    global.setTimeout = (cb) => cb();
     it('should render the report component with initial loading state', () => {
         render(<Report />);
         expect(screen.getByRole('heading', { name: 'BLAST-ing' })).toBeInTheDocument();
@@ -39,7 +46,7 @@ describe('REPORT PAGE', () => {
     });
     it('it should render the report page correctly if there\'s a response provided', () => {
         setMockJSONResult({ status: 200, responseJSON: shortResponseJSON });
-        const { container } = render(<Report />);
+        const { container } = render(<Report getCharacterWidth={jest.fn()} />);
         expect(container.querySelector('#results')).toBeInTheDocument();
 
     });
@@ -63,18 +70,18 @@ describe('REPORT PAGE', () => {
         });
 
         describe('LONG QUERIES (>12)', () => {
-
+            let container;
+            beforeEach(() => {
+                container = render(<TestSidebar long />).container;
+            });
             it('should not show navigation links for long queries', () => {
-                const { container } = render(<TestSidebar long />);
                 expect(container.querySelectorAll('a[href^="#Query_"]').length).toBe(0);
             });
             it('should show only next button if on first query ', () => {
-                render(<TestSidebar long />);
                 expect(nextQueryButton()).toBeInTheDocument();
                 expect(previousQueryButton()).not.toBeInTheDocument();
             });
             it('should show both previous and next buttons if not on first query', () => {
-                render(<TestSidebar long />);
                 const nextBtn = nextQueryButton();
                 expect(nextBtn).toBeInTheDocument();
                 fireEvent.click(nextBtn);
@@ -84,7 +91,6 @@ describe('REPORT PAGE', () => {
             });
             it('should show only previous button if on last query', () => {
                 const { queries } = longResponseJSON;
-                render(<TestSidebar long />);
                 expect(nextQueryButton()).toBeInTheDocument();
                 expect(previousQueryButton()).not.toBeInTheDocument();
 
@@ -95,5 +101,55 @@ describe('REPORT PAGE', () => {
                 expect(previousQueryButton()).toBeInTheDocument();
             });
         });
+
+        describe('DOWNLOAD LINKS', () => {
+            let container;
+            beforeEach(() => {
+                setMockJSONResult({ status: 200, responseJSON: shortResponseJSON });
+                container = render(<Report getCharacterWidth={jest.fn()}  />).container;
+            });
+            describe('ALIGNMENT DOWNLOAD', () => {
+                it('should generate a blob url and filename for downloading alignment of all hits on render', () => {
+                    const alignment_download_link = container.querySelector('.download-alignment-of-all');
+                    const expected_num_hits = container.querySelectorAll('.hit-links input[type="checkbox"]').length;
+                    const file_name = `alignment-${expected_num_hits}_hits.txt`;
+                    expect(alignment_download_link.download).toEqual(file_name);
+                    expect(alignment_download_link.hred).not.toEqual('#');
+                });
+                it('link for downloading alignment of specific number of selected hits should be disabled on initial load', () => {
+                    const alignment_download_link = container.querySelector('.download-alignment-of-selected');
+                    expect(alignment_download_link.classList.contains('disabled')).toBeTruthy();
+    
+                });
+                it('should generate a blob url and filename for downloading alignment of specific number of selected hits', () => {
+                    const alignment_download_link = container.querySelector('.download-alignment-of-selected');
+                    // QUERY ALL HIT LINKS CHECKBOXES
+                    const checkboxes = container.querySelectorAll('.hit-links input[type="checkbox"]');
+                    // SELECT 4 CHECKBOXES
+                    clickCheckboxes(checkboxes, 4);
+                    const file_name = 'alignment-4_hits.txt';
+                    expect(alignment_download_link.textContent).toEqual('Alignment of 4 selected hit(s)');
+                    expect(alignment_download_link.download).toEqual(file_name);
+                });
+            });
+    
+            describe('FASTA DOWNLOAD', () => {
+                let fasta_download_link;
+                beforeEach(() => {
+                    fasta_download_link = container.querySelector('.download-fasta-of-selected');
+                });
+                it('link for downloading fasta of selected number of hits should be disabled on initial load', () => {
+                    expect(fasta_download_link.classList.contains('disabled')).toBeTruthy();
+                });
+    
+                it('link for downloading fasta of specific number of selected hits should be active after selection', () => {
+                    const checkboxes = container.querySelectorAll('.hit-links input[type="checkbox"]');
+                    // SELECT 5 CHECKBOXES
+                    clickCheckboxes(checkboxes, 5);
+                    expect(fasta_download_link.textContent).toEqual('FASTA of 5 selected hit(s)');
+                });
+            });
+        });
     });
+
 });

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

@@ -3,39 +3,65 @@
 import { render, screen, fireEvent } from '@testing-library/react';
 import { SearchQueryWidget } from '../query';
 import { Form } from '../form';
-import userEvent from '@testing-library/user-event';
+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';
 
-export const AMINO_ACID_SEQUENCE = `MNTLWLSLWDYPGKLPLNFMVFDTKDDLQAAYWRDPYSIPLAVIFEDPQPISQRLIYEIR
-TNPSYTLPPPPTKLYSAPISCRKNKTGHWMDDILSIKTGESCPVNNYLHSGFLALQMITD
-ITKIKLENSDVTIPDIKLIMFPKEPYTADWMLAFRVVIPLYMVLALSQFITYLLILIVGE
-KENKIKEGMKMMGLNDSVF
->SI2.2.0_13722 locus=Si_gnF.scaffold06207[1925625..1928536].pep_1 quality=100.00
-MSANRLNVLVTLMLAVALLVTESGNAQVDGYLQFNPKRSAVSSPQKYCGKKLSNALQIIC
-DGVYNSMFKKSGQDFPPQNKRHIAHRINGNEEESFTTLKSNFLNWCVEVYHRHYRFVFVS
-EMEMADYPLAYDISPYLPPFLSRARARGMLDGRFAGRRYRRESRGIHEECCINGCTINEL
-TSYCGP
-`;
+let container;
+let inputEl;
+
 describe('SEARCH COMPONENT', () => {
-    const getInputElement = () => screen.getByRole('textbox', { name: '' });
+    beforeEach(() => {
+        container  = render(<Form onSequenceTypeChanged={() => { }
+        } />).container;
+        inputEl = screen.getByRole('textbox', { name: '' });
+    });
+
     test('should render the search component textarea', () => {
-        render(<SearchQueryWidget onSequenceTypeChanged={() => { }
-        } />);
-        const el = getInputElement();
-        expect(el).toHaveClass('form-control');
+        expect(inputEl).toHaveClass('form-control');
     });
 
     test('clear button should only become visible if textarea is not empty', () => {
-        render(<SearchQueryWidget onSequenceTypeChanged={() => { }
-        } />);
         const getButtonWrapper = () => screen.getByRole('button', { name: /clear query sequence\(s\)\./i }).parentElement;
         expect(getButtonWrapper()).toHaveClass('hidden');
-        const inputEl = getInputElement();
         fireEvent.change(inputEl, { target: { value: AMINO_ACID_SEQUENCE } });
         expect(getButtonWrapper()).not.toHaveClass('hidden');
         fireEvent.change(inputEl, { target: { value: '' } });
         expect(getButtonWrapper()).toHaveClass('hidden');
+    });
+
+    test('should correctly detect the amino-acid sequence type and show notification', () => {
+        // populate search
+        fireEvent.change(inputEl, { target: { value: AMINO_ACID_SEQUENCE } });
+        const activeNotification = container.querySelector('.notification.active');
+        expect(activeNotification.id).toBe('protein-sequence-notification');
+        const alertWrapper = activeNotification.children[0];
+        expect(alertWrapper).toHaveTextContent('Detected: amino-acid sequence(s).');
+    });
+
+    test('should correctly detect the nucleotide sequence type and show notification', () => {
+        // populate search
+        fireEvent.change(inputEl, { target: { value: NUCLEOTIDE_SEQUENCE } });
+        const activeNotification = container.querySelector('.notification.active');
+        const alertWrapper = activeNotification.children[0];
+        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');
+        expect(activeNotification.id).toBe('mixed-sequence-notification');
+        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);
     });
 });

data/public/js/visualisation_helpers.js

@@ -1,5 +1,5 @@
 import _ from 'underscore';
-
+import d3 from 'd3';
 export function get_colors_for_evalue(evalue, hits) {
     var colors = d3.scale
         .log()