sequenceserver 3.1.3 → 3.2.0

data/public/js/cloud_share_modal.js

@@ -15,6 +15,7 @@ export default class CloudShareModal extends React.Component {
       email: '',
       agreeToTos: false,
       shareableurl: '',
+      isModalVisible: false,
     };
     this.modalRef = createRef();
   }
@@ -77,11 +78,19 @@ export default class CloudShareModal extends React.Component {
     return match ? match[1] : match;
   }
 
+  show = () => {
+    this.modalRef.current?.showModal();
+  }
+
+  hide = () => {
+    this.modalRef.current?.close();
+  }
+
   renderLoading() {
     return (
-      <div className="text-center">
+      <div className="text-center pt-3">
         <i className="fa fa-spinner fa-3x fa-spin"></i>
-        <p>Uploading the job to SequenceServer Cloud, please wait...</p>
+        <p className="my-3">Uploading the job to SequenceServer Cloud, please wait...</p>
       </div>
     );
   }
@@ -100,8 +109,8 @@ export default class CloudShareModal extends React.Component {
         {
           errorMessages.map((errorMessage, index) => (
             <div key={`fastan-${index}`} className="fastan">
-              <div className="section-content">
-                <div className="modal-error">{errorMessage}</div>
+              <div className="pt-0 px-0 pb-px">
+                <div className="text-danger text-lg border border-danger p-2 my-2">{errorMessage}</div>
               </div>
             </div>
           ))
@@ -117,46 +126,52 @@ export default class CloudShareModal extends React.Component {
 
     return(
       <form onSubmit={this.handleSubmit}>
-        <div className="form-group">
-          <label htmlFor="emailInput">Your Email Address</label>
+        <div className="px-6 py-4 text-sm">
+          <label htmlFor="emailInput" className="text-seqblue hover:text-orange cursor-pointer mb-0">Your Email Address</label>
           <input
             type="email"
             id="emailInput"
-            className="form-control"
+            className="block w-full rounded-md border-0 py-1.5 px-3 mb-3 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-seqblue sm:text-sm sm:leading-6"
             placeholder="person@example.com"
             name="email"
             value={email}
             required="required"
             onChange={this.handleChange}
           />
+          <p className="mb-3">
+            By submitting this form you agree to upload this SequenceServer result set to <a href="https://sequenceserver.com/cloud/" target="_bank" className="text-seqblue hover:text-seqorange">SenquenceServer Cloud</a>
+            , where it will become available on the internet to everyone with the link. You also agree that your email address will be stored on SequenceServer databases as proof of authentication for support and similar purposes.
+          </p>
+          <div className="form-check">
+            <input
+              type="checkbox"
+              id="tosCheckbox"
+              className="form-check-input"
+              name="agreeToTos"
+              checked={agreeToTos}
+              onChange={this.handleChange}
+            />
+            <label htmlFor="tosCheckbox" className="pl-2">
+              &nbsp;I agree to the <b><a href="https://sequenceserver.com/cloud/terms_and_conditions" target="_blank" className="text-seqblue hover:text-seqorange">Terms and Conditions of Service</a></b>
+            </label>
+          </div>
         </div>
-        <p>
-          By submitting this form you agree to upload this SequenceServer result set to <a href="https://sequenceserver.com/cloud/" target="_bank">SenquenceServer Cloud</a>
-          , where it will become available on the internet to everyone with the link. You also agree that your email address will be stored on SequenceServer databases as proof of authentication for support and similar purposes.
-        </p>
-
-        <div className="form-group form-check">
-          <input
-            type="checkbox"
-            id="tosCheckbox"
-            className="form-check-input"
-            name="agreeToTos"
-            checked={agreeToTos}
-            onChange={this.handleChange}
-          />
-          <label htmlFor="tosCheckbox" className="form-check-label">
-            &nbsp;I agree to the <b><a href="https://sequenceserver.com/cloud/terms_and_conditions" target="_blank">Terms and Conditions of Service</a></b>
-          </label>
+        <div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
+          <button
+              type="submit"
+              style={{ backgroundColor: isSubmitDisabled ? '#C74F13' : '#1B557A' }}
+              className='border-seqblue py-2 px-3 rounded-md text-white'
+              disabled={isSubmitDisabled}
+          >
+              Submit
+          </button>
         </div>
-        <button type="submit" className="btn btn-primary" disabled={isSubmitDisabled}>
-          Submit
-        </button>
       </form>
     )
   }
 
   render() {
-    const { formState } = this.state;
+    const { formState, isModalVisible } = this.state;
 
     let content;
     switch (formState) {
@@ -176,41 +191,23 @@ export default class CloudShareModal extends React.Component {
     }
 
     return (
-      <div className="modal cloud-share" ref={this.modalRef} tabIndex="-1">
-        <div className="modal-dialog">
-          <div className="modal-content">
-            <div className="modal-header">
-              <h3>Share to SequenceServer Cloud</h3>
+      <div className="relative">
+        <dialog ref={this.modalRef} className="fixed p-4 w-full max-w-2xl bg-transparent focus:outline-none">
+          <div className="relative flex flex-col rounded-lg bg-white shadow">
+            <div className="flex items-start justify-between rounded-t border-b p-5">
+              <h3 className="text-xl font-medium text-gray-900">
+                Share to SequenceServer Cloud
+              </h3>
+              <button className="ml-auto inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200" onClick={this.hide}>
+                <i className="fa-solid fa-xmark hover:text-black"></i>
+              </button>
             </div>
-            <div className="modal-body">
+            <div className="dialog-content">
               {content}
             </div>
           </div>
-        </div>
+        </dialog>
       </div>
     );
   }
-
-  /*
-   * Returns jQuery reference to the main modal container.
-   */
-  modal() {
-    return $(this.modalRef.current);
-  }
-
-  /**
-   * Shows share dialogue.
-   */
-  show() {
-    this.setState({ requestCompleted: false }, () => {
-      this.modal().modal("show");
-    });
-  }
-
-  /**
-   * Hide share dialogue.
-   */
-  hide() {
-    this.modal().modal("hide");
-  }
 }

data/public/js/collapse_preferences.js

@@ -1,26 +1,24 @@
 export default class CollapsePreferences {
-    constructor(component) {
+    constructor(component, defaultCollapsed = false) {
         this.component = component;
-        this.collapsePreferences = JSON.parse(localStorage.getItem('collapsePreferences')) || [];
+        this.defaultCollapsed = defaultCollapsed;
+        this.storageKey = 'sequenceServerCollapseStates';
+        this.collapseStates = JSON.parse(localStorage.getItem(this.storageKey)) || {};
     }
 
     toggleCollapse() {
         let currentlyCollapsed = this.component.state.collapsed;
-
         this.component.setState({ collapsed: !currentlyCollapsed });
 
-        let collapsePreferences = JSON.parse(localStorage.getItem('collapsePreferences')) || [];
-
-        if (currentlyCollapsed) {
-            localStorage.setItem('collapsePreferences', JSON.stringify(collapsePreferences.filter((name) => name !== this.component.name)));
-        } else {
-            let uniqueCollapsePreferences = [... new Set(collapsePreferences.concat([this.component.name]))];
-            localStorage.setItem('collapsePreferences', JSON.stringify(uniqueCollapsePreferences));
-        }
+        this.collapseStates[this.component.name] = !currentlyCollapsed;
+        localStorage.setItem(this.storageKey, JSON.stringify(this.collapseStates));
     }
 
     preferenceStoredAsCollapsed() {
-        return this.collapsePreferences.includes(this.component.name);
+        if (this.component.name in this.collapseStates) {
+            return this.collapseStates[this.component.name];
+        }
+        return this.defaultCollapsed;
     }
 
     renderCollapseIcon() {
@@ -28,10 +26,10 @@ export default class CollapsePreferences {
     }
 
     minusIcon() {
-        return <i className="fa fa-minus-square-o"></i>;
+        return <i className="print:!hidden fa-regular fa-square-minus"></i>;
     }
 
     plusIcon() {
-        return <i className="fa fa-plus-square-o"></i>;
+        return <i className="print:!hidden fa-regular fa-square-plus"></i>;
     }
-}
+}

data/public/js/databases.js

@@ -76,7 +76,7 @@ export class Databases extends Component {
 
         // Toggle button.
         var toggleState = '[Select all]';
-        var toggleClass = 'px-2 text-sm';
+        var toggleClass = 'px-2 text-base md:text-lg';
         var toggleShown = this.databases(category).length > 1;
         var toggleDisabled = this.state.type && this.state.type !== category;
         if (toggleShown && toggleDisabled) {
@@ -94,7 +94,7 @@ export class Databases extends Component {
             <div className={columnClass} key={'DB_' + category}>
                 <div>
                     <div className="border-b border-seqorange mb-2">
-                        <h4 style={{ display: 'inline' }} className="font-medium">
+                        <h4 className="font-medium inline text-base md:text-lg">
                             {panelTitle}
                         </h4>
                         <button
@@ -113,7 +113,7 @@ export class Databases extends Component {
                             this.databases(category),
                             _.bind(function (database, index) {
                                 return (
-                                    <li key={'DB_' + category + index}>
+                                    <li key={'DB_' + category + index} className="text-base md:text-lg leading-tight md:leading-tight">
                                         {this.renderDatabase(database)}
                                     </li>
                                 );
@@ -152,6 +152,7 @@ export class Databases extends Component {
                     data-type={database.type}
                     disabled={isDisabled}
                     checked={isChecked}
+                    className="checkbox-database"
                     onChange={_.bind(function () {
                         this.handleDatabaseSelectionClick(database);
                     }, this)}

data/public/js/databases_tree.js

@@ -16,29 +16,37 @@ export default class extends Databases {
         var tree_id = '#' + category + '_database_tree';
         // hack that is needed to sync the selected tree db with the hidden main db
         window.jstree_node_change_timeout = null;
+        window.jstree_rapid_timeout = null
+        const _this = this;
 
-        // when a tree database gets selected
-        $(tree_id).on('select_node.jstree deselect_node.jstree', function (e, data) {
-            if (window.jstree_node_change_timeout) {
-                clearTimeout(window.jstree_node_change_timeout);
-                window.jstree_node_change_timeout = null;
-            }
+        $(tree_id).on('select_node.jstree deselect_node.jstree', function (_, _data) {
+            if (window.jstree_node_change_timeout) clearTimeout(window.jstree_node_change_timeout);
+            if (window.jstree_rapid_timeout) clearTimeout(window.jstree_rapid_timeout);
+
+            // Set a timeout to handle jsTree node changes with some delay to avoid rapid re-triggering
+            window.jstree_rapid_timeout = setTimeout(function () {
+                // Set another timeout to handle the retrieval and processing of selected nodes
+                window.jstree_node_change_timeout = setTimeout(function () {
+                    // Filter out the current category to get a list of other categories
+                    const otherCategories = _this.categories().filter(item => item !== category);
+
+                    // Uncheck all nodes in the trees of the other categories
+                    otherCategories.forEach((value) => $(`#${value}_database_tree`).jstree('uncheck_all'));
+                    // Get all selected nodes from the current tree.
+                    // Note: This will also include folders. To filter only database nodes, ensure the ID length is 32.
+                    // These IDs correspond to specific elements in the hidden main form.
+                    const selected = $(tree_id).jstree('get_selected').filter(selected => selected.length === 32);
+
+                    // Find database entries in the current category whose IDs match the selected nodes
+                    const foundDatabases = _this.databases(category).filter(db => selected.includes(db.id));
 
-            window.jstree_node_change_timeout = setTimeout(function () {
-                // uncheck all input
-                $('div#database_list input[type="checkbox"]:checked').click();
-                setTimeout(function () {
-                    // get all selected tree dbs. Also includes folders. Therefore, the id must have a length of 32
-                    // this id is used to find the corresponding element from the hidden main form
-                    var selected = $(tree_id).jstree('get_selected').filter(selected => selected.length == 32);
-                    $.each(selected, function (index, value) {
-                        // select hidden element to trigger original sequenceserver behavior, like blast algorithm, ...
-                        $('input[value="' + value + '"]').click();
-                    });
-                }, 100);
-            }, 100);
+                    // Update the selected databases in the view model with the found databases
+                    _this.selectDatabases(foundDatabases);
+                }, 100); // Delay to ensure jsTree updates are processed
+            }, 100); // Delay to prevent rapid changes causing multiple triggers
         });
 
+
         $(tree_id).jstree({
             'core': {
                 'data': this.props.tree[category]
@@ -50,6 +58,10 @@ export default class extends Databases {
         });
     }
 
+    selectDatabases(databases) {
+        this.setState({ currentlySelectedDatabases: databases });
+    }
+
     handleTreeSearch(category, tree_id, search_id) {
         var search_for = $('#' + search_id).val();
         $('#' + tree_id).jstree(true).search(search_for);
@@ -59,15 +71,18 @@ export default class extends Databases {
         // Panel name and column width.
         var panelTitle = category[0].toUpperCase() +
             category.substring(1).toLowerCase() + ' databases';
-        var columnClass = this.categories().length === 1 ? 'col-md-12' :
-            'col-md-6';
+        var columnClass = this.categories().length === 1 ? 'col-span-2' : '';
 
         // Toggle button.
         var toggleState = '[Select all]';
-        var toggleClass = 'btn-link';
+        var toggleClass = 'px-2 text-base md:text-lg hidden';
         var toggleShown = this.databases(category).length > 1;
         var toggleDisabled = this.state.type && this.state.type !== category;
-        if (toggleShown && toggleDisabled) toggleClass += ' disabled';
+        if (toggleShown && toggleDisabled) {
+            toggleClass += ' text-gray-400';
+        } else {
+            toggleClass += ' text-seqblue';
+        }
         if (!toggleShown) toggleClass += ' hidden';
         if (this.nselected() === this.databases(category).length) {
             toggleState = '[Deselect all]';
@@ -76,22 +91,28 @@ export default class extends Databases {
         // JSX.
         return (
             <div className={columnClass} key={'DB_' + category}>
-                <div className='panel panel-default' id='database_list'>
-                    <div className='panel-heading'>
-                        <h4 style={{ display: 'inline' }}>{panelTitle}</h4> &nbsp;&nbsp;
+                <div>
+                    <div className="border-b border-seqorange mb-2" id="database_list">
+                        <h4 className="font-medium text-base md:text-lg">{panelTitle}</h4>
                         {
                             this.renderDatabaseSearch(category)
                         }
-                        <button type='button' className={toggleClass} disabled={toggleDisabled} style={{ display: 'none' }}
-                            onClick={function () { this.handleToggle(toggleState, category); }.bind(this)}>
+                        <button
+                            type="button"
+                            className={toggleClass}
+                            disabled={toggleDisabled}
+                            onClick={function () {
+                                this.handleToggle(toggleState, category);
+                            }.bind(this)}
+                        >
                             {toggleState}
                         </button>
                     </div>
-                    <ul className={'list-group databases ' + category} style={{ display: 'none' }}>
+                    <ul className={'databases hidden text-lg ' + category}>
                         {
                             _.map(this.databases(category), _.bind(function (database, index) {
                                 return (
-                                    <li className='list-group-item' key={'DB_' + category + index}>
+                                    <li key={'DB_' + category + index}>
                                         {this.renderDatabase(database)}
                                     </li>
                                 );

data/public/js/error_modal.js

@@ -2,7 +2,7 @@ import React, { createRef } from 'react';
 
 /**
  * Takes errorData object with title, message, and more_info keys as props. The
- * component displays a bootstrap modal when mounted. errorData.title is used
+ * component displays a tailwind modal when mounted. errorData.title is used
  * to set modal title. errorData.message is inserted as HTML text in modal
  * body. And errorData.more_info is shown using a pre tag in modal body.
  *
@@ -13,46 +13,59 @@ export default class ErrorModal extends React.Component {
 
     constructor(props) {
         super(props);
-        this.state = { errorData: {} };
-        this.modal = createRef();
+        this.state = {
+            errorData: {},
+            isModalVisible: false
+        };
+        this.modalRef = createRef();
     }
 
-    // HTML for Bootstrap modal.
     render() {
+        const { isModalVisible, errorData } = this.state;
+
         return (
-            <div id="error" ref={this.modal} className="modal fade"
-                data-keyboard="false" data-backdrop="static">
-                <div className="modal-dialog modal-lg">
-                    <div className="modal-content">
-                        <div className="modal-header">
-                            <h3>{this.state.errorData.title}</h3>
+            <div className="relative">
+                <dialog ref={this.modalRef} className="fixed p-4 w-full max-w-2xl bg-transparent focus:outline-none">
+                    <div className="relative flex flex-col rounded-lg bg-white shadow">
+                        <div className="flex items-start justify-between rounded-t border-b p-5">
+                            <h3 className="text-xl font-medium text-gray-900">
+                                {errorData.title}
+                            </h3>
+                            <button className="ml-auto inline-flex items-center rounded-lg bg-transparent p-1.5 text-gray-400 hover:bg-gray-200" onClick={this.hide}>
+                                <i className="fa-solid fa-xmark hover:text-black"></i>
+                            </button>
                         </div>
-
-                        <div className="modal-body">
-                            <p dangerouslySetInnerHTML={{ __html: this.state.errorData.message}}></p>
-
+                        <div className="pt-2 px-6 pb-6 mt-2 text-sm">
+                            <p dangerouslySetInnerHTML={{ __html: errorData.message }} className="mb-4"></p>
                             {
-                                this.state.errorData.more_info &&
-                                    <pre className="pre-scrollable">
-                                        {this.state.errorData.more_info}
-                                    </pre>
+                                errorData.more_info &&
+                                    <pre className="p-2 bg-slate-200 overflow-auto max-h-56">{errorData.more_info}</pre>
                             }
                         </div>
                     </div>
-                </div>
+                </dialog>
             </div>
         );
     }
+
     /**
      * Shows error viewer.
      */
-    show (errorData, beforeShow) {
-        this.setState({errorData: errorData});
+    show = (errorData, beforeShow) => {
+        this.setState({ errorData: errorData });
+
         // Caller can specify an amount of time to wait for before showing the
         // modal. This is helpful if the caller wants to finish some work
         // before showing error modal.
         setTimeout(() => {
-            $(this.modal.current).modal('show');
+            this.modalRef.current?.showModal();
         }, beforeShow || 0);
     }
+
+    /**
+     * Hide dialogue.
+     */
+    hide = () => {
+        this.modalRef.current?.close();
+    }
 }

data/public/js/exporter.js

@@ -1,3 +1,5 @@
+var d3 = require('d3');
+
 export function download_url(url, filename) {
     var a = d3.select('body').append('a')
     .attr('download', filename)

data/public/js/form.js

@@ -60,7 +60,12 @@ export class Form extends Component {
                 databases: data['database'],
                 preSelectedDbs: data['preSelectedDbs'],
                 preDefinedOpts: data['options'],
-                blastTaskMap: data['blastTaskMap']
+                blastTaskMap: data['blastTaskMap'],
+                currentlySelectedDbs: data['preSelectedDbs'] || [],
+            }, () => {
+                this.handleDatabaseSelectionChanged(this.state.currentlySelectedDbs);
+                this.handleFirstSelectionDB();
+                this.setBlastMethods();
             });
 
             /* Pre-populate the form with server sent query sequences
@@ -70,6 +75,11 @@ export class Form extends Component {
                 this.query.current.value(data['query']);
             }
 
+            // DB selection
+            setTimeout(() => {
+                this.preselectDatabases(this.state.preSelectedDbs);
+            }, 0);
+
             setTimeout(function () {
                 $('.jstree_div').click();
             }, 1000);
@@ -83,11 +93,32 @@ export class Form extends Component {
                 $button.trigger('click');
             }
         });
+    }
 
-        // show overlay to create visual feedback on button click
-        $('#method').on('click', () => {
-            $('#overlay').css('display', 'block');
-        });
+    handleFirstSelectionDB() {
+        const firstSelectedDb = this.state.preSelectedDbs != null ? this.state.preSelectedDbs[0].type : null;
+        if (firstSelectedDb) {
+            this.handleDatabaseTypeChanged(firstSelectedDb);
+        }
+    }
+    
+    setBlastMethods() {
+        const methods = this.determineBlastMethods();
+        if (methods.length > 0) {
+            this.setState({ blastMethod: methods[0] });
+        }
+    }
+
+    preselectDatabases(preSelectedDbs) {
+        if (preSelectedDbs) {
+            preSelectedDbs.forEach(db => {
+                const matchCheckbox = this.formRef.current.querySelector(`input.checkbox-database[value="${db.id}"]`);
+                if (matchCheckbox) {
+                    matchCheckbox.click();
+                    matchCheckbox.checked = true;
+                }
+            });
+        }
     }
 
     useTreeWidget() {
@@ -97,14 +128,18 @@ export class Form extends Component {
     handleFormSubmission(evt) {
         evt.preventDefault();
         const form = this.formRef.current;
+
+        document.getElementById('overlay').style.display = 'block';
+
         const formData = new FormData(form);
         formData.append('method', this.button.current.state.methods[0]);
+
         fetch(window.location.href, {
             method: 'POST',
             body: formData
         }).then(res => {
             //remove overlay when form is submitted
-            $('#overlay').css('display', 'none');
+            document.getElementById('overlay').style.display = 'none';
             // redirect
             if (res.redirected && res.url) {
                 // setTimeout is needed here as a workaround because safari doesnt allow async calling of window.open
@@ -223,6 +258,7 @@ export class Form extends Component {
                         }
 
                         <Options blastMethod={this.state.blastMethod} predefinedOptions={this.state.preDefinedOpts[this.state.blastMethod] || {}} blastTasks={(this.state.blastTaskMap || {})[this.state.blastMethod]} />
+
                     </div>
 
                     <div className="py-6"></div> {/* add a spacer so that the sticky action bar does not hide any contents */}
@@ -233,7 +269,7 @@ export class Form extends Component {
                             currentBlastMethod={this.state.blastMethod}
                         />
 
-                        <label className="block my-4 md:my-2">
+                        <label className="text-seqblue hover:seqorange cursor-pointer block my-4 md:my-2">
                             <input type="checkbox" id="toggleNewTab" /> Open results in new tab
                         </label>
                         <SearchButton ref={this.button} onAlgoChanged={this.handleAlgoChanged} />