sequenceserver 2.0.0.rc8 → 2.0.0

data/public/js/alignment_exporter.js

@@ -7,28 +7,28 @@ export default class AlignmentExporter {
         var idx = 0;
         var wrapped = '';
         while(true) {
-          wrapped += str.substring(idx, idx + width);
-          idx += width;
-          if(idx < str.length) {
-            wrapped += '\n';
-          } else {
-            break;
-          }
+            wrapped += str.substring(idx, idx + width);
+            idx += width;
+            if(idx < str.length) {
+                wrapped += '\n';
+            } else {
+                break;
+            }
         }
         return wrapped;
     }
 
     generate_fasta(hsps) {
 
-        var fasta = "";
+        var fasta = '';
 
         _.each(hsps, _.bind(function (hsp) {
-            fasta += ">"+hsp.query_id+":"+hsp.qstart+"-"+hsp.qend+"\n";
-            fasta += hsp.qseq+"\n";
-            fasta += ">"+hsp.query_id+":"+hsp.qstart+"-"+hsp.qend+"_alignment_"+hsp.hit_id+":"+hsp.sstart+"-"+hsp.send+"\n";
-            fasta += hsp.midline+"\n";
-            fasta += ">"+hsp.hit_id+":"+hsp.sstart+"-"+hsp.send+"\n";
-            fasta += hsp.sseq+"\n";
+            fasta += '>'+hsp.query_id+':'+hsp.qstart+'-'+hsp.qend+'\n';
+            fasta += hsp.qseq+'\n';
+            fasta += '>'+hsp.query_id+':'+hsp.qstart+'-'+hsp.qend+'_alignment_'+hsp.hit_id+':'+hsp.sstart+'-'+hsp.send+'\n';
+            fasta += hsp.midline+'\n';
+            fasta += '>'+hsp.hit_id+':'+hsp.sstart+'-'+hsp.send+'\n';
+            fasta += hsp.sseq+'\n';
         }, this));
         return fasta;
     }

data/public/js/databases_tree.js

@@ -0,0 +1,215 @@
+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});
+    },
+
+    handleLoadTree: function (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: function(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) {
+        // 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: function (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: function (category) {
+        var tree_id = category + '_database_tree';
+        var data = this.props.tree[category];
+
+        return (
+            <div
+                id={tree_id}
+                className={'jstree_div'}
+                onClick=
+                    {
+                        _.bind(function () {
+                            this.handleLoadTree(category);
+                        }, this)
+                    }
+            >
+            </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);
+    }
+});

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)
         );
     }
-};
+}

data/public/js/hit.js

