@jbrowse/plugin-alignments 2.2.0 → 2.2.2

package/src/LinearPileupDisplay/configSchema.ts

@@ -8,7 +8,7 @@ import PluginManager from '@jbrowse/core/PluginManager'
  */
 function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
 
-function PileupConfigFactory(pluginManager: PluginManager) {
+function configSchemaF(pluginManager: PluginManager) {
   // modify config schema to take in a sub coverage display
   return ConfigurationSchema(
     'LinearPileupDisplay',
@@ -64,8 +64,6 @@ function PileupConfigFactory(pluginManager: PluginManager) {
   )
 }
 
-export type LinearPileupDisplayConfigModel = ReturnType<
-  typeof PileupConfigFactory
->
+export type LinearPileupDisplayConfigModel = ReturnType<typeof configSchemaF>
 export type LinearPileupDisplayConfig = Instance<LinearPileupDisplayConfigModel>
-export default PileupConfigFactory
+export default configSchemaF

package/src/LinearPileupDisplay/index.ts

@@ -17,3 +17,8 @@ export default function register(pluginManager: PluginManager) {
     })
   })
 }
+
+export {
+  modelFactory as linearPileupDisplayStateModelFactory,
+  configSchemaFactory as linearPileupDisplayConfigSchemaFactory,
+}

package/src/LinearPileupDisplay/model.ts

@@ -55,6 +55,7 @@ type LGV = LinearGenomeViewModel
 
 /**
  * #stateModel LinearPileupDisplay
+ * extends `BaseLinearDisplay`
  */
 function stateModelFactory(configSchema: LinearPileupDisplayConfigModel) {
   return types
@@ -117,6 +118,10 @@ function stateModelFactory(configSchema: LinearPileupDisplayConfigModel) {
             extra: types.frozen(),
           }),
         ),
