igv 2.11.1 → 2.12.1

package/dist/igv.js

@@ -19911,7 +19911,7 @@
      * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
      * THE SOFTWARE.
      */
-    const knownFileExtensions = new Set(["narrowpeak", "broadpeak", "regionpeak", "peaks", "bedgraph", "wig", "gff3", "gff", "gtf", "fusionjuncspan", "refflat", "seg", "aed", "bed", "vcf", "bb", "bigbed", "biginteract", "bw", "bigwig", "bam", "tdf", "refgene", "genepred", "genepredext", "bedpe", "bp", "snp", "rmsk", "cram", "gwas", "maf", "mut"]);
+    const knownFileExtensions = new Set(["narrowpeak", "broadpeak", "regionpeak", "peaks", "bedgraph", "wig", "gff3", "gff", "gtf", "fusionjuncspan", "refflat", "seg", "aed", "bed", "vcf", "bb", "bigbed", "biginteract", "biggenepred", "bignarrowpeak", "bw", "bigwig", "bam", "tdf", "refgene", "genepred", "genepredext", "bedpe", "bp", "snp", "rmsk", "cram", "gwas", "maf", "mut"]);
     /**
      * Return a custom format object with the given name.
      * @param name
@@ -20032,6 +20032,7 @@
 
           case "bedpe":
           case "bedpe-loop":
+          case "biginteract":
             return "interact";
 
           case "bp":
@@ -20043,7 +20044,8 @@
           case "bed":
           case "bigbed":
           case "bb":
-          case "biginteract":
+          case "biggenepred":
+          case "bignarrowpeak":
             return "bedtype";
 
           default:
@@ -20287,6 +20289,30 @@
       return window.location.protocol === "https:" || window.location.hostname === "localhost";
     }
 
+    const pairs = [['A', 'T'], ['G', 'C'], ['Y', 'R'], ['W', 'S'], ['K', 'M'], ['D', 'H'], ['B', 'V']];
+    const complements = new Map();
+
+    for (let p of pairs) {
+      const p1 = p[0];
+      const p2 = p[1];
+      complements.set(p1, p2);
+      complements.set(p2, p1);
+      complements.set(p1.toLowerCase(), p2.toLowerCase());
+      complements.set(p2.toLowerCase(), p1.toLowerCase());
+    }
+
+    function reverseComplementSequence(sequence) {
+      let comp = '';
+      let idx = sequence.length;
+
+      while (idx-- > 0) {
+        const base = sequence[idx];
+        comp += complements.has(base) ? complements.get(base) : base;
+      }
+
+      return comp;
+    }
+
     /*
      * The MIT License (MIT)
      *
@@ -20440,16 +20466,21 @@
         const viewport = clickState.viewport;
 
         if (viewport.referenceFrame.bpPerPixel <= 1) {
+          const pixelWidth = viewport.getWidth();
+          const bpWindow = pixelWidth * viewport.referenceFrame.bpPerPixel;
+          const chr = viewport.referenceFrame.chr;
+          const start = Math.floor(viewport.referenceFrame.start);
+          const end = Math.ceil(start + bpWindow);
           const items = [{
-            label: 'View visible sequence...',
+            label: this.reversed ? 'View visible sequence (reversed)...' : 'View visible sequence...',
             click: async () => {
-              const pixelWidth = viewport.getWidth();
-              const bpWindow = pixelWidth * viewport.referenceFrame.bpPerPixel;
-              const chr = viewport.referenceFrame.chr;
-              const start = viewport.referenceFrame.start;
-              const end = start + bpWindow;
-              const sequence = await this.browser.genome.sequence.getSequence(chr, start, end);
-              Alert.presentAlert(sequence);
+              let seq = await this.browser.genome.sequence.getSequence(chr, start, end);
+
+              if (this.reversed) {
+                seq = reverseComplementSequence(seq);
+              }
+
+              Alert.presentAlert(seq);
             }
           }];
 
@@ -20457,13 +20488,18 @@
             items.push({
               label: 'Copy visible sequence',
               click: async () => {
-                const pixelWidth = viewport.getWidth();
-                const bpWindow = pixelWidth * viewport.referenceFrame.bpPerPixel;
-                const chr = viewport.referenceFrame.chr;
-                const start = viewport.referenceFrame.start;
-                const end = start + bpWindow;
-                const sequence = await this.browser.genome.sequence.getSequence(chr, start, end);
-                navigator.clipboard.writeText(sequence);
+                let seq = await this.browser.genome.sequence.getSequence(chr, start, end);
+
+                if (this.reversed) {
+                  seq = reverseComplementSequence(seq);
+                }
+
+                try {
+                  await navigator.clipboard.writeText(seq);
+                } catch (e) {
+                  console.error(e);
+                  Alert.presentAlert(`error copying sequence to clipboard ${e}`);
+                }
               }
             });
           }
@@ -20604,7 +20640,7 @@
         }
       }
 
-      supportsWholeGenome() {
+      get supportsWholeGenome() {
         return false;
       }
 
@@ -20672,12 +20708,13 @@
         });
         this.$viewport.append(this.$content);
         this.$content.height(this.$viewport.height());
-        this.contentDiv = this.$content.get(0);
-        this.$canvas = $$1('<canvas>');
-        this.$content.append(this.$canvas);
-        this.canvas = this.$canvas.get(0);
-        this.ctx = this.canvas.getContext("2d");
-        this.setWidth(width);
+        this.contentDiv = this.$content.get(0); // this.$canvas = $('<canvas>')
+        // this.$content.append(this.$canvas)
+        //
+        // this.canvas = this.$canvas.get(0)
+        // this.ctx = this.canvas.getContext("2d")
+
+        this.$viewport.width(width);
         this.initializationHelper();
       }
 
@@ -20759,7 +20796,6 @@
         // Maximum height of a canvas is ~32,000 pixels on Chrome, possibly smaller on other platforms
         contentHeight = Math.min(contentHeight, 32000);
         this.$content.height(contentHeight);
-        if (this.canvas._data) this.canvas._data.invalidate = true;
       }
 
       isLoading() {
@@ -20801,7 +20837,6 @@
           this.popover.dispose();
         }
 
-        this.removeMouseHandlers();
         this.$viewport.get(0).remove(); // Null out all properties -- this should not be neccessary, but just in case there is a
         // reference to self somewhere we want to free memory.
 
@@ -23058,7 +23093,7 @@
       }
     };
 
-    const _version = "2.11.1";
+    const _version = "2.12.1";
 
     function version$1() {
       return _version;
@@ -23201,7 +23236,7 @@
     class Genome {
       constructor(config, sequence, ideograms, aliases) {
         this.config = config;
-        this.id = config.id;
+        this.id = config.id || generateGenomeID(config);
         this.sequence = sequence;
         this.chromosomeNames = sequence.chromosomeNames;
         this.chromosomes = sequence.chromosomes; // An object (functions as a dictionary)
@@ -23408,6 +23443,7 @@
       }
 
       async getSequence(chr, start, end) {
+        chr = this.getChromosomeName(chr);
         return this.sequence.getSequence(chr, start, end);
       }
 
@@ -23516,6 +23552,18 @@
       }
     }
 
+    function generateGenomeID(config) {
+      if (config.id !== undefined) {
+        return config.id;
+      } else if (config.fastaURL && isString$3(config.fastaURL)) {
+        return config.fastaURL;
+      } else if (config.fastaURL && config.fastaURL.name) {
+        return config.fastaURL.name;
+      } else {
+        return ("0000" + (Math.random() * Math.pow(36, 4) << 0).toString(36)).slice(-4);
+      }
+    }
+
     /**
      * Created by dat on 9/16/16.
      */
@@ -23534,15 +23582,13 @@
         });
         this.$viewport.append(this.$spinner);
         this.$spinner.append($$1('<div>'));
-        const {
-          track
-        } = this.trackView;
+        const track = this.trackView.track;
 
         if ('sequence' !== track.type) {
           this.$zoomInNotice = this.createZoomInNotice(this.$content);
         }
 
-        if (track.name && "sequence" !== track.config.type) {
+        if (track.name && "sequence" !== track.id) {
           this.$trackLabel = $$1('<div class="igv-track-label">');
           this.$viewport.append(this.$trackLabel);
           this.setTrackLabel(track.name);
@@ -23556,6 +23602,11 @@
         this.addMouseHandlers();
       }
 
+      setContentHeight(contentHeight) {
+        super.setContentHeight(contentHeight);
+        if (this.featureCache) this.featureCache.redraw = true;
+      }
+
       setTrackLabel(label) {
         this.$trackLabel.empty();
         this.$trackLabel.html(label);
@@ -23572,10 +23623,18 @@
           this.$spinner.hide();
         }
       }
+      /**
+       * Test to determine if we are zoomed in far enough to see features. Applicable to tracks with visibility windows.
+       *
+       * As a side effect the viewports canvas is removed if zoomed out.
+       *
+       * @returns {boolean} true if we are zoomed in past visibility window, false otherwise
+       */
+
 
       checkZoomIn() {
-        const showZoomInNotice = () => {
-          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;
@@ -23584,7 +23643,8 @@
         };
 
         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;
         }
@@ -23593,30 +23653,30 @@
           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;
