sequenceserver 1.1.0.beta8 → 1.1.0.beta10

data/public/js/search.js

@@ -7,6 +7,23 @@ import React from 'react';
  */
 $.webshims.polyfill('forms');
 
+var Page = React.createClass({
+    render: function () {
+        return (
+            <div>
+                <DnD ref="dnd"/>
+                <Form ref="form"/>
+            </div>
+        );
+    },
+
+    componentDidMount: function () {
+        this.refs.dnd.setState({
+            query: this.refs.form.refs.query
+        })
+    }
+});
+
 /** Drag n drop widget.
  */
 var DnD = React.createClass({
@@ -171,6 +188,135 @@ var DnD = React.createClass({
     }
 });
 
+/**
+ * Search form.
+ *
+ * Top level component that initialises and holds all other components, and
+ * facilitates communication between them.
+ */
+var Form = React.createClass({
+
+    getInitialState: function () {
+        return {
+            databases: {},
+            preDefinedOpts: {
+                'blastn':  ['-task blastn', '-evalue 1e-5'],
+                'blastp':  ['-evalue 1e-5'],
+                'blastx':  ['-evalue 1e-5'],
+                'tblastx': ['-evalue 1e-5'],
+                'tblastn': ['-evalue 1e-5']
+            }
+        };
+    },
+
+    componentDidMount: function () {
+        $.getJSON("searchdata.json", _.bind(function(data) {
+            this.setState({
+                databases: data["database"], preDefinedOpts: $.extend({},
+                this.state.preDefinedOpts, data["options"])
+            });
+        }, this));
+
+       $(document).bind("keydown", _.bind(function (e) {
+           if (e.ctrlKey && e.keyCode === 13 &&
+               !$('#method').is(':disabled')) {
+               $(this.getDOMNode()).trigger('submit');
+           }
+       }, this));
+    },
+
+    determineBlastMethod: function () {
+        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: function (type) {
+        this.sequenceType = type;
+        this.refs.button.setState({
+            hasQuery: !this.refs.query.isEmpty(),
+            hasDatabases: !!this.databaseType,
+            methods: this.determineBlastMethod()
+        });
+    },
+
+    handleDatabaseTypeChanaged: function (type) {
+        this.databaseType = type;
+        this.refs.button.setState({
+            hasQuery: !this.refs.query.isEmpty(),
+            hasDatabases: !!this.databaseType,
+            methods: this.determineBlastMethod()
+        });
+    },
+
+    handleAlgoChanged: function (algo) {
+      if (this.state.preDefinedOpts.hasOwnProperty(algo)) {
+        this.refs.opts.setState({
+          preOpts: this.state.preDefinedOpts[algo].join(" ")
+        });
+      }
+      else {
+        this.refs.opts.setState({preOpts: ""});
+      }
+    },
+
+    render: function () {
+        return (
+            <div
+                className="container">
+                <form
+                    id="blast" method="post" className="form-horizontal">
+                    <div
+                        className="form-group query-container">
+                        <Query ref="query" onSequenceTypeChanged={this.handleSequenceTypeChanged}/>
+                    </div>
+                    <div
+                        className="notifications" id="notifications">
+                        <NucleotideNotification/>
+                        <ProteinNotification/>
+                        <MixedNotification/>
+                    </div>
+                    <Databases ref="databases" onDatabaseTypeChanged={this.handleDatabaseTypeChanaged} databases={this.state.databases}/>
+                    <div
+                        className="form-group">
+                        <Options ref="opts"/>
+                        <SearchButton ref="button" onAlgoChanged={this.handleAlgoChanged}/>
+                    </div>
+                </form>
+            </div>
+        );
+    }
+});
+
 /**
  * Query widget.
  */
@@ -487,42 +633,70 @@ var Databases = React.createClass({
     },
 
     handleClick: function (database) {
-        var type = this.nselected() ? database.type : ''
+        var type = this.nselected() ? database.type : '';
         this.setState({type: type});
     },
 
+    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(), _.bind(function (category) {
-                        return (
-                            <div
-                                className={this.categories().length === 1 ? 'col-md-12' : 'col-md-6'}>
-                                <div
-                                    className="panel panel-default">
-                                    <div
-                                        className="panel-heading">
-                                        <h4>{category[0].toUpperCase() + category.substring(1).toLowerCase() + " databases"}</h4>
-                                    </div>
-                                    <ul
-                                        className={"list-group databases " + category}>
-                                        {
-                                            _.map(this.databases(category), _.bind(function (database) {
-                                                return (
-                                                    <li className="list-group-item">
-                                                        { this.renderDatabase(database) }
-                                                    </li>
-                                                );
-                                            }, this))
-                                        }
-                                    </ul>
-                                </div>
-                            </div>
-                        )
-                    }, this))
-                }
+            <div className="form-group databases-container">
+                { _.map(this.categories(), this.renderDatabases) }
+            </div>
+        );
+    },
+
+    renderDatabases: function (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 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}>
+                <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) {
+                                return (
+                                    <li className="list-group-item">
+                                        { this.renderDatabase(database) }
+                                    </li>
+                                );
+                            }, this))
+                        }
+                    </ul>
+                </div>
             </div>
         );
     },
@@ -547,9 +721,9 @@ var Databases = React.createClass({
         );
     },
 
