igv 2.10.5 → 2.11.0

package/dist/igv.js

@@ -7205,7 +7205,7 @@
       }
     }
 
-    function guid$1() {
+    function guid$2() {
       return ("0000" + (Math.random() * Math.pow(36, 4) << 0).toString(36)).slice(-4);
     }
 
@@ -7840,7 +7840,7 @@
 
 
     function getFilename$1(urlOrFile) {
-      if (isFile(urlOrFile)) {
+      if (urlOrFile.name !== undefined) {
         return urlOrFile.name;
       } else if (isString$3(urlOrFile)) {
         let index = urlOrFile.lastIndexOf("/");
@@ -7858,15 +7858,18 @@
       }
     }
     /**
-     * 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
@@ -17441,8 +17444,6 @@
 
 
     async function fetchGoogleAccessToken(url) {
-      console.log("Fetch token for " + url);
-
       if (isInitialized()) {
         const scope = getScopeForURL(url);
         const googleToken = await getAccessToken(scope);
@@ -18859,12 +18860,12 @@
         this.errorHeadline.textContent = ''; // body container
 
         let bodyContainer = div({
-          id: 'igv-ui-alert-dialog-body'
+          class: 'igv-ui-alert-dialog-body'
         });
         this.container.appendChild(bodyContainer); // body copy
 
         this.body = div({
-          id: 'igv-ui-alert-dialog-body-copy'
+          class: 'igv-ui-alert-dialog-body-copy'
         });
         bodyContainer.appendChild(this.body); // ok container
 
@@ -19384,7 +19385,7 @@
     }
 
     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: 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      -webkit-user-select: all;\n      -moz-user-select: all;\n      -ms-user-select: all;\n      user-select: all;\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');
       style.innerHTML = css;
@@ -20082,6 +20083,209 @@
       }
     }
 
+    /*
+     * 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)
      *
@@ -20446,7 +20650,7 @@
 
     class Viewport {
       constructor(trackView, viewportColumn, referenceFrame, width) {
-        this.guid = guid$1();
+        this.guid = guid$2();
         this.trackView = trackView;
         this.referenceFrame = referenceFrame;
         this.browser = trackView.browser;
@@ -22357,12 +22561,13 @@
      * THE SOFTWARE.
      */
     const splitLines$3 = splitLines$5;
-    const reservedProperties = new Set(['fastaURL', 'indexURL', 'cytobandURL', 'indexed']);
+    const reservedProperties = new Set(['fastaURL', 'indexURL', 'compressedIndexURL', 'cytobandURL', 'indexed']);
 
     class FastaSequence {
       constructor(reference) {
         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 = {};
@@ -22443,15 +22648,233 @@
 
           return this.index;
         }
+      } //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) {
-        // let offset;
-        // let start;
-        // let end;
-        // let basesPerLine;
-        // let nEndBytes;
         await this.getIndex();
+        await this.getCompressedIndex(); //This will work even if no compressed index file is set
+
         const idxEntry = this.index[chr];
 
         if (!idxEntry) {
@@ -22459,60 +22882,77 @@
 
           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;
-          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 (!allBytes) {
-            return null;
-          } else {
-            let nBases,
-                seqBytes = "",
-                srcPos = 0,
-                allBytesLength = allBytes.length;
+        const start = Math.max(0, qstart); // qstart should never be < 0
 
-            if (offset > 0) {
-              nBases = Math.min(end - start, basesPerLine - offset);
-              seqBytes += allBytes.substr(srcPos, nBases);
-              srcPos += nBases + nEndBytes;
-            }
+        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
 
-            while (srcPos < allBytesLength) {
-              nBases = Math.min(basesPerLine, allBytesLength - srcPos);
-              seqBytes += allBytes.substr(srcPos, nBases);
-              srcPos += nBases + nEndBytes;
+        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;
+        } //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);
 
-            return seqBytes;
+          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;
+        }
+
+        let nBases,
+            seqBytes = "",
+            srcPos = 0,
+            allBytesLength = allBytes.length;
+
+        if (offset > 0) {
+          nBases = Math.min(end - start, basesPerLine - offset);
+          seqBytes += allBytes.substr(srcPos, nBases);
+          srcPos += nBases + nEndBytes;
+        }
+
+        while (srcPos < allBytesLength) {
+          nBases = Math.min(basesPerLine, allBytesLength - srcPos);
+          seqBytes += allBytes.substr(srcPos, nBases);
+          srcPos += nBases + nEndBytes;
+        }
+
+        return seqBytes;
       }
 
     }
@@ -22620,7 +23060,7 @@
       }
     };
 
-    const _version = "2.10.5";
+    const _version = "2.11.0";
 
     function version$1() {
       return _version;
@@ -23130,7 +23570,9 @@
       }
 
       stopSpinner() {
-        this.$spinner.hide();
+        if (this.$spinner) {
+          this.$spinner.hide();
+        }
       }
 
       checkZoomIn() {
@@ -23439,7 +23881,7 @@
         const context = new ctx(config);
         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);
         const svg = context.getSerializedSvg(true);
         const data = URL.createObjectURL(new Blob([svg], {
@@ -23463,7 +23905,7 @@
 
         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();
@@ -23487,7 +23929,7 @@
 
       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);
         context.fillStyle = "white";
         context.fillRect(0, 0, width, height);
@@ -23778,24 +24220,16 @@
             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 || 'unnamed');
-          this.popover.presentContentWithEvent(event, str);
+            this.popover = new Popover(this.browser.columnContainer, track.name || '');
+            this.popover.presentContentWithEvent(event, str);
+          }
         }
       }
 
@@ -24090,18 +24524,6 @@
       return this;
     }() || Function('return this')();
 
-    var FunctionPrototype$2 = Function.prototype;
-    var bind$2 = FunctionPrototype$2.bind;
-    var call$2 = FunctionPrototype$2.call;
-    var callBind = bind$2 && bind$2.bind(call$2);
-    var functionUncurryThis = bind$2 ? function (fn) {
-      return fn && callBind(call$2, fn);
-    } : function (fn) {
-      return fn && function () {
-        return call$2.apply(fn, arguments);
-      };
-    };
-
     var fails = function (exec) {
       try {
         return !!exec();
@@ -24110,69 +24532,114 @@
       }
     };
 
+    var functionBindNative = !fails(function () {
+      var test = function () {
+        /* empty */
+      }.bind(); // eslint-disable-next-line no-prototype-builtins -- safe
+
+
+      return typeof test != 'function' || test.hasOwnProperty('prototype');
+    });
+
+    var call$2 = Function.prototype.call;
+    var functionCall = functionBindNative ? call$2.bind(call$2) : function () {
+      return call$2.apply(call$2, arguments);
+    };
+
+    // eslint-disable-next-line es/no-typed-arrays -- safe
+    var arrayBufferNative = typeof ArrayBuffer != 'undefined' && typeof DataView != 'undefined';
+
+    var descriptors = !fails(function () {
+      // eslint-disable-next-line es/no-object-defineproperty -- required for testing
+      return Object.defineProperty({}, 1, {
+        get: function () {
+          return 7;
+        }
+      })[1] != 7;
+    });
+
     // `IsCallable` abstract operation
     // https://tc39.es/ecma262/#sec-iscallable
     var isCallable = function (argument) {
       return typeof argument == 'function';
     };
 
-    var String$4 = global$1.String;
+    var isObject = function (it) {
+      return typeof it == 'object' ? it !== null : isCallable(it);
+    };
 
