igv 2.12.2 → 2.12.3

package/README.md

@@ -12,19 +12,19 @@ Below are examples and a quickstart guide.  See the [Wiki](https://github.com/ig
 
 # Examples
  
-***[Alignments](https://igv.org/web/release/2.12.2/examples/cram-vcf.html)***
+***[Alignments](https://igv.org/web/release/2.12.3/examples/cram-vcf.html)***
 
-***[Interactions](https://igv.org/web/release/2.12.2/examples/interact.html)***
+***[Interactions](https://igv.org/web/release/2.12.3/examples/interact.html)***
 
-***[Copy number](https://igv.org/web/release/2.12.2/examples/copyNumber.html)***
+***[Copy number](https://igv.org/web/release/2.12.3/examples/copyNumber.html)***
 
-***[Multiple regions](https://igv.org/web/release/2.12.2/examples/multi-locus.html)***
+***[Multiple regions](https://igv.org/web/release/2.12.3/examples/multi-locus.html)***
 
-***[Mutation Annotation Format (MAF)](https://igv.org/web/release/2.12.2/examples/maf-tcga.html)***
+***[Mutation Annotation Format (MAF)](https://igv.org/web/release/2.12.3/examples/maf-tcga.html)***
 
-***[Variant color options](https://igv.org/web/release/2.12.2/examples/variant-colors.html)***
+***[Variant color options](https://igv.org/web/release/2.12.3/examples/variant-colors.html)***
 
-***[More](https://igv.org/web/release/2.12.2/examples/)***
+***[More](https://igv.org/web/release/2.12.3/examples/)***
 
  
 # Quickstart
@@ -33,18 +33,18 @@ Below are examples and a quickstart guide.  See the [Wiki](https://github.com/ig
 igv.js consists of a single javascript file with no external dependencies.  
 
 Pre-built files for ES5 (igv.min.js) and ES6 (igv.esm.min.js)
-can be downloaded from [https://cdn.jsdelivr.net/npm/igv@2.12.2/dist/](https://cdn.jsdelivr.net/npm/igv@2.12.2/dist/). 
+can be downloaded from [https://cdn.jsdelivr.net/npm/igv@2.12.3/dist/](https://cdn.jsdelivr.net/npm/igv@2.12.3/dist/). 
 
 To import igv as an ES6 module
 
 ```javascript
-import igv from "https://cdn.jsdelivr.net/npm/igv@2.12.2/dist/igv.esm.min.js"
+import igv from "https://cdn.jsdelivr.net/npm/igv@2.12.3/dist/igv.esm.min.js"
 ``` 
 
 Or as a script include (defines the "igv" global)
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/igv@2.12.2/dist/igv.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/igv@2.12.3/dist/igv.min.js"></script>
 ```   
  
 Alternatively you can install with npm  

package/dist/igv.esm.js

@@ -20251,6 +20251,12 @@ for (let i = 0; i < t1.length; i++) {
     complement[t1[i].toLowerCase()] = t2[i].toLowerCase();
 }
 
+const DEFAULT_HEIGHT = 25;
+const TRANSLATED_HEIGHT = 115;
+const SEQUENCE_HEIGHT = 15;
+const FRAME_HEIGHT = 25;
+const FRAME_BORDER = 5;
+
 class SequenceTrack {
 
     constructor(config, browser) {
@@ -20262,13 +20268,13 @@ class SequenceTrack {
         this.name = "Sequence";
         this.id = "sequence";
         this.sequenceType = config.sequenceType || "dna";             //   dna | rna | prot
-        this.height = 25;
         this.disableButtons = false;
         this.order = config.order || defaultSequenceTrackOrder;
         this.ignoreTrackMenu = false;
 
-        this.reversed = false;
-        this.frameTranslate = false;
+        this.reversed = config.reversed === true;
+        this.frameTranslate = config.frameTranslate === true;
+        this.height = this.frameTranslate ? TRANSLATED_HEIGHT : DEFAULT_HEIGHT;
 
     }
 
@@ -20287,14 +20293,14 @@ class SequenceTrack {
                     this.frameTranslate = !this.frameTranslate;
                     if (this.frameTranslate) {
                         for (let vp of this.trackView.viewports) {
-                            vp.setContentHeight(115);
+                            vp.setContentHeight(TRANSLATED_HEIGHT);
                         }
-                        this.trackView.setTrackHeight(115);
+                        this.trackView.setTrackHeight(TRANSLATED_HEIGHT);
                     } else {
                         for (let vp of this.trackView.viewports) {
-                            vp.setContentHeight(25);
+                            vp.setContentHeight(DEFAULT_HEIGHT);
                         }
-                        this.trackView.setTrackHeight(25);
+                        this.trackView.setTrackHeight(DEFAULT_HEIGHT);
                     }
                     this.trackView.repaintViews();
 
@@ -20377,7 +20383,8 @@ class SequenceTrack {
     }
 
     async getFeatures(chr, start, end, bpPerPixel) {
-
+        start = Math.floor(start);
+        end = Math.floor(end);
         if (bpPerPixel && bpPerPixel > 1) {
             return null
         } else {
@@ -20395,89 +20402,79 @@ class SequenceTrack {
 
         if (options.features) {
 
-            const sequence = options.features.sequence;
-            const sequenceBpStart = options.features.bpStart;
-            const bpEnd = 1 + options.bpStart + (options.pixelWidth * options.bpPerPixel);
+            let sequence = options.features.sequence;
 
-            let height = 15;
-            for (let bp = sequenceBpStart; bp <= bpEnd; bp++) {
+            if (this.reversed) {
+                sequence = sequence.split('').map(function (cv) {
+                    return complement[cv]
+                }).join('');
+            }
 
-                let seqOffsetBp = Math.floor(bp - sequenceBpStart);
+            const sequenceBpStart = options.features.bpStart;  // genomic position at start of sequence
+            const bpEnd = 1 + options.bpStart + (options.pixelWidth * options.bpPerPixel);
 
-                if (seqOffsetBp < sequence.length) {
-                    let letter = sequence[seqOffsetBp];
+            for (let bp = Math.floor(options.bpStart); bp <= bpEnd; bp++) {
 
-                    if (this.reversed) {
-                        letter = complement[letter] || "";
-                    }
+                const seqIdx = Math.floor(bp - sequenceBpStart);
 
-                    let offsetBP = bp - options.bpStart;
-                    let aPixel = offsetBP / options.bpPerPixel;
-                    let bPixel = (offsetBP + 1) / options.bpPerPixel;
-                    let color = this.fillColor(letter);
-
-                    // IGVGraphics.fillRect(ctx, aPixel, 5, bPixel - aPixel, height - 5, { fillStyle: randomRGBConstantAlpha(150, 255, 0.75) });
+                if (seqIdx >= 0 && seqIdx < sequence.length) {
+                    const baseLetter = sequence[seqIdx];
+                    const offsetBP = bp - options.bpStart;
+                    const aPixel = offsetBP / options.bpPerPixel;
+                    const pixelWidth = 1 / options.bpPerPixel;
+                    const color = this.fillColor(baseLetter);
 
                     if (options.bpPerPixel > 1 / 10) {
-                        IGVGraphics.fillRect(ctx, aPixel, 5, bPixel - aPixel, height - 5, {fillStyle: color});
+                        IGVGraphics.fillRect(ctx, aPixel, 5, pixelWidth, SEQUENCE_HEIGHT - 5, {fillStyle: color});
                     } else {
-                        let xPixel = 0.5 * (aPixel + bPixel - ctx.measureText(letter).width);
-                        IGVGraphics.strokeText(ctx, letter, xPixel, height, {strokeStyle: color});
+                        let textPixel = aPixel + 0.5 * (pixelWidth - ctx.measureText(baseLetter).width);
+                        IGVGraphics.strokeText(ctx, baseLetter, textPixel, SEQUENCE_HEIGHT, {strokeStyle: color});
                     }
                 }
             }
 
             if (this.frameTranslate) {
 
-                let transSeq;
-                if (this.reversed) {
-                    transSeq = sequence.split('').map(function (cv) {
-                        return complement[cv]
-                    });
-                    transSeq = transSeq.join('');
-                } else {
-                    transSeq = sequence;
-                }
+                let y = SEQUENCE_HEIGHT + 2 * FRAME_BORDER;
+                const translatedSequence = this.translateSequence(sequence);
 
-                let y = height;
-                let translatedSequence = this.translateSequence(transSeq);
-                for (let arr of translatedSequence) {
+                for (let fNum = 0; fNum < translatedSequence.length; fNum++) {    // == 3, 1 for each frame
 
-                    let i = translatedSequence.indexOf(arr);
-                    let fNum = i;
-                    let h = 25;
+                    const aaSequence = translatedSequence[fNum];  // AA sequence for this frame
 
-                    y = (i === 0) ? y + 10 : y + 30; //Little less room at first.
+                    for (let idx = 0; idx < aaSequence.length; idx++) {
 
-                    for (let cv of arr) {
-
-                        let aaS;
-                        let idx = arr.indexOf(cv);
-                        let xSeed = (idx + fNum) + (2 * idx);
                         let color = 0 === idx % 2 ? 'rgb(160,160,160)' : 'rgb(224,224,224)';
+                        const cv = aaSequence[idx];
+
+                        const bpPos = sequenceBpStart + fNum + (idx * 3);
+                        const bpOffset = bpPos - options.bpStart;
+                        const p0 = Math.floor(bpOffset / options.bpPerPixel);
+                        const p1 = Math.floor((bpOffset + 3) / options.bpPerPixel);
+                        const pc = Math.round((p0 + p1) / 2);
+
+                        if (p1 < 0) {
+                            continue   // off left edge
+                        } else if (p0 > options.pixelWidth) {
+                            break      // off right edge
+                        }
 
-                        let p0 = Math.floor(xSeed / options.bpPerPixel);
-                        let p1 = Math.floor((xSeed + 3) / options.bpPerPixel);
-                        let pc = Math.round((p0 + p1) / 2);
-
+                        let aaLabel = cv.aminoA;
                         if (cv.aminoA.indexOf('STOP') > -1) {
                             color = 'rgb(255, 0, 0)';
-                            aaS = 'STOP'; //Color blind accessible
-                        } else {
-                            aaS = cv.aminoA;
-                        }
-
-                        if (cv.aminoA === 'M') {
+                            aaLabel = 'STOP'; //Color blind accessible
+                        } else if (cv.aminoA === 'M') {
                             color = 'rgb(0, 153, 0)';
-                            aaS = 'START'; //Color blind accessible
+                            aaLabel = 'START'; //Color blind accessible
                         }
 
-                        IGVGraphics.fillRect(ctx, p0, y, p1 - p0, h, {fillStyle: color});
+                        IGVGraphics.fillRect(ctx, p0, y, p1 - p0, FRAME_HEIGHT, {fillStyle: color});
 
                         if (options.bpPerPixel <= 1 / 10) {
-                            IGVGraphics.strokeText(ctx, aaS, pc - (ctx.measureText(aaS).width / 2), y + 15);
+                            IGVGraphics.strokeText(ctx, aaLabel, pc - (ctx.measureText(aaLabel).width / 2), y + 15);
                         }
                     }
+                    y += (FRAME_HEIGHT + FRAME_BORDER);
                 }
             }
         }
@@ -20488,6 +20485,7 @@ class SequenceTrack {
     }
 
     computePixelHeight(ignore) {
+        this.height = this.frameTranslate ? TRANSLATED_HEIGHT : DEFAULT_HEIGHT;
         return this.height
     }
 
@@ -20500,8 +20498,21 @@ class SequenceTrack {
         } else {
             return 'rgb(0, 0, 150)'
         }
+    }
 
+    /**
+     * Return the current state of the track.  Used to create sessions and bookmarks.
+     *
+     * @returns {*|{}}
+     */
+    getState() {
+
+        const config = typeof super.getState === 'function' ? super.getState() : {};
+        if (this.reversed) config.revealed = true;
+        if (this.frameTranslate) config.frameTranslate = true;
+        return config
     }
+
 }
 
 /*
@@ -22337,7 +22348,9 @@ class FastaSequence {
 
     async getSequence(chr, start, end) {
 
-        if (!(this.interval && this.interval.contains(chr, start, end))) {
+        const hasCachedSquence = this.interval && this.interval.contains(chr, start, end);
+
+        if (!hasCachedSquence) {
 
             // Expand query, to minimum of 50kb
             let qstart = start;
@@ -22796,7 +22809,7 @@ const Cytoband = function (start, end, name, typestain) {
     }
 };
 
-const _version = "2.12.2";
+const _version = "2.12.3";
 function version() {
     return _version
 }
@@ -23460,6 +23473,17 @@ class TrackViewport extends Viewport {
         }
     }
 
+    repaintDimensions() {
+        const isWGV = GenomeUtils.isWholeGenomeView(this.referenceFrame.chr);
+        const pixelWidth = isWGV ? this.$viewport.width() : 3 * this.$viewport.width();
+        const bpPerPixel = this.referenceFrame.bpPerPixel;
+        const startBP = this.referenceFrame.start - (isWGV ? 0 : pixelWidth / 3 * bpPerPixel);
+        const endBP = this.referenceFrame.end + (isWGV ? 0 : pixelWidth / 3 * bpPerPixel);
+        return {
+            startBP, endBP, pixelWidth
+        }
+    }
+
     /**
      * Repaint the canvas using the cached features
      *
@@ -23474,11 +23498,11 @@ class TrackViewport extends Viewport {
         //this.tile.bpPerPixel = this.referenceFrame.bpPerPixel
 
         // const isWGV = GenomeUtils.isWholeGenomeView(this.browser.referenceFrameList[0].chr)
-        const isWGV = GenomeUtils.isWholeGenomeView(this.referenceFrame.chr);
+        GenomeUtils.isWholeGenomeView(this.referenceFrame.chr);
 
         // Canvas dimensions. There is no left-right panning for WGV so canvas width is viewport width.
         // For deep tracks we paint a canvas == 3*viewportHeight centered on the current vertical scroll position
-        const pixelWidth = isWGV ? this.$viewport.width() : 3 * this.$viewport.width();
+        const {startBP, endBP, pixelWidth} = this.repaintDimensions();
         const viewportHeight = this.$viewport.height();
         const contentHeight = this.getContentHeight();
         const minHeight = roiFeatures ? Math.max(contentHeight, viewportHeight) : contentHeight;  // Need to fill viewport for ROIs.
@@ -23492,8 +23516,8 @@ class TrackViewport extends Viewport {
         const canvasTop = Math.max(0, -(this.$content.position().top) - viewportHeight);
 
         const bpPerPixel = this.referenceFrame.bpPerPixel;
-        const startBP = this.referenceFrame.start - (isWGV ? 0 : pixelWidth / 3 * bpPerPixel);
-        const endBP = this.referenceFrame.end + (isWGV ? 0 : pixelWidth / 3 * bpPerPixel);
+        //const startBP = this.referenceFrame.start - (isWGV ? 0 : pixelWidth / 3 * bpPerPixel)
+        //const endBP = this.referenceFrame.end + (isWGV ? 0 : pixelWidth / 3 * bpPerPixel)
         const pixelXOffset = Math.round((startBP - this.referenceFrame.start) / bpPerPixel);
 
         const newCanvas = $$1('<canvas class="igv-canvas">').get(0);
@@ -23756,10 +23780,9 @@ class TrackViewport extends Viewport {
         if (!this.featureCache) return true
         const referenceFrame = this.referenceFrame;
         const chr = this.referenceFrame.chr;
-        const start = referenceFrame.start;
-        const end = start + referenceFrame.toBP($$1(this.contentDiv).width());
         const bpPerPixel = referenceFrame.bpPerPixel;
-        return (!this.featureCache.containsRange(chr, start, end, bpPerPixel))
+        const {startBP, endBP} = this.repaintDimensions();
+        return (!this.featureCache.containsRange(chr, startBP, endBP, bpPerPixel))
     }
 
     createZoomInNotice($parent) {