sequenceserver 3.0 → 3.1.0

data/public/js/circos.js

@@ -2,7 +2,7 @@ import d3 from 'd3';
 import Circos from '../packages/circosJS@1.7.0';
 import _ from 'underscore';
 
-import Grapher from './grapher';
+import Grapher from 'grapher';
 import * as Helpers from './visualisation_helpers';
 import Utils from './utils';
 
@@ -19,7 +19,7 @@ class Graph {
         return 'circos';
     }
 
-    static collapseId(props) {
+    static graphId(props) {
         return 'circos-collapse';
     }
 

data/public/js/collapse_preferences.js

@@ -0,0 +1,37 @@
+export default class CollapsePreferences {
+    constructor(component) {
+        this.component = component;
+        this.collapsePreferences = JSON.parse(localStorage.getItem('collapsePreferences')) || [];
+    }
+
+    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));
+        }
+    }
+
+    preferenceStoredAsCollapsed() {
+        return this.collapsePreferences.includes(this.component.name);
+    }
+
+    renderCollapseIcon() {
+        return this.component.state.collapsed ? this.plusIcon() : this.minusIcon();
+    }
+
+    minusIcon() {
+        return <i className="fa fa-minus-square-o"></i>;
+    }
+
+    plusIcon() {
+        return <i className="fa fa-plus-square-o"></i>;
+    }
+}

data/public/js/databases.js

