@jbrowse/plugin-alignments 1.7.8 → 1.7.11

package/src/AlignmentsFeatureDetail/index.ts

@@ -1,30 +1,20 @@
 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'
+import { stateModelFactory as baseModelFactory } from '@jbrowse/core/BaseFeatureWidget'
 
 const configSchema = ConfigurationSchema('AlignmentsFeatureWidget', {})
 
 export function stateModelFactory(pluginManager: PluginManager) {
-  return types
-    .model('AlignmentsFeatureWidget', {
-      id: ElementId,
+  const baseModel = baseModelFactory(pluginManager)
+  return types.compose(
+    baseModel,
+    types.model('AlignmentsFeatureWidget', {
       type: types.literal('AlignmentsFeatureWidget'),
-      featureData: types.frozen(),
-      view: types.safeReference(
-        pluginManager.pluggableMstType('view', 'stateModel'),
-      ),
-    })
-    .actions(self => ({
-      setFeatureData(data: unknown) {
-        self.featureData = data
-      },
-      clearFeatureData() {
-        self.featureData = undefined
-      },
-    }))
+    }),
+  )
 }
 
 export default function register(pluginManager: PluginManager) {

package/src/BamAdapter/MismatchParser.ts

@@ -10,6 +10,7 @@ export interface Mismatch {
   cliplen?: number
 }
 const mdRegex = new RegExp(/(\d+|\^[a-z]+|[a-z])/gi)
+const modificationRegex = new RegExp(/([A-Z])([-+])([^,.?]+)([.?])?/)
 export function parseCigar(cigar: string) {
   return (cigar || '').split(/([MIDNSHPX=])/)
 }
@@ -38,6 +39,7 @@ export function cigarToMismatches(
               start: roffset + j,
               type: 'mismatch',
               base: seq[soffset + j],
+              altbase: ref[roffset + j],
               length: 1,
             })
           }
@@ -273,7 +275,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(modificationRegex)
     if (!matches) {
       throw new Error('bad format for MM tag')
     }
