genoverse 3.2.0

package/js/plugins/karyotype.js

@@ -0,0 +1,210 @@
+Genoverse.Plugins.karyotype = function (pluginConf) {
+  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;
+
+    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;
+
+    measureWidth.remove();
+
+    this.karyotype = new Genoverse({
+      parent    : this,
+      container : chromosome,
+      width     : chromosome.width(),
+      genome    : this.genome,
+      chr       : this.chr,
+      start     : 1,
+      end       : this.chromosomeSize,
+      isStatic  : true,
+      tracks    : [
+        Genoverse.Track.Chromosome.extend({
+          name          : name,
+          height        : 20,
+          featureHeight : 20,
+          border        : false,
+          legend        : false,
+          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];
+
+            if (f) {
+              if (e.type === 'mouseup') {
+                if (!this.browser.parent.isStatic) {
+                  this.browser.parent.moveTo(f.chr, f.start, f.end, true);
+                }
+              } else if (this.hoverFeature !== f && !this.browser.hideTooltip) {
+                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; });
+                }
+
+                this.hoverFeature = f;
+              }
+            }
+          },
+
+          addUserEventHandlers: function () {
+            var track = this;
+
+            this.base();
+
+            this.container.on({
+              mousemove : function (e) { track.click(e); },
+              mouseout  : function (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) {
+              e.stopPropagation();
+            });
+          },
+
+          afterSetName: function () {
+            this.label.css('lineHeight', this.label.height() + 'px');
+          }
+        })
+      ],
+
+      addUserEventHandlers: $.noop,
+
+      afterInit: function () {
+        this.updatePosition();
+        this.viewPoint.fadeIn();
+      },
+
+      afterAddTracks: function () {
+        this.track = this.tracks[0];
+      },
+
+      afterAddDomElements: function () {
+        var karyotype = this;
+        var parent    = this.parent;
+
+        function hideTooltip() {
+          karyotype.hideTooltip = true;
+          karyotype.track.prop('container').tipsy('hide');
+        }
+
+        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;
+
+          if (start !== parent.start || end !== parent.end) {
+            parent.moveTo(karyotype.chr, start, end, true, e.type === 'dragstop');
+          }
+        }
+
+        if (pluginConf.karyotypeLabel === false) {
+          this.labelContainer.remove();
+          this.labelContainer = $();
+          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({
+          left  : labelWidth,
+          width : this.width - labelWidth
+        }).children().on({
+          mousemove : function (e) { karyotype.track.controller.click(e); },
+          mouseout  : function (e) {
+            var el = $(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;
+            }
+
+            karyotype.track.prop('container').tipsy('hide');
+            karyotype.track.prop('hoverFeature', false);
+          }
+        });
+
+        if (!parent.isStatic) {
+          this.viewPoint.draggable({
+            axis        : 'x',
+            containment : this.wrapper,
+            start       : hideTooltip,
+            stop        : updateLocation
+          }).resizable({
+            handles     : 'e, w',
+            containment : 'parent',
+            start       : hideTooltip,
+            stop        : updateLocation,
+            resize      : function (e, ui) {
+              ui.element.css('left', Math.max(0, ui.position.left));
+
+              if (ui.position.left > 0) {
+                ui.element.width(Math.min(ui.size.width, ui.element.parent().width() - ui.position.left));
+              } 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;
+
+        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);
+    }
+  }
+
+  function recreateKaryotype() {
+    var container = this.karyotype.container.parent();
+
+    this.karyotype.destroy();
+    container.remove();
+
+    createKaryotype.call(this);
+  }
+
+  this.on({
+    afterInit: createKaryotype,
+
+    afterSetRange: function () {
+      if (this.karyotype) {
+        this.karyotype.updatePosition();
+      }
+    },
+
+    afterSetWidth: recreateKaryotype,
+
+    afterMoveTo: function (chr) {
+      if (this.karyotype && this.karyotype.chr !== chr) {
+        recreateKaryotype.call(this);
+      }
+    }
+  });
+};

package/js/plugins/resizer.js

@@ -0,0 +1,45 @@
+Genoverse.Plugins.resizer = function () {
+  this.on('afterSetMVC', 'tracks', function () {
+    if (this.prop('resizable') !== true) {
+      return;
+    }
+
+    var track      = this;
+    var controller = this.controller;
+    var resizer    = this.prop('resizer');
+    var height     = this.prop('height');
+
+    if (!resizer) {
+      resizer = this.prop('resizer', $('<div class="gv-resizer gv-static"><div class="gv-handle"></div></div>').appendTo(track.prop('container')).draggable({
+        axis  : 'y',
+        start : function () { $('body').addClass('gv-dragging'); },
+        stop  : function (e, ui) {
+          $('body').removeClass('gv-dragging');
+          controller.resize(track.prop('height') + ui.position.top - ui.originalPosition.top, true);
+          $(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', function () {
+        var 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 () {
+    var resizer = this.prop('resizer');
+
+    if (resizer) {
+      resizer[this.expander && this.expander.is(':visible') ? 'addClass' : 'removeClass']('gv-resizer-expander');
+    }
+  });
+};

package/js/plugins/tooltips.js

@@ -0,0 +1,94 @@
+// tipsy, facebook style tooltips for jquery
+// version 1.0.0a
+// (c) 2008-2010 jason frame [jason@onehackoranother.com]
+// released under the MIT license
+
+Genoverse.Plugins.tooltips = function () {
+  var genoverse = this;
+
+  function toggleTooltips(browser, tooltips, action) {
+    var offset = browser.superContainer.offset();
+
+    tooltips = tooltips || browser.superContainer.find('.gv-tooltip');
+    action   = action   || $(this).toggleClass('gv-active').hasClass('gv-active') ? 'show' : 'hide';
+
+    tooltips.each(function () {
+      var el = $(this);
+
+      if (el.is(':visible')) {
+        el.tipsy(action).data('tipsy').$tip.data({ parent: el }).appendTo(browser.superContainer).css({
+          marginTop  : -offset.top,
+          marginLeft : -offset.left
+        });
+      } else if (el.data('tipsy').$tip) {
+        el.tipsy('hide');
+      }
+    });
+  }
+
+  function updateTooltips() {
+    var tooltips = $();
+
+    $.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();
+
+      if (!el.hasClass('gv-tooltip')) {
+        this[0].filter('.gv-tooltip').removeClass('gv-tooltip').tipsy('hide').removeData('tipsy');
+        el.tipsy(this[1]).addClass('gv-tooltip');
+      }
+
+      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');
+      return parent && genoverse.superContainer.find(parent).length;
+    }).remove();
+
+    if (genoverse.controlPanel.find('.gv-tooltips').hasClass('gv-active')) {
+      toggleTooltips(genoverse, tooltips, 'show');
+    }
+
+    return tooltips;
+  }
+
+  this.controls.push({
+    icon   : '<i class="fas fa-question-circle"></i>',
+    class  : 'gv-tooltips',
+    name   : 'Tooltips',
+    action : toggleTooltips
+  });
+
+  this.on('afterInit', function () {
+    this.superContainer.find('.gv-panel-left  .gv-button-set[title]').tipsy({ gravity: 'w', fade: true, trigger: 'manual' }).addClass('gv-tooltip');
+    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({
+      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'
+    }).addClass('gv-tooltip');
+
+    updateTooltips();
+  });
+
+  this.on('beforeSetWidth', function () {
+    this.controlPanel.find('.gv-tooltips.gv-active').trigger('click');
+  });
+
+  this.on('afterSortTracks', function () {
+    updateTooltips();
+  });
+
+  this.on('afterResize', 'tracks', function () {
+    updateTooltips();
+  });
+};
+
+Genoverse.Plugins.tooltips.requires = 'controlPanel';

package/js/plugins/trackControls.js

@@ -0,0 +1,143 @@
+Genoverse.Plugins.trackControls = function () {
+  var defaultControls = [
+    $('<a title="More info" class="fas fa-question-circle">').on('click', function () {
+      var track = $(this).data('track');
+      var menu  = track.prop('menus').filter('.gv-track-info');
+
+      if (!menu.length) {
+        var info = track.prop('info');
+
+        menu = { title: track.name };
+        menu[typeof info === 'function' ? info.call(track) : info || ''] = '';
+
+        menu = track.prop('menus', track.prop('menus').add(track.browser.makeMenu(menu).addClass('gv-track-info')));
+      }
+
+      menu.show().position({ of: track.prop('container'), at: 'center top', my: 'center top', collision: 'none' });
+    }),
+
+    $(
+      '<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 () {
+        var track = $(this).data('track');
+        var 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');
+        }
+
+        $(this).trigger('toggleState');
+
+        track.controller.resize(height, true);
+      },
+      toggleState: function () { // custom event to set title and change the icon
+        var track      = $(this).data('track');
+        var autoHeight = track.prop('autoHeight');
+        var resizer    = track.prop('resizer');
+
+        this.title = autoHeight ? 'Set track to fixed height' : 'Set track to auto-adjust height';
+        $(this)[autoHeight ? 'addClass' : 'removeClass']('gv-auto-height');
+
+        if (resizer) {
+          resizer[autoHeight ? 'hide' : 'show']();
+        }
+      }
+    })
+  ];
+
+  var remove = $('<a title="Remove track" class="far fa-trash-alt">').on('click', function () {
+    $(this).data('track').remove();
+  });
+
+  var toggle = $(
+    '<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 () {
+    $(this).parent().toggleClass('gv-maximized');
+  });
+
+  this.on({
+    afterAddDomElements: function () {
+      var controls = this.prop('controls');
+
+      if (controls === 'off') {
+        return;
+      }
+
+      var defaultConfig = this.prop('defaultConfig');
+      var savedConfig   = this.browser.savedConfig ? this.browser.savedConfig[this.prop('id')] || {} : {};
+      var prop, el, j;
+
+      controls = (controls || []).concat(defaultControls, this.prop('removable') === false ? [] : remove);
+
+      this.trackControls = $('<div class="gv-track-controls">').prependTo(this.container);
+
+      var controlsContainer = $('<div class="gv-track-controls-container">').appendTo(this.trackControls);
+
+      for (var i = 0; i < controls.length; i++) {
+        if ($.isPlainObject(controls[i]) && controls[i].type) {
+          el = $('<' + controls[i].type + '>').data('control', controls[i].name);
+
+          if (controls[i].options) {
+            for (j = 0; j < controls[i].options.length; j++) {
+              el.append('<option value="' + controls[i].options[j].value + '">' + controls[i].options[j].text + '</option>');
+            }
+          }
+        } else if (typeof controls[i] === 'string') {
+          el = $(controls[i]);
+        } else if (typeof controls[i] === 'object' && controls[i].constructor && controls[i] instanceof $) {
+          el = controls[i].clone(true);
+        }
+
+        el.data('track', this.track).appendTo(controlsContainer);
+
+        // TODO: other control types
+        if (el.is('select')) {
+          prop = el.data('control');
+
+          el.find('option[value=' + (savedConfig[prop] || defaultConfig[prop] || 'all') + ']').attr('selected', true).end().change(function () {
+            $(this).data('track').setConfig($(this).data('control'), this.value);
+          });
+        }
+      }
+
+      this.prop('heightToggler', controlsContainer.children('.gv-height-toggle').trigger('toggleState'));
+
+      var 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 () {
+      var heightToggler = this.prop('heightToggler');
+
+      if (this.prop('resizable') === true && heightToggler) {
+        heightToggler[this.prop('autoHeight') ? 'addClass' : 'removeClass']('gv-auto-height');
+        heightToggler.trigger('toggleState');
+      }
+    },
+    afterSetMVC: function () {
+      var heightToggler = this.prop('heightToggler');
+
+      if (heightToggler) {
+        heightToggler.trigger('toggleState')[this.prop('resizable') === true ? 'removeClass' : 'addClass']('gv-hide');
+      }
+    }
+  }, 'tracks');
+};

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "genoverse",
+  "version": "3.2.0",
+  "description": "Genoverse is a portable, customizable, back-end independent JavaScript and HTML5 based genome browser which allows the user to explore data in a dynamic and interactive manner.",
+  "main": "js/Genoverse.js",
+  "directories": {
+    "lib": "js",
+    "test": "test"
+  },
+  "scripts": {
+    "test": "jest",
+    "build": "yarn lint && node utils/makeExpanded.js && webpack",
+    "lint": "eslint '**/*.js'",
+    "server": "node utils/devServer.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wtsi-web/Genoverse.git"
+  },
+  "author": "Simon Brent",
+  "license": "BSD-3-Clause",
+  "bugs": {
+    "url": "https://github.com/wtsi-web/Genoverse/issues"
+  },
+  "homepage": "https://wtsi-web.github.io/Genoverse/",
+  "devDependencies": {
+    "@babel/core": "^7.16.7",
+    "@babel/eslint-parser": "^7.16.5",
+    "@babel/runtime-corejs3": "^7.16.7",
+    "canvas": "^2.8.0",
+    "core-js": "^3.20.2",
+    "eslint": "^8.6.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-plugin-align-assignments": "^1.1.2",
+    "eslint-plugin-es": "^4.1.0",
+    "eslint-plugin-import": "^2.25.4",
+    "jest": "^27.4.7",
+    "terser-webpack-plugin": "^5.3.0",
+    "webpack": "^5.65.0",
+    "webpack-cli": "^4.9.1"
+  },
+  "dependencies": {}
+}