-            }
+        if (zoomedOutOfWindow()) {
+          // Out of visibility window
+          if (this.canvas) {
+            $$1(this.canvas).remove();
+            this.canvas = undefined; //this.featureCache = undefined
+          }
 
-            this.$zoomInNotice.show();
+          if (this.trackView.track.autoHeight) {
+            const minHeight = this.trackView.minHeight || 0;
+            this.setContentHeight(minHeight);
+          }
 
-            if (this.trackView.track.autoHeight) {
-              const minHeight = this.trackView.minHeight || 0;
-              this.setContentHeight(minHeight);
-            }
+          if (this.$zoomInNotice) {
+            this.$zoomInNotice.show();
+          }
 
-            return false;
-          } else {
+          return false;
+        } else {
+          if (this.$zoomInNotice) {
             this.$zoomInNotice.hide();
-            return true;
           }
-        }
 
-        return true;
+          return true;
+        }
       }
       /**
        * Adjust the canvas to the current genomic state.
@@ -23689,9 +23749,8 @@
         }
       }
       /**
-       * Repaint the canvas for the current genomic state.
+       * Repaint the canvas using the cached features
        *
-       * @returns {Promise<void>}
        */
 
 
@@ -23706,24 +23765,15 @@
         } = this.featureCache; //this.tile.bpPerPixel = this.referenceFrame.bpPerPixel
         // const isWGV = GenomeUtils.isWholeGenomeView(this.browser.referenceFrameList[0].chr)
 
-        const isWGV = GenomeUtils.isWholeGenomeView(this.referenceFrame.chr);
-        let pixelWidth;
-        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();
-        } // For deep tracks we paint a canvas == 3*viewportHeight centered on the current vertical scroll position
-
+        const isWGV = GenomeUtils.isWholeGenomeView(this.referenceFrame.chr); // Canvas dimensions. There is no left-right panning for WGV so canvas width is viewport width.
+        // For deep tracks we paint a canvas == 3*viewportHeight centered on the current vertical scroll position
 
+        const pixelWidth = isWGV ? this.$viewport.width() : 3 * this.$viewport.width();
         const viewportHeight = this.$viewport.height();
         const contentHeight = this.getContentHeight();
         const minHeight = roiFeatures ? Math.max(contentHeight, viewportHeight) : contentHeight; // Need to fill viewport for ROIs.
 
-        let pixelHeight = Math.min(minHeight, 3 * viewportHeight);
+        const pixelHeight = Math.min(minHeight, 3 * viewportHeight);
 
         if (0 === pixelWidth || 0 === pixelHeight) {
           if (this.canvas) {
@@ -23733,26 +23783,22 @@
           return;
         }
 
-        const canvasTop = Math.max(0, -this.$content.position().top - viewportHeight); // Always use high DPI if in compressed display mode, otherwise use preference setting;
-
-        let devicePixelRatio;
-
-        if ("FILL" === this.trackView.track.displayMode) {
-          devicePixelRatio = window.devicePixelRatio;
-        } else {
-          devicePixelRatio = this.trackView.track.supportHiDPI === false ? 1 : window.devicePixelRatio;
-        }
-
-        const pixelXOffset = Math.round((startBP - this.referenceFrame.start) / this.referenceFrame.bpPerPixel);
+        const canvasTop = Math.max(0, -this.$content.position().top - viewportHeight);
+        const bpPerPixel = this.referenceFrame.bpPerPixel;
+        const startBP = this.referenceFrame.start - (isWGV ? 0 : pixelWidth / 3 * bpPerPixel);
+        const endBP = this.referenceFrame.end + (isWGV ? 0 : pixelWidth / 3 * bpPerPixel);
+        const pixelXOffset = Math.round((startBP - this.referenceFrame.start) / bpPerPixel);
         const newCanvas = $$1('<canvas class="igv-canvas">').get(0);
-        const ctx = newCanvas.getContext("2d");
         newCanvas.style.width = pixelWidth + "px";
         newCanvas.style.height = pixelHeight + "px";
+        newCanvas.style.left = pixelXOffset + "px";
+        newCanvas.style.top = canvasTop + "px"; // Always use high DPI if in "FILL" display mode, otherwise use track setting;
+
+        const devicePixelRatio = "FILL" === this.trackView.track.displayMode || this.trackView.track.supportHiDPI !== false ? window.devicePixelRatio : 1;
         newCanvas.width = devicePixelRatio * pixelWidth;
         newCanvas.height = devicePixelRatio * pixelHeight;
+        const ctx = newCanvas.getContext("2d");
         ctx.scale(devicePixelRatio, devicePixelRatio);
-        newCanvas.style.left = pixelXOffset + "px";
-        newCanvas.style.top = canvasTop + "px";
         ctx.translate(0, -canvasTop);
         const drawConfiguration = {
           context: ctx,
@@ -23768,23 +23814,23 @@
           viewport: this,
           viewportWidth: this.$viewport.width()
         };
-        this.draw(drawConfiguration, features, roiFeatures); // Attach metadata to canvas
-
-        newCanvas._data = {
-          chr: this.referenceFrame.chr,
-          startBP,
-          endBP,
-          bpPerPixel,
-          top: canvasTop,
-          bottom: canvasTop + pixelHeight
-        };
+        this.draw(drawConfiguration, features, roiFeatures);
+        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));
       }
       /**
@@ -23824,15 +23870,16 @@
       }
 
       savePNG() {
-        if (!this.ctx) return;
-        const canvasMetadata = this.canvas._data;
-        const canvasTop = canvasMetadata ? canvasMetadata.top : 0;
+        if (!this.canvas) return;
+        const canvasMetadata = this.featureCache;
+        const canvasTop = canvasMetadata ? canvasMetadata.canvasTop : 0;
         const devicePixelRatio = window.devicePixelRatio;
         const w = this.$viewport.width() * devicePixelRatio;
         const h = this.$viewport.height() * devicePixelRatio;
         const x = -$$1(this.canvas).position().left * devicePixelRatio;
         const y = (-this.$content.position().top - canvasTop) * devicePixelRatio;
-        const imageData = this.ctx.getImageData(x, y, w, h);
+        const ctx = this.canvas.getContext("2d");
+        const imageData = ctx.getImageData(x, y, w, h);
         const exportCanvas = document.createElement('canvas');
         const exportCtx = exportCanvas.getContext('2d');
         exportCanvas.width = imageData.width;
@@ -23970,6 +24017,22 @@
         }
       }
 
+      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'
@@ -23987,36 +24050,42 @@
       }
 
       addMouseHandlers() {
-        this.addViewportContextMenuHandler(this.$viewport.get(0));
-        this.addViewportMouseDownHandler(this.$viewport.get(0));
-        this.addViewportTouchStartHandler(this.$viewport.get(0));
-        this.addViewportMouseUpHandler(this.$viewport.get(0));
-        this.addViewportTouchEndHandler(this.$viewport.get(0));
-        this.addViewportClickHandler(this.$viewport.get(0));
+        const viewport = this.$viewport.get(0);
+        this.addViewportContextMenuHandler(viewport);
 
-        if (this.trackView.track.name && "sequence" !== this.trackView.track.config.type) {
-          this.addTrackLabelClickHandler(this.$trackLabel.get(0));
-        }
-      }
+        const md = event => {
+          this.enableClick = true;
+          this.browser.mouseDownOnViewport(event, this);
+          pageCoordinates$1(event);
+        };
 
-      removeMouseHandlers() {
-        this.removeViewportContextMenuHandler(this.$viewport.get(0));
-        this.removeViewportMouseDownHandler(this.$viewport.get(0));
-        this.removeViewportTouchStartHandler(this.$viewport.get(0));
-        this.removeViewportMouseUpHandler(this.$viewport.get(0));
-        this.removeViewportTouchEndHandler(this.$viewport.get(0));
-        this.removeViewportClickHandler(this.$viewport.get(0));
+        viewport.addEventListener('mousedown', md);
+        viewport.addEventListener('touchstart', md);
+
+        const mu = event => {
+          // Any mouse up cancels drag and scrolling
+          if (this.browser.dragObject || this.browser.isScrolling) {
+            this.browser.cancelTrackPan(); // event.preventDefault();
+            // event.stopPropagation();
+
+            this.enableClick = false; // Until next mouse down
+          } else {
+            this.browser.cancelTrackPan();
+            this.browser.endTrackDrag();
+          }
+        };
+
+        viewport.addEventListener('mouseup', mu);
+        viewport.addEventListener('touchend', mu);
+        this.addViewportClickHandler(this.$viewport.get(0));
 
         if (this.trackView.track.name && "sequence" !== this.trackView.track.config.type) {
-          this.removeTrackLabelClickHandler(this.$trackLabel.get(0));
+          this.addTrackLabelClickHandler(this.$trackLabel.get(0));
         }
       }
 
       addViewportContextMenuHandler(viewport) {
-        this.boundContextMenuHandler = contextMenuHandler.bind(this);
-        viewport.addEventListener('contextmenu', this.boundContextMenuHandler);
-
-        function contextMenuHandler(event) {
+        viewport.addEventListener('contextmenu', event => {
           // Ignore if we are doing a drag.  This can happen with touch events.
           if (this.browser.dragObject) {
             return false;
@@ -24056,55 +24125,12 @@
             click: () => this.saveSVG()
           });
           this.browser.menuPopup.presentTrackContextMenu(event, menuItems);
-        }
-      }
-
-      removeViewportContextMenuHandler(viewport) {
-        viewport.removeEventListener('contextmenu', this.boundContextMenuHandler);
-      }
-
-      addViewportMouseDownHandler(viewport) {
-        this.boundMouseDownHandler = mouseDownHandler.bind(this);
-        viewport.addEventListener('mousedown', this.boundMouseDownHandler);
-      }
-
-      removeViewportMouseDownHandler(viewport) {
-        viewport.removeEventListener('mousedown', this.boundMouseDownHandler);
-      }
-
-      addViewportTouchStartHandler(viewport) {
-        this.boundTouchStartHandler = mouseDownHandler.bind(this);
-        viewport.addEventListener('touchstart', this.boundTouchStartHandler);
-      }
-
-      removeViewportTouchStartHandler(viewport) {
-        viewport.removeEventListener('touchstart', this.boundTouchStartHandler);
-      }
-
-      addViewportMouseUpHandler(viewport) {
-        this.boundMouseUpHandler = mouseUpHandler.bind(this);
-        viewport.addEventListener('mouseup', this.boundMouseUpHandler);
-      }
-
-      removeViewportMouseUpHandler(viewport) {
-        viewport.removeEventListener('mouseup', this.boundMouseUpHandler);
-      }
-
-      addViewportTouchEndHandler(viewport) {
-        this.boundTouchEndHandler = mouseUpHandler.bind(this);
-        viewport.addEventListener('touchend', this.boundTouchEndHandler);
-      }
-
-      removeViewportTouchEndHandler(viewport) {
-        viewport.removeEventListener('touchend', this.boundTouchEndHandler);
+        });
       }
 
       addViewportClickHandler(viewport) {
-        this.boundClickHandler = clickHandler.bind(this);
-        viewport.addEventListener('click', this.boundClickHandler);
-
-        function clickHandler(event) {
-          if (this.enableClick) {
+        viewport.addEventListener('click', event => {
+          if (this.enableClick && this.canvas) {
             if (3 === event.which || event.ctrlKey) {
               return;
             } // Close any currently open popups
@@ -24178,18 +24204,11 @@
 
             lastClickTime = time;
           }
-        }
-      }
-
-      removeViewportClickHandler(viewport) {
-        viewport.removeEventListener('click', this.boundClickHandler);
+        });
       }
 
       addTrackLabelClickHandler(trackLabel) {
-        this.boundTrackLabelClickHandler = clickHandler.bind(this);
-        trackLabel.addEventListener('click', this.boundTrackLabelClickHandler);
-
-        function clickHandler(event) {
+        trackLabel.addEventListener('click', event => {
           event.stopPropagation();
           const {
             track
@@ -24210,34 +24229,11 @@
             this.popover = new Popover(this.browser.columnContainer, track.name || '');
             this.popover.presentContentWithEvent(event, str);
           }
-        }
-      }
-
-      removeTrackLabelClickHandler(trackLabel) {
-        trackLabel.removeEventListener('click', this.boundTrackLabelClickHandler);
+        });
       }
 
     }
 
-    function mouseDownHandler(event) {
-      this.enableClick = true;
-      this.browser.mouseDownOnViewport(event, this);
-      pageCoordinates$1(event);
-    }
-
-    function mouseUpHandler(event) {
-      // Any mouse up cancels drag and scrolling
-      if (this.browser.dragObject || this.browser.isScrolling) {
-        this.browser.cancelTrackPan(); // event.preventDefault();
-        // event.stopPropagation();
-
-        this.enableClick = false; // Until next mouse down
-      } else {
-        this.browser.cancelTrackPan();
-        this.browser.endTrackDrag();
-      }
-    }
-
     function createClickState(event, viewport) {
       const referenceFrame = viewport.referenceFrame;
       const viewportCoords = translateMouseCoordinates$1(event, viewport.contentDiv);
@@ -24456,10 +24452,12 @@
                 end: bp(this.rulerViewport.referenceFrame, left + width)
               };
               validateLocusExtent(this.rulerViewport.browser.genome.getChromosome(this.rulerViewport.referenceFrame.chr).bpLength, extent, this.rulerViewport.browser.minimumBases());
-              this.rulerViewport.referenceFrame.bpPerPixel = (Math.round(extent.end) - Math.round(extent.start)) / this.rulerViewport.contentDiv.clientWidth;
-              this.rulerViewport.referenceFrame.start = Math.round(extent.start);
-              this.rulerViewport.referenceFrame.end = Math.round(extent.end);
-              this.rulerViewport.browser.updateViews(this.rulerViewport.referenceFrame);
+              const newStart = Math.round(extent.start);
+              const newEnd = Math.round(extent.end);
+              this.rulerViewport.referenceFrame.bpPerPixel = (newEnd - newStart) / this.rulerViewport.contentDiv.clientWidth;
+              this.rulerViewport.referenceFrame.start = newStart;
+              this.rulerViewport.referenceFrame.end = newEnd;
+              this.rulerViewport.browser.updateViews();
             }
           }
         }
@@ -25469,7 +25467,7 @@
         return this.firstAlignment.isProperPair();
       }
 
-      get tlen() {
+      get fragmentLength() {
         return Math.abs(this.firstAlignment.fragmentLength);
       }
 
@@ -26958,7 +26956,7 @@
           const lseq = readInt(ba, offset + 20);
           const mateChrIdx = readInt(ba, offset + 24);
           const matePos = readInt(ba, offset + 28);
-          const tlen = readInt(ba, offset + 32);
+          const fragmentLength = readInt(ba, offset + 32);
           let readName = [];
 
           for (let j = 0; j < nl - 1; ++j) {
@@ -26999,7 +26997,7 @@
           alignment.readName = readName;
           alignment.cigar = cigar;
           alignment.lengthOnRef = lengthOnRef;
-          alignment.fragmentLength = tlen;
+          alignment.fragmentLength = fragmentLength;
           alignment.mq = mq;
           BamUtils.bam_tag2cigar(ba, blockEnd, p, lseq, alignment, cigarArray);
           alignment.end = alignment.start + alignment.lengthOnRef;
@@ -45433,6 +45431,10 @@
      * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
      * THE SOFTWARE.
      */
