sequenceserver 2.0.0 → 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

@@ -1,36 +1,18 @@
 import React from 'react';
 import _ from 'underscore';
-import Jstree from 'vakata/jstree';
-
-export default React.createClass({
-    getInitialState: function () {
-        return { type: '' };
-    },
-
-    databases: function (category) {
-        var databases = this.props.databases;
-        if (category) {
-            databases = _.select(databases, database => database.type === category);
-        }
-
-        return _.sortBy(databases, 'title');
-    },
-
-    nselected: function () {
-        return $('input[name="databases[]"]:checked').length;
-    },
-
-    categories: function () {
-        return _.uniq(_.map(this.props.databases,
-            _.iteratee('type'))).sort();
-    },
-
-    handleClick: function (database) {
-        var type = this.nselected() ? database.type : '';
-        if (type != this.state.type) this.setState({type: type});
-    },
+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: function (category) {
+    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;
@@ -42,67 +24,48 @@ export default React.createClass({
                 window.jstree_node_change_timeout = null;
             }
 
-            window.jstree_node_change_timeout = setTimeout(function(){
+            window.jstree_node_change_timeout = setTimeout(function () {
                 // uncheck all input
                 $('div#database_list input[type="checkbox"]:checked').click();
-                setTimeout(function(){
+                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 ) {
+                    $.each(selected, function (index, value) {
                         // select hidden element to trigger original sequenceserver behavior, like blast algorithm, ...
-                        $('input[value="'+ value + '"]').click();
+                        $('input[value="' + value + '"]').click();
                     });
                 }, 100);
             }, 100);
         });
 
         $(tree_id).jstree({
-            'core' : {
+            'core': {
                 'data': this.props.tree[category]
             },
-            'plugins' : [ 'checkbox', 'search', 'sort' ],
-            'checkbox' : {
-                'keep_selected_style' : false
+            'plugins': ['checkbox', 'search', 'sort'],
+            'checkbox': {
+                'keep_selected_style': false
             }
         });
-    },
+    }
 
-    handleTreeSearch: function(category, tree_id, search_id) {
+    handleTreeSearch(category, tree_id, search_id) {
         var search_for = $('#' + search_id).val();
         $('#' + tree_id).jstree(true).search(search_for);
-    },
-
-    handleToggle: function (toggleState, type) {
-        switch (toggleState) {
-        case '[Select all]':
-            $(`.${type} .database input:not(:checked)`).click();
-            break;
-        case '[Deselect all]':
-            $(`.${type} .database input:checked`).click();
-            break;
-        }
-    },
-
-    render: function () {
-        return (
-            <div className='form-group databases-container'>
-                { _.map(this.categories(), this.renderDatabases) }
-            </div>
-        );
-    },
+    }
 
-    renderDatabases: function (category) {
+    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' :
+        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 toggleShown = this.databases(category).length > 1;
         var toggleDisabled = this.state.type && this.state.type !== category;
         if (toggleShown && toggleDisabled) toggleClass += ' disabled';
         if (!toggleShown) toggleClass += ' hidden';
@@ -112,24 +75,24 @@ export default React.createClass({
 
         // JSX.
         return (
-            <div className={columnClass} key={'DB_'+category}>
+            <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;
+                        <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) }>
+                        <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'}}>
+                    <ul className={'list-group databases ' + category} style={{ display: 'none' }}>
                         {
-                            _.map(this.databases(category), _.bind(function (database,index) {
+                            _.map(this.databases(category), _.bind(function (database, index) {
                                 return (
-                                    <li className='list-group-item' key={'DB_'+category+index}>
-                                        { this.renderDatabase(database) }
+                                    <li className='list-group-item' key={'DB_' + category + index}>
+                                        {this.renderDatabase(database)}
                                     </li>
                                 );
                             }, this))
@@ -141,9 +104,9 @@ export default React.createClass({
                 }
             </div>
         );
-    },
+    }
 
-    renderDatabaseSearch: function (category) {
+    renderDatabaseSearch(category) {
         var tree_id = category + '_database_tree';
         var search_id = tree_id + '_search';
 
@@ -157,11 +120,11 @@ export default React.createClass({
                     }
             ></input>
         );
-    },
+    }
 
-    renderDatabaseTree: function (category) {
-        var tree_id = category + '_database_tree';
-        var data = this.props.tree[category];
+    renderDatabaseTree(category) {
+        const tree_id = category + '_database_tree';
+        const data = this.props.tree[category];
 
         return (
             <div
@@ -176,40 +139,6 @@ export default React.createClass({
             >
             </div>
         );
-    },
-
-    renderDatabase: function (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>
-        );
-    },
-
-    componentDidUpdate: function () {
-        if (this.databases() && this.databases().length === 1) {
-            $('.databases').find('input').prop('checked',true);
-            this.handleClick(this.databases()[0]);
-        }
-
-        if (this.props.preSelectedDbs) {
-            var selectors = this.props.preSelectedDbs.map(db => `input[value=${db.id}]`);
-            $(...selectors).prop('checked',true);
-            this.handleClick(this.props.preSelectedDbs[0]);
-            this.props.preSelectedDbs = null;
-        }
-        this.props.onDatabaseTypeChanged(this.state.type);
     }
-});
+
+}