igv 3.0.2 → 3.0.3

package/dist/igv.js

@@ -30750,260 +30750,660 @@
 
     }
 
-    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();
+
+
+            if (this.version >= 2) {
+                let nWindowFunctions = binaryParser.getInt();
+                this.windowFunctions = [];
+                while (nWindowFunctions-- > 0) {
+                    this.windowFunctions.push(binaryParser.getString());
+                }
+            }
+
+            this.trackType = binaryParser.getString();
+            this.trackLine = binaryParser.getString();
+
+            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;
 
+            // 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};
+            }
+
+            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
         }
 
-        async defaultVisibilityWindow() {
-            if (this.reader && typeof this.reader.defaultVisibilityWindow === 'function') {
-                return this.reader.defaultVisibilityWindow()
+        async readDataset(chr, windowFunction, zoom) {
+
+            const key = chr + "_" + windowFunction + "_" + zoom;
+
+            if (this.datasetCache[key]) {
+                return this.datasetCache[key]
+
+            } else {
+                await this.readHeader();
+                const wf = (this.version < 2) ? "" : "/" + windowFunction;
+                const zoomString = (chr.toLowerCase() === "all" || zoom === undefined) ? "0" : zoom.toString();
+
+                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
+                }
+
+                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()});
+                }
+
+                const dataset = {
+                    name: dsName,
+                    attributes: attributes,
+                    dataType: dataType,
+                    tileWidth: tileWidth,
+                    tiles: tiles
+                };
+
+                this.datasetCache[key] = dataset;
+                return dataset
             }
         }
 