+
+    const fixColor = colorString => {
+      return colorString.indexOf(",") > 0 && !colorString.startsWith("rgb") ? `rgb(${colorString})` : colorString;
+    };
     /**
      * A collection of properties and methods shared by all (or most) track types.
      *
@@ -45441,6 +45443,7 @@
      * @constructor
      */
 
+
     class TrackBase {
       constructor(config, browser) {
         this.browser = browser;
@@ -45474,8 +45477,8 @@
 
         this.id = this.config.id === undefined ? this.name : this.config.id;
         this.order = config.order;
-        this.color = config.color;
-        this.altColor = config.altColor;
+        if (config.color) this.color = fixColor(config.color);
+        if (config.altColor) this.altColor = fixColor(config.altColor);
 
         if ("civic-ws" === config.sourceType) {
           // Ugly proxy for specialized track type
@@ -45588,7 +45591,7 @@
         return state;
       }
 
-      supportsWholeGenome() {
+      get supportsWholeGenome() {
         return false;
       }
       /**
@@ -47679,7 +47682,7 @@
         return this.tracks.find(t => name === t.name);
       }
 
-      getChordset(name) {
+      getChordSet(name) {
         return this.chordSets.find(cs => name === cs.name);
       }
 
@@ -47789,9 +47792,9 @@
         buttonContainer.appendChild(this.showControlsButton);
         this.showControlsButton.innerText = 'none' === this.controlPanel.style.display ? 'Show Controls' : 'Hide Controls';
         this.showControlsButton.addEventListener('click', event => {
-          const trackPanelRows = this.controlPanel.querySelectorAll('div');
+          const panelRows = this.controlPanel.querySelectorAll('div');
 
-          if (trackPanelRows.length > 0) {
+          if (panelRows.length > 0) {
             if ('none' === this.controlPanel.style.display) {
               this.controlPanel.style.display = 'flex';
               event.target.innerText = 'Hide Controls';
@@ -47871,10 +47874,10 @@
         hideShowButton.innerText = true === chordSet.visible ? 'Hide' : 'Show';
         hideShowButton.addEventListener('click', event => {
           if (true === chordSet.visible) {
-            this.hideTrack(chordSet.name);
+            this.hideChordSet(chordSet.name);
             event.target.innerText = "Show";
           } else {
-            this.showTrack(chordSet.name);
+            this.showChordSet(chordSet.name);
             event.target.innerText = "Hide";
           }
         }); // The alpha range slider.  Create this here so we can reference it from the color picker
@@ -47901,7 +47904,7 @@
             rgbaString
           }) => {
             colorPickerButton.style.backgroundColor = setAlpha(rgbaString, 1);
-            this.setTrackColor(chordSet.name, rgbaString);
+            this.setColor(chordSet.name, rgbaString);
             alphaSlider.value = alphaToValue(getAlpha(chordSet.color));
           }
         };
@@ -47919,7 +47922,7 @@
 
         alphaSlider.oninput = () => {
           const v = valueToAlpha(alphaSlider.value);
-          this.setTrackColor(chordSet.name, setAlpha(chordSet.color, v));
+          this.setColor(chordSet.name, setAlpha(chordSet.color, v));
           picker.setColor(chordSet.color);
         };
 
@@ -47938,12 +47941,14 @@
 
 
       setAssembly(igvGenome) {
-        if (this.genomeId === igvGenome.id) {
+        const id = this.genomeId || guid();
+
+        if (this.genomeId === id) {
           return;
         }
 
         this.chordManager.clearChords();
-        this.genomeId = igvGenome.id;
+        this.genomeId = id;
         this.chrNames = new Set(igvGenome.chromosomes.map(chr => shortChrName$1(chr.name)));
         const regions = [];
         const colors = [];
@@ -47962,7 +47967,7 @@
         this.assembly = {
           name: igvGenome.name,
           sequence: {
-            trackId: igvGenome.id,
+            trackId: id,
             type: 'ReferenceSequenceTrack',
             adapter: {
               type: 'FromConfigSequenceAdapter',
@@ -48000,7 +48005,7 @@
 
 
       addChords(newChords, options = {}) {
-        const tmp = options.track || options.name || "*";
+        const tmp = options.name || options.track || "*";
         const trackName = tmp.split(' ')[0].replaceAll("%20", " ");
         const chordSetName = tmp.replaceAll("%20", " ");
         const chordSet = {
@@ -48050,20 +48055,6 @@
       clearSelection() {
         this.viewState.pluginManager.rootModel.session.clearSelection();
       }
-
-      getFeature(featureId) {
-        // TODO -- broken
-        // const display = this.viewState.pluginManager.rootModel.session.view.tracks[0].displays[0]
-        // const feature = display.data.features.get(featureId)
-        // return feature;
-        const features = [...this.viewState.config.tracks[0].adapter.features.value];
-
-        for (let f of features) {
-          if (featureId === f.uniqueId) {
-            return f;
-          }
-        }
-      }
       /**
        * Deprecated, use "visible" property
        */
@@ -48089,25 +48080,25 @@
         this.parent.style.display = isVisible ? 'block' : 'none';
       }
 
-      hideTrack(trackName) {
-        let track = this.getTrack(trackName);
+      hideChordSet(trackName) {
+        let cs = this.getChordSet(trackName);
 
-        if (track) {
-          track.visible = false;
+        if (cs) {
+          cs.visible = false;
           this.render();
         } else {
           console.warn(`No track with name: ${name}`);
         }
       }
 
-      showTrack(trackName) {
-        let track = this.getTrack(trackName);
+      showChordSet(name) {
+        let cs = this.getChordSet(name);
 
-        if (track) {
-          track.visible = true;
+        if (cs) {
+          cs.visible = true;
           this.render();
         } else {
-          console.warn(`No track with name: ${trackName}`);
+          console.warn(`No track with name: ${name}`);
         }
       } // showTrack(trackID) {
       //     let idx = this.tracks.findIndex(t => trackID === t.id)
@@ -48134,12 +48125,12 @@
         this.render();
       }
 
-      getTrack(name) {
-        return this.groupByTrack ? this.chordManager.getTrack(name) : this.chordManager.getChordset(name);
+      getChordSet(name) {
+        return this.groupByTrack ? this.chordManager.getTrack(name) : this.chordManager.getChordSet(name);
       }
 
-      setTrackColor(name, color) {
-        const t = this.getTrack(name);
+      setColor(name, color) {
+        const t = this.getChordSet(name);
 
         if (t) {
           t.color = color;
@@ -48240,7 +48231,7 @@
     }
 
     function embedCSS$1() {
-      const css = '.igv-circview-container {\n  z-index: 2048;\n  position: absolute;\n  width: fit-content;\n  height: fit-content;\n  box-sizing: content-box;\n  color: dimgray;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 12px;\n  background-color: white;\n  border-color: dimgray;\n  border-style: solid;\n  border-width: thin;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n\n.igv-circview-toolbar {\n  position: relative;\n  width: 100%;\n  height: 32px;\n  background-color: lightgrey;\n  border-bottom-style: solid;\n  border-bottom-color: dimgray;\n  border-bottom-width: thin;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.igv-circview-toolbar-button-container {\n  height: 100%;\n  width: fit-content;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-circview-toolbar-button-container > div {\n  margin: 4px;\n}\n\n.igv-circview-track-panel {\n  z-index: 1024;\n  position: absolute;\n  top: 33px;\n  left: 0;\n  width: 100%;\n  height: fit-content;\n  border-bottom-style: solid;\n  border-bottom-color: dimgray;\n  border-bottom-width: thin;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n.igv-circview-track-panel > div {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-circview-track-panel > div > div {\n  margin: 4px;\n}\n\n.igv-circview-swatch-button {\n  cursor: pointer;\n  padding: 5px;\n  width: 8px;\n  height: 8px;\n  border: 1px solid #8d8b8b;\n  border-radius: 16px;\n}\n\n.igv-circview-button {\n  cursor: pointer;\n  padding: 5px;\n  color: #444;\n  vertical-align: middle;\n  text-align: center;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 12px;\n  border: 1px solid #8d8b8b;\n  border-radius: 4px;\n  background: #efefef;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.2);\n}\n\n.igv-circview-button:hover {\n  background: #efefef;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.6);\n}\n\n.igv-circview-button:active {\n  color: #007bff;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.6);\n}\n\n/*# sourceMappingURL=circular-view.css.map */\n';
+      const css = '.igv-circview-container {\n  z-index: 2048;\n  width: fit-content;\n  height: fit-content;\n  box-sizing: content-box;\n  color: dimgray;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 12px;\n  background-color: white;\n  border-color: dimgray;\n  border-style: solid;\n  border-width: thin;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n\n.igv-circview-toolbar {\n  position: relative;\n  width: 100%;\n  height: 32px;\n  background-color: lightgrey;\n  border-bottom-style: solid;\n  border-bottom-color: dimgray;\n  border-bottom-width: thin;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.igv-circview-toolbar-button-container {\n  height: 100%;\n  width: fit-content;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-circview-toolbar-button-container > div {\n  margin: 4px;\n}\n\n.igv-circview-track-panel {\n  z-index: 1024;\n  position: absolute;\n  top: 33px;\n  left: 0;\n  width: 100%;\n  height: fit-content;\n  border-bottom-style: solid;\n  border-bottom-color: dimgray;\n  border-bottom-width: thin;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n.igv-circview-track-panel > div {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-circview-track-panel > div > div {\n  margin: 4px;\n}\n\n.igv-circview-swatch-button {\n  cursor: pointer;\n  padding: 5px;\n  width: 8px;\n  height: 8px;\n  border: 1px solid #8d8b8b;\n  border-radius: 16px;\n}\n\n.igv-circview-button {\n  cursor: pointer;\n  padding: 5px;\n  color: #444;\n  vertical-align: middle;\n  text-align: center;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 12px;\n  border: 1px solid #8d8b8b;\n  border-radius: 4px;\n  background: #efefef;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.2);\n}\n\n.igv-circview-button:hover {\n  background: #efefef;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.6);\n}\n\n.igv-circview-button:active {\n  color: #007bff;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.6);\n}\n\n/*# sourceMappingURL=circular-view.css.map */\n';
       const style = document.createElement('style');
       style.setAttribute('type', 'text/css');
       style.innerHTML = css;
@@ -48398,7 +48389,9 @@
         track: chordSetName,
         color: chordSetColor,
         trackColor: trackColor
-      });
+      }); // show circular view if hidden
+
+      if (!track.browser.circularViewVisible) track.browser.circularViewVisible = true;
     }
 
     function createCircularView(el, browser) {
@@ -48411,22 +48404,26 @@
 
           function addFrameForFeature(feature) {
             feature.chr = browser.genome.getChromosomeName(feature.refName);
+            let frameFound = false;
 
-            for (let referenceFrame of browser.currentReferenceFrames()) {
+            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);
+            }
           }
         }
       });
@@ -48866,7 +48863,7 @@
         } // Add chords to JBrowse circular view, if present
 
 
