igv 3.2.6 → 3.3.0

package/dist/igv.js

@@ -12880,6 +12880,20 @@
 
        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);
@@ -12893,70 +12907,62 @@
 
            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);
            }
+
        }
 
        /**
@@ -13721,17 +13727,22 @@
 
        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() {
@@ -13757,69 +13768,22 @@
            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
@@ -13850,9 +13814,66 @@
            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);
+           }
        }
 
    }
@@ -13878,6 +13899,7 @@
 
        littleEndian
        metaIndex = new Map()
+       chromosomeNames
 
        constructor(config) {
            this.url = config.twoBitURL || config.fastaURL;
@@ -13970,9 +13992,16 @@
            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});
@@ -14025,6 +14054,8 @@
                index.set(name, offset);
 
                estNameLength = Math.floor(estNameLength * (i / (i + 1)) + name.length / (i + 1));
+
+               this.chromosomeNames.push(name);
            }
            return index
        }
@@ -22170,84 +22201,6 @@
        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
@@ -22258,11 +22211,12 @@
        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;
        }
 
 
@@ -22306,7 +22260,7 @@
        }
 
        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)
        }
 
@@ -22663,6 +22617,165 @@
        }
    }
 
+   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)
     *
@@ -22726,14 +22839,40 @@
        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)
        }
 
@@ -22744,8 +22883,8 @@
 
            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 []
@@ -22804,7 +22943,7 @@
                    } 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) {
@@ -22821,29 +22960,30 @@
         * @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
@@ -22930,7 +23070,8 @@
                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);
                }
            }
@@ -23047,15 +23188,13 @@
                    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;
@@ -23079,38 +23218,6 @@
            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) {
 
@@ -23166,7 +23273,7 @@
            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
@@ -23206,9 +23313,7 @@
            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
 
        }
@@ -23276,7 +23381,7 @@
    }
 
 
-   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();
@@ -23317,7 +23422,7 @@
                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});
                }
            }
@@ -23328,12 +23433,13 @@
 
        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();
@@ -23350,8 +23456,7 @@
        }
    }
 
-
-   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
@@ -23383,7 +23488,7 @@
 
 
            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});
 
 
@@ -23468,7 +23573,8 @@
 
            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);
            }
@@ -23492,15 +23598,14 @@
 
        }
 
-       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;
@@ -28295,7 +28400,7 @@
                features
            };
 
-           const track = await browser.loadTrack(trackConfig);
+           const track = (await browser.loadTrackList([trackConfig]))[0];
            track.openTableView();
 
        } catch (e) {
@@ -30347,109 +30452,578 @@
        }
    }
 
-   /*
-    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
+       }
 
-       static async loadHub(url) {
+       hasOwnProperty(key) {
+           return this.properties.has(key)
+       }
 
-           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);
+       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
+   }
 
-               // 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);
+   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")
                }
            }
+       }
 
-           // 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)
-           //         }
-           //     }
-           // }
+       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
+       }
+
+       getGroupedTrackConfigurations() {
+
+           if (!this.groupTrackConfigs) {
+               this.groupTrackConfigs = [];
+               const trackContainers = new Map();
 
-           return new Hub(url, stanzas, groups)
+               // 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);
+                   }
+               }
+
+               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);
+                       }
+                   }
+               }
+
+           }
+
+           // Filter empty groups and sort
+           this.groupTrackConfigs.forEach(c => c.trim());
+           this.groupTrackConfigs = this.groupTrackConfigs.filter(t => !t.isEmpty());
+
+           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) {
 
-           // 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 format = t.format;
+
+           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 (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 (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;
+               }
+
+           }
+           if (t.hasProperty("itemRgb")) ;
+           if ("hide" === t.getProperty("visibility")) {
+               // TODO -- this not supported yet
+               config.visible = false;
            }
-           if ("on" !== this.hubStanza.getProperty("useOneFile")) {
-               throw Error("Only 'useOneFile' hubs are currently supported")
+           if (t.hasProperty("url")) {
+               config.infoURL = t.getProperty("url");
            }
-           if (stanzas.length < 2) {
-               throw Error("Expected at least 2 stanzas, hub and genome")
+           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");
            }
 
-           // 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("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"],
+   ]);
 
-       getDefaultPosition() {
-           return this.genomeStanza.getProperty("defaultPos")
+   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));
+           }
        }
 
+
+       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
@@ -30468,133 +31042,126 @@
    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
         */
