@jbrowse/plugin-alignments 2.2.1 → 2.3.0

package/src/LinearReadArcsDisplay/drawFeats.ts

@@ -0,0 +1,199 @@
+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 } from '../shared/fetchChains'
+import { featurizeSA } from '../MismatchParser'
+
+export function hasPairedReads(features: ChainData) {
+  for (const f of features.chains.values()) {
+    if (f[0].flags & 1) {
+      return true
+    }
+  }
+  return false
+}
+
+type LGV = LinearGenomeViewModel
+
+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
+  },
+  ctx: CanvasRenderingContext2D,
+) {
+  const { chainData } = self
+  if (!chainData) {
+    return
+  }
+  const displayHeight = self.height
+  const view = getContainingView(self) as LGV
+  const { assemblyManager } = getSession(self)
+  self.setLastDrawnOffsetPx(view.offsetPx)
+  ctx.lineWidth = self.lineWidthSetting
+  const { chains, stats } = chainData
+  const hasPaired = hasPairedReads(chainData)
+  const assemblyName = view.assemblyNames[0]
+  const asm = assemblyManager.get(assemblyName)
+  const type = self.colorBy?.type || 'insertSizeAndOrientation'
+
+  function draw(
+    k1: {
+      strand: number
+      refName: string
+      start: number
+      end: number
+      tlen?: number
+      pair_orientation?: string
+    },
+    k2: { strand: number; refName: string; start: number; end: number },
+    longRange?: boolean,
+  ) {
+    const s1 = k1.strand
+    const s2 = k2.strand
+    const f1 = s1 === -1
+    const f2 = s2 === -1
+
+    const p1 = f1 ? k1.start : k1.end
+    const p2 = hasPaired ? (f2 ? k2.start : k2.end) : f2 ? k2.end : k2.start
+
+    const r1 = view.bpToPx({ refName: k1.refName, coord: p1 })
+    const r2 = view.bpToPx({ refName: k2.refName, coord: p2 })
+
+    if (r1 && r2) {
+      const radius = (r2.offsetPx - r1.offsetPx) / 2
+      const absrad = Math.abs(radius)
+      const p = r1.offsetPx - view.offsetPx
+
+      // 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) {
+        ctx.moveTo(p, 0)
+        ctx.beginPath()
+      } else {
+        ctx.beginPath()
+        ctx.moveTo(p, 0)
+      }
+
+      if (longRange) {
+        ctx.strokeStyle = 'red'
+      } else {
+        if (hasPaired) {
+          if (type === 'insertSizeAndOrientation') {
+            ctx.strokeStyle = getInsertSizeAndOrientationColor(k1, k2, stats)
+          } else if (type === 'orientation') {
+            ctx.strokeStyle = getOrientationColor(k1)
+          } else if (type === 'insertSize') {
+            ctx.strokeStyle = getInsertSizeColor(k1, k2, stats) || 'grey'
+          } else if (type === 'gradient') {
+            ctx.strokeStyle = `hsl(${
+              Math.log10(Math.abs(p1 - p2)) * 10
+            },50%,50%)`
+          }
+        } else {
+          if (type === 'orientation' || type === 'insertSizeAndOrientation') {
+            if (s1 === -1 && s2 === 1) {
+              ctx.strokeStyle = 'navy'
+            } else if (s1 === 1 && s2 === -1) {
+              ctx.strokeStyle = 'green'
+            } else {
+              ctx.strokeStyle = 'grey'
+            }
+          } else if (type === 'gradient') {
+            ctx.strokeStyle = `hsl(${
+              Math.log10(Math.abs(p1 - p2)) * 10
+            },50%,50%)`
+          }
+        }
+      }
+
+      const destX = p + radius * 2
+      const destY = Math.min(displayHeight, absrad)
+      if (longRange) {
+        ctx.arc(p + radius, 0, absrad, 0, Math.PI)
+      } else {
+        ctx.bezierCurveTo(p, destY, destX, destY, destX, 0)
+      }
+      ctx.stroke()
+    } else if (r1 && self.drawInter) {
+      // draws a vertical line off to middle of nowhere if the second end not found
+      const p = r1.offsetPx - view.offsetPx
+      ctx.strokeStyle = 'purple'
+      ctx.beginPath()
+      ctx.moveTo(p, 0)
+      ctx.lineTo(p, displayHeight)
+      ctx.stroke()
+    }
+  }
+
+  for (let i = 0; i < chains.length; i++) {
+    let chain = chains[i]
+
+    if (chain.length === 1 && self.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 = asm?.getCanonicalRefName(f.next_ref!) || 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,
+          },
+          true,
+        )
+      }
+
+      // 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]
+          draw(
+            f,
+            {
+              refName: asm?.getCanonicalRefName(v1.refName) || v1.refName,
+              start: v1.start,
+              end: v1.end,
+              strand: v1.strand,
+            },
+            true,
+          )
+        }
+      }
+    } 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], false)
+      }
+    }
+  }
+}