-        if (this.browser.circularView && true === this.browser.circularViewVisible && (this.alignmentTrack.hasPairs || this.alignmentTrack.hasSupplemental)) {
+        if (this.browser.circularView && (this.alignmentTrack.hasPairs || this.alignmentTrack.hasSupplemental)) {
           menuItems.push('<hr/>');
 
           if (this.alignmentTrack.hasPairs) {
@@ -49383,7 +49380,7 @@
             for (let alignment of alignmentRow.alignments) {
               this.hasPairs = this.hasPairs || alignment.isPaired();
 
-              if (this.browser.circularView && true === this.browser.circularViewVisible) {
+              if (this.browser.circularView) {
                 // This is an expensive check, only do it if needed
                 this.hasSupplemental = this.hasSupplemental || alignment.hasTag('SA');
               }
@@ -49733,9 +49730,7 @@
             list.push({
               label: 'View read sequence',
               click: () => {
-                const alignment = clickedAlignment;
-                if (!alignment) return;
-                const seqstring = alignment.seq; //.map(b => String.fromCharCode(b)).join("");
+                const seqstring = clickedAlignment.seq; //.map(b => String.fromCharCode(b)).join("");
 
                 if (!seqstring || "*" === seqstring) {
                   Alert.presentAlert("Read sequence: *");
@@ -49748,12 +49743,16 @@
             if (isSecureContext()) {
               list.push({
                 label: 'Copy read sequence',
-                click: () => {
-                  const alignment = clickedAlignment;
-                  if (!alignment) return;
-                  const seqstring = alignment.seq; //.map(b => String.fromCharCode(b)).join("");
+                click: async () => {
+                  const seq = clickedAlignment.seq; //.map(b => String.fromCharCode(b)).join("");
 
-                  navigator.clipboard.writeText(seqstring);
+                  try {
+                    //console.log(`seq: ${seq}`)
+                    await navigator.clipboard.writeText(seq);
+                  } catch (e) {
+                    console.error(e);
+                    Alert.presentAlert(`error copying sequence to clipboard ${e}`);
+                  }
                 }
               });
             }
@@ -49763,7 +49762,7 @@
         } // 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',
@@ -49867,11 +49866,15 @@
           case "unexpectedPair":
           case "pairOrientation":
             if (this.pairOrientation && alignment.pairOrientation) {
-              var oTypes = orientationTypes[this.pairOrientation];
+              const oTypes = orientationTypes[this.pairOrientation];
 
               if (oTypes) {
-                var pairColor = this.pairColors[oTypes[alignment.pairOrientation]];
-                if (pairColor) color = pairColor;
+                const pairColor = this.pairColors[oTypes[alignment.pairOrientation]];
+
+                if (pairColor) {
+                  color = pairColor;
+                  break;
+                }
               }
             }
 
@@ -50191,7 +50194,10 @@
             currentViewport = this;
             this.$tooltip.show();
           } else if (currentViewport.guid !== this.guid) {
-            currentViewport.$tooltip.hide();
+            if (currentViewport.$tooltip) {
+              currentViewport.$tooltip.hide();
+            }
+
             this.$tooltip.show();
             currentViewport = this;
           } else {
@@ -50225,7 +50231,9 @@
           }); // hide tooltip when movement stops
 
           clearTimeout(timer);
-          timer = setTimeout(() => this.$tooltip.hide(), toolTipTimeout);
+          timer = setTimeout(() => {
+            if (this.$tooltip) this.$tooltip.hide();
+          }, toolTipTimeout);
         }
       }
 
@@ -50240,65 +50248,6 @@
 
     }
 
-    const viewportColumnManager = {
-      createColumns: (columnContainer, count) => {
-        for (let i = 0; i < count; i++) {
-          if (0 === i) {
-            createColumn(columnContainer, 'igv-column');
-          } else {
-            columnContainer.appendChild(div$1({
-              class: 'igv-column-shim'
-            }));
-            createColumn(columnContainer, 'igv-column');
-          }
-        }
-      },
-      removeColumnAtIndex: (i, column) => {
-        const shim = 0 === i ? column.nextElementSibling : column.previousElementSibling;
-        column.remove();
-        shim.remove();
-      },
-      insertAfter: referenceElement => {
-        const shim = div$1({
-          class: 'igv-column-shim'
-        });
-        insertElementAfter(shim, referenceElement);
-        const column = div$1({
-          class: 'igv-column'
-        });
-        insertElementAfter(column, shim);
-        return column;
-      },
-      insertBefore: (referenceElement, count) => {
-        for (let i = 0; i < count; i++) {
-          const column = div$1({
-            class: 'igv-column'
-          });
-          insertElementBefore(column, referenceElement);
-
-          if (count > 1 && i > 0) {
-            const columnShim = div$1({
-              class: 'igv-column-shim'
-            });
-            insertElementBefore(columnShim, column);
-          }
-        }
-      },
-      indexOfColumn: (columnContainer, column) => {
-        const allColumns = columnContainer.querySelectorAll('.igv-column');
-
-        for (let i = 0; i < allColumns.length; i++) {
-          const c = allColumns[i];
-
-          if (c === column) {
-            return i;
-          }
-        }
-
-        return undefined;
-      }
-    };
-
     /*
      * The MIT License (MIT)
      *
@@ -50330,60 +50279,30 @@
       }
 
       initializationHelper() {
-        this.$ideogramCanvas = $$1('<canvas>', {
-          class: 'igv-ideogram-canvas'
-        });
-        this.$ideogramCanvas.insertBefore(this.$canvas);
-        const canvas = this.$ideogramCanvas.get(0);
-        this.ideogram_ctx = canvas.getContext('2d');
-        this.$canvas.remove();
-        this.canvas = undefined;
-        this.ctx = undefined;
+        this.canvas = document.createElement('canvas');
+        this.canvas.className = 'igv-ideogram-canvas';
+        this.$content.append($$1(this.canvas));
+        this.ideogram_ctx = this.canvas.getContext('2d');
         this.addMouseHandlers();
       }
 
       addMouseHandlers() {
-        this.addBrowserObserver();
         this.addViewportClickHandler(this.$viewport.get(0));
       }
 
-      removeMouseHandlers() {
-        this.removeBrowserObserver();
-        this.removeViewportClickHandler(this.$viewport.get(0));
-      }
-
-      addBrowserObserver() {
-        function observerHandler(referenceFrameList) {
-          const column = this.$viewport.get(0).parentElement;
-
-          if (null !== column) {
-            const index = viewportColumnManager.indexOfColumn(this.browser.columnContainer, column); // console.log(`ideogram-viewport - locus-change-handler index(${ index }) ${ referenceFrameList[ index ].getLocusString() } ${ Date.now() } `)
-
-            this.update(this.ideogram_ctx, this.$viewport.width(), this.$viewport.height(), referenceFrameList[index]);
-          }
-        }
-
-        this.boundObserverHandler = observerHandler.bind(this);
-        this.browser.on('locuschange', this.boundObserverHandler);
-      }
-
-      removeBrowserObserver() {
-        this.browser.off('locuschange', this.boundObserverHandler);
-      }
-
       addViewportClickHandler(viewport) {
+        this.boundClickHandler = clickHandler.bind(this);
+        viewport.addEventListener('click', this.boundClickHandler);
+
         function clickHandler(event) {
-          const column = viewport.parentElement;
-          const index = viewportColumnManager.indexOfColumn(this.browser.columnContainer, column);
-          const referenceFrame = this.browser.referenceFrameList[index];
           const {
             xNormalized,
             width
           } = translateMouseCoordinates$1(event, this.ideogram_ctx.canvas);
           const {
             bpLength
-          } = this.browser.genome.getChromosome(referenceFrame.chr);
-          const locusLength = referenceFrame.bpPerPixel * width;
+          } = this.browser.genome.getChromosome(this.referenceFrame.chr);
+          const locusLength = this.referenceFrame.bpPerPixel * width;
           const chrCoveragePercentage = locusLength / bpLength;
           let xPercentage = xNormalized;
 
@@ -50397,18 +50316,11 @@
 
           const ss = Math.round((xPercentage - chrCoveragePercentage / 2.0) * bpLength);
           const ee = Math.round((xPercentage + chrCoveragePercentage / 2.0) * bpLength);
-          referenceFrame.start = ss;
-          referenceFrame.end = ee;
-          referenceFrame.bpPerPixel = (ee - ss) / width;
-          this.browser.updateViews(true);
+          this.referenceFrame.start = ss;
+          this.referenceFrame.end = ee;
+          this.referenceFrame.bpPerPixel = (ee - ss) / width;
+          this.browser.updateViews(this.referenceFrame, this.browser.trackViews, true);
         }
-
-        this.boundClickHandler = clickHandler.bind(this);
-        viewport.addEventListener('click', this.boundClickHandler);
-      }
-
-      removeViewportClickHandler(viewport) {
-        viewport.removeEventListener('click', this.boundClickHandler);
       }
 
       setWidth(width) {
@@ -50426,14 +50338,22 @@
         context.restore();
       }
 
-      update(context, pixelWidth, pixelHeight, referenceFrame) {
-        this.$canvas.hide();
-        IGVGraphics.configureHighDPICanvas(context, pixelWidth, pixelHeight);
+      repaint() {
+        this.draw({
+          referenceFrame: this.referenceFrame
+        });
+      }
+
+      draw(_ref) {
+        let {
+          referenceFrame
+        } = _ref;
+        IGVGraphics.configureHighDPICanvas(this.ideogram_ctx, this.$viewport.width(), this.$viewport.height());
         this.trackView.track.draw({
-          context,
+          context: this.ideogram_ctx,
           referenceFrame,
-          pixelWidth,
-          pixelHeight
+          pixelWidth: this.$viewport.width(),
+          pixelHeight: this.$viewport.height()
         });
       }
 
@@ -50471,7 +50391,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);
@@ -50998,7 +50918,6 @@
 
     class TrackView {
       constructor(browser, columnContainer, track) {
-        this.namespace = `trackview-${guid$2()}`;
         this.browser = browser;
         this.track = track;
         track.trackView = this;
@@ -51024,7 +50943,7 @@
 
       addDOMToColumnContainer(browser, columnContainer, referenceFrameList) {
         // Axis
-        this.axis = this.createAxis(browser, this.track); // Track Viewports
+        this.axis = this.createAxis(browser, this.track); // Create a viewport for each reference frame
 
         this.viewports = [];
         const viewportWidth = browser.calculateViewportWidth(referenceFrameList.length);
@@ -51091,7 +51010,6 @@
         this.axis.remove(); // Track Viewports
 
         for (let viewport of this.viewports) {
-          viewport.removeMouseHandlers();
           viewport.$viewport.remove();
         } // SampleName Viewport
 
@@ -51209,7 +51127,7 @@
           $viewport.height(newHeight);
         }
 
-        this.sampleNameViewport.viewport.style.height = `${newHeight}px`; // If the track does not manage its own content height set it here
+        this.sampleNameViewport.viewport.style.height = `${newHeight}px`; // If the track does not manage its own content height set it equal to the viewport height here
 
         if (typeof this.track.computePixelHeight !== "function") {
           for (let vp of this.viewports) {
@@ -51261,14 +51179,6 @@
           if (viewport.isLoading()) return true;
         }
       }
-
-      resize(viewportWidth) {
-        for (let viewport of this.viewports) {
-          viewport.setWidth(viewportWidth);
-        }
-
-        this.updateViews(true);
-      }
       /**
        * Repaint all viewports without loading any new data.   Use this for events that change visual aspect of data,
        * e.g. color, sort order, etc, but do not change the genomic state.
@@ -51301,6 +51211,19 @@
       setTrackLabelName(name) {
         this.viewports.forEach(viewport => viewport.setTrackLabel(name));
       }
+      /**
+       * Called in response to a window resize event, change in # of multilocus panels, or other event that changes
+       * the width of the track view.
+       *
+       * @param viewportWidth  The width of each viewport in this track view.
+       */
+
+
+      resize(viewportWidth) {
+        for (let viewport of this.viewports) {
+          viewport.setWidth(viewportWidth);
+        }
+      }
       /**
        * Update viewports to reflect current genomic state, possibly loading additional data.
        *
@@ -51309,22 +51232,25 @@
        */
 
 
-      async updateViews(force) {
+      async updateViews() {
         if (!(this.browser && this.browser.referenceFrameList)) return;
         const visibleViewports = this.viewports.filter(viewport => viewport.isVisible()); // Shift viewports left/right to current genomic state (pans canvas)
 
-        visibleViewports.forEach(viewport => viewport.shift());
-        const isDragging = this.browser.dragObject;
+        visibleViewports.forEach(viewport => viewport.shift()); // If dragging (panning) return
 
-        if (isDragging) {
+        if (this.browser.dragObject) {
           return;
-        } // rpv: viewports whose image (canvas) does not fully cover current genomic range
+        } // Get viewports to repaint
+
 
+        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
 
-        const reloadableViewports = force ? visibleViewports : this.viewportsToReload(); // Trigger viewport to load features needed to cover current genomic range
+        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();
         }
 
@@ -51333,7 +51259,7 @@
         // 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) {
@@ -51378,23 +51304,10 @@
           } else {
             this.track.dataRange = doAutoscale(allFeatures);
           }
-        } // 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(); // Repaint sample names last
@@ -51417,24 +51330,22 @@
         }
       }
       /**
-       * 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() {
         if (!(this.browser && this.browser.referenceFrameList)) {
           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;
@@ -51488,27 +51399,6 @@
         }
       }
 
-      viewportsToReload(force) {
-        // List of viewports that need reloading
-        const viewports = this.viewports.filter(viewport => {
-          if (!viewport.isVisible()) {
-            return false;
-          }
-
-          if (!viewport.checkZoomIn()) {
-            return false;
-          } else {
-            const referenceFrame = viewport.referenceFrame;
-            const chr = viewport.referenceFrame.chr;
-            const start = referenceFrame.start;
-            const end = start + referenceFrame.toBP($$1(viewport.contentDiv).width());
-            const bpPerPixel = referenceFrame.bpPerPixel;
-            return !viewport.featureCache || !viewport.featureCache.containsRange(chr, start, end, bpPerPixel);
-          }
-        });
-        return viewports;
-      }
-
       createTrackScrollbar(browser) {
         const outerScroll = div$1();
         browser.columnContainer.querySelector('.igv-scrollbar-column').appendChild(outerScroll);
@@ -51602,7 +51492,7 @@
       }
 
       addTrackDragMouseHandlers(browser) {
-        if ('ideogram' === this.track.type || 'ruler' === this.track.type) ; else {
+        if ('ideogram' === this.track.id || 'ruler' === this.track.id) ; else {
           let currentDragHandle = undefined; // Mouse Down
 
           this.boundTrackDragMouseDownHandler = trackDragMouseDownHandler.bind(this);
@@ -51666,7 +51556,7 @@
       }
 
       removeTrackDragMouseHandlers() {
-        if ('ideogram' === this.track.type || 'ruler' === this.track.type) ; else {
+        if ('ideogram' === this.track.id || 'ruler' === this.track.id) ; else {
           this.dragHandle.removeEventListener('mousedown', this.boundTrackDragMouseDownHandler);
           document.removeEventListener('mouseup', this.boundDocumentTrackDragMouseUpHandler);
           this.dragHandle.removeEventListener('mouseup', this.boundTrackDragMouseEnterHandler);
@@ -52561,7 +52451,7 @@
             });
           }
 
-          findUTRs(exons, feature.cdStart, feature.cdEnd);
+          findUTRs$1(exons, feature.cdStart, feature.cdEnd);
           feature.exons = exons;
         } // Optional extra columns
 
@@ -52666,7 +52556,7 @@
         });
       }
 
-      findUTRs(exons, cdStart, cdEnd);
+      findUTRs$1(exons, cdStart, cdEnd);
       feature.exons = exons;
       return feature;
     }
@@ -52708,7 +52598,7 @@
         });
       }
 
-      findUTRs(exons, cdStart, cdEnd);
+      findUTRs$1(exons, cdStart, cdEnd);
       feature.exons = exons;
       return feature;
     }
@@ -52749,12 +52639,12 @@
         });
       }
 
-      findUTRs(exons, cdStart, cdEnd);
+      findUTRs$1(exons, cdStart, cdEnd);
       feature.exons = exons;
       return feature;
     }
 
-    function findUTRs(exons, cdStart, cdEnd) {
+    function findUTRs$1(exons, cdStart, cdEnd) {
       for (let exon of exons) {
         const end = exon.end;
         const start = exon.start;
@@ -56313,7 +56203,7 @@
         this.genome = genome;
         this.sourceType = config.sourceType === undefined ? "file" : config.sourceType;
         this.maxWGCount = config.maxWGCount || DEFAULT_MAX_WG_COUNT;
-        const queryableFormats = new Set(["bigwig", "bw", "bigbed", "bb", "biginteract", "tdf"]);
+        const queryableFormats = new Set(["bigwig", "bw", "bigbed", "bb", "biginteract", "biggenepred", "bignarrowpeak", "tdf"]);
 
         if (config.features && Array.isArray(config.features)) {
           // Explicit array of features
@@ -56724,10 +56614,8 @@
 
     }
 
-    //table chromatinInteract
-
     function getDecoder(definedFieldCount, fieldCount, autoSql, format) {
-      if (autoSql && 'chromatinInteract' === autoSql.table || "biginteract" === format) {
+      if ("biginteract" === format || autoSql && 'chromatinInteract' === autoSql.table || 'interact' === autoSql.table) {
         return decodeInteract;
       } else {
         const standardFieldCount = definedFieldCount - 3;
@@ -56774,6 +56662,7 @@
               });
             }
 
+            findUTRs(exons, feature.cdStart, feature.cdEnd);
             feature.exons = exons;
           }
 
@@ -56790,7 +56679,29 @@
             }
           }
         };
-      }
+      } //table chromatinInteract
+      // "Chromatin interaction between two regions"
+      //     (
+      //     string chrom;      "Chromosome (or contig, scaffold, etc.). For interchromosomal, use 2 records"
+      //     uint chromStart;   "Start position of lower region. For interchromosomal, set to chromStart of this region"
+      //     uint chromEnd;     "End position of upper region. For interchromosomal, set to chromEnd of this region"
+      //     string name;       "Name of item, for display"
+      //     uint score;        "Score from 0-1000"
+      //     double value;      "Strength of interaction or other data value. Typically basis for score"
+      //     string exp;        "Experiment name (metadata for filtering). Use . if not applicable"
+      //     string color;      "Item color.  Specified as r,g,b or hexadecimal #RRGGBB or html color name, as in //www.w3.org/TR/css3-color/#html4."
+      //     string region1Chrom;  "Chromosome of lower region. For non-directional interchromosomal, chrom of this region."
+      //     uint region1Start;  "Start position of lower/this region"
+      //     uint region1End;    "End position in chromosome of lower/this region"
+      //     string region1Name;  "Identifier of lower/this region"
+      //     string region1Strand; "Orientation of lower/this region: + or -.  Use . if not applicable"
+      //     string region2Chrom; "Chromosome of upper region. For non-directional interchromosomal, chrom of other region"
+      //     uint region2Start;  "Start position in chromosome of upper/this region"
+      //     uint region2End;    "End position in chromosome of upper/this region"
+      //     string region2Name; "Identifier of upper/this region"
+      //     string region2Strand; "Orientation of upper/this region: + or -.  Use . if not applicable"
+      //     )
+
 
       function decodeInteract(feature, tokens) {
         feature.chr1 = tokens[5];
@@ -56807,6 +56718,25 @@
       }
     }
 
+    function findUTRs(exons, cdStart, cdEnd) {
+      for (let exon of exons) {
+        const end = exon.end;
+        const start = exon.start;
+
+        if (end < cdStart || start > cdEnd) {
+          exon.utr = true;
+        } else {
+          if (cdStart >= start && cdStart <= end) {
+            exon.cdStart = cdStart;
+          }
+
+          if (cdEnd >= start && cdEnd <= end) {
+            exon.cdEnd = cdEnd;
+          }
+        }
+      }
+    }
+
     function scoreShade(score, color) {
       const alpha = Math.min(1, 0.11 + 0.89 * (score / 779));
       return alpha.toString();
@@ -58252,7 +58182,7 @@
         return features;
       }
 
-      supportsWholeGenome() {
+      get supportsWholeGenome() {
         return true;
       }
 
@@ -58357,11 +58287,12 @@
      * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
      * THE SOFTWARE.
      */
+    const bbFormats = new Set(['bigwig', 'bw', 'bigbed', 'bb', 'biginteract', 'biggenepred', 'bignarrowpeak']);
 
     function FeatureSource(config, genome) {
       const format = config.format ? config.format.toLowerCase() : undefined;
 
-      if ('bigwig' === format || 'bigbed' === format || 'bb' === format || "biginteract" === format) {
+      if (bbFormats.has(format)) {
         return new BWSource(config, genome);
       } else if ("tdf" === format) {
         return new TDFSource(config, genome);
@@ -58370,30 +58301,6 @@
       }
     }
 
-    const pairs = [['A', 'T'], ['G', 'C'], ['Y', 'R'], ['W', 'S'], ['K', 'M'], ['D', 'H'], ['B', 'V']];
-    const complements = new Map();
-
-    for (let p of pairs) {
-      const p1 = p[0];
-      const p2 = p[1];
-      complements.set(p1, p2);
-      complements.set(p2, p1);
-      complements.set(p1.toLowerCase(), p2.toLowerCase());
-      complements.set(p2.toLowerCase(), p1.toLowerCase());
-    }
-
-    function reverseComplementSequence(sequence) {
-      let comp = '';
-      let idx = sequence.length;
-
-      while (idx-- > 0) {
-        const base = sequence[idx];
-        comp += complements.has(base) ? complements.get(base) : base;
-      }
-
-      return comp;
-    }
-
     const GtexUtils = {
       getTissueInfo: function (datasetId, baseURL) {
         datasetId = datasetId || 'gtex_v8';
@@ -58489,7 +58396,7 @@
           // single-exon transcript
           const xLeft = Math.max(0, coord.px);
           const xRight = Math.min(pixelWidth, coord.px1);
-          const width = Math.max(coord.pw, xRight - xLeft);
+          const width = xRight - xLeft;
           ctx.fillRect(xLeft, py, width, h); // Arrows
           // Do not draw if strand is not +/-
 
@@ -58634,8 +58541,8 @@
         const xleft = centerX - textBox.width / 2;
         const xright = centerX + textBox.width / 2;
 
-        if (options.labelAllFeatures || xleft > options.rowLastX[feature.row] || gtexSelection) {
-          options.rowLastX[feature.row] = xright;
+        if (options.labelAllFeatures || xleft > options.rowLastLabelX[feature.row] || gtexSelection) {
+          options.rowLastLabelX[feature.row] = xright;
           IGVGraphics.fillText(ctx, name, centerX, labelY, geneFontStyle, transform);
         }
       } finally {
@@ -58916,7 +58823,7 @@
         return this;
       }
 
-      supportsWholeGenome() {
+      get supportsWholeGenome() {
         return (this.config.indexed === false || !this.config.indexURL) && this.config.supportsWholeGenome !== false;
       }
 
@@ -58975,27 +58882,31 @@
         if (featureList) {
           const rowFeatureCount = [];
           options.rowLastX = [];
+          options.rowLastLabelX = [];
 
           for (let feature of featureList) {
-            const row = feature.row || 0;
+            if (feature.start > bpStart && feature.end < bpEnd) {
+              const row = this.displayMode === "COLLAPSED" ? 0 : feature.row || 0;
 
-            if (rowFeatureCount[row] === undefined) {
-              rowFeatureCount[row] = 1;
-            } else {
-              rowFeatureCount[row]++;
-            }
+              if (rowFeatureCount[row] === undefined) {
+                rowFeatureCount[row] = 1;
+              } else {
+                rowFeatureCount[row]++;
+              }
 
-            options.rowLastX[row] = -Number.MAX_SAFE_INTEGER;
+              options.rowLastX[row] = -Number.MAX_SAFE_INTEGER;
+              options.rowLastLabelX[row] = -Number.MAX_SAFE_INTEGER;
+            }
           }
 
+          const pixelsPerFeature = pixelWidth / Math.max(...rowFeatureCount);
           let lastPxEnd = [];
 
           for (let feature of featureList) {
             if (feature.end < bpStart) continue;
             if (feature.start > bpEnd) break;
             const row = this.displayMode === 'COLLAPSED' ? 0 : feature.row;
-            const featureDensity = pixelWidth / rowFeatureCount[row];
-            options.drawLabel = options.labelAllFeatures || featureDensity > 10;
+            options.drawLabel = options.labelAllFeatures || pixelsPerFeature > 10;
             const pxEnd = Math.ceil((feature.end - bpStart) / bpPerPixel);
             const last = lastPxEnd[row];
 
@@ -59069,15 +58980,9 @@
             for (let fd of featureData) {
               data.push(fd);
 
-              if (infoURL) {
-                if (fd.name && fd.name.toLowerCase() === "name" && fd.value && isString$3(fd.value) && !fd.value.startsWith("<")) {
-                  const url = this.infoURL || this.config.infoURL;
-                  const href = url.replace("$$", feature.name);
-                  data.push({
-                    name: "Info",
-                    value: `<a target="_blank" href=${href}>${fd.value}</a>`
-                  });
-                }
+              if (infoURL && fd.name && fd.name.toLowerCase() === "name" && fd.value && isString$3(fd.value) && !fd.value.startsWith("<")) {
+                const href = infoURL.replace("$$", feature.name);
+                fd.value = `<a target=_blank href=${href}>${fd.value}</a>`;
               }
             } //Array.prototype.push.apply(data, featureData);
             // If we have clicked over an exon number it.
@@ -59151,17 +59056,31 @@
       }
 
       contextMenuItemList(clickState) {
-        if (isSecureContext()) {
-          const features = this.clickedFeatures(clickState);
+        const features = this.clickedFeatures(clickState);
 
-          if (features.length > 1) {
-            features.sort((a, b) => a.end - a.start - (b.end - b.start));
-          }
+        if (features.length > 1) {
+          features.sort((a, b) => b.end - b.start - (a.end - a.start));
+        }
+
+        const f = features[0]; // The shortest clicked feature
+
+        if (f.end - f.start <= 1000000) {
+          const list = [{
+            label: 'View feature sequence',
+            click: async () => {
+              let seq = await this.browser.genome.getSequence(f.chr, f.start, f.end);
+
+              if (f.strand === '-') {
+                seq = reverseComplementSequence(seq);
+              }
 
-          const f = features[0]; // The longest feature
+              if (!seq) seq = "Unknown sequence";
+              Alert.presentAlert(seq);
+            }
+          }];
 
-          if (f.end - f.start <= 1000000) {
-            return [{
+          if (isSecureContext() && navigator.clipboard !== undefined) {
+            list.push({
               label: 'Copy feature sequence',
               click: async () => {
                 let seq = await this.browser.genome.getSequence(f.chr, f.start, f.end);
@@ -59170,14 +59089,21 @@
                   seq = reverseComplementSequence(seq);
                 }
 
-                navigator.clipboard.writeText(seq);
+                try {
+                  await navigator.clipboard.writeText(seq);
+                } catch (e) {
+                  console.error(e);
+                  Alert.presentAlert(`error copying sequence to clipboard ${e}`);
+                }
               }
-            }, '<hr/>'];
+            });
           }
-        } // Either not a secure context (i.e. http: protocol), or feature is too long
-
 
-        return undefined;
+          list.push('<hr/>');
+          return list;
+        } else {
+          return undefined;
+        }
       }
 
       description() {
@@ -59516,7 +59442,7 @@
         }
       }
 
-      supportsWholeGenome() {
+      get supportsWholeGenome() {
         return !this.config.indexURL && this.config.supportsWholeGenome !== false;
       }
       /**
@@ -60075,7 +60001,7 @@
         }];
       }
 
-      supportsWholeGenome() {
+      get supportsWholeGenome() {
         return (this.config.indexed === false || !this.config.indexURL) && this.config.supportsWholeGenome !== false;
       }
 
@@ -60295,7 +60221,7 @@
         }
       }
 
-      supportsWholeGenome() {
+      get supportsWholeGenome() {
         return this.tracks.every(track => track.supportsWholeGenome());
       }
 
@@ -60433,7 +60359,7 @@
         return this;
       }
 
-      supportsWholeGenome() {
+      get supportsWholeGenome() {
         return true;
       }
 
@@ -60854,7 +60780,7 @@
           items = items.concat(MenuUtils.numericDataMenuItems(this.trackView));
         }
 
-        if (this.browser.circularView && true === this.browser.circularViewVisible) {
+        if (this.browser.circularView) {
           items.push('<hr/>');
           items.push({
             label: 'Add interactions to circular view',
@@ -60871,7 +60797,7 @@
 
       contextMenuItemList(clickState) {
         // Experimental JBrowse feature
-        if (this.browser.circularView && true === this.browser.circularViewVisible) {
+        if (this.browser.circularView) {
           const viewport = clickState.viewport;
           const list = [];
           list.push({
@@ -60897,7 +60823,6 @@
 
         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); //
         //
@@ -61368,7 +61293,7 @@
         return this;
       }
 
-      supportsWholeGenome() {
+      get supportsWholeGenome() {
         return this.config.indexed === false || this.config.supportsWholeGenome === true;
       }
 
@@ -61859,7 +61784,7 @@
         } // Experimental JBrowse circular view integration
 
 
-        if (this.browser.circularView && true === this.browser.circularViewVisible) {
+        if (this.browser.circularView) {
           menuItems.push('<hr>');
           menuItems.push({
             label: 'Add SVs to circular view',
@@ -61877,7 +61802,7 @@
 
       contextMenuItemList(clickState) {
         // Experimental JBrowse circular view integration
-        if (this.browser.circularView && true === this.browser.circularViewVisible) {
+        if (this.browser.circularView) {
           const viewport = clickState.viewport;
           const list = [];
           list.push({
@@ -62407,7 +62332,7 @@
         return this;
       }
 
-      supportsWholeGenome() {
+      get supportsWholeGenome() {
         return true;
       }
 
@@ -62973,7 +62898,7 @@
         return items;
       }
 
-      supportsWholeGenome() {
+      get supportsWholeGenome() {
         return false;
       }
 
@@ -63334,12 +63259,15 @@
      * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
      * THE SOFTWARE.
      */
+    /**
+     * Class represents an ideogram of a chromsome cytobands.  It is used for the header of a track panel.
+     *
+     */
 
     class IdeogramTrack {
       constructor(browser) {
         this.browser = browser;
         this.type = 'ideogram';
-        this.id = this.type;
         this.height = 16;
         this.order = Number.MIN_SAFE_INTEGER;
         this.disableButtons = true;
@@ -63599,7 +63527,7 @@
         return this;
       }
 
-      supportsWholeGenome() {
+      get supportsWholeGenome() {
         return false;
       }
 
@@ -64640,23 +64568,6 @@
       });
     }
 
-    function adjustReferenceFrame(scaleFactor, referenceFrame, viewportWidth, alignmentStart, alignmentLength) {
-      referenceFrame.bpPerPixel *= scaleFactor;
-      const alignmentEE = alignmentStart + alignmentLength;
-      const alignmentCC = (alignmentStart + alignmentEE) / 2;
-      referenceFrame.start = alignmentCC - referenceFrame.bpPerPixel * (viewportWidth / 2);
-      referenceFrame.end = referenceFrame.start + referenceFrame.bpPerPixel * viewportWidth;
-      referenceFrame.locusSearchString = referenceFrame.getLocusString();
-    }
-
-    function createReferenceFrameWithAlignment(genome, chromosomeName, bpp, viewportWidth, alignmentStart, alignmentLength) {
-      const alignmentEE = alignmentStart + alignmentLength;
-      const alignmentCC = (alignmentStart + alignmentEE) / 2;
-      const ss = alignmentCC - bpp * (viewportWidth / 2);
-      const ee = ss + bpp * viewportWidth;
-      return new ReferenceFrame(genome, chromosomeName, ss, ee, bpp);
-    }
-
     const defaultNucleotideColors = {
       "A": "rgb(  0, 200,   0)",
       "C": "rgb(  0,0,200)",
@@ -65703,6 +65614,65 @@
       button.addEventListener('click', () => browser.saveSVGtoFile({}));
     };
 
+    const viewportColumnManager = {
+      createColumns: (columnContainer, count) => {
+        for (let i = 0; i < count; i++) {
+          if (0 === i) {
+            createColumn(columnContainer, 'igv-column');
+          } else {
+            columnContainer.appendChild(div$1({
+              class: 'igv-column-shim'
+            }));
+            createColumn(columnContainer, 'igv-column');
+          }
+        }
+      },
+      removeColumnAtIndex: (i, column) => {
+        const shim = 0 === i ? column.nextElementSibling : column.previousElementSibling;
+        column.remove();
+        shim.remove();
+      },
+      insertAfter: referenceElement => {
+        const shim = div$1({
+          class: 'igv-column-shim'
+        });
+        insertElementAfter(shim, referenceElement);
+        const column = div$1({
+          class: 'igv-column'
+        });
+        insertElementAfter(column, shim);
+        return column;
+      },
+      insertBefore: (referenceElement, count) => {
+        for (let i = 0; i < count; i++) {
+          const column = div$1({
+            class: 'igv-column'
+          });
+          insertElementBefore(column, referenceElement);
+
+          if (count > 1 && i > 0) {
+            const columnShim = div$1({
+              class: 'igv-column-shim'
+            });
+            insertElementBefore(columnShim, column);
+          }
+        }
+      },
+      indexOfColumn: (columnContainer, column) => {
+        const allColumns = columnContainer.querySelectorAll('.igv-column');
+
+        for (let i = 0; i < allColumns.length; i++) {
+          const c = allColumns[i];
+
+          if (c === column) {
+            return i;
+          }
+        }
+
+        return undefined;
+      }
+    };
+
     /*
      * The MIT License (MIT)
      *
@@ -65953,7 +65923,7 @@
         }
       }
 
-      supportsWholeGenome() {
+      get supportsWholeGenome() {
         return true;
       }
 
@@ -66485,7 +66455,9 @@
         // deferred because ideogram and ruler are treated as "tracks", and tracks require a reference frame
 
         if (false !== session.showIdeogram) {
-          this.trackViews.push(new TrackView(this, this.columnContainer, new IdeogramTrack(this)));
+          const ideogramTrack = new IdeogramTrack(this);
+          ideogramTrack.id = 'ideogram';
+          this.trackViews.push(new TrackView(this, this.columnContainer, ideogramTrack));
         }
 
         if (false !== session.showRuler) {
@@ -66535,9 +66507,9 @@
           }
         }
 
-        await this.loadTrackList(trackConfigurations); // The ruler track is not explicitly loaded, but needs updated nonetheless.
+        await this.loadTrackList(trackConfigurations); // The ruler and ideogram tracks are not explicitly loaded, but needs updated nonetheless.
 
-        for (let rtv of this.trackViews.filter(tv => tv.track.type === 'ruler')) {
+        for (let rtv of this.trackViews.filter(tv => tv.track.type === 'ruler' || tv.track.type === 'ideogram')) {
           rtv.updateViews();
         }
 
@@ -67077,10 +67049,11 @@
           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;
         this.updateLocusSearchWidget();
 
@@ -67091,7 +67064,7 @@
 
         if (this.dragObject) {
           for (let trackView of trackViews) {
-            await trackView.updateViews(force);
+            await trackView.updateViews();
           }
         } else {
           // Group autoscale
@@ -67140,14 +67113,14 @@
               for (let trackView of groupTrackViews) {
                 trackView.track.dataRange = dataRange;
                 trackView.track.autoscale = false;
-                p.push(trackView.updateViews(force));
+                p.push(trackView.updateViews());
               }
 
               await Promise.all(p);
             }
           }
 
-          await Promise.all(otherTracks.map(tv => tv.updateViews(force))); // for (let trackView of otherTracks) {
+          await Promise.all(otherTracks.map(tv => tv.updateViews())); // for (let trackView of otherTracks) {
           //     await trackView.updateViews(force);
           // }
         }
@@ -67216,42 +67189,6 @@
           referenceFrame.zoomWithScaleFactor(this, scaleFactor, viewportWidth, centerBPOrUndefined);
         }
       }
-
-      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
@@ -67298,6 +67235,7 @@
 
         this.centerLineList = this.createCenterLineList(this.columnContainer);
         resize.call(this);
+        await this.updateViews(true);
       }
 
       async removeMultiLocusPanel(referenceFrame) {
@@ -67635,11 +67573,6 @@
         const surl = (idx > 0 ? path.substring(0, idx) : path) + "?sessionURL=blob:" + this.compressedSession();
         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
@@ -67674,10 +67607,22 @@
           this.fireEvent('trackdragend');
         }
       }
+      /**
+       * Track drag here refers to vertical dragging to reorder tracks, not horizontal panning.
+       *
+       * @param trackView
+       */
+
 
       startTrackDrag(trackView) {
         this.dragTrack = trackView;
       }
+      /**
+       * Track drag here refers to vertical dragging to reorder tracks, not horizontal panning.
+       *
+       * @param dragDestination
+       */
+
 
       updateTrackDrag(dragDestination) {
         if (dragDestination && this.dragTrack) {
@@ -67825,6 +67770,8 @@
       }
 
       createCircularView(container, show) {
+        show = show === true; // convert undefined to boolean
+
         this.circularView = createCircularView(container, this);
         this.circularViewControl = new CircularViewControl(this.$toggle_button_container.get(0), this);
         this.circularView.setAssembly({
@@ -67832,7 +67779,8 @@
           id: this.genome.id,
           chromosomes: makeCircViewChromosomes(this.genome)
         });
-        this.circularViewVisible = show === true;
+        this.circularViewVisible = show;
+        return this.circularView;
       }
 
       get circularViewVisible() {
@@ -67885,7 +67833,8 @@
         }
       }
 
-      this.updateUIWithReferenceFrameList();
+      this.updateUIWithReferenceFrameList(); //TODO -- update view only if needed.  Reducing size never needed.  Increasing size maybe
+
       await this.updateViews(true);
     }