@jbrowse/plugin-alignments 2.6.1 → 2.6.3

package/src/index.ts

@@ -1,48 +0,0 @@
-import Plugin from '@jbrowse/core/Plugin'
-import PluginManager from '@jbrowse/core/PluginManager'
-import BamAdapterF from './CramAdapter'
-import CramAdapterF from './BamAdapter'
-import HtsgetBamAdapterF from './HtsgetBamAdapter'
-import SNPCoverageAdapterF from './SNPCoverageAdapter'
-import SNPCoverageRendererF from './SNPCoverageRenderer'
-import PileupRendererF from './PileupRenderer'
-import LinearAlignmentsDisplayF from './LinearAlignmentsDisplay'
-import LinearSNPCoverageDisplayF from './LinearSNPCoverageDisplay'
-import LinearReadArcsDisplayF from './LinearReadArcsDisplay'
-import LinearReadCloudDisplayF from './LinearReadCloudDisplay'
-import AlignmentsTrackF from './AlignmentsTrack'
-import AlignmentsFeatureWidgetF from './AlignmentsFeatureDetail'
-import PileupRPCMethodsF from './PileupRPC'
-import GuessAlignmentsTypesF from './GuessAlignmentsTypes'
-import LinearPileupDisplayF from './LinearPileupDisplay'
-
-export default class AlignmentsPlugin extends Plugin {
-  name = 'AlignmentsPlugin'
-
-  install(pluginManager: PluginManager) {
-    ;[
-      CramAdapterF,
-      BamAdapterF,
-      LinearPileupDisplayF,
-      LinearSNPCoverageDisplayF,
-      AlignmentsTrackF,
-      SNPCoverageAdapterF,
-      HtsgetBamAdapterF,
-      PileupRendererF,
-      PileupRPCMethodsF,
-      SNPCoverageRendererF,
-      LinearReadArcsDisplayF,
-      LinearReadCloudDisplayF,
-      LinearAlignmentsDisplayF,
-      AlignmentsFeatureWidgetF,
-      GuessAlignmentsTypesF,
-    ].map(f => f(pluginManager))
-  }
-}
-
-export {
-  linearPileupDisplayStateModelFactory,
-  linearPileupDisplayConfigSchemaFactory,
-} from './LinearPileupDisplay'
-export { type LinearPileupDisplayModel } from './LinearPileupDisplay/model'
-export * as MismatchParser from './MismatchParser'

package/src/shared/BaseDisplayComponent.tsx

@@ -1,83 +0,0 @@
-import React from 'react'
-import { LoadingEllipses } from '@jbrowse/core/ui'
-import { BlockMsg } from '@jbrowse/plugin-linear-genome-view'
-import { makeStyles } from 'tss-react/mui'
-import { observer } from 'mobx-react'
-
-// local
-import { LinearReadCloudDisplayModel } from '../LinearReadCloudDisplay/model'
-import { LinearReadArcsDisplayModel } from '../LinearReadArcsDisplay/model'
-import { getContainingView } from '@jbrowse/core/util'
-
-const useStyles = makeStyles()(theme => {
-  const bg = theme.palette.action.disabledBackground
-  return {
-    loading: {
-      backgroundColor: theme.palette.background.default,
-      backgroundImage: `repeating-linear-gradient(45deg, transparent, transparent 5px, ${bg} 5px, ${bg} 10px)`,
-      position: 'absolute',
-      bottom: 0,
-      height: 50,
-      width: 300,
-      right: 0,
-      pointerEvents: 'none',
-      textAlign: 'center',
-    },
-  }
-})
-
-export default observer(function ({
-  model,
-  children,
-}: {
-  model: LinearReadArcsDisplayModel | LinearReadCloudDisplayModel
-  children?: React.ReactNode
-}) {
-  const { error, regionTooLarge } = model
-  return error ? (
-    <BlockMsg
-      message={`${error}`}
-      severity="error"
-      buttonText="Reload"
-      action={model.reload}
-    />
-  ) : regionTooLarge ? (
-    model.regionCannotBeRendered()
-  ) : (
-    <DataDisplay model={model}>{children}</DataDisplay>
-  )
-})
-
-const DataDisplay = observer(function ({
-  model,
-  children,
-}: {
-  model: LinearReadArcsDisplayModel | LinearReadCloudDisplayModel
-  children?: React.ReactNode
-}) {
-  const { drawn, loading } = model
-  const view = getContainingView(model)
-  const left = (model.lastDrawnOffsetPx || 0) - view.offsetPx
-  return (
-    // this data-testid is located here because changing props on the canvas
-    // itself is very sensitive to triggering ref invalidation
-    <div data-testid={`drawn-${drawn}`}>
-      <div style={{ position: 'absolute', left }}>{children}</div>
-      {left !== 0 || loading ? <LoadingBar model={model} /> : null}
-    </div>
-  )
-})
-
-const LoadingBar = observer(function ({
-  model,
-}: {
-  model: LinearReadArcsDisplayModel | LinearReadCloudDisplayModel
-}) {
-  const { classes } = useStyles()
-  const { message } = model
-  return (
-    <div className={classes.loading}>
-      <LoadingEllipses message={message} />
-    </div>
-  )
-})

