@jbrowse/plugin-alignments 2.5.0 → 2.6.0

package/src/LinearReadCloudDisplay/components/ReactComponent.tsx

@@ -1,54 +1,36 @@
-import React from 'react'
-import { isAlive } from 'mobx-state-tree'
+import React, { useCallback } from 'react'
 import { observer } from 'mobx-react'
-import { makeStyles } from 'tss-react/mui'
 import { getContainingView } from '@jbrowse/core/util'
-import { LoadingEllipses } from '@jbrowse/core/ui'
-import {
-  BlockMsg,
-  LinearGenomeViewModel,
-} from '@jbrowse/plugin-linear-genome-view'
+import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
 // local
 import { LinearReadCloudDisplayModel } from '../model'
+import BaseDisplayComponent from '../../shared/BaseDisplayComponent'
 
 type LGV = LinearGenomeViewModel
 
-const useStyles = makeStyles()(theme => ({
-  loading: {
-    paddingLeft: '0.6em',
-    backgroundColor: theme.palette.action.disabledBackground,
-    backgroundImage:
-      'repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,.5) 5px, rgba(255,255,255,.5) 10px)',
-    height: '100%',
-    width: '100%',
-    pointerEvents: 'none',
-    textAlign: 'center',
-  },
-}))
-
 const Cloud = observer(function ({
   model,
 }: {
   model: LinearReadCloudDisplayModel
 }) {
   const view = getContainingView(model) as LGV
+  const width = Math.round(view.dynamicBlocks.totalWidthPx)
+  const height = model.height
+  const cb = useCallback(
+    (ref: HTMLCanvasElement) => model.setRef(ref),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [model, width, height],
+  )
+
+  // note: the position absolute below avoids scrollbar from appearing on track
   return (
     <canvas
-      data-testid={`ReadCloud-display-${model.drawn}`}
-      ref={ref => {
-        if (isAlive(model)) {
-          model.setRef(ref)
-        }
-      }}
-      style={{
-        position: 'absolute',
-        left: -view.offsetPx + model.lastDrawnOffsetPx,
-        width: view.dynamicBlocks.totalWidthPx,
-        height: model.height,
-      }}
-      width={view.dynamicBlocks.totalWidthPx * 2}
-      height={model.height * 2}
+      data-testid="cloud-canvas"
+      ref={cb}
+      style={{ width, height, position: 'absolute' }}
+      width={width * 2}
+      height={height * 2}
     />
   )
 })
