sequenceserver 2.2.0 → 3.0

data/public/js/circos.js

@@ -1,14 +1,18 @@
 import d3 from 'd3';
 import Circos from '../packages/circosJS@1.7.0';
-import _ from 'underscore'; 
+import _ from 'underscore';
 
 import Grapher from './grapher';
 import * as Helpers from './visualisation_helpers';
 import Utils from './utils';
 
 class Graph {
+    static canCollapse() {
+        return true;
+    }
+
     static name() {
-        return 'Queries and their top hits: chord diagram';
+        return 'Chord diagram of queries and their top hits';
     }
 
     static className() {
@@ -408,7 +412,7 @@ class Graph {
             .attr('dy', '-0.25em')
             .attr('x', -175)
             .style('font-size', '14px')
-            .text('Circos looks great with less than 16 queries');
+            .text('Chord diagram looks great with fewer than 16 queries');
     }
 
     layoutReset() {

data/public/js/dnd.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 
-/** 
+/**
  * Drag n drop widget.
  */
 export class DnD extends Component {
@@ -74,7 +74,7 @@ export class DnD extends Component {
                     }
 
                     var file = files[0];
-                    if (file.size > 10 * 1048576) {
+                    if (file.size > 250 * 1048576) {
                         dndError('dnd-large-file');
                         return;
                     }
@@ -141,7 +141,7 @@ export class DnD extends Component {
                                     style={{ display: 'none' }}>
                                     <div
                                         className="col-md-6 col-md-offset-3">
-                                        Too big a file. Can only do less than 10 MB. &gt;_&lt;
+                                        Too big a file. Can only do less than 250 MB. &gt;_&lt;
                                     </div>
                                 </div>
 

data/public/js/fastq_to_fasta.js

@@ -0,0 +1,35 @@
+const convertChunk = (fastqChunk) => {
+    fastqChunk[0] = '>' + fastqChunk[0].substring(1);
+    return fastqChunk.slice(0, 2);
+};
+
+const isValidFastq = (fastqChunk) => {
+    if (fastqChunk.length !== 4) {
+        return false;
+    }
+
+    return fastqChunk[0][0] === '@' && fastqChunk[2][0] === '+' && fastqChunk[1].length === fastqChunk[3].length;
+};
+
+export const fastqToFasta = (sequence) => {
+    let trimmedSequence = sequence.trim();
+    // return unmodified if sequence does not look like fastq
+    if (!trimmedSequence.startsWith('@')) {
+        return sequence;
+    }
+
+    const sequenceLines = trimmedSequence.split('\n');
+    const fastaChunks = [];
+
+    for (let i = 0; i < sequenceLines.length; i += 4) {
+        const fastqChunk = sequenceLines.slice(i, i + 4);
+        if (isValidFastq(fastqChunk)) {
+            fastaChunks.push(...convertChunk(fastqChunk));
+        } else {
+            // return unmodified sequence if it does not look like valid fastq
+            return sequence;
+        }
+    }
+
+    return fastaChunks.join('\n');
+};

data/public/js/form.js

@@ -21,14 +21,14 @@ export class Form extends Component {
         this.useTreeWidget = this.useTreeWidget.bind(this);
         this.determineBlastMethod = this.determineBlastMethod.bind(this);
         this.handleSequenceTypeChanged = this.handleSequenceTypeChanged.bind(this);
-        this.handleDatabaseTypeChanaged = this.handleDatabaseTypeChanaged.bind(this);
+        this.handleDatabaseTypeChanged = this.handleDatabaseTypeChanged.bind(this);
         this.handleAlgoChanged = this.handleAlgoChanged.bind(this);
         this.handleFormSubmission = this.handleFormSubmission.bind(this);
         this.formRef = createRef();
     }
 
     componentDidMount() {
-        /** 
+        /**
         * Fetch data to initialise the search interface from the server. These
         * include list of databases to search against, advanced options to
         * apply when an algorithm is selected, and a query sequence that
@@ -71,7 +71,7 @@ export class Form extends Component {
             }
         });
 
-        // show overlay to create visual feedback on button click 
+        // show overlay to create visual feedback on button click
         $('#method').on('click', () => {
             $('#overlay').css('display', 'block');
         });
@@ -102,6 +102,7 @@ export class Form extends Component {
             }
         });
     }
+
     determineBlastMethod() {
         var database_type = this.databaseType;
         var sequence_type = this.sequenceType;
@@ -146,7 +147,7 @@ export class Form extends Component {
         });
     }
 
-    handleDatabaseTypeChanaged(type) {
+    handleDatabaseTypeChanged(type) {
         this.databaseType = type;
         this.refs.button.setState({
             hasQuery: !this.refs.query.isEmpty(),
@@ -174,24 +175,27 @@ export class Form extends Component {
         return (
             <div className="container">
                 <div id="overlay" style={{ position: 'absolute', top: 0, left: 0, width: '100vw', height: '100vw', background: 'rgba(0, 0, 0, 0.2)', display: 'none', zIndex: 99 }} />
+
+                <div className="notifications" id="notifications">
+                    <FastqNotification />
+                    <NucleotideNotification />
+                    <ProteinNotification />
+                    <MixedNotification />
+                </div>
+
                 <form id="blast" ref={this.formRef} onSubmit={this.handleFormSubmission} className="form-horizontal">
                     <div className="form-group query-container">
                         <SearchQueryWidget ref="query" onSequenceTypeChanged={this.handleSequenceTypeChanged} />
                     </div>
-                    <div className="notifications" id="notifications">
-                        <NucleotideNotification />
-                        <ProteinNotification />
-                        <MixedNotification />
-                    </div>
                     {this.useTreeWidget() ?
                         <DatabasesTree ref="databases"
                             databases={this.state.databases} tree={this.state.tree}
                             preSelectedDbs={this.state.preSelectedDbs}
-                            onDatabaseTypeChanged={this.handleDatabaseTypeChanaged} />
+                            onDatabaseTypeChanged={this.handleDatabaseTypeChanged} />
                         :
                         <Databases ref="databases" databases={this.state.databases}
                             preSelectedDbs={this.state.preSelectedDbs}
-                            onDatabaseTypeChanged={this.handleDatabaseTypeChanaged} />
+                            onDatabaseTypeChanged={this.handleDatabaseTypeChanged} />
                     }
                     <div className="form-group">
                         <Options ref="opts" />
@@ -243,6 +247,21 @@ class NucleotideNotification extends Component {
     }
 }
 
+class FastqNotification extends Component {
+    render() {
+        return (<div
+            className="notification row"
+            id="fastq-sequence-notification"
+            style={{ display: 'none' }}>
+            <div
+                className="alert-info col-md-6 col-md-offset-3">
+                Detected FASTQ and automatically converted to FASTA.
+            </div>
+        </div>
+        );
+    }
+}
+
 class MixedNotification extends Component {
     render() {
         return (

data/public/js/grapher.js

@@ -1,7 +1,7 @@
-import _ from "underscore";
-import React, { createRef } from "react";
+import _ from 'underscore';
+import React, { createRef } from 'react';
 
-import "./svgExporter"; // create handlers for SVG and PNG download buttons
+import './svgExporter'; // create handlers for SVG and PNG download buttons
 
 // Each instance of Grapher is added to this object once the component has been
 // mounted. This is so that grapher can be iterated over and redrawn on window
@@ -13,123 +13,133 @@ var Graphers = {};
 // graphs collapsible, to redraw graphs when window is resized, and SVG and PNG
 // export buttons and functionality.
 export default function Grapher(Graph) {
-  return class extends React.Component {
-    constructor(props) {
-      super(props);
-      this.state = { collapsed: this.props.collapsed };
-      this.svgContainerRef = createRef();
-    }
-
-    collapseId() {
-      return Graph.collapseId(this.props);
-    }
-
-    render() {
-      var cssClasses = Graph.className() + " grapher";
-      return (
-        <div ref="grapher" className={cssClasses}>
-          <div className="grapher-header">
-            <h4
-              className="caption"
-              data-toggle="collapse"
-              data-target={"#" + this.collapseId()}
-            >
-              {this.state.collapsed ? this.plusIcon() : this.minusIcon()}
+    return class extends React.Component {
+        constructor(props) {
+            super(props);
+            this.state = { collapsed: Graph.canCollapse() && this.props.collapsed };
+            this.svgContainerRef = createRef();
+        }
+
+        collapseId() {
+            return Graph.collapseId(this.props);
+        }
+
+        render() {
+            var cssClasses = Graph.className() + ' grapher';
+            return (
+                <div ref="grapher" className={cssClasses}>
+                    {this.header()}
+                    {this.svgContainerJSX()}
+                </div>
+            );
+        }
+
+        header() {
+            if(Graph.canCollapse()) {
+                return <div className="grapher-header">
+                    <h4
+                        className="caption"
+                        data-toggle="collapse"
+                        data-target={'#' + this.collapseId()}
+                    >
+                        {this.state.collapsed ? this.plusIcon() : this.minusIcon()}
               &nbsp;{Graph.name()}
-            </h4>
-            {!this.state.collapsed && this.graphLinksJSX()}
-          </div>
-          {this.svgContainerJSX()}
-        </div>
-      );
-    }
-
-    minusIcon() {
-      return <i className="fa fa-minus-square-o"></i>;
-    }
-
-    plusIcon() {
-      return <i className="fa fa-plus-square-o"></i>;
-    }
-
-    graphLinksJSX() {
-      return (
-        <div className="hit-links graph-links">
-          <a href="#" className="btn-link export-to-svg">
-            <i className="fa fa-download" /> SVG
-          </a>
-          <span className="line">|</span>
-          <a href="#" className="btn-link export-to-png">
-            <i className="fa fa-download" /> PNG
-          </a>
-        </div>
-      );
-    }
-
-    svgContainerJSX() {
-      var cssClasses = Graph.className() + " svg-container collapse";
-      if (!this.state.collapsed) cssClasses += " in";
-      return (
-        <div
-          ref={this.svgContainerRef}
-          id={this.collapseId()}
-          className={cssClasses}
-        ></div>
-      );
-    }
-
-    componentDidMount() {
-      Graphers[this.collapseId()] = this;
-
-      // Draw visualisation for the first time. Visualisations are
-      // redrawn when browser window is resized.
-      this.draw();
-    }
-
-    componentDidUpdate() {
-      // Re-draw visualisation when the component change state.
-      this.draw();
-    }
-    svgContainer() {
-      return $(this.svgContainerRef.current);
-    }
-
-    draw() {
-      // Clean slate.
-      this.svgContainer().empty();
-      this.graph = null;
-
-      // Draw if uncollapsed.
-      if (this.state.collapsed) {
-        return;
-      }
-      this.graph = new Graph(this.svgContainer(), this.props);
-      this.svgContainer()
-        .find("svg")
-        .attr("data-name", Graph.dataName(this.props));
-    }
-  };
+                    </h4>
+                    {!this.state.collapsed && this.graphLinksJSX()}
+                </div>;
+            } else {
+                return <div className="grapher-header">
+                    {!this.state.collapsed && this.graphLinksJSX()}
+                </div>;
+            }
+        }
+
+        minusIcon() {
+            return <i className="fa fa-minus-square-o"></i>;
+        }
+
+        plusIcon() {
+            return <i className="fa fa-plus-square-o"></i>;
+        }
+
+        graphLinksJSX() {
+            return (
+                <div className="hit-links graph-links">
+                    <a href="#" className="btn-link export-to-svg">
+                        <i className="fa fa-download" /> SVG
+                    </a>
+                    <span className="line">|</span>
+                    <a href="#" className="btn-link export-to-png">
+                        <i className="fa fa-download" /> PNG
+                    </a>
+                </div>
+            );
+        }
+
+        svgContainerJSX() {
+            var cssClasses = Graph.className() + ' svg-container collapse';
+            if (!this.state.collapsed) cssClasses += ' in';
+            return (
+                <div
+                    ref={this.svgContainerRef}
+                    id={this.collapseId()}
+                    className={cssClasses}
+                ></div>
+            );
+        }
+
+        componentDidMount() {
+            Graphers[this.collapseId()] = this;
+
+            // Draw visualisation for the first time. Visualisations are
+            // redrawn when browser window is resized.
+            this.draw();
+        }
+
+        componentDidUpdate() {
+            // Re-draw visualisation when the component change state.
+            this.draw();
+        }
+        svgContainer() {
+            return $(this.svgContainerRef.current);
+        }
+
+        draw() {
+            // Clean slate.
+            this.svgContainer().empty();
+            this.graph = null;
+
+            // Draw if uncollapsed.
+            if (this.state.collapsed) {
+                return;
+            }
+            this.graph = new Graph(this.svgContainer(), this.props);
+            this.svgContainer()
+                .find('svg')
+                .attr('data-name', Graph.dataName(this.props));
+        }
+    };
 }
 
 // Redraw if window resized.
 $(window).resize(
-  _.debounce(function () {
-    _.each(Graphers, (grapher) => {
-      grapher.draw();
-    });
-  }, 125)
+    _.debounce(function () {
+        _.each(Graphers, (grapher) => {
+            grapher.draw();
+        });
+    }, 125)
 );
 
 // Swap-icon and toggle .graph-links on collapse.
-$("body").on("hidden.bs.collapse", ".collapse", function () {
-  var component = Graphers[$(this).attr("id")];
-  if (component) {
-    component.setState({ collapsed: true });
-  }
+$('body').on('hidden.bs.collapse', '.collapse', function () {
+    var component = Graphers[$(this).attr('id')];
+    if (component) {
+        component.setState({ collapsed: true });
+    }
 });
-$("body").on("shown.bs.collapse", ".collapse", function () {
-  var component = Graphers[$(this).attr("id")];
-  if (component) {
-    component.setState({ collapsed: false });
-  }
+$('body').on('shown.bs.collapse', '.collapse', function () {
+    var component = Graphers[$(this).attr('id')];
+    if (component) {
+        component.setState({ collapsed: false });
+    }
 });

data/public/js/hit.js

@@ -4,6 +4,7 @@ import _ from 'underscore';
 import HSPOverview from './kablammo';
 import downloadFASTA from './download_fasta';
 import AlignmentExporter from './alignment_exporter'; // to download textual alignment
+import HitButtons from 'hit_buttons';
 
 /**
  * Component for each hit. Receives props from Report. Has no state.
@@ -26,13 +27,14 @@ export default class extends Component {
         this.hitLinks = this.hitLinks.bind(this);
         this.viewSequenceButton = this.viewSequenceButton.bind(this);
         this.downloadFASTAButton = this.downloadFASTAButton.bind(this);
+        this.hit_buttons = new HitButtons(this);
     }
     shouldComponentUpdate() {
         return !this.props.hit;
     }
     /**
-         * Returns accession number of the hit sequence.
-         */
+     * Returns accession number of the hit sequence.
+     */
     accession() {
         return this.props.hit.accession;
     }
@@ -142,6 +144,10 @@ export default class extends Component {
         }
         btns.push(this.downloadAlignmentButton());
 
+        this.hit_buttons.buttons().forEach((button) => {
+            btns.push(button);
+        });
+
         return (
             <div className="hit-links">
                 <label>

data/public/js/hits_overview.js

@@ -5,9 +5,12 @@ import * as Helpers from './visualisation_helpers';
 import Utils from './utils';
 
 class Graph {
+    static canCollapse() {
+        return true;
+    }
 
     static name() {
-        return 'Graphical overview of hits';
+        return 'Graphical overview of aligning hit sequences to the query';
     }
 
     static className() {

data/public/js/jquery_world.js

@@ -1,7 +1,6 @@
 import $ from 'jquery';
 import '../packages/jquery-ui@1.11.4';
 import 'bootstrap';
-import 'webshim';
 
 global.$ = $;
 /**

data/public/js/kablammo.js

@@ -18,6 +18,10 @@ import * as Helpers from './visualisation_helpers';
  */
 
 class Graph {
+    static canCollapse() {
+        return true;
+    }
+
     static name() {
         return 'Graphical overview of aligning region(s)';
     }

data/public/js/length_distribution.js

@@ -8,8 +8,12 @@ import * as Helpers from './visualisation_helpers';
  */
 
 class Graph {
+    static canCollapse() {
+        return true;
+    }
+
     static name() {
-        return 'Length distribution of matching sequences';
+        return 'Length distribution of matching hit sequences';
     }
 
     static className() {

data/public/js/null_plugins/download_links.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+class DownloadLinks extends React.Component{
+    render () {}
+}
+
+export default DownloadLinks;

data/public/js/null_plugins/hit_buttons.js

@@ -0,0 +1,11 @@
+class HitButtons {
+    constructor(hit) {
+        this.hit = hit;
+    }
+
+    buttons() {
+        return [];
+    }
+}
+
+export default HitButtons;

data/public/js/null_plugins/report_plugins.js

@@ -0,0 +1,18 @@
+
+class ReportPlugins {
+    constructor(parent) {
+        this.parent = parent;
+    }
+
+    init() {
+    }
+
+    componentDidUpdate(_prevProps, _prevState) {
+    }
+
+    queryResults(_query) {
+        return [];
+    }
+}
+
+export default ReportPlugins;

data/public/js/query.js

@@ -4,6 +4,7 @@ import _ from 'underscore';
 import HitsOverview from './hits_overview';
 import LengthDistribution from './length_distribution'; // length distribution of hits
 import Utils from './utils';
+import { fastqToFasta } from './fastq_to_fasta';
 
 /**
  * Query component displays query defline, graphical overview, length
@@ -65,9 +66,10 @@ export class ReportQuery extends Component {
 
     noHitsJSX() {
         return <div className="section-content">
-            <strong> ****** No hits found ****** </strong>
+            <strong> ****** No BLAST hits found ****** </strong>
         </div>;
     }
+
     render() {
         return (
             <div className="resultn" id={this.domID()}
@@ -102,6 +104,7 @@ export class SearchQueryWidget extends Component {
         this.indicateNormal = this.indicateNormal.bind(this);
         this.type = this.type.bind(this);
         this.guessSequenceType = this.guessSequenceType.bind(this);
+        this.preProcessSequence = this.preProcessSequence.bind(this);
         this.notify = this.notify.bind(this);
 
         this.textareaRef = createRef()
@@ -119,6 +122,8 @@ export class SearchQueryWidget extends Component {
 
     componentDidUpdate() {
         this.hideShowButton();
+        this.preProcessSequence();
+
         var type = this.type();
         if (!type || type !== this._type) {
             this._type = type;
@@ -131,7 +136,7 @@ export class SearchQueryWidget extends Component {
 
     /**
      * Returns query sequence if no argument is provided (or null or undefined
-     * is provided as argument). Otherwise, sets query sequenced to the given
+     * is provided as argument). Otherwise, sets query sequence to the given
      * value and returns `this`.
      *
      * Default/initial state of query sequence is an empty string. Caller must
@@ -239,7 +244,12 @@ export class SearchQueryWidget extends Component {
      * of directly calling this method.
      */
     type() {
-        var sequences = this.value().split(/>.*/);
+        let sequence = this.value().trim();
+        // FASTQ detected, but we don't know if conversion has succeeded yet
+        // will notify separately if it does
+        if (sequence.startsWith('@') ) { return undefined; }
+
+        var sequences = sequence.split(/>.*/);
 
         var type, tmp;
 
@@ -262,6 +272,16 @@ export class SearchQueryWidget extends Component {
         return type;
     }
 
+    preProcessSequence() {
+        var sequence = this.value();
+        var updatedSequence = fastqToFasta(sequence);
+
+        if (sequence !== updatedSequence) {
+            this.value(updatedSequence);
+            this.notify('fastq');
+        }
+    }
+
     /**
      * Guesses and returns the type of the given sequence (nucleotide,
      * protein).
@@ -289,9 +309,9 @@ export class SearchQueryWidget extends Component {
     }
 
     notify(type) {
-        clearTimeout(this.notification_timeout);
         this.indicateNormal();
-        $('.notifications .active').hide().removeClass('active');
+        clearTimeout(this.notification_timeout);
+        // $('.notifications .active').hide().removeClass('active');
 
         if (type) {
             $('#' + type + '-sequence-notification').show('drop', { direction: 'up' }).addClass('active');
@@ -369,7 +389,7 @@ class HitsTable extends Component {
             <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>Sequences producing significant alignments</span>
+                    <span>Hit sequences producing significant alignments</span>
                 </h4>
                 <div className="collapsed in" id={'Query_' + this.props.query.number + 'HT_' + this.props.query.number}>
                     <table