@jbrowse/plugin-alignments 1.5.0 → 1.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-alignments",
-  "version": "1.5.0",
+  "version": "1.5.4",
   "description": "JBrowse 2 alignments adapters, tracks, etc.",
   "keywords": [
     "jbrowse",
@@ -35,14 +35,14 @@
     "useSrc": "node ../../scripts/useSrc.js"
   },
   "dependencies": {
-    "@gmod/bam": "^1.1.8",
+    "@gmod/bam": "^1.1.9",
     "@gmod/cram": "^1.5.9",
     "@material-ui/icons": "^4.9.1",
     "abortable-promise-cache": "^1.1.3",
     "color": "^3.1.2",
     "copy-to-clipboard": "^3.3.1",
     "fast-deep-equal": "^3.1.3",
-    "generic-filehandle": "^2.2.0",
+    "generic-filehandle": "^2.2.2",
     "json-stable-stringify": "^1.0.1",
     "react-d3-axis": "^0.1.2"
   },
@@ -61,5 +61,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "542025578a39bd170c8a166f2568ee7edbd54072"
+  "gitHead": "0c398214590969168694b4ed8e20b595178b9efd"
 }

package/src/AlignmentsFeatureDetail/__snapshots__/index.test.js.snap

@@ -147,6 +147,7 @@ exports[`open up a widget 1`] = `
               >
                 <div
                   class="makeStyles-fieldName"
+                  style="width: 96px;"
                 >
                   seq
                 </div>
@@ -163,6 +164,7 @@ exports[`open up a widget 1`] = `
               >
                 <div
                   class="makeStyles-fieldName"
+                  style="width: 96px;"
                 >
                   score
                 </div>
@@ -179,6 +181,7 @@ exports[`open up a widget 1`] = `
               >
                 <div
                   class="makeStyles-fieldName"
+                  style="width: 96px;"
                 >
                   qual
                 </div>
@@ -205,6 +208,7 @@ exports[`open up a widget 1`] = `
               >
                 <div
                   class="makeStyles-fieldName"
+                  style="width: 96px;"
                 >
                   MQ
                 </div>
@@ -221,6 +225,7 @@ exports[`open up a widget 1`] = `
               >
                 <div
                   class="makeStyles-fieldName"
+                  style="width: 96px;"
                 >
                   CIGAR
                 </div>
@@ -237,6 +242,7 @@ exports[`open up a widget 1`] = `
               >
                 <div
                   class="makeStyles-fieldName"
+                  style="width: 96px;"
                 >
                   length_on_ref
                 </div>
@@ -253,6 +259,7 @@ exports[`open up a widget 1`] = `
               >
                 <div
                   class="makeStyles-fieldName"
+                  style="width: 96px;"
                 >
                   template_length
                 </div>
@@ -269,6 +276,7 @@ exports[`open up a widget 1`] = `
               >
                 <div
                   class="makeStyles-fieldName"
+                  style="width: 96px;"
                 >
                   seq_length
                 </div>

package/src/AlignmentsFeatureDetail/{index.js → index.ts}

@@ -1,10 +1,13 @@
+import { lazy } from 'react'
+import PluginManager from '@jbrowse/core/PluginManager'
 import { ConfigurationSchema } from '@jbrowse/core/configuration'
 import { ElementId } from '@jbrowse/core/util/types/mst'
 import { types } from 'mobx-state-tree'
+import WidgetType from '@jbrowse/core/pluggableElementTypes/WidgetType'
 
 const configSchema = ConfigurationSchema('AlignmentsFeatureWidget', {})
 
