sequenceserver 2.0.0.rc8 → 2.1.0

data/public/js/cloud_share_modal.js

@@ -0,0 +1,216 @@
+import React, { createRef } from "react";
+import ShareURLComponent from "./share_url";
+import _ from "underscore";
+
+/**
+ * Takes sequence accession as props, fetches the sequence from the server, and
+ * displays it in a modal.
+ */
+export default class CloudShareModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      formState: 'input', // Possible values: 'input', 'loading', 'results', 'error'
+      errorMessages: [],
+      email: '',
+      agreeToTos: false,
+      shareableurl: '',
+    };
+    this.modalRef = createRef();
+  }
+
+  // Lifecycle methods. //
+
+  handleChange = (e) => {
+    const { name, value, type, checked } = e.target;
+    const inputValue = type === 'checkbox' ? checked : value;
+
+    this.setState({ [name]: inputValue });
+  }
+
+  handleSubmit = (e) => {
+    e.preventDefault();
+
+    const { email } = this.state;
+    const regex = /\/([^/]+)(?:\/|#|\?|$)/;
+    const match = window.location.pathname.match(regex);
+    const jobId = match[1];
+
+    this.setState({ formState: 'loading' });
+
+    const requestData = {
+      job_id: jobId,
+      sender_email: email
+    };
+
+    fetch('/cloud_share', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(requestData)
+    })
+      .then(response => response.json())
+      .then(data => {
+        if (data.shareable_url) {
+          // Successful response
+          this.setState({ formState: 'results', shareableurl: data.shareable_url });
+        } else if (data.errors) {
+          // Error response with specific error messages
+          const errorMessages = data.errors;
+          this.setState({ formState: 'error', errorMessages });
+        } else {
+          // Generic error message
+          throw new Error('Unknown error submitting form');
+        }
+      })
+      .catch(error => {
+        this.setState({
+          formState: 'error',
+          errorMessages: [error.message]
+        });
+      });
+  }
+
+  renderLoading() {
+    return (
+      <div className="text-center">
+        <i className="fa fa-spinner fa-3x fa-spin"></i>
+        <p>Uploading the job to SequenceServer Cloud, please wait...</p>
+      </div>
+    );
+  }
+
+  renderResults() {
+    const { shareableurl } = this.state;
+
+    return <ShareURLComponent url={shareableurl} querydb={this.props.querydb} program={this.props.program} queryLength={this.props.queryLength} />;
+  }
+
+  renderError() {
+    const { errorMessages } = this.state;
+
+    return (
+      <>
+        {
+          _.map(
+            errorMessages,
+            _.bind(function (errorMessage) {
+              return (
+                <div className="fastan">
+                  <div className="section-content">
+                    <div className="modal-error">{errorMessage}</div>
+                  </div>
+                </div>
+              );
+            }, this)
+          )
+        }
+        {this.renderForm()}
+      </>
+    );
+  }
+
+  renderForm() {
+    const { email, agreeToTos } = this.state;
+    const isSubmitDisabled = !agreeToTos;
+
+    return(
+      <form onSubmit={this.handleSubmit}>
+        <div className="form-group">
+          <label htmlFor="emailInput">Your Email Address</label>
+          <input
+            type="email"
+            id="emailInput"
+            className="form-control"
+            placeholder="person@example.com"
+            name="email"
+            value={email}
+            required="required"
+            onChange={this.handleChange}
+          />
+        </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>
+        <button type="submit" className="btn btn-primary" disabled={isSubmitDisabled}>
+          Submit
+        </button>
+      </form>
+    )
+  }
+
+  render() {
+    const { formState } = this.state;
+
+    let content;
+    switch (formState) {
+      case 'loading':
+        content = this.renderLoading();
+        break;
+      case 'results':
+        content = this.renderResults();
+        break;
+      case 'error':
+        content = this.renderError();
+        break;
+      case 'input':
+      default:
+        content = this.renderForm();
+        break;
+    }
+
+    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>
+            <div className="modal-body">
+              {content}
+            </div>
+          </div>
+        </div>
+      </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/databases.js

@@ -0,0 +1,144 @@
+import React, { Component } from 'react';
+import _ from 'underscore';
+
+export class Databases extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { type: '' };
+        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]);
+        }
+
+        if (this.preSelectedDbs) {
+            var selectors = this.preSelectedDbs.map((db) => `input[value=${db.id}]`);
+            $(selectors.join(',')).prop('checked', true);
+            this.handleClick(this.preSelectedDbs[0]);
+            this.preSelectedDbs = null;
+        }
+        this.props.onDatabaseTypeChanged(this.state.type);
+    }
+    databases(category) {
+        var databases = this.props.databases;
+        if (category) {
+            databases = _.select(databases, (database) => database.type === category);
+        }
+
+        return _.sortBy(databases, 'title');
+    }
+
+    nselected() {
+        return $('input[name="databases[]"]:checked').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();
+            break;
+        case '[Deselect all]':
+            $(`.${type} .database input:checked`).click();
+            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';
+
+        // Toggle button.
+        var toggleState = '[Select all]';
+        var toggleClass = 'btn-link';
+        var toggleShown = this.databases(category).length > 1;
+        var toggleDisabled = this.state.type && this.state.type !== category;
+        if (toggleShown && toggleDisabled) toggleClass += ' disabled';
+        if (!toggleShown) toggleClass += ' hidden';
+        if (this.nselected() === this.databases(category).length) {
+            toggleState = '[Deselect all]';
+        }
+
+        // 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;
+                        <button
+                            type="button"
+                            className={toggleClass}
+                            disabled={toggleDisabled}
+                            onClick={function () {
+                                this.handleToggle(toggleState, category);
+                            }.bind(this)}
+                        >
+                            {toggleState}
+                        </button>
+                    </div>
+                    <ul className={'list-group databases ' + category}>
+                        {_.map(
+                            this.databases(category),
+                            _.bind(function (database, index) {
+                                return (
+                                    <li
+                                        className="list-group-item"
+                                        key={'DB_' + category + index}
+                                    >
+                                        {this.renderDatabase(database)}
+                                    </li>
+                                );
+                            }, this)
+                        )}
+                    </ul>
+                </div>
+            </div>
+        );
+    }
+
+    renderDatabase(database) {
+        var disabled = this.state.type && this.state.type !== database.type;
+
+        return (
+            <label className={(disabled && 'disabled database') || 'database'}>
+                <input
+                    type="checkbox"
+                    name="databases[]"
+                    value={database.id}
+                    data-type={database.type}
+                    disabled={disabled}
+                    onChange={_.bind(function () {
+                        this.handleClick(database);
+                    }, this)}
+                />
+                {' ' + (database.title || database.name)}
+            </label>
+        );
+    }
+
+    render() {
+        return (
+            <div className="form-group databases-container">
+                {_.map(this.categories(), this.renderDatabases)}
+            </div>
+        );
+    }
+}