@@ -30,6 +30,10 @@ export default React.createClass({
         return this.props.hit.length;
     },
 
+    numHSPs: function () {
+        return this.props.hit.hsps.length;
+    },
+
     // Internal helpers. //
 
     /**
@@ -119,14 +123,14 @@ export default React.createClass({
             { this.hitLinks() }
             <HSPOverview key={'kablammo' + this.props.query.id} query={this.props.query}
                 hit={this.props.hit} algorithm={this.props.algorithm}
-                showHSPCrumbs={this.props.hit.hsps.length > 1}
+                showHSPCrumbs={this.numHSPs() > 1 && this.numHSPs() < 27}
                 collapsed={this.props.veryBig} />
         </div>;
     },
 
     hitLinks: function () {
         var btns = [];
-        if (!this.props.imported_xml) {
+        if (!(this.props.imported_xml || this.props.non_parse_seqids)) {
             btns = btns.concat([
                 this.viewSequenceButton(),
                 this.downloadFASTAButton()

data/public/js/hits_overview.js

@@ -49,7 +49,7 @@ class Graph {
             });
             _hsps.hitId = hit.id;
             _hsps.hitDef = 'Query_'+number+'_hit_'+hit.number;
-            _hsps.hitEvalue = hit.evalue;
+            _hsps.hitEvalue = hit.hsps[0].evalue;
             hits.push(_hsps);
         });
         return hits;

data/public/js/length_distribution.js

@@ -9,7 +9,7 @@ import * as Helpers from './visualisation_helpers';
 
 class Graph {
     static name() {
-        return 'Length distribution of hits';
+        return 'Length distribution of matching sequences';
     }
 
     static className() {
@@ -69,8 +69,7 @@ class Graph {
             .range([0, this._width]);
         this._bins = d3.layout.histogram()
             .range(this._scale_x.domain())
-            .bins(this._scale_x.ticks(50))
-            (this._data);
+            .bins(this._scale_x.ticks(50))(this._data);
         this._scale_y = d3.scale.linear()
             .domain([0, d3.max(this._bins, function(d) { return d.length; })])
             .range([this._height, 0]).nice();
@@ -129,14 +128,15 @@ class Graph {
             bin.map(function (d,i) {
                 var y1 = bin.length - (i+1);
                 var len_index = _.findIndex(self.query.hits, {length: d});
+                var evalue = self.query.hits[len_index].hsps[0].evalue;
                 var item = {
                     value: d,
                     id: self.query.hits[len_index].id,
-                    evalue: self.query.hits[len_index].evalue,
+                    evalue: evalue,
                     url: '#Query_'+self.query.number+'_hit_'+self.query.hits[len_index].number,
                     y0: y0,
                     y1: y0 += (y1 - y0),
-                    color: Helpers.get_colors_for_evalue(self.query.hits[len_index].evalue,self.query.hits)
+                    color: Helpers.get_colors_for_evalue(evalue,self.query.hits)
                 };
                 inner_data.push(item);
             });

data/public/js/query.js

@@ -111,7 +111,7 @@ var HitsTable = React.createClass({
             <div className="table-hit-overview">
                 <h4 className="caption" data-toggle="collapse" data-target={'#Query_'+this.props.query.number+'HT_'+this.props.query.number}>
                     <i className="fa fa-minus-square-o"></i>&nbsp;
-                    <span>Summary table of hits</span>
+                    <span>Sequences producing significant alignments</span>
                 </h4>
                 <div className="collapsed in"id={'Query_'+ this.props.query.number + 'HT_'+ this.props.query.number}>
                     <table
@@ -123,10 +123,7 @@ var HitsTable = React.createClass({
                             {!this.props.imported_xml && <th width="15%" className="text-right">Query coverage (%)</th>}
                             <th width="10%" className="text-right">Total score</th>
                             <th width="10%" className="text-right">E value</th>
-                            <th width="10%" className="text-right" data-toggle="tooltip"
-                                data-placement="left" title="Total identity of all hsps / total length of all hsps">
-                        Identity (%)
-                            </th>
+                            <th width="10%" className="text-right">Identity (%)</th>
                         </thead>
                         <tbody>
                             {
@@ -147,9 +144,9 @@ var HitsTable = React.createClass({
                                                 </td>
                                             }
                                             {!this.props.imported_xml && <td className="text-right">{hit.qcovs}</td>}
-                                            <td className="text-right">{hit.score}</td>
+                                            <td className="text-right">{hit.total_score}</td>
                                             <td className="text-right">{this.inExponential(hit.hsps[0].evalue)}</td>
-                                            <td className="text-right">{hit.identity}</td>
+                                            <td className="text-right">{this.inPercentage(hit.hsps[0].identity, hit.hsps[0].length)}</td>
                                         </tr>
                                     );
                                 }, this))

data/public/js/report.js

@@ -203,6 +203,7 @@ var Report = React.createClass({
                 results.push(<Query key={'Query_'+query.number} query={query}
                     program={this.state.program} querydb={this.state.querydb}
                     showQueryCrumbs={this.state.queries.length > 1}
+                    non_parse_seqids={this.state.non_parse_seqids}
                     imported_xml={this.state.imported_xml}
                     veryBig={this.state.veryBig} />);
             }
@@ -216,6 +217,7 @@ var Report = React.createClass({
                     results.push(<Hit key={'Query_'+query.number+'_Hit_'+hit.number} query={query}
                         hit={hit} algorithm={this.state.program} querydb={this.state.querydb}
                         selectHit={this.selectHit} imported_xml={this.state.imported_xml}
+                        non_parse_seqids={this.state.non_parse_seqids}
                         showQueryCrumbs={this.state.queries.length > 1}
                         showHitCrumbs={query.hits.length > 1}
                         veryBig={this.state.veryBig}
@@ -301,14 +303,12 @@ var Report = React.createClass({
     resultsJSX: function () {
         return (
             <div className="row">
-                { this.shouldShowSidebar() &&
-                    (
-                        <div className="col-md-3 hidden-sm hidden-xs">
-                            <Sidebar data={this.state} shouldShowIndex={this.shouldShowIndex()}/>
-                        </div>
-                    )
-                }
-                <div className={this.shouldShowSidebar() ? 'col-md-9' : 'col-md-12'}>
+                <div className="col-md-3 hidden-sm hidden-xs">
+                    <Sidebar data={this.state}
+                        atLeastOneHit={this.atLeastOneHit()}
+                        shouldShowIndex={this.shouldShowIndex()} />
+                </div>
+                <div className="col-md-9">
                     { this.overviewJSX() }
                     { this.circosJSX() }
                     { this.state.results }
@@ -387,17 +387,6 @@ var Report = React.createClass({
         });
     },
 
-    /**
-     * Returns true if sidebar should be shown.
-     *
-     * Sidebar is not shown if there is only one query and there are no hits
-     * corresponding to the query.
-     */
-    shouldShowSidebar: function () {
-        return !(this.state.queries.length == 1 &&
-                 this.state.queries[0].hits.length == 0);
-    },
-
     /**
      * Returns true if index should be shown in the sidebar. Index is shown
      * only for 2 and 8 queries.
@@ -446,7 +435,7 @@ var Report = React.createClass({
      */
     affixSidebar: function () {
         var $sidebar = $('.sidebar');
-        var sidebarOffset = $sidebar.offset()
+        var sidebarOffset = $sidebar.offset();
         if (sidebarOffset) {
             $sidebar.affix({
                 offset: {
@@ -492,17 +481,16 @@ var Report = React.createClass({
             $hit.next('.hsp').removeClass('glow');
         }
 
+        var $a = $('.download-fasta-of-selected');
+        var $b = $('.download-alignment-of-selected');
+        
         if (num_checked >= 1)
         {
-            var $a = $('.download-fasta-of-selected');
-            var $b = $('.download-alignment-of-selected');
             $a.find('.text-bold').html(num_checked);
             $b.find('.text-bold').html(num_checked);
         }
 
         if (num_checked == 0) {
-            var $a = $('.download-fasta-of-selected');
-            var $b = $('.download-alignment-of-selected');
             $a.addClass('disabled').find('.text-bold').html('');
             $b.addClass('disabled').find('.text-bold').html('');
         }

data/public/js/search.js

@@ -1,10 +1,12 @@
 import './jquery_world';
 import React from 'react';
 import _ from 'underscore';
+import DatabasesTree from './databases_tree';
 
 /**
  * Load necessary polyfills.
  */
+$.webshims.setOptions('basePath', '/vendor/npm/webshim@1.15.8/js-webshim/minified/shims/');
 $.webshims.polyfill('forms');
 
 /**
@@ -206,7 +208,7 @@ var DnD = React.createClass({
 var Form = React.createClass({
 
     getInitialState: function () {
-        return { databases: {}, preDefinedOpts: {} };
+        return { databases: [], preDefinedOpts: {}, tree: {} };
     },
 
     componentDidMount: function () {
@@ -225,6 +227,7 @@ var Form = React.createClass({
              * advanced options.
              */
             this.setState({
+                tree: data['tree'],
                 databases: data['database'],
                 preSelectedDbs: data['preSelectedDbs'],
                 preDefinedOpts: data['options']
@@ -236,6 +239,10 @@ var Form = React.createClass({
             if (data['query']) {
                 this.refs.query.value(data['query']);
             }
+
+            setTimeout(function(){
+                $('.jstree_div').click();
+            }, 1000);
         }.bind(this));
 
         /* Enable submitting form on Cmd+Enter */
@@ -248,6 +255,10 @@ var Form = React.createClass({
         });
     },
 
+    useTreeWidget: function () {
+        return !_.isEmpty(this.state.tree);
+    },
+
     determineBlastMethod: function () {
         var database_type = this.databaseType;
         var sequence_type = this.sequenceType;
@@ -335,9 +346,16 @@ var Form = React.createClass({
                         <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">
@@ -687,6 +705,7 @@ var Databases = React.createClass({
             $(`.${type} .database input:checked`).click();
             break;
         }
+        this.forceUpdate();
     },
 
     render: function () {
@@ -770,7 +789,7 @@ var Databases = React.createClass({
 
         if (this.props.preSelectedDbs) {
             var selectors = this.props.preSelectedDbs.map(db => `input[value=${db.id}]`);
-            $(...selectors).prop('checked',true);
+            $(selectors.join(',')).prop('checked',true);
             this.handleClick(this.props.preSelectedDbs[0]);
             this.props.preSelectedDbs = null;
         }

data/public/js/sidebar.js

@@ -166,15 +166,15 @@ export default React.createClass({
                 </div>
                 <ul className="nav">
                     {
-                        !this.props.data.imported_xml && <li>
-                            <a href="#" className="btn-link download-fasta-of-all"
+                        !(this.props.data.imported_xml || this.props.data.non_parse_seqids) && <li>
+                            <a href="#" className={`btn-link download-fasta-of-all ${!this.props.atLeastOneHit && 'disabled'}`}
                                 onClick={this.downloadFastaOfAll}>
                                 FASTA of all hits
                             </a>
                         </li>
                     }
                     {
-                        !this.props.data.imported_xml && <li>
+                        !(this.props.data.imported_xml || this.props.data.non_parse_seqids) && <li>
                             <a href="#" className="btn-link download-fasta-of-selected disabled"
                                 onClick={this.downloadFastaOfSelected}>
                                 FASTA of <span className="text-bold"></span> selected hit(s)
@@ -182,7 +182,7 @@ export default React.createClass({
                         </li>
                     }
                     <li>
-                        <a href="#" className="btn-link download-alignment-of-all"
+                        <a href="#" className={`btn-link download-alignment-of-all ${!this.props.atLeastOneHit && 'disabled'}`}
                             onClick={this.downloadAlignmentOfAll}>
                             Alignment of all hits
                         </a>

data/public/js/svgExporter.js

@@ -16,7 +16,7 @@ var export_as_svg = function (svg, filename) {
     var blob = new Blob([serialize_svg(svg)], { type: 'text/xml' });
     filename = Exporter.sanitize_filename(filename) + '.svg';
     Exporter.download_blob(blob, filename);
-}
+};
 
 /**
  * Exports the given <svg> DOM node as a .png file.
@@ -45,19 +45,19 @@ var export_as_png = function (svg, filename) {
     };
 
     img.src = 'data:image/svg+xml;base64,' + window.btoa(serialize_svg(svg));
-}
+};
 
 var serialize_svg = function(svg) {
     // Clone svg first so that none of our changes to affect the actual SVG.
     svg = svg.cloneNode(true);
 
     d3.select(svg).attr('version', '1.1')
-    .insert('defs', ':first-child')
-    .append('style')
-    .attr('class', 'exported-css')
-    .attr('type', 'text/css')
-    .node()
-    .textContent = get_styles();
+        .insert('defs', ':first-child')
+        .append('style')
+        .attr('class', 'exported-css')
+        .attr('type', 'text/css')
+        .node()
+        .textContent = get_styles();
 
     svg.removeAttribute('xmlns');
     svg.removeAttribute('xlink');
@@ -67,8 +67,8 @@ var serialize_svg = function(svg) {
     var source = (new XMLSerializer()).serializeToString(svg);
     var doctype = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC ' +
         '"-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">';
-        return doctype + source;
-}
+    return doctype + source;
+};
 
 var get_styles = function () {
     var styles = '';
@@ -113,14 +113,14 @@ var get_styles = function () {
     }
 
     return styles;
-}
+};
 
 var handle_click = function (export_callback) {
     return function () {
         var $svg = $(this).parents('.grapher').find('svg');
         export_callback($svg[0], $svg.attr('data-name'));
         return false;
-    }
+    };
 };
 
 var $body = $('body');

data/public/js/visualisation_helpers.js

@@ -39,16 +39,15 @@ export function tick_formatter(scale, seq_type) {
     var digits = 0;
     var format;
     var _ticks;
-    while (true) {
+
+    do {
         format = d3.format('.' + digits + 'f');
         _ticks = scale.ticks().map(function (d) {
             return format(prefix.scale(d));
         });
-        if (_ticks.length === _.uniq(_ticks).length) {
-            break;
-        }
         digits++;
-    }
+
+    } while (_ticks.length !== _.uniq(_ticks).length);
 
     return function (d) {
         if (!prefix.symbol || d === scale.domain()[0]) {