sequenceserver 3.1.3 → 3.2.0

data/public/js/grapher.js

@@ -1,131 +1,133 @@
 import _ from 'underscore';
-import React, { createRef } from 'react';
+import React, { createRef, useState, useEffect, useCallback } from 'react';
 
 import './svgExporter'; // create handlers for SVG and PNG download buttons
 import CollapsePreferences from './collapse_preferences';
-
-// 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
-// resize event.
-var Graphers = {};
+import useDetectPrint from "react-detect-print";
 
 // Grapher is a function that takes a Graph class and returns a React component.
 // This React component provides HTML boilerplate to add heading, to make the
 // 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.name = Graph.name(this.props);
-            this.collapsePreferences = new CollapsePreferences(this);
-            let isCollapsed = this.collapsePreferences.preferenceStoredAsCollapsed();
-            this.state = { collapsed: Graph.canCollapse() && (this.props.collapsed || isCollapsed) };
-            this.svgContainerRef = createRef();
-        }
+    return function Component(props) {
+        const alwaysShowName = Graph.alwaysShowName === undefined ? false : Graph.alwaysShowName();
+        const printing = useDetectPrint();
+        const name = Graph.name(props);
+        const [width, setWidth] = useState(window.innerWidth);
+        const [collapsed, setCollapsed] = useState(false);
+        const svgContainerRef = createRef();
+        let graph = null;
 
-        graphId() {
-            return Graph.graphId(this.props);
-        }
+        const graphId = () => Graph.graphId(props)
 
-        render() {
-            // Do not render when Graph.name() is null
-            if (Graph.name(this.props) === null) {
-                return null;
-            } else {
-                var cssClasses = Graph.className() + ' grapher';
-                return (
-                    <div className={cssClasses}>
-                        {this.header()}
-                        {this.svgContainerJSX()}
-                    </div>
-                );
-            }
+        const graphLinksJSX = () => {
+            return (
+                <div className="hit-links float-right text-right text-blue-300 h-4 print:hidden">
+                    <a href="#" className="btn-link text-sm text-seqblue hover:text-seqorange cursor-pointer export-to-svg">
+                        <i className="fa fa-download" /> SVG
+                    </a>
+                    <span className="line px-1">|</span>
+                    <a href="#" className="btn-link text-sm text-seqblue hover:text-seqorange cursor-pointer export-to-png">
+                        <i className="fa fa-download" /> PNG
+                    </a>
+                </div>
+            );
         }
 
-        header() {
+        const header = () => {
             if(Graph.canCollapse()) {
-                return <div className="grapher-header">
+                return <div className="grapher-header pr-px">
                     <h4
-                        className="caption"
-                        onClick={() => this.collapsePreferences.toggleCollapse()}
+                        className="inline-block pl-px m-0 caption cursor-pointer text-sm"
+                        onClick={() => collapsePreferences.toggleCollapse()}
                     >
-                        {this.collapsePreferences.renderCollapseIcon()}
-              &nbsp;{Graph.name(this.props)}
+                        {collapsePreferences.renderCollapseIcon()}
+                        <span className="print:hidden">&nbsp;</span>{Graph.name(props)}
                     </h4>
-                    {!this.state.collapsed && this.graphLinksJSX()}
+                    {!collapsed && graphLinksJSX()}
+                </div>;
+            } else if (alwaysShowName) {
+                return <div className="grapher-histogram-header" style={{ position: 'relative' }}>
+                    <h4 className="caption">&nbsp;{Graph.name(props)}</h4>
+                    <div className="pull-right" style={{ position: 'absolute', top: 0, right: 0 }}>
+                        {!collapsed && graphLinksJSX()}
+                    </div>
                 </div>;
             } else {
-                return <div className="grapher-header">
-                    {!this.state.collapsed && this.graphLinksJSX()}
+                return <div className="pr-px">
+                    {!collapsed && graphLinksJSX()}
                 </div>;
             }
         }
 
-        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';
+        const svgContainerJSX = () => {
+            var cssClasses = Graph.className() + ' svg-container hidden';
+            if (!collapsed) cssClasses += ' !block';
             return (
                 <div
-                    ref={this.svgContainerRef}
-                    id={this.graphId()}
+                    ref={svgContainerRef}
+                    id={graphId()}
                     className={cssClasses}
                 ></div>
             );
         }
 
-        componentDidMount() {
-            Graphers[this.graphId()] = this;
-
-            // Draw visualisation for the first time. Visualisations are
-            // redrawn when browser window is resized.
-            this.draw();
+        const svgContainer = () => {
+            return $(svgContainerRef.current);
         }
 
-        componentDidUpdate() {
-            // Re-draw visualisation when the component change state.
-            this.draw();
-        }
-        svgContainer() {
-            return $(this.svgContainerRef.current);
-        }
-
-        draw() {
+        const draw = (printing = false) => {
+            let graphWidth = 'auto';
+            if (printing) graphWidth = '900';
             // Clean slate.
-            this.svgContainer().empty();
-            this.graph = null;
+            svgContainer().empty();
+            graph = null;
 
             // Draw if uncollapsed.
-            if (this.state.collapsed) {
-                return;
-            }
-            this.graph = new Graph(this.svgContainer(), this.props);
-            this.svgContainer()
+            if (collapsed) return;
+
+            svgContainer().width(graphWidth);
+            graph = new Graph(svgContainer(), props);
+            svgContainer()
                 .find('svg')
-                .attr('data-name', Graph.dataName(this.props));
+                .attr('data-name', Graph.dataName(props));
         }
-    };
-}
 
-// Redraw if window resized.
-$(window).resize(
-    _.debounce(function () {
-        _.each(Graphers, (grapher) => {
-            grapher.draw();
-        });
-    }, 125)
-);
+        useEffect(() => {
+            // Attach a debounced listener to handle window resize events 
+            // Updates the width state with the current window width, throttled to run at most once every 125ms
+            const handleResize = _.debounce(() => setWidth(window.innerWidth), 125);
+            window.addEventListener("resize", handleResize);
+
+            const isCollapsed = collapsePreferences.preferenceStoredAsCollapsed();
+            setCollapsed(Graph.canCollapse() && (props.collapsed || isCollapsed))
+            draw();
+
+            return () => window.removeEventListener("resize", handleResize)
+        }, [])
+
+        useEffect(() => {
+            draw(printing);
+        }, [printing, width])
+
+        const setState = (state) => {
+            setCollapsed(state.collapsed)
+        }
+
+        const collapsePreferences = new CollapsePreferences({name: name, state: { collapsed: collapsed }, setState: setState});
+
+        if (Graph.name(props) === null) {
+            return(null);
+        } else {
+            const printCss = collapsed ? 'print:hidden' : '';
+            const cssClasses = Graph.className() + ' grapher' + printCss;
+            return (
+                <div className={cssClasses}>
+                    {header()}
+                    {svgContainerJSX()}
+                </div>
+            )
+        }
+    }
+}

data/public/js/hit.js

@@ -99,33 +99,35 @@ export default class extends Component {
     }
 
     headerJSX() {
-        var meta = `length: ${this.hitLength().toLocaleString()}`;
+        var meta = `Length: ${this.hitLength().toLocaleString()}`;
 
         if (this.props.showQueryCrumbs && this.props.showHitCrumbs) {
             // Multiper queries, multiple hits
-            meta = `hit ${this.props.hit.number} of query ${this.props.query.number}, ` + meta;
+            meta = `hit ${this.props.hit.number} of query ${this.props.query.number}. ${meta}`;
         }
         else if (this.props.showQueryCrumbs && !this.props.showHitCrumbs) {
             // Multiple queries, single hit
-            meta = `the only hit of query ${this.props.query.number}, ` + meta;
+            meta = `the only hit of query ${this.props.query.number}. ${meta}`;
         }
         else if (!this.props.showQueryCrumbs && this.props.showHitCrumbs) {
             // Single query, multiple hits
-            meta = `hit ${this.props.hit.number}, ` + meta;
+            meta = `hit ${this.props.hit.number}. ${meta}`;
         }
 
-        return <div className="section-header">
-            <h4>
-                <i className="fa fa-minus-square-o"></i>&nbsp;
-                <strong>{this.props.hit.id}</strong>&nbsp;
-                {this.props.hit.title}
+        return <div className="section-header border-b border-seqorange flex flex-col sm:flex-row sm:justify-between w-full">
+            <h4 className="text-sm cursor-pointer flex flex-col sm:flex-row items-start sm:items-start" data-parent-id={`#${this.domID()}`}>
+                <div className="flex items-start">
+                    <i className="fa-regular fa-square-minus print:!hidden"></i>
+                    <strong className="cursor-text ml-1 print:ml-0"> {this.props.hit.id}</strong>
+                </div>
+                <span className="ml-1">{this.props.hit.title}</span>
             </h4>
-            <span className="label label-reset pos-label">{meta}</span>
+            <span className="label first-letter:capitalize text-sm font-normal text-inherit cursor-text">{meta}</span>
         </div>;
     }
 
     contentJSX() {
-        return <div className="section-content" data-parent-hit={this.domID()}>
+        return <div className="pt-0 px-0 pb-px" data-parent-hit={this.domID()}>
             {this.hitLinks()}
             <HSPOverview key={'kablammo' + this.props.query.id} query={this.props.query}
                 hit={this.props.hit} algorithm={this.props.algorithm}
@@ -149,8 +151,8 @@ export default class extends Component {
         });
 
         return (
-            <div className="hit-links">
-                <label>
+            <div className="hit-links h-4 print:hidden">
+                <label className="text-sm text-seqblue hover:seqorange cursor-pointer mb-0">
                     <input type="checkbox" id={this.domID() + '_checkbox'}
                         value={this.sequenceID()} onChange={function () {
                             this.props.selectHit(this.domID() + '_checkbox');
@@ -160,12 +162,12 @@ export default class extends Component {
                 </label>
                 {
                     btns.map((btn, index) => {
-                        return [<span className="line" key={`btn-${index}`}>|</span>, this.button(Object.assign(btn, { key: index }))];
+                        return [<span className="text-seqorange mt-0 mr-1 ml-0 mb-1 px-1" key={`btn-${index}`}>|</span>, this.button(Object.assign(btn, { key: index }))];
                     })
                 }
                 {
                     this.props.hit.links.map((link, index) => {
-                        return [<span className="line" key={`link-${index}`}>|</span>, this.a(link, index)];
+                        return [<span className="text-seqorange mt-0 mr-1 ml-0 mb-1 px-1" key={`link-${index}`}>|</span>, this.a(link, index)];
                     })
                 }
             </div>
@@ -213,12 +215,12 @@ export default class extends Component {
 
     button({ text, icon, title, className, onClick, key }) {
         if (onClick) {
-            return <button key={key} className={`btn-link ${className}`}
+            return <button key={key} className={`btn-link text-sm text-seqblue hover:text-seqorange cursor-pointer ${className}`}
                 title={title} onClick={onClick}><i className={`fa ${icon}`}></i> {text}
             </button>;
         }
         else {
-            return <button key={key} className="btn-link view-sequence disabled"
+            return <button key={key} className="text-sm view-sequence disabled"
                 title={title} disabled={true}>
                 <i className={`fa ${icon}`}></i> {text}
             </button>;
@@ -231,7 +233,7 @@ export default class extends Component {
     a(link, key) {
         if (!link.title || !link.url) return;
 
-        let className = 'btn btn-link';
+        let className = 'btn-link text-sm text-seqblue hover:text-seqorange cursor-pointer';
         if (link.class) className = `${className} ${link.class}`;
         return <a href={link.url} key={`${link.url}-${key}`} className={className} target='_blank'>
             {link.icon && <i className={'fa ' + link.icon}></i>}
@@ -240,7 +242,7 @@ export default class extends Component {
     }
     render() {
         return (
-            <div className="hit" id={this.domID()} data-hit-def={this.props.hit.id}
+            <div className="hit mt-1 border-l-2 border-transparent pl-1 -ml-1" id={this.domID()} data-hit-def={this.props.hit.id}
                 data-hit-len={this.props.hit.length} data-hit-evalue={this.props.hit.evalue}>
                 {this.headerJSX()} {this.contentJSX()}
             </div>

data/public/js/hits.js

@@ -15,30 +15,38 @@ class Hits extends Component {
         this.nextQuery = 0;
         this.nextHit = 0;
         this.nextHSP = 0;
-        this.maxHSPs = 3; // max HSPs to render in a cycle
+        this.maxHSPs = 10; // max HSPs to render in a cycle
         this.state = props.state;
+        this.state.pluginResults = [];
         this.prepareAlignmentOfSelectedHits = this.prepareAlignmentOfSelectedHits.bind(this);
     }
 
     componentDidMount() {
+        this.props.plugins.init(this.onPluginResultsFetched.bind(this));
         this.componentDidUpdate(this.props, this.state);
     }
 
+    onPluginResultsFetched(pluginResults) {
+        this.setState({ pluginResults: pluginResults });
+    }
+
+    replacePluginResults(pluginResults) {
+        if (!pluginResults) return;
+
+        const updatedResults = this.props.plugins.replacePluginResults(this.state.results, pluginResults);
+        this.setState({ results: updatedResults, pluginResults: pluginResults });
+    }
+
     /**
     * Called for the first time after as BLAST results have been retrieved from
     * the server and added to this.state by fetchResults. Only summary overview
     * and circos would have been rendered at this point. At this stage we kick
     * start iteratively adding 1 HSP to the page every 25 milli-seconds.
     */
-    componentDidUpdate(prevProps, prevState) {
+    componentDidUpdate(_prevProps, prevState) {
         // Log to console how long the last update take?
         // console.log((Date.now() - this.lastTimeStamp) / 1000);
 
-        // Lock sidebar in its position on the first update.
-        if (this.nextQuery == 0 && this.nextHit == 0 && this.nextHSP == 0) {
-            this.affixSidebar();
-        }
-
         // Queue next update if we have not rendered all results yet.
         if (this.nextQuery < this.state.queries.length) {
             // setTimeout is used to clear call stack and space out
@@ -49,7 +57,13 @@ class Hits extends Component {
             this.props.componentFinishedUpdating();
         }
 
-        this.props.plugins.componentDidUpdate(prevProps, prevState);
+        if (this.state.pluginResults.length > 0 && prevState.pluginResults.length == 0) {
+            this.replacePluginResults(this.state.pluginResults);
+        }
+    }
+
+    isFirstUpdate() {
+        return this.nextQuery == 0 && this.nextHit == 0 && this.nextHSP == 0;
     }
 
     /* eslint complexity: ["error", 6] */
@@ -74,15 +88,15 @@ class Hits extends Component {
             var query = this.state.queries[this.nextQuery];
 
             // We may see a query multiple times during rendering because only
-            // 3 hsps are rendered in each cycle, but we want to create the
+            // 10 hsps are rendered in each cycle, but we want to create the
             // corresponding Query component only the first time we see it.
             if (this.nextHit == 0 && this.nextHSP == 0) {
                 results.items.push(this.renderReportQuery(query));
-                results.items.push(...this.props.plugins.queryResults(query));
+                results.items.push(this.props.plugins.queryResult(query, this.state.pluginResults));
             }
 
             this.processHits(results, query);
-            this.itterateLoops(['nextQuery', 'nextHit'], query.hits.length);
+            this.iterateLoops(['nextQuery', 'nextHit'], query.hits.length);
             if (results.numHSPsProcessed == this.maxHSPs) break;
         }
     }
@@ -91,12 +105,12 @@ class Hits extends Component {
         while (this.nextHit < query.hits.length) {
             var hit = query.hits[this.nextHit];
             // We may see a hit multiple times during rendering because only
-            // 10 hsps are rendered in each cycle, but we want to create the
+            // 3 hsps are rendered in each cycle, but we want to create the
             // corresponding Hit component only the first time we see it.
             if (this.nextHSP == 0) results.items.push(this.renderHit(query, hit));
 
             this.processHSPS(results, query, hit);
-            this.itterateLoops(['nextHit', 'nextHSP'], hit.hsps.length);
+            this.iterateLoops(['nextHit', 'nextHSP'], hit.hsps.length);
             if (results.numHSPsProcessed == this.maxHSPs) break;
         }
     }
@@ -116,7 +130,7 @@ class Hits extends Component {
     /*
     *  this function check if 2nd argument is reach end of it
     */
-    itterateLoops(args, length) {
+    iterateLoops(args, length) {
         if (this[args[1]] != length) return;
 
         this[args[0]]++;
@@ -179,25 +193,10 @@ class Hits extends Component {
         );
     }
 
-    /**
-    * Affixes the sidebar.
-    */
-    affixSidebar() {
-        var $sidebar = $('.sidebar');
-        var sidebarOffset = $sidebar.offset();
-        if (sidebarOffset) {
-            $sidebar.affix({
-                offset: {
-                    top: sidebarOffset.top,
-                },
-            });
-        }
-    }
-
     /* eslint complexity: ["error", 6] */
     /* -----------------------------------
     * Event-handler when hit is selected
-    * Adds glow to hit component.
+    * Adds border-seqorange to hit component.
     * Updates number of Fasta that can be downloaded
     */
     selectHit(id) {
@@ -211,13 +210,17 @@ class Hits extends Component {
         // Highlight selected hit and enable 'Download FASTA/Alignment of
         // selected' links.
         if (checkbox.is(':checked')) {
-            $hit.addClass('glow');
-            $hit.next('.hsp').addClass('glow');
+            $hit.addClass('border-seqorange');
+            $hit.next('.hsp').addClass('border-seqorange');
+            $hit.removeClass('border-transparent');
+            $hit.next('.hsp').removeClass('border-transparent');
             $('.download-fasta-of-selected').enable();
             $('.download-alignment-of-selected').enable();
         } else {
-            $hit.removeClass('glow');
-            $hit.next('.hsp').removeClass('glow');
+            $hit.removeClass('border-seqorange');
+            $hit.next('.hsp').removeClass('border-seqorange');
+            $hit.addClass('border-transparent');
+            $hit.next('.hsp').addClass('border-transparent');
             $('.download-fasta-of-selected').attr('href', '#').removeAttr('download');
         }
 
@@ -225,13 +228,17 @@ class Hits extends Component {
         var $b = $('.download-alignment-of-selected');
 
         if (num_checked >= 1) {
-            $a.find('.text-bold').html(num_checked);
-            $b.find('.text-bold').html(num_checked);
+            $a.find('.font-bold').html(num_checked);
+            $b.find('.font-bold').html(num_checked);
+            $a.find('.font-bold').addClass('px-1').removeClass('px-0.5');
+            $b.find('.font-bold').addClass('px-1').removeClass('px-0.5');
         }
 
         if (num_checked == 0) {
-            $a.addClass('disabled').find('.text-bold').html('');
-            $b.addClass('disabled').find('.text-bold').html('');
+            $a.addClass('disabled').find('.font-bold').html('');
+            $b.addClass('disabled').find('.font-bold').html('');
+            $a.find('.font-bold').removeClass('px-1').addClass('px-0.5');
+            $b.find('.font-bold').removeClass('px-1').addClass('px-0.5');
         }
     }
 

data/public/js/hits_overview.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';
@@ -58,13 +58,6 @@ class Graph {
         return hits;
     }
 
-    setupTooltip() {
-        this.svg_container.find('[data-toggle="tooltip"]').tooltip({
-            'placement': 'top', 'container': 'body', 'html': 'true',
-            'delay': 0, 'white-space': 'nowrap'
-        });
-    }
-
     setupClick($graphDiv) {
         $('a', $graphDiv).click(function (evt) {
             evt.preventDefault();
@@ -87,7 +80,7 @@ class Graph {
             $graphDiv
                 .append(
                     $('<button/>')
-                        .addClass('btn btn-link more')
+                        .addClass('btn btn-link text-sm text-seqblue hover:text-seqorange cursor-pointer more')
                         .attr('type', 'button')
                         .attr('data-parent-query', $queryDiv.attr('id'))
                         .html('View More&nbsp;')
@@ -97,7 +90,7 @@ class Graph {
                                 .addClass('fa fa-angle-double-down')
                         ),
                     $('<button/>')
-                        .addClass('btn btn-link less')
+                        .addClass('btn btn-link text-sm text-seqblue hover:text-seqorange cursor-pointer less')
                         .attr('type', 'button')
                         .attr('data-parent-query', $queryDiv.attr('id'))
                         .html('View Less&nbsp;')
@@ -143,7 +136,6 @@ class Graph {
             countHits();
             this.graphIt($queryDiv, $graphDiv, shownHits, MIN_HITS_TO_SHOW, opts, hits);
             initButtons();
-            this.setupTooltip();
             e.stopPropagation();
         },this));
 
@@ -161,7 +153,6 @@ class Graph {
                 this.graphIt($queryDiv, $graphDiv, shownHits, MIN_HITS_TO_SHOW - shownHits, opts, hits);
                 initButtons();
             }
-            this.setupTooltip();
             e.stopPropagation();
         },this));
     }
@@ -262,9 +253,7 @@ class Graph {
             .append('g')
             .attr('transform', 'translate(' + options.margin / 2 + ', ' + (1.5 * options.margin) + ')');
 
-        var x = d3.scale
-            .linear()
-            .range([0, width - options.margin]);
+        var x = d3.scaleLinear().range([0, width - options.margin]);
 
         x.domain([1, queryLen]);
 
@@ -274,10 +263,7 @@ class Graph {
         var _tValues = x.ticks(11);
         _tValues.pop();
 
-        var xAxis = d3.svg
-            .axis()
-            .scale(x)
-            .orient('top')
+        var xAxis = d3.axisBottom(x)
             .tickValues(_tValues.concat([1, queryLen]))
             .tickFormat(formatter);
 
@@ -294,16 +280,14 @@ class Graph {
             .attr('y','2px')
             .attr('transform','rotate(-90)');
 
-        var y = d3.scale
-            .ordinal()
-            .rangeBands([0, height - 3 * options.margin - 2 * options.legend], 0.3);
+        var y = d3.scaleBand()
+            .range([0, height - 3 * options.margin - 2 * options.legend], 0.3);
 
         y.domain(hits.map(function (d) {
             return d.hitId;
         }));
 
-        var gradScale = d3.scale
-            .log()
+        var gradScale = d3.scaleLog()
             .domain([
                 d3.min([1e-5, d3.min(hits.map(function (d) {
                     if (parseFloat(d.hitEvalue) === 0.0) return undefined;
@@ -369,7 +353,6 @@ class Graph {
                         d3.select(this)
                             .attr('xlink:href', '#' + q_i + '_hit_' + (i+1))
                             .append('rect')
-                            .attr('data-toggle', 'tooltip')
                             .attr('title', alt_tooltip)
                             .attr('class','bar')
                             .attr('x', function (d) {
@@ -393,8 +376,6 @@ class Graph {
         if (index === 0) {
             this.graphControls($queryDiv, $graphDiv, true, opts, inhits);
         }
-        // Refresh tooltip each time graph is redrawn.
-        this.setupTooltip();
         // Ensure clicking on 'rect' takes user to the relevant hit on all
         // browsers.
         this.setupClick($graphDiv);