igv 2.11.0 → 2.11.1

package/dist/igv.js

@@ -17943,7 +17943,7 @@
      * @constructor
      */
 
-    class FeatureCache {
+    class FeatureCache$1 {
       constructor(featureList, genome, range) {
         featureList = featureList || [];
         this.treeMap = this.buildTreeMap(featureList, genome);
@@ -19385,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      -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 css = '.igv-ui-popover {\n  cursor: default;\n  position: absolute;\n  z-index: 2048;\n  border-color: #7F7F7F;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: 1px;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: small;\n  background-color: white; }\n  .igv-ui-popover > div:first-child {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n    height: 24px;\n    cursor: move;\n    border-top-left-radius: 4px;\n    border-top-right-radius: 4px;\n    border-bottom-color: #7F7F7F;\n    border-bottom-style: solid;\n    border-bottom-width: thin;\n    background-color: #eee; }\n    .igv-ui-popover > div:first-child > div:first-child {\n      margin-left: 4px; }\n    .igv-ui-popover > div:first-child > div:last-child {\n      margin-right: 4px;\n      height: 12px;\n      width: 12px;\n      color: #7F7F7F; }\n    .igv-ui-popover > div:first-child > div:last-child:hover {\n      cursor: pointer;\n      color: #444; }\n  .igv-ui-popover > div:last-child {\n    overflow-y: auto;\n    overflow-x: hidden;\n    max-height: 400px;\n    max-width: 800px;\n    background-color: white; }\n    .igv-ui-popover > div:last-child > div {\n      -webkit-user-select: text;\n      -moz-user-select: text;\n      -ms-user-select: text;\n      user-select: text;\n      margin-left: 4px;\n      margin-right: 4px;\n      min-width: 220px;\n      overflow-x: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap; }\n      .igv-ui-popover > div:last-child > div > span {\n        font-weight: bolder; }\n    .igv-ui-popover > div:last-child hr {\n      width: 100%; }\n\n.igv-ui-alert-dialog-container {\n  box-sizing: content-box;\n  position: absolute;\n  z-index: 2048;\n  top: 50%;\n  left: 50%;\n  width: 400px;\n  height: 200px;\n  border-color: #7F7F7F;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: thin;\n  outline: none;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 15px;\n  font-weight: 400;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center; }\n  .igv-ui-alert-dialog-container > div:first-child {\n    display: flex;\n    flex-flow: row;\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    align-items: center;\n    width: 100%;\n    height: 24px;\n    cursor: move;\n    border-top-left-radius: 4px;\n    border-top-right-radius: 4px;\n    border-bottom-color: #7F7F7F;\n    border-bottom-style: solid;\n    border-bottom-width: thin;\n    background-color: #eee; }\n    .igv-ui-alert-dialog-container > div:first-child div:first-child {\n      padding-left: 8px; }\n  .igv-ui-alert-dialog-container .igv-ui-alert-dialog-body {\n    -webkit-user-select: text;\n    -moz-user-select: text;\n    -ms-user-select: text;\n    user-select: text;\n    color: #373737;\n    width: 100%;\n    height: calc(100% - 24px - 64px);\n    overflow-y: scroll; }\n    .igv-ui-alert-dialog-container .igv-ui-alert-dialog-body .igv-ui-alert-dialog-body-copy {\n      margin: 16px;\n      width: auto;\n      height: auto;\n      overflow-wrap: break-word;\n      word-break: break-word;\n      background-color: white;\n      border: unset; }\n  .igv-ui-alert-dialog-container > div:last-child {\n    width: 100%;\n    margin-bottom: 10px;\n    background-color: white;\n    display: flex;\n    flex-flow: row;\n    flex-wrap: nowrap;\n    justify-content: center;\n    align-items: center; }\n    .igv-ui-alert-dialog-container > div:last-child div {\n      margin: unset;\n      width: 40px;\n      height: 30px;\n      line-height: 30px;\n      text-align: center;\n      color: white;\n      font-family: \"Open Sans\", sans-serif;\n      font-size: small;\n      font-weight: 400;\n      border-color: #2B81AF;\n      border-style: solid;\n      border-width: thin;\n      border-radius: 4px;\n      background-color: #2B81AF; }\n    .igv-ui-alert-dialog-container > div:last-child div:hover {\n      cursor: pointer;\n      border-color: #25597f;\n      background-color: #25597f; }\n\n.igv-ui-color-swatch {\n  position: relative;\n  box-sizing: content-box;\n  display: flex;\n  flex-flow: row;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  width: 32px;\n  height: 32px;\n  border-style: solid;\n  border-width: 2px;\n  border-color: white;\n  border-radius: 4px; }\n\n.igv-ui-color-swatch:hover {\n  border-color: dimgray; }\n\n.igv-ui-colorpicker-menu-close-button {\n  display: flex;\n  flex-flow: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: center;\n  width: 100%;\n  height: 32px;\n  margin-top: 4px;\n  margin-bottom: 4px;\n  padding-right: 8px; }\n  .igv-ui-colorpicker-menu-close-button i.fa {\n    display: block;\n    margin-left: 4px;\n    margin-right: 4px;\n    color: #5f5f5f; }\n  .igv-ui-colorpicker-menu-close-button i.fa:hover,\n  .igv-ui-colorpicker-menu-close-button i.fa:focus,\n  .igv-ui-colorpicker-menu-close-button i.fa:active {\n    cursor: pointer;\n    color: #0f0f0f; }\n\n.igv-ui-generic-dialog-container {\n  box-sizing: content-box;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 300px;\n  height: 200px;\n  border-color: #7F7F7F;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  z-index: 2048;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center; }\n  .igv-ui-generic-dialog-container .igv-ui-generic-dialog-header {\n    display: flex;\n    flex-flow: row;\n    flex-wrap: nowrap;\n    justify-content: flex-end;\n    align-items: center;\n    width: 100%;\n    height: 24px;\n    cursor: move;\n    border-top-left-radius: 4px;\n    border-top-right-radius: 4px;\n    border-bottom-color: #7F7F7F;\n    border-bottom-style: solid;\n    border-bottom-width: thin;\n    background-color: #eee; }\n    .igv-ui-generic-dialog-container .igv-ui-generic-dialog-header div {\n      margin-right: 4px;\n      margin-bottom: 2px;\n      height: 12px;\n      width: 12px;\n      color: #7F7F7F; }\n    .igv-ui-generic-dialog-container .igv-ui-generic-dialog-header div:hover {\n      cursor: pointer;\n      color: #444; }\n  .igv-ui-generic-dialog-container .igv-ui-generic-dialog-one-liner {\n    color: #373737;\n    width: 95%;\n    height: 24px;\n    line-height: 24px;\n    text-align: left;\n    margin-top: 8px;\n    padding-left: 8px;\n    overflow-wrap: break-word;\n    background-color: white; }\n  .igv-ui-generic-dialog-container .igv-ui-generic-dialog-label-input {\n    margin-top: 8px;\n    width: 95%;\n    height: 24px;\n    color: #373737;\n    line-height: 24px;\n    padding-left: 8px;\n    background-color: white;\n    display: flex;\n    flex-flow: row;\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    align-items: center; }\n    .igv-ui-generic-dialog-container .igv-ui-generic-dialog-label-input div {\n      width: 30%;\n      height: 100%;\n      font-size: 16px;\n      text-align: right;\n      padding-right: 8px;\n      background-color: white; }\n    .igv-ui-generic-dialog-container .igv-ui-generic-dialog-label-input input {\n      display: block;\n      height: 100%;\n      width: 100%;\n      padding-left: 4px;\n      font-family: \"Open Sans\", sans-serif;\n      font-weight: 400;\n      color: #373737;\n      text-align: left;\n      outline: none;\n      border-style: solid;\n      border-width: thin;\n      border-color: #7F7F7F;\n      background-color: white; }\n    .igv-ui-generic-dialog-container .igv-ui-generic-dialog-label-input input {\n      width: 50%;\n      font-size: 16px; }\n  .igv-ui-generic-dialog-container .igv-ui-generic-dialog-input {\n    margin-top: 8px;\n    width: calc(100% - 16px);\n    height: 24px;\n    color: #373737;\n    line-height: 24px;\n    display: flex;\n    flex-flow: row;\n    flex-wrap: nowrap;\n    justify-content: space-around;\n    align-items: center; }\n    .igv-ui-generic-dialog-container .igv-ui-generic-dialog-input input {\n      display: block;\n      height: 100%;\n      width: 100%;\n      padding-left: 4px;\n      font-family: \"Open Sans\", sans-serif;\n      font-weight: 400;\n      color: #373737;\n      text-align: left;\n      outline: none;\n      border-style: solid;\n      border-width: thin;\n      border-color: #7F7F7F;\n      background-color: white; }\n    .igv-ui-generic-dialog-container .igv-ui-generic-dialog-input input {\n      font-size: 16px; }\n  .igv-ui-generic-dialog-container .igv-ui-generic-dialog-ok-cancel {\n    width: 100%;\n    height: 28px;\n    display: flex;\n    flex-flow: row;\n    flex-wrap: nowrap;\n    justify-content: space-around;\n    align-items: center; }\n    .igv-ui-generic-dialog-container .igv-ui-generic-dialog-ok-cancel div {\n      margin-top: 32px;\n      color: white;\n      font-family: \"Open Sans\", sans-serif;\n      font-size: 14px;\n      font-weight: 400;\n      width: 75px;\n      height: 28px;\n      line-height: 28px;\n      text-align: center;\n      border-color: transparent;\n      border-style: solid;\n      border-width: thin;\n      border-radius: 2px; }\n    .igv-ui-generic-dialog-container .igv-ui-generic-dialog-ok-cancel div:first-child {\n      margin-left: 32px;\n      margin-right: 0;\n      background-color: #5ea4e0; }\n    .igv-ui-generic-dialog-container .igv-ui-generic-dialog-ok-cancel div:last-child {\n      margin-left: 0;\n      margin-right: 32px;\n      background-color: #c4c4c4; }\n    .igv-ui-generic-dialog-container .igv-ui-generic-dialog-ok-cancel div:first-child:hover {\n      cursor: pointer;\n      background-color: #3b5c7f; }\n    .igv-ui-generic-dialog-container .igv-ui-generic-dialog-ok-cancel div:last-child:hover {\n      cursor: pointer;\n      background-color: #7f7f7f; }\n  .igv-ui-generic-dialog-container .igv-ui-generic-dialog-ok {\n    width: 100%;\n    height: 36px;\n    margin-top: 32px;\n    display: flex;\n    flex-flow: row;\n    flex-wrap: nowrap;\n    justify-content: space-around;\n    align-items: center; }\n    .igv-ui-generic-dialog-container .igv-ui-generic-dialog-ok div {\n      width: 98px;\n      height: 36px;\n      line-height: 36px;\n      text-align: center;\n      color: white;\n      font-family: \"Open Sans\", sans-serif;\n      font-size: medium;\n      font-weight: 400;\n      border-color: white;\n      border-style: solid;\n      border-width: thin;\n      border-radius: 4px;\n      background-color: #2B81AF; }\n    .igv-ui-generic-dialog-container .igv-ui-generic-dialog-ok div:hover {\n      cursor: pointer;\n      background-color: #25597f; }\n\n.igv-ui-generic-container {\n  box-sizing: content-box;\n  position: absolute;\n  z-index: 2048;\n  background-color: white;\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center; }\n  .igv-ui-generic-container > div:first-child {\n    cursor: move;\n    display: flex;\n    flex-flow: row;\n    flex-wrap: nowrap;\n    justify-content: flex-end;\n    align-items: center;\n    height: 24px;\n    width: 100%;\n    background-color: #dddddd; }\n    .igv-ui-generic-container > div:first-child > div {\n      display: block;\n      color: #5f5f5f;\n      cursor: pointer;\n      width: 14px;\n      height: 14px;\n      margin-right: 8px;\n      margin-bottom: 4px; }\n\n.igv-ui-dialog {\n  z-index: 2048;\n  position: fixed;\n  width: fit-content;\n  height: fit-content;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  background-color: white;\n  border-color: #7F7F7F;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: thin;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400; }\n  .igv-ui-dialog .igv-ui-dialog-header {\n    display: flex;\n    flex-flow: row;\n    flex-wrap: nowrap;\n    justify-content: flex-end;\n    align-items: center;\n    width: 100%;\n    height: 24px;\n    cursor: move;\n    border-top-left-radius: 4px;\n    border-top-right-radius: 4px;\n    border-bottom-color: #7F7F7F;\n    border-bottom-style: solid;\n    border-bottom-width: thin;\n    background-color: #eee; }\n    .igv-ui-dialog .igv-ui-dialog-header div {\n      margin-right: 4px;\n      margin-bottom: 2px;\n      height: 12px;\n      width: 12px;\n      color: #7F7F7F; }\n    .igv-ui-dialog .igv-ui-dialog-header div:hover {\n      cursor: pointer;\n      color: #444; }\n  .igv-ui-dialog .igv-ui-dialog-one-liner {\n    width: 95%;\n    height: 24px;\n    line-height: 24px;\n    text-align: left;\n    margin: 8px;\n    overflow-wrap: break-word;\n    background-color: white;\n    font-weight: bold; }\n  .igv-ui-dialog .igv-ui-dialog-ok-cancel {\n    width: 100%;\n    display: flex;\n    flex-flow: row;\n    flex-wrap: nowrap;\n    justify-content: space-around;\n    align-items: center; }\n    .igv-ui-dialog .igv-ui-dialog-ok-cancel div {\n      margin: 16px;\n      margin-top: 32px;\n      color: white;\n      font-family: \"Open Sans\", sans-serif;\n      font-size: 14px;\n      font-weight: 400;\n      width: 75px;\n      height: 28px;\n      line-height: 28px;\n      text-align: center;\n      border-color: transparent;\n      border-style: solid;\n      border-width: thin;\n      border-radius: 2px; }\n    .igv-ui-dialog .igv-ui-dialog-ok-cancel div:first-child {\n      background-color: #5ea4e0; }\n    .igv-ui-dialog .igv-ui-dialog-ok-cancel div:last-child {\n      background-color: #c4c4c4; }\n    .igv-ui-dialog .igv-ui-dialog-ok-cancel div:first-child:hover {\n      cursor: pointer;\n      background-color: #3b5c7f; }\n    .igv-ui-dialog .igv-ui-dialog-ok-cancel div:last-child:hover {\n      cursor: pointer;\n      background-color: #7f7f7f; }\n  .igv-ui-dialog .igv-ui-dialog-ok {\n    width: 100%;\n    height: 36px;\n    margin-top: 32px;\n    display: flex;\n    flex-flow: row;\n    flex-wrap: nowrap;\n    justify-content: space-around;\n    align-items: center; }\n    .igv-ui-dialog .igv-ui-dialog-ok div {\n      width: 98px;\n      height: 36px;\n      line-height: 36px;\n      text-align: center;\n      color: white;\n      font-family: \"Open Sans\", sans-serif;\n      font-size: medium;\n      font-weight: 400;\n      border-color: white;\n      border-style: solid;\n      border-width: thin;\n      border-radius: 4px;\n      background-color: #2B81AF; }\n    .igv-ui-dialog .igv-ui-dialog-ok div:hover {\n      cursor: pointer;\n      background-color: #25597f; }\n\n.igv-ui-panel, .igv-ui-panel-column, .igv-ui-panel-row {\n  z-index: 2048;\n  background-color: white;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start; }\n\n.igv-ui-panel-column {\n  display: flex;\n  flex-direction: column; }\n\n.igv-ui-panel-row {\n  display: flex;\n  flex-direction: row; }\n\n.igv-ui-textbox {\n  background-color: white;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: medium;\n  font-weight: 400;\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start; }\n\n/*# sourceMappingURL=igv-ui.css.map */\n';
       var style = document.createElement('style');
       style.setAttribute('type', 'text/css');
       style.innerHTML = css;
@@ -19911,7 +19911,7 @@
      * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
      * THE SOFTWARE.
      */
-    const knownFileExtensions = new Set(["narrowpeak", "broadpeak", "regionpeak", "peaks", "bedgraph", "wig", "gff3", "gff", "gtf", "fusionjuncspan", "refflat", "seg", "aed", "bed", "vcf", "bb", "bigbed", "bw", "bigwig", "bam", "tdf", "refgene", "genepred", "genepredext", "bedpe", "bp", "snp", "rmsk", "cram", "gwas", "maf", "mut"]);
+    const knownFileExtensions = new Set(["narrowpeak", "broadpeak", "regionpeak", "peaks", "bedgraph", "wig", "gff3", "gff", "gtf", "fusionjuncspan", "refflat", "seg", "aed", "bed", "vcf", "bb", "bigbed", "biginteract", "bw", "bigwig", "bam", "tdf", "refgene", "genepred", "genepredext", "bedpe", "bp", "snp", "rmsk", "cram", "gwas", "maf", "mut"]);
     /**
      * Return a custom format object with the given name.
      * @param name
@@ -20043,6 +20043,7 @@
           case "bed":
           case "bigbed":
           case "bb":
+          case "biginteract":
             return "bedtype";
 
           default:
@@ -20732,14 +20733,13 @@
         console.log('Viewport - draw(drawConfiguration, features, roiFeatures)');
       }
 
-      checkContentHeight() {
+      checkContentHeight(features) {
         let track = this.trackView.track;
+        features = features || this.cachedFeatures;
 
         if ("FILL" === track.displayMode) {
           this.setContentHeight(this.$viewport.height());
         } else if (typeof track.computePixelHeight === 'function') {
-          let features = this.cachedFeatures;
-
           if (features && features.length > 0) {
             let requiredContentHeight = track.computePixelHeight(features);
             let currentContentHeight = this.$content.height();
@@ -20759,7 +20759,7 @@
         // Maximum height of a canvas is ~32,000 pixels on Chrome, possibly smaller on other platforms
         contentHeight = Math.min(contentHeight, 32000);
         this.$content.height(contentHeight);
-        if (this.tile) this.tile.invalidate = true;
+        if (this.canvas._data) this.canvas._data.invalidate = true;
       }
 
       isLoading() {
@@ -20774,8 +20774,6 @@
 
       setWidth(width) {
         this.$viewport.width(width);
-        this.canvas.style.width = `${width}px`;
-        this.canvas.setAttribute('width', width);
       }
 
       getWidth() {
@@ -23060,7 +23058,7 @@
       }
     };
 
-    const _version = "2.11.0";
+    const _version = "2.11.1";
 
     function version$1() {
       return _version;
@@ -23577,16 +23575,20 @@
 
       checkZoomIn() {
         const showZoomInNotice = () => {
-          const referenceFrame = this.referenceFrame;
-
           if (this.referenceFrame.chr.toLowerCase() === "all" && !this.trackView.track.supportsWholeGenome()) {
             return true;
           } else {
             const visibilityWindow = this.trackView.track.visibilityWindow;
-            return visibilityWindow !== undefined && visibilityWindow > 0 && referenceFrame.bpPerPixel * this.$viewport.width() > visibilityWindow;
+            return visibilityWindow !== undefined && visibilityWindow > 0 && this.referenceFrame.bpPerPixel * this.$viewport.width() > visibilityWindow;
           }
         };
 
+        if (this.trackView.track && "sequence" === this.trackView.track.type && this.referenceFrame.bpPerPixel > 1) {
+          if (this.canvas) ;
+
+          return false;
+        }
+
         if (!this.viewIsReady()) {
           return false;
         }
@@ -23596,7 +23598,8 @@
             // Out of visibility window
             if (this.canvas) {
               this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-              this.tile = undefined;
+              this.canvas._data = undefined;
+              this.featureCache = undefined;
             }
 
             this.$zoomInNotice.show();
@@ -23615,14 +23618,17 @@
 
         return true;
       }
+      /**
+       * Adjust the canvas to the current genomic state.
+       */
+
 
       shift() {
-        const self = this;
-        const referenceFrame = self.referenceFrame;
+        const referenceFrame = this.referenceFrame;
 
-        if (self.canvas && self.tile && self.tile.chr === self.referenceFrame.chr && self.tile.bpPerPixel === referenceFrame.bpPerPixel) {
-          const pixelOffset = Math.round((self.tile.startBP - referenceFrame.start) / referenceFrame.bpPerPixel);
-          self.canvas.style.left = pixelOffset + "px";
+        if (this.canvas && this.canvas._data && this.canvas._data.chr === this.referenceFrame.chr && this.canvas._data.bpPerPixel === referenceFrame.bpPerPixel) {
+          const pixelOffset = Math.round((this.canvas._data.startBP - referenceFrame.start) / referenceFrame.bpPerPixel);
+          this.canvas.style.left = pixelOffset + "px";
         }
       }
 
@@ -23648,9 +23654,10 @@
         this.startSpinner();
 
         try {
-          const features = await this.getFeatures(this.trackView.track, chr, bpStart, bpEnd, referenceFrame.bpPerPixel);
+          const track = this.trackView.track;
+          const features = await this.getFeatures(track, chr, bpStart, bpEnd, referenceFrame.bpPerPixel);
           let roiFeatures = [];
-          const roi = mergeArrays(this.browser.roi, this.trackView.track.roi);
+          const roi = mergeArrays(this.browser.roi, track.roi);
 
           if (roi) {
             for (let r of roi) {
@@ -23662,11 +23669,13 @@
             }
           }
 
-          this.tile = new Tile(chr, bpStart, bpEnd, referenceFrame.bpPerPixel, features, roiFeatures);
+          const mr = track && ("wig" === track.type || "merged" === track.type); // wig tracks are potentially multiresolution (e.g. bigwig)
+
+          this.featureCache = new FeatureCache(chr, bpStart, bpEnd, referenceFrame.bpPerPixel, features, roiFeatures, mr);
           this.loading = false;
           this.hideMessage();
           this.stopSpinner();
-          return this.tile;
+          return this.featureCache;
         } catch (error) {
           // Track might have been removed during load
           if (this.trackView && this.trackView.disposed !== true) {
@@ -23679,30 +23688,34 @@
           this.stopSpinner();
         }
       }
+      /**
+       * Repaint the canvas for the current genomic state.
+       *
+       * @returns {Promise<void>}
+       */
 
-      async repaint() {
-        if (undefined === this.tile) {
+
+      repaint() {
+        if (undefined === this.featureCache) {
           return;
         }
 
         let {
           features,
-          roiFeatures,
-          bpPerPixel,
-          startBP,
-          endBP
-        } = this.tile; // const isWGV = GenomeUtils.isWholeGenomeView(this.browser.referenceFrameList[0].chr)
+          roiFeatures
+        } = this.featureCache; //this.tile.bpPerPixel = this.referenceFrame.bpPerPixel
+        // const isWGV = GenomeUtils.isWholeGenomeView(this.browser.referenceFrameList[0].chr)
 
         const isWGV = GenomeUtils.isWholeGenomeView(this.referenceFrame.chr);
         let pixelWidth;
+        const startBP = this.featureCache.startBP;
+        const endBP = this.featureCache.endBP;
+        let bpPerPixel = this.referenceFrame.bpPerPixel;
 
         if (isWGV) {
-          bpPerPixel = this.referenceFrame.end / this.$viewport.width();
-          startBP = 0;
-          endBP = this.referenceFrame.end;
           pixelWidth = this.$viewport.width();
         } else {
-          pixelWidth = Math.ceil((endBP - startBP) / bpPerPixel);
+          pixelWidth = 3 * this.$viewport.width();
         } // For deep tracks we paint a canvas == 3*viewportHeight centered on the current vertical scroll position
 
 
@@ -23755,21 +23768,33 @@
           viewport: this,
           viewportWidth: this.$viewport.width()
         };
-        this.draw(drawConfiguration, features, roiFeatures);
-        this.canvasVerticalRange = {
+        this.draw(drawConfiguration, features, roiFeatures); // Attach metadata to canvas
+
+        newCanvas._data = {
+          chr: this.referenceFrame.chr,
+          startBP,
+          endBP,
+          bpPerPixel,
           top: canvasTop,
           bottom: canvasTop + pixelHeight
         };
 
-        if (this.$canvas) {
-          this.$canvas.remove();
+        if (this.canvas) {
+          $$1(this.canvas).remove();
         }
 
-        this.$canvas = $$1(newCanvas);
-        this.$content.append(this.$canvas);
         this.canvas = newCanvas;
         this.ctx = ctx;
+        this.$content.append($$1(newCanvas));
       }
+      /**
+       * Draw the associated track.
+       *
+       * @param drawConfiguration
+       * @param features
+       * @param roiFeatures
+       */
+
 
       draw(drawConfiguration, features, roiFeatures) {
         // console.log(`${ Date.now() } viewport draw(). track ${ this.trackView.track.type }. content-css-top ${ this.$content.css('top') }. canvas-top ${ drawConfiguration.pixelTop }.`)
@@ -23784,51 +23809,6 @@
             r.track.draw(drawConfiguration);
           }
         }
-      } // TODO: Nolonger used. Will discard
-
-
-      async toSVG(tile) {
-        // Nothing to do if zoomInNotice is active
-        if (this.$zoomInNotice && this.$zoomInNotice.is(":visible")) {
-          return;
-        }
-
-        const referenceFrame = this.referenceFrame;
-        const bpPerPixel = tile.bpPerPixel;
-        const features = tile.features;
-        const roiFeatures = tile.roiFeatures;
-        const pixelWidth = this.$viewport.width();
-        const pixelHeight = this.$viewport.height();
-        const bpStart = referenceFrame.start;
-        const bpEnd = referenceFrame.start + pixelWidth * referenceFrame.bpPerPixel;
-        const ctx$1 = new ctx({
-          // svg
-          width: pixelWidth,
-          height: pixelHeight,
-          viewbox: {
-            x: 0,
-            y: -this.$content.position().top,
-            width: pixelWidth,
-            height: pixelHeight
-          }
-        });
-        const drawConfiguration = {
-          viewport: this,
-          context: ctx$1,
-          top: -this.$content.position().top,
-          pixelTop: 0,
-          // for compatibility with canvas draw
-          pixelWidth,
-          pixelHeight,
-          bpStart,
-          bpEnd,
-          bpPerPixel,
-          referenceFrame: this.referenceFrame,
-          selection: this.selection,
-          viewportWidth: pixelWidth
-        };
-        this.draw(drawConfiguration, features, roiFeatures);
-        return ctx$1.getSerializedSvg(true);
       }
 
       containsPosition(chr, position) {
@@ -23843,9 +23823,10 @@
         return this.loading;
       }
 
-      saveImage() {
+      savePNG() {
         if (!this.ctx) return;
-        const canvasTop = this.canvasVerticalRange ? this.canvasVerticalRange.top : 0;
+        const canvasMetadata = this.canvas._data;
+        const canvasTop = canvasMetadata ? canvasMetadata.top : 0;
         const devicePixelRatio = window.devicePixelRatio;
         const w = this.$viewport.width() * devicePixelRatio;
         const h = this.$viewport.height() * devicePixelRatio;
@@ -23967,23 +23948,22 @@
           viewportWidth: width,
           selection: this.selection
         };
-        const features = this.tile ? this.tile.features : [];
-        const roiFeatures = this.tile ? this.tile.roiFeatures : undefined;
+        const features = this.featureCache ? this.featureCache.features : [];
+        const roiFeatures = this.featureCache ? this.featureCache.roiFeatures : undefined;
         this.draw(config, features, roiFeatures);
         context.restore();
       }
 
-      getCachedFeatures() {
-        return this.tile ? this.tile.features : [];
+      get cachedFeatures() {
+        return this.featureCache ? this.featureCache.features : [];
       }
 
       async getFeatures(track, chr, start, end, bpPerPixel) {
-        if (this.tile && this.tile.containsRange(chr, start, end, bpPerPixel)) {
-          return this.tile.features;
+        if (this.featureCache && this.featureCache.containsRange(chr, start, end, bpPerPixel)) {
+          return this.featureCache.features;
         } else if (typeof track.getFeatures === "function") {
           const features = await track.getFeatures(chr, start, end, bpPerPixel, this);
-          this.cachedFeatures = features;
-          this.checkContentHeight();
+          this.checkContentHeight(features);
           return features;
         } else {
           return undefined;
@@ -24263,11 +24243,6 @@
       const viewportCoords = translateMouseCoordinates$1(event, viewport.contentDiv);
       const canvasCoords = translateMouseCoordinates$1(event, viewport.canvas);
       const genomicLocation = referenceFrame.start + referenceFrame.toBP(viewportCoords.x);
-
-      if (undefined === genomicLocation || null === viewport.tile) {
-        return undefined;
-      }
-
       return {
         event,
         viewport,
@@ -24321,22 +24296,28 @@
       return rows.join('');
     }
 
-    var Tile = function (chr, tileStart, tileEnd, bpPerPixel, features, roiFeatures) {
-      this.chr = chr;
-      this.startBP = tileStart;
-      this.endBP = tileEnd;
-      this.bpPerPixel = bpPerPixel;
-      this.features = features;
-      this.roiFeatures = roiFeatures;
-    };
+    class FeatureCache {
+      constructor(chr, tileStart, tileEnd, bpPerPixel, features, roiFeatures, multiresolution) {
+        this.chr = chr;
+        this.startBP = tileStart;
+        this.endBP = tileEnd;
+        this.bpPerPixel = bpPerPixel;
+        this.features = features;
+        this.roiFeatures = roiFeatures;
+        this.multiresolution = multiresolution;
+      }
 
-    Tile.prototype.containsRange = function (chr, start, end, bpPerPixel) {
-      return this.bpPerPixel === bpPerPixel && start >= this.startBP && end <= this.endBP && chr === this.chr;
-    };
+      containsRange(chr, start, end, bpPerPixel) {
+        // For multi-resolution tracks allow for a 2X change in bpPerPixel
+        const r = this.multiresolution ? this.bpPerPixel / bpPerPixel : 1;
+        return start >= this.startBP && end <= this.endBP && chr === this.chr && r > 0.5 && r < 2;
+      }
 
-    Tile.prototype.overlapsRange = function (chr, start, end) {
-      return this.chr === chr && end >= this.startBP && start <= this.endBP;
-    };
+      overlapsRange(chr, start, end) {
+        return this.chr === chr && end >= this.startBP && start <= this.endBP;
+      }
+
+    }
     /**
      * Merge 2 arrays.  a and/or b can be undefined.  If both are undefined, return undefined
      * @param a An array or undefined
@@ -25480,6 +25461,18 @@
         return true; // By definition
       }
 
+      isMateMapped() {
+        return true; // By definition
+      }
+
+      isProperPair() {
+        return this.firstAlignment.isProperPair();
+      }
+
+      get tlen() {
+        return Math.abs(this.firstAlignment.fragmentLength);
+      }
+
       firstOfPairStrand() {
         if (this.firstAlignment.isFirstOfPair()) {
           return this.firstAlignment.strand;
@@ -25846,7 +25839,15 @@
      */
 
     class AlignmentContainer {
-      constructor(chr, start, end, samplingWindowSize, samplingDepth, pairsSupported, alleleFreqThreshold) {
+      //            this.config.samplingWindowSize, this.config.samplingDepth,
+      //             this.config.pairsSupported, this.config.alleleFreqThreshold)
+      constructor(chr, start, end, _ref) {
+        let {
+          samplingWindowSize,
+          samplingDepth,
+          pairsSupported,
+          alleleFreqThreshold
+        } = _ref;
         this.chr = chr;
         this.start = Math.floor(start);
         this.end = Math.ceil(end);
@@ -25869,17 +25870,10 @@
           // TODO -- pass this in
           return alignment.isMapped() && !alignment.isFailsVendorQualityCheck();
         };
-
-        this.pairedEndStats = new PairedEndStats();
       }
 
       push(alignment) {
         if (this.filter(alignment) === false) return;
-
-        if (alignment.isPaired()) {
-          this.pairedEndStats.push(alignment);
-        }
-
         this.coverageMap.incCounts(alignment); // Count coverage before any downsampling
 
         if (this.pairsSupported && this.downsampledReads.has(alignment.readName)) {
@@ -25908,7 +25902,6 @@
         });
         this.pairsCache = undefined;
         this.downsampledReads = undefined;
-        this.pairedEndStats.compute();
       }
 
       contains(chr, start, end) {
@@ -26203,62 +26196,6 @@
 
     }
 
-    class PairedEndStats {
-      constructor(lowerPercentile, upperPercentile) {
-        this.totalCount = 0;
-        this.frCount = 0;
-        this.rfCount = 0;
-        this.ffCount = 0;
-        this.sumF = 0;
-        this.sumF2 = 0; //this.lp = lowerPercentile === undefined ? 0.005 : lowerPercentile;
-        //this.up = upperPercentile === undefined ? 0.995 : upperPercentile;
-        //this.digest = new Digest();
-      }
-
-      push(alignment) {
-        if (alignment.isProperPair()) {
-          var fragmentLength = Math.abs(alignment.fragmentLength); //this.digest.push(fragmentLength);
-
-          this.sumF += fragmentLength;
-          this.sumF2 += fragmentLength * fragmentLength;
-          var po = alignment.pairOrientation;
-
-          if (typeof po === "string" && po.length === 4) {
-            var tmp = '' + po.charAt(0) + po.charAt(2);
-
-            switch (tmp) {
-              case 'FF':
-              case 'RR':
-                this.ffCount++;
-                break;
-
-              case "FR":
-                this.frCount++;
-                break;
-
-              case "RF":
-                this.rfCount++;
-            }
-          }
-
-          this.totalCount++;
-        }
-      }
-
-      compute() {
-        if (this.totalCount > 100) {
-          if (this.ffCount / this.totalCount > 0.9) this.orienation = "ff";else if (this.frCount / this.totalCount > 0.9) this.orienation = "fr";else if (this.rfCount / this.totalCount > 0.9) this.orienation = "rf";
-          var fMean = this.sumF / this.totalCount;
-          var stdDev = Math.sqrt((this.totalCount * this.sumF2 - this.sumF * this.sumF) / (this.totalCount * this.totalCount));
-          this.lowerFragmentLength = fMean - 3 * stdDev;
-          this.upperFragmentLength = fMean + 3 * stdDev; //this.lowerFragmentLength = this.digest.percentile(this.lp);
-          //this.upperFragmentLength = this.digest.percentile(this.up);
-          //this.digest = undefined;
-        }
-      }
-
-    }
-
     class SupplementaryAlignment {
       constructor(rec) {
         const tokens = rec.split(',');
@@ -27462,7 +27399,7 @@
           const header = this.header;
           const queryChr = header.chrAliasTable.hasOwnProperty(chr) ? header.chrAliasTable[chr] : chr;
           const qAlignments = this.alignmentCache.queryFeatures(queryChr, bpStart, bpEnd);
-          const alignmentContainer = new AlignmentContainer(chr, bpStart, bpEnd, this.samplingWindowSize, this.samplingDepth, this.pairsSupported, this.alleleFreqThreshold);
+          const alignmentContainer = new AlignmentContainer(chr, bpStart, bpEnd, this.config);
 
           for (let a of qAlignments) {
             alignmentContainer.push(a);
@@ -27489,13 +27426,13 @@
         const alignments = [];
         this.header = BamUtils.decodeBamHeader(data);
         BamUtils.decodeBamRecords(data, this.header.size, alignments, this.header.chrNames);
-        this.alignmentCache = new FeatureCache(alignments, this.genome);
+        this.alignmentCache = new FeatureCache$1(alignments, this.genome);
       }
 
       fetchAlignments(chr, bpStart, bpEnd) {
         const queryChr = this.header.chrAliasTable.hasOwnProperty(chr) ? this.header.chrAliasTable[chr] : chr;
         const features = this.alignmentCache.queryFeatures(queryChr, bpStart, bpEnd);
-        const alignmentContainer = new AlignmentContainer(chr, bpStart, bpEnd, this.samplingWindowSize, this.samplingDepth, this.pairsSupported);
+        const alignmentContainer = new AlignmentContainer(chr, bpStart, bpEnd, this.config);
 
         for (let feature of features) {
           alignmentContainer.push(feature);
@@ -28495,7 +28432,7 @@
         const chrToIndex = await this.getChrIndex();
         const queryChr = this.chrAliasTable.hasOwnProperty(chr) ? this.chrAliasTable[chr] : chr;
         const chrId = chrToIndex[queryChr];
-        const alignmentContainer = new AlignmentContainer(chr, bpStart, bpEnd, this.config.samplingWindowSize, this.config.samplingDepth, this.config.pairsSupported, this.config.alleleFreqThreshold);
+        const alignmentContainer = new AlignmentContainer(chr, bpStart, bpEnd, this.config);
 
         if (chrId === undefined) {
           return alignmentContainer;
@@ -28644,7 +28581,7 @@
 
       async readAlignments(chr, start, end) {
         if (!this.bamReaders.hasOwnProperty(chr)) {
-          return new AlignmentContainer(chr, start, end);
+          return new AlignmentContainer(chr, start, end, this.config);
         } else {
           let reader = this.bamReaders[chr];
           const a = await reader.readAlignments(chr, start, end);
@@ -28716,7 +28653,7 @@
         return igvxhr.loadString(url, buildOptions(self.config)).then(function (sam) {
           var alignmentContainer;
           header.chrToIndex[queryChr];
-          alignmentContainer = new AlignmentContainer(chr, bpStart, bpEnd, self.samplingWindowSize, self.samplingDepth, self.pairsSupported, self.alleleFreqThreshold);
+          alignmentContainer = new AlignmentContainer(chr, bpStart, bpEnd, self.config);
           BamUtils.decodeSamRecords(sam, alignmentContainer, queryChr, bpStart, bpEnd, self.filter);
           return alignmentContainer;
         });
@@ -28926,7 +28863,7 @@
 
         const ba = unbgzf(compressedData.buffer);
         const chrIdx = this.header.chrToIndex[chr];
-        const alignmentContainer = new AlignmentContainer(chr, start, end, this.samplingWindowSize, this.samplingDepth, this.pairsSupported, this.alleleFreqThreshold);
+        const alignmentContainer = new AlignmentContainer(chr, start, end, this.config);
         BamUtils.decodeBamRecords(ba, this.header.size, alignmentContainer, this.header.chrNames, chrIdx, start, end);
         alignmentContainer.finish();
         return alignmentContainer;
@@ -44464,7 +44401,7 @@
         const header = await this.getHeader();
         const queryChr = header.chrAliasTable.hasOwnProperty(chr) ? header.chrAliasTable[chr] : chr;
         const chrIdx = header.chrToIndex[queryChr];
-        const alignmentContainer = new AlignmentContainer(chr, bpStart, bpEnd, this.samplingWindowSize, this.samplingDepth, this.pairsSupported, this.alleleFreqThreshold);
+        const alignmentContainer = new AlignmentContainer(chr, bpStart, bpEnd, this.config);
 
         if (chrIdx === undefined) {
           return alignmentContainer;
@@ -45073,7 +45010,7 @@
             "pageSize": "10000"
           },
           decode: decodeGa4ghReads,
-          results: new AlignmentContainer(chr, bpStart, bpEnd, self.samplingWindowSize, self.samplingDepth, self.pairsSupported, self.alleleFreqThreshold)
+          results: new AlignmentContainer(chr, bpStart, bpEnd, self.config)
         });
       });
 
@@ -45380,7 +45317,6 @@
         const genome = browser.genome;
         this.config = config;
         this.genome = genome;
-        this.alignmentContainer = undefined;
 
         if (isDataURL(config.url)) {
           if ("cram" === config.format) {
@@ -45431,58 +45367,44 @@
       }
 
       setViewAsPairs(bool) {
-
-        if (this.viewAsPairs !== bool) {
-          this.viewAsPairs = bool; // if (this.alignmentContainer) {
-          //     this.alignmentContainer.setViewAsPairs(bool);
-          // }
-        }
+        this.viewAsPairs = bool;
       }
 
       setShowSoftClips(bool) {
-        if (this.showSoftClips !== bool) {
-          this.showSoftClips = bool;
-        }
+        this.showSoftClips = bool;
       }
 
       async getAlignments(chr, bpStart, bpEnd) {
         const genome = this.genome;
         const showSoftClips = this.showSoftClips;
+        const alignmentContainer = await this.bamReader.readAlignments(chr, bpStart, bpEnd);
+        let alignments = alignmentContainer.alignments;
 
-        if (this.alignmentContainer && this.alignmentContainer.contains(chr, bpStart, bpEnd)) {
-          return this.alignmentContainer;
-        } else {
-          const alignmentContainer = await this.bamReader.readAlignments(chr, bpStart, bpEnd);
-          let alignments = alignmentContainer.alignments;
-
-          if (!this.viewAsPairs) {
-            alignments = unpairAlignments([{
-              alignments: alignments
-            }]);
-          }
-
-          const hasAlignments = alignments.length > 0;
-          alignmentContainer.packedAlignmentRows = packAlignmentRows(alignments, alignmentContainer.start, alignmentContainer.end, showSoftClips);
-          alignmentContainer.alignments = undefined; // Don't need to hold onto these anymore
+        if (!this.viewAsPairs) {
+          alignments = unpairAlignments([{
+            alignments: alignments
+          }]);
+        }
 
-          this.alignmentContainer = alignmentContainer;
+        const hasAlignments = alignments.length > 0;
+        alignmentContainer.packedAlignmentRows = packAlignmentRows(alignments, alignmentContainer.start, alignmentContainer.end, showSoftClips);
+        this.alignmentContainer = alignmentContainer;
 
-          if (hasAlignments) {
-            const sequence = await genome.sequence.getSequence(chr, alignmentContainer.start, alignmentContainer.end);
+        if (hasAlignments) {
+          const sequence = await genome.sequence.getSequence(chr, alignmentContainer.start, alignmentContainer.end);
 
-            if (sequence) {
-              alignmentContainer.coverageMap.refSeq = sequence; // TODO -- fix this
+          if (sequence) {
+            alignmentContainer.coverageMap.refSeq = sequence; // TODO -- fix this
 
-              alignmentContainer.sequence = sequence; // TODO -- fix this
+            alignmentContainer.sequence = sequence; // TODO -- fix this
 
-              return alignmentContainer;
-            } else {
-              console.error("No sequence for: " + chr + ":" + alignmentContainer.start + "-" + alignmentContainer.end);
-            }
+            return alignmentContainer;
+          } else {
+            console.error("No sequence for: " + chr + ":" + alignmentContainer.start + "-" + alignmentContainer.end);
           }
-
-          return alignmentContainer;
         }
+
+        return alignmentContainer;
       }
 
     }
@@ -45827,7 +45749,7 @@
       clickedFeatures(clickState, features) {
         // We use the cached features rather than method to avoid async load.  If the
         // feature is not already loaded this won't work,  but the user wouldn't be mousing over it either.
-        if (!features) features = clickState.viewport.getCachedFeatures();
+        if (!features) features = clickState.viewport.cachedFeatures;
 
         if (!features || features.length === 0) {
           return [];
@@ -48466,52 +48388,119 @@
       return regions;
     }
 
+    function sendChords(chords, track, refFrame, alpha) {
+      const chordSetColor = IGVColor.addAlpha("all" === refFrame.chr ? track.color : getChrColor(refFrame.chr), alpha);
+      const trackColor = IGVColor.addAlpha(track.color || 'rgb(0,0,255)', alpha); // name the chord set to include locus and filtering information
+
+      const encodedName = track.name.replaceAll(' ', '%20');
+      const chordSetName = "all" === refFrame.chr ? encodedName : `${encodedName}  ${refFrame.chr}:${refFrame.start}-${refFrame.end}`;
+      track.browser.circularView.addChords(chords, {
+        track: chordSetName,
+        color: chordSetColor,
+        trackColor: trackColor
+      });
+    }
+
     function createCircularView(el, browser) {
       const circularView = new CircularView(el, {
         onChordClick: (feature, chordTrack, pluginManager) => {
           const f1 = feature.data;
           const f2 = f1.mate;
-          const flanking = 2000;
-          const l1 = new Locus({
-            chr: browser.genome.getChromosomeName(f1.refName),
-            start: f1.start,
-            end: f1.end
-          });
-          const l2 = new Locus({
-            chr: browser.genome.getChromosomeName(f2.refName),
-            start: f2.start,
-            end: f2.end
-          });
-          let loci; // If there is overlap with current loci
-
-          loci = browser.currentLoci().map(str => Locus.fromLocusString(str));
-
-          if (loci.some(locus => locus.contains(l1)) || loci.some(locus => locus.contains(l2))) {
-            for (let l of [l1, l2]) {
-              if (!loci.some(locus => {
-                return locus.contains(l);
-              })) {
-                // add flanking
-                l.start = Math.max(0, l.start - flanking);
-                l.end += flanking;
-                loci.push(l);
+          addFrameForFeature(f1);
+          addFrameForFeature(f2);
+
+          function addFrameForFeature(feature) {
+            feature.chr = browser.genome.getChromosomeName(feature.refName);
+
+            for (let referenceFrame of browser.currentReferenceFrames()) {
+              const l = Locus.fromLocusString(referenceFrame.getLocusString());
+
+              if (l.contains(feature)) {
+                break;
+              } else if (l.overlaps(feature)) {
+                referenceFrame.extend(feature);
+                break;
+              } else {
+                const flanking = 2000;
+                const center = (feature.start + feature.end) / 2;
+                browser.addMultiLocusPanel(feature.chr, center - flanking, center + flanking);
+                break;
               }
             }
-          } else {
-            l1.start = Math.max(0, l1.start - flanking);
-            l1.end += flanking;
-            l2.start = Math.max(0, l2.start - flanking);
-            l2.end += flanking;
-            loci = [l1, l2];
           }
-
-          const searchString = loci.map(l => l.getLocusString()).join(" ");
-          browser.search(searchString);
         }
       });
       return circularView;
     }
 
+    class PairedEndStats {
+      constructor(alignments, _ref) {
+        let {
+          minTLENPercentile,
+          maxTLENPercentile
+        } = _ref;
+        this.totalCount = 0;
+        this.frCount = 0;
+        this.rfCount = 0;
+        this.ffCount = 0;
+        this.sumF = 0;
+        this.sumF2 = 0;
+        this.lp = minTLENPercentile === undefined ? 0.1 : minTLENPercentile;
+        this.up = maxTLENPercentile === undefined ? 99.5 : maxTLENPercentile;
+        this.isizes = [];
+        this.compute(alignments);
+      }
+
+      compute(alignments) {
+        for (let alignment of alignments) {
+          if (alignment.isProperPair()) {
+            var tlen = Math.abs(alignment.fragmentLength);
+            this.sumF += tlen;
+            this.sumF2 += tlen * tlen;
+            this.isizes.push(tlen);
+            var po = alignment.pairOrientation;
+
+            if (typeof po === "string" && po.length === 4) {
+              var tmp = '' + po.charAt(0) + po.charAt(2);
+
+              switch (tmp) {
+                case 'FF':
+                case 'RR':
+                  this.ffCount++;
+                  break;
+
+                case "FR":
+                  this.frCount++;
+                  break;
+
+                case "RF":
+                  this.rfCount++;
+              }
+            }
+
+            this.totalCount++;
+          }
+        }
+
+        if (this.ffCount / this.totalCount > 0.9) this.orienation = "ff";else if (this.frCount / this.totalCount > 0.9) this.orienation = "fr";else if (this.rfCount / this.totalCount > 0.9) this.orienation = "rf";
+        this.minTLEN = this.lp === 0 ? 0 : percentile(this.isizes, this.lp);
+        this.maxTLEN = percentile(this.isizes, this.up); // var fMean = this.sumF / this.totalCount
+        // var stdDev = Math.sqrt((this.totalCount * this.sumF2 - this.sumF * this.sumF) / (this.totalCount * this.totalCount))
+        // this.minTLEN = fMean - 3 * stdDev
+        // this.maxTLEN = fMean + 3 * stdDev
+      }
+
+    }
+
+    function percentile(array, p) {
+      if (array.length === 0) return undefined;
+      var k = Math.floor(array.length * (p / 100));
+      array.sort(function (a, b) {
+        return a - b;
+      });
+      return array[k];
+    }
+
     /*
      * The MIT License (MIT)
      *
@@ -48571,10 +48560,7 @@
         this.showInsertions = false !== config.showInsertions;
         this.showMismatches = false !== config.showMismatches;
         this.color = config.color;
-        this.coverageColor = config.coverageColor;
-        this.minFragmentLength = config.minFragmentLength; // Optional, might be undefined
-
-        this.maxFragmentLength = config.maxFragmentLength || 1000; // The sort object can be an array in the case of multi-locus view, however if multiple sort positions
+        this.coverageColor = config.coverageColor; // The sort object can be an array in the case of multi-locus view, however if multiple sort positions
         // are present for a given reference frame the last one will take precedence
 
         if (config.sort) {
@@ -48602,12 +48588,22 @@
         return this._height;
       }
 
+      get minTemplateLength() {
+        const configMinTLEN = this.config.minTLEN !== undefined ? this.config.minTLEN : this.config.minFragmentLength;
+        return configMinTLEN !== undefined ? configMinTLEN : this._pairedEndStats ? this._pairedEndStats.minTLEN : 0;
+      }
+
+      get maxTemplateLength() {
+        const configMaxTLEN = this.config.maxTLEN !== undefined ? this.config.maxTLEN : this.config.maxFragmentLength;
+        return configMaxTLEN !== undefined ? configMaxTLEN : this._pairedEndStats ? this._pairedEndStats.maxTLEN : 1000;
+      }
+
       sort(options) {
         options = this.assignSort(options);
 
         for (let vp of this.trackView.viewports) {
           if (vp.containsPosition(options.chr, options.position)) {
-            const alignmentContainer = vp.getCachedFeatures();
+            const alignmentContainer = vp.cachedFeatures;
 
             if (alignmentContainer) {
               sortAlignmentRows(options, alignmentContainer);
@@ -48642,16 +48638,16 @@
       async getFeatures(chr, bpStart, bpEnd, bpPerPixel, viewport) {
         const alignmentContainer = await this.featureSource.getAlignments(chr, bpStart, bpEnd);
 
-        if (alignmentContainer.alignments && alignmentContainer.alignments.length > 99) {
-          if (undefined === this.minFragmentLength) {
-            this.minFragmentLength = alignmentContainer.pairedEndStats.lowerFragmentLength;
-          }
+        if (alignmentContainer.paired && !this._pairedEndStats && !this.config.maxFragmentLength) {
+          const pairedEndStats = new PairedEndStats(alignmentContainer.alignments, this.config);
 
-          if (undefined === this.maxFragmentLength) {
-            this.maxFragmentLength = alignmentContainer.pairedEndStats.upperFragmentLength;
+          if (pairedEndStats.totalCount > 99) {
+            this._pairedEndStats = pairedEndStats;
           }
         }
 
+        alignmentContainer.alignments = undefined; // Don't need to hold onto these anymore
+
         const sort = this.sortObject;
 
         if (sort) {
@@ -48756,7 +48752,7 @@
             label: 'pair orientation'
           });
           colorByMenuItems.push({
-            key: 'fragmentLength',
+            key: 'tlen',
             label: 'insert size (TLEN)'
           });
           colorByMenuItems.push({
@@ -48867,7 +48863,7 @@
               this.trackView.repaintViews();
             }
           });
-        } // Experimental JBrowse feature
+        } // Add chords to JBrowse circular view, if present
 
 
         if (this.browser.circularView && true === this.browser.circularViewVisible && (this.alignmentTrack.hasPairs || this.alignmentTrack.hasSupplemental)) {
@@ -48877,26 +48873,9 @@
             menuItems.push({
               label: 'Add discordant pairs to circular view',
               click: () => {
-                const maxFragmentLength = this.maxFragmentLength;
-                const inView = [];
-
                 for (let viewport of this.trackView.viewports) {
-                  for (let a of viewport.getCachedFeatures().allAlignments()) {
-                    const referenceFrame = viewport.referenceFrame;
-
-                    if (a.end >= referenceFrame.start && a.start <= referenceFrame.end && a.mate && a.mate.chr && (a.mate.chr !== a.chr || Math.max(a.fragmentLength) > maxFragmentLength)) {
-                      inView.push(a);
-                    }
-                  }
+                  this.addPairedChordsForViewport(viewport);
                 }
-
-                this.browser.circularViewVisible = true;
-                const chords = makePairedAlignmentChords(inView);
-                const color = IGVColor.addAlpha(this.color || 'rgb(0,0,255)', 0.02);
-                this.browser.circularView.addChords(chords, {
-                  track: this.name,
-                  color: color
-                });
               }
             });
           }
@@ -48905,25 +48884,9 @@
             menuItems.push({
               label: 'Add split reads to circular view',
               click: () => {
-                const inView = [];
-
                 for (let viewport of this.trackView.viewports) {
-                  for (let a of viewport.getCachedFeatures().allAlignments()) {
-                    const referenceFrame = viewport.referenceFrame;
-                    const sa = a.hasTag('SA');
-
-                    if (a.end >= referenceFrame.start && a.start <= referenceFrame.end && sa) {
-                      inView.push(a);
-                    }
-                  }
+                  this.addSplitChordsForViewport(viewport);
                 }
-
-                const chords = makeSupplementalAlignmentChords(inView);
-                const color = IGVColor.addAlpha(this.color || 'rgb(0,0,255)', 0.1);
-                this.browser.circularView.addChords(chords, {
-                  track: this.name,
-                  color: color
-                });
               }
             });
           }
@@ -49042,7 +49005,7 @@
       }
 
       getCachedAlignmentContainers() {
-        return this.trackView.viewports.map(vp => vp.getCachedFeatures());
+        return this.trackView.viewports.map(vp => vp.cachedFeatures);
       }
 
       get dataRange() {
@@ -49068,6 +49031,56 @@
       set autoscale(autoscale) {
         this.coverageTrack.autoscale = autoscale;
       }
+      /**
+       * Add chords to the circular view for the given viewport, represented by its reference frame
+       * @param refFrame
+       */
+
+
+      addPairedChordsForViewport(viewport) {
+        const maxTemplateLength = this.maxTemplateLength;
+        const inView = [];
+        const refFrame = viewport.referenceFrame;
+
+        for (let a of viewport.cachedFeatures.allAlignments()) {
+          if (a.end >= refFrame.start && a.start <= refFrame.end && a.mate && a.mate.chr && (a.mate.chr !== a.chr || Math.max(a.fragmentLength) > maxTemplateLength)) {
+            inView.push(a);
+          }
+        }
+
+        const chords = makePairedAlignmentChords(inView);
+        sendChords(chords, this, refFrame, 0.02); // const chordSetColor = IGVColor.addAlpha("all" === refFrame.chr ? this.color : getChrColor(refFrame.chr), 0.02)
+        // const trackColor = IGVColor.addAlpha(this.color || 'rgb(0,0,255)', 0.02)
+        //
+        // // name the chord set to include track name and locus
+        // const encodedName = this.name.replaceAll(' ', '%20')
+        // const chordSetName = "all" === refFrame.chr ? encodedName :
+        //     `${encodedName} (${refFrame.chr}:${refFrame.start}-${refFrame.end}`
+        // this.browser.circularView.addChords(chords, {name: chordSetName, color: chordSetColor, trackColor: trackColor})
+      }
+
+      addSplitChordsForViewport(viewport) {
+        const inView = [];
+        const refFrame = viewport.referenceFrame;
+
+        for (let a of viewport.cachedFeatures.allAlignments()) {
+          const sa = a.hasTag('SA');
+
+          if (a.end >= refFrame.start && a.start <= refFrame.end && sa) {
+            inView.push(a);
+          }
+        }
+
+        const chords = makeSupplementalAlignmentChords(inView);
+        sendChords(chords, this, refFrame, 0.02); // const chordSetColor = IGVColor.addAlpha("all" === refFrame.chr ? this.color : getChrColor(refFrame.chr), 0.02)
+        // const trackColor = IGVColor.addAlpha(this.color || 'rgb(0,0,255)', 0.02)
+        //
+        // // name the chord set to include track name and locus
+        // const encodedName = this.name.replaceAll(' ', '%20')
+        // const chordSetName = "all" === refFrame.chr ? encodedName :
+        //     `${encodedName} (${refFrame.chr}:${refFrame.start}-${refFrame.end}`
+        // this.browser.circularView.addChords(chords, {name: chordSetName, color: chordSetColor, trackColor: trackColor})
+      }
 
     }
 
@@ -49178,7 +49191,7 @@
       }
 
       getClickedObject(clickState) {
-        let features = clickState.viewport.getCachedFeatures();
+        let features = clickState.viewport.cachedFeatures;
         if (!features || features.length === 0) return;
         const genomicLocation = Math.floor(clickState.genomicLocation);
         const coverageMap = features.coverageMap;
@@ -49264,14 +49277,14 @@
         this.deletionColor = config.deletionColor || "black";
         this.skippedColor = config.skippedColor || "rgb(150, 170, 170)";
         this.pairConnectorColor = config.pairConnectorColor;
-        this.smallFragmentLengthColor = config.smallFragmentLengthColor || "rgb(0, 0, 150)";
-        this.largeFragmentLengthColor = config.largeFragmentLengthColor || "rgb(200, 0, 0)";
+        this.smallTLENColor = config.smallTLENColor || config.smallFragmentLengthColor || "rgb(0, 0, 150)";
+        this.largeTLENColor = config.largeTLENColor || config.largeFragmentLengthColor || "rgb(200, 0, 0)";
         this.pairOrientation = config.pairOrienation || 'fr';
         this.pairColors = {};
         this.pairColors["RL"] = config.rlColor || "rgb(0, 150, 0)";
         this.pairColors["RR"] = config.rrColor || "rgb(20, 50, 200)";
         this.pairColors["LL"] = config.llColor || "rgb(0, 150, 150)";
-        this.colorBy = config.colorBy || "pairOrientation";
+        this.colorBy = config.colorBy || "unexpectedPair";
         this.colorByTag = config.colorByTag ? config.colorByTag.toUpperCase() : undefined;
         this.bamColorTag = config.bamColorTag === undefined ? "YC" : config.bamColorTag;
         this.hideSmallIndels = config.hideSmallIndels;
@@ -49626,7 +49639,7 @@
             direction: direction
           };
           this.parent.sortObject = newSortObject;
-          sortAlignmentRows(newSortObject, viewport.getCachedFeatures());
+          sortAlignmentRows(newSortObject, viewport.cachedFeatures);
           viewport.repaint();
         };
 
@@ -49678,7 +49691,7 @@
                   };
                   this.sortByTag = tag;
                   this.parent.sortObject = newSortObject;
-                  sortAlignmentRows(newSortObject, viewport.getCachedFeatures());
+                  sortAlignmentRows(newSortObject, viewport.cachedFeatures);
                   viewport.repaint();
                 }
               }
@@ -49702,8 +49715,12 @@
                     const referenceFrame = clickState.viewport.referenceFrame;
 
                     if (this.browser.genome.getChromosome(clickedAlignment.mate.chr)) {
-                      this.highlightedAlignmentReadNamed = clickedAlignment.readName;
-                      this.browser.presentMultiLocusPanel(clickedAlignment, referenceFrame);
+                      this.highlightedAlignmentReadNamed = clickedAlignment.readName; //this.browser.presentMultiLocusPanel(clickedAlignment, referenceFrame)
+
+                      const bpWidth = referenceFrame.end - referenceFrame.start;
+                      const frameStart = clickedAlignment.mate.position - bpWidth / 2;
+                      const frameEnd = clickedAlignment.mate.position + bpWidth / 2;
+                      this.browser.addMultiLocusPanel(clickedAlignment.mate.chr, frameStart, frameEnd, referenceFrame);
                     } else {
                       Alert.presentAlert(`Reference does not contain chromosome: ${clickedAlignment.mate.chr}`);
                     }
@@ -49751,20 +49768,7 @@
             list.push({
               label: 'Add discordant pairs to circular view',
               click: () => {
-                const maxFragmentLength = this.parent.maxFragmentLength;
-                const {
-                  referenceFrame
-                } = viewport;
-                const inView = viewport.getCachedFeatures().allAlignments().filter(a => {
-                  return a.end >= referenceFrame.start && a.start <= referenceFrame.end && a.mate && a.mate.chr && (a.mate.chr !== a.chr || Math.max(a.fragmentLength) > maxFragmentLength);
-                });
-                this.browser.circularViewVisible = true;
-                const chords = makePairedAlignmentChords(inView);
-                const color = IGVColor.addAlpha(this.parent.color || 'rgb(0,0,255)', 0.02);
-                this.browser.circularView.addChords(chords, {
-                  track: this.parent.name,
-                  color: color
-                });
+                this.parent.addPairedChordsForViewport(viewport);
               }
             });
           }
@@ -49773,23 +49777,7 @@
             list.push({
               label: 'Add split reads to circular view',
               click: () => {
-                const inView = [];
-
-                for (let a of viewport.getCachedFeatures().allAlignments()) {
-                  const referenceFrame = viewport.referenceFrame;
-                  const sa = a.hasTag('SA');
-
-                  if (a.end >= referenceFrame.start && a.start <= referenceFrame.end && sa) {
-                    inView.push(a);
-                  }
-                }
-
-                const chords = makeSupplementalAlignmentChords(inView);
-                const color = IGVColor.addAlpha(this.color || 'rgb(0,0,255)', 0.1);
-                this.browser.circularView.addChords(chords, {
-                  track: this.name,
-                  color: color
-                });
+                this.parent.addSplitChordsForViewport(viewport);
               }
             });
           }
@@ -49805,7 +49793,7 @@
         const y = clickState.y;
         const genomicLocation = clickState.genomicLocation;
         const showSoftClips = this.parent.showSoftClips;
-        let features = viewport.getCachedFeatures();
+        let features = viewport.cachedFeatures;
         if (!features || features.length === 0) return;
         let packedAlignmentRows = features.packedAlignmentRows;
         let downsampledIntervals = features.downsampledIntervals;
@@ -49891,13 +49879,16 @@
               break;
             }
 
+          case "tlen":
           case "fragmentLength":
-            if (alignment.mate && alignment.isMateMapped() && alignment.mate.chr !== alignment.chr) {
-              color = getChrColor(alignment.mate.chr);
-            } else if (this.parent.minFragmentLength && Math.abs(alignment.fragmentLength) < this.parent.minFragmentLength) {
-              color = this.smallFragmentLengthColor;
-            } else if (this.parent.maxFragmentLength && Math.abs(alignment.fragmentLength) > this.parent.maxFragmentLength) {
-              color = this.largeFragmentLengthColor;
+            if (alignment.mate && alignment.isMateMapped()) {
+              if (alignment.mate.chr !== alignment.chr) {
+                color = getChrColor(alignment.mate.chr);
+              } else if (this.parent.minTemplateLength && Math.abs(alignment.fragmentLength) < this.parent.minTemplateLength) {
+                color = this.smallTLENColor;
+              } else if (this.parent.maxTemplateLength && Math.abs(alignment.fragmentLength) > this.parent.maxTemplateLength) {
+                color = this.largeTLENColor;
+              }
             }
 
             break;
@@ -49939,10 +49930,7 @@
       alignmentContainer.packedAlignmentRows.sort(function (rowA, rowB) {
         const i = rowA.score > rowB.score ? 1 : rowA.score < rowB.score ? -1 : 0;
         return true === direction ? i : -i;
-      }); // For debugging
-      // for(let r of alignmentContainer.packedAlignmentRows) {
-      //     console.log(r.score);
-      // }
+      });
     }
 
     function shadedBaseColor(qual, baseColor) {
@@ -50097,7 +50085,7 @@
         });
         this.$viewport.append(this.$rulerLabel);
         this.$rulerLabel.click(async () => {
-          await this.browser.selectMultiLocusPanel(this.referenceFrame); // const removals = this.browser.referenceFrameList.filter(r => this.referenceFrame !== r)
+          await this.browser.gotoMultilocusPanel(this.referenceFrame); // const removals = this.browser.referenceFrameList.filter(r => this.referenceFrame !== r)
           // for (let referenceFrame of removals) {
           //     await this.browser.removeMultiLocusPanel(referenceFrame)
           // }
@@ -50412,7 +50400,7 @@
           referenceFrame.start = ss;
           referenceFrame.end = ee;
           referenceFrame.bpPerPixel = (ee - ss) / width;
-          this.browser.updateViews(referenceFrame, this.browser.trackViews, true);
+          this.browser.updateViews(true);
         }
 
         this.boundClickHandler = clickHandler.bind(this);
@@ -51289,7 +51277,9 @@
 
       repaintViews() {
         for (let viewport of this.viewports) {
-          viewport.repaint();
+          if (viewport.isVisible()) {
+            viewport.repaint();
+          }
         }
 
         if (typeof this.track.paintAxis === 'function') {
@@ -51313,6 +51303,9 @@
       }
       /**
        * Update viewports to reflect current genomic state, possibly loading additional data.
+       *
+       * @param force - if true, force a repaint even if no new data is loaded
+       * @returns {Promise<void>}
        */
 
 
@@ -51328,7 +51321,7 @@
         } // rpv: viewports whose image (canvas) does not fully cover current genomic range
 
 
-        const reloadableViewports = this.viewportsToReload(force); // Trigger viewport to load features needed to cover current genomic range
+        const reloadableViewports = force ? visibleViewports : this.viewportsToReload(); // Trigger viewport to load features needed to cover current genomic range
         // NOTE: these must be loaded synchronously, do not user Promise.all,  not all file readers are thread safe
 
         for (let viewport of reloadableViewports) {
@@ -51336,7 +51329,7 @@
         }
 
         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)
+        // 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)
 
@@ -51344,8 +51337,8 @@
           let maxRow = 0;
 
           for (let viewport of this.viewports) {
-            if (viewport.tile && viewport.tile.features) {
-              maxRow = Math.max(maxRow, viewport.tile.features.reduce((a, f) => Math.max(a, f.row || 0), 0));
+            if (viewport.featureCache && viewport.featureCache.features) {
+              maxRow = Math.max(maxRow, viewport.featureCache.features.reduce((a, f) => Math.max(a, f.row || 0), 0));
             }
           }
 
@@ -51368,14 +51361,14 @@
             const start = referenceFrame.start;
             const end = start + referenceFrame.toBP($$1(visibleViewport.contentDiv).width());
 
-            if (visibleViewport.tile && visibleViewport.tile.features) {
-              if (typeof visibleViewport.tile.features.getMax === 'function') {
-                const max = visibleViewport.tile.features.getMax(start, end);
+            if (visibleViewport.featureCache && visibleViewport.featureCache.features) {
+              if (typeof visibleViewport.featureCache.features.getMax === 'function') {
+                const max = visibleViewport.featureCache.features.getMax(start, end);
                 allFeatures.push({
                   value: max
                 });
               } else {
-                allFeatures = allFeatures.concat(FeatureUtils.findOverlapping(visibleViewport.tile.features, start, end));
+                allFeatures = allFeatures.concat(FeatureUtils.findOverlapping(visibleViewport.featureCache.features, start, end));
               }
             }
           }
@@ -51385,16 +51378,22 @@
           } else {
             this.track.dataRange = doAutoscale(allFeatures);
           }
-        } // Must repaint all viewports if autoscaling
+        } // Must repaint all viewports if autoscaling.  Always repaint ruler.
 
 
-        if (!isDragging && (this.track.autoscale || this.track.autoscaleGroup)) {
-          for (let visibleViewport of visibleViewports) {
-            visibleViewport.repaint();
+        if (this.track.autoscale || this.track.autoscaleGroup || this.track.type === 'ruler' || force) {
+          for (let vp of visibleViewports) {
+            vp.repaint();
           }
         } else {
-          for (let vp of reloadableViewports) {
-            vp.repaint();
+          const reloadedViewports = new Set(reloadableViewports);
+
+          for (let vp of visibleViewports) {
+            const invalid = vp.canvas && vp.canvas._data && vp.canvas._data.invalidate;
+
+            if (invalid || reloadedViewports.has(vp)) {
+              vp.repaint();
+            }
           }
         }
 
@@ -51422,13 +51421,13 @@
        */
 
 
-      async getInViewFeatures(force) {
+      async getInViewFeatures() {
         if (!(this.browser && this.browser.referenceFrameList)) {
           return [];
         } // List of viewports that need reloading
 
 
-        const rpV = this.viewportsToReload(force);
+        const rpV = this.viewportsToReload();
         const promises = rpV.map(function (vp) {
           return vp.loadFeatures();
         });
@@ -51436,18 +51435,18 @@
         let allFeatures = [];
 
         for (let vp of this.viewports) {
-          if (vp.tile && vp.tile.features) {
+          if (vp.featureCache && vp.featureCache.features) {
             const referenceFrame = vp.referenceFrame;
             const start = referenceFrame.start;
             const end = start + referenceFrame.toBP($$1(vp.contentDiv).width());
 
-            if (typeof vp.tile.features.getMax === 'function') {
-              const max = vp.tile.features.getMax(start, end);
+            if (typeof vp.featureCache.features.getMax === 'function') {
+              const max = vp.featureCache.features.getMax(start, end);
               allFeatures.push({
                 value: max
               });
             } else {
-              allFeatures = allFeatures.concat(FeatureUtils.findOverlapping(vp.tile.features, start, end));
+              allFeatures = allFeatures.concat(FeatureUtils.findOverlapping(vp.featureCache.features, start, end));
             }
           }
         }
@@ -51504,7 +51503,7 @@
             const start = referenceFrame.start;
             const end = start + referenceFrame.toBP($$1(viewport.contentDiv).width());
             const bpPerPixel = referenceFrame.bpPerPixel;
-            return force || !viewport.tile || viewport.tile.invalidate || !viewport.tile.containsRange(chr, start, end, bpPerPixel);
+            return !viewport.featureCache || !viewport.featureCache.containsRange(chr, start, end, bpPerPixel);
           }
         });
         return viewports;
@@ -56314,7 +56313,7 @@
         this.genome = genome;
         this.sourceType = config.sourceType === undefined ? "file" : config.sourceType;
         this.maxWGCount = config.maxWGCount || DEFAULT_MAX_WG_COUNT;
-        const queryableFormats = new Set(["bigwig", "bw", "bigbed", "bb", "tdf"]);
+        const queryableFormats = new Set(["bigwig", "bw", "bigbed", "bb", "biginteract", "tdf"]);
 
         if (config.features && Array.isArray(config.features)) {
           // Explicit array of features
@@ -56326,7 +56325,7 @@
           }
 
           this.queryable = false;
-          this.featureCache = new FeatureCache(features, genome);
+          this.featureCache = new FeatureCache$1(features, genome);
         } else if (config.reader) {
           // Explicit reader implementation
           this.reader = config.reader;
@@ -56497,13 +56496,13 @@
           } // Note - replacing previous cache with new one.  genomicInterval is optional (might be undefined => includes all features)
 
 
-          this.featureCache = new FeatureCache(features, this.genome, genomicInterval); // If track is marked "searchable"< cache features by name -- use this with caution, memory intensive
+          this.featureCache = new FeatureCache$1(features, this.genome, genomicInterval); // If track is marked "searchable"< cache features by name -- use this with caution, memory intensive
 
           if (this.config.searchable || this.config.searchableFields) {
             this.addFeaturesToDB(features);
           }
         } else {
-          this.featureCache = new FeatureCache([], genomicInterval); // Empty cache
+          this.featureCache = new FeatureCache$1([], genomicInterval); // Empty cache
         }
       }
 
@@ -56727,8 +56726,8 @@
 
     //table chromatinInteract
 
-    function getDecoder(definedFieldCount, fieldCount, autoSql) {
-      if (autoSql && 'chromatinInteract' === autoSql.table) {
+    function getDecoder(definedFieldCount, fieldCount, autoSql, format) {
+      if (autoSql && 'chromatinInteract' === autoSql.table || "biginteract" === format) {
         return decodeInteract;
       } else {
         const standardFieldCount = definedFieldCount - 3;
@@ -56863,6 +56862,7 @@
     class BWReader {
       constructor(config, genome) {
         this.path = config.url;
+        this.format = config.format || "bigwig";
         this.genome = genome;
         this.rpTreeCache = {};
         this.config = config;
@@ -57441,7 +57441,7 @@
     function getBedDataDecoder() {
       const minSize = 3 * 4 + 1; // Minimum # of bytes required for a bed record
 
-      const decoder = getDecoder(this.header.definedFieldCount, this.header.fieldCount, this.autoSql);
+      const decoder = getDecoder(this.header.definedFieldCount, this.header.fieldCount, this.autoSql, this.format);
       return function (data, chrIdx1, bpStart, chrIdx2, bpEnd, featureArray, chrDict) {
         const binaryParser = new BinaryParser(data);
 
@@ -58361,7 +58361,7 @@
     function FeatureSource(config, genome) {
       const format = config.format ? config.format.toLowerCase() : undefined;
 
-      if ('bigwig' === format || 'bigbed' === format || 'bb' === format) {
+      if ('bigwig' === format || 'bigbed' === format || 'bb' === format || "biginteract" === format) {
         return new BWSource(config, genome);
       } else if ("tdf" === format) {
         return new TDFSource(config, genome);
@@ -59273,14 +59273,12 @@
         this.featureType = 'numeric';
         this.paintAxis = paintAxis;
         const format = config.format ? config.format.toLowerCase() : config.format;
+        this.flipAxis = config.flipAxis ? config.flipAxis : false;
+        this.logScale = config.logScale ? config.logScale : false;
 
         if ("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);
@@ -60057,7 +60055,7 @@
 
         const sortHandler = sort => {
           const viewport = clickState.viewport;
-          const features = viewport.getCachedFeatures();
+          const features = viewport.cachedFeatures;
           this.sortSamples(sort.chr, sort.start, sort.end, sort.direction, features);
         };
 
@@ -60163,10 +60161,16 @@
      * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
      * THE SOFTWARE.
      */
+    /**
+     * Represents 2 or more wig tracks overlaid on a common viewport.
+     */
 
     class MergedTrack extends TrackBase {
       constructor(config, browser) {
         super(config, browser);
+        this.type = "merged";
+        this.featureType = 'numeric';
+        this.paintAxis = paintAxis;
       }
 
       init(config) {
@@ -60177,21 +60181,6 @@
         super.init(config);
       }
 
-      get height() {
-        return this._height;
-      }
-
-      set height(h) {
-        this._height = h;
-
-        if (this.tracks) {
-          for (let t of this.tracks) {
-            t.height = h;
-            t.config.height = h;
-          }
-        }
-      }
-
       async postInit() {
         this.tracks = [];
         const p = [];
@@ -60213,45 +60202,83 @@
           }
         }
 
-        this.height = this.config.height || 100;
+        this.flipAxis = this.config.flipAxis ? this.config.flipAxis : false;
+        this.logScale = this.config.logScale ? this.config.logScale : false;
+        this.autoscale = this.config.autoscale || this.config.max === undefined;
+
+        if (!this.autoscale) {
+          this.dataRange = {
+            min: this.config.min || 0,
+            max: this.config.max
+          };
+        }
+
+        for (let t of this.tracks) {
+          t.autoscale = false;
+          t.dataRange = this.dataRange;
+        }
+
+        this.height = this.config.height || 50;
         return Promise.all(p);
       }
 
+      get height() {
+        return this._height;
+      }
+
+      set height(h) {
+        this._height = h;
+
+        if (this.tracks) {
+          for (let t of this.tracks) {
+            t.height = h;
+            t.config.height = h;
+          }
+        }
+      }
+
+      menuItemList() {
+        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 getFeatures(chr, bpStart, bpEnd, bpPerPixel) {
         const promises = this.tracks.map(t => t.getFeatures(chr, bpStart, bpEnd, bpPerPixel));
         return Promise.all(promises);
       }
 
       draw(options) {
-        var i, len, mergedFeatures, trackOptions, dataRange;
-        mergedFeatures = options.features; // Array of feature arrays, 1 for each track
+        const mergedFeatures = options.features; // Array of feature arrays, 1 for each track
 
-        dataRange = autoscale(options.referenceFrame.chr, mergedFeatures); //IGVGraphics.fillRect(options.context, 0, options.pixelTop, options.pixelWidth, options.pixelHeight, {'fillStyle': "rgb(255, 255, 255)"});
+        if (this.autoscale) {
+          this.dataRange = autoscale(options.referenceFrame.chr, mergedFeatures);
+        }
 
-        for (i = 0, len = this.tracks.length; i < len; i++) {
-          trackOptions = Object.assign({}, options);
+        for (let i = 0, len = this.tracks.length; i < len; i++) {
+          const trackOptions = Object.assign({}, options);
           trackOptions.features = mergedFeatures[i];
-          this.tracks[i].dataRange = dataRange;
+          this.tracks[i].dataRange = this.dataRange;
+          this.tracks[i].flipAxis = this.flipAxis;
+          this.tracks[i].logScale = this.logScale;
+          this.tracks[i].graphType = this.graphType;
           this.tracks[i].draw(trackOptions);
         }
       }
 
-      paintAxis(ctx, pixelWidth, pixelHeight) {
-        var i, len, autoscale, track;
-        autoscale = true; // Hardcoded for now
-
-        for (i = 0, len = this.tracks.length; i < len; i++) {
-          track = this.tracks[i];
-
-          if (typeof track.paintAxis === 'function') {
-            track.paintAxis(ctx, pixelWidth, pixelHeight);
-            if (autoscale) break;
-          }
-        }
-      }
-
       popupData(clickState, features) {
-        const featuresArray = features || clickState.viewport.getCachedFeatures();
+        const featuresArray = features || clickState.viewport.cachedFeatures;
 
         if (featuresArray && featuresArray.length === this.tracks.length) {
           // Array of feature arrays, 1 for each track
@@ -60269,39 +60296,23 @@
       }
 
       supportsWholeGenome() {
-        const b = this.tracks.every(track => track.supportsWholeGenome());
-        return b;
+        return this.tracks.every(track => track.supportsWholeGenome());
       }
 
     }
 
     function autoscale(chr, featureArrays) {
-      var min = 0,
-          max = -Number.MAX_VALUE;
-     // if (chr === 'all') {
-      //     allValues = [];
-      //     featureArrays.forEach(function (features) {
-      //         features.forEach(function (f) {
-      //             if (!Number.isNaN(f.value)) {
-      //                 allValues.push(f.value);
-      //             }
-      //         });
-      //     });
-      //
-      //     min = Math.min(0, IGVMath.percentile(allValues, .1));
-      //     max = IGVMath.percentile(allValues, 99.9);
-      //
-      // }
-      // else {
+      let min = 0;
+      let max = -Number.MAX_VALUE;
 
-      featureArrays.forEach(function (features, i) {
-        features.forEach(function (f) {
+      for (let features of featureArrays) {
+        for (let f of features) {
           if (typeof f.value !== 'undefined' && !Number.isNaN(f.value)) {
             min = Math.min(min, f.value);
             max = Math.max(max, f.value);
           }
-        });
-      }); //  }
+        }
+      }
 
       return {
         min: min,
@@ -60885,20 +60896,21 @@
         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;
+        if (inView.length === 0) return;
         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
-        });
+        const chords = makeBedPEChords(inView);
+        sendChords(chords, this, refFrame, 0.5); //
+        //
+        // // 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 locus and 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) {
@@ -60985,7 +60997,7 @@
       clickedFeatures(clickState, features) {
         // We use the cached features rather than method to avoid async load.  If the
         // feature is not already loaded this won't work,  but the user wouldn't be mousing over it either.
-        const featureList = features || clickState.viewport.getCachedFeatures();
+        const featureList = features || clickState.viewport.cachedFeatures;
         const candidates = [];
 
         if (featureList) {
@@ -61571,7 +61583,7 @@
             variantColor = "gray";
           }
         } else if (this._color) {
-          variantColor = typeof this._color === "function" ? this._color(v) : this._color;
+          variantColor = this.color;
         } else if ("NONVARIANT" === v.type) {
           variantColor = this.nonRefColor;
         } else if ("MIXED" === v.type) {
@@ -61583,6 +61595,10 @@
         return variantColor;
       }
 
+      get color() {
+        return this._color ? typeof this._color === "function" ? this._color(v) : this._color : this.defaultColor;
+      }
+
       clickedFeatures(clickState, features) {
         let featureList = super.clickedFeatures(clickState, features);
         const vGap = this.displayMode === 'EXPANDED' ? this.expandedVGap : this.squishedVGap;
@@ -61848,24 +61864,10 @@
           menuItems.push({
             label: 'Add SVs 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.sendChordsForViewport(viewport);
               }
-
-              const chords = makeVCFChords(inView);
-              const color = IGVColor.addAlpha(this._color || this.defaultColor, 0.5);
-              this.browser.circularView.addChords(chords, {
-                track: this.name,
-                color: color
-              });
             }
           });
         }
@@ -61881,20 +61883,20 @@
           list.push({
             label: 'Add SVs 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);
-              const chords = makeVCFChords(inView);
-              const color = IGVColor.addAlpha(this._color || this.defaultColor, 0.5);
-              this.browser.circularView.addChords(chords, {
-                track: this.name,
-                color: color
-              });
+              this.sendChordsForViewport(viewport);
             }
           });
           list.push('<hr/>');
           return list;
         }
       }
+
+      sendChordsForViewport(viewport) {
+        const refFrame = viewport.referenceFrame;
+        const inView = "all" === refFrame.chr ? this.featureSource.getAllFeatures() : this.featureSource.featureCache.queryFeatures(refFrame.chr, refFrame.start, refFrame.end);
+        const chords = makeVCFChords(inView);
+        sendChords(chords, this, refFrame, 0.5);
+      }
       /**
        * Create a "color by" checkbox menu item, optionally initially checked
        * @param menuItem
@@ -62197,7 +62199,7 @@
 
 
       popupData(clickState) {
-        let features = clickState.viewport.getCachedFeatures();
+        let features = clickState.viewport.cachedFeatures;
         if (!features || features.length === 0) return [];
         const tolerance = 3;
         const tissue = this.name;
@@ -62543,7 +62545,7 @@
       popupData(clickState) {
         let data = [];
         const track = clickState.viewport.trackView.track;
-        const features = clickState.viewport.getCachedFeatures();
+        const features = clickState.viewport.cachedFeatures;
 
         if (features) {
           let count = 0;
@@ -63232,7 +63234,7 @@
         if (!this.featureCache) {
           const options = buildOptions(this.config);
           const data = await igvxhr.loadString(this.config.url, options);
-          this.featureCache = new FeatureCache(parseBP(data), genome);
+          this.featureCache = new FeatureCache$1(parseBP(data), genome);
           return this.featureCache.queryFeatures(chr, start, end);
         } else {
           return this.featureCache.queryFeatures(chr, start, end);
@@ -64475,6 +64477,15 @@
         this.id = guid$2();
       }
 
+      extend(locus) {
+        const newStart = Math.min(locus.start, this.start);
+        const newEnd = Math.max(locus.end, this.end);
+        const ratio = (newEnd - newStart) / (this.end - this.start);
+        this.start = newStart;
+        this.end = newEnd;
+        this.bpPerPixel *= ratio;
+      }
+
       calculateEnd(pixels) {
         return this.start + this.bpPerPixel * pixels;
       }
@@ -64559,7 +64570,7 @@
         const viewChanged = start !== this.start || bpPerPixel !== this.bpPerPixel;
 
         if (viewChanged) {
-          await browser.updateViews(this);
+          await browser.updateViews(true);
         }
       }
 
@@ -66524,7 +66535,12 @@
           }
         }
 
-        await this.loadTrackList(trackConfigurations);
+        await this.loadTrackList(trackConfigurations); // The ruler track is not explicitly loaded, but needs updated nonetheless.
+
+        for (let rtv of this.trackViews.filter(tv => tv.track.type === 'ruler')) {
+          rtv.updateViews();
+        }
+
         this.updateUIWithReferenceFrameList();
       }
 
@@ -66689,26 +66705,22 @@
       }
 
       async loadTrackList(configList) {
-        try {
-          const promises = [];
-
-          for (let config of configList) {
-            promises.push(this.loadTrack(config, false));
-          }
+        const promises = [];
 
-          const loadedTracks = await Promise.all(promises);
-          const groupAutoscaleViews = this.trackViews.filter(function (trackView) {
-            return trackView.track.autoscaleGroup;
-          });
+        for (let config of configList) {
+          promises.push(this.loadTrack(config));
+        }
 
-          if (groupAutoscaleViews.length > 0) {
-            this.updateViews(groupAutoscaleViews);
-          }
+        const loadedTracks = await Promise.all(promises);
+        const groupAutoscaleViews = this.trackViews.filter(function (trackView) {
+          return trackView.track.autoscaleGroup;
+        });
 
-          return loadedTracks;
-        } finally {
-          await this.resize();
+        if (groupAutoscaleViews.length > 0) {
+          this.updateViews();
         }
+
+        return loadedTracks;
       }
 
       async loadROI(config) {
@@ -66722,7 +66734,9 @@
           }
         } else {
           this.roi.push(new ROI(config, this.genome));
-        }
+        } // Force reload all views (force = true) to insure ROI features are loaded.  Wasteful but this function is
+        // rarely called.
+
 
         await this.updateViews(true);
       }
@@ -66736,7 +66750,7 @@
         }
 
         for (let tv of this.trackViews) {
-          tv.updateViews(true);
+          tv.repaintViews();
         }
       }
 
@@ -66744,7 +66758,7 @@
         this.roi = [];
 
         for (let tv of this.trackViews) {
-          tv.updateViews(true);
+          tv.repaintViews();
         }
       }
 
@@ -66760,25 +66774,13 @@
       /**
        * Return a promise to load a track.
        *
-       * Each track is associated with the following DOM elements
-       *
-       *      leftHandGutter  - div on the left for track controls and legend
-       *      contentDiv  - a div element wrapping all the track content.  Height can be > viewportDiv height
-       *      viewportDiv - a div element through which the track is viewed.  This might have a vertical scrollbar
-       *      canvas     - canvas element upon which the track is drawn.  Child of contentDiv
-       *
-       * The width of all elements should be equal.  Height of the viewportDiv is controlled by the user, but never
-       * greater than the contentDiv height.   Height of contentDiv and canvas are equal, and governed by the data
-       * loaded.
-       *
-       *
        * @param config
        * @param doResize - undefined by default
        * @returns {*}
        */
 
 
-      async loadTrack(config, doResize) {
+      async loadTrack(config) {
         // config might be json
         if (isString$3(config)) {
           config = JSON.parse(config);
@@ -66843,11 +66845,6 @@
 
           msg += ": " + config.url;
           Alert.presentAlert(new Error(msg), undefined);
-        } finally {
-          // TODO: If loadTrack() is called individually - not via loadTrackList() - call this.resize()
-          if (false === doResize) ; else {
-            await this.resize();
-          }
         }
       }
       /**
@@ -67080,40 +67077,7 @@
           this.navbarManager.navbarDidResize(this.$navigation.width(), isWGV);
         }
 
-        await this.resize();
-      }
-
-      async resize() {
-        const viewportWidth = this.calculateViewportWidth(this.referenceFrameList.length);
-
-        for (let referenceFrame of this.referenceFrameList) {
-          const index = this.referenceFrameList.indexOf(referenceFrame);
-          const {
-            chr,
-            genome
-          } = referenceFrame;
-          const {
-            bpLength
-          } = genome.getChromosome(referenceFrame.chr);
-          const viewportWidthBP = referenceFrame.toBP(viewportWidth); // viewportWidthBP > bpLength occurs when locus is full chromosome and user widens browser
-
-          if (GenomeUtils.isWholeGenomeView(chr) || viewportWidthBP > bpLength) {
-            // console.log(`${ Date.now() } Recalc referenceFrame(${ index }) bpp. viewport ${ StringUtils.numberFormatter(viewportWidthBP) } > ${ StringUtils.numberFormatter(bpLength) }.`)
-            referenceFrame.bpPerPixel = bpLength / viewportWidth;
-          } else {
-            // console.log(`${ Date.now() } Recalc referenceFrame(${ index }) end.`)
-            referenceFrame.end = referenceFrame.start + referenceFrame.toBP(viewportWidth);
-          }
-
-          for (let {
-            viewports
-          } of this.trackViews) {
-            viewports[index].setWidth(viewportWidth);
-          }
-        }
-
-        await this.updateViews(true);
-        this.updateUIWithReferenceFrameList();
+        await resize.call(this);
       }
 
       async updateViews(force) {
@@ -67189,6 +67153,12 @@
         }
       }
 
+      repaintViews() {
+        for (let trackView of this.trackViews) {
+          trackView.repaintViews();
+        }
+      }
+
       updateLocusSearchWidget() {
         const referenceFrameList = this.referenceFrameList; // Update end position of reference frames based on pixel widths.  This is hacky, but its been done here
         // for a long time, although indirectly.
@@ -67280,7 +67250,54 @@
         }
 
         this.centerLineList = this.createCenterLineList(this.columnContainer);
-        await this.resize();
+        await resize.call(this);
+      }
+      /**
+       * Add a new multi-locus panel for the specified region
+       * @param chr
+       * @param start
+       * @param end
+       * @param referenceFrameLeft - optional, if supplied new panel should be placed to the immediate right
+       */
+
+
+      async addMultiLocusPanel(chr, start, end, referenceFrameLeft) {
+        // account for reduced viewport width as a result of adding right mate pair panel
+        const viewportWidth = this.calculateViewportWidth(1 + this.referenceFrameList.length);
+        const scaleFactor = this.calculateViewportWidth(this.referenceFrameList.length) / this.calculateViewportWidth(1 + this.referenceFrameList.length);
+
+        for (let refFrame of this.referenceFrameList) {
+          refFrame.bpPerPixel *= scaleFactor;
+        }
+
+        const bpp = (end - start) / viewportWidth;
+        const newReferenceFrame = new ReferenceFrame(this.genome, chr, start, end, bpp);
+        const indexLeft = referenceFrameLeft ? this.referenceFrameList.indexOf(referenceFrameLeft) : this.referenceFrameList.length - 1;
+        const indexRight = 1 + indexLeft; // TODO -- this is really ugly
+
+        const {
+          $viewport
+        } = this.trackViews[0].viewports[indexLeft];
+        const viewportColumn = viewportColumnManager.insertAfter($viewport.get(0).parentElement);
+
+        if (indexRight === this.referenceFrameList.length) {
+          this.referenceFrameList.push(newReferenceFrame);
+
+          for (let trackView of this.trackViews) {
+            const viewport = createViewport(trackView, viewportColumn, newReferenceFrame);
+            trackView.viewports.push(viewport);
+          }
+        } else {
+          this.referenceFrameList.splice(indexRight, 0, newReferenceFrame);
+
+          for (let trackView of this.trackViews) {
+            const viewport = createViewport(trackView, viewportColumn, newReferenceFrame);
+            trackView.viewports.splice(indexRight, 0, viewport);
+          }
+        }
+
+        this.centerLineList = this.createCenterLineList(this.columnContainer);
+        resize.call(this);
       }
 
       async removeMultiLocusPanel(referenceFrame) {
@@ -67309,8 +67326,15 @@
         const scaleFactor = this.calculateViewportWidth(1 + this.referenceFrameList.length) / this.calculateViewportWidth(this.referenceFrameList.length);
         await this.rescaleForMultiLocus(scaleFactor);
       }
+      /**
+       * Goto the locus represented by the selected referenceFrame, discarding all other panels
+       *
+       * @param referenceFrame
+       * @returns {Promise<void>}
+       */
 
-      async selectMultiLocusPanel(referenceFrame) {
+
+      async gotoMultilocusPanel(referenceFrame) {
         const referenceFrameIndex = this.referenceFrameList.indexOf(referenceFrame); // Remove columns for unselected panels
 
         this.columnContainer.querySelectorAll('.igv-column').forEach((column, c) => {
@@ -67358,7 +67382,7 @@
 
         this.centerLineList = this.createCenterLineList(this.columnContainer);
         this.updateUIWithReferenceFrameList();
-        await this.updateViews(true);
+        await this.updateViews();
       }
       /**
        * @deprecated  This is a deprecated method with no known usages.  To be removed in a future release.
@@ -67612,18 +67636,9 @@
         return surl;
       }
 
-      currentLoci() {
-        const loci = [];
+      currentReferenceFrames() {
         const anyTrackView = this.trackViews[0];
-
-        for (let {
-          referenceFrame
-        } of anyTrackView.viewports) {
-          const locusString = referenceFrame.getLocusString();
-          loci.push(locusString);
-        }
-
-        return loci;
+        return anyTrackView.viewports.map(vp => vp.referenceFrame);
       }
       /**
        * Record a mouse click on a specific viewport.   This might be the start of a drag operation.   Dragging
@@ -67736,12 +67751,9 @@
       }
 
       addWindowResizeHandler() {
-        this.boundWindowResizeHandler = windowResizeHandler.bind(this);
+        // Create a copy of the prototype "resize" function bound to this instance.  Neccessary to support removing.
+        this.boundWindowResizeHandler = resize.bind(this);
         window.addEventListener('resize', this.boundWindowResizeHandler);
-
-        function windowResizeHandler() {
-          this.resize();
-        }
       }
 
       removeWindowResizeHandler() {
@@ -67835,6 +67847,47 @@
       }
 
     }
+    /**
+     * Function called win window is resized, or visibility changed (e.g. "show" from a tab).  This is a function rather
+     * than class method because it needs to be copied and bound to specific instances of browser to support listener
+     * removal
+     *
+     * @returns {Promise<void>}
+     */
+
+
+    async function resize() {
+      const viewportWidth = this.calculateViewportWidth(this.referenceFrameList.length);
+
+      for (let referenceFrame of this.referenceFrameList) {
+        const index = this.referenceFrameList.indexOf(referenceFrame);
+        const {
+          chr,
+          genome
+        } = referenceFrame;
+        const {
+          bpLength
+        } = genome.getChromosome(referenceFrame.chr);
+        const viewportWidthBP = referenceFrame.toBP(viewportWidth); // viewportWidthBP > bpLength occurs when locus is full chromosome and user widens browser
+
+        if (GenomeUtils.isWholeGenomeView(chr) || viewportWidthBP > bpLength) {
+          // console.log(`${ Date.now() } Recalc referenceFrame(${ index }) bpp. viewport ${ StringUtils.numberFormatter(viewportWidthBP) } > ${ StringUtils.numberFormatter(bpLength) }.`)
+          referenceFrame.bpPerPixel = bpLength / viewportWidth;
+        } else {
+          // console.log(`${ Date.now() } Recalc referenceFrame(${ index }) end.`)
+          referenceFrame.end = referenceFrame.start + referenceFrame.toBP(viewportWidth);
+        }
+
+        for (let {
+          viewports
+        } of this.trackViews) {
+          viewports[index].setWidth(viewportWidth);
+        }
+      }
+
+      this.updateUIWithReferenceFrameList();
+      await this.updateViews(true);
+    }
 
     function handleMouseMove(e) {
       e.preventDefault();