@jbrowse/plugin-alignments 2.6.1 → 2.6.2

package/src/LinearAlignmentsDisplay/models/model.tsx

@@ -1,403 +0,0 @@
-import React from 'react'
-import { autorun, when } from 'mobx'
-import {
-  addDisposer,
-  getSnapshot,
-  isAlive,
-  types,
-  Instance,
-  IStateTreeNode,
-} from 'mobx-state-tree'
-import deepEqual from 'fast-deep-equal'
-
-// jbrowse
-import {
-  ConfigurationReference,
-  AnyConfigurationModel,
-  AnyConfigurationSchemaType,
-  getConf,
-} from '@jbrowse/core/configuration'
-import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes/models'
-import PluginManager from '@jbrowse/core/PluginManager'
-import { MenuItem } from '@jbrowse/core/ui'
-import { FeatureDensityStats } from '@jbrowse/core/data_adapters/BaseAdapter'
-
-const minDisplayHeight = 20
-
-function getLowerPanelDisplays(pluginManager: PluginManager) {
-  return (
-    pluginManager
-      .getDisplayElements()
-      // @ts-expect-error
-      .filter(f => f.subDisplay?.type === 'LinearAlignmentsDisplay')
-      // @ts-expect-error
-      .filter(f => f.subDisplay?.lowerPanel)
-  )
-}
-
-function deepSnap<T extends IStateTreeNode, U extends IStateTreeNode>(
-  x1: T,
-  x2: U,
-) {
-  return deepEqual(
-    x1 ? getSnapshot(x1) : undefined,
-    x2 ? getSnapshot(x2) : undefined,
-  )
-}
-
-function preCheck(self: AlignmentsDisplayModel) {
-  const { PileupDisplay, SNPCoverageDisplay } = self
-  return (
-    PileupDisplay ||
-    isAlive(PileupDisplay) ||
-    SNPCoverageDisplay ||
-    isAlive(SNPCoverageDisplay)
-  )
-}
-
-function propagateColorBy(self: AlignmentsDisplayModel) {
-  const { PileupDisplay, SNPCoverageDisplay } = self
-  if (!preCheck(self) || !PileupDisplay.colorBy) {
-    return
-  }
-  if (!deepSnap(PileupDisplay.colorBy, SNPCoverageDisplay.colorBy)) {
-    SNPCoverageDisplay.setColorBy(getSnapshot(PileupDisplay.colorBy))
-  }
-}
-
-function propagateFilterBy(self: AlignmentsDisplayModel) {
-  const { PileupDisplay, SNPCoverageDisplay } = self
-  if (!preCheck(self) || !PileupDisplay.filterBy) {
-    return
-  }
-  if (!deepSnap(PileupDisplay.filterBy, SNPCoverageDisplay.filterBy)) {
-    SNPCoverageDisplay.setFilterBy(getSnapshot(PileupDisplay.filterBy))
-  }
-}
-
-function AlignmentsModel(
-  pluginManager: PluginManager,
-  configSchema: AnyConfigurationSchemaType,
-) {
-  const lowerPanelDisplays = getLowerPanelDisplays(pluginManager).map(
-    f => f.stateModel,
-  )
-
-  return types.model({
-    /**
-     * #property
-     * refers to LinearPileupDisplay sub-display model
-     */
-    PileupDisplay: types.maybe(types.union(...lowerPanelDisplays)),
-    /**
-     * #property
-     * refers to LinearSNPCoverageDisplay sub-display model
-     */
-    SNPCoverageDisplay: types.maybe(
-      pluginManager.getDisplayType('LinearSNPCoverageDisplay').stateModel,
-    ),
-    /**
-     * #property
-     */
-    snpCovHeight: 45,
-    /**
-     * #property
-     */
-    type: types.literal('LinearAlignmentsDisplay'),
-    /**
-     * #property
-     */
-    configuration: ConfigurationReference(configSchema),
-    /**
-     * #property
-     */
-    heightPreConfig: types.maybe(types.number),
-    /**
-     * #property
-     */
-    userFeatureScreenDensity: types.maybe(types.number),
-    /**
-     * #property
-     */
-    lowerPanelType: 'LinearPileupDisplay',
-  })
-}
-
-/**
- * #stateModel LinearAlignmentsDisplay
- * extends `BaseDisplay`
- */
-function stateModelFactory(
-  pluginManager: PluginManager,
-  configSchema: AnyConfigurationSchemaType,
-) {
-  return types
-    .compose(
-      'LinearAlignmentsDisplay',
-      BaseDisplay,
-      AlignmentsModel(pluginManager, configSchema),
-    )
-    .volatile(() => ({
-      scrollTop: 0,
-    }))
-    .actions(self => ({
-      /**
-       * #action
-       */
-      setScrollTop(scrollTop: number) {
-        self.scrollTop = scrollTop
-      },
-
-      /**
-       * #action
-       */
-      setSNPCoverageHeight(n: number) {
-        self.snpCovHeight = n
-      },
-    }))
-    .views(self => ({
-      /**
-       * #getter
-       */
-      get height() {
-        return self.heightPreConfig ?? getConf(self, 'height')
-      },
-
-      get featureIdUnderMouse() {
-        return (
-          self.PileupDisplay.featureIdUnderMouse ||
-          self.SNPCoverageDisplay.featureIdUnderMouse
-        )
-      },
-    }))
-    .views(self => ({
-      /**
-       * #getter
-       */
-      get pileupConf() {
-        const conf = getConf(self, 'pileupDisplay')
-        return {
-          ...conf,
-          type: self.lowerPanelType,
-          displayId: `${self.configuration.displayId}_${self.lowerPanelType}_xyz`, // xyz to avoid someone accidentally naming the displayId similar to this
-        }
-      },
-
-      /**
-       * #method
-       */
-      getFeatureByID(blockKey: string, id: string) {
-        return self.PileupDisplay.getFeatureByID(blockKey, id)
-      },
-      /**
-       * #method
-       */
-      searchFeatureByID(id: string) {
-        return self.PileupDisplay.searchFeatureByID(id)
-      },
-
-      /**
-       * #getter
-       */
-      get features() {
-        return self.PileupDisplay.features
-      },
-
-      /**
-       * #getter
-       */
-      get DisplayBlurb() {
-        return self.PileupDisplay?.DisplayBlurb
-      },
-
-      /**
-       * #getter
-       */
-      get sortedBy() {
-        return self.PileupDisplay.sortedBy
-      },
-
-      /**
-       * #getter
-       */
-      get coverageConf() {
-        const conf = getConf(self, 'snpCoverageDisplay')
-        return {
-          ...conf,
-          displayId: `${self.configuration.displayId}_snpcoverage_xyz`, // xyz to avoid someone accidentally naming the displayId similar to this
-        }
-      },
-    }))
-    .actions(self => ({
-      /**
-       * #action
-       */
-      setSNPCoverageDisplay(configuration: AnyConfigurationModel) {
-        self.SNPCoverageDisplay = {
-          type: 'LinearSNPCoverageDisplay',
-          configuration,
-          height: self.snpCovHeight,
-        }
-      },
-      /**
-       * #action
-       */
-      setFeatureDensityStatsLimit(stats?: FeatureDensityStats) {
-        self.PileupDisplay.setFeatureDensityStatsLimit(stats)
-        self.SNPCoverageDisplay.setFeatureDensityStatsLimit(stats)
-      },
-
-      /**
-       * #action
-       */
-      setPileupDisplay(configuration: AnyConfigurationModel) {
-        self.PileupDisplay = {
-          type: configuration.type || 'LinearPileupDisplay',
-          configuration,
-        }
-      },
-      /**
-       * #action
-       */
-      setHeight(n: number) {
-        self.heightPreConfig = Math.max(n, minDisplayHeight)
-        return self.heightPreConfig
-      },
-      /**
-       * #action
-       */
-      setLowerPanelType(type: string) {
-        self.lowerPanelType = type
-      },
-      /**
-       * #action
-       */
-      resizeHeight(distance: number) {
-        const oldHeight = self.height
-        const newHeight = this.setHeight(self.height + distance)
-        return newHeight - oldHeight
-      },
-    }))
-    .actions(self => ({
-      afterAttach() {
-        addDisposer(
-          self,
-          autorun(() => {
-            const {
-              SNPCoverageDisplay,
-              PileupDisplay,
-              coverageConf,
-              pileupConf,
-            } = self
-
-            if (!SNPCoverageDisplay) {
-              self.setSNPCoverageDisplay(coverageConf)
-            } else if (
-              !deepEqual(
-                coverageConf,
-                getSnapshot(SNPCoverageDisplay.configuration),
-              )
-            ) {
-              SNPCoverageDisplay.setHeight(self.snpCovHeight)
-              SNPCoverageDisplay.setConfig(self.coverageConf)
-            }
-
-            if (!PileupDisplay || self.lowerPanelType !== PileupDisplay.type) {
-              self.setPileupDisplay(pileupConf)
-            } else if (
-              !deepEqual(pileupConf, getSnapshot(PileupDisplay.configuration))
-            ) {
-              PileupDisplay.setConfig(self.pileupConf)
-            }
-
-            propagateColorBy(self as AlignmentsDisplayModel)
-            propagateFilterBy(self as AlignmentsDisplayModel)
-          }),
-        )
-
-        addDisposer(
-          self,
-          autorun(() => {
-            self.setSNPCoverageHeight(self.SNPCoverageDisplay.height)
-          }),
-        )
-
-        addDisposer(
-          self,
-          autorun(() => {
-            self.PileupDisplay.setHeight(
-              self.height - self.SNPCoverageDisplay.height,
-            )
-          }),
-        )
-      },
-      /**
-       * #action
-       */
-      async renderSvg(opts: { rasterizeLayers?: boolean }) {
-        const pileupHeight = self.height - self.SNPCoverageDisplay.height
-        await when(
-          () =>
-            !self.PileupDisplay.renderProps().notReady &&
-            !self.SNPCoverageDisplay.renderProps().notReady,
-        )
-        return (
-          <>
-            <g>{await self.SNPCoverageDisplay.renderSvg(opts)}</g>
-            <g transform={`translate(0 ${self.SNPCoverageDisplay.height})`}>
-              {await self.PileupDisplay.renderSvg({
-                ...opts,
-                overrideHeight: pileupHeight,
-              })}
-            </g>
-          </>
-        )
-      },
-    }))
-    .views(self => {
-      const { trackMenuItems: superTrackMenuItems } = self
-      return {
-        /**
-         * #method
-         */
-        trackMenuItems(): MenuItem[] {
-          const extra = getLowerPanelDisplays(pluginManager).map(d => ({
-            type: 'radio',
-            label: d.displayName,
-            checked: d.name === self.PileupDisplay.type,
-            onClick: () => self.setLowerPanelType(d.name),
-          }))
-          return [
-            ...superTrackMenuItems(),
-            {
-              type: 'subMenu',
-              label: 'Pileup settings',
-              subMenu: self.PileupDisplay.trackMenuItems(),
-            },
-            {
-              type: 'subMenu',
-              label: 'SNPCoverage settings',
-              subMenu: self.SNPCoverageDisplay.trackMenuItems(),
-            },
-            {
-              type: 'subMenu',
-              label: `Replace lower panel with...`,
-              subMenu: extra,
-            },
-          ]
-        },
-      }
-    })
-    .preProcessSnapshot(snap => {
-      if (!snap) {
-        return snap
-      }
-      // @ts-expect-error
-      const { height, ...rest } = snap
-      return { heightPreConfig: height, ...rest }
-    })
-}
-
-export default stateModelFactory
-export type AlignmentsDisplayStateModel = ReturnType<typeof stateModelFactory>
-export type AlignmentsDisplayModel = Instance<AlignmentsDisplayStateModel>