-    shouldComponentUpdate: function (props, state) {
-        return !(state.type && state.type === this.state.type);
-    },
+    //shouldComponentUpdate: function (props, state) {
+        //return !(state.type && state.type === this.state.type);
+    //},
 
     componentDidUpdate: function () {
         if (this.databases() && this.databases().length === 1) {
@@ -788,150 +962,4 @@ var SearchButton = React.createClass({
     }
 });
 
-/**
- * Search form.
- *
- * Top level component that initialises and holds all other components, and
- * facilitates communication between them.
- */
-var Form = React.createClass({
-
-    getInitialState: function () {
-        return {
-            databases: {},
-            preDefinedOpts: {
-                'blastn':  ['-task blastn', '-evalue 1e-5'],
-                'blastp':  ['-evalue 1e-5'],
-                'blastx':  ['-evalue 1e-5'],
-                'tblastx': ['-evalue 1e-5'],
-                'tblastn': ['-evalue 1e-5']
-            }
-        };
-    },
-
-    componentDidMount: function () {
-        $.getJSON("searchdata.json", _.bind(function(data) {
-            this.setState({
-                databases: data["database"], preDefinedOpts: $.extend({},
-                this.state.preDefinedOpts, data["options"])
-            });
-        }, this));
-
-       $(document).bind("keydown", _.bind(function (e) {
-           if (e.ctrlKey && e.keyCode === 13 &&
-               !$('#method').is(':disabled')) {
-               $(this.getDOMNode()).trigger('submit');
-           }
-       }, this));
-    },
-
-    determineBlastMethod: function () {
-        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: function (type) {
-        this.sequenceType = type;
-        this.refs.button.setState({
-            hasQuery: !this.refs.query.isEmpty(),
-            hasDatabases: !!this.databaseType,
-            methods: this.determineBlastMethod()
-        });
-    },
-
-    handleDatabaseTypeChanaged: function (type) {
-        this.databaseType = type;
-        this.refs.button.setState({
-            hasQuery: !this.refs.query.isEmpty(),
-            hasDatabases: !!this.databaseType,
-            methods: this.determineBlastMethod()
-        });
-    },
-
-    handleAlgoChanged: function (algo) {
-      if (this.state.preDefinedOpts.hasOwnProperty(algo)) {
-        this.refs.opts.setState({
-          preOpts: this.state.preDefinedOpts[algo].join(" ")
-        });
-      }
-      else {
-        this.refs.opts.setState({preOpts: ""});
-      }
-    },
-
-    render: function () {
-        return (
-            <div
-                className="container">
-                <form
-                    id="blast" method="post" className="form-horizontal">
-                    <div
-                        className="form-group query-container">
-                        <Query ref="query" onSequenceTypeChanged={this.handleSequenceTypeChanged}/>
-                    </div>
-                    <div
-                        className="notifications" id="notifications">
-                        <NucleotideNotification/>
-                        <ProteinNotification/>
-                        <MixedNotification/>
-                    </div>
-                    <Databases ref="databases" onDatabaseTypeChanged={this.handleDatabaseTypeChanaged} databases={this.state.databases}/>
-                    <div
-                        className="form-group">
-                        <Options ref="opts"/>
-                        <SearchButton ref="button" onAlgoChanged={this.handleAlgoChanged}/>
-                    </div>
-                </form>
-            </div>
-        );
-    }
-});
-
-var Page = React.createClass({
-    render: function () {
-        return (
-            <div>
-                <DnD ref="dnd"/>
-                <Form ref="form"/>
-            </div>
-        );
-    },
-
-    componentDidMount: function () {
-        this.refs.dnd.setState({
-            query: this.refs.form.refs.query
-        })
-    }
-});
-
 React.render(<Page/>, document.getElementById('view'));

data/public/js/utils.js

@@ -0,0 +1,77 @@
+import React from 'react';
+
+var Utils = {
+
+    /**
+     * Render URL for sequence-viewer.
+     */
+    a: function (link) {
+        if (link.title && link.url)
+        {
+            return (
+                <a href={link.url} className={link.class} target='_blank'>
+                    {link.icon && <i className={"fa " + link.icon}></i>}
+                    {" " + link.title + " "}
+                </a>
+            );
+        }
+    },
+
+
+    /***********************************
+     * Formatters for hits & hsp table *
+     ***********************************/
+
+    // Formats an array of two elements as "first (last)".
+    format_2_tuple: function (tuple) {
+        return (tuple[0] + " (" + tuple[tuple.length - 1] + ")");
+    },
+
+    /**
+     * Returns fraction as percentage
+     */
+    inPercentage: function (num , den) {
+        return `${(num * 100.0 / den).toFixed(2)}%`;
+    },
+
+    /**
+     * Returns fractional representation as String.
+     */
+    inFraction: function (num , den) {
+        return num + "/" + den;
+    },
+
+    /**
+     * Returns given Float as String formatted to two decimal places.
+     */
+    inTwoDecimal: function (num) {
+        return num.toFixed(2)
+    },
+
+    /**
+     * Returns zero if num is zero. Returns two decimal representation of num
+     * if num is between [1..10). Returns num in scientific notation otherwise.
+     */
+    inExponential: function (num) {
+        // Nothing to do if num is 0.
+        if (num === 0) {
+            return 0
+        }
+
+        // Round to two decimal places if in the rane [1..10).
+        if (num >= 1 && num < 10)
+        {
+            return this.inTwoDecimal(num)
+        }
+
+        // Return numbers in the range [0..1) and [10..Inf] in
+        // scientific format.
+        var exp = num.toExponential(2);
+        var parts = exp.split("e");
+        var base  = parts[0];
+        var power = parts[1];
+        return <span>{base} &times; 10<sup>{power}</sup></span>;
+    }
+};
+
+export default Utils;