@@ -328,7 +330,7 @@ export function getModificationTypes(mm: string) {
     .map(mod => {
       const [basemod] = mod.split(',')
 
-      const matches = basemod.match(/([A-Z])([-+])([^,]+)/)
+      const matches = basemod.match(modificationRegex)
       if (!matches) {
         throw new Error('bad format for MM tag')
       }

package/src/LinearPileupDisplay/model.ts

@@ -1,5 +1,9 @@
 import { lazy } from 'react'
+import { autorun, observable } from 'mobx'
+import { cast, types, addDisposer, getEnv, Instance } from 'mobx-state-tree'
+import copy from 'copy-to-clipboard'
 import {
+  AnyConfigurationModel,
   ConfigurationReference,
   readConfObject,
   getConf,
@@ -13,26 +17,25 @@ import {
   Feature,
 } from '@jbrowse/core/util'
 
-import VisibilityIcon from '@material-ui/icons/Visibility'
-import { ContentCopy as ContentCopyIcon } from '@jbrowse/core/ui/Icons'
 import {
   LinearGenomeViewModel,
   BaseLinearDisplay,
 } from '@jbrowse/plugin-linear-genome-view'
-import { cast, types, addDisposer, getEnv, Instance } from 'mobx-state-tree'
-import copy from 'copy-to-clipboard'
+
+// icons
+import VisibilityIcon from '@material-ui/icons/Visibility'
+import { ContentCopy as ContentCopyIcon } from '@jbrowse/core/ui/Icons'
 import MenuOpenIcon from '@material-ui/icons/MenuOpen'
 import SortIcon from '@material-ui/icons/Sort'
 import PaletteIcon from '@material-ui/icons/Palette'
 import FilterListIcon from '@material-ui/icons/ClearAll'
 
-import { autorun, observable } from 'mobx'
-import { AnyConfigurationModel } from '@jbrowse/core/configuration/configurationSchema'
+// locals
 import { LinearPileupDisplayConfigModel } from './configSchema'
 import LinearPileupDisplayBlurb from './components/LinearPileupDisplayBlurb'
-
 import { getUniqueTagValues, getUniqueModificationValues } from '../shared'
 
+// async
 const ColorByTagDlg = lazy(() => import('./components/ColorByTag'))
 const FilterByTagDlg = lazy(() => import('./components/FilterByTag'))
 const SortByTagDlg = lazy(() => import('./components/SortByTag'))
@@ -94,6 +97,7 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
     .volatile(() => ({
       colorTagMap: observable.map<string, string>({}),
       modificationTagMap: observable.map<string, string>({}),
+      featureUnderMouseVolatile: undefined as undefined | Feature,
       ready: false,
     }))
     .actions(self => ({
@@ -128,7 +132,9 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
       },
 
       updateColorTagMap(uniqueTag: string[]) {
-        // pale color scheme https://cran.r-project.org/web/packages/khroma/vignettes/tol.html e.g. "tol_light"
+        // pale color scheme
+        // https://cran.r-project.org/web/packages/khroma/vignettes/tol.html
+        // e.g. "tol_light"
         const colorPalette = [
           '#BBCCEE',
           'pink',
@@ -150,6 +156,9 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
           }
         })
       },
+      setFeatureUnderMouse(feat?: Feature) {
+        self.featureUnderMouseVolatile = feat
+      },
     }))
     .actions(self => ({
       afterAttach() {
@@ -226,6 +235,48 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
             { delay: 1000 },
           ),
         )
+
+        // autorun synchronizes featureUnderMouse with featureIdUnderMouse
+        addDisposer(
+          self,
+          autorun(async () => {
+            const session = getSession(self)
+            try {
+              const featureId = self.featureIdUnderMouse
+              if (self.featureUnderMouse?.id() !== featureId) {
+                if (!featureId) {
+                  self.setFeatureUnderMouse(undefined)
+                } else {
+                  const sessionId = getRpcSessionId(self)
+                  const view = getContainingView(self)
+                  const { feature } = (await session.rpcManager.call(
+                    sessionId,
+                    'CoreGetFeatureDetails',
+                    {
+                      featureId,
+                      sessionId,
+                      layoutId: view.id,
+                      rendererType: 'PileupRenderer',
+                    },
+                  )) as { feature: unknown }
+
+                  // check featureIdUnderMouse is still the same as the
+                  // feature.id that was returned e.g. that the user hasn't
+                  // moused over to a new position during the async operation
+                  // above
+                  // @ts-ignore
+                  if (self.featureIdUnderMouse === feature.uniqueId) {
+                    // @ts-ignore
+                    self.setFeatureUnderMouse(new SimpleFeature(feature))
+                  }
+                }
+              }
+            } catch (e) {
+              console.error(e)
+              session.notify(`${e}`, 'error')
+            }
+          }),
+        )
       },
       selectFeature(feature: Feature) {
         const session = getSession(self)
@@ -337,6 +388,9 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
           ? self.mismatchAlpha
           : readConfObject(this.rendererConfig, 'mismatchAlpha')
       },
+      get featureUnderMouse() {
+        return self.featureUnderMouseVolatile
+      },
     }))
     .views(self => {
       const {
@@ -395,6 +449,8 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
             colorBy,
             filterBy,
             rpcDriverName,
+            currBpPerPx,
+            ready,
           } = self
 
           const superProps = superRenderProps()
@@ -403,8 +459,8 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
             ...superProps,
             notReady:
               superProps.notReady ||
-              !self.ready ||
-              (sortedBy && self.currBpPerPx !== view.bpPerPx),
+              !ready ||
+              (sortedBy && currBpPerPx !== view.bpPerPx),
             rpcDriverName,
             displayModel: self,
             sortedBy,
@@ -414,7 +470,7 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
             modificationTagMap: JSON.parse(JSON.stringify(modificationTagMap)),
             showSoftClip: self.showSoftClipping,
             config: self.rendererConfig,
-            async onFeatureClick(_: unknown, featureId: string | undefined) {
+            async onFeatureClick(_: unknown, featureId?: string) {
               const session = getSession(self)
               const { rpcManager } = session
               try {
@@ -444,14 +500,12 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
                 session.notify(`${e}`)
               }
             },
+
             onClick() {
               self.clearFeatureSelection()
             },
             // similar to click but opens a menu with further options
-            async onFeatureContextMenu(
-              _: unknown,
-              featureId: string | undefined,
-            ) {
+            async onFeatureContextMenu(_: unknown, featureId?: string) {
               const session = getSession(self)
               const { rpcManager } = session
               try {
@@ -507,19 +561,17 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
               disabled: self.showSoftClipping,
               subMenu: [
                 ...['Start location', 'Read strand', 'Base pair'].map(
-                  option => {
-                    return {
-                      label: option,
-                      onClick: () => self.setSortedBy(option),
-                    }
-                  },
+                  option => ({
+                    label: option,
+                    onClick: () => self.setSortedBy(option),
+                  }),
                 ),
                 {
                   label: 'Sort by tag...',
                   onClick: () => {
-                    getSession(self).queueDialog(doneCallback => [
+                    getSession(self).queueDialog(handleClose => [
                       SortByTagDlg,
-                      { model: self, handleClose: doneCallback },
+                      { model: self, handleClose },
                     ])
                   },
                 },

package/src/LinearSNPCoverageDisplay/components/Tooltip.tsx

@@ -7,37 +7,51 @@ import { Tooltip } from '@jbrowse/plugin-wiggle'
 type Count = {
   [key: string]: {
     total: number
+    '-1': number
+    '0': number
+    '1': number
   }
 }
 
 type SNPInfo = {
-  ref: Count
   cov: Count
   lowqual: Count
   noncov: Count
   delskips: Count
+  refbase: string
   total: number
+  ref: number
+  all: number
   '-1': number
   '0': number
   '1': number
 }
 
 const en = (n: number) => n.toLocaleString('en-US')
+const toP = (s = 0) => +(+s).toFixed(1)
+const pct = (n: number, total: number) => `${toP((n / (total || 1)) * 100)}%`
 
 const TooltipContents = React.forwardRef(
-  ({ feature }: { feature: Feature }, ref: any) => {
+  ({ feature }: { feature: Feature }, reactRef: any) => {
     const start = feature.get('start')
     const end = feature.get('end')
     const name = feature.get('refName')
-    const info = feature.get('snpinfo') as SNPInfo
+    const {
+      refbase,
+      all,
+      total,
+      ref,
+      '-1': rn1,
+      '1': r1,
+      '0': r0,
+      ...info
+    } = feature.get('snpinfo') as SNPInfo
     const loc = [name, start === end ? en(start) : `${en(start)}..${en(end)}`]
       .filter(f => !!f)
       .join(':')
 
-    const total = info?.total
-
     return (
-      <div ref={ref}>
+      <div ref={reactRef}>
         <table>
           <caption>{loc}</caption>
           <thead>
@@ -52,37 +66,37 @@ const TooltipContents = React.forwardRef(
           <tbody>
             <tr>
               <td>Total</td>
-              <td>{info.total}</td>
+              <td>{all}</td>
             </tr>
             <tr>
-              <td>REF</td>
-              <td>{info.ref}</td>
+              <td>REF {refbase ? `(${refbase.toUpperCase()})` : ''}</td>
+              <td>{ref}</td>
+              <td>{pct(ref, all)}</td>
               <td>
-                {info['-1'] ? `${info['-1']}(-)` : ''}
-                {info['1'] ? `${info['1']}(+)` : ''}
+                {rn1 ? `${rn1}(-)` : ''}
+                {r1 ? `${r1}(+)` : ''}
               </td>
               <td />
             </tr>
 
-            {Object.entries(info).map(([key, entry]) =>
-              Object.entries(entry).map(([base, score]) => (
-                <tr key={base}>
-                  <td>{base.toUpperCase()}</td>
-                  <td>{score.total}</td>
-                  <td>
-                    {base === 'total' || base === 'skip'
-                      ? '---'
-                      : `${Math.floor(
-                          (score.total / (total || score.total || 1)) * 100,
-                        )}%`}
-                  </td>
-                  <td>
-                    {score['-1'] ? `${score['-1']}(-)` : ''}
-                    {score['1'] ? `${score['1']}(+)` : ''}
-                  </td>
-                  <td>{key}</td>
-                </tr>
-              )),
+            {Object.entries(info as unknown as Record<string, Count>).map(
+              ([key, entry]) =>
+                Object.entries(entry).map(([base, score]) => (
+                  <tr key={base}>
+                    <td>{base.toUpperCase()}</td>
+                    <td>{score.total}</td>
+                    <td>
+                      {base === 'total' || base === 'skip'
+                        ? '---'
+                        : pct(score.total, all)}
+                    </td>
+                    <td>
+                      {score['-1'] ? `${score['-1']}(-)` : ''}
+                      {score['1'] ? `${score['1']}(+)` : ''}
+                    </td>
+                    <td>{key}</td>
+                  </tr>
+                )),
             )}
           </tbody>
         </table>