@jbrowse/plugin-alignments 2.2.1 → 2.3.0

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/SetFeatureHeight.tsx

@@ -3,37 +3,23 @@ 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: {
-    setFeatureHeight: Function
-    setNoSpacing: Function
+    setFeatureHeight: (arg?: number) => void
+    setNoSpacing: (arg?: boolean) => void
     featureHeightSetting: number
     noSpacing?: boolean
   }
   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
@@ -58,9 +38,7 @@ function SetFeatureHeightDlg(props: {
         <TextField
           value={height}
           helperText="Feature height"
-          onChange={event => {
-            setHeight(event.target.value)
-          }}
+          onChange={event => setHeight(event.target.value)}
         />
         <FormControlLabel
           control={

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/LinearPileupDisplay/configSchema.ts

@@ -1,6 +1,6 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration'
 import { linearBasicDisplayConfigSchemaFactory } from '@jbrowse/plugin-linear-genome-view'
-import { types, Instance } from 'mobx-state-tree'
+import { types } from 'mobx-state-tree'
 import PluginManager from '@jbrowse/core/PluginManager'
 
 /**
@@ -64,6 +64,4 @@ function configSchemaF(pluginManager: PluginManager) {
   )
 }
 
-export type LinearPileupDisplayConfigModel = ReturnType<typeof configSchemaF>
-export type LinearPileupDisplayConfig = Instance<LinearPileupDisplayConfigModel>
 export default configSchemaF

package/src/LinearPileupDisplay/index.ts

@@ -9,8 +9,10 @@ export default function register(pluginManager: PluginManager) {
     const configSchema = configSchemaFactory(pluginManager)
     return new DisplayType({
       name: 'LinearPileupDisplay',
+      displayName: 'Pileup display',
       configSchema,
       stateModel: modelFactory(configSchema),
+      subDisplay: { type: 'LinearAlignmentsDisplay', lowerPanel: true },
       trackType: 'AlignmentsTrack',
       viewType: 'LinearGenomeView',
       ReactComponent: BaseLinearDisplayComponent,

package/src/LinearPileupDisplay/model.ts

@@ -4,6 +4,7 @@ import { cast, types, addDisposer, Instance } from 'mobx-state-tree'
 import copy from 'copy-to-clipboard'
 import {
   AnyConfigurationModel,
+  AnyConfigurationSchemaType,
   ConfigurationReference,
   readConfObject,
   getConf,
@@ -32,14 +33,17 @@ 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 {
+  getUniqueTagValues,
+  getUniqueModificationValues,
+  FilterModel,
+} from '../shared'
 import { SimpleFeatureSerialized } from '@jbrowse/core/util/simpleFeature'
 
 // async
+const FilterByTagDlg = lazy(() => import('../shared/FilterByTag'))
 const ColorByTagDlg = lazy(() => import('./components/ColorByTag'))
-const FilterByTagDlg = lazy(() => import('./components/FilterByTag'))
 const SortByTagDlg = lazy(() => import('./components/SortByTag'))
 const SetFeatureHeightDlg = lazy(() => import('./components/SetFeatureHeight'))
 const SetMaxHeightDlg = lazy(() => import('./components/SetMaxHeight'))
@@ -57,7 +61,7 @@ type LGV = LinearGenomeViewModel
  * #stateModel LinearPileupDisplay
  * extends `BaseLinearDisplay`
  */
-function stateModelFactory(configSchema: LinearPileupDisplayConfigModel) {
+function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
   return types
     .compose(
       'LinearPileupDisplay',
@@ -122,17 +126,7 @@ function stateModelFactory(configSchema: LinearPileupDisplayConfigModel) {
         /**
          * #property
          */
-        filterBy: types.optional(
-          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 }),
-            ),
-          }),
-          {},
-        ),
+        filterBy: types.optional(FilterModel, {}),
       }),
     )
     .volatile(() => ({
@@ -164,13 +158,13 @@ function stateModelFactory(configSchema: LinearPileupDisplayConfigModel) {
       /**
        * #action
        */
-      setFeatureHeight(n: number) {
+      setFeatureHeight(n?: number) {
         self.featureHeight = n
       },
       /**
        * #action
        */
-      setNoSpacing(flag: boolean) {
+      setNoSpacing(flag?: boolean) {
         self.noSpacing = flag
       },
 
@@ -788,12 +782,31 @@ function stateModelFactory(configSchema: LinearPileupDisplayConfigModel) {
             },
             {
               label: 'Set feature height',
-              onClick: () => {
-                getSession(self).queueDialog(doneCallback => [
-                  SetFeatureHeightDlg,
-                  { model: self, handleClose: doneCallback },
-                ])
-              },
+              subMenu: [
+                {
+                  label: 'Normal',
+                  onClick: () => {
+                    self.setFeatureHeight(7)
+                    self.setNoSpacing(false)
+                  },
+                },
+                {
+                  label: 'Compact',
+                  onClick: () => {
+                    self.setFeatureHeight(2)
+                    self.setNoSpacing(true)
+                  },
+                },
+                {
+                  label: 'Manually set height',
+                  onClick: () => {
+                    getSession(self).queueDialog(doneCallback => [
+                      SetFeatureHeightDlg,
+                      { model: self, handleClose: doneCallback },
+                    ])
+                  },
+                },
+              ],
             },
             {
               label: 'Set max height',

package/src/LinearReadArcsDisplay/components/ReactComponent.tsx

@@ -0,0 +1,86 @@
+import React from 'react'
+import { isAlive } from 'mobx-state-tree'
+import { makeStyles } from 'tss-react/mui'
+import { observer } from 'mobx-react'
+import { getContainingView } from '@jbrowse/core/util'
+import { LoadingEllipses } from '@jbrowse/core/ui'
+import {
+  BlockMsg,
+  LinearGenomeViewModel,
+} from '@jbrowse/plugin-linear-genome-view'
+
+// local
+import { LinearReadArcsDisplayModel } from '../model'
+
+type LGV = LinearGenomeViewModel
+
+const useStyles = makeStyles()(theme => ({
+  loading: {
+    paddingLeft: '0.6em',
+    backgroundColor: theme.palette.action.disabledBackground,
+    backgroundImage:
+      'repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,.5) 5px, rgba(255,255,255,.5) 10px)',
+    height: '100%',
+    width: '100%',
+    pointerEvents: 'none',
+    textAlign: 'center',
+  },
+}))
+
+const Arcs = observer(function ({
+  model,
+}: {
+  model: LinearReadArcsDisplayModel
+}) {
+  const view = getContainingView(model) as LGV
+  return (
+    <canvas
+      data-testid={`Arc-display-${model.drawn}`}
+      ref={ref => {
+        if (isAlive(model)) {
+          model.setRef(ref)
+        }
+      }}
+      style={{
+        position: 'absolute',
+        left: -view.offsetPx + model.lastDrawnOffsetPx,
+        width: view.dynamicBlocks.totalWidthPx,
+        height: model.height,
+      }}
+      width={view.dynamicBlocks.totalWidthPx * 2}
+      height={model.height * 2}
+    />
+  )
+})
+
+export default observer(function ({
+  model,
+}: {
+  model: LinearReadArcsDisplayModel
+}) {
+  const view = getContainingView(model)
+  const { classes } = useStyles()
+  const err = model.error
+  return err ? (
+    <BlockMsg
+      message={`${err}`}
+      severity="error"
+      buttonText={'Reload'}
+      action={model.reload}
+    />
+  ) : model.loading ? (
+    <div
+      className={classes.loading}
+      style={{
+        width: view.dynamicBlocks.totalWidthPx,
+        height: 20,
+        position: 'absolute',
+        left: Math.max(0, -view.offsetPx),
+      }}
+    >
+      <LoadingEllipses message={model.message} />
+    </div>
+  ) : (
+    <Arcs model={model} />
+  )
+})

package/src/LinearReadArcsDisplay/configSchema.ts

@@ -0,0 +1,58 @@
+import PluginManager from '@jbrowse/core/PluginManager'
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+import { linearBasicDisplayConfigSchemaFactory } from '@jbrowse/plugin-linear-genome-view'
+import { types } from 'mobx-state-tree'
+
+/**
+ * #config LinearReadArcsDisplay
+ */
+function configSchemaF(pluginManager: PluginManager) {
+  return ConfigurationSchema(
+    'LinearReadArcsDisplay',
+    {
+      /**
+       * #slot
+       */
+      maxFeatureScreenDensity: {
+        type: 'number',
+        description: 'maximum features per pixel that is displayed in the view',
+        defaultValue: 5,
+      },
+
+      /**
+       * #slot
+       */
+      lineWidth: {
+        type: 'number',
+        description: 'set arc line width',
+        defaultValue: 1,
+      },
+
+      /**
+       * #slot
+       */
+      colorScheme: {
+        type: 'stringEnum',
+        model: types.enumeration('colorScheme', [
+          'strand',
+          'normal',
+          'insertSize',
+          'insertSizeAndOrientation',
+          'mappingQuality',
+          'tag',
+        ]),
+        description: 'color scheme to use',
+        defaultValue: 'normal',
+      },
+    },
+    {
+      /**
+       * #baseConfiguration
+       */
+      baseConfiguration: linearBasicDisplayConfigSchemaFactory(pluginManager),
+      explicitlyTyped: true,
+    },
+  )
+}
+
+export default configSchemaF

package/src/LinearReadArcsDisplay/declare.d.ts

@@ -0,0 +1 @@
+declare module 'canvas2svg'