@jbrowse/plugin-alignments 2.5.0 → 2.6.0

package/src/LinearReadCloudDisplay/model.tsx

@@ -1,13 +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 { BaseDisplay } from '@jbrowse/core/pluggableElementTypes'
 import {
   AnyConfigurationSchemaType,
   ConfigurationReference,
-  ConfigurationSchema,
 } from '@jbrowse/core/configuration'
-import { getContainingView, getSession } from '@jbrowse/core/util'
-import { BaseLinearDisplay } from '@jbrowse/plugin-linear-genome-view'
+import { getSession } from '@jbrowse/core/util'
+import {
+  FeatureDensityMixin,
+  TrackHeightMixin,
+} from '@jbrowse/plugin-linear-genome-view'
 
 // icons
 import PaletteIcon from '@mui/icons-material/Palette'
@@ -15,9 +17,7 @@ import FilterListIcon from '@mui/icons-material/ClearAll'
 
 // locals
 import { FilterModel } from '../shared'
-import { fetchChains, ChainData } from '../shared/fetchChains'
-import drawFeats from './drawFeats'
-import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+import { ChainData } from '../shared/fetchChains'
 
 // async
 const FilterByTagDlg = lazy(() => import('../shared/FilterByTag'))
@@ -29,21 +29,17 @@ interface Filter {
   tagFilter?: { tag: string; value: string }
 }
 
-// stabilize clipid under test for snapshot
-function getId(id: string) {
-  const isJest = typeof jest === 'undefined'
-  return `cloud-clip-${isJest ? id : 'jest'}`
-}
-
 /**
  * #stateModel LinearReadCloudDisplay
- * extends `BaseLinearDisplay`
+ * extends `BaseDisplay`, it is not a block based track, hence not BaseLinearDisplay
  */
 function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
   return types
     .compose(
       'LinearReadCloudDisplay',
-      BaseLinearDisplay,
+      BaseDisplay,
+      TrackHeightMixin(),
+      FeatureDensityMixin(),
       types.model({
         /**
          * #property
@@ -69,39 +65,38 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
             extra: types.frozen(),
           }),
         ),
+
+        /**
+         * #property
+         */
+        drawSingletons: true,
       }),
     )
     .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
        */
