@jbrowse/plugin-alignments 2.2.2 → 2.3.0

package/src/LinearReadCloudDisplay/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: 'LinearReadCloudDisplay',
+      displayName: 'Read cloud display',
+      configSchema,
+      stateModel: stateModelF(configSchema),
+      trackType: 'AlignmentsTrack',
+      viewType: 'LinearGenomeView',
+      subDisplay: { type: 'LinearAlignmentsDisplay', lowerPanel: true },
+      ReactComponent,
+    })
+  })
+}

package/src/LinearReadCloudDisplay/model.tsx

@@ -0,0 +1,289 @@
+import React, { lazy } from 'react'
+import { autorun } from 'mobx'
+import { addDisposer, cast, types, Instance } from 'mobx-state-tree'
+import {
+  AnyConfigurationSchemaType,
+  ConfigurationReference,
+  ConfigurationSchema,
+} from '@jbrowse/core/configuration'
+import { getContainingView, getSession } from '@jbrowse/core/util'
+import { BaseLinearDisplay } 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 { fetchChains, ChainData } from '../shared/fetchChains'
+import drawFeats from './drawFeats'
+import {
+  ExportSvgOptions,
+  LinearGenomeViewModel,
+} 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 }
+}
+
+/**
+ * #stateModel LinearReadCloudDisplay
+ * extends `BaseLinearDisplay`
+ */
+function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
+  return types
+    .compose(
+      'LinearReadCloudDisplay',
+      BaseLinearDisplay,
+      types.model({
+        /**
+         * #property
+         */
+        type: types.literal('LinearReadCloudDisplay'),
+        /**
+         * #property
+         */
+        configuration: ConfigurationReference(configSchema),
+
+        /**
+         * #property
+         */
+        filterBy: types.optional(FilterModel, {}),
+
+        /**
+         * #property
+         */
+        colorBy: types.maybe(
+          types.model({
+            type: types.string,
+            tag: types.maybe(types.string),
+            extra: types.frozen(),
+          }),
+        ),
+      }),
+    )
+    .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
+       */
+      setRef(ref: HTMLCanvasElement | null) {
+        self.ref = ref
+      },
+
+      setColorScheme(s: { type: string }) {
+        self.colorBy = cast(s)
+      },
+
+      /**
+       * #action
+       */
+      setChainData(args: ChainData) {
+        self.chainData = args
+      },
+
+      /**
+       * #action
+       */
+      setLoading(f: boolean) {
+        self.loading = f
+      },
+
+      /**
+       * #action
+       */
+      setDrawn(f: boolean) {
+        self.drawn = f
+      },
+
+      /**
+       * #action
+       */
+      setFilterBy(filter: Filter) {
+        self.filterBy = cast(filter)
+      },
+
+      /**
+       * #action
+       */
+      setLastDrawnOffsetPx(n: number) {
+        self.lastDrawnOffsetPx = n
+      },
+    }))
+
+    .views(self => {
+      const {
+        trackMenuItems: superTrackMenuItems,
+        renderProps: superRenderProps,
+      } = 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(),
+          }
+        },
+
+        /**
+         * #method
+         */
+        trackMenuItems() {
+          return [
+            ...superTrackMenuItems(),
+            {
+              label: 'Filter by',
+              icon: FilterListIcon,
+              onClick: () => {
+                getSession(self).queueDialog(handleClose => [
+                  FilterByTagDlg,
+                  { model: self, handleClose },
+                ])
+              },
+            },
+
+            {
+              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' }),
+                },
+              ],
+            },
+          ]
+        },
+
+        /**
+         * #method
+         */
+        async renderSvg(opts: ExportSvgOptions) {
+          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)
+            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 LinearReadCloudDisplayStateModel = ReturnType<
+  typeof stateModelFactory
+>
+export type LinearReadCloudDisplayModel =
+  Instance<LinearReadCloudDisplayStateModel>
+
+export default stateModelFactory

package/src/LinearSNPCoverageDisplay/index.ts