-    var tryToString = function (argument) {
-      try {
-        return String$4(argument);
-      } catch (error) {
-        return 'Object';
-      }
+    var FunctionPrototype$2 = Function.prototype;
+    var bind$1 = FunctionPrototype$2.bind;
+    var call$1 = FunctionPrototype$2.call;
+    var uncurryThis = functionBindNative && bind$1.bind(call$1, call$1);
+    var functionUncurryThis = functionBindNative ? function (fn) {
+      return fn && uncurryThis(fn);
+    } : function (fn) {
+      return fn && function () {
+        return call$1.apply(fn, arguments);
+      };
     };
 
-    var TypeError$9 = global$1.TypeError; // `Assert: IsCallable(argument) is true`
+    var TypeError$a = global$1.TypeError; // `RequireObjectCoercible` abstract operation
+    // https://tc39.es/ecma262/#sec-requireobjectcoercible
 
-    var aCallable = function (argument) {
-      if (isCallable(argument)) return argument;
-      throw TypeError$9(tryToString(argument) + ' is not a function');
+    var requireObjectCoercible = function (it) {
+      if (it == undefined) throw TypeError$a("Can't call method on " + it);
+      return it;
     };
 
-    var ceil = Math.ceil;
-    var floor$1 = Math.floor; // `ToIntegerOrInfinity` abstract operation
-    // https://tc39.es/ecma262/#sec-tointegerorinfinity
-
-    var toIntegerOrInfinity = function (argument) {
-      var number = +argument; // eslint-disable-next-line no-self-compare -- safe
+    var Object$5 = global$1.Object; // `ToObject` abstract operation
+    // https://tc39.es/ecma262/#sec-toobject
 
-      return number !== number || number === 0 ? 0 : (number > 0 ? floor$1 : ceil)(number);
+    var toObject = function (argument) {
+      return Object$5(requireObjectCoercible(argument));
     };
 
-    var max$1 = Math.max;
-    var min$1 = Math.min; // Helper for a popular repeating case of the spec:
-    // Let integer be ? ToInteger(index).
-    // If integer < 0, let result be max((length + integer), 0); else let result be min(integer, length).
+    var hasOwnProperty = functionUncurryThis({}.hasOwnProperty); // `HasOwnProperty` abstract operation
+    // https://tc39.es/ecma262/#sec-hasownproperty
 
-    var toAbsoluteIndex = function (index, length) {
-      var integer = toIntegerOrInfinity(index);
-      return integer < 0 ? max$1(integer + length, 0) : min$1(integer, length);
+    var hasOwnProperty_1 = Object.hasOwn || function hasOwn(it, key) {
+      return hasOwnProperty(toObject(it), key);
     };
 
-    var min = Math.min; // `ToLength` abstract operation
-    // https://tc39.es/ecma262/#sec-tolength
+    var defineProperty$1 = Object.defineProperty;
 
-    var toLength = function (argument) {
-      return argument > 0 ? min(toIntegerOrInfinity(argument), 0x1FFFFFFFFFFFFF) : 0; // 2 ** 53 - 1 == 9007199254740991
+    var setGlobal = function (key, value) {
+      try {
+        defineProperty$1(global$1, key, {
+          value: value,
+          configurable: true,
+          writable: true
+        });
+      } catch (error) {
+        global$1[key] = value;
+      }
+
+      return value;
     };
 
-    // https://tc39.es/ecma262/#sec-lengthofarraylike
+    var SHARED = '__core-js_shared__';
+    var store$1 = global$1[SHARED] || setGlobal(SHARED, {});
+    var sharedStore = store$1;
 
-    var lengthOfArrayLike = function (obj) {
-      return toLength(obj.length);
-    };
+    var shared = createCommonjsModule(function (module) {
+      (module.exports = function (key, value) {
+        return sharedStore[key] || (sharedStore[key] = value !== undefined ? value : {});
+      })('versions', []).push({
+        version: '3.21.1',
+        mode: 'global',
+        copyright: '© 2014-2022 Denis Pushkarev (zloirock.ru)',
+        license: 'https://github.com/zloirock/core-js/blob/v3.21.1/LICENSE',
+        source: 'https://github.com/zloirock/core-js'
+      });
+    });
 
-    var call$1 = Function.prototype.call;
-    var functionCall = call$1.bind ? call$1.bind(call$1) : function () {
-      return call$1.apply(call$1, arguments);
-    };
+    var id = 0;
+    var postfix = Math.random();
+    var toString$1 = functionUncurryThis(1.0.toString);
 
-    var isObject = function (it) {
-      return typeof it == 'object' ? it !== null : isCallable(it);
+    var uid = function (key) {
+      return 'Symbol(' + (key === undefined ? '' : key) + ')_' + toString$1(++id + postfix, 36);
     };
 
     var aFunction = function (argument) {
@@ -24183,8 +24650,6 @@
       return arguments.length < 2 ? aFunction(global$1[namespace]) : global$1[namespace] && global$1[namespace][method];
     };
 
-    var objectIsPrototypeOf = functionUncurryThis({}.isPrototypeOf);
-
     var engineUserAgent = getBuiltIn('navigator', 'userAgent') || '';
 
     var process$2 = global$1.process;
@@ -24226,111 +24691,143 @@
     /* eslint-disable es/no-symbol -- required for testing */
     var useSymbolAsUid = nativeSymbol && !Symbol.sham && typeof Symbol.iterator == 'symbol';
 
-    var Object$5 = global$1.Object;
-    var isSymbol = useSymbolAsUid ? function (it) {
-      return typeof it == 'symbol';
-    } : function (it) {
-      var $Symbol = getBuiltIn('Symbol');
-      return isCallable($Symbol) && objectIsPrototypeOf($Symbol.prototype, Object$5(it));
-    };
+    var WellKnownSymbolsStore = shared('wks');
+    var Symbol$1 = global$1.Symbol;
+    var symbolFor = Symbol$1 && Symbol$1['for'];
+    var createWellKnownSymbol = useSymbolAsUid ? Symbol$1 : Symbol$1 && Symbol$1.withoutSetter || uid;
 
-    // https://tc39.es/ecma262/#sec-getmethod
+    var wellKnownSymbol = function (name) {
+      if (!hasOwnProperty_1(WellKnownSymbolsStore, name) || !(nativeSymbol || typeof WellKnownSymbolsStore[name] == 'string')) {
+        var description = 'Symbol.' + name;
 
-    var getMethod = function (V, P) {
-      var func = V[P];
-      return func == null ? undefined : aCallable(func);
+        if (nativeSymbol && hasOwnProperty_1(Symbol$1, name)) {
+          WellKnownSymbolsStore[name] = Symbol$1[name];
+        } else if (useSymbolAsUid && symbolFor) {
+          WellKnownSymbolsStore[name] = symbolFor(description);
+        } else {
+          WellKnownSymbolsStore[name] = createWellKnownSymbol(description);
+        }
+      }
+
+      return WellKnownSymbolsStore[name];
     };
 
-    var TypeError$8 = global$1.TypeError; // `OrdinaryToPrimitive` abstract operation
-    // https://tc39.es/ecma262/#sec-ordinarytoprimitive
+    var TO_STRING_TAG$2 = wellKnownSymbol('toStringTag');
+    var test = {};
+    test[TO_STRING_TAG$2] = 'z';
+    var toStringTagSupport = String(test) === '[object z]';
 
-    var ordinaryToPrimitive = function (input, pref) {
-      var fn, val;
-      if (pref === 'string' && isCallable(fn = input.toString) && !isObject(val = functionCall(fn, input))) return val;
-      if (isCallable(fn = input.valueOf) && !isObject(val = functionCall(fn, input))) return val;
-      if (pref !== 'string' && isCallable(fn = input.toString) && !isObject(val = functionCall(fn, input))) return val;
-      throw TypeError$8("Can't convert object to primitive value");
+    var toString = functionUncurryThis({}.toString);
+    var stringSlice = functionUncurryThis(''.slice);
+
+    var classofRaw = function (it) {
+      return stringSlice(toString(it), 8, -1);
     };
 
-    var defineProperty$1 = Object.defineProperty;
+    var TO_STRING_TAG$1 = wellKnownSymbol('toStringTag');
+    var Object$4 = global$1.Object; // ES3 wrong here
 
-    var setGlobal = function (key, value) {
+    var CORRECT_ARGUMENTS = classofRaw(function () {
+      return arguments;
+    }()) == 'Arguments'; // fallback for IE11 Script Access Denied error
+
+    var tryGet = function (it, key) {
       try {
-        defineProperty$1(global$1, key, {
-          value: value,
-          configurable: true,
-          writable: true
-        });
+        return it[key];
       } catch (error) {
-        global$1[key] = value;
+        /* empty */
       }
+    }; // getting tag from ES6+ `Object.prototype.toString`
 
-      return value;
+
+    var classof = toStringTagSupport ? classofRaw : function (it) {
+      var O, tag, result;
+      return it === undefined ? 'Undefined' : it === null ? 'Null' // @@toStringTag case
+      : typeof (tag = tryGet(O = Object$4(it), TO_STRING_TAG$1)) == 'string' ? tag // builtinTag case
+      : CORRECT_ARGUMENTS ? classofRaw(O) // ES3 arguments fallback
+      : (result = classofRaw(O)) == 'Object' && isCallable(O.callee) ? 'Arguments' : result;
     };
 
-    var SHARED = '__core-js_shared__';
-    var store$1 = global$1[SHARED] || setGlobal(SHARED, {});
-    var sharedStore = store$1;
+    var String$4 = global$1.String;
 
-    var shared = createCommonjsModule(function (module) {
-      (module.exports = function (key, value) {
-        return sharedStore[key] || (sharedStore[key] = value !== undefined ? value : {});
-      })('versions', []).push({
-        version: '3.19.3',
-        mode: 'global',
-        copyright: '© 2021 Denis Pushkarev (zloirock.ru)'
-      });
-    });
+    var tryToString = function (argument) {
+      try {
+        return String$4(argument);
+      } catch (error) {
+        return 'Object';
+      }
+    };
 
-    var TypeError$7 = global$1.TypeError; // `RequireObjectCoercible` abstract operation
-    // https://tc39.es/ecma262/#sec-requireobjectcoercible
+    var document$1 = global$1.document; // typeof document.createElement is 'object' in old IE
 
-    var requireObjectCoercible = function (it) {
-      if (it == undefined) throw TypeError$7("Can't call method on " + it);
-      return it;
+    var EXISTS$1 = isObject(document$1) && isObject(document$1.createElement);
+
+    var documentCreateElement = function (it) {
+      return EXISTS$1 ? document$1.createElement(it) : {};
     };
 
-    var Object$4 = global$1.Object; // `ToObject` abstract operation
-    // https://tc39.es/ecma262/#sec-toobject
+    var ie8DomDefine = !descriptors && !fails(function () {
+      // eslint-disable-next-line es/no-object-defineproperty -- required for testing
+      return Object.defineProperty(documentCreateElement('div'), 'a', {
+        get: function () {
+          return 7;
+        }
+      }).a != 7;
+    });
 
-    var toObject = function (argument) {
-      return Object$4(requireObjectCoercible(argument));
+    // https://bugs.chromium.org/p/v8/issues/detail?id=3334
+
+    var v8PrototypeDefineBug = descriptors && fails(function () {
+      // eslint-disable-next-line es/no-object-defineproperty -- required for testing
+      return Object.defineProperty(function () {
+        /* empty */
+      }, 'prototype', {
+        value: 42,
+        writable: false
+      }).prototype != 42;
+    });
+
+    var String$3 = global$1.String;
+    var TypeError$9 = global$1.TypeError; // `Assert: Type(argument) is Object`
+
+    var anObject = function (argument) {
+      if (isObject(argument)) return argument;
+      throw TypeError$9(String$3(argument) + ' is not an object');
     };
 
-    var hasOwnProperty = functionUncurryThis({}.hasOwnProperty); // `HasOwnProperty` abstract operation
-    // https://tc39.es/ecma262/#sec-hasownproperty
+    var objectIsPrototypeOf = functionUncurryThis({}.isPrototypeOf);
 
-    var hasOwnProperty_1 = Object.hasOwn || function hasOwn(it, key) {
-      return hasOwnProperty(toObject(it), key);
+    var Object$3 = global$1.Object;
+    var isSymbol = useSymbolAsUid ? function (it) {
+      return typeof it == 'symbol';
+    } : function (it) {
+      var $Symbol = getBuiltIn('Symbol');
+      return isCallable($Symbol) && objectIsPrototypeOf($Symbol.prototype, Object$3(it));
     };
 
-    var id = 0;
-    var postfix = Math.random();
-    var toString$1 = functionUncurryThis(1.0.toString);
+    var TypeError$8 = global$1.TypeError; // `Assert: IsCallable(argument) is true`
 
-    var uid = function (key) {
-      return 'Symbol(' + (key === undefined ? '' : key) + ')_' + toString$1(++id + postfix, 36);
+    var aCallable = function (argument) {
+      if (isCallable(argument)) return argument;
+      throw TypeError$8(tryToString(argument) + ' is not a function');
     };
 
-    var WellKnownSymbolsStore = shared('wks');
-    var Symbol$1 = global$1.Symbol;
-    var symbolFor = Symbol$1 && Symbol$1['for'];
-    var createWellKnownSymbol = useSymbolAsUid ? Symbol$1 : Symbol$1 && Symbol$1.withoutSetter || uid;
+    // https://tc39.es/ecma262/#sec-getmethod
 
-    var wellKnownSymbol = function (name) {
-      if (!hasOwnProperty_1(WellKnownSymbolsStore, name) || !(nativeSymbol || typeof WellKnownSymbolsStore[name] == 'string')) {
-        var description = 'Symbol.' + name;
+    var getMethod = function (V, P) {
+      var func = V[P];
+      return func == null ? undefined : aCallable(func);
+    };
 
-        if (nativeSymbol && hasOwnProperty_1(Symbol$1, name)) {
-          WellKnownSymbolsStore[name] = Symbol$1[name];
-        } else if (useSymbolAsUid && symbolFor) {
-          WellKnownSymbolsStore[name] = symbolFor(description);
-        } else {
-          WellKnownSymbolsStore[name] = createWellKnownSymbol(description);
-        }
-      }
+    var TypeError$7 = global$1.TypeError; // `OrdinaryToPrimitive` abstract operation
+    // https://tc39.es/ecma262/#sec-ordinarytoprimitive
 
-      return WellKnownSymbolsStore[name];
+    var ordinaryToPrimitive = function (input, pref) {
+      var fn, val;
+      if (pref === 'string' && isCallable(fn = input.toString) && !isObject(val = functionCall(fn, input))) return val;
+      if (isCallable(fn = input.valueOf) && !isObject(val = functionCall(fn, input))) return val;
+      if (pref !== 'string' && isCallable(fn = input.toString) && !isObject(val = functionCall(fn, input))) return val;
+      throw TypeError$7("Can't convert object to primitive value");
     };
 
     var TypeError$6 = global$1.TypeError;
@@ -24360,46 +24857,36 @@
       return isSymbol(key) ? key : key + '';
     };
 
-    var descriptors = !fails(function () {
-      // eslint-disable-next-line es/no-object-defineproperty -- required for testing
-      return Object.defineProperty({}, 1, {
-        get: function () {
-          return 7;
-        }
-      })[1] != 7;
-    });
+    var TypeError$5 = global$1.TypeError; // eslint-disable-next-line es/no-object-defineproperty -- safe
 
-    var document$1 = global$1.document; // typeof document.createElement is 'object' in old IE
+    var $defineProperty = Object.defineProperty; // eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe
 
-    var EXISTS$1 = isObject(document$1) && isObject(document$1.createElement);
-
-    var documentCreateElement = function (it) {
-      return EXISTS$1 ? document$1.createElement(it) : {};
-    };
-
-    var ie8DomDefine = !descriptors && !fails(function () {
-      // eslint-disable-next-line es/no-object-defineproperty -- requied for testing
-      return Object.defineProperty(documentCreateElement('div'), 'a', {
-        get: function () {
-          return 7;
-        }
-      }).a != 7;
-    });
-
-    var String$3 = global$1.String;
-    var TypeError$5 = global$1.TypeError; // `Assert: Type(argument) is Object`
+    var $getOwnPropertyDescriptor$1 = Object.getOwnPropertyDescriptor;
+    var ENUMERABLE = 'enumerable';
+    var CONFIGURABLE$1 = 'configurable';
+    var WRITABLE = 'writable'; // `Object.defineProperty` method
+    // https://tc39.es/ecma262/#sec-object.defineproperty
 
-    var anObject = function (argument) {
-      if (isObject(argument)) return argument;
-      throw TypeError$5(String$3(argument) + ' is not an object');
-    };
+    var f$4 = descriptors ? v8PrototypeDefineBug ? function defineProperty(O, P, Attributes) {
+      anObject(O);
+      P = toPropertyKey(P);
+      anObject(Attributes);
 
-    var TypeError$4 = global$1.TypeError; // eslint-disable-next-line es/no-object-defineproperty -- safe
+      if (typeof O === 'function' && P === 'prototype' && 'value' in Attributes && WRITABLE in Attributes && !Attributes[WRITABLE]) {
+        var current = $getOwnPropertyDescriptor$1(O, P);
 
-    var $defineProperty = Object.defineProperty; // `Object.defineProperty` method
-    // https://tc39.es/ecma262/#sec-object.defineproperty
+        if (current && current[WRITABLE]) {
+          O[P] = Attributes.value;
+          Attributes = {
+            configurable: CONFIGURABLE$1 in Attributes ? Attributes[CONFIGURABLE$1] : current[CONFIGURABLE$1],
+            enumerable: ENUMERABLE in Attributes ? Attributes[ENUMERABLE] : current[ENUMERABLE],
+            writable: false
+          };
+        }
+      }
 
-    var f$4 = descriptors ? $defineProperty : function defineProperty(O, P, Attributes) {
+      return $defineProperty(O, P, Attributes);
+    } : $defineProperty : function defineProperty(O, P, Attributes) {
       anObject(O);
       P = toPropertyKey(P);
       anObject(Attributes);
@@ -24408,7 +24895,7 @@
       } catch (error) {
         /* empty */
       }
-      if ('get' in Attributes || 'set' in Attributes) throw TypeError$4('Accessors not supported');
+      if ('get' in Attributes || 'set' in Attributes) throw TypeError$5('Accessors not supported');
       if ('value' in Attributes) O[P] = Attributes.value;
       return O;
     };
@@ -24425,107 +24912,6 @@
       };
     };
 
-    var createProperty = function (object, key, value) {
-      var propertyKey = toPropertyKey(key);
-      if (propertyKey in object) objectDefineProperty.f(object, propertyKey, createPropertyDescriptor(0, value));else object[propertyKey] = value;
-    };
-
-    var Array$2 = global$1.Array;
-    var max = Math.max;
-
-    var arraySliceSimple = function (O, start, end) {
-      var length = lengthOfArrayLike(O);
-      var k = toAbsoluteIndex(start, length);
-      var fin = toAbsoluteIndex(end === undefined ? length : end, length);
-      var result = Array$2(max(fin - k, 0));
-
-      for (var n = 0; k < fin; k++, n++) createProperty(result, n, O[k]);
-
-      result.length = n;
-      return result;
-    };
-
-    var floor = Math.floor;
-
-    var mergeSort = function (array, comparefn) {
-      var length = array.length;
-      var middle = floor(length / 2);
-      return length < 8 ? insertionSort(array, comparefn) : merge(array, mergeSort(arraySliceSimple(array, 0, middle), comparefn), mergeSort(arraySliceSimple(array, middle), comparefn), comparefn);
-    };
-
-    var insertionSort = function (array, comparefn) {
-      var length = array.length;
-      var i = 1;
-      var element, j;
-
-      while (i < length) {
-        j = i;
-        element = array[i];
-
-        while (j && comparefn(array[j - 1], element) > 0) {
-          array[j] = array[--j];
-        }
-
-        if (j !== i++) array[j] = element;
-      }
-
-      return array;
-    };
-
-    var merge = function (array, left, right, comparefn) {
-      var llength = left.length;
-      var rlength = right.length;
-      var lindex = 0;
-      var rindex = 0;
-
-      while (lindex < llength || rindex < rlength) {
-        array[lindex + rindex] = lindex < llength && rindex < rlength ? comparefn(left[lindex], right[rindex]) <= 0 ? left[lindex++] : right[rindex++] : lindex < llength ? left[lindex++] : right[rindex++];
-      }
-
-      return array;
-    };
-
-    var arraySort = mergeSort;
-
-    // eslint-disable-next-line es/no-typed-arrays -- safe
-    var arrayBufferNative = typeof ArrayBuffer != 'undefined' && typeof DataView != 'undefined';
-
-    var TO_STRING_TAG$2 = wellKnownSymbol('toStringTag');
-    var test = {};
-    test[TO_STRING_TAG$2] = 'z';
-    var toStringTagSupport = String(test) === '[object z]';
-
-    var toString = functionUncurryThis({}.toString);
-    var stringSlice = functionUncurryThis(''.slice);
-
-    var classofRaw = function (it) {
-      return stringSlice(toString(it), 8, -1);
-    };
-
-    var TO_STRING_TAG$1 = wellKnownSymbol('toStringTag');
-    var Object$3 = global$1.Object; // ES3 wrong here
-
-    var CORRECT_ARGUMENTS = classofRaw(function () {
-      return arguments;
-    }()) == 'Arguments'; // fallback for IE11 Script Access Denied error
-
-    var tryGet = function (it, key) {
-      try {
-        return it[key];
-      } catch (error) {
-        /* empty */
-      }
-    }; // getting tag from ES6+ `Object.prototype.toString`
-
-
-    var classof = toStringTagSupport ? classofRaw : function (it) {
-      var O, tag, result;
-      return it === undefined ? 'Undefined' : it === null ? 'Null' // @@toStringTag case
-      : typeof (tag = tryGet(O = Object$3(it), TO_STRING_TAG$1)) == 'string' ? tag // builtinTag case
-      : CORRECT_ARGUMENTS ? classofRaw(O) // ES3 arguments fallback
-      : (result = classofRaw(O)) == 'Object' && isCallable(O.callee) ? 'Arguments' : result;
-    };
-
     var createNonEnumerableProperty = descriptors ? function (object, key, value) {
       return objectDefineProperty.f(object, key, createPropertyDescriptor(1, value));
     } : function (object, key, value) {
@@ -24555,7 +24941,7 @@
     var hiddenKeys$1 = {};
 
     var OBJECT_ALREADY_INITIALIZED = 'Object already initialized';
-    var TypeError$3 = global$1.TypeError;
+    var TypeError$4 = global$1.TypeError;
     var WeakMap = global$1.WeakMap;
     var set$1, get, has;
 
@@ -24568,7 +24954,7 @@
         var state;
 
         if (!isObject(it) || (state = get(it)).type !== TYPE) {
-          throw TypeError$3('Incompatible receiver, ' + TYPE + ' required');
+          throw TypeError$4('Incompatible receiver, ' + TYPE + ' required');
         }
 
         return state;
@@ -24582,7 +24968,7 @@
       var wmset = functionUncurryThis(store.set);
 
       set$1 = function (it, metadata) {
-        if (wmhas(store, it)) throw new TypeError$3(OBJECT_ALREADY_INITIALIZED);
+        if (wmhas(store, it)) throw new TypeError$4(OBJECT_ALREADY_INITIALIZED);
         metadata.facade = it;
         wmset(store, it, metadata);
         return metadata;
@@ -24600,7 +24986,7 @@
       hiddenKeys$1[STATE] = true;
 
       set$1 = function (it, metadata) {
-        if (hasOwnProperty_1(it, STATE)) throw new TypeError$3(OBJECT_ALREADY_INITIALIZED);
+        if (hasOwnProperty_1(it, STATE)) throw new TypeError$4(OBJECT_ALREADY_INITIALIZED);
         metadata.facade = it;
         createNonEnumerableProperty(it, STATE, metadata);
         return metadata;
@@ -24710,11 +25096,11 @@
     };
 
     var String$2 = global$1.String;
-    var TypeError$2 = global$1.TypeError;
+    var TypeError$3 = global$1.TypeError;
 
     var aPossiblePrototype = function (argument) {
       if (typeof argument == 'object' || isCallable(argument)) return argument;
-      throw TypeError$2("Can't set " + String$2(argument) + ' as a prototype');
+      throw TypeError$3("Can't set " + String$2(argument) + ' as a prototype');
     };
 
     /* eslint-disable no-proto -- safe */
@@ -24745,20 +25131,20 @@
     }() : undefined);
 
     var defineProperty = objectDefineProperty.f;
-    var Int8Array = global$1.Int8Array;
-    var Int8ArrayPrototype = Int8Array && Int8Array.prototype;
-    var Uint8ClampedArray = global$1.Uint8ClampedArray;
-    var Uint8ClampedArrayPrototype = Uint8ClampedArray && Uint8ClampedArray.prototype;
-    var TypedArray = Int8Array && objectGetPrototypeOf(Int8Array);
-    var TypedArrayPrototype = Int8ArrayPrototype && objectGetPrototypeOf(Int8ArrayPrototype);
+    var Int8Array$1 = global$1.Int8Array;
+    var Int8ArrayPrototype$1 = Int8Array$1 && Int8Array$1.prototype;
+    var Uint8ClampedArray$1 = global$1.Uint8ClampedArray;
+    var Uint8ClampedArrayPrototype = Uint8ClampedArray$1 && Uint8ClampedArray$1.prototype;
+    var TypedArray = Int8Array$1 && objectGetPrototypeOf(Int8Array$1);
+    var TypedArrayPrototype = Int8ArrayPrototype$1 && objectGetPrototypeOf(Int8ArrayPrototype$1);
     var ObjectPrototype = Object.prototype;
-    var TypeError$1 = global$1.TypeError;
+    var TypeError$2 = global$1.TypeError;
     var TO_STRING_TAG = wellKnownSymbol('toStringTag');
     var TYPED_ARRAY_TAG = uid('TYPED_ARRAY_TAG');
     var TYPED_ARRAY_CONSTRUCTOR = uid('TYPED_ARRAY_CONSTRUCTOR'); // Fixing native typed arrays in Opera Presto crashes the browser, see #595
 
     var NATIVE_ARRAY_BUFFER_VIEWS = arrayBufferNative && !!objectSetPrototypeOf && classof(global$1.opera) !== 'Opera';
-    var TYPED_ARRAY_TAG_REQIRED = false;
+    var TYPED_ARRAY_TAG_REQUIRED = false;
     var NAME, Constructor, Prototype;
     var TypedArrayConstructorsList = {
       Int8Array: 1,
@@ -24790,27 +25176,32 @@
 
     var aTypedArray$1 = function (it) {
       if (isTypedArray(it)) return it;
-      throw TypeError$1('Target is not a typed array');
+      throw TypeError$2('Target is not a typed array');
     };
 
     var aTypedArrayConstructor = function (C) {
       if (isCallable(C) && (!objectSetPrototypeOf || objectIsPrototypeOf(TypedArray, C))) return C;
-      throw TypeError$1(tryToString(C) + ' is not a typed array constructor');
+      throw TypeError$2(tryToString(C) + ' is not a typed array constructor');
     };
 
-    var exportTypedArrayMethod$1 = function (KEY, property, forced) {
+    var exportTypedArrayMethod$1 = function (KEY, property, forced, options) {
       if (!descriptors) return;
       if (forced) for (var ARRAY in TypedArrayConstructorsList) {
         var TypedArrayConstructor = global$1[ARRAY];
         if (TypedArrayConstructor && hasOwnProperty_1(TypedArrayConstructor.prototype, KEY)) try {
           delete TypedArrayConstructor.prototype[KEY];
         } catch (error) {
-          /* empty */
+          // old WebKit bug - some methods are non-configurable
+          try {
+            TypedArrayConstructor.prototype[KEY] = property;
+          } catch (error2) {
+            /* empty */
+          }
         }
       }
 
       if (!TypedArrayPrototype[KEY] || forced) {
-        redefine(TypedArrayPrototype, KEY, forced ? property : NATIVE_ARRAY_BUFFER_VIEWS && Int8ArrayPrototype[KEY] || property);
+        redefine(TypedArrayPrototype, KEY, forced ? property : NATIVE_ARRAY_BUFFER_VIEWS && Int8ArrayPrototype$1[KEY] || property, options);
       }
     };
 
@@ -24863,7 +25254,7 @@
     if (!NATIVE_ARRAY_BUFFER_VIEWS || !isCallable(TypedArray) || TypedArray === Function.prototype) {
       // eslint-disable-next-line no-shadow -- safe
       TypedArray = function TypedArray() {
-        throw TypeError$1('Incorrect invocation');
+        throw TypeError$2('Incorrect invocation');
       };
 
       if (NATIVE_ARRAY_BUFFER_VIEWS) for (NAME in TypedArrayConstructorsList) {
@@ -24884,7 +25275,7 @@
     }
 
     if (descriptors && !hasOwnProperty_1(TypedArrayPrototype, TO_STRING_TAG)) {
-      TYPED_ARRAY_TAG_REQIRED = true;
+      TYPED_ARRAY_TAG_REQUIRED = true;
       defineProperty(TypedArrayPrototype, TO_STRING_TAG, {
         get: function () {
           return isObject(this) ? this[TYPED_ARRAY_TAG] : undefined;
@@ -24899,7 +25290,7 @@
     var arrayBufferViewCore = {
       NATIVE_ARRAY_BUFFER_VIEWS: NATIVE_ARRAY_BUFFER_VIEWS,
       TYPED_ARRAY_CONSTRUCTOR: TYPED_ARRAY_CONSTRUCTOR,
-      TYPED_ARRAY_TAG: TYPED_ARRAY_TAG_REQIRED && TYPED_ARRAY_TAG,
+      TYPED_ARRAY_TAG: TYPED_ARRAY_TAG_REQUIRED && TYPED_ARRAY_TAG,
       aTypedArray: aTypedArray$1,
       aTypedArrayConstructor: aTypedArrayConstructor,
       exportTypedArrayMethod: exportTypedArrayMethod$1,
@@ -24910,69 +25301,83 @@
       TypedArrayPrototype: TypedArrayPrototype
     };
 
-    var firefox = engineUserAgent.match(/firefox\/(\d+)/i);
-    var engineFfVersion = !!firefox && +firefox[1];
+    var ceil = Math.ceil;
+    var floor = Math.floor; // `ToIntegerOrInfinity` abstract operation
+    // https://tc39.es/ecma262/#sec-tointegerorinfinity
 
-    var engineIsIeOrEdge = /MSIE|Trident/.test(engineUserAgent);
+    var toIntegerOrInfinity = function (argument) {
+      var number = +argument; // eslint-disable-next-line no-self-compare -- safe
 
-    var webkit = engineUserAgent.match(/AppleWebKit\/(\d+)\./);
-    var engineWebkitVersion = !!webkit && +webkit[1];
+      return number !== number || number === 0 ? 0 : (number > 0 ? floor : ceil)(number);
+    };
 
-    var Array$1 = global$1.Array;
-    var aTypedArray = arrayBufferViewCore.aTypedArray;
-    var exportTypedArrayMethod = arrayBufferViewCore.exportTypedArrayMethod;
-    var Uint16Array$1 = global$1.Uint16Array;
-    var un$Sort = Uint16Array$1 && functionUncurryThis(Uint16Array$1.prototype.sort); // WebKit
-
-    var ACCEPT_INCORRECT_ARGUMENTS = !!un$Sort && !(fails(function () {
-      un$Sort(new Uint16Array$1(2), null);
-    }) && fails(function () {
-      un$Sort(new Uint16Array$1(2), {});
-    }));
-    var STABLE_SORT = !!un$Sort && !fails(function () {
-      // feature detection can be too slow, so check engines versions
-      if (engineV8Version) return engineV8Version < 74;
-      if (engineFfVersion) return engineFfVersion < 67;
-      if (engineIsIeOrEdge) return true;
-      if (engineWebkitVersion) return engineWebkitVersion < 602;
-      var array = new Uint16Array$1(516);
-      var expected = Array$1(516);
-      var index, mod;
-
-      for (index = 0; index < 516; index++) {
-        mod = index % 4;
-        array[index] = 515 - index;
-        expected[index] = index - 2 * mod + 3;
-      }
-
-      un$Sort(array, function (a, b) {
-        return (a / 4 | 0) - (b / 4 | 0);
-      });
+    var min$1 = Math.min; // `ToLength` abstract operation
+    // https://tc39.es/ecma262/#sec-tolength
 
-      for (index = 0; index < 516; index++) {
-        if (array[index] !== expected[index]) return true;
-      }
-    });
+    var toLength = function (argument) {
+      return argument > 0 ? min$1(toIntegerOrInfinity(argument), 0x1FFFFFFFFFFFFF) : 0; // 2 ** 53 - 1 == 9007199254740991
+    };
+
+    // https://tc39.es/ecma262/#sec-lengthofarraylike
 
-    var getSortCompare = function (comparefn) {
-      return function (x, y) {
-        if (comparefn !== undefined) return +comparefn(x, y) || 0; // eslint-disable-next-line no-self-compare -- NaN check
+    var lengthOfArrayLike = function (obj) {
+      return toLength(obj.length);
+    };
 
-        if (y !== y) return -1; // eslint-disable-next-line no-self-compare -- NaN check
+    var RangeError$3 = global$1.RangeError;
 
-        if (x !== x) return 1;
-        if (x === 0 && y === 0) return 1 / x > 0 && 1 / y < 0 ? 1 : -1;
-        return x > y;
-      };
-    }; // `%TypedArray%.prototype.sort` method
-    // https://tc39.es/ecma262/#sec-%typedarray%.prototype.sort
+    var toPositiveInteger = function (it) {
+      var result = toIntegerOrInfinity(it);
+      if (result < 0) throw RangeError$3("The argument can't be less than 0");
+      return result;
+    };
 
+    var RangeError$2 = global$1.RangeError;
 
-    exportTypedArrayMethod('sort', function sort(comparefn) {
-      if (comparefn !== undefined) aCallable(comparefn);
-      if (STABLE_SORT) return un$Sort(this, comparefn);
-      return arraySort(aTypedArray(this), getSortCompare(comparefn));
-    }, !STABLE_SORT || ACCEPT_INCORRECT_ARGUMENTS);
+    var toOffset = function (it, BYTES) {
+      var offset = toPositiveInteger(it);
+      if (offset % BYTES) throw RangeError$2('Wrong offset');
+      return offset;
+    };
+
+    var RangeError$1 = global$1.RangeError;
+    var Int8Array = global$1.Int8Array;
+    var Int8ArrayPrototype = Int8Array && Int8Array.prototype;
+    var $set = Int8ArrayPrototype && Int8ArrayPrototype.set;
+    var aTypedArray = arrayBufferViewCore.aTypedArray;
+    var exportTypedArrayMethod = arrayBufferViewCore.exportTypedArrayMethod;
+    var WORKS_WITH_OBJECTS_AND_GEERIC_ON_TYPED_ARRAYS = !fails(function () {
+      // eslint-disable-next-line es/no-typed-arrays -- required for testing
+      var array = new Uint8ClampedArray(2);
+      functionCall($set, array, {
+        length: 1,
+        0: 3
+      }, 1);
+      return array[1] !== 3;
+    }); // https://bugs.chromium.org/p/v8/issues/detail?id=11294 and other
+
+    var TO_OBJECT_BUG = WORKS_WITH_OBJECTS_AND_GEERIC_ON_TYPED_ARRAYS && arrayBufferViewCore.NATIVE_ARRAY_BUFFER_VIEWS && fails(function () {
+      var array = new Int8Array(2);
+      array.set(1);
+      array.set('2', 1);
+      return array[0] !== 0 || array[1] !== 2;
+    }); // `%TypedArray%.prototype.set` method
+    // https://tc39.es/ecma262/#sec-%typedarray%.prototype.set
+
+    exportTypedArrayMethod('set', function set(arrayLike
+    /* , offset */
+    ) {
+      aTypedArray(this);
+      var offset = toOffset(arguments.length > 1 ? arguments[1] : undefined, 1);
+      var src = toObject(arrayLike);
+      if (WORKS_WITH_OBJECTS_AND_GEERIC_ON_TYPED_ARRAYS) return functionCall($set, this, src, offset);
+      var length = this.length;
+      var len = lengthOfArrayLike(src);
+      var index = 0;
+      if (len + offset > length) throw RangeError$1('Wrong length');
+
+      while (index < len) this[offset + index] = src[index++];
+    }, !WORKS_WITH_OBJECTS_AND_GEERIC_ON_TYPED_ARRAYS || TO_OBJECT_BUG);
 
     /*
      * The MIT License (MIT)
@@ -28578,6 +28983,16 @@
       f: f$2
     };
 
+    var max = Math.max;
+    var min = Math.min; // Helper for a popular repeating case of the spec:
+    // Let integer be ? ToInteger(index).
+    // If integer < 0, let result be max((length + integer), 0); else let result be min(integer, length).
+
+    var toAbsoluteIndex = function (index, length) {
+      var integer = toIntegerOrInfinity(index);
+      return integer < 0 ? max(integer + length, 0) : min(integer, length);
+    };
+
     var createMethod = function (IS_INCLUDES) {
       return function ($this, el, fromIndex) {
         var O = toIndexedObject($this);
@@ -28654,14 +29069,17 @@
       return getOwnPropertySymbols ? concat(keys, getOwnPropertySymbols(it)) : keys;
     };
 
-    var copyConstructorProperties = function (target, source) {
+    var copyConstructorProperties = function (target, source, exceptions) {
       var keys = ownKeys(source);
       var defineProperty = objectDefineProperty.f;
       var getOwnPropertyDescriptor = objectGetOwnPropertyDescriptor.f;
 
       for (var i = 0; i < keys.length; i++) {
         var key = keys[i];
-        if (!hasOwnProperty_1(target, key)) defineProperty(target, key, getOwnPropertyDescriptor(source, key));
+
+        if (!hasOwnProperty_1(target, key) && !(exceptions && hasOwnProperty_1(exceptions, key))) {
+          defineProperty(target, key, getOwnPropertyDescriptor(source, key));
+        }
       }
     };
 
@@ -28739,10 +29157,9 @@
 
     var FunctionPrototype = Function.prototype;
     var apply = FunctionPrototype.apply;
-    var bind$1 = FunctionPrototype.bind;
     var call = FunctionPrototype.call; // eslint-disable-next-line es/no-reflect -- safe
 
-    var functionApply = typeof Reflect == 'object' && Reflect.apply || (bind$1 ? call.bind(apply) : function () {
+    var functionApply = typeof Reflect == 'object' && Reflect.apply || (functionBindNative ? call.bind(apply) : function () {
       return call.apply(apply, arguments);
     });
 
@@ -28750,7 +29167,7 @@
 
     var functionBindContext = function (fn, that) {
       aCallable(fn);
-      return that === undefined ? fn : bind ? bind(fn, that) : function
+      return that === undefined ? fn : functionBindNative ? bind(fn, that) : function
         /* ...args */
       () {
         return fn.apply(that, arguments);
@@ -28761,6 +29178,13 @@
 
     var arraySlice = functionUncurryThis([].slice);
 
+    var TypeError$1 = global$1.TypeError;
+
+    var validateArgumentsLength = function (passed, required) {
+      if (passed < required) throw TypeError$1('Not enough arguments');
+      return passed;
+    };
+
     var engineIsIos = /(?:ipad|iphone|ipod).*applewebkit/i.test(engineUserAgent);
 
     var engineIsNode = classofRaw(global$1.process) == 'process';
@@ -28809,11 +29233,13 @@
 
 
     if (!set || !clear) {
-      set = function setImmediate(fn) {
+      set = function setImmediate(handler) {
+        validateArgumentsLength(arguments.length, 1);
+        var fn = isCallable(handler) ? handler : Function$1(handler);
         var args = arraySlice(arguments, 1);
 
         queue[++counter] = function () {
-          functionApply(isCallable(fn) ? fn : Function$1(fn), undefined, args);
+          functionApply(fn, undefined, args);
         };
 
         defer(counter);
@@ -45114,7 +45540,6 @@
         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) {
@@ -45150,6 +45575,15 @@
           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() {
@@ -45197,7 +45631,7 @@
 
           const value = this[key];
 
-          if (value && (isSimpleType(value) || typeof value === "boolean")) {
+          if (value && (isSimpleType(value) || typeof value === "boolean" || key === "metadata")) {
             state[key] = value;
           }
         }
@@ -45212,16 +45646,19 @@
 
 
         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.`);
           }
         }
@@ -45502,6 +45939,54 @@
         });
         return data;
       }
+      /**
+       * 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) {
@@ -45540,6 +46025,7 @@
         return;
       }
 
+      let flipAxis = undefined === this.flipAxis ? false : this.flipAxis;
       IGVGraphics.fillRect(ctx, 0, 0, pixelWidth, pixelHeight, {
         'fillStyle': "rgb(255, 255, 255)"
       });
@@ -45555,7 +46041,7 @@
       }; // tick
 
       IGVGraphics.strokeLine(ctx, x1, y1, x2, y2, font);
-      IGVGraphics.fillText(ctx, prettyPrint(this.dataRange.max), x1 + 4, y1 + 12, font); //shim = 0.25 * 0.125;
+      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;
       b = {
@@ -45564,7 +46050,7 @@
       }; // 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);
 
       function prettyPrint(number) {
@@ -47239,6 +47725,77 @@
       "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() {
         return window["JBrowseReactCircularGenomeView"] !== undefined && window["React"] !== undefined && window["ReactDOM"] !== undefined;
@@ -47260,13 +47817,16 @@
         this.config = config;
 
         if (CircularView.isInstalled()) {
-          this.parent = parent; // wrapper for toolbar and circular-view container
+          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');
           wrapper.className = 'igv-circview-container';
           parent.appendChild(wrapper); // toolbar
 
-          this.createToolbarAndTrackPanel(wrapper); // circular view container
+          this.createControls(wrapper);
+          this.resetControlPanel(); // circular view container
 
           const element = document.createElement('div');
           element.className = 'igv-circview-circular-genome-view';
@@ -47277,7 +47837,6 @@
             this.setAssembly(config.assembly);
           }
 
-          this.tracks = config.tracks || [];
           this.width = config.width || 500;
           this.height = config.height || 500;
           this.setSize(this.width, this.height);
@@ -47286,41 +47845,40 @@
         }
       }
 
-      createToolbarAndTrackPanel(parent) {
-        let element; // toolbar
-
-        element = document.createElement('div');
-        element.className = 'igv-circview-toolbar';
-        parent.appendChild(element);
-        this.toolbar = element; // track panel
+      createControls(parent) {
+        // toolbar
+        const toolbarDiv = document.createElement('div');
+        toolbarDiv.className = 'igv-circview-toolbar';
+        parent.appendChild(toolbarDiv);
+        this.toolbar = toolbarDiv; // control panel
 
-        element = document.createElement('div');
-        element.className = 'igv-circview-track-panel';
-        parent.appendChild(element);
-        this.trackPanel = element;
-        this.trackPanel.style.display = 'none'; // toolbar button container - Track Options - Clear All
+        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.toolbar.appendChild(buttonContainer); // Show Controls
 
-        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');
+        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';
@@ -47328,11 +47886,7 @@
         button.innerText = 'Clear All';
         button.addEventListener('click', () => {
           this.clearChords();
-        }); // toolbar button container - Close Window
-
-        buttonContainer = document.createElement('div');
-        buttonContainer.className = 'igv-circview-toolbar-button-container';
-        this.toolbar.appendChild(buttonContainer); // Close Window
+        }); // Close
 
         if (false !== this.config.showCloseButton) {
           button = document.createElement('div');
@@ -47345,51 +47899,114 @@
         }
       }
 
-      addToTrackPanel(track) {
-        // single track row - container for hide-button | color-picker-swatch | track-name
+      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);
+        }
+      }
+
+      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;
+
+        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);
-        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);
+        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); // track hide|show
+
+        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
+        }); // The alpha range slider.  Create this here so we can reference it from the color picker
+
+        const alphaSlider = document.createElement('input');
 
-        element.clientHeight;
-        const pickerButton = document.createElement('div');
-        pickerButton.className = 'igv-circview-button';
-        pickerButton.innerHTML = '&nbsp;&nbsp;&nbsp;&nbsp;'; // <- important for button to size properly
+        const valueToAlpha = value => Math.exp(value / 200) / EXP5;
 
-        trackPanelRow.appendChild(pickerButton);
-        pickerButton.style.backgroundColor = setAlpha(track.color, 1);
+        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); // track name
+        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);
+        };
 
-        element = document.createElement('div');
-        element.style.color = 'black';
-        trackPanelRow.appendChild(element);
-        element.innerText = element.title = track.name;
+        row.appendChild(alphaSlider); // track name
+
+        const trackNameDive = document.createElement('div');
+        trackNameDive.style.color = 'black';
+        row.appendChild(trackNameDive);
+        trackNameDive.innerText = trackNameDive.title = chordSet.name;
       }
       /**
        * Reset view with a new set of chromosomes.
@@ -47403,7 +48020,7 @@
           return;
         }
 
-        this.tracks = [];
+        this.chordManager.clearChords();
         this.genomeId = igvGenome.id;
         this.chrNames = new Set(igvGenome.chromosomes.map(chr => shortChrName$1(chr.name)));
         const regions = [];
@@ -47461,35 +48078,20 @@
 
 
       addChords(newChords, options = {}) {
-        const name = options.track || options.name || "*";
-        let track = this.tracks.find(t => name === t.name); // 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);
-        } // 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);
-          }
-        }
-
+        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()
+        };
+        this.chordManager.addChordSet(chordSet);
+        this.resetControlPanel();
         this.render();
       }
       /**
@@ -47517,8 +48119,9 @@
       }
 
       clearChords() {
-        this.tracks = [];
-        this.trackPanel.innerHTML = '';
+        //this.tracks = []
+        this.chordManager.clearChords();
+        this.resetControlPanel();
         this.render();
       }
 
@@ -47564,8 +48167,8 @@
         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;
@@ -47575,24 +48178,32 @@
         }
       }
 
-      showTrack(trackID) {
-        let idx = this.tracks.findIndex(t => trackID === t.id);
+      showTrack(trackName) {
+        let track = this.getTrack(trackName);
 
-        if (idx >= 0) {
-          const track = this.tracks[idx];
+        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}`);
-        }
-      } // TODO -- remove corresponding row from track panel
+          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);
@@ -47601,12 +48212,12 @@
         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;
@@ -47633,22 +48244,22 @@
         } = JBrowseReactCircularGenomeView; // 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({
@@ -47656,7 +48267,7 @@
           tracks: jbrowseTracks
         }); // 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'");
         }
@@ -47666,12 +48277,13 @@
         });
         this.setSize(this.width, this.height);
         ReactDOM.render(this.element, this.container);
+        const onChordClick = this.config.onChordClick || defaultOnChordClick;
 
-        for (let i = 0; i < visibleTracks.length; i++) {
+        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)');
           }
         }
@@ -47685,16 +48297,28 @@
       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');
       style.innerHTML = css;
@@ -49069,54 +49693,56 @@
           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
 
 
@@ -49382,14 +50008,14 @@
         chrColorMap[chr] = color;
         return color;
       } else {
-        const color = IGVColor.randomRGB();
+        const color = IGVColor.randomRGB(0, 255);
         chrColorMap[chr] = color;
         return color;
       }
     }
     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)",
@@ -49626,6 +50252,65 @@
 
     }
 
+    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);
+          }
+        }
+      },
+      indexOfColumn: (columnContainer, column) => {
+        const allColumns = columnContainer.querySelectorAll('.igv-column');
+
+        for (let i = 0; i < allColumns.length; i++) {
+          const c = allColumns[i];
+
+          if (c === column) {
+            return i;
+          }
+        }
+
+        return undefined;
+      }
+    };
+
     /*
      * The MIT License (MIT)
      *
@@ -49670,26 +50355,47 @@
       }
 
       addMouseHandlers() {
+        this.addBrowserObserver();
         this.addViewportClickHandler(this.$viewport.get(0));
       }
 
       removeMouseHandlers() {
+        this.removeBrowserObserver();
         this.removeViewportClickHandler(this.$viewport.get(0));
       }
 
-      addViewportClickHandler(viewport) {
-        this.boundClickHandler = clickHandler.bind(this);
-        viewport.addEventListener('click', this.boundClickHandler);
+      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]);
+          }
+        }
+
+        this.boundObserverHandler = observerHandler.bind(this);
+        this.browser.on('locuschange', this.boundObserverHandler);
+      }
+
+      removeBrowserObserver() {
+        this.browser.off('locuschange', this.boundObserverHandler);
+      }
 
+      addViewportClickHandler(viewport) {
         function clickHandler(event) {
+          const column = viewport.parentElement;
+          const index = viewportColumnManager.indexOfColumn(this.browser.columnContainer, column);
+          const referenceFrame = this.browser.referenceFrameList[index];
           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;
+          } = this.browser.genome.getChromosome(referenceFrame.chr);
+          const locusLength = referenceFrame.bpPerPixel * width;
           const chrCoveragePercentage = locusLength / bpLength;
           let xPercentage = xNormalized;
 
@@ -49703,11 +50409,14 @@
 
           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);
+          referenceFrame.start = ss;
+          referenceFrame.end = ee;
+          referenceFrame.bpPerPixel = (ee - ss) / width;
+          this.browser.updateViews(referenceFrame, this.browser.trackViews, true);
         }
+
+        this.boundClickHandler = clickHandler.bind(this);
+        viewport.addEventListener('click', this.boundClickHandler);
       }
 
       removeViewportClickHandler(viewport) {
@@ -49729,23 +50438,14 @@
         context.restore();
       }
 
-      async repaint() {
-        this.draw({
-          referenceFrame: this.referenceFrame
-        });
-      }
-
-      draw(_ref) {
-        let {
-          referenceFrame
-        } = _ref;
+      update(context, pixelWidth, pixelHeight, referenceFrame) {
         this.$canvas.hide();
-        IGVGraphics.configureHighDPICanvas(this.ideogram_ctx, this.$viewport.width(), this.$viewport.height());
+        IGVGraphics.configureHighDPICanvas(context, pixelWidth, pixelHeight);
         this.trackView.track.draw({
-          context: this.ideogram_ctx,
+          context,
           referenceFrame,
-          pixelWidth: this.$viewport.width(),
-          pixelHeight: this.$viewport.height()
+          pixelWidth,
+          pixelHeight
         });
       }
 
@@ -49779,176 +50479,6 @@
      * 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);
-    }
 
     function createViewport(trackView, column, referenceFrame, width) {
       if ('ruler' === trackView.track.type) {
@@ -49959,14 +50489,6 @@
         return new TrackViewport(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 = {
@@ -49979,7 +50501,7 @@
 
     class SampleNameViewport {
       constructor(trackView, column, unused, width) {
-        this.guid = guid$1();
+        this.guid = guid$2();
         this.trackView = trackView;
         this.browser = trackView.browser;
         this.viewport = div$1({
@@ -50099,7 +50621,7 @@
             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);
           this.draw({
             context,
@@ -50488,7 +51010,7 @@
 
     class TrackView {
       constructor(browser, columnContainer, track) {
-        this.namespace = `trackview-${guid$1()}`;
+        this.namespace = `trackview-${guid$2()}`;
         this.browser = browser;
         this.track = track;
         track.trackView = this;
@@ -50811,12 +51333,14 @@
 
         for (let viewport of reloadableViewports) {
           await viewport.loadFeatures();
-        } // Very special case for variant tracks in multilocus view.  The # of rows to allocate to the variant (site)
+        }
+
+        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) {
@@ -50836,8 +51360,6 @@
           }
         }
 
-        if (this.disposed) return; // Track was removed during load
-
         if (this.track.autoscale) {
           let allFeatures = [];
 
@@ -51246,7 +51768,7 @@
           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);
         track.paintAxis(context, width, height);
         context.restore();
@@ -51521,6 +52043,13 @@
           value: this.source
         });
 
+        if (this.score !== undefined) {
+          pd.push({
+            name: 'Score',
+            value: this.score
+          });
+        }
+
         if (this.attributeString) {
           const atts = parseAttributeString(this.attributeString, this.delim);
 
@@ -51790,7 +52319,7 @@
         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],
@@ -53209,268 +53738,34 @@
      * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
      * 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);
-    }
+      const variant = new Variant();
+      variant.chr = tokens[0]; // TODO -- use genome aliases
 
-    class Variant {
-      constructor(tokens) {
-        this.chr = tokens[0]; // TODO -- use genome aliases
-
-        this.pos = parseInt(tokens[1]);
-        this.names = tokens[2]; // id in VCF
+      variant.pos = parseInt(tokens[1]);
+      variant.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 = {};
+      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;
-        }
-      }
-
-      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";
-          }
+          variant.info[element[0]] = element[1];
         }
-
-        return type;
       }
-    }
 
-    function arrayToString(value, delim) {
-      if (delim === undefined) delim = ",";
-
-      if (!Array.isArray(value)) {
-        return value;
-      }
-
-      return value.join(delim);
+      variant.init();
+      return variant;
     }
     /**
      * @deprecated - the GA4GH API has been deprecated.  This code no longer maintained.
@@ -53532,6 +53827,239 @@
       return variant;
     }
 
+    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)
      *
@@ -53669,6 +54197,7 @@
             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);
 
@@ -55771,6 +56300,7 @@
      * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
      * 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)
      *
@@ -55783,6 +56313,7 @@
         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"]);
 
         if (config.features && Array.isArray(config.features)) {
@@ -56005,9 +56536,22 @@
 
 
       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];
@@ -56017,15 +56561,20 @@
               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++;
             }
           }
         }
@@ -58648,7 +59197,7 @@
           desc += "</html>";
           return desc;
         } else {
-          return this.name;
+          return super.description();
         }
       }
 
@@ -58726,8 +59275,12 @@
         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);
@@ -58783,7 +59336,20 @@
       }
 
       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() {
@@ -58792,6 +59358,28 @@
         }
 
         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) {
@@ -58800,7 +59388,7 @@
         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;
@@ -58812,16 +59400,16 @@
           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) {
           if (this.dataRange.min === undefined) this.dataRange.min = 0; // Max can be less than min if config.min is set but max left to autoscale.   If that's the case there is
           // nothing to paint.
 
           if (this.dataRange.max > this.dataRange.min) {
-            const y0 = this.dataRange.min == 0 ? pixelHeight : yScale(0);
+            const y0 = yScale(0);
 
             for (let f of features) {
               if (f.end < bpStart) continue;
@@ -58843,11 +59431,6 @@
                 });
               } 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) {
@@ -58946,6 +59529,19 @@
       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;
+      }
 
     }
 
@@ -59104,9 +59700,12 @@
           this.explicitSamples = true;
         } //   this.featureSource = config.sourceType === "bigquery" ?
         //       new igv.BigQueryFeatureSource(this.config) :
+        // Disable whole genome downsampling unless explicitly.
 
 
-        this.featureSource = FeatureSource(this.config, this.browser.genome);
+        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;
       }
 
@@ -59736,6 +60335,23 @@
      * 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 {
       constructor(config, browser) {
         super(config, browser);
@@ -59747,7 +60363,7 @@
         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
 
@@ -59755,7 +60371,13 @@
         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;
@@ -59823,6 +60445,8 @@
       draw(options) {
         if (this.arcType === "proportional") {
           this.drawProportional(options);
+        } else if (this.arcType === "inView" || this.arcType === "partialInView") {
+          this.drawProportional(options);
         } else {
           this.drawNested(options);
         }
@@ -59850,6 +60474,8 @@
           ctx.textAlign = "center";
 
           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) {
@@ -59928,8 +60554,9 @@
               }
 
               const otherChr = feature.chr === feature.chr1 ? feature.chr2 : feature.chr1;
-              ctx.strokeStyle = color;
-              ctx.fillStyle = color;
+              ctx.strokeStyle = color; // get a sense of trans "spread"
+
+              ctx.fillStyle = getAlphaColor(getChrColor(otherChr), 0.5); // ctx.fillStyle = color
 
               if (direction) {
                 // UP
@@ -59978,49 +60605,90 @@
         }
       }
 
+      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;
         const pixelWidth = options.pixelWidth;
         const pixelHeight = options.pixelHeight;
         const bpPerPixel = options.bpPerPixel;
         const bpStart = options.bpStart;
-        const xScale = bpPerPixel; // 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;
-        // }
-
+        const xScale = bpPerPixel;
+        const refStart = options.referenceFrame.start;
+        const refEnd = options.referenceFrame.end;
         IGVGraphics.fillRect(ctx, 0, options.pixelTop, pixelWidth, pixelHeight, {
           'fillStyle': "rgb(255, 255, 255)"
         });
         const featureList = options.features;
 
         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--;
+              } // 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;
               }
 
-              if (pixelEnd < 0 || pixelStart > pixelWidth || value < this.dataRange.min) 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;
@@ -60034,17 +60702,6 @@
                 ctx.stroke();
               }
 
-              if (this.showBlocks && feature.chr !== 'all') {
-                ctx.fillStyle = color;
-                const s1 = (feature.start1 - bpStart) / xScale;
-                const e1 = (feature.end1 - bpStart) / xScale;
-                const s2 = (feature.start2 - bpStart) / xScale;
-                const e2 = (feature.end2 - bpStart) / xScale;
-                const hb = this.arcOrientation ? -this.blockHeight : this.blockHeight;
-                ctx.fillRect(s1, y, e1 - s1, hb);
-                ctx.fillRect(s2, y, e2 - s2, hb);
-              }
-
               if (this.alpha) {
                 ctx.fillStyle = getAlphaColor(color, this.alpha);
 
@@ -60055,16 +60712,21 @@
                 }
               }
 
-              feature.drawState = {
-                xc,
-                yc: y,
-                radiusX,
-                radiusY
-              };
+              if (this.showBlocks && feature.chr !== 'all') {
+                ctx.fillStyle = color;
+                const s1 = (feature.start1 - bpStart) / xScale;
+                const e1 = (feature.end1 - bpStart) / xScale;
+                const s2 = (feature.start2 - bpStart) / xScale;
+                const e2 = (feature.end2 - bpStart) / xScale;
+                const hb = this.arcOrientation ? -this.blockHeight : this.blockHeight;
+                ctx.fillRect(s1, y, e1 - s1, hb);
+                ctx.fillRect(s2, y, e2 - s2, hb);
+              }
             } 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;
@@ -60076,7 +60738,9 @@
 
               const otherChr = feature.chr === feature.chr1 ? feature.chr2 : feature.chr1;
               ctx.font = "8px sans-serif";
-              ctx.textAlign = "center";
+              ctx.textAlign = "center"; // get a sense of trans "spread"
+
+              ctx.fillStyle = getAlphaColor(getChrColor(otherChr), 0.5);
 
               if (this.arcOrientation) {
                 // UP
@@ -60104,6 +60768,32 @@
         }
       }
 
+      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 = [{
           name: "Set track color",
@@ -60114,11 +60804,14 @@
 
         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"
           };
+          items.push("<b>Arc Type</b>");
 
-          for (let arcType of ["nested", "proportional"]) {
+          for (let arcType of ["nested", "proportional", "inView", "partialInView"]) {
             items.push({
               object: $$1(createCheckbox$1(lut[arcType], arcType === this.arcType)),
               click: () => {
@@ -60129,48 +60822,35 @@
           }
         }
 
+        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
-              });
             }
           });
         }
@@ -60186,21 +60866,40 @@
           list.push({
             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
-              });
+              const refFrame = viewport.referenceFrame; // 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) {
         // if ("proportional" === this.arcType) {
@@ -60290,7 +60989,7 @@
         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;
@@ -60358,6 +61057,24 @@
 
         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;
+      }
 
     }
 
@@ -60423,32 +61140,104 @@
       return c;
     }
     /**
-     * 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 genome = this.genome;
-      const wgFeatures = [];
+      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; // 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;
     }
     /**
@@ -61579,8 +62368,6 @@
         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) : {
           "*": new BinnedColorScale(config.colorScale || {
             thresholds: [5e-8, 5e-4, 0.5],
@@ -63149,10 +63936,6 @@
 
         return data;
       }
-
-      description() {
-        return this.name;
-      }
       /**
        * Called when the track is removed.  Do any needed cleanup here
        */
@@ -63689,7 +64472,7 @@
 
         this.end = end;
         this.bpPerPixel = bpPerPixel;
-        this.id = guid$1();
+        this.id = guid$2();
       }
 
       calculateEnd(pixels) {
@@ -64385,7 +65168,7 @@
         });
         columnContainer.appendChild(this.verticalGuide);
         this.addMouseHandler(browser);
