@jbrowse/plugin-alignments 1.6.5 → 1.6.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-alignments",
-  "version": "1.6.5",
+  "version": "1.6.6",
   "description": "JBrowse 2 alignments adapters, tracks, etc.",
   "keywords": [
     "jbrowse",
@@ -35,7 +35,7 @@
     "useSrc": "node ../../scripts/useSrc.js"
   },
   "dependencies": {
-    "@gmod/bam": "^1.1.12",
+    "@gmod/bam": "^1.1.14",
     "@gmod/cram": "^1.6.1",
     "@material-ui/icons": "^4.9.1",
     "abortable-promise-cache": "^1.5.0",
@@ -44,7 +44,7 @@
     "fast-deep-equal": "^3.1.3",
     "generic-filehandle": "^2.2.2",
     "json-stable-stringify": "^1.0.1",
-    "react-d3-axis": "^0.1.2"
+    "react-d3-axis-mod": "^0.1.3"
   },
   "peerDependencies": {
     "@jbrowse/core": "^1.0.0",
@@ -61,5 +61,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ab41f017840ffef09f5d60b008281cedaa5abe26"
+  "gitHead": "9fcca7793af0df2d6e527ddaace2b368c8ed2879"
 }

package/src/AlignmentsFeatureDetail/AlignmentsFeatureDetail.tsx

@@ -136,13 +136,17 @@ function SupplementaryAlignments(props: { tag: string; model: any }) {
                 <Link
                   onClick={() => {
                     const { view } = model
-                    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(`${e}`)
                     }
                   }}
                   href="#"
@@ -164,13 +168,18 @@ function PairLink({ locString, model }: { locString: string; model: any }) {
     <Link
       onClick={() => {
         const { view } = model
-        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(`${e}`)
         }
       }}
       href="#"

package/src/BamAdapter/BamSlightlyLazyFeature.ts