+
+        /**
+         * #property
+         */
         filterBy: types.optional(
           types.model({
             flagInclude: types.optional(types.number, 0),
@@ -134,6 +139,7 @@ function stateModelFactory(configSchema: LinearPileupDisplayConfigModel) {
       colorTagMap: observable.map<string, string>({}),
       modificationTagMap: observable.map<string, string>({}),
       featureUnderMouseVolatile: undefined as undefined | Feature,
+      currSortBpPerPx: 0,
       ready: false,
     }))
     .actions(self => ({
@@ -143,6 +149,12 @@ function stateModelFactory(configSchema: LinearPileupDisplayConfigModel) {
       setReady(flag: boolean) {
         self.ready = flag
       },
+      /**
+       * #action
+       */
+      setCurrSortBpPerPx(n: number) {
+        self.currSortBpPerPx = n
+      },
       /**
        * #action
        */
@@ -288,7 +300,7 @@ function stateModelFactory(configSchema: LinearPileupDisplayConfigModel) {
                     ...self.renderProps(),
                   })
                   self.setReady(true)
-                  self.setCurrBpPerPx(bpPerPx)
+                  self.setCurrSortBpPerPx(bpPerPx)
                 } else {
                   self.setReady(true)
                 }
@@ -302,6 +314,8 @@ function stateModelFactory(configSchema: LinearPileupDisplayConfigModel) {
         )
 
         // autorun synchronizes featureUnderMouse with featureIdUnderMouse
+        // asynchronously. this is needed due to how we do not serialize all
+        // features from the BAM/CRAM over the rpc
         addDisposer(
           self,
           autorun(async () => {
@@ -567,7 +581,7 @@ function stateModelFactory(configSchema: LinearPileupDisplayConfigModel) {
             colorBy,
             filterBy,
             rpcDriverName,
-            currBpPerPx,
+            currSortBpPerPx,
             ready,
           } = self
 
@@ -578,7 +592,7 @@ function stateModelFactory(configSchema: LinearPileupDisplayConfigModel) {
             notReady:
               superProps.notReady ||
               !ready ||
-              (sortedBy && currBpPerPx !== view.bpPerPx),
+              (sortedBy && currSortBpPerPx !== view.bpPerPx),
             rpcDriverName,
             displayModel: self,
             sortedBy,
@@ -707,39 +721,31 @@ function stateModelFactory(configSchema: LinearPileupDisplayConfigModel) {
               subMenu: [
                 {
                   label: 'Normal',
-                  onClick: () => {
-                    self.setColorScheme({ type: 'normal' })
-                  },
+                  onClick: () => self.setColorScheme({ type: 'normal' }),
                 },
                 {
                   label: 'Mapping quality',
-                  onClick: () => {
-                    self.setColorScheme({ type: 'mappingQuality' })
-                  },
+                  onClick: () =>
+                    self.setColorScheme({ type: 'mappingQuality' }),
                 },
                 {
                   label: 'Strand',
-                  onClick: () => {
-                    self.setColorScheme({ type: 'strand' })
-                  },
+                  onClick: () => self.setColorScheme({ type: 'strand' }),
                 },
                 {
                   label: 'Pair orientation',
-                  onClick: () => {
-                    self.setColorScheme({ type: 'pairOrientation' })
-                  },
+                  onClick: () =>
+                    self.setColorScheme({ type: 'pairOrientation' }),
                 },
                 {
                   label: 'Per-base quality',
-                  onClick: () => {
-                    self.setColorScheme({ type: 'perBaseQuality' })
-                  },
+                  onClick: () =>
+                    self.setColorScheme({ type: 'perBaseQuality' }),
                 },
                 {
                   label: 'Per-base lettering',
-                  onClick: () => {
-                    self.setColorScheme({ type: 'perBaseLettering' })
-                  },
+                  onClick: () =>
+                    self.setColorScheme({ type: 'perBaseLettering' }),
                 },
                 {
                   label: 'Modifications or methylation',
@@ -752,15 +758,12 @@ function stateModelFactory(configSchema: LinearPileupDisplayConfigModel) {
                 },
                 {
                   label: 'Insert size',
-                  onClick: () => {
-                    self.setColorScheme({ type: 'insertSize' })
-                  },
+                  onClick: () => self.setColorScheme({ type: 'insertSize' }),
                 },
                 {
                   label: 'Stranded paired-end',
-                  onClick: () => {
-                    self.setColorScheme({ type: 'reverseTemplate' })
-                  },
+                  onClick: () =>
+                    self.setColorScheme({ type: 'reverseTemplate' }),
                 },
                 {
                   label: 'Color by tag...',
@@ -805,9 +808,7 @@ function stateModelFactory(configSchema: LinearPileupDisplayConfigModel) {
               label: 'Fade mismatches by quality',
               type: 'checkbox',
               checked: self.mismatchAlphaSetting,
-              onClick: () => {
-                self.toggleMismatchAlpha()
-              },
+              onClick: () => self.toggleMismatchAlpha(),
             },
           ]
         },

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,
@@ -8,7 +12,6 @@ import {
 } 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'
 
 // locals
@@ -75,7 +78,7 @@ function stateModelFactory(
       }),
     )
     .volatile(() => ({
-      modificationTagMap: observable.map({}),
+      modificationTagMap: undefined as Record<string, string> | undefined,
     }))
     .actions(self => ({
       /**
@@ -109,12 +112,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 +175,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 +188,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/PileupRPC/rpcMethods.ts

@@ -1,11 +1,12 @@
-import { getAdapter } from '@jbrowse/core/data_adapters/dataAdapterCache'
 import RpcMethodType from '@jbrowse/core/pluggableElementTypes/RpcMethodType'
+import { getAdapter } from '@jbrowse/core/data_adapters/dataAdapterCache'
+import { renameRegionsIfNeeded, Region } from '@jbrowse/core/util'
 import { RenderArgs } from '@jbrowse/core/rpc/coreRpcMethods'
-import { renameRegionsIfNeeded } from '@jbrowse/core/util'
-import { Region } from '@jbrowse/core/util/types'
 import { RemoteAbortSignal } from '@jbrowse/core/rpc/remoteAbortSignals'
-import { toArray } from 'rxjs/operators'
 import { BaseFeatureDataAdapter } from '@jbrowse/core/data_adapters/BaseAdapter'
+import { toArray } from 'rxjs/operators'
+
+// locals
 import { getTagAlt } from '../util'
 import { getModificationTypes } from '../BamAdapter/MismatchParser'
 
@@ -41,14 +42,11 @@ export class PileupGetGlobalValueForTag extends RpcMethodType {
     },
     rpcDriverClassName: string,
   ) {
-    const deserializedArgs = await this.deserializeArguments(
-      args,
-      rpcDriverClassName,
-    )
-    const { adapterConfig, sessionId, regions, tag } = deserializedArgs
-    const dataAdapter = (
-      await getAdapter(this.pluginManager, sessionId, adapterConfig)
-    ).dataAdapter as BaseFeatureDataAdapter
+    const pm = this.pluginManager
+    const deArgs = await this.deserializeArguments(args, rpcDriverClassName)
+    const { adapterConfig, sessionId, regions, tag } = deArgs
+    const dataAdapter = (await getAdapter(pm, sessionId, adapterConfig))
+      .dataAdapter as BaseFeatureDataAdapter
 
     const features = dataAdapter.getFeaturesInMultipleRegions(regions)
     const featuresArray = await features.pipe(toArray()).toPromise()
@@ -96,14 +94,11 @@ export class PileupGetVisibleModifications extends RpcMethodType {
     },
     rpcDriverClassName: string,
   ) {
-    const deserializedArgs = await this.deserializeArguments(
-      args,
-      rpcDriverClassName,
-    )
-    const { adapterConfig, sessionId, regions } = deserializedArgs
-    const dataAdapter = (
-      await getAdapter(this.pluginManager, sessionId, adapterConfig)
-    ).dataAdapter as BaseFeatureDataAdapter
+    const pm = this.pluginManager
+    const deArgs = await this.deserializeArguments(args, rpcDriverClassName)
+    const { adapterConfig, sessionId, regions } = deArgs
+    const dataAdapter = (await getAdapter(pm, sessionId, adapterConfig))
+      .dataAdapter as BaseFeatureDataAdapter
 
     const features = dataAdapter.getFeaturesInMultipleRegions(regions)
     const featuresArray = await features.pipe(toArray()).toPromise()

package/src/PileupRenderer/{PileupRenderer.tsx → PileupRenderer.ts}

@@ -178,9 +178,9 @@ export default class PileupRenderer extends BoxRendererType {
 
     // Expand the start and end of feature when softclipping enabled
     if (showSoftClip) {
-      const mismatches = feature.get('mismatches') as Mismatch[]
+      const mismatches = feature.get('mismatches') as Mismatch[] | undefined
       const seq = feature.get('seq') as string
-      if (seq) {
+      if (seq && mismatches) {
         for (let i = 0; i < mismatches.length; i += 1) {
           const { type, start, cliplen = 0 } = mismatches[i]
           if (type === 'softclip') {
@@ -849,7 +849,7 @@ export default class PileupRenderer extends BoxRendererType {
 
     const pxPerBp = Math.min(1 / bpPerPx, 2)
     const w = Math.max(minSubfeatureWidth, pxPerBp)
-    const mismatches: Mismatch[] = feature.get('mismatches')
+    const mismatches = feature.get('mismatches') as Mismatch[] | undefined
     const heightLim = charHeight - 2
 
     // extraHorizontallyFlippedOffset is used to draw interbase items, which
@@ -858,6 +858,10 @@ export default class PileupRenderer extends BoxRendererType {
       ? 1 / bpPerPx + 1
       : -1
 
+    if (!mismatches) {
+      return
+    }
+
     // two pass rendering: first pass, draw all the mismatches except wide
     // insertion markers
     for (let i = 0; i < mismatches.length; i += 1) {
@@ -1052,7 +1056,7 @@ export default class PileupRenderer extends BoxRendererType {
     const { regions, bpPerPx } = renderArgs
     const [region] = regions
     const minFeatWidth = readConfObject(config, 'minSubfeatureWidth')
-    const mismatches: Mismatch[] = feature.get('mismatches')
+    const mismatches = feature.get('mismatches') as Mismatch[] | undefined
     const seq = feature.get('seq')
     const { charWidth, charHeight } = this.getCharWidthHeight()
     const { bases } = theme.palette
@@ -1065,59 +1069,49 @@ export default class PileupRenderer extends BoxRendererType {
     }
 
     // Display all bases softclipped off in lightened colors
-    if (seq) {
-      mismatches
-        .filter(mismatch => mismatch.type === 'softclip')
-        .forEach(mismatch => {
-          const softClipLength = mismatch.cliplen || 0
-          const s = feature.get('start')
-          const softClipStart =
-            mismatch.start === 0 ? s - softClipLength : s + mismatch.start
-
-          for (let k = 0; k < softClipLength; k += 1) {
-            const base = seq.charAt(k + mismatch.start)
-
-            // If softclip length+start is longer than sequence, no need to
-            // continue showing base
-            if (!base) {
-              return
-            }
-
-            const [softClipLeftPx, softClipRightPx] = bpSpanPx(
-              softClipStart + k,
-              softClipStart + k + 1,
-              region,
-              bpPerPx,
-            )
-            const softClipWidthPx = Math.max(
-              minFeatWidth,
-              Math.abs(softClipLeftPx - softClipRightPx),
-            )
+    if (!(seq && mismatches)) {
+      return
+    }
+    mismatches
+      .filter(mismatch => mismatch.type === 'softclip')
+      .forEach(mismatch => {
+        const len = mismatch.cliplen || 0
+        const s = feature.get('start')
+        const start = mismatch.start === 0 ? s - len : s + mismatch.start
+
+        for (let k = 0; k < len; k += 1) {
+          const base = seq.charAt(k + mismatch.start)
+
+          // If softclip length+start is longer than sequence, no need to
+          // continue showing base
+          if (!base) {
+            return
+          }
 
-            // Black accounts for IUPAC ambiguity code bases such as N that
-            // show in soft clipping
-            const baseColor = colorForBase[base] || '#000000'
-            ctx.fillStyle = baseColor
-            fillRect(
-              ctx,
-              softClipLeftPx,
-              topPx,
-              softClipWidthPx,
-              heightPx,
-              canvasWidth,
-            )
+          const [leftPx, rightPx] = bpSpanPx(
+            start + k,
+            start + k + 1,
+            region,
+            bpPerPx,
+          )
+          const widthPx = Math.max(minFeatWidth, rightPx - leftPx)
 
-            if (softClipWidthPx >= charWidth && heightPx >= charHeight - 5) {
-              ctx.fillStyle = theme.palette.getContrastText(baseColor)
-              ctx.fillText(
-                base,
-                softClipLeftPx + (softClipWidthPx - charWidth) / 2 + 1,
-                topPx + heightPx,
-              )
-            }
+          // Black accounts for IUPAC ambiguity code bases such as N that
+          // show in soft clipping
+          const baseColor = colorForBase[base] || '#000000'
+          ctx.fillStyle = baseColor
+          fillRect(ctx, leftPx, topPx, widthPx, heightPx, canvasWidth)
+
+          if (widthPx >= charWidth && heightPx >= charHeight - 5) {
+            ctx.fillStyle = theme.palette.getContrastText(baseColor)
+            ctx.fillText(
+              base,
+              leftPx + (widthPx - charWidth) / 2 + 1,
+              topPx + heightPx,
+            )
           }
-        })
-    }
+        }
+      })
   }
 
   makeImageData({

package/src/PileupRenderer/configSchema.ts

@@ -28,7 +28,7 @@ const PileupRenderer = ConfigurationSchema(
       model: types.enumeration('orientationType', ['fr', 'rf', 'ff']),
       defaultValue: 'fr',
       description:
-        'read sequencer orienation. fr is normal "reads pointing at each other ---> <--- while some other sequencers can use other options',
+        'read sequencer orientation. fr is normal "reads pointing at each other ---> <--- while some other sequencers can use other options',
     },
     /**
      * #slot

package/src/PileupRenderer/index.ts

@@ -4,13 +4,12 @@ import ReactComponent from './components/PileupRendering'
 import configSchema from './configSchema'
 
 export default function register(pluginManager: PluginManager) {
-  pluginManager.addRendererType(
-    () =>
-      new PileupRenderer({
-        name: 'PileupRenderer',
-        ReactComponent,
-        configSchema,
-        pluginManager,
-      }),
-  )
+  pluginManager.addRendererType(() => {
+    return new PileupRenderer({
+      name: 'PileupRenderer',
+      ReactComponent,
+      configSchema,
+      pluginManager,
+    })
+  })
 }