igv 2.12.1 → 2.12.4

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.1/examples/cram-vcf.html)***
+***[Alignments](https://igv.org/web/release/2.12.4/examples/cram-vcf.html)***
 
-***[Interactions](https://igv.org/web/release/2.12.1/examples/interact.html)***
+***[Interactions](https://igv.org/web/release/2.12.4/examples/interact.html)***
 
-***[Copy number](https://igv.org/web/release/2.12.1/examples/copyNumber.html)***
+***[Copy number](https://igv.org/web/release/2.12.4/examples/copyNumber.html)***
 
-***[Multiple regions](https://igv.org/web/release/2.12.1/examples/multi-locus.html)***
+***[Multiple regions](https://igv.org/web/release/2.12.4/examples/multi-locus.html)***
 
-***[Mutation Annotation Format (MAF)](https://igv.org/web/release/2.12.1/examples/maf-tcga.html)***
+***[Mutation Annotation Format (MAF)](https://igv.org/web/release/2.12.4/examples/maf-tcga.html)***
 
-***[Variant color options](https://igv.org/web/release/2.12.1/examples/variant-colors.html)***
+***[Variant color options](https://igv.org/web/release/2.12.4/examples/variant-colors.html)***
 
-***[More](https://igv.org/web/release/2.12.1/examples/)***
+***[More](https://igv.org/web/release/2.12.4/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.1/dist/](https://cdn.jsdelivr.net/npm/igv@2.12.1/dist/). 
+can be downloaded from [https://cdn.jsdelivr.net/npm/igv@2.12.4/dist/](https://cdn.jsdelivr.net/npm/igv@2.12.4/dist/). 
 
 To import igv as an ES6 module
 
 ```javascript
-import igv from "https://cdn.jsdelivr.net/npm/igv@2.12.1/dist/igv.esm.min.js"
+import igv from "https://cdn.jsdelivr.net/npm/igv@2.12.4/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.1/dist/igv.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/igv@2.12.4/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 height = 15;
-            for (let bp = sequenceBpStart; bp <= bpEnd; bp++) {
+            let sequence = options.features.sequence;
 
-                let seqOffsetBp = Math.floor(bp - sequenceBpStart);
+            if (this.reversed) {
+                sequence = sequence.split('').map(function (cv) {
+                    return complement[cv]
+                }).join('');
+            }
 
-                if (seqOffsetBp < sequence.length) {
-                    let letter = sequence[seqOffsetBp];
+            const sequenceBpStart = options.features.bpStart;  // genomic position at start of sequence
+            const bpEnd = 1 + options.bpStart + (options.pixelWidth * options.bpPerPixel);
 
-                    if (this.reversed) {
-                        letter = complement[letter] || "";
-                    }
+            for (let bp = Math.floor(options.bpStart); bp <= bpEnd; bp++) {
 
-                    let offsetBP = bp - options.bpStart;
-                    let aPixel = offsetBP / options.bpPerPixel;
-                    let bPixel = (offsetBP + 1) / options.bpPerPixel;
-                    let color = this.fillColor(letter);
+                const seqIdx = Math.floor(bp - sequenceBpStart);
 
-                    // 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 = height;
-                let translatedSequence = this.translateSequence(transSeq);
-                for (let arr of translatedSequence) {
+                let y = SEQUENCE_HEIGHT + 2 * FRAME_BORDER;
+                const translatedSequence = this.translateSequence(sequence);
 
-                    let i = translatedSequence.indexOf(arr);
-                    let fNum = i;
-                    let h = 25;
+                for (let fNum = 0; fNum < translatedSequence.length; fNum++) {    // == 3, 1 for each frame
 
-                    y = (i === 0) ? y + 10 : y + 30; //Little less room at first.
+                    const aaSequence = translatedSequence[fNum];  // AA sequence for this frame
 
-                    for (let cv of arr) {
+                    for (let idx = 0; idx < aaSequence.length; idx++) {
 
-                        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,26 @@ 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 = {
+            type: "sequence"
+        };
+        if (this.order !== defaultSequenceTrackOrder) {
+            config.order = this.order;
+        }
+        if (this.reversed) {
+            config.revealed = true;
+        }
+        return config
     }
+
 }
 
 /*
@@ -22337,7 +22353,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 +22814,7 @@ const Cytoband = function (start, end, name, typestain) {
     }
 };
 
-const _version = "2.12.1";
+const _version = "2.12.4";
 function version() {
     return _version
 }
@@ -23460,6 +23478,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 +23503,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 +23521,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 +23785,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) {
@@ -24397,6 +24425,10 @@ class PairedAlignment {
             return this.firstAlignment.mate.strand    // Assumption is mate is first-of-pair
         }
     }
+
+    hasTag(str) {
+        return this.firstAlignment.hasTag(str) || (this.secondAlignment &&  this.secondAlignment.hasTag(str))
+    }
 }
 
 /*
@@ -29176,7 +29208,7 @@ class TrackBase {
     }
 
     get supportsWholeGenome() {
-        return false
+        return this.config.supportsWholeGenome === true
     }
 
     /**
@@ -31566,27 +31598,45 @@ const makePairedAlignmentChords = (alignments) => {
 
     const chords = [];
     for (let a of alignments) {
-        const mate = a.mate;
-        if (mate && mate.chr && mate.position) {
-            chords.push({
-                uniqueId: a.readName,
-                refName: shortChrName(a.chr),
-                start: a.start,
-                end: a.end,
-                mate: {
-                    refName: shortChrName(mate.chr),
-                    start: mate.position - 1,
-                    end: mate.position,
-                }
-            });
+
+        if(a.paired) {
+            if(a.firstAlignment && a.secondAlignment) {
+                chords.push({
+                    uniqueId: a.readName,
+                    refName: shortChrName(a.firstAlignment.chr),
+                    start: a.firstAlignment.start,
+                    end: a.firstAlignment.end,
+                    mate: {
+                        refName: shortChrName(a.secondAlignment.chr),
+                        start: a.secondAlignment.start,
+                        end: a.secondAlignment.end,
+                    }
+                });
+            }
+        }
+        else {
+            const mate = a.mate;
+            if (mate && mate.chr && mate.position) {
+                chords.push({
+                    uniqueId: a.readName,
+                    refName: shortChrName(a.chr),
+                    start: a.start,
+                    end: a.end,
+                    mate: {
+                        refName: shortChrName(mate.chr),
+                        start: mate.position - 1,
+                        end: mate.position,
+                    }
+                });
+            }
         }
     }
     return chords
 };
 
 const makeSupplementalAlignmentChords = (alignments) => {
-    const chords = [];
-    for (let a of alignments) {
+
+    const makeChords = (a) => {
         const sa = a.tags()['SA'];
         const supAl = createSupplementaryAlignments(sa);
         let n = 0;
@@ -31605,6 +31655,18 @@ const makeSupplementalAlignmentChords = (alignments) => {
                 });
             }
         }
+    };
+
+    const chords = [];
+    for (let a of alignments) {
+        if(a.paired) {
+            makeChords(a.firstAlignment);
+            if(a.secondAlignment) {
+                makeChords(a.secondAlignment);
+            }
+        } else {
+            makeChords(a);
+        }
     }
     return chords
 };
@@ -32326,11 +32388,18 @@ class BAMTrack extends TrackBase {
         const refFrame = viewport.referenceFrame;
         for (let a of viewport.cachedFeatures.allAlignments()) {
             if (a.end >= refFrame.start
-                && a.start <= refFrame.end
-                && a.mate
-                && a.mate.chr
-                && (a.mate.chr !== a.chr || Math.max(a.fragmentLength) > maxTemplateLength)) {
-                inView.push(a);
+                && a.start <= refFrame.end) {
+                if (a.paired) {
+                    if (a.end - a.start > maxTemplateLength) {
+                        inView.push(a);
+                    }
+                } else {
+                    if (a.mate
+                        && a.mate.chr
+                        && (a.mate.chr !== a.chr || Math.max(a.fragmentLength) > maxTemplateLength)) {
+                        inView.push(a);
+                    }
+                }
             }
         }
         const chords = makePairedAlignmentChords(inView);
@@ -33909,7 +33978,7 @@ class SampleNameViewport {
                         for (let {sampleNameViewport} of this.browser.trackViews) {
                             sampleNameViewport.setWidth(this.browser.sampleNameViewportWidth);
                         }
-                        this.browser.resize();
+                        this.browser.layoutChange();
                     }
                 };
 
@@ -39395,7 +39464,7 @@ function pack(featureList, maxRows) {
         let r = 0;
         const len = Math.min(rows.length, maxRows);
         for (r = 0; r < len; r++) {
-            if (feature.start > rows[r]) {
+            if (feature.start >= rows[r]) {
                 feature.row = r;
                 rows[r] = feature.end;
                 break
@@ -40912,7 +40981,7 @@ class BWSource {
     }
 
     supportsWholeGenome() {
-        return this.reader.type === "bigwig" || this.defaultVisibilityWindow() <= 0
+        return this.reader.type === "bigwig"
     }
 
     async trackType() {
@@ -42147,7 +42216,15 @@ class FeatureTrack extends TrackBase {
     }
 
     get supportsWholeGenome() {
-        return (this.config.indexed === false || !this.config.indexURL) && this.config.supportsWholeGenome !== false
+        if (this.config.supportsWholeGenome !== undefined) {
+            return this.config.supportsWholeGenome
+        } else if (this.featureSource && typeof this.featureSource.supportsWholeGenome === 'function') {
+            return this.featureSource.supportsWholeGenome()
+        } else {
+            if (this.visibilityWindow === undefined && (this.config.indexed === false || !this.config.indexURL)) {
+                return true
+            }
+        }
     }
 
     async getFeatures(chr, start, end, bpPerPixel) {
@@ -42204,7 +42281,7 @@ class FeatureTrack extends TrackBase {
             options.rowLastX = [];
             options.rowLastLabelX = [];
             for (let feature of featureList) {
-                if(feature.start > bpStart && feature.end < bpEnd) {
+                if (feature.start > bpStart && feature.end < bpEnd) {
                     const row = this.displayMode === "COLLAPSED" ? 0 : feature.row || 0;
                     if (rowFeatureCount[row] === undefined) {
                         rowFeatureCount[row] = 1;
@@ -44618,9 +44695,9 @@ class VariantTrack extends TrackBase {
         IGVGraphics.fillRect(context, 0, pixelTop, pixelWidth, pixelHeight, {'fillStyle': "rgb(255, 255, 255)"});
 
         const vGap = ("SQUISHED" === this.displayMode) ? this.squishedVGap : this.expandedVGap;
-        const rc = ("COLLAPSED" === this.displayMode) ? 1 : this.nVariantRows;
+        const rowCount = ("COLLAPSED" === this.displayMode) ? 1 : this.nVariantRows;
         const variantHeight = ("SQUISHED" === this.displayMode) ? this.squishedVariantHeight : this.expandedVariantHeight;
-        this.variantBandHeight = TOP_MARGIN + rc * (variantHeight + vGap);
+        this.variantBandHeight = TOP_MARGIN + rowCount * (variantHeight + vGap);
 
         const callSets = this.callSets;
         const nCalls = this.getCallsetsLength();
@@ -44753,15 +44830,17 @@ class VariantTrack extends TrackBase {
         if (yOffset <= this.variantBandHeight) {
             // Variant
             const variantHeight = ("SQUISHED" === this.displayMode) ? this.squishedVariantHeight : this.expandedVariantHeight;
-            const variantRow = (Math.floor)((yOffset - TOP_MARGIN) / (variantHeight + vGap));
-            featureList = featureList.filter(f => f.row === variantRow);
+            const variantRow = Math.floor((yOffset - TOP_MARGIN) / (variantHeight + vGap));
+            if("COLLAPSED" !== this.displayMode) {
+                featureList = featureList.filter(f => f.row === variantRow);
+            }
         } else if (this.callSets) {
             const callSets = this.callSets;
             const sampleY = yOffset - this.variantBandHeight;
             const sampleRow = Math.floor(sampleY / this.sampleHeight);
             if (sampleRow >= 0 && sampleRow < callSets.length) {
                 const variantRow = Math.floor((sampleY - sampleRow * this.sampleHeight) / callHeight);
-                const variants = featureList.filter(f => f.row === variantRow);
+                const variants = "COLLAPSED" === this.displayMode ? featureList : featureList.filter(f => f.row === variantRow);
                 const cs = callSets[sampleRow];
                 featureList = variants.map(v => {
                     const call = v.calls[cs.id];
@@ -48642,7 +48721,7 @@ class SampleNameControl {
                 }
             }
 
-            browser.resize();
+            browser.layoutChange();
 
 
         });
@@ -50312,7 +50391,16 @@ class Browser {
 
     }
 
+    /**
+     * API function to signal that this browser visibility has changed, e.g. from hiding/showing in a tab interface.
+     *
+     * @returns {Promise<void>}
+     */
     async visibilityChange() {
+        this.layoutChange();
+    }
+
+    async layoutChange() {
 
         const status = this.referenceFrameList.find(referenceFrame => referenceFrame.bpPerPixel < 0);