genoverse 3.2.0 → 4.0.0-beta1

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

@@ -1,4 +1,8 @@
-Genoverse.Track.HighlightRegion = Genoverse.Track.extend({
+import Track, { Model, View } from '../../Track';
+import StrandedController     from '../Controller/Stranded';
+import StrandedModel          from '../Model/Stranded';
+
+export default Track.extend({
   id               : 'highlights',
   unsortable       : true,
   fixedOrder       : true,
@@ -17,45 +21,47 @@ Genoverse.Track.HighlightRegion = Genoverse.Track.extend({
   featureMargin    : { top: 13, right: 0, bottom: 0, left: 0 },
   margin           : 0,
 
-  constructor: function () {
+  constructor: function (...args) {
     this.colorIndex = 0;
-    return this.base.apply(this, arguments);
+
+    return this.base(...args);
   },
 
   addHighlights: function (highlights) {
-    for (var i = 0; i < highlights.length; i++) {
-      this.model.insertFeature($.extend({ label: (highlights[i].start + '-' + highlights[i].end) }, highlights[i]));
-    }
+    highlights.forEach(
+      highlight => this.model.insertFeature({ label: `${highlight.start}-${highlight.end}`, ...highlight })
+    );
 
     this.reset();
   },
 
   removeHighlights: function (highlights) {
-    var featuresByChr = this.prop('featuresByChr');
-    var featuresById  = this.prop('featuresById');
-    var features, bounds, h;
+    const featuresByChr = this.prop('featuresByChr');
+    const featuresById  = this.prop('featuresById');
 
-    highlights = highlights || $.map(featuresById, function (f) { return f; });
+    highlights = highlights || Object.values(featuresById);
 
-    for (var i = 0; i < highlights.length; i++) {
-      if (highlights[i].removable === false) {
-        continue;
-      }
+    highlights.forEach(
+      (highlight) => {
+        if (highlight.removable === false) {
+          return;
+        }
 
-      features = featuresByChr[highlights[i].chr];
-      bounds   = { x: highlights[i].start, y: 0, w: highlights[i].end - highlights[i].start + 1, h: 1 };
+        const features = featuresByChr[highlight.chr];
+        const bounds   = { x: highlight.start, y: 0, w: highlight.end - highlight.start + 1, h: 1 };
 
-      // RTree.remove only works if the second argument (the object to be removed) === the object found in the tree.
-      // Here, while highlight is effectively the same object as the one in the tree, it has been cloned, so the === check fails.
-      // To fix this, search for the feature to remove in the location of highlight.
-      h = $.grep(features.search(bounds), function (item) { return item.id === highlights[i].id; }); // eslint-disable-line no-loop-func
+        // RTree.remove only works if the second argument (the object to be removed) === the object found in the tree.
+        // Here, while highlight is effectively the same object as the one in the tree, it has been cloned, so the === check fails.
+        // To fix this, search for the feature to remove in the location of highlight.
+        const h = features.search(bounds).filter(item => item.id === highlight.id);
 
-      if (h.length) {
-        features.remove(bounds, h[0]);
-      }
+        if (h.length) {
+          features.remove(bounds, h[0]);
+        }
 
-      delete featuresById[highlights[i].id];
-    }
+        delete featuresById[highlight.id];
+      }
+    );
 
     if (this.prop('strand') === 1) {
       this.prop('reverseTrack').removeHighlights(highlights);
@@ -64,7 +70,7 @@ Genoverse.Track.HighlightRegion = Genoverse.Track.extend({
     this.reset();
   },
 
-  controller: Genoverse.Track.Controller.Stranded.extend({
+  controller: StrandedController.extend({
     setDefaults: function () {
       if (this.prop('strand') === -1) {
         this.prop('labels', false);
@@ -91,8 +97,10 @@ Genoverse.Track.HighlightRegion = Genoverse.Track.extend({
         params.background = 'gv-full-height';
       }
 
-      var rtn = this.base(params);
+      const rtn = this.base(params);
+
       params.container.addClass(params.background);
+
       return rtn;
     },
 
@@ -107,59 +115,65 @@ Genoverse.Track.HighlightRegion = Genoverse.Track.extend({
     },
 
     populateMenu: function (features) {
-      var menu = [];
-      var location, m;
+      const menu = [];
 
       if (features.length > 1) {
         menu.push({ title: 'Highlights' });
       }
 
-      for (var i = 0; i < features.length; i++) {
-        location = features[i].start + '-' + features[i].end;
-        m        = {
-          title : features[i].label ? features[i].label[0] : location,
-          start : false
-        };
+      features.forEach(
+        (feature) => {
+          const location = `${feature.start}-${feature.end}`;
+          const m        = {
+            title : feature.label ? feature.label[0] : location,
+            start : false,
+          };
 
-        m[m.title === location ? 'title' : 'Location'] = features[i].chr + ':' + location;
-        m['<a class="gv-focus-highlight" href="#" data-chr="' + features[i].chr + '" data-start="' + features[i].start + '" data-end="' + features[i].end + '">Focus here</a>'] = '';
+          m[m.title === location ? 'title' : 'Location']                                                                                               = `${feature.chr}:${location}`;
+          m[`<a class="gv-focus-highlight" href="#" data-chr="${feature.chr}" data-start="${feature.start}" data-end="${feature.end}">Focus here</a>`] = '';
 
-        if (features[i].removable !== false) {
-          m['<a class="gv-remove-highlight"  href="#" data-id="' + features[i].id + '">Remove this highlight</a>'] = '';
-          m['<a class="gv-remove-highlights" href="#">Remove all highlights</a>'] = '';
-        }
+          if (feature.removable !== false) {
+            m[`<a class="gv-remove-highlight"  href="#" data-id="${feature.id}">Remove this highlight</a>`] = '';
+            m['<a class="gv-remove-highlights" href="#">Remove all highlights</a>']                         = '';
+          }
 
-        menu.push(m);
-      }
+          menu.push(m);
+        }
+      );
 
       return menu;
     },
 
-    click: function () {
+    click: function (...args) {
+      const jQuery = this.browser.jQuery;
+
       if (this.prop('strand') !== 1) {
         return;
       }
 
-      var menuEl = this.base.apply(this, arguments);
+      const menuEl = this.base(...args);
 
       if (menuEl && !menuEl.data('highlightEvents')) {
-        var track = this.track;
+        const track = this.track;
 
         menuEl.find('.gv-remove-highlight').on('click', function () {
-          var id = $(this).data('id');
-          track.removeHighlights($.grep(menuEl.data('feature'), function (f) { return f.id === id; }));
+          const id = jQuery(this).data('id');
+
+          track.removeHighlights(menuEl.data('feature').filter(f => f.id === id));
+
           return false;
         });
 
-        menuEl.find('.gv-remove-highlights').on('click', function () {
+        menuEl.find('.gv-remove-highlights').on('click', () => {
           track.removeHighlights();
+
           return false;
         });
 
         menuEl.find('.gv-focus-highlight').on('click', function () {
-          var data    = $(this).data();
-          var length  = data.end - data.start + 1;
-          var context = Math.max(Math.round(length / 4), 25);
+          const data    = jQuery(this).data();
+          const length  = data.end - data.start + 1;
+          const context = Math.max(Math.round(length / 4), 25);
 
           track.browser.moveTo(data.chr, data.start - context, data.end + context, true);
 
@@ -171,38 +185,39 @@ Genoverse.Track.HighlightRegion = Genoverse.Track.extend({
     },
 
     getClickedFeatures: function (x, y) {
-      var seen     = {};
-      var scale    = this.scale;
-      var features = $.grep(
-        // feature positions
-        this.featurePositions.search({ x: x, y: y, w: 1, h: 1 }).concat(
-          // plus label positions where the labels are visible
-          $.grep(this.labelPositions.search({ x: x, y: y, w: 1, h: 1 }), function (f) {
-            return f.position[scale].label.visible !== false;
-          })
-        ),
-        function (f) {
+      const seen     = {};
+      const scale    = this.scale;
+      const features =
+      this.featurePositions.search({ x: x, y: y, w: 1, h: 1 }).concat( // feature positions
+        this.labelPositions.search({ x: x, y: y, w: 1, h: 1 }).filter(// plus label positions where the labels are visible
+          f => f.position[scale].label.visible !== false
+        )
+      ).filter(
+        (f) => {
           // with duplicates removed
-          var rtn = !seen[f.id];
+          const rtn = !seen[f.id];
+
           seen[f.id] = true;
+
           return rtn;
         }
       );
 
       return features.length ? [ this.model.sortFeatures(features) ] : false;
-    }
+    },
   }),
 
-  model: Genoverse.Track.Model.Stranded.extend({
+  model: StrandedModel.extend({
     url: false,
 
     insertFeature: function (feature) {
-      feature.id   = feature.chr + ':' + feature.start + '-' + feature.end;
+      feature.id   = `${feature.chr}:${feature.start}-${feature.end}`;
       feature.sort = feature.start;
 
       if (!feature.color) {
-        var colors = this.prop('colors');
-        var i      = this.prop('colorIndex');
+        const colors = this.prop('colors');
+
+        let i = this.prop('colorIndex');
 
         feature.color = colors[i++];
 
@@ -214,14 +229,14 @@ Genoverse.Track.HighlightRegion = Genoverse.Track.extend({
       }
     },
 
-    findFeatures: function () {
-      return Genoverse.Track.Model.prototype.findFeatures.apply(this, arguments);
-    }
+    findFeatures: function (...args) {
+      return Model.prototype.findFeatures.call(this, ...args);
+    },
   }),
 
-  view: Genoverse.Track.View.extend({
+  view: View.extend({
     positionFeatures: function (features, params) {
-      var rtn = this.base.apply(this, arguments);
+      const rtn = this.base(features, params);
 
       // featureMargin.top gets used to define params.featureHeight, which is used to determine canvas height.
       // Since featureMargin.top = 13 on forward strand, the canvas has a 13px space at the bottom, meaning there is a gap before the background starts.
@@ -241,30 +256,40 @@ Genoverse.Track.HighlightRegion = Genoverse.Track.extend({
     },
 
     drawBackground: function (features, context, params) {
+      const jQuery = this.browser.jQuery;
+
       if (this.prop('strand') === -1) {
         return;
       }
 
-      for (var i = 0; i < features.length; i++) {
-        context.fillStyle = features[i].color;
-
-        this.drawFeature($.extend(true, {}, features[i], {
-          x           : features[i].position[params.scale].X,
-          y           : 0,
-          width       : features[i].position[params.scale].width,
-          height      : context.canvas.height,
-          color       : this.shadeColor(context.fillStyle, 0.8),
-          border      : features[i].color,
-          label       : false,
-          decorations : true
-        }), context, false, params.scale);
-      }
+      features.forEach(
+        (feature) => {
+          context.fillStyle = feature.color;
+
+          this.drawFeature(
+            jQuery.extend(true, {}, feature, {
+              x           : feature.position[params.scale].X,
+              y           : 0,
+              width       : feature.position[params.scale].width,
+              height      : context.canvas.height,
+              color       : this.shadeColor(context.fillStyle, 0.8),
+              border      : feature.color,
+              label       : false,
+              decorations : true,
+            }),
+            context,
+            false,
+            params.scale
+          );
+        }
+      );
     },
 
     decorateFeature: function (feature, context) {
-      var x1   = feature.x + 0.5;
-      var x2   = x1 + feature.width;
-      var draw = false;
+      const x1 = feature.x + 0.5;
+      const x2 = x1 + feature.width;
+
+      let draw = false;
 
       context.strokeStyle = feature.border;
       context.lineWidth   = 2;
@@ -287,6 +312,6 @@ Genoverse.Track.HighlightRegion = Genoverse.Track.extend({
       }
 
       context.lineWidth = 1;
-    }
-  })
+    },
+  }),
 });

package/src/js/Track/library/Legend.js

@@ -0,0 +1,258 @@
+import Static, { Controller as StaticController, Model as StaticModel, View as StaticView } from './Static';
+
+const Controller = StaticController.extend({
+  init: function () {
+    this.base();
+
+    this.container.addClass('gv-track-container-legend');
+
+    this.browser.legends[this.track.id] = this.track;
+
+    this.track.setTracks();
+  },
+
+  destroy: function () {
+    delete this.browser.legends[this.prop('id')];
+    this.base();
+  },
+});
+
+const Model = StaticModel.extend({
+  findFeatures: function () {
+    const bounds   = { x: this.browser.scaledStart, y: 0, w: this.width };
+    const features = this.track.tracks.flatMap(
+      (track) => {
+        const featurePositions = track.prop('featurePositions');
+        const $bounds          = { ...bounds, h: track.prop('height') };
+
+        return featurePositions ? featurePositions.search($bounds).concat(track.prop('labelPositions').search($bounds)) : [];
+      }
+    ).reduce(
+      (acc, feature) => {
+        if (Array.isArray(feature.legend)) {
+          feature.legend.forEach((legend) => { acc[legend.label] = legend.color; });
+        } else if (feature.legend) {
+          acc[feature.legend] = feature.legendColor || feature.color;
+        }
+
+        return acc;
+      },
+      {}
+    );
+
+    return this.sortFeatures(
+      Object.entries(features).map(([ text, color ]) => [ text, color ])
+    );
+  },
+
+  sortFeatures: function (features) {
+    // sort legend alphabetically
+    return features.sort((a, b) => a[0].localeCompare(b[0]));
+  },
+});
+
+const View = StaticView.extend({
+  textColor     : '#000000',
+  labels        : 'overlay',
+  featureHeight : 12,
+
+  positionFeatures: function (features, params) {
+    if (params.positioned) {
+      return features;
+    }
+
+    const cols = 2;
+    const pad  = 5;
+    const w    = 20;
+
+    let x = 0;
+    let y = 0;
+
+    const xScale    = this.width / cols;
+    const yScale    = this.fontHeight + pad;
+    const xOffest   = params.xOffset || 0;
+    const $features = [];
+
+    features.forEach(
+      ([ text, color ]) => {
+        const xPos       = (x * xScale) + pad;
+        const yPos       = (y * yScale) + pad;
+        const labelWidth = this.context.measureText(text).width;
+
+        $features.push(
+          { x: xPos + xOffest,           y: yPos, width: w,              height: this.featureHeight, color: color },
+          { x: xPos + xOffest + pad + w, y: yPos, width: labelWidth + 1, height: this.featureHeight, color: false, labelColor: this.textColor, labelWidth: labelWidth, label: text }
+        );
+
+        if (++x === cols) {
+          x = 0;
+          y++;
+        }
+      }
+    );
+
+    params.height     = this.prop('height', features.length ? ((y + (x ? 1 : 0)) * yScale) + pad : 0);
+    params.width      = this.width;
+    params.positioned = true;
+
+    return this.base($features, params);
+  },
+});
+
+export default Static.extend({
+  isLegend    : true, // For duck-typing
+  unsortable  : true,
+  lockToTrack : true, // Always put the legend just below the last track that the legend is for
+  removable   : false,
+
+  controller : Controller,
+  model      : Model,
+  view       : View,
+
+  setDefaults: function () {
+    this.order = typeof this.order !== 'undefined' ? this.order : 9e99;
+    this.id    = this.id   || 'legend';
+    this.type  = this.type || 'legend';
+    this.base();
+  },
+
+  setEvents: function () {
+    this.browser.on({
+      'afterAddTracks afterRemoveTracks': function () {
+        if (this.destroying) {
+          return;
+        }
+
+        Object.values(this.legends).forEach(
+          legend => legend.setTracks()
+        );
+
+        this.sortTracks();
+      },
+      afterRemoveTracks: function (tracks) {
+        if (this.destroying) {
+          return;
+        }
+
+        tracks.forEach(
+          (track) => {
+            if (track.legendTrack && track.legendTrack.tracks.length === 0) {
+              track.legendTrack.remove();
+            }
+          }
+        );
+
+        Object.values(this.legends).forEach(
+          legend => legend.controller.makeImage({})
+        );
+      },
+      afterUpdateTrackOrder: function (e, ui) {
+        const track       = ui.item.data('track');
+        const legendTrack = this.legends[track.id] || track.legendTrack;
+
+        // If a legend track, or a track with a sortable legend has been reordered, its lockToTrack status is ignored from now on.
+        // This allows a legend to initially be locked to a track, but then to be reordered once the browser has been initialized
+        if (legendTrack && legendTrack.lockToTrack && legendTrack.unsortable === false) {
+          legendTrack.lockToTrack = false;
+        }
+
+        Object.values(this.legends).forEach(
+          legend => legend.updateOrder()
+        );
+
+        this.sortTracks();
+      },
+    });
+
+    this.browser.on(
+      {
+        afterPositionFeatures: function (features, params) {
+          const legend = this.prop('legendTrack');
+
+          if (legend) {
+            setTimeout(() => { legend.controller.makeImage(params); }, 1);
+          }
+        },
+        afterResize: function (height, userResize) {
+          const legend = this.prop('legendTrack');
+
+          if (legend && userResize === true) {
+            legend.controller.makeImage({});
+          }
+        },
+        afterCheckHeight: function () {
+          const legend = this.prop('legendTrack');
+
+          if (legend) {
+            legend.controller.makeImage({});
+          }
+        },
+        afterSetMVC: function () {
+          const legend = this.prop('legendTrack');
+
+          if (legend && legend.tracks.length) {
+            legend.disable();
+
+            if (this.legend !== false) {
+              legend.enable();
+            }
+          }
+        },
+      },
+      this
+    );
+  },
+
+  setTracks: function () {
+    const type = this.type;
+
+    this.tracks = this.browser.tracks.filter(
+      (track) => {
+        if (track.legendType === type) {
+          track.legendTrack = track.legendTrack || this;
+
+          return true;
+        }
+
+        return false;
+      }
+    ).flatMap(
+      track => [ track ].concat(
+        track.prop('childTracks'),
+        track.prop('parentTrack')
+      ).filter(
+        t => t && t !== this && !t.prop('disabled')
+      )
+    );
+
+    this.updateOrder();
+
+    if (typeof this.controller === 'object') {
+      this[this.tracks.length ? 'enable' : 'disable']();
+    } else {
+      this.disabled = !this.tracks.length;
+    }
+  },
+
+  updateOrder: function () {
+    if (this.lockToTrack) {
+      const tracks = this.tracks.filter(t => !t.prop('parentTrack'));
+
+      if (tracks.length) {
+        this.order = tracks[tracks.length - 1].order + 0.1;
+      }
+    }
+  },
+
+  enable: function () {
+    this.base();
+    this.controller.makeImage({});
+  },
+
+  disable: function () {
+    delete this.controller.stringified;
+    this.base();
+  },
+});
+
+export { Controller, Model, View };