-        async trackType() {
-            const header = await this.getHeader();
-            if (header) {
-                return header.type
+        async readRootGroup() {
+
+            const genome = this.genome;
+            const rootGroup = this.groupCache["/"];
+            if (rootGroup) {
+                return rootGroup
             } else {
-                return undefined    // Convention for unknown or unspecified
+
+                const group = await this.readGroup("/");
+                const names = group["chromosomes"];
+                const maxZoomString = group["maxZoom"];
+
+                // Now parse out interesting attributes.
+                if (maxZoomString) {
+                    this.maxZoom = Number(maxZoomString);
+                }
+
+                const totalCountString = group["totalCount"];
+                if (totalCountString) {
+                    group.totalCount = Number(totalCountString);
+                }
+
+                // Chromosome names
+                const chrAliasTable = {};
+                if (names) {
+                    names.split(",").forEach(function (chr) {
+                        const canonicalName = genome.getChromosomeName(chr);
+                        chrAliasTable[canonicalName] = chr;
+                    });
+                }
+                this.chrAliasTable = chrAliasTable;
+
+                this.groupCache["/"] = group;
+                return group
             }
         }
 
-        async getHeader() {
-            if (!this.header) {
+        async readGroup(name) {
 
-                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 = {};
+            const group = this.groupCache[name];
+            if (group) {
+                return group
+            } else {
+
+                await this.readHeader();
+                const indexEntry = this.groupIndex[name];
+                if (indexEntry === undefined) {
+                    return undefined
+                }
+
+                const data = await igvxhr.loadArrayBuffer(this.path, buildOptions(this.config, {
+                    range: {
+                        start: indexEntry.position,
+                        size: indexEntry.size
                     }
-                } else {
-                    this.header = {};
+                }));
+
+                if (!data) {
+                    return undefined
                 }
+
+                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
             }
-            return this.header
         }
 
-        /**
-         * 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 readTiles(tileIndeces, nTracks) {
 
-            const isWholeGenome = ("all" === chr.toLowerCase());
+            tileIndeces.sort(function (a, b) {
+                return a.position - b.position
+            });
 
-            start = start || 0;
-            end = end || Number.MAX_SAFE_INTEGER;
+            tileIndeces = tileIndeces.filter(function (idx) {
+                return idx.size > 0
+            });
 
-            // 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);
+            if (tileIndeces.length === 0) {
+                return []
             }
 
-            if (isWholeGenome) {
-                if (!this.wgFeatures) {
-                    if (this.supportsWholeGenome()) {
-                        this.wgFeatures = await computeWGFeatures(this.featureCache.getAllFeatures(), this.genome, this.maxWGCount);
-                    } else {
-                        this.wgFeatures = [];
+            const tiles = [];
+
+            for (let indexEntry of tileIndeces) {
+
+                const data = await igvxhr.loadArrayBuffer(this.path, buildOptions(this.config, {
+                    range: {
+                        start: indexEntry.position,
+                        size: indexEntry.size
                     }
+                }));
+
+                let tileData;
+                try {
+                    tileData = this.compressed ? inflate_1$3(data).buffer : data;
+                } catch (e) {
+                    console.error(e);
+                    continue
                 }
-                return this.wgFeatures
-            } else {
-                return this.featureCache.queryFeatures(chr, start, end)
+
+                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
         }
 
-        async findFeatures(fn) {
-            return this.featureCache ? this.featureCache.findFeatures(fn) : []
-        }
+        async readTile(indexEntry, nTracks) {
 
-        supportsWholeGenome() {
-            return !this.queryable   // queryable (indexed, web services) sources don't support whole genome view
+            let data = await igvxhr.loadArrayBuffer(this.path, buildOptions(this.config, {
+                range: {
+                    start: indexEntry.position,
+                    size: indexEntry.size
+                }
+            }));
+
+            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
+            }
         }
 
-        // 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 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
+        }
+    }
 
-        async loadFeatures(chr, start, end, visibilityWindow) {
+    function createVariableStep(binaryParser, nTracks) {
 
-            await this.getHeader();
+        const tileStart = binaryParser.getInt();
+        const span = binaryParser.getFloat();
+        const nPositions = binaryParser.getInt();
+        const start = [];
 
-            const reader = this.reader;
-            let intervalStart = start;
-            let intervalEnd = end;
+        let np = nPositions;
+        while (np-- > 0) {
+            start.push(binaryParser.getInt());
+        }
+        binaryParser.getInt();  // # of samples, ignored but should === nTracks
 
-            // 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 data = [];
+        let nt = nTracks;
+        while (nt-- > 0) {
+            np = nPositions;
+            const dtrack = [];
+            while (np-- > 0) {
+                dtrack.push(binaryParser.getFloat());
             }
+            data.push(dtrack);
+        }
 
-            // 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;
+        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);
+        }
 
-            let features = await reader.readFeatures(queryChr, intervalStart, intervalEnd);
-            if (this.queryable === undefined) {
-                this.queryable = reader.indexed;
+        if (type === "bedWithName") {
+            n = nPositions;
+            const name = [];
+            while (n-- > 0) {
+                name.push(binaryParser.getString());
             }
+        }
 
-            const genomicInterval = this.queryable ?
-                new GenomicInterval(chr, intervalStart, intervalEnd) :
-                undefined;
+        return {
+            type: type,
+            start: start,
+            end: end,
+            data: data,
+            nTracks: nTracks,
+            nPositions: nPositions
+        }
+    }
 
-            if (features) {
+    /*
+     * 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.
+     */
 
-                // 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);
-                }
+    class TDFSource extends BaseFeatureSource {
 
-                // 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);
+        #wgValues = {}
+        searchable = false
 
-                // If track is marked "searchable"< cache features by name -- use this with caution, memory intensive
-                if (this.searchable) {
-                    this.addFeaturesToDB(features, this.config);
-                }
+
+        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 {
-                this.featureCache = new FeatureCache$1([], genomicInterval);     // Empty cache
+                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;
 
-        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 (!this.rootGroup) {
+                this.rootGroup = await this.reader.readRootGroup();
+                if (!this.normalizationFactor) {
+                    const totalCount = this.rootGroup.totalCount;
+                    if (totalCount) {
+                        this.normalizationFactor = 1.0e6 / totalCount;
                     }
-                    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
+                }
+            }
+
+            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.featureMap.set(key, feature);
                     }
                 }
+                this.#wgValues[windowFunction] = {values: wgFeatures, bpPerPixel};
+                return wgFeatures
             }
         }
 
-        search(term) {
-            if (this.featureMap) {
-                return this.featureMap.get(term.toUpperCase())
-            }
+    }
 
+    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
@@ -31575,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;
@@ -32031,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];
@@ -32219,7 +32619,7 @@
     class BWSource extends BaseFeatureSource {
 
         queryable = true
-        wgValues = {}
+        #wgValues = {}
         windowFunctions = ["mean", "min", "max"]
 
         constructor(config, genome) {
@@ -32231,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);
@@ -32252,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;
@@ -32280,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
             }
         }
