sequenceserver 2.0.0.rc8 → 2.1.0

data/public/js/error_modal.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { createRef } from 'react';
 
 /**
  * Takes errorData object with title, message, and more_info keys as props. The
@@ -14,12 +14,13 @@ export default class ErrorModal extends React.Component {
     constructor(props) {
         super(props);
         this.state = { errorData: {} };
+        this.modal = createRef();
     }
 
     // HTML for Bootstrap modal.
     render() {
         return (
-            <div id="error" ref="modal" className="modal fade"
+            <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">
@@ -42,14 +43,6 @@ export default class ErrorModal extends React.Component {
             </div>
         );
     }
-
-    /*
-    * Returns jQuery reference to the main modal container.
-    */
-    modal () {
-        return $(React.findDOMNode(this.refs.modal));
-    }
-
     /**
      * Shows error viewer.
      */
@@ -59,7 +52,7 @@ export default class ErrorModal extends React.Component {
         // modal. This is helpful if the caller wants to finish some work
         // before showing error modal.
         setTimeout(() => {
-            this.modal().modal('show');
+            $(this.modal.current).modal('show');
         }, beforeShow || 0);
     }
 }

data/public/js/exporter.js

@@ -10,13 +10,17 @@ export function download_url(url, filename) {
     }, 100);
 }
 
