igv 3.0.1 → 3.0.3

package/dist/igv.esm.js

@@ -19015,13 +19015,13 @@ class DataRangeDialog {
         if (Array.isArray(trackViewOrTrackViewList)) {
             dataRange = { min: Number.MAX_SAFE_INTEGER, max:-Number.MAX_SAFE_INTEGER };
             for (const trackView of trackViewOrTrackViewList) {
-                if (trackView.dataRange) {
-                    dataRange.min = Math.min(trackView.dataRange.min, dataRange.min);
-                    dataRange.max = Math.max(trackView.dataRange.max, dataRange.max);
+                if (trackView.track.dataRange) {
+                    dataRange.min = Math.min(trackView.track.dataRange.min, dataRange.min);
+                    dataRange.max = Math.max(trackView.track.dataRange.max, dataRange.max);
                 }
             }
         } else {
-            dataRange = trackViewOrTrackViewList.dataRange;
+            dataRange = trackViewOrTrackViewList.track.dataRange;
         }
 
         if (dataRange) {
@@ -19063,7 +19063,7 @@ class DataRangeDialog {
             } else {
                 const list = Array.isArray(trackViewOfTrackViewList) ? trackViewOfTrackViewList : [ trackViewOfTrackViewList ];
                 for (const trackView of list) {
-                    trackView.dataRange = { min, max };
+                    trackView.track.setDataRange({ min, max });
                 }
 
             }
@@ -26696,6 +26696,14 @@ class TrackBase {
         return menuItems
     }
 
+    setDataRange({ min, max }) {
+
+        this.dataRange = { min, max };
+        this.autoscale = false;
+        this.autoscaleGroup = undefined;
+        this.trackView.repaintViews();
+    }
+
     /**
      * Return the first feature in this track whose start position is > position
      * @param chr
@@ -27063,7 +27071,7 @@ class Variant {
         this.filter = tokens[6];
         this.info = {};
         const infoStr = tokens[7];
-        if (infoStr) {
+        if (infoStr && infoStr !== '.') {
             for (let elem of infoStr.split(';')) {
                 var element = elem.split('=');
                 this.info[element[0]] = element[1];
@@ -27222,9 +27230,10 @@ class Variant {
             }
         }
 
-        if (this.info) {
+        const infoKeys = Object.keys(this.info);
+        if (this.info && infoKeys.length > 0) {
             fields.push({html: '<hr style="border-top: dotted 1px;border-color: #c9c3ba" />'});
-            for (let key of Object.keys(this.info)) {
+            for (let key of infoKeys) {
                 fields.push({name: key, value: arrayToString(decodeURIComponent(this.info[key]))});
             }
         }
@@ -27291,7 +27300,7 @@ class SVComplement {
     }
 
     getAttributeValue(key) {
-       return this.mate.getAttributeValue(key)
+        return this.mate.getAttributeValue(key)
     }
 
     getInfo(tag) {
@@ -27314,7 +27323,7 @@ class SVComplement {
         popupData.push({name: 'Pos', value: `${numberFormatter$1(this.pos)}`});
         popupData.push({html: '<hr style="border-top: dotted 1px;border-color: #c9c3ba" />'});
         popupData.push("SV");
-        popupData.push(... this.mate.popupData(genomicLocation, genomeId));
+        popupData.push(...this.mate.popupData(genomicLocation, genomeId));
 
         return popupData
     }
@@ -30735,346 +30744,746 @@ 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();
 
-    }
 
-    async defaultVisibilityWindow() {
-        if (this.reader && typeof this.reader.defaultVisibilityWindow === 'function') {
-            return this.reader.defaultVisibilityWindow()
+        if (this.version >= 2) {
+            let nWindowFunctions = binaryParser.getInt();
+            this.windowFunctions = [];
+            while (nWindowFunctions-- > 0) {
+                this.windowFunctions.push(binaryParser.getString());
+            }
         }
-    }
 
-    async trackType() {
-        const header = await this.getHeader();
-        if (header) {
-            return header.type
-        } else {
-            return undefined    // Convention for unknown or unspecified
-        }
-    }
+        this.trackType = binaryParser.getString();
+        this.trackLine = binaryParser.getString();
 
-    async getHeader() {
-        if (!this.header) {
+        let nTracks = binaryParser.getInt();
+        this.trackNames = [];
+        while (nTracks-- > 0) {
+            this.trackNames.push(binaryParser.getString());
+        }
+        this.genomeID = binaryParser.getString();
+        this.flags = binaryParser.getInt();
+        this.compressed = (this.flags & GZIP_FLAG) !== 0;
 
-            if (this.reader && typeof this.reader.readHeader === "function") {
-                const header = await this.reader.readHeader();
-                if (header) {
-                    this.header = header;
-                    if (header.format) {
-                        this.config.format = header.format;
-                    }
-                } else {
-                    this.header = {};
-                }
-            } else {
-                this.header = {};
+        // Now read index
+        data = await igvxhr.loadArrayBuffer(this.path, buildOptions(this.config, {
+            range: {
+                start: this.indexPos,
+                size: this.indexSize
             }
+        }));
+        binaryParser = new BinaryParser$1(new DataView(data));
+        this.datasetIndex = {};
+        let nEntries = binaryParser.getInt();
+        while (nEntries-- > 0) {
+            const name = binaryParser.getString();
+            const pos = binaryParser.getLong();
+            const size = binaryParser.getInt();
+            this.datasetIndex[name] = {position: pos, size: size};
         }
-        return this.header
+
+        this.groupIndex = {};
+        nEntries = binaryParser.getInt();
+        while (nEntries-- > 0) {
+            const name = binaryParser.getString();
+            const pos = binaryParser.getLong();
+            const size = binaryParser.getInt();
+            this.groupIndex[name] = {position: pos, size: size};
+        }
+
+        return this
     }
 
-    /**
-     * Required function for all data source objects.  Fetches features for the
-     * range requested.
-     *
-     * This function is quite complex due to the variety of reader types backing it, some indexed, some queryable,
-     * some not.
-     *
-     * @param chr
-     * @param start
-     * @param end
-     * @param bpPerPixel
-     */
-    async getFeatures({chr, start, end, bpPerPixel, visibilityWindow}) {
+    async readDataset(chr, windowFunction, zoom) {
 
-        const isWholeGenome = ("all" === chr.toLowerCase());
+        const key = chr + "_" + windowFunction + "_" + zoom;
 
-        start = start || 0;
-        end = end || Number.MAX_SAFE_INTEGER;
+        if (this.datasetCache[key]) {
+            return this.datasetCache[key]
 
-        // Various conditions that can require a feature load
-        //   * view is "whole genome" but no features are loaded
-        //   * cache is disabled
-        //   * cache does not contain requested range
-        // const containsRange = this.featureCache.containsRange(new GenomicInterval(queryChr, start, end))
-        if ((isWholeGenome && !this.wgFeatures && this.supportsWholeGenome()) ||
-            this.config.disableCache ||
-            !this.featureCache ||
-            !this.featureCache.containsRange(new GenomicInterval(chr, start, end))) {
-            await this.loadFeatures(chr, start, end, visibilityWindow);
-        }
+        } else {
+            await this.readHeader();
+            const wf = (this.version < 2) ? "" : "/" + windowFunction;
+            const zoomString = (chr.toLowerCase() === "all" || zoom === undefined) ? "0" : zoom.toString();
 
-        if (isWholeGenome) {
-            if (!this.wgFeatures) {
-                if (this.supportsWholeGenome()) {
-                    this.wgFeatures = await computeWGFeatures(this.featureCache.getAllFeatures(), this.genome, this.maxWGCount);
-                } else {
-                    this.wgFeatures = [];
+            let dsName;
+            if (windowFunction === "raw") {
+                dsName = "/" + chr + "/raw";
+            } else {
+                dsName = "/" + chr + "/z" + zoomString + wf;
+            }
+            const indexEntry = this.datasetIndex[dsName];
+
+            if (indexEntry === undefined) {
+                return undefined
+            }
+
+            const data = await igvxhr.loadArrayBuffer(this.path, buildOptions(this.config, {
+                range: {
+                    start: indexEntry.position,
+                    size: indexEntry.size
                 }
+            }));
+
+            if (!data) {
+                return undefined
             }
-            return this.wgFeatures
-        } else {
-            return this.featureCache.queryFeatures(chr, start, end)
-        }
-    }
 
-    async findFeatures(fn) {
-        return this.featureCache ? this.featureCache.findFeatures(fn) : []
-    }
+            const binaryParser = new BinaryParser$1(new DataView(data));
+            let nAttributes = binaryParser.getInt();
+            const attributes = {};
+            while (nAttributes-- > 0) {
+                attributes[binaryParser.getString()] = binaryParser.getString();
+            }
+            const dataType = binaryParser.getString();
+            const tileWidth = binaryParser.getFloat();
+            let nTiles = binaryParser.getInt();
+            const tiles = [];
+            while (nTiles-- > 0) {
+                tiles.push({position: binaryParser.getLong(), size: binaryParser.getInt()});
+            }
 
-    supportsWholeGenome() {
-        return !this.queryable   // queryable (indexed, web services) sources don't support whole genome view
-    }
+            const dataset = {
+                name: dsName,
+                attributes: attributes,
+                dataType: dataType,
+                tileWidth: tileWidth,
+                tiles: tiles
+            };
 
-    // TODO -- experimental, will only work for non-indexed sources
-    getAllFeatures() {
-        if (this.queryable || !this.featureCache) {   // queryable sources don't support all features
-            return []
-        } else {
-            return this.featureCache.getAllFeatures()
+            this.datasetCache[key] = dataset;
+            return dataset
         }
     }
 
+    async readRootGroup() {
 
-    async loadFeatures(chr, start, end, visibilityWindow) {
+        const genome = this.genome;
+        const rootGroup = this.groupCache["/"];
+        if (rootGroup) {
+            return rootGroup
+        } else {
 
-        await this.getHeader();
+            const group = await this.readGroup("/");
+            const names = group["chromosomes"];
+            const maxZoomString = group["maxZoom"];
 
-        const reader = this.reader;
-        let intervalStart = start;
-        let intervalEnd = end;
+            // Now parse out interesting attributes.
+            if (maxZoomString) {
+                this.maxZoom = Number(maxZoomString);
+            }
 
-        // chr aliasing
-        let queryChr = chr;
-        if (!this.chrAliasManager && this.reader && this.reader.sequenceNames) {
-            this.chrAliasManager = new ChromAliasManager(this.reader.sequenceNames, this.genome);
-        }
-        if (this.chrAliasManager) {
-            queryChr = await this.chrAliasManager.getAliasName(chr);
-        }
+            const totalCountString = group["totalCount"];
+            if (totalCountString) {
+                group.totalCount = Number(totalCountString);
+            }
 
-        // Use visibility window to potentially expand query interval.
-        // This can save re-queries as we zoom out.  Visibility window <= 0 is a special case
-        // indicating whole chromosome should be read at once.
-        if ((!visibilityWindow || visibilityWindow <= 0) && this.config.expandQuery !== false) {
-            // Whole chromosome
-            const chromosome = this.genome ? this.genome.getChromosome(queryChr) : undefined;
-            intervalStart = 0;
-            intervalEnd = Math.max(chromosome ? chromosome.bpLength : Number.MAX_SAFE_INTEGER, end);
-        } else if (visibilityWindow > (end - start) && this.config.expandQuery !== false) {
-            let expansionWindow = Math.min(4.1 * (end - start), visibilityWindow);
-            if(this.config.minQuerySize && expansionWindow < this.config.minQuerySize) {
-                expansionWindow = this.config.minQuerySize;
+            // Chromosome names
+            const chrAliasTable = {};
+            if (names) {
+                names.split(",").forEach(function (chr) {
+                    const canonicalName = genome.getChromosomeName(chr);
+                    chrAliasTable[canonicalName] = chr;
+                });
             }
-            intervalStart = Math.max(0, (start + end - expansionWindow) / 2);
-            intervalEnd = intervalStart + expansionWindow;
-        }
+            this.chrAliasTable = chrAliasTable;
 
-        let features = await reader.readFeatures(queryChr, intervalStart, intervalEnd);
-        if (this.queryable === undefined) {
-            this.queryable = reader.indexed;
+            this.groupCache["/"] = group;
+            return group
         }
+    }
 
-        const genomicInterval = this.queryable ?
-            new GenomicInterval(chr, intervalStart, intervalEnd) :
-            undefined;
+    async readGroup(name) {
 
-        if (features) {
+        const group = this.groupCache[name];
+        if (group) {
+            return group
+        } else {
 
-            // Assign overlapping features to rows
-            if (this.config.format !== "wig" && this.config.type !== "junctions") {
-                const maxRows = this.config.maxRows || Number.MAX_SAFE_INTEGER;
-                packFeatures(features, maxRows);
+            await this.readHeader();
+            const indexEntry = this.groupIndex[name];
+            if (indexEntry === undefined) {
+                return undefined
             }
 
-            // Note - replacing previous cache with new one.  genomicInterval is optional (might be undefined => includes all features)
-            this.featureCache = new FeatureCache$1(features, this.genome, genomicInterval);
+            const data = await igvxhr.loadArrayBuffer(this.path, buildOptions(this.config, {
+                range: {
+                    start: indexEntry.position,
+                    size: indexEntry.size
+                }
+            }));
 
-            // If track is marked "searchable"< cache features by name -- use this with caution, memory intensive
-            if (this.searchable) {
-                this.addFeaturesToDB(features, this.config);
+            if (!data) {
+                return undefined
             }
-        } else {
-            this.featureCache = new FeatureCache$1([], genomicInterval);     // Empty cache
-        }
-    }
 
-    addFeaturesToDB(featureList, config) {
-        if (!this.featureMap) {
-            this.featureMap = new Map();
-        }
-        const searchableFields = config.searchableFields || ["name", "transcript_id", "gene_id", "gene_name", "id"];
-        for (let feature of featureList) {
-            for (let field of searchableFields) {
-                let key;
-                if (typeof feature.getAttributeValue === 'function') {
-                    key = feature.getAttributeValue(field);
-                }
-                if (key) {
-                    key = key.replaceAll(' ', '+').toUpperCase();
-                    // If feature is already present keep largest one
-                    if (this.featureMap.has(key)) {
-                        const f2 = this.featureMap.get(key);
-                        if (feature.end - feature.start < f2.end - f2.start) {
-                            continue
-                        }
-                    }
-                    this.featureMap.set(key, feature);
-                }
+            const binaryParser = new BinaryParser$1(new DataView(data));
+            const group = {name: name};
+            let nAttributes = binaryParser.getInt();
+            while (nAttributes-- > 0) {
+                const key = binaryParser.getString();
+                const value = binaryParser.getString();
+                group[key] = value;
             }
+            this.groupCache[name] = group;
+            return group
         }
     }
 
-    search(term) {
-        if (this.featureMap) {
-            return this.featureMap.get(term.toUpperCase())
-        }
-
-    }
-}
-
-/**
- * A ChromTree parses a UCSC bigbed/bigwig "chromosomeTree" section of the header to produce 2 maps,
- * (1) ID -> chromosome names, and its
- * (2) chromsome name -> ID
- *
- * Both maps are needed by IGV
- *
- * The chromosome tree is a B+ index, but is located continguously in memory in the header section of the file. This
- * makes it feasible to parse the whole tree with data from a single fetch.   In the end the tree is discarded
- * leaving only the mapps.
- */
-class ChromTree {
+    async readTiles(tileIndeces, nTracks) {
 
-    constructor(header, nameToID, valueToKey, sumLengths) {
-        this.header = header;
-        this.nameToId = nameToID;
-        this.idToName = valueToKey;
-        this.sumLengths = sumLengths;
-    }
+        tileIndeces.sort(function (a, b) {
+            return a.position - b.position
+        });
 
-    static parseTree(binaryParser, startOffset, genome = false) {
-        {
-            const magic = binaryParser.getInt();
-            const blockSize = binaryParser.getInt();
-            const keySize = binaryParser.getInt();
-            const valSize = binaryParser.getInt();
-            const itemCount = binaryParser.getLong();
-            const reserved = binaryParser.getLong();
+        tileIndeces = tileIndeces.filter(function (idx) {
+            return idx.size > 0
+        });
 
-            const header = {magic, blockSize, keySize, valSize, itemCount, reserved};
-            const nameToId = new Map();
-            const idToName = [];
-            let sumLengths = 0;
-            const readTreeNode = (offset) => {
+        if (tileIndeces.length === 0) {
+            return []
+        }
 
-                if (offset >= 0) binaryParser.position = offset;
-                const type = binaryParser.getByte();
-                binaryParser.getByte();
-                const count = binaryParser.getUShort();
+        const tiles = [];
 
-                if (type === 1) {
-                    // Leaf node
-                    for (let i = 0; i < count; i++) {
-                        let key = binaryParser.getFixedLengthString(keySize);
-                        let value;
-                        if (valSize === 8) {
-                            value = binaryParser.getInt();
-                            const chromSize = binaryParser.getInt();
-                            sumLengths += chromSize;
-                            if (genome) key = genome.getChromosomeName(key);  // Translate to canonical chr name
-                            nameToId.set(key, value);
-                            idToName[value] = key;
+        for (let indexEntry of tileIndeces) {
 
-                        } else {
-                            throw Error(`Unexpected "valSize" value in chromosome tree.  Expected 8, actual value is ${valSize}`)
-                        }
-                    }
-                } else {
-                    // non-leaf
-                    for (let i = 0; i < count; i++) {
-                        binaryParser.getFixedLengthString(keySize);
-                        const childOffset = binaryParser.getLong();
-                        const bufferOffset = childOffset - startOffset;
-                        const currOffset = binaryParser.position;
-                        readTreeNode(bufferOffset);
-                        binaryParser.position = currOffset;
-                    }
+            const data = await igvxhr.loadArrayBuffer(this.path, buildOptions(this.config, {
+                range: {
+                    start: indexEntry.position,
+                    size: indexEntry.size
                 }
-            };
+            }));
 
-            // Recursively walk tree to populate dictionary
-            readTreeNode(binaryParser);
+            let tileData;
+            try {
+                tileData = this.compressed ? inflate_1$3(data).buffer : data;
+            } catch (e) {
+                console.error(e);
+                continue
+            }
 
-            return new ChromTree(header, nameToId, idToName, sumLengths)
+            const binaryParser = new BinaryParser$1(new DataView(tileData));
+            const type = binaryParser.getString();
+            let tile;
+            switch (type) {
+                case "fixedStep":
+                    tile = createFixedStep(binaryParser, nTracks);
+                    break
+                case "variableStep":
+                    tile = createVariableStep(binaryParser, nTracks);
+                    break
+                case "bed":
+                case "bedWithName":
+                    tile = createBed(binaryParser, nTracks, type);
+                    break
+                default:
+                    throw "Unknown tile type: " + type
+            }
+            tiles.push(tile);
         }
+        return tiles
     }
 
-}
-
-const RPTREE_HEADER_SIZE = 48;
-const RPTREE_NODE_LEAF_ITEM_SIZE = 32;   // leaf item size
-const RPTREE_NODE_CHILD_ITEM_SIZE = 24;  // child item size
+    async readTile(indexEntry, nTracks) {
 
-class RPTree {
+        let data = await igvxhr.loadArrayBuffer(this.path, buildOptions(this.config, {
+            range: {
+                start: indexEntry.position,
+                size: indexEntry.size
+            }
+        }));
 
-    static magic = 610839776
+        if (this.compressed) {
+            const plain = inflate_1$3(data);
+            data = plain.buffer;
+        }
+
+        const binaryParser = new BinaryParser$1(new DataView(data));
+        const type = binaryParser.getString();
+        switch (type) {
+            case "fixedStep":
+                return createFixedStep(binaryParser, nTracks)
+            case "variableStep":
+                return createVariableStep(binaryParser, nTracks)
+            case "bed":
+            case "bedWithName":
+                return createBed(binaryParser, nTracks, type)
+            default:
+                throw "Unknown tile type: " + type
+        }
+    }
+
+}
+
+function createFixedStep(binaryParser, nTracks) {
+    const nPositions = binaryParser.getInt();
+    const start = binaryParser.getInt();
+    const span = binaryParser.getFloat();
+
+    const data = [];
+    let nt = nTracks;
+    while (nt-- > 0) {
+        let np = nPositions;
+        const dtrack = [];
+        while (np-- > 0) {
+            dtrack.push(binaryParser.getFloat());
+        }
+        data.push(dtrack);
+    }
+
+    return {
+        type: "fixedStep",
+        start: start,
+        span: span,
+        data: data,
+        nTracks: nTracks,
+        nPositions: nPositions
+    }
+}
+
+function createVariableStep(binaryParser, nTracks) {
+
+    const tileStart = binaryParser.getInt();
+    const span = binaryParser.getFloat();
+    const nPositions = binaryParser.getInt();
+    const start = [];
+
+    let np = nPositions;
+    while (np-- > 0) {
+        start.push(binaryParser.getInt());
+    }
+    binaryParser.getInt();  // # of samples, ignored but should === nTracks
+
+    const data = [];
+    let nt = nTracks;
+    while (nt-- > 0) {
+        np = nPositions;
+        const dtrack = [];
+        while (np-- > 0) {
+            dtrack.push(binaryParser.getFloat());
+        }
+        data.push(dtrack);
+    }
+
+    return {
+        type: "variableStep",
+        tileStart: tileStart,
+        span: span,
+        start: start,
+        data: data,
+        nTracks: nTracks,
+        nPositions: nPositions
+    }
+}
+
+function createBed(binaryParser, nTracks, type) {
+
+    const nPositions = binaryParser.getInt();
+
+    let n = nPositions;
+    const start = [];
+    while (n-- > 0) {
+        start.push(binaryParser.getInt());
+    }
+
+    n = nPositions;
+    const end = [];
+    while (n-- > 0) {
+        end.push(binaryParser.getInt());
+    }
+
+    binaryParser.getInt();  // # of samples, ignored but should === nTracks
+    const data = [];
+    let nt = nTracks;
+    while (nt-- > 0) {
+        let np = nPositions;
+        const dtrack = [];
+        while (np-- > 0) {
+            dtrack.push(binaryParser.getFloat());
+        }
+        data.push(dtrack);
+    }
+
+    if (type === "bedWithName") {
+        n = nPositions;
+        const name = [];
+        while (n-- > 0) {
+            name.push(binaryParser.getString());
+        }
+    }
+
+    return {
+        type: type,
+        start: start,
+        end: end,
+        data: data,
+        nTracks: nTracks,
+        nPositions: nPositions
+    }
+}
+
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2016 University of California San Diego
+ * Author: Jim Robinson
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+class TDFSource extends BaseFeatureSource {
+
+    #wgValues = {}
+    searchable = false
+
+
+    constructor(config, genome) {
+        super(genome);
+        this.genome = genome;
+        this.reader = new TDFReader(config, genome);
+        this.queryable = true;
+    }
+
+    async getFeatures({chr, start, end, bpPerPixel, windowFunction = "mean"}) {
+
+        if (chr.toLowerCase() === "all") {
+            return this.getWGValues(windowFunction, bpPerPixel)
+        } else {
+            return this._getFeatures(chr, start, end, bpPerPixel, windowFunction)
+        }
+    }
+    async _getFeatures(chr, start, end, bpPerPixel, windowFunction) {
+        const genomicInterval = new GenomicInterval(chr, start, end);
+        const genome = this.genome;
+
+
+        if (!this.rootGroup) {
+            this.rootGroup = await this.reader.readRootGroup();
+            if (!this.normalizationFactor) {
+                const totalCount = this.rootGroup.totalCount;
+                if (totalCount) {
+                    this.normalizationFactor = 1.0e6 / totalCount;
+                }
+            }
+        }
+
+        genomicInterval.bpPerPixel = bpPerPixel;
+        const zoom = zoomLevelForScale$1(chr, bpPerPixel, genome);
+        let queryChr = this.reader.chrAliasTable[chr];
+        let maxZoom = this.reader.maxZoom;
+        if (queryChr === undefined) queryChr = chr;
+        if (maxZoom === undefined) maxZoom = -1;
+
+        const wf = zoom > maxZoom ? "raw" : windowFunction;
+        const dataset = await this.reader.readDataset(queryChr, wf, zoom);
+        if (dataset == null) {
+            return []
+        }
+
+        const tileWidth = dataset.tileWidth;
+        const startTile = Math.floor(start / tileWidth);
+        const endTile = Math.floor(end / tileWidth);
+        const NTRACKS = 1;   // TODO read this
+        const tiles = await this.reader.readTiles(dataset.tiles.slice(startTile, endTile + 1), NTRACKS);
+        const features = [];
+        for (let tile of tiles) {
+            switch (tile.type) {
+                case "bed":
+                    decodeBedTile(tile, chr, start, end, bpPerPixel, features);
+                    break
+                case "variableStep":
+                    decodeVaryTile(tile, chr, start, end, bpPerPixel, features);
+                    break
+                case "fixedStep":
+                    decodeFixedTile(tile, chr, start, end, bpPerPixel, features);
+                    break
+                default:
+                    throw ("Unknown tile type: " + tile.type)
+            }
+        }
+        features.sort(function (a, b) {
+            return a.start - b.start
+        });
+
+        return features
+    }
+
+    get supportsWholeGenome() {
+        return true
+    }
+
+    get windowFunctions() {
+        return this.reader.windowFunctions
+    }
+
+    async getWGValues(windowFunction, bpPerPixel) {
+
+        const cached = this.#wgValues[windowFunction];
+        if (cached && cached.bpPerPixel > 0.8 * bpPerPixel && cached.bpPerPixel < 1.2 * bpPerPixel) {
+            return cached.values
+        } else {
+            const wgFeatures = [];
+            const genome = this.genome;
+            const chrNames = this.genome.wgChromosomeNames;
+            if (chrNames) {
+                for (let c of genome.wgChromosomeNames) {
+                    const len = genome.getChromosome(c).bpLength;
+                    bpPerPixel = len / 1000;
+                    const chrFeatures = await this._getFeatures(c, 0, len, bpPerPixel, windowFunction);
+                    if (chrFeatures) {
+                        for (let f of chrFeatures) {
+                            const wg = Object.assign({}, f);
+                            wg.chr = "all";
+                            wg.start = genome.getGenomeCoordinate(f.chr, f.start);
+                            wg.end = genome.getGenomeCoordinate(f.chr, f.end);
+                            wg._f = f;
+                            wgFeatures.push(wg);
+                        }
+                    }
+                }
+            }
+            this.#wgValues[windowFunction] = {values: wgFeatures, bpPerPixel};
+            return wgFeatures
+        }
+    }
+
+}
+
+function decodeBedTile(tile, chr, bpStart, bpEnd, bpPerPixel, features) {
+
+    const nPositions = tile.nPositions;
+    const starts = tile.start;
+    const ends = tile.end;
+    const data = tile.data[0];   // Single track for now
+    for (let i = 0; i < nPositions; i++) {
+        const s = starts[i];
+        const e = ends[i];
+        if (e < bpStart) continue
+        if (s > bpEnd) break
+        features.push({
+            chr: chr,
+            start: s,
+            end: e,
+            value: data[i]
+        });
+    }
+}
+
+function decodeVaryTile(tile, chr, bpStart, bpEnd, bpPerPixel, features) {
+
+    const nPositions = tile.nPositions;
+    const starts = tile.start;
+    const span = tile.span;
+    const data = tile.data[0];   // Single track for now
+    for (let i = 0; i < nPositions; i++) {
+        const s = starts[i];
+        const e = s + span;
+        if (e < bpStart) continue
+        if (s > bpEnd) break
+        features.push({
+            chr: chr,
+            start: s,
+            end: e,
+            value: data[i]
+        });
+    }
+}
+
+function decodeFixedTile(tile, chr, bpStart, bpEnd, bpPerPixel, features) {
+
+    const nPositions = tile.nPositions;
+    let s = tile.start;
+    const span = tile.span;
+    const data = tile.data[0];   // Single track for now
+
+    for (let i = 0; i < nPositions; i++) {
+        const e = s + span;
+        if (s > bpEnd) break
+        if (e >= bpStart) {
+            if (!Number.isNaN(data[i])) {
+                features.push({
+                    chr: chr,
+                    start: s,
+                    end: e,
+                    value: data[i]
+                });
+            }
+        }
+        s = e;
+    }
+}
+
+
+var log2 = Math.log(2);
+
+function zoomLevelForScale$1(chr, bpPerPixel, genome) {
+
+    // Convert bpPerPixel to IGV "zoom" level.   This is a bit convoluted,  TDF is computed zoom levels assuming
+    // display in a 700 pixel window.  The fully zoomed out view of a chromosome is zoom level "0".
+    // Zoom level 1 is magnified 2X,  and so forth
+
+    var chrSize = genome.getChromosome(chr).bpLength;
+
+    return Math.ceil(Math.log(Math.max(0, (chrSize / (bpPerPixel * 700)))) / log2)
+}
+
+/**
+ * A ChromTree parses a UCSC bigbed/bigwig "chromosomeTree" section of the header to produce 2 maps,
+ * (1) ID -> chromosome names, and its
+ * (2) chromsome name -> ID
+ *
+ * Both maps are needed by IGV
+ *
+ * The chromosome tree is a B+ index, but is located continguously in memory in the header section of the file. This
+ * makes it feasible to parse the whole tree with data from a single fetch.   In the end the tree is discarded
+ * leaving only the mapps.
+ */
+class ChromTree {
+
+    constructor(header, nameToID, valueToKey, sumLengths) {
+        this.header = header;
+        this.nameToId = nameToID;
+        this.idToName = valueToKey;
+        this.sumLengths = sumLengths;
+    }
+
+    static parseTree(binaryParser, startOffset, genome = false) {
+        {
+            const magic = binaryParser.getInt();
+            const blockSize = binaryParser.getInt();
+            const keySize = binaryParser.getInt();
+            const valSize = binaryParser.getInt();
+            const itemCount = binaryParser.getLong();
+            const reserved = binaryParser.getLong();
+
+            const header = {magic, blockSize, keySize, valSize, itemCount, reserved};
+            const nameToId = new Map();
+            const idToName = [];
+            let sumLengths = 0;
+            const readTreeNode = (offset) => {
+
+                if (offset >= 0) binaryParser.position = offset;
+                const type = binaryParser.getByte();
+                binaryParser.getByte();
+                const count = binaryParser.getUShort();
+
+                if (type === 1) {
+                    // Leaf node
+                    for (let i = 0; i < count; i++) {
+                        let key = binaryParser.getFixedLengthString(keySize);
+                        let value;
+                        if (valSize === 8) {
+                            value = binaryParser.getInt();
+                            const chromSize = binaryParser.getInt();
+                            sumLengths += chromSize;
+                            if (genome) key = genome.getChromosomeName(key);  // Translate to canonical chr name
+                            nameToId.set(key, value);
+                            idToName[value] = key;
+
+                        } else {
+                            throw Error(`Unexpected "valSize" value in chromosome tree.  Expected 8, actual value is ${valSize}`)
+                        }
+                    }
+                } else {
+                    // non-leaf
+                    for (let i = 0; i < count; i++) {
+                        binaryParser.getFixedLengthString(keySize);
+                        const childOffset = binaryParser.getLong();
+                        const bufferOffset = childOffset - startOffset;
+                        const currOffset = binaryParser.position;
+                        readTreeNode(bufferOffset);
+                        binaryParser.position = currOffset;
+                    }
+                }
+            };
+
+            // Recursively walk tree to populate dictionary
+            readTreeNode(binaryParser);
+
+            return new ChromTree(header, nameToId, idToName, sumLengths)
+        }
+    }
+
+}
+
+const RPTREE_HEADER_SIZE = 48;
+const RPTREE_NODE_LEAF_ITEM_SIZE = 32;   // leaf item size
+const RPTREE_NODE_CHILD_ITEM_SIZE = 24;  // child item size
+
+class RPTree {
+
+    static magic = 610839776
     littleEndian = true
     nodeCache = new Map()
 
@@ -31210,7 +31619,7 @@ function overlaps(item, chrIdx1, startBase, chrIdx2, endBase) {
 
 function getDecoder(definedFieldCount, fieldCount, autoSql, format) {
 
-    if ("biginteract" === format || (autoSql && ('chromatinInteract' === autoSql.table) || 'interact' === autoSql.table)) {
+    if ("biginteract" === format || (autoSql && ('chromatinInteract' === autoSql.table || 'interact' === autoSql.table))) {
         return decodeInteract
     } else {
         const standardFieldCount = definedFieldCount - 3;
@@ -31560,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;
@@ -32016,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];
@@ -32204,7 +32613,7 @@ class DataBuffer {
 class BWSource extends BaseFeatureSource {
 
     queryable = true
-    wgValues = {}
+    #wgValues = {}
     windowFunctions = ["mean", "min", "max"]
 
     constructor(config, genome) {
@@ -32216,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);
@@ -32237,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;
@@ -32265,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
         }
     }
@@ -32287,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 GZIP_FLAG = 0x1;
+const shim = .01;
+const colorStripWidth = 4;
+const axesXOffset = colorStripWidth + 1;
+function paintAxis(ctx, width, height, colorOrUndefined) {
 
-class TDFReader {
+    if (undefined === this.dataRange || undefined === this.dataRange.max || undefined === this.dataRange.min) {
+        return
+    }
 
-    constructor(config, genome) {
-        this.config = config;
-        this.genome = genome;
-        this.path = config.url;
-        this.groupCache = {};
-        this.datasetCache = {};
+    IGVGraphics.fillRect(ctx, 0, 0, width, height, { fillStyle: 'white' });
+    if (colorOrUndefined) {
+        IGVGraphics.fillRect(ctx, width - colorStripWidth - 2, 0, colorStripWidth, height, { fillStyle: colorOrUndefined });
     }
 
+    const flipAxis = (undefined === this.flipAxis) ? false : this.flipAxis;
 
-    async readHeader() {
+    const xTickStart = 0.95 * width - 8 - axesXOffset;
+    const xTickEnd   = 0.95 * width - axesXOffset;
 
-        if (this.magic !== undefined) {
-            return this   // Already read
-        }
+    const properties =
+        {
+            font: 'normal 10px Arial',
+            textAlign: 'right',
+            fillStyle: 'black',
+            strokeStyle: 'black',
+        };
 
-        let data = await igvxhr.loadArrayBuffer(this.path, buildOptions(this.config, {range: {start: 0, size: 64000}}));
-        let binaryParser = new BinaryParser$1(new DataView(data));
-        this.magic = binaryParser.getInt();
-        this.version = binaryParser.getInt();
-        this.indexPos = binaryParser.getLong();
-        this.indexSize = binaryParser.getInt();
-        binaryParser.getInt();
+    // tick
+    IGVGraphics.strokeLine(ctx, xTickStart, shim * height, xTickEnd, shim * height, properties);
+    IGVGraphics.fillText(ctx, prettyPrint(flipAxis ? this.dataRange.min : this.dataRange.max), xTickStart + 4, shim * height + 12, properties);
 
+    const y = (1.0 - shim) * height;
 
-        if (this.version >= 2) {
-            let nWindowFunctions = binaryParser.getInt();
-            this.windowFunctions = [];
-            while (nWindowFunctions-- > 0) {
-                this.windowFunctions.push(binaryParser.getString());
-            }
-        }
+    // tick
+    IGVGraphics.strokeLine(ctx, xTickStart, y, xTickEnd, y, properties);
+    IGVGraphics.fillText(ctx, prettyPrint(flipAxis ? this.dataRange.max : this.dataRange.min), xTickStart + 4, y - 4, properties);
 
-        this.trackType = binaryParser.getString();
-        this.trackLine = binaryParser.getString();
+    // vertical axis
+    IGVGraphics.strokeLine(ctx, xTickEnd, shim * height, xTickEnd, y, properties);
 
-        let nTracks = binaryParser.getInt();
-        this.trackNames = [];
-        while (nTracks-- > 0) {
-            this.trackNames.push(binaryParser.getString());
-        }
-        this.genomeID = binaryParser.getString();
-        this.flags = binaryParser.getInt();
-        this.compressed = (this.flags & GZIP_FLAG) !== 0;
+    function prettyPrint(number) {
 
-        // Now read index
-        data = await igvxhr.loadArrayBuffer(this.path, buildOptions(this.config, {
-            range: {
-                start: this.indexPos,
-                size: this.indexSize
-            }
-        }));
-        binaryParser = new BinaryParser$1(new DataView(data));
-        this.datasetIndex = {};
-        let nEntries = binaryParser.getInt();
-        while (nEntries-- > 0) {
-            const name = binaryParser.getString();
-            const pos = binaryParser.getLong();
-            const size = binaryParser.getInt();
-            this.datasetIndex[name] = {position: pos, size: size};
+        if (number === 0) {
+            return "0"
+        } else if (Math.abs(number) >= 10) {
+            return number.toFixed()
+        } else if (Math.abs(number) >= 1) {
+            return number.toFixed(1)
+        } else if (Math.abs(number) >= 0.1) {
+            return number.toFixed(2)
+        } else {
+            return number.toExponential(1)
         }
+    }
+}
 
-        this.groupIndex = {};
-        nEntries = binaryParser.getInt();
-        while (nEntries-- > 0) {
-            const name = binaryParser.getString();
-            const pos = binaryParser.getLong();
-            const size = binaryParser.getInt();
-            this.groupIndex[name] = {position: pos, size: size};
-        }
+const DEFAULT_COLOR$2 = 'rgb(150, 150, 150)';
 
-        return this
+
+class WigTrack extends TrackBase {
+
+    static defaults = {
+        height: 50,
+        flipAxis: false,
+        logScale: false,
+        windowFunction: 'mean',
+        graphType: 'bar',
+        normalize: undefined,
+        scaleFactor: undefined,
+        overflowColor: `rgb(255, 32, 255)`,
+        baselineColor: 'lightGray',
+        summarize: true
     }
 
-    async readDataset(chr, windowFunction, zoom) {
+    constructor(config, browser) {
+        super(config, browser);
+    }
 
-        const key = chr + "_" + windowFunction + "_" + zoom;
+    init(config) {
 
-        if (this.datasetCache[key]) {
-            return this.datasetCache[key]
+        super.init(config);
+
+        this.type = "wig";
+        this.featureType = 'numeric';
+        this.resolutionAware = true;
+        this.paintAxis = paintAxis;
 
+        const format = config.format ? config.format.toLowerCase() : config.format;
+        if (config.featureSource) {
+            this.featureSource = config.featureSource;
+            delete config.featureSource;
+        } else if ("bigwig" === format) {
+            this.featureSource = new BWSource(config, this.browser.genome);
+        } else if ("tdf" === format) {
+            this.featureSource = new TDFSource(config, this.browser.genome);
         } else {
-            await this.readHeader();
-            const wf = (this.version < 2) ? "" : "/" + windowFunction;
-            const zoomString = (chr.toLowerCase() === "all" || zoom === undefined) ? "0" : zoom.toString();
+            this.featureSource = FeatureSource(config, this.browser.genome);
+        }
 
-            let dsName;
-            if (windowFunction === "raw") {
-                dsName = "/" + chr + "/raw";
-            } else {
-                dsName = "/" + chr + "/z" + zoomString + wf;
-            }
-            const indexEntry = this.datasetIndex[dsName];
 
-            if (indexEntry === undefined) {
-                return undefined
-            }
+        // Override autoscale default
+        if (config.max === undefined || config.autoscale === true) {
+            this.autoscale = true;
+        } else {
+            this.dataRange = {
+                min: config.min || 0,
+                max: config.max
+            };
+        }
+    }
 
-            const data = await igvxhr.loadArrayBuffer(this.path, buildOptions(this.config, {
-                range: {
-                    start: indexEntry.position,
-                    size: indexEntry.size
-                }
-            }));
+    async postInit() {
+        const header = await this.getHeader();
+        if (this.disposed) return   // This track was removed during async load
+        if (header) this.setTrackProperties(header);
+    }
 
-            if (!data) {
-                return undefined
-            }
+    async getFeatures(chr, start, end, bpPerPixel) {
 
-            const binaryParser = new BinaryParser$1(new DataView(data));
-            let nAttributes = binaryParser.getInt();
-            const attributes = {};
-            while (nAttributes-- > 0) {
-                attributes[binaryParser.getString()] = binaryParser.getString();
+        const windowFunction = this.windowFunction;
+
+        const features = await this.featureSource.getFeatures({
+            chr,
+            start,
+            end,
+            bpPerPixel,
+            visibilityWindow: this.visibilityWindow,
+            windowFunction
+        });
+        if (this.normalize && this.featureSource.normalizationFactor) {
+            const scaleFactor = this.featureSource.normalizationFactor;
+            for (let f of features) {
+                f.value *= scaleFactor;
             }
-            const dataType = binaryParser.getString();
-            const tileWidth = binaryParser.getFloat();
-            let nTiles = binaryParser.getInt();
-            const tiles = [];
-            while (nTiles-- > 0) {
-                tiles.push({position: binaryParser.getLong(), size: binaryParser.getInt()});
+        }
+        if (this.scaleFactor) {
+            const scaleFactor = this.scaleFactor;
+            for (let f of features) {
+                f.value *= scaleFactor;
             }
+        }
 
-            const dataset = {
-                name: dsName,
-                attributes: attributes,
-                dataType: dataType,
-                tileWidth: tileWidth,
-                tiles: tiles
-            };
+        // Summarize features to current resolution.  This needs to be done here, rather than in the "draw" function,
+        // for group autoscale to work.
+        if (this.summarize && ("mean" === windowFunction || "min" === windowFunction || "max" === windowFunction)) {
+            return summarizeData(features, start, bpPerPixel, windowFunction)
+        } else {
+            return features
+        }
+    }
 
-            this.datasetCache[key] = dataset;
-            return dataset
+    menuItemList() {
+        const items = [];
+
+        if (this.flipAxis !== undefined) {
+            items.push('<hr>');
+
+            function click() {
+                this.flipAxis = !this.flipAxis;
+                this.trackView.repaintViews();
+            }
+
+            items.push({label: 'Flip y-axis', click});
         }
+
+        if(this.featureSource.windowFunctions) {
+            items.push(...this.wigSummarizationItems());
+        }
+
+        items.push(...this.numericDataMenuItems());
+
+        return items
     }
 
-    async readRootGroup() {
+    wigSummarizationItems() {
 
-        const genome = this.genome;
-        const rootGroup = this.groupCache["/"];
-        if (rootGroup) {
-            return rootGroup
-        } else {
+        const windowFunctions = this.featureSource.windowFunctions;
 
-            const group = await this.readGroup("/");
-            const names = group["chromosomes"];
-            const maxZoomString = group["maxZoom"];
+        const menuItems = [];
+        menuItems.push('<hr/>');
+        menuItems.push("<div>Windowing function</div>");
+        for (const wf of windowFunctions) {
+            const object = $$1(createCheckbox(wf, this.windowFunction === wf));
 
-            // Now parse out interesting attributes.
-            if (maxZoomString) {
-                this.maxZoom = Number(maxZoomString);
+            function clickHandler() {
+                this.windowFunction = wf;
+                this.trackView.updateViews();
             }
 
-            const totalCountString = group["totalCount"];
-            if (totalCountString) {
-                group.totalCount = Number(totalCountString);
-            }
+            menuItems.push({object, click: clickHandler});
+        }
 
-            // Chromosome names
-            const chrAliasTable = {};
-            if (names) {
-                names.split(",").forEach(function (chr) {
-                    const canonicalName = genome.getChromosomeName(chr);
-                    chrAliasTable[canonicalName] = chr;
-                });
-            }
-            this.chrAliasTable = chrAliasTable;
+        return menuItems
+    }
 
-            this.groupCache["/"] = group;
-            return group
+
+    async getHeader() {
+
+        if (typeof this.featureSource.getHeader === "function") {
+            this.header = await this.featureSource.getHeader();
         }
+        return this.header
     }
 
-    async readGroup(name) {
+    // TODO: refactor to igvUtils.js
+    getScaleFactor(min, max, height, logScale) {
+        const minValue = (logScale === true) ? ((min < 0) ? -Math.log10(Math.abs(min) + 1) : Math.log10(Math.abs(min) + 1)) : min;
+        const maxValue = (logScale === true) ? Math.log10(Math.abs(max) + 1) : max;
+        const scale = height / (maxValue - minValue);
+        return scale
+    }
 
-        const group = this.groupCache[name];
-        if (group) {
-            return group
-        } else {
+    computeYPixelValue(yValue, yScaleFactor) {
+        return (this.flipAxis ? (yValue - this.dataRange.min) : (this.dataRange.max - yValue)) * yScaleFactor
+    }
 
-            await this.readHeader();
-            const indexEntry = this.groupIndex[name];
-            if (indexEntry === undefined) {
-                return undefined
-            }
+    computeYPixelValueInLogScale(yValue, yScaleFactor) {
+        let maxValue = this.dataRange.max;
+        let minValue =  this.dataRange.min;
+        minValue = (minValue < 0) ? -Math.log10(Math.abs(minValue) + 1) : Math.log10(Math.abs(minValue) + 1);
+        maxValue = (maxValue < 0) ? -Math.log10(Math.abs(maxValue) + 1) : Math.log10(Math.abs(maxValue) + 1);
+        
+        yValue = (yValue < 0) ? -Math.log10(Math.abs(yValue) +1) : Math.log10(yValue + 1);
+        return ((this.flipAxis ? (yValue - minValue) : (maxValue - yValue)) * yScaleFactor)
+    }
 
-            const data = await igvxhr.loadArrayBuffer(this.path, buildOptions(this.config, {
-                range: {
-                    start: indexEntry.position,
-                    size: indexEntry.size
+    draw(options) {
+
+        const features = options.features;
+        const ctx = options.context;
+        const bpPerPixel = options.bpPerPixel;
+        const bpStart = options.bpStart;
+        const pixelWidth = options.pixelWidth;
+        const pixelHeight = options.pixelHeight - 1;
+        const bpEnd = bpStart + pixelWidth * bpPerPixel + 1;
+        
+        const scaleFactor = this.getScaleFactor(this.dataRange.min, this.dataRange.max, pixelHeight, this.logScale);
+        const yScale = (yValue) => this.logScale
+            ? this.computeYPixelValueInLogScale(yValue, scaleFactor)
+            : this.computeYPixelValue(yValue, scaleFactor);
+
+        if (features && features.length > 0) {
+
+            if (this.dataRange.min === undefined) this.dataRange.min = 0;
+
+            // Max can be less than min if config.min is set but max left to autoscale.   If that's the case there is
+            // nothing to paint.
+            if (this.dataRange.max > this.dataRange.min) {
+
+                let lastPixelEnd = -1;
+                let lastY;
+                const y0 = yScale(0);
+
+                for (let f of features) {
+
+                    if (f.end < bpStart) continue
+                    if (f.start > bpEnd) break
+
+                    const x = (f.start - bpStart) / bpPerPixel;
+                    if (isNaN(x)) continue
+
+                    let y = yScale(f.value);
+
+                    const rectEnd = (f.end - bpStart) / bpPerPixel;
+                    const width = rectEnd - x;
+
+                    const color = options.alpha ? IGVColor.addAlpha(this.getColorForFeature(f), options.alpha) : this.getColorForFeature(f);
+
+                    if (this.graphType === "line") {
+                        if (lastY !== undefined) {
+                            IGVGraphics.strokeLine(ctx, lastPixelEnd, lastY, x, y, {
+                                "fillStyle": color,
+                                "strokeStyle": color
+                            });
+                        }
+                        IGVGraphics.strokeLine(ctx, x, y, x + width, y, {"fillStyle": color, "strokeStyle": color});
+                    } else if (this.graphType === "points") {
+                        const pointSize = this.config.pointSize || 3;
+                        const px = x + width / 2;
+                        IGVGraphics.fillCircle(ctx, px, y, pointSize / 2, {"fillStyle": color, "strokeStyle": color});
+
+                        if (f.value > this.dataRange.max) {
+                            IGVGraphics.fillCircle(ctx, px, pointSize / 2, pointSize / 2, 3, {fillStyle: this.overflowColor});
+                        } else if (f.value < this.dataRange.min) {
+                            IGVGraphics.fillCircle(ctx, px, pixelHeight - pointSize / 2, pointSize / 2, 3, {fillStyle: this.overflowColor});
+                        }
+
+                    } else {
+                        // Default graph type (bar)
+                        const height = Math.min(pixelHeight, y - y0);
+                        IGVGraphics.fillRect(ctx, x, y0, width, height, {fillStyle: color});
+                        if (f.value > this.dataRange.max) {
+                            IGVGraphics.fillRect(ctx, x, 0, width, 3, {fillStyle: this.overflowColor});
+                        } else if (f.value < this.dataRange.min) {
+                            IGVGraphics.fillRect(ctx, x, pixelHeight - 2, width, 3, {fillStyle: this.overflowColor});
+                        }
+
+                    }
+                    lastPixelEnd = x + width;
+                    lastY = y;
                 }
-            }));
 
-            if (!data) {
-                return undefined
+                // If the track includes negative values draw a baseline
+                if (this.dataRange.min < 0) {
+                    let maxValue = this.dataRange.max;
+                    let minValue =  this.dataRange.min;
+                    minValue = (this.logScale === true) ? ((minValue < 0) ? -Math.log10(Math.abs(minValue) + 1) : Math.log10(Math.abs(minValue) + 1)) : minValue;
+                    maxValue = (this.logScale === true) ? ((maxValue < 0) ? -Math.log10(Math.abs(maxValue) + 1) : Math.log10(Math.abs(maxValue) + 1)) : maxValue;
+                    const ratio = maxValue / (maxValue - minValue);
+                    const basepx = this.flipAxis ? (1 - ratio) * pixelHeight : ratio * pixelHeight;
+                    IGVGraphics.strokeLine(ctx, 0, basepx, options.pixelWidth, basepx, {strokeStyle: this.baselineColor});
+                }
             }
+        }
 
-            const binaryParser = new BinaryParser$1(new DataView(data));
-            const group = {name: name};
-            let nAttributes = binaryParser.getInt();
-            while (nAttributes-- > 0) {
-                const key = binaryParser.getString();
-                const value = binaryParser.getString();
-                group[key] = value;
+        // Draw guidelines
+        if (this.config.hasOwnProperty('guideLines')) {
+            for (let line of this.config.guideLines) {
+                if (line.hasOwnProperty('color') && line.hasOwnProperty('y') && line.hasOwnProperty('dotted')) {
+                    let y = yScale(line.y);
+                    let props = {
+                        'strokeStyle': line['color'],
+                        'strokeWidth': 2
+                    };
+                    if (line['dotted']) IGVGraphics.dashedLine(options.context, 0, y, options.pixelWidth, y, 5, props);
+                    else IGVGraphics.strokeLine(options.context, 0, y, options.pixelWidth, y, props);
+                }
             }
-            this.groupCache[name] = group;
-            return group
         }
     }
 
-    async readTiles(tileIndeces, nTracks) {
+    popupData(clickState, features) {
 
-        tileIndeces.sort(function (a, b) {
-            return a.position - b.position
-        });
+        if (features === undefined) features = this.clickedFeatures(clickState);
 
-        tileIndeces = tileIndeces.filter(function (idx) {
-            return idx.size > 0
-        });
+        if (features && features.length > 0) {
 
-        if (tileIndeces.length === 0) {
-            return []
-        }
+            const genomicLocation = clickState.genomicLocation;
+            const popupData = [];
 
-        tileIndeces = consolidateTiles(tileIndeces);
+            // Sort features based on distance from click
+            features.sort(function (a, b) {
+                const distA = Math.abs((a.start + a.end) / 2 - genomicLocation);
+                const distB = Math.abs((b.start + b.end) / 2 - genomicLocation);
+                return distA - distB
+            });
 
-        const tiles = [];
+            // Display closest 10
+            const displayFeatures = features.length > 10 ? features.slice(0, 10) : features;
 
-        for (let indexEntry of tileIndeces) {
+            // Resort in ascending order
+            displayFeatures.sort(function (a, b) {
+                return a.start - b.start
+            });
 
-            const data = await igvxhr.loadArrayBuffer(this.path, buildOptions(this.config, {
-                range: {
-                    start: indexEntry.position,
-                    size: indexEntry.size
+            for (let selectedFeature of displayFeatures) {
+                if (selectedFeature) {
+                    if (popupData.length > 0) {
+                        popupData.push('<hr/>');
+                    }
+                    let posString = (selectedFeature.end - selectedFeature.start) === 1 ?
+                        numberFormatter$1(Math.floor(selectedFeature.start) + 1)
+                        : numberFormatter$1(Math.floor(selectedFeature.start) + 1) + "-" + numberFormatter$1(Math.floor(selectedFeature.end));
+                    popupData.push({name: "Position:", value: posString});
+                    popupData.push({
+                        name: "Value:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;",
+                        value: numberFormatter$1(selectedFeature.value.toFixed(4))
+                    });
                 }
-            }));
-
-            const tileData = this.compressed ? inflate_1$3(data).buffer : data;
-
-            const binaryParser = new BinaryParser$1(new DataView(tileData));
-            const type = binaryParser.getString();
-            let tile;
-            switch (type) {
-                case "fixedStep":
-                    tile = createFixedStep(binaryParser, nTracks);
-                    break
-                case "variableStep":
-                    tile = createVariableStep(binaryParser, nTracks);
-                    break
-                case "bed":
-                case "bedWithName":
-                    tile = createBed(binaryParser, nTracks, type);
-                    break
-                default:
-                    throw "Unknown tile type: " + type
             }
-            tiles.push(tile);
+            if (displayFeatures.length < features.length) {
+                popupData.push("<hr/>...");
+            }
 
+            return popupData
+
+        } else {
+            return []
         }
-        return tiles
     }
 
-    async readTile(indexEntry, nTracks) {
+    get supportsWholeGenome() {
+        return !this.config.indexURL && this.config.supportsWholeGenome !== false
+    }
 
-        let data = await igvxhr.loadArrayBuffer(this.path, buildOptions(this.config, {
-            range: {
-                start: indexEntry.position,
-                size: indexEntry.size
-            }
-        }));
+    /**
+     * Return color for feature.
+     * @param feature
+     * @returns {string}
+     */
 
-        if (this.compressed) {
-            const plain = inflate_1$3(data);
-            data = plain.buffer;
-        }
+    getColorForFeature(f) {
+        let c = (f.value < 0 && this.altColor) ? this.altColor : this.color || DEFAULT_COLOR$2;
+        return (typeof c === "function") ? c(f.value) : c
+    }
 
-        const binaryParser = new BinaryParser$1(new DataView(data));
-        const type = binaryParser.getString();
-        switch (type) {
-            case "fixedStep":
-                return createFixedStep(binaryParser, nTracks)
-            case "variableStep":
-                return createVariableStep(binaryParser, nTracks)
-            case "bed":
-            case "bedWithName":
-                return createBed(binaryParser, nTracks, type)
+    /**
+     * Called when the track is removed.  Do any needed cleanup here
+     */
+    dispose() {
+        this.trackView = undefined;
+    }
+
+}
+
+/**
+ * Summarize wig data in bins of size "bpPerPixel" with the given window function.
+ *
+ * @param features  wig (numeric) data -- features cannot overlap, and are in ascending order by start position
+ * @param startBP  bp start position for computing binned data
+ * @param bpPerPixel  bp per pixel (bin)
+ * @param windowFunction mean, min, or max
+ * @returns {*|*[]}
+ */
+function summarizeData(features, startBP, bpPerPixel, windowFunction = "mean") {
+
+    if (bpPerPixel <= 1 || !features || features.length === 0) {
+        return features
+    }
+
+    // Assume features are sorted by position.  Wig features cannot overlap.  Note, UCSC "reductionLevel" == bpPerPixel
+    const chr = features[0].chr;
+    const binSize = bpPerPixel;
+    const summaryFeatures = [];
+
+    const finishBin = (bin) => {
+        const start = startBP + bin.bin * binSize;
+        const end = start + binSize;
+        let value;
+        switch (windowFunction) {
+            case "mean":
+                value = bin.sumData / bin.count;
+                break
+            case "max":
+                value = bin.max;
+                break
+            case "min":
+                value = bin.min;
+                break
             default:
-                throw "Unknown tile type: " + type
+                throw Error(`Unknown window function: ${windowFunction}`)
+        }
+        const description = `${windowFunction} of ${bin.count} values`;
+        summaryFeatures.push({chr, start, end, value, description});
+    };
+
+    let currentBinData;
+    for (let f of features) {
+
+        // Loop through bins this feature overlaps, updating the weighted sum for each bin or min/max,
+        // depending on window function
+        let startBin = Math.floor((f.start - startBP) / binSize);
+        const endBin = Math.floor((f.end - startBP) / binSize);
+
+        if (currentBinData && startBin === currentBinData.bin) {
+            currentBinData.add(f);
+            startBin++;
         }
-    }
 
-}
+        if (!currentBinData || endBin > currentBinData.bin) {
 
-function createFixedStep(binaryParser, nTracks) {
-    const nPositions = binaryParser.getInt();
-    const start = binaryParser.getInt();
-    const span = binaryParser.getFloat();
+            if(currentBinData) {
+                finishBin(currentBinData);
+            }
 
-    const data = [];
-    let nt = nTracks;
-    while (nt-- > 0) {
-        let np = nPositions;
-        const dtrack = [];
-        while (np-- > 0) {
-            dtrack.push(binaryParser.getFloat());
+            // Feature stretches across multiple bins.
+            if (endBin > startBin) {
+                const end = startBP + endBin * binSize;
+                summaryFeatures.push({chr, start: f.start, end, value: f.value});
+            }
+
+            currentBinData = new SummaryBinData(endBin, f);
         }
-        data.push(dtrack);
+
+    }
+    if(currentBinData) {
+        finishBin(currentBinData);
     }
 
-    return {
-        type: "fixedStep",
-        start: start,
-        span: span,
-        data: data,
-        nTracks: nTracks,
-        nPositions: nPositions
+    // Consolidate
+    const c = [];
+    let lastFeature = summaryFeatures[0];
+    for (let f of summaryFeatures) {
+        if (lastFeature.value === f.value && f.start <= lastFeature.end) {
+            lastFeature.end = f.end;
+        } else {
+            c.push(lastFeature);
+            lastFeature = f;
+        }
     }
-}
+    c.push(lastFeature);
 
-function createVariableStep(binaryParser, nTracks) {
+    return c
 
-    const tileStart = binaryParser.getInt();
-    const span = binaryParser.getFloat();
-    const nPositions = binaryParser.getInt();
-    const start = [];
+}
 
-    let np = nPositions;
-    while (np-- > 0) {
-        start.push(binaryParser.getInt());
+class SummaryBinData {
+    constructor(bin, feature) {
+        this.bin = bin;
+        this.sumData = feature.value;
+        this.count = 1;
+        this.min = feature.value;
+        this.max = feature.value;
     }
-    binaryParser.getInt();  // # of samples, ignored but should === nTracks
 
-    const data = [];
-    let nt = nTracks;
-    while (nt-- > 0) {
-        np = nPositions;
-        const dtrack = [];
-        while (np-- > 0) {
-            dtrack.push(binaryParser.getFloat());
-        }
-        data.push(dtrack);
+    add(feature) {
+        this.sumData += feature.value;
+        this.max = Math.max(feature.value, this.max);
+        this.min = Math.min(feature.value, this.min);
+        this.count++;
     }
 
-    return {
-        type: "variableStep",
-        tileStart: tileStart,
-        span: span,
-        start: start,
-        data: data,
-        nTracks: nTracks,
-        nPositions: nPositions
+    get mean() {
+        return this.sumData / this.count
     }
 }
 
-function createBed(binaryParser, nTracks, type) {
+const DEFAULT_MAX_WG_COUNT = 10000;
 
-    const nPositions = binaryParser.getInt();
+/**
+ * feature source for "bed like" files (tab or whitespace delimited files with 1 feature per line: bed, gff, vcf, etc)
+ *
+ * @param config
+ * @constructor
+ */
+class TextFeatureSource extends BaseFeatureSource {
 
-    let n = nPositions;
-    const start = [];
-    while (n-- > 0) {
-        start.push(binaryParser.getInt());
-    }
+    constructor(config, genome) {
 
-    n = nPositions;
-    const end = [];
-    while (n-- > 0) {
-        end.push(binaryParser.getInt());
-    }
+        super(genome);
 
-    binaryParser.getInt();  // # of samples, ignored but should === nTracks
-    const data = [];
-    let nt = nTracks;
-    while (nt-- > 0) {
-        let np = nPositions;
-        const dtrack = [];
-        while (np-- > 0) {
-            dtrack.push(binaryParser.getFloat());
-        }
-        data.push(dtrack);
-    }
+        this.config = config || {};
+        this.genome = genome;
+        this.sourceType = (config.sourceType === undefined ? "file" : config.sourceType);
+        this.maxWGCount = config.maxWGCount || DEFAULT_MAX_WG_COUNT;
+        this.windowFunctions = ["mean", "min", "max", "none"];
 
-    if (type === "bedWithName") {
-        n = nPositions;
-        const name = [];
-        while (n-- > 0) {
-            name.push(binaryParser.getString());
+        const queryableFormats = new Set(["bigwig", "bw", "bigbed", "bb", "biginteract", "biggenepred", "bignarrowpeak", "tdf"]);
+
+        this.queryable = config.indexURL || config.queryable === true;   // False by default, unless explicitly set
+        if (config.reader) {
+            // Explicit reader implementation
+            this.reader = config.reader;
+            this.queryable = config.queryable !== false;
+        } else if (config.sourceType === "ga4gh") {
+            throw Error("Unsupported source type 'ga4gh'")
+        } else if ((config.type === "eqtl" || config.type === "qtl") && config.sourceType === "gtex-ws") {
+            this.reader = new GtexReader(config);
+            this.queryable = true;
+        } else if ("htsget" === config.sourceType) {
+            this.reader = new HtsgetVariantReader(config, genome);
+            this.queryable = true;
+        } else if (config.sourceType === 'ucscservice') {
+            this.reader = new UCSCServiceReader(config.source);
+            this.queryable = true;
+        } else if (config.sourceType === 'custom') {
+            this.reader = new CustomServiceReader(config.source);
+            this.queryable = false !== config.source.queryable;
+        } else if ('service' === config.sourceType) {
+            this.reader = new FeatureFileReader(config, genome);
+            this.queryable = true;
+        } else {
+            // File of some type (i.e. not a webservice)
+            this.reader = new FeatureFileReader(config, genome);
+            if (config.queryable !== undefined) {
+                this.queryable = config.queryable;
+            } else if (queryableFormats.has(config.format) || this.reader.indexed) {
+                this.queryable = true;
+            } else ;
         }
-    }
 
-    return {
-        type: type,
-        start: start,
-        end: end,
-        data: data,
-        nTracks: nTracks,
-        nPositions: nPositions
-    }
-}
+        // Flag indicating if features loaded by this source can be searched for by name or attribute, true by default
+        this.searchable = config.searchable !== false;
 
-function consolidateTiles(tiles) {
+    }
 
-    const consolidated = [];
-    let current = tiles[0];
-    for (let i = 1; i < tiles.length; i++) {
-        const t = tiles[i];
-        if (t.position > current.position + current.size) {
-            consolidated.push(current);
-            current = t;
-        } else {
-            current.size = t.position + t.size - current.position;
+    async defaultVisibilityWindow() {
+        if (this.reader && typeof this.reader.defaultVisibilityWindow === 'function') {
+            return this.reader.defaultVisibilityWindow()
         }
     }
-    consolidated.push(current);
-    return consolidated
-}
-
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2016 University of California San Diego
- * Author: Jim Robinson
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-
-class TDFSource extends BaseFeatureSource {
 
-    searchable = false
-    constructor(config, genome) {
-        super(genome);
-        this.genome = genome;
-        this.reader = new TDFReader(config, genome);
-        this.queryable = true;
+    async trackType() {
+        const header = await this.getHeader();
+        if (header) {
+            return header.type
+        } else {
+            return undefined    // Convention for unknown or unspecified
+        }
     }
 
-    async getFeatures({chr, start, end, bpPerPixel, windowFunction = "mean"}) {
+    async getHeader() {
+        if (!this.header) {
 
-        if (chr.toLowerCase() === "all") {
-            const wgFeatures = [];
-            const genome = this.genome;
-            const chrNames = this.genome.wgChromosomeNames;
-            if (chrNames) {
-                for (let c of genome.wgChromosomeNames) {
-                    const len = genome.getChromosome(c).bpLength;
-                    bpPerPixel = len / 1000;
-                    const chrFeatures = await this._getFeatures(c, 0, len, bpPerPixel, windowFunction);
-                    if (chrFeatures) {
-                        for (let f of chrFeatures) {
-                            const wg = Object.assign({}, f);
-                            wg.chr = "all";
-                            wg.start = genome.getGenomeCoordinate(f.chr, f.start);
-                            wg.end = genome.getGenomeCoordinate(f.chr, f.end);
-                            wg._f = f;
-                            wgFeatures.push(wg);
-                        }
+            if (this.reader && typeof this.reader.readHeader === "function") {
+                const header = await this.reader.readHeader();
+                if (header) {
+                    this.header = header;
+                    if (header.format) {
+                        this.config.format = header.format;
                     }
+                } else {
+                    this.header = {};
                 }
+            } else {
+                this.header = {};
             }
-            return wgFeatures
-
-        } else {
-            return this._getFeatures(chr, start, end, bpPerPixel, windowFunction)
         }
+        return this.header
     }
-    async _getFeatures(chr, start, end, bpPerPixel, windowFunction) {
-        const genomicInterval = new GenomicInterval(chr, start, end);
-        const genome = this.genome;
 
+    /**
+     * Required function for all data source objects.  Fetches features for the
+     * range requested.
+     *
+     * This function is quite complex due to the variety of reader types backing it, some indexed, some queryable,
+     * some not.
+     *
+     * @param chr
+     * @param start
+     * @param end
+     * @param bpPerPixel
+     */
+    async getFeatures({chr, start, end, bpPerPixel, visibilityWindow, windowFunction}) {
 
-        if (!this.rootGroup) {
-            this.rootGroup = await this.reader.readRootGroup();
-            if (!this.normalizationFactor) {
-                const totalCount = this.rootGroup.totalCount;
-                if (totalCount) {
-                    this.normalizationFactor = 1.0e6 / totalCount;
-                }
-            }
-        }
+        const isWholeGenome = ("all" === chr.toLowerCase());
 
-        genomicInterval.bpPerPixel = bpPerPixel;
-        const zoom = zoomLevelForScale(chr, bpPerPixel, genome);
-        let queryChr = this.reader.chrAliasTable[chr];
-        let maxZoom = this.reader.maxZoom;
-        if (queryChr === undefined) queryChr = chr;
-        if (maxZoom === undefined) maxZoom = -1;
+        start = start || 0;
+        end = end || Number.MAX_SAFE_INTEGER;
 
-        const wf = zoom > maxZoom ? "raw" : windowFunction;
-        const dataset = await this.reader.readDataset(queryChr, wf, zoom);
-        if (dataset == null) {
-            return []
+        // Various conditions that can require a feature load
+        //   * view is "whole genome" but no features are loaded
+        //   * cache is disabled
+        //   * cache does not contain requested range
+        // const containsRange = this.featureCache.containsRange(new GenomicInterval(queryChr, start, end))
+        if ((isWholeGenome && !this.wgFeatures && this.supportsWholeGenome()) ||
+            this.config.disableCache ||
+            !this.featureCache ||
+            !this.featureCache.containsRange(new GenomicInterval(chr, start, end))) {
+            await this.loadFeatures(chr, start, end, visibilityWindow);
         }
 
-        const tileWidth = dataset.tileWidth;
-        const startTile = Math.floor(start / tileWidth);
-        const endTile = Math.floor(end / tileWidth);
-        const NTRACKS = 1;   // TODO read this
-        const tiles = await this.reader.readTiles(dataset.tiles.slice(startTile, endTile + 1), NTRACKS);
-        const features = [];
-        for (let tile of tiles) {
-            switch (tile.type) {
-                case "bed":
-                    decodeBedTile(tile, chr, start, end, bpPerPixel, features);
-                    break
-                case "variableStep":
-                    decodeVaryTile(tile, chr, start, end, bpPerPixel, features);
-                    break
-                case "fixedStep":
-                    decodeFixedTile(tile, chr, start, end, bpPerPixel, features);
-                    break
-                default:
-                    throw ("Unknown tile type: " + tile.type)
+        if (isWholeGenome) {
+            if (!this.wgFeatures) {
+                if (this.supportsWholeGenome()) {
+                    if("wig" === this.config.type) {
+                        const allWgFeatures = await computeWGFeatures(this.featureCache.getAllFeatures(), this.genome, 1000000);
+                        this.wgFeatures = summarizeData(allWgFeatures, 0, bpPerPixel, windowFunction);
+                    } else {
+                        this.wgFeatures = await computeWGFeatures(this.featureCache.getAllFeatures(), this.genome, this.maxWGCount);
+                    }
+                } else {
+                    this.wgFeatures = [];
+                }
             }
+            return this.wgFeatures
+        } else {
+            return this.featureCache.queryFeatures(chr, start, end)
         }
-        features.sort(function (a, b) {
-            return a.start - b.start
-        });
-
-        return features
     }
 
-    get supportsWholeGenome() {
-        return true
+    async findFeatures(fn) {
+        return this.featureCache ? this.featureCache.findFeatures(fn) : []
     }
 
-    get windowFunctions() {
-        return this.reader.windowFunctions
+    supportsWholeGenome() {
+        return !this.queryable   // queryable (indexed, web services) sources don't support whole genome view
     }
-}
 
-function decodeBedTile(tile, chr, bpStart, bpEnd, bpPerPixel, features) {
-
-    const nPositions = tile.nPositions;
-    const starts = tile.start;
-    const ends = tile.end;
-    const data = tile.data[0];   // Single track for now
-    for (let i = 0; i < nPositions; i++) {
-        const s = starts[i];
-        const e = ends[i];
-        if (e < bpStart) continue
-        if (s > bpEnd) break
-        features.push({
-            chr: chr,
-            start: s,
-            end: e,
-            value: data[i]
-        });
+    // TODO -- experimental, will only work for non-indexed sources
+    getAllFeatures() {
+        if (this.queryable || !this.featureCache) {   // queryable sources don't support all features
+            return []
+        } else {
+            return this.featureCache.getAllFeatures()
+        }
     }
-}
 
-function decodeVaryTile(tile, chr, bpStart, bpEnd, bpPerPixel, features) {
 
-    const nPositions = tile.nPositions;
-    const starts = tile.start;
-    const span = tile.span;
-    const data = tile.data[0];   // Single track for now
-    for (let i = 0; i < nPositions; i++) {
-        const s = starts[i];
-        const e = s + span;
-        if (e < bpStart) continue
-        if (s > bpEnd) break
-        features.push({
-            chr: chr,
-            start: s,
-            end: e,
-            value: data[i]
-        });
-    }
-}
+    async loadFeatures(chr, start, end, visibilityWindow) {
 
-function decodeFixedTile(tile, chr, bpStart, bpEnd, bpPerPixel, features) {
+        await this.getHeader();
 
-    const nPositions = tile.nPositions;
-    let s = tile.start;
-    const span = tile.span;
-    const data = tile.data[0];   // Single track for now
+        const reader = this.reader;
+        let intervalStart = start;
+        let intervalEnd = end;
 
-    for (let i = 0; i < nPositions; i++) {
-        const e = s + span;
-        if (s > bpEnd) break
-        if (e >= bpStart) {
-            if (!Number.isNaN(data[i])) {
-                features.push({
-                    chr: chr,
-                    start: s,
-                    end: e,
-                    value: data[i]
-                });
+        // chr aliasing
+        let queryChr = chr;
+        if (!this.chrAliasManager && this.reader && this.reader.sequenceNames) {
+            this.chrAliasManager = new ChromAliasManager(this.reader.sequenceNames, this.genome);
+        }
+        if (this.chrAliasManager) {
+            queryChr = await this.chrAliasManager.getAliasName(chr);
+        }
+
+        // Use visibility window to potentially expand query interval.
+        // This can save re-queries as we zoom out.  Visibility window <= 0 is a special case
+        // indicating whole chromosome should be read at once.
+        if ((!visibilityWindow || visibilityWindow <= 0) && this.config.expandQuery !== false) {
+            // Whole chromosome
+            const chromosome = this.genome ? this.genome.getChromosome(queryChr) : undefined;
+            intervalStart = 0;
+            intervalEnd = Math.max(chromosome ? chromosome.bpLength : Number.MAX_SAFE_INTEGER, end);
+        } else if (visibilityWindow > (end - start) && this.config.expandQuery !== false) {
+            let expansionWindow = Math.min(4.1 * (end - start), visibilityWindow);
+            if(this.config.minQuerySize && expansionWindow < this.config.minQuerySize) {
+                expansionWindow = this.config.minQuerySize;
             }
+            intervalStart = Math.max(0, (start + end - expansionWindow) / 2);
+            intervalEnd = intervalStart + expansionWindow;
         }
-        s = e;
-    }
-}
 
+        let features = await reader.readFeatures(queryChr, intervalStart, intervalEnd);
+        if (this.queryable === undefined) {
+            this.queryable = reader.indexed;
+        }
 
-var log2 = Math.log(2);
+        const genomicInterval = this.queryable ?
+            new GenomicInterval(chr, intervalStart, intervalEnd) :
+            undefined;
 
-function zoomLevelForScale(chr, bpPerPixel, genome) {
+        if (features) {
 
-    // Convert bpPerPixel to IGV "zoom" level.   This is a bit convoluted,  TDF is computed zoom levels assuming
-    // display in a 700 pixel window.  The fully zoomed out view of a chromosome is zoom level "0".
-    // Zoom level 1 is magnified 2X,  and so forth
+            // Assign overlapping features to rows
+            if (this.config.format !== "wig" && this.config.type !== "junctions") {
+                const maxRows = this.config.maxRows || Number.MAX_SAFE_INTEGER;
+                packFeatures(features, maxRows);
+            }
 
-    var chrSize = genome.getChromosome(chr).bpLength;
+            // Note - replacing previous cache with new one.  genomicInterval is optional (might be undefined => includes all features)
+            this.featureCache = new FeatureCache$1(features, this.genome, genomicInterval);
 
-    return Math.ceil(Math.log(Math.max(0, (chrSize / (bpPerPixel * 700)))) / log2)
+            // If track is marked "searchable"< cache features by name -- use this with caution, memory intensive
+            if (this.searchable) {
+                this.addFeaturesToDB(features, this.config);
+            }
+        } else {
+            this.featureCache = new FeatureCache$1([], genomicInterval);     // Empty cache
+        }
+    }
+
+    addFeaturesToDB(featureList, config) {
+        if (!this.featureMap) {
+            this.featureMap = new Map();
+        }
+        const searchableFields = config.searchableFields || ["name", "transcript_id", "gene_id", "gene_name", "id"];
+        for (let feature of featureList) {
+            for (let field of searchableFields) {
+                let key;
+                if (typeof feature.getAttributeValue === 'function') {
+                    key = feature.getAttributeValue(field);
+                }
+                if (key) {
+                    key = key.replaceAll(' ', '+').toUpperCase();
+                    // If feature is already present keep largest one
+                    if (this.featureMap.has(key)) {
+                        const f2 = this.featureMap.get(key);
+                        if (feature.end - feature.start < f2.end - f2.start) {
+                            continue
+                        }
+                    }
+                    this.featureMap.set(key, feature);
+                }
+            }
+        }
+    }
+
+    search(term) {
+        if (this.featureMap) {
+            return this.featureMap.get(term.toUpperCase())
+        }
+
+    }
 }
 
 /*
@@ -34230,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 {
@@ -34416,7 +34949,7 @@ class FeatureTrack extends TrackBase {
         }
 
 
-        if (!this.config.isMergedTrack) {
+        if (!this.isMergedTrack) {
             IGVGraphics.fillRect(context, 0, options.pixelTop, pixelWidth, pixelHeight, {'fillStyle': "rgb(255, 255, 255)"});
         }
 
@@ -34727,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) {
@@ -37854,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 = {
 
@@ -37866,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
@@ -37945,7 +38465,7 @@ const GenomeUtils = {
                     }
                 }
 
-                if(!reference) {
+                if (!reference) {
                     alert.present(new Error(`Unknown genome id: ${genomeID}`), undefined);
                 }
             }
@@ -41343,301 +41863,242 @@ const hideAllMenuPopups = parent => {
  * THE SOFTWARE.
  */
 
-class NavbarButton {
-
-    constructor(browser, parent, title, buttonLabel, imageSVG, imageHoverSVG, initialButtonState) {
-
-        this.browser = browser;
-
-        this.button = div({class: 'igv-navbar-text-button'});
-        parent.appendChild(this.button);
-
-        if (Array.isArray(title)) {
-            this.textContent = title[ 0 ];
-            this.title = title[ 1 ];
-        } else {
-            this.textContent = this.title = title;
-        }
-
-        this.buttonLabel = buttonLabel;
-
-        this.imageDictionary =
-            {
-                image: `url("data:image/svg+xml,${ encodeURIComponent(imageSVG) }")`,
-                imageHover: `url("data:image/svg+xml,${ encodeURIComponent(imageHoverSVG) }")`,
-            };
-
-        this.responsiveKey = 'text';
-
-        this.configureButton(this.textContent, this.title);
-
-        this.setState(initialButtonState);
-
-        browser.on('navbar-resize', navbarButtonCSSClass => {
-            this.navbarResizeHandler(navbarButtonCSSClass);
-        });
-
-    }
-
-    navbarResizeHandler(navbarButtonCSSClass) {
-        const key = 'igv-navbar-icon-button' === navbarButtonCSSClass ? 'image' : 'text';
-        if (key !== this.responsiveKey) {
-            this.responsiveKey = key;
-            this.configureButton(this.textContent, this.title);
-            this.setState(undefined);
-        }
-    }
-
-    configureButton(textContent, title) {
-
-        this.groupElement = undefined;
-        this.button.title = title;
-        this.button.innerHTML = '';
-        this.button.style.backgroundImage = 'none';
-        this.button.classList.remove('igv-navbar-icon-button');
-        this.button.classList.remove('igv-navbar-text-button');
-
-        'text' === this.responsiveKey ? this.configureTextButton(textContent) : this.configureIconButton();
-
-    }
-
-    configureTextButton(textContent) {
-
-        this.button.classList.add('igv-navbar-text-button');
-
-        const tempDiv = document.createElement('div');
-        tempDiv.innerHTML = this.buttonLabel;
-        const svgRoot = tempDiv.firstChild;
-        this.button.appendChild(svgRoot);
-
-        this.groupElement = svgRoot.querySelector('#igv-navbar-button-group');
-
-        const tspanElement = svgRoot.querySelector('#igv-navbar-button-label');
-        tspanElement.textContent = textContent;
-    }
-
-    configureIconButton() {
-        this.button.classList.add('igv-navbar-icon-button');
-    }
-
-    setState(doHover) {
-
-        if (undefined !== doHover) {
-            this.doHover = doHover;
-        }
-
-        'text' === this.responsiveKey ? this.setTextButtonState(this.doHover) : this.setIconButtonState(this.doHover);
-
-    }
-
-    setTextButtonState(doHover) {
-        this.groupElement.classList.remove(...this.groupElement.classList);
-        const className = true === doHover ? 'igv-navbar-text-button-svg-hover' : 'igv-navbar-text-button-svg-inactive';
-        this.groupElement.classList.add(className);
-    }
-
-    setIconButtonState(doHover) {
-        this.button.style.backgroundImage = true === doHover ? this.imageDictionary.imageHover : this.imageDictionary.image;
-    }
-
-    show() {
-        // this.button.style.display = 'block'
-        this.button.style.display = 'flex';
-    }
-
-    hide() {
-        this.button.style.display = 'none';
-    }
-
-    setVisibility(isVisible) {
-        if (true === isVisible) {
-            this.show();
-        } else {
-            this.hide();
-        }
-    }
-
-    static currentNavbarButtonClass(browser) {
-        const el = browser.$navigation.get(0).querySelector('.igv-navbar-text-button');
-        return el ? 'igv-navbar-text-button' : 'igv-navbar-icon-button'
-    }
-}
-
-const overlayTrackImage =
-    `<svg width="625px" height="625px" viewBox="0 0 625 625" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Overlay Tracks</title>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Overlay-Tracks">
-            <rect id="backdrop" stroke="#737373" stroke-width="12" fill="#FFFFFF" x="6" y="6" width="613" height="613" rx="135"></rect>
-            <g id="layer-group" transform="translate(3, 127)">
-                <rect id="a" stroke="#737373" stroke-width="24" fill="#A1A1A1" x="12" y="12" width="332" height="139"></rect>
-                <rect id="a---hold-out" fill="#A1A1A1" x="9" y="25" width="324" height="115"></rect>
-                <rect id="b" stroke="#737373" stroke-width="24" fill="#C9C9C9" x="81" y="103" width="474" height="139"></rect>
-                <rect id="c" stroke="#737373" stroke-width="24" fill="#ECECEC" x="238" y="214" width="372" height="139"></rect>
-                <rect id="c---hold-out" fill="#ECECEC" x="250" y="226" width="372" height="115"></rect>
-            </g>
-            <rect id="over-border" stroke="#737373" stroke-width="12" x="6" y="6" width="613" height="613" rx="135"></rect>
-        </g>
-    </g>
-</svg>`;
-
-const overlayTrackImageHover =
-    `<svg width="625px" height="625px" viewBox="0 0 625 625" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Overlay Tracks Hover</title>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Overlay-Tracks-Hover">
-            <rect id="backdrop-copy" stroke="#737373" stroke-width="12" fill="#737373" x="6" y="6" width="613" height="613" rx="135"></rect>
-            <g id="layer-group" transform="translate(3, 127)">
-                <rect id="a" stroke="#FFFFFF" stroke-width="24" fill="#A1A1A1" x="12" y="12" width="332" height="139"></rect>
-                <rect id="a---hold-out" fill="#A1A1A1" x="9" y="25" width="324" height="115"></rect>
-                <rect id="b" stroke="#FFFFFF" stroke-width="24" fill="#C9C9C9" x="81" y="103" width="474" height="139"></rect>
-                <rect id="c" stroke="#FFFFFF" stroke-width="24" fill="#ECECEC" x="238" y="214" width="372" height="139"></rect>
-                <rect id="c---hold-out" fill="#ECECEC" x="250" y="226" width="372" height="115"></rect>
-            </g>
-            <rect id="over-border-copy" stroke="#737373" stroke-width="12" x="6" y="6" width="613" height="613" rx="135"></rect>
-        </g>
-    </g>
-</svg>`;
-
-const buttonLabel =
-    `<svg width="80px" height="18px" viewBox="0 0 80 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="igv-navbar-button-group">
-            <rect id="Rectangle" x="0.5" y="0.5" width="79" height="17" rx="6"></rect>
-            <text id="igv-text-button-label" x="50%" y="50%" dy=".1em" font-family="Helvetica" font-size="12" font-weight="normal" letter-spacing="-0.372">
-                <tspan id="igv-navbar-button-label"></tspan>
-            </text>
-        </g>
-    </g>
-</svg>`;
-
-const sampleNameButtonLabel =
-    `<svg width="90px" height="20px" viewBox="0 0 90 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="igv-navbar-button-group">
-            <rect id="Rectangle" x="0.5" y="0.5" width="89" height="18" rx="6"></rect>
-            <text id="igv-text-button-label" x="50%" y="50%" dy=".1em" font-family="Helvetica" font-size="12" font-weight="normal" letter-spacing="-0.372">
-                <tspan id="igv-navbar-button-label"></tspan>
-            </text>
-        </g>
-    </g>
-</svg>`;
-
-const shim = .01;
-const colorStripWidth = 4;
-const axesXOffset = colorStripWidth + 1;
-function paintAxis(ctx, width, height, colorOrUndefined) {
-
-    if (undefined === this.dataRange || undefined === this.dataRange.max || undefined === this.dataRange.min) {
-        return
-    }
-
-    IGVGraphics.fillRect(ctx, 0, 0, width, height, { fillStyle: 'white' });
-    if (colorOrUndefined) {
-        IGVGraphics.fillRect(ctx, width - colorStripWidth - 2, 0, colorStripWidth, height, { fillStyle: colorOrUndefined });
-    }
-
-    const flipAxis = (undefined === this.flipAxis) ? false : this.flipAxis;
-
-    const xTickStart = 0.95 * width - 8 - axesXOffset;
-    const xTickEnd   = 0.95 * width - axesXOffset;
-
-    const properties =
-        {
-            font: 'normal 10px Arial',
-            textAlign: 'right',
-            fillStyle: 'black',
-            strokeStyle: 'black',
-        };
-
-    // tick
-    IGVGraphics.strokeLine(ctx, xTickStart, shim * height, xTickEnd, shim * height, properties);
-    IGVGraphics.fillText(ctx, prettyPrint(flipAxis ? this.dataRange.min : this.dataRange.max), xTickStart + 4, shim * height + 12, properties);
-
-    const y = (1.0 - shim) * height;
-
-    // tick
-    IGVGraphics.strokeLine(ctx, xTickStart, y, xTickEnd, y, properties);
-    IGVGraphics.fillText(ctx, prettyPrint(flipAxis ? this.dataRange.max : this.dataRange.min), xTickStart + 4, y - 4, properties);
-
-    // vertical axis
-    IGVGraphics.strokeLine(ctx, xTickEnd, shim * height, xTickEnd, y, properties);
-
-    function prettyPrint(number) {
-
-        if (number === 0) {
-            return "0"
-        } else if (Math.abs(number) >= 10) {
-            return number.toFixed()
-        } else if (Math.abs(number) >= 1) {
-            return number.toFixed(1)
-        } else if (Math.abs(number) >= 0.1) {
-            return number.toFixed(2)
-        } else {
-            return number.toExponential(1)
-        }
-    }
-}
-
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2016-2017 The Regents of the University of California
- * Author: Jim Robinson
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-
+class NavbarButton {
+
+    constructor(browser, parent, title, buttonLabel, imageSVG, imageHoverSVG, initialButtonState) {
+
+        this.browser = browser;
+
+        this.button = div({class: 'igv-navbar-text-button'});
+        parent.appendChild(this.button);
+
+        if (Array.isArray(title)) {
+            this.textContent = title[ 0 ];
+            this.title = title[ 1 ];
+        } else {
+            this.textContent = this.title = title;
+        }
+
+        this.buttonLabel = buttonLabel;
+
+        this.imageDictionary =
+            {
+                image: `url("data:image/svg+xml,${ encodeURIComponent(imageSVG) }")`,
+                imageHover: `url("data:image/svg+xml,${ encodeURIComponent(imageHoverSVG) }")`,
+            };
+
+        this.responsiveKey = 'text';
+
+        this.configureButton(this.textContent, this.title);
+
+        this.setState(initialButtonState);
+
+        browser.on('navbar-resize', navbarButtonCSSClass => {
+            this.navbarResizeHandler(navbarButtonCSSClass);
+        });
+
+    }
+
+    navbarResizeHandler(navbarButtonCSSClass) {
+        const key = 'igv-navbar-icon-button' === navbarButtonCSSClass ? 'image' : 'text';
+        if (key !== this.responsiveKey) {
+            this.responsiveKey = key;
+            this.configureButton(this.textContent, this.title);
+            this.setState(undefined);
+        }
+    }
+
+    configureButton(textContent, title) {
+
+        this.groupElement = undefined;
+        this.button.title = title;
+        this.button.innerHTML = '';
+        this.button.style.backgroundImage = 'none';
+        this.button.classList.remove('igv-navbar-icon-button');
+        this.button.classList.remove('igv-navbar-text-button');
+
+        'text' === this.responsiveKey ? this.configureTextButton(textContent) : this.configureIconButton();
+
+    }
+
+    configureTextButton(textContent) {
+
+        this.button.classList.add('igv-navbar-text-button');
+
+        const tempDiv = document.createElement('div');
+        tempDiv.innerHTML = this.buttonLabel;
+        const svgRoot = tempDiv.firstChild;
+        this.button.appendChild(svgRoot);
+
+        this.groupElement = svgRoot.querySelector('#igv-navbar-button-group');
+
+        const tspanElement = svgRoot.querySelector('#igv-navbar-button-label');
+        tspanElement.textContent = textContent;
+    }
+
+    configureIconButton() {
+        this.button.classList.add('igv-navbar-icon-button');
+    }
+
+    setState(doHover) {
+
+        if (undefined !== doHover) {
+            this.doHover = doHover;
+        }
+
+        'text' === this.responsiveKey ? this.setTextButtonState(this.doHover) : this.setIconButtonState(this.doHover);
+
+    }
+
+    setTextButtonState(doHover) {
+        this.groupElement.classList.remove(...this.groupElement.classList);
+        const className = true === doHover ? 'igv-navbar-text-button-svg-hover' : 'igv-navbar-text-button-svg-inactive';
+        this.groupElement.classList.add(className);
+    }
+
+    setIconButtonState(doHover) {
+        this.button.style.backgroundImage = true === doHover ? this.imageDictionary.imageHover : this.imageDictionary.image;
+    }
+
+    show() {
+        // this.button.style.display = 'block'
+        this.button.style.display = 'flex';
+    }
+
+    hide() {
+        this.button.style.display = 'none';
+    }
+
+    setVisibility(isVisible) {
+        if (true === isVisible) {
+            this.show();
+        } else {
+            this.hide();
+        }
+    }
+
+    static currentNavbarButtonClass(browser) {
+        const el = browser.$navigation.get(0).querySelector('.igv-navbar-text-button');
+        return el ? 'igv-navbar-text-button' : 'igv-navbar-icon-button'
+    }
+}
+
+const overlayTrackImage =
+    `<svg width="625px" height="625px" viewBox="0 0 625 625" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Overlay Tracks</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Overlay-Tracks">
+            <rect id="backdrop" stroke="#737373" stroke-width="12" fill="#FFFFFF" x="6" y="6" width="613" height="613" rx="135"></rect>
+            <g id="layer-group" transform="translate(3, 127)">
+                <rect id="a" stroke="#737373" stroke-width="24" fill="#A1A1A1" x="12" y="12" width="332" height="139"></rect>
+                <rect id="a---hold-out" fill="#A1A1A1" x="9" y="25" width="324" height="115"></rect>
+                <rect id="b" stroke="#737373" stroke-width="24" fill="#C9C9C9" x="81" y="103" width="474" height="139"></rect>
+                <rect id="c" stroke="#737373" stroke-width="24" fill="#ECECEC" x="238" y="214" width="372" height="139"></rect>
+                <rect id="c---hold-out" fill="#ECECEC" x="250" y="226" width="372" height="115"></rect>
+            </g>
+            <rect id="over-border" stroke="#737373" stroke-width="12" x="6" y="6" width="613" height="613" rx="135"></rect>
+        </g>
+    </g>
+</svg>`;
+
+const overlayTrackImageHover =
+    `<svg width="625px" height="625px" viewBox="0 0 625 625" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Overlay Tracks Hover</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Overlay-Tracks-Hover">
+            <rect id="backdrop-copy" stroke="#737373" stroke-width="12" fill="#737373" x="6" y="6" width="613" height="613" rx="135"></rect>
+            <g id="layer-group" transform="translate(3, 127)">
+                <rect id="a" stroke="#FFFFFF" stroke-width="24" fill="#A1A1A1" x="12" y="12" width="332" height="139"></rect>
+                <rect id="a---hold-out" fill="#A1A1A1" x="9" y="25" width="324" height="115"></rect>
+                <rect id="b" stroke="#FFFFFF" stroke-width="24" fill="#C9C9C9" x="81" y="103" width="474" height="139"></rect>
+                <rect id="c" stroke="#FFFFFF" stroke-width="24" fill="#ECECEC" x="238" y="214" width="372" height="139"></rect>
+                <rect id="c---hold-out" fill="#ECECEC" x="250" y="226" width="372" height="115"></rect>
+            </g>
+            <rect id="over-border-copy" stroke="#737373" stroke-width="12" x="6" y="6" width="613" height="613" rx="135"></rect>
+        </g>
+    </g>
+</svg>`;
+
+const buttonLabel =
+    `<svg width="80px" height="18px" viewBox="0 0 80 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="igv-navbar-button-group">
+            <rect id="Rectangle" x="0.5" y="0.5" width="79" height="17" rx="6"></rect>
+            <text id="igv-text-button-label" x="50%" y="50%" dy=".1em" font-family="Helvetica" font-size="12" font-weight="normal" letter-spacing="-0.372">
+                <tspan id="igv-navbar-button-label"></tspan>
+            </text>
+        </g>
+    </g>
+</svg>`;
+
+const sampleNameButtonLabel =
+    `<svg width="90px" height="20px" viewBox="0 0 90 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="igv-navbar-button-group">
+            <rect id="Rectangle" x="0.5" y="0.5" width="89" height="18" rx="6"></rect>
+            <text id="igv-text-button-label" x="50%" y="50%" dy=".1em" font-family="Helvetica" font-size="12" font-weight="normal" letter-spacing="-0.372">
+                <tspan id="igv-navbar-button-label"></tspan>
+            </text>
+        </g>
+    </g>
+</svg>`;
+
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2016-2017 The Regents of the University of California
+ * Author: Jim Robinson
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
 
 /**
- * Represents 2 or more wig tracks overlaid on a common viewport.
+ * Represents 2 or more  tracks overlaid on a common viewport.
  */
 class MergedTrack extends TrackBase {
 
     static defaults = {
+        autoscale: undefined,
         alpha: 0.5,
         height: 50
     }
 
-    constructor(config, browser) {
+    constructor(config, browser, tracks) {
         super(config, browser);
         this.type = "merged";
-        this.featureType = "numeric";
         this.paintAxis = paintAxis;
         this.graphType = config.graphType;
-    }
-
-    init(config) {
-        if (!(config.tracks || config._tracks)) {
-            throw Error("Error: no tracks defined for merged track" + config)
+        if (tracks) {
+            this.tracks = tracks;   // Dynamic creation, actual track objects (not configurations)
+        } else {
+            this.tracks = [];
         }
-        super.init(config);
     }
 
+
     async postInit() {
 
-        this.tracks = [];
         if (this.config.tracks) {
-            // Configured merged track
+            // Track configurations, this indicates a configured merged track as opposed to dynamic merge through the UI
+            // Actual track objects need to be created.
             for (let tconf of this.config.tracks) {
-                tconf.isMergedTrack = true;
                 const t = await this.browser.createTrack(tconf);
                 if (t) {
                     this.tracks.push(t);
@@ -41648,24 +42109,27 @@ class MergedTrack extends TrackBase {
                     await t.postInit();
                 }
             }
-            // Explicit merged settings -- these will override any individual track settings
-            if (this.config.autoscale) {
-                this.autoscale = this.config.autoscale;
-            } else if (this.config.max !== undefined) {
-                this.dataRange = {
-                    min: this.config.min || 0,
-                    max: this.config.max
-                };
-            } else {
-                this.autoscale = !this.tracks.every(t => t.config.autoscale || t.config.max !== undefined);
+            // Default to autoscale unless scale if range or autoscale is not otherwise defined
+            const allTracksSpecified = this.config.tracks.every(config => config.autoscale !== undefined || config.max !== undefined);
+            if (!allTracksSpecified) {
+                this.config.autoscale = this.config.max === undefined;
             }
-        } else {
-            // Dynamic merged track
-            this.tracks = this.config._tracks;
-            this.autoscale = false;
-            delete this.config._tracks;
         }
 
+        // Mark constitutive tracks as merged.
+        for (let t of this.tracks) t.isMergedTrack = true;
+
+        // Explicit settings -- these will override any individual track settings
+        if(this.config.autoscale) {
+            this.autoscale = this.config.autoscale;
+        } else if (this.config.max !== undefined) {
+            this.setDataRange ({
+                min: this.config.min || 0,
+                max: this.config.max
+            });
+        }
+
+
         if (this.config.flipAxis !== undefined) {
             for (let t of this.tracks) t.flipAxis = this.config.flipAxis;
         }
@@ -41675,25 +42139,28 @@ class MergedTrack extends TrackBase {
         }
 
         this.resolutionAware = this.tracks.some(t => t.resolutionAware);
-
     }
 
     set flipAxis(b) {
         this.config.flipAxis = b;
-        for (let t of this.tracks) t.flipAxis = b;
+        for (let t of numericTracks(this.tracks)) {
+            t.flipAxis = b;
+        }
     }
 
     get flipAxis() {
-        return this.tracks.every(t => t.flipAxis)
+        return numericTracks(this.tracks).every(t => t.flipAxis)
     }
 
     set logScale(b) {
         this.config.logScale = b;
-        for (let t of this.tracks) t.logScale = b;
+        for (let t of numericTracks(this.tracks)) {
+            t.logScale = b;
+        }
     }
 
     get logScale() {
-        return this.tracks.every(t => t.logScale)
+        return numericTracks(this.tracks).every(t => t.logScale)
     }
 
     get height() {
@@ -41711,49 +42178,76 @@ class MergedTrack extends TrackBase {
         }
     }
 
-    get dataRange() {
-
-        if (undefined === this.tracks || 0 === this.tracks.length) {
-            return undefined
+    set autoscale(b) {
+        this._autoscale = b;
+        if(b === false && this.tracks) {
+            for(let t of this.tracks) t.autoscale = false;
         }
+    }
 
-        const list = this.tracks.filter(track => undefined !== track.dataRange);
-        if (list.length !== this.tracks.length) {
-            return undefined
-        }
+    get autoscale() {
+        return this._autoscale
+    }
 
-        const minSet = new Set(this.tracks.map(({dataRange}) => dataRange.min));
-        if (1 !== minSet.size) {
-            return undefined
-        }
+    /**
+     * Set the data range of all constitutive numeric tracks.  This method is called from the menu item, i.e. an explicit
+     * setting, so it should disable autoscale as well.
+     *
+     * @param min
+     * @param max
+     */
 
-        const maxSet = new Set(this.tracks.map(({dataRange}) => dataRange.max));
-        if (1 !== maxSet.size) {
-            return undefined
+    setDataRange({min, max}) {
+        this.autoscale = false;
+        for (const track of numericTracks(this.tracks)) {
+            track.dataRange = {min, max};
+            track.autoscale = false;
+            track.autoscaleGroup = false;
         }
+    }
 
-        return { min: [ ...minSet ][ 0 ],  max: [ ...maxSet ][ 0 ] }
+    set dataRange({min, max}) {
+        for (const track of numericTracks(this.tracks)) {
+            track.dataRange = {min, max};
+        }
     }
 
-    set dataRange({ min, max }) {
-        for (const track of this.tracks) {
-            track.dataRange = { min, max };
+    /**
+     * Return a DataRang {min, max} if all constitutive numeric tracks have identical range.  A numeric track is defined
+     * as a track with a data range.  Otherwise return undefined.
+     *
+     * @returns {{min: any, max: any}|undefined}
+     */
+    get dataRange() {
+        if(this.tracks) {
+            const num = numericTracks(this.tracks);
+            if (num.length > 0) {
+                const firstRange = num[0].dataRange;
+                if (num.every(t => t.dataRange && t.dataRange.min === firstRange.min && t.dataRange.max === firstRange.max)) {
+                    return firstRange
+                }
+            }
         }
+        return undefined
     }
 
+
     menuItemList() {
         const items = [];
-        if (this.flipAxis !== undefined) {
-            items.push({
-                label: "Flip y-axis",
-                click: function flipYAxisHandler() {
-                    this.flipAxis = !this.flipAxis;
-                    this.trackView.repaintViews();
-                }
-            });
-        }
+        if (numericTracks(this.tracks).length > 0) {
 
-        items.push(...this.numericDataMenuItems());
+            if (this.flipAxis !== undefined) {
+                items.push({
+                    label: "Flip y-axis",
+                    click: function flipYAxisHandler() {
+                        this.flipAxis = !this.flipAxis;
+                        this.trackView.repaintViews();
+                    }
+                });
+            }
+
+            items.push(...this.numericDataMenuItems());
+        }
 
         items.push('<hr/>');
         items.push(this.overlayTrackAlphaAdjustmentMenuItem());
@@ -41770,7 +42264,14 @@ class MergedTrack extends TrackBase {
 
         const promises = this.tracks.map((t) => t.getFeatures(chr, bpStart, bpEnd, bpPerPixel));
         const featureArrays = await Promise.all(promises);
-        return new MergedFeatureCollection(featureArrays)
+        
+        if (featureArrays.every((arr) => arr.length === 0)){
+            return new MergedFeatureCollection([], [])
+        }
+        else {
+            const trackNames = this.tracks.map((t) => t.name);
+            return new MergedFeatureCollection(featureArrays, trackNames)
+        }
     }
 
     draw(options) {
@@ -41782,11 +42283,6 @@ class MergedTrack extends TrackBase {
             trackOptions.features = mergedFeatures.featureArrays[i];
             trackOptions.alpha = this.alpha;
 
-            if (this.dataRange) {
-                // Single data scale for all tracks
-                this.tracks[i].dataRange = this.dataRange;
-            }
-
             if (this.graphType) {
                 this.tracks[i].graphType = this.graphType;
             }
@@ -41880,6 +42376,7 @@ class MergedTrack extends TrackBase {
         let scaleChange;
 
         if (this.autoscale) {
+            // Overrides any specific track scale settings
             scaleChange = true;
             let allFeatures = [];
             for (let visibleViewport of visibleViewports) {
@@ -41894,7 +42391,12 @@ class MergedTrack extends TrackBase {
                         allFeatures.push({value: mergedFeatureCollection.getMin(start, end)});
                     }
                 }
-                this.dataRange = doAutoscale(allFeatures);
+                const dataRange = doAutoscale(allFeatures);
+                for (const track of numericTracks(this.tracks)) {
+                    // Do not use this.dataRange, as that has side effects
+                    track.dataRange = dataRange;
+                }
+
             }
         } else {
             // Individual track scaling
@@ -41974,6 +42476,7 @@ class MergedTrack extends TrackBase {
                 if (groupAutoscale) {
                     track.autoscaleGroup = name;
                 }
+                track.isMergedTrack = false;
                 browser.addTrack(track.config, track);
             }
             browser.updateViews();
@@ -41987,25 +42490,30 @@ class MergedTrack extends TrackBase {
 
 class MergedFeatureCollection {
 
-    constructor(featureArrays) {
+    constructor(featureArrays,trackNames) {
         this.featureArrays = featureArrays;
+        //trackNames is needed for the popup data to populate track names 
+        //preserving the order of the actual tracks
+        this.trackNames = trackNames;
     }
 
     getMax(start, end) {
         let max = -Number.MAX_VALUE;
 
         for (let a of this.featureArrays) {
-            for (let f of a) {
-                if (typeof f.value === 'undefined' || Number.isNaN(f.value)) {
-                    continue
-                }
-                if (f.end < start) {
-                    continue
-                }
-                if (f.start > end) {
-                    break
+            if (Array.isArray(a)) {
+                for (let f of a) {
+                    if (typeof f.value === 'undefined' || Number.isNaN(f.value)) {
+                        continue
+                    }
+                    if (f.end < start) {
+                        continue
+                    }
+                    if (f.start > end) {
+                        break
+                    }
+                    max = Math.max(max, f.value);
                 }
-                max = Math.max(max, f.value);
             }
         }
 
@@ -42016,15 +42524,17 @@ class MergedFeatureCollection {
     getMin(start, end) {
         let min = 0;
         for (let a of this.featureArrays) {
-            for (let f of a) {
-                if (typeof f.value !== 'undefined' && !Number.isNaN(f.value)) {
-                    if (f.end < start) {
-                        continue
-                    }
-                    if (f.start > end) {
-                        break
+            if (Array.isArray(a)) {
+                for (let f of a) {
+                    if (typeof f.value !== 'undefined' && !Number.isNaN(f.value)) {
+                        if (f.end < start) {
+                            continue
+                        }
+                        if (f.start > end) {
+                            break
+                        }
+                        min = Math.min(min, f.value);
                     }
-                    min = Math.min(min, f.value);
                 }
             }
         }
@@ -42032,6 +42542,16 @@ class MergedFeatureCollection {
     }
 }
 
+/**
+ * Heuristic for finding numeric tracks.
+ *
+ * @param tracks
+ * @returns {*}
+ */
+const numericTracks = (tracks) => {
+    return tracks ? tracks.filter(track => undefined !== track.dataRange || undefined !== track.autoscale || undefined !== track.autoscaleGroup) : []
+};
+
 class OverlayTrackButton extends NavbarButton {
     constructor(browser, parent) {
 
@@ -42077,13 +42597,13 @@ function trackOverlayClickHandler(e) {
             {
                 name: 'Overlay',
                 type: 'merged',
+                autoscale: false,
                 alpha: 0.5, //fudge * (1.0/tracks.length),
                 height: Math.max(...tracks.map(({ height }) => height)),
                 order: Math.min(...tracks.map(({ order }) => order)),
-                _tracks: flattenedTracks
             };
 
-        const mergedTrack = new MergedTrack(config, this.browser);
+        const mergedTrack = new MergedTrack(config, this.browser, flattenedTracks);
 
         for (const track of tracks) {
             this.browser.removeTrack(track);
@@ -42303,27 +42823,6 @@ class TrackView {
         }
     }
 
-    get dataRange() {
-        return this.track.dataRange ? this.track.dataRange : undefined
-    }
-
-    set dataRange({ min, max }) {
-
-        this.track.dataRange = { min, max };
-
-        this.track.autoscale = false;
-        this.track.autoscaleGroup = undefined;
-
-        const list = this.browser.trackViews.filter(({track}) => track.autoscaleGroup);
-        if (1 === list.length) {
-            list[0].track.autoscale = false;
-            list[0].track.autoscaleGroup = undefined;
-            list[0].repaintViews();
-        }
-
-        this.repaintViews();
-
-    }
 
     presentColorPicker(key) {
 
@@ -43139,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
@@ -48509,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) {
@@ -48517,6 +48560,8 @@ class AlignmentContainer {
                 }
             }
             return all
+        } else {
+            return []
         }
     }
 
@@ -48525,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);
+            }
         }
     }
 }
@@ -49772,46 +49818,41 @@ const BamUtils = {
     },
 
     /**
+     * @param ba - UInt8Array  bytes to decode
      *
-     * @param ba  bytes to decode as a UInt8Array
-     * @param genome  optional igv genome object
-     * @returns {{ magicNumer: number, size: number, chrNames: Array, chrToIndex: ({}|*), chrAliasTable: ({}|*) }}
+     * @returns {{size: *, chrNames: *[], magicNumber: *, chrToIndex: {}}}
      */
-    decodeBamHeader: function (ba, genome) {
+    decodeBamHeader: function (ba) {
 
-        var magic, samHeaderLen, samHeader, chrToIndex, chrNames;
 
-        magic = readInt(ba, 0);
+        const magic = readInt(ba, 0);
         if (magic !== BAM1_MAGIC_NUMBER) {
             throw new Error('BAM header errror: bad magic number.  This could be caused by either a corrupt or missing file.')
         }
 
-        samHeaderLen = readInt(ba, 4);
-        samHeader = '';
-
+        const samHeaderLen = readInt(ba, 4);
+        let samHeader = '';
         for (var i = 0; i < samHeaderLen; ++i) {
             samHeader += String.fromCharCode(ba[i + 8]);
         }
 
-        var nRef = readInt(ba, samHeaderLen + 8);
-        var p = samHeaderLen + 12;
+        const nRef = readInt(ba, samHeaderLen + 8);
+        let p = samHeaderLen + 12;
 
-        chrToIndex = {};
-        chrNames = [];
+        const chrToIndex = {};
+        const chrNames = [];
 
         for (i = 0; i < nRef; ++i) {
-            var lName = readInt(ba, p);
-            var name = '';
-            for (var j = 0; j < lName - 1; ++j) {
+            const len = readInt(ba, p);
+            let name = '';
+            for (var j = 0; j < len - 1; ++j) {
                 name += String.fromCharCode(ba[p + 4 + j]);
             }
-            readInt(ba, p + lName + 4);
-            //dlog(name + ': ' + lRef);
 
             chrToIndex[name] = i;
             chrNames[i] = name;
 
-            p = p + 8 + lName;
+            p = p + 8 + len;
         }
 
         return {
@@ -50801,8 +50842,8 @@ class HtsgetBamReader extends HtsgetReader {
             const ba = unbgzf(compressedData.buffer);
             this.header = BamUtils.decodeBamHeader(ba, this.genome);
             this.chrAliasTable = new Map();
-            for (let key of Object.keys(this.header.chrAliasTable)) {
-                this.chrAliasTable.set(key, this.header.chrAliasTable[key]);
+            for (let name of this.header.chrNames) {
+                this.chrAliasTable.set(name, this.genome.getChromosomeName(name));
             }
         }
 
@@ -50812,6 +50853,7 @@ class HtsgetBamReader extends HtsgetReader {
 
         // BAM decoding
         const ba = unbgzf(compressedData.buffer);
+        this.header = BamUtils.decodeBamHeader(ba, this.genome);
 
         const chrIdx = this.header.chrToIndex[chr];
         const alignmentContainer = new AlignmentContainer(chr, start, end, this.config);
@@ -57321,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]
+                    }
                 }
             }
         }
@@ -57656,6 +57699,7 @@ class CoverageTrack  {
 
 
     constructor(config, parent) {
+        this.featureType = 'numeric';
         this.parent = parent;
         this.featureSource = parent.featureSource;
 
@@ -66134,12 +66178,12 @@ class CNVPytorTrack extends TrackBase {
                 if (this.signals.includes(signal_name)) {
                     let tconf = {};
                     tconf.type = "wig";
-                    tconf.isMergedTrack = true;
                     tconf.features = wig;
                     tconf.name = signal_name;
                     tconf.color = this.signal_colors.filter(x => x.singal_name === signal_name).map(x => x.color);
                     const t = await this.browser.createTrack(tconf);
                     if (t) {
+                        t.isMergedTrack = true;
                         t.autoscale = false;     // Scaling done from merged track
                         this.tracks.push(t);
                     } else {
@@ -66318,12 +66362,12 @@ class CNVPytorTrack extends TrackBase {
             if (this.signals.includes(signal_name)) {
                 let tconf = {};
                 tconf.type = "wig";
-                tconf.isMergedTrack = true;
                 tconf.features = wig;
                 tconf.name = signal_name;
                 tconf.color = this.signal_colors.filter(x => x.singal_name === signal_name).map(x => x.color);
                 const t = await this.browser.createTrack(tconf);
                 if (t) {
+                    t.isMergedTrack = true;
                     t.autoscale = false;     // Scaling done from merged track
                     this.tracks.push(t);
                 } else {
@@ -66716,23 +66760,26 @@ class VariantTrack extends TrackBase {
         this.header = await this.getHeader();
 
         // Set colorBy, if not explicitly set default to allele frequency, if available, otherwise default to none (undefined)
-        const infoFields = new Set(Object.keys(this.header.INFO));
-        if (this.config.colorBy) {
-            this.colorBy = this.config.colorBy;
-        } else if (!this.config.color && infoFields.has('AF')) {
-            this.colorBy = 'AF';
-        }
+        if(this.header.INFO) {
+            const infoFields = new Set(Object.keys(this.header.INFO));
+            if (this.config.colorBy) {
+                this.colorBy = this.config.colorBy;
+            } else if (!this.config.color && infoFields.has('AF')) {
+                this.colorBy = 'AF';
+            }
 
-        // Configure menu items based on info available
-        if (infoFields.has('AF')) {
-            this._colorByItems.set('AF', 'Allele frequency');
-        }
-        if (infoFields.has('VT')) {
-            this._colorByItems.set('VT', 'Variant Type');
-        }
-        if (infoFields.has('SVTYPE')) {
-            this._colorByItems.set('SVTYPE', 'SV Type');
+            // Configure menu items based on info available
+            if (infoFields.has('AF')) {
+                this._colorByItems.set('AF', 'Allele frequency');
+            }
+            if (infoFields.has('VT')) {
+                this._colorByItems.set('VT', 'Variant Type');
+            }
+            if (infoFields.has('SVTYPE')) {
+                this._colorByItems.set('SVTYPE', 'SV Type');
+            }
         }
+
         if (this.config.colorBy && !this._colorByItems.has(this.config.colorBy)) {
             this._colorByItems.set(this.config.colorBy, this.config.colorBy);
         }
@@ -69577,11 +69624,15 @@ someMotifValues.forEach(motif => {
     JUNCTION_MOTIF_PALETTE.getColor(motif);
 });
 
-// rendering context with values that only need to be computed once per render, rather than for each splice junction
-const junctionRenderingContext = {};
 
 class SpliceJunctionTrack extends TrackBase {
 
+    static defaults = {
+        margin: 10,
+        colorByNumReadsThreshold: 5,
+        height: 100
+    }
+
     constructor(config, browser) {
         super(config, browser);
     }
@@ -69602,16 +69653,6 @@ class SpliceJunctionTrack extends TrackBase {
                 FeatureSource(config, this.browser.genome);
         }
 
-        this.margin = config.margin === undefined ? 10 : config.margin;
-
-        if (!this.height) {
-            this.height = 100;
-        }
-
-        //set defaults
-        if (config.colorByNumReadsThreshold === undefined) {
-            config.colorByNumReadsThreshold = 5;
-        }
     }
 
     async postInit() {
@@ -69666,13 +69707,16 @@ class SpliceJunctionTrack extends TrackBase {
         const bpEnd = bpStart + pixelWidth * bpPerPixel + 1;
 
 
-        if (!this.config.isMergedTrack) {
+        if (!this.isMergedTrack) {
             IGVGraphics.fillRect(ctx, 0, options.pixelTop, pixelWidth, pixelHeight, {'fillStyle': "rgb(255, 255, 255)"});
         }
 
         if (featureList) {
 
 
+            // rendering context with values that only need to be computed once per render, rather than for each splice junction
+            const junctionRenderingContext = {};
+
             junctionRenderingContext.referenceFrame = options.viewport.referenceFrame;
             junctionRenderingContext.referenceFrameStart = junctionRenderingContext.referenceFrame.start;
             junctionRenderingContext.referenceFrameEnd = junctionRenderingContext.referenceFrameStart +
@@ -69685,7 +69729,7 @@ class SpliceJunctionTrack extends TrackBase {
             for (let feature of featureList) {
                 if (feature.end < bpStart) continue
                 if (feature.start > bpEnd) break
-                this.renderJunction(feature, bpStart, bpPerPixel, pixelHeight, ctx);
+                this.renderJunction(feature, bpStart, bpPerPixel, pixelHeight, ctx, junctionRenderingContext);
             }
 
         } else {
@@ -69702,7 +69746,7 @@ class SpliceJunctionTrack extends TrackBase {
      * @param pixelHeight  pixel height of the current canvas
      * @param ctx  the canvas 2d context
      */
-    renderJunction(feature, bpStart, xScale, pixelHeight, ctx) {
+    renderJunction(feature, bpStart, xScale, pixelHeight, ctx, junctionRenderingContext) {
         // cache whether this junction is rendered or filtered out. Use later to exclude non-rendered junctions from click detection.
         feature.isVisible = false;
 
@@ -69786,7 +69830,7 @@ class SpliceJunctionTrack extends TrackBase {
         }
 
         const py = this.margin;
-        const rowHeight = this.height;
+        const rowHeight = pixelHeight;
 
         const cy = py + 0.5 * rowHeight;
         let topY = py;
@@ -70471,7 +70515,7 @@ function createReferenceFrameList(loci, genome, browserFlanking, minimumBases, v
     })
 }
 
-const _version = "3.0.1";
+const _version = "3.0.3";
 function version() {
     return _version
 }
@@ -71942,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 ...',
@@ -72015,7 +72060,7 @@ class ROIMenu {
         }
 
 
-        if (isUserDefined) {
+        if (roiSet.isUserDefined) {
             items.push(
                 '<hr/>',
                 {
@@ -72300,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`;
                 }
 
             }
@@ -72474,7 +72523,6 @@ class ROIManager {
             if (features) {
 
                 for (let feature of features) {
-
                     const regionKey = createRegionKey(chr, feature.start, feature.end);
 
                     const {
@@ -72519,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);
         });
 
 
@@ -72922,7 +72969,7 @@ class ChromAliasBB {
     }
 
     /**
-     * Return the canonical chromosome name for the alias.  If none found return the alias.
+     * Return the cached canonical chromosome name for the alias.  If none found return the alias.
      *
      * Note this will only work if a "search" for ths chromosome has been performed previously.
      *
@@ -73689,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.
@@ -74572,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")) {