@jbrowse/plugin-alignments 1.6.7 → 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');
@@ -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 '';
-  }
-
-  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;
+  if (md) {
+    mismatches = mismatches.concat(mdToMismatches(md, ops, mismatches, seq, qual));
   }
 
-  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,33 +1922,37 @@ 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) {
@@ -1980,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);
@@ -1996,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);
       }
 
@@ -2028,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() {
@@ -2066,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 + 1; j++) {
-                    var i = j - region.start;
+                  for (var j = fstart; j < fend; j++) {
+                    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: {},
@@ -2142,30 +2134,19 @@ var SNPCoverageAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
                         inc(bin, fstrand, 'ref', 'ref');
                       }
 
-                      bins[i] = bin;
+                      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 {
@@ -2174,23 +2155,9 @@ var SNPCoverageAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
                           var epos = pos + fstart - region.start;
 
                           if (epos >= 0 && epos < bins.length && pos + fstart < fend) {
-                            var _bin = bins[epos] || {
-                              total: 0,
-                              lowqual: {},
-                              cov: {},
-                              delskips: {},
-                              noncov: {},
-                              ref: {}
-                            };
-
-                            if (probabilities[probIndex] > 0.5) {
-                              inc(_bin, fstrand, 'cov', mod);
-                            } else {
-                              inc(_bin, fstrand, 'lowqual', mod);
-                            }
+                            var _bin = bins[epos];
+                            inc(_bin, fstrand, 'cov', mod);
                           }
-
-                          probIndex++;
                         }
                       } catch (err) {
                         _iterator.e(err);
@@ -2216,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 {
@@ -2237,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');
@@ -2268,11 +2234,11 @@ var SNPCoverageAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
                     var mismatches = feature.get('mismatches');
 
                     if (mismatches) {
-                      for (var _i2 = 0; _i2 < mismatches.length; _i2++) {
-                        var mismatch = mismatches[_i2];
-                        var ms = fstart + mismatch.start;
+                      for (var _i3 = 0; _i3 < mismatches.length; _i3++) {
+                        var mismatch = mismatches[_i3];
+                        var mstart = fstart + mismatch.start;
 
-                        for (var _j2 = ms; _j2 < ms + mismatchLen(mismatch); _j2++) {
+                        for (var _j2 = mstart; _j2 < mstart + mismatchLen(mismatch); _j2++) {
                           var epos = _j2 - region.start;
 
                           if (epos >= 0 && epos < bins.length) {
@@ -2321,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);
       }
 
@@ -2457,18 +2423,13 @@ var SNPCoverageRenderer = /*#__PURE__*/function (_WiggleBaseRenderer) {
         range: [0, height]
       });
 
-      var viewScale = pluginWiggle.getScale(opts);
-      var snpViewScale = pluginWiggle.getScale(_objectSpread2(_objectSpread2({}, opts), {}, {
-        range: [0, height],
-        scaleType: 'linear'
-      })); // clipping and insertion indicators, uses a smaller height/2 scale
+      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');
@@ -2480,23 +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(snpOriginY) - indicatorToY(n);
+        return indicatorToY(pluginWiggle.getOrigin('linear')) - indicatorToY(n);
       };
 
       var colorForBase = {
@@ -2558,6 +2510,8 @@ var SNPCoverageRenderer = /*#__PURE__*/function (_WiggleBaseRenderer) {
             _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);
@@ -2570,7 +2524,12 @@ var SNPCoverageRenderer = /*#__PURE__*/function (_WiggleBaseRenderer) {
           var base = keys[_i2];
           var total = snpinfo.cov[base].total;
           ctx.fillStyle = colorForBase[base] || modificationTagMap[base.replace('mod_', '')] || '#888';
-          ctx.fillRect(_leftPx, snpToY(total + curr), _w, snpToHeight(total));
+
+          var _height = toHeight(_score);
+
+          var bottom = toY(_score) + _height;
+
+          ctx.fillRect(_leftPx, bottom - (total + curr) / _score * _height, _w, total / _score * _height);
           curr += total;
         }
 
@@ -2844,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',
@@ -2896,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
 
@@ -3023,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) {
@@ -3036,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
@@ -3114,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
 
 
@@ -3134,8 +3157,8 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
         }
       }
     } // 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",
@@ -3200,10 +3223,10 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
             if (l1 === 'c' && l2 === 'g') {
               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]) {
                 ctx.fillStyle = 'red';
@@ -3219,10 +3242,10 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
             if (l1 === 'c' && l2 === 'g') {
               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]) {
                 ctx.fillStyle = 'red';
@@ -3232,10 +3255,10 @@ 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]) {
                 ctx.fillStyle = 'red';
@@ -3261,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;
@@ -3302,13 +3325,17 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
           regions = props.regions,
           colorBy = props.colorBy,
           _props$colorTagMap = props.colorTagMap,
-          colorTagMap = _props$colorTagMap === void 0 ? {} : _props$colorTagMap;
-
-      var _ref2 = colorBy || {},
-          _ref2$tag = _ref2.tag,
-          tag = _ref2$tag === void 0 ? '' : _ref2$tag,
-          _ref2$type = _ref2.type,
-          colorType = _ref2$type === void 0 ? '' : _ref2$type;
+          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,
+          tag = _ref4$tag === void 0 ? '' : _ref4$tag,
+          _ref4$type = _ref4.type,
+          colorType = _ref4$type === void 0 ? '' : _ref4$type;
 
       var feature = feat.feature;
       var region = regions[0]; // first pass for simple color changes that change the color of the
@@ -3369,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) {
@@ -3391,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;
@@ -3402,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,
@@ -3411,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,
@@ -3423,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;
 
@@ -3448,12 +3501,12 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
         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';
@@ -3462,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) {
@@ -3470,27 +3523,24 @@ 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 + extraHorizontallyFlippedOffset;
           var len = +mismatch.base || mismatch.length;
-          var insW = Math.max(minWidth, Math.min(1.2, 1 / bpPerPx));
+          var insW = Math.max(minSubfeatureWidth, Math.min(1.2, 1 / bpPerPx));
 
           if (len < 10) {
             ctx.fillRect(pos, topPx, insW, heightPx);
 
-            if (1 / bpPerPx >= charWidth) {
+            if (1 / bpPerPx >= charWidth && heightPx >= heightLim) {
               ctx.fillRect(pos - insW, topPx, insW * 3, 1);
               ctx.fillRect(pos - insW, topPx + heightPx - 1, insW * 3, 1);
-            }
-
-            if (1 / bpPerPx >= charWidth && heightPx >= heightLim) {
               ctx.fillText("(".concat(mismatch.base, ")"), pos + 3, topPx + heightPx);
             }
           }
@@ -3501,12 +3551,9 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
 
           ctx.fillRect(_pos, topPx, w, heightPx);
 
-          if (1 / bpPerPx >= charWidth) {
+          if (1 / bpPerPx >= charWidth && heightPx >= heightLim) {
             ctx.fillRect(_pos - w, topPx, w * 3, 1);
             ctx.fillRect(_pos - w, topPx + heightPx - 1, w * 3, 1);
-          }
-
-          if (widthPx >= charWidth && heightPx >= heightLim) {
             ctx.fillText("(".concat(mismatch.base, ")"), _pos + 3, topPx + heightPx);
           }
         } else if (mismatch.type === 'skip') {
@@ -3532,9 +3579,9 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
 
           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;
 
@@ -3545,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';
@@ -3605,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
@@ -3631,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) {
@@ -3644,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) {
@@ -3669,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) {
@@ -3687,7 +3740,7 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
                   }
                 });
 
