@jbrowse/plugin-alignments 1.4.1 → 1.5.2

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/configSchema.ts

@@ -4,12 +4,10 @@ import { types, Instance } from 'mobx-state-tree'
 import PluginManager from '@jbrowse/core/PluginManager'
 
 function PileupConfigFactory(pluginManager: PluginManager) {
-  const PileupRendererConfigSchema = pluginManager.getRendererType(
-    'PileupRenderer',
-  ).configSchema
-  const SvgFeatureRendererConfigSchema = pluginManager.getRendererType(
-    'SvgFeatureRenderer',
-  ).configSchema
+  const PileupRendererConfigSchema =
+    pluginManager.getRendererType('PileupRenderer').configSchema
+  const SvgFeatureRendererConfigSchema =
+    pluginManager.getRendererType('SvgFeatureRenderer').configSchema
 
   // modify config schema to take in a sub coverage display
   return ConfigurationSchema(

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',
@@ -182,12 +178,13 @@ const stateModelFactory = (
                 }
 
                 if (colorBy?.type === 'modifications') {
-                  const uniqueModificationsSet = await getUniqueModificationValues(
-                    self,
-                    getConf(self.parentTrack, ['adapter']),
-                    colorBy,
-                    view.staticBlocks,
-                  )
+                  const uniqueModificationsSet =
+                    await getUniqueModificationValues(
+                      self,
+                      getConf(self.parentTrack, ['adapter']),
+                      colorBy,
+                      view.staticBlocks,
+                    )
                   self.updateModificationColorMap(uniqueModificationsSet)
                 }
 
@@ -216,9 +213,9 @@ const stateModelFactory = (
                 } else {
                   self.setReady(true)
                 }
-              } catch (error) {
-                console.error(error)
-                self.setError(error)
+              } catch (e) {
+                console.error(e)
+                self.setError(e)
               }
             },
             { delay: 1000 },
@@ -244,10 +241,9 @@ const stateModelFactory = (
 
       // uses copy-to-clipboard and generates notification
       copyFeatureToClipboard(feature: Feature) {
-        const copiedFeature = feature.toJSON()
-        delete copiedFeature.uniqueId
+        const { uniqueId, ...rest } = feature.toJSON()
         const session = getSession(self)
-        copy(JSON.stringify(copiedFeature, null, 4))
+        copy(JSON.stringify(rest, null, 4))
         session.notify('Copied to clipboard', 'success')
       },
 
@@ -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 })
         },
