igv 2.11.2 → 2.12.2

package/dist/igv.js

@@ -17943,7 +17943,7 @@
      * @constructor
      */
 
-    class FeatureCache {
+    class FeatureCache$1 {
       constructor(featureList, genome, range) {
         featureList = featureList || [];
         this.treeMap = this.buildTreeMap(featureList, genome);
@@ -19911,7 +19911,7 @@
      * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
      * THE SOFTWARE.
      */
-    const knownFileExtensions = new Set(["narrowpeak", "broadpeak", "regionpeak", "peaks", "bedgraph", "wig", "gff3", "gff", "gtf", "fusionjuncspan", "refflat", "seg", "aed", "bed", "vcf", "bb", "bigbed", "biginteract", "bw", "bigwig", "bam", "tdf", "refgene", "genepred", "genepredext", "bedpe", "bp", "snp", "rmsk", "cram", "gwas", "maf", "mut"]);
+    const knownFileExtensions = new Set(["narrowpeak", "broadpeak", "regionpeak", "peaks", "bedgraph", "wig", "gff3", "gff", "gtf", "fusionjuncspan", "refflat", "seg", "aed", "bed", "vcf", "bb", "bigbed", "biginteract", "biggenepred", "bignarrowpeak", "bw", "bigwig", "bam", "tdf", "refgene", "genepred", "genepredext", "bedpe", "bp", "snp", "rmsk", "cram", "gwas", "maf", "mut"]);
     /**
      * Return a custom format object with the given name.
      * @param name
@@ -20032,6 +20032,7 @@
 
           case "bedpe":
           case "bedpe-loop":
+          case "biginteract":
             return "interact";
 
           case "bp":
@@ -20043,7 +20044,8 @@
           case "bed":
           case "bigbed":
           case "bb":
-          case "biginteract":
+          case "biggenepred":
+          case "bignarrowpeak":
             return "bedtype";
 
           default:
@@ -20287,6 +20289,30 @@
       return window.location.protocol === "https:" || window.location.hostname === "localhost";
     }
 
+    const pairs = [['A', 'T'], ['G', 'C'], ['Y', 'R'], ['W', 'S'], ['K', 'M'], ['D', 'H'], ['B', 'V']];
+    const complements = new Map();
+
+    for (let p of pairs) {
+      const p1 = p[0];
+      const p2 = p[1];
+      complements.set(p1, p2);
+      complements.set(p2, p1);
+      complements.set(p1.toLowerCase(), p2.toLowerCase());
+      complements.set(p2.toLowerCase(), p1.toLowerCase());
+    }
+
+    function reverseComplementSequence(sequence) {
+      let comp = '';
+      let idx = sequence.length;
+
+      while (idx-- > 0) {
+        const base = sequence[idx];
+        comp += complements.has(base) ? complements.get(base) : base;
+      }
+
+      return comp;
+    }
+
     /*
      * The MIT License (MIT)
      *
@@ -20440,16 +20466,21 @@
         const viewport = clickState.viewport;
 
         if (viewport.referenceFrame.bpPerPixel <= 1) {
+          const pixelWidth = viewport.getWidth();
+          const bpWindow = pixelWidth * viewport.referenceFrame.bpPerPixel;
+          const chr = viewport.referenceFrame.chr;
+          const start = Math.floor(viewport.referenceFrame.start);
+          const end = Math.ceil(start + bpWindow);
           const items = [{
-            label: 'View visible sequence...',
+            label: this.reversed ? 'View visible sequence (reversed)...' : 'View visible sequence...',
             click: async () => {
-              const pixelWidth = viewport.getWidth();
-              const bpWindow = pixelWidth * viewport.referenceFrame.bpPerPixel;
-              const chr = viewport.referenceFrame.chr;
-              const start = viewport.referenceFrame.start;
-              const end = start + bpWindow;
-              const sequence = await this.browser.genome.sequence.getSequence(chr, start, end);
-              Alert.presentAlert(sequence);
+              let seq = await this.browser.genome.sequence.getSequence(chr, start, end);
+
+              if (this.reversed) {
+                seq = reverseComplementSequence(seq);
+              }
+
+              Alert.presentAlert(seq);
             }
           }];
 
@@ -20457,13 +20488,18 @@
             items.push({
               label: 'Copy visible sequence',
               click: async () => {
-                const pixelWidth = viewport.getWidth();
-                const bpWindow = pixelWidth * viewport.referenceFrame.bpPerPixel;
-                const chr = viewport.referenceFrame.chr;
-                const start = viewport.referenceFrame.start;
-                const end = start + bpWindow;
-                const sequence = await this.browser.genome.sequence.getSequence(chr, start, end);
-                navigator.clipboard.writeText(sequence);
+                let seq = await this.browser.genome.sequence.getSequence(chr, start, end);
+
+                if (this.reversed) {
+                  seq = reverseComplementSequence(seq);
+                }
+
+                try {
+                  await navigator.clipboard.writeText(seq);
+                } catch (e) {
+                  console.error(e);
+                  Alert.presentAlert(`error copying sequence to clipboard ${e}`);
+                }
               }
             });
           }
@@ -20604,7 +20640,7 @@
         }
       }
 
-      supportsWholeGenome() {
+      get supportsWholeGenome() {
         return false;
       }
 
@@ -20672,12 +20708,13 @@
         });
         this.$viewport.append(this.$content);
         this.$content.height(this.$viewport.height());
-        this.contentDiv = this.$content.get(0);
-        this.$canvas = $$1('<canvas>');
-        this.$content.append(this.$canvas);
-        this.canvas = this.$canvas.get(0);
-        this.ctx = this.canvas.getContext("2d");
-        this.setWidth(width);
+        this.contentDiv = this.$content.get(0); // this.$canvas = $('<canvas>')
+        // this.$content.append(this.$canvas)
+        //
+        // this.canvas = this.$canvas.get(0)
+        // this.ctx = this.canvas.getContext("2d")
+
+        this.$viewport.width(width);
         this.initializationHelper();
       }
 
@@ -20733,14 +20770,13 @@
         console.log('Viewport - draw(drawConfiguration, features, roiFeatures)');
       }
 
-      checkContentHeight() {
+      checkContentHeight(features) {
         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();
@@ -20760,7 +20796,6 @@
         // 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.tile) this.tile.invalidate = true;
       }
 
       isLoading() {
@@ -20775,8 +20810,6 @@
 
       setWidth(width) {
         this.$viewport.width(width);
-        this.canvas.style.width = `${width}px`;
-        this.canvas.setAttribute('width', width);
       }
 
       getWidth() {
@@ -20804,7 +20837,6 @@
           this.popover.dispose();
         }
 
-        this.removeMouseHandlers();
         this.$viewport.get(0).remove(); // Null out all properties -- this should not be neccessary, but just in case there is a
         // reference to self somewhere we want to free memory.
 
@@ -23061,7 +23093,7 @@
       }
     };
 
-    const _version = "2.11.2";
+    const _version = "2.12.2";
 
     function version$1() {
       return _version;
@@ -23204,7 +23236,7 @@
     class Genome {
       constructor(config, sequence, ideograms, aliases) {
         this.config = config;
-        this.id = config.id;
+        this.id = config.id || generateGenomeID(config);
         this.sequence = sequence;
         this.chromosomeNames = sequence.chromosomeNames;
         this.chromosomes = sequence.chromosomes; // An object (functions as a dictionary)
@@ -23411,6 +23443,7 @@
       }
 
       async getSequence(chr, start, end) {
+        chr = this.getChromosomeName(chr);
         return this.sequence.getSequence(chr, start, end);
       }
 
@@ -23519,6 +23552,18 @@
       }
     }
 
+    function generateGenomeID(config) {
+      if (config.id !== undefined) {
+        return config.id;
+      } else if (config.fastaURL && isString$3(config.fastaURL)) {
+        return config.fastaURL;
+      } else if (config.fastaURL && config.fastaURL.name) {
+        return config.fastaURL.name;
+      } else {
+        return ("0000" + (Math.random() * Math.pow(36, 4) << 0).toString(36)).slice(-4);
+      }
+    }
+
     /**
      * Created by dat on 9/16/16.
      */
@@ -23537,15 +23582,13 @@
         });
         this.$viewport.append(this.$spinner);
         this.$spinner.append($$1('<div>'));
-        const {
-          track
-        } = this.trackView;
+        const track = this.trackView.track;
 
         if ('sequence' !== track.type) {
           this.$zoomInNotice = this.createZoomInNotice(this.$content);
         }
 
-        if (track.name && "sequence" !== track.config.type) {
+        if (track.name && "sequence" !== track.id) {
           this.$trackLabel = $$1('<div class="igv-track-label">');
           this.$viewport.append(this.$trackLabel);
           this.setTrackLabel(track.name);
@@ -23559,6 +23602,11 @@
         this.addMouseHandlers();
       }
 
+      setContentHeight(contentHeight) {
+        super.setContentHeight(contentHeight);
+        if (this.featureCache) this.featureCache.redraw = true;
+      }
+
       setTrackLabel(label) {
         this.$trackLabel.empty();
         this.$trackLabel.html(label);
@@ -23575,55 +23623,72 @@
           this.$spinner.hide();
         }
       }
+      /**
+       * Test to determine if we are zoomed in far enough to see features. Applicable to tracks with visibility windows.
+       *
+       * As a side effect the viewports canvas is removed if zoomed out.
+       *
+       * @returns {boolean} true if we are zoomed in past visibility window, false otherwise
+       */
 
-      checkZoomIn() {
-        const showZoomInNotice = () => {
-          const referenceFrame = this.referenceFrame;
 
-          if (this.referenceFrame.chr.toLowerCase() === "all" && !this.trackView.track.supportsWholeGenome()) {
+      checkZoomIn() {
+        const zoomedOutOfWindow = () => {
+          if (this.referenceFrame.chr.toLowerCase() === "all" && !this.trackView.track.supportsWholeGenome) {
             return true;
           } else {
             const visibilityWindow = this.trackView.track.visibilityWindow;
-            return visibilityWindow !== undefined && visibilityWindow > 0 && referenceFrame.bpPerPixel * this.$viewport.width() > visibilityWindow;
+            return visibilityWindow !== undefined && visibilityWindow > 0 && this.referenceFrame.bpPerPixel * this.$viewport.width() > visibilityWindow;
           }
         };
 
+        if (this.trackView.track && "sequence" === this.trackView.track.type && this.referenceFrame.bpPerPixel > 1) {
+          $$1(this.canvas).remove();
+          this.canvas = undefined; //this.featureCache = undefined
+
+          return false;
+        }
+
         if (!this.viewIsReady()) {
           return false;
         }
 
-        if (this.$zoomInNotice) {
-          if (showZoomInNotice()) {
-            // Out of visibility window
-            if (this.canvas) {
-              this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-              this.tile = undefined;
-            }
+        if (zoomedOutOfWindow()) {
+          // Out of visibility window
+          if (this.canvas) {
+            $$1(this.canvas).remove();
+            this.canvas = undefined; //this.featureCache = undefined
+          }
 
-            this.$zoomInNotice.show();
+          if (this.trackView.track.autoHeight) {
+            const minHeight = this.trackView.minHeight || 0;
+            this.setContentHeight(minHeight);
+          }
 
-            if (this.trackView.track.autoHeight) {
-              const minHeight = this.trackView.minHeight || 0;
-              this.setContentHeight(minHeight);
-            }
+          if (this.$zoomInNotice) {
+            this.$zoomInNotice.show();
+          }
 
-            return false;
-          } else {
+          return false;
+        } else {
+          if (this.$zoomInNotice) {
             this.$zoomInNotice.hide();
-            return true;
           }
-        }
 
-        return true;
+          return true;
+        }
       }
+      /**
+       * Adjust the canvas to the current genomic state.
+       */
+
 
       shift() {
-        const self = this;
-        const referenceFrame = self.referenceFrame;
+        const referenceFrame = this.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";
+        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";
         }
       }
 
@@ -23649,9 +23714,10 @@
         this.startSpinner();
 
         try {
-          const features = await this.getFeatures(this.trackView.track, chr, bpStart, bpEnd, referenceFrame.bpPerPixel);
+          const track = this.trackView.track;
+          const features = await this.getFeatures(track, chr, bpStart, bpEnd, referenceFrame.bpPerPixel);
           let roiFeatures = [];
-          const roi = mergeArrays(this.browser.roi, this.trackView.track.roi);
+          const roi = mergeArrays(this.browser.roi, track.roi);
 
           if (roi) {
             for (let r of roi) {
@@ -23663,11 +23729,13 @@
             }
           }
 
-          this.tile = new Tile(chr, bpStart, bpEnd, referenceFrame.bpPerPixel, features, roiFeatures);
+          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.loading = false;
           this.hideMessage();
           this.stopSpinner();
-          return this.tile;
+          return this.featureCache;
         } catch (error) {
           // Track might have been removed during load
           if (this.trackView && this.trackView.disposed !== true) {
@@ -23680,38 +23748,32 @@
           this.stopSpinner();
         }
       }
+      /**
+       * Repaint the canvas using the cached features
+       *
+       */
 
-      async repaint() {
-        if (undefined === this.tile) {
+
+      repaint() {
+        if (undefined === this.featureCache) {
           return;
         }
 
         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;
-
-        if (isWGV) {
-          bpPerPixel = this.referenceFrame.end / this.$viewport.width();
-          startBP = 0;
-          endBP = this.referenceFrame.end;
-          pixelWidth = this.$viewport.width();
-        } else {
-          pixelWidth = Math.ceil((endBP - startBP) / bpPerPixel);
-        } // For deep tracks we paint a canvas == 3*viewportHeight centered on the current vertical scroll position
+          roiFeatures
+        } = this.featureCache; //this.tile.bpPerPixel = this.referenceFrame.bpPerPixel
+        // const isWGV = GenomeUtils.isWholeGenomeView(this.browser.referenceFrameList[0].chr)
 
+        const isWGV = GenomeUtils.isWholeGenomeView(this.referenceFrame.chr); // Canvas dimensions. There is no left-right panning for WGV so canvas width is viewport width.
+        // For deep tracks we paint a canvas == 3*viewportHeight centered on the current vertical scroll position
 
+        const pixelWidth = isWGV ? this.$viewport.width() : 3 * this.$viewport.width();
         const viewportHeight = this.$viewport.height();
         const contentHeight = this.getContentHeight();
         const minHeight = roiFeatures ? Math.max(contentHeight, viewportHeight) : contentHeight; // Need to fill viewport for ROIs.
 
-        let pixelHeight = Math.min(minHeight, 3 * viewportHeight);
+        const pixelHeight = Math.min(minHeight, 3 * viewportHeight);
 
         if (0 === pixelWidth || 0 === pixelHeight) {
           if (this.canvas) {
@@ -23721,26 +23783,22 @@
           return;
         }
 
-        const canvasTop = Math.max(0, -this.$content.position().top - viewportHeight); // Always use high DPI if in compressed display mode, otherwise use preference setting;
-
-        let devicePixelRatio;
-
-        if ("FILL" === this.trackView.track.displayMode) {
-          devicePixelRatio = window.devicePixelRatio;
-        } else {
-          devicePixelRatio = this.trackView.track.supportHiDPI === false ? 1 : window.devicePixelRatio;
-        }
-
-        const pixelXOffset = Math.round((startBP - this.referenceFrame.start) / this.referenceFrame.bpPerPixel);
+        const canvasTop = Math.max(0, -this.$content.position().top - viewportHeight);
+        const bpPerPixel = this.referenceFrame.bpPerPixel;
+        const startBP = this.referenceFrame.start - (isWGV ? 0 : pixelWidth / 3 * bpPerPixel);
+        const endBP = this.referenceFrame.end + (isWGV ? 0 : pixelWidth / 3 * bpPerPixel);
+        const pixelXOffset = Math.round((startBP - this.referenceFrame.start) / bpPerPixel);
         const newCanvas = $$1('<canvas class="igv-canvas">').get(0);
-        const ctx = newCanvas.getContext("2d");
         newCanvas.style.width = pixelWidth + "px";
         newCanvas.style.height = pixelHeight + "px";
+        newCanvas.style.left = pixelXOffset + "px";
+        newCanvas.style.top = canvasTop + "px"; // Always use high DPI if in "FILL" display mode, otherwise use track setting;
+
+        const devicePixelRatio = "FILL" === this.trackView.track.displayMode || this.trackView.track.supportHiDPI !== false ? window.devicePixelRatio : 1;
         newCanvas.width = devicePixelRatio * pixelWidth;
         newCanvas.height = devicePixelRatio * pixelHeight;
+        const ctx = newCanvas.getContext("2d");
         ctx.scale(devicePixelRatio, devicePixelRatio);
-        newCanvas.style.left = pixelXOffset + "px";
-        newCanvas.style.top = canvasTop + "px";
         ctx.translate(0, -canvasTop);
         const drawConfiguration = {
           context: ctx,
@@ -23757,20 +23815,32 @@
           viewportWidth: this.$viewport.width()
         };
         this.draw(drawConfiguration, features, roiFeatures);
-        this.canvasVerticalRange = {
-          top: canvasTop,
-          bottom: canvasTop + pixelHeight
-        };
+        this.featureCache.canvasTop = canvasTop;
+        this.featureCache.height = pixelHeight;
 
-        if (this.$canvas) {
-          this.$canvas.remove();
+        if (this.canvas) {
+          $$1(this.canvas).remove();
         }
 
-        this.$canvas = $$1(newCanvas);
-        this.$content.append(this.$canvas);
+        newCanvas._data = {
+          chr: this.featureCache.chr,
+          bpPerPixel,
+          startBP,
+          endBP,
+          pixelHeight,
+          pixelTop: canvasTop
+        };
         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 }.`)
@@ -23785,51 +23855,6 @@
             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) {
@@ -23844,15 +23869,17 @@
         return this.loading;
       }
 
-      saveImage() {
-        if (!this.ctx) return;
-        const canvasTop = this.canvasVerticalRange ? this.canvasVerticalRange.top : 0;
+      savePNG() {
+        if (!this.canvas) return;
+        const canvasMetadata = this.featureCache;
+        const canvasTop = canvasMetadata ? canvasMetadata.canvasTop : 0;
         const devicePixelRatio = window.devicePixelRatio;
         const w = this.$viewport.width() * devicePixelRatio;
         const h = this.$viewport.height() * devicePixelRatio;
         const x = -$$1(this.canvas).position().left * devicePixelRatio;
         const y = (-this.$content.position().top - canvasTop) * devicePixelRatio;
-        const imageData = this.ctx.getImageData(x, y, w, h);
+        const ctx = this.canvas.getContext("2d");
+        const imageData = ctx.getImageData(x, y, w, h);
         const exportCanvas = document.createElement('canvas');
         const exportCtx = exportCanvas.getContext('2d');
         exportCanvas.width = imageData.width;
@@ -23968,29 +23995,44 @@
           viewportWidth: width,
           selection: this.selection
         };
-        const features = this.tile ? this.tile.features : [];
-        const roiFeatures = this.tile ? this.tile.roiFeatures : undefined;
+        const features = this.featureCache ? this.featureCache.features : [];
+        const roiFeatures = this.featureCache ? this.featureCache.roiFeatures : undefined;
         this.draw(config, features, roiFeatures);
         context.restore();
       }
 
-      getCachedFeatures() {
-        return this.tile ? this.tile.features : [];
+      get cachedFeatures() {
+        return this.featureCache ? this.featureCache.features : [];
       }
 
       async getFeatures(track, chr, start, end, bpPerPixel) {
-        if (this.tile && this.tile.containsRange(chr, start, end, bpPerPixel)) {
-          return this.tile.features;
+        if (this.featureCache && this.featureCache.containsRange(chr, start, end, bpPerPixel)) {
+          return this.featureCache.features;
         } else if (typeof track.getFeatures === "function") {
           const features = await track.getFeatures(chr, start, end, bpPerPixel, this);
-          this.cachedFeatures = features;
-          this.checkContentHeight();
+          this.checkContentHeight(features);
           return features;
         } else {
           return undefined;
         }
       }
 
+      needsRepaint() {
+        if (!this.canvas) return true;
+        const data = this.canvas._data;
+        return !data || this.referenceFrame.start < data.startBP || this.referenceFrame.end > data.endBP || this.referenceFrame.chr !== data.chr || this.referenceFrame.bpPerPixel != data.bpPerPixel;
+      }
+
+      needsReload() {
+        if (!this.featureCache) return true;
+        const referenceFrame = this.referenceFrame;
+        const chr = this.referenceFrame.chr;
+        const start = referenceFrame.start;
+        const end = start + referenceFrame.toBP($$1(this.contentDiv).width());
+        const bpPerPixel = referenceFrame.bpPerPixel;
+        return !this.featureCache.containsRange(chr, start, end, bpPerPixel);
+      }
+
       createZoomInNotice($parent) {
         const $container = $$1('<div>', {
           class: 'igv-zoom-in-notice-container'
@@ -24008,36 +24050,42 @@
       }
 
       addMouseHandlers() {
-        this.addViewportContextMenuHandler(this.$viewport.get(0));
-        this.addViewportMouseDownHandler(this.$viewport.get(0));
-        this.addViewportTouchStartHandler(this.$viewport.get(0));
-        this.addViewportMouseUpHandler(this.$viewport.get(0));
-        this.addViewportTouchEndHandler(this.$viewport.get(0));
-        this.addViewportClickHandler(this.$viewport.get(0));
+        const viewport = this.$viewport.get(0);
+        this.addViewportContextMenuHandler(viewport);
 
-        if (this.trackView.track.name && "sequence" !== this.trackView.track.config.type) {
-          this.addTrackLabelClickHandler(this.$trackLabel.get(0));
-        }
-      }
+        const md = event => {
+          this.enableClick = true;
+          this.browser.mouseDownOnViewport(event, this);
+          pageCoordinates$1(event);
+        };
 
-      removeMouseHandlers() {
-        this.removeViewportContextMenuHandler(this.$viewport.get(0));
-        this.removeViewportMouseDownHandler(this.$viewport.get(0));
-        this.removeViewportTouchStartHandler(this.$viewport.get(0));
-        this.removeViewportMouseUpHandler(this.$viewport.get(0));
-        this.removeViewportTouchEndHandler(this.$viewport.get(0));
-        this.removeViewportClickHandler(this.$viewport.get(0));
+        viewport.addEventListener('mousedown', md);
+        viewport.addEventListener('touchstart', md);
+
+        const mu = event => {
+          // Any mouse up cancels drag and scrolling
+          if (this.browser.dragObject || this.browser.isScrolling) {
+            this.browser.cancelTrackPan(); // event.preventDefault();
+            // event.stopPropagation();
+
+            this.enableClick = false; // Until next mouse down
+          } else {
+            this.browser.cancelTrackPan();
+            this.browser.endTrackDrag();
+          }
+        };
+
+        viewport.addEventListener('mouseup', mu);
+        viewport.addEventListener('touchend', mu);
+        this.addViewportClickHandler(this.$viewport.get(0));
 
         if (this.trackView.track.name && "sequence" !== this.trackView.track.config.type) {
-          this.removeTrackLabelClickHandler(this.$trackLabel.get(0));
+          this.addTrackLabelClickHandler(this.$trackLabel.get(0));
         }
       }
 
       addViewportContextMenuHandler(viewport) {
-        this.boundContextMenuHandler = contextMenuHandler.bind(this);
-        viewport.addEventListener('contextmenu', this.boundContextMenuHandler);
-
-        function contextMenuHandler(event) {
+        viewport.addEventListener('contextmenu', event => {
           // Ignore if we are doing a drag.  This can happen with touch events.
           if (this.browser.dragObject) {
             return false;
@@ -24077,55 +24125,12 @@
             click: () => this.saveSVG()
           });
           this.browser.menuPopup.presentTrackContextMenu(event, menuItems);
-        }
-      }
-
-      removeViewportContextMenuHandler(viewport) {
-        viewport.removeEventListener('contextmenu', this.boundContextMenuHandler);
-      }
-
-      addViewportMouseDownHandler(viewport) {
-        this.boundMouseDownHandler = mouseDownHandler.bind(this);
-        viewport.addEventListener('mousedown', this.boundMouseDownHandler);
-      }
-
-      removeViewportMouseDownHandler(viewport) {
-        viewport.removeEventListener('mousedown', this.boundMouseDownHandler);
-      }
-
-      addViewportTouchStartHandler(viewport) {
-        this.boundTouchStartHandler = mouseDownHandler.bind(this);
-        viewport.addEventListener('touchstart', this.boundTouchStartHandler);
-      }
-
-      removeViewportTouchStartHandler(viewport) {
-        viewport.removeEventListener('touchstart', this.boundTouchStartHandler);
-      }
-
-      addViewportMouseUpHandler(viewport) {
-        this.boundMouseUpHandler = mouseUpHandler.bind(this);
-        viewport.addEventListener('mouseup', this.boundMouseUpHandler);
-      }
-
-      removeViewportMouseUpHandler(viewport) {
-        viewport.removeEventListener('mouseup', this.boundMouseUpHandler);
-      }
-
-      addViewportTouchEndHandler(viewport) {
-        this.boundTouchEndHandler = mouseUpHandler.bind(this);
-        viewport.addEventListener('touchend', this.boundTouchEndHandler);
-      }
-
-      removeViewportTouchEndHandler(viewport) {
-        viewport.removeEventListener('touchend', this.boundTouchEndHandler);
+        });
       }
 
       addViewportClickHandler(viewport) {
-        this.boundClickHandler = clickHandler.bind(this);
-        viewport.addEventListener('click', this.boundClickHandler);
-
-        function clickHandler(event) {
-          if (this.enableClick) {
+        viewport.addEventListener('click', event => {
+          if (this.enableClick && this.canvas) {
             if (3 === event.which || event.ctrlKey) {
               return;
             } // Close any currently open popups
@@ -24199,18 +24204,11 @@
 
             lastClickTime = time;
           }
-        }
-      }
-
-      removeViewportClickHandler(viewport) {
-        viewport.removeEventListener('click', this.boundClickHandler);
+        });
       }
 
       addTrackLabelClickHandler(trackLabel) {
-        this.boundTrackLabelClickHandler = clickHandler.bind(this);
-        trackLabel.addEventListener('click', this.boundTrackLabelClickHandler);
-
-        function clickHandler(event) {
+        trackLabel.addEventListener('click', event => {
           event.stopPropagation();
           const {
             track
@@ -24231,44 +24229,16 @@
             this.popover = new Popover(this.browser.columnContainer, track.name || '');
             this.popover.presentContentWithEvent(event, str);
           }
-        }
-      }
-
-      removeTrackLabelClickHandler(trackLabel) {
-        trackLabel.removeEventListener('click', this.boundTrackLabelClickHandler);
+        });
       }
 
     }
 
-    function mouseDownHandler(event) {
-      this.enableClick = true;
-      this.browser.mouseDownOnViewport(event, this);
-      pageCoordinates$1(event);
-    }
-
-    function mouseUpHandler(event) {
-      // Any mouse up cancels drag and scrolling
-      if (this.browser.dragObject || this.browser.isScrolling) {
-        this.browser.cancelTrackPan(); // event.preventDefault();
-        // event.stopPropagation();
-
-        this.enableClick = false; // Until next mouse down
-      } else {
-        this.browser.cancelTrackPan();
-        this.browser.endTrackDrag();
-      }
-    }
-
     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,
@@ -24322,22 +24292,28 @@
       return rows.join('');
     }
 
-    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;
-    };
+    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;
+      }
 
-    Tile.prototype.containsRange = function (chr, start, end, bpPerPixel) {
-      return this.bpPerPixel === bpPerPixel && start >= this.startBP && end <= this.endBP && chr === this.chr;
-    };
+      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;
+      }
 
-    Tile.prototype.overlapsRange = function (chr, start, end) {
-      return this.chr === chr && end >= this.startBP && start <= this.endBP;
-    };
+      overlapsRange(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
@@ -24476,10 +24452,12 @@
                 end: bp(this.rulerViewport.referenceFrame, left + width)
               };
               validateLocusExtent(this.rulerViewport.browser.genome.getChromosome(this.rulerViewport.referenceFrame.chr).bpLength, extent, this.rulerViewport.browser.minimumBases());
-              this.rulerViewport.referenceFrame.bpPerPixel = (Math.round(extent.end) - Math.round(extent.start)) / this.rulerViewport.contentDiv.clientWidth;
-              this.rulerViewport.referenceFrame.start = Math.round(extent.start);
-              this.rulerViewport.referenceFrame.end = Math.round(extent.end);
-              this.rulerViewport.browser.updateViews(this.rulerViewport.referenceFrame);
+              const newStart = Math.round(extent.start);
+              const newEnd = Math.round(extent.end);
+              this.rulerViewport.referenceFrame.bpPerPixel = (newEnd - newStart) / this.rulerViewport.contentDiv.clientWidth;
+              this.rulerViewport.referenceFrame.start = newStart;
+              this.rulerViewport.referenceFrame.end = newEnd;
+              this.rulerViewport.browser.updateViews();
             }
           }
         }
@@ -25481,6 +25459,18 @@
         return true; // By definition
       }
 
+      isMateMapped() {
+        return true; // By definition
+      }
+
+      isProperPair() {
+        return this.firstAlignment.isProperPair();
+      }
+
+      get fragmentLength() {
+        return Math.abs(this.firstAlignment.fragmentLength);
+      }
+
       firstOfPairStrand() {
         if (this.firstAlignment.isFirstOfPair()) {
           return this.firstAlignment.strand;
@@ -25491,6 +25481,10 @@
         }
       }
 
+      hasTag(str) {
+        return this.firstAlignment.hasTag(str) || this.secondAlignment && this.secondAlignment.hasTag(str);
+      }
+
     }
 
     /*
@@ -25847,7 +25841,15 @@
      */
 
     class AlignmentContainer {
-      constructor(chr, start, end, samplingWindowSize, samplingDepth, pairsSupported, alleleFreqThreshold) {
+      //            this.config.samplingWindowSize, this.config.samplingDepth,
+      //             this.config.pairsSupported, this.config.alleleFreqThreshold)
+      constructor(chr, start, end, _ref) {
+        let {
+          samplingWindowSize,
+          samplingDepth,
+          pairsSupported,
+          alleleFreqThreshold
+        } = _ref;
         this.chr = chr;
         this.start = Math.floor(start);
         this.end = Math.ceil(end);
@@ -25870,17 +25872,10 @@
           // 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)) {
@@ -25909,7 +25904,6 @@
         });
         this.pairsCache = undefined;
         this.downsampledReads = undefined;
-        this.pairedEndStats.compute();
       }
 
       contains(chr, start, end) {
@@ -26204,62 +26198,6 @@
 
     }
 
-    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(',');
@@ -27022,7 +26960,7 @@
           const lseq = readInt(ba, offset + 20);
           const mateChrIdx = readInt(ba, offset + 24);
           const matePos = readInt(ba, offset + 28);
-          const tlen = readInt(ba, offset + 32);
+          const fragmentLength = readInt(ba, offset + 32);
           let readName = [];
 
           for (let j = 0; j < nl - 1; ++j) {
@@ -27063,7 +27001,7 @@
           alignment.readName = readName;
           alignment.cigar = cigar;
           alignment.lengthOnRef = lengthOnRef;
-          alignment.fragmentLength = tlen;
+          alignment.fragmentLength = fragmentLength;
           alignment.mq = mq;
           BamUtils.bam_tag2cigar(ba, blockEnd, p, lseq, alignment, cigarArray);
           alignment.end = alignment.start + alignment.lengthOnRef;
@@ -27463,7 +27401,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.samplingWindowSize, this.samplingDepth, this.pairsSupported, this.alleleFreqThreshold);
+          const alignmentContainer = new AlignmentContainer(chr, bpStart, bpEnd, this.config);
 
           for (let a of qAlignments) {
             alignmentContainer.push(a);
@@ -27490,13 +27428,13 @@
         const alignments = [];
         this.header = BamUtils.decodeBamHeader(data);
         BamUtils.decodeBamRecords(data, this.header.size, alignments, this.header.chrNames);
-        this.alignmentCache = new FeatureCache(alignments, this.genome);
+        this.alignmentCache = new FeatureCache$1(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.samplingWindowSize, this.samplingDepth, this.pairsSupported);
+        const alignmentContainer = new AlignmentContainer(chr, bpStart, bpEnd, this.config);
 
         for (let feature of features) {
           alignmentContainer.push(feature);
@@ -28496,7 +28434,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.samplingWindowSize, this.config.samplingDepth, this.config.pairsSupported, this.config.alleleFreqThreshold);
+        const alignmentContainer = new AlignmentContainer(chr, bpStart, bpEnd, this.config);
 
         if (chrId === undefined) {
           return alignmentContainer;
@@ -28645,7 +28583,7 @@
 
       async readAlignments(chr, start, end) {
         if (!this.bamReaders.hasOwnProperty(chr)) {
-          return new AlignmentContainer(chr, start, end);
+          return new AlignmentContainer(chr, start, end, this.config);
         } else {
           let reader = this.bamReaders[chr];
           const a = await reader.readAlignments(chr, start, end);
@@ -28717,7 +28655,7 @@
         return igvxhr.loadString(url, buildOptions(self.config)).then(function (sam) {
           var alignmentContainer;
           header.chrToIndex[queryChr];
-          alignmentContainer = new AlignmentContainer(chr, bpStart, bpEnd, self.samplingWindowSize, self.samplingDepth, self.pairsSupported, self.alleleFreqThreshold);
+          alignmentContainer = new AlignmentContainer(chr, bpStart, bpEnd, self.config);
           BamUtils.decodeSamRecords(sam, alignmentContainer, queryChr, bpStart, bpEnd, self.filter);
           return alignmentContainer;
         });
@@ -28927,7 +28865,7 @@
 
         const ba = unbgzf(compressedData.buffer);
         const chrIdx = this.header.chrToIndex[chr];
-        const alignmentContainer = new AlignmentContainer(chr, start, end, this.samplingWindowSize, this.samplingDepth, this.pairsSupported, this.alleleFreqThreshold);
+        const alignmentContainer = new AlignmentContainer(chr, start, end, this.config);
         BamUtils.decodeBamRecords(ba, this.header.size, alignmentContainer, this.header.chrNames, chrIdx, start, end);
         alignmentContainer.finish();
         return alignmentContainer;
@@ -44465,7 +44403,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.samplingWindowSize, this.samplingDepth, this.pairsSupported, this.alleleFreqThreshold);
+        const alignmentContainer = new AlignmentContainer(chr, bpStart, bpEnd, this.config);
 
         if (chrIdx === undefined) {
           return alignmentContainer;
@@ -45074,7 +45012,7 @@
             "pageSize": "10000"
           },
           decode: decodeGa4ghReads,
-          results: new AlignmentContainer(chr, bpStart, bpEnd, self.samplingWindowSize, self.samplingDepth, self.pairsSupported, self.alleleFreqThreshold)
+          results: new AlignmentContainer(chr, bpStart, bpEnd, self.config)
         });
       });
 
@@ -45381,7 +45319,6 @@
         const genome = browser.genome;
         this.config = config;
         this.genome = genome;
-        this.alignmentContainer = undefined;
 
         if (isDataURL(config.url)) {
           if ("cram" === config.format) {
@@ -45432,58 +45369,44 @@
       }
 
       setViewAsPairs(bool) {
-
-        if (this.viewAsPairs !== bool) {
-          this.viewAsPairs = bool; // if (this.alignmentContainer) {
-          //     this.alignmentContainer.setViewAsPairs(bool);
-          // }
-        }
+        this.viewAsPairs = bool;
       }
 
       setShowSoftClips(bool) {
-        if (this.showSoftClips !== bool) {
-          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.alignmentContainer && this.alignmentContainer.contains(chr, bpStart, bpEnd)) {
-          return this.alignmentContainer;
-        } 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
+        if (!this.viewAsPairs) {
+          alignments = unpairAlignments([{
+            alignments: alignments
+          }]);
+        }
 
-          this.alignmentContainer = alignmentContainer;
+        const hasAlignments = alignments.length > 0;
+        alignmentContainer.packedAlignmentRows = packAlignmentRows(alignments, alignmentContainer.start, alignmentContainer.end, showSoftClips);
+        this.alignmentContainer = alignmentContainer;
 
-          if (hasAlignments) {
-            const sequence = await genome.sequence.getSequence(chr, alignmentContainer.start, alignmentContainer.end);
+        if (hasAlignments) {
+          const sequence = await genome.sequence.getSequence(chr, alignmentContainer.start, alignmentContainer.end);
 
-            if (sequence) {
-              alignmentContainer.coverageMap.refSeq = sequence; // TODO -- fix this
+          if (sequence) {
+            alignmentContainer.coverageMap.refSeq = sequence; // TODO -- fix this
 
-              alignmentContainer.sequence = 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;
+          } else {
+            console.error("No sequence for: " + chr + ":" + alignmentContainer.start + "-" + alignmentContainer.end);
           }
-
-          return alignmentContainer;
         }
+
+        return alignmentContainer;
       }
 
     }
@@ -45512,6 +45435,10 @@
      * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
      * THE SOFTWARE.
      */
+
+    const fixColor = colorString => {
+      return colorString.indexOf(",") > 0 && !colorString.startsWith("rgb") ? `rgb(${colorString})` : colorString;
+    };
     /**
      * A collection of properties and methods shared by all (or most) track types.
      *
@@ -45520,6 +45447,7 @@
      * @constructor
      */
 
+
     class TrackBase {
       constructor(config, browser) {
         this.browser = browser;
@@ -45553,8 +45481,8 @@
 
         this.id = this.config.id === undefined ? this.name : this.config.id;
         this.order = config.order;
-        this.color = config.color;
-        this.altColor = config.altColor;
+        if (config.color) this.color = fixColor(config.color);
+        if (config.altColor) this.altColor = fixColor(config.altColor);
 
         if ("civic-ws" === config.sourceType) {
           // Ugly proxy for specialized track type
@@ -45667,7 +45595,7 @@
         return state;
       }
 
-      supportsWholeGenome() {
+      get supportsWholeGenome() {
         return false;
       }
       /**
@@ -45828,7 +45756,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.getCachedFeatures();
+        if (!features) features = clickState.viewport.cachedFeatures;
 
         if (!features || features.length === 0) {
           return [];
@@ -47758,7 +47686,7 @@
         return this.tracks.find(t => name === t.name);
       }
 
-      getChordset(name) {
+      getChordSet(name) {
         return this.chordSets.find(cs => name === cs.name);
       }
 
@@ -47868,9 +47796,9 @@
         buttonContainer.appendChild(this.showControlsButton);
         this.showControlsButton.innerText = 'none' === this.controlPanel.style.display ? 'Show Controls' : 'Hide Controls';
         this.showControlsButton.addEventListener('click', event => {
-          const trackPanelRows = this.controlPanel.querySelectorAll('div');
+          const panelRows = this.controlPanel.querySelectorAll('div');
 
-          if (trackPanelRows.length > 0) {
+          if (panelRows.length > 0) {
             if ('none' === this.controlPanel.style.display) {
               this.controlPanel.style.display = 'flex';
               event.target.innerText = 'Hide Controls';
@@ -47950,10 +47878,10 @@
         hideShowButton.innerText = true === chordSet.visible ? 'Hide' : 'Show';
         hideShowButton.addEventListener('click', event => {
           if (true === chordSet.visible) {
-            this.hideTrack(chordSet.name);
+            this.hideChordSet(chordSet.name);
             event.target.innerText = "Show";
           } else {
-            this.showTrack(chordSet.name);
+            this.showChordSet(chordSet.name);
             event.target.innerText = "Hide";
           }
         }); // The alpha range slider.  Create this here so we can reference it from the color picker
@@ -47980,7 +47908,7 @@
             rgbaString
           }) => {
             colorPickerButton.style.backgroundColor = setAlpha(rgbaString, 1);
-            this.setTrackColor(chordSet.name, rgbaString);
+            this.setColor(chordSet.name, rgbaString);
             alphaSlider.value = alphaToValue(getAlpha(chordSet.color));
           }
         };
@@ -47998,7 +47926,7 @@
 
         alphaSlider.oninput = () => {
           const v = valueToAlpha(alphaSlider.value);
-          this.setTrackColor(chordSet.name, setAlpha(chordSet.color, v));
+          this.setColor(chordSet.name, setAlpha(chordSet.color, v));
           picker.setColor(chordSet.color);
         };
 
@@ -48017,12 +47945,14 @@
 
 
       setAssembly(igvGenome) {
-        if (this.genomeId === igvGenome.id) {
+        const id = this.genomeId || guid();
+
+        if (this.genomeId === id) {
           return;
         }
 
         this.chordManager.clearChords();
-        this.genomeId = igvGenome.id;
+        this.genomeId = id;
         this.chrNames = new Set(igvGenome.chromosomes.map(chr => shortChrName$1(chr.name)));
         const regions = [];
         const colors = [];
@@ -48041,7 +47971,7 @@
         this.assembly = {
           name: igvGenome.name,
           sequence: {
-            trackId: igvGenome.id,
+            trackId: id,
             type: 'ReferenceSequenceTrack',
             adapter: {
               type: 'FromConfigSequenceAdapter',
@@ -48079,7 +48009,7 @@
 
 
       addChords(newChords, options = {}) {
-        const tmp = options.track || options.name || "*";
+        const tmp = options.name || options.track || "*";
         const trackName = tmp.split(' ')[0].replaceAll("%20", " ");
         const chordSetName = tmp.replaceAll("%20", " ");
         const chordSet = {
@@ -48129,20 +48059,6 @@
       clearSelection() {
         this.viewState.pluginManager.rootModel.session.clearSelection();
       }
-
-      getFeature(featureId) {
-        // TODO -- broken
-        // const display = this.viewState.pluginManager.rootModel.session.view.tracks[0].displays[0]
-        // const feature = display.data.features.get(featureId)
-        // return feature;
-        const features = [...this.viewState.config.tracks[0].adapter.features.value];
-
-        for (let f of features) {
-          if (featureId === f.uniqueId) {
-            return f;
-          }
-        }
-      }
       /**
        * Deprecated, use "visible" property
        */
@@ -48168,25 +48084,25 @@
         this.parent.style.display = isVisible ? 'block' : 'none';
       }
 
-      hideTrack(trackName) {
-        let track = this.getTrack(trackName);
+      hideChordSet(trackName) {
+        let cs = this.getChordSet(trackName);
 
-        if (track) {
-          track.visible = false;
+        if (cs) {
+          cs.visible = false;
           this.render();
         } else {
           console.warn(`No track with name: ${name}`);
         }
       }
 
-      showTrack(trackName) {
-        let track = this.getTrack(trackName);
+      showChordSet(name) {
+        let cs = this.getChordSet(name);
 
-        if (track) {
-          track.visible = true;
+        if (cs) {
+          cs.visible = true;
           this.render();
         } else {
-          console.warn(`No track with name: ${trackName}`);
+          console.warn(`No track with name: ${name}`);
         }
       } // showTrack(trackID) {
       //     let idx = this.tracks.findIndex(t => trackID === t.id)
@@ -48213,12 +48129,12 @@
         this.render();
       }
 
-      getTrack(name) {
-        return this.groupByTrack ? this.chordManager.getTrack(name) : this.chordManager.getChordset(name);
+      getChordSet(name) {
+        return this.groupByTrack ? this.chordManager.getTrack(name) : this.chordManager.getChordSet(name);
       }
 
-      setTrackColor(name, color) {
-        const t = this.getTrack(name);
+      setColor(name, color) {
+        const t = this.getChordSet(name);
 
         if (t) {
           t.color = color;
@@ -48319,7 +48235,7 @@
     }
 
     function embedCSS$1() {
-      const css = '.igv-circview-container {\n  z-index: 2048;\n  position: absolute;\n  width: fit-content;\n  height: fit-content;\n  box-sizing: content-box;\n  color: dimgray;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 12px;\n  background-color: white;\n  border-color: dimgray;\n  border-style: solid;\n  border-width: thin;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n\n.igv-circview-toolbar {\n  position: relative;\n  width: 100%;\n  height: 32px;\n  background-color: lightgrey;\n  border-bottom-style: solid;\n  border-bottom-color: dimgray;\n  border-bottom-width: thin;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.igv-circview-toolbar-button-container {\n  height: 100%;\n  width: fit-content;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-circview-toolbar-button-container > div {\n  margin: 4px;\n}\n\n.igv-circview-track-panel {\n  z-index: 1024;\n  position: absolute;\n  top: 33px;\n  left: 0;\n  width: 100%;\n  height: fit-content;\n  border-bottom-style: solid;\n  border-bottom-color: dimgray;\n  border-bottom-width: thin;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n.igv-circview-track-panel > div {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-circview-track-panel > div > div {\n  margin: 4px;\n}\n\n.igv-circview-swatch-button {\n  cursor: pointer;\n  padding: 5px;\n  width: 8px;\n  height: 8px;\n  border: 1px solid #8d8b8b;\n  border-radius: 16px;\n}\n\n.igv-circview-button {\n  cursor: pointer;\n  padding: 5px;\n  color: #444;\n  vertical-align: middle;\n  text-align: center;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 12px;\n  border: 1px solid #8d8b8b;\n  border-radius: 4px;\n  background: #efefef;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.2);\n}\n\n.igv-circview-button:hover {\n  background: #efefef;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.6);\n}\n\n.igv-circview-button:active {\n  color: #007bff;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.6);\n}\n\n/*# sourceMappingURL=circular-view.css.map */\n';
+      const css = '.igv-circview-container {\n  z-index: 2048;\n  width: fit-content;\n  height: fit-content;\n  box-sizing: content-box;\n  color: dimgray;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 12px;\n  background-color: white;\n  border-color: dimgray;\n  border-style: solid;\n  border-width: thin;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n\n.igv-circview-toolbar {\n  position: relative;\n  width: 100%;\n  height: 32px;\n  background-color: lightgrey;\n  border-bottom-style: solid;\n  border-bottom-color: dimgray;\n  border-bottom-width: thin;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.igv-circview-toolbar-button-container {\n  height: 100%;\n  width: fit-content;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-circview-toolbar-button-container > div {\n  margin: 4px;\n}\n\n.igv-circview-track-panel {\n  z-index: 1024;\n  position: absolute;\n  top: 33px;\n  left: 0;\n  width: 100%;\n  height: fit-content;\n  border-bottom-style: solid;\n  border-bottom-color: dimgray;\n  border-bottom-width: thin;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n.igv-circview-track-panel > div {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-circview-track-panel > div > div {\n  margin: 4px;\n}\n\n.igv-circview-swatch-button {\n  cursor: pointer;\n  padding: 5px;\n  width: 8px;\n  height: 8px;\n  border: 1px solid #8d8b8b;\n  border-radius: 16px;\n}\n\n.igv-circview-button {\n  cursor: pointer;\n  padding: 5px;\n  color: #444;\n  vertical-align: middle;\n  text-align: center;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 12px;\n  border: 1px solid #8d8b8b;\n  border-radius: 4px;\n  background: #efefef;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.2);\n}\n\n.igv-circview-button:hover {\n  background: #efefef;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.6);\n}\n\n.igv-circview-button:active {\n  color: #007bff;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.6);\n}\n\n/*# sourceMappingURL=circular-view.css.map */\n';
       const style = document.createElement('style');
       style.setAttribute('type', 'text/css');
       style.innerHTML = css;
@@ -48359,20 +48275,36 @@
       const chords = [];
 
       for (let a of alignments) {
-        const mate = a.mate;
-
-        if (mate && mate.chr && mate.position) {
-          chords.push({
-            uniqueId: a.readName,
-            refName: shortChrName(a.chr),
-            start: a.start,
-            end: a.end,
-            mate: {
-              refName: shortChrName(mate.chr),
-              start: mate.position - 1,
-              end: mate.position
-            }
-          });
+        if (a.paired) {
+          if (a.firstAlignment && a.secondAlignment) {
+            chords.push({
+              uniqueId: a.readName,
+              refName: shortChrName(a.firstAlignment.chr),
+              start: a.firstAlignment.start,
+              end: a.firstAlignment.end,
+              mate: {
+                refName: shortChrName(a.secondAlignment.chr),
+                start: a.secondAlignment.start,
+                end: a.secondAlignment.end
+              }
+            });
+          }
+        } else {
+          const mate = a.mate;
+
+          if (mate && mate.chr && mate.position) {
+            chords.push({
+              uniqueId: a.readName,
+              refName: shortChrName(a.chr),
+              start: a.start,
+              end: a.end,
+              mate: {
+                refName: shortChrName(mate.chr),
+                start: mate.position - 1,
+                end: mate.position
+              }
+            });
+          }
         }
       }
 
@@ -48380,9 +48312,7 @@
     };
 
     const makeSupplementalAlignmentChords = alignments => {
-      const chords = [];
-
-      for (let a of alignments) {
+      const makeChords = a => {
         const sa = a.tags()['SA'];
         const supAl = createSupplementaryAlignments(sa);
         let n = 0;
@@ -48402,6 +48332,20 @@
             });
           }
         }
+      };
+
+      const chords = [];
+
+      for (let a of alignments) {
+        if (a.paired) {
+          makeChords(a.firstAlignment);
+
+          if (a.secondAlignment) {
+            makeChords(a.secondAlignment);
+          }
+        } else {
+          makeChords(a);
+        }
       }
 
       return chords;
@@ -48467,52 +48411,125 @@
       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
+      }); // show circular view if hidden
+
+      if (!track.browser.circularViewVisible) track.browser.circularViewVisible = true;
+    }
+
     function createCircularView(el, browser) {
       const circularView = new CircularView(el, {
         onChordClick: (feature, chordTrack, pluginManager) => {
           const f1 = feature.data;
           const f2 = f1.mate;
-          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);
+          addFrameForFeature(f1);
+          addFrameForFeature(f2);
+
+          function addFrameForFeature(feature) {
+            feature.chr = browser.genome.getChromosomeName(feature.refName);
+            let frameFound = false;
+
+            for (let referenceFrame of browser.referenceFrameList) {
+              const l = Locus.fromLocusString(referenceFrame.getLocusString());
+
+              if (l.contains(feature)) {
+                frameFound = true;
+                break;
+              } else if (l.overlaps(feature)) {
+                referenceFrame.extend(feature);
+                frameFound = true;
+                break;
               }
             }
-          } 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];
-          }
 
-          const searchString = loci.map(l => l.getLocusString()).join(" ");
-          browser.search(searchString);
+            if (!frameFound) {
+              const flanking = 2000;
+              const center = (feature.start + feature.end) / 2;
+              browser.addMultiLocusPanel(feature.chr, center - flanking, center + flanking);
+            }
+          }
         }
       });
       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++;
+          }
+        }
+
+        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];
+    }
+
     /*
      * The MIT License (MIT)
      *
@@ -48572,10 +48589,7 @@
         this.showInsertions = false !== config.showInsertions;
         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
+        this.coverageColor = config.coverageColor; // 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) {
@@ -48603,12 +48617,22 @@
         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.getCachedFeatures();
+            const alignmentContainer = vp.cachedFeatures;
 
             if (alignmentContainer) {
               sortAlignmentRows(options, alignmentContainer);
@@ -48643,16 +48667,16 @@
       async getFeatures(chr, bpStart, bpEnd, bpPerPixel, viewport) {
         const alignmentContainer = await this.featureSource.getAlignments(chr, bpStart, bpEnd);
 
-        if (alignmentContainer.alignments && alignmentContainer.alignments.length > 99) {
-          if (undefined === this.minFragmentLength) {
-            this.minFragmentLength = alignmentContainer.pairedEndStats.lowerFragmentLength;
-          }
+        if (alignmentContainer.paired && !this._pairedEndStats && !this.config.maxFragmentLength) {
+          const pairedEndStats = new PairedEndStats(alignmentContainer.alignments, this.config);
 
-          if (undefined === this.maxFragmentLength) {
-            this.maxFragmentLength = alignmentContainer.pairedEndStats.upperFragmentLength;
+          if (pairedEndStats.totalCount > 99) {
+            this._pairedEndStats = pairedEndStats;
           }
         }
 
+        alignmentContainer.alignments = undefined; // Don't need to hold onto these anymore
+
         const sort = this.sortObject;
 
         if (sort) {
@@ -48757,7 +48781,7 @@
             label: 'pair orientation'
           });
           colorByMenuItems.push({
-            key: 'fragmentLength',
+            key: 'tlen',
             label: 'insert size (TLEN)'
           });
           colorByMenuItems.push({
@@ -48868,36 +48892,19 @@
               this.trackView.repaintViews();
             }
           });
-        } // Experimental JBrowse feature
+        } // Add chords to JBrowse circular view, if present
 
 
-        if (this.browser.circularView && true === this.browser.circularViewVisible && (this.alignmentTrack.hasPairs || this.alignmentTrack.hasSupplemental)) {
+        if (this.browser.circularView && (this.alignmentTrack.hasPairs || this.alignmentTrack.hasSupplemental)) {
           menuItems.push('<hr/>');
 
           if (this.alignmentTrack.hasPairs) {
             menuItems.push({
               label: 'Add discordant pairs to circular view',
               click: () => {
-                const maxFragmentLength = this.maxFragmentLength;
-                const inView = [];
-
                 for (let viewport of this.trackView.viewports) {
-                  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.addPairedChordsForViewport(viewport);
                 }
-
-                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
-                });
               }
             });
           }
@@ -48906,25 +48913,9 @@
             menuItems.push({
               label: 'Add split reads to circular view',
               click: () => {
-                const inView = [];
-
                 for (let viewport of this.trackView.viewports) {
-                  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);
-                    }
-                  }
+                  this.addSplitChordsForViewport(viewport);
                 }
-
-                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
-                });
               }
             });
           }
@@ -49043,7 +49034,7 @@
       }
 
       getCachedAlignmentContainers() {
-        return this.trackView.viewports.map(vp => vp.getCachedFeatures());
+        return this.trackView.viewports.map(vp => vp.cachedFeatures);
       }
 
       get dataRange() {
@@ -49069,6 +49060,64 @@
       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) {
+            if (a.paired) {
+              if (a.end - a.start > maxTemplateLength) {
+                inView.push(a);
+              }
+            } else {
+              if (a.mate && a.mate.chr && (a.mate.chr !== a.chr || Math.max(a.fragmentLength) > maxTemplateLength)) {
+                inView.push(a);
+              }
+            }
+          }
+        }
+
+        const chords = makePairedAlignmentChords(inView);
+        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})
+      }
 
     }
 
@@ -49179,7 +49228,7 @@
       }
 
       getClickedObject(clickState) {
-        let features = clickState.viewport.getCachedFeatures();
+        let features = clickState.viewport.cachedFeatures;
         if (!features || features.length === 0) return;
         const genomicLocation = Math.floor(clickState.genomicLocation);
         const coverageMap = features.coverageMap;
@@ -49265,14 +49314,14 @@
         this.deletionColor = config.deletionColor || "black";
         this.skippedColor = config.skippedColor || "rgb(150, 170, 170)";
         this.pairConnectorColor = config.pairConnectorColor;
-        this.smallFragmentLengthColor = config.smallFragmentLengthColor || "rgb(0, 0, 150)";
-        this.largeFragmentLengthColor = config.largeFragmentLengthColor || "rgb(200, 0, 0)";
+        this.smallTLENColor = config.smallTLENColor || config.smallFragmentLengthColor || "rgb(0, 0, 150)";
+        this.largeTLENColor = config.largeTLENColor || 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 || "pairOrientation";
+        this.colorBy = config.colorBy || "unexpectedPair";
         this.colorByTag = config.colorByTag ? config.colorByTag.toUpperCase() : undefined;
         this.bamColorTag = config.bamColorTag === undefined ? "YC" : config.bamColorTag;
         this.hideSmallIndels = config.hideSmallIndels;
@@ -49371,7 +49420,7 @@
             for (let alignment of alignmentRow.alignments) {
               this.hasPairs = this.hasPairs || alignment.isPaired();
 
-              if (this.browser.circularView && true === this.browser.circularViewVisible) {
+              if (this.browser.circularView) {
                 // This is an expensive check, only do it if needed
                 this.hasSupplemental = this.hasSupplemental || alignment.hasTag('SA');
               }
@@ -49627,7 +49676,7 @@
             direction: direction
           };
           this.parent.sortObject = newSortObject;
-          sortAlignmentRows(newSortObject, viewport.getCachedFeatures());
+          sortAlignmentRows(newSortObject, viewport.cachedFeatures);
           viewport.repaint();
         };
 
@@ -49679,7 +49728,7 @@
                   };
                   this.sortByTag = tag;
                   this.parent.sortObject = newSortObject;
-                  sortAlignmentRows(newSortObject, viewport.getCachedFeatures());
+                  sortAlignmentRows(newSortObject, viewport.cachedFeatures);
                   viewport.repaint();
                 }
               }
@@ -49703,8 +49752,12 @@
                     const referenceFrame = clickState.viewport.referenceFrame;
 
                     if (this.browser.genome.getChromosome(clickedAlignment.mate.chr)) {
-                      this.highlightedAlignmentReadNamed = clickedAlignment.readName;
-                      this.browser.presentMultiLocusPanel(clickedAlignment, referenceFrame);
+                      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);
                     } else {
                       Alert.presentAlert(`Reference does not contain chromosome: ${clickedAlignment.mate.chr}`);
                     }
@@ -49717,9 +49770,7 @@
             list.push({
               label: 'View read sequence',
               click: () => {
-                const alignment = clickedAlignment;
-                if (!alignment) return;
-                const seqstring = alignment.seq; //.map(b => String.fromCharCode(b)).join("");
+                const seqstring = clickedAlignment.seq; //.map(b => String.fromCharCode(b)).join("");
 
                 if (!seqstring || "*" === seqstring) {
                   Alert.presentAlert("Read sequence: *");
@@ -49732,12 +49783,16 @@
             if (isSecureContext()) {
               list.push({
                 label: 'Copy read sequence',
-                click: () => {
-                  const alignment = clickedAlignment;
-                  if (!alignment) return;
-                  const seqstring = alignment.seq; //.map(b => String.fromCharCode(b)).join("");
+                click: async () => {
+                  const seq = clickedAlignment.seq; //.map(b => String.fromCharCode(b)).join("");
 
-                  navigator.clipboard.writeText(seqstring);
+                  try {
+                    //console.log(`seq: ${seq}`)
+                    await navigator.clipboard.writeText(seq);
+                  } catch (e) {
+                    console.error(e);
+                    Alert.presentAlert(`error copying sequence to clipboard ${e}`);
+                  }
                 }
               });
             }
@@ -49747,25 +49802,12 @@
         } // Experimental JBrowse feature
 
 
-        if (this.browser.circularView && true === this.browser.circularViewVisible && (this.hasPairs || this.hasSupplemental)) {
+        if (this.browser.circularView && (this.hasPairs || this.hasSupplemental)) {
           if (this.hasPairs) {
             list.push({
               label: 'Add discordant pairs to circular view',
               click: () => {
-                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
-                });
+                this.parent.addPairedChordsForViewport(viewport);
               }
             });
           }
@@ -49774,23 +49816,7 @@
             list.push({
               label: 'Add split reads to circular view',
               click: () => {
-                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
-                });
+                this.parent.addSplitChordsForViewport(viewport);
               }
             });
           }
@@ -49806,7 +49832,7 @@
         const y = clickState.y;
         const genomicLocation = clickState.genomicLocation;
         const showSoftClips = this.parent.showSoftClips;
-        let features = viewport.getCachedFeatures();
+        let features = viewport.cachedFeatures;
         if (!features || features.length === 0) return;
         let packedAlignmentRows = features.packedAlignmentRows;
         let downsampledIntervals = features.downsampledIntervals;
@@ -49880,11 +49906,15 @@
           case "unexpectedPair":
           case "pairOrientation":
             if (this.pairOrientation && alignment.pairOrientation) {
-              var oTypes = orientationTypes[this.pairOrientation];
+              const oTypes = orientationTypes[this.pairOrientation];
 
               if (oTypes) {
-                var pairColor = this.pairColors[oTypes[alignment.pairOrientation]];
-                if (pairColor) color = pairColor;
+                const pairColor = this.pairColors[oTypes[alignment.pairOrientation]];
+
+                if (pairColor) {
+                  color = pairColor;
+                  break;
+                }
               }
             }
 
@@ -49892,13 +49922,16 @@
               break;
             }
 
+          case "tlen":
           case "fragmentLength":
-            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;
+            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;
+              }
             }
 
             break;
@@ -49940,10 +49973,7 @@
       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) {
@@ -50098,7 +50128,7 @@
         });
         this.$viewport.append(this.$rulerLabel);
         this.$rulerLabel.click(async () => {
-          await this.browser.selectMultiLocusPanel(this.referenceFrame); // const removals = this.browser.referenceFrameList.filter(r => this.referenceFrame !== r)
+          await this.browser.gotoMultilocusPanel(this.referenceFrame); // const removals = this.browser.referenceFrameList.filter(r => this.referenceFrame !== r)
           // for (let referenceFrame of removals) {
           //     await this.browser.removeMultiLocusPanel(referenceFrame)
           // }
@@ -50204,7 +50234,10 @@
             currentViewport = this;
             this.$tooltip.show();
           } else if (currentViewport.guid !== this.guid) {
-            currentViewport.$tooltip.hide();
+            if (currentViewport.$tooltip) {
+              currentViewport.$tooltip.hide();
+            }
+
             this.$tooltip.show();
             currentViewport = this;
           } else {
@@ -50238,7 +50271,9 @@
           }); // hide tooltip when movement stops
 
           clearTimeout(timer);
-          timer = setTimeout(() => this.$tooltip.hide(), toolTipTimeout);
+          timer = setTimeout(() => {
+            if (this.$tooltip) this.$tooltip.hide();
+          }, toolTipTimeout);
         }
       }
 
@@ -50253,65 +50288,6 @@
 
     }
 
-    const viewportColumnManager = {
-      createColumns: (columnContainer, count) => {
-        for (let i = 0; i < count; i++) {
-          if (0 === i) {
-            createColumn(columnContainer, 'igv-column');
-          } else {
-            columnContainer.appendChild(div$1({
-              class: 'igv-column-shim'
-            }));
-            createColumn(columnContainer, 'igv-column');
-          }
-        }
-      },
-      removeColumnAtIndex: (i, column) => {
-        const shim = 0 === i ? column.nextElementSibling : column.previousElementSibling;
-        column.remove();
-        shim.remove();
-      },
-      insertAfter: referenceElement => {
-        const shim = div$1({
-          class: 'igv-column-shim'
-        });
-        insertElementAfter(shim, referenceElement);
-        const column = div$1({
-          class: 'igv-column'
-        });
-        insertElementAfter(column, shim);
-        return column;
-      },
-      insertBefore: (referenceElement, count) => {
-        for (let i = 0; i < count; i++) {
-          const column = div$1({
-            class: 'igv-column'
-          });
-          insertElementBefore(column, referenceElement);
-
-          if (count > 1 && i > 0) {
-            const columnShim = div$1({
-              class: 'igv-column-shim'
-            });
-            insertElementBefore(columnShim, column);
-          }
-        }
-      },
-      indexOfColumn: (columnContainer, column) => {
-        const allColumns = columnContainer.querySelectorAll('.igv-column');
-
-        for (let i = 0; i < allColumns.length; i++) {
-          const c = allColumns[i];
-
-          if (c === column) {
-            return i;
-          }
-        }
-
-        return undefined;
-      }
-    };
-
     /*
      * The MIT License (MIT)
      *
@@ -50343,60 +50319,30 @@
       }
 
       initializationHelper() {
-        this.$ideogramCanvas = $$1('<canvas>', {
-          class: 'igv-ideogram-canvas'
-        });
-        this.$ideogramCanvas.insertBefore(this.$canvas);
-        const canvas = this.$ideogramCanvas.get(0);
-        this.ideogram_ctx = canvas.getContext('2d');
-        this.$canvas.remove();
-        this.canvas = undefined;
-        this.ctx = undefined;
+        this.canvas = document.createElement('canvas');
+        this.canvas.className = 'igv-ideogram-canvas';
+        this.$content.append($$1(this.canvas));
+        this.ideogram_ctx = this.canvas.getContext('2d');
         this.addMouseHandlers();
       }
 
       addMouseHandlers() {
-        this.addBrowserObserver();
         this.addViewportClickHandler(this.$viewport.get(0));
       }
 
-      removeMouseHandlers() {
-        this.removeBrowserObserver();
-        this.removeViewportClickHandler(this.$viewport.get(0));
-      }
-
-      addBrowserObserver() {
-        function observerHandler(referenceFrameList) {
-          const column = this.$viewport.get(0).parentElement;
-
-          if (null !== column) {
-            const index = viewportColumnManager.indexOfColumn(this.browser.columnContainer, column); // console.log(`ideogram-viewport - locus-change-handler index(${ index }) ${ referenceFrameList[ index ].getLocusString() } ${ Date.now() } `)
-
-            this.update(this.ideogram_ctx, this.$viewport.width(), this.$viewport.height(), referenceFrameList[index]);
-          }
-        }
-
-        this.boundObserverHandler = observerHandler.bind(this);
-        this.browser.on('locuschange', this.boundObserverHandler);
-      }
-
-      removeBrowserObserver() {
-        this.browser.off('locuschange', this.boundObserverHandler);
-      }
-
       addViewportClickHandler(viewport) {
+        this.boundClickHandler = clickHandler.bind(this);
+        viewport.addEventListener('click', this.boundClickHandler);
+
         function clickHandler(event) {
-          const column = viewport.parentElement;
-          const index = viewportColumnManager.indexOfColumn(this.browser.columnContainer, column);
-          const referenceFrame = this.browser.referenceFrameList[index];
           const {
             xNormalized,
             width
           } = translateMouseCoordinates$1(event, this.ideogram_ctx.canvas);
           const {
             bpLength
-          } = this.browser.genome.getChromosome(referenceFrame.chr);
-          const locusLength = referenceFrame.bpPerPixel * width;
+          } = this.browser.genome.getChromosome(this.referenceFrame.chr);
+          const locusLength = this.referenceFrame.bpPerPixel * width;
           const chrCoveragePercentage = locusLength / bpLength;
           let xPercentage = xNormalized;
 
@@ -50410,18 +50356,11 @@
 
           const ss = Math.round((xPercentage - chrCoveragePercentage / 2.0) * bpLength);
           const ee = Math.round((xPercentage + chrCoveragePercentage / 2.0) * bpLength);
-          referenceFrame.start = ss;
-          referenceFrame.end = ee;
-          referenceFrame.bpPerPixel = (ee - ss) / width;
-          this.browser.updateViews(referenceFrame, this.browser.trackViews, true);
+          this.referenceFrame.start = ss;
+          this.referenceFrame.end = ee;
+          this.referenceFrame.bpPerPixel = (ee - ss) / width;
+          this.browser.updateViews(this.referenceFrame, this.browser.trackViews, true);
         }
-
-        this.boundClickHandler = clickHandler.bind(this);
-        viewport.addEventListener('click', this.boundClickHandler);
-      }
-
-      removeViewportClickHandler(viewport) {
-        viewport.removeEventListener('click', this.boundClickHandler);
       }
 
       setWidth(width) {
@@ -50439,14 +50378,22 @@
         context.restore();
       }
 
-      update(context, pixelWidth, pixelHeight, referenceFrame) {
-        this.$canvas.hide();
-        IGVGraphics.configureHighDPICanvas(context, pixelWidth, pixelHeight);
+      repaint() {
+        this.draw({
+          referenceFrame: this.referenceFrame
+        });
+      }
+
+      draw(_ref) {
+        let {
+          referenceFrame
+        } = _ref;
+        IGVGraphics.configureHighDPICanvas(this.ideogram_ctx, this.$viewport.width(), this.$viewport.height());
         this.trackView.track.draw({
-          context,
+          context: this.ideogram_ctx,
           referenceFrame,
-          pixelWidth,
-          pixelHeight
+          pixelWidth: this.$viewport.width(),
+          pixelHeight: this.$viewport.height()
         });
       }
 
@@ -50484,7 +50431,7 @@
     function createViewport(trackView, column, referenceFrame, width) {
       if ('ruler' === trackView.track.type) {
         return new RulerViewport(trackView, column, referenceFrame, width);
-      } else if ('ideogram' === trackView.track.type) {
+      } else if ('ideogram' === trackView.track.id) {
         return new IdeogramViewport(trackView, column, referenceFrame, width);
       } else {
         return new TrackViewport(trackView, column, referenceFrame, width);
@@ -50659,7 +50606,7 @@
                 sampleNameViewport.setWidth(this.browser.sampleNameViewportWidth);
               }
 
-              this.browser.resize();
+              this.browser.layoutChange();
             }
           };
           this.browser.inputDialog.present(config, event);
@@ -51011,7 +50958,6 @@
 
     class TrackView {
       constructor(browser, columnContainer, track) {
-        this.namespace = `trackview-${guid$2()}`;
         this.browser = browser;
         this.track = track;
         track.trackView = this;
@@ -51037,7 +50983,7 @@
 
       addDOMToColumnContainer(browser, columnContainer, referenceFrameList) {
         // Axis
-        this.axis = this.createAxis(browser, this.track); // Track Viewports
+        this.axis = this.createAxis(browser, this.track); // Create a viewport for each reference frame
 
         this.viewports = [];
         const viewportWidth = browser.calculateViewportWidth(referenceFrameList.length);
@@ -51104,7 +51050,6 @@
         this.axis.remove(); // Track Viewports
 
         for (let viewport of this.viewports) {
-          viewport.removeMouseHandlers();
           viewport.$viewport.remove();
         } // SampleName Viewport
 
@@ -51222,7 +51167,7 @@
           $viewport.height(newHeight);
         }
 
-        this.sampleNameViewport.viewport.style.height = `${newHeight}px`; // If the track does not manage its own content height set it here
+        this.sampleNameViewport.viewport.style.height = `${newHeight}px`; // If the track does not manage its own content height set it equal to the viewport height here
 
         if (typeof this.track.computePixelHeight !== "function") {
           for (let vp of this.viewports) {
@@ -51274,14 +51219,6 @@
           if (viewport.isLoading()) return true;
         }
       }
-
-      resize(viewportWidth) {
-        for (let viewport of this.viewports) {
-          viewport.setWidth(viewportWidth);
-        }
-
-        this.updateViews(true);
-      }
       /**
        * Repaint all viewports without loading any new data.   Use this for events that change visual aspect of data,
        * e.g. color, sort order, etc, but do not change the genomic state.
@@ -51290,7 +51227,9 @@
 
       repaintViews() {
         for (let viewport of this.viewports) {
-          viewport.repaint();
+          if (viewport.isVisible()) {
+            viewport.repaint();
+          }
         }
 
         if (typeof this.track.paintAxis === 'function') {
@@ -51312,41 +51251,60 @@
       setTrackLabelName(name) {
         this.viewports.forEach(viewport => viewport.setTrackLabel(name));
       }
+      /**
+       * Called in response to a window resize event, change in # of multilocus panels, or other event that changes
+       * the width of the track view.
+       *
+       * @param viewportWidth  The width of each viewport in this track view.
+       */
+
+
+      resize(viewportWidth) {
+        for (let viewport of this.viewports) {
+          viewport.setWidth(viewportWidth);
+        }
+      }
       /**
        * 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) {
+      async updateViews() {
         if (!(this.browser && this.browser.referenceFrameList)) return;
         const visibleViewports = this.viewports.filter(viewport => viewport.isVisible()); // Shift viewports left/right to current genomic state (pans canvas)
 
-        visibleViewports.forEach(viewport => viewport.shift());
-        const isDragging = this.browser.dragObject;
+        visibleViewports.forEach(viewport => viewport.shift()); // If dragging (panning) return
 
-        if (isDragging) {
+        if (this.browser.dragObject) {
           return;
-        } // rpv: viewports whose image (canvas) does not fully cover current genomic range
+        } // Get viewports to repaint
 
 
-        const reloadableViewports = this.viewportsToReload(force); // Trigger viewport to load features needed to cover current genomic range
+        let viewportsToRepaint = this.track.autoscale || this.track.autoscaleGroup || this.track.type === 'ruler' ? visibleViewports : visibleViewports.filter(vp => vp.needsRepaint()); // Filter zoomed out views.  This has the side effect or turning off or no the zoomed out notice
+
+        viewportsToRepaint = viewportsToRepaint.filter(viewport => viewport.checkZoomIn()); // Get viewports that require a data load
+
+        const viewportsToReload = viewportsToRepaint.filter(viewport => viewport.needsReload()); // 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) {
+        for (let viewport of viewportsToReload) {
           await viewport.loadFeatures();
         }
 
         if (this.disposed) return; // Track was removed during load
-        // Very special case for variant tracks in multilocus view.  The # of rows to allocate to the variant (site)
+        // 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) {
+        if (this.track && typeof this.track.variantRowCount === 'function' && viewportsToReload.length > 0) {
           let maxRow = 0;
 
           for (let viewport of this.viewports) {
-            if (viewport.tile && viewport.tile.features) {
-              maxRow = Math.max(maxRow, viewport.tile.features.reduce((a, f) => Math.max(a, f.row || 0), 0));
+            if (viewport.featureCache && viewport.featureCache.features) {
+              maxRow = Math.max(maxRow, viewport.featureCache.features.reduce((a, f) => Math.max(a, f.row || 0), 0));
             }
           }
 
@@ -51369,14 +51327,14 @@
             const start = referenceFrame.start;
             const end = start + referenceFrame.toBP($$1(visibleViewport.contentDiv).width());
 
-            if (visibleViewport.tile && visibleViewport.tile.features) {
-              if (typeof visibleViewport.tile.features.getMax === 'function') {
-                const max = visibleViewport.tile.features.getMax(start, end);
+            if (visibleViewport.featureCache && visibleViewport.featureCache.features) {
+              if (typeof visibleViewport.featureCache.features.getMax === 'function') {
+                const max = visibleViewport.featureCache.features.getMax(start, end);
                 allFeatures.push({
                   value: max
                 });
               } else {
-                allFeatures = allFeatures.concat(FeatureUtils.findOverlapping(visibleViewport.tile.features, start, end));
+                allFeatures = allFeatures.concat(FeatureUtils.findOverlapping(visibleViewport.featureCache.features, start, end));
               }
             }
           }
@@ -51386,17 +51344,10 @@
           } else {
             this.track.dataRange = doAutoscale(allFeatures);
           }
-        } // Must repaint all viewports if autoscaling
-
+        }
 
-        if (!isDragging && (this.track.autoscale || this.track.autoscaleGroup)) {
-          for (let visibleViewport of visibleViewports) {
-            visibleViewport.repaint();
-          }
-        } else {
-          for (let vp of reloadableViewports) {
-            vp.repaint();
-          }
+        for (let vp of viewportsToRepaint) {
+          vp.repaint();
         }
 
         this.adjustTrackHeight(); // Repaint sample names last
@@ -51419,36 +51370,34 @@
         }
       }
       /**
-       * Return a promise to get all in-view features.  Used for group autoscaling.
+       * Return a promise to get all in-view features across all viewports.  Used for group autoscaling.
        */
 
 
-      async getInViewFeatures(force) {
+      async getInViewFeatures() {
         if (!(this.browser && this.browser.referenceFrameList)) {
           return [];
-        } // List of viewports that need reloading
-
+        }
 
-        const rpV = this.viewportsToReload(force);
-        const promises = rpV.map(function (vp) {
-          return vp.loadFeatures();
-        });
-        await Promise.all(promises);
         let allFeatures = [];
 
         for (let vp of this.viewports) {
-          if (vp.tile && vp.tile.features) {
+          if (vp.needsReload()) {
+            await vp.loadFeatures();
+          }
+
+          if (vp.featureCache && vp.featureCache.features) {
             const referenceFrame = vp.referenceFrame;
             const start = referenceFrame.start;
             const end = start + referenceFrame.toBP($$1(vp.contentDiv).width());
 
-            if (typeof vp.tile.features.getMax === 'function') {
-              const max = vp.tile.features.getMax(start, end);
+            if (typeof vp.featureCache.features.getMax === 'function') {
+              const max = vp.featureCache.features.getMax(start, end);
               allFeatures.push({
                 value: max
               });
             } else {
-              allFeatures = allFeatures.concat(FeatureUtils.findOverlapping(vp.tile.features, start, end));
+              allFeatures = allFeatures.concat(FeatureUtils.findOverlapping(vp.featureCache.features, start, end));
             }
           }
         }
@@ -51490,27 +51439,6 @@
         }
       }
 
-      viewportsToReload(force) {
-        // List of viewports that need reloading
-        const viewports = this.viewports.filter(viewport => {
-          if (!viewport.isVisible()) {
-            return false;
-          }
-
-          if (!viewport.checkZoomIn()) {
-            return false;
-          } else {
-            const referenceFrame = viewport.referenceFrame;
-            const chr = viewport.referenceFrame.chr;
-            const start = referenceFrame.start;
-            const end = start + referenceFrame.toBP($$1(viewport.contentDiv).width());
-            const bpPerPixel = referenceFrame.bpPerPixel;
-            return force || !viewport.tile || viewport.tile.invalidate || !viewport.tile.containsRange(chr, start, end, bpPerPixel);
-          }
-        });
-        return viewports;
-      }
-
       createTrackScrollbar(browser) {
         const outerScroll = div$1();
         browser.columnContainer.querySelector('.igv-scrollbar-column').appendChild(outerScroll);
@@ -51604,7 +51532,7 @@
       }
 
       addTrackDragMouseHandlers(browser) {
-        if ('ideogram' === this.track.type || 'ruler' === this.track.type) ; else {
+        if ('ideogram' === this.track.id || 'ruler' === this.track.id) ; else {
           let currentDragHandle = undefined; // Mouse Down
 
           this.boundTrackDragMouseDownHandler = trackDragMouseDownHandler.bind(this);
@@ -51668,7 +51596,7 @@
       }
 
       removeTrackDragMouseHandlers() {
-        if ('ideogram' === this.track.type || 'ruler' === this.track.type) ; else {
+        if ('ideogram' === this.track.id || 'ruler' === this.track.id) ; else {
           this.dragHandle.removeEventListener('mousedown', this.boundTrackDragMouseDownHandler);
           document.removeEventListener('mouseup', this.boundDocumentTrackDragMouseUpHandler);
           this.dragHandle.removeEventListener('mouseup', this.boundTrackDragMouseEnterHandler);
@@ -52563,7 +52491,7 @@
             });
           }
 
-          findUTRs(exons, feature.cdStart, feature.cdEnd);
+          findUTRs$1(exons, feature.cdStart, feature.cdEnd);
           feature.exons = exons;
         } // Optional extra columns
 
@@ -52668,7 +52596,7 @@
         });
       }
 
-      findUTRs(exons, cdStart, cdEnd);
+      findUTRs$1(exons, cdStart, cdEnd);
       feature.exons = exons;
       return feature;
     }
@@ -52710,7 +52638,7 @@
         });
       }
 
-      findUTRs(exons, cdStart, cdEnd);
+      findUTRs$1(exons, cdStart, cdEnd);
       feature.exons = exons;
       return feature;
     }
@@ -52751,12 +52679,12 @@
         });
       }
 
-      findUTRs(exons, cdStart, cdEnd);
+      findUTRs$1(exons, cdStart, cdEnd);
       feature.exons = exons;
       return feature;
     }
 
-    function findUTRs(exons, cdStart, cdEnd) {
+    function findUTRs$1(exons, cdStart, cdEnd) {
       for (let exon of exons) {
         const end = exon.end;
         const start = exon.start;
@@ -56315,7 +56243,7 @@
         this.genome = genome;
         this.sourceType = config.sourceType === undefined ? "file" : config.sourceType;
         this.maxWGCount = config.maxWGCount || DEFAULT_MAX_WG_COUNT;
-        const queryableFormats = new Set(["bigwig", "bw", "bigbed", "bb", "biginteract", "tdf"]);
+        const queryableFormats = new Set(["bigwig", "bw", "bigbed", "bb", "biginteract", "biggenepred", "bignarrowpeak", "tdf"]);
 
         if (config.features && Array.isArray(config.features)) {
           // Explicit array of features
@@ -56327,7 +56255,7 @@
           }
 
           this.queryable = false;
-          this.featureCache = new FeatureCache(features, genome);
+          this.featureCache = new FeatureCache$1(features, genome);
         } else if (config.reader) {
           // Explicit reader implementation
           this.reader = config.reader;
@@ -56498,13 +56426,13 @@
           } // Note - replacing previous cache with new one.  genomicInterval is optional (might be undefined => includes all features)
 
 
-          this.featureCache = new FeatureCache(features, this.genome, genomicInterval); // If track is marked "searchable"< cache features by name -- use this with caution, memory intensive
+          this.featureCache = new FeatureCache$1(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([], genomicInterval); // Empty cache
+          this.featureCache = new FeatureCache$1([], genomicInterval); // Empty cache
         }
       }
 
@@ -56726,10 +56654,8 @@
 
     }
 
-    //table chromatinInteract
-
     function getDecoder(definedFieldCount, fieldCount, autoSql, format) {
-      if (autoSql && 'chromatinInteract' === autoSql.table || "biginteract" === format) {
+      if ("biginteract" === format || autoSql && 'chromatinInteract' === autoSql.table || 'interact' === autoSql.table) {
         return decodeInteract;
       } else {
         const standardFieldCount = definedFieldCount - 3;
@@ -56776,6 +56702,7 @@
               });
             }
 
+            findUTRs(exons, feature.cdStart, feature.cdEnd);
             feature.exons = exons;
           }
 
@@ -56792,7 +56719,29 @@
             }
           }
         };
-      }
+      } //table chromatinInteract
+      // "Chromatin interaction between two regions"
+      //     (
+      //     string chrom;      "Chromosome (or contig, scaffold, etc.). For interchromosomal, use 2 records"
+      //     uint chromStart;   "Start position of lower region. For interchromosomal, set to chromStart of this region"
+      //     uint chromEnd;     "End position of upper region. For interchromosomal, set to chromEnd of this region"
+      //     string name;       "Name of item, for display"
+      //     uint score;        "Score from 0-1000"
+      //     double value;      "Strength of interaction or other data value. Typically basis for score"
+      //     string exp;        "Experiment name (metadata for filtering). Use . if not applicable"
+      //     string color;      "Item color.  Specified as r,g,b or hexadecimal #RRGGBB or html color name, as in //www.w3.org/TR/css3-color/#html4."
+      //     string region1Chrom;  "Chromosome of lower region. For non-directional interchromosomal, chrom of this region."
+      //     uint region1Start;  "Start position of lower/this region"
+      //     uint region1End;    "End position in chromosome of lower/this region"
+      //     string region1Name;  "Identifier of lower/this region"
+      //     string region1Strand; "Orientation of lower/this region: + or -.  Use . if not applicable"
+      //     string region2Chrom; "Chromosome of upper region. For non-directional interchromosomal, chrom of other region"
+      //     uint region2Start;  "Start position in chromosome of upper/this region"
+      //     uint region2End;    "End position in chromosome of upper/this region"
+      //     string region2Name; "Identifier of upper/this region"
+      //     string region2Strand; "Orientation of upper/this region: + or -.  Use . if not applicable"
+      //     )
+
 
       function decodeInteract(feature, tokens) {
         feature.chr1 = tokens[5];
@@ -56809,6 +56758,25 @@
       }
     }
 
+    function findUTRs(exons, cdStart, cdEnd) {
+      for (let exon of exons) {
+        const end = exon.end;
+        const start = exon.start;
+
+        if (end < cdStart || start > cdEnd) {
+          exon.utr = true;
+        } else {
+          if (cdStart >= start && cdStart <= end) {
+            exon.cdStart = cdStart;
+          }
+
+          if (cdEnd >= start && cdEnd <= end) {
+            exon.cdEnd = cdEnd;
+          }
+        }
+      }
+    }
+
     function scoreShade(score, color) {
       const alpha = Math.min(1, 0.11 + 0.89 * (score / 779));
       return alpha.toString();
@@ -58254,7 +58222,7 @@
         return features;
       }
 
-      supportsWholeGenome() {
+      get supportsWholeGenome() {
         return true;
       }
 
@@ -58359,11 +58327,12 @@
      * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
      * THE SOFTWARE.
      */
+    const bbFormats = new Set(['bigwig', 'bw', 'bigbed', 'bb', 'biginteract', 'biggenepred', 'bignarrowpeak']);
 
     function FeatureSource(config, genome) {
       const format = config.format ? config.format.toLowerCase() : undefined;
 
-      if ('bigwig' === format || 'bigbed' === format || 'bb' === format || "biginteract" === format) {
+      if (bbFormats.has(format)) {
         return new BWSource(config, genome);
       } else if ("tdf" === format) {
         return new TDFSource(config, genome);
@@ -58372,30 +58341,6 @@
       }
     }
 
-    const pairs = [['A', 'T'], ['G', 'C'], ['Y', 'R'], ['W', 'S'], ['K', 'M'], ['D', 'H'], ['B', 'V']];
-    const complements = new Map();
-
-    for (let p of pairs) {
-      const p1 = p[0];
-      const p2 = p[1];
-      complements.set(p1, p2);
-      complements.set(p2, p1);
-      complements.set(p1.toLowerCase(), p2.toLowerCase());
-      complements.set(p2.toLowerCase(), p1.toLowerCase());
-    }
-
-    function reverseComplementSequence(sequence) {
-      let comp = '';
-      let idx = sequence.length;
-
-      while (idx-- > 0) {
-        const base = sequence[idx];
-        comp += complements.has(base) ? complements.get(base) : base;
-      }
-
-      return comp;
-    }
-
     const GtexUtils = {
       getTissueInfo: function (datasetId, baseURL) {
         datasetId = datasetId || 'gtex_v8';
@@ -58636,8 +58581,8 @@
         const xleft = centerX - textBox.width / 2;
         const xright = centerX + textBox.width / 2;
 
-        if (options.labelAllFeatures || xleft > options.rowLastX[feature.row] || gtexSelection) {
-          options.rowLastX[feature.row] = xright;
+        if (options.labelAllFeatures || xleft > options.rowLastLabelX[feature.row] || gtexSelection) {
+          options.rowLastLabelX[feature.row] = xright;
           IGVGraphics.fillText(ctx, name, centerX, labelY, geneFontStyle, transform);
         }
       } finally {
@@ -58918,7 +58863,7 @@
         return this;
       }
 
-      supportsWholeGenome() {
+      get supportsWholeGenome() {
         return (this.config.indexed === false || !this.config.indexURL) && this.config.supportsWholeGenome !== false;
       }
 
@@ -58977,27 +58922,31 @@
         if (featureList) {
           const rowFeatureCount = [];
           options.rowLastX = [];
+          options.rowLastLabelX = [];
 
           for (let feature of featureList) {
-            const row = feature.row || 0;
+            if (feature.start > bpStart && feature.end < bpEnd) {
+              const row = this.displayMode === "COLLAPSED" ? 0 : feature.row || 0;
 
-            if (rowFeatureCount[row] === undefined) {
-              rowFeatureCount[row] = 1;
-            } else {
-              rowFeatureCount[row]++;
-            }
+              if (rowFeatureCount[row] === undefined) {
+                rowFeatureCount[row] = 1;
+              } else {
+                rowFeatureCount[row]++;
+              }
 
-            options.rowLastX[row] = -Number.MAX_SAFE_INTEGER;
+              options.rowLastX[row] = -Number.MAX_SAFE_INTEGER;
+              options.rowLastLabelX[row] = -Number.MAX_SAFE_INTEGER;
+            }
           }
 
+          const pixelsPerFeature = pixelWidth / Math.max(...rowFeatureCount);
           let lastPxEnd = [];
 
           for (let feature of featureList) {
             if (feature.end < bpStart) continue;
             if (feature.start > bpEnd) break;
             const row = this.displayMode === 'COLLAPSED' ? 0 : feature.row;
-            const featureDensity = pixelWidth / rowFeatureCount[row];
-            options.drawLabel = options.labelAllFeatures || featureDensity > 10;
+            options.drawLabel = options.labelAllFeatures || pixelsPerFeature > 10;
             const pxEnd = Math.ceil((feature.end - bpStart) / bpPerPixel);
             const last = lastPxEnd[row];
 
@@ -59071,15 +59020,9 @@
             for (let fd of featureData) {
               data.push(fd);
 
-              if (infoURL) {
-                if (fd.name && fd.name.toLowerCase() === "name" && fd.value && isString$3(fd.value) && !fd.value.startsWith("<")) {
-                  const url = this.infoURL || this.config.infoURL;
-                  const href = url.replace("$$", feature.name);
-                  data.push({
-                    name: "Info",
-                    value: `<a target="_blank" href=${href}>${fd.value}</a>`
-                  });
-                }
+              if (infoURL && fd.name && fd.name.toLowerCase() === "name" && fd.value && isString$3(fd.value) && !fd.value.startsWith("<")) {
+                const href = infoURL.replace("$$", feature.name);
+                fd.value = `<a target=_blank href=${href}>${fd.value}</a>`;
               }
             } //Array.prototype.push.apply(data, featureData);
             // If we have clicked over an exon number it.
@@ -59153,17 +59096,31 @@
       }
 
       contextMenuItemList(clickState) {
-        if (isSecureContext()) {
-          const features = this.clickedFeatures(clickState);
+        const features = this.clickedFeatures(clickState);
 
-          if (features.length > 1) {
-            features.sort((a, b) => a.end - a.start - (b.end - b.start));
-          }
+        if (features.length > 1) {
+          features.sort((a, b) => b.end - b.start - (a.end - a.start));
+        }
+
+        const f = features[0]; // The shortest clicked feature
+
+        if (f.end - f.start <= 1000000) {
+          const list = [{
+            label: 'View feature sequence',
+            click: async () => {
+              let seq = await this.browser.genome.getSequence(f.chr, f.start, f.end);
 
-          const f = features[0]; // The longest feature
+              if (f.strand === '-') {
+                seq = reverseComplementSequence(seq);
+              }
+
+              if (!seq) seq = "Unknown sequence";
+              Alert.presentAlert(seq);
+            }
+          }];
 
-          if (f.end - f.start <= 1000000) {
-            return [{
+          if (isSecureContext() && navigator.clipboard !== undefined) {
+            list.push({
               label: 'Copy feature sequence',
               click: async () => {
                 let seq = await this.browser.genome.getSequence(f.chr, f.start, f.end);
@@ -59172,14 +59129,21 @@
                   seq = reverseComplementSequence(seq);
                 }
 
-                navigator.clipboard.writeText(seq);
+                try {
+                  await navigator.clipboard.writeText(seq);
+                } catch (e) {
+                  console.error(e);
+                  Alert.presentAlert(`error copying sequence to clipboard ${e}`);
+                }
               }
-            }, '<hr/>'];
+            });
           }
-        } // Either not a secure context (i.e. http: protocol), or feature is too long
 
-
-        return undefined;
+          list.push('<hr/>');
+          return list;
+        } else {
+          return undefined;
+        }
       }
 
       description() {
@@ -59275,14 +59239,12 @@
         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);
@@ -59520,7 +59482,7 @@
         }
       }
 
-      supportsWholeGenome() {
+      get supportsWholeGenome() {
         return !this.config.indexURL && this.config.supportsWholeGenome !== false;
       }
       /**
@@ -60059,7 +60021,7 @@
 
         const sortHandler = sort => {
           const viewport = clickState.viewport;
-          const features = viewport.getCachedFeatures();
+          const features = viewport.cachedFeatures;
           this.sortSamples(sort.chr, sort.start, sort.end, sort.direction, features);
         };
 
@@ -60079,7 +60041,7 @@
         }];
       }
 
-      supportsWholeGenome() {
+      get supportsWholeGenome() {
         return (this.config.indexed === false || !this.config.indexURL) && this.config.supportsWholeGenome !== false;
       }
 
@@ -60165,10 +60127,16 @@
      * 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) {
@@ -60179,21 +60147,6 @@
         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 = [];
@@ -60215,45 +60168,83 @@
           }
         }
 
-        this.height = this.config.height || 100;
+        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;
         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) {
-        var i, len, mergedFeatures, trackOptions, dataRange;
-        mergedFeatures = options.features; // Array of feature arrays, 1 for each track
+        const mergedFeatures = options.features; // Array of feature arrays, 1 for each track
 
-        dataRange = autoscale(options.referenceFrame.chr, mergedFeatures); //IGVGraphics.fillRect(options.context, 0, options.pixelTop, options.pixelWidth, options.pixelHeight, {'fillStyle': "rgb(255, 255, 255)"});
+        if (this.autoscale) {
+          this.dataRange = autoscale(options.referenceFrame.chr, mergedFeatures);
+        }
 
-        for (i = 0, len = this.tracks.length; i < len; i++) {
-          trackOptions = Object.assign({}, options);
+        for (let i = 0, len = this.tracks.length; i < len; i++) {
+          const trackOptions = Object.assign({}, options);
           trackOptions.features = mergedFeatures[i];
-          this.tracks[i].dataRange = dataRange;
+          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].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.getCachedFeatures();
+        const featuresArray = features || clickState.viewport.cachedFeatures;
 
         if (featuresArray && featuresArray.length === this.tracks.length) {
           // Array of feature arrays, 1 for each track
@@ -60270,40 +60261,24 @@
         }
       }
 
-      supportsWholeGenome() {
-        const b = this.tracks.every(track => track.supportsWholeGenome());
-        return b;
+      get supportsWholeGenome() {
+        return this.tracks.every(track => track.supportsWholeGenome());
       }
 
     }
 
     function autoscale(chr, featureArrays) {
-      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 {
+      let min = 0;
+      let max = -Number.MAX_VALUE;
 
-      featureArrays.forEach(function (features, i) {
-        features.forEach(function (f) {
+      for (let features of featureArrays) {
+        for (let f of features) {
           if (typeof f.value !== 'undefined' && !Number.isNaN(f.value)) {
             min = Math.min(min, f.value);
             max = Math.max(max, f.value);
           }
-        });
-      }); //  }
+        }
+      }
 
       return {
         min: min,
@@ -60424,7 +60399,7 @@
         return this;
       }
 
-      supportsWholeGenome() {
+      get supportsWholeGenome() {
         return true;
       }
 
@@ -60845,7 +60820,7 @@
           items = items.concat(MenuUtils.numericDataMenuItems(this.trackView));
         }
 
-        if (this.browser.circularView && true === this.browser.circularViewVisible) {
+        if (this.browser.circularView) {
           items.push('<hr/>');
           items.push({
             label: 'Add interactions to circular view',
@@ -60862,7 +60837,7 @@
 
       contextMenuItemList(clickState) {
         // Experimental JBrowse feature
-        if (this.browser.circularView && true === this.browser.circularViewVisible) {
+        if (this.browser.circularView) {
           const viewport = clickState.viewport;
           const list = [];
           list.push({
@@ -60887,20 +60862,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) erturn;
-        this.browser.circularViewVisible = true;
-        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
-        });
+        if (inView.length === 0) return;
+        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})
       }
 
       doAutoscale(features) {
@@ -60987,7 +60962,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.getCachedFeatures();
+        const featureList = features || clickState.viewport.cachedFeatures;
         const candidates = [];
 
         if (featureList) {
@@ -61358,7 +61333,7 @@
         return this;
       }
 
-      supportsWholeGenome() {
+      get supportsWholeGenome() {
         return this.config.indexed === false || this.config.supportsWholeGenome === true;
       }
 
@@ -61573,7 +61548,7 @@
             variantColor = "gray";
           }
         } else if (this._color) {
-          variantColor = typeof this._color === "function" ? this._color(v) : this._color;
+          variantColor = this.color;
         } else if ("NONVARIANT" === v.type) {
           variantColor = this.nonRefColor;
         } else if ("MIXED" === v.type) {
@@ -61585,6 +61560,10 @@
         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;
@@ -61845,29 +61824,15 @@
         } // Experimental JBrowse circular view integration
 
 
-        if (this.browser.circularView && true === this.browser.circularViewVisible) {
+        if (this.browser.circularView) {
           menuItems.push('<hr>');
           menuItems.push({
             label: 'Add SVs to circular view',
             click: () => {
-              const inView = [];
 
               for (let viewport of this.trackView.viewports) {
-                const refFrame = viewport.referenceFrame;
-
-                for (let f of viewport.getCachedFeatures()) {
-                  if (f.end >= refFrame.start && f.start <= refFrame.end) {
-                    inView.push(f);
-                  }
-                }
+                this.sendChordsForViewport(viewport);
               }
-
-              const chords = makeVCFChords(inView);
-              const color = IGVColor.addAlpha(this._color || this.defaultColor, 0.5);
-              this.browser.circularView.addChords(chords, {
-                track: this.name,
-                color: color
-              });
             }
           });
         }
@@ -61877,26 +61842,26 @@
 
       contextMenuItemList(clickState) {
         // Experimental JBrowse circular view integration
-        if (this.browser.circularView && true === this.browser.circularViewVisible) {
+        if (this.browser.circularView) {
           const viewport = clickState.viewport;
           const list = [];
           list.push({
             label: 'Add SVs to Circular View',
             click: () => {
-              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
-              });
+              this.sendChordsForViewport(viewport);
             }
           });
           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 +62164,7 @@
 
 
       popupData(clickState) {
-        let features = clickState.viewport.getCachedFeatures();
+        let features = clickState.viewport.cachedFeatures;
         if (!features || features.length === 0) return [];
         const tolerance = 3;
         const tissue = this.name;
@@ -62407,7 +62372,7 @@
         return this;
       }
 
-      supportsWholeGenome() {
+      get supportsWholeGenome() {
         return true;
       }
 
@@ -62545,7 +62510,7 @@
       popupData(clickState) {
         let data = [];
         const track = clickState.viewport.trackView.track;
-        const features = clickState.viewport.getCachedFeatures();
+        const features = clickState.viewport.cachedFeatures;
 
         if (features) {
           let count = 0;
@@ -62973,7 +62938,7 @@
         return items;
       }
 
-      supportsWholeGenome() {
+      get supportsWholeGenome() {
         return false;
       }
 
@@ -63234,7 +63199,7 @@
         if (!this.featureCache) {
           const options = buildOptions(this.config);
           const data = await igvxhr.loadString(this.config.url, options);
-          this.featureCache = new FeatureCache(parseBP(data), genome);
+          this.featureCache = new FeatureCache$1(parseBP(data), genome);
           return this.featureCache.queryFeatures(chr, start, end);
         } else {
           return this.featureCache.queryFeatures(chr, start, end);
@@ -63334,12 +63299,15 @@
      * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
      * THE SOFTWARE.
      */
+    /**
+     * Class represents an ideogram of a chromsome cytobands.  It is used for the header of a track panel.
+     *
+     */
 
     class IdeogramTrack {
       constructor(browser) {
         this.browser = browser;
         this.type = 'ideogram';
-        this.id = this.type;
         this.height = 16;
         this.order = Number.MIN_SAFE_INTEGER;
         this.disableButtons = true;
@@ -63599,7 +63567,7 @@
         return this;
       }
 
-      supportsWholeGenome() {
+      get supportsWholeGenome() {
         return false;
       }
 
@@ -64477,6 +64445,15 @@
         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;
       }
@@ -64561,7 +64538,7 @@
         const viewChanged = start !== this.start || bpPerPixel !== this.bpPerPixel;
 
         if (viewChanged) {
-          await browser.updateViews(this);
+          await browser.updateViews(true);
         }
       }
 
@@ -64631,23 +64608,6 @@
       });
     }
 
-    function adjustReferenceFrame(scaleFactor, referenceFrame, viewportWidth, alignmentStart, alignmentLength) {
-      referenceFrame.bpPerPixel *= scaleFactor;
-      const alignmentEE = alignmentStart + alignmentLength;
-      const alignmentCC = (alignmentStart + alignmentEE) / 2;
-      referenceFrame.start = alignmentCC - referenceFrame.bpPerPixel * (viewportWidth / 2);
-      referenceFrame.end = referenceFrame.start + referenceFrame.bpPerPixel * viewportWidth;
-      referenceFrame.locusSearchString = referenceFrame.getLocusString();
-    }
-
-    function createReferenceFrameWithAlignment(genome, chromosomeName, bpp, viewportWidth, alignmentStart, alignmentLength) {
-      const alignmentEE = alignmentStart + alignmentLength;
-      const alignmentCC = (alignmentStart + alignmentEE) / 2;
-      const ss = alignmentCC - bpp * (viewportWidth / 2);
-      const ee = ss + bpp * viewportWidth;
-      return new ReferenceFrame(genome, chromosomeName, ss, ee, bpp);
-    }
-
     const defaultNucleotideColors = {
       "A": "rgb(  0, 200,   0)",
       "C": "rgb(  0,0,200)",
@@ -65489,7 +65449,7 @@
             }
           }
 
-          browser.resize();
+          browser.layoutChange();
         });
       }
 
@@ -65694,6 +65654,65 @@
       button.addEventListener('click', () => browser.saveSVGtoFile({}));
     };
 
+    const viewportColumnManager = {
+      createColumns: (columnContainer, count) => {
+        for (let i = 0; i < count; i++) {
+          if (0 === i) {
+            createColumn(columnContainer, 'igv-column');
+          } else {
+            columnContainer.appendChild(div$1({
+              class: 'igv-column-shim'
+            }));
+            createColumn(columnContainer, 'igv-column');
+          }
+        }
+      },
+      removeColumnAtIndex: (i, column) => {
+        const shim = 0 === i ? column.nextElementSibling : column.previousElementSibling;
+        column.remove();
+        shim.remove();
+      },
+      insertAfter: referenceElement => {
+        const shim = div$1({
+          class: 'igv-column-shim'
+        });
+        insertElementAfter(shim, referenceElement);
+        const column = div$1({
+          class: 'igv-column'
+        });
+        insertElementAfter(column, shim);
+        return column;
+      },
+      insertBefore: (referenceElement, count) => {
+        for (let i = 0; i < count; i++) {
+          const column = div$1({
+            class: 'igv-column'
+          });
+          insertElementBefore(column, referenceElement);
+
+          if (count > 1 && i > 0) {
+            const columnShim = div$1({
+              class: 'igv-column-shim'
+            });
+            insertElementBefore(columnShim, column);
+          }
+        }
+      },
+      indexOfColumn: (columnContainer, column) => {
+        const allColumns = columnContainer.querySelectorAll('.igv-column');
+
+        for (let i = 0; i < allColumns.length; i++) {
+          const c = allColumns[i];
+
+          if (c === column) {
+            return i;
+          }
+        }
+
+        return undefined;
+      }
+    };
+
     /*
      * The MIT License (MIT)
      *
@@ -65944,7 +65963,7 @@
         }
       }
 
-      supportsWholeGenome() {
+      get supportsWholeGenome() {
         return true;
       }
 
@@ -66476,7 +66495,9 @@
         // deferred because ideogram and ruler are treated as "tracks", and tracks require a reference frame
 
         if (false !== session.showIdeogram) {
-          this.trackViews.push(new TrackView(this, this.columnContainer, new IdeogramTrack(this)));
+          const ideogramTrack = new IdeogramTrack(this);
+          ideogramTrack.id = 'ideogram';
+          this.trackViews.push(new TrackView(this, this.columnContainer, ideogramTrack));
         }
 
         if (false !== session.showRuler) {
@@ -66526,7 +66547,12 @@
           }
         }
 
-        await this.loadTrackList(trackConfigurations);
+        await this.loadTrackList(trackConfigurations); // The ruler and ideogram tracks are not explicitly loaded, but needs updated nonetheless.
+
+        for (let rtv of this.trackViews.filter(tv => tv.track.type === 'ruler' || tv.track.type === 'ideogram')) {
+          rtv.updateViews();
+        }
+
         this.updateUIWithReferenceFrameList();
       }
 
@@ -66691,26 +66717,22 @@
       }
 
       async loadTrackList(configList) {
-        try {
-          const promises = [];
-
-          for (let config of configList) {
-            promises.push(this.loadTrack(config, false));
-          }
+        const promises = [];
 
-          const loadedTracks = await Promise.all(promises);
-          const groupAutoscaleViews = this.trackViews.filter(function (trackView) {
-            return trackView.track.autoscaleGroup;
-          });
+        for (let config of configList) {
+          promises.push(this.loadTrack(config));
+        }
 
-          if (groupAutoscaleViews.length > 0) {
-            this.updateViews(groupAutoscaleViews);
-          }
+        const loadedTracks = await Promise.all(promises);
+        const groupAutoscaleViews = this.trackViews.filter(function (trackView) {
+          return trackView.track.autoscaleGroup;
+        });
 
-          return loadedTracks;
-        } finally {
-          await this.resize();
+        if (groupAutoscaleViews.length > 0) {
+          this.updateViews();
         }
+
+        return loadedTracks;
       }
 
       async loadROI(config) {
@@ -66724,7 +66746,9 @@
           }
         } 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);
       }
@@ -66738,7 +66762,7 @@
         }
 
         for (let tv of this.trackViews) {
-          tv.updateViews(true);
+          tv.repaintViews();
         }
       }
 
@@ -66746,7 +66770,7 @@
         this.roi = [];
 
         for (let tv of this.trackViews) {
-          tv.updateViews(true);
+          tv.repaintViews();
         }
       }
 
@@ -66762,25 +66786,13 @@
       /**
        * 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, doResize) {
+      async loadTrack(config) {
         // config might be json
         if (isString$3(config)) {
           config = JSON.parse(config);
@@ -66845,11 +66857,6 @@
 
           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();
-          }
         }
       }
       /**
@@ -67065,8 +67072,18 @@
           trackView.setTrackHeight(newHeight);
         });
       }
+      /**
+       * API function to signal that this browser visibility has changed, e.g. from hiding/showing in a tab interface.
+       *
+       * @returns {Promise<void>}
+       */
+
 
       async visibilityChange() {
+        this.layoutChange();
+      }
+
+      async layoutChange() {
         const status = this.referenceFrameList.find(referenceFrame => referenceFrame.bpPerPixel < 0);
 
         if (status) {
@@ -67082,43 +67099,11 @@
           this.navbarManager.navbarDidResize(this.$navigation.width(), isWGV);
         }
 
-        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();
+        resize.call(this);
+        await this.updateViews();
       }
 
-      async updateViews(force) {
+      async updateViews() {
         const trackViews = this.trackViews;
         this.updateLocusSearchWidget();
 
@@ -67129,7 +67114,7 @@
 
         if (this.dragObject) {
           for (let trackView of trackViews) {
-            await trackView.updateViews(force);
+            await trackView.updateViews();
           }
         } else {
           // Group autoscale
@@ -67178,19 +67163,25 @@
               for (let trackView of groupTrackViews) {
                 trackView.track.dataRange = dataRange;
                 trackView.track.autoscale = false;
-                p.push(trackView.updateViews(force));
+                p.push(trackView.updateViews());
               }
 
               await Promise.all(p);
             }
           }
 
-          await Promise.all(otherTracks.map(tv => tv.updateViews(force))); // for (let trackView of otherTracks) {
+          await Promise.all(otherTracks.map(tv => tv.updateViews())); // for (let trackView of otherTracks) {
           //     await trackView.updateViews(force);
           // }
         }
       }
 
+      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.
@@ -67248,41 +67239,53 @@
           referenceFrame.zoomWithScaleFactor(this, scaleFactor, viewportWidth, centerBPOrUndefined);
         }
       }
+      /**
+       * 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 presentMultiLocusPanel(alignment, referenceFrameLeft) {
+      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);
-        adjustReferenceFrame(scaleFactor, referenceFrameLeft, viewportWidth, alignment.start, alignment.lengthOnRef); // create right mate pair reference frame
 
-        const mateChrName = this.genome.getChromosomeName(alignment.mate.chr);
-        const referenceFrameRight = createReferenceFrameWithAlignment(this.genome, mateChrName, referenceFrameLeft.bpPerPixel, viewportWidth, alignment.mate.position, alignment.lengthOnRef); // add right mate panel beside left mate panel
+        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 indexLeft = this.referenceFrameList.indexOf(referenceFrameLeft);
-        const indexRight = 1 + this.referenceFrameList.indexOf(referenceFrameLeft);
         const {
           $viewport
         } = this.trackViews[0].viewports[indexLeft];
         const viewportColumn = viewportColumnManager.insertAfter($viewport.get(0).parentElement);
 
         if (indexRight === this.referenceFrameList.length) {
-          this.referenceFrameList.push(referenceFrameRight);
+          this.referenceFrameList.push(newReferenceFrame);
 
           for (let trackView of this.trackViews) {
-            const viewport = createViewport(trackView, viewportColumn, referenceFrameRight);
+            const viewport = createViewport(trackView, viewportColumn, newReferenceFrame);
             trackView.viewports.push(viewport);
           }
         } else {
-          this.referenceFrameList.splice(indexRight, 0, referenceFrameRight);
+          this.referenceFrameList.splice(indexRight, 0, newReferenceFrame);
 
           for (let trackView of this.trackViews) {
-            const viewport = createViewport(trackView, viewportColumn, referenceFrameRight);
+            const viewport = createViewport(trackView, viewportColumn, newReferenceFrame);
             trackView.viewports.splice(indexRight, 0, viewport);
           }
         }
 
         this.centerLineList = this.createCenterLineList(this.columnContainer);
-        await this.resize();
+        resize.call(this);
+        await this.updateViews(true);
       }
 
       async removeMultiLocusPanel(referenceFrame) {
@@ -67311,8 +67314,15 @@
         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 selectMultiLocusPanel(referenceFrame) {
+      async gotoMultilocusPanel(referenceFrame) {
         const referenceFrameIndex = this.referenceFrameList.indexOf(referenceFrame); // Remove columns for unselected panels
 
         this.columnContainer.querySelectorAll('.igv-column').forEach((column, c) => {
@@ -67360,7 +67370,7 @@
 
         this.centerLineList = this.createCenterLineList(this.columnContainer);
         this.updateUIWithReferenceFrameList();
-        await this.updateViews(true);
+        await this.updateViews();
       }
       /**
        * @deprecated  This is a deprecated method with no known usages.  To be removed in a future release.
@@ -67613,20 +67623,6 @@
         const surl = (idx > 0 ? path.substring(0, idx) : path) + "?sessionURL=blob:" + this.compressedSession();
         return surl;
       }
-
-      currentLoci() {
-        const loci = [];
-        const anyTrackView = this.trackViews[0];
-
-        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
        * (panning) is handled here so that the mouse can move out of a specific viewport (e.g. stray into another
@@ -67661,10 +67657,22 @@
           this.fireEvent('trackdragend');
         }
       }
+      /**
+       * Track drag here refers to vertical dragging to reorder tracks, not horizontal panning.
+       *
+       * @param trackView
+       */
+
 
       startTrackDrag(trackView) {
         this.dragTrack = trackView;
       }
+      /**
+       * Track drag here refers to vertical dragging to reorder tracks, not horizontal panning.
+       *
+       * @param dragDestination
+       */
+
 
       updateTrackDrag(dragDestination) {
         if (dragDestination && this.dragTrack) {
@@ -67738,12 +67746,9 @@
       }
 
       addWindowResizeHandler() {
-        this.boundWindowResizeHandler = windowResizeHandler.bind(this);
+        // Create a copy of the prototype "resize" function bound to this instance.  Neccessary to support removing.
+        this.boundWindowResizeHandler = resize.bind(this);
         window.addEventListener('resize', this.boundWindowResizeHandler);
-
-        function windowResizeHandler() {
-          this.resize();
-        }
       }
 
       removeWindowResizeHandler() {
@@ -67815,6 +67820,8 @@
       }
 
       createCircularView(container, show) {
+        show = show === true; // convert undefined to boolean
+
         this.circularView = createCircularView(container, this);
         this.circularViewControl = new CircularViewControl(this.$toggle_button_container.get(0), this);
         this.circularView.setAssembly({
@@ -67822,7 +67829,8 @@
           id: this.genome.id,
           chromosomes: makeCircViewChromosomes(this.genome)
         });
-        this.circularViewVisible = show === true;
+        this.circularViewVisible = show;
+        return this.circularView;
       }
 
       get circularViewVisible() {
@@ -67837,6 +67845,48 @@
       }
 
     }
+    /**
+     * 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(); //TODO -- update view only if needed.  Reducing size never needed.  Increasing size maybe
+
+      await this.updateViews(true);
+    }
 
     function handleMouseMove(e) {
       e.preventDefault();