@jbrowse/plugin-alignments 2.2.0 → 2.2.2

package/src/CramAdapter/index.ts

@@ -5,12 +5,11 @@ import AdapterType from '@jbrowse/core/pluggableElementTypes/AdapterType'
 import configSchema from './configSchema'
 
 export default (pluginManager: PluginManager) => {
-  pluginManager.addAdapterType(
-    () =>
-      new AdapterType({
-        name: 'CramAdapter',
-        configSchema,
-        getAdapterClass: () => import('./CramAdapter').then(r => r.default),
-      }),
-  )
+  pluginManager.addAdapterType(() => {
+    return new AdapterType({
+      name: 'CramAdapter',
+      configSchema,
+      getAdapterClass: () => import('./CramAdapter').then(r => r.default),
+    })
+  })
 }

package/src/CramAdapter/util.test.ts

@@ -0,0 +1,26 @@
+import { readFeaturesToCIGAR, readFeaturesToMismatches } from './util'
+
+test('cram read features mismatches', () => {
+  expect(
+    // from ctgA_15140_15565_0:0:1_1:0:0_2e8 in volvox-sorted.cram
+    readFeaturesToMismatches(
+      [{ code: 'i', data: 'C', pos: 25, refPos: 15164 }],
+      15139,
+    ),
+  ).toMatchSnapshot()
+})
+
+test('cram read features to CIGAR', () => {
+  expect(
+    // from ctgA_15140_15565_0:0:1_1:0:0_2e8 in volvox-sorted.cram
+    readFeaturesToCIGAR(
+      [{ code: 'i', data: 'C', pos: 25, refPos: 15164 }],
+      15140,
+      100,
+      {
+        start: 14998,
+        seq: 'agaccacattcagctctcggtaacatgggaggcttgtggttgcaccgtaaaagggggatagcccatccatcctgtaaacctacaatcgcgcgtagcttaatacgctcacattagacattcgatcgagagacctggtttcaagagccttcccttttgctttagtgggccaaatcgcaaccctgctcccctcccttacgccttatacacttcagtgcaaattcatgcgttcagcgaacaactggacttctgttgtacgtagtccacgggggcttattcattatagaaagccccctactgtcaccgttatatggttcacacatgagctgatcacctagagagtcgtcatgcacattcgcctaacaaggacatatgagtaaccg',
+      },
+    ),
+  ).toMatchSnapshot()
+})

package/src/CramAdapter/util.ts