package/src/LinearPileupDisplay/components/ColorByModifications.tsx

@@ -1,102 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react'
-import { ObservableMap } from 'mobx'
-import {
-  Button,
-  CircularProgress,
-  DialogActions,
-  DialogContent,
-  Typography,
-} from '@mui/material'
-import { Dialog } from '@jbrowse/core/ui'
-import ModificationTable from './ModificationsTable'
-
-function ColorByTagDlg(props: {
-  model: {
-    setColorScheme: (arg: { type: string }) => void
-    modificationTagMap: ObservableMap<string, string>
-    colorBy?: { type: string }
-  }
-  handleClose: () => void
-}) {
-  const { model, handleClose } = props
-  const { colorBy, modificationTagMap } = model
-
-  const modifications = [...modificationTagMap.entries()]
-
-  return (
-    <Dialog open onClose={handleClose} title="Color by modifications">
-      <DialogContent>
-        <Typography>
-          You can choose to color the modifications in the BAM/CRAM MM/ML
-          specification using this dialog. Choosing modifications colors the
-          modified positions and can color multiple modification types. Choosing
-          the methylation setting colors methylated and unmethylated CpG.
-        </Typography>
-        <Typography>
-          Note: you can revisit this dialog to see the current mapping of colors
-          to modification type for the modification coloring mode
-        </Typography>
-        <div style={{ margin: 20 }}>
-          {colorBy?.type === 'modifications' ? (
-            <div>
-              {modifications.length ? (
-                <>
-                  Current modification-type-to-color mapping
-                  <ModificationTable
-                    modifications={[...modificationTagMap.entries()]}
-                  />
-                </>
-              ) : (
-                <>
-                  <Typography>
-                    Note: color by modifications is already enabled. Loading
-                    current modifications...
-                  </Typography>
-                  <CircularProgress size={15} />
-                </>
-              )}
-            </div>
-          ) : null}
-          {colorBy?.type === 'methylation' ? (
-            <ModificationTable
-              modifications={[
-                ['methylated', 'red'],
-                ['unmethylated', 'blue'],
-              ]}
-            />
-          ) : null}
-        </div>
-        <DialogActions>
-          <Button
-            variant="contained"
-            onClick={() => {
-              model.setColorScheme({ type: 'modifications' })
-              handleClose()
-            }}
-          >
-            Modifications
-          </Button>
-          <Button
-            variant="contained"
-            onClick={() => {
-              model.setColorScheme({ type: 'methylation' })
-              handleClose()
-            }}
-          >
-            Methylation
-          </Button>
-          <Button
-            variant="contained"
-            color="secondary"
-            onClick={() => handleClose()}
-          >
-            Cancel
-          </Button>
-        </DialogActions>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-export default observer(ColorByTagDlg)

package/src/LinearPileupDisplay/components/ColorByTag.tsx

@@ -1,61 +0,0 @@
-import React, { useState } from 'react'
-import { observer } from 'mobx-react'
-import {
-  Button,
-  DialogContent,
-  DialogActions,
-  TextField,
-  Typography,
-} from '@mui/material'
-import { Dialog } from '@jbrowse/core/ui'
-
-function ColorByTagDlg(props: {
-  model: { setColorScheme: Function }
-  handleClose: () => void
-}) {
-  const { model, handleClose } = props
-  const [tag, setTag] = useState('')
-  const validTag = tag.match(/^[A-Za-z][A-Za-z0-9]$/)
-
-  return (
-    <Dialog open onClose={handleClose} title="Color by tag">
-      <DialogContent style={{ overflowX: 'hidden' }}>
-        <Typography>Enter tag to color by: </Typography>
-        <Typography color="textSecondary">
-          Examples: XS or TS for RNA-seq inferred read strand, ts (lower-case)
-          for minimap2 read strand, HP for haplotype, RG for read group, etc.
-        </Typography>
-
-        <TextField
-          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' : ''}
-          autoComplete="off"
-        />
-        <DialogActions>
-          <Button
-            variant="contained"
-            color="primary"
-            onClick={() => {
-              model.setColorScheme({ type: 'tag', tag })
-              handleClose()
-            }}
-            disabled={!validTag}
-          >
-            Submit
-          </Button>
-          <Button variant="contained" color="secondary" onClick={handleClose}>
-            Cancel
-          </Button>
-        </DialogActions>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-export default observer(ColorByTagDlg)

package/src/LinearPileupDisplay/components/LinearPileupDisplayBlurb.tsx

@@ -1,32 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react'
-import { Typography } from '@mui/material'
-
-export interface LinearPileupDisplayBlurbProps {
-  model: {
-    sortedBy?: {
-      pos: number
-      refName: number
-      type: string
-      tag?: string
-    }
-  }
-}
-
-export default observer(function LinearPileupDisplayBlurb(
-  props: LinearPileupDisplayBlurbProps,
-) {
-  const { model } = props
-  const { sortedBy } = model
-  return sortedBy ? (
-    <div data-testid={`blurb-${sortedBy}`}>
-      <Typography color="secondary" variant="caption">
-        {sortedBy
-          ? `Sorted by ${sortedBy.tag ?? sortedBy.type} at ${
-              sortedBy.refName
-            }:${sortedBy.pos}`
-          : null}
-      </Typography>
-    </div>
-  ) : null
-})

package/src/LinearPileupDisplay/components/ModificationsTable.tsx

@@ -1,38 +0,0 @@
-import React from 'react'
-import { makeStyles } from 'tss-react/mui'
-
-const useStyles = makeStyles()(theme => ({
-  table: {
-    border: '1px solid #888',
-    margin: theme.spacing(4),
-    '& td': {
-      padding: theme.spacing(1),
-    },
-  },
-}))
-
-export default function ModificationTable({
-  modifications,
-}: {
-  modifications: [string, string | undefined][]
-}) {
-  const { classes } = useStyles()
-  return (
-    <table className={classes.table}>
-      <tbody>
-        {modifications.map(([key, value]) => (
-          <tr key={key}>
-            <td>{key}</td>
-            <td>{value}</td>
-            <td
-              style={{
-                width: '1em',
-                background: value,
-              }}
-            />
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  )
-}