package/src/shared/FilterByTag.tsx

@@ -1,187 +0,0 @@
-import React, { useState } from 'react'
-import { observer } from 'mobx-react'
-import {
-  Button,
-  DialogActions,
-  DialogContent,
-  Link,
-  Paper,
-  TextField,
-  Typography,
-} from '@mui/material'
-import { Dialog } from '@jbrowse/core/ui'
-import { makeStyles } from 'tss-react/mui'
-
-const useStyles = makeStyles()(theme => ({
-  paper: {
-    padding: theme.spacing(2),
-    margin: theme.spacing(2),
-  },
-  field: {
-    margin: theme.spacing(2),
-  },
-}))
-
-const flagNames = [
-  'read paired',
-  'read mapped in proper pair',
-  'read unmapped',
-  'mate unmapped',
-  'read reverse strand',
-  'mate reverse strand',
-  'first in pair',
-  'second in pair',
-  'not primary alignment',
-  'read fails platform/vendor quality checks',
-  'read is PCR or optical duplicate',
-  'supplementary alignment',
-]
-
-function Bitmask(props: { flag?: number; setFlag: Function }) {
-  const { flag = 0, setFlag } = props
-  return (
-    <>
-      <TextField
-        type="number"
-        value={flag}
-        onChange={event => setFlag(+event.target.value)}
-      />
-      {flagNames.map((name, index) => {
-        const val = flag & (1 << index)
-        const key = `${name}_${val}`
-        return (
-          <div key={key}>
-            <input
-              type="checkbox"
-              checked={Boolean(val)}
-              onChange={event => {
-                if (event.target.checked) {
-                  setFlag(flag | (1 << index))
-                } else {
-                  setFlag(flag & ~(1 << index))
-                }
-              }}
-            />
-            <label htmlFor={key}>{name}</label>
-          </div>
-        )
-      })}
-    </>
-  )
-}
-interface FilterBy {
-  flagExclude: number
-  flagInclude: number
-  readName?: string
-  tagFilter?: { tag: string; value: string }
-}
-function FilterByTagDlg(props: {
-  model: {
-    filterBy: FilterBy
-    setFilterBy: (arg: FilterBy) => void
-  }
-  handleClose: () => void
-}) {
-  const { model, handleClose } = props
-  const { classes } = useStyles()
-  const { filterBy } = model
-  const [flagInclude, setFlagInclude] = useState(filterBy.flagInclude)
-  const [flagExclude, setFlagExclude] = useState(filterBy.flagExclude)
-  const [tag, setTag] = useState(filterBy.tagFilter?.tag || '')
-  const [tagValue, setTagValue] = useState(filterBy.tagFilter?.value || '')
-  const [readName, setReadName] = useState(filterBy.readName || '')
-  const validTag = tag.match(/^[A-Za-z][A-Za-z0-9]$/)
-
-  const site = 'https://broadinstitute.github.io/picard/explain-flags.html'
-
-  return (
-    <Dialog open onClose={handleClose} title="Filter options">
-      <DialogContent>
-        <Typography>
-          Set filter bitmask options. Refer to <Link href={site}>{site}</Link>{' '}
-          for details
-        </Typography>
-        <Paper className={classes.paper} variant="outlined">
-          <div style={{ display: 'flex' }}>
-            <div>
-              <Typography>Read must have ALL these flags</Typography>
-              <Bitmask flag={flagInclude} setFlag={setFlagInclude} />
-            </div>
-            <div>
-              <Typography>Read must have NONE of these flags</Typography>
-              <Bitmask flag={flagExclude} setFlag={setFlagExclude} />
-            </div>
-          </div>
-        </Paper>
-        <Paper className={classes.paper} variant="outlined">
-          <Typography>
-            Filter by tag name and value. Use * in the value field to get all
-            reads containing any value for that tag. Example: filter tag name SA
-            with value * to get all split/supplementary reads. Other examples
-            include HP for haplotype, or RG for read group
-          </Typography>
-          <TextField
-            className={classes.field}
-            value={tag}
-            onChange={event => setTag(event.target.value)}
-            placeholder="Enter tag name"
-            inputProps={{
-              maxLength: 2,
-            }}
-            error={tag.length === 2 && !validTag}
-            helperText={tag.length === 2 && !validTag ? 'Not a valid tag' : ''}
-          />
-          <TextField
-            className={classes.field}
-            value={tagValue}
-            onChange={event => setTagValue(event.target.value)}
-            placeholder="Enter tag value"
-          />
-        </Paper>
-        <Paper className={classes.paper} variant="outlined">
-          <Typography>Filter by read name</Typography>
-          <TextField
-            className={classes.field}
-            value={readName}
-            onChange={event => setReadName(event.target.value)}
-            placeholder="Enter read name"
-          />
-        </Paper>
-        <DialogActions>
-          <Button
-            variant="contained"
-            color="primary"
-            autoFocus
-            type="submit"
-            onClick={() => {
-              model.setFilterBy({
-                flagInclude,
-                flagExclude,
-                readName,
-                tagFilter:
-                  tag !== ''
-                    ? {
-                        tag,
-                        value: tagValue,
-                      }
-                    : undefined,
-              })
-              handleClose()
-            }}
-          >
-            Submit
-          </Button>
-          <Button
-            variant="contained"
-            color="secondary"
-            onClick={() => handleClose()}
-          >
-            Cancel
-          </Button>
-        </DialogActions>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-export default observer(FilterByTagDlg)

package/src/shared/afterAttach.tsx

@@ -1,66 +0,0 @@
-import { getContainingView } from '@jbrowse/core/util'
-import { createAutorun } from '../util'
-import { fetchChains } from './fetchChains'
-import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
-import { IAnyStateTreeNode } from 'mobx-state-tree'
-
-type LGV = LinearGenomeViewModel
-
-export function doAfterAttach<T extends IAnyStateTreeNode>(
-  self: T,
-  cb: (
-    self: T,
-    ctx: CanvasRenderingContext2D,
-    width: number,
-    height: number,
-  ) => void,
-) {
-  createAutorun(
-    self,
-    async () => {
-      await fetchChains(self)
-    },
-    { delay: 1000 },
-  )
-
-  function draw(view: LGV) {
-    const canvas = self.ref
-    if (!canvas) {
-      return
-    }
-
-    const ctx = canvas.getContext('2d')
-    if (!ctx) {
-      return
-    }
-
-    if (!self.chainData) {
-      return
-    }
-
-    ctx.clearRect(0, 0, canvas.width, self.height * 2)
-    ctx.resetTransform()
-    ctx.scale(2, 2)
-    cb(self, ctx, canvas.width, self.height)
-    self.setLastDrawnOffsetPx(view.offsetPx)
-    self.setLastDrawnBpPerPx(view.bpPerPx)
-  }
-
-  // first autorun instantly draws if bpPerPx changes
-  createAutorun(self, async () => {
-    const view = getContainingView(self) as LGV
-    if (view.bpPerPx !== self.lastDrawnBpPerPx) {
-      draw(view)
-    }
-  })
-
-  // second autorun draws after delay 1000 e.g. if offsetPx changes
-  createAutorun(
-    self,
-    async () => {
-      const view = getContainingView(self) as LGV
-      draw(view)
-    },
-    { delay: 1000 },
-  )
-}

package/src/shared/color.ts

@@ -1,86 +0,0 @@
-import { orientationTypes, pairMap } from '../util'
-import { ChainStats } from './fetchChains'
-
-export const fillColor = {
-  color_fwd_strand_not_proper: '#ECC8C8',
-  color_rev_strand_not_proper: '#BEBED8',
-  color_fwd_strand: '#EC8B8B',
-  color_rev_strand: '#8F8FD8',
-  color_fwd_missing_mate: '#D11919',
-  color_rev_missing_mate: '#1919D1',
-  color_fwd_diff_chr: '#000',
-  color_rev_diff_chr: '#969696',
-  color_pair_lr: '#c8c8c8',
-  color_pair_rr: 'navy',
-  color_pair_rl: 'teal',
-  color_pair_ll: 'green',
-  color_nostrand: '#c8c8c8',
-  color_interchrom: 'purple',
-  color_longinsert: 'red',
-  color_shortinsert: 'pink',
-  color_unknown: 'grey',
-}
-
-// manually calculated by running
-// const color = require('color')
-// Object.fromEntries(Object.entries(fillColor).map(([key,val])=>{
-//   return [key, color(val).darken('0.3').hex()]
-// }))
-// this avoids (expensive) use of Color module at runtime
-export const strokeColor = {
-  color_fwd_strand_not_proper: '#CA6767',
-  color_rev_strand_not_proper: '#7272AA',
-  color_fwd_strand: '#DC2A2A',
-  color_rev_strand: '#4141BA',
-  color_fwd_missing_mate: '#921111',
-  color_rev_missing_mate: '#111192',
-  color_fwd_diff_chr: '#000000',
-  color_rev_diff_chr: '#696969',
-  color_pair_lr: '#8C8C8C',
-  color_pair_rr: '#00005A',
-  color_pair_rl: '#005A5A',
-  color_pair_ll: '#005A00',
-  color_nostrand: '#8C8C8C',
-  color_interchrom: '#5A005A',
-  color_longinsert: '#B30000',
-  color_shortinsert: '#FF3A5C',
-  color_unknown: 'grey',
-}
-
-export function getPairedInsertSizeColor(
-  f1: { refName: string; tlen?: number },
-  f2: { refName: string },
-  stats?: ChainStats,
-) {
-  const sameRef = f1.refName === f2.refName
-  const tlen = Math.abs(f1.tlen || 0)
-  if (sameRef && tlen > (stats?.upper || 0)) {
-    return [fillColor.color_longinsert, strokeColor.color_longinsert] as const
-  } else if (sameRef && tlen < (stats?.lower || 0)) {
-    return [fillColor.color_shortinsert, strokeColor.color_shortinsert] as const
-  } else if (!sameRef) {
-    return [fillColor.color_interchrom, strokeColor.color_interchrom] as const
-  }
-  return undefined
-}
-
-export function getPairedInsertSizeAndOrientationColor(
-  f1: { refName: string; pair_orientation?: string; tlen?: number },
-  f2: { refName: string },
-  stats?: ChainStats,
-) {
-  return (
-    getPairedInsertSizeColor(f1, f2, stats) || getPairedOrientationColor(f1)
-  )
-}
-
-export function getPairedOrientationColor(f: { pair_orientation?: string }) {
-  const type = orientationTypes.fr
-  const type2 = pairMap[
-    type[f.pair_orientation || ''] as keyof typeof pairMap
-  ] as keyof typeof fillColor
-  return [
-    fillColor[type2] || fillColor.color_unknown,
-    strokeColor[type2] || strokeColor.color_unknown,
-  ] as const
-}

package/src/shared/fetchChains.ts

@@ -1,62 +0,0 @@
-import {
-  getContainingTrack,
-  getContainingView,
-  getSession,
-} from '@jbrowse/core/util'
-import { getSnapshot } from 'mobx-state-tree'
-import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
-import { LinearReadArcsDisplayModel } from '../LinearReadArcsDisplay/model'
-import { LinearReadCloudDisplayModel } from '../LinearReadCloudDisplay/model'
-
-type LGV = LinearGenomeViewModel
-
-export interface ReducedFeature {
-  name: string
-  strand: number
-  refName: string
-  start: number
-  end: number
-  id: string
-  flags: number
-  tlen: number
-  pair_orientation: string
-  next_ref?: string
-  next_pos?: number
-  clipPos: number
-  SA?: string
-}
-
-export interface ChainStats {
-  max: number
-  min: number
-  upper: number
-  lower: number
-}
-
-export interface ChainData {
-  chains: ReducedFeature[][]
-  stats?: ChainStats
-}
-
-export async function fetchChains(
-  self: LinearReadArcsDisplayModel | LinearReadCloudDisplayModel,
-) {
-  const { rpcSessionId: sessionId } = getContainingTrack(self)
-  const { rpcManager } = getSession(self)
-  const view = getContainingView(self) as LGV
-
-  if (!view.initialized || self.error || self.regionTooLarge) {
-    return
-  }
-
-  self.setLoading(true)
-  const ret = (await rpcManager.call(sessionId, 'PileupGetReducedFeatures', {
-    sessionId,
-    regions: view.staticBlocks.contentBlocks,
-    filterBy: getSnapshot(self.filterBy),
-    adapterConfig: self.adapterConfig,
-  })) as ChainData
-
-  self.setChainData(ret)
-  self.setLoading(false)
-}

package/src/shared/index.ts

@@ -1,75 +0,0 @@
-import { types, IAnyStateTreeNode } from 'mobx-state-tree'
-import { BlockSet } from '@jbrowse/core/util/blockTypes'
-import { getSession } from '@jbrowse/core/util'
-import { getRpcSessionId } from '@jbrowse/core/util/tracks'
-import { AnyConfigurationModel } from '@jbrowse/core/configuration'
-
-export async function getUniqueTagValues(
-  self: IAnyStateTreeNode & { adapterConfig: AnyConfigurationModel },
-  colorScheme: { type: string; tag?: string },
-  blocks: BlockSet,
-  opts?: {
-    headers?: Record<string, string>
-    signal?: AbortSignal
-    filters?: string[]
-  },
-) {
-  const { rpcManager } = getSession(self)
-  const { adapterConfig } = self
-  const sessionId = getRpcSessionId(self)
-  const values = await rpcManager.call(
-    getRpcSessionId(self),
-    'PileupGetGlobalValueForTag',
-    {
-      adapterConfig,
-      tag: colorScheme.tag,
-      sessionId,
-      regions: blocks.contentBlocks,
-      ...opts,
-    },
-  )
-  return values as string[]
-}
-
-type Track = IAnyStateTreeNode & { configuration: AnyConfigurationModel }
-
-export async function getUniqueModificationValues(
-  self: IAnyStateTreeNode & {
-    parentTrack: Track
-  },
-  adapterConfig: AnyConfigurationModel,
-  colorScheme: { type: string; tag?: string },
-  blocks: BlockSet,
-  opts?: {
-    headers?: Record<string, string>
-    signal?: AbortSignal
-    filters?: string[]
-  },
-) {
-  const { rpcManager } = getSession(self)
-  const sessionId = getRpcSessionId(self)
-  const values = await rpcManager.call(
-    sessionId,
-    'PileupGetVisibleModifications',
-    {
-      adapterConfig,
-      tag: colorScheme.tag,
-      sessionId,
-      regions: blocks.contentBlocks,
-      ...opts,
-    },
-  )
-  return values as string[]
-}
-
-export const FilterModel = types.model({
-  flagInclude: types.optional(types.number, 0),
-  flagExclude: types.optional(types.number, 1540),
-  readName: types.maybe(types.string),
-  tagFilter: types.maybe(
-    types.model({
-      tag: types.string,
-      value: types.string,
-    }),
-  ),
-})

package/src/shared/renderSvg.tsx

@@ -1,64 +0,0 @@
-import React from 'react'
-import { getContainingView } from '@jbrowse/core/util'
-import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
-
-// stabilize clipid under test for snapshot
-function getId(id: string) {
-  const isJest = typeof jest === 'undefined'
-  return `arc-clip-${isJest ? id : 'jest'}`
-}
-
-type LGV = LinearGenomeViewModel
-
-export async function renderSvg<T extends { id: string; height: number }>(
-  self: T,
-  opts: { rasterizeLayers?: boolean },
-  cb: (
-    model: T,
-    ctx: CanvasRenderingContext2D,
-    width: number,
-    height: number,
-  ) => void,
-) {
-  const view = getContainingView(self) as LGV
-  const width = view.dynamicBlocks.totalWidthPx
-  const height = self.height
-  if (opts.rasterizeLayers) {
-    const canvas = document.createElement('canvas')
-    canvas.width = width * 2
-    canvas.height = height * 2
-    const ctx = canvas.getContext('2d')
-    if (!ctx) {
-      return
-    }
-    ctx.scale(2, 2)
-    cb(self, ctx, width, height)
-    return (
-      <image
-        width={width}
-        height={height}
-        xlinkHref={canvas.toDataURL('image/png')}
-      />
-    )
-  } else {
-    // @ts-ignore
-    const C2S = await import('canvas2svg')
-    const ctx = new C2S.default(width, height)
-    cb(self, ctx, width, height)
-    const clipid = getId(self.id)
-    return (
-      <>
-        <defs>
-          <clipPath id={clipid}>
-            <rect x={0} y={0} width={width} height={height} />
-          </clipPath>
-        </defs>
-        <g
-          /* eslint-disable-next-line react/no-danger */
-          dangerouslySetInnerHTML={{ __html: ctx.getSvg().innerHTML }}
-          clipPath={`url(#${clipid})`}
-        />
-      </>
-    )
-  }
-}

package/src/shared/util.ts

@@ -1,10 +0,0 @@
-import { ChainData } from './fetchChains'
-
-export function hasPairedReads(features: ChainData) {
-  for (const f of features.chains.values()) {
-    if (f[0].flags & 1) {
-      return true
-    }
-  }
-  return false
-}