sequenceserver 3.1.1 → 3.1.3

data/public/js/alignment_exporter.js

@@ -1,5 +1,6 @@
 import * as Exporter from './exporter';
 import _ from 'underscore';
+
 export default class AlignmentExporter {
     constructor() {
         this.prepare_alignments_for_export = this.prepare_alignments_for_export.bind(this);
@@ -7,49 +8,36 @@ export default class AlignmentExporter {
     }
 
     wrap_string(str, width) {
-        var idx = 0;
-        var wrapped = '';
-        while(true) {
-            wrapped += str.substring(idx, idx + width);
-            idx += width;
-            if(idx < str.length) {
-                wrapped += '\n';
-            } else {
-                break;
-            }
-        }
-        return wrapped;
+        return str.match(new RegExp(`.{1,${width}}`, 'g')).join('\n');
     }
 
     generate_fasta(hsps) {
+        let fasta = '';
 
-        var fasta = '';
+        hsps.map(hsp => {
+            fasta += `>${hsp.query_id}:${hsp.qstart}-${hsp.qend}\n`;
+            fasta += `${hsp.qseq}\n`;
+            fasta += `>${hsp.query_id}:${hsp.qstart}-${hsp.qend}_alignment_${hsp.hit_id}:${hsp.sstart}-${hsp.send}\n`;
+            fasta += `${hsp.midline}\n`;
+            fasta += `>${hsp.hit_id}:${hsp.sstart}-${hsp.send}\n`;
+            fasta += `${hsp.sseq}\n`;
+        });
 
-        _.each(hsps, _.bind(function (hsp) {
-            fasta += '>'+hsp.query_id+':'+hsp.qstart+'-'+hsp.qend+'\n';
-            fasta += hsp.qseq+'\n';
-            fasta += '>'+hsp.query_id+':'+hsp.qstart+'-'+hsp.qend+'_alignment_'+hsp.hit_id+':'+hsp.sstart+'-'+hsp.send+'\n';
-            fasta += hsp.midline+'\n';
-            fasta += '>'+hsp.hit_id+':'+hsp.sstart+'-'+hsp.send+'\n';
-            fasta += hsp.sseq+'\n';
-        }, this));
         return fasta;
     }
 
     get_alignments_download_metadata(hsps, filename_prefix){
-        var fasta = this.generate_fasta(hsps);
-        var blob = new Blob([fasta], { type: 'text/fasta' });
-        var filename = Exporter.sanitize_filename(filename_prefix) + '.txt';
+        const fasta = this.generate_fasta(hsps);
+        const blob = new Blob([fasta], { type: 'text/fasta' });
+        const filename = Exporter.sanitize_filename(filename_prefix) + '.txt';
         return {filename, blob};
     }
 
-    
     prepare_alignments_for_export(hsps, filename_prefix) {
         const { filename, blob } = this.get_alignments_download_metadata(hsps, filename_prefix);
-        const blob_url = Exporter.generate_blob_url(blob, filename);
-        return blob_url;
+        return Exporter.generate_blob_url(blob, filename);
     }
-    
+
     export_alignments(hsps, filename_prefix) {
         const { filename, blob } = this.get_alignments_download_metadata(hsps, filename_prefix);
         Exporter.download_blob(blob, filename);

data/public/js/cloud_share_modal.js

@@ -28,13 +28,11 @@ export default class CloudShareModal extends React.Component {
     this.setState({ [name]: inputValue });
   }
 
-  handleSubmit = (e) => {
+  handleSubmit = async (e) => {
     e.preventDefault();
 
     const { email } = this.state;
-    const regex = /\/([^/]+)(?:\/|#|\?|$)/;
-    const match = window.location.pathname.match(regex);
-    const jobId = match[1];
+    const jobId = this.getJobIdFromPath();
 
     this.setState({ formState: 'loading' });
 
@@ -43,33 +41,40 @@ export default class CloudShareModal extends React.Component {
       sender_email: email
     };
 
-    fetch('/cloud_share', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(requestData)
-    })
-      .then(response => response.json())
-      .then(data => {
-        if (data.shareable_url) {
-          // Successful response
-          this.setState({ formState: 'results', shareableurl: data.shareable_url });
-        } else if (data.errors) {
-          // Error response with specific error messages
-          const errorMessages = data.errors;
-          this.setState({ formState: 'error', errorMessages });
-        } else {
-          // Generic error message
-          throw new Error('Unknown error submitting form');
-        }
-      })
-      .catch(error => {
-        this.setState({
-          formState: 'error',
-          errorMessages: [error.message]
-        });
+    try {
+      const response = await fetch('/cloud_share', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(requestData)
       });
+
+      if (!response.ok) {
+        throw new Error('Network response was not ok');
+      }
+
+      const data = await response.json();
+
+      if (data.shareable_url) {
+        this.setState({ formState: 'results', shareableurl: data.shareable_url });
+      } else if (data.errors) {
+        this.setState({ formState: 'error', errorMessages: data.errors });
+      } else {
+        throw new Error('Unknown error submitting form');
+      }
+    } catch (error) {
+      this.setState({
+        formState: 'error',
+        errorMessages: [error.message]
+      });
+    }
+  }
+
+  getJobIdFromPath = () => {
+    const regex = /\/([^/]+)(?:\/|#|\?|$)/;
+    const match = window.location.pathname.match(regex);
+    return match ? match[1] : match;
   }
 
   renderLoading() {
@@ -93,18 +98,13 @@ export default class CloudShareModal extends React.Component {
     return (
       <>
         {
-          _.map(
-            errorMessages,
-            _.bind(function (errorMessage) {
-              return (
-                <div className="fastan">
-                  <div className="section-content">
-                    <div className="modal-error">{errorMessage}</div>
-                  </div>
-                </div>
-              );
-            }, this)
-          )
+          errorMessages.map((errorMessage, index) => (
+            <div key={`fastan-${index}`} className="fastan">
+              <div className="section-content">
+                <div className="modal-error">{errorMessage}</div>
+              </div>
+            </div>
+          ))
         }
         {this.renderForm()}
       </>

data/public/js/form.js

@@ -34,6 +34,8 @@ export class Form extends Component {
         this.handleAlgoChanged = this.handleAlgoChanged.bind(this);
         this.handleFormSubmission = this.handleFormSubmission.bind(this);
         this.formRef = createRef();
+        this.query = createRef();
+        this.button = createRef();
         this.setButtonState = this.setButtonState.bind(this);
     }
 
@@ -65,7 +67,7 @@ export class Form extends Component {
              * (if any).
              */
             if (data['query']) {
-                this.refs.query.value(data['query']);
+                this.query.current.value(data['query']);
             }
 
             setTimeout(function () {
@@ -96,7 +98,7 @@ export class Form extends Component {
         evt.preventDefault();
         const form = this.formRef.current;
         const formData = new FormData(form);
-        formData.append('method', this.refs.button.state.methods[0]);
+        formData.append('method', this.button.current.state.methods[0]);
         fetch(window.location.href, {
             method: 'POST',
             body: formData
@@ -118,7 +120,7 @@ export class Form extends Component {
         var database_type = this.databaseType;
         var sequence_type = this.sequenceType;
 
-        if (this.refs.query.isEmpty()) {
+        if (this.query.current.isEmpty()) {
             return [];
         }
 
@@ -165,8 +167,8 @@ export class Form extends Component {
     }
 
     setButtonState() {
-        this.refs.button.setState({
-            hasQuery: !this.refs.query.isEmpty(),
+        this.button.current.setState({
+            hasQuery: !this.query.current.isEmpty(),
             hasDatabases: !!this.databaseType,
             methods: this.determineBlastMethods()
         });
@@ -205,16 +207,16 @@ export class Form extends Component {
                 <form id="blast" ref={this.formRef} onSubmit={this.handleFormSubmission}>
                     <input type="hidden" name="_csrf" value={document.querySelector('meta[name="_csrf"]').content} />
                     <div className="px-4">
-                        <SearchQueryWidget ref="query" onSequenceTypeChanged={this.handleSequenceTypeChanged} onSequenceChanged={this.handleSequenceChanged}/>
+                        <SearchQueryWidget ref={this.query} onSequenceTypeChanged={this.handleSequenceTypeChanged} onSequenceChanged={this.handleSequenceChanged}/>
 
                         {this.useTreeWidget() ?
-                            <DatabasesTree ref="databases"
+                            <DatabasesTree
                                 databases={this.state.databases} tree={this.state.tree}
                                 preSelectedDbs={this.state.preSelectedDbs}
                                 onDatabaseTypeChanged={this.handleDatabaseTypeChanged}
                                 onDatabaseSelectionChanged={this.handleDatabaseSelectionChanged} />
                             :
-                            <Databases ref="databases" databases={this.state.databases}
+                            <Databases databases={this.state.databases}
                                 preSelectedDbs={this.state.preSelectedDbs}
                                 onDatabaseTypeChanged={this.handleDatabaseTypeChanged}
                                 onDatabaseSelectionChanged={this.handleDatabaseSelectionChanged} />
@@ -234,7 +236,7 @@ export class Form extends Component {
                         <label className="block my-4 md:my-2">
                             <input type="checkbox" id="toggleNewTab" /> Open results in new tab
                         </label>
-                        <SearchButton ref="button" onAlgoChanged={this.handleAlgoChanged} />
+                        <SearchButton ref={this.button} onAlgoChanged={this.handleAlgoChanged} />
                     </div>
 
                 </form>
@@ -305,4 +307,4 @@ class MixedNotification extends Component {
             </div>
         );
     }
-}
+}

data/public/js/grapher.js

@@ -17,7 +17,7 @@ export default function Grapher(Graph) {
     return class extends React.Component {
         constructor(props) {
             super(props);
-            this.name = Graph.name();
+            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) };
@@ -30,12 +30,12 @@ export default function Grapher(Graph) {
 
         render() {
             // Do not render when Graph.name() is null
-            if (Graph.name() === null) {
+            if (Graph.name(this.props) === null) {
                 return null;
             } else {
                 var cssClasses = Graph.className() + ' grapher';
                 return (
-                    <div ref="grapher" className={cssClasses}>
+                    <div className={cssClasses}>
                         {this.header()}
                         {this.svgContainerJSX()}
                     </div>
@@ -51,7 +51,7 @@ export default function Grapher(Graph) {
                         onClick={() => this.collapsePreferences.toggleCollapse()}
                     >
                         {this.collapsePreferences.renderCollapseIcon()}
-              &nbsp;{Graph.name()}
+              &nbsp;{Graph.name(this.props)}
                     </h4>
                     {!this.state.collapsed && this.graphLinksJSX()}
                 </div>;

data/public/js/hit.js

@@ -80,14 +80,14 @@ export default class extends Component {
         return `get_sequence/?sequence_ids=${sequenceIDs}&database_ids=${databaseIDs}`;
     }
 
-    downloadFASTA(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(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;
@@ -246,4 +246,4 @@ export default class extends Component {
             </div>
         );
     }
-}
+}

data/public/js/hits.js

@@ -0,0 +1,276 @@
+/* eslint-disable no-unused-vars */
+import { Component } from 'react';
+import _ from 'underscore';
+
+import { ReportQuery } from './query';
+import Hit from './hit';
+import HSP from './hsp';
+import AlignmentExporter from './alignment_exporter';
+/* eslint-enable no-unused-vars */
+
+class Hits extends Component {
+    constructor(props) {
+        super(props);
+        this.numUpdates = 0;
+        this.nextQuery = 0;
+        this.nextHit = 0;
+        this.nextHSP = 0;
+        this.maxHSPs = 3; // max HSPs to render in a cycle
+        this.state = props.state;
+        this.prepareAlignmentOfSelectedHits = this.prepareAlignmentOfSelectedHits.bind(this);
+    }
+
+    componentDidMount() {
+        this.componentDidUpdate(this.props, this.state);
+    }
+
+    /**
+    * 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) {
+        // 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
+            // the updates giving the browser a chance to respond
+            // to user interactions.
+            setTimeout(() => this.updateState(), 25);
+        } else {
+            this.props.componentFinishedUpdating();
+        }
+
+        this.props.plugins.componentDidUpdate(prevProps, prevState);
+    }
+
+    /* eslint complexity: ["error", 6] */
+    /* ---------------------
+    * Push next slice of results to React for rendering.
+    */
+    updateState() {
+        var results = { items: [], numHSPsProcessed: 0 };
+        this.processQueries(results);
+
+        // Push the components to react for rendering.
+        this.numUpdates++;
+        this.lastTimeStamp = Date.now();
+        this.setState({
+            results: this.state.results.concat(results.items),
+            veryBig: this.numUpdates >= 250,
+        });
+    }
+
+    processQueries(results) {
+        while (this.nextQuery < this.state.queries.length) {
+            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
+            // 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));
+            }
+
+            this.processHits(results, query);
+            this.itterateLoops(['nextQuery', 'nextHit'], query.hits.length);
+            if (results.numHSPsProcessed == this.maxHSPs) break;
+        }
+    }
+
+    processHits(results, query) {
+        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
+            // 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);
+            if (results.numHSPsProcessed == this.maxHSPs) break;
+        }
+    }
+
+    processHSPS(results, query, hit) {
+        while (this.nextHSP < hit.hsps.length) {
+            // Get nextHSP and increment the counter.
+            var hsp = hit.hsps[this.nextHSP++];
+            results.items.push(
+                this.renderHsp(query, hit, hsp)
+            );
+            results.numHSPsProcessed++;
+            if (results.numHSPsProcessed == this.maxHSPs) break;
+        }
+    }
+
+    /*
+    *  this function check if 2nd argument is reach end of it
+    */
+    itterateLoops(args, length) {
+        if (this[args[1]] != length) return;
+
+        this[args[0]]++;
+        this[args[1]] = 0;
+    }
+
+    renderHsp(query, hit, hsp) {
+        return (
+            <HSP
+                key={
+                    'Query_' +
+                        query.number +
+                        '_Hit_' +
+                        hit.number +
+                        '_HSP_' +
+                        hsp.number
+                }
+                query={query}
+                hit={hit}
+                hsp={hsp}
+                algorithm={this.state.program}
+                showHSPNumbers={hit.hsps.length > 1}
+                {...this.props}
+            />
+        );
+    }
+
+    renderHit(query, hit) {
+        return (
+            <Hit
+                key={'Query_' + query.number + '_Hit_' + hit.number}
+                query={query}
+                hit={hit}
+                algorithm={this.state.program}
+                querydb={this.state.querydb}
+                selectHit={this.selectHit}
+                imported_xml={this.state.imported_xml}
+                non_parse_seqids={this.state.non_parse_seqids}
+                showQueryCrumbs={this.state.queries.length > 1}
+                showHitCrumbs={query.hits.length > 1}
+                veryBig={this.state.veryBig}
+                onChange={this.prepareAlignmentOfSelectedHits}
+                {...this.props}
+            />
+        );
+    }
+
+    renderReportQuery(query) {
+        return (
+            <ReportQuery
+                key={'Query_' + query.id}
+                query={query}
+                program={this.state.program}
+                querydb={this.state.querydb}
+                showQueryCrumbs={this.state.queries.length > 1}
+                non_parse_seqids={this.state.non_parse_seqids}
+                imported_xml={this.state.imported_xml}
+                veryBig={this.state.veryBig}
+            />
+        );
+    }
+
+    /**
+    * 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.
+    * Updates number of Fasta that can be downloaded
+    */
+    selectHit(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 enable 'Download FASTA/Alignment of
+        // selected' links.
+        if (checkbox.is(':checked')) {
+            $hit.addClass('glow');
+            $hit.next('.hsp').addClass('glow');
+            $('.download-fasta-of-selected').enable();
+            $('.download-alignment-of-selected').enable();
+        } else {
+            $hit.removeClass('glow');
+            $hit.next('.hsp').removeClass('glow');
+            $('.download-fasta-of-selected').attr('href', '#').removeAttr('download');
+        }
+
+        var $a = $('.download-fasta-of-selected');
+        var $b = $('.download-alignment-of-selected');
+
+        if (num_checked >= 1) {
+            $a.find('.text-bold').html(num_checked);
+            $b.find('.text-bold').html(num_checked);
+        }
+
+        if (num_checked == 0) {
+            $a.addClass('disabled').find('.text-bold').html('');
+            $b.addClass('disabled').find('.text-bold').html('');
+        }
+    }
+
+    prepareAlignmentOfSelectedHits() {
+        var sequence_ids = $('.hit-links :checkbox:checked').map(function () {
+            return this.value;
+        }).get();
+
+        if(!sequence_ids.length){
+            // remove attributes from link if sequence_ids array is empty
+            $('.download-alignment-of-selected').attr('href', '#').removeAttr('download');
+            return;
+
+        }
+        if(this.state.alignment_blob_url){
+            // always revoke existing url if any because this method will always create a new url
+            window.URL.revokeObjectURL(this.state.alignment_blob_url);
+        }
+        var hsps_arr = [];
+        var aln_exporter = new AlignmentExporter();
+        const self = this;
+        _.each(this.state.queries, _.bind(function (query) {
+            _.each(query.hits, function (hit) {
+                if (_.indexOf(sequence_ids, hit.id) != -1) {
+                    hsps_arr = hsps_arr.concat(self.props.populate_hsp_array(hit, query.id));
+                }
+            });
+        }, this));
+        const filename = 'alignment-' + sequence_ids.length + '_hits.txt';
+        const blob_url = aln_exporter.prepare_alignments_for_export(hsps_arr, filename);
+        // set required download attributes for link
+        $('.download-alignment-of-selected').attr('href', blob_url).attr('download', filename);
+        // track new url for future removal
+        this.setState({alignment_blob_url: blob_url});
+    }
+
+    render() {
+        return this.state.results;
+    }
+}
+
+export default Hits;

data/public/js/jquery_world.js

@@ -1,5 +1,5 @@
 import $ from 'jquery';
-import '../packages/jquery-ui@1.11.4';
+import '../packages/jquery-ui@1.13.3';
 import 'bootstrap';
 
 global.$ = $;

data/public/js/mailto.js

@@ -5,9 +5,7 @@ export default function asMailtoHref(querydb, program, numQueries, url, isOpenAc
 }
 
 function formatDatabases(querydb) {
-    return querydb
-        .slice(0, 15)
-        .map(db => ' ' + db.title);
+    return querydb ? querydb.slice(0, 15).map(db => ' ' + db.title) : "";
 }
 
 function composeEmail(dbsArr, program, numQueries, url, isOpenAccess) {

data/public/js/null_plugins/report_plugins.js

@@ -1,4 +1,5 @@
 import Histogram from 'histogram';
+import chroma from 'chroma-js';
 
 class ReportPlugins {
     constructor(parent) {

data/public/js/options.js

@@ -110,18 +110,14 @@ export class Options extends Component {
     }
 
     advancedParamsJSX() {
-        if (this.state.paramsMode !== 'advanced') {
-            return null;
-        }
-
-        let classNames = 'flex-grow block px-4 py-1 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 text-base';
+        let classNames = 'flex-grow block px-4 py-1 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 text-base font-mono';
 
         if (this.state.textValue) {
             classNames += ' bg-yellow-100';
         }
 
         return(
-            <div className="w-full">
+             <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

data/public/js/query.js

@@ -348,7 +348,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 text-monospace"
+                        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"
                         name="sequence" value={this.state.value}
                         rows="6"
                         required="required"