genoverse 3.2.0 → 4.0.0-beta1

package/{js → src/js}/Track/Controller.js

@@ -1,12 +1,22 @@
-Genoverse.Track.Controller = Base.extend({
+import Base          from 'basejs';
+import wrapFunctions from '../lib/wrap-functions';
+
+export default Base.extend({
   scrollBuffer   : 1.2,      // Number of widths, if left or right closer to the edges of viewpoint than the buffer, start making more images
   threshold      : Infinity, // Length above which the track is not drawn
   clickTolerance : 0,        // pixels of tolerance added to a click position when finding features for popup menus, when scale < 1
   messages       : undefined,
 
   constructor: function (properties) {
-    $.extend(this, properties);
-    Genoverse.wrapFunctions(this);
+    Object.entries(properties).forEach(
+      ([ key, val ]) => {
+        if (typeof val !== 'undefined') {
+          this[key] = val;
+        }
+      }
+    );
+
+    wrapFunctions(this, 'Controller');
     this.init();
   },
 
@@ -24,17 +34,17 @@ Genoverse.Track.Controller = Base.extend({
     this.messages    = this.messages || {
       error     : 'ERROR: ',
       threshold : 'Data for this track is not displayed in regions greater than ',
-      resize    : 'Some features are currently hidden, <a class="gv-resize">resize to see all</a>'
+      resize    : 'Some features are currently hidden, <a class="gv-resize">resize to see all</a>',
     };
   },
 
-  reset: function () {
+  reset: function (arg) {
     this.abort();
     this.setDefaults();
     this.resetImages();
     this.browser.closeMenus(this);
 
-    if (arguments[0] !== 'resizing') {
+    if (arg !== 'resizing') {
       this.setScale();
       this.makeFirstImage();
     }
@@ -46,7 +56,7 @@ Genoverse.Track.Controller = Base.extend({
   },
 
   resetImageRanges: function () {
-    var browser = this.browser;
+    const browser = this.browser;
 
     this.left        = 0;
     this.scrollStart = [ 'ss', browser.chr, browser.start, browser.end ].join('-');
@@ -57,11 +67,11 @@ Genoverse.Track.Controller = Base.extend({
 
   setName: function (name, configName) {
     this.track.name = name;
-    this.labelName  = this.labelName || $('<span class="gv-name">').appendTo(this.label);
+    this.labelName  = this.labelName || this.browser.jQuery('<span class="gv-name">').appendTo(this.label);
 
     this.labelName.attr('title', name).html(
       configName && configName.length
-        ? configName.map(function (part) { return '<span class="gv-name-part">' + part + '</span>'; })
+        ? configName.map(part => `<span class="gv-name-part">${part}</span>`)
         : name
     );
 
@@ -75,28 +85,35 @@ Genoverse.Track.Controller = Base.extend({
   },
 
   addDomElements: function () {
-    var name = this.track.name || '';
-
-    this.menus            = $();
-    this.container        = $('<div class="gv-track-container">').appendTo(this.browser.wrapper);
-    this.scrollContainer  = $('<div class="gv-scroll-container">').appendTo(this.container);
-    this.imgContainer     = $('<div class="gv-image-container">').width(this.width).addClass(this.prop('invert') ? 'gv-invert' : '');
-    this.messageContainer = $('<div class="gv-message-container"><div class="gv-messages"></div><i class="gv-control gv-collapse fas fa-angle-double-left"></i><i class="gv-control gv-expand fas fa-angle-double-right"></i></div>').appendTo(this.container);
-    this.label            = $('<li>').appendTo(this.browser.labelContainer).height(this.prop('height')).data('track', this.track);
-    this.context          = $('<canvas>')[0].getContext('2d');
+    const name   = this.track.name || '';
+    const jQuery = this.browser.jQuery;
+
+    this.menus            = jQuery();
+    this.container        = jQuery('<div class="gv-track-container">').appendTo(this.browser.wrapper);
+    this.scrollContainer  = jQuery('<div class="gv-scroll-container">').appendTo(this.container);
+    this.imgContainer     = jQuery('<div class="gv-image-container">').width(this.width).addClass(this.prop('invert') ? 'gv-invert' : '');
+    this.label            = jQuery('<li>').appendTo(this.browser.labelContainer).height(this.prop('height')).data('track', this.track);
+    this.context          = jQuery('<canvas>')[0].getContext('2d');
+    this.messageContainer = jQuery(`
+      <div class="gv-message-container">
+        <div class="gv-messages"></div>
+        <i class="gv-control gv-collapse fas fa-angle-double-left"></i>
+        <i class="gv-control gv-expand fas fa-angle-double-right"></i>
+      </div>
+    `).appendTo(this.container);
 
     if (this.prop('border')) {
-      $('<div class="gv-track-border">').appendTo(this.container);
+      jQuery('<div class="gv-track-border">').appendTo(this.container);
     }
 
     if (this.prop('unsortable')) {
       this.label.addClass('gv-unsortable');
     } else {
-      $('<div class="gv-handle">').appendTo(this.label);
+      jQuery('<div class="gv-handle">').appendTo(this.label);
     }
 
     if (this.prop('children')) {
-      this.superContainer = $('<div class="gv-track-container gv-track-super-container">').insertAfter(this.container);
+      this.superContainer = jQuery('<div class="gv-track-container gv-track-super-container">').insertAfter(this.container);
       this.container.appendTo(this.superContainer);
     } else if (this.prop('parentTrack')) {
       this.superContainer = this.prop('parentTrack').prop('superContainer');
@@ -113,10 +130,10 @@ Genoverse.Track.Controller = Base.extend({
   },
 
   addUserEventHandlers: function () {
-    var controller = this;
-    var browser    = this.browser;
+    const controller = this;
+    const browser    = this.browser;
 
-    this.container.on('mouseup', '.gv-image-container', function (e) {
+    this.container.on('mouseup', '.gv-image-container', (e) => {
       if ((e.which && e.which !== 1) || (typeof browser.dragStart === 'number' && browser.start !== browser.dragStart) || (browser.dragAction === 'select' && browser.selector.outerWidth(true) > 2)) {
         return; // Only show menus on left click when not dragging and not selecting
       }
@@ -124,23 +141,24 @@ Genoverse.Track.Controller = Base.extend({
       controller.click(e);
     });
 
-    this.messageContainer.children().on('click', function () {
-      var collapsed = controller.messageContainer.children('.gv-messages').is(':visible') ? ' gv-collapsed' : '';
-      var code      = controller.messageContainer.find('.gv-msg').data('code');
+    this.messageContainer.children().on('click', () => {
+      const collapsed = controller.messageContainer.children('.gv-messages').is(':visible') ? ' gv-collapsed' : '';
+      const code      = controller.messageContainer.find('.gv-msg').data('code');
 
-      controller.messageContainer.attr('class', 'gv-message-container' + collapsed);
+      controller.messageContainer.attr('class', `gv-message-container${collapsed}`);
       controller.checkHeight();
 
       if (code !== 'error') {
-        document.cookie = [ 'gv_msg', code, controller.prop('id') ].join('_') + '=1; expires=' + (collapsed ? 'Tue, 19 Jan 2038' : 'Thu, 01 Jan 1970') + ' 00:00:00 GMT; path=/';
+        document.cookie = `gv_msg_${code}_${controller.prop('id')}=1; expires=${collapsed ? 'Tue, 19 Jan 2038' : 'Thu, 01 Jan 1970'} 00:00:00 GMT; path=/`;
       }
     });
   },
 
   click: function (e) {
-    var target = $(e.target);
-    var x      = e.pageX - this.container.parent().offset().left + this.browser.scaledStart;
-    var y      = e.pageY - target.offset().top;
+    const target = this.browser.jQuery(e.target);
+    const x      = e.pageX - this.container.parent().offset().left + this.browser.scaledStart;
+
+    let y = e.pageY - target.offset().top;
 
     if (this.imgContainer.hasClass('gv-invert')) {
       y = target.height() - y;
@@ -150,28 +168,30 @@ Genoverse.Track.Controller = Base.extend({
   },
 
   getClickedFeatures: function (x, y, target) {
-    var bounds    = { x: x, y: y, w: 1, h: 1 };
-    var scale     = this.scale;
-    var tolerance = scale < 1 ? this.clickTolerance : 0;
+    const bounds    = { x: x, y: y, w: 1, h: 1 };
+    const scale     = this.scale;
+    const tolerance = scale < 1 ? this.clickTolerance : 0;
 
     if (tolerance) {
       bounds.x -= tolerance / 2;
       bounds.w += tolerance;
     }
 
-    var features = this[target && target.hasClass('gv-labels') ? 'labelPositions' : 'featurePositions'].search(bounds);
+    const features = this[target && target.hasClass('gv-labels') ? 'labelPositions' : 'featurePositions'].search(bounds);
 
     if (tolerance) {
-      return features.filter(function (f) {
-        var featureBounds = f.position[scale].bounds;
-        var center        = featureBounds.x + (featureBounds.w / 2);
-        var minX          = Math.min(featureBounds.x,                   center - (tolerance / 2));
-        var maxX          = Math.max(featureBounds.x + featureBounds.w, center + (tolerance / 2));
-
-        return x >= minX && x <= maxX;
-      }).sort(function (a, b) {
-        return Math.abs(a.position[scale].start - x) - Math.abs(b.position[scale].start - x);
-      });
+      return features.filter(
+        (f) => {
+          const featureBounds = f.position[scale].bounds;
+          const center        = featureBounds.x + (featureBounds.w / 2);
+          const minX          = Math.min(featureBounds.x,                   center - (tolerance / 2));
+          const maxX          = Math.max(featureBounds.x + featureBounds.w, center + (tolerance / 2));
+
+          return x >= minX && x <= maxX;
+        }
+      ).sort(
+        (a, b) => Math.abs(a.position[scale].start - x) - Math.abs(b.position[scale].start - x)
+      );
     }
 
     return this.model.sortFeatures(features);
@@ -179,21 +199,23 @@ Genoverse.Track.Controller = Base.extend({
 
   // FIXME: messages are now hidden/shown instead of removed/added. This will cause a problem if a new message arrives with the same code as one that already exists.
   showMessage: function (code, additionalText) {
-    var messages = this.messageContainer.children('.gv-messages');
+    let messages = this.messageContainer.children('.gv-messages');
 
-    if (!messages.children('.gv-' + code).show().length) {
-      var msg = $('<div class="gv-msg gv-' + code + '">' + this.messages[code] + (additionalText || '') + '</div>').data('code', code).prependTo(messages);
+    if (!messages.children(`.gv-${code}`).show().length) {
+      const msg = this.browser.jQuery(`<div class="gv-msg gv-${code}">${this.messages[code]}${additionalText || ''}</div>`).data('code', code).prependTo(messages);
 
       if (code === 'resize') {
-        msg.children('a.gv-resize').on('click', $.proxy(function () {
-          this.resize(this.fullVisibleHeight);
-        }, this));
+        const controller = this;
+
+        msg.children('a.gv-resize').on('click', () => {
+          controller.resize(controller.fullVisibleHeight);
+        });
       }
 
-      this.messageContainer[document.cookie.match([ 'gv_msg', code, this.prop('id') ].join('_') + '=1') ? 'addClass' : 'removeClass']('gv-collapsed');
+      this.messageContainer[document.cookie.match(`${[ 'gv_msg', code, this.prop('id') ].join('_')}=1`) ? 'addClass' : 'removeClass']('gv-collapsed');
     }
 
-    var height = this.messageContainer.show().outerHeight(true);
+    const height = this.messageContainer.show().outerHeight(true);
 
     if (height > this.prop('height')) {
       this.resize(height, undefined, false);
@@ -203,10 +225,10 @@ Genoverse.Track.Controller = Base.extend({
   },
 
   hideMessage: function (code) {
-    var messages = this.messageContainer.find('.gv-msg');
+    let messages = this.messageContainer.find('.gv-msg');
 
     if (code) {
-      messages = messages.filter('.gv-' + code).hide();
+      messages = messages.filter(`.gv-${code}`).hide();
 
       if (messages.length && !messages.siblings().filter(function () { return this.style.display !== 'none'; }).length) {
         this.messageContainer.hide();
@@ -239,7 +261,7 @@ Genoverse.Track.Controller = Base.extend({
       return;
     }
 
-    var autoHeight;
+    let autoHeight;
 
     if (this.browser.length > this.threshold) {
       autoHeight = this.prop('autoHeight');
@@ -256,22 +278,23 @@ Genoverse.Track.Controller = Base.extend({
   },
 
   visibleFeatureHeight: function () {
-    var bounds    = { x: this.browser.scaledStart, w: this.width, y: 0, h: 9e99 };
-    var scale     = this.scale;
-    var features  = this.featurePositions.search(bounds);
-    var minHeight = this.prop('hideEmpty') ? 0 : this.minLabelHeight;
-    var height    = Math.max.apply(Math, $.map(features, function (feature) { return feature.position[scale].bottom; }).concat(minHeight));
+    const bounds    = { x: this.browser.scaledStart, w: this.width, y: 0, h: 9e99 };
+    const scale     = this.scale;
+    const features  = this.featurePositions.search(bounds);
+    const minHeight = this.prop('hideEmpty') ? 0 : this.minLabelHeight;
+
+    let height = Math.max(...features.map(feature => feature.position[scale].bottom).concat(minHeight));
 
     if (this.prop('labels') === 'separate') {
       this.labelTop = height;
-      height += Math.max.apply(Math, $.map(this.labelPositions.search(bounds).concat(this.prop('repeatLabels') ? features : []), function (feature) { return feature.position[scale].label.bottom; }).concat(minHeight));
+      height       += Math.max(...this.labelPositions.search(bounds).concat(this.prop('repeatLabels') ? features : []).map(feature => feature.position[scale].label.bottom).concat(minHeight));
     }
 
     return height;
   },
 
   autoResize: function () {
-    var autoHeight = this.prop('autoHeight');
+    const autoHeight = this.prop('autoHeight');
 
     if (autoHeight || this.prop('labels') === 'separate') {
       this.resize(autoHeight ? this.fullVisibleHeight : this.prop('height'), this.labelTop, false);
@@ -301,8 +324,8 @@ Genoverse.Track.Controller = Base.extend({
       return;
     }
 
-    var featureMargin = this.prop('featureMargin');
-    var height        = this.prop('height');
+    const featureMargin = this.prop('featureMargin');
+    const height        = this.prop('height');
 
     // Note: fullVisibleHeight - featureMargin.top - featureMargin.bottom is not actually the correct value to test against, but it's the easiest best guess to obtain.
     // fullVisibleHeight is the maximum bottom position of the track's features in the region, which includes margin at the bottom of each feature and label
@@ -312,14 +335,14 @@ Genoverse.Track.Controller = Base.extend({
     if (this.fullVisibleHeight - featureMargin.top - featureMargin.bottom > height && !this.prop('disabled')) {
       this.showMessage('resize');
 
-      var controller = this;
-      var h          = this.messageContainer.outerHeight(true);
+      const controller = this;
+      const h          = this.messageContainer.outerHeight(true);
 
       if (h > height) {
         this.resize(h, undefined, saveConfig);
       }
 
-      this.expander = (this.expander || $('<div class="gv-expander gv-static">').width(this.width).appendTo(this.container).on('click', function () {
+      this.expander = (this.expander || this.browser.jQuery('<div class="gv-expander gv-static">').width(this.width).appendTo(this.container).on('click', () => {
         controller.resize(controller.fullVisibleHeight);
       }))[this.prop('height') === 0 ? 'hide' : 'show']();
     } else if (this.expander) {
@@ -329,22 +352,24 @@ Genoverse.Track.Controller = Base.extend({
   },
 
   setLabelHeight: function (enforceMinHeight) {
-    var parent = this.prop('parentTrack');
+    const parent = this.prop('parentTrack');
 
     if (parent) {
-      return parent.controller.setLabelHeight();
+      parent.controller.setLabelHeight();
+
+      return;
     }
 
-    var tracks = [ this ].concat(this.prop('childTracks') || []);
-    var height = tracks.reduce(function (h, track) { return h + (track.prop('disabled') ? 0 : track.prop('height')); }, 0);
+    const tracks = [ this ].concat(this.prop('childTracks') || []);
+    const height = tracks.reduce((h, track) => h + (track.prop('disabled') ? 0 : track.prop('height')), 0);
 
     this.label.height(this.prop('disabled') ? 0 : enforceMinHeight && this.minLabelHeight ? Math.max(height, this.minLabelHeight) : height);
 
     if (tracks.length > 1) {
-      var top = tracks[0].prop('height');
+      let top = tracks[0].prop('height');
 
-      tracks.slice(1).forEach(function (track) {
-        var h = track.prop('height');
+      tracks.slice(1).forEach((track) => {
+        const h = track.prop('height');
 
         track.prop('labelName').css('top', top)[h ? 'removeClass' : 'addClass']('gv-hide');
         top += h;
@@ -353,24 +378,22 @@ Genoverse.Track.Controller = Base.extend({
   },
 
   setWidth: function (width) {
-    var track = this.track;
+    const track = this.track;
 
-    $.each([ this, track, track.model, track.view ], function () {
-      this.width = width;
-    });
+    [ this, track, track.model, track.view ].forEach((obj) => { obj.width = width; });
 
     this.imgContainer.add(this.expander).width(width);
   },
 
   setScale: function () {
-    var controller = this;
+    const controller = this;
 
     this.scale = this.browser.scale;
 
     this.track.setMVC();
     this.resetImageRanges();
 
-    var labels = this.prop('labels');
+    const labels = this.prop('labels');
 
     if (labels && labels !== 'overlay') {
       this.model.setLabelBuffer(this.browser.labelBuffer);
@@ -380,7 +403,9 @@ Genoverse.Track.Controller = Base.extend({
       this.thresholdMessage = this.view.formatLabel(this.threshold);
     }
 
-    $.each(this.view.setScaleSettings(this.scale), function (k, v) { controller[k] = v; });
+    Object.entries(this.view.setScaleSettings(this.scale)).forEach(
+      ([ key, value ]) => { controller[key] = value; }
+    );
 
     this.hideMessage();
   },
@@ -389,10 +414,10 @@ Genoverse.Track.Controller = Base.extend({
     this.left += delta;
     this.scrollContainer.css('left', this.left);
 
-    var scrollStart = this.scrollStart;
+    const scrollStart = this.scrollStart;
 
     if (this.imgRange[scrollStart] && this.imgRange[scrollStart].left + this.left > -this.scrollBuffer * this.width) {
-      var end = this.scrollRange[scrollStart].start - 1;
+      const end = this.scrollRange[scrollStart].start - 1;
 
       this.makeImage({
         scale : this.scale,
@@ -400,7 +425,7 @@ Genoverse.Track.Controller = Base.extend({
         start : end - this.browser.length + 1,
         end   : end,
         left  : this.imgRange[scrollStart].left,
-        cls   : scrollStart
+        cls   : scrollStart,
       });
 
       (this.imgRange[scrollStart]    || {}).left  -= this.width;
@@ -408,7 +433,7 @@ Genoverse.Track.Controller = Base.extend({
     }
 
     if (this.imgRange[scrollStart] && this.imgRange[scrollStart].right + this.left < this.scrollBuffer * this.width) {
-      var start = this.scrollRange[scrollStart].end + 1;
+      const start = this.scrollRange[scrollStart].end + 1;
 
       this.makeImage({
         scale : this.scale,
@@ -416,7 +441,7 @@ Genoverse.Track.Controller = Base.extend({
         start : start,
         end   : start + this.browser.length - 1,
         left  : this.imgRange[scrollStart].right,
-        cls   : scrollStart
+        cls   : scrollStart,
       });
 
       (this.imgRange[scrollStart]    || {}).right += this.width;
@@ -425,8 +450,8 @@ Genoverse.Track.Controller = Base.extend({
   },
 
   moveTo: function (chr, start, end, delta) {
-    var scrollRange = this.scrollRange[this.scrollStart];
-    var scrollStart = [ 'ss', chr, start, end ].join('-');
+    const scrollRange = this.scrollRange[this.scrollStart];
+    const scrollStart = [ 'ss', chr, start, end ].join('-');
 
     if (this.scrollRange[scrollStart] || start > scrollRange.end || end < scrollRange.start) {
       this.resetImageRanges();
@@ -444,23 +469,25 @@ Genoverse.Track.Controller = Base.extend({
     params.featureHeight = params.featureHeight || 0;
     params.labelHeight   = params.labelHeight   || 0;
 
-    var deferred;
-    var controller = this;
-    var tooLarge   = this.browser.length > this.threshold;
-    var div        = this.imgContainer.clone().addClass((params.cls + ' gv-loading').replace('.', '_')).css({ left: params.left, display: params.cls === this.scrollStart ? 'block' : 'none' });
-    var bgImage    = params.background ? $('<img class="gv-bg">').hide().addClass(params.background).data(params).prependTo(div) : false;
-    var image      = $('<img class="gv-data">').hide().data(params).appendTo(div).on('load', function () {
-      $(this).fadeIn('fast').parent().removeClass('gv-loading');
-      $(this).siblings('.gv-bg').show();
+    const controller = this;
+    const jQuery     = this.browser.jQuery;
+    const tooLarge   = this.browser.length > this.threshold;
+    const div        = this.imgContainer.clone().addClass((`${params.cls} gv-loading`).replace('.', '_')).css({ left: params.left, display: params.cls === this.scrollStart ? 'block' : 'none' });
+    const bgImage    = params.background ? jQuery('<img class="gv-bg">').hide().addClass(params.background).data(params).prependTo(div) : false;
+    const image      = this.browser.jQuery('<img class="gv-data">').hide().data(params).appendTo(div).on('load', function () {
+      jQuery(this).fadeIn('fast').parent().removeClass('gv-loading');
+      jQuery(this).siblings('.gv-bg').show();
     });
 
+    let deferred;
+
     params.container = div;
 
     this.imgContainers.push(div[0]);
     this.scrollContainer.append(this.imgContainers);
 
     if (!tooLarge && !this.model.checkDataRange(params.chr, params.start, params.end)) {
-      var buffer = this.prop('dataBuffer');
+      const buffer = this.prop('dataBuffer');
 
       params.start -= buffer.start;
       params.end   += buffer.end;
@@ -468,44 +495,49 @@ Genoverse.Track.Controller = Base.extend({
     }
 
     if (!deferred) {
-      deferred = $.Deferred();
-      setTimeout($.proxy(deferred.resolve, this), 1); // This defer makes scrolling A LOT smoother, pushing render call to the end of the exec queue
+      deferred = jQuery.Deferred();
+      setTimeout(deferred.resolve, 1); // This defer makes scrolling A LOT smoother, pushing render call to the end of the exec queue
     }
 
     this.deferreds.push(deferred);
 
-    return deferred.done(function () {
-      var features = tooLarge ? [] : controller.model.findFeatures(params.chr, params.start, params.end);
-      controller.render(features, image);
+    return deferred.done(
+      () => {
+        const features = tooLarge ? [] : controller.model.findFeatures(params.chr, params.start, params.end);
+
+        controller.render(features, image);
 
-      if (bgImage) {
-        controller.renderBackground(features, bgImage);
+        if (bgImage) {
+          controller.renderBackground(features, bgImage);
+        }
       }
-    }).fail(function (e) {
-      controller.showError(e);
-    });
+    ).fail(
+      (e) => { controller.showError(e); }
+    );
   },
 
   makeFirstImage: function (moveTo) {
-    var deferred = $.Deferred();
+    const jQuery   = this.browser.jQuery;
+    const deferred = jQuery.Deferred();
 
-    if (this.scrollContainer.children().hide().filter('.' + (moveTo || this.scrollStart)).show().length) {
+    if (this.scrollContainer.children().hide().filter(`.${moveTo || this.scrollStart}`).show().length) {
       this.scrollContainer.css('left', 0);
       this.checkHeight();
 
       return deferred.resolve();
     }
 
-    var controller = this;
-    var chr        = this.browser.chr;
-    var start      = this.browser.start;
-    var end        = this.browser.end;
-    var length     = this.browser.length;
-    var scale      = this.scale;
-    var cls        = this.scrollStart;
-    var images     = [{ chr: chr, start: start, end: end, scale: scale, cls: cls, left: 0 }];
-    var left       = 0;
-    var width      = this.width;
+    const controller = this;
+    const chr        = this.browser.chr;
+    const start      = this.browser.start;
+    const end        = this.browser.end;
+    const length     = this.browser.length;
+    const scale      = this.scale;
+    const cls        = this.scrollStart;
+    const images     = [{ chr: chr, start: start, end: end, scale: scale, cls: cls, left: 0 }];
+
+    let left  = 0;
+    let width = this.width;
 
     if (!this.browser.isStatic) {
       if (start > 1) {
@@ -520,12 +552,10 @@ Genoverse.Track.Controller = Base.extend({
       }
     }
 
-    var loading = this.imgContainer.clone().addClass('gv-loading').css({ left: left, width: width }).prependTo(this.scrollContainer.css('left', 0));
+    const loading = this.imgContainer.clone().addClass('gv-loading').css({ left: left, width: width }).prependTo(this.scrollContainer.css('left', 0));
 
     function makeImages() {
-      $.when.apply($, images.map(function (image) {
-        return controller.makeImage(image);
-      })).done(deferred.resolve);
+      jQuery.when(...images.map(image => controller.makeImage(image))).done(deferred.resolve);
 
       loading.remove();
     }
@@ -533,9 +563,9 @@ Genoverse.Track.Controller = Base.extend({
     if (length > this.threshold || this.model.checkDataRange(chr, start, end)) {
       makeImages();
     } else {
-      var buffer = this.prop('dataBuffer');
+      const buffer = this.prop('dataBuffer');
 
-      this.model.getData(chr, start - buffer.start - length, end + buffer.end + length).done(makeImages).fail(function (e) {
+      this.model.getData(chr, start - buffer.start - length, end + buffer.end + length).done(makeImages).fail((e) => {
         controller.showError(e);
       });
     }
@@ -544,22 +574,31 @@ Genoverse.Track.Controller = Base.extend({
   },
 
   render: function (features, img) {
-    var params = img.data();
+    const params = img.data();
 
     // positionFeatures alters params.featureHeight, so this must happen before the canvases are created
     features = this.view.positionFeatures(this.view.scaleFeatures(features, params.scale), params);
 
-    var featureCanvas  = $('<canvas>').attr({ width: params.width, height: params.featureHeight || 1 });
-    var labelCanvas    = this.prop('labels') === 'separate' && params.labelHeight ? featureCanvas.clone().attr('height', params.labelHeight) : featureCanvas;
-    var featureContext = featureCanvas[0].getContext('2d');
-    var labelContext   = labelCanvas[0].getContext('2d');
+    const featureCanvas = this.browser.jQuery('<canvas>').attr({ width: params.width, height: params.featureHeight || 1 });
+    const labelCanvas   = this.prop('labels') === 'separate' && params.labelHeight ? featureCanvas.clone().attr('height', params.labelHeight) : featureCanvas;
+
+    const featureContext = featureCanvas[0].getContext('2d');
+    const labelContext   = labelCanvas[0].getContext('2d');
 
     featureContext.font = labelContext.font = this.prop('font');
 
     switch (this.prop('labels')) {
-      case false     : break;
-      case 'overlay' : labelContext.textAlign = 'center'; labelContext.textBaseline = 'middle'; break;
-      default        : labelContext.textAlign = 'left';   labelContext.textBaseline = 'top';    break;
+      case false: break;
+      case 'overlay':
+        labelContext.textAlign    = 'center';
+        labelContext.textBaseline = 'middle';
+
+        break;
+      default:
+        labelContext.textAlign    = 'left';
+        labelContext.textBaseline = 'top';
+
+        break;
     }
 
     this.view.draw(features, featureContext, labelContext, params.scale);
@@ -571,44 +610,46 @@ Genoverse.Track.Controller = Base.extend({
     }
 
     this.checkHeight();
-
-    featureCanvas = labelCanvas = img = null;
   },
 
   renderBackground: function (features, img, height) {
-    var canvas = $('<canvas>').attr({ width: this.width, height: height || 1 })[0];
+    const canvas = this.browser.jQuery('<canvas>').attr({ width: this.width, height: height || 1 })[0];
+
     this.view.drawBackground(features, canvas.getContext('2d'), img.data());
     img.attr('src', canvas.toDataURL());
-    canvas = img = null;
   },
 
   populateMenu: function (feature) {
-    var f    = $.extend(true, {}, feature);
-    var menu = {
-      title    : f.label ? f.label[0] : f.id,
-      Location : f.chr + ':' + f.start + '-' + f.end
+    const title = feature.label ? feature.label[0] : feature.id;
+
+    return {
+      title    : title,
+      Location : `${feature.chr}:${feature.start}-${feature.end}`,
+      ...Object.entries(feature).reduce(
+        (acc, [ key, value ]) => {
+          if (typeof value === 'object' || value === title || [ 'chr', 'start', 'end', 'sort' ].includes(key)) {
+            return acc;
+          }
+
+          return Object.assign(acc, { [key]: value });
+        },
+        {}
+      ),
     };
+  },
 
-    delete f.chr;
-    delete f.start;
-    delete f.end;
-    delete f.sort;
-
-    for (var i in f) {
-      if (typeof f[i] === 'object' || menu.title === f[i]) {
-        delete f[i];
-      }
-    }
-
-    return $.extend(menu, f);
+  insertPropertiesIntoMenu: function (menuProperties, menuEl, contentEl, feature) {
+    return this.browser.insertPropertiesIntoMenu(menuProperties, menuEl, contentEl, feature, this.track);
   },
 
   abort: function () {
-    for (var i = 0; i < this.deferreds.length; i++) {
-      if (this.deferreds[i].state() === 'pending') {
-        this.deferreds[i].reject();
+    this.deferreds.forEach(
+      (deferred) => {
+        if (deferred.state() === 'pending') {
+          deferred.reject();
+        }
       }
-    }
+    );
 
     this.deferreds = [];
   },
@@ -616,5 +657,5 @@ Genoverse.Track.Controller = Base.extend({
   destroy: function () {
     this.abort();
     this.container.add(this.label).add(this.menus).remove();
-  }
+  },
 });