@@ -30632,7 +31199,7 @@
                "id": t.getProperty("track"),
                "name": t.getProperty("shortLabel"),
                "format": format,
-               "url": this.baseURL + t.getProperty("bigDataUrl"),
+               "url": t.getProperty("bigDataUrl"),
                "displayMode": t.displayMode,
            };
 
@@ -30643,7 +31210,7 @@
            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");
            }
@@ -30675,7 +31242,7 @@
                    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;
@@ -30694,15 +31261,15 @@
                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);
                }
            }
 
@@ -30711,96 +31278,92 @@
 
    }
 
-   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
@@ -30808,38 +31371,92 @@
     */
    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) {
@@ -30854,13 +31471,30 @@
        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";
@@ -30944,8 +31578,8 @@
                    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);
                        }
@@ -32907,27 +33541,18 @@
            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() {
@@ -32954,47 +33579,60 @@
 
        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;
 
@@ -33012,7 +33650,7 @@
 
            } else if (typeof value === "string") {
 
-               color = 'NA' === value ? colorForNA : stringToRGBString(value);
+               color = 'NA' === value ? SampleInfo.colorForNA : SampleInfo.stringToRGBString(value);
 
            } else {
 
@@ -33080,6 +33718,27 @@
            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
@@ -33119,22 +33778,11 @@
            } // 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) {
@@ -33235,7 +33883,7 @@
                    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);
@@ -33255,8 +33903,34 @@
 
        }
 
-   }
+       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) {
 
@@ -33267,14 +33941,14 @@
        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('#')) {
@@ -33293,7 +33967,6 @@
        }
    }
 
-
    function createAttributeRangeLUT(names, dictionary) {
 
        const lut = {};
@@ -33339,35 +34012,6 @@
        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;
 
@@ -33976,7 +34620,11 @@
 
        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`;
 
@@ -35088,7 +35736,7 @@
            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;
@@ -35104,9 +35752,10 @@
                        track.autoscaleGroup = name;
                    }
                    track.isMergedTrack = false;
-                   browser.addTrack(track.config, track);
+                   browser.addTrack(track);
                }
-               browser.updateViews();
+               await browser.updateViews();
+               browser.reorderTracks();
            }
 
            return {element, click}
@@ -35201,7 +35850,7 @@
        }
    }
 
-   function trackOverlayClickHandler(e) {
+   async function trackOverlayClickHandler(e) {
 
        if (true === isOverlayTrackCriteriaMet(this.browser)) {
 
@@ -35238,9 +35887,9 @@
                track.trackView.dispose();
            }
 
-           this.browser.addTrack(config, mergedTrack);
-           mergedTrack.trackView.updateViews();
-
+           this.browser.addTrack(mergedTrack);
+           await mergedTrack.trackView.updateViews();
+           this.browser.reorderTracks();
        }
 
    }
@@ -36847,14 +37496,45 @@
 
 
        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`;
        }
    }
 