+export function generate_blob_url(blob) {
+    const url = window.URL.createObjectURL(blob);
+    return url;
+}
+
 export function download_blob(blob, filename) {
     if (typeof window.navigator.msSaveOrOpenBlob !== 'undefined') {
         window.navigator.msSaveOrOpenBlob(blob, filename);
-        return;
+    }else{
+        download_url(generate_blob_url(blob), filename);
     }
-
-    download_url(window.URL.createObjectURL(blob), filename);
 }
 
 export function sanitize_filename(str) {

data/public/js/form.js

@@ -0,0 +1,260 @@
+import React, { Component, createRef } from 'react';
+import { SearchButton } from './search_button';
+import { SearchQueryWidget } from './query';
+import DatabasesTree from './databases_tree';
+import { Databases } from './databases';
+import _ from 'underscore';
+import { Options } from './options';
+
+/**
+ * Search form.
+ *
+ * Top level component that initialises and holds all other components, and
+ * facilitates communication between them.
+ */
+export class Form extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            databases: [], preDefinedOpts: {}, tree: {}
+        };
+        this.useTreeWidget = this.useTreeWidget.bind(this);
+        this.determineBlastMethod = this.determineBlastMethod.bind(this);
+        this.handleSequenceTypeChanged = this.handleSequenceTypeChanged.bind(this);
+        this.handleDatabaseTypeChanaged = this.handleDatabaseTypeChanaged.bind(this);
+        this.handleAlgoChanged = this.handleAlgoChanged.bind(this);
+        this.handleFormSubmission = this.handleFormSubmission.bind(this);
+        this.formRef = createRef();
+    }
+
+    componentDidMount() {
+        /** 
+        * Fetch data to initialise the search interface from the server. These
+        * include list of databases to search against, advanced options to
+        * apply when an algorithm is selected, and a query sequence that
+        * the user may want to search in the databases.
+        */
+        var search = location.search.split(/\?|&/).filter(Boolean);
+        var job_id = sessionStorage.getItem('job_id');
+        if (job_id) {
+            search.unshift(`job_id=${job_id}`);
+        }
+        $.getJSON(`searchdata.json?${search.join('&')}`, function (data) {
+            /* Update form state (i.e., list of databases and predefined
+             * advanced options.
+             */
+            this.setState({
+                tree: data['tree'],
+                databases: data['database'],
+                preSelectedDbs: data['preSelectedDbs'],
+                preDefinedOpts: data['options']
+            });
+
+            /* Pre-populate the form with server sent query sequences
+             * (if any).
+             */
+            if (data['query']) {
+                this.refs.query.value(data['query']);
+            }
+
+            setTimeout(function () {
+                $('.jstree_div').click();
+            }, 1000);
+        }.bind(this));
+
+        /* Enable submitting form on Cmd+Enter */
+        $(document).on('keydown', (e) => {
+            var $button = $('#method');
+            if (!$button.is(':disabled') &&
+                e.ctrlKey && e.key === 'Enter') {
+                $button.trigger('click');
+            }
+        });
+
+        // show overlay to create visual feedback on button click 
+        $('#method').on('click', () => {
+            $('#overlay').css('display', 'block');
+        });
+    }
+
+    useTreeWidget() {
+        return !_.isEmpty(this.state.tree);
+    }
+
+    handleFormSubmission(evt) {
+        evt.preventDefault();
+        const form = this.formRef.current;
+        const formData = new FormData(form);
+        formData.append('method', this.refs.button.state.methods[0]);
+        fetch(window.location.href, {
+            method: 'POST',
+            body: formData
+        }).then(res => {
+            //remove overlay when form is submitted
+            $('#overlay').css('display', 'none');
+            // redirect
+            if (res.redirected && res.url) {
+                // setTimeout is needed here as a workaround because safari doesnt allow async calling of window.open
+                // so setTimeout makes the method get called on the main thread.
+                setTimeout(() => {
+                    window.open(res.url, $('#toggleNewTab').is(':checked') ? '_blank' : '_self');
+                }, 0);
+            }
+        });
+    }
+    determineBlastMethod() {
+        var database_type = this.databaseType;
+        var sequence_type = this.sequenceType;
+
+        if (this.refs.query.isEmpty()) {
+            return [];
+        }
+
+        //database type is always known
+        switch (database_type) {
+        case 'protein':
+            switch (sequence_type) {
+            case undefined:
+                return ['blastp', 'blastx'];
+            case 'protein':
+                return ['blastp'];
+            case 'nucleotide':
+                return ['blastx'];
+            }
+            break;
+        case 'nucleotide':
+            switch (sequence_type) {
+            case undefined:
+                return ['tblastn', 'blastn', 'tblastx'];
+            case 'protein':
+                return ['tblastn'];
+            case 'nucleotide':
+                return ['blastn', 'tblastx'];
+            }
+            break;
+        }
+
+        return [];
+    }
+
+    handleSequenceTypeChanged(type) {
+        this.sequenceType = type;
+        this.refs.button.setState({
+            hasQuery: !this.refs.query.isEmpty(),
+            hasDatabases: !!this.databaseType,
+            methods: this.determineBlastMethod()
+        });
+    }
+
+    handleDatabaseTypeChanaged(type) {
+        this.databaseType = type;
+        this.refs.button.setState({
+            hasQuery: !this.refs.query.isEmpty(),
+            hasDatabases: !!this.databaseType,
+            methods: this.determineBlastMethod()
+        });
+    }
+
+    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(' ')
+            });
+        }
+        else {
+            this.refs.opts.setState({ preOpts: {}, value: '', method: '' });
+        }
+    }
+
+    render() {
+        return (
+            <div className="container">
+                <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 }} />
+                <form id="blast" ref={this.formRef} onSubmit={this.handleFormSubmission} className="form-horizontal">
+                    <div className="form-group query-container">
+                        <SearchQueryWidget ref="query" onSequenceTypeChanged={this.handleSequenceTypeChanged} />
+                    </div>
+                    <div className="notifications" id="notifications">
+                        <NucleotideNotification />
+                        <ProteinNotification />
+                        <MixedNotification />
+                    </div>
+                    {this.useTreeWidget() ?
+                        <DatabasesTree ref="databases"
+                            databases={this.state.databases} tree={this.state.tree}
+                            preSelectedDbs={this.state.preSelectedDbs}
+                            onDatabaseTypeChanged={this.handleDatabaseTypeChanaged} />
+                        :
+                        <Databases ref="databases" databases={this.state.databases}
+                            preSelectedDbs={this.state.preSelectedDbs}
+                            onDatabaseTypeChanged={this.handleDatabaseTypeChanaged} />
+                    }
+                    <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>
+                        <SearchButton ref="button" onAlgoChanged={this.handleAlgoChanged} />
+                    </div>
+                </form>
+            </div>
+        );
+    }
+
+}
+
+
+class ProteinNotification extends Component {
+    render() {
+        return (
+            <div
+                className="notification row"
+                id="protein-sequence-notification"
+                style={{ display: 'none' }}>
+                <div
+                    className="alert-info col-md-6 col-md-offset-3">
+                    Detected: amino-acid sequence(s).
+                </div>
+            </div>
+        );
+    }
+}
+
+class NucleotideNotification extends Component {
+    render() {
+        return (<div
+            className="notification row"
+            id="nucleotide-sequence-notification"
+            style={{ display: 'none' }}>
+            <div
+                className="alert-info col-md-6 col-md-offset-3">
+                Detected: nucleotide sequence(s).
+            </div>
+        </div>
+        );
+    }
+}
+
+class MixedNotification extends Component {
+    render() {
+        return (
+            <div
+                className="notification row"
+                id="mixed-sequence-notification"
+                style={{ display: 'none' }}>
+                <div
+                    className="alert-danger col-md-10 col-md-offset-1">
+                    Error: mixed nucleotide and amino-acid sequences detected.
+                </div>
+            </div>
+        );
+    }
+}

data/public/js/grapher.js

@@ -1,7 +1,7 @@
-import _ from 'underscore';
-import React from 'react';
+import _ from "underscore";
+import React, { createRef } from "react";
 
-import './svgExporter'; // create handlers for SVG and PNG download buttons
+import "./svgExporter"; // create handlers for SVG and PNG download buttons
 
 // 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
@@ -13,116 +13,123 @@ var Graphers = {};
 // 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.state = { collapsed: this.props.collapsed };