@@ -32302,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 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)
+            }
+        }
+    }
+
+    const DEFAULT_COLOR$2 = '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;
+                }
+            }
 
-    const GZIP_FLAG = 0x1;
+            // 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
+            }
+        }
 
-    class TDFReader {
+        menuItemList() {
+            const items = [];
 
-        constructor(config, genome) {
-            this.config = config;
-            this.genome = genome;
-            this.path = config.url;
-            this.groupCache = {};
-            this.datasetCache = {};
-        }
+            if (this.flipAxis !== undefined) {
+                items.push('<hr>');
 
+                function click() {
+                    this.flipAxis = !this.flipAxis;
+                    this.trackView.repaintViews();
+                }
 
-        async readHeader() {
+                items.push({label: 'Flip y-axis', click});
+            }
 
-            if (this.magic !== undefined) {
-                return this   // Already read
+            if(this.featureSource.windowFunctions) {
+                items.push(...this.wigSummarizationItems());
             }
 
-            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();
+            items.push(...this.numericDataMenuItems());
 
+            return items
+        }
 
-            if (this.version >= 2) {
-                let nWindowFunctions = binaryParser.getInt();
-                this.windowFunctions = [];
-                while (nWindowFunctions-- > 0) {
-                    this.windowFunctions.push(binaryParser.getString());
-                }
-            }
+        wigSummarizationItems() {
 
-            this.trackType = binaryParser.getString();
-            this.trackLine = binaryParser.getString();
+            const windowFunctions = this.featureSource.windowFunctions;
 
-            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;
+            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 read index
-            data = await igvxhr.loadArrayBuffer(this.path, buildOptions(this.config, {
-                range: {
-                    start: this.indexPos,
-                    size: this.indexSize
+                function clickHandler() {
+                    this.windowFunction = wf;
+                    this.trackView.updateViews();
                 }
-            }));
-            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};
-            }
 
-            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};
+                menuItems.push({object, click: clickHandler});
             }
 
-            return this
+            return menuItems
         }
 
-        async readDataset(chr, windowFunction, zoom) {
 
-            const key = chr + "_" + windowFunction + "_" + zoom;
+        async getHeader() {
 
-            if (this.datasetCache[key]) {
-                return this.datasetCache[key]
+            if (typeof this.featureSource.getHeader === "function") {
+                this.header = await this.featureSource.getHeader();
+            }
+            return this.header
+        }
 
-            } else {
-                await this.readHeader();
-                const wf = (this.version < 2) ? "" : "/" + windowFunction;
-                const zoomString = (chr.toLowerCase() === "all" || zoom === undefined) ? "0" : zoom.toString();
+        // 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
+        }
 
-                let dsName;
-                if (windowFunction === "raw") {
-                    dsName = "/" + chr + "/raw";
-                } else {
-                    dsName = "/" + chr + "/z" + zoomString + wf;
-                }
-                const indexEntry = this.datasetIndex[dsName];
+        computeYPixelValue(yValue, yScaleFactor) {
+            return (this.flipAxis ? (yValue - this.dataRange.min) : (this.dataRange.max - yValue)) * yScaleFactor
+        }
 
-                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) {
 
-                if (!data) {
-                    return undefined
-                }
+            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);
 