@@ -50502,7 +51182,7 @@
 
            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}`;
            }
 
@@ -55267,7 +55947,7 @@
    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;
        }
@@ -55297,26 +55977,30 @@
 
    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
        }
+
    }
 
 
@@ -55394,9 +56078,9 @@
         * @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 = [];
@@ -55406,11 +56090,8 @@
        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
        }
@@ -64446,7 +65127,7 @@ ${indent}columns: ${matrix.columns}
                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))];
                
@@ -69434,6 +70115,23 @@ ${indent}columns: ${matrix.columns}
            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;
@@ -69519,7 +70217,7 @@ ${indent}columns: ${matrix.columns}
        })
    }
 
-   const _version = "3.2.6";
+   const _version = "3.3.0";
    function version() {
        return _version
    }
@@ -69563,10 +70261,24 @@ ${indent}columns: ${matrix.columns}
            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]);
+                   }
                }
            });
 
@@ -69591,7 +70303,9 @@ ${indent}columns: ${matrix.columns}
            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);
@@ -70817,7 +71531,7 @@ ${indent}columns: ${matrix.columns}
            });
 
            this.searchInput.addEventListener('change', () => {
-               browser.doSearch(this.searchInput.value);
+               this.doSearch(this.searchInput.value);
            });
 
            const searchIconContainer = document.createElement('div');
@@ -70828,7 +71542,7 @@ ${indent}columns: ${matrix.columns}
            searchIconContainer.appendChild(searchIcon);
 
            searchIconContainer.addEventListener('click', () => {
-               browser.doSearch(this.searchInput.value);
+               this.doSearch(this.searchInput.value);
            });
 
            this.windowSizePanel = new WindowSizePanel(locusSizeGroup, browser);
@@ -70976,6 +71690,22 @@ ${indent}columns: ${matrix.columns}
            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() {
@@ -72227,6 +72957,9 @@ ${indent}columns: ${matrix.columns}
                    aliasRecord["_cap"] = cap;
                }
 
+               const chrPrefixAlias = aliasRecord.chr.startsWith("chr") ? aliasRecord.chr.substring(3) : "chr" + aliasRecord.chr;
+               aliasRecord["_chrprefix_"] = chrPrefixAlias;
+
        }
 
    }
@@ -72251,7 +72984,7 @@ ${indent}columns: ${matrix.columns}
        }
 
        async preload(chrNames) {
-           await this.reader.preload();
+          await this.reader.preload();
            for(let nm of chrNames) {
                await this.search(nm);
            }
@@ -72303,12 +73036,6 @@ ${indent}columns: ${matrix.columns}
            }
            return this.aliasRecordCache.get(alias)
        }
-
-       async getChromosomeNames() {
-           await this.reader.loadHeader();
-           return Array.from(this.reader.chrNames)
-       }
-
    }
 
    /**
@@ -72333,10 +73060,9 @@ ${indent}columns: ${matrix.columns}
            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
         *
@@ -72502,7 +73228,7 @@ ${indent}columns: ${matrix.columns}
            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) {
@@ -72520,37 +73246,20 @@ ${indent}columns: ${matrix.columns}
                    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();
+           if(bands.length > 0) {
+               this.cytobands.set(lastChr, bands);
            }
-           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();
-           }
-
-           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
@@ -72575,8 +73284,10 @@ ${indent}columns: ${matrix.columns}
            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';
        }
 
 
@@ -72584,49 +73295,45 @@ ${indent}columns: ${matrix.columns}
 
            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) {
@@ -72678,9 +73385,9 @@ ${indent}columns: ${matrix.columns}
        getHomeChromosomeName() {
            if (this.showWholeGenomeView() && this.chromosomes.has("all")) {
                return "all"
-           } else {
+           } else if (this.chromosomeNames) {
                return this.chromosomeNames[0]
-           }
+           } else ;
        }
 
        getChromosomeName(chr) {
@@ -72731,18 +73438,18 @@ ${indent}columns: ${matrix.columns}
                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;
                    }
                }
@@ -72874,6 +73581,10 @@ ${indent}columns: ${matrix.columns}
                return undefined
            }
        }
+
+       getHubURLs() {
+           return this.config.hubs
+       }
    }
 
    /**
@@ -72916,7 +73627,7 @@ ${indent}columns: ${matrix.columns}
        }
    }
 
-   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.
@@ -73450,7 +74161,7 @@ ${indent}columns: ${matrix.columns}
            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);
@@ -73460,10 +74171,10 @@ ${indent}columns: ${matrix.columns}
 
        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
            }
 
        }
@@ -73625,7 +74336,8 @@ ${indent}columns: ${matrix.columns}
            } else {
                session = options;
            }
-           return this.loadSessionObject(session)
+
+           await this.loadSessionObject(session);
        }
 
        /**
@@ -73654,8 +74366,7 @@ ${indent}columns: ${matrix.columns}
                    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
@@ -73746,7 +74457,7 @@ ${indent}columns: ${matrix.columns}
            }
 
            // ROIs
-           if(session.showROIOverlays !== undefined) {
+           if (session.showROIOverlays !== undefined) {
                this.roiManager.showOverlays = session.showROIOverlays;
            }
            this.roiManager.clearROIs();
@@ -73760,12 +74471,16 @@ ${indent}columns: ${matrix.columns}
            // 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);
+
                    }
 
                }
@@ -73806,23 +74521,14 @@ ${indent}columns: ${matrix.columns}
                }
            }
 
-           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);
 
        }
 
@@ -73883,13 +74589,8 @@ ${indent}columns: ${matrix.columns}
            }
 
            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({
@@ -73928,7 +74629,7 @@ ${indent}columns: ${matrix.columns}
            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.
@@ -73958,22 +74659,9 @@ ${indent}columns: ${matrix.columns}
 
            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
         *
@@ -74070,18 +74758,23 @@ ${indent}columns: ${matrix.columns}
            }
 
            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
        }
 
@@ -74095,54 +74788,23 @@ ${indent}columns: ${matrix.columns}
         */
        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();
@@ -74159,62 +74821,53 @@ ${indent}columns: ${matrix.columns}
                }
 
                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()]);
+           track.trackView.enableTrackSelection(this.navbar.getEnableTrackSelection());
 
-           newTrack.trackView.enableTrackSelection(this.navbar.getEnableTrackSelection());
-
-           return newTrack
+           return track
 
        }
 
@@ -74359,7 +75012,6 @@ ${indent}columns: ${matrix.columns}
            }
        }
 
-
        reorderTracks() {
 
            this.trackViews.sort(function (a, b) {
@@ -74596,19 +75248,19 @@ ${indent}columns: ${matrix.columns}
 
            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 {
@@ -74632,8 +75284,8 @@ ${indent}columns: ${matrix.columns}
                // 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;
@@ -74642,7 +75294,7 @@ ${indent}columns: ${matrix.columns}
                    }
                }
 
-               await Promise.all(otherTrackViews.map(tv => tv.updateViews()));
+               await Promise.all(otherTrackViews.map(trackView => trackView.updateViews()));
            }
 
        }
@@ -74665,10 +75317,10 @@ ${indent}columns: ${matrix.columns}
                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]);
@@ -74685,6 +75337,46 @@ ${indent}columns: ${matrix.columns}
            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
        }
@@ -74870,29 +75562,12 @@ ${indent}columns: ${matrix.columns}
        }
 
        /**
-        * @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
@@ -74905,6 +75580,10 @@ ${indent}columns: ${matrix.columns}
        async search(stringOrArray, init) {
 
            const loci = await search(this, stringOrArray);
+           return this.updateLoci(loci, init)
+       }
+
+       async updateLoci(loci, init) {
 
            if (loci && loci.length > 0) {
 
@@ -74941,9 +75620,9 @@ ${indent}columns: ${matrix.columns}
            }
        }
 
-       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());
@@ -75081,9 +75760,9 @@ ${indent}columns: ${matrix.columns}
            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
                }
            }
@@ -75426,8 +76105,6 @@ ${indent}columns: ${matrix.columns}
            }
        }
 
-
-
        // Navbar delegates
        get sampleInfoControl() {
            return this.navbar.sampleInfoControl
@@ -75449,6 +76126,9 @@ ${indent}columns: ${matrix.columns}
            return this.navbar.sampleNameControl
        }
 
+       async blat(sequence) {
+           return createBlatTrack({sequence, browser: this, name: 'Blat', title: 'Blat'})
+       }
    }
 
    function getFileExtension(input) {
@@ -75474,7 +76154,7 @@ ${indent}columns: ${matrix.columns}
    }
 
    /**
-    * 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
     *
@@ -75482,40 +76162,14 @@ ${indent}columns: ${matrix.columns}
     */
    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();
    }
 
 
@@ -75984,7 +76638,8 @@ ${indent}columns: ${matrix.columns}
        registerTrackClass,
        registerTrackCreatorFunction,
        registerFileFormats,
-       loadSessionFile: Browser.loadSessionFile
+       loadSessionFile: Browser.loadSessionFile,
+       loadHub
    };
 
    return index;