sequenceserver 2.0.0 → 2.1.0

data/public/js/sidebar.js

@@ -1,27 +1,161 @@
-import React from 'react';
+import { Component } from 'react';
 import _ from 'underscore';
 
 import downloadFASTA from './download_fasta';
-import AlignmentExporter from './alignment_exporter'; // to download textual alignment
+import asMailtoHref from './mailto';
+import CloudShareModal from './cloud_share_modal';
 
+/**
+ * checks whether code is being run by jest
+ */
+// eslint-disable-next-line no-undef
+const isTestMode = () => process.env.JEST_WORKER_ID !== undefined || process.env.NODE_ENV === 'test';
 /**
  * Renders links for downloading hit information in different formats.
  * Renders links for navigating to each query.
  */
-export default React.createClass({
+export default class extends Component {
+
+    constructor(props) {
+        super(props);
+        this.downloadFastaOfAll = this.downloadFastaOfAll.bind(this);
+        this.downloadFastaOfSelected = this.downloadFastaOfSelected.bind(this);
+        this.topPanelJSX = this.topPanelJSX.bind(this);
+        this.summaryString = this.summaryString.bind(this);
+        this.indexJSX = this.indexJSX.bind(this);
+        this.downloadsPanelJSX = this.downloadsPanelJSX.bind(this);
+        this.handleQueryIndexChange = this.handleQueryIndexChange.bind(this);
+        this.isElementInViewPort = this.isElementInViewPort.bind(this);
+        this.setVisibleQueryIndex = this.setVisibleQueryIndex.bind(this);
+        this.debounceScrolling = this.debounceScrolling.bind(this);
+        this.scrollListener = this.scrollListener.bind(this);
+        this.copyURL = this.copyURL.bind(this);
+        this.shareCloudInit = this.shareCloudInit.bind(this);
+        this.sharingPanelJSX = this.sharingPanelJSX.bind(this);
+        this.timeout = null;
+        this.queryElems = [];
+        this.state = {
+            queryIndex: 1
+        };
+    }
+
+    componentDidMount() {
+        /**
+         * Fixes tooltips in the sidebar, allows tooltip display on click
+         */
+        $(function () {
+            $('.sidebar [data-toggle="tooltip"]').tooltip({ placement: 'right' });
+            $('#copyURL').tooltip({ title: 'Copied!', trigger: 'click', placement: 'right', delay: 0 });
+        });
+
+        //keep track of the current queryIndex so it doesn't get lost on page reload
+        const urlMatch = window.location.href.match(/#Query_(\d+)/);
+        if (urlMatch && urlMatch.length > 1) {
+            const queryNumber = +urlMatch[1];
+            const index = this.props.data.queries.findIndex(query => query.number === queryNumber);
+            this.setState({ queryIndex: index + 1 });
+        }
+        window.addEventListener('scroll', this.scrollListener);
+        $('a[href^="#Query_"]').on('click', this.animateAnchorElements);
+    }
+    componentWillUnmount() {
+        window.removeEventListener('scroll', this.scrollListener);
+    }
+    componentDidUpdate(prevProps) {
+        if (this.props.allQueriesLoaded && !prevProps.allQueriesLoaded) {
+            /**
+             * storing all query elements in this variable once they all become available so we don't have to fetch them all over again
+             */
+            this.queryElems = Array.from(document.querySelectorAll('.resultn'));
+        }
+    }
+
+
     /**
-     * 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();
-    },
+     * to avoid unnecessary computations, we debounce the scroll listener so it only fires after user has stopped scrolling for some milliseconds
+     */
+    scrollListener() {
+        this.debounceScrolling(this.setVisibleQueryIndex, 500);
+    }
+
+    debounceScrolling(callback, timer) {
+        if (this.timeout) {
+            clearTimeout(this.timeout);
+        }
+        this.timeout = setTimeout(callback, timer);
+    }
 
+    /**
+     * This method makes the page aware of what query is visible so that clicking previous / next button at any point
+     * navigates to the proper query
+     */
+    setVisibleQueryIndex() {
+        const queryElems = this.queryElems.length ? this.queryElems : Array.from(document.querySelectorAll('.resultn'));
+        const hits = Array.from(document.querySelectorAll('.hit[id^=Query_]'));
+        // get the first visible element and marks it as the current query
+        const topmostEl = queryElems.find(this.isElementInViewPort) || hits.find(this.isElementInViewPort);
+        if (topmostEl) {
+            const queryIndex = Number(topmostEl.id.match(/Query_(\d+)/)[1]);
+            let hash = `#Query_${queryIndex}`;
+            // if we can guarantee that the browser can handle change in url hash without the page jumping,
+            // then we update the url hash after scroll. else, hash is only updated on click of next or prev button
+            if (window.history.pushState) {
+                window.history.pushState(null, null, hash);
+            }
+            this.setState({ queryIndex });
+        }
+    }
+    animateAnchorElements(e) {
+        // allow normal behavior in test mode to prevent warnings or errors from jquery
+        if (isTestMode()) return;
+        e.preventDefault();
+        $('html, body').animate({
+            scrollTop: $(this.hash).offset().top
+        }, 300);
+        if (window.history.pushState) {
+            window.history.pushState(null, null, this.hash);
+        } else {
+            window.location.hash = this.hash;
+        }
+    }
+    isElementInViewPort(elem) {
+        const { top, left, right, bottom } = elem.getBoundingClientRect();
+        return (
+            top >= 0 &&
+            left >= 0 &&
+            bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+            right <= (window.innerWidth || document.documentElement.clientWidth)
+        );
+    }
+    /**
+         * 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() {
+        sessionStorage.clear();
+    }
+    /**
+     *
+     * handle next and previous query button clicks
+     */
+    handleQueryIndexChange(nextQuery) {
+        if (nextQuery < 1 || nextQuery > this.props.data.queries.length) return;
+        const anchorEl = document.createElement('a');
+        //indexing at [nextQuery - 1] because array is 0-indexed
+        anchorEl.setAttribute('href', '#Query_' + this.props.data.queries[nextQuery - 1].number);
+        anchorEl.setAttribute('hidden', true);
+        document.body.appendChild(anchorEl);
+        // add smooth scrolling animation with jquery
+        $(anchorEl).on('click', this.animateAnchorElements);
+        anchorEl.click();
+        document.body.removeChild(anchorEl);
+        this.setState({ queryIndex: nextQuery });
+    }
     /**
      * Event-handler for downloading fasta of all hits.
      */
-    downloadFastaOfAll: function () {
+    downloadFastaOfAll() {
         var sequence_ids = [];
         this.props.data.queries.forEach(
             (query) => query.hits.forEach(
@@ -29,91 +163,61 @@ export default React.createClass({
         var database_ids = this.props.data.querydb.map((querydb) => querydb.id);
         downloadFASTA(sequence_ids, database_ids);
         return false;
-    },
+    }
 
     /**
      * Handles downloading fasta of selected hits.
      */
-    downloadFastaOfSelected: function () {
+    downloadFastaOfSelected() {
         var sequence_ids = $('.hit-links :checkbox:checked').map(function () {
             return this.value;
         }).get();
         var database_ids = _.map(this.props.data.querydb, _.iteratee('id'));
         downloadFASTA(sequence_ids, database_ids);
         return false;
-    },
+    }
 
-    downloadAlignmentOfAll: function() {
-        // Get number of hits and array of all hsps.
-        var num_hits = 0;
-        var hsps_arr = [];
-        this.props.data.queries.forEach(
-            (query) => query.hits.forEach(
-                (hit) => {
-                    num_hits++;
-                    hit.hsps.forEach((hsp) => {
-                        hsp.query_id = query.id;
-                        hsp.hit_id = hit.id;
-                        hsps_arr.push(hsp);
-                    });
-                }
-            )
-        );
 
-        var aln_exporter = new AlignmentExporter();
-        var file_name = `alignment-${num_hits}_hits`;
-        aln_exporter.export_alignments(hsps_arr, file_name);
-        return false;
-    },
 
-    downloadAlignmentOfSelected: function () {
-        var sequence_ids = $('.hit-links :checkbox:checked').map(function () {
-            return this.value;
-        }).get();
-        var hsps_arr = [];
-        var aln_exporter = new AlignmentExporter();
-        console.log('check '+sequence_ids.toString());
-        _.each(this.props.data.queries, _.bind(function (query) {
-            _.each(query.hits, function (hit) {
-                if (_.indexOf(sequence_ids, hit.id) != -1) {
-                    _.each(hit.hsps, function (hsp) {
-                        hsp.hit_id = hit.id;
-                        hsp.query_id = query.id;
-                        hsps_arr.push(hsp);
-                    });
-                }
-            });
-        }, this));
-        aln_exporter.export_alignments(hsps_arr, 'alignment-'+sequence_ids.length+'_hits');
-        return false;
-    },
 
+    /**
+     * Handles copying the URL into the user's clipboard. Modified from: https://stackoverflow.com/a/49618964/18117380
+     * Hides the 'Copied!' tooltip after 3 seconds
+     */
 
-    // JSX //
-    render: function () {
-        return (
-            <div className="sidebar">
-                { this.topPanelJSX() }
-                { this.downloadsPanelJSX() }
-            </div>
-        );
-    },
+    copyURL() {
+        var element = document.createElement('input');
+        var url = window.location.href;
+        document.body.appendChild(element);
+        element.value = url;
+        element.select();
+        document.execCommand('copy');
+        document.body.removeChild(element);
+
+        setTimeout(function () {
+            $('#copyURL')._tooltip('destroy');
+        }, 3000);
+    }
 
-    topPanelJSX: function () {
+    shareCloudInit() {
+        this.refs.cloudShareModal.show();
+    }
+
+    topPanelJSX() {
         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="sidebar-top-panel">
                 <div className="section-header-sidebar">
                     <h4>
-                        { this.summaryString() }
+                        {this.summaryString()}
                     </h4>
                 </div>
+                {this.props.data.queries.length > 12 && this.queryIndexButtons()}
                 <div>
                     <a href={`${rootURL}/?job_id=${job_id}`}>
                         <i className="fa fa-pencil"></i> Edit search
@@ -124,12 +228,12 @@ export default React.createClass({
                         <i className="fa fa-file-o"></i> New search
                     </a>
                 </div>
-                { this.props.shouldShowIndex && this.indexJSX() }
+                {this.props.shouldShowIndex && this.indexJSX()}
             </div>
         );
-    },
+    }
 
-    summaryString: function () {
+    summaryString() {
         var program = this.props.data.program;
         var numqueries = this.props.data.queries.length;
         var numquerydb = this.props.data.querydb.length;
@@ -139,12 +243,31 @@ export default React.createClass({
             numqueries + ' ' + (numqueries > 1 ? 'queries' : 'query') + ', ' +
             numquerydb + ' ' + (numquerydb > 1 ? 'databases' : 'database')
         );
-    },
+    }
+
+    queryIndexButtons() {
+        const buttonStyle = {
+            outline: 'none', border: 'none', background: 'none'
+        };
+        const buttonClasses = 'btn-link nowrap-ellipsis hover-bold';
+
+        const handlePreviousBtnClick = () => this.handleQueryIndexChange(this.state.queryIndex - 1);
+        const handleNextBtnClick = () => this.handleQueryIndexChange(this.state.queryIndex + 1);
 
-    indexJSX: function () {
+        // eslint-disable-next-line no-unused-vars
+        const NavButton = ({ text, onClick }) => (
+            <button className={buttonClasses} onClick={onClick} style={buttonStyle}>{text}</button>
+        );
+        return <div style={{ display: 'flex', width: '100%', margin: '7px 0' }}>
+            {this.state.queryIndex > 1 && <NavButton text="Previous Query" onClick={handlePreviousBtnClick} />}
+            {this.state.queryIndex > 1 && this.state.queryIndex < this.props.data.queries.length && <span className="line">|</span>}
+            {this.state.queryIndex < this.props.data.queries.length && <NavButton onClick={handleNextBtnClick} text="Next Query" />}
+        </div>;
+    }
+    indexJSX() {
         return <ul className="nav hover-reset active-bold"> {
-            _.map(this.props.data.queries, (query)=> {
-                return <li key={'Side_bar_'+query.id}>
+            _.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}>
@@ -154,9 +277,9 @@ export default React.createClass({
             })
         }
         </ul>;
-    },
+    }
 
-    downloadsPanelJSX: function () {
+    downloadsPanelJSX() {
         return (
             <div className="downloads">
                 <div className="section-header-sidebar">
@@ -182,14 +305,12 @@ export default React.createClass({
                         </li>
                     }
                     <li>
-                        <a href="#" className={`btn-link download-alignment-of-all ${!this.props.atLeastOneHit && 'disabled'}`}
-                            onClick={this.downloadAlignmentOfAll}>
+                        <a href="#" className={`btn-link download-alignment-of-all ${!this.props.atLeastOneHit && 'disabled'}`}>
                             Alignment of all hits
                         </a>
                     </li>
                     <li>
-                        <a href="#" className="btn-link download-alignment-of-selected disabled"
-                            onClick={this.downloadAlignmentOfSelected}>
+                        <a href="#" className="btn-link download-alignment-of-selected disabled">
                             Alignment of <span className="text-bold"></span> selected hit(s)
                         </a>
                     </li>
@@ -229,6 +350,64 @@ export default React.createClass({
                 </ul>
             </div>
         );
-    },
-});
+    }
+
+    sharingPanelJSX() {
+        return (
+            <div className="sharing-panel">
+                <div className="section-header-sidebar">
+                    <h4>
+                        Share results
+                    </h4>
+                </div>
+                <ul className="nav">
+                    {!this.props.cloudSharingEnabled &&
+                        <li>
+                            <a id="copyURL" className="btn-link copy-URL cursor-pointer" data-toggle="tooltip"
+                                onClick={this.copyURL}>
+                                <i className="fa fa-copy"></i> Copy URL to clipboard
+                            </a>
+                        </li>
+                    }
+                    {!this.props.cloudSharingEnabled &&
+                        <li>
+                            <a id="sendEmail" className="btn-link email-URL cursor-pointer" data-toggle="tooltip"
+                                title="Send by email" href={asMailtoHref(this.props.data.querydb, this.props.data.program, this.props.data.queries.length, window.location.href)}
+                                target="_blank" rel="noopener noreferrer">
+                                <i className="fa fa-envelope"></i> Send by email
+                            </a>
+                        </li>
+                    }
+                    {this.props.cloudSharingEnabled &&
+                        <li>
+                            <button className="btn-link cloud-Post cursor-pointer" data-toggle="tooltip"
+                                title="Upload results to SequenceServer Cloud where it will become accessable
+                                to everyone who has a link." onClick={this.shareCloudInit}>
+                                <i className="fa fa-cloud"></i> Share to cloud
+                            </button>
+                        </li>
+                    }
+                </ul>
+                {
+                    <CloudShareModal
+                        ref="cloudShareModal"
+                        querydb={this.props.data.querydb}
+                        program={this.props.data.program}
+                        queryLength={this.props.data.queries.length}
+                    />
+                }
+            </div>
+        );
+    }
+
+    render() {
+        return (
+            <div className="sidebar">
+                {this.topPanelJSX()}
+                {this.downloadsPanelJSX()}
+                {this.sharingPanelJSX()}
+            </div>
+        );
+    }
+}
 

data/public/js/tests/database.spec.js

@@ -0,0 +1,60 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable no-undef */
+import { render, screen, fireEvent, waitFor, findByText, getByText } from '@testing-library/react';
+import { Databases } from '../databases';
+import data from './mock_data/databases.json';
+
+
+
+describe('DATABASES COMPONENT', () => {
+    test('should render unique database categories', () => {
+        render(<Databases databases={data.database} />);
+        expect(screen.getByRole('heading', { name: /nucleotide databases/i })).toBeInTheDocument();
+        expect(screen.getByRole('heading', { name: /protein databases/i })).toBeInTheDocument();
+    });
+
+    test('should list databases under respective categories', () => {
+        const { container } = render(<Databases databases={data.database} />);
+        expect(container.querySelector('.databases.nucleotide').children).toHaveLength(3);
+        expect(container.querySelector('.databases.protein').children).toHaveLength(4);
+
+    });
+
+    test('clicking select all on a database should select all its children', () => {
+        const { container } = render(<Databases databases={data.database} onDatabaseTypeChanged={() => { }} />);
+        
+        // select all nucleotide databases
+        const nucleotideSelectAllBtn = screen.getByRole('heading', { name: /nucleotide databases/i }).parentElement.querySelector('button');
+        fireEvent.click(nucleotideSelectAllBtn);
+        const nucleotideCheckboxes = container.querySelector('.databases.nucleotide').querySelectorAll('input[type=checkbox]');
+        
+        // all nucleotide databases should be checked
+        nucleotideCheckboxes.forEach((checkbox) => {
+            expect(checkbox).toBeChecked();
+        });
+
+        // select all protein databases
+        const proteinSelectAllBtn = screen.getByRole('heading', { name: /protein databases/i }).parentElement.querySelector('button');
+        fireEvent.click(proteinSelectAllBtn);
+        const proteinCheckboxes = container.querySelector('.databases.nucleotide').querySelectorAll('input[type=checkbox]');
+        // all protein databases should be checked
+        proteinCheckboxes.forEach((checkbox) => {
+            expect(checkbox).toBeChecked();
+        });
+    });
+
+    test('checking any item of a database type should disable other database type', () => {
+        const mockFunction = jest.fn(() => { });
+        const { container } = render(<Databases databases={data.database} onDatabaseTypeChanged={mockFunction} />);
+
+        //select a proteinn database
+        fireEvent.click(screen.getByRole('checkbox', { name: /2020-11 Swiss-Prot insecta/i }));
+        // function has to be called when database has been selected
+        expect(mockFunction).toHaveBeenCalled();
+        // all nucleotide databses should be disabled
+        const nucleotideCheckboxes = container.querySelector('.databases.nucleotide').querySelectorAll('input[type=checkbox]');
+        nucleotideCheckboxes.forEach(checkbox => {
+            expect(checkbox).toBeDisabled();
+        });
+    });
+});

data/public/js/tests/mock_data/databases.json

@@ -0,0 +1,91 @@
+{
+  "query": null,
+  "database": [
+    {
+      "name": "/spec/database/v5/funky_ids/funky_ids.fa",
+      "title": "funky ids (v5)",
+      "type": "nucleotide",
+      "nsequences": "8",
+      "ncharacters": "312",
+      "updated_on": "Aug 13, 2020  11:23 AM",
+      "format": "5",
+      "categories": ["funky_ids"],
+      "id": "b71a337accf1e099aace6c859fba5e99"
+    },
+
+    {
+      "name": "/spec/database/v5/sample/genome/Solenopsis_invicta/Solenopsis_invicta_gnG_subset.fasta",
+      "title": "Solenopsis invicta gnG subset",
+      "type": "nucleotide",
+      "nsequences": "8",
+      "ncharacters": "39185542",
+      "updated_on": "Jun 17, 2020  4:51 PM",
+      "format": "5",
+      "categories": ["sample", "genome", "Solenopsis_invicta"],
+      "id": "c0bb1dadfeda93ea1f53732109df0959"
+    },
+
+    {
+      "name": "/spec/database/v5/sample/proteins/Solenopsis_invicta/Sinvicta2-2-3.prot.subset.fasta",
+      "title": "Sinvicta 2-2-3 prot subset",
+      "type": "protein",
+      "nsequences": "1189",
+      "ncharacters": "280047",
+      "updated_on": "Jun 17, 2020  4:52 PM",
+      "format": "5",
+      "categories": ["sample", "proteins", "Solenopsis_invicta"],
+      "id": "900b87a3e7a4d1f3034b97483231f520"
+    },
+    {
+      "name": "/spec/database/v5/sample/proteins/uniprot/2020-11-Swiss-Prot_insecta.fasta",
+      "title": " 2020-11 Swiss-Prot insecta",
+      "type": "protein",
+      "nsequences": "9383",
+      "ncharacters": "4062633",
+      "updated_on": "Nov 25, 2020  12:45 PM",
+      "format": "5",
+      "categories": ["sample", "proteins", "uniprot"],
+      "id": "fe5c9f0ac98f8d06e8099327c3d14523"
+    },
+    {
+      "name": "/spec/database/v5/sample/transcripts/Solenopsis_invicta/Sinvicta2-2-3.cdna.subset.fasta",
+      "title": "Sinvicta 2-2-3 cdna subset",
+      "type": "nucleotide",
+      "nsequences": "473",
+      "ncharacters": "287752",
+      "updated_on": "Jun 17, 2020  4:52 PM",
+      "format": "5",
+      "categories": ["sample", "transcripts", "Solenopsis_invicta"],
+      "id": "045f6f2637f2776f95c93ed2f62ebc51"
+    },
+    {
+      "name": "/spec/database/v5/using_blastdb_aliastool/2020-11-Swiss-Prot_insecta_subset_taxid_102803",
+      "title": "2020-11-Swiss-Prot insecta (subset taxid 102803)",
+      "type": "protein",
+      "nsequences": "1",
+      "ncharacters": "253",
+      "updated_on": "Nov 25, 2020  12:45 PM",
+      "format": "5",
+      "categories": ["using_blastdb_aliastool"],
+      "id": "7ad2f50353978114c971d50edf92584e"
+    },
+    {
+      "name": "/spec/database/v5/without_parse_seqids/without_parse_seqids.fa",
+      "title": "without_parse_seqids.fa",
+      "type": "protein",
+      "nsequences": "2",
+      "ncharacters": "385",
+      "updated_on": "Jun 2, 2021  10:37 AM",
+      "format": "5",
+      "categories": ["without_parse_seqids"],
+      "id": "0bb59948ffac3563fc32b6d0272789bb"
+    }
+  ],
+  "options": {
+    "blastn": { "default": ["-task blastn", "-evalue 1e-5"] },
+    "blastp": { "default": ["-evalue 1e-5"] },
+    "blastx": { "default": ["-evalue 1e-5"] },
+    "tblastx": { "default": ["-evalue 1e-5"] },
+    "tblastn": { "default": ["-evalue 1e-5"] }
+  }
+}