igv 2.13.1 → 2.13.3

package/dist/igv.esm.js

@@ -8239,7 +8239,7 @@ function attachDialogCloseHandlerWithParent$1(parent, closeHandler) {
  * @param x
  * @returns {boolean}
  */
-function isString$3(x) {
+function isString$2(x) {
     return typeof x === "string" || x instanceof String
 }
 
@@ -8301,13 +8301,6 @@ function stripQuotes$1(str) {
     return str;
 }
 
-function hashCode$1(s) {
-    return s.split("").reduce(function (a, b) {
-        a = ((a << 5) - a) + b.charCodeAt(0);
-        return a & a
-    }, 0);
-}
-
 function capitalize(str) {
     return str.length > 0 ? str.charAt(0).toUpperCase() + str.slice(1) : str;
 }
@@ -8744,7 +8737,7 @@ function getFilename$1(urlOrFile) {
 
     if (urlOrFile.name !== undefined) {
         return urlOrFile.name
-    } else if (isString$3(urlOrFile)) {
+    } else if (isString$2(urlOrFile)) {
 
         let index = urlOrFile.lastIndexOf("/");
         let filename = index < 0 ? urlOrFile : urlOrFile.substr(index + 1);
@@ -17904,7 +17897,9 @@ const MenuUtils = {
             menuItems.push('<hr/>');
             menuItems.push(colorPickerMenuItem({trackView, label: "Set track color", option: "color"}));
             menuItems.push(unsetColorMenuItem({trackView, label: "Unset track color"}));
-            menuItems.push(colorPickerMenuItem({trackView, label: "Set alt color", option: "altColor"}));
+           if(trackView.track.config.type === 'wig' || trackView.track.config.type === 'annotation') {
+               menuItems.push(colorPickerMenuItem({trackView, label: "Set alt color", option: "altColor"}));
+           }
         }
 
         if (trackView.track.menuItemList) {
@@ -18190,6 +18185,455 @@ function getTrackLabelText(track) {
     return txt
 }
 
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2016-2017 The Regents of the University of California
+ * Author: Jim Robinson
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+class DataRangeDialog {
+
+    constructor(browser, $parent, alert) {
+
+        this.browser = browser;
+
+        // dialog container
+        this.$container = $$1("<div>", {class: 'igv-generic-dialog-container'});
+        $parent.append(this.$container);
+        this.$container.offset({left: 0, top: 0});
+
+        // dialog header
+        const $header = $$1("<div>", {class: 'igv-generic-dialog-header'});
+        this.$container.append($header);
+        attachDialogCloseHandlerWithParent$1($header[0], () => {
+            this.$minimum_input.val(undefined);
+            this.$maximum_input.val(undefined);
+            this.$container.offset({left: 0, top: 0});
+            this.$container.hide();
+        });
+
+
+        // minimun
+        this.$minimum = $$1("<div>", {class: 'igv-generic-dialog-label-input'});
+        this.$container.append(this.$minimum);
+        const $mindiv = $$1('<div>');
+        $mindiv.text('Minimum');
+        this.$minimum.append($mindiv);
+        this.$minimum_input = $$1("<input>");
+        this.$minimum.append(this.$minimum_input);
+
+
+        // maximum
+        this.$maximum = $$1("<div>", {class: 'igv-generic-dialog-label-input'});
+        this.$container.append(this.$maximum);
+        const $maxdiv = $$1('<div>');
+        $maxdiv.text('Maximum');
+        this.$maximum.append($maxdiv);
+        this.$maximum_input = $$1("<input>");
+        this.$maximum.append(this.$maximum_input);
+
+        // ok | cancel
+        const $buttons = $$1("<div>", {class: 'igv-generic-dialog-ok-cancel'});
+        this.$container.append($buttons);
+
+        // ok
+        this.$ok = $$1("<div>");
+        $buttons.append(this.$ok);
+        this.$ok.text('OK');
+
+        // cancel
+        this.$cancel = $$1("<div>");
+        $buttons.append(this.$cancel);
+        this.$cancel.text('Cancel');
+
+        this.$cancel.on('click', () => {
+            this.$minimum_input.val(undefined);
+            this.$maximum_input.val(undefined);
+            this.$container.offset({left: 0, top: 0});
+            this.$container.hide();
+        });
+
+        //this.$container.draggable({ handle:$header.get(0) });
+        makeDraggable$1(this.$container.get(0), $header.get(0));
+
+        this.$container.hide();
+    }
+
+    configure(trackView) {
+
+        const dataRange = trackView.dataRange();
+        let min;
+        let max;
+        if (dataRange) {
+            min = dataRange.min;
+            max = dataRange.max;
+        } else {
+            min = 0;
+            max = 100;
+        }
+
+        this.$minimum_input.val(min);
+        this.$maximum_input.val(max);
+
+        this.$minimum_input.unbind();
+        this.$minimum_input.on('keyup', (e) => {
+            if (13 === e.keyCode) {
+                this.processResults(trackView);
+            }
+        });
+
+        this.$maximum_input.unbind();
+        this.$maximum_input.on('keyup', (e) => {
+            if (13 === e.keyCode) {
+                this.processResults(trackView);
+            }
+        });
+
+        this.$ok.unbind();
+        this.$ok.on('click', (e) => {
+            this.processResults(trackView);
+        });
+    }
+
+
+    processResults(trackView) {
+
+        const min = Number(this.$minimum_input.val());
+        const max = Number(this.$maximum_input.val());
+        if (isNaN(min) || isNaN(max)) {
+            this.browser.alert.present(new Error('Must input numeric values'), undefined);
+        } else {
+            trackView.setDataRange(min, max);
+        }
+
+        this.$minimum_input.val(undefined);
+        this.$maximum_input.val(undefined);
+        this.$container.offset({left: 0, top: 0});
+        this.$container.hide();
+    }
+
+    present($parent) {
+
+        const offset_top = $parent.offset().top;
+        const scroll_top = $$1('body').scrollTop();
+
+        this.$container.offset({left: $parent.width() - this.$container.width(), top: (offset_top + scroll_top)});
+        this.$container.show();
+    }
+}
+
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2014 Broad Institute
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of ctx software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and ctx permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+
+const IGVGraphics = {
+
+    configureHighDPICanvas: function (ctx, w, h) {
+
+        const scaleFactor = window.devicePixelRatio;
+        // const scaleFactor = 1
+
+        ctx.canvas.style.width = (`${w}px`);
+        ctx.canvas.width = Math.floor(scaleFactor * w);
+
+        ctx.canvas.style.height = (`${h}px`);
+        ctx.canvas.height = Math.floor(scaleFactor * h);
+
+        ctx.scale(scaleFactor, scaleFactor);
+
+    },
+
+    setProperties: function (ctx, properties) {
+
+        for (var key in properties) {
+            if (properties.hasOwnProperty(key)) {
+                var value = properties[key];
+                ctx[key] = value;
+            }
+        }
+    },
+
+    strokeLine: function (ctx, x1, y1, x2, y2, properties) {
+
+        x1 = Math.floor(x1) + 0.5;
+        y1 = Math.floor(y1) + 0.5;
+        x2 = Math.floor(x2) + 0.5;
+        y2 = Math.floor(y2) + 0.5;
+
+        if (properties) {
+            ctx.save();
+            IGVGraphics.setProperties(ctx, properties);
+        }
+
+        ctx.beginPath();
+        ctx.moveTo(x1, y1);
+        ctx.lineTo(x2, y2);
+        ctx.stroke();
+
+        if (properties) ctx.restore();
+    },
+
+    fillRect: function (ctx, x, y, w, h, properties) {
+        x = Math.round(x);
+        y = Math.round(y);
+
+        if (properties) {
+            ctx.save();
+            IGVGraphics.setProperties(ctx, properties);
+        }
+
+        ctx.fillRect(x, y, w, h);
+
+        if (properties) ctx.restore();
+    },
+
+    fillPolygon: function (ctx, x, y, properties) {
+        if (properties) {
+            ctx.save();
+            IGVGraphics.setProperties(ctx, properties);
+        }
+        doPath(ctx, x, y);
+        ctx.fill();
+        if (properties) ctx.restore();
+    },
+
+    strokePolygon: function (ctx, x, y, properties) {
+        if (properties) {
+            ctx.save();
+            IGVGraphics.setProperties(ctx, properties);
+        }
+        doPath(ctx, x, y);
+        ctx.stroke();
+        if (properties) ctx.restore();
+    },
+
+    fillText: function (ctx, text, x, y, properties, transforms) {
+
+        if (properties || transforms) {
+            ctx.save();
+        }
+
+        if (properties) {
+            IGVGraphics.setProperties(ctx, properties);
+        }
+
+        if (transforms) {
+            // Slow path with context saving and extra translate
+            ctx.translate(x, y);
+
+            for (var transform in transforms) {
+                var value = transforms[transform];
+
+                // TODO: Add error checking for robustness
+                if (transform === 'translate') {
+                    ctx.translate(value['x'], value['y']);
+                }
+                if (transform === 'rotate') {
+                    ctx.rotate(value['angle'] * Math.PI / 180);
+                }
+            }
+
+            ctx.fillText(text, 0, 0);
+        } else {
+            ctx.fillText(text, x, y);
+        }
+
+        if (properties || transforms) ctx.restore();
+    },
+
+    strokeText: function (ctx, text, x, y, properties, transforms) {
+
+
+        if (properties || transforms) {
+            ctx.save();
+        }
+
+        if (properties) {
+            IGVGraphics.setProperties(ctx, properties);
+        }
+
+        if (transforms) {
+            ctx.translate(x, y);
+
+            for (var transform in transforms) {
+                var value = transforms[transform];
+
+                // TODO: Add error checking for robustness
+                if (transform === 'translate') {
+                    ctx.translate(value['x'], value['y']);
+                }
+                if (transform === 'rotate') {
+                    ctx.rotate(value['angle'] * Math.PI / 180);
+                }
+            }
+
+            ctx.strokeText(text, 0, 0);
+        } else {
+            ctx.strokeText(text, x, y);
+        }
+
+        if (properties || transforms) ctx.restore();
+    },
+
+    strokeCircle: function (ctx, x, y, radius, properties) {
+        if (properties) {
+            ctx.save();
+            IGVGraphics.setProperties(ctx, properties);
+        }
+        ctx.beginPath();
+        ctx.arc(x, y, radius, 0, 2 * Math.PI);
+        ctx.stroke();
+        if (properties) ctx.restore();
+    },
+
+    fillCircle: function (ctx, x, y, radius, properties) {
+        if (properties) {
+            ctx.save();
+            IGVGraphics.setProperties(ctx, properties);
+        }
+        ctx.beginPath();
+        ctx.arc(x, y, radius, 0, 2 * Math.PI);
+        ctx.fill();
+        if (properties) ctx.restore();
+    },
+
+    drawArrowhead: function (ctx, x, y, size, lineWidth) {
+
+        ctx.save();
+        if (!size) {
+            size = 5;
+        }
+        if (lineWidth) {
+            ctx.lineWidth = lineWidth;
+        }
+        ctx.beginPath();
+        ctx.moveTo(x, y - size / 2);
+        ctx.lineTo(x, y + size / 2);
+        ctx.lineTo(x + size, y);
+        ctx.lineTo(x, y - size / 2);
+        ctx.closePath();
+        ctx.fill();
+        ctx.restore();
+    },
+
+    dashedLine: function (ctx, x1, y1, x2, y2, dashLen, properties = {}) {
+        if (dashLen === undefined) dashLen = 2;
+        ctx.setLineDash([dashLen, dashLen]);
+        IGVGraphics.strokeLine(ctx, x1, y1, x2, y2, properties);
+        ctx.setLineDash([]);
+    },
+
+    roundRect: function (ctx, x, y, width, height, radius, fill, stroke) {
+
+        if (typeof stroke == "undefined") {
+            stroke = true;
+        }
+        if (typeof radius === "undefined") {
+            radius = 5;
+        }
+        ctx.beginPath();
+        ctx.moveTo(x + radius, y);
+        ctx.lineTo(x + width - radius, y);
+        ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+        ctx.lineTo(x + width, y + height - radius);
+        ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+        ctx.lineTo(x + radius, y + height);
+        ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+        ctx.lineTo(x, y + radius);
+        ctx.quadraticCurveTo(x, y, x + radius, y);
+        ctx.closePath();
+        if (stroke) {
+            ctx.stroke();
+        }
+        if (fill) {
+            ctx.fill();
+        }
+    },
+    polygon: function (ctx, x, y, fill, stroke) {
+
+        if (typeof stroke == "undefined") {
+            stroke = true;
+        }
+
+        ctx.beginPath();
+        var len = x.length;
+        ctx.moveTo(x[0], y[0]);
+        for (var i = 1; i < len; i++) {
+            ctx.lineTo(x[i], y[i]);
+            // this.moveTo(x[i], y[i]);
+        }
+
+        ctx.closePath();
+        if (stroke) {
+            ctx.stroke();
+        }
+        if (fill) {
+            ctx.fill();
+        }
+    }
+
+
+};
+
+function doPath(ctx, x, y) {
+
+
+    var i, len = x.length;
+    for (i = 0; i < len; i++) {
+        x[i] = Math.round(x[i]);
+        y[i] = Math.round(y[i]);
+    }
+
+    ctx.beginPath();
+    ctx.moveTo(x[0], y[0]);
+    for (i = 1; i < len; i++) {
+        ctx.lineTo(x[i], y[i]);
+    }
+    ctx.closePath();
+}
+
 function div(options) {
     return create("div", options);
 }
@@ -18534,24 +18978,6 @@ class AlertDialog {
     }
 }
 
-// The global Alert dialog
-
-let alertDialog;
-
-const Alert = {
-
-    init(root, config={}) {
-	    alertDialog = new AlertDialog(root, config);
-    },
-
-    presentAlert (alert, callback) {
-        if(!alertDialog) {
-            this.init(document.body);
-        }
-        alertDialog.present(alert, callback);
-    },
-};
-
 class InputDialog {
 
     constructor(parent) {
@@ -19903,451 +20329,15 @@ if (typeof document !== 'undefined') {
     }
 }
 
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2016-2017 The Regents of the University of California
- * Author: Jim Robinson
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-
-class DataRangeDialog {
-
-    constructor($parent, alert) {
-
-        // dialog container
-        this.$container = $$1("<div>", {class: 'igv-generic-dialog-container'});
-        $parent.append(this.$container);
-        this.$container.offset({left: 0, top: 0});
-
-        // dialog header
-        const $header = $$1("<div>", {class: 'igv-generic-dialog-header'});
-        this.$container.append($header);
-        attachDialogCloseHandlerWithParent$1($header[0], () => {
-            this.$minimum_input.val(undefined);
-            this.$maximum_input.val(undefined);
-            this.$container.offset({left: 0, top: 0});
-            this.$container.hide();
-        });
-
-
-        // minimun
-        this.$minimum = $$1("<div>", {class: 'igv-generic-dialog-label-input'});
-        this.$container.append(this.$minimum);
-        const $mindiv = $$1('<div>');
-        $mindiv.text('Minimum');
-        this.$minimum.append($mindiv);
-        this.$minimum_input = $$1("<input>");
-        this.$minimum.append(this.$minimum_input);
-
-
-        // maximum
-        this.$maximum = $$1("<div>", {class: 'igv-generic-dialog-label-input'});
-        this.$container.append(this.$maximum);
-        const $maxdiv = $$1('<div>');
-        $maxdiv.text('Maximum');
-        this.$maximum.append($maxdiv);
-        this.$maximum_input = $$1("<input>");
-        this.$maximum.append(this.$maximum_input);
-
-        // ok | cancel
-        const $buttons = $$1("<div>", {class: 'igv-generic-dialog-ok-cancel'});
-        this.$container.append($buttons);
-
-        // ok
-        this.$ok = $$1("<div>");
-        $buttons.append(this.$ok);
-        this.$ok.text('OK');
-
-        // cancel
-        this.$cancel = $$1("<div>");
-        $buttons.append(this.$cancel);
-        this.$cancel.text('Cancel');
-
-        this.$cancel.on('click', () => {
-            this.$minimum_input.val(undefined);
-            this.$maximum_input.val(undefined);
-            this.$container.offset({left: 0, top: 0});
-            this.$container.hide();
-        });
-
-        //this.$container.draggable({ handle:$header.get(0) });
-        makeDraggable$1(this.$container.get(0), $header.get(0));
-
-        this.$container.hide();
-    }
-
-    configure(trackView) {
-
-        const dataRange = trackView.dataRange();
-        let min;
-        let max;
-        if (dataRange) {
-            min = dataRange.min;
-            max = dataRange.max;
-        } else {
-            min = 0;
-            max = 100;
-        }
-
-        this.$minimum_input.val(min);
-        this.$maximum_input.val(max);
-
-        this.$minimum_input.unbind();
-        this.$minimum_input.on('keyup', (e) => {
-            if (13 === e.keyCode) {
-                this.processResults(trackView);
-            }
-        });
-
-        this.$maximum_input.unbind();
-        this.$maximum_input.on('keyup', (e) => {
-            if (13 === e.keyCode) {
-                this.processResults(trackView);
-            }
-        });
-
-        this.$ok.unbind();
-        this.$ok.on('click', (e) => {
-            this.processResults(trackView);
-        });
-    }
-
-
-    processResults(trackView) {
-
-        const min = Number(this.$minimum_input.val());
-        const max = Number(this.$maximum_input.val());
-        if (isNaN(min) || isNaN(max)) {
-            Alert.presentAlert(new Error('Must input numeric values'), undefined);
-        } else {
-            trackView.setDataRange(min, max);
-        }
-
-        this.$minimum_input.val(undefined);
-        this.$maximum_input.val(undefined);
-        this.$container.offset({left: 0, top: 0});
-        this.$container.hide();
-    }
-
-    present($parent) {
-
-        const offset_top = $parent.offset().top;
-        const scroll_top = $$1('body').scrollTop();
-
-        this.$container.offset({left: $parent.width() - this.$container.width(), top: (offset_top + scroll_top)});
-        this.$container.show();
-    }
-}
-
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2014 Broad Institute
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of ctx software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and ctx permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-
-
-const IGVGraphics = {
-
-    configureHighDPICanvas: function (ctx, w, h) {
-
-        const scaleFactor = window.devicePixelRatio;
-        // const scaleFactor = 1
-
-        ctx.canvas.style.width = (`${w}px`);
-        ctx.canvas.width = Math.floor(scaleFactor * w);
-
-        ctx.canvas.style.height = (`${h}px`);
-        ctx.canvas.height = Math.floor(scaleFactor * h);
-
-        ctx.scale(scaleFactor, scaleFactor);
-
-    },
-
-    setProperties: function (ctx, properties) {
-
-        for (var key in properties) {
-            if (properties.hasOwnProperty(key)) {
-                var value = properties[key];
-                ctx[key] = value;
-            }
-        }
-    },
-
-    strokeLine: function (ctx, x1, y1, x2, y2, properties) {
-
-        x1 = Math.floor(x1) + 0.5;
-        y1 = Math.floor(y1) + 0.5;
-        x2 = Math.floor(x2) + 0.5;
-        y2 = Math.floor(y2) + 0.5;
-
-        if (properties) {
-            ctx.save();
-            IGVGraphics.setProperties(ctx, properties);
-        }
-
-        ctx.beginPath();
-        ctx.moveTo(x1, y1);
-        ctx.lineTo(x2, y2);
-        ctx.stroke();
-
-        if (properties) ctx.restore();
-    },
-
-    fillRect: function (ctx, x, y, w, h, properties) {
-        x = Math.round(x);
-        y = Math.round(y);
-
-        if (properties) {
-            ctx.save();
-            IGVGraphics.setProperties(ctx, properties);
-        }
-
-        ctx.fillRect(x, y, w, h);
-
-        if (properties) ctx.restore();
-    },
-
-    fillPolygon: function (ctx, x, y, properties) {
-        if (properties) {
-            ctx.save();
-            IGVGraphics.setProperties(ctx, properties);
-        }
-        doPath(ctx, x, y);
-        ctx.fill();
-        if (properties) ctx.restore();
-    },
-
-    strokePolygon: function (ctx, x, y, properties) {
-        if (properties) {
-            ctx.save();
-            IGVGraphics.setProperties(ctx, properties);
-        }
-        doPath(ctx, x, y);
-        ctx.stroke();
-        if (properties) ctx.restore();
-    },
-
-    fillText: function (ctx, text, x, y, properties, transforms) {
-
-        if (properties || transforms) {
-            ctx.save();
-        }
-
-        if (properties) {
-            IGVGraphics.setProperties(ctx, properties);
-        }
-
-        if (transforms) {
-            // Slow path with context saving and extra translate
-            ctx.translate(x, y);
-
-            for (var transform in transforms) {
-                var value = transforms[transform];
-
-                // TODO: Add error checking for robustness
-                if (transform === 'translate') {
-                    ctx.translate(value['x'], value['y']);
-                }
-                if (transform === 'rotate') {
-                    ctx.rotate(value['angle'] * Math.PI / 180);
-                }
-            }
-
-            ctx.fillText(text, 0, 0);
-        } else {
-            ctx.fillText(text, x, y);
-        }
-
-        if (properties || transforms) ctx.restore();
-    },
-
-    strokeText: function (ctx, text, x, y, properties, transforms) {
-
-
-        if (properties || transforms) {
-            ctx.save();
-        }
-
-        if (properties) {
-            IGVGraphics.setProperties(ctx, properties);
-        }
-
-        if (transforms) {
-            ctx.translate(x, y);
-
-            for (var transform in transforms) {
-                var value = transforms[transform];
-
-                // TODO: Add error checking for robustness
-                if (transform === 'translate') {
-                    ctx.translate(value['x'], value['y']);
-                }
-                if (transform === 'rotate') {
-                    ctx.rotate(value['angle'] * Math.PI / 180);
-                }
-            }
-
-            ctx.strokeText(text, 0, 0);
-        } else {
-            ctx.strokeText(text, x, y);
-        }
-
-        if (properties || transforms) ctx.restore();
-    },
-
-    strokeCircle: function (ctx, x, y, radius, properties) {
-        if (properties) {
-            ctx.save();
-            IGVGraphics.setProperties(ctx, properties);
-        }
-        ctx.beginPath();
-        ctx.arc(x, y, radius, 0, 2 * Math.PI);
-        ctx.stroke();
-        if (properties) ctx.restore();
-    },
-
-    fillCircle: function (ctx, x, y, radius, properties) {
-        if (properties) {
-            ctx.save();
-            IGVGraphics.setProperties(ctx, properties);
-        }
-        ctx.beginPath();
-        ctx.arc(x, y, radius, 0, 2 * Math.PI);
-        ctx.fill();
-        if (properties) ctx.restore();
-    },
-
-    drawArrowhead: function (ctx, x, y, size, lineWidth) {
-
-        ctx.save();
-        if (!size) {
-            size = 5;
-        }
-        if (lineWidth) {
-            ctx.lineWidth = lineWidth;
-        }
-        ctx.beginPath();
-        ctx.moveTo(x, y - size / 2);
-        ctx.lineTo(x, y + size / 2);
-        ctx.lineTo(x + size, y);
-        ctx.lineTo(x, y - size / 2);
-        ctx.closePath();
-        ctx.fill();
-        ctx.restore();
-    },
-
-    dashedLine: function (ctx, x1, y1, x2, y2, dashLen, properties = {}) {
-        if (dashLen === undefined) dashLen = 2;
-        ctx.setLineDash([dashLen, dashLen]);
-        IGVGraphics.strokeLine(ctx, x1, y1, x2, y2, properties);
-        ctx.setLineDash([]);
-    },
-
-    roundRect: function (ctx, x, y, width, height, radius, fill, stroke) {
-
-        if (typeof stroke == "undefined") {
-            stroke = true;
-        }
-        if (typeof radius === "undefined") {
-            radius = 5;
-        }
-        ctx.beginPath();
-        ctx.moveTo(x + radius, y);
-        ctx.lineTo(x + width - radius, y);
-        ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
-        ctx.lineTo(x + width, y + height - radius);
-        ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
-        ctx.lineTo(x + radius, y + height);
-        ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
-        ctx.lineTo(x, y + radius);
-        ctx.quadraticCurveTo(x, y, x + radius, y);
-        ctx.closePath();
-        if (stroke) {
-            ctx.stroke();
-        }
-        if (fill) {
-            ctx.fill();
-        }
-    },
-    polygon: function (ctx, x, y, fill, stroke) {
-
-        if (typeof stroke == "undefined") {
-            stroke = true;
-        }
-
-        ctx.beginPath();
-        var len = x.length;
-        ctx.moveTo(x[0], y[0]);
-        for (var i = 1; i < len; i++) {
-            ctx.lineTo(x[i], y[i]);
-            // this.moveTo(x[i], y[i]);
-        }
-
-        ctx.closePath();
-        if (stroke) {
-            ctx.stroke();
-        }
-        if (fill) {
-            ctx.fill();
-        }
-    }
-
-
-};
-
-function doPath(ctx, x, y) {
-
+class Alert {
+    constructor(parent) {
+        this.dialog = new AlertDialog(parent);
 
-    var i, len = x.length;
-    for (i = 0; i < len; i++) {
-        x[i] = Math.round(x[i]);
-        y[i] = Math.round(y[i]);
     }
 
-    ctx.beginPath();
-    ctx.moveTo(x[0], y[0]);
-    for (i = 1; i < len; i++) {
-        ctx.lineTo(x[i], y[i]);
+    present(alert, callback) {
+        this.dialog.present(alert, callback);
     }
-    ctx.closePath();
 }
 
 const FileFormats = {
@@ -20598,7 +20588,7 @@ const isNumber = function (num) {
 };
 
 async function getFilename(url) {
-    if (isString$3(url) && url.startsWith("https://drive.google.com")) {
+    if (isString$2(url) && url.startsWith("https://drive.google.com")) {
         // This will fail if Google API key is not defined
         if (getApiKey() === undefined) {
             throw Error("Google drive is referenced, but API key is not defined.  An API key is required for Google Drive access")
@@ -20640,7 +20630,7 @@ function prettyBasePairNumber(raw) {
 
 
 function isDataURL(obj) {
-    return (isString$3(obj) && obj.startsWith("data:"))
+    return (isString$2(obj) && obj.startsWith("data:"))
 }
 
 function createColumn(columnContainer, className) {
@@ -20991,7 +20981,7 @@ function inferFileFormat(fn) {
 
 function inferIndexPath(url, extension) {
 
-    if (isString$3(url)) {
+    if (isString$2(url)) {
         if (url.includes("?")) {
             const idx = url.indexOf("?");
             return url.substring(0, idx) + "." + extension + url.substring(idx)
@@ -21318,7 +21308,7 @@ class SequenceTrack {
                         } else if (this.reversed) {
                             seq = reverseComplementSequence(seq);
                         }
-                        Alert.presentAlert(seq);
+                        this.browser.alert.present(seq);
                     }
                 }
             ];
@@ -21336,7 +21326,7 @@ class SequenceTrack {
                             await navigator.clipboard.writeText(seq);
                         } catch (e) {
                             console.error(e);
-                            Alert.presentAlert(`error copying sequence to clipboard ${e}`);
+                            this.browser.alert.present(`error copying sequence to clipboard ${e}`);
                         }
                     }
 
@@ -23862,7 +23852,7 @@ const Cytoband = function (start, end, name, typestain) {
     }
 };
 
-const _version = "2.13.1";
+const _version = "2.13.3";
 function version() {
     return _version
 }
@@ -23972,10 +23962,10 @@ const GenomeUtils = {
     },
 
     // Expand a genome id to a reference object, if needed
-    expandReference: function (idOrConfig) {
+    expandReference: function (alert, idOrConfig) {
 
         // idOrConfig might be json
-        if (isString$3(idOrConfig) && idOrConfig.startsWith("{")) {
+        if (isString$2(idOrConfig) && idOrConfig.startsWith("{")) {
             try {
                 idOrConfig = JSON.parse(idOrConfig);
             } catch (e) {
@@ -23984,7 +23974,7 @@ const GenomeUtils = {
         }
 
         let genomeID;
-        if (isString$3(idOrConfig)) {
+        if (isString$2(idOrConfig)) {
             genomeID = idOrConfig;
         } else if (idOrConfig.genome) {
             genomeID = idOrConfig.genome;
@@ -23997,7 +23987,7 @@ const GenomeUtils = {
             const knownGenomes = GenomeUtils.KNOWN_GENOMES;
             const reference = knownGenomes[genomeID];
             if (!reference) {
-                Alert.presentAlert(new Error(`Unknown genome id: ${genomeID}`), undefined);
+                alert.present(new Error(`Unknown genome id: ${genomeID}`), undefined);
             }
             return reference
         } else {
@@ -24336,7 +24326,7 @@ function constructWG(genome, config) {
 function generateGenomeID(config) {
     if (config.id !== undefined) {
         return config.id
-    } else if (config.fastaURL && isString$3(config.fastaURL)) {
+    } else if (config.fastaURL && isString$2(config.fastaURL)) {
         return config.fastaURL
     } else if (config.fastaURL && config.fastaURL.name) {
         return config.fastaURL.name
@@ -24518,7 +24508,7 @@ class TrackViewport extends Viewport {
             // Track might have been removed during load
             if (this.trackView && this.trackView.disposed !== true) {
                 this.showMessage(NOT_LOADED_MESSAGE);
-                Alert.presentAlert(error);
+                this.browser.alert.present(error);
                 console.error(error);
             }
         } finally {
@@ -26698,8 +26688,8 @@ function parseVariableStep(line) {
  */
 
 const fixColor = (colorString) => {
-    if (isString$3(colorString)) {
-        return (colorString.indexOf(",") > 0 && !colorString.startsWith("rgb(")) ?
+    if (isString$2(colorString)) {
+        return (colorString.indexOf(",") > 0 && !(colorString.startsWith("rgb(") || colorString.startsWith("rgba("))) ?
             `rgb(${colorString})` : colorString
     } else {
         return colorString
@@ -26741,7 +26731,7 @@ class TrackBase {
             this.name = config.name || config.label;
         } else if (isFile(config.url)) {
             this.name = config.url.name;
-        } else if (isString$3(config.url) && !config.url.startsWith("data:")) {
+        } else if (isString$2(config.url) && !config.url.startsWith("data:")) {
             this.name = getFilename$1(config.url);
         }
 
@@ -30009,7 +29999,7 @@ class FeatureFileReader {
  * THE SOFTWARE.
  */
 
-const isString$2 = isString$3;
+const isString$1 = isString$2;
 
 
 class CustomServiceReader {
@@ -30048,7 +30038,7 @@ class CustomServiceReader {
         if (data) {
             if (typeof this.config.parser === "function") {
                 features = this.config.parser(data);
-            } else if (isString$2(data)) {
+            } else if (isString$1(data)) {
                 features = JSON.parse(data);
             } else {
                 features = data;
@@ -33751,7 +33741,7 @@ class ROISet {
             this.name = config.name;
         } else if (config.url && isFile(config.url)) {
             this.name = config.url.name;
-        } else if (config.url && isString$3(config.url) && !config.url.startsWith("data:")) {
+        } else if (config.url && isString$2(config.url) && !config.url.startsWith("data:")) {
             this.name = getFilename$1(config.url);
         }
 
@@ -33860,10 +33850,14 @@ class DynamicFeatureSource {
         this.genome = genome;
 
         for (let feature of features) {
-            let featureList = this.featureMap[feature.chr];
+
+            // Store as canonical chr name (i.e. translate aliases)
+            const chrKey = genome ? genome.getChromosomeName(feature.chr) : feature.chr;
+
+            let featureList = this.featureMap[chrKey];
             if (!featureList) {
                 featureList = [];
-                this.featureMap[feature.chr] = featureList;
+                this.featureMap[chrKey] = featureList;
             }
             featureList.push(feature);
         }
@@ -34264,9 +34258,6 @@ class PairedAlignment {
  * THE SOFTWARE.
  */
 
-const isString$1 = isString$3;
-const hashCode = hashCode$1;
-
 class BamAlignmentRow {
 
     constructor() {
@@ -34303,20 +34294,15 @@ class BamAlignmentRow {
 
     }
 
-    updateScore(options, alignmentContainer) {
-        this.score = this.calculateScore(options, alignmentContainer);
-    }
-
-    calculateScore({position, option, direction, tag}, alignmentContainer) {
+    getSortValue({position, option, tag}, alignmentContainer) {
 
         if (!option) option = "BASE";
 
         const alignment = this.findAlignment(position);
-        if (undefined === alignment) {
-            return Number.MAX_VALUE * (direction ? 1 : -1)
+        if (undefined === alignment) {  // This condition should never occur
+            return Number.MAX_VALUE
         }
 
-        let mate;
         switch (option) {
             case "NUCLEOTIDE":
             case "BASE": {
@@ -34327,31 +34313,16 @@ class BamAlignmentRow {
             case "START":
                 return alignment.start
             case "TAG": {
-
-                const tagValue = alignment.tags()[tag];
-                if (tagValue !== undefined) {
-                    return isString$1(tagValue) ? hashCode(tagValue) : tagValue
-                } else {
-                    return Number.MAX_VALUE
-                }
+                return alignment.tags()[tag]
             }
             case "READ_NAME":
-                return hashCode(alignment.readName)
+                return alignment.readName
             case "INSERT_SIZE":
                 return -Math.abs(alignment.fragmentLength)
             case "GAP_SIZE":
                 return -alignment.gapSizeAt(position)
             case "MATE_CHR":
-                mate = alignment.mate;
-                if (!mate) {
-                    return Number.MAX_VALUE
-                } else {
-                    if (mate.chr === alignment.chr) {
-                        return Number.MAX_VALUE - 1
-                    } else {
-                        return hashCode(mate.chr)
-                    }
-                }
+                return alignment.mate
             case "MQ":
                 return alignment.mq === undefined ? Number.MAX_VALUE : -alignment.mq
             case "ALIGNED_READ_LENGTH":
@@ -34414,6 +34385,8 @@ class BamAlignmentRow {
             return baseScore
         }
     }
+
+
 }
 
 function canBePaired(alignment) {
@@ -34695,6 +34668,39 @@ class AlignmentContainer {
     getMax(start, end) {
         return this.coverageMap.getMax(start, end)
     }
+
+    sortRows(options) {
+
+        const newRows = [];
+        const undefinedRow = [];
+        for (let row of this.packedAlignmentRows) {
+            const alignment = row.findAlignment(options.position);
+            if (undefined !== alignment) {
+                newRows.push(row);
+            } else {
+                undefinedRow.push(row);
+            }
+        }
+
+        newRows.sort((rowA, rowB) => {
+            const direction = options.direction;
+            const rowAValue = rowA.getSortValue(options, this);
+            const rowBValue = rowB.getSortValue(options, this);
+
+            if (rowBValue === undefined && rowBValue !== undefined) return 1
+            else if (rowAValue !== undefined && rowBValue === undefined) return -1
+
+            const i = rowAValue > rowBValue ? 1 : (rowAValue < rowBValue ? -1 : 0);
+            return true === direction ? i : -i
+        });
+
+        for (let row of undefinedRow) {
+            newRows.push(row);
+        }
+
+        this.packedAlignmentRows = newRows;
+    }
+
 }
 
 
@@ -34923,7 +34929,7 @@ class Coverage {
     hoverText() {
         const pos = this.posA + this.posT + this.posC + this.posG + this.posN;
         const neg = this.negA + this.negT + this.negC + this.negG + this.negN;
-        return `${this.total } (${pos}+, ${neg}-)`
+        return `${this.total} (${pos}+, ${neg}-)`
     }
 
     isMismatch(refBase) {
@@ -36779,7 +36785,7 @@ class CramReader {
                 if (message && message.indexOf("MD5") >= 0) {
                     message = "Sequence mismatch. Is this the correct genome for the loaded CRAM?";
                 }
-                Alert.presentAlert(new Error(message));
+                this.browser.alert.present(new Error(message));
                 throw error
             }
         }
@@ -37571,9 +37577,6 @@ class BamSource {
         this.genome = genome;
 
         if (isDataURL(config.url)) {
-            if ("cram" === config.format) {
-                throw "CRAM data uris are not supported"
-            }
             this.config.indexed = false;
         }
 
@@ -37589,7 +37592,7 @@ class BamSource {
             this.bamReader = new CramReader(config, genome, browser);
         } else {
             if (!this.config.indexURL && config.indexed !== false) {
-                if (isString$3(this.config.url)) {
+                if (isString$2(this.config.url)) {
                     const inferIndexPath$1 = inferIndexPath(this.config.url, "bai");
                     if (inferIndexPath$1) {
                         console.error(`Warning: no indexURL specified for ${this.config.url}.  Guessing ${this.baiPath}`);
@@ -39860,7 +39863,7 @@ class BAMTrack extends TrackBase {
             if (vp.containsPosition(options.chr, options.position)) {
                 const alignmentContainer = vp.cachedFeatures;
                 if (alignmentContainer) {
-                    sortAlignmentRows(options, alignmentContainer);
+                    alignmentContainer.sortRows(options);
                     vp.repaint();
                 }
             }
@@ -39904,7 +39907,7 @@ class BAMTrack extends TrackBase {
         const sort = this.sortObject;
         if (sort) {
             if (sort.chr === chr && sort.position >= bpStart && sort.position <= bpEnd) {
-                sortAlignmentRows(sort, alignmentContainer);
+                alignmentContainer.sortRows(sort);
             }
         }
 
@@ -40984,7 +40987,7 @@ class AlignmentTrack {
                 direction: direction
             };
             this.parent.sortObject = newSortObject;
-            sortAlignmentRows(newSortObject, viewport.cachedFeatures);
+            viewport.cachedFeatures.sortRows(newSortObject);
             viewport.repaint();
         };
         list.push('<b>Sort by...</b>');
@@ -41015,7 +41018,7 @@ class AlignmentTrack {
                                 };
                                 this.sortByTag = tag;
                                 this.parent.sortObject = newSortObject;
-                                sortAlignmentRows(newSortObject, viewport.cachedFeatures);
+                                viewport.cachedFeatures.sortRows(newSortObject);
                                 viewport.repaint();
                             }
                         }
@@ -41048,7 +41051,7 @@ class AlignmentTrack {
                                     const frameEnd = clickedAlignment.mate.position + bpWidth / 2;
                                     this.browser.addMultiLocusPanel(clickedAlignment.mate.chr, frameStart, frameEnd, referenceFrame);
                                 } else {
-                                    Alert.presentAlert(`Reference does not contain chromosome: ${clickedAlignment.mate.chr}`);
+                                    this.browser.alert.present(`Reference does not contain chromosome: ${clickedAlignment.mate.chr}`);
                                 }
                             }
                         },
@@ -41061,9 +41064,9 @@ class AlignmentTrack {
                     click: () => {
                         const seqstring = clickedAlignment.seq; //.map(b => String.fromCharCode(b)).join("");
                         if (!seqstring || "*" === seqstring) {
-                            Alert.presentAlert("Read sequence: *");
+                            this.browser.alert.present("Read sequence: *");
                         } else {
-                            Alert.presentAlert(seqstring);
+                            this.browser.alert.present(seqstring);
                         }
                     }
                 });
@@ -41078,7 +41081,7 @@ class AlignmentTrack {
                                 await navigator.clipboard.writeText(seq);
                             } catch (e) {
                                 console.error(e);
-                                Alert.presentAlert(`error copying sequence to clipboard ${e}`);
+                                this.browser.alert.present(`error copying sequence to clipboard ${e}`);
                             }
 
                         }
@@ -41258,21 +41261,6 @@ class AlignmentTrack {
     }
 }
 
-function sortAlignmentRows(options, alignmentContainer) {
-
-    const direction = options.direction;
-
-    for (let row of alignmentContainer.packedAlignmentRows) {
-        row.updateScore(options, alignmentContainer);
-    }
-
-    alignmentContainer.packedAlignmentRows.sort(function (rowA, rowB) {
-        const i = rowA.score > rowB.score ? 1 : (rowA.score < rowB.score ? -1 : 0);
-        return true === direction ? i : -i
-    });
-
-}
-
 function shadedBaseColor(qual, baseColor) {
 
     const minQ = 5;   //prefs.getAsInt(PreferenceManager.SAM_BASE_QUALITY_MIN),
@@ -42386,10 +42374,10 @@ class TrackView {
 
             const trackColors = [];
             const color = this.track.color || this.track.defaultColor;
-            if (isString$3(color)) {
+            if (isString$2(color)) {
                 trackColors.push(color);
             }
-            if (this.track.altColor && isString$3(this.track.altColor)) {
+            if (this.track.altColor && isString$2(this.track.altColor)) {
                 trackColors.push(this.track.altColor);
             }
             const defaultColors = trackColors.map(c => c.startsWith("#") ? c : c.startsWith("rgb(") ? IGVColor.rgbToHex(c) : IGVColor.colorNameToHex(c));
@@ -43741,7 +43729,7 @@ class FeatureTrack extends TrackBase {
                         fd.name &&
                         fd.name.toLowerCase() === "name" &&
                         fd.value &&
-                        isString$3(fd.value) &&
+                        isString$2(fd.value) &&
                         !fd.value.startsWith("<")) {
                         const href = infoURL.replace("$$", feature.name);
                         fd.value = `<a target=_blank href=${href}>${fd.value}</a>`;
@@ -43843,7 +43831,7 @@ class FeatureTrack extends TrackBase {
                     else if (f.strand === '-') {
                         seq = reverseComplementSequence(seq);
                     }
-                    Alert.presentAlert(seq);
+                    this.browser.alert.present(seq);
 
                 }
             }];
@@ -43864,7 +43852,7 @@ class FeatureTrack extends TrackBase {
                                 await navigator.clipboard.writeText(seq);
                             } catch (e) {
                                 console.error(e);
-                                Alert.presentAlert(`error copying sequence to clipboard ${e}`);
+                                this.browser.alert.present(`error copying sequence to clipboard ${e}`);
                             }
                         }
                     }
@@ -44017,6 +44005,7 @@ class WigTrack extends TrackBase {
             start,
             end,
             bpPerPixel,
+            visibilityWindow: this.visibilityWindow,
             windowFunction: this.windowFunction
         });
         if (this.normalize && this.featureSource.normalizationFactor) {
@@ -44036,7 +44025,9 @@ class WigTrack extends TrackBase {
 
     menuItemList() {
         let items = [];
+
         if (this.flipAxis !== undefined) {
+            items.push('<hr>');
             items.push({
                 label: "Flip y-axis",
                 click: () => {
@@ -44899,6 +44890,7 @@ class MergedTrack extends TrackBase {
         this.type = "merged";
         this.featureType = 'numeric';
         this.paintAxis = paintAxis;
+        this.graphType = config.graphType;
     }
 
     init(config) {
@@ -44998,7 +44990,9 @@ class MergedTrack extends TrackBase {
             this.tracks[i].dataRange = this.dataRange;
             this.tracks[i].flipAxis = this.flipAxis;
             this.tracks[i].logScale = this.logScale;
-            this.tracks[i].graphType = this.graphType;
+            if(this.graphType){
+                this.tracks[i].graphType = this.graphType;
+            }
             this.tracks[i].draw(trackOptions);
         }
     }
@@ -45023,7 +45017,7 @@ class MergedTrack extends TrackBase {
 
 
     get supportsWholeGenome() {
-        return this.tracks.every(track => track.supportsWholeGenome())
+        return this.tracks.every(track => track.supportsWholeGenome)
     }
 }
 
@@ -45126,8 +45120,13 @@ class InteractionTrack extends TrackBase {
         }
 
         // Create the FeatureSource and override the default whole genome method
-        this.featureSource = FeatureSource(config, this.browser.genome);
-        this.featureSource.getWGFeatures = getWGFeatures;
+        if (config.featureSource) {
+            this.featureSource = config.featureSource;
+            delete config._featureSource;
+        } else {
+            this.featureSource = FeatureSource(config, this.browser.genome);
+            this.featureSource.getWGFeatures = getWGFeatures;
+        }
     }
 
     async postInit() {
@@ -45206,10 +45205,16 @@ class InteractionTrack extends TrackBase {
                 // Reset transient property drawState.  An undefined value => feature has not been drawn.
                 feature.drawState = undefined;
 
-                let color = this.color || feature.color || DEFAULT_ARC_COLOR;
-                if (color && this.config.useScore) {
-                    color = getAlphaColor(color, scoreShade(feature.score));
+                let color;
+                if(typeof this.color === 'function') {
+                    color = this.color(feature);
+                } else {
+                    color = this.color || feature.color || DEFAULT_ARC_COLOR;
+                    if (color && this.config.useScore) {
+                        color = getAlphaColor(color, scoreShade(feature.score));
+                    }
                 }
+
                 ctx.lineWidth = feature.thickness || this.thickness || 1;
 
                 if (feature.chr1 === feature.chr2 || feature.chr === 'all') {
@@ -45482,18 +45487,10 @@ class InteractionTrack extends TrackBase {
 
     menuItemList() {
 
-        let items = [
-
-            {
-                name: "Set track color",
-                click: () => {
-                    this.trackView.presentColorPicker();
-                }
-            },
-            '<hr/>'
-        ];
+        let items = [];
 
         if (this.hasValue) {
+            items.push("<hr/>");
             const lut =
                 {
                     "nested": "Nested",
@@ -45927,7 +45924,7 @@ function extractInfoColumn(data, str) {
  * THE SOFTWARE.
  */
 
-const isString = isString$3;
+const isString = isString$2;
 
 
 const DEFAULT_VISIBILITY_WINDOW = 1000000;
@@ -51735,7 +51732,7 @@ class Browser {
         this.root = div$1({class: 'igv-container'});
         parentDiv.appendChild(this.root);
 
-        Alert.init(this.root);
+        this.alert = new Alert(this.root);
 
         this.columnContainer = div$1({class: 'igv-column-container'});
         this.root.appendChild(this.columnContainer);
@@ -51913,7 +51910,7 @@ class Browser {
         this.inputDialog = new InputDialog(this.root);
         this.inputDialog.container.id = `igv-input-dialog-${guid$2()}`;
 
-        this.dataRangeDialog = new DataRangeDialog($$1(this.root));
+        this.dataRangeDialog = new DataRangeDialog(this, $$1(this.root));
         this.dataRangeDialog.$container.get(0).id = `igv-data-range-dialog-${guid$2()}`;
 
         this.genericColorPicker = new GenericColorPicker({parent: this.columnContainer, width: 432});
@@ -52115,7 +52112,7 @@ class Browser {
         // Track gear column
         createColumn(this.columnContainer, 'igv-gear-menu-column');
 
-        const genomeConfig = await GenomeUtils.expandReference(session.reference || session.genome);
+        const genomeConfig = await GenomeUtils.expandReference(this.alert, (session.reference || session.genome));
         await this.loadReference(genomeConfig, session.locus);
 
         this.centerLineList = this.createCenterLineList(this.columnContainer);
@@ -52294,7 +52291,7 @@ class Browser {
      */
     async loadGenome(idOrConfig) {
 
-        const genomeConfig = await GenomeUtils.expandReference(idOrConfig);
+        const genomeConfig = await GenomeUtils.expandReference(this.alert, idOrConfig);
         await this.loadReference(genomeConfig, undefined);
 
         const tracks = genomeConfig.tracks || [];
@@ -52433,7 +52430,7 @@ class Browser {
     async _loadTrack(config) {
 
         // config might be json
-        if (isString$3(config)) {
+        if (isString$2(config)) {
             config = JSON.parse(config);
         }
 
@@ -52495,7 +52492,7 @@ class Browser {
                 msg = httpMessages[msg];
             }
             msg += (": " + config.url);
-            Alert.presentAlert(new Error(msg), undefined);
+            this.alert.present(new Error(msg), undefined);
         }
     }
 
@@ -52556,7 +52553,7 @@ class Browser {
 
         // Resolve function and promise urls
         let url = await resolveURL(config.url);
-        if (isString$3(url)) {
+        if (isString$2(url)) {
             url = url.trim();
         }
 
@@ -52618,8 +52615,7 @@ class Browser {
 
         const track = TrackFactory.getTrack(type, config, this);
         if (undefined === track) {
-            Alert.presentAlert(new Error(`Error creating track.  Could not determine track type for file: ${config.url || config}`), undefined);
-            return
+            this.alert.present(new Error(`Error creating track.  Could not determine track type for file: ${config.url || config}`), undefined);
         } else {
 
             if (config.roi && config.roi.length > 0) {
@@ -53114,7 +53110,7 @@ class Browser {
     async doSearch(string, init) {
         const success = await this.search(string, init);
         if (!success) {
-            Alert.presentAlert(new Error(`Unrecognized locus: <b> ${string} </b>`));
+            this.alert.present(new Error(`Unrecognized locus: <b> ${string} </b>`));
         }
         return success
     }
@@ -53987,7 +53983,7 @@ async function createTrack(config, browser) {
 
 function embedCSS() {
 
-    var css =  '.igv-navbar {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  box-sizing: border-box;\n  width: 100%;\n  color: #444;\n  font-size: 12px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n  line-height: 32px;\n  padding-left: 8px;\n  padding-right: 8px;\n  margin-top: 2px;\n  margin-bottom: 6px;\n  height: 32px;\n  border-style: solid;\n  border-radius: 3px;\n  border-width: thin;\n  border-color: #bfbfbf;\n  background-color: #f3f3f3;\n}\n.igv-navbar .igv-navbar-left-container {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  height: 32px;\n  line-height: 32px;\n}\n.igv-navbar .igv-navbar-left-container .igv-logo {\n  width: 34px;\n  height: 32px;\n  margin-right: 8px;\n}\n.igv-navbar .igv-navbar-left-container .igv-current-genome {\n  height: 32px;\n  margin-left: 4px;\n  margin-right: 4px;\n  user-select: none;\n  line-height: 32px;\n  vertical-align: middle;\n  text-align: center;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  height: 100%;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-chromosome-select-widget-container {\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n  height: 100%;\n  width: 125px;\n  margin-right: 4px;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-chromosome-select-widget-container select {\n  display: block;\n  cursor: pointer;\n  width: 100px;\n  height: 75%;\n  outline: none;\n  font-size: 12px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-locus-size-group {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  margin-left: 8px;\n  height: 22px;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-locus-size-group .igv-search-container {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  width: 210px;\n  height: 22px;\n  line-height: 22px;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-locus-size-group .igv-search-container input.igv-search-input {\n  cursor: text;\n  width: 85%;\n  height: 22px;\n  line-height: 22px;\n  font-size: 12px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n  text-align: left;\n  padding-left: 8px;\n  margin-right: 8px;\n  outline: none;\n  border-style: solid;\n  border-radius: 3px;\n  border-width: thin;\n  border-color: #bfbfbf;\n  background-color: white;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-locus-size-group .igv-search-container .igv-search-icon-container {\n  cursor: pointer;\n  height: 16px;\n  width: 16px;\n}\n.igv-navbar .igv-navbar-left-container .igv-navbar-genomic-location .igv-locus-size-group .igv-windowsize-panel-container {\n  margin-left: 4px;\n  user-select: none;\n}\n.igv-navbar .igv-navbar-right-container {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  height: 32px;\n  line-height: 32px;\n}\n.igv-navbar .igv-navbar-right-container .igv-navbar-toggle-button-container {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  height: 100%;\n}\n.igv-navbar .igv-navbar-right-container .igv-navbar-toggle-button-container div {\n  margin-left: 0;\n  margin-right: 4px;\n}\n.igv-navbar .igv-navbar-right-container .igv-navbar-toggle-button-container div:last-child {\n  margin-left: 0;\n  margin-right: 0;\n}\n.igv-navbar .igv-navbar-right-container .igv-navbar-toggle-button-container-750 {\n  display: none;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget {\n  color: #737373;\n  font-size: 18px;\n  height: 32px;\n  line-height: 32px;\n  margin-left: 8px;\n  user-select: none;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget div {\n  cursor: pointer;\n  margin-left: unset;\n  margin-right: unset;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget div:first-child {\n  height: 24px;\n  width: 24px;\n  margin-left: unset;\n  margin-right: 8px;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget div:last-child {\n  height: 24px;\n  width: 24px;\n  margin-left: 8px;\n  margin-right: unset;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget div:nth-child(even) {\n  display: block;\n  height: fit-content;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget input {\n  display: block;\n  width: 125px;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget svg {\n  display: block;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 {\n  color: #737373;\n  font-size: 18px;\n  height: 32px;\n  line-height: 32px;\n  margin-left: 8px;\n  user-select: none;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 div {\n  cursor: pointer;\n  margin-left: unset;\n  margin-right: unset;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 div:first-child {\n  height: 24px;\n  width: 24px;\n  margin-left: unset;\n  margin-right: 8px;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 div:last-child {\n  height: 24px;\n  width: 24px;\n  margin-left: 8px;\n  margin-right: unset;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 div:nth-child(even) {\n  width: 0;\n  height: 0;\n  display: none;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 input {\n  width: 0;\n  height: 0;\n  display: none;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 svg {\n  display: block;\n}\n.igv-navbar .igv-navbar-right-container .igv-zoom-widget-hidden {\n  display: none;\n}\n\n.igv-navbar-button {\n  display: block;\n  box-sizing: unset;\n  padding-left: 6px;\n  padding-right: 6px;\n  height: 18px;\n  text-transform: capitalize;\n  user-select: none;\n  line-height: 18px;\n  text-align: center;\n  vertical-align: middle;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 11px;\n  font-weight: 200;\n  color: #737373;\n  background-color: #f3f3f3;\n  border-color: #737373;\n  border-style: solid;\n  border-width: thin;\n  border-radius: 6px;\n}\n\n.igv-navbar-button-clicked {\n  color: white;\n  background-color: #737373;\n}\n\n.igv-navbar-button:hover {\n  cursor: pointer;\n}\n\n.igv-zoom-in-notice-container {\n  z-index: 1024;\n  position: absolute;\n  top: 8px;\n  left: 50%;\n  transform: translate(-50%, 0%);\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: center;\n  align-items: center;\n  background-color: white;\n}\n.igv-zoom-in-notice-container > div {\n  padding-left: 4px;\n  padding-right: 4px;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  width: 100%;\n  height: 100%;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  color: #3f3f3f;\n}\n\n.igv-zoom-in-notice {\n  position: absolute;\n  top: 10px;\n  left: 50%;\n}\n.igv-zoom-in-notice div {\n  position: relative;\n  left: -50%;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  color: #3f3f3f;\n  background-color: rgba(255, 255, 255, 0.51);\n  z-index: 64;\n}\n\n.igv-container-spinner {\n  position: absolute;\n  top: 90%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 1024;\n  width: 24px;\n  height: 24px;\n  pointer-events: none;\n  color: #737373;\n}\n\n.igv-multi-locus-close-button {\n  position: absolute;\n  top: 2px;\n  right: 0;\n  padding-left: 2px;\n  padding-right: 2px;\n  width: 18px;\n  height: 18px;\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: 14px;\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: 14px;\n  font-weight: 400;\n  color: rgb(16, 16, 16);\n  background-color: white;\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-multi-locus-ruler-label:hover {\n  cursor: pointer;\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: 200px;\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\n    transform: rotate(360deg); } }\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  .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    .igv-roi-menu-next-gen > div:first-child > div {\n      margin-right: 4px;\n      height: 12px;\n      width: 12px;\n      color: #7F7F7F; }\n    .igv-roi-menu-next-gen > div:first-child > div:hover {\n      cursor: pointer;\n      color: #444; }\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    cursor: pointer; }\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    .igv-roi-menu-next-gen > div:last-child > div:not(:first-child):hover {\n      background-color: rgba(127, 127, 127, 0.1); }\n    .igv-roi-menu-next-gen > div:last-child div:first-child {\n      cursor: default;\n      font-style: italic;\n      text-align: center;\n      padding-right: 4px;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis; }\n    .igv-roi-menu-next-gen > div:last-child > div:last-child {\n      border-bottom-width: 0;\n      border-bottom-color: transparent; }\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}\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-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-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: center;\n  margin-left: 4px;\n  margin-right: 4px;\n  height: 24px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.igv-roi-table > .igv-roi-table-column-titles > div:nth-child(1) {\n  width: 20%;\n}\n.igv-roi-table > .igv-roi-table-column-titles > div:nth-child(2) {\n  width: 15%;\n}\n.igv-roi-table > .igv-roi-table-column-titles > div:nth-child(3) {\n  width: 15%;\n}\n.igv-roi-table > .igv-roi-table-column-titles > div:nth-child(4) {\n  width: 30%;\n}\n.igv-roi-table > .igv-roi-table-column-titles > div:nth-child(5) {\n  width: 20%;\n}\n.igv-roi-table > .igv-roi-table-row-container {\n  resize: both;\n  overflow: scroll;\n  min-width: 512px;\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: center;\n  margin-left: 4px;\n  margin-right: 4px;\n  height: 24px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(1) {\n  width: 20%;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(2) {\n  width: 15%;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(3) {\n  width: 15%;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(4) {\n  width: 30%;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(5) {\n  width: 20%;\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-four-column {\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}\n.igv-roi-table-four-column > 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-four-column > 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-four-column > div:first-child > div:first-child {\n  text-align: center;\n  width: calc(100% - 4px - 12px);\n}\n.igv-roi-table-four-column > 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-four-column > div:first-child > div:last-child > svg {\n  display: block;\n}\n.igv-roi-table-four-column > div:first-child > div:last-child:hover {\n  cursor: pointer;\n  color: #444;\n}\n.igv-roi-table-four-column > .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-bottom-color: #7f7f7f;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n}\n.igv-roi-table-four-column > .igv-roi-table-column-titles > div {\n  font-size: 14px;\n  vertical-align: middle;\n  line-height: 24px;\n  text-align: center;\n  margin-left: 4px;\n  margin-right: 4px;\n  height: 24px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.igv-roi-table-four-column > .igv-roi-table-column-titles > div:nth-child(1) {\n  width: 25%;\n}\n.igv-roi-table-four-column > .igv-roi-table-column-titles > div:nth-child(2) {\n  width: 20%;\n}\n.igv-roi-table-four-column > .igv-roi-table-column-titles > div:nth-child(3) {\n  width: 20%;\n}\n.igv-roi-table-four-column > .igv-roi-table-column-titles > div:nth-child(4) {\n  width: 35%;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container {\n  resize: both;\n  overflow: scroll;\n  min-width: 512px;\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-four-column > .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-four-column > .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: center;\n  margin-left: 4px;\n  margin-right: 4px;\n  height: 24px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(1) {\n  width: 25%;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(2) {\n  width: 20%;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(3) {\n  width: 20%;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(4) {\n  width: 35%;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container > .igv-roi-table-row-hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.igv-roi-table-four-column > 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  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  cursor: pointer;\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  cursor: pointer;\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  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: 18px;\n  height: 18px;\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: 14px;\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: 14px;\n  font-weight: 400;\n  color: rgb(16, 16, 16);\n  background-color: white;\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-multi-locus-ruler-label:hover {\n  cursor: pointer;\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: 200px;\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  cursor: pointer;\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  cursor: default;\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}\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-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-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: center;\n  margin-left: 4px;\n  margin-right: 4px;\n  height: 24px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.igv-roi-table > .igv-roi-table-column-titles > div:nth-child(1) {\n  width: 20%;\n}\n.igv-roi-table > .igv-roi-table-column-titles > div:nth-child(2) {\n  width: 15%;\n}\n.igv-roi-table > .igv-roi-table-column-titles > div:nth-child(3) {\n  width: 15%;\n}\n.igv-roi-table > .igv-roi-table-column-titles > div:nth-child(4) {\n  width: 30%;\n}\n.igv-roi-table > .igv-roi-table-column-titles > div:nth-child(5) {\n  width: 20%;\n}\n.igv-roi-table > .igv-roi-table-row-container {\n  resize: both;\n  overflow: scroll;\n  min-width: 512px;\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: center;\n  margin-left: 4px;\n  margin-right: 4px;\n  height: 24px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(1) {\n  width: 20%;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(2) {\n  width: 15%;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(3) {\n  width: 15%;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(4) {\n  width: 30%;\n}\n.igv-roi-table > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(5) {\n  width: 20%;\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-four-column {\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}\n.igv-roi-table-four-column > 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-four-column > 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-four-column > div:first-child > div:first-child {\n  text-align: center;\n  width: calc(100% - 4px - 12px);\n}\n.igv-roi-table-four-column > 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-four-column > div:first-child > div:last-child > svg {\n  display: block;\n}\n.igv-roi-table-four-column > div:first-child > div:last-child:hover {\n  cursor: pointer;\n  color: #444;\n}\n.igv-roi-table-four-column > .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-bottom-color: #7f7f7f;\n  border-bottom-style: solid;\n  border-bottom-width: thin;\n}\n.igv-roi-table-four-column > .igv-roi-table-column-titles > div {\n  font-size: 14px;\n  vertical-align: middle;\n  line-height: 24px;\n  text-align: center;\n  margin-left: 4px;\n  margin-right: 4px;\n  height: 24px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.igv-roi-table-four-column > .igv-roi-table-column-titles > div:nth-child(1) {\n  width: 25%;\n}\n.igv-roi-table-four-column > .igv-roi-table-column-titles > div:nth-child(2) {\n  width: 20%;\n}\n.igv-roi-table-four-column > .igv-roi-table-column-titles > div:nth-child(3) {\n  width: 20%;\n}\n.igv-roi-table-four-column > .igv-roi-table-column-titles > div:nth-child(4) {\n  width: 35%;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container {\n  resize: both;\n  overflow: scroll;\n  min-width: 512px;\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-four-column > .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-four-column > .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: center;\n  margin-left: 4px;\n  margin-right: 4px;\n  height: 24px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(1) {\n  width: 25%;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(2) {\n  width: 20%;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(3) {\n  width: 20%;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container > .igv-roi-table-row > div:nth-child(4) {\n  width: 35%;\n}\n.igv-roi-table-four-column > .igv-roi-table-row-container > .igv-roi-table-row-hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.igv-roi-table-four-column > 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  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  cursor: pointer;\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  cursor: pointer;\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  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');