@jbrowse/plugin-alignments 2.2.2 → 2.3.0

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

package/src/LinearReadCloudDisplay/configSchema.ts

@@ -0,0 +1,57 @@
+import PluginManager from '@jbrowse/core/PluginManager'
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+import { linearBasicDisplayConfigSchemaFactory } from '@jbrowse/plugin-linear-genome-view'
+import { types } from 'mobx-state-tree'
+
+/**
+ * #config LinearReadCloudDisplay
+ */
+function configSchemaF(pluginManager: PluginManager) {
+  return ConfigurationSchema(
+    'LinearReadCloudDisplay',
+    {
+      /**
+       * #slot
+       */
+      maxFeatureScreenDensity: {
+        type: 'number',
+        description: 'maximum features per pixel that is displayed in the view',
+        defaultValue: 5,
+      },
+
+      /**
+       * #slot
+       */
+      featureHeight: {
+        type: 'number',
+        defaultValue: 7,
+      },
+
+      /**
+       * #slot
+       */
+      colorScheme: {
+        type: 'stringEnum',
+        model: types.enumeration('colorScheme', [
+          'strand',
+          'normal',
+          'insertSize',
+          'insertSizeAndOrientation',
+          'mappingQuality',
+          'tag',
+        ]),
+        description: 'color scheme to use',
+        defaultValue: 'normal',
+      },
+    },
+    {
+      /**
+       * #baseConfiguration
+       */
+      baseConfiguration: linearBasicDisplayConfigSchemaFactory(pluginManager),
+      explicitlyTyped: true,
+    },
+  )
+}
+
+export default configSchemaF

package/src/LinearReadCloudDisplay/drawFeats.ts

@@ -0,0 +1,201 @@
+import { getConf } from '@jbrowse/core/configuration'
+import { getContainingView } 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'
+
+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
+  },
+  ctx: CanvasRenderingContext2D,
+) {
+  const { chainData } = self
+  if (!chainData) {
+    return
+  }
+  const featureHeight = getConf(self, 'featureHeight')
+  const displayHeight = self.height
+  const view = getContainingView(self) as LGV
+
+  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 r1s = view.bpToPx({
+        refName: v0.refName,
+        coord: v0.start,
+      })
+      const r1e = view.bpToPx({
+        refName: v0.refName,
+        coord: v0.end,
+      })
+      const r2s = view.bpToPx({
+        refName: v1.refName,
+        coord: v1.start,
+      })
+      const r2e = view.bpToPx({
+        refName: v1.refName,
+        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 r1s = view.bpToPx({
+          refName: v0.refName,
+          coord: v0.start,
+        })
+        const r1e = view.bpToPx({
+          refName: v0.refName,
+          coord: v0.end,
+        })
+        const r2s = view.bpToPx({
+          refName: v1.refName,
+          coord: v1.start,
+        })
+        const r2e = view.bpToPx({
+          refName: v1.refName,
+          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 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)
+  }
+}