igv 3.0.1 → 3.0.3

package/dist/igv.js

@@ -19021,13 +19021,13 @@
             if (Array.isArray(trackViewOrTrackViewList)) {
                 dataRange = { min: Number.MAX_SAFE_INTEGER, max:-Number.MAX_SAFE_INTEGER };
                 for (const trackView of trackViewOrTrackViewList) {
-                    if (trackView.dataRange) {
-                        dataRange.min = Math.min(trackView.dataRange.min, dataRange.min);
-                        dataRange.max = Math.max(trackView.dataRange.max, dataRange.max);
+                    if (trackView.track.dataRange) {
+                        dataRange.min = Math.min(trackView.track.dataRange.min, dataRange.min);
+                        dataRange.max = Math.max(trackView.track.dataRange.max, dataRange.max);
                     }
                 }
             } else {
-                dataRange = trackViewOrTrackViewList.dataRange;
+                dataRange = trackViewOrTrackViewList.track.dataRange;
             }
 
             if (dataRange) {
@@ -19069,7 +19069,7 @@
                 } else {
                     const list = Array.isArray(trackViewOfTrackViewList) ? trackViewOfTrackViewList : [ trackViewOfTrackViewList ];
                     for (const trackView of list) {
-                        trackView.dataRange = { min, max };
+                        trackView.track.setDataRange({ min, max });
                     }
 
                 }
@@ -26702,6 +26702,14 @@
             return menuItems
         }
 
+        setDataRange({ min, max }) {
+
+            this.dataRange = { min, max };
+            this.autoscale = false;
+            this.autoscaleGroup = undefined;
+            this.trackView.repaintViews();
+        }
+
         /**
          * Return the first feature in this track whose start position is > position
          * @param chr
@@ -27069,7 +27077,7 @@
             this.filter = tokens[6];
             this.info = {};
             const infoStr = tokens[7];
-            if (infoStr) {
+            if (infoStr && infoStr !== '.') {
                 for (let elem of infoStr.split(';')) {
                     var element = elem.split('=');
                     this.info[element[0]] = element[1];
@@ -27228,9 +27236,10 @@
                 }
             }
 
-            if (this.info) {
+            const infoKeys = Object.keys(this.info);
+            if (this.info && infoKeys.length > 0) {
                 fields.push({html: '<hr style="border-top: dotted 1px;border-color: #c9c3ba" />'});
-                for (let key of Object.keys(this.info)) {
+                for (let key of infoKeys) {
                     fields.push({name: key, value: arrayToString(decodeURIComponent(this.info[key]))});
                 }
             }
@@ -27297,7 +27306,7 @@
         }
 
         getAttributeValue(key) {
-           return this.mate.getAttributeValue(key)
+            return this.mate.getAttributeValue(key)
         }
 
         getInfo(tag) {
@@ -27320,7 +27329,7 @@
             popupData.push({name: 'Pos', value: `${numberFormatter$1(this.pos)}`});
             popupData.push({html: '<hr style="border-top: dotted 1px;border-color: #c9c3ba" />'});
             popupData.push("SV");
-            popupData.push(... this.mate.popupData(genomicLocation, genomeId));
+            popupData.push(...this.mate.popupData(genomicLocation, genomeId));
 
             return popupData
         }
@@ -30741,346 +30750,746 @@
 
     }
 
-    const DEFAULT_MAX_WG_COUNT = 10000;
-
-    /**
-     * feature source for "bed like" files (tab or whitespace delimited files with 1 feature per line: bed, gff, vcf, etc)
+    /*
+     * The MIT License (MIT)
      *
-     * @param config
-     * @constructor
+     * Copyright (c) 2016 University of California San Diego
+     * Author: Jim Robinson
+     *
+     * Permission is hereby granted, free of charge, to any person obtaining a copy
+     * of this software and associated documentation files (the "Software"), to deal
+     * in the Software without restriction, including without limitation the rights
+     * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+     * copies of the Software, and to permit persons to whom the Software is
+     * furnished to do so, subject to the following conditions:
+     *
+     * The above copyright notice and this permission notice shall be included in
+     * all copies or substantial portions of the Software.
+     *
+     *
+     * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+     * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+     * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+     * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+     * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+     * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+     * THE SOFTWARE.
      */
