igv 2.12.0 → 2.12.1

package/dist/igv.js

@@ -19911,7 +19911,7 @@
      * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
      * THE SOFTWARE.
      */
-    const knownFileExtensions = new Set(["narrowpeak", "broadpeak", "regionpeak", "peaks", "bedgraph", "wig", "gff3", "gff", "gtf", "fusionjuncspan", "refflat", "seg", "aed", "bed", "vcf", "bb", "bigbed", "biginteract", "bw", "bigwig", "bam", "tdf", "refgene", "genepred", "genepredext", "bedpe", "bp", "snp", "rmsk", "cram", "gwas", "maf", "mut"]);
+    const knownFileExtensions = new Set(["narrowpeak", "broadpeak", "regionpeak", "peaks", "bedgraph", "wig", "gff3", "gff", "gtf", "fusionjuncspan", "refflat", "seg", "aed", "bed", "vcf", "bb", "bigbed", "biginteract", "biggenepred", "bignarrowpeak", "bw", "bigwig", "bam", "tdf", "refgene", "genepred", "genepredext", "bedpe", "bp", "snp", "rmsk", "cram", "gwas", "maf", "mut"]);
     /**
      * Return a custom format object with the given name.
      * @param name
@@ -20044,6 +20044,8 @@
           case "bed":
           case "bigbed":
           case "bb":
+          case "biggenepred":
+          case "bignarrowpeak":
             return "bedtype";
 
           default:
@@ -23091,7 +23093,7 @@
       }
     };
 
-    const _version = "2.12.0";
+    const _version = "2.12.1";
 
     function version$1() {
       return _version;
@@ -23234,7 +23236,7 @@
     class Genome {
       constructor(config, sequence, ideograms, aliases) {
         this.config = config;
-        this.id = config.id;
+        this.id = config.id || generateGenomeID(config);
         this.sequence = sequence;
         this.chromosomeNames = sequence.chromosomeNames;
         this.chromosomes = sequence.chromosomes; // An object (functions as a dictionary)
@@ -23550,6 +23552,18 @@
       }
     }
 
+    function generateGenomeID(config) {
+      if (config.id !== undefined) {
+        return config.id;
+      } else if (config.fastaURL && isString$3(config.fastaURL)) {
+        return config.fastaURL;
+      } else if (config.fastaURL && config.fastaURL.name) {
+        return config.fastaURL.name;
+      } else {
+        return ("0000" + (Math.random() * Math.pow(36, 4) << 0).toString(36)).slice(-4);
+      }
+    }
+
     /**
      * Created by dat on 9/16/16.
      */
@@ -24116,7 +24130,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
@@ -45417,6 +45431,10 @@
      * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
      * THE SOFTWARE.
      */
+
+    const fixColor = colorString => {
+      return colorString.indexOf(",") > 0 && !colorString.startsWith("rgb") ? `rgb(${colorString})` : colorString;
+    };
     /**
      * A collection of properties and methods shared by all (or most) track types.
      *
@@ -45425,6 +45443,7 @@
      * @constructor
      */
 
