@jbrowse/plugin-alignments 1.7.9 → 2.0.0

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

@@ -39,6 +39,7 @@ export function cigarToMismatches(
               start: roffset + j,
               type: 'mismatch',
               base: seq[soffset + j],
+              altbase: ref[roffset + j],
               length: 1,
             })
           }

package/src/LinearAlignmentsDisplay/components/AlignmentsDisplay.tsx

@@ -2,10 +2,10 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import { getConf } from '@jbrowse/core/configuration'
 import { ResizeHandle } from '@jbrowse/core/ui'
-import { makeStyles } from '@material-ui/core'
+import { makeStyles } from 'tss-react/mui'
 import { AlignmentsDisplayModel } from '../models/model'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   resizeHandle: {
     height: 2,
     position: 'absolute',
@@ -15,7 +15,7 @@ const useStyles = makeStyles(() => ({
 
 function AlignmentsDisplay({ model }: { model: AlignmentsDisplayModel }) {
   const { PileupDisplay, SNPCoverageDisplay, showPileup, showCoverage } = model
-  const classes = useStyles()
+  const { classes } = useStyles()
   const top = SNPCoverageDisplay.height
   return (
     <div

package/src/LinearPileupDisplay/components/ColorByModifications.tsx

@@ -3,18 +3,18 @@ import { observer } from 'mobx-react'
 import { ObservableMap } from 'mobx'
 import {
   Button,
+  CircularProgress,
   Dialog,
   DialogActions,
   DialogContent,
   DialogTitle,
   IconButton,
   Typography,
-  CircularProgress,
-  makeStyles,
-} from '@material-ui/core'
-import CloseIcon from '@material-ui/icons/Close'
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import CloseIcon from '@mui/icons-material/Close'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   closeButton: {
     position: 'absolute',
     right: theme.spacing(1),
@@ -35,7 +35,7 @@ function ModificationTable({
 }: {
   modifications: [string, string][]
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   return (
     <table className={classes.table}>
       <tbody>
@@ -64,7 +64,7 @@ function ColorByTagDlg(props: {
   }
   handleClose: () => void
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const { model, handleClose } = props
   const { colorBy, modificationTagMap } = model
 

package/src/LinearPileupDisplay/components/ColorByTag.tsx

@@ -9,11 +9,11 @@ import {
   IconButton,
   TextField,
   Typography,
-  makeStyles,
-} from '@material-ui/core'
-import CloseIcon from '@material-ui/icons/Close'
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import CloseIcon from '@mui/icons-material/Close'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   root: {
     width: 300,
   },
@@ -29,7 +29,7 @@ function ColorByTagDlg(props: {
   model: { setColorScheme: Function }
   handleClose: () => void
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const { model, handleClose } = props
   const [tag, setTag] = useState('')
   const validTag = tag.match(/^[A-Za-z][A-Za-z0-9]$/)

package/src/LinearPileupDisplay/components/FilterByTag.tsx

@@ -11,12 +11,12 @@ import {
   Paper,
   TextField,
   Typography,
-  makeStyles,
-} from '@material-ui/core'
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 
-import CloseIcon from '@material-ui/icons/Close'
+import CloseIcon from '@mui/icons-material/Close'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   paper: {
     padding: theme.spacing(2),
     margin: theme.spacing(2),
@@ -93,7 +93,7 @@ function FilterByTagDlg(props: {
   handleClose: () => void
 }) {
   const { model, handleClose } = props
-  const classes = useStyles()
+  const { classes } = useStyles()
   const { filterBy } = model
   const [flagInclude, setFlagInclude] = useState(filterBy?.flagInclude)
   const [flagExclude, setFlagExclude] = useState(filterBy?.flagExclude)

package/src/LinearPileupDisplay/components/LinearPileupDisplayBlurb.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { observer } from 'mobx-react'
-import Typography from '@material-ui/core/Typography'
+import Typography from '@mui/material/Typography'
 
 export interface LinearPileupDisplayBlurbProps {
   model: {

package/src/LinearPileupDisplay/components/SetFeatureHeight.tsx

@@ -2,20 +2,20 @@ import React, { useState } from 'react'
 import { observer } from 'mobx-react'
 import {
   Button,
-  TextField,
-  Typography,
-  IconButton,
+  Checkbox,
   Dialog,
   DialogActions,
   DialogContent,
   DialogTitle,
-  Checkbox,
   FormControlLabel,
-  makeStyles,
-} from '@material-ui/core'
-import CloseIcon from '@material-ui/icons/Close'
+  IconButton,
+  TextField,
+  Typography,
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import CloseIcon from '@mui/icons-material/Close'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   closeButton: {
     position: 'absolute',
     right: theme.spacing(1),
@@ -37,7 +37,7 @@ function SetFeatureHeightDlg(props: {
   }
   handleClose: () => void
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const { model, handleClose } = props
   const { featureHeightSetting, noSpacing: noSpacingSetting } = model
   const [height, setHeight] = useState(`${featureHeightSetting}`)

package/src/LinearPileupDisplay/components/SetMaxHeight.tsx

@@ -9,11 +9,11 @@ import {
   IconButton,
   TextField,
   Typography,
-  makeStyles,
-} from '@material-ui/core'
-import CloseIcon from '@material-ui/icons/Close'
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import CloseIcon from '@mui/icons-material/Close'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   root: {
     width: 500,
   },
@@ -36,7 +36,7 @@ function SetMaxHeightDlg(props: {
   handleClose: () => void
 }) {
   const { model, handleClose } = props
-  const classes = useStyles()
+  const { classes } = useStyles()
   const { maxHeight = '' } = model
   const [max, setMax] = useState(`${maxHeight}`)
 

package/src/LinearPileupDisplay/components/SortByTag.tsx

@@ -9,12 +9,12 @@ import {
   IconButton,
   TextField,
   Typography,
-  makeStyles,
-} from '@material-ui/core'
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 
-import CloseIcon from '@material-ui/icons/Close'
+import CloseIcon from '@mui/icons-material/Close'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   root: {
     margin: 0,
     padding: theme.spacing(2),
@@ -31,7 +31,7 @@ function SortByTagDlg(props: {
   model: { setSortedBy: Function }
   handleClose: () => void
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const { model, handleClose } = props
   const [tag, setTag] = useState('')
   const validTag = tag.match(/^[A-Za-z][A-Za-z0-9]$/)

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'
-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'
+// icons
+import VisibilityIcon from '@mui/icons-material/Visibility'
+import { ContentCopy as ContentCopyIcon } from '@jbrowse/core/ui/Icons'
+import MenuOpenIcon from '@mui/icons-material/MenuOpen'
+import SortIcon from '@mui/icons-material/Sort'
+import PaletteIcon from '@mui/icons-material/Palette'
+import FilterListIcon from '@mui/icons-material/ClearAll'
+
+// 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() {
@@ -169,6 +178,13 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
                 } = self
                 const { staticBlocks, bpPerPx } = view
 
+                if (!self.estimatedStatsReady) {
+                  return
+                }
+                if (self.regionTooLarge) {
+                  return
+                }
+
                 // continually generate the vc pairing, set and rerender if any
                 // new values seen
                 if (colorBy?.tag) {
@@ -226,6 +242,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)
@@ -270,16 +328,15 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
         }
         const { refName, assemblyName, offset } = centerLineInfo
         const centerBp = Math.round(offset) + 1
-        const centerRefName = refName
 
-        if (centerBp < 0) {
+        if (centerBp < 0 || !refName) {
           return
         }
 
         self.sortedBy = {
           type,
           pos: centerBp,
-          refName: centerRefName,
+          refName,
           assemblyName,
           tag,
         }
@@ -337,6 +394,9 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
           ? self.mismatchAlpha
           : readConfObject(this.rendererConfig, 'mismatchAlpha')
       },
+      get featureUnderMouse() {
+        return self.featureUnderMouseVolatile
+      },
     }))
     .views(self => {
       const {
@@ -395,6 +455,8 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
             colorBy,
             filterBy,
             rpcDriverName,
+            currBpPerPx,
+            ready,
           } = self
 
           const superProps = superRenderProps()
@@ -403,18 +465,18 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
             ...superProps,
             notReady:
               superProps.notReady ||
-              !self.ready ||
-              (sortedBy && self.currBpPerPx !== view.bpPerPx),
+              !ready ||
+              (sortedBy && currBpPerPx !== view.bpPerPx),
             rpcDriverName,
             displayModel: self,
             sortedBy,
             colorBy,
             filterBy: JSON.parse(JSON.stringify(filterBy)),
-            colorTagMap: JSON.parse(JSON.stringify(colorTagMap)),
-            modificationTagMap: JSON.parse(JSON.stringify(modificationTagMap)),
+            colorTagMap: Object.fromEntries(colorTagMap.toJSON()),
+            modificationTagMap: Object.fromEntries(modificationTagMap.toJSON()),
             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 +506,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 +567,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>