-              case 14:
+              case 15:
               case "end":
                 return _context.stop();
             }
@@ -3744,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,
@@ -3803,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,
@@ -3813,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,
@@ -3823,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);
       }
 
@@ -5360,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() {
@@ -5823,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, [{
@@ -6071,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_', '');
       });
@@ -6235,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;
@@ -6833,13 +6931,14 @@ 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);
 
     this.record = record;
     this.adapter = adapter;
     this.ref = ref;
-    this.cachedMD = '';
   }
 
   _createClass(BamSlightlyLazyFeature, [{
@@ -6900,22 +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') || this.cachedMD;
-
-      if (!md) {
-        var seq = this.get('seq');
-
-        if (seq && this.ref) {
-          this.cachedMD = generateMD(this.ref, this.get('seq'), this.get('CIGAR'));
-          return this.cachedMD;
-        }
-      }
-
-      return md;
-    }
   }, {
     key: "qualRaw",
     value: function qualRaw() {
@@ -6929,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())));
@@ -6985,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",
@@ -7069,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) {
@@ -7078,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');
 
@@ -7296,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) {
@@ -7337,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) {
@@ -7347,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();
             }
@@ -7429,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;
                   }
@@ -7660,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: {
@@ -7678,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',
@@ -7692,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);
@@ -7704,9 +7737,6 @@ var ColorByTag$1 = {
 
 var useStyles$2 = /*#__PURE__*/core.makeStyles(function (theme) {
   return {
-    root: {
-      width: 500
-    },
     paper: {
       padding: theme.spacing(2),
       margin: theme.spacing(2)
@@ -7799,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", {
@@ -7856,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,
@@ -7871,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);
@@ -7914,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: {
@@ -7930,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);
@@ -7949,9 +7993,6 @@ var SortByTag$1 = {
 
 var useStyles$4 = /*#__PURE__*/core.makeStyles(function (theme) {
   return {
-    root: {
-      margin: theme.spacing(4)
-    },
     closeButton: {
       position: 'absolute',
       right: theme.spacing(1),
@@ -7985,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);
     }
@@ -8002,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);
@@ -8057,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);
@@ -8094,7 +8140,6 @@ var SetMaxHeight$1 = {
 
 var useStyles$6 = /*#__PURE__*/core.makeStyles(function (theme) {
   return {
-    root: {},
     closeButton: {
       position: 'absolute',
       right: theme.spacing(1),
@@ -8148,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
     }
@@ -8160,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: {
@@ -8197,7 +8236,7 @@ function ColorByTagDlg$2(props) {
     onClick: function onClick() {
       return handleClose();
     }
-  }, "Cancel")))));
+  }, "Cancel"))));
 }
 
 var ColorByModifications = /*#__PURE__*/mobxReact.observer(ColorByTagDlg$2);