sequenceserver 1.1.0.beta → 1.1.0.beta2

data/public/js/report.js

@@ -1,3 +1,4 @@
+import SequenceServer from './sequenceserver';
 import _ from 'underscore';
 import React from 'react';
 import d3 from 'd3';
@@ -771,23 +772,24 @@ var SideBar = React.createClass({
         aln_exporter.export_alignments(hsps_arr, "alignment-"+sequence_ids.length+"_hits");
     },
 
-    summary: function () {
-        var program = this.props.data.program;
-        var numqueries = this.props.data.queries.length;
-        var numquerydb = this.props.data.querydb.length;
 
+    // JSX //
+    render: function () {
         return (
-            program.toUpperCase() + ': ' +
-            numqueries + ' ' + (numqueries > 1 ? 'queries' : 'query') + ", " +
-            numquerydb + ' ' + (numquerydb > 1 ? 'databases' : 'database')
-        );
+            <div className="sidebar">
+                { this.showIndex() && this.index() }
+                { this.downloads() }
+            </div>
+        )
     },
 
-    // Life-cycle method. //
-    render: function () {
+    showIndex: function () {
+        return this.props.data.queries.length <= 8;
+    },
+
+    index: function () {
         return (
-            <div
-                className="sidebar">
+            <div className="index">
                 <div
                   className="section-header">
                   <h4>
@@ -795,7 +797,7 @@ var SideBar = React.createClass({
                   </h4>
                 </div>
                 <ul
-                    className="nav hover-reset active-bold index">
+                    className="nav hover-reset active-bold">
                     {
                         _.map(this.props.data.queries, _.bind(function (query) {
                             return (
@@ -811,80 +813,95 @@ var SideBar = React.createClass({
                         }, this))
                     }
                 </ul>
+            </div>
+        );
+    },
 
-                <br/>
-                <br/>
+    summary: function () {
+        var program = this.props.data.program;
+        var numqueries = this.props.data.queries.length;
+        var numquerydb = this.props.data.querydb.length;
+
+        return (
+            program.toUpperCase() + ': ' +
+            numqueries + ' ' + (numqueries > 1 ? 'queries' : 'query') + ", " +
+            numquerydb + ' ' + (numquerydb > 1 ? 'databases' : 'database')
+        );
+    },
 
+    downloads: function () {
+        return (
+            <div className="downloads">
                 <div
-                  className="section-header">
+                    className="section-header">
                     <h4>
                         Download FASTA, XML, TSV
                     </h4>
                 </div>
                 <ul
-                  className="downloads list-unstyled list-padded">
+                    className="nav">
                     <li>
                         <a
-                          className="download-fasta-of-all"
-                          onClick={this.downloadFastaOfAll}>
+                            className="download-fasta-of-all"
+                            onClick={this.downloadFastaOfAll}>
                             FASTA of all hits
                         </a>
                     </li>
                     <li>
                         <a
-                          className="download-fasta-of-selected disabled"
-                          onClick={this.downloadFastaOfSelected}>
+                            className="download-fasta-of-selected disabled"
+                            onClick={this.downloadFastaOfSelected}>
                             FASTA of <span className="text-bold"></span> selected hit(s)
                         </a>
                     </li>
                     <li>
                         <a
-                          className="download-alignment-of-all"
-                          onClick={this.downloadAlignmentOfAll}>
-                          Alignment of all hits
+                            className="download-alignment-of-all"
+                            onClick={this.downloadAlignmentOfAll}>
+                            Alignment of all hits
                         </a>
                     </li>
                     <li>
                         <a
-                          className="download-alignment-of-selected disabled"
-                          onClick={this.downloadAlignmentOfSelected}>
-                          Alignment of <span className="text-bold"></span> selected hit(s)
+                            className="download-alignment-of-selected disabled"
+                            onClick={this.downloadAlignmentOfSelected}>
+                            Alignment of <span className="text-bold"></span> selected hit(s)
                         </a>
                     </li>
                     <li>
                         <a
-                          className="download" data-toggle="tooltip"
-                          title="15 columns: query and subject ID; scientific
-                          name, alignment length, mismatches, gaps, identity,
-                          start and end coordinates, e value, bitscore, query
-                          coverage per subject and per HSP."
-                          href={"download/" + this.props.data.search_id + ".std_tsv"}>
+                            className="download" data-toggle="tooltip"
+                            title="15 columns: query and subject ID; scientific
+                            name, alignment length, mismatches, gaps, identity,
+                            start and end coordinates, e value, bitscore, query
+                            coverage per subject and per HSP."
+                            href={"download/" + this.props.data.search_id + ".std_tsv"}>
                             Standard tabular report
                         </a>
                     </li>
                     <li>
                         <a
-                          className="download" data-toggle="tooltip"
-                          title="44 columns: query and subject ID, GI,
-                          accessions, and length; alignment details;
-                          taxonomy details of subject sequence(s) and
-                          query coverage per subject and per HSP."
-                          href={"download/" + this.props.data.search_id + ".full_tsv"}>
+                            className="download" data-toggle="tooltip"
+                            title="44 columns: query and subject ID, GI,
+                            accessions, and length; alignment details;
+                            taxonomy details of subject sequence(s) and
+                            query coverage per subject and per HSP."
+                            href={"download/" + this.props.data.search_id + ".full_tsv"}>
                             Full tabular report
                         </a>
                     </li>
                     <li>
                         <a
-                          className="download" data-toggle="tooltip"
-                          title="Results in XML format."
-                          href={"download/" + this.props.data.search_id + ".xml"}>
+                            className="download" data-toggle="tooltip"
+                            title="Results in XML format."
+                            href={"download/" + this.props.data.search_id + ".xml"}>
                             Full XML report
                         </a>
                     </li>
                 </ul>
             </div>
-        )
-    }
+        );
+    },
 });
 
 /**
@@ -1211,4 +1228,4 @@ var Page = React.createClass({
     }
 });
 
-export {Page};
+React.render(<Page/>, document.getElementById('view'));

data/public/js/search.js

@@ -1,7 +1,7 @@
+import SequenceServer from './sequenceserver';
 import _ from 'underscore';
 import React from 'react';
 
-
 /**
  * Load necessary polyfills.
  */
@@ -509,21 +509,8 @@ var Databases = React.createClass({
                                         {
                                             _.map(this.databases(category), _.bind(function (database) {
                                                 return (
-                                                    <li
-                                                        className="list-group-item">
-                                                        <label
-                                                            className={(this.state.type && this.state.type !== database.type) && "disabled"}>
-                                                            <input
-                                                                type="checkbox" name="databases[]" value={database.id} data-type={database.type}
-                                                                disabled={this.state.type && this.state.type !== database.type}
-                                                                onChange=
-                                                                {
-                                                                    _.bind(function () {
-                                                                        this.handleClick(database)
-                                                                    }, this)
-                                                                }/>
-                                                            {" " + (database.title || database.name)}
-                                                        </label>
+                                                    <li className="list-group-item">
+                                                        { this.renderDatabase(database) }
                                                     </li>
                                                 );
                                             }, this))
@@ -538,6 +525,26 @@ var Databases = React.createClass({
         );
     },
 
+    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>
+        );
+    },
+
     shouldComponentUpdate: function (props, state) {
         return !(state.type && state.type === this.state.type);
     },
@@ -925,4 +932,4 @@ var Page = React.createClass({
     }
 });
 
-export {Page};
+React.render(<Page/>, document.getElementById('view'));

data/public/js/sequenceserver.js

@@ -1,18 +1,9 @@
 import 'jquery';
-import 'jquery-ui';
+import 'jquery-ui/ui/effect-drop';
+import 'jquery-ui/ui/effect-bounce';
 import 'bootstrap';
 import 'webshim';
 
-import React from 'react';
-import Router from 'react-router';
-
-import {Page as Search} from './search';
-import {Page as Report} from './report';
-
-var Route = Router.Route;
-var DefaultRoute = Router.DefaultRoute;
-var RouteHandler = Router.RouteHandler;
-
 /**
  * Simple, small jQuery extensions for convenience.
  */
@@ -101,59 +92,31 @@ var RouteHandler = Router.RouteHandler;
     };
 }(jQuery));
 