+      this.svgContainerRef = createRef();
+    }
+
+    collapseId() {
+      return Graph.collapseId(this.props);
+    }
+
+    render() {
+      var cssClasses = Graph.className() + " grapher";
+      return (
+        <div ref="grapher" className={cssClasses}>
+          <div className="grapher-header">
+            <h4
+              className="caption"
+              data-toggle="collapse"
+              data-target={"#" + this.collapseId()}
+            >
+              {this.state.collapsed ? this.plusIcon() : this.minusIcon()}
+              &nbsp;{Graph.name()}
+            </h4>
+            {!this.state.collapsed && this.graphLinksJSX()}
+          </div>
+          {this.svgContainerJSX()}
+        </div>
+      );
+    }
+
+    minusIcon() {
+      return <i className="fa fa-minus-square-o"></i>;
+    }
+
+    plusIcon() {
+      return <i className="fa fa-plus-square-o"></i>;
+    }
+
+    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>
+      );
+    }
 
-    return class extends React.Component {
-        constructor(props) {
-            super(props);
-            this.state = { collapsed: this.props.collapsed };
-        }
-
-        collapseId () {
-            return Graph.collapseId(this.props);
-        }
-
-        render () {
-            var cssClasses = Graph.className() + ' grapher';
-            return (
-                <div ref="grapher" className={cssClasses}>
-                    <div className="grapher-header">
-                        <h4 className="caption" data-toggle="collapse"
-                            data-target={'#'+this.collapseId()}>
-                            { this.state.collapsed ? this.plusIcon() : this.minusIcon() }
-                            &nbsp;{ Graph.name() }
-                        </h4>
-                        { !this.state.collapsed && this.graphLinksJSX() }
-                    </div>
-                    { this.svgContainerJSX() }
-                </div>
-            );
-        }
-
-        minusIcon () {
-            return (
-                <i className="fa fa-minus-square-o"></i>
-            );
-        }
-
-        plusIcon () {
-            return (
-                <i className="fa fa-plus-square-o"></i>
-            );
-        }
-
-        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';
-            return (
-                <div ref="svgContainer" id={this.collapseId()} className={cssClasses}>
-                </div>
-            );
-        }
-
-        componentDidMount () {
-            Graphers[this.collapseId()] = this;
-
-            // Draw visualisation for the first time. Visualisations are
-            // redrawn when browser window is resized.
-            this.draw();
-        }
-
-        componentDidUpdate () {
-            // Re-draw visualisation when the component change state.
-            this.draw();
-        }
-
-        svgContainer () {
-            return $(React.findDOMNode(this.refs.svgContainer));
-        }
-
-        draw () {
-            // Clean slate.
-            this.svgContainer().empty();
-            this.graph = null;
-
-            // Draw if uncollapsed.
-            if (this.state.collapsed) { return; }
-            this.graph = new Graph(this.svgContainer(), this.props);
-            this.svgContainer().find('svg').attr('data-name', Graph.dataName(this.props));
-        }
-    };
+    svgContainerJSX() {
+      var cssClasses = Graph.className() + " svg-container collapse";
+      if (!this.state.collapsed) cssClasses += " in";
+      return (
+        <div
+          ref={this.svgContainerRef}
+          id={this.collapseId()}
+          className={cssClasses}
+        ></div>
+      );
+    }
+
+    componentDidMount() {
+      Graphers[this.collapseId()] = this;
+
+      // Draw visualisation for the first time. Visualisations are
+      // redrawn when browser window is resized.
+      this.draw();
+    }
+
+    componentDidUpdate() {
+      // Re-draw visualisation when the component change state.
+      this.draw();
+    }
+    svgContainer() {
+      return $(this.svgContainerRef.current);
+    }
+
+    draw() {
+      // Clean slate.
+      this.svgContainer().empty();
+      this.graph = null;
+
+      // Draw if uncollapsed.
+      if (this.state.collapsed) {
+        return;
+      }
+      this.graph = new Graph(this.svgContainer(), this.props);
+      this.svgContainer()
+        .find("svg")
+        .attr("data-name", Graph.dataName(this.props));
+    }
+  };
 }
 
 // Redraw if window resized.
-$(window).resize(_.debounce(function () {
+$(window).resize(
+  _.debounce(function () {
     _.each(Graphers, (grapher) => {
-        grapher.draw();
+      grapher.draw();
     });
-}, 125));
+  }, 125)
+);
 
 // Swap-icon and toggle .graph-links on collapse.
-$('body').on('hidden.bs.collapse', '.collapse', function () {
-    var component = Graphers[$(this).attr('id')];
-    if (component) {
-        component.setState({ collapsed: true });
-    }
+$("body").on("hidden.bs.collapse", ".collapse", function () {
+  var component = Graphers[$(this).attr("id")];
+  if (component) {
+    component.setState({ collapsed: true });
+  }
 });
-$('body').on('shown.bs.collapse', '.collapse', function () {
-    var component = Graphers[$(this).attr('id')];
-    if (component) {
-        component.setState({ collapsed: false });
-    }
+$("body").on("shown.bs.collapse", ".collapse", function () {
+  var component = Graphers[$(this).attr("id")];
+  if (component) {
+    component.setState({ collapsed: false });
+  }
 });