@jbrowse/plugin-alignments 2.4.2 → 2.6.0

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
+}

package/src/LinearReadCloudDisplay/model.tsx

@@ -1,13 +1,15 @@
 import React, { lazy } from 'react'
-import { autorun } from 'mobx'
-import { addDisposer, cast, types, Instance } from 'mobx-state-tree'
+import { cast, types, Instance } from 'mobx-state-tree'
+import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes'
 import {
   AnyConfigurationSchemaType,
   ConfigurationReference,
-  ConfigurationSchema,
 } from '@jbrowse/core/configuration'
-import { getContainingView, getSession } from '@jbrowse/core/util'
-import { BaseLinearDisplay } from '@jbrowse/plugin-linear-genome-view'
+import { getSession } from '@jbrowse/core/util'
+import {
+  FeatureDensityMixin,
+  TrackHeightMixin,
+} from '@jbrowse/plugin-linear-genome-view'
 
 // icons
 import PaletteIcon from '@mui/icons-material/Palette'
@@ -15,9 +17,7 @@ import FilterListIcon from '@mui/icons-material/ClearAll'
 
 // locals
 import { FilterModel } from '../shared'
-import { fetchChains, ChainData } from '../shared/fetchChains'
-import drawFeats from './drawFeats'
-import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+import { ChainData } from '../shared/fetchChains'
 
 // async
 const FilterByTagDlg = lazy(() => import('../shared/FilterByTag'))
@@ -29,21 +29,17 @@ interface Filter {
   tagFilter?: { tag: string; value: string }
 }
 
