igv 2.15.2 → 2.15.4

package/dist/igv.js

@@ -18366,7 +18366,7 @@
 
     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 {
@@ -18395,7 +18395,8 @@
         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: {
@@ -18876,29 +18877,41 @@
             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.
@@ -23937,7 +23950,7 @@
         }
     };
 
-    const _version = "2.15.2";
+    const _version = "2.15.4";
     function version() {
         return _version
     }
@@ -23989,7 +24002,7 @@
 
             // 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
@@ -24091,7 +24104,7 @@
             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) {
@@ -24295,6 +24308,40 @@
             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) {
@@ -27022,8 +27069,6 @@
      * 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("))) ?
@@ -27042,6 +27087,15 @@
      */
     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);
@@ -27055,15 +27109,25 @@
          */
         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;
@@ -27073,29 +27137,15 @@
                 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.
@@ -27152,17 +27202,18 @@
         }
 
         /**
-         * 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];
                 }
             }
@@ -27176,8 +27227,18 @@
                 }
             }
 
-            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) {
@@ -27185,22 +27246,6 @@
                 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
         }
 
@@ -27496,7 +27541,7 @@
          * @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
         }
 
         /**
@@ -31900,6 +31945,7 @@
 
             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;
@@ -31933,6 +31979,11 @@
                     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() {
@@ -32073,39 +32124,13 @@
                 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;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
     }
 
     /*
@@ -32921,7 +32946,8 @@
 
         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();
@@ -32931,6 +32957,7 @@
 
         if (chromId >= chrIdx1 && chromId <= chrIdx2) {
 
+            let idx = 0;
             while (itemCount-- > 0) {
                 let value;
                 switch (type) {
@@ -32946,8 +32973,9 @@
                         break
                     case 3:  // Fixed step
                         value = binaryParser.getFloat();
+                        chromStart = blockStart + idx * itemStep;
                         chromEnd = chromStart + itemSpan;
-                        chromStart += itemStep;
+                        idx++;
                         break
                 }
 
@@ -32957,8 +32985,8 @@
                 if (Number.isFinite(value)) {
                     const chr = chrDict[chromId];
                     featureArray.push({chr: chr, start: chromStart, end: chromEnd, value: value});
-
                 }
+
             }
         }
     }
@@ -33094,6 +33122,7 @@
             this.genome = genome;
             this.format = config.format || "bigwig";
             this.wgValues = {};
+            this.queryable = true;
         }
 
         async getFeatures({chr, start, end, bpPerPixel, windowFunction}) {
@@ -33635,6 +33664,7 @@
             this.genome = genome;
             this.windowFunction = config.windowFunction || "mean";
             this.reader = new TDFReader(config, genome);
+            this.queryable = true;
         }
 
         async getFeatures({chr, start, end, bpPerPixel}) {
@@ -33844,8 +33874,8 @@
             this.config = config;
             this.genome = genome;
             this.queryable = false;
+            this.searchable = config.searchable !== false;  // searchable by default
             this.updateFeatures(config.features);
-
         }
 
         updateFeatures(features) {
@@ -33855,6 +33885,10 @@
                 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);
+            }
         }
 
         /**
@@ -40048,8 +40082,8 @@
 
             // 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;
@@ -40373,6 +40407,17 @@
 
     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);
         }
@@ -40380,12 +40425,8 @@
         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) {
@@ -40397,12 +40438,6 @@
                     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;
@@ -40439,9 +40474,6 @@
                     }
                 }
             }
-
-            //UCSC useScore option
-            this.useScore = config.useScore;
         }
 
         async postInit() {
@@ -40805,7 +40837,7 @@
             } 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) {
@@ -40871,21 +40903,27 @@
 
             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;
 
         }
 
@@ -40893,12 +40931,12 @@
 
             // 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();
@@ -40917,46 +40955,51 @@
             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'});
@@ -40998,7 +41041,7 @@
         }
 
         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();
             }
@@ -41010,23 +41053,23 @@
         }
 
         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;
@@ -41042,41 +41085,35 @@
 
         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`;
 
             }
@@ -41106,13 +41143,13 @@
 
         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);
                 }
 
             }
@@ -41160,7 +41197,7 @@
 
             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) {
@@ -41172,7 +41209,7 @@
                 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');
             }
 
@@ -41194,16 +41231,16 @@
     &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;
 
@@ -41212,8 +41249,19 @@
         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);
@@ -41249,7 +41297,7 @@
                         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();
@@ -41298,21 +41346,34 @@
 
     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}`);
+        }
 
     }
 
@@ -41343,8 +41404,6 @@
 
     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)";
@@ -41352,35 +41411,37 @@
 
     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
@@ -41393,14 +41454,12 @@
                 }
             }
 
-            // 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;
             }
         }
 
@@ -41487,16 +41546,15 @@
          * @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 {
@@ -41511,12 +41569,12 @@
 
         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);
             // }
         }
 
@@ -41525,7 +41583,7 @@
         }
 
         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)
@@ -41540,7 +41598,7 @@
         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);
@@ -41549,7 +41607,7 @@
         }
 
         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()
@@ -41589,8 +41647,8 @@
             // 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);
                 }
@@ -41904,7 +41962,6 @@
         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;
@@ -41919,6 +41976,10 @@
 
         }
 
+        get height() {
+            return this.parent.coverageTrackHeight
+        }
+
         draw(options) {
 
             const pixelTop = options.pixelTop;
@@ -42665,18 +42726,21 @@
                     // 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: () => {
@@ -42688,7 +42752,7 @@
                                 }
                             });
                         }
-                        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: () => {
@@ -44610,25 +44674,34 @@
      * 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;
@@ -44640,18 +44713,16 @@
                 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() {
@@ -44741,7 +44812,7 @@
             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(")) {
@@ -44885,7 +44956,7 @@
          */
 
         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
         }
 