+
     class TrackBase {
       constructor(config, browser) {
         this.browser = browser;
@@ -45458,8 +45477,8 @@
 
         this.id = this.config.id === undefined ? this.name : this.config.id;
         this.order = config.order;
-        this.color = config.color;
-        this.altColor = config.altColor;
+        if (config.color) this.color = fixColor(config.color);
+        if (config.altColor) this.altColor = fixColor(config.altColor);
 
         if ("civic-ws" === config.sourceType) {
           // Ugly proxy for specialized track type
@@ -47663,7 +47682,7 @@
         return this.tracks.find(t => name === t.name);
       }
 
-      getChordset(name) {
+      getChordSet(name) {
         return this.chordSets.find(cs => name === cs.name);
       }
 
@@ -47773,9 +47792,9 @@
         buttonContainer.appendChild(this.showControlsButton);
         this.showControlsButton.innerText = 'none' === this.controlPanel.style.display ? 'Show Controls' : 'Hide Controls';
         this.showControlsButton.addEventListener('click', event => {
-          const trackPanelRows = this.controlPanel.querySelectorAll('div');
+          const panelRows = this.controlPanel.querySelectorAll('div');
 
-          if (trackPanelRows.length > 0) {
+          if (panelRows.length > 0) {
             if ('none' === this.controlPanel.style.display) {
               this.controlPanel.style.display = 'flex';
               event.target.innerText = 'Hide Controls';
@@ -47855,10 +47874,10 @@
         hideShowButton.innerText = true === chordSet.visible ? 'Hide' : 'Show';
         hideShowButton.addEventListener('click', event => {
           if (true === chordSet.visible) {
-            this.hideTrack(chordSet.name);
+            this.hideChordSet(chordSet.name);
             event.target.innerText = "Show";
           } else {
-            this.showTrack(chordSet.name);
+            this.showChordSet(chordSet.name);
             event.target.innerText = "Hide";
           }
         }); // The alpha range slider.  Create this here so we can reference it from the color picker
@@ -47885,7 +47904,7 @@
             rgbaString
           }) => {
             colorPickerButton.style.backgroundColor = setAlpha(rgbaString, 1);
-            this.setTrackColor(chordSet.name, rgbaString);
+            this.setColor(chordSet.name, rgbaString);
             alphaSlider.value = alphaToValue(getAlpha(chordSet.color));
           }
         };
@@ -47903,7 +47922,7 @@
 
         alphaSlider.oninput = () => {
           const v = valueToAlpha(alphaSlider.value);
-          this.setTrackColor(chordSet.name, setAlpha(chordSet.color, v));
+          this.setColor(chordSet.name, setAlpha(chordSet.color, v));
           picker.setColor(chordSet.color);
         };
 
@@ -47922,12 +47941,14 @@
 
 
       setAssembly(igvGenome) {
-        if (this.genomeId === igvGenome.id) {
+        const id = this.genomeId || guid();
+
+        if (this.genomeId === id) {
           return;
         }
 
         this.chordManager.clearChords();
-        this.genomeId = igvGenome.id;
+        this.genomeId = id;
         this.chrNames = new Set(igvGenome.chromosomes.map(chr => shortChrName$1(chr.name)));
         const regions = [];
         const colors = [];
@@ -47946,7 +47967,7 @@
         this.assembly = {
           name: igvGenome.name,
           sequence: {
-            trackId: igvGenome.id,
+            trackId: id,
             type: 'ReferenceSequenceTrack',
             adapter: {
               type: 'FromConfigSequenceAdapter',
@@ -47984,7 +48005,7 @@
 
 
       addChords(newChords, options = {}) {
-        const tmp = options.track || options.name || "*";
+        const tmp = options.name || options.track || "*";
         const trackName = tmp.split(' ')[0].replaceAll("%20", " ");
         const chordSetName = tmp.replaceAll("%20", " ");
         const chordSet = {
@@ -48034,20 +48055,6 @@
       clearSelection() {
         this.viewState.pluginManager.rootModel.session.clearSelection();
       }
-
-      getFeature(featureId) {
-        // TODO -- broken
-        // const display = this.viewState.pluginManager.rootModel.session.view.tracks[0].displays[0]
-        // const feature = display.data.features.get(featureId)
-        // return feature;
-        const features = [...this.viewState.config.tracks[0].adapter.features.value];
-
-        for (let f of features) {
-          if (featureId === f.uniqueId) {
-            return f;
-          }
-        }
-      }
       /**
        * Deprecated, use "visible" property
        */
@@ -48073,25 +48080,25 @@
         this.parent.style.display = isVisible ? 'block' : 'none';
       }
 
-      hideTrack(trackName) {
-        let track = this.getTrack(trackName);
+      hideChordSet(trackName) {
+        let cs = this.getChordSet(trackName);
 
-        if (track) {
-          track.visible = false;
+        if (cs) {
+          cs.visible = false;
           this.render();
         } else {
           console.warn(`No track with name: ${name}`);
         }
       }
 
-      showTrack(trackName) {
-        let track = this.getTrack(trackName);
+      showChordSet(name) {
+        let cs = this.getChordSet(name);
 
-        if (track) {
-          track.visible = true;
+        if (cs) {
+          cs.visible = true;
           this.render();
         } else {
-          console.warn(`No track with name: ${trackName}`);
+          console.warn(`No track with name: ${name}`);
         }
       } // showTrack(trackID) {
       //     let idx = this.tracks.findIndex(t => trackID === t.id)
@@ -48118,12 +48125,12 @@
         this.render();
       }
 
-      getTrack(name) {
-        return this.groupByTrack ? this.chordManager.getTrack(name) : this.chordManager.getChordset(name);
+      getChordSet(name) {
+        return this.groupByTrack ? this.chordManager.getTrack(name) : this.chordManager.getChordSet(name);
       }
 
-      setTrackColor(name, color) {
-        const t = this.getTrack(name);
+      setColor(name, color) {
+        const t = this.getChordSet(name);
 
         if (t) {
           t.color = color;
@@ -48224,7 +48231,7 @@
     }
 
     function embedCSS$1() {
-      const css = '.igv-circview-container {\n  z-index: 2048;\n  position: absolute;\n  width: fit-content;\n  height: fit-content;\n  box-sizing: content-box;\n  color: dimgray;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 12px;\n  background-color: white;\n  border-color: dimgray;\n  border-style: solid;\n  border-width: thin;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n\n.igv-circview-toolbar {\n  position: relative;\n  width: 100%;\n  height: 32px;\n  background-color: lightgrey;\n  border-bottom-style: solid;\n  border-bottom-color: dimgray;\n  border-bottom-width: thin;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.igv-circview-toolbar-button-container {\n  height: 100%;\n  width: fit-content;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-circview-toolbar-button-container > div {\n  margin: 4px;\n}\n\n.igv-circview-track-panel {\n  z-index: 1024;\n  position: absolute;\n  top: 33px;\n  left: 0;\n  width: 100%;\n  height: fit-content;\n  border-bottom-style: solid;\n  border-bottom-color: dimgray;\n  border-bottom-width: thin;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n.igv-circview-track-panel > div {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-circview-track-panel > div > div {\n  margin: 4px;\n}\n\n.igv-circview-swatch-button {\n  cursor: pointer;\n  padding: 5px;\n  width: 8px;\n  height: 8px;\n  border: 1px solid #8d8b8b;\n  border-radius: 16px;\n}\n\n.igv-circview-button {\n  cursor: pointer;\n  padding: 5px;\n  color: #444;\n  vertical-align: middle;\n  text-align: center;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 12px;\n  border: 1px solid #8d8b8b;\n  border-radius: 4px;\n  background: #efefef;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.2);\n}\n\n.igv-circview-button:hover {\n  background: #efefef;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.6);\n}\n\n.igv-circview-button:active {\n  color: #007bff;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.6);\n}\n\n/*# sourceMappingURL=circular-view.css.map */\n';
+      const css = '.igv-circview-container {\n  z-index: 2048;\n  width: fit-content;\n  height: fit-content;\n  box-sizing: content-box;\n  color: dimgray;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 12px;\n  background-color: white;\n  border-color: dimgray;\n  border-style: solid;\n  border-width: thin;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n\n.igv-circview-toolbar {\n  position: relative;\n  width: 100%;\n  height: 32px;\n  background-color: lightgrey;\n  border-bottom-style: solid;\n  border-bottom-color: dimgray;\n  border-bottom-width: thin;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.igv-circview-toolbar-button-container {\n  height: 100%;\n  width: fit-content;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-circview-toolbar-button-container > div {\n  margin: 4px;\n}\n\n.igv-circview-track-panel {\n  z-index: 1024;\n  position: absolute;\n  top: 33px;\n  left: 0;\n  width: 100%;\n  height: fit-content;\n  border-bottom-style: solid;\n  border-bottom-color: dimgray;\n  border-bottom-width: thin;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n.igv-circview-track-panel > div {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-circview-track-panel > div > div {\n  margin: 4px;\n}\n\n.igv-circview-swatch-button {\n  cursor: pointer;\n  padding: 5px;\n  width: 8px;\n  height: 8px;\n  border: 1px solid #8d8b8b;\n  border-radius: 16px;\n}\n\n.igv-circview-button {\n  cursor: pointer;\n  padding: 5px;\n  color: #444;\n  vertical-align: middle;\n  text-align: center;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 12px;\n  border: 1px solid #8d8b8b;\n  border-radius: 4px;\n  background: #efefef;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.2);\n}\n\n.igv-circview-button:hover {\n  background: #efefef;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.6);\n}\n\n.igv-circview-button:active {\n  color: #007bff;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.6);\n}\n\n/*# sourceMappingURL=circular-view.css.map */\n';
       const style = document.createElement('style');
       style.setAttribute('type', 'text/css');
       style.innerHTML = css;
@@ -49859,11 +49866,15 @@
           case "unexpectedPair":
           case "pairOrientation":
             if (this.pairOrientation && alignment.pairOrientation) {
-              var oTypes = orientationTypes[this.pairOrientation];
+              const oTypes = orientationTypes[this.pairOrientation];
 
               if (oTypes) {
-                var pairColor = this.pairColors[oTypes[alignment.pairOrientation]];
-                if (pairColor) color = pairColor;
+                const pairColor = this.pairColors[oTypes[alignment.pairOrientation]];
+
+                if (pairColor) {
+                  color = pairColor;
+                  break;
+                }
               }
             }
 
@@ -52440,7 +52451,7 @@
             });
           }
 
-          findUTRs(exons, feature.cdStart, feature.cdEnd);
+          findUTRs$1(exons, feature.cdStart, feature.cdEnd);
           feature.exons = exons;
         } // Optional extra columns
 
@@ -52545,7 +52556,7 @@
         });
       }
 
-      findUTRs(exons, cdStart, cdEnd);
+      findUTRs$1(exons, cdStart, cdEnd);
       feature.exons = exons;
       return feature;
     }
@@ -52587,7 +52598,7 @@
         });
       }
 
-      findUTRs(exons, cdStart, cdEnd);
+      findUTRs$1(exons, cdStart, cdEnd);
       feature.exons = exons;
       return feature;
     }
@@ -52628,12 +52639,12 @@
         });
       }
 
-      findUTRs(exons, cdStart, cdEnd);
+      findUTRs$1(exons, cdStart, cdEnd);
       feature.exons = exons;
       return feature;
     }
 
-    function findUTRs(exons, cdStart, cdEnd) {
+    function findUTRs$1(exons, cdStart, cdEnd) {
       for (let exon of exons) {
         const end = exon.end;
         const start = exon.start;
@@ -56192,7 +56203,7 @@
         this.genome = genome;
         this.sourceType = config.sourceType === undefined ? "file" : config.sourceType;
         this.maxWGCount = config.maxWGCount || DEFAULT_MAX_WG_COUNT;
-        const queryableFormats = new Set(["bigwig", "bw", "bigbed", "bb", "biginteract", "tdf"]);
+        const queryableFormats = new Set(["bigwig", "bw", "bigbed", "bb", "biginteract", "biggenepred", "bignarrowpeak", "tdf"]);
 
         if (config.features && Array.isArray(config.features)) {
           // Explicit array of features
@@ -56603,10 +56614,8 @@
 
     }
 
-    //table chromatinInteract
-
     function getDecoder(definedFieldCount, fieldCount, autoSql, format) {
-      if (autoSql && 'chromatinInteract' === autoSql.table || "biginteract" === format) {
+      if ("biginteract" === format || autoSql && 'chromatinInteract' === autoSql.table || 'interact' === autoSql.table) {
         return decodeInteract;
       } else {
         const standardFieldCount = definedFieldCount - 3;
@@ -56653,6 +56662,7 @@
               });
             }
 
+            findUTRs(exons, feature.cdStart, feature.cdEnd);
             feature.exons = exons;
           }
 
@@ -56669,7 +56679,29 @@
             }
           }
         };
-      }
+      } //table chromatinInteract
+      // "Chromatin interaction between two regions"
+      //     (
+      //     string chrom;      "Chromosome (or contig, scaffold, etc.). For interchromosomal, use 2 records"
+      //     uint chromStart;   "Start position of lower region. For interchromosomal, set to chromStart of this region"
+      //     uint chromEnd;     "End position of upper region. For interchromosomal, set to chromEnd of this region"
+      //     string name;       "Name of item, for display"
+      //     uint score;        "Score from 0-1000"
+      //     double value;      "Strength of interaction or other data value. Typically basis for score"
+      //     string exp;        "Experiment name (metadata for filtering). Use . if not applicable"
+      //     string color;      "Item color.  Specified as r,g,b or hexadecimal #RRGGBB or html color name, as in //www.w3.org/TR/css3-color/#html4."
+      //     string region1Chrom;  "Chromosome of lower region. For non-directional interchromosomal, chrom of this region."
+      //     uint region1Start;  "Start position of lower/this region"
+      //     uint region1End;    "End position in chromosome of lower/this region"
+      //     string region1Name;  "Identifier of lower/this region"
+      //     string region1Strand; "Orientation of lower/this region: + or -.  Use . if not applicable"
+      //     string region2Chrom; "Chromosome of upper region. For non-directional interchromosomal, chrom of other region"
+      //     uint region2Start;  "Start position in chromosome of upper/this region"
+      //     uint region2End;    "End position in chromosome of upper/this region"
+      //     string region2Name; "Identifier of upper/this region"
+      //     string region2Strand; "Orientation of upper/this region: + or -.  Use . if not applicable"
+      //     )
+
 
       function decodeInteract(feature, tokens) {
         feature.chr1 = tokens[5];
@@ -56686,6 +56718,25 @@
       }
     }
 
