sequenceserver 3.1.3 → 3.2.0

data/public/js/report.js

@@ -1,12 +1,12 @@
 import './jquery_world'; // for custom $.tooltip function
 import React, { Component } from 'react';
-import _ from 'underscore';
 
 import Sidebar from './sidebar';
-import Hits from './hits';
-import Circos from './circos';
 import AlignmentExporter from './alignment_exporter';
 import ReportPlugins from 'report_plugins';
+import RunSummary from './report/run_summary';
+import GraphicalOverview from './report/graphical_overview';
+import AlignmentResults from './report/alignment_results';
 
 /**
  * Renders entire report.
@@ -133,7 +133,6 @@ 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();
@@ -154,21 +153,20 @@ class Report extends Component {
    */
     loadingJSX() {
         return (
-            <div className="row">
-                <div className="col-md-6 col-md-offset-3 text-center">
-                    <h1>
+            <div className="grid grid-cols-6 gap-4">
+                <div className="col-start-1 col-end-7 text-center pt-3">
+                    <h1 className="mb-8 text-4xl">
                         <i className="fa fa-cog fa-spin"></i>&nbsp; BLAST-ing
                     </h1>
-                    <p>
-                        <br />
-            This can take some time depending on the size of your query and
-            database(s). The page will update automatically when BLAST is done.
-                        <br />
-                        <br />
-            You can bookmark the page and come back to it later or share the
-            link with someone.
-                        <br />
-                        <br />
+                    <div className="mb-5 w-full">
+                        <p className="m-auto w-full md:w-6/12 text-sm">This can take some time depending on the size of your query and
+                        database(s). The page will update automatically when BLAST is done.</p>
+                    </div>
+                    <p className="mb-9 text-sm">
+                        You can bookmark the page and come back to it later or share the
+                        link with someone.
+                    </p>
+                    <p className="text-sm">
                         { 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>
@@ -182,8 +180,8 @@ class Report extends Component {
    */
     resultsJSX() {
         return (
-            <div className="row" id="results">
-                <div className="col-md-3 hidden-sm hidden-xs">
+            <div className="grid grid-cols-1 md:grid-cols-4 gap-4 print:grid-cols-1" id="results">
+                <div className="hidden md:col-span-1 md:block print:hidden">
                     <Sidebar
                         data={this.state}
                         atLeastOneHit={this.atLeastOneHit()}
@@ -192,15 +190,24 @@ class Report extends Component {
                         cloudSharingEnabled={this.state.cloud_sharing_enabled}
                     />
                 </div>
-                <div className="col-md-9">
-                    {this.overviewJSX()}
-                    {this.circosJSX()}
-                    {this.plugins.generateStats(this.state.queries)}
-                    {this.state.results}
-                    <Hits
+                <div className="col-span-1 md:col-span-3 print:col-span-1">
+                    <RunSummary
+                        seqserv_version={this.state.seqserv_version}
+                        program_version={this.state.program_version}
+                        submitted_at={this.state.submitted_at}
+                        querydb={this.state.querydb}
+                        stats={this.state.stats}
+                        params={this.state.params}
+                    />
+                    <GraphicalOverview
+                        queries={this.state.queries}
+                        prorgam={this.state.program}
+                        plugins={this.plugins}
+                    />
+                    <AlignmentResults
                         state={this.state}
-                        componentFinishedUpdating={(_) => this.componentFinishedUpdating(_)}
                         populate_hsp_array={this.populate_hsp_array.bind(this)}
+                        componentFinishedUpdating={(_) => this.componentFinishedUpdating(_)}
                         plugins={this.plugins}
                         {...this.props}
                     />
@@ -213,18 +220,16 @@ class Report extends Component {
 
     warningJSX() {
         return(
-            <div className="container">
-                <div className="row">
-                    <div className="col-md-6 col-md-offset-3 text-center">
-                        <h1>
+            <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+                <div className="grid grid-cols-6 gap-4">
+                    <div className="col-start-1 col-end-7 text-center">
+                        <h1 className="mb-4 text-4xl">
                             <i className="fa fa-exclamation-triangle"></i>&nbsp; Warning
                         </h1>
-                        <p>
-                            <br />
+                        <p className="mb-2">
                             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>
+                        <p className="mb-2">
                             {this.state.download_links.map((link, index) => {
                                 return (
                                     <a href={link.url} className="btn btn-secondary" key={'download_link_' + index} >
@@ -233,9 +238,8 @@ class Report extends Component {
                                 );
                             })}
                         </p>
-                        <br />
                         <p>
-                            <a href={location.pathname + '?bypass_file_size_warning=true'} className="btn btn-primary">
+                            <a href={location.pathname + '?bypass_file_size_warning=true'} className="py-2 px-3 border border-transparent rounded-md shadow-sm text-white bg-seqblue hover:bg-seqorange focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-seqorange">
                                 View results in browser anyway
                             </a>
                         </p>
@@ -244,57 +248,6 @@ class Report extends Component {
             </div>
         );
     }
-    /**
-   * Renders report overview.
-   */
-    overviewJSX() {
-        return (
-            <div className="overview">
-                <p>
-                    <strong>SequenceServer {this.state.seqserv_version}</strong> using{' '}
-                    <strong>{this.state.program_version}</strong>
-                    {this.state.submitted_at &&
-            `, query submitted on ${this.state.submitted_at}`}
-                </p>
-                <p>
-                    <strong> Databases: </strong>
-                    {this.state.querydb
-                        .map((db) => {
-                            return db.title;
-                        })
-                        .join(', ')}{' '}
-          ({this.state.stats.nsequences} sequences,&nbsp;
-                    {this.state.stats.ncharacters} characters)
-                </p>
-                <p>
-                    <strong>Parameters: </strong>{' '}
-                    {_.map(this.state.params, function (val, key) {
-                        return key + ' ' + val;
-                    }).join(', ')}
-                </p>
-                <p>
-          Please cite:{' '}
-                    <a href="https://doi.org/10.1093/molbev/msz185">
-            https://doi.org/10.1093/molbev/msz185
-                    </a>
-                </p>
-            </div>
-        );
-    }
-
-    /**
-   * Return JSX for circos if we have at least one hit.
-   */
-    circosJSX() {
-        return this.atLeastTwoHits() ? (
-            <Circos
-                queries={this.state.queries}
-                program={this.state.program}
-            />
-        ) : (
-            <span></span>
-        );
-    }
 
     // Controller //
 
@@ -323,18 +276,6 @@ class Report extends Component {
         return this.state.queries.some((query) => query.hits.length > 0);
     }
 
-    /**
-   * Does the report have at least two hits? This is used to determine
-   * whether Circos should be enabled or not.
-   */
-    atLeastTwoHits() {
-        var hit_num = 0;
-        return this.state.queries.some((query) => {
-            hit_num += query.hits.length;
-            return hit_num > 1;
-        });
-    }
-
     /**
    * Returns true if index should be shown in the sidebar. Index is shown
    * only for 2 and 8 queries.
@@ -355,7 +296,8 @@ class Report extends Component {
                     // user wants to toggle
                     var hitID = $this.parents('.hit').attr('id');
                     $(`div[data-parent-hit=${hitID}]`).toggle();
-                    $this.find('i').toggleClass('fa-minus-square-o fa-plus-square-o');
+                    $this.find('i').toggleClass('fa-square-minus fa-square-plus');
+                    $($this.data('parent-id')).toggleClass('print:hidden');
                 } else {
                     // user wants to select
                     $this.attr('data-toggle', '');
@@ -366,6 +308,7 @@ class Report extends Component {
     }
 
     /* Handling the fa icon when Hit Table is collapsed */
+    /* TODO:JOKO check if this method still being used? */
     toggleTable() {
         $('body').on(
             'mousedown',
@@ -373,7 +316,7 @@ class Report extends Component {
             function (event) {
                 var $this = $(this);
                 $this.on('mouseup mousemove', function handler(event) {
-                    $this.find('i').toggleClass('fa-minus-square-o fa-plus-square-o');
+                    $this.find('i').toggleClass('fa-square-minus fa-square-plus');
                     $this.off('mouseup mousemove', handler);
                 });
             }
@@ -386,7 +329,24 @@ class Report extends Component {
    * For the query in viewport, highlights corresponding entry in the index.
    */
     setupScrollSpy() {
-        $('body').scrollspy({ target: '.sidebar' });
+        var sectionIds = $('a.side-nav');
+
+        $(document).scroll(function(){
+            sectionIds.each(function(){
+
+                var container = $(this).attr('href');
+                var containerOffset = $(container).offset().top;
+                var containerHeight = $(container).outerHeight();
+                var containerBottom = containerOffset + containerHeight;
+                var scrollPosition = $(document).scrollTop();
+
+                if(scrollPosition < containerBottom - 20 && scrollPosition >= containerOffset - 20){
+                    $(this).addClass('active');
+                } else {
+                    $(this).removeClass('active');
+                }
+            });
+        });
     }
 
     populate_hsp_array(hit, query_id){

data/public/js/report_root.js

@@ -43,9 +43,9 @@ class Page extends Component {
     render() {
         return (
             <div>
-                {/* Provide bootstrap .container element inside the #view for
+                {/* Provide tailwind element inside the #view for
                     the Report component to render itself in. */}
-                <div className="container">
+                <div className="mx-auto">
                     <Report
                         showSequenceModal={(_) => this.showSequenceModal(_)}
                         getCharacterWidth={() => this.getCharacterWidth()}
@@ -54,7 +54,7 @@ class Page extends Component {
                 </div>
 
                 {/* Add a hidden span tag containing chars used in HSPs */}
-                <pre className="pre-reset hsp-lines" ref={this.hspChars} hidden>
+                <pre className="m-0 p-0 rounded-none border-0 bg-inherit whitespace-pre-wrap break-keep mt-1 pre-text tracking-wider" ref={this.hspChars} hidden>
                     ABCDEFGHIJKLMNOPQRSTUVWXYZ +-
                 </pre>
 

data/public/js/search.js

@@ -40,10 +40,13 @@ const root = createRoot(document.getElementById('view'));
 root.render(<Page />);
 
 document.addEventListener('DOMContentLoaded', () => {
-    const closeButton = document.querySelector('.js--close-help');
+    const closeButton = document.querySelector('button.advanced-modal-close');
+    const modal = document.querySelector('dialog.advanced-modal');
+    modal.addEventListener('close', () => { document.body.classList.remove("overflow-hidden") });
+
     if (closeButton) {
         closeButton.addEventListener('click', function() {
-            document.querySelector('[data-help-modal]').classList.add('hidden');
+            modal.close();
         });
     }
 });

data/public/js/search_button.js

@@ -1,6 +1,5 @@
 import React, { Component, createRef } from 'react';
 import _ from 'underscore';
-import './jquery_world';
 
 /**
  * SearchButton widget.
@@ -13,23 +12,31 @@ export class SearchButton extends Component {
             hasQuery: false,
             hasDatabases: false,
             dropdownVisible: false,
+            messageTooltip: "",
+            titleTooltip: "",
+            hideMessageTooltip: false
         };
-        this.inputGroup = this.inputGroup.bind(this);
-        this.submitButton = this.submitButton.bind(this);
-        this.initTooltip = this.initTooltip.bind(this);
-        this.showTooltip = this.showTooltip.bind(this);
-        this.hideTooltip = this.hideTooltip.bind(this);
         this.changeAlgorithm = this.changeAlgorithm.bind(this);
         this.decorate = this.decorate.bind(this);
+        this.setMessageTooltipButton = this.setMessageTooltipButton.bind(this);
+        this.setTitleTooltipButton = this.setTitleTooltipButton.bind(this);
+        this.renderButton = this.renderButton.bind(this);
+        this.inputGroup = this.inputGroup.bind(this);
+        this.handleMouseOver = this.handleMouseOver.bind(this)
+        this.handeMouseOut = this.handeMouseOut.bind(this)
         this.inputGroupRef = createRef();
-        this.submitButtonRef = createRef();
     }
+
     componentDidMount() {
-        this.initTooltip();
+        this.timeout = setTimeout(() => this.setState({ hideMessageTooltip: true}), 3000)
     }
 
     shouldComponentUpdate(props, state) {
-        return !_.isEqual(state.methods, this.state.methods) || state.dropdownVisible !== this.state.dropdownVisible;
+        return !_.isEqual(state.methods, this.state.methods) ||
+            state.dropdownVisible !== this.state.dropdownVisible ||
+            state.messageTooltip !== this.state.messageTooltip ||
+            state.titleTooltip !== this.state.titleTooltip ||
+            state.hideMessageTooltip !== this.state.hideMessageTooltip;
     }
 
     componentDidUpdate(_prevProps, prevState) {
@@ -42,66 +49,11 @@ export class SearchButton extends Component {
             }
         }
     }
-    // Internal helpers. //
 
-    /**
- * Returns jquery wrapped input group.
- */
     inputGroup() {
         return $(this.inputGroupRef.current);
     }
 
-    /**
- * Returns jquery wrapped submit button.
- */
-    submitButton() {
-        return $(this.submitButtonRef.current);
-    }
-
-    /**
- * Initialise tooltip on input group and submit button.
- */
-    initTooltip() {
-        this.inputGroup().tooltip({
-            trigger: 'manual',
-            title: _.bind(function () {
-                if (!this.state.hasQuery && !this.state.hasDatabases) {
-                    return 'You must enter a query sequence and select one or more databases above before you can run a search!';
-                } else if (this.state.hasQuery && !this.state.hasDatabases) {
-                    return 'You must select one or more databases above before you can run a search!';
-                } else if (!this.state.hasQuery && this.state.hasDatabases) {
-                    return 'You must enter a query sequence above before you can run a search!';
-                }
-            }, this),
-        });
-
-        this.submitButton().tooltip({
-            title: _.bind(function () {
-                var title = 'Click to BLAST or press Ctrl+Enter.';
-                if (this.state.methods.length > 1) {
-                    title +=
-                        ' Click dropdown button on the right for other' +
-                        ' BLAST algorithms that can be used.';
-                }
-                return title;
-            }, this),
-        });
-    }
-
-    /**
- * Show tooltip on input group.
- */
-    showTooltip() {
-        this.inputGroup()._tooltip('show');
-    }
-
-    /**
- * Hide tooltip on input group.
- */
-    hideTooltip() {
-        this.inputGroup()._tooltip('hide');
-    }
-
     /**
  * Change selected algorithm.
  *
@@ -140,26 +92,49 @@ export class SearchButton extends Component {
             dropdownVisible: !prevState.dropdownVisible
         }));
     }
+    
+    setMessageTooltipButton() {
+        if (!this.state.hasQuery && !this.state.hasDatabases) {
+            this.setState({ messageTooltip: 'You must enter a query sequence and select one or more databases above before you can run a search!' });
+        } else if (this.state.hasQuery && !this.state.hasDatabases) {
+            this.setState({ messageTooltip: 'You must select one or more databases above before you can run a search!' });
+        } else if (!this.state.hasQuery && this.state.hasDatabases) {
+            this.setState({ messageTooltip: 'You must enter a query sequence above before you can run a search!' });
+        }
+    }
 
-    render() {
-        var methods = this.state.methods;
-        var method = methods[0];
-        var multi = methods.length > 1;
+    setTitleTooltipButton() {
+        var title = 'Click to BLAST or press Ctrl+Enter.';
+
+        this.setState({ titleTooltip: title });
+
+        if (this.state.methods.length > 1) {
+            this.setState({
+                titleTooltip: title +=
+                    ' Click dropdown button on the right for other' +
+                    ' BLAST algorithms that can be used.'
+             });
+        }
+    }
+
+    handeMouseOut() {
+        clearTimeout(this.timeout);
+        this.setState({ hideMessageTooltip: false });
+    }
 
+    handleMouseOver() {
+        this.setMessageTooltipButton();
+        this.setTitleTooltipButton();
+        this.timeout = setTimeout(() => this.setState({ hideMessageTooltip: true}), 3000)
+    }
+
+    renderButton(method, multi, methods) {
         return (
-            <div
-                // className={multi ? 'flex' : 'flex'}
-                className="my-4 md:my-2 flex justify-end w-full md:w-auto relative"
-                id="methods"
-                ref={this.inputGroupRef}
-                onMouseOver={this.showTooltip}
-                onMouseOut={this.hideTooltip}
-            >
+            <div className="flex">
                 <button
                     type="submit"
-                    className="uppercase w-full md:w-auto flex text-xl justify-center py-2 px-16 border border-transparent rounded-md shadow-sm text-white bg-seqblue hover:bg-seqorange focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-seqorange"
+                    className={`${method ? 'hover:bg-seqorange focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-seqorange ' : 'opacity-50 cursor-not-allowed '}uppercase w-full md:w-auto flex text-xl justify-center py-2 px-16 border border-transparent rounded-md shadow-sm text-white bg-seqblue`}
                     id="method"
-                    ref={this.submitButtonRef}
                     name="method"
                     value={method}
                     disabled={!method}
@@ -201,6 +176,38 @@ export class SearchButton extends Component {
                     </div>
                 )}
             </div>
+        )
+    }
+
+    render() {
+        var methods = this.state.methods;
+        var method = methods[0];
+        var multi = methods.length > 1;
+
+        return (
+            <div
+                className="my-4 md:my-2 flex justify-end w-full md:w-auto relative"
+                id="methods"
+                ref={this.inputGroupRef}
+                onMouseOver={this.handleMouseOver}
+                onMouseOut={this.handeMouseOut}
+            >
+                <div className="relative flex flex-col items-center group">
+                    <div className="flex items-center w-full">
+                        {this.renderButton(method, multi, methods)}
+                        { !this.state.dropdownVisible &&
+                            <div className="absolute hidden bottom-11 items-center flex-col-reverse group-hover:flex w-full">
+                                <div className="w-0 h-0 border-y-8 border-r-8 border-t-transparent border-b-transparent border-r-black -mt-1 -mr-px tooltip-arrow-rotate"></div>
+                                <span className="relative z-10 p-2 search-button-text leading-4 text-center text-white whitespace-no-wrap bg-black shadow-lg rounded-md">
+                                    { !this.state.hasQuery || !this.state.hasDatabases ? (
+                                        this.state.hideMessageTooltip ?  <>{this.state.titleTooltip}</> : this.state.messageTooltip
+                                    ) : <> {this.state.titleTooltip}</>}
+                                </span>
+                            </div>
+                        }
+                    </div>
+                </div>
+            </div>
         );
     }
 }

data/public/js/sequence.js

@@ -293,17 +293,9 @@ require = (function e(t, n, r) { function s(o, u) { if (!n[o]) { if (!t[o]) { va
                     //Initialize tooltip
                     var tooltip = 'sequenceTip' + this.opt.target;
                     jQuery('<div id="' + tooltip + '"></div>')
-                        .css({
-                            'position': 'absolute',
-                            'z-index': '999999',
-                            'color': '#fff',
-                            'font-size': '12px',
-                            'width': 'auto',
-                            'display': 'none'
-                        })
-                        .addClass('tooltip')
-                        .appendTo('body')
-                        .hide();
+                        .appendTo('.fastan-content')
+                        .addClass('absolute top-0 left-0')
+                        .show()
                     this.opt._tooltip = document.getElementById(tooltip);
 
                     if ((this.opt.sequence)) {
@@ -1188,20 +1180,13 @@ require = (function e(t, n, r) { function s(o, u) { if (!n[o]) { if (!t[o]) { va
                     if (opt.numLeft) {
                         $('<pre/>')
                             .html(indL)
-                            .addClass('indL')
-                            .css({
-                                color: '#aaa',
-                                display: 'inline-block'
-                            })
+                            .addClass('indL hidden sm:inline-block')
                             .appendTo(this._contentDiv);
                     }
 
                     $('<pre/>')
                         .html(str)
-                        .addClass('seqF')
-                        .css({
-                            display: 'inline-block'
-                        })
+                        .addClass('seqF inline-block')
                         .appendTo(this._contentDiv);
 
                     if (opt.numRight) {
@@ -1328,14 +1313,18 @@ require = (function e(t, n, r) { function s(o, u) { if (!n[o]) { if (!t[o]) { va
                     jQuery(target).mouseover(function (e) {
 
                         var offset = jQuery(e.target).offset();
+                        var containerOffset = jQuery(e.target).closest('.seqF').offset();
 
                         if (!jQuery(tipId).is(':visible')) {
                             jQuery(tipId)
                                 .css({
                                     'background-color': '#000',
                                     'padding': '3px 10px 3px 10px',
-                                    'top': offset.top + jQuery(e.target).height() + 'px',
-                                    'left': offset.left + jQuery(e.target).width() + 'px'
+                                    'top': offset.top - containerOffset.top + jQuery(e.target).height() + 15 + 'px',
+                                    'left': offset.left - containerOffset.left + jQuery(e.target).width() + 70 + 'px',
+                                    'color': '#fff',
+                                    'font-size': '12px',
+                                    'position': 'absolute'
                                 })
                                 .animate({ opacity: '0.85' }, 10)
                                 .html(cbGetMessageFunction.call(target))