genoverse 3.2.0 → 4.0.1

package/{js → src/js}/Track/library/Scalebar.js

@@ -1,4 +1,7 @@
-Genoverse.Track.Scalebar = Genoverse.Track.extend({
+import RTree from 'rtree';
+import Track from '../../Track';
+
+export default Track.extend({
   unsortable     : true,
   fixedOrder     : true,
   order          : 0,
@@ -15,18 +18,18 @@ Genoverse.Track.Scalebar = Genoverse.Track.extend({
   labels         : true,
   bump           : false,
   resizable      : false,
-  click          : $.noop,
+  click          : () => {},
   colors         : {
     majorGuideLine : '#CCCCCC',
-    minorGuideLine : '#E5E5E5'
+    minorGuideLine : '#E5E5E5',
   },
 
   setEvents: function () {
-    var browser = this.browser;
+    const browser = this.browser;
 
     function resize() {
-      $('.gv-bg.gv-full-height', browser.container).height(function () {
-        return browser.wrapper.outerHeight(true) - $(this).parents('.gv-track-container').position().top;
+      browser.jQuery('.gv-bg.gv-full-height', browser.container).height(function () {
+        return browser.wrapper.outerHeight(true) - browser.jQuery(this).parents('.gv-track-container').position().top;
       });
     }
 
@@ -35,34 +38,38 @@ Genoverse.Track.Scalebar = Genoverse.Track.extend({
   },
 
   setScale: function () {
-    var max       = this.prop('width') / this.prop('minPixPerMajor');
-    var divisor   = 5;
-    var majorUnit = -1;
-    var fromDigit = ('' + this.browser.start).split(''); // Split into array of digits
-    var toDigit   = ('' + this.browser.end).split('');
-    var features  = {};
-    var divisions, i;
-
-    for (i = fromDigit.length; i < toDigit.length; i++) {
+    const max = this.prop('width') / this.prop('minPixPerMajor');
+
+    let divisor   = 5;
+    let majorUnit = -1;
+
+    const fromDigit = `${this.browser.start}`.split(''); // Split into array of digits
+    const toDigit   = `${this.browser.end}`.split('');
+    const features  = {};
+
+    let divisions;
+
+    for (let i = fromDigit.length; i < toDigit.length; i++) {
       fromDigit.unshift('0');
     }
 
-    for (i = toDigit.length; i < fromDigit.length; i++) {
+    for (let i = toDigit.length; i < fromDigit.length; i++) {
       toDigit.unshift('0');
     }
 
     // How many divisions would there be if we only kept i digits?
-    for (i = 0; i < fromDigit.length; i++) {
-      divisions = parseInt(toDigit.slice(0, fromDigit.length - i).join(''), 10) - parseInt(fromDigit.slice(0, fromDigit.length - i).join(''), 10);
+    for (let i = 0; i < fromDigit.length; i++) {
+      divisions = Number(toDigit.slice(0, fromDigit.length - i).join('')) - Number(fromDigit.slice(0, fromDigit.length - i).join(''));
 
       if (divisions && divisions <= max) {
-        majorUnit = parseInt('1' + $.map(new Array(i), function () { return '0'; }).join(''), 10);
+        majorUnit = Number(`1${Array(i).fill('0').join('')}`);
+
         break;
       }
     }
 
     if (majorUnit === -1) {
-      majorUnit = this.browser.length === 1 ? 1 : parseInt('1' + $.map(new Array(fromDigit.length), function () { return '0'; }).join(''), 10);
+      majorUnit = this.browser.length === 1 ? 1 : Number(`1${Array(fromDigit.length).fill('0').join('')}`);
       divisor   = 1;
     } else if (divisions * 5 <= max) { // Improve things by trying simple multiples of 1<n zeroes>. (eg if 100 will fit will 200, 400, 500).
       majorUnit /= 5;
@@ -88,16 +95,18 @@ Genoverse.Track.Scalebar = Genoverse.Track.extend({
   },
 
   setFeatures: function (chr, start, end) {
-    var minorUnit = this.prop('minorUnit');
-    var majorUnit = this.prop('majorUnit');
-    var seen      = this.prop('seen');
+    const minorUnit = this.prop('minorUnit');
+    const majorUnit = this.prop('majorUnit');
+    const seen      = this.prop('seen');
 
     start = Math.max(start - (start % minorUnit) - majorUnit, 0);
 
-    var flip = (start / minorUnit) % 2 ? 1 : -1;
-    var feature, major, label;
+    let flip = (start / minorUnit) % 2 ? 1 : -1;
+    let feature;
+    let major;
+    let label;
 
-    for (var x = start; x < end + minorUnit; x += minorUnit) {
+    for (let x = start; x < end + minorUnit; x += minorUnit) {
       flip *= -1;
 
       if (seen[x]) {
@@ -106,7 +115,7 @@ Genoverse.Track.Scalebar = Genoverse.Track.extend({
 
       seen[x] = 1;
 
-      feature = { id: chr + ':' + x, chr: chr, strand: 1, sort: x };
+      feature = { id: `${chr}:${x}`, chr: chr, strand: 1, sort: x };
       major   = x && x % majorUnit === 0;
 
       if (flip === 1) {
@@ -136,11 +145,11 @@ Genoverse.Track.Scalebar = Genoverse.Track.extend({
   },
 
   makeFirstImage: function (moveTo) {
-    if (this.prop('strand') === -1) {
-      moveTo = this.track.forwardTrack.prop('scrollStart');
-    }
-
-    return this.base(moveTo);
+    return this.base(
+      this.prop('strand') === -1
+        ? this.track.forwardTrack.prop('scrollStart')
+        : moveTo
+    );
   },
 
   makeImage: function (params) {
@@ -149,7 +158,7 @@ Genoverse.Track.Scalebar = Genoverse.Track.extend({
 
     this.track.setFeatures(params.chr, params.start, params.end);
 
-    var rtn = this.base(params);
+    const rtn = this.base(params);
 
     params.container.addClass('gv-full-height');
 
@@ -167,10 +176,13 @@ Genoverse.Track.Scalebar = Genoverse.Track.extend({
   },
 
   draw: function (features, featureContext, labelContext, scale) {
-    var i         = features.length;
-    var minorUnit = this.prop('minorUnit');
-    var width     = Math.ceil(minorUnit * scale);
-    var feature, start, end;
+    const minorUnit = this.prop('minorUnit');
+    const width     = Math.ceil(minorUnit * scale);
+
+    let i = features.length;
+    let feature;
+    let start;
+    let end;
 
     featureContext.textBaseline = 'top';
     featureContext.fillStyle    = this.color;
@@ -182,12 +194,18 @@ Genoverse.Track.Scalebar = Genoverse.Track.extend({
       start   = Math.round(feature.position[scale].X);
       end     = start + width - 1;
 
-      this.drawFeature($.extend({}, feature, {
-        x      : start,
-        y      : 0,
-        width  : Math.ceil(feature.position[scale].width),
-        height : this.featureHeight
-      }), featureContext, labelContext, scale);
+      this.drawFeature(
+        {
+          ...feature,
+          x      : start,
+          y      : 0,
+          width  : Math.ceil(feature.position[scale].width),
+          height : this.featureHeight,
+        },
+        featureContext,
+        labelContext,
+        scale
+      );
 
       if (feature.label) {
         if (start > -1) {
@@ -213,15 +231,17 @@ Genoverse.Track.Scalebar = Genoverse.Track.extend({
 
   // Draw guidelines
   drawBackground: function (f, context) {
-    for (var i in this.guideLines) {
-      if (this.guideLines[i] >= 0 && this.guideLines[i] <= this.width) {
-        context.fillStyle = this.track.colors[this.guideLines.major[i] ? 'majorGuideLine' : 'minorGuideLine'];
-        context.fillRect(this.guideLines[i], 0, 1, context.canvas.height);
+    Object.entries(this.guideLines).forEach(
+      ([ key, value ]) => {
+        if (value >= 0 && value <= this.width) {
+          context.fillStyle = this.track.colors[this.guideLines.major[key] ? 'majorGuideLine' : 'minorGuideLine'];
+          context.fillRect(value, 0, 1, context.canvas.height);
+        }
       }
-    }
+    );
   },
 
   formatLabel: function (label) {
     return this.prop('minorUnit') < 1000 ? label.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') : this.base(label);
-  }
+  },
 });

package/{js → src/js}/Track/library/Scaleline.js

@@ -1,4 +1,6 @@
-Genoverse.Track.Scaleline = Genoverse.Track.Static.extend({
+import Track from './Static';
+
+export default Track.extend({
   strand     : 1,
   color      : '#000000',
   height     : 12,
@@ -7,11 +9,11 @@ Genoverse.Track.Scaleline = Genoverse.Track.Static.extend({
   fixedOrder : true,
   arrowWidth : 7,
 
-  resize: $.noop,
+  resize: () => {},
 
-  makeFirstImage: function () {
+  makeFirstImage: function (...args) {
     this.prop('scaleline', false);
-    this.base.apply(this, arguments);
+    this.base(...args);
   },
 
   render: function (f, img) {
@@ -20,7 +22,7 @@ Genoverse.Track.Scaleline = Genoverse.Track.Static.extend({
   },
 
   positionFeatures: function (features, params) {
-    var scaleline = this.prop('scaleline');
+    let scaleline = this.prop('scaleline');
 
     if (params.scale === this.drawnScale) {
       return false;
@@ -30,19 +32,19 @@ Genoverse.Track.Scaleline = Genoverse.Track.Static.extend({
       return scaleline;
     }
 
-    var strand     = this.prop('strand');
-    var height     = this.prop('height');
-    var text       = this.formatLabel(this.browser.length);
-    var width      = this.context.measureText(text).width;
-    var textMargin = 10; // 5px each side
-    var y          = height / 2;
-    var x1         = 0;
-    var x2         = (this.width - width - textMargin) / 2;
+    const strand     = this.prop('strand');
+    const height     = this.prop('height');
+    const text       = this.formatLabel(this.browser.length);
+    const width      = this.context.measureText(text).width;
+    const textMargin = 10; // 5px each side
+    const y          = height / 2;
+    const x1         = 0;
+    const x2         = (this.width - width - textMargin) / 2;
 
     if (strand) {
-      var strandText  = strand === 1 ? 'Forward strand' : 'Reverse strand';
-      var strandWidth = this.context.measureText(strandText).width;
-      var x3          = (
+      const strandText  = strand === 1 ? 'Forward strand' : 'Reverse strand';
+      const strandWidth = this.context.measureText(strandText).width;
+      const x3          = (
         strand === 1
           ? this.width - this.prop('arrowWidth') - strandWidth - (1.5 * textMargin)
           : this.prop('arrowWidth') + (0.5 * textMargin)
@@ -51,12 +53,12 @@ Genoverse.Track.Scaleline = Genoverse.Track.Static.extend({
       scaleline = [
         { x: x1, y: y, width: this.width,               height: 1, decorations: true },
         { x: x2, y: 0, width: width       + textMargin, height: height, clear: true, color: false, labelColor: this.color, labelWidth: width,       label: text       },
-        { x: x3, y: 0, width: strandWidth + textMargin, height: height, clear: true, color: false, labelColor: this.color, labelWidth: strandWidth, label: strandText }
+        { x: x3, y: 0, width: strandWidth + textMargin, height: height, clear: true, color: false, labelColor: this.color, labelWidth: strandWidth, label: strandText },
       ];
     } else {
       scaleline = [
         { x: x1, y: y, width: this.width,         height: 1, decorations: true },
-        { x: x2, y: 0, width: width + textMargin, height: height, clear: true, color: false, labelColor: this.color, labelWidth: width, label: text }
+        { x: x2, y: 0, width: width + textMargin, height: height, clear: true, color: false, labelColor: this.color, labelWidth: width, label: text },
       ];
     }
 
@@ -64,19 +66,19 @@ Genoverse.Track.Scaleline = Genoverse.Track.Static.extend({
   },
 
   decorateFeature: function (feature, context) {
-    var strand     = this.prop('strand');
-    var height     = this.prop('height');
-    var arrowWidth = this.prop('arrowWidth');
-    var width      = this.width;
+    const strand     = this.prop('strand');
+    const height     = this.prop('height');
+    const arrowWidth = this.prop('arrowWidth');
+    const width      = this.width;
 
     context.strokeStyle = this.color;
 
     [ -1, 1 ].filter(
-      function (dir) { return strand ? dir === strand : true; }
+      dir => (strand ? dir === strand : true)
     ).forEach(
-      function (dir) {
-        var x1 = dir === 1 ? width - arrowWidth : arrowWidth;
-        var x2 = x1 + (dir * arrowWidth);
+      (dir) => {
+        const x1 = dir === 1 ? width - arrowWidth : arrowWidth;
+        const x2 = x1 + (dir * arrowWidth);
 
         context.beginPath();
         context.moveTo(x1, height * 0.25);
@@ -87,5 +89,5 @@ Genoverse.Track.Scaleline = Genoverse.Track.Static.extend({
         context.fill();
       }
     );
-  }
+  },
 });

package/src/js/Track/library/Static.js

@@ -0,0 +1,82 @@
+import Track, { Controller as TrackController, Model as TrackModel, View as TrackView } from '../../Track';
+
+const Controller = TrackController.extend({
+  addDomElements: function () {
+    this.base();
+
+    this.image = this.browser.jQuery('<img>').appendTo(this.imgContainer);
+
+    this.container.toggleClass('gv-track-container gv-track-container-static').prepend(this.imgContainer);
+    this.scrollContainer.add(this.messageContainer).remove();
+  },
+
+  reset: function (...args) {
+    delete this.stringified;
+    this.base(...args);
+  },
+
+  setWidth: function (width) {
+    this.base(width);
+    this.image.width = this.width;
+  },
+
+  makeFirstImage: function (...args) {
+    this.base(...args);
+    this.container.css('left', 0);
+    this.imgContainer.show();
+  },
+
+  makeImage: function (params) {
+    if (this.prop('disabled')) {
+      return this.browser.jQuery.Deferred().resolve();
+    }
+
+    const features = this.view.positionFeatures(this.model.findFeatures(params.chr, params.start, params.end), params);
+
+    if (features) {
+      const string = JSON.stringify(features);
+
+      if (this.stringified !== string) {
+        const height = this.prop('height');
+
+        params.width         = this.width;
+        params.featureHeight = height;
+
+        this.render(features, this.image.data(params));
+        this.imgContainer.children(':last').show();
+        this.resize(height, undefined, false);
+
+        this.stringified = string;
+      }
+    }
+
+    return this.browser.jQuery.Deferred().resolve();
+  },
+});
+
+const Model = TrackModel.extend({
+  url            : false,
+  checkDataRange : () => true,
+});
+
+const View = TrackView.extend({
+  featureMargin   : { top: 0, right: 1, bottom: 0, left: 1 },
+  positionFeature : () => {},
+  scaleFeatures   : features => features,
+
+  draw: function (features, featureContext, labelContext, scale) {
+    features.forEach(
+      feature => this.drawFeature(feature, featureContext, labelContext, scale)
+    );
+  },
+});
+
+export default Track.extend({
+  controls   : 'off',
+  resizable  : false,
+  controller : Controller,
+  model      : Model,
+  view       : View,
+});
+
+export { Controller, Model, View };

package/{js → src/js}/Track/library/dbSNP.js

@@ -1,4 +1,7 @@
-Genoverse.Track.dbSNP = Genoverse.Track.extend({
+import Track  from '../../Track';
+import Legend from './Legend';
+
+export default Track.extend({
   id               : 'dbSNP',
   name             : 'dbSNP',
   info             : 'All sequence variants from the database of Single Nucleotide Polymorphisms (dbSNP)',
@@ -6,7 +9,7 @@ Genoverse.Track.dbSNP = Genoverse.Track.extend({
   dataRequestLimit : 5000000, // As per e! REST API restrictions
   threshold        : 1e5,
   labels           : false,
-  legend           : true,
+  legend           : Legend,
   autoHeight       : true,
   colorMap         : {
     transcript_ablation                : '#ff0000',
@@ -43,7 +46,7 @@ Genoverse.Track.dbSNP = Genoverse.Track.extend({
     feature_elongation                 : '#7f7f7f',
     regulatory_region_variant          : '#a52a2a',
     feature_truncation                 : '#7f7f7f',
-    intergenic_variant                 : '#636363'
+    intergenic_variant                 : '#636363',
   },
 
   insertFeature: function (feature) {
@@ -71,61 +74,56 @@ Genoverse.Track.dbSNP = Genoverse.Track.extend({
   },
 
   populateMenu: function (feature) {
-    var deferred = $.Deferred();
-    var menu     = [{
-      title       : '<a href="https://www.ensembl.org/Homo_sapiens/Variation/Summary?v=' + feature.id + '" target="_blank">' + feature.id + '</a>',
-      Location    : feature.chr + ':' + feature.start + '-' + feature.end,
+    const deferred = this.browser.jQuery.Deferred();
+    const menu     = [{
+      title       : `<a href="https://www.ensembl.org/Homo_sapiens/Variation/Summary?v=${feature.id}" target="_blank">${feature.id}</a>`,
+      Location    : `${feature.chr}:${feature.start}-${feature.end}`,
       Consequence : feature.consequence_type,
-      Alleles     : feature.alleles.join(', ')
+      Alleles     : feature.alleles.join(', '),
     }];
 
-    $.ajax({
-      url      : '//rest.ensembl.org/variation/human/' + feature.id + '?population_genotypes=1;content-type=application/json',
+    this.browser.jQuery.ajax({
+      url      : `//rest.ensembl.org/variation/human/${feature.id}?population_genotypes=1;content-type=application/json`,
       dataType : 'json',
       success  : function (data) {
-        var populationGenotypes = $.grep(data.population_genotypes, function (pop) { return /1000GENOMES.+ALL/.test(pop.population); }); // Only considering 1000 Genomes: ALL population
-        var frequencies         = {};
-        var pop, i, j;
+        const populationGenotypes = data.population_genotypes.filter(pop => /1000GENOMES.+ALL/.test(pop.population)); // Only considering 1000 Genomes: ALL population
+        const frequencies         = {};
 
         if (populationGenotypes.length) {
-          for (i = 0; i < populationGenotypes.length; i++) {
-            pop           = populationGenotypes[i];
-            pop.frequency = parseFloat(pop.frequency, 10);
-            pop.count     = parseInt(pop.count, 10);
-
-            frequencies[pop.population] = frequencies[pop.population] || [];
-            frequencies[pop.population].push(pop);
-          }
-
-          for (i in frequencies) {
-            frequencies[i].sort(function (a, b) { return a.count < b.count; });
+          populationGenotypes.forEach(
+            (pop) => {
+              pop.frequency = parseFloat(pop.frequency, 10);
+              pop.count     = parseInt(pop.count, 10);
 
-            pop = {
-              title    : i + ' population genotypes',
-              Genotype : [ 'Frequency', 'Count' ],
-              start    : false,
-              end      : false
-            };
-
-            for (j in frequencies[i]) {
-              pop[frequencies[i][j].genotype] = [ (frequencies[i][j].frequency * 100).toFixed(2) + '%', frequencies[i][j].count ];
+              frequencies[pop.population] = frequencies[pop.population] || [];
+              frequencies[pop.population].push(pop);
             }
-
-            menu.push(pop);
-          }
-
-          pop = {
-            start : false,
-            end   : false
-          };
-
-          pop['<a href="https://www.ensembl.org/Homo_sapiens/Variation/Population?v=' + feature.id + '" target="_blank">See all population genotypes</a>'] = '';
-
-          menu.push(pop);
+          );
+
+          menu.push(
+            ...Object.entries(frequencies).map(
+              ([ key, values ]) => values.sort(
+                (a, b) => a.count < b.count
+              ).reduce(
+                (acc, row) => Object.assign(acc, { [row.genotype]: [ `${(row.frequency * 100).toFixed(2)}%`, row.count ] }),
+                {
+                  title    : `${key} population genotypes`,
+                  Genotype : [ 'Frequency', 'Count' ],
+                  start    : false,
+                  end      : false,
+                }
+              )
+            ),
+            {
+              start                                                                                                                                    : false,
+              end                                                                                                                                      : false,
+              [`<a href="https://www.ensembl.org/Homo_sapiens/Variation/Population?v=${feature.id}" target="_blank">See all population genotypes</a>`] : '',
+            }
+          );
         }
 
         deferred.resolve(menu);
-      }
+      },
     });
 
     return deferred;
@@ -133,10 +131,9 @@ Genoverse.Track.dbSNP = Genoverse.Track.extend({
 
   // Different settings for different zoom level
   5000: { // more than 5k
-    bump: false
+    bump: false,
   },
   1: { // > 1 base-pair, but less then 5k
-    bump: true
-  }
-
+    bump: true,
+  },
 });