@jbrowse/plugin-alignments 2.4.2 → 2.6.0

package/src/SNPCoverageAdapter/generateCoverageBins.ts

@@ -5,8 +5,11 @@ import {
   parseCigar,
   getNextRefPos,
   getModificationPositions,
+  getMethBins,
   Mismatch,
 } from '../MismatchParser'
+import { doesIntersect2 } from '@jbrowse/core/util'
+import { Bin, SkipMap } from './util'
 
 function mismatchLen(mismatch: Mismatch) {
   return !isInterbase(mismatch.type) ? mismatch.length : 1
@@ -38,49 +41,25 @@ export default async function generateCoverageBins(
   fetchSequence: (arg: Region) => Promise<string>,
 ) {
   const { colorBy } = opts
-  const binMax = Math.ceil(region.end - region.start)
-
-  const skipmap = {} as {
-    [key: string]: {
-      score: number
-      feature: unknown
-      start: number
-      end: number
-      strand: number
-      xs: string
-    }
+  const extendedRegion = {
+    ...region,
+    start: Math.max(0, region.start - 1),
+    end: region.end + 1,
   }
-
-  // bins contain:
-  // - cov feature if they contribute to coverage
-  // - noncov are insertions/clip features that don't contribute to coverage
-  // - delskips deletions or introns that don't contribute to coverage
-  type BinType = { total: number; strands: { [key: string]: number } }
-
-  const regionSeq =
+  const binMax = Math.ceil(extendedRegion.end - extendedRegion.start)
+  const skipmap = {} as SkipMap
+  const regionSequence =
     features.length && shouldFetchReferenceSequence(opts.colorBy?.type)
       ? await fetchSequence(region)
       : undefined
 
-  const bins = [] as {
-    refbase?: string
-    total: number
-    all: number
-    ref: number
-    '-1': 0
-    '0': 0
-    '1': 0
-    lowqual: BinType
-    cov: BinType
-    delskips: BinType
-    noncov: BinType
-  }[]
-
-  for (let i = 0; i < features.length; i++) {
-    const feature = features[i]
+  const bins = [] as Bin[]
+
+  for (const feature of features) {
     const fstart = feature.get('start')
     const fend = feature.get('end')
     const fstrand = feature.get('strand') as -1 | 0 | 1
+    const mismatches = (feature.get('mismatches') as Mismatch[]) || []
 
     for (let j = fstart; j < fend + 1; j++) {
       const i = j - region.start
@@ -93,10 +72,10 @@ export default async function generateCoverageBins(
             '-1': 0,
             '0': 0,
             '1': 0,
-            lowqual: {} as BinType,
-            cov: {} as BinType,
-            delskips: {} as BinType,
-            noncov: {} as BinType,
+            lowqual: {},
+            cov: {},
+            delskips: {},
+            noncov: {},
           }
         }
         if (j !== fend) {
@@ -109,17 +88,31 @@ export default async function generateCoverageBins(
     }
 
     if (colorBy?.type === 'modifications') {
-      const seq = feature.get('seq') as string
+      const seq = feature.get('seq') as string | undefined
       const mm = (getTagAlt(feature, 'MM', 'Mm') as string) || ''
       const ops = parseCigar(feature.get('CIGAR'))
       const fend = feature.get('end')
-
-      getModificationPositions(mm, seq, fstrand).forEach(
-        ({ type, positions }) => {
+      if (seq) {
+        const modifications = getModificationPositions(mm, seq, fstrand)
+        for (const { type, positions } of modifications) {
           const mod = `mod_${type}`
           for (const pos of getNextRefPos(ops, positions)) {
             const epos = pos + fstart - region.start
             if (epos >= 0 && epos < bins.length && pos + fstart < fend) {
+              if (bins[epos] === undefined) {
+                bins[epos] = {
+                  total: 0,
+                  all: 0,
+                  ref: 0,
+                  '-1': 0,
+                  '0': 0,
+                  '1': 0,
+                  lowqual: {},
+                  cov: {},
+                  delskips: {},
+                  noncov: {},
+                }
+              }
               const bin = bins[epos]
               if (bin) {
                 inc(bin, fstrand, 'cov', mod)
@@ -130,61 +123,84 @@ export default async function generateCoverageBins(
               }
             }
           }
-        },
-      )
+        }
+      }
     }
 
-    // methylation based coloring takes into account both reference
-    // sequence CpG detection and reads
-    else if (colorBy?.type === 'methylation') {
-      if (!regionSeq) {
+    if (colorBy?.type === 'methylation') {
+      if (!regionSequence) {
         throw new Error(
           'no region sequence detected, need sequenceAdapter configuration',
         )
       }
-      const seq = feature.get('seq')
-      const mm = getTagAlt(feature, 'MM', 'Mm') || ''
-      const methBins = new Array(region.end - region.start).fill(0)
-      const ops = parseCigar(feature.get('CIGAR'))
-
-      getModificationPositions(mm, seq, fstrand).forEach(
-        ({ type, positions }) => {
-          // we are processing methylation
-          if (type === 'm') {
-            for (const pos of getNextRefPos(ops, positions)) {
-              const epos = pos + fstart - region.start
-              if (epos >= 0 && epos < methBins.length) {
-                methBins[epos] = 1
-              }
-            }
-          }
-        },
-      )
+      const seq = feature.get('seq') as string | undefined
+      if (!seq) {
+        continue
+      }
+      const { methBins, methProbs } = getMethBins(feature)
+      const dels = mismatches.filter(f => f.type === 'deletion')
 
-      for (let j = fstart; j < fend; j++) {
-        const i = j - region.start
-        if (i >= 0 && i < bins.length - 1) {
-          const l1 = regionSeq[i].toLowerCase()
-          const l2 = regionSeq[i + 1].toLowerCase()
-          const bin = bins[i]
-          const bin1 = bins[i + 1]
+      // methylation based coloring takes into account both reference sequence
+      // CpG detection and reads
+      for (let i = 0; i < fend - fstart; i++) {
+        const j = i + fstart
+        const l1 = regionSequence[j - region.start + 1]?.toLowerCase()
+        const l2 = regionSequence[j - region.start + 2]?.toLowerCase()
+        if (l1 === 'c' && l2 === 'g') {
+          const bin0 = bins[j - region.start]
+          const bin1 = bins[j - region.start + 1]
+          const b0 = methBins[i]
+          const b1 = methBins[i + 1]
+          const p0 = methProbs[i]
+          const p1 = methProbs[i + 1]
 
           // color
-          if (l1 === 'c' && l2 === 'g') {
-            if (methBins[i] || methBins[i + 1]) {
-              inc(bin, fstrand, 'cov', 'meth')
+          if (
+            (b0 && (p0 !== undefined ? p0 > 0.5 : true)) ||
+            (b1 && (p1 !== undefined ? p1 > 0.5 : true))
+          ) {
+            if (bin0) {
+              inc(bin0, fstrand, 'cov', 'meth')
+              bin0.ref--
+              bin0[fstrand]--
+            }
+            if (bin1) {
               inc(bin1, fstrand, 'cov', 'meth')
-              bins[i].ref--
-              bins[i][fstrand]--
-              bins[i + 1].ref--
-              bins[i + 1][fstrand]--
-            } else {
-              inc(bin, fstrand, 'cov', 'unmeth')
-              inc(bin1, fstrand, 'cov', 'unmeth')
-              bins[i].ref--
-              bins[i][fstrand]--
-              bins[i + 1].ref--
-              bins[i + 1][fstrand]--
+              bin1.ref--
+              bin1[fstrand]--
+            }
+          } else {
+            if (bin0) {
+              if (
+                !dels?.some(d =>
+                  doesIntersect2(
+                    j,
+                    j + 1,
+                    d.start + fstart,
+                    d.start + fstart + d.length,
+                  ),
+                )
+              ) {
+                inc(bin0, fstrand, 'cov', 'unmeth')
+                bin0.ref--
+                bin0[fstrand]
+              }
+            }
+            if (bin1) {
+              if (
+                !dels?.some(d =>
+                  doesIntersect2(
+                    j + 1,
+                    j + 2,
+                    d.start + fstart,
+                    d.start + fstart + d.length,
+                  ),
+                )
+              ) {
+                inc(bin1, fstrand, 'cov', 'unmeth')
+                bin1.ref--
+                bin1[fstrand]--
+              }
             }
           }
         }
@@ -192,12 +208,10 @@ export default async function generateCoverageBins(
     }
 
     // normal SNP based coloring
-    const mismatches = (feature.get('mismatches') as Mismatch[]) || []
     const colorSNPs =
       colorBy?.type !== 'modifications' && colorBy?.type !== 'methylation'
 
-    for (let i = 0; i < mismatches.length; i++) {
-      const mismatch = mismatches[i]
+    for (const mismatch of mismatches) {
       const mstart = fstart + mismatch.start
       const mlen = mismatchLen(mismatch)
       const mend = mstart + mlen

package/src/SNPCoverageAdapter/index.ts

@@ -1,7 +1,6 @@
 import PluginManager from '@jbrowse/core/PluginManager'
 import AdapterType from '@jbrowse/core/pluggableElementTypes/AdapterType'
 import configSchema from './configSchema'
-import { capabilities } from './SNPCoverageAdapter'
 
 export default function (pluginManager: PluginManager) {
   pluginManager.addAdapterType(() => {
@@ -14,7 +13,6 @@ export default function (pluginManager: PluginManager) {
       getAdapterClass: () =>
         import('./SNPCoverageAdapter').then(r => r.default),
       configSchema,
-      adapterCapabilities: capabilities,
     })
   })
 }

package/src/SNPCoverageAdapter/util.ts

@@ -0,0 +1,33 @@
+export interface SkipMap {
+  [key: string]: {
+    score: number
+    feature: unknown
+    start: number
+    end: number
+    strand: number
+    xs: string
+  }
+}
+
+// bins contain:
+// - cov feature if they contribute to coverage
+// - noncov are insertions/clip features that don't contribute to coverage
+// - delskips deletions or introns that don't contribute to coverage
+export interface BinType {
+  total?: number
+  strands?: { [key: string]: number }
+}
+
+export interface Bin {
+  refbase?: string
+  total: number
+  all: number
+  ref: number
+  '-1': number
+  '0': number
+  '1': number
+  lowqual: BinType
+  cov: BinType
+  delskips: BinType
+  noncov: BinType
+}

package/src/SNPCoverageRenderer/SNPCoverageRenderer.ts

@@ -22,7 +22,7 @@ export interface RenderArgsDeserializedWithFeatures
   features: Map<string, Feature>
   ticks: { values: number[] }
   displayCrossHatches: boolean
-  modificationTagMap?: Record<string, string>
+  modificationTagMap?: Record<string, string | undefined>
 }
 
 type Counts = {
@@ -100,10 +100,10 @@ export default class SNPCoverageRenderer extends WiggleBaseRenderer {
       C: bases.C.main,
       G: bases.G.main,
       T: bases.T.main,
-      total: 'lightgrey',
       insertion: 'purple',
       softclip: 'blue',
       hardclip: 'red',
+      total: readConfObject(cfg, 'color'),
       meth: 'red',
       unmeth: 'blue',
     }
@@ -155,7 +155,7 @@ export default class SNPCoverageRenderer extends WiggleBaseRenderer {
         ctx.fillStyle =
           colorForBase[base] ||
           modificationTagMap[base.replace('mod_', '')] ||
-          '#888'
+          'black'
 
         const height = toHeight(score)
         const bottom = toY(score) + height

package/src/SNPCoverageRenderer/configSchema.ts

@@ -51,6 +51,12 @@ const SNPCoverageRenderer = ConfigurationSchema(
         'draw a triangular indicator where an event has been detected',
       defaultValue: true,
     },
+
+    color: {
+      type: 'color',
+      description: 'Background color for the SNPCoverage renderer',
+      defaultValue: '#d3d3d3',
+    },
   },
   { explicitlyTyped: true },
 )

package/src/shared/BaseDisplayComponent.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import { LoadingEllipses } from '@jbrowse/core/ui'
+import { BlockMsg } from '@jbrowse/plugin-linear-genome-view'
+import { makeStyles } from 'tss-react/mui'
+import { observer } from 'mobx-react'
+
+// local
+import { LinearReadCloudDisplayModel } from '../LinearReadCloudDisplay/model'
+import { LinearReadArcsDisplayModel } from '../LinearReadArcsDisplay/model'
+import { getContainingView } from '@jbrowse/core/util'
+
+const useStyles = makeStyles()(theme => {
+  const bg = theme.palette.action.disabledBackground
+  return {
+    loading: {
+      backgroundColor: theme.palette.background.default,
+      backgroundImage: `repeating-linear-gradient(45deg, transparent, transparent 5px, ${bg} 5px, ${bg} 10px)`,
+      position: 'absolute',
+      bottom: 0,
+      height: 50,
+      width: 300,
+      right: 0,
+      pointerEvents: 'none',
+      textAlign: 'center',
+    },
+  }
+})
+
+export default observer(function ({
+  model,
+  children,
+}: {
+  model: LinearReadArcsDisplayModel | LinearReadCloudDisplayModel
+  children?: React.ReactNode
+}) {
+  const { error, regionTooLarge } = model
+  return error ? (
+    <BlockMsg
+      message={`${error}`}
+      severity="error"
+      buttonText="Reload"
+      action={model.reload}
+    />
+  ) : regionTooLarge ? (
+    model.regionCannotBeRendered()
+  ) : (
+    <DataDisplay model={model}>{children}</DataDisplay>
+  )
+})
+
+const DataDisplay = observer(function ({
+  model,
+  children,
+}: {
+  model: LinearReadArcsDisplayModel | LinearReadCloudDisplayModel
+  children?: React.ReactNode
+}) {
+  const { drawn, loading } = model
+  const view = getContainingView(model)
+  const left = (model.lastDrawnOffsetPx || 0) - view.offsetPx
+  return (
+    // this data-testid is located here because changing props on the canvas
+    // itself is very sensitive to triggering ref invalidation
+    <div data-testid={`drawn-${drawn}`}>
+      <div style={{ position: 'absolute', left }}>{children}</div>
+      {left !== 0 || loading ? <LoadingBar model={model} /> : null}
+    </div>
+  )
+})
+
+const LoadingBar = observer(function ({
+  model,
+}: {
+  model: LinearReadArcsDisplayModel | LinearReadCloudDisplayModel
+}) {
+  const { classes } = useStyles()
+  const { message } = model
+  return (
+    <div className={classes.loading}>
+      <LoadingEllipses message={message} />
+    </div>
+  )
+})

package/src/shared/FilterByTag.tsx

@@ -69,27 +69,27 @@ function Bitmask(props: { flag?: number; setFlag: Function }) {
     </>
   )
 }
-
+interface FilterBy {
+  flagExclude: number
+  flagInclude: number
+  readName?: string
+  tagFilter?: { tag: string; value: string }
+}
 function FilterByTagDlg(props: {
   model: {
-    filterBy?: {
-      flagExclude: number
-      flagInclude: number
-      readName?: string
-      tagFilter?: { tag: string; value: string }
-    }
-    setFilterBy: Function
+    filterBy: FilterBy
+    setFilterBy: (arg: FilterBy) => void
   }
   handleClose: () => void
 }) {
   const { model, handleClose } = props
   const { classes } = useStyles()
   const { filterBy } = model
-  const [flagInclude, setFlagInclude] = useState(filterBy?.flagInclude)
-  const [flagExclude, setFlagExclude] = useState(filterBy?.flagExclude)
-  const [tag, setTag] = useState(filterBy?.tagFilter?.tag || '')
-  const [tagValue, setTagValue] = useState(filterBy?.tagFilter?.value || '')
-  const [readName, setReadName] = useState(filterBy?.readName || '')
+  const [flagInclude, setFlagInclude] = useState(filterBy.flagInclude)
+  const [flagExclude, setFlagExclude] = useState(filterBy.flagExclude)
+  const [tag, setTag] = useState(filterBy.tagFilter?.tag || '')
+  const [tagValue, setTagValue] = useState(filterBy.tagFilter?.value || '')
+  const [readName, setReadName] = useState(filterBy.readName || '')
   const validTag = tag.match(/^[A-Za-z][A-Za-z0-9]$/)
 
   const site = 'https://broadinstitute.github.io/picard/explain-flags.html'
@@ -127,21 +127,15 @@ function FilterByTagDlg(props: {
             placeholder="Enter tag name"
             inputProps={{
               maxLength: 2,
-              'data-testid': 'color-tag-name-input',
             }}
             error={tag.length === 2 && !validTag}
             helperText={tag.length === 2 && !validTag ? 'Not a valid tag' : ''}
-            data-testid="color-tag-name"
           />
           <TextField
             className={classes.field}
             value={tagValue}
             onChange={event => setTagValue(event.target.value)}
             placeholder="Enter tag value"
-            inputProps={{
-              'data-testid': 'color-tag-name-input',
-            }}
-            data-testid="color-tag-value"
           />
         </Paper>
         <Paper className={classes.paper} variant="outlined">
@@ -151,10 +145,6 @@ function FilterByTagDlg(props: {
             value={readName}
             onChange={event => setReadName(event.target.value)}
             placeholder="Enter read name"
-            inputProps={{
-              'data-testid': 'color-tag-readname-input',
-            }}
-            data-testid="color-tag-readname"
           />
         </Paper>
         <DialogActions>

package/src/shared/afterAttach.tsx

@@ -0,0 +1,66 @@
+import { getContainingView } from '@jbrowse/core/util'
+import { createAutorun } from '../util'
+import { fetchChains } from './fetchChains'
+import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+import { IAnyStateTreeNode } from 'mobx-state-tree'
+
+type LGV = LinearGenomeViewModel
+
+export function doAfterAttach<T extends IAnyStateTreeNode>(
+  self: T,
+  cb: (
+    self: T,
+    ctx: CanvasRenderingContext2D,
+    width: number,
+    height: number,
+  ) => void,
+) {
+  createAutorun(
+    self,
+    async () => {
+      await fetchChains(self)
+    },
+    { delay: 1000 },
+  )
+
+  function draw(view: LGV) {
+    const canvas = self.ref
+    if (!canvas) {
+      return
+    }
+
+    const ctx = canvas.getContext('2d')
+    if (!ctx) {
+      return
+    }
+
+    if (!self.chainData) {
+      return
+    }
+
+    ctx.clearRect(0, 0, canvas.width, self.height * 2)
+    ctx.resetTransform()
+    ctx.scale(2, 2)
+    cb(self, ctx, canvas.width, self.height)
+    self.setLastDrawnOffsetPx(view.offsetPx)
+    self.setLastDrawnBpPerPx(view.bpPerPx)
+  }
+
+  // first autorun instantly draws if bpPerPx changes
+  createAutorun(self, async () => {
+    const view = getContainingView(self) as LGV
+    if (view.bpPerPx !== self.lastDrawnBpPerPx) {
+      draw(view)
+    }
+  })
+
+  // second autorun draws after delay 1000 e.g. if offsetPx changes
+  createAutorun(
+    self,
+    async () => {
+      const view = getContainingView(self) as LGV
+      draw(view)
+    },
+    { delay: 1000 },
+  )
+}