@jbrowse/plugin-alignments 1.6.6 → 1.6.9

package/dist/plugin-alignments.esm.js

@@ -1,16 +1,16 @@
 import Plugin from '@jbrowse/core/Plugin';
-import { revcom, featureSpanPx, bpSpanPx, iterMap, getContainingTrack, getSession, getContainingView, isSessionModelWithWidgets, renameRegionsIfNeeded, checkAbortSignal, updateStatus, bytesForRegions } from '@jbrowse/core/util';
+import { revcom, featureSpanPx, bpSpanPx, measureText, iterMap, getContainingTrack, getSession, getContainingView, isSessionModelWithWidgets, renameRegionsIfNeeded, checkAbortSignal, updateStatus, bytesForRegions } from '@jbrowse/core/util';
 import AdapterType from '@jbrowse/core/pluggableElementTypes/AdapterType';
 import { ConfigurationSchema, readConfObject, ConfigurationReference, getConf } from '@jbrowse/core/configuration';
 import { types, addDisposer, getSnapshot, cast, getEnv } from 'mobx-state-tree';
 import { BaseFeatureDataAdapter } from '@jbrowse/core/data_adapters/BaseAdapter';
 import SimpleFeature from '@jbrowse/core/util/simpleFeature';
 import { ObservableCreate } from '@jbrowse/core/util/rxjs';
-import { filter, reduce, toArray } from 'rxjs/operators';
+import { toArray } from 'rxjs/operators';
 import { createJBrowseTheme, PrerenderedCanvas, ResizeHandle } from '@jbrowse/core/ui';
 import { getScale, getOrigin, WiggleBaseRenderer, YSCALEBAR_LABEL_OFFSET, WiggleRendering, Tooltip, linearWiggleDisplayModelFactory, LinearWiggleDisplayReactComponent } from '@jbrowse/plugin-wiggle';
-import BoxRendererType, { LayoutSession } from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType';
 import Color from 'color';
+import BoxRendererType, { LayoutSession } from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType';
 import { renderToAbstractCanvas } from '@jbrowse/core/util/offscreenCanvasUtils';
 import { getAdapter } from '@jbrowse/core/data_adapters/dataAdapterCache';
 import { doesIntersect2 } from '@jbrowse/core/util/range';
@@ -21,7 +21,7 @@ import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType';
 import { baseLinearDisplayConfigSchema, linearBasicDisplayConfigSchemaFactory, BaseLinearDisplay, BaseLinearDisplayComponent } from '@jbrowse/plugin-linear-genome-view';
 import { BaseDisplay, createBaseTrackConfig, createBaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
 import { autorun, when, observable } from 'mobx';
-import { makeStyles, Dialog, DialogTitle, IconButton, DialogContent, Typography as Typography$1, TextField, Button, Link, Paper, FormControlLabel, Checkbox, CircularProgress, FormGroup } from '@material-ui/core';
+import { makeStyles, Dialog, DialogTitle, IconButton, DialogContent, Typography as Typography$1, TextField, DialogActions, Button, Link, Paper, FormControlLabel, Checkbox, CircularProgress, FormGroup } from '@material-ui/core';
 import SerializableFilterChain from '@jbrowse/core/pluggableElementTypes/renderers/util/serializableFilterChain';
 import { getRpcSessionId, getFileName, makeIndex, makeIndexType } from '@jbrowse/core/util/tracks';
 import VisibilityIcon from '@material-ui/icons/Visibility';
@@ -1160,62 +1160,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,
@@ -1223,17 +1241,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;
     }
   }
 
@@ -1244,7 +1262,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,
@@ -1277,9 +1295,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;
@@ -1297,7 +1315,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];
@@ -1306,11 +1324,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) {
@@ -1327,9 +1341,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;
@@ -1343,103 +1357,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
 
@@ -1587,9 +1518,7 @@ var MismatchParser = {
   parseCigar: parseCigar,
   cigarToMismatches: cigarToMismatches,
   mdToMismatches: mdToMismatches,
-  getTemplateCoord: getTemplateCoord,
   getMismatches: getMismatches,
-  generateMD: generateMD,
   getNextRefPos: getNextRefPos,
   getModificationPositions: getModificationPositions,
   getModificationTypes: getModificationTypes
@@ -1660,10 +1589,6 @@ var configSchema = /*#__PURE__*/types.late(function () {
         }
       }
     }),
