@jbrowse/plugin-alignments 2.4.2 → 2.6.0

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

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,59 +1,16 @@
-import { 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
-  },
+export function drawFeats(
+  self: LinearReadCloudDisplayModel,
   ctx: CanvasRenderingContext2D,
 ) {
   const { chainData } = self
@@ -61,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)
@@ -70,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)
-      const ra2 = asm.getCanonicalRefName(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)
-        const ra2 = asm.getCanonicalRefName(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 })
   }
 }