-export default function stateModelFactory(pluginManager) {
+export function stateModelFactory(pluginManager: PluginManager) {
   return types
     .model('AlignmentsFeatureWidget', {
       id: ElementId,
@@ -15,7 +18,7 @@ export default function stateModelFactory(pluginManager) {
       ),
     })
     .actions(self => ({
-      setFeatureData(data) {
+      setFeatureData(data: unknown) {
         self.featureData = data
       },
       clearFeatureData() {
@@ -24,4 +27,17 @@ export default function stateModelFactory(pluginManager) {
     }))
 }
 
-export { configSchema, stateModelFactory }
+export default function register(pluginManager: PluginManager) {
+  pluginManager.addWidgetType(
+    () =>
+      new WidgetType({
+        name: 'AlignmentsFeatureWidget',
+        heading: 'Feature details',
+        configSchema,
+        stateModel: stateModelFactory(pluginManager),
+        ReactComponent: lazy(() => import('./AlignmentsFeatureDetail')),
+      }),
+  )
+}
+
+export { configSchema }

package/src/AlignmentsTrack/index.ts

@@ -0,0 +1,36 @@
+import PluginManager from '@jbrowse/core/PluginManager'
+import TrackType from '@jbrowse/core/pluggableElementTypes/TrackType'
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+import {
+  createBaseTrackConfig,
+  createBaseTrackModel,
+} from '@jbrowse/core/pluggableElementTypes/models'
+function configSchemaFactory(pluginManager: PluginManager) {
+  return ConfigurationSchema(
+    'AlignmentsTrack',
+    {},
+    { baseConfiguration: createBaseTrackConfig(pluginManager) },
+  )
+}
+export default function register(pluginManager: PluginManager) {
+  pluginManager.addTrackType(() => {
+    const configSchema = configSchemaFactory(pluginManager)
+    const track = new TrackType({
+      name: 'AlignmentsTrack',
+      configSchema,
+      stateModel: createBaseTrackModel(
+        pluginManager,
+        'AlignmentsTrack',
+        configSchema,
+      ),
+    })
+    const linearAlignmentsDisplay = pluginManager.getDisplayType(
+      'LinearAlignmentsDisplay',
+    )
+    // Add LinearAlignmentsDisplay here so that it has priority over the other
+    // linear displays (defaults to order the displays are added, but we have
+    // to add the Pileup and SNPCoverage displays first).
+    track.addDisplayType(linearAlignmentsDisplay)
+    return track
+  })
+}

package/src/BamAdapter/BamSlightlyLazyFeature.ts

@@ -15,17 +15,11 @@ import {
 import BamAdapter from './BamAdapter'
 
 export default class BamSlightlyLazyFeature implements Feature {
-  private record: BamRecord
-
-  private adapter: BamAdapter
-
-  private ref?: string
-
-  constructor(record: BamRecord, adapter: BamAdapter, ref?: string) {
-    this.record = record
-    this.adapter = adapter
-    this.ref = ref
-  }
+  constructor(
+    private record: BamRecord,
+    private adapter: BamAdapter,
+    private ref?: string,
+  ) {}
 
   _get_name() {
     return this.record.get('name')
@@ -153,16 +147,12 @@ export default class BamSlightlyLazyFeature implements Feature {
   }
 
   toJSON(): SimpleFeatureSerialized {
-    const tags = Object.fromEntries(
-      this.tags()
-        .map(t => {
-          return [t, this.get(t)]
-        })
-        .filter(elt => elt[1] !== undefined),
-    )
-
     return {
-      ...tags,
+      ...Object.fromEntries(
+        this.tags()
+          .map(t => [t, this.get(t)])
+          .filter(elt => elt[1] !== undefined),
+      ),
       uniqueId: this.id(),
     }
   }
@@ -201,24 +191,18 @@ export default class BamSlightlyLazyFeature implements Feature {
 
     // parse the CIGAR tag if it has one
     const cigarString = this.get(cigarAttributeName)
+    const seq = this.get('seq')
+    const qual = this.qualRaw()
     if (cigarString) {
       cigarOps = parseCigar(cigarString)
-      mismatches = mismatches.concat(
-        cigarToMismatches(cigarOps, this.get('seq'), this.qualRaw()),
-      )
+      mismatches = mismatches.concat(cigarToMismatches(cigarOps, seq, qual))
     }
 
     // now let's look for CRAM or MD mismatches
     const mdString = this.get(mdAttributeName)
     if (mdString) {
       mismatches = mismatches.concat(
-        mdToMismatches(
-          mdString,
-          cigarOps,
-          mismatches,
-          this.get('seq'),
-          this.qualRaw(),
-        ),
+        mdToMismatches(mdString, cigarOps, mismatches, seq, qual),
       )
     }
 

package/src/BamAdapter/MismatchParser.test.ts

@@ -498,3 +498,23 @@ test('getModificationPositions', () => {
   )
   expect(positions[0]).toEqual({ type: 'm', positions: [6, 17, 20, 31, 34] })
 })
+
+// ? means "modification status of the skipped bases provided."
+test('getModificationPositions with unknown (?)', () => {
+  const positions = getModificationPositions(
+    'C+m?,2,2,1,4,1',
+    'AGCTCTCCAGAGTCGNACGCCATYCGCGCGCCACCA',
+    1,
+  )
+  expect(positions[0]).toEqual({ type: 'm', positions: [6, 17, 20, 31, 34] })
+})
+
+// . means "modification status of the skipped bases is low probability"
+test('getModificationPositions with unknown (.)', () => {
+  const positions = getModificationPositions(
+    'C+m.,2,2,1,4,1',
+    'AGCTCTCCAGAGTCGNACGCCATYCGCGCGCCACCA',
+    1,
+  )
+  expect(positions[0]).toEqual({ type: 'm', positions: [6, 17, 20, 31, 34] })
+})

package/src/BamAdapter/MismatchParser.ts

@@ -153,15 +153,16 @@ export function mdToMismatches(
   const md = mdstring.match(/(\d+|\^[a-z]+|[a-z])/gi) || []
   for (let i = 0; i < md.length; i++) {
     const token = md[i]
-    if (token.match(/^\d/)) {
-      curr.start += parseInt(token, 10)
-    } else if (token.match(/^\^/)) {
+    const num = +token
+    if (!Number.isNaN(num)) {
+      curr.start += num
+    } else if (token.startsWith('^')) {
       curr.length = token.length - 1
       curr.base = '*'
       curr.type = 'deletion'
       curr.seq = token.substring(1)
       nextRecord()
-    } else if (token.match(/^[a-z]/i)) {
+    } else {
       // mismatch
       for (let j = 0; j < token.length; j += 1) {
         curr.length = 1
@@ -328,7 +329,7 @@ export function getModificationPositions(
       const [basemod, ...skips] = mod.split(',')
 
       // regexes based on parse_mm.pl from hts-specs
-      const matches = basemod.match(/([A-Z])([-+])([^,]+)/)
+      const matches = basemod.match(/([A-Z])([-+])([^,.?]+)([.?])?/)
       if (!matches) {
         throw new Error('bad format for MM tag')
       }

package/src/BamAdapter/index.ts

@@ -1,8 +1,14 @@
+import PluginManager from '@jbrowse/core/PluginManager'
+import AdapterType from '@jbrowse/core/pluggableElementTypes/AdapterType'
 import configSchema from './configSchema'
 
-export default (/* pluginManager: PluginManager */) => {
-  return {
-    configSchema,
-    getAdapterClass: () => import('./BamAdapter').then(r => r.default),
-  }
+export default (pluginManager: PluginManager) => {
+  pluginManager.addAdapterType(
+    () =>
+      new AdapterType({
+        name: 'BamAdapter',
+        configSchema,
+        getAdapterClass: () => import('./BamAdapter').then(r => r.default),
+      }),
+  )
 }

package/src/CramAdapter/CramSlightlyLazyFeature.ts

@@ -18,14 +18,10 @@ export interface Mismatch {
 }
 
 export default class CramSlightlyLazyFeature implements Feature {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private record: any
-
   private _store: CramAdapter
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  constructor(record: any, store: CramAdapter) {
-    this.record = record
+  constructor(private record: any, store: CramAdapter) {
     this._store = store
   }
 

package/src/CramAdapter/index.ts

@@ -1,9 +1,16 @@
 import PluginManager from '@jbrowse/core/PluginManager'
+import AdapterType from '@jbrowse/core/pluggableElementTypes/AdapterType'
+
+// locals
 import configSchemaF from './configSchema'
 
 export default (pluginManager: PluginManager) => {
-  return {
-    configSchema: pluginManager.load(configSchemaF),
-    getAdapterClass: () => import('./CramAdapter').then(r => r.default),
-  }
+  pluginManager.addAdapterType(
+    () =>
+      new AdapterType({
+        name: 'CramAdapter',
+        configSchema: pluginManager.load(configSchemaF),
+        getAdapterClass: () => import('./CramAdapter').then(r => r.default),
+      }),
+  )
 }

package/src/HtsgetBamAdapter/HtsgetBamAdapter.ts

@@ -1,4 +1,4 @@
-import { HtsgetFile } from '@gmod/bam'
+import { BamFile, HtsgetFile } from '@gmod/bam'
 import { readConfObject } from '@jbrowse/core/configuration'
 import { BaseFeatureDataAdapter } from '@jbrowse/core/data_adapters/BaseAdapter'
 import BamAdapter from '../BamAdapter/BamAdapter'
@@ -11,7 +11,7 @@ export default class HtsgetBamAdapter extends BamAdapter {
       const bam = new HtsgetFile({
         baseUrl: htsgetBase,
         trackId: htsgetTrackId,
-      })
+      }) as unknown as BamFile
 
       const adapterConfig = readConfObject(this.config, 'sequenceAdapter')
       if (adapterConfig && this.getSubAdapter) {

package/src/HtsgetBamAdapter/index.ts

@@ -1,8 +1,21 @@
 import configSchema from './configSchema'
+import PluginManager from '@jbrowse/core/PluginManager'
+import AdapterType from '@jbrowse/core/pluggableElementTypes/AdapterType'
 
-export default (/* pluginManager: PluginManager */) => {
-  return {
-    configSchema,
-    getAdapterClass: () => import('./HtsgetBamAdapter').then(r => r.default),
-  }
+export default (pluginManager: PluginManager) => {
+  pluginManager.addAdapterType(
+    () =>
+      new AdapterType({
+        name: 'HtsgetBamAdapter',
+        adapterMetadata: {
+          category: null,
+          hiddenFromGUI: true,
+          displayName: null,
+          description: null,
+        },
+        configSchema,
+        getAdapterClass: () =>
+          import('./HtsgetBamAdapter').then(r => r.default),
+      }),
+  )
 }

package/src/LinearAlignmentsDisplay/index.ts

@@ -1,3 +1,20 @@
-export { default as configSchemaFactory } from './models/configSchema'
-export { default as modelFactory } from './models/model'
-export { default as ReactComponent } from './components/AlignmentsDisplay'
+import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType'
+import PluginManager from '@jbrowse/core/PluginManager'
+// locals
+import configSchemaFactory from './models/configSchema'
+import modelFactory from './models/model'
+import ReactComponent from './components/AlignmentsDisplay'
+
+export default function (pluginManager: PluginManager) {
+  pluginManager.addDisplayType(() => {
+    const configSchema = configSchemaFactory(pluginManager)
+    return new DisplayType({
+      name: 'LinearAlignmentsDisplay',
+      configSchema,
+      stateModel: modelFactory(pluginManager, configSchema),
+      trackType: 'AlignmentsTrack',
+      viewType: 'LinearGenomeView',
+      ReactComponent,
+    })
+  })
+}

package/src/LinearAlignmentsDisplay/models/configSchema.test.js

@@ -1,4 +1,3 @@
-import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType'
 import Plugin from '@jbrowse/core/Plugin'
 import PluginManager from '@jbrowse/core/PluginManager'
 import BoxRendererType from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType'
@@ -6,24 +5,10 @@ import {
   svgFeatureRendererConfigSchema,
   SvgFeatureRendererReactComponent,
 } from '@jbrowse/plugin-svg'
-import { BaseLinearDisplayComponent } from '@jbrowse/plugin-linear-genome-view'
-import { LinearWiggleDisplayReactComponent } from '@jbrowse/plugin-wiggle'
-import PileupRenderer, {
-  configSchema as pileupRendererConfigSchema,
-  ReactComponent as PileupRendererReactComponent,
-} from '../../PileupRenderer'
-import SNPCoverageRenderer, {
-  configSchema as snpCoverageRendererConfigSchema,
-  ReactComponent as SNPCoverageRendererReactComponent,
-} from '../../SNPCoverageRenderer'
-import {
-  configSchemaFactory as linearPileupDisplayConfigSchemaFactory,
-  modelFactory as linearPileupDisplayModelFactory,
-} from '../../LinearPileupDisplay'
-import {
-  configSchemaFactory as linearSNPCoverageDisplayConfigSchemaFactory,
-  modelFactory as linearSNPCoverageDisplayModelFactory,
-} from '../../LinearSNPCoverageDisplay'
+import PileupRenderer from '../../PileupRenderer'
+import SNPCoverageRenderer from '../../SNPCoverageRenderer'
+import LinearPileupDisplay from '../../LinearPileupDisplay'
+import LinearSNPCoverageDisplay from '../../LinearSNPCoverageDisplay'
 import configSchemaFactory from './configSchema'
 
 // mock warnings to avoid unnecessary outputs
@@ -37,15 +22,7 @@ afterEach(() => {
 
 class AlignmentsPlugin extends Plugin {
   install(pluginManager) {
-    pluginManager.addRendererType(
-      () =>
-        new PileupRenderer({
-          name: 'PileupRenderer',
-          ReactComponent: PileupRendererReactComponent,
-          configSchema: pileupRendererConfigSchema,
-          pluginManager,
-        }),
-    )
+    PileupRenderer(pluginManager)
 
     pluginManager.addRendererType(
       () =>
@@ -57,46 +34,9 @@ class AlignmentsPlugin extends Plugin {
         }),
     )
 
-    pluginManager.addRendererType(
-      () =>
-        new SNPCoverageRenderer({
-          name: 'SNPCoverageRenderer',
-          ReactComponent: SNPCoverageRendererReactComponent,
-          configSchema: snpCoverageRendererConfigSchema,
-          pluginManager,
-        }),
-    )
-
-    pluginManager.addDisplayType(() => {
-      const configSchema = linearPileupDisplayConfigSchemaFactory(pluginManager)
-      return new DisplayType({
-        name: 'LinearPileupDisplay',
-        configSchema,
-        stateModel: linearPileupDisplayModelFactory(
-          pluginManager,
-          configSchema,
-        ),
-        trackType: 'AlignmentsTrack',
-        viewType: 'LinearGenomeView',
-        ReactComponent: BaseLinearDisplayComponent,
-      })
-    })
-
-    pluginManager.addDisplayType(() => {
-      const configSchema =
-        linearSNPCoverageDisplayConfigSchemaFactory(pluginManager)
-      return new DisplayType({
-        name: 'LinearSNPCoverageDisplay',
-        configSchema,
-        stateModel: linearSNPCoverageDisplayModelFactory(
-          pluginManager,
-          configSchema,
-        ),
-        trackType: 'AlignmentsTrack',
-        viewType: 'LinearGenomeView',
-        ReactComponent: LinearWiggleDisplayReactComponent,
-      })
-    })
+    SNPCoverageRenderer(pluginManager)
+    LinearPileupDisplay(pluginManager)
+    LinearSNPCoverageDisplay(pluginManager)
   }
 }
 

package/src/LinearPileupDisplay/configSchema.test.js

@@ -5,10 +5,7 @@ import {
   svgFeatureRendererConfigSchema,
   SvgFeatureRendererReactComponent,
 } from '@jbrowse/plugin-svg'
-import PileupRenderer, {
-  configSchema as pileupRendererConfigSchema,
-  ReactComponent as PileupRendererReactComponent,
-} from '../PileupRenderer'
+import PileupRenderer from '../PileupRenderer'
 import configSchemaFactory from './configSchema'
 
 // mock warnings to avoid unnecessary outputs
@@ -22,15 +19,7 @@ afterEach(() => {
 
 class PileupRendererPlugin extends Plugin {
   install(pluginManager) {
-    pluginManager.addRendererType(
-      () =>
-        new PileupRenderer({
-          name: 'PileupRenderer',
-          ReactComponent: PileupRendererReactComponent,
-          configSchema: pileupRendererConfigSchema,
-          pluginManager,
-        }),
-    )
+    PileupRenderer(pluginManager)
   }
 }
 

package/src/LinearPileupDisplay/index.ts

@@ -1,2 +1,19 @@
-export { default as configSchemaFactory } from './configSchema'
-export { default as modelFactory } from './model'
+import configSchemaFactory from './configSchema'
+import modelFactory from './model'
+import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType'
+import PluginManager from '@jbrowse/core/PluginManager'
+import { BaseLinearDisplayComponent } from '@jbrowse/plugin-linear-genome-view'
+
+export default function register(pluginManager: PluginManager) {
+  pluginManager.addDisplayType(() => {
+    const configSchema = configSchemaFactory(pluginManager)
+    return new DisplayType({
+      name: 'LinearPileupDisplay',
+      configSchema,
+      stateModel: modelFactory(configSchema),
+      trackType: 'AlignmentsTrack',
+      viewType: 'LinearGenomeView',
+      ReactComponent: BaseLinearDisplayComponent,
+    })
+  })
+}

package/src/LinearPileupDisplay/model.ts

@@ -19,7 +19,6 @@ import {
 } from '@jbrowse/plugin-linear-genome-view'
 import { cast, types, addDisposer, getEnv, Instance } from 'mobx-state-tree'
 import copy from 'copy-to-clipboard'
-import PluginManager from '@jbrowse/core/PluginManager'
 import { Feature } from '@jbrowse/core/util/simpleFeature'
 import MenuOpenIcon from '@material-ui/icons/MenuOpen'
 import SortIcon from '@material-ui/icons/Sort'
@@ -49,10 +48,7 @@ const rendererTypes = new Map([
 
 type LGV = LinearGenomeViewModel
 
-const stateModelFactory = (
-  pluginManager: PluginManager,
-  configSchema: LinearPileupDisplayConfigModel,
-) =>
+const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
   types
     .compose(
       'LinearPileupDisplay',
@@ -387,21 +383,20 @@ const stateModelFactory = (
 
         get filters() {
           let filters: string[] = []
-          if (self.filterBy) {
-            const { flagInclude, flagExclude } = self.filterBy
-            filters = [
-              `jexl:((get(feature,'flags')&${flagInclude})==${flagInclude}) && !(get(feature,'flags')&${flagExclude})`,
-            ]
-            if (self.filterBy.tagFilter) {
-              const { tag, value } = self.filterBy.tagFilter
-              filters.push(
-                `jexl:"${value}" =='*' ? getTag(feature,"${tag}") != undefined : getTag(feature,"${tag}") == "${value}"`,
-              )
-            }
-            if (self.filterBy.readName) {
-              const { readName } = self.filterBy
-              filters.push(`jexl:get(feature,'name') == "${readName}"`)
-            }
+          const { flagInclude, flagExclude, tagFilter, readName } =
+            self.filterBy
+
+          filters = [
+            `jexl:((get(feature,'flags')&${flagInclude})==${flagInclude}) && !(get(feature,'flags')&${flagExclude})`,
+          ]
+          if (tagFilter) {
+            const { tag, value } = tagFilter
+            filters.push(
+              `jexl:"${value}" =='*' ? getTag(feature,"${tag}") != undefined : getTag(feature,"${tag}") == "${value}"`,
+            )
+          }
+          if (readName) {
+            filters.push(`jexl:get(feature,'name') == "${readName}"`)
           }
           return new SerializableFilterChain({ filters })
         },