-    chunkSizeLimit: {
-      type: 'number',
-      defaultValue: 100000000
-    },
     fetchSizeLimit: {
       type: 'number',
       defaultValue: 5000000
@@ -1740,8 +1665,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);
@@ -1785,6 +1710,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(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;
@@ -1850,8 +1812,8 @@ var SNPCoverageAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                subadapterConfig = readConfObject(this.config, 'subadapter');
-                sequenceConf = 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);
 
@@ -1904,6 +1866,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) {
@@ -1911,33 +1914,37 @@ var SNPCoverageAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
 
       var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       return 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(toArray()).toPromise();
+
+                case 6:
+                  feats = _context3.sent;
 
                   if (opts.filters) {
                     filters = opts.filters;
-                    stream = stream.pipe(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) {
@@ -1972,15 +1979,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);
@@ -1988,30 +1995,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);
       }
 
@@ -2020,31 +2027,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() {
@@ -2058,69 +2065,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(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(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: {},
@@ -2134,30 +2126,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 {
@@ -2166,23 +2147,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);
@@ -2208,7 +2175,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 {
@@ -2229,19 +2196,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');
@@ -2260,11 +2226,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) {
@@ -2313,26 +2279,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);
       }
 
@@ -2449,18 +2415,13 @@ var SNPCoverageRenderer = /*#__PURE__*/function (_WiggleBaseRenderer) {
         range: [0, height]
       });
 
-      var viewScale = getScale(opts);
-      var snpViewScale = getScale(_objectSpread2(_objectSpread2({}, opts), {}, {
-        range: [0, height],
-        scaleType: 'linear'
-      })); // clipping and insertion indicators, uses a smaller height/2 scale
+      var viewScale = getScale(opts); // clipping and insertion indicators, uses a smaller height/2 scale
 
       var indicatorViewScale = getScale(_objectSpread2(_objectSpread2({}, opts), {}, {
         range: [0, height / 2],
         scaleType: 'linear'
       }));
       var originY = getOrigin(scaleOpts.scaleType);
-      var snpOriginY = getOrigin('linear');
       var indicatorThreshold = readConfObject(cfg, 'indicatorThreshold');
       var drawInterbaseCounts = readConfObject(cfg, 'drawInterbaseCounts');
       var drawArcs = readConfObject(cfg, 'drawArcs');
@@ -2472,23 +2433,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(getOrigin('linear')) - indicatorToY(n);
       };
 
       var colorForBase = {
@@ -2550,6 +2502,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);
@@ -2562,7 +2516,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;
         }
 
@@ -2836,6 +2795,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',
@@ -2888,14 +2857,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
 