@@ -4,30 +4,43 @@ import _ from 'underscore';
 export class Databases extends Component {
     constructor(props) {
         super(props);
-        this.state = { type: '' };
+        this.state = {
+            type: '',
+            currentlySelectedDatabases: [],
+        };
+
         this.preSelectedDbs = this.props.preSelectedDbs;
         this.databases = this.databases.bind(this);
         this.nselected = this.nselected.bind(this);
         this.categories = this.categories.bind(this);
-        this.handleClick = this.handleClick.bind(this);
         this.handleToggle = this.handleToggle.bind(this);
         this.renderDatabases = this.renderDatabases.bind(this);
         this.renderDatabase = this.renderDatabase.bind(this);
     }
-    componentDidUpdate() {
-        if (this.databases() && this.databases().length === 1) {
-            $('.databases').find('input').prop('checked', true);
-            this.handleClick(this.databases()[0]);
+
+    componentDidUpdate(_prevProps, prevState) {
+        // If there's only one database, select it.
+        if (this.databases() && this.databases().length === 1 && this.state.currentlySelectedDatabases.length === 0) {
+            this.setState({currentlySelectedDatabases: this.databases()});
         }
 
-        if (this.preSelectedDbs) {
-            var selectors = this.preSelectedDbs.map((db) => `input[value=${db.id}]`);
-            $(selectors.join(',')).prop('checked', true);
-            this.handleClick(this.preSelectedDbs[0]);
+        if (this.preSelectedDbs && this.preSelectedDbs.length !== 0) {
+            this.setState({currentlySelectedDatabases: this.preSelectedDbs});
             this.preSelectedDbs = null;
         }
-        this.props.onDatabaseTypeChanged(this.state.type);
+        const type = this.state.currentlySelectedDatabases[0] ? this.state.currentlySelectedDatabases[0].type : '';
+        if (type != this.state.type) {
+            this.setState({ type: type });
+            this.props.onDatabaseTypeChanged(type);
+        }
+
+        if (prevState.currentlySelectedDatabases !== this.state.currentlySelectedDatabases) {
+            // Call the prop function with the new state
+            this.props.onDatabaseSelectionChanged(this.state.currentlySelectedDatabases);
+        }
+
     }
+
     databases(category) {
         var databases = this.props.databases;
         if (category) {
@@ -38,40 +51,39 @@ export class Databases extends Component {
     }
 
     nselected() {
-        return $('input[name="databases[]"]:checked').length;
+        return this.state.currentlySelectedDatabases.length;
     }
 
     categories() {
         return _.uniq(_.map(this.props.databases, _.iteratee('type'))).sort();
     }
 
-    handleClick(database) {
-        var type = this.nselected() ? database.type : '';
-        if (type != this.state.type) this.setState({ type: type });
-    }
-
     handleToggle(toggleState, type) {
         switch (toggleState) {
         case '[Select all]':
-            $(`.${type} .database input:not(:checked)`).click();
+            this.setState({ currentlySelectedDatabases: this.databases(type) });
             break;
         case '[Deselect all]':
-            $(`.${type} .database input:checked`).click();
+            this.setState({ currentlySelectedDatabases: [] });
             break;
         }
-        this.forceUpdate();
     }
+
     renderDatabases(category) {
     // 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-sm';
         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]';
@@ -80,9 +92,11 @@ export class Databases extends Component {
         // JSX.
         return (
             <div className={columnClass} key={'DB_' + category}>
-                <div className="panel panel-default">
-                    <div className="panel-heading">
-                        <h4 style={{ display: 'inline' }}>{panelTitle}</h4> &nbsp;&nbsp;
+                <div>
+                    <div className="border-b border-seqorange mb-2">
+                        <h4 style={{ display: 'inline' }} className="font-medium">
+                            {panelTitle}
+                        </h4>
                         <button
                             type="button"
                             className={toggleClass}
@@ -94,15 +108,12 @@ export class Databases extends Component {
                             {toggleState}
                         </button>
                     </div>
-                    <ul className={'list-group databases ' + category}>
+                    <ul className={'databases ' + 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>
                                 );
@@ -114,20 +125,37 @@ export class Databases extends Component {
         );
     }
 
+    handleDatabaseSelectionClick(database) {
+        const isSelected = this.state.currentlySelectedDatabases.some(db => db.id === database.id);
+
+        if (isSelected) {
+            this.setState(prevState => ({
+                currentlySelectedDatabases: prevState.currentlySelectedDatabases.filter(db => db.id !== database.id)
+            }));
+        } else {
+            this.setState(prevState => ({
+                currentlySelectedDatabases: [...prevState.currentlySelectedDatabases, database]
+            }));
+        }
+    }
+
     renderDatabase(database) {
-        var disabled = this.state.type && this.state.type !== database.type;
+        const isDisabled = this.state.type && this.state.type !== database.type;
+        const isChecked = this.state.currentlySelectedDatabases.some(db => db.id === database.id);
 
         return (
-            <label className={(disabled && 'disabled database') || 'database'}>
+            <label className={(isDisabled && 'database text-gray-400') || 'database text-seqblue'}>
                 <input
                     type="checkbox"
                     name="databases[]"
                     value={database.id}
                     data-type={database.type}
-                    disabled={disabled}
+                    disabled={isDisabled}
+                    checked={isChecked}
                     onChange={_.bind(function () {
-                        this.handleClick(database);
+                        this.handleDatabaseSelectionClick(database);
                     }, this)}
+
                 />
                 {' ' + (database.title || database.name)}
             </label>
@@ -136,9 +164,9 @@ export class Databases extends Component {
 
     render() {
         return (
-            <div className="form-group databases-container">
+            <div className="my-6 grid md:grid-cols-2 gap-4">
                 {_.map(this.categories(), this.renderDatabases)}
             </div>
         );
     }
-}
+}

data/public/js/databases_tree.js

@@ -102,6 +102,7 @@ export default class extends Databases {
                 {
                     this.renderDatabaseTree(category)
                 }
+                <link rel="stylesheet" media="screen,print" type="text/css" href="vendor/github/vakata/jstree@3.3.8/dist/themes/default/style.min.css"/>
             </div>
         );
     }
@@ -111,7 +112,7 @@ export default class extends Databases {
         var search_id = tree_id + '_search';
 
         return (
-            <input type='text' id={search_id} class='input'
+            <input type='text' id={search_id} className='border rounded px-1' placeholder='Search...'
                 onKeyUp=
                     {
                         _.bind(function () {

data/public/js/dnd.js

@@ -102,59 +102,46 @@ export class DnD extends Component {
     render() {
         return (
             <div
-                className="dnd-overlay"
+                className="dnd-overlay absolute left-0 top-0 w-full h-full bg-gray-200 bg-opacity-75 z-40"
                 style={{ display: 'none' }}>
-                <div
-                    className="container dnd-overlay-container">
+                <div className="flex flex-col space-y-4 h-full items-center justify-center dnd-overlay-container text-2xl">
+                    <p
+                        className="dnd-overlay-drop flex items-center space-x-4"
+                        style={{ display: 'none' }}>
+                        <i className="fa fa-2x fa-file"></i>
+                        Drop query sequence file here
+                    </p>
+                    <p
+                        className="dnd-overlay-overwrite flex items-center space-x-4"
+                        style={{ display: 'none' }}>
+                        <i className="fa fa-2x fa-file"></i>
+                        <span className="text-red-800">Overwrite</span>&nbps;query sequence file
+                    </p>
+
                     <div
-                        className="row">
+                        className="dnd-errors text-red-800">
+                        <div
+                            className="dnd-error row"
+                            id="dnd-multi-notification"
+                            style={{ display: 'none' }}>
+
+                            One file at a time please.
+                        </div>
+
                         <div
-                            className="col-md-offset-2 col-md-10">
-                            <p
-                                className="dnd-overlay-drop"
-                                style={{ display: 'none' }}>
-                                <i className="fa fa-2x fa-file-o"></i>
-                                Drop query sequence file here
-                            </p>
-                            <p
-                                className="dnd-overlay-overwrite"
-                                style={{ display: 'none' }}>
-                                <i className="fa fa-2x fa-file-o"></i>
-                                <span style={{ color: 'red' }}>Overwrite</span> query sequence file
-                            </p>
-
-                            <div
-                                className="dnd-errors">
-                                <div
-                                    className="dnd-error row"
-                                    id="dnd-multi-notification"
-                                    style={{ display: 'none' }}>
-                                    <div
-                                        className="col-md-6 col-md-offset-3">
-                                        One file at a time please.
-                                    </div>
-                                </div>
-
-                                <div
-                                    className="dnd-error row"
-                                    id="dnd-large-file-notification"
-                                    style={{ display: 'none' }}>
-                                    <div
-                                        className="col-md-6 col-md-offset-3">
-                                        Too big a file. Can only do less than 250 MB. &gt;_&lt;
-                                    </div>
-                                </div>
-
-                                <div
-                                    className="dnd-error row"
-                                    id="dnd-format-notification"
-                                    style={{ display: 'none' }}>
-                                    <div
-                                        className="col-md-6 col-md-offset-3">
-                                        Only FASTA files please.
-                                    </div>
-                                </div>
-                            </div>
+                            className="dnd-error row"
+                            id="dnd-large-file-notification"
+                            style={{ display: 'none' }}>
+
+                            Too big a file. Can only do less than 250 MB. &gt;_&lt;
+                        </div>
+
+                        <div
+                            className="dnd-error row"
+                            id="dnd-format-notification"
+                            style={{ display: 'none' }}>
+
+                            Only FASTA files please.
                         </div>
                     </div>
                 </div>

data/public/js/form.js

@@ -4,7 +4,8 @@ import { SearchQueryWidget } from './query';
 import DatabasesTree from './databases_tree';
 import { Databases } from './databases';
 import _ from 'underscore';
-import { Options } from './options';
+import { Options } from 'options';
+import QueryStats from 'query_stats';
 
 /**
  * Search form.
@@ -16,15 +17,24 @@ export class Form extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            databases: [], preDefinedOpts: {}, tree: {}
+            databases: [],
+            preSelectedDbs: [],
+            currentlySelectedDbs: [],
+            preDefinedOpts: {},
+            tree: {},
+            residuesInQuerySequence: 0,
+            blastMethod: ''
         };
         this.useTreeWidget = this.useTreeWidget.bind(this);
-        this.determineBlastMethod = this.determineBlastMethod.bind(this);
+        this.determineBlastMethods = this.determineBlastMethods.bind(this);
         this.handleSequenceTypeChanged = this.handleSequenceTypeChanged.bind(this);
+        this.handleSequenceChanged = this.handleSequenceChanged.bind(this);
         this.handleDatabaseTypeChanged = this.handleDatabaseTypeChanged.bind(this);
+        this.handleDatabaseSelectionChanged = this.handleDatabaseSelectionChanged.bind(this);
         this.handleAlgoChanged = this.handleAlgoChanged.bind(this);
         this.handleFormSubmission = this.handleFormSubmission.bind(this);
         this.formRef = createRef();
+        this.setButtonState = this.setButtonState.bind(this);
     }
 
     componentDidMount() {
@@ -47,7 +57,8 @@ export class Form extends Component {
                 tree: data['tree'],
                 databases: data['database'],
                 preSelectedDbs: data['preSelectedDbs'],
-                preDefinedOpts: data['options']
+                preDefinedOpts: data['options'],
+                blastTaskMap: data['blastTaskMap']
             });
 
             /* Pre-populate the form with server sent query sequences
@@ -103,7 +114,7 @@ export class Form extends Component {
         });
     }
 
-    determineBlastMethod() {
+    determineBlastMethods() {
         var database_type = this.databaseType;
         var sequence_type = this.sequenceType;
 
@@ -138,76 +149,93 @@ export class Form extends Component {
         return [];
     }
 
+    handleSequenceChanged(residuesInQuerySequence) {
+        if(residuesInQuerySequence !== this.state.residuesInQuerySequence)
+            this.setState({ residuesInQuerySequence: residuesInQuerySequence});
+    }
+
     handleSequenceTypeChanged(type) {
         this.sequenceType = type;
-        this.refs.button.setState({
-            hasQuery: !this.refs.query.isEmpty(),
-            hasDatabases: !!this.databaseType,
-            methods: this.determineBlastMethod()
-        });
+        this.setButtonState();
     }
 
     handleDatabaseTypeChanged(type) {
         this.databaseType = type;
+        this.setButtonState();
+    }
+
+    setButtonState() {
         this.refs.button.setState({
             hasQuery: !this.refs.query.isEmpty(),
             hasDatabases: !!this.databaseType,
-            methods: this.determineBlastMethod()
+            methods: this.determineBlastMethods()
         });
     }
 
+    handleDatabaseSelectionChanged(selectedDbs) {
+        if (!_.isEqual(selectedDbs, this.state.currentlySelectedDbs))
+            this.setState({ currentlySelectedDbs: selectedDbs });
+    }
+
     handleAlgoChanged(algo) {
         if (algo in this.state.preDefinedOpts) {
-            var preDefinedOpts = this.state.preDefinedOpts[algo];
-            this.refs.opts.setState({
-                method: algo,
-                preOpts: preDefinedOpts,
-                value: (preDefinedOpts['last search'] ||
-                    preDefinedOpts['default']).join(' ')
-            });
+            this.setState({ blastMethod: algo });
         }
         else {
-            this.refs.opts.setState({ preOpts: {}, value: '', method: '' });
+            this.setState({ blastMethod: ''});
         }
     }
 
+    residuesInSelectedDbs() {
+        return this.state.currentlySelectedDbs.reduce((sum, db) => sum + parseInt(db.ncharacters, 10), 0);
+    }
+
     render() {
         return (
-            <div className="container">
+            <div>
                 <div id="overlay" style={{ position: 'absolute', top: 0, left: 0, width: '100vw', height: '100vw', background: 'rgba(0, 0, 0, 0.2)', display: 'none', zIndex: 99 }} />
 
-                <div className="notifications" id="notifications">
+                <div className="fixed top-0 left-0 w-full max-h-8 px-8" data-notifications id="notifications">
                     <FastqNotification />
                     <NucleotideNotification />
                     <ProteinNotification />
                     <MixedNotification />
                 </div>
 
-                <form id="blast" ref={this.formRef} onSubmit={this.handleFormSubmission} className="form-horizontal">
-                    <div className="form-group query-container">
-                        <SearchQueryWidget ref="query" onSequenceTypeChanged={this.handleSequenceTypeChanged} />
+                <form id="blast" ref={this.formRef} onSubmit={this.handleFormSubmission}>
+                    <div className="px-4">
+                        <SearchQueryWidget ref="query" onSequenceTypeChanged={this.handleSequenceTypeChanged} onSequenceChanged={this.handleSequenceChanged}/>
+
+                        {this.useTreeWidget() ?
+                            <DatabasesTree ref="databases"
+                                databases={this.state.databases} tree={this.state.tree}
+                                preSelectedDbs={this.state.preSelectedDbs}
+                                onDatabaseTypeChanged={this.handleDatabaseTypeChanged}
+                                onDatabaseSelectionChanged={this.handleDatabaseSelectionChanged} />
+                            :
+                            <Databases ref="databases" databases={this.state.databases}
+                                preSelectedDbs={this.state.preSelectedDbs}
+                                onDatabaseTypeChanged={this.handleDatabaseTypeChanged}
+                                onDatabaseSelectionChanged={this.handleDatabaseSelectionChanged} />
+                        }
+
+                        <Options blastMethod={this.state.blastMethod} predefinedOptions={this.state.preDefinedOpts[this.state.blastMethod] || {}} blastTasks={(this.state.blastTaskMap || {})[this.state.blastMethod]} />
                     </div>
-                    {this.useTreeWidget() ?
-                        <DatabasesTree ref="databases"
-                            databases={this.state.databases} tree={this.state.tree}
-                            preSelectedDbs={this.state.preSelectedDbs}
-                            onDatabaseTypeChanged={this.handleDatabaseTypeChanged} />
-                        :
-                        <Databases ref="databases" databases={this.state.databases}
-                            preSelectedDbs={this.state.preSelectedDbs}
-                            onDatabaseTypeChanged={this.handleDatabaseTypeChanged} />
-                    }
-                    <div className="form-group">
-                        <Options ref="opts" />
-                        <div className="col-md-2">
-                            <div className="form-group" style={{ 'textAlign': 'center', 'padding': '7px 0' }}>
-                                <label>
-                                    <input type="checkbox" id="toggleNewTab" /> Open results in new tab
-                                </label>
-                            </div>
-                        </div>
+
+                    <div className="py-6"></div> {/* add a spacer so that the sticky action bar does not hide any contents */}
+
+                    <div className="pb-4 pt-2 px-4 sticky bottom-0 md:flex flex-row md:space-x-4 items-center justify-end bg-gradient-to-t to-gray-100/90 from-white/90">
+                        <QueryStats
+                            residuesInQuerySequence={this.state.residuesInQuerySequence} numberOfDatabasesSelected={this.state.currentlySelectedDbs.length} residuesInSelectedDbs={this.residuesInSelectedDbs()}
+                            currentBlastMethod={this.state.blastMethod}
+                        />
+
+                        <label className="block my-4 md:my-2">
+                            <input type="checkbox" id="toggleNewTab" /> Open results in new tab
+                        </label>
                         <SearchButton ref="button" onAlgoChanged={this.handleAlgoChanged} />
                     </div>
+
                 </form>
             </div>
         );
@@ -220,11 +248,11 @@ class ProteinNotification extends Component {
     render() {
         return (
             <div
-                className="notification row"
+                data-role="notification"
                 id="protein-sequence-notification"
                 style={{ display: 'none' }}>
                 <div
-                    className="alert-info col-md-6 col-md-offset-3">
+                    className="bg-blue-100 border rounded border-blue-800 px-4 py-2 my-2">
                     Detected: amino-acid sequence(s).
                 </div>
             </div>
@@ -235,11 +263,11 @@ class ProteinNotification extends Component {
 class NucleotideNotification extends Component {
     render() {
         return (<div
-            className="notification row"
+            data-role="notification"
             id="nucleotide-sequence-notification"
             style={{ display: 'none' }}>
             <div
-                className="alert-info col-md-6 col-md-offset-3">
+                className="bg-blue-100 border rounded border-blue-800 px-4 py-2 my-2">
                 Detected: nucleotide sequence(s).
             </div>
         </div>
@@ -250,11 +278,11 @@ class NucleotideNotification extends Component {
 class FastqNotification extends Component {
     render() {
         return (<div
-            className="notification row"
+            data-role="notification"
             id="fastq-sequence-notification"
             style={{ display: 'none' }}>
             <div
-                className="alert-info col-md-6 col-md-offset-3">
+                className="bg-blue-100 border rounded border-blue-800 px-4 py-2 my-2">
                 Detected FASTQ and automatically converted to FASTA.
             </div>
         </div>
@@ -266,7 +294,7 @@ class MixedNotification extends Component {
     render() {
         return (
             <div
-                className="notification row"
+                data-role="notification"
                 id="mixed-sequence-notification"
                 style={{ display: 'none' }}>
                 <div