sequenceserver 2.0.0 → 2.1.0

data/public/js/grapher.js

@@ -1,7 +1,7 @@
-import _ from 'underscore';
-import React 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,116 +13,123 @@ 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()}
+              &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>
+      );
+    }
 
-    return class extends React.Component {
-        constructor(props) {
-            super(props);
-            this.state = { collapsed: this.props.collapsed };
-        }
-
-        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() }
-                            &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="svgContainer" 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 $(React.findDOMNode(this.refs.svgContainer));
-        }
-
-        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));
-        }
-    };
+    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 () {
+$(window).resize(
+  _.debounce(function () {
     _.each(Graphers, (grapher) => {
-        grapher.draw();
+      grapher.draw();
     });
-}, 125));
+  }, 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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
 import _ from 'underscore';
 
 import HSPOverview from './kablammo';
@@ -8,63 +8,84 @@ import AlignmentExporter from './alignment_exporter'; // to download textual ali
 /**
  * Component for each hit. Receives props from Report. Has no state.
  */
-export default React.createClass({
+export default class extends Component {
+    constructor(props) {
+        super(props);
+        this.accession = this.accession.bind(this);
+        this.sequenceID = this.sequenceID.bind(this);
+        this.hitLength = this.hitLength.bind(this);
+        this.numHSPs = this.numHSPs.bind(this);
+        this.domID = this.domID.bind(this);
+        this.databaseIDs = this.databaseIDs.bind(this);
+        this.showSequenceViewer = this.showSequenceViewer.bind(this);
+        this.viewSequenceLink = this.viewSequenceLink.bind(this);
+        this.downloadFASTA = this.downloadFASTA.bind(this);
+        this.downloadAlignment = this.downloadAlignment.bind(this);
+        this.headerJSX = this.headerJSX.bind(this);
+        this.contentJSX = this.contentJSX.bind(this);
+        this.hitLinks = this.hitLinks.bind(this);
+        this.viewSequenceButton = this.viewSequenceButton.bind(this);
+        this.downloadFASTAButton = this.downloadFASTAButton.bind(this);
+    }
+    shouldComponentUpdate() {
+        return !this.props.hit;
+    }
     /**
-     * Returns accession number of the hit sequence.
-     */
-    accession: function () {
+         * Returns accession number of the hit sequence.
+         */
+    accession() {
         return this.props.hit.accession;
-    },
+    }
 
     /**
      * Returns id of the hit sequence.
      */
-    sequenceID: function () {
+    sequenceID() {
         return this.props.hit.id;
-    },
+    }
 
     /**
      * Returns length of the hit sequence.
      */
-    hitLength: function () {
+    hitLength() {
         return this.props.hit.length;
-    },
+    }
 
-    numHSPs: function () {
+    numHSPs() {
         return this.props.hit.hsps.length;
-    },
+    }
 
     // Internal helpers. //
 
     /**
      * Returns id that will be used for the DOM node corresponding to the hit.
      */
-    domID: function () {
+    domID() {
         return 'Query_' + this.props.query.number + '_hit_' + this.props.hit.number;
-    },
+    }
 
-    databaseIDs: function () {
+    databaseIDs() {
         return _.map(this.props.querydb, _.iteratee('id'));
-    },
+    }
 
-    showSequenceViewer: function () {
+    showSequenceViewer() {
         this.props.showSequenceModal(this.viewSequenceLink());
-    },
+    }
 
-    viewSequenceLink: function () {
+    viewSequenceLink() {
         var sequenceIDs = encodeURIComponent(this.sequenceID());
         var databaseIDs = encodeURIComponent(this.databaseIDs());
         return `get_sequence/?sequence_ids=${sequenceIDs}&database_ids=${databaseIDs}`;
-    },
+    }
 
-    downloadFASTA: function (event) {
+    downloadFASTA(event) {
         var sequenceIDs = [this.sequenceID()];
         downloadFASTA(sequenceIDs, this.databaseIDs());
-    },
+    }
 
     // Event-handler for exporting alignments.
     // Calls relevant method on AlignmentExporter defined in alignment_exporter.js.
-    downloadAlignment: function (event) {
+    downloadAlignment(event) {
         var hsps = _.map(this.props.hit.hsps, _.bind(function (hsp) {
             hsp.query_id = this.props.query.id;
             hsp.hit_id = this.props.hit.id;
@@ -72,27 +93,10 @@ export default React.createClass({
         }, this));
 
         var aln_exporter = new AlignmentExporter();
-        aln_exporter.export_alignments(hsps, this.props.query.id+'_'+this.props.hit.id);
-    },
-
-
-    // Life cycle methods //
-
-    render: function () {
-        return (
-            <div className="hit" 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>
-        );
-    },
-
-    // See Query.shouldComponentUpdate. The same applies for hits.
-    shouldComponentUpdate: function () {
-        return !this.props.hit;
-    },
+        aln_exporter.export_alignments(hsps, this.props.query.id + '_' + this.props.hit.id);
+    }
 
-    headerJSX: function () {
+    headerJSX() {
         var meta = `length: ${this.hitLength().toLocaleString()}`;
 
         if (this.props.showQueryCrumbs && this.props.showHitCrumbs) {
@@ -116,19 +120,19 @@ export default React.createClass({
             </h4>
             <span className="label label-reset pos-label">{meta}</span>
         </div>;
-    },
+    }
 
-    contentJSX: function () {
+    contentJSX() {
         return <div className="section-content" data-parent-hit={this.domID()}>
-            { this.hitLinks() }
+            {this.hitLinks()}
             <HSPOverview key={'kablammo' + this.props.query.id} query={this.props.query}
                 hit={this.props.hit} algorithm={this.props.algorithm}
                 showHSPCrumbs={this.numHSPs() > 1 && this.numHSPs() < 27}
                 collapsed={this.props.veryBig} />
         </div>;
-    },
+    }
 
-    hitLinks: function () {
+    hitLinks() {
         var btns = [];
         if (!(this.props.imported_xml || this.props.non_parse_seqids)) {
             btns = btns.concat([
@@ -144,25 +148,26 @@ export default React.createClass({
                     <input type="checkbox" id={this.domID() + '_checkbox'}
                         value={this.sequenceID()} onChange={function () {
                             this.props.selectHit(this.domID() + '_checkbox');
+                            this.props.onChange();
                         }.bind(this)} data-target={'#' + this.domID()}
                     /> Select
                 </label>
                 {
-                    btns.map((btn) => {
-                        return [<span className="line">|</span>, this.button(btn)];
+                    btns.map((btn, index) => {
+                        return [<span className="line" key={`btn-${index}`}>|</span>, this.button(Object.assign(btn, { key: index }))];
                     })
                 }
                 {
-                    this.props.hit.links.map((link) => {
-                        return [<span className="line">|</span>, this.a(link)];
+                    this.props.hit.links.map((link, index) => {
+                        return [<span className="line" key={`link-${index}`}>|</span>, this.a(link, index)];
                     })
                 }
             </div>
         );
-    },
+    }
 
     // Return JSX for view sequence button.
-    viewSequenceButton: function () {
+    viewSequenceButton() {
         if (this.hitLength() > 10000) {
             return {
                 text: 'Sequence',
@@ -180,51 +185,59 @@ export default React.createClass({
             };
 
         }
-    },
+    }
 
-    downloadFASTAButton: function () {
+    downloadFASTAButton() {
         return {
             text: 'FASTA',
             icon: 'fa-download',
             className: 'download-fa',
             onClick: () => this.downloadFASTA()
         };
-    },
+    }
 
-    downloadAlignmentButton: function () {
+    downloadAlignmentButton() {
         return {
             text: 'Alignment',
             icon: 'fa-download',
             className: 'download-aln',
             onClick: () => this.downloadAlignment()
         };
-    },
+    }
 
-    button: function ({text, icon, title, className, onClick}) {
+    button({ text, icon, title, className, onClick, key }) {
         if (onClick) {
-            return <button className={`btn-link ${className}`}
+            return <button key={key} className={`btn-link ${className}`}
                 title={title} onClick={onClick}><i className={`fa ${icon}`}></i> {text}
             </button>;
         }
         else {
-            return <button className="btn-link view-sequence disabled"
-                title={title} disabled="true">
+            return <button key={key} className="btn-link view-sequence disabled"
+                title={title} disabled={true}>
                 <i className={`fa ${icon}`}></i> {text}
             </button>;
         }
-    },
+    }
 
     /**
      * Render URL for sequence-viewer.
      */
-    a: function (link) {
+    a(link, key) {
         if (!link.title || !link.url) return;
 
         let className = 'btn btn-link';
         if (link.class) className = `${className} ${link.class}`;
-        return <a href={link.url} className={className} target='_blank'>
+        return <a href={link.url} key={`${link.url}-${key}`} className={className} target='_blank'>
             {link.icon && <i className={'fa ' + link.icon}></i>}
             {' ' + link.title + ' '}
         </a>;
     }
-});
+    render() {
+        return (
+            <div className="hit" 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_overview.js

@@ -24,8 +24,8 @@ class Graph {
 
     constructor($svgContainer, props) {
         this.svg_container = $svgContainer;
-        $queryDiv = $svgContainer.parents('.resultn');
-        hits = this.extractData(props.query.hits, props.query.number);
+        var $queryDiv = $svgContainer.parents('.resultn');
+        var hits = this.extractData(props.query.hits, props.query.number);
         this.graphIt($queryDiv, $svgContainer, 0, 20, null, hits);
     }