@@ -3015,6 +2984,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 = 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) {
@@ -3028,28 +3047,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 = bpSpanPx(start + j + m, start + j + m + 1, region, bpPerPx),
-                _bpSpanPx4 = _slicedToArray(_bpSpanPx3, 1),
-                leftPx = _bpSpanPx4[0];
+            var _bpSpanPx5 = 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
@@ -3106,10 +3129,10 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
             var readPos = _step.value;
 
             if (readPos >= 0 && start + readPos < end) {
-              var _bpSpanPx5 = 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 = 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
 
 
@@ -3126,8 +3149,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",
@@ -3192,10 +3215,10 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
             if (l1 === 'c' && l2 === 'g') {
               var s = rstart + _i;
 
-              var _bpSpanPx7 = bpSpanPx(s, s + 2, region, bpPerPx),
-                  _bpSpanPx8 = _slicedToArray(_bpSpanPx7, 2),
-                  leftPx = _bpSpanPx8[0],
-                  rightPx = _bpSpanPx8[1];
+              var _bpSpanPx9 = 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';
@@ -3211,10 +3234,10 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
             if (l1 === 'c' && l2 === 'g') {
               var _s = rstart + _i;
 
-              var _bpSpanPx9 = bpSpanPx(_s, _s + 1, region, bpPerPx),
-                  _bpSpanPx10 = _slicedToArray(_bpSpanPx9, 2),
-                  _leftPx = _bpSpanPx10[0],
-                  _rightPx = _bpSpanPx10[1];
+              var _bpSpanPx11 = bpSpanPx(_s, _s + 1, region, bpPerPx),
+                  _bpSpanPx12 = _slicedToArray(_bpSpanPx11, 2),
+                  _leftPx = _bpSpanPx12[0],
+                  _rightPx = _bpSpanPx12[1];
 
               if (methBins[_i]) {
                 ctx.fillStyle = 'red';
@@ -3224,10 +3247,10 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
 
               ctx.fillRect(_leftPx, topPx, _rightPx - _leftPx + 0.5, heightPx);
 
-              var _bpSpanPx11 = bpSpanPx(_s + 1, _s + 2, region, bpPerPx),
-                  _bpSpanPx12 = _slicedToArray(_bpSpanPx11, 2),
-                  leftPx2 = _bpSpanPx12[0],
-                  rightPx2 = _bpSpanPx12[1];
+              var _bpSpanPx13 = bpSpanPx(_s + 1, _s + 2, region, bpPerPx),
+                  _bpSpanPx14 = _slicedToArray(_bpSpanPx13, 2),
+                  leftPx2 = _bpSpanPx14[0],
+                  rightPx2 = _bpSpanPx14[1];
 
               if (methBins[_i + 1]) {
                 ctx.fillStyle = 'red';
@@ -3253,10 +3276,10 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
       var _regions = _slicedToArray(regions, 1),
           region = _regions[0];
 
-      var _bpSpanPx13 = bpSpanPx(feature.get('start'), feature.get('end'), region, bpPerPx),
-          _bpSpanPx14 = _slicedToArray(_bpSpanPx13, 2),
-          leftPx = _bpSpanPx14[0],
-          rightPx = _bpSpanPx14[1];
+      var _bpSpanPx15 = 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;
@@ -3294,13 +3317,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
@@ -3361,6 +3388,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) {
@@ -3383,6 +3425,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;
@@ -3394,8 +3445,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,
@@ -3403,7 +3454,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,
@@ -3415,7 +3468,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;
 
@@ -3440,12 +3493,12 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
         var mlen = mismatch.length;
         var mbase = mismatch.base;
 
-        var _bpSpanPx15 = bpSpanPx(mstart, mstart + mlen, region, bpPerPx),
-            _bpSpanPx16 = _slicedToArray(_bpSpanPx15, 2),
-            leftPx = _bpSpanPx16[0],
-            rightPx = _bpSpanPx16[1];
+        var _bpSpanPx17 = 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';
@@ -3454,7 +3507,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) {
@@ -3462,27 +3515,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 = 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);
             }
           }
@@ -3493,12 +3543,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') {
@@ -3524,9 +3571,9 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
 
           var _mlen = _mismatch.length;
 
-          var _bpSpanPx17 = bpSpanPx(_mstart, _mstart + _mlen, region, bpPerPx),
-              _bpSpanPx18 = _slicedToArray(_bpSpanPx17, 1),
-              _leftPx2 = _bpSpanPx18[0];
+          var _bpSpanPx19 = bpSpanPx(_mstart, _mstart + _mlen, region, bpPerPx),
+              _bpSpanPx20 = _slicedToArray(_bpSpanPx19, 1),
+              _leftPx2 = _bpSpanPx20[0];
 
           var _len = +_mismatch.base || _mismatch.length;
 
@@ -3537,13 +3584,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';
@@ -3597,10 +3643,10 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
               return;
             }
 
-            var _bpSpanPx19 = bpSpanPx(softClipStart + k, softClipStart + k + 1, region, bpPerPx),
-                _bpSpanPx20 = _slicedToArray(_bpSpanPx19, 2),
-                softClipLeftPx = _bpSpanPx20[0],
-                softClipRightPx = _bpSpanPx20[1];
+            var _bpSpanPx21 = 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
@@ -3623,7 +3669,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) {
@@ -3636,23 +3682,24 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
                 defaultColor = readConfObject(config, 'color') === '#f0f';
                 theme = 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) {
@@ -3661,17 +3708,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) {
@@ -3679,7 +3732,7 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
                   }
                 });
 
-              case 14:
+              case 15:
               case "end":
                 return _context.stop();
             }
