genoverse 3.2.0 → 4.0.0-beta1

package/{js → src/js}/plugins/karyotype.js

@@ -1,16 +1,21 @@
-Genoverse.Plugins.karyotype = function (pluginConf) {
+import '../../css/karyotype.css';
+import Chromosome from '../Track/library/Chromosome';
+
+const plugin = function (pluginConf) {
+  const jQuery = this.jQuery;
+
   function createKaryotype() {
-    var chromosome   = $('<div class="gv-chromosome">');
-    var container    = $('<div class="gv-karyotype-container">').html(chromosome).insertBefore(this.wrapper);
-    var assemblyName = this.assembly || this.genomeName;
-    var name         = (pluginConf.showAssembly && assemblyName ? assemblyName + ': ' : '') + 'Chr ' + this.chr;
+    const chromosome   = jQuery('<div class="gv-chromosome">');
+    const container    = jQuery('<div class="gv-karyotype-container">').html(chromosome).insertBefore(this.wrapper);
+    const assemblyName = this.assembly || this.genomeName;
+    const name         = `${pluginConf.showAssembly && assemblyName ? `${assemblyName}: ` : ''}Chr ${this.chr}`;
 
     if (pluginConf.showAssembly && assemblyName) {
       container.addClass('gv-show-assembly');
     }
 
-    var measureWidth = $('<div class="gv-chromosome"><ul class="gv-label-container"><li><span class="gv-name">' + name + '</span></li></ul></div>').appendTo(container);
-    var labelWidth   = pluginConf.karyotypeLabel === false ? 0 : measureWidth.find('.gv-name').outerWidth(true) + 10;
+    const measureWidth = jQuery(`<div class="gv-chromosome"><ul class="gv-label-container"><li><span class="gv-name">${name}</span></li></ul></div>`).appendTo(container);
+    const labelWidth   = pluginConf.karyotypeLabel === false ? 0 : measureWidth.find('.gv-name').outerWidth(true) + 10;
 
     measureWidth.remove();
 
@@ -24,7 +29,7 @@ Genoverse.Plugins.karyotype = function (pluginConf) {
       end       : this.chromosomeSize,
       isStatic  : true,
       tracks    : [
-        Genoverse.Track.Chromosome.extend({
+        Chromosome.extend({
           name          : name,
           height        : 20,
           featureHeight : 20,
@@ -33,9 +38,9 @@ Genoverse.Plugins.karyotype = function (pluginConf) {
           unsortable    : true,
 
           click: function (e) {
-            var offset = this.container.parent().offset().left;
-            var x      = e.pageX - offset;
-            var f      = this.featurePositions.search({ x: x, y: 1, w: 1, h: 1 })[0];
+            const offset = this.container.parent().offset().left;
+            const x      = e.pageX - offset;
+            const f      = this.featurePositions.search({ x: x, y: 1, w: 1, h: 1 })[0];
 
             if (f) {
               if (e.type === 'mouseup') {
@@ -46,8 +51,9 @@ Genoverse.Plugins.karyotype = function (pluginConf) {
                 this.container.tipsy('hide');
 
                 if (f.label) {
-                  var left = offset + f.position[this.scale].start + f.position[this.scale].width / 2;
-                  this.container.attr('title', f.label[0]).tipsy({ trigger: 'manual', container: 'body' }).tipsy('show').data('tipsy').$tip.css('left', function () { return left - $(this).width() / 2; });
+                  const left = offset + f.position[this.scale].start + f.position[this.scale].width / 2;
+
+                  this.container.attr('title', f.label[0]).tipsy({ trigger: 'manual', container: 'body' }).tipsy('show').data('tipsy').$tip.css('left', function () { return left - jQuery(this).width() / 2; });
                 }
 
                 this.hoverFeature = f;
@@ -56,35 +62,35 @@ Genoverse.Plugins.karyotype = function (pluginConf) {
           },
 
           addUserEventHandlers: function () {
-            var track = this;
+            const track = this;
 
             this.base();
 
             this.container.on({
-              mousemove : function (e) { track.click(e); },
-              mouseout  : function (e) {
+              mousemove : (e) => { track.click(e); },
+              mouseout  : (e) => {
                 if (track.browser.viewPoint.is(e.relatedTarget) || track.browser.viewPoint.find(e.relatedTarget).length) {
                   return true;
                 }
 
                 track.container.tipsy('hide');
                 track.hoverFeature = false;
-              }
+              },
             }, '.gv-image-container');
 
             // Don't allow zooming in and out on the karyotype image
-            this.container.on('mousewheel', '.gv-image-container, .gv-selector', function (e) {
+            this.container.on('mousewheel', '.gv-image-container, .gv-selector', (e) => {
               e.stopPropagation();
             });
           },
 
           afterSetName: function () {
-            this.label.css('lineHeight', this.label.height() + 'px');
-          }
-        })
+            this.label.css('lineHeight', `${this.label.height()}px`);
+          },
+        }),
       ],
 
-      addUserEventHandlers: $.noop,
+      addUserEventHandlers: () => {},
 
       afterInit: function () {
         this.updatePosition();
@@ -96,8 +102,8 @@ Genoverse.Plugins.karyotype = function (pluginConf) {
       },
 
       afterAddDomElements: function () {
-        var karyotype = this;
-        var parent    = this.parent;
+        const karyotype = this;
+        const parent    = this.parent;
 
         function hideTooltip() {
           karyotype.hideTooltip = true;
@@ -107,10 +113,10 @@ Genoverse.Plugins.karyotype = function (pluginConf) {
         function updateLocation(e, ui) {
           karyotype.hideTooltip = false;
 
-          var scale = karyotype.chromosomeSize / karyotype.width;
-          var axis  = e.type === 'resizestop' ? $(this).data('ui-resizable').axis : undefined;
-          var start = axis === 'e' ? parent.start : Math.max(Math.floor(ui.position.left * scale), 1);
-          var end   = axis === 'w' ? parent.end   : e.type === 'dragstop' ? start + parent.length - 1 : Math.floor(ui.helper.outerWidth(true) * scale) + start;
+          const scale = karyotype.chromosomeSize / karyotype.width;
+          const axis  = e.type === 'resizestop' ? jQuery(this).data('ui-resizable').axis : undefined;
+          const start = axis === 'e' ? parent.start : Math.max(Math.floor(ui.position.left * scale), 1);
+          const end   = axis === 'w' ? parent.end   : e.type === 'dragstop' ? start + parent.length - 1 : Math.floor(ui.helper.outerWidth(true) * scale) + start;
 
           if (start !== parent.start || end !== parent.end) {
             parent.moveTo(karyotype.chr, start, end, true, e.type === 'dragstop');
@@ -119,19 +125,19 @@ Genoverse.Plugins.karyotype = function (pluginConf) {
 
         if (pluginConf.karyotypeLabel === false) {
           this.labelContainer.remove();
-          this.labelContainer = $();
+          this.labelContainer = jQuery();
           container.addClass('gv-no-label');
         } else {
           this.labelContainer.width(labelWidth);
         }
 
-        this.viewPoint = $('<div class="gv-karyotype-viewpoint-wrapper"><div class="gv-karyotype-viewpoint"></div></div>').appendTo(container).css({
+        this.viewPoint = jQuery('<div class="gv-karyotype-viewpoint-wrapper"><div class="gv-karyotype-viewpoint"></div></div>').appendTo(container).css({
           left  : labelWidth,
-          width : this.width - labelWidth
+          width : this.width - labelWidth,
         }).children().on({
-          mousemove : function (e) { karyotype.track.controller.click(e); },
-          mouseout  : function (e) {
-            var el = $(e.relatedTarget);
+          mousemove : (e) => { karyotype.track.controller.click(e); },
+          mouseout  : (e) => {
+            const el = jQuery(e.relatedTarget);
 
             if (karyotype.viewPoint.is(el) || karyotype.viewPoint.find(el).length || (el.prop('nodeName') === 'IMG' && el.parent().is(karyotype.track.prop('imgContainers')[0]))) {
               return true;
@@ -139,7 +145,7 @@ Genoverse.Plugins.karyotype = function (pluginConf) {
 
             karyotype.track.prop('container').tipsy('hide');
             karyotype.track.prop('hoverFeature', false);
-          }
+          },
         });
 
         if (!parent.isStatic) {
@@ -147,7 +153,7 @@ Genoverse.Plugins.karyotype = function (pluginConf) {
             axis        : 'x',
             containment : this.wrapper,
             start       : hideTooltip,
-            stop        : updateLocation
+            stop        : updateLocation,
           }).resizable({
             handles     : 'e, w',
             containment : 'parent',
@@ -161,28 +167,26 @@ Genoverse.Plugins.karyotype = function (pluginConf) {
               } else {
                 ui.element.width(ui.size.width + ui.position.left);
               }
-            }
+            },
           });
         }
       },
 
       updatePosition: function () {
-        var left  =  this.parent.start * this.scale;
-        var width = (this.parent.end   * this.scale) - left;
+        const left  =  this.parent.start * this.scale;
+        const width = (this.parent.end   * this.scale) - left;
 
         this.viewPoint.css({ left: left, width: width });
-      }
+      },
     });
 
     if (this.loadedPlugins.controlPanel !== true) {
-      $('<li class="gv-unsortable">').height(function (i, h) {
-        return h + container.height();
-      }).prependTo(this.labelContainer);
+      jQuery('<li class="gv-unsortable">').height((i, h) => h + container.height()).prependTo(this.labelContainer);
     }
   }
 
   function recreateKaryotype() {
-    var container = this.karyotype.container.parent();
+    const container = this.karyotype.container.parent();
 
     this.karyotype.destroy();
     container.remove();
@@ -205,6 +209,8 @@ Genoverse.Plugins.karyotype = function (pluginConf) {
       if (this.karyotype && this.karyotype.chr !== chr) {
         recreateKaryotype.call(this);
       }
-    }
+    },
   });
 };
+
+export default { karyotype: plugin };

package/src/js/plugins/resizer.js

@@ -0,0 +1,52 @@
+import '../../css/resizer.css';
+
+const plugin = function () {
+  const jQuery = this.jQuery;
+
+  this.on('afterSetMVC', 'tracks', function () {
+    if (this.prop('resizable') !== true) {
+      return;
+    }
+
+    const track      = this;
+    const controller = this.controller;
+    const height     = this.prop('height');
+
+    let resizer = this.prop('resizer');
+
+    if (!resizer) {
+      resizer = this.prop('resizer', jQuery('<div class="gv-resizer gv-static"><div class="gv-handle"></div></div>').appendTo(track.prop('container')).draggable({
+        axis  : 'y',
+        start : () => { jQuery('body').addClass('gv-dragging'); },
+        stop  : function (e, ui) {
+          jQuery('body').removeClass('gv-dragging');
+          controller.resize(track.prop('height') + ui.position.top - ui.originalPosition.top, true);
+          jQuery(this).css({ top: 'auto', bottom: 0 }); // returns the resizer to the bottom of the container - needed when the track is resized to 0
+        },
+      }).on('click', () => {
+        const h = track.prop('fullVisibleHeight');
+
+        if (h) {
+          controller.resize(h, true);
+        }
+      }));
+    }
+
+    resizer.css({ width: this.width, left: 0 })[this.prop('autoHeight') ? 'hide' : 'show']();
+
+    if (!this.prop('autoHeight') && height - this.prop('margin') === this.prop('featureHeight')) {
+      controller.resize(height + resizer.height());
+      this.prop('initialHeight', this.prop('height'));
+    }
+  });
+
+  this.on('afterToggleExpander', 'tracks', function () {
+    const resizer = this.prop('resizer');
+
+    if (resizer) {
+      resizer[this.expander?.is(':visible') ? 'addClass' : 'removeClass']('gv-resizer-expander');
+    }
+  });
+};
+
+export default { resizer: plugin };

package/{js → src/js}/plugins/tooltips.js

@@ -3,22 +3,26 @@
 // (c) 2008-2010 jason frame [jason@onehackoranother.com]
 // released under the MIT license
 
-Genoverse.Plugins.tooltips = function () {
-  var genoverse = this;
+import '../../css/tooltips.css';
+import controlPanel from './controlPanel';
+
+const plugin = function () {
+  const genoverse = this;
+  const jQuery    = this.jQuery;
 
   function toggleTooltips(browser, tooltips, action) {
-    var offset = browser.superContainer.offset();
+    const offset = browser.superContainer.offset();
 
     tooltips = tooltips || browser.superContainer.find('.gv-tooltip');
-    action   = action   || $(this).toggleClass('gv-active').hasClass('gv-active') ? 'show' : 'hide';
+    action   = action   || jQuery(this).toggleClass('gv-active').hasClass('gv-active') ? 'show' : 'hide';
 
     tooltips.each(function () {
-      var el = $(this);
+      const el = jQuery(this);
 
       if (el.is(':visible')) {
         el.tipsy(action).data('tipsy').$tip.data({ parent: el }).appendTo(browser.superContainer).css({
           marginTop  : -offset.top,
-          marginLeft : -offset.left
+          marginLeft : -offset.left,
         });
       } else if (el.data('tipsy').$tip) {
         el.tipsy('hide');
@@ -27,25 +31,28 @@ Genoverse.Plugins.tooltips = function () {
   }
 
   function updateTooltips() {
-    var tooltips = $();
+    let tooltips = jQuery();
 
-    $.each([
+    [
       [ genoverse.labelContainer.find('.gv-handle'), { gravity: 'w', fade: true, trigger: 'manual', fallback: 'Reorder tracks by dragging this handle' }],
-      [ genoverse.container.find('.gv-resizer'),     { gravity: 'n', fade: true, trigger: 'manual', fallback: 'Resize track by dragging this handle'   }]
-    ], function () {
-      var el = this[0].filter(':visible').first();
+      [ genoverse.container.find('.gv-resizer'),     { gravity: 'n', fade: true, trigger: 'manual', fallback: 'Resize track by dragging this handle'   }],
+    ].forEach(
+      ([ selector, options ]) => {
+        const el = selector.filter(':visible').first();
 
-      if (!el.hasClass('gv-tooltip')) {
-        this[0].filter('.gv-tooltip').removeClass('gv-tooltip').tipsy('hide').removeData('tipsy');
-        el.tipsy(this[1]).addClass('gv-tooltip');
-      }
+        if (!el.hasClass('gv-tooltip')) {
+          selector.filter('.gv-tooltip').removeClass('gv-tooltip').tipsy('hide').removeData('tipsy');
+          el.tipsy(options).addClass('gv-tooltip');
+        }
 
-      tooltips = tooltips.add(el);
-    });
+        tooltips = tooltips.add(el);
+      }
+    );
 
     // Remove any tooltips orphaned by the removal of a track
     genoverse.superContainer.find('.tipsy').not(function () {
-      var parent = $(this).data('parent');
+      const parent = jQuery(this).data('parent');
+
       return parent && genoverse.superContainer.find(parent).length;
     }).remove();
 
@@ -60,7 +67,7 @@ Genoverse.Plugins.tooltips = function () {
     icon   : '<i class="fas fa-question-circle"></i>',
     class  : 'gv-tooltips',
     name   : 'Tooltips',
-    action : toggleTooltips
+    action : toggleTooltips,
   });
 
   this.on('afterInit', function () {
@@ -68,11 +75,11 @@ Genoverse.Plugins.tooltips = function () {
     this.superContainer.find('.gv-panel-right .gv-button-set[title]').tipsy({ gravity: 'e', fade: true, trigger: 'manual' }).addClass('gv-tooltip');
 
     // In order to force placement of this tooltip to be inside the superContainer boundaries, and just below the karyotype, create a hidden element, positioned where we want the tooltip to appear
-    $('<i class="gv-wrapper-tooltip">').prependTo(this.wrapper).tipsy({
+    jQuery('<i class="gv-wrapper-tooltip">').prependTo(this.wrapper).tipsy({
       gravity  : 's',
       fade     : true,
       trigger  : 'manual',
-      fallback : 'Scroll left and right by dragging with your mouse, click on any feature in any track for more info'
+      fallback : 'Scroll left and right by dragging with your mouse, click on any feature in any track for more info',
     }).addClass('gv-tooltip');
 
     updateTooltips();
@@ -82,13 +89,8 @@ Genoverse.Plugins.tooltips = function () {
     this.controlPanel.find('.gv-tooltips.gv-active').trigger('click');
   });
 
-  this.on('afterSortTracks', function () {
-    updateTooltips();
-  });
-
-  this.on('afterResize', 'tracks', function () {
-    updateTooltips();
-  });
+  this.on('afterSortTracks',       () => { updateTooltips(); });
+  this.on('afterResize', 'tracks', () => { updateTooltips(); });
 };
 
-Genoverse.Plugins.tooltips.requires = 'controlPanel';
+export default { tooltips: plugin, requires: controlPanel };

package/src/js/plugins/trackControls.js

@@ -0,0 +1,159 @@
+import '../../css/trackControls.css';
+
+const plugin = function () {
+  const jQuery          = this.jQuery;
+  const defaultControls = [
+    jQuery('<a title="More info" class="fas fa-question-circle">').on('click', function () {
+      const track = jQuery(this).data('track');
+
+      let menu = track.prop('menus').filter('.gv-track-info');
+
+      if (!menu.length) {
+        const info = track.prop('info');
+
+        menu = track.prop(
+          'menus',
+          track.prop('menus').add(
+            track.browser.makeMenu({
+              title                                                        : track.name,
+              [typeof info === 'function' ? info.call(track) : info || ''] : '',
+            }).addClass('gv-track-info')
+          )
+        );
+      }
+
+      menu.show().position({ of: track.prop('container'), at: 'center top', my: 'center top', collision: 'none' });
+    }),
+
+    jQuery(`
+      <a class="gv-height-toggle">
+        <i class="fas fa-sort"></i>
+        <i class="fas fa-sort-down"></i>
+        <i class="fas fa-sort-up"></i>
+      </a>
+    `).on({
+      click: function () {
+        const track = jQuery(this).data('track');
+
+        let height;
+
+        if (track.prop('autoHeight', !track.prop('autoHeight'))) {
+          track.prop('heightBeforeToggle', track.prop('height'));
+          height = track.prop('fullVisibleHeight');
+        } else {
+          height = track.prop('heightBeforeToggle') || track.prop('initialHeight');
+        }
+
+        jQuery(this).trigger('toggleState');
+
+        track.controller.resize(height, true);
+      },
+      toggleState: function () { // custom event to set title and change the icon
+        const track      = jQuery(this).data('track');
+        const autoHeight = track.prop('autoHeight');
+        const resizer    = track.prop('resizer');
+
+        this.title = autoHeight ? 'Set track to fixed height' : 'Set track to auto-adjust height';
+
+        jQuery(this)[autoHeight ? 'addClass' : 'removeClass']('gv-auto-height');
+
+        if (resizer) {
+          resizer[autoHeight ? 'hide' : 'show']();
+        }
+      },
+    }),
+  ];
+
+  const remove = jQuery('<a title="Remove track" class="far fa-trash-alt">').on('click', function () {
+    jQuery(this).data('track').remove();
+  });
+
+  const toggle = jQuery(`
+    <a class="gv-track-controls-toggle">
+      <span><i class="fas fa-angle-double-left"></i><i class="fas fa-cog"></i></span>
+      <span><i class="fas fa-angle-double-right"></i></span>
+    </a>
+  `).on('click', function () {
+    jQuery(this).parent().toggleClass('gv-maximized');
+  });
+
+  this.on({
+    afterAddDomElements: function () {
+      let controls = this.prop('controls');
+
+      if (controls === 'off') {
+        return;
+      }
+
+      const defaultConfig = this.prop('defaultConfig');
+      const savedConfig   = this.browser.savedConfig?.[this.prop('id')] || {};
+
+      controls = (controls || []).concat(defaultControls, this.prop('removable') === false ? [] : remove);
+
+      this.trackControls = jQuery('<div class="gv-track-controls">').prependTo(this.container);
+
+      const controlsContainer = jQuery('<div class="gv-track-controls-container">').appendTo(this.trackControls);
+
+      controls.forEach(
+        (control) => {
+          let el;
+
+          if (jQuery.isPlainObject(control) && control.type) {
+            el = jQuery(`<${control.type}>`).data('control', control.name);
+
+            (control.options || []).forEach(
+              option => el.append(`<option value="${option.value}">${option.text}</option>`)
+            );
+          } else if (typeof control === 'string') {
+            el = jQuery(control);
+          } else if (typeof control === 'object' && control.constructor && control instanceof jQuery) {
+            el = control.clone(true);
+          }
+
+          el.data('track', this.track).appendTo(controlsContainer);
+
+          // TODO: other control types
+          if (el.is('select')) {
+            const prop = el.data('control');
+
+            el.find(`option[value=${savedConfig[prop] || defaultConfig[prop] || 'all'}]`).attr('selected', true).end().change(function () {
+              jQuery(this).data('track').setConfig(jQuery(this).data('control'), this.value);
+            });
+          }
+        }
+      );
+
+      this.prop('heightToggler', controlsContainer.children('.gv-height-toggle').trigger('toggleState'));
+
+      const toggler = toggle.clone(true).data('track', this.track).appendTo(this.trackControls);
+
+      toggler.trigger('click');
+
+      this.minLabelHeight = Math.max(this.minLabelHeight, this.trackControls.outerHeight(true) + this.prop('margin'));
+
+      toggler.trigger('click');
+    },
+    afterResize: function () {
+      if (this.trackControls) {
+        this.trackControls[this.prop('height') < this.trackControls.outerHeight(true) ? 'hide' : 'show']();
+      }
+    },
+    afterResetHeight: function () {
+      const heightToggler = this.prop('heightToggler');
+
+      if (this.prop('resizable') === true && heightToggler) {
+        heightToggler[this.prop('autoHeight') ? 'addClass' : 'removeClass']('gv-auto-height');
+        heightToggler.trigger('toggleState');
+      }
+    },
+    afterSetMVC: function () {
+      const heightToggler = this.prop('heightToggler');
+
+      if (heightToggler) {
+        heightToggler.trigger('toggleState')[this.prop('resizable') === true ? 'removeClass' : 'addClass']('gv-hide');
+      }
+    },
+  }, 'tracks');
+};
+
+export default { trackControls: plugin };

package/test/View/render-legends.test.js

@@ -8,7 +8,7 @@ describe('Correctly render legends:', () => {
     margin        : 0,
     featureHeight : 10,
     featureMargin : {},
-    legend        : true,
+    legend        : Genoverse.Track.Legend,
   };
 
   it('multiple feature types', () => testTrackRenderStatic(

package/test/create-and-destroy.test.js

@@ -1,5 +1,5 @@
-const css                      = require('fs').readFileSync('css/genoverse.css', 'utf8');
-const { Genoverse, afterTest } = require('./utils');
+const css                         = require('fs').readFileSync('src/css/genoverse.css', 'utf8');
+const { $, Genoverse, afterTest } = require('./utils');
 
 const html = `<style>${css}</style><div id="genoverse-test-1"></div><div id="genoverse-test-2"></div><div id="genoverse-test-3"></div>`;
 

package/test/track-ordering.test.js

@@ -1,4 +1,4 @@
-const { Genoverse, afterTest } = require('./utils');
+const { $, Genoverse, afterTest } = require('./utils');
 
 // TODO: unsortable, particularly with unsortable order=9e99, then adding another track
 
@@ -22,6 +22,7 @@ describe('Track ordering', () => {
       tracks         : tracks.map(t => Genoverse.Track.extend({ url: false, ...t })),
       _initDeferred  : $.Deferred(),
       saveConfig     : () => {},
+      loadCSS        : () => {},
       loadGenome     : () => {},
       loadPlugins    : () => {},
     });
@@ -107,7 +108,7 @@ describe('Track ordering', () => {
 
   const legendTrack = (id, legendConf) => ({
     id     : id,
-    legend : legendConf ? Genoverse.Track.Legend.extend(legendConf) : true,
+    legend : legendConf ? Genoverse.Track.Legend.extend(legendConf) : Genoverse.Track.Legend,
   });
 
   describe('Simple tracks', () => {

package/test/track_config/config-settings.test.js

@@ -1,4 +1,4 @@
-const { Genoverse, afterTest } = require('../utils');
+const { $, Genoverse, afterTest } = require('../utils');
 
 describe('Config settings', () => {
   afterEach(afterTest);

package/test/utils.js

@@ -1,6 +1,7 @@
-require('../index'); // Genoverse library
+const Genoverse = require('../src/js/Genoverse').default;
+const $         = require('../src/js/lib/jquery').default;
 
-Genoverse.ready.resolve();
+Genoverse.configure({ css: false, fontawesome: false });
 
 const getTrackConfig = features => ({
   data: features,
@@ -73,6 +74,7 @@ const afterTest = () => {
 };
 
 module.exports = {
+  $,
   Genoverse,
   testTrackRender,
   testTrackRenderStatic,