@jbrowse/plugin-alignments 2.2.1 → 2.3.0

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

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

@@ -1,5 +1,9 @@
 import { addDisposer, types, cast, getEnv, getSnapshot } from 'mobx-state-tree'
-import { observable, autorun } from 'mobx'
+import clone from 'clone'
+import { autorun } from 'mobx'
+
+// jbrowse
+import PluginManager from '@jbrowse/core/PluginManager'
 import {
   getConf,
   readConfObject,
@@ -7,13 +11,12 @@ import {
   AnyConfigurationModel,
 } from '@jbrowse/core/configuration'
 import { linearWiggleDisplayModelFactory } from '@jbrowse/plugin-wiggle'
-import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
-import PluginManager from '@jbrowse/core/PluginManager'
 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']])
@@ -52,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
          */
@@ -75,7 +68,7 @@ function stateModelFactory(
       }),
     )
     .volatile(() => ({
-      modificationTagMap: observable.map({}),
+      modificationTagMap: undefined as Record<string, string> | undefined,
     }))
     .actions(self => ({
       /**
@@ -109,12 +102,14 @@ function stateModelFactory(
         const colorPalette = ['red', 'blue', 'green', 'orange', 'purple']
         let i = 0
 
+        const newMap = clone(self.modificationTagMap) || {}
         uniqueModifications.forEach(value => {
-          if (!self.modificationTagMap.has(value)) {
+          if (!newMap[value]) {
             const newColor = colorPalette[i++]
-            self.modificationTagMap.set(value, newColor)
+            newMap[value] = newColor
           }
         })
+        self.modificationTagMap = newMap
       },
     }))
     .views(self => {
@@ -170,8 +165,7 @@ function stateModelFactory(
          */
         get modificationsReady() {
           return self.colorBy?.type === 'modifications'
-            ? Object.keys(JSON.parse(JSON.stringify(self.modificationTagMap)))
-                .length > 0
+            ? self.modificationTagMap !== undefined
             : true
         },
 
@@ -184,7 +178,7 @@ function stateModelFactory(
           return {
             ...superProps,
             notReady: superProps.notReady || !this.modificationsReady,
-            modificationTagMap: Object.fromEntries(modificationTagMap.toJSON()),
+            modificationTagMap: modificationTagMap,
 
             // must use getSnapshot because otherwise changes to e.g. just the
             // colorBy.type are not read

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'