@@ -3736,57 +3789,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 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 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(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 renderToAbstractCanvas(width, height, renderProps, function (ctx) {
                   return _this4.makeImageData(ctx, layoutRecords, _objectSpread2(_objectSpread2({}, renderProps), {}, {
                     layout: layout,
@@ -3795,9 +3889,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,
@@ -3805,9 +3899,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,
@@ -3815,15 +3909,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);
       }
 
@@ -5352,6 +5446,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() {
@@ -5815,12 +5916,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, [{
@@ -6063,7 +6166,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_', '');
       });
@@ -6227,11 +6330,6 @@ var CramSlightlyLazyFeature = /*#__PURE__*/function () {
       });
       return mismatches;
     }
-  }, {
-    key: "_get_skips_and_dels",
-    value: function _get_skips_and_dels() {
-      return this._get_mismatches();
-    }
   }]);
 
   return CramSlightlyLazyFeature;
@@ -6825,13 +6923,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, [{
@@ -6892,22 +6991,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() {
@@ -6921,7 +7004,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())));
@@ -6977,61 +7060,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",
@@ -7061,7 +7093,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, adapterConfig;
+        var bamLocation, location, indexType, bam, adapterConfig;
         return runtime_1.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
@@ -7070,13 +7102,16 @@ var BamAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
                   bamLocation = readConfObject(this.config, 'bamLocation');
                   location = readConfObject(this.config, ['index', 'location']);
                   indexType = readConfObject(this.config, ['index', 'indexType']);
-                  chunkSizeLimit = readConfObject(this.config, 'chunkSizeLimit');
                   bam = new BamFile({
                     bamFilehandle: openLocation(bamLocation, this.pluginManager),
                     csiFilehandle: indexType === 'CSI' ? openLocation(location, this.pluginManager) : undefined,
                     baiFilehandle: indexType !== 'CSI' ? 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 = readConfObject(this.config, 'sequenceAdapter');
 
@@ -7288,7 +7323,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) {
@@ -7329,7 +7364,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) {
@@ -7339,21 +7374,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();
             }
@@ -7421,7 +7455,7 @@ var BamAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
                   record = _step.value;
                   ref = void 0;
 
-                  if (record.get('md')) {
+                  if (record.get('MD')) {
                     _context8.next = 21;
                     break;
                   }
@@ -7652,14 +7686,12 @@ function ColorByTagDlg$1(props) {
     style: {
       overflowX: 'hidden'
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.root
   }, /*#__PURE__*/React.createElement(Typography$1, null, "Enter tag to color by: "), /*#__PURE__*/React.createElement(Typography$1, {
     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.createElement(TextField, {
     value: tag,
     onChange: function onChange(event) {
-      setTag(event.target.value);
+      return setTag(event.target.value);
     },
     placeholder: "Enter tag name",
     inputProps: {
@@ -7670,12 +7702,9 @@ function ColorByTagDlg$1(props) {
     helperText: tag.length === 2 && !validTag ? 'Not a valid tag' : '',
     autoComplete: "off",
     "data-testid": "color-tag-name"
-  }), /*#__PURE__*/React.createElement(Button, {
+  }), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button, {
     variant: "contained",
     color: "primary",
-    style: {
-      marginLeft: 20
-    },
     onClick: function onClick() {
       model.setColorScheme({
         type: 'tag',
@@ -7684,7 +7713,11 @@ function ColorByTagDlg$1(props) {
       handleClose();
     },
     disabled: !validTag
-  }, "Submit"))));
+  }, "Submit"), /*#__PURE__*/React.createElement(Button, {
+    variant: "contained",
+    color: "secondary",
+    onClick: handleClose
+  }, "Cancel"))));
 }
 
 var ColorByTag = /*#__PURE__*/observer(ColorByTagDlg$1);
