@jbrowse/plugin-alignments 1.7.11 → 2.1.0

package/src/BamAdapter/BamAdapter.ts

@@ -105,7 +105,7 @@ export default class BamAdapter extends BaseFeatureDataAdapter {
     return this.samHeader
   }
 
-  private async setup(opts?: BaseOptions) {
+  async setup(opts?: BaseOptions) {
     if (!this.setupP) {
       this.setupP = this.setupPre(opts).catch(e => {
         this.setupP = undefined

package/src/BamAdapter/MismatchParser.ts

@@ -11,8 +11,8 @@ export interface Mismatch {
 }
 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=])/)
+export function parseCigar(cigar = '') {
+  return cigar.split(/([MIDNSHPX=])/).slice(0, -1)
 }
 export function cigarToMismatches(
   ops: string[],

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

@@ -23,17 +23,18 @@ import {
 } from '@jbrowse/plugin-linear-genome-view'
 
 // icons
-import VisibilityIcon from '@material-ui/icons/Visibility'
+import VisibilityIcon from '@mui/icons-material/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 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'
+import { SimpleFeatureSerialized } from '@jbrowse/core/util/simpleFeature'
 
 // async
 const ColorByTagDlg = lazy(() => import('./components/ColorByTag'))
@@ -178,6 +179,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) {
@@ -321,16 +329,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,
         }
@@ -466,8 +473,8 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
             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) {
@@ -523,10 +530,9 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
                       layoutId: getContainingView(self).id,
                       rendererType: 'PileupRenderer',
                     },
-                  )) as { feature: unknown }
+                  )) as { feature: SimpleFeatureSerialized }
 
                   if (feature) {
-                    // @ts-ignore
                     self.setContextMenuFeature(new SimpleFeature(feature))
                   }
                 }

package/src/LinearSNPCoverageDisplay/components/Tooltip.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react'
 import { observer } from 'mobx-react'
 import { Feature } from '@jbrowse/core/util/simpleFeature'
@@ -31,8 +30,8 @@ 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 }, reactRef: any) => {
+const TooltipContents = React.forwardRef<HTMLDivElement, { feature: Feature }>(
+  ({ feature }, reactRef) => {
     const start = feature.get('start')
     const end = feature.get('end')
     const name = feature.get('refName')
@@ -109,7 +108,7 @@ type Coord = [number, number]
 
 const SNPCoverageTooltip = observer(
   (props: {
-    model: any
+    model: { featureUnderMouse: Feature }
     height: number
     offsetMouseCoord: Coord
     clientMouseCoord: Coord

package/src/LinearSNPCoverageDisplay/models/model.ts

@@ -7,12 +7,14 @@ import {
   AnyConfigurationModel,
 } 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
 import Tooltip from '../components/Tooltip'
 import { getUniqueModificationValues } from '../../shared'
-import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
 // using a map because it preserves order
 const rendererTypes = new Map([['snpcoverage', 'SNPCoverageRenderer']])
@@ -93,35 +95,29 @@ const stateModelFactory = (
             {
               ...configBlob,
               drawInterbaseCounts:
-                self.drawInterbaseCounts === undefined
-                  ? configBlob.drawInterbaseCounts
-                  : self.drawInterbaseCounts,
-              drawIndicators:
-                self.drawIndicators === undefined
-                  ? configBlob.drawIndicators
-                  : self.drawIndicators,
-              drawArcs:
-                self.drawArcs === undefined
-                  ? configBlob.drawArcs
-                  : self.drawArcs,
+                self.drawInterbaseCounts ?? configBlob.drawInterbaseCounts,
+              drawIndicators: self.drawIndicators ?? configBlob.drawIndicators,
+              drawArcs: self.drawArcs ?? configBlob.drawArcs,
             },
             getEnv(self),
           )
         },
         get drawArcsSetting() {
-          return self.drawArcs !== undefined
-            ? self.drawArcs
-            : readConfObject(this.rendererConfig, 'drawArcs')
+          return (
+            self.drawArcs ?? readConfObject(this.rendererConfig, 'drawArcs')
+          )
         },
         get drawInterbaseCountsSetting() {
-          return self.drawInterbaseCounts !== undefined
-            ? self.drawInterbaseCounts
-            : readConfObject(this.rendererConfig, 'drawInterbaseCounts')
+          return (
+            self.drawInterbaseCounts ??
+            readConfObject(this.rendererConfig, 'drawInterbaseCounts')
+          )
         },
         get drawIndicatorsSetting() {
-          return self.drawIndicators !== undefined
-            ? self.drawIndicators
-            : readConfObject(this.rendererConfig, 'drawIndicators')
+          return (
+            self.drawIndicators ??
+            readConfObject(this.rendererConfig, 'drawIndicators')
+          )
         },
 
         get modificationsReady() {
@@ -133,17 +129,16 @@ const stateModelFactory = (
 
         renderProps() {
           const superProps = superRenderProps()
+          const { colorBy, filterBy, modificationTagMap } = self
           return {
             ...superProps,
             notReady: superProps.notReady || !this.modificationsReady,
-            modificationTagMap: JSON.parse(
-              JSON.stringify(self.modificationTagMap),
-            ),
+            modificationTagMap: Object.fromEntries(modificationTagMap.toJSON()),
 
             // must use getSnapshot because otherwise changes to e.g. just the
             // colorBy.type are not read
-            colorBy: self.colorBy ? getSnapshot(self.colorBy) : undefined,
-            filterBy: self.filterBy ? getSnapshot(self.filterBy) : undefined,
+            colorBy: colorBy ? getSnapshot(colorBy) : undefined,
+            filterBy: filterBy ? getSnapshot(filterBy) : undefined,
           }
         },
       }
@@ -166,6 +161,13 @@ const stateModelFactory = (
               try {
                 const { colorBy } = self
                 const { staticBlocks } = getContainingView(self) as LGV
+
+                if (!self.estimatedStatsReady) {
+                  return
+                }
+                if (self.regionTooLarge) {
+                  return
+                }
                 if (colorBy?.type === 'modifications') {
                   const vals = await getUniqueModificationValues(
                     self,