igv 2.11.1 → 2.11.2

package/dist/igv.js

@@ -17943,7 +17943,7 @@
      * @constructor
      */
 
-    class FeatureCache$1 {
+    class FeatureCache {
       constructor(featureList, genome, range) {
         featureList = featureList || [];
         this.treeMap = this.buildTreeMap(featureList, genome);
@@ -20733,13 +20733,14 @@
         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();
@@ -20759,7 +20760,7 @@
         // 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() {
@@ -20774,6 +20775,8 @@
 
       setWidth(width) {
         this.$viewport.width(width);
+        this.canvas.style.width = `${width}px`;
+        this.canvas.setAttribute('width', width);
       }
 
       getWidth() {
@@ -23058,7 +23061,7 @@
       }
     };
 
-    const _version = "2.11.1";
+    const _version = "2.11.2";
 
     function version$1() {
       return _version;
@@ -23575,20 +23578,16 @@
 
       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;
+            return visibilityWindow !== undefined && visibilityWindow > 0 && 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;
         }
@@ -23598,8 +23597,7 @@
             // 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();
@@ -23618,17 +23616,14 @@
 
         return true;
       }
-      /**
-       * Adjust the canvas to the current genomic state.
-       */
-
 
       shift() {
-        const referenceFrame = this.referenceFrame;
+        const self = this;
+        const referenceFrame = self.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";
+        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";
         }
       }
 
@@ -23654,10 +23649,9 @@
         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) {
@@ -23669,13 +23663,11 @@
             }
           }
 
-          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) {
@@ -23688,34 +23680,30 @@
           this.stopSpinner();
         }
       }
-      /**
-       * Repaint the canvas for the current genomic state.
-       *
-       * @returns {Promise<void>}
-       */
 