@@ -9,6 +9,7 @@ export default function register(pluginManager: PluginManager) {
     const configSchema = configSchemaFactory(pluginManager)
     return new DisplayType({
       name: 'LinearSNPCoverageDisplay',
+      displayName: 'SNPCoverage display',
       configSchema,
       stateModel: modelFactory(pluginManager, configSchema),
       trackType: 'AlignmentsTrack',

package/src/LinearSNPCoverageDisplay/models/model.ts

@@ -11,12 +11,12 @@ import {
   AnyConfigurationModel,
 } from '@jbrowse/core/configuration'
 import { linearWiggleDisplayModelFactory } from '@jbrowse/plugin-wiggle'
-import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 import { getContainingView } from '@jbrowse/core/util'
+import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
 // locals
 import Tooltip from '../components/Tooltip'
-import { getUniqueModificationValues } from '../../shared'
+import { FilterModel, getUniqueModificationValues } from '../../shared'
 
 // using a map because it preserves order
 const rendererTypes = new Map([['snpcoverage', 'SNPCoverageRenderer']])
@@ -55,17 +55,7 @@ function stateModelFactory(
         /**
          * #property
          */
-        filterBy: types.optional(
-          types.model({
-            flagInclude: types.optional(types.number, 0),
-            flagExclude: types.optional(types.number, 1540),
-            readName: types.maybe(types.string),
-            tagFilter: types.maybe(
-              types.model({ tag: types.string, value: types.string }),
-            ),
-          }),
-          {},
-        ),
+        filterBy: types.optional(FilterModel, {}),
         /**
          * #property
          */

package/src/{BamAdapter/MismatchParser.test.ts → MismatchParser/index.test.ts}

@@ -5,7 +5,7 @@ import {
   parseCigar,
   getNextRefPos,
   getModificationPositions,
-} from './MismatchParser'
+} from './index'
 
 const seq =
   'AAAAAAAAAACAAAAAAAAAAAAAACCCCCCCCCCCCCCCCCCCCCCCCCGGGGGGGGGGGGGGGGGGGGGGGGGTTTTTTTTTTTTTTTTTTTTTTTTT'

package/src/{BamAdapter/MismatchParser.ts → MismatchParser/index.ts}

@@ -1,4 +1,5 @@
-import { revcom } from '@jbrowse/core/util'
+import { revcom, Feature } from '@jbrowse/core/util'
+
 export interface Mismatch {
   qual?: number
   start: number
@@ -11,9 +12,14 @@ export interface Mismatch {
 }
 const mdRegex = new RegExp(/(\d+|\^[a-z]+|[a-z])/gi)
 const modificationRegex = new RegExp(/([A-Z])([-+])([^,.?]+)([.?])?/)
+const cigarRegex = new RegExp(/([MIDNSHPX=])/)
+const startClip = new RegExp(/(\d+)[SH]$/)
+const endClip = new RegExp(/^(\d+)([SH])/)
+
 export function parseCigar(cigar = '') {
-  return cigar.split(/([MIDNSHPX=])/).slice(0, -1)
+  return cigar.split(cigarRegex).slice(0, -1)
 }
+
 export function cigarToMismatches(
   ops: string[],
   seq?: string,
@@ -339,3 +345,124 @@ export function getModificationTypes(mm: string) {
     })
     .flat()
 }
+
+export function getOrientedCigar(flip: boolean, cigar: string[]) {
+  if (flip) {
+    const ret = []
+    for (let i = 0; i < cigar.length; i += 2) {
+      const len = cigar[i]
+      let op = cigar[i + 1]
+      if (op === 'D') {
+        op = 'I'
+      } else if (op === 'I') {
+        op = 'D'
+      }
+      ret.push(len)
+      ret.push(op)
+    }
+    return ret
+  } else {
+    return cigar
+  }
+}
+
+export function getOrientedMismatches(flip: boolean, cigar: string) {
+  const p = parseCigar(cigar)
+  return cigarToMismatches(flip ? getOrientedCigar(flip, p) : p)
+}
+
+export function getLengthOnRef(cigar: string) {
+  const cigarOps = parseCigar(cigar)
+  let lengthOnRef = 0
+  for (let i = 0; i < cigarOps.length; i += 2) {
+    const len = +cigarOps[i]
+    const op = cigarOps[i + 1]
+    if (op !== 'H' && op !== 'S' && op !== 'I') {
+      lengthOnRef += len
+    }
+  }
+  return lengthOnRef
+}
+
+export function getLength(cigar: string) {
+  const cigarOps = parseCigar(cigar)
+  let length = 0
+  for (let i = 0; i < cigarOps.length; i += 2) {
+    const len = +cigarOps[i]
+    const op = cigarOps[i + 1]
+    if (op !== 'D' && op !== 'N') {
+      length += len
+    }
+  }
+  return length
+}
+
+export function getLengthSansClipping(cigar: string) {
+  const cigarOps = parseCigar(cigar)
+  let length = 0
+  for (let i = 0; i < cigarOps.length; i += 2) {
+    const len = +cigarOps[i]
+    const op = cigarOps[i + 1]
+    if (op !== 'H' && op !== 'S' && op !== 'D' && op !== 'N') {
+      length += len
+    }
+  }
+  return length
+}
+
+export function getClip(cigar: string, strand: number) {
+  return strand === -1
+    ? +(cigar.match(startClip) || [])[1] || 0
+    : +(cigar.match(endClip) || [])[1] || 0
+}
+
+export function getTag(f: Feature, tag: string) {
+  const tags = f.get('tags')
+  return tags ? tags[tag] : f.get(tag)
+}
+
+// produces a list of "feature-like" object from parsing supplementary
+// alignments in the SA tag
+//
+// @param normalize - used specifically in the linear-read-vs-ref context, it
+// flips features around relative to the original feature. other contexts of
+// usage can keep this false
+export function featurizeSA(
+  SA: string | undefined,
+  id: string,
+  strand: number,
+  readName: string,
+  normalize?: boolean,
+) {
+  return (
+    SA?.split(';')
+      .filter(aln => !!aln)
+      .map((aln, index) => {
+        const [saRef, saStart, saStrand, saCigar] = aln.split(',')
+        const saLengthOnRef = getLengthOnRef(saCigar)
+        const saLength = getLength(saCigar)
+        const saLengthSansClipping = getLengthSansClipping(saCigar)
+        const saStrandNormalized = saStrand === '-' ? -1 : 1
+        const saClipPos = getClip(
+          saCigar,
+          (normalize ? strand : 1) * saStrandNormalized,
+        )
+        const saRealStart = +saStart - 1
+        return {
+          refName: saRef,
+          start: saRealStart,
+          end: saRealStart + saLengthOnRef,
+          seqLength: saLength,
+          clipPos: saClipPos,
+          CIGAR: saCigar,
+          strand: (normalize ? strand : 1) * saStrandNormalized,
+          uniqueId: `${id}_SA${index}`,
+          mate: {
+            start: saClipPos,
+            end: saClipPos + saLengthSansClipping,
+            refName: readName,
+          },
+        }
+      }) || []
+  )
+}

package/src/PileupRPC/base.ts

@@ -0,0 +1,24 @@
+import RpcMethodType from '@jbrowse/core/pluggableElementTypes/RpcMethodType'
+import { renameRegionsIfNeeded } from '@jbrowse/core/util'
+import { RenderArgs } from '@jbrowse/core/rpc/coreRpcMethods'
+
+// specialized get features to return limited data about alignments
+export default abstract class PileupBaseRPC extends RpcMethodType {
+  async serializeArguments(
+    args: RenderArgs & {
+      signal?: AbortSignal
+      statusCallback?: (arg: string) => void
+    },
+    rpcDriver: string,
+  ) {
+    const { rootModel } = this.pluginManager
+    const assemblyManager = rootModel?.session?.assemblyManager
+    if (!assemblyManager) {
+      throw new Error('no assembly manager available')
+    }
+
+    const renamedArgs = await renameRegionsIfNeeded(assemblyManager, args)
+
+    return super.serializeArguments(renamedArgs, rpcDriver)
+  }
+}

package/src/PileupRPC/index.ts

@@ -0,0 +1,12 @@
+import PluginManager from '@jbrowse/core/PluginManager'
+import {
+  PileupGetGlobalValueForTag,
+  PileupGetVisibleModifications,
+  PileupGetReducedFeatures,
+} from './rpcMethods'
+
+export default (pm: PluginManager) => {
+  pm.addRpcMethod(() => new PileupGetGlobalValueForTag(pm))
+  pm.addRpcMethod(() => new PileupGetVisibleModifications(pm))
+  pm.addRpcMethod(() => new PileupGetReducedFeatures(pm))
+}

package/src/PileupRPC/methods/GetGlobalValueForTag.ts

@@ -0,0 +1,41 @@
+import { getAdapter } from '@jbrowse/core/data_adapters/dataAdapterCache'
+import { Region } from '@jbrowse/core/util'
+import { RemoteAbortSignal } from '@jbrowse/core/rpc/remoteAbortSignals'
+import { BaseFeatureDataAdapter } from '@jbrowse/core/data_adapters/BaseAdapter'
+import { toArray } from 'rxjs/operators'
+import PileupBaseRPC from '../base'
+import { getTag } from '../../util'
+
+export default class PileupGetGlobalValueForTag extends PileupBaseRPC {
+  name = 'PileupGetGlobalValueForTag'
+
+  async execute(
+    args: {
+      adapterConfig: {}
+      signal?: RemoteAbortSignal
+      headers?: Record<string, string>
+      regions: Region[]
+      sessionId: string
+      tag: string
+    },
+    rpcDriver: string,
+  ) {
+    const { adapterConfig, sessionId, regions, tag } =
+      await this.deserializeArguments(args, rpcDriver)
+
+    const dataAdapter = (
+      await getAdapter(this.pluginManager, sessionId, adapterConfig)
+    ).dataAdapter as BaseFeatureDataAdapter
+
+    const features = dataAdapter.getFeaturesInMultipleRegions(regions)
+    const featuresArray = await features.pipe(toArray()).toPromise()
+    return [
+      ...new Set(
+        featuresArray
+          .map(feature => getTag(feature, tag))
+          .filter(f => f !== undefined)
+          .map(f => `${f}`),
+      ),
+    ]
+  }
+}

package/src/PileupRPC/methods/GetReducedFeatures.ts

@@ -0,0 +1,76 @@
+import { getAdapter } from '@jbrowse/core/data_adapters/dataAdapterCache'
+import { Region, dedupe } from '@jbrowse/core/util'
+import { RemoteAbortSignal } from '@jbrowse/core/rpc/remoteAbortSignals'
+import { BaseFeatureDataAdapter } from '@jbrowse/core/data_adapters/BaseAdapter'
+import { toArray } from 'rxjs/operators'
+
+// locals
+import { filterForPairs, getInsertSizeStats } from '../util'
+import { ReducedFeature } from '../../shared/fetchChains'
+import PileupBaseRPC from '../base'
+import { getTag } from '../../util'
+
+// specialized get features to return limited data about alignments
+export default class PileupGetReducedFeatures extends PileupBaseRPC {
+  name = 'PileupGetReducedFeatures'
+
+  async execute(
+    args: {
+      adapterConfig: {}
+      signal?: RemoteAbortSignal
+      headers?: Record<string, string>
+      regions: Region[]
+      sessionId: string
+      tag: string
+    },
+    rpcDriver: string,
+  ) {
+    const des = await this.deserializeArguments(args, rpcDriver)
+    const { adapterConfig, sessionId, regions } = des
+    const dataAdapter = (
+      await getAdapter(this.pluginManager, sessionId, adapterConfig)
+    ).dataAdapter as BaseFeatureDataAdapter
+
+    const featuresArray = await dataAdapter
+      .getFeaturesInMultipleRegions(regions, des)
+      .pipe(toArray())
+      .toPromise()
+
+    const reduced = dedupe(
+      featuresArray.map(f => ({
+        id: f.id(),
+        refName: f.get('refName'),
+        name: f.get('name'),
+        start: f.get('start'),
+        strand: f.get('strand'),
+        end: f.get('end'),
+        flags: f.get('flags'),
+        tlen: f.get('template_length'),
+        pair_orientation: f.get('pair_orientation'),
+        next_ref: f.get('next_ref'),
+        next_pos: f.get('next_pos'),
+        clipPos: f.get('clipPos'),
+        SA: getTag(f, 'SA'),
+      })),
+      f => f.id,
+    )
+
+    const filtered = filterForPairs(reduced)
+    const stats = filtered.length ? getInsertSizeStats(filtered) : undefined
+    const chains = {} as { [key: string]: ReducedFeature[] }
+
+    // pair features
+    reduced.forEach(f => {
+      if (!chains[f.name]) {
+        chains[f.name] = []
+      }
+      chains[f.name].push(f)
+    })
+    return {
+      chains: Object.values(chains),
+      stats,
+      hasPaired: !!stats,
+      containsNoTransferables: true,
+    }
+  }
+}