@jbrowse/plugin-alignments 1.6.5 → 1.6.8

package/dist/plugin-alignments.cjs.development.js

@@ -15,9 +15,9 @@ var rxjs = require('@jbrowse/core/util/rxjs');
 var operators = require('rxjs/operators');
 var ui = require('@jbrowse/core/ui');
 var pluginWiggle = require('@jbrowse/plugin-wiggle');
+var Color = _interopDefault(require('color'));
 var BoxRendererType = require('@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType');
 var BoxRendererType__default = _interopDefault(BoxRendererType);
-var Color = _interopDefault(require('color'));
 var offscreenCanvasUtils = require('@jbrowse/core/util/offscreenCanvasUtils');
 var dataAdapterCache = require('@jbrowse/core/data_adapters/dataAdapterCache');
 var range = require('@jbrowse/core/util/range');
@@ -29,6 +29,7 @@ var DisplayType = _interopDefault(require('@jbrowse/core/pluggableElementTypes/D
 var pluginLinearGenomeView = require('@jbrowse/plugin-linear-genome-view');
 var models = require('@jbrowse/core/pluggableElementTypes/models');
 var mobx = require('mobx');
+var core = require('@material-ui/core');
 var SerializableFilterChain = _interopDefault(require('@jbrowse/core/pluggableElementTypes/renderers/util/serializableFilterChain'));
 var tracks = require('@jbrowse/core/util/tracks');
 var VisibilityIcon = _interopDefault(require('@material-ui/icons/Visibility'));
@@ -46,7 +47,6 @@ var RpcMethodType = _interopDefault(require('@jbrowse/core/pluggableElementTypes
 var cram = require('@gmod/cram');
 var io = require('@jbrowse/core/util/io');
 var bam = require('@gmod/bam');
-var core = require('@material-ui/core');
 var CloseIcon = _interopDefault(require('@material-ui/icons/Close'));
 var BaseFeatureDetail = require('@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail');
 
@@ -1168,62 +1168,80 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
 });
 
 var _marked = /*#__PURE__*/runtime_1.mark(getNextRefPos);
+var mdRegex = /*#__PURE__*/new RegExp(/(\d+|\^[a-z]+|[a-z])/gi);
 function parseCigar(cigar) {
   return (cigar || '').split(/([MIDNSHPX=])/);
 }
-function cigarToMismatches(ops, seq, qual) {
-  var currOffset = 0;
-  var seqOffset = 0;
+function cigarToMismatches(ops, seq, ref, qual) {
+  var roffset = 0; // reference offset
+
+  var soffset = 0; // seq offset
+
   var mismatches = [];
+  var hasRefAndSeq = ref && seq;
 
-  for (var i = 0; i < ops.length - 1; i += 2) {
+  for (var i = 0; i < ops.length; i += 2) {
     var len = +ops[i];
     var op = ops[i + 1];
 
     if (op === 'M' || op === '=' || op === 'E') {
-      seqOffset += len;
+      if (hasRefAndSeq) {
+        for (var j = 0; j < len; j++) {
+          if ( // @ts-ignore in the full yarn build of the repo, this says that object is possibly undefined for some reason, ignored
+          seq[soffset + j].toUpperCase() !== ref[roffset + j].toUpperCase()) {
+            mismatches.push({
+              start: roffset + j,
+              type: 'mismatch',
+              base: seq[soffset + j],
+              length: 1
+            });
+          }
+        }
+      }
+
+      soffset += len;
     }
 
     if (op === 'I') {
       mismatches.push({
-        start: currOffset,
+        start: roffset,
         type: 'insertion',
         base: "".concat(len),
         length: 0
       });
-      seqOffset += len;
+      soffset += len;
     } else if (op === 'D') {
       mismatches.push({
-        start: currOffset,
+        start: roffset,
         type: 'deletion',
         base: '*',
         length: len
       });
     } else if (op === 'N') {
       mismatches.push({
-        start: currOffset,
+        start: roffset,
         type: 'skip',
         base: 'N',
         length: len
       });
     } else if (op === 'X') {
-      var r = seq.slice(seqOffset, seqOffset + len);
-      var q = (qual === null || qual === void 0 ? void 0 : qual.slice(seqOffset, seqOffset + len)) || [];
+      var r = seq.slice(soffset, soffset + len);
+      var q = (qual === null || qual === void 0 ? void 0 : qual.slice(soffset, soffset + len)) || [];
 
-      for (var j = 0; j < len; j++) {
+      for (var _j = 0; _j < len; _j++) {
         mismatches.push({
-          start: currOffset + j,
+          start: roffset + _j,
           type: 'mismatch',
-          base: r[j],
-          qual: q[j],
+          base: r[_j],
+          qual: q[_j],
           length: 1
         });
       }
 
-      seqOffset += len;
+      soffset += len;
     } else if (op === 'H') {
       mismatches.push({
-        start: currOffset,
+        start: roffset,
         type: 'hardclip',
         base: "H".concat(len),
         cliplen: len,
@@ -1231,17 +1249,17 @@ function cigarToMismatches(ops, seq, qual) {
       });
     } else if (op === 'S') {
       mismatches.push({
-        start: currOffset,
+        start: roffset,
         type: 'softclip',
         base: "S".concat(len),
         cliplen: len,
         length: 1
       });
-      seqOffset += len;
+      soffset += len;
     }
 
     if (op !== 'I' && op !== 'S' && op !== 'H') {
-      currOffset += len;
+      roffset += len;
     }
   }
 
@@ -1252,7 +1270,7 @@ function cigarToMismatches(ops, seq, qual) {
  * @returns array of mismatches and their positions
  */
 
-function mdToMismatches(mdstring, cigarOps, cigarMismatches, seq, qual) {
+function mdToMismatches(mdstring, ops, cigarMismatches, seq, qual) {
   var mismatchRecords = [];
   var curr = {
     start: 0,
@@ -1285,9 +1303,9 @@ function mdToMismatches(mdstring, cigarOps, cigarMismatches, seq, qual) {
     var templateOffset = lastTemplateOffset;
     var refOffset = lastRefOffset;
 
-    for (var i = lastCigar; i < cigarOps.length && refOffset <= refCoord; i += 2, lastCigar = i) {
-      var len = +cigarOps[i];
-      var op = cigarOps[i + 1];
+    for (var i = lastCigar; i < ops.length && refOffset <= refCoord; i += 2, lastCigar = i) {
+      var len = +ops[i];
+      var op = ops[i + 1];
 
       if (op === 'S' || op === 'I') {
         templateOffset += len;
@@ -1305,7 +1323,7 @@ function mdToMismatches(mdstring, cigarOps, cigarMismatches, seq, qual) {
   } // now actually parse the MD string
 
 
-  var md = mdstring.match(/(\d+|\^[a-z]+|[a-z])/gi) || [];
+  var md = mdstring.match(mdRegex) || [];
 
   for (var i = 0; i < md.length; i++) {
     var token = md[i];
@@ -1314,11 +1332,7 @@ function mdToMismatches(mdstring, cigarOps, cigarMismatches, seq, qual) {
     if (!Number.isNaN(num)) {
       curr.start += num;
     } else if (token.startsWith('^')) {
-      curr.length = token.length - 1;
-      curr.base = '*';
-      curr.type = 'deletion';
-      curr.seq = token.substring(1);
-      nextRecord();
+      curr.start += token.length - 1;
     } else {
       // mismatch
       for (var j = 0; j < token.length; j += 1) {
@@ -1335,9 +1349,9 @@ function mdToMismatches(mdstring, cigarOps, cigarMismatches, seq, qual) {
           }
         }
 
-        var s = cigarOps ? getTemplateCoordLocal(curr.start) : curr.start;
-        curr.base = seq ? seq.substr(s, 1) : 'X';
-        var qualScore = qual === null || qual === void 0 ? void 0 : qual.slice(s, s + 1)[0];
+        var s = getTemplateCoordLocal(curr.start);
+        curr.base = seq[s] || 'X';
+        var qualScore = qual === null || qual === void 0 ? void 0 : qual[s];
 
         if (qualScore) {
           curr.qual = qualScore;
@@ -1351,103 +1365,20 @@ function mdToMismatches(mdstring, cigarOps, cigarMismatches, seq, qual) {
 
   return mismatchRecords;
 }
-function getTemplateCoord(refCoord, cigarOps) {
-  var templateOffset = 0;
-  var refOffset = 0;
-
-  for (var i = 0; i < cigarOps.length && refOffset <= refCoord; i += 2) {
-    var len = +cigarOps[i];
-    var op = cigarOps[i + 1];
-
-    if (op === 'S' || op === 'I') {
-      templateOffset += len;
-    } else if (op === 'D' || op === 'P') {
-      refOffset += len;
-    } else if (op !== 'H') {
-      templateOffset += len;
-      refOffset += len;
-    }
-  }
-
-  return templateOffset - (refOffset - refCoord);
-}
-function getMismatches(cigarString, mdString, seq, qual) {
+function getMismatches(cigar, md, seq, ref, qual) {
   var mismatches = [];
-  var cigarOps = []; // parse the CIGAR tag if it has one
+  var ops = parseCigar(cigar); // parse the CIGAR tag if it has one
 
-  if (cigarString) {
-    cigarOps = parseCigar(cigarString);
-    mismatches = mismatches.concat(cigarToMismatches(cigarOps, seq, qual));
+  if (cigar) {
+    mismatches = mismatches.concat(cigarToMismatches(ops, seq, ref, qual));
   } // now let's look for CRAM or MD mismatches
 
 
-  if (mdString) {
-    mismatches = mismatches.concat(mdToMismatches(mdString, cigarOps, mismatches, seq, qual));
-  } // uniqify the mismatches
-
-
-  var seen = {};
-  return mismatches.filter(function (m) {
-    var key = "".concat(m.type, ",").concat(m.start, ",").concat(m.length);
-    var s = seen[key];
-    seen[key] = true;
-    return !s;
-  });
-} // adapted from minimap2 code static void write_MD_core function
-
-function generateMD(target, query, cigar) {
-  var queryOffset = 0;
-  var targetOffset = 0;
-  var lengthMD = 0;
-
-  if (!target) {
-    console.warn('no ref supplied to generateMD');
-    return '';
+  if (md) {
+    mismatches = mismatches.concat(mdToMismatches(md, ops, mismatches, seq, qual));
   }
 
-  var cigarOps = parseCigar(cigar);
-  var str = '';
-
-  for (var i = 0; i < cigarOps.length; i += 2) {
-    var len = +cigarOps[i];
-    var op = cigarOps[i + 1];
-
-    if (op === 'M' || op === 'X' || op === '=') {
-      for (var j = 0; j < len; j++) {
-        if (query[queryOffset + j].toLowerCase() !== target[targetOffset + j].toLowerCase()) {
-          str += "".concat(lengthMD).concat(target[targetOffset + j].toUpperCase());
-          lengthMD = 0;
-        } else {
-          lengthMD++;
-        }
-      }
-
-      queryOffset += len;
-      targetOffset += len;
-    } else if (op === 'I') {
-      queryOffset += len;
-    } else if (op === 'D') {
-      var tmp = '';
-
-      for (var _j = 0; _j < len; _j++) {
-        tmp += target[targetOffset + _j].toUpperCase();
-      }
-
-      str += "".concat(lengthMD, "^").concat(tmp);
-      lengthMD = 0;
-      targetOffset += len;
-    } else if (op === 'N') {
-      targetOffset += len;
-    } else if (op === 'S') {
-      queryOffset += len;
-    }
-  }
-
-  if (lengthMD > 0) {
-    str += lengthMD;
-  }
-
-  return str;
+  return mismatches;
 } // get relative reference sequence positions for positions given relative to
 // the read sequence
 
@@ -1595,9 +1526,7 @@ var MismatchParser = {
   parseCigar: parseCigar,
   cigarToMismatches: cigarToMismatches,
   mdToMismatches: mdToMismatches,
-  getTemplateCoord: getTemplateCoord,
   getMismatches: getMismatches,
-  generateMD: generateMD,
   getNextRefPos: getNextRefPos,
   getModificationPositions: getModificationPositions,
   getModificationTypes: getModificationTypes
@@ -1668,10 +1597,6 @@ var configSchema = /*#__PURE__*/mobxStateTree.types.late(function () {
         }
       }
     }),
-    chunkSizeLimit: {
-      type: 'number',
-      defaultValue: 100000000
-    },
     fetchSizeLimit: {
       type: 'number',
       defaultValue: 5000000
@@ -1748,8 +1673,8 @@ var configSchemaFactory = (function (pluginManager) {
   });
 });
 
-// get tag from BAM or CRAM feature, where CRAM uses feature.get('tags') and
 // BAM does not
+
 function getTag(feature, tag) {
   var tags = feature.get('tags');
   return tags ? tags[tag] : feature.get(tag);
@@ -1793,6 +1718,43 @@ var orientationTypes = {
     F1F2: 'RL'
   }
 };
+function fetchSequence(_x, _x2) {
+  return _fetchSequence.apply(this, arguments);
+} // has to check underlying C-G (aka CpG) on the reference sequence
+
+function _fetchSequence() {
+  _fetchSequence = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(region, adapter) {
+    var _feats$;
+
+    var end, originalRefName, refName, feats;
+    return runtime_1.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            end = region.end, originalRefName = region.originalRefName, refName = region.refName;
+            _context.next = 3;
+            return adapter.getFeatures(_objectSpread2(_objectSpread2({}, region), {}, {
+              refName: originalRefName || refName,
+              end: end + 1
+            })).pipe(operators.toArray()).toPromise();
+
+          case 3:
+            feats = _context.sent;
+            return _context.abrupt("return", (_feats$ = feats[0]) === null || _feats$ === void 0 ? void 0 : _feats$.get('seq'));
+
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _fetchSequence.apply(this, arguments);
+}
+
+function shouldFetchReferenceSequence(type) {
+  return type === 'methylation';
+}
 
 function mismatchLen(mismatch) {
   return !isInterbase(mismatch.type) ? mismatch.length : 1;
@@ -1858,8 +1820,8 @@ var SNPCoverageAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                subadapterConfig = configuration.readConfObject(this.config, 'subadapter');
-                sequenceConf = configuration.readConfObject(this.config, ['subadapter', 'sequenceAdapter']);
+                subadapterConfig = this.getConf('subadapter');
+                sequenceConf = this.getConf(['subadapter', 'sequenceAdapter']);
                 _context.next = 4;
                 return (_this$getSubAdapter = this.getSubAdapter) === null || _this$getSubAdapter === void 0 ? void 0 : _this$getSubAdapter.call(this, subadapterConfig);
 
@@ -1912,6 +1874,47 @@ var SNPCoverageAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
 
       return configure;
     }()
+  }, {
+    key: "fetchSequence",
+    value: function () {
+      var _fetchSequence2 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2(region) {
+        var _yield$this$configure, sequenceAdapter;
+
+        return runtime_1.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                _context2.next = 2;
+                return this.configure();
+
+              case 2:
+                _yield$this$configure = _context2.sent;
+                sequenceAdapter = _yield$this$configure.sequenceAdapter;
+
+                if (sequenceAdapter) {
+                  _context2.next = 6;
+                  break;
+                }
+
+                return _context2.abrupt("return", undefined);
+
+              case 6:
+                return _context2.abrupt("return", fetchSequence(region, sequenceAdapter));
+
+              case 7:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, this);
+      }));
+
+      function fetchSequence$1(_x) {
+        return _fetchSequence2.apply(this, arguments);
+      }
+
+      return fetchSequence$1;
+    }()
   }, {
     key: "getFeatures",
     value: function getFeatures(region) {
@@ -1919,48 +1922,50 @@ var SNPCoverageAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
 
       var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       return rxjs.ObservableCreate( /*#__PURE__*/function () {
-        var _ref = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2(observer) {
-          var _yield$_this$configur, subadapter, stream, filters, _yield$_this$generate, bins, skipmap;
+        var _ref = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee3(observer) {
+          var _yield$_this$configur, subadapter, feats, filters, _yield$_this$generate, bins, skipmap;
 
-          return runtime_1.wrap(function _callee2$(_context2) {
+          return runtime_1.wrap(function _callee3$(_context3) {
             while (1) {
-              switch (_context2.prev = _context2.next) {
+              switch (_context3.prev = _context3.next) {
                 case 0:
-                  _context2.next = 2;
+                  _context3.next = 2;
                   return _this.configure();
 
                 case 2:
-                  _yield$_this$configur = _context2.sent;
+                  _yield$_this$configur = _context3.sent;
                   subadapter = _yield$_this$configur.subadapter;
-                  stream = subadapter.getFeatures(region, opts);
+                  _context3.next = 6;
+                  return subadapter.getFeatures(region, opts).pipe(operators.toArray()).toPromise();
+
+                case 6:
+                  feats = _context3.sent;
 
                   if (opts.filters) {
                     filters = opts.filters;
-                    stream = stream.pipe(operators.filter(function (f) {
+                    feats = feats.filter(function (f) {
                       return filters.passes(f, opts);
-                    }));
+                    });
                   }
 
-                  _context2.next = 8;
-                  return _this.generateCoverageBins(stream, region, opts);
+                  _context3.next = 10;
+                  return _this.generateCoverageBins(feats, region, opts);
 
-                case 8:
-                  _yield$_this$generate = _context2.sent;
+                case 10:
+                  _yield$_this$generate = _context3.sent;
                   bins = _yield$_this$generate.bins;
                   skipmap = _yield$_this$generate.skipmap;
                   bins.forEach(function (bin, index) {
-                    if (bin.total) {
-                      observer.next(new SimpleFeature({
-                        id: "".concat(_this.id, "-").concat(region.start, "-").concat(index),
-                        data: {
-                          score: bin.total,
-                          snpinfo: bin,
-                          start: region.start + index,
-                          end: region.start + index + 1,
-                          refName: region.refName
-                        }
-                      }));
-                    }
+                    observer.next(new SimpleFeature({
+                      id: "".concat(_this.id, "-").concat(region.start, "-").concat(index),
+                      data: {
+                        score: bin.total,
+                        snpinfo: bin,
+                        start: region.start + index,
+                        end: region.start + index + 1,
+                        refName: region.refName
+                      }
+                    }));
                   }); // make fake features from the coverage
 
                   Object.entries(skipmap).forEach(function (_ref2) {
@@ -1982,15 +1987,15 @@ var SNPCoverageAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
                   });
                   observer.complete();
 
-                case 14:
+                case 16:
                 case "end":
-                  return _context2.stop();
+                  return _context3.stop();
               }
             }
-          }, _callee2);
+          }, _callee3);
         }));
 
-        return function (_x) {
+        return function (_x2) {
           return _ref.apply(this, arguments);
         };
       }(), opts.signal);
@@ -1998,30 +2003,30 @@ var SNPCoverageAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
   }, {
     key: "estimateRegionsStats",
     value: function () {
-      var _estimateRegionsStats = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee3(regions, opts) {
-        var _yield$this$configure, subadapter;
+      var _estimateRegionsStats = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee4(regions, opts) {
+        var _yield$this$configure2, subadapter;
 
-        return runtime_1.wrap(function _callee3$(_context3) {
+        return runtime_1.wrap(function _callee4$(_context4) {
           while (1) {
-            switch (_context3.prev = _context3.next) {
+            switch (_context4.prev = _context4.next) {
               case 0:
-                _context3.next = 2;
+                _context4.next = 2;
                 return this.configure();
 
               case 2:
-                _yield$this$configure = _context3.sent;
-                subadapter = _yield$this$configure.subadapter;
-                return _context3.abrupt("return", subadapter.estimateRegionsStats(regions, opts));
+                _yield$this$configure2 = _context4.sent;
+                subadapter = _yield$this$configure2.subadapter;
+                return _context4.abrupt("return", subadapter.estimateRegionsStats(regions, opts));
 
               case 5:
               case "end":
-                return _context3.stop();
+                return _context4.stop();
             }
           }
-        }, _callee3, this);
+        }, _callee4, this);
       }));
 
-      function estimateRegionsStats(_x2, _x3) {
+      function estimateRegionsStats(_x3, _x4) {
         return _estimateRegionsStats.apply(this, arguments);
       }
 
@@ -2030,31 +2035,31 @@ var SNPCoverageAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
   }, {
     key: "getRefNames",
     value: function () {
-      var _getRefNames = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee4() {
+      var _getRefNames = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee5() {
         var opts,
-            _yield$this$configure2,
+            _yield$this$configure3,
             subadapter,
-            _args4 = arguments;
+            _args5 = arguments;
 
-        return runtime_1.wrap(function _callee4$(_context4) {
+        return runtime_1.wrap(function _callee5$(_context5) {
           while (1) {
-            switch (_context4.prev = _context4.next) {
+            switch (_context5.prev = _context5.next) {
               case 0:
-                opts = _args4.length > 0 && _args4[0] !== undefined ? _args4[0] : {};
-                _context4.next = 3;
+                opts = _args5.length > 0 && _args5[0] !== undefined ? _args5[0] : {};
+                _context5.next = 3;
                 return this.configure();
 
               case 3:
-                _yield$this$configure2 = _context4.sent;
-                subadapter = _yield$this$configure2.subadapter;
-                return _context4.abrupt("return", subadapter.getRefNames(opts));
+                _yield$this$configure3 = _context5.sent;
+                subadapter = _yield$this$configure3.subadapter;
+                return _context5.abrupt("return", subadapter.getRefNames(opts));
 
               case 6:
               case "end":
-                return _context4.stop();
+                return _context5.stop();
             }
           }
-        }, _callee4, this);
+        }, _callee5, this);
       }));
 
       function getRefNames() {
@@ -2068,69 +2073,54 @@ var SNPCoverageAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
     value: function
       /* { region } */
     freeResources() {}
-    /**
-     * Generates coverage bins from features which details
-     * the reference, mismatches, strands, and coverage info
-     * @param features - Features of region to be passed in
-     * @param region - Region
-     * @param bpPerPx - base pairs per pixel
-     * @returns Array of nested frequency tables
-     */
-
   }, {
     key: "generateCoverageBins",
     value: function () {
-      var _generateCoverageBins = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee5(features, region, opts) {
-        var colorBy, _yield$this$configure3, sequenceAdapter, originalRefName, refName, start, end, binMax, skipmap, regionSeq, _yield$sequenceAdapte, _yield$sequenceAdapte2, feat, bins;
+      var _generateCoverageBins = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee6(features, region, opts) {
+        var _opts$colorBy;
 
-        return runtime_1.wrap(function _callee5$(_context5) {
+        var colorBy, binMax, skipmap, regionSeq, bins, _loop, i;
+
+        return runtime_1.wrap(function _callee6$(_context6) {
           while (1) {
-            switch (_context5.prev = _context5.next) {
+            switch (_context6.prev = _context6.next) {
               case 0:
                 colorBy = opts.colorBy;
-                _context5.next = 3;
-                return this.configure();
-
-              case 3:
-                _yield$this$configure3 = _context5.sent;
-                sequenceAdapter = _yield$this$configure3.sequenceAdapter;
-                originalRefName = region.originalRefName, refName = region.refName, start = region.start, end = region.end;
                 binMax = Math.ceil(region.end - region.start);
-                skipmap = {}; // request an extra +1 on the end to get CpG crossing region boundary
+                skipmap = {};
 
-                if (!sequenceAdapter) {
-                  _context5.next = 15;
+                if (!(features.length && shouldFetchReferenceSequence((_opts$colorBy = opts.colorBy) === null || _opts$colorBy === void 0 ? void 0 : _opts$colorBy.type))) {
+                  _context6.next = 9;
                   break;
                 }
 
-                _context5.next = 11;
-                return sequenceAdapter.getFeatures({
-                  refName: originalRefName || refName,
-                  start: start,
-                  end: end + 1,
-                  assemblyName: region.assemblyName
-                }).pipe(operators.toArray()).toPromise();
+                _context6.next = 6;
+                return this.fetchSequence(region);
 
-              case 11:
-                _yield$sequenceAdapte = _context5.sent;
-                _yield$sequenceAdapte2 = _slicedToArray(_yield$sequenceAdapte, 1);
-                feat = _yield$sequenceAdapte2[0];
-                regionSeq = feat === null || feat === void 0 ? void 0 : feat.get('seq');
+              case 6:
+                _context6.t0 = _context6.sent;
+                _context6.next = 10;
+                break;
 
-              case 15:
-                _context5.next = 17;
-                return features.pipe(operators.reduce(function (bins, feature) {
-                  var cigar = feature.get('CIGAR');
+              case 9:
+                _context6.t0 = undefined;
+
+              case 10:
+                regionSeq = _context6.t0;
+                bins = [];
+
+                _loop = function _loop(i) {
+                  var feature = features[i];
+                  var ops = parseCigar(feature.get('CIGAR'));
                   var fstart = feature.get('start');
                   var fend = feature.get('end');
                   var fstrand = feature.get('strand');
-                  var cigarOps = parseCigar(cigar);
 
                   for (var j = fstart; j < fend; j++) {
-                    var i = j - region.start;
+                    var _i = j - region.start;
 
-                    if (i >= 0 && i < binMax) {
-                      var bin = bins[i] || {
+                    if (_i >= 0 && _i < binMax) {
+                      var bin = bins[_i] || {
                         total: 0,
                         lowqual: {},
                         cov: {},
@@ -2138,32 +2128,25 @@ var SNPCoverageAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
                         noncov: {},
                         ref: {}
                       };
-                      bin.total++;
-                      inc(bin, fstrand, 'ref', 'ref');
-                      bins[i] = bin;
+
+                      if (j !== fend) {
+                        bin.total++;
+                        inc(bin, fstrand, 'ref', 'ref');
+                      }
+
+                      bins[_i] = bin;
                     }
                   }
 
                   if ((colorBy === null || colorBy === void 0 ? void 0 : colorBy.type) === 'modifications') {
                     var seq = feature.get('seq');
                     var mm = getTagAlt(feature, 'MM', 'Mm') || '';
-                    var ml = getTagAlt(feature, 'ML', 'Ml') || [];
-                    var probabilities = ml ? (typeof ml === 'string' ? ml.split(',').map(function (e) {
-                      return +e;
-                    }) : ml).map(function (e) {
-                      return e / 255;
-                    }) : getTagAlt(feature, 'MP', 'Mp').split('').map(function (s) {
-                      return s.charCodeAt(0) - 33;
-                    }).map(function (elt) {
-                      return Math.min(1, elt / 50);
-                    });
-                    var probIndex = 0;
                     getModificationPositions(mm, seq, fstrand).forEach(function (_ref4) {
                       var type = _ref4.type,
                           positions = _ref4.positions;
                       var mod = "mod_".concat(type);
 
-                      var _iterator = _createForOfIteratorHelper(getNextRefPos(cigarOps, positions)),
+                      var _iterator = _createForOfIteratorHelper(getNextRefPos(ops, positions)),
                           _step;
 
                       try {
@@ -2173,15 +2156,8 @@ var SNPCoverageAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
 
                           if (epos >= 0 && epos < bins.length && pos + fstart < fend) {
                             var _bin = bins[epos];
-
-                            if (probabilities[probIndex] > 0.5) {
-                              inc(_bin, fstrand, 'cov', mod);
-                            } else {
-                              inc(_bin, fstrand, 'lowqual', mod);
-                            }
+                            inc(_bin, fstrand, 'cov', mod);
                           }
-
-                          probIndex++;
                         }
                       } catch (err) {
                         _iterator.e(err);
@@ -2207,7 +2183,7 @@ var SNPCoverageAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
 
                       // we are processing methylation
                       if (type === 'm') {
-                        var _iterator2 = _createForOfIteratorHelper(getNextRefPos(cigarOps, positions)),
+                        var _iterator2 = _createForOfIteratorHelper(getNextRefPos(ops, positions)),
                             _step2;
 
                         try {
@@ -2228,19 +2204,18 @@ var SNPCoverageAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
                     });
 
                     for (var _j = fstart; _j < fend; _j++) {
-                      var _i = _j - region.start;
+                      var _i2 = _j - region.start;
 
-                      if (_i >= 0 && _i < bins.length - 1) {
-                        var l1 = regionSeq[_i].toLowerCase();
+                      if (_i2 >= 0 && _i2 < bins.length - 1) {
+                        var l1 = regionSeq[_i2].toLowerCase();
 
-                        var l2 = regionSeq[_i + 1].toLowerCase();
+                        var l2 = regionSeq[_i2 + 1].toLowerCase();
 
-                        var _bin2 = bins[_i];
-                        var bin1 = bins[_i + 1]; // color
+                        var _bin2 = bins[_i2];
+                        var bin1 = bins[_i2 + 1]; // color
 
-                        // color
                         if (l1 === 'c' && l2 === 'g') {
-                          if (methBins[_i] || methBins[_i + 1]) {
+                          if (methBins[_i2] || methBins[_i2 + 1]) {
                             inc(_bin2, fstrand, 'cov', 'meth');
                             inc(bin1, fstrand, 'cov', 'meth');
                             dec(_bin2, fstrand, 'ref', 'ref');
@@ -2259,8 +2234,8 @@ var SNPCoverageAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
                     var mismatches = feature.get('mismatches');
 
                     if (mismatches) {
-                      for (var _i2 = 0; _i2 < mismatches.length; _i2++) {
-                        var mismatch = mismatches[_i2];
+                      for (var _i3 = 0; _i3 < mismatches.length; _i3++) {
+                        var mismatch = mismatches[_i3];
                         var mstart = fstart + mismatch.start;
 
                         for (var _j2 = mstart; _j2 < mstart + mismatchLen(mismatch); _j2++) {
@@ -2312,26 +2287,26 @@ var SNPCoverageAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
                       });
                     }
                   }
+                };
 
-                  return bins;
-                }, [])).toPromise();
+                for (i = 0; i < features.length; i++) {
+                  _loop(i);
+                }
 
-              case 17:
-                bins = _context5.sent;
-                return _context5.abrupt("return", {
+                return _context6.abrupt("return", {
                   bins: bins,
                   skipmap: skipmap
                 });
 
-              case 19:
+              case 15:
               case "end":
-                return _context5.stop();
+                return _context6.stop();
             }
           }
-        }, _callee5, this);
+        }, _callee6, this);
       }));
 
-      function generateCoverageBins(_x4, _x5, _x6) {
+      function generateCoverageBins(_x5, _x6, _x7) {
         return _generateCoverageBins.apply(this, arguments);
       }
 
@@ -2379,7 +2354,7 @@ var ConfigSchema = /*#__PURE__*/configuration.ConfigurationSchema('SNPCoverageRe
   indicatorThreshold: {
     type: 'number',
     description: 'the proportion of reads containing a insertion/clip indicator',
-    defaultValue: 0.3
+    defaultValue: 0.4
   },
   drawArcs: {
     type: 'boolean',
@@ -2420,12 +2395,13 @@ var SNPCoverageRenderer = /*#__PURE__*/function (_WiggleBaseRenderer) {
           regions = props.regions,
           bpPerPx = props.bpPerPx,
           displayCrossHatches = props.displayCrossHatches,
-          modificationTagMap = props.modificationTagMap,
+          _props$modificationTa = props.modificationTagMap,
+          modificationTagMap = _props$modificationTa === void 0 ? {} : _props$modificationTa,
           scaleOpts = props.scaleOpts,
           unadjustedHeight = props.height,
           configTheme = props.theme,
           cfg = props.config,
-          values = props.ticks.values;
+          ticks = props.ticks;
       var theme = ui.createJBrowseTheme(configTheme);
 
       var _regions = _slicedToArray(regions, 1),
@@ -2437,17 +2413,23 @@ var SNPCoverageRenderer = /*#__PURE__*/function (_WiggleBaseRenderer) {
 
       var offset = pluginWiggle.YSCALEBAR_LABEL_OFFSET;
       var height = unadjustedHeight - offset * 2;
+      var domain = scaleOpts.domain;
+
+      if (!domain) {
+        return;
+      }
 
       var opts = _objectSpread2(_objectSpread2({}, scaleOpts), {}, {
         range: [0, height]
       });
 
-      var viewScale = pluginWiggle.getScale(opts);
-      var snpViewScale = pluginWiggle.getScale(_objectSpread2(_objectSpread2({}, opts), {}, {
+      var viewScale = pluginWiggle.getScale(opts); // clipping and insertion indicators, uses a smaller height/2 scale
+
+      var indicatorViewScale = pluginWiggle.getScale(_objectSpread2(_objectSpread2({}, opts), {}, {
+        range: [0, height / 2],
         scaleType: 'linear'
       }));
       var originY = pluginWiggle.getOrigin(scaleOpts.scaleType);
-      var snpOriginY = pluginWiggle.getOrigin('linear');
       var indicatorThreshold = configuration.readConfObject(cfg, 'indicatorThreshold');
       var drawInterbaseCounts = configuration.readConfObject(cfg, 'drawInterbaseCounts');
       var drawArcs = configuration.readConfObject(cfg, 'drawArcs');
@@ -2459,15 +2441,14 @@ var SNPCoverageRenderer = /*#__PURE__*/function (_WiggleBaseRenderer) {
 
       var toHeight = function toHeight(n) {
         return toY(originY) - toY(n);
-      }; // this is always linear scale, even when plotted on top of log scale
-
+      };
 
-      var snpToY = function snpToY(n) {
-        return height - (snpViewScale(n) || 0) + offset;
+      var indicatorToY = function indicatorToY(n) {
+        return height - (indicatorViewScale(n) || 0) + offset;
       };
 
-      var snpToHeight = function snpToHeight(n) {
-        return snpToY(snpOriginY) - snpToY(n);
+      var indicatorToHeight = function indicatorToHeight(n) {
+        return indicatorToY(pluginWiggle.getOrigin('linear')) - indicatorToY(n);
       };
 
       var colorForBase = {
@@ -2495,7 +2476,10 @@ var SNPCoverageRenderer = /*#__PURE__*/function (_WiggleBaseRenderer) {
       // bpPerPx First pass: draw the gray background
 
       ctx.fillStyle = colorForBase.total;
-      coverage.forEach(function (feature) {
+
+      for (var i = 0; i < coverage.length; i++) {
+        var feature = coverage[i];
+
         var _featureSpanPx = util.featureSpanPx(feature, region, bpPerPx),
             _featureSpanPx2 = _slicedToArray(_featureSpanPx, 2),
             leftPx = _featureSpanPx2[0],
@@ -2504,96 +2488,104 @@ var SNPCoverageRenderer = /*#__PURE__*/function (_WiggleBaseRenderer) {
         var w = rightPx - leftPx + 0.3;
         var score = feature.get('score');
         ctx.fillRect(leftPx, toY(score), w, toHeight(score));
-      });
-      ctx.fillStyle = 'grey';
-      ctx.beginPath();
-      ctx.lineTo(0, 0);
-      ctx.moveTo(0, width);
-      ctx.stroke(); // Second pass: draw the SNP data, and add a minimum feature width of 1px
+      } // Keep track of previous total which we will use it to draw the interbase
+      // indicator (if there is a sudden clip, there will be no read coverage but
+      // there will be "clip" coverage) at that position beyond the read. if the
+      // clip is right at a block boundary then prevTotal will not be available,
+      // so this is a best attempt to plot interbase indicator at the "cliffs"
+
+
+      var prevTotal = 0; // extraHorizontallyFlippedOffset is used to draw interbase items, which
+      // are located to the left when forward and right when reversed
+
+      var extraHorizontallyFlippedOffset = region.reversed ? 1 / bpPerPx : 0; // Second pass: draw the SNP data, and add a minimum feature width of 1px
       // which can be wider than the actual bpPerPx This reduces overdrawing of
       // the grey background over the SNPs
 
-      coverage.forEach(function (feature) {
-        var _featureSpanPx3 = util.featureSpanPx(feature, region, bpPerPx),
+      for (var _i = 0; _i < coverage.length; _i++) {
+        var _feature = coverage[_i];
+
+        var _featureSpanPx3 = util.featureSpanPx(_feature, region, bpPerPx),
             _featureSpanPx4 = _slicedToArray(_featureSpanPx3, 2),
-            leftPx = _featureSpanPx4[0],
-            rightPx = _featureSpanPx4[1];
+            _leftPx = _featureSpanPx4[0],
+            _rightPx = _featureSpanPx4[1];
+
+        var _score = _feature.get('score');
+
+        var snpinfo = _feature.get('snpinfo');
+
+        var _w = Math.max(_rightPx - _leftPx + 0.3, 1);
 
-        var snpinfo = feature.get('snpinfo');
-        var w = Math.max(rightPx - leftPx + 0.3, 1);
         var totalScore = snpinfo.total;
-        Object.entries(snpinfo.cov).sort(function (_ref, _ref2) {
-          var _ref3 = _slicedToArray(_ref, 1),
-              a = _ref3[0];
+        var keys = Object.keys(snpinfo.cov).sort();
+        var curr = 0;
 
-          var _ref4 = _slicedToArray(_ref2, 1),
-              b = _ref4[0];
+        for (var _i2 = 0; _i2 < keys.length; _i2++) {
+          var base = keys[_i2];
+          var total = snpinfo.cov[base].total;
+          ctx.fillStyle = colorForBase[base] || modificationTagMap[base.replace('mod_', '')] || '#888';
 
-          if (a < b) {
-            return -1;
-          }
+          var _height = toHeight(_score);
 
-          if (a > b) {
-            return 1;
-          }
+          var bottom = toY(_score) + _height;
 
-          return 0;
-        }).reduce(function (curr, _ref5) {
-          var _ref6 = _slicedToArray(_ref5, 2),
-              base = _ref6[0],
-              total = _ref6[1].total;
-
-          ctx.fillStyle = colorForBase[base] || modificationTagMap[base.replace('mod_', '')] || 'red';
-          ctx.fillRect(leftPx, snpToY(total + curr), w, snpToHeight(total));
-          return curr + total;
-        }, 0);
-        var interbaseEvents = Object.entries(snpinfo.noncov);
+          ctx.fillRect(_leftPx, bottom - (total + curr) / _score * _height, _w, total / _score * _height);
+          curr += total;
+        }
+
+        var interbaseEvents = Object.keys(snpinfo.noncov);
         var indicatorHeight = 4.5;
 
         if (drawInterbaseCounts) {
-          interbaseEvents.reduce(function (curr, _ref7) {
-            var _ref8 = _slicedToArray(_ref7, 2),
-                base = _ref8[0],
-                total = _ref8[1].total;
-
-            ctx.fillStyle = colorForBase[base];
-            ctx.fillRect(leftPx - 0.6, indicatorHeight + snpToHeight(curr), 1.2, snpToHeight(total));
-            return curr + total;
-          }, 0);
+          var _curr = 0;
+
+          for (var _i3 = 0; _i3 < interbaseEvents.length; _i3++) {
+            var _base = interbaseEvents[_i3];
+            var _total = snpinfo.noncov[_base].total;
+            ctx.fillStyle = colorForBase[_base];
+            ctx.fillRect(_leftPx - 0.6 + extraHorizontallyFlippedOffset, indicatorHeight + indicatorToHeight(_curr), 1.2, indicatorToHeight(_total));
+            _curr += _total;
+          }
         }
 
         if (drawIndicators) {
           var accum = 0;
           var max = 0;
           var maxBase = '';
-          interbaseEvents.forEach(function (_ref9) {
-            var _ref10 = _slicedToArray(_ref9, 2),
-                base = _ref10[0],
-                total = _ref10[1].total;
 
-            accum += total;
+          for (var _i4 = 0; _i4 < interbaseEvents.length; _i4++) {
+            var _base2 = interbaseEvents[_i4];
+            var _total2 = snpinfo.noncov[_base2].total;
+            accum += _total2;
 
-            if (total > max) {
-              max = total;
-              maxBase = base;
+            if (_total2 > max) {
+              max = _total2;
+              maxBase = _base2;
             }
-          }); // avoid drawing a bunch of indicators if coverage is very low e.g.
-          // less than 7
+          } // avoid drawing a bunch of indicators if coverage is very low e.g.
+          // less than 7, uses the prev total in the case of the "cliff"
+
 
-          if (accum > totalScore * indicatorThreshold && totalScore > 7) {
+          var indicatorComparatorScore = Math.max(totalScore, prevTotal);
+
+          if (accum > indicatorComparatorScore * indicatorThreshold && indicatorComparatorScore > 7) {
             ctx.fillStyle = colorForBase[maxBase];
             ctx.beginPath();
-            ctx.moveTo(leftPx - 3, 0);
-            ctx.lineTo(leftPx + 3, 0);
-            ctx.lineTo(leftPx, indicatorHeight);
+            var l = _leftPx + extraHorizontallyFlippedOffset;
+            ctx.moveTo(l - 3.5, 0);
+            ctx.lineTo(l + 3.5, 0);
+            ctx.lineTo(l, indicatorHeight);
             ctx.fill();
           }
         }
-      });
-      ctx.globalAlpha = 0.7;
+
+        prevTotal = totalScore;
+      }
 
       if (drawArcs) {
-        skips.forEach(function (f) {
+        for (var _i5 = 0; _i5 < skips.length; _i5++) {
+          var f = skips[_i5];
+
           var _bpSpanPx = util.bpSpanPx(f.get('start'), f.get('end'), region, bpPerPx),
               _bpSpanPx2 = _slicedToArray(_bpSpanPx, 2),
               left = _bpSpanPx2[0],
@@ -2602,9 +2594,9 @@ var SNPCoverageRenderer = /*#__PURE__*/function (_WiggleBaseRenderer) {
           ctx.beginPath();
           var str = f.get('strand');
           var xs = f.get('xs');
-          var pos = 'rgb(255,200,200)';
-          var neg = 'rgb(200,200,255)';
-          var neutral = 'rgb(200,200,200)';
+          var pos = 'rgba(255,200,200,0.7)';
+          var neg = 'rgba(200,200,255,0.7)';
+          var neutral = 'rgba(200,200,200,0.7)';
 
           if (xs === '+') {
             ctx.strokeStyle = pos;
@@ -2622,13 +2614,13 @@ var SNPCoverageRenderer = /*#__PURE__*/function (_WiggleBaseRenderer) {
           ctx.moveTo(left, height - offset * 2);
           ctx.bezierCurveTo(left, 0, right, 0, right, height - offset * 2);
           ctx.stroke();
-        });
+        }
       }
 
       if (displayCrossHatches) {
         ctx.lineWidth = 1;
         ctx.strokeStyle = 'rgba(140,140,140,0.8)';
-        values.forEach(function (tick) {
+        ticks.values.forEach(function (tick) {
           ctx.beginPath();
           ctx.moveTo(0, Math.round(toY(tick)));
           ctx.lineTo(width, Math.round(toY(tick)));
@@ -2811,6 +2803,16 @@ function getColorBaseMap(theme) {
   };
 }
 
+function getContrastBaseMap(theme) {
+  return Object.fromEntries(Object.entries(getColorBaseMap(theme)).map(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+        key = _ref2[0],
+        value = _ref2[1];
+
+    return [key, theme.palette.getContrastText(value)];
+  }));
+}
+
 var alignmentColoring = {
   color_fwd_strand_not_proper: '#ECC8C8',
   color_rev_strand_not_proper: '#BEBED8',
@@ -2863,14 +2865,14 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
     }
   }, {
     key: "layoutFeature",
-    value: function layoutFeature(_ref) {
-      var feature = _ref.feature,
-          layout = _ref.layout,
-          bpPerPx = _ref.bpPerPx,
-          region = _ref.region,
-          showSoftClip = _ref.showSoftClip,
-          heightPx = _ref.heightPx,
-          displayMode = _ref.displayMode;
+    value: function layoutFeature(_ref3) {
+      var feature = _ref3.feature,
+          layout = _ref3.layout,
+          bpPerPx = _ref3.bpPerPx,
+          region = _ref3.region,
+          showSoftClip = _ref3.showSoftClip,
+          heightPx = _ref3.heightPx,
+          displayMode = _ref3.displayMode;
       var expansionBefore = 0;
       var expansionAfter = 0; // Expand the start and end of feature when softclipping enabled
 
@@ -2990,6 +2992,56 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
 
       return strand === 1 ? 'color_fwd_strand' : 'color_rev_strand';
     }
+  }, {
+    key: "colorByPerBaseLettering",
+    value: function colorByPerBaseLettering(ctx, feat, _config, region, bpPerPx, props) {
+      var colorForBase = props.colorForBase,
+          contrastForBase = props.contrastForBase,
+          charWidth = props.charWidth,
+          charHeight = props.charHeight;
+      var heightLim = charHeight - 2;
+      var feature = feat.feature,
+          topPx = feat.topPx,
+          heightPx = feat.heightPx;
+      var seq = feature.get('seq');
+      var cigarOps = parseCigar(feature.get('CIGAR'));
+      var widthPx = 1 / bpPerPx;
+      var start = feature.get('start');
+      var soffset = 0; // sequence offset
+
+      var roffset = 0; // reference offset
+
+      for (var i = 0; i < cigarOps.length; i += 2) {
+        var len = +cigarOps[i];
+        var op = cigarOps[i + 1];
+
+        if (op === 'S' || op === 'I') {
+          soffset += len;
+        } else if (op === 'D' || op === 'N') {
+          roffset += len;
+        } else if (op === 'M' || op === 'X' || op === '=') {
+          for (var m = 0; m < len; m++) {
+            var letter = seq[soffset + m];
+            ctx.fillStyle = colorForBase[letter];
+
+            var _bpSpanPx3 = util.bpSpanPx(start + roffset + m, start + roffset + m + 1, region, bpPerPx),
+                _bpSpanPx4 = _slicedToArray(_bpSpanPx3, 1),
+                leftPx = _bpSpanPx4[0];
+
+            ctx.fillRect(leftPx, topPx, widthPx + 0.5, heightPx);
+
+            if (widthPx >= charWidth && heightPx >= heightLim) {
+              // normal SNP coloring
+              ctx.fillStyle = contrastForBase[letter];
+              ctx.fillText(letter, leftPx + (widthPx - charWidth) / 2 + 1, topPx + heightPx);
+            }
+          }
+
+          soffset += len;
+          roffset += len;
+        }
+      }
+    }
   }, {
     key: "colorByPerBaseQuality",
     value: function colorByPerBaseQuality(ctx, feat, _config, region, bpPerPx) {
@@ -3003,28 +3055,32 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
       var cigarOps = parseCigar(feature.get('CIGAR'));
       var width = 1 / bpPerPx;
       var start = feature.get('start');
+      var soffset = 0; // sequence offset
+
+      var roffset = 0; // reference offset
 
-      for (var i = 0, j = 0, k = 0; k < scores.length; i += 2, k++) {
+      for (var i = 0; i < cigarOps.length; i += 2) {
         var len = +cigarOps[i];
         var op = cigarOps[i + 1];
 
         if (op === 'S' || op === 'I') {
-          k += len;
+          soffset += len;
         } else if (op === 'D' || op === 'N') {
-          j += len;
+          roffset += len;
         } else if (op === 'M' || op === 'X' || op === '=') {
           for (var m = 0; m < len; m++) {
-            var score = scores[k + m];
+            var score = scores[soffset + m];
             ctx.fillStyle = "hsl(".concat(score === 255 ? 150 : score * 1.5, ",55%,50%)");
 
-            var _bpSpanPx3 = util.bpSpanPx(start + j + m, start + j + m + 1, region, bpPerPx),
-                _bpSpanPx4 = _slicedToArray(_bpSpanPx3, 1),
-                leftPx = _bpSpanPx4[0];
+            var _bpSpanPx5 = util.bpSpanPx(start + roffset + m, start + roffset + m + 1, region, bpPerPx),
+                _bpSpanPx6 = _slicedToArray(_bpSpanPx5, 1),
+                leftPx = _bpSpanPx6[0];
 
             ctx.fillRect(leftPx, topPx, width + 0.5, heightPx);
           }
 
-          j += len;
+          soffset += len;
+          roffset += len;
         }
       }
     } // ML stores probabilities as array of numerics and MP is scaled phred scores
@@ -3065,9 +3121,11 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
       var modifications = getModificationPositions(mm, seq, strand); // probIndex applies across multiple modifications e.g.
 
       var probIndex = 0;
-      modifications.forEach(function (_ref2) {
-        var type = _ref2.type,
-            positions = _ref2.positions;
+
+      for (var i = 0; i < modifications.length; i++) {
+        var _modifications$i = modifications[i],
+            type = _modifications$i.type,
+            positions = _modifications$i.positions;
         var col = modificationTagMap[type] || 'black';
         var base = Color(col);
 
@@ -3079,10 +3137,10 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
             var readPos = _step.value;
 
             if (readPos >= 0 && start + readPos < end) {
-              var _bpSpanPx5 = util.bpSpanPx(start + readPos, start + readPos + 1, region, bpPerPx),
-                  _bpSpanPx6 = _slicedToArray(_bpSpanPx5, 2),
-                  leftPx = _bpSpanPx6[0],
-                  rightPx = _bpSpanPx6[1]; // give it a little boost of 0.1 to not make them fully
+              var _bpSpanPx7 = util.bpSpanPx(start + readPos, start + readPos + 1, region, bpPerPx),
+                  _bpSpanPx8 = _slicedToArray(_bpSpanPx7, 2),
+                  leftPx = _bpSpanPx8[0],
+                  rightPx = _bpSpanPx8[1]; // give it a little boost of 0.1 to not make them fully
               // invisible to avoid confusion
 
 
@@ -3097,10 +3155,10 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
         } finally {
           _iterator.f();
         }
-      });
+      }
     } // Color by methylation is slightly modified version of color by
-    // modifications
-    //
+    // modifications that focuses on CpG sites, with non-methylated CpG colored
+    // blue
 
   }, {
     key: "colorByMethylation",
@@ -3124,9 +3182,12 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
       var rstart = region.start,
           rend = region.end;
       var methBins = new Array(rend - rstart).fill(0);
-      getModificationPositions(mm, seq, strand).forEach(function (_ref3) {
-        var type = _ref3.type,
-            positions = _ref3.positions;
+      var modifications = getModificationPositions(mm, seq, strand);
+
+      for (var i = 0; i < modifications.length; i++) {
+        var _modifications$i2 = modifications[i],
+            type = _modifications$i2.type,
+            positions = _modifications$i2.positions;
 
         if (type === 'm' && positions) {
           var _iterator2 = _createForOfIteratorHelper(getNextRefPos(cigarOps, positions)),
@@ -3147,25 +3208,27 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
             _iterator2.f();
           }
         }
-      });
+      }
 
       for (var j = fstart; j < fend; j++) {
-        var i = j - rstart;
+        var _i = j - rstart;
+
+        if (_i >= 0 && _i < methBins.length) {
+          var l1 = regionSequence[_i].toLowerCase();
+
+          var l2 = regionSequence[_i + 1].toLowerCase(); // if we are zoomed out, display just a block over the cpg
 
-        if (i >= 0 && i < methBins.length) {
-          var l1 = regionSequence[i].toLowerCase();
-          var l2 = regionSequence[i + 1].toLowerCase(); // if we are zoomed out, display just a block over the cpg
 
           if (bpPerPx > 2) {
             if (l1 === 'c' && l2 === 'g') {
-              var s = rstart + i;
+              var s = rstart + _i;
 
-              var _bpSpanPx7 = util.bpSpanPx(s, s + 2, region, bpPerPx),
-                  _bpSpanPx8 = _slicedToArray(_bpSpanPx7, 2),
-                  leftPx = _bpSpanPx8[0],
-                  rightPx = _bpSpanPx8[1];
+              var _bpSpanPx9 = util.bpSpanPx(s, s + 2, region, bpPerPx),
+                  _bpSpanPx10 = _slicedToArray(_bpSpanPx9, 2),
+                  leftPx = _bpSpanPx10[0],
+                  rightPx = _bpSpanPx10[1];
 
-              if (methBins[i] || methBins[i + 1]) {
+              if (methBins[_i] || methBins[_i + 1]) {
                 ctx.fillStyle = 'red';
               } else {
                 ctx.fillStyle = 'blue';
@@ -3177,14 +3240,14 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
           else {
             // color
             if (l1 === 'c' && l2 === 'g') {
-              var _s = rstart + i;
+              var _s = rstart + _i;
 
-              var _bpSpanPx9 = util.bpSpanPx(_s, _s + 1, region, bpPerPx),
-                  _bpSpanPx10 = _slicedToArray(_bpSpanPx9, 2),
-                  _leftPx = _bpSpanPx10[0],
-                  _rightPx = _bpSpanPx10[1];
+              var _bpSpanPx11 = util.bpSpanPx(_s, _s + 1, region, bpPerPx),
+                  _bpSpanPx12 = _slicedToArray(_bpSpanPx11, 2),
+                  _leftPx = _bpSpanPx12[0],
+                  _rightPx = _bpSpanPx12[1];
 
-              if (methBins[i]) {
+              if (methBins[_i]) {
                 ctx.fillStyle = 'red';
               } else {
                 ctx.fillStyle = 'blue';
@@ -3192,12 +3255,12 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
 
               ctx.fillRect(_leftPx, topPx, _rightPx - _leftPx + 0.5, heightPx);
 
-              var _bpSpanPx11 = util.bpSpanPx(_s + 1, _s + 2, region, bpPerPx),
-                  _bpSpanPx12 = _slicedToArray(_bpSpanPx11, 2),
-                  leftPx2 = _bpSpanPx12[0],
-                  rightPx2 = _bpSpanPx12[1];
+              var _bpSpanPx13 = util.bpSpanPx(_s + 1, _s + 2, region, bpPerPx),
+                  _bpSpanPx14 = _slicedToArray(_bpSpanPx13, 2),
+                  leftPx2 = _bpSpanPx14[0],
+                  rightPx2 = _bpSpanPx14[1];
 
-              if (methBins[i + 1]) {
+              if (methBins[_i + 1]) {
                 ctx.fillStyle = 'red';
               } else {
                 ctx.fillStyle = 'blue';
@@ -3221,10 +3284,10 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
       var _regions = _slicedToArray(regions, 1),
           region = _regions[0];
 
-      var _bpSpanPx13 = util.bpSpanPx(feature.get('start'), feature.get('end'), region, bpPerPx),
-          _bpSpanPx14 = _slicedToArray(_bpSpanPx13, 2),
-          leftPx = _bpSpanPx14[0],
-          rightPx = _bpSpanPx14[1];
+      var _bpSpanPx15 = util.bpSpanPx(feature.get('start'), feature.get('end'), region, bpPerPx),
+          _bpSpanPx16 = _slicedToArray(_bpSpanPx15, 2),
+          leftPx = _bpSpanPx16[0],
+          rightPx = _bpSpanPx16[1];
 
       var flip = region.reversed ? -1 : 1;
       var strand = feature.get('strand') * flip;
@@ -3262,7 +3325,11 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
           regions = props.regions,
           colorBy = props.colorBy,
           _props$colorTagMap = props.colorTagMap,
-          colorTagMap = _props$colorTagMap === void 0 ? {} : _props$colorTagMap;
+          colorTagMap = _props$colorTagMap === void 0 ? {} : _props$colorTagMap,
+          colorForBase = props.colorForBase,
+          contrastForBase = props.contrastForBase,
+          charWidth = props.charWidth,
+          charHeight = props.charHeight;
 
       var _ref4 = colorBy || {},
           _ref4$tag = _ref4.tag,
@@ -3329,6 +3396,21 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
         case 'insertSizeAndPairOrientation':
           break;
 
+        case 'modifications':
+        case 'methylation':
+          // this coloring is similar to igv.js, and is helpful to color negative
+          // strand reads differently because their c-g will be flipped (e.g. g-c
+          // read right to left)
+          var flags = feature.get('flags');
+
+          if (flags & 16) {
+            ctx.fillStyle = '#c8dcc8';
+          } else {
+            ctx.fillStyle = '#c8c8c8';
+          }
+
+          break;
+
         case 'normal':
         default:
           if (defaultColor) {
@@ -3351,6 +3433,15 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
           this.colorByPerBaseQuality(ctx, feat, config, region, bpPerPx);
           break;
 
+        case 'perBaseLettering':
+          this.colorByPerBaseLettering(ctx, feat, config, region, bpPerPx, {
+            colorForBase: colorForBase,
+            contrastForBase: contrastForBase,
+            charWidth: charWidth,
+            charHeight: charHeight
+          });
+          break;
+
         case 'modifications':
           this.colorByModifications(ctx, feat, config, region, bpPerPx, props);
           break;
@@ -3362,8 +3453,8 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
     }
   }, {
     key: "drawMismatches",
-    value: function drawMismatches(ctx, feat, props, theme, colorForBase, opts) {
-      var minWidth = opts.minSubfeatureWidth,
+    value: function drawMismatches(ctx, feat, props, opts) {
+      var minSubfeatureWidth = opts.minSubfeatureWidth,
           largeInsertionIndicatorScale = opts.largeInsertionIndicatorScale,
           mismatchAlpha = opts.mismatchAlpha,
           _opts$drawSNPs = opts.drawSNPs,
@@ -3371,7 +3462,9 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
           _opts$drawIndels = opts.drawIndels,
           drawIndels = _opts$drawIndels === void 0 ? true : _opts$drawIndels,
           charWidth = opts.charWidth,
-          charHeight = opts.charHeight;
+          charHeight = opts.charHeight,
+          colorForBase = opts.colorForBase,
+          contrastForBase = opts.contrastForBase;
       var bpPerPx = props.bpPerPx,
           regions = props.regions;
       var heightPx = feat.heightPx,
@@ -3383,7 +3476,7 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
 
       var start = feature.get('start');
       var pxPerBp = Math.min(1 / bpPerPx, 2);
-      var w = Math.max(minWidth, pxPerBp);
+      var w = Math.max(minSubfeatureWidth, pxPerBp);
       var mismatches = feature.get('mismatches');
       var heightLim = charHeight - 2;
 
@@ -3395,22 +3488,25 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
         }
 
         return color;
-      } // two pass rendering: first pass, draw all the mismatches except wide
-      // insertion markers
+      } // extraHorizontallyFlippedOffset is used to draw interbase items, which
+      // are located to the left when forward and right when reversed
 
 
+      var extraHorizontallyFlippedOffset = region.reversed ? 1 / bpPerPx + 1 : -1; // two pass rendering: first pass, draw all the mismatches except wide
+      // insertion markers
+
       for (var i = 0; i < mismatches.length; i += 1) {
         var mismatch = mismatches[i];
         var mstart = start + mismatch.start;
         var mlen = mismatch.length;
         var mbase = mismatch.base;
 
-        var _bpSpanPx15 = util.bpSpanPx(mstart, mstart + mlen, region, bpPerPx),
-            _bpSpanPx16 = _slicedToArray(_bpSpanPx15, 2),
-            leftPx = _bpSpanPx16[0],
-            rightPx = _bpSpanPx16[1];
+        var _bpSpanPx17 = util.bpSpanPx(mstart, mstart + mlen, region, bpPerPx),
+            _bpSpanPx18 = _slicedToArray(_bpSpanPx17, 2),
+            leftPx = _bpSpanPx18[0],
+            rightPx = _bpSpanPx18[1];
 
-        var widthPx = Math.max(minWidth, Math.abs(leftPx - rightPx));
+        var widthPx = Math.max(minSubfeatureWidth, Math.abs(leftPx - rightPx));
 
         if (mismatch.type === 'mismatch' && drawSNPs) {
           var baseColor = colorForBase[mismatch.base] || '#888';
@@ -3419,7 +3515,7 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
 
           if (widthPx >= charWidth && heightPx >= heightLim) {
             // normal SNP coloring
-            ctx.fillStyle = getAlphaColor(theme.palette.getContrastText(baseColor), mismatch);
+            ctx.fillStyle = getAlphaColor(contrastForBase[mismatch.base], mismatch);
             ctx.fillText(mbase, leftPx + (widthPx - charWidth) / 2 + 1, topPx + heightPx);
           }
         } else if (mismatch.type === 'deletion' && drawIndels) {
@@ -3427,40 +3523,38 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
           ctx.fillStyle = _baseColor;
           ctx.fillRect(leftPx, topPx, widthPx, heightPx);
           var txt = "".concat(mismatch.length);
-          var rect = ctx.measureText(txt);
+          var rwidth = util.measureText(txt, 10);
 
-          if (widthPx >= rect.width && heightPx >= heightLim) {
-            ctx.fillStyle = theme.palette.getContrastText(_baseColor);
-            ctx.fillText(txt, leftPx + (rightPx - leftPx) / 2 - rect.width / 2, topPx + heightPx);
+          if (widthPx >= rwidth && heightPx >= heightLim) {
+            ctx.fillStyle = contrastForBase.deletion;
+            ctx.fillText(txt, (leftPx + rightPx) / 2 - rwidth / 2, topPx + heightPx);
           }
         } else if (mismatch.type === 'insertion' && drawIndels) {
           ctx.fillStyle = 'purple';
-          var pos = leftPx - 1;
+          var pos = leftPx + extraHorizontallyFlippedOffset;
           var len = +mismatch.base || mismatch.length;
+          var insW = Math.max(minSubfeatureWidth, Math.min(1.2, 1 / bpPerPx));
 
           if (len < 10) {
-            ctx.fillRect(pos, topPx, w, heightPx);
-
-            if (1 / bpPerPx >= charWidth) {
-              ctx.fillRect(pos - w, topPx, w * 3, 1);
-              ctx.fillRect(pos - w, topPx + heightPx - 1, w * 3, 1);
-            }
+            ctx.fillRect(pos, topPx, insW, heightPx);
 
             if (1 / bpPerPx >= charWidth && heightPx >= heightLim) {
-              ctx.fillText("(".concat(mismatch.base, ")"), leftPx + 2, topPx + heightPx);
+              ctx.fillRect(pos - insW, topPx, insW * 3, 1);
+              ctx.fillRect(pos - insW, topPx + heightPx - 1, insW * 3, 1);
+              ctx.fillText("(".concat(mismatch.base, ")"), pos + 3, topPx + heightPx);
             }
           }
         } else if (mismatch.type === 'hardclip' || mismatch.type === 'softclip') {
           ctx.fillStyle = mismatch.type === 'hardclip' ? 'red' : 'blue';
 
-          var _pos = leftPx - 1;
+          var _pos = leftPx + extraHorizontallyFlippedOffset;
 
-          ctx.fillRect(_pos, topPx + 1, w, heightPx - 2);
-          ctx.fillRect(_pos - w, topPx, w * 3, 1);
-          ctx.fillRect(_pos - w, topPx + heightPx - 1, w * 3, 1);
+          ctx.fillRect(_pos, topPx, w, heightPx);
 
-          if (widthPx >= charWidth && heightPx >= heightLim) {
-            ctx.fillText("(".concat(mismatch.base, ")"), leftPx + 2, topPx + heightPx);
+          if (1 / bpPerPx >= charWidth && heightPx >= heightLim) {
+            ctx.fillRect(_pos - w, topPx, w * 3, 1);
+            ctx.fillRect(_pos - w, topPx + heightPx - 1, w * 3, 1);
+            ctx.fillText("(".concat(mismatch.base, ")"), _pos + 3, topPx + heightPx);
           }
         } else if (mismatch.type === 'skip') {
           // fix to avoid bad rendering note that this was also related to chrome
@@ -3478,16 +3572,16 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
 
 
       if (drawIndels) {
-        for (var _i = 0; _i < mismatches.length; _i += 1) {
-          var _mismatch = mismatches[_i];
+        for (var _i2 = 0; _i2 < mismatches.length; _i2 += 1) {
+          var _mismatch = mismatches[_i2];
 
           var _mstart = start + _mismatch.start;
 
           var _mlen = _mismatch.length;
 
-          var _bpSpanPx17 = util.bpSpanPx(_mstart, _mstart + _mlen, region, bpPerPx),
-              _bpSpanPx18 = _slicedToArray(_bpSpanPx17, 1),
-              _leftPx2 = _bpSpanPx18[0];
+          var _bpSpanPx19 = util.bpSpanPx(_mstart, _mstart + _mlen, region, bpPerPx),
+              _bpSpanPx20 = _slicedToArray(_bpSpanPx19, 1),
+              _leftPx2 = _bpSpanPx20[0];
 
           var _len = +_mismatch.base || _mismatch.length;
 
@@ -3498,13 +3592,12 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
               ctx.fillStyle = 'purple';
               ctx.fillRect(_leftPx2 - 1, topPx, 2, heightPx);
             } else if (heightPx > charHeight) {
-              var _rect = ctx.measureText(_txt);
-
+              var rect = ctx.measureText(_txt);
               var padding = 5;
               ctx.fillStyle = 'purple';
-              ctx.fillRect(_leftPx2 - _rect.width / 2 - padding, topPx, _rect.width + 2 * padding, heightPx);
+              ctx.fillRect(_leftPx2 - rect.width / 2 - padding, topPx, rect.width + 2 * padding, heightPx);
               ctx.fillStyle = 'white';
-              ctx.fillText(_txt, _leftPx2 - _rect.width / 2, topPx + heightPx);
+              ctx.fillText(_txt, _leftPx2 - rect.width / 2, topPx + heightPx);
             } else {
               var _padding = 2;
               ctx.fillStyle = 'purple';
@@ -3547,7 +3640,8 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
           return mismatch.type === 'softclip';
         }).forEach(function (mismatch) {
           var softClipLength = mismatch.cliplen || 0;
-          var softClipStart = mismatch.start === 0 ? feature.get('start') - softClipLength : feature.get('start') + mismatch.start;
+          var s = feature.get('start');
+          var softClipStart = mismatch.start === 0 ? s - softClipLength : s + mismatch.start;
 
           for (var k = 0; k < softClipLength; k += 1) {
             var base = seq.charAt(k + mismatch.start); // If softclip length+start is longer than sequence, no need to
@@ -3557,10 +3651,10 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
               return;
             }
 
-            var _bpSpanPx19 = util.bpSpanPx(softClipStart + k, softClipStart + k + 1, region, bpPerPx),
-                _bpSpanPx20 = _slicedToArray(_bpSpanPx19, 2),
-                softClipLeftPx = _bpSpanPx20[0],
-                softClipRightPx = _bpSpanPx20[1];
+            var _bpSpanPx21 = util.bpSpanPx(softClipStart + k, softClipStart + k + 1, region, bpPerPx),
+                _bpSpanPx22 = _slicedToArray(_bpSpanPx21, 2),
+                softClipLeftPx = _bpSpanPx22[0],
+                softClipRightPx = _bpSpanPx22[1];
 
             var softClipWidthPx = Math.max(minFeatWidth, Math.abs(softClipLeftPx - softClipRightPx)); // Black accounts for IUPAC ambiguity code bases such as N that
             // show in soft clipping
@@ -3583,7 +3677,7 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
       var _makeImageData = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(ctx, layoutRecords, props) {
         var _this2 = this;
 
-        var layout, config, showSoftClip, colorBy, configTheme, mismatchAlpha, minSubfeatureWidth, insertScale, defaultColor, theme, colorForBase, _this$getCharWidthHei2, charWidth, charHeight;
+        var layout, config, showSoftClip, colorBy, configTheme, mismatchAlpha, minSubfeatureWidth, insertScale, defaultColor, theme, colorForBase, contrastForBase, _this$getCharWidthHei2, charWidth, charHeight;
 
         return runtime_1.wrap(function _callee$(_context) {
           while (1) {
@@ -3596,23 +3690,24 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
                 defaultColor = configuration.readConfObject(config, 'color') === '#f0f';
                 theme = ui.createJBrowseTheme(configTheme);
                 colorForBase = getColorBaseMap(theme);
+                contrastForBase = getContrastBaseMap(theme);
 
                 if (layout) {
-                  _context.next = 9;
+                  _context.next = 10;
                   break;
                 }
 
                 throw new Error("layout required");
 
-              case 9:
+              case 10:
                 if (layout.addRect) {
-                  _context.next = 11;
+                  _context.next = 12;
                   break;
                 }
 
                 throw new Error('invalid layout object');
 
-              case 11:
+              case 12:
                 ctx.font = 'bold 10px Courier New,monospace';
                 _this$getCharWidthHei2 = this.getCharWidthHeight(ctx), charWidth = _this$getCharWidthHei2.charWidth, charHeight = _this$getCharWidthHei2.charHeight;
                 layoutRecords.forEach(function (feat) {
@@ -3621,17 +3716,23 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
                   }
 
                   _this2.drawAlignmentRect(ctx, feat, _objectSpread2(_objectSpread2({}, props), {}, {
-                    defaultColor: defaultColor
+                    defaultColor: defaultColor,
+                    colorForBase: colorForBase,
+                    contrastForBase: contrastForBase,
+                    charWidth: charWidth,
+                    charHeight: charHeight
                   }));
 
-                  _this2.drawMismatches(ctx, feat, props, theme, colorForBase, {
+                  _this2.drawMismatches(ctx, feat, props, {
                     mismatchAlpha: mismatchAlpha,
                     drawSNPs: shouldDrawMismatches(colorBy === null || colorBy === void 0 ? void 0 : colorBy.type),
                     drawIndels: shouldDrawMismatches(colorBy === null || colorBy === void 0 ? void 0 : colorBy.type),
                     largeInsertionIndicatorScale: insertScale,
                     minSubfeatureWidth: minSubfeatureWidth,
                     charWidth: charWidth,
-                    charHeight: charHeight
+                    charHeight: charHeight,
+                    colorForBase: colorForBase,
+                    contrastForBase: contrastForBase
                   });
 
                   if (showSoftClip) {
@@ -3639,7 +3740,7 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
                   }
                 });
 
-              case 14:
+              case 15:
               case "end":
                 return _context.stop();
             }
@@ -3696,57 +3797,98 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
       return layoutRecords;
     }
   }, {
-    key: "render",
+    key: "fetchSequence",
     value: function () {
-      var _render = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2(renderProps) {
-        var _this4 = this;
-
-        var sessionId, bpPerPx, regions, adapterConfig, sequenceAdapter, features, layout, layoutRecords, _regions5, region, regionSequence, end, start, originalRefName, refName, _feats$, _yield$getAdapter, dataAdapter, feats, width, height, res, results;
+      var _fetchSequence2 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2(renderProps) {
+        var sessionId, regions, adapterConfig, sequenceAdapter, _yield$getAdapter, dataAdapter, _regions5, region;
 
         return runtime_1.wrap(function _callee2$(_context2) {
           while (1) {
             switch (_context2.prev = _context2.next) {
               case 0:
-                sessionId = renderProps.sessionId, bpPerPx = renderProps.bpPerPx, regions = renderProps.regions, adapterConfig = renderProps.adapterConfig;
+                sessionId = renderProps.sessionId, regions = renderProps.regions, adapterConfig = renderProps.adapterConfig;
                 sequenceAdapter = adapterConfig.sequenceAdapter;
-                _context2.next = 4;
-                return this.getFeatures(renderProps);
+
+                if (sequenceAdapter) {
+                  _context2.next = 4;
+                  break;
+                }
+
+                return _context2.abrupt("return", undefined);
 
               case 4:
-                features = _context2.sent;
+                _context2.next = 6;
+                return dataAdapterCache.getAdapter(this.pluginManager, sessionId, sequenceAdapter);
+
+              case 6:
+                _yield$getAdapter = _context2.sent;
+                dataAdapter = _yield$getAdapter.dataAdapter;
+                _regions5 = _slicedToArray(regions, 1), region = _regions5[0];
+                return _context2.abrupt("return", fetchSequence(region, dataAdapter));
+
+              case 10:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, this);
+      }));
+
+      function fetchSequence$1(_x4) {
+        return _fetchSequence2.apply(this, arguments);
+      }
+
+      return fetchSequence$1;
+    }()
+  }, {
+    key: "render",
+    value: function () {
+      var _render = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee3(renderProps) {
+        var _renderProps$colorBy,
+            _this4 = this;
+
+        var features, layout, regions, bpPerPx, layoutRecords, _regions6, region, regionSequence, end, start, width, height, res, results;
+
+        return runtime_1.wrap(function _callee3$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                _context3.next = 2;
+                return this.getFeatures(renderProps);
+
+              case 2:
+                features = _context3.sent;
                 layout = this.createLayoutInWorker(renderProps);
+                regions = renderProps.regions, bpPerPx = renderProps.bpPerPx;
                 layoutRecords = this.layoutFeats(_objectSpread2(_objectSpread2({}, renderProps), {}, {
                   features: features,
                   layout: layout
                 }));
-                _regions5 = _slicedToArray(regions, 1), region = _regions5[0];
-                end = region.end, start = region.start, originalRefName = region.originalRefName, refName = region.refName;
+                _regions6 = _slicedToArray(regions, 1), region = _regions6[0]; // only need reference sequence if there are features and only for some
+                // cases
 
-                if (!sequenceAdapter) {
-                  _context2.next = 18;
+                if (!(features.size && shouldFetchReferenceSequence((_renderProps$colorBy = renderProps.colorBy) === null || _renderProps$colorBy === void 0 ? void 0 : _renderProps$colorBy.type))) {
+                  _context3.next = 13;
                   break;
                 }
 
-                _context2.next = 12;
-                return dataAdapterCache.getAdapter(this.pluginManager, sessionId, sequenceAdapter);
+                _context3.next = 10;
+                return this.fetchSequence(renderProps);
 
-              case 12:
-                _yield$getAdapter = _context2.sent;
-                dataAdapter = _yield$getAdapter.dataAdapter;
-                _context2.next = 16;
-                return dataAdapter.getFeatures(_objectSpread2(_objectSpread2({}, region), {}, {
-                  refName: originalRefName || refName,
-                  end: region.end + 1
-                })).pipe(operators.toArray()).toPromise();
+              case 10:
+                _context3.t0 = _context3.sent;
+                _context3.next = 14;
+                break;
 
-              case 16:
-                feats = _context2.sent;
-                regionSequence = (_feats$ = feats[0]) === null || _feats$ === void 0 ? void 0 : _feats$.get('seq');
+              case 13:
+                _context3.t0 = undefined;
 
-              case 18:
+              case 14:
+                regionSequence = _context3.t0;
+                end = region.end, start = region.start;
                 width = (end - start) / bpPerPx;
                 height = Math.max(layout.getTotalHeight(), 1);
-                _context2.next = 22;
+                _context3.next = 20;
                 return offscreenCanvasUtils.renderToAbstractCanvas(width, height, renderProps, function (ctx) {
                   return _this4.makeImageData(ctx, layoutRecords, _objectSpread2(_objectSpread2({}, renderProps), {}, {
                     layout: layout,
@@ -3755,9 +3897,9 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
                   }));
                 });
 
-              case 22:
-                res = _context2.sent;
-                _context2.next = 25;
+              case 20:
+                res = _context3.sent;
+                _context3.next = 23;
                 return _get(_getPrototypeOf(PileupRenderer.prototype), "render", this).call(this, _objectSpread2(_objectSpread2(_objectSpread2({}, renderProps), res), {}, {
                   features: features,
                   layout: layout,
@@ -3765,9 +3907,9 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
                   width: width
                 }));
 
-              case 25:
-                results = _context2.sent;
-                return _context2.abrupt("return", _objectSpread2(_objectSpread2(_objectSpread2({}, results), res), {}, {
+              case 23:
+                results = _context3.sent;
+                return _context3.abrupt("return", _objectSpread2(_objectSpread2(_objectSpread2({}, results), res), {}, {
                   features: features,
                   layout: layout,
                   height: height,
@@ -3775,15 +3917,15 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
                   maxHeightReached: layout.maxHeightReached
                 }));
 
-              case 27:
+              case 25:
               case "end":
-                return _context2.stop();
+                return _context3.stop();
             }
           }
-        }, _callee2, this);
+        }, _callee3, this);
       }));
 
-      function render(_x4) {
+      function render(_x5) {
         return _render.apply(this, arguments);
       }
 
@@ -3943,10 +4085,15 @@ function PileupRendering(props) {
 
     var offsetX = 0;
     var offsetY = 0;
+    var canvas = highlightOverlayCanvas.current;
 
-    if (highlightOverlayCanvas.current) {
-      offsetX = highlightOverlayCanvas.current.getBoundingClientRect().left;
-      offsetY = highlightOverlayCanvas.current.getBoundingClientRect().top;
+    if (canvas) {
+      var _canvas$getBoundingCl = canvas.getBoundingClientRect(),
+          left = _canvas$getBoundingCl.left,
+          top = _canvas$getBoundingCl.top;
+
+      offsetX = left;
+      offsetY = top;
     }
 
     offsetX = event.clientX - offsetX;
@@ -4330,45 +4477,51 @@ var stateModelFactory = function stateModelFactory(pluginManager, configSchema)
   });
 };
 
+var useStyles = /*#__PURE__*/core.makeStyles(function () {
+  return {
+    resizeHandle: {
+      height: 2,
+      position: 'absolute',
+      zIndex: 2
+    }
+  };
+});
+
 function AlignmentsDisplay(_ref) {
   var model = _ref.model;
   var PileupDisplay = model.PileupDisplay,
       SNPCoverageDisplay = model.SNPCoverageDisplay,
       showPileup = model.showPileup,
       showCoverage = model.showCoverage;
+  var classes = useStyles();
+  var top = SNPCoverageDisplay.height;
   return /*#__PURE__*/React__default.createElement("div", {
     "data-testid": "display-".concat(configuration.getConf(model, 'displayId')),
     style: {
       position: 'relative'
     }
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, showCoverage ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     "data-testid": "Blockset-snpcoverage"
-  }, showCoverage ? /*#__PURE__*/React__default.createElement(SNPCoverageDisplay.RenderingComponent, {
+  }, /*#__PURE__*/React__default.createElement(SNPCoverageDisplay.RenderingComponent, {
     model: SNPCoverageDisplay
-  }) : null), /*#__PURE__*/React__default.createElement(ui.ResizeHandle, {
+  })), /*#__PURE__*/React__default.createElement(ui.ResizeHandle, {
     onDrag: function onDrag(delta) {
-      if (SNPCoverageDisplay) {
-        SNPCoverageDisplay.setHeight(SNPCoverageDisplay.height + delta);
-        return delta;
-      }
-
-      return 0;
+      SNPCoverageDisplay.setHeight(SNPCoverageDisplay.height + delta);
+      return delta;
     },
+    className: classes.resizeHandle,
     style: {
-      position: 'absolute',
-      top: showCoverage ? SNPCoverageDisplay.height + 2 : 0,
-      height: 3
+      top: top
     }
-  }), /*#__PURE__*/React__default.createElement("div", {
+  })) : null, showPileup ? /*#__PURE__*/React__default.createElement("div", {
     "data-testid": "Blockset-pileup",
     style: {
       position: 'absolute',
-      top: showCoverage ? SNPCoverageDisplay.height + 5 : 0,
-      height: 3
+      top: showCoverage ? SNPCoverageDisplay.height : 0
     }
-  }, showPileup ? /*#__PURE__*/React__default.createElement(PileupDisplay.RenderingComponent, {
+  }, /*#__PURE__*/React__default.createElement(PileupDisplay.RenderingComponent, {
     model: PileupDisplay
-  }) : null));
+  })) : null);
 }
 
 var ReactComponent$1 = /*#__PURE__*/mobxReact.observer(AlignmentsDisplay);
@@ -4417,10 +4570,10 @@ function SNPCoverageConfigFactory(pluginManager) {
       description: 'draw upside down',
       defaultValue: false
     },
-    headroom: {
-      type: 'number',
-      description: 'round the upper value of the domain scale to the nearest N',
-      defaultValue: 0
+    multiTicks: {
+      type: 'boolean',
+      description: 'Display multiple values for the ticks',
+      defaultValue: false
     },
     renderers: configuration.ConfigurationSchema('RenderersConfiguration', {
       SNPCoverageRenderer: SNPCoverageRendererConfigSchema
@@ -4440,10 +4593,10 @@ var TooltipContents = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
   var start = feature.get('start');
   var end = feature.get('end');
   var name = feature.get('refName');
+  var info = feature.get('snpinfo');
   var loc = [name, start === end ? en(start) : "".concat(en(start), "..").concat(en(end))].filter(function (f) {
     return !!f;
   }).join(':');
-  var info = feature.get('snpinfo');
   var total = info === null || info === void 0 ? void 0 : info.total;
   return /*#__PURE__*/React__default.createElement("div", {
     ref: ref
@@ -4460,7 +4613,7 @@ var TooltipContents = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
       var strands = score.strands;
       return /*#__PURE__*/React__default.createElement("tr", {
         key: base
-      }, /*#__PURE__*/React__default.createElement("td", null, base.toUpperCase()), /*#__PURE__*/React__default.createElement("td", null, score.total), /*#__PURE__*/React__default.createElement("td", null, base === 'total' || base === 'skip' ? '---' : "".concat(Math.floor(score.total / total * 100), "%")), /*#__PURE__*/React__default.createElement("td", null, strands['-1'] ? "".concat(strands['-1'], "(-)") : '', strands['1'] ? "".concat(strands['1'], "(+)") : ''), /*#__PURE__*/React__default.createElement("td", null, key));
+      }, /*#__PURE__*/React__default.createElement("td", null, base.toUpperCase()), /*#__PURE__*/React__default.createElement("td", null, score.total), /*#__PURE__*/React__default.createElement("td", null, base === 'total' || base === 'skip' ? '---' : "".concat(Math.floor(score.total / (total || score.total || 1) * 100), "%")), /*#__PURE__*/React__default.createElement("td", null, strands['-1'] ? "".concat(strands['-1'], "(-)") : '', strands['1'] ? "".concat(strands['1'], "(+)") : ''), /*#__PURE__*/React__default.createElement("td", null, key));
     });
   }))));
 });
@@ -5301,6 +5454,13 @@ var stateModelFactory$2 = function stateModelFactory(configSchema) {
                 type: 'perBaseQuality'
               });
             }
+          }, {
+            label: 'Per-base lettering',
+            onClick: function onClick() {
+              self.setColorScheme({
+                type: 'perBaseLettering'
+              });
+            }
           }, {
             label: 'Modifications or methylation',
             onClick: function onClick() {
@@ -5764,12 +5924,14 @@ var AlignmentsPlugin = /*#__PURE__*/function (_Plugin) {
 }(Plugin);
 
 var CramSlightlyLazyFeature = /*#__PURE__*/function () {
+  // uses parameter properties to automatically create fields on the class
+  // https://www.typescriptlang.org/docs/handbook/classes.html#parameter-properties
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  function CramSlightlyLazyFeature(record, store) {
+  function CramSlightlyLazyFeature(record, _store) {
     _classCallCheck(this, CramSlightlyLazyFeature);
 
     this.record = record;
-    this._store = store;
+    this._store = _store;
   }
 
   _createClass(CramSlightlyLazyFeature, [{
@@ -6012,7 +6174,7 @@ var CramSlightlyLazyFeature = /*#__PURE__*/function () {
     value: function tags() {
       var properties = Object.getOwnPropertyNames(CramSlightlyLazyFeature.prototype);
       return properties.filter(function (prop) {
-        return prop.startsWith('_get_') && prop !== '_get_mismatches' && prop !== '_get_skips_and_dels' && prop !== '_get_cram_read_features';
+        return prop.startsWith('_get_') && prop !== '_get_mismatches' && prop !== '_get_cram_read_features';
       }).map(function (methodName) {
         return methodName.replace('_get_', '');
       });
@@ -6176,11 +6338,6 @@ var CramSlightlyLazyFeature = /*#__PURE__*/function () {
       });
       return mismatches;
     }
-  }, {
-    key: "_get_skips_and_dels",
-    value: function _get_skips_and_dels() {
-      return this._get_mismatches();
-    }
   }]);
 
   return CramSlightlyLazyFeature;
@@ -6774,6 +6931,8 @@ var CramAdapter$1 = {
 };
 
 var BamSlightlyLazyFeature = /*#__PURE__*/function () {
+  // uses parameter properties to automatically create fields on the class
+  // https://www.typescriptlang.org/docs/handbook/classes.html#parameter-properties
   function BamSlightlyLazyFeature(record, adapter, ref) {
     _classCallCheck(this, BamSlightlyLazyFeature);
 
@@ -6840,18 +6999,6 @@ var BamSlightlyLazyFeature = /*#__PURE__*/function () {
     value: function _get_seq() {
       return this.record.getReadBases();
     }
-  }, {
-    key: "_get_MD",
-    value: function _get_MD() {
-      var md = this.record.get('MD');
-      var seq = this.get('seq');
-
-      if (!md && seq && this.ref) {
-        return generateMD(this.ref, this.record.getReadBases(), this.get('CIGAR'));
-      }
-
-      return md;
-    }
   }, {
     key: "qualRaw",
     value: function qualRaw() {
@@ -6865,7 +7012,7 @@ var BamSlightlyLazyFeature = /*#__PURE__*/function () {
     value: function tags() {
       var properties = Object.getOwnPropertyNames(BamSlightlyLazyFeature.prototype);
       return _toConsumableArray(new Set(properties.filter(function (prop) {
-        return prop.startsWith('_get_') && prop !== '_get_mismatches' && prop !== '_get_skips_and_dels' && prop !== '_get_cram_read_features' && prop !== '_get_tags' && prop !== '_get_next_seq_id' && prop !== '_get_seq_id';
+        return prop.startsWith('_get_') && prop !== '_get_mismatches' && prop !== '_get_tags' && prop !== '_get_next_seq_id' && prop !== '_get_seq_id';
       }).map(function (methodName) {
         return methodName.replace('_get_', '');
       }).concat(this.record._tags())));
@@ -6921,61 +7068,10 @@ var BamSlightlyLazyFeature = /*#__PURE__*/function () {
         uniqueId: this.id()
       });
     }
-  }, {
-    key: "_get_skips_and_dels",
-    value: function _get_skips_and_dels() {
-      var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
-        cigarAttributeName: 'CIGAR'
-      };
-      var cigarAttributeName = opts.cigarAttributeName;
-      var mismatches = [];
-      var cigarOps = []; // parse the CIGAR tag if it has one
-
-      var cigarString = this.get(cigarAttributeName);
-
-      if (cigarString) {
-        cigarOps = parseCigar(cigarString);
-        mismatches = mismatches.concat(cigarToMismatches(cigarOps, this.get('seq'), this.qualRaw()));
-      }
-
-      return mismatches;
-    }
   }, {
     key: "_get_mismatches",
     value: function _get_mismatches() {
-      var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-          _ref$cigarAttributeNa = _ref.cigarAttributeName,
-          cigarAttributeName = _ref$cigarAttributeNa === void 0 ? 'CIGAR' : _ref$cigarAttributeNa,
-          _ref$mdAttributeName = _ref.mdAttributeName,
-          mdAttributeName = _ref$mdAttributeName === void 0 ? 'MD' : _ref$mdAttributeName;
-
-      var mismatches = [];
-      var cigarOps = []; // parse the CIGAR tag if it has one
-
-      var cigarString = this.get(cigarAttributeName);
-      var seq = this.get('seq');
-      var qual = this.qualRaw();
-
-      if (cigarString) {
-        cigarOps = parseCigar(cigarString);
-        mismatches = mismatches.concat(cigarToMismatches(cigarOps, seq, qual));
-      } // now let's look for CRAM or MD mismatches
-
-
-      var mdString = this.get(mdAttributeName);
-
-      if (mdString) {
-        mismatches = mismatches.concat(mdToMismatches(mdString, cigarOps, mismatches, seq, qual));
-      } // uniqify the mismatches
-
-
-      var seen = {};
-      return mismatches.filter(function (m) {
-        var key = "".concat(m.type, ",").concat(m.start, ",").concat(m.length);
-        var s = seen[key];
-        seen[key] = true;
-        return !s;
-      });
+      return getMismatches(this.get('CIGAR'), this.get('MD'), this.get('seq'), this.ref, this.qualRaw());
     }
   }, {
     key: "_get_clipPos",
@@ -7005,7 +7101,7 @@ var BamAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
     // configure method allows derived classes to override this behavior
     function () {
       var _configure = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
-        var bamLocation, location, indexType, chunkSizeLimit, bam$1, adapterConfig;
+        var bamLocation, location, indexType, bam$1, adapterConfig;
         return runtime_1.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
@@ -7014,13 +7110,16 @@ var BamAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
                   bamLocation = configuration.readConfObject(this.config, 'bamLocation');
                   location = configuration.readConfObject(this.config, ['index', 'location']);
                   indexType = configuration.readConfObject(this.config, ['index', 'indexType']);
-                  chunkSizeLimit = configuration.readConfObject(this.config, 'chunkSizeLimit');
                   bam$1 = new bam.BamFile({
                     bamFilehandle: io.openLocation(bamLocation, this.pluginManager),
                     csiFilehandle: indexType === 'CSI' ? io.openLocation(location, this.pluginManager) : undefined,
                     baiFilehandle: indexType !== 'CSI' ? io.openLocation(location, this.pluginManager) : undefined,
-                    chunkSizeLimit: chunkSizeLimit,
-                    fetchSizeLimit: 100000000
+                    // chunkSizeLimit and fetchSizeLimit are more troublesome than
+                    // helpful, and have given overly large values on the ultra long
+                    // nanopore reads even with 500MB limits, so disabled with infinity
+                    chunkSizeLimit: Infinity,
+                    fetchSizeLimit: Infinity,
+                    yieldThreadTime: Infinity
                   });
                   adapterConfig = configuration.readConfObject(this.config, 'sequenceAdapter');
 
@@ -7232,7 +7331,7 @@ var BamAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
     key: "seqFetch",
     value: function () {
       var _seqFetch = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee7(refName, start, end) {
-        var _yield$this$configure3, sequenceAdapter, refSeqStore, features, seqChunks, trimmed, sequence;
+        var _yield$this$configure3, sequenceAdapter, refSeqStore, features, seqChunks, sequence;
 
         return runtime_1.wrap(function _callee7$(_context7) {
           while (1) {
@@ -7273,7 +7372,7 @@ var BamAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
 
               case 12:
                 seqChunks = _context7.sent;
-                trimmed = [];
+                sequence = '';
                 seqChunks.sort(function (a, b) {
                   return a.get('start') - b.get('start');
                 }).forEach(function (chunk) {
@@ -7283,21 +7382,20 @@ var BamAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
                   var trimEnd = Math.min(end - chunkStart, chunkEnd - chunkStart);
                   var trimLength = trimEnd - trimStart;
                   var chunkSeq = chunk.get('seq') || chunk.get('residues');
-                  trimmed.push(chunkSeq.substr(trimStart, trimLength));
+                  sequence += chunkSeq.substr(trimStart, trimLength);
                 });
-                sequence = trimmed.join('');
 
                 if (!(sequence.length !== end - start)) {
-                  _context7.next = 18;
+                  _context7.next = 17;
                   break;
                 }
 
                 throw new Error("sequence fetch failed: fetching ".concat(refName, ":").concat((start - 1).toLocaleString(), "-").concat(end.toLocaleString(), " returned ").concat(sequence.length.toLocaleString(), " bases, but should have returned ").concat((end - start).toLocaleString()));
 
-              case 18:
+              case 17:
                 return _context7.abrupt("return", sequence);
 
-              case 19:
+              case 18:
               case "end":
                 return _context7.stop();
             }
@@ -7365,7 +7463,7 @@ var BamAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
                   record = _step.value;
                   ref = void 0;
 
-                  if (record.get('md')) {
+                  if (record.get('MD')) {
                     _context8.next = 21;
                     break;
                   }
@@ -7560,7 +7658,7 @@ var HtsgetBamAdapter$1 = {
   'default': HtsgetBamAdapter
 };
 
-var useStyles = /*#__PURE__*/core.makeStyles(function (theme) {
+var useStyles$1 = /*#__PURE__*/core.makeStyles(function (theme) {
   return {
     root: {
       width: 300
@@ -7575,7 +7673,7 @@ var useStyles = /*#__PURE__*/core.makeStyles(function (theme) {
 });
 
 function ColorByTagDlg$1(props) {
-  var classes = useStyles();
+  var classes = useStyles$1();
   var model = props.model,
       handleClose = props.handleClose;
 
@@ -7596,14 +7694,12 @@ function ColorByTagDlg$1(props) {
     style: {
       overflowX: 'hidden'
     }
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: classes.root
   }, /*#__PURE__*/React__default.createElement(core.Typography, null, "Enter tag to color by: "), /*#__PURE__*/React__default.createElement(core.Typography, {
     color: "textSecondary"
   }, "Examples: XS or TS for RNA-seq inferred read strand, ts (lower-case) for minimap2 read strand, HP for haplotype, RG for read group, etc."), /*#__PURE__*/React__default.createElement(core.TextField, {
     value: tag,
     onChange: function onChange(event) {
-      setTag(event.target.value);
+      return setTag(event.target.value);
     },
     placeholder: "Enter tag name",
     inputProps: {
@@ -7614,12 +7710,9 @@ function ColorByTagDlg$1(props) {
     helperText: tag.length === 2 && !validTag ? 'Not a valid tag' : '',
     autoComplete: "off",
     "data-testid": "color-tag-name"
-  }), /*#__PURE__*/React__default.createElement(core.Button, {
+  }), /*#__PURE__*/React__default.createElement(core.DialogActions, null, /*#__PURE__*/React__default.createElement(core.Button, {
     variant: "contained",
     color: "primary",
-    style: {
-      marginLeft: 20
-    },
     onClick: function onClick() {
       model.setColorScheme({
         type: 'tag',
@@ -7628,7 +7721,11 @@ function ColorByTagDlg$1(props) {
       handleClose();
     },
     disabled: !validTag
-  }, "Submit"))));
+  }, "Submit"), /*#__PURE__*/React__default.createElement(core.Button, {
+    variant: "contained",
+    color: "secondary",
+    onClick: handleClose
+  }, "Cancel"))));
 }
 
 var ColorByTag = /*#__PURE__*/mobxReact.observer(ColorByTagDlg$1);
@@ -7638,11 +7735,8 @@ var ColorByTag$1 = {
   'default': ColorByTag
 };
 
-var useStyles$1 = /*#__PURE__*/core.makeStyles(function (theme) {
+var useStyles$2 = /*#__PURE__*/core.makeStyles(function (theme) {
   return {
-    root: {
-      width: 500
-    },
     paper: {
       padding: theme.spacing(2),
       margin: theme.spacing(2)
@@ -7696,7 +7790,7 @@ function FilterByTagDlg$1(props) {
 
   var model = props.model,
       handleClose = props.handleClose;
-  var classes = useStyles$1();
+  var classes = useStyles$2();
   var filterBy = model.filterBy;
 
   var _useState = React.useState(filterBy === null || filterBy === void 0 ? void 0 : filterBy.flagInclude),
@@ -7735,9 +7829,7 @@ function FilterByTagDlg$1(props) {
     onClick: handleClose
   }, /*#__PURE__*/React__default.createElement(CloseIcon, null))), /*#__PURE__*/React__default.createElement(core.DialogContent, null, /*#__PURE__*/React__default.createElement(core.Typography, null, "Set filter bitmask options. Refer to ", /*#__PURE__*/React__default.createElement(core.Link, {
     href: site
-  }, site), ' ', "for details"), /*#__PURE__*/React__default.createElement("div", {
-    className: classes.root
-  }, /*#__PURE__*/React__default.createElement(core.Paper, {
+  }, site), ' ', "for details"), /*#__PURE__*/React__default.createElement(core.Paper, {
     className: classes.paper,
     variant: "outlined"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -7792,9 +7884,11 @@ function FilterByTagDlg$1(props) {
       'data-testid': 'color-tag-readname-input'
     },
     "data-testid": "color-tag-readname"
-  })), /*#__PURE__*/React__default.createElement(core.Button, {
+  })), /*#__PURE__*/React__default.createElement(core.DialogActions, null, /*#__PURE__*/React__default.createElement(core.Button, {
     variant: "contained",
     color: "primary",
+    autoFocus: true,
+    type: "submit",
     onClick: function onClick() {
       model.setFilterBy({
         flagInclude: flagInclude,
@@ -7807,7 +7901,13 @@ function FilterByTagDlg$1(props) {
       });
       handleClose();
     }
-  }, "Submit"))));
+  }, "Submit"), /*#__PURE__*/React__default.createElement(core.Button, {
+    variant: "contained",
+    color: "secondary",
+    onClick: function onClick() {
+      return handleClose();
+    }
+  }, "Cancel"))));
 }
 
 var FilterByTag = /*#__PURE__*/mobxReact.observer(FilterByTagDlg$1);
@@ -7817,7 +7917,7 @@ var FilterByTag$1 = {
   'default': FilterByTag
 };
 
-var useStyles$2 = /*#__PURE__*/core.makeStyles(function (theme) {
+var useStyles$3 = /*#__PURE__*/core.makeStyles(function (theme) {
   return {
     root: {
       margin: 0,
@@ -7833,7 +7933,7 @@ var useStyles$2 = /*#__PURE__*/core.makeStyles(function (theme) {
 });
 
 function SortByTagDlg$1(props) {
-  var classes = useStyles$2();
+  var classes = useStyles$3();
   var model = props.model,
       handleClose = props.handleClose;
 
@@ -7850,12 +7950,12 @@ function SortByTagDlg$1(props) {
     "aria-label": "close",
     className: classes.closeButton,
     onClick: handleClose
-  }, /*#__PURE__*/React__default.createElement(CloseIcon, null))), /*#__PURE__*/React__default.createElement(core.DialogContent, null, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(core.Typography, null, "Set the tag to sort by"), /*#__PURE__*/React__default.createElement(core.Typography, {
+  }, /*#__PURE__*/React__default.createElement(CloseIcon, null))), /*#__PURE__*/React__default.createElement(core.DialogContent, null, /*#__PURE__*/React__default.createElement(core.Typography, null, "Set the tag to sort by"), /*#__PURE__*/React__default.createElement(core.Typography, {
     color: "textSecondary"
   }, "Examples: HP for haplotype, RG for read group, etc."), /*#__PURE__*/React__default.createElement(core.TextField, {
     value: tag,
     onChange: function onChange(event) {
-      setTag(event.target.value);
+      return setTag(event.target.value);
     },
     placeholder: "Enter tag name",
     inputProps: {
@@ -7866,14 +7966,22 @@ function SortByTagDlg$1(props) {
     helperText: tag.length === 2 && !validTag ? 'Not a valid tag' : '',
     autoComplete: "off",
     "data-testid": "sort-tag-name"
-  }), /*#__PURE__*/React__default.createElement(core.Button, {
+  }), /*#__PURE__*/React__default.createElement(core.DialogActions, null, /*#__PURE__*/React__default.createElement(core.Button, {
     variant: "contained",
     color: "primary",
+    type: "submit",
+    autoFocus: true,
     onClick: function onClick() {
       model.setSortedBy('tag', tag);
       handleClose();
     }
-  }, "Submit"))));
+  }, "Submit"), /*#__PURE__*/React__default.createElement(core.Button, {
+    variant: "contained",
+    color: "secondary",
+    onClick: function onClick() {
+      return handleClose();
+    }
+  }, "Cancel"))));
 }
 
 var SortByTag = /*#__PURE__*/mobxReact.observer(SortByTagDlg$1);
@@ -7883,11 +7991,8 @@ var SortByTag$1 = {
   'default': SortByTag
 };
 
-var useStyles$3 = /*#__PURE__*/core.makeStyles(function (theme) {
+var useStyles$4 = /*#__PURE__*/core.makeStyles(function (theme) {
   return {
-    root: {
-      margin: theme.spacing(4)
-    },
     closeButton: {
       position: 'absolute',
       right: theme.spacing(1),
@@ -7898,7 +8003,7 @@ var useStyles$3 = /*#__PURE__*/core.makeStyles(function (theme) {
 });
 
 function SetFeatureHeightDlg$1(props) {
-  var classes = useStyles$3();
+  var classes = useStyles$4();
   var model = props.model,
       handleClose = props.handleClose;
   var featureHeightSetting = model.featureHeightSetting,
@@ -7921,10 +8026,9 @@ function SetFeatureHeightDlg$1(props) {
   }, /*#__PURE__*/React__default.createElement(core.DialogTitle, null, "Set feature height", /*#__PURE__*/React__default.createElement(core.IconButton, {
     className: classes.closeButton,
     onClick: handleClose
-  }, /*#__PURE__*/React__default.createElement(CloseIcon, null))), /*#__PURE__*/React__default.createElement(core.DialogContent, null, /*#__PURE__*/React__default.createElement(core.Typography, null, "Adjust the feature height and whether there is any spacing between features. Setting feature height to 1 and removing spacing makes the display very compact"), /*#__PURE__*/React__default.createElement("div", {
-    className: classes.root
-  }, /*#__PURE__*/React__default.createElement(core.Typography, null, "Enter feature height: "), /*#__PURE__*/React__default.createElement(core.TextField, {
+  }, /*#__PURE__*/React__default.createElement(CloseIcon, null))), /*#__PURE__*/React__default.createElement(core.DialogContent, null, /*#__PURE__*/React__default.createElement(core.Typography, null, "Adjust the feature height and whether there is any spacing between features. Setting feature height to 1 and removing spacing makes the display very compact."), /*#__PURE__*/React__default.createElement(core.TextField, {
     value: height,
+    helperText: "Feature height",
     onChange: function onChange(event) {
       setHeight(event.target.value);
     }
@@ -7938,20 +8042,24 @@ function SetFeatureHeightDlg$1(props) {
       }
     }),
     label: "Remove spacing between features in y-direction?"
-  }), /*#__PURE__*/React__default.createElement(core.Button, {
+  }), /*#__PURE__*/React__default.createElement(core.DialogActions, null, /*#__PURE__*/React__default.createElement(core.Button, {
     variant: "contained",
     color: "primary",
     type: "submit",
-    style: {
-      marginLeft: 20
-    },
+    autoFocus: true,
     disabled: !ok,
     onClick: function onClick() {
       model.setFeatureHeight(height !== '' && !Number.isNaN(+height) ? +height : undefined);
       model.setNoSpacing(noSpacing);
       handleClose();
     }
-  }, "Submit"))));
+  }, "Submit"), /*#__PURE__*/React__default.createElement(core.Button, {
+    variant: "contained",
+    color: "secondary",
+    onClick: function onClick() {
+      return handleClose();
+    }
+  }, "Cancel"))));
 }
 
 var SetFeatureHeight = /*#__PURE__*/mobxReact.observer(SetFeatureHeightDlg$1);
@@ -7961,7 +8069,7 @@ var SetFeatureHeight$1 = {
   'default': SetFeatureHeight
 };
 
-var useStyles$4 = /*#__PURE__*/core.makeStyles(function (theme) {
+var useStyles$5 = /*#__PURE__*/core.makeStyles(function (theme) {
   return {
     root: {
       width: 500
@@ -7981,7 +8089,7 @@ var useStyles$4 = /*#__PURE__*/core.makeStyles(function (theme) {
 function SetMaxHeightDlg$1(props) {
   var model = props.model,
       handleClose = props.handleClose;
-  var classes = useStyles$4();
+  var classes = useStyles$5();
   var _model$maxHeight = model.maxHeight,
       maxHeight = _model$maxHeight === void 0 ? '' : _model$maxHeight;
 
@@ -7993,32 +8101,34 @@ function SetMaxHeightDlg$1(props) {
   return /*#__PURE__*/React__default.createElement(core.Dialog, {
     open: true,
     onClose: handleClose
-  }, /*#__PURE__*/React__default.createElement(core.DialogTitle, {
-    id: "alert-dialog-title"
-  }, "Filter options", /*#__PURE__*/React__default.createElement(core.IconButton, {
+  }, /*#__PURE__*/React__default.createElement(core.DialogTitle, null, "Filter options", /*#__PURE__*/React__default.createElement(core.IconButton, {
     "aria-label": "close",
     className: classes.closeButton,
     onClick: handleClose
-  }, /*#__PURE__*/React__default.createElement(CloseIcon, null))), /*#__PURE__*/React__default.createElement(core.DialogContent, null, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(CloseIcon, null))), /*#__PURE__*/React__default.createElement(core.DialogContent, {
     className: classes.root
-  }, /*#__PURE__*/React__default.createElement(core.Typography, null, "Set max height for the track"), /*#__PURE__*/React__default.createElement(core.TextField, {
+  }, /*#__PURE__*/React__default.createElement(core.Typography, null, "Set max height for the track. For example, you can increase this if the layout says \"Max height reached\""), /*#__PURE__*/React__default.createElement(core.TextField, {
     value: max,
     onChange: function onChange(event) {
       setMax(event.target.value);
     },
     placeholder: "Enter max height for layout"
-  }), /*#__PURE__*/React__default.createElement(core.Button, {
+  }), /*#__PURE__*/React__default.createElement(core.DialogActions, null, /*#__PURE__*/React__default.createElement(core.Button, {
     variant: "contained",
     color: "primary",
     type: "submit",
-    style: {
-      marginLeft: 20
-    },
+    autoFocus: true,
     onClick: function onClick() {
       model.setMaxHeight(max !== '' && !Number.isNaN(+max) ? +max : undefined);
       handleClose();
     }
-  }, "Submit"))));
+  }, "Submit"), /*#__PURE__*/React__default.createElement(core.Button, {
+    variant: "contained",
+    color: "secondary",
+    onClick: function onClick() {
+      return handleClose();
+    }
+  }, "Cancel"))));
 }
 
 var SetMaxHeight = /*#__PURE__*/mobxReact.observer(SetMaxHeightDlg$1);
@@ -8028,9 +8138,8 @@ var SetMaxHeight$1 = {
   'default': SetMaxHeight
 };
 
-var useStyles$5 = /*#__PURE__*/core.makeStyles(function (theme) {
+var useStyles$6 = /*#__PURE__*/core.makeStyles(function (theme) {
   return {
-    root: {},
     closeButton: {
       position: 'absolute',
       right: theme.spacing(1),
@@ -8049,7 +8158,7 @@ var useStyles$5 = /*#__PURE__*/core.makeStyles(function (theme) {
 
 function ModificationTable(_ref) {
   var modifications = _ref.modifications;
-  var classes = useStyles$5();
+  var classes = useStyles$6();
   return /*#__PURE__*/React__default.createElement("table", {
     className: classes.table
   }, /*#__PURE__*/React__default.createElement("tbody", null, modifications.map(function (_ref2) {
@@ -8069,7 +8178,7 @@ function ModificationTable(_ref) {
 }
 
 function ColorByTagDlg$2(props) {
-  var classes = useStyles$5();
+  var classes = useStyles$6();
   var model = props.model,
       handleClose = props.handleClose;
   var colorBy = model.colorBy,
@@ -8084,9 +8193,7 @@ function ColorByTagDlg$2(props) {
     "aria-label": "close",
     className: classes.closeButton,
     onClick: handleClose
-  }, /*#__PURE__*/React__default.createElement(CloseIcon, null))), /*#__PURE__*/React__default.createElement(core.DialogContent, null, /*#__PURE__*/React__default.createElement("div", {
-    className: classes.root
-  }, /*#__PURE__*/React__default.createElement(core.Typography, null, "You can choose to color the modifications in the BAM/CRAM MM/ML specification using this dialog. Choosing modifications colors the modified positions and can color multiple modification types. Choosing the methylation setting colors methylated and unmethylated CpG."), /*#__PURE__*/React__default.createElement(core.Typography, null, "Note: you can revisit this dialog to see the current mapping of colors to modification type for the modification coloring mode"), /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(CloseIcon, null))), /*#__PURE__*/React__default.createElement(core.DialogContent, null, /*#__PURE__*/React__default.createElement(core.Typography, null, "You can choose to color the modifications in the BAM/CRAM MM/ML specification using this dialog. Choosing modifications colors the modified positions and can color multiple modification types. Choosing the methylation setting colors methylated and unmethylated CpG."), /*#__PURE__*/React__default.createElement(core.Typography, null, "Note: you can revisit this dialog to see the current mapping of colors to modification type for the modification coloring mode"), /*#__PURE__*/React__default.createElement("div", {
     style: {
       margin: 20
     }
@@ -8096,11 +8203,7 @@ function ColorByTagDlg$2(props) {
     size: 15
   }))) : null, (colorBy === null || colorBy === void 0 ? void 0 : colorBy.type) === 'methylation' ? /*#__PURE__*/React__default.createElement(ModificationTable, {
     modifications: [['methylated', 'red'], ['unmethylated', 'blue']]
-  }) : null), /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      display: 'flex'
-    }
-  }, /*#__PURE__*/React__default.createElement(core.Button, {
+  }) : null), /*#__PURE__*/React__default.createElement(core.DialogActions, null, /*#__PURE__*/React__default.createElement(core.Button, {
     variant: "contained",
     color: "primary",
     style: {
@@ -8133,7 +8236,7 @@ function ColorByTagDlg$2(props) {
     onClick: function onClick() {
       return handleClose();
     }
-  }, "Cancel")))));
+  }, "Cancel"))));
 }
 
 var ColorByModifications = /*#__PURE__*/mobxReact.observer(ColorByTagDlg$2);
@@ -8143,7 +8246,7 @@ var ColorByModifications$1 = {
   'default': ColorByModifications
 };
 
-var useStyles$6 = /*#__PURE__*/core.makeStyles(function () {
+var useStyles$7 = /*#__PURE__*/core.makeStyles(function () {
   return {
     compact: {
       paddingRight: 0,
@@ -8155,7 +8258,7 @@ var useStyles$6 = /*#__PURE__*/core.makeStyles(function () {
 var omit = ['clipPos', 'flags']; // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 function AlignmentFlags(props) {
-  var classes = useStyles$6();
+  var classes = useStyles$7();
   var feature = props.feature;
   var flags = feature.flags;
   var flagNames = ['read paired', 'read mapped in proper pair', 'read unmapped', 'mate unmapped', 'read reverse strand', 'mate reverse strand', 'first in pair', 'second in pair', 'not primary alignment', 'read fails platform/vendor quality checks', 'read is PCR or optical duplicate', 'supplementary alignment'];
@@ -8257,10 +8360,15 @@ function SupplementaryAlignments(props) {
       onClick: function onClick() {
         var view = model.view;
 
-        if (view) {
-          view.navToLocString(locString);
-        } else {
-          session.notify('No view associated with this feature detail panel anymore', 'warning');
+        try {
+          if (view) {
+            view.navToLocString(locString);
+          } else {
+            throw new Error('No view associated with this view anymore');
+          }
+        } catch (e) {
+          console.error(e);
+          session.notify("".concat(e));
         }
       },
       href: "#"
@@ -8277,10 +8385,15 @@ function PairLink(_ref2) {
     onClick: function onClick() {
       var view = model.view;
 
-      if (view) {
-        view.navToLocString(locString);
-      } else {
-        session.notify('No view associated with this feature detail panel anymore', 'warning');
+      try {
+        if (view) {
+          view.navToLocString(locString);
+        } else {
+          session.notify('No view associated with this feature detail panel anymore', 'warning');
+        }
+      } catch (e) {
+        console.error(e);
+        session.notify("".concat(e));
       }
     },
     href: "#"