@jbrowse/plugin-alignments 1.6.5 → 1.6.6

package/dist/plugin-alignments.esm.js

@@ -21,6 +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 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';
@@ -38,7 +39,6 @@ import RpcMethodType from '@jbrowse/core/pluggableElementTypes/RpcMethodType';
 import { IndexedCramFile, CraiIndex } from '@gmod/cram';
 import { openLocation } from '@jbrowse/core/util/io';
 import { BamFile, HtsgetFile } from '@gmod/bam';
-import { Dialog, DialogTitle, IconButton, DialogContent, Typography as Typography$1, TextField, Button, makeStyles, Link, Paper, FormControlLabel, Checkbox, CircularProgress, FormGroup } from '@material-ui/core';
 import CloseIcon from '@material-ui/icons/Close';
 import { FeatureDetails, BaseCard, SimpleValue } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail';
 
@@ -1941,18 +1941,16 @@ var SNPCoverageAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
                   bins = _yield$_this$generate.bins;
                   skipmap = _yield$_this$generate.skipmap;
                   bins.forEach(function (bin, index) {
-                    if (bin.total) {
-                      observer.next(new SimpleFeature({
-                        id: "".concat(_this.id, "-").concat(region.start, "-").concat(index),
-                        data: {
-                          score: bin.total,
-                          snpinfo: bin,
-                          start: region.start + index,
-                          end: region.start + index + 1,
-                          refName: region.refName
-                        }
-                      }));
-                    }
+                    observer.next(new SimpleFeature({
+                      id: "".concat(_this.id, "-").concat(region.start, "-").concat(index),
+                      data: {
+                        score: bin.total,
+                        snpinfo: bin,
+                        start: region.start + index,
+                        end: region.start + index + 1,
+                        refName: region.refName
+                      }
+                    }));
                   }); // make fake features from the coverage
 
                   Object.entries(skipmap).forEach(function (_ref2) {
@@ -2118,7 +2116,7 @@ var SNPCoverageAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
                   var fstrand = feature.get('strand');
                   var cigarOps = parseCigar(cigar);
 
-                  for (var j = fstart; j < fend; j++) {
+                  for (var j = fstart; j < fend + 1; j++) {
                     var i = j - region.start;
 
                     if (i >= 0 && i < binMax) {
@@ -2130,8 +2128,12 @@ var SNPCoverageAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
                         noncov: {},
                         ref: {}
                       };
-                      bin.total++;
-                      inc(bin, fstrand, 'ref', 'ref');
+
+                      if (j !== fend) {
+                        bin.total++;
+                        inc(bin, fstrand, 'ref', 'ref');
+                      }
+
                       bins[i] = bin;
                     }
                   }
@@ -2164,7 +2166,14 @@ var SNPCoverageAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
                           var epos = pos + fstart - region.start;
 
                           if (epos >= 0 && epos < bins.length && pos + fstart < fend) {
-                            var _bin = bins[epos];
+                            var _bin = bins[epos] || {
+                              total: 0,
+                              lowqual: {},
+                              cov: {},
+                              delskips: {},
+                              noncov: {},
+                              ref: {}
+                            };
 
                             if (probabilities[probIndex] > 0.5) {
                               inc(_bin, fstrand, 'cov', mod);
@@ -2253,9 +2262,9 @@ var SNPCoverageAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
                     if (mismatches) {
                       for (var _i2 = 0; _i2 < mismatches.length; _i2++) {
                         var mismatch = mismatches[_i2];
-                        var mstart = fstart + mismatch.start;
+                        var ms = fstart + mismatch.start;
 
-                        for (var _j2 = mstart; _j2 < mstart + mismatchLen(mismatch); _j2++) {
+                        for (var _j2 = ms; _j2 < ms + mismatchLen(mismatch); _j2++) {
                           var epos = _j2 - region.start;
 
                           if (epos >= 0 && epos < bins.length) {
@@ -2371,7 +2380,7 @@ var ConfigSchema = /*#__PURE__*/ConfigurationSchema('SNPCoverageRenderer', {
   indicatorThreshold: {
     type: 'number',
     description: 'the proportion of reads containing a insertion/clip indicator',
-    defaultValue: 0.3
+    defaultValue: 0.4
   },
   drawArcs: {
     type: 'boolean',
@@ -2412,12 +2421,13 @@ var SNPCoverageRenderer = /*#__PURE__*/function (_WiggleBaseRenderer) {
           regions = props.regions,
           bpPerPx = props.bpPerPx,
           displayCrossHatches = props.displayCrossHatches,
-          modificationTagMap = props.modificationTagMap,
+          _props$modificationTa = props.modificationTagMap,
+          modificationTagMap = _props$modificationTa === void 0 ? {} : _props$modificationTa,
           scaleOpts = props.scaleOpts,
           unadjustedHeight = props.height,
           configTheme = props.theme,
           cfg = props.config,
-          values = props.ticks.values;
+          ticks = props.ticks;
       var theme = createJBrowseTheme(configTheme);
 
       var _regions = _slicedToArray(regions, 1),
@@ -2429,6 +2439,11 @@ var SNPCoverageRenderer = /*#__PURE__*/function (_WiggleBaseRenderer) {
 
       var offset = YSCALEBAR_LABEL_OFFSET;
       var height = unadjustedHeight - offset * 2;
+      var domain = scaleOpts.domain;
+
+      if (!domain) {
+        return;
+      }
 
       var opts = _objectSpread2(_objectSpread2({}, scaleOpts), {}, {
         range: [0, height]
@@ -2436,6 +2451,12 @@ var SNPCoverageRenderer = /*#__PURE__*/function (_WiggleBaseRenderer) {
 
       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 indicatorViewScale = getScale(_objectSpread2(_objectSpread2({}, opts), {}, {
+        range: [0, height / 2],
         scaleType: 'linear'
       }));
       var originY = getOrigin(scaleOpts.scaleType);
@@ -2458,10 +2479,18 @@ var SNPCoverageRenderer = /*#__PURE__*/function (_WiggleBaseRenderer) {
         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);
+      };
+
       var colorForBase = {
         A: theme.palette.bases.A.main,
         C: theme.palette.bases.C.main,
@@ -2487,7 +2516,10 @@ var SNPCoverageRenderer = /*#__PURE__*/function (_WiggleBaseRenderer) {
       // bpPerPx First pass: draw the gray background
 
       ctx.fillStyle = colorForBase.total;
-      coverage.forEach(function (feature) {
+
+      for (var i = 0; i < coverage.length; i++) {
+        var feature = coverage[i];
+
         var _featureSpanPx = featureSpanPx(feature, region, bpPerPx),
             _featureSpanPx2 = _slicedToArray(_featureSpanPx, 2),
             leftPx = _featureSpanPx2[0],
@@ -2496,96 +2528,97 @@ var SNPCoverageRenderer = /*#__PURE__*/function (_WiggleBaseRenderer) {
         var w = rightPx - leftPx + 0.3;
         var score = feature.get('score');
         ctx.fillRect(leftPx, toY(score), w, toHeight(score));
-      });
-      ctx.fillStyle = 'grey';
-      ctx.beginPath();
-      ctx.lineTo(0, 0);
-      ctx.moveTo(0, width);
-      ctx.stroke(); // Second pass: draw the SNP data, and add a minimum feature width of 1px
+      } // Keep track of previous total which we will use it to draw the interbase
+      // indicator (if there is a sudden clip, there will be no read coverage but
+      // there will be "clip" coverage) at that position beyond the read. if the
+      // clip is right at a block boundary then prevTotal will not be available,
+      // so this is a best attempt to plot interbase indicator at the "cliffs"
+
+
+      var prevTotal = 0; // extraHorizontallyFlippedOffset is used to draw interbase items, which
+      // are located to the left when forward and right when reversed
+
+      var extraHorizontallyFlippedOffset = region.reversed ? 1 / bpPerPx : 0; // Second pass: draw the SNP data, and add a minimum feature width of 1px
       // which can be wider than the actual bpPerPx This reduces overdrawing of
       // the grey background over the SNPs
 
-      coverage.forEach(function (feature) {
-        var _featureSpanPx3 = featureSpanPx(feature, region, bpPerPx),
+      for (var _i = 0; _i < coverage.length; _i++) {
+        var _feature = coverage[_i];
+
+        var _featureSpanPx3 = featureSpanPx(_feature, region, bpPerPx),
             _featureSpanPx4 = _slicedToArray(_featureSpanPx3, 2),
-            leftPx = _featureSpanPx4[0],
-            rightPx = _featureSpanPx4[1];
+            _leftPx = _featureSpanPx4[0],
+            _rightPx = _featureSpanPx4[1];
 
-        var snpinfo = feature.get('snpinfo');
-        var w = Math.max(rightPx - leftPx + 0.3, 1);
-        var totalScore = snpinfo.total;
-        Object.entries(snpinfo.cov).sort(function (_ref, _ref2) {
-          var _ref3 = _slicedToArray(_ref, 1),
-              a = _ref3[0];
+        var snpinfo = _feature.get('snpinfo');
 
-          var _ref4 = _slicedToArray(_ref2, 1),
-              b = _ref4[0];
+        var _w = Math.max(_rightPx - _leftPx + 0.3, 1);
 
-          if (a < b) {
-            return -1;
-          }
-
-          if (a > b) {
-            return 1;
-          }
+        var totalScore = snpinfo.total;
+        var keys = Object.keys(snpinfo.cov).sort();
+        var curr = 0;
+
+        for (var _i2 = 0; _i2 < keys.length; _i2++) {
+          var base = keys[_i2];
+          var total = snpinfo.cov[base].total;
+          ctx.fillStyle = colorForBase[base] || modificationTagMap[base.replace('mod_', '')] || '#888';
+          ctx.fillRect(_leftPx, snpToY(total + curr), _w, snpToHeight(total));
+          curr += total;
+        }
 
-          return 0;
-        }).reduce(function (curr, _ref5) {
-          var _ref6 = _slicedToArray(_ref5, 2),
-              base = _ref6[0],
-              total = _ref6[1].total;
-
-          ctx.fillStyle = colorForBase[base] || modificationTagMap[base.replace('mod_', '')] || 'red';
-          ctx.fillRect(leftPx, snpToY(total + curr), w, snpToHeight(total));
-          return curr + total;
-        }, 0);
-        var interbaseEvents = Object.entries(snpinfo.noncov);
+        var interbaseEvents = Object.keys(snpinfo.noncov);
         var indicatorHeight = 4.5;
 
         if (drawInterbaseCounts) {
-          interbaseEvents.reduce(function (curr, _ref7) {
-            var _ref8 = _slicedToArray(_ref7, 2),
-                base = _ref8[0],
-                total = _ref8[1].total;
-
-            ctx.fillStyle = colorForBase[base];
-            ctx.fillRect(leftPx - 0.6, indicatorHeight + snpToHeight(curr), 1.2, snpToHeight(total));
-            return curr + total;
-          }, 0);
+          var _curr = 0;
+
+          for (var _i3 = 0; _i3 < interbaseEvents.length; _i3++) {
+            var _base = interbaseEvents[_i3];
+            var _total = snpinfo.noncov[_base].total;
+            ctx.fillStyle = colorForBase[_base];
+            ctx.fillRect(_leftPx - 0.6 + extraHorizontallyFlippedOffset, indicatorHeight + indicatorToHeight(_curr), 1.2, indicatorToHeight(_total));
+            _curr += _total;
+          }
         }
 
         if (drawIndicators) {
           var accum = 0;
           var max = 0;
           var maxBase = '';
-          interbaseEvents.forEach(function (_ref9) {
-            var _ref10 = _slicedToArray(_ref9, 2),
-                base = _ref10[0],
-                total = _ref10[1].total;
 
-            accum += total;
+          for (var _i4 = 0; _i4 < interbaseEvents.length; _i4++) {
+            var _base2 = interbaseEvents[_i4];
+            var _total2 = snpinfo.noncov[_base2].total;
+            accum += _total2;
 
-            if (total > max) {
-              max = total;
-              maxBase = base;
+            if (_total2 > max) {
+              max = _total2;
+              maxBase = _base2;
             }
-          }); // avoid drawing a bunch of indicators if coverage is very low e.g.
-          // less than 7
+          } // avoid drawing a bunch of indicators if coverage is very low e.g.
+          // less than 7, uses the prev total in the case of the "cliff"
+
+
+          var indicatorComparatorScore = Math.max(totalScore, prevTotal);
 
-          if (accum > totalScore * indicatorThreshold && totalScore > 7) {
+          if (accum > indicatorComparatorScore * indicatorThreshold && indicatorComparatorScore > 7) {
             ctx.fillStyle = colorForBase[maxBase];
             ctx.beginPath();
-            ctx.moveTo(leftPx - 3, 0);
-            ctx.lineTo(leftPx + 3, 0);
-            ctx.lineTo(leftPx, indicatorHeight);
+            var l = _leftPx + extraHorizontallyFlippedOffset;
+            ctx.moveTo(l - 3.5, 0);
+            ctx.lineTo(l + 3.5, 0);
+            ctx.lineTo(l, indicatorHeight);
             ctx.fill();
           }
         }
-      });
-      ctx.globalAlpha = 0.7;
+
+        prevTotal = totalScore;
+      }
 
       if (drawArcs) {
-        skips.forEach(function (f) {
+        for (var _i5 = 0; _i5 < skips.length; _i5++) {
+          var f = skips[_i5];
+
           var _bpSpanPx = bpSpanPx(f.get('start'), f.get('end'), region, bpPerPx),
               _bpSpanPx2 = _slicedToArray(_bpSpanPx, 2),
               left = _bpSpanPx2[0],
@@ -2594,9 +2627,9 @@ var SNPCoverageRenderer = /*#__PURE__*/function (_WiggleBaseRenderer) {
           ctx.beginPath();
           var str = f.get('strand');
           var xs = f.get('xs');
-          var pos = 'rgb(255,200,200)';
-          var neg = 'rgb(200,200,255)';
-          var neutral = 'rgb(200,200,200)';
+          var pos = 'rgba(255,200,200,0.7)';
+          var neg = 'rgba(200,200,255,0.7)';
+          var neutral = 'rgba(200,200,200,0.7)';
 
           if (xs === '+') {
             ctx.strokeStyle = pos;
@@ -2614,13 +2647,13 @@ var SNPCoverageRenderer = /*#__PURE__*/function (_WiggleBaseRenderer) {
           ctx.moveTo(left, height - offset * 2);
           ctx.bezierCurveTo(left, 0, right, 0, right, height - offset * 2);
           ctx.stroke();
-        });
+        }
       }
 
       if (displayCrossHatches) {
         ctx.lineWidth = 1;
         ctx.strokeStyle = 'rgba(140,140,140,0.8)';
-        values.forEach(function (tick) {
+        ticks.values.forEach(function (tick) {
           ctx.beginPath();
           ctx.moveTo(0, Math.round(toY(tick)));
           ctx.lineTo(width, Math.round(toY(tick)));
@@ -3057,9 +3090,11 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
       var modifications = getModificationPositions(mm, seq, strand); // probIndex applies across multiple modifications e.g.
 
       var probIndex = 0;
-      modifications.forEach(function (_ref2) {
-        var type = _ref2.type,
-            positions = _ref2.positions;
+
+      for (var i = 0; i < modifications.length; i++) {
+        var _modifications$i = modifications[i],
+            type = _modifications$i.type,
+            positions = _modifications$i.positions;
         var col = modificationTagMap[type] || 'black';
         var base = Color(col);
 
@@ -3089,7 +3124,7 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
         } finally {
           _iterator.f();
         }
-      });
+      }
     } // Color by methylation is slightly modified version of color by
     // modifications
     //
@@ -3116,9 +3151,12 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
       var rstart = region.start,
           rend = region.end;
       var methBins = new Array(rend - rstart).fill(0);
-      getModificationPositions(mm, seq, strand).forEach(function (_ref3) {
-        var type = _ref3.type,
-            positions = _ref3.positions;
+      var modifications = getModificationPositions(mm, seq, strand);
+
+      for (var i = 0; i < modifications.length; i++) {
+        var _modifications$i2 = modifications[i],
+            type = _modifications$i2.type,
+            positions = _modifications$i2.positions;
 
         if (type === 'm' && positions) {
           var _iterator2 = _createForOfIteratorHelper(getNextRefPos(cigarOps, positions)),
@@ -3139,25 +3177,27 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
             _iterator2.f();
           }
         }
-      });
+      }
 
       for (var j = fstart; j < fend; j++) {
-        var i = j - rstart;
+        var _i = j - rstart;
+
+        if (_i >= 0 && _i < methBins.length) {
+          var l1 = regionSequence[_i].toLowerCase();
+
+          var l2 = regionSequence[_i + 1].toLowerCase(); // if we are zoomed out, display just a block over the cpg
 
-        if (i >= 0 && i < methBins.length) {
-          var l1 = regionSequence[i].toLowerCase();
-          var l2 = regionSequence[i + 1].toLowerCase(); // if we are zoomed out, display just a block over the cpg
 
           if (bpPerPx > 2) {
             if (l1 === 'c' && l2 === 'g') {
-              var s = rstart + i;
+              var s = rstart + _i;
 
               var _bpSpanPx7 = bpSpanPx(s, s + 2, region, bpPerPx),
                   _bpSpanPx8 = _slicedToArray(_bpSpanPx7, 2),
                   leftPx = _bpSpanPx8[0],
                   rightPx = _bpSpanPx8[1];
 
-              if (methBins[i] || methBins[i + 1]) {
+              if (methBins[_i] || methBins[_i + 1]) {
                 ctx.fillStyle = 'red';
               } else {
                 ctx.fillStyle = 'blue';
@@ -3169,14 +3209,14 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
           else {
             // color
             if (l1 === 'c' && l2 === 'g') {
-              var _s = rstart + i;
+              var _s = rstart + _i;
 
               var _bpSpanPx9 = bpSpanPx(_s, _s + 1, region, bpPerPx),
                   _bpSpanPx10 = _slicedToArray(_bpSpanPx9, 2),
                   _leftPx = _bpSpanPx10[0],
                   _rightPx = _bpSpanPx10[1];
 
-              if (methBins[i]) {
+              if (methBins[_i]) {
                 ctx.fillStyle = 'red';
               } else {
                 ctx.fillStyle = 'blue';
@@ -3189,7 +3229,7 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
                   leftPx2 = _bpSpanPx12[0],
                   rightPx2 = _bpSpanPx12[1];
 
-              if (methBins[i + 1]) {
+              if (methBins[_i + 1]) {
                 ctx.fillStyle = 'red';
               } else {
                 ctx.fillStyle = 'blue';
@@ -3256,11 +3296,11 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
           _props$colorTagMap = props.colorTagMap,
           colorTagMap = _props$colorTagMap === void 0 ? {} : _props$colorTagMap;
 
-      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 _ref2 = colorBy || {},
+          _ref2$tag = _ref2.tag,
+          tag = _ref2$tag === void 0 ? '' : _ref2$tag,
+          _ref2$type = _ref2.type,
+          colorType = _ref2$type === void 0 ? '' : _ref2$type;
 
       var feature = feat.feature;
       var region = regions[0]; // first pass for simple color changes that change the color of the
@@ -3387,9 +3427,12 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
         }
 
         return color;
-      } // two pass rendering: first pass, draw all the mismatches except wide
-      // insertion markers
+      } // extraHorizontallyFlippedOffset is used to draw interbase items, which
+      // are located to the left when forward and right when reversed
+
 
+      var extraHorizontallyFlippedOffset = region.reversed ? 1 / bpPerPx + 1 : -1; // two pass rendering: first pass, draw all the mismatches except wide
+      // insertion markers
 
       for (var i = 0; i < mismatches.length; i += 1) {
         var mismatch = mismatches[i];
@@ -3427,32 +3470,36 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
           }
         } else if (mismatch.type === 'insertion' && drawIndels) {
           ctx.fillStyle = 'purple';
-          var pos = leftPx - 1;
+          var pos = leftPx + extraHorizontallyFlippedOffset;
           var len = +mismatch.base || mismatch.length;
+          var insW = Math.max(minWidth, Math.min(1.2, 1 / bpPerPx));
 
           if (len < 10) {
-            ctx.fillRect(pos, topPx, w, heightPx);
+            ctx.fillRect(pos, topPx, insW, heightPx);
 
             if (1 / bpPerPx >= charWidth) {
-              ctx.fillRect(pos - w, topPx, w * 3, 1);
-              ctx.fillRect(pos - w, topPx + heightPx - 1, w * 3, 1);
+              ctx.fillRect(pos - 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, ")"), leftPx + 2, topPx + heightPx);
+              ctx.fillText("(".concat(mismatch.base, ")"), pos + 3, topPx + heightPx);
             }
           }
         } else if (mismatch.type === 'hardclip' || mismatch.type === 'softclip') {
           ctx.fillStyle = mismatch.type === 'hardclip' ? 'red' : 'blue';
 
-          var _pos = leftPx - 1;
+          var _pos = leftPx + extraHorizontallyFlippedOffset;
 
-          ctx.fillRect(_pos, topPx + 1, w, heightPx - 2);
-          ctx.fillRect(_pos - w, topPx, w * 3, 1);
-          ctx.fillRect(_pos - w, topPx + heightPx - 1, w * 3, 1);
+          ctx.fillRect(_pos, topPx, w, heightPx);
+
+          if (1 / bpPerPx >= charWidth) {
+            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, ")"), leftPx + 2, topPx + heightPx);
+            ctx.fillText("(".concat(mismatch.base, ")"), _pos + 3, topPx + heightPx);
           }
         } else if (mismatch.type === 'skip') {
           // fix to avoid bad rendering note that this was also related to chrome
@@ -3470,8 +3517,8 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
 
 
       if (drawIndels) {
-        for (var _i = 0; _i < mismatches.length; _i += 1) {
-          var _mismatch = mismatches[_i];
+        for (var _i2 = 0; _i2 < mismatches.length; _i2 += 1) {
+          var _mismatch = mismatches[_i2];
 
           var _mstart = start + _mismatch.start;
 
@@ -3539,7 +3586,8 @@ var PileupRenderer = /*#__PURE__*/function (_BoxRendererType) {
           return mismatch.type === 'softclip';
         }).forEach(function (mismatch) {
           var softClipLength = mismatch.cliplen || 0;
-          var softClipStart = mismatch.start === 0 ? feature.get('start') - softClipLength : feature.get('start') + mismatch.start;
+          var s = feature.get('start');
+          var softClipStart = mismatch.start === 0 ? s - softClipLength : s + mismatch.start;
 
           for (var k = 0; k < softClipLength; k += 1) {
             var base = seq.charAt(k + mismatch.start); // If softclip length+start is longer than sequence, no need to
@@ -3935,10 +3983,15 @@ function PileupRendering(props) {
 
     var offsetX = 0;
     var offsetY = 0;
+    var canvas = highlightOverlayCanvas.current;
+
+    if (canvas) {
+      var _canvas$getBoundingCl = canvas.getBoundingClientRect(),
+          left = _canvas$getBoundingCl.left,
+          top = _canvas$getBoundingCl.top;
 
-    if (highlightOverlayCanvas.current) {
-      offsetX = highlightOverlayCanvas.current.getBoundingClientRect().left;
-      offsetY = highlightOverlayCanvas.current.getBoundingClientRect().top;
+      offsetX = left;
+      offsetY = top;
     }
 
     offsetX = event.clientX - offsetX;
@@ -4322,45 +4375,51 @@ var stateModelFactory = function stateModelFactory(pluginManager, configSchema)
   });
 };
 
+var useStyles = /*#__PURE__*/makeStyles(function () {
+  return {
+    resizeHandle: {
+      height: 2,
+      position: 'absolute',
+      zIndex: 2
+    }
+  };
+});
+
 function AlignmentsDisplay(_ref) {
   var model = _ref.model;
   var PileupDisplay = model.PileupDisplay,
       SNPCoverageDisplay = model.SNPCoverageDisplay,
       showPileup = model.showPileup,
       showCoverage = model.showCoverage;
+  var classes = useStyles();
+  var top = SNPCoverageDisplay.height;
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "display-".concat(getConf(model, 'displayId')),
     style: {
       position: 'relative'
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, showCoverage ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     "data-testid": "Blockset-snpcoverage"
-  }, showCoverage ? /*#__PURE__*/React.createElement(SNPCoverageDisplay.RenderingComponent, {
+  }, /*#__PURE__*/React.createElement(SNPCoverageDisplay.RenderingComponent, {
     model: SNPCoverageDisplay
-  }) : null), /*#__PURE__*/React.createElement(ResizeHandle, {
+  })), /*#__PURE__*/React.createElement(ResizeHandle, {
     onDrag: function onDrag(delta) {
-      if (SNPCoverageDisplay) {
-        SNPCoverageDisplay.setHeight(SNPCoverageDisplay.height + delta);
-        return delta;
-      }
-
-      return 0;
+      SNPCoverageDisplay.setHeight(SNPCoverageDisplay.height + delta);
+      return delta;
     },
+    className: classes.resizeHandle,
     style: {
-      position: 'absolute',
-      top: showCoverage ? SNPCoverageDisplay.height + 2 : 0,
-      height: 3
+      top: top
     }
-  }), /*#__PURE__*/React.createElement("div", {
+  })) : null, showPileup ? /*#__PURE__*/React.createElement("div", {
     "data-testid": "Blockset-pileup",
     style: {
       position: 'absolute',
-      top: showCoverage ? SNPCoverageDisplay.height + 5 : 0,
-      height: 3
+      top: showCoverage ? SNPCoverageDisplay.height : 0
     }
-  }, showPileup ? /*#__PURE__*/React.createElement(PileupDisplay.RenderingComponent, {
+  }, /*#__PURE__*/React.createElement(PileupDisplay.RenderingComponent, {
     model: PileupDisplay
-  }) : null));
+  })) : null);
 }
 
 var ReactComponent$1 = /*#__PURE__*/observer(AlignmentsDisplay);
@@ -4409,10 +4468,10 @@ function SNPCoverageConfigFactory(pluginManager) {
       description: 'draw upside down',
       defaultValue: false
     },
-    headroom: {
-      type: 'number',
-      description: 'round the upper value of the domain scale to the nearest N',
-      defaultValue: 0
+    multiTicks: {
+      type: 'boolean',
+      description: 'Display multiple values for the ticks',
+      defaultValue: false
     },
     renderers: ConfigurationSchema('RenderersConfiguration', {
       SNPCoverageRenderer: SNPCoverageRendererConfigSchema
@@ -4432,10 +4491,10 @@ var TooltipContents = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var start = feature.get('start');
   var end = feature.get('end');
   var name = feature.get('refName');
+  var info = feature.get('snpinfo');
   var loc = [name, start === end ? en(start) : "".concat(en(start), "..").concat(en(end))].filter(function (f) {
     return !!f;
   }).join(':');
-  var info = feature.get('snpinfo');
   var total = info === null || info === void 0 ? void 0 : info.total;
   return /*#__PURE__*/React.createElement("div", {
     ref: ref
@@ -4452,7 +4511,7 @@ var TooltipContents = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       var strands = score.strands;
       return /*#__PURE__*/React.createElement("tr", {
         key: base
-      }, /*#__PURE__*/React.createElement("td", null, base.toUpperCase()), /*#__PURE__*/React.createElement("td", null, score.total), /*#__PURE__*/React.createElement("td", null, base === 'total' || base === 'skip' ? '---' : "".concat(Math.floor(score.total / total * 100), "%")), /*#__PURE__*/React.createElement("td", null, strands['-1'] ? "".concat(strands['-1'], "(-)") : '', strands['1'] ? "".concat(strands['1'], "(+)") : ''), /*#__PURE__*/React.createElement("td", null, key));
+      }, /*#__PURE__*/React.createElement("td", null, base.toUpperCase()), /*#__PURE__*/React.createElement("td", null, score.total), /*#__PURE__*/React.createElement("td", null, base === 'total' || base === 'skip' ? '---' : "".concat(Math.floor(score.total / (total || score.total || 1) * 100), "%")), /*#__PURE__*/React.createElement("td", null, strands['-1'] ? "".concat(strands['-1'], "(-)") : '', strands['1'] ? "".concat(strands['1'], "(+)") : ''), /*#__PURE__*/React.createElement("td", null, key));
     });
   }))));
 });
@@ -6772,6 +6831,7 @@ var BamSlightlyLazyFeature = /*#__PURE__*/function () {
     this.record = record;
     this.adapter = adapter;
     this.ref = ref;
+    this.cachedMD = '';
   }
 
   _createClass(BamSlightlyLazyFeature, [{
@@ -6835,11 +6895,15 @@ var BamSlightlyLazyFeature = /*#__PURE__*/function () {
   }, {
     key: "_get_MD",
     value: function _get_MD() {
-      var md = this.record.get('MD');
-      var seq = this.get('seq');
+      var md = this.record.get('MD') || this.cachedMD;
+
+      if (!md) {
+        var seq = this.get('seq');
 
-      if (!md && seq && this.ref) {
-        return generateMD(this.ref, this.record.getReadBases(), this.get('CIGAR'));
+        if (seq && this.ref) {
+          this.cachedMD = generateMD(this.ref, this.get('seq'), this.get('CIGAR'));
+          return this.cachedMD;
+        }
       }
 
       return md;
@@ -7552,7 +7616,7 @@ var HtsgetBamAdapter$1 = {
   'default': HtsgetBamAdapter
 };
 
-var useStyles = /*#__PURE__*/makeStyles(function (theme) {
+var useStyles$1 = /*#__PURE__*/makeStyles(function (theme) {
   return {
     root: {
       width: 300
@@ -7567,7 +7631,7 @@ var useStyles = /*#__PURE__*/makeStyles(function (theme) {
 });
 
 function ColorByTagDlg$1(props) {
-  var classes = useStyles();
+  var classes = useStyles$1();
   var model = props.model,
       handleClose = props.handleClose;
 
@@ -7630,7 +7694,7 @@ var ColorByTag$1 = {
   'default': ColorByTag
 };
 
-var useStyles$1 = /*#__PURE__*/makeStyles(function (theme) {
+var useStyles$2 = /*#__PURE__*/makeStyles(function (theme) {
   return {
     root: {
       width: 500
@@ -7688,7 +7752,7 @@ function FilterByTagDlg$1(props) {
 
   var model = props.model,
       handleClose = props.handleClose;
-  var classes = useStyles$1();
+  var classes = useStyles$2();
   var filterBy = model.filterBy;
 
   var _useState = useState(filterBy === null || filterBy === void 0 ? void 0 : filterBy.flagInclude),
@@ -7809,7 +7873,7 @@ var FilterByTag$1 = {
   'default': FilterByTag
 };
 
-var useStyles$2 = /*#__PURE__*/makeStyles(function (theme) {
+var useStyles$3 = /*#__PURE__*/makeStyles(function (theme) {
   return {
     root: {
       margin: 0,
@@ -7825,7 +7889,7 @@ var useStyles$2 = /*#__PURE__*/makeStyles(function (theme) {
 });
 
 function SortByTagDlg$1(props) {
-  var classes = useStyles$2();
+  var classes = useStyles$3();
   var model = props.model,
       handleClose = props.handleClose;
 
@@ -7875,7 +7939,7 @@ var SortByTag$1 = {
   'default': SortByTag
 };
 
-var useStyles$3 = /*#__PURE__*/makeStyles(function (theme) {
+var useStyles$4 = /*#__PURE__*/makeStyles(function (theme) {
   return {
     root: {
       margin: theme.spacing(4)
@@ -7890,7 +7954,7 @@ var useStyles$3 = /*#__PURE__*/makeStyles(function (theme) {
 });
 
 function SetFeatureHeightDlg$1(props) {
-  var classes = useStyles$3();
+  var classes = useStyles$4();
   var model = props.model,
       handleClose = props.handleClose;
   var featureHeightSetting = model.featureHeightSetting,
@@ -7953,7 +8017,7 @@ var SetFeatureHeight$1 = {
   'default': SetFeatureHeight
 };
 
-var useStyles$4 = /*#__PURE__*/makeStyles(function (theme) {
+var useStyles$5 = /*#__PURE__*/makeStyles(function (theme) {
   return {
     root: {
       width: 500
@@ -7973,7 +8037,7 @@ var useStyles$4 = /*#__PURE__*/makeStyles(function (theme) {
 function SetMaxHeightDlg$1(props) {
   var model = props.model,
       handleClose = props.handleClose;
-  var classes = useStyles$4();
+  var classes = useStyles$5();
   var _model$maxHeight = model.maxHeight,
       maxHeight = _model$maxHeight === void 0 ? '' : _model$maxHeight;
 
@@ -8020,7 +8084,7 @@ var SetMaxHeight$1 = {
   'default': SetMaxHeight
 };
 
-var useStyles$5 = /*#__PURE__*/makeStyles(function (theme) {
+var useStyles$6 = /*#__PURE__*/makeStyles(function (theme) {
   return {
     root: {},
     closeButton: {
@@ -8041,7 +8105,7 @@ var useStyles$5 = /*#__PURE__*/makeStyles(function (theme) {
 
 function ModificationTable(_ref) {
   var modifications = _ref.modifications;
-  var classes = useStyles$5();
+  var classes = useStyles$6();
   return /*#__PURE__*/React.createElement("table", {
     className: classes.table
   }, /*#__PURE__*/React.createElement("tbody", null, modifications.map(function (_ref2) {
@@ -8061,7 +8125,7 @@ function ModificationTable(_ref) {
 }
 
 function ColorByTagDlg$2(props) {
-  var classes = useStyles$5();
+  var classes = useStyles$6();
   var model = props.model,
       handleClose = props.handleClose;
   var colorBy = model.colorBy,
@@ -8135,7 +8199,7 @@ var ColorByModifications$1 = {
   'default': ColorByModifications
 };
 
-var useStyles$6 = /*#__PURE__*/makeStyles(function () {
+var useStyles$7 = /*#__PURE__*/makeStyles(function () {
   return {
     compact: {
       paddingRight: 0,
@@ -8147,7 +8211,7 @@ var useStyles$6 = /*#__PURE__*/makeStyles(function () {
 var omit = ['clipPos', 'flags']; // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 function AlignmentFlags(props) {
-  var classes = useStyles$6();
+  var classes = useStyles$7();
   var feature = props.feature;
   var flags = feature.flags;
   var flagNames = ['read paired', 'read mapped in proper pair', 'read unmapped', 'mate unmapped', 'read reverse strand', 'mate reverse strand', 'first in pair', 'second in pair', 'not primary alignment', 'read fails platform/vendor quality checks', 'read is PCR or optical duplicate', 'supplementary alignment'];
@@ -8249,10 +8313,15 @@ function SupplementaryAlignments(props) {
       onClick: function onClick() {
         var view = model.view;
 
-        if (view) {
-          view.navToLocString(locString);
-        } else {
-          session.notify('No view associated with this feature detail panel anymore', 'warning');
+        try {
+          if (view) {
+            view.navToLocString(locString);
+          } else {
+            throw new Error('No view associated with this view anymore');
+          }
+        } catch (e) {
+          console.error(e);
+          session.notify("".concat(e));
         }
       },
       href: "#"
@@ -8269,10 +8338,15 @@ function PairLink(_ref2) {
     onClick: function onClick() {
       var view = model.view;
 
-      if (view) {
-        view.navToLocString(locString);
-      } else {
-        session.notify('No view associated with this feature detail panel anymore', 'warning');
+      try {
+        if (view) {
+          view.navToLocString(locString);
+        } else {
+          session.notify('No view associated with this feature detail panel anymore', 'warning');
+        }
+      } catch (e) {
+        console.error(e);
+        session.notify("".concat(e));
       }
     },
     href: "#"