-SequenceServer = React.createClass({
-
-    // Class methods. //
+export default {
 
-    statics: {
-        FASTA_FORMAT: /^>/,
+    FASTA_FORMAT: /^>/,
 
-        setupTooltips: function () {
-            $('.pos-label').each(function () {
-                $(this).tooltip({
-                    placement: 'right'
-                });
+    setupTooltips: function () {
+        $('.pos-label').each(function () {
+            $(this).tooltip({
+                placement: 'right'
             });
+        });
 
-            $('.downloads a').each(function () {
-                $(this).tooltip();
-            });
-        },
-
-        showErrorModal: function (jqXHR, beforeShow) {
-            setTimeout(function () {
-                beforeShow();
-                if (jqXHR.responseText) {
-                    $("#error").html(jqXHR.responseText).modal();
-                }
-                else {
-                    $("#error-no-response").modal();
-                }
-            }, 500);
-        },
-
-        routes: function () {
-            return (
-                <Route handler={SequenceServer}>
-                    <Route path="/"     handler={Search}/>
-                    <Route path="/:jid" handler={Report}/>
-                </Route>
-            );
-        },
-
-        run: function () {
-            Router.run(this.routes(), Router.HistoryLocation, function (Root) {
-                React.render(<Root/>, document.getElementById("view"));
-            });
-        }
+        $('.downloads a').each(function () {
+            $(this).tooltip();
+        });
     },
 
-
-    // Lifecycle methods. //
-
-    render: function () {
-        return (<RouteHandler/>);
+    showErrorModal: function (jqXHR, beforeShow) {
+        setTimeout(function () {
+            beforeShow();
+            if (jqXHR.responseText) {
+                $("#error").html(jqXHR.responseText).modal();
+            }
+            else {
+                $("#error-no-response").modal();
+            }
+        }, 500);
     }
-});
-
-SequenceServer.run();
+};