igv 2.15.7 → 2.15.9

package/README.md

@@ -18,19 +18,19 @@ Below are examples and a quickstart guide.  See the [Wiki](https://github.com/ig
 
 # Examples
  
-***[Alignments](https://igv.org/web/release/2.15.7/examples/cram-vcf.html)***
+***[Alignments](https://igv.org/web/release/2.15.9/examples/cram-vcf.html)***
 
-***[Interactions](https://igv.org/web/release/2.15.7/examples/interact.html)***
+***[Interactions](https://igv.org/web/release/2.15.9/examples/interact.html)***
 
-***[Copy number](https://igv.org/web/release/2.15.7/examples/copyNumber.html)***
+***[Copy number](https://igv.org/web/release/2.15.9/examples/copyNumber.html)***
 
-***[Multiple regions](https://igv.org/web/release/2.15.7/examples/multi-locus.html)***
+***[Multiple regions](https://igv.org/web/release/2.15.9/examples/multi-locus.html)***
 
-***[Mutation Annotation Format (MAF)](https://igv.org/web/release/2.15.7/examples/maf-tcga.html)***
+***[Mutation Annotation Format (MAF)](https://igv.org/web/release/2.15.9/examples/maf-tcga.html)***
 
-***[Variant color options](https://igv.org/web/release/2.15.7/examples/variant-colors.html)***
+***[Variant color options](https://igv.org/web/release/2.15.9/examples/variant-colors.html)***
 
-***[More](https://igv.org/web/release/2.15.7/examples/)***
+***[More](https://igv.org/web/release/2.15.9/examples/)***
 
  
 # Quickstart
@@ -39,18 +39,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 script include, AMD, or CJS module systems (igv.min.js) and an ES6 module (igv.esm.min.js)
-can be downloaded from [https://cdn.jsdelivr.net/npm/igv@2.15.7/dist/](https://cdn.jsdelivr.net/npm/igv@2.15.7/dist/). 
+can be downloaded from [https://cdn.jsdelivr.net/npm/igv@2.15.9/dist/](https://cdn.jsdelivr.net/npm/igv@2.15.9/dist/). 
 
 To import igv as an ES6 module
 
 ```javascript
-import igv from "https://cdn.jsdelivr.net/npm/igv@2.15.7/dist/igv.esm.min.js"
+import igv from "https://cdn.jsdelivr.net/npm/igv@2.15.9/dist/igv.esm.min.js"
 ``` 
 
 Or as a script include (defines the "igv" global)
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/igv@2.15.7/dist/igv.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/igv@2.15.9/dist/igv.min.js"></script>
 ```   
  
 Alternatively you can install with npm  

package/dist/igv.esm.js

@@ -9675,6 +9675,7 @@ const MenuUtils = {
             menuItems.push(unsetColorMenuItem({trackView, label: "Unset track color"}));
            if(trackView.track.config.type === 'wig' || trackView.track.config.type === 'annotation') {
                menuItems.push(colorPickerMenuItem({trackView, label: "Set alt color", option: "altColor"}));
+               menuItems.push(unsetAltColorMenuItem({trackView, label: "Unset alt color"}));
            }
         }
 
@@ -9876,6 +9877,20 @@ function unsetColorMenuItem({trackView, label}) {
     }
 }
 
+function unsetAltColorMenuItem({trackView, label}) {
+
+    const $e = $$1('<div>');
+    $e.text(label);
+
+    return {
+        object: $e,
+        click: () => {
+            trackView.track.altColor = undefined;
+            trackView.repaintViews();
+        }
+    }
+}
+
 function trackRenameMenuItem(trackView) {
 
     const click = e => {
@@ -18659,7 +18674,6 @@ class IGVXhr {
 
         const self = this;
 
-        //console.log(`${Date.now()}   ${url}`)
         url = mapUrl$1(url);
 
         options = options || {};
@@ -18709,7 +18723,10 @@ class IGVXhr {
             }
 
             if (range) {
-                var rangeEnd = range.size ? range.start + range.size - 1 : "";
+                let rangeEnd = "";
+                if (range.size) {
+                    rangeEnd = range.start + range.size - 1;
+                }
                 xhr.setRequestHeader("Range", "bytes=" + range.start + "-" + rangeEnd);
                 //      xhr.setRequestHeader("Cache-Control", "no-cache");    <= This can cause CORS issues, disabled for now
             }
@@ -18735,20 +18752,34 @@ class IGVXhr {
             }
 
             xhr.onload = async function (event) {
-                // when the url points to a local file, the status is 0 but that is not an error
+
+                // when the url points to a local file, the status is 0
                 if (xhr.status === 0 || (xhr.status >= 200 && xhr.status <= 300)) {
-                    if (range && xhr.status !== 206 && range.start !== 0) {
-                        // For small files a range starting at 0 can return the whole file => 200
-                        // Provide just the slice we asked for, throw out the rest quietly
-                        // If file is large warn user
-                        if (xhr.response.length > 100000 && !self.RANGE_WARNING_GIVEN) {
-                            alert(`Warning: Range header ignored for URL: ${url}.  This can have severe performance impacts.`);
+                    if ("HEAD" === options.method) {
+                        // Support fetching specific headers.  Attempting to fetch all headers can be problematic with CORS
+                        const headers = options.requestedHeaders || ['content-length'];
+                        const headerMap = {};
+                        for (let h of headers) {
+                            headerMap[h] = xhr.getResponseHeader(h);
                         }
-                        resolve(xhr.response.slice(range.start, range.start + range.size));
-
+                        resolve(headerMap);
                     } else {
-                        resolve(xhr.response);
+                        // Assume "GET" or "POST"
+                        if (range && xhr.status !== 206 && range.start !== 0) {
+
+                            // For small files a range starting at 0 can return the whole file => 200
+                            // Provide just the slice we asked for, throw out the rest quietly
+                            // If file is large warn user
+                            if (xhr.response.length > 100000 && !self.RANGE_WARNING_GIVEN) {
+                                alert(`Warning: Range header ignored for URL: ${url}.  This can have severe performance impacts.`);
+                            }
+                            resolve(xhr.response.slice(range.start, range.start + range.size));
+                        } else {
+                            resolve(xhr.response);
+                        }
                     }
+                } else if (xhr.status === 416) {
+                    handleError(Error(`416 Unsatisfiable Range`));
                 } else if ((typeof gapi !== "undefined") &&
                     ((xhr.status === 404 || xhr.status === 401 || xhr.status === 403) &&
                         isGoogleURL(url)) &&
@@ -18758,9 +18789,6 @@ class IGVXhr {
                 } else {
                     if (xhr.status === 403) {
                         handleError("Access forbidden: " + url);
-                    } else if (xhr.status === 416) {
-                        //  Tried to read off the end of the file.   This shouldn't happen, but if it does return an
-                        handleError("Unsatisfiable range");
                     } else {
                         handleError(xhr.status);
                     }
@@ -18892,6 +18920,24 @@ class IGVXhr {
             }
         }
     }
+
+    /**
+     * This method should only be called when it is known the server supports HEAD requests.  It is used to recover
+     * from 416 errors from out-of-spec WRT range request servers.  Notably Globus.
+     * * *
+     * @param url
+     * @param options
+     * @returns {Promise<unknown>}
+     */
+    async getContentLength(url, options) {
+        options = options || {};
+        options.method = 'HEAD';
+        options.requestedHeaders = ['content-length'];
+        const headerMap = await this._loadURL(url, options);
+        const contentLengthString = headerMap['content-length'];
+        return contentLengthString ? Number.parseInt(contentLengthString) : 0
+    }
+
 }
 
 function isGoogleStorageSigned(url) {
@@ -21101,6 +21147,10 @@ async function inferFileFormatFromHeader(config) {
 
 }
 
+function registerFileFormats(name, fields) {
+    FileFormats[name] = {fields: fields};
+}
+
 var TrackUtils = /*#__PURE__*/Object.freeze({
     __proto__: null,
     knownFileExtensions: knownFileExtensions,
@@ -21108,7 +21158,8 @@ var TrackUtils = /*#__PURE__*/Object.freeze({
     inferFileFormat: inferFileFormat,
     inferFileFormatFromHeader: inferFileFormatFromHeader,
     inferTrackType: inferTrackType,
-    inferIndexPath: inferIndexPath
+    inferIndexPath: inferIndexPath,
+    registerFileFormats: registerFileFormats
 });
 
 const pairs =
@@ -23938,7 +23989,7 @@ const Cytoband = function (start, end, name, typestain) {
     }
 };
 
-const _version = "2.15.7";
+const _version = "2.15.9";
 function version() {
     return _version
 }
@@ -27077,10 +27128,10 @@ class TrackBase {
 
     static defaults = {
         height: 50,
-        color: 'rgb(0, 0, 150)',
-        altColor: 'rgb(0, 0, 150)',
         autoHeight: false,
-        visibilityWindow: undefined,
+        visibilityWindow: undefined,   // Identifies property that should be copied from config
+        color: undefined,  // Identifies property that should be copied from config
+        altColor: undefined,  // Identifies property that should be copied from config
         supportHiDPI: true
     }
 
@@ -31950,6 +32001,7 @@ class TextFeatureSource {
             this.queryable = true;
         } else if ("htsget" === config.sourceType) {
             this.reader = new HtsgetVariantReader(config, genome);
+            this.queryable = true;
         } else if (config.sourceType === 'ucscservice') {
             this.reader = new UCSCServiceReader(config.source);
             this.queryable = true;
@@ -32165,7 +32217,7 @@ class BufferedReader {
      */
     async dataViewForRange(requestedRange, asUint8, retries = 0) {
         try {
-            console.log(`buffered reader ${requestedRange}`);
+
             const hasData = (this.data && (this.range.start <= requestedRange.start) &&
                 ((this.range.start + this.range.size) >= (requestedRange.start + requestedRange.size)));
 
@@ -40410,6 +40462,9 @@ function renderFusionJuncSpan(feature, bpStart, xScale, pixelHeight, ctx) {
     }
 }
 
+const DEFAULT_COLOR$2 = 'rgb(0, 0, 150)';
+
+
 class FeatureTrack extends TrackBase {
 
     static defaults = {
@@ -40841,8 +40896,11 @@ class FeatureTrack extends TrackBase {
             color = this.colorTable.getColor(value);
         } else if (feature.color) {
             color = feature.color;   // Explicit color for feature
-        } else {
-            color = this.color;   // Track default
+        }
+
+        // If no explicit setting use the default
+        if (!color) {
+            color = DEFAULT_COLOR$2;   // Track default
         }
 
         if (feature.alpha && feature.alpha !== 1) {
@@ -41427,8 +41485,6 @@ class BAMTrack extends TrackBase {
         showAllBases: false,
         showInsertions: true,
         showMismatches: true,
-        color: DEFAULT_ALIGNMENT_COLOR,
-        coverageColor: DEFAULT_COVERAGE_COLOR,
         height: 300,
         coverageTrackHeight: 50
     }
@@ -41448,6 +41504,10 @@ class BAMTrack extends TrackBase {
 
         this.alignmentTrack.setTop(this.coverageTrack, this.showCoverage);
 
+        if(!this.showAlignments) {
+            this._height = this.coverageTrackHeight;
+        }
+
         // The sort object can be an array in the case of multi-locus view, however if multiple sort positions
         // are present for a given reference frame the last one will take precedence
         if (config.sort) {
@@ -41924,15 +41984,6 @@ class BAMTrack extends TrackBase {
         }
         const chords = makePairedAlignmentChords(inView);
         sendChords(chords, this, refFrame, 0.02);
-
-        // const chordSetColor = IGVColor.addAlpha("all" === refFrame.chr ? this.color : getChrColor(refFrame.chr), 0.02)
-        // const trackColor = IGVColor.addAlpha(this.color || 'rgb(0,0,255)', 0.02)
-        //
-        // // name the chord set to include track name and locus
-        // const encodedName = this.name.replaceAll(' ', '%20')
-        // const chordSetName = "all" === refFrame.chr ? encodedName :
-        //     `${encodedName} (${refFrame.chr}:${refFrame.start}-${refFrame.end}`
-        // this.browser.circularView.addChords(chords, {name: chordSetName, color: chordSetColor, trackColor: trackColor})
     }
 
     addSplitChordsForViewport(viewport) {
@@ -41949,15 +42000,6 @@ class BAMTrack extends TrackBase {
 
         const chords = makeSupplementalAlignmentChords(inView);
         sendChords(chords, this, refFrame, 0.02);
-
-        // const chordSetColor = IGVColor.addAlpha("all" === refFrame.chr ? this.color : getChrColor(refFrame.chr), 0.02)
-        // const trackColor = IGVColor.addAlpha(this.color || 'rgb(0,0,255)', 0.02)
-        //
-        // // name the chord set to include track name and locus
-        // const encodedName = this.name.replaceAll(' ', '%20')
-        // const chordSetName = "all" === refFrame.chr ? encodedName :
-        //     `${encodedName} (${refFrame.chr}:${refFrame.start}-${refFrame.end}`
-        // this.browser.circularView.addChords(chords, {name: chordSetName, color: chordSetColor, trackColor: trackColor})
     }
 }
 
@@ -42014,7 +42056,7 @@ class CoverageTrack {
         let color;
         if (this.parent.coverageColor) {
             color = this.parent.coverageColor;
-        } else if (this.parent.color !== undefined && typeof this.parent.color !== "function") {
+        } else if (this.parent.color  && typeof this.parent.color !== "function") {
             color = IGVColor.darkenLighten(this.parent.color, -35);
         } else {
             color = DEFAULT_COVERAGE_COLOR;
@@ -42855,8 +42897,9 @@ class AlignmentTrack {
             case "tag":
                 if (this.parent.color) {
                     return (typeof this.parent.color === "function") ? this.parent.color(alignment) : this.parent.color
+                } else {
+                    return DEFAULT_CONNECTOR_COLOR
                 }
-                return DEFAULT_CONNECTOR_COLOR
             default:
                 return this.getAlignmentColor(alignment)
 
@@ -42868,6 +42911,8 @@ class AlignmentTrack {
         let color = DEFAULT_ALIGNMENT_COLOR;   // The default color if nothing else applies
         if (this.parent.color) {
             color = (typeof this.parent.color === "function") ? this.parent.color(alignment) : this.parent.color;
+        } else {
+            color = DEFAULT_ALIGNMENT_COLOR;
         }
         const option = this.colorBy;
         switch (option) {
@@ -43985,7 +44030,7 @@ class TrackView {
             const {width} = viewport.$viewport.get(0).getBoundingClientRect();
             delta.deltaX += width;
         }
-
+        
         if (true === this.browser.showSampleNames) {
             this.sampleNameViewport.renderSVGContext(context, delta);
         }
@@ -44679,12 +44724,12 @@ function renderSVGAxis(context, track, axisCanvas, deltaX, deltaY) {
  * THE SOFTWARE.
  */
 
+const DEFAULT_COLOR$1 = 'rgb(150, 150, 150)';
+
 class WigTrack extends TrackBase {
 
     static defaults = {
         height: 50,
-        color: 'rgb(150, 150, 150)',
-        altColor: 'rgb(150, 150, 150)',
         flipAxis: false,
         logScale: false,
         windowFunction: 'mean',
@@ -44817,7 +44862,7 @@ class WigTrack extends TrackBase {
         const pixelWidth = options.pixelWidth;
         options.pixelHeight;
         const bpEnd = bpStart + pixelWidth * bpPerPixel + 1;
-        const posColor = this.color || WigTrack.defaults.color;
+        const posColor = this.color || DEFAULT_COLOR$1;
 
         let baselineColor;
         if (typeof posColor === "string" && posColor.startsWith("rgb(")) {
@@ -44961,7 +45006,7 @@ class WigTrack extends TrackBase {
      */
 
     getColorForFeature(f) {
-        let c = (f.value < 0 && this.altColor) ? this.altColor : this.color || WigTrack.defaults.color;
+        let c = (f.value < 0 && this.altColor) ? this.altColor : this.color || DEFAULT_COLOR$1;
         return (typeof c === "function") ? c(f.value) : c
     }
 
@@ -46689,7 +46734,7 @@ function extractInfoColumn(data, str) {
 
 const isString = isString$2;
 
-
+const DEFAULT_COLOR = "rgb(0,0,150)";
 const DEFAULT_VISIBILITY_WINDOW = 1000000;
 const TOP_MARGIN = 10;
 const STANDARD_FIELDS = new Map([["REF", "referenceBases"], ["ALT", "alternateBases"], ["QUAL", "quality"], ["FILTER", "filter"]]);
@@ -46739,6 +46784,7 @@ class VariantTrack extends TrackBase {
             this.colorTables = new Map();
             this.colorTables.set(config.colorBy, new ColorTable(config.colorTable));
         }
+        this._color = config.color;
         this._strokecolor = config.strokecolor;
         this._context_hook = config.context_hook;
 
@@ -46771,7 +46817,7 @@ class VariantTrack extends TrackBase {
     }
 
     get color() {
-        return this._color
+        return this._color || DEFAULT_COLOR
     }
 
     set color(c) {
@@ -59233,6 +59279,23 @@ class ROIManager {
         return regionElement
     }
 
+    renderSVGContext(context, {deltaX, deltaY}) {
+
+        for (const regionElement of document.querySelectorAll('.igv-roi-region')) {
+
+            // body
+            const { x, y, width, height } = regionElement.getBoundingClientRect();
+            context.fillStyle = regionElement.style.backgroundColor;
+            context.fillRect(x+deltaX, y+deltaY, width, height);
+
+            // header
+            const header = regionElement.querySelector('div');
+            const { x:xx, y:yy, width:ww, height:hh } = header.getBoundingClientRect();
+            context.fillStyle = header.style.backgroundColor;
+            context.fillRect(xx+deltaX, yy+deltaY, ww, hh);
+        }
+    }
+
     async getUserDefinedROISet() {
         return this.roiSets.find(roiSet => true === roiSet.isUserDefined)
     }
@@ -60055,9 +60118,13 @@ class Browser {
         const context = new ctx(config);
 
         // tracks -> SVG
+        const delta = {deltaX: 0, deltaY: -y};
         for (let trackView of this.trackViews) {
-            trackView.renderSVGContext(context, {deltaX: 0, deltaY: -y});
+            trackView.renderSVGContext(context, delta);
         }
+
+        this.roiManager.renderSVGContext(context, delta);
+
         // reset height to trim away unneeded svg canvas real estate. Yes, a bit of a hack.
         context.setHeight(height);
 
@@ -62112,7 +62179,8 @@ var index = {
     setOauthToken,
     oauth,
     version,
-    setApiKey
+    setApiKey,
+    registerFileFormats
 };
 
 export { index as default };