package/src/LinearReadArcsDisplay/index.ts

@@ -0,0 +1,23 @@
+import PluginManager from '@jbrowse/core/PluginManager'
+import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType'
+
+// locals
+import ReactComponent from './components/ReactComponent'
+import configSchemaF from './configSchema'
+import stateModelF from './model'
+
+export default function register(pluginManager: PluginManager) {
+  pluginManager.addDisplayType(() => {
+    const configSchema = configSchemaF(pluginManager)
+    return new DisplayType({
+      name: 'LinearReadArcsDisplay',
+      displayName: 'Arc display',
+      configSchema,
+      stateModel: stateModelF(configSchema),
+      trackType: 'AlignmentsTrack',
+      viewType: 'LinearGenomeView',
+      subDisplay: { type: 'LinearAlignmentsDisplay', lowerPanel: true },
+      ReactComponent,
+    })
+  })
+}

package/src/LinearReadArcsDisplay/model.tsx

@@ -0,0 +1,370 @@
+import React, { lazy } from 'react'
+import { autorun } from 'mobx'
+import { addDisposer, cast, types, Instance } from 'mobx-state-tree'
+import {
+  AnyConfigurationSchemaType,
+  ConfigurationReference,
+  ConfigurationSchema,
+  getConf,
+} from '@jbrowse/core/configuration'
+import { getSession, getContainingView } from '@jbrowse/core/util'
+
+import {
+  BaseLinearDisplay,
+  LinearGenomeViewModel,
+} from '@jbrowse/plugin-linear-genome-view'
+
+// icons
+import PaletteIcon from '@mui/icons-material/Palette'
+import FilterListIcon from '@mui/icons-material/ClearAll'
+
+// locals
+import { FilterModel } from '../shared'
+import drawFeats from './drawFeats'
+import { fetchChains, ChainData } from '../shared/fetchChains'
+import { ExportSvgOptions } from '@jbrowse/plugin-linear-genome-view/src/LinearGenomeView'
+
+// async
+const FilterByTagDlg = lazy(() => import('../shared/FilterByTag'))
+
+interface Filter {
+  flagInclude: number
+  flagExclude: number
+  readName?: string
+  tagFilter?: { tag: string; value: string }
+}
+
+type LGV = LinearGenomeViewModel
+
+/**
+ * #stateModel LinearReadArcsDisplay
+ * extends `BaseLinearDisplay`
+ */
+function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
+  return types
+    .compose(
+      'LinearReadArcsDisplay',
+      BaseLinearDisplay,
+      types.model({
+        /**
+         * #property
+         */
+        type: types.literal('LinearReadArcsDisplay'),
+        /**
+         * #property
+         */
+        configuration: ConfigurationReference(configSchema),
+
+        /**
+         * #property
+         */
+        filterBy: types.optional(FilterModel, {}),
+
+        /**
+         * #property
+         */
+        lineWidth: types.maybe(types.number),
+
+        /**
+         * #property
+         */
+        colorBy: types.maybe(
+          types.model({
+            type: types.string,
+            tag: types.maybe(types.string),
+            extra: types.frozen(),
+          }),
+        ),
+
+        /**
+         * #property
+         */
+        drawInter: true,
+
+        /**
+         * #property
+         */
+        drawLongRange: true,
+      }),
+    )
+    .volatile(() => ({
+      loading: false,
+      drawn: false,
+      chainData: undefined as ChainData | undefined,
+      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
+      },
+      /**
+       * #action
+       * internal, a reference to a HTMLCanvas because we use a autorun to draw the canvas
+       */
+      setRef(ref: HTMLCanvasElement | null) {
+        self.ref = ref
+      },
+
+      /**
+       * #action
+       */
+      setColorScheme(s: { type: string }) {
+        self.colorBy = cast(s)
+      },
+
+      /**
+       * #action
+       */
+      setChainData(args: ChainData) {
+        self.chainData = args
+      },
+
+      /**
+       * #action
+       */
+      setDrawInter(f: boolean) {
+        self.drawInter = f
+      },
+
+      /**
+       * #action
+       */
+      setDrawLongRange(f: boolean) {
+        self.drawLongRange = f
+      },
+
+      /**
+       * #action
+       */
+      setLoading(f: boolean) {
+        self.loading = f
+      },
+
+      /**
+       * #action
+       * used during tests to detect when we can complete a snapshot test
+       */
+      setDrawn(f: boolean) {
+        self.drawn = f
+      },
+
+      /**
+       * #action
+       */
+      setFilterBy(filter: Filter) {
+        self.filterBy = cast(filter)
+      },
+
+      /**
+       * #action
+       * allows the drawing to slide around a little bit if it takes a long time to refresh
+       */
+      setLastDrawnOffsetPx(n: number) {
+        self.lastDrawnOffsetPx = n
+      },
+
+      /**
+       * #action
+       * thin, bold, extrabold, etc
+       */
+      setLineWidth(n: number) {
+        self.lineWidth = n
+      },
+    }))
+
+    .views(self => {
+      const {
+        trackMenuItems: superTrackMenuItems,
+        renderProps: superRenderProps,
+      } = self
+
+      return {
+        /**
+         * #getter
+         */
+        get lineWidthSetting() {
+          return self.lineWidth ?? getConf(self, 'lineWidth')
+        },
+        /**
+         * #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(),
+          }
+        },
+
+        /**
+         * #method
+         */
+        trackMenuItems() {
+          return [
+            ...superTrackMenuItems(),
+            {
+              label: 'Filter by',
+              icon: FilterListIcon,
+              onClick: () => {
+                getSession(self).queueDialog(handleClose => [
+                  FilterByTagDlg,
+                  { model: self, handleClose },
+                ])
+              },
+            },
+            {
+              label: 'Line width',
+              subMenu: [
+                {
+                  label: 'Thin',
+                  onClick: () => self.setLineWidth(1),
+                },
+                {
+                  label: 'Bold',
+                  onClick: () => self.setLineWidth(2),
+                },
+                {
+                  label: 'Extra bold',
+                  onClick: () => self.setLineWidth(5),
+                },
+              ],
+            },
+            {
+              label: 'Draw inter-region vertical lines',
+              type: 'checkbox',
+              checked: self.drawInter,
+              onClick: () => self.setDrawInter(!self.drawInter),
+            },
+            {
+              label: 'Draw long range connections',
+              type: 'checkbox',
+              checked: self.drawLongRange,
+              onClick: () => self.setDrawLongRange(!self.drawLongRange),
+            },
+            {
+              label: 'Color scheme',
+              icon: PaletteIcon,
+              subMenu: [
+                {
+                  label: 'Insert size ± 3σ and orientation',
+                  onClick: () =>
+                    self.setColorScheme({ type: 'insertSizeAndOrientation' }),
+                },
+                {
+                  label: 'Insert size ± 3σ',
+                  onClick: () => self.setColorScheme({ type: 'insertSize' }),
+                },
+                {
+                  label: 'Orientation',
+                  onClick: () => self.setColorScheme({ type: 'orientation' }),
+                },
+                {
+                  label: 'Insert size gradient',
+                  onClick: () => self.setColorScheme({ type: 'gradient' }),
+                },
+              ],
+            },
+          ]
+        },
+      }
+    })
+    .views(self => ({
+      /**
+       * #method
+       */
+      async renderSvg(opts: ExportSvgOptions) {
+        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)
+          str = (
+            // eslint-disable-next-line react/no-danger
+            <g dangerouslySetInnerHTML={{ __html: ctx.getSvg().innerHTML }} />
+          )
+        }
+
+        return <g>{str}</g>
+      },
+    }))
+    .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 },
+          ),
+        )
+      },
+    }))
+}
+
+export type LinearReadArcsDisplayStateModel = ReturnType<
+  typeof stateModelFactory
+>
+export type LinearReadArcsDisplayModel =
+  Instance<LinearReadArcsDisplayStateModel>
+
+export default stateModelFactory

package/src/LinearReadCloudDisplay/components/ReactComponent.tsx

@@ -0,0 +1,86 @@
+import React from 'react'
+import { isAlive } from 'mobx-state-tree'
+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'
+
+// local
+import { LinearReadCloudDisplayModel } from '../model'
+
+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
+  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}
+    />
+  )
+})
+
+export default observer(function ({
+  model,
+}: {
+  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} />
+  )
+})