igv 3.2.4 → 3.2.6

package/README.md

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

package/dist/igv.esm.js

@@ -8623,6 +8623,7 @@ function getCurrentAccessToken() {
 }
 
 
+let promise;
 /**
  * Return a promise for an access token for the given scope.  If the user hasn't authorized the scope request it
  *
@@ -8641,22 +8642,27 @@ async function getAccessToken(scope) {
         return google.igv.tokenResponse.access_token
     } else {
         const tokenClient = google.igv.tokenClient;
-        return new Promise((resolve, reject) => {
-            try {
-                // Settle this promise in the response callback for requestAccessToken()
-                tokenClient.callback = (tokenResponse) => {
-                    if (tokenResponse.error !== undefined) {
-                        reject(tokenResponse);
-                    }
-                    google.igv.tokenResponse = tokenResponse;
-                    google.igv.tokenExpiresAt = Date.now() + tokenResponse.expires_in * 1000;
-                    resolve(tokenResponse.access_token);
-                };
-                tokenClient.requestAccessToken({scope});
-            } catch (err) {
-                console.log(err);
-            }
-        })
+        if(!promise) {
+            promise = new Promise((resolve, reject) => {
+                try {
+                    // Settle this promise in the response callback for requestAccessToken()
+                    tokenClient.callback = (tokenResponse) => {
+                        if (tokenResponse.error !== undefined) {
+                            reject(tokenResponse);
+                        }
+                        google.igv.tokenResponse = tokenResponse;
+                        google.igv.tokenExpiresAt = Date.now() + tokenResponse.expires_in * 1000;
+                        console.log("Access token expires at " + new Date(google.igv.tokenExpiresAt));
+                        resolve(tokenResponse.access_token);
+                    };
+                    console.log("Requesting access token");
+                    tokenClient.requestAccessToken({scope});
+                } catch (err) {
+                    console.log(err);
+                }
+            });
+        }
+        return promise
     }
 }
 
@@ -10940,7 +10946,7 @@ function createMenuElements$1(itemList, popover) {
     return list;
 }
 
-/*! @license DOMPurify 3.2.4 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.4/LICENSE */
+/*! @license DOMPurify 3.2.5 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.5/LICENSE */
 
 const {
   entries,
@@ -11000,6 +11006,9 @@ const typeErrorCreate = unconstruct(TypeError);
  */
 function unapply(func) {
   return function (thisArg) {
+    if (thisArg instanceof RegExp) {
+      thisArg.lastIndex = 0;
+    }
     for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
       args[_key - 1] = arguments[_key];
     }
@@ -11238,7 +11247,7 @@ const _createHooksMap = function _createHooksMap() {
 function createDOMPurify() {
   let window = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getGlobal();
   const DOMPurify = root => createDOMPurify(root);
-  DOMPurify.version = '3.2.4';
+  DOMPurify.version = '3.2.5';
   DOMPurify.removed = [];
   if (!window || !window.document || window.document.nodeType !== NODE_TYPE.document || !window.Element) {
     // Not running in a browser, provide a factory function
@@ -11843,7 +11852,7 @@ function createDOMPurify() {
       allowedTags: ALLOWED_TAGS
     });
     /* Detect mXSS attempts abusing namespace confusion */
-    if (currentNode.hasChildNodes() && !_isNode(currentNode.firstElementChild) && regExpTest(/<[/\w]/g, currentNode.innerHTML) && regExpTest(/<[/\w]/g, currentNode.textContent)) {
+    if (currentNode.hasChildNodes() && !_isNode(currentNode.firstElementChild) && regExpTest(/<[/\w!]/g, currentNode.innerHTML) && regExpTest(/<[/\w!]/g, currentNode.textContent)) {
       _forceRemove(currentNode);
       return true;
     }
@@ -16337,7 +16346,10 @@ class FeatureParser {
                 }
             } else {
                 // All directives that could change the format, and thus decoder, should have been read by now.
-                this.setDecoder(header.format);
+                // Set the decoder, unless it is explicitly set in the track configuration (not common)
+                if(!this.config.decode) {
+                    this.setDecoder(header.format);
+                }
 
                 // If the line can be parsed as a feature assume we are beyond the header, if any
                 const tokens = line.split(this.delimiter || "\t");
@@ -30846,6 +30858,7 @@ function indentLevel(str) {
 }
 
 const DEFAULT_GENOMES_URL = "https://igv.org/genomes/genomes.json";
+const BACKUP_GENOMES_URL = "https://raw.githubusercontent.com/igvteam/igv-genomes/refs/heads/main/dist/genomes.json";
 
 const GenomeUtils = {
 
@@ -30853,34 +30866,42 @@ const GenomeUtils = {
 
         if (!GenomeUtils.KNOWN_GENOMES) {
 
-            const table = {};
+            let table = {};
+
+            const processJson = (jsonArray, table) => {
+                jsonArray.forEach(function (json) {
+                    table[json.id] = json;
+                });
+                return table
+            };
 
             // Get default genomes
             if (config.loadDefaultGenomes !== false) {
-                const url = DEFAULT_GENOMES_URL;
-                const jsonArray = await igvxhr.loadJson(url, {timeout: 5000});
-                processJson(jsonArray);
+                try {
+                    const jsonArray = await igvxhr.loadJson(DEFAULT_GENOMES_URL, {timeout: 2000});
+                    processJson(jsonArray, table);
+                } catch (error) {
+                    try {
+                        console.error("Error initializing default genomes:", error);
+                        const jsonArray = await igvxhr.loadJson(BACKUP_GENOMES_URL, {timeout: 2000});
+                        processJson(jsonArray, table);
+                    } catch (e) {
+                        console.error("Error initializing backup genomes:", error);
+                    }
+                }
             }
 
-            // Add user-defined genomes
+            // Append user-defined genomes, which might override defaults
             const genomeList = config.genomeList || config.genomes;
             if (genomeList) {
                 if (typeof genomeList === 'string') {
                     const jsonArray = await igvxhr.loadJson(genomeList, {});
-                    processJson(jsonArray);
+                     processJson(jsonArray, table);
                 } else {
-                    processJson(genomeList);
+                     processJson(genomeList, table);
                 }
             }
-
             GenomeUtils.KNOWN_GENOMES = table;
-
-            function processJson(jsonArray) {
-                jsonArray.forEach(function (json) {
-                    table[json.id] = json;
-                });
-                return table
-            }
         }
     },
 
@@ -30906,7 +30927,7 @@ const GenomeUtils = {
         } else if (idOrConfig.genome) {
             genomeID = idOrConfig.genome;
         } else if (idOrConfig.id !== undefined && !(idOrConfig.fastaURL || idOrConfig.twobitURL)) {
-            // Backward compatibilityz
+            // Backward compatibility
             genomeID = idOrConfig.id;
         }
 
@@ -47607,7 +47628,7 @@ class AlignmentTrack extends TrackBase {
         if (!this.colorBy) {
             this.colorBy = this.hasPairs ? "unexpectedPair" : "none";
         }
-        
+
         let pixelTop = options.pixelTop - BAMTrack.coverageTrackHeight;
         if (this.top) {
             ctx.translate(0, this.top);
@@ -48314,7 +48335,12 @@ class AlignmentTrack extends TrackBase {
             this.trackView.repaintViews();
         }
 
-        return {name: undefined, element: createCheckbox(menuItem.label, showCheck), click: clickHandler, init: undefined}
+        return {
+            name: undefined,
+            element: createCheckbox(menuItem.label, showCheck),
+            click: clickHandler,
+            init: undefined
+        }
     }
 
 
@@ -48361,7 +48387,12 @@ class AlignmentTrack extends TrackBase {
             }
         }
 
-        return {name: undefined, element: createCheckbox(menuItem.label, showCheck), dialog: clickHandler, init: undefined}
+        return {
+            name: undefined,
+            element: createCheckbox(menuItem.label, showCheck),
+            dialog: clickHandler,
+            init: undefined
+        }
 
     }
 
@@ -48483,38 +48514,88 @@ class AlignmentTrack extends TrackBase {
                     });
                 }
 
+                list.push('<hr/>');
+                const softClips = clickedAlignment.softClippedBlocks();
                 list.push({
                     label: 'View read sequence',
                     click: () => {
-                        const seqstring = clickedAlignment.seq; //.map(b => String.fromCharCode(b)).join("");
-                        if (!seqstring || "*" === seqstring) {
-                            this.browser.alert.present("Read sequence: *");
-                        } else {
-                            this.browser.alert.present(seqstring);
-                        }
+                        const seqstring = clickedAlignment.seq;
+                        this.browser.alert.present(seqstring && seqstring !== "*" ? seqstring : "Read sequence: *");
                     }
                 });
 
+                if (softClips.left && softClips.left.len > 0) {
+                    list.push({
+                        label: 'View left soft-clipped sequence',
+                        click: () => {
+                            const clippedSequence = clickedAlignment.seq.substring(softClips.left.seqOffset, softClips.left.seqOffset + softClips.left.len);
+                            this.browser.alert.present(clippedSequence);
+                        }
+                    });
+                }
+
+                if (softClips.right && softClips.right.len > 0) {
+                    list.push({
+                        label: 'View right soft-clipped sequence',
+                        click: () => {
+                            const clippedSequence = clickedAlignment.seq.substring(softClips.right.seqOffset, softClips.right.seqOffset + softClips.right.len);
+                            this.browser.alert.present(clippedSequence);
+                        }
+                    });
+                }
+
+                list.push('<hr/>');
+
                 if (isSecureContext()) {
                     list.push({
                         label: 'Copy read sequence',
                         click: async () => {
-                            const seq = clickedAlignment.seq; //.map(b => String.fromCharCode(b)).join("");
                             try {
-                                await navigator.clipboard.writeText(seq);
+                                await navigator.clipboard.writeText(clickedAlignment.seq);
                             } catch (e) {
                                 console.error(e);
                                 this.browser.alert.present(`error copying sequence to clipboard ${e}`);
                             }
-
                         }
                     });
+
+                    if (softClips.left && softClips.left.len > 0) {
+                        list.push({
+                            label: 'Copy left soft-clipped sequence',
+                            click: async () => {
+                                try {
+                                    const clippedSequence = clickedAlignment.seq.substring(softClips.left.seqOffset, softClips.left.seqOffset + softClips.left.len);
+                                    await navigator.clipboard.writeText(clippedSequence);
+                                } catch (e) {
+                                    console.error(e);
+                                    this.browser.alert.present(`error copying sequence to clipboard ${e}`);
+                                }
+                            }
+                        });
+                    }
+
+                    if (softClips.right && softClips.right.len > 0) {
+                        list.push({
+                            label: 'Copy right soft-clipped sequence',
+                            click: async () => {
+                                try {
+                                    const clippedSequence = clickedAlignment.seq.substring(softClips.right.seqOffset, softClips.right.seqOffset + softClips.right.len);
+                                    await navigator.clipboard.writeText(clippedSequence);
+                                } catch (e) {
+                                    console.error(e);
+                                    this.browser.alert.present(`error copying sequence to clipboard ${e}`);
+                                }
+                            }
+                        });
+                    }
                 }
 
-                // TODO if genome supports blat
+                // TODO test if genome supports blat
                 const seqstring = clickedAlignment.seq;
                 if (seqstring && "*" !== seqstring) {
 
+                    list.push('<hr/>');
+
                     if (seqstring.length < maxSequenceSize$1) {
                         list.push({
                             label: 'BLAT read sequence',
@@ -48532,7 +48613,7 @@ class AlignmentTrack extends TrackBase {
                         list.push({
                             label: 'BLAT left soft-clipped sequence',
                             click: () => {
-                                const clippedSequence = seqstring.substr(softClips.left.seqOffset, softClips.left.len);
+                                const clippedSequence = seqstring.substring(softClips.left.seqOffset, softClips.left.seqOffset + softClips.left.len);
                                 const sequence = clickedAlignment.isNegativeStrand() ? reverseComplementSequence(clippedSequence) : clippedSequence;
                                 const name = `${clickedAlignment.readName} - blat left clip`;
                                 const title = `${this.name} - ${name}`;
@@ -48544,7 +48625,7 @@ class AlignmentTrack extends TrackBase {
                         list.push({
                             label: 'BLAT right soft-clipped sequence',
                             click: () => {
-                                const clippedSequence = seqstring.substr(softClips.right.seqOffset, softClips.right.len);
+                                const clippedSequence = seqstring.substring(softClips.right.seqOffset, softClips.right.seqOffset + softClips.right.len);
                                 const sequence = clickedAlignment.isNegativeStrand() ? reverseComplementSequence(clippedSequence) : clippedSequence;
                                 const name = `${clickedAlignment.readName} - blat right clip`;
                                 const title = `${this.name} - ${name}`;
@@ -48593,7 +48674,7 @@ class AlignmentTrack extends TrackBase {
         const offsetY = y - this.top;
         const genomicLocation = clickState.genomicLocation;
 
-        if(features.packedGroups) {
+        if (features.packedGroups) {
             let minGroupY = Number.MAX_VALUE;
             for (let group of features.packedGroups.values()) {
                 minGroupY = Math.min(minGroupY, group.pixelTop);
@@ -68819,6 +68900,115 @@ function prettyPrint(number) {
     }
 }
 
+/**
+ * Configurable properties
+ * Locus {chr, start, end}
+ * url - url to image.   Later url to webservice to fetch image
+ */
+
+class ImageTrack extends TrackBase {
+
+    static defaults = {}
+
+    constructor(config, browser) {
+        super(config, browser);
+    }
+
+    init(config) {
+
+        super.init(config);
+
+        if (!config.images) {
+            throw Error("images are required")
+        }
+
+        this.locus = config.locus;
+        this.type = "image";
+        this.resolutionAware = true;
+    }
+
+
+    async postInit() {
+
+        this._images = [];
+
+        for (let i of this.config.images) {
+            const img = new Image();
+            img.onload = () => {
+                i.img = img;
+                i.bpPerPixel = (i.end - i.start) / img.width;
+                this._images.push(i);
+            };
+            img.onerror = (err) => {
+                console.error(err);
+            };
+            //if (img.complete) {   //cached image
+            //    img.onload()
+           // }
+            img.src = i.src;
+        }
+
+    }
+
+    computePixelHeight(features) {
+        return features ? features.height : 0
+    }
+
+
+    menuItemList() {
+
+        const menuItems = [];
+
+        return menuItems
+    }
+
+
+    async getFeatures(chr, start, end, bpPerPixel) {
+        // Return  image.  Scaled or not?
+        return this.selectImage(chr, start, end, bpPerPixel)
+    }
+
+    selectImage(chr, start, end, bpPerPixel) {
+
+        // Select the highest resolution image containing the interval.  If no image contains the interval return
+        // the lowest resolution image if it overlaps
+        if(this._images.length == 0) {
+            return null
+        }
+        this._images.sort((a, b) => a.bpPerPixel < b.bpPerPixel ? -1 : 1);
+        for(let i of this._images) {
+            if(i.bpPerPixel > bpPerPixel) {
+                return i
+            }
+        }
+        const lowRes = this._images[this._images.length-1];
+        if(lowRes.chr === chr) {
+            return lowRes
+        } else {
+            return null
+        }
+    }
+
+    draw({context, pixelTop, pixelWidth, pixelHeight, features, bpPerPixel, bpStart}) {
+
+        const image = features.img;
+        if (image) {
+            const nw = image.width;
+            const nh = image.height;
+            const imageBpPerPixel = (features.end - features.start) / nw;
+            const scale = imageBpPerPixel / bpPerPixel;
+            const x = (features.start - bpStart) / bpPerPixel;
+            context.drawImage(image, x, 0, scale * nw, nh);
+        }
+
+    }
+
+    get supportsWholeGenome() {
+        return false
+    }
+
+}
+
 //import CNVPytorTrack from "./CNVpytor/cnvpytorTrack.js"
 
 
@@ -68844,7 +69034,8 @@ const trackFunctions =
         ['gcnv', (config, browser) => new GCNVTrack(config, browser)],
         ['junction', (config, browser) => new SpliceJunctionTrack(config, browser)],
         ['blat', (config, browser) => new BlatTrack(config, browser)],
-        ['cnvpytor', (config, browser) => new CNVPytorTrack(config, browser)]
+        ['cnvpytor', (config, browser) => new CNVPytorTrack(config, browser)],
+        ['image', (config, browser) => new ImageTrack(config, browser)]
     ]);
 
 
@@ -69322,7 +69513,7 @@ function createReferenceFrameList(loci, genome, browserFlanking, minimumBases, v
     })
 }
 
-const _version = "3.2.4";
+const _version = "3.2.6";
 function version() {
     return _version
 }
@@ -73865,7 +74056,7 @@ class Browser {
     async loadTrackList(configList) {
 
         // Impose an order if not specified
-        let order = 0;
+        let order = this.trackViews.length + 1;
         for (let c of configList) {
             if (c.order === undefined) {
                 c.order = order++;