@@ -7696,9 +7729,6 @@ var ColorByTag$1 = {
 
 var useStyles$2 = /*#__PURE__*/makeStyles(function (theme) {
   return {
-    root: {
-      width: 500
-    },
     paper: {
       padding: theme.spacing(2),
       margin: theme.spacing(2)
@@ -7791,9 +7821,7 @@ function FilterByTagDlg$1(props) {
     onClick: handleClose
   }, /*#__PURE__*/React.createElement(CloseIcon, null))), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement(Typography$1, null, "Set filter bitmask options. Refer to ", /*#__PURE__*/React.createElement(Link, {
     href: site
-  }, site), ' ', "for details"), /*#__PURE__*/React.createElement("div", {
-    className: classes.root
-  }, /*#__PURE__*/React.createElement(Paper, {
+  }, site), ' ', "for details"), /*#__PURE__*/React.createElement(Paper, {
     className: classes.paper,
     variant: "outlined"
   }, /*#__PURE__*/React.createElement("div", {
@@ -7848,9 +7876,11 @@ function FilterByTagDlg$1(props) {
       'data-testid': 'color-tag-readname-input'
     },
     "data-testid": "color-tag-readname"
-  })), /*#__PURE__*/React.createElement(Button, {
+  })), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button, {
     variant: "contained",
     color: "primary",
+    autoFocus: true,
+    type: "submit",
     onClick: function onClick() {
       model.setFilterBy({
         flagInclude: flagInclude,
@@ -7863,7 +7893,13 @@ function FilterByTagDlg$1(props) {
       });
       handleClose();
     }
-  }, "Submit"))));
+  }, "Submit"), /*#__PURE__*/React.createElement(Button, {
+    variant: "contained",
+    color: "secondary",
+    onClick: function onClick() {
+      return handleClose();
+    }
+  }, "Cancel"))));
 }
 
 var FilterByTag = /*#__PURE__*/observer(FilterByTagDlg$1);
@@ -7906,12 +7942,12 @@ function SortByTagDlg$1(props) {
     "aria-label": "close",
     className: classes.closeButton,
     onClick: handleClose
-  }, /*#__PURE__*/React.createElement(CloseIcon, null))), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography$1, null, "Set the tag to sort by"), /*#__PURE__*/React.createElement(Typography$1, {
+  }, /*#__PURE__*/React.createElement(CloseIcon, null))), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement(Typography$1, null, "Set the tag to sort by"), /*#__PURE__*/React.createElement(Typography$1, {
     color: "textSecondary"
   }, "Examples: HP for haplotype, RG for read group, etc."), /*#__PURE__*/React.createElement(TextField, {
     value: tag,
     onChange: function onChange(event) {
-      setTag(event.target.value);
+      return setTag(event.target.value);
     },
     placeholder: "Enter tag name",
     inputProps: {
@@ -7922,14 +7958,22 @@ function SortByTagDlg$1(props) {
     helperText: tag.length === 2 && !validTag ? 'Not a valid tag' : '',
     autoComplete: "off",
     "data-testid": "sort-tag-name"
-  }), /*#__PURE__*/React.createElement(Button, {
+  }), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button, {
     variant: "contained",
     color: "primary",
+    type: "submit",
+    autoFocus: true,
     onClick: function onClick() {
       model.setSortedBy('tag', tag);
       handleClose();
     }
-  }, "Submit"))));
+  }, "Submit"), /*#__PURE__*/React.createElement(Button, {
+    variant: "contained",
+    color: "secondary",
+    onClick: function onClick() {
+      return handleClose();
+    }
+  }, "Cancel"))));
 }
 
 var SortByTag = /*#__PURE__*/observer(SortByTagDlg$1);
