igv 2.15.2 → 2.15.4

package/dist/igv.esm.js

@@ -18360,7 +18360,7 @@ async function getAccessToken(scope) {
 
 function getScopeForURL(url) {
     if (isGoogleDriveURL(url)) {
-        return "https://www.googleapis.com/auth/drive.file"
+        return "https://www.googleapis.com/auth/drive.readonly"
     } else if (isGoogleStorageURL(url)) {
         return "https://www.googleapis.com/auth/devstorage.read_only"
     } else {
@@ -18389,7 +18389,8 @@ async function getDriveFileInfo(googleDriveURL) {
     const response = await fetch(endPoint);
     let json = await response.json();
     if (json.error && json.error.code === 404) {
-        const access_token = await getAccessToken("https://www.googleapis.com/auth/drive.readonly");
+        let scope = "https://www.googleapis.com/auth/drive.readonly";
+        const access_token = await getAccessToken(scope);
         if (access_token) {
             const response = await fetch(endPoint, {
                 headers: {
@@ -18870,29 +18871,41 @@ class IGVXhr {
         this.oauth.setToken(token, host);
     }
 
+    /**
+     * Return an oauth token for the URL if we have one.  This method does not force sign-in, and the token may
+     * or may not be valid.  Sign-in is triggered on request failure.
+     * *
+     * @param url
+     * @returns {*}
+     */
     getOauthToken(url) {
 
         // Google is the default provider, don't try to parse host for google URLs
         const host = isGoogleURL(url) ?
             undefined :
             parseUri(url).host;
+
+        // First check the explicit settings (i.e. token set through the API)
         let token = this.oauth.getToken(host);
         if (token) {
             return token
         } else if (host === undefined) {
+            // Now try Google oauth tokens previously obtained.  This will return undefined if google oauth is not
+            // configured.
             const googleToken = getCurrentGoogleAccessToken();
             if (googleToken && googleToken.expires_at > Date.now()) {
                 return googleToken.access_token
             }
         }
     }
-
 }
 
 function isGoogleStorageSigned(url) {
     return url.indexOf("X-Goog-Signature") > -1
 }
 
+
+
 /**
  * Return a Google oAuth token, triggering a sign in if required.   This method should not be called until we know
  * a token is required, that is until we've tried the url and received a 401, 403, or 404.
@@ -23931,7 +23944,7 @@ const Cytoband = function (start, end, name, typestain) {
     }
 };
 
-const _version = "2.15.2";
+const _version = "2.15.4";
 function version() {
     return _version
 }
@@ -23983,7 +23996,7 @@ const GenomeUtils = {
 
         // Delay loading cytbands untils after genome initialization to use chromosome aliases (1 vs chr1, etc).
         if (cytobandUrl) {
-            genome.cytobands  = await loadCytobands(cytobandUrl, sequence.config, genome);
+            genome.cytobands = await loadCytobands(cytobandUrl, sequence.config, genome);
         }
 
         return genome
@@ -24085,7 +24098,7 @@ class Genome {
         this.sequence = sequence;
         this.chromosomeNames = sequence.chromosomeNames;
         this.chromosomes = sequence.chromosomes;  // An object (functions as a dictionary)
-        this.featureDB = {};   // Hash of name -> feature, used for search function.
+        this.featureDB = new Map();   // Hash of name -> feature, used for search function.
 
         this.wholeGenomeView = config.wholeGenomeView === undefined || config.wholeGenomeView;
         if (this.wholeGenomeView && Object.keys(sequence.chromosomes).length > 1) {
@@ -24289,6 +24302,40 @@ class Genome {
         chr = this.getChromosomeName(chr);
         return this.sequence.getSequence(chr, start, end)
     }
+
+    addFeaturesToDB(featureList, config) {
+
+        const insertFeature = (name, feature) => {
+            const current = this.featureDB.get(name);
+            if (current) {
+                feature = (feature.end - feature.start) > (current.end - current.start) ? feature : current;
+
+            }
+            this.featureDB.set(name, feature);
+        };
+
+        for (let feature of featureList) {
+            if (feature.name) {
+                insertFeature(feature.name.toUpperCase(), feature);
+            }
+            if (feature.gene && feature.gene.name) {
+                insertFeature(feature.gene.name.toUpperCase(), feature);
+            }
+
+            if (config.searchableFields) {
+                for (let f of config.searchableFields) {
+                    const value = feature.getAttributeValue(f);
+                    if (value) {
+                        if (value.indexOf(" ") > 0) {
+                            insertFeature(value.replaceAll(" ", "+").toUpperCase(), feature);
+                        } else {
+                            insertFeature(value.toUpperCase(), feature);
+                        }
+                    }
+                }
+            }
+        }
+    }
 }
 
 async function loadCytobands(cytobandUrl, config, genome) {
@@ -27016,8 +27063,6 @@ function parseVariableStep(line) {
  * THE SOFTWARE.
  */
 
-const DEFAULT_COLOR$1 = 'rgb(150,150,150)';
-
 const fixColor = (colorString) => {
     if (isString$2(colorString)) {
         return (colorString.indexOf(",") > 0 && !(colorString.startsWith("rgb(") || colorString.startsWith("rgba("))) ?
@@ -27036,6 +27081,15 @@ const fixColor = (colorString) => {
  */
 class TrackBase {
 
+    static defaults = {
+        height: 50,
+        color: 'rgb(0, 0, 150)',
+        altColor: 'rgb(0, 0, 150)',
+        autoHeight: false,
+        visibilityWindow: undefined,
+        supportHiDPI: true
+    }
+
     constructor(config, browser) {
         this.browser = browser;
         this.init(config);
@@ -27049,15 +27103,25 @@ class TrackBase {
      */
     init(config) {
 
+        this.config = config;
+
         if (config.displayMode) {
             config.displayMode = config.displayMode.toUpperCase();
         }
 
-        this.config = config;
-        this.url = config.url;
-        this.type = config.type;
-
-        this.supportHiDPI = config.supportHiDPI === undefined ? true : config.supportHiDPI;
+        // Set default properties
+        const defaults = Object.assign({}, TrackBase.defaults);
+        if(this.constructor.defaults) {
+            for(let key of Object.keys(this.constructor.defaults)) {
+                defaults[key] = this.constructor.defaults[key];
+            }
+        }
+        for(let key of Object.keys(defaults)) {
+            this[key] = config.hasOwnProperty(key) ? config[key] : defaults[key];
+            if(key === 'color' || key === 'altColor') {
+                this[key] = fixColor(this[key]);
+            }
+        }
 
         if (config.name || config.label) {
             this.name = config.name || config.label;
@@ -27067,29 +27131,15 @@ class TrackBase {
             this.name = getFilename$2(config.url);
         }
 
+        this.url = config.url;
+        if(this.config.type) this.type = this.config.type;
         this.id = this.config.id === undefined ? this.name : this.config.id;
-
         this.order = config.order;
-
-        if (config.color) this.color = fixColor(config.color);
-        if (config.altColor) this.altColor = fixColor(config.altColor);
-        if ("civic-ws" === config.sourceType) {    // Ugly proxy for specialized track type
-            this.defaultColor = "rgb(155,20,20)";
-        } else {
-            this.defaultColor = "rgb(0,0,150)";
-        }
-
         this.autoscaleGroup = config.autoscaleGroup;
-
         this.removable = config.removable === undefined ? true : config.removable;      // Defaults to true
-
-        this.height = config.height || 100;
-        this.autoHeight = config.autoHeight;
         this.minHeight = config.minHeight || Math.min(25, this.height);
         this.maxHeight = config.maxHeight || Math.max(1000, this.height);
 
-        this.visibilityWindow = config.visibilityWindow;
-
         if (config.onclick) {
             this.onclick = config.onclick;
             config.onclick = undefined;   // functions cannot be saved in sessions, clear it here.
@@ -27146,17 +27196,18 @@ class TrackBase {
     }
 
     /**
-     * Default implementation -- update config with current values.
-     * to create session object for bookmarking, sharing.  Updates the track "config" object to reflect the
-     * current state.  Only simple properties (string, number, boolean) are updated.
+     * Used to create session object for bookmarking, sharing.  Only simple property values (string, number, boolean)
+     * are saved.
      */
     getState() {
 
+        const jsonable = (v) => !(v === undefined || typeof v === 'function' || v instanceof File || v instanceof Promise);
+
         // Create copy of config, minus transient properties (convention is name starts with '_').  Also, all
         // function properties are transient as they cannot be saved in json
         const state = {};
         for (let key of Object.keys(this.config)) {
-            if (!key.startsWith("_") && typeof this.config[key] !== "function" && this.config[key] !== undefined) {
+            if (!key.startsWith("_") && jsonable(this.config[key])) {
                 state[key] = this.config[key];
             }
         }
@@ -27170,8 +27221,18 @@ class TrackBase {
             }
         }
 
-        if (this.color) state.color = this.color;
-        if (this.altColor) state.altColor = this.altColor;
+        // If user has changed other properties from defaults update state.
+        const defs = TrackBase.defaults;
+        if (this.constructor.defaults) {
+            for (let key of Object.keys(this.constructor.defaults)) {
+                defs[key] = this.constructor.defaults[key];
+            }
+        }
+        for (let key of Object.keys(defs)) {
+            if (undefined !== this[key] && defs[key] !== this[key]) {
+                state[key] = this[key];
+            }
+        }
 
         // Flatten dataRange if present
         if (!this.autoscale && this.dataRange) {
@@ -27179,22 +27240,6 @@ class TrackBase {
             state.max = this.dataRange.max;
         }
 
-
-        // Check for non-json-if-yable properties.  Perhaps we should test what can be saved.
-        for (let key of Object.keys(state)) {
-            const value = state[key];
-            if (typeof value === 'function') {
-                throw Error(`Property '${key}' of track '${this.name} is a function. Functions cannot be saved in sessions.`)
-            }
-            if (value instanceof File) {   // Test specifically for File.  Other types of File-like objects might be savable
-                const str = `Track ${this.name} is a local file. Sessions cannot be saved with local file references.`;
-                throw Error(str)
-            }
-            if (value instanceof Promise) {
-                throw Error(`Property '${key}' of track '${this.name} is a Promise. Promises cannot be saved in sessions.`)
-            }
-        }
-
         return state
     }
 
@@ -27490,7 +27535,7 @@ class TrackBase {
      * @returns {*|string|string}
      */
     getColorForFeature(f) {
-       return (typeof this.color === "function") ? this.color(feature) : this.color || DEFAULT_COLOR$1
+        return (typeof this.color === "function") ? this.color(feature) : this.color
     }
 
     /**
@@ -31894,6 +31939,7 @@ class TextFeatureSource {
 
         const queryableFormats = new Set(["bigwig", "bw", "bigbed", "bb", "biginteract", "biggenepred", "bignarrowpeak", "tdf"]);
 
+        this.queryable = config.queryable === true;   // False by default, unless explicitly set
         if (config.reader) {
             // Explicit reader implementation
             this.reader = config.reader;
@@ -31927,6 +31973,11 @@ class TextFeatureSource {
                 this.queryable = true;
             } else ;
         }
+
+        // Set  searchable unless explicitly turned off, or track uses in indexed or otherwise queryable
+        // feature source.  queryable => features loaded on demand (by query)
+        this.searchable = config.searchable === true || config.searchableFields || (config.searchable !== false && !this.queryable);
+
     }
 
     async defaultVisibilityWindow() {
@@ -32067,39 +32118,13 @@ class TextFeatureSource {
             this.featureCache = new FeatureCache$1(features, this.genome, genomicInterval);
 
             // If track is marked "searchable"< cache features by name -- use this with caution, memory intensive
-            if (this.config.searchable || this.config.searchableFields) {
-                this.addFeaturesToDB(features);
+            if (this.searchable) {
+                this.genome.addFeaturesToDB(features, this.config);
             }
         } else {
             this.featureCache = new FeatureCache$1([], genomicInterval);     // Empty cache
         }
     }
-
-    addFeaturesToDB(featureList) {
-        for (let feature of featureList) {
-            if (feature.name) {
-                this.genome.featureDB[feature.name.toUpperCase()] = feature;
-            }
-            if (feature.gene && feature.gene.name) {
-                this.genome.featureDB[feature.gene.name.toUpperCase()] = feature;
-            }
-
-            if (this.config.searchableFields) {
-                for (let f of this.config.searchableFields) {
-                    const value = feature.getAttributeValue(f);
-                    if (value) {
-                        if (value.indexOf(" ") > 0) {
-                            this.genome.featureDB[value.replaceAll(" ", "+").toUpperCase()] = feature;
-                            this.genome.featureDB[value.replaceAll(" ", "%20").toUpperCase()] = feature;
-                        } else {
-                            this.genome.featureDB[value.toUpperCase()] = feature;
-                        }
-                    }
-                }
-            }
-        }
-    }
-
 }
 
 /*
@@ -32915,7 +32940,8 @@ function decodeWigData(data, chrIdx1, bpStart, chrIdx2, bpEnd, featureArray, chr
 
     const binaryParser = new BinaryParser(data);
     const chromId = binaryParser.getInt();
-    let chromStart = binaryParser.getInt();
+    const blockStart = binaryParser.getInt();
+    let chromStart = blockStart;
     let chromEnd = binaryParser.getInt();
     const itemStep = binaryParser.getInt();
     const itemSpan = binaryParser.getInt();
@@ -32925,6 +32951,7 @@ function decodeWigData(data, chrIdx1, bpStart, chrIdx2, bpEnd, featureArray, chr
 
     if (chromId >= chrIdx1 && chromId <= chrIdx2) {
 
+        let idx = 0;
         while (itemCount-- > 0) {
             let value;
             switch (type) {
@@ -32940,8 +32967,9 @@ function decodeWigData(data, chrIdx1, bpStart, chrIdx2, bpEnd, featureArray, chr
                     break
                 case 3:  // Fixed step
                     value = binaryParser.getFloat();
+                    chromStart = blockStart + idx * itemStep;
                     chromEnd = chromStart + itemSpan;
-                    chromStart += itemStep;
+                    idx++;
                     break
             }
 
@@ -32951,8 +32979,8 @@ function decodeWigData(data, chrIdx1, bpStart, chrIdx2, bpEnd, featureArray, chr
             if (Number.isFinite(value)) {
                 const chr = chrDict[chromId];
                 featureArray.push({chr: chr, start: chromStart, end: chromEnd, value: value});
-
             }
+
         }
     }
 }
@@ -33088,6 +33116,7 @@ class BWSource {
         this.genome = genome;
         this.format = config.format || "bigwig";
         this.wgValues = {};
+        this.queryable = true;
     }
 
     async getFeatures({chr, start, end, bpPerPixel, windowFunction}) {
@@ -33629,6 +33658,7 @@ class TDFSource {
         this.genome = genome;
         this.windowFunction = config.windowFunction || "mean";
         this.reader = new TDFReader(config, genome);
+        this.queryable = true;
     }
 
     async getFeatures({chr, start, end, bpPerPixel}) {
@@ -33838,8 +33868,8 @@ class StaticFeatureSource {
         this.config = config;
         this.genome = genome;
         this.queryable = false;
+        this.searchable = config.searchable !== false;  // searchable by default
         this.updateFeatures(config.features);
-
     }
 
     updateFeatures(features) {
@@ -33849,6 +33879,10 @@ class StaticFeatureSource {
             mapProperties(features, this.config.mappings);
         }
         this.featureCache = new FeatureCache$1(features, this.genome);
+
+        if (this.searchable || this.config.searchableFields) {
+            this.genome.addFeaturesToDB(features, this.config);
+        }
     }
 
     /**
@@ -40042,8 +40076,8 @@ function renderFeature(feature, bpStart, xScale, pixelHeight, ctx, options) {
 
         // Set ctx color to a known valid color.  If getColorForFeature returns an invalid color string it is ignored, and
         // this default will be used.
-        ctx.fillStyle = this.defaultColor;
-        ctx.strokeStyle = this.defaultColor;
+        ctx.fillStyle = this.color;
+        ctx.strokeStyle = this.color;
 
         const color = this.getColorForFeature(feature);
         ctx.fillStyle = color;
@@ -40367,6 +40401,17 @@ function renderFusionJuncSpan(feature, bpStart, xScale, pixelHeight, ctx) {
 
 class FeatureTrack extends TrackBase {
 
+    static defaults = {
+        type: "annotation",
+        maxRows: 1000, // protects against pathological feature packing cases (# of rows of overlapping feaures)
+        displayMode: "EXPANDED", // COLLAPSED | EXPANDED | SQUISHED
+        margin: 10,
+        featureHeight: 14,
+        autoHeight: false,
+        useScore: false
+    }
+
+
     constructor(config, browser) {
         super(config, browser);
     }
@@ -40374,12 +40419,8 @@ class FeatureTrack extends TrackBase {
     init(config) {
         super.init(config);
 
-        this.type = config.type || "annotation";
 
-        // Set maxRows -- protects against pathological feature packing cases (# of rows of overlapping feaures)
-        this.maxRows = config.maxRows === undefined ? 1000 : config.maxRows;
-
-        this.displayMode = config.displayMode || "EXPANDED";    // COLLAPSED | EXPANDED | SQUISHED
+        // Obscure option, not common or supoorted, included for backward compatibility
         this.labelDisplayMode = config.labelDisplayMode;
 
         if (config._featureSource) {
@@ -40391,12 +40432,6 @@ class FeatureTrack extends TrackBase {
                 FeatureSource(config, this.browser.genome);
         }
 
-        // Set default heights
-        this.autoHeight = config.autoHeight;
-        this.margin = config.margin === undefined ? 10 : config.margin;
-
-        this.featureHeight = config.featureHeight || 14;
-
         if ("FusionJuncSpan" === config.type) {
             this.render = config.render || renderFusionJuncSpan;
             this.squishedRowHeight = config.squishedRowHeight || 50;
@@ -40433,9 +40468,6 @@ class FeatureTrack extends TrackBase {
                 }
             }
         }
-
-        //UCSC useScore option
-        this.useScore = config.useScore;
     }
 
     async postInit() {
@@ -40799,7 +40831,7 @@ class FeatureTrack extends TrackBase {
         } else if (feature.color) {
             color = feature.color;   // Explicit color for feature
         } else {
-            color = this.defaultColor;   // Track default
+            color = this.color;   // Track default
         }
 
         if (feature.alpha && feature.alpha !== 1) {
@@ -40865,21 +40897,27 @@ class RegionTableBase {
 
         this.browser = config.browser;
 
-        this.container = domUtils.div({ class: 'igv-roi-table' });
+        this.columnFormat = config.columnFormat;
 
-        config.parent.appendChild(this.container);
+        this.tableRowSelectionList = [];
 
-        this.headerDOM = config;
+        this.tableDOM = domUtils.div({ class: 'igv-roi-table' });
+        // if(config.width) {
+        //     let [ w ] = config.width.split('px')
+        //     w = parseInt(w, 10)
+        //     this.tableDOM.style.width = `${Math.min(w, 1600)}px`
+        //
+        // }
 
-        this.columnTitleDOM = config.columnFormat;
+        config.parent.appendChild(this.tableDOM);
 
-        this.rowContainerDOM = this.container;
+        this.headerDOM = config;
 
-        this.footerDOM = config.gotoButtonHandler;
+        this.tableColumnTitles = this.tableDOM;
 
-        this.columnFormat = config.columnFormat;
+        this.tableRowContainer = this.tableDOM;
 
-        this.tableRowSelectionList = [];
+        this.footerDOM = config.gotoButtonHandler;
 
     }
 
@@ -40887,12 +40925,12 @@ class RegionTableBase {
 
         // header
         const dom = domUtils.div();
-        this.container.appendChild(dom);
+        this.tableDOM.appendChild(dom);
 
         // header title
         const div = domUtils.div();
         dom.appendChild(div);
-        div.innerText = headerTitle;
+        div.innerHTML = headerTitle;
 
         // table dismiss button
         const dismiss = domUtils.div();
@@ -40911,46 +40949,51 @@ class RegionTableBase {
         const { y:y_root } = browser.root.getBoundingClientRect();
         const { y:y_parent } = parent.getBoundingClientRect();
         const constraint = -(y_parent - y_root);
-        makeDraggable(this.container, dom, { minX:0, minY:constraint });
+        makeDraggable(this.tableDOM, dom, { minX:0, minY:constraint });
 
-        this.container.style.display = 'none';
+        this.tableDOM.style.display = 'none';
 
         this._headerDOM = dom;
 
     }
 
-    set columnTitleDOM(columnFormat) {
+    set tableColumnTitles(tableDOM) {
 
-        const dom = domUtils.div({ class: 'igv-roi-table-column-titles' });
-        this.container.appendChild(dom);
+        const tblColumnTitles = domUtils.div({ class: 'igv-roi-table-column-titles' });
+        tableDOM.appendChild(tblColumnTitles);
 
-        for (const { label, width } of columnFormat) {
+        for (const { label, width } of this.columnFormat) {
             const col = domUtils.div();
-            dom.appendChild(col);
+            tblColumnTitles.appendChild(col);
             col.style.width = width;
             col.innerText = label;
         }
 
+        this._tableColumnTitlesDOM = tblColumnTitles;
+
+    }
+
+    get tableColumnTitles() {
+        return this._tableColumnTitlesDOM
     }
 
-    set rowContainerDOM(container) {
+    set tableRowContainer(container) {
 
-        const dom = domUtils.div({ class: 'igv-roi-table-row-container' });
-        container.appendChild(dom);
+        const tblRowContainer = domUtils.div({ class: 'igv-roi-table-row-container' });
+        container.appendChild(tblRowContainer);
 
-        dom.style.minWidth = this.config.width;
+        this._tableRowContainerDOM = tblRowContainer;
 
-        this._rowContainerDOM = dom;
     }
 
-    get rowContainerDOM() {
-        return this._rowContainerDOM
+    get tableRowContainer() {
+        return this._tableRowContainerDOM
     }
 
     set footerDOM(gotoButtonHandler) {
 
         const dom = domUtils.div();
-        this.container.appendChild(dom);
+        this.tableDOM.appendChild(dom);
 
         // Go To Button
         const gotoButton = domUtils.div({class: 'igv-roi-table-button'});
@@ -40992,7 +41035,7 @@ class RegionTableBase {
     }
 
     clearTable() {
-        const elements = this.rowContainerDOM.querySelectorAll('.igv-roi-table-row');
+        const elements = this.tableRowContainer.querySelectorAll('.igv-roi-table-row');
         for (let el of elements) {
             el.remove();
         }
@@ -41004,23 +41047,23 @@ class RegionTableBase {
     }
 
     present() {
-        this.container.style.left = `${ 0 }px`;
+        this.tableDOM.style.left = `${ 0 }px`;
 
         const { y:y_root } = this.browser.root.getBoundingClientRect();
         const { y:y_parent } = this.config.parent.getBoundingClientRect();
 
-        this.container.style.top  = `${ y_root - y_parent }px`;
-        this.container.style.display = 'flex';
+        this.tableDOM.style.top  = `${ y_root - y_parent }px`;
+        this.tableDOM.style.display = 'flex';
     }
 
     dismiss() {
-        this.container.style.display = 'none';
+        this.tableDOM.style.display = 'none';
     }
 
     dispose() {
 
-        this.container.innerHTML = '';
-        this.container.remove();
+        this.tableDOM.innerHTML = '';
+        this.tableDOM.remove();
 
         for (const key of Object.keys(this)) {
             this[key] = undefined;
@@ -41036,41 +41079,35 @@ class BlatTable extends RegionTableBase {
 
     constructor(config) {
 
-        const cooked = Object.assign({ 'width':'1040px' }, config);
+        const cooked = Object.assign({ 'width':'1024px' }, config);
         super(cooked);
 
         this.descriptionDOM = config;
 
     }
 
-
-    set columnTitleDOM(columnFormat) {
-
-        const dom = domUtils.div({ class: 'igv-roi-table-column-titles' });
-        this.container.appendChild(dom);
-
-        for (const format of columnFormat) {
-            const col = domUtils.div();
-            dom.appendChild(col);
-            col.style.width = format.width || 'fit-content';
-            col.innerText = format.label;
-        }
-
-    }
-
     set descriptionDOM(config) {
 
         if (config.description) {
 
             let dom;
 
-            const found = this.container.querySelector('.igv-roi-table-column-titles');
+            // BLAT result for query sequence
             dom = domUtils.div({ class: 'igv-roi-table-description' });
-            this.container.insertBefore(dom, found);
+            this.tableDOM.insertBefore(dom, this.tableColumnTitles);
+            dom.style.height = 'auto';
+            dom.innerHTML = `BLAT result for query sequence:`;
+
+            // CTAATCAtctacactggtttctactg ...
+            dom = domUtils.div({ class: 'igv-roi-table-description' });
+            this.tableDOM.insertBefore(dom, this.tableColumnTitles);
+            dom.style.height = 'auto';
+            dom.style.maxHeight = '128px';
             dom.innerHTML = config.description;
 
+            // Select one or more rows ...
             dom = domUtils.div({ class: 'igv-roi-table-goto-explainer' });
-            this.container.insertBefore(dom, found);
+            this.tableDOM.insertBefore(dom, this.tableColumnTitles);
             dom.innerHTML = `Select one or more rows and click Go To to view the regions`;
 
         }
@@ -41100,13 +41137,13 @@ class BlatTable extends RegionTableBase {
 
     renderTable(records) {
 
-        Array.from(this.rowContainerDOM.querySelectorAll('.igv-roi-table-row')).forEach(el => el.remove());
+        Array.from(this.tableRowContainer.querySelectorAll('.igv-roi-table-row')).forEach(el => el.remove());
 
         if (records.length > 0) {
 
             for (let record of records) {
                 const row = this.tableRowDOM(record);
-                this.rowContainerDOM.appendChild(row);
+                this.tableRowContainer.appendChild(row);
             }
 
         }
@@ -41154,7 +41191,7 @@ class BlatTable extends RegionTableBase {
 
         event.stopPropagation();
 
-        const selectedRows = this.container.querySelectorAll('.igv-roi-table-row-selected');
+        const selectedRows = this.tableDOM.querySelectorAll('.igv-roi-table-row-selected');
 
         const loci = [];
         for (const row of selectedRows) {
@@ -41166,7 +41203,7 @@ class BlatTable extends RegionTableBase {
             loci.push(`${ chr }:${ start }-${ end }`);
         }
 
-        for (const el of this.container.querySelectorAll('.igv-roi-table-row')) {
+        for (const el of this.tableDOM.querySelectorAll('.igv-roi-table-row')) {
             el.classList.remove('igv-roi-table-row-selected');
         }
 
@@ -41188,16 +41225,16 @@ http://genome.ucsc.edu/cgi-bin/hgBlat
 &output=json
  */
 
-
 //const blatServer = "https://genome.ucsc.edu/cgi-bin/hgBlat"
-const blatServer = "https://igv.org/services/blat.php";
+const defaultBlatServer = "https://igv.org/services/blatUCSC.php";
+//const blatServer = "http://localhost:8000/blatUCSC.php"
 
 
-async function blat(userSeq, db) {
+async function blat({url, userSeq, db}) {
 
-    const url = `${blatServer}?userSeq=${userSeq}&type=DNA&db=${db}&output=json`;
+    url = url || defaultBlatServer;
 
-    const results = await igvxhr.loadJson(url, {});
+    const results = await postData(url, userSeq, db);
 
     results.fields;
 
@@ -41206,8 +41243,19 @@ async function blat(userSeq, db) {
     return features
 }
 
-class BlatTrack extends FeatureTrack {
+async function postData(url = "", userSeq, db) {
 
+    const data = new URLSearchParams();
+    data.append("userSeq", userSeq);
+    data.append("db", db);
+
+    const response = await fetch(url, { method: "post", body: data });
+    return response.json(); // parses JSON response into native JavaScript objects
+}
+
+const maxSequenceSize = 25000;
+
+class BlatTrack extends FeatureTrack {
 
     constructor(config, browser) {
         super(config, browser);
@@ -41243,7 +41291,7 @@ class BlatTrack extends FeatureTrack {
                     browser: this.browser,
                     parent: this.browser.parent,
                     headerTitle: this.config.title,
-                    description: `BLAT result for query sequence:<br>${ this.sequence }`,
+                    description: this.sequence,
                     dismissHandler: () => {
                         this.table.dismiss();
                         this.table.dispose();
@@ -41292,21 +41340,34 @@ class BlatTrack extends FeatureTrack {
 
 async function createBlatTrack({sequence, browser, name, title}) {
 
+    if (sequence.length > maxSequenceSize) {
+        browser.alert.present(`Sequence size exceeds maximum allowed length (${sequence.length} > ${maxSequenceSize})`);
+        return
+    }
+
     const db = browser.genome.id;   // TODO -- blat specific property
 
-    const features = await blat(sequence, db);
+    const url = browser.config["blatServerURL"];
 
-    const trackConfig = {
-        type: 'blat',
-        name: name || 'blat results',
-        title: title || 'blat results',
-        sequence: sequence,
-        features: features
-    };
+    try {
+
+        const features = await blat({url, userSeq: sequence, db});
+        const trackConfig = {
+            type: 'blat',
+            name: name || 'blat results',
+            title: title || 'blat results',
+            sequence: sequence,
+            altColor: 'rgb(176, 176, 236)',
+            color: 'rgb(236, 176, 176)',
+            features: features
+        };
 
-    const track = await browser.loadTrack(trackConfig);
+        const track = await browser.loadTrack(trackConfig);
+        track.openTableView();
 
-    track.openTableView();
+    } catch (e) {
+        browser.alert.present(`Error performing blat search:  ${e}`);
+    }
 
 }
 
@@ -41337,8 +41398,6 @@ async function createBlatTrack({sequence, browser, name, title}) {
 
 const alignmentStartGap = 5;
 const downsampleRowHeight = 5;
-const DEFAULT_COVERAGE_TRACK_HEIGHT = 50;
-const DEFAULT_TRACK_HEIGHT$1 = 300;
 const DEFAULT_ALIGNMENT_COLOR = "rgb(185, 185, 185)";
 const DEFAULT_COVERAGE_COLOR = "rgb(150, 150, 150)";
 const DEFAULT_CONNECTOR_COLOR = "rgb(200, 200, 200)";
@@ -41346,35 +41405,37 @@ const MINIMUM_BLAT_LENGTH = 20;
 
 class BAMTrack extends TrackBase {
 
+    static defaults = {
+        alleleFreqThreshold: 0.2,
+        visibilityWindow: 30000,
+        showCoverage: true,
+        showAlignments: true,
+        viewAsPairs: false,
+        pairsSupported: true,
+        showSoftClips: false,
+        showAllBases: false,
+        showInsertions: true,
+        showMismatches: true,
+        color: DEFAULT_ALIGNMENT_COLOR,
+        coverageColor: DEFAULT_COVERAGE_COLOR,
+        height: 300,
+        coverageTrackHeight: 50
+    }
+
     constructor(config, browser) {
         super(config, browser);
     }
 
     init(config) {
-        super.init(config);
-        this.type = "alignment";
-
-        if (config.alleleFreqThreshold === undefined) {
-            config.alleleFreqThreshold = 0.2;
-        }
 
+        this.type = "alignment";
         this.featureSource = new BamSource(config, this.browser);
-
-        this.showCoverage = config.showCoverage === undefined ? true : config.showCoverage;
-        this.showAlignments = config.showAlignments === undefined ? true : config.showAlignments;
-
         this.coverageTrack = new CoverageTrack(config, this);
         this.alignmentTrack = new AlignmentTrack(config, this);
+
+        super.init(config);
+
         this.alignmentTrack.setTop(this.coverageTrack, this.showCoverage);
-        this.visibilityWindow = config.visibilityWindow || 30000;
-        this.viewAsPairs = config.viewAsPairs;
-        this.pairsSupported = config.pairsSupported !== false;
-        this.showSoftClips = config.showSoftClips;
-        this.showAllBases = config.showAllBases;
-        this.showInsertions = false !== config.showInsertions;
-        this.showMismatches = false !== config.showMismatches;
-        this.color = config.color;
-        this.coverageColor = config.coverageColor;
 
         // The sort object can be an array in the case of multi-locus view, however if multiple sort positions
         // are present for a given reference frame the last one will take precedence
@@ -41387,14 +41448,12 @@ class BAMTrack extends TrackBase {
             }
         }
 
-        // Invoke height setter last to allocated to coverage and alignment tracks
-        this.height = (config.height !== undefined ? config.height : DEFAULT_TRACK_HEIGHT$1);
     }
 
     set height(h) {
         this._height = h;
-        if (this.coverageTrack && this.showAlignments) {
-            this.alignmentTrack.height = this.showCoverage ? h - this.coverageTrack.height : h;
+        if (this.showAlignments) {
+            this.alignmentTrack.height = this.showCoverage ? h - this.coverageTrackHeight : h;
         }
     }
 
@@ -41481,16 +41540,15 @@ class BAMTrack extends TrackBase {
      * @returns {number}
      */
     computePixelHeight(alignmentContainer) {
-        return (this.showCoverage ? this.coverageTrack.height : 0) +
-            (this.showAlignments ? this.alignmentTrack.computePixelHeight(alignmentContainer) : 0) +
-            15
+        return (this.showCoverage ? this.coverageTrackHeight : 0) +
+            (this.showAlignments ? this.alignmentTrack.computePixelHeight(alignmentContainer) : 0)
     }
 
     draw(options) {
 
         IGVGraphics.fillRect(options.context, 0, options.pixelTop, options.pixelWidth, options.pixelHeight, {'fillStyle': "rgb(255, 255, 255)"});
 
-        if (true === this.showCoverage && this.coverageTrack.height > 0) {
+        if (true === this.showCoverage && this.coverageTrackHeight > 0) {
             this.trackView.axisCanvas.style.display = 'block';
             this.coverageTrack.draw(options);
         } else {
@@ -41505,12 +41563,12 @@ class BAMTrack extends TrackBase {
 
     paintAxis(ctx, pixelWidth, pixelHeight) {
 
-        this.coverageTrack.paintAxis(ctx, pixelWidth, this.coverageTrack.height);
+        this.coverageTrack.paintAxis(ctx, pixelWidth, this.coverageTrackHeight);
 
         // if (this.browser.isMultiLocusMode()) {
         //     ctx.clearRect(0, 0, pixelWidth, pixelHeight);
         // } else {
-        //     this.coverageTrack.paintAxis(ctx, pixelWidth, this.coverageTrack.height);
+        //     this.coverageTrack.paintAxis(ctx, pixelWidth, this.coverageTrackHeight);
         // }
     }
 
@@ -41519,7 +41577,7 @@ class BAMTrack extends TrackBase {
     }
 
     popupData(clickState) {
-        if (true === this.showCoverage && clickState.y >= this.coverageTrack.top && clickState.y < this.coverageTrack.height) {
+        if (true === this.showCoverage && clickState.y >= this.coverageTrack.top && clickState.y < this.coverageTrackHeight) {
             return this.coverageTrack.popupData(clickState)
         } else {
             return this.alignmentTrack.popupData(clickState)
@@ -41534,7 +41592,7 @@ class BAMTrack extends TrackBase {
     clickedFeatures(clickState) {
 
         let clickedObject;
-        if (true === this.showCoverage && clickState.y >= this.coverageTrack.top && clickState.y < this.coverageTrack.height) {
+        if (true === this.showCoverage && clickState.y >= this.coverageTrack.top && clickState.y < this.coverageTrackHeight) {
             clickedObject = this.coverageTrack.getClickedObject(clickState);
         } else {
             clickedObject = this.alignmentTrack.getClickedObject(clickState);
@@ -41543,7 +41601,7 @@ class BAMTrack extends TrackBase {
     }
 
     hoverText(clickState) {
-        if (true === this.showCoverage && clickState.y >= this.coverageTrack.top && clickState.y < this.coverageTrack.height) {
+        if (true === this.showCoverage && clickState.y >= this.coverageTrack.top && clickState.y < this.coverageTrackHeight) {
             const clickedObject = this.coverageTrack.getClickedObject(clickState);
             if (clickedObject) {
                 return clickedObject.hoverText()
@@ -41583,8 +41641,8 @@ class BAMTrack extends TrackBase {
         // Show coverage / alignment options
         const adjustTrackHeight = () => {
             if (!this.autoHeight) {
-                const h = 15 +
-                    (this.showCoverage ? this.coverageTrack.height : 0) +
+                const h =
+                    (this.showCoverage ? this.coverageTrackHeight : 0) +
                     (this.showAlignments ? this.alignmentTrack.height : 0);
                 this.trackView.setTrackHeight(h);
             }
@@ -41898,7 +41956,6 @@ class CoverageTrack {
     constructor(config, parent) {
         this.parent = parent;
         this.featureSource = parent.featureSource;
-        this.height = config.coverageTrackHeight !== undefined ? config.coverageTrackHeight : DEFAULT_COVERAGE_TRACK_HEIGHT;
 
         this.paintAxis = paintAxis;
         this.top = 0;
@@ -41913,6 +41970,10 @@ class CoverageTrack {
 
     }
 
+    get height() {
+        return this.parent.coverageTrackHeight
+    }
+
     draw(options) {
 
         const pixelTop = options.pixelTop;
@@ -42659,18 +42720,21 @@ class AlignmentTrack {
                 // TODO if genome supports blat
                 const seqstring = clickedAlignment.seq;
                 if (seqstring && "*" != seqstring) {
-                    list.push({
-                        label: 'BLAT read sequence',
-                        click: () => {
-                            const sequence = clickedAlignment.isNegativeStrand() ? reverseComplementSequence(seqstring) : seqstring;
-                            const name = `${clickedAlignment.readName} - blat`;
-                            const title = `${this.parent.name} - ${name}`;
-                            createBlatTrack({sequence, browser: this.browser, name, title});
-                        }
-                    });
+
+                    if (seqstring.length < maxSequenceSize) {
+                        list.push({
+                            label: 'BLAT read sequence',
+                            click: () => {
+                                const sequence = clickedAlignment.isNegativeStrand() ? reverseComplementSequence(seqstring) : seqstring;
+                                const name = `${clickedAlignment.readName} - blat`;
+                                const title = `${this.parent.name} - ${name}`;
+                                createBlatTrack({sequence, browser: this.browser, name, title});
+                            }
+                        });
+                    }
 
                     const softClips = clickedAlignment.softClippedBlocks();
-                    if (softClips.left && softClips.left.len > MINIMUM_BLAT_LENGTH) {
+                    if (softClips.left && softClips.left.len > MINIMUM_BLAT_LENGTH && softClips.left.len < maxSequenceSize) {
                         list.push({
                             label: 'BLAT left soft-clipped sequence',
                             click: () => {
@@ -42682,7 +42746,7 @@ class AlignmentTrack {
                             }
                         });
                     }
-                    if (softClips.right && softClips.right.length > MINIMUM_BLAT_LENGTH) {
+                    if (softClips.right && softClips.right.len > MINIMUM_BLAT_LENGTH && softClips.right.len < maxSequenceSize) {
                         list.push({
                             label: 'BLAT right soft-clipped sequence',
                             click: () => {
@@ -44604,25 +44668,34 @@ function renderSVGAxis(context, track, axisCanvas, deltaX, deltaY) {
  * THE SOFTWARE.
  */
 
-const DEFAULT_COLOR = "rgb(150,150,150)";
-
 class WigTrack extends TrackBase {
 
+    static defaults = {
+        height: 50,
+        color: 'rgb(150, 150, 150)',
+        altColor: 'rgb(150, 150, 150)',
+        flipAxis: false,
+        logScale: false,
+        windowFunction: 'mean',
+        graphType: 'bar',
+        autoscale: true,
+        normalize: undefined,
+        scaleFactor: undefined
+    }
+
     constructor(config, browser) {
         super(config, browser);
     }
 
     init(config) {
+
         super.init(config);
 
         this.type = "wig";
-        this.height = config.height || 50;
         this.featureType = 'numeric';
         this.paintAxis = paintAxis;
 
         const format = config.format ? config.format.toLowerCase() : config.format;
-        this.flipAxis = config.flipAxis ? config.flipAxis : false;
-        this.logScale = config.logScale ? config.logScale : false;
         if (config.featureSource) {
             this.featureSource = config.featureSource;
             delete config.featureSource;
@@ -44634,18 +44707,16 @@ class WigTrack extends TrackBase {
             this.featureSource = FeatureSource(config, this.browser.genome);
         }
 
-        this.autoscale = config.autoscale || config.max === undefined;
-        if (!this.autoscale) {
+
+        // Override autoscale default
+        if(config.max === undefined || config.autoscale === true) {
+            this.autoscale = true;
+        } else {
             this.dataRange = {
                 min: config.min || 0,
                 max: config.max
             };
         }
-
-        this.windowFunction = config.windowFunction || "mean";
-        this.graphType = config.graphType || "bar";
-        this.normalize = config.normalize;  // boolean, for use with "TDF" files
-        this.scaleFactor = config.scaleFactor;  // optional scale factor, ignored if normalize === true;
     }
 
     async postInit() {
@@ -44735,7 +44806,7 @@ class WigTrack extends TrackBase {
         const pixelWidth = options.pixelWidth;
         options.pixelHeight;
         const bpEnd = bpStart + pixelWidth * bpPerPixel + 1;
-        const posColor = this.color || DEFAULT_COLOR;
+        const posColor = this.color || WigTrack.defaults.color;
 
         let baselineColor;
         if (typeof posColor === "string" && posColor.startsWith("rgb(")) {
@@ -44879,7 +44950,7 @@ class WigTrack extends TrackBase {
      */
 
     getColorForFeature(f) {
-        let c = (f.value < 0 && this.altColor) ? this.altColor : this.color || DEFAULT_COLOR;
+        let c = (f.value < 0 && this.altColor) ? this.altColor : this.color || WigTrack.defaults.color;
         return (typeof c === "function") ? c(f.value) : c
     }
 
@@ -44890,20 +44961,6 @@ class WigTrack extends TrackBase {
         this.trackView = undefined;
     }
 
-    /**
-     * Return the current state of the track.  Used to create sessions and bookmarks.
-     *
-     * @returns {*|{}}
-     */
-    getState() {
-
-        const config = super.getState();
-
-        if (this.flipAxis !== undefined) config.flipAxis = this.flipAxis;
-        if (this.logScale !== undefined) config.logScale = this.logScale;
-
-        return config
-    }
 }
 
 /**
@@ -45791,6 +45848,17 @@ const DEFAULT_ARC_COLOR = "rgb(180,25,137)";
 
 class InteractionTrack extends TrackBase {
 
+    static defaults = {
+        height: 250,
+        theta: Math.PI / 4,
+        arcOrientation: true,
+        showBlocks: true,
+        blockHeight: 3,
+        thickness: 1,
+        alpha: 0.02,
+        logScale: true,
+    }
+
     constructor(config, browser) {
         super(config, browser);
     }
@@ -45798,16 +45866,10 @@ class InteractionTrack extends TrackBase {
     init(config) {
 
         super.init(config);
-        this.theta = config.theta || Math.PI / 4;
+
         this.sinTheta = Math.sin(this.theta);
         this.cosTheta = Math.cos(this.theta);
-        this.height = config.height || 250;
         this.arcType = getArcType(config);   // nested | proportional | inView | partialInView
-        this.arcOrientation = (config.arcOrientation === undefined ? true : config.arcOrientation); // true for up, false for down
-        this.showBlocks = config.showBlocks === undefined ? true : config.showBlocks;
-        this.blockHeight = config.blockHeight || 3;
-        this.thickness = config.thickness || 1;
-        this.color = config.color;
         this.alpha = config.alpha || 0.02;  // was: 0.15
         this.painter = {flipAxis: !this.arcOrientation, dataRange: this.dataRange, paintAxis: paintAxis};
 
@@ -45819,7 +45881,6 @@ class InteractionTrack extends TrackBase {
             this.valueColumn = "score";
         }
 
-        this.logScale = config.logScale !== false;   // i.e. defaul to true (undefined => true)
         if (config.max) {
             this.dataRange = {
                 min: config.min || 0,
@@ -45844,7 +45905,7 @@ class InteractionTrack extends TrackBase {
 
         if (typeof this.featureSource.getHeader === "function") {
             this.header = await this.featureSource.getHeader();
-            if(this.disposed) return;   // This track was removed during async load
+            if (this.disposed) return;   // This track was removed during async load
         }
 
         // Set properties from track line
@@ -45917,7 +45978,7 @@ class InteractionTrack extends TrackBase {
                 feature.drawState = undefined;
 
                 let color;
-                if(typeof this.color === 'function') {
+                if (typeof this.color === 'function') {
                     color = this.color(feature);
                 } else {
                     color = this.color || feature.color || DEFAULT_ARC_COLOR;
@@ -46262,7 +46323,7 @@ class InteractionTrack extends TrackBase {
     contextMenuItemList(clickState) {
 
         // Experimental JBrowse feature
-        if (this.browser.circularView ) {
+        if (this.browser.circularView) {
             const viewport = clickState.viewport;
             const list = [];
 
@@ -46291,7 +46352,7 @@ class InteractionTrack extends TrackBase {
 
         // inView features are simply features that have been drawn, i.e. have a drawState
         const inView = cachedFeatures.filter(f => f.drawState);
-        if(inView.length === 0) return;
+        if (inView.length === 0) return;
 
         const chords = makeBedPEChords(inView);
         sendChords(chords, this, refFrame, 0.5);
@@ -46327,7 +46388,7 @@ class InteractionTrack extends TrackBase {
 
     popupData(clickState, features) {
 
-        if(features === undefined) features = this.clickedFeatures(clickState);
+        if (features === undefined) features = this.clickedFeatures(clickState);
 
         const data = [];
         for (let feature of features) {
@@ -46351,7 +46412,7 @@ class InteractionTrack extends TrackBase {
                 const columnNames = this.header.columnNames;
                 const stdColumns = this.header.hiccups ? 6 : 10;
                 for (let i = stdColumns; i < columnNames.length; i++) {
-                    if(this.header.colorColumn === i) continue;
+                    if (this.header.colorColumn === i) continue;
                     if (columnNames[i] === 'info') {
                         extractInfoColumn(data, f.extras[i - stdColumns]);
                     } else {
@@ -46373,7 +46434,7 @@ class InteractionTrack extends TrackBase {
 
         // We use the cached features rather than method to avoid async load.  If the
         // feature is not already loaded this won't work,  but the user wouldn't be mousing over it either.
-        const featureList =  clickState.viewport.cachedFeatures;
+        const featureList = clickState.viewport.cachedFeatures;
         const candidates = [];
         if (featureList) {
             const proportional = (this.arcType === "proportional" || this.arcType === "inView" || this.arcType === "partialInView");
@@ -46419,26 +46480,6 @@ class InteractionTrack extends TrackBase {
         }
         return candidates.map((c) => c.feature)
     }
-
-    /**
-     * Return the current state of the track.  Used to create sessions and bookmarks.
-     *
-     * @returns {*|{}}
-     */
-    getState() {
-
-        const config = super.getState();
-
-        // if (this.height !== undefined) config.height = this.height;
-        if (this.arcType !== undefined) config.arcType = this.arcType;
-        if (this.arcOrientation !== undefined) config.arcOrientation = this.arcOrientation;
-        if (this.showBlocks !== undefined) config.showBlocks = this.showBlocks;
-        if (this.blockHeight !== undefined) config.blockHeight = this.blockHeight;
-        if (this.thickness !== undefined) config.thickness = this.thickness;
-        if (this.alpha !== undefined) config.alpha = this.alpha;
-
-        return config
-    }
 }
 
 function getMidpoints(feature, genome) {
@@ -46645,6 +46686,31 @@ const STANDARD_FIELDS = new Map([["REF", "referenceBases"], ["ALT", "alternateBa
 
 class VariantTrack extends TrackBase {
 
+    static defaults = {
+        displayMode: "EXPANDED",
+        sortDirection: "ASC",
+        showGenotypes: true,
+        squishedVariantHeight: 2,
+        squishedCallHeight: 1,
+        expandedCallHeight: 10,
+        expandedVGap: 2,
+        squishedVGap: 1,
+        expandedGroupGap: 10,
+        squishedGroupGap: 5,
+        featureHeight: 14,
+        noGenotypeColor: "rgb(200,180,180)",
+        noCallColor: "rgb(225, 225, 225)",
+        nonRefColor: "rgb(200, 200, 215)",
+        mixedColor: "rgb(200, 220, 200)",
+        homrefColor: "rgb(200, 200, 200)",
+        homvarColor: "rgb(17,248,254)",
+        hetvarColor: "rgb(34,12,253)",
+        colorBy: undefined,
+        visibilityWindow: undefined,
+        labelDisplayMode: undefined,
+        type: "variant"
+    }
+
     constructor(config, browser) {
         super(config, browser);
     }
@@ -46653,41 +46719,18 @@ class VariantTrack extends TrackBase {
 
         super.init(config);
 
-        this.visibilityWindow = config.visibilityWindow;
-        this.displayMode = config.displayMode || "EXPANDED";    // COLLAPSED | EXPANDED | SQUISHED
-        this.labelDisplayMode = config.labelDisplayMode;
         this.expandedVariantHeight = config.expandedVariantHeight || config.variantHeight || 10;
-        this.squishedVariantHeight = config.squishedVariantHeight || 2;
-        this.squishedCallHeight = config.squishedCallHeight || 1;
-        this.expandedCallHeight = config.expandedCallHeight || 10;
-        this.expandedVGap = config.expandedVGap !== undefined ? config.expandedVGap : 2;
-        this.squishedVGap = config.squishedVGap !== undefined ? config.squishedVGap : 1;
-        this.expandedGroupGap = config.expandedGroupGap || 10;
-        this.squishedGroupGap = config.squishedGroupGap || 5;
-        this.featureHeight = config.featureHeight || 14;
-        this.visibilityWindow = config.visibilityWindow;
+
         this.featureSource = FeatureSource(config, this.browser.genome);
-        this.noGenotypeColor = config.noGenotypeColor || "rgb(200,180,180)";
-        this.noCallColor = config.noCallColor || "rgb(225, 225, 225)";
-        this.nonRefColor = config.nonRefColor || "rgb(200, 200, 215)";
-        this.mixedColor = config.mixedColor || "rgb(200, 220, 200)";
-        this.homrefColor = config.homrefColor || "rgb(200, 200, 200)";
-        this.homvarColor = config.homvarColor || "rgb(17,248,254)";
-        this.hetvarColor = config.hetvarColor || "rgb(34,12,253)";
-        this.sortDirection = "ASC";
-        this.type = config.type || "variant";
-
-        this.colorBy = config.colorBy;   // Can be undefined => default
+
         this._initColorBy = config.colorBy;
         if (config.colorTable) {
             this.colorTables = new Map();
             this.colorTables.set(config.colorBy, new ColorTable(config.colorTable));
         }
-
         this._strokecolor = config.strokecolor;
         this._context_hook = config.context_hook;
 
-        this.showGenotypes = config.showGenotypes === undefined ? true : config.showGenotypes;
 
         // The number of variant rows are computed dynamically, but start with "1" by default
         this.variantRowCount(1);
@@ -46697,7 +46740,7 @@ class VariantTrack extends TrackBase {
     async postInit() {
 
         this.header = await this.getHeader();   // cricital, don't remove'
-        if(this.disposed) return;   // This track was removed during async load
+        if (this.disposed) return   // This track was removed during async load
         if (undefined === this.visibilityWindow && this.config.indexed !== false) {
             const fn = isFile(this.config.url) ? this.config.url.name : this.config.url;
             if (isString(fn) && fn.toLowerCase().includes("gnomad")) {
@@ -46800,7 +46843,7 @@ class VariantTrack extends TrackBase {
         this.variantBandHeight = TOP_MARGIN + rowCount * (variantHeight + vGap);
 
         let callSets = this.callSets;
-        if(!callSets && this._f) {
+        if (!callSets && this._f) {
             callSets = this._f.callSets;   // "Complementary" variant for structural variants
         }
         const nCalls = this.getCallsetsLength();
@@ -46840,9 +46883,9 @@ class VariantTrack extends TrackBase {
 
                 //only paint stroke if a color is defined
                 let strokecolor = this.getVariantStrokecolor(variant);
-                if (strokecolor){
-                  context.strokeStyle = strokecolor;
-                  context.strokeRect(x, y, w, h);
+                if (strokecolor) {
+                    context.strokeStyle = strokecolor;
+                    context.strokeRect(x, y, w, h);
                 }
 
                 // call hook if _context_hook fn is defined
@@ -46858,7 +46901,7 @@ class VariantTrack extends TrackBase {
                     this.sampleHeight = nVariantRows * (callHeight + vGap);  // For each sample, there is a call for each variant at this position
 
                     let sampleNumber = 0;
-                    if(callSets && variant.calls) {
+                    if (callSets && variant.calls) {
                         for (let callSet of callSets) {
                             const call = variant.calls[callSet.id];
                             if (call) {
@@ -46934,13 +46977,12 @@ class VariantTrack extends TrackBase {
         } else if ("MIXED" === v.type) {
             variantColor = this.mixedColor;
         } else {
-            variantColor = this.defaultColor;
+            variantColor = this.color;
         }
         return variantColor
     }
 
 
-
     getVariantStrokecolor(variant) {
 
         const v = variant._f || variant;
@@ -46956,13 +46998,13 @@ class VariantTrack extends TrackBase {
 
     callContextHook(variant, context, x, y, w, h) {
         if (this._context_hook) {
-          if (typeof this._context_hook === "function") {
-            const v = variant._f || variant;
+            if (typeof this._context_hook === "function") {
+                const v = variant._f || variant;
 
-            context.save();
-            this._context_hook(v, context, x, y, w, h);
-            context.restore();
-          }
+                context.save();
+                this._context_hook(v, context, x, y, w, h);
+                context.restore();
+            }
         }
     }
 
@@ -47006,7 +47048,7 @@ class VariantTrack extends TrackBase {
      */
     popupData(clickState, featureList) {
 
-        if(featureList === undefined) featureList = this.clickedFeatures(clickState);
+        if (featureList === undefined) featureList = this.clickedFeatures(clickState);
         const genomicLocation = clickState.genomicLocation;
         const genomeID = this.browser.genome.id;
         const sampleInformation = this.browser.sampleInformation;
@@ -47234,12 +47276,12 @@ class VariantTrack extends TrackBase {
     sendChordsForViewport(viewport) {
         const refFrame = viewport.referenceFrame;
         let inView;
-        if("all" === refFrame.chr) {
+        if ("all" === refFrame.chr) {
             const all = this.featureSource.getAllFeatures();
             const arrays = Object.keys(all).map(k => all[k]);
             inView = [].concat(...arrays);
         } else {
-          inView = this.featureSource.featureCache.queryFeatures(refFrame.chr, refFrame.start, refFrame.end);
+            inView = this.featureSource.featureCache.queryFeatures(refFrame.chr, refFrame.start, refFrame.end);
 
         }
 
@@ -57477,7 +57519,7 @@ async function search(browser, string) {
         let locusObject = parseLocusString(browser, locus);
 
         if (!locusObject) {
-            const feature = browser.genome.featureDB[locus.toUpperCase()];
+            const feature = browser.genome.featureDB.get(locus.toUpperCase());
             if (feature) {
                 locusObject = {
                     chr: feature.chr,
@@ -59330,7 +59372,7 @@ class ROITable extends RegionTableBase {
 
     renderTable(records) {
 
-        Array.from(this.rowContainerDOM.querySelectorAll('.igv-roi-table-row')).forEach(el => el.remove());
+        Array.from(this.tableRowContainer.querySelectorAll('.igv-roi-table-row')).forEach(el => el.remove());
 
         if (records.length > 0) {
 
@@ -59338,7 +59380,7 @@ class ROITable extends RegionTableBase {
 
             for (let record of sortedRecords) {
                 const row = this.tableRowDOM(record);
-                this.rowContainerDOM.appendChild(row);
+                this.tableRowContainer.appendChild(row);
             }
 
         }
@@ -59378,14 +59420,14 @@ class ROITable extends RegionTableBase {
 
         event.stopPropagation();
 
-        const selected = this.container.querySelectorAll('.igv-roi-table-row-selected');
+        const selected = this.tableDOM.querySelectorAll('.igv-roi-table-row-selected');
         const loci = [];
         for (let el of selected) {
             const { locus } = parseRegionKey(el.dataset.region);
             loci.push(locus);
         }
 
-        for (let el of this.container.querySelectorAll('.igv-roi-table-row')) {
+        for (let el of this.tableDOM.querySelectorAll('.igv-roi-table-row')) {
             el.classList.remove('igv-roi-table-row-selected');
         }
 
@@ -60923,6 +60965,7 @@ class Browser {
 
     updateLocusSearchWidget() {
 
+        if(!this.referenceFrameList) return
         const referenceFrameList = this.referenceFrameList;
 
         // Update end position of reference frames based on pixel widths.  This is hacky, but its been done here
@@ -60976,6 +61019,8 @@ class Browser {
 
     async zoomWithScaleFactor(scaleFactor, centerBPOrUndefined, referenceFrameOrUndefined) {
 
+        if(!this.referenceFrameList) return
+
         const viewportWidth = this.calculateViewportWidth(this.referenceFrameList.length);
 
         let referenceFrames = referenceFrameOrUndefined ? [referenceFrameOrUndefined] : this.referenceFrameList;
@@ -60994,6 +61039,8 @@ class Browser {
      */
     async addMultiLocusPanel(chr, start, end, referenceFrameLeft) {
 
+        if(!this.referenceFrameList) return
+
         // account for reduced viewport width as a result of adding right mate pair panel
         const viewportWidth = this.calculateViewportWidth(1 + this.referenceFrameList.length);
         const scaleFactor = this.calculateViewportWidth(this.referenceFrameList.length) / this.calculateViewportWidth(1 + this.referenceFrameList.length);
@@ -61607,6 +61654,8 @@ class Browser {
  */
 async function resize() {
 
+    if(!this.referenceFrameList) return
+
     const viewportWidth = this.calculateViewportWidth(this.referenceFrameList.length);
 
     for (let referenceFrame of this.referenceFrameList) {
@@ -62011,7 +62060,7 @@ async function createTrack(config, browser) {
 
 function embedCSS() {
 
-    var css = '.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: 210px;\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}\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  height: 32px;\n  line-height: 32px;\n}\n.igv-navbar .igv-navbar-right-container .igv-navbar-toggle-button-container {\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-right-container .igv-navbar-toggle-button-container div {\n  margin-left: 0;\n  margin-right: 4px;\n}\n.igv-navbar .igv-navbar-right-container .igv-navbar-toggle-button-container div:last-child {\n  margin-left: 0;\n  margin-right: 0;\n}\n.igv-navbar .igv-navbar-right-container .igv-navbar-toggle-button-container-750 {\n  display: none;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget {\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 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: 24px;\n  width: 24px;\n  margin-left: unset;\n  margin-right: 8px;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget div:last-child {\n  height: 24px;\n  width: 24px;\n  margin-left: 8px;\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: 24px;\n  width: 24px;\n  margin-left: unset;\n  margin-right: 8px;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 div:last-child {\n  height: 24px;\n  width: 24px;\n  margin-left: 8px;\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-clicked {\n  color: white;\n  background-color: #737373;\n}\n\n.igv-navbar-button:hover {\n  cursor: pointer;\n}\n\n.igv-zoom-in-notice-container {\n  z-index: 1024;\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: 1;\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: 1;\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: 4096;\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-next-gen {\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-next-gen > 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-next-gen > div:first-child > div {\n  margin-right: 4px;\n  height: 12px;\n  width: 12px;\n  color: #7F7F7F;\n}\n.igv-roi-menu-next-gen > div:first-child > div:hover {\n  cursor: pointer;\n  color: #444;\n}\n.igv-roi-menu-next-gen > 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-next-gen > 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-next-gen > div:last-child > div:not(:first-child):hover {\n  background-color: rgba(127, 127, 127, 0.1);\n}\n.igv-roi-menu-next-gen > 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-next-gen > 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  width: fit-content;\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  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\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  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  height: fit-content;\n  padding: 4px;\n  margin-left: 4px;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-roi-table > .igv-roi-table-goto-explainer {\n  margin-left: 4px;\n  color: #7F7F7F;\n  font-style: italic;\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  white-space: nowrap;\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  resize: both;\n  overflow: scroll;\n  min-height: 72px;\n  height: 144px;\n  max-height: 480px;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\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  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  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: 44px;\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 {\n  position: absolute;\n  z-index: 1024;\n  width: 144px;\n  border-color: #7f7f7f;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.igv-roi-menu > div:not(:last-child) {\n  border-bottom-color: rgba(128, 128, 128, 0.5);\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n}\n.igv-roi-menu > div:first-child {\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-top-color: transparent;\n  border-top-style: solid;\n  border-top-width: 0;\n}\n.igv-roi-menu > 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: 0;\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}\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-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-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  margin-top: 5px;\n  width: 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  background-color: #c4c4c4;\n}\n.igv-track-drag-column .igv-track-drag-handle-hover {\n  background-color: #787878;\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=dom.css.map */\n';
+    var css = '.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: 210px;\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}\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  height: 32px;\n  line-height: 32px;\n}\n.igv-navbar .igv-navbar-right-container .igv-navbar-toggle-button-container {\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-right-container .igv-navbar-toggle-button-container div {\n  margin-left: 0;\n  margin-right: 4px;\n}\n.igv-navbar .igv-navbar-right-container .igv-navbar-toggle-button-container div:last-child {\n  margin-left: 0;\n  margin-right: 0;\n}\n.igv-navbar .igv-navbar-right-container .igv-navbar-toggle-button-container-750 {\n  display: none;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget {\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 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: 24px;\n  width: 24px;\n  margin-left: unset;\n  margin-right: 8px;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget div:last-child {\n  height: 24px;\n  width: 24px;\n  margin-left: 8px;\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: 24px;\n  width: 24px;\n  margin-left: unset;\n  margin-right: 8px;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 div:last-child {\n  height: 24px;\n  width: 24px;\n  margin-left: 8px;\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-clicked {\n  color: white;\n  background-color: #737373;\n}\n\n.igv-navbar-button:hover {\n  cursor: pointer;\n}\n\n.igv-zoom-in-notice-container {\n  z-index: 1024;\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: 1;\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: 1;\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: 4096;\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-next-gen {\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-next-gen > 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-next-gen > div:first-child > div {\n  margin-right: 4px;\n  height: 12px;\n  width: 12px;\n  color: #7F7F7F;\n}\n.igv-roi-menu-next-gen > div:first-child > div:hover {\n  cursor: pointer;\n  color: #444;\n}\n.igv-roi-menu-next-gen > 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-next-gen > 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-next-gen > div:last-child > div:not(:first-child):hover {\n  background-color: rgba(127, 127, 127, 0.1);\n}\n.igv-roi-menu-next-gen > 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-next-gen > 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  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  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\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  overflow: auto;\n  resize: both;\n  max-width: 1600px;\n  height: 360px;\n  background-color: transparent;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\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  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: 44px;\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 {\n  position: absolute;\n  z-index: 1024;\n  width: 144px;\n  border-color: #7f7f7f;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.igv-roi-menu > div:not(:last-child) {\n  border-bottom-color: rgba(128, 128, 128, 0.5);\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n}\n.igv-roi-menu > div:first-child {\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  border-top-color: transparent;\n  border-top-style: solid;\n  border-top-width: 0;\n}\n.igv-roi-menu > 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: 0;\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}\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-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-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  margin-top: 5px;\n  width: 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  background-color: #c4c4c4;\n}\n.igv-track-drag-column .igv-track-drag-handle-hover {\n  background-color: #787878;\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=dom.css.map */\n';
 
     var style = document.createElement('style');
     style.setAttribute('type', 'text/css');