@@ -15,6 +15,7 @@ import {
 import BamAdapter from './BamAdapter'
 
 export default class BamSlightlyLazyFeature implements Feature {
+  private cachedMD = ''
   constructor(
     private record: BamRecord,
     private adapter: BamAdapter,
@@ -70,10 +71,13 @@ export default class BamSlightlyLazyFeature implements Feature {
   }
 
   _get_MD() {
-    const md = this.record.get('MD') as string | undefined
-    const seq = this.get('seq') as string
-    if (!md && seq && this.ref) {
-      return generateMD(this.ref, this.record.getReadBases(), this.get('CIGAR'))
+    const md = this.record.get('MD') || this.cachedMD
+    if (!md) {
+      const seq = this.get('seq')
+      if (seq && this.ref) {
+        this.cachedMD = generateMD(this.ref, this.get('seq'), this.get('CIGAR'))
+        return this.cachedMD
+      }
     }
     return md
   }

package/src/LinearAlignmentsDisplay/components/AlignmentsDisplay.tsx

@@ -2,47 +2,55 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import { getConf } from '@jbrowse/core/configuration'
 import { ResizeHandle } from '@jbrowse/core/ui'
+import { makeStyles } from '@material-ui/core'
 import { AlignmentsDisplayModel } from '../models/model'
 
+const useStyles = makeStyles(() => ({
+  resizeHandle: {
+    height: 2,
+    position: 'absolute',
+    zIndex: 2,
+  },
+}))
+
 function AlignmentsDisplay({ model }: { model: AlignmentsDisplayModel }) {
   const { PileupDisplay, SNPCoverageDisplay, showPileup, showCoverage } = model
+  const classes = useStyles()
+  const top = SNPCoverageDisplay.height
   return (
     <div
       data-testid={`display-${getConf(model, 'displayId')}`}
       style={{ position: 'relative' }}
     >
-      <div data-testid="Blockset-snpcoverage">
-        {showCoverage ? (
-          <SNPCoverageDisplay.RenderingComponent model={SNPCoverageDisplay} />
-        ) : null}
-      </div>
-      <ResizeHandle
-        onDrag={delta => {
-          if (SNPCoverageDisplay) {
-            SNPCoverageDisplay.setHeight(SNPCoverageDisplay.height + delta)
-            return delta
-          }
-          return 0
-        }}
-        style={{
-          position: 'absolute',
-          top: showCoverage ? SNPCoverageDisplay.height + 2 : 0,
-          height: 3,
-        }}
-      />
+      {showCoverage ? (
+        <>
+          <div data-testid="Blockset-snpcoverage">
+            <SNPCoverageDisplay.RenderingComponent model={SNPCoverageDisplay} />
+          </div>
+          <ResizeHandle
+            onDrag={delta => {
+              SNPCoverageDisplay.setHeight(SNPCoverageDisplay.height + delta)
+              return delta
+            }}
+            className={classes.resizeHandle}
+            style={{
+              top,
+            }}
+          />
+        </>
+      ) : null}
 
-      <div
-        data-testid="Blockset-pileup"
-        style={{
-          position: 'absolute',
-          top: showCoverage ? SNPCoverageDisplay.height + 5 : 0,
-          height: 3,
-        }}
-      >
-        {showPileup ? (
+      {showPileup ? (
+        <div
+          data-testid="Blockset-pileup"
+          style={{
+            position: 'absolute',
+            top: showCoverage ? SNPCoverageDisplay.height : 0,
+          }}
+        >
           <PileupDisplay.RenderingComponent model={PileupDisplay} />
-        ) : null}
-      </div>
+        </div>
+      ) : null}
     </div>
   )
 }

package/src/LinearAlignmentsDisplay/models/model.tsx

@@ -1,13 +1,16 @@
 import React from 'react'
-import { ConfigurationReference, getConf } from '@jbrowse/core/configuration'
-import { AnyConfigurationModel } from '@jbrowse/core/configuration/configurationSchema'
+import {
+  ConfigurationReference,
+  AnyConfigurationModel,
+  getConf,
+} from '@jbrowse/core/configuration'
 import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes/models'
 import PluginManager from '@jbrowse/core/PluginManager'
 import { MenuItem } from '@jbrowse/core/ui'
-import deepEqual from 'fast-deep-equal'
 import { autorun, when } from 'mobx'
 import { addDisposer, getSnapshot, Instance, types } from 'mobx-state-tree'
 import { getContainingTrack } from '@jbrowse/core/util'
+import deepEqual from 'fast-deep-equal'
 import { AlignmentsConfigModel } from './configSchema'
 
 const minDisplayHeight = 20

package/src/LinearPileupDisplay/model.ts

@@ -460,7 +460,7 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
                 {
                   label: 'Sort by tag...',
                   onClick: () => {
-                    getSession(self).queueDialog((doneCallback: Function) => [
+                    getSession(self).queueDialog(doneCallback => [
                       SortByTagDlg,
                       { model: self, handleClose: doneCallback },
                     ])
@@ -509,7 +509,7 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
                 {
                   label: 'Modifications or methylation',
                   onClick: () => {
-                    getSession(self).queueDialog((doneCallback: Function) => [
+                    getSession(self).queueDialog(doneCallback => [
                       ModificationsDlg,
                       { model: self, handleClose: doneCallback },
                     ])
@@ -530,7 +530,7 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
                 {
                   label: 'Color by tag...',
                   onClick: () => {
-                    getSession(self).queueDialog((doneCallback: Function) => [
+                    getSession(self).queueDialog(doneCallback => [
                       ColorByTagDlg,
                       { model: self, handleClose: doneCallback },
                     ])
@@ -542,7 +542,7 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
               label: 'Filter by',
               icon: FilterListIcon,
               onClick: () => {
-                getSession(self).queueDialog((doneCallback: Function) => [
+                getSession(self).queueDialog(doneCallback => [
                   FilterByTagDlg,
                   { model: self, handleClose: doneCallback },
                 ])
@@ -551,7 +551,7 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
             {
               label: 'Set feature height',
               onClick: () => {
-                getSession(self).queueDialog((doneCallback: Function) => [
+                getSession(self).queueDialog(doneCallback => [
                   SetFeatureHeightDlg,
                   { model: self, handleClose: doneCallback },
                 ])
@@ -560,7 +560,7 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
             {
               label: 'Set max height',
               onClick: () => {
-                getSession(self).queueDialog((doneCallback: Function) => [
+                getSession(self).queueDialog(doneCallback => [
                   SetMaxHeightDlg,
                   { model: self, handleClose: doneCallback },
                 ])

package/src/LinearSNPCoverageDisplay/components/Tooltip.tsx

@@ -27,11 +27,11 @@ const TooltipContents = React.forwardRef(
     const start = feature.get('start')
     const end = feature.get('end')
     const name = feature.get('refName')
+    const info = feature.get('snpinfo') as SNPInfo
     const loc = [name, start === end ? en(start) : `${en(start)}..${en(end)}`]
       .filter(f => !!f)
       .join(':')
 
-    const info = feature.get('snpinfo') as SNPInfo
     const total = info?.total
 
     return (
@@ -64,7 +64,9 @@ const TooltipContents = React.forwardRef(
                     <td>
                       {base === 'total' || base === 'skip'
                         ? '---'
-                        : `${Math.floor((score.total / total) * 100)}%`}
+                        : `${Math.floor(
+                            (score.total / (total || score.total || 1)) * 100,
+                          )}%`}
                     </td>
                     <td>
                       {strands['-1'] ? `${strands['-1']}(-)` : ''}
@@ -90,7 +92,7 @@ const SNPCoverageTooltip = observer(
     height: number
     offsetMouseCoord: Coord
     clientMouseCoord: Coord
-    clientRect?: ClientRect
+    clientRect?: DOMRect
   }) => {
     const { model } = props
     const { featureUnderMouse: feat } = model

package/src/LinearSNPCoverageDisplay/models/configSchema.ts

@@ -40,11 +40,10 @@ export default function SNPCoverageConfigFactory(pluginManager: PluginManager) {
         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', {

package/src/PileupRenderer/PileupRenderer.tsx

@@ -345,7 +345,8 @@ export default class PileupRenderer extends BoxRendererType {
 
     // probIndex applies across multiple modifications e.g.
     let probIndex = 0
-    modifications.forEach(({ type, positions }) => {
+    for (let i = 0; i < modifications.length; i++) {
+      const { type, positions } = modifications[i]
       const col = modificationTagMap[type] || 'black'
       const base = Color(col)
       for (const readPos of getNextRefPos(cigarOps, positions)) {
@@ -367,7 +368,7 @@ export default class PileupRenderer extends BoxRendererType {
         }
         probIndex++
       }
-    })
+    }
   }
 
   // Color by methylation is slightly modified version of color by
@@ -399,7 +400,9 @@ export default class PileupRenderer extends BoxRendererType {
     const { start: rstart, end: rend } = region
 
     const methBins = new Array(rend - rstart).fill(0)
-    getModificationPositions(mm, seq, strand).forEach(({ type, positions }) => {
+    const modifications = getModificationPositions(mm, seq, strand)
+    for (let i = 0; i < modifications.length; i++) {
+      const { type, positions } = modifications[i]
       if (type === 'm' && positions) {
         for (const pos of getNextRefPos(cigarOps, positions)) {
           const epos = pos + fstart - rstart
@@ -408,7 +411,7 @@ export default class PileupRenderer extends BoxRendererType {
           }
         }
       }
-    })
+    }
 
     for (let j = fstart; j < fend; j++) {
       const i = j - rstart
@@ -650,6 +653,12 @@ export default class PileupRenderer extends BoxRendererType {
       return color
     }
 
+    // extraHorizontallyFlippedOffset is used to draw interbase items, which
+    // are located to the left when forward and right when reversed
+    const extraHorizontallyFlippedOffset = region.reversed
+      ? 1 / bpPerPx + 1
+      : -1
+
     // two pass rendering: first pass, draw all the mismatches except wide
     // insertion markers
     for (let i = 0; i < mismatches.length; i += 1) {
@@ -694,26 +703,29 @@ export default class PileupRenderer extends BoxRendererType {
         }
       } else if (mismatch.type === 'insertion' && drawIndels) {
         ctx.fillStyle = 'purple'
-        const pos = leftPx - 1
+        const pos = leftPx + extraHorizontallyFlippedOffset
         const len = +mismatch.base || mismatch.length
+        const 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(`(${mismatch.base})`, leftPx + 2, topPx + heightPx)
+            ctx.fillText(`(${mismatch.base})`, pos + 3, topPx + heightPx)
           }
         }
       } else if (mismatch.type === 'hardclip' || mismatch.type === 'softclip') {
         ctx.fillStyle = mismatch.type === 'hardclip' ? 'red' : 'blue'
-        const pos = leftPx - 1
-        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)
+        const pos = leftPx + extraHorizontallyFlippedOffset
+        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(`(${mismatch.base})`, leftPx + 2, topPx + heightPx)
+          ctx.fillText(`(${mismatch.base})`, pos + 3, topPx + heightPx)
         }
       } else if (mismatch.type === 'skip') {
         // fix to avoid bad rendering note that this was also related to chrome
@@ -797,10 +809,9 @@ export default class PileupRenderer extends BoxRendererType {
         .filter(mismatch => mismatch.type === 'softclip')
         .forEach(mismatch => {
           const softClipLength = mismatch.cliplen || 0
+          const s = feature.get('start')
           const softClipStart =
-            mismatch.start === 0
-              ? feature.get('start') - softClipLength
-              : feature.get('start') + mismatch.start
+            mismatch.start === 0 ? s - softClipLength : s + mismatch.start
 
           for (let k = 0; k < softClipLength; k += 1) {
             const base = seq.charAt(k + mismatch.start)

package/src/PileupRenderer/components/PileupRendering.tsx

@@ -136,9 +136,11 @@ function PileupRendering(props: {
     }
     let offsetX = 0
     let offsetY = 0
-    if (highlightOverlayCanvas.current) {
-      offsetX = highlightOverlayCanvas.current.getBoundingClientRect().left
-      offsetY = highlightOverlayCanvas.current.getBoundingClientRect().top
+    const canvas = highlightOverlayCanvas.current
+    if (canvas) {
+      const { left, top } = canvas.getBoundingClientRect()
+      offsetX = left
+      offsetY = top
     }
     offsetX = event.clientX - offsetX
     offsetY = event.clientY - offsetY

package/src/SNPCoverageAdapter/SNPCoverageAdapter.ts

@@ -88,20 +88,18 @@ export default class SNPCoverageAdapter extends BaseFeatureDataAdapter {
       )
 
       bins.forEach((bin, index) => {
-        if (bin.total) {
-          observer.next(
-            new SimpleFeature({
-              id: `${this.id}-${region.start}-${index}`,
-              data: {
-                score: bin.total,
-                snpinfo: bin,
-                start: region.start + index,
-                end: region.start + index + 1,
-                refName: region.refName,
-              },
-            }),
-          )
-        }
+        observer.next(
+          new SimpleFeature({
+            id: `${this.id}-${region.start}-${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
@@ -198,7 +196,7 @@ export default class SNPCoverageAdapter extends BaseFeatureDataAdapter {
             const fstrand = feature.get('strand')
             const cigarOps = parseCigar(cigar)
 
-            for (let j = fstart; j < fend; j++) {
+            for (let j = fstart; j < fend + 1; j++) {
               const i = j - region.start
               if (i >= 0 && i < binMax) {
                 const bin = bins[i] || {
@@ -209,8 +207,10 @@ export default class SNPCoverageAdapter extends BaseFeatureDataAdapter {
                   noncov: {} as BinType,
                   ref: {} as BinType,
                 }
-                bin.total++
-                inc(bin, fstrand, 'ref', 'ref')
+                if (j !== fend) {
+                  bin.total++
+                  inc(bin, fstrand, 'ref', 'ref')
+                }
                 bins[i] = bin
               }
             }
@@ -243,7 +243,15 @@ export default class SNPCoverageAdapter extends BaseFeatureDataAdapter {
                       epos < bins.length &&
                       pos + fstart < fend
                     ) {
-                      const bin = bins[epos]
+                      const bin = bins[epos] || {
+                        total: 0,
+                        lowqual: {} as BinType,
+                        cov: {} as BinType,
+                        delskips: {} as BinType,
+                        noncov: {} as BinType,
+                        ref: {} as BinType,
+                      }
+
                       if (probabilities[probIndex] > 0.5) {
                         inc(bin, fstrand, 'cov', mod)
                       } else {
@@ -317,12 +325,8 @@ export default class SNPCoverageAdapter extends BaseFeatureDataAdapter {
               if (mismatches) {
                 for (let i = 0; i < mismatches.length; i++) {
                   const mismatch = mismatches[i]
-                  const mstart = fstart + mismatch.start
-                  for (
-                    let j = mstart;
-                    j < mstart + mismatchLen(mismatch);
-                    j++
-                  ) {
+                  const ms = fstart + mismatch.start
+                  for (let j = ms; j < ms + mismatchLen(mismatch); j++) {
                     const epos = j - region.start
                     if (epos >= 0 && epos < bins.length) {
                       const bin = bins[epos]