igv 2.11.0 → 2.11.1

package/dist/igv.esm.js

@@ -17624,7 +17624,7 @@ function Node(interval) {
  * @constructor
  */
 
-class FeatureCache {
+class FeatureCache$1 {
 
     constructor(featureList, genome, range) {
 
@@ -19091,7 +19091,7 @@ function createMenuElements$1(itemList, popover) {
 
 function embedCSS$2() {
 
-    var css =  '.igv-ui-popover {\n  cursor: default;\n  position: absolute;\n  z-index: 2048;\n  border-color: #7F7F7F;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: 1px;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: small;\n  background-color: white; }\n  .igv-ui-popover > div:first-child {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n    height: 24px;\n    cursor: move;\n    border-top-left-radius: 4px;\n    border-top-right-radius: 4px;\n    border-bottom-color: #7F7F7F;\n    border-bottom-style: solid;\n    border-bottom-width: thin;\n    background-color: #eee; }\n    .igv-ui-popover > div:first-child > div:first-child {\n      margin-left: 4px; }\n    .igv-ui-popover > div:first-child > div:last-child {\n      margin-right: 4px;\n      height: 12px;\n      width: 12px;\n      color: #7F7F7F; }\n    .igv-ui-popover > div:first-child > div:last-child:hover {\n      cursor: pointer;\n      color: #444; }\n  .igv-ui-popover > div:last-child {\n    overflow-y: auto;\n    overflow-x: hidden;\n    max-height: 400px;\n    max-width: 800px;\n    background-color: white; }\n    .igv-ui-popover > div:last-child > div {\n      -webkit-user-select: all;\n      /* Chrome/Safari */\n      -moz-user-select: all;\n      /* Firefox */\n      margin-left: 4px;\n      margin-right: 4px;\n      min-width: 220px;\n      overflow-x: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap; }\n      .igv-ui-popover > div:last-child > div > span {\n        font-weight: bolder; }\n    .igv-ui-popover > div:last-child hr {\n      width: 100%; }\n\n.igv-ui-alert-dialog-container {\n  box-sizing: content-box;\n  position: absolute;\n  z-index: 2048;\n  top: 50%;\n  left: 50%;\n  width: 400px;\n  height: 200px;\n  border-color: #7F7F7F;\n  border-radius: 4px;\n  border-style: solid;\n  border-width: thin;\n  outline: none;\n  font-family: \"Open Sans\", sans-serif;\n  font-size: 15px;\n  font-weight: 400;\n  background-color: white;\n  display: flex;\n  flex-flow: column;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  align-items: center; }\n  .igv-ui-alert-dialog-container > div:first-child {\n    display: flex;\n    flex-flow: row;\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    align-items: center;\n    width: 100%;\n    height: 24px;\n    cursor: move;\n    border-top-left-radius: 4px;\n    border-top-right-radius: 4px;\n    border-bottom-color: #7F7F7F;\n    border-bottom-style: solid;\n    border-bottom-width: thin;\n    background-color: #eee; }\n    .igv-ui-alert-dialog-container > div:first-child div:first-child {\n      padding-left: 8px; }\n  .igv-ui-alert-dialog-container .igv-ui-alert-dialog-body {\n    color: #373737;\n    width: 100%;\n    height: calc(100% - 24px - 64px);\n    overflow-y: scroll; }\n    .igv-ui-alert-dialog-container .igv-ui-alert-dialog-body .igv-ui-alert-dialog-body-copy {\n      cursor: pointer;\n      margin: 16px;\n      width: auto;\n      height: auto;\n      overflow-wrap: break-word;\n      word-break: break-word;\n      -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');
@@ -19711,6 +19711,7 @@ const knownFileExtensions = new Set([
     "vcf",
     "bb",
     "bigbed",
+    "biginteract",
     "bw",
     "bigwig",
     "bam",
@@ -19861,6 +19862,7 @@ function inferTrackType(config) {
             case "bed":
             case "bigbed":
             case "bb":
+            case "biginteract":
                 return "bedtype"
             default:
                 return "annotation"
@@ -20586,14 +20588,13 @@ class Viewport {
         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();
@@ -20609,12 +20610,11 @@ class Viewport {
     }
 
     setContentHeight(contentHeight) {
+
         // 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() {
@@ -20631,8 +20631,6 @@ class Viewport {
 
     setWidth(width) {
         this.$viewport.width(width);
-        this.canvas.style.width = (`${width}px`);
-        this.canvas.setAttribute('width', width);
     }
 
     getWidth() {
@@ -22759,7 +22757,7 @@ const Cytoband = function (start, end, name, typestain) {
     }
 };
 
-const _version = "2.11.0";
+const _version = "2.11.1";
 function version() {
     return _version
 }
@@ -23294,17 +23292,21 @@ class TrackViewport extends Viewport {
     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))
+                    (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
         }
@@ -23314,7 +23316,8 @@ class TrackViewport extends Viewport {
                 // 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();
 
@@ -23331,21 +23334,19 @@ class TrackViewport extends Viewport {
         }
 
         return true
-
-
     }
 
+    /**
+     * Adjust the canvas to the current genomic state.
+     */
     shift() {
-        const self = this;
-        const referenceFrame = self.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";
+        const referenceFrame = this.referenceFrame;
+        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";
         }
     }
 
@@ -23368,22 +23369,23 @@ class TrackViewport extends Viewport {
         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) {
-                    const f = await
-                        r.getFeatures(chr, bpStart, bpEnd, referenceFrame.bpPerPixel);
+                    const f = await r.getFeatures(chr, bpStart, bpEnd, referenceFrame.bpPerPixel);
                     roiFeatures.push({track: r, features: f});
                 }
             }
 
-            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) {
@@ -23397,25 +23399,31 @@ class TrackViewport extends Viewport {
         }
     }
 
-    async repaint() {
+    /**
+     * Repaint the canvas for the current genomic state.
+     *
+     * @returns {Promise<void>}
+     */
+    repaint() {
 
-        if (undefined === this.tile) {
+        if (undefined === this.featureCache) {
             return
         }
 
-        let {features, roiFeatures, bpPerPixel, startBP, endBP} = this.tile;
+        let {features, 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;
 
+        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
@@ -23475,17 +23483,27 @@ class TrackViewport extends Viewport {
 
         this.draw(drawConfiguration, features, roiFeatures);
 
-        this.canvasVerticalRange = {top: canvasTop, bottom: canvasTop + pixelHeight};
+        // 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 }.`)
@@ -23502,60 +23520,6 @@ class TrackViewport extends Viewport {
         }
     }
 
-    // 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) {
         if (this.referenceFrame.chr === chr && position >= this.referenceFrame.start) {
             return position <= this.referenceFrame.calculateEnd(this.getWidth())
@@ -23568,11 +23532,12 @@ class TrackViewport extends Viewport {
         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;
@@ -23702,26 +23667,25 @@ class TrackViewport extends Viewport {
                 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
@@ -23959,9 +23923,7 @@ class TrackViewport extends Viewport {
                 lastClickTime = time;
 
             }
-
         }
-
     }
 
     removeViewportClickHandler(viewport) {
@@ -24025,16 +23987,10 @@ function mouseUpHandler(event) {
 function createClickState(event, viewport) {
 
     const referenceFrame = viewport.referenceFrame;
-
     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,
@@ -24095,22 +24051,30 @@ function formatPopoverText(nameValues) {
     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 {
 
-Tile.prototype.containsRange = function (chr, start, end, bpPerPixel) {
-    return this.bpPerPixel === bpPerPixel && start >= this.startBP && end <= this.endBP && chr === this.chr
-};
+    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.overlapsRange = function (chr, start, end) {
-    return this.chr === chr && end >= this.startBP && start <= this.endBP
-};
+    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
+    }
+
+    overlapsRange(chr, start, end) {
+        return this.chr === chr && end >= this.startBP && start <= this.endBP
+    }
+}
 
 
 /**
@@ -24417,6 +24381,18 @@ class PairedAlignment {
         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()) {
@@ -24758,7 +24734,10 @@ function packAlignmentRows(alignments, start, end, showSoftClips) {
 
 
 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, {samplingWindowSize, samplingDepth, pairsSupported, alleleFreqThreshold}) {
 
         this.chr = chr;
         this.start = Math.floor(start);
@@ -24786,17 +24765,12 @@ class AlignmentContainer {
             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)) {
@@ -24828,8 +24802,6 @@ class AlignmentContainer {
 
         this.pairsCache = undefined;
         this.downsampledReads = undefined;
-
-        this.pairedEndStats.compute();
     }
 
     contains(chr, start, end) {
@@ -25140,69 +25112,6 @@ class DownsampledInterval {
     }
 }
 
-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) {
@@ -26392,7 +26301,7 @@ class BamReaderNonIndexed {
             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);
             }
@@ -26419,13 +26328,13 @@ class BamReaderNonIndexed {
         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);
         }
@@ -27416,9 +27325,7 @@ class BamReader {
         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
@@ -27550,7 +27457,7 @@ class ShardedBamReader {
     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];
@@ -27641,7 +27548,7 @@ BamWebserviceReader.prototype.readAlignments = function (chr, bpStart, bpEnd) {
 
                     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);
 
@@ -27895,7 +27802,7 @@ class HtsgetBamReader extends HtsgetReader {
         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();
 
@@ -28061,8 +27968,7 @@ class CramReader {
         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
@@ -28678,7 +28584,7 @@ Ga4ghAlignmentReader.prototype.readAlignments = function (chr, bpStart, bpEnd) {
                     "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)
             })
         })
 
@@ -29011,7 +28917,6 @@ class BamSource {
 
         this.config = config;
         this.genome = genome;
-        this.alignmentContainer = undefined;
 
         if (isDataURL(config.url)) {
             if ("cram" === config.format) {
@@ -29059,19 +28964,11 @@ class BamSource {
     }
 
     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) {
@@ -29079,33 +28976,28 @@ class BamSource {
         const genome = this.genome;
         const showSoftClips = this.showSoftClips;
 
-        if (this.alignmentContainer && this.alignmentContainer.contains(chr, bpStart, bpEnd)) {
-            return this.alignmentContainer
+        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);
 
-        } 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
-
-            this.alignmentContainer = alignmentContainer;
-
-            if (hasAlignments) {
-                const sequence = await genome.sequence.getSequence(chr, alignmentContainer.start, alignmentContainer.end);
-                if (sequence) {
-                    alignmentContainer.coverageMap.refSeq = sequence;    // TODO -- fix this
-                    alignmentContainer.sequence = sequence;           // TODO -- fix this
-                    return alignmentContainer
-                } else {
-                    console.error("No sequence for: " + chr + ":" + alignmentContainer.start + "-" + alignmentContainer.end);
-                }
+        this.alignmentContainer = alignmentContainer;
+
+        if (hasAlignments) {
+            const sequence = await genome.sequence.getSequence(chr, alignmentContainer.start, alignmentContainer.end);
+            if (sequence) {
+                alignmentContainer.coverageMap.refSeq = 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
         }
+        return alignmentContainer
+
     }
 }
 
@@ -29423,7 +29315,7 @@ class TrackBase {
 
         // 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 []
@@ -29927,8 +29819,7 @@ class Locus {
     }
 
     overlaps(locus) {
-        return locus.chr === this.chr
-            && !(locus.end < this.start || locus.start > this.end)
+        return locus.chr === this.chr && !(locus.end < this.start || locus.start > this.end)
     }
 
     extend(l) {
@@ -31805,6 +31696,19 @@ function makeCircViewChromosomes(genome) {
     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) {
 
@@ -31814,42 +31718,102 @@ function createCircularView(el, browser) {
 
             const f1 = feature.data;
             const f2 = f1.mate;
-            const flanking = 2000;
+            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
+                    }
+                }
+            }
+        }
+    });
 
-            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});
+    return circularView
+}
 
-            let loci;
+class PairedEndStats {
 
-            // If there is overlap with current loci
+    constructor(alignments, {minTLENPercentile, maxTLENPercentile}) {
+        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);
+    }
 
-            loci = browser.currentLoci().map(str => Locus.fromLocusString(str));
+    compute(alignments) {
 
-            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);
+        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++;
                     }
                 }
-            } 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];
+                this.totalCount++;
             }
-
-            const searchString = loci.map(l => l.getLocusString()).join(" ");
-            browser.search(searchString);
         }
+
+        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]
 
-    return circularView
 }
 
 /*
@@ -31916,8 +31880,6 @@ class BAMTrack extends TrackBase {
         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
         // are present for a given reference frame the last one will take precedence
@@ -31945,12 +31907,24 @@ class BAMTrack extends TrackBase {
         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);
                     vp.repaint();
@@ -31985,14 +31959,13 @@ class BAMTrack extends TrackBase {
 
         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 (undefined === this.maxFragmentLength) {
-                this.maxFragmentLength = alignmentContainer.pairedEndStats.upperFragmentLength;
+        if (alignmentContainer.paired && !this._pairedEndStats && !this.config.maxFragmentLength) {
+            const pairedEndStats = new PairedEndStats(alignmentContainer.alignments, this.config);
+            if (pairedEndStats.totalCount > 99) {
+                this._pairedEndStats = pairedEndStats;
             }
         }
+        alignmentContainer.alignments = undefined;  // Don't need to hold onto these anymore
 
         const sort = this.sortObject;
         if (sort) {
@@ -32089,7 +32062,7 @@ class BAMTrack extends TrackBase {
         if (this.alignmentTrack.hasPairs) {
             colorByMenuItems.push({key: 'firstOfPairStrand', label: 'first-of-pair strand'});
             colorByMenuItems.push({key: 'pairOrientation', label: 'pair orientation'});
-            colorByMenuItems.push({key: 'fragmentLength', label: 'insert size (TLEN)'});
+            colorByMenuItems.push({key: 'tlen', label: 'insert size (TLEN)'});
             colorByMenuItems.push({key: 'unexpectedPair', label: 'pair orientation & insert size (TLEN)'});
         }
         const tagLabel = 'tag' + (this.alignmentTrack.colorByTag ? ' (' + this.alignmentTrack.colorByTag + ')' : '');
@@ -32195,7 +32168,7 @@ class BAMTrack extends TrackBase {
             });
         }
 
-        // 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)) {
             menuItems.push('<hr/>');
@@ -32203,24 +32176,9 @@ class BAMTrack extends TrackBase {
                 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});
                     }
                 });
             }
@@ -32228,19 +32186,9 @@ class BAMTrack extends TrackBase {
                 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});
                     }
                 });
             }
@@ -32352,7 +32300,7 @@ class BAMTrack extends TrackBase {
     }
 
     getCachedAlignmentContainers() {
-        return this.trackView.viewports.map(vp => vp.getCachedFeatures())
+        return this.trackView.viewports.map(vp => vp.cachedFeatures)
     }
 
     get dataRange() {
@@ -32378,6 +32326,62 @@ class BAMTrack extends TrackBase {
     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})
+    }
 }
 
 
@@ -32498,7 +32502,7 @@ class CoverageTrack {
 
     getClickedObject(clickState) {
 
-        let features = clickState.viewport.getCachedFeatures();
+        let features = clickState.viewport.cachedFeatures;
         if (!features || features.length === 0) return
 
         const genomicLocation = Math.floor(clickState.genomicLocation);
@@ -32574,8 +32578,8 @@ class AlignmentTrack {
         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 = {};
@@ -32583,7 +32587,7 @@ class AlignmentTrack {
         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;
 
@@ -32975,7 +32979,7 @@ class AlignmentTrack {
                 direction: direction
             };
             this.parent.sortObject = newSortObject;
-            sortAlignmentRows(newSortObject, viewport.getCachedFeatures());
+            sortAlignmentRows(newSortObject, viewport.cachedFeatures);
             viewport.repaint();
         };
         list.push('<b>Sort by...</b>');
@@ -33005,7 +33009,7 @@ class AlignmentTrack {
                                 };
                                 this.sortByTag = tag;
                                 this.parent.sortObject = newSortObject;
-                                sortAlignmentRows(newSortObject, viewport.getCachedFeatures());
+                                sortAlignmentRows(newSortObject, viewport.cachedFeatures);
                                 viewport.repaint();
                             }
                         }
@@ -33032,7 +33036,11 @@ class AlignmentTrack {
                                 const referenceFrame = clickState.viewport.referenceFrame;
                                 if (this.browser.genome.getChromosome(clickedAlignment.mate.chr)) {
                                     this.highlightedAlignmentReadNamed = clickedAlignment.readName;
-                                    this.browser.presentMultiLocusPanel(clickedAlignment, referenceFrame);
+                                    //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}`);
                                 }
@@ -33080,19 +33088,7 @@ class AlignmentTrack {
                 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);
                     }
                 });
             }
@@ -33100,17 +33096,7 @@ class AlignmentTrack {
                 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);
                     }
                 });
             }
@@ -33129,7 +33115,7 @@ class AlignmentTrack {
 
         const showSoftClips = this.parent.showSoftClips;
 
-        let features = viewport.getCachedFeatures();
+        let features = viewport.cachedFeatures;
         if (!features || features.length === 0) return
 
         let packedAlignmentRows = features.packedAlignmentRows;
@@ -33220,14 +33206,17 @@ class AlignmentTrack {
                     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
 
@@ -33269,11 +33258,6 @@ function sortAlignmentRows(options, alignmentContainer) {
         return true === direction ? i : -i
     });
 
-    // For debugging
-    // for(let r of alignmentContainer.packedAlignmentRows) {
-    //     console.log(r.score);
-    // }
-
 }
 
 function shadedBaseColor(qual, baseColor) {
@@ -33433,7 +33417,7 @@ class RulerViewport extends TrackViewport {
 
         this.$rulerLabel.click(async () => {
 
-            await this.browser.selectMultiLocusPanel(this.referenceFrame);
+            await this.browser.gotoMultilocusPanel(this.referenceFrame);
 
             // const removals = this.browser.referenceFrameList.filter(r => this.referenceFrame !== r)
             // for (let referenceFrame of removals) {
@@ -33771,7 +33755,7 @@ class IdeogramViewport extends TrackViewport {
             referenceFrame.end = ee;
             referenceFrame.bpPerPixel = (ee - ss) / width;
 
-            this.browser.updateViews(referenceFrame, this.browser.trackViews, true);
+            this.browser.updateViews(true);
 
         }
 
@@ -34369,15 +34353,11 @@ const colorPickerExclusionTypes = new Set(['ruler', 'sequence', 'ideogram']);
 class TrackView {
 
     constructor(browser, columnContainer, track) {
-
         this.namespace = `trackview-${guid$2()}`;
-
         this.browser = browser;
         this.track = track;
         track.trackView = this;
-
         this.addDOMToColumnContainer(browser, columnContainer, browser.referenceFrameList);
-
     }
 
     /**
@@ -34540,19 +34520,14 @@ class TrackView {
         if (false === colorPickerExclusionTypes.has(this.track.type)) {
 
             const trackColors = [];
-
             const color = this.track.color || this.track.defaultColor;
-
             if (isString$3(color)) {
                 trackColors.push(color);
             }
-
             if (this.track.altColor && isString$3(this.track.altColor)) {
                 trackColors.push(this.track.altColor);
             }
-
             const defaultColors = trackColors.map(c => c.startsWith("#") ? c : c.startsWith("rgb(") ? IGVColor.rgbToHex(c) : IGVColor.colorNameToHex(c));
-
             const colorHandlers =
                 {
                     color: color => {
@@ -34565,7 +34540,6 @@ class TrackView {
                     }
 
                 };
-
             this.browser.genericColorPicker.configure(defaultColors, colorHandlers);
             this.browser.genericColorPicker.setActiveColorHandler(key);
             this.browser.genericColorPicker.show();
@@ -34579,7 +34553,6 @@ class TrackView {
             if (this.track.minHeight) {
                 newHeight = Math.max(this.track.minHeight, newHeight);
             }
-
             if (this.track.maxHeight) {
                 newHeight = Math.min(this.track.maxHeight, newHeight);
             }
@@ -34674,7 +34647,9 @@ class TrackView {
     repaintViews() {
 
         for (let viewport of this.viewports) {
-            viewport.repaint();
+            if(viewport.isVisible()) {
+                viewport.repaint();
+            }
         }
 
         if (typeof this.track.paintAxis === 'function') {
@@ -34701,6 +34676,9 @@ class TrackView {
 
     /**
      * 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>}
      */
     async updateViews(force) {
 
@@ -34718,24 +34696,24 @@ class TrackView {
         }
 
         // rpv: viewports whose image (canvas) does not fully cover current genomic range
-        const reloadableViewports = this.viewportsToReload(force);
+        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) {
             await viewport.loadFeatures();
         }
-        
+
         if (this.disposed) return   // Track was removed during load
 
-        // Very special case for variant tracks in multilocus view.  The # of rows to allocate to the variant (site)
+        // Special case for variant tracks in multilocus view.  The # of rows to allocate to the variant (site)
         // section depends on data from all the views.  We only need to adjust this however if any data was loaded
         // (i.e. reloadableViewports.length > 0)
         if (this.track && typeof this.track.variantRowCount === 'function' && reloadableViewports.length > 0) {
             let maxRow = 0;
             for (let viewport of this.viewports) {
-                if (viewport.tile && viewport.tile.features) {
-                    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));
                 }
             }
             const current = this.track.nVariantRows;
@@ -34747,19 +34725,18 @@ class TrackView {
             }
         }
 
-
         if (this.track.autoscale) {
             let allFeatures = [];
             for (let visibleViewport of visibleViewports) {
                 const referenceFrame = visibleViewport.referenceFrame;
                 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));
                     }
                 }
             }
@@ -34770,14 +34747,18 @@ class TrackView {
             }
         }
 
-        // Must repaint all viewports if autoscaling
-        if (!isDragging && (this.track.autoscale || this.track.autoscaleGroup)) {
-            for (let visibleViewport of visibleViewports) {
-                visibleViewport.repaint();
+        // Must repaint all viewports if autoscaling.  Always repaint ruler.
+        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();
+                }
             }
         }
 
@@ -34808,14 +34789,14 @@ class TrackView {
     /**
      * Return a promise to get all in-view features.  Used for group autoscaling.
      */
-    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()
         });
@@ -34824,16 +34805,16 @@ class TrackView {
 
         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));
                 }
             }
         }
@@ -34889,7 +34870,7 @@ class TrackView {
                 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
@@ -39662,7 +39643,7 @@ class TextFeatureSource {
         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
@@ -39672,7 +39653,7 @@ class TextFeatureSource {
                 mapProperties(features, config.mappings);
             }
             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;
@@ -39839,14 +39820,14 @@ class TextFeatureSource {
             }
 
             // Note - replacing previous cache with new one.  genomicInterval is optional (might be undefined => includes all features)
-            this.featureCache = new FeatureCache(features, this.genome, genomicInterval);
+            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
         }
     }
 
@@ -40084,9 +40065,9 @@ class BufferedReader {
 
 //table chromatinInteract
 
-function getDecoder(definedFieldCount, fieldCount, autoSql) {
+function getDecoder(definedFieldCount, fieldCount, autoSql, format) {
 
-    if (autoSql && 'chromatinInteract' === autoSql.table) {
+    if (autoSql && 'chromatinInteract' === autoSql.table || "biginteract" === format) {
         return decodeInteract
     } else {
         const standardFieldCount = definedFieldCount - 3;
@@ -40233,6 +40214,7 @@ class BWReader {
 
     constructor(config, genome) {
         this.path = config.url;
+        this.format = config.format || "bigwig";
         this.genome = genome;
         this.rpTreeCache = {};
         this.config = config;
@@ -40833,7 +40815,7 @@ function decodeWigData(data, chrIdx1, bpStart, chrIdx2, bpEnd, featureArray, chr
 function getBedDataDecoder() {
 
     const minSize = 3 * 4 + 1;   // Minimum # of bytes required for a bed record
-    const decoder = getDecoder(this.header.definedFieldCount, this.header.fieldCount, this.autoSql);
+    const decoder = getDecoder(this.header.definedFieldCount, this.header.fieldCount, this.autoSql, this.format);
     return function (data, chrIdx1, bpStart, chrIdx2, bpEnd, featureArray, chrDict) {
         const binaryParser = new BinaryParser(data);
         while (binaryParser.remLength() >= minSize) {
@@ -41701,7 +41683,7 @@ function zoomLevelForScale(chr, bpPerPixel, genome) {
 function FeatureSource(config, genome) {
 
     const format = config.format ? config.format.toLowerCase() : undefined;
-    if ('bigwig' === format || 'bigbed' === format || 'bb' === format) {
+    if ('bigwig' === format || 'bigbed' === format || 'bb' === format || "biginteract" === format) {
         return new BWSource(config, genome)
     } else if ("tdf" === format) {
         return new TDFSource(config, genome)
@@ -42648,13 +42630,11 @@ class WigTrack extends TrackBase {
         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);
@@ -42706,7 +42686,7 @@ class WigTrack extends TrackBase {
         let items = [];
         if (this.flipAxis !== undefined) {
             items.push({
-                label:"Flip y-axis",
+                label: "Flip y-axis",
                 click: () => {
                     this.flipAxis = !this.flipAxis;
                     this.trackView.repaintViews();
@@ -43434,7 +43414,7 @@ class SegTrack extends TrackBase {
 
         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);
         };
 
@@ -43552,10 +43532,16 @@ const MUT_COLORS = {
  * 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) {
@@ -43566,21 +43552,6 @@ class MergedTrack extends TrackBase {
         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 = [];
@@ -43600,11 +43571,55 @@ class MergedTrack extends TrackBase {
             }
         }
 
-        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) {
 
@@ -43614,44 +43629,26 @@ class MergedTrack extends TrackBase {
 
     draw(options) {
 
-        var i, len, mergedFeatures, trackOptions, dataRange;
-
-        mergedFeatures = options.features;    // Array of feature arrays, 1 for each track
-
-        dataRange = autoscale(options.referenceFrame.chr, mergedFeatures);
+        const mergedFeatures = options.features;    // Array of feature arrays, 1 for each track
 
-        //IGVGraphics.fillRect(options.context, 0, options.pixelTop, options.pixelWidth, options.pixelHeight, {'fillStyle': "rgb(255, 255, 255)"});
-
-        for (i = 0, len = this.tracks.length; i < len; i++) {
+        if (this.autoscale) {
+            this.dataRange = autoscale(options.referenceFrame.chr, mergedFeatures);
+        }
 
-            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
@@ -43669,41 +43666,22 @@ class MergedTrack extends TrackBase {
 
 
     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 {
-    featureArrays.forEach(function (features, i) {
-        features.forEach(function (f) {
+    let min = 0;
+    let max = -Number.MAX_VALUE;
+    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, max: max}
 }
 
@@ -44245,21 +44223,23 @@ class InteractionTrack extends TrackBase {
 
         // 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});
+        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) {
@@ -44324,7 +44304,7 @@ class InteractionTrack extends TrackBase {
 
         // 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) {
             const proportional = (this.arcType === "proportional" || this.arcType === "inView" || this.arcType === "partialInView");
@@ -44850,7 +44830,7 @@ class VariantTrack extends TrackBase {
             }
 
         } 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) {
@@ -44861,6 +44841,10 @@ class VariantTrack extends TrackBase {
         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);
@@ -45093,19 +45077,9 @@ class VariantTrack extends TrackBase {
             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});
                 }
             });
         }
@@ -45124,13 +45098,7 @@ class VariantTrack extends TrackBase {
             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);
                 }
             });
 
@@ -45140,6 +45108,15 @@ class VariantTrack extends TrackBase {
     }
 
 
+    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
@@ -45436,7 +45413,7 @@ class EqtlTrack extends TrackBase {
      */
     popupData(clickState) {
 
-        let features = clickState.viewport.getCachedFeatures();
+        let features = clickState.viewport.cachedFeatures;
         if (!features || features.length === 0) return []
 
         const tolerance = 3;
@@ -45766,7 +45743,7 @@ class GWASTrack extends TrackBase {
 
         let data = [];
         const track = clickState.viewport.trackView.track;
-        const features = clickState.viewport.getCachedFeatures();
+        const features = clickState.viewport.cachedFeatures;
 
         if (features) {
             let count = 0;
@@ -46449,7 +46426,7 @@ class RNAFeatureSource {
 
             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)
 
@@ -47731,6 +47708,15 @@ class ReferenceFrame {
         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
     }
@@ -47817,7 +47803,7 @@ class ReferenceFrame {
 
         const viewChanged = start !== this.start || bpPerPixel !== this.bpPerPixel;
         if (viewChanged) {
-            await browser.updateViews(this);
+            await browser.updateViews(true);
         }
 
     }
@@ -49619,8 +49605,8 @@ class Browser {
             this.svgSaveControl = new SVGSaveControl($toggle_button_container.get(0), this);
         }
 
-        if(config.customButtons) {
-            for(let b of config.customButtons) {
+        if (config.customButtons) {
+            for (let b of config.customButtons) {
                 new CustomButton($toggle_button_container.get(0), this, b);
             }
         }
@@ -49781,7 +49767,6 @@ class Browser {
                     return undefined
                 }
             }
-
         }
     }
 
@@ -49871,6 +49856,11 @@ class Browser {
 
         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();
 
     }
@@ -50049,23 +50039,19 @@ class Browser {
 
     async loadTrackList(configList) {
 
-        try {
-            const promises = [];
-            for (let config of configList) {
-                promises.push(this.loadTrack(config, false));
-            }
+        const promises = [];
+        for (let config of configList) {
+            promises.push(this.loadTrack(config));
+        }
 
-            const loadedTracks = await Promise.all(promises);
-            const groupAutoscaleViews = this.trackViews.filter(function (trackView) {
-                return trackView.track.autoscaleGroup
-            });
-            if (groupAutoscaleViews.length > 0) {
-                this.updateViews(groupAutoscaleViews);
-            }
-            return loadedTracks
-        } finally {
-            await this.resize();
+        const loadedTracks = await Promise.all(promises);
+        const groupAutoscaleViews = this.trackViews.filter(function (trackView) {
+            return trackView.track.autoscaleGroup
+        });
+        if (groupAutoscaleViews.length > 0) {
+            this.updateViews();
         }
+        return loadedTracks
     }
 
     async loadROI(config) {
@@ -50079,6 +50065,8 @@ class Browser {
         } 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);
     }
 
@@ -50090,14 +50078,14 @@ class Browser {
             }
         }
         for (let tv of this.trackViews) {
-            tv.updateViews(true);
+            tv.repaintViews();
         }
     }
 
     clearROIs() {
         this.roi = [];
         for (let tv of this.trackViews) {
-            tv.updateViews(true);
+            tv.repaintViews();
         }
     }
 
@@ -50109,24 +50097,12 @@ class Browser {
     /**
      * 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
@@ -50194,11 +50170,6 @@ class Browser {
             }
             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();
-            }
         }
     }
 
@@ -50422,41 +50393,7 @@ class Browser {
             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) {
@@ -50532,6 +50469,12 @@ class Browser {
 
     }
 
+    repaintViews() {
+        for (let trackView of this.trackViews) {
+            trackView.repaintViews();
+        }
+    }
+
     updateLocusSearchWidget() {
 
         const referenceFrameList = this.referenceFrameList;
@@ -50633,12 +50576,56 @@ class Browser {
                 const viewport = createViewport(trackView, viewportColumn, referenceFrameRight);
                 trackView.viewports.splice(indexRight, 0, viewport);
             }
+        }
+
+        this.centerLineList = this.createCenterLineList(this.columnContainer);
+
+        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);
 
-        await this.resize();
+        resize.call(this);
     }
 
     async removeMultiLocusPanel(referenceFrame) {
@@ -50667,7 +50654,13 @@ class Browser {
 
     }
 
-    async selectMultiLocusPanel(referenceFrame) {
+    /**
+     * Goto the locus represented by the selected referenceFrame, discarding all other panels
+     *
+     * @param referenceFrame
+     * @returns {Promise<void>}
+     */
+    async gotoMultilocusPanel(referenceFrame) {
 
         const referenceFrameIndex = this.referenceFrameList.indexOf(referenceFrame);
 
@@ -50721,7 +50714,7 @@ class Browser {
 
         this.updateUIWithReferenceFrameList();
 
-        await this.updateViews(true);
+        await this.updateViews();
 
     }
 
@@ -50944,7 +50937,6 @@ class Browser {
         }
 
 
-
         json["tracks"] = trackJson;
 
         return json        // This is an object, not a json string
@@ -50963,14 +50955,9 @@ class Browser {
         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)
     }
 
     /**
@@ -51090,12 +51077,9 @@ class Browser {
     }
 
     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() {
@@ -51194,6 +51178,48 @@ class Browser {
     }
 }
 
+/**
+ * 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();