igv 2.12.0 → 2.12.1

package/README.md

@@ -12,19 +12,19 @@ Below are examples and a quickstart guide.  See the [Wiki](https://github.com/ig
 
 # Examples
  
-***[Alignments](https://igv.org/web/release/2.12.0/examples/cram-vcf.html)***
+***[Alignments](https://igv.org/web/release/2.12.1/examples/cram-vcf.html)***
 
-***[Interactions](https://igv.org/web/release/2.12.0/examples/interact.html)***
+***[Interactions](https://igv.org/web/release/2.12.1/examples/interact.html)***
 
-***[Copy number](https://igv.org/web/release/2.12.0/examples/copyNumber.html)***
+***[Copy number](https://igv.org/web/release/2.12.1/examples/copyNumber.html)***
 
-***[Multiple regions](https://igv.org/web/release/2.12.0/examples/multi-locus.html)***
+***[Multiple regions](https://igv.org/web/release/2.12.1/examples/multi-locus.html)***
 
-***[Mutation Annotation Format (MAF)](https://igv.org/web/release/2.12.0/examples/maf-tcga.html)***
+***[Mutation Annotation Format (MAF)](https://igv.org/web/release/2.12.1/examples/maf-tcga.html)***
 
-***[Variant color options](https://igv.org/web/release/2.12.0/examples/variant-colors.html)***
+***[Variant color options](https://igv.org/web/release/2.12.1/examples/variant-colors.html)***
 
-***[More](https://igv.org/web/release/2.12.0/examples/)***
+***[More](https://igv.org/web/release/2.12.1/examples/)***
 
  
 # Quickstart
@@ -33,18 +33,18 @@ Below are examples and a quickstart guide.  See the [Wiki](https://github.com/ig
 igv.js consists of a single javascript file with no external dependencies.  
 
 Pre-built files for ES5 (igv.min.js) and ES6 (igv.esm.min.js)
-can be downloaded from [https://cdn.jsdelivr.net/npm/igv@2.12.0/dist/](https://cdn.jsdelivr.net/npm/igv@2.12.0/dist/). 
+can be downloaded from [https://cdn.jsdelivr.net/npm/igv@2.12.1/dist/](https://cdn.jsdelivr.net/npm/igv@2.12.1/dist/). 
 
 To import igv as an ES6 module
 
 ```javascript
-import igv from "https://cdn.jsdelivr.net/npm/igv@2.12.0/dist/igv.esm.min.js"
+import igv from "https://cdn.jsdelivr.net/npm/igv@2.12.1/dist/igv.esm.min.js"
 ``` 
 
 Or as a script include (defines the "igv" global)
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/igv@2.12.0/dist/igv.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/igv@2.12.1/dist/igv.min.js"></script>
 ```   
  
 Alternatively you can install with npm  

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"
@@ -22792,7 +22796,7 @@ const Cytoband = function (start, end, name, typestain) {
     }
 };
 
-const _version = "2.12.0";
+const _version = "2.12.1";
 function version() {
     return _version
 }
@@ -22940,7 +22944,7 @@ class Genome {
     constructor(config, sequence, ideograms, aliases) {
 
         this.config = config;
-        this.id = config.id;
+        this.id = config.id || generateGenomeID(config);
         this.sequence = sequence;
         this.chromosomeNames = sequence.chromosomeNames;
         this.chromosomes = sequence.chromosomes;  // An object (functions as a dictionary)
@@ -23262,6 +23266,18 @@ function constructWG(genome, config) {
 
 }
 
+function generateGenomeID(config) {
+    if (config.id !== undefined) {
+        return config.id
+    } else if (config.fastaURL && isString$3(config.fastaURL)) {
+        return config.fastaURL
+    } else if (config.fastaURL && config.fastaURL.name) {
+        return config.fastaURL.name
+    } else {
+        return ("0000" + (Math.random() * Math.pow(36, 4) << 0).toString(36)).slice(-4)
+    }
+}
+
 /**
  * Created by dat on 9/16/16.
  */
@@ -23847,7 +23863,7 @@ class TrackViewport extends Viewport {
 
         viewport.addEventListener('click', (event) => {
 
-            if (this.enableClick) {
+            if (this.enableClick && this.canvas) {
                 if (3 === event.which || event.ctrlKey) {
                     return
                 }
@@ -29004,6 +29020,10 @@ class BamSource {
  * THE SOFTWARE.
  */
 
+const fixColor = (colorString) => {
+    return (colorString.indexOf(",") > 0 && !colorString.startsWith("rgb")) ?
+        `rgb(${colorString})` : colorString
+};
 
 /**
  * A collection of properties and methods shared by all (or most) track types.
@@ -29048,8 +29068,8 @@ class TrackBase {
 
         this.order = config.order;
 
-        this.color = config.color;
-        this.altColor = config.altColor;
+        if(config.color) this.color = fixColor(config.color);
+        if(config.altColor) this.altColor = fixColor(config.altColor);
         if ("civic-ws" === config.sourceType) {    // Ugly proxy for specialized track type
             this.defaultColor = "rgb(155,20,20)";
         } else {
@@ -30944,7 +30964,7 @@ class ChordSetManager {
         return this.tracks.find(t => name === t.name)
     }
 
-    getChordset(name) {
+    getChordSet(name) {
         return this.chordSets.find(cs => name === cs.name)
     }
 
@@ -31062,9 +31082,8 @@ class CircularView {
         buttonContainer.appendChild(this.showControlsButton);
         this.showControlsButton.innerText = 'none' === this.controlPanel.style.display ? 'Show Controls' : 'Hide Controls';
         this.showControlsButton.addEventListener('click', (event) => {
-            const trackPanelRows = this.controlPanel.querySelectorAll('div');
-            if (trackPanelRows.length > 0) {
-
+            const panelRows = this.controlPanel.querySelectorAll('div');
+            if (panelRows.length > 0) {
                 if ('none' === this.controlPanel.style.display) {
                     this.controlPanel.style.display = 'flex';
                     event.target.innerText = 'Hide Controls';
@@ -31148,10 +31167,10 @@ class CircularView {
         hideShowButton.innerText = true === chordSet.visible ? 'Hide' : 'Show';
         hideShowButton.addEventListener('click', event => {
             if (true === chordSet.visible) {
-                this.hideTrack(chordSet.name);
+                this.hideChordSet(chordSet.name);
                 event.target.innerText = "Show";
             } else {
-                this.showTrack(chordSet.name);
+                this.showChordSet(chordSet.name);
                 event.target.innerText = "Hide";
             }
         });
@@ -31175,7 +31194,7 @@ class CircularView {
                 color: chordSet.color,
                 onChange: ({rgbaString}) => {
                     colorPickerButton.style.backgroundColor = setAlpha(rgbaString, 1);
-                    this.setTrackColor(chordSet.name, rgbaString);
+                    this.setColor(chordSet.name, rgbaString);
                     alphaSlider.value = alphaToValue(getAlpha(chordSet.color));
                 }
             };
@@ -31193,7 +31212,7 @@ class CircularView {
         alphaSlider.value = alphaToValue(getAlpha(chordSet.color));
         alphaSlider.oninput = () => {
             const v = valueToAlpha(alphaSlider.value);
-            this.setTrackColor(chordSet.name, setAlpha(chordSet.color, v));
+            this.setColor(chordSet.name, setAlpha(chordSet.color, v));
             picker.setColor(chordSet.color);
         };
         row.appendChild(alphaSlider);
@@ -31213,11 +31232,13 @@ class CircularView {
      */
     setAssembly(igvGenome) {
 
-        if (this.genomeId === igvGenome.id) {
+        const id = this.genomeId || guid();
+
+        if (this.genomeId === id) {
             return
         }
         this.chordManager.clearChords();
-        this.genomeId = igvGenome.id;
+        this.genomeId = id;
         this.chrNames = new Set(igvGenome.chromosomes.map(chr => shortChrName$1(chr.name)));
 
         const regions = [];
@@ -31238,7 +31259,7 @@ class CircularView {
         this.assembly = {
             name: igvGenome.name,
             sequence: {
-                trackId: igvGenome.id,
+                trackId: id,
                 type: 'ReferenceSequenceTrack',
                 adapter: {
                     type: 'FromConfigSequenceAdapter',
@@ -31279,7 +31300,7 @@ class CircularView {
 
     addChords(newChords, options = {}) {
 
-        const tmp = options.track || options.name || "*";
+        const tmp = options.name || options.track || "*";
         const trackName = tmp.split(' ')[0].replaceAll("%20", " ");
         const chordSetName = tmp.replaceAll("%20", " ");
 
@@ -31332,21 +31353,6 @@ class CircularView {
         this.viewState.pluginManager.rootModel.session.clearSelection();
     }
 
-    getFeature(featureId) {
-
-        // TODO -- broken
-        // const display = this.viewState.pluginManager.rootModel.session.view.tracks[0].displays[0]
-        // const feature = display.data.features.get(featureId)
-        // return feature;
-
-        const features = [...this.viewState.config.tracks[0].adapter.features.value];
-        for (let f of features) {
-            if (featureId === f.uniqueId) {
-                return f
-            }
-        }
-    }
-
     /**
      * Deprecated, use "visible" property
      */
@@ -31369,23 +31375,23 @@ class CircularView {
         this.parent.style.display = isVisible ? 'block' : 'none';
     }
 
-    hideTrack(trackName) {
-        let track = this.getTrack(trackName);
-        if (track) {
-            track.visible = false;
+    hideChordSet(trackName) {
+        let cs = this.getChordSet(trackName);
+        if (cs) {
+            cs.visible = false;
             this.render();
         } else {
             console.warn(`No track with name: ${name}`);
         }
     }
 
-    showTrack(trackName) {
-        let track = this.getTrack(trackName);
-        if (track) {
-            track.visible = true;
+    showChordSet(name) {
+        let cs = this.getChordSet(name);
+        if (cs) {
+            cs.visible = true;
             this.render();
         } else {
-            console.warn(`No track with name: ${trackName}`);
+            console.warn(`No track with name: ${name}`);
         }
     }
 
@@ -31411,12 +31417,12 @@ class CircularView {
         this.render();
     }
 
-    getTrack(name) {
-        return this.groupByTrack ? this.chordManager.getTrack(name) : this.chordManager.getChordset(name)
+    getChordSet(name) {
+        return this.groupByTrack ? this.chordManager.getTrack(name) : this.chordManager.getChordSet(name)
     }
 
-    setTrackColor(name, color) {
-        const t = this.getTrack(name);
+    setColor(name, color) {
+        const t = this.getChordSet(name);
         if (t) {
             t.color = color;
             const trackID = t.id;
@@ -31443,8 +31449,6 @@ class CircularView {
         // Remove all children from possible previous renders.  React might do this for us when we render, but just in case.
         ReactDOM.unmountComponentAtNode(this.container);
 
-
-
         const visibleChordSets =
             (this.groupByTrack ? this.chordManager.tracks : this.chordManager.chordSets).filter(t => t.visible);
 
@@ -31523,7 +31527,7 @@ function guid() {
 
 function embedCSS$1() {
 
-    const css =  '.igv-circview-container {\n  z-index: 2048;\n  position: absolute;\n  width: fit-content;\n  height: fit-content;\n  box-sizing: content-box;\n  color: dimgray;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 12px;\n  background-color: white;\n  border-color: dimgray;\n  border-style: solid;\n  border-width: thin;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n\n.igv-circview-toolbar {\n  position: relative;\n  width: 100%;\n  height: 32px;\n  background-color: lightgrey;\n  border-bottom-style: solid;\n  border-bottom-color: dimgray;\n  border-bottom-width: thin;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.igv-circview-toolbar-button-container {\n  height: 100%;\n  width: fit-content;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-circview-toolbar-button-container > div {\n  margin: 4px;\n}\n\n.igv-circview-track-panel {\n  z-index: 1024;\n  position: absolute;\n  top: 33px;\n  left: 0;\n  width: 100%;\n  height: fit-content;\n  border-bottom-style: solid;\n  border-bottom-color: dimgray;\n  border-bottom-width: thin;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n.igv-circview-track-panel > div {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-circview-track-panel > div > div {\n  margin: 4px;\n}\n\n.igv-circview-swatch-button {\n  cursor: pointer;\n  padding: 5px;\n  width: 8px;\n  height: 8px;\n  border: 1px solid #8d8b8b;\n  border-radius: 16px;\n}\n\n.igv-circview-button {\n  cursor: pointer;\n  padding: 5px;\n  color: #444;\n  vertical-align: middle;\n  text-align: center;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 12px;\n  border: 1px solid #8d8b8b;\n  border-radius: 4px;\n  background: #efefef;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.2);\n}\n\n.igv-circview-button:hover {\n  background: #efefef;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.6);\n}\n\n.igv-circview-button:active {\n  color: #007bff;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.6);\n}\n\n/*# sourceMappingURL=circular-view.css.map */\n';
+    const css =  '.igv-circview-container {\n  z-index: 2048;\n  width: fit-content;\n  height: fit-content;\n  box-sizing: content-box;\n  color: dimgray;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 12px;\n  background-color: white;\n  border-color: dimgray;\n  border-style: solid;\n  border-width: thin;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n\n.igv-circview-toolbar {\n  position: relative;\n  width: 100%;\n  height: 32px;\n  background-color: lightgrey;\n  border-bottom-style: solid;\n  border-bottom-color: dimgray;\n  border-bottom-width: thin;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.igv-circview-toolbar-button-container {\n  height: 100%;\n  width: fit-content;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-circview-toolbar-button-container > div {\n  margin: 4px;\n}\n\n.igv-circview-track-panel {\n  z-index: 1024;\n  position: absolute;\n  top: 33px;\n  left: 0;\n  width: 100%;\n  height: fit-content;\n  border-bottom-style: solid;\n  border-bottom-color: dimgray;\n  border-bottom-width: thin;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n.igv-circview-track-panel > div {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-circview-track-panel > div > div {\n  margin: 4px;\n}\n\n.igv-circview-swatch-button {\n  cursor: pointer;\n  padding: 5px;\n  width: 8px;\n  height: 8px;\n  border: 1px solid #8d8b8b;\n  border-radius: 16px;\n}\n\n.igv-circview-button {\n  cursor: pointer;\n  padding: 5px;\n  color: #444;\n  vertical-align: middle;\n  text-align: center;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 12px;\n  border: 1px solid #8d8b8b;\n  border-radius: 4px;\n  background: #efefef;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.2);\n}\n\n.igv-circview-button:hover {\n  background: #efefef;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.6);\n}\n\n.igv-circview-button:active {\n  color: #007bff;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.6);\n}\n\n/*# sourceMappingURL=circular-view.css.map */\n';
 
     const style = document.createElement('style');
     style.setAttribute('type', 'text/css');
@@ -33181,10 +33185,13 @@ class AlignmentTrack {
             case "pairOrientation":
 
                 if (this.pairOrientation && alignment.pairOrientation) {
-                    var oTypes = orientationTypes[this.pairOrientation];
+                    const oTypes = orientationTypes[this.pairOrientation];
                     if (oTypes) {
-                        var pairColor = this.pairColors[oTypes[alignment.pairOrientation]];
-                        if (pairColor) color = pairColor;
+                        const pairColor = this.pairColors[oTypes[alignment.pairOrientation]];
+                        if (pairColor) {
+                            color = pairColor;
+                            break
+                        }
                     }
                 }
                 if ("pairOrientation" === option) {
@@ -35793,7 +35800,7 @@ function decodeBed(tokens, header) {
                 const eEnd = eStart + parseInt(exonSizes[i]);
                 exons.push({start: eStart, end: eEnd});
             }
-            findUTRs(exons, feature.cdStart, feature.cdEnd);
+            findUTRs$1(exons, feature.cdStart, feature.cdEnd);
             feature.exons = exons;
         }
 
@@ -35901,7 +35908,7 @@ function decodeGenePred(tokens, header) {
         const end = parseInt(exonEnds[i]);
         exons.push({start: start, end: end});
     }
-    findUTRs(exons, cdStart, cdEnd);
+    findUTRs$1(exons, cdStart, cdEnd);
 
     feature.exons = exons;
 
@@ -35944,7 +35951,7 @@ function decodeGenePredExt(tokens, header) {
         const end = parseInt(exonEnds[i]);
         exons.push({start: start, end: end});
     }
-    findUTRs(exons, cdStart, cdEnd);
+    findUTRs$1(exons, cdStart, cdEnd);
 
     feature.exons = exons;
 
@@ -35985,14 +35992,14 @@ function decodeReflat(tokens, header) {
         const end = parseInt(exonEnds[i]);
         exons.push({start: start, end: end});
     }
-    findUTRs(exons, cdStart, cdEnd);
+    findUTRs$1(exons, cdStart, cdEnd);
 
     feature.exons = exons;
 
     return feature
 }
 
-function findUTRs(exons, cdStart, cdEnd) {
+function findUTRs$1(exons, cdStart, cdEnd) {
 
     for (let exon of exons) {
         const end = exon.end;
@@ -39508,7 +39515,7 @@ class TextFeatureSource {
         this.sourceType = (config.sourceType === undefined ? "file" : config.sourceType);
         this.maxWGCount = config.maxWGCount || DEFAULT_MAX_WG_COUNT;
 
-        const queryableFormats = new Set(["bigwig", "bw", "bigbed", "bb", "biginteract", "tdf"]);
+        const queryableFormats = new Set(["bigwig", "bw", "bigbed", "bb", "biginteract", "biggenepred", "bignarrowpeak", "tdf"]);
 
         if (config.features && Array.isArray(config.features)) {
             // Explicit array of features
@@ -39928,11 +39935,9 @@ class BufferedReader {
     }
 }
 
-//table chromatinInteract
-
 function getDecoder(definedFieldCount, fieldCount, autoSql, format) {
 
-    if (autoSql && 'chromatinInteract' === autoSql.table || "biginteract" === format) {
+    if ("biginteract" === format || (autoSql && ('chromatinInteract' === autoSql.table) || 'interact' === autoSql.table)) {
         return decodeInteract
     } else {
         const standardFieldCount = definedFieldCount - 3;
@@ -39969,6 +39974,7 @@ function getDecoder(definedFieldCount, fieldCount, autoSql, format) {
                     const eEnd = eStart + parseInt(exonSizes[i]);
                     exons.push({start: eStart, end: eEnd});
                 }
+                findUTRs(exons, feature.cdStart, feature.cdEnd);
                 feature.exons = exons;
             }
 
@@ -39986,6 +39992,28 @@ function getDecoder(definedFieldCount, fieldCount, autoSql, format) {
         }
     }
 
+    //table chromatinInteract
+// "Chromatin interaction between two regions"
+//     (
+//     string chrom;      "Chromosome (or contig, scaffold, etc.). For interchromosomal, use 2 records"
+//     uint chromStart;   "Start position of lower region. For interchromosomal, set to chromStart of this region"
+//     uint chromEnd;     "End position of upper region. For interchromosomal, set to chromEnd of this region"
+//     string name;       "Name of item, for display"
+//     uint score;        "Score from 0-1000"
+//     double value;      "Strength of interaction or other data value. Typically basis for score"
+//     string exp;        "Experiment name (metadata for filtering). Use . if not applicable"
+//     string color;      "Item color.  Specified as r,g,b or hexadecimal #RRGGBB or html color name, as in //www.w3.org/TR/css3-color/#html4."
+//     string region1Chrom;  "Chromosome of lower region. For non-directional interchromosomal, chrom of this region."
+//     uint region1Start;  "Start position of lower/this region"
+//     uint region1End;    "End position in chromosome of lower/this region"
+//     string region1Name;  "Identifier of lower/this region"
+//     string region1Strand; "Orientation of lower/this region: + or -.  Use . if not applicable"
+//     string region2Chrom; "Chromosome of upper region. For non-directional interchromosomal, chrom of other region"
+//     uint region2Start;  "Start position in chromosome of upper/this region"
+//     uint region2End;    "End position in chromosome of upper/this region"
+//     string region2Name; "Identifier of upper/this region"
+//     string region2Strand; "Orientation of upper/this region: + or -.  Use . if not applicable"
+//     )
     function decodeInteract(feature, tokens) {
 
         feature.chr1 = tokens[5];
@@ -40005,6 +40033,24 @@ function getDecoder(definedFieldCount, fieldCount, autoSql, format) {
     }
 }
 
+function findUTRs(exons, cdStart, cdEnd) {
+
+    for (let exon of exons) {
+        const end = exon.end;
+        const start = exon.start;
+        if (end < cdStart || start > cdEnd) {
+            exon.utr = true;
+        } else {
+            if (cdStart >= start && cdStart <= end) {
+                exon.cdStart = cdStart;
+            }
+            if (cdEnd >= start && cdEnd <= end) {
+                exon.cdEnd = cdEnd;
+            }
+        }
+    }
+}
+
 function scoreShade(score, color) {
     const alpha = Math.min(1, 0.11 + 0.89 * (score / 779));
     return alpha.toString()
@@ -41544,11 +41590,12 @@ function zoomLevelForScale(chr, bpPerPixel, genome) {
  * THE SOFTWARE.
  */
 
+const bbFormats = new Set(['bigwig', 'bw', 'bigbed', 'bb', 'biginteract', 'biggenepred', 'bignarrowpeak']);
 
 function FeatureSource(config, genome) {
 
     const format = config.format ? config.format.toLowerCase() : undefined;
-    if ('bigwig' === format || 'bigbed' === format || 'bb' === format || "biginteract" === format) {
+    if (bbFormats.has(format)) {
         return new BWSource(config, genome)
     } else if ("tdf" === format) {
         return new TDFSource(config, genome)
@@ -41796,10 +41843,9 @@ function renderFeatureLabel(ctx, feature, featureX, featureX1, featureY, referen
         const textBox = ctx.measureText(name);
         const xleft = centerX - textBox.width / 2;
         const xright = centerX + textBox.width / 2;
-        if (options.labelAllFeatures || xleft > options.rowLastX[feature.row] || gtexSelection) {
-            options.rowLastX[feature.row] = xright;
+        if (options.labelAllFeatures || xleft > options.rowLastLabelX[feature.row] || gtexSelection) {
+            options.rowLastLabelX[feature.row] = xright;
             IGVGraphics.fillText(ctx, name, centerX, labelY, geneFontStyle, transform);
-
         }
     } finally {
         ctx.restore();
@@ -42156,24 +42202,27 @@ class FeatureTrack extends TrackBase {
 
             const rowFeatureCount = [];
             options.rowLastX = [];
+            options.rowLastLabelX = [];
             for (let feature of featureList) {
-                const row = feature.row || 0;
-                if (rowFeatureCount[row] === undefined) {
-                    rowFeatureCount[row] = 1;
-                } else {
-                    rowFeatureCount[row]++;
+                if(feature.start > bpStart && feature.end < bpEnd) {
+                    const row = this.displayMode === "COLLAPSED" ? 0 : feature.row || 0;
+                    if (rowFeatureCount[row] === undefined) {
+                        rowFeatureCount[row] = 1;
+                    } else {
+                        rowFeatureCount[row]++;
+                    }
+                    options.rowLastX[row] = -Number.MAX_SAFE_INTEGER;
+                    options.rowLastLabelX[row] = -Number.MAX_SAFE_INTEGER;
                 }
-                options.rowLastX[row] = -Number.MAX_SAFE_INTEGER;
             }
+            const pixelsPerFeature = pixelWidth / Math.max(...rowFeatureCount);
 
             let lastPxEnd = [];
             for (let feature of featureList) {
                 if (feature.end < bpStart) continue
                 if (feature.start > bpEnd) break
-
                 const row = this.displayMode === 'COLLAPSED' ? 0 : feature.row;
-                const featureDensity = pixelWidth / rowFeatureCount[row];
-                options.drawLabel = options.labelAllFeatures || featureDensity > 10;
+                options.drawLabel = options.labelAllFeatures || pixelsPerFeature > 10;
                 const pxEnd = Math.ceil((feature.end - bpStart) / bpPerPixel);
                 const last = lastPxEnd[row];
                 if (!last || pxEnd > last) {
@@ -42187,7 +42236,6 @@ class FeatureTrack extends TrackBase {
                         ctx.globalAlpha = 1.0;
                     }
                     lastPxEnd[row] = pxEnd;
-
                 }
             }
 
@@ -51005,6 +51053,7 @@ class Browser {
     }
 
     createCircularView(container, show) {
+        show = show === true;   // convert undefined to boolean
         this.circularView = createCircularView(container, this);
         this.circularViewControl = new CircularViewControl(this.$toggle_button_container.get(0), this);
         this.circularView.setAssembly({
@@ -51013,7 +51062,7 @@ class Browser {
             chromosomes: makeCircViewChromosomes(this.genome)
         });
         this.circularViewVisible = show;
-
+        return this.circularView
     }
 
     get circularViewVisible() {