npm - igv - Versions diffs - 2.10.5 → 2.11.2 - Mend

igv 2.10.5 → 2.11.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/igv.esm.js CHANGED Viewed

@@ -8167,7 +8167,7 @@ function applyStyle$1(elem, style) {
     }
 }
-function guid$1  () {
+function guid$2  () {
     return ("0000" + (Math.random() * Math.pow(36, 4) << 0).toString(36)).slice(-4);
 }
@@ -8760,8 +8760,8 @@ async function resolveURL(url) {
 function getFilename$1(urlOrFile) {
-    if (isFile(urlOrFile)) {
-        return urlOrFile.name;
+    if (urlOrFile.name !== undefined) {
+        return urlOrFile.name
     } else if (isString$3(urlOrFile)) {
         let index = urlOrFile.lastIndexOf("/");
@@ -8772,21 +8772,24 @@ function getFilename$1(urlOrFile) {
         if (index > 0) {
             filename = filename.substr(0, index);
         }
-        return filename;
+        return filename
     } else {
-        throw Error(`Expected File or string, got ${typeof urlOrFile}`);
+        throw Error(`Expected File or string, got ${typeof urlOrFile}`)
     }
 }
 /**
- * Test if object is a File or File-like object by testing for the "name" property.   This is not a robust test,
- * but the purpose is to distinguish the object from url strings
+ * Test if object is a File or File-like object.
  *
  * @param object
  */
 function isFile(object) {
-    return object !== undefined && (object instanceof File || (typeof object !== "function" &&
-        object.hasOwnProperty("name") && object.hasOwnProperty("size") && object.hasOwnProperty("type")));
+    if(!object) {
+        return false;
+    }
+    return typeof object !== 'function' &&
+        (object instanceof File ||
+            (object.hasOwnProperty("name") && typeof object.slice === 'function' && typeof object.arrayBuffer === 'function'))
 }
 const isFilePath = isFile;    // deprecated
@@ -17121,7 +17124,6 @@ function getOauthToken(url) {
  * @returns the oauth token
  */
 async function fetchGoogleAccessToken(url) {
-    console.log("Fetch token for " + url);
     if (isInitialized()) {
         const scope = getScopeForURL(url);
         const googleToken = await getAccessToken(scope);
@@ -18564,11 +18566,11 @@ class AlertDialog {
         this.errorHeadline.textContent = '';
         // body container
-        let bodyContainer = div({id: 'igv-ui-alert-dialog-body'});
+        let bodyContainer = div({class: 'igv-ui-alert-dialog-body'});
         this.container.appendChild(bodyContainer);
         // body copy
-        this.body = div({id: 'igv-ui-alert-dialog-body-copy'});
+        this.body = div({class: 'igv-ui-alert-dialog-body-copy'});
         bodyContainer.appendChild(this.body);
         // ok container
@@ -19089,7 +19091,7 @@ function createMenuElements$1(itemList, popover) {
 function embedCSS$2() {
-    var css =  '.igv-ui-popover {\n  cursor: default;\n  position: absolute;\n  z-index: 2048;\n  border-color: #7F7F7F;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: 1px;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: small;\n  background-color: white; }\n  .igv-ui-popover > div:first-child {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n    height: 24px;\n    cursor: move;\n    border-top-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    .igv-ui-popover > div:first-child > div:first-child {\n      margin-left: 4px; }\n    .igv-ui-popover > div:first-child > div:last-child {\n      margin-right: 4px;\n      height: 12px;\n      width: 12px;\n      color: #7F7F7F; }\n    .igv-ui-popover > div:first-child > div:last-child:hover {\n      cursor: pointer;\n      color: #444; }\n  .igv-ui-popover > div:last-child {\n    overflow-y: auto;\n    overflow-x: hidden;\n    max-height: 400px;\n    max-width: 800px;\n    background-color: white; }\n    .igv-ui-popover > div:last-child > div {\n      -webkit-user-select: all;\n      /* Chrome/Safari */\n      -moz-user-select: all;\n      /* Firefox */\n      margin-left: 4px;\n      margin-right: 4px;\n      min-width: 220px;\n      overflow-x: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap; }\n      .igv-ui-popover > div:last-child > div > span {\n        font-weight: bolder; }\n    .igv-ui-popover > div:last-child hr {\n      width: 100%; }\n\n.igv-ui-alert-dialog-container {\n  box-sizing: content-box;\n  position: absolute;\n  z-index: 2048;\n  top: 50%;\n  left: 50%;\n  width: 400px;\n  height: 200px;\n  border-color: #7F7F7F;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: thin;\n  outline: none;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 15px;\n  font-weight: 400;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center; }\n  .igv-ui-alert-dialog-container > div:first-child {\n    display: flex;\n    flex-flow: row;\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    align-items: center;\n    width: 100%;\n    height: 24px;\n    cursor: move;\n    border-top-left-radius: 4px;\n    border-top-right-radius: 4px;\n    border-bottom-color: #7F7F7F;\n    border-bottom-style: solid;\n    border-bottom-width: thin;\n    background-color: #eee; }\n    .igv-ui-alert-dialog-container > div:first-child div:first-child {\n      padding-left: 8px; }\n  .igv-ui-alert-dialog-container #igv-ui-alert-dialog-body {\n    color: #373737;\n    width: 100%;\n    height: calc(100% - 24px - 64px);\n    overflow-y: scroll; }\n    .igv-ui-alert-dialog-container #igv-ui-alert-dialog-body #igv-ui-alert-dialog-body-copy {\n      cursor: pointer;\n      margin: 16px;\n      width: auto;\n      height: auto;\n      overflow-wrap: break-word;\n      word-break: break-word;\n      background-color: white;\n      border: unset; }\n  .igv-ui-alert-dialog-container > div:last-child {\n    width: 100%;\n    margin-bottom: 10px;\n    background-color: white;\n    display: flex;\n    flex-flow: row;\n    flex-wrap: nowrap;\n    justify-content: center;\n    align-items: center; }\n    .igv-ui-alert-dialog-container > div:last-child div {\n      margin: unset;\n      width: 40px;\n      height: 30px;\n      line-height: 30px;\n      text-align: center;\n      color: white;\n      font-family: \"Open Sans\", sans-serif;\n      font-size: small;\n      font-weight: 400;\n      border-color: #2B81AF;\n      border-style: solid;\n      border-width: thin;\n      border-radius: 4px;\n      background-color: #2B81AF; }\n    .igv-ui-alert-dialog-container > div:last-child div:hover {\n      cursor: pointer;\n      border-color: #25597f;\n      background-color: #25597f; }\n\n.igv-ui-color-swatch {\n  position: relative;\n  box-sizing: content-box;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  width: 32px;\n  height: 32px;\n  border-style: solid;\n  border-width: 2px;\n  border-color: white;\n  border-radius: 4px; }\n\n.igv-ui-color-swatch:hover {\n  border-color: dimgray; }\n\n.igv-ui-colorpicker-menu-close-button {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n  width: 100%;\n  height: 32px;\n  margin-top: 4px;\n  margin-bottom: 4px;\n  padding-right: 8px; }\n  .igv-ui-colorpicker-menu-close-button i.fa {\n    display: block;\n    margin-left: 4px;\n    margin-right: 4px;\n    color: #5f5f5f; }\n  .igv-ui-colorpicker-menu-close-button i.fa:hover,\n  .igv-ui-colorpicker-menu-close-button i.fa:focus,\n  .igv-ui-colorpicker-menu-close-button i.fa:active {\n    cursor: pointer;\n    color: #0f0f0f; }\n\n.igv-ui-generic-dialog-container {\n  box-sizing: content-box;\n  position: fixed;\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  .igv-ui-generic-dialog-container .igv-ui-generic-dialog-header {\n    display: flex;\n    flex-flow: row;\n    flex-wrap: nowrap;\n    justify-content: flex-end;\n    align-items: center;\n    width: 100%;\n    height: 24px;\n    cursor: move;\n    border-top-left-radius: 4px;\n    border-top-right-radius: 4px;\n    border-bottom-color: #7F7F7F;\n    border-bottom-style: solid;\n    border-bottom-width: thin;\n    background-color: #eee; }\n    .igv-ui-generic-dialog-container .igv-ui-generic-dialog-header div {\n      margin-right: 4px;\n      margin-bottom: 2px;\n      height: 12px;\n      width: 12px;\n      color: #7F7F7F; }\n    .igv-ui-generic-dialog-container .igv-ui-generic-dialog-header div:hover {\n      cursor: pointer;\n      color: #444; }\n  .igv-ui-generic-dialog-container .igv-ui-generic-dialog-one-liner {\n    color: #373737;\n    width: 95%;\n    height: 24px;\n    line-height: 24px;\n    text-align: left;\n    margin-top: 8px;\n    padding-left: 8px;\n    overflow-wrap: break-word;\n    background-color: white; }\n  .igv-ui-generic-dialog-container .igv-ui-generic-dialog-label-input {\n    margin-top: 8px;\n    width: 95%;\n    height: 24px;\n    color: #373737;\n    line-height: 24px;\n    padding-left: 8px;\n    background-color: white;\n    display: flex;\n    flex-flow: row;\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    align-items: center; }\n    .igv-ui-generic-dialog-container .igv-ui-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    .igv-ui-generic-dialog-container .igv-ui-generic-dialog-label-input input {\n      display: block;\n      height: 100%;\n      width: 100%;\n      padding-left: 4px;\n      font-family: \"Open Sans\", sans-serif;\n      font-weight: 400;\n      color: #373737;\n      text-align: left;\n      outline: none;\n      border-style: solid;\n      border-width: thin;\n      border-color: #7F7F7F;\n      background-color: white; }\n    .igv-ui-generic-dialog-container .igv-ui-generic-dialog-label-input input {\n      width: 50%;\n      font-size: 16px; }\n  .igv-ui-generic-dialog-container .igv-ui-generic-dialog-input {\n    margin-top: 8px;\n    width: calc(100% - 16px);\n    height: 24px;\n    color: #373737;\n    line-height: 24px;\n    display: flex;\n    flex-flow: row;\n    flex-wrap: nowrap;\n    justify-content: space-around;\n    align-items: center; }\n    .igv-ui-generic-dialog-container .igv-ui-generic-dialog-input input {\n      display: block;\n      height: 100%;\n      width: 100%;\n      padding-left: 4px;\n      font-family: \"Open Sans\", sans-serif;\n      font-weight: 400;\n      color: #373737;\n      text-align: left;\n      outline: none;\n      border-style: solid;\n      border-width: thin;\n      border-color: #7F7F7F;\n      background-color: white; }\n    .igv-ui-generic-dialog-container .igv-ui-generic-dialog-input input {\n      font-size: 16px; }\n  .igv-ui-generic-dialog-container .igv-ui-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    .igv-ui-generic-dialog-container .igv-ui-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    .igv-ui-generic-dialog-container .igv-ui-generic-dialog-ok-cancel div:first-child {\n      margin-left: 32px;\n      margin-right: 0;\n      background-color: #5ea4e0; }\n    .igv-ui-generic-dialog-container .igv-ui-generic-dialog-ok-cancel div:last-child {\n      margin-left: 0;\n      margin-right: 32px;\n      background-color: #c4c4c4; }\n    .igv-ui-generic-dialog-container .igv-ui-generic-dialog-ok-cancel div:first-child:hover {\n      cursor: pointer;\n      background-color: #3b5c7f; }\n    .igv-ui-generic-dialog-container .igv-ui-generic-dialog-ok-cancel div:last-child:hover {\n      cursor: pointer;\n      background-color: #7f7f7f; }\n  .igv-ui-generic-dialog-container .igv-ui-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    .igv-ui-generic-dialog-container .igv-ui-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    .igv-ui-generic-dialog-container .igv-ui-generic-dialog-ok div:hover {\n      cursor: pointer;\n      background-color: #25597f; }\n\n.igv-ui-generic-container {\n  box-sizing: content-box;\n  position: absolute;\n  z-index: 2048;\n  background-color: white;\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center; }\n  .igv-ui-generic-container div:first-child {\n    cursor: move;\n    display: flex;\n    flex-flow: row;\n    flex-wrap: nowrap;\n    justify-content: flex-end;\n    align-items: center;\n    height: 24px;\n    width: 100%;\n    background-color: #dddddd; }\n    .igv-ui-generic-container div:first-child div {\n      display: block;\n      color: #5f5f5f;\n      cursor: pointer;\n      width: 14px;\n      height: 14px;\n      margin-right: 8px;\n      margin-bottom: 4px; }\n\n.igv-ui-dialog {\n  z-index: 2048;\n  position: fixed;\n  width: fit-content;\n  height: fit-content;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  background-color: white;\n  border-color: #7F7F7F;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400; }\n  .igv-ui-dialog .igv-ui-dialog-header {\n    display: flex;\n    flex-flow: row;\n    flex-wrap: nowrap;\n    justify-content: flex-end;\n    align-items: center;\n    width: 100%;\n    height: 24px;\n    cursor: move;\n    border-top-left-radius: 4px;\n    border-top-right-radius: 4px;\n    border-bottom-color: #7F7F7F;\n    border-bottom-style: solid;\n    border-bottom-width: thin;\n    background-color: #eee; }\n    .igv-ui-dialog .igv-ui-dialog-header div {\n      margin-right: 4px;\n      margin-bottom: 2px;\n      height: 12px;\n      width: 12px;\n      color: #7F7F7F; }\n    .igv-ui-dialog .igv-ui-dialog-header div:hover {\n      cursor: pointer;\n      color: #444; }\n  .igv-ui-dialog .igv-ui-dialog-one-liner {\n    width: 95%;\n    height: 24px;\n    line-height: 24px;\n    text-align: left;\n    margin: 8px;\n    overflow-wrap: break-word;\n    background-color: white;\n    font-weight: bold; }\n  .igv-ui-dialog .igv-ui-dialog-ok-cancel {\n    width: 100%;\n    display: flex;\n    flex-flow: row;\n    flex-wrap: nowrap;\n    justify-content: space-around;\n    align-items: center; }\n    .igv-ui-dialog .igv-ui-dialog-ok-cancel div {\n      margin: 16px;\n      margin-top: 32px;\n      color: white;\n      font-family: \"Open Sans\", sans-serif;\n      font-size: 14px;\n      font-weight: 400;\n      width: 75px;\n      height: 28px;\n      line-height: 28px;\n      text-align: center;\n      border-color: transparent;\n      border-style: solid;\n      border-width: thin;\n      border-radius: 2px; }\n    .igv-ui-dialog .igv-ui-dialog-ok-cancel div:first-child {\n      background-color: #5ea4e0; }\n    .igv-ui-dialog .igv-ui-dialog-ok-cancel div:last-child {\n      background-color: #c4c4c4; }\n    .igv-ui-dialog .igv-ui-dialog-ok-cancel div:first-child:hover {\n      cursor: pointer;\n      background-color: #3b5c7f; }\n    .igv-ui-dialog .igv-ui-dialog-ok-cancel div:last-child:hover {\n      cursor: pointer;\n      background-color: #7f7f7f; }\n  .igv-ui-dialog .igv-ui-dialog-ok {\n    width: 100%;\n    height: 36px;\n    margin-top: 32px;\n    display: flex;\n    flex-flow: row;\n    flex-wrap: nowrap;\n    justify-content: space-around;\n    align-items: center; }\n    .igv-ui-dialog .igv-ui-dialog-ok div {\n      width: 98px;\n      height: 36px;\n      line-height: 36px;\n      text-align: center;\n      color: white;\n      font-family: \"Open Sans\", sans-serif;\n      font-size: medium;\n      font-weight: 400;\n      border-color: white;\n      border-style: solid;\n      border-width: thin;\n      border-radius: 4px;\n      background-color: #2B81AF; }\n    .igv-ui-dialog .igv-ui-dialog-ok div:hover {\n      cursor: pointer;\n      background-color: #25597f; }\n\n.igv-ui-panel, .igv-ui-panel-column, .igv-ui-panel-row {\n  z-index: 2048;\n  background-color: white;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start; }\n\n.igv-ui-panel-column {\n  display: flex;\n  flex-direction: column; }\n\n.igv-ui-panel-row {\n  display: flex;\n  flex-direction: row; }\n\n.igv-ui-textbox {\n  background-color: white;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start; }\n\n/*# sourceMappingURL=igv-ui.css.map */\n';
+    var css =  '.igv-ui-popover {\n  cursor: default;\n  position: absolute;\n  z-index: 2048;\n  border-color: #7F7F7F;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: 1px;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: small;\n  background-color: white; }\n  .igv-ui-popover > div:first-child {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n    height: 24px;\n    cursor: move;\n    border-top-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    .igv-ui-popover > div:first-child > div:first-child {\n      margin-left: 4px; }\n    .igv-ui-popover > div:first-child > div:last-child {\n      margin-right: 4px;\n      height: 12px;\n      width: 12px;\n      color: #7F7F7F; }\n    .igv-ui-popover > div:first-child > div:last-child:hover {\n      cursor: pointer;\n      color: #444; }\n  .igv-ui-popover > div:last-child {\n    overflow-y: auto;\n    overflow-x: hidden;\n    max-height: 400px;\n    max-width: 800px;\n    background-color: white; }\n    .igv-ui-popover > div:last-child > div {\n      -webkit-user-select: text;\n      -moz-user-select: text;\n      -ms-user-select: text;\n      user-select: text;\n      margin-left: 4px;\n      margin-right: 4px;\n      min-width: 220px;\n      overflow-x: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap; }\n      .igv-ui-popover > div:last-child > div > span {\n        font-weight: bolder; }\n    .igv-ui-popover > div:last-child hr {\n      width: 100%; }\n\n.igv-ui-alert-dialog-container {\n  box-sizing: content-box;\n  position: absolute;\n  z-index: 2048;\n  top: 50%;\n  left: 50%;\n  width: 400px;\n  height: 200px;\n  border-color: #7F7F7F;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: thin;\n  outline: none;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 15px;\n  font-weight: 400;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center; }\n  .igv-ui-alert-dialog-container > div:first-child {\n    display: flex;\n    flex-flow: row;\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    align-items: center;\n    width: 100%;\n    height: 24px;\n    cursor: move;\n    border-top-left-radius: 4px;\n    border-top-right-radius: 4px;\n    border-bottom-color: #7F7F7F;\n    border-bottom-style: solid;\n    border-bottom-width: thin;\n    background-color: #eee; }\n    .igv-ui-alert-dialog-container > div:first-child div:first-child {\n      padding-left: 8px; }\n  .igv-ui-alert-dialog-container .igv-ui-alert-dialog-body {\n    -webkit-user-select: text;\n    -moz-user-select: text;\n    -ms-user-select: text;\n    user-select: text;\n    color: #373737;\n    width: 100%;\n    height: calc(100% - 24px - 64px);\n    overflow-y: scroll; }\n    .igv-ui-alert-dialog-container .igv-ui-alert-dialog-body .igv-ui-alert-dialog-body-copy {\n      margin: 16px;\n      width: auto;\n      height: auto;\n      overflow-wrap: break-word;\n      word-break: break-word;\n      background-color: white;\n      border: unset; }\n  .igv-ui-alert-dialog-container > div:last-child {\n    width: 100%;\n    margin-bottom: 10px;\n    background-color: white;\n    display: flex;\n    flex-flow: row;\n    flex-wrap: nowrap;\n    justify-content: center;\n    align-items: center; }\n    .igv-ui-alert-dialog-container > div:last-child div {\n      margin: unset;\n      width: 40px;\n      height: 30px;\n      line-height: 30px;\n      text-align: center;\n      color: white;\n      font-family: \"Open Sans\", sans-serif;\n      font-size: small;\n      font-weight: 400;\n      border-color: #2B81AF;\n      border-style: solid;\n      border-width: thin;\n      border-radius: 4px;\n      background-color: #2B81AF; }\n    .igv-ui-alert-dialog-container > div:last-child div:hover {\n      cursor: pointer;\n      border-color: #25597f;\n      background-color: #25597f; }\n\n.igv-ui-color-swatch {\n  position: relative;\n  box-sizing: content-box;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  width: 32px;\n  height: 32px;\n  border-style: solid;\n  border-width: 2px;\n  border-color: white;\n  border-radius: 4px; }\n\n.igv-ui-color-swatch:hover {\n  border-color: dimgray; }\n\n.igv-ui-colorpicker-menu-close-button {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n  width: 100%;\n  height: 32px;\n  margin-top: 4px;\n  margin-bottom: 4px;\n  padding-right: 8px; }\n  .igv-ui-colorpicker-menu-close-button i.fa {\n    display: block;\n    margin-left: 4px;\n    margin-right: 4px;\n    color: #5f5f5f; }\n  .igv-ui-colorpicker-menu-close-button i.fa:hover,\n  .igv-ui-colorpicker-menu-close-button i.fa:focus,\n  .igv-ui-colorpicker-menu-close-button i.fa:active {\n    cursor: pointer;\n    color: #0f0f0f; }\n\n.igv-ui-generic-dialog-container {\n  box-sizing: content-box;\n  position: fixed;\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  .igv-ui-generic-dialog-container .igv-ui-generic-dialog-header {\n    display: flex;\n    flex-flow: row;\n    flex-wrap: nowrap;\n    justify-content: flex-end;\n    align-items: center;\n    width: 100%;\n    height: 24px;\n    cursor: move;\n    border-top-left-radius: 4px;\n    border-top-right-radius: 4px;\n    border-bottom-color: #7F7F7F;\n    border-bottom-style: solid;\n    border-bottom-width: thin;\n    background-color: #eee; }\n    .igv-ui-generic-dialog-container .igv-ui-generic-dialog-header div {\n      margin-right: 4px;\n      margin-bottom: 2px;\n      height: 12px;\n      width: 12px;\n      color: #7F7F7F; }\n    .igv-ui-generic-dialog-container .igv-ui-generic-dialog-header div:hover {\n      cursor: pointer;\n      color: #444; }\n  .igv-ui-generic-dialog-container .igv-ui-generic-dialog-one-liner {\n    color: #373737;\n    width: 95%;\n    height: 24px;\n    line-height: 24px;\n    text-align: left;\n    margin-top: 8px;\n    padding-left: 8px;\n    overflow-wrap: break-word;\n    background-color: white; }\n  .igv-ui-generic-dialog-container .igv-ui-generic-dialog-label-input {\n    margin-top: 8px;\n    width: 95%;\n    height: 24px;\n    color: #373737;\n    line-height: 24px;\n    padding-left: 8px;\n    background-color: white;\n    display: flex;\n    flex-flow: row;\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    align-items: center; }\n    .igv-ui-generic-dialog-container .igv-ui-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    .igv-ui-generic-dialog-container .igv-ui-generic-dialog-label-input input {\n      display: block;\n      height: 100%;\n      width: 100%;\n      padding-left: 4px;\n      font-family: \"Open Sans\", sans-serif;\n      font-weight: 400;\n      color: #373737;\n      text-align: left;\n      outline: none;\n      border-style: solid;\n      border-width: thin;\n      border-color: #7F7F7F;\n      background-color: white; }\n    .igv-ui-generic-dialog-container .igv-ui-generic-dialog-label-input input {\n      width: 50%;\n      font-size: 16px; }\n  .igv-ui-generic-dialog-container .igv-ui-generic-dialog-input {\n    margin-top: 8px;\n    width: calc(100% - 16px);\n    height: 24px;\n    color: #373737;\n    line-height: 24px;\n    display: flex;\n    flex-flow: row;\n    flex-wrap: nowrap;\n    justify-content: space-around;\n    align-items: center; }\n    .igv-ui-generic-dialog-container .igv-ui-generic-dialog-input input {\n      display: block;\n      height: 100%;\n      width: 100%;\n      padding-left: 4px;\n      font-family: \"Open Sans\", sans-serif;\n      font-weight: 400;\n      color: #373737;\n      text-align: left;\n      outline: none;\n      border-style: solid;\n      border-width: thin;\n      border-color: #7F7F7F;\n      background-color: white; }\n    .igv-ui-generic-dialog-container .igv-ui-generic-dialog-input input {\n      font-size: 16px; }\n  .igv-ui-generic-dialog-container .igv-ui-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    .igv-ui-generic-dialog-container .igv-ui-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    .igv-ui-generic-dialog-container .igv-ui-generic-dialog-ok-cancel div:first-child {\n      margin-left: 32px;\n      margin-right: 0;\n      background-color: #5ea4e0; }\n    .igv-ui-generic-dialog-container .igv-ui-generic-dialog-ok-cancel div:last-child {\n      margin-left: 0;\n      margin-right: 32px;\n      background-color: #c4c4c4; }\n    .igv-ui-generic-dialog-container .igv-ui-generic-dialog-ok-cancel div:first-child:hover {\n      cursor: pointer;\n      background-color: #3b5c7f; }\n    .igv-ui-generic-dialog-container .igv-ui-generic-dialog-ok-cancel div:last-child:hover {\n      cursor: pointer;\n      background-color: #7f7f7f; }\n  .igv-ui-generic-dialog-container .igv-ui-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    .igv-ui-generic-dialog-container .igv-ui-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    .igv-ui-generic-dialog-container .igv-ui-generic-dialog-ok div:hover {\n      cursor: pointer;\n      background-color: #25597f; }\n\n.igv-ui-generic-container {\n  box-sizing: content-box;\n  position: absolute;\n  z-index: 2048;\n  background-color: white;\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center; }\n  .igv-ui-generic-container > div:first-child {\n    cursor: move;\n    display: flex;\n    flex-flow: row;\n    flex-wrap: nowrap;\n    justify-content: flex-end;\n    align-items: center;\n    height: 24px;\n    width: 100%;\n    background-color: #dddddd; }\n    .igv-ui-generic-container > div:first-child > div {\n      display: block;\n      color: #5f5f5f;\n      cursor: pointer;\n      width: 14px;\n      height: 14px;\n      margin-right: 8px;\n      margin-bottom: 4px; }\n\n.igv-ui-dialog {\n  z-index: 2048;\n  position: fixed;\n  width: fit-content;\n  height: fit-content;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  background-color: white;\n  border-color: #7F7F7F;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400; }\n  .igv-ui-dialog .igv-ui-dialog-header {\n    display: flex;\n    flex-flow: row;\n    flex-wrap: nowrap;\n    justify-content: flex-end;\n    align-items: center;\n    width: 100%;\n    height: 24px;\n    cursor: move;\n    border-top-left-radius: 4px;\n    border-top-right-radius: 4px;\n    border-bottom-color: #7F7F7F;\n    border-bottom-style: solid;\n    border-bottom-width: thin;\n    background-color: #eee; }\n    .igv-ui-dialog .igv-ui-dialog-header div {\n      margin-right: 4px;\n      margin-bottom: 2px;\n      height: 12px;\n      width: 12px;\n      color: #7F7F7F; }\n    .igv-ui-dialog .igv-ui-dialog-header div:hover {\n      cursor: pointer;\n      color: #444; }\n  .igv-ui-dialog .igv-ui-dialog-one-liner {\n    width: 95%;\n    height: 24px;\n    line-height: 24px;\n    text-align: left;\n    margin: 8px;\n    overflow-wrap: break-word;\n    background-color: white;\n    font-weight: bold; }\n  .igv-ui-dialog .igv-ui-dialog-ok-cancel {\n    width: 100%;\n    display: flex;\n    flex-flow: row;\n    flex-wrap: nowrap;\n    justify-content: space-around;\n    align-items: center; }\n    .igv-ui-dialog .igv-ui-dialog-ok-cancel div {\n      margin: 16px;\n      margin-top: 32px;\n      color: white;\n      font-family: \"Open Sans\", sans-serif;\n      font-size: 14px;\n      font-weight: 400;\n      width: 75px;\n      height: 28px;\n      line-height: 28px;\n      text-align: center;\n      border-color: transparent;\n      border-style: solid;\n      border-width: thin;\n      border-radius: 2px; }\n    .igv-ui-dialog .igv-ui-dialog-ok-cancel div:first-child {\n      background-color: #5ea4e0; }\n    .igv-ui-dialog .igv-ui-dialog-ok-cancel div:last-child {\n      background-color: #c4c4c4; }\n    .igv-ui-dialog .igv-ui-dialog-ok-cancel div:first-child:hover {\n      cursor: pointer;\n      background-color: #3b5c7f; }\n    .igv-ui-dialog .igv-ui-dialog-ok-cancel div:last-child:hover {\n      cursor: pointer;\n      background-color: #7f7f7f; }\n  .igv-ui-dialog .igv-ui-dialog-ok {\n    width: 100%;\n    height: 36px;\n    margin-top: 32px;\n    display: flex;\n    flex-flow: row;\n    flex-wrap: nowrap;\n    justify-content: space-around;\n    align-items: center; }\n    .igv-ui-dialog .igv-ui-dialog-ok div {\n      width: 98px;\n      height: 36px;\n      line-height: 36px;\n      text-align: center;\n      color: white;\n      font-family: \"Open Sans\", sans-serif;\n      font-size: medium;\n      font-weight: 400;\n      border-color: white;\n      border-style: solid;\n      border-width: thin;\n      border-radius: 4px;\n      background-color: #2B81AF; }\n    .igv-ui-dialog .igv-ui-dialog-ok div:hover {\n      cursor: pointer;\n      background-color: #25597f; }\n\n.igv-ui-panel, .igv-ui-panel-column, .igv-ui-panel-row {\n  z-index: 2048;\n  background-color: white;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start; }\n\n.igv-ui-panel-column {\n  display: flex;\n  flex-direction: column; }\n\n.igv-ui-panel-row {\n  display: flex;\n  flex-direction: row; }\n\n.igv-ui-textbox {\n  background-color: white;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start; }\n\n/*# sourceMappingURL=igv-ui.css.map */\n';
     var style = document.createElement('style');
     style.setAttribute('type', 'text/css');
@@ -19709,6 +19711,7 @@ const knownFileExtensions = new Set([
     "vcf",
     "bb",
     "bigbed",
+    "biginteract",
     "bw",
     "bigwig",
     "bam",
@@ -19859,6 +19862,7 @@ function inferTrackType(config) {
             case "bed":
             case "bigbed":
             case "bb":
+            case "biginteract":
                 return "bedtype"
             default:
                 return "annotation"
@@ -19897,6 +19901,218 @@ function translateDeprecatedTypes(config) {
     }
 }
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2014 Broad Institute
+ *
+ * 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.
+ */
+/**
+ * Test if the given value is a string or number.  Not using typeof as it fails on boxed primitives.
+ *
+ * @param value
+ * @returns boolean
+ */
+function isSimpleType(value) {
+    const simpleTypes = new Set(["boolean", "number", "string", "symbol"]);
+    const valueType = typeof value;
+    return (value !== undefined && (simpleTypes.has(valueType) || value.substring || value.toFixed))
+}
+function buildOptions(config, options) {
+    var defaultOptions = {
+        oauthToken: config.oauthToken,
+        headers: config.headers,
+        withCredentials: config.withCredentials,
+        filename: config.filename
+    };
+    return Object.assign(defaultOptions, options)
+}
+/**
+ * isMobile test from http://detectmobilebrowsers.com
+ * TODO -- improve UI design so this isn't neccessary
+ * @returns {boolean}
+ */
+// igv.isMobile = function () {
+//
+//     const a = (navigator.userAgent || navigator.vendor || window.opera);
+//     return (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) ||
+//         /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4)))
+//
+// }
+const doAutoscale = function (features) {
+    var min, max;
+    if (features.length > 0) {
+        min = Number.MAX_VALUE;
+        max = -Number.MAX_VALUE;
+        features.forEach(function (f) {
+            if (!Number.isNaN(f.value)) {
+                min = Math.min(min, f.value);
+                max = Math.max(max, f.value);
+            }
+        });
+        // Insure we have a zero baseline
+        if (max > 0) min = Math.min(0, min);
+        if (max < 0) max = 0;
+    } else {
+        // No features -- default
+        min = 0;
+        max = 100;
+    }
+    return {min: min, max: max}
+};
+const validateLocusExtent = function (chromosomeLengthBP, extent, minimumBP) {
+    let ss = extent.start;
+    let ee = extent.end;
+    if (undefined === ee) {
+        ss -= minimumBP / 2;
+        ee = ss + minimumBP;
+        if (ee > chromosomeLengthBP) {
+            ee = chromosomeLengthBP;
+            ss = ee - minimumBP;
+        } else if (ss < 0) {
+            ss = 0;
+            ee = minimumBP;
+        }
+    } else if (ee - ss < minimumBP) {
+        const center = (ee + ss) / 2;
+        if (center - minimumBP / 2 < 0) {
+            ss = 0;
+            ee = ss + minimumBP;
+        } else if (center + minimumBP / 2 > chromosomeLengthBP) {
+            ee = chromosomeLengthBP;
+            ss = ee - minimumBP;
+        } else {
+            ss = center - minimumBP / 2;
+            ee = ss + minimumBP;
+        }
+    }
+    extent.start = Math.ceil(ss);
+    extent.end = Math.floor(ee);
+};
+/*!
+ * is-number <https://github.com/jonschlinkert/is-number>
+ *
+ * Copyright (c) 2014-present, Jon Schlinkert.
+ * Released under the MIT License.
+ */
+const isNumber = function (num) {
+    if (typeof num === 'number') {
+        return num - num === 0
+    }
+    if (typeof num === 'string' && num.trim() !== '') {
+        return Number.isFinite ? Number.isFinite(+num) : isFinite(+num)
+    }
+    return false
+};
+async function getFilename(url) {
+    if (isString$3(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")
+        }
+        const json = await getDriveFileInfo(url);
+        return json.originalFileName || json.name
+    } else {
+        return getFilename$1(url)
+    }
+}
+function prettyBasePairNumber(raw) {
+    var denom,
+        units,
+        value,
+        floored;
+    if (raw > 1e7) {
+        denom = 1e6;
+        units = " mb";
+    } else if (raw > 1e4) {
+        denom = 1e3;
+        units = " kb";
+        value = raw / denom;
+        floored = Math.floor(value);
+        return numberFormatter$1(floored) + units
+    } else {
+        return numberFormatter$1(raw) + " bp"
+    }
+    value = raw / denom;
+    floored = Math.floor(value);
+    return floored.toString() + units
+}
+function isDataURL(obj) {
+    return (isString$3(obj) && obj.startsWith("data:"))
+}
+function createColumn(columnContainer, className) {
+    const column = div$1({class: className});
+    columnContainer.appendChild(column);
+}
+function insertElementBefore(element, referenceNode) {
+    referenceNode.parentNode.insertBefore(element, referenceNode);
+}
+function insertElementAfter(element, referenceNode) {
+    referenceNode.parentNode.insertBefore(element, referenceNode.nextSibling);
+}
+/**
+ * Test to see if page is loaded in a secure context, that is by https or is localhost.
+ */
+function isSecureContext() {
+    return window.location.protocol === "https:" || window.location.hostname === "localhost"
+}
 /*
  * The MIT License (MIT)
  *
@@ -20275,7 +20491,7 @@ class Viewport {
     constructor(trackView, viewportColumn, referenceFrame, width) {
-        this.guid = guid$1();
+        this.guid = guid$2();
         this.trackView = trackView;
         this.referenceFrame = referenceFrame;
@@ -22054,7 +22270,7 @@ GenomicInterval.prototype.containsRange = function (range) {
 const splitLines$3 = splitLines$5;
-const reservedProperties = new Set(['fastaURL', 'indexURL', 'cytobandURL', 'indexed']);
+const reservedProperties = new Set(['fastaURL', 'indexURL', 'compressedIndexURL', 'cytobandURL', 'indexed']);
 class FastaSequence {
@@ -22062,6 +22278,7 @@ class FastaSequence {
         this.file = reference.fastaURL;
         this.indexFile = reference.indexURL || reference.indexFile || this.file + ".fai";
+        this.compressedIndexFile = reference.compressedIndexURL || false;
         this.withCredentials = reference.withCredentials;
         this.chromosomeNames = [];
         this.chromosomes = {};
@@ -22147,77 +22364,292 @@ class FastaSequence {
         }
     }
-    async readSequence(chr, qstart, qend) {
-        // let offset;
-        // let start;
-        // let end;
-        // let basesPerLine;
-        // let nEndBytes;
+    //Code is losely based on https://github.com/GMOD/bgzf-filehandle
+    //Reworked however in orde to work with the igvxhr interface for loading files
+    //Additionally, replaced calls to the Long.js interface with standard JS calls for ArrayBuffers and the associated views
+    //
+    //The compressed index is an array of blocks, with each block being a pair: compressed-position & uncompressed-position (both in bytes)
+    async getCompressedIndex() {
+        const GZI_NUM_BYTES_OFFSET = 8;
+        const GZI_NUM_BYTES_BLOCK = 8;
+        if (this.compressedIndex) {
+            return this.compressedIndex
+        }
+        if (!this.compressedIndexFile) {
+            this.compressedIndex = [];
+            return this.compressedIndex
+        }
+        //In contrast to the 'normal' reference (for which the index is chromosome based), this index is block-based
+        //As such there is not need to make it a hash. An array is sufficient.
+        this.compressedIndex = [];
+        const gziData = await igvxhr.loadArrayBuffer(this.compressedIndexFile, buildOptions(this.config));
+        const givenFileSize = gziData.byteLength;
+        if (givenFileSize < GZI_NUM_BYTES_OFFSET) {
+            console.log("Cannot parse GZI index file: length (" + givenFileSize + " bytes) is insufficient to determine content of index.");
+            return this.compressedIndex
+        }
+        //First 8 bytes are a little endian unsigned bigint (64bit), indicating the number of blocks in the index.
+        const numBlocksBuffer = gziData.slice(0, GZI_NUM_BYTES_OFFSET);
+        const numBlocks = Number((new DataView(numBlocksBuffer)).getBigUint64(0, true));
+        //The remainder of the gzi content are pairs of little endian unsigned bigint (64bit) numbers.
+        //The first of the pair is the compressed position of a block
+        //The second of the pair is the uncompressed position of a block
+        //Sanity check:
+        //Is the size of the array-buffer (of the entire file) correct with regards to the number of blocks detailled by the first 8 bytes of the file?
+        //Total file-size should be:
+        // 8 + 2*(num_entries*8) bytes, with the first 8 bytes indicating the number of entries
+        const expectedFileSize = GZI_NUM_BYTES_OFFSET + numBlocks * 2 * GZI_NUM_BYTES_BLOCK;
+        if (givenFileSize != expectedFileSize) {
+            console.log("Incorrect file size of reference genome index. Expected : " + expectedFileSize + ". Received : " + givenFileSize);
+            return this.compressedIndex
+        }
+        //Push the first block to the index: the first block always has positions 0 for both the compressed and uncompressed file
+        this.compressedIndex.push([0, 0]);
+        //Further process all the blocks of the GZI index, and keep them in memory
+        for (let blockNumber = 0; blockNumber < numBlocks; blockNumber++) {
+            const bufferBlockStart = GZI_NUM_BYTES_OFFSET + blockNumber * 2 * GZI_NUM_BYTES_BLOCK;
+            const bufferBlockEnd = GZI_NUM_BYTES_OFFSET + blockNumber * 2 * GZI_NUM_BYTES_BLOCK + 2 * GZI_NUM_BYTES_BLOCK;
+            const bufferBlock = gziData.slice(bufferBlockStart, bufferBlockEnd);
+            const viewBlock = new DataView(bufferBlock);
+            const compressedPosition = Number(viewBlock.getBigUint64(0, true));  //First 8 bytes
+            const uncompressedPosition = Number(viewBlock.getBigUint64(GZI_NUM_BYTES_BLOCK, true)); //Last 8 bytes
+            this.compressedIndex.push([compressedPosition, uncompressedPosition]);
+        }
+        return this.compressedIndex
+    }
+    //The Fasta-index gives a byte-position of the chromosomal sequences within the FASTA file.
+    //These locations need to be remapped to the locations within the zipped reference genome, using the GZI index
+    //This function provides this functionality by
+    //1) taking the indicated start/stop byte locations within the UNCOMPRESSED FASTA file
+    //2) remapping these byte locations to the correct blocks (and associated positions) within the COMPRESSED FASTA file
+    //Subsequently, the calling method can then extract the correct blocks from the compressed FASTA files and uncompressed the data
+    async getRelevantCompressedBlockNumbers(queryPositionStart, queryPositionEnd) {
+        const UNCOMPRESSED_POSITION = 1;
+        //Fallback for impossible values
+        if (queryPositionStart < 0 || queryPositionEnd < 0 || queryPositionEnd < queryPositionStart) {
+            console.log("Incompatible query positions for reference-genome. Start:" + queryPositionStart + " | End:" + queryPositionEnd);
+            return []
+        }
+        //Ensure compressed index is loaded
+        await this.getCompressedIndex();
+        let result = [];
+        //Now search for the correct block-numbers (going from 0 to length(compressed-index)) which overlap with the provided byte-positions
+        const lowestBlockNumber = 0;
+        const highestBlockNumber = this.compressedIndex.length - 1;
+        //Failsafe if for some reason the compressed index wasn't loaded or doesn't contain any data
+        if (this.compressedIndex.length == 0) {
+            console.log("Compressed index does not contain any content");
+            return []
+        }
+        //Failsafe: if the queryPositionStart is greater than the uncompressed-position of the final block,
+        //then this final block is the only possible result
+        if (queryPositionStart > (this.compressedIndex)[highestBlockNumber][UNCOMPRESSED_POSITION]) {
+            return [highestBlockNumber]
+        }
+        //Rather than doing a linear search over all blocks, a binary search is done for speed considerations
+        //We are searching for the highest block number for which its position is smaller than the query start position
+        //Afterwards we will simply expand the blocks until the entire query range is covered
+        let searchLow = lowestBlockNumber;
+        let searchHigh = highestBlockNumber;
+        let searchPosition = Math.floor(this.compressedIndex.length / 2);
+        let maxIterations = this.compressedIndex.length + 1;
+        let solutionFound = false;
+        //instead of doing a while(true), this for-loop prevents eternal loops in case of issues
+        for (let iteration = 0; iteration < maxIterations; iteration++) {
+            const searchUncompressedPosition = (this.compressedIndex)[searchPosition][UNCOMPRESSED_POSITION];
+            const nextSearchUncompressedPosition = (searchPosition < (this.compressedIndex.length - 1)) ? (this.compressedIndex)[searchPosition + 1][UNCOMPRESSED_POSITION] : Infinity;
+            //The query position lies within the current search block
+            if (searchUncompressedPosition <= queryPositionStart && nextSearchUncompressedPosition > queryPositionStart) {
+                solutionFound = true;
+                break //searchPosition is the correct block number index
+            }
+            //Current block lies before the query position
+            else if (searchUncompressedPosition < queryPositionStart) {
+                searchLow = searchPosition + 1;
+            }
+            //Current block lies after the query position
+            else {
+                searchHigh = searchPosition - 1;
+            }
+            searchPosition = Math.ceil((searchHigh - searchLow) / 2) + searchLow;
+        }
+        //If for some reason the binary search did not reveal a correct block index, then we return the empty result
+        if (!solutionFound) {
+            console.log("No blocks within compressed index found that correspond with query positions " + queryPositionStart + "," + queryPositionEnd);
+            console.log(this.compressedIndex);
+            return []
+        }
+        //Now extend the result by adding additional blocks until the entire query range is covered
+        result.push(searchPosition);
+        for (let blockIndex = searchPosition + 1; blockIndex < this.compressedIndex.length; blockIndex++) {
+            result.push(blockIndex);
+            const blockUncompressedPosition = (this.compressedIndex)[blockIndex][UNCOMPRESSED_POSITION];
+            if (blockUncompressedPosition >= queryPositionEnd) {
+                break
+            }
+        }
+        //It is possible that the query end position lies AFTER the start of the final block
+        //If this is the case, we add a 'fake' negative index which will be interpreted by the loadAndUncompressBlocks method as an indicator
+        //to read until the end of the file
+        const finalRelevantBlock = result[result.length - 1];
+        const finalIndexBlock = this.compressedIndex.length - 1;
+        if (finalRelevantBlock === finalIndexBlock && (this.compressedIndex)[finalRelevantBlock][UNCOMPRESSED_POSITION] < queryPositionEnd) {
+            result.push(-1);
+        }
+        return result
+    }
+    //Load the content from the blockIndices.
+    //This is done on a per-block basis
+    //Content of the first block will be trimmed in order to match the expected offset
+    async loadAndUncompressBlocks(blockIndices, startByte) {
+        const COMPRESSED_POSITION = 0;
+        const UNCOMPRESSED_POSITION = 1;
+        //Normally the compressed index should already exist, we're just makeing sure here
+        await this.getCompressedIndex();
+        if (blockIndices.length == 0) {
+            return ""
+        }
+        //Storing data in seperate array with indices in order to assert order due to async behaviour of loops
+        let resultCache = Array(blockIndices.length - 1);
+        for (let i = 0; i < blockIndices.length - 1; i++) {
+            const currentBlockNumber = blockIndices[i];
+            const currentBlockInfo = (this.compressedIndex)[currentBlockNumber];
+            const currentBlockCompressedPosition = currentBlockInfo[COMPRESSED_POSITION];
+            const nextBlockNumber = blockIndices[i + 1];
+            let compressedBytes = [];
+            if (nextBlockNumber != -1) {  //default : read current entire block only
+                const nextBlockInfo = (this.compressedIndex)[nextBlockNumber];
+                const nextBlockCompressedPosition = nextBlockInfo[COMPRESSED_POSITION];
+                const compressedLength = nextBlockCompressedPosition - currentBlockCompressedPosition;
+                compressedBytes = await igvxhr.loadArrayBuffer(this.file, buildOptions(this.config, {
+                    range: {
+                        start: currentBlockCompressedPosition,
+                        size: compressedLength
+                    }
+                }));
+            } else {   // special case for query within final block: read until the end of the file
+                compressedBytes = await igvxhr.loadArrayBuffer(this.file, buildOptions(this.config, {
+                    range: {
+                        start: currentBlockCompressedPosition
+                    }
+                }));
+            }
+            //now unzip the compressed bytes, and store them in the resultCache
+            const uncompressedBytes = await unbgzf(compressedBytes);
+            resultCache[i] = uncompressedBytes;
+        }
+        //Iterate over the result cache, create sequences from the data, and create a full sequence string from the data
+        let result = "";
+        for (let i = 0; i < resultCache.length; i++) {
+            for (let j = 0; j < resultCache[i].length; j++) {
+                const c = String.fromCharCode(resultCache[i][j]);
+                result = result + c;
+            }
+        }
+        //postprocess this data: because entire blocks are read we need to remove the first N bases of the first used block,
+        //which are not included in the original query positions
+        const firstBlockInfo = (this.compressedIndex)[blockIndices[0]];
+        const offset = startByte - firstBlockInfo[UNCOMPRESSED_POSITION];
+        result = result.substring(offset);
+        return result
+    }
+    async readSequence(chr, qstart, qend) {
         await this.getIndex();
+        await this.getCompressedIndex(); //This will work even if no compressed index file is set
         const idxEntry = this.index[chr];
         if (!idxEntry) {
             console.log("No index entry for chr: " + chr);
             // Tag interval with null so we don't try again
             this.interval = new GenomicInterval(chr, qstart, qend, null);
             return null
+        }
-        } else {
+        const start = Math.max(0, qstart);    // qstart should never be < 0
+        const end = Math.min(idxEntry.size, qend);
+        const bytesPerLine = idxEntry.bytesPerLine;
+        const basesPerLine = idxEntry.basesPerLine;
+        const position = idxEntry.position;
+        const nEndBytes = bytesPerLine - basesPerLine;
+        const startLine = Math.floor(start / basesPerLine);
+        const endLine = Math.floor(end / basesPerLine);
+        const base0 = startLine * basesPerLine;   // Base at beginning of start line
+        const offset = start - base0;
+        const startByte = position + startLine * bytesPerLine + offset;
+        const base1 = endLine * basesPerLine;
+        const offset1 = end - base1;
+        const endByte = position + endLine * bytesPerLine + offset1 - 1;
+        const byteCount = endByte - startByte + 1;
+        if (byteCount <= 0) {
+            console.error("No sequence for " + chr + ":" + qstart + "-" + qend);
+            return null
+        }
-            const start = Math.max(0, qstart);    // qstart should never be < 0
-            const end = Math.min(idxEntry.size, qend);
-            const bytesPerLine = idxEntry.bytesPerLine;
-            const basesPerLine = idxEntry.basesPerLine;
-            const position = idxEntry.position;
-            const nEndBytes = bytesPerLine - basesPerLine;
-            const startLine = Math.floor(start / basesPerLine);
-            const endLine = Math.floor(end / basesPerLine);
-            const base0 = startLine * basesPerLine;   // Base at beginning of start line
-            const offset = start - base0;
-            const startByte = position + startLine * bytesPerLine + offset;
-            const base1 = endLine * basesPerLine;
-            const offset1 = end - base1;
-            const endByte = position + endLine * bytesPerLine + offset1 - 1;
-            const byteCount = endByte - startByte + 1;
-            let allBytes;
-            if (byteCount <= 0) {
-                console.error("No sequence for " + chr + ":" + qstart + "-" + qend);
-            } else {
-                allBytes = await igvxhr.load(this.file, buildOptions(this.config, {
-                    range: {
-                        start: startByte,
-                        size: byteCount
-                    }
-                }));
+        //If the compressed index file is set, then we are dealing with a compressed genome sequence
+        //The selection of startByte/endByte is done for the non-compressed genome sequence.
+        //These need to be 'converted' to the correct byte positions in the compressed genome sequence,
+        //by making use of the compressed index (GZI file)
+        let allBytes;
+        if (!this.compressedIndexFile) {
+            allBytes = await igvxhr.load(this.file, buildOptions(this.config, {
+                range: {
+                    start: startByte,
+                    size: byteCount
+                }
+            }));
+        } else {
+            let relevantBlockIndices = await this.getRelevantCompressedBlockNumbers(startByte, endByte);
+            if (relevantBlockIndices.length === 0) {
+                console.log("No blocks in the compressed index that correspond with the requested byte positions (" + startByte + "," + endByte + ")");
+                return null
             }
+            allBytes = await this.loadAndUncompressBlocks(relevantBlockIndices, startByte);
+        }
-            if (!allBytes) {
-                return null
-            } else {
-                let nBases,
-                    seqBytes = "",
-                    srcPos = 0,
-                    allBytesLength = allBytes.length;
+        if (!allBytes) {
+            return null
+        }
-                if (offset > 0) {
-                    nBases = Math.min(end - start, basesPerLine - offset);
-                    seqBytes += allBytes.substr(srcPos, nBases);
-                    srcPos += (nBases + nEndBytes);
-                }
+        let nBases,
+            seqBytes = "",
+            srcPos = 0,
+            allBytesLength = allBytes.length;
-                while (srcPos < allBytesLength) {
-                    nBases = Math.min(basesPerLine, allBytesLength - srcPos);
-                    seqBytes += allBytes.substr(srcPos, nBases);
-                    srcPos += (nBases + nEndBytes);
-                }
+        if (offset > 0) {
+            nBases = Math.min(end - start, basesPerLine - offset);
+            seqBytes += allBytes.substr(srcPos, nBases);
+            srcPos += (nBases + nEndBytes);
+        }
-                return seqBytes
-            }
+        while (srcPos < allBytesLength) {
+            nBases = Math.min(basesPerLine, allBytesLength - srcPos);
+            seqBytes += allBytes.substr(srcPos, nBases);
+            srcPos += (nBases + nEndBytes);
         }
+        return seqBytes
     }
 }
@@ -22329,7 +22761,7 @@ const Cytoband = function (start, end, name, typestain) {
     }
 };
-const _version = "2.10.5";
+const _version = "2.11.2";
 function version() {
     return _version
 }
@@ -22856,7 +23288,9 @@ class TrackViewport extends Viewport {
     }
     stopSpinner() {
-        this.$spinner.hide();
+        if (this.$spinner) {
+            this.$spinner.hide();
+        }
     }
     checkZoomIn() {
@@ -23183,7 +23617,7 @@ class TrackViewport extends Viewport {
         const str = (this.trackView.track.name || this.trackView.track.id).replace(/\W/g, '');
         const index = this.browser.referenceFrameList.indexOf(this.referenceFrame);
-        const id = `${str}_referenceFrame_${index}_guid_${guid$1()}`;
+        const id = `${str}_referenceFrame_${index}_guid_${guid$2()}`;
         this.drawSVGWithContext(context, width, height, id, 0, 0, 0);
@@ -23206,7 +23640,7 @@ class TrackViewport extends Viewport {
         const str = (this.trackView.track.name || this.trackView.track.id).replace(/\W/g, '');
         const index = this.browser.referenceFrameList.indexOf(this.referenceFrame);
-        const id = `${str}_referenceFrame_${index}_guid_${guid$1()}`;
+        const id = `${str}_referenceFrame_${index}_guid_${guid$2()}`;
         const {top: yScrollDelta} = this.$content.position();
@@ -23225,7 +23659,7 @@ class TrackViewport extends Viewport {
     renderTrackLabelSVG(context, tx, ty, width, height) {
         const str = (this.trackView.track.name || this.trackView.track.id).replace(/\W/g, '');
-        const id = `${str}_track_label_guid_${guid$1()}`;
+        const id = `${str}_track_label_guid_${guid$2()}`;
         context.saveWithTranslationAndClipRect(id, tx, ty, width, height, 0);
@@ -23552,28 +23986,16 @@ class TrackViewport extends Viewport {
                 str = track.description();
             } else if (track.description) {
                 str = `<div>${track.description}</div>`;
-            } else {
-                if (track.url) {
-                    if (isFile(track.url)) {
-                        str = `<div><b>Filename: </b>${track.url.name}`;
-                    } else {
-                        str = `<div><b>URL: </b>${track.url}`;
-                    }
-                } else {
-                    str = track.name;
-                }
             }
-            if (this.popover) {
-                this.popover.dispose();
+            if (str) {
+                if (this.popover) {
+                    this.popover.dispose();
+                }
+                this.popover = new Popover(this.browser.columnContainer, (track.name || ''));
+                this.popover.presentContentWithEvent(event, str);
             }
-            this.popover = new Popover(this.browser.columnContainer, (track.name || 'unnamed'));
-            this.popover.presentContentWithEvent(event, str);
         }
     }
     removeTrackLabelClickHandler(trackLabel) {
@@ -28743,7 +29165,7 @@ class TrackBase {
         this.config = config;
         this.url = config.url;
         this.type = config.type;
-        this.description = config.description;
         this.supportHiDPI = config.supportHiDPI === undefined ? true : config.supportHiDPI;
         if (config.name || config.label) {
@@ -28781,6 +29203,15 @@ class TrackBase {
             this.onclick = config.onclick;
             config.onclick = undefined;   // functions cannot be saved in sessions, clear it here.
         }
+        if (config.description) {
+            // Override description -- displayed when clicking on track label.  Convert to function if neccessary
+            if (typeof config.description === 'function') {
+                this.description = config.description;
+            } else {
+                this.description = () => config.description;
+            }
+        }
     }
     get name() {
@@ -28823,7 +29254,7 @@ class TrackBase {
         for (let key of Object.keys(state)) {
             if (key.startsWith("_")) continue   // transient property
             const value = this[key];
-            if (value && (isSimpleType(value) || typeof value === "boolean")) {
+            if (value && (isSimpleType(value) || typeof value === "boolean" || key === "metadata")) {
                 state[key] = value;
             }
         }
@@ -28837,16 +29268,18 @@ class TrackBase {
             state.max = this.dataRange.max;
         }
         // Check for non-json-if-yable properties.  Perhaps we should test what can be saved.
         for (let key of Object.keys(state)) {
-            if (typeof state[key] === 'function') {
+            const value = state[key];
+            if (typeof value === 'function') {
                 throw Error(`Property '${key}' of track '${this.name} is a function. Functions cannot be saved in sessions.`)
             }
-            if (isFile(state[key])) {
+            if (value instanceof File) {   // Test specifically for File.  Other types of File-like objects might be savable
                 const str = `Track ${this.name} is a local file. Sessions cannot be saved with local file references.`;
                 throw Error(str)
             }
-            if (state[key] instanceof Promise) {
+            if (value instanceof Promise) {
                 throw Error(`Property '${key}' of track '${this.name} is a Promise. Promises cannot be saved in sessions.`)
             }
         }
@@ -29092,6 +29525,49 @@ class TrackBase {
     }
+    /**
+     * Default track description -- displayed on click of track label.  This can be overriden in the track
+     * configuration, or in subclasses.
+     */
+    description() {
+        const wrapKeyValue = (k, v) => `<div class="igv-track-label-popup-shim"><b>${k}: </b>${v}</div>`;
+        let str = '<div class="igv-track-label-popup">';
+        if (this.url) {
+            if (isFile(this.url)) {
+                str += wrapKeyValue('Filename', this.url.name);
+            } else {
+                str += wrapKeyValue('URL', this.url);
+            }
+        } else {
+            str = this.name;
+        }
+        if (this.config) {
+            if (this.config.metadata) {
+                for (let key of Object.keys(this.config.metadata)) {
+                    const value = this.config.metadata[key];
+                    str += wrapKeyValue(key, value);
+                }
+            }
+            // Add any config properties that are capitalized
+            for (let key of Object.keys(this.config)) {
+                if (key.startsWith("_")) continue   // transient property
+                let first = key.substr(0, 1);
+                if (first !== first.toLowerCase()) {
+                    const value = this.config[key];
+                    if (value && isSimpleType(value)) {
+                        str += wrapKeyValue(key, value);
+                    }
+                }
+            }
+        }
+        str += '</div>';
+        return str
+    }
     static getCravatLink(chr, position, ref, alt, genomeID) {
         if ("hg38" === genomeID || "GRCh38" === genomeID) {
@@ -29138,6 +29614,8 @@ function paintAxis(ctx, pixelWidth, pixelHeight) {
         return
     }
+    let flipAxis = (undefined === this.flipAxis) ? false : this.flipAxis;
     IGVGraphics.fillRect(ctx, 0, 0, pixelWidth, pixelHeight, {'fillStyle': "rgb(255, 255, 255)"});
     reference = 0.95 * pixelWidth;
@@ -29152,7 +29630,7 @@ function paintAxis(ctx, pixelWidth, pixelHeight) {
     // tick
     IGVGraphics.strokeLine(ctx, x1, y1, x2, y2, font);
-    IGVGraphics.fillText(ctx, prettyPrint(this.dataRange.max), x1 + 4, y1 + 12, font);
+    IGVGraphics.fillText(ctx, prettyPrint(flipAxis ? this.dataRange.min : this.dataRange.max), x1 + 4, y1 + 12, font);
     //shim = 0.25 * 0.125;
     y1 = y2 = (1.0 - shim) * pixelHeight;
@@ -29161,7 +29639,7 @@ function paintAxis(ctx, pixelWidth, pixelHeight) {
     // tick
     IGVGraphics.strokeLine(ctx, x1, y1, x2, y2, font);
-    IGVGraphics.fillText(ctx, prettyPrint(this.dataRange.min), x1 + 4, y1 - 4, font);
+    IGVGraphics.fillText(ctx, prettyPrint(flipAxis ? this.dataRange.max : this.dataRange.min), x1 + 4, y1 - 4, font);
     IGVGraphics.strokeLine(ctx, a.x, a.y, b.x, b.y, font);
@@ -30566,6 +31044,75 @@ const chrColorMap$1 = {
     "chr48": "rgb(20, 255, 177)",
 };
+class ChordSetManager {
+    constructor(config) {
+        this.tracks = [];
+        this.chordSets = [];
+    }
+    addChordSet(chordSet) {
+        // If a chord set with this name exists replace it (same track, same region)
+        this.chordSets = this.chordSets.filter(g => g.name !== chordSet.name);
+        this.chordSets.push(chordSet);
+        let track = this.tracks.find(t => chordSet.trackName === t.name);
+        if (track) {
+            track.chordSets = track.chordSets.filter(cs => cs.name !== chordSet.name);
+            track.chordSets.push(chordSet);
+        }
+        if (!track) {
+            track = new IGVTrack(chordSet);
+            this.tracks.push(track);
+        }
+    }
+    clearChords() {
+        this.tracks = [];
+        this.chordSets = [];
+    }
+    getTrack(name) {
+        return this.tracks.find(t => name === t.name)
+    }
+    getChordset(name) {
+        return this.chordSets.find(cs => name === cs.name)
+    }
+}
+class IGVTrack {
+    constructor(chordSet) {
+        this.name = chordSet.trackName;
+        this.color = chordSet.trackColor;
+        this.visible = true;
+        this.chordSets = [chordSet];
+        this.id = guid$1();
+    }
+    get chords() {
+        if (this.chordSets.length === 1) {
+            return this.chordSets[0].chords
+        }
+        const chords = [];
+        for (let cs of this.chordSets) {
+            for (let c of cs.chords) {
+                chords.push(c);
+            }
+        }
+        return chords
+    }
+}
+function guid$1() {
+    return ("0000" + (Math.random() * Math.pow(36, 4) << 0).toString(36)).slice(-4)
+}
+const EXP5 = Math.exp(5);
 class CircularView {
     static isInstalled() {
@@ -30590,6 +31137,8 @@ class CircularView {
         if (CircularView.isInstalled()) {
             this.parent = parent;
+            this.groupByTrack = config.groupByTrack === true;
+            this.chordManager = new ChordSetManager(config);
             // wrapper for toolbar and circular-view container
             const wrapper = document.createElement('div');
@@ -30597,7 +31146,8 @@ class CircularView {
             parent.appendChild(wrapper);
             // toolbar
-            this.createToolbarAndTrackPanel(wrapper);
+            this.createControls(wrapper);
+            this.resetControlPanel();
             // circular view container
             const element = document.createElement('div');
@@ -30609,8 +31159,6 @@ class CircularView {
                 this.setAssembly(config.assembly);
             }
-            this.tracks = config.tracks || [];
             this.width = config.width || 500;
             this.height = config.height || 500;
             this.setSize(this.width, this.height);
@@ -30620,55 +31168,47 @@ class CircularView {
         }
     }
-    createToolbarAndTrackPanel(parent) {
-        let element;
+    createControls(parent) {
         // toolbar
-        element = document.createElement('div');
-        element.className = 'igv-circview-toolbar';
-        parent.appendChild(element);
-        this.toolbar = element;
+        const toolbarDiv = document.createElement('div');
+        toolbarDiv.className = 'igv-circview-toolbar';
+        parent.appendChild(toolbarDiv);
+        this.toolbar = toolbarDiv;
-        // track panel
-        element = document.createElement('div');
-        element.className = 'igv-circview-track-panel';
-        parent.appendChild(element);
-        this.trackPanel = element;
-        this.trackPanel.style.display = 'none';
+        // control panel
+        const controlPanelDiv = document.createElement('div');
+        controlPanelDiv.className = 'igv-circview-track-panel';
+        parent.appendChild(controlPanelDiv);
+        this.controlPanel = controlPanelDiv;
+        this.controlPanel.style.display = 'none';
         // toolbar button container - Track Options - Clear All
-        let buttonContainer = document.createElement('div');
+        const buttonContainer = document.createElement('div');
         buttonContainer.className = 'igv-circview-toolbar-button-container';
         this.toolbar.appendChild(buttonContainer);
-        // Track Options
-        this.trackPanelPresentationButton = document.createElement('div');
-        this.trackPanelPresentationButton.className = 'igv-circview-button';
-        buttonContainer.appendChild(this.trackPanelPresentationButton);
-        this.trackPanelPresentationButton.innerText = 'none' === this.trackPanel.style.display ? 'Show Track Options' : 'Hide Track Options';
-        this.trackPanelPresentationButton.addEventListener('click', (event) => {
-            const trackPanelRows = this.trackPanel.querySelectorAll('div');
+        // Show Controls
+        this.showControlsButton = document.createElement('div');
+        this.showControlsButton.className = 'igv-circview-button';
+        buttonContainer.appendChild(this.showControlsButton);
+        this.showControlsButton.innerText = 'none' === this.controlPanel.style.display ? 'Show Controls' : 'Hide Controls';
+        this.showControlsButton.addEventListener('click', (event) => {
+            const trackPanelRows = this.controlPanel.querySelectorAll('div');
             if (trackPanelRows.length > 0) {
-                if ('none' === this.trackPanel.style.display) {
-                    this.trackPanel.style.display = 'flex';
-                    event.target.innerText = 'Hide Track Options';
+                if ('none' === this.controlPanel.style.display) {
+                    this.controlPanel.style.display = 'flex';
+                    event.target.innerText = 'Hide Controls';
                 } else {
-                    this.trackPanel.style.display = 'none';
-                    event.target.innerText = 'Show Track Options';
+                    this.controlPanel.style.display = 'none';
+                    event.target.innerText = 'Show Controls';
                 }
             }
         });
-        // Clear All Chords
+        // Clear All
         let button = document.createElement('div');
         button.className = 'igv-circview-button';
         buttonContainer.appendChild(button);
@@ -30677,14 +31217,8 @@ class CircularView {
             this.clearChords();
         });
-        // toolbar button container - Close Window
-        buttonContainer = document.createElement('div');
-        buttonContainer.className = 'igv-circview-toolbar-button-container';
-        this.toolbar.appendChild(buttonContainer);
-        // Close Window
-        if(false !== this.config.showCloseButton) {
+        // Close
+        if (false !== this.config.showCloseButton) {
             button = document.createElement('div');
             button.className = 'igv-circview-button';
             buttonContainer.appendChild(button);
@@ -30693,60 +31227,115 @@ class CircularView {
                 this.visible = false;
             });
         }
+    }
+    resetControlPanel() {
+        this.controlPanel.innerHTML = '';
+        this.controlPanel.appendChild(this.createGroupByCB());
+        const chordSets = this.groupByTrack ? this.chordManager.tracks : this.chordManager.chordSets;
+        for(let cs of chordSets) {
+            this.addToControlPanel(cs);
+        }
     }
-    addToTrackPanel(track) {
+    createGroupByCB() {
+        const groupByCB = document.createElement('input');
+        groupByCB.type = 'checkbox';
+        groupByCB.id = 'groupByCB';
+        groupByCB.style.width = '1.4em';
+        groupByCB.style.height = '1.4em';
+        groupByCB.checked = this.groupByTrack;
-        // single track row - container for hide-button | color-picker-swatch | track-name
+        groupByCB.onclick = (evt) => {
+            this.groupByTrack = evt.target.checked;
+            this.resetControlPanel();
+            this.render();
+        };
+        const groupByLabel = document.createElement('label');
+        groupByLabel.for = 'groupByCB';
+        groupByLabel.innerText = 'Group by track';
+        groupByLabel.style.color = 'black';
+        groupByLabel.style.paddingLeft = '10px';
         const trackPanelRow = document.createElement('div');
-        this.trackPanel.appendChild(trackPanelRow);
+        trackPanelRow.style.width = '100%';
+        trackPanelRow.style.paddingTop = '5px';
+        trackPanelRow.style.paddingBottom = '5px';
+        trackPanelRow.style.background = 'rgb(216, 230, 234)';
+        trackPanelRow.appendChild(groupByCB);
+        trackPanelRow.appendChild(groupByLabel);
+        return trackPanelRow
+    }
+    addToControlPanel(chordSet) {
+        // single track row - container for hide-button | color-picker-swatch | track-name
+        const row = document.createElement('div');
+        this.controlPanel.appendChild(row);
-        let element;
         // track hide|show
-        element = document.createElement('div');
-        element.className = 'igv-circview-button';
-        trackPanelRow.appendChild(element);
-        element.innerText = true === track.visible ? 'Hide' : 'Show';
-        element.addEventListener('click', event => {
-            if (true === track.visible) {
-                this.hideTrack(track.id);
+        const hideShowButton = document.createElement('div');
+        hideShowButton.className = 'igv-circview-button';
+        row.appendChild(hideShowButton);
+        hideShowButton.innerText = true === chordSet.visible ? 'Hide' : 'Show';
+        hideShowButton.addEventListener('click', event => {
+            if (true === chordSet.visible) {
+                this.hideTrack(chordSet.name);
                 event.target.innerText = "Show";
             } else {
-                this.showTrack(track.id);
+                this.showTrack(chordSet.name);
                 event.target.innerText = "Hide";
             }
         });
-        // track color
-        element.clientHeight;
-        const pickerButton = document.createElement('div');
-        pickerButton.className = 'igv-circview-button';
-        pickerButton.innerHTML = '&nbsp;&nbsp;&nbsp;&nbsp;';   // <- important for button to size properly
-        trackPanelRow.appendChild(pickerButton);
-        pickerButton.style.backgroundColor = setAlpha(track.color, 1);
+        // The alpha range slider.  Create this here so we can reference it from the color picker
+        const alphaSlider = document.createElement('input');
+        const valueToAlpha = (value) => Math.exp(value / 200) / EXP5;
+        const alphaToValue = (alpha) => 200 * Math.log(alpha * EXP5);
+        // color
+        const colorPickerButton = document.createElement('div');
+        colorPickerButton.className = 'igv-circview-button';
+        colorPickerButton.innerHTML = '&nbsp;&nbsp;&nbsp;&nbsp;';   // <- important for button to size properly
+        row.appendChild(colorPickerButton);
+        colorPickerButton.style.backgroundColor = setAlpha(chordSet.color, 1);
         const pickerConfig =
             {
-                parent: pickerButton,
+                parent: colorPickerButton,
                 popup: 'right',
                 editorFormat: 'rgb',
-                color: track.color,
+                color: chordSet.color,
                 onChange: ({rgbaString}) => {
-                    pickerButton.style.backgroundColor = setAlpha(rgbaString, 1);
-                    this.setTrackColor(track.id, rgbaString);
+                    colorPickerButton.style.backgroundColor = setAlpha(rgbaString, 1);
+                    this.setTrackColor(chordSet.name, rgbaString);
+                    alphaSlider.value = alphaToValue(getAlpha(chordSet.color));
                 }
             };
-        new Picker(pickerConfig);
+        const picker = new Picker(pickerConfig);
+        // alpha transparency
+        alphaSlider.setAttribute('title', 'Adjust transparency of arcs');
+        alphaSlider.type = 'range';
+        //alphaSlider.className = 'igv-circview-alpha-slider'
+        alphaSlider.style.width = '100px';
+        alphaSlider.style.marginRight = '10px';
+        alphaSlider.setAttribute('class', 'range');
+        alphaSlider.setAttribute('min', '0');
+        alphaSlider.setAttribute('max', '1000');
+        alphaSlider.value = alphaToValue(getAlpha(chordSet.color));
+        alphaSlider.oninput = () => {
+            const v = valueToAlpha(alphaSlider.value);
+            this.setTrackColor(chordSet.name, setAlpha(chordSet.color, v));
+            picker.setColor(chordSet.color);
+        };
+        row.appendChild(alphaSlider);
         // track name
-        element = document.createElement('div');
-        element.style.color = 'black';
-        trackPanelRow.appendChild(element);
-        element.innerText = element.title = track.name;
+        const trackNameDive = document.createElement('div');
+        trackNameDive.style.color = 'black';
+        row.appendChild(trackNameDive);
+        trackNameDive.innerText = trackNameDive.title = chordSet.name;
     }
@@ -30760,7 +31349,7 @@ class CircularView {
         if (this.genomeId === igvGenome.id) {
             return
         }
-        this.tracks = [];
+        this.chordManager.clearChords();
         this.genomeId = igvGenome.id;
         this.chrNames = new Set(igvGenome.chromosomes.map(chr => shortChrName$1(chr.name)));
@@ -30823,39 +31412,24 @@ class CircularView {
     addChords(newChords, options = {}) {
-        const name = options.track || options.name || "*";
+        const tmp = options.track || options.name || "*";
+        const trackName = tmp.split(' ')[0].replaceAll("%20", " ");
+        const chordSetName = tmp.replaceAll("%20", " ");
+        const chordSet =  {
+            name: chordSetName,
+            trackName: trackName,
+            chords: newChords,
+            color: options.color || "black",
+            trackColor: options.trackColor || options.color || "black",
+            visible: true,
+            id: options.id || guid()
+        };
-        let track = this.tracks.find(t => name === t.name);
+        this.chordManager.addChordSet(chordSet);
-        // Override track options or create new track
-        if (track) {
-            if (options.color) {
-                track.color = options.color;
-            }
-        } else {
-            track =
-                {
-                    name,
-                    chords: [],
-                    color: options.color || "black",
-                    visible: true,
-                    id: options.id || guid()
-                };
-            this.tracks.push(track);
-            this.addToTrackPanel(track);
-        }
+        this.resetControlPanel();
-        // Append chords to track
-        const currentIDs = new Set(track.chords.map(c => c.uniqueId));
-        for (let c of newChords) {
-            if (!currentIDs.has(c.uniqueId) &&
-                this.chrNames.has(shortChrName$1(c.refName)) &&
-                this.chrNames.has(shortChrName$1(c.mate.refName))) {
-                track.chords.push(c);
-                currentIDs.add(c.uniqueId);
-            }
-        }
         this.render();
     }
@@ -30881,8 +31455,9 @@ class CircularView {
     }
     clearChords() {
-        this.tracks = [];
-        this.trackPanel.innerHTML = '';
+        //this.tracks = []
+        this.chordManager.clearChords();
+        this.resetControlPanel();
         this.render();
     }
@@ -30927,8 +31502,8 @@ class CircularView {
         this.parent.style.display = isVisible ? 'block' : 'none';
     }
-    hideTrack(trackID) {
-        let track = this.tracks.find(t => trackID === t.id);
+    hideTrack(trackName) {
+        let track = this.getTrack(trackName);
         if (track) {
             track.visible = false;
             this.render();
@@ -30937,34 +31512,44 @@ class CircularView {
         }
     }
-    showTrack(trackID) {
-        let idx = this.tracks.findIndex(t => trackID === t.id);
-        if (idx >= 0) {
-            const track = this.tracks[idx];
+    showTrack(trackName) {
+        let track = this.getTrack(trackName);
+        if (track) {
             track.visible = true;
-            this.tracks.splice(idx, 1);   // Change z-order
-            this.tracks.push(track);
             this.render();
         } else {
-            console.warn(`No track with name: ${name}`);
+            console.warn(`No track with name: ${trackName}`);
         }
     }
+    // showTrack(trackID) {
+    //     let idx = this.tracks.findIndex(t => trackID === t.id)
+    //     if (idx >= 0) {
+    //         const track = this.tracks[idx]
+    //         track.visible = true
+    //         this.tracks.splice(idx, 1)   // Change z-order
+    //         this.tracks.push(track)
+    //         this.render()
+    //     } else {
+    //         console.warn(`No track with name: ${name}`)
+    //     }
+    // }
     // TODO -- remove corresponding row from track panel
     deleteTrack(trackID) {
-        let idx = this.tracks.findIndex(t => trackID === t.id);
+        let idx = this.tracks.findIndex(t => trackID === t.name);
         if (idx >= 0) {
             this.tracks.splice(idx, 1);
         }
         this.render();
     }
-    getTrack(trackID) {
-        return this.tracks.find(t => trackID === t.id)
+    getTrack(name) {
+        return this.groupByTrack ? this.chordManager.getTrack(name) : this.chordManager.getChordset(name)
     }
-    setTrackColor(trackID, color) {
-        const t = this.getTrack(trackID);
+    setTrackColor(name, color) {
+        const t = this.getTrack(name);
         if (t) {
             t.color = color;
             const trackID = t.id;
@@ -30991,24 +31576,27 @@ class CircularView {
         // Remove all children from possible previous renders.  React might do this for us when we render, but just in case.
         ReactDOM.unmountComponentAtNode(this.container);
-        const visibleTracks = this.tracks.filter(t => false !== t.visible);
+        const visibleChordSets =
+            (this.groupByTrack ? this.chordManager.tracks : this.chordManager.chordSets).filter(t => t.visible);
         const jbrowseTracks = [];
         const colors = [];
-        for (let trackConfig of visibleTracks) {
+        for (let chordSet of visibleChordSets) {
             jbrowseTracks.push({
-                trackId: trackConfig.id,
-                name: trackConfig.name,
+                trackId: chordSet.id,
+                name: chordSet.name,
                 assemblyNames: ['forIGV'],
                 type: 'VariantTrack',
                 adapter: {
                     type: 'FromConfigAdapter',
-                    features: trackConfig.chords,
+                    features: chordSet.chords,
                 }
             });
-            colors.push(trackConfig.color);
+            colors.push(chordSet.color);
         }
         this.viewState = createViewState({
@@ -31017,7 +31605,7 @@ class CircularView {
         });
         // Set view colors
-        for (let i = 0; i < visibleTracks.length; i++) {
+        for (let i = 0; i < visibleChordSets.length; i++) {
             this.viewState.config.tracks[i].displays[0].renderer.strokeColor.set(colors[i]);
             //this.viewState.config.tracks[i].displays[0].renderer.strokeColor.set("jexl:get(feature, 'color') || 'black'");
             //this.viewState.config.tracks[i].displays[0].renderer.strokeColorSelected.set("jexl:get(feature, 'highlightColor') || 'red'");
@@ -31028,10 +31616,11 @@ class CircularView {
         ReactDOM.render(this.element, this.container);
-        for (let i = 0; i < visibleTracks.length; i++) {
+        const onChordClick = this.config.onChordClick || defaultOnChordClick;
+        for (let i = 0; i < visibleChordSets.length; i++) {
             this.viewState.session.view.showTrack(this.viewState.config.tracks[i].trackId);
-            if (this.config.onChordClick) {
-                this.viewState.pluginManager.jexl.addFunction('onChordClick', this.config.onChordClick);
+            if (onChordClick) {
+                this.viewState.pluginManager.jexl.addFunction('onChordClick', onChordClick);
                 this.viewState.config.tracks[i].displays[0].onChordClick.set(
                     'jexl:onChordClick(feature, track, pluginManager)'
                 );
@@ -31042,20 +31631,32 @@ class CircularView {
 function setAlpha(rgba, alpha) {
     const [a, b, c, ignore] = rgba.split(','); // rgba(r g b alpha)
-    return `${ a },${ b },${ c },${ alpha })`
+    return `${a},${b},${c},${alpha})`
+}
+function getAlpha(rgba) {
+    if (rgba.startsWith("rgba(")) {
+        return Number(rgba.split(',')[3].replace(')', ''))
+    } else {
+        return 1
+    }
 }
 function shortChrName$1(chrName) {
     return chrName.startsWith("chr") ? chrName.substring(3) : chrName
 }
+function defaultOnChordClick(feature, chordTrack, pluginManager) {
+    console.log(feature);
+}
 function guid() {
     return ("0000" + (Math.random() * Math.pow(36, 4) << 0).toString(36)).slice(-4)
 }
 function embedCSS$1() {
-    const css =  '.igv-circview-container {\n  z-index: 2048;\n  position: absolute;\n  width: fit-content;\n  height: fit-content;\n  box-sizing: content-box;\n  color: dimgray;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 12px;\n  background-color: white;\n  border-color: dimgray;\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: flex-start; }\n\n.igv-circview-toolbar {\n  position: relative;\n  width: 100%;\n  height: 32px;\n  background-color: lightgrey;\n  border-bottom-style: solid;\n  border-bottom-color: dimgray;\n  border-bottom-width: thin;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center; }\n\n.igv-circview-toolbar-button-container {\n  height: 100%;\n  width: fit-content;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center; }\n  .igv-circview-toolbar-button-container > div {\n    margin: 4px; }\n\n.igv-circview-track-panel {\n  z-index: 1024;\n  position: absolute;\n  top: 33px;\n  left: 0;\n  width: 100%;\n  height: fit-content;\n  border-bottom-style: solid;\n  border-bottom-color: dimgray;\n  border-bottom-width: thin;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start; }\n  .igv-circview-track-panel > div {\n    display: flex;\n    flex-flow: row;\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    align-items: center; }\n    .igv-circview-track-panel > div > div {\n      margin: 4px; }\n\n.igv-circview-swatch-button {\n  cursor: pointer;\n  padding: 5px;\n  width: 8px;\n  height: 8px;\n  border: 1px solid #8d8b8b;\n  border-radius: 16px; }\n\n.igv-circview-button {\n  cursor: pointer;\n  padding: 5px;\n  color: #444;\n  vertical-align: middle;\n  text-align: center;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 12px;\n  border: 1px solid #8d8b8b;\n  border-radius: 4px;\n  background: #efefef;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.2); }\n\n.igv-circview-button:hover {\n  background: #efefef;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.6); }\n\n.igv-circview-button:active {\n  color: #007bff;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.6); }\n\n/*# sourceMappingURL=circular-view.css.map */\n';
+    const css =  '.igv-circview-container {\n  z-index: 2048;\n  position: absolute;\n  width: fit-content;\n  height: fit-content;\n  box-sizing: content-box;\n  color: dimgray;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 12px;\n  background-color: white;\n  border-color: dimgray;\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: flex-start;\n}\n\n.igv-circview-toolbar {\n  position: relative;\n  width: 100%;\n  height: 32px;\n  background-color: lightgrey;\n  border-bottom-style: solid;\n  border-bottom-color: dimgray;\n  border-bottom-width: thin;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.igv-circview-toolbar-button-container {\n  height: 100%;\n  width: fit-content;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-circview-toolbar-button-container > div {\n  margin: 4px;\n}\n\n.igv-circview-track-panel {\n  z-index: 1024;\n  position: absolute;\n  top: 33px;\n  left: 0;\n  width: 100%;\n  height: fit-content;\n  border-bottom-style: solid;\n  border-bottom-color: dimgray;\n  border-bottom-width: thin;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n.igv-circview-track-panel > div {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.igv-circview-track-panel > div > div {\n  margin: 4px;\n}\n\n.igv-circview-swatch-button {\n  cursor: pointer;\n  padding: 5px;\n  width: 8px;\n  height: 8px;\n  border: 1px solid #8d8b8b;\n  border-radius: 16px;\n}\n\n.igv-circview-button {\n  cursor: pointer;\n  padding: 5px;\n  color: #444;\n  vertical-align: middle;\n  text-align: center;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 12px;\n  border: 1px solid #8d8b8b;\n  border-radius: 4px;\n  background: #efefef;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.2);\n}\n\n.igv-circview-button:hover {\n  background: #efefef;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.6);\n}\n\n.igv-circview-button:active {\n  color: #007bff;\n  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.6);\n}\n\n/*# sourceMappingURL=circular-view.css.map */\n';
     const style = document.createElement('style');
     style.setAttribute('type', 'text/css');
@@ -32417,59 +33018,61 @@ class AlignmentTrack {
         list.push('<hr/>');
         const clickedObject = this.getClickedObject(clickState);
         if (clickedObject) {
             const showSoftClips = this.parent.showSoftClips;
             const clickedAlignment = (typeof clickedObject.alignmentContaining === 'function') ?
                 clickedObject.alignmentContaining(clickState.genomicLocation, showSoftClips) :
                 clickedObject;
-            if (clickedAlignment.isPaired() && clickedAlignment.isMateMapped()) {
-                list.push({
-                    label: 'View mate in split screen',
-                    click: () => {
-                        if (clickedAlignment.mate) {
-                            const referenceFrame = clickState.viewport.referenceFrame;
-                            if (this.browser.genome.getChromosome(clickedAlignment.mate.chr)) {
-                                this.highlightedAlignmentReadNamed = clickedAlignment.readName;
-                                this.browser.presentMultiLocusPanel(clickedAlignment, referenceFrame);
-                            } else {
-                                Alert.presentAlert(`Reference does not contain chromosome: ${clickedAlignment.mate.chr}`);
+            if (clickedAlignment) {
+                if (clickedAlignment.isPaired() && clickedAlignment.isMateMapped()) {
+                    list.push({
+                        label: 'View mate in split screen',
+                        click: () => {
+                            if (clickedAlignment.mate) {
+                                const referenceFrame = clickState.viewport.referenceFrame;
+                                if (this.browser.genome.getChromosome(clickedAlignment.mate.chr)) {
+                                    this.highlightedAlignmentReadNamed = clickedAlignment.readName;
+                                    this.browser.presentMultiLocusPanel(clickedAlignment, referenceFrame);
+                                } else {
+                                    Alert.presentAlert(`Reference does not contain chromosome: ${clickedAlignment.mate.chr}`);
+                                }
                             }
-                        }
-                    },
-                    init: undefined
-                });
-            }
-            list.push({
-                label: 'View read sequence',
-                click: () => {
-                    const alignment = clickedAlignment;
-                    if (!alignment) return
-                    const seqstring = alignment.seq; //.map(b => String.fromCharCode(b)).join("");
-                    if (!seqstring || "*" === seqstring) {
-                        Alert.presentAlert("Read sequence: *");
-                    } else {
-                        Alert.presentAlert(seqstring);
-                    }
+                        },
+                        init: undefined
+                    });
                 }
-            });
-            if (isSecureContext()) {
                 list.push({
-                    label: 'Copy read sequence',
+                    label: 'View read sequence',
                     click: () => {
                         const alignment = clickedAlignment;
                         if (!alignment) return
                         const seqstring = alignment.seq; //.map(b => String.fromCharCode(b)).join("");
-                        navigator.clipboard.writeText(seqstring);
+                        if (!seqstring || "*" === seqstring) {
+                            Alert.presentAlert("Read sequence: *");
+                        } else {
+                            Alert.presentAlert(seqstring);
+                        }
                     }
                 });
-            }
-            list.push('<hr/>');
+                if (isSecureContext()) {
+                    list.push({
+                        label: 'Copy read sequence',
+                        click: () => {
+                            const alignment = clickedAlignment;
+                            if (!alignment) return
+                            const seqstring = alignment.seq; //.map(b => String.fromCharCode(b)).join("");
+                            navigator.clipboard.writeText(seqstring);
+                        }
+                    });
+                }
+                list.push('<hr/>');
+            }
         }
         // Experimental JBrowse feature
@@ -32739,7 +33342,7 @@ function getChrColor(chr) {
         chrColorMap[chr] = color;
         return color
     } else {
-        const color = IGVColor.randomRGB();
+        const color = IGVColor.randomRGB(0, 255);
         chrColorMap[chr] = color;
         return color
     }
@@ -32747,7 +33350,7 @@ function getChrColor(chr) {
 const chrColorMap = {
     "chrX": "rgb(204, 153, 0)",
-    "chrY": "rgb(153, 204, 0",
+    "chrY": "rgb(153, 204, 0)",
     "chrUn": "rgb(50, 50, 50)",
     "chr1": "rgb(80, 80, 255)",
     "chrI": "rgb(139, 155, 187)",
@@ -33001,143 +33604,68 @@ class RulerViewport extends TrackViewport {
 }
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2014 Broad Institute
- *
- * 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 IdeogramViewport extends TrackViewport {
-    constructor(trackView, viewportColumn, referenceFrame, width) {
-        super(trackView, viewportColumn, referenceFrame, width);
-    }
-    initializationHelper() {
-        this.$ideogramCanvas = $$1('<canvas>', {class: 'igv-ideogram-canvas'});
-        this.$ideogramCanvas.insertBefore(this.$canvas);
-        const canvas = this.$ideogramCanvas.get(0);
-        this.ideogram_ctx = canvas.getContext('2d');
-        this.$canvas.remove();
-        this.canvas = undefined;
-        this.ctx = undefined;
-        this.addMouseHandlers();
-    }
-    addMouseHandlers() {
-        this.addViewportClickHandler(this.$viewport.get(0));
-    }
-    removeMouseHandlers() {
-        this.removeViewportClickHandler(this.$viewport.get(0));
-    }
-    addViewportClickHandler(viewport) {
-        this.boundClickHandler = clickHandler.bind(this);
-        viewport.addEventListener('click', this.boundClickHandler);
-        function clickHandler(event) {
-            const {xNormalized, width} = translateMouseCoordinates$1(event, this.ideogram_ctx.canvas);
-            const {bpLength} = this.browser.genome.getChromosome(this.referenceFrame.chr);
-            const locusLength = this.referenceFrame.bpPerPixel * width;
-            const chrCoveragePercentage = locusLength / bpLength;
-            let xPercentage = xNormalized;
-            if (xPercentage - (chrCoveragePercentage / 2.0) < 0) {
-                xPercentage = chrCoveragePercentage / 2.0;
-            }
+const viewportColumnManager =
+    {
+        createColumns: (columnContainer, count) => {
-            if (xPercentage + (chrCoveragePercentage / 2.0) > 1.0) {
-                xPercentage = 1.0 - chrCoveragePercentage / 2.0;
+            for (let i = 0; i < count; i++) {
+                if (0 === i) {
+                    createColumn(columnContainer, 'igv-column');
+                } else {
+                    columnContainer.appendChild(div$1({class: 'igv-column-shim'}));
+                    createColumn(columnContainer, 'igv-column');
+                }
             }
-            const ss = Math.round((xPercentage - (chrCoveragePercentage / 2.0)) * bpLength);
-            const ee = Math.round((xPercentage + (chrCoveragePercentage / 2.0)) * bpLength);
-            this.referenceFrame.start = ss;
-            this.referenceFrame.end = ee;
-            this.referenceFrame.bpPerPixel = (ee - ss) / width;
-            this.browser.updateViews(this.referenceFrame, this.browser.trackViews, true);
-        }
+        },
-    }
+        removeColumnAtIndex: (i, column) => {
+            const shim = 0 === i ? column.nextElementSibling : column.previousElementSibling;
+            column.remove();
+            shim.remove();
+        },
-    removeViewportClickHandler(viewport) {
-        viewport.removeEventListener('click', this.boundClickHandler);
-    }
+        insertAfter: referenceElement => {
-    setWidth(width) {
-        this.$viewport.width(width);
-    }
+            const shim = div$1({class: 'igv-column-shim'});
+            insertElementAfter(shim, referenceElement);
-    drawSVGWithContext(context, width, height, id, x, y, yClipOffset) {
+            const column = div$1({class: 'igv-column'});
+            insertElementAfter(column, shim);
-        context.saveWithTranslationAndClipRect(id, x, y, width, height, yClipOffset);
+            return column
+        },
-        this.trackView.track.draw({
-            context,
-            referenceFrame: this.referenceFrame,
-            pixelWidth: width,
-            pixelHeight: height
-        });
+        insertBefore: (referenceElement, count) => {
-        context.restore();
-    }
+            for (let i = 0; i < count; i++) {
-    async repaint() {
-        this.draw({referenceFrame: this.referenceFrame});
-    }
+                const column = div$1({class: 'igv-column'});
+                insertElementBefore(column, referenceElement);
-    draw({referenceFrame}) {
+                if (count > 1 && i > 0) {
+                    const columnShim = div$1({class: 'igv-column-shim'});
+                    insertElementBefore(columnShim, column);
+                }
-        this.$canvas.hide();
+            }
-        IGVGraphics.configureHighDPICanvas(this.ideogram_ctx, this.$viewport.width(), this.$viewport.height());
+        },
-        this.trackView.track.draw({
-            context: this.ideogram_ctx,
-            referenceFrame,
-            pixelWidth: this.$viewport.width(),
-            pixelHeight: this.$viewport.height()
-        });
-    }
+        indexOfColumn: (columnContainer, column) => {
-    startSpinner() {
-    }
+            const allColumns = columnContainer.querySelectorAll('.igv-column');
-    stopSpinner() {
-    }
+            for (let i = 0; i < allColumns.length; i++) {
+                const c = allColumns[ i ];
+                if (c === column) {
+                    return i
+                }
+            }
-}
+            return undefined
+        },
+    };
 /*
  * The MIT License (MIT)
@@ -33164,185 +33692,157 @@ class IdeogramViewport extends TrackViewport {
  * THE SOFTWARE.
  */
-/**
- * Test if the given value is a string or number.  Not using typeof as it fails on boxed primitives.
- *
- * @param value
- * @returns boolean
- */
+class IdeogramViewport extends TrackViewport {
-function isSimpleType(value) {
-    const simpleTypes = new Set(["boolean", "number", "string", "symbol"]);
-    const valueType = typeof value;
-    return (value !== undefined && (simpleTypes.has(valueType) || value.substring || value.toFixed))
-}
+    constructor(trackView, viewportColumn, referenceFrame, width) {
+        super(trackView, viewportColumn, referenceFrame, width);
+    }
-function buildOptions(config, options) {
+    initializationHelper() {
-    var defaultOptions = {
-        oauthToken: config.oauthToken,
-        headers: config.headers,
-        withCredentials: config.withCredentials,
-        filename: config.filename
-    };
+        this.$ideogramCanvas = $$1('<canvas>', {class: 'igv-ideogram-canvas'});
+        this.$ideogramCanvas.insertBefore(this.$canvas);
-    return Object.assign(defaultOptions, options)
-}
+        const canvas = this.$ideogramCanvas.get(0);
+        this.ideogram_ctx = canvas.getContext('2d');
-/**
- * isMobile test from http://detectmobilebrowsers.com
- * TODO -- improve UI design so this isn't neccessary
- * @returns {boolean}
- */
+        this.$canvas.remove();
+        this.canvas = undefined;
+        this.ctx = undefined;
-// igv.isMobile = function () {
-//
-//     const a = (navigator.userAgent || navigator.vendor || window.opera);
-//     return (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) ||
-//         /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4)))
-//
-// }
+        this.addMouseHandlers();
-const doAutoscale = function (features) {
-    var min, max;
+    }
-    if (features.length > 0) {
-        min = Number.MAX_VALUE;
-        max = -Number.MAX_VALUE;
+    addMouseHandlers() {
+        this.addBrowserObserver();
+        this.addViewportClickHandler(this.$viewport.get(0));
+    }
-        features.forEach(function (f) {
-            if (!Number.isNaN(f.value)) {
-                min = Math.min(min, f.value);
-                max = Math.max(max, f.value);
+    removeMouseHandlers() {
+        this.removeBrowserObserver();
+        this.removeViewportClickHandler(this.$viewport.get(0));
+    }
+    addBrowserObserver() {
+        function observerHandler(referenceFrameList) {
+            const column = this.$viewport.get(0).parentElement;
+            if (null !== column) {
+                const index = viewportColumnManager.indexOfColumn(this.browser.columnContainer, column);
+                // console.log(`ideogram-viewport - locus-change-handler index(${ index }) ${ referenceFrameList[ index ].getLocusString() } ${ Date.now() } `)
+                this.update(this.ideogram_ctx, this.$viewport.width(), this.$viewport.height(), referenceFrameList[ index ]);
             }
-        });
+        }
-        // Insure we have a zero baseline
-        if (max > 0) min = Math.min(0, min);
-        if (max < 0) max = 0;
-    } else {
-        // No features -- default
-        min = 0;
-        max = 100;
+        this.boundObserverHandler = observerHandler.bind(this);
+        this.browser.on('locuschange', this.boundObserverHandler);
     }
-    return {min: min, max: max}
-};
+    removeBrowserObserver() {
+        this.browser.off('locuschange', this.boundObserverHandler);
+    }
-const validateLocusExtent = function (chromosomeLengthBP, extent, minimumBP) {
+    addViewportClickHandler(viewport) {
-    let ss = extent.start;
-    let ee = extent.end;
+        function clickHandler(event) {
-    if (undefined === ee) {
+            const column = viewport.parentElement;
+            const index = viewportColumnManager.indexOfColumn(this.browser.columnContainer, column);
+            const referenceFrame = this.browser.referenceFrameList[ index ];
-        ss -= minimumBP / 2;
-        ee = ss + minimumBP;
+            const {xNormalized, width} = translateMouseCoordinates$1(event, this.ideogram_ctx.canvas);
+            const {bpLength} = this.browser.genome.getChromosome(referenceFrame.chr);
+            const locusLength = referenceFrame.bpPerPixel * width;
+            const chrCoveragePercentage = locusLength / bpLength;
-        if (ee > chromosomeLengthBP) {
-            ee = chromosomeLengthBP;
-            ss = ee - minimumBP;
-        } else if (ss < 0) {
-            ss = 0;
-            ee = minimumBP;
-        }
+            let xPercentage = xNormalized;
+            if (xPercentage - (chrCoveragePercentage / 2.0) < 0) {
+                xPercentage = chrCoveragePercentage / 2.0;
+            }
-    } else if (ee - ss < minimumBP) {
+            if (xPercentage + (chrCoveragePercentage / 2.0) > 1.0) {
+                xPercentage = 1.0 - chrCoveragePercentage / 2.0;
+            }
-        const center = (ee + ss) / 2;
+            const ss = Math.round((xPercentage - (chrCoveragePercentage / 2.0)) * bpLength);
+            const ee = Math.round((xPercentage + (chrCoveragePercentage / 2.0)) * bpLength);
-        if (center - minimumBP / 2 < 0) {
-            ss = 0;
-            ee = ss + minimumBP;
-        } else if (center + minimumBP / 2 > chromosomeLengthBP) {
-            ee = chromosomeLengthBP;
-            ss = ee - minimumBP;
-        } else {
-            ss = center - minimumBP / 2;
-            ee = ss + minimumBP;
-        }
-    }
+            referenceFrame.start = ss;
+            referenceFrame.end = ee;
+            referenceFrame.bpPerPixel = (ee - ss) / width;
-    extent.start = Math.ceil(ss);
-    extent.end = Math.floor(ee);
-};
+            this.browser.updateViews(referenceFrame, this.browser.trackViews, true);
-/*!
- * is-number <https://github.com/jonschlinkert/is-number>
- *
- * Copyright (c) 2014-present, Jon Schlinkert.
- * Released under the MIT License.
- */
+        }
+        this.boundClickHandler = clickHandler.bind(this);
+        viewport.addEventListener('click', this.boundClickHandler);
-const isNumber = function (num) {
-    if (typeof num === 'number') {
-        return num - num === 0
-    }
-    if (typeof num === 'string' && num.trim() !== '') {
-        return Number.isFinite ? Number.isFinite(+num) : isFinite(+num)
     }
-    return false
-};
-async function getFilename(url) {
-    if (isString$3(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")
-        }
-        const json = await getDriveFileInfo(url);
-        return json.originalFileName || json.name
-    } else {
-        return getFilename$1(url)
+    removeViewportClickHandler(viewport) {
+        viewport.removeEventListener('click', this.boundClickHandler);
     }
-}
-function prettyBasePairNumber(raw) {
+    setWidth(width) {
+        this.$viewport.width(width);
+    }
-    var denom,
-        units,
-        value,
-        floored;
+    drawSVGWithContext(context, width, height, id, x, y, yClipOffset) {
-    if (raw > 1e7) {
-        denom = 1e6;
-        units = " mb";
-    } else if (raw > 1e4) {
+        context.saveWithTranslationAndClipRect(id, x, y, width, height, yClipOffset);
-        denom = 1e3;
-        units = " kb";
+        this.trackView.track.draw({
+            context,
+            referenceFrame: this.referenceFrame,
+            pixelWidth: width,
+            pixelHeight: height
+        });
-        value = raw / denom;
-        floored = Math.floor(value);
-        return numberFormatter$1(floored) + units
-    } else {
-        return numberFormatter$1(raw) + " bp"
+        context.restore();
     }
-    value = raw / denom;
-    floored = Math.floor(value);
-    return floored.toString() + units
-}
+    update(context, pixelWidth, pixelHeight, referenceFrame) {
+        this.$canvas.hide();
+        IGVGraphics.configureHighDPICanvas(context, pixelWidth, pixelHeight);
+        this.trackView.track.draw({ context, referenceFrame, pixelWidth, pixelHeight });
+    }
+    startSpinner() {
+    }
-function isDataURL(obj) {
-    return (isString$3(obj) && obj.startsWith("data:"))
-}
+    stopSpinner() {
+    }
-function createColumn(columnContainer, className) {
-    const column = div$1({class: className});
-    columnContainer.appendChild(column);
 }
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2014 Broad Institute
+ *
+ * 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.
+ */
-function insertElementBefore(element, referenceNode) {
-    referenceNode.parentNode.insertBefore(element, referenceNode);
-}
-function insertElementAfter(element, referenceNode) {
-    referenceNode.parentNode.insertBefore(element, referenceNode.nextSibling);
-}
 function createViewport(trackView, column, referenceFrame, width) {
@@ -33355,13 +33855,6 @@ function createViewport(trackView, column, referenceFrame, width) {
     }
 }
-/**
- * Test to see if page is loaded in a secure context, that is by https or is localhost.
- */
-function isSecureContext() {
-    return window.location.protocol === "https:" || window.location.hostname === "localhost"
-}
 const maxFontSize = 10;
 const fontConfigureTemplate =
@@ -33377,7 +33870,7 @@ class SampleNameViewport {
     constructor(trackView, column, unused, width) {
-        this.guid = guid$1();
+        this.guid = guid$2();
         this.trackView = trackView;
         this.browser = trackView.browser;
@@ -33495,7 +33988,7 @@ class SampleNameViewport {
             const {width, height} = this.viewport.getBoundingClientRect();
             const str = (this.trackView.track.name || this.trackView.track.id).replace(/\W/g, '');
-            const id = `${str}_sample_names_guid_${guid$1()}`;
+            const id = `${str}_sample_names_guid_${guid$2()}`;
             context.saveWithTranslationAndClipRect(id, deltaX, deltaY + yScrollDelta, width, height, -yScrollDelta);
@@ -33879,7 +34372,7 @@ class TrackView {
     constructor(browser, columnContainer, track) {
-        this.namespace = `trackview-${guid$1()}`;
+        this.namespace = `trackview-${guid$2()}`;
         this.browser = browser;
         this.track = track;
@@ -34234,11 +34727,13 @@ class TrackView {
         for (let viewport of reloadableViewports) {
             await viewport.loadFeatures();
         }
+        if (this.disposed) return   // Track was removed during load
         // Very special case for variant tracks in multilocus view.  The # of rows to allocate to the variant (site)
         // section depends on data from all the views.  We only need to adjust this however if any data was loaded
         // (i.e. reloadableViewports.length > 0)
-        if (typeof this.track.variantRowCount === 'function' && reloadableViewports.length > 0) {
+        if (this.track && typeof this.track.variantRowCount === 'function' && reloadableViewports.length > 0) {
             let maxRow = 0;
             for (let viewport of this.viewports) {
                 if (viewport.tile && viewport.tile.features) {
@@ -34254,7 +34749,6 @@ class TrackView {
             }
         }
-        if (this.disposed) return   // Track was removed during load
         if (this.track.autoscale) {
             let allFeatures = [];
@@ -34702,7 +35196,7 @@ function renderSVGAxis(context, track, axisCanvas, deltaX, deltaY) {
         const {y, width, height} = axisCanvas.getBoundingClientRect();
         const str = (track.name || track.id).replace(/\W/g, '');
-        const id = `${str}_axis_guid_${guid$1()}`;
+        const id = `${str}_axis_guid_${guid$2()}`;
         context.saveWithTranslationAndClipRect(id, deltaX, y + deltaY, width, height, 0);
@@ -34982,6 +35476,9 @@ class GFFFeature {
         pd.push({name: 'Type', value: this.type});
         pd.push({name: 'Source', value: this.source});
+        if (this.score !== undefined) {
+            pd.push({name: 'Score', value: this.score});
+        }
         if (this.attributeString) {
             const atts = parseAttributeString(this.attributeString, this.delim);
@@ -35230,7 +35727,7 @@ function decode(tokens, header) {
         chr: tokens[0],
         start: parseInt(tokens[3]) - 1,
         end: parseInt(tokens[4]),
-        score: "." === tokens[5] ? 0 : Number(tokens[5]),
+        score: "." === tokens[5] ? undefined : Number(tokens[5]),
         strand: tokens[6],
         phase: "." === tokens[7] ? 0 : parseInt(tokens[7]),
         attributeString: tokens[8],
@@ -36586,244 +37083,29 @@ class SegFeature {
  * THE SOFTWARE.
  */
-const knownAltBases = new Set(["A", "C", "T", "G"].map(c => c.charCodeAt(0)));
+/**
+ * Create a variant from an array of tokens representing a line in a "VCF" file
+ * @param tokens
+ */
 function createVCFVariant(tokens) {
-    return new Variant(tokens)
-}
-class Variant {
-    constructor(tokens) {
-        this.chr = tokens[0]; // TODO -- use genome aliases
-        this.pos = parseInt(tokens[1]);
-        this.names = tokens[2];    // id in VCF
-        this.referenceBases = tokens[3];
-        this.alternateBases = tokens[4];
-        this.quality = tokens[5];
-        this.filter = tokens[6];
-        this.info = getInfoObject(tokens[7]);
-        this.init();
-    }
-    init() {
-        const ref = this.referenceBases;
-        const altBases = this.alternateBases;
-        if (this.info) {
-            if (this.info["VT"]) {
-                this.type = this.info["VT"];
-            } else if (this.info["SVTYPE"]) {
-                this.type = "SV";
-            } else if (this.info["PERIOD"]) {
-                this.type = "STR";
-            }
-        }
-        if (this.type === undefined) {
-            this.type = determineType(ref, altBases);
-        }
-        if (this.type === "NONVARIANT") {
-            this.heterozygosity = 0;
-        }
-        // Determine start/end coordinates -- these are the coordinates representing the actual variant,
-        // not the leading or trailing reference
-        if (this.info["END"]) {
-            this.start = this.pos - 1;
-            if (this.info["CHR2"] && this.info["CHR2"] !== this.chr) {
-                this.end = this.start + 1;
-            } else {
-                this.end = Number.parseInt(this.info["END"]);
-            }
-        } else {
-            if (this.type === "NONVARIANT") {
-                this.start = this.pos - 1;      // convert to 0-based coordinate convention
-                this.end = this.start + ref.length;
-            } else {
-                const altTokens = altBases.split(",").filter(token => token.length > 0);
-                this.alleles = [];
-                this.start = undefined;
-                this.end = undefined;
-                for (let alt of altTokens) {
-                    this.alleles.push(alt);
-                    // We don't yet handle  SV and other special alt representations
-                    if ("SV" !== this.type && isKnownAlt(alt)) {
-                        let altLength = alt.length;
-                        let lengthOnRef = ref.length;
-                        const lmin = Math.min(altLength, lengthOnRef);
-                        // Trim off matching bases.  Try first match, then right -> left,  then any remaining left -> right
-                        let s = 0;
-                        while (s < lmin && (ref.charCodeAt(s) === alt.charCodeAt(s))) {
-                            s++;
-                            altLength--;
-                            lengthOnRef--;
-                        }
-                        // right -> left from end
-                        while (altLength > 0 && lengthOnRef > 0) {
-                            const altIdx = s + altLength - 1;
-                            const refIdx = s + lengthOnRef - 1;
-                            if (alt.charCodeAt(altIdx) === ref.charCodeAt(refIdx)) {
-                                altLength--;
-                                lengthOnRef--;
-                            } else {
-                                break
-                            }
-                        }
-                        // if any remaining, left -> right
-                        while (altLength > 0 && lengthOnRef > 0) {
-                            const altIdx = s;
-                            const refIdx = s;
-                            if (alt.charCodeAt(altIdx) === ref.charCodeAt(refIdx)) {
-                                s++;
-                                altLength--;
-                                lengthOnRef--;
-                            } else {
-                                break
-                            }
-                        }
-                        const alleleStart = this.pos + s - 1;      // -1 for zero based coordinates
-                        const alleleEnd = alleleStart + lengthOnRef;
-                        this.start = this.start === undefined ? alleleStart : Math.min(this.start, alleleStart);
-                        this.end = this.end === undefined ? alleleEnd : Math.max(this.end, alleleEnd);
-                    }
-                }
-                // Default to single base representation @ position for variant types not otherwise handled
-                if (this.start === undefined) {
-                    this.start = this.pos - 1;
-                    this.end = this.pos;
-                }
-            }
-        }
-    }
-    popupData(genomicLocation, genomeId) {
-        const posString = `${numberFormatter$1(this.pos)}`;
-        const locString = this.start === this.end ?
-            `${numberFormatter$1(this.start)} | ${numberFormatter$1(this.start + 1)}` :
-            `${numberFormatter$1(this.start + 1)}-${numberFormatter$1(this.end)}`;
-        const fields = [
-            {name: "Chr", value: this.chr},
-            {name: "Pos", value: posString},
-            {name: "Loc", value: locString},
-            {name: "Names", value: this.names ? this.names : ""},
-            {name: "Ref", value: this.referenceBases},
-            {name: "Alt", value: this.alternateBases.replace("<", "&lt;")},
-            {name: "Qual", value: this.quality},
-            {name: "Filter", value: this.filter}
-        ];
-        if ("SNP" === this.type) {
-            let ref = this.referenceBases;
-            if (ref.length === 1) {
-                let altArray = this.alternateBases.split(",");
-                for (let alt of altArray) {
-                    if (alt.length === 1) {
-                        let l = TrackBase.getCravatLink(this.chr, this.pos, ref, alt, genomeId);
-                        if (l) {
-                            fields.push('<hr/>');
-                            fields.push({html: l});
-                        }
-                    }
-                }
-            }
-        }
-        if (this.hasOwnProperty("heterozygosity")) {
-            fields.push({name: "Heterozygosity", value: this.heterozygosity});
-        }
-        if (this.info) {
-            fields.push({html: '<hr style="border-top: dotted 1px;border-color: #c9c3ba" />'});
-            for (let key of Object.keys(this.info)) {
-                fields.push({name: key, value: arrayToString(decodeURIComponent(this.info[key]))});
-            }
-        }
-        return fields
-    };
-    isRefBlock() {
-        return "NONVARIANT" === this.type
-    }
-}
-function getInfoObject(infoStr) {
-    var info = {};
+    const variant = new Variant();
+    variant.chr = tokens[0]; // TODO -- use genome aliases
+    variant.pos = parseInt(tokens[1]);
+    variant.names = tokens[2];    // id in VCF
+    variant.referenceBases = tokens[3];
+    variant.alternateBases = tokens[4];
+    variant.quality = tokens[5];
+    variant.filter = tokens[6];
+    variant.info = {};
+    const infoStr = tokens[7];
     if (infoStr) {
-        infoStr.split(';').forEach(function (elem) {
+        for (let elem of infoStr.split(';')) {
             var element = elem.split('=');
-            info[element[0]] = element[1];
-        });
-    }
-    return info
-}
-function isKnownAlt(alt) {
-    for (let i = 0; i < alt.length; i++) {
-        if (!knownAltBases.has(alt.charCodeAt(i))) {
-            return false
+            variant.info[element[0]] = element[1];
         }
     }
-    return true
-}
-function determineType(ref, altAlleles) {
-    const refLength = ref.length;
-    if (altAlleles === undefined) {
-        return "UNKNOWN"
-    } else if (altAlleles.trim().length === 0 ||
-        altAlleles === "<NON_REF>" ||
-        altAlleles === "<*>" ||
-        altAlleles === ".") {
-        return "NONVARIANT"
-    } else {
-        const alleles = altAlleles.split(",");
-        const types = alleles.map(function (a) {
-            if (refLength === 1 && a.length === 1) {
-                return "SNP"
-            } else {
-                return "<NON_REF>" === a ? "NONVARIANT" : "OTHER"
-            }
-        });
-        let type = types[0];
-        for (let t of types) {
-            if (t !== type) {
-                return "MIXED"
-            }
-        }
-        return type
-    }
-}
-function arrayToString(value, delim) {
-    if (delim === undefined) delim = ",";
-    if (!(Array.isArray(value))) {
-        return value
-    }
-    return value.join(delim)
+    variant.init();
+    return variant;
 }
@@ -36887,6 +37169,217 @@ function createGAVariant(json) {
 }
+class Variant {
+    init() {
+        const ref = this.referenceBases;
+        const altBases = this.alternateBases;
+        if (this.info) {
+            if (this.info["VT"]) {
+                this.type = this.info["VT"];
+            } else if (this.info["SVTYPE"]) {
+                this.type = "SV";
+            } else if (this.info["PERIOD"]) {
+                this.type = "STR";
+            }
+        }
+        if (this.type === undefined) {
+            this.type = determineType(ref, altBases);
+        }
+        if (this.type === "NONVARIANT") {
+            this.heterozygosity = 0;
+        }
+        // Determine start/end coordinates -- these are the coordinates representing the actual variant,
+        // not the leading or trailing reference
+        if (this.info["END"]) {
+            this.start = this.pos - 1;
+            if (this.info["CHR2"] && this.info["CHR2"] !== this.chr) {
+                this.end = this.start + 1;
+            } else {
+                this.end = Number.parseInt(this.info["END"]);
+            }
+        } else {
+            if (this.type === "NONVARIANT") {
+                this.start = this.pos - 1;      // convert to 0-based coordinate convention
+                this.end = this.start + ref.length;
+            } else {
+                const altTokens = altBases.split(",").filter(token => token.length > 0);
+                this.alleles = [];
+                this.start = undefined;
+                this.end = undefined;
+                for (let alt of altTokens) {
+                    this.alleles.push(alt);
+                    // We don't yet handle  SV and other special alt representations
+                    if ("SV" !== this.type && isKnownAlt(alt)) {
+                        let altLength = alt.length;
+                        let lengthOnRef = ref.length;
+                        const lmin = Math.min(altLength, lengthOnRef);
+                        // Trim off matching bases.  Try first match, then right -> left,  then any remaining left -> right
+                        let s = 0;
+                        while (s < lmin && (ref.charCodeAt(s) === alt.charCodeAt(s))) {
+                            s++;
+                            altLength--;
+                            lengthOnRef--;
+                        }
+                        // right -> left from end
+                        while (altLength > 0 && lengthOnRef > 0) {
+                            const altIdx = s + altLength - 1;
+                            const refIdx = s + lengthOnRef - 1;
+                            if (alt.charCodeAt(altIdx) === ref.charCodeAt(refIdx)) {
+                                altLength--;
+                                lengthOnRef--;
+                            } else {
+                                break
+                            }
+                        }
+                        // if any remaining, left -> right
+                        while (altLength > 0 && lengthOnRef > 0) {
+                            const altIdx = s;
+                            const refIdx = s;
+                            if (alt.charCodeAt(altIdx) === ref.charCodeAt(refIdx)) {
+                                s++;
+                                altLength--;
+                                lengthOnRef--;
+                            } else {
+                                break
+                            }
+                        }
+                        const alleleStart = this.pos + s - 1;      // -1 for zero based coordinates
+                        const alleleEnd = alleleStart + lengthOnRef;
+                        this.start = this.start === undefined ? alleleStart : Math.min(this.start, alleleStart);
+                        this.end = this.end === undefined ? alleleEnd : Math.max(this.end, alleleEnd);
+                    }
+                }
+                // Default to single base representation @ position for variant types not otherwise handled
+                if (this.start === undefined) {
+                    this.start = this.pos - 1;
+                    this.end = this.pos;
+                }
+            }
+        }
+    }
+    popupData(genomicLocation, genomeId) {
+        const posString = `${numberFormatter$1(this.pos)}`;
+        const locString = this.start === this.end ?
+            `${numberFormatter$1(this.start)} | ${numberFormatter$1(this.start + 1)}` :
+            `${numberFormatter$1(this.start + 1)}-${numberFormatter$1(this.end)}`;
+        const fields = [
+            {name: "Chr", value: this.chr},
+            {name: "Pos", value: posString},
+            {name: "Loc", value: locString},
+            {name: "Names", value: this.names ? this.names : ""},
+            {name: "Ref", value: this.referenceBases},
+            {name: "Alt", value: this.alternateBases.replace("<", "&lt;")},
+            {name: "Qual", value: this.quality},
+            {name: "Filter", value: this.filter}
+        ];
+        if ("SNP" === this.type) {
+            let ref = this.referenceBases;
+            if (ref.length === 1) {
+                let altArray = this.alternateBases.split(",");
+                for (let alt of altArray) {
+                    if (alt.length === 1) {
+                        let l = TrackBase.getCravatLink(this.chr, this.pos, ref, alt, genomeId);
+                        if (l) {
+                            fields.push('<hr/>');
+                            fields.push({html: l});
+                        }
+                    }
+                }
+            }
+        }
+        if (this.hasOwnProperty("heterozygosity")) {
+            fields.push({name: "Heterozygosity", value: this.heterozygosity});
+        }
+        if (this.info) {
+            fields.push({html: '<hr style="border-top: dotted 1px;border-color: #c9c3ba" />'});
+            for (let key of Object.keys(this.info)) {
+                fields.push({name: key, value: arrayToString(decodeURIComponent(this.info[key]))});
+            }
+        }
+        return fields
+    };
+    isRefBlock() {
+        return "NONVARIANT" === this.type
+    }
+}
+const knownAltBases = new Set(["A", "C", "T", "G"].map(c => c.charCodeAt(0)));
+function isKnownAlt(alt) {
+    for (let i = 0; i < alt.length; i++) {
+        if (!knownAltBases.has(alt.charCodeAt(i))) {
+            return false
+        }
+    }
+    return true
+}
+function determineType(ref, altAlleles) {
+    const refLength = ref.length;
+    if (altAlleles === undefined) {
+        return "UNKNOWN"
+    } else if (altAlleles.trim().length === 0 ||
+        altAlleles === "<NON_REF>" ||
+        altAlleles === "<*>" ||
+        altAlleles === ".") {
+        return "NONVARIANT"
+    } else {
+        const alleles = altAlleles.split(",");
+        const types = alleles.map(function (a) {
+            if (refLength === 1 && a.length === 1) {
+                return "SNP"
+            } else {
+                return "<NON_REF>" === a ? "NONVARIANT" : "OTHER"
+            }
+        });
+        let type = types[0];
+        for (let t of types) {
+            if (t !== type) {
+                return "MIXED"
+            }
+        }
+        return type
+    }
+}
+function arrayToString(value, delim) {
+    if (delim === undefined) delim = ",";
+    if (!(Array.isArray(value))) {
+        return value
+    }
+    return value.join(delim)
+}
 /*
  * The MIT License (MIT)
  *
@@ -37031,6 +37524,7 @@ class VcfParser {
                 if (tokens.length === nExpectedColumns) {
                     const variant = createVCFVariant(tokens);
                     variant.header = this.header;       // Keep a pointer to the header to interpret fields for popup text
+                    //variant.line = line              // Uncomment for debugging
                     allFeatures.push(variant);
                     if (tokens.length > 9) {
@@ -39153,6 +39647,7 @@ class HtsgetVariantReader extends HtsgetReader {
  * THE SOFTWARE.
  */
+const DEFAULT_MAX_WG_COUNT = 10000;
 /**
  * feature source for "bed like" files (tab or whitespace delimited files with 1 feature per line: bed, gff, vcf, etc)
@@ -39167,8 +39662,9 @@ class TextFeatureSource {
         this.config = config || {};
         this.genome = genome;
         this.sourceType = (config.sourceType === undefined ? "file" : config.sourceType);
+        this.maxWGCount = config.maxWGCount || DEFAULT_MAX_WG_COUNT;
-        const queryableFormats = new Set(["bigwig", "bw", "bigbed", "bb", "tdf"]);
+        const queryableFormats = new Set(["bigwig", "bw", "bigbed", "bb", "biginteract", "tdf"]);
         if (config.features && Array.isArray(config.features)) {
             // Explicit array of features
@@ -39384,10 +39880,22 @@ class TextFeatureSource {
     // TODO -- filter by pixel size
     getWGFeatures(allFeatures) {
+        const makeWGFeature = (f) => {
+            const wg = Object.assign({}, f);
+            wg.chr = "all";
+            wg.start = genome.getGenomeCoordinate(f.chr, f.start);
+            wg.end = genome.getGenomeCoordinate(f.chr, f.end);
+            wg._f = f;
+            // Don't draw exons in whole genome view
+            if (wg["exons"]) delete wg["exons"];
+            return wg
+        };
         const genome = this.genome;
         const wgChromosomeNames = new Set(genome.wgChromosomeNames);
         const wgFeatures = [];
+        let count = 0;
+        const max = this.maxWGCount;
         for (let c of genome.wgChromosomeNames) {
             const features = allFeatures[c];
@@ -39396,19 +39904,18 @@ class TextFeatureSource {
                 for (let f of features) {
                     let queryChr = genome.getChromosomeName(f.chr);
                     if (wgChromosomeNames.has(queryChr)) {
-                        const wg = Object.assign({}, f);
-                        wg.chr = "all";
-                        wg.start = genome.getGenomeCoordinate(f.chr, f.start);
-                        wg.end = genome.getGenomeCoordinate(f.chr, f.end);
-                        wg._f = f;
-                        // Don't draw exons in whole genome view
-                        if (wg["exons"]) delete wg["exons"];
-                        wgFeatures.push(wg);
+                        if (wgFeatures.length < max) {
+                            wgFeatures.push(makeWGFeature(f));
+                        } else {
+                            //Reservoir sampling
+                            const samplingProb = max / (count + 1);
+                            if (Math.random() < samplingProb) {
+                                const idx = Math.floor(Math.random() * (max - 1));
+                                wgFeatures[idx] = makeWGFeature(f);
+                            }
+                        }
                     }
+                    count++;
                 }
             }
         }
@@ -39579,9 +40086,9 @@ class BufferedReader {
 //table chromatinInteract
-function getDecoder(definedFieldCount, fieldCount, autoSql) {
+function getDecoder(definedFieldCount, fieldCount, autoSql, format) {
-    if (autoSql && 'chromatinInteract' === autoSql.table) {
+    if (autoSql && 'chromatinInteract' === autoSql.table || "biginteract" === format) {
         return decodeInteract
     } else {
         const standardFieldCount = definedFieldCount - 3;
@@ -39728,6 +40235,7 @@ class BWReader {
     constructor(config, genome) {
         this.path = config.url;
+        this.format = config.format || "bigwig";
         this.genome = genome;
         this.rpTreeCache = {};
         this.config = config;
@@ -40328,7 +40836,7 @@ function decodeWigData(data, chrIdx1, bpStart, chrIdx2, bpEnd, featureArray, chr
 function getBedDataDecoder() {
     const minSize = 3 * 4 + 1;   // Minimum # of bytes required for a bed record
-    const decoder = getDecoder(this.header.definedFieldCount, this.header.fieldCount, this.autoSql);
+    const decoder = getDecoder(this.header.definedFieldCount, this.header.fieldCount, this.autoSql, this.format);
     return function (data, chrIdx1, bpStart, chrIdx2, bpEnd, featureArray, chrDict) {
         const binaryParser = new BinaryParser(data);
         while (binaryParser.remLength() >= minSize) {
@@ -41196,7 +41704,7 @@ function zoomLevelForScale(chr, bpPerPixel, genome) {
 function FeatureSource(config, genome) {
     const format = config.format ? config.format.toLowerCase() : undefined;
-    if ('bigwig' === format || 'bigbed' === format || 'bb' === format) {
+    if ('bigwig' === format || 'bigbed' === format || 'bb' === format || "biginteract" === format) {
         return new BWSource(config, genome)
     } else if ("tdf" === format) {
         return new TDFSource(config, genome)
@@ -41337,7 +41845,7 @@ function renderFeature(feature, bpStart, xScale, pixelHeight, ctx, options) {
             // single-exon transcript
             const xLeft = Math.max(0, coord.px);
             const xRight = Math.min(pixelWidth, coord.px1);
-            const width = Math.max(coord.pw, xRight - xLeft);
+            const width = xRight - xLeft;
             ctx.fillRect(xLeft, py, width, h);
             // Arrows
@@ -42062,7 +42570,7 @@ class FeatureTrack extends TrackBase {
             desc += "</html>";
             return desc
         } else {
-            return this.name
+            return super.description();
         }
     };
@@ -42144,8 +42652,12 @@ class WigTrack extends TrackBase {
         const format = config.format ? config.format.toLowerCase() : config.format;
         if ("bigwig" === format) {
+            this.flipAxis = config.flipAxis ? config.flipAxis : false;
+            this.logScale = config.logScale ? config.logScale : false;
             this.featureSource = new BWSource(config, this.browser.genome);
         } else if ("tdf" === format) {
+            this.flipAxis = config.flipAxis ? config.flipAxis : false;
+            this.logScale = config.logScale ? config.logScale : false;
             this.featureSource = new TDFSource(config, this.browser.genome);
         } else {
             this.featureSource = FeatureSource(config, this.browser.genome);
@@ -42194,7 +42706,20 @@ class WigTrack extends TrackBase {
     }
     menuItemList() {
-        return MenuUtils.numericDataMenuItems(this.trackView)
+        let items = [];
+        if (this.flipAxis !== undefined) {
+            items.push({
+                label:"Flip y-axis",
+                click: () => {
+                    this.flipAxis = !this.flipAxis;
+                    this.trackView.repaintViews();
+                }
+            });
+        }
+        items = items.concat(MenuUtils.numericDataMenuItems(this.trackView));
+        return items
     }
     async getHeader() {
@@ -42205,6 +42730,27 @@ class WigTrack extends TrackBase {
         return this.header
     }
+    // TODO: refactor to igvUtils.js
+    getScaleFactor(min, max, height, logScale) {
+        const scale = logScale ? height / (Math.log10(max + 1) - (min <= 0 ? 0 : Math.log10(min + 1))) : height / (max - min);
+        return scale
+    }
+    computeYPixelValue(yValue, yScaleFactor) {
+        return (this.flipAxis ? (yValue - this.dataRange.min) : (this.dataRange.max - yValue)) * yScaleFactor
+    }
+    computeYPixelValueInLogScale(yValue, yScaleFactor) {
+        let maxValue = this.dataRange.max;
+        let minValue = this.dataRange.min;
+        if (maxValue <= 0) return 0 // TODO:
+        if (minValue <= -1) minValue = 0;
+        minValue = (minValue <= 0) ? 0 : Math.log10(minValue + 1);
+        maxValue = Math.log10(maxValue + 1);
+        yValue = Math.log10(yValue + 1);
+        return ((this.flipAxis ? (yValue - minValue) : (maxValue - yValue)) * yScaleFactor)
+    }
     draw(options) {
         const features = options.features;
@@ -42212,7 +42758,7 @@ class WigTrack extends TrackBase {
         const bpPerPixel = options.bpPerPixel;
         const bpStart = options.bpStart;
         const pixelWidth = options.pixelWidth;
-        const pixelHeight = options.pixelHeight;
+        options.pixelHeight;
         const bpEnd = bpStart + pixelWidth * bpPerPixel + 1;
         let lastPixelEnd = -1;
         let lastValue = -1;
@@ -42224,9 +42770,10 @@ class WigTrack extends TrackBase {
             baselineColor = IGVColor.addAlpha(posColor, 0.1);
         }
-        const yScale = (yValue) => {
-            return ((this.dataRange.max - yValue) / (this.dataRange.max - this.dataRange.min)) * pixelHeight
-        };
+        const scaleFactor = this.getScaleFactor(this.dataRange.min, this.dataRange.max, options.pixelHeight, this.logScale);
+        const yScale = (yValue) => this.logScale
+            ? this.computeYPixelValueInLogScale(yValue, scaleFactor)
+            : this.computeYPixelValue(yValue, scaleFactor);
         if (features && features.length > 0) {
@@ -42236,7 +42783,7 @@ class WigTrack extends TrackBase {
             // nothing to paint.
             if (this.dataRange.max > this.dataRange.min) {
-                const y0 = this.dataRange.min == 0 ? pixelHeight : yScale(0);
+                const y0 = yScale(0);
                 for (let f of features) {
                     if (f.end < bpStart) continue
@@ -42260,9 +42807,6 @@ class WigTrack extends TrackBase {
                     } else {
                         let height = y - y0;
-                        if ((Math.abs(height)) < 1) {
-                            height = height < 0 ? -1 : 1;
-                        }
                         const pixelEnd = x + width;
                         if (pixelEnd > lastPixelEnd || (f.value >= 0 && f.value > lastValue) || (f.value < 0 && f.value < lastNegValue)) {
                             IGVGraphics.fillRect(ctx, x, y0, width, height, {fillStyle: color});
@@ -42359,6 +42903,21 @@ class WigTrack extends TrackBase {
     dispose() {
         this.trackView = undefined;
     }
+    /**
+     * Return the current state of the track.  Used to create sessions and bookmarks.
+     *
+     * @returns {*|{}}
+     */
+    getState() {
+        const config = super.getState();
+        if (this.flipAxis !== undefined) config.flipAxis = this.flipAxis;
+        if (this.logScale !== undefined) config.logScale = this.logScale;
+        return config
+    }
 }
 /**
@@ -42523,7 +43082,11 @@ class SegTrack extends TrackBase {
         //   this.featureSource = config.sourceType === "bigquery" ?
         //       new igv.BigQueryFeatureSource(this.config) :
-        this.featureSource = FeatureSource(this.config, this.browser.genome);
+        // Disable whole genome downsampling unless explicitly.
+        const configCopy = Object.assign({}, this.config);
+        configCopy.maxWGCount = configCopy.maxWGCount || Number.MAX_SAFE_INTEGER;
+        this.featureSource = FeatureSource(configCopy, this.browser.genome);
         this.initialSort = config.sort;
     }
@@ -43173,6 +43736,19 @@ function autoscale(chr, featureArrays) {
  * THE SOFTWARE.
  */
+function getArcType(config) {
+    if (!config.arcType) {
+        return "nested"
+    }
+    switch (config.arcType) {
+        case "chiapet":
+            return "inView"
+        case "chiapetoutbound":
+            return "partialInView"
+        default:
+            return config.arcType
+    }
+}
 class InteractionTrack extends TrackBase {
@@ -43187,13 +43763,14 @@ class InteractionTrack extends TrackBase {
         this.sinTheta = Math.sin(this.theta);
         this.cosTheta = Math.cos(this.theta);
         this.height = config.height || 250;
-        this.arcType = config.arcType || "nested";   // nested | proportional
+        this.arcType = getArcType(config);   // nested | proportional | inView | partialInView
         this.arcOrientation = (config.arcOrientation === undefined ? true : config.arcOrientation); // true for up, false for down
         this.showBlocks = config.showBlocks === undefined ? true : config.showBlocks;
         this.blockHeight = config.blockHeight || 3;
         this.thickness = config.thickness || 1;
         this.color = config.color || "rgb(180,25,137)";
-        this.alpha = config.alpha || 0.15;
+        this.alpha = config.alpha || 0.02;  // was: 0.15
+        this.painter = {flipAxis: !this.arcOrientation, dataRange: this.dataRange, paintAxis: paintAxis};
         if (config.valueColumn) {
             this.valueColumn = config.valueColumn;
@@ -43258,6 +43835,8 @@ class InteractionTrack extends TrackBase {
         if (this.arcType === "proportional") {
             this.drawProportional(options);
+        } else if (this.arcType === "inView" || this.arcType === "partialInView") {
+            this.drawProportional(options);
         } else {
             this.drawNested(options);
         }
@@ -43289,6 +43868,9 @@ class InteractionTrack extends TrackBase {
             for (let feature of featureList) {
+                // Reset transient property drawState.  An undefined value => feature has not been drawn.
+                feature.drawState = undefined;
                 let color = feature.color || this.color;
                 if (color && this.config.useScore) {
                     color = getAlphaColor(color, scoreShade(feature.score));
@@ -43358,7 +43940,10 @@ class InteractionTrack extends TrackBase {
                     }
                     const otherChr = feature.chr === feature.chr1 ? feature.chr2 : feature.chr1;
                     ctx.strokeStyle = color;
-                    ctx.fillStyle = color;
+                    // get a sense of trans "spread"
+                    ctx.fillStyle = getAlphaColor(getChrColor(otherChr), 0.5);
+                    // ctx.fillStyle = color
                     if (direction) {
                         // UP
                         ctx.fillRect(pixelStart, this.height / 2, w, this.height / 2);
@@ -43392,6 +43977,11 @@ class InteractionTrack extends TrackBase {
         }
     }
+    getScaleFactor(min, max, height, logScale) {
+        const scale = logScale ? height / (Math.log10(max + 1) - (min <= 0 ? 0 : Math.log10(min + 1))) : height / (max - min);
+        return scale
+    }
     drawProportional(options) {
         const ctx = options.context;
@@ -43400,12 +43990,9 @@ class InteractionTrack extends TrackBase {
         const bpPerPixel = options.bpPerPixel;
         const bpStart = options.bpStart;
         const xScale = bpPerPixel;
+        const refStart = options.referenceFrame.start;
+        const refEnd = options.referenceFrame.end;
-        // SVG output for proportional arcs are currently not supported because "ellipse" is not implemented
-        // if(typeof ctx.ellipse !== 'function') {
-        //     Alert.presentAlert("SVG output of proportional arcs is currently not supported.")
-        //     return;
-        // }
         IGVGraphics.fillRect(ctx, 0, options.pixelTop, pixelWidth, pixelHeight, {'fillStyle': "rgb(255, 255, 255)"});
@@ -43413,37 +44000,65 @@ class InteractionTrack extends TrackBase {
         if (featureList && featureList.length > 0) {
-            const yScale = this.logScale ?
-                options.pixelHeight / Math.log10(this.dataRange.max + 1) :
-                options.pixelHeight / (this.dataRange.max - this.dataRange.min);
+            // we use the min as a filter but not moving the axis
+            const effectiveMin = 0;
+            const yScale = this.getScaleFactor(effectiveMin, this.dataRange.max, options.pixelHeight - 1, this.logScale);
             const y = this.arcOrientation ? options.pixelHeight : 0;
             for (let feature of featureList) {
+                // Reset transient property drawState.  An undefined value => feature has not been drawn.
+                feature.drawState = undefined;
                 const value = this.valueColumn ? feature[this.valueColumn] : feature.score;
                 if (value === undefined || Number.isNaN(value)) continue
-                const radiusY = this.logScale ?
-                    Math.log10(value + 1) * yScale :
-                    value * yScale;
+                const radiusY = Math.round((this.logScale ? Math.log10(value + 1) : value) * yScale);
                 if (feature.chr1 === feature.chr2 || feature.chr === 'all') {
                     const {m1, m2} = getMidpoints(feature, this.browser.genome);
-                    let pixelStart = (m1 - bpStart) / xScale;
-                    let pixelEnd = (m2 - bpStart) / xScale;
+                    let pixelStart = Math.round((m1 - bpStart) / xScale);
+                    let pixelEnd = Math.round((m2 - bpStart) / xScale);
                     let w = (pixelEnd - pixelStart);
                     if (w < 3) {
                         w = 3;
                         pixelStart--;
                     }
-                    if (pixelEnd < 0 || pixelStart > pixelWidth || value < this.dataRange.min) continue
+                    // Various filters
+                    if (value < this.dataRange.min || value > this.dataRange.max) continue
+                    if ("proportional" !== this.arcType) {
+                        const showOutbound = (this.arcType === "partialInView");
+                        const within = (m1 >= refStart && m2 <= refEnd);
+                        let outBound = false;
+                        let inBound = false;
+                        if (!within && showOutbound) {
+                            outBound = (refStart <= m1 && m1 <= refEnd);
+                            if (!outBound) inBound = (refStart <= m2 && m2 <= refEnd);
+                        }
+                        if (!(within || outBound || inBound)) continue
+                    }
                     const radiusX = w / 2;
                     const xc = pixelStart + w / 2;
+                    feature.drawState = {xc, yc: y, radiusX, radiusY};
+                    // const arcKey = ((pixelStart << 16) | pixelEnd)
+                    // let arc = arcCaches.get(arcKey)
+                    // if (arc !== undefined) {
+                    //     if (arc.has(radiusY)) {
+                    //         continue
+                    //     }
+                    //     arc.add(radiusY)
+                    // } else {
+                    //     let arcHeights = new Set()
+                    //     arcHeights.add(radiusY)
+                    //     arcCaches.set(arcKey, arcHeights)
+                    // }
                     const counterClockwise = this.arcOrientation ? true : false;
                     const color = feature.color || this.color;
                     ctx.strokeStyle = color;
@@ -43457,6 +44072,15 @@ class InteractionTrack extends TrackBase {
                         ctx.stroke();
                     }
+                    if (this.alpha) {
+                        ctx.fillStyle = getAlphaColor(color, this.alpha);
+                        if (true === ctx.isSVG) {
+                            ctx.fillEllipse(xc, y, radiusX, radiusY, 0, 0, Math.PI, counterClockwise);
+                        } else {
+                            ctx.fill();
+                        }
+                    }
                     if (this.showBlocks && feature.chr !== 'all') {
                         ctx.fillStyle = color;
                         const s1 = (feature.start1 - bpStart) / xScale;
@@ -43468,21 +44092,11 @@ class InteractionTrack extends TrackBase {
                         ctx.fillRect(s2, y, e2 - s2, hb);
                     }
-                    if (this.alpha) {
-                        ctx.fillStyle = getAlphaColor(color, this.alpha);
-                        if (true === ctx.isSVG) {
-                            ctx.fillEllipse(xc, y, radiusX, radiusY, 0, 0, Math.PI, counterClockwise);
-                        } else {
-                            ctx.fill();
-                        }
-                    }
-                    feature.drawState = {xc, yc: y, radiusX, radiusY};
                 } else {
+                    // Inter chromosome
                     let pixelStart = Math.round((feature.start - bpStart) / xScale);
                     let pixelEnd = Math.round((feature.end - bpStart) / xScale);
-                    if (pixelEnd < 0 || pixelStart > pixelWidth || value < this.dataRange.min) continue
+                    if (pixelEnd < 0 || pixelStart > pixelWidth || value < this.dataRange.min || value > this.dataRange.max) continue
                     const h = Math.min(radiusY, this.height - 13);   // Leave room for text
                     let w = (pixelEnd - pixelStart);
@@ -43493,6 +44107,8 @@ class InteractionTrack extends TrackBase {
                     const otherChr = feature.chr === feature.chr1 ? feature.chr2 : feature.chr1;
                     ctx.font = "8px sans-serif";
                     ctx.textAlign = "center";
+                    // get a sense of trans "spread"
+                    ctx.fillStyle = getAlphaColor(getChrColor(otherChr), 0.5);
                     if (this.arcOrientation) {
                         // UP
                         const y = this.height - h;
@@ -43509,6 +44125,26 @@ class InteractionTrack extends TrackBase {
         }
     }
+    clearAxis(ctx, pixelWidth, pixelHeight) {
+        IGVGraphics.fillRect(ctx, 0, 0, pixelWidth, pixelHeight, {'fillStyle': "rgb(255, 255, 255)"});
+    }
+    paintAxis(ctx, pixelWidth, pixelHeight) {
+        // dataRane is interpreted differently for interactino tracks -- all arcs are drawn from "zero", irrespective of dataRange.min
+        const axisRange = {min: 0, max: this.dataRange.max};
+        if (this.arcType === "proportional") {
+            this.painter.flipAxis = !this.arcOrientation;
+            this.painter.dataRange = axisRange;
+            this.painter.paintAxis(ctx, pixelWidth, pixelHeight);
+        } else if (this.arcType === "inView" || this.arcType === "partialInView") {
+            this.painter.flipAxis = !this.arcOrientation;
+            this.painter.dataRange = axisRange;
+            this.painter.paintAxis(ctx, pixelWidth, pixelHeight);
+        } else {
+            this.clearAxis(ctx, pixelWidth, pixelHeight);
+        }
+    }
     menuItemList() {
         let items = [
@@ -43525,10 +44161,13 @@ class InteractionTrack extends TrackBase {
         if (this.hasValue) {
             const lut =
                 {
-                    "nested": "Nested Arcs",
-                    "proportional": "Proportional Arcs"
+                    "nested": "Nested",
+                    "proportional": "Proportional - All",
+                    "inView": "Proportional - Both Ends in View",
+                    "partialInView": "Proportional - One End in View"
                 };
-            for (let arcType of ["nested", "proportional"]) {
+            items.push("<b>Arc Type</b>");
+            for (let arcType of ["nested", "proportional", "inView", "partialInView"]) {
                 items.push(
                     {
                         object: $$1(createCheckbox$1(lut[arcType], arcType === this.arcType)),
@@ -43539,45 +44178,37 @@ class InteractionTrack extends TrackBase {
                     });
             }
         }
+        items.push("<hr/>");
         items.push({
-            object: $$1(createCheckbox$1("Show Blocks", this.showBlocks)),
+            name: "Toggle arc direction",
             click: () => {
-                this.showBlocks = !this.showBlocks;
+                this.arcOrientation = !this.arcOrientation;
                 this.trackView.repaintViews();
             }
         });
         items.push({
-            name: "Toggle arc direction",
+            name: this.showBlocks ? "Hide Blocks" : "Show Blocks",
             click: () => {
-                this.arcOrientation = !this.arcOrientation;
+                this.showBlocks = !this.showBlocks;
                 this.trackView.repaintViews();
             }
         });
-        if (this.arcType === "proportional") {
-            items.push("<HR>");
+        if (this.arcType === "proportional" || this.arcType === "inView" || this.arcType === "partialInView") {
+            // MenuUtils.numericDataMenuItems(this.trackView).forEach(item => items.push(item))
             items = items.concat(MenuUtils.numericDataMenuItems(this.trackView));
         }
         if (this.browser.circularView && true === this.browser.circularViewVisible) {
+            items.push('<hr/>');
             items.push({
                 label: 'Add interactions to circular view',
                 click: () => {
-                    const inView = [];
                     for (let viewport of this.trackView.viewports) {
-                        const refFrame = viewport.referenceFrame;
-                        for (let f of viewport.getCachedFeatures()) {
-                            if (f.end >= refFrame.start && f.start <= refFrame.end) {
-                                inView.push(f);
-                            }
-                        }
+                        this.addChordsForViewport(viewport.referenceFrame);
                     }
-                    const chords = makeBedPEChords(inView);
-                    const color = IGVColor.addAlpha(this.color, 0.5);
-                    this.browser.circularView.addChords(chords, {track: this.name, color: color});
                 }
             });
         }
@@ -43596,22 +44227,43 @@ class InteractionTrack extends TrackBase {
                 label: 'Add interactions to circular view',
                 click: () => {
                     const refFrame = viewport.referenceFrame;
-                    const inView = "all" === refFrame.chr ?
-                        this.featureSource.getAllFeatures() :
-                        this.featureSource.featureCache.queryFeatures(refFrame.chr, refFrame.start, refFrame.end);
-                    this.browser.circularViewVisible = true;
-                    const chords = makeBedPEChords(inView);
-                    const color = IGVColor.addAlpha(this.color, 0.5);
-                    this.browser.circularView.addChords(chords, {track: this.name, color: color});
+                    // first pass: to get all the relevant features
+                    this.addChordsForViewport(refFrame);
                 }
             });
             list.push('<hr/>');
             return list
         }
     }
+    /**
+     * Add chords to the circular view for the given viewport, represented by its reference frame
+     * @param refFrame
+     */
+    addChordsForViewport(refFrame) {
+        const cachedFeatures = "all" === refFrame.chr ?
+            this.featureSource.getAllFeatures() :
+            this.featureSource.featureCache.queryFeatures(refFrame.chr, refFrame.start, refFrame.end);
+        // inView features are simply features that have been drawn, i.e. have a drawState
+        const inView = cachedFeatures.filter(f => f.drawState);
+        if(inView.length === 0) erturn;
+        this.browser.circularViewVisible = true;
+        const chords = makeBedPEChords(inView);
+        // for filtered set, distinguishing the chromosomes is more critical than tracks
+        const chordSetColor = IGVColor.addAlpha("all" === refFrame.chr ? this.color : getChrColor(refFrame.chr), 0.5);
+        const trackColor = IGVColor.addAlpha(this.color, 0.5);
+        // name the chord set to include filtering information
+        const encodedName = this.name.replaceAll(' ', '%20');
+        const chordSetName = "all" === refFrame.chr ?
+            encodedName :
+            `${encodedName} (${refFrame.chr}:${refFrame.start}-${refFrame.end} ; range:${this.dataRange.min}-${this.dataRange.max})`;
+        this.browser.circularView.addChords(chords, {track: chordSetName, color: chordSetColor, trackColor: trackColor});
+    }
     doAutoscale(features) {
@@ -43678,10 +44330,12 @@ class InteractionTrack extends TrackBase {
         const featureList = features || clickState.viewport.getCachedFeatures();
         const candidates = [];
         if (featureList) {
-            const proportional = this.arcType === "proportional";
+            const proportional = (this.arcType === "proportional" || this.arcType === "inView" || this.arcType === "partialInView");
             for (let feature of featureList) {
                 if (!feature.drawState) continue
                 if (feature.chr1 === feature.chr2 || feature.chr === 'all') {
                     if (proportional) {
                         //(x-xc)^2/radiusX^2 + (y-yc)^2/radiusY^2 <= 1
@@ -43719,6 +44373,26 @@ class InteractionTrack extends TrackBase {
         }
         return candidates.map((c) => c.feature)
     }
+    /**
+     * Return the current state of the track.  Used to create sessions and bookmarks.
+     *
+     * @returns {*|{}}
+     */
+    getState() {
+        const config = super.getState();
+        // if (this.height !== undefined) config.height = this.height;
+        if (this.arcType !== undefined) config.arcType = this.arcType;
+        if (this.arcOrientation !== undefined) config.arcOrientation = this.arcOrientation;
+        if (this.showBlocks !== undefined) config.showBlocks = this.showBlocks;
+        if (this.blockHeight !== undefined) config.blockHeight = this.blockHeight;
+        if (this.thickness !== undefined) config.thickness = this.thickness;
+        if (this.alpha !== undefined) config.alpha = this.alpha;
+        return config
+    }
 }
 function getMidpoints(feature, genome) {
@@ -43782,29 +44456,93 @@ function getAlphaColor(color, alpha) {
 /**
- * Called in the context of FeatureSource
+ * Called in the context of FeatureSource  (i.e. this == the feature source (a TextFeatureSource) for the track
+ *
  * @param allFeatures
  * @returns {[]}
  */
 function getWGFeatures(allFeatures) {
+    const makeWGFeature = (f) => {
+        const wg = Object.assign({}, f);
+        wg.chr = "all";
+        wg.start = genome.getGenomeCoordinate(f.chr1, f.start1);
+        wg.end = genome.getGenomeCoordinate(f.chr2, f.end2);
+        return wg
+    };
     const genome = this.genome;
-    const wgFeatures = [];
+    // First pass -- find the max score feature
+    let maxScoreFeature;
+    let totalFeatureCount = 0;
     for (let c of genome.wgChromosomeNames) {
-        const chrFeatures = allFeatures[c];
+        let chrFeatures = allFeatures[c];
         if (chrFeatures) {
             for (let f of chrFeatures) {
                 if (!f.dup) {
-                    const wg = Object.assign({}, f);
-                    wg.chr = "all";
-                    wg.start = genome.getGenomeCoordinate(f.chr1, f.start1);
-                    wg.end = genome.getGenomeCoordinate(f.chr2, f.end2);
-                    wgFeatures.push(wg);
+                    totalFeatureCount++;
+                    if (f.score && (!maxScoreFeature || f.score > maxScoreFeature.score)) {
+                        maxScoreFeature = f;
+                    }
+                }
+            }
+        }
+    }
+    const maxCount = this.maxWGCount;
+    const nBins = maxScoreFeature && maxScoreFeature.score > 0 && totalFeatureCount > maxCount ? 5 : 1;   // TODO make a function of total # of features & maxCount?
+    const featuresPerBin = Math.floor(maxCount / nBins);
+    const binSize = maxScoreFeature && maxScoreFeature.score > 0 ? Math.log(maxScoreFeature.score) / nBins : Number.MAX_SAFE_INTEGER;
+    let binnedFeatures = [];
+    let counts = [];
+    for (let i = 0; i < nBins; i++) {
+        counts.push([0]);
+        binnedFeatures.push([]);
+    }
+    for (let c of genome.wgChromosomeNames) {
+        let chrFeatures = allFeatures[c];
+        if (chrFeatures) {
+            for (let f of chrFeatures) {
+                if (!f.dup) {
+                    const bin = f.score ? Math.min(nBins - 1, Math.floor(Math.log(f.score) / binSize)) : 0;
+                    if (binnedFeatures[bin].length < featuresPerBin) {
+                        binnedFeatures[bin].push(makeWGFeature(f));
+                    } else {
+                        //Reservoir sampling
+                        const samplingProb = featuresPerBin / (counts[bin] + 1);
+                        if (Math.random() < samplingProb) {
+                            const idx = Math.floor(Math.random() * (featuresPerBin - 1));
+                            binnedFeatures[bin][idx] = makeWGFeature(f);
+                        }
+                    }
+                    counts[bin]++;
                 }
             }
         }
     }
+    let wgFeatures;
+    if (nBins === 1) {
+        wgFeatures = binnedFeatures[0];
+    } else {
+        wgFeatures = [];
+        for (let bf of binnedFeatures) {
+            for (let f of bf) wgFeatures.push(f);
+        }
+        // Keep the feature with max score
+        if (maxScoreFeature) {
+            wgFeatures.push(makeWGFeature(maxScoreFeature));
+        }
+        wgFeatures.sort(function (a, b) {
+            return a.start - b.start
+        });
+        console.log(wgFeatures.length);
+    }
     return wgFeatures
 }
@@ -44876,7 +45614,6 @@ class GWASTrack extends TrackBase {
         this.divider = config.divider || "rgb(225,225,225)";
         this.dotSize = config.dotSize || 3;
         this.popoverWindow = (config.popoverWindow === undefined ? DEFAULT_POPOVER_WINDOW : config.popoverWindow);
-        this.description = config.description;  // might be null
         this.colorScales = config.color ?
             new ConstantColorScale(config.color) :
@@ -46428,12 +47165,6 @@ class SpliceJunctionTrack extends TrackBase {
         return data
     }
-    description() {
-        return this.name
-    }
     /**
      * Called when the track is removed.  Do any needed cleanup here
      */
@@ -47000,7 +47731,7 @@ class ReferenceFrame {
         this.end = end;
         this.bpPerPixel = bpPerPixel;
-        this.id = guid$1();
+        this.id = guid$2();
     }
     calculateEnd(pixels) {
@@ -47722,7 +48453,7 @@ class CursorGuide {
         this.addMouseHandler(browser);
-        this.setVisibility(browser.config.showCursorTrackingGuide);
+        this.setVisibility(browser.config.showCursorGuide);
     }
@@ -47739,35 +48470,40 @@ class CursorGuide {
             const target = document.elementFromPoint(event.clientX, event.clientY);
             let viewport = undefined;
-            if (target.parentElement.classList.contains('igv-viewport-content')) {
-                viewport = target.parentElement.parentElement;
-            } else if (target.parentElement.classList.contains('igv-viewport') && target.classList.contains('igv-viewport-content')) {
-                viewport = target.parentElement;
-            }
-            if (viewport && browser.getRulerTrackView()) {
+            if (target.parentElement) {
-                this.verticalGuide.style.left = `${x}px`;
+                if (target.parentElement.classList.contains('igv-viewport-content')) {
+                    viewport = target.parentElement.parentElement;
+                } else if (target.parentElement.classList.contains('igv-viewport') && target.classList.contains('igv-viewport-content')) {
+                    viewport = target.parentElement;
+                }
+                if (viewport && browser.getRulerTrackView()) {
+                    this.verticalGuide.style.left = `${x}px`;
-                const columns = browser.root.querySelectorAll('.igv-column');
-                let index = undefined;
-                const viewportParent = viewport.parentElement;
-                for (let i = 0; i < columns.length; i++) {
-                    if (undefined === index && viewportParent === columns[i]) {
-                        index = i;
+                    const columns = browser.root.querySelectorAll('.igv-column');
+                    let index = undefined;
+                    const viewportParent = viewport.parentElement;
+                    for (let i = 0; i < columns.length; i++) {
+                        if (undefined === index && viewportParent === columns[i]) {
+                            index = i;
+                        }
                     }
-                }
-                const rulerViewport = browser.getRulerTrackView().viewports[index];
-                const result = rulerViewport.mouseMove(event);
+                    const rulerViewport = browser.getRulerTrackView().viewports[index];
+                    const result = rulerViewport.mouseMove(event);
-                if (result) {
+                    if (result) {
-                    const {start, bp, end} = result;
-                    const interpolant = (bp - start) / (end - start);
+                        const {start, bp, end} = result;
+                        const interpolant = (bp - start) / (end - start);
+                        if (this.customMouseHandler) {
+                            this.customMouseHandler({start, bp, end, interpolant});
+                        }
-                    if (this.customMouseHandler) {
-                        this.customMouseHandler({start, bp, end, interpolant});
                     }
                 }
@@ -47781,8 +48517,8 @@ class CursorGuide {
         this.columnContainer.removeEventListener('mousemove', this.boundMouseMoveHandler);
     }
-    setVisibility(showCursorTrackingGuide) {
-        if (true === showCursorTrackingGuide) {
+    setVisibility(showCursorGuide) {
+        if (true === showCursorGuide) {
             this.show();
         } else {
             this.hide();
@@ -47953,50 +48689,52 @@ class CenterLineButton {
  * THE SOFTWARE.
  */
-const TrackLabelControl = function (parent, browser) {
+class TrackLabelControl {
-    this.button = div$1({class: 'igv-navbar-button'});
-    parent.appendChild(this.button);
-    this.button.textContent = 'track labels';
+    constructor(parent, browser) {
-    this.button.addEventListener('click', () => {
-        browser.trackLabelsVisible = !browser.trackLabelsVisible;
-        this.setState(browser.trackLabelsVisible);
-        browser.setTrackLabelVisibility(browser.trackLabelsVisible);
-    });
+        this.button = div$1({class: 'igv-navbar-button'});
+        parent.appendChild(this.button);
+        this.button.textContent = 'track labels';
-    this.browser = browser;
+        this.button.addEventListener('click', () => {
+            browser.trackLabelsVisible = !browser.trackLabelsVisible;
+            this.setState(browser.trackLabelsVisible);
+            browser.setTrackLabelVisibility(browser.trackLabelsVisible);
+        });
-    this.setVisibility(browser.config.showTrackLabelButton);
+        this.browser = browser;
-    this.setState(browser.trackLabelsVisible);
+        this.setVisibility(browser.config.showTrackLabelButton);
-};
+        this.setState(browser.trackLabelsVisible);
+    }
-TrackLabelControl.prototype.setVisibility = function (showTrackLabelButton) {
-    if (true === showTrackLabelButton) {
-        this.show();
-    } else {
-        this.hide();
+    setVisibility(showTrackLabelButton) {
+        if (true === showTrackLabelButton) {
+            this.show();
+        } else {
+            this.hide();
+        }
     }
-};
-TrackLabelControl.prototype.setState = function (trackLabelsVisible) {
-    if (true === trackLabelsVisible) {
-        this.button.classList.add('igv-navbar-button-clicked');
-    } else {
-        this.button.classList.remove('igv-navbar-button-clicked');
+    setState(trackLabelsVisible) {
+        if (true === trackLabelsVisible) {
+            this.button.classList.add('igv-navbar-button-clicked');
+        } else {
+            this.button.classList.remove('igv-navbar-button-clicked');
+        }
     }
-};
-TrackLabelControl.prototype.show = function () {
-    this.button.style.display = 'block';
-    this.setState(this.browser.trackLabelsVisible);
-};
+    show() {
+        this.button.style.display = 'block';
+        this.setState(this.browser.trackLabelsVisible);
+    }
-TrackLabelControl.prototype.hide = function () {
-    this.button.style.display = 'none';
-};
+    hide() {
+        this.button.style.display = 'none';
+    }
+}
 /*
  * The MIT License (MIT)
@@ -48281,55 +49019,6 @@ const SVGSaveControl = function (parent, browser) {
     button.addEventListener('click', () => browser.saveSVGtoFile({}));
 };
-const viewportColumnManager =
-    {
-        createColumns: (columnContainer, count) => {
-            for (let i = 0; i < count; i++) {
-                if (0 === i) {
-                    createColumn(columnContainer, 'igv-column');
-                } else {
-                    columnContainer.appendChild(div$1({class: 'igv-column-shim'}));
-                    createColumn(columnContainer, 'igv-column');
-                }
-            }
-        },
-        removeColumnAtIndex: (i, column) => {
-            const shim = 0 === i ? column.nextElementSibling : column.previousElementSibling;
-            column.remove();
-            shim.remove();
-        },
-        insertAfter: referenceElement => {
-            const shim = div$1({class: 'igv-column-shim'});
-            insertElementAfter(shim, referenceElement);
-            const column = div$1({class: 'igv-column'});
-            insertElementAfter(column, shim);
-            return column
-        },
-        insertBefore: (referenceElement, count) => {
-            for (let i = 0; i < count; i++) {
-                const column = div$1({class: 'igv-column'});
-                insertElementBefore(column, referenceElement);
-                if (count > 1 && i > 0) {
-                    const columnShim = div$1({class: 'igv-column-shim'});
-                    insertElementBefore(columnShim, column);
-                }
-            }
-        },
-    };
 /*
  * The MIT License (MIT)
  *
@@ -48711,6 +49400,18 @@ CircularViewControl.prototype.hide = function () {
     this.button.style.display = 'none';
 };
+/**
+ * User supplied button for the navbar
+ */
+const CustomButton = function (parent, browser, b) {
+    const button = div$1({class: 'igv-navbar-button'});
+    parent.append(button);
+    button.textContent = b.label;
+    button.addEventListener('click', () => b.callback(browser));
+};
 /*
  * The MIT License (MIT)
  *
@@ -48756,7 +49457,7 @@ class Browser {
     constructor(config, parentDiv) {
         this.config = config;
-        this.guid = guid$1();
+        this.guid = guid$2();
         this.namespace = '.browser_' + this.guid;
         this.parent = parentDiv;
@@ -48808,7 +49509,7 @@ class Browser {
         this.isCenterLineVisible = config.showCenterGuide;
-        this.cursorGuideVisible = config.showCursorTrackingGuide;
+        this.cursorGuideVisible = config.showCursorGuide;
         this.showSampleNames = config.showSampleNames;
         this.showSampleNameButton = config.showSampleNameButton;
@@ -48921,6 +49622,12 @@ class Browser {
             this.svgSaveControl = new SVGSaveControl($toggle_button_container.get(0), this);
         }
+        if(config.customButtons) {
+            for(let b of config.customButtons) {
+                new CustomButton($toggle_button_container.get(0), this, b);
+            }
+        }
         this.zoomWidget = new ZoomWidget(this, $navbarRightContainer.get(0));
         if (false === config.showNavigation) {
@@ -48928,13 +49635,13 @@ class Browser {
         }
         this.inputDialog = new InputDialog(this.root);
-        this.inputDialog.container.id = `igv-input-dialog-${guid$1()}`;
+        this.inputDialog.container.id = `igv-input-dialog-${guid$2()}`;
         this.dataRangeDialog = new DataRangeDialog($$1(this.root));
-        this.dataRangeDialog.$container.get(0).id = `igv-data-range-dialog-${guid$1()}`;
+        this.dataRangeDialog.$container.get(0).id = `igv-data-range-dialog-${guid$2()}`;
         this.genericColorPicker = new GenericColorPicker({parent: this.columnContainer, width: 432});
-        this.genericColorPicker.container.id = `igv-track-color-picker-${guid$1()}`;
+        this.genericColorPicker.container.id = `igv-track-color-picker-${guid$2()}`;
         return $navBar
@@ -49963,46 +50670,6 @@ class Browser {
     }
-    async selectMultiLocusPanel(referenceFrame) {
-        const referenceFrameIndex = this.referenceFrameList.indexOf(referenceFrame);
-        // Remove columns for unselected panels
-        this.columnContainer.querySelectorAll('.igv-column').forEach((column, c) => {
-            if (c === referenceFrameIndex) ; else {
-                column.remove();
-            }
-        });
-        // Remove all column shims
-        this.columnContainer.querySelectorAll('.igv-column-shim').forEach(shim => shim.remove());
-        // Discard viewports
-        for (let trackView of this.trackViews) {
-            const retain = trackView.viewports[referenceFrameIndex];
-            trackView.viewports.filter((viewport, i) => i !== referenceFrameIndex).forEach(viewport => viewport.dispose());
-            trackView.viewports = [retain];
-        }
-        const viewportWidth = this.calculateViewportWidth(1);
-        referenceFrame.bpPerPixel = (referenceFrame.end - referenceFrame.start) / viewportWidth;
-        this.referenceFrameList = [referenceFrame];
-        this.trackViews.forEach(({viewports}) => viewports.forEach(viewport => viewport.setWidth(viewportWidth)));
-        this.centerLineList = this.createCenterLineList(this.columnContainer);
-        this.updateUIWithReferenceFrameList();
-        await this.updateViews(true);
-    }
     async selectMultiLocusPanel(referenceFrame) {
         const referenceFrameIndex = this.referenceFrameList.indexOf(referenceFrame);
@@ -50226,6 +50893,7 @@ class Browser {
         // Build locus array (multi-locus view).  Use the first track to extract the loci, any track could be used.
         const locus = [];
         const gtexSelections = {};
+        let hasGtexSelections = false;
         let anyTrackView = this.trackViews[0];
         for (let {referenceFrame} of anyTrackView.viewports) {
             const locusString = referenceFrame.getLocusString();
@@ -50236,12 +50904,11 @@ class Browser {
                     snp: referenceFrame.selection.snp
                 };
                 gtexSelections[locusString] = selection;
+                hasGtexSelections = true;
             }
         }
         json["locus"] = locus.length === 1 ? locus[0] : locus;
-        const gtexKeys = Object.getOwnPropertyNames(gtexSelections);
-        if (gtexKeys.length > 0) {
+        if (hasGtexSelections) {
             json["gtexSelections"] = gtexSelections;
         }
@@ -50265,27 +50932,21 @@ class Browser {
                     trackJson.push(config);
                 }
             } catch (e) {
-                errors.push(e);
+                console.error(`Track: ${track.name}: ${e}`);
+                errors.push(`Track: ${track.name}: ${e}`);
             }
         }
         if (errors.length > 0) {
             let n = 1;
-            let message = 'Errors encountered saving session:';
+            let message = 'Errors encountered saving session: </br>';
             for (let e of errors) {
-                message += ` (${n++}) ${e.toString()}.`;
+                message += ` (${n++}) ${e.toString()} <br/>`;
             }
             throw Error(message)
         }
-        const locaTrackFiles = trackJson.filter((track) => {
-            track.url && isFile(track.url);
-        });
-        if (locaTrackFiles.length > 0) {
-            throw new Error(`Error. Sessions cannot include local file references.`)
-        }
         json["tracks"] = trackJson;
@@ -50673,7 +51334,7 @@ async function createBrowser(parentDiv, config) {
     setDefaults(config);
-    if (config.queryParametersSupported !== false) {
+    if (config.queryParametersSupported) {
         extractQuery(config);
     }
     if (config.apiKey) {
@@ -50737,10 +51398,6 @@ async function visibilityChange() {
 function setDefaults(config) {
-    if (undefined === config.promisified) {
-        config.promisified = false;
-    }
     if (undefined === config.minimumBases) {
         config.minimumBases = 40;
     }
@@ -50769,8 +51426,9 @@ function setDefaults(config) {
         config.showCursorTrackingGuideButton = true;
     }
-    if (undefined === config.showCursorTrackingGuide) {
-        config.showCursorTrackingGuide = false;
+    if (undefined === config.showCursorGuide) {
+        config.showCursorGuide = config.showCursorTrackingGuide || false;   // showCursorTrackingGuide is a synonym
     }
     if (undefined === config.showCenterGuideButton) {
@@ -50861,6 +51519,8 @@ function extractQuery(config) {
                     config[key] = value;
                 }
                 i = j + 1;
+            } else {
+                i++;
             }
         }
     }
@@ -50897,7 +51557,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  .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    .igv-navbar .igv-navbar-left-container .igv-logo {\n      width: 34px;\n      height: 32px;\n      margin-right: 8px; }\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    .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      .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        .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      .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        .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          .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          .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        .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  .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    .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      .igv-navbar .igv-navbar-right-container .igv-navbar-toggle-button-container div {\n        margin-left: 0;\n        margin-right: 4px; }\n      .igv-navbar .igv-navbar-right-container .igv-navbar-toggle-button-container div:last-child {\n        margin-left: 0;\n        margin-right: 0; }\n    .igv-navbar .igv-navbar-right-container .igv-navbar-toggle-button-container-750 {\n      display: none; }\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      .igv-navbar .igv-navbar-right-container .igv-zoom-widget div {\n        cursor: pointer;\n        margin-left: unset;\n        margin-right: unset; }\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      .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      .igv-navbar .igv-navbar-right-container .igv-zoom-widget div:nth-child(even) {\n        display: block;\n        height: fit-content; }\n      .igv-navbar .igv-navbar-right-container .igv-zoom-widget input {\n        display: block;\n        width: 125px; }\n      .igv-navbar .igv-navbar-right-container .igv-zoom-widget svg {\n        display: block; }\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      .igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 div {\n        cursor: pointer;\n        margin-left: unset;\n        margin-right: unset; }\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      .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      .igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 div:nth-child(even) {\n        width: 0;\n        height: 0;\n        display: none; }\n      .igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 input {\n        width: 0;\n        height: 0;\n        display: none; }\n      .igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 svg {\n        display: block; }\n    .igv-navbar .igv-navbar-right-container .igv-zoom-widget-hidden {\n      display: none; }\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.igv-navbar-button-clicked {\n  color: white;\n  background-color: #737373; }\n\n.igv-navbar-button:hover {\n  cursor: pointer; }\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  .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.igv-zoom-in-notice {\n  position: absolute;\n  top: 10px;\n  left: 50%; }\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.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.igv-multi-locus-close-button {\n  position: absolute;\n  top: 2px;\n  right: 0;\n  padding-left: 2px;\n  padding-right: 2px;\n  width: 14px;\n  height: 14px;\n  color: #666666;\n  background-color: white;\n  z-index: 1000; }\n  .igv-multi-locus-close-button > svg {\n    vertical-align: top; }\n\n.igv-multi-locus-close-button:hover {\n  cursor: pointer;\n  color: #434343; }\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  .igv-multi-locus-ruler-label div {\n    font-family: \"Open Sans\", sans-serif;\n    font-size: 14px;\n    font-weight: 400;\n    color: #101010;\n    background-color: white; }\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  .igv-multi-locus-ruler-label-square-dot > div:first-child {\n    width: 14px;\n    height: 14px; }\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: #101010; }\n\n.igv-multi-locus-ruler-label:hover {\n  cursor: pointer; }\n\n.igv-ruler-sweeper {\n  display: none;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 100%;\n  z-index: 99999;\n  background-color: rgba(68, 134, 247, 0.25); }\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  .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.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.igv-track-label:hover,\n.igv-track-label:focus,\n.igv-track-label:active {\n  background-color: #e8e8e8; }\n\n.igv-center-line {\n  display: none;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  bottom: 0;\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.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.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.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.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.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  .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    .igv-user-feedback div:first-child div {\n      position: absolute;\n      top: 2px;\n      width: 16px;\n      height: 16px;\n      background-color: transparent; }\n    .igv-user-feedback div:first-child div:first-child {\n      left: 8px; }\n    .igv-user-feedback div:first-child div:last-child {\n      cursor: pointer;\n      right: 8px; }\n  .igv-user-feedback div:last-child {\n    width: 100%;\n    height: calc(100% - 24px);\n    border-width: 0; }\n    .igv-user-feedback div:last-child div {\n      width: auto;\n      height: auto;\n      margin: 8px; }\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  .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    .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    .igv-generic-dialog-container .igv-generic-dialog-header div:hover {\n      cursor: pointer;\n      color: #444; }\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  .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    .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    .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    .igv-generic-dialog-container .igv-generic-dialog-label-input input {\n      width: 50%;\n      font-size: 16px; }\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    .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    .igv-generic-dialog-container .igv-generic-dialog-input input {\n      font-size: 16px; }\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    .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    .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    .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    .igv-generic-dialog-container .igv-generic-dialog-ok-cancel div:first-child:hover {\n      cursor: pointer;\n      background-color: #3b5c7f; }\n    .igv-generic-dialog-container .igv-generic-dialog-ok-cancel div:last-child:hover {\n      cursor: pointer;\n      background-color: #7f7f7f; }\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    .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    .igv-generic-dialog-container .igv-generic-dialog-ok div:hover {\n      cursor: pointer;\n      background-color: #25597f; }\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  .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    .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.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  .igv-menu-popup > div:not(:first-child) {\n    width: 100%; }\n    .igv-menu-popup > div:not(:first-child) > div {\n      background: white; }\n    .igv-menu-popup > div:not(:first-child) > div.context-menu {\n      padding-left: 4px;\n      padding-right: 4px; }\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    .igv-menu-popup > div:not(:first-child) > div:hover {\n      background: #efefef; }\n\n.igv-menu-popup-shim {\n  padding-left: 8px;\n  padding-right: 8px; }\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  .igv-menu-popup-header div {\n    margin-right: 4px;\n    height: 12px;\n    width: 12px;\n    color: #7F7F7F; }\n  .igv-menu-popup-header div:hover {\n    cursor: pointer;\n    color: #444; }\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  background-color: transparent; }\n  .igv-menu-popup-check-container div {\n    padding-top: 2px;\n    padding-left: 8px; }\n  .igv-menu-popup-check-container div:first-child {\n    position: relative;\n    width: 12px;\n    height: 12px; }\n    .igv-menu-popup-check-container div:first-child svg {\n      position: absolute;\n      width: 12px;\n      height: 12px; }\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  .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    .igv-user-feedback div:first-child div {\n      position: absolute;\n      top: 2px;\n      width: 16px;\n      height: 16px;\n      background-color: transparent; }\n    .igv-user-feedback div:first-child div:first-child {\n      left: 8px; }\n    .igv-user-feedback div:first-child div:last-child {\n      cursor: pointer;\n      right: 8px; }\n  .igv-user-feedback div:last-child {\n    width: 100%;\n    height: calc(100% - 24px);\n    border-width: 0; }\n    .igv-user-feedback div:last-child div {\n      width: auto;\n      height: auto;\n      margin: 8px; }\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  .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: white;\n    animation: spin 1s ease-in-out infinite;\n    -webkit-animation: spin 1s ease-in-out infinite; }\n\n@keyframes spin {\n  to {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg); } }\n@-webkit-keyframes spin {\n  to {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg); } }\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.igv-viewport {\n  position: relative;\n  margin-top: 5px;\n  overflow-x: hidden;\n  overflow-y: hidden; }\n\n.igv-viewport-content {\n  position: relative;\n  width: 100%; }\n  .igv-viewport-content > canvas {\n    position: relative;\n    display: block; }\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.igv-column-shim {\n  width: 1px;\n  margin-left: 2px;\n  margin-right: 2px;\n  background-color: #545453; }\n\n.igv-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.igv-axis-column {\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  .igv-axis-column > div {\n    margin-top: 5px;\n    width: 100%; }\n\n.igv-sample-name-column {\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.igv-scrollbar-column {\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  .igv-scrollbar-column > div {\n    position: relative;\n    margin-top: 5px;\n    width: 14px; }\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    .igv-scrollbar-column > div > div:hover {\n      background-color: #c4c4c4; }\n\n.igv-track-drag-column {\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  .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  .igv-track-drag-column .igv-track-drag-handle-hover {\n    background-color: #787878; }\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.igv-gear-menu-column {\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  .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    .igv-gear-menu-column > div > div {\n      position: relative;\n      margin-top: 4px;\n      width: 16px;\n      height: 16px;\n      color: #7F7F7F; }\n    .igv-gear-menu-column > div > div:hover {\n      cursor: pointer;\n      color: #444; }\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  .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    .igv-navbar .igv-navbar-left-container .igv-logo {\n      width: 34px;\n      height: 32px;\n      margin-right: 8px; }\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    .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      .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        .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      .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        .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          .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          .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        .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  .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    .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      .igv-navbar .igv-navbar-right-container .igv-navbar-toggle-button-container div {\n        margin-left: 0;\n        margin-right: 4px; }\n      .igv-navbar .igv-navbar-right-container .igv-navbar-toggle-button-container div:last-child {\n        margin-left: 0;\n        margin-right: 0; }\n    .igv-navbar .igv-navbar-right-container .igv-navbar-toggle-button-container-750 {\n      display: none; }\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      .igv-navbar .igv-navbar-right-container .igv-zoom-widget div {\n        cursor: pointer;\n        margin-left: unset;\n        margin-right: unset; }\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      .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      .igv-navbar .igv-navbar-right-container .igv-zoom-widget div:nth-child(even) {\n        display: block;\n        height: fit-content; }\n      .igv-navbar .igv-navbar-right-container .igv-zoom-widget input {\n        display: block;\n        width: 125px; }\n      .igv-navbar .igv-navbar-right-container .igv-zoom-widget svg {\n        display: block; }\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      .igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 div {\n        cursor: pointer;\n        margin-left: unset;\n        margin-right: unset; }\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      .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      .igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 div:nth-child(even) {\n        width: 0;\n        height: 0;\n        display: none; }\n      .igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 input {\n        width: 0;\n        height: 0;\n        display: none; }\n      .igv-navbar .igv-navbar-right-container .igv-zoom-widget-900 svg {\n        display: block; }\n    .igv-navbar .igv-navbar-right-container .igv-zoom-widget-hidden {\n      display: none; }\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.igv-navbar-button-clicked {\n  color: white;\n  background-color: #737373; }\n\n.igv-navbar-button:hover {\n  cursor: pointer; }\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  .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.igv-zoom-in-notice {\n  position: absolute;\n  top: 10px;\n  left: 50%; }\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.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.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  .igv-multi-locus-close-button > svg {\n    vertical-align: top; }\n\n.igv-multi-locus-close-button:hover {\n  cursor: pointer;\n  color: #434343; }\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  .igv-multi-locus-ruler-label div {\n    font-family: \"Open Sans\", sans-serif;\n    font-size: 14px;\n    font-weight: 400;\n    color: #101010;\n    background-color: white; }\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  .igv-multi-locus-ruler-label-square-dot > div:first-child {\n    width: 14px;\n    height: 14px; }\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: #101010; }\n\n.igv-multi-locus-ruler-label:hover {\n  cursor: pointer; }\n\n.igv-ruler-sweeper {\n  display: none;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 100%;\n  z-index: 99999;\n  background-color: rgba(68, 134, 247, 0.25); }\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  .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.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.igv-track-label:hover,\n.igv-track-label:focus,\n.igv-track-label:active {\n  background-color: #e8e8e8; }\n\n.igv-track-label-popup-shim {\n  padding-left: 8px;\n  padding-right: 8px;\n  padding-top: 4px; }\n\n.igv-center-line {\n  display: none;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  bottom: 0;\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.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.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.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.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.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  .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    .igv-user-feedback div:first-child div {\n      position: absolute;\n      top: 2px;\n      width: 16px;\n      height: 16px;\n      background-color: transparent; }\n    .igv-user-feedback div:first-child div:first-child {\n      left: 8px; }\n    .igv-user-feedback div:first-child div:last-child {\n      cursor: pointer;\n      right: 8px; }\n  .igv-user-feedback div:last-child {\n    width: 100%;\n    height: calc(100% - 24px);\n    border-width: 0; }\n    .igv-user-feedback div:last-child div {\n      width: auto;\n      height: auto;\n      margin: 8px; }\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  .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    .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    .igv-generic-dialog-container .igv-generic-dialog-header div:hover {\n      cursor: pointer;\n      color: #444; }\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  .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    .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    .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    .igv-generic-dialog-container .igv-generic-dialog-label-input input {\n      width: 50%;\n      font-size: 16px; }\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    .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    .igv-generic-dialog-container .igv-generic-dialog-input input {\n      font-size: 16px; }\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    .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    .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    .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    .igv-generic-dialog-container .igv-generic-dialog-ok-cancel div:first-child:hover {\n      cursor: pointer;\n      background-color: #3b5c7f; }\n    .igv-generic-dialog-container .igv-generic-dialog-ok-cancel div:last-child:hover {\n      cursor: pointer;\n      background-color: #7f7f7f; }\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    .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    .igv-generic-dialog-container .igv-generic-dialog-ok div:hover {\n      cursor: pointer;\n      background-color: #25597f; }\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  .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    .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.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  .igv-menu-popup > div:not(:first-child) {\n    width: 100%; }\n    .igv-menu-popup > div:not(:first-child) > div {\n      background: white; }\n    .igv-menu-popup > div:not(:first-child) > div.context-menu {\n      padding-left: 4px;\n      padding-right: 4px; }\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    .igv-menu-popup > div:not(:first-child) > div:hover {\n      background: #efefef; }\n\n.igv-menu-popup-shim {\n  padding-left: 8px;\n  padding-right: 8px;\n  padding-bottom: 1px;\n  padding-top: 1px; }\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  .igv-menu-popup-header div {\n    margin-right: 4px;\n    height: 12px;\n    width: 12px;\n    color: #7F7F7F; }\n  .igv-menu-popup-header div:hover {\n    cursor: pointer;\n    color: #444; }\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  .igv-menu-popup-check-container div {\n    padding-top: 2px;\n    padding-left: 8px; }\n  .igv-menu-popup-check-container div:first-child {\n    position: relative;\n    width: 12px;\n    height: 12px; }\n    .igv-menu-popup-check-container div:first-child svg {\n      position: absolute;\n      width: 12px;\n      height: 12px; }\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  .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    .igv-user-feedback div:first-child div {\n      position: absolute;\n      top: 2px;\n      width: 16px;\n      height: 16px;\n      background-color: transparent; }\n    .igv-user-feedback div:first-child div:first-child {\n      left: 8px; }\n    .igv-user-feedback div:first-child div:last-child {\n      cursor: pointer;\n      right: 8px; }\n  .igv-user-feedback div:last-child {\n    width: 100%;\n    height: calc(100% - 24px);\n    border-width: 0; }\n    .igv-user-feedback div:last-child div {\n      width: auto;\n      height: auto;\n      margin: 8px; }\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  .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: white;\n    animation: spin 1s ease-in-out infinite;\n    -webkit-animation: spin 1s ease-in-out infinite; }\n\n@keyframes spin {\n  to {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg); } }\n@-webkit-keyframes spin {\n  to {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg); } }\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.igv-viewport {\n  position: relative;\n  margin-top: 5px;\n  overflow-x: hidden;\n  overflow-y: hidden; }\n\n.igv-viewport-content {\n  position: relative;\n  width: 100%; }\n  .igv-viewport-content > canvas {\n    position: relative;\n    display: block; }\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.igv-column-shim {\n  width: 1px;\n  margin-left: 2px;\n  margin-right: 2px;\n  background-color: #545453; }\n\n.igv-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.igv-axis-column {\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  .igv-axis-column > div {\n    margin-top: 5px;\n    width: 100%; }\n\n.igv-sample-name-column {\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.igv-scrollbar-column {\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  .igv-scrollbar-column > div {\n    position: relative;\n    margin-top: 5px;\n    width: 14px; }\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    .igv-scrollbar-column > div > div:hover {\n      background-color: #c4c4c4; }\n\n.igv-track-drag-column {\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  .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  .igv-track-drag-column .igv-track-drag-handle-hover {\n    background-color: #787878; }\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.igv-gear-menu-column {\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  .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    .igv-gear-menu-column > div > div {\n      position: relative;\n      margin-top: 4px;\n      width: 16px;\n      height: 16px;\n      color: #7F7F7F; }\n    .igv-gear-menu-column > div > div:hover {\n      cursor: pointer;\n      color: #444; }\n\n/*# sourceMappingURL=dom.css.map */\n';
     var style = document.createElement('style');
     style.setAttribute('type', 'text/css');