-                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()});
-                }
+            if (features && features.length > 0) {
 
-                const dataset = {
-                    name: dsName,
-                    attributes: attributes,
-                    dataType: dataType,
-                    tileWidth: tileWidth,
-                    tiles: tiles
-                };
+                if (this.dataRange.min === undefined) this.dataRange.min = 0;
 
-                this.datasetCache[key] = dataset;
-                return dataset
-            }
-        }
+                // 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) {
 
-        async readRootGroup() {
+                    let lastPixelEnd = -1;
+                    let lastY;
+                    const y0 = yScale(0);
 
-            const genome = this.genome;
-            const rootGroup = this.groupCache["/"];
-            if (rootGroup) {
-                return rootGroup
-            } else {
+                    for (let f of features) {
 
-                const group = await this.readGroup("/");
-                const names = group["chromosomes"];
-                const maxZoomString = group["maxZoom"];
+                        if (f.end < bpStart) continue
+                        if (f.start > bpEnd) break
 
-                // Now parse out interesting attributes.
-                if (maxZoomString) {
-                    this.maxZoom = Number(maxZoomString);
-                }
+                        const x = (f.start - bpStart) / bpPerPixel;
+                        if (isNaN(x)) continue
 
-                const totalCountString = group["totalCount"];
-                if (totalCountString) {
-                    group.totalCount = Number(totalCountString);
-                }
+                        let y = yScale(f.value);
 
-                // Chromosome names
-                const chrAliasTable = {};
-                if (names) {
-                    names.split(",").forEach(function (chr) {
-                        const canonicalName = genome.getChromosomeName(chr);
-                        chrAliasTable[canonicalName] = chr;
-                    });
-                }
-                this.chrAliasTable = chrAliasTable;
+                        const rectEnd = (f.end - bpStart) / bpPerPixel;
+                        const width = rectEnd - x;
 
-                this.groupCache["/"] = group;
-                return group
-            }
-        }
+                        const color = options.alpha ? IGVColor.addAlpha(this.getColorForFeature(f), options.alpha) : this.getColorForFeature(f);
 
-        async readGroup(name) {
+                        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});
 
-            const group = this.groupCache[name];
-            if (group) {
-                return group
-            } else {
+                            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});
+                            }
 
-                await this.readHeader();
-                const indexEntry = this.groupIndex[name];
-                if (indexEntry === undefined) {
-                    return undefined
-                }
+                        } 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});
+                            }
 
-                const data = await igvxhr.loadArrayBuffer(this.path, buildOptions(this.config, {
-                    range: {
-                        start: indexEntry.position,
-                        size: indexEntry.size
+                        }
+                        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);
-
-            }
-            return tiles
-        }
-
-        async readTile(indexEntry, nTracks) {
-
-            let data = await igvxhr.loadArrayBuffer(this.path, buildOptions(this.config, {
-                range: {
-                    start: indexEntry.position,
-                    size: indexEntry.size
+                if (displayFeatures.length < features.length) {
+                    popupData.push("<hr/>...");
                 }
-            }));
 
-            if (this.compressed) {
-                const plain = inflate_1$3(data);
-                data = plain.buffer;
-            }
+                return popupData
 
-            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
+            } else {
+                return []
             }
         }
 
-    }
+        get supportsWholeGenome() {
+            return !this.config.indexURL && this.config.supportsWholeGenome !== false
+        }
 
