igv 2.12.0 → 2.12.3

package/dist/igv.esm.js

@@ -19712,6 +19712,8 @@ const knownFileExtensions = new Set([
     "bb",
     "bigbed",
     "biginteract",
+    "biggenepred",
+    "bignarrowpeak",
     "bw",
     "bigwig",
     "bam",
@@ -19863,6 +19865,8 @@ function inferTrackType(config) {
             case "bed":
             case "bigbed":
             case "bb":
+            case "biggenepred":
+            case "bignarrowpeak":
                 return "bedtype"
             default:
                 return "annotation"
@@ -20247,6 +20251,12 @@ for (let i = 0; i < t1.length; i++) {
     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) {
@@ -20258,13 +20268,13 @@ class SequenceTrack {
         this.name = "Sequence";
         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;
 
     }
 
@@ -20283,14 +20293,14 @@ class SequenceTrack {
                     this.frameTranslate = !this.frameTranslate;
                     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();
 
@@ -20373,7 +20383,8 @@ class SequenceTrack {
     }
 
     async getFeatures(chr, start, end, bpPerPixel) {
-
+        start = Math.floor(start);
+        end = Math.floor(end);
         if (bpPerPixel && bpPerPixel > 1) {
             return null
         } else {
@@ -20391,89 +20402,79 @@ class SequenceTrack {
 
         if (options.features) {
 
-            const sequence = options.features.sequence;
-            const sequenceBpStart = options.features.bpStart;
-            const bpEnd = 1 + options.bpStart + (options.pixelWidth * options.bpPerPixel);
+            let sequence = options.features.sequence;
 
-            let height = 15;
-            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
+            const bpEnd = 1 + options.bpStart + (options.pixelWidth * options.bpPerPixel);
 
-                    if (this.reversed) {
-                        letter = complement[letter] || "";
-                    }
+            for (let bp = Math.floor(options.bpStart); bp <= bpEnd; bp++) {
 
-                    let offsetBP = bp - options.bpStart;
-                    let aPixel = offsetBP / options.bpPerPixel;
-                    let bPixel = (offsetBP + 1) / options.bpPerPixel;
-                    let color = this.fillColor(letter);
+                const seqIdx = Math.floor(bp - sequenceBpStart);
 
-                    // 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, {fillStyle: color});
+                        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, {strokeStyle: color});
+                        let textPixel = aPixel + 0.5 * (pixelWidth - ctx.measureText(baseLetter).width);
+                        IGVGraphics.strokeText(ctx, baseLetter, textPixel, SEQUENCE_HEIGHT, {strokeStyle: color});
                     }
                 }
             }
 
             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 arr of translatedSequence) {
+                for (let fNum = 0; fNum < translatedSequence.length; fNum++) {    // == 3, 1 for each frame
 
-                    let i = translatedSequence.indexOf(arr);
-                    let fNum = i;
-                    let h = 25;
+                    const aaSequence = translatedSequence[fNum];  // AA sequence for this frame
 
-                    y = (i === 0) ? y + 10 : y + 30; //Little less room at first.
+                    for (let idx = 0; idx < aaSequence.length; idx++) {
 
-                    for (let cv of arr) {
-
-                        let aaS;
-                        let idx = arr.indexOf(cv);
-                        let xSeed = (idx + fNum) + (2 * idx);
                         let color = 0 === idx % 2 ? 'rgb(160,160,160)' : 'rgb(224,224,224)';
+                        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 p0 = Math.floor(xSeed / options.bpPerPixel);
-                        let p1 = Math.floor((xSeed + 3) / options.bpPerPixel);
-                        let pc = Math.round((p0 + p1) / 2);
-
+                        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, {fillStyle: color});
+                        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);
                 }
             }
         }
@@ -20484,6 +20485,7 @@ class SequenceTrack {
     }
 
     computePixelHeight(ignore) {
+        this.height = this.frameTranslate ? TRANSLATED_HEIGHT : DEFAULT_HEIGHT;
         return this.height
     }
 
@@ -20496,8 +20498,21 @@ class SequenceTrack {
         } else {
             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
     }
+
 }
 
 /*
@@ -22333,7 +22348,9 @@ class FastaSequence {
 
     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;
@@ -22792,7 +22809,7 @@ const Cytoband = function (start, end, name, typestain) {
     }
 };
 
-const _version = "2.12.0";
+const _version = "2.12.3";
 function version() {
     return _version
 }
@@ -22940,7 +22957,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)
@@ -23262,6 +23279,18 @@ function constructWG(genome, config) {
 
 }
 
+function generateGenomeID(config) {
+    if (config.id !== undefined) {
+        return config.id
+    } else if (config.fastaURL && isString$3(config.fastaURL)) {
+        return config.fastaURL
+    } else if (config.fastaURL && config.fastaURL.name) {
+        return config.fastaURL.name
+    } else {
+        return ("0000" + (Math.random() * Math.pow(36, 4) << 0).toString(36)).slice(-4)
+    }
+}
+
 /**
  * Created by dat on 9/16/16.
  */
@@ -23444,6 +23473,17 @@ class TrackViewport extends Viewport {
         }
     }
 
+    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
      *
@@ -23458,11 +23498,11 @@ class TrackViewport extends Viewport {
         //this.tile.bpPerPixel = this.referenceFrame.bpPerPixel
 
         // const isWGV = GenomeUtils.isWholeGenomeView(this.browser.referenceFrameList[0].chr)
-        const isWGV = GenomeUtils.isWholeGenomeView(this.referenceFrame.chr);
+        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.
@@ -23476,8 +23516,8 @@ class TrackViewport extends Viewport {
         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 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);
@@ -23740,10 +23780,9 @@ class TrackViewport extends Viewport {
         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) {
@@ -23847,7 +23886,7 @@ class TrackViewport extends Viewport {
 
         viewport.addEventListener('click', (event) => {
 
-            if (this.enableClick) {
+            if (this.enableClick && this.canvas) {
                 if (3 === event.which || event.ctrlKey) {
                     return
                 }
@@ -24381,6 +24420,10 @@ class PairedAlignment {
             return this.firstAlignment.mate.strand    // Assumption is mate is first-of-pair
         }
     }
+
+    hasTag(str) {
+        return this.firstAlignment.hasTag(str) || (this.secondAlignment &&  this.secondAlignment.hasTag(str))
+    }
 }
 
 /*
@@ -29004,6 +29047,10 @@ class BamSource {
  * THE SOFTWARE.
  */
 
+const fixColor = (colorString) => {
+    return (colorString.indexOf(",") > 0 && !colorString.startsWith("rgb")) ?
+        `rgb(${colorString})` : colorString
+};
 
 /**
  * A collection of properties and methods shared by all (or most) track types.
@@ -29048,8 +29095,8 @@ class TrackBase {
 
         this.order = config.order;
 
-        this.color = config.color;
-        this.altColor = config.altColor;
+        if(config.color) this.color = fixColor(config.color);
+        if(config.altColor) this.altColor = fixColor(config.altColor);
         if ("civic-ws" === config.sourceType) {    // Ugly proxy for specialized track type
             this.defaultColor = "rgb(155,20,20)";
         } else {
@@ -30944,7 +30991,7 @@ class ChordSetManager {
         return this.tracks.find(t => name === t.name)
     }
 
-    getChordset(name) {
+    getChordSet(name) {
         return this.chordSets.find(cs => name === cs.name)
     }
 
@@ -31062,9 +31109,8 @@ class CircularView {
         buttonContainer.appendChild(this.showControlsButton);
         this.showControlsButton.innerText = 'none' === this.controlPanel.style.display ? 'Show Controls' : 'Hide Controls';
         this.showControlsButton.addEventListener('click', (event) => {
-            const trackPanelRows = this.controlPanel.querySelectorAll('div');
-            if (trackPanelRows.length > 0) {
-
+            const panelRows = this.controlPanel.querySelectorAll('div');
+            if (panelRows.length > 0) {
                 if ('none' === this.controlPanel.style.display) {
                     this.controlPanel.style.display = 'flex';
                     event.target.innerText = 'Hide Controls';
@@ -31148,10 +31194,10 @@ class CircularView {
         hideShowButton.innerText = true === chordSet.visible ? 'Hide' : 'Show';
         hideShowButton.addEventListener('click', event => {
             if (true === chordSet.visible) {
-                this.hideTrack(chordSet.name);
+                this.hideChordSet(chordSet.name);
                 event.target.innerText = "Show";
             } else {
-                this.showTrack(chordSet.name);
+                this.showChordSet(chordSet.name);
                 event.target.innerText = "Hide";
             }
         });
@@ -31175,7 +31221,7 @@ class CircularView {
                 color: chordSet.color,
                 onChange: ({rgbaString}) => {
                     colorPickerButton.style.backgroundColor = setAlpha(rgbaString, 1);
-                    this.setTrackColor(chordSet.name, rgbaString);
+                    this.setColor(chordSet.name, rgbaString);
                     alphaSlider.value = alphaToValue(getAlpha(chordSet.color));
                 }
             };
@@ -31193,7 +31239,7 @@ class CircularView {
         alphaSlider.value = alphaToValue(getAlpha(chordSet.color));
         alphaSlider.oninput = () => {
             const v = valueToAlpha(alphaSlider.value);
-            this.setTrackColor(chordSet.name, setAlpha(chordSet.color, v));
+            this.setColor(chordSet.name, setAlpha(chordSet.color, v));
             picker.setColor(chordSet.color);
         };
         row.appendChild(alphaSlider);
@@ -31213,11 +31259,13 @@ class CircularView {
      */
     setAssembly(igvGenome) {
 
-        if (this.genomeId === igvGenome.id) {
+        const id = this.genomeId || guid();
+
+        if (this.genomeId === id) {
             return
         }
         this.chordManager.clearChords();
-        this.genomeId = igvGenome.id;
+        this.genomeId = id;
         this.chrNames = new Set(igvGenome.chromosomes.map(chr => shortChrName$1(chr.name)));
 
         const regions = [];
@@ -31238,7 +31286,7 @@ class CircularView {
         this.assembly = {
             name: igvGenome.name,
             sequence: {
-                trackId: igvGenome.id,
+                trackId: id,
                 type: 'ReferenceSequenceTrack',
                 adapter: {
                     type: 'FromConfigSequenceAdapter',
@@ -31279,7 +31327,7 @@ class CircularView {
 
     addChords(newChords, options = {}) {
 
-        const tmp = options.track || options.name || "*";
+        const tmp = options.name || options.track || "*";
         const trackName = tmp.split(' ')[0].replaceAll("%20", " ");
         const chordSetName = tmp.replaceAll("%20", " ");
 
@@ -31332,21 +31380,6 @@ class CircularView {
         this.viewState.pluginManager.rootModel.session.clearSelection();
     }
 
-    getFeature(featureId) {
-
-        // TODO -- broken
-        // const display = this.viewState.pluginManager.rootModel.session.view.tracks[0].displays[0]
-        // const feature = display.data.features.get(featureId)
-        // return feature;
-
-        const features = [...this.viewState.config.tracks[0].adapter.features.value];
-        for (let f of features) {
-            if (featureId === f.uniqueId) {
-                return f
-            }
-        }
-    }
-
     /**
      * Deprecated, use "visible" property
      */
@@ -31369,23 +31402,23 @@ class CircularView {
         this.parent.style.display = isVisible ? 'block' : 'none';
     }
 
-    hideTrack(trackName) {
-        let track = this.getTrack(trackName);
-        if (track) {
-            track.visible = false;
+    hideChordSet(trackName) {
+        let cs = this.getChordSet(trackName);
+        if (cs) {
+            cs.visible = false;
             this.render();
         } else {
             console.warn(`No track with name: ${name}`);
         }
     }
 
-    showTrack(trackName) {
-        let track = this.getTrack(trackName);
-        if (track) {
-            track.visible = true;
+    showChordSet(name) {
+        let cs = this.getChordSet(name);
+        if (cs) {
+            cs.visible = true;
             this.render();
         } else {
-            console.warn(`No track with name: ${trackName}`);
+            console.warn(`No track with name: ${name}`);
         }
     }
 
@@ -31411,12 +31444,12 @@ class CircularView {
         this.render();
     }
 
-    getTrack(name) {
-        return this.groupByTrack ? this.chordManager.getTrack(name) : this.chordManager.getChordset(name)
+    getChordSet(name) {
+        return this.groupByTrack ? this.chordManager.getTrack(name) : this.chordManager.getChordSet(name)
     }
 
-    setTrackColor(name, color) {
-        const t = this.getTrack(name);
+    setColor(name, color) {
+        const t = this.getChordSet(name);
         if (t) {
             t.color = color;
             const trackID = t.id;
@@ -31443,8 +31476,6 @@ class CircularView {
         // Remove all children from possible previous renders.  React might do this for us when we render, but just in case.
         ReactDOM.unmountComponentAtNode(this.container);
 
-
-
         const visibleChordSets =
             (this.groupByTrack ? this.chordManager.tracks : this.chordManager.chordSets).filter(t => t.visible);
 
@@ -31523,7 +31554,7 @@ function guid() {
 
 function embedCSS$1() {
 
-    const css =  '.igv-circview-container {\n  z-index: 2048;\n  position: absolute;\n  width: fit-content;\n  height: fit-content;\n  box-sizing: content-box;\n  color: dimgray;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 12px;\n  background-color: white;\n  border-color: dimgray;\n  border-style: solid;\n  border-width: thin;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n\n.igv-circview-toolbar {\n  position: relative;\n  width: 100%;\n  height: 32px;\n  background-color: lightgrey;\n  border-bottom-style: solid;\n  border-bottom-color: dimgray;\n  border-bottom-width: thin;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.igv-circview-toolbar-button-container {\n  height: 100%;\n  width: fit-content;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-circview-toolbar-button-container > div {\n  margin: 4px;\n}\n\n.igv-circview-track-panel {\n  z-index: 1024;\n  position: absolute;\n  top: 33px;\n  left: 0;\n  width: 100%;\n  height: fit-content;\n  border-bottom-style: solid;\n  border-bottom-color: dimgray;\n  border-bottom-width: thin;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n.igv-circview-track-panel > div {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-circview-track-panel > div > div {\n  margin: 4px;\n}\n\n.igv-circview-swatch-button {\n  cursor: pointer;\n  padding: 5px;\n  width: 8px;\n  height: 8px;\n  border: 1px solid #8d8b8b;\n  border-radius: 16px;\n}\n\n.igv-circview-button {\n  cursor: pointer;\n  padding: 5px;\n  color: #444;\n  vertical-align: middle;\n  text-align: center;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 12px;\n  border: 1px solid #8d8b8b;\n  border-radius: 4px;\n  background: #efefef;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.2);\n}\n\n.igv-circview-button:hover {\n  background: #efefef;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.6);\n}\n\n.igv-circview-button:active {\n  color: #007bff;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.6);\n}\n\n/*# sourceMappingURL=circular-view.css.map */\n';
+    const css =  '.igv-circview-container {\n  z-index: 2048;\n  width: fit-content;\n  height: fit-content;\n  box-sizing: content-box;\n  color: dimgray;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 12px;\n  background-color: white;\n  border-color: dimgray;\n  border-style: solid;\n  border-width: thin;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n\n.igv-circview-toolbar {\n  position: relative;\n  width: 100%;\n  height: 32px;\n  background-color: lightgrey;\n  border-bottom-style: solid;\n  border-bottom-color: dimgray;\n  border-bottom-width: thin;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.igv-circview-toolbar-button-container {\n  height: 100%;\n  width: fit-content;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-circview-toolbar-button-container > div {\n  margin: 4px;\n}\n\n.igv-circview-track-panel {\n  z-index: 1024;\n  position: absolute;\n  top: 33px;\n  left: 0;\n  width: 100%;\n  height: fit-content;\n  border-bottom-style: solid;\n  border-bottom-color: dimgray;\n  border-bottom-width: thin;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n.igv-circview-track-panel > div {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-circview-track-panel > div > div {\n  margin: 4px;\n}\n\n.igv-circview-swatch-button {\n  cursor: pointer;\n  padding: 5px;\n  width: 8px;\n  height: 8px;\n  border: 1px solid #8d8b8b;\n  border-radius: 16px;\n}\n\n.igv-circview-button {\n  cursor: pointer;\n  padding: 5px;\n  color: #444;\n  vertical-align: middle;\n  text-align: center;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 12px;\n  border: 1px solid #8d8b8b;\n  border-radius: 4px;\n  background: #efefef;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.2);\n}\n\n.igv-circview-button:hover {\n  background: #efefef;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.6);\n}\n\n.igv-circview-button:active {\n  color: #007bff;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.6);\n}\n\n/*# sourceMappingURL=circular-view.css.map */\n';
 
     const style = document.createElement('style');
     style.setAttribute('type', 'text/css');
@@ -31562,27 +31593,45 @@ const makePairedAlignmentChords = (alignments) => {
 
     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,
+                    }
+                });
+            }
         }
     }
     return chords
 };
 
 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;
@@ -31601,6 +31650,18 @@ const makeSupplementalAlignmentChords = (alignments) => {
                 });
             }
         }
+    };
+
+    const chords = [];
+    for (let a of alignments) {
+        if(a.paired) {
+            makeChords(a.firstAlignment);
+            if(a.secondAlignment) {
+                makeChords(a.secondAlignment);
+            }
+        } else {
+            makeChords(a);
+        }
     }
     return chords
 };
@@ -32322,11 +32383,18 @@ class BAMTrack extends TrackBase {
         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);
+                && a.start <= refFrame.end) {
+                if (a.paired) {
+                    if (a.end - a.start > maxTemplateLength) {
+                        inView.push(a);
+                    }
+                } else {
+                    if (a.mate
+                        && a.mate.chr
+                        && (a.mate.chr !== a.chr || Math.max(a.fragmentLength) > maxTemplateLength)) {
+                        inView.push(a);
+                    }
+                }
             }
         }
         const chords = makePairedAlignmentChords(inView);
@@ -33181,10 +33249,13 @@ class AlignmentTrack {
             case "pairOrientation":
 
                 if (this.pairOrientation && alignment.pairOrientation) {
-                    var oTypes = orientationTypes[this.pairOrientation];
+                    const oTypes = orientationTypes[this.pairOrientation];
                     if (oTypes) {
-                        var pairColor = this.pairColors[oTypes[alignment.pairOrientation]];
-                        if (pairColor) color = pairColor;
+                        const pairColor = this.pairColors[oTypes[alignment.pairOrientation]];
+                        if (pairColor) {
+                            color = pairColor;
+                            break
+                        }
                     }
                 }
                 if ("pairOrientation" === option) {
@@ -33902,7 +33973,7 @@ class SampleNameViewport {
                         for (let {sampleNameViewport} of this.browser.trackViews) {
                             sampleNameViewport.setWidth(this.browser.sampleNameViewportWidth);
                         }
-                        this.browser.resize();
+                        this.browser.layoutChange();
                     }
                 };
 
@@ -35793,7 +35864,7 @@ function decodeBed(tokens, header) {
                 const eEnd = eStart + parseInt(exonSizes[i]);
                 exons.push({start: eStart, end: eEnd});
             }
-            findUTRs(exons, feature.cdStart, feature.cdEnd);
+            findUTRs$1(exons, feature.cdStart, feature.cdEnd);
             feature.exons = exons;
         }
 
@@ -35901,7 +35972,7 @@ function decodeGenePred(tokens, header) {
         const end = parseInt(exonEnds[i]);
         exons.push({start: start, end: end});
     }
-    findUTRs(exons, cdStart, cdEnd);
+    findUTRs$1(exons, cdStart, cdEnd);
 
     feature.exons = exons;
 
@@ -35944,7 +36015,7 @@ function decodeGenePredExt(tokens, header) {
         const end = parseInt(exonEnds[i]);
         exons.push({start: start, end: end});
     }
-    findUTRs(exons, cdStart, cdEnd);
+    findUTRs$1(exons, cdStart, cdEnd);
 
     feature.exons = exons;
 
@@ -35985,14 +36056,14 @@ function decodeReflat(tokens, header) {
         const end = parseInt(exonEnds[i]);
         exons.push({start: start, end: end});
     }
-    findUTRs(exons, cdStart, cdEnd);
+    findUTRs$1(exons, cdStart, cdEnd);
 
     feature.exons = exons;
 
     return feature
 }
 
-function findUTRs(exons, cdStart, cdEnd) {
+function findUTRs$1(exons, cdStart, cdEnd) {
 
     for (let exon of exons) {
         const end = exon.end;
@@ -39508,7 +39579,7 @@ class TextFeatureSource {
         this.sourceType = (config.sourceType === undefined ? "file" : config.sourceType);
         this.maxWGCount = config.maxWGCount || DEFAULT_MAX_WG_COUNT;
 
-        const queryableFormats = new Set(["bigwig", "bw", "bigbed", "bb", "biginteract", "tdf"]);
+        const queryableFormats = new Set(["bigwig", "bw", "bigbed", "bb", "biginteract", "biggenepred", "bignarrowpeak", "tdf"]);
 
         if (config.features && Array.isArray(config.features)) {
             // Explicit array of features
@@ -39928,11 +39999,9 @@ class BufferedReader {
     }
 }
 
-//table chromatinInteract
-
 function getDecoder(definedFieldCount, fieldCount, autoSql, format) {
 
-    if (autoSql && 'chromatinInteract' === autoSql.table || "biginteract" === format) {
+    if ("biginteract" === format || (autoSql && ('chromatinInteract' === autoSql.table) || 'interact' === autoSql.table)) {
         return decodeInteract
     } else {
         const standardFieldCount = definedFieldCount - 3;
@@ -39969,6 +40038,7 @@ function getDecoder(definedFieldCount, fieldCount, autoSql, format) {
                     const eEnd = eStart + parseInt(exonSizes[i]);
                     exons.push({start: eStart, end: eEnd});
                 }
+                findUTRs(exons, feature.cdStart, feature.cdEnd);
                 feature.exons = exons;
             }
 
@@ -39986,6 +40056,28 @@ function getDecoder(definedFieldCount, fieldCount, autoSql, format) {
         }
     }
 
+    //table chromatinInteract
+// "Chromatin interaction between two regions"
+//     (
+//     string chrom;      "Chromosome (or contig, scaffold, etc.). For interchromosomal, use 2 records"
+//     uint chromStart;   "Start position of lower region. For interchromosomal, set to chromStart of this region"
+//     uint chromEnd;     "End position of upper region. For interchromosomal, set to chromEnd of this region"
+//     string name;       "Name of item, for display"
+//     uint score;        "Score from 0-1000"
+//     double value;      "Strength of interaction or other data value. Typically basis for score"
+//     string exp;        "Experiment name (metadata for filtering). Use . if not applicable"
+//     string color;      "Item color.  Specified as r,g,b or hexadecimal #RRGGBB or html color name, as in //www.w3.org/TR/css3-color/#html4."
+//     string region1Chrom;  "Chromosome of lower region. For non-directional interchromosomal, chrom of this region."
+//     uint region1Start;  "Start position of lower/this region"
+//     uint region1End;    "End position in chromosome of lower/this region"
+//     string region1Name;  "Identifier of lower/this region"
+//     string region1Strand; "Orientation of lower/this region: + or -.  Use . if not applicable"
+//     string region2Chrom; "Chromosome of upper region. For non-directional interchromosomal, chrom of other region"
+//     uint region2Start;  "Start position in chromosome of upper/this region"
+//     uint region2End;    "End position in chromosome of upper/this region"
+//     string region2Name; "Identifier of upper/this region"
+//     string region2Strand; "Orientation of upper/this region: + or -.  Use . if not applicable"
+//     )
     function decodeInteract(feature, tokens) {
 
         feature.chr1 = tokens[5];
@@ -40005,6 +40097,24 @@ function getDecoder(definedFieldCount, fieldCount, autoSql, format) {
     }
 }
 
+function findUTRs(exons, cdStart, cdEnd) {
+
+    for (let exon of exons) {
+        const end = exon.end;
+        const start = exon.start;
+        if (end < cdStart || start > cdEnd) {
+            exon.utr = true;
+        } else {
+            if (cdStart >= start && cdStart <= end) {
+                exon.cdStart = cdStart;
+            }
+            if (cdEnd >= start && cdEnd <= end) {
+                exon.cdEnd = cdEnd;
+            }
+        }
+    }
+}
+
 function scoreShade(score, color) {
     const alpha = Math.min(1, 0.11 + 0.89 * (score / 779));
     return alpha.toString()
@@ -41544,11 +41654,12 @@ function zoomLevelForScale(chr, bpPerPixel, genome) {
  * THE SOFTWARE.
  */
 
+const bbFormats = new Set(['bigwig', 'bw', 'bigbed', 'bb', 'biginteract', 'biggenepred', 'bignarrowpeak']);
 
 function FeatureSource(config, genome) {
 
     const format = config.format ? config.format.toLowerCase() : undefined;
-    if ('bigwig' === format || 'bigbed' === format || 'bb' === format || "biginteract" === format) {
+    if (bbFormats.has(format)) {
         return new BWSource(config, genome)
     } else if ("tdf" === format) {
         return new TDFSource(config, genome)
@@ -41796,10 +41907,9 @@ function renderFeatureLabel(ctx, feature, featureX, featureX1, featureY, referen
         const textBox = ctx.measureText(name);
         const xleft = centerX - textBox.width / 2;
         const xright = centerX + textBox.width / 2;
-        if (options.labelAllFeatures || xleft > options.rowLastX[feature.row] || gtexSelection) {
-            options.rowLastX[feature.row] = xright;
+        if (options.labelAllFeatures || xleft > options.rowLastLabelX[feature.row] || gtexSelection) {
+            options.rowLastLabelX[feature.row] = xright;
             IGVGraphics.fillText(ctx, name, centerX, labelY, geneFontStyle, transform);
-
         }
     } finally {
         ctx.restore();
@@ -42156,24 +42266,27 @@ class FeatureTrack extends TrackBase {
 
             const rowFeatureCount = [];
             options.rowLastX = [];
+            options.rowLastLabelX = [];
             for (let feature of featureList) {
-                const row = feature.row || 0;
-                if (rowFeatureCount[row] === undefined) {
-                    rowFeatureCount[row] = 1;
-                } else {
-                    rowFeatureCount[row]++;
+                if(feature.start > bpStart && feature.end < bpEnd) {
+                    const row = this.displayMode === "COLLAPSED" ? 0 : feature.row || 0;
+                    if (rowFeatureCount[row] === undefined) {
+                        rowFeatureCount[row] = 1;
+                    } else {
+                        rowFeatureCount[row]++;
+                    }
+                    options.rowLastX[row] = -Number.MAX_SAFE_INTEGER;
+                    options.rowLastLabelX[row] = -Number.MAX_SAFE_INTEGER;
                 }
-                options.rowLastX[row] = -Number.MAX_SAFE_INTEGER;
             }
+            const pixelsPerFeature = pixelWidth / Math.max(...rowFeatureCount);
 
             let lastPxEnd = [];
             for (let feature of featureList) {
                 if (feature.end < bpStart) continue
                 if (feature.start > bpEnd) break
-
                 const row = this.displayMode === 'COLLAPSED' ? 0 : feature.row;
-                const featureDensity = pixelWidth / rowFeatureCount[row];
-                options.drawLabel = options.labelAllFeatures || featureDensity > 10;
+                options.drawLabel = options.labelAllFeatures || pixelsPerFeature > 10;
                 const pxEnd = Math.ceil((feature.end - bpStart) / bpPerPixel);
                 const last = lastPxEnd[row];
                 if (!last || pxEnd > last) {
@@ -42187,7 +42300,6 @@ class FeatureTrack extends TrackBase {
                         ctx.globalAlpha = 1.0;
                     }
                     lastPxEnd[row] = pxEnd;
-
                 }
             }
 
@@ -48594,7 +48706,7 @@ class SampleNameControl {
                 }
             }
 
-            browser.resize();
+            browser.layoutChange();
 
 
         });
@@ -50264,7 +50376,16 @@ class Browser {
 
     }
 
+    /**
+     * 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);
 
@@ -51005,6 +51126,7 @@ class Browser {
     }
 
     createCircularView(container, show) {
+        show = show === true;   // convert undefined to boolean
         this.circularView = createCircularView(container, this);
         this.circularViewControl = new CircularViewControl(this.$toggle_button_container.get(0), this);
         this.circularView.setAssembly({
@@ -51013,7 +51135,7 @@ class Browser {
             chromosomes: makeCircViewChromosomes(this.genome)
         });
         this.circularViewVisible = show;
-
+        return this.circularView
     }
 
     get circularViewVisible() {