sequenceserver 3.1.2 → 3.2.0

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/circos.js

@@ -1,5 +1,5 @@
-import d3 from 'd3';
-import Circos from '../packages/circosJS@1.7.0';
+import * as d3 from 'd3';
+import Circos from './circosjs';
 import _ from 'underscore';
 
 import Grapher from 'grapher';
@@ -37,52 +37,55 @@ class Graph {
         this.svgContainer = $svgContainer;
         this.seq_type = Helpers.get_seq_type(props.program);
         this.algorithm = props.program;
-        this.initiate();
-    }
-
-    initiate() {
-    // this.width = 700;
+        // Initialize dimensions
         this.width = this.svgContainer.width();
         this.height = 600;
         this.innerRadius = 200;
         this.outerRadius = 230;
+
+        // Initialize data arrays
         this.query_arr = [];
         this.hit_arr = [];
         this.layout_arr = [];
         this.chords_arr = [];
-        // this.max_length = 0;
+
+        // Initialize other properties
         this.hsp_count = 50;
         this.denominator = 1;
         this.spacing = 20;
         this.labelSpacing = 10;
-        var suffixes = { amino_acid: 'aa', nucleic_acid: 'bp' };
+        this.initiate();
+    }
+
+    initiate() {
+        // Call initialization methods
         this.construct_layout();
         this.iterator_for_edits();
+
+        // Remove duplicate hits
         this.hit_arr = _.uniq(this.hit_arr);
+
+        // Handle spacing
         this.handle_spacing();
-        var prefix = d3.formatPrefix(this.max_length);
-        this.suffix =
-      ' ' + prefix.symbol + suffixes[this.seq_type.subject_seq_type];
-        if (prefix.symbol == 'k') {
-            this.denominator = 1000;
-        } else if (prefix.symbol == 'M') {
-            this.denominator = 1000000;
-            this.spacing = 1000000;
-            this.labelSpacing = 200000;
-        } else if (prefix.symbol == 'g') {
-            this.denominator = 1000000000;
-        }
+
+        // Insert the circos container
         d3.select(this.svgContainer[0])
-            .insert('svg', ':first-child')
+            .insert('div', ':first-child')
             .attr('class', 'circosContainer');
+
+        // Create the instance
         this.create_instance(this.svgContainer, this.width, this.height);
+
+        // Render the instance or show an error
         if (this.chords_arr.length && this.layout_arr.length) {
             this.instance_render();
         } else {
             this.render_error();
         }
+
+        // Setup the tooltip
         this.setupTooltip();
-    // this.drawLegend();
+        // this.drawLegend();
     }
 
     iterator_for_edits() {
@@ -94,71 +97,64 @@ class Graph {
 
     // Generate both layout_arr and chords_arr with top hsps set by this.hsp_count
     construct_layout() {
-        var hsp_count = 0;
-        var query_count = 0;
         var num_karyotype = 32;
         var num_queries = this.queries.length;
         var x = Math.min(num_karyotype / 2, num_queries);
         var num_hits = (num_karyotype - x) / x;
         this.new_layout = [];
-        this.data = _.map(
-            this.queries,
-            _.bind(function (query) {
-                if (query_count < x) {
-                    var label = query.id;
-                    var len = query.length;
-                    var item1 = {
-                        len: len,
-                        color: '#8dd3c7',
-                        label: label,
-                        id: 'Query_' + this.clean_id(query.id),
-                        ori_id: label,
-                    };
-                    this.layout_arr.push(item1);
-                    var hit_details = _.map(
-                        query.hits,
-                        _.bind(function (hit) {
-                            if (hit.number < num_hits) {
-                                var hsp_details = _.map(
-                                    hit.hsps,
-                                    _.bind(function (hsp) {
-                                        if (_.indexOf(this.hit_arr, hit.id) == -1) {
-                                            var label = hit.id;
-                                            var len = hit.length;
-                                            this.hit_arr.push(hit.id);
-                                            var item2 = {
-                                                len: len,
-                                                color: '#80b1d3',
-                                                label: label,
-                                                id: 'Hit_' + this.clean_id(hit.id),
-                                                ori_id: label,
-                                            };
-                                            this.layout_arr.push(item2);
-                                        }
-
-                                        var item3 = [
-                                            'Query_' + this.clean_id(query.id),
-                                            hsp.qstart,
-                                            hsp.qend,
-                                            'Hit_' + this.clean_id(hit.id),
-                                            hsp.sstart,
-                                            hsp.send,
-                                            hit.number,
-                                            hsp,
-                                        ];
-                                        this.chords_arr.push(item3);
-                                        return hsp;
-                                    }, this)
-                                );
-                                return hit;
-                            }
-                        }, this)
-                    );
-                }
-                this.query_arr.push(query.id);
-                return query;
-            }, this)
-        );
+        this.data = _.map(this.queries, _.bind(this.processQuery, this, x, num_hits));
+    }
+
+    processQuery(x, num_hits, query) {
+        if (this.query_arr.length < x) {
+            var label = query.id;
+            var len = query.length;
+            var item1 = {
+                len: len,
+                color: '#8dd3c7',
+                label: label,
+                id: 'Query_' + this.clean_id(query.id),
+                ori_id: label,
+            };
+            this.layout_arr.push(item1);
+            _.map(query.hits, _.bind(this.processHit, this, num_hits, query));
+        }
+        this.query_arr.push(query.id);
+        return query;
+    }
+
+    processHit(num_hits, query, hit) {
+        if (hit.number < num_hits) {
+            if (_.indexOf(this.hit_arr, hit.id) == -1) {
+                var label = hit.id;
+                var len = hit.length;
+                this.hit_arr.push(hit.id);
+                var item2 = {
+                    len: len,
+                    color: '#80b1d3',
+                    label: label,
+                    id: 'Hit_' + this.clean_id(hit.id),
+                    ori_id: label,
+                };
+                this.layout_arr.push(item2);
+            }
+            _.map(hit.hsps, _.bind(this.processHSP, this, query, hit));
+        }
+        return hit;
+    }
+
+    processHSP(query, hit, hsp) {
+        this.chords_arr.push([
+            'Query_' + this.clean_id(query.id),
+            hsp.qstart,
+            hsp.qend,
+            'Hit_' + this.clean_id(hit.id),
+            hsp.sstart,
+            hsp.send,
+            hit.number,
+            hsp,
+        ]);
+        return hsp;
     }
 
     // rearraging hit and query karyotypes to have all query in one place
@@ -349,7 +345,6 @@ class Graph {
             this.paletteSize = this.chords_arr.length;
         }
         return {
-            usePalette: true,
             colorPaletteSize: this.paletteSize,
             // color: 'rgb(0,0,0)',
             colorPalette: 'RdYlBu', // colors of chords based on last value in chords
@@ -373,7 +368,7 @@ class Graph {
                 spacing: this.spacing, // the ticks values to display
                 labelSpacing: this.labelSpacing, // ticks value apper in interval
                 labelDenominator: this.denominator, // divide the value by this value
-                labelSuffix: this.suffix,
+                labelSuffix: '',
                 labelSize: '10px',
                 majorSpacing: this.labelSpacing, // major ticks apper in interval
                 size: {
@@ -493,7 +488,6 @@ class Graph {
                 this.layoutHide = [];
                 if (id) {
                     $('.circos .Query_' + this.clean_id(id))
-                        .attr('data-toggle', 'tooltip')
                         .attr('title', id)
                         .on(
                             'click',
@@ -523,7 +517,6 @@ class Graph {
                 this.layoutHide = [];
                 if (id) {
                     $('.circos .Hit_' + this.clean_id(id))
-                        .attr('data-toggle', 'tooltip')
                         .attr('title', id)
                         .on(
                             'click',
@@ -549,7 +542,6 @@ class Graph {
         var algorithm = this.algorithm;
         _.each(this.chords_arr, function (obj) {
             $('#' + obj[0] + '_' + obj[3])
-                .attr('data-toggle', 'tooltip')
                 .attr('title', function () {
                     // E value and identity.
                     var alt_tooltip =
@@ -574,12 +566,28 @@ class Graph {
                     return alt_tooltip;
                 });
         });
-        $('[data-toggle="tooltip"]').tooltip({
-            placement: 'top',
-            container: 'body',
-            html: 'true',
-            delay: 0,
-            'white-space': 'nowrap',
+        $('.circos').tooltip({
+            position: {
+                my: 'left+3 bottom-3',
+                at: 'right bottom',
+                using: function(position, feedback) {
+                  $(this).css(position);
+                  $('<div>')
+                    .addClass('arrow')
+                    .addClass(feedback.vertical)
+                    .addClass(feedback.horizontal)
+                    .appendTo(this);
+                }
+            },
+            items: '.chord1 path, .cs-layout g',
+            show: false,
+            hide: false,
+            content: function() {
+                var title = $(this).attr('title');
+                if (!title) return false;
+                var parsedHTML = $.parseHTML(title);
+                return parsedHTML;
+            }
         });
     }
 
@@ -658,7 +666,6 @@ class Graph {
                     return 'q' + s + '-' + this.paletteSize;
                 }, this)
             )
-            .attr('data-toggle', 'tooltip')
             .attr('title', function (d) {
                 return d.evalue;
             })
@@ -667,7 +674,7 @@ class Graph {
             .attr('height', 20);
         // .attr('fill','#43ff21');
 
-        var scale = d3.scale.linear().domain([0, 250]).range([0, 100]);
+        var scale = d3.scaleLinear().domain([0, 250]).range([0, 100]);
 
         // this.legend.append('rect')
         //     .attr('x', 7*14)