-    function createFixedStep(binaryParser, nTracks) {
-        const nPositions = binaryParser.getInt();
-        const start = binaryParser.getInt();
-        const span = binaryParser.getFloat();
+        /**
+         * Return color for feature.
+         * @param feature
+         * @returns {string}
+         */
 
-        const data = [];
-        let nt = nTracks;
-        while (nt-- > 0) {
-            let np = nPositions;
-            const dtrack = [];
-            while (np-- > 0) {
-                dtrack.push(binaryParser.getFloat());
-            }
-            data.push(dtrack);
+        getColorForFeature(f) {
+            let c = (f.value < 0 && this.altColor) ? this.altColor : this.color || DEFAULT_COLOR$2;
+            return (typeof c === "function") ? c(f.value) : c
         }
 
-        return {
-            type: "fixedStep",
-            start: start,
-            span: span,
-            data: data,
-            nTracks: nTracks,
-            nPositions: nPositions
+        /**
+         * Called when the track is removed.  Do any needed cleanup here
+         */
+        dispose() {
+            this.trackView = undefined;
         }
-    }
 
-    function createVariableStep(binaryParser, nTracks) {
+    }
 
-        const tileStart = binaryParser.getInt();
-        const span = binaryParser.getFloat();
-        const nPositions = binaryParser.getInt();
-        const start = [];
+    /**
+     * 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") {
 
-        let np = nPositions;
-        while (np-- > 0) {
-            start.push(binaryParser.getInt());
+        if (bpPerPixel <= 1 || !features || features.length === 0) {
+            return features
         }
-        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());
+        // 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}`)
             }
-            data.push(dtrack);
-        }
+            const description = `${windowFunction} of ${bin.count} values`;
+            summaryFeatures.push({chr, start, end, value, description});
+        };
 
-        return {
-            type: "variableStep",
-            tileStart: tileStart,
-            span: span,
-            start: start,
-            data: data,
-            nTracks: nTracks,
-            nPositions: nPositions
-        }
-    }
+        let currentBinData;
+        for (let f of features) {
 
-    function createBed(binaryParser, nTracks, type) {
+            // 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++;
+            }
 
-        const nPositions = binaryParser.getInt();
+            if (!currentBinData || endBin > currentBinData.bin) {
 
-        let n = nPositions;
-        const start = [];
-        while (n-- > 0) {
-            start.push(binaryParser.getInt());
-        }
+                if(currentBinData) {
+                    finishBin(currentBinData);
+                }
 
-        n = nPositions;
-        const end = [];
-        while (n-- > 0) {
-            end.push(binaryParser.getInt());
-        }
+                // Feature stretches across multiple bins.
+                if (endBin > startBin) {
+                    const end = startBP + endBin * binSize;
+                    summaryFeatures.push({chr, start: f.start, end, value: f.value});
+                }
 
-        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());
+                currentBinData = new SummaryBinData(endBin, f);
             }
-            data.push(dtrack);
+
+        }
+        if(currentBinData) {
+            finishBin(currentBinData);
         }
 
-        if (type === "bedWithName") {
-            n = nPositions;
-            const name = [];
-            while (n-- > 0) {
-                name.push(binaryParser.getString());
+        // 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
 
-        return {
-            type: type,
-            start: start,
-            end: end,
-            data: data,
-            nTracks: nTracks,
-            nPositions: nPositions
-        }
     }
 
-    function consolidateTiles(tiles) {
+    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++;
+        }
 
-        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;
-            }
+        get mean() {
+            return this.sumData / this.count
         }
-        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.
-     *
+    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 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.
+     * @param config
+     * @constructor
      */
+    class TextFeatureSource extends BaseFeatureSource {
 
-    class TDFSource extends BaseFeatureSource {
-
-        searchable = false
         constructor(config, genome) {
+
             super(genome);
+
+            this.config = config || {};
             this.genome = genome;
-            this.reader = new TDFReader(config, genome);
-            this.queryable = true;
-        }
+            this.sourceType = (config.sourceType === undefined ? "file" : config.sourceType);
+            this.maxWGCount = config.maxWGCount || DEFAULT_MAX_WG_COUNT;
+            this.windowFunctions = ["mean", "min", "max", "none"];
 
-        async getFeatures({chr, start, end, bpPerPixel, windowFunction = "mean"}) {
+            const queryableFormats = new Set(["bigwig", "bw", "bigbed", "bb", "biginteract", "biggenepred", "bignarrowpeak", "tdf"]);
 
-            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);
-                            }
-                        }
-                    }
-                }
-                return wgFeatures
+            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 ;
+            }
+
+            // Flag indicating if features loaded by this source can be searched for by name or attribute, true by default
+            this.searchable = config.searchable !== false;
+
+        }
+
+        async defaultVisibilityWindow() {
+            if (this.reader && typeof this.reader.defaultVisibilityWindow === 'function') {
+                return this.reader.defaultVisibilityWindow()
+            }
+        }
 
