igv 2.10.2 → 2.10.3

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.10.2/examples/cram-vcf.html)***
+***[Alignments](https://igv.org/web/release/2.10.3/examples/cram-vcf.html)***
 
-***[Interactions](https://igv.org/web/release/2.10.2/examples/interact.html)***
+***[Interactions](https://igv.org/web/release/2.10.3/examples/interact.html)***
 
-***[Copy number](https://igv.org/web/release/2.10.2/examples/copyNumber.html)***
+***[Copy number](https://igv.org/web/release/2.10.3/examples/copyNumber.html)***
 
-***[Multiple regions](https://igv.org/web/release/2.10.2/examples/multi-locus.html)***
+***[Multiple regions](https://igv.org/web/release/2.10.3/examples/multi-locus.html)***
 
-***[Mutation Annotation Format (MAF)](https://igv.org/web/release/2.10.2/examples/maf-tcga.html)***
+***[Mutation Annotation Format (MAF)](https://igv.org/web/release/2.10.3/examples/maf-tcga.html)***
 
-***[Variant color options](https://igv.org/web/release/2.10.2/examples/variant-colors.html)***
+***[Variant color options](https://igv.org/web/release/2.10.3/examples/variant-colors.html)***
 
-***[More](https://igv.org/web/release/2.10.2/examples/)***
+***[More](https://igv.org/web/release/2.10.3/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.10.2/dist/](https://cdn.jsdelivr.net/npm/igv@2.10.2/dist/). 
+can be downloaded from [https://cdn.jsdelivr.net/npm/igv@2.10.3/dist/](https://cdn.jsdelivr.net/npm/igv@2.10.3/dist/). 
 
 To import igv as an ES6 module
 
 ```javascript
-import igv from "https://cdn.jsdelivr.net/npm/igv@2.10.2/dist/igv.es6.min.js"
+import igv from "https://cdn.jsdelivr.net/npm/igv@2.10.3/dist/igv.es6.min.js"
 ``` 
 
 Or as a script include (defines the "igv" global)
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/igv@2.10.2/dist/igv.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/igv@2.10.3/dist/igv.min.js"></script>
 ```   
  
 Alternatively you can install with npm  

package/dist/igv.esm.js

@@ -8758,11 +8758,11 @@ async function resolveURL(url) {
  * @param urlOrFile
  */
 
-function getFilename$1 (urlOrFile) {
+function getFilename$1(urlOrFile) {
 
-    if (urlOrFile instanceof File) {
+    if (isFile(urlOrFile)) {
         return urlOrFile.name;
-    } else if (isString$3(urlOrFile)){
+    } else if (isString$3(urlOrFile)) {
 
         let index = urlOrFile.lastIndexOf("/");
         let filename = index < 0 ? urlOrFile : urlOrFile.substr(index + 1);
@@ -8778,12 +8778,19 @@ function getFilename$1 (urlOrFile) {
     }
 }
 
-function isFilePath (path) {
-    return (path instanceof File);
+/**
+ * Test if object is a File or File-like object by testing for the "name" property.   This is not a robust test,
+ * but the purpose is to distinguish the object from url strings
+ *
+ * @param object
+ */
+function isFile(object) {
+    return object.hasOwnProperty("name")
 }
 
+const isFilePath = isFile;    // deprecated
 
-function download  (filename, data) {
+function download(filename, data) {
 
     const element = document.createElement('a');
     element.setAttribute('href', data);
@@ -16789,7 +16796,7 @@ const igvxhr = {
         if (!options.responseType) {
             options.responseType = "arraybuffer";
         }
-        if (url instanceof File) {
+        if (isFile(url)) {
             return loadFileSlice(url, options);
         } else {
             return load(url, options);
@@ -16828,7 +16835,7 @@ async function load(url, options) {
     // Resolve functions, promises, and functions that return promises
     url = await (typeof url === 'function' ? url() : url);
 
-    if (url instanceof File) {
+    if (isFile(url)) {
         return loadFileSlice(url, options);
     } else if (typeof url.startsWith === 'function') {   // Test for string
         if (url.startsWith("data:")) {
@@ -18117,7 +18124,8 @@ const MenuUtils = {
             "alignment" === track.type ||
             "annotation" === track.type ||
             "variant" === track.type ||
-            "wig" === track.type);
+            "wig" === track.type) ||
+            'interact' === track.type
     },
 
     createMenuItem(label, action) {
@@ -18611,7 +18619,7 @@ class AlertDialog {
 
 let alertDialog;
 
-const Alert$1 = {
+const Alert = {
 
     init(root) {
         if (!alertDialog) {
@@ -19230,7 +19238,7 @@ class DataRangeDialog {
         const min = parseFloat(this.$minimum_input.val());
         const max = parseFloat(this.$maximum_input.val());
         if (isNaN(min) || isNaN(max)) {
-            Alert$1.presentAlert(new Error('Must input numeric values'), undefined);
+            Alert.presentAlert(new Error('Must input numeric values'), undefined);
         } else {
             trackView.setDataRange(min, max);
         }
@@ -20301,7 +20309,7 @@ class SequenceTrack {
                         const start = viewport.referenceFrame.start;
                         const end = start + bpWindow;
                         const sequence = await this.browser.genome.sequence.getSequence(chr, start, end);
-                        Alert$1.presentAlert(sequence);
+                        Alert.presentAlert(sequence);
                     }
                 },
                 {
@@ -22475,7 +22483,7 @@ const Cytoband = function (start, end, name, typestain) {
     }
 };
 
-const _version = "2.10.2";
+const _version = "2.10.3";
 function version() {
     return _version;
 }
@@ -22608,7 +22616,7 @@ const GenomeUtils = {
             const knownGenomes = GenomeUtils.KNOWN_GENOMES;
             const reference = knownGenomes[genomeID];
             if (!reference) {
-                Alert$1.presentAlert(new Error(`Unknown genome id: ${genomeID}`), undefined);
+                Alert.presentAlert(new Error(`Unknown genome id: ${genomeID}`), undefined);
             }
             return reference;
         } else {
@@ -22960,7 +22968,7 @@ class TrackViewport extends Viewport {
 
     initializationHelper() {
 
-        this.$spinner = $('<div>', { class: 'igv-loading-spinner-container' });
+        this.$spinner = $('<div>', {class: 'igv-loading-spinner-container'});
         this.$viewport.append(this.$spinner);
         this.$spinner.append($('<div>'));
 
@@ -23074,8 +23082,8 @@ class TrackViewport extends Viewport {
         const chrLength = this.browser.genome.getChromosome(chr).bpLength;
         const pixelWidth = this.$content.width();// * 3;
         const bpWidth = pixelWidth * referenceFrame.bpPerPixel;
-        const bpStart = Math.floor(Math.max(0, referenceFrame.start -  bpWidth ));
-        const bpEnd = Math.ceil(Math.min(chrLength, referenceFrame.start + bpWidth +  bpWidth));  // Add one screen width to end
+        const bpStart = Math.floor(Math.max(0, referenceFrame.start - bpWidth));
+        const bpEnd = Math.ceil(Math.min(chrLength, referenceFrame.start + bpWidth + bpWidth));  // Add one screen width to end
 
         if (this.loading && this.loading.start === bpStart && this.loading.end === bpEnd) {
             return undefined;
@@ -23537,8 +23545,8 @@ class TrackViewport extends Viewport {
                 menuItems.push({label: $('<HR>')});
             }
 
-            menuItems.push({ label: 'Save Image (PNG)', click: () => this.saveImage() });
-            menuItems.push({ label: 'Save Image (SVG)', click: () => this.saveSVG() });
+            menuItems.push({label: 'Save Image (PNG)', click: () => this.saveImage()});
+            menuItems.push({label: 'Save Image (SVG)', click: () => this.saveSVG()});
 
             this.browser.menuPopup.presentTrackContextMenu(event, menuItems);
         }
@@ -23555,7 +23563,7 @@ class TrackViewport extends Viewport {
     }
 
     removeViewportMouseDownHandler(viewport) {
-         viewport.removeEventListener('mousedown', this.boundMouseDownHandler);
+        viewport.removeEventListener('mousedown', this.boundMouseDownHandler);
     }
 
     addViewportTouchStartHandler(viewport) {
@@ -23636,9 +23644,9 @@ class TrackViewport extends Viewport {
                         if (1 === this.browser.referenceFrameList.length) {
                             string = chr;
                         } else {
-                            const loci = this.browser.referenceFrameList.map(({ locusSearchString }) => locusSearchString);
+                            const loci = this.browser.referenceFrameList.map(({locusSearchString}) => locusSearchString);
                             const index = this.browser.referenceFrameList.indexOf(this.referenceFrame);
-                            loci[ index ] = chr;
+                            loci[index] = chr;
                             string = loci.join(' ');
                         }
 
@@ -23694,7 +23702,7 @@ class TrackViewport extends Viewport {
 
             event.stopPropagation();
 
-            const { track } = this.trackView;
+            const {track} = this.trackView;
 
             let str;
             if (typeof track.description === 'function') {
@@ -23702,8 +23710,8 @@ class TrackViewport extends Viewport {
             } else if (track.description) {
                 str = `<div>${track.description}</div>`;
             } else {
-                if(track.url) {
-                    if (track.url instanceof File) {
+                if (track.url) {
+                    if (isFile(track.url)) {
                         str = `<div><b>Filename: </b>${track.url.name}`;
                     } else {
                         str = `<div><b>URL: </b>${track.url}`;
@@ -27802,7 +27810,7 @@ class TrackBase {
 
         if (config.name || config.label) {
             this.name = config.name || config.label;
-        } else if (config.url instanceof File) {
+        } else if (isFile(config.url)) {
             this.name = config.url.name;
         } else if (isString$3(config.url) && !config.url.startsWith("data:")) {
             this.name = getFilename$1(config.url);
@@ -27865,7 +27873,7 @@ class TrackBase {
         // function properties are transient as they cannot be saved in json
         const state = {};
         for (let key of Object.keys(this.config)) {
-            if (!key.startsWith("_") && typeof this.config[key] !== "function")  {
+            if (!key.startsWith("_") && typeof this.config[key] !== "function") {
                 state[key] = this.config[key];
             }
         }
@@ -27893,7 +27901,7 @@ class TrackBase {
             if (typeof state[key] === 'function') {
                 throw Error(`Property '${key}' of track '${this.name} is a function. Functions cannot be saved in sessions.`);
             }
-            if (state[key] instanceof File) {
+            if (isFile(state[key])) {
                 const str = `Track ${this.name} is a local file. Sessions cannot be saved with local file references.`;
                 throw Error(str);
             }
@@ -34017,6 +34025,8 @@ function renderFeature(feature, bpStart, xScale, pixelHeight, ctx, options) {
             py = this.margin;
         }
 
+        const pixelWidth = options.pixelWidth;
+
         const cy = py + h / 2;
         const h2 = h / 2;
         const py2 = cy - h2 / 2;
@@ -34028,14 +34038,17 @@ function renderFeature(feature, bpStart, xScale, pixelHeight, ctx, options) {
 
         if (exonCount === 0) {
             // single-exon transcript
-            ctx.fillRect(coord.px, py, coord.pw, h);
+            const xLeft = Math.max(0, coord.px);
+            const xRight = Math.min(pixelWidth, coord.px1);
+            const width = Math.max(coord.pw, xRight - xLeft);
+            ctx.fillRect(xLeft, py, width, h);
 
             // Arrows
             // Do not draw if strand is not +/-
             if (direction !== 0) {
                 ctx.fillStyle = "white";
                 ctx.strokeStyle = "white";
-                for (let x = coord.px + step / 2; x < coord.px1; x += step) {
+                for (let x = xLeft + step / 2; x < xRight; x += step) {
                     // draw arrowheads along central line indicating transcribed orientation
                     IGVGraphics.strokeLine(ctx, x - direction * 2, cy - 2, x, cy);
                     IGVGraphics.strokeLine(ctx, x - direction * 2, cy + 2, x, cy);
@@ -34047,7 +34060,6 @@ function renderFeature(feature, bpStart, xScale, pixelHeight, ctx, options) {
             // multi-exon transcript
             IGVGraphics.strokeLine(ctx, coord.px + 1, cy, coord.px1 - 1, cy); // center line for introns
 
-            const pixelWidth = options.pixelWidth;
 
             const xLeft = Math.max(0, coord.px) + step / 2;
             const xRight = Math.min(pixelWidth, coord.px1);
@@ -35765,7 +35777,7 @@ class MergedTrack extends TrackBase {
 
     set height(h) {
         this._height = h;
-        if(this.tracks) {
+        if (this.tracks) {
             for (let t of this.tracks) {
                 t.height = h;
                 t.config.height = h;
@@ -35851,8 +35863,8 @@ class MergedTrack extends TrackBase {
             const popupData = [];
             for (let i = 0; i < this.tracks.length; i++) {
                 if (i > 0) popupData.push('<hr/>');
-                popupData.push(`<div style=background-color:#f7f8fa;border-bottom-style:dashed;border-bottom-width:1px;margin-bottom:5px;margin-top:5px;font-size:medium><b>${this.tracks[i].name}</b></div>`);
-                const trackPopupData = this.tracks[i].popupData(clickState);
+                popupData.push(`<div style=background-color:rgb(245,245,245);border-bottom-style:dashed;border-bottom-width:1px;padding-bottom:5px;padding-top:10px;font-weight:bold;font-size:larger >${this.tracks[i].name}</div>`);
+                const trackPopupData = this.tracks[i].popupData(clickState, featuresArray[i]);
                 popupData.push(...trackPopupData);
 
             }
@@ -38547,7 +38559,7 @@ class CramReader {
                 if (message && message.indexOf("MD5") >= 0) {
                     message = "Sequence mismatch. Is this the correct genome for the loaded CRAM?";
                 }
-                Alert$1.presentAlert(new Error(message));
+                Alert.presentAlert(new Error(message));
                 throw error
             }
         }
@@ -40507,7 +40519,7 @@ class AlignmentTrack {
                                 this.highlightedAlignmentReadNamed = clickedAlignment.readName;
                                 this.browser.presentMultiLocusPanel(clickedAlignment, referenceFrame);
                             } else {
-                                Alert$1.presentAlert(`Reference does not contain chromosome: ${clickedAlignment.mate.chr}`);
+                                Alert.presentAlert(`Reference does not contain chromosome: ${clickedAlignment.mate.chr}`);
                             }
                         }
                     },
@@ -40523,9 +40535,9 @@ class AlignmentTrack {
 
                     const seqstring = alignment.seq; //.map(b => String.fromCharCode(b)).join("");
                     if (!seqstring || "*" === seqstring) {
-                        Alert$1.presentAlert("Read sequence: *");
+                        Alert.presentAlert("Read sequence: *");
                     } else {
-                        Alert$1.presentAlert(seqstring);
+                        Alert.presentAlert(seqstring);
                     }
                 }
             });
@@ -41544,7 +41556,7 @@ class VariantTrack extends TrackBase {
 
         this.header = await this.getHeader();   // cricital, don't remove'
         if (undefined === this.visibilityWindow && this.config.indexed !== false) {
-            const fn = this.config.url instanceof File ? this.config.url.name : this.config.url;
+            const fn = FileUtils.isFile(this.config.url) ? this.config.url.name : this.config.url;
             if (isString(fn) && fn.toLowerCase().includes("gnomad")) {
                 this.visibilityWindow = 1000;  // these are known to be very dense
             } else if (this.callSets) {
@@ -43666,28 +43678,21 @@ class SpliceJunctionTrack extends TrackBase {
 
         if (featureList) {
 
-            const rowFeatureCount = [];
-            for (let feature of featureList) {
 
-                junctionRenderingContext.referenceFrame = options.viewport.referenceFrame;
-                junctionRenderingContext.referenceFrameStart = junctionRenderingContext.referenceFrame.start;
-                junctionRenderingContext.referenceFrameEnd = junctionRenderingContext.referenceFrameStart + junctionRenderingContext.referenceFrame.toBP($(options.viewport.contentDiv).width());
+            junctionRenderingContext.referenceFrame = options.viewport.referenceFrame;
+            junctionRenderingContext.referenceFrameStart = junctionRenderingContext.referenceFrame.start;
+            junctionRenderingContext.referenceFrameEnd = junctionRenderingContext.referenceFrameStart + junctionRenderingContext.referenceFrame.toBP($(options.viewport.contentDiv).width());
 
-                // For a given viewport, records where features that are < 2px in width have been rendered already.
-                // This prevents wasteful rendering of multiple such features onto the same pixels.
-                junctionRenderingContext.featureZoomOutTracker = {};
+            // For a given viewport, records where features that are < 2px in width have been rendered already.
+            // This prevents wasteful rendering of multiple such features onto the same pixels.
+            junctionRenderingContext.featureZoomOutTracker = {};
 
-
-                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;
-                    this.renderJunction(feature, bpStart, bpPerPixel, pixelHeight, ctx, options);
-                }
+            for (let feature of featureList) {
+                if (feature.end < bpStart) continue;
+                if (feature.start > bpEnd) break;
+                this.renderJunction(feature, bpStart, bpPerPixel, pixelHeight, ctx);
             }
+
         } else {
             console.log("No feature list");
         }
@@ -46226,7 +46231,7 @@ class Browser {
         this.root = div$1({class: 'igv-container'});
         parentDiv.appendChild(this.root);
 
-        Alert$1.init(this.root);
+        Alert.init(this.root);
 
         this.columnContainer = div$1({class: 'igv-column-container'});
         this.root.appendChild(this.columnContainer);
@@ -46885,7 +46890,7 @@ class Browser {
             const newTrack = await this.createTrack(config);
 
             if (undefined === newTrack) {
-                Alert$1.presentAlert(new Error(`Unknown file type: ${config.url || config}`), undefined);
+                Alert.presentAlert(new Error(`Unknown file type: ${config.url || config}`), undefined);
                 return newTrack;
             }
 
@@ -46939,7 +46944,7 @@ class Browser {
                 msg = httpMessages[msg];
             }
             msg += (": " + config.url);
-            Alert$1.presentAlert(new Error(msg), undefined);
+            Alert.presentAlert(new Error(msg), undefined);
         } finally {
             // TODO: If loadTrack() is called individually - not via loadTrackList() - call this.resize()
             if (false === doResize) ; else {
@@ -47455,7 +47460,7 @@ class Browser {
     async doSearch(string, init) {
         const success = await this.search(string, init);
         if (!success) {
-            Alert$1.presentAlert(new Error(`Unrecognized locus: <b> ${string} </b>`));
+            Alert.presentAlert(new Error(`Unrecognized locus: <b> ${string} </b>`));
         }
         return success;
     }
@@ -47509,7 +47514,7 @@ class Browser {
 
     async loadSampleInformation(url) {
         var name = url;
-        if (url instanceof File) {
+        if (isFile(url)) {
             name = url.name;
         }
         var ext = name.substr(name.lastIndexOf('.') + 1);