sequenceserver 3.1.3 → 3.2.0

data/public/js/length_distribution.js

@@ -1,4 +1,4 @@
-import d3 from 'd3';
+import * as d3 from 'd3';
 import _ from 'underscore';
 import Grapher from 'grapher';
 import * as Helpers from './visualisation_helpers';
@@ -61,20 +61,19 @@ class Graph {
         this.draw_rectangles();
         this.draw_query_line();
         this.draw_axes();
-        this.setupTooltip();
     }
 
     define_scale_and_bins() {
-        this._scale_x = d3.scale.linear()
+        this._scale_x = d3.scaleLinear()
             .domain([
                 0,
                 (d3.max([this.query_length, d3.max(this._data)]) * 1.01)
             ]).nice()
             .range([0, this._width]);
-        this._bins = d3.layout.histogram()
-            .range(this._scale_x.domain())
-            .bins(this._scale_x.ticks(50))(this._data);
-        this._scale_y = d3.scale.linear()
+        this._bins = d3.bin()
+            .domain(this._scale_x.domain())
+            .thresholds(this._scale_x.ticks(50))(this._data);
+        this._scale_y = d3.scaleLinear()
             .domain([0, d3.max(this._bins, function(d) { return d.length; })])
             .range([this._height, 0]).nice();
     }
@@ -83,13 +82,6 @@ class Graph {
         this._data = _.map(this.query.hits, _.iteratee('length'));
     }
 
-    setupTooltip() {
-        this.svg_container.find('[data-toggle="tooltip"]').tooltip({
-            'placement': 'top', 'container': 'body', 'html': 'true',
-            'delay': 0, 'white-space': 'nowrap'
-        });
-    }
-
     setupResponsiveness() {
         var currentWidth = $(window).width();
         console.log('cureent '+currentWidth);
@@ -104,20 +96,19 @@ class Graph {
     }
 
     tick_formatter(seq_type) {
-        var ticks = this._scale_x.ticks();
-        var format = d3.format('.1f');
-        var prefix = d3.formatPrefix(ticks[ticks.length - 1]);
-        var suffixes = {amino_acid: 'aa', nucleic_acid: 'bp'};
-        return function (d) {
-            if (d === 0) { return ; }
-            if (_.indexOf(ticks,d) >= 0) {
-                if (suffixes[seq_type] == 'aa') {
-                    return (d + ' ' + suffixes[seq_type]);
-                } else {
-                    return (format(prefix.scale(d)) + ' ' + prefix.symbol + suffixes[seq_type]);
-                }
+        const ticks = this._scale_x.ticks();
+        const prefix = d3.format('~s');
+        const suffixes = { amino_acid: 'aa', nucleic_acid: 'bp' };
+
+        return (d) => {
+            if (d === 0 || !ticks.includes(d)) return;
+
+            if (suffixes[seq_type] === 'aa') {
+                return `${d} ${suffixes[seq_type]}`;
             } else {
-                return ;
+                const formatted = prefix(d);
+
+                return `${Helpers.formatNumberUnits(formatted)}${suffixes[seq_type]}`;
             }
         };
     }
@@ -144,7 +135,7 @@ class Graph {
                 };
                 inner_data.push(item);
             });
-            var item = {data: inner_data, x: bin.x, dx: bin.dx, length: bin.length};
+            var item = {data: inner_data, x: bin.x0, dx: bin.x1, length: bin.length};
             data2.push(item);
         });
         this._update_data = data2;
