sequenceserver 3.1.2 → 3.2.0

data/public/js/report_root.js

@@ -17,6 +17,8 @@ class Page extends Component {
         this.showErrorModal = this.showErrorModal.bind(this);
         this.getCharacterWidth = this.getCharacterWidth.bind(this);
         this.hspChars = createRef();
+        this.sequenceModal = createRef();
+        this.errorModal = createRef();
     }
     componentDidMount() {
         var job_id = location.pathname.split('/').pop();
@@ -24,11 +26,11 @@ class Page extends Component {
     }
 
     showSequenceModal(url) {
-        this.refs.sequenceModal.show(url);
+        this.sequenceModal.current.show(url);
     }
 
     showErrorModal(errorData, beforeShow) {
-        this.refs.errorModal.show(errorData, beforeShow);
+        this.errorModal.current.show(errorData, beforeShow);
     }
 
     getCharacterWidth() {
@@ -41,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()}
@@ -52,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>
 
@@ -60,11 +62,11 @@ class Page extends Component {
                 <canvas id="png-exporter" hidden></canvas>
 
                 <SequenceModal
-                    ref="sequenceModal"
+                    ref={this.sequenceModal}
                     showErrorModal={(...args) => this.showErrorModal(...args)}
                 />
 
-                <ErrorModal ref="errorModal" />
+                <ErrorModal ref={this.errorModal} />
             </div>
         );
     }
@@ -72,4 +74,4 @@ class Page extends Component {
 
 
 const root = createRoot(document.getElementById('view'));
-root.render(<Page />);
+root.render(<Page />);

data/public/js/search.js

@@ -1,32 +1,52 @@
-import "./jquery_world";
-import React, { Component } from "react";
-import { createRoot } from "react-dom/client";
-import { DnD } from "./dnd";
-import { Form } from "./form";
-import { SearchHeaderPlugin } from "search_header_plugin";
+import './jquery_world';
+import React, { Component } from 'react';
+import { createRoot } from 'react-dom/client';
+import { DnD } from './dnd';
+import { Form } from './form';
+import { SearchHeaderPlugin } from 'search_header_plugin';
 
 /**
  * Clear sessionStorage on reload.
  */
-if (performance.navigation.type == performance.navigation.TYPE_RELOAD) {
+const navigationEntry = performance.getEntriesByType('navigation')[0];
+if (navigationEntry && navigationEntry.type === 'reload') {
   sessionStorage.clear();
   history.replaceState(null, "", location.href.split("?")[0]);
 }
 
 class Page extends Component {
+  constructor(props) {
+    super(props);
+    this.dnd = React.createRef();
+    this.form = React.createRef();
+  }
+
   componentDidMount() {
-    this.refs.dnd.setState({ query: this.refs.form.refs.query });
+    this.dnd.current.setState({ query: this.form.current.query.current })
   }
+
   render() {
     return (
       <div>
         <SearchHeaderPlugin />
-        <DnD ref="dnd" />
-        <Form ref="form" />
+        <DnD ref={this.dnd} />
+        <Form ref={this.form} />
       </div>
     );
   }
 }
 
-const root = createRoot(document.getElementById("view"));
+const root = createRoot(document.getElementById('view'));
 root.render(<Page />);
+
+document.addEventListener('DOMContentLoaded', () => {
+    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() {
+            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>
         );
     }
 }