-      reload() {
-        self.error = undefined
+      setDrawSingletons(f: boolean) {
+        self.drawSingletons = f
       },
       /**
        * #action
        */
-      setRef(ref: HTMLCanvasElement | null) {
-        self.ref = ref
-      },
-
-      setColorScheme(s: { type: string }) {
-        self.colorBy = cast(s)
+      setLastDrawnOffsetPx(n: number) {
+        self.lastDrawnOffsetPx = n
       },
-
       /**
        * #action
        */
-      setChainData(args: ChainData) {
-        self.chainData = args
+      setLastDrawnBpPerPx(n: number) {
+        self.lastDrawnBpPerPx = n
       },
 
       /**
@@ -110,29 +105,44 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
       setLoading(f: boolean) {
         self.loading = f
       },
-
       /**
        * #action
        */
-      setDrawn(f: boolean) {
-        self.drawn = f
+      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
+      },
+
+      setColorScheme(s: { type: string }) {
+        self.colorBy = cast(s)
       },
 
       /**
        * #action
        */
-      setFilterBy(filter: Filter) {
-        self.filterBy = cast(filter)
+      setChainData(args: ChainData) {
+        self.chainData = args
       },
 
       /**
        * #action
        */
-      setLastDrawnOffsetPx(n: number) {
-        self.lastDrawnOffsetPx = n
+      setFilterBy(filter: Filter) {
+        self.filterBy = cast(filter)
+      },
+    }))
+    .views(self => ({
+      get drawn() {
+        return self.lastDrawnOffsetPx !== undefined
       },
     }))
-
     .views(self => {
       const {
         trackMenuItems: superTrackMenuItems,
@@ -140,25 +150,12 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
       } = 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(),
+            notReady: !self.chainData,
           }
         },
 
@@ -168,6 +165,12 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
         trackMenuItems() {
           return [
             ...superTrackMenuItems(),
+            {
+              label: 'Draw singletons',
+              type: 'checkbox',
+              checked: self.drawSingletons,
+              onClick: () => self.setDrawSingletons(!self.drawSingletons),
+            },
             {
               label: 'Filter by',
               icon: FilterListIcon,
@@ -208,90 +211,28 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
         /**
          * #method
          */
-        async renderSvg(opts: { rasterizeLayers?: boolean }) {
-          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)
-            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 <g>{str}</g>
+        async renderSvg(opts: {
+          rasterizeLayers?: boolean
+        }): Promise<React.ReactNode> {
+          const { renderSvg } = await import('../shared/renderSvg')
+          const { drawFeats } = await import('./drawFeats')
+          return renderSvg(self as LinearReadCloudDisplayModel, 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/LinearReadCloudDisplay/util.ts

@@ -0,0 +1,47 @@
+// avoid drawing negative width features for SVG exports
+export function fillRectCtx(
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  ctx: CanvasRenderingContext2D,
+  fillColor?: string,
+) {
+  if (width < 0) {
+    x += width
+    width = -width
+  }
+  if (height < 0) {
+    y += height
+    height = -height
+  }
+
+  if (fillColor) {
+    ctx.fillStyle = fillColor
+  }
+
+  ctx.fillRect(x, y, width, height)
+}
+
+export function strokeRectCtx(
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  ctx: CanvasRenderingContext2D,
+  strokeColor?: string,
+) {
+  if (width < 0) {
+    x += width
+    width = -width
+  }
+  if (height < 0) {
+    y += height
+    height = -height
+  }
+
+  if (strokeColor) {
+    ctx.strokeStyle = strokeColor
+  }
+  ctx.strokeRect(x, y, width, height)
+}

package/src/LinearSNPCoverageDisplay/models/model.ts

@@ -1,6 +1,5 @@
-import { addDisposer, types, cast, getEnv, getSnapshot } from 'mobx-state-tree'
-import clone from 'clone'
-import { autorun } from 'mobx'
+import { types, cast, getEnv, getSnapshot, isAlive } from 'mobx-state-tree'
+import { observable } from 'mobx'
 
 // jbrowse
 import PluginManager from '@jbrowse/core/PluginManager'
@@ -17,6 +16,8 @@ import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 // locals
 import Tooltip from '../components/Tooltip'
 import { FilterModel, getUniqueModificationValues } from '../../shared'
+import { createAutorun, modificationColors } from '../../util'
+import { randomColor } from '../../util'
 
 // using a map because it preserves order
 const rendererTypes = new Map([['snpcoverage', 'SNPCoverageRenderer']])
@@ -68,7 +69,8 @@ function stateModelFactory(
       }),
     )
     .volatile(() => ({
-      modificationTagMap: undefined as Record<string, string> | undefined,
+      modificationTagMap: observable.map<string, string>({}),
+      modificationsReady: false,
     }))
     .actions(self => ({
       /**
@@ -99,17 +101,14 @@ function stateModelFactory(
        * #action
        */
       updateModificationColorMap(uniqueModifications: string[]) {
-        const colorPalette = ['red', 'blue', 'green', 'orange', 'purple']
-        let i = 0
-
-        const newMap = clone(self.modificationTagMap) || {}
         uniqueModifications.forEach(value => {
-          if (!newMap[value]) {
-            const newColor = colorPalette[i++]
-            newMap[value] = newColor
+          if (!self.modificationTagMap.has(value)) {
+            self.modificationTagMap.set(
+              value,
+              modificationColors[value] || randomColor(),
+            )
           }
         })
-        self.modificationTagMap = newMap
       },
     }))
     .views(self => {
@@ -163,10 +162,23 @@ function stateModelFactory(
         /**
          * #getter
          */
-        get modificationsReady() {
-          return self.colorBy?.type === 'modifications'
-            ? self.modificationTagMap !== undefined
-            : true
+        get autorunReady() {
+          const view = getContainingView(self) as LGV
+          return (
+            view.initialized &&
+            self.featureDensityStatsReady &&
+            !self.regionTooLarge &&
+            !self.error
+          )
+        },
+
+        get renderReady() {
+          const superProps = superRenderProps()
+          return !superProps.notReady && self.modificationsReady
+        },
+
+        get ready() {
+          return this.renderReady
         },
 
         /**
@@ -177,8 +189,8 @@ function stateModelFactory(
           const { colorBy, filterBy, modificationTagMap } = self
           return {
             ...superProps,
-            notReady: superProps.notReady || !this.modificationsReady,
-            modificationTagMap: modificationTagMap,
+            notReady: !this.ready,
+            modificationTagMap: Object.fromEntries(modificationTagMap.toJSON()),
 
             // must use getSnapshot because otherwise changes to e.g. just the
             // colorBy.type are not read
@@ -189,6 +201,12 @@ function stateModelFactory(
       }
     })
     .actions(self => ({
+      /**
+       * #action
+       */
+      setModificationsReady(flag: boolean) {
+        self.modificationsReady = flag
+      },
       /**
        * #action
        */
@@ -207,41 +225,36 @@ function stateModelFactory(
       toggleDrawArcs() {
         self.drawArcs = !self.drawArcsSetting
       },
+    }))
+    .actions(self => ({
       afterAttach() {
-        addDisposer(
+        createAutorun(
           self,
-          autorun(
-            async () => {
-              try {
-                const { colorBy } = self
-                const view = getContainingView(self) as LGV
-
-                if (
-                  !view.initialized ||
-                  !self.featureDensityStatsReady ||
-                  self.regionTooLarge
-                ) {
-                  return
-                }
-                const { staticBlocks } = view
-                if (colorBy?.type === 'modifications') {
-                  const adapter = getConf(self.parentTrack, 'adapter')
-                  self.updateModificationColorMap(
-                    await getUniqueModificationValues(
-                      self,
-                      adapter,
-                      colorBy,
-                      staticBlocks,
-                    ),
-                  )
-                }
-              } catch (error) {
-                console.error(error)
-                self.setError(error)
+          async () => {
+            self.setModificationsReady(false)
+            if (!self.autorunReady) {
+              return
+            }
+            const view = getContainingView(self) as LGV
+            const { staticBlocks } = view
+            const { colorBy } = self
+            if (colorBy?.type === 'modifications') {
+              const adapter = getConf(self.parentTrack, 'adapter')
+              const vals = await getUniqueModificationValues(
+                self,
+                adapter,
+                colorBy,
+                staticBlocks,
+              )
+              if (isAlive(self)) {
+                self.updateModificationColorMap(vals)
+                self.setModificationsReady(true)
               }
-            },
-            { delay: 1000 },
-          ),
+            } else {
+              self.setModificationsReady(true)
+            }
+          },
+          { delay: 1000 },
         )
       },
     }))

package/src/MismatchParser/index.ts

@@ -1,4 +1,5 @@
 import { revcom, Feature } from '@jbrowse/core/util'
+import { getTagAlt } from '../util'
 
 export interface Mismatch {
   qual?: number
@@ -116,8 +117,8 @@ export function cigarToMismatches(
 }
 
 /**
- * parse a SAM MD tag to find mismatching bases of the template versus the reference
- * @returns array of mismatches and their positions
+ * parse a SAM MD tag to find mismatching bases of the template versus the
+ * reference @returns array of mismatches and their positions
  */
 export function mdToMismatches(
   mdstring: string,
@@ -126,13 +127,13 @@ export function mdToMismatches(
   seq: string,
   qual?: Buffer,
 ) {
-  const mismatchRecords: Mismatch[] = []
   let curr: Mismatch = { start: 0, base: '', length: 0, type: 'mismatch' }
-  const skips = cigarMismatches.filter(cigar => cigar.type === 'skip')
   let lastCigar = 0
   let lastTemplateOffset = 0
   let lastRefOffset = 0
   let lastSkipPos = 0
+  const mismatchRecords: Mismatch[] = []
+  const skips = cigarMismatches.filter(cigar => cigar.type === 'skip')
 
   // convert a position on the reference sequence to a position
   // on the template sequence, taking into account hard and soft
@@ -265,6 +266,47 @@ export function* getNextRefPos(cigarOps: string[], positions: number[]) {
     }
   }
 }
+
+export function getModificationProbabilities(feature: Feature) {
+  const m = (getTagAlt(feature, 'ML', 'Ml') as number[] | string) || []
+  return m
+    ? (typeof m === 'string' ? m.split(',').map(e => +e) : m).map(e => e / 255)
+    : (getTagAlt(feature, 'MP', 'Mp') as string | undefined)
+        ?.split('')
+        .map(s => s.charCodeAt(0) - 33)
+        .map(elt => Math.min(1, elt / 50))
+}
+
+export function getMethBins(feature: Feature) {
+  const fstart = feature.get('start')
+  const fend = feature.get('end')
+  const fstrand = feature.get('strand') as -1 | 0 | 1
+  const flen = fend - fstart
+  const mm = (getTagAlt(feature, 'MM', 'Mm') as string | undefined) || ''
+  const methBins = new Array<number>(flen)
+  const methProbs = new Array<number>(flen)
+  const seq = feature.get('seq') as string | undefined
+  if (seq) {
+    const ops = parseCigar(feature.get('CIGAR'))
+    const probabilities = getModificationProbabilities(feature)
+    const modifications = getModificationPositions(mm, seq, fstrand)
+    let probIndex = 0
+    for (const { type, positions } of modifications) {
+      if (type === 'm') {
+        for (const ref of getNextRefPos(ops, positions)) {
+          const prob = probabilities?.[probIndex] || 0
+          probIndex++
+          if (ref >= 0 && ref < flen) {
+            methBins[ref] = 1
+            methProbs[ref] = prob
+          }
+        }
+      }
+    }
+  }
+  return { methBins, methProbs }
+}
+
 export function getModificationPositions(
   mm: string,
   fseq: string,

package/src/PileupRPC/methods/GetReducedFeatures.ts

@@ -1,12 +1,11 @@
 import { getAdapter } from '@jbrowse/core/data_adapters/dataAdapterCache'
-import { Region, dedupe } from '@jbrowse/core/util'
+import { Region, dedupe, groupBy } 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 { firstValueFrom } from 'rxjs'
 // locals
 import { filterForPairs, getInsertSizeStats } from '../util'
-import { ReducedFeature } from '../../shared/fetchChains'
 import PileupBaseRPC from '../base'
 import { getTag } from '../../util'
 
@@ -56,15 +55,8 @@ export default class PileupGetReducedFeatures extends PileupBaseRPC {
 
     const filtered = filterForPairs(reduced)
     const stats = filtered.length ? getInsertSizeStats(filtered) : undefined
-    const chains = {} as { [key: string]: ReducedFeature[] }
+    const chains = groupBy(reduced, f => f.name)
 
-    // pair features
-    reduced.forEach(f => {
-      if (!chains[f.name]) {
-        chains[f.name] = []
-      }
-      chains[f.name].push(f)
-    })
     return {
       chains: Object.values(chains),
       stats,