igv 2.12.0 → 2.12.3

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
@@ -20044,6 +20044,8 @@
           case "bed":
           case "bigbed":
           case "bb":
+          case "biggenepred":
+          case "bignarrowpeak":
             return "bedtype";
 
           default:
@@ -20411,6 +20413,12 @@
       complement[t1[i].toLowerCase()] = t2[i].toLowerCase();
     }
 
+    const DEFAULT_HEIGHT = 25;
+    const TRANSLATED_HEIGHT = 115;
+    const SEQUENCE_HEIGHT = 15;
+    const FRAME_HEIGHT = 25;
+    const FRAME_BORDER = 5;
+
     class SequenceTrack {
       constructor(config, browser) {
         this.type = "sequence";
@@ -20421,12 +20429,12 @@
         this.id = "sequence";
         this.sequenceType = config.sequenceType || "dna"; //   dna | rna | prot
 
-        this.height = 25;
         this.disableButtons = false;
         this.order = config.order || defaultSequenceTrackOrder;
         this.ignoreTrackMenu = false;
-        this.reversed = false;
-        this.frameTranslate = false;
+        this.reversed = config.reversed === true;
+        this.frameTranslate = config.frameTranslate === true;
+        this.height = this.frameTranslate ? TRANSLATED_HEIGHT : DEFAULT_HEIGHT;
       }
 
       menuItemList() {
@@ -20443,16 +20451,16 @@
 
             if (this.frameTranslate) {
               for (let vp of this.trackView.viewports) {
-                vp.setContentHeight(115);
+                vp.setContentHeight(TRANSLATED_HEIGHT);
               }
 
-              this.trackView.setTrackHeight(115);
+              this.trackView.setTrackHeight(TRANSLATED_HEIGHT);
             } else {
               for (let vp of this.trackView.viewports) {
-                vp.setContentHeight(25);
+                vp.setContentHeight(DEFAULT_HEIGHT);
               }
 
-              this.trackView.setTrackHeight(25);
+              this.trackView.setTrackHeight(DEFAULT_HEIGHT);
             }
 
             this.trackView.repaintViews();
@@ -20535,6 +20543,9 @@
       }
 
       async getFeatures(chr, start, end, bpPerPixel) {
+        start = Math.floor(start);
+        end = Math.floor(end);
+
         if (bpPerPixel && bpPerPixel > 1) {
           return null;
         } else {
@@ -20550,33 +20561,35 @@
         const ctx = options.context;
 
         if (options.features) {
-          const sequence = options.features.sequence;
-          const sequenceBpStart = options.features.bpStart;
-          const bpEnd = 1 + options.bpStart + options.pixelWidth * options.bpPerPixel;
-          let height = 15;
+          let sequence = options.features.sequence;
 
-          for (let bp = sequenceBpStart; bp <= bpEnd; bp++) {
-            let seqOffsetBp = Math.floor(bp - sequenceBpStart);
+          if (this.reversed) {
+            sequence = sequence.split('').map(function (cv) {
+              return complement[cv];
+            }).join('');
+          }
 
-            if (seqOffsetBp < sequence.length) {
-              let letter = sequence[seqOffsetBp];
+          const sequenceBpStart = options.features.bpStart; // genomic position at start of sequence
 
-              if (this.reversed) {
-                letter = complement[letter] || "";
-              }
+          const bpEnd = 1 + options.bpStart + options.pixelWidth * options.bpPerPixel;
+
+          for (let bp = Math.floor(options.bpStart); bp <= bpEnd; bp++) {
+            const seqIdx = Math.floor(bp - sequenceBpStart);
 
-              let offsetBP = bp - options.bpStart;
-              let aPixel = offsetBP / options.bpPerPixel;
-              let bPixel = (offsetBP + 1) / options.bpPerPixel;
-              let color = this.fillColor(letter); // IGVGraphics.fillRect(ctx, aPixel, 5, bPixel - aPixel, height - 5, { fillStyle: randomRGBConstantAlpha(150, 255, 0.75) });
+            if (seqIdx >= 0 && seqIdx < sequence.length) {
+              const baseLetter = sequence[seqIdx];
+              const offsetBP = bp - options.bpStart;
+              const aPixel = offsetBP / options.bpPerPixel;
+              const pixelWidth = 1 / options.bpPerPixel;
+              const color = this.fillColor(baseLetter);
 
               if (options.bpPerPixel > 1 / 10) {
-                IGVGraphics.fillRect(ctx, aPixel, 5, bPixel - aPixel, height - 5, {
+                IGVGraphics.fillRect(ctx, aPixel, 5, pixelWidth, SEQUENCE_HEIGHT - 5, {
                   fillStyle: color
                 });
               } else {
-                let xPixel = 0.5 * (aPixel + bPixel - ctx.measureText(letter).width);
-                IGVGraphics.strokeText(ctx, letter, xPixel, height, {
+                let textPixel = aPixel + 0.5 * (pixelWidth - ctx.measureText(baseLetter).width);
+                IGVGraphics.strokeText(ctx, baseLetter, textPixel, SEQUENCE_HEIGHT, {
                   strokeStyle: color
                 });
               }
@@ -20584,55 +20597,48 @@
           }
 
           if (this.frameTranslate) {
-            let transSeq;
-
-            if (this.reversed) {
-              transSeq = sequence.split('').map(function (cv) {
-                return complement[cv];
-              });
-              transSeq = transSeq.join('');
-            } else {
-              transSeq = sequence;
-            }
+            let y = SEQUENCE_HEIGHT + 2 * FRAME_BORDER;
+            const translatedSequence = this.translateSequence(sequence);
 
-            let y = height;
-            let translatedSequence = this.translateSequence(transSeq);
+            for (let fNum = 0; fNum < translatedSequence.length; fNum++) {
+              // == 3, 1 for each frame
+              const aaSequence = translatedSequence[fNum]; // AA sequence for this frame
 
-            for (let arr of translatedSequence) {
-              let i = translatedSequence.indexOf(arr);
-              let fNum = i;
-              let h = 25;
-              y = i === 0 ? y + 10 : y + 30; //Little less room at first.
-
-              for (let cv of arr) {
-                let aaS;
-                let idx = arr.indexOf(cv);
-                let xSeed = idx + fNum + 2 * idx;
+              for (let idx = 0; idx < aaSequence.length; idx++) {
                 let color = 0 === idx % 2 ? 'rgb(160,160,160)' : 'rgb(224,224,224)';
-                let p0 = Math.floor(xSeed / options.bpPerPixel);
-                let p1 = Math.floor((xSeed + 3) / options.bpPerPixel);
-                let pc = Math.round((p0 + p1) / 2);
+                const cv = aaSequence[idx];
+                const bpPos = sequenceBpStart + fNum + idx * 3;
+                const bpOffset = bpPos - options.bpStart;
+                const p0 = Math.floor(bpOffset / options.bpPerPixel);
+                const p1 = Math.floor((bpOffset + 3) / options.bpPerPixel);
+                const pc = Math.round((p0 + p1) / 2);
+
+                if (p1 < 0) {
+                  continue; // off left edge
+                } else if (p0 > options.pixelWidth) {
+                  break; // off right edge
+                }
+
+                let aaLabel = cv.aminoA;
 
                 if (cv.aminoA.indexOf('STOP') > -1) {
                   color = 'rgb(255, 0, 0)';
-                  aaS = 'STOP'; //Color blind accessible
-                } else {
-                  aaS = cv.aminoA;
-                }
-
-                if (cv.aminoA === 'M') {
+                  aaLabel = 'STOP'; //Color blind accessible
+                } else if (cv.aminoA === 'M') {
                   color = 'rgb(0, 153, 0)';
-                  aaS = 'START'; //Color blind accessible
+                  aaLabel = 'START'; //Color blind accessible
                 }
 
-                IGVGraphics.fillRect(ctx, p0, y, p1 - p0, h, {
+                IGVGraphics.fillRect(ctx, p0, y, p1 - p0, FRAME_HEIGHT, {
                   fillStyle: color
                 });
 
                 if (options.bpPerPixel <= 1 / 10) {
-                  IGVGraphics.strokeText(ctx, aaS, pc - ctx.measureText(aaS).width / 2, y + 15);
+                  IGVGraphics.strokeText(ctx, aaLabel, pc - ctx.measureText(aaLabel).width / 2, y + 15);
                 }
               }
+
+              y += FRAME_HEIGHT + FRAME_BORDER;
             }
           }
         }
@@ -20643,6 +20649,7 @@
       }
 
       computePixelHeight(ignore) {
+        this.height = this.frameTranslate ? TRANSLATED_HEIGHT : DEFAULT_HEIGHT;
         return this.height;
       }
 
@@ -20655,6 +20662,19 @@
           return 'rgb(0, 0, 150)';
         }
       }
+      /**
+       * Return the current state of the track.  Used to create sessions and bookmarks.
+       *
+       * @returns {*|{}}
+       */
+
+
+      getState() {
+        const config = typeof super.getState === 'function' ? super.getState() : {};
+        if (this.reversed) config.revealed = true;
+        if (this.frameTranslate) config.frameTranslate = true;
+        return config;
+      }
 
     }
 
@@ -22621,7 +22641,9 @@
       }
 
       async getSequence(chr, start, end) {
-        if (!(this.interval && this.interval.contains(chr, start, end))) {
+        const hasCachedSquence = this.interval && this.interval.contains(chr, start, end);
+
+        if (!hasCachedSquence) {
           // Expand query, to minimum of 50kb
           let qstart = start;
           let qend = end;
@@ -23091,7 +23113,7 @@
       }
     };
 
-    const _version = "2.12.0";
+    const _version = "2.12.3";
 
     function version$1() {
       return _version;
@@ -23234,7 +23256,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)
@@ -23550,6 +23572,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.
      */
@@ -23734,6 +23768,19 @@
           this.stopSpinner();
         }
       }
+
+      repaintDimensions() {
+        const isWGV = GenomeUtils.isWholeGenomeView(this.referenceFrame.chr);
+        const pixelWidth = isWGV ? this.$viewport.width() : 3 * this.$viewport.width();
+        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);
+        return {
+          startBP,
+          endBP,
+          pixelWidth
+        };
+      }
       /**
        * Repaint the canvas using the cached features
        *
@@ -23751,10 +23798,14 @@
         } = this.featureCache; //this.tile.bpPerPixel = this.referenceFrame.bpPerPixel
         // const isWGV = GenomeUtils.isWholeGenomeView(this.browser.referenceFrameList[0].chr)
 
-        const isWGV = GenomeUtils.isWholeGenomeView(this.referenceFrame.chr); // Canvas dimensions. There is no left-right panning for WGV so canvas width is viewport width.
+        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 {
+          startBP,
+          endBP,
+          pixelWidth
+        } = this.repaintDimensions();
         const viewportHeight = this.$viewport.height();
         const contentHeight = this.getContentHeight();
         const minHeight = roiFeatures ? Math.max(contentHeight, viewportHeight) : contentHeight; // Need to fill viewport for ROIs.
@@ -23770,9 +23821,9 @@
         }
 
         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 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);
         newCanvas.style.width = pixelWidth + "px";
@@ -24013,10 +24064,12 @@
         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);
+        const {
+          startBP,
+          endBP
+        } = this.repaintDimensions();
+        return !this.featureCache.containsRange(chr, startBP, endBP, bpPerPixel);
       }
 
       createZoomInNotice($parent) {
@@ -24116,7 +24169,7 @@
 
       addViewportClickHandler(viewport) {
         viewport.addEventListener('click', event => {
-          if (this.enableClick) {
+          if (this.enableClick && this.canvas) {
             if (3 === event.which || event.ctrlKey) {
               return;
             } // Close any currently open popups
@@ -24482,7 +24535,7 @@
     }; // https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
 
 
-    var global$1 = // eslint-disable-next-line es/no-global-this -- safe
+    var global$1 = // eslint-disable-next-line es-x/no-global-this -- safe
     check(typeof globalThis == 'object' && globalThis) || check(typeof window == 'object' && window) || // eslint-disable-next-line no-restricted-globals -- safe
     check(typeof self == 'object' && self) || check(typeof commonjsGlobal == 'object' && commonjsGlobal) || // eslint-disable-next-line no-new-func -- fallback
     function () {
@@ -24498,6 +24551,7 @@
     };
 
     var functionBindNative = !fails(function () {
+      // eslint-disable-next-line es-x/no-function-prototype-bind -- safe
       var test = function () {
         /* empty */
       }.bind(); // eslint-disable-next-line no-prototype-builtins -- safe
@@ -24511,11 +24565,11 @@
       return call$2.apply(call$2, arguments);
     };
 
-    // eslint-disable-next-line es/no-typed-arrays -- safe
+    // eslint-disable-next-line es-x/no-typed-arrays -- safe
     var arrayBufferNative = typeof ArrayBuffer != 'undefined' && typeof DataView != 'undefined';
 
     var descriptors = !fails(function () {
-      // eslint-disable-next-line es/no-object-defineproperty -- required for testing
+      // eslint-disable-next-line es-x/no-object-defineproperty -- required for testing
       return Object.defineProperty({}, 1, {
         get: function () {
           return 7;
@@ -24562,6 +24616,7 @@
 
     var hasOwnProperty = functionUncurryThis({}.hasOwnProperty); // `HasOwnProperty` abstract operation
     // https://tc39.es/ecma262/#sec-hasownproperty
+    // eslint-disable-next-line es-x/no-object-hasown -- safe
 
     var hasOwnProperty_1 = Object.hasOwn || function hasOwn(it, key) {
       return hasOwnProperty(toObject(it), key);
@@ -24591,10 +24646,10 @@
       (module.exports = function (key, value) {
         return sharedStore[key] || (sharedStore[key] = value !== undefined ? value : {});
       })('versions', []).push({
-        version: '3.21.1',
+        version: '3.22.0',
         mode: 'global',
         copyright: '© 2014-2022 Denis Pushkarev (zloirock.ru)',
-        license: 'https://github.com/zloirock/core-js/blob/v3.21.1/LICENSE',
+        license: 'https://github.com/zloirock/core-js/blob/v3.22.0/LICENSE',
         source: 'https://github.com/zloirock/core-js'
       });
     });
@@ -24643,7 +24698,7 @@
 
     var engineV8Version = version;
 
-    /* eslint-disable es/no-symbol -- required for testing */
+    /* eslint-disable es-x/no-symbol -- required for testing */
 
     var nativeSymbol = !!Object.getOwnPropertySymbols && !fails(function () {
       var symbol = Symbol(); // Chrome 38 Symbol has incorrect toString conversion
@@ -24653,7 +24708,7 @@
       !Symbol.sham && engineV8Version && engineV8Version < 41;
     });
 
-    /* eslint-disable es/no-symbol -- required for testing */
+    /* eslint-disable es-x/no-symbol -- required for testing */
     var useSymbolAsUid = nativeSymbol && !Symbol.sham && typeof Symbol.iterator == 'symbol';
 
     var WellKnownSymbolsStore = shared('wks');
@@ -24732,7 +24787,7 @@
     };
 
     var ie8DomDefine = !descriptors && !fails(function () {
-      // eslint-disable-next-line es/no-object-defineproperty -- required for testing
+      // eslint-disable-next-line es-x/no-object-defineproperty -- required for testing
       return Object.defineProperty(documentCreateElement('div'), 'a', {
         get: function () {
           return 7;
@@ -24743,7 +24798,7 @@
     // https://bugs.chromium.org/p/v8/issues/detail?id=3334
 
     var v8PrototypeDefineBug = descriptors && fails(function () {
-      // eslint-disable-next-line es/no-object-defineproperty -- required for testing
+      // eslint-disable-next-line es-x/no-object-defineproperty -- required for testing
       return Object.defineProperty(function () {
         /* empty */
       }, 'prototype', {
@@ -24822,9 +24877,9 @@
       return isSymbol(key) ? key : key + '';
     };
 
-    var TypeError$5 = global$1.TypeError; // eslint-disable-next-line es/no-object-defineproperty -- safe
+    var TypeError$5 = global$1.TypeError; // eslint-disable-next-line es-x/no-object-defineproperty -- safe
 
-    var $defineProperty = Object.defineProperty; // eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe
+    var $defineProperty = Object.defineProperty; // eslint-disable-next-line es-x/no-object-getownpropertydescriptor -- safe
 
     var $getOwnPropertyDescriptor$1 = Object.getOwnPropertyDescriptor;
     var ENUMERABLE = 'enumerable';
@@ -24974,7 +25029,7 @@
       getterFor: getterFor
     };
 
-    var FunctionPrototype$1 = Function.prototype; // eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe
+    var FunctionPrototype$1 = Function.prototype; // eslint-disable-next-line es-x/no-object-getownpropertydescriptor -- safe
 
     var getDescriptor = descriptors && Object.getOwnPropertyDescriptor;
     var EXISTS = hasOwnProperty_1(FunctionPrototype$1, 'name'); // additional protection from minified / mangled / dropped function names
@@ -25038,7 +25093,7 @@
         /* empty */
       }
 
-      F.prototype.constructor = null; // eslint-disable-next-line es/no-object-getprototypeof -- required for testing
+      F.prototype.constructor = null; // eslint-disable-next-line es-x/no-object-getprototypeof -- required for testing
 
       return Object.getPrototypeOf(new F()) !== F.prototype;
     });
@@ -25071,7 +25126,7 @@
     /* eslint-disable no-proto -- safe */
     // https://tc39.es/ecma262/#sec-object.setprototypeof
     // Works with __proto__ only. Old v8 can't work with null proto objects.
-    // eslint-disable-next-line es/no-object-setprototypeof -- safe
+    // eslint-disable-next-line es-x/no-object-setprototypeof -- safe
 
     var objectSetPrototypeOf = Object.setPrototypeOf || ('__proto__' in {} ? function () {
       var CORRECT_SETTER = false;
@@ -25079,7 +25134,7 @@
       var setter;
 
       try {
-        // eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe
+        // eslint-disable-next-line es-x/no-object-getownpropertydescriptor -- safe
         setter = functionUncurryThis(Object.getOwnPropertyDescriptor(Object.prototype, '__proto__').set);
         setter(test, []);
         CORRECT_SETTER = test instanceof Array;
@@ -25312,7 +25367,7 @@
     var aTypedArray = arrayBufferViewCore.aTypedArray;
     var exportTypedArrayMethod = arrayBufferViewCore.exportTypedArrayMethod;
     var WORKS_WITH_OBJECTS_AND_GEERIC_ON_TYPED_ARRAYS = !fails(function () {
-      // eslint-disable-next-line es/no-typed-arrays -- required for testing
+      // eslint-disable-next-line es-x/no-typed-arrays -- required for testing
       var array = new Uint8ClampedArray(2);
       functionCall($set, array, {
         length: 1,
@@ -25467,6 +25522,10 @@
         }
       }
 
+      hasTag(str) {
+        return this.firstAlignment.hasTag(str) || this.secondAlignment && this.secondAlignment.hasTag(str);
+      }
+
     }
 
     /*
@@ -28855,7 +28914,7 @@
 
     }
 
-    var $propertyIsEnumerable = {}.propertyIsEnumerable; // eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe
+    var $propertyIsEnumerable = {}.propertyIsEnumerable; // eslint-disable-next-line es-x/no-object-getownpropertydescriptor -- safe
 
     var getOwnPropertyDescriptor$1 = Object.getOwnPropertyDescriptor; // Nashorn ~ JDK8 bug
 
@@ -28966,7 +29025,7 @@
 
     var hiddenKeys = enumBugKeys.concat('length', 'prototype'); // `Object.getOwnPropertyNames` method
     // https://tc39.es/ecma262/#sec-object.getownpropertynames
-    // eslint-disable-next-line es/no-object-getownpropertynames -- safe
+    // eslint-disable-next-line es-x/no-object-getownpropertynames -- safe
 
     var f$1 = Object.getOwnPropertyNames || function getOwnPropertyNames(O) {
       return objectKeysInternal(O, hiddenKeys);
@@ -28976,7 +29035,7 @@
       f: f$1
     };
 
-    // eslint-disable-next-line es/no-object-getownpropertysymbols -- safe
+    // eslint-disable-next-line es-x/no-object-getownpropertysymbols -- safe
     var f = Object.getOwnPropertySymbols;
     var objectGetOwnPropertySymbols = {
       f: f
@@ -29078,7 +29137,7 @@
 
     var FunctionPrototype = Function.prototype;
     var apply = FunctionPrototype.apply;
-    var call = FunctionPrototype.call; // eslint-disable-next-line es/no-reflect -- safe
+    var call = FunctionPrototype.call; // eslint-disable-next-line es-x/no-reflect -- safe
 
     var functionApply = typeof Reflect == 'object' && Reflect.apply || (functionBindNative ? call.bind(apply) : function () {
       return call.apply(apply, arguments);
@@ -29212,20 +29271,28 @@
       clear: clear
     };
 
-    var FORCED = !global$1.setImmediate || !global$1.clearImmediate; // http://w3c.github.io/setImmediate/
+    var clearImmediate = task.clear; // `clearImmediate` method
+    // http://w3c.github.io/setImmediate/#si-clearImmediate
+
+    _export({
+      global: true,
+      bind: true,
+      enumerable: true,
+      forced: global$1.clearImmediate !== clearImmediate
+    }, {
+      clearImmediate: clearImmediate
+    });
+
+    var setImmediate = task.set; // `setImmediate` method
+    // http://w3c.github.io/setImmediate/#si-setImmediate
 
     _export({
       global: true,
       bind: true,
       enumerable: true,
-      forced: FORCED
+      forced: global$1.setImmediate !== setImmediate
     }, {
-      // `setImmediate` method
-      // http://w3c.github.io/setImmediate/#si-setImmediate
-      setImmediate: task.set,
-      // `clearImmediate` method
-      // http://w3c.github.io/setImmediate/#si-clearImmediate
-      clearImmediate: task.clear
+      setImmediate: setImmediate
     });
 
     const eval2 = eval;
@@ -45417,6 +45484,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.
      *
@@ -45425,6 +45496,7 @@
      * @constructor
      */
 
+
     class TrackBase {
       constructor(config, browser) {
         this.browser = browser;
@@ -45458,8 +45530,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
@@ -47663,7 +47735,7 @@
         return this.tracks.find(t => name === t.name);
       }
 
-      getChordset(name) {
+      getChordSet(name) {
         return this.chordSets.find(cs => name === cs.name);
       }
 
@@ -47773,9 +47845,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';
@@ -47855,10 +47927,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
@@ -47885,7 +47957,7 @@
             rgbaString
           }) => {
             colorPickerButton.style.backgroundColor = setAlpha(rgbaString, 1);
-            this.setTrackColor(chordSet.name, rgbaString);
+            this.setColor(chordSet.name, rgbaString);
             alphaSlider.value = alphaToValue(getAlpha(chordSet.color));
           }
         };
@@ -47903,7 +47975,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);
         };
 
@@ -47922,12 +47994,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 = [];
@@ -47946,7 +48020,7 @@
         this.assembly = {
           name: igvGenome.name,
           sequence: {
-            trackId: igvGenome.id,
+            trackId: id,
             type: 'ReferenceSequenceTrack',
             adapter: {
               type: 'FromConfigSequenceAdapter',
@@ -47984,7 +48058,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 = {
@@ -48034,20 +48108,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
        */
@@ -48073,25 +48133,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)
@@ -48118,12 +48178,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;
@@ -48224,7 +48284,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;
@@ -48264,20 +48324,36 @@
       const chords = [];
 
       for (let a of alignments) {
-        const mate = a.mate;
-
-        if (mate && mate.chr && mate.position) {
-          chords.push({
-            uniqueId: a.readName,
-            refName: shortChrName(a.chr),
-            start: a.start,
-            end: a.end,
-            mate: {
-              refName: shortChrName(mate.chr),
-              start: mate.position - 1,
-              end: mate.position
-            }
-          });
+        if (a.paired) {
+          if (a.firstAlignment && a.secondAlignment) {
+            chords.push({
+              uniqueId: a.readName,
+              refName: shortChrName(a.firstAlignment.chr),
+              start: a.firstAlignment.start,
+              end: a.firstAlignment.end,
+              mate: {
+                refName: shortChrName(a.secondAlignment.chr),
+                start: a.secondAlignment.start,
+                end: a.secondAlignment.end
+              }
+            });
+          }
+        } else {
+          const mate = a.mate;
+
+          if (mate && mate.chr && mate.position) {
+            chords.push({
+              uniqueId: a.readName,
+              refName: shortChrName(a.chr),
+              start: a.start,
+              end: a.end,
+              mate: {
+                refName: shortChrName(mate.chr),
+                start: mate.position - 1,
+                end: mate.position
+              }
+            });
+          }
         }
       }
 
@@ -48285,9 +48361,7 @@
     };
 
     const makeSupplementalAlignmentChords = alignments => {
-      const chords = [];
-
-      for (let a of alignments) {
+      const makeChords = a => {
         const sa = a.tags()['SA'];
         const supAl = createSupplementaryAlignments(sa);
         let n = 0;
@@ -48307,6 +48381,20 @@
             });
           }
         }
+      };
+
+      const chords = [];
+
+      for (let a of alignments) {
+        if (a.paired) {
+          makeChords(a.firstAlignment);
+
+          if (a.secondAlignment) {
+            makeChords(a.secondAlignment);
+          }
+        } else {
+          makeChords(a);
+        }
       }
 
       return chords;
@@ -49033,8 +49121,16 @@
         const refFrame = viewport.referenceFrame;
 
         for (let a of viewport.cachedFeatures.allAlignments()) {
-          if (a.end >= refFrame.start && a.start <= refFrame.end && a.mate && a.mate.chr && (a.mate.chr !== a.chr || Math.max(a.fragmentLength) > maxTemplateLength)) {
-            inView.push(a);
+          if (a.end >= refFrame.start && a.start <= refFrame.end) {
+            if (a.paired) {
+              if (a.end - a.start > maxTemplateLength) {
+                inView.push(a);
+              }
+            } else {
+              if (a.mate && a.mate.chr && (a.mate.chr !== a.chr || Math.max(a.fragmentLength) > maxTemplateLength)) {
+                inView.push(a);
+              }
+            }
           }
         }
 
@@ -49859,11 +49955,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;
+                }
               }
             }
 
@@ -50555,7 +50655,7 @@
                 sampleNameViewport.setWidth(this.browser.sampleNameViewportWidth);
               }
 
-              this.browser.resize();
+              this.browser.layoutChange();
             }
           };
           this.browser.inputDialog.present(config, event);
@@ -52440,7 +52540,7 @@
             });
           }
 
-          findUTRs(exons, feature.cdStart, feature.cdEnd);
+          findUTRs$1(exons, feature.cdStart, feature.cdEnd);
           feature.exons = exons;
         } // Optional extra columns
 
@@ -52545,7 +52645,7 @@
         });
       }
 
-      findUTRs(exons, cdStart, cdEnd);
+      findUTRs$1(exons, cdStart, cdEnd);
       feature.exons = exons;
       return feature;
     }
@@ -52587,7 +52687,7 @@
         });
       }
 