data/public/js/databases_tree.js

@@ -0,0 +1,144 @@
+import React from 'react';
+import _ from 'underscore';
+import Jstree from 'jstree';
+import { Databases } from './databases';
+
+export default class extends Databases {
+    constructor(props) {
+        super(props);
+        this.handleLoadTree = this.handleLoadTree.bind(this);
+        this.renderDatabases = this.renderDatabases.bind(this);
+        this.renderDatabaseSearch = this.renderDatabaseSearch.bind(this);
+        this.renderDatabaseTree = this.renderDatabaseTree.bind(this);
+    }
+
+    handleLoadTree(category) {
+        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;
+
+        // 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;
+            }
+
+            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);
+        });
+
+        $(tree_id).jstree({
+            'core': {
+                'data': this.props.tree[category]
+            },
+            'plugins': ['checkbox', 'search', 'sort'],
+            'checkbox': {
+                'keep_selected_style': false
+            }
+        });
+    }
+
+    handleTreeSearch(category, tree_id, search_id) {
+        var search_for = $('#' + search_id).val();
+        $('#' + tree_id).jstree(true).search(search_for);
+    }
+
+    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';
+
+        // Toggle button.
+        var toggleState = '[Select all]';
+        var toggleClass = 'btn-link';
+        var toggleShown = this.databases(category).length > 1;
+        var toggleDisabled = this.state.type && this.state.type !== category;
+        if (toggleShown && toggleDisabled) toggleClass += ' disabled';
+        if (!toggleShown) toggleClass += ' hidden';
+        if (this.nselected() === this.databases(category).length) {
+            toggleState = '[Deselect all]';
+        }
+
+        // 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;
+                        {
+                            this.renderDatabaseSearch(category)
+                        }
+                        <button type='button' className={toggleClass} disabled={toggleDisabled} style={{ display: 'none' }}
+                            onClick={function () { this.handleToggle(toggleState, category); }.bind(this)}>
+                            {toggleState}
+                        </button>
+                    </div>
+                    <ul className={'list-group databases ' + category} style={{ display: 'none' }}>
+                        {
+                            _.map(this.databases(category), _.bind(function (database, index) {
+                                return (
+                                    <li className='list-group-item' key={'DB_' + category + index}>
+                                        {this.renderDatabase(database)}
+                                    </li>
+                                );
+                            }, this))
+                        }
+                    </ul>
+                </div>
+                {
+                    this.renderDatabaseTree(category)
+                }
+            </div>
+        );
+    }
+
+    renderDatabaseSearch(category) {
+        var tree_id = category + '_database_tree';
+        var search_id = tree_id + '_search';
+
+        return (
+            <input type='text' id={search_id} class='input'
+                onKeyUp=
+                    {
+                        _.bind(function () {
+                            this.handleTreeSearch(category, tree_id, search_id);
+                        }, this)
+                    }
+            ></input>
+        );
+    }
+
+    renderDatabaseTree(category) {
+        const tree_id = category + '_database_tree';
+        const data = this.props.tree[category];
+
+        return (
+            <div
+                id={tree_id}
+                className={'jstree_div'}
+                onClick=
+                    {
+                        _.bind(function () {
+                            this.handleLoadTree(category);
+                        }, this)
+                    }
+            >
+            </div>
+        );
+    }
+
+}