@@ -0,0 +1,251 @@
+import { CramRecord } from '@gmod/cram'
+
+type ReadFeatures = CramRecord['readFeatures']
+
+export interface Mismatch {
+  qual?: number
+  start: number
+  length: number
+  type: string
+  base: string | undefined
+  altbase?: string
+  seq?: string
+  cliplen?: number
+}
+
+export function readFeaturesToMismatches(
+  readFeatures: ReadFeatures,
+  start: number,
+  qual?: number[] | null,
+) {
+  if (!readFeatures) {
+    return []
+  }
+  const mismatches: Mismatch[] = new Array(readFeatures.length)
+  let j = 0
+  let insLen = 0
+  let refPos = 0
+  let sublen = 0
+  let lastPos = start
+
+  for (let i = 0; i < readFeatures.length; i++) {
+    const f = readFeatures[i]
+    const { code, pos, data, sub, ref } = f
+    sublen = refPos - lastPos
+    lastPos = refPos
+
+    if (sublen && insLen > 0) {
+      mismatches[j++] = {
+        start: refPos,
+        type: 'insertion',
+        base: `${insLen}`,
+        length: 0,
+      }
+      insLen = 0
+    }
+    refPos = f.refPos - 1 - start
+
+    if (code === 'X') {
+      // substitution
+      mismatches[j++] = {
+        start: refPos,
+        length: 1,
+        base: sub,
+        qual: qual?.[pos - 1],
+        altbase: ref?.toUpperCase(),
+        type: 'mismatch',
+      }
+    } else if (code === 'I') {
+      // insertion
+      mismatches[j++] = {
+        start: refPos,
+        type: 'insertion',
+        base: `${data.length}`,
+        length: 0,
+      }
+    } else if (code === 'N') {
+      // reference skip
+      mismatches[j++] = {
+        type: 'skip',
+        length: data,
+        start: refPos,
+        base: 'N',
+      }
+    } else if (code === 'S') {
+      // soft clip
+      const len = data.length
+      mismatches[j++] = {
+        start: refPos,
+        type: 'softclip',
+        base: `S${len}`,
+        cliplen: len,
+        length: 1,
+      }
+    } else if (code === 'P') {
+      // padding
+    } else if (code === 'H') {
+      // hard clip
+      const len = data
+      mismatches[j++] = {
+        start: refPos,
+        type: 'hardclip',
+        base: `H${len}`,
+        cliplen: len,
+        length: 1,
+      }
+    } else if (code === 'D') {
+      // deletion
+      mismatches[j++] = {
+        type: 'deletion',
+        length: data,
+        start: refPos,
+        base: '*',
+      }
+    } else if (code === 'b') {
+      // stretch of bases
+    } else if (code === 'q') {
+      // stretch of qual scores
+    } else if (code === 'B') {
+      // a pair of [base, qual]
+    } else if (code === 'i') {
+      // single-base insertion, we collect these if there are multiple in a row
+      // into a single insertion entry
+      insLen++
+    } else if (code === 'Q') {
+      // single quality value
+    }
+  }
+
+  if (sublen && insLen > 0) {
+    mismatches[j++] = {
+      start: refPos,
+      type: 'insertion',
+      base: `${insLen}`,
+      length: 0,
+    }
+    insLen = 0
+  }
+
+  return mismatches.slice(0, j)
+}
+
+export function readFeaturesToCIGAR(
+  readFeatures: ReadFeatures,
+  alignmentStart: number,
+  readLen: number,
+  refRegion?: { seq: string; start: number },
+) {
+  let seq = ''
+  let cigar = ''
+  let op = 'M'
+  let oplen = 0
+  if (!refRegion) {
+    return ''
+  }
+
+  // not sure I should access these, but...
+  const ref = refRegion.seq
+  const refStart = refRegion.start
+  let lastPos = alignmentStart
+  let sublen = 0
+  let insLen = 0
+  if (readFeatures !== undefined) {
+    for (let i = 0; i < readFeatures.length; i++) {
+      const { code, refPos, sub, data } = readFeatures[i]
+      sublen = refPos - lastPos
+      seq += ref.substring(lastPos - refStart, refPos - refStart)
+      lastPos = refPos
+
+      if (insLen > 0 && sublen) {
+        cigar += `${insLen}I`
+        insLen = 0
+      }
+      if (oplen && op !== 'M') {
+        cigar += oplen + op
+        oplen = 0
+      }
+      if (sublen) {
+        op = 'M'
+        oplen += sublen
+      }
+
+      if (code === 'b') {
+        // An array of bases stored verbatim
+        const ret = data.split(',')
+        const added = String.fromCharCode(...ret)
+        seq += added
+        lastPos += added.length
+        oplen += added.length
+      } else if (code === 'B') {
+        // Single base (+ qual score)
+        seq += sub
+        lastPos++
+        oplen++
+      } else if (code === 'X') {
+        // Substitution
+        seq += sub
+        lastPos++
+        oplen++
+      } else if (code === 'D' || code === 'N') {
+        // Deletion or Ref Skip
+        lastPos += data
+        if (oplen) {
+          cigar += oplen + op
+        }
+        cigar += data + code
+        oplen = 0
+      } else if (code === 'I' || code === 'S') {
+        // Insertion or soft-clip
+        seq += data
+        if (oplen) {
+          cigar += oplen + op
+        }
+        cigar += data.length + code
+        oplen = 0
+      } else if (code === 'i') {
+        // Single base insertion
+        // seq += data
+        if (oplen) {
+          cigar += oplen + op
+        }
+        insLen++
+        seq += data
+        oplen = 0
+      } else if (code === 'P') {
+        // Padding
+        if (oplen) {
+          cigar += oplen + op
+        }
+        cigar += `${data}P`
+      } else if (code === 'H') {
+        // Hard clip
+        if (oplen) {
+          cigar += oplen + op
+        }
+        cigar += `${data}H`
+        oplen = 0
+      } // else q or Q
+    }
+  } else {
+    sublen = readLen - seq.length
+  }
+  if (seq.length !== readLen) {
+    sublen = readLen - seq.length
+    seq += ref.substring(lastPos - refStart, lastPos - refStart + sublen)
+
+    if (oplen && op !== 'M') {
+      cigar += oplen + op
+      oplen = 0
+    }
+    op = 'M'
+    oplen += sublen
+  }
+  if (sublen && insLen > 0) {
+    cigar += `${insLen}I`
+  }
+  if (oplen) {
+    cigar += oplen + op
+  }
+
+  return cigar
+}

