sequenceserver 1.1.0.beta6 → 1.1.0.beta7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: da64719d5d51834a93bd4071cf01f7dd9f45dfce
-  data.tar.gz: 071fa0cfc1d276a53d613b43fab36e85180a3e8e
+  metadata.gz: 596bc25ee4cb80b8fad1de7a63b7677f291a0743
+  data.tar.gz: bb5bda8278682fb5a79526542023d3addfce8933
 SHA512:
-  metadata.gz: 6f5486cf92ad273fd348fcd3d2dbcf4656b6bccd70f4040e2013e787b4ee68cd9c2d0c26473eb21a4ba2c0eb0d240d6f2f955110cd3f1442ddb37df94a8f5fc9
-  data.tar.gz: bdaf284e009ee77987e2c89652fcdbe3501d783c5cdb0a568dac29535072dde48db28c716b6371ee6eb2dd31cdac364954033a58d886ce2b9eb9d30f941943cf
+  metadata.gz: e71d8f58e66599466f5149043f20e1ab5e1490857a557a71005889fdbd70ac46ac3649b18ff5b04037154f9b49ca98a3f37bbccfcef614786c3fc963222424b5
+  data.tar.gz: faaa045609c7009b1dae99175da8da6adbf8bb7a01439a2f2dbbd21d6a64f353ac76a5fe5c276051d96c7dbf9f9041c2ae2f90355ea002d1c37b112bfa8a772e

data/lib/sequenceserver/version.rb

@@ -1,4 +1,4 @@
 # Define version number.
 module SequenceServer
-  VERSION = '1.1.0.beta6'
+  VERSION = '1.1.0.beta7'
 end

data/public/js/circos.js

@@ -316,10 +316,10 @@ class Graph {
         .attr('transform','translate('+this.svgContainer.width() / 2+','+this.svgContainer.height()/2+')')
         .append('text')
         .attr('text-anchor','start')
-        .attr('dy','0.75em')
-        .attr('x', -50)
-        .attr('y', 2)
-        .text('Sorry no Circos generated')
+        .attr('dy','-0.25em')
+        .attr('x', -175)
+        .style("font-size", "14px")
+        .text('Circos looks great with less than 16 queries')
   }
 
   layoutReset() {

data/public/js/{alignmentsoverview.js → hits_overview.js}

@@ -388,5 +388,5 @@ class Graph {
   }
 }
 
-var AlignmentOverview = Grapher(Graph);
-export default AlignmentOverview;
+var HitsOverview = Grapher(Graph);
+export default HitsOverview;

data/public/js/kablammo.js