@@ -58,29 +40,9 @@ export default observer(function ({
 }: {
   model: LinearReadCloudDisplayModel
 }) {
-  const view = getContainingView(model)
-  const { classes } = useStyles()
-  const err = model.error
-  return err ? (
-    <BlockMsg
-      message={`${err}`}
-      severity="error"
-      buttonText={'Reload'}
-      action={model.reload}
-    />
-  ) : model.loading ? (
-    <div
-      className={classes.loading}
-      style={{
-        width: view.dynamicBlocks.totalWidthPx,
-        height: 20,
-        position: 'absolute',
-        left: Math.max(0, -view.offsetPx),
-      }}
-    >
-      <LoadingEllipses message={model.message} />
-    </div>
-  ) : (
-    <Cloud model={model} />
+  return (
+    <BaseDisplayComponent model={model}>
+      <Cloud model={model} />
+    </BaseDisplayComponent>
   )
 })

package/src/LinearReadCloudDisplay/drawFeats.ts

@@ -1,60 +1,16 @@
-import { AnyConfigurationModel, getConf } from '@jbrowse/core/configuration'
 import { getContainingView, getSession } from '@jbrowse/core/util'
-
 import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+
 // locals
-import {
-  getOrientationColor,
-  getInsertSizeColor,
-  getInsertSizeAndOrientationColor,
-} from '../shared/color'
-import { ChainData, ReducedFeature } from '../shared/fetchChains'
+import { LinearReadCloudDisplayModel } from './model'
+import { hasPairedReads } from '../shared/util'
+import { drawPairChains } from './drawPairChains'
+import { drawLongReadChains } from './drawLongReadChains'
 
 type LGV = LinearGenomeViewModel
 
-interface ChainCoord {
-  distance: number
-  r1s: number
-  r1e: number
-  r2s: number
-  r2e: number
-  v0: ReducedFeature
-  v1: ReducedFeature
-}
-
-// avoid drawing negative width features for SVG exports
-function fillRectCtx(
-  x: number,
-  y: number,
-  width: number,
-  height: number,
-  ctx: CanvasRenderingContext2D,
-  color?: string,
-) {
-  if (width < 0) {
-    x += width
-    width = -width
-  }
-  if (height < 0) {
-    y += height
-    height = -height
-  }
-
-  if (color) {
-    ctx.fillStyle = color
-  }
-  ctx.fillRect(x, y, width, height)
-}
-
-export default async function drawFeats(
-  self: {
-    setLastDrawnOffsetPx: (n: number) => void
-    setError: (e: unknown) => void
-    colorBy?: { type: string }
-    height: number
-    chainData?: ChainData
-    configuration: AnyConfigurationModel
-  },
+export function drawFeats(
+  self: LinearReadCloudDisplayModel,
   ctx: CanvasRenderingContext2D,
 ) {
   const { chainData } = self
@@ -62,8 +18,6 @@ export default async function drawFeats(
     return
   }
   const { assemblyManager } = getSession(self)
-  const featureHeight = getConf(self, 'featureHeight')
-  const displayHeight = self.height
   const view = getContainingView(self) as LGV
   const assemblyName = view.assemblyNames[0]
   const asm = assemblyManager.get(assemblyName)
@@ -71,120 +25,11 @@ export default async function drawFeats(
     return
   }
 
-  self.setLastDrawnOffsetPx(view.offsetPx)
-
-  const { chains, stats } = chainData
-  const coords: ChainCoord[] = []
-  for (let i = 0; i < chains.length; i++) {
-    const chain = chains[i]
-    // if we're looking at a paired read (flag 1) then assume it is just two
-    // reads (some small cases may defy this assumption such as secondary
-    // alignments but this may be uncommon)
-    if (chain[0].flags & 1 && chain.length > 1) {
-      const v0 = chain[0]
-      const v1 = chain[1]
-      const ra1 = asm.getCanonicalRefName(v0.refName) || v0.refName
-      const ra2 = asm.getCanonicalRefName(v1.refName) || v1.refName
-      const r1s = view.bpToPx({ refName: ra1, coord: v0.start })
-      const r1e = view.bpToPx({ refName: ra1, coord: v0.end })
-      const r2s = view.bpToPx({ refName: ra2, coord: v1.start })
-      const r2e = view.bpToPx({ refName: ra2, coord: v1.end })
-
-      let distance = 0
-
-      if (
-        r1s !== undefined &&
-        r1e !== undefined &&
-        r2s !== undefined &&
-        r2e !== undefined
-      ) {
-        if (v0.refName === v1.refName) {
-          const s = Math.min(v0.start, v1.start)
-          const e = Math.max(v0.end, v1.end)
-          distance = Math.abs(e - s)
-        }
-        coords.push({
-          r1s: r1s.offsetPx,
-          r1e: r1e.offsetPx,
-          r2s: r2s.offsetPx,
-          r2e: r2e.offsetPx,
-          v0,
-          v1,
-          distance,
-        })
-      }
-    } else {
-      // if we're not looking at pairs, then it could be a multiply-split-long
-      // read, so traverse chain
-      for (let i = 1; i < chain.length; i++) {
-        const v0 = chain[i - 1]
-        const v1 = chain[i]
-        const ra1 = asm.getCanonicalRefName(v0.refName) || v0.refName
-        const ra2 = asm.getCanonicalRefName(v1.refName) || v1.refName
-        const r1s = view.bpToPx({ refName: ra1, coord: v0.start })
-        const r1e = view.bpToPx({ refName: ra1, coord: v0.end })
-        const r2s = view.bpToPx({ refName: ra2, coord: v1.start })
-        const r2e = view.bpToPx({ refName: ra2, coord: v1.end })
-
-        let distance = 0
-
-        if (
-          r1s !== undefined &&
-          r1e !== undefined &&
-          r2s !== undefined &&
-          r2e !== undefined
-        ) {
-          if (v0.refName === v1.refName) {
-            const s = Math.min(v0.start, v1.start)
-            const e = Math.max(v0.end, v1.end)
-            distance = Math.abs(e - s)
-          }
-          coords.push({
-            r1s: r1s.offsetPx,
-            r1e: r1e.offsetPx,
-            r2s: r2s.offsetPx,
-            r2e: r2e.offsetPx,
-            v0,
-            v1,
-            distance,
-          })
-        }
-      }
-    }
-  }
-
-  let max = 0
-  for (let i = 0; i < coords.length; i++) {
-    const { distance } = coords[i]
-    max = Math.max(max, distance)
-  }
-  const halfHeight = featureHeight / 2 - 0.5
-  const scaler = (displayHeight - 20) / Math.log(max)
-
-  for (let i = 0; i < coords.length; i++) {
-    const { r1s, r1e, r2s, r2e, v0, v1, distance } = coords[i]
-    const type = self.colorBy?.type || 'insertSizeAndOrientation'
-
-    const top = Math.log(distance) * scaler
-    ctx.fillStyle = 'black'
-    const w = r2s - r1e
-    fillRectCtx(r1e - view.offsetPx, top + halfHeight, w, 1, ctx)
-
-    if (type === 'insertSizeAndOrientation') {
-      ctx.fillStyle = getInsertSizeAndOrientationColor(v0, v1, stats)
-    } else if (type === 'orientation') {
-      ctx.fillStyle = getOrientationColor(v0)
-    } else if (type === 'insertSize') {
-      ctx.fillStyle = getInsertSizeColor(v0, v1, stats) || 'grey'
-    } else if (type === 'gradient') {
-      const s = Math.min(v0.start, v1.start)
-      const e = Math.max(v0.end, v1.end)
-      ctx.fillStyle = `hsl(${Math.log10(Math.abs(e - s)) * 10},50%,50%)`
-    }
+  const hasPaired = hasPairedReads(chainData)
 
-    const w1 = Math.max(r1e - r1s, 2)
-    const w2 = Math.max(r2e - r2s, 2)
-    fillRectCtx(r1s - view.offsetPx, top, w1, featureHeight, ctx)
-    fillRectCtx(r2s - view.offsetPx, top, w2, featureHeight, ctx)
+  if (hasPaired) {
+    drawPairChains({ self, view, asm, ctx, chainData })
+  } else {
+    drawLongReadChains({ self, view, asm, ctx, chainData })
   }
 }

package/src/LinearReadCloudDisplay/drawLongReadChains.ts

@@ -0,0 +1,85 @@
+import { getConf } from '@jbrowse/core/configuration'
+import { max, min } from '@jbrowse/core/util'
+import { Assembly } from '@jbrowse/core/assemblyManager/assembly'
+import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+
+// locals
+import { ChainData } from '../shared/fetchChains'
+import { LinearReadCloudDisplayModel } from './model'
+import { fillColor, strokeColor } from '../shared/color'
+import { fillRectCtx, strokeRectCtx } from './util'
+
+export function drawLongReadChains({
+  ctx,
+  self,
+  chainData,
+  view,
+  asm,
+}: {
+  ctx: CanvasRenderingContext2D
+  self: LinearReadCloudDisplayModel
+  chainData: ChainData
+  view: LinearGenomeViewModel
+  asm: Assembly
+}) {
+  const distances: number[] = []
+  const minXs: number[] = []
+  const { chains } = chainData
+  const { height } = self
+  const featureHeight = getConf(self, 'featureHeight')
+
+  // get bounds on the 'distances' (pixel span that a particular split long
+  // read 'chain' would have in view)
+  for (const chain of chains) {
+    let minX = Number.MAX_VALUE
+    let maxX = Number.MIN_VALUE
+    for (const elt of chain) {
+      const refName = asm.getCanonicalRefName(elt.refName) || elt.refName
+      const rs = view.bpToPx({ refName, coord: elt.start })?.offsetPx
+      const re = view.bpToPx({ refName, coord: elt.end })?.offsetPx
+      if (rs !== undefined && re !== undefined) {
+        minX = Math.min(minX, rs)
+        maxX = Math.max(maxX, re)
+      }
+    }
+    const distance = Math.abs(maxX - minX)
+    distances.push(distance)
+    minXs.push(minX)
+  }
+
+  const maxD = Math.log(max(distances))
+  const minD = Math.max(Math.log(min(distances)) - 1, 0)
+  const scaler = (height - 20) / (maxD - minD)
+  const halfHeight = featureHeight / 2 - 0.5
+
+  // draw split long read 'chains' as connected entities
+  for (let i = 0; i < chains.length; i++) {
+    const chain = chains[i]
+    const w = distances[i]
+    const top = (Math.log(w) - minD) * scaler
+    const min = minXs[i]
+    fillRectCtx(min - view.offsetPx, top + halfHeight, w, 1, ctx, 'black')
+    const c1 = chain[0]
+    let primaryStrand: undefined | number
+    if (!(c1.flags & 2048)) {
+      primaryStrand = c1.strand
+    } else {
+      const res = c1.SA?.split(';')[0].split(',')[2]
+      primaryStrand = res === '-' ? -1 : 1
+    }
+    for (const v0 of chain) {
+      const ra = asm.getCanonicalRefName(v0.refName) || v0.refName
+      const rs = view.bpToPx({ refName: ra, coord: v0.start })?.offsetPx
+      const re = view.bpToPx({ refName: ra, coord: v0.end })?.offsetPx
+      if (rs !== undefined && re !== undefined) {
+        const w = Math.max(re - rs, 2)
+        const l = rs - view.offsetPx
+        const effectiveStrand = v0.strand * primaryStrand
+        const c =
+          effectiveStrand === -1 ? 'color_rev_strand' : 'color_fwd_strand'
+        strokeRectCtx(l, top, w, featureHeight, ctx, strokeColor[c])
+        fillRectCtx(l, top, w, featureHeight, ctx, fillColor[c])
+      }
+    }
+  }
+}

package/src/LinearReadCloudDisplay/drawPairChains.ts

@@ -0,0 +1,139 @@
+import { getConf } from '@jbrowse/core/configuration'
+import { max, min } from '@jbrowse/core/util'
+import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+import { Assembly } from '@jbrowse/core/assemblyManager/assembly'
+
+import { ChainData, ChainStats, ReducedFeature } from '../shared/fetchChains'
+import { LinearReadCloudDisplayModel } from './model'
+import { fillRectCtx, strokeRectCtx } from './util'
+import {
+  getPairedInsertSizeAndOrientationColor,
+  getPairedInsertSizeColor,
+  getPairedOrientationColor,
+} from '../shared/color'
+
+interface ChainCoord {
+  distance: number
+  r1s: number
+  r1e: number
+  r2s: number
+  r2e: number
+  v0: ReducedFeature
+  v1: ReducedFeature
+}
+
+export function drawPairChains({
+  ctx,
+  self,
+  chainData,
+  view,
+  asm,
+}: {
+  ctx: CanvasRenderingContext2D
+  self: LinearReadCloudDisplayModel
+  chainData: ChainData
+  view: LinearGenomeViewModel
+  asm: Assembly
+}) {
+  const coords: ChainCoord[] = []
+  const featureHeight = getConf(self, 'featureHeight')
+  const type = self.colorBy?.type || 'insertSizeAndOrientation'
+  const { chains, stats } = chainData
+
+  for (const chain of chains) {
+    // if we're looking at a paired read (flag 1) then assume it is just
+    // two reads (some small cases may defy this assumption such as
+    // secondary alignments but this may be uncommon)
+    if (chain.length > 1) {
+      const v0 = chain[0]
+      const v1 = chain[1]
+      const ra1 = asm.getCanonicalRefName(v0.refName) || v0.refName
+      const ra2 = asm.getCanonicalRefName(v1.refName) || v1.refName
+      const r1s = view.bpToPx({ refName: ra1, coord: v0.start })?.offsetPx
+      const r1e = view.bpToPx({ refName: ra1, coord: v0.end })?.offsetPx
+      const r2s = view.bpToPx({ refName: ra2, coord: v1.start })?.offsetPx
+      const r2e = view.bpToPx({ refName: ra2, coord: v1.end })?.offsetPx
+
+      let distance = 0
+
+      if (
+        r1s !== undefined &&
+        r1e !== undefined &&
+        r2s !== undefined &&
+        r2e !== undefined
+      ) {
+        if (v0.refName === v1.refName) {
+          const s = Math.min(v0.start, v1.start)
+          const e = Math.max(v0.end, v1.end)
+          distance = Math.abs(e - s)
+        }
+        coords.push({
+          r1s,
+          r1e,
+          r2s,
+          r2e,
+          v0,
+          v1,
+          distance,
+        })
+      }
+    } else if (self.drawSingletons) {
+      const v0 = chain[0]
+
+      const ra1 = asm.getCanonicalRefName(v0.refName) || v0.refName
+      const r1s = view.bpToPx({ refName: ra1, coord: v0.start })?.offsetPx
+      const r1e = view.bpToPx({ refName: ra1, coord: v0.end })?.offsetPx
+      if (r1s !== undefined && r1e !== undefined) {
+        const w1 = Math.max(r1e - r1s, 2)
+        fillRectCtx(r1s - view.offsetPx, 0, w1, featureHeight, ctx, '#f00')
+        strokeRectCtx(r1s - view.offsetPx, 0, w1, featureHeight, ctx, '#a00')
+      }
+    }
+  }
+
+  const maxD = Math.log(max(coords.map(c => c.distance)))
+  const minD = Math.max(Math.log(min(coords.map(c => c.distance))) - 1, 0)
+  const scaler = (self.height - 20) / (maxD - minD)
+  for (let i = 0; i < coords.length; i++) {
+    const { r1e, r1s, r2e, r2s, distance, v0, v1 } = coords[i]
+    const w1 = Math.max(r1e - r1s, 2)
+    const w2 = Math.max(r2e - r2s, 2)
+    const [fill, stroke] = getPairedColor({ type, v0, v1, stats }) || []
+    const top = (Math.log(distance) - minD) * scaler
+    const halfHeight = featureHeight / 2 - 0.5
+    const w = r2s - r1e
+    fillRectCtx(r1e - view.offsetPx, top + halfHeight, w, 1, ctx, 'black')
+    strokeRectCtx(r1s - view.offsetPx, top, w1, featureHeight, ctx, stroke)
+    strokeRectCtx(r2s - view.offsetPx, top, w2, featureHeight, ctx, stroke)
+    fillRectCtx(r1s - view.offsetPx, top, w1, featureHeight, ctx, fill)
+    fillRectCtx(r2s - view.offsetPx, top, w2, featureHeight, ctx, fill)
+  }
+}
+
+export function getPairedColor({
+  type,
+  v0,
+  v1,
+  stats,
+}: {
+  type: string
+  v0: ReducedFeature
+  v1: ReducedFeature
+  stats?: ChainStats
+}): readonly [string, string] | undefined {
+  if (type === 'insertSizeAndOrientation') {
+    return getPairedInsertSizeAndOrientationColor(v0, v1, stats)
+  } else if (type === 'orientation') {
+    return getPairedOrientationColor(v0)
+  } else if (type === 'insertSize') {
+    return getPairedInsertSizeColor(v0, v1, stats)
+  } else if (type === 'gradient') {
+    const s = Math.min(v0.start, v1.start)
+    const e = Math.max(v0.end, v1.end)
+    return [
+      `hsl(${Math.log10(Math.abs(e - s)) * 10},50%,50%)`,
+      `hsl(${Math.log10(Math.abs(e - s)) * 10},50%,30%)`,
+    ] as const
+  }
+  return undefined
+}