igv 2.11.1 → 2.12.1

package/dist/igv.esm.js

@@ -19712,6 +19712,8 @@ const knownFileExtensions = new Set([
     "bb",
     "bigbed",
     "biginteract",
+    "biggenepred",
+    "bignarrowpeak",
     "bw",
     "bigwig",
     "bam",
@@ -19854,6 +19856,7 @@ function inferTrackType(config) {
                 return "alignment"
             case "bedpe":
             case "bedpe-loop":
+            case "biginteract":
                 return "interact"
             case "bp":
                 return "arc"
@@ -19862,7 +19865,8 @@ function inferTrackType(config) {
             case "bed":
             case "bigbed":
             case "bb":
-            case "biginteract":
+            case "biggenepred":
+            case "bignarrowpeak":
                 return "bedtype"
             default:
                 return "annotation"
@@ -20113,6 +20117,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 +20273,6 @@ class SequenceTrack {
     }
 
     menuItemList() {
-
         return [
             {
                 name: this.reversed ? "Forward" : "Reverse",
@@ -20272,17 +20307,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 +20328,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 +20483,7 @@ class SequenceTrack {
         }
     }
 
-    supportsWholeGenome() {
+    get supportsWholeGenome() {
         return false
     }
 
@@ -20515,13 +20557,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();
 
@@ -20614,7 +20656,6 @@ class Viewport {
         // Maximum height of a canvas is ~32,000 pixels on Chrome, possibly smaller on other platforms
         contentHeight = Math.min(contentHeight, 32000);
         this.$content.height(contentHeight);
-        if (this.canvas._data) this.canvas._data.invalidate = true;
     }
 
     isLoading() {
@@ -20660,8 +20701,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
@@ -22757,7 +22796,7 @@ const Cytoband = function (start, end, name, typestain) {
     }
 };
 
-const _version = "2.11.1";
+const _version = "2.12.1";
 function version() {
     return _version
 }
@@ -22905,7 +22944,7 @@ class Genome {
     constructor(config, sequence, ideograms, aliases) {
 
         this.config = config;
-        this.id = config.id;
+        this.id = config.id || generateGenomeID(config);
         this.sequence = sequence;
         this.chromosomeNames = sequence.chromosomeNames;
         this.chromosomes = sequence.chromosomes;  // An object (functions as a dictionary)
@@ -23111,6 +23150,7 @@ class Genome {
     }
 
     async getSequence(chr, start, end) {
+        chr = this.getChromosomeName(chr);
         return this.sequence.getSequence(chr, start, end)
     }
 }
@@ -23226,6 +23266,18 @@ function constructWG(genome, config) {
 
 }
 
+function generateGenomeID(config) {
+    if (config.id !== undefined) {
+        return config.id
+    } else if (config.fastaURL && isString$3(config.fastaURL)) {
+        return config.fastaURL
+    } else if (config.fastaURL && config.fastaURL.name) {
+        return config.fastaURL.name
+    } else {
+        return ("0000" + (Math.random() * Math.pow(36, 4) << 0).toString(36)).slice(-4)
+    }
+}
+
 /**
  * Created by dat on 9/16/16.
  */
@@ -23246,28 +23298,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) {
@@ -23289,10 +23340,17 @@ 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 = () => {
-            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;
@@ -23303,7 +23361,9 @@ class TrackViewport extends Viewport {
         };
 
         if (this.trackView.track && "sequence" === this.trackView.track.type && this.referenceFrame.bpPerPixel > 1) {
-            if (this.canvas) ;
+            $$1(this.canvas).remove();
+            this.canvas = undefined;
+            //this.featureCache = undefined
             return false
         }
 
@@ -23311,29 +23371,30 @@ class TrackViewport extends Viewport {
             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.canvas._data = undefined;
-                    this.featureCache = 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
     }
 
     /**
@@ -23400,9 +23461,8 @@ class TrackViewport extends Viewport {
     }
 
     /**
-     * Repaint the canvas for the current genomic state.
+     * Repaint the canvas using the cached features
      *
-     * @returns {Promise<void>}
      */
     repaint() {
 
@@ -23416,21 +23476,13 @@ class TrackViewport extends Viewport {
         // const isWGV = GenomeUtils.isWholeGenomeView(this.browser.referenceFrameList[0].chr)
         const isWGV = GenomeUtils.isWholeGenomeView(this.referenceFrame.chr);
 
-        let pixelWidth;
-        const startBP = this.featureCache.startBP;
-        const endBP = this.featureCache.endBP;
-        let bpPerPixel = this.referenceFrame.bpPerPixel;
-        if (isWGV) {
-            pixelWidth = this.$viewport.width();
-        } else {
-            pixelWidth = 3 * this.$viewport.width();
-        }
-
+        // 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();
@@ -23439,30 +23491,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 =
@@ -23483,16 +23530,16 @@ class TrackViewport extends Viewport {
 
         this.draw(drawConfiguration, features, roiFeatures);
 
-        // Attach metadata to canvas
-        newCanvas._data = {
-            chr: this.referenceFrame.chr, startBP, endBP, bpPerPixel, top: canvasTop, bottom: canvasTop + pixelHeight
-        };
+        this.featureCache.canvasTop = canvasTop;
+        this.featureCache.height = pixelHeight;
 
         if (this.canvas) {
             $$1(this.canvas).remove();
         }
+        newCanvas._data = {
+            chr: this.featureCache.chr, bpPerPixel, startBP, endBP, pixelHeight, pixelTop: canvasTop
+        };
         this.canvas = newCanvas;
-        this.ctx = ctx;
         this.$content.append($$1(newCanvas));
 
     }
@@ -23534,17 +23581,18 @@ class TrackViewport extends Viewport {
 
     savePNG() {
 
-        if (!this.ctx) return
+        if (!this.canvas) return
 
-        const canvasMetadata = this.canvas._data;
-        const canvasTop = canvasMetadata ? canvasMetadata.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;
@@ -23692,6 +23740,28 @@ class TrackViewport extends Viewport {
         }
     }
 
+    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'});
@@ -23713,15 +23783,33 @@ class TrackViewport extends Viewport {
 
     addMouseHandlers() {
 
-        this.addViewportContextMenuHandler(this.$viewport.get(0));
+        const viewport = this.$viewport.get(0);
 
-        this.addViewportMouseDownHandler(this.$viewport.get(0));
+        this.addViewportContextMenuHandler(viewport);
 
-        this.addViewportTouchStartHandler(this.$viewport.get(0));
-
-        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));
 
@@ -23731,32 +23819,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) {
@@ -23789,58 +23854,16 @@ 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 (this.enableClick && this.canvas) {
                 if (3 === event.which || event.ctrlKey) {
                     return
                 }
@@ -23923,19 +23946,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();
 
@@ -23955,35 +23971,11 @@ 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;
@@ -24239,11 +24231,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();
                 }
 
             }
@@ -24389,7 +24383,7 @@ class PairedAlignment {
         return this.firstAlignment.isProperPair()
     }
 
-    get tlen() {
+    get fragmentLength() {
         return Math.abs(this.firstAlignment.fragmentLength)
     }
 
@@ -25832,7 +25826,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) {
@@ -25873,7 +25867,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);
@@ -29026,6 +29020,10 @@ class BamSource {
  * THE SOFTWARE.
  */
 
+const fixColor = (colorString) => {
+    return (colorString.indexOf(",") > 0 && !colorString.startsWith("rgb")) ?
+        `rgb(${colorString})` : colorString
+};
 
 /**
  * A collection of properties and methods shared by all (or most) track types.
@@ -29070,8 +29068,8 @@ class TrackBase {
 
         this.order = config.order;
 
-        this.color = config.color;
-        this.altColor = config.altColor;
+        if(config.color) this.color = fixColor(config.color);
+        if(config.altColor) this.altColor = fixColor(config.altColor);
         if ("civic-ws" === config.sourceType) {    // Ugly proxy for specialized track type
             this.defaultColor = "rgb(155,20,20)";
         } else {
@@ -29177,7 +29175,7 @@ class TrackBase {
         return state
     }
 
-    supportsWholeGenome() {
+    get supportsWholeGenome() {
         return false
     }
 
@@ -30966,7 +30964,7 @@ class ChordSetManager {
         return this.tracks.find(t => name === t.name)
     }
 
-    getChordset(name) {
+    getChordSet(name) {
         return this.chordSets.find(cs => name === cs.name)
     }
 
@@ -31084,9 +31082,8 @@ class CircularView {
         buttonContainer.appendChild(this.showControlsButton);
         this.showControlsButton.innerText = 'none' === this.controlPanel.style.display ? 'Show Controls' : 'Hide Controls';
         this.showControlsButton.addEventListener('click', (event) => {
-            const trackPanelRows = this.controlPanel.querySelectorAll('div');
-            if (trackPanelRows.length > 0) {
-
+            const panelRows = this.controlPanel.querySelectorAll('div');
+            if (panelRows.length > 0) {
                 if ('none' === this.controlPanel.style.display) {
                     this.controlPanel.style.display = 'flex';
                     event.target.innerText = 'Hide Controls';
@@ -31170,10 +31167,10 @@ class CircularView {
         hideShowButton.innerText = true === chordSet.visible ? 'Hide' : 'Show';
         hideShowButton.addEventListener('click', event => {
             if (true === chordSet.visible) {
-                this.hideTrack(chordSet.name);
+                this.hideChordSet(chordSet.name);
                 event.target.innerText = "Show";
             } else {
-                this.showTrack(chordSet.name);
+                this.showChordSet(chordSet.name);
                 event.target.innerText = "Hide";
             }
         });
@@ -31197,7 +31194,7 @@ class CircularView {
                 color: chordSet.color,
                 onChange: ({rgbaString}) => {
                     colorPickerButton.style.backgroundColor = setAlpha(rgbaString, 1);
-                    this.setTrackColor(chordSet.name, rgbaString);
+                    this.setColor(chordSet.name, rgbaString);
                     alphaSlider.value = alphaToValue(getAlpha(chordSet.color));
                 }
             };
@@ -31215,7 +31212,7 @@ class CircularView {
         alphaSlider.value = alphaToValue(getAlpha(chordSet.color));
         alphaSlider.oninput = () => {
             const v = valueToAlpha(alphaSlider.value);
-            this.setTrackColor(chordSet.name, setAlpha(chordSet.color, v));
+            this.setColor(chordSet.name, setAlpha(chordSet.color, v));
             picker.setColor(chordSet.color);
         };
         row.appendChild(alphaSlider);
@@ -31235,11 +31232,13 @@ class CircularView {
      */
     setAssembly(igvGenome) {
 
-        if (this.genomeId === igvGenome.id) {
+        const id = this.genomeId || guid();
+
+        if (this.genomeId === id) {
             return
         }
         this.chordManager.clearChords();
-        this.genomeId = igvGenome.id;
+        this.genomeId = id;
         this.chrNames = new Set(igvGenome.chromosomes.map(chr => shortChrName$1(chr.name)));
 
         const regions = [];
@@ -31260,7 +31259,7 @@ class CircularView {
         this.assembly = {
             name: igvGenome.name,
             sequence: {
-                trackId: igvGenome.id,
+                trackId: id,
                 type: 'ReferenceSequenceTrack',
                 adapter: {
                     type: 'FromConfigSequenceAdapter',
@@ -31301,7 +31300,7 @@ class CircularView {
 
     addChords(newChords, options = {}) {
 
-        const tmp = options.track || options.name || "*";
+        const tmp = options.name || options.track || "*";
         const trackName = tmp.split(' ')[0].replaceAll("%20", " ");
         const chordSetName = tmp.replaceAll("%20", " ");
 
@@ -31354,21 +31353,6 @@ class CircularView {
         this.viewState.pluginManager.rootModel.session.clearSelection();
     }
 
-    getFeature(featureId) {
-
-        // TODO -- broken
-        // const display = this.viewState.pluginManager.rootModel.session.view.tracks[0].displays[0]
-        // const feature = display.data.features.get(featureId)
-        // return feature;
-
-        const features = [...this.viewState.config.tracks[0].adapter.features.value];
-        for (let f of features) {
-            if (featureId === f.uniqueId) {
-                return f
-            }
-        }
-    }
-
     /**
      * Deprecated, use "visible" property
      */
@@ -31391,23 +31375,23 @@ class CircularView {
         this.parent.style.display = isVisible ? 'block' : 'none';
     }
 
-    hideTrack(trackName) {
-        let track = this.getTrack(trackName);
-        if (track) {
-            track.visible = false;
+    hideChordSet(trackName) {
+        let cs = this.getChordSet(trackName);
+        if (cs) {
+            cs.visible = false;
             this.render();
         } else {
             console.warn(`No track with name: ${name}`);
         }
     }
 
-    showTrack(trackName) {
-        let track = this.getTrack(trackName);
-        if (track) {
-            track.visible = true;
+    showChordSet(name) {
+        let cs = this.getChordSet(name);
+        if (cs) {
+            cs.visible = true;
             this.render();
         } else {
-            console.warn(`No track with name: ${trackName}`);
+            console.warn(`No track with name: ${name}`);
         }
     }
 
@@ -31433,12 +31417,12 @@ class CircularView {
         this.render();
     }
 
-    getTrack(name) {
-        return this.groupByTrack ? this.chordManager.getTrack(name) : this.chordManager.getChordset(name)
+    getChordSet(name) {
+        return this.groupByTrack ? this.chordManager.getTrack(name) : this.chordManager.getChordSet(name)
     }
 
-    setTrackColor(name, color) {
-        const t = this.getTrack(name);
+    setColor(name, color) {
+        const t = this.getChordSet(name);
         if (t) {
             t.color = color;
             const trackID = t.id;
@@ -31465,8 +31449,6 @@ class CircularView {
         // Remove all children from possible previous renders.  React might do this for us when we render, but just in case.
         ReactDOM.unmountComponentAtNode(this.container);
 
-
-
         const visibleChordSets =
             (this.groupByTrack ? this.chordManager.tracks : this.chordManager.chordSets).filter(t => t.visible);
 
@@ -31545,7 +31527,7 @@ function guid() {
 
 function embedCSS$1() {
 
-    const css =  '.igv-circview-container {\n  z-index: 2048;\n  position: absolute;\n  width: fit-content;\n  height: fit-content;\n  box-sizing: content-box;\n  color: dimgray;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 12px;\n  background-color: white;\n  border-color: dimgray;\n  border-style: solid;\n  border-width: thin;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n\n.igv-circview-toolbar {\n  position: relative;\n  width: 100%;\n  height: 32px;\n  background-color: lightgrey;\n  border-bottom-style: solid;\n  border-bottom-color: dimgray;\n  border-bottom-width: thin;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.igv-circview-toolbar-button-container {\n  height: 100%;\n  width: fit-content;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-circview-toolbar-button-container > div {\n  margin: 4px;\n}\n\n.igv-circview-track-panel {\n  z-index: 1024;\n  position: absolute;\n  top: 33px;\n  left: 0;\n  width: 100%;\n  height: fit-content;\n  border-bottom-style: solid;\n  border-bottom-color: dimgray;\n  border-bottom-width: thin;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n.igv-circview-track-panel > div {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-circview-track-panel > div > div {\n  margin: 4px;\n}\n\n.igv-circview-swatch-button {\n  cursor: pointer;\n  padding: 5px;\n  width: 8px;\n  height: 8px;\n  border: 1px solid #8d8b8b;\n  border-radius: 16px;\n}\n\n.igv-circview-button {\n  cursor: pointer;\n  padding: 5px;\n  color: #444;\n  vertical-align: middle;\n  text-align: center;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 12px;\n  border: 1px solid #8d8b8b;\n  border-radius: 4px;\n  background: #efefef;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.2);\n}\n\n.igv-circview-button:hover {\n  background: #efefef;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.6);\n}\n\n.igv-circview-button:active {\n  color: #007bff;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.6);\n}\n\n/*# sourceMappingURL=circular-view.css.map */\n';
+    const css =  '.igv-circview-container {\n  z-index: 2048;\n  width: fit-content;\n  height: fit-content;\n  box-sizing: content-box;\n  color: dimgray;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 12px;\n  background-color: white;\n  border-color: dimgray;\n  border-style: solid;\n  border-width: thin;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n\n.igv-circview-toolbar {\n  position: relative;\n  width: 100%;\n  height: 32px;\n  background-color: lightgrey;\n  border-bottom-style: solid;\n  border-bottom-color: dimgray;\n  border-bottom-width: thin;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.igv-circview-toolbar-button-container {\n  height: 100%;\n  width: fit-content;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-circview-toolbar-button-container > div {\n  margin: 4px;\n}\n\n.igv-circview-track-panel {\n  z-index: 1024;\n  position: absolute;\n  top: 33px;\n  left: 0;\n  width: 100%;\n  height: fit-content;\n  border-bottom-style: solid;\n  border-bottom-color: dimgray;\n  border-bottom-width: thin;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n.igv-circview-track-panel > div {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-circview-track-panel > div > div {\n  margin: 4px;\n}\n\n.igv-circview-swatch-button {\n  cursor: pointer;\n  padding: 5px;\n  width: 8px;\n  height: 8px;\n  border: 1px solid #8d8b8b;\n  border-radius: 16px;\n}\n\n.igv-circview-button {\n  cursor: pointer;\n  padding: 5px;\n  color: #444;\n  vertical-align: middle;\n  text-align: center;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 12px;\n  border: 1px solid #8d8b8b;\n  border-radius: 4px;\n  background: #efefef;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.2);\n}\n\n.igv-circview-button:hover {\n  background: #efefef;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.6);\n}\n\n.igv-circview-button:active {\n  color: #007bff;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.6);\n}\n\n/*# sourceMappingURL=circular-view.css.map */\n';
 
     const style = document.createElement('style');
     style.setAttribute('type', 'text/css');
@@ -31707,6 +31689,9 @@ function sendChords(chords, track, refFrame, alpha) {
         `${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;
+
 }
 
 
@@ -31724,21 +31709,24 @@ function createCircularView(el, browser) {
             function addFrameForFeature(feature) {
 
                 feature.chr = browser.genome.getChromosomeName(feature.refName);
-
-                for (let referenceFrame of browser.currentReferenceFrames()) {
+                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);
-                        break
-                    } else {
-                        const flanking = 2000;
-                        const center = (feature.start + feature.end) / 2;
-                        browser.addMultiLocusPanel(feature.chr, center - flanking, center + flanking);
+                        frameFound = true;
                         break
                     }
                 }
+                if (!frameFound) {
+                    const flanking = 2000;
+                    const center = (feature.start + feature.end) / 2;
+                    browser.addMultiLocusPanel(feature.chr, center - flanking, center + flanking);
+
+                }
             }
         }
     });
@@ -32169,7 +32157,7 @@ class BAMTrack extends TrackBase {
         }
 
         // Add chords to JBrowse circular view, if present
-        if (this.browser.circularView && true === this.browser.circularViewVisible &&
+        if (this.browser.circularView &&
             (this.alignmentTrack.hasPairs || this.alignmentTrack.hasSupplemental)) {
             menuItems.push('<hr/>');
             if (this.alignmentTrack.hasPairs) {
@@ -32694,7 +32682,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');
                     }
@@ -33053,10 +33041,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 {
@@ -33068,11 +33053,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}`);
+                            }
+
                         }
                     });
                 }
@@ -33082,8 +33072,7 @@ 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',
@@ -33196,10 +33185,13 @@ class AlignmentTrack {
             case "pairOrientation":
 
                 if (this.pairOrientation && alignment.pairOrientation) {
-                    var oTypes = orientationTypes[this.pairOrientation];
+                    const oTypes = orientationTypes[this.pairOrientation];
                     if (oTypes) {
-                        var pairColor = this.pairColors[oTypes[alignment.pairOrientation]];
-                        if (pairColor) color = pairColor;
+                        const pairColor = this.pairColors[oTypes[alignment.pairOrientation]];
+                        if (pairColor) {
+                            color = pairColor;
+                            break
+                        }
                     }
                 }
                 if ("pairOrientation" === option) {
@@ -33540,7 +33532,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 {
@@ -33567,7 +33561,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);
 
         }
 
@@ -33586,69 +33582,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)
  *
@@ -33682,61 +33615,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;
@@ -33751,21 +33651,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(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) {
@@ -33786,10 +33679,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() {
@@ -33830,7 +33733,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)
@@ -34353,7 +34256,6 @@ 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;
@@ -34381,7 +34283,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');
@@ -34454,7 +34356,6 @@ class TrackView {
 
         // Track Viewports
         for (let viewport of this.viewports) {
-            viewport.removeMouseHandlers();
             viewport.$viewport.remove();
         }
 
@@ -34572,9 +34473,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);
             }
@@ -34627,17 +34527,8 @@ class TrackView {
 
     isLoading() {
         for (let viewport of this.viewports) {
-            if (viewport.isLoading()) return true
-        }
-    }
-
-    resize(viewportWidth) {
-
-        for (let viewport of this.viewports) {
-            viewport.setWidth(viewportWidth);
+            if (viewport.isLoading()) return true
         }
-
-        this.updateViews(true);
     }
 
     /**
@@ -34647,7 +34538,7 @@ class TrackView {
     repaintViews() {
 
         for (let viewport of this.viewports) {
-            if(viewport.isVisible()) {
+            if (viewport.isVisible()) {
                 viewport.repaint();
             }
         }
@@ -34658,7 +34549,6 @@ class TrackView {
 
         // Repaint sample names last
         this.repaintSamples();
-
     }
 
     repaintSamples() {
@@ -34674,13 +34564,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
 
@@ -34689,18 +34591,25 @@ 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 = force ? visibleViewports : this.viewportsToReload();
+        // 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();
         }
 
@@ -34709,7 +34618,7 @@ class TrackView {
         // 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.featureCache && viewport.featureCache.features) {
@@ -34747,19 +34656,8 @@ class TrackView {
             }
         }
 
-        // Must repaint all viewports if autoscaling.  Always repaint ruler.
-        if (this.track.autoscale || this.track.autoscaleGroup || this.track.type === 'ruler' || force) {
-            for (let vp of visibleViewports) {
-                vp.repaint();
-            }
-        } else {
-            const reloadedViewports = new Set(reloadableViewports);
-            for (let vp of visibleViewports) {
-                const invalid = vp.canvas && vp.canvas._data && vp.canvas._data.invalidate;
-                if (invalid || reloadedViewports.has(vp)) {
-                    vp.repaint();
-                }
-            }
+        for (let vp of viewportsToRepaint) {
+            vp.repaint();
         }
 
         this.adjustTrackHeight();
@@ -34787,7 +34685,7 @@ 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() {
 
@@ -34795,16 +34693,11 @@ class TrackView {
             return []
         }
 
-        // List of viewports that need reloading
-        const rpV = this.viewportsToReload();
-        const promises = rpV.map(function (vp) {
-            return vp.loadFeatures()
-        });
-
-        await Promise.all(promises);
-
         let allFeatures = [];
         for (let vp of this.viewports) {
+            if (vp.needsReload()) {
+                await vp.loadFeatures();
+            }
             if (vp.featureCache && vp.featureCache.features) {
                 const referenceFrame = vp.referenceFrame;
                 const start = referenceFrame.start;
@@ -34855,27 +34748,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 (!viewport.featureCache || !viewport.featureCache.containsRange(chr, start, end, bpPerPixel))
-            }
-        });
-        return viewports
-    }
-
     createTrackScrollbar(browser) {
 
         const outerScroll = div$1();
@@ -34988,7 +34860,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;
 
@@ -35065,7 +34937,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);
@@ -35928,7 +35800,7 @@ function decodeBed(tokens, header) {
                 const eEnd = eStart + parseInt(exonSizes[i]);
                 exons.push({start: eStart, end: eEnd});
             }
-            findUTRs(exons, feature.cdStart, feature.cdEnd);
+            findUTRs$1(exons, feature.cdStart, feature.cdEnd);
             feature.exons = exons;
         }
 
@@ -36036,7 +35908,7 @@ function decodeGenePred(tokens, header) {
         const end = parseInt(exonEnds[i]);
         exons.push({start: start, end: end});
     }
-    findUTRs(exons, cdStart, cdEnd);
+    findUTRs$1(exons, cdStart, cdEnd);
 
     feature.exons = exons;
 
@@ -36079,7 +35951,7 @@ function decodeGenePredExt(tokens, header) {
         const end = parseInt(exonEnds[i]);
         exons.push({start: start, end: end});
     }
-    findUTRs(exons, cdStart, cdEnd);
+    findUTRs$1(exons, cdStart, cdEnd);
 
     feature.exons = exons;
 
@@ -36120,14 +35992,14 @@ function decodeReflat(tokens, header) {
         const end = parseInt(exonEnds[i]);
         exons.push({start: start, end: end});
     }
-    findUTRs(exons, cdStart, cdEnd);
+    findUTRs$1(exons, cdStart, cdEnd);
 
     feature.exons = exons;
 
     return feature
 }
 
-function findUTRs(exons, cdStart, cdEnd) {
+function findUTRs$1(exons, cdStart, cdEnd) {
 
     for (let exon of exons) {
         const end = exon.end;
@@ -39643,7 +39515,7 @@ class TextFeatureSource {
         this.sourceType = (config.sourceType === undefined ? "file" : config.sourceType);
         this.maxWGCount = config.maxWGCount || DEFAULT_MAX_WG_COUNT;
 
-        const queryableFormats = new Set(["bigwig", "bw", "bigbed", "bb", "biginteract", "tdf"]);
+        const queryableFormats = new Set(["bigwig", "bw", "bigbed", "bb", "biginteract", "biggenepred", "bignarrowpeak", "tdf"]);
 
         if (config.features && Array.isArray(config.features)) {
             // Explicit array of features
@@ -40063,11 +39935,9 @@ class BufferedReader {
     }
 }
 
-//table chromatinInteract
-
 function getDecoder(definedFieldCount, fieldCount, autoSql, format) {
 
-    if (autoSql && 'chromatinInteract' === autoSql.table || "biginteract" === format) {
+    if ("biginteract" === format || (autoSql && ('chromatinInteract' === autoSql.table) || 'interact' === autoSql.table)) {
         return decodeInteract
     } else {
         const standardFieldCount = definedFieldCount - 3;
@@ -40104,6 +39974,7 @@ function getDecoder(definedFieldCount, fieldCount, autoSql, format) {
                     const eEnd = eStart + parseInt(exonSizes[i]);
                     exons.push({start: eStart, end: eEnd});
                 }
+                findUTRs(exons, feature.cdStart, feature.cdEnd);
                 feature.exons = exons;
             }
 
@@ -40121,6 +39992,28 @@ function getDecoder(definedFieldCount, fieldCount, autoSql, format) {
         }
     }
 
+    //table chromatinInteract
+// "Chromatin interaction between two regions"
+//     (
+//     string chrom;      "Chromosome (or contig, scaffold, etc.). For interchromosomal, use 2 records"
+//     uint chromStart;   "Start position of lower region. For interchromosomal, set to chromStart of this region"
+//     uint chromEnd;     "End position of upper region. For interchromosomal, set to chromEnd of this region"
+//     string name;       "Name of item, for display"
+//     uint score;        "Score from 0-1000"
+//     double value;      "Strength of interaction or other data value. Typically basis for score"
+//     string exp;        "Experiment name (metadata for filtering). Use . if not applicable"
+//     string color;      "Item color.  Specified as r,g,b or hexadecimal #RRGGBB or html color name, as in //www.w3.org/TR/css3-color/#html4."
+//     string region1Chrom;  "Chromosome of lower region. For non-directional interchromosomal, chrom of this region."
+//     uint region1Start;  "Start position of lower/this region"
+//     uint region1End;    "End position in chromosome of lower/this region"
+//     string region1Name;  "Identifier of lower/this region"
+//     string region1Strand; "Orientation of lower/this region: + or -.  Use . if not applicable"
+//     string region2Chrom; "Chromosome of upper region. For non-directional interchromosomal, chrom of other region"
+//     uint region2Start;  "Start position in chromosome of upper/this region"
+//     uint region2End;    "End position in chromosome of upper/this region"
+//     string region2Name; "Identifier of upper/this region"
+//     string region2Strand; "Orientation of upper/this region: + or -.  Use . if not applicable"
+//     )
     function decodeInteract(feature, tokens) {
 
         feature.chr1 = tokens[5];
@@ -40140,6 +40033,24 @@ function getDecoder(definedFieldCount, fieldCount, autoSql, format) {
     }
 }
 
+function findUTRs(exons, cdStart, cdEnd) {
+
+    for (let exon of exons) {
+        const end = exon.end;
+        const start = exon.start;
+        if (end < cdStart || start > cdEnd) {
+            exon.utr = true;
+        } else {
+            if (cdStart >= start && cdStart <= end) {
+                exon.cdStart = cdStart;
+            }
+            if (cdEnd >= start && cdEnd <= end) {
+                exon.cdEnd = cdEnd;
+            }
+        }
+    }
+}
+
 function scoreShade(score, color) {
     const alpha = Math.min(1, 0.11 + 0.89 * (score / 779));
     return alpha.toString()
@@ -41571,7 +41482,7 @@ class TDFSource {
         return features
     }
 
-    supportsWholeGenome() {
+    get supportsWholeGenome() {
         return true
     }
 }
@@ -41679,11 +41590,12 @@ function zoomLevelForScale(chr, bpPerPixel, genome) {
  * THE SOFTWARE.
  */
 
+const bbFormats = new Set(['bigwig', 'bw', 'bigbed', 'bb', 'biginteract', 'biggenepred', 'bignarrowpeak']);
 
 function FeatureSource(config, genome) {
 
     const format = config.format ? config.format.toLowerCase() : undefined;
-    if ('bigwig' === format || 'bigbed' === format || 'bb' === format || "biginteract" === format) {
+    if (bbFormats.has(format)) {
         return new BWSource(config, genome)
     } else if ("tdf" === format) {
         return new TDFSource(config, genome)
@@ -41692,38 +41604,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) {
@@ -41824,7 +41704,7 @@ function renderFeature(feature, bpStart, xScale, pixelHeight, ctx, options) {
             // single-exon transcript
             const xLeft = Math.max(0, coord.px);
             const xRight = Math.min(pixelWidth, coord.px1);
-            const width = Math.max(coord.pw, xRight - xLeft);
+            const width = xRight - xLeft;
             ctx.fillRect(xLeft, py, width, h);
 
             // Arrows
@@ -41963,10 +41843,9 @@ function renderFeatureLabel(ctx, feature, featureX, featureX1, featureY, referen
         const textBox = ctx.measureText(name);
         const xleft = centerX - textBox.width / 2;
         const xright = centerX + textBox.width / 2;
-        if (options.labelAllFeatures || xleft > options.rowLastX[feature.row] || gtexSelection) {
-            options.rowLastX[feature.row] = xright;
+        if (options.labelAllFeatures || xleft > options.rowLastLabelX[feature.row] || gtexSelection) {
+            options.rowLastLabelX[feature.row] = xright;
             IGVGraphics.fillText(ctx, name, centerX, labelY, geneFontStyle, transform);
-
         }
     } finally {
         ctx.restore();
@@ -42267,7 +42146,7 @@ class FeatureTrack extends TrackBase {
 
     }
 
-    supportsWholeGenome() {
+    get supportsWholeGenome() {
         return (this.config.indexed === false || !this.config.indexURL) && this.config.supportsWholeGenome !== false
     }
 
@@ -42323,24 +42202,27 @@ class FeatureTrack extends TrackBase {
 
             const rowFeatureCount = [];
             options.rowLastX = [];
+            options.rowLastLabelX = [];
             for (let feature of featureList) {
-                const row = feature.row || 0;
-                if (rowFeatureCount[row] === undefined) {
-                    rowFeatureCount[row] = 1;
-                } else {
-                    rowFeatureCount[row]++;
+                if(feature.start > bpStart && feature.end < bpEnd) {
+                    const row = this.displayMode === "COLLAPSED" ? 0 : feature.row || 0;
+                    if (rowFeatureCount[row] === undefined) {
+                        rowFeatureCount[row] = 1;
+                    } else {
+                        rowFeatureCount[row]++;
+                    }
+                    options.rowLastX[row] = -Number.MAX_SAFE_INTEGER;
+                    options.rowLastLabelX[row] = -Number.MAX_SAFE_INTEGER;
                 }
-                options.rowLastX[row] = -Number.MAX_SAFE_INTEGER;
             }
+            const pixelsPerFeature = pixelWidth / Math.max(...rowFeatureCount);
 
             let lastPxEnd = [];
             for (let feature of featureList) {
                 if (feature.end < bpStart) continue
                 if (feature.start > bpEnd) break
-
                 const row = this.displayMode === 'COLLAPSED' ? 0 : feature.row;
-                const featureDensity = pixelWidth / rowFeatureCount[row];
-                options.drawLabel = options.labelAllFeatures || featureDensity > 10;
+                options.drawLabel = options.labelAllFeatures || pixelsPerFeature > 10;
                 const pxEnd = Math.ceil((feature.end - bpStart) / bpPerPixel);
                 const last = lastPxEnd[row];
                 if (!last || pxEnd > last) {
@@ -42354,7 +42236,6 @@ class FeatureTrack extends TrackBase {
                         ctx.globalAlpha = 1.0;
                     }
                     lastPxEnd[row] = pxEnd;
-
                 }
             }
 
@@ -42416,21 +42297,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.
@@ -42459,7 +42337,7 @@ class FeatureTrack extends TrackBase {
     }
 
     menuItemList() {
-        
+
         const menuItems = [];
 
         if (this.render === renderSnp) {
@@ -42487,7 +42365,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();
@@ -42503,14 +42381,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 () => {
@@ -42518,17 +42410,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() {
@@ -42549,7 +42447,7 @@ class FeatureTrack extends TrackBase {
             desc += "</html>";
             return desc
         } else {
-            return super.description();
+            return super.description()
         }
 
     };
@@ -42870,7 +42768,7 @@ class WigTrack extends TrackBase {
         }
     }
 
-    supportsWholeGenome() {
+    get supportsWholeGenome() {
         return !this.config.indexURL && this.config.supportsWholeGenome !== false
     }
 
@@ -43442,7 +43340,7 @@ class SegTrack extends TrackBase {
 
     }
 
-    supportsWholeGenome() {
+    get supportsWholeGenome() {
         return (this.config.indexed === false || !this.config.indexURL) && this.config.supportsWholeGenome !== false
     }
 
@@ -43665,7 +43563,7 @@ class MergedTrack extends TrackBase {
     }
 
 
-    supportsWholeGenome() {
+    get supportsWholeGenome() {
         return this.tracks.every(track => track.supportsWholeGenome())
     }
 }
@@ -43790,7 +43688,7 @@ class InteractionTrack extends TrackBase {
         return this
     }
 
-    supportsWholeGenome() {
+    get supportsWholeGenome() {
         return true
     }
 
@@ -44176,7 +44074,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',
@@ -44194,7 +44092,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 = [];
 
@@ -44225,7 +44123,6 @@ class InteractionTrack extends TrackBase {
         const inView = cachedFeatures.filter(f => f.drawState);
         if(inView.length === 0) return;
 
-        this.browser.circularViewVisible = true;
         const chords = makeBedPEChords(inView);
         sendChords(chords, this, refFrame, 0.5);
         //
@@ -44638,7 +44535,7 @@ class VariantTrack extends TrackBase {
 
     }
 
-    supportsWholeGenome() {
+    get supportsWholeGenome() {
         return this.config.indexed === false || this.config.supportsWholeGenome === true
     }
 
@@ -45071,7 +44968,7 @@ 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({
@@ -45091,7 +44988,7 @@ 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 = [];
 
@@ -45632,7 +45529,7 @@ class GWASTrack extends TrackBase {
     }
 
 
-    supportsWholeGenome() {
+    get supportsWholeGenome() {
         return true
     }
 
@@ -46146,7 +46043,7 @@ class GCNVTrack extends TrackBase {
         return items
     }
 
-    supportsWholeGenome() {
+    get supportsWholeGenome() {
         return false
     }
 }
@@ -46533,21 +46430,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) {
@@ -46814,7 +46708,7 @@ class SpliceJunctionTrack extends TrackBase {
 
     }
 
-    supportsWholeGenome() {
+    get supportsWholeGenome() {
         return false
     }
 
@@ -47879,30 +47773,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)",
@@ -49002,6 +48872,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)
  *
@@ -49234,7 +49167,7 @@ class RulerTrack {
         }
     }
 
-    supportsWholeGenome() {
+    get supportsWholeGenome() {
         return true
     };
 
@@ -49811,7 +49744,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) {
@@ -49856,8 +49791,8 @@ class Browser {
 
         await this.loadTrackList(trackConfigurations);
 
-        // The ruler track is not explicitly loaded, but needs updated nonetheless.
-        for (let rtv of this.trackViews.filter((tv) => tv.track.type === 'ruler')) {
+        // 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();
         }
 
@@ -50393,10 +50328,11 @@ class Browser {
             this.navbarManager.navbarDidResize(this.$navigation.width(), isWGV);
         }
 
-        await resize.call(this);
+        resize.call(this);
+        await this.updateViews();
     }
 
-    async updateViews(force) {
+    async updateViews() {
 
         const trackViews = this.trackViews;
 
@@ -50409,7 +50345,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
@@ -50454,14 +50390,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);
             // }
@@ -50539,50 +50475,6 @@ class Browser {
         }
     }
 
-    async presentMultiLocusPanel(alignment, referenceFrameLeft) {
-
-        // account for reduced viewport width as a result of adding right mate pair panel
-        const viewportWidth = this.calculateViewportWidth(1 + this.referenceFrameList.length);
-
-        const scaleFactor = this.calculateViewportWidth(this.referenceFrameList.length) / this.calculateViewportWidth(1 + this.referenceFrameList.length);
-        adjustReferenceFrame(scaleFactor, referenceFrameLeft, viewportWidth, alignment.start, alignment.lengthOnRef);
-
-        // create right mate pair reference frame
-        const mateChrName = this.genome.getChromosomeName(alignment.mate.chr);
-
-        const referenceFrameRight = createReferenceFrameWithAlignment(this.genome, mateChrName, referenceFrameLeft.bpPerPixel, viewportWidth, alignment.mate.position, alignment.lengthOnRef);
-
-        // add right mate panel beside left mate panel
-        const indexLeft = this.referenceFrameList.indexOf(referenceFrameLeft);
-        const indexRight = 1 + (this.referenceFrameList.indexOf(referenceFrameLeft));
-
-        const {$viewport} = this.trackViews[0].viewports[indexLeft];
-        const viewportColumn = viewportColumnManager.insertAfter($viewport.get(0).parentElement);
-
-        if (indexRight === this.referenceFrameList.length) {
-
-            this.referenceFrameList.push(referenceFrameRight);
-
-            for (let trackView of this.trackViews) {
-                const viewport = createViewport(trackView, viewportColumn, referenceFrameRight);
-                trackView.viewports.push(viewport);
-            }
-
-        } else {
-
-            this.referenceFrameList.splice(indexRight, 0, referenceFrameRight);
-
-            for (let trackView of this.trackViews) {
-                const viewport = createViewport(trackView, viewportColumn, referenceFrameRight);
-                trackView.viewports.splice(indexRight, 0, viewport);
-            }
-        }
-
-        this.centerLineList = this.createCenterLineList(this.columnContainer);
-
-        await resize.call(this);
-    }
-
     /**
      * Add a new multi-locus panel for the specified region
      * @param chr
@@ -50590,7 +50482,7 @@ class Browser {
      * @param end
      * @param referenceFrameLeft - optional, if supplied new panel should be placed to the immediate right
      */
-     async addMultiLocusPanel(chr, start, end, referenceFrameLeft) {
+    async addMultiLocusPanel(chr, start, end, referenceFrameLeft) {
 
         // account for reduced viewport width as a result of adding right mate pair panel
         const viewportWidth = this.calculateViewportWidth(1 + this.referenceFrameList.length);
@@ -50626,6 +50518,7 @@ class Browser {
         this.centerLineList = this.createCenterLineList(this.columnContainer);
 
         resize.call(this);
+        await this.updateViews(true);
     }
 
     async removeMultiLocusPanel(referenceFrame) {
@@ -50955,11 +50848,6 @@ class Browser {
         return surl
     }
 
-    currentReferenceFrames() {
-        const anyTrackView = this.trackViews[0];
-        return anyTrackView.viewports.map(vp => vp.referenceFrame)
-    }
-
     /**
      * 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
@@ -50997,12 +50885,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) {
@@ -51155,6 +51053,7 @@ class Browser {
     }
 
     createCircularView(container, show) {
+        show = show === true;   // convert undefined to boolean
         this.circularView = createCircularView(container, this);
         this.circularViewControl = new CircularViewControl(this.$toggle_button_container.get(0), this);
         this.circularView.setAssembly({
@@ -51162,8 +51061,8 @@ class Browser {
             id: this.genome.id,
             chromosomes: makeCircViewChromosomes(this.genome)
         });
-        this.circularViewVisible = show === true;
-
+        this.circularViewVisible = show;
+        return this.circularView
     }
 
     get circularViewVisible() {
@@ -51216,7 +51115,9 @@ async function resize() {
 
     this.updateUIWithReferenceFrameList();
 
-    await this.updateViews(true);
+     //TODO -- update view only if needed.  Reducing size never needed.  Increasing size maybe
+
+     await this.updateViews(true);
 }