igv 3.2.5 → 3.3.0

package/dist/igv.esm.js

@@ -10946,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,
@@ -11006,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];
     }
@@ -11244,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
@@ -11849,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;
     }
@@ -12871,6 +12874,20 @@ class NonIndexedFasta {
 
     async loadAll() {
 
+
+        const pushChromosome = (current, order) => {
+            const length = current.length || (current.offset + current.seq.length);
+            if (!chrNameSet.has(current.chr)) {
+                this.sequences.set(current.chr, []);
+                this.chromosomes.set(current.chr, new Chromosome(current.chr, order, length));
+                chrNameSet.add(current.chr);
+            } else {
+                const c = this.chromosomes.get(current.chr);
+                c.bpLength = Math.max(c.bpLength, length);
+            }
+            this.sequences.get(current.chr).push(new SequenceSlice(current.offset, current.seq));
+        };
+
         let data;
         if (isDataURL(this.fastaURL)) {
             let bytes = decodeDataURI$1(this.fastaURL);
@@ -12884,70 +12901,62 @@ class NonIndexedFasta {
 
         const chrNameSet = new Set();
         const lines = splitLines$2(data);
-        const len = lines.length;
-        let lineNo = 0;
         let order = 0;
-        let nextLine;
         let current = {};
-        while (lineNo < len) {
-            nextLine = lines[lineNo++].trim();
+        for (let nextLine of lines) {
             if (nextLine.startsWith("#") || nextLine.length === 0) ; else if (nextLine.startsWith(">")) {
                 // Start the next sequence
-                if (current && current.seq) {
-                    pushChromosome.call(this, current, order++);
+                if (current.seq && current.seq.length > 0) {
+                    pushChromosome(current, order++);
                 }
+                current.seq = "";
 
                 const parts = nextLine.substr(1).split(/\s+/);
 
-                // Check for samtools style locus string.   This is not perfect, and could fail on weird sequence names
-                const nameParts = parts[0].split(':');
-                current.chr = nameParts[0];
-                current.seq = "";
-                current.offset = 0;
-                if (nameParts.length > 1 && nameParts[1].indexOf('-') > 0) {
-                    const locusParts = nameParts[1].split('-');
-                    if (locusParts.length === 2 &&
-                        /^[0-9]+$/.test(locusParts[0]) &&
-                        /^[0-9]+$/.test(locusParts[1])) ;
-                    const from = Number.parseInt(locusParts[0]);
-                    const to = Number.parseInt(locusParts[1]);
-                    if (to > from) {   // TODO this should be an error
+
+                // Check for @len= token, which is a non-standard extension supporting igv-reports.
+                if (nextLine.includes("@len=")) {
+                    const nameParts = parts[0].split(':');
+                    current.chr = nameParts[0];
+                    if (nameParts.length > 1 && nameParts[1].indexOf('-') > 0) {
+
+                        const locusParts = nameParts[1].split('-');
+                        if (locusParts.length === 2 &&
+                            /^[0-9]+$/.test(locusParts[0]) &&
+                            /^[0-9]+$/.test(locusParts[1])) ;
+                        const from = Number.parseInt(locusParts[0]);
+                        Number.parseInt(locusParts[1]);
                         current.offset = from - 1;
-                    }
 
-                    // Check for chromosome length token
-                    if (parts.length > 1 && parts[1].startsWith("@len=")) {
-                        try {
-                            current.length = parseInt(parts[1].trim().substring(5));
-                        } catch (e) {
+                        // Check for chromosome length token
+                        if (parts.length > 1 && parts[1].startsWith("@len=")) {
+                            try {
+                                current.length = parseInt(parts[1].trim().substring(5));
+                            } catch (e) {
+                                current.length = undefined;
+                                console.error(`Error parsing sequence length for ${nextLine}`);
+                            }
+                        } else {
                             current.length = undefined;
-                            console.error(`Error parsing sequence length for ${nextLine}`);
                         }
-                    } else {
-                        current.length = undefined;
                     }
+                } else {
+                    // No special tokens, a standard FASTA header
+                    current.chr = parts[0];
+                    current.offset = 0;
                 }
+
             } else {
+                // Not a header or comment, so it must be sequence data
                 current.seq += nextLine;
             }
-            // add last seq
-            if (current && current.seq) {
-                pushChromosome.call(this, current, order);
-            }
         }
 
-        function pushChromosome(current, order) {
-            const length = current.length || (current.offset + current.seq.length);
-            if (!chrNameSet.has(current.chr)) {
-                this.sequences.set(current.chr, []);
-                this.chromosomes.set(current.chr, new Chromosome(current.chr, order, length));
-                chrNameSet.add(current.chr);
-            } else {
-                const c = this.chromosomes.get(current.chr);
-                c.bpLength = Math.max(c.bpLength, length);
-            }
-            this.sequences.get(current.chr).push(new SequenceSlice(current.offset, current.seq));
+        // Handle the last sequence
+        if (current.seq && current.seq.length > 0) {
+            pushChromosome(current, order);
         }
+
     }
 
     /**
@@ -13712,17 +13721,22 @@ class BPTree {
 
     static magic = 2026540177
     littleEndian = true
+    type = 'BPTree'          // Either BPTree or BPChromTree
     nodeCache = new Map()
 
-    static async loadBpTree(path, config, startOffset) {
-        const bpTree = new BPTree(path, config, startOffset);
+    static async loadBpTree(path, config, startOffset, type, loader) {
+        const bpTree = new BPTree(path, config, startOffset, type, loader);
         return bpTree.init()
     }
 
-    constructor(path, config, startOffset) {
+    constructor(path, config, startOffset, type, loader) {
         this.path = path;
         this.config = config;
         this.startOffset = startOffset;
+        if(type) {
+            this.type = type;
+        }
+        this.loader = loader || igvxhr;
     }
 
     async init() {
@@ -13748,69 +13762,22 @@ class BPTree {
         return this
     }
 
-    async search(term) {
-
+    getItemCount() {
         if(!this.header) {
-            await this.init();
+            throw Error("Header not initialized")
         }
+        return this.header.itemCount
+    }
 
-        const {keySize, valSize} = this.header;
+    async search(term) {
 
-        if (!(valSize === 16 || valSize === 8)) {
-            throw Error(`Unexpected valSize ${valSize}`)
+        if(!this.header) {
+            await this.init();
         }
 
-        const readTreeNode = async (offset) => {
-
-            if (this.nodeCache.has(offset)) {
-                return this.nodeCache.get(offset)
-            } else {
-
-                let binaryParser = await this.#getParserFor(offset, 4);
-                const type = binaryParser.getByte();
-                binaryParser.getByte();
-                const count = binaryParser.getUShort();
-                const items = [];
-
-                if (type === 1) {
-                    // Leaf node
-                    const size = count * (keySize + valSize);
-                    binaryParser = await this.#getParserFor(offset + 4, size);
-                    for (let i = 0; i < count; i++) {
-                        const key = binaryParser.getFixedLengthString(keySize);
-                        const offset = binaryParser.getLong();
-
-                        let value;
-                        if (valSize === 16) {
-                            const length = binaryParser.getInt();
-                            binaryParser.getInt();
-                            value = {offset, length};
-                        } else {
-                            value = {offset};
-                        }
-                        items.push({key, value});
-                    }
-                } else {
-                    // Non leaf node
-                    const size = count * (keySize + 8);
-                    binaryParser = await this.#getParserFor(offset + 4, size);
-
-                    for (let i = 0; i < count; i++) {
-                        const key = binaryParser.getFixedLengthString(keySize);
-                        const offset = binaryParser.getLong();
-                        items.push({key, offset});
-                    }
-                }
-
-                const node = {type, count, items};
-                this.nodeCache.set(offset, node);
-                return node
-            }
-        };
-
         const walkTreeNode = async (offset) => {
 
-            const node = await readTreeNode(offset);
+            const node = await this.readTreeNode(offset);
 
             if (node.type === 1) {
                 // Leaf node
@@ -13841,9 +13808,66 @@ class BPTree {
         return walkTreeNode(this.header.nodeOffset)
     }
 
+    async readTreeNode (offset)  {
+
+        if (this.nodeCache.has(offset)) {
+            return this.nodeCache.get(offset)
+        } else {
+            let binaryParser = await this.#getParserFor(offset, 4);
+            const type = binaryParser.getByte();
+            binaryParser.getByte();
+            const count = binaryParser.getUShort();
+            const items = [];
+
+            const {keySize, valSize} = this.header;
+
+            if (type === 1) {
+                // Leaf node
+                const size = count * (keySize + valSize);
+                binaryParser = await this.#getParserFor(offset + 4, size);
+                for (let i = 0; i < count; i++) {
+                    const key = binaryParser.getFixedLengthString(keySize);
+                    let value;
+                    if(this.type === 'BPChromTree') {
+                        const id = binaryParser.getInt();
+                        const size = binaryParser.getInt();
+                        value = {id, size};
+                    } else {
+                        const offset = binaryParser.getLong();
+                        if (valSize === 16) {
+                            const length = binaryParser.getLong();
+                            value = {offset, length};
+                        } else {
+                            value = {offset};
+                        }
+                    }
+                    items.push({key, value});
+                }
+            } else {
+                // Non leaf node
+                const size = count * (keySize + 8);
+                binaryParser = await this.#getParserFor(offset + 4, size);
+
+                for (let i = 0; i < count; i++) {
+                    const key = binaryParser.getFixedLengthString(keySize);
+                    const offset = binaryParser.getLong();
+                    items.push({key, offset});
+                }
+            }
+
+            const node = {type, count, items};
+            this.nodeCache.set(offset, node);
+            return node
+        }
+    }
+
     async #getParserFor(start, size) {
-        const data = await igvxhr.loadArrayBuffer(this.path, buildOptions(this.config, {range: {start, size}}));
-        return new BinaryParser$1(new DataView(data), this.littleEndian)
+        try {
+            const data = await this.loader.loadArrayBuffer(this.path, buildOptions(this.config, {range: {start, size}}));
+            return new BinaryParser$1(new DataView(data), this.littleEndian)
+        } catch (e) {
+            console.error(e);
+        }
     }
 
 }
@@ -13869,6 +13893,7 @@ class TwobitSequence {
 
     littleEndian
     metaIndex = new Map()
+    chromosomeNames
 
     constructor(config) {
         this.url = config.twoBitURL || config.fastaURL;
@@ -13961,9 +13986,16 @@ class TwobitSequence {
         return sequenceBases
     }
 
+    /**
+     * Read the internal index of the 2bit file.  This is a list of sequence names and their offsets in the file.
+     *
+     * @returns {Promise<Map<any, any>>}
+     * @private
+     */
     async _readIndex() {
 
         const index = new Map();
+        this.chromosomeNames = [];
 
         const loadRange = {start: 0, size: 64};
         let arrayBuffer = await igvxhr.loadArrayBuffer(this.url, {range: loadRange});
@@ -14016,6 +14048,8 @@ class TwobitSequence {
             index.set(name, offset);
 
             estNameLength = Math.floor(estNameLength * (i / (i + 1)) + name.length / (i + 1));
+
+            this.chromosomeNames.push(name);
         }
         return index
     }
@@ -16343,7 +16377,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");
@@ -22158,84 +22195,6 @@ function zoomLevelForScale$1(chr, bpPerPixel, genome) {
     return Math.ceil(Math.log(Math.max(0, (chrSize / (bpPerPixel * 700)))) / log2)
 }
 
-/**
- * A ChromTree parses a UCSC bigbed/bigwig "chromosomeTree" section of the header to produce 2 maps,
- * (1) ID -> chromosome names, and its
- * (2) chromsome name -> ID
- *
- * Both maps are needed by IGV
- *
- * The chromosome tree is a B+ index, but is located continguously in memory in the header section of the file. This
- * makes it feasible to parse the whole tree with data from a single fetch.   In the end the tree is discarded
- * leaving only the mapps.
- */
-class ChromTree {
-
-    constructor(header, nameToID, valueToKey, sumLengths) {
-        this.header = header;
-        this.nameToId = nameToID;
-        this.idToName = valueToKey;
-        this.sumLengths = sumLengths;
-    }
-
-    static parseTree(binaryParser, startOffset, genome = false) {
-        {
-            const magic = binaryParser.getInt();
-            const blockSize = binaryParser.getInt();
-            const keySize = binaryParser.getInt();
-            const valSize = binaryParser.getInt();
-            const itemCount = binaryParser.getLong();
-            const reserved = binaryParser.getLong();
-
-            const header = {magic, blockSize, keySize, valSize, itemCount, reserved};
-            const nameToId = new Map();
-            const idToName = [];
-            let sumLengths = 0;
-            const readTreeNode = (offset) => {
-                if (offset >= 0) binaryParser.position = offset;
-                const type = binaryParser.getByte();
-                binaryParser.getByte();
-                const count = binaryParser.getUShort();
-
-                if (type === 1) {
-                    // Leaf node
-                    for (let i = 0; i < count; i++) {
-                        let key = binaryParser.getFixedLengthString(keySize);
-                        let value;
-                        if (valSize === 8) {
-                            value = binaryParser.getInt();
-                            const chromSize = binaryParser.getInt();
-                            sumLengths += chromSize;
-                            if (genome) key = genome.getChromosomeName(key);  // Translate to canonical chr name
-                            nameToId.set(key, value);
-                            idToName[value] = key;
-
-                        } else {
-                            throw Error(`Unexpected "valSize" value in chromosome tree.  Expected 8, actual value is ${valSize}`)
-                        }
-                    }
-                } else {
-                    // non-leaf
-                    for (let i = 0; i < count; i++) {
-                        binaryParser.getFixedLengthString(keySize);
-                        const childOffset = binaryParser.getLong();
-                        const bufferOffset = childOffset - startOffset;
-                        const currOffset = binaryParser.position;
-                        readTreeNode(bufferOffset);
-                        binaryParser.position = currOffset;
-                    }
-                }
-            };
-
-            // Recursively walk tree to populate dictionary
-            readTreeNode( -1);
-
-            return new ChromTree(header, nameToId, idToName, sumLengths)
-        }
-    }
-
-}
-
 const RPTREE_HEADER_SIZE = 48;
 const RPTREE_NODE_LEAF_ITEM_SIZE = 32;   // leaf item size
 const RPTREE_NODE_CHILD_ITEM_SIZE = 24;  // child item size
@@ -22246,11 +22205,12 @@ class RPTree {
     littleEndian = true
     nodeCache = new Map()
 
-    constructor(path, config, startOffset) {
+    constructor(path, config, startOffset, loader) {
 
         this.path = path;
         this.config = config;
         this.startOffset = startOffset;
+        this.loader = loader || igvxhr;
     }
 
 
@@ -22294,7 +22254,7 @@ class RPTree {
     }
 
     async #getParserFor(start, size) {
-        const data = await igvxhr.loadArrayBuffer(this.path, buildOptions(this.config, {range: {start, size}}));
+        const data = await this.loader.loadArrayBuffer(this.path, buildOptions(this.config, {range: {start, size}}));
         return new BinaryParser$1(new DataView(data), this.littleEndian)
     }
 
@@ -22651,6 +22611,165 @@ class Trix {
     }
 }
 
+class ChromTree {
+
+    nameToId = new Map()
+    idToName = new Map()
+
+    constructor(path, config, startOffset, loader) {
+        this.path = path;
+        this.config = config;
+        this.startOffset = startOffset;
+
+        this.bpTree = new BPTree(path, config, startOffset, 'BPChromTree', loader);
+    }
+
+    async init() {
+        return this.bpTree.init()
+    }
+
+    getItemCount() {
+        return this.bpTree.getItemCount()
+    }
+
+    /**
+     * Return the chromosome ID for the given name. This is the internal chromosome ID for the parent BB file only.
+     * @param {string} chr - The chromosome name.
+     * @returns {number|null} - The chromosome ID or null if not found.
+     */
+    async getIdForName(chr) {
+        if (this.nameToId.has(chr)) {
+            return this.nameToId.get(chr)
+        } else {
+            try {
+                const result = await this.bpTree.search(chr);
+                if (result) {
+                    const id = result.id;
+                    this.nameToId.set(chr, id);
+                    return id
+                } else {
+                    return
+                }
+            } catch (error) {
+                throw new Error(error)
+            }
+        }
+    }
+
+    /**
+     * Return the chromosome name for the given ID. This is a potentially expensive operation as it involves
+     * walking the tree until the leaf item for the given name is found. Currently it is used in only 2
+     * situations:
+     * (1) decoding features from a bigbed search-by-name query
+     * (2) decoding bigwig data from the whole genome view
+     * @param {number} id
+     * @return {string|null}
+     */
+    async getNameForId(id) {
+        if (this.idToName.has(id)) {
+            return this.idToName.get(id)
+        } else {
+            const name = await this.searchForName(id);
+            if (name !== null) {
+                this.idToName.set(id, name);
+                return name
+            }
+        }
+        return null
+    }
+
+    /**
+     * Perform a reverse search by traversing the tree starting at the given offset. This is potentially expensive
+     * as it traverses the tree to find the name corresponding to the given ID.  It shoud not be used for large trees.
+     *
+     * @param {number} id - The ID to search for.
+     * @returns {string|null} - The name corresponding to the ID, or null if not found.
+     */
+    async searchForName(id) {
+
+        const reverseSearch = async (offset, id) => {
+
+            const node = await this.bpTree.readTreeNode(offset);
+
+            let found = null;
+
+            if (node.type === 1) {
+                // Leaf node
+                for (const item of node.items) {
+                    const key = item.key;
+                    const itemId = item.value.id;
+                    if (itemId === id) {
+                        found = key;
+                    }
+                    // Cache the name and ID for future lookups
+                    this.nameToId.set(key, itemId);
+                    this.idToName.set(id, itemId);
+                }
+                return found
+            } else {
+                // Non-leaf node
+                for (const item of node.items) {
+                    found = await reverseSearch.call(this, item.offset, id);
+                    if (found !== null) {
+                        break
+                    }
+                }
+            }
+            return found
+        };
+
+        try {
+            return reverseSearch.call(this, this.startOffset + 32, id)
+        } catch (error) {
+            throw new Error(error)
+        }
+    }
+
+    /**
+     * Return an estimated length of the genome, which might be the actual length if the number of contigs is small.
+     * This is only used for calculating a default feature visibility window.
+     *
+     * @return {number}
+     */
+    async estimateGenomeSize() {
+        try {
+            const runningTotal = {total: 0, count: 0};
+            await this.accumulateSize(this.startOffset + 32, runningTotal, 10000);
+            const itemCount = this.getItemCount();
+            return (itemCount / runningTotal.count) * runningTotal.total
+
+        } catch (error) {
+            console.error("Error estimating genome size", error);
+            return -1
+        }
+    }
+
+    async accumulateSize(offset, runningTotal, maxCount) {
+
+        const node = await this.bpTree.readTreeNode(offset);
+
+        if (node.type === 1) {
+            // Leaf node
+            for (const item of node.items) {
+                const value = item.value;
+                runningTotal.total += value.size;
+                runningTotal.count += 1;
+            }
+        } else {
+            // Non-leaf node.  Items are visited in random order to avoid biasing the estimate
+            const shuffledItems = node.items.slice().sort(() => Math.random() - 0.5);
+            for (const item of shuffledItems) {
+                await this.accumulateSize(item.offset, runningTotal, maxCount);
+                if (runningTotal.count > maxCount) {
+                    break
+                }
+            }
+        }
+        return runningTotal
+    }
+
+}
+
 /*
  * The MIT License (MIT)
  *
@@ -22714,14 +22833,40 @@ class BWReader {
     async preload() {
         const data = await igvxhr.loadArrayBuffer(this.path);
         this.loader = new DataBuffer(data);
+        for (let rpTree of this.rpTreeCache.values()) {
+            rpTree.loader = this.loader;
+        }
+        if (this._searchTrees) {
+            for (let bpTree of this._searchTrees) {
+                bpTree.loader = this.loader;
+            }
+        }
     }
 
-    async readWGFeatures(bpPerPixel, windowFunction) {
+    async readWGFeatures(wgChromosomeNames, bpPerPixel, windowFunction) {
+
         await this.loadHeader();
-        const chrIdx1 = 0;
-        const chrIdx2 = this.chromTree.idToName.length - 1;
-        const chr1 = this.chromTree.idToName[chrIdx1];
-        const chr2 = this.chromTree.idToName[chrIdx2];
+        // Convert the logic to JavaScript
+        let minID = Number.MAX_SAFE_INTEGER;
+        let maxID = -1;
+        let chr1;
+        let chr2;
+
+        for (const chr of wgChromosomeNames) {
+            const id = await this.getIdForChr(chr);
+            if (id === null || id === undefined) {
+                continue
+            }
+            if (id < minID) {
+                minID = id;
+                chr1 = chr;
+            }
+            if (id > maxID) {
+                maxID = id;
+                chr2 = chr;
+            }
+        }
+
         return this.readFeatures(chr1, 0, chr2, Number.MAX_VALUE, bpPerPixel, windowFunction)
     }
 
@@ -22732,8 +22877,8 @@ class BWReader {
 
         await this.loadHeader();
 
-        let chrIdx1 = await this.#getIdForChr(chr1);
-        let chrIdx2 = await this.#getIdForChr(chr2);
+        const chrIdx1 = await this.getIdForChr(chr1);
+        const chrIdx2 = await this.getIdForChr(chr2);
 
         if (chrIdx1 === undefined || chrIdx2 === undefined) {
             return []
@@ -22792,7 +22937,7 @@ class BWReader {
                 } else {
                     plain = uint8Array;
                 }
-                decodeFunction.call(this, new DataView(plain.buffer), chrIdx1, bpStart, chrIdx2, bpEnd, features, this.chromTree.idToName, windowFunction, this.littleEndian);
+                await decodeFunction.call(this, new DataView(plain.buffer), chrIdx1, bpStart, chrIdx2, bpEnd, features, windowFunction);
             }
 
             features.sort(function (a, b) {
@@ -22809,29 +22954,30 @@ class BWReader {
      * @param chr
      * @returns {Promise<*>}
      */
-    async #getIdForChr(chr) {
+    async getIdForChr(chr) {
 
         if (this.chrAliasTable.has(chr)) {
             chr = this.chrAliasTable.get(chr);
-            if (chr === undefined) {
+            if (!chr) {
                 return undefined
             }
         }
 
-        let chrIdx = this.chromTree.nameToId.get(chr);
+        let chrIdx = await this.chromTree.getIdForName(chr);
 
         // Try alias
         if (chrIdx === undefined && this.genome) {
             const aliasRecord = await this.genome.getAliasRecord(chr);
             let alias;
             if (aliasRecord) {
-                const aliases = Object.keys(aliasRecord)
-                    .filter(k => k !== "start" && k !== "end")
-                    .map(k => aliasRecord[k])
-                    .filter(a => this.chromTree.nameToId.has(a));
-                if (aliases.length > 0) {
-                    alias = aliases[0];
-                    chrIdx = this.chromTree.nameToId.get(aliases[0]);
+                for (let k of Object.keys(aliasRecord)) {
+                    if (k === "start" || k === "end") continue
+                    alias = aliasRecord[k];
+                    if (alias === chr) continue   // Already tried this
+                    chrIdx = await this.chromTree.getIdForName(alias);
+                    if (chrIdx !== undefined) {
+                        break
+                    }
                 }
             }
             this.chrAliasTable.set(chr, alias);  // alias may be undefined => no alias exists. Setting prevents repeated attempts
@@ -22918,7 +23064,8 @@ class BWReader {
             this.header.extraIndexOffsets.length > 0) {
             this._searchTrees = [];
             for (let offset of this.header.extraIndexOffsets) {
-                const bpTree = await BPTree.loadBpTree(this.path, this.config, offset);
+                const type = undefined;
+                const bpTree = await BPTree.loadBpTree(this.path, this.config, offset, type, this.loader);
                 this._searchTrees.push(bpTree);
             }
         }
@@ -23035,15 +23182,13 @@ class BWReader {
                 this.totalSummary = new BWTotalSummary(extHeaderParser);
             }
 
-            // Chrom data index.  The start is known, size is not, but we can estimate it
-            const bufferSize = Math.min(200000, Math.max(10000, header.fullDataOffset - header.chromTreeOffset));
-            this.chromTree = await this.#readChromTree(header.chromTreeOffset, bufferSize);
-            this.chrNames = new Set(this.chromTree.idToName);
+            this.chromTree = new ChromTree(this.path, this.config, header.chromTreeOffset, this.loader);
+            await this.chromTree.init();
 
             // Estimate feature density from dataCount (bigbed only)
-            if("bigbed" === this.type) {
+            if ("bigbed" === this.type) {
                 const dataCount = await this.#readDataCount(header.fullDataOffset);
-                this.featureDensity = dataCount / this.chromTree.sumLengths;
+                this.featureDensity = dataCount / await this.chromTree.estimateGenomeSize();
             }
 
             this.header = header;
@@ -23067,38 +23212,6 @@ class BWReader {
         return binaryParser.getInt()
     }
 
-    /**
-     * Used when the chromTreeOffset is > fullDataOffset, that is when the chrom tree is not in the initial chunk
-     * read for parsing the header.  We know the start position, but not the total size of the chrom tree
-     *
-     * @returns {Promise<void>}
-     */
-    async #readChromTree(chromTreeOffset, bufferSize) {
-
-        let size = bufferSize;
-        const load = async () => {
-            const data = await this.loader.loadArrayBuffer(this.path, buildOptions(this.config, {
-                range: {
-                    start: chromTreeOffset,
-                    size: size
-                }
-            }));
-            const binaryParser = new BinaryParser$1(new DataView(data), this.littleEndian);
-            return ChromTree.parseTree(binaryParser, chromTreeOffset, this.genome)
-        };
-
-        let error;
-        while (size < 1000000) {
-            try {
-                const chromTree = await load();
-                return chromTree
-            } catch (e) {
-                error = e;
-                size *= 2;
-            }
-        }
-        throw (error)
-    }
 
     async loadExtendedHeader(offset) {
 
@@ -23154,7 +23267,7 @@ class BWReader {
         if (rpTree) {
             return rpTree
         } else {
-            rpTree = new RPTree(this.path, this.config, offset);
+            rpTree = new RPTree(this.path, this.config, offset, this.loader);
             await rpTree.init();
             this.rpTreeCache.set(offset, rpTree);
             return rpTree
@@ -23194,9 +23307,7 @@ class BWReader {
         const plain = (this.header.uncompressBuffSize > 0) ? inflate_1$3(uint8Array) : uint8Array;
         const decodeFunction = getBedDataDecoder.call(this);
         const features = [];
-        decodeFunction.call(this, new DataView(plain.buffer), 0, 0, Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER,
-            features, this.chromTree.idToName);
-
+        await decodeFunction.call(this, new DataView(plain.buffer), 0, 0, Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER, features);
         return features
 
     }
@@ -23264,7 +23375,7 @@ function zoomLevelForScale(bpPerPixel, zoomLevelHeaders) {
 }
 
 
-function decodeWigData(data, chrIdx1, bpStart, chrIdx2, bpEnd, featureArray, chrDict, windowFunction, littleEndian) {
+async function decodeWigData(data, chrIdx1, bpStart, chrIdx2, bpEnd, featureArray, windowFunction, littleEndian) {
 
     const binaryParser = new BinaryParser$1(data, littleEndian);
     const chromId = binaryParser.getInt();
@@ -23305,7 +23416,7 @@ function decodeWigData(data, chrIdx1, bpStart, chrIdx2, bpEnd, featureArray, chr
             else if (chromId > chrIdx2 || (chromId === chrIdx2 && chromStart >= bpEnd)) break
 
             if (Number.isFinite(value)) {
-                const chr = chrDict[chromId];
+                const chr = await this.chromTree.getNameForId(chromId);
                 featureArray.push({chr: chr, start: chromStart, end: chromEnd, value: value});
             }
         }
@@ -23316,12 +23427,13 @@ function getBedDataDecoder() {
 
     const minSize = 3 * 4 + 1;   // Minimum # of bytes required for a bed record
     const decoder = getDecoder(this.header.definedFieldCount, this.header.fieldCount, this.autoSql, this.format);
-    return function (data, chrIdx1, bpStart, chrIdx2, bpEnd, featureArray, chrDict, windowFunction, littleEndian) {
-        const binaryParser = new BinaryParser$1(data, littleEndian);
+    return async function (data, chrIdx1, bpStart, chrIdx2, bpEnd, featureArray) {
+
+        const binaryParser = new BinaryParser$1(data, this.littleEndian);
         while (binaryParser.remLength() >= minSize) {
 
             const chromId = binaryParser.getInt();
-            const chr = chrDict[chromId];
+            const chr = await this.chromTree.getNameForId(chromId);
             const chromStart = binaryParser.getInt();
             const chromEnd = binaryParser.getInt();
             const rest = binaryParser.getString();
@@ -23338,8 +23450,7 @@ function getBedDataDecoder() {
     }
 }
 
-
-function decodeZoomData(data, chrIdx1, bpStart, chrIdx2, bpEnd, featureArray, chrDict, windowFunction, littleEndian) {
+async function decodeZoomData(data, chrIdx1, bpStart, chrIdx2, bpEnd, featureArray, windowFunction, littleEndian) {
 
     const binaryParser = new BinaryParser$1(data, littleEndian);
     const minSize = 8 * 4;  // Minimum # of bytes required for a zoom record
@@ -23371,7 +23482,7 @@ function decodeZoomData(data, chrIdx1, bpStart, chrIdx2, bpEnd, featureArray, ch
 
 
         if (Number.isFinite(value)) {
-            const chr = chrDict[chromId];
+            const chr = await this.chromTree.getNameForId(chromId);
             featureArray.push({chr: chr, start: chromStart, end: chromEnd, value: value});
 
 
@@ -23456,7 +23567,8 @@ class BWSource extends BaseFeatureSource {
 
         let features;
         if ("all" === chr.toLowerCase()) {
-            features = isBigWig ? await this.getWGValues(windowFunction, bpPerPixel) : [];
+            const wgChromosomeNames = this.genome.wgChromosomeNames;
+            features = isBigWig && wgChromosomeNames? await this.getWGValues(wgChromosomeNames, windowFunction, bpPerPixel) : [];
         } else {
             features = await this.reader.readFeatures(chr, start, chr, end, bpPerPixel, windowFunction);
         }
@@ -23480,15 +23592,14 @@ class BWSource extends BaseFeatureSource {
 
     }
 
-    async getWGValues(windowFunction, bpPerPixel) {
+    async getWGValues(wgChromosomeNames, windowFunction, bpPerPixel) {
 
         const genome = this.genome;
         const cached = this.#wgValues[windowFunction];
         if (cached && cached.bpPerPixel > 0.8 * bpPerPixel && cached.bpPerPixel < 1.2 * bpPerPixel) {
             return cached.values
         } else {
-
-            const features = await this.reader.readWGFeatures(bpPerPixel, windowFunction);
+            const features = await this.reader.readWGFeatures(wgChromosomeNames, bpPerPixel, windowFunction);
             let wgValues = [];
             for (let f of features) {
                 const chr = f.chr;
@@ -28283,7 +28394,7 @@ async function createBlatTrack({sequence, browser, name, title}) {
             features
         };
 
-        const track = await browser.loadTrack(trackConfig);
+        const track = (await browser.loadTrackList([trackConfig]))[0];
         track.openTableView();
 
     } catch (e) {
@@ -30335,109 +30446,578 @@ function convertToHubURL(accension) {
     }
 }
 
-/*
- https://genomewiki.ucsc.edu/index.php/Assembly_Hubs
- https://genome.ucsc.edu/goldenpath/help/hgTrackHubHelp.html
- https://genome.ucsc.edu/goldenPath/help/hgTrackHubHelp
- https://genome.ucsc.edu/goldenpath/help/trackDb/trackDbHub.html
- */
+const parentOverrideProperties = new Set(["visibility", "priority", "group"]);
 
+const nonInheritableProperties = new Set([
+    "track", "type", "shortLabel", "longLabel", "bigDataUrl",
+    "parent", "superTrack", "priority", "view", "compositeContainer", "compositeTrack"
+]);
 
-class Hub {
 
-    static supportedTypes = new Set(["bigBed", "bigWig", "bigGenePred", "vcfTabix"])
-    static filterTracks = new Set(["cytoBandIdeo", "assembly", "gap", "gapOverlap", "allGaps",
-        "cpgIslandExtUnmasked", "windowMasker"])
+class Stanza {
+
+    properties = new Map()
+
+    constructor(type, name) {
+        this.type = type;
+        this.name = name;
+    }
+
+    setProperty(key, value) {
+        this.properties.set(key, value);
+    }
+
+    getProperty(key) {
+        if (this.properties.has("noInherit")) {
+            return this.properties.get(key)
+        } else if (this.parent && parentOverrideProperties.has(key) && this.parent.hasProperty(key)) {
+            return this.parent.getProperty(key)
+        } else if (this.properties.has(key)) {
+            return this.properties.get(key)
+        } else if (this.parent && !nonInheritableProperties.has(key)) {
+            return this.parent.getProperty(key)
+        } else {
+            return undefined
+        }
+    }
+
+    hasProperty(key) {
+        return this.getProperty(key) !== null && this.getProperty(key) !== undefined
+    }
+
+    hasOwnProperty(key) {
+        return this.properties.has(key)
+    }
+
+    getOwnProperty(key) {
+        return this.properties.get(key)
+    }
+
+    removeProperty(key) {
+        this.properties.delete(key);
+    }
+
+    get format() {
+        const type = this.getProperty("type");
+        if (type) {
+            // Trim extra bed qualifiers (e.g. bigBed + 4)
+            return firstWord$1(type)
+        }
+        return undefined // unknown type
+    }
+
+    /**
+     * IGV display mode
+     */
+    get displayMode() {
+        let viz = this.getProperty("visibility");
+        if (!viz) {
+            return "COLLAPSED"
+        } else {
+            viz = viz.toLowerCase();
+            switch (viz) {
+                case "dense":
+                    return "COLLAPSED"
+                case "pack":
+                    return "EXPANDED"
+                case "squish":
+                    return "SQUISHED"
+                default:
+                    return "COLLAPSED"
+            }
+        }
+    }
+}
+
+
+function firstWord$1(str) {
+    const idx = str.indexOf(' ');
+    return idx > 0 ? str.substring(0, idx) : str
+}
+
+class TrackConfigContainer {
+        constructor(name, label, priority, defaultOpen) {
+            this.name = name;
+            this.priority = priority;
+            this.label = label;
+            this.defaultOpen = defaultOpen;
+            this.tracks = [];
+            this.children = [];
+        }
+
+        isEmpty() {
+            return this.tracks.length === 0 &&
+                (!this.children || this.children.length === 0 || this.children.every(child => child.isEmpty()));
+        }
+
+        map(callback) {
+            this.tracks.forEach(callback);
+            this.children.forEach(child => child.map(callback));
+        }
+
+        findTracks(filter) {
+            const found = [];
+            this._find(found, filter);
+            return found;
+        }
+
+        _find(found, filter) {
+            this.tracks.forEach(track => {
+                if (filter(track)) {
+                    found.push(track);
+                }
+            });
+            this.children.forEach(child => child._find(found, filter));
+        }
+
+        countTracks() {
+            return this.tracks.length + this.children.reduce((count, child) => count + child.countTracks(), 0);
+        }
+
+        countSelectedTracks() {
+            const selectedCount = this.tracks.filter(track => track.visible).length;
+            return selectedCount + this.children.reduce((count, child) => count + child.countSelectedTracks(), 0);
+        }
+
+        trim() {
+            this.children = this.children.filter(child => !child.isEmpty());
+            this.children.forEach(child => child.trim());
+        }
+
+        setTrackVisibility(loadedTrackPaths) {
+            this.tracks.forEach(track => {
+                track.visible = loadedTrackPaths.has(track.url);
+            });
+            this.children.forEach(child => child.setTrackVisibility(loadedTrackPaths));
+        }
+    }
+
+const supportedTypes = new Set([
+    "bigbed", "bigwig", "biggenepred", "vcftabix", "refgene",
+    "bam", "sampleinfo", "vcf.list", "ucscsnp", "bed", "tdf", "gff", "gff3", "gtf", "vcf", "vcfphasedtrio",
+    "bigdbsnp", "rmask", "genepred", "wig", "bedgraph", "interact", "broadpeak", "narrowpeak", "gappedpeak",
+    "gistic", "seg", "mut, bigrmsk"
+]);
+
+const filterTracks = new Set(["cytoBandIdeo", "assembly", "gap", "gapOverlap", "allGaps",
+    "cpgIslandExtUnmasked", "windowMasker"]);
+
+class TrackDbHub {
+
+    constructor(trackStanzas, groupStanzas) {
+        this.groupStanzas = groupStanzas;
+        this.trackStanzas = trackStanzas;
+    }
+
+    findCytobandURL() {
+        for (const t of this.trackStanzas) {
+            if (t.name === "cytoBandIdeo" && t.hasProperty("bigDataUrl")) {
+                return t.getProperty("bigDataUrl")
+            }
+        }
+    }
+
+    getSupportedTrackCount() {
+        let count = 0;
+        for (const t of this.trackStanzas) {
+            if (!filterTracks.has(t.name) &&
+                t.hasProperty("bigDataUrl") &&
+                t.format &&
+                supportedTypes.has(t.format.toLowerCase())) {
+                count++;
+            }
+        }
+        return count
+    }
 
-    static async loadHub(url) {
+    getGroupedTrackConfigurations() {
 
-        const idx = url.lastIndexOf("/");
-        const baseURL = url.substring(0, idx + 1);
-        const stanzas = await loadStanzas(url);
-        let groups;
-        if ("genome" === stanzas[1].type) {
-            const genome = stanzas[1];
-            if (genome.hasProperty("groups")) {
-                const groupsTxtURL = baseURL + genome.getProperty("groups");
-                groups = await loadStanzas(groupsTxtURL);
+        if (!this.groupTrackConfigs) {
+            this.groupTrackConfigs = [];
+            const trackContainers = new Map();
+
+            // create a container for tracks with no parent
+            const nullContainer = new TrackConfigContainer('', '', 0, true);
+            this.groupTrackConfigs.push(nullContainer);
+
+            const hasGroups = this.groupStanzas && this.groupStanzas.length > 0;
+            if (hasGroups) {
+                for (const groupStanza of this.groupStanzas) {
+                    const name = groupStanza.getProperty("name");
+                    const defaultOpen = groupStanza.getProperty("defaultIsClosed") === "0";
+                    const priority = groupStanza.hasProperty("priority") ? getPriority(groupStanza.getProperty("priority")) : Number.MAX_SAFE_INTEGER - 1;
+                    const container = new TrackConfigContainer(name, groupStanza.getProperty("label"), priority, defaultOpen);
+                    trackContainers.set(name, container);
+                    this.groupTrackConfigs.push(container);
+                }
             }
 
-            // If the genome has a chromSizes file, and it is not too large, set the chromSizesURL property.  This will
-            // enable whole genome view and the chromosome pulldown
-            if (genome.hasProperty("chromSizes")) {
-                const chromSizesURL = baseURL + genome.getProperty("chromSizes");
-                const l = await getContentLength(chromSizesURL);
-                if (l !== null && Number.parseInt(l) < 1000000) {
-                    genome.setProperty("chromSizesURL", chromSizesURL);
+            for (let s of this.trackStanzas) {
+
+                const isContainer = (s.hasOwnProperty("superTrack") && !s.hasOwnProperty("bigDataUrl")) ||
+                    s.hasOwnProperty("compositeTrack") || s.hasOwnProperty("view") ||
+                    (s.hasOwnProperty("container") && s.getOwnProperty("container").equals("multiWig"));
+
+                // Find parent, if any. "group" containers can be implicit, all other types should be explicitly
+                // defined before their children
+                let parent;
+
+                if (s.hasOwnProperty("parent")) {
+                    parent = trackContainers.get(s.getOwnProperty("parent"));
+                }
+
+                if (!parent && hasGroups && s.hasProperty("group")) {
+                    const groupName = s.getProperty("group");
+                    if (trackContainers.has(groupName)) {
+                        parent = trackContainers.get(groupName);
+                    } else {
+                        const container = new TrackConfigContainer(groupName, groupName, 1000, true);
+                        trackContainers.set(groupName, container);
+                        this.groupTrackConfigs.push(container);
+                        parent = container;
+                    }
+                }
+
+                if (isContainer) {
+
+                    const name = s.getProperty("track");
+                    const priority = s.hasProperty("priority") ? getPriority(s.getProperty("priority")) : Number.MAX_SAFE_INTEGER - 1;
+                    const defaultOpen = s.getProperty("defaultIsClosed") === "0";
+                    const longLabel = s.getOwnProperty("longLabel");
+                    const label = longLabel && longLabel.length < 50 ? longLabel : s.getOwnProperty("shortLabel");
+                    const container = new TrackConfigContainer(name, label, priority, defaultOpen);
+
+                    if (trackContainers.has(name)) {
+                        throw new Error(`Duplicate track container: ${name}`)
+                    }
+                    trackContainers.set(name, container);
+
+                    if (parent) {
+                        parent.children.push(container);
+                    } else {
+                        // No parent or a superTrack => promote to top level
+                        this.groupTrackConfigs.push(container);
+                    }
+                } else if (!filterTracks.has(s.name) &&
+                    s.hasProperty("bigDataUrl") &&
+                    s.format &&
+                    supportedTypes.has(s.format.toLowerCase())) {
+
+                    const trackConfig = this.#getTrackConfig(s);
+                    if (parent) {
+                        parent.tracks.push(trackConfig);
+                    } else {
+                        nullContainer.tracks.push(trackConfig);
+                    }
                 }
             }
+
         }
 
-        // TODO -- categorize extra "user" supplied and other tracks in some distinctive way before including them
-        // load includes.  Nested includes are not supported
-        // for (let s of stanzas.slice()) {
-        //     if ("include" === s.type) {
-        //         const includeStanzas = await loadStanzas(baseURL + s.getProperty("include"))
-        //         for (s of includeStanzas) {
-        //             s.setProperty("visibility", "hide")
-        //             stanzas.push(s)
-        //         }
-        //     }
-        // }
+        // Filter empty groups and sort
+        this.groupTrackConfigs.forEach(c => c.trim());
+        this.groupTrackConfigs = this.groupTrackConfigs.filter(t => !t.isEmpty());
 
-        return new Hub(url, stanzas, groups)
+        this.groupTrackConfigs.sort((a, b) => a.priority - b.priority);
+        return this.groupTrackConfigs
     }
 
-    constructor(url, stanzas, groupStanzas) {
+    /**
+     * Return an array of igv track config objects that satisfy the filter
+     */
+    #getTracksConfigs(filter) {
+        return this.trackStanzas.filter(t => {
+            return supportedTypes.has(t.format) && t.hasProperty("bigDataUrl") && (!filter || filter(t))
+        })
+            .map(t => this.#getTrackConfig(t))
+    }
 
-        this.url = url;
 
-        const idx = url.lastIndexOf("/");
-        this.baseURL = url.substring(0, idx + 1);
+    /** example
+     * track gc5Base
+     * shortLabel GC Percent
+     * longLabel GC Percent in 5-Base Windows
+     * group map
+     * visibility full
+     * autoScale Off
+     * maxHeightPixels 128:36:16
+     * graphTypeDefault Bar
+     * gridDefault OFF
+     * windowingFunction Mean
+     * color 0,0,0
+     * altColor 128,128,128
+     * viewLimits 30:70
+     * type bigWig 0 100
+     * bigDataUrl bbi/GCA_011100615.1_Macaca_fascicularis_6.0.gc5Base.bw
+     * html html/GCA_011100615.1_Macaca_fascicularis_6.0.gc5Base
+     * @param t
+     */
+    #getTrackConfig(t) {
+
+        const format = t.format;
 
-        // The first stanza must be type = hub
-        if ("hub" === stanzas[0].type) {
-            this.hubStanza = stanzas[0];
-        } else {
-            throw Error("Unexpected hub.txt file -- does the first line start with 'hub'?")
+        const config = {
+            "id": t.getProperty("track"),
+            "name": t.getProperty("shortLabel"),
+            "format": format,
+            "url": t.getProperty("bigDataUrl"),
+            "displayMode": t.displayMode,
+        };
+
+        if ("vcfTabix" === format) {
+            config.indexURL = config.url + ".tbi";
         }
-        if ("on" !== this.hubStanza.getProperty("useOneFile")) {
-            throw Error("Only 'useOneFile' hubs are currently supported")
+
+        if (t.hasProperty("longLabel") && t.hasProperty("html")) {
+            if (config.description) config.description += "<br/>";
+            config.description =
+                `<a target="_blank" href="${t.getProperty("html")}">${t.getProperty("longLabel")}</a>`;
+        } else if (t.hasProperty("longLabel")) {
+            config.description = t.getProperty("longLabel");
         }
-        if (stanzas.length < 2) {
-            throw Error("Expected at least 2 stanzas, hub and genome")
+
+        if (t.hasProperty("autoScale")) {
+            config.autoscale = t.getProperty("autoScale").toLowerCase() === "on";
         }
+        if (t.hasProperty("maxHeightPixels")) {
+            const tokens = t.getProperty("maxHeightPixels").split(":");
+            config.maxHeight = Number.parseInt(tokens[0]);
+            config.height = Number.parseInt(tokens[1]);
+            config.minHeight = Number.parseInt(tokens[2]);
+        }
+        // TODO -- graphTypeDefault
+        // TODO -- windowingFunction
+        if (t.hasProperty("color")) {
+            const c = t.getProperty("color");
+            config.color = c.indexOf(",") > 0 ? `rgb(${c})` : c;
+        }
+        if (t.hasProperty("altColor")) {
+            const c = t.getProperty("altColor");
+            config.altColor = c.indexOf(",") > 0 ? `rgb(${c})` : c;
+        }
+        if (t.hasProperty("viewLimits")) {
+            const tokens = t.getProperty("viewLimits").split(":");
+            let min, max;
+            if (tokens.length > 1) {
+                min = Number.parseInt(tokens[0]);
+                max = Number.parseInt(tokens[1]);
+            }
+            if (Number.isNaN(max) || Number.isNaN(min)) {
+                console.warn(`Unexpected viewLimits value in track line: ${properties["viewLimits"]}`);
+            } else {
+                config.min = min;
+                config.max = max;
+            }
 
-        // The second stanza should be a genome
-        if ("genome" === stanzas[1].type) {
-            this.genomeStanza = stanzas[1];
-        } else {
-            throw Error(`Unexpected hub file -- expected "genome" stanza but found "${stanzas[1].type}"`)
+        }
+        if (t.hasProperty("itemRgb")) ;
+        if ("hide" === t.getProperty("visibility")) {
+            // TODO -- this not supported yet
+            config.visible = false;
+        }
+        if (t.hasProperty("url")) {
+            config.infoURL = t.getProperty("url");
+        }
+        if (t.hasProperty("searchIndex")) {
+            config.searchIndex = t.getProperty("searchIndex");
+        }
+        if (t.hasProperty("searchTrix")) {
+            config.trixURL = t.getProperty("searchTrix");
+        }
+        if (t.hasProperty("html")) {
+            config.html = t.getProperty("html");
+        }
+
+        if (t.hasProperty("group")) {
+            config._group = t.getProperty("group");
+            if (this.groupPriorityMap && this.groupPriorityMap.has(config._group)) {
+                const nextPriority = this.groupPriorityMap.get(config._group) + 1;
+                config.order = nextPriority;
+                this.groupPriorityMap.set(config._group, nextPriority);
+            }
+        }
+
+        if (t.hasProperty("metadata")) {
+            config.attributes = parseMetadata(t.getProperty("metadata"));
+        }
+
+        if (t.hasProperty("maxWindowToDraw")) {
+            let maxWindowToDraw = parseInt(t.getProperty("maxWindowToDraw"), 10);
+            if (maxWindowToDraw > Number.MAX_SAFE_INTEGER) {
+                maxWindowToDraw = Number.MAX_SAFE_INTEGER;
+            }
+            config.visibilityWindow = maxWindowToDraw;
         }
 
-        // Remaining stanzas should be tracks
-        this.trackStanzas = [];
-        for (let i = 2; i < stanzas.length; i++) {
-            if ("track" === stanzas[i].type) {
-                this.trackStanzas.push(stanzas[i]);
+        // IGV does not support "maxWindowCoverage" in the same way as UCSC. Use to limit visibility window
+        if (t.hasProperty("maxWindowCoverage")) {
+            let maxWindowToDraw = parseInt(t.getProperty("maxWindowCoverage"), 10);
+            if (maxWindowToDraw > Number.MAX_SAFE_INTEGER) {
+                maxWindowToDraw = Number.MAX_SAFE_INTEGER;
             }
+            config.visibilityWindow = maxWindowToDraw;
         }
 
-        if (groupStanzas) {
-            this.groupStanzas = groupStanzas;
-            this.groupPriorityMap = new Map();
-            for (let g of groupStanzas) {
-                if (g.hasProperty("priority")) {
-                    this.groupPriorityMap.set(g.getProperty("name"), Number.parseInt(g.getProperty("priority")) * 10);
+        return config
+    }
+}
+
+function htmlText(html) {
+    // Assumes a pattern like <span style="color:#C58DAA">Digestive</span>
+    const idx1 = html.indexOf('>');
+    const idx2 = html.indexOf('<', idx1);
+    if (idx1 > 0 && idx2 > idx1) {
+        return html.substring(idx1 + 1, idx2)
+    } else {
+        return html
+    }
+}
+
+/**
+ * Return the priority for the group. The priority format is uncertain, but extends to at least 2 levels (e.g. 3.4).
+ * Ignore levels > 3
+ *
+ * @param {string} priorityString Priority as a string (e.g. 3.4)
+ * @return {number} A priority as an integer
+ */
+function getPriority(priorityString) {
+    try {
+        const tokens = priorityString.trim().split(".");
+        let p = parseInt(tokens[0], 10) * 100;
+        if (tokens.length > 1) {
+            p += parseInt(tokens[1], 10) * 10;
+        }
+        if (tokens.length > 2) {
+            p += parseInt(tokens[2], 10);
+        }
+        return p
+    } catch (e) {
+        console.error(`Error parsing priority string: ${priorityString}`, e);
+        return Number.MAX_SAFE_INTEGER
+    }
+}
+
+function parseMetadata(metadata) {
+    const attrs = new Map();
+    let lastMetdataLengh = -1;
+    while (metadata && metadata.length > 0) {
+        try {
+            if (metadata.length === lastMetdataLengh) {
+                break
+            }
+            lastMetdataLengh = metadata.length;
+            let idx = metadata.indexOf("=");
+            if (idx === -1 || idx === metadata.length - 1) {
+                break
+            }
+            let idx2;
+            const key = capitalize(stripQuotes$2(metadata.substring(0, idx)));
+            let value;
+
+            if (metadata.charAt(idx + 1) === '"') {
+                idx++;
+                idx2 = metadata.indexOf('" ', idx + 1);
+                value = idx2 > 0 ? metadata.substring(idx + 1, idx2) : metadata.substring(idx + 1);
+                idx2++;
+            } else {
+                idx2 = metadata.indexOf(" ", idx + 1);
+                if (idx2 === -1) {
+                    idx2 = metadata.length;
                 }
+                value = metadata.substring(idx + 1, idx2);
+            }
+            value = stripQuotes$2(value);
+            if (value.endsWith('"')) {
+                value = value.substring(0, value.length - 1);
+            }
+            if (value.startsWith("<") && value.endsWith(">")) {
+                value = htmlText(value);
             }
+            attrs.set(key, value);
+            if (idx2 === metadata.length) {
+                break
+            }
+            metadata = idx2 > 0 ? metadata.substring(idx2 + 1).trim() : "";
+        } catch (e) {
+            // We don't want to fail parsing the hub due to a failure parsing metadata. Also, we don't want to
+            // overwhelm the log. Metadata is of marginal importance in IGV.
+        }
+    }
+    return attrs
+}
+
+/*
+ https://genomewiki.ucsc.edu/index.php/Assembly_Hubs
+ https://genome.ucsc.edu/goldenpath/help/hgTrackHubHelp.html
+ https://genome.ucsc.edu/goldenPath/help/hgTrackHubHelp
+ https://genome.ucsc.edu/goldenpath/help/trackDb/trackDbHub.html
+ */
+
+const idMappings = new Map([
+    ["hg38", "GCF_000001405.40"],
+    ["mm39", "GCF_000001635.27"],
+    ["mm10", "GCF_000001635.26"],
+    ["bosTau9", "GCF_002263795.1"],
+    ["canFam4", "GCF_011100685.1"],
+    ["canFam6", "GCF_000002285.5"],
+    ["ce11", "GCF_000002985.6"],
+    ["dm6", "GCF_000001215.4"],
+    ["galGal6", "GCF_000002315.6"],
+    ["gorGor6", "GCF_008122165.1"],
+    ["macFas5", "GCA_000364345.1"],
+    ["panTro6", "GCA_002880755.3"],
+    ["rn6", "GCF_000001895.5"],
+    ["rn7", "GCF_015227675.2"],
+    ["sacCer3", "GCF_000146045.2"],
+    ["sacCer2", "GCF_000146045.2"],
+    ["susScr11", "GCF_000003025.6"],
+    ["taeGut1", "GCF_000002275.3"],
+    ["tetNig2", "GCF_000002275.3"],
+    ["xenTro10", "GCF_000002035.6"],
+    ["xenTro9", "GCF_000002035.6"],
+    ["tair10", "GCF_000001735.4"],
+]);
+
+class Hub {
+
+    static supportedTypes = new Set(["bigBed", "bigWig", "bigGenePred", "vcfTabix"])
+    static filterTracks = new Set(["cytoBandIdeo", "assembly", "gap", "gapOverlap", "allGaps",
+        "cpgIslandExtUnmasked", "windowMasker"])
+
+    constructor(url, hubStanza, genomeStanzas, trackStanzas, groupStanzas) {
+
+        this.url = url;
+        this.hubStanza = hubStanza;
+        this.genomeStanzas = genomeStanzas;
+        this.trackStanzas = trackStanzas;
+        this.groupStanzas = groupStanzas;
+        this.trackHubMap = new Map();
+
+        // trackStanzas will not be null if this is a "onefile" hub
+        if (trackStanzas) {
+            const genomeId = genomeStanzas[0].getProperty("genome"); // Assumption here this is a single genome hub
+            this.trackHubMap.set(genomeId, new TrackDbHub(trackStanzas, groupStanzas));
         }
     }
 
-    getDefaultPosition() {
-        return this.genomeStanza.getProperty("defaultPos")
+
+    getName() {
+        return this.hubStanza.getProperty("hub")
     }
 
+    getShortLabel() {
+        return this.hubStanza.getProperty("shortLabel")
+    }
+
+    getLongLabel() {
+        return this.hubStanza.getProperty("longLabel")
+    }
+
+    getDescriptionUrl() {
+        return this.hubStanza.getProperty("descriptionUrl")
+    }
+
+
     /*  Example genome stanza
 genome GCF_000186305.1
 taxId 176946
@@ -30456,133 +31036,126 @@ transBlat dynablat-01.soe.ucsc.edu 4040 dynamic GCF/000/186/305/GCF_000186305.1
 isPcr dynablat-01.soe.ucsc.edu 4040 dynamic GCF/000/186/305/GCF_000186305.1
  */
 
-    getGenomeConfig(options = {}) {
-        // TODO -- add blat?  htmlPath?
+    getGenomeConfig(genomeId) {
+
+        const genomeStanza = genomeId ? this.genomeStanzas.find(s => s.getProperty("genome") === genomeId) : this.genomeStanzas[0];
+        if (!genomeStanza) {
+            throw new Error(`Genome not found in hub: ${genomeId}`)
+        }
+        return this.#getGenomeConfig(genomeStanza)
+    }
+
+    #getGenomeConfig(genomeStanza) {
 
-        const id = this.genomeStanza.getProperty("genome");
+        const id = genomeStanza.getProperty("genome");
         const gsName =
             this.hubStanza.getProperty("shortLabel") ||
-            this.genomeStanza.getProperty("scientificName") ||
-            this.genomeStanza.getProperty("organism") ||
-            this.genomeStanza.getProperty("description");
+            genomeStanza.getProperty("scientificName") ||
+            genomeStanza.getProperty("organism") ||
+            genomeStanza.getProperty("description");
         const name = gsName + (gsName ? ` (${id})` : ` ${id}`);
 
         const config = {
-            hubURL: this.url,
+
             id: id,
             name: name,
-            twoBitURL: this.baseURL + this.genomeStanza.getProperty("twoBitPath"),
+            twoBitURL: genomeStanza.getProperty("twoBitPath"),
             nameSet: "ucsc",
+            hubs: [this.url]
         };
 
-        if (this.genomeStanza.hasProperty("chromSizesURL")) {
-            config.chromSizesURL = this.genomeStanza.getProperty("chromSizesURL");
+        if (genomeStanza.hasProperty("chromSizes")) {
+            config.chromSizesURL = genomeStanza.getProperty("chromSizes");
         } else {
             config.wholeGenomeView = false;
             config.showChromosomeWidget = false;
         }
 
-        if (this.genomeStanza.hasProperty("defaultPos")) {
-            const hubLocus = this.genomeStanza.getProperty("defaultPos");
+        if (genomeStanza.hasProperty("defaultPos")) {
+            const hubLocus = genomeStanza.getProperty("defaultPos");
             // Strip out coordinates => whole chromosome view
-            if (hubLocus) {
-                const idx = hubLocus.lastIndexOf(":");
-                config.locus = idx > 0 ? hubLocus.substring(0, idx) : hubLocus;
-            }
+            // if (hubLocus) {
+            //     const idx = hubLocus.lastIndexOf(":")
+            //     config.locus = idx > 0 ? hubLocus.substring(0, idx) : hubLocus
+            // }
+            config.locus = hubLocus;
         }
 
-        if (this.genomeStanza.hasProperty("blat")) {
-            config.blat = this.baseURL + this.genomeStanza.getProperty("blat");
-        }
-        if (this.genomeStanza.hasProperty("chromAliasBb")) {
-            config.chromAliasBbURL = this.baseURL + this.genomeStanza.getProperty("chromAliasBb");
+        if (genomeStanza.hasProperty("blat")) {
+            config.blat = genomeStanza.getProperty("blat");
         }
-        if (this.genomeStanza.hasProperty("chromAlias")) {
-            config.aliasURL = this.baseURL + this.genomeStanza.getProperty("chromAlias");
+        if (genomeStanza.hasProperty("chromAliasBb")) {
+            config.chromAliasBbURL = genomeStanza.getProperty("chromAliasBb");
         }
-        if (this.genomeStanza.hasProperty("twoBitBptURL")) {
-            config.twoBitBptURL = this.baseURL + this.genomeStanza.getProperty("twoBitBptURL");
+        if (genomeStanza.hasProperty("chromAlias")) {
+            config.aliasURL = genomeStanza.getProperty("chromAlias");
         }
-
-        if (this.genomeStanza.hasProperty("twoBitBptUrl")) {
-            config.twoBitBptURL = this.baseURL + this.genomeStanza.getProperty("twoBitBptUrl");
+        if (genomeStanza.hasProperty("twoBitBptURL")) {
+            config.twoBitBptURL = genomeStanza.getProperty("twoBitBptURL");
         }
 
-        // chromSizes can take a very long time to load, and is not useful with the default WGV = off
-        if (options.includeChromSizes && this.genomeStanza.hasProperty("chromSizes")) {
-            config.chromSizesURL = this.baseURL + this.genomeStanza.getProperty("chromSizes");
+        if (genomeStanza.hasProperty("twoBitBptUrl")) {
+            config.twoBitBptURL = genomeStanza.getProperty("twoBitBptUrl");
         }
 
         if (this.hubStanza.hasProperty("longLabel")) {
             config.description = this.hubStanza.getProperty("longLabel").replace("/", "\n");
         } else {
             config.description = config.id;
-            if (this.genomeStanza.hasProperty("description")) {
-                config.description += `\n${this.genomeStanza.getProperty("description")}`;
+            if (genomeStanza.hasProperty("description")) {
+                config.description += `\n${genomeStanza.getProperty("description")}`;
             }
-            if (this.genomeStanza.hasProperty("organism")) {
-                config.description += `\n${this.genomeStanza.getProperty("organism")}`;
+            if (genomeStanza.hasProperty("organism")) {
+                config.description += `\n${genomeStanza.getProperty("organism")}`;
             }
-            if (this.genomeStanza.hasProperty("scientificName")) {
-                config.description += `\n${this.genomeStanza.getProperty("scientificName")}`;
+            if (genomeStanza.hasProperty("scientificName")) {
+                config.description += `\n${genomeStanza.getProperty("scientificName")}`;
             }
 
-            if (this.genomeStanza.hasProperty("htmlPath")) {
-                config.infoURL = this.baseURL + this.genomeStanza.getProperty("htmlPath");
+            if (genomeStanza.hasProperty("htmlPath")) {
+                config.infoURL = genomeStanza.getProperty("htmlPath");
             }
         }
 
-        // Search for cytoband
-        /*
-        track cytoBandIdeo
-        shortLabel Chromosome Band (Ideogram)
-        longLabel Ideogram for Orientation
-        group map
-        visibility dense
-        type bigBed 4 +
-        bigDataUrl bbi/GCA_004027145.1_DauMad_v1_BIUU.cytoBand.bb
-         */
-        const cytoStanza = this.trackStanzas.filter(t => "cytoBandIdeo" === t.name && t.hasProperty("bigDataUrl"));
-        if (cytoStanza.length > 0) {
-            config.cytobandBbURL = this.baseURL + cytoStanza[0].getProperty("bigDataUrl");
-        }
-
         // Tracks.
         const filter = (t) => !Hub.filterTracks.has(t.name) && "hide" !== t.getProperty("visibility");
         config.tracks = this.#getTracksConfigs(filter);
 
-
         return config
     }
 
-    getGroupedTrackConfigurations() {
-
-        // Organize track configs by group
-        const trackConfigMap = new Map();
-        for (let c of this.#getTracksConfigs()) {
-            if (c.name === "cytoBandIdeo") continue
-            const groupName = c.group || "other";
-            if (trackConfigMap.has(groupName)) {
-                trackConfigMap.get(groupName).push(c);
-            } else {
-                trackConfigMap.set(groupName, [c]);
-            }
+    async getGroupedTrackConfigurations(genomeId) {
+        let trackHub = await this.#getTrackDbHub(genomeId);
+        if (!trackHub && idMappings.has(genomeId)) {
+            trackHub = await this.#getTrackDbHub(idMappings.get(genomeId));
         }
+        if (!trackHub) {
+            console.log(`Warning: no trackDB found for genomeId ${genomeId}.`);
+        }
+        return trackHub ? trackHub.getGroupedTrackConfigurations() : []
+    }
 
-        // Build group structure
-        const groupStanazMap = this.groupStanzas ?
-            new Map(this.groupStanzas.map(groupStanza => [groupStanza.getProperty("name"), groupStanza])) :
-            new Map();
-
-        return Array.from(trackConfigMap.keys()).map(groupName => {
-            return {
-                label: groupStanazMap.has(groupName) ? groupStanazMap.get(groupName).getProperty("label") : groupName,
-                tracks: trackConfigMap.get(groupName)
+    async #getTrackDbHub(genomeId) {
+        let trackHub = this.trackHubMap.get(genomeId);
+        if (!trackHub) {
+            for (let stanza of this.genomeStanzas) {
+                if (genomeId === stanza.getProperty("genome")) {
+                    try {
+                        const trackDbURL = stanza.getProperty("trackDb");
+                        const trackStanzas = await loadStanzas(trackDbURL);
+                        trackHub = new TrackDbHub(trackStanzas, this.groupStanzas);
+                        this.trackHubMap.set(genomeId, trackHub);
+                    } catch (error) {
+                        console.error(`Error loading trackDb file: ${stanza.getProperty("trackDb")}`, error);
+                    }
+                    break
+                }
             }
-        })
-
+        }
+        return trackHub
     }
 
+
     /**
      * Return an array of igv track config objects that satisfy the filter
      */
@@ -30620,7 +31193,7 @@ isPcr dynablat-01.soe.ucsc.edu 4040 dynamic GCF/000/186/305/GCF_000186305.1
             "id": t.getProperty("track"),
             "name": t.getProperty("shortLabel"),
             "format": format,
-            "url": this.baseURL + t.getProperty("bigDataUrl"),
+            "url": t.getProperty("bigDataUrl"),
             "displayMode": t.displayMode,
         };
 
@@ -30631,7 +31204,7 @@ isPcr dynablat-01.soe.ucsc.edu 4040 dynamic GCF/000/186/305/GCF_000186305.1
         if (t.hasProperty("longLabel") && t.hasProperty("html")) {
             if (config.description) config.description += "<br/>";
             config.description =
-                `<a target="_blank" href="${this.baseURL + t.getProperty("html")}">${t.getProperty("longLabel")}</a>`;
+                `<a target="_blank" href="${t.getProperty("html")}">${t.getProperty("longLabel")}</a>`;
         } else if (t.hasProperty("longLabel")) {
             config.description = t.getProperty("longLabel");
         }
@@ -30663,7 +31236,7 @@ isPcr dynablat-01.soe.ucsc.edu 4040 dynamic GCF/000/186/305/GCF_000186305.1
                 max = Number.parseInt(tokens[1]);
             }
             if (Number.isNaN(max) || Number.isNaN(min)) {
-                console.warn(`Unexpected viewLimits value in track line: ${properties["viewLimits"]}`);
+                console.warn(`Unexpected viewLimits value in track line: ${t.getProperty("viewLimits")}`);
             } else {
                 config.min = min;
                 config.max = max;
@@ -30682,15 +31255,15 @@ isPcr dynablat-01.soe.ucsc.edu 4040 dynamic GCF/000/186/305/GCF_000186305.1
             config.searchIndex = t.getProperty("searchIndex");
         }
         if (t.hasProperty("searchTrix")) {
-            config.trixURL = this.baseURL + t.getProperty("searchTrix");
+            config.trixURL = t.getProperty("searchTrix");
         }
 
         if (t.hasProperty("group")) {
-            config.group = t.getProperty("group");
-            if (this.groupPriorityMap && this.groupPriorityMap.has(config.group)) {
-                const nextPriority = this.groupPriorityMap.get(config.group) + 1;
+            config._group = t.getProperty("group");
+            if (this.groupPriorityMap && this.groupPriorityMap.has(config._group)) {
+                const nextPriority = this.groupPriorityMap.get(config._group) + 1;
                 config.order = nextPriority;
-                this.groupPriorityMap.set(config.group, nextPriority);
+                this.groupPriorityMap.set(config._group, nextPriority);
             }
         }
 
@@ -30699,96 +31272,92 @@ isPcr dynablat-01.soe.ucsc.edu 4040 dynamic GCF/000/186/305/GCF_000186305.1
 
 }
 
-function firstWord(str) {
-    const idx = str.indexOf(' ');
-    return idx > 0 ? str.substring(0, idx) : str
-}
+/*
+ https://genomewiki.ucsc.edu/index.php/Assembly_Hubs
+ https://genome.ucsc.edu/goldenpath/help/hgTrackHubHelp.html
+ https://genome.ucsc.edu/goldenPath/help/hgTrackHubHelp
+ https://genome.ucsc.edu/goldenpath/help/trackDb/trackDbHub.html
+ */
 
-class Stanza {
+const urlProperties = new Set(["descriptionUrl", "desriptionUrl",
+    "twoBitPath", "blat", "chromAliasBb", "twoBitBptURL", "twoBitBptUrl", "htmlPath", "bigDataUrl",
+    "genomesFile", "trackDb", "groups", "include", "html", "searchTrix", "groups",
+    "chromSizes"]);
 
-    properties = new Map()
 
-    constructor(type, name) {
-        this.type = type;
-        this.name = name;
-    }
+const hubCache = new Map();
 
-    setProperty(key, value) {
-        this.properties.set(key, value);
+async function loadHub(url) {
+    if (hubCache.has(url)) {
+        return hubCache.get(url)
     }
 
-    getProperty(key) {
-        if (this.properties.has(key)) {
-            return this.properties.get(key)
-        } else if (this.parent) {
-            return this.parent.getProperty(key)
-        } else {
-            return undefined
-        }
+    const stanzas = await loadStanzas(url);
+    if (stanzas.length < 1) {
+        throw new Error("Empty hub file")
     }
 
-    hasProperty(key) {
-        if (this.properties.has(key)) {
-            return true
-        } else if (this.parent) {
-            return this.parent.hasProperty(key)
-        } else {
-            return false
-        }
+    const hubStanza = stanzas[0];
+    if (hubStanza.type !== "hub") {
+        throw new Error("First stanza must be a hub stanza")
     }
 
-    get format() {
-        const type = this.getProperty("type");
-        if (type) {
-            // Trim extra bed qualifiers (e.g. bigBed + 4)
-            return firstWord(type)
+    let genomeStanzas;
+    let trackStanzas;
+    if (hubStanza.getProperty("useOneFile") === "on") {
+        // This is a "onefile" hub, all stanzas are in the same file
+        if (stanzas[1].type !== "genome") {
+            throw new Error("Unexpected hub file -- expected 'genome' stanza but found " + stanzas[1].type)
         }
-        return undefined // unknown type
-    }
+        const genomeStanza = stanzas[1];
+        genomeStanzas = [genomeStanza];
+        trackStanzas = stanzas.slice(2);
 
-    /**
-     * IGV display mode
-     */
-    get displayMode() {
-        let viz = this.getProperty("visibility");
-        if (!viz) {
-            return "COLLAPSED"
-        } else {
-            viz = viz.toLowerCase();
-            switch (viz) {
-                case "dense":
-                    return "COLLAPSED"
-                case "pack":
-                    return "EXPANDED"
-                case "squish":
-                    return "SQUISHED"
-                default:
-                    return "COLLAPSED"
+        // If this is an assembly check chromSizes. This file can be very large, and not needed if whole genome view
+        // is not enabled.  Remove it if > 100 kb
+        if (genomeStanza.hasOwnProperty("chromSizes")) {
+            const chromSizes = genomeStanza.getProperty("chromSizes");
+            try {
+                const contentLength = await igvxhr.getContentLength(chromSizes);
+                if (contentLength > 100000) {
+                    genomeStanza.removeProperty("chromSizes");
+                }
+            } catch (e) {
+                console.error(`Error getting content length for chromSizes ${chromSizes}`, e);
             }
-        }
-    }
-}
 
+        }
 
-/**
- * Return the content length of the resource.  If the content length cannot be determined return null;
- * @param url
- * @returns {Promise<number|string>}
- */
-async function getContentLength(url) {
-    try {
-        const response = await fetch(url, {method: 'HEAD'});
-        const headers = response.headers;
-        if (headers.has("content-length")) {
-            return headers.get("content-length")
-        } else {
-            return null
+    } else {
+        if (!hubStanza.hasProperty("genomesFile")) {
+            throw new Error("hub.txt must specify 'genomesFile'")
         }
-    } catch (e) {
-        return null
+        genomeStanzas = await loadStanzas(hubStanza.getProperty("genomesFile"));
     }
+
+    // Load group files for all genomes, if any.
+    const uniqGroupURLs = new Set();
+    genomeStanzas.forEach(s => {
+        const groupURL = s.getProperty("groups");
+        if (groupURL) uniqGroupURLs.add(groupURL);
+
+    });
+    const groupStanzas = [];
+    const groupPromises = Array.from(uniqGroupURLs).map(async url => {
+        const stanza = await loadStanzas(url);
+        return stanza
+    });
+    const groupResults = await Promise.all(groupPromises);
+    groupResults.forEach(stanza => groupStanzas.push(...stanza));
+
+    const hub = new Hub(url, hubStanza, genomeStanzas, trackStanzas, groupStanzas);
+
+    hubCache.set(url, hub);
+
+    return hub
 }
 
+
 /**
  * Parse a UCSC  file
  * @param url
@@ -30796,38 +31365,92 @@ async function getContentLength(url) {
  */
 async function loadStanzas(url) {
 
-    const response = await fetch(url);
-    const data = await response.text();
+    const idx = url.lastIndexOf("/");
+    const baseURL = url.substring(0, idx + 1);
+    const host = getHost(url);
+
+    //const response = await fetch(url)
+    const data = await igvxhr.loadString(url, {});    //await response.text()
     const lines = data.split(/\n|\r\n|\r/g);
 
     const nodes = [];
     let currentNode;
     let startNewNode = true;
-    for (let line of lines) {
-        const indent = indentLevel(line);
-        const i = line.indexOf(' ', indent);
-        if (i < 0) {
+    for (let i = 0; i < lines.length; i++) {
+
+        let line = lines[i].trim();
+
+        if (line.length == 0) {
             // Break - start a new node
             startNewNode = true;
         } else {
-            const key = line.substring(indent, i).trim();
-            if (key.startsWith("#")) continue
-            const value = line.substring(i + 1).trim();
+            if (line.startsWith("#")) {
+                continue
+            }
+
+            while (line.endsWith('\\')) {
+                i++;
+                if (i >= lines.length) {
+                    break
+                }
+                line = line.substring(0, line.length - 1) + lines[i].trim();
+            }
+
+            if (line.startsWith("include")) {
+                const relativeURL = line.substring(8).trim();
+                const includeURL = getDataURL(relativeURL, host, baseURL);
+                const includeStanzas = await loadStanzas(includeURL);
+                for (let s of includeStanzas) {
+                    nodes.push(s);
+                }
+            }
+
+
+            const i = line.indexOf(' ');
+            const key = line.substring(0, i).trim();
+            let value = line.substring(i + 1).trim();
+
+            if (key === "type") {
+                // The "type" property contains format and sometimes other information. For example, data range
+                // on a bigwig "type bigWig 0 .5"
+                const tokens = value.split(/\s+/);
+                value = tokens[0];
+                if (value === "bigWig" && tokens.length === 3) {
+                    // This is a bigWig with a range
+                    const min = tokens[1];
+                    const max = tokens[2];
+                    if (currentNode) {
+                        currentNode.setProperty("min", min);
+                        currentNode.setProperty("max", max);
+                    }
+                }
+
+            } else if (!["shortLabel", "longLabel", "metadata", "label"].includes(key)) {
+                const tokens = value.split(/\s+/);
+                value = tokens[0];
+            }
+
+            if (urlProperties.has(key) || value.endsWith("URL") || value.endsWith("Url")) {
+                value = getDataURL(value, host, baseURL);
+            }
+
             if (startNewNode) {
-                // Start a new node -- indent is currently ignored as igv.js does not support sub-tracks,
-                // so track stanzas are flattened
-                const newNode = new Stanza(key, value);
-                nodes.push(newNode);
-                currentNode = newNode;
+                currentNode = new Stanza(key, value);
+                nodes.push(currentNode);
                 startNewNode = false;
             }
+
             currentNode.setProperty(key, value);
         }
     }
-
     return resolveParents(nodes)
 }
 
+function firstWord(str) {
+    const idx = str.indexOf(' ');
+    return idx > 0 ? str.substring(0, idx) : str
+}
+
 function resolveParents(nodes) {
     const nodeMap = new Map();
     for (let n of nodes) {
@@ -30842,17 +31465,34 @@ function resolveParents(nodes) {
     return nodes
 }
 
-function indentLevel(str) {
-    let level = 0;
-    for (level = 0; level < str.length; level++) {
-        const c = str.charAt(level);
-        if (c !== ' ' && c !== '\t') break
+function getDataURL(url, host, baseURL) {
+    if (url.startsWith("http://") || url.startsWith("https://") || url.startsWith("gs://") || url.startsWith("s3://")) {
+        return url
+    } else if (url.startsWith("/")) {
+        return host + url
+    } else {
+        return baseURL + url
     }
-    return level
+}
+
+function getHost(url) {
+    let host;
+    if (url.startsWith("https://") || url.startsWith("http://")) {
+        try {
+            const tmp = new URL(url);
+            host = `${tmp.protocol}//${tmp.host}`;
+        } catch (e) {
+            console.error("Error parsing base URL host", e);
+            throw e
+        }
+    } else {
+        host = '';
+    }
+    return host
 }
 
 const DEFAULT_GENOMES_URL = "https://igv.org/genomes/genomes.json";
-const BACKUP_GENOMES_URL = "https://raw.githubusercontent.com/igvteam/igv.js/main/packages/igv/src/genomes/genomes.json";
+const BACKUP_GENOMES_URL = "https://raw.githubusercontent.com/igvteam/igv-genomes/refs/heads/main/dist/genomes.json";
 
 const GenomeUtils = {
 
@@ -30860,7 +31500,7 @@ const GenomeUtils = {
 
         if (!GenomeUtils.KNOWN_GENOMES) {
 
-            GenomeUtils.KNOWN_GENOMES = {};
+            let table = {};
 
             const processJson = (jsonArray, table) => {
                 jsonArray.forEach(function (json) {
@@ -30873,12 +31513,12 @@ const GenomeUtils = {
             if (config.loadDefaultGenomes !== false) {
                 try {
                     const jsonArray = await igvxhr.loadJson(DEFAULT_GENOMES_URL, {timeout: 2000});
-                    processJson(jsonArray, GenomeUtils.KNOWN_GENOMES);
+                    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, GenomeUtils.KNOWN_GENOMES);
+                        processJson(jsonArray, table);
                     } catch (e) {
                         console.error("Error initializing backup genomes:", error);
                     }
@@ -30890,11 +31530,12 @@ const GenomeUtils = {
             if (genomeList) {
                 if (typeof genomeList === 'string') {
                     const jsonArray = await igvxhr.loadJson(genomeList, {});
-                     processJson(jsonArray, GenomeUtils.KNOWN_GENOMES);
+                     processJson(jsonArray, table);
                 } else {
-                     processJson(genomeList, GenomeUtils.KNOWN_GENOMES);
+                     processJson(genomeList, table);
                 }
             }
+            GenomeUtils.KNOWN_GENOMES = table;
         }
     },
 
@@ -30931,8 +31572,8 @@ const GenomeUtils = {
                 if ((genomeID.startsWith("GCA_") || genomeID.startsWith("GCF_")) && genomeID.length >= 13) {
                     try {
                         const hubURL = convertToHubURL(genomeID);
-                        const hub = await Hub.loadHub(hubURL);
-                        reference = hub.getGenomeConfig();
+                        const hub = await loadHub(hubURL);
+                        reference = hub.getGenomeConfig(genomeID);
                     } catch (e) {
                         console.error(e);
                     }
@@ -32894,27 +33535,18 @@ const distinctColorsPalette = _18_DistinctColorsViaChatGPT4.map(str => {
         return [ r, g, b ]
 });
 
-const colorForNA = appleCrayonRGB('magnesium');
-const sampleInfoFileHeaders = ['#sampleTable', '#sampleMapping', '#colors'];
-
 class SampleInfo {
 
     static emptySpaceReplacement = '|'
-
-    sampleDictionary = {}
-    attributeNames = []
-    sampleMappingDictionary = {}
-    colorDictionary = {}
-    attributeRangeLUT = {}
+    static colorForNA = appleCrayonRGB('magnesium')
+    static sampleInfoFileHeaders = ['#sampleTable', '#sampleMapping', '#colors']
 
     constructor(browser) {
-
         const found = browser.tracks.some(t => typeof t.getSamples === 'function');
         if (found.length > 0) {
             browser.sampleInfoControl.setButtonVisibility(true);
         }
         this.initialize();
-
     }
 
     initialize() {
@@ -32941,47 +33573,60 @@ class SampleInfo {
 
     getAttributes(sampleName) {
 
-        const key = 0 === Object.keys(this.sampleMappingDictionary) ? sampleName : (this.sampleMappingDictionary[sampleName] || sampleName);
+        const key = this.sampleMappingDictionary[sampleName] || sampleName;
         return this.sampleDictionary[key]
     }
 
-    async loadSampleInfoFile(path) {
-        try {
-            const string = await igvxhr.loadString(path);
-            this.#processSampleInfoFileAsString(string);
-            this.sampleInfoFiles.push(path);
-        } catch (e) {
-            console.error(e.message);
+    async loadSampleInfo(config) {
+
+        if (config.url) {
+            await this.loadSampleInfoFile(config.url);
+        } else {
+
+            const samples = { ...config };
+            for (const [key, record] of Object.entries(samples)) {
+                samples[key] = SampleInfo.toNumericalRepresentation(record);
+            }
+
+            const [ value ] = Object.values(samples);
+            const attributes = Object.keys(value);
+
+            this.loadSampleInfoHelper(attributes, samples);
+
         }
-    }
 
-    #processSampleInfoFileAsString(string) {
+        this.initialized = true;
+    }
 
-        const sectionDictionary = createSectionDictionary(string);
+    loadSampleInfoHelper(attributes, samples){
 
-        for (const [header, value] of Object.entries(sectionDictionary)) {
-            switch (header) {
-                case '#sampleTable':
-                    this.#accumulateSampleTableDictionary(value);
-                    break
-                case '#sampleMapping':
-                    this.#accumulateSampleMappingDictionary(value);
-                    break
-                case '#colors':
-                    this.#accumulateColorScheme(value);
-                    break
+        // Establish the range of values for each attribute
+        const lut = createAttributeRangeLUT(attributes, samples);
+        accumulateDictionary(this.attributeRangeLUT, lut);
 
+        // Ensure unique attribute names list
+        const currentAttributeNameSet = new Set(this.attributeNames);
+        for (const name of attributes) {
+            if (!currentAttributeNameSet.has(name)) {
+                this.attributeNames.push(name);
             }
         }
 
-        this.initialized = true;
+        accumulateDictionary(this.sampleDictionary, samples);
+
+    }
 
+    async loadSampleInfoFile(path) {
+        try {
+            const string = await igvxhr.loadString(path);
+            this.#processSampleInfoFileAsString(string);
+            this.sampleInfoFiles.push(path);
+        } catch (e) {
+            console.error(e.message);
+        }
     }
 
     getAttributeColor(attribute, value) {
-        // if (value === 'NA') {
-        //     console.log(`${ attribute } : ${ value }`)
-        // }
 
         let color;
 
@@ -32999,7 +33644,7 @@ class SampleInfo {
 
         } else if (typeof value === "string") {
 
-            color = 'NA' === value ? colorForNA : stringToRGBString(value);
+            color = 'NA' === value ? SampleInfo.colorForNA : SampleInfo.stringToRGBString(value);
 
         } else {
 
@@ -33067,6 +33712,27 @@ class SampleInfo {
         return json
     }
 
+    #processSampleInfoFileAsString(string) {
+
+        const sectionDictionary = createSectionDictionary(string);
+
+        for (const [header, value] of Object.entries(sectionDictionary)) {
+            switch (header) {
+                case '#sampleTable':
+                    this.#accumulateSampleTableDictionary(value);
+                    break
+                case '#sampleMapping':
+                    this.#accumulateSampleMappingDictionary(value);
+                    break
+                case '#colors':
+                    this.#accumulateColorScheme(value);
+                    break
+
+            }
+        }
+
+    }
+
     #accumulateSampleTableDictionary(lines) {
 
         // shift array with first item that is 'sample' or 'Linking_id'. Remaining items are attribute names
@@ -33106,22 +33772,11 @@ class SampleInfo {
         } // for (lines)
 
         for (const [key, record] of Object.entries(samples)) {
-            samples[key] = toNumericalRepresentation(record);
+            samples[key] = SampleInfo.toNumericalRepresentation(record);
         }
 
-        // Establish the range of values for each attribute
-        const lut = createAttributeRangeLUT(attributes, samples);
-        accumulateDictionary(this.attributeRangeLUT, lut);
-
-        // Ensure unique attribute names list
-        const currentAttributeNameSet = new Set(this.attributeNames);
-        for (const name of attributes) {
-            if (!currentAttributeNameSet.has(name)) {
-                this.attributeNames.push(name);
-            }
-        }
+        this.loadSampleInfoHelper(attributes, samples);
 
-        accumulateDictionary(this.sampleDictionary, samples);
     }
 
     #accumulateSampleMappingDictionary(lines) {
@@ -33222,7 +33877,7 @@ class SampleInfo {
                 this.colorDictionary[attribute] = attributeValue => {
 
                     if ('NA' === attributeValue) {
-                        return colorForNA
+                        return SampleInfo.colorForNA
                     } else {
                         const [min, max] = this.attributeRangeLUT[attribute];
                         const interpolant = (attributeValue - min) / (max - min);
@@ -33242,8 +33897,34 @@ class SampleInfo {
 
     }
 
-}
+    static toNumericalRepresentation(obj) {
+        const result = Object.assign({}, obj);
+
+        for (const [key, value] of Object.entries(result)) {
+            if (typeof value === 'string' && !isNaN(value)) {
+                result[key] = Number(value);
+            }
+        }
+
+        return result
+    }
+
+    static stringToRGBString(str) {
+        let hash = 0;
+        for (let i = 0; i < str.length; i++) {
+            hash = str.charCodeAt(i) + ((hash << 5) - hash);
+        }
 
+        let color = [];
+        for (let i = 0; i < 3; i++) {
+            const value = (hash >> (i * 8)) & 0xff;
+            color.push(value);
+        }
+
+        return `rgb(${color.join(', ')})`
+    }
+
+}
 
 function createSectionDictionary(string) {
 
@@ -33254,14 +33935,14 @@ function createSectionDictionary(string) {
     let currentHeader;
 
     // If the first line does not start with a section header an initial #sampleTable is implied
-    if (!sampleInfoFileHeaders.includes(lines[0])) {
+    if (!SampleInfo.sampleInfoFileHeaders.includes(lines[0])) {
         currentHeader = '#sampleTable';
         dictionary[currentHeader] = [];
     }
 
     for (const line of lines) {
 
-        if (sampleInfoFileHeaders.includes(line)) {
+        if (SampleInfo.sampleInfoFileHeaders.includes(line)) {
             currentHeader = line;
             dictionary[currentHeader] = [];
         } else if (currentHeader && false === line.startsWith('#')) {
@@ -33280,7 +33961,6 @@ function accumulateDictionary(accumulator, dictionary) {
     }
 }
 
-
 function createAttributeRangeLUT(names, dictionary) {
 
     const lut = {};
@@ -33326,35 +34006,6 @@ function createAttributeRangeLUT(names, dictionary) {
     return lut
 }
 
-function toNumericalRepresentation(obj) {
-
-    const result = Object.assign({}, obj);
-
-    for (const [key, value] of Object.entries(result)) {
-        if (typeof value === 'string' && !isNaN(value)) {
-            result[key] = Number(value);
-        }
-    }
-
-    return result
-}
-
-function stringToRGBString(str) {
-
-    let hash = 0;
-    for (let i = 0; i < str.length; i++) {
-        hash = str.charCodeAt(i) + ((hash << 5) - hash);
-    }
-
-    let color = [];
-    for (let i = 0; i < 3; i++) {
-        const value = (hash >> (i * 8)) & 0xff;
-        color.push(value);
-    }
-
-    return `rgb(${color.join(', ')})`
-}
-
 const sampleInfoTileXShim = 8;
 const sampleInfoTileWidth = 16;
 
@@ -33963,7 +34614,11 @@ class SampleNameViewport {
 
     checkCanvas() {
 
-        const width = this.browser.sampleNameViewportWidth || 0;
+        let width = 0;
+        if (true === this.browser.showSampleNames) {
+            width = undefined === this.browser.sampleNameViewportWidth ? 0 : this.browser.sampleNameViewportWidth;
+        }
+
         this.ctx.canvas.width = width * window.devicePixelRatio;
         this.ctx.canvas.style.width = `${width}px`;
 
@@ -35075,7 +35730,7 @@ class MergedTrack extends TrackBase {
         let element = document.createElement('div');
         element.textContent = 'Separate tracks';
 
-        function click(e) {
+        async function click(e) {
 
             // Capture state which will be nulled when track is removed
             const groupAutoscale = this.autoscale;
@@ -35091,9 +35746,10 @@ class MergedTrack extends TrackBase {
                     track.autoscaleGroup = name;
                 }
                 track.isMergedTrack = false;
-                browser.addTrack(track.config, track);
+                browser.addTrack(track);
             }
-            browser.updateViews();
+            await browser.updateViews();
+            browser.reorderTracks();
         }
 
         return {element, click}
@@ -35188,7 +35844,7 @@ class OverlayTrackButton extends NavbarButton {
     }
 }
 
-function trackOverlayClickHandler(e) {
+async function trackOverlayClickHandler(e) {
 
     if (true === isOverlayTrackCriteriaMet(this.browser)) {
 
@@ -35225,9 +35881,9 @@ function trackOverlayClickHandler(e) {
             track.trackView.dispose();
         }
 
-        this.browser.addTrack(config, mergedTrack);
-        mergedTrack.trackView.updateViews();
-
+        this.browser.addTrack(mergedTrack);
+        await mergedTrack.trackView.updateViews();
+        this.browser.reorderTracks();
     }
 
 }
@@ -36834,14 +37490,45 @@ class InputDialog {
 
 
     present(options, e) {
-
         this.label.textContent = options.label;
         this._input.value = options.value;
         this.callback = options.callback || options.click;
 
-        const { top} = e.currentTarget.parentElement.getBoundingClientRect();
-        this.container.style.top = `${ top }px`;
-        this.container.style.display = 'flex';
+        this.container.style.display = '';
+        
+        // Get click coordinates
+        const clickX = e.clientX;
+        const clickY = e.clientY;
+        
+        // Get dialog dimensions
+        const dialogWidth = this.container.offsetWidth;
+        const dialogHeight = this.container.offsetHeight;
+        
+        // Calculate available space
+        const windowWidth = window.innerWidth;
+        const windowHeight = window.innerHeight;
+        
+        // Calculate position to keep dialog on screen
+        let left = clickX;
+        let top = clickY;
+        
+        // Adjust horizontal position if dialog would go off screen
+        if (left + dialogWidth > windowWidth) {
+            left = windowWidth - dialogWidth - 10; // 10px padding from edge
+        }
+        
+        // Adjust vertical position if dialog would go off screen
+        if (top + dialogHeight > windowHeight) {
+            top = windowHeight - dialogHeight - 10; // 10px padding from edge
+        }
+        
+        // Ensure minimum distance from edges
+        left = Math.max(10, left);
+        top = Math.max(10, top);
+        
+        // Apply positions
+        this.container.style.left = `${left}px`;
+        this.container.style.top = `${top}px`;
     }
 }
 
@@ -47621,7 +48308,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);
@@ -48328,7 +49015,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
+        }
     }
 
 
@@ -48375,7 +49067,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
+        }
 
     }
 
@@ -48497,38 +49194,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',
@@ -48546,7 +49293,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}`;
@@ -48558,7 +49305,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}`;
@@ -48607,7 +49354,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);
@@ -50429,7 +51176,7 @@ class RemoteFile {
 
         let url = this.url.slice();    // slice => copy
         if (this.config.oauthToken) {
-            const token = resolveToken(this.config.oauthToken);
+            const token = await resolveToken(this.config.oauthToken);
             headers['Authorization'] = `Bearer ${token}`;
         }
 
@@ -55194,7 +55941,7 @@ function create_nested_array(value, shape) {
 async function openH5File(options) {
 
     // Some clients (notably igv-webapp) pass a File reference in the url field.  Fix this
-    if(options.url && isBlobLike(options.url)) {
+    if (options.url && isBlobLike(options.url)) {
         options.file = options.url;
         options.url = undefined;
     }
@@ -55224,26 +55971,30 @@ async function openH5File(options) {
 
 async function readExternalIndex(options) {
 
-    let indexReader;
-    if(options.indexReader) {
-        indexReader = options.indexReader;
-    }
-    else if(options.index) {
+    if (options.index) {
         return options.index
-    } else if (options.indexURL) {
-        indexReader = new RemoteFile({url: options.indexURL});
-    } else if (options.indexPath) {
-        indexReader = new NodeLocalFile({path: options.indexPath});
-    } else if (options.indexFile) {
-        indexReader = new BlobFile({file: options.indexFile});
-    }
-    if (indexReader) {
+    } else {
+        let indexReader;
+        if (options.indexReader) {
+            indexReader = options.indexReader;
+        } else {
+            let indexOptions;
+            if (options.indexURL) {
+                indexOptions = Object.assign({url: options.indexURL}, options);
+            } else if (options.indexPath) {
+                indexOptions = Object.assign({path: options.indexPath}, options);
+            } else if (options.indexFile) {
+                indexOptions = Object.assign({file: options.indexFile}, options);
+            } else {
+                return undefined
+            }
+            indexReader = getReaderFor(indexOptions);
+        }
         const indexFileContents = await indexReader.read();
         const indexFileJson = new TextDecoder().decode(indexFileContents);
         return JSON.parse(indexFileJson)
-    } else {
-        return undefined
     }
+
 }
 
 
@@ -55321,9 +56072,9 @@ class HDF5Reader {
      * @param {string} h5_file - path for the pytor file
      * @param {integer} bin_size - bin size
      */
-    constructor(h5_file, bin_size=100000){
+    constructor(config, bin_size=100000){
 
-        this.h5_file = h5_file;
+        this.config = config;
         this.bin_size = bin_size;
         this.h5_obj = undefined;
         this.pytorKeys = [];
@@ -55333,11 +56084,8 @@ class HDF5Reader {
     async fetch(){
 
         if(!this.h5_obj) {
-            this.h5_obj = await openH5File({
-                url: this.h5_file,
-                fetchSize: 1000000,
-                maxSize: 200000000
-            });
+            const options = Object.assign(this.config,  {fetchSize: 1000000, maxSize: 200000000});
+            this.h5_obj = await openH5File(options);
         }
         return this.h5_obj
     }
@@ -64373,7 +65121,7 @@ class CNVPytorTrack extends TrackBase {
             this.set_available_callers();
 
         } else {
-            this.cnvpytor_obj = new HDF5Reader(this.config.url, this.bin_size);
+            this.cnvpytor_obj = new HDF5Reader(this.config, this.bin_size);
             // get chrom list that currently user viewing
             let chroms = [ ...new Set(this.browser.referenceFrameList.map(val => val.chr))];
             
@@ -69361,6 +70109,23 @@ class ReferenceFrame {
         return this.genome.getChromosome(this.chr)
     }
 
+    /**
+     * Update reference frame based on new viewport width
+     * @param {number} viewportWidth - The calculated viewport width
+     */
+    updateForViewportWidth(viewportWidth) {
+        const {chr} = this;
+        const {bpLength} = this.getChromosome();
+        const viewportWidthBP = this.toBP(viewportWidth);
+
+        // viewportWidthBP > bpLength occurs when locus is full chromosome and user widens browser
+        if (GenomeUtils.isWholeGenomeView(chr) || viewportWidthBP > bpLength) {
+            this.bpPerPixel = bpLength / viewportWidth;
+        } else {
+            this.end = this.start + this.toBP(viewportWidth);
+        }
+    }
+
     getMultiLocusLabelBPLengthOnly(pixels) {
         const margin = '&nbsp';
         const ss = Math.floor(this.start) + 1;
@@ -69446,7 +70211,7 @@ function createReferenceFrameList(loci, genome, browserFlanking, minimumBases, v
     })
 }
 
-const _version = "3.2.5";
+const _version = "3.3.0";
 function version() {
     return _version
 }
@@ -69490,10 +70255,24 @@ class ChromosomeSelectWidget {
         this.select.setAttribute('name', 'chromosome-select-widget');
         this.container.appendChild(this.select);
 
-        this.select.addEventListener('change', () => {
+        this.select.addEventListener('change', async () => {
             this.select.blur();
             if (this.select.value !== '' && maximumSequenceCountExceeded !== this.select.value) {
-                browser.search(this.select.value);
+
+                if (this.select.value.trim().toLowerCase() === "all" || this.select.value === "*") {
+                    if (browser.genome.wholeGenomeView) {
+                        const wgChr = browser.genome.getChromosome("all");
+                        return {chr: "all", start: 0, end: wgChr.bpLength}
+                    }
+                } else {
+                    const chromosome = await browser.genome.loadChromosome(this.select.value);
+                    const locusObject = {chr: chromosome.name};
+                    if (locusObject.start === undefined && locusObject.end === undefined) {
+                        locusObject.start = 0;
+                        locusObject.end = chromosome.bpLength;
+                    }
+                    browser.updateLoci([locusObject]);
+                }
             }
         });
 
@@ -69518,7 +70297,9 @@ class ChromosomeSelectWidget {
         this.genome = genome;
 
         // Start with explicit chromosome name list
-        const list = genome.wgChromosomeNames.map(nm => genome.getChromosomeDisplayName(nm)) || [];
+        const list = (genome.wgChromosomeNames) ?
+            genome.wgChromosomeNames.map(nm => genome.getChromosomeDisplayName(nm)) :
+            [];
 
         if (this.showAllChromosomes && genome.chromosomeNames.length > 1) {
             const exclude = new Set(list);
@@ -70744,7 +71525,7 @@ class ResponsiveNavbar {
         });
 
         this.searchInput.addEventListener('change', () => {
-            browser.doSearch(this.searchInput.value);
+            this.doSearch(this.searchInput.value);
         });
 
         const searchIconContainer = document.createElement('div');
@@ -70755,7 +71536,7 @@ class ResponsiveNavbar {
         searchIconContainer.appendChild(searchIcon);
 
         searchIconContainer.addEventListener('click', () => {
-            browser.doSearch(this.searchInput.value);
+            this.doSearch(this.searchInput.value);
         });
 
         this.windowSizePanel = new WindowSizePanel(locusSizeGroup, browser);
@@ -70903,6 +71684,22 @@ class ResponsiveNavbar {
         this.navigation.style.display = 'flex';
     }
 
+    /**
+
+     * Search for the locus string -- this function is called from the navbar search box, and is not part of the API.
+     * Wraps ```search``` and presents an error dialog if false.
+     *
+     * @param locus
+     * @param init
+     * @returns {Promise<void>}
+     */
+    async doSearch(locus) {
+        const success = await this.browser.search(locus);
+        if (!success) {
+            this.browser.alert.present(new Error(`Unrecognized locus: <b> ${locus} </b>`));
+        }
+    }
+
 }
 
 function logo() {
@@ -72154,6 +72951,9 @@ class ChromAliasDefaults {
                 aliasRecord["_cap"] = cap;
             }
 
+            const chrPrefixAlias = aliasRecord.chr.startsWith("chr") ? aliasRecord.chr.substring(3) : "chr" + aliasRecord.chr;
+            aliasRecord["_chrprefix_"] = chrPrefixAlias;
+
     }
 
 }
@@ -72178,7 +72978,7 @@ class ChromAliasBB {
     }
 
     async preload(chrNames) {
-        await this.reader.preload();
+       await this.reader.preload();
         for(let nm of chrNames) {
             await this.search(nm);
         }
@@ -72230,12 +73030,6 @@ class ChromAliasBB {
         }
         return this.aliasRecordCache.get(alias)
     }
-
-    async getChromosomeNames() {
-        await this.reader.loadHeader();
-        return Array.from(this.reader.chrNames)
-    }
-
 }
 
 /**
@@ -72260,10 +73054,9 @@ class ChromAliasFile {
         this.genome = genome;
     }
 
-    async preload() {
-        return this.loadAliases();
+    async preload(chrNames) {
+        // A no-op, this is a text file, no need to preload
     }
-
     /**
      * Return the canonical chromosome name for the alias.  If none found return the alias
      *
@@ -72429,7 +73222,7 @@ class CytobandFile {
         for (let line of lines) {
 
             const tokens = line.split("\t");
-            const chrName = tokens[0]; //genome.getChromosomeName(tokens[0])   // Note allowance for alias name, not sure why this is needed here
+            const chrName = tokens[0];
             if (!lastChr) lastChr = chrName;
 
             if (chrName !== lastChr) {
@@ -72447,37 +73240,20 @@ class CytobandFile {
                 bands.push(new Cytoband(start, end, name, stain));
             }
         }
-
-    }
-
-    /**
-     * Infer genome chromosome names from cytoband data.  This should only be used as a last resort
-     */
-    async getChromosomeNames() {
-        if(this.cytobands.size === 0) {
-            await this.#loadCytobands();
-        }
-        return Array.from(this.cytobands.keys())
-    }
-
-    /**
-     * Infer chromosome objects from cytoband data.  This should only be used as last resort.
-     */
-    async getChromosomes() {
-        if(this.cytobands.size === 0) {
-            await this.#loadCytobands();
+        if(bands.length > 0) {
+            this.cytobands.set(lastChr, bands);
         }
 
-        const chromosomes = [];
-        let order = 0;
-        for(let [chrName, cytoList] of this.cytobands.entries()) {
-            chromosomes.push(new Chromosome(chrName, order++, cytoList[cytoList.length - 1].end));
-        }
-        return chromosomes
     }
 
 }
 
+const ucsdIDMap = new Map([
+    ["1kg_ref", "hg18"],
+    ["1kg_v37", "hg19"],
+    ["b37", "hg19"]
+]);
+
 /**
  * The Genome class represents an assembly and consists of the following elements
  *   sequence - Object representing the DNA sequence
@@ -72502,8 +73278,10 @@ class Genome {
         this.config = config;
         this.browser = browser;
         this.id = config.id || generateGenomeID(config);
+        this.ucscID = config.ucscID || ucsdIDMap.get(this.id) || this.id;
+        this.blatDB = config.blatDB || this.ucscID;
         this.name = config.name;
-        this.nameSet = config.nameSet;
+        this.nameSet = config.nameSet || 'ucsc';
     }
 
 
@@ -72511,49 +73289,45 @@ class Genome {
 
         const config = this.config;
 
+        // Load sequence
         this.sequence = await loadSequence(config, this.browser);
 
-        if (config.chromSizesURL) {
-            // a chromSizes file is neccessary for 2bit sequences for whole-genome view
+
+        // Load cytobands.  This is optional but required to support the ideogram.  Only needed for whole genome view
+        if(false !== config.showIdeogram && false !== config.wholeGenomeView) {
+            if (config.cytobandURL) {
+                this.cytobandSource = new CytobandFile(config.cytobandURL, Object.assign({}, config));
+            } else if (config.cytobandBbURL) {
+                this.cytobandSource = new CytobandFileBB(config.cytobandBbURL, Object.assign({}, config), this);
+            }
+        }
+
+            // Search for chromosomes, that is an array of chromosome objects containing name and length.  This is
+            // optional but required to support whole genome view.
+        if (this.sequence.chromosomes) {
+            this.chromosomes = this.sequence.chromosomes;
+        } else if (config.chromSizesURL) {
             this.chromosomes = await loadChromSizes(config.chromSizesURL);
         } else {
-            // if the sequence defines chromosomes use them (fasta does, 2bit does not)
-            this.chromosomes = this.sequence.chromosomes || new Map();
+            this.chromosomes = new Map();   // Cache, chromosome are added as they are loaded
         }
 
-        if (this.chromosomes.size > 0) {
+        // Search for chromosome names.  This is optional but required to support the chromosome pulldown
+        if (this.sequence.chromosomeNames) {
+            this.chromosomeNames = this.sequence.chromosomeNames;    // Twobit files can supply chromosome names unless they use an external index
+        } else if (this.chromosomes.size > 0) {
             this.chromosomeNames = Array.from(this.chromosomes.keys());
         }
 
+        // Chromosome alias
         if (config.chromAliasBbURL) {
             this.chromAlias = new ChromAliasBB(config.chromAliasBbURL, Object.assign({}, config), this);
-            if (!this.chromosomeNames) {
-                this.chromosomeNames = await this.chromAlias.getChromosomeNames();
-            }
         } else if (config.aliasURL) {
             this.chromAlias = new ChromAliasFile(config.aliasURL, Object.assign({}, config), this);
         } else if (this.chromosomeNames) {
             this.chromAlias = new ChromAliasDefaults(this.id, this.chromosomeNames);
         }
 
-        if (config.cytobandBbURL) {
-            this.cytobandSource = new CytobandFileBB(config.cytobandBbURL, Object.assign({}, config), this);
-        } else if (config.cytobandURL) {
-            this.cytobandSource = new CytobandFile(config.cytobandURL, Object.assign({}, config));
-        }
-
-        // Last resort for chromosome information -- retrieve it from the cytoband source if supported
-        if (!this.chromosomeNames && typeof this.cytobandSource.getChromosomeNames === 'function') {
-            this.chromosomeNames = await this.cytobandSource.getChromosomeNames();
-        }
-        if (this.chromosomes.size === 0 && typeof this.cytobandSource.getChromosomes === 'function') {
-            const c = await this.cytobandSource.getChromosomes();
-            for (let chromosome of c) {
-                this.chromosomes.set(c.name, c);
-            }
-        }
-
-
         if (false !== config.wholeGenomeView && this.chromosomes.size > 0) {
             // Set chromosome order for WG view and chromosome pulldown.  If chromosome order is not specified sort
             if (config.chromosomeOrder) {
@@ -72605,9 +73379,9 @@ class Genome {
     getHomeChromosomeName() {
         if (this.showWholeGenomeView() && this.chromosomes.has("all")) {
             return "all"
-        } else {
+        } else if (this.chromosomeNames) {
             return this.chromosomeNames[0]
-        }
+        } else ;
     }
 
     getChromosomeName(chr) {
@@ -72658,18 +73432,18 @@ class Genome {
             if (!aliasRecord && chr !== chr.toLowerCase()) {
                 aliasRecord = await this.chromAlias.search(chr.toLowerCase());
             }
-            if(aliasRecord) {
+            if (aliasRecord) {
                 // Add some aliases for case insensitivy
                 const upper = aliasRecord.chr.toUpperCase();
                 const lower = aliasRecord.chr.toLowerCase();
                 const cap = aliasRecord.chr.charAt(0).toUpperCase() + aliasRecord.chr.slice(1);
-                if(aliasRecord.chr !== upper) {
+                if (aliasRecord.chr !== upper) {
                     aliasRecord["_uppercase"] = upper;
                 }
-                if(aliasRecord.chr !== lower) {
+                if (aliasRecord.chr !== lower) {
                     aliasRecord["_lowercase"] = lower;
                 }
-                if(aliasRecord.chr !== cap) {
+                if (aliasRecord.chr !== cap) {
                     aliasRecord["_cap"] = cap;
                 }
             }
@@ -72801,6 +73575,10 @@ class Genome {
             return undefined
         }
     }
+
+    getHubURLs() {
+        return this.config.hubs
+    }
 }
 
 /**
@@ -72843,7 +73621,7 @@ function generateGenomeID(config) {
     }
 }
 
-var igvCss = '.igv-ui-dropdown {\n  cursor: default;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 2048;\n  border-color: #7F7F7F;\n  border-style: solid;\n  border-width: 1px;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: small;\n  font-weight: 400;\n  background-color: white;\n}\n.igv-ui-dropdown > div {\n  overflow-y: auto;\n  overflow-x: hidden;\n  background-color: white;\n}\n.igv-ui-dropdown > div > div {\n  padding: 4px;\n  width: 100%;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  border-bottom-color: #7F7F7F;\n  border-bottom-style: solid;\n  border-bottom-width: 1px;\n  background-color: white;\n}\n.igv-ui-dropdown > div > div:last-child {\n  border-bottom-color: transparent;\n  border-bottom-width: 0;\n}\n.igv-ui-dropdown > div > div:hover {\n  cursor: pointer;\n  background-color: rgba(0, 0, 0, 0.04);\n}\n\n.igv-ui-popover {\n  cursor: default;\n  position: absolute;\n  z-index: 2048;\n  border-color: #7F7F7F;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: 1px;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: small;\n  background-color: white;\n}\n.igv-ui-popover > div:first-child {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  height: 24px;\n  cursor: move;\n  border-top-width: 0;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-bottom-color: #7F7F7F;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  background-color: #eee;\n}\n.igv-ui-popover > div:first-child > div:first-child {\n  margin-left: 4px;\n}\n.igv-ui-popover > div:first-child > div:last-child {\n  margin-right: 4px;\n  height: 12px;\n  width: 12px;\n  color: #7F7F7F;\n}\n.igv-ui-popover > div:first-child > div:last-child:hover {\n  cursor: pointer;\n  color: #444;\n}\n.igv-ui-popover > div:last-child {\n  user-select: text;\n  overflow-y: auto;\n  overflow-x: hidden;\n  max-height: 400px;\n  max-width: 800px;\n  background-color: white;\n  border-bottom-width: 0;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n}\n.igv-ui-popover > div:last-child > div {\n  margin-left: 4px;\n  margin-right: 4px;\n  min-width: 220px;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.igv-ui-popover > div:last-child > div > span {\n  font-weight: bolder;\n}\n.igv-ui-popover > div:last-child hr {\n  width: 100%;\n}\n\n.igv-ui-alert-dialog-container {\n  position: fixed;\n  top: 20%;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 2048;\n  box-sizing: content-box;\n  width: 400px;\n  height: 200px;\n  border-color: #7F7F7F;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: thin;\n  outline: none;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 15px;\n  font-weight: 400;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n}\n.igv-ui-alert-dialog-container > div:first-child {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  width: 100%;\n  height: 24px;\n  cursor: move;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-bottom-color: #7F7F7F;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  background-color: #eee;\n}\n.igv-ui-alert-dialog-container > div:first-child div:first-child {\n  padding-left: 8px;\n}\n.igv-ui-alert-dialog-container .igv-ui-alert-dialog-body {\n  -webkit-user-select: text;\n  -moz-user-select: text;\n  -ms-user-select: text;\n  user-select: text;\n  color: #373737;\n  width: 100%;\n  height: calc(100% - 24px - 64px);\n  overflow-y: scroll;\n}\n.igv-ui-alert-dialog-container .igv-ui-alert-dialog-body .igv-ui-alert-dialog-body-copy {\n  margin: 16px;\n  width: auto;\n  height: auto;\n  overflow-wrap: break-word;\n  word-break: break-word;\n  background-color: white;\n  border: unset;\n}\n.igv-ui-alert-dialog-container > div:last-child {\n  width: 100%;\n  margin-bottom: 10px;\n  background-color: white;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: center;\n  align-items: center;\n}\n.igv-ui-alert-dialog-container > div:last-child div {\n  margin: unset;\n  width: 40px;\n  height: 30px;\n  line-height: 30px;\n  text-align: center;\n  color: white;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: small;\n  font-weight: 400;\n  border-color: #2B81AF;\n  border-style: solid;\n  border-width: thin;\n  border-radius: 4px;\n  background-color: #2B81AF;\n}\n.igv-ui-alert-dialog-container > div:last-child div:hover {\n  cursor: pointer;\n  border-color: #25597f;\n  background-color: #25597f;\n}\n\n.igv-ui-generic-dialog-container {\n  box-sizing: content-box;\n  position: fixed;\n  top: 20%;\n  left: 75%;\n  transform: translateX(-50%);\n  z-index: 2048;\n  background-color: white;\n  cursor: pointer;\n  width: 300px;\n  height: fit-content;\n  padding-bottom: 16px;\n  border-color: #7F7F7F;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-ui-generic-dialog-container .igv-ui-generic-dialog-header {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n  width: 100%;\n  height: 24px;\n  cursor: move;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-bottom-color: #7F7F7F;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  background-color: #eee;\n}\n.igv-ui-generic-dialog-container .igv-ui-generic-dialog-header div {\n  margin-right: 4px;\n  margin-bottom: 2px;\n  height: 12px;\n  width: 12px;\n  color: #7F7F7F;\n}\n.igv-ui-generic-dialog-container .igv-ui-generic-dialog-header div:hover {\n  cursor: pointer;\n  color: #444;\n}\n.igv-ui-generic-dialog-container .igv-ui-generic-dialog-one-liner {\n  color: #373737;\n  width: 95%;\n  line-height: 24px;\n  text-align: left;\n  margin-top: 8px;\n  padding-left: 8px;\n  overflow-wrap: break-word;\n  background-color: white;\n}\n.igv-ui-generic-dialog-container .igv-ui-generic-dialog-label-input {\n  margin-top: 8px;\n  width: 95%;\n  height: 24px;\n  color: #373737;\n  line-height: 24px;\n  padding-left: 8px;\n  background-color: white;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-ui-generic-dialog-container .igv-ui-generic-dialog-label-input > div {\n  width: fit-content;\n  height: 100%;\n  font-size: 16px;\n  text-align: right;\n  padding-right: 8px;\n  background-color: white;\n}\n.igv-ui-generic-dialog-container .igv-ui-generic-dialog-label-input input {\n  display: block;\n  height: 100%;\n  width: 100%;\n  padding-left: 4px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n  color: #373737;\n  text-align: left;\n  outline: none;\n  border-style: solid;\n  border-width: thin;\n  border-color: #7F7F7F;\n  background-color: white;\n}\n.igv-ui-generic-dialog-container .igv-ui-generic-dialog-label-input input {\n  width: 50%;\n  font-size: 16px;\n}\n.igv-ui-generic-dialog-container .igv-ui-generic-dialog-input {\n  margin-top: 8px;\n  width: calc(100% - 16px);\n  height: 24px;\n  color: #373737;\n  line-height: 24px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n}\n.igv-ui-generic-dialog-container .igv-ui-generic-dialog-input input {\n  display: block;\n  height: 100%;\n  width: 100%;\n  padding-left: 4px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n  color: #373737;\n  text-align: left;\n  outline: none;\n  border-style: solid;\n  border-width: thin;\n  border-color: #7F7F7F;\n  background-color: white;\n}\n.igv-ui-generic-dialog-container .igv-ui-generic-dialog-input input {\n  font-size: 16px;\n}\n.igv-ui-generic-dialog-container .igv-ui-generic-dialog-input input[type=range] {\n  width: 70%;\n  -webkit-appearance: none;\n  background: linear-gradient(90deg, white, black);\n  outline: none;\n  margin: 0;\n}\n.igv-ui-generic-dialog-container .igv-ui-generic-dialog-input output {\n  display: block;\n  height: 100%;\n  width: 20%;\n  font-size: 16px;\n}\n.igv-ui-generic-dialog-container .igv-ui-generic-dialog-ok-cancel {\n  width: 100%;\n  height: 28px;\n  padding-top: 16px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n}\n.igv-ui-generic-dialog-container .igv-ui-generic-dialog-ok-cancel > div {\n  color: white;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  width: 75px;\n  height: 28px;\n  line-height: 28px;\n  text-align: center;\n  border-color: transparent;\n  border-style: solid;\n  border-width: thin;\n  border-radius: 2px;\n}\n.igv-ui-generic-dialog-container .igv-ui-generic-dialog-ok-cancel > div:first-child {\n  margin-left: 32px;\n  margin-right: 0;\n  background-color: #5ea4e0;\n}\n.igv-ui-generic-dialog-container .igv-ui-generic-dialog-ok-cancel > div:last-child {\n  margin-left: 0;\n  margin-right: 32px;\n  background-color: #c4c4c4;\n}\n.igv-ui-generic-dialog-container .igv-ui-generic-dialog-ok-cancel > div:first-child:hover {\n  cursor: pointer;\n  background-color: #3b5c7f;\n}\n.igv-ui-generic-dialog-container .igv-ui-generic-dialog-ok-cancel > div:last-child:hover {\n  cursor: pointer;\n  background-color: #7f7f7f;\n}\n\n.igv-ui-generic-container {\n  position: fixed;\n  cursor: pointer;\n  background-color: white;\n  z-index: 2048;\n  box-sizing: content-box;\n  width: 300px;\n  height: 200px;\n  top: 20%;\n  left: 75%;\n  transform: translateX(-50%);\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-ui-generic-container > div:nth-child(1) {\n  cursor: move;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n  height: 24px;\n  width: 100%;\n  background-color: #dddddd;\n}\n.igv-ui-generic-container > div:nth-child(1) > div {\n  display: block;\n  color: #5f5f5f;\n  cursor: pointer;\n  width: 14px;\n  height: 14px;\n  margin-right: 8px;\n  margin-bottom: 4px;\n}\n\n.igv-ui-colorpicker-container {\n  background-color: #eee;\n  height: fit-content;\n  flex-direction: column;\n  flex-wrap: nowrap;\n}\n.igv-ui-colorpicker-container > div:nth-child(2) {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-ui-colorpicker-container > div:nth-child(3) {\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  padding: 0.5rem;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 1rem;\n  font-weight: 400;\n  width: 100%;\n  border-top-style: solid;\n  border-top-width: thin;\n  border-top-color: #373737;\n}\n.igv-ui-colorpicker-container > div:nth-child(4) {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n\n.igv-ui-color-swatch {\n  position: relative;\n  box-sizing: content-box;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  margin: 2px;\n  width: 32px;\n  height: 32px;\n  border-style: solid;\n  border-width: 0;\n  border-color: white;\n  border-radius: 3px;\n}\n\n.igv-ui-color-swatch-shim {\n  cursor: pointer;\n  position: relative;\n  box-sizing: content-box;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  width: 32px;\n  height: 32px;\n  background-color: white;\n  border-style: solid;\n  border-width: thin;\n  border-color: white;\n  border-radius: 4px;\n}\n\n.igv-ui-dialog {\n  z-index: 2048;\n  position: fixed;\n  width: fit-content;\n  height: fit-content;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  background-color: white;\n  border-color: #7F7F7F;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n}\n.igv-ui-dialog .igv-ui-dialog-header {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n  width: 100%;\n  height: 24px;\n  cursor: move;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-bottom-color: #7F7F7F;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  background-color: #eee;\n}\n.igv-ui-dialog .igv-ui-dialog-header div {\n  margin-right: 4px;\n  margin-bottom: 2px;\n  height: 12px;\n  width: 12px;\n  color: #7F7F7F;\n}\n.igv-ui-dialog .igv-ui-dialog-header div:hover {\n  cursor: pointer;\n  color: #444;\n}\n.igv-ui-dialog .igv-ui-dialog-one-liner {\n  width: 95%;\n  height: 24px;\n  line-height: 24px;\n  text-align: left;\n  margin: 8px;\n  overflow-wrap: break-word;\n  background-color: white;\n  font-weight: bold;\n}\n.igv-ui-dialog .igv-ui-dialog-ok-cancel {\n  width: 100%;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n}\n.igv-ui-dialog .igv-ui-dialog-ok-cancel div {\n  margin: 16px;\n  margin-top: 32px;\n  color: white;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  width: 75px;\n  height: 28px;\n  line-height: 28px;\n  text-align: center;\n  border-color: transparent;\n  border-style: solid;\n  border-width: thin;\n  border-radius: 2px;\n}\n.igv-ui-dialog .igv-ui-dialog-ok-cancel div:first-child {\n  background-color: #5ea4e0;\n}\n.igv-ui-dialog .igv-ui-dialog-ok-cancel div:last-child {\n  background-color: #c4c4c4;\n}\n.igv-ui-dialog .igv-ui-dialog-ok-cancel div:first-child:hover {\n  cursor: pointer;\n  background-color: #3b5c7f;\n}\n.igv-ui-dialog .igv-ui-dialog-ok-cancel div:last-child:hover {\n  cursor: pointer;\n  background-color: #7f7f7f;\n}\n.igv-ui-dialog .igv-ui-dialog-ok {\n  width: 100%;\n  height: 36px;\n  margin-top: 32px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n}\n.igv-ui-dialog .igv-ui-dialog-ok div {\n  width: 98px;\n  height: 36px;\n  line-height: 36px;\n  text-align: center;\n  color: white;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  border-color: white;\n  border-style: solid;\n  border-width: thin;\n  border-radius: 4px;\n  background-color: #2B81AF;\n}\n.igv-ui-dialog .igv-ui-dialog-ok div:hover {\n  cursor: pointer;\n  background-color: #25597f;\n}\n\n.igv-ui-panel, .igv-ui-panel-row, .igv-ui-panel-column {\n  z-index: 2048;\n  background-color: white;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n\n.igv-ui-panel-column {\n  display: flex;\n  flex-direction: column;\n}\n\n.igv-ui-panel-row {\n  display: flex;\n  flex-direction: row;\n}\n\n.igv-ui-textbox {\n  background-color: white;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n\n.igv-ui-table {\n  background-color: white;\n}\n\n.igv-ui-table thead {\n  position: sticky;\n  top: 0;\n}\n\n.igv-ui-table th {\n  text-align: left;\n}\n\n.igv-ui-table td {\n  padding-right: 20px;\n}\n\n.igv-ui-table tr:hover {\n  background-color: lightblue;\n}\n\n.igv-ui-center-fixed {\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.igv-navbar {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  box-sizing: border-box;\n  width: 100%;\n  color: #444;\n  font-size: 12px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n  line-height: 32px;\n  padding-left: 8px;\n  padding-right: 8px;\n  margin-top: 2px;\n  margin-bottom: 6px;\n  height: 32px;\n  border-style: solid;\n  border-radius: 3px;\n  border-width: thin;\n  border-color: #bfbfbf;\n  background-color: #f3f3f3;\n}\n.igv-navbar .igv-navbar-left-container {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  height: 32px;\n  line-height: 32px;\n}\n.igv-navbar .igv-navbar-left-container .igv-logo {\n  width: 34px;\n  height: 32px;\n  margin-right: 8px;\n}\n.igv-navbar .igv-navbar-left-container .igv-current-genome {\n  height: 32px;\n  margin-left: 4px;\n  margin-right: 4px;\n  user-select: none;\n  line-height: 32px;\n  vertical-align: middle;\n  text-align: center;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  height: 100%;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-chromosome-select-widget-container {\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n  height: 100%;\n  width: 125px;\n  margin-right: 4px;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-chromosome-select-widget-container select {\n  display: block;\n  cursor: pointer;\n  width: 100px;\n  height: 75%;\n  outline: none;\n  font-size: 12px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-locus-size-group {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  margin-left: 8px;\n  height: 22px;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-locus-size-group .igv-search-container {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  width: 240px;\n  height: 22px;\n  line-height: 22px;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-locus-size-group .igv-search-container input.igv-search-input {\n  cursor: text;\n  width: 85%;\n  height: 22px;\n  line-height: 22px;\n  font-size: 12px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n  text-align: left;\n  padding-left: 8px;\n  margin-right: 8px;\n  outline: none;\n  border-style: solid;\n  border-radius: 3px;\n  border-width: thin;\n  border-color: #bfbfbf;\n  background-color: white;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-locus-size-group .igv-search-container .igv-search-icon-container {\n  cursor: pointer;\n  height: 16px;\n  width: 16px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: center;\n  align-items: center;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-locus-size-group .igv-windowsize-panel-container {\n  margin-left: 4px;\n  user-select: none;\n}\n.igv-navbar .igv-navbar-right-container {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n}\n.igv-navbar .igv-navbar-right-container .igv-navbar-toggle-button-container {\n  position: relative;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n}\n.igv-navbar .igv-navbar-right-container .igv-navbar-toggle-button-container-hidden {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  height: 100%;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget {\n  color: #737373;\n  font-size: 18px;\n  margin-left: 8px;\n  user-select: none;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget div {\n  cursor: pointer;\n  margin-left: unset;\n  margin-right: unset;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget div:first-child {\n  height: 20px;\n  width: 20px;\n  margin-left: unset;\n  margin-right: 4px;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget div:last-child {\n  height: 20px;\n  width: 20px;\n  margin-left: 4px;\n  margin-right: unset;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget div:nth-child(even) {\n  display: block;\n  height: fit-content;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget input {\n  display: block;\n  width: 125px;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget svg {\n  display: block;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 {\n  color: #737373;\n  font-size: 18px;\n  height: 32px;\n  line-height: 32px;\n  margin-left: 8px;\n  user-select: none;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 div {\n  cursor: pointer;\n  margin-left: unset;\n  margin-right: unset;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 div:first-child {\n  height: 20px;\n  width: 20px;\n  margin-left: unset;\n  margin-right: 4px;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 div:last-child {\n  height: 20px;\n  width: 20px;\n  margin-left: 4px;\n  margin-right: unset;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 div:nth-child(even) {\n  width: 0;\n  height: 0;\n  display: none;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 input {\n  width: 0;\n  height: 0;\n  display: none;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 svg {\n  display: block;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-hidden {\n  display: none;\n}\n\n.igv-navbar-button {\n  display: block;\n  box-sizing: unset;\n  padding-left: 6px;\n  padding-right: 6px;\n  height: 18px;\n  text-transform: capitalize;\n  user-select: none;\n  line-height: 18px;\n  text-align: center;\n  vertical-align: middle;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 11px;\n  font-weight: 200;\n  color: #737373;\n  background-color: #f3f3f3;\n  border-color: #737373;\n  border-style: solid;\n  border-width: thin;\n  border-radius: 6px;\n}\n\n.igv-navbar-button:hover {\n  cursor: pointer;\n}\n\n.igv-navbar-button-clicked {\n  color: white;\n  background-color: #737373;\n}\n\n.igv-navbar-icon-button {\n  cursor: pointer;\n  position: relative;\n  width: 24px;\n  height: 24px;\n  margin-left: 4px;\n  margin-right: 4px;\n  border: none;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n}\n.igv-navbar-icon-button > div:first-child {\n  z-index: 512;\n  position: absolute;\n  top: 36px;\n  left: -18px;\n  width: 24px;\n  height: 24px;\n  border: none;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n}\n.igv-navbar-icon-button > div:last-child {\n  z-index: 512;\n  position: absolute;\n  top: 36px;\n  left: 18px;\n  width: 24px;\n  height: 24px;\n  border: none;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n}\n\n.igv-navbar-text-button {\n  cursor: pointer;\n  position: relative;\n  margin-left: 2px;\n  margin-right: 2px;\n  border: none;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.igv-navbar-text-button > div:nth-child(2) {\n  z-index: 512;\n  position: absolute;\n  top: 36px;\n  left: 0;\n  width: 38px;\n  height: 18px;\n  border: none;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n}\n.igv-navbar-text-button > div:nth-child(3) {\n  z-index: 512;\n  position: absolute;\n  top: 36px;\n  left: 42px;\n  width: 38px;\n  height: 18px;\n  border: none;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n}\n\n#igv-text-button-label {\n  text-anchor: middle;\n  dominant-baseline: middle;\n}\n\n.igv-navbar-text-button-svg-inactive rect {\n  stroke: #737373;\n  fill: white;\n}\n.igv-navbar-text-button-svg-inactive text {\n  fill: #737373;\n}\n.igv-navbar-text-button-svg-inactive tspan {\n  dominant-baseline: middle;\n}\n\n.igv-navbar-text-button-svg-hover rect {\n  stroke: #737373;\n  fill: #737373;\n}\n.igv-navbar-text-button-svg-hover text {\n  fill: white;\n}\n.igv-navbar-text-button-svg-hover tspan {\n  dominant-baseline: middle;\n}\n\n#igv-save-svg-group rect {\n  stroke: #737373;\n  fill: white;\n}\n#igv-save-svg-group text {\n  fill: #737373;\n}\n\n#igv-save-svg-group:hover rect {\n  stroke: #737373;\n  fill: #737373;\n}\n#igv-save-svg-group:hover text {\n  fill: white;\n}\n\n#igv-save-png-group rect {\n  stroke: #737373;\n  fill: white;\n}\n#igv-save-png-group text {\n  fill: #737373;\n}\n\n#igv-save-png-group:hover rect {\n  stroke: #737373;\n  fill: #737373;\n}\n#igv-save-png-group:hover text {\n  fill: white;\n}\n\n.igv-zoom-in-notice-container {\n  z-index: 256;\n  position: absolute;\n  top: 8px;\n  left: 50%;\n  transform: translate(-50%, 0%);\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: center;\n  align-items: center;\n  background-color: white;\n}\n.igv-zoom-in-notice-container > div {\n  padding-left: 4px;\n  padding-right: 4px;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  width: 100%;\n  height: 100%;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  color: #3f3f3f;\n}\n\n.igv-zoom-in-notice {\n  position: absolute;\n  top: 10px;\n  left: 50%;\n}\n.igv-zoom-in-notice div {\n  position: relative;\n  left: -50%;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  color: #3f3f3f;\n  background-color: rgba(255, 255, 255, 0.51);\n  z-index: 64;\n}\n\n.igv-container-spinner {\n  position: absolute;\n  top: 90%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 1024;\n  width: 24px;\n  height: 24px;\n  pointer-events: none;\n  color: #737373;\n}\n\n.igv-multi-locus-close-button {\n  position: absolute;\n  top: 2px;\n  right: 0;\n  padding-left: 2px;\n  padding-right: 2px;\n  width: 12px;\n  height: 12px;\n  color: #666666;\n  background-color: white;\n  z-index: 1000;\n}\n.igv-multi-locus-close-button > svg {\n  vertical-align: top;\n}\n\n.igv-multi-locus-close-button:hover {\n  cursor: pointer;\n  color: #434343;\n}\n\n.igv-multi-locus-ruler-label {\n  z-index: 64;\n  position: absolute;\n  top: 2px;\n  left: 0;\n  width: 100%;\n  height: 12px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: center;\n  align-items: center;\n}\n.igv-multi-locus-ruler-label > div {\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 12px;\n  color: rgb(16, 16, 16);\n  background-color: white;\n}\n.igv-multi-locus-ruler-label > div {\n  cursor: pointer;\n}\n\n.igv-multi-locus-ruler-label-square-dot {\n  z-index: 64;\n  position: absolute;\n  left: 50%;\n  top: 5%;\n  transform: translate(-50%, 0%);\n  background-color: white;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-multi-locus-ruler-label-square-dot > div:first-child {\n  width: 14px;\n  height: 14px;\n}\n.igv-multi-locus-ruler-label-square-dot > div:last-child {\n  margin-left: 16px;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  color: rgb(16, 16, 16);\n}\n\n.igv-ruler-sweeper {\n  display: none;\n  pointer-events: none;\n  position: absolute;\n  top: 26px;\n  bottom: 0;\n  left: 0;\n  width: 0;\n  z-index: 99999;\n  background-color: rgba(68, 134, 247, 0.25);\n}\n\n.igv-ruler-tooltip {\n  pointer-events: none;\n  z-index: 128;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 1px;\n  height: 32px;\n  background-color: transparent;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-ruler-tooltip > div {\n  pointer-events: none;\n  width: 128px;\n  height: auto;\n  padding: 1px;\n  color: #373737;\n  font-size: 10px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n  background-color: white;\n  border-style: solid;\n  border-width: thin;\n  border-color: #373737;\n}\n\n.igv-track-label {\n  position: absolute;\n  left: 8px;\n  top: 8px;\n  width: auto;\n  height: auto;\n  max-width: 50%;\n  padding-left: 4px;\n  padding-right: 4px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: small;\n  font-weight: 400;\n  text-align: center;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-select: none;\n  border-color: #444;\n  border-radius: 2px;\n  border-style: solid;\n  border-width: thin;\n  background-color: white;\n  z-index: 128;\n  cursor: pointer;\n}\n\n.igv-track-label:hover,\n.igv-track-label:focus,\n.igv-track-label:active {\n  background-color: #e8e8e8;\n}\n\n.igv-track-label-popup-shim {\n  padding-left: 8px;\n  padding-right: 8px;\n  padding-top: 4px;\n}\n\n.igv-center-line {\n  display: none;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 8;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-select: none;\n  border-left-style: dashed;\n  border-left-width: thin;\n  border-right-style: dashed;\n  border-right-width: thin;\n}\n\n.igv-center-line-wide {\n  background-color: rgba(0, 0, 0, 0);\n  border-left-color: rgba(127, 127, 127, 0.51);\n  border-right-color: rgba(127, 127, 127, 0.51);\n}\n\n.igv-center-line-thin {\n  background-color: rgba(0, 0, 0, 0);\n  border-left-color: rgba(127, 127, 127, 0.51);\n  border-right-color: rgba(0, 0, 0, 0);\n}\n\n.igv-cursor-guide-horizontal {\n  display: none;\n  pointer-events: none;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-select: none;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 50%;\n  height: 1px;\n  z-index: 32;\n  margin-left: 50px;\n  margin-right: 54px;\n  border-top-style: dotted;\n  border-top-width: thin;\n  border-top-color: rgba(127, 127, 127, 0.76);\n}\n\n.igv-cursor-guide-vertical {\n  pointer-events: none;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-select: none;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 50%;\n  width: 1px;\n  z-index: 32;\n  border-left-style: dotted;\n  border-left-width: thin;\n  border-left-color: rgba(127, 127, 127, 0.76);\n  display: none;\n}\n\n.igv-user-feedback {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 512px;\n  height: 360px;\n  z-index: 2048;\n  background-color: white;\n  border-color: #a2a2a2;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  color: #444;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-user-feedback div:first-child {\n  position: relative;\n  height: 24px;\n  width: 100%;\n  background-color: white;\n  border-bottom-color: #a2a2a2;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n}\n.igv-user-feedback div:first-child div {\n  position: absolute;\n  top: 2px;\n  width: 16px;\n  height: 16px;\n  background-color: transparent;\n}\n.igv-user-feedback div:first-child div:first-child {\n  left: 8px;\n}\n.igv-user-feedback div:first-child div:last-child {\n  cursor: pointer;\n  right: 8px;\n}\n.igv-user-feedback div:last-child {\n  width: 100%;\n  height: calc(100% - 24px);\n  border-width: 0;\n}\n.igv-user-feedback div:last-child div {\n  width: auto;\n  height: auto;\n  margin: 8px;\n}\n\n.igv-generic-dialog-container {\n  position: fixed;\n  top: 20%;\n  left: 75%;\n  transform: translateX(-50%);\n  width: 300px;\n  height: 200px;\n  border-color: #7F7F7F;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  z-index: 2048;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-generic-dialog-container .igv-generic-dialog-header {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n  width: 100%;\n  height: 24px;\n  cursor: move;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-bottom-color: #7F7F7F;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  background-color: #eee;\n}\n.igv-generic-dialog-container .igv-generic-dialog-header div {\n  margin-right: 4px;\n  margin-bottom: 2px;\n  height: 12px;\n  width: 12px;\n  color: #7F7F7F;\n}\n.igv-generic-dialog-container .igv-generic-dialog-header div:hover {\n  cursor: pointer;\n  color: #444;\n}\n.igv-generic-dialog-container .igv-generic-dialog-one-liner {\n  color: #373737;\n  width: 95%;\n  height: 24px;\n  line-height: 24px;\n  text-align: left;\n  margin-top: 8px;\n  padding-left: 8px;\n  overflow-wrap: break-word;\n  background-color: white;\n}\n.igv-generic-dialog-container .igv-generic-dialog-label-input {\n  margin-top: 8px;\n  width: 95%;\n  height: 24px;\n  color: #373737;\n  line-height: 24px;\n  padding-left: 8px;\n  background-color: white;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-generic-dialog-container .igv-generic-dialog-label-input div {\n  width: 30%;\n  height: 100%;\n  font-size: 16px;\n  text-align: right;\n  padding-right: 8px;\n  background-color: white;\n}\n.igv-generic-dialog-container .igv-generic-dialog-label-input input {\n  display: block;\n  height: 100%;\n  width: 100%;\n  padding-left: 4px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n  color: #373737;\n  text-align: left;\n  outline: none;\n  border-style: solid;\n  border-width: thin;\n  border-color: #7F7F7F;\n  background-color: white;\n}\n.igv-generic-dialog-container .igv-generic-dialog-label-input input {\n  width: 50%;\n  font-size: 16px;\n}\n.igv-generic-dialog-container .igv-generic-dialog-input {\n  margin-top: 8px;\n  width: calc(100% - 16px);\n  height: 24px;\n  color: #373737;\n  line-height: 24px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n}\n.igv-generic-dialog-container .igv-generic-dialog-input input {\n  display: block;\n  height: 100%;\n  width: 100%;\n  padding-left: 4px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n  color: #373737;\n  text-align: left;\n  outline: none;\n  border-style: solid;\n  border-width: thin;\n  border-color: #7F7F7F;\n  background-color: white;\n}\n.igv-generic-dialog-container .igv-generic-dialog-input input {\n  font-size: 16px;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok-cancel {\n  width: 100%;\n  height: 28px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok-cancel div {\n  margin-top: 32px;\n  color: white;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  width: 75px;\n  height: 28px;\n  line-height: 28px;\n  text-align: center;\n  border-color: transparent;\n  border-style: solid;\n  border-width: thin;\n  border-radius: 2px;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok-cancel div:first-child {\n  margin-left: 32px;\n  margin-right: 0;\n  background-color: #5ea4e0;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok-cancel div:last-child {\n  margin-left: 0;\n  margin-right: 32px;\n  background-color: #c4c4c4;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok-cancel div:first-child:hover {\n  cursor: pointer;\n  background-color: #3b5c7f;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok-cancel div:last-child:hover {\n  cursor: pointer;\n  background-color: #7f7f7f;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok {\n  width: 100%;\n  height: 36px;\n  margin-top: 32px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok div {\n  width: 98px;\n  height: 36px;\n  line-height: 36px;\n  text-align: center;\n  color: white;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  border-color: white;\n  border-style: solid;\n  border-width: thin;\n  border-radius: 4px;\n  background-color: #2B81AF;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok div:hover {\n  cursor: pointer;\n  background-color: #25597f;\n}\n\n.igv-generic-container {\n  position: fixed;\n  top: 20%;\n  left: 75%;\n  transform: translateX(-50%);\n  z-index: 2048;\n  background-color: white;\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-generic-container > div:nth-child(1) {\n  cursor: move;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n  height: 24px;\n  width: 100%;\n  background-color: #dddddd;\n}\n.igv-generic-container > div:nth-child(1) i {\n  display: block;\n  color: #5f5f5f;\n  cursor: pointer;\n  width: 14px;\n  height: 14px;\n  margin-right: 8px;\n  margin-bottom: 4px;\n}\n\n.igv-menu-popup {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: max-content;\n  max-width: 400px;\n  z-index: 512;\n  cursor: pointer;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: small;\n  font-weight: 400;\n  color: #4b4b4b;\n  background: white;\n  border-radius: 4px;\n  border-color: #7F7F7F;\n  border-style: solid;\n  border-width: thin;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-end;\n  text-align: left;\n}\n.igv-menu-popup > div:not(:first-child) {\n  width: 100%;\n}\n.igv-menu-popup > div:not(:first-child) > div {\n  background: white;\n}\n.igv-menu-popup > div:not(:first-child) > div.context-menu {\n  padding-left: 4px;\n  padding-right: 4px;\n}\n.igv-menu-popup > div:not(:first-child) > div:last-child {\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-bottom-color: transparent;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n}\n.igv-menu-popup > div:not(:first-child) > div:hover {\n  background: #efefef;\n}\n\n.igv-menu-popup-shim {\n  padding-left: 8px;\n  padding-right: 8px;\n  padding-bottom: 1px;\n  padding-top: 1px;\n}\n\n.igv-menu-popup-header {\n  position: relative;\n  width: 100%;\n  height: 24px;\n  cursor: move;\n  border-top-color: transparent;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-bottom-color: #7F7F7F;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  background-color: #eee;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n}\n.igv-menu-popup-header div {\n  margin-right: 4px;\n  height: 12px;\n  width: 12px;\n  color: #7F7F7F;\n}\n.igv-menu-popup-header div:hover {\n  cursor: pointer;\n  color: #444;\n}\n\n.igv-menu-popup-check-container {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  width: 100%;\n  height: 20px;\n  margin-right: 4px;\n  background-color: transparent;\n}\n.igv-menu-popup-check-container div {\n  padding-top: 2px;\n  padding-left: 8px;\n}\n.igv-menu-popup-check-container div:first-child {\n  position: relative;\n  width: 12px;\n  height: 12px;\n}\n.igv-menu-popup-check-container div:first-child svg {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n}\n\n.igv-user-feedback {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 512px;\n  height: 360px;\n  z-index: 2048;\n  background-color: white;\n  border-color: #a2a2a2;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  color: #444;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-user-feedback div:first-child {\n  position: relative;\n  height: 24px;\n  width: 100%;\n  background-color: white;\n  border-bottom-color: #a2a2a2;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n}\n.igv-user-feedback div:first-child div {\n  position: absolute;\n  top: 2px;\n  width: 16px;\n  height: 16px;\n  background-color: transparent;\n}\n.igv-user-feedback div:first-child div:first-child {\n  left: 8px;\n}\n.igv-user-feedback div:first-child div:last-child {\n  cursor: pointer;\n  right: 8px;\n}\n.igv-user-feedback div:last-child {\n  width: 100%;\n  height: calc(100% - 24px);\n  border-width: 0;\n}\n.igv-user-feedback div:last-child div {\n  width: auto;\n  height: auto;\n  margin: 8px;\n}\n\n.igv-loading-spinner-container {\n  z-index: 1024;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 32px;\n  height: 32px;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: center;\n  align-items: center;\n}\n.igv-loading-spinner-container > div {\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  border: 4px solid rgba(128, 128, 128, 0.5);\n  border-top-color: rgb(255, 255, 255);\n  animation: spin 1s ease-in-out infinite;\n  -webkit-animation: spin 1s ease-in-out infinite;\n}\n\n@keyframes spin {\n  to {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n@-webkit-keyframes spin {\n  to {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n.igv-roi-menu {\n  position: absolute;\n  z-index: 512;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: small;\n  font-weight: 400;\n  color: #4b4b4b;\n  background-color: white;\n  width: 192px;\n  border-radius: 4px;\n  border-color: #7F7F7F;\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: stretch;\n}\n.igv-roi-menu > div:first-child {\n  height: 24px;\n  border-top-color: transparent;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-bottom-color: #7F7F7F;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  background-color: #eee;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n}\n.igv-roi-menu > div:first-child > div {\n  margin-right: 4px;\n  height: 12px;\n  width: 12px;\n  color: #7F7F7F;\n}\n.igv-roi-menu > div:first-child > div:hover {\n  cursor: pointer;\n  color: #444;\n}\n.igv-roi-menu > div:last-child {\n  background-color: white;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-bottom-color: transparent;\n  border-bottom-style: solid;\n  border-bottom-width: 0;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n  text-align: start;\n  vertical-align: middle;\n}\n.igv-roi-menu > div:last-child > div {\n  height: 24px;\n  padding-left: 4px;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  border-bottom-color: #7f7f7f;\n}\n.igv-roi-menu > div:last-child > div:not(:first-child):hover {\n  cursor: pointer;\n  background-color: rgba(127, 127, 127, 0.1);\n}\n.igv-roi-menu > div:last-child div:first-child {\n  font-style: italic;\n  text-align: center;\n  padding-right: 4px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.igv-roi-menu > div:last-child > div:last-child {\n  border-bottom-width: 0;\n  border-bottom-color: transparent;\n}\n\n.igv-roi-placeholder {\n  font-style: normal;\n  color: rgba(75, 75, 75, 0.6);\n}\n\n.igv-roi-table {\n  position: absolute;\n  z-index: 1024;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n  resize: both;\n  overflow: hidden;\n  width: min-content;\n  max-width: 1600px;\n  border-color: #7f7f7f;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  background-color: white;\n  cursor: default;\n}\n.igv-roi-table > div {\n  height: 24px;\n  font-size: 14px;\n  text-align: start;\n  vertical-align: middle;\n  line-height: 24px;\n}\n.igv-roi-table > div:first-child {\n  border-color: transparent;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-top-width: 0;\n  border-bottom-color: #7f7f7f;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  background-color: #eee;\n  cursor: move;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n}\n.igv-roi-table > div:first-child > div:first-child {\n  text-align: center;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  margin-left: 4px;\n  margin-right: 4px;\n  width: calc(100% - 4px - 12px);\n}\n.igv-roi-table > div:first-child > div:last-child {\n  margin-right: 4px;\n  margin-bottom: 2px;\n  height: 12px;\n  width: 12px;\n  color: #7f7f7f;\n}\n.igv-roi-table > div:first-child > div:last-child > svg {\n  display: block;\n}\n.igv-roi-table > div:first-child > div:last-child:hover {\n  cursor: pointer;\n  color: #444;\n}\n.igv-roi-table > .igv-roi-table-description {\n  padding: 4px;\n  margin-left: 4px;\n  word-break: break-all;\n  overflow-y: auto;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  background-color: transparent;\n}\n.igv-roi-table > .igv-roi-table-goto-explainer {\n  margin-top: 5px;\n  margin-left: 4px;\n  color: #7F7F7F;\n  font-style: italic;\n  height: 24px;\n  border-top: solid lightgray;\n  background-color: transparent;\n}\n.igv-roi-table > .igv-roi-table-column-titles {\n  height: 24px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: stretch;\n  align-items: stretch;\n  padding-right: 16px;\n  background-color: white;\n  border-top-color: #7f7f7f;\n  border-top-style: solid;\n  border-top-width: thin;\n  border-bottom-color: #7f7f7f;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n}\n.igv-roi-table > .igv-roi-table-column-titles > div {\n  font-size: 14px;\n  vertical-align: middle;\n  line-height: 24px;\n  text-align: left;\n  margin-left: 4px;\n  height: 24px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  border-right-color: #7f7f7f;\n  border-right-style: solid;\n  border-right-width: thin;\n}\n.igv-roi-table > .igv-roi-table-column-titles > div:last-child {\n  border-right: unset;\n}\n.igv-roi-table > .igv-roi-table-row-container {\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n  overflow: auto;\n  height: 360px;\n  flex: 1 1 auto;\n  background-color: transparent;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row {\n  height: 24px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: stretch;\n  align-items: stretch;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row > div {\n  font-size: 14px;\n  vertical-align: middle;\n  line-height: 24px;\n  text-align: left;\n  margin-left: 4px;\n  height: 24px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  border-right-color: transparent;\n  border-right-style: solid;\n  border-right-width: thin;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row > div:last-child {\n  border-right: unset;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row-hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.igv-roi-table > div:last-child {\n  min-height: 32px;\n  height: 32px;\n  line-height: 32px;\n  border-top-color: #7f7f7f;\n  border-top-style: solid;\n  border-top-width: thin;\n  border-bottom-color: transparent;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-bottom-width: 0;\n  background-color: #eee;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n}\n\n.igv-roi-table-row-selected {\n  background-color: rgba(0, 0, 0, 0.125);\n}\n\n.igv-roi-table-button {\n  cursor: pointer;\n  height: 20px;\n  user-select: none;\n  line-height: 20px;\n  text-align: center;\n  vertical-align: middle;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 13px;\n  font-weight: 400;\n  color: black;\n  padding-left: 6px;\n  padding-right: 6px;\n  background-color: rgb(239, 239, 239);\n  border-color: black;\n  border-style: solid;\n  border-width: thin;\n  border-radius: 3px;\n}\n\n.igv-roi-table-button:hover {\n  font-weight: 400;\n  background-color: rgba(0, 0, 0, 0.13);\n}\n\n.igv-roi-region {\n  z-index: 64;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  pointer-events: none;\n  overflow: visible;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.igv-roi-region > div {\n  position: relative;\n  width: 100%;\n  height: 8px;\n  pointer-events: auto;\n}\n\n.igv-roi-menu-row {\n  height: 24px;\n  padding-left: 8px;\n  font-size: small;\n  text-align: start;\n  vertical-align: middle;\n  line-height: 24px;\n  background-color: white;\n}\n\n.igv-roi-menu-row-edit-description {\n  width: -webkit-fill-available;\n  font-size: small;\n  text-align: start;\n  vertical-align: middle;\n  background-color: white;\n  padding-left: 4px;\n  padding-right: 4px;\n  padding-bottom: 4px;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: stretch;\n  align-items: stretch;\n}\n.igv-roi-menu-row-edit-description > label {\n  margin-left: 2px;\n  margin-bottom: 0;\n  display: block;\n  width: -webkit-fill-available;\n}\n.igv-roi-menu-row-edit-description > input {\n  display: block;\n  margin-left: 2px;\n  margin-right: 2px;\n  margin-bottom: 1px;\n  width: -webkit-fill-available;\n}\n\n.picker_wrapper.no_alpha .picker_alpha {\n  display: none;\n}\n\n.picker_wrapper.no_editor .picker_editor {\n  position: absolute;\n  z-index: -1;\n  opacity: 0;\n}\n\n.picker_wrapper.no_cancel .picker_cancel {\n  display: none;\n}\n\n.layout_default.picker_wrapper {\n  display: flex;\n  flex-flow: row wrap;\n  justify-content: space-between;\n  align-items: stretch;\n  font-size: 10px;\n  width: 25em;\n  padding: 0.5em;\n}\n\n.layout_default.picker_wrapper input, .layout_default.picker_wrapper button {\n  font-size: 1rem;\n}\n\n.layout_default.picker_wrapper > * {\n  margin: 0.5em;\n}\n\n.layout_default.picker_wrapper::before {\n  content: \"\";\n  display: block;\n  width: 100%;\n  height: 0;\n  order: 1;\n}\n\n.layout_default .picker_slider, .layout_default .picker_selector {\n  padding: 1em;\n}\n\n.layout_default .picker_hue {\n  width: 100%;\n}\n\n.layout_default .picker_sl {\n  flex: 1 1 auto;\n}\n\n.layout_default .picker_sl::before {\n  content: \"\";\n  display: block;\n  padding-bottom: 100%;\n}\n\n.layout_default .picker_editor {\n  order: 1;\n  width: 6.5rem;\n}\n\n.layout_default .picker_editor input {\n  width: 100%;\n  height: 100%;\n}\n\n.layout_default .picker_sample {\n  order: 1;\n  flex: 1 1 auto;\n}\n\n.layout_default .picker_done, .layout_default .picker_cancel {\n  order: 1;\n}\n\n.picker_wrapper {\n  box-sizing: border-box;\n  background: #f2f2f2;\n  box-shadow: 0 0 0 1px silver;\n  cursor: default;\n  font-family: sans-serif;\n  color: #444;\n  pointer-events: auto;\n}\n\n.picker_wrapper:focus {\n  outline: none;\n}\n\n.picker_wrapper button, .picker_wrapper input {\n  box-sizing: border-box;\n  border: none;\n  box-shadow: 0 0 0 1px silver;\n  outline: none;\n}\n\n.picker_wrapper button:focus, .picker_wrapper button:active, .picker_wrapper input:focus, .picker_wrapper input:active {\n  box-shadow: 0 0 2px 1px #1e90ff;\n}\n\n.picker_wrapper button {\n  padding: 0.4em 0.6em;\n  cursor: pointer;\n  background-color: #f5f5f5;\n  background-image: linear-gradient(0deg, gainsboro, transparent);\n}\n\n.picker_wrapper button:active {\n  background-image: linear-gradient(0deg, transparent, gainsboro);\n}\n\n.picker_wrapper button:hover {\n  background-color: #fff;\n}\n\n.picker_selector {\n  position: absolute;\n  z-index: 1;\n  display: block;\n  -webkit-transform: translate(-50%, -50%);\n  transform: translate(-50%, -50%);\n  border: 2px solid #fff;\n  border-radius: 100%;\n  box-shadow: 0 0 3px 1px #67b9ff;\n  background: currentColor;\n  cursor: pointer;\n}\n\n.picker_slider .picker_selector {\n  border-radius: 2px;\n}\n\n.picker_hue {\n  position: relative;\n  background-image: linear-gradient(90deg, red, yellow, lime, cyan, blue, magenta, red);\n  box-shadow: 0 0 0 1px silver;\n}\n\n.picker_sl {\n  position: relative;\n  box-shadow: 0 0 0 1px silver;\n  background-image: linear-gradient(180deg, white, rgba(255, 255, 255, 0) 50%), linear-gradient(0deg, black, rgba(0, 0, 0, 0) 50%), linear-gradient(90deg, #808080, rgba(128, 128, 128, 0));\n}\n\n.picker_alpha, .picker_sample {\n  position: relative;\n  background: linear-gradient(45deg, lightgrey 25%, transparent 25%, transparent 75%, lightgrey 75%) 0 0/2em 2em, linear-gradient(45deg, lightgrey 25%, white 25%, white 75%, lightgrey 75%) 1em 1em/2em 2em;\n  box-shadow: 0 0 0 1px silver;\n}\n\n.picker_alpha .picker_selector, .picker_sample .picker_selector {\n  background: none;\n}\n\n.picker_editor input {\n  font-family: monospace;\n  padding: 0.2em 0.4em;\n}\n\n.picker_sample::before {\n  content: \"\";\n  position: absolute;\n  display: block;\n  width: 100%;\n  height: 100%;\n  background: currentColor;\n}\n\n.picker_arrow {\n  position: absolute;\n  z-index: -1;\n}\n\n.picker_wrapper.popup {\n  position: absolute;\n  z-index: 2;\n  margin: 1.5em;\n}\n\n.picker_wrapper.popup, .picker_wrapper.popup .picker_arrow::before, .picker_wrapper.popup .picker_arrow::after {\n  background: #f2f2f2;\n  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.4);\n}\n\n.picker_wrapper.popup .picker_arrow {\n  width: 3em;\n  height: 3em;\n  margin: 0;\n}\n\n.picker_wrapper.popup .picker_arrow::before, .picker_wrapper.popup .picker_arrow::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: -99;\n}\n\n.picker_wrapper.popup .picker_arrow::before {\n  width: 100%;\n  height: 100%;\n  -webkit-transform: skew(45deg);\n  transform: skew(45deg);\n  -webkit-transform-origin: 0 100%;\n  transform-origin: 0 100%;\n}\n\n.picker_wrapper.popup .picker_arrow::after {\n  width: 150%;\n  height: 150%;\n  box-shadow: none;\n}\n\n.popup.popup_top {\n  bottom: 100%;\n  left: 0;\n}\n\n.popup.popup_top .picker_arrow {\n  bottom: 0;\n  left: 0;\n  -webkit-transform: rotate(-90deg);\n  transform: rotate(-90deg);\n}\n\n.popup.popup_bottom {\n  top: 100%;\n  left: 0;\n}\n\n.popup.popup_bottom .picker_arrow {\n  top: 0;\n  left: 0;\n  -webkit-transform: rotate(90deg) scale(1, -1);\n  transform: rotate(90deg) scale(1, -1);\n}\n\n.popup.popup_left {\n  top: 0;\n  right: 100%;\n}\n\n.popup.popup_left .picker_arrow {\n  top: 0;\n  right: 0;\n  -webkit-transform: scale(-1, 1);\n  transform: scale(-1, 1);\n}\n\n.popup.popup_right {\n  top: 0;\n  left: 100%;\n}\n\n.popup.popup_right .picker_arrow {\n  top: 0;\n  left: 0;\n}\n\n.igv-container {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  padding-top: 4px;\n  user-select: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n  min-height: 160px;\n}\n\n.igv-viewport {\n  position: relative;\n  margin-top: 5px;\n  line-height: 1;\n  overflow-x: hidden;\n  overflow-y: hidden;\n}\n\n.igv-viewport-content {\n  position: relative;\n  width: 100%;\n}\n.igv-viewport-content > canvas {\n  position: relative;\n  display: block;\n}\n\n.igv-column-container {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n  width: 100%;\n}\n\n.igv-column-shim {\n  width: 1px;\n  margin-left: 2px;\n  margin-right: 2px;\n  background-color: #545453;\n}\n\n.igv-axis-column {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  box-sizing: border-box;\n  height: 100%;\n  width: 50px;\n}\n.igv-axis-column > div {\n  position: relative;\n  margin-top: 5px;\n  width: 100%;\n}\n.igv-axis-column > div > div {\n  z-index: 512;\n  position: absolute;\n  top: 8px;\n  left: 8px;\n  width: fit-content;\n  height: fit-content;\n  background-color: transparent;\n  display: grid;\n  align-items: start;\n  justify-items: center;\n}\n.igv-axis-column > div > div > input {\n  display: block;\n  margin: unset;\n  cursor: pointer;\n}\n\n.igv-column {\n  position: relative;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  box-sizing: border-box;\n  height: 100%;\n}\n\n.igv-sample-info-column {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  box-sizing: border-box;\n  height: 100%;\n}\n\n.igv-sample-name-column {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  box-sizing: border-box;\n  height: 100%;\n}\n\n.igv-scrollbar-column {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  box-sizing: border-box;\n  height: 100%;\n  width: 14px;\n}\n.igv-scrollbar-column > div {\n  position: relative;\n  margin-top: 5px;\n  width: 14px;\n}\n.igv-scrollbar-column > div > div {\n  cursor: pointer;\n  position: absolute;\n  top: 0;\n  left: 2px;\n  width: 8px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #c4c4c4;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n}\n.igv-scrollbar-column > div > div:hover {\n  background-color: #c4c4c4;\n}\n\n.igv-track-drag-column {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  box-sizing: border-box;\n  height: 100%;\n  width: 12px;\n  background-color: white;\n}\n.igv-track-drag-column > .igv-track-drag-handle {\n  z-index: 512;\n  position: relative;\n  cursor: pointer;\n  margin-top: 5px;\n  width: 100%;\n  border-style: solid;\n  border-width: 0;\n  border-top-right-radius: 6px;\n  border-bottom-right-radius: 6px;\n}\n.igv-track-drag-column .igv-track-drag-handle-color {\n  background-color: #c4c4c4;\n}\n.igv-track-drag-column .igv-track-drag-handle-hover-color {\n  background-color: #787878;\n}\n.igv-track-drag-column .igv-track-drag-handle-selected-color {\n  background-color: #0963fa;\n}\n.igv-track-drag-column > .igv-track-drag-shim {\n  position: relative;\n  margin-top: 5px;\n  width: 100%;\n  border-style: solid;\n  border-width: 0;\n}\n\n.igv-gear-menu-column {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  box-sizing: border-box;\n  height: 100%;\n  width: 28px;\n}\n.igv-gear-menu-column > div {\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  margin-top: 5px;\n  width: 100%;\n  background: white;\n}\n.igv-gear-menu-column > div > div {\n  position: relative;\n  margin-top: 4px;\n  width: 16px;\n  height: 16px;\n  color: #7F7F7F;\n}\n.igv-gear-menu-column > div > div:hover {\n  cursor: pointer;\n  color: #444;\n}\n\n.igv-vertical-center {\n  margin: 0 !important;\n  top: 50% !important;\n  -ms-transform: translateY(-50%) !important;\n  transform: translateY(-50%) !important;\n}\n\n/*# sourceMappingURL=igv.css.map */\n';
+var igvCss = '.igv-ui-dropdown {\n  cursor: default;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 2048;\n  border-color: #7F7F7F;\n  border-style: solid;\n  border-width: 1px;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: small;\n  font-weight: 400;\n  background-color: white;\n}\n.igv-ui-dropdown > div {\n  overflow-y: auto;\n  overflow-x: hidden;\n  background-color: white;\n}\n.igv-ui-dropdown > div > div {\n  padding: 4px;\n  width: 100%;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  border-bottom-color: #7F7F7F;\n  border-bottom-style: solid;\n  border-bottom-width: 1px;\n  background-color: white;\n}\n.igv-ui-dropdown > div > div:last-child {\n  border-bottom-color: transparent;\n  border-bottom-width: 0;\n}\n.igv-ui-dropdown > div > div:hover {\n  cursor: pointer;\n  background-color: rgba(0, 0, 0, 0.04);\n}\n\n.igv-ui-popover {\n  cursor: default;\n  position: absolute;\n  z-index: 2048;\n  border-color: #7F7F7F;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: 1px;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: small;\n  background-color: white;\n}\n.igv-ui-popover > div:first-child {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  height: 24px;\n  cursor: move;\n  border-top-width: 0;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-bottom-color: #7F7F7F;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  background-color: #eee;\n}\n.igv-ui-popover > div:first-child > div:first-child {\n  margin-left: 4px;\n}\n.igv-ui-popover > div:first-child > div:last-child {\n  margin-right: 4px;\n  height: 12px;\n  width: 12px;\n  color: #7F7F7F;\n}\n.igv-ui-popover > div:first-child > div:last-child:hover {\n  cursor: pointer;\n  color: #444;\n}\n.igv-ui-popover > div:last-child {\n  user-select: text;\n  overflow-y: auto;\n  overflow-x: hidden;\n  max-height: 400px;\n  max-width: 800px;\n  background-color: white;\n  border-bottom-width: 0;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n}\n.igv-ui-popover > div:last-child > div {\n  margin-left: 4px;\n  margin-right: 4px;\n  min-width: 220px;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.igv-ui-popover > div:last-child > div > span {\n  font-weight: bolder;\n}\n.igv-ui-popover > div:last-child hr {\n  width: 100%;\n}\n\n.igv-ui-alert-dialog-container {\n  position: fixed;\n  top: 20%;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 2048;\n  box-sizing: content-box;\n  width: 400px;\n  height: 200px;\n  border-color: #7F7F7F;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: thin;\n  outline: none;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 15px;\n  font-weight: 400;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n}\n.igv-ui-alert-dialog-container > div:first-child {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  width: 100%;\n  height: 24px;\n  cursor: move;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-bottom-color: #7F7F7F;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  background-color: #eee;\n}\n.igv-ui-alert-dialog-container > div:first-child div:first-child {\n  padding-left: 8px;\n}\n.igv-ui-alert-dialog-container .igv-ui-alert-dialog-body {\n  -webkit-user-select: text;\n  -moz-user-select: text;\n  -ms-user-select: text;\n  user-select: text;\n  color: #373737;\n  width: 100%;\n  height: calc(100% - 24px - 64px);\n  overflow-y: scroll;\n}\n.igv-ui-alert-dialog-container .igv-ui-alert-dialog-body .igv-ui-alert-dialog-body-copy {\n  margin: 16px;\n  width: auto;\n  height: auto;\n  overflow-wrap: break-word;\n  word-break: break-word;\n  background-color: white;\n  border: unset;\n}\n.igv-ui-alert-dialog-container > div:last-child {\n  width: 100%;\n  margin-bottom: 10px;\n  background-color: white;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: center;\n  align-items: center;\n}\n.igv-ui-alert-dialog-container > div:last-child div {\n  margin: unset;\n  width: 40px;\n  height: 30px;\n  line-height: 30px;\n  text-align: center;\n  color: white;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: small;\n  font-weight: 400;\n  border-color: #2B81AF;\n  border-style: solid;\n  border-width: thin;\n  border-radius: 4px;\n  background-color: #2B81AF;\n}\n.igv-ui-alert-dialog-container > div:last-child div:hover {\n  cursor: pointer;\n  border-color: #25597f;\n  background-color: #25597f;\n}\n\n.igv-ui-generic-dialog-container {\n  box-sizing: content-box;\n  position: fixed;\n  top: 20%;\n  left: 75%;\n  transform: translateX(-50%);\n  z-index: 2048;\n  background-color: white;\n  cursor: pointer;\n  width: 300px;\n  height: fit-content;\n  padding-bottom: 16px;\n  border-color: #7F7F7F;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-ui-generic-dialog-container .igv-ui-generic-dialog-header {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n  width: 100%;\n  height: 24px;\n  cursor: move;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-bottom-color: #7F7F7F;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  background-color: #eee;\n}\n.igv-ui-generic-dialog-container .igv-ui-generic-dialog-header div {\n  margin-right: 4px;\n  margin-bottom: 2px;\n  height: 12px;\n  width: 12px;\n  color: #7F7F7F;\n}\n.igv-ui-generic-dialog-container .igv-ui-generic-dialog-header div:hover {\n  cursor: pointer;\n  color: #444;\n}\n.igv-ui-generic-dialog-container .igv-ui-generic-dialog-one-liner {\n  color: #373737;\n  width: 95%;\n  line-height: 24px;\n  text-align: left;\n  margin-top: 8px;\n  padding-left: 8px;\n  overflow-wrap: break-word;\n  background-color: white;\n}\n.igv-ui-generic-dialog-container .igv-ui-generic-dialog-label-input {\n  margin-top: 8px;\n  width: 95%;\n  height: 24px;\n  color: #373737;\n  line-height: 24px;\n  padding-left: 8px;\n  background-color: white;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-ui-generic-dialog-container .igv-ui-generic-dialog-label-input > div {\n  width: fit-content;\n  height: 100%;\n  font-size: 16px;\n  text-align: right;\n  padding-right: 8px;\n  background-color: white;\n}\n.igv-ui-generic-dialog-container .igv-ui-generic-dialog-label-input input {\n  display: block;\n  height: 100%;\n  width: 100%;\n  padding-left: 4px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n  color: #373737;\n  text-align: left;\n  outline: none;\n  border-style: solid;\n  border-width: thin;\n  border-color: #7F7F7F;\n  background-color: white;\n}\n.igv-ui-generic-dialog-container .igv-ui-generic-dialog-label-input input {\n  width: 50%;\n  font-size: 16px;\n}\n.igv-ui-generic-dialog-container .igv-ui-generic-dialog-input {\n  margin-top: 8px;\n  width: calc(100% - 16px);\n  height: 24px;\n  color: #373737;\n  line-height: 24px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n}\n.igv-ui-generic-dialog-container .igv-ui-generic-dialog-input input {\n  display: block;\n  height: 100%;\n  width: 100%;\n  padding-left: 4px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n  color: #373737;\n  text-align: left;\n  outline: none;\n  border-style: solid;\n  border-width: thin;\n  border-color: #7F7F7F;\n  background-color: white;\n}\n.igv-ui-generic-dialog-container .igv-ui-generic-dialog-input input {\n  font-size: 16px;\n}\n.igv-ui-generic-dialog-container .igv-ui-generic-dialog-input input[type=range] {\n  width: 70%;\n  -webkit-appearance: none;\n  background: linear-gradient(90deg, white, black);\n  outline: none;\n  margin: 0;\n}\n.igv-ui-generic-dialog-container .igv-ui-generic-dialog-input output {\n  display: block;\n  height: 100%;\n  width: 20%;\n  font-size: 16px;\n}\n.igv-ui-generic-dialog-container .igv-ui-generic-dialog-ok-cancel {\n  width: 100%;\n  height: 28px;\n  padding-top: 16px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n}\n.igv-ui-generic-dialog-container .igv-ui-generic-dialog-ok-cancel > div {\n  color: white;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  width: 75px;\n  height: 28px;\n  line-height: 28px;\n  text-align: center;\n  border-color: transparent;\n  border-style: solid;\n  border-width: thin;\n  border-radius: 2px;\n}\n.igv-ui-generic-dialog-container .igv-ui-generic-dialog-ok-cancel > div:first-child {\n  margin-left: 32px;\n  margin-right: 0;\n  background-color: #5ea4e0;\n}\n.igv-ui-generic-dialog-container .igv-ui-generic-dialog-ok-cancel > div:last-child {\n  margin-left: 0;\n  margin-right: 32px;\n  background-color: #c4c4c4;\n}\n.igv-ui-generic-dialog-container .igv-ui-generic-dialog-ok-cancel > div:first-child:hover {\n  cursor: pointer;\n  background-color: #3b5c7f;\n}\n.igv-ui-generic-dialog-container .igv-ui-generic-dialog-ok-cancel > div:last-child:hover {\n  cursor: pointer;\n  background-color: #7f7f7f;\n}\n\n.igv-ui-generic-container {\n  position: fixed;\n  cursor: pointer;\n  background-color: white;\n  z-index: 2048;\n  box-sizing: content-box;\n  width: 300px;\n  height: 200px;\n  top: 20%;\n  left: 75%;\n  transform: translateX(-50%);\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-ui-generic-container > div:nth-child(1) {\n  cursor: move;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n  height: 24px;\n  width: 100%;\n  background-color: #dddddd;\n}\n.igv-ui-generic-container > div:nth-child(1) > div {\n  display: block;\n  color: #5f5f5f;\n  cursor: pointer;\n  width: 14px;\n  height: 14px;\n  margin-right: 8px;\n  margin-bottom: 4px;\n}\n\n.igv-ui-colorpicker-container {\n  background-color: #eee;\n  height: fit-content;\n  flex-direction: column;\n  flex-wrap: nowrap;\n}\n.igv-ui-colorpicker-container > div:nth-child(2) {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-ui-colorpicker-container > div:nth-child(3) {\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  padding: 0.5rem;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 1rem;\n  font-weight: 400;\n  width: 100%;\n  border-top-style: solid;\n  border-top-width: thin;\n  border-top-color: #373737;\n}\n.igv-ui-colorpicker-container > div:nth-child(4) {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n\n.igv-ui-color-swatch {\n  position: relative;\n  box-sizing: content-box;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  margin: 2px;\n  width: 32px;\n  height: 32px;\n  border-style: solid;\n  border-width: 0;\n  border-color: white;\n  border-radius: 3px;\n}\n\n.igv-ui-color-swatch-shim {\n  cursor: pointer;\n  position: relative;\n  box-sizing: content-box;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  width: 32px;\n  height: 32px;\n  background-color: white;\n  border-style: solid;\n  border-width: thin;\n  border-color: white;\n  border-radius: 4px;\n}\n\n.igv-ui-dialog {\n  z-index: 2048;\n  position: fixed;\n  width: fit-content;\n  height: fit-content;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  background-color: white;\n  border-color: #7F7F7F;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n}\n.igv-ui-dialog .igv-ui-dialog-header {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n  width: 100%;\n  height: 24px;\n  cursor: move;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-bottom-color: #7F7F7F;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  background-color: #eee;\n}\n.igv-ui-dialog .igv-ui-dialog-header div {\n  margin-right: 4px;\n  margin-bottom: 2px;\n  height: 12px;\n  width: 12px;\n  color: #7F7F7F;\n}\n.igv-ui-dialog .igv-ui-dialog-header div:hover {\n  cursor: pointer;\n  color: #444;\n}\n.igv-ui-dialog .igv-ui-dialog-one-liner {\n  width: 95%;\n  height: 24px;\n  line-height: 24px;\n  text-align: left;\n  margin: 8px;\n  overflow-wrap: break-word;\n  background-color: white;\n  font-weight: bold;\n}\n.igv-ui-dialog .igv-ui-dialog-ok-cancel {\n  width: 100%;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n}\n.igv-ui-dialog .igv-ui-dialog-ok-cancel div {\n  margin: 16px;\n  margin-top: 32px;\n  color: white;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  width: 75px;\n  height: 28px;\n  line-height: 28px;\n  text-align: center;\n  border-color: transparent;\n  border-style: solid;\n  border-width: thin;\n  border-radius: 2px;\n}\n.igv-ui-dialog .igv-ui-dialog-ok-cancel div:first-child {\n  background-color: #5ea4e0;\n}\n.igv-ui-dialog .igv-ui-dialog-ok-cancel div:last-child {\n  background-color: #c4c4c4;\n}\n.igv-ui-dialog .igv-ui-dialog-ok-cancel div:first-child:hover {\n  cursor: pointer;\n  background-color: #3b5c7f;\n}\n.igv-ui-dialog .igv-ui-dialog-ok-cancel div:last-child:hover {\n  cursor: pointer;\n  background-color: #7f7f7f;\n}\n.igv-ui-dialog .igv-ui-dialog-ok {\n  width: 100%;\n  height: 36px;\n  margin-top: 32px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n}\n.igv-ui-dialog .igv-ui-dialog-ok div {\n  width: 98px;\n  height: 36px;\n  line-height: 36px;\n  text-align: center;\n  color: white;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  border-color: white;\n  border-style: solid;\n  border-width: thin;\n  border-radius: 4px;\n  background-color: #2B81AF;\n}\n.igv-ui-dialog .igv-ui-dialog-ok div:hover {\n  cursor: pointer;\n  background-color: #25597f;\n}\n\n.igv-ui-panel, .igv-ui-panel-row, .igv-ui-panel-column {\n  z-index: 2048;\n  background-color: white;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n\n.igv-ui-panel-column {\n  display: flex;\n  flex-direction: column;\n}\n\n.igv-ui-panel-row {\n  display: flex;\n  flex-direction: row;\n}\n\n.igv-ui-textbox {\n  background-color: white;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n\n.igv-ui-table {\n  background-color: white;\n}\n\n.igv-ui-table thead {\n  position: sticky;\n  top: 0;\n}\n\n.igv-ui-table th {\n  text-align: left;\n}\n\n.igv-ui-table td {\n  padding-right: 20px;\n}\n\n.igv-ui-table tr:hover {\n  background-color: lightblue;\n}\n\n.igv-ui-center-fixed {\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.igv-navbar {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  box-sizing: border-box;\n  width: 100%;\n  color: #444;\n  font-size: 12px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n  line-height: 32px;\n  padding-left: 8px;\n  padding-right: 8px;\n  margin-top: 2px;\n  margin-bottom: 6px;\n  height: 32px;\n  border-style: solid;\n  border-radius: 3px;\n  border-width: thin;\n  border-color: #bfbfbf;\n  background-color: #f3f3f3;\n}\n.igv-navbar .igv-navbar-left-container {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  height: 32px;\n  line-height: 32px;\n}\n.igv-navbar .igv-navbar-left-container .igv-logo {\n  width: 34px;\n  height: 32px;\n  margin-right: 8px;\n}\n.igv-navbar .igv-navbar-left-container .igv-current-genome {\n  height: 32px;\n  margin-left: 4px;\n  margin-right: 4px;\n  user-select: none;\n  line-height: 32px;\n  vertical-align: middle;\n  text-align: center;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  height: 100%;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-chromosome-select-widget-container {\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n  height: 100%;\n  width: 125px;\n  margin-right: 4px;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-chromosome-select-widget-container select {\n  display: block;\n  cursor: pointer;\n  width: 100px;\n  height: 75%;\n  outline: none;\n  font-size: 12px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-locus-size-group {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  margin-left: 8px;\n  height: 22px;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-locus-size-group .igv-search-container {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  width: 240px;\n  height: 22px;\n  line-height: 22px;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-locus-size-group .igv-search-container input.igv-search-input {\n  cursor: text;\n  width: 85%;\n  height: 22px;\n  line-height: 22px;\n  font-size: 12px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n  text-align: left;\n  padding-left: 8px;\n  margin-right: 8px;\n  outline: none;\n  border-style: solid;\n  border-radius: 3px;\n  border-width: thin;\n  border-color: #bfbfbf;\n  background-color: white;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-locus-size-group .igv-search-container .igv-search-icon-container {\n  cursor: pointer;\n  height: 16px;\n  width: 16px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: center;\n  align-items: center;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-locus-size-group .igv-windowsize-panel-container {\n  margin-left: 4px;\n  user-select: none;\n}\n.igv-navbar .igv-navbar-right-container {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n}\n.igv-navbar .igv-navbar-right-container .igv-navbar-toggle-button-container {\n  position: relative;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n}\n.igv-navbar .igv-navbar-right-container .igv-navbar-toggle-button-container-hidden {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  height: 100%;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget {\n  color: #737373;\n  font-size: 18px;\n  margin-left: 8px;\n  user-select: none;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget div {\n  cursor: pointer;\n  margin-left: unset;\n  margin-right: unset;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget div:first-child {\n  height: 20px;\n  width: 20px;\n  margin-left: unset;\n  margin-right: 4px;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget div:last-child {\n  height: 20px;\n  width: 20px;\n  margin-left: 4px;\n  margin-right: unset;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget div:nth-child(even) {\n  display: block;\n  height: fit-content;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget input {\n  display: block;\n  width: 125px;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget svg {\n  display: block;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 {\n  color: #737373;\n  font-size: 18px;\n  height: 32px;\n  line-height: 32px;\n  margin-left: 8px;\n  user-select: none;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 div {\n  cursor: pointer;\n  margin-left: unset;\n  margin-right: unset;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 div:first-child {\n  height: 20px;\n  width: 20px;\n  margin-left: unset;\n  margin-right: 4px;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 div:last-child {\n  height: 20px;\n  width: 20px;\n  margin-left: 4px;\n  margin-right: unset;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 div:nth-child(even) {\n  width: 0;\n  height: 0;\n  display: none;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 input {\n  width: 0;\n  height: 0;\n  display: none;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 svg {\n  display: block;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-hidden {\n  display: none;\n}\n\n.igv-navbar-button {\n  display: block;\n  box-sizing: unset;\n  padding-left: 6px;\n  padding-right: 6px;\n  height: 18px;\n  text-transform: capitalize;\n  user-select: none;\n  line-height: 18px;\n  text-align: center;\n  vertical-align: middle;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 11px;\n  font-weight: 200;\n  color: #737373;\n  background-color: #f3f3f3;\n  border-color: #737373;\n  border-style: solid;\n  border-width: thin;\n  border-radius: 6px;\n}\n\n.igv-navbar-button:hover {\n  cursor: pointer;\n}\n\n.igv-navbar-button-clicked {\n  color: white;\n  background-color: #737373;\n}\n\n.igv-navbar-icon-button {\n  cursor: pointer;\n  position: relative;\n  width: 24px;\n  height: 24px;\n  margin-left: 4px;\n  margin-right: 4px;\n  border: none;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n}\n.igv-navbar-icon-button > div:first-child {\n  z-index: 512;\n  position: absolute;\n  top: 36px;\n  left: -18px;\n  width: 24px;\n  height: 24px;\n  border: none;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n}\n.igv-navbar-icon-button > div:last-child {\n  z-index: 512;\n  position: absolute;\n  top: 36px;\n  left: 18px;\n  width: 24px;\n  height: 24px;\n  border: none;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n}\n\n.igv-navbar-text-button {\n  cursor: pointer;\n  position: relative;\n  margin-left: 2px;\n  margin-right: 2px;\n  border: none;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.igv-navbar-text-button > div:nth-child(2) {\n  z-index: 512;\n  position: absolute;\n  top: 36px;\n  left: 0;\n  width: 38px;\n  height: 18px;\n  border: none;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n}\n.igv-navbar-text-button > div:nth-child(3) {\n  z-index: 512;\n  position: absolute;\n  top: 36px;\n  left: 42px;\n  width: 38px;\n  height: 18px;\n  border: none;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n}\n\n#igv-text-button-label {\n  text-anchor: middle;\n  dominant-baseline: middle;\n}\n\n.igv-navbar-text-button-svg-inactive rect {\n  stroke: #737373;\n  fill: white;\n}\n.igv-navbar-text-button-svg-inactive text {\n  fill: #737373;\n}\n.igv-navbar-text-button-svg-inactive tspan {\n  dominant-baseline: middle;\n}\n\n.igv-navbar-text-button-svg-hover rect {\n  stroke: #737373;\n  fill: #737373;\n}\n.igv-navbar-text-button-svg-hover text {\n  fill: white;\n}\n.igv-navbar-text-button-svg-hover tspan {\n  dominant-baseline: middle;\n}\n\n#igv-save-svg-group rect {\n  stroke: #737373;\n  fill: white;\n}\n#igv-save-svg-group text {\n  fill: #737373;\n}\n\n#igv-save-svg-group:hover rect {\n  stroke: #737373;\n  fill: #737373;\n}\n#igv-save-svg-group:hover text {\n  fill: white;\n}\n\n#igv-save-png-group rect {\n  stroke: #737373;\n  fill: white;\n}\n#igv-save-png-group text {\n  fill: #737373;\n}\n\n#igv-save-png-group:hover rect {\n  stroke: #737373;\n  fill: #737373;\n}\n#igv-save-png-group:hover text {\n  fill: white;\n}\n\n.igv-zoom-in-notice-container {\n  z-index: 256;\n  position: absolute;\n  top: 8px;\n  left: 50%;\n  transform: translate(-50%, 0%);\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: center;\n  align-items: center;\n  background-color: white;\n}\n.igv-zoom-in-notice-container > div {\n  padding-left: 4px;\n  padding-right: 4px;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  width: 100%;\n  height: 100%;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  color: #3f3f3f;\n}\n\n.igv-zoom-in-notice {\n  position: absolute;\n  top: 10px;\n  left: 50%;\n}\n.igv-zoom-in-notice div {\n  position: relative;\n  left: -50%;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  color: #3f3f3f;\n  background-color: rgba(255, 255, 255, 0.51);\n  z-index: 64;\n}\n\n.igv-container-spinner {\n  position: absolute;\n  top: 90%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 1024;\n  width: 24px;\n  height: 24px;\n  pointer-events: none;\n  color: #737373;\n}\n\n.igv-multi-locus-close-button {\n  position: absolute;\n  top: 2px;\n  right: 0;\n  padding-left: 2px;\n  padding-right: 2px;\n  width: 12px;\n  height: 12px;\n  color: #666666;\n  background-color: white;\n  z-index: 1000;\n}\n.igv-multi-locus-close-button > svg {\n  vertical-align: top;\n}\n\n.igv-multi-locus-close-button:hover {\n  cursor: pointer;\n  color: #434343;\n}\n\n.igv-multi-locus-ruler-label {\n  z-index: 64;\n  position: absolute;\n  top: 2px;\n  left: 0;\n  width: 100%;\n  height: 12px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: center;\n  align-items: center;\n}\n.igv-multi-locus-ruler-label > div {\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 12px;\n  color: rgb(16, 16, 16);\n  background-color: white;\n}\n.igv-multi-locus-ruler-label > div {\n  cursor: pointer;\n}\n\n.igv-multi-locus-ruler-label-square-dot {\n  z-index: 64;\n  position: absolute;\n  left: 50%;\n  top: 5%;\n  transform: translate(-50%, 0%);\n  background-color: white;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-multi-locus-ruler-label-square-dot > div:first-child {\n  width: 14px;\n  height: 14px;\n}\n.igv-multi-locus-ruler-label-square-dot > div:last-child {\n  margin-left: 16px;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  color: rgb(16, 16, 16);\n}\n\n.igv-ruler-sweeper {\n  display: none;\n  pointer-events: none;\n  position: absolute;\n  top: 26px;\n  bottom: 0;\n  left: 0;\n  width: 0;\n  z-index: 99999;\n  background-color: rgba(68, 134, 247, 0.25);\n}\n\n.igv-ruler-tooltip {\n  pointer-events: none;\n  z-index: 128;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 1px;\n  height: 32px;\n  background-color: transparent;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-ruler-tooltip > div {\n  pointer-events: none;\n  width: 128px;\n  height: auto;\n  padding: 1px;\n  color: #373737;\n  font-size: 10px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n  background-color: white;\n  border-style: solid;\n  border-width: thin;\n  border-color: #373737;\n}\n\n.igv-track-label {\n  position: absolute;\n  left: 8px;\n  top: 8px;\n  width: auto;\n  height: auto;\n  max-width: 50%;\n  padding-left: 4px;\n  padding-right: 4px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: small;\n  font-weight: 400;\n  text-align: center;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-select: none;\n  border-color: #444;\n  border-radius: 2px;\n  border-style: solid;\n  border-width: thin;\n  background-color: white;\n  z-index: 128;\n  cursor: pointer;\n}\n\n.igv-track-label:hover,\n.igv-track-label:focus,\n.igv-track-label:active {\n  background-color: #e8e8e8;\n}\n\n.igv-track-label-popup-shim {\n  padding-left: 8px;\n  padding-right: 8px;\n  padding-top: 4px;\n}\n\n.igv-center-line {\n  display: none;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 8;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-select: none;\n  border-left-style: dashed;\n  border-left-width: thin;\n  border-right-style: dashed;\n  border-right-width: thin;\n}\n\n.igv-center-line-wide {\n  background-color: rgba(0, 0, 0, 0);\n  border-left-color: rgba(127, 127, 127, 0.51);\n  border-right-color: rgba(127, 127, 127, 0.51);\n}\n\n.igv-center-line-thin {\n  background-color: rgba(0, 0, 0, 0);\n  border-left-color: rgba(127, 127, 127, 0.51);\n  border-right-color: rgba(0, 0, 0, 0);\n}\n\n.igv-cursor-guide-horizontal {\n  display: none;\n  pointer-events: none;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-select: none;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 50%;\n  height: 1px;\n  z-index: 32;\n  margin-left: 50px;\n  margin-right: 54px;\n  border-top-style: dotted;\n  border-top-width: thin;\n  border-top-color: rgba(127, 127, 127, 0.76);\n}\n\n.igv-cursor-guide-vertical {\n  pointer-events: none;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-select: none;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 50%;\n  width: 1px;\n  z-index: 32;\n  border-left-style: dotted;\n  border-left-width: thin;\n  border-left-color: rgba(127, 127, 127, 0.76);\n  display: none;\n}\n\n.igv-user-feedback {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 512px;\n  height: 360px;\n  z-index: 2048;\n  background-color: white;\n  border-color: #a2a2a2;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  color: #444;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-user-feedback div:first-child {\n  position: relative;\n  height: 24px;\n  width: 100%;\n  background-color: white;\n  border-bottom-color: #a2a2a2;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n}\n.igv-user-feedback div:first-child div {\n  position: absolute;\n  top: 2px;\n  width: 16px;\n  height: 16px;\n  background-color: transparent;\n}\n.igv-user-feedback div:first-child div:first-child {\n  left: 8px;\n}\n.igv-user-feedback div:first-child div:last-child {\n  cursor: pointer;\n  right: 8px;\n}\n.igv-user-feedback div:last-child {\n  width: 100%;\n  height: calc(100% - 24px);\n  border-width: 0;\n}\n.igv-user-feedback div:last-child div {\n  width: auto;\n  height: auto;\n  margin: 8px;\n}\n\n.igv-generic-dialog-container {\n  position: fixed;\n  top: 20%;\n  left: 75%;\n  transform: translateX(-50%);\n  width: 300px;\n  height: 200px;\n  border-color: #7F7F7F;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  z-index: 2048;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-generic-dialog-container .igv-generic-dialog-header {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n  width: 100%;\n  height: 24px;\n  cursor: move;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-bottom-color: #7F7F7F;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  background-color: #eee;\n}\n.igv-generic-dialog-container .igv-generic-dialog-header div {\n  margin-right: 4px;\n  margin-bottom: 2px;\n  height: 12px;\n  width: 12px;\n  color: #7F7F7F;\n}\n.igv-generic-dialog-container .igv-generic-dialog-header div:hover {\n  cursor: pointer;\n  color: #444;\n}\n.igv-generic-dialog-container .igv-generic-dialog-one-liner {\n  color: #373737;\n  width: 95%;\n  height: 24px;\n  line-height: 24px;\n  text-align: left;\n  margin-top: 8px;\n  padding-left: 8px;\n  overflow-wrap: break-word;\n  background-color: white;\n}\n.igv-generic-dialog-container .igv-generic-dialog-label-input {\n  margin-top: 8px;\n  width: 95%;\n  height: 24px;\n  color: #373737;\n  line-height: 24px;\n  padding-left: 8px;\n  background-color: white;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-generic-dialog-container .igv-generic-dialog-label-input div {\n  width: 30%;\n  height: 100%;\n  font-size: 16px;\n  text-align: right;\n  padding-right: 8px;\n  background-color: white;\n}\n.igv-generic-dialog-container .igv-generic-dialog-label-input input {\n  display: block;\n  height: 100%;\n  width: 100%;\n  padding-left: 4px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n  color: #373737;\n  text-align: left;\n  outline: none;\n  border-style: solid;\n  border-width: thin;\n  border-color: #7F7F7F;\n  background-color: white;\n}\n.igv-generic-dialog-container .igv-generic-dialog-label-input input {\n  width: 50%;\n  font-size: 16px;\n}\n.igv-generic-dialog-container .igv-generic-dialog-input {\n  margin-top: 8px;\n  width: calc(100% - 16px);\n  height: 24px;\n  color: #373737;\n  line-height: 24px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n}\n.igv-generic-dialog-container .igv-generic-dialog-input input {\n  display: block;\n  height: 100%;\n  width: 100%;\n  padding-left: 4px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n  color: #373737;\n  text-align: left;\n  outline: none;\n  border-style: solid;\n  border-width: thin;\n  border-color: #7F7F7F;\n  background-color: white;\n}\n.igv-generic-dialog-container .igv-generic-dialog-input input {\n  font-size: 16px;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok-cancel {\n  width: 100%;\n  height: 28px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok-cancel div {\n  margin-top: 32px;\n  color: white;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  width: 75px;\n  height: 28px;\n  line-height: 28px;\n  text-align: center;\n  border-color: transparent;\n  border-style: solid;\n  border-width: thin;\n  border-radius: 2px;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok-cancel div:first-child {\n  margin-left: 32px;\n  margin-right: 0;\n  background-color: #5ea4e0;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok-cancel div:last-child {\n  margin-left: 0;\n  margin-right: 32px;\n  background-color: #c4c4c4;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok-cancel div:first-child:hover {\n  cursor: pointer;\n  background-color: #3b5c7f;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok-cancel div:last-child:hover {\n  cursor: pointer;\n  background-color: #7f7f7f;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok {\n  width: 100%;\n  height: 36px;\n  margin-top: 32px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok div {\n  width: 98px;\n  height: 36px;\n  line-height: 36px;\n  text-align: center;\n  color: white;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  border-color: white;\n  border-style: solid;\n  border-width: thin;\n  border-radius: 4px;\n  background-color: #2B81AF;\n}\n.igv-generic-dialog-container .igv-generic-dialog-ok div:hover {\n  cursor: pointer;\n  background-color: #25597f;\n}\n\n.igv-generic-container {\n  position: fixed;\n  top: 20%;\n  left: 75%;\n  transform: translateX(-50%);\n  z-index: 2048;\n  background-color: white;\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-generic-container > div:nth-child(1) {\n  cursor: move;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n  height: 24px;\n  width: 100%;\n  background-color: #dddddd;\n}\n.igv-generic-container > div:nth-child(1) i {\n  display: block;\n  color: #5f5f5f;\n  cursor: pointer;\n  width: 14px;\n  height: 14px;\n  margin-right: 8px;\n  margin-bottom: 4px;\n}\n\n.igv-menu-popup {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: max-content;\n  max-width: 400px;\n  z-index: 2048;\n  cursor: pointer;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: small;\n  font-weight: 400;\n  color: #4b4b4b;\n  background: white;\n  border-radius: 4px;\n  border-color: #7F7F7F;\n  border-style: solid;\n  border-width: thin;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-end;\n  text-align: left;\n}\n.igv-menu-popup > div:not(:first-child) {\n  width: 100%;\n}\n.igv-menu-popup > div:not(:first-child) > div {\n  background: white;\n}\n.igv-menu-popup > div:not(:first-child) > div.context-menu {\n  padding-left: 4px;\n  padding-right: 4px;\n}\n.igv-menu-popup > div:not(:first-child) > div:last-child {\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-bottom-color: transparent;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n}\n.igv-menu-popup > div:not(:first-child) > div:hover {\n  background: #efefef;\n}\n\n.igv-menu-popup-shim {\n  padding-left: 8px;\n  padding-right: 8px;\n  padding-bottom: 1px;\n  padding-top: 1px;\n}\n\n.igv-menu-popup-header {\n  position: relative;\n  width: 100%;\n  height: 24px;\n  cursor: move;\n  border-top-color: transparent;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-bottom-color: #7F7F7F;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  background-color: #eee;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n}\n.igv-menu-popup-header div {\n  margin-right: 4px;\n  height: 12px;\n  width: 12px;\n  color: #7F7F7F;\n}\n.igv-menu-popup-header div:hover {\n  cursor: pointer;\n  color: #444;\n}\n\n.igv-menu-popup-check-container {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  width: 100%;\n  height: 20px;\n  margin-right: 4px;\n  background-color: transparent;\n}\n.igv-menu-popup-check-container div {\n  padding-top: 2px;\n  padding-left: 8px;\n}\n.igv-menu-popup-check-container div:first-child {\n  position: relative;\n  width: 12px;\n  height: 12px;\n}\n.igv-menu-popup-check-container div:first-child svg {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n}\n\n.igv-user-feedback {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 512px;\n  height: 360px;\n  z-index: 2048;\n  background-color: white;\n  border-color: #a2a2a2;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  color: #444;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-user-feedback div:first-child {\n  position: relative;\n  height: 24px;\n  width: 100%;\n  background-color: white;\n  border-bottom-color: #a2a2a2;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n}\n.igv-user-feedback div:first-child div {\n  position: absolute;\n  top: 2px;\n  width: 16px;\n  height: 16px;\n  background-color: transparent;\n}\n.igv-user-feedback div:first-child div:first-child {\n  left: 8px;\n}\n.igv-user-feedback div:first-child div:last-child {\n  cursor: pointer;\n  right: 8px;\n}\n.igv-user-feedback div:last-child {\n  width: 100%;\n  height: calc(100% - 24px);\n  border-width: 0;\n}\n.igv-user-feedback div:last-child div {\n  width: auto;\n  height: auto;\n  margin: 8px;\n}\n\n.igv-loading-spinner-container {\n  z-index: 1024;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 32px;\n  height: 32px;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: center;\n  align-items: center;\n}\n.igv-loading-spinner-container > div {\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  border: 4px solid rgba(128, 128, 128, 0.5);\n  border-top-color: rgb(255, 255, 255);\n  animation: spin 1s ease-in-out infinite;\n  -webkit-animation: spin 1s ease-in-out infinite;\n}\n\n@keyframes spin {\n  to {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n@-webkit-keyframes spin {\n  to {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n.igv-roi-menu {\n  position: absolute;\n  z-index: 512;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: small;\n  font-weight: 400;\n  color: #4b4b4b;\n  background-color: white;\n  width: 192px;\n  border-radius: 4px;\n  border-color: #7F7F7F;\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: stretch;\n}\n.igv-roi-menu > div:first-child {\n  height: 24px;\n  border-top-color: transparent;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-bottom-color: #7F7F7F;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  background-color: #eee;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n}\n.igv-roi-menu > div:first-child > div {\n  margin-right: 4px;\n  height: 12px;\n  width: 12px;\n  color: #7F7F7F;\n}\n.igv-roi-menu > div:first-child > div:hover {\n  cursor: pointer;\n  color: #444;\n}\n.igv-roi-menu > div:last-child {\n  background-color: white;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-bottom-color: transparent;\n  border-bottom-style: solid;\n  border-bottom-width: 0;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n  text-align: start;\n  vertical-align: middle;\n}\n.igv-roi-menu > div:last-child > div {\n  height: 24px;\n  padding-left: 4px;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  border-bottom-color: #7f7f7f;\n}\n.igv-roi-menu > div:last-child > div:not(:first-child):hover {\n  cursor: pointer;\n  background-color: rgba(127, 127, 127, 0.1);\n}\n.igv-roi-menu > div:last-child div:first-child {\n  font-style: italic;\n  text-align: center;\n  padding-right: 4px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.igv-roi-menu > div:last-child > div:last-child {\n  border-bottom-width: 0;\n  border-bottom-color: transparent;\n}\n\n.igv-roi-placeholder {\n  font-style: normal;\n  color: rgba(75, 75, 75, 0.6);\n}\n\n.igv-roi-table {\n  position: absolute;\n  z-index: 1024;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n  resize: both;\n  overflow: hidden;\n  width: min-content;\n  max-width: 1600px;\n  border-color: #7f7f7f;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  background-color: white;\n  cursor: default;\n}\n.igv-roi-table > div {\n  height: 24px;\n  font-size: 14px;\n  text-align: start;\n  vertical-align: middle;\n  line-height: 24px;\n}\n.igv-roi-table > div:first-child {\n  border-color: transparent;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-top-width: 0;\n  border-bottom-color: #7f7f7f;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  background-color: #eee;\n  cursor: move;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n}\n.igv-roi-table > div:first-child > div:first-child {\n  text-align: center;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  margin-left: 4px;\n  margin-right: 4px;\n  width: calc(100% - 4px - 12px);\n}\n.igv-roi-table > div:first-child > div:last-child {\n  margin-right: 4px;\n  margin-bottom: 2px;\n  height: 12px;\n  width: 12px;\n  color: #7f7f7f;\n}\n.igv-roi-table > div:first-child > div:last-child > svg {\n  display: block;\n}\n.igv-roi-table > div:first-child > div:last-child:hover {\n  cursor: pointer;\n  color: #444;\n}\n.igv-roi-table > .igv-roi-table-description {\n  padding: 4px;\n  margin-left: 4px;\n  word-break: break-all;\n  overflow-y: auto;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  background-color: transparent;\n}\n.igv-roi-table > .igv-roi-table-goto-explainer {\n  margin-top: 5px;\n  margin-left: 4px;\n  color: #7F7F7F;\n  font-style: italic;\n  height: 24px;\n  border-top: solid lightgray;\n  background-color: transparent;\n}\n.igv-roi-table > .igv-roi-table-column-titles {\n  height: 24px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: stretch;\n  align-items: stretch;\n  padding-right: 16px;\n  background-color: white;\n  border-top-color: #7f7f7f;\n  border-top-style: solid;\n  border-top-width: thin;\n  border-bottom-color: #7f7f7f;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n}\n.igv-roi-table > .igv-roi-table-column-titles > div {\n  font-size: 14px;\n  vertical-align: middle;\n  line-height: 24px;\n  text-align: left;\n  margin-left: 4px;\n  height: 24px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  border-right-color: #7f7f7f;\n  border-right-style: solid;\n  border-right-width: thin;\n}\n.igv-roi-table > .igv-roi-table-column-titles > div:last-child {\n  border-right: unset;\n}\n.igv-roi-table > .igv-roi-table-row-container {\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n  overflow: auto;\n  height: 360px;\n  flex: 1 1 auto;\n  background-color: transparent;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row {\n  height: 24px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: stretch;\n  align-items: stretch;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row > div {\n  font-size: 14px;\n  vertical-align: middle;\n  line-height: 24px;\n  text-align: left;\n  margin-left: 4px;\n  height: 24px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  border-right-color: transparent;\n  border-right-style: solid;\n  border-right-width: thin;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row > div:last-child {\n  border-right: unset;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row-hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.igv-roi-table > div:last-child {\n  min-height: 32px;\n  height: 32px;\n  line-height: 32px;\n  border-top-color: #7f7f7f;\n  border-top-style: solid;\n  border-top-width: thin;\n  border-bottom-color: transparent;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-bottom-width: 0;\n  background-color: #eee;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n}\n\n.igv-roi-table-row-selected {\n  background-color: rgba(0, 0, 0, 0.125);\n}\n\n.igv-roi-table-button {\n  cursor: pointer;\n  height: 20px;\n  user-select: none;\n  line-height: 20px;\n  text-align: center;\n  vertical-align: middle;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 13px;\n  font-weight: 400;\n  color: black;\n  padding-left: 6px;\n  padding-right: 6px;\n  background-color: rgb(239, 239, 239);\n  border-color: black;\n  border-style: solid;\n  border-width: thin;\n  border-radius: 3px;\n}\n\n.igv-roi-table-button:hover {\n  font-weight: 400;\n  background-color: rgba(0, 0, 0, 0.13);\n}\n\n.igv-roi-region {\n  z-index: 64;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  pointer-events: none;\n  overflow: visible;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.igv-roi-region > div {\n  position: relative;\n  width: 100%;\n  height: 8px;\n  pointer-events: auto;\n}\n\n.igv-roi-menu-row {\n  height: 24px;\n  padding-left: 8px;\n  font-size: small;\n  text-align: start;\n  vertical-align: middle;\n  line-height: 24px;\n  background-color: white;\n}\n\n.igv-roi-menu-row-edit-description {\n  width: -webkit-fill-available;\n  font-size: small;\n  text-align: start;\n  vertical-align: middle;\n  background-color: white;\n  padding-left: 4px;\n  padding-right: 4px;\n  padding-bottom: 4px;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: stretch;\n  align-items: stretch;\n}\n.igv-roi-menu-row-edit-description > label {\n  margin-left: 2px;\n  margin-bottom: 0;\n  display: block;\n  width: -webkit-fill-available;\n}\n.igv-roi-menu-row-edit-description > input {\n  display: block;\n  margin-left: 2px;\n  margin-right: 2px;\n  margin-bottom: 1px;\n  width: -webkit-fill-available;\n}\n\n.picker_wrapper.no_alpha .picker_alpha {\n  display: none;\n}\n\n.picker_wrapper.no_editor .picker_editor {\n  position: absolute;\n  z-index: -1;\n  opacity: 0;\n}\n\n.picker_wrapper.no_cancel .picker_cancel {\n  display: none;\n}\n\n.layout_default.picker_wrapper {\n  display: flex;\n  flex-flow: row wrap;\n  justify-content: space-between;\n  align-items: stretch;\n  font-size: 10px;\n  width: 25em;\n  padding: 0.5em;\n}\n\n.layout_default.picker_wrapper input, .layout_default.picker_wrapper button {\n  font-size: 1rem;\n}\n\n.layout_default.picker_wrapper > * {\n  margin: 0.5em;\n}\n\n.layout_default.picker_wrapper::before {\n  content: \"\";\n  display: block;\n  width: 100%;\n  height: 0;\n  order: 1;\n}\n\n.layout_default .picker_slider, .layout_default .picker_selector {\n  padding: 1em;\n}\n\n.layout_default .picker_hue {\n  width: 100%;\n}\n\n.layout_default .picker_sl {\n  flex: 1 1 auto;\n}\n\n.layout_default .picker_sl::before {\n  content: \"\";\n  display: block;\n  padding-bottom: 100%;\n}\n\n.layout_default .picker_editor {\n  order: 1;\n  width: 6.5rem;\n}\n\n.layout_default .picker_editor input {\n  width: 100%;\n  height: 100%;\n}\n\n.layout_default .picker_sample {\n  order: 1;\n  flex: 1 1 auto;\n}\n\n.layout_default .picker_done, .layout_default .picker_cancel {\n  order: 1;\n}\n\n.picker_wrapper {\n  box-sizing: border-box;\n  background: #f2f2f2;\n  box-shadow: 0 0 0 1px silver;\n  cursor: default;\n  font-family: sans-serif;\n  color: #444;\n  pointer-events: auto;\n}\n\n.picker_wrapper:focus {\n  outline: none;\n}\n\n.picker_wrapper button, .picker_wrapper input {\n  box-sizing: border-box;\n  border: none;\n  box-shadow: 0 0 0 1px silver;\n  outline: none;\n}\n\n.picker_wrapper button:focus, .picker_wrapper button:active, .picker_wrapper input:focus, .picker_wrapper input:active {\n  box-shadow: 0 0 2px 1px #1e90ff;\n}\n\n.picker_wrapper button {\n  padding: 0.4em 0.6em;\n  cursor: pointer;\n  background-color: #f5f5f5;\n  background-image: linear-gradient(0deg, gainsboro, transparent);\n}\n\n.picker_wrapper button:active {\n  background-image: linear-gradient(0deg, transparent, gainsboro);\n}\n\n.picker_wrapper button:hover {\n  background-color: #fff;\n}\n\n.picker_selector {\n  position: absolute;\n  z-index: 1;\n  display: block;\n  -webkit-transform: translate(-50%, -50%);\n  transform: translate(-50%, -50%);\n  border: 2px solid #fff;\n  border-radius: 100%;\n  box-shadow: 0 0 3px 1px #67b9ff;\n  background: currentColor;\n  cursor: pointer;\n}\n\n.picker_slider .picker_selector {\n  border-radius: 2px;\n}\n\n.picker_hue {\n  position: relative;\n  background-image: linear-gradient(90deg, red, yellow, lime, cyan, blue, magenta, red);\n  box-shadow: 0 0 0 1px silver;\n}\n\n.picker_sl {\n  position: relative;\n  box-shadow: 0 0 0 1px silver;\n  background-image: linear-gradient(180deg, white, rgba(255, 255, 255, 0) 50%), linear-gradient(0deg, black, rgba(0, 0, 0, 0) 50%), linear-gradient(90deg, #808080, rgba(128, 128, 128, 0));\n}\n\n.picker_alpha, .picker_sample {\n  position: relative;\n  background: linear-gradient(45deg, lightgrey 25%, transparent 25%, transparent 75%, lightgrey 75%) 0 0/2em 2em, linear-gradient(45deg, lightgrey 25%, white 25%, white 75%, lightgrey 75%) 1em 1em/2em 2em;\n  box-shadow: 0 0 0 1px silver;\n}\n\n.picker_alpha .picker_selector, .picker_sample .picker_selector {\n  background: none;\n}\n\n.picker_editor input {\n  font-family: monospace;\n  padding: 0.2em 0.4em;\n}\n\n.picker_sample::before {\n  content: \"\";\n  position: absolute;\n  display: block;\n  width: 100%;\n  height: 100%;\n  background: currentColor;\n}\n\n.picker_arrow {\n  position: absolute;\n  z-index: -1;\n}\n\n.picker_wrapper.popup {\n  position: absolute;\n  z-index: 2;\n  margin: 1.5em;\n}\n\n.picker_wrapper.popup, .picker_wrapper.popup .picker_arrow::before, .picker_wrapper.popup .picker_arrow::after {\n  background: #f2f2f2;\n  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.4);\n}\n\n.picker_wrapper.popup .picker_arrow {\n  width: 3em;\n  height: 3em;\n  margin: 0;\n}\n\n.picker_wrapper.popup .picker_arrow::before, .picker_wrapper.popup .picker_arrow::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: -99;\n}\n\n.picker_wrapper.popup .picker_arrow::before {\n  width: 100%;\n  height: 100%;\n  -webkit-transform: skew(45deg);\n  transform: skew(45deg);\n  -webkit-transform-origin: 0 100%;\n  transform-origin: 0 100%;\n}\n\n.picker_wrapper.popup .picker_arrow::after {\n  width: 150%;\n  height: 150%;\n  box-shadow: none;\n}\n\n.popup.popup_top {\n  bottom: 100%;\n  left: 0;\n}\n\n.popup.popup_top .picker_arrow {\n  bottom: 0;\n  left: 0;\n  -webkit-transform: rotate(-90deg);\n  transform: rotate(-90deg);\n}\n\n.popup.popup_bottom {\n  top: 100%;\n  left: 0;\n}\n\n.popup.popup_bottom .picker_arrow {\n  top: 0;\n  left: 0;\n  -webkit-transform: rotate(90deg) scale(1, -1);\n  transform: rotate(90deg) scale(1, -1);\n}\n\n.popup.popup_left {\n  top: 0;\n  right: 100%;\n}\n\n.popup.popup_left .picker_arrow {\n  top: 0;\n  right: 0;\n  -webkit-transform: scale(-1, 1);\n  transform: scale(-1, 1);\n}\n\n.popup.popup_right {\n  top: 0;\n  left: 100%;\n}\n\n.popup.popup_right .picker_arrow {\n  top: 0;\n  left: 0;\n}\n\n.igv-container {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  padding-top: 4px;\n  user-select: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n  min-height: 160px;\n}\n\n.igv-viewport {\n  position: relative;\n  margin-top: 5px;\n  line-height: 1;\n  overflow-x: hidden;\n  overflow-y: hidden;\n}\n\n.igv-viewport-content {\n  position: relative;\n  width: 100%;\n}\n.igv-viewport-content > canvas {\n  position: relative;\n  display: block;\n}\n\n.igv-column-container {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n  width: 100%;\n}\n\n.igv-column-shim {\n  width: 1px;\n  margin-left: 2px;\n  margin-right: 2px;\n  background-color: #545453;\n}\n\n.igv-axis-column {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  box-sizing: border-box;\n  height: 100%;\n  width: 50px;\n}\n.igv-axis-column > div {\n  position: relative;\n  margin-top: 5px;\n  width: 100%;\n}\n.igv-axis-column > div > div {\n  z-index: 512;\n  position: absolute;\n  top: 8px;\n  left: 8px;\n  width: fit-content;\n  height: fit-content;\n  background-color: transparent;\n  display: grid;\n  align-items: start;\n  justify-items: center;\n}\n.igv-axis-column > div > div > input {\n  display: block;\n  margin: unset;\n  cursor: pointer;\n}\n\n.igv-column {\n  position: relative;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  box-sizing: border-box;\n  height: 100%;\n}\n\n.igv-sample-info-column {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  box-sizing: border-box;\n  height: 100%;\n}\n\n.igv-sample-name-column {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  box-sizing: border-box;\n  height: 100%;\n}\n\n.igv-scrollbar-column {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  box-sizing: border-box;\n  height: 100%;\n  width: 14px;\n}\n.igv-scrollbar-column > div {\n  position: relative;\n  margin-top: 5px;\n  width: 14px;\n}\n.igv-scrollbar-column > div > div {\n  cursor: pointer;\n  position: absolute;\n  top: 0;\n  left: 2px;\n  width: 8px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #c4c4c4;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n}\n.igv-scrollbar-column > div > div:hover {\n  background-color: #c4c4c4;\n}\n\n.igv-track-drag-column {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  box-sizing: border-box;\n  height: 100%;\n  width: 12px;\n  background-color: white;\n}\n.igv-track-drag-column > .igv-track-drag-handle {\n  z-index: 512;\n  position: relative;\n  cursor: pointer;\n  margin-top: 5px;\n  width: 100%;\n  border-style: solid;\n  border-width: 0;\n  border-top-right-radius: 6px;\n  border-bottom-right-radius: 6px;\n}\n.igv-track-drag-column .igv-track-drag-handle-color {\n  background-color: #c4c4c4;\n}\n.igv-track-drag-column .igv-track-drag-handle-hover-color {\n  background-color: #787878;\n}\n.igv-track-drag-column .igv-track-drag-handle-selected-color {\n  background-color: #0963fa;\n}\n.igv-track-drag-column > .igv-track-drag-shim {\n  position: relative;\n  margin-top: 5px;\n  width: 100%;\n  border-style: solid;\n  border-width: 0;\n}\n\n.igv-gear-menu-column {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  box-sizing: border-box;\n  height: 100%;\n  width: 28px;\n}\n.igv-gear-menu-column > div {\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  margin-top: 5px;\n  width: 100%;\n  background: white;\n}\n.igv-gear-menu-column > div > div {\n  position: relative;\n  margin-top: 4px;\n  width: 16px;\n  height: 16px;\n  color: #7F7F7F;\n}\n.igv-gear-menu-column > div > div:hover {\n  cursor: pointer;\n  color: #444;\n}\n\n.igv-vertical-center {\n  margin: 0 !important;\n  top: 50% !important;\n  -ms-transform: translateY(-50%) !important;\n  transform: translateY(-50%) !important;\n}\n\n/*# sourceMappingURL=igv.css.map */\n';
 
 /**
  * Manages XQTL selections.
@@ -73377,7 +74155,7 @@ class Browser {
         this.dataRangeDialog = new DataRangeDialog(this, this.root);
         this.dataRangeDialog.container.id = `igv-data-range-dialog-${guid$2()}`;
 
-        this.genericColorPicker = new GenericColorPicker({ parent: this.root, width: 180 });
+        this.genericColorPicker = new GenericColorPicker({parent: this.root, width: 180});
         this.genericColorPicker.container.id = `igv-track-color-picker-${guid$2()}`;
 
         this.sliderDialog = new SliderDialog(this.root);
@@ -73387,10 +74165,10 @@ class Browser {
 
     getSampleNameViewportWidth() {
 
-        if (undefined === this.sampleNameViewportWidth) {
+        if (false === this.showSampleNames || undefined === this.sampleNameViewportWidth) {
             return 0
         } else {
-            return false === this.showSampleNames ? 0 : this.sampleNameViewportWidth
+            return this.sampleNameViewportWidth
         }
 
     }
@@ -73552,7 +74330,8 @@ class Browser {
         } else {
             session = options;
         }
-        return this.loadSessionObject(session)
+
+        await this.loadSessionObject(session);
     }
 
     /**
@@ -73581,8 +74360,7 @@ class Browser {
                 config = new XMLSession(string, knownGenomes);
 
             } else if (filename.endsWith("hub.txt")) {
-
-                const hub = await Hub.loadHub(urlOrFile, options);
+                const hub = await loadHub(urlOrFile);
                 const genomeConfig = hub.getGenomeConfig();
                 config = {
                     reference: genomeConfig
@@ -73673,7 +74451,7 @@ class Browser {
         }
 
         // ROIs
-        if(session.showROIOverlays !== undefined) {
+        if (session.showROIOverlays !== undefined) {
             this.roiManager.showOverlays = session.showROIOverlays;
         }
         this.roiManager.clearROIs();
@@ -73687,12 +74465,16 @@ class Browser {
         // Sample info
         const localSampleInfoFiles = [];
         if (session.sampleinfo) {
-            for (const config of session.sampleinfo) {
-
-                if (config.file) {
-                    localSampleInfoFiles.push(config.file);
+            for (const sampleInfoConfig of session.sampleinfo) {
+                // The "file" property is recorded in the session when a local file is referenced. It can't be used
+                // on reloading, its only purpose is to present an alert to the user.  This could also be used
+                // to prompt the user to load the file manually, but we don't currently do that.
+                if (sampleInfoConfig.file) {
+                    localSampleInfoFiles.push(sampleInfoConfig.file);
                 } else {
-                    this.loadSampleInfo(config);
+                    // this.loadSampleInfo(sampleInfoConfig)
+                    await this.sampleInfo.loadSampleInfo(sampleInfoConfig);
+
                 }
 
             }
@@ -73733,23 +74515,14 @@ class Browser {
             }
         }
 
-        await this.loadTrackList(nonLocalTrackConfigurations);
-
-        // The ruler and ideogram tracks are not explicitly loaded, but needs updated nonetheless.
-        for (let rtv of this.trackViews.filter((tv) => tv.track.type === 'ruler' || tv.track.type === 'ideogram')) {
-            await rtv.updateViews();
+        // Load a hidden track -- used to populate searchable database without creating a track
+        const configHidden = nonLocalTrackConfigurations.filter(config => true === config.hidden);
+        for (const config of configHidden) {
+            const featureSource = FeatureSource(config, this.genome);
+            await featureSource.getFeatures({chr: "1", start: 0, end: Number.MAX_SAFE_INTEGER});
         }
 
-        // If any tracks are selected show the selection buttons
-        if (this.trackViews.some(tv => tv.track.selected)) {
-            this.navbar.setEnableTrackSelection(true);
-        }
-
-        this.updateUIWithReferenceFrameList();
-
-        this.updateLocusSearchWidget();
-
-        return trackConfigurations
+        await this.loadTrackList(nonLocalTrackConfigurations);
 
     }
 
@@ -73810,13 +74583,8 @@ class Browser {
         }
 
         if (genomeChange) {
-            let trackConfigurations;
-            if (genomeConfig.hubURL) {
-                // TODO -- refactor this so "hub" is not loaded twice
-                const hub = await Hub.loadHub(genomeConfig.hubURL);
-                trackConfigurations = hub.getGroupedTrackConfigurations();
-            }
-            this.fireEvent('genomechange', [{genome, trackConfigurations}]);
+
+            this.fireEvent('genomechange', [{genome}]);
 
             if (this.circularView) {
                 this.circularView.setAssembly({
@@ -73855,7 +74623,7 @@ class Browser {
         let genomeConfig;
         const isHubGenome = idOrConfig.hubURL || (idOrConfig.url && isString$2(idOrConfig.url) && idOrConfig.url.endsWith("/hub.txt"));
         if (isHubGenome) {
-            const hub = await Hub.loadHub(idOrConfig.hubURL || idOrConfig.url, idOrConfig);
+            const hub = await loadHub(idOrConfig.hubURL || idOrConfig.url);
             genomeConfig = hub.getGenomeConfig();
         } else if (isString$2(idOrConfig) || !(idOrConfig.url || idOrConfig.fastaURL || idOrConfig.twoBitURL || idOrConfig.gbkURL)) {
             // Either an ID, a json string, or an object missing required properties.
@@ -73885,22 +74653,9 @@ class Browser {
 
         await this.loadTrackList(tracks);
 
-        await this.updateViews();
-
         return this.genome
     }
 
-    /**
-     * Load a UCSC single-file genome assembly hub.
-     * @param options
-     * @returns {Promise<void>}
-     */
-    async loadTrackHub(options) {
-        const hub = await Hub.loadHub(options.url, options);
-        const genomeConfig = setDefaults(hub.getGenomeConfig());
-        return this.loadGenome(genomeConfig)
-    }
-
     /**
      * Called after a session load, search, pan (horizontal drag), or resize
      *
@@ -73997,18 +74752,23 @@ class Browser {
         }
 
         const promises = [];
-        for (let config of configList) {
-            promises.push(this._loadTrack(config));
+        for (const config of configList) {
+            promises.push(this.#loadTrackHelper(config));
         }
 
         const loadedTracks = await Promise.all(promises);
 
-        const groupAutoscaleViews = this.trackViews.filter(function (trackView) {
-            return trackView.track.autoscaleGroup
-        });
-        if (groupAutoscaleViews.length > 0) {
-            this.updateViews();
+        // If any tracks are selected show the selection buttons
+        if (this.trackViews.some(({track}) => track.selected)) {
+            this.navbar.setEnableTrackSelection(true);
         }
+
+        this.reorderTracks();
+
+        await resize.call(this);
+
+        this.fireEvent('trackorderchanged', [this.getTrackOrder()]);
+
         return loadedTracks
     }
 
@@ -74022,54 +74782,23 @@ class Browser {
      */
     async loadTrack(config) {
 
-        // Default configuration sync option to true.  This is the expected behavior for public API calls
-        config.sync = (config.sync !== false);
-
-        const newTrack = this._loadTrack(config);
-
-        if (newTrack && config.autoscaleGroup) {
-            // Await newTrack load and update all views
-            await newTrack;
+        const loadedTracks = await this.loadTrackList([config]);
+        if (config.autoscaleGroup) {
             this.updateViews();
         }
-
-        return newTrack
+        return loadedTracks[0]
     }
 
-    /**
-     * Return a promise to load a track.   Private function used by loadTrack() and loadTrackList()
-     *
-     * @param config
-     * @returns {*}
-     */
-
-    async _loadTrack(config) {
+    async #loadTrackHelper(config) {
 
         // config might be json
         if (isString$2(config)) {
             config = JSON.parse(config);
         }
 
+        let track;
         try {
-
-            // Load a hidden track -- used to populate searchable database without creating a track
-            if (config.hidden) {
-                const featureSource = FeatureSource(config, this.genome);
-                await featureSource.getFeatures({chr: "1", start: 0, end: Number.MAX_SAFE_INTEGER});
-                return
-            }
-
-            const newTrack = await this.createTrack(config);
-
-            if ('sampleinfo' === config.type) {
-                this.layoutChange();
-                return
-            } else if (undefined === newTrack) {
-                return
-            }
-
-            return this.addTrack(config, newTrack)
-
+            track = await this.createTrack(config);
         } catch (error) {
 
             let msg = error.message || error.error || error.toString();
@@ -74086,62 +74815,53 @@ class Browser {
             }
 
             msg = `${msg} : ${isFile(config.url) ? config.url.name : config.url}`;
-            // msg += (": " + FileUtils.isFile(config.url) ? config.url.name : config.url)
             const err = new Error(msg);
             console.error(err);
             throw err
-            // this.alert.present(new Error(msg), undefined)
         }
-    }
 
-    async addTrack(config, newTrack) {
+        if (track) {
+            return await this.addTrack(track)
+        } else {
+            return undefined
+        }
 
+    }
+
+    async addTrack(track) {
 
         // Set order field of track here, otherwise track order might get shuffled during asynchronous load
-        if (undefined === newTrack.order) {
-            newTrack.order = this.trackViews.length;
+        if (undefined === track.order) {
+            track.order = this.trackViews.length;
         }
 
-        const trackView = new TrackView(this, this.columnContainer, newTrack);
+        const trackView = new TrackView(this, this.columnContainer, track);
         this.trackViews.push(trackView);
         toggleTrackLabels(this.trackViews, this.doShowTrackLabels);
 
-        if (typeof newTrack.postInit === 'function') {
+        if (typeof track.postInit === 'function') {
             try {
                 trackView.startSpinner();
-                await newTrack.postInit();
+                await track.postInit();
             } finally {
                 trackView.stopSpinner();
             }
         }
 
-        if (!newTrack.autoscaleGroup) {
-            // Group autoscale will get updated later (as a group)
-            if (config.sync) {
-                await trackView.updateViews();
-            } else {
-                trackView.updateViews();
-            }
-        }
-
-        if (typeof newTrack.hasSamples === 'function' && newTrack.hasSamples()) {
+        if (typeof track.hasSamples === 'function' && track.hasSamples()) {
 
             if (this.sampleInfo.hasAttributes()) {
                 this.sampleInfoControl.setButtonVisibility(true);
             }
 
             if (this.config.showSampleNameButton !== false) {
-                this.sampleNameControl.show();   // If not explicitly set
+                this.sampleNameControl.show();
             }
         }
 
-        // repositioned here to solve layout issue.
-        this.reorderTracks();
-        this.fireEvent('trackorderchanged', [this.getTrackOrder()]);
-
-        newTrack.trackView.enableTrackSelection(this.navbar.getEnableTrackSelection());
+        track.trackView.enableTrackSelection(this.navbar.getEnableTrackSelection());
 
-        return newTrack
+        return track
 
     }
 
@@ -74286,7 +75006,6 @@ class Browser {
         }
     }
 
-
     reorderTracks() {
 
         this.trackViews.sort(function (a, b) {
@@ -74523,19 +75242,19 @@ class Browser {
 
         this.updateLocusSearchWidget();
 
-        for (let frame of this.referenceFrameList) {
-            if (frame.bpPerPixel <= bppSequenceThreshold) {
-                await this.genome.getSequence(frame.chr, frame.start, frame.start + 1);
+        for (const {bpPerPixel, chr, start} of this.referenceFrameList) {
+            if (bpPerPixel <= bppSequenceThreshold) {
+                await this.genome.getSequence(chr, start, start + 1);
             }
         }
 
-        for (let centerGuide of this.centerLineList) {
+        for (const centerGuide of this.centerLineList) {
             centerGuide.repaint();
         }
 
         // Don't autoscale while dragging.
         if (this.dragObject) {
-            for (let trackView of trackViews) {
+            for (const trackView of trackViews) {
                 await trackView.updateViews();
             }
         } else {
@@ -74559,8 +75278,8 @@ class Browser {
             // Calculate group autoscale dataRange
             if (Object.entries(groupAutoscaleTrackViews).length > 0) {
                 for (const [group, trackViews] of Object.entries(groupAutoscaleTrackViews)) {
-                    const featureArray = await Promise.all(trackViews.map(trackView => trackView.getInViewFeatures()));
-                    const dataRange = doAutoscale(featureArray.flat());
+                    const inViewFeatures = await Promise.all(trackViews.map(trackView => trackView.getInViewFeatures()));
+                    const dataRange = doAutoscale(inViewFeatures.flat());
                     for (const trackView of trackViews) {
                         trackView.track.dataRange = Object.assign({}, dataRange);
                         trackView.track.autoscale = false;
@@ -74569,7 +75288,7 @@ class Browser {
                 }
             }
 
-            await Promise.all(otherTrackViews.map(tv => tv.updateViews()));
+            await Promise.all(otherTrackViews.map(trackView => trackView.updateViews()));
         }
 
     }
@@ -74592,10 +75311,10 @@ class Browser {
             referenceFrame.end = referenceFrame.start + referenceFrame.bpPerPixel * width;
         }
 
-        const chrName = referenceFrameList.length === 1 ? this.referenceFrameList[0].chr : '';
-
         const loc = this.referenceFrameList.map(rf => rf.getLocusString()).join(' ');
 
+        const chrName = referenceFrameList.length === 1 ? this.genome.getChromosomeDisplayName(this.referenceFrameList[0].chr) : '';
+
         this.navbar.updateLocus(loc, chrName);
 
         this.fireEvent('locuschange', [this.referenceFrameList]);
@@ -74612,6 +75331,46 @@ class Browser {
         return Math.floor(width / columnCount)
     }
 
+    /**
+     * Update reference frames based on new viewport width
+     * @param {number} viewportWidth - The calculated viewport width
+     */
+    updateReferenceFrames(viewportWidth) {
+
+        for (const referenceFrame of this.referenceFrameList) {
+            referenceFrame.updateForViewportWidth(viewportWidth);
+        }
+    }
+
+    /**
+     * Update DOM viewport elements with new width
+     * @param {number} viewportWidth - The calculated viewport width
+     */
+    updateViewportElements(viewportWidth) {
+
+        for (let i = 0; i < this.referenceFrameList.length; i++) {
+
+            for (const {viewports} of this.trackViews) {
+                viewports[i].setWidth(viewportWidth);
+            }
+
+            for (const {sampleInfoViewport} of this.trackViews) {
+                sampleInfoViewport.setWidth(this.getSampleInfoColumnWidth());
+                sampleInfoViewport.repaint();
+            }
+
+        }
+    }
+
+    /**
+     * Synchronize UI state after viewport updates
+     * @returns {Promise<void>}
+     */
+    async syncUIState() {
+        this.updateUIWithReferenceFrameList();
+        await this.updateViews(true);
+    }
+
     minimumBases() {
         return this.config.minimumBases
     }
@@ -74797,29 +75556,12 @@ class Browser {
     }
 
     /**
-     * @deprecated  This is a deprecated method with no known usages.  To be removed in a future release.
+     * @deprecated  This is a deprecated method with no known usages.
      */
     async goto(chr, start, end) {
         await this.search(chr + ":" + start + "-" + end);
     }
 
-    /**
-
-     * Search for the locus string -- this function is called from various igv.js GUI elements, and is not part of the
-     * API.  Wraps ```search``` and presents an error dialog if false.
-     *
-     * @param string
-     * @param init
-     * @returns {Promise<void>}
-     */
-    async doSearch(string, init) {
-        const success = await this.search(string, init);
-        if (!success) {
-            this.alert.present(new Error(`Unrecognized locus: <b> ${string} </b>`));
-        }
-        return success
-    }
-
 
     /**
      * Search for the locus string
@@ -74832,6 +75574,10 @@ class Browser {
     async search(stringOrArray, init) {
 
         const loci = await search(this, stringOrArray);
+        return this.updateLoci(loci, init)
+    }
+
+    async updateLoci(loci, init) {
 
         if (loci && loci.length > 0) {
 
@@ -74868,9 +75614,9 @@ class Browser {
         }
     }
 
-    async loadSampleInfo(config) {
+    async loadSampleInfo(sampleInfoConfig) {
 
-        await this.sampleInfo.loadSampleInfoFile(config.url);
+        await this.sampleInfo.loadSampleInfo(sampleInfoConfig);
 
         for (const {sampleInfoViewport} of this.trackViews) {
             sampleInfoViewport.setWidth(this.getSampleInfoColumnWidth());
@@ -75008,9 +75754,9 @@ class Browser {
         json["locus"] = locus.length === 1 ? locus[0] : locus;
 
         const roiSets = this.roiManager.toJSON();
-        if(roiSets) {
+        if (roiSets) {
             json["roi"] = roiSets;
-            if(!this.roiManager.showOverlays){
+            if (!this.roiManager.showOverlays) {
                 json["showROIOverlays"] = false;   // true is the default
             }
         }
@@ -75353,8 +76099,6 @@ class Browser {
         }
     }
 
-
-
     // Navbar delegates
     get sampleInfoControl() {
         return this.navbar.sampleInfoControl
@@ -75376,6 +76120,9 @@ class Browser {
         return this.navbar.sampleNameControl
     }
 
+    async blat(sequence) {
+        return createBlatTrack({sequence, browser: this, name: 'Blat', title: 'Blat'})
+    }
 }
 
 function getFileExtension(input) {
@@ -75401,7 +76148,7 @@ function getFileExtension(input) {
 }
 
 /**
- * Function called win window is resized, or visibility changed (e.g. "show" from a tab).  This is a function rather
+ * Called when window is resized, or visibility changed (e.g. "show" from a tab).  This is a function rather
  * than class method because it needs to be copied and bound to specific instances of browser to support listener
  * removal
  *
@@ -75409,40 +76156,14 @@ function getFileExtension(input) {
  */
 async function resize() {
 
-    if (!this.referenceFrameList) return
-
-    const viewportWidth = this.calculateViewportWidth(this.referenceFrameList.length);
-
-    for (let referenceFrame of this.referenceFrameList) {
-
-        const index = this.referenceFrameList.indexOf(referenceFrame);
-
-        const {chr, genome} = referenceFrame;
-
-        const {bpLength} = genome.getChromosome(referenceFrame.chr);
-
-        const viewportWidthBP = referenceFrame.toBP(viewportWidth);
-
-        // viewportWidthBP > bpLength occurs when locus is full chromosome and user widens browser
-        if (GenomeUtils.isWholeGenomeView(chr) || viewportWidthBP > bpLength) {
-            // console.log(`${ Date.now() } Recalc referenceFrame(${ index }) bpp. viewport ${ StringUtils.numberFormatter(viewportWidthBP) } > ${ StringUtils.numberFormatter(bpLength) }.`)
-            referenceFrame.bpPerPixel = bpLength / viewportWidth;
-        } else {
-            // console.log(`${ Date.now() } Recalc referenceFrame(${ index }) end.`)
-            referenceFrame.end = referenceFrame.start + referenceFrame.toBP(viewportWidth);
-        }
-
-        for (let {viewports} of this.trackViews) {
-            viewports[index].setWidth(viewportWidth);
-        }
-
+    if (undefined === this.referenceFrameList || 0 === this.referenceFrameList.length) {
+        return
     }
 
-    this.updateUIWithReferenceFrameList();
-
-    //TODO -- update view only if needed.  Reducing size never needed.  Increasing size maybe
-
-    await this.updateViews(true);
+    const viewportWidth = this.calculateViewportWidth(this.referenceFrameList.length);
+    this.updateReferenceFrames(viewportWidth);
+    this.updateViewportElements(viewportWidth);
+    await this.syncUIState();
 }
 
 
@@ -75911,7 +76632,8 @@ var index = {
     registerTrackClass,
     registerTrackCreatorFunction,
     registerFileFormats,
-    loadSessionFile: Browser.loadSessionFile
+    loadSessionFile: Browser.loadSessionFile,
+    loadHub
 };
 
 export { index as default };