+        async trackType() {
+            const header = await this.getHeader();
+            if (header) {
+                return header.type
             } else {
-                return this._getFeatures(chr, start, end, bpPerPixel, windowFunction)
+                return undefined    // Convention for unknown or unspecified
             }
         }
-        async _getFeatures(chr, start, end, bpPerPixel, windowFunction) {
-            const genomicInterval = new GenomicInterval(chr, start, end);
-            const genome = this.genome;
 
+        async getHeader() {
+            if (!this.header) {
 
-            if (!this.rootGroup) {
-                this.rootGroup = await this.reader.readRootGroup();
-                if (!this.normalizationFactor) {
-                    const totalCount = this.rootGroup.totalCount;
-                    if (totalCount) {
-                        this.normalizationFactor = 1.0e6 / totalCount;
+                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 this.header
+        }
 
-            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;
+        /**
+         * 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}) {
 
-            const wf = zoom > maxZoom ? "raw" : windowFunction;
-            const dataset = await this.reader.readDataset(queryChr, wf, zoom);
-            if (dataset == null) {
-                return []
+            const isWholeGenome = ("all" === chr.toLowerCase());
+
+            start = start || 0;
+            end = end || Number.MAX_SAFE_INTEGER;
+
+            // 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())
+            }
+
+        }
     }
 
     /*
@@ -34245,7 +34769,7 @@
         }
     }
 
-    const DEFAULT_COLOR$2 = 'rgb(0, 0, 150)';
+    const DEFAULT_COLOR$1 = 'rgb(0, 0, 150)';
 
 
     class FeatureTrack extends TrackBase {
@@ -34742,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) {
@@ -37869,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 = {
 
@@ -37881,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
@@ -37960,7 +38471,7 @@
                         }
                     }
 
-                    if(!reference) {
+                    if (!reference) {
                         alert.present(new Error(`Unknown genome id: ${genomeID}`), undefined);
                     }
                 }
@@ -41538,62 +42049,6 @@
     </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)
      *
@@ -43189,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
@@ -48559,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) {
@@ -48567,6 +48566,8 @@
                     }
                 }
                 return all
+            } else {
+                return []
             }
         }
 
@@ -48575,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);
+                }
             }
         }
     }
@@ -57367,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]
+                        }
                     }
                 }
             }
@@ -70518,7 +70521,7 @@
         })
     }
 
-    const _version = "3.0.2";
+    const _version = "3.0.3";
     function version() {
         return _version
     }
@@ -71989,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 ...',
@@ -72062,7 +72066,7 @@
             }
 
 
-            if (isUserDefined) {
+            if (roiSet.isUserDefined) {
                 items.push(
                     '<hr/>',
                     {
@@ -72347,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`;
                     }
 
                 }
@@ -72521,7 +72529,6 @@
                 if (features) {
 
                     for (let feature of features) {
-
                         const regionKey = createRegionKey(chr, feature.start, feature.end);
 
                         const {
@@ -72566,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);
             });
 
 
@@ -73736,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.
@@ -74619,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")) {