@jbrowse/plugin-alignments 2.5.0 → 2.6.0

package/src/LinearReadArcsDisplay/drawFeats.ts

@@ -1,24 +1,16 @@
 import { getContainingView, getSession } from '@jbrowse/core/util'
 import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+import { Assembly } from '@jbrowse/core/assemblyManager/assembly'
 
 // locals
 import {
-  getOrientationColor,
-  getInsertSizeColor,
-  getInsertSizeAndOrientationColor,
+  getPairedOrientationColor,
+  getPairedInsertSizeColor,
+  getPairedInsertSizeAndOrientationColor,
 } from '../shared/color'
-import { ChainData } from '../shared/fetchChains'
 import { featurizeSA } from '../MismatchParser'
-import { Assembly } from '@jbrowse/core/assemblyManager/assembly'
-
-export function hasPairedReads(features: ChainData) {
-  for (const f of features.chains.values()) {
-    if (f[0].flags & 1) {
-      return true
-    }
-  }
-  return false
-}
+import { LinearReadArcsDisplayModel } from './model'
+import { hasPairedReads } from '../shared/util'
 
 type LGV = LinearGenomeViewModel
 
@@ -33,23 +25,28 @@ interface CoreFeat {
   end: number
 }
 
-export default async function drawFeats(
-  self: {
-    setLastDrawnOffsetPx: (n: number) => void
-    drawInter?: boolean
-    drawLongRange?: boolean
-    setError: (e: unknown) => void
-    colorBy?: { type: string }
-    height: number
-    chainData?: ChainData
-    lineWidthSetting: number
-    jitterVal: number
-  },
+function drawLineAtOffset(
   ctx: CanvasRenderingContext2D,
+  offset: number,
+  height: number,
+  color: string,
+) {
+  // draws a vertical line off to middle of nowhere if the second end not found
+  ctx.strokeStyle = color
+  ctx.beginPath()
+  ctx.moveTo(offset, 0)
+  ctx.lineTo(offset, height)
+  ctx.stroke()
+}
+
+export function drawFeats(
+  self: LinearReadArcsDisplayModel,
+  ctx: CanvasRenderingContext2D,
+  width: number,
+  height: number,
 ) {
   const {
     chainData,
-    height,
     colorBy,
     drawInter,
     drawLongRange,
@@ -61,25 +58,14 @@ export default async function drawFeats(
   }
   const view = getContainingView(self) as LGV
   const { assemblyManager } = getSession(self)
-  self.setLastDrawnOffsetPx(view.offsetPx)
-  ctx.lineWidth = lineWidthSetting
   const { chains, stats } = chainData
   const hasPaired = hasPairedReads(chainData)
-  const assemblyName = view.assemblyNames[0]
-  const asm = assemblyManager.get(assemblyName)
+  const asm = assemblyManager.get(view.assemblyNames[0])
   const type = colorBy?.type || 'insertSizeAndOrientation'
   if (!asm) {
     return
   }
-
-  function drawLineAtOffset(p: number, c: string) {
-    // draws a vertical line off to middle of nowhere if the second end not found
-    ctx.strokeStyle = c
-    ctx.beginPath()
-    ctx.moveTo(p, 0)
-    ctx.lineTo(p, height)
-    ctx.stroke()
-  }
+  ctx.lineWidth = lineWidthSetting
 
   function draw(
     k1: CoreFeat & { tlen?: number; pair_orientation?: string },
@@ -96,19 +82,20 @@ export default async function drawFeats(
     const p2 = hasPaired ? (f2 ? k2.start : k2.end) : f2 ? k2.end : k2.start
     const ra1 = assembly.getCanonicalRefName(k1.refName) || k1.refName
     const ra2 = assembly.getCanonicalRefName(k2.refName) || k2.refName
-    const r1 = view.bpToPx({ refName: ra1, coord: p1 })
-    const r2 = view.bpToPx({ refName: ra2, coord: p2 })
+    const r1 = view.bpToPx({ refName: ra1, coord: p1 })?.offsetPx
+    const r2 = view.bpToPx({ refName: ra2, coord: p2 })?.offsetPx
 
-    if (r1 && r2) {
-      const radius = (r2.offsetPx - r1.offsetPx) / 2
+    if (r1 !== undefined && r2 !== undefined) {
+      const radius = (r2 - r1) / 2
       const absrad = Math.abs(radius)
-      const p = r1.offsetPx - view.offsetPx
-      const p2 = r2.offsetPx - view.offsetPx
+      const p = r1 - view.offsetPx
+      const p2 = r2 - view.offsetPx
+      const drawArcInsteadOfBezier = absrad > 10_000
 
       // bezier (used for non-long-range arcs) requires moveTo before beginPath
       // arc (used for long-range) requires moveTo after beginPath (or else a
       // unwanted line at y=0 is rendered along with the arc)
-      if (longRange) {
+      if (longRange && drawArcInsteadOfBezier) {
         ctx.moveTo(p, 0)
         ctx.beginPath()
       } else {
@@ -116,16 +103,21 @@ export default async function drawFeats(
         ctx.moveTo(p, 0)
       }
 
-      if (longRange) {
+      if (longRange && drawArcInsteadOfBezier) {
         ctx.strokeStyle = 'red'
       } else {
         if (hasPaired) {
           if (type === 'insertSizeAndOrientation') {
-            ctx.strokeStyle = getInsertSizeAndOrientationColor(k1, k2, stats)
+            ctx.strokeStyle = getPairedInsertSizeAndOrientationColor(
+              k1,
+              k2,
+              stats,
+            )[0]
           } else if (type === 'orientation') {
-            ctx.strokeStyle = getOrientationColor(k1)
+            ctx.strokeStyle = getPairedOrientationColor(k1)[0]
           } else if (type === 'insertSize') {
-            ctx.strokeStyle = getInsertSizeColor(k1, k2, stats) || 'grey'
+            ctx.strokeStyle =
+              getPairedInsertSizeColor(k1, k2, stats)?.[0] || 'grey'
           } else if (type === 'gradient') {
             ctx.strokeStyle = `hsl(${Math.log10(absrad) * 10},50%,50%)`
           }
@@ -150,11 +142,21 @@ export default async function drawFeats(
         // avoid drawing gigantic circles that glitch out the rendering,
         // instead draw vertical lines
         if (absrad > 100_000) {
-          drawLineAtOffset(p + jitter(jitterVal), 'red')
-          drawLineAtOffset(p2 + jitter(jitterVal), 'red')
-        } else {
+          drawLineAtOffset(ctx, p + jitter(jitterVal), height, 'red')
+          drawLineAtOffset(ctx, p2 + jitter(jitterVal), height, 'red')
+        } else if (drawArcInsteadOfBezier) {
           ctx.arc(p + radius + jitter(jitterVal), 0, absrad, 0, Math.PI)
           ctx.stroke()
+        } else {
+          ctx.bezierCurveTo(
+            p + jitter(jitterVal),
+            destY,
+            destX,
+            destY,
+            destX + jitter(jitterVal),
+            0,
+          )
+          ctx.stroke()
         }
       } else {
         ctx.bezierCurveTo(
@@ -168,34 +170,26 @@ export default async function drawFeats(
         ctx.stroke()
       }
     } else if (r1 && drawInter) {
-      drawLineAtOffset(r1.offsetPx - view.offsetPx, 'purple')
+      drawLineAtOffset(ctx, r1 - view.offsetPx, height, 'purple')
     }
   }
 
-  for (let i = 0; i < chains.length; i++) {
-    let chain = chains[i]
+  for (const chain of chains) {
+    // chain.length === 1, singleton (other pairs/mates not in view)
     if (chain.length === 1 && drawLongRange) {
-      // singleton feature
       const f = chain[0]
-
-      // special case where we look at RPOS/RNEXT
-      if (hasPaired) {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        const refName = f.next_ref!
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        const coord = f.next_pos!
-        draw(
-          f,
-          { refName, start: coord, end: coord, strand: f.strand },
-          asm,
-          true,
+      if (hasPaired && !(f.flags & 8)) {
+        const mate = {
+          refName: f.next_ref || '',
+          start: f.next_pos || 0,
+          end: f.next_pos || 0,
+          strand: f.strand,
+        }
+        draw(f, mate, asm, true)
+      } else {
+        const features = [f, ...featurizeSA(f.SA, f.id, f.strand, f.name)].sort(
+          (a, b) => a.clipPos - b.clipPos,
         )
-      }
-
-      // special case where we look at SA
-      else {
-        const suppAlns = featurizeSA(f.SA, f.id, f.strand, f.name)
-        const features = [f, ...suppAlns].sort((a, b) => a.clipPos - b.clipPos)
         for (let i = 0; i < features.length - 1; i++) {
           const f = features[i]
           const v1 = features[i + 1]
@@ -203,15 +197,13 @@ export default async function drawFeats(
         }
       }
     } else {
-      if (!hasPaired) {
-        chain.sort((a, b) => a.clipPos - b.clipPos)
-        chain = chain.filter(f => !(f.flags & 256))
-      } else {
-        // ignore split/supplementary reads for hasPaired=true for now
-        chain = chain.filter(f => !(f.flags & 2048))
-      }
-      for (let i = 0; i < chain.length - 1; i++) {
-        draw(chain[i], chain[i + 1], asm, false)
+      const res = hasPaired
+        ? chain.filter(f => !(f.flags & 2048) && !(f.flags & 8))
+        : chain
+            .sort((a, b) => a.clipPos - b.clipPos)
+            .filter(f => !(f.flags & 256))
+      for (let i = 0; i < res.length - 1; i++) {
+        draw(res[i], res[i + 1], asm, false)
       }
     }
   }

package/src/LinearReadArcsDisplay/model.tsx

@@ -1,17 +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 {
   AnyConfigurationSchemaType,
   ConfigurationReference,
-  ConfigurationSchema,
   getConf,
 } from '@jbrowse/core/configuration'
-import { getSession, getContainingView } from '@jbrowse/core/util'
-
+import { getSession } from '@jbrowse/core/util'
+import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes'
 import {
-  BaseLinearDisplay,
-  LinearGenomeViewModel,
+  FeatureDensityMixin,
+  TrackHeightMixin,
 } from '@jbrowse/plugin-linear-genome-view'
 
 // icons
@@ -20,18 +18,11 @@ import FilterListIcon from '@mui/icons-material/ClearAll'
 
 // locals
 import { FilterModel } from '../shared'
-import drawFeats from './drawFeats'
-import { fetchChains, ChainData } from '../shared/fetchChains'
+import { ChainData } from '../shared/fetchChains'
 
 // async
 const FilterByTagDlg = lazy(() => import('../shared/FilterByTag'))
 
-// stabilize clipid under test for snapshot
-function getId(id: string) {
-  const isJest = typeof jest === 'undefined'
-  return `arc-clip-${isJest ? id : 'jest'}`
-}
-
 interface Filter {
   flagInclude: number
   flagExclude: number
@@ -39,17 +30,18 @@ interface Filter {
   tagFilter?: { tag: string; value: string }
 }
 
-type LGV = LinearGenomeViewModel
-
 /**
  * #stateModel LinearReadArcsDisplay
- * extends `BaseLinearDisplay`
+ * extends `BaseDisplay`, it is not a block based track, hence not
+ * BaseLinearDisplay
  */
 function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
   return types
     .compose(
       'LinearReadArcsDisplay',
-      BaseLinearDisplay,
+      BaseDisplay,
+      TrackHeightMixin(),
+      FeatureDensityMixin(),
       types.model({
         /**
          * #property
@@ -99,22 +91,41 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
     )
     .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
+       */
+      setLastDrawnOffsetPx(n: number) {
+        self.lastDrawnOffsetPx = n
+      },
+      /**
+       * #action
+       */
+      setLastDrawnBpPerPx(n: number) {
+        self.lastDrawnBpPerPx = n
+      },
+      /**
+       * #action
+       */
+      setLoading(f: boolean) {
+        self.loading = f
+      },
+
+      /**
+       * #action
        */
       reload() {
         self.error = undefined
       },
       /**
        * #action
-       * internal, a reference to a HTMLCanvas because we use a autorun to draw the canvas
+       * internal, a reference to a HTMLCanvas because we use a autorun to draw
+       * the canvas
        */
       setRef(ref: HTMLCanvasElement | null) {
         self.ref = ref
@@ -151,90 +162,63 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
       /**
        * #action
        */
-      setLoading(f: boolean) {
-        self.loading = f
+      setFilterBy(filter: Filter) {
+        self.filterBy = cast(filter)
       },
 
       /**
        * #action
-       * used during tests to detect when we can complete a snapshot test
+       * thin, bold, extrabold, etc
        */
-      setDrawn(f: boolean) {
-        self.drawn = f
+      setLineWidth(n: number) {
+        self.lineWidth = n
       },
 
       /**
        * #action
+       * jitter val, helpful to jitter the x direction so you see better
+       * evidence when e.g. 100 long reads map to same x position
        */
-      setFilterBy(filter: Filter) {
-        self.filterBy = cast(filter)
+      setJitter(n: number) {
+        self.jitter = n
       },
+    }))
 
+    .views(self => ({
       /**
-       * #action
-       * allows the drawing to slide around a little bit if it takes a long time to refresh
+       * #getter
        */
-      setLastDrawnOffsetPx(n: number) {
-        self.lastDrawnOffsetPx = n
+      get drawn() {
+        return self.lastDrawnOffsetPx !== undefined
       },
-
       /**
-       * #action
-       * thin, bold, extrabold, etc
+       * #getter
        */
-      setLineWidth(n: number) {
-        self.lineWidth = n
+      get lineWidthSetting() {
+        return self.lineWidth ?? getConf(self, 'lineWidth')
       },
 
       /**
-       * #action
-       * jitter val, helpful to jitter the x direction so you see better evidence when e.g. 100
-       * long reads map to same x position
+       * #getter
        */
-      setJitter(n: number) {
-        self.jitter = n
+      get jitterVal(): number {
+        return self.jitter ?? getConf(self, 'jitter')
       },
     }))
-
     .views(self => {
       const {
         trackMenuItems: superTrackMenuItems,
         renderProps: superRenderProps,
       } = self
-
       return {
         /**
-         * #getter
-         */
-        get lineWidthSetting() {
-          return self.lineWidth ?? getConf(self, 'lineWidth')
-        },
-
-        /**
-         * #getter
-         */
-        get jitterVal(): number {
-          return self.jitter ?? getConf(self, 'jitter')
-        },
-        /**
-         * #getter
+         * #method
+         * only used to tell system it's ready for export
          */
-        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,
           }
         },
 
@@ -276,25 +260,24 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
               subMenu: [
                 {
                   type: 'checkbox',
-                  checked: this.jitterVal === 0,
+                  checked: self.jitterVal === 0,
                   label: 'None',
                   onClick: () => self.setJitter(0),
                 },
                 {
                   type: 'checkbox',
-                  checked: this.jitterVal === 2,
+                  checked: self.jitterVal === 2,
                   label: 'Small',
                   onClick: () => self.setJitter(2),
                 },
                 {
                   type: 'checkbox',
-                  checked: this.jitterVal === 10,
+                  checked: self.jitterVal === 10,
                   label: 'Large',
                   onClick: () => self.setJitter(10),
                 },
               ],
             },
-
             {
               label: 'Draw inter-region vertical lines',
               type: 'checkbox',
@@ -338,88 +321,27 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
       /**
        * #method
        */
-      async renderSvg(opts: { rasterizeLayers?: boolean }) {
-        const view = getContainingView(self) as LGV
-        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 <>{str}</>
+      async renderSvg(opts: {
+        rasterizeLayers?: boolean
+      }): Promise<React.ReactNode> {
+        const { renderSvg } = await import('../shared/renderSvg')
+        const { drawFeats } = await import('./drawFeats')
+        return renderSvg(self as LinearReadArcsDisplayModel, 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/LinearReadArcsDisplay/util.ts

@@ -0,0 +1,10 @@
+import { ChainData } from '../shared/fetchChains'
+
+export function hasPairedReads(features: ChainData) {
+  for (const f of features.chains.values()) {
+    if (f[0].flags & 1) {
+      return true
+    }
+  }
+  return false
+}