igv 3.0.2 → 3.0.3

package/dist/igv.esm.js

@@ -30744,260 +30744,660 @@ class BaseFeatureSource {
 
 }
 
-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
@@ -31569,7 +31969,7 @@ class BWReader {
         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;
@@ -32025,7 +32425,7 @@ function computeStats() {
     }
 }
 
-function zoomLevelForScale$1(bpPerPixel, zoomLevelHeaders) {
+function zoomLevelForScale(bpPerPixel, zoomLevelHeaders) {
     let level;
     for (let i = 0; i < zoomLevelHeaders.length; i++) {
         const zl = zoomLevelHeaders[i];
@@ -32213,7 +32613,7 @@ class DataBuffer {
 class BWSource extends BaseFeatureSource {
 
     queryable = true
-    wgValues = {}
+    #wgValues = {}
     windowFunctions = ["mean", "min", "max"]
 
     constructor(config, genome) {
@@ -32225,12 +32625,15 @@ class BWSource extends BaseFeatureSource {
 
     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);
@@ -32246,26 +32649,25 @@ class BWSource extends BaseFeatureSource {
         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;
@@ -32274,7 +32676,7 @@ class BWSource extends BaseFeatureSource {
                 wgValues.push(wgFeature);
             }
             wgValues.sort((a, b) => a.start - b.start);
-            this.wgValues[windowFunction] = wgValues;
+            this.#wgValues[windowFunction] = {values: wgValues, bpPerPixel};
             return wgValues
         }
     }
@@ -32296,658 +32698,780 @@ class BWSource extends BaseFeatureSource {
     }
 }
 
-/*
- * 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())
+        }
+
+    }
 }
 
 /*
@@ -34239,7 +34763,7 @@ function renderFusionJuncSpan(feature, bpStart, xScale, pixelHeight, ctx) {
     }
 }
 
-const DEFAULT_COLOR$2 = 'rgb(0, 0, 150)';
+const DEFAULT_COLOR$1 = 'rgb(0, 0, 150)';
 
 
 class FeatureTrack extends TrackBase {
@@ -34736,7 +35260,7 @@ class FeatureTrack extends TrackBase {
 
         // 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) {
@@ -37863,7 +38387,6 @@ function indentLevel(str) {
 }
 
 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 = {
 
@@ -37875,21 +38398,9 @@ const GenomeUtils = {
 
             // 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
@@ -37954,7 +38465,7 @@ const GenomeUtils = {
                     }
                 }
 
-                if(!reference) {
+                if (!reference) {
                     alert.present(new Error(`Unknown genome id: ${genomeID}`), undefined);
                 }
             }
@@ -41532,62 +42043,6 @@ const sampleNameButtonLabel =
     </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)
  *
@@ -43183,462 +43638,6 @@ function renderSVGAxis(context, track, axisCanvas, deltaX, deltaY) {
 
 }
 
-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
@@ -48553,7 +48552,7 @@ class AlignmentContainer {
     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) {
@@ -48561,6 +48560,8 @@ class AlignmentContainer {
                 }
             }
             return all
+        } else {
+            return []
         }
     }
 
@@ -48569,9 +48570,10 @@ class AlignmentContainer {
     }
 
     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);
+            }
         }
     }
 }
@@ -57361,23 +57363,24 @@ class AlignmentTrack extends TrackBase {
         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]
+                    }
                 }
             }
         }
@@ -70512,7 +70515,7 @@ function createReferenceFrameList(loci, genome, browserFlanking, minimumBases, v
     })
 }
 
-const _version = "3.0.2";
+const _version = "3.0.3";
 function version() {
     return _version
 }
@@ -71983,16 +71986,17 @@ class ROIMenu {
 
     }
 
-    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 ...',
@@ -72056,7 +72060,7 @@ class ROIMenu {
         }
 
 
-        if (isUserDefined) {
+        if (roiSet.isUserDefined) {
             items.push(
                 '<hr/>',
                 {
@@ -72341,13 +72345,17 @@ class ROIManager {
             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`;
                 }
 
             }
@@ -72515,7 +72523,6 @@ class ROIManager {
             if (features) {
 
                 for (let feature of features) {
-
                     const regionKey = createRegionKey(chr, feature.start, feature.end);
 
                     const {
@@ -72560,8 +72567,7 @@ class ROIManager {
             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);
         });
 
 
@@ -73730,7 +73736,7 @@ function generateGenomeID(config) {
     }
 }
 
-var igvCss = '.igv-ui-dropdown {\n  cursor: default;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 2048;\n  border-color: #7F7F7F;\n  border-style: solid;\n  border-width: 1px;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: small;\n  font-weight: 400;\n  background-color: white;\n}\n.igv-ui-dropdown > div {\n  overflow-y: auto;\n  overflow-x: hidden;\n  background-color: white;\n}\n.igv-ui-dropdown > div > div {\n  padding: 4px;\n  width: 100%;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  border-bottom-color: #7F7F7F;\n  border-bottom-style: solid;\n  border-bottom-width: 1px;\n  background-color: white;\n}\n.igv-ui-dropdown > div > div:last-child {\n  border-bottom-color: transparent;\n  border-bottom-width: 0;\n}\n.igv-ui-dropdown > div > div:hover {\n  cursor: pointer;\n  background-color: rgba(0, 0, 0, 0.04);\n}\n\n.igv-ui-popover {\n  cursor: default;\n  position: absolute;\n  z-index: 2048;\n  border-color: #7F7F7F;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: 1px;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: small;\n  background-color: white;\n}\n.igv-ui-popover > div:first-child {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  height: 24px;\n  cursor: move;\n  border-top-width: 0;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-bottom-color: #7F7F7F;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n  background-color: #eee;\n}\n.igv-ui-popover > div:first-child > div:first-child {\n  margin-left: 4px;\n}\n.igv-ui-popover > div:first-child > div:last-child {\n  margin-right: 4px;\n  height: 12px;\n  width: 12px;\n  color: #7F7F7F;\n}\n.igv-ui-popover > div:first-child > div:last-child:hover {\n  cursor: pointer;\n  color: #444;\n}\n.igv-ui-popover > div:last-child {\n  user-select: text;\n  overflow-y: auto;\n  overflow-x: hidden;\n  max-height: 400px;\n  max-width: 800px;\n  background-color: white;\n  border-bottom-width: 0;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n}\n.igv-ui-popover > div:last-child > div {\n  margin-left: 4px;\n  margin-right: 4px;\n  min-width: 220px;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.igv-ui-popover > div:last-child > div > span {\n  font-weight: bolder;\n}\n.igv-ui-popover > div:last-child hr {\n  width: 100%;\n}\n\n.igv-ui-alert-dialog-container {\n  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.
@@ -74613,6 +74619,10 @@ class Browser {
      */
     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")) {