igv 2.11.1 → 2.11.2

package/dist/igv.esm.js

@@ -17624,7 +17624,7 @@ function Node(interval) {
  * @constructor
  */
 
-class FeatureCache$1 {
+class FeatureCache {
 
     constructor(featureList, genome, range) {
 
@@ -20588,13 +20588,14 @@ class Viewport {
         console.log('Viewport - draw(drawConfiguration, features, roiFeatures)');
     }
 
-    checkContentHeight(features) {
+    checkContentHeight() {
 
         let track = this.trackView.track;
-        features = features || this.cachedFeatures;
+
         if ("FILL" === track.displayMode) {
             this.setContentHeight(this.$viewport.height());
         } else if (typeof track.computePixelHeight === 'function') {
+            let features = this.cachedFeatures;
             if (features && features.length > 0) {
                 let requiredContentHeight = track.computePixelHeight(features);
                 let currentContentHeight = this.$content.height();
@@ -20610,11 +20611,12 @@ class Viewport {
     }
 
     setContentHeight(contentHeight) {
-
         // Maximum height of a canvas is ~32,000 pixels on Chrome, possibly smaller on other platforms
         contentHeight = Math.min(contentHeight, 32000);
+
         this.$content.height(contentHeight);
-        if (this.canvas._data) this.canvas._data.invalidate = true;
+
+        if (this.tile) this.tile.invalidate = true;
     }
 
     isLoading() {
@@ -20631,6 +20633,8 @@ class Viewport {
 
     setWidth(width) {
         this.$viewport.width(width);
+        this.canvas.style.width = (`${width}px`);
+        this.canvas.setAttribute('width', width);
     }
 
     getWidth() {
@@ -22757,7 +22761,7 @@ const Cytoband = function (start, end, name, typestain) {
     }
 };
 
-const _version = "2.11.1";
+const _version = "2.11.2";
 function version() {
     return _version
 }
@@ -23292,21 +23296,17 @@ class TrackViewport extends Viewport {
     checkZoomIn() {
 
         const showZoomInNotice = () => {
+            const referenceFrame = this.referenceFrame;
             if (this.referenceFrame.chr.toLowerCase() === "all" && !this.trackView.track.supportsWholeGenome()) {
                 return true
             } else {
                 const visibilityWindow = this.trackView.track.visibilityWindow;
                 return (
                     visibilityWindow !== undefined && visibilityWindow > 0 &&
-                    (this.referenceFrame.bpPerPixel * this.$viewport.width() > visibilityWindow))
+                    (referenceFrame.bpPerPixel * this.$viewport.width() > visibilityWindow))
             }
         };
 
-        if (this.trackView.track && "sequence" === this.trackView.track.type && this.referenceFrame.bpPerPixel > 1) {
-            if (this.canvas) ;
-            return false
-        }
-
         if (!(this.viewIsReady())) {
             return false
         }
@@ -23316,8 +23316,7 @@ class TrackViewport extends Viewport {
                 // Out of visibility window
                 if (this.canvas) {
                     this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-                    this.canvas._data = undefined;
-                    this.featureCache = undefined;
+                    this.tile = undefined;
                 }
                 this.$zoomInNotice.show();
 
@@ -23334,19 +23333,21 @@ class TrackViewport extends Viewport {
         }
 
         return true
+
+
     }
 
-    /**
-     * Adjust the canvas to the current genomic state.
-     */
     shift() {
-        const referenceFrame = this.referenceFrame;
-        if (this.canvas &&
-            this.canvas._data &&
-            this.canvas._data.chr === this.referenceFrame.chr &&
-            this.canvas._data.bpPerPixel === referenceFrame.bpPerPixel) {
-            const pixelOffset = Math.round((this.canvas._data.startBP - referenceFrame.start) / referenceFrame.bpPerPixel);
-            this.canvas.style.left = pixelOffset + "px";
+        const self = this;
+        const referenceFrame = self.referenceFrame;
+
+        if (self.canvas &&
+            self.tile &&
+            self.tile.chr === self.referenceFrame.chr &&
+            self.tile.bpPerPixel === referenceFrame.bpPerPixel) {
+
+            const pixelOffset = Math.round((self.tile.startBP - referenceFrame.start) / referenceFrame.bpPerPixel);
+            self.canvas.style.left = pixelOffset + "px";
         }
     }
 
@@ -23369,23 +23370,22 @@ class TrackViewport extends Viewport {
         this.startSpinner();
 
         try {
-            const track = this.trackView.track;
-            const features = await this.getFeatures(track, chr, bpStart, bpEnd, referenceFrame.bpPerPixel);
+            const features = await this.getFeatures(this.trackView.track, chr, bpStart, bpEnd, referenceFrame.bpPerPixel);
             let roiFeatures = [];
-            const roi = mergeArrays(this.browser.roi, track.roi);
+            const roi = mergeArrays(this.browser.roi, this.trackView.track.roi);
             if (roi) {
                 for (let r of roi) {
-                    const f = await r.getFeatures(chr, bpStart, bpEnd, referenceFrame.bpPerPixel);
+                    const f = await
+                        r.getFeatures(chr, bpStart, bpEnd, referenceFrame.bpPerPixel);
                     roiFeatures.push({track: r, features: f});
                 }
             }
 
-            const mr = track && ("wig" === track.type || "merged" === track.type);   // wig tracks are potentially multiresolution (e.g. bigwig)
-            this.featureCache = new FeatureCache(chr, bpStart, bpEnd, referenceFrame.bpPerPixel, features, roiFeatures, mr);
+            this.tile = new Tile(chr, bpStart, bpEnd, referenceFrame.bpPerPixel, features, roiFeatures);
             this.loading = false;
             this.hideMessage();
             this.stopSpinner();
-            return this.featureCache
+            return this.tile
         } catch (error) {
             // Track might have been removed during load
             if (this.trackView && this.trackView.disposed !== true) {
@@ -23399,31 +23399,25 @@ class TrackViewport extends Viewport {
         }
     }
 
-    /**
-     * Repaint the canvas for the current genomic state.
-     *
-     * @returns {Promise<void>}
-     */
-    repaint() {
+    async repaint() {
 
-        if (undefined === this.featureCache) {
+        if (undefined === this.tile) {
             return
         }
 
-        let {features, roiFeatures} = this.featureCache;
-        //this.tile.bpPerPixel = this.referenceFrame.bpPerPixel
+        let {features, roiFeatures, bpPerPixel, startBP, endBP} = this.tile;
 
         // const isWGV = GenomeUtils.isWholeGenomeView(this.browser.referenceFrameList[0].chr)
         const isWGV = GenomeUtils.isWholeGenomeView(this.referenceFrame.chr);
-
         let pixelWidth;
-        const startBP = this.featureCache.startBP;
-        const endBP = this.featureCache.endBP;
-        let bpPerPixel = this.referenceFrame.bpPerPixel;
+
         if (isWGV) {
+            bpPerPixel = this.referenceFrame.end / this.$viewport.width();
+            startBP = 0;
+            endBP = this.referenceFrame.end;
             pixelWidth = this.$viewport.width();
         } else {
-            pixelWidth = 3 * this.$viewport.width();
+            pixelWidth = Math.ceil((endBP - startBP) / bpPerPixel);
         }
 
         // For deep tracks we paint a canvas == 3*viewportHeight centered on the current vertical scroll position
@@ -23483,27 +23477,17 @@ class TrackViewport extends Viewport {
 
         this.draw(drawConfiguration, features, roiFeatures);
 
-        // Attach metadata to canvas
-        newCanvas._data = {
-            chr: this.referenceFrame.chr, startBP, endBP, bpPerPixel, top: canvasTop, bottom: canvasTop + pixelHeight
-        };
+        this.canvasVerticalRange = {top: canvasTop, bottom: canvasTop + pixelHeight};
 
-        if (this.canvas) {
-            $$1(this.canvas).remove();
+        if (this.$canvas) {
+            this.$canvas.remove();
         }
+        this.$canvas = $$1(newCanvas);
+        this.$content.append(this.$canvas);
         this.canvas = newCanvas;
         this.ctx = ctx;
-        this.$content.append($$1(newCanvas));
-
     }
 
-    /**
-     * Draw the associated track.
-     *
-     * @param drawConfiguration
-     * @param features
-     * @param roiFeatures
-     */
     draw(drawConfiguration, features, roiFeatures) {
 
         // console.log(`${ Date.now() } viewport draw(). track ${ this.trackView.track.type }. content-css-top ${ this.$content.css('top') }. canvas-top ${ drawConfiguration.pixelTop }.`)
@@ -23520,6 +23504,60 @@ class TrackViewport extends Viewport {
         }
     }
 
+    // TODO: Nolonger used. Will discard
+    async toSVG(tile) {
+
+        // Nothing to do if zoomInNotice is active
+        if (this.$zoomInNotice && this.$zoomInNotice.is(":visible")) {
+            return
+        }
+
+        const referenceFrame = this.referenceFrame;
+        const bpPerPixel = tile.bpPerPixel;
+        const features = tile.features;
+        const roiFeatures = tile.roiFeatures;
+        const pixelWidth = this.$viewport.width();
+        const pixelHeight = this.$viewport.height();
+        const bpStart = referenceFrame.start;
+        const bpEnd = referenceFrame.start + pixelWidth * referenceFrame.bpPerPixel;
+
+        const ctx$1 = new ctx(
+            {
+                // svg
+                width: pixelWidth,
+                height: pixelHeight,
+                viewbox:
+                    {
+                        x: 0,
+                        y: -this.$content.position().top,
+                        width: pixelWidth,
+                        height: pixelHeight
+                    }
+
+            });
+
+        const drawConfiguration =
+            {
+                viewport: this,
+                context: ctx$1,
+                top: -this.$content.position().top,
+                pixelTop: 0,   // for compatibility with canvas draw
+                pixelWidth,
+                pixelHeight,
+                bpStart,
+                bpEnd,
+                bpPerPixel,
+                referenceFrame: this.referenceFrame,
+                selection: this.selection,
+                viewportWidth: pixelWidth,
+            };
+
+        this.draw(drawConfiguration, features, roiFeatures);
+
+        return ctx$1.getSerializedSvg(true)
+
+    }
+
     containsPosition(chr, position) {
         if (this.referenceFrame.chr === chr && position >= this.referenceFrame.start) {
             return position <= this.referenceFrame.calculateEnd(this.getWidth())
@@ -23532,12 +23570,11 @@ class TrackViewport extends Viewport {
         return this.loading
     }
 
-    savePNG() {
+    saveImage() {
 
         if (!this.ctx) return
 
-        const canvasMetadata = this.canvas._data;
-        const canvasTop = canvasMetadata ? canvasMetadata.top : 0;
+        const canvasTop = this.canvasVerticalRange ? this.canvasVerticalRange.top : 0;
         const devicePixelRatio = window.devicePixelRatio;
         const w = this.$viewport.width() * devicePixelRatio;
         const h = this.$viewport.height() * devicePixelRatio;
@@ -23667,25 +23704,26 @@ class TrackViewport extends Viewport {
                 selection: this.selection
             };
 
-        const features = this.featureCache ? this.featureCache.features : [];
-        const roiFeatures = this.featureCache ? this.featureCache.roiFeatures : undefined;
+        const features = this.tile ? this.tile.features : [];
+        const roiFeatures = this.tile ? this.tile.roiFeatures : undefined;
         this.draw(config, features, roiFeatures);
 
         context.restore();
 
     }
 
-    get cachedFeatures() {
-        return this.featureCache ? this.featureCache.features : []
+    getCachedFeatures() {
+        return this.tile ? this.tile.features : []
     }
 
     async getFeatures(track, chr, start, end, bpPerPixel) {
 
-        if (this.featureCache && this.featureCache.containsRange(chr, start, end, bpPerPixel)) {
-            return this.featureCache.features
+        if (this.tile && this.tile.containsRange(chr, start, end, bpPerPixel)) {
+            return this.tile.features
         } else if (typeof track.getFeatures === "function") {
             const features = await track.getFeatures(chr, start, end, bpPerPixel, this);
-            this.checkContentHeight(features);
+            this.cachedFeatures = features;
+            this.checkContentHeight();
             return features
         } else {
             return undefined
@@ -23923,7 +23961,9 @@ class TrackViewport extends Viewport {
                 lastClickTime = time;
 
             }
+
         }
+
     }
 
     removeViewportClickHandler(viewport) {
@@ -23987,10 +24027,16 @@ function mouseUpHandler(event) {
 function createClickState(event, viewport) {
 
     const referenceFrame = viewport.referenceFrame;
+
     const viewportCoords = translateMouseCoordinates$1(event, viewport.contentDiv);
     const canvasCoords = translateMouseCoordinates$1(event, viewport.canvas);
+
     const genomicLocation = ((referenceFrame.start) + referenceFrame.toBP(viewportCoords.x));
 
+    if (undefined === genomicLocation || null === viewport.tile) {
+        return undefined
+    }
+
     return {
         event,
         viewport,
@@ -24051,30 +24097,22 @@ function formatPopoverText(nameValues) {
     return rows.join('')
 }
 
-class FeatureCache {
-
-    constructor(chr, tileStart, tileEnd, bpPerPixel, features, roiFeatures, multiresolution) {
-        this.chr = chr;
-        this.startBP = tileStart;
-        this.endBP = tileEnd;
-        this.bpPerPixel = bpPerPixel;
-        this.features = features;
-        this.roiFeatures = roiFeatures;
-        this.multiresolution = multiresolution;
-    }
-
-    containsRange(chr, start, end, bpPerPixel) {
-
-        // For multi-resolution tracks allow for a 2X change in bpPerPixel
-        const r = this.multiresolution ? this.bpPerPixel / bpPerPixel : 1;
+var Tile = function (chr, tileStart, tileEnd, bpPerPixel, features, roiFeatures) {
+    this.chr = chr;
+    this.startBP = tileStart;
+    this.endBP = tileEnd;
+    this.bpPerPixel = bpPerPixel;
+    this.features = features;
+    this.roiFeatures = roiFeatures;
+};
 
-        return start >= this.startBP && end <= this.endBP && chr === this.chr && r > 0.5 && r < 2
-    }
+Tile.prototype.containsRange = function (chr, start, end, bpPerPixel) {
+    return this.bpPerPixel === bpPerPixel && start >= this.startBP && end <= this.endBP && chr === this.chr
+};
 
-    overlapsRange(chr, start, end) {
-        return this.chr === chr && end >= this.startBP && start <= this.endBP
-    }
-}
+Tile.prototype.overlapsRange = function (chr, start, end) {
+    return this.chr === chr && end >= this.startBP && start <= this.endBP
+};
 
 
 /**
@@ -24381,18 +24419,6 @@ class PairedAlignment {
         return true // By definition
     }
 
-    isMateMapped() {
-        return true // By definition
-    }
-
-    isProperPair() {
-        return this.firstAlignment.isProperPair()
-    }
-
-    get tlen() {
-        return Math.abs(this.firstAlignment.fragmentLength)
-    }
-
     firstOfPairStrand() {
 
         if (this.firstAlignment.isFirstOfPair()) {
@@ -24734,10 +24760,7 @@ function packAlignmentRows(alignments, start, end, showSoftClips) {
 
 
 class AlignmentContainer {
-
-    //            this.config.samplingWindowSize, this.config.samplingDepth,
-    //             this.config.pairsSupported, this.config.alleleFreqThreshold)
-    constructor(chr, start, end, {samplingWindowSize, samplingDepth, pairsSupported, alleleFreqThreshold}) {
+    constructor(chr, start, end, samplingWindowSize, samplingDepth, pairsSupported, alleleFreqThreshold) {
 
         this.chr = chr;
         this.start = Math.floor(start);
@@ -24765,12 +24788,17 @@ class AlignmentContainer {
             return alignment.isMapped() && !alignment.isFailsVendorQualityCheck()
         };
 
+        this.pairedEndStats = new PairedEndStats();
     }
 
     push(alignment) {
 
         if (this.filter(alignment) === false) return
 
+        if (alignment.isPaired()) {
+            this.pairedEndStats.push(alignment);
+        }
+
         this.coverageMap.incCounts(alignment);   // Count coverage before any downsampling
 
         if (this.pairsSupported && this.downsampledReads.has(alignment.readName)) {
@@ -24802,6 +24830,8 @@ class AlignmentContainer {
 
         this.pairsCache = undefined;
         this.downsampledReads = undefined;
+
+        this.pairedEndStats.compute();
     }
 
     contains(chr, start, end) {
@@ -25112,6 +25142,69 @@ class DownsampledInterval {
     }
 }
 
+class PairedEndStats {
+
+    constructor(lowerPercentile, upperPercentile) {
+        this.totalCount = 0;
+        this.frCount = 0;
+        this.rfCount = 0;
+        this.ffCount = 0;
+        this.sumF = 0;
+        this.sumF2 = 0;
+        //this.lp = lowerPercentile === undefined ? 0.005 : lowerPercentile;
+        //this.up = upperPercentile === undefined ? 0.995 : upperPercentile;
+        //this.digest = new Digest();
+    }
+
+    push(alignment) {
+
+        if (alignment.isProperPair()) {
+
+            var fragmentLength = Math.abs(alignment.fragmentLength);
+            //this.digest.push(fragmentLength);
+            this.sumF += fragmentLength;
+            this.sumF2 += fragmentLength * fragmentLength;
+
+            var po = alignment.pairOrientation;
+
+            if (typeof po === "string" && po.length === 4) {
+                var tmp = '' + po.charAt(0) + po.charAt(2);
+                switch (tmp) {
+                    case 'FF':
+                    case 'RR':
+                        this.ffCount++;
+                        break
+                    case "FR":
+                        this.frCount++;
+                        break
+                    case"RF":
+                        this.rfCount++;
+                }
+            }
+            this.totalCount++;
+        }
+    }
+
+    compute() {
+
+        if (this.totalCount > 100) {
+            if (this.ffCount / this.totalCount > 0.9) this.orienation = "ff";
+            else if (this.frCount / this.totalCount > 0.9) this.orienation = "fr";
+            else if (this.rfCount / this.totalCount > 0.9) this.orienation = "rf";
+
+
+            var fMean = this.sumF / this.totalCount;
+            var stdDev = Math.sqrt((this.totalCount * this.sumF2 - this.sumF * this.sumF) / (this.totalCount * this.totalCount));
+            this.lowerFragmentLength = fMean - 3 * stdDev;
+            this.upperFragmentLength = fMean + 3 * stdDev;
+
+            //this.lowerFragmentLength = this.digest.percentile(this.lp);
+            //this.upperFragmentLength = this.digest.percentile(this.up);
+            //this.digest = undefined;
+        }
+    }
+}
+
 class SupplementaryAlignment {
 
     constructor(rec) {
@@ -26301,7 +26394,7 @@ class BamReaderNonIndexed {
             const header = this.header;
             const queryChr = header.chrAliasTable.hasOwnProperty(chr) ? header.chrAliasTable[chr] : chr;
             const qAlignments = this.alignmentCache.queryFeatures(queryChr, bpStart, bpEnd);
-            const alignmentContainer = new AlignmentContainer(chr, bpStart, bpEnd, this.config);
+            const alignmentContainer = new AlignmentContainer(chr, bpStart, bpEnd, this.samplingWindowSize, this.samplingDepth, this.pairsSupported, this.alleleFreqThreshold);
             for (let a of qAlignments) {
                 alignmentContainer.push(a);
             }
@@ -26328,13 +26421,13 @@ class BamReaderNonIndexed {
         const alignments = [];
         this.header = BamUtils.decodeBamHeader(data);
         BamUtils.decodeBamRecords(data, this.header.size, alignments, this.header.chrNames);
-        this.alignmentCache = new FeatureCache$1(alignments, this.genome);
+        this.alignmentCache = new FeatureCache(alignments, this.genome);
     }
 
     fetchAlignments(chr, bpStart, bpEnd) {
         const queryChr = this.header.chrAliasTable.hasOwnProperty(chr) ? this.header.chrAliasTable[chr] : chr;
         const features = this.alignmentCache.queryFeatures(queryChr, bpStart, bpEnd);
-        const alignmentContainer = new AlignmentContainer(chr, bpStart, bpEnd, this.config);
+        const alignmentContainer = new AlignmentContainer(chr, bpStart, bpEnd, this.samplingWindowSize, this.samplingDepth, this.pairsSupported);
         for (let feature of features) {
             alignmentContainer.push(feature);
         }
@@ -27325,7 +27418,9 @@ class BamReader {
         const chrToIndex = await this.getChrIndex();
         const queryChr = this.chrAliasTable.hasOwnProperty(chr) ? this.chrAliasTable[chr] : chr;
         const chrId = chrToIndex[queryChr];
-        const alignmentContainer = new AlignmentContainer(chr, bpStart, bpEnd, this.config);
+        const alignmentContainer = new AlignmentContainer(chr, bpStart, bpEnd,
+            this.config.samplingWindowSize, this.config.samplingDepth,
+            this.config.pairsSupported, this.config.alleleFreqThreshold);
 
         if (chrId === undefined) {
             return alignmentContainer
@@ -27457,7 +27552,7 @@ class ShardedBamReader {
     async readAlignments(chr, start, end) {
 
         if (!this.bamReaders.hasOwnProperty(chr)) {
-            return new AlignmentContainer(chr, start, end, this.config)
+            return new AlignmentContainer(chr, start, end)
         } else {
 
             let reader = this.bamReaders[chr];
@@ -27548,7 +27643,7 @@ BamWebserviceReader.prototype.readAlignments = function (chr, bpStart, bpEnd) {
 
                     header.chrToIndex[queryChr];
 
-                    alignmentContainer = new AlignmentContainer(chr, bpStart, bpEnd, self.config);
+                    alignmentContainer = new AlignmentContainer(chr, bpStart, bpEnd, self.samplingWindowSize, self.samplingDepth, self.pairsSupported, self.alleleFreqThreshold);
 
                     BamUtils.decodeSamRecords(sam, alignmentContainer, queryChr, bpStart, bpEnd, self.filter);
 
@@ -27802,7 +27897,7 @@ class HtsgetBamReader extends HtsgetReader {
         const ba = unbgzf(compressedData.buffer);
 
         const chrIdx = this.header.chrToIndex[chr];
-        const alignmentContainer = new AlignmentContainer(chr, start, end, this.config);
+        const alignmentContainer = new AlignmentContainer(chr, start, end, this.samplingWindowSize, this.samplingDepth, this.pairsSupported, this.alleleFreqThreshold);
         BamUtils.decodeBamRecords(ba, this.header.size, alignmentContainer, this.header.chrNames, chrIdx, start, end);
         alignmentContainer.finish();
 
@@ -27968,7 +28063,8 @@ class CramReader {
         const header = await this.getHeader();
         const queryChr = header.chrAliasTable.hasOwnProperty(chr) ? header.chrAliasTable[chr] : chr;
         const chrIdx = header.chrToIndex[queryChr];
-        const alignmentContainer = new AlignmentContainer(chr, bpStart, bpEnd, this.config);
+        const alignmentContainer = new AlignmentContainer(chr, bpStart, bpEnd,
+            this.samplingWindowSize, this.samplingDepth, this.pairsSupported, this.alleleFreqThreshold);
 
         if (chrIdx === undefined) {
             return alignmentContainer
@@ -28584,7 +28680,7 @@ Ga4ghAlignmentReader.prototype.readAlignments = function (chr, bpStart, bpEnd) {
                     "pageSize": "10000"
                 },
                 decode: decodeGa4ghReads,
-                results: new AlignmentContainer(chr, bpStart, bpEnd, self.config)
+                results: new AlignmentContainer(chr, bpStart, bpEnd, self.samplingWindowSize, self.samplingDepth, self.pairsSupported, self.alleleFreqThreshold)
             })
         })
 
@@ -28917,6 +29013,7 @@ class BamSource {
 
         this.config = config;
         this.genome = genome;
+        this.alignmentContainer = undefined;
 
         if (isDataURL(config.url)) {
             if ("cram" === config.format) {
@@ -28964,11 +29061,19 @@ class BamSource {
     }
 
     setViewAsPairs(bool) {
-        this.viewAsPairs = bool;
+
+        if (this.viewAsPairs !== bool) {
+            this.viewAsPairs = bool;
+            // if (this.alignmentContainer) {
+            //     this.alignmentContainer.setViewAsPairs(bool);
+            // }
+        }
     }
 
     setShowSoftClips(bool) {
-        this.showSoftClips = bool;
+        if (this.showSoftClips !== bool) {
+            this.showSoftClips = bool;
+        }
     }
 
     async getAlignments(chr, bpStart, bpEnd) {
@@ -28976,28 +29081,33 @@ class BamSource {
         const genome = this.genome;
         const showSoftClips = this.showSoftClips;
 
-        const alignmentContainer = await this.bamReader.readAlignments(chr, bpStart, bpEnd);
-        let alignments = alignmentContainer.alignments;
-        if (!this.viewAsPairs) {
-            alignments = unpairAlignments([{alignments: alignments}]);
-        }
-        const hasAlignments = alignments.length > 0;
-        alignmentContainer.packedAlignmentRows = packAlignmentRows(alignments, alignmentContainer.start, alignmentContainer.end, showSoftClips);
-
-        this.alignmentContainer = alignmentContainer;
+        if (this.alignmentContainer && this.alignmentContainer.contains(chr, bpStart, bpEnd)) {
+            return this.alignmentContainer
 
-        if (hasAlignments) {
-            const sequence = await genome.sequence.getSequence(chr, alignmentContainer.start, alignmentContainer.end);
-            if (sequence) {
-                alignmentContainer.coverageMap.refSeq = sequence;    // TODO -- fix this
-                alignmentContainer.sequence = sequence;           // TODO -- fix this
-                return alignmentContainer
-            } else {
-                console.error("No sequence for: " + chr + ":" + alignmentContainer.start + "-" + alignmentContainer.end);
+        } else {
+            const alignmentContainer = await this.bamReader.readAlignments(chr, bpStart, bpEnd);
+            let alignments = alignmentContainer.alignments;
+            if (!this.viewAsPairs) {
+                alignments = unpairAlignments([{alignments: alignments}]);
+            }
+            const hasAlignments = alignments.length > 0;
+            alignmentContainer.packedAlignmentRows = packAlignmentRows(alignments, alignmentContainer.start, alignmentContainer.end, showSoftClips);
+            alignmentContainer.alignments = undefined;  // Don't need to hold onto these anymore
+
+            this.alignmentContainer = alignmentContainer;
+
+            if (hasAlignments) {
+                const sequence = await genome.sequence.getSequence(chr, alignmentContainer.start, alignmentContainer.end);
+                if (sequence) {
+                    alignmentContainer.coverageMap.refSeq = sequence;    // TODO -- fix this
+                    alignmentContainer.sequence = sequence;           // TODO -- fix this
+                    return alignmentContainer
+                } else {
+                    console.error("No sequence for: " + chr + ":" + alignmentContainer.start + "-" + alignmentContainer.end);
+                }
             }
+            return alignmentContainer
         }
-        return alignmentContainer
-
     }
 }
 
@@ -29315,7 +29425,7 @@ class TrackBase {
 
         // We use the cached features rather than method to avoid async load.  If the
         // feature is not already loaded this won't work,  but the user wouldn't be mousing over it either.
-        if (!features) features = clickState.viewport.cachedFeatures;
+        if (!features) features = clickState.viewport.getCachedFeatures();
 
         if (!features || features.length === 0) {
             return []
@@ -29819,7 +29929,8 @@ class Locus {
     }
 
     overlaps(locus) {
-        return locus.chr === this.chr && !(locus.end < this.start || locus.start > this.end)
+        return locus.chr === this.chr
+            && !(locus.end < this.start || locus.start > this.end)
     }
 
     extend(l) {
@@ -31696,19 +31807,6 @@ function makeCircViewChromosomes(genome) {
     return regions
 }
 
-function sendChords(chords, track, refFrame, alpha) {
-
-    const chordSetColor = IGVColor.addAlpha("all" === refFrame.chr ? track.color : getChrColor(refFrame.chr), alpha);
-    const trackColor = IGVColor.addAlpha(track.color || 'rgb(0,0,255)', alpha);
-
-    // name the chord set to include locus and filtering information
-    const encodedName = track.name.replaceAll(' ', '%20');
-    const chordSetName = "all" === refFrame.chr ? encodedName :
-        `${encodedName}  ${refFrame.chr}:${refFrame.start}-${refFrame.end}`;
-    track.browser.circularView.addChords(chords, {track: chordSetName, color: chordSetColor, trackColor: trackColor});
-
-}
-
 
 function createCircularView(el, browser) {
 
@@ -31718,102 +31816,42 @@ function createCircularView(el, browser) {
 
             const f1 = feature.data;
             const f2 = f1.mate;
-            addFrameForFeature(f1);
-            addFrameForFeature(f2);
-
-            function addFrameForFeature(feature) {
-
-                feature.chr = browser.genome.getChromosomeName(feature.refName);
-
-                for (let referenceFrame of browser.currentReferenceFrames()) {
-                    const l = Locus.fromLocusString(referenceFrame.getLocusString());
-                    if (l.contains(feature)) {
-                        break
-                    } else if (l.overlaps(feature)) {
-                        referenceFrame.extend(feature);
-                        break
-                    } else {
-                        const flanking = 2000;
-                        const center = (feature.start + feature.end) / 2;
-                        browser.addMultiLocusPanel(feature.chr, center - flanking, center + flanking);
-                        break
-                    }
-                }
-            }
-        }
-    });
+            const flanking = 2000;
 
-    return circularView
-}
+            const l1 = new Locus({chr: browser.genome.getChromosomeName(f1.refName), start: f1.start, end: f1.end});
+            const l2 = new Locus({chr: browser.genome.getChromosomeName(f2.refName), start: f2.start, end: f2.end});
 
-class PairedEndStats {
+            let loci;
 
-    constructor(alignments, {minTLENPercentile, maxTLENPercentile}) {
-        this.totalCount = 0;
-        this.frCount = 0;
-        this.rfCount = 0;
-        this.ffCount = 0;
-        this.sumF = 0;
-        this.sumF2 = 0;
-        this.lp = minTLENPercentile === undefined ? 0.1 : minTLENPercentile;
-        this.up = maxTLENPercentile === undefined ? 99.5 : maxTLENPercentile;
-        this.isizes = [];
-        this.compute(alignments);
-    }
+            // If there is overlap with current loci
 
-    compute(alignments) {
+            loci = browser.currentLoci().map(str => Locus.fromLocusString(str));
 
-        for (let alignment of alignments) {
-            if (alignment.isProperPair()) {
-                var tlen = Math.abs(alignment.fragmentLength);
-                this.sumF += tlen;
-                this.sumF2 += tlen * tlen;
-                this.isizes.push(tlen);
-
-                var po = alignment.pairOrientation;
-
-                if (typeof po === "string" && po.length === 4) {
-                    var tmp = '' + po.charAt(0) + po.charAt(2);
-                    switch (tmp) {
-                        case 'FF':
-                        case 'RR':
-                            this.ffCount++;
-                            break
-                        case "FR":
-                            this.frCount++;
-                            break
-                        case"RF":
-                            this.rfCount++;
+            if (loci.some(locus => locus.contains(l1)) || loci.some(locus => locus.contains(l2))) {
+                for (let l of [l1, l2]) {
+                    if (!loci.some(locus => {
+                        return locus.contains(l)
+                    })) {
+                        // add flanking
+                        l.start = Math.max(0, l.start - flanking);
+                        l.end += flanking;
+                        loci.push(l);
                     }
                 }
-                this.totalCount++;
+            } else {
+                l1.start = Math.max(0, l1.start - flanking);
+                l1.end += flanking;
+                l2.start = Math.max(0, l2.start - flanking);
+                l2.end += flanking;
+                loci = [l1, l2];
             }
-        }
-
-        if (this.ffCount / this.totalCount > 0.9) this.orienation = "ff";
-        else if (this.frCount / this.totalCount > 0.9) this.orienation = "fr";
-        else if (this.rfCount / this.totalCount > 0.9) this.orienation = "rf";
 
-        this.minTLEN = this.lp === 0 ? 0 : percentile(this.isizes, this.lp);
-        this.maxTLEN = percentile(this.isizes, this.up);
-
-        // var fMean = this.sumF / this.totalCount
-        // var stdDev = Math.sqrt((this.totalCount * this.sumF2 - this.sumF * this.sumF) / (this.totalCount * this.totalCount))
-        // this.minTLEN = fMean - 3 * stdDev
-        // this.maxTLEN = fMean + 3 * stdDev
-
-    }
-}
-
-function percentile(array, p) {
-
-    if (array.length === 0) return undefined
-    var k = Math.floor(array.length * (p / 100));
-    array.sort(function (a, b) {
-        return a - b
+            const searchString = loci.map(l => l.getLocusString()).join(" ");
+            browser.search(searchString);
+        }
     });
-    return array[k]
 
+    return circularView
 }
 
 /*
@@ -31880,6 +31918,8 @@ class BAMTrack extends TrackBase {
         this.showMismatches = false !== config.showMismatches;
         this.color = config.color;
         this.coverageColor = config.coverageColor;
+        this.minFragmentLength = config.minFragmentLength;   // Optional, might be undefined
+        this.maxFragmentLength = config.maxFragmentLength || 1000;
 
         // The sort object can be an array in the case of multi-locus view, however if multiple sort positions
         // are present for a given reference frame the last one will take precedence
@@ -31907,24 +31947,12 @@ class BAMTrack extends TrackBase {
         return this._height
     }
 
-    get minTemplateLength() {
-        const configMinTLEN = this.config.minTLEN !== undefined ? this.config.minTLEN : this.config.minFragmentLength;
-        return (configMinTLEN !== undefined) ? configMinTLEN :
-            this._pairedEndStats ? this._pairedEndStats.minTLEN : 0
-    }
-
-    get maxTemplateLength() {
-        const configMaxTLEN = this.config.maxTLEN !== undefined ? this.config.maxTLEN : this.config.maxFragmentLength;
-        return (configMaxTLEN !== undefined) ? configMaxTLEN :
-            this._pairedEndStats ? this._pairedEndStats.maxTLEN : 1000
-    }
-
     sort(options) {
         options = this.assignSort(options);
 
         for (let vp of this.trackView.viewports) {
             if (vp.containsPosition(options.chr, options.position)) {
-                const alignmentContainer = vp.cachedFeatures;
+                const alignmentContainer = vp.getCachedFeatures();
                 if (alignmentContainer) {
                     sortAlignmentRows(options, alignmentContainer);
                     vp.repaint();
@@ -31959,13 +31987,14 @@ class BAMTrack extends TrackBase {
 
         const alignmentContainer = await this.featureSource.getAlignments(chr, bpStart, bpEnd);
 
-        if (alignmentContainer.paired && !this._pairedEndStats && !this.config.maxFragmentLength) {
-            const pairedEndStats = new PairedEndStats(alignmentContainer.alignments, this.config);
-            if (pairedEndStats.totalCount > 99) {
-                this._pairedEndStats = pairedEndStats;
+        if (alignmentContainer.alignments && alignmentContainer.alignments.length > 99) {
+            if (undefined === this.minFragmentLength) {
+                this.minFragmentLength = alignmentContainer.pairedEndStats.lowerFragmentLength;
+            }
+            if (undefined === this.maxFragmentLength) {
+                this.maxFragmentLength = alignmentContainer.pairedEndStats.upperFragmentLength;
             }
         }
-        alignmentContainer.alignments = undefined;  // Don't need to hold onto these anymore
 
         const sort = this.sortObject;
         if (sort) {
@@ -32062,7 +32091,7 @@ class BAMTrack extends TrackBase {
         if (this.alignmentTrack.hasPairs) {
             colorByMenuItems.push({key: 'firstOfPairStrand', label: 'first-of-pair strand'});
             colorByMenuItems.push({key: 'pairOrientation', label: 'pair orientation'});
-            colorByMenuItems.push({key: 'tlen', label: 'insert size (TLEN)'});
+            colorByMenuItems.push({key: 'fragmentLength', label: 'insert size (TLEN)'});
             colorByMenuItems.push({key: 'unexpectedPair', label: 'pair orientation & insert size (TLEN)'});
         }
         const tagLabel = 'tag' + (this.alignmentTrack.colorByTag ? ' (' + this.alignmentTrack.colorByTag + ')' : '');
@@ -32168,7 +32197,7 @@ class BAMTrack extends TrackBase {
             });
         }
 
-        // Add chords to JBrowse circular view, if present
+        // Experimental JBrowse feature
         if (this.browser.circularView && true === this.browser.circularViewVisible &&
             (this.alignmentTrack.hasPairs || this.alignmentTrack.hasSupplemental)) {
             menuItems.push('<hr/>');
@@ -32176,9 +32205,24 @@ class BAMTrack extends TrackBase {
                 menuItems.push({
                     label: 'Add discordant pairs to circular view',
                     click: () => {
+                        const maxFragmentLength = this.maxFragmentLength;
+                        const inView = [];
                         for (let viewport of this.trackView.viewports) {
-                            this.addPairedChordsForViewport(viewport);
+                            for (let a of viewport.getCachedFeatures().allAlignments()) {
+                                const referenceFrame = viewport.referenceFrame;
+                                if (a.end >= referenceFrame.start
+                                    && a.start <= referenceFrame.end
+                                    && a.mate
+                                    && a.mate.chr
+                                    && (a.mate.chr !== a.chr || Math.max(a.fragmentLength) > maxFragmentLength)) {
+                                    inView.push(a);
+                                }
+                            }
                         }
+                        this.browser.circularViewVisible = true;
+                        const chords = makePairedAlignmentChords(inView);
+                        const color = IGVColor.addAlpha(this.color || 'rgb(0,0,255)', 0.02);
+                        this.browser.circularView.addChords(chords, {track: this.name, color: color});
                     }
                 });
             }
@@ -32186,9 +32230,19 @@ class BAMTrack extends TrackBase {
                 menuItems.push({
                     label: 'Add split reads to circular view',
                     click: () => {
+                        const inView = [];
                         for (let viewport of this.trackView.viewports) {
-                            this.addSplitChordsForViewport(viewport);
+                            for (let a of viewport.getCachedFeatures().allAlignments()) {
+                                const referenceFrame = viewport.referenceFrame;
+                                const sa = a.hasTag('SA');
+                                if (a.end >= referenceFrame.start && a.start <= referenceFrame.end && sa) {
+                                    inView.push(a);
+                                }
+                            }
                         }
+                        const chords = makeSupplementalAlignmentChords(inView);
+                        const color = IGVColor.addAlpha(this.color || 'rgb(0,0,255)', 0.1);
+                        this.browser.circularView.addChords(chords, {track: this.name, color: color});
                     }
                 });
             }
@@ -32300,7 +32354,7 @@ class BAMTrack extends TrackBase {
     }
 
     getCachedAlignmentContainers() {
-        return this.trackView.viewports.map(vp => vp.cachedFeatures)
+        return this.trackView.viewports.map(vp => vp.getCachedFeatures())
     }
 
     get dataRange() {
@@ -32326,62 +32380,6 @@ class BAMTrack extends TrackBase {
     set autoscale(autoscale) {
         this.coverageTrack.autoscale = autoscale;
     }
-
-    /**
-     * Add chords to the circular view for the given viewport, represented by its reference frame
-     * @param refFrame
-     */
-    addPairedChordsForViewport(viewport) {
-
-        const maxTemplateLength = this.maxTemplateLength;
-        const inView = [];
-        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);
-            }
-        }
-        const chords = makePairedAlignmentChords(inView);
-        sendChords(chords, this, refFrame, 0.02);
-
-        // const chordSetColor = IGVColor.addAlpha("all" === refFrame.chr ? this.color : getChrColor(refFrame.chr), 0.02)
-        // const trackColor = IGVColor.addAlpha(this.color || 'rgb(0,0,255)', 0.02)
-        //
-        // // name the chord set to include track name and locus
-        // const encodedName = this.name.replaceAll(' ', '%20')
-        // const chordSetName = "all" === refFrame.chr ? encodedName :
-        //     `${encodedName} (${refFrame.chr}:${refFrame.start}-${refFrame.end}`
-        // this.browser.circularView.addChords(chords, {name: chordSetName, color: chordSetColor, trackColor: trackColor})
-    }
-
-    addSplitChordsForViewport(viewport) {
-
-        const inView = [];
-        const refFrame = viewport.referenceFrame;
-        for (let a of viewport.cachedFeatures.allAlignments()) {
-
-            const sa = a.hasTag('SA');
-            if (a.end >= refFrame.start && a.start <= refFrame.end && sa) {
-                inView.push(a);
-            }
-        }
-
-        const chords = makeSupplementalAlignmentChords(inView);
-        sendChords(chords, this, refFrame, 0.02);
-
-        // const chordSetColor = IGVColor.addAlpha("all" === refFrame.chr ? this.color : getChrColor(refFrame.chr), 0.02)
-        // const trackColor = IGVColor.addAlpha(this.color || 'rgb(0,0,255)', 0.02)
-        //
-        // // name the chord set to include track name and locus
-        // const encodedName = this.name.replaceAll(' ', '%20')
-        // const chordSetName = "all" === refFrame.chr ? encodedName :
-        //     `${encodedName} (${refFrame.chr}:${refFrame.start}-${refFrame.end}`
-        // this.browser.circularView.addChords(chords, {name: chordSetName, color: chordSetColor, trackColor: trackColor})
-    }
 }
 
 
@@ -32502,7 +32500,7 @@ class CoverageTrack {
 
     getClickedObject(clickState) {
 
-        let features = clickState.viewport.cachedFeatures;
+        let features = clickState.viewport.getCachedFeatures();
         if (!features || features.length === 0) return
 
         const genomicLocation = Math.floor(clickState.genomicLocation);
@@ -32578,8 +32576,8 @@ class AlignmentTrack {
         this.skippedColor = config.skippedColor || "rgb(150, 170, 170)";
         this.pairConnectorColor = config.pairConnectorColor;
 
-        this.smallTLENColor = config.smallTLENColor || config.smallFragmentLengthColor || "rgb(0, 0, 150)";
-        this.largeTLENColor = config.largeTLENColor || config.largeFragmentLengthColor || "rgb(200, 0, 0)";
+        this.smallFragmentLengthColor = config.smallFragmentLengthColor || "rgb(0, 0, 150)";
+        this.largeFragmentLengthColor = config.largeFragmentLengthColor || "rgb(200, 0, 0)";
 
         this.pairOrientation = config.pairOrienation || 'fr';
         this.pairColors = {};
@@ -32587,7 +32585,7 @@ class AlignmentTrack {
         this.pairColors["RR"] = config.rrColor || "rgb(20, 50, 200)";
         this.pairColors["LL"] = config.llColor || "rgb(0, 150, 150)";
 
-        this.colorBy = config.colorBy || "unexpectedPair";
+        this.colorBy = config.colorBy || "pairOrientation";
         this.colorByTag = config.colorByTag ? config.colorByTag.toUpperCase() : undefined;
         this.bamColorTag = config.bamColorTag === undefined ? "YC" : config.bamColorTag;
 
@@ -32979,7 +32977,7 @@ class AlignmentTrack {
                 direction: direction
             };
             this.parent.sortObject = newSortObject;
-            sortAlignmentRows(newSortObject, viewport.cachedFeatures);
+            sortAlignmentRows(newSortObject, viewport.getCachedFeatures());
             viewport.repaint();
         };
         list.push('<b>Sort by...</b>');
@@ -33009,7 +33007,7 @@ class AlignmentTrack {
                                 };
                                 this.sortByTag = tag;
                                 this.parent.sortObject = newSortObject;
-                                sortAlignmentRows(newSortObject, viewport.cachedFeatures);
+                                sortAlignmentRows(newSortObject, viewport.getCachedFeatures());
                                 viewport.repaint();
                             }
                         }
@@ -33036,11 +33034,7 @@ class AlignmentTrack {
                                 const referenceFrame = clickState.viewport.referenceFrame;
                                 if (this.browser.genome.getChromosome(clickedAlignment.mate.chr)) {
                                     this.highlightedAlignmentReadNamed = clickedAlignment.readName;
-                                    //this.browser.presentMultiLocusPanel(clickedAlignment, referenceFrame)
-                                    const bpWidth = referenceFrame.end - referenceFrame.start;
-                                    const frameStart = clickedAlignment.mate.position - bpWidth / 2;
-                                    const frameEnd = clickedAlignment.mate.position + bpWidth / 2;
-                                    this.browser.addMultiLocusPanel(clickedAlignment.mate.chr, frameStart, frameEnd, referenceFrame);
+                                    this.browser.presentMultiLocusPanel(clickedAlignment, referenceFrame);
                                 } else {
                                     Alert.presentAlert(`Reference does not contain chromosome: ${clickedAlignment.mate.chr}`);
                                 }
@@ -33088,7 +33082,19 @@ class AlignmentTrack {
                 list.push({
                     label: 'Add discordant pairs to circular view',
                     click: () => {
-                        this.parent.addPairedChordsForViewport(viewport);
+                        const maxFragmentLength = this.parent.maxFragmentLength;
+                        const {referenceFrame} = viewport;
+                        const inView = viewport.getCachedFeatures().allAlignments().filter(a => {
+                            return a.end >= referenceFrame.start
+                                && a.start <= referenceFrame.end
+                                && a.mate
+                                && a.mate.chr
+                                && (a.mate.chr !== a.chr || Math.max(a.fragmentLength) > maxFragmentLength)
+                        });
+                        this.browser.circularViewVisible = true;
+                        const chords = makePairedAlignmentChords(inView);
+                        const color = IGVColor.addAlpha(this.parent.color || 'rgb(0,0,255)', 0.02);
+                        this.browser.circularView.addChords(chords, {track: this.parent.name, color: color});
                     }
                 });
             }
@@ -33096,7 +33102,17 @@ class AlignmentTrack {
                 list.push({
                     label: 'Add split reads to circular view',
                     click: () => {
-                        this.parent.addSplitChordsForViewport(viewport);
+                        const inView = [];
+                        for (let a of viewport.getCachedFeatures().allAlignments()) {
+                            const referenceFrame = viewport.referenceFrame;
+                            const sa = a.hasTag('SA');
+                            if (a.end >= referenceFrame.start && a.start <= referenceFrame.end && sa) {
+                                inView.push(a);
+                            }
+                        }
+                        const chords = makeSupplementalAlignmentChords(inView);
+                        const color = IGVColor.addAlpha(this.color || 'rgb(0,0,255)', 0.1);
+                        this.browser.circularView.addChords(chords, {track: this.name, color: color});
                     }
                 });
             }
@@ -33115,7 +33131,7 @@ class AlignmentTrack {
 
         const showSoftClips = this.parent.showSoftClips;
 
-        let features = viewport.cachedFeatures;
+        let features = viewport.getCachedFeatures();
         if (!features || features.length === 0) return
 
         let packedAlignmentRows = features.packedAlignmentRows;
@@ -33206,17 +33222,14 @@ class AlignmentTrack {
                     break
                 }
 
-            case "tlen":
             case "fragmentLength":
 
-                if (alignment.mate && alignment.isMateMapped()) {
-                    if (alignment.mate.chr !== alignment.chr) {
-                        color = getChrColor(alignment.mate.chr);
-                    } else if (this.parent.minTemplateLength && Math.abs(alignment.fragmentLength) < this.parent.minTemplateLength) {
-                        color = this.smallTLENColor;
-                    } else if (this.parent.maxTemplateLength && Math.abs(alignment.fragmentLength) > this.parent.maxTemplateLength) {
-                        color = this.largeTLENColor;
-                    }
+                if (alignment.mate && alignment.isMateMapped() && alignment.mate.chr !== alignment.chr) {
+                    color = getChrColor(alignment.mate.chr);
+                } else if (this.parent.minFragmentLength && Math.abs(alignment.fragmentLength) < this.parent.minFragmentLength) {
+                    color = this.smallFragmentLengthColor;
+                } else if (this.parent.maxFragmentLength && Math.abs(alignment.fragmentLength) > this.parent.maxFragmentLength) {
+                    color = this.largeFragmentLengthColor;
                 }
                 break
 
@@ -33258,6 +33271,11 @@ function sortAlignmentRows(options, alignmentContainer) {
         return true === direction ? i : -i
     });
 
+    // For debugging
+    // for(let r of alignmentContainer.packedAlignmentRows) {
+    //     console.log(r.score);
+    // }
+
 }
 
 function shadedBaseColor(qual, baseColor) {
@@ -33417,7 +33435,7 @@ class RulerViewport extends TrackViewport {
 
         this.$rulerLabel.click(async () => {
 
-            await this.browser.gotoMultilocusPanel(this.referenceFrame);
+            await this.browser.selectMultiLocusPanel(this.referenceFrame);
 
             // const removals = this.browser.referenceFrameList.filter(r => this.referenceFrame !== r)
             // for (let referenceFrame of removals) {
@@ -33755,7 +33773,7 @@ class IdeogramViewport extends TrackViewport {
             referenceFrame.end = ee;
             referenceFrame.bpPerPixel = (ee - ss) / width;
 
-            this.browser.updateViews(true);
+            this.browser.updateViews(referenceFrame, this.browser.trackViews, true);
 
         }
 
@@ -34353,11 +34371,15 @@ const colorPickerExclusionTypes = new Set(['ruler', 'sequence', 'ideogram']);
 class TrackView {
 
     constructor(browser, columnContainer, track) {
+
         this.namespace = `trackview-${guid$2()}`;
+
         this.browser = browser;
         this.track = track;
         track.trackView = this;
+
         this.addDOMToColumnContainer(browser, columnContainer, browser.referenceFrameList);
+
     }
 
     /**
@@ -34520,14 +34542,19 @@ class TrackView {
         if (false === colorPickerExclusionTypes.has(this.track.type)) {
 
             const trackColors = [];
+
             const color = this.track.color || this.track.defaultColor;
+
             if (isString$3(color)) {
                 trackColors.push(color);
             }
+
             if (this.track.altColor && isString$3(this.track.altColor)) {
                 trackColors.push(this.track.altColor);
             }
+
             const defaultColors = trackColors.map(c => c.startsWith("#") ? c : c.startsWith("rgb(") ? IGVColor.rgbToHex(c) : IGVColor.colorNameToHex(c));
+
             const colorHandlers =
                 {
                     color: color => {
@@ -34540,6 +34567,7 @@ class TrackView {
                     }
 
                 };
+
             this.browser.genericColorPicker.configure(defaultColors, colorHandlers);
             this.browser.genericColorPicker.setActiveColorHandler(key);
             this.browser.genericColorPicker.show();
@@ -34553,6 +34581,7 @@ class TrackView {
             if (this.track.minHeight) {
                 newHeight = Math.max(this.track.minHeight, newHeight);
             }
+
             if (this.track.maxHeight) {
                 newHeight = Math.min(this.track.maxHeight, newHeight);
             }
@@ -34647,9 +34676,7 @@ class TrackView {
     repaintViews() {
 
         for (let viewport of this.viewports) {
-            if(viewport.isVisible()) {
-                viewport.repaint();
-            }
+            viewport.repaint();
         }
 
         if (typeof this.track.paintAxis === 'function') {
@@ -34676,9 +34703,6 @@ class TrackView {
 
     /**
      * Update viewports to reflect current genomic state, possibly loading additional data.
-     *
-     * @param force - if true, force a repaint even if no new data is loaded
-     * @returns {Promise<void>}
      */
     async updateViews(force) {
 
@@ -34696,24 +34720,24 @@ class TrackView {
         }
 
         // rpv: viewports whose image (canvas) does not fully cover current genomic range
-        const reloadableViewports = force ? visibleViewports : this.viewportsToReload();
+        const reloadableViewports = this.viewportsToReload(force);
 
         // Trigger viewport to load features needed to cover current genomic range
         // NOTE: these must be loaded synchronously, do not user Promise.all,  not all file readers are thread safe
         for (let viewport of reloadableViewports) {
             await viewport.loadFeatures();
         }
-
+        
         if (this.disposed) return   // Track was removed during load
 
-        // Special case for variant tracks in multilocus view.  The # of rows to allocate to the variant (site)
+        // Very special case for variant tracks in multilocus view.  The # of rows to allocate to the variant (site)
         // section depends on data from all the views.  We only need to adjust this however if any data was loaded
         // (i.e. reloadableViewports.length > 0)
         if (this.track && typeof this.track.variantRowCount === 'function' && reloadableViewports.length > 0) {
             let maxRow = 0;
             for (let viewport of this.viewports) {
-                if (viewport.featureCache && viewport.featureCache.features) {
-                    maxRow = Math.max(maxRow, viewport.featureCache.features.reduce((a, f) => Math.max(a, f.row || 0), 0));
+                if (viewport.tile && viewport.tile.features) {
+                    maxRow = Math.max(maxRow, viewport.tile.features.reduce((a, f) => Math.max(a, f.row || 0), 0));
                 }
             }
             const current = this.track.nVariantRows;
@@ -34725,18 +34749,19 @@ class TrackView {
             }
         }
 
+
         if (this.track.autoscale) {
             let allFeatures = [];
             for (let visibleViewport of visibleViewports) {
                 const referenceFrame = visibleViewport.referenceFrame;
                 const start = referenceFrame.start;
                 const end = start + referenceFrame.toBP($$1(visibleViewport.contentDiv).width());
-                if (visibleViewport.featureCache && visibleViewport.featureCache.features) {
-                    if (typeof visibleViewport.featureCache.features.getMax === 'function') {
-                        const max = visibleViewport.featureCache.features.getMax(start, end);
+                if (visibleViewport.tile && visibleViewport.tile.features) {
+                    if (typeof visibleViewport.tile.features.getMax === 'function') {
+                        const max = visibleViewport.tile.features.getMax(start, end);
                         allFeatures.push({value: max});
                     } else {
-                        allFeatures = allFeatures.concat(FeatureUtils.findOverlapping(visibleViewport.featureCache.features, start, end));
+                        allFeatures = allFeatures.concat(FeatureUtils.findOverlapping(visibleViewport.tile.features, start, end));
                     }
                 }
             }
@@ -34747,18 +34772,14 @@ class TrackView {
             }
         }
 
-        // Must repaint all viewports if autoscaling.  Always repaint ruler.
-        if (this.track.autoscale || this.track.autoscaleGroup || this.track.type === 'ruler' || force) {
-            for (let vp of visibleViewports) {
-                vp.repaint();
+        // Must repaint all viewports if autoscaling
+        if (!isDragging && (this.track.autoscale || this.track.autoscaleGroup)) {
+            for (let visibleViewport of visibleViewports) {
+                visibleViewport.repaint();
             }
         } else {
-            const reloadedViewports = new Set(reloadableViewports);
-            for (let vp of visibleViewports) {
-                const invalid = vp.canvas && vp.canvas._data && vp.canvas._data.invalidate;
-                if (invalid || reloadedViewports.has(vp)) {
-                    vp.repaint();
-                }
+            for (let vp of reloadableViewports) {
+                vp.repaint();
             }
         }
 
@@ -34789,14 +34810,14 @@ class TrackView {
     /**
      * Return a promise to get all in-view features.  Used for group autoscaling.
      */
-    async getInViewFeatures() {
+    async getInViewFeatures(force) {
 
         if (!(this.browser && this.browser.referenceFrameList)) {
             return []
         }
 
         // List of viewports that need reloading
-        const rpV = this.viewportsToReload();
+        const rpV = this.viewportsToReload(force);
         const promises = rpV.map(function (vp) {
             return vp.loadFeatures()
         });
@@ -34805,16 +34826,16 @@ class TrackView {
 
         let allFeatures = [];
         for (let vp of this.viewports) {
-            if (vp.featureCache && vp.featureCache.features) {
+            if (vp.tile && vp.tile.features) {
                 const referenceFrame = vp.referenceFrame;
                 const start = referenceFrame.start;
                 const end = start + referenceFrame.toBP($$1(vp.contentDiv).width());
 
-                if (typeof vp.featureCache.features.getMax === 'function') {
-                    const max = vp.featureCache.features.getMax(start, end);
+                if (typeof vp.tile.features.getMax === 'function') {
+                    const max = vp.tile.features.getMax(start, end);
                     allFeatures.push({value: max});
                 } else {
-                    allFeatures = allFeatures.concat(FeatureUtils.findOverlapping(vp.featureCache.features, start, end));
+                    allFeatures = allFeatures.concat(FeatureUtils.findOverlapping(vp.tile.features, start, end));
                 }
             }
         }
@@ -34870,7 +34891,7 @@ class TrackView {
                 const start = referenceFrame.start;
                 const end = start + referenceFrame.toBP($$1(viewport.contentDiv).width());
                 const bpPerPixel = referenceFrame.bpPerPixel;
-                return (!viewport.featureCache || !viewport.featureCache.containsRange(chr, start, end, bpPerPixel))
+                return force || (!viewport.tile || viewport.tile.invalidate || !viewport.tile.containsRange(chr, start, end, bpPerPixel))
             }
         });
         return viewports
@@ -39653,7 +39674,7 @@ class TextFeatureSource {
                 mapProperties(features, config.mappings);
             }
             this.queryable = false;
-            this.featureCache = new FeatureCache$1(features, genome);
+            this.featureCache = new FeatureCache(features, genome);
         } else if (config.reader) {
             // Explicit reader implementation
             this.reader = config.reader;
@@ -39820,14 +39841,14 @@ class TextFeatureSource {
             }
 
             // Note - replacing previous cache with new one.  genomicInterval is optional (might be undefined => includes all features)
-            this.featureCache = new FeatureCache$1(features, this.genome, genomicInterval);
+            this.featureCache = new FeatureCache(features, this.genome, genomicInterval);
 
             // If track is marked "searchable"< cache features by name -- use this with caution, memory intensive
             if (this.config.searchable || this.config.searchableFields) {
                 this.addFeaturesToDB(features);
             }
         } else {
-            this.featureCache = new FeatureCache$1([], genomicInterval);     // Empty cache
+            this.featureCache = new FeatureCache([], genomicInterval);     // Empty cache
         }
     }
 
@@ -41824,7 +41845,7 @@ function renderFeature(feature, bpStart, xScale, pixelHeight, ctx, options) {
             // single-exon transcript
             const xLeft = Math.max(0, coord.px);
             const xRight = Math.min(pixelWidth, coord.px1);
-            const width = Math.max(coord.pw, xRight - xLeft);
+            const width = xRight - xLeft;
             ctx.fillRect(xLeft, py, width, h);
 
             // Arrows
@@ -42630,11 +42651,13 @@ class WigTrack extends TrackBase {
         this.paintAxis = paintAxis;
 
         const format = config.format ? config.format.toLowerCase() : config.format;
-        this.flipAxis = config.flipAxis ? config.flipAxis : false;
-        this.logScale = config.logScale ? config.logScale : false;
         if ("bigwig" === format) {
+            this.flipAxis = config.flipAxis ? config.flipAxis : false;
+            this.logScale = config.logScale ? config.logScale : false;
             this.featureSource = new BWSource(config, this.browser.genome);
         } else if ("tdf" === format) {
+            this.flipAxis = config.flipAxis ? config.flipAxis : false;
+            this.logScale = config.logScale ? config.logScale : false;
             this.featureSource = new TDFSource(config, this.browser.genome);
         } else {
             this.featureSource = FeatureSource(config, this.browser.genome);
@@ -42686,7 +42709,7 @@ class WigTrack extends TrackBase {
         let items = [];
         if (this.flipAxis !== undefined) {
             items.push({
-                label: "Flip y-axis",
+                label:"Flip y-axis",
                 click: () => {
                     this.flipAxis = !this.flipAxis;
                     this.trackView.repaintViews();
@@ -43414,7 +43437,7 @@ class SegTrack extends TrackBase {
 
         const sortHandler = (sort) => {
             const viewport = clickState.viewport;
-            const features = viewport.cachedFeatures;
+            const features = viewport.getCachedFeatures();
             this.sortSamples(sort.chr, sort.start, sort.end, sort.direction, features);
         };
 
@@ -43532,16 +43555,10 @@ const MUT_COLORS = {
  * THE SOFTWARE.
  */
 
-/**
- * Represents 2 or more wig tracks overlaid on a common viewport.
- */
 class MergedTrack extends TrackBase {
 
     constructor(config, browser) {
         super(config, browser);
-        this.type = "merged";
-        this.featureType = 'numeric';
-        this.paintAxis = paintAxis;
     }
 
     init(config) {
@@ -43552,6 +43569,21 @@ class MergedTrack extends TrackBase {
         super.init(config);
     }
 
+    get height() {
+        return this._height
+    }
+
+    set height(h) {
+        this._height = h;
+        if (this.tracks) {
+            for (let t of this.tracks) {
+                t.height = h;
+                t.config.height = h;
+            }
+        }
+    }
+
+
     async postInit() {
 
         this.tracks = [];
@@ -43571,55 +43603,11 @@ class MergedTrack extends TrackBase {
             }
         }
 
-        this.flipAxis = this.config.flipAxis ? this.config.flipAxis : false;
-        this.logScale = this.config.logScale ? this.config.logScale : false;
-        this.autoscale = this.config.autoscale || this.config.max === undefined;
-        if (!this.autoscale) {
-            this.dataRange = {
-                min: this.config.min || 0,
-                max: this.config.max
-            };
-        }
-        for (let t of this.tracks) {
-            t.autoscale = false;
-            t.dataRange = this.dataRange;
-        }
-
-        this.height = this.config.height || 50;
+        this.height = this.config.height || 100;
 
         return Promise.all(p)
     }
 
-    get height() {
-        return this._height
-    }
-
-    set height(h) {
-        this._height = h;
-        if (this.tracks) {
-            for (let t of this.tracks) {
-                t.height = h;
-                t.config.height = h;
-            }
-        }
-    }
-
-    menuItemList() {
-        let items = [];
-        if (this.flipAxis !== undefined) {
-            items.push({
-                label: "Flip y-axis",
-                click: () => {
-                    this.flipAxis = !this.flipAxis;
-                    this.trackView.repaintViews();
-                }
-            });
-        }
-
-        items = items.concat(MenuUtils.numericDataMenuItems(this.trackView));
-
-        return items
-    }
 
     async getFeatures(chr, bpStart, bpEnd, bpPerPixel) {
 
@@ -43629,26 +43617,44 @@ class MergedTrack extends TrackBase {
 
     draw(options) {
 
-        const mergedFeatures = options.features;    // Array of feature arrays, 1 for each track
+        var i, len, mergedFeatures, trackOptions, dataRange;
 
-        if (this.autoscale) {
-            this.dataRange = autoscale(options.referenceFrame.chr, mergedFeatures);
-        }
+        mergedFeatures = options.features;    // Array of feature arrays, 1 for each track
+
+        dataRange = autoscale(options.referenceFrame.chr, mergedFeatures);
 
-        for (let i = 0, len = this.tracks.length; i < len; i++) {
-            const trackOptions = Object.assign({}, options);
+        //IGVGraphics.fillRect(options.context, 0, options.pixelTop, options.pixelWidth, options.pixelHeight, {'fillStyle': "rgb(255, 255, 255)"});
+
+        for (i = 0, len = this.tracks.length; i < len; i++) {
+
+            trackOptions = Object.assign({}, options);
             trackOptions.features = mergedFeatures[i];
-            this.tracks[i].dataRange = this.dataRange;
-            this.tracks[i].flipAxis = this.flipAxis;
-            this.tracks[i].logScale = this.logScale;
-            this.tracks[i].graphType = this.graphType;
+            this.tracks[i].dataRange = dataRange;
             this.tracks[i].draw(trackOptions);
         }
+
+    }
+
+    paintAxis(ctx, pixelWidth, pixelHeight) {
+
+        var i, len, autoscale, track;
+
+        autoscale = true;   // Hardcoded for now
+
+        for (i = 0, len = this.tracks.length; i < len; i++) {
+
+            track = this.tracks[i];
+
+            if (typeof track.paintAxis === 'function') {
+                track.paintAxis(ctx, pixelWidth, pixelHeight);
+                if (autoscale) break
+            }
+        }
     }
 
     popupData(clickState, features) {
 
-        const featuresArray = features || clickState.viewport.cachedFeatures;
+        const featuresArray = features || clickState.viewport.getCachedFeatures();
 
         if (featuresArray && featuresArray.length === this.tracks.length) {
             // Array of feature arrays, 1 for each track
@@ -43666,22 +43672,41 @@ class MergedTrack extends TrackBase {
 
 
     supportsWholeGenome() {
-        return this.tracks.every(track => track.supportsWholeGenome())
+        const b = this.tracks.every(track => track.supportsWholeGenome());
+        return b
     }
 }
 
 function autoscale(chr, featureArrays) {
 
-    let min = 0;
-    let max = -Number.MAX_VALUE;
-    for(let features of featureArrays) {
-        for(let f of features) {
+
+    var min = 0,
+        max = -Number.MAX_VALUE;
+
+    // if (chr === 'all') {
+    //     allValues = [];
+    //     featureArrays.forEach(function (features) {
+    //         features.forEach(function (f) {
+    //             if (!Number.isNaN(f.value)) {
+    //                 allValues.push(f.value);
+    //             }
+    //         });
+    //     });
+    //
+    //     min = Math.min(0, IGVMath.percentile(allValues, .1));
+    //     max = IGVMath.percentile(allValues, 99.9);
+    //
+    // }
+    // else {
+    featureArrays.forEach(function (features, i) {
+        features.forEach(function (f) {
             if (typeof f.value !== 'undefined' && !Number.isNaN(f.value)) {
                 min = Math.min(min, f.value);
                 max = Math.max(max, f.value);
             }
-        }
-    }
+        });
+    });
+    //  }
     return {min: min, max: max}
 }
 
@@ -44223,23 +44248,21 @@ class InteractionTrack extends TrackBase {
 
         // inView features are simply features that have been drawn, i.e. have a drawState
         const inView = cachedFeatures.filter(f => f.drawState);
-        if(inView.length === 0) return;
+        if(inView.length === 0) erturn;
 
         this.browser.circularViewVisible = true;
         const chords = makeBedPEChords(inView);
-        sendChords(chords, this, refFrame, 0.5);
-        //
-        //
-        // // for filtered set, distinguishing the chromosomes is more critical than tracks
-        // const chordSetColor = IGVColor.addAlpha("all" === refFrame.chr ? this.color : getChrColor(refFrame.chr), 0.5)
-        // const trackColor = IGVColor.addAlpha(this.color, 0.5)
-        //
-        // // name the chord set to include locus and filtering information
-        // const encodedName = this.name.replaceAll(' ', '%20')
-        // const chordSetName = "all" === refFrame.chr ?
-        //     encodedName :
-        //     `${encodedName} (${refFrame.chr}:${refFrame.start}-${refFrame.end} ; range:${this.dataRange.min}-${this.dataRange.max})`
-        // this.browser.circularView.addChords(chords, {track: chordSetName, color: chordSetColor, trackColor: trackColor})
+
+        // for filtered set, distinguishing the chromosomes is more critical than tracks
+        const chordSetColor = IGVColor.addAlpha("all" === refFrame.chr ? this.color : getChrColor(refFrame.chr), 0.5);
+        const trackColor = IGVColor.addAlpha(this.color, 0.5);
+
+        // name the chord set to include filtering information
+        const encodedName = this.name.replaceAll(' ', '%20');
+        const chordSetName = "all" === refFrame.chr ?
+            encodedName :
+            `${encodedName} (${refFrame.chr}:${refFrame.start}-${refFrame.end} ; range:${this.dataRange.min}-${this.dataRange.max})`;
+        this.browser.circularView.addChords(chords, {track: chordSetName, color: chordSetColor, trackColor: trackColor});
     }
 
     doAutoscale(features) {
@@ -44304,7 +44327,7 @@ class InteractionTrack extends TrackBase {
 
         // We use the cached features rather than method to avoid async load.  If the
         // feature is not already loaded this won't work,  but the user wouldn't be mousing over it either.
-        const featureList = features || clickState.viewport.cachedFeatures;
+        const featureList = features || clickState.viewport.getCachedFeatures();
         const candidates = [];
         if (featureList) {
             const proportional = (this.arcType === "proportional" || this.arcType === "inView" || this.arcType === "partialInView");
@@ -44830,7 +44853,7 @@ class VariantTrack extends TrackBase {
             }
 
         } else if (this._color) {
-            variantColor = this.color;
+            variantColor = (typeof this._color === "function") ? this._color(v) : this._color;
         } else if ("NONVARIANT" === v.type) {
             variantColor = this.nonRefColor;
         } else if ("MIXED" === v.type) {
@@ -44841,10 +44864,6 @@ class VariantTrack extends TrackBase {
         return variantColor
     }
 
-    get color() {
-        return this._color ? ((typeof this._color === "function") ? this._color(v) : this._color) : this.defaultColor
-    }
-
     clickedFeatures(clickState, features) {
 
         let featureList = super.clickedFeatures(clickState, features);
@@ -45077,9 +45096,19 @@ class VariantTrack extends TrackBase {
             menuItems.push({
                 label: 'Add SVs to circular view',
                 click: () => {
+                    const inView = [];
                     for (let viewport of this.trackView.viewports) {
-                       this.sendChordsForViewport(viewport);
+                        const refFrame = viewport.referenceFrame;
+                        for (let f of viewport.getCachedFeatures()) {
+                            if (f.end >= refFrame.start && f.start <= refFrame.end) {
+                                inView.push(f);
+                            }
+                        }
                     }
+
+                    const chords = makeVCFChords(inView);
+                    const color = IGVColor.addAlpha(this._color || this.defaultColor, 0.5);
+                    this.browser.circularView.addChords(chords, {track: this.name, color: color});
                 }
             });
         }
@@ -45098,7 +45127,13 @@ class VariantTrack extends TrackBase {
             list.push({
                 label: 'Add SVs to Circular View',
                 click: () => {
-                    this.sendChordsForViewport(viewport);
+                    const refFrame = viewport.referenceFrame;
+                    const inView = "all" === refFrame.chr ?
+                        this.featureSource.getAllFeatures() :
+                        this.featureSource.featureCache.queryFeatures(refFrame.chr, refFrame.start, refFrame.end);
+                    const chords = makeVCFChords(inView);
+                    const color = IGVColor.addAlpha(this._color || this.defaultColor, 0.5);
+                    this.browser.circularView.addChords(chords, {track: this.name, color: color});
                 }
             });
 
@@ -45108,15 +45143,6 @@ class VariantTrack extends TrackBase {
     }
 
 
-    sendChordsForViewport(viewport) {
-        const refFrame = viewport.referenceFrame;
-        const inView = "all" === refFrame.chr ?
-            this.featureSource.getAllFeatures() :
-            this.featureSource.featureCache.queryFeatures(refFrame.chr, refFrame.start, refFrame.end);
-        const chords = makeVCFChords(inView);
-        sendChords(chords, this, refFrame, 0.5);
-    }
-
     /**
      * Create a "color by" checkbox menu item, optionally initially checked
      * @param menuItem
@@ -45413,7 +45439,7 @@ class EqtlTrack extends TrackBase {
      */
     popupData(clickState) {
 
-        let features = clickState.viewport.cachedFeatures;
+        let features = clickState.viewport.getCachedFeatures();
         if (!features || features.length === 0) return []
 
         const tolerance = 3;
@@ -45743,7 +45769,7 @@ class GWASTrack extends TrackBase {
 
         let data = [];
         const track = clickState.viewport.trackView.track;
-        const features = clickState.viewport.cachedFeatures;
+        const features = clickState.viewport.getCachedFeatures();
 
         if (features) {
             let count = 0;
@@ -46426,7 +46452,7 @@ class RNAFeatureSource {
 
             const data = await igvxhr.loadString(this.config.url, options);
 
-            this.featureCache = new FeatureCache$1(parseBP(data), genome);
+            this.featureCache = new FeatureCache(parseBP(data), genome);
 
             return this.featureCache.queryFeatures(chr, start, end)
 
@@ -47708,15 +47734,6 @@ class ReferenceFrame {
         this.id = guid$2();
     }
 
-    extend(locus) {
-        const newStart = Math.min(locus.start, this.start);
-        const newEnd = Math.max(locus.end, this.end);
-        const ratio = (newEnd - newStart) / (this.end - this.start);
-        this.start = newStart;
-        this.end = newEnd;
-        this.bpPerPixel *= ratio;
-    }
-
     calculateEnd(pixels) {
         return this.start + this.bpPerPixel * pixels
     }
@@ -47803,7 +47820,7 @@ class ReferenceFrame {
 
         const viewChanged = start !== this.start || bpPerPixel !== this.bpPerPixel;
         if (viewChanged) {
-            await browser.updateViews(true);
+            await browser.updateViews(this);
         }
 
     }
@@ -49605,8 +49622,8 @@ class Browser {
             this.svgSaveControl = new SVGSaveControl($toggle_button_container.get(0), this);
         }
 
-        if (config.customButtons) {
-            for (let b of config.customButtons) {
+        if(config.customButtons) {
+            for(let b of config.customButtons) {
                 new CustomButton($toggle_button_container.get(0), this, b);
             }
         }
@@ -49767,6 +49784,7 @@ class Browser {
                     return undefined
                 }
             }
+
         }
     }
 
@@ -49856,11 +49874,6 @@ class Browser {
 
         await this.loadTrackList(trackConfigurations);
 
-        // The ruler track is not explicitly loaded, but needs updated nonetheless.
-        for (let rtv of this.trackViews.filter((tv) => tv.track.type === 'ruler')) {
-            rtv.updateViews();
-        }
-
         this.updateUIWithReferenceFrameList();
 
     }
@@ -50039,19 +50052,23 @@ class Browser {
 
     async loadTrackList(configList) {
 
-        const promises = [];
-        for (let config of configList) {
-            promises.push(this.loadTrack(config));
-        }
+        try {
+            const promises = [];
+            for (let config of configList) {
+                promises.push(this.loadTrack(config, false));
+            }
 
-        const loadedTracks = await Promise.all(promises);
-        const groupAutoscaleViews = this.trackViews.filter(function (trackView) {
-            return trackView.track.autoscaleGroup
-        });
-        if (groupAutoscaleViews.length > 0) {
-            this.updateViews();
+            const loadedTracks = await Promise.all(promises);
+            const groupAutoscaleViews = this.trackViews.filter(function (trackView) {
+                return trackView.track.autoscaleGroup
+            });
+            if (groupAutoscaleViews.length > 0) {
+                this.updateViews(groupAutoscaleViews);
+            }
+            return loadedTracks
+        } finally {
+            await this.resize();
         }
-        return loadedTracks
     }
 
     async loadROI(config) {
@@ -50065,8 +50082,6 @@ class Browser {
         } else {
             this.roi.push(new ROI(config, this.genome));
         }
-        // Force reload all views (force = true) to insure ROI features are loaded.  Wasteful but this function is
-        // rarely called.
         await this.updateViews(true);
     }
 
@@ -50078,14 +50093,14 @@ class Browser {
             }
         }
         for (let tv of this.trackViews) {
-            tv.repaintViews();
+            tv.updateViews(true);
         }
     }
 
     clearROIs() {
         this.roi = [];
         for (let tv of this.trackViews) {
-            tv.repaintViews();
+            tv.updateViews(true);
         }
     }
 
@@ -50097,12 +50112,24 @@ class Browser {
     /**
      * Return a promise to load a track.
      *
+     * Each track is associated with the following DOM elements
+     *
+     *      leftHandGutter  - div on the left for track controls and legend
+     *      contentDiv  - a div element wrapping all the track content.  Height can be > viewportDiv height
+     *      viewportDiv - a div element through which the track is viewed.  This might have a vertical scrollbar
+     *      canvas     - canvas element upon which the track is drawn.  Child of contentDiv
+     *
+     * The width of all elements should be equal.  Height of the viewportDiv is controlled by the user, but never
+     * greater than the contentDiv height.   Height of contentDiv and canvas are equal, and governed by the data
+     * loaded.
+     *
+     *
      * @param config
      * @param doResize - undefined by default
      * @returns {*}
      */
 
-    async loadTrack(config) {
+    async loadTrack(config, doResize) {
 
 
         // config might be json
@@ -50170,6 +50197,11 @@ class Browser {
             }
             msg += (": " + config.url);
             Alert.presentAlert(new Error(msg), undefined);
+        } finally {
+            // TODO: If loadTrack() is called individually - not via loadTrackList() - call this.resize()
+            if (false === doResize) ; else {
+                await this.resize();
+            }
         }
     }
 
@@ -50393,7 +50425,41 @@ class Browser {
             this.navbarManager.navbarDidResize(this.$navigation.width(), isWGV);
         }
 
-        await resize.call(this);
+        await this.resize();
+    }
+
+    async resize() {
+
+        const viewportWidth = this.calculateViewportWidth(this.referenceFrameList.length);
+
+        for (let referenceFrame of this.referenceFrameList) {
+
+            const index = this.referenceFrameList.indexOf(referenceFrame);
+
+            const {chr, genome} = referenceFrame;
+
+            const {bpLength} = genome.getChromosome(referenceFrame.chr);
+
+            const viewportWidthBP = referenceFrame.toBP(viewportWidth);
+
+            // viewportWidthBP > bpLength occurs when locus is full chromosome and user widens browser
+            if (GenomeUtils.isWholeGenomeView(chr) || viewportWidthBP > bpLength) {
+                // console.log(`${ Date.now() } Recalc referenceFrame(${ index }) bpp. viewport ${ StringUtils.numberFormatter(viewportWidthBP) } > ${ StringUtils.numberFormatter(bpLength) }.`)
+                referenceFrame.bpPerPixel = bpLength / viewportWidth;
+            } else {
+                // console.log(`${ Date.now() } Recalc referenceFrame(${ index }) end.`)
+                referenceFrame.end = referenceFrame.start + referenceFrame.toBP(viewportWidth);
+            }
+
+            for (let {viewports} of this.trackViews) {
+                viewports[index].setWidth(viewportWidth);
+            }
+
+        }
+
+        await this.updateViews(true);
+
+        this.updateUIWithReferenceFrameList();
     }
 
     async updateViews(force) {
@@ -50469,12 +50535,6 @@ class Browser {
 
     }
 
-    repaintViews() {
-        for (let trackView of this.trackViews) {
-            trackView.repaintViews();
-        }
-    }
-
     updateLocusSearchWidget() {
 
         const referenceFrameList = this.referenceFrameList;
@@ -50576,56 +50636,12 @@ class Browser {
                 const viewport = createViewport(trackView, viewportColumn, referenceFrameRight);
                 trackView.viewports.splice(indexRight, 0, viewport);
             }
-        }
-
-        this.centerLineList = this.createCenterLineList(this.columnContainer);
-
-        await resize.call(this);
-    }
-
-    /**
-     * Add a new multi-locus panel for the specified region
-     * @param chr
-     * @param start
-     * @param end
-     * @param referenceFrameLeft - optional, if supplied new panel should be placed to the immediate right
-     */
-     async addMultiLocusPanel(chr, start, end, referenceFrameLeft) {
-
-        // account for reduced viewport width as a result of adding right mate pair panel
-        const viewportWidth = this.calculateViewportWidth(1 + this.referenceFrameList.length);
-        const scaleFactor = this.calculateViewportWidth(this.referenceFrameList.length) / this.calculateViewportWidth(1 + this.referenceFrameList.length);
-        for (let refFrame of this.referenceFrameList) {
-            refFrame.bpPerPixel *= scaleFactor;
-        }
-
-        const bpp = (end - start) / viewportWidth;
-        const newReferenceFrame = new ReferenceFrame(this.genome, chr, start, end, bpp);
-        const indexLeft = referenceFrameLeft ? this.referenceFrameList.indexOf(referenceFrameLeft) : this.referenceFrameList.length - 1;
-        const indexRight = 1 + indexLeft;
 
-        // TODO -- this is really ugly
-        const {$viewport} = this.trackViews[0].viewports[indexLeft];
-        const viewportColumn = viewportColumnManager.insertAfter($viewport.get(0).parentElement);
-
-        if (indexRight === this.referenceFrameList.length) {
-            this.referenceFrameList.push(newReferenceFrame);
-            for (let trackView of this.trackViews) {
-                const viewport = createViewport(trackView, viewportColumn, newReferenceFrame);
-                trackView.viewports.push(viewport);
-            }
-        } else {
-            this.referenceFrameList.splice(indexRight, 0, newReferenceFrame);
-            for (let trackView of this.trackViews) {
-                const viewport = createViewport(trackView, viewportColumn, newReferenceFrame);
-                trackView.viewports.splice(indexRight, 0, viewport);
-            }
         }
 
-
         this.centerLineList = this.createCenterLineList(this.columnContainer);
 
-        resize.call(this);
+        await this.resize();
     }
 
     async removeMultiLocusPanel(referenceFrame) {
@@ -50654,13 +50670,7 @@ class Browser {
 
     }
 
-    /**
-     * Goto the locus represented by the selected referenceFrame, discarding all other panels
-     *
-     * @param referenceFrame
-     * @returns {Promise<void>}
-     */
-    async gotoMultilocusPanel(referenceFrame) {
+    async selectMultiLocusPanel(referenceFrame) {
 
         const referenceFrameIndex = this.referenceFrameList.indexOf(referenceFrame);
 
@@ -50714,7 +50724,7 @@ class Browser {
 
         this.updateUIWithReferenceFrameList();
 
-        await this.updateViews();
+        await this.updateViews(true);
 
     }
 
@@ -50937,6 +50947,7 @@ class Browser {
         }
 
 
+
         json["tracks"] = trackJson;
 
         return json        // This is an object, not a json string
@@ -50955,9 +50966,14 @@ class Browser {
         return surl
     }
 
-    currentReferenceFrames() {
+    currentLoci() {
+        const loci = [];
         const anyTrackView = this.trackViews[0];
-        return anyTrackView.viewports.map(vp => vp.referenceFrame)
+        for (let {referenceFrame} of anyTrackView.viewports) {
+            const locusString = referenceFrame.getLocusString();
+            loci.push(locusString);
+        }
+        return loci
     }
 
     /**
@@ -51077,9 +51093,12 @@ class Browser {
     }
 
     addWindowResizeHandler() {
-        // Create a copy of the prototype "resize" function bound to this instance.  Neccessary to support removing.
-        this.boundWindowResizeHandler = resize.bind(this);
+        this.boundWindowResizeHandler = windowResizeHandler.bind(this);
         window.addEventListener('resize', this.boundWindowResizeHandler);
+
+        function windowResizeHandler() {
+            this.resize();
+        }
     }
 
     removeWindowResizeHandler() {
@@ -51178,48 +51197,6 @@ class Browser {
     }
 }
 
-/**
- * Function called win window is resized, or visibility changed (e.g. "show" from a tab).  This is a function rather
- * than class method because it needs to be copied and bound to specific instances of browser to support listener
- * removal
- *
- * @returns {Promise<void>}
- */
-async function resize() {
-
-    const viewportWidth = this.calculateViewportWidth(this.referenceFrameList.length);
-
-    for (let referenceFrame of this.referenceFrameList) {
-
-        const index = this.referenceFrameList.indexOf(referenceFrame);
-
-        const {chr, genome} = referenceFrame;
-
-        const {bpLength} = genome.getChromosome(referenceFrame.chr);
-
-        const viewportWidthBP = referenceFrame.toBP(viewportWidth);
-
-        // viewportWidthBP > bpLength occurs when locus is full chromosome and user widens browser
-        if (GenomeUtils.isWholeGenomeView(chr) || viewportWidthBP > bpLength) {
-            // console.log(`${ Date.now() } Recalc referenceFrame(${ index }) bpp. viewport ${ StringUtils.numberFormatter(viewportWidthBP) } > ${ StringUtils.numberFormatter(bpLength) }.`)
-            referenceFrame.bpPerPixel = bpLength / viewportWidth;
-        } else {
-            // console.log(`${ Date.now() } Recalc referenceFrame(${ index }) end.`)
-            referenceFrame.end = referenceFrame.start + referenceFrame.toBP(viewportWidth);
-        }
-
-        for (let {viewports} of this.trackViews) {
-            viewports[index].setWidth(viewportWidth);
-        }
-
-    }
-
-    this.updateUIWithReferenceFrameList();
-
-    await this.updateViews(true);
-}
-
-
 function handleMouseMove(e) {
 
     e.preventDefault();