-    class TextFeatureSource extends BaseFeatureSource {
 
-        constructor(config, genome) {
+    const GZIP_FLAG = 0x1;
 
-            super(genome);
+    class TDFReader {
 
-            this.config = config || {};
+        constructor(config, genome) {
+            this.config = config;
             this.genome = genome;
-            this.sourceType = (config.sourceType === undefined ? "file" : config.sourceType);
-            this.maxWGCount = config.maxWGCount || DEFAULT_MAX_WG_COUNT;
-            this.windowFunctions = ["mean", "min", "max", "none"];
+            this.path = config.url;
+            this.groupCache = {};
+            this.datasetCache = {};
+        }
 
-            const queryableFormats = new Set(["bigwig", "bw", "bigbed", "bb", "biginteract", "biggenepred", "bignarrowpeak", "tdf"]);
 
-            this.queryable = config.indexURL || config.queryable === true;   // False by default, unless explicitly set
-            if (config.reader) {
-                // Explicit reader implementation
-                this.reader = config.reader;
-                this.queryable = config.queryable !== false;
-            } else if (config.sourceType === "ga4gh") {
-                throw Error("Unsupported source type 'ga4gh'")
-            } else if ((config.type === "eqtl" || config.type === "qtl") && config.sourceType === "gtex-ws") {
-                this.reader = new GtexReader(config);
-                this.queryable = true;
-            } else if ("htsget" === config.sourceType) {
-                this.reader = new HtsgetVariantReader(config, genome);
-                this.queryable = true;
-            } else if (config.sourceType === 'ucscservice') {
-                this.reader = new UCSCServiceReader(config.source);
-                this.queryable = true;
-            } else if (config.sourceType === 'custom') {
-                this.reader = new CustomServiceReader(config.source);
-                this.queryable = false !== config.source.queryable;
-            } else if ('service' === config.sourceType) {
-                this.reader = new FeatureFileReader(config, genome);
-                this.queryable = true;
-            } else {
-                // File of some type (i.e. not a webservice)
-                this.reader = new FeatureFileReader(config, genome);
-                if (config.queryable !== undefined) {
-                    this.queryable = config.queryable;
-                } else if (queryableFormats.has(config.format) || this.reader.indexed) {
-                    this.queryable = true;
-                } else ;
+        async readHeader() {
+
+            if (this.magic !== undefined) {
+                return this   // Already read
             }
 
-            // Flag indicating if features loaded by this source can be searched for by name or attribute, true by default
-            this.searchable = config.searchable !== false;
+            let data = await igvxhr.loadArrayBuffer(this.path, buildOptions(this.config, {range: {start: 0, size: 64000}}));
+            let binaryParser = new BinaryParser$1(new DataView(data));
+            this.magic = binaryParser.getInt();
+            this.version = binaryParser.getInt();
+            this.indexPos = binaryParser.getLong();
+            this.indexSize = binaryParser.getInt();
+            binaryParser.getInt();
 
-        }
 
-        async defaultVisibilityWindow() {
-            if (this.reader && typeof this.reader.defaultVisibilityWindow === 'function') {
-                return this.reader.defaultVisibilityWindow()
+            if (this.version >= 2) {
+                let nWindowFunctions = binaryParser.getInt();
+                this.windowFunctions = [];
+                while (nWindowFunctions-- > 0) {
+                    this.windowFunctions.push(binaryParser.getString());
+                }
             }
-        }
 
-        async trackType() {
-            const header = await this.getHeader();
-            if (header) {
-                return header.type
-            } else {
-                return undefined    // Convention for unknown or unspecified
-            }
-        }
+            this.trackType = binaryParser.getString();
+            this.trackLine = binaryParser.getString();
 
-        async getHeader() {
-            if (!this.header) {
+            let nTracks = binaryParser.getInt();
+            this.trackNames = [];
+            while (nTracks-- > 0) {
+                this.trackNames.push(binaryParser.getString());
+            }
+            this.genomeID = binaryParser.getString();
+            this.flags = binaryParser.getInt();
+            this.compressed = (this.flags & GZIP_FLAG) !== 0;
 
-                if (this.reader && typeof this.reader.readHeader === "function") {
-                    const header = await this.reader.readHeader();
-                    if (header) {
-                        this.header = header;
-                        if (header.format) {
-                            this.config.format = header.format;
-                        }
-                    } else {
-                        this.header = {};
-                    }
-                } else {
-                    this.header = {};
+            // Now read index
+            data = await igvxhr.loadArrayBuffer(this.path, buildOptions(this.config, {
+                range: {
+                    start: this.indexPos,
+                    size: this.indexSize
                 }
+            }));
+            binaryParser = new BinaryParser$1(new DataView(data));
+            this.datasetIndex = {};
+            let nEntries = binaryParser.getInt();
+            while (nEntries-- > 0) {
+                const name = binaryParser.getString();
+                const pos = binaryParser.getLong();
+                const size = binaryParser.getInt();
+                this.datasetIndex[name] = {position: pos, size: size};
             }
-            return this.header
+
+            this.groupIndex = {};
+            nEntries = binaryParser.getInt();
+            while (nEntries-- > 0) {
+                const name = binaryParser.getString();
+                const pos = binaryParser.getLong();
+                const size = binaryParser.getInt();
+                this.groupIndex[name] = {position: pos, size: size};
+            }
+
+            return this
         }
 
-        /**
-         * Required function for all data source objects.  Fetches features for the
-         * range requested.
-         *
-         * This function is quite complex due to the variety of reader types backing it, some indexed, some queryable,
-         * some not.
-         *
-         * @param chr
-         * @param start
-         * @param end
-         * @param bpPerPixel
-         */
-        async getFeatures({chr, start, end, bpPerPixel, visibilityWindow}) {
+        async readDataset(chr, windowFunction, zoom) {
 
-            const isWholeGenome = ("all" === chr.toLowerCase());
+            const key = chr + "_" + windowFunction + "_" + zoom;
 
-            start = start || 0;
-            end = end || Number.MAX_SAFE_INTEGER;
+            if (this.datasetCache[key]) {
+                return this.datasetCache[key]
 
-            // Various conditions that can require a feature load
-            //   * view is "whole genome" but no features are loaded
-            //   * cache is disabled
-            //   * cache does not contain requested range
-            // const containsRange = this.featureCache.containsRange(new GenomicInterval(queryChr, start, end))
-            if ((isWholeGenome && !this.wgFeatures && this.supportsWholeGenome()) ||
-                this.config.disableCache ||
-                !this.featureCache ||
-                !this.featureCache.containsRange(new GenomicInterval(chr, start, end))) {
-                await this.loadFeatures(chr, start, end, visibilityWindow);
-            }
+            } else {
+                await this.readHeader();
+                const wf = (this.version < 2) ? "" : "/" + windowFunction;
+                const zoomString = (chr.toLowerCase() === "all" || zoom === undefined) ? "0" : zoom.toString();
 
-            if (isWholeGenome) {
-                if (!this.wgFeatures) {
-                    if (this.supportsWholeGenome()) {
-                        this.wgFeatures = await computeWGFeatures(this.featureCache.getAllFeatures(), this.genome, this.maxWGCount);
-                    } else {
-                        this.wgFeatures = [];
+                let dsName;
+                if (windowFunction === "raw") {
+                    dsName = "/" + chr + "/raw";
+                } else {
+                    dsName = "/" + chr + "/z" + zoomString + wf;
+                }
+                const indexEntry = this.datasetIndex[dsName];
+
+                if (indexEntry === undefined) {
+                    return undefined
+                }
+
+                const data = await igvxhr.loadArrayBuffer(this.path, buildOptions(this.config, {
+                    range: {
+                        start: indexEntry.position,
+                        size: indexEntry.size
                     }
+                }));
+
+                if (!data) {
+                    return undefined
                 }
-                return this.wgFeatures
-            } else {
-                return this.featureCache.queryFeatures(chr, start, end)
-            }
-        }
 
-        async findFeatures(fn) {
-            return this.featureCache ? this.featureCache.findFeatures(fn) : []
-        }
+                const binaryParser = new BinaryParser$1(new DataView(data));
+                let nAttributes = binaryParser.getInt();
+                const attributes = {};
+                while (nAttributes-- > 0) {
+                    attributes[binaryParser.getString()] = binaryParser.getString();
+                }
+                const dataType = binaryParser.getString();
+                const tileWidth = binaryParser.getFloat();
+                let nTiles = binaryParser.getInt();
+                const tiles = [];
+                while (nTiles-- > 0) {
+                    tiles.push({position: binaryParser.getLong(), size: binaryParser.getInt()});
+                }
 
-        supportsWholeGenome() {
-            return !this.queryable   // queryable (indexed, web services) sources don't support whole genome view
-        }
+                const dataset = {
+                    name: dsName,
+                    attributes: attributes,
+                    dataType: dataType,
+                    tileWidth: tileWidth,
+                    tiles: tiles
+                };
 
-        // TODO -- experimental, will only work for non-indexed sources
-        getAllFeatures() {
-            if (this.queryable || !this.featureCache) {   // queryable sources don't support all features
-                return []
-            } else {
-                return this.featureCache.getAllFeatures()
+                this.datasetCache[key] = dataset;
+                return dataset
             }
         }
 
+        async readRootGroup() {
 
-        async loadFeatures(chr, start, end, visibilityWindow) {
+            const genome = this.genome;
+            const rootGroup = this.groupCache["/"];
+            if (rootGroup) {
+                return rootGroup
+            } else {
 
-            await this.getHeader();
+                const group = await this.readGroup("/");
+                const names = group["chromosomes"];
+                const maxZoomString = group["maxZoom"];
 
-            const reader = this.reader;
-            let intervalStart = start;
-            let intervalEnd = end;
+                // Now parse out interesting attributes.
+                if (maxZoomString) {
+                    this.maxZoom = Number(maxZoomString);
+                }
 
-            // chr aliasing
-            let queryChr = chr;
-            if (!this.chrAliasManager && this.reader && this.reader.sequenceNames) {
-                this.chrAliasManager = new ChromAliasManager(this.reader.sequenceNames, this.genome);
-            }
-            if (this.chrAliasManager) {
-                queryChr = await this.chrAliasManager.getAliasName(chr);
-            }
+                const totalCountString = group["totalCount"];
+                if (totalCountString) {
+                    group.totalCount = Number(totalCountString);
+                }
 
-            // Use visibility window to potentially expand query interval.
-            // This can save re-queries as we zoom out.  Visibility window <= 0 is a special case
-            // indicating whole chromosome should be read at once.
-            if ((!visibilityWindow || visibilityWindow <= 0) && this.config.expandQuery !== false) {
-                // Whole chromosome
-                const chromosome = this.genome ? this.genome.getChromosome(queryChr) : undefined;
-                intervalStart = 0;
-                intervalEnd = Math.max(chromosome ? chromosome.bpLength : Number.MAX_SAFE_INTEGER, end);
-            } else if (visibilityWindow > (end - start) && this.config.expandQuery !== false) {
-                let expansionWindow = Math.min(4.1 * (end - start), visibilityWindow);
-                if(this.config.minQuerySize && expansionWindow < this.config.minQuerySize) {
-                    expansionWindow = this.config.minQuerySize;
+                // Chromosome names
+                const chrAliasTable = {};
+                if (names) {
+                    names.split(",").forEach(function (chr) {
+                        const canonicalName = genome.getChromosomeName(chr);
+                        chrAliasTable[canonicalName] = chr;
+                    });
                 }
-                intervalStart = Math.max(0, (start + end - expansionWindow) / 2);
-                intervalEnd = intervalStart + expansionWindow;
-            }
+                this.chrAliasTable = chrAliasTable;
 
-            let features = await reader.readFeatures(queryChr, intervalStart, intervalEnd);
-            if (this.queryable === undefined) {
-                this.queryable = reader.indexed;
+                this.groupCache["/"] = group;
+                return group
             }
+        }
 
-            const genomicInterval = this.queryable ?
-                new GenomicInterval(chr, intervalStart, intervalEnd) :
-                undefined;
+        async readGroup(name) {
 
-            if (features) {
+            const group = this.groupCache[name];
+            if (group) {
+                return group
+            } else {
 
-                // Assign overlapping features to rows
-                if (this.config.format !== "wig" && this.config.type !== "junctions") {
-                    const maxRows = this.config.maxRows || Number.MAX_SAFE_INTEGER;
-                    packFeatures(features, maxRows);
+                await this.readHeader();
+                const indexEntry = this.groupIndex[name];
+                if (indexEntry === undefined) {
+                    return undefined
                 }
 
-                // Note - replacing previous cache with new one.  genomicInterval is optional (might be undefined => includes all features)
-                this.featureCache = new FeatureCache$1(features, this.genome, genomicInterval);
+                const data = await igvxhr.loadArrayBuffer(this.path, buildOptions(this.config, {
+                    range: {
+                        start: indexEntry.position,
+                        size: indexEntry.size
+                    }
+                }));
 
-                // If track is marked "searchable"< cache features by name -- use this with caution, memory intensive
-                if (this.searchable) {
-                    this.addFeaturesToDB(features, this.config);
+                if (!data) {
+                    return undefined
                 }
-            } else {
-                this.featureCache = new FeatureCache$1([], genomicInterval);     // Empty cache
-            }
-        }
 
-        addFeaturesToDB(featureList, config) {
-            if (!this.featureMap) {
-                this.featureMap = new Map();
-            }
-            const searchableFields = config.searchableFields || ["name", "transcript_id", "gene_id", "gene_name", "id"];
-            for (let feature of featureList) {
-                for (let field of searchableFields) {
-                    let key;
-                    if (typeof feature.getAttributeValue === 'function') {
-                        key = feature.getAttributeValue(field);
-                    }
-                    if (key) {
-                        key = key.replaceAll(' ', '+').toUpperCase();
-                        // If feature is already present keep largest one
-                        if (this.featureMap.has(key)) {
-                            const f2 = this.featureMap.get(key);
-                            if (feature.end - feature.start < f2.end - f2.start) {
-                                continue
-                            }
-                        }
-                        this.featureMap.set(key, feature);
-                    }
+                const binaryParser = new BinaryParser$1(new DataView(data));
+                const group = {name: name};
+                let nAttributes = binaryParser.getInt();
+                while (nAttributes-- > 0) {
+                    const key = binaryParser.getString();
+                    const value = binaryParser.getString();
+                    group[key] = value;
                 }
+                this.groupCache[name] = group;
+                return group
             }
         }
 
-        search(term) {
-            if (this.featureMap) {
-                return this.featureMap.get(term.toUpperCase())
-            }
-
-        }
-    }
-
-    /**
-     * 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 {
+        async readTiles(tileIndeces, nTracks) {
 
-        constructor(header, nameToID, valueToKey, sumLengths) {
-            this.header = header;
-            this.nameToId = nameToID;
-            this.idToName = valueToKey;
-            this.sumLengths = sumLengths;
-        }
+            tileIndeces.sort(function (a, b) {
+                return a.position - b.position
+            });
 
-        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();
+            tileIndeces = tileIndeces.filter(function (idx) {
+                return idx.size > 0
+            });
 
-                const header = {magic, blockSize, keySize, valSize, itemCount, reserved};
-                const nameToId = new Map();
-                const idToName = [];
-                let sumLengths = 0;
-                const readTreeNode = (offset) => {
+            if (tileIndeces.length === 0) {
+                return []
+            }
 
-                    if (offset >= 0) binaryParser.position = offset;
-                    const type = binaryParser.getByte();
-                    binaryParser.getByte();
-                    const count = binaryParser.getUShort();
+            const tiles = [];
 
-                    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;
+            for (let indexEntry of tileIndeces) {
 
-                            } 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;
-                        }
+                const data = await igvxhr.loadArrayBuffer(this.path, buildOptions(this.config, {
+                    range: {
+                        start: indexEntry.position,
+                        size: indexEntry.size
                     }
-                };
+                }));
 
-                // Recursively walk tree to populate dictionary
-                readTreeNode(binaryParser);
+                let tileData;
+                try {
+                    tileData = this.compressed ? inflate_1$3(data).buffer : data;
+                } catch (e) {
+                    console.error(e);
+                    continue
+                }
 
-                return new ChromTree(header, nameToId, idToName, sumLengths)
+                const binaryParser = new BinaryParser$1(new DataView(tileData));
+                const type = binaryParser.getString();
+                let tile;
+                switch (type) {
+                    case "fixedStep":
+                        tile = createFixedStep(binaryParser, nTracks);
+                        break
+                    case "variableStep":
+                        tile = createVariableStep(binaryParser, nTracks);
+                        break
+                    case "bed":
+                    case "bedWithName":
+                        tile = createBed(binaryParser, nTracks, type);
+                        break
+                    default:
+                        throw "Unknown tile type: " + type
+                }
+                tiles.push(tile);
             }
+            return tiles
         }
 
-    }
-
-    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
+        async readTile(indexEntry, nTracks) {
 
-    class RPTree {
+            let data = await igvxhr.loadArrayBuffer(this.path, buildOptions(this.config, {
+                range: {
+                    start: indexEntry.position,
+                    size: indexEntry.size
+                }
+            }));
 
-        static magic = 610839776
+            if (this.compressed) {
+                const plain = inflate_1$3(data);
+                data = plain.buffer;
+            }
+
+            const binaryParser = new BinaryParser$1(new DataView(data));
+            const type = binaryParser.getString();
+            switch (type) {
+                case "fixedStep":
+                    return createFixedStep(binaryParser, nTracks)
+                case "variableStep":
+                    return createVariableStep(binaryParser, nTracks)
+                case "bed":
+                case "bedWithName":
+                    return createBed(binaryParser, nTracks, type)
+                default:
+                    throw "Unknown tile type: " + type
+            }
+        }
+
+    }
+
+    function createFixedStep(binaryParser, nTracks) {
+        const nPositions = binaryParser.getInt();
+        const start = binaryParser.getInt();
+        const span = binaryParser.getFloat();
+
+        const data = [];
+        let nt = nTracks;
+        while (nt-- > 0) {
+            let np = nPositions;
+            const dtrack = [];
+            while (np-- > 0) {
+                dtrack.push(binaryParser.getFloat());
+            }
+            data.push(dtrack);
+        }
+
+        return {
+            type: "fixedStep",
+            start: start,
+            span: span,
+            data: data,
+            nTracks: nTracks,
+            nPositions: nPositions
+        }
+    }
+
+    function createVariableStep(binaryParser, nTracks) {
+
+        const tileStart = binaryParser.getInt();
+        const span = binaryParser.getFloat();
+        const nPositions = binaryParser.getInt();
+        const start = [];
+
+        let np = nPositions;
+        while (np-- > 0) {
+            start.push(binaryParser.getInt());
+        }
+        binaryParser.getInt();  // # of samples, ignored but should === nTracks
+
+        const data = [];
+        let nt = nTracks;
+        while (nt-- > 0) {
+            np = nPositions;
+            const dtrack = [];
+            while (np-- > 0) {
+                dtrack.push(binaryParser.getFloat());
+            }
+            data.push(dtrack);
+        }
+
+        return {
+            type: "variableStep",
+            tileStart: tileStart,
+            span: span,
+            start: start,
+            data: data,
+            nTracks: nTracks,
+            nPositions: nPositions
+        }
+    }
+
+    function createBed(binaryParser, nTracks, type) {
+
+        const nPositions = binaryParser.getInt();
+
+        let n = nPositions;
+        const start = [];
+        while (n-- > 0) {
+            start.push(binaryParser.getInt());
+        }
+
+        n = nPositions;
+        const end = [];
+        while (n-- > 0) {
+            end.push(binaryParser.getInt());
+        }
+
+        binaryParser.getInt();  // # of samples, ignored but should === nTracks
+        const data = [];
+        let nt = nTracks;
+        while (nt-- > 0) {
+            let np = nPositions;
+            const dtrack = [];
+            while (np-- > 0) {
+                dtrack.push(binaryParser.getFloat());
+            }
+            data.push(dtrack);
+        }
+
+        if (type === "bedWithName") {
+            n = nPositions;
+            const name = [];
+            while (n-- > 0) {
+                name.push(binaryParser.getString());
+            }
+        }
+
+        return {
+            type: type,
+            start: start,
+            end: end,
+            data: data,
+            nTracks: nTracks,
+            nPositions: nPositions
+        }
+    }
+
+    /*
+     * The MIT License (MIT)
+     *
+     * Copyright (c) 2016 University of California San Diego
+     * Author: Jim Robinson
+     *
+     * Permission is hereby granted, free of charge, to any person obtaining a copy
+     * of this software and associated documentation files (the "Software"), to deal
+     * in the Software without restriction, including without limitation the rights
+     * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+     * copies of the Software, and to permit persons to whom the Software is
+     * furnished to do so, subject to the following conditions:
+     *
+     * The above copyright notice and this permission notice shall be included in
+     * all copies or substantial portions of the Software.
+     *
+     *
+     * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+     * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+     * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+     * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+     * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+     * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+     * THE SOFTWARE.
+     */
+
+    class TDFSource extends BaseFeatureSource {
+
+        #wgValues = {}
+        searchable = false
+
+
+        constructor(config, genome) {
+            super(genome);
+            this.genome = genome;
+            this.reader = new TDFReader(config, genome);
+            this.queryable = true;
+        }
+
+        async getFeatures({chr, start, end, bpPerPixel, windowFunction = "mean"}) {
+
+            if (chr.toLowerCase() === "all") {
+                return this.getWGValues(windowFunction, bpPerPixel)
+            } else {
+                return this._getFeatures(chr, start, end, bpPerPixel, windowFunction)
+            }
+        }
+        async _getFeatures(chr, start, end, bpPerPixel, windowFunction) {
+            const genomicInterval = new GenomicInterval(chr, start, end);
+            const genome = this.genome;
+
+
+            if (!this.rootGroup) {
+                this.rootGroup = await this.reader.readRootGroup();
+                if (!this.normalizationFactor) {
+                    const totalCount = this.rootGroup.totalCount;
+                    if (totalCount) {
+                        this.normalizationFactor = 1.0e6 / totalCount;
+                    }
+                }
+            }
+
+            genomicInterval.bpPerPixel = bpPerPixel;
+            const zoom = zoomLevelForScale$1(chr, bpPerPixel, genome);
+            let queryChr = this.reader.chrAliasTable[chr];
+            let maxZoom = this.reader.maxZoom;
+            if (queryChr === undefined) queryChr = chr;
+            if (maxZoom === undefined) maxZoom = -1;
+
+            const wf = zoom > maxZoom ? "raw" : windowFunction;
+            const dataset = await this.reader.readDataset(queryChr, wf, zoom);
+            if (dataset == null) {
+                return []
+            }
+
+            const tileWidth = dataset.tileWidth;
+            const startTile = Math.floor(start / tileWidth);
+            const endTile = Math.floor(end / tileWidth);
+            const NTRACKS = 1;   // TODO read this
+            const tiles = await this.reader.readTiles(dataset.tiles.slice(startTile, endTile + 1), NTRACKS);
+            const features = [];
+            for (let tile of tiles) {
+                switch (tile.type) {
+                    case "bed":
+                        decodeBedTile(tile, chr, start, end, bpPerPixel, features);
+                        break
+                    case "variableStep":
+                        decodeVaryTile(tile, chr, start, end, bpPerPixel, features);
+                        break
+                    case "fixedStep":
+                        decodeFixedTile(tile, chr, start, end, bpPerPixel, features);
+                        break
+                    default:
+                        throw ("Unknown tile type: " + tile.type)
+                }
+            }
+            features.sort(function (a, b) {
+                return a.start - b.start
+            });
+
+            return features
+        }
+
+        get supportsWholeGenome() {
+            return true
+        }
+
+        get windowFunctions() {
+            return this.reader.windowFunctions
+        }
+
+        async getWGValues(windowFunction, bpPerPixel) {
+
+            const cached = this.#wgValues[windowFunction];
+            if (cached && cached.bpPerPixel > 0.8 * bpPerPixel && cached.bpPerPixel < 1.2 * bpPerPixel) {
+                return cached.values
+            } else {
+                const wgFeatures = [];
+                const genome = this.genome;
+                const chrNames = this.genome.wgChromosomeNames;
+                if (chrNames) {
+                    for (let c of genome.wgChromosomeNames) {
+                        const len = genome.getChromosome(c).bpLength;
+                        bpPerPixel = len / 1000;
+                        const chrFeatures = await this._getFeatures(c, 0, len, bpPerPixel, windowFunction);
+                        if (chrFeatures) {
+                            for (let f of chrFeatures) {
+                                const wg = Object.assign({}, f);
+                                wg.chr = "all";
+                                wg.start = genome.getGenomeCoordinate(f.chr, f.start);
+                                wg.end = genome.getGenomeCoordinate(f.chr, f.end);
+                                wg._f = f;
+                                wgFeatures.push(wg);
+                            }
+                        }
+                    }
+                }
+                this.#wgValues[windowFunction] = {values: wgFeatures, bpPerPixel};
+                return wgFeatures
+            }
+        }
+
+    }
+
+    function decodeBedTile(tile, chr, bpStart, bpEnd, bpPerPixel, features) {
+
+        const nPositions = tile.nPositions;
+        const starts = tile.start;
+        const ends = tile.end;
+        const data = tile.data[0];   // Single track for now
+        for (let i = 0; i < nPositions; i++) {
+            const s = starts[i];
+            const e = ends[i];
+            if (e < bpStart) continue
+            if (s > bpEnd) break
+            features.push({
+                chr: chr,
+                start: s,
+                end: e,
+                value: data[i]
+            });
+        }
+    }
+
+    function decodeVaryTile(tile, chr, bpStart, bpEnd, bpPerPixel, features) {
+
+        const nPositions = tile.nPositions;
+        const starts = tile.start;
+        const span = tile.span;
+        const data = tile.data[0];   // Single track for now
+        for (let i = 0; i < nPositions; i++) {
+            const s = starts[i];
+            const e = s + span;
+            if (e < bpStart) continue
+            if (s > bpEnd) break
+            features.push({
+                chr: chr,
+                start: s,
+                end: e,
+                value: data[i]
+            });
+        }
+    }
+
+    function decodeFixedTile(tile, chr, bpStart, bpEnd, bpPerPixel, features) {
+
+        const nPositions = tile.nPositions;
+        let s = tile.start;
+        const span = tile.span;
+        const data = tile.data[0];   // Single track for now
+
+        for (let i = 0; i < nPositions; i++) {
+            const e = s + span;
+            if (s > bpEnd) break
+            if (e >= bpStart) {
+                if (!Number.isNaN(data[i])) {
+                    features.push({
+                        chr: chr,
+                        start: s,
+                        end: e,
+                        value: data[i]
+                    });
+                }
+            }
+            s = e;
+        }
+    }
+
+
+    var log2 = Math.log(2);
+
+    function zoomLevelForScale$1(chr, bpPerPixel, genome) {
+
+        // Convert bpPerPixel to IGV "zoom" level.   This is a bit convoluted,  TDF is computed zoom levels assuming
+        // display in a 700 pixel window.  The fully zoomed out view of a chromosome is zoom level "0".
+        // Zoom level 1 is magnified 2X,  and so forth
+
+        var chrSize = genome.getChromosome(chr).bpLength;
+
+        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(binaryParser);
+
+                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
+
+    class RPTree {
+
+        static magic = 610839776
         littleEndian = true
         nodeCache = new Map()
 
@@ -31216,7 +31625,7 @@
 
     function getDecoder(definedFieldCount, fieldCount, autoSql, format) {
 
-        if ("biginteract" === format || (autoSql && ('chromatinInteract' === autoSql.table) || 'interact' === autoSql.table)) {
+        if ("biginteract" === format || (autoSql && ('chromatinInteract' === autoSql.table || 'interact' === autoSql.table))) {
             return decodeInteract
         } else {
             const standardFieldCount = definedFieldCount - 3;
@@ -31566,7 +31975,7 @@
             if (this.type === "bigwig") {
                 // Select a biwig "zoom level" appropriate for the current resolution.
                 const zoomLevelHeaders = await this.getZoomHeaders();
-                let zoomLevelHeader = bpPerPixel ? zoomLevelForScale$1(bpPerPixel, zoomLevelHeaders) : undefined;
+                let zoomLevelHeader = bpPerPixel ? zoomLevelForScale(bpPerPixel, zoomLevelHeaders) : undefined;
                 if (zoomLevelHeader) {
                     treeOffset = zoomLevelHeader.indexOffset;
                     decodeFunction = decodeZoomData;
@@ -32022,7 +32431,7 @@
         }
     }
 
-    function zoomLevelForScale$1(bpPerPixel, zoomLevelHeaders) {
+    function zoomLevelForScale(bpPerPixel, zoomLevelHeaders) {
         let level;
         for (let i = 0; i < zoomLevelHeaders.length; i++) {
             const zl = zoomLevelHeaders[i];
@@ -32210,7 +32619,7 @@
     class BWSource extends BaseFeatureSource {
 
         queryable = true
-        wgValues = {}
+        #wgValues = {}
         windowFunctions = ["mean", "min", "max"]
 
         constructor(config, genome) {
@@ -32222,12 +32631,15 @@
 
         async getFeatures({chr, start, end, bpPerPixel, windowFunction}) {
 
-            await  this.reader.loadHeader();
+            await this.reader.loadHeader();
             const isBigWig = this.reader.type === "bigwig";
 
-            const features = (chr.toLowerCase() === "all") ?
-                (isBigWig ? await this.getWGValues(windowFunction) : []) :
-                await this.reader.readFeatures(chr, start, chr, end, bpPerPixel, windowFunction);
+            let features;
+            if ("all" === chr.toLowerCase()) {
+                features = isBigWig ? await this.getWGValues(windowFunction, bpPerPixel) : [];
+            } else {
+                features = await this.reader.readFeatures(chr, start, chr, end, bpPerPixel, windowFunction);
+            }
 
             if (!isBigWig) {
                 pack(features);
@@ -32243,26 +32655,25 @@
             if (this.reader.type === "bigwig") {
                 return -1
             } else {
-                return this.reader.featureDensity ?  Math.floor(10000 / this.reader.featureDensity) : -1
+                return this.reader.featureDensity ? Math.floor(10000 / this.reader.featureDensity) : -1
             }
 
         }
 
-        async getWGValues(windowFunction) {
+        async getWGValues(windowFunction, bpPerPixel) {
 
-            const numberOfBins = 1000;      // This doesn't need to be precise
             const genome = this.genome;
-
-            if (this.wgValues[windowFunction]) {
-                return this.wgValues[windowFunction]
+            const cached = this.#wgValues[windowFunction];
+            if (cached && cached.bpPerPixel > 0.8 * bpPerPixel && cached.bpPerPixel < 1.2 * bpPerPixel) {
+                return cached.values
             } else {
 
-                const bpPerPixel = genome.getGenomeLength() / numberOfBins;
                 const features = await this.reader.readWGFeatures(bpPerPixel, windowFunction);
                 let wgValues = [];
                 for (let f of features) {
                     const chr = f.chr;
                     const offset = genome.getCumulativeOffset(chr);
+                    if (undefined === offset) continue
                     const wgFeature = Object.assign({}, f);
                     wgFeature.chr = "all";
                     wgFeature.start = offset + f.start;
@@ -32271,7 +32682,7 @@
                     wgValues.push(wgFeature);
                 }
                 wgValues.sort((a, b) => a.start - b.start);
-                this.wgValues[windowFunction] = wgValues;
+                this.#wgValues[windowFunction] = {values: wgValues, bpPerPixel};
                 return wgValues
             }
         }
@@ -32293,658 +32704,780 @@
         }
     }
 
-    /*
-     * The MIT License (MIT)
-     *
-     * Copyright (c) 2016 University of California San Diego
-     * Author: Jim Robinson
-     *
-     * Permission is hereby granted, free of charge, to any person obtaining a copy
-     * of this software and associated documentation files (the "Software"), to deal
-     * in the Software without restriction, including without limitation the rights
-     * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-     * copies of the Software, and to permit persons to whom the Software is
-     * furnished to do so, subject to the following conditions:
-     *
-     * The above copyright notice and this permission notice shall be included in
-     * all copies or substantial portions of the Software.
-     *
-     *
-     * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-     * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-     * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-     * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-     * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-     * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-     * THE SOFTWARE.
-     */
-
-    const GZIP_FLAG = 0x1;
+    const shim = .01;
+    const colorStripWidth = 4;
+    const axesXOffset = colorStripWidth + 1;
+    function paintAxis(ctx, width, height, colorOrUndefined) {
 
-    class TDFReader {
+        if (undefined === this.dataRange || undefined === this.dataRange.max || undefined === this.dataRange.min) {
+            return
+        }
 
-        constructor(config, genome) {
-            this.config = config;
-            this.genome = genome;
-            this.path = config.url;
-            this.groupCache = {};
-            this.datasetCache = {};
+        IGVGraphics.fillRect(ctx, 0, 0, width, height, { fillStyle: 'white' });
+        if (colorOrUndefined) {
+            IGVGraphics.fillRect(ctx, width - colorStripWidth - 2, 0, colorStripWidth, height, { fillStyle: colorOrUndefined });
         }
 
+        const flipAxis = (undefined === this.flipAxis) ? false : this.flipAxis;
 
-        async readHeader() {
+        const xTickStart = 0.95 * width - 8 - axesXOffset;
+        const xTickEnd   = 0.95 * width - axesXOffset;
 
-            if (this.magic !== undefined) {
-                return this   // Already read
-            }
+        const properties =
+            {
+                font: 'normal 10px Arial',
+                textAlign: 'right',
+                fillStyle: 'black',
+                strokeStyle: 'black',
+            };
 
-            let data = await igvxhr.loadArrayBuffer(this.path, buildOptions(this.config, {range: {start: 0, size: 64000}}));
-            let binaryParser = new BinaryParser$1(new DataView(data));
-            this.magic = binaryParser.getInt();
-            this.version = binaryParser.getInt();
-            this.indexPos = binaryParser.getLong();
-            this.indexSize = binaryParser.getInt();
-            binaryParser.getInt();
+        // tick
+        IGVGraphics.strokeLine(ctx, xTickStart, shim * height, xTickEnd, shim * height, properties);
+        IGVGraphics.fillText(ctx, prettyPrint(flipAxis ? this.dataRange.min : this.dataRange.max), xTickStart + 4, shim * height + 12, properties);
 
+        const y = (1.0 - shim) * height;
 
-            if (this.version >= 2) {
-                let nWindowFunctions = binaryParser.getInt();
-                this.windowFunctions = [];
-                while (nWindowFunctions-- > 0) {
-                    this.windowFunctions.push(binaryParser.getString());
-                }
-            }
+        // tick
+        IGVGraphics.strokeLine(ctx, xTickStart, y, xTickEnd, y, properties);
+        IGVGraphics.fillText(ctx, prettyPrint(flipAxis ? this.dataRange.max : this.dataRange.min), xTickStart + 4, y - 4, properties);
 
-            this.trackType = binaryParser.getString();
-            this.trackLine = binaryParser.getString();
+        // vertical axis
+        IGVGraphics.strokeLine(ctx, xTickEnd, shim * height, xTickEnd, y, properties);
 
-            let nTracks = binaryParser.getInt();
-            this.trackNames = [];
-            while (nTracks-- > 0) {
-                this.trackNames.push(binaryParser.getString());
-            }
-            this.genomeID = binaryParser.getString();
-            this.flags = binaryParser.getInt();
-            this.compressed = (this.flags & GZIP_FLAG) !== 0;
+        function prettyPrint(number) {
 
-            // Now read index
-            data = await igvxhr.loadArrayBuffer(this.path, buildOptions(this.config, {
-                range: {
-                    start: this.indexPos,
-                    size: this.indexSize
-                }
-            }));
-            binaryParser = new BinaryParser$1(new DataView(data));
-            this.datasetIndex = {};
-            let nEntries = binaryParser.getInt();
-            while (nEntries-- > 0) {
-                const name = binaryParser.getString();
-                const pos = binaryParser.getLong();
-                const size = binaryParser.getInt();
-                this.datasetIndex[name] = {position: pos, size: size};
+            if (number === 0) {
+                return "0"
+            } else if (Math.abs(number) >= 10) {
+                return number.toFixed()
+            } else if (Math.abs(number) >= 1) {
+                return number.toFixed(1)
+            } else if (Math.abs(number) >= 0.1) {
+                return number.toFixed(2)
+            } else {
+                return number.toExponential(1)
             }
+        }
+    }
 
-            this.groupIndex = {};
-            nEntries = binaryParser.getInt();
-            while (nEntries-- > 0) {
-                const name = binaryParser.getString();
-                const pos = binaryParser.getLong();
-                const size = binaryParser.getInt();
-                this.groupIndex[name] = {position: pos, size: size};
-            }
+    const DEFAULT_COLOR$2 = 'rgb(150, 150, 150)';
 
-            return this
+
+    class WigTrack extends TrackBase {
+
+        static defaults = {
+            height: 50,
+            flipAxis: false,
+            logScale: false,
+            windowFunction: 'mean',
+            graphType: 'bar',
+            normalize: undefined,
+            scaleFactor: undefined,
+            overflowColor: `rgb(255, 32, 255)`,
+            baselineColor: 'lightGray',
+            summarize: true
         }
 
-        async readDataset(chr, windowFunction, zoom) {
+        constructor(config, browser) {
+            super(config, browser);
+        }
 
-            const key = chr + "_" + windowFunction + "_" + zoom;
+        init(config) {
 
-            if (this.datasetCache[key]) {
-                return this.datasetCache[key]
+            super.init(config);
+
+            this.type = "wig";
+            this.featureType = 'numeric';
+            this.resolutionAware = true;
+            this.paintAxis = paintAxis;
 
+            const format = config.format ? config.format.toLowerCase() : config.format;
+            if (config.featureSource) {
+                this.featureSource = config.featureSource;
+                delete config.featureSource;
+            } else if ("bigwig" === format) {
+                this.featureSource = new BWSource(config, this.browser.genome);
+            } else if ("tdf" === format) {
+                this.featureSource = new TDFSource(config, this.browser.genome);
             } else {
-                await this.readHeader();
-                const wf = (this.version < 2) ? "" : "/" + windowFunction;
-                const zoomString = (chr.toLowerCase() === "all" || zoom === undefined) ? "0" : zoom.toString();
+                this.featureSource = FeatureSource(config, this.browser.genome);
+            }
 
-                let dsName;
-                if (windowFunction === "raw") {
-                    dsName = "/" + chr + "/raw";
-                } else {
-                    dsName = "/" + chr + "/z" + zoomString + wf;
-                }
-                const indexEntry = this.datasetIndex[dsName];
 
-                if (indexEntry === undefined) {
-                    return undefined
-                }
+            // Override autoscale default
+            if (config.max === undefined || config.autoscale === true) {
+                this.autoscale = true;
+            } else {
+                this.dataRange = {
+                    min: config.min || 0,
+                    max: config.max
+                };
+            }
+        }
 
-                const data = await igvxhr.loadArrayBuffer(this.path, buildOptions(this.config, {
-                    range: {
-                        start: indexEntry.position,
-                        size: indexEntry.size
-                    }
-                }));
+        async postInit() {
+            const header = await this.getHeader();
+            if (this.disposed) return   // This track was removed during async load
+            if (header) this.setTrackProperties(header);
+        }
 
-                if (!data) {
-                    return undefined
-                }
+        async getFeatures(chr, start, end, bpPerPixel) {
 
-                const binaryParser = new BinaryParser$1(new DataView(data));
-                let nAttributes = binaryParser.getInt();
-                const attributes = {};
-                while (nAttributes-- > 0) {
-                    attributes[binaryParser.getString()] = binaryParser.getString();
+            const windowFunction = this.windowFunction;
+
+            const features = await this.featureSource.getFeatures({
+                chr,
+                start,
+                end,
+                bpPerPixel,
+                visibilityWindow: this.visibilityWindow,
+                windowFunction
+            });
+            if (this.normalize && this.featureSource.normalizationFactor) {
+                const scaleFactor = this.featureSource.normalizationFactor;
+                for (let f of features) {
+                    f.value *= scaleFactor;
                 }
-                const dataType = binaryParser.getString();
-                const tileWidth = binaryParser.getFloat();
-                let nTiles = binaryParser.getInt();
-                const tiles = [];
-                while (nTiles-- > 0) {
-                    tiles.push({position: binaryParser.getLong(), size: binaryParser.getInt()});
+            }
+            if (this.scaleFactor) {
+                const scaleFactor = this.scaleFactor;
+                for (let f of features) {
+                    f.value *= scaleFactor;
                 }
+            }
 
-                const dataset = {
-                    name: dsName,
-                    attributes: attributes,
-                    dataType: dataType,
-                    tileWidth: tileWidth,
-                    tiles: tiles
-                };
+            // Summarize features to current resolution.  This needs to be done here, rather than in the "draw" function,
+            // for group autoscale to work.
+            if (this.summarize && ("mean" === windowFunction || "min" === windowFunction || "max" === windowFunction)) {
+                return summarizeData(features, start, bpPerPixel, windowFunction)
+            } else {
+                return features
+            }
+        }
 
-                this.datasetCache[key] = dataset;
-                return dataset
+        menuItemList() {
+            const items = [];
+
+            if (this.flipAxis !== undefined) {
+                items.push('<hr>');
+
+                function click() {
+                    this.flipAxis = !this.flipAxis;
+                    this.trackView.repaintViews();
+                }
+
+                items.push({label: 'Flip y-axis', click});
             }
+
+            if(this.featureSource.windowFunctions) {
+                items.push(...this.wigSummarizationItems());
+            }
+
+            items.push(...this.numericDataMenuItems());
+
+            return items
         }
 
-        async readRootGroup() {
+        wigSummarizationItems() {
 
-            const genome = this.genome;
-            const rootGroup = this.groupCache["/"];
-            if (rootGroup) {
-                return rootGroup
-            } else {
+            const windowFunctions = this.featureSource.windowFunctions;
 
-                const group = await this.readGroup("/");
-                const names = group["chromosomes"];
-                const maxZoomString = group["maxZoom"];
+            const menuItems = [];
+            menuItems.push('<hr/>');
+            menuItems.push("<div>Windowing function</div>");
+            for (const wf of windowFunctions) {
+                const object = $$1(createCheckbox(wf, this.windowFunction === wf));
 
-                // Now parse out interesting attributes.
-                if (maxZoomString) {
-                    this.maxZoom = Number(maxZoomString);
+                function clickHandler() {
+                    this.windowFunction = wf;
+                    this.trackView.updateViews();
                 }
 
-                const totalCountString = group["totalCount"];
-                if (totalCountString) {
-                    group.totalCount = Number(totalCountString);
-                }
+                menuItems.push({object, click: clickHandler});
+            }
 
-                // Chromosome names
-                const chrAliasTable = {};
-                if (names) {
-                    names.split(",").forEach(function (chr) {
-                        const canonicalName = genome.getChromosomeName(chr);
-                        chrAliasTable[canonicalName] = chr;
-                    });
-                }
-                this.chrAliasTable = chrAliasTable;
+            return menuItems
+        }
 
-                this.groupCache["/"] = group;
-                return group
+
+        async getHeader() {
+
+            if (typeof this.featureSource.getHeader === "function") {
+                this.header = await this.featureSource.getHeader();
             }
+            return this.header
         }
 
-        async readGroup(name) {
+        // TODO: refactor to igvUtils.js
+        getScaleFactor(min, max, height, logScale) {
+            const minValue = (logScale === true) ? ((min < 0) ? -Math.log10(Math.abs(min) + 1) : Math.log10(Math.abs(min) + 1)) : min;
+            const maxValue = (logScale === true) ? Math.log10(Math.abs(max) + 1) : max;
+            const scale = height / (maxValue - minValue);
+            return scale
+        }
 
-            const group = this.groupCache[name];
-            if (group) {
-                return group
-            } else {
+        computeYPixelValue(yValue, yScaleFactor) {
+            return (this.flipAxis ? (yValue - this.dataRange.min) : (this.dataRange.max - yValue)) * yScaleFactor
+        }
 
-                await this.readHeader();
-                const indexEntry = this.groupIndex[name];
-                if (indexEntry === undefined) {
-                    return undefined
-                }
+        computeYPixelValueInLogScale(yValue, yScaleFactor) {
+            let maxValue = this.dataRange.max;
+            let minValue =  this.dataRange.min;
+            minValue = (minValue < 0) ? -Math.log10(Math.abs(minValue) + 1) : Math.log10(Math.abs(minValue) + 1);
+            maxValue = (maxValue < 0) ? -Math.log10(Math.abs(maxValue) + 1) : Math.log10(Math.abs(maxValue) + 1);
+            
+            yValue = (yValue < 0) ? -Math.log10(Math.abs(yValue) +1) : Math.log10(yValue + 1);
+            return ((this.flipAxis ? (yValue - minValue) : (maxValue - yValue)) * yScaleFactor)
+        }
 
-                const data = await igvxhr.loadArrayBuffer(this.path, buildOptions(this.config, {
-                    range: {
-                        start: indexEntry.position,
-                        size: indexEntry.size
+        draw(options) {
+
+            const features = options.features;
+            const ctx = options.context;
+            const bpPerPixel = options.bpPerPixel;
+            const bpStart = options.bpStart;
+            const pixelWidth = options.pixelWidth;
+            const pixelHeight = options.pixelHeight - 1;
+            const bpEnd = bpStart + pixelWidth * bpPerPixel + 1;
+            
+            const scaleFactor = this.getScaleFactor(this.dataRange.min, this.dataRange.max, pixelHeight, this.logScale);
+            const yScale = (yValue) => this.logScale
+                ? this.computeYPixelValueInLogScale(yValue, scaleFactor)
+                : this.computeYPixelValue(yValue, scaleFactor);
+
+            if (features && features.length > 0) {
+
+                if (this.dataRange.min === undefined) this.dataRange.min = 0;
+
+                // Max can be less than min if config.min is set but max left to autoscale.   If that's the case there is
+                // nothing to paint.
+                if (this.dataRange.max > this.dataRange.min) {
+
+                    let lastPixelEnd = -1;
+                    let lastY;
+                    const y0 = yScale(0);
+
+                    for (let f of features) {
+
+                        if (f.end < bpStart) continue
+                        if (f.start > bpEnd) break
+
+                        const x = (f.start - bpStart) / bpPerPixel;
+                        if (isNaN(x)) continue
+
+                        let y = yScale(f.value);
+
+                        const rectEnd = (f.end - bpStart) / bpPerPixel;
+                        const width = rectEnd - x;
+
+                        const color = options.alpha ? IGVColor.addAlpha(this.getColorForFeature(f), options.alpha) : this.getColorForFeature(f);
+
+                        if (this.graphType === "line") {
+                            if (lastY !== undefined) {
+                                IGVGraphics.strokeLine(ctx, lastPixelEnd, lastY, x, y, {
+                                    "fillStyle": color,
+                                    "strokeStyle": color
+                                });
+                            }
+                            IGVGraphics.strokeLine(ctx, x, y, x + width, y, {"fillStyle": color, "strokeStyle": color});
+                        } else if (this.graphType === "points") {
+                            const pointSize = this.config.pointSize || 3;
+                            const px = x + width / 2;
+                            IGVGraphics.fillCircle(ctx, px, y, pointSize / 2, {"fillStyle": color, "strokeStyle": color});
+
+                            if (f.value > this.dataRange.max) {
+                                IGVGraphics.fillCircle(ctx, px, pointSize / 2, pointSize / 2, 3, {fillStyle: this.overflowColor});
+                            } else if (f.value < this.dataRange.min) {
+                                IGVGraphics.fillCircle(ctx, px, pixelHeight - pointSize / 2, pointSize / 2, 3, {fillStyle: this.overflowColor});
+                            }
+
+                        } else {
+                            // Default graph type (bar)
+                            const height = Math.min(pixelHeight, y - y0);
+                            IGVGraphics.fillRect(ctx, x, y0, width, height, {fillStyle: color});
+                            if (f.value > this.dataRange.max) {
+                                IGVGraphics.fillRect(ctx, x, 0, width, 3, {fillStyle: this.overflowColor});
+                            } else if (f.value < this.dataRange.min) {
+                                IGVGraphics.fillRect(ctx, x, pixelHeight - 2, width, 3, {fillStyle: this.overflowColor});
+                            }
+
+                        }
+                        lastPixelEnd = x + width;
+                        lastY = y;
                     }
-                }));
 
-                if (!data) {
-                    return undefined
+                    // If the track includes negative values draw a baseline
+                    if (this.dataRange.min < 0) {
+                        let maxValue = this.dataRange.max;
+                        let minValue =  this.dataRange.min;
+                        minValue = (this.logScale === true) ? ((minValue < 0) ? -Math.log10(Math.abs(minValue) + 1) : Math.log10(Math.abs(minValue) + 1)) : minValue;
+                        maxValue = (this.logScale === true) ? ((maxValue < 0) ? -Math.log10(Math.abs(maxValue) + 1) : Math.log10(Math.abs(maxValue) + 1)) : maxValue;
+                        const ratio = maxValue / (maxValue - minValue);
+                        const basepx = this.flipAxis ? (1 - ratio) * pixelHeight : ratio * pixelHeight;
+                        IGVGraphics.strokeLine(ctx, 0, basepx, options.pixelWidth, basepx, {strokeStyle: this.baselineColor});
+                    }
                 }
+            }
 
-                const binaryParser = new BinaryParser$1(new DataView(data));
-                const group = {name: name};
-                let nAttributes = binaryParser.getInt();
-                while (nAttributes-- > 0) {
-                    const key = binaryParser.getString();
-                    const value = binaryParser.getString();
-                    group[key] = value;
+            // Draw guidelines
+            if (this.config.hasOwnProperty('guideLines')) {
+                for (let line of this.config.guideLines) {
+                    if (line.hasOwnProperty('color') && line.hasOwnProperty('y') && line.hasOwnProperty('dotted')) {
+                        let y = yScale(line.y);
+                        let props = {
+                            'strokeStyle': line['color'],
+                            'strokeWidth': 2
+                        };
+                        if (line['dotted']) IGVGraphics.dashedLine(options.context, 0, y, options.pixelWidth, y, 5, props);
+                        else IGVGraphics.strokeLine(options.context, 0, y, options.pixelWidth, y, props);
+                    }
                 }
-                this.groupCache[name] = group;
-                return group
             }
         }
 
-        async readTiles(tileIndeces, nTracks) {
+        popupData(clickState, features) {
 
-            tileIndeces.sort(function (a, b) {
-                return a.position - b.position
-            });
+            if (features === undefined) features = this.clickedFeatures(clickState);
 
-            tileIndeces = tileIndeces.filter(function (idx) {
-                return idx.size > 0
-            });
+            if (features && features.length > 0) {
 
-            if (tileIndeces.length === 0) {
-                return []
-            }
+                const genomicLocation = clickState.genomicLocation;
+                const popupData = [];
 
-            tileIndeces = consolidateTiles(tileIndeces);
+                // Sort features based on distance from click
+                features.sort(function (a, b) {
+                    const distA = Math.abs((a.start + a.end) / 2 - genomicLocation);
+                    const distB = Math.abs((b.start + b.end) / 2 - genomicLocation);
+                    return distA - distB
+                });
 
-            const tiles = [];
+                // Display closest 10
+                const displayFeatures = features.length > 10 ? features.slice(0, 10) : features;
 
-            for (let indexEntry of tileIndeces) {
+                // Resort in ascending order
+                displayFeatures.sort(function (a, b) {
+                    return a.start - b.start
+                });
 
-                const data = await igvxhr.loadArrayBuffer(this.path, buildOptions(this.config, {
-                    range: {
-                        start: indexEntry.position,
-                        size: indexEntry.size
+                for (let selectedFeature of displayFeatures) {
+                    if (selectedFeature) {
+                        if (popupData.length > 0) {
+                            popupData.push('<hr/>');
+                        }
+                        let posString = (selectedFeature.end - selectedFeature.start) === 1 ?
+                            numberFormatter$1(Math.floor(selectedFeature.start) + 1)
+                            : numberFormatter$1(Math.floor(selectedFeature.start) + 1) + "-" + numberFormatter$1(Math.floor(selectedFeature.end));
+                        popupData.push({name: "Position:", value: posString});
+                        popupData.push({
+                            name: "Value:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;",
+                            value: numberFormatter$1(selectedFeature.value.toFixed(4))
+                        });
                     }
-                }));
-
-                const tileData = this.compressed ? inflate_1$3(data).buffer : data;
-
-                const binaryParser = new BinaryParser$1(new DataView(tileData));
-                const type = binaryParser.getString();
-                let tile;
-                switch (type) {
-                    case "fixedStep":
-                        tile = createFixedStep(binaryParser, nTracks);
-                        break
-                    case "variableStep":
-                        tile = createVariableStep(binaryParser, nTracks);
-                        break
-                    case "bed":
-                    case "bedWithName":
-                        tile = createBed(binaryParser, nTracks, type);
-                        break
-                    default:
-                        throw "Unknown tile type: " + type
                 }
-                tiles.push(tile);
+                if (displayFeatures.length < features.length) {
+                    popupData.push("<hr/>...");
+                }
 
+                return popupData
+
+            } else {
+                return []
             }
-            return tiles
         }
 
-        async readTile(indexEntry, nTracks) {
+        get supportsWholeGenome() {
+            return !this.config.indexURL && this.config.supportsWholeGenome !== false
+        }
 
-            let data = await igvxhr.loadArrayBuffer(this.path, buildOptions(this.config, {
-                range: {
-                    start: indexEntry.position,
-                    size: indexEntry.size
-                }
-            }));
+        /**
+         * Return color for feature.
+         * @param feature
+         * @returns {string}
+         */
 
-            if (this.compressed) {
-                const plain = inflate_1$3(data);
-                data = plain.buffer;
-            }
+        getColorForFeature(f) {
+            let c = (f.value < 0 && this.altColor) ? this.altColor : this.color || DEFAULT_COLOR$2;
+            return (typeof c === "function") ? c(f.value) : c
+        }
 
-            const binaryParser = new BinaryParser$1(new DataView(data));
-            const type = binaryParser.getString();
-            switch (type) {
-                case "fixedStep":
-                    return createFixedStep(binaryParser, nTracks)
-                case "variableStep":
-                    return createVariableStep(binaryParser, nTracks)
-                case "bed":
-                case "bedWithName":
-                    return createBed(binaryParser, nTracks, type)
+        /**
+         * Called when the track is removed.  Do any needed cleanup here
+         */
+        dispose() {
+            this.trackView = undefined;
+        }
+
+    }
+
+    /**
+     * Summarize wig data in bins of size "bpPerPixel" with the given window function.
+     *
+     * @param features  wig (numeric) data -- features cannot overlap, and are in ascending order by start position
+     * @param startBP  bp start position for computing binned data
+     * @param bpPerPixel  bp per pixel (bin)
+     * @param windowFunction mean, min, or max
+     * @returns {*|*[]}
+     */
+    function summarizeData(features, startBP, bpPerPixel, windowFunction = "mean") {
+
+        if (bpPerPixel <= 1 || !features || features.length === 0) {
+            return features
+        }
+
+        // Assume features are sorted by position.  Wig features cannot overlap.  Note, UCSC "reductionLevel" == bpPerPixel
+        const chr = features[0].chr;
+        const binSize = bpPerPixel;
+        const summaryFeatures = [];
+
+        const finishBin = (bin) => {
+            const start = startBP + bin.bin * binSize;
+            const end = start + binSize;
+            let value;
+            switch (windowFunction) {
+                case "mean":
+                    value = bin.sumData / bin.count;
+                    break
+                case "max":
+                    value = bin.max;
+                    break
+                case "min":
+                    value = bin.min;
+                    break
                 default:
-                    throw "Unknown tile type: " + type
+                    throw Error(`Unknown window function: ${windowFunction}`)
+            }
+            const description = `${windowFunction} of ${bin.count} values`;
+            summaryFeatures.push({chr, start, end, value, description});
+        };
+
+        let currentBinData;
+        for (let f of features) {
+
+            // Loop through bins this feature overlaps, updating the weighted sum for each bin or min/max,
+            // depending on window function
+            let startBin = Math.floor((f.start - startBP) / binSize);
+            const endBin = Math.floor((f.end - startBP) / binSize);
+
+            if (currentBinData && startBin === currentBinData.bin) {
+                currentBinData.add(f);
+                startBin++;
             }
-        }
 
-    }
+            if (!currentBinData || endBin > currentBinData.bin) {
 
-    function createFixedStep(binaryParser, nTracks) {
-        const nPositions = binaryParser.getInt();
-        const start = binaryParser.getInt();
-        const span = binaryParser.getFloat();
+                if(currentBinData) {
+                    finishBin(currentBinData);
+                }
 
-        const data = [];
-        let nt = nTracks;
-        while (nt-- > 0) {
-            let np = nPositions;
-            const dtrack = [];
-            while (np-- > 0) {
-                dtrack.push(binaryParser.getFloat());
+                // Feature stretches across multiple bins.
+                if (endBin > startBin) {
+                    const end = startBP + endBin * binSize;
+                    summaryFeatures.push({chr, start: f.start, end, value: f.value});
+                }
+
+                currentBinData = new SummaryBinData(endBin, f);
             }
-            data.push(dtrack);
+
+        }
+        if(currentBinData) {
+            finishBin(currentBinData);
         }
 
-        return {
-            type: "fixedStep",
-            start: start,
-            span: span,
-            data: data,
-            nTracks: nTracks,
-            nPositions: nPositions
+        // Consolidate
+        const c = [];
+        let lastFeature = summaryFeatures[0];
+        for (let f of summaryFeatures) {
+            if (lastFeature.value === f.value && f.start <= lastFeature.end) {
+                lastFeature.end = f.end;
+            } else {
+                c.push(lastFeature);
+                lastFeature = f;
+            }
         }
-    }
+        c.push(lastFeature);
 
-    function createVariableStep(binaryParser, nTracks) {
+        return c
 
-        const tileStart = binaryParser.getInt();
-        const span = binaryParser.getFloat();
-        const nPositions = binaryParser.getInt();
-        const start = [];
+    }
 
-        let np = nPositions;
-        while (np-- > 0) {
-            start.push(binaryParser.getInt());
+    class SummaryBinData {
+        constructor(bin, feature) {
+            this.bin = bin;
+            this.sumData = feature.value;
+            this.count = 1;
+            this.min = feature.value;
+            this.max = feature.value;
         }
-        binaryParser.getInt();  // # of samples, ignored but should === nTracks
 
-        const data = [];
-        let nt = nTracks;
-        while (nt-- > 0) {
-            np = nPositions;
-            const dtrack = [];
-            while (np-- > 0) {
-                dtrack.push(binaryParser.getFloat());
-            }
-            data.push(dtrack);
+        add(feature) {
+            this.sumData += feature.value;
+            this.max = Math.max(feature.value, this.max);
+            this.min = Math.min(feature.value, this.min);
+            this.count++;
         }
 
-        return {
-            type: "variableStep",
-            tileStart: tileStart,
-            span: span,
-            start: start,
-            data: data,
-            nTracks: nTracks,
-            nPositions: nPositions
+        get mean() {
+            return this.sumData / this.count
         }
     }
 
-    function createBed(binaryParser, nTracks, type) {
+    const DEFAULT_MAX_WG_COUNT = 10000;
 
-        const nPositions = binaryParser.getInt();
+    /**
+     * feature source for "bed like" files (tab or whitespace delimited files with 1 feature per line: bed, gff, vcf, etc)
+     *
+     * @param config
+     * @constructor
+     */
+    class TextFeatureSource extends BaseFeatureSource {
 
-        let n = nPositions;
-        const start = [];
-        while (n-- > 0) {
-            start.push(binaryParser.getInt());
-        }
+        constructor(config, genome) {
 
-        n = nPositions;
-        const end = [];
-        while (n-- > 0) {
-            end.push(binaryParser.getInt());
-        }
+            super(genome);
 
-        binaryParser.getInt();  // # of samples, ignored but should === nTracks
-        const data = [];
-        let nt = nTracks;
-        while (nt-- > 0) {
-            let np = nPositions;
-            const dtrack = [];
-            while (np-- > 0) {
-                dtrack.push(binaryParser.getFloat());
-            }
-            data.push(dtrack);
-        }
+            this.config = config || {};
+            this.genome = genome;
+            this.sourceType = (config.sourceType === undefined ? "file" : config.sourceType);
+            this.maxWGCount = config.maxWGCount || DEFAULT_MAX_WG_COUNT;
+            this.windowFunctions = ["mean", "min", "max", "none"];
 
-        if (type === "bedWithName") {
-            n = nPositions;
-            const name = [];
-            while (n-- > 0) {
-                name.push(binaryParser.getString());
+            const queryableFormats = new Set(["bigwig", "bw", "bigbed", "bb", "biginteract", "biggenepred", "bignarrowpeak", "tdf"]);
+
+            this.queryable = config.indexURL || config.queryable === true;   // False by default, unless explicitly set
+            if (config.reader) {
+                // Explicit reader implementation
+                this.reader = config.reader;
+                this.queryable = config.queryable !== false;
+            } else if (config.sourceType === "ga4gh") {
+                throw Error("Unsupported source type 'ga4gh'")
+            } else if ((config.type === "eqtl" || config.type === "qtl") && config.sourceType === "gtex-ws") {
+                this.reader = new GtexReader(config);
+                this.queryable = true;
+            } else if ("htsget" === config.sourceType) {
+                this.reader = new HtsgetVariantReader(config, genome);
+                this.queryable = true;
+            } else if (config.sourceType === 'ucscservice') {
+                this.reader = new UCSCServiceReader(config.source);
+                this.queryable = true;
+            } else if (config.sourceType === 'custom') {
+                this.reader = new CustomServiceReader(config.source);
+                this.queryable = false !== config.source.queryable;
+            } else if ('service' === config.sourceType) {
+                this.reader = new FeatureFileReader(config, genome);
+                this.queryable = true;
+            } else {
+                // File of some type (i.e. not a webservice)
+                this.reader = new FeatureFileReader(config, genome);
+                if (config.queryable !== undefined) {
+                    this.queryable = config.queryable;
+                } else if (queryableFormats.has(config.format) || this.reader.indexed) {
+                    this.queryable = true;
+                } else ;
             }
-        }
 
-        return {
-            type: type,
-            start: start,
-            end: end,
-            data: data,
-            nTracks: nTracks,
-            nPositions: nPositions
-        }
-    }
+            // Flag indicating if features loaded by this source can be searched for by name or attribute, true by default
+            this.searchable = config.searchable !== false;
 
-    function consolidateTiles(tiles) {
+        }
 
-        const consolidated = [];
-        let current = tiles[0];
-        for (let i = 1; i < tiles.length; i++) {
-            const t = tiles[i];
-            if (t.position > current.position + current.size) {
-                consolidated.push(current);
-                current = t;
-            } else {
-                current.size = t.position + t.size - current.position;
+        async defaultVisibilityWindow() {
+            if (this.reader && typeof this.reader.defaultVisibilityWindow === 'function') {
+                return this.reader.defaultVisibilityWindow()
             }
         }
-        consolidated.push(current);
-        return consolidated
-    }
-
-    /*
-     * The MIT License (MIT)
-     *
-     * Copyright (c) 2016 University of California San Diego
-     * Author: Jim Robinson
-     *
-     * Permission is hereby granted, free of charge, to any person obtaining a copy
-     * of this software and associated documentation files (the "Software"), to deal
-     * in the Software without restriction, including without limitation the rights
-     * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-     * copies of the Software, and to permit persons to whom the Software is
-     * furnished to do so, subject to the following conditions:
-     *
-     * The above copyright notice and this permission notice shall be included in
-     * all copies or substantial portions of the Software.
-     *
-     *
-     * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-     * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-     * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-     * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-     * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-     * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-     * THE SOFTWARE.
-     */
-
-    class TDFSource extends BaseFeatureSource {
 
-        searchable = false
-        constructor(config, genome) {
-            super(genome);
-            this.genome = genome;
-            this.reader = new TDFReader(config, genome);
-            this.queryable = true;
+        async trackType() {
+            const header = await this.getHeader();
+            if (header) {
+                return header.type
+            } else {
+                return undefined    // Convention for unknown or unspecified
+            }
         }
 
-        async getFeatures({chr, start, end, bpPerPixel, windowFunction = "mean"}) {
+        async getHeader() {
+            if (!this.header) {
 
-            if (chr.toLowerCase() === "all") {
-                const wgFeatures = [];
-                const genome = this.genome;
-                const chrNames = this.genome.wgChromosomeNames;
-                if (chrNames) {
-                    for (let c of genome.wgChromosomeNames) {
-                        const len = genome.getChromosome(c).bpLength;
-                        bpPerPixel = len / 1000;
-                        const chrFeatures = await this._getFeatures(c, 0, len, bpPerPixel, windowFunction);
-                        if (chrFeatures) {
-                            for (let f of chrFeatures) {
-                                const wg = Object.assign({}, f);
-                                wg.chr = "all";
-                                wg.start = genome.getGenomeCoordinate(f.chr, f.start);
-                                wg.end = genome.getGenomeCoordinate(f.chr, f.end);
-                                wg._f = f;
-                                wgFeatures.push(wg);
-                            }
+                if (this.reader && typeof this.reader.readHeader === "function") {
+                    const header = await this.reader.readHeader();
+                    if (header) {
+                        this.header = header;
+                        if (header.format) {
+                            this.config.format = header.format;
                         }
+                    } else {
+                        this.header = {};
                     }
+                } else {
+                    this.header = {};
                 }
-                return wgFeatures
-
-            } else {
-                return this._getFeatures(chr, start, end, bpPerPixel, windowFunction)
             }
+            return this.header
         }
-        async _getFeatures(chr, start, end, bpPerPixel, windowFunction) {
-            const genomicInterval = new GenomicInterval(chr, start, end);
-            const genome = this.genome;
 
+        /**
+         * Required function for all data source objects.  Fetches features for the
+         * range requested.
+         *
+         * This function is quite complex due to the variety of reader types backing it, some indexed, some queryable,
+         * some not.
+         *
+         * @param chr
+         * @param start
+         * @param end
+         * @param bpPerPixel
+         */
+        async getFeatures({chr, start, end, bpPerPixel, visibilityWindow, windowFunction}) {
 
-            if (!this.rootGroup) {
-                this.rootGroup = await this.reader.readRootGroup();
-                if (!this.normalizationFactor) {
-                    const totalCount = this.rootGroup.totalCount;
-                    if (totalCount) {
-                        this.normalizationFactor = 1.0e6 / totalCount;
-                    }
-                }
-            }
+            const isWholeGenome = ("all" === chr.toLowerCase());
 
-            genomicInterval.bpPerPixel = bpPerPixel;
-            const zoom = zoomLevelForScale(chr, bpPerPixel, genome);
-            let queryChr = this.reader.chrAliasTable[chr];
-            let maxZoom = this.reader.maxZoom;
-            if (queryChr === undefined) queryChr = chr;
-            if (maxZoom === undefined) maxZoom = -1;
+            start = start || 0;
+            end = end || Number.MAX_SAFE_INTEGER;
 
-            const wf = zoom > maxZoom ? "raw" : windowFunction;
-            const dataset = await this.reader.readDataset(queryChr, wf, zoom);
-            if (dataset == null) {
-                return []
+            // Various conditions that can require a feature load
+            //   * view is "whole genome" but no features are loaded
+            //   * cache is disabled
+            //   * cache does not contain requested range
+            // const containsRange = this.featureCache.containsRange(new GenomicInterval(queryChr, start, end))
+            if ((isWholeGenome && !this.wgFeatures && this.supportsWholeGenome()) ||
+                this.config.disableCache ||
+                !this.featureCache ||
+                !this.featureCache.containsRange(new GenomicInterval(chr, start, end))) {
+                await this.loadFeatures(chr, start, end, visibilityWindow);
             }
 
-            const tileWidth = dataset.tileWidth;
-            const startTile = Math.floor(start / tileWidth);
-            const endTile = Math.floor(end / tileWidth);
-            const NTRACKS = 1;   // TODO read this
-            const tiles = await this.reader.readTiles(dataset.tiles.slice(startTile, endTile + 1), NTRACKS);
-            const features = [];
-            for (let tile of tiles) {
-                switch (tile.type) {
-                    case "bed":
-                        decodeBedTile(tile, chr, start, end, bpPerPixel, features);
-                        break
-                    case "variableStep":
-                        decodeVaryTile(tile, chr, start, end, bpPerPixel, features);
-                        break
-                    case "fixedStep":
-                        decodeFixedTile(tile, chr, start, end, bpPerPixel, features);
-                        break
-                    default:
-                        throw ("Unknown tile type: " + tile.type)
+            if (isWholeGenome) {
+                if (!this.wgFeatures) {
+                    if (this.supportsWholeGenome()) {
+                        if("wig" === this.config.type) {
+                            const allWgFeatures = await computeWGFeatures(this.featureCache.getAllFeatures(), this.genome, 1000000);
+                            this.wgFeatures = summarizeData(allWgFeatures, 0, bpPerPixel, windowFunction);
+                        } else {
+                            this.wgFeatures = await computeWGFeatures(this.featureCache.getAllFeatures(), this.genome, this.maxWGCount);
+                        }
+                    } else {
+                        this.wgFeatures = [];
+                    }
                 }
+                return this.wgFeatures
+            } else {
+                return this.featureCache.queryFeatures(chr, start, end)
             }
-            features.sort(function (a, b) {
-                return a.start - b.start
-            });
-
-            return features
         }
 
-        get supportsWholeGenome() {
-            return true
+        async findFeatures(fn) {
+            return this.featureCache ? this.featureCache.findFeatures(fn) : []
         }
 
-        get windowFunctions() {
-            return this.reader.windowFunctions
+        supportsWholeGenome() {
+            return !this.queryable   // queryable (indexed, web services) sources don't support whole genome view
         }
-    }
 
-    function decodeBedTile(tile, chr, bpStart, bpEnd, bpPerPixel, features) {
-
-        const nPositions = tile.nPositions;
-        const starts = tile.start;
-        const ends = tile.end;
-        const data = tile.data[0];   // Single track for now
-        for (let i = 0; i < nPositions; i++) {
-            const s = starts[i];
-            const e = ends[i];
-            if (e < bpStart) continue
-            if (s > bpEnd) break
-            features.push({
-                chr: chr,
-                start: s,
-                end: e,
-                value: data[i]
-            });
+        // TODO -- experimental, will only work for non-indexed sources
+        getAllFeatures() {
+            if (this.queryable || !this.featureCache) {   // queryable sources don't support all features
+                return []
+            } else {
+                return this.featureCache.getAllFeatures()
+            }
         }
-    }
 
-    function decodeVaryTile(tile, chr, bpStart, bpEnd, bpPerPixel, features) {
 
-        const nPositions = tile.nPositions;
-        const starts = tile.start;
-        const span = tile.span;
-        const data = tile.data[0];   // Single track for now
-        for (let i = 0; i < nPositions; i++) {
-            const s = starts[i];
-            const e = s + span;
-            if (e < bpStart) continue
-            if (s > bpEnd) break
-            features.push({
-                chr: chr,
-                start: s,
-                end: e,
-                value: data[i]
-            });
-        }
-    }
+        async loadFeatures(chr, start, end, visibilityWindow) {
 
-    function decodeFixedTile(tile, chr, bpStart, bpEnd, bpPerPixel, features) {
+            await this.getHeader();
 
-        const nPositions = tile.nPositions;
-        let s = tile.start;
-        const span = tile.span;
-        const data = tile.data[0];   // Single track for now
+            const reader = this.reader;
+            let intervalStart = start;
+            let intervalEnd = end;
 
-        for (let i = 0; i < nPositions; i++) {
-            const e = s + span;
-            if (s > bpEnd) break
-            if (e >= bpStart) {
-                if (!Number.isNaN(data[i])) {
-                    features.push({
-                        chr: chr,
-                        start: s,
-                        end: e,
-                        value: data[i]
-                    });
+            // chr aliasing
+            let queryChr = chr;
+            if (!this.chrAliasManager && this.reader && this.reader.sequenceNames) {
+                this.chrAliasManager = new ChromAliasManager(this.reader.sequenceNames, this.genome);
+            }
+            if (this.chrAliasManager) {
+                queryChr = await this.chrAliasManager.getAliasName(chr);
+            }
+
+            // Use visibility window to potentially expand query interval.
+            // This can save re-queries as we zoom out.  Visibility window <= 0 is a special case
+            // indicating whole chromosome should be read at once.
+            if ((!visibilityWindow || visibilityWindow <= 0) && this.config.expandQuery !== false) {
+                // Whole chromosome
+                const chromosome = this.genome ? this.genome.getChromosome(queryChr) : undefined;
+                intervalStart = 0;
+                intervalEnd = Math.max(chromosome ? chromosome.bpLength : Number.MAX_SAFE_INTEGER, end);
+            } else if (visibilityWindow > (end - start) && this.config.expandQuery !== false) {
+                let expansionWindow = Math.min(4.1 * (end - start), visibilityWindow);
+                if(this.config.minQuerySize && expansionWindow < this.config.minQuerySize) {
+                    expansionWindow = this.config.minQuerySize;
                 }
+                intervalStart = Math.max(0, (start + end - expansionWindow) / 2);
+                intervalEnd = intervalStart + expansionWindow;
             }
-            s = e;
-        }
-    }
 
+            let features = await reader.readFeatures(queryChr, intervalStart, intervalEnd);
+            if (this.queryable === undefined) {
+                this.queryable = reader.indexed;
+            }
 
-    var log2 = Math.log(2);
+            const genomicInterval = this.queryable ?
+                new GenomicInterval(chr, intervalStart, intervalEnd) :
+                undefined;
 
-    function zoomLevelForScale(chr, bpPerPixel, genome) {
+            if (features) {
 
-        // Convert bpPerPixel to IGV "zoom" level.   This is a bit convoluted,  TDF is computed zoom levels assuming
-        // display in a 700 pixel window.  The fully zoomed out view of a chromosome is zoom level "0".
-        // Zoom level 1 is magnified 2X,  and so forth
+                // Assign overlapping features to rows
+                if (this.config.format !== "wig" && this.config.type !== "junctions") {
+                    const maxRows = this.config.maxRows || Number.MAX_SAFE_INTEGER;
+                    packFeatures(features, maxRows);
+                }
 
-        var chrSize = genome.getChromosome(chr).bpLength;
+                // Note - replacing previous cache with new one.  genomicInterval is optional (might be undefined => includes all features)
+                this.featureCache = new FeatureCache$1(features, this.genome, genomicInterval);
 
-        return Math.ceil(Math.log(Math.max(0, (chrSize / (bpPerPixel * 700)))) / log2)
+                // If track is marked "searchable"< cache features by name -- use this with caution, memory intensive
+                if (this.searchable) {
+                    this.addFeaturesToDB(features, this.config);
+                }
+            } else {
+                this.featureCache = new FeatureCache$1([], genomicInterval);     // Empty cache
+            }
+        }
+
+        addFeaturesToDB(featureList, config) {
+            if (!this.featureMap) {
+                this.featureMap = new Map();
+            }
+            const searchableFields = config.searchableFields || ["name", "transcript_id", "gene_id", "gene_name", "id"];
+            for (let feature of featureList) {
+                for (let field of searchableFields) {
+                    let key;
+                    if (typeof feature.getAttributeValue === 'function') {
+                        key = feature.getAttributeValue(field);
+                    }
+                    if (key) {
+                        key = key.replaceAll(' ', '+').toUpperCase();
+                        // If feature is already present keep largest one
+                        if (this.featureMap.has(key)) {
+                            const f2 = this.featureMap.get(key);
+                            if (feature.end - feature.start < f2.end - f2.start) {
+                                continue
+                            }
+                        }
+                        this.featureMap.set(key, feature);
+                    }
+                }
+            }
+        }
+
+        search(term) {
+            if (this.featureMap) {
+                return this.featureMap.get(term.toUpperCase())
+            }
+
+        }
     }
 
     /*
@@ -34236,7 +34769,7 @@
         }
     }
 
-    const DEFAULT_COLOR$2 = 'rgb(0, 0, 150)';
+    const DEFAULT_COLOR$1 = 'rgb(0, 0, 150)';
 
 
     class FeatureTrack extends TrackBase {
@@ -34422,7 +34955,7 @@
             }
 
 
-            if (!this.config.isMergedTrack) {
+            if (!this.isMergedTrack) {
                 IGVGraphics.fillRect(context, 0, options.pixelTop, pixelWidth, pixelHeight, {'fillStyle': "rgb(255, 255, 255)"});
             }
 
@@ -34733,7 +35266,7 @@
 
             // If no explicit setting use the default
             if (!color) {
-                color = DEFAULT_COLOR$2;   // Track default
+                color = DEFAULT_COLOR$1;   // Track default
             }
 
             if (feature.alpha && feature.alpha !== 1) {
@@ -37860,7 +38393,6 @@
     }
 
     const DEFAULT_GENOMES_URL = "https://igv.org/genomes/genomes.json";
-    const BACKUP_GENOMES_URL = "https://s3.amazonaws.com/igv.org.genomes/genomes.json";
 
     const GenomeUtils = {
 
@@ -37872,21 +38404,9 @@
 
                 // Get default genomes
                 if (config.loadDefaultGenomes !== false) {
-                    try {
-                        const url = DEFAULT_GENOMES_URL;
-                        const jsonArray = await igvxhr.loadJson(url, {timeout: 5000});
-                        processJson(jsonArray);
-                    } catch (e) {
-                        console.error(e);
-                        try {
-                            const url = BACKUP_GENOMES_URL;
-                            const jsonArray = await igvxhr.loadJson(url, {});
-                            processJson(jsonArray);
-                        } catch (e) {
-                            console.error(e);
-                            console.warn("Errors loading default genome definitions.");
-                        }
-                    }
+                    const url = DEFAULT_GENOMES_URL;
+                    const jsonArray = await igvxhr.loadJson(url, {timeout: 5000});
+                    processJson(jsonArray);
                 }
 
                 // Add user-defined genomes
@@ -37951,7 +38471,7 @@
                         }
                     }
 
-                    if(!reference) {
+                    if (!reference) {
                         alert.present(new Error(`Unknown genome id: ${genomeID}`), undefined);
                     }
                 }
@@ -41349,301 +41869,242 @@
      * THE SOFTWARE.
      */
 
-    class NavbarButton {
-
-        constructor(browser, parent, title, buttonLabel, imageSVG, imageHoverSVG, initialButtonState) {
-
-            this.browser = browser;
-
-            this.button = div({class: 'igv-navbar-text-button'});
-            parent.appendChild(this.button);
-
-            if (Array.isArray(title)) {
-                this.textContent = title[ 0 ];
-                this.title = title[ 1 ];
-            } else {
-                this.textContent = this.title = title;
-            }
-
-            this.buttonLabel = buttonLabel;
-
-            this.imageDictionary =
-                {
-                    image: `url("data:image/svg+xml,${ encodeURIComponent(imageSVG) }")`,
-                    imageHover: `url("data:image/svg+xml,${ encodeURIComponent(imageHoverSVG) }")`,
-                };
-
-            this.responsiveKey = 'text';
-
-            this.configureButton(this.textContent, this.title);
-
-            this.setState(initialButtonState);
-
-            browser.on('navbar-resize', navbarButtonCSSClass => {
-                this.navbarResizeHandler(navbarButtonCSSClass);
-            });
-
-        }
-
-        navbarResizeHandler(navbarButtonCSSClass) {
-            const key = 'igv-navbar-icon-button' === navbarButtonCSSClass ? 'image' : 'text';
-            if (key !== this.responsiveKey) {
-                this.responsiveKey = key;
-                this.configureButton(this.textContent, this.title);
-                this.setState(undefined);
-            }
-        }
-
-        configureButton(textContent, title) {
-
-            this.groupElement = undefined;
-            this.button.title = title;
-            this.button.innerHTML = '';
-            this.button.style.backgroundImage = 'none';
-            this.button.classList.remove('igv-navbar-icon-button');
-            this.button.classList.remove('igv-navbar-text-button');
-
-            'text' === this.responsiveKey ? this.configureTextButton(textContent) : this.configureIconButton();
-
-        }
-
-        configureTextButton(textContent) {
-
-            this.button.classList.add('igv-navbar-text-button');
-
-            const tempDiv = document.createElement('div');
-            tempDiv.innerHTML = this.buttonLabel;
-            const svgRoot = tempDiv.firstChild;
-            this.button.appendChild(svgRoot);
-
-            this.groupElement = svgRoot.querySelector('#igv-navbar-button-group');
-
-            const tspanElement = svgRoot.querySelector('#igv-navbar-button-label');
-            tspanElement.textContent = textContent;
-        }
-
-        configureIconButton() {
-            this.button.classList.add('igv-navbar-icon-button');
-        }
-
-        setState(doHover) {
-
-            if (undefined !== doHover) {
-                this.doHover = doHover;
-            }
-
-            'text' === this.responsiveKey ? this.setTextButtonState(this.doHover) : this.setIconButtonState(this.doHover);
-
-        }
-
-        setTextButtonState(doHover) {
-            this.groupElement.classList.remove(...this.groupElement.classList);
-            const className = true === doHover ? 'igv-navbar-text-button-svg-hover' : 'igv-navbar-text-button-svg-inactive';
-            this.groupElement.classList.add(className);
-        }
-
-        setIconButtonState(doHover) {
-            this.button.style.backgroundImage = true === doHover ? this.imageDictionary.imageHover : this.imageDictionary.image;
-        }
-
-        show() {
-            // this.button.style.display = 'block'
-            this.button.style.display = 'flex';
-        }
-
-        hide() {
-            this.button.style.display = 'none';
-        }
-
-        setVisibility(isVisible) {
-            if (true === isVisible) {
-                this.show();
-            } else {
-                this.hide();
-            }
-        }
-
-        static currentNavbarButtonClass(browser) {
-            const el = browser.$navigation.get(0).querySelector('.igv-navbar-text-button');
-            return el ? 'igv-navbar-text-button' : 'igv-navbar-icon-button'
-        }
-    }
-
-    const overlayTrackImage =
-        `<svg width="625px" height="625px" viewBox="0 0 625 625" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Overlay Tracks</title>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Overlay-Tracks">
-            <rect id="backdrop" stroke="#737373" stroke-width="12" fill="#FFFFFF" x="6" y="6" width="613" height="613" rx="135"></rect>
-            <g id="layer-group" transform="translate(3, 127)">
-                <rect id="a" stroke="#737373" stroke-width="24" fill="#A1A1A1" x="12" y="12" width="332" height="139"></rect>
-                <rect id="a---hold-out" fill="#A1A1A1" x="9" y="25" width="324" height="115"></rect>
-                <rect id="b" stroke="#737373" stroke-width="24" fill="#C9C9C9" x="81" y="103" width="474" height="139"></rect>
-                <rect id="c" stroke="#737373" stroke-width="24" fill="#ECECEC" x="238" y="214" width="372" height="139"></rect>
-                <rect id="c---hold-out" fill="#ECECEC" x="250" y="226" width="372" height="115"></rect>
-            </g>
-            <rect id="over-border" stroke="#737373" stroke-width="12" x="6" y="6" width="613" height="613" rx="135"></rect>
-        </g>
-    </g>
-</svg>`;
-
-    const overlayTrackImageHover =
-        `<svg width="625px" height="625px" viewBox="0 0 625 625" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Overlay Tracks Hover</title>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Overlay-Tracks-Hover">
-            <rect id="backdrop-copy" stroke="#737373" stroke-width="12" fill="#737373" x="6" y="6" width="613" height="613" rx="135"></rect>
-            <g id="layer-group" transform="translate(3, 127)">
-                <rect id="a" stroke="#FFFFFF" stroke-width="24" fill="#A1A1A1" x="12" y="12" width="332" height="139"></rect>
-                <rect id="a---hold-out" fill="#A1A1A1" x="9" y="25" width="324" height="115"></rect>
-                <rect id="b" stroke="#FFFFFF" stroke-width="24" fill="#C9C9C9" x="81" y="103" width="474" height="139"></rect>
-                <rect id="c" stroke="#FFFFFF" stroke-width="24" fill="#ECECEC" x="238" y="214" width="372" height="139"></rect>
-                <rect id="c---hold-out" fill="#ECECEC" x="250" y="226" width="372" height="115"></rect>
-            </g>
-            <rect id="over-border-copy" stroke="#737373" stroke-width="12" x="6" y="6" width="613" height="613" rx="135"></rect>
-        </g>
-    </g>
-</svg>`;
-
-    const buttonLabel =
-        `<svg width="80px" height="18px" viewBox="0 0 80 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="igv-navbar-button-group">
-            <rect id="Rectangle" x="0.5" y="0.5" width="79" height="17" rx="6"></rect>
-            <text id="igv-text-button-label" x="50%" y="50%" dy=".1em" font-family="Helvetica" font-size="12" font-weight="normal" letter-spacing="-0.372">
-                <tspan id="igv-navbar-button-label"></tspan>
-            </text>
-        </g>
-    </g>
-</svg>`;
-
-    const sampleNameButtonLabel =
-        `<svg width="90px" height="20px" viewBox="0 0 90 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="igv-navbar-button-group">
-            <rect id="Rectangle" x="0.5" y="0.5" width="89" height="18" rx="6"></rect>
-            <text id="igv-text-button-label" x="50%" y="50%" dy=".1em" font-family="Helvetica" font-size="12" font-weight="normal" letter-spacing="-0.372">
-                <tspan id="igv-navbar-button-label"></tspan>
-            </text>
-        </g>
-    </g>
-</svg>`;
-
-    const shim = .01;
-    const colorStripWidth = 4;
-    const axesXOffset = colorStripWidth + 1;
-    function paintAxis(ctx, width, height, colorOrUndefined) {
-
-        if (undefined === this.dataRange || undefined === this.dataRange.max || undefined === this.dataRange.min) {
-            return
-        }
-
-        IGVGraphics.fillRect(ctx, 0, 0, width, height, { fillStyle: 'white' });
-        if (colorOrUndefined) {
-            IGVGraphics.fillRect(ctx, width - colorStripWidth - 2, 0, colorStripWidth, height, { fillStyle: colorOrUndefined });
-        }
-
-        const flipAxis = (undefined === this.flipAxis) ? false : this.flipAxis;
-
-        const xTickStart = 0.95 * width - 8 - axesXOffset;
-        const xTickEnd   = 0.95 * width - axesXOffset;
-
-        const properties =
-            {
-                font: 'normal 10px Arial',
-                textAlign: 'right',
-                fillStyle: 'black',
-                strokeStyle: 'black',
-            };
-
-        // tick
-        IGVGraphics.strokeLine(ctx, xTickStart, shim * height, xTickEnd, shim * height, properties);
-        IGVGraphics.fillText(ctx, prettyPrint(flipAxis ? this.dataRange.min : this.dataRange.max), xTickStart + 4, shim * height + 12, properties);
-
-        const y = (1.0 - shim) * height;
-
-        // tick
-        IGVGraphics.strokeLine(ctx, xTickStart, y, xTickEnd, y, properties);
-        IGVGraphics.fillText(ctx, prettyPrint(flipAxis ? this.dataRange.max : this.dataRange.min), xTickStart + 4, y - 4, properties);
-
-        // vertical axis
-        IGVGraphics.strokeLine(ctx, xTickEnd, shim * height, xTickEnd, y, properties);
-
-        function prettyPrint(number) {
-
-            if (number === 0) {
-                return "0"
-            } else if (Math.abs(number) >= 10) {
-                return number.toFixed()
-            } else if (Math.abs(number) >= 1) {
-                return number.toFixed(1)
-            } else if (Math.abs(number) >= 0.1) {
-                return number.toFixed(2)
-            } else {
-                return number.toExponential(1)
-            }
-        }
-    }
-
-    /*
-     * The MIT License (MIT)
-     *
-     * Copyright (c) 2016-2017 The Regents of the University of California
-     * Author: Jim Robinson
-     *
-     * Permission is hereby granted, free of charge, to any person obtaining a copy
-     * of this software and associated documentation files (the "Software"), to deal
-     * in the Software without restriction, including without limitation the rights
-     * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-     * copies of the Software, and to permit persons to whom the Software is
-     * furnished to do so, subject to the following conditions:
-     *
-     * The above copyright notice and this permission notice shall be included in
-     * all copies or substantial portions of the Software.
-     *
-     *
-     * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-     * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-     * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-     * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-     * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-     * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-     * THE SOFTWARE.
-     */
-
+    class NavbarButton {
+
+        constructor(browser, parent, title, buttonLabel, imageSVG, imageHoverSVG, initialButtonState) {
+
+            this.browser = browser;
+
+            this.button = div({class: 'igv-navbar-text-button'});
+            parent.appendChild(this.button);
+
+            if (Array.isArray(title)) {
+                this.textContent = title[ 0 ];
+                this.title = title[ 1 ];
+            } else {
+                this.textContent = this.title = title;
+            }
+
+            this.buttonLabel = buttonLabel;
+
+            this.imageDictionary =
+                {
+                    image: `url("data:image/svg+xml,${ encodeURIComponent(imageSVG) }")`,
+                    imageHover: `url("data:image/svg+xml,${ encodeURIComponent(imageHoverSVG) }")`,
+                };
+
+            this.responsiveKey = 'text';
+
+            this.configureButton(this.textContent, this.title);
+
+            this.setState(initialButtonState);
+
+            browser.on('navbar-resize', navbarButtonCSSClass => {
+                this.navbarResizeHandler(navbarButtonCSSClass);
+            });
+
+        }
+
+        navbarResizeHandler(navbarButtonCSSClass) {
+            const key = 'igv-navbar-icon-button' === navbarButtonCSSClass ? 'image' : 'text';
+            if (key !== this.responsiveKey) {
+                this.responsiveKey = key;
+                this.configureButton(this.textContent, this.title);
+                this.setState(undefined);
+            }
+        }
+
+        configureButton(textContent, title) {
+
+            this.groupElement = undefined;
+            this.button.title = title;
+            this.button.innerHTML = '';
+            this.button.style.backgroundImage = 'none';
+            this.button.classList.remove('igv-navbar-icon-button');
+            this.button.classList.remove('igv-navbar-text-button');
+
+            'text' === this.responsiveKey ? this.configureTextButton(textContent) : this.configureIconButton();
+
+        }
+
+        configureTextButton(textContent) {
+
+            this.button.classList.add('igv-navbar-text-button');
+
+            const tempDiv = document.createElement('div');
+            tempDiv.innerHTML = this.buttonLabel;
+            const svgRoot = tempDiv.firstChild;
+            this.button.appendChild(svgRoot);
+
+            this.groupElement = svgRoot.querySelector('#igv-navbar-button-group');
+
+            const tspanElement = svgRoot.querySelector('#igv-navbar-button-label');
+            tspanElement.textContent = textContent;
+        }
+
+        configureIconButton() {
+            this.button.classList.add('igv-navbar-icon-button');
+        }
+
+        setState(doHover) {
+
+            if (undefined !== doHover) {
+                this.doHover = doHover;
+            }
+
+            'text' === this.responsiveKey ? this.setTextButtonState(this.doHover) : this.setIconButtonState(this.doHover);
+
+        }
+
+        setTextButtonState(doHover) {
+            this.groupElement.classList.remove(...this.groupElement.classList);
+            const className = true === doHover ? 'igv-navbar-text-button-svg-hover' : 'igv-navbar-text-button-svg-inactive';
+            this.groupElement.classList.add(className);
+        }
+
+        setIconButtonState(doHover) {
+            this.button.style.backgroundImage = true === doHover ? this.imageDictionary.imageHover : this.imageDictionary.image;
+        }
+
+        show() {
+            // this.button.style.display = 'block'
+            this.button.style.display = 'flex';
+        }
+
+        hide() {
+            this.button.style.display = 'none';
+        }
+
+        setVisibility(isVisible) {
+            if (true === isVisible) {
+                this.show();
+            } else {
+                this.hide();
+            }
+        }
+
+        static currentNavbarButtonClass(browser) {
+            const el = browser.$navigation.get(0).querySelector('.igv-navbar-text-button');
+            return el ? 'igv-navbar-text-button' : 'igv-navbar-icon-button'
+        }
+    }
+
+    const overlayTrackImage =
+        `<svg width="625px" height="625px" viewBox="0 0 625 625" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Overlay Tracks</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Overlay-Tracks">
+            <rect id="backdrop" stroke="#737373" stroke-width="12" fill="#FFFFFF" x="6" y="6" width="613" height="613" rx="135"></rect>
+            <g id="layer-group" transform="translate(3, 127)">
+                <rect id="a" stroke="#737373" stroke-width="24" fill="#A1A1A1" x="12" y="12" width="332" height="139"></rect>
+                <rect id="a---hold-out" fill="#A1A1A1" x="9" y="25" width="324" height="115"></rect>
+                <rect id="b" stroke="#737373" stroke-width="24" fill="#C9C9C9" x="81" y="103" width="474" height="139"></rect>
+                <rect id="c" stroke="#737373" stroke-width="24" fill="#ECECEC" x="238" y="214" width="372" height="139"></rect>
+                <rect id="c---hold-out" fill="#ECECEC" x="250" y="226" width="372" height="115"></rect>
+            </g>
+            <rect id="over-border" stroke="#737373" stroke-width="12" x="6" y="6" width="613" height="613" rx="135"></rect>
+        </g>
+    </g>
+</svg>`;
+
+    const overlayTrackImageHover =
+        `<svg width="625px" height="625px" viewBox="0 0 625 625" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Overlay Tracks Hover</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Overlay-Tracks-Hover">
+            <rect id="backdrop-copy" stroke="#737373" stroke-width="12" fill="#737373" x="6" y="6" width="613" height="613" rx="135"></rect>
+            <g id="layer-group" transform="translate(3, 127)">
+                <rect id="a" stroke="#FFFFFF" stroke-width="24" fill="#A1A1A1" x="12" y="12" width="332" height="139"></rect>
+                <rect id="a---hold-out" fill="#A1A1A1" x="9" y="25" width="324" height="115"></rect>
+                <rect id="b" stroke="#FFFFFF" stroke-width="24" fill="#C9C9C9" x="81" y="103" width="474" height="139"></rect>
+                <rect id="c" stroke="#FFFFFF" stroke-width="24" fill="#ECECEC" x="238" y="214" width="372" height="139"></rect>
+                <rect id="c---hold-out" fill="#ECECEC" x="250" y="226" width="372" height="115"></rect>
+            </g>
+            <rect id="over-border-copy" stroke="#737373" stroke-width="12" x="6" y="6" width="613" height="613" rx="135"></rect>
+        </g>
+    </g>
+</svg>`;
+
+    const buttonLabel =
+        `<svg width="80px" height="18px" viewBox="0 0 80 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="igv-navbar-button-group">
+            <rect id="Rectangle" x="0.5" y="0.5" width="79" height="17" rx="6"></rect>
+            <text id="igv-text-button-label" x="50%" y="50%" dy=".1em" font-family="Helvetica" font-size="12" font-weight="normal" letter-spacing="-0.372">
+                <tspan id="igv-navbar-button-label"></tspan>
+            </text>
+        </g>
+    </g>
+</svg>`;
+
+    const sampleNameButtonLabel =
+        `<svg width="90px" height="20px" viewBox="0 0 90 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="igv-navbar-button-group">
+            <rect id="Rectangle" x="0.5" y="0.5" width="89" height="18" rx="6"></rect>
+            <text id="igv-text-button-label" x="50%" y="50%" dy=".1em" font-family="Helvetica" font-size="12" font-weight="normal" letter-spacing="-0.372">
+                <tspan id="igv-navbar-button-label"></tspan>
+            </text>
+        </g>
+    </g>
+</svg>`;
+
+    /*
+     * The MIT License (MIT)
+     *
+     * Copyright (c) 2016-2017 The Regents of the University of California
+     * Author: Jim Robinson
+     *
+     * Permission is hereby granted, free of charge, to any person obtaining a copy
+     * of this software and associated documentation files (the "Software"), to deal
+     * in the Software without restriction, including without limitation the rights
+     * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+     * copies of the Software, and to permit persons to whom the Software is
+     * furnished to do so, subject to the following conditions:
+     *
+     * The above copyright notice and this permission notice shall be included in
+     * all copies or substantial portions of the Software.
+     *
+     *
+     * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+     * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+     * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+     * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+     * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+     * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+     * THE SOFTWARE.
+     */
 
     /**
-     * Represents 2 or more wig tracks overlaid on a common viewport.
+     * Represents 2 or more  tracks overlaid on a common viewport.
      */
     class MergedTrack extends TrackBase {
 
         static defaults = {
+            autoscale: undefined,
             alpha: 0.5,
             height: 50
         }
 
-        constructor(config, browser) {
+        constructor(config, browser, tracks) {
             super(config, browser);
             this.type = "merged";
-            this.featureType = "numeric";
             this.paintAxis = paintAxis;
             this.graphType = config.graphType;
-        }
-
-        init(config) {
-            if (!(config.tracks || config._tracks)) {
-                throw Error("Error: no tracks defined for merged track" + config)
+            if (tracks) {
+                this.tracks = tracks;   // Dynamic creation, actual track objects (not configurations)
+            } else {
+                this.tracks = [];
             }
-            super.init(config);
         }
 
+
         async postInit() {
 
-            this.tracks = [];
             if (this.config.tracks) {
-                // Configured merged track
+                // Track configurations, this indicates a configured merged track as opposed to dynamic merge through the UI
+                // Actual track objects need to be created.
                 for (let tconf of this.config.tracks) {
-                    tconf.isMergedTrack = true;
                     const t = await this.browser.createTrack(tconf);
                     if (t) {
                         this.tracks.push(t);
@@ -41654,24 +42115,27 @@
                         await t.postInit();
                     }
                 }
-                // Explicit merged settings -- these will override any individual track settings
-                if (this.config.autoscale) {
-                    this.autoscale = this.config.autoscale;
-                } else if (this.config.max !== undefined) {
-                    this.dataRange = {
-                        min: this.config.min || 0,
-                        max: this.config.max
-                    };
-                } else {
-                    this.autoscale = !this.tracks.every(t => t.config.autoscale || t.config.max !== undefined);
+                // Default to autoscale unless scale if range or autoscale is not otherwise defined
+                const allTracksSpecified = this.config.tracks.every(config => config.autoscale !== undefined || config.max !== undefined);
+                if (!allTracksSpecified) {
+                    this.config.autoscale = this.config.max === undefined;
                 }
-            } else {
-                // Dynamic merged track
-                this.tracks = this.config._tracks;
-                this.autoscale = false;
-                delete this.config._tracks;
             }
 
+            // Mark constitutive tracks as merged.
+            for (let t of this.tracks) t.isMergedTrack = true;
+
+            // Explicit settings -- these will override any individual track settings
+            if(this.config.autoscale) {
+                this.autoscale = this.config.autoscale;
+            } else if (this.config.max !== undefined) {
+                this.setDataRange ({
+                    min: this.config.min || 0,
+                    max: this.config.max
+                });
+            }
+
+
             if (this.config.flipAxis !== undefined) {
                 for (let t of this.tracks) t.flipAxis = this.config.flipAxis;
             }
@@ -41681,25 +42145,28 @@
             }
 
             this.resolutionAware = this.tracks.some(t => t.resolutionAware);
-
         }
 
         set flipAxis(b) {
             this.config.flipAxis = b;
-            for (let t of this.tracks) t.flipAxis = b;
+            for (let t of numericTracks(this.tracks)) {
+                t.flipAxis = b;
+            }
         }
 
         get flipAxis() {
-            return this.tracks.every(t => t.flipAxis)
+            return numericTracks(this.tracks).every(t => t.flipAxis)
         }
 
         set logScale(b) {
             this.config.logScale = b;
-            for (let t of this.tracks) t.logScale = b;
+            for (let t of numericTracks(this.tracks)) {
+                t.logScale = b;
+            }
         }
 
         get logScale() {
-            return this.tracks.every(t => t.logScale)
+            return numericTracks(this.tracks).every(t => t.logScale)
         }
 
         get height() {
@@ -41717,49 +42184,76 @@
             }
         }
 
-        get dataRange() {
-
-            if (undefined === this.tracks || 0 === this.tracks.length) {
-                return undefined
+        set autoscale(b) {
+            this._autoscale = b;
+            if(b === false && this.tracks) {
+                for(let t of this.tracks) t.autoscale = false;
             }
+        }
 
-            const list = this.tracks.filter(track => undefined !== track.dataRange);
-            if (list.length !== this.tracks.length) {
-                return undefined
-            }
+        get autoscale() {
+            return this._autoscale
+        }
 
-            const minSet = new Set(this.tracks.map(({dataRange}) => dataRange.min));
-            if (1 !== minSet.size) {
-                return undefined
-            }
+        /**
+         * Set the data range of all constitutive numeric tracks.  This method is called from the menu item, i.e. an explicit
+         * setting, so it should disable autoscale as well.
+         *
+         * @param min
+         * @param max
+         */
 
-            const maxSet = new Set(this.tracks.map(({dataRange}) => dataRange.max));
-            if (1 !== maxSet.size) {
-                return undefined
+        setDataRange({min, max}) {
+            this.autoscale = false;
+            for (const track of numericTracks(this.tracks)) {
+                track.dataRange = {min, max};
+                track.autoscale = false;
+                track.autoscaleGroup = false;
             }
+        }
 
-            return { min: [ ...minSet ][ 0 ],  max: [ ...maxSet ][ 0 ] }
+        set dataRange({min, max}) {
+            for (const track of numericTracks(this.tracks)) {
+                track.dataRange = {min, max};
+            }
         }
 
-        set dataRange({ min, max }) {
-            for (const track of this.tracks) {
-                track.dataRange = { min, max };
+        /**
+         * Return a DataRang {min, max} if all constitutive numeric tracks have identical range.  A numeric track is defined
+         * as a track with a data range.  Otherwise return undefined.
+         *
+         * @returns {{min: any, max: any}|undefined}
+         */
+        get dataRange() {
+            if(this.tracks) {
+                const num = numericTracks(this.tracks);
+                if (num.length > 0) {
+                    const firstRange = num[0].dataRange;
+                    if (num.every(t => t.dataRange && t.dataRange.min === firstRange.min && t.dataRange.max === firstRange.max)) {
+                        return firstRange
+                    }
+                }
             }
+            return undefined
         }
 
+
         menuItemList() {
             const items = [];
-            if (this.flipAxis !== undefined) {
-                items.push({
-                    label: "Flip y-axis",
-                    click: function flipYAxisHandler() {
-                        this.flipAxis = !this.flipAxis;
-                        this.trackView.repaintViews();
-                    }
-                });
-            }
+            if (numericTracks(this.tracks).length > 0) {
 
-            items.push(...this.numericDataMenuItems());
+                if (this.flipAxis !== undefined) {
+                    items.push({
+                        label: "Flip y-axis",
+                        click: function flipYAxisHandler() {
+                            this.flipAxis = !this.flipAxis;
+                            this.trackView.repaintViews();
+                        }
+                    });
+                }
+
+                items.push(...this.numericDataMenuItems());
+            }
 
             items.push('<hr/>');
             items.push(this.overlayTrackAlphaAdjustmentMenuItem());
@@ -41776,7 +42270,14 @@
 
             const promises = this.tracks.map((t) => t.getFeatures(chr, bpStart, bpEnd, bpPerPixel));
             const featureArrays = await Promise.all(promises);
-            return new MergedFeatureCollection(featureArrays)
+            
+            if (featureArrays.every((arr) => arr.length === 0)){
+                return new MergedFeatureCollection([], [])
+            }
+            else {
+                const trackNames = this.tracks.map((t) => t.name);
+                return new MergedFeatureCollection(featureArrays, trackNames)
+            }
         }
 
         draw(options) {
@@ -41788,11 +42289,6 @@
                 trackOptions.features = mergedFeatures.featureArrays[i];
                 trackOptions.alpha = this.alpha;
 
-                if (this.dataRange) {
-                    // Single data scale for all tracks
-                    this.tracks[i].dataRange = this.dataRange;
-                }
-
                 if (this.graphType) {
                     this.tracks[i].graphType = this.graphType;
                 }
@@ -41886,6 +42382,7 @@
             let scaleChange;
 
             if (this.autoscale) {
+                // Overrides any specific track scale settings
                 scaleChange = true;
                 let allFeatures = [];
                 for (let visibleViewport of visibleViewports) {
@@ -41900,7 +42397,12 @@
                             allFeatures.push({value: mergedFeatureCollection.getMin(start, end)});
                         }
                     }
-                    this.dataRange = doAutoscale(allFeatures);
+                    const dataRange = doAutoscale(allFeatures);
+                    for (const track of numericTracks(this.tracks)) {
+                        // Do not use this.dataRange, as that has side effects
+                        track.dataRange = dataRange;
+                    }
+
                 }
             } else {
                 // Individual track scaling
@@ -41980,6 +42482,7 @@
                     if (groupAutoscale) {
                         track.autoscaleGroup = name;
                     }
+                    track.isMergedTrack = false;
                     browser.addTrack(track.config, track);
                 }
                 browser.updateViews();
@@ -41993,25 +42496,30 @@
 
     class MergedFeatureCollection {
 
-        constructor(featureArrays) {
+        constructor(featureArrays,trackNames) {
             this.featureArrays = featureArrays;
+            //trackNames is needed for the popup data to populate track names 
+            //preserving the order of the actual tracks
+            this.trackNames = trackNames;
         }
 
         getMax(start, end) {
             let max = -Number.MAX_VALUE;
 
             for (let a of this.featureArrays) {
-                for (let f of a) {
-                    if (typeof f.value === 'undefined' || Number.isNaN(f.value)) {
-                        continue
-                    }
-                    if (f.end < start) {
-                        continue
-                    }
-                    if (f.start > end) {
-                        break
+                if (Array.isArray(a)) {
+                    for (let f of a) {
+                        if (typeof f.value === 'undefined' || Number.isNaN(f.value)) {
+                            continue
+                        }
+                        if (f.end < start) {
+                            continue
+                        }
+                        if (f.start > end) {
+                            break
+                        }
+                        max = Math.max(max, f.value);
                     }
-                    max = Math.max(max, f.value);
                 }
             }
 
@@ -42022,15 +42530,17 @@
         getMin(start, end) {
             let min = 0;
             for (let a of this.featureArrays) {
-                for (let f of a) {
-                    if (typeof f.value !== 'undefined' && !Number.isNaN(f.value)) {
-                        if (f.end < start) {
-                            continue
-                        }
-                        if (f.start > end) {
-                            break
+                if (Array.isArray(a)) {
+                    for (let f of a) {
+                        if (typeof f.value !== 'undefined' && !Number.isNaN(f.value)) {
+                            if (f.end < start) {
+                                continue
+                            }
+                            if (f.start > end) {
+                                break
+                            }
+                            min = Math.min(min, f.value);
                         }
-                        min = Math.min(min, f.value);
                     }
                 }
             }
@@ -42038,6 +42548,16 @@
         }
     }
 
+    /**
+     * Heuristic for finding numeric tracks.
+     *
+     * @param tracks
+     * @returns {*}
+     */
+    const numericTracks = (tracks) => {
+        return tracks ? tracks.filter(track => undefined !== track.dataRange || undefined !== track.autoscale || undefined !== track.autoscaleGroup) : []
+    };
+
     class OverlayTrackButton extends NavbarButton {
         constructor(browser, parent) {
 
@@ -42083,13 +42603,13 @@
                 {
                     name: 'Overlay',
                     type: 'merged',
+                    autoscale: false,
                     alpha: 0.5, //fudge * (1.0/tracks.length),
                     height: Math.max(...tracks.map(({ height }) => height)),
                     order: Math.min(...tracks.map(({ order }) => order)),
-                    _tracks: flattenedTracks
                 };
 
-            const mergedTrack = new MergedTrack(config, this.browser);
+            const mergedTrack = new MergedTrack(config, this.browser, flattenedTracks);
 
             for (const track of tracks) {
                 this.browser.removeTrack(track);
@@ -42309,27 +42829,6 @@
             }
         }
 
-        get dataRange() {
-            return this.track.dataRange ? this.track.dataRange : undefined
-        }
-
-        set dataRange({ min, max }) {
-
-            this.track.dataRange = { min, max };
-
-            this.track.autoscale = false;
-            this.track.autoscaleGroup = undefined;
-
-            const list = this.browser.trackViews.filter(({track}) => track.autoscaleGroup);
-            if (1 === list.length) {
-                list[0].track.autoscale = false;
-                list[0].track.autoscaleGroup = undefined;
-                list[0].repaintViews();
-            }
-
-            this.repaintViews();
-
-        }
 
         presentColorPicker(key) {
 
@@ -43145,462 +43644,6 @@
 
     }
 
-    const DEFAULT_COLOR$1 = 'rgb(150, 150, 150)';
-
-
-    class WigTrack extends TrackBase {
-
-        static defaults = {
-            height: 50,
-            flipAxis: false,
-            logScale: false,
-            windowFunction: 'mean',
-            graphType: 'bar',
-            normalize: undefined,
-            scaleFactor: undefined,
-            overflowColor: `rgb(255, 32, 255)`,
-            baselineColor: 'lightGray',
-            summarize: true
-        }
-
-        constructor(config, browser) {
-            super(config, browser);
-        }
-
-        init(config) {
-
-            super.init(config);
-
-            this.type = "wig";
-            this.featureType = 'numeric';
-            this.resolutionAware = true;
-            this.paintAxis = paintAxis;
-
-            const format = config.format ? config.format.toLowerCase() : config.format;
-            if (config.featureSource) {
-                this.featureSource = config.featureSource;
-                delete config.featureSource;
-            } else if ("bigwig" === format) {
-                this.featureSource = new BWSource(config, this.browser.genome);
-            } else if ("tdf" === format) {
-                this.featureSource = new TDFSource(config, this.browser.genome);
-            } else {
-                this.featureSource = FeatureSource(config, this.browser.genome);
-            }
-
-
-            // Override autoscale default
-            if (config.max === undefined || config.autoscale === true) {
-                this.autoscale = true;
-            } else {
-                this.dataRange = {
-                    min: config.min || 0,
-                    max: config.max
-                };
-            }
-        }
-
-        async postInit() {
-            const header = await this.getHeader();
-            if (this.disposed) return   // This track was removed during async load
-            if (header) this.setTrackProperties(header);
-        }
-
-        async getFeatures(chr, start, end, bpPerPixel) {
-
-            const windowFunction = this.windowFunction;
-
-            const features = await this.featureSource.getFeatures({
-                chr,
-                start,
-                end,
-                bpPerPixel,
-                visibilityWindow: this.visibilityWindow,
-                windowFunction
-            });
-            if (this.normalize && this.featureSource.normalizationFactor) {
-                const scaleFactor = this.featureSource.normalizationFactor;
-                for (let f of features) {
-                    f.value *= scaleFactor;
-                }
-            }
-            if (this.scaleFactor) {
-                const scaleFactor = this.scaleFactor;
-                for (let f of features) {
-                    f.value *= scaleFactor;
-                }
-            }
-
-            // Summarize features to current resolution.  This needs to be done here, rather than in the "draw" function,
-            // for group autoscale to work.
-            if (this.summarize && ("mean" === windowFunction || "min" === windowFunction || "max" === windowFunction)) {
-                return summarizeData(features, start, bpPerPixel, windowFunction)
-            } else {
-                return features
-            }
-        }
-
-        menuItemList() {
-            const items = [];
-
-            if (this.flipAxis !== undefined) {
-                items.push('<hr>');
-
-                function click() {
-                    this.flipAxis = !this.flipAxis;
-                    this.trackView.repaintViews();
-                }
-
-                items.push({label: 'Flip y-axis', click});
-            }
-
-            if(this.featureSource.windowFunctions) {
-                items.push(...this.wigSummarizationItems());
-            }
-
-            items.push(...this.numericDataMenuItems());
-
-            return items
-        }
-
-        wigSummarizationItems() {
-
-            const windowFunctions = this.featureSource.windowFunctions;
-
-            const menuItems = [];
-            menuItems.push('<hr/>');
-            menuItems.push("<div>Windowing function</div>");
-            for (const wf of windowFunctions) {
-                const object = $$1(createCheckbox(wf, this.windowFunction === wf));
-
-                function clickHandler() {
-                    this.windowFunction = wf;
-                    this.trackView.updateViews();
-                }
-
-                menuItems.push({object, click: clickHandler});
-            }
-
-            return menuItems
-        }
-
-
-        async getHeader() {
-
-            if (typeof this.featureSource.getHeader === "function") {
-                this.header = await this.featureSource.getHeader();
-            }
-            return this.header
-        }
-
-        // TODO: refactor to igvUtils.js
-        getScaleFactor(min, max, height, logScale) {
-            const scale = logScale ? height / (Math.log10(max + 1) - (min <= 0 ? 0 : Math.log10(min + 1))) : height / (max - min);
-            return scale
-        }
-
-        computeYPixelValue(yValue, yScaleFactor) {
-            return (this.flipAxis ? (yValue - this.dataRange.min) : (this.dataRange.max - yValue)) * yScaleFactor
-        }
-
-        computeYPixelValueInLogScale(yValue, yScaleFactor) {
-            let maxValue = this.dataRange.max;
-            let minValue = this.dataRange.min;
-            if (maxValue <= 0) return 0 // TODO:
-            if (minValue <= -1) minValue = 0;
-            minValue = (minValue <= 0) ? 0 : Math.log10(minValue + 1);
-            maxValue = Math.log10(maxValue + 1);
-            yValue = Math.log10(yValue + 1);
-            return ((this.flipAxis ? (yValue - minValue) : (maxValue - yValue)) * yScaleFactor)
-        }
-
-        draw(options) {
-
-            const features = options.features;
-            const ctx = options.context;
-            const bpPerPixel = options.bpPerPixel;
-            const bpStart = options.bpStart;
-            const pixelWidth = options.pixelWidth;
-            const pixelHeight = options.pixelHeight;
-            const bpEnd = bpStart + pixelWidth * bpPerPixel + 1;
-            this.color || DEFAULT_COLOR$1;
-            const scaleFactor = this.getScaleFactor(this.dataRange.min, this.dataRange.max, options.pixelHeight, this.logScale);
-            const yScale = (yValue) => this.logScale
-                ? this.computeYPixelValueInLogScale(yValue, scaleFactor)
-                : this.computeYPixelValue(yValue, scaleFactor);
-
-            if (features && features.length > 0) {
-
-                if (this.dataRange.min === undefined) this.dataRange.min = 0;
-
-                // Max can be less than min if config.min is set but max left to autoscale.   If that's the case there is
-                // nothing to paint.
-                if (this.dataRange.max > this.dataRange.min) {
-
-                    let lastPixelEnd = -1;
-                    let lastY;
-                    const y0 = yScale(0);
-
-                    for (let f of features) {
-
-                        if (f.end < bpStart) continue
-                        if (f.start > bpEnd) break
-
-                        const x = (f.start - bpStart) / bpPerPixel;
-                        if (isNaN(x)) continue
-
-                        let y = yScale(f.value);
-
-                        const rectEnd = (f.end - bpStart) / bpPerPixel;
-                        const width = rectEnd - x;
-
-                        const color = options.alpha ? IGVColor.addAlpha(this.getColorForFeature(f), options.alpha) : this.getColorForFeature(f);
-
-                        if (this.graphType === "line") {
-                            if (lastY !== undefined) {
-                                IGVGraphics.strokeLine(ctx, lastPixelEnd, lastY, x, y, {
-                                    "fillStyle": color,
-                                    "strokeStyle": color
-                                });
-                            }
-                            IGVGraphics.strokeLine(ctx, x, y, x + width, y, {"fillStyle": color, "strokeStyle": color});
-                        } else if (this.graphType === "points") {
-                            const pointSize = this.config.pointSize || 3;
-                            const px = x + width / 2;
-                            IGVGraphics.fillCircle(ctx, px, y, pointSize / 2, {"fillStyle": color, "strokeStyle": color});
-
-                            if (f.value > this.dataRange.max) {
-                                IGVGraphics.fillCircle(ctx, px, pointSize / 2, pointSize / 2, 3, {fillStyle: this.overflowColor});
-                            } else if (f.value < this.dataRange.min) {
-                                IGVGraphics.fillCircle(ctx, px, pixelHeight - pointSize / 2, pointSize / 2, 3, {fillStyle: this.overflowColor});
-                            }
-
-                        } else {
-                            // Default graph type (bar)
-                            const height = Math.min(pixelHeight, y - y0);
-                            IGVGraphics.fillRect(ctx, x, y0, width, height, {fillStyle: color});
-                            if (f.value > this.dataRange.max) {
-                                IGVGraphics.fillRect(ctx, x, 0, width, 3, {fillStyle: this.overflowColor});
-                            } else if (f.value < this.dataRange.min) {
-                                IGVGraphics.fillRect(ctx, x, pixelHeight - 3, width, 3, {fillStyle: this.overflowColor});
-                            }
-
-                        }
-                        lastPixelEnd = x + width;
-                        lastY = y;
-                    }
-
-                    // If the track includes negative values draw a baseline
-                    if (this.dataRange.min < 0) {
-                        const ratio = this.dataRange.max / (this.dataRange.max - this.dataRange.min);
-                        const basepx = this.flipAxis ? (1 - ratio) * options.pixelHeight : ratio * options.pixelHeight;
-                        IGVGraphics.strokeLine(ctx, 0, basepx, options.pixelWidth, basepx, {strokeStyle: this.baselineColor});
-                    }
-                }
-            }
-
-            // Draw guidelines
-            if (this.config.hasOwnProperty('guideLines')) {
-                for (let line of this.config.guideLines) {
-                    if (line.hasOwnProperty('color') && line.hasOwnProperty('y') && line.hasOwnProperty('dotted')) {
-                        let y = yScale(line.y);
-                        let props = {
-                            'strokeStyle': line['color'],
-                            'strokeWidth': 2
-                        };
-                        if (line['dotted']) IGVGraphics.dashedLine(options.context, 0, y, options.pixelWidth, y, 5, props);
-                        else IGVGraphics.strokeLine(options.context, 0, y, options.pixelWidth, y, props);
-                    }
-                }
-            }
-        }
-
-        popupData(clickState, features) {
-
-            if (features === undefined) features = this.clickedFeatures(clickState);
-
-            if (features && features.length > 0) {
-
-                const genomicLocation = clickState.genomicLocation;
-                const popupData = [];
-
-                // Sort features based on distance from click
-                features.sort(function (a, b) {
-                    const distA = Math.abs((a.start + a.end) / 2 - genomicLocation);
-                    const distB = Math.abs((b.start + b.end) / 2 - genomicLocation);
-                    return distA - distB
-                });
-
-                // Display closest 10
-                const displayFeatures = features.length > 10 ? features.slice(0, 10) : features;
-
-                // Resort in ascending order
-                displayFeatures.sort(function (a, b) {
-                    return a.start - b.start
-                });
-
-                for (let selectedFeature of displayFeatures) {
-                    if (selectedFeature) {
-                        if (popupData.length > 0) {
-                            popupData.push('<hr/>');
-                        }
-                        let posString = (selectedFeature.end - selectedFeature.start) === 1 ?
-                            numberFormatter$1(Math.floor(selectedFeature.start) + 1)
-                            : numberFormatter$1(Math.floor(selectedFeature.start) + 1) + "-" + numberFormatter$1(Math.floor(selectedFeature.end));
-                        popupData.push({name: "Position:", value: posString});
-                        popupData.push({
-                            name: "Value:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;",
-                            value: numberFormatter$1(selectedFeature.value.toFixed(4))
-                        });
-                    }
-                }
-                if (displayFeatures.length < features.length) {
-                    popupData.push("<hr/>...");
-                }
-
-                return popupData
-
-            } else {
-                return []
-            }
-        }
-
-        get supportsWholeGenome() {
-            return !this.config.indexURL && this.config.supportsWholeGenome !== false
-        }
-
-        /**
-         * Return color for feature.
-         * @param feature
-         * @returns {string}
-         */
-
-        getColorForFeature(f) {
-            let c = (f.value < 0 && this.altColor) ? this.altColor : this.color || DEFAULT_COLOR$1;
-            return (typeof c === "function") ? c(f.value) : c
-        }
-
-        /**
-         * Called when the track is removed.  Do any needed cleanup here
-         */
-        dispose() {
-            this.trackView = undefined;
-        }
-
-    }
-
-    /**
-     * Summarize wig data in bins of size "bpPerPixel" with the given window function.
-     *
-     * @param features  wig (numeric) data -- features cannot overlap, and are in ascending order by start position
-     * @param startBP  bp start position for computing binned data
-     * @param bpPerPixel  bp per pixel (bin)
-     * @param windowFunction mean, min, or max
-     * @returns {*|*[]}
-     */
-    function summarizeData(features, startBP, bpPerPixel, windowFunction = "mean") {
-
-        if (bpPerPixel <= 1 || !features || features.length === 0) {
-            return features
-        }
-
-        // Assume features are sorted by position.  Wig features cannot overlap.  Note, UCSC "reductionLevel" == bpPerPixel
-        const chr = features[0].chr;
-        const binSize = bpPerPixel;
-        const summaryFeatures = [];
-
-        const finishBin = (bin) => {
-            const start = startBP + bin.bin * binSize;
-            const end = start + binSize;
-            let value;
-            switch (windowFunction) {
-                case "mean":
-                    value = bin.sumData / bin.count;
-                    break
-                case "max":
-                    value = bin.max;
-                    break
-                case "min":
-                    value = bin.min;
-                    break
-                default:
-                    throw Error(`Unknown window function: ${windowFunction}`)
-            }
-            const description = `${windowFunction} of ${bin.count} values`;
-            summaryFeatures.push({chr, start, end, value, description});
-        };
-
-        let currentBinData;
-        for (let f of features) {
-
-            // Loop through bins this feature overlaps, updating the weighted sum for each bin or min/max,
-            // depending on window function
-            let startBin = Math.floor((f.start - startBP) / binSize);
-            const endBin = Math.floor((f.end - startBP) / binSize);
-
-            if (currentBinData && startBin === currentBinData.bin) {
-                currentBinData.add(f);
-                startBin++;
-            }
-
-            if (!currentBinData || endBin > currentBinData.bin) {
-
-                if(currentBinData) {
-                    finishBin(currentBinData);
-                }
-
-                // Feature stretches across multiple bins.
-                if (endBin > startBin) {
-                    const end = startBP + endBin * binSize;
-                    summaryFeatures.push({chr, start: f.start, end, value: f.value});
-                }
-
-                currentBinData = new SummaryBinData(endBin, f);
-            }
-
-        }
-        if(currentBinData) {
-            finishBin(currentBinData);
-        }
-
-        // Consolidate
-        const c = [];
-        let lastFeature = summaryFeatures[0];
-        for (let f of summaryFeatures) {
-            if (lastFeature.value === f.value && f.start <= lastFeature.end) {
-                lastFeature.end = f.end;
-            } else {
-                c.push(lastFeature);
-                lastFeature = f;
-            }
-        }
-        c.push(lastFeature);
-
-        return c
-
-    }
-
-    class SummaryBinData {
-        constructor(bin, feature) {
-            this.bin = bin;
-            this.sumData = feature.value;
-            this.count = 1;
-            this.min = feature.value;
-            this.max = feature.value;
-        }
-
-        add(feature) {
-            this.sumData += feature.value;
-            this.max = Math.max(feature.value, this.max);
-            this.min = Math.min(feature.value, this.min);
-            this.count++;
-        }
-
-        get mean() {
-            return this.sumData / this.count
-        }
-    }
-
     /**
      *
      * @param cs - object containing
@@ -48515,7 +48558,7 @@
         allAlignments() {
             if (this.alignments) {
                 return this.alignments
-            } else {
+            } else if (this.packedGroups) {
                 const all = Array.from(this.packedGroups.values()).flatMap(group => group.rows.flatMap(row => row.alignments));
                 if (this.#unpacked && this.#unpacked.length > 0) {
                     for (let a of this.#unpacked) {
@@ -48523,6 +48566,8 @@
                     }
                 }
                 return all
+            } else {
+                return []
             }
         }
 
@@ -48531,9 +48576,10 @@
         }
 
         sortRows(options) {
-
-            for (let group of this.packedGroups.values()) {
-                group.sortRows(options, this);
+            if(this.packedGroups) {
+                for (let group of this.packedGroups.values()) {
+                    group.sortRows(options, this);
+                }
             }
         }
     }
@@ -49778,46 +49824,41 @@
         },
 
         /**
+         * @param ba - UInt8Array  bytes to decode
          *
-         * @param ba  bytes to decode as a UInt8Array
-         * @param genome  optional igv genome object
-         * @returns {{ magicNumer: number, size: number, chrNames: Array, chrToIndex: ({}|*), chrAliasTable: ({}|*) }}
+         * @returns {{size: *, chrNames: *[], magicNumber: *, chrToIndex: {}}}
          */
-        decodeBamHeader: function (ba, genome) {
+        decodeBamHeader: function (ba) {
 
-            var magic, samHeaderLen, samHeader, chrToIndex, chrNames;
 
-            magic = readInt(ba, 0);
+            const magic = readInt(ba, 0);
             if (magic !== BAM1_MAGIC_NUMBER) {
                 throw new Error('BAM header errror: bad magic number.  This could be caused by either a corrupt or missing file.')
             }
 
-            samHeaderLen = readInt(ba, 4);
-            samHeader = '';
-
+            const samHeaderLen = readInt(ba, 4);
+            let samHeader = '';
             for (var i = 0; i < samHeaderLen; ++i) {
                 samHeader += String.fromCharCode(ba[i + 8]);
             }
 
-            var nRef = readInt(ba, samHeaderLen + 8);
-            var p = samHeaderLen + 12;
+            const nRef = readInt(ba, samHeaderLen + 8);
+            let p = samHeaderLen + 12;
 
-            chrToIndex = {};
-            chrNames = [];
+            const chrToIndex = {};
+            const chrNames = [];
 
             for (i = 0; i < nRef; ++i) {
-                var lName = readInt(ba, p);
-                var name = '';
-                for (var j = 0; j < lName - 1; ++j) {
+                const len = readInt(ba, p);
+                let name = '';
+                for (var j = 0; j < len - 1; ++j) {
                     name += String.fromCharCode(ba[p + 4 + j]);
                 }
-                readInt(ba, p + lName + 4);
-                //dlog(name + ': ' + lRef);
 
                 chrToIndex[name] = i;
                 chrNames[i] = name;
 
-                p = p + 8 + lName;
+                p = p + 8 + len;
             }
 
             return {
@@ -50807,8 +50848,8 @@
                 const ba = unbgzf(compressedData.buffer);
                 this.header = BamUtils.decodeBamHeader(ba, this.genome);
                 this.chrAliasTable = new Map();
-                for (let key of Object.keys(this.header.chrAliasTable)) {
-                    this.chrAliasTable.set(key, this.header.chrAliasTable[key]);
+                for (let name of this.header.chrNames) {
+                    this.chrAliasTable.set(name, this.genome.getChromosomeName(name));
                 }
             }
 
@@ -50818,6 +50859,7 @@
 
             // BAM decoding
             const ba = unbgzf(compressedData.buffer);
+            this.header = BamUtils.decodeBamHeader(ba, this.genome);
 
             const chrIdx = this.header.chrToIndex[chr];
             const alignmentContainer = new AlignmentContainer(chr, start, end, this.config);
@@ -57327,23 +57369,24 @@
             const y = clickState.y;
             const offsetY = y - this.top;
             const genomicLocation = clickState.genomicLocation;
-            const showSoftClips = this.showSoftClips;
-
-            let minGroupY = Number.MAX_VALUE;
-            for (let group of features.packedGroups.values()) {
-                minGroupY = Math.min(minGroupY, group.pixelTop);
-                if (offsetY > group.pixelTop && offsetY <= group.pixelBottom) {
-
-                    const alignmentRowHeight = this.displayMode === "SQUISHED" ?
-                        this.squishedRowHeight :
-                        this.alignmentRowHeight;
-
-                    let packedAlignmentsIndex = Math.floor((offsetY - group.pixelTop) / alignmentRowHeight);
-
-                    if (packedAlignmentsIndex >= 0 && packedAlignmentsIndex < group.length) {
-                        const alignmentRow = group.rows[packedAlignmentsIndex];
-                        const clicked = alignmentRow.alignments.filter(alignment => alignment.containsLocation(genomicLocation, showSoftClips));
-                        if (clicked.length > 0) return clicked[0]
+     
+            if(features.packedGroups) {
+                let minGroupY = Number.MAX_VALUE;
+                for (let group of features.packedGroups.values()) {
+                    minGroupY = Math.min(minGroupY, group.pixelTop);
+                    if (offsetY > group.pixelTop && offsetY <= group.pixelBottom) {
+
+                        const alignmentRowHeight = this.displayMode === "SQUISHED" ?
+                            this.squishedRowHeight :
+                            this.alignmentRowHeight;
+
+                        let packedAlignmentsIndex = Math.floor((offsetY - group.pixelTop) / alignmentRowHeight);
+
+                        if (packedAlignmentsIndex >= 0 && packedAlignmentsIndex < group.length) {
+                            const alignmentRow = group.rows[packedAlignmentsIndex];
+                            const clicked = alignmentRow.alignments.filter(alignment => alignment.containsLocation(genomicLocation, this.showSoftClips));
+                            if (clicked.length > 0) return clicked[0]
+                        }
                     }
                 }
             }
@@ -57662,6 +57705,7 @@
 
 
         constructor(config, parent) {
+            this.featureType = 'numeric';
             this.parent = parent;
             this.featureSource = parent.featureSource;
 
@@ -66140,12 +66184,12 @@
                     if (this.signals.includes(signal_name)) {
                         let tconf = {};
                         tconf.type = "wig";
-                        tconf.isMergedTrack = true;
                         tconf.features = wig;
                         tconf.name = signal_name;
                         tconf.color = this.signal_colors.filter(x => x.singal_name === signal_name).map(x => x.color);
                         const t = await this.browser.createTrack(tconf);
                         if (t) {
+                            t.isMergedTrack = true;
                             t.autoscale = false;     // Scaling done from merged track
                             this.tracks.push(t);
                         } else {
@@ -66324,12 +66368,12 @@
                 if (this.signals.includes(signal_name)) {
                     let tconf = {};
                     tconf.type = "wig";
-                    tconf.isMergedTrack = true;
                     tconf.features = wig;
                     tconf.name = signal_name;
                     tconf.color = this.signal_colors.filter(x => x.singal_name === signal_name).map(x => x.color);
                     const t = await this.browser.createTrack(tconf);
                     if (t) {
+                        t.isMergedTrack = true;
                         t.autoscale = false;     // Scaling done from merged track
                         this.tracks.push(t);
                     } else {
@@ -66722,23 +66766,26 @@
             this.header = await this.getHeader();
 
             // Set colorBy, if not explicitly set default to allele frequency, if available, otherwise default to none (undefined)
-            const infoFields = new Set(Object.keys(this.header.INFO));
-            if (this.config.colorBy) {
-                this.colorBy = this.config.colorBy;
-            } else if (!this.config.color && infoFields.has('AF')) {
-                this.colorBy = 'AF';
-            }
+            if(this.header.INFO) {
+                const infoFields = new Set(Object.keys(this.header.INFO));
+                if (this.config.colorBy) {
+                    this.colorBy = this.config.colorBy;
+                } else if (!this.config.color && infoFields.has('AF')) {
+                    this.colorBy = 'AF';
+                }
 
-            // Configure menu items based on info available
-            if (infoFields.has('AF')) {
-                this._colorByItems.set('AF', 'Allele frequency');
-            }
-            if (infoFields.has('VT')) {
-                this._colorByItems.set('VT', 'Variant Type');
-            }
-            if (infoFields.has('SVTYPE')) {
-                this._colorByItems.set('SVTYPE', 'SV Type');
+                // Configure menu items based on info available
+                if (infoFields.has('AF')) {
+                    this._colorByItems.set('AF', 'Allele frequency');
+                }
+                if (infoFields.has('VT')) {
+                    this._colorByItems.set('VT', 'Variant Type');
+                }
+                if (infoFields.has('SVTYPE')) {
+                    this._colorByItems.set('SVTYPE', 'SV Type');
+                }
             }
+
             if (this.config.colorBy && !this._colorByItems.has(this.config.colorBy)) {
                 this._colorByItems.set(this.config.colorBy, this.config.colorBy);
             }
@@ -69583,11 +69630,15 @@
         JUNCTION_MOTIF_PALETTE.getColor(motif);
     });
 
-    // rendering context with values that only need to be computed once per render, rather than for each splice junction
-    const junctionRenderingContext = {};
 
     class SpliceJunctionTrack extends TrackBase {
 
+        static defaults = {
+            margin: 10,
+            colorByNumReadsThreshold: 5,
+            height: 100
+        }
+
         constructor(config, browser) {
             super(config, browser);
         }
@@ -69608,16 +69659,6 @@
                     FeatureSource(config, this.browser.genome);
             }
 
-            this.margin = config.margin === undefined ? 10 : config.margin;
-
-            if (!this.height) {
-                this.height = 100;
-            }
-
-            //set defaults
-            if (config.colorByNumReadsThreshold === undefined) {
-                config.colorByNumReadsThreshold = 5;
-            }
         }
 
         async postInit() {
@@ -69672,13 +69713,16 @@
             const bpEnd = bpStart + pixelWidth * bpPerPixel + 1;
 
 
-            if (!this.config.isMergedTrack) {
+            if (!this.isMergedTrack) {
                 IGVGraphics.fillRect(ctx, 0, options.pixelTop, pixelWidth, pixelHeight, {'fillStyle': "rgb(255, 255, 255)"});
             }
 
             if (featureList) {
 
 
+                // rendering context with values that only need to be computed once per render, rather than for each splice junction
+                const junctionRenderingContext = {};
+
                 junctionRenderingContext.referenceFrame = options.viewport.referenceFrame;
                 junctionRenderingContext.referenceFrameStart = junctionRenderingContext.referenceFrame.start;
                 junctionRenderingContext.referenceFrameEnd = junctionRenderingContext.referenceFrameStart +
@@ -69691,7 +69735,7 @@
                 for (let feature of featureList) {
                     if (feature.end < bpStart) continue
                     if (feature.start > bpEnd) break
-                    this.renderJunction(feature, bpStart, bpPerPixel, pixelHeight, ctx);
+                    this.renderJunction(feature, bpStart, bpPerPixel, pixelHeight, ctx, junctionRenderingContext);
                 }
 
             } else {
@@ -69708,7 +69752,7 @@
          * @param pixelHeight  pixel height of the current canvas
          * @param ctx  the canvas 2d context
          */
-        renderJunction(feature, bpStart, xScale, pixelHeight, ctx) {
+        renderJunction(feature, bpStart, xScale, pixelHeight, ctx, junctionRenderingContext) {
             // cache whether this junction is rendered or filtered out. Use later to exclude non-rendered junctions from click detection.
             feature.isVisible = false;
 
@@ -69792,7 +69836,7 @@
             }
 
             const py = this.margin;
-            const rowHeight = this.height;
+            const rowHeight = pixelHeight;
 
             const cy = py + 0.5 * rowHeight;
             let topY = py;
@@ -70477,7 +70521,7 @@
         })
     }
 
-    const _version = "3.0.1";
+    const _version = "3.0.3";
     function version() {
         return _version
     }
@@ -71948,16 +71992,17 @@
 
         }
 
-        async present(feature, isUserDefined, event, roiManager, columnContainer, regionElement) {
-            const menuItems = this.menuItems(feature, isUserDefined, event, roiManager, columnContainer, regionElement);
+        async present(feature, roiSet, event, roiManager, columnContainer, regionElement) {
+            const menuItems = this.menuItems(feature, roiSet, event, roiManager, columnContainer, regionElement);
             this.browser.menuPopup.presentTrackContextMenu(event, menuItems);
         }
 
-        menuItems(feature, isUserDefined, event, roiManager, columnContainer, regionElement) {
+        menuItems(feature, roiSet, event, roiManager, columnContainer, regionElement) {
+            const items = feature.name ? [`<b>${feature.name}</b><br/>`]  : [];
+            if ('name' in roiSet) items.push(`<b>ROI Set: ${roiSet.name}</b>`);
+            if (items.length > 0) items.push(`<hr/>`);
 
-            const items = [`<b>${feature.name || ''}</b>`,];
-
-            if (isUserDefined) {
+            if (roiSet.isUserDefined) {
                 items.push(
                     {
                         label: 'Set description ...',
@@ -72021,7 +72066,7 @@
             }
 
 
-            if (isUserDefined) {
+            if (roiSet.isUserDefined) {
                 items.push(
                     '<hr/>',
                     {
@@ -72306,13 +72351,17 @@
                 const [rectA, rectB] = tracks
                     .map(track => track.trackView.viewports[0].$viewport.get(0))
                     .map(element => getElementVerticalDimension(element));
-
+                
+                //Covers cases in which ruler and/or ideogram are hidden
+                const heightA = rectA ? rectA.height : 0;
+                const heightB = rectB ? rectB.height : 0;
+                
                 const elements = browser.columnContainer.querySelectorAll('.igv-roi-region');
 
                 const fudge = -0.5;
                 if (elements) {
                     for (const element of elements) {
-                        element.style.marginTop = `${rectA.height + rectB.height + fudge}px`;
+                        element.style.marginTop = `${heightA + heightB + fudge}px`;
                     }
 
                 }
@@ -72480,7 +72529,6 @@
                 if (features) {
 
                     for (let feature of features) {
-
                         const regionKey = createRegionKey(chr, feature.start, feature.end);
 
                         const {
@@ -72525,8 +72573,7 @@
                 event.stopPropagation();
 
                 translateMouseCoordinates(event, columnContainer);
-                const isUserDefined = roiSet.isUserDefined;
-                this.roiMenu.present(feature, isUserDefined, event, this, columnContainer, regionElement);
+                this.roiMenu.present(feature, roiSet, event, this, columnContainer, regionElement);
             });
 
 
@@ -72928,7 +72975,7 @@
         }
 
         /**
-         * Return the canonical chromosome name for the alias.  If none found return the alias.
+         * Return the cached canonical chromosome name for the alias.  If none found return the alias.
          *
          * Note this will only work if a "search" for ths chromosome has been performed previously.
          *
@@ -73695,7 +73742,7 @@
         }
     }
 
-    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  box-sizing: content-box;\n  position: absolute;\n  z-index: 2048;\n  top: 50%;\n  left: 50%;\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-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  width: 32px;\n  height: 32px;\n  border-style: solid;\n  border-width: 2px;\n  border-color: white;\n  border-radius: 4px;\n}\n\n.igv-ui-color-swatch:hover {\n  border-color: dimgray;\n}\n\n.igv-ui-colorpicker-menu-close-button {\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: 32px;\n  margin-top: 4px;\n  margin-bottom: 4px;\n  padding-right: 8px;\n}\n.igv-ui-colorpicker-menu-close-button i.fa {\n  display: block;\n  margin-left: 4px;\n  margin-right: 4px;\n  color: #5f5f5f;\n}\n.igv-ui-colorpicker-menu-close-button i.fa:hover,\n.igv-ui-colorpicker-menu-close-button i.fa:focus,\n.igv-ui-colorpicker-menu-close-button i.fa:active {\n  cursor: pointer;\n  color: #0f0f0f;\n}\n\n.igv-ui-generic-dialog-container {\n  box-sizing: content-box;\n  position: fixed;\n  top: 0;\n  left: 0;\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  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-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  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-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  box-sizing: content-box;\n  position: absolute;\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-ui-generic-container > div:first-child {\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:first-child > 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-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: absolute;\n  top: 0;\n  left: 0;\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: absolute;\n  top: 0;\n  left: 0;\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:first-child {\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:first-child 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  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  margin-top: 66px;\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.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/*# 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  box-sizing: content-box;\n  position: absolute;\n  z-index: 2048;\n  top: 50%;\n  left: 50%;\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-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  width: 32px;\n  height: 32px;\n  border-style: solid;\n  border-width: 2px;\n  border-color: white;\n  border-radius: 4px;\n}\n\n.igv-ui-color-swatch:hover {\n  border-color: dimgray;\n}\n\n.igv-ui-colorpicker-menu-close-button {\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: 32px;\n  margin-top: 4px;\n  margin-bottom: 4px;\n  padding-right: 8px;\n}\n.igv-ui-colorpicker-menu-close-button i.fa {\n  display: block;\n  margin-left: 4px;\n  margin-right: 4px;\n  color: #5f5f5f;\n}\n.igv-ui-colorpicker-menu-close-button i.fa:hover,\n.igv-ui-colorpicker-menu-close-button i.fa:focus,\n.igv-ui-colorpicker-menu-close-button i.fa:active {\n  cursor: pointer;\n  color: #0f0f0f;\n}\n\n.igv-ui-generic-dialog-container {\n  box-sizing: content-box;\n  position: fixed;\n  top: 0;\n  left: 0;\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  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-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  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-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  box-sizing: content-box;\n  position: absolute;\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-ui-generic-container > div:first-child {\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:first-child > 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-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: absolute;\n  top: 0;\n  left: 0;\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: absolute;\n  top: 0;\n  left: 0;\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:first-child {\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:first-child 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  margin-top: 66px;\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.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/*# sourceMappingURL=igv.css.map */\n';
 
     /**
      * Manages XQTL selections.
@@ -74578,6 +74625,10 @@
          */
         async loadGenome(idOrConfig) {
 
+            if(idOrConfig.genarkAccession) {
+                idOrConfig.url = convertToHubURL(idOrConfig.genarkAccession);
+            }
+
             // Translate the generic "url" field, used by clients such as igv-webapp
             if (idOrConfig.url) {
                 if (isString$2(idOrConfig.url) && idOrConfig.url.endsWith("/hub.txt")) {