@@ -44896,20 +44967,6 @@
             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
-        }
     }
 
     /**
@@ -45797,6 +45854,17 @@
 
     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);
         }
@@ -45804,16 +45872,10 @@
         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};
 
@@ -45825,7 +45887,6 @@
                 this.valueColumn = "score";
             }
 
-            this.logScale = config.logScale !== false;   // i.e. defaul to true (undefined => true)
             if (config.max) {
                 this.dataRange = {
                     min: config.min || 0,
@@ -45850,7 +45911,7 @@
 
             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
@@ -45923,7 +45984,7 @@
                     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;
@@ -46268,7 +46329,7 @@
         contextMenuItemList(clickState) {
 
             // Experimental JBrowse feature
-            if (this.browser.circularView ) {
+            if (this.browser.circularView) {
                 const viewport = clickState.viewport;
                 const list = [];
 
@@ -46297,7 +46358,7 @@
 
             // 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);
@@ -46333,7 +46394,7 @@
 
         popupData(clickState, features) {
 
-            if(features === undefined) features = this.clickedFeatures(clickState);
+            if (features === undefined) features = this.clickedFeatures(clickState);
 
             const data = [];
             for (let feature of features) {
@@ -46357,7 +46418,7 @@
                     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 {
@@ -46379,7 +46440,7 @@
 
             // 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");
@@ -46425,26 +46486,6 @@
             }
             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) {
@@ -46651,6 +46692,31 @@
 
     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);
         }
@@ -46659,41 +46725,18 @@
 
             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);
@@ -46703,7 +46746,7 @@
         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")) {
@@ -46806,7 +46849,7 @@
             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();
@@ -46846,9 +46889,9 @@
 
                     //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
@@ -46864,7 +46907,7 @@
                         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) {
@@ -46940,13 +46983,12 @@
             } else if ("MIXED" === v.type) {
                 variantColor = this.mixedColor;
             } else {
-                variantColor = this.defaultColor;
+                variantColor = this.color;
             }
             return variantColor
         }
 
 
-
         getVariantStrokecolor(variant) {
 
             const v = variant._f || variant;
@@ -46962,13 +47004,13 @@
 
         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();
+                }
             }
         }
 
@@ -47012,7 +47054,7 @@
          */
         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;
@@ -47240,12 +47282,12 @@
         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);
 
             }
 
@@ -57483,7 +57525,7 @@
             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,
@@ -59336,7 +59378,7 @@
 
         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) {
 
@@ -59344,7 +59386,7 @@
 
                 for (let record of sortedRecords) {
                     const row = this.tableRowDOM(record);
-                    this.rowContainerDOM.appendChild(row);
+                    this.tableRowContainer.appendChild(row);
                 }
 
             }
@@ -59384,14 +59426,14 @@
 
             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');
             }
 
@@ -60929,6 +60971,7 @@
 
         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
@@ -60982,6 +61025,8 @@
 
         async zoomWithScaleFactor(scaleFactor, centerBPOrUndefined, referenceFrameOrUndefined) {
 
+            if(!this.referenceFrameList) return
+
             const viewportWidth = this.calculateViewportWidth(this.referenceFrameList.length);
 
             let referenceFrames = referenceFrameOrUndefined ? [referenceFrameOrUndefined] : this.referenceFrameList;
@@ -61000,6 +61045,8 @@
          */
         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);
@@ -61613,6 +61660,8 @@
      */
     async function resize() {
 
+        if(!this.referenceFrameList) return
+
         const viewportWidth = this.calculateViewportWidth(this.referenceFrameList.length);
 
         for (let referenceFrame of this.referenceFrameList) {
@@ -62017,7 +62066,7 @@
 
     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');