-// stabilize clipid under test for snapshot
-function getId(id: string) {
-  const isJest = typeof jest === 'undefined'
-  return `cloud-clip-${isJest ? id : 'jest'}`
-}
-
 /**
  * #stateModel LinearReadCloudDisplay
- * extends `BaseLinearDisplay`
+ * extends `BaseDisplay`, it is not a block based track, hence not BaseLinearDisplay
  */
 function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
   return types
     .compose(
       'LinearReadCloudDisplay',
-      BaseLinearDisplay,
+      BaseDisplay,
+      TrackHeightMixin(),
+      FeatureDensityMixin(),
       types.model({
         /**
          * #property
@@ -69,39 +65,38 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
             extra: types.frozen(),
           }),
         ),
+
+        /**
+         * #property
+         */
+        drawSingletons: true,
       }),
     )
     .volatile(() => ({
       loading: false,
-      drawn: false,
       chainData: undefined as ChainData | undefined,
+      lastDrawnOffsetPx: undefined as number | undefined,
+      lastDrawnBpPerPx: 0,
       ref: null as HTMLCanvasElement | null,
-      lastDrawnOffsetPx: 0,
     }))
     .actions(self => ({
       /**
        * #action
-       * internal, a reference to a HTMLCanvas because we use a autorun to draw the canvas
        */
-      reload() {
-        self.error = undefined
+      setDrawSingletons(f: boolean) {
+        self.drawSingletons = f
       },
       /**
        * #action
        */
-      setRef(ref: HTMLCanvasElement | null) {
-        self.ref = ref
-      },
-
-      setColorScheme(s: { type: string }) {
-        self.colorBy = cast(s)
+      setLastDrawnOffsetPx(n: number) {
+        self.lastDrawnOffsetPx = n
       },
-
       /**
        * #action
        */
-      setChainData(args: ChainData) {
-        self.chainData = args
+      setLastDrawnBpPerPx(n: number) {
+        self.lastDrawnBpPerPx = n
       },
 
       /**
@@ -110,29 +105,44 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
       setLoading(f: boolean) {
         self.loading = f
       },
-
       /**
        * #action
        */
-      setDrawn(f: boolean) {
-        self.drawn = f
+      reload() {
+        self.error = undefined
+      },
+      /**
+       * #action
+       * internal, a reference to a HTMLCanvas because we use a autorun to draw
+       * the canvas
+       */
+      setRef(ref: HTMLCanvasElement | null) {
+        self.ref = ref
+      },
+
+      setColorScheme(s: { type: string }) {
+        self.colorBy = cast(s)
       },
 
       /**
        * #action
        */
-      setFilterBy(filter: Filter) {
-        self.filterBy = cast(filter)
+      setChainData(args: ChainData) {
+        self.chainData = args
       },
 
       /**
        * #action
        */
-      setLastDrawnOffsetPx(n: number) {
-        self.lastDrawnOffsetPx = n
+      setFilterBy(filter: Filter) {
+        self.filterBy = cast(filter)
+      },
+    }))
+    .views(self => ({
+      get drawn() {
+        return self.lastDrawnOffsetPx !== undefined
       },
     }))
-
     .views(self => {
       const {
         trackMenuItems: superTrackMenuItems,
@@ -140,25 +150,12 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
       } = self
 
       return {
-        /**
-         * #getter
-         */
-        get ready() {
-          return !!self.chainData
-        },
-        // we don't use a server side renderer, but we need to provide this
-        // to avoid confusing the system currently
-        get rendererTypeName() {
-          return 'PileupRenderer'
-        },
         // we don't use a server side renderer, so this fills in minimal
         // info so as not to crash
         renderProps() {
           return {
             ...superRenderProps(),
-            // never ready, we don't want to use server side render
-            notReady: true,
-            config: ConfigurationSchema('empty', {}).create(),
+            notReady: !self.chainData,
           }
         },
 
@@ -168,6 +165,12 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
         trackMenuItems() {
           return [
             ...superTrackMenuItems(),
+            {
+              label: 'Draw singletons',
+              type: 'checkbox',
+              checked: self.drawSingletons,
+              onClick: () => self.setDrawSingletons(!self.drawSingletons),
+            },
             {
               label: 'Filter by',
               icon: FilterListIcon,
@@ -208,90 +211,28 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
         /**
          * #method
          */
-        async renderSvg(opts: { rasterizeLayers?: boolean }) {
-          const view = getContainingView(self) as LinearGenomeViewModel
-          const width = view.dynamicBlocks.totalWidthPx
-          const height = self.height
-          let str
-          if (opts.rasterizeLayers) {
-            const canvas = document.createElement('canvas')
-            canvas.width = width * 2
-            canvas.height = height * 2
-            const ctx = canvas.getContext('2d')
-            if (!ctx) {
-              return
-            }
-            ctx.scale(2, 2)
-            await drawFeats(self, ctx)
-            str = (
-              <image
-                width={width}
-                height={height}
-                xlinkHref={canvas.toDataURL('image/png')}
-              />
-            )
-          } else {
-            // @ts-ignore
-            const C2S = await import('canvas2svg')
-            const ctx = new C2S.default(width, height)
-            await drawFeats(self, ctx)
-            const clipid = getId(self.id)
-            str = (
-              <>
-                <defs>
-                  <clipPath id={clipid}>
-                    <rect x={0} y={0} width={width} height={height} />
-                  </clipPath>
-                </defs>
-                <g
-                  /* eslint-disable-next-line react/no-danger */
-                  dangerouslySetInnerHTML={{
-                    __html: ctx.getSvg().innerHTML,
-                  }}
-                  clipPath={`url(#${clipid})`}
-                />
-              </>
-            )
-          }
-
-          return <g>{str}</g>
+        async renderSvg(opts: {
+          rasterizeLayers?: boolean
+        }): Promise<React.ReactNode> {
+          const { renderSvg } = await import('../shared/renderSvg')
+          const { drawFeats } = await import('./drawFeats')
+          return renderSvg(self as LinearReadCloudDisplayModel, opts, drawFeats)
         },
       }
     })
     .actions(self => ({
       afterAttach() {
-        addDisposer(
-          self,
-          autorun(() => fetchChains(self), { delay: 1000 }),
-        )
-
-        addDisposer(
-          self,
-          autorun(
-            async () => {
-              try {
-                const canvas = self.ref
-                if (!canvas) {
-                  return
-                }
-                const ctx = canvas.getContext('2d')
-                if (!ctx) {
-                  return
-                }
-                ctx.clearRect(0, 0, canvas.width, self.height * 2)
-                ctx.resetTransform()
-                ctx.scale(2, 2)
-
-                await drawFeats(self, ctx)
-                self.setDrawn(true)
-              } catch (e) {
-                console.error(e)
-                self.setError(e)
-              }
-            },
-            { delay: 1000 },
-          ),
-        )
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        ;(async () => {
+          try {
+            const { doAfterAttach } = await import('../shared/afterAttach')
+            const { drawFeats } = await import('./drawFeats')
+            doAfterAttach(self, drawFeats)
+          } catch (e) {
+            console.error(e)
+            self.setError(e)
+          }
+        })()
       },
     }))
 }

package/src/LinearReadCloudDisplay/util.ts

@@ -0,0 +1,47 @@
+// avoid drawing negative width features for SVG exports
+export function fillRectCtx(
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  ctx: CanvasRenderingContext2D,
+  fillColor?: string,
+) {
+  if (width < 0) {
+    x += width
+    width = -width
+  }
+  if (height < 0) {
+    y += height
+    height = -height
+  }
+
+  if (fillColor) {
+    ctx.fillStyle = fillColor
+  }
+
+  ctx.fillRect(x, y, width, height)
+}
+
+export function strokeRectCtx(
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  ctx: CanvasRenderingContext2D,
+  strokeColor?: string,
+) {
+  if (width < 0) {
+    x += width
+    width = -width
+  }
+  if (height < 0) {
+    y += height
+    height = -height
+  }
+
+  if (strokeColor) {
+    ctx.strokeStyle = strokeColor
+  }
+  ctx.strokeRect(x, y, width, height)
+}