-      findUTRs(exons, cdStart, cdEnd);
+      findUTRs$1(exons, cdStart, cdEnd);
       feature.exons = exons;
       return feature;
     }
@@ -52628,12 +52728,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;
@@ -56192,7 +56292,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
@@ -56603,10 +56703,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;
@@ -56653,6 +56751,7 @@
               });
             }
 
+            findUTRs(exons, feature.cdStart, feature.cdEnd);
             feature.exons = exons;
           }
 
@@ -56669,7 +56768,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];
@@ -56686,6 +56807,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();
@@ -58236,11 +58376,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);
@@ -58489,8 +58630,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 {
@@ -58830,27 +58971,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];
 
@@ -65353,7 +65498,7 @@
             }
           }
 
-          browser.resize();
+          browser.layoutChange();
         });
       }
 
@@ -66976,8 +67121,18 @@
           trackView.setTrackHeight(newHeight);
         });
       }
+      /**
+       * API function to signal that this browser visibility has changed, e.g. from hiding/showing in a tab interface.
+       *
+       * @returns {Promise<void>}
+       */
+
 
       async visibilityChange() {
+        this.layoutChange();
+      }
+
+      async layoutChange() {
         const status = this.referenceFrameList.find(referenceFrame => referenceFrame.bpPerPixel < 0);
 
         if (status) {
@@ -67714,6 +67869,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({
@@ -67722,6 +67879,7 @@
           chromosomes: makeCircViewChromosomes(this.genome)
         });
         this.circularViewVisible = show;
+        return this.circularView;
       }
 
       get circularViewVisible() {