-        this.setVisibility(browser.config.showCursorTrackingGuide);
+        this.setVisibility(browser.config.showCursorGuide);
       }
 
       addMouseHandler(browser) {
@@ -64401,42 +65184,44 @@
           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 (target.parentElement) {
+            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;
+            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;
+              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) {
-              const {
-                start,
-                bp,
-                end
-              } = result;
-              const interpolant = (bp - start) / (end - start);
-
-              if (this.customMouseHandler) {
-                this.customMouseHandler({
+              if (result) {
+                const {
                   start,
                   bp,
-                  end,
-                  interpolant
-                });
+                  end
+                } = result;
+                const interpolant = (bp - start) / (end - start);
+
+                if (this.customMouseHandler) {
+                  this.customMouseHandler({
+                    start,
+                    bp,
+                    end,
+                    interpolant
+                  });
+                }
               }
             }
           }
@@ -64447,8 +65232,8 @@
         this.columnContainer.removeEventListener('mousemove', this.boundMouseMoveHandler);
       }
 
-      setVisibility(showCursorTrackingGuide) {
-        if (true === showCursorTrackingGuide) {
+      setVisibility(showCursorGuide) {
+        if (true === showCursorGuide) {
           this.show();
         } else {
           this.hide();
@@ -64609,46 +65394,49 @@
      * THE SOFTWARE.
      */
 
-    const TrackLabelControl = function (parent, browser) {
-      this.button = div$1({
-        class: 'igv-navbar-button'
-      });
-      parent.appendChild(this.button);
-      this.button.textContent = 'track labels';
-      this.button.addEventListener('click', () => {
-        browser.trackLabelsVisible = !browser.trackLabelsVisible;
+    class TrackLabelControl {
+      constructor(parent, browser) {
+        this.button = div$1({
+          class: 'igv-navbar-button'
+        });
+        parent.appendChild(this.button);
+        this.button.textContent = 'track labels';
+        this.button.addEventListener('click', () => {
+          browser.trackLabelsVisible = !browser.trackLabelsVisible;
+          this.setState(browser.trackLabelsVisible);
+          browser.setTrackLabelVisibility(browser.trackLabelsVisible);
+        });
+        this.browser = browser;
+        this.setVisibility(browser.config.showTrackLabelButton);
         this.setState(browser.trackLabelsVisible);
-        browser.setTrackLabelVisibility(browser.trackLabelsVisible);
-      });
-      this.browser = browser;
-      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)
@@ -64904,52 +65692,6 @@
       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)
      *
@@ -65337,6 +66079,19 @@
       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)
      *
@@ -65375,7 +66130,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;
         this.root = div$1({
@@ -65419,7 +66174,7 @@
 
         this.trackLabelsVisible = config.showTrackLabels;
         this.isCenterLineVisible = config.showCenterGuide;
-        this.cursorGuideVisible = config.showCursorTrackingGuide;
+        this.cursorGuideVisible = config.showCursorGuide;
         this.showSampleNames = config.showSampleNames;
         this.showSampleNameButton = config.showSampleNameButton;
         this.sampleNameViewportWidth = config.sampleNameViewportWidth || defaultSampleNameViewportWidth;
@@ -65531,6 +66286,12 @@
           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) {
@@ -65538,14 +66299,14 @@
         }
 
         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;
       }
 
@@ -66580,37 +67341,6 @@
         await this.updateViews(true);
       }
 
-      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(_ref3 => {
-          let {
-            viewports
-          } = _ref3;
-          return viewports.forEach(viewport => viewport.setWidth(viewportWidth));
-        });
-        this.centerLineList = this.createCenterLineList(this.columnContainer);
-        this.updateUIWithReferenceFrameList();
-        await this.updateViews(true);
-      }
-
       async rescaleForMultiLocus(scaleFactor) {
         const viewportWidth = this.calculateViewportWidth(this.referenceFrameList.length);
 
@@ -66799,6 +67529,7 @@
 
         const locus = [];
         const gtexSelections = {};
+        let hasGtexSelections = false;
         let anyTrackView = this.trackViews[0];
 
         for (let {
@@ -66813,13 +67544,13 @@
               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;
         }
 
@@ -66849,29 +67580,22 @@
               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;
         return json; // This is an object, not a json string
       }
@@ -67240,7 +67964,7 @@
 
       setDefaults(config);
 
-      if (config.queryParametersSupported !== false) {
+      if (config.queryParametersSupported) {
         extractQuery(config);
       }
 
@@ -67304,10 +68028,6 @@
     }
 
     function setDefaults(config) {
-      if (undefined === config.promisified) {
-        config.promisified = false;
-      }
-
       if (undefined === config.minimumBases) {
         config.minimumBases = 40;
       }
@@ -67336,8 +68056,8 @@
         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) {
@@ -67424,6 +68144,8 @@
             }
 
             i = j + 1;
+          } else {
+            i++;
           }
         }
       }
@@ -67461,7 +68183,7 @@
     }
 
     function embedCSS() {
-      var css = '.igv-navbar {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center;\n  box-sizing: border-box;\n  width: 100%;\n  color: #444;\n  font-size: 12px;\n  font-family: \"Open Sans\", sans-serif;\n  font-weight: 400;\n  line-height: 32px;\n  padding-left: 8px;\n  padding-right: 8px;\n  margin-top: 2px;\n  margin-bottom: 6px;\n  height: 32px;\n  border-style: solid;\n  border-radius: 3px;\n  border-width: thin;\n  border-color: #bfbfbf;\n  background-color: #f3f3f3; }\n  .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');
       style.innerHTML = css;