@jbrowse/plugin-alignments 2.2.1 → 2.2.2

package/src/LinearPileupDisplay/components/ColorByTag.tsx

@@ -2,50 +2,23 @@ import React, { useState } from 'react'
 import { observer } from 'mobx-react'
 import {
   Button,
-  Dialog,
   DialogContent,
   DialogActions,
-  DialogTitle,
-  IconButton,
   TextField,
   Typography,
 } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import CloseIcon from '@mui/icons-material/Close'
-
-const useStyles = makeStyles()(theme => ({
-  root: {
-    width: 300,
-  },
-  closeButton: {
-    position: 'absolute',
-    right: theme.spacing(1),
-    top: theme.spacing(1),
-    color: theme.palette.grey[500],
-  },
-}))
+import { Dialog } from '@jbrowse/core/ui'
 
 function ColorByTagDlg(props: {
   model: { setColorScheme: Function }
   handleClose: () => void
 }) {
-  const { classes } = useStyles()
   const { model, handleClose } = props
   const [tag, setTag] = useState('')
   const validTag = tag.match(/^[A-Za-z][A-Za-z0-9]$/)
 
   return (
-    <Dialog open onClose={handleClose}>
-      <DialogTitle>
-        Color by tag
-        <IconButton
-          aria-label="close"
-          className={classes.closeButton}
-          onClick={handleClose}
-        >
-          <CloseIcon />
-        </IconButton>
-      </DialogTitle>
+    <Dialog open onClose={handleClose} title="Color by tag">
       <DialogContent style={{ overflowX: 'hidden' }}>
         <Typography>Enter tag to color by: </Typography>
         <Typography color="textSecondary">

package/src/LinearPileupDisplay/components/FilterByTag.tsx

@@ -2,31 +2,21 @@ import React, { useState } from 'react'
 import { observer } from 'mobx-react'
 import {
   Button,
-  Dialog,
   DialogActions,
   DialogContent,
-  DialogTitle,
-  IconButton,
   Link,
   Paper,
   TextField,
   Typography,
 } from '@mui/material'
+import { Dialog } from '@jbrowse/core/ui'
 import { makeStyles } from 'tss-react/mui'
 
-import CloseIcon from '@mui/icons-material/Close'
-
 const useStyles = makeStyles()(theme => ({
   paper: {
     padding: theme.spacing(2),
     margin: theme.spacing(2),
   },
-  closeButton: {
-    position: 'absolute',
-    right: theme.spacing(1),
-    top: theme.spacing(1),
-    color: theme.palette.grey[500],
-  },
   field: {
     margin: theme.spacing(2),
   },
@@ -105,17 +95,7 @@ function FilterByTagDlg(props: {
   const site = 'https://broadinstitute.github.io/picard/explain-flags.html'
 
   return (
-    <Dialog open onClose={handleClose}>
-      <DialogTitle>
-        Filter options
-        <IconButton
-          aria-label="close"
-          className={classes.closeButton}
-          onClick={handleClose}
-        >
-          <CloseIcon />
-        </IconButton>
-      </DialogTitle>
+    <Dialog open onClose={handleClose} title="Filter options">
       <DialogContent>
         <Typography>
           Set filter bitmask options. Refer to <Link href={site}>{site}</Link>{' '}

package/src/LinearPileupDisplay/components/SetFeatureHeight.tsx

@@ -3,26 +3,13 @@ import { observer } from 'mobx-react'
 import {
   Button,
   Checkbox,
-  Dialog,
   DialogActions,
   DialogContent,
-  DialogTitle,
   FormControlLabel,
-  IconButton,
   TextField,
   Typography,
 } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import CloseIcon from '@mui/icons-material/Close'
-
-const useStyles = makeStyles()(theme => ({
-  closeButton: {
-    position: 'absolute',
-    right: theme.spacing(1),
-    top: theme.spacing(1),
-    color: theme.palette.grey[500],
-  },
-}))
+import { Dialog } from '@jbrowse/core/ui'
 
 function SetFeatureHeightDlg(props: {
   model: {
@@ -33,7 +20,6 @@ function SetFeatureHeightDlg(props: {
   }
   handleClose: () => void
 }) {
-  const { classes } = useStyles()
   const { model, handleClose } = props
   const { featureHeightSetting, noSpacing: noSpacingSetting } = model
   const [height, setHeight] = useState(`${featureHeightSetting}`)
@@ -42,13 +28,7 @@ function SetFeatureHeightDlg(props: {
   const ok = height !== '' && !Number.isNaN(+height)
 
   return (
-    <Dialog open onClose={handleClose}>
-      <DialogTitle>
-        Set feature height
-        <IconButton className={classes.closeButton} onClick={handleClose}>
-          <CloseIcon />
-        </IconButton>
-      </DialogTitle>
+    <Dialog open onClose={handleClose} title={'Set feature height'}>
       <DialogContent>
         <Typography>
           Adjust the feature height and whether there is any spacing between

package/src/LinearPileupDisplay/components/SetMaxHeight.tsx

@@ -2,30 +2,18 @@ import React, { useState } from 'react'
 import { observer } from 'mobx-react'
 import {
   Button,
-  Dialog,
   DialogActions,
   DialogContent,
-  DialogTitle,
-  IconButton,
   TextField,
   Typography,
 } from '@mui/material'
+import { Dialog } from '@jbrowse/core/ui'
 import { makeStyles } from 'tss-react/mui'
-import CloseIcon from '@mui/icons-material/Close'
 
 const useStyles = makeStyles()(theme => ({
   root: {
     width: 500,
   },
-  closeButton: {
-    position: 'absolute',
-    right: theme.spacing(1),
-    top: theme.spacing(1),
-    color: theme.palette.grey[500],
-  },
-  field: {
-    margin: theme.spacing(2),
-  },
 }))
 
 function SetMaxHeightDlg(props: {
@@ -41,17 +29,7 @@ function SetMaxHeightDlg(props: {
   const [max, setMax] = useState(`${maxHeight}`)
 
   return (
-    <Dialog open onClose={handleClose}>
-      <DialogTitle>
-        Filter options
-        <IconButton
-          aria-label="close"
-          className={classes.closeButton}
-          onClick={handleClose}
-        >
-          <CloseIcon />
-        </IconButton>
-      </DialogTitle>
+    <Dialog open onClose={handleClose} title="Filter options">
       <DialogContent className={classes.root}>
         <Typography>
           Set max height for the track. For example, you can increase this if

package/src/LinearPileupDisplay/components/SortByTag.tsx

@@ -2,51 +2,22 @@ import React, { useState } from 'react'
 import { observer } from 'mobx-react'
 import {
   Button,
-  Dialog,
   DialogActions,
   DialogContent,
-  DialogTitle,
-  IconButton,
   TextField,
   Typography,
 } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-
-import CloseIcon from '@mui/icons-material/Close'
-
-const useStyles = makeStyles()(theme => ({
-  root: {
-    margin: 0,
-    padding: theme.spacing(2),
-  },
-  closeButton: {
-    position: 'absolute',
-    right: theme.spacing(1),
-    top: theme.spacing(1),
-    color: theme.palette.grey[500],
-  },
-}))
+import { Dialog } from '@jbrowse/core/ui'
 
 function SortByTagDlg(props: {
   model: { setSortedBy: Function }
   handleClose: () => void
 }) {
-  const { classes } = useStyles()
   const { model, handleClose } = props
   const [tag, setTag] = useState('')
   const validTag = tag.match(/^[A-Za-z][A-Za-z0-9]$/)
   return (
-    <Dialog open onClose={handleClose}>
-      <DialogTitle>
-        Sort by tag
-        <IconButton
-          aria-label="close"
-          className={classes.closeButton}
-          onClick={handleClose}
-        >
-          <CloseIcon />
-        </IconButton>
-      </DialogTitle>
+    <Dialog open onClose={handleClose} title="Sort by tag">
       <DialogContent>
         <Typography>Set the tag to sort by</Typography>
         <Typography color="textSecondary">

package/src/LinearSNPCoverageDisplay/models/model.ts

@@ -1,5 +1,9 @@
 import { addDisposer, types, cast, getEnv, getSnapshot } from 'mobx-state-tree'
-import { observable, autorun } from 'mobx'
+import clone from 'clone'
+import { autorun } from 'mobx'
+
+// jbrowse
+import PluginManager from '@jbrowse/core/PluginManager'
 import {
   getConf,
   readConfObject,
@@ -8,7 +12,6 @@ import {
 } 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
@@ -75,7 +78,7 @@ function stateModelFactory(
       }),
     )
     .volatile(() => ({
-      modificationTagMap: observable.map({}),
+      modificationTagMap: undefined as Record<string, string> | undefined,
     }))
     .actions(self => ({
       /**
@@ -109,12 +112,14 @@ function stateModelFactory(
         const colorPalette = ['red', 'blue', 'green', 'orange', 'purple']
         let i = 0
 
+        const newMap = clone(self.modificationTagMap) || {}
         uniqueModifications.forEach(value => {
-          if (!self.modificationTagMap.has(value)) {
+          if (!newMap[value]) {
             const newColor = colorPalette[i++]
-            self.modificationTagMap.set(value, newColor)
+            newMap[value] = newColor
           }
         })
+        self.modificationTagMap = newMap
       },
     }))
     .views(self => {
@@ -170,8 +175,7 @@ function stateModelFactory(
          */
         get modificationsReady() {
           return self.colorBy?.type === 'modifications'
-            ? Object.keys(JSON.parse(JSON.stringify(self.modificationTagMap)))
-                .length > 0
+            ? self.modificationTagMap !== undefined
             : true
         },
 
@@ -184,7 +188,7 @@ function stateModelFactory(
           return {
             ...superProps,
             notReady: superProps.notReady || !this.modificationsReady,
-            modificationTagMap: Object.fromEntries(modificationTagMap.toJSON()),
+            modificationTagMap: modificationTagMap,
 
             // must use getSnapshot because otherwise changes to e.g. just the
             // colorBy.type are not read

package/src/PileupRenderer/configSchema.ts

@@ -28,7 +28,7 @@ const PileupRenderer = ConfigurationSchema(
       model: types.enumeration('orientationType', ['fr', 'rf', 'ff']),
       defaultValue: 'fr',
       description:
-        'read sequencer orienation. fr is normal "reads pointing at each other ---> <--- while some other sequencers can use other options',
+        'read sequencer orientation. fr is normal "reads pointing at each other ---> <--- while some other sequencers can use other options',
     },
     /**
      * #slot

package/src/SNPCoverageAdapter/SNPCoverageAdapter.ts

@@ -6,46 +6,13 @@ import { AugmentedRegion as Region } from '@jbrowse/core/util/types'
 import SimpleFeature, { Feature } from '@jbrowse/core/util/simpleFeature'
 import { ObservableCreate } from '@jbrowse/core/util/rxjs'
 import { toArray } from 'rxjs/operators'
-import {
-  getTag,
-  getTagAlt,
-  fetchSequence,
-  shouldFetchReferenceSequence,
-} from '../util'
-import {
-  parseCigar,
-  getNextRefPos,
-  getModificationPositions,
-  Mismatch,
-} from '../BamAdapter/MismatchParser'
-
-function mismatchLen(mismatch: Mismatch) {
-  return !isInterbase(mismatch.type) ? mismatch.length : 1
-}
-
-function isInterbase(type: string) {
-  return type === 'softclip' || type === 'hardclip' || type === 'insertion'
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function inc(bin: any, strand: number, type: string, field: string) {
-  let thisBin = bin[type][field]
-  if (thisBin === undefined) {
-    thisBin = bin[type][field] = {
-      total: 0,
-      '-1': 0,
-      '0': 0,
-      '1': 0,
-    }
-  }
-  thisBin.total++
-  thisBin[strand]++
-}
+import generateCoverageBins from './generateCoverageBins'
+import { fetchSequence } from '../util'
 
 export default class SNPCoverageAdapter extends BaseFeatureDataAdapter {
   protected async configure() {
     const subadapterConfig = this.getConf('subadapter')
-    const sequenceConf = this.getConf(['subadapter', 'sequenceAdapter'])
+    const sequenceConf = subadapterConfig.sequenceAdapter
     const dataAdapter = await this.getSubAdapter?.(subadapterConfig)
 
     const sequenceAdapter = sequenceConf
@@ -81,10 +48,11 @@ export default class SNPCoverageAdapter extends BaseFeatureDataAdapter {
         .pipe(toArray())
         .toPromise()
 
-      const { bins, skipmap } = await this.generateCoverageBins(
+      const { bins, skipmap } = await generateCoverageBins(
         feats,
         region,
         opts,
+        arg => this.fetchSequence(arg),
       )
 
       bins.forEach((bin, index) => {
@@ -135,218 +103,6 @@ export default class SNPCoverageAdapter extends BaseFeatureDataAdapter {
   }
 
   freeResources(/* { region } */): void {}
-
-  async generateCoverageBins(
-    features: Feature[],
-    region: Region,
-    opts: { bpPerPx?: number; colorBy?: { type: string; tag?: string } },
-  ) {
-    const { colorBy } = opts
-    const binMax = Math.ceil(region.end - region.start)
-
-    const skipmap = {} as {
-      [key: string]: {
-        score: number
-        feature: unknown
-        start: number
-        end: number
-        strand: number
-        xs: string
-      }
-    }
-
-    // bins contain:
-    // - cov feature if they contribute to coverage
-    // - noncov are insertions/clip features that don't contribute to coverage
-    // - delskips deletions or introns that don't contribute to coverage
-    type BinType = { total: number; strands: { [key: string]: number } }
-
-    const regionSeq =
-      features.length && shouldFetchReferenceSequence(opts.colorBy?.type)
-        ? await this.fetchSequence(region)
-        : undefined
-
-    const bins = [] as {
-      refbase?: string
-      total: number
-      all: number
-      ref: number
-      '-1': 0
-      '0': 0
-      '1': 0
-      lowqual: BinType
-      cov: BinType
-      delskips: BinType
-      noncov: BinType
-    }[]
-
-    for (let i = 0; i < features.length; i++) {
-      const feature = features[i]
-      const fstart = feature.get('start')
-      const fend = feature.get('end')
-      const fstrand = feature.get('strand') as -1 | 0 | 1
-
-      for (let j = fstart; j < fend + 1; j++) {
-        const i = j - region.start
-        if (i >= 0 && i < binMax) {
-          if (bins[i] === undefined) {
-            bins[i] = {
-              total: 0,
-              all: 0,
-              ref: 0,
-              '-1': 0,
-              '0': 0,
-              '1': 0,
-              lowqual: {} as BinType,
-              cov: {} as BinType,
-              delskips: {} as BinType,
-              noncov: {} as BinType,
-            }
-          }
-          if (j !== fend) {
-            bins[i].total++
-            bins[i].all++
-            bins[i].ref++
-            bins[i][fstrand]++
-          }
-        }
-      }
-
-      if (colorBy?.type === 'modifications') {
-        const seq = feature.get('seq') as string
-        const mm = (getTagAlt(feature, 'MM', 'Mm') as string) || ''
-        const ops = parseCigar(feature.get('CIGAR'))
-        const fend = feature.get('end')
-
-        getModificationPositions(mm, seq, fstrand).forEach(
-          ({ type, positions }) => {
-            const mod = `mod_${type}`
-            for (const pos of getNextRefPos(ops, positions)) {
-              const epos = pos + fstart - region.start
-              if (epos >= 0 && epos < bins.length && pos + fstart < fend) {
-                const bin = bins[epos]
-                if (bin) {
-                  inc(bin, fstrand, 'cov', mod)
-                } else {
-                  console.warn(
-                    'Undefined position in modifications snpcoverage encountered',
-                  )
-                }
-              }
-            }
-          },
-        )
-      }
-
-      // methylation based coloring takes into account both reference
-      // sequence CpG detection and reads
-      else if (colorBy?.type === 'methylation') {
-        if (!regionSeq) {
-          throw new Error(
-            'no region sequence detected, need sequenceAdapter configuration',
-          )
-        }
-        const seq = feature.get('seq')
-        const mm = getTagAlt(feature, 'MM', 'Mm') || ''
-        const methBins = new Array(region.end - region.start).fill(0)
-        const ops = parseCigar(feature.get('CIGAR'))
-
-        getModificationPositions(mm, seq, fstrand).forEach(
-          ({ type, positions }) => {
-            // we are processing methylation
-            if (type === 'm') {
-              for (const pos of getNextRefPos(ops, positions)) {
-                const epos = pos + fstart - region.start
-                if (epos >= 0 && epos < methBins.length) {
-                  methBins[epos] = 1
-                }
-              }
-            }
-          },
-        )
-
-        for (let j = fstart; j < fend; j++) {
-          const i = j - region.start
-          if (i >= 0 && i < bins.length - 1) {
-            const l1 = regionSeq[i].toLowerCase()
-            const l2 = regionSeq[i + 1].toLowerCase()
-            const bin = bins[i]
-            const bin1 = bins[i + 1]
-
-            // color
-            if (l1 === 'c' && l2 === 'g') {
-              if (methBins[i] || methBins[i + 1]) {
-                inc(bin, fstrand, 'cov', 'meth')
-                inc(bin1, fstrand, 'cov', 'meth')
-                bins[i].ref--
-                bins[i][fstrand]--
-                bins[i + 1].ref--
-                bins[i + 1][fstrand]--
-              } else {
-                inc(bin, fstrand, 'cov', 'unmeth')
-                inc(bin1, fstrand, 'cov', 'unmeth')
-                bins[i].ref--
-                bins[i][fstrand]--
-                bins[i + 1].ref--
-                bins[i + 1][fstrand]--
-              }
-            }
-          }
-        }
-      }
-
-      // normal SNP based coloring
-      const mismatches = (feature.get('mismatches') as Mismatch[]) || []
-      const colorSNPs =
-        colorBy?.type !== 'modifications' && colorBy?.type !== 'methylation'
-
-      for (let i = 0; i < mismatches.length; i++) {
-        const mismatch = mismatches[i]
-        const mstart = fstart + mismatch.start
-        const mlen = mismatchLen(mismatch)
-        const mend = mstart + mlen
-        for (let j = mstart; j < mstart + mlen; j++) {
-          const epos = j - region.start
-          if (epos >= 0 && epos < bins.length) {
-            const bin = bins[epos]
-            const { base, type } = mismatch
-            const interbase = isInterbase(type)
-            if (!interbase) {
-              bin.ref--
-              bin[fstrand]--
-            } else {
-              inc(bin, fstrand, 'noncov', type)
-            }
-
-            if (type === 'deletion' || type === 'skip') {
-              inc(bin, fstrand, 'delskips', type)
-              bin.total--
-            } else if (!interbase && colorSNPs) {
-              inc(bin, fstrand, 'cov', base)
-              bin.refbase = mismatch.altbase
-            }
-          }
-        }
-
-        if (mismatch.type === 'skip') {
-          const hash = `${mstart}_${mend}_${fstrand}`
-          if (skipmap[hash] === undefined) {
-            skipmap[hash] = {
-              feature: feature,
-              start: mstart,
-              end: mend,
-              strand: fstrand,
-              xs: getTag(feature, 'XS') || getTag(feature, 'TS'),
-              score: 0,
-            }
-          }
-          skipmap[hash].score++
-        }
-      }
-    }
-
-    return { bins, skipmap }
-  }
 }
 
 const { capabilities } = SNPCoverageAdapter