+    function findUTRs(exons, cdStart, cdEnd) {
+      for (let exon of exons) {
+        const end = exon.end;
+        const start = exon.start;
+
+        if (end < cdStart || start > cdEnd) {
+          exon.utr = true;
+        } else {
+          if (cdStart >= start && cdStart <= end) {
+            exon.cdStart = cdStart;
+          }
+
+          if (cdEnd >= start && cdEnd <= end) {
+            exon.cdEnd = cdEnd;
+          }
+        }
+      }
+    }
+
     function scoreShade(score, color) {
       const alpha = Math.min(1, 0.11 + 0.89 * (score / 779));
       return alpha.toString();
@@ -58236,11 +58287,12 @@
      * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
      * THE SOFTWARE.
      */
+    const bbFormats = new Set(['bigwig', 'bw', 'bigbed', 'bb', 'biginteract', 'biggenepred', 'bignarrowpeak']);
 
     function FeatureSource(config, genome) {
       const format = config.format ? config.format.toLowerCase() : undefined;
 
-      if ('bigwig' === format || 'bigbed' === format || 'bb' === format || "biginteract" === format) {
+      if (bbFormats.has(format)) {
         return new BWSource(config, genome);
       } else if ("tdf" === format) {
         return new TDFSource(config, genome);
@@ -58489,8 +58541,8 @@
         const xleft = centerX - textBox.width / 2;
         const xright = centerX + textBox.width / 2;
 
-        if (options.labelAllFeatures || xleft > options.rowLastX[feature.row] || gtexSelection) {
-          options.rowLastX[feature.row] = xright;
+        if (options.labelAllFeatures || xleft > options.rowLastLabelX[feature.row] || gtexSelection) {
+          options.rowLastLabelX[feature.row] = xright;
           IGVGraphics.fillText(ctx, name, centerX, labelY, geneFontStyle, transform);
         }
       } finally {
@@ -58830,27 +58882,31 @@
         if (featureList) {
           const rowFeatureCount = [];
           options.rowLastX = [];
+          options.rowLastLabelX = [];
 
           for (let feature of featureList) {
-            const row = feature.row || 0;
+            if (feature.start > bpStart && feature.end < bpEnd) {
+              const row = this.displayMode === "COLLAPSED" ? 0 : feature.row || 0;
 
-            if (rowFeatureCount[row] === undefined) {
-              rowFeatureCount[row] = 1;
-            } else {
-              rowFeatureCount[row]++;
-            }
+              if (rowFeatureCount[row] === undefined) {
+                rowFeatureCount[row] = 1;
+              } else {
+                rowFeatureCount[row]++;
+              }
 
-            options.rowLastX[row] = -Number.MAX_SAFE_INTEGER;
+              options.rowLastX[row] = -Number.MAX_SAFE_INTEGER;
+              options.rowLastLabelX[row] = -Number.MAX_SAFE_INTEGER;
+            }
           }
 
+          const pixelsPerFeature = pixelWidth / Math.max(...rowFeatureCount);
           let lastPxEnd = [];
 
           for (let feature of featureList) {
             if (feature.end < bpStart) continue;
             if (feature.start > bpEnd) break;
             const row = this.displayMode === 'COLLAPSED' ? 0 : feature.row;
-            const featureDensity = pixelWidth / rowFeatureCount[row];
-            options.drawLabel = options.labelAllFeatures || featureDensity > 10;
+            options.drawLabel = options.labelAllFeatures || pixelsPerFeature > 10;
             const pxEnd = Math.ceil((feature.end - bpStart) / bpPerPixel);
             const last = lastPxEnd[row];
 
@@ -67714,6 +67770,8 @@
       }
 
       createCircularView(container, show) {
+        show = show === true; // convert undefined to boolean
+
         this.circularView = createCircularView(container, this);
         this.circularViewControl = new CircularViewControl(this.$toggle_button_container.get(0), this);
         this.circularView.setAssembly({
@@ -67722,6 +67780,7 @@
           chromosomes: makeCircViewChromosomes(this.genome)
         });
         this.circularViewVisible = show;
+        return this.circularView;
       }
 
       get circularViewVisible() {