sequenceserver 3.1.2 → 3.2.0

data/public/js/form.js

@@ -34,6 +34,8 @@ export class Form extends Component {
         this.handleAlgoChanged = this.handleAlgoChanged.bind(this);
         this.handleFormSubmission = this.handleFormSubmission.bind(this);
         this.formRef = createRef();
+        this.query = createRef();
+        this.button = createRef();
         this.setButtonState = this.setButtonState.bind(this);
     }
 
@@ -58,16 +60,26 @@ 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
              * (if any).
              */
             if (data['query']) {
-                this.refs.query.value(data['query']);
+                this.query.current.value(data['query']);
             }
 
+            // DB selection
+            setTimeout(() => {
+                this.preselectDatabases(this.state.preSelectedDbs);
+            }, 0);
+
             setTimeout(function () {
                 $('.jstree_div').click();
             }, 1000);
@@ -81,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() {
@@ -95,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.refs.button.state.methods[0]);
+        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
@@ -118,7 +155,7 @@ export class Form extends Component {
         var database_type = this.databaseType;
         var sequence_type = this.sequenceType;
 
-        if (this.refs.query.isEmpty()) {
+        if (this.query.current.isEmpty()) {
             return [];
         }
 
@@ -165,8 +202,8 @@ export class Form extends Component {
     }
 
     setButtonState() {
-        this.refs.button.setState({
-            hasQuery: !this.refs.query.isEmpty(),
+        this.button.current.setState({
+            hasQuery: !this.query.current.isEmpty(),
             hasDatabases: !!this.databaseType,
             methods: this.determineBlastMethods()
         });
@@ -205,22 +242,23 @@ export class Form extends Component {
                 <form id="blast" ref={this.formRef} onSubmit={this.handleFormSubmission}>
                     <input type="hidden" name="_csrf" value={document.querySelector('meta[name="_csrf"]').content} />
                     <div className="px-4">
-                        <SearchQueryWidget ref="query" onSequenceTypeChanged={this.handleSequenceTypeChanged} onSequenceChanged={this.handleSequenceChanged}/>
+                        <SearchQueryWidget ref={this.query} onSequenceTypeChanged={this.handleSequenceTypeChanged} onSequenceChanged={this.handleSequenceChanged}/>
 
                         {this.useTreeWidget() ?
-                            <DatabasesTree ref="databases"
+                            <DatabasesTree
                                 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}
+                            <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>
 
                     <div className="py-6"></div> {/* add a spacer so that the sticky action bar does not hide any contents */}
@@ -231,10 +269,10 @@ 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="button" onAlgoChanged={this.handleAlgoChanged} />
+                        <SearchButton ref={this.button} onAlgoChanged={this.handleAlgoChanged} />
                     </div>
 
                 </form>
@@ -305,4 +343,4 @@ class MixedNotification extends Component {
             </div>
         );
     }
-}
+}

data/public/js/grapher.js

@@ -1,131 +1,133 @@
 import _ from 'underscore';
-import React, { createRef } from 'react';
+import React, { createRef, useState, useEffect, useCallback } from 'react';
 
 import './svgExporter'; // create handlers for SVG and PNG download buttons
 import CollapsePreferences from './collapse_preferences';
-
-// Each instance of Grapher is added to this object once the component has been
-// mounted. This is so that grapher can be iterated over and redrawn on window
-// resize event.
-var Graphers = {};
+import useDetectPrint from "react-detect-print";
 
 // Grapher is a function that takes a Graph class and returns a React component.
 // This React component provides HTML boilerplate to add heading, to make the
 // graphs collapsible, to redraw graphs when window is resized, and SVG and PNG
 // export buttons and functionality.
 export default function Grapher(Graph) {
-    return class extends React.Component {
-        constructor(props) {
-            super(props);
-            this.name = Graph.name();
-            this.collapsePreferences = new CollapsePreferences(this);
-            let isCollapsed = this.collapsePreferences.preferenceStoredAsCollapsed();
-            this.state = { collapsed: Graph.canCollapse() && (this.props.collapsed || isCollapsed) };
-            this.svgContainerRef = createRef();
-        }
+    return function Component(props) {
+        const alwaysShowName = Graph.alwaysShowName === undefined ? false : Graph.alwaysShowName();
+        const printing = useDetectPrint();
+        const name = Graph.name(props);
+        const [width, setWidth] = useState(window.innerWidth);
+        const [collapsed, setCollapsed] = useState(false);
+        const svgContainerRef = createRef();
+        let graph = null;
 
-        graphId() {
-            return Graph.graphId(this.props);
-        }
+        const graphId = () => Graph.graphId(props)
 
-        render() {
-            // Do not render when Graph.name() is null
-            if (Graph.name() === null) {
-                return null;
-            } else {
-                var cssClasses = Graph.className() + ' grapher';
-                return (
-                    <div ref="grapher" className={cssClasses}>
-                        {this.header()}
-                        {this.svgContainerJSX()}
-                    </div>
-                );
-            }
+        const graphLinksJSX = () => {
+            return (
+                <div className="hit-links float-right text-right text-blue-300 h-4 print:hidden">
+                    <a href="#" className="btn-link text-sm text-seqblue hover:text-seqorange cursor-pointer export-to-svg">
+                        <i className="fa fa-download" /> SVG
+                    </a>
+                    <span className="line px-1">|</span>
+                    <a href="#" className="btn-link text-sm text-seqblue hover:text-seqorange cursor-pointer export-to-png">
+                        <i className="fa fa-download" /> PNG
+                    </a>
+                </div>
+            );
         }
 
-        header() {
+        const header = () => {
             if(Graph.canCollapse()) {
-                return <div className="grapher-header">
+                return <div className="grapher-header pr-px">
                     <h4
-                        className="caption"
-                        onClick={() => this.collapsePreferences.toggleCollapse()}
+                        className="inline-block pl-px m-0 caption cursor-pointer text-sm"
+                        onClick={() => collapsePreferences.toggleCollapse()}
                     >
-                        {this.collapsePreferences.renderCollapseIcon()}
-              &nbsp;{Graph.name()}
+                        {collapsePreferences.renderCollapseIcon()}
+                        <span className="print:hidden">&nbsp;</span>{Graph.name(props)}
                     </h4>
-                    {!this.state.collapsed && this.graphLinksJSX()}
+                    {!collapsed && graphLinksJSX()}
+                </div>;
+            } else if (alwaysShowName) {
+                return <div className="grapher-histogram-header" style={{ position: 'relative' }}>
+                    <h4 className="caption">&nbsp;{Graph.name(props)}</h4>
+                    <div className="pull-right" style={{ position: 'absolute', top: 0, right: 0 }}>
+                        {!collapsed && graphLinksJSX()}
+                    </div>
                 </div>;
             } else {
-                return <div className="grapher-header">
-                    {!this.state.collapsed && this.graphLinksJSX()}
+                return <div className="pr-px">
+                    {!collapsed && graphLinksJSX()}
                 </div>;
             }
         }
 
-        graphLinksJSX() {
-            return (
-                <div className="hit-links graph-links">
-                    <a href="#" className="btn-link export-to-svg">
-                        <i className="fa fa-download" /> SVG
-                    </a>
-                    <span className="line">|</span>
-                    <a href="#" className="btn-link export-to-png">
-                        <i className="fa fa-download" /> PNG
-                    </a>
-                </div>
-            );
-        }
-
-        svgContainerJSX() {
-            var cssClasses = Graph.className() + ' svg-container collapse';
-            if (!this.state.collapsed) cssClasses += ' in';
+        const svgContainerJSX = () => {
+            var cssClasses = Graph.className() + ' svg-container hidden';
+            if (!collapsed) cssClasses += ' !block';
             return (
                 <div
-                    ref={this.svgContainerRef}
-                    id={this.graphId()}
+                    ref={svgContainerRef}
+                    id={graphId()}
                     className={cssClasses}
                 ></div>
             );
         }
 
-        componentDidMount() {
-            Graphers[this.graphId()] = this;
-
-            // Draw visualisation for the first time. Visualisations are
-            // redrawn when browser window is resized.
-            this.draw();
+        const svgContainer = () => {
+            return $(svgContainerRef.current);
         }
 
-        componentDidUpdate() {
-            // Re-draw visualisation when the component change state.
-            this.draw();
-        }
-        svgContainer() {
-            return $(this.svgContainerRef.current);
-        }
-
-        draw() {
+        const draw = (printing = false) => {
+            let graphWidth = 'auto';
+            if (printing) graphWidth = '900';
             // Clean slate.
-            this.svgContainer().empty();
-            this.graph = null;
+            svgContainer().empty();
+            graph = null;
 
             // Draw if uncollapsed.
-            if (this.state.collapsed) {
-                return;
-            }
-            this.graph = new Graph(this.svgContainer(), this.props);
-            this.svgContainer()
+            if (collapsed) return;
+
+            svgContainer().width(graphWidth);
+            graph = new Graph(svgContainer(), props);
+            svgContainer()
                 .find('svg')
-                .attr('data-name', Graph.dataName(this.props));
+                .attr('data-name', Graph.dataName(props));
         }
-    };
-}
 
-// Redraw if window resized.
-$(window).resize(
-    _.debounce(function () {
-        _.each(Graphers, (grapher) => {
-            grapher.draw();
-        });
-    }, 125)
-);
+        useEffect(() => {
+            // Attach a debounced listener to handle window resize events 
+            // Updates the width state with the current window width, throttled to run at most once every 125ms
+            const handleResize = _.debounce(() => setWidth(window.innerWidth), 125);
+            window.addEventListener("resize", handleResize);
+
+            const isCollapsed = collapsePreferences.preferenceStoredAsCollapsed();
+            setCollapsed(Graph.canCollapse() && (props.collapsed || isCollapsed))
+            draw();
+
+            return () => window.removeEventListener("resize", handleResize)
+        }, [])
+
+        useEffect(() => {
+            draw(printing);
+        }, [printing, width])
+
+        const setState = (state) => {
+            setCollapsed(state.collapsed)
+        }
+
+        const collapsePreferences = new CollapsePreferences({name: name, state: { collapsed: collapsed }, setState: setState});
+
+        if (Graph.name(props) === null) {
+            return(null);
+        } else {
+            const printCss = collapsed ? 'print:hidden' : '';
+            const cssClasses = Graph.className() + ' grapher' + printCss;
+            return (
+                <div className={cssClasses}>
+                    {header()}
+                    {svgContainerJSX()}
+                </div>
+            )
+        }
+    }
+}

data/public/js/hit.js

@@ -80,14 +80,14 @@ export default class extends Component {
         return `get_sequence/?sequence_ids=${sequenceIDs}&database_ids=${databaseIDs}`;
     }
 
-    downloadFASTA(event) {
+    downloadFASTA(_event) {
         var sequenceIDs = [this.sequenceID()];
         downloadFASTA(sequenceIDs, this.databaseIDs());
     }
 
     // Event-handler for exporting alignments.
     // Calls relevant method on AlignmentExporter defined in alignment_exporter.js.
-    downloadAlignment(event) {
+    downloadAlignment(_event) {
         var hsps = _.map(this.props.hit.hsps, _.bind(function (hsp) {
             hsp.query_id = this.props.query.id;
             hsp.hit_id = this.props.hit.id;
@@ -99,33 +99,35 @@ export default class extends Component {
     }
 
     headerJSX() {
-        var meta = `length: ${this.hitLength().toLocaleString()}`;
+        var meta = `Length: ${this.hitLength().toLocaleString()}`;
 
         if (this.props.showQueryCrumbs && this.props.showHitCrumbs) {
             // Multiper queries, multiple hits
-            meta = `hit ${this.props.hit.number} of query ${this.props.query.number}, ` + meta;
+            meta = `hit ${this.props.hit.number} of query ${this.props.query.number}. ${meta}`;
         }
         else if (this.props.showQueryCrumbs && !this.props.showHitCrumbs) {
             // Multiple queries, single hit
-            meta = `the only hit of query ${this.props.query.number}, ` + meta;
+            meta = `the only hit of query ${this.props.query.number}. ${meta}`;
         }
         else if (!this.props.showQueryCrumbs && this.props.showHitCrumbs) {
             // Single query, multiple hits
-            meta = `hit ${this.props.hit.number}, ` + meta;
+            meta = `hit ${this.props.hit.number}. ${meta}`;
         }
 
-        return <div className="section-header">
-            <h4>
-                <i className="fa fa-minus-square-o"></i>&nbsp;
-                <strong>{this.props.hit.id}</strong>&nbsp;
-                {this.props.hit.title}
+        return <div className="section-header border-b border-seqorange flex flex-col sm:flex-row sm:justify-between w-full">
+            <h4 className="text-sm cursor-pointer flex flex-col sm:flex-row items-start sm:items-start" data-parent-id={`#${this.domID()}`}>
+                <div className="flex items-start">
+                    <i className="fa-regular fa-square-minus print:!hidden"></i>
+                    <strong className="cursor-text ml-1 print:ml-0"> {this.props.hit.id}</strong>
+                </div>
+                <span className="ml-1">{this.props.hit.title}</span>
             </h4>
-            <span className="label label-reset pos-label">{meta}</span>
+            <span className="label first-letter:capitalize text-sm font-normal text-inherit cursor-text">{meta}</span>
         </div>;
     }
 
     contentJSX() {
-        return <div className="section-content" data-parent-hit={this.domID()}>
+        return <div className="pt-0 px-0 pb-px" data-parent-hit={this.domID()}>
             {this.hitLinks()}
             <HSPOverview key={'kablammo' + this.props.query.id} query={this.props.query}
                 hit={this.props.hit} algorithm={this.props.algorithm}
@@ -149,8 +151,8 @@ export default class extends Component {
         });
 
         return (
-            <div className="hit-links">
-                <label>
+            <div className="hit-links h-4 print:hidden">
+                <label className="text-sm text-seqblue hover:seqorange cursor-pointer mb-0">
                     <input type="checkbox" id={this.domID() + '_checkbox'}
                         value={this.sequenceID()} onChange={function () {
                             this.props.selectHit(this.domID() + '_checkbox');
@@ -160,12 +162,12 @@ export default class extends Component {
                 </label>
                 {
                     btns.map((btn, index) => {
-                        return [<span className="line" key={`btn-${index}`}>|</span>, this.button(Object.assign(btn, { key: index }))];
+                        return [<span className="text-seqorange mt-0 mr-1 ml-0 mb-1 px-1" key={`btn-${index}`}>|</span>, this.button(Object.assign(btn, { key: index }))];
                     })
                 }
                 {
                     this.props.hit.links.map((link, index) => {
-                        return [<span className="line" key={`link-${index}`}>|</span>, this.a(link, index)];
+                        return [<span className="text-seqorange mt-0 mr-1 ml-0 mb-1 px-1" key={`link-${index}`}>|</span>, this.a(link, index)];
                     })
                 }
             </div>
@@ -213,12 +215,12 @@ export default class extends Component {
 
     button({ text, icon, title, className, onClick, key }) {
         if (onClick) {
-            return <button key={key} className={`btn-link ${className}`}
+            return <button key={key} className={`btn-link text-sm text-seqblue hover:text-seqorange cursor-pointer ${className}`}
                 title={title} onClick={onClick}><i className={`fa ${icon}`}></i> {text}
             </button>;
         }
         else {
-            return <button key={key} className="btn-link view-sequence disabled"
+            return <button key={key} className="text-sm view-sequence disabled"
                 title={title} disabled={true}>
                 <i className={`fa ${icon}`}></i> {text}
             </button>;
@@ -231,7 +233,7 @@ export default class extends Component {
     a(link, key) {
         if (!link.title || !link.url) return;
 
-        let className = 'btn btn-link';
+        let className = 'btn-link text-sm text-seqblue hover:text-seqorange cursor-pointer';
         if (link.class) className = `${className} ${link.class}`;
         return <a href={link.url} key={`${link.url}-${key}`} className={className} target='_blank'>
             {link.icon && <i className={'fa ' + link.icon}></i>}
@@ -240,10 +242,10 @@ export default class extends Component {
     }
     render() {
         return (
-            <div className="hit" id={this.domID()} data-hit-def={this.props.hit.id}
+            <div className="hit mt-1 border-l-2 border-transparent pl-1 -ml-1" id={this.domID()} data-hit-def={this.props.hit.id}
                 data-hit-len={this.props.hit.length} data-hit-evalue={this.props.hit.evalue}>
                 {this.headerJSX()} {this.contentJSX()}
             </div>
         );
     }
-}
+}