igv 2.11.2 → 2.12.0

package/dist/igv.esm.js

@@ -17624,7 +17624,7 @@ function Node(interval) {
  * @constructor
  */
 
-class FeatureCache {
+class FeatureCache$1 {
 
     constructor(featureList, genome, range) {
 
@@ -19854,6 +19854,7 @@ function inferTrackType(config) {
                 return "alignment"
             case "bedpe":
             case "bedpe-loop":
+            case "biginteract":
                 return "interact"
             case "bp":
                 return "arc"
@@ -19862,7 +19863,6 @@ function inferTrackType(config) {
             case "bed":
             case "bigbed":
             case "bb":
-            case "biginteract":
                 return "bedtype"
             default:
                 return "annotation"
@@ -20113,6 +20113,38 @@ function isSecureContext() {
     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)
  *
@@ -20237,7 +20269,6 @@ class SequenceTrack {
     }
 
     menuItemList() {
-
         return [
             {
                 name: this.reversed ? "Forward" : "Reverse",
@@ -20272,17 +20303,20 @@ class SequenceTrack {
     contextMenuItemList(clickState) {
         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);
                     }
                 }
             ];
@@ -20290,14 +20324,18 @@ class SequenceTrack {
                 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}`);
+                        }
                     }
+
                 });
             }
             items.push('<hr/>');
@@ -20441,7 +20479,7 @@ class SequenceTrack {
         }
     }
 
-    supportsWholeGenome() {
+    get supportsWholeGenome() {
         return false
     }
 
@@ -20515,13 +20553,13 @@ class Viewport {
         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.$canvas = $('<canvas>')
+        // this.$content.append(this.$canvas)
+        //
+        // this.canvas = this.$canvas.get(0)
+        // this.ctx = this.canvas.getContext("2d")
 
-        this.setWidth(width);
+        this.$viewport.width(width);
 
         this.initializationHelper();
 
@@ -20588,14 +20626,13 @@ class Viewport {
         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();
@@ -20611,12 +20648,10 @@ class Viewport {
     }
 
     setContentHeight(contentHeight) {
+
         // Maximum height of a canvas is ~32,000 pixels on Chrome, possibly smaller on other platforms
         contentHeight = Math.min(contentHeight, 32000);
-
         this.$content.height(contentHeight);
-
-        if (this.tile) this.tile.invalidate = true;
     }
 
     isLoading() {
@@ -20633,8 +20668,6 @@ class Viewport {
 
     setWidth(width) {
         this.$viewport.width(width);
-        this.canvas.style.width = (`${width}px`);
-        this.canvas.setAttribute('width', width);
     }
 
     getWidth() {
@@ -20664,8 +20697,6 @@ class Viewport {
             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
@@ -22761,7 +22792,7 @@ const Cytoband = function (start, end, name, typestain) {
     }
 };
 
-const _version = "2.11.2";
+const _version = "2.12.0";
 function version() {
     return _version
 }
@@ -23115,6 +23146,7 @@ class Genome {
     }
 
     async getSequence(chr, start, end) {
+        chr = this.getChromosomeName(chr);
         return this.sequence.getSequence(chr, start, end)
     }
 }
@@ -23250,28 +23282,27 @@ class TrackViewport extends Viewport {
         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);
-
             if (false === this.browser.trackLabelsVisible) {
                 this.$trackLabel.hide();
             }
-
         }
 
         this.stopSpinner();
-
         this.addMouseHandlers();
+    }
 
+    setContentHeight(contentHeight) {
+        super.setContentHeight(contentHeight);
+        if (this.featureCache) this.featureCache.redraw = true;
     }
 
     setTrackLabel(label) {
@@ -23293,61 +23324,74 @@ class TrackViewport extends Viewport {
         }
     }
 
+    /**
+     * 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()) {
+        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))
+                    (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;
-                }
-                this.$zoomInNotice.show();
 
-                if (this.trackView.track.autoHeight) {
-                    const minHeight = this.trackView.minHeight || 0;
-                    this.setContentHeight(minHeight);
-                }
+        if (zoomedOutOfWindow()) {
 
-                return false
-            } else {
+            // Out of visibility window
+            if (this.canvas) {
+                $$1(this.canvas).remove();
+                this.canvas = undefined;
+                //this.featureCache = undefined
+            }
+            if (this.trackView.track.autoHeight) {
+                const minHeight = this.trackView.minHeight || 0;
+                this.setContentHeight(minHeight);
+            }
+            if (this.$zoomInNotice) {
+                this.$zoomInNotice.show();
+            }
+            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;
-
-        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";
+        const referenceFrame = this.referenceFrame;
+        if (this.canvas &&
+            this.canvas._data &&
+            this.canvas._data.chr === this.referenceFrame.chr &&
+            this.canvas._data.bpPerPixel === referenceFrame.bpPerPixel) {
+            const pixelOffset = Math.round((this.canvas._data.startBP - referenceFrame.start) / referenceFrame.bpPerPixel);
+            this.canvas.style.left = pixelOffset + "px";
         }
     }
 
@@ -23370,22 +23414,23 @@ class TrackViewport extends Viewport {
         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) {
-                    const f = await
-                        r.getFeatures(chr, bpStart, bpEnd, referenceFrame.bpPerPixel);
+                    const f = await r.getFeatures(chr, bpStart, bpEnd, referenceFrame.bpPerPixel);
                     roiFeatures.push({track: r, features: f});
                 }
             }
 
-            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) {
@@ -23399,32 +23444,29 @@ class TrackViewport extends Viewport {
         }
     }
 
-    async repaint() {
+    /**
+     * Repaint the canvas using the cached features
+     *
+     */
+    repaint() {
 
-        if (undefined === this.tile) {
+        if (undefined === this.featureCache) {
             return
         }
 
-        let {features, roiFeatures, bpPerPixel, startBP, endBP} = this.tile;
+        let {features, 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);
-        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);
-        }
 
+        // 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) {
                 $$1(this.canvas).remove();
@@ -23433,30 +23475,25 @@ class TrackViewport extends Viewport {
         }
         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 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 =
@@ -23477,17 +23514,27 @@ class TrackViewport extends Viewport {
 
         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 }.`)
@@ -23504,60 +23551,6 @@ class TrackViewport extends Viewport {
         }
     }
 
-    // TODO: Nolonger used. Will discard
-    async toSVG(tile) {
-
-        // Nothing to do if zoomInNotice is active
-        if (this.$zoomInNotice && this.$zoomInNotice.is(":visible")) {
-            return
-        }
-
-        const referenceFrame = this.referenceFrame;
-        const bpPerPixel = tile.bpPerPixel;
-        const features = tile.features;
-        const roiFeatures = tile.roiFeatures;
-        const pixelWidth = this.$viewport.width();
-        const pixelHeight = this.$viewport.height();
-        const bpStart = referenceFrame.start;
-        const bpEnd = referenceFrame.start + pixelWidth * referenceFrame.bpPerPixel;
-
-        const ctx$1 = new ctx(
-            {
-                // svg
-                width: pixelWidth,
-                height: pixelHeight,
-                viewbox:
-                    {
-                        x: 0,
-                        y: -this.$content.position().top,
-                        width: pixelWidth,
-                        height: pixelHeight
-                    }
-
-            });
-
-        const drawConfiguration =
-            {
-                viewport: this,
-                context: ctx$1,
-                top: -this.$content.position().top,
-                pixelTop: 0,   // for compatibility with canvas draw
-                pixelWidth,
-                pixelHeight,
-                bpStart,
-                bpEnd,
-                bpPerPixel,
-                referenceFrame: this.referenceFrame,
-                selection: this.selection,
-                viewportWidth: pixelWidth,
-            };
-
-        this.draw(drawConfiguration, features, roiFeatures);
-
-        return ctx$1.getSerializedSvg(true)
-
-    }
-
     containsPosition(chr, position) {
         if (this.referenceFrame.chr === chr && position >= this.referenceFrame.start) {
             return position <= this.referenceFrame.calculateEnd(this.getWidth())
@@ -23570,18 +23563,20 @@ class TrackViewport extends Viewport {
         return this.loading
     }
 
-    saveImage() {
+    savePNG() {
 
-        if (!this.ctx) return
+        if (!this.canvas) return
 
-        const canvasTop = this.canvasVerticalRange ? this.canvasVerticalRange.top : 0;
+        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;
@@ -23704,32 +23699,53 @@ class TrackViewport extends Viewport {
                 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'});
@@ -23751,15 +23767,33 @@ class TrackViewport extends Viewport {
 
     addMouseHandlers() {
 
-        this.addViewportContextMenuHandler(this.$viewport.get(0));
-
-        this.addViewportMouseDownHandler(this.$viewport.get(0));
+        const viewport = this.$viewport.get(0);
 
-        this.addViewportTouchStartHandler(this.$viewport.get(0));
+        this.addViewportContextMenuHandler(viewport);
 
-        this.addViewportMouseUpHandler(this.$viewport.get(0));
+        const md = (event) => {
+            this.enableClick = true;
+            this.browser.mouseDownOnViewport(event, this);
+            pageCoordinates$1(event);
+        };
+        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();
+            }
+        };
 
-        this.addViewportTouchEndHandler(this.$viewport.get(0));
+        viewport.addEventListener('mouseup', mu);
+        viewport.addEventListener('touchend', mu);
 
         this.addViewportClickHandler(this.$viewport.get(0));
 
@@ -23769,32 +23803,9 @@ class TrackViewport extends Viewport {
 
     }
 
-    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));
-
-        if (this.trackView.track.name && "sequence" !== this.trackView.track.config.type) {
-            this.removeTrackLabelClickHandler(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) {
@@ -23827,56 +23838,14 @@ class TrackViewport extends Viewport {
             menuItems.push({label: 'Save Image (SVG)', 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) {
+        viewport.addEventListener('click', (event) => {
 
             if (this.enableClick) {
                 if (3 === event.which || event.ctrlKey) {
@@ -23961,21 +23930,12 @@ class TrackViewport extends Viewport {
                 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();
 
@@ -23995,48 +23955,18 @@ class TrackViewport extends Viewport {
                 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,
@@ -24097,22 +24027,30 @@ function formatPopoverText(nameValues) {
     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 {
 
-Tile.prototype.containsRange = function (chr, start, end, bpPerPixel) {
-    return this.bpPerPixel === bpPerPixel && start >= this.startBP && end <= this.endBP && chr === this.chr
-};
+    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.overlapsRange = function (chr, start, end) {
-    return this.chr === chr && end >= this.startBP && start <= this.endBP
-};
+    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
+    }
+
+    overlapsRange(chr, start, end) {
+        return this.chr === chr && end >= this.startBP && start <= this.endBP
+    }
+}
 
 
 /**
@@ -24277,11 +24215,13 @@ class RulerSweeper {
 
                     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);
+                    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(this.rulerViewport.referenceFrame);
+                    this.rulerViewport.browser.updateViews();
                 }
 
             }
@@ -24419,6 +24359,18 @@ class PairedAlignment {
         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()) {
@@ -24760,7 +24712,10 @@ function packAlignmentRows(alignments, start, end, showSoftClips) {
 
 
 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, {samplingWindowSize, samplingDepth, pairsSupported, alleleFreqThreshold}) {
 
         this.chr = chr;
         this.start = Math.floor(start);
@@ -24788,17 +24743,12 @@ class AlignmentContainer {
             return alignment.isMapped() && !alignment.isFailsVendorQualityCheck()
         };
 
-        this.pairedEndStats = new PairedEndStats();
     }
 
     push(alignment) {
 
         if (this.filter(alignment) === false) return
 
-        if (alignment.isPaired()) {
-            this.pairedEndStats.push(alignment);
-        }
-
         this.coverageMap.incCounts(alignment);   // Count coverage before any downsampling
 
         if (this.pairsSupported && this.downsampledReads.has(alignment.readName)) {
@@ -24830,8 +24780,6 @@ class AlignmentContainer {
 
         this.pairsCache = undefined;
         this.downsampledReads = undefined;
-
-        this.pairedEndStats.compute();
     }
 
     contains(chr, start, end) {
@@ -25142,69 +25090,6 @@ class DownsampledInterval {
     }
 }
 
-class PairedEndStats {
-
-    constructor(lowerPercentile, upperPercentile) {
-        this.totalCount = 0;
-        this.frCount = 0;
-        this.rfCount = 0;
-        this.ffCount = 0;
-        this.sumF = 0;
-        this.sumF2 = 0;
-        //this.lp = lowerPercentile === undefined ? 0.005 : lowerPercentile;
-        //this.up = upperPercentile === undefined ? 0.995 : upperPercentile;
-        //this.digest = new Digest();
-    }
-
-    push(alignment) {
-
-        if (alignment.isProperPair()) {
-
-            var fragmentLength = Math.abs(alignment.fragmentLength);
-            //this.digest.push(fragmentLength);
-            this.sumF += fragmentLength;
-            this.sumF2 += fragmentLength * fragmentLength;
-
-            var po = alignment.pairOrientation;
-
-            if (typeof po === "string" && po.length === 4) {
-                var tmp = '' + po.charAt(0) + po.charAt(2);
-                switch (tmp) {
-                    case 'FF':
-                    case 'RR':
-                        this.ffCount++;
-                        break
-                    case "FR":
-                        this.frCount++;
-                        break
-                    case"RF":
-                        this.rfCount++;
-                }
-            }
-            this.totalCount++;
-        }
-    }
-
-    compute() {
-
-        if (this.totalCount > 100) {
-            if (this.ffCount / this.totalCount > 0.9) this.orienation = "ff";
-            else if (this.frCount / this.totalCount > 0.9) this.orienation = "fr";
-            else if (this.rfCount / this.totalCount > 0.9) this.orienation = "rf";
-
-
-            var fMean = this.sumF / this.totalCount;
-            var stdDev = Math.sqrt((this.totalCount * this.sumF2 - this.sumF * this.sumF) / (this.totalCount * this.totalCount));
-            this.lowerFragmentLength = fMean - 3 * stdDev;
-            this.upperFragmentLength = fMean + 3 * stdDev;
-
-            //this.lowerFragmentLength = this.digest.percentile(this.lp);
-            //this.upperFragmentLength = this.digest.percentile(this.up);
-            //this.digest = undefined;
-        }
-    }
-}
-
 class SupplementaryAlignment {
 
     constructor(rec) {
@@ -25925,7 +25810,7 @@ const BamUtils = {
             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) {
@@ -25966,7 +25851,7 @@ const BamUtils = {
             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);
@@ -26394,7 +26279,7 @@ class BamReaderNonIndexed {
             const header = this.header;
             const queryChr = header.chrAliasTable.hasOwnProperty(chr) ? header.chrAliasTable[chr] : chr;
             const qAlignments = this.alignmentCache.queryFeatures(queryChr, bpStart, bpEnd);
-            const alignmentContainer = new AlignmentContainer(chr, bpStart, bpEnd, this.samplingWindowSize, this.samplingDepth, this.pairsSupported, this.alleleFreqThreshold);
+            const alignmentContainer = new AlignmentContainer(chr, bpStart, bpEnd, this.config);
             for (let a of qAlignments) {
                 alignmentContainer.push(a);
             }
@@ -26421,13 +26306,13 @@ class BamReaderNonIndexed {
         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);
         }
@@ -27418,9 +27303,7 @@ class BamReader {
         const chrToIndex = await this.getChrIndex();
         const queryChr = this.chrAliasTable.hasOwnProperty(chr) ? this.chrAliasTable[chr] : chr;
         const chrId = chrToIndex[queryChr];
-        const alignmentContainer = new AlignmentContainer(chr, bpStart, bpEnd,
-            this.config.samplingWindowSize, this.config.samplingDepth,
-            this.config.pairsSupported, this.config.alleleFreqThreshold);
+        const alignmentContainer = new AlignmentContainer(chr, bpStart, bpEnd, this.config);
 
         if (chrId === undefined) {
             return alignmentContainer
@@ -27552,7 +27435,7 @@ class ShardedBamReader {
     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];
@@ -27643,7 +27526,7 @@ BamWebserviceReader.prototype.readAlignments = function (chr, bpStart, bpEnd) {
 
                     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);
 
@@ -27897,7 +27780,7 @@ class HtsgetBamReader extends HtsgetReader {
         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();
 
@@ -28063,8 +27946,7 @@ class CramReader {
         const header = await this.getHeader();
         const queryChr = header.chrAliasTable.hasOwnProperty(chr) ? header.chrAliasTable[chr] : chr;
         const chrIdx = header.chrToIndex[queryChr];
-        const alignmentContainer = new AlignmentContainer(chr, bpStart, bpEnd,
-            this.samplingWindowSize, this.samplingDepth, this.pairsSupported, this.alleleFreqThreshold);
+        const alignmentContainer = new AlignmentContainer(chr, bpStart, bpEnd, this.config);
 
         if (chrIdx === undefined) {
             return alignmentContainer
@@ -28680,7 +28562,7 @@ Ga4ghAlignmentReader.prototype.readAlignments = function (chr, bpStart, bpEnd) {
                     "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)
             })
         })
 
@@ -29013,7 +28895,6 @@ class BamSource {
 
         this.config = config;
         this.genome = genome;
-        this.alignmentContainer = undefined;
 
         if (isDataURL(config.url)) {
             if ("cram" === config.format) {
@@ -29061,19 +28942,11 @@ class BamSource {
     }
 
     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) {
@@ -29081,33 +28954,28 @@ class BamSource {
         const genome = this.genome;
         const showSoftClips = this.showSoftClips;
 
-        if (this.alignmentContainer && this.alignmentContainer.contains(chr, bpStart, bpEnd)) {
-            return this.alignmentContainer
+        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);
 
-        } else {
-            const alignmentContainer = await this.bamReader.readAlignments(chr, bpStart, bpEnd);
-            let alignments = alignmentContainer.alignments;
-            if (!this.viewAsPairs) {
-                alignments = unpairAlignments([{alignments: alignments}]);
-            }
-            const hasAlignments = alignments.length > 0;
-            alignmentContainer.packedAlignmentRows = packAlignmentRows(alignments, alignmentContainer.start, alignmentContainer.end, showSoftClips);
-            alignmentContainer.alignments = undefined;  // Don't need to hold onto these anymore
-
-            this.alignmentContainer = alignmentContainer;
-
-            if (hasAlignments) {
-                const sequence = await genome.sequence.getSequence(chr, alignmentContainer.start, alignmentContainer.end);
-                if (sequence) {
-                    alignmentContainer.coverageMap.refSeq = sequence;    // TODO -- fix this
-                    alignmentContainer.sequence = sequence;           // TODO -- fix this
-                    return alignmentContainer
-                } else {
-                    console.error("No sequence for: " + chr + ":" + alignmentContainer.start + "-" + alignmentContainer.end);
-                }
+        this.alignmentContainer = alignmentContainer;
+
+        if (hasAlignments) {
+            const sequence = await genome.sequence.getSequence(chr, alignmentContainer.start, alignmentContainer.end);
+            if (sequence) {
+                alignmentContainer.coverageMap.refSeq = sequence;    // TODO -- fix this
+                alignmentContainer.sequence = sequence;           // TODO -- fix this
+                return alignmentContainer
+            } else {
+                console.error("No sequence for: " + chr + ":" + alignmentContainer.start + "-" + alignmentContainer.end);
             }
-            return alignmentContainer
         }
+        return alignmentContainer
+
     }
 }
 
@@ -29287,7 +29155,7 @@ class TrackBase {
         return state
     }
 
-    supportsWholeGenome() {
+    get supportsWholeGenome() {
         return false
     }
 
@@ -29425,7 +29293,7 @@ class TrackBase {
 
         // We use the cached features rather than method to avoid async load.  If the
         // feature is not already loaded this won't work,  but the user wouldn't be mousing over it either.
-        if (!features) features = clickState.viewport.getCachedFeatures();
+        if (!features) features = clickState.viewport.cachedFeatures;
 
         if (!features || features.length === 0) {
             return []
@@ -29929,8 +29797,7 @@ class Locus {
     }
 
     overlaps(locus) {
-        return locus.chr === this.chr
-            && !(locus.end < this.start || locus.start > this.end)
+        return locus.chr === this.chr && !(locus.end < this.start || locus.start > this.end)
     }
 
     extend(l) {
@@ -31807,6 +31674,22 @@ function makeCircViewChromosomes(genome) {
     return regions
 }
 
+function sendChords(chords, track, refFrame, alpha) {
+
+    const chordSetColor = IGVColor.addAlpha("all" === refFrame.chr ? track.color : getChrColor(refFrame.chr), alpha);
+    const trackColor = IGVColor.addAlpha(track.color || 'rgb(0,0,255)', alpha);
+
+    // name the chord set to include locus and filtering information
+    const encodedName = track.name.replaceAll(' ', '%20');
+    const chordSetName = "all" === refFrame.chr ? encodedName :
+        `${encodedName}  ${refFrame.chr}:${refFrame.start}-${refFrame.end}`;
+    track.browser.circularView.addChords(chords, {track: chordSetName, color: chordSetColor, trackColor: trackColor});
+
+    // show circular view if hidden
+    if(!track.browser.circularViewVisible) track.browser.circularViewVisible = true;
+
+}
+
 
 function createCircularView(el, browser) {
 
@@ -31816,42 +31699,105 @@ function createCircularView(el, browser) {
 
             const f1 = feature.data;
             const f2 = f1.mate;
-            const flanking = 2000;
+            addFrameForFeature(f1);
+            addFrameForFeature(f2);
 
-            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});
+            function addFrameForFeature(feature) {
 
-            let loci;
+                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
+                    }
+                }
+                if (!frameFound) {
+                    const flanking = 2000;
+                    const center = (feature.start + feature.end) / 2;
+                    browser.addMultiLocusPanel(feature.chr, center - flanking, center + flanking);
 
-            // If there is overlap with current loci
+                }
+            }
+        }
+    });
 
-            loci = browser.currentLoci().map(str => Locus.fromLocusString(str));
+    return circularView
+}
 
-            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);
+class PairedEndStats {
+
+    constructor(alignments, {minTLENPercentile, maxTLENPercentile}) {
+        this.totalCount = 0;
+        this.frCount = 0;
+        this.rfCount = 0;
+        this.ffCount = 0;
+        this.sumF = 0;
+        this.sumF2 = 0;
+        this.lp = minTLENPercentile === undefined ? 0.1 : minTLENPercentile;
+        this.up = maxTLENPercentile === undefined ? 99.5 : maxTLENPercentile;
+        this.isizes = [];
+        this.compute(alignments);
+    }
+
+    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++;
                     }
                 }
-            } 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];
+                this.totalCount++;
             }
-
-            const searchString = loci.map(l => l.getLocusString()).join(" ");
-            browser.search(searchString);
         }
+
+        if (this.ffCount / this.totalCount > 0.9) this.orienation = "ff";
+        else if (this.frCount / this.totalCount > 0.9) this.orienation = "fr";
+        else if (this.rfCount / this.totalCount > 0.9) this.orienation = "rf";
+
+        this.minTLEN = this.lp === 0 ? 0 : percentile(this.isizes, this.lp);
+        this.maxTLEN = percentile(this.isizes, this.up);
+
+        // var fMean = this.sumF / this.totalCount
+        // var stdDev = Math.sqrt((this.totalCount * this.sumF2 - this.sumF * this.sumF) / (this.totalCount * this.totalCount))
+        // this.minTLEN = fMean - 3 * stdDev
+        // this.maxTLEN = fMean + 3 * stdDev
+
+    }
+}
+
+function percentile(array, p) {
+
+    if (array.length === 0) return undefined
+    var k = Math.floor(array.length * (p / 100));
+    array.sort(function (a, b) {
+        return a - b
     });
+    return array[k]
 
-    return circularView
 }
 
 /*
@@ -31918,8 +31864,6 @@ class BAMTrack extends TrackBase {
         this.showMismatches = false !== config.showMismatches;
         this.color = config.color;
         this.coverageColor = config.coverageColor;
-        this.minFragmentLength = config.minFragmentLength;   // Optional, might be undefined
-        this.maxFragmentLength = config.maxFragmentLength || 1000;
 
         // The sort object can be an array in the case of multi-locus view, however if multiple sort positions
         // are present for a given reference frame the last one will take precedence
@@ -31947,12 +31891,24 @@ class BAMTrack extends TrackBase {
         return this._height
     }
 
+    get minTemplateLength() {
+        const configMinTLEN = this.config.minTLEN !== undefined ? this.config.minTLEN : this.config.minFragmentLength;
+        return (configMinTLEN !== undefined) ? configMinTLEN :
+            this._pairedEndStats ? this._pairedEndStats.minTLEN : 0
+    }
+
+    get maxTemplateLength() {
+        const configMaxTLEN = this.config.maxTLEN !== undefined ? this.config.maxTLEN : this.config.maxFragmentLength;
+        return (configMaxTLEN !== undefined) ? configMaxTLEN :
+            this._pairedEndStats ? this._pairedEndStats.maxTLEN : 1000
+    }
+
     sort(options) {
         options = this.assignSort(options);
 
         for (let vp of this.trackView.viewports) {
             if (vp.containsPosition(options.chr, options.position)) {
-                const alignmentContainer = vp.getCachedFeatures();
+                const alignmentContainer = vp.cachedFeatures;
                 if (alignmentContainer) {
                     sortAlignmentRows(options, alignmentContainer);
                     vp.repaint();
@@ -31987,14 +31943,13 @@ class BAMTrack extends TrackBase {
 
         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 (undefined === this.maxFragmentLength) {
-                this.maxFragmentLength = alignmentContainer.pairedEndStats.upperFragmentLength;
+        if (alignmentContainer.paired && !this._pairedEndStats && !this.config.maxFragmentLength) {
+            const pairedEndStats = new PairedEndStats(alignmentContainer.alignments, this.config);
+            if (pairedEndStats.totalCount > 99) {
+                this._pairedEndStats = pairedEndStats;
             }
         }
+        alignmentContainer.alignments = undefined;  // Don't need to hold onto these anymore
 
         const sort = this.sortObject;
         if (sort) {
@@ -32091,7 +32046,7 @@ class BAMTrack extends TrackBase {
         if (this.alignmentTrack.hasPairs) {
             colorByMenuItems.push({key: 'firstOfPairStrand', label: 'first-of-pair strand'});
             colorByMenuItems.push({key: 'pairOrientation', label: 'pair orientation'});
-            colorByMenuItems.push({key: 'fragmentLength', label: 'insert size (TLEN)'});
+            colorByMenuItems.push({key: 'tlen', label: 'insert size (TLEN)'});
             colorByMenuItems.push({key: 'unexpectedPair', label: 'pair orientation & insert size (TLEN)'});
         }
         const tagLabel = 'tag' + (this.alignmentTrack.colorByTag ? ' (' + this.alignmentTrack.colorByTag + ')' : '');
@@ -32197,32 +32152,17 @@ class BAMTrack extends TrackBase {
             });
         }
 
-        // Experimental JBrowse feature
-        if (this.browser.circularView && true === this.browser.circularViewVisible &&
+        // Add chords to JBrowse circular view, if present
+        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});
                     }
                 });
             }
@@ -32230,19 +32170,9 @@ class BAMTrack extends TrackBase {
                 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});
                     }
                 });
             }
@@ -32354,7 +32284,7 @@ class BAMTrack extends TrackBase {
     }
 
     getCachedAlignmentContainers() {
-        return this.trackView.viewports.map(vp => vp.getCachedFeatures())
+        return this.trackView.viewports.map(vp => vp.cachedFeatures)
     }
 
     get dataRange() {
@@ -32380,6 +32310,62 @@ class BAMTrack extends TrackBase {
     set autoscale(autoscale) {
         this.coverageTrack.autoscale = autoscale;
     }
+
+    /**
+     * Add chords to the circular view for the given viewport, represented by its reference frame
+     * @param refFrame
+     */
+    addPairedChordsForViewport(viewport) {
+
+        const maxTemplateLength = this.maxTemplateLength;
+        const inView = [];
+        const refFrame = viewport.referenceFrame;
+        for (let a of viewport.cachedFeatures.allAlignments()) {
+            if (a.end >= refFrame.start
+                && a.start <= refFrame.end
+                && a.mate
+                && a.mate.chr
+                && (a.mate.chr !== a.chr || Math.max(a.fragmentLength) > maxTemplateLength)) {
+                inView.push(a);
+            }
+        }
+        const chords = makePairedAlignmentChords(inView);
+        sendChords(chords, this, refFrame, 0.02);
+
+        // const chordSetColor = IGVColor.addAlpha("all" === refFrame.chr ? this.color : getChrColor(refFrame.chr), 0.02)
+        // const trackColor = IGVColor.addAlpha(this.color || 'rgb(0,0,255)', 0.02)
+        //
+        // // name the chord set to include track name and locus
+        // const encodedName = this.name.replaceAll(' ', '%20')
+        // const chordSetName = "all" === refFrame.chr ? encodedName :
+        //     `${encodedName} (${refFrame.chr}:${refFrame.start}-${refFrame.end}`
+        // this.browser.circularView.addChords(chords, {name: chordSetName, color: chordSetColor, trackColor: trackColor})
+    }
+
+    addSplitChordsForViewport(viewport) {
+
+        const inView = [];
+        const refFrame = viewport.referenceFrame;
+        for (let a of viewport.cachedFeatures.allAlignments()) {
+
+            const sa = a.hasTag('SA');
+            if (a.end >= refFrame.start && a.start <= refFrame.end && sa) {
+                inView.push(a);
+            }
+        }
+
+        const chords = makeSupplementalAlignmentChords(inView);
+        sendChords(chords, this, refFrame, 0.02);
+
+        // const chordSetColor = IGVColor.addAlpha("all" === refFrame.chr ? this.color : getChrColor(refFrame.chr), 0.02)
+        // const trackColor = IGVColor.addAlpha(this.color || 'rgb(0,0,255)', 0.02)
+        //
+        // // name the chord set to include track name and locus
+        // const encodedName = this.name.replaceAll(' ', '%20')
+        // const chordSetName = "all" === refFrame.chr ? encodedName :
+        //     `${encodedName} (${refFrame.chr}:${refFrame.start}-${refFrame.end}`
+        // this.browser.circularView.addChords(chords, {name: chordSetName, color: chordSetColor, trackColor: trackColor})
+    }
 }
 
 
@@ -32500,7 +32486,7 @@ class CoverageTrack {
 
     getClickedObject(clickState) {
 
-        let features = clickState.viewport.getCachedFeatures();
+        let features = clickState.viewport.cachedFeatures;
         if (!features || features.length === 0) return
 
         const genomicLocation = Math.floor(clickState.genomicLocation);
@@ -32576,8 +32562,8 @@ class AlignmentTrack {
         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 = {};
@@ -32585,7 +32571,7 @@ class AlignmentTrack {
         this.pairColors["RR"] = config.rrColor || "rgb(20, 50, 200)";
         this.pairColors["LL"] = config.llColor || "rgb(0, 150, 150)";
 
-        this.colorBy = config.colorBy || "pairOrientation";
+        this.colorBy = config.colorBy || "unexpectedPair";
         this.colorByTag = config.colorByTag ? config.colorByTag.toUpperCase() : undefined;
         this.bamColorTag = config.bamColorTag === undefined ? "YC" : config.bamColorTag;
 
@@ -32692,7 +32678,7 @@ class AlignmentTrack {
                 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');
                     }
@@ -32977,7 +32963,7 @@ class AlignmentTrack {
                 direction: direction
             };
             this.parent.sortObject = newSortObject;
-            sortAlignmentRows(newSortObject, viewport.getCachedFeatures());
+            sortAlignmentRows(newSortObject, viewport.cachedFeatures);
             viewport.repaint();
         };
         list.push('<b>Sort by...</b>');
@@ -33007,7 +32993,7 @@ class AlignmentTrack {
                                 };
                                 this.sortByTag = tag;
                                 this.parent.sortObject = newSortObject;
-                                sortAlignmentRows(newSortObject, viewport.getCachedFeatures());
+                                sortAlignmentRows(newSortObject, viewport.cachedFeatures);
                                 viewport.repaint();
                             }
                         }
@@ -33034,7 +33020,11 @@ class AlignmentTrack {
                                 const referenceFrame = clickState.viewport.referenceFrame;
                                 if (this.browser.genome.getChromosome(clickedAlignment.mate.chr)) {
                                     this.highlightedAlignmentReadNamed = clickedAlignment.readName;
-                                    this.browser.presentMultiLocusPanel(clickedAlignment, referenceFrame);
+                                    //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}`);
                                 }
@@ -33047,10 +33037,7 @@ class AlignmentTrack {
                 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: *");
                         } else {
@@ -33062,11 +33049,16 @@ class AlignmentTrack {
                 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("");
-                            navigator.clipboard.writeText(seqstring);
+                        click: async () => {
+                            const seq = clickedAlignment.seq; //.map(b => String.fromCharCode(b)).join("");
+                            try {
+                                //console.log(`seq: ${seq}`)
+                                await navigator.clipboard.writeText(seq);
+                            } catch (e) {
+                                console.error(e);
+                                Alert.presentAlert(`error copying sequence to clipboard ${e}`);
+                            }
+
                         }
                     });
                 }
@@ -33076,25 +33068,12 @@ class AlignmentTrack {
         }
 
         // 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);
                     }
                 });
             }
@@ -33102,17 +33081,7 @@ class AlignmentTrack {
                 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);
                     }
                 });
             }
@@ -33131,7 +33100,7 @@ class AlignmentTrack {
 
         const showSoftClips = this.parent.showSoftClips;
 
-        let features = viewport.getCachedFeatures();
+        let features = viewport.cachedFeatures;
         if (!features || features.length === 0) return
 
         let packedAlignmentRows = features.packedAlignmentRows;
@@ -33222,14 +33191,17 @@ class AlignmentTrack {
                     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
 
@@ -33271,11 +33243,6 @@ function sortAlignmentRows(options, alignmentContainer) {
         return true === direction ? i : -i
     });
 
-    // For debugging
-    // for(let r of alignmentContainer.packedAlignmentRows) {
-    //     console.log(r.score);
-    // }
-
 }
 
 function shadedBaseColor(qual, baseColor) {
@@ -33435,7 +33402,7 @@ class RulerViewport extends TrackViewport {
 
         this.$rulerLabel.click(async () => {
 
-            await this.browser.selectMultiLocusPanel(this.referenceFrame);
+            await this.browser.gotoMultilocusPanel(this.referenceFrame);
 
             // const removals = this.browser.referenceFrameList.filter(r => this.referenceFrame !== r)
             // for (let referenceFrame of removals) {
@@ -33558,7 +33525,9 @@ class RulerViewport extends TrackViewport {
                 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 {
@@ -33585,7 +33554,9 @@ class RulerViewport extends TrackViewport {
 
             // hide tooltip when movement stops
             clearTimeout(timer);
-            timer = setTimeout(() => this.$tooltip.hide(), toolTipTimeout);
+            timer = setTimeout(() => {
+                if (this.$tooltip) this.$tooltip.hide();
+            }, toolTipTimeout);
 
         }
 
@@ -33604,69 +33575,6 @@ class RulerViewport extends TrackViewport {
 
 }
 
-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)
  *
@@ -33700,61 +33608,28 @@ class IdeogramViewport extends TrackViewport {
 
     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) {
 
-        function clickHandler(event) {
+        this.boundClickHandler = clickHandler.bind(this);
+        viewport.addEventListener('click', this.boundClickHandler);
 
-            const column = viewport.parentElement;
-            const index = viewportColumnManager.indexOfColumn(this.browser.columnContainer, column);
-            const referenceFrame = this.browser.referenceFrameList[ index ];
+        function clickHandler(event) {
 
             const {xNormalized, width} = translateMouseCoordinates$1(event, this.ideogram_ctx.canvas);
-            const {bpLength} = this.browser.genome.getChromosome(referenceFrame.chr);
-            const locusLength = referenceFrame.bpPerPixel * width;
+            const {bpLength} = this.browser.genome.getChromosome(this.referenceFrame.chr);
+            const locusLength = this.referenceFrame.bpPerPixel * width;
             const chrCoveragePercentage = locusLength / bpLength;
 
             let xPercentage = xNormalized;
@@ -33769,21 +33644,14 @@ class IdeogramViewport extends TrackViewport {
             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.referenceFrame.start = ss;
+            this.referenceFrame.end = ee;
+            this.referenceFrame.bpPerPixel = (ee - ss) / width;
 
-            this.browser.updateViews(referenceFrame, this.browser.trackViews, true);
+            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) {
@@ -33804,10 +33672,20 @@ class IdeogramViewport extends TrackViewport {
         context.restore();
     }
 
-    update(context, pixelWidth, pixelHeight, referenceFrame) {
-        this.$canvas.hide();
-        IGVGraphics.configureHighDPICanvas(context, pixelWidth, pixelHeight);
-        this.trackView.track.draw({ context, referenceFrame, pixelWidth, pixelHeight });
+    repaint() {
+        this.draw({referenceFrame: this.referenceFrame});
+    }
+
+    draw({referenceFrame}) {
+
+        IGVGraphics.configureHighDPICanvas(this.ideogram_ctx, this.$viewport.width(), this.$viewport.height());
+
+        this.trackView.track.draw({
+            context: this.ideogram_ctx,
+            referenceFrame,
+            pixelWidth: this.$viewport.width(),
+            pixelHeight: this.$viewport.height()
+        });
     }
 
     startSpinner() {
@@ -33848,7 +33726,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)
@@ -34371,15 +34249,10 @@ const colorPickerExclusionTypes = new Set(['ruler', 'sequence', 'ideogram']);
 class TrackView {
 
     constructor(browser, columnContainer, track) {
-
-        this.namespace = `trackview-${guid$2()}`;
-
         this.browser = browser;
         this.track = track;
         track.trackView = this;
-
         this.addDOMToColumnContainer(browser, columnContainer, browser.referenceFrameList);
-
     }
 
     /**
@@ -34403,7 +34276,7 @@ class TrackView {
         // Axis
         this.axis = this.createAxis(browser, this.track);
 
-        // Track Viewports
+        // Create a viewport for each reference frame
         this.viewports = [];
         const viewportWidth = browser.calculateViewportWidth(referenceFrameList.length);
         const viewportColumns = columnContainer.querySelectorAll('.igv-column');
@@ -34476,7 +34349,6 @@ class TrackView {
 
         // Track Viewports
         for (let viewport of this.viewports) {
-            viewport.removeMouseHandlers();
             viewport.$viewport.remove();
         }
 
@@ -34542,19 +34414,14 @@ class TrackView {
         if (false === colorPickerExclusionTypes.has(this.track.type)) {
 
             const trackColors = [];
-
             const color = this.track.color || this.track.defaultColor;
-
             if (isString$3(color)) {
                 trackColors.push(color);
             }
-
             if (this.track.altColor && isString$3(this.track.altColor)) {
                 trackColors.push(this.track.altColor);
             }
-
             const defaultColors = trackColors.map(c => c.startsWith("#") ? c : c.startsWith("rgb(") ? IGVColor.rgbToHex(c) : IGVColor.colorNameToHex(c));
-
             const colorHandlers =
                 {
                     color: color => {
@@ -34567,7 +34434,6 @@ class TrackView {
                     }
 
                 };
-
             this.browser.genericColorPicker.configure(defaultColors, colorHandlers);
             this.browser.genericColorPicker.setActiveColorHandler(key);
             this.browser.genericColorPicker.show();
@@ -34581,7 +34447,6 @@ class TrackView {
             if (this.track.minHeight) {
                 newHeight = Math.max(this.track.minHeight, newHeight);
             }
-
             if (this.track.maxHeight) {
                 newHeight = Math.min(this.track.maxHeight, newHeight);
             }
@@ -34601,9 +34466,8 @@ class TrackView {
 
         this.sampleNameViewport.viewport.style.height = `${newHeight}px`;
 
-        // If the track does not manage its own content height set it here
+        // 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) {
                 vp.setContentHeight(newHeight);
             }
@@ -34660,15 +34524,6 @@ class TrackView {
         }
     }
 
-    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.
@@ -34676,7 +34531,9 @@ class TrackView {
     repaintViews() {
 
         for (let viewport of this.viewports) {
-            viewport.repaint();
+            if (viewport.isVisible()) {
+                viewport.repaint();
+            }
         }
 
         if (typeof this.track.paintAxis === 'function') {
@@ -34685,7 +34542,6 @@ class TrackView {
 
         // Repaint sample names last
         this.repaintSamples();
-
     }
 
     repaintSamples() {
@@ -34701,10 +34557,25 @@ class TrackView {
         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
 
@@ -34713,31 +34584,38 @@ class TrackView {
         // Shift viewports left/right to current genomic state (pans canvas)
         visibleViewports.forEach(viewport => viewport.shift());
 
-        const isDragging = this.browser.dragObject;
-
-        if (isDragging) {
+        // If dragging (panning) return
+        if (this.browser.dragObject) {
             return
         }
 
-        // rpv: viewports whose image (canvas) does not fully cover current genomic range
-        const reloadableViewports = this.viewportsToReload(force);
+        // Get viewports to repaint
+        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));
                 }
             }
             const current = this.track.nVariantRows;
@@ -34749,19 +34627,18 @@ class TrackView {
             }
         }
 
-
         if (this.track.autoscale) {
             let allFeatures = [];
             for (let visibleViewport of visibleViewports) {
                 const referenceFrame = visibleViewport.referenceFrame;
                 const start = referenceFrame.start;
                 const end = start + referenceFrame.toBP($$1(visibleViewport.contentDiv).width());
-                if (visibleViewport.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));
                     }
                 }
             }
@@ -34772,15 +34649,8 @@ class TrackView {
             }
         }
 
-        // 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();
@@ -34808,34 +34678,29 @@ class TrackView {
     }
 
     /**
-     * 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));
                 }
             }
         }
@@ -34876,27 +34741,6 @@ class TrackView {
         }
     }
 
-    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();
@@ -35009,7 +34853,7 @@ class TrackView {
 
     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;
 
@@ -35086,7 +34930,7 @@ class TrackView {
 
     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);
@@ -39674,7 +39518,7 @@ class TextFeatureSource {
                 mapProperties(features, config.mappings);
             }
             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;
@@ -39841,14 +39685,14 @@ class TextFeatureSource {
             }
 
             // Note - replacing previous cache with new one.  genomicInterval is optional (might be undefined => includes all features)
-            this.featureCache = new FeatureCache(features, this.genome, genomicInterval);
+            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
         }
     }
 
@@ -41592,7 +41436,7 @@ class TDFSource {
         return features
     }
 
-    supportsWholeGenome() {
+    get supportsWholeGenome() {
         return true
     }
 }
@@ -41713,38 +41557,6 @@ function FeatureSource(config, genome) {
     }
 }
 
-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) {
@@ -42288,7 +42100,7 @@ class FeatureTrack extends TrackBase {
 
     }
 
-    supportsWholeGenome() {
+    get supportsWholeGenome() {
         return (this.config.indexed === false || !this.config.indexURL) && this.config.supportsWholeGenome !== false
     }
 
@@ -42437,21 +42249,18 @@ class FeatureTrack extends TrackBase {
                 const infoURL = this.infoURL || this.config.infoURL;
                 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.
@@ -42480,7 +42289,7 @@ class FeatureTrack extends TrackBase {
     }
 
     menuItemList() {
-        
+
         const menuItems = [];
 
         if (this.render === renderSnp) {
@@ -42508,7 +42317,7 @@ class FeatureTrack extends TrackBase {
             menuItems.push(
                 {
                     object: $$1(createCheckbox$1(lut[displayMode], displayMode === this.displayMode)),
-                    click:  () => {
+                    click: () => {
                         this.displayMode = displayMode;
                         this.config.displayMode = displayMode;
                         this.trackView.checkContentHeight();
@@ -42524,14 +42333,28 @@ class FeatureTrack extends TrackBase {
 
     contextMenuItemList(clickState) {
 
-        if (isSecureContext()) {
-            const features = this.clickedFeatures(clickState);
-            if (features.length > 1) {
-                features.sort((a, b) => (a.end - a.start) - (b.end - b.start));
-            }
-            const f = features[0];   // The longest feature
-            if ((f.end - f.start) <= 1000000) {
-                return [
+        const features = this.clickedFeatures(clickState);
+        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);
+                    if (f.strand === '-') {
+                        seq = reverseComplementSequence(seq);
+                    }
+                    if (!seq) seq = "Unknown sequence";
+                    Alert.presentAlert(seq);
+
+                }
+            }];
+
+            if (isSecureContext() && navigator.clipboard !== undefined) {
+                list.push(
                     {
                         label: 'Copy feature sequence',
                         click: async () => {
@@ -42539,17 +42362,23 @@ class FeatureTrack extends TrackBase {
                             if (f.strand === '-') {
                                 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/>'
-                ]
+                    }
+                );
             }
-        }
+            list.push('<hr/>');
+            return list
+        } else {
 
-        // Either not a secure context (i.e. http: protocol), or feature is too long
-        return undefined
+            return undefined
 
+        }
     }
 
     description() {
@@ -42570,7 +42399,7 @@ class FeatureTrack extends TrackBase {
             desc += "</html>";
             return desc
         } else {
-            return super.description();
+            return super.description()
         }
 
     };
@@ -42651,13 +42480,11 @@ class WigTrack extends TrackBase {
         this.paintAxis = paintAxis;
 
         const format = config.format ? config.format.toLowerCase() : config.format;
+        this.flipAxis = config.flipAxis ? config.flipAxis : false;
+        this.logScale = config.logScale ? config.logScale : false;
         if ("bigwig" === format) {
-            this.flipAxis = config.flipAxis ? config.flipAxis : false;
-            this.logScale = config.logScale ? config.logScale : false;
             this.featureSource = new BWSource(config, this.browser.genome);
         } else if ("tdf" === format) {
-            this.flipAxis = config.flipAxis ? config.flipAxis : false;
-            this.logScale = config.logScale ? config.logScale : false;
             this.featureSource = new TDFSource(config, this.browser.genome);
         } else {
             this.featureSource = FeatureSource(config, this.browser.genome);
@@ -42709,7 +42536,7 @@ class WigTrack extends TrackBase {
         let items = [];
         if (this.flipAxis !== undefined) {
             items.push({
-                label:"Flip y-axis",
+                label: "Flip y-axis",
                 click: () => {
                     this.flipAxis = !this.flipAxis;
                     this.trackView.repaintViews();
@@ -42893,7 +42720,7 @@ class WigTrack extends TrackBase {
         }
     }
 
-    supportsWholeGenome() {
+    get supportsWholeGenome() {
         return !this.config.indexURL && this.config.supportsWholeGenome !== false
     }
 
@@ -43437,7 +43264,7 @@ class SegTrack extends TrackBase {
 
         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);
         };
 
@@ -43465,7 +43292,7 @@ class SegTrack extends TrackBase {
 
     }
 
-    supportsWholeGenome() {
+    get supportsWholeGenome() {
         return (this.config.indexed === false || !this.config.indexURL) && this.config.supportsWholeGenome !== false
     }
 
@@ -43555,10 +43382,16 @@ const MUT_COLORS = {
  * THE SOFTWARE.
  */
 
+/**
+ * Represents 2 or more wig tracks overlaid on a common viewport.
+ */
 class MergedTrack extends TrackBase {
 
     constructor(config, browser) {
         super(config, browser);
+        this.type = "merged";
+        this.featureType = 'numeric';
+        this.paintAxis = paintAxis;
     }
 
     init(config) {
@@ -43569,21 +43402,6 @@ class MergedTrack extends TrackBase {
         super.init(config);
     }
 
-    get height() {
-        return this._height
-    }
-
-    set height(h) {
-        this._height = h;
-        if (this.tracks) {
-            for (let t of this.tracks) {
-                t.height = h;
-                t.config.height = h;
-            }
-        }
-    }
-
-
     async postInit() {
 
         this.tracks = [];
@@ -43603,11 +43421,55 @@ class MergedTrack extends TrackBase {
             }
         }
 
-        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) {
 
@@ -43617,44 +43479,26 @@ class MergedTrack extends TrackBase {
 
     draw(options) {
 
-        var i, len, mergedFeatures, trackOptions, dataRange;
-
-        mergedFeatures = options.features;    // Array of feature arrays, 1 for each track
-
-        dataRange = autoscale(options.referenceFrame.chr, mergedFeatures);
+        const mergedFeatures = options.features;    // Array of feature arrays, 1 for each track
 
-        //IGVGraphics.fillRect(options.context, 0, options.pixelTop, options.pixelWidth, options.pixelHeight, {'fillStyle': "rgb(255, 255, 255)"});
-
-        for (i = 0, len = this.tracks.length; i < len; i++) {
+        if (this.autoscale) {
+            this.dataRange = autoscale(options.referenceFrame.chr, mergedFeatures);
+        }
 
-            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
@@ -43671,42 +43515,23 @@ class MergedTrack extends TrackBase {
     }
 
 
-    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 {
-    featureArrays.forEach(function (features, i) {
-        features.forEach(function (f) {
+    let min = 0;
+    let max = -Number.MAX_VALUE;
+    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, max: max}
 }
 
@@ -43815,7 +43640,7 @@ class InteractionTrack extends TrackBase {
         return this
     }
 
-    supportsWholeGenome() {
+    get supportsWholeGenome() {
         return true
     }
 
@@ -44201,7 +44026,7 @@ class InteractionTrack extends TrackBase {
             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',
@@ -44219,7 +44044,7 @@ class InteractionTrack extends TrackBase {
     contextMenuItemList(clickState) {
 
         // Experimental JBrowse feature
-        if (this.browser.circularView && true === this.browser.circularViewVisible) {
+        if (this.browser.circularView ) {
             const viewport = clickState.viewport;
             const list = [];
 
@@ -44248,21 +44073,22 @@ class InteractionTrack extends TrackBase {
 
         // inView features are simply features that have been drawn, i.e. have a drawState
         const inView = cachedFeatures.filter(f => f.drawState);
-        if(inView.length === 0) erturn;
+        if(inView.length === 0) return;
 
-        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});
+        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) {
@@ -44327,7 +44153,7 @@ class InteractionTrack extends TrackBase {
 
         // We use the cached features rather than method to avoid async load.  If the
         // feature is not already loaded this won't work,  but the user wouldn't be mousing over it either.
-        const featureList = features || clickState.viewport.getCachedFeatures();
+        const featureList = features || clickState.viewport.cachedFeatures;
         const candidates = [];
         if (featureList) {
             const proportional = (this.arcType === "proportional" || this.arcType === "inView" || this.arcType === "partialInView");
@@ -44661,7 +44487,7 @@ class VariantTrack extends TrackBase {
 
     }
 
-    supportsWholeGenome() {
+    get supportsWholeGenome() {
         return this.config.indexed === false || this.config.supportsWholeGenome === true
     }
 
@@ -44853,7 +44679,7 @@ class VariantTrack extends TrackBase {
             }
 
         } 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) {
@@ -44864,6 +44690,10 @@ class VariantTrack extends TrackBase {
         return variantColor
     }
 
+    get color() {
+        return this._color ? ((typeof this._color === "function") ? this._color(v) : this._color) : this.defaultColor
+    }
+
     clickedFeatures(clickState, features) {
 
         let featureList = super.clickedFeatures(clickState, features);
@@ -45090,25 +44920,15 @@ class VariantTrack extends TrackBase {
         }
 
         // 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});
                 }
             });
         }
@@ -45120,20 +44940,14 @@ class VariantTrack extends TrackBase {
     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);
                 }
             });
 
@@ -45143,6 +44957,15 @@ class VariantTrack extends TrackBase {
     }
 
 
+    sendChordsForViewport(viewport) {
+        const refFrame = viewport.referenceFrame;
+        const inView = "all" === refFrame.chr ?
+            this.featureSource.getAllFeatures() :
+            this.featureSource.featureCache.queryFeatures(refFrame.chr, refFrame.start, refFrame.end);
+        const chords = makeVCFChords(inView);
+        sendChords(chords, this, refFrame, 0.5);
+    }
+
     /**
      * Create a "color by" checkbox menu item, optionally initially checked
      * @param menuItem
@@ -45439,7 +45262,7 @@ class EqtlTrack extends TrackBase {
      */
     popupData(clickState) {
 
-        let features = clickState.viewport.getCachedFeatures();
+        let features = clickState.viewport.cachedFeatures;
         if (!features || features.length === 0) return []
 
         const tolerance = 3;
@@ -45658,7 +45481,7 @@ class GWASTrack extends TrackBase {
     }
 
 
-    supportsWholeGenome() {
+    get supportsWholeGenome() {
         return true
     }
 
@@ -45769,7 +45592,7 @@ class GWASTrack extends TrackBase {
 
         let data = [];
         const track = clickState.viewport.trackView.track;
-        const features = clickState.viewport.getCachedFeatures();
+        const features = clickState.viewport.cachedFeatures;
 
         if (features) {
             let count = 0;
@@ -46172,7 +45995,7 @@ class GCNVTrack extends TrackBase {
         return items
     }
 
-    supportsWholeGenome() {
+    get supportsWholeGenome() {
         return false
     }
 }
@@ -46452,7 +46275,7 @@ class RNAFeatureSource {
 
             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)
 
@@ -46559,21 +46382,18 @@ class RNAFeatureSource {
  * 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;
         this.ignoreTrackMenu = true;
-
     }
 
     async getFeatures(chr, start, end) {
@@ -46840,7 +46660,7 @@ class SpliceJunctionTrack extends TrackBase {
 
     }
 
-    supportsWholeGenome() {
+    get supportsWholeGenome() {
         return false
     }
 
@@ -47734,6 +47554,15 @@ class ReferenceFrame {
         this.id = guid$2();
     }
 
+    extend(locus) {
+        const newStart = Math.min(locus.start, this.start);
+        const newEnd = Math.max(locus.end, this.end);
+        const ratio = (newEnd - newStart) / (this.end - this.start);
+        this.start = newStart;
+        this.end = newEnd;
+        this.bpPerPixel *= ratio;
+    }
+
     calculateEnd(pixels) {
         return this.start + this.bpPerPixel * pixels
     }
@@ -47820,7 +47649,7 @@ class ReferenceFrame {
 
         const viewChanged = start !== this.start || bpPerPixel !== this.bpPerPixel;
         if (viewChanged) {
-            await browser.updateViews(this);
+            await browser.updateViews(true);
         }
 
     }
@@ -47896,30 +47725,6 @@ function createReferenceFrameList(loci, genome, browserFlanking, minimumBases, v
     })
 }
 
-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)",
@@ -49019,6 +48824,69 @@ const SVGSaveControl = function (parent, browser) {
     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)
  *
@@ -49251,7 +49119,7 @@ class RulerTrack {
         }
     }
 
-    supportsWholeGenome() {
+    get supportsWholeGenome() {
         return true
     };
 
@@ -49622,8 +49490,8 @@ class Browser {
             this.svgSaveControl = new SVGSaveControl($toggle_button_container.get(0), this);
         }
 
-        if(config.customButtons) {
-            for(let b of config.customButtons) {
+        if (config.customButtons) {
+            for (let b of config.customButtons) {
                 new CustomButton($toggle_button_container.get(0), this, b);
             }
         }
@@ -49784,7 +49652,6 @@ class Browser {
                     return undefined
                 }
             }
-
         }
     }
 
@@ -49829,7 +49696,9 @@ class Browser {
         // Create ideogram and ruler track.  Really this belongs in browser initialization, but creation is
         // 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) {
@@ -49874,6 +49743,11 @@ class Browser {
 
         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();
 
     }
@@ -50052,23 +49926,19 @@ class Browser {
 
     async loadTrackList(configList) {
 
-        try {
-            const promises = [];
-            for (let config of configList) {
-                promises.push(this.loadTrack(config, false));
-            }
+        const promises = [];
+        for (let config of configList) {
+            promises.push(this.loadTrack(config));
+        }
 
-            const loadedTracks = await Promise.all(promises);
-            const groupAutoscaleViews = this.trackViews.filter(function (trackView) {
-                return trackView.track.autoscaleGroup
-            });
-            if (groupAutoscaleViews.length > 0) {
-                this.updateViews(groupAutoscaleViews);
-            }
-            return loadedTracks
-        } finally {
-            await this.resize();
+        const loadedTracks = await Promise.all(promises);
+        const groupAutoscaleViews = this.trackViews.filter(function (trackView) {
+            return trackView.track.autoscaleGroup
+        });
+        if (groupAutoscaleViews.length > 0) {
+            this.updateViews();
         }
+        return loadedTracks
     }
 
     async loadROI(config) {
@@ -50082,6 +49952,8 @@ class Browser {
         } else {
             this.roi.push(new ROI(config, this.genome));
         }
+        // Force reload all views (force = true) to insure ROI features are loaded.  Wasteful but this function is
+        // rarely called.
         await this.updateViews(true);
     }
 
@@ -50093,14 +49965,14 @@ class Browser {
             }
         }
         for (let tv of this.trackViews) {
-            tv.updateViews(true);
+            tv.repaintViews();
         }
     }
 
     clearROIs() {
         this.roi = [];
         for (let tv of this.trackViews) {
-            tv.updateViews(true);
+            tv.repaintViews();
         }
     }
 
@@ -50112,24 +49984,12 @@ class Browser {
     /**
      * Return a promise to load a track.
      *
-     * Each track is associated with the following DOM elements
-     *
-     *      leftHandGutter  - div on the left for track controls and legend
-     *      contentDiv  - a div element wrapping all the track content.  Height can be > viewportDiv height
-     *      viewportDiv - a div element through which the track is viewed.  This might have a vertical scrollbar
-     *      canvas     - canvas element upon which the track is drawn.  Child of contentDiv
-     *
-     * The width of all elements should be equal.  Height of the viewportDiv is controlled by the user, but never
-     * greater than the contentDiv height.   Height of contentDiv and canvas are equal, and governed by the data
-     * loaded.
-     *
-     *
      * @param config
      * @param doResize - undefined by default
      * @returns {*}
      */
 
-    async loadTrack(config, doResize) {
+    async loadTrack(config) {
 
 
         // config might be json
@@ -50197,11 +50057,6 @@ class Browser {
             }
             msg += (": " + config.url);
             Alert.presentAlert(new Error(msg), undefined);
-        } finally {
-            // TODO: If loadTrack() is called individually - not via loadTrackList() - call this.resize()
-            if (false === doResize) ; else {
-                await this.resize();
-            }
         }
     }
 
@@ -50425,44 +50280,11 @@ class Browser {
             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;
 
@@ -50475,7 +50297,7 @@ class Browser {
         // Don't autoscale while dragging.
         if (this.dragObject) {
             for (let trackView of trackViews) {
-                await trackView.updateViews(force);
+                await trackView.updateViews();
             }
         } else {
             // Group autoscale
@@ -50520,14 +50342,14 @@ class Browser {
                     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)));
+            await Promise.all(otherTracks.map(tv => tv.updateViews()));
             // for (let trackView of otherTracks) {
             //     await trackView.updateViews(force);
             // }
@@ -50535,6 +50357,12 @@ class Browser {
 
     }
 
+    repaintViews() {
+        for (let trackView of this.trackViews) {
+            trackView.repaintViews();
+        }
+    }
+
     updateLocusSearchWidget() {
 
         const referenceFrameList = this.referenceFrameList;
@@ -50599,49 +50427,50 @@ class Browser {
         }
     }
 
-    async presentMultiLocusPanel(alignment, referenceFrameLeft) {
+    /**
+     * Add a new multi-locus panel for the specified region
+     * @param chr
+     * @param start
+     * @param end
+     * @param referenceFrameLeft - optional, if supplied new panel should be placed to the immediate right
+     */
+    async addMultiLocusPanel(chr, start, end, referenceFrameLeft) {
 
         // account for reduced viewport width as a result of adding right mate pair panel
         const viewportWidth = this.calculateViewportWidth(1 + this.referenceFrameList.length);
-
         const scaleFactor = this.calculateViewportWidth(this.referenceFrameList.length) / this.calculateViewportWidth(1 + this.referenceFrameList.length);
-        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);
+        for (let refFrame of this.referenceFrameList) {
+            refFrame.bpPerPixel *= scaleFactor;
+        }
 
-        // add right mate panel beside left mate panel
-        const indexLeft = this.referenceFrameList.indexOf(referenceFrameLeft);
-        const indexRight = 1 + (this.referenceFrameList.indexOf(referenceFrameLeft));
+        const bpp = (end - start) / viewportWidth;
+        const newReferenceFrame = new ReferenceFrame(this.genome, chr, start, end, bpp);
+        const indexLeft = referenceFrameLeft ? this.referenceFrameList.indexOf(referenceFrameLeft) : this.referenceFrameList.length - 1;
+        const indexRight = 1 + indexLeft;
 
+        // TODO -- this is really ugly
         const {$viewport} = this.trackViews[0].viewports[indexLeft];
         const viewportColumn = viewportColumnManager.insertAfter($viewport.get(0).parentElement);
 
         if (indexRight === this.referenceFrameList.length) {
-
-            this.referenceFrameList.push(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) {
@@ -50670,7 +50499,13 @@ class Browser {
 
     }
 
-    async selectMultiLocusPanel(referenceFrame) {
+    /**
+     * Goto the locus represented by the selected referenceFrame, discarding all other panels
+     *
+     * @param referenceFrame
+     * @returns {Promise<void>}
+     */
+    async gotoMultilocusPanel(referenceFrame) {
 
         const referenceFrameIndex = this.referenceFrameList.indexOf(referenceFrame);
 
@@ -50724,7 +50559,7 @@ class Browser {
 
         this.updateUIWithReferenceFrameList();
 
-        await this.updateViews(true);
+        await this.updateViews();
 
     }
 
@@ -50947,7 +50782,6 @@ class Browser {
         }
 
 
-
         json["tracks"] = trackJson;
 
         return json        // This is an object, not a json string
@@ -50966,16 +50800,6 @@ class Browser {
         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
@@ -51013,12 +50837,22 @@ class Browser {
 
     }
 
+    /**
+     * 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) {
@@ -51093,12 +50927,9 @@ class Browser {
     }
 
     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() {
@@ -51181,7 +51012,7 @@ class Browser {
             id: this.genome.id,
             chromosomes: makeCircViewChromosomes(this.genome)
         });
-        this.circularViewVisible = show === true;
+        this.circularViewVisible = show;
 
     }
 
@@ -51197,6 +51028,50 @@ class Browser {
     }
 }
 
+/**
+ * Function called win window is resized, or visibility changed (e.g. "show" from a tab).  This is a function rather
+ * than class method because it needs to be copied and bound to specific instances of browser to support listener
+ * removal
+ *
+ * @returns {Promise<void>}
+ */
+async function resize() {
+
+    const viewportWidth = this.calculateViewportWidth(this.referenceFrameList.length);
+
+    for (let referenceFrame of this.referenceFrameList) {
+
+        const index = this.referenceFrameList.indexOf(referenceFrame);
+
+        const {chr, genome} = referenceFrame;
+
+        const {bpLength} = genome.getChromosome(referenceFrame.chr);
+
+        const viewportWidthBP = referenceFrame.toBP(viewportWidth);
+
+        // viewportWidthBP > bpLength occurs when locus is full chromosome and user widens browser
+        if (GenomeUtils.isWholeGenomeView(chr) || viewportWidthBP > bpLength) {
+            // console.log(`${ Date.now() } Recalc referenceFrame(${ index }) bpp. viewport ${ StringUtils.numberFormatter(viewportWidthBP) } > ${ StringUtils.numberFormatter(bpLength) }.`)
+            referenceFrame.bpPerPixel = bpLength / viewportWidth;
+        } else {
+            // console.log(`${ Date.now() } Recalc referenceFrame(${ index }) end.`)
+            referenceFrame.end = referenceFrame.start + referenceFrame.toBP(viewportWidth);
+        }
+
+        for (let {viewports} of this.trackViews) {
+            viewports[index].setWidth(viewportWidth);
+        }
+
+    }
+
+    this.updateUIWithReferenceFrameList();
+
+     //TODO -- update view only if needed.  Reducing size never needed.  Increasing size maybe
+
+     await this.updateViews(true);
+}
+
+
 function handleMouseMove(e) {
 
     e.preventDefault();