@@ -7941,9 +7985,6 @@ var SortByTag$1 = {
 
 var useStyles$4 = /*#__PURE__*/makeStyles(function (theme) {
   return {
-    root: {
-      margin: theme.spacing(4)
-    },
     closeButton: {
       position: 'absolute',
       right: theme.spacing(1),
@@ -7977,10 +8018,9 @@ function SetFeatureHeightDlg$1(props) {
   }, /*#__PURE__*/React.createElement(DialogTitle, null, "Set feature height", /*#__PURE__*/React.createElement(IconButton, {
     className: classes.closeButton,
     onClick: handleClose
-  }, /*#__PURE__*/React.createElement(CloseIcon, null))), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement(Typography$1, 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.createElement("div", {
-    className: classes.root
-  }, /*#__PURE__*/React.createElement(Typography$1, null, "Enter feature height: "), /*#__PURE__*/React.createElement(TextField, {
+  }, /*#__PURE__*/React.createElement(CloseIcon, null))), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement(Typography$1, 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.createElement(TextField, {
     value: height,
+    helperText: "Feature height",
     onChange: function onChange(event) {
       setHeight(event.target.value);
     }
@@ -7994,20 +8034,24 @@ function SetFeatureHeightDlg$1(props) {
       }
     }),
     label: "Remove spacing between features in y-direction?"
-  }), /*#__PURE__*/React.createElement(Button, {
+  }), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(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.createElement(Button, {
+    variant: "contained",
+    color: "secondary",
+    onClick: function onClick() {
+      return handleClose();
+    }
+  }, "Cancel"))));
 }
 
 var SetFeatureHeight = /*#__PURE__*/observer(SetFeatureHeightDlg$1);
@@ -8049,32 +8093,34 @@ function SetMaxHeightDlg$1(props) {
   return /*#__PURE__*/React.createElement(Dialog, {
     open: true,
     onClose: handleClose
-  }, /*#__PURE__*/React.createElement(DialogTitle, {
-    id: "alert-dialog-title"
-  }, "Filter options", /*#__PURE__*/React.createElement(IconButton, {
+  }, /*#__PURE__*/React.createElement(DialogTitle, null, "Filter options", /*#__PURE__*/React.createElement(IconButton, {
     "aria-label": "close",
     className: classes.closeButton,
     onClick: handleClose
-  }, /*#__PURE__*/React.createElement(CloseIcon, null))), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(CloseIcon, null))), /*#__PURE__*/React.createElement(DialogContent, {
     className: classes.root
-  }, /*#__PURE__*/React.createElement(Typography$1, null, "Set max height for the track"), /*#__PURE__*/React.createElement(TextField, {
+  }, /*#__PURE__*/React.createElement(Typography$1, null, "Set max height for the track. For example, you can increase this if the layout says \"Max height reached\""), /*#__PURE__*/React.createElement(TextField, {
     value: max,
     onChange: function onChange(event) {
       setMax(event.target.value);
     },
     placeholder: "Enter max height for layout"
-  }), /*#__PURE__*/React.createElement(Button, {
+  }), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(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.createElement(Button, {
+    variant: "contained",
+    color: "secondary",
+    onClick: function onClick() {
+      return handleClose();
+    }
+  }, "Cancel"))));
 }
 
 var SetMaxHeight = /*#__PURE__*/observer(SetMaxHeightDlg$1);
@@ -8086,7 +8132,6 @@ var SetMaxHeight$1 = {
 
 var useStyles$6 = /*#__PURE__*/makeStyles(function (theme) {
   return {
-    root: {},
     closeButton: {
       position: 'absolute',
       right: theme.spacing(1),
@@ -8140,9 +8185,7 @@ function ColorByTagDlg$2(props) {
     "aria-label": "close",
     className: classes.closeButton,
     onClick: handleClose
-  }, /*#__PURE__*/React.createElement(CloseIcon, null))), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement("div", {
-    className: classes.root
-  }, /*#__PURE__*/React.createElement(Typography$1, 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.createElement(Typography$1, null, "Note: you can revisit this dialog to see the current mapping of colors to modification type for the modification coloring mode"), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(CloseIcon, null))), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement(Typography$1, 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.createElement(Typography$1, null, "Note: you can revisit this dialog to see the current mapping of colors to modification type for the modification coloring mode"), /*#__PURE__*/React.createElement("div", {
     style: {
       margin: 20
     }
@@ -8152,11 +8195,7 @@ function ColorByTagDlg$2(props) {
     size: 15
   }))) : null, (colorBy === null || colorBy === void 0 ? void 0 : colorBy.type) === 'methylation' ? /*#__PURE__*/React.createElement(ModificationTable, {
     modifications: [['methylated', 'red'], ['unmethylated', 'blue']]
-  }) : null), /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: 'flex'
-    }
-  }, /*#__PURE__*/React.createElement(Button, {
+  }) : null), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button, {
     variant: "contained",
     color: "primary",
     style: {
@@ -8189,7 +8228,7 @@ function ColorByTagDlg$2(props) {
     onClick: function onClick() {
       return handleClose();
     }
-  }, "Cancel")))));
+  }, "Cancel"))));
 }
 
 var ColorByModifications = /*#__PURE__*/observer(ColorByTagDlg$2);