@@ -166,13 +157,12 @@ class Graph {
             .attr('xlink:href', function(i) { return i.url; })
             .append('rect')
             .attr('class','bar')
-            .attr('data-toggle','tooltip')
             .attr('title', function(i) {
                 return i.id+' '+'<br>E value: '+Helpers.prettify_evalue(i.evalue)+'<br>Length: '+i.value;
             })
             .attr('x', 1)
             .attr('y', function(i) { return (self._scale_y(i.y0)); })
-            .attr('width', self._scale_x(this._bins[1].x) - self._scale_x(this._bins[0].x) - 1)
+            .attr('width', self._scale_x(this._bins[1].x0) - self._scale_x(this._bins[0].x0) - 1)
             .attr('height', function (i) { return self._scale_y(i.y1) - self._scale_y(i.y0); })
             .attr('fill', function(i) {
                 return i.color;
@@ -210,16 +200,12 @@ class Graph {
             space = len;
         }
         var formatter = this.tick_formatter(this._seq_type.subject_seq_type);
-        var x_axis = d3.svg.axis()
-            .scale(this._scale_x)
-            .orient('bottom')
+        var x_axis = d3.axisTop(this._scale_x)
             .ticks(50)
             .tickFormat(formatter);
-        var y_axis = d3.svg.axis()
-            .scale(this._scale_y)
-            .orient('left')
+        var y_axis = d3.axisLeft(this._scale_y)
             .tickValues(this._scale_y.ticks(space))
-            .outerTickSize(0)
+            .tickSizeOuter(0)
             .tickFormat(function (e) {
                 if (Math.floor(e) != e) {
                     return ;

data/public/js/null_plugins/report_plugins.js

@@ -6,14 +6,12 @@ class ReportPlugins {
         this.parent = parent;
     }
 
-    init() {
+    init(_callback) {
     }
 
-    componentDidUpdate(_prevProps, _prevState) {
-    }
 
-    queryResults(_query) {
-        return [];
+    queryResult(_query) {
+        return null;
     }
 
     generateStats() {

data/public/js/options.js

@@ -72,9 +72,10 @@ export class Options extends Component {
         return (
             <div id="options-presets" className="w-full">
                 { Object.keys(this.props.predefinedOptions).length > 1 && <>
-                    <h3 className="w-full font-medium border-b border-seqorange mb-2">Settings</h3>
-
-                    <p className="text-sm">Choose a predefined setting or customize BLAST parameters.</p>
+                    <div className="flex items-center border-b border-seqorange mb-2">
+                        <h3 className="text-base md:text-lg font-medium pr-1">Settings</h3>
+                        <p className="text-base text-gray-500">Choose a predefined setting or customize parameters.</p>
+                    </div>
                     {this.presetListJSX()}
                 </>}
             </div>
@@ -83,7 +84,7 @@ export class Options extends Component {
 
     presetListJSX() {
         return (
-            <ul className="text-sm my-1">
+            <ul className="md:text-lg my-1">
                 {
                     Object.entries(this.props.predefinedOptions).map(
                         ([key, config], index) => {
@@ -91,7 +92,7 @@ export class Options extends Component {
                             let description = config.description || textValue;
 
                             return (
-                                <label key={index} className={`block w-full px-2 py-1 hover:bg-gray-200 cursor-pointer`}>
+                                <label key={index} className={`block w-full px-2 py-1 text-seqblue hover:bg-gray-200 hover:text-seqorange cursor-pointer`}>
                                     <input
                                         type="radio"
                                         name="predefinedOption"
@@ -119,26 +120,20 @@ export class Options extends Component {
         return(
              <div className={this.state.paramsMode !== 'advanced' ? 'w-full hidden' : 'w-full'}>
                 <div className="flex items-end">
-                    <label className="flex items-center" htmlFor="advanced">
-                        Advanced parameters
+                    <label className="flex items-center text-base md:text-lg" htmlFor="advanced">
+                        Parameters:
                     </label>
 
                     {this.props.blastMethod &&
                         <button
-                            className="text-seqblue ml-2"
+                            className="text-seqblue text-base md:text-lg ml-2"
                             type="button"
                             onClick={this.showAdvancedOptionsHelp}
                             data-toggle="modal" data-target="#help">
-                            See available options
+                            See options
                             <i className="fa fa-question-circle ml-1 w-3 h-4 fill-current"></i>
                         </button>
                     }
-
-                    {!this.props.blastMethod &&
-                        <span className="text-gray-600 ml-2 text-sm hidden sm:block">
-                            Select databases and fill in the query to see options.
-                        </span>
-                    }
                 </div>
 
                 <div className='flex-grow flex w-full'>
@@ -151,8 +146,8 @@ export class Options extends Component {
                         title="View, and enter advanced parameters."
                     />
                 </div>
-                <div className="text-sm text-gray-600 mt-2">
-                    Options as they would appear in a command line when calling BLAST eg: <i>-evalue 1.0e-5 -num_alignments 100</i>
+                <div className="mt-1 text-gray-700">
+                    Options as they would appear in a command-line.
                 </div>
             </div>
         )
@@ -161,15 +156,18 @@ export class Options extends Component {
     showAdvancedOptionsHelp(e) {
         const ids = ['blastn', 'tblastn', 'blastp', 'blastx', 'tblastx'];
         const method = this.props.blastMethod.toLowerCase();
+        const modal = document.querySelector("dialog.advanced-modal");
+
         // hide options for other algorithms and only show for selected algorithm
         for (const id of ids) {
             if (id === method) {
-                document.getElementById(id).classList.remove('hidden')
+                document.getElementById(id).classList.remove('hidden');
             } else {
                 document.getElementById(id).classList.add('hidden');
             }
         }
-        document.querySelector('[data-help-modal]').classList.remove('hidden')
+
+        modal.showModal();
     }
 
     render() {

data/public/js/query.js

@@ -6,6 +6,7 @@ import LengthDistribution from './length_distribution'; // length distribution o
 import Utils from './utils';
 import { fastqToFasta } from './fastq_to_fasta';
 import CollapsePreferences from './collapse_preferences';
+import './jquery_world';
 
 /**
  * Query component displays query defline, graphical overview, length
@@ -44,21 +45,22 @@ export class ReportQuery extends Component {
         return this.props.query.hits.length;
     }
     headerJSX() {
-        var meta = `length: ${this.queryLength().toLocaleString()}`;
+        var meta = `Length: ${this.queryLength().toLocaleString()}`;
+
         if (this.props.showQueryCrumbs) {
-            meta = `query ${this.props.query.number}, ` + meta;
+            meta = `query ${this.props.query.number}. ${meta}`;
         }
-        return <div className="section-header">
-            <h3>
-                <strong>Query=&nbsp;{this.props.query.id}</strong>&nbsp;
-                {this.props.query.title}
+        return <div className="section-header border-b border-seqorange justify-between w-full flex flex-col sm:flex-row gap-4">
+            <h3 className="text-base cursor-pointer flex flex-col sm:flex-row items-start">
+                <strong>Query=<span className="ml-1">{this.props.query.id}</span></strong>
+                <span className="ml-1">{this.props.query.title}</span>
             </h3>
-            <span className="label label-reset pos-label">{meta}</span>
+            <span className="label first-letter:capitalize text-sm text-right font-normal text-inherit pt-0 px-0">{meta}</span>
         </div>;
     }
 
     hitsListJSX() {
-        return <div className="section-content">
+        return <div className="pt-0 px-0 pb-px">
             <HitsOverview key={'GO_' + this.props.query.number} query={this.props.query} program={this.props.program} collapsed={this.props.veryBig} />
             <LengthDistribution key={'LD_' + this.props.query.id} query={this.props.query} algorithm={this.props.program} />
             <HitsTable key={'HT_' + this.props.query.number} query={this.props.query} imported_xml={this.props.imported_xml} />
@@ -66,14 +68,14 @@ export class ReportQuery extends Component {
     }
 
     noHitsJSX() {
-        return <div className="section-content">
+        return <div className="pt-0 px-0 pb-px">
             <strong> ****** No BLAST hits found ****** </strong>
         </div>;
     }
 
     render() {
         return (
-            <div className="resultn" id={this.domID()}
+            <div className="resultn mt-1.5" id={this.domID()}
                 data-query-len={this.props.query.length}
                 data-algorithm={this.props.program}>
                 {this.headerJSX()}
@@ -348,7 +350,7 @@ export class SearchQueryWidget extends Component {
                     className="sequence">
                     <textarea
                         id="sequence" ref={this.textareaRef}
-                        className="block w-full p-4 text-gray-900 border border-gray-300 rounded-l-lg rounded-tr-lg bg-gray-50 text-base font-mono"
+                        className="block w-full p-4 text-gray-900 border border-gray-300 rounded-l-lg rounded-tr-lg bg-gray-50 text-sm font-mono min-h-52 resize-y"
                         name="sequence" value={this.state.value}
                         rows="6"
                         required="required"
@@ -408,16 +410,16 @@ class HitsTable extends Component {
         if (this.props.imported_xml) seqwidth += 15;
 
         return <table
-            className="table table-hover table-condensed tabular-view ">
+            className="table table-hover table-condensed tabular-view text-sm min-w-full mb-0">
             <thead>
-                <tr>
-                    <th className="text-left">#</th>
-                    <th width={`${seqwidth}%`}>Similar sequences</th>
-                    {hasName && <th width="15%" className="text-left">Species</th>}
-                    {!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">Identity (%)</th>
+                <tr className="text-neutral-500">
+                    <th className="text-left font-normal">#</th>
+                    <th style={{ width: `${seqwidth}%` }} className="text-left font-normal">Similar sequences</th>
+                    {hasName && <th className="text-left font-normal w-2/12">Species</th>}
+                    {!this.props.imported_xml && <th className="text-right font-normal w-2/12">Query coverage (%)</th>}
+                    <th className="text-right font-normal w-1/12">Total score</th>
+                    <th className="text-right font-normal w-1/12">E value</th>
+                    <th className="text-right font-normal w-1/12">Identity (%)</th>
                 </tr>
             </thead>
             <tbody>
@@ -426,22 +428,19 @@ class HitsTable extends Component {
                         return (
                             <tr key={hit.number}>
                                 <td className="text-left">{hit.number + '.'}</td>
-                                <td className="nowrap-ellipsis"
-                                    title={`${hit.id} ${hit.title}`}
-                                    data-toggle="tooltip" data-placement="left">
+                                <td>
                                     <a href={'#Query_' + this.props.query.number + '_hit_' + hit.number}
-                                        className="btn-link">{hit.id} {hit.title}</a>
+                                        className="text-sm text-seqblue hover:text-seqorange cursor-pointer pe-1 line-clamp-1 tooltip-item" title={`${hit.id} ${hit.title}`}>{hit.id} {hit.title}</a>
                                 </td>
                                 {hasName &&
-                                    <td className="nowrap-ellipsis" title={hit.sciname}
-                                        data-toggle="tooltip" data-placement="top">
+                                    <td className="pe-1 line-clamp-1 tooltip-item" title={hit.sciname}>
                                         {hit.sciname}
                                     </td>
                                 }
                                 {!this.props.imported_xml && <td className="text-right">{hit.qcovs}</td>}
-                                <td className="text-right">{hit.total_score}</td>
-                                <td className="text-right">{Utils.inExponential(hit.hsps[0].evalue)}</td>
-                                <td className="text-right">{Utils.inPercentage(hit.hsps[0].identity, hit.hsps[0].length)}</td>
+                                <td className="pe-1 text-right">{hit.total_score}</td>
+                                <td className="pe-1 text-right">{Utils.inExponential(hit.hsps[0].evalue)}</td>
+                                <td className="pe-1 text-right">{Utils.inPercentage(hit.hsps[0].identity, hit.hsps[0].length)}</td>
                             </tr>
                         );
                     }, this))
@@ -452,12 +451,14 @@ class HitsTable extends Component {
 
     render() {
         return (
-            <div className="table-hit-overview">
-                <h4 className="caption" onClick={() => this.collapsePreferences.toggleCollapse()}>
-                    {this.collapsePreferences.renderCollapseIcon()}
-                    <span> {this.name}</span>
-                </h4>
-                <div id={'Query_' + this.props.query.number + 'HT_' + this.props.query.number}>
+            <div className={`table-hit-overview ${this.state.collapsed ? 'print:hidden' : ''}`}>
+                <div className="grapher-header pr-px">
+                    <h4 className="inline-block pl-px m-0 caption cursor-pointer text-sm caption" onClick={() => this.collapsePreferences.toggleCollapse()}>
+                        {this.collapsePreferences.renderCollapseIcon()}
+                        <span> {this.name}</span>
+                    </h4>
+                </div>
+                <div id={'Query_' + this.props.query.number + 'HT_' + this.props.query.number} className="overflow-auto md:overflow-hidden">
                     {!this.state.collapsed && this.tableJSX()}
                 </div>
             </div>

data/public/js/report/alignment_results.js

@@ -0,0 +1,18 @@
+import ReportHeader from './report_header';
+import Hits from '../hits';
+
+const AlignmentResults = (props) => {
+    const renderContent = () => (
+        <div>
+            {props.state.results}
+            <Hits
+                {...props}
+                componentFinishedUpdating={(_) => props.componentFinishedUpdating(_)}
+            />
+        </div>
+    );
+
+    return <ReportHeader name="Alignment Results" renderContent={renderContent} />;
+};
+
+export default AlignmentResults;

data/public/js/report/graphical_overview.js

@@ -0,0 +1,38 @@
+import Circos from '../circos';
+import ReportHeader from './report_header';
+
+const GraphicalOverview = ({queries, program, plugins}) => {
+    /**
+    * Does the report have at least two hits? This is used to determine
+    * whether Circos should be enabled or not.
+    */
+    const atLeastTwoHits = () => {
+        let hitNum = 0;
+        return queries.some((query) => {
+            hitNum += query.hits.length;
+            return hitNum > 1;
+        });
+    }
+
+    const renderContent = () => {
+        if(!atLeastTwoHits()) return null;
+
+        return (
+            <>
+                <Circos queries={queries} program={program} />
+                {plugins.generateStats(queries)}
+            </>
+        )
+    }
+
+    return (
+        <ReportHeader
+            name="Graphical Overview"
+            renderContent={renderContent}
+            renderable={atLeastTwoHits()}
+            defaultCollapsed={true}
+        />
+    )
+}
+
+export default GraphicalOverview;

data/public/js/report/report_header.js

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import CollapsePreferences from '../collapse_preferences';
+
+const ReportHeader = (props) => {
+    const [state, setState] = useState({ collapsed: null });
+    const [renderable, _setRenderable] = useState(props.renderable === undefined ? true : props.renderable);
+    const collapsePreferences = new CollapsePreferences(
+        { name: props.name, state: { ...state }, setState: setState },
+        props.defaultCollapsed
+    );
+
+    if (state.collapsed === null) setState({ collapsed: collapsePreferences.preferenceStoredAsCollapsed() });
+    if (!renderable) return null;
+
+    return (
+        <div className={`${state.collapsed ? 'print:!hidden' : ''}`}>
+            <h3 className="caption font-bold border-b-2 border-seqorange" onClick={() => collapsePreferences.toggleCollapse()}>
+                {collapsePreferences.renderCollapseIcon()}
+                <span> {props.name}</span>
+            </h3>
+            <div className='mx-1 print:mx-0'>
+                {!state.collapsed && props.renderContent()}
+            </div>
+        </div>
+    );
+};
+
+export default ReportHeader;

data/public/js/report/run_summary.js

@@ -0,0 +1,43 @@
+import ReportHeader from './report_header';
+import _ from 'underscore';
+
+const RunSummary = (props) => {
+    const renderContent = () => {
+        return (
+            <div className="overview mr-0 mb-0">
+                <p className="m-0 text-sm">
+                    <strong>SequenceServer {props.seqserv_version}</strong> using{' '}
+                    <strong>{props.program_version}</strong>
+                    {props.submitted_at &&
+                        `, query submitted on ${props.submitted_at}`}
+                </p>
+                <p className="m-0 text-sm">
+                    <strong> Databases: </strong>
+                    {props.querydb
+                        .map((db) => {
+                            return db.title;
+                        })
+                        .join(', ')}{' '}
+                    ({props.stats.nsequences} sequences,&nbsp;
+                    {props.stats.ncharacters} characters)
+                </p>
+                <p className="m-0 text-sm">
+                    <strong>Parameters: </strong>{' '}
+                    {_.map(props.params, function (val, key) {
+                        return key + ' ' + val;
+                    }).join(', ')}
+                </p>
+                <p className="m-0 text-sm">
+                    Please cite:{' '}
+                    <a href="https://doi.org/10.1093/molbev/msz185" className="text-seqblue hover:text-seqorange">
+                        https://doi.org/10.1093/molbev/msz185
+                    </a>
+                </p>
+            </div>
+        );
+    };
+
+    return <ReportHeader name="Run Summary" renderContent={renderContent} />;
+};
+
+export default RunSummary;