package/src/LinearAlignmentsDisplay/components/AlignmentsDisplay.tsx

@@ -1,8 +1,10 @@
 import React from 'react'
 import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
 import { getConf } from '@jbrowse/core/configuration'
 import { ResizeHandle } from '@jbrowse/core/ui'
-import { makeStyles } from 'tss-react/mui'
+
+// locals
 import { AlignmentsDisplayModel } from '../models/model'
 
 const useStyles = makeStyles()(() => ({

package/src/LinearAlignmentsDisplay/models/model.tsx

@@ -203,27 +203,28 @@ function stateModelFactory(
       /**
        * #action
        */
-      setSNPCoverageDisplay(displayConfig: AnyConfigurationModel) {
+      setSNPCoverageDisplay(configuration: AnyConfigurationModel) {
         self.SNPCoverageDisplay = {
           type: 'LinearSNPCoverageDisplay',
-          configuration: displayConfig,
+          configuration,
           height: self.snpCovHeight,
         }
       },
       /**
        * #action
        */
-      setUserFeatureScreenDensity(limit: number) {
-        self.PileupDisplay.setUserFeatureScreenDensity(limit)
-        self.SNPCoverageDisplay.setUserFeatureScreenDensity(limit)
+      updateStatsLimit(stats: unknown) {
+        self.PileupDisplay.updateStatsLimit(stats)
+        self.SNPCoverageDisplay.updateStatsLimit(stats)
       },
+
       /**
        * #action
        */
-      setPileupDisplay(displayConfig: AnyConfigurationModel) {
+      setPileupDisplay(configuration: AnyConfigurationModel) {
         self.PileupDisplay = {
           type: 'LinearPileupDisplay',
-          configuration: displayConfig,
+          configuration,
         }
       },
       /**

package/src/LinearPileupDisplay/components/ColorByModifications.tsx

@@ -4,23 +4,14 @@ import { ObservableMap } from 'mobx'
 import {
   Button,
   CircularProgress,
-  Dialog,
   DialogActions,
   DialogContent,
-  DialogTitle,
-  IconButton,
   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 => ({
-  closeButton: {
-    position: 'absolute',
-    right: theme.spacing(1),
-    top: theme.spacing(1),
-    color: theme.palette.grey[500],
-  },
   table: {
     border: '1px solid #888',
     margin: theme.spacing(4),
@@ -58,30 +49,19 @@ function ModificationTable({
 
 function ColorByTagDlg(props: {
   model: {
-    setColorScheme: Function
+    setColorScheme: (arg: { type: string }) => void
     modificationTagMap: ObservableMap<string, string>
     colorBy?: { type: string }
   }
   handleClose: () => void
 }) {
-  const { classes } = useStyles()
   const { model, handleClose } = props
   const { colorBy, modificationTagMap } = model
 
   const modifications = [...modificationTagMap.entries()]
 
   return (
-    <Dialog open onClose={handleClose}>
-      <DialogTitle>
-        Color by modifications
-        <IconButton
-          aria-label="close"
-          className={classes.closeButton}
-          onClick={handleClose}
-        >
-          <CloseIcon />
-        </IconButton>
-      </DialogTitle>
+    <Dialog open onClose={handleClose} title="Color by modifications">
       <DialogContent>
         <Typography>
           You can choose to color the modifications in the BAM/CRAM MM/ML
@@ -126,12 +106,8 @@ function ColorByTagDlg(props: {
         <DialogActions>
           <Button
             variant="contained"
-            color="primary"
-            style={{ margin: 5 }}
             onClick={() => {
-              model.setColorScheme({
-                type: 'modifications',
-              })
+              model.setColorScheme({ type: 'modifications' })
               handleClose()
             }}
           >
@@ -139,12 +115,8 @@ function ColorByTagDlg(props: {
           </Button>
           <Button
             variant="contained"
-            color="primary"
-            style={{ margin: 5 }}
             onClick={() => {
-              model.setColorScheme({
-                type: 'methylation',
-              })
+              model.setColorScheme({ type: 'methylation' })
               handleClose()
             }}
           >
@@ -153,7 +125,6 @@ function ColorByTagDlg(props: {
           <Button
             variant="contained"
             color="secondary"
-            style={{ margin: 5 }}
             onClick={() => handleClose()}
           >
             Cancel

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">