genoverse 3.2.0 → 4.0.1

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

@@ -1,4 +1,6 @@
-Genoverse.Track.Chromosome = Genoverse.Track.extend({
+import Track from '../../Track';
+
+export default Track.extend({
   id            : 'chromosome',
   margin        : 1,
   featureMargin : { top: 0, right: 0, bottom: 0, left: 0 },
@@ -16,23 +18,26 @@ Genoverse.Track.Chromosome = Genoverse.Track.extend({
     gpos66  : '#7F7F7F',
     gpos75  : '#666666',
     gvar    : '#E0E0E0',
-    stalk   : '#708090'
+    stalk   : '#708090',
   },
   labelColors: {
     gneg   : '#000000',
     gvar   : '#000000',
     gpos25 : '#000000',
-    gpos33 : '#000000'
+    gpos33 : '#000000',
   },
 
   getData: function (chr, start, end) {
-    this.receiveData($.extend(true, [], this.browser.genome[chr].bands), chr, start, end);
-    return $.Deferred().resolveWith(this);
+    const jQuery = this.browser.jQuery;
+
+    this.receiveData(jQuery.extend(true, [], this.browser.genome[chr].bands), chr, start, end);
+
+    return jQuery.Deferred().resolveWith(this);
   },
 
   insertFeature: function (feature) {
     feature.label      = feature.type === 'acen' || feature.type === 'stalk' ? false : feature.id;
-    feature.menuTitle  = feature.id ? feature.chr + feature.id : feature.chr + ':' + feature.start + '-' + feature.end;
+    feature.menuTitle  = feature.id ? feature.chr + feature.id : `${feature.chr}:${feature.start}-${feature.end}`;
     feature.color      = this.prop('colors')[feature.type]      || '#FFFFFF';
     feature.labelColor = this.prop('labelColors')[feature.type] || '#FFFFFF';
 
@@ -64,7 +69,7 @@ Genoverse.Track.Chromosome = Genoverse.Track.extend({
       featureContext.fill();
       featureContext.stroke();
     } else if (feature.type === 'stalk') {
-      for (var i = 0; i < 2; i++) {
+      for (let i = 0; i < 2; i++) {
         featureContext.beginPath();
 
         featureContext.moveTo(feature.x, 0.5);
@@ -84,11 +89,11 @@ Genoverse.Track.Chromosome = Genoverse.Track.extend({
 
       featureContext.beginPath();
 
-      var chrSize = this.browser.getChromosomeSize(feature.chr);
+      const chrSize = this.browser.getChromosomeSize(feature.chr);
 
       if (feature.start === 1 || feature.end === chrSize) {
         if (feature.start === 1) {
-          var end = feature.x + feature.width - (feature.end === chrSize ? 5 : 0);
+          const end = feature.x + feature.width - (feature.end === chrSize ? 5 : 0);
 
           featureContext.clearRect(0, 0, 5, feature.height + 0.5);
 
@@ -128,18 +133,18 @@ Genoverse.Track.Chromosome = Genoverse.Track.extend({
     }
   },
 
-  drawLabel: function (feature) {
+  drawLabel: function (feature, ...args) {
     if ((feature.start === 1 || feature.end === this.browser.getChromosomeSize(feature.chr)) && feature.labelWidth >= Math.floor(feature.width - 5)) {
       return;
     }
 
-    this.base.apply(this, arguments);
+    this.base(feature, ...args);
   },
 
   populateMenu: function (feature) {
     return {
       title    : feature.menuTitle,
-      Position : feature.chr + ':' + feature.start + '-' + feature.end
+      Position : `${feature.chr}:${feature.start}-${feature.end}`,
     };
-  }
+  },
 });

package/src/js/Track/library/File/BAM.js

@@ -0,0 +1,34 @@
+import Model from '../../Model/File/BAM';
+import View  from '../../View/Sequence';
+import Track from '../File';
+
+export default Track.extend({
+  name      : 'BAM',
+  indexExt  : '.bai',
+  threshold : 100000,
+  largeFile : true,
+  model     : Model,
+  view      : View.extend({
+    bump       : true,
+    autoHeight : true,
+  }),
+
+  click: function (...args) {
+    const menu = this.base(...args);
+
+    if (menu) {
+      menu.addClass('gv-wrap-values');
+    }
+
+    return menu;
+  },
+
+  populateMenu: function (feature) {
+    const f = { title: feature.readName, ...feature };
+
+    delete f.sequence;
+    delete f.id;
+
+    return this.base(f);
+  },
+});

package/src/js/Track/library/File/BED.js

@@ -0,0 +1,27 @@
+import Model from '../../Model/File/BED';
+import Track from '../File';
+
+export default Track.extend({
+  name                : 'BED',
+  model               : Model,
+  bump                : true,
+  featureHeight       : 10,
+  thickHeight         : 10,
+  thinHeight          : 7,
+  subFeatureJoinStyle : 'curve',
+
+  populateMenu: function (feature) {
+    const fields = [ false, false, false, 'name', 'score', 'strand', 'thickStart', 'thickEnd', 'itemRgb', 'blockCount', 'blockSizes', 'blockStarts' ]; // First three fields are chr, start, end which are covered by Location
+
+    return feature.originalFeature.reduce((menu, val, i) => {
+      if (fields[i]) {
+        menu[fields[i]] = val;
+      }
+
+      return menu;
+    }, {
+      title    : '<a target="_blank" href="https://genome.ucsc.edu/FAQ/FAQformat.html#format1">BED feature details</a>',
+      Location : `${feature.chr}:${feature.start}-${feature.end}`,
+    });
+  },
+});

package/src/js/Track/library/File/BIGBED.js

@@ -0,0 +1,51 @@
+import BWReader                        from '../../../lib/BWReader';
+import { URLFetchable, BlobFetchable } from '../../../lib/dalliance/bin';
+import Model                           from '../../Model/File/BED';
+import Track                           from './BED';
+
+export default Track.extend({
+  name  : 'bigbed',
+  model : Model.extend({
+    getData: function (chr, start, end) {
+      const jQuery   = this.browser.jQuery;
+      const deferred = jQuery.Deferred();
+
+      if (!this.bigbedFile) {
+        this.bigbedFile = this.bigbedFile || (this.url ? new URLFetchable(this.url) : new BlobFetchable(this.track.dataFile));
+      }
+
+      const d = jQuery.Deferred().done(() => {
+        this.bwReader.getValues(chr, start, end, (features, error) => {
+          if (!error) {
+            features.sort((a, b) => a.start - b.start);
+
+            if (features.length) {
+              this.receiveData(features, chr, features[0].start, features[features.length - 1].end);
+            } else {
+              this.receiveData(features, chr, start, end);
+            }
+          }
+
+          deferred.resolve();
+        });
+      });
+
+      if (this.bwReader) {
+        d.resolve();
+      } else {
+        new BWReader(this.bigbedFile, ((bwReader) => { // eslint-disable-line no-new
+          if (bwReader) {
+            this.bwReader = bwReader;
+            d.resolve();
+          } else {
+            this.receiveData([], chr, start, end);
+
+            return deferred.resolve();
+          }
+        }));
+      }
+
+      return deferred;
+    },
+  }),
+});

package/src/js/Track/library/File/BIGWIG.js

@@ -0,0 +1,54 @@
+import BWReader                        from '../../../lib/BWReader';
+import { URLFetchable, BlobFetchable } from '../../../lib/dalliance/bin';
+import Track                           from '../Graph/Bar';
+
+export default Track.extend({
+  name   : 'bigwig',
+  height : 100,
+
+  setDefaults: function (...args) {
+    this.bwReader = null; // Not part of model since it needs to be shared between bar and line graphs
+    this.base(...args);
+  },
+
+  getData: function (chr, start, end) {
+    const deferred = this.browser.jQuery.Deferred();
+
+    if (!this.bigwigFile) {
+      this.bigwigFile = this.bigwigFile || (this.url ? new URLFetchable(this.url) : new BlobFetchable(this.track.dataFile));
+    }
+
+    const d = this.browser.jQuery.Deferred().done(() => {
+      this.prop('bwReader').getValues(chr, start, end, (features, error) => {
+        if (!error) {
+          features.sort((a, b) => a.start - b.start);
+
+          if (features.length) {
+            this.receiveData(features, chr, features[0].start, features[features.length - 1].end);
+          } else {
+            this.receiveData(features, chr, start, end);
+          }
+        }
+
+        deferred.resolve();
+      });
+    });
+
+    if (this.prop('bwReader')) {
+      d.resolve();
+    } else {
+      new BWReader(this.bigwigFile, ((bwReader) => { // eslint-disable-line no-new
+        if (bwReader) {
+          this.prop('bwReader', bwReader);
+          d.resolve();
+        } else {
+          this.receiveData([], chr, start, end);
+
+          return deferred.resolve();
+        }
+      }));
+    }
+
+    return deferred;
+  },
+});

package/src/js/Track/library/File/GFF.js

@@ -0,0 +1,10 @@
+import Model from '../../Model/File/GFF';
+import Track from '../File';
+
+export default Track.extend({
+  name          : 'GFF',
+  model         : Model,
+  bump          : true,
+  height        : 100,
+  featureHeight : 5,
+});

package/{js → src/js}/Track/library/File/VCF.js

@@ -1,7 +1,12 @@
-Genoverse.Track.File.VCF = Genoverse.Track.File.extend({
+import Model        from '../../Model/File/VCF';
+import View         from '../../View';
+import SequenceView from '../../View/Sequence';
+import Track        from '../File';
+
+export default Track.extend({
   name       : 'VCF',
   indexExt   : '.tbi',
-  model      : Genoverse.Track.Model.File.VCF,
+  model      : Model,
   autoHeight : false,
   maxQual    : undefined, // Set this to the maximum value of the QUAL field in the file in order to color features by QUAL. Only required for large (tabix indexed) files - small ones can calculate this value automatically
 
@@ -21,51 +26,53 @@ Genoverse.Track.File.VCF = Genoverse.Track.File.extend({
       ALT    : feature.originalFeature[4],
       QUAL   : feature.originalFeature[5],
       FILTER : feature.originalFeature[6],
-      INFO   : feature.originalFeature[7].split(';').join('<br />')
+      INFO   : feature.originalFeature[7].split(';').join('<br />'),
     };
   },
 
   1: {
-    view: Genoverse.Track.View.Sequence.extend({
+    view: SequenceView.extend({
       bump          : true,
       labels        : false,
       featureMargin : { top: 0, right: 0, bottom: 0, left: 0 },
 
       draw: function (features, featureContext, labelContext, scale) {
-        this.base.apply(this, arguments);
+        this.base(features, featureContext, labelContext, scale);
         this.highlightRef(features, featureContext, scale);
       },
 
       highlightRef: function (features, context, scale) {
         context.strokeStyle = 'black';
 
-        for (var i = 0; i < features.length; i++) {
-          if (features[i].allele === 'REF') {
-            context.strokeRect(features[i].position[scale].X, features[i].position[scale].Y, features[i].position[scale].width, features[i].position[scale].height);
+        features.forEach(
+          (feature) => {
+            if (feature.allele === 'REF') {
+              context.strokeRect(feature.position[scale].X, feature.position[scale].Y, feature.position[scale].width, feature.position[scale].height);
+            }
           }
-        }
-      }
-    })
+        );
+      },
+    }),
   },
 
   1000: {
-    view: Genoverse.Track.View.extend({
+    view: View.extend({
       bump   : false,
       labels : false,
 
-      drawFeature: function (feature) {
-        var maxQual = this.prop('maxQual');
+      drawFeature: function (feature, ...args) {
+        const maxQual = this.prop('maxQual');
 
         if (maxQual && !feature.color) {
-          var heat  = Math.min(255, Math.floor((255 * (feature.originalFeature[5] || 0)) / maxQual)) - 127;
-          var red   = heat > 0 ? 255 : 127 + heat;
-          var green = heat < 0 ? 255 : 127 - heat;
+          const heat  = Math.min(255, Math.floor((255 * (feature.originalFeature[5] || 0)) / maxQual)) - 127;
+          const red   = heat > 0 ? 255 : 127 + heat;
+          const green = heat < 0 ? 255 : 127 - heat;
 
-          feature.color = 'rgb(' + red + ',' + green + ',0)';
+          feature.color = `rgb(${red},${green},0)`;
         }
 
-        this.base.apply(this, arguments);
-      }
-    })
-  }
+        this.base(feature, ...args);
+      },
+    }),
+  },
 });

package/src/js/Track/library/File/WIG.js

@@ -0,0 +1,8 @@
+import Model from '../../Model/File/WIG';
+import Track from '../Graph/Bar';
+
+export default Track.extend({
+  model  : Model,
+  name   : 'wig',
+  height : 100,
+});

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

@@ -1,4 +1,6 @@
-Genoverse.Track.File = Genoverse.Track.extend({
+import Track from '../../Track';
+
+export default Track.extend({
   setInterface: function () {
     this.base();
 
@@ -6,5 +8,5 @@ Genoverse.Track.File = Genoverse.Track.extend({
     this._interface.dataFile  = 'model';
     this._interface.indexFile = 'model';
     this._interface.largeFile = 'model';
-  }
+  },
 });

package/src/js/Track/library/Gene.js

@@ -0,0 +1,44 @@
+import Track           from '../../Track';
+import GeneModel       from '../Model/Gene/Ensembl';
+import TranscriptModel from '../Model/Transcript/Ensembl';
+import GeneView        from '../View/Gene/Ensembl';
+import TranscriptView  from '../View/Transcript/Ensembl';
+import Legend           from './Legend';
+
+export default Track.extend({
+  id     : 'genes',
+  name   : 'Genes',
+  height : 200,
+  legend : Legend,
+
+  populateMenu: function (feature) {
+    const url  = `https://www.ensembl.org/Homo_sapiens/${feature.feature_type === 'transcript' ? 'Transcript' : 'Gene'}/Summary?${feature.feature_type === 'transcript' ? 't' : 'g'}=${feature.id}`;
+    const menu = {
+      title    : `<a target="_blank" href="${url}">${feature.external_name ? `${feature.external_name} (${feature.id})` : feature.id}</a>`,
+      Location : `${feature.chr}:${feature.start}-${feature.end}`,
+      Source   : feature.source,
+      Biotype  : feature.biotype,
+    };
+
+    if (feature.feature_type === 'transcript') {
+      menu.Gene = `<a target="_blank" href="https://www.ensembl.org/Homo_sapiens/Gene/Summary?g=${feature.Parent}">${feature.Parent}</a>`;
+    }
+
+    return menu;
+  },
+
+  // Different settings for different zoom level
+  2000000: { // This one applies when > 2M base-pairs per screen
+    labels: false,
+  },
+  100000: { // more than 100K but less then 2M
+    labels : true,
+    model  : GeneModel,
+    view   : GeneView,
+  },
+  1: { // > 1 base-pair, but less then 100K
+    labels : true,
+    model  : TranscriptModel,
+    view   : TranscriptView,
+  },
+});

package/src/js/Track/library/Graph/Bar.js

@@ -0,0 +1,263 @@
+import Base                                                  from 'basejs';
+import Track,     { Model as TrackModel, View as TrackView } from '../Graph';
+import LineGraph, { Model as LineGraphModel }                from './Line';
+
+const Controller = {
+  getClickedFeatures: function (x, y) {
+    const yZero     = this.prop('marginTop') - (this.prop('range')[0] * this.track.getYScale());
+    const scale     = this.scale;
+    const tolerance = scale > 1 ? 0 : 1;
+
+    // Bars with negative values are stored in featurePositions with h < 0.
+    // While this works to a certain degree (fillRect allows negative height, drawing upwards from y), it makes them hard to search for in the RTree - to find such a feature you need to search with y = -h and h = y - h + 1
+    // It is therefore easier to search featuresByChr (i.e. the genomic positions) for a feature overlapping the x of the click, and then filter those results for y position manually.
+    let features = this.prop('featuresByChr')[this.browser.chr].search({
+      x : (x - (tolerance / 2)) / scale,
+      y : 0,
+      w : (1 + tolerance) / scale,
+      h : 1,
+    });
+
+    if (features.length) {
+      if (
+        (y <  yZero && features.filter(f => f.position[scale].bounds.y + f.position[scale].bounds.h <= y && f.position[scale].bounds.y >= y).length === 0) ||
+        (y >= yZero && this.featurePositions.search({ x: x, y: y, w: 1, h: 1 }).length === 0)
+      ) {
+        features = [];
+      }
+    }
+
+    return features.length ? [ this.model.sortFeatures(features) ] : [];
+  },
+
+  populateMenu: function (features) {
+    if (!features.length) {
+      return [];
+    }
+
+    const start = features[0].start;
+    const end   = features[features.length - 1].end;
+    const avg   = features[0].start !== features[features.length - 1].start;
+
+    let menu = { title: `${features[0].chr}:${start === end ? start : `${start}-${end}`}` };
+
+    function getValues(_features) {
+      const vals = _features.map(f => f.height).sort((a, b) => a - b);
+
+      return {
+        avg : vals.reduce((n, v) => n + v, 0) / vals.length,
+        min : vals[0],
+        max : vals[vals.length - 1],
+      };
+    }
+
+    if (avg) {
+      if (features.length === 1) {
+        const values = getValues(features);
+
+        menu['Average value'] = values.avg;
+        menu['Min value']     = values.min;
+        menu['Max value']     = values.max;
+      } else {
+        menu = [ menu ];
+
+        let datasets = this.prop('datasets');
+        let featuresByDataset;
+
+        if (datasets.length) {
+          featuresByDataset = datasets.reduce(
+            (acc, d) => Object.assign(acc, { [d.name]: [] }),
+            {}
+          );
+
+          features.forEach(
+            (feature) => {
+              featuresByDataset[feature.dataset].push(feature);
+            }
+          );
+        } else {
+          datasets          = [{ name: '' }];
+          featuresByDataset = { '': features };
+        }
+
+        datasets.forEach(
+          (dataset) => {
+            const values = getValues(featuresByDataset[dataset.name]);
+
+            menu.push({
+              Average : values.avg,
+              Min     : values.min,
+              Max     : values.max,
+              ...(dataset.name ? { title: dataset.name } : {}),
+            });
+          }
+        );
+      }
+    } else if (features.length === 1) {
+      menu.Value = features[0].height;
+    } else {
+      features.forEach(
+        (feature) => {
+          menu[feature.dataset] = feature.height;
+        }
+      );
+    }
+
+    return menu;
+  },
+};
+
+const Model = TrackModel.extend({
+  insertFeature: function (feature, ...args) {
+    const datasets = this.prop('datasets');
+
+    if (datasets.length) {
+      feature.legend = feature.dataset;
+      feature.color  = (datasets.filter(s => s.name === feature.dataset)[0] || { color: this.color }).color;
+    }
+
+    feature.id = feature.id || [ feature.chr, feature.start, feature.end, feature.dataset || '' ].join(':');
+
+    return this.base(feature, ...args);
+  },
+});
+
+const View = TrackView.extend({
+  scaleFeatures: function (features, scale) {
+    const yScale = this.track.getYScale();
+    const zeroY  = this.prop('marginTop') - this.prop('range')[0] * yScale;
+
+    features = this.base(features, scale);
+
+    features.forEach(
+      (feature) => {
+        feature.position[scale].height = feature.height * yScale;
+        feature.position[scale].y      = zeroY;
+      }
+    );
+
+    return features;
+  },
+
+  draw: function (features, featureContext, labelContext, scale) {
+    const jQuery       = this.browser.jQuery;
+    const datasets     = this.featureDataSets(features);
+    const marginBottom = this.prop('margin');
+    const binSize      = scale < 1 ? Math.ceil(1 / scale) : 0;
+    const defaults     = {
+      color       : this.color,
+      globalAlpha : this.prop('globalAlpha'),
+    };
+
+    datasets.list.forEach(
+      (config) => {
+        const conf = { ...defaults, ...config };
+        const set  = config.name;
+
+        let setFeatures = jQuery.extend(true, [], datasets.features[set] || []);
+
+        if (!setFeatures.length) {
+          return;
+        }
+
+        if (binSize) {
+          const binnedFeatures = [];
+
+          let i = 0;
+
+          while (i < setFeatures.length) {
+            const binStart = setFeatures[i].start;
+            const bin      = [];
+
+            while (setFeatures[i] && setFeatures[i].start - binStart < binSize) {
+              bin.push(setFeatures[i++]);
+            }
+
+            const feature = jQuery.extend(true, {}, bin[0], {
+              height : bin.reduce((a, b) => a + b.height, 0) / bin.length,
+              end    : bin[bin.length - 1].end,
+            });
+
+            [ 'H', 'W', 'height', 'width' ].forEach((attr) => { // eslint-disable-line no-loop-func
+              feature.position[scale][attr] = bin.reduce((a, b) => a + b.position[scale][attr], 0) / bin.length;
+            });
+
+            binnedFeatures.push(feature);
+          }
+
+          setFeatures = binnedFeatures;
+        }
+
+        setFeatures.forEach(
+          (setFeature) => {
+            setFeature.color = conf.color;
+          }
+        );
+
+        featureContext.globalAlpha = conf.globalAlpha;
+
+        this.base(setFeatures, featureContext, labelContext, scale);
+      }
+    );
+
+    // Don't allow features to be drawn in the margins
+    featureContext.clearRect(0, 0,                                  this.width, this.prop('marginTop') - 1);
+    featureContext.clearRect(0, this.prop('height') - marginBottom, this.width, marginBottom);
+  },
+});
+
+export default Track.extend({
+  type      : 'Bar',
+  model     : Model,
+  view      : View,
+  threshold : 500000,
+
+  10000: { // Switch to line graph at 10000bp region
+    ...Object.keys(LineGraph.prototype).reduce(
+      (acc, key) => {
+        if (LineGraph.prototype.hasOwnProperty(key) && !Base.prototype[key]) {
+          acc[key] = LineGraph.prototype[key];
+        }
+
+        return acc;
+      },
+      {}
+    ),
+    fill  : true,
+    model : LineGraphModel.extend({
+      parseData: function (data, chr, start, end) {
+        const coords = [];
+
+        data.forEach(
+          (item) => {
+            for (let pos = item.start; pos < item.end; pos++) {
+              coords.push([ pos, item.height ]);
+            }
+          }
+        );
+
+        return this.base([{ chr: chr, start: start, end: end, coords: coords }], chr, start, end);
+      },
+    }),
+  },
+  50000: { // Switch to sparser line graph at 50000bp region
+    ...Object.keys(LineGraph.prototype).reduce(
+      (acc, key) => {
+        if (LineGraph.prototype.hasOwnProperty(key) && !Base.prototype[key]) {
+          acc[key] = LineGraph.prototype[key];
+        }
+
+        return acc;
+      },
+      {}
+    ),
+    fill  : true,
+    model : LineGraphModel.extend({
+      parseData: function (data, chr, start, end) {
+        return this.base([{ chr: chr, start: start, end: end, coords: data.map(d => [ d.start, d.height ]) }], chr, start, end);
+      },
+    }),
+  },
+});
+
+export { Controller, Model, View };