@@ -463,10 +458,12 @@ const stateModelFactory = (
                 ),
                 {
                   label: 'Sort by tag...',
-                  onClick: () =>
-                    getSession(self).setDialogComponent(SortByTagDlg, {
-                      model: self,
-                    }),
+                  onClick: () => {
+                    getSession(self).queueDialog((doneCallback: Function) => [
+                      SortByTagDlg,
+                      { model: self, handleClose: doneCallback },
+                    ])
+                  },
                 },
                 {
                   label: 'Clear sort',
@@ -511,9 +508,10 @@ const stateModelFactory = (
                 {
                   label: 'Modifications or methylation',
                   onClick: () => {
-                    getSession(self).setDialogComponent(ModificationsDlg, {
-                      model: self,
-                    })
+                    getSession(self).queueDialog((doneCallback: Function) => [
+                      ModificationsDlg,
+                      { model: self, handleClose: doneCallback },
+                    ])
                   },
                 },
                 {
@@ -531,9 +529,10 @@ const stateModelFactory = (
                 {
                   label: 'Color by tag...',
                   onClick: () => {
-                    getSession(self).setDialogComponent(ColorByTagDlg, {
-                      model: self,
-                    })
+                    getSession(self).queueDialog((doneCallback: Function) => [
+                      ColorByTagDlg,
+                      { model: self, handleClose: doneCallback },
+                    ])
                   },
                 },
               ],
@@ -542,25 +541,28 @@ const stateModelFactory = (
               label: 'Filter by',
               icon: FilterListIcon,
               onClick: () => {
-                getSession(self).setDialogComponent(FilterByTagDlg, {
-                  model: self,
-                })
+                getSession(self).queueDialog((doneCallback: Function) => [
+                  FilterByTagDlg,
+                  { model: self, handleClose: doneCallback },
+                ])
               },
             },
             {
               label: 'Set feature height',
               onClick: () => {
-                getSession(self).setDialogComponent(SetFeatureHeightDlg, {
-                  model: self,
-                })
+                getSession(self).queueDialog((doneCallback: Function) => [
+                  SetFeatureHeightDlg,
+                  { model: self, handleClose: doneCallback },
+                ])
               },
             },
             {
               label: 'Set max height',
               onClick: () => {
-                getSession(self).setDialogComponent(SetMaxHeightDlg, {
-                  model: self,
-                })
+                getSession(self).queueDialog((doneCallback: Function) => [
+                  SetMaxHeightDlg,
+                  { model: self, handleClose: doneCallback },
+                ])
               },
             },
             {

package/src/LinearSNPCoverageDisplay/components/Tooltip.tsx

@@ -11,6 +11,15 @@ type Count = {
   }
 }
 
+type SNPInfo = {
+  ref: Count
+  cov: Count
+  lowqual: Count
+  noncov: Count
+  delskips: Count
+  total: number
+}
+
 const en = (n: number) => n.toLocaleString('en-US')
 
 const TooltipContents = React.forwardRef(
@@ -22,16 +31,8 @@ const TooltipContents = React.forwardRef(
       .filter(f => !!f)
       .join(':')
 
-    const info = feature.get('snpinfo') as {
-      ref: Count
-      cov: Count
-      lowqual: Count
-      noncov: Count
-      delskips: Count
-      total: number
-    }
-
-    const total = info.total
+    const info = feature.get('snpinfo') as SNPInfo
+    const total = info?.total
 
     return (
       <div ref={ref}>
@@ -61,7 +62,7 @@ const TooltipContents = React.forwardRef(
                     <td>{base.toUpperCase()}</td>
                     <td>{score.total}</td>
                     <td>
-                      {base === 'total'
+                      {base === 'total' || base === 'skip'
                         ? '---'
                         : `${Math.floor((score.total / total) * 100)}%`}
                     </td>
@@ -91,7 +92,11 @@ const SNPCoverageTooltip = observer(
     clientMouseCoord: Coord
     clientRect?: ClientRect
   }) => {
-    return <Tooltip TooltipContents={TooltipContents} {...props} />
+    const { model } = props
+    const { featureUnderMouse: feat } = model
+    return feat && feat.get('type') === 'skip' ? null : (
+      <Tooltip TooltipContents={TooltipContents} {...props} />
+    )
   },
 )
 

package/src/LinearSNPCoverageDisplay/index.ts

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

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

@@ -1,9 +1,6 @@
 import Plugin from '@jbrowse/core/Plugin'
 import PluginManager from '@jbrowse/core/PluginManager'
-import SNPCoverageRenderer, {
-  configSchema as snpCoverageRendererConfigSchema,
-  ReactComponent as SNPCoverageRendererReactComponent,
-} from '../../SNPCoverageRenderer' // change renderer
+import SNPCoverageRenderer from '../../SNPCoverageRenderer' // change renderer
 import configSchemaFactory from './configSchema'
 
 // mock warnings to avoid unnecessary outputs
@@ -17,15 +14,7 @@ afterEach(() => {
 // change renderer
 class SNPCoverageRendererPlugin extends Plugin {
   install(pluginManager) {
-    pluginManager.addRendererType(
-      () =>
-        new SNPCoverageRenderer({
-          name: 'SNPCoverageRenderer',
-          ReactComponent: SNPCoverageRendererReactComponent,
-          configSchema: snpCoverageRendererConfigSchema,
-          pluginManager,
-        }),
-    )
+    SNPCoverageRenderer(pluginManager)
   }
 }
 

package/src/LinearSNPCoverageDisplay/models/model.ts

@@ -30,6 +30,7 @@ const stateModelFactory = (
         type: types.literal('LinearSNPCoverageDisplay'),
         drawInterbaseCounts: types.maybe(types.boolean),
         drawIndicators: types.maybe(types.boolean),
+        drawArcs: types.maybe(types.boolean),
         filterBy: types.optional(
           types.model({
             flagInclude: types.optional(types.number, 0),
@@ -98,10 +99,19 @@ const stateModelFactory = (
                 self.drawIndicators === undefined
                   ? configBlob.drawIndicators
                   : self.drawIndicators,
+              drawArcs:
+                self.drawArcs === undefined
+                  ? configBlob.drawArcs
+                  : self.drawArcs,
             },
             getEnv(self),
           )
         },
+        get drawArcsSetting() {
+          return self.drawArcs !== undefined
+            ? self.drawArcs
+            : readConfObject(this.rendererConfig, 'drawArcs')
+        },
         get drawInterbaseCountsSetting() {
           return self.drawInterbaseCounts !== undefined
             ? self.drawInterbaseCounts
@@ -143,6 +153,9 @@ const stateModelFactory = (
       toggleDrawInterbaseCounts() {
         self.drawInterbaseCounts = !self.drawInterbaseCountsSetting
       },
+      toggleDrawArcs() {
+        self.drawArcs = !self.drawArcsSetting
+      },
       afterAttach() {
         addDisposer(
           self,
@@ -217,6 +230,14 @@ const stateModelFactory = (
                 self.toggleDrawInterbaseCounts()
               },
             },
+            {
+              label: 'Draw arcs',
+              type: 'checkbox',
+              checked: self.drawArcsSetting,
+              onClick: () => {
+                self.toggleDrawArcs()
+              },
+            },
           ]
         },
         // The SNPCoverage filters are called twice because the BAM/CRAM
@@ -225,12 +246,8 @@ const stateModelFactory = (
         get filters() {
           let filters: string[] = []
           if (self.filterBy) {
-            const {
-              flagInclude,
-              flagExclude,
-              tagFilter,
-              readName,
-            } = self.filterBy
+            const { flagInclude, flagExclude, tagFilter, readName } =
+              self.filterBy
             filters = [
               `jexl:get(feature,'snpinfo') != undefined ? true : ` +
                 `((get(feature,'flags')&${flagInclude})==${flagInclude}) && ` +

package/src/PileupRPC/rpcMethods.ts

@@ -14,6 +14,7 @@ export class PileupGetGlobalValueForTag extends RpcMethodType {
 
   async serializeArguments(
     args: RenderArgs & { signal?: AbortSignal; statusCallback?: Function },
+    rpcDriverClassName: string,
   ) {
     const { rootModel } = this.pluginManager
     const assemblyManager = rootModel?.session?.assemblyManager
@@ -21,7 +22,9 @@ export class PileupGetGlobalValueForTag extends RpcMethodType {
       throw new Error('no assembly manager available')
     }
 
-    return renameRegionsIfNeeded(assemblyManager, args)
+    const renamedArgs = await renameRegionsIfNeeded(assemblyManager, args)
+
+    return super.serializeArguments(renamedArgs, rpcDriverClassName)
   }
 
   async execute(
@@ -63,6 +66,7 @@ export class PileupGetVisibleModifications extends RpcMethodType {
 
   async serializeArguments(
     args: RenderArgs & { signal?: AbortSignal; statusCallback?: Function },
+    rpcDriverClassName: string,
   ) {
     const { rootModel } = this.pluginManager
     const assemblyManager = rootModel?.session?.assemblyManager
@@ -70,7 +74,9 @@ export class PileupGetVisibleModifications extends RpcMethodType {
       throw new Error('no assembly manager available')
     }
 
-    return renameRegionsIfNeeded(assemblyManager, args)
+    const renamedArgs = await renameRegionsIfNeeded(assemblyManager, args)
+
+    return super.serializeArguments(renamedArgs, rpcDriverClassName)
   }
 
   async execute(