-
-      repaint() {
-        if (undefined === this.featureCache) {
+      async repaint() {
+        if (undefined === this.tile) {
           return;
         }
 
         let {
           features,
-          roiFeatures
-        } = this.featureCache; //this.tile.bpPerPixel = this.referenceFrame.bpPerPixel
-        // const isWGV = GenomeUtils.isWholeGenomeView(this.browser.referenceFrameList[0].chr)
+          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
 
 
@@ -23768,33 +23756,21 @@
           viewport: this,
           viewportWidth: this.$viewport.width()
         };
-        this.draw(drawConfiguration, features, roiFeatures); // Attach metadata to canvas
-
-        newCanvas._data = {
-          chr: this.referenceFrame.chr,
-          startBP,
-          endBP,
-          bpPerPixel,
+        this.draw(drawConfiguration, features, roiFeatures);
+        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 }.`)
@@ -23809,6 +23785,51 @@
             r.track.draw(drawConfiguration);
           }
         }
+      } // 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) {
@@ -23823,10 +23844,9 @@
         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;
@@ -23948,22 +23968,23 @@
           viewportWidth: width,
           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;
@@ -24243,6 +24264,11 @@
       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,
@@ -24296,28 +24322,22 @@
       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;
-        return start >= this.startBP && end <= this.endBP && chr === this.chr && r > 0.5 && r < 2;
-      }
+    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;
+    };
 
-      overlapsRange(chr, start, end) {
-        return this.chr === chr && end >= this.startBP && start <= this.endBP;
-      }
+    Tile.prototype.containsRange = function (chr, start, end, bpPerPixel) {
+      return this.bpPerPixel === bpPerPixel && start >= this.startBP && end <= this.endBP && chr === this.chr;
+    };
 
-    }
+    Tile.prototype.overlapsRange = function (chr, start, end) {
+      return this.chr === chr && end >= this.startBP && start <= this.endBP;
+    };
     /**
      * Merge 2 arrays.  a and/or b can be undefined.  If both are undefined, return undefined
      * @param a An array or undefined
@@ -25461,18 +25481,6 @@
         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()) {
           return this.firstAlignment.strand;
@@ -25839,15 +25847,7 @@
      */
 
     class AlignmentContainer {
-      //            this.config.samplingWindowSize, this.config.samplingDepth,
-      //             this.config.pairsSupported, this.config.alleleFreqThreshold)
-      constructor(chr, start, end, _ref) {
-        let {
-          samplingWindowSize,
-          samplingDepth,
-          pairsSupported,
-          alleleFreqThreshold
-        } = _ref;
+      constructor(chr, start, end, samplingWindowSize, samplingDepth, pairsSupported, alleleFreqThreshold) {
         this.chr = chr;
         this.start = Math.floor(start);
         this.end = Math.ceil(end);
@@ -25870,10 +25870,17 @@
           // TODO -- pass this in
           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)) {
@@ -25902,6 +25909,7 @@
         });
         this.pairsCache = undefined;
         this.downsampledReads = undefined;
+        this.pairedEndStats.compute();
       }
 
       contains(chr, start, end) {
@@ -26196,6 +26204,62 @@
 
     }
 
+    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) {
         const tokens = rec.split(',');
@@ -27399,7 +27463,7 @@
           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);
@@ -27426,13 +27490,13 @@
         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);
@@ -28432,7 +28496,7 @@
         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;
@@ -28581,7 +28645,7 @@
 
       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];
           const a = await reader.readAlignments(chr, start, end);
@@ -28653,7 +28717,7 @@
         return igvxhr.loadString(url, buildOptions(self.config)).then(function (sam) {
           var alignmentContainer;
           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);
           return alignmentContainer;
         });
@@ -28863,7 +28927,7 @@
 
         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();
         return alignmentContainer;
@@ -44401,7 +44465,7 @@
         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;
@@ -45010,7 +45074,7 @@
             "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)
         });
       });
 
@@ -45317,6 +45381,7 @@
         const genome = browser.genome;
         this.config = config;
         this.genome = genome;
+        this.alignmentContainer = undefined;
 
         if (isDataURL(config.url)) {
           if ("cram" === config.format) {
@@ -45367,44 +45432,58 @@
       }
 
       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) {
         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
-          }]);
-        }
+        if (this.alignmentContainer && this.alignmentContainer.contains(chr, bpStart, bpEnd)) {
+          return this.alignmentContainer;
+        } else {
+          const alignmentContainer = await this.bamReader.readAlignments(chr, bpStart, bpEnd);
+          let alignments = alignmentContainer.alignments;
 
-        const hasAlignments = alignments.length > 0;
-        alignmentContainer.packedAlignmentRows = packAlignmentRows(alignments, alignmentContainer.start, alignmentContainer.end, showSoftClips);
-        this.alignmentContainer = alignmentContainer;
+          if (!this.viewAsPairs) {
+            alignments = unpairAlignments([{
+              alignments: alignments
+            }]);
+          }
 
-        if (hasAlignments) {
-          const sequence = await genome.sequence.getSequence(chr, alignmentContainer.start, alignmentContainer.end);
+          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
 
-          if (sequence) {
-            alignmentContainer.coverageMap.refSeq = sequence; // TODO -- fix this
+          this.alignmentContainer = alignmentContainer;
 
-            alignmentContainer.sequence = sequence; // TODO -- fix this
+          if (hasAlignments) {
+            const sequence = await genome.sequence.getSequence(chr, alignmentContainer.start, alignmentContainer.end);
 
-            return alignmentContainer;
-          } else {
-            console.error("No sequence for: " + 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;
+        }
       }
 
     }
@@ -45749,7 +45828,7 @@
       clickedFeatures(clickState, features) {
         // 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 [];
@@ -48388,117 +48467,50 @@
       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) {
       const circularView = new CircularView(el, {
         onChordClick: (feature, chordTrack, pluginManager) => {
           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;
+          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
+          });
+          let loci; // If there is overlap with current loci
+
+          loci = browser.currentLoci().map(str => Locus.fromLocusString(str));
+
+          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);
               }
             }
+          } 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];
           }
-        }
-      });
-      return circularView;
-    }
-
-    class PairedEndStats {
-      constructor(alignments, _ref) {
-        let {
-          minTLENPercentile,
-          maxTLENPercentile
-        } = _ref;
-        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);
-      }
-
-      compute(alignments) {
-        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++;
-              }
-            }
-
-            this.totalCount++;
-          }
+          const searchString = loci.map(l => l.getLocusString()).join(" ");
+          browser.search(searchString);
         }
-
-        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;
       });
-      return array[k];
+      return circularView;
     }
 
     /*
@@ -48560,7 +48572,10 @@
         this.showInsertions = false !== config.showInsertions;
         this.showMismatches = false !== config.showMismatches;
         this.color = config.color;
-        this.coverageColor = config.coverageColor; // The sort object can be an array in the case of multi-locus view, however if multiple sort positions
+        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
 
         if (config.sort) {
@@ -48588,22 +48603,12 @@
         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);
@@ -48638,16 +48643,16 @@
       async getFeatures(chr, bpStart, bpEnd, bpPerPixel, viewport) {
         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 (alignmentContainer.alignments && alignmentContainer.alignments.length > 99) {
+          if (undefined === this.minFragmentLength) {
+            this.minFragmentLength = alignmentContainer.pairedEndStats.lowerFragmentLength;
+          }
 
-          if (pairedEndStats.totalCount > 99) {
-            this._pairedEndStats = pairedEndStats;
+          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) {
@@ -48752,7 +48757,7 @@
             label: 'pair orientation'
           });
           colorByMenuItems.push({
-            key: 'tlen',
+            key: 'fragmentLength',
             label: 'insert size (TLEN)'
           });
           colorByMenuItems.push({
@@ -48863,7 +48868,7 @@
               this.trackView.repaintViews();
             }
           });
-        } // 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)) {
@@ -48873,9 +48878,26 @@
             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
+                });
               }
             });
           }
@@ -48884,9 +48906,25 @@
             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
+                });
               }
             });
           }
@@ -49005,7 +49043,7 @@
       }
 
       getCachedAlignmentContainers() {
-        return this.trackView.viewports.map(vp => vp.cachedFeatures);
+        return this.trackView.viewports.map(vp => vp.getCachedFeatures());
       }
 
       get dataRange() {
@@ -49031,56 +49069,6 @@
       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})
-      }
 
     }
 
@@ -49191,7 +49179,7 @@
       }
 
       getClickedObject(clickState) {
-        let features = clickState.viewport.cachedFeatures;
+        let features = clickState.viewport.getCachedFeatures();
         if (!features || features.length === 0) return;
         const genomicLocation = Math.floor(clickState.genomicLocation);
         const coverageMap = features.coverageMap;
@@ -49277,14 +49265,14 @@
         this.deletionColor = config.deletionColor || "black";
         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 = {};
         this.pairColors["RL"] = config.rlColor || "rgb(0, 150, 0)";
         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;
         this.hideSmallIndels = config.hideSmallIndels;
@@ -49639,7 +49627,7 @@
             direction: direction
           };
           this.parent.sortObject = newSortObject;
-          sortAlignmentRows(newSortObject, viewport.cachedFeatures);
+          sortAlignmentRows(newSortObject, viewport.getCachedFeatures());
           viewport.repaint();
         };
 
@@ -49691,7 +49679,7 @@
                   };
                   this.sortByTag = tag;
                   this.parent.sortObject = newSortObject;
-                  sortAlignmentRows(newSortObject, viewport.cachedFeatures);
+                  sortAlignmentRows(newSortObject, viewport.getCachedFeatures());
                   viewport.repaint();
                 }
               }
@@ -49715,12 +49703,8 @@
                     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.highlightedAlignmentReadNamed = clickedAlignment.readName;
+                      this.browser.presentMultiLocusPanel(clickedAlignment, referenceFrame);
                     } else {
                       Alert.presentAlert(`Reference does not contain chromosome: ${clickedAlignment.mate.chr}`);
                     }
@@ -49768,7 +49752,20 @@
             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
+                });
               }
             });
           }
@@ -49777,7 +49774,23 @@
             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
+                });
               }
             });
           }
@@ -49793,7 +49806,7 @@
         const y = clickState.y;
         const genomicLocation = clickState.genomicLocation;
         const showSoftClips = this.parent.showSoftClips;
-        let features = viewport.cachedFeatures;
+        let features = viewport.getCachedFeatures();
         if (!features || features.length === 0) return;
         let packedAlignmentRows = features.packedAlignmentRows;
         let downsampledIntervals = features.downsampledIntervals;
@@ -49879,16 +49892,13 @@
               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;
@@ -49930,7 +49940,10 @@
       alignmentContainer.packedAlignmentRows.sort(function (rowA, rowB) {
         const i = rowA.score > rowB.score ? 1 : rowA.score < rowB.score ? -1 : 0;
         return true === direction ? i : -i;
-      });
+      }); // For debugging
+      // for(let r of alignmentContainer.packedAlignmentRows) {
+      //     console.log(r.score);
+      // }
     }
 
     function shadedBaseColor(qual, baseColor) {
@@ -50085,7 +50098,7 @@
         });
         this.$viewport.append(this.$rulerLabel);
         this.$rulerLabel.click(async () => {
-          await this.browser.gotoMultilocusPanel(this.referenceFrame); // const removals = this.browser.referenceFrameList.filter(r => this.referenceFrame !== r)
+          await this.browser.selectMultiLocusPanel(this.referenceFrame); // const removals = this.browser.referenceFrameList.filter(r => this.referenceFrame !== r)
           // for (let referenceFrame of removals) {
           //     await this.browser.removeMultiLocusPanel(referenceFrame)
           // }
@@ -50400,7 +50413,7 @@
           referenceFrame.start = ss;
           referenceFrame.end = ee;
           referenceFrame.bpPerPixel = (ee - ss) / width;
-          this.browser.updateViews(true);
+          this.browser.updateViews(referenceFrame, this.browser.trackViews, true);
         }
 
         this.boundClickHandler = clickHandler.bind(this);
@@ -51277,9 +51290,7 @@
 
       repaintViews() {
         for (let viewport of this.viewports) {
-          if (viewport.isVisible()) {
-            viewport.repaint();
-          }
+          viewport.repaint();
         }
 
         if (typeof this.track.paintAxis === 'function') {
@@ -51303,9 +51314,6 @@
       }
       /**
        * 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>}
        */
 
 
@@ -51321,7 +51329,7 @@
         } // rpv: viewports whose image (canvas) does not fully cover current genomic range
 
 
-        const reloadableViewports = force ? visibleViewports : this.viewportsToReload(); // Trigger viewport to load features needed to cover current genomic range
+        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) {
@@ -51329,7 +51337,7 @@
         }
 
         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)
 
@@ -51337,8 +51345,8 @@
           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));
             }
           }
 
@@ -51361,14 +51369,14 @@
             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));
               }
             }
           }
@@ -51378,22 +51386,16 @@
           } else {
             this.track.dataRange = doAutoscale(allFeatures);
           }
-        } // Must repaint all viewports if autoscaling.  Always repaint ruler.
+        } // Must repaint all viewports if autoscaling
 
 
-        if (this.track.autoscale || this.track.autoscaleGroup || this.track.type === 'ruler' || force) {
-          for (let vp of visibleViewports) {
-            vp.repaint();
+        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();
           }
         }
 
@@ -51421,13 +51423,13 @@
        */
 
 
-      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();
         });
@@ -51435,18 +51437,18 @@
         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));
             }
           }
         }
@@ -51503,7 +51505,7 @@
             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;
@@ -56325,7 +56327,7 @@
           }
 
           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;
@@ -56496,13 +56498,13 @@
           } // 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); // If track is marked "searchable"< cache features by name -- use this with caution, memory intensive
+          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
         }
       }
 
@@ -58489,7 +58491,7 @@
           // 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
           // Do not draw if strand is not +/-
 
@@ -59273,12 +59275,14 @@
         this.featureType = 'numeric';
         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);
@@ -60055,7 +60059,7 @@
 
         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);
         };
 
@@ -60161,16 +60165,10 @@
      * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
      * 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) {
@@ -60181,6 +60179,21 @@
         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 = [];
         const p = [];
@@ -60202,83 +60215,45 @@
           }
         }
 
-        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) {
         const promises = this.tracks.map(t => t.getFeatures(chr, bpStart, bpEnd, bpPerPixel));
         return Promise.all(promises);
       }
 
       draw(options) {
-        const mergedFeatures = options.features; // Array of feature arrays, 1 for each track
+        var i, len, mergedFeatures, trackOptions, dataRange;
+        mergedFeatures = options.features; // Array of feature arrays, 1 for each track
 
-        if (this.autoscale) {
-          this.dataRange = autoscale(options.referenceFrame.chr, mergedFeatures);
-        }
+        dataRange = autoscale(options.referenceFrame.chr, mergedFeatures); //IGVGraphics.fillRect(options.context, 0, options.pixelTop, options.pixelWidth, options.pixelHeight, {'fillStyle': "rgb(255, 255, 255)"});
 
-        for (let i = 0, len = this.tracks.length; i < len; i++) {
-          const trackOptions = Object.assign({}, options);
+        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
@@ -60296,23 +60271,39 @@
       }
 
       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;
+      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 {
 
-      for (let features of featureArrays) {
-        for (let f of features) {
+      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,
@@ -60896,21 +60887,20 @@
         const cachedFeatures = "all" === refFrame.chr ? this.featureSource.getAllFeatures() : this.featureSource.featureCache.queryFeatures(refFrame.chr, refFrame.start, refFrame.end); // 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})
+        const chords = makeBedPEChords(inView); // 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) {
@@ -60997,7 +60987,7 @@
       clickedFeatures(clickState, features) {
         // 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) {
@@ -61583,7 +61573,7 @@
             variantColor = "gray";
           }
         } 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) {
@@ -61595,10 +61585,6 @@
         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);
         const vGap = this.displayMode === 'EXPANDED' ? this.expandedVGap : this.squishedVGap;
@@ -61864,10 +61850,24 @@
           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
+              });
             }
           });
         }
@@ -61883,20 +61883,20 @@
           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
+              });
             }
           });
           list.push('<hr/>');
           return list;
         }
       }
-
-      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
@@ -62199,7 +62199,7 @@
 
 
       popupData(clickState) {
-        let features = clickState.viewport.cachedFeatures;
+        let features = clickState.viewport.getCachedFeatures();
         if (!features || features.length === 0) return [];
         const tolerance = 3;
         const tissue = this.name;
@@ -62545,7 +62545,7 @@
       popupData(clickState) {
         let data = [];
         const track = clickState.viewport.trackView.track;
-        const features = clickState.viewport.cachedFeatures;
+        const features = clickState.viewport.getCachedFeatures();
 
         if (features) {
           let count = 0;
@@ -63234,7 +63234,7 @@
         if (!this.featureCache) {
           const options = buildOptions(this.config);
           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);
         } else {
           return this.featureCache.queryFeatures(chr, start, end);
@@ -64477,15 +64477,6 @@
         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;
       }
@@ -64570,7 +64561,7 @@
         const viewChanged = start !== this.start || bpPerPixel !== this.bpPerPixel;
 
         if (viewChanged) {
-          await browser.updateViews(true);
+          await browser.updateViews(this);
         }
       }
 
@@ -66535,12 +66526,7 @@
           }
         }
 
-        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();
-        }
-
+        await this.loadTrackList(trackConfigurations);
         this.updateUIWithReferenceFrameList();
       }
 
@@ -66705,22 +66691,26 @@
       }
 
       async loadTrackList(configList) {
-        const promises = [];
+        try {
+          const promises = [];
 
-        for (let config of configList) {
-          promises.push(this.loadTrack(config));
-        }
+          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;
-        });
+          const loadedTracks = await Promise.all(promises);
+          const groupAutoscaleViews = this.trackViews.filter(function (trackView) {
+            return trackView.track.autoscaleGroup;
+          });
 
-        if (groupAutoscaleViews.length > 0) {
-          this.updateViews();
-        }
+          if (groupAutoscaleViews.length > 0) {
+            this.updateViews(groupAutoscaleViews);
+          }
 
-        return loadedTracks;
+          return loadedTracks;
+        } finally {
+          await this.resize();
+        }
       }
 
       async loadROI(config) {
@@ -66734,9 +66724,7 @@
           }
         } 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);
       }
@@ -66750,7 +66738,7 @@
         }
 
         for (let tv of this.trackViews) {
-          tv.repaintViews();
+          tv.updateViews(true);
         }
       }
 
@@ -66758,7 +66746,7 @@
         this.roi = [];
 
         for (let tv of this.trackViews) {
-          tv.repaintViews();
+          tv.updateViews(true);
         }
       }
 
@@ -66774,13 +66762,25 @@
       /**
        * 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
         if (isString$3(config)) {
           config = JSON.parse(config);
@@ -66845,6 +66845,11 @@
 
           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();
+          }
         }
       }
       /**
@@ -67077,7 +67082,40 @@
           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) {
@@ -67153,12 +67191,6 @@
         }
       }
 
-      repaintViews() {
-        for (let trackView of this.trackViews) {
-          trackView.repaintViews();
-        }
-      }
-
       updateLocusSearchWidget() {
         const referenceFrameList = this.referenceFrameList; // Update end position of reference frames based on pixel widths.  This is hacky, but its been done here
         // for a long time, although indirectly.
@@ -67250,54 +67282,7 @@
         }
 
         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) {
@@ -67326,15 +67311,8 @@
         const scaleFactor = this.calculateViewportWidth(1 + this.referenceFrameList.length) / this.calculateViewportWidth(this.referenceFrameList.length);
         await this.rescaleForMultiLocus(scaleFactor);
       }
-      /**
-       * 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); // Remove columns for unselected panels
 
         this.columnContainer.querySelectorAll('.igv-column').forEach((column, c) => {
@@ -67382,7 +67360,7 @@
 
         this.centerLineList = this.createCenterLineList(this.columnContainer);
         this.updateUIWithReferenceFrameList();
-        await this.updateViews();
+        await this.updateViews(true);
       }
       /**
        * @deprecated  This is a deprecated method with no known usages.  To be removed in a future release.
@@ -67636,9 +67614,18 @@
         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;
       }
       /**
        * Record a mouse click on a specific viewport.   This might be the start of a drag operation.   Dragging
@@ -67751,9 +67738,12 @@
       }
 
       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() {
@@ -67847,47 +67837,6 @@
       }
 
     }
-    /**
-     * 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();