@@ -19,11 +19,11 @@ import * as Helpers from './visualisation_helpers';
 
 class Graph {
   static name() {
-    return 'query against hit';
+    return 'Matching region(s)';
   }
 
   static className() {
-    return 'kablammo collapse in';
+    return 'kablammo';
   }
 
   static collapseId(props) {

data/public/js/{lengthdistribution.js → length_distribution.js}

@@ -9,7 +9,7 @@ import * as Helpers from './visualisation_helpers';
 
 class Graph {
   static name() {
-    return 'Length Distribution';
+    return 'Length distribution of hits';
   }
 
   static className() {

data/public/js/report.js

@@ -1,18 +1,16 @@
-import SequenceServer from './sequenceserver';
-import showErrorModal from './errormodal';
-
-import _ from 'underscore';
+import './sequenceserver' // for custom $.tooltip function
 import React from 'react';
-import d3 from 'd3';
+import _ from 'underscore';
 
-import * as Helpers from './visualisation_helpers';
-import GraphicalOverview from './alignmentsoverview';
-//import Kablammo from './kablammo';
-import './sequence';
-import AlignmentExporter from './alignment_exporter';
-import LengthDistribution from './lengthdistribution';
 import Circos from './circos';
+import HitsOverview from './hits_overview';
+import LengthDistribution from './length_distribution'; // length distribution of hits
+import HSPOverview from './kablammo';
+import AlignmentExporter from './alignment_exporter'; // to download textual alignment
+import './sequence';
 
+import * as Helpers from './visualisation_helpers'; // for toLetters
+import showErrorModal from './error_modal';
 
 /**
  * Dynamically create form and submit.
@@ -514,9 +512,9 @@ var Hit = React.createClass({
                             }, this))
                         }
                     </div>
-                    {/*
-                    <Kablammo key={"Kablammo"+this.props.query.id} query={this.props.query} hit={this.props.hit} algorithm={this.props.algorithm}/>
-                    */}
+                    <HSPOverview key={"kablammo"+this.props.query.id}
+                        query={this.props.query} hit={this.props.hit}
+                        algorithm={this.props.algorithm}/>
                     <table
                       className="table hsps">
                         <tbody>
@@ -678,7 +676,7 @@ var Query = React.createClass({
                 {this.numhits() &&
                     (
                         <div className="section-content">
-                            <GraphicalOverview key={"GO_"+this.props.query.number} query={this.props.query} program={this.props.data.program} collapsed={this.props.data.veryBig}/>
+                            <HitsOverview key={"GO_"+this.props.query.number} query={this.props.query} program={this.props.data.program} collapsed={this.props.data.veryBig}/>
                             <LengthDistribution key={"LD_"+this.props.query.id} query={this.props.query} algorithm={this.props.data.program} collapsed="true"/>
                             <HitsTable key={"HT_"+this.props.query.number} query={this.props.query}/>
                             <div
@@ -921,65 +919,12 @@ var SideBar = React.createClass({
  */
 var Report = React.createClass({
 
-    // Kind of public API //
-
-    /**
-     * Event-handler when hit is selected
-     * Adds glow to hit component.
-     * Updates number of Fasta that can be downloaded
-     */
-    selectHit: function (id) {
-
-        var checkbox = $("#" + id);
-        var num_checked  = $('.hit-links :checkbox:checked').length;
-
-        if (!checkbox || !checkbox.val()) {
-            return;
-        }
-
-        var $hit = $(checkbox.data('target'));
-
-        // Highlight selected hit and sync checkboxes if sequence viewer is open.
-        if (checkbox.is(":checked")) {
-            $hit
-            .addClass('glow')
-            .find(":checkbox").not(checkbox).check();
-            var $a = $('.download-fasta-of-selected');
-            var $b = $('.download-alignment-of-selected');
-            $b.enable()
-            var $n = $a.find('span');
-            $a
-            .enable()
-        }
-
-        else {
-            $hit
-            .removeClass('glow')
-            .find(":checkbox").not(checkbox).uncheck();
-        }
-
-        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('');
-        }
-    },
-
-
-    // Internal helpers. //
-
-    // Life-cycle methods. //
+    // Model //
 
     getInitialState: function () {
+        this.fetchResults();
+        this.updateCycle = 0;
+
         return {
             search_id:       '',
             program:         '',
@@ -991,17 +936,77 @@ var Report = React.createClass({
         };
     },
 
-    render: function () {
-        return (this.isResultAvailable() ? this.resultsJSX() : this.loadingJSX());
+    /**
+     * Fetch results.
+     */
+    fetchResults: function () {
+        var intervals = [200, 400, 800, 1200, 2000, 3000, 5000];
+
+        (function poll (comp) {
+            $.getJSON(location.pathname + '.json')
+                .complete(function (jqXHR) {
+                    switch (jqXHR.status) {
+                        case 202:
+                            var interval;
+                            if (intervals.length === 1) {
+                                interval = intervals[0];
+                            }
+                            else {
+                                interval = intervals.shift;
+                            }
+                            setTimeout(poll, interval);
+                            break;
+                        case 200:
+                            comp.updateState(jqXHR.responseJSON);
+                            break;
+                        case 404:
+                        case 400:
+                        case 500:
+                            showErrorModal(jqXHR.responseJSON);
+                            break;
+                    }
+                });
+        }(this));
     },
 
     /**
-     * Returns true if results have been fetched.
-     *
-     * A holding message is shown till results are fetched.
+     * Incrementally update state so that the rendering process is
+     * not overwhelemed when there are too many queries.
      */
-    isResultAvailable: function () {
-        return this.state.queries.length >= 1;
+    updateState: function(responseJSON) {
+        var queries = responseJSON.queries;
+
+        // Render results for first 50 queries and set flag if total queries is
+        // more than 250.
+        var numHits = 0;
+        responseJSON.veryBig = queries.length > 250;
+        //responseJSON.veryBig = !_.every(queries, (query) => {
+            //numHits += query.hits.length;
+            //return (numHits <= 500);
+        //});
+        responseJSON.queries = queries.splice(0, 50);
+        this.setState(responseJSON);
+
+        // Render results for remaining queries.
+        var update = function () {
+            if (queries.length > 0) {
+                this.setState({
+                    queries: this.state.queries.concat(queries.splice(0, 50))
+                });
+                setTimeout(update.bind(this), 500);
+            }
+            else {
+                this.componentFinishedUpdating();
+            }
+        };
+        setTimeout(update.bind(this), 500);
+    },
+
+
+    // View //
+    render: function () {
+        return this.isResultAvailable() ?
+            this.resultsJSX() : this.loadingJSX();
     },
 
     /**
@@ -1049,9 +1054,11 @@ var Report = React.createClass({
                 }
                 <div className={this.shouldShowSidebar() ?
                     'col-md-9' : 'col-md-12'}>
-                    { this.overview() }
-                    <Circos queries={this.state.queries}
-                        program={this.state.program} collapsed="true"/>
+                    { this.overviewJSX() }
+                    { this.isHitsAvailable() 
+                    ? <Circos queries={this.state.queries}
+                        program={this.state.program} collapsed="true"/> 
+                    : <span></span> }
                     {
                         _.map(this.state.queries, _.bind(function (query) {
                             return (
@@ -1065,31 +1072,10 @@ 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 not shown in the sidebar if there are more than eight queries
-     * in total.
-     */
-    shouldShowIndex: function () {
-        return this.state.queries.length <= 8;
-    },
-
     /**
      * Renders report overview.
      */
-    overview: function () {
+    overviewJSX: function () {
         return (
             <div
                 className="overview">
@@ -1104,8 +1090,8 @@ var Report = React.createClass({
                         }).join(", ")
                     }
                     <br/>
-                    Total: {this.state.stats.nsequences} sequences, {this.state
-                        .stats.ncharacters} characters
+                    Total: {this.state.stats.nsequences} sequences,
+                    {this.state.stats.ncharacters} characters
                     <br/>
                     <br/>
                     {
@@ -1118,106 +1104,86 @@ var Report = React.createClass({
         );
     },
 
-    componentDidMount: function () {
-        this.fetchResults();
-    },
+
+    // Controller //
 
     /**
-     * Fetch results.
+     * Returns true if results have been fetched.
+     *
+     * A holding message is shown till results are fetched.
      */
-    fetchResults: function () {
-        var intervals = [200, 400, 800, 1200, 2000, 3000, 5000];
-
-        $.getJSON(location.pathname + '.json')
-        .complete(_.bind(function (jqXHR) {
-            switch (jqXHR.status) {
-            case 202:
-                var interval;
-                if (intervals.length === 1) {
-                    interval = intervals[0];
-                }
-                else {
-                    interval = intervals.shift;
-                }
-                setTimeout(this.fetchResults, interval);
-                break;
-            case 200:
-                this.updatePage(jqXHR.responseJSON);
-                break;
-            case 404:
-            case 400:
-            case 500:
-                showErrorModal(jqXHR.responseJSON);
-                break;
-            }
-        }, this));
+    isResultAvailable: function () {
+        return this.state.queries.length >= 1;
     },
 
-    updatePage: function(responseJSON) {
-        var queries = responseJSON.queries;
+    isHitsAvailable: function () {
+        var cnt = 0;
+        _.each(this.state.queries, function (query) {
+            if(query.hits.length == 0) cnt++;
+        });
+        return !(cnt == this.state.queries.length);
+    },
 
-        // Render results for first 50 queries and set flag if total queries is
-        // more than 250.
-        var numHits = 0;
-        responseJSON.veryBig = queries.length > 250;
-        //responseJSON.veryBig = !_.every(queries, (query) => {
-            //numHits += query.hits.length;
-            //return (numHits <= 500);
-        //});
-        responseJSON.queries = queries.splice(0, 50);
-        this.setState(responseJSON);
+    /**
+     * 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);
+    },
 
-        // Render results for remaining queries.
-        var update = function () {
-            if (queries.length > 0) {
-                this.setState({
-                    queries: this.state.queries.concat(queries.splice(0, 50))
-                });
-                setTimeout(update.bind(this), 500);
-            }
-            else {
-                this.componentFinishedUpdating();
-            }
-        };
-        setTimeout(update.bind(this), 500);
+    /**
+     * Returns true if index should be shown in the sidebar.
+     *
+     * Index is not shown in the sidebar if there are more than eight queries
+     * in total.
+     */
+    shouldShowIndex: function () {
+        return this.state.queries.length <= 8;
     },
 
     /**
-     * Locks Sidebar in its position, prevents folding of hits during
-     * text-selection, etc.
+     * Called after first call to render. The results may not be available at
+     * this stage and thus results DOM cannot be scripted here, unless using
+     * delegated events bound to the window, document, or body.
      */
-    componentFinishedUpdating: function () {
-        this.affixSidebar();
-        this.shouldShowIndex() && this.setupScrollSpy();
-        this.setupHitSelection();
-        this.setupDownloadLinks();
+    componentDidMount: function () {
+        // This sets up an event handler which enables users to select text
+        // from hit header without collapsing the hit.
+        this.preventCollapseOnSelection();
     },
 
     /**
-     * Affixes the sidebar.
-     *
-     * TODO: can't this be done with CSS?
+     * Called after each state change. Only a part of results DOM may be
+     * available after a state change.
      */
-    affixSidebar: function () {
-        var $sidebar = $('.sidebar');
-        $sidebar.affix({
-            offset: {
-                top: $sidebar.offset().top
-            }
-        });
+    componentDidUpdate: function () {
+        // We track the number of updates to the component.
+        this.updateCycle += 1;
+
+        // Lock sidebar in its position on first update of
+        // results DOM.
+        if (this.updateCycle === 1 ) this.affixSidebar();
     },
 
     /**
-     * For the query in viewport, highlights corresponding entry in the index.
+     * Prevents folding of hits during text-selection, etc.
      */
-    setupScrollSpy: function () {
-        $('body').scrollspy({target: '.sidebar'});
+
+    /**
+     * Called after all results have been rendered.
+     */
+    componentFinishedUpdating: function () {
+        this.shouldShowIndex() && this.setupScrollSpy();
     },
 
     /**
      * Prevents folding of hits during text-selection.
      */
-    setupHitSelection: function () {
+    preventCollapseOnSelection: function () {
         $('body').on('mousedown', ".hit > .section-header > h4", function (event) {
             var $this = $(this);
             $this.on('mouseup mousemove', function handler(event) {
@@ -1234,28 +1200,74 @@ var Report = React.createClass({
         });
     },
 
-    // Download links.
-    //
-    // Handles downloading files referenced by links with class 'download'.
-    setupDownloadLinks: function () {
-        $(document).on('click', '.download', function (event) {
-            event.preventDefault();
-            event.stopPropagation();
+    /**
+     * Affixes the sidebar.
+     */
+    affixSidebar: function () {
+        var $sidebar = $('.sidebar');
+        $sidebar.affix({
+            offset: {
+                top: $sidebar.offset().top
+            }
+        });
+    },
 
-            var $anchor = $(this);
+    /**
+     * For the query in viewport, highlights corresponding entry in the index.
+     */
+    setupScrollSpy: function () {
+        $('body').scrollspy({target: '.sidebar'});
+    },
 
-            if ($anchor.is(':disabled')) return;
+    /**
+     * Event-handler when hit is selected
+     * Adds glow to hit component.
+     * Updates number of Fasta that can be downloaded
+     */
+    selectHit: function (id) {
 
-            var url = $anchor.attr('href');
+        var checkbox = $("#" + id);
+        var num_checked  = $('.hit-links :checkbox:checked').length;
 
-            $.get(url)
-            .done(function (data) {
-                window.location.href = url;
-            })
-            .fail(function (jqXHR, status, error) {
-                SequenceServer.showErrorModal(jqXHR, function () {});
-            });
-        });
+        if (!checkbox || !checkbox.val()) {
+            return;
+        }
+
+        var $hit = $(checkbox.data('target'));
+
+        // Highlight selected hit and sync checkboxes if sequence viewer is open.
+        if (checkbox.is(":checked")) {
+            $hit
+            .addClass('glow')
+            .find(":checkbox").not(checkbox).check();
+            var $a = $('.download-fasta-of-selected');
+            var $b = $('.download-alignment-of-selected');
+            $b.enable()
+            var $n = $a.find('span');
+            $a
+            .enable()
+        }
+
+        else {
+            $hit
+            .removeClass('glow')
+            .find(":checkbox").not(checkbox).uncheck();
+        }
+
+        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('');
+        }
     },
 });