@jbrowse/plugin-alignments 1.6.4 → 1.6.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-alignments",
-  "version": "1.6.4",
+  "version": "1.6.7",
   "description": "JBrowse 2 alignments adapters, tracks, etc.",
   "keywords": [
     "jbrowse",
@@ -35,16 +35,16 @@
     "useSrc": "node ../../scripts/useSrc.js"
   },
   "dependencies": {
-    "@gmod/bam": "^1.1.11",
-    "@gmod/cram": "^1.5.9",
+    "@gmod/bam": "^1.1.14",
+    "@gmod/cram": "^1.6.1",
     "@material-ui/icons": "^4.9.1",
-    "abortable-promise-cache": "^1.1.3",
+    "abortable-promise-cache": "^1.5.0",
     "color": "^3.1.2",
     "copy-to-clipboard": "^3.3.1",
     "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": "7f157fbb2302d8825f99d01bcc0fd0616116c5d2"
+  "gitHead": "02012ec299c36647f755316571775d36b0fee5ec"
 }

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/BamAdapter.ts

@@ -197,11 +197,10 @@ export default class BamAdapter extends BaseFeatureDataAdapter {
 
   async estimateRegionsStats(regions: Region[], opts?: BaseOptions) {
     const { bam } = await this.configure()
-    // @ts-ignore
-    const index = bam.index
     // this is a method to avoid calling on htsget adapters
-    if (index.filehandle !== '?') {
-      const bytes = await bytesForRegions(regions, index)
+    // @ts-ignore
+    if (bam.index.filehandle !== '?') {
+      const bytes = await bytesForRegions(regions, bam)
       const fetchSizeLimit = readConfObject(this.config, 'fetchSizeLimit')
       return { bytes, fetchSizeLimit }
     } else {

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
@@ -222,12 +225,10 @@ const stateModelFactory = (
           <>
             <g>{await self.SNPCoverageDisplay.renderSvg(opts)}</g>
             <g transform={`translate(0 ${self.SNPCoverageDisplay.height})`}>
-              {
-                await self.PileupDisplay.renderSvg({
-                  ...opts,
-                  overrideHeight: pileupHeight,
-                })
-              }
+              {await self.PileupDisplay.renderSvg({
+                ...opts,
+                overrideHeight: pileupHeight,
+              })}
             </g>
           </>
         )

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,42 +703,46 @@ 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 bug https://bugs.chromium.org/p/chro>
-        // ref #1236
+        // fix to avoid bad rendering note that this was also related to chrome
+        // bug https://bugs.chromium.org/p/chromium/issues/detail?id=1131528
+        // also affected firefox ref #1236 #2750
         if (leftPx + widthPx > 0) {
           // make small exons more visible when zoomed far out
-          ctx.clearRect(
-            leftPx,
-            topPx,
-            widthPx - (bpPerPx > 10 ? 1.5 : 0),
-            heightPx,
+          const adjustPx = widthPx - (bpPerPx > 10 ? 1.5 : 0)
+          ctx.clearRect(leftPx, topPx, adjustPx, heightPx)
+          ctx.fillStyle = '#333'
+          ctx.fillRect(
+            Math.max(0, leftPx),
+            topPx + heightPx / 2 - 1,
+            adjustPx + (leftPx < 0 ? leftPx : 0),
+            2,
           )
         }
-        ctx.fillStyle = '#333'
-        ctx.fillRect(leftPx, topPx + heightPx / 2, widthPx, 2)
       }
     }
 
@@ -796,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