data/public/js/dnd.js

@@ -0,0 +1,164 @@
+import React, { Component } from 'react';
+
+/** 
+ * Drag n drop widget.
+ */
+export class DnD extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = { query: null };
+    }
+    componentDidMount() {
+        var self = this;
+        var FASTA_FORMAT = /^>/;
+
+        $(document).ready(function () {
+            var tgtMarker = $('.dnd-overlay');
+
+            var dndError = function (id) {
+                $('.dnd-error').hide();
+                $('#' + id + '-notification').show();
+                tgtMarker.effect('fade', 2500);
+            };
+
+            $(document)
+                .on('dragenter', function (evt) {
+                    // Do not activate DnD if a modal is active.
+                    if ($.modalActive()) return;
+
+                    // Based on http://stackoverflow.com/a/8494918/1205465.
+                    // Contrary to what the above link says, the snippet below can't
+                    // distinguish directories from files. We handle that on drop.
+                    var dt = evt.originalEvent.dataTransfer;
+                    var isFile = dt.types && ((dt.types.indexOf &&  // Chrome and Safari
+                        dt.types.indexOf('Files') != -1) ||
+                        (dt.types.contains && // Firefox
+                            dt.types.contains('application/x-moz-file')));
+
+                    if (!isFile) { return; }
+
+                    $('.dnd-error').hide();
+                    tgtMarker.stop(true, true);
+                    tgtMarker.show();
+                    dt.effectAllowed = 'copy';
+                    if (self.state.query.isEmpty()) {
+                        $('.dnd-overlay-overwrite').hide();
+                        $('.dnd-overlay-drop').show('drop', { direction: 'down' }, 'fast');
+                    }
+                    else {
+                        $('.dnd-overlay-drop').hide();
+                        $('.dnd-overlay-overwrite').show('drop', { direction: 'down' }, 'fast');
+                    }
+                })
+                .on('dragleave', '.dnd-overlay', function (evt) {
+                    tgtMarker.hide();
+                    $('.dnd-overlay-drop').hide();
+                    $('.dnd-overlay-overwrite').hide();
+                })
+                .on('dragover', '.dnd-overlay', function (evt) {
+                    evt.originalEvent.dataTransfer.dropEffect = 'copy';
+                    evt.preventDefault();
+                })
+                .on('drop', '.dnd-overlay', function (evt) {
+                    evt.preventDefault();
+                    evt.stopPropagation();
+
+                    var indicator = $('#sequence-file');
+                    self.state.query.focus();
+
+                    var files = evt.originalEvent.dataTransfer.files;
+                    if (files.length > 1) {
+                        dndError('dnd-multi');
+                        return;
+                    }
+
+                    var file = files[0];
+                    if (file.size > 10 * 1048576) {
+                        dndError('dnd-large-file');
+                        return;
+                    }
+
+                    var reader = new FileReader();
+                    reader.onload = function (e) {
+                        var content = e.target.result;
+                        if (FASTA_FORMAT.test(content)) {
+                            indicator.text(file.name + ' ');
+                            self.state.query.value(content);
+                            tgtMarker.hide();
+                        } else {
+                            // apparently not FASTA
+                            dndError('dnd-format');
+                        }
+                    };
+                    reader.onerror = function (e) {
+                        // Couldn't read. Means dropped stuff wasn't FASTA file.
+                        dndError('dnd-format');
+                    };
+                    reader.readAsText(file);
+                });
+        });
+    }
+    render() {
+        return (
+            <div
+                className="dnd-overlay"
+                style={{ display: 'none' }}>
+                <div
+                    className="container dnd-overlay-container">
+                    <div
+                        className="row">
+                        <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 10 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>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}

data/public/js/download_fasta.js

@@ -14,4 +14,4 @@ export default function downloadFASTA(sequence_ids, database_ids) {
             $('<input>').attr('type', 'hidden').attr('name', name).val(val)
         );
     }
-};
+}