@jbrowse/plugin-alignments 1.6.7 → 1.7.0

package/src/LinearPileupDisplay/components/ColorByTag.tsx

@@ -4,6 +4,7 @@ import {
   Button,
   Dialog,
   DialogContent,
+  DialogActions,
   DialogTitle,
   IconButton,
   TextField,
@@ -46,32 +47,29 @@ function ColorByTagDlg(props: {
         </IconButton>
       </DialogTitle>
       <DialogContent style={{ overflowX: 'hidden' }}>
-        <div className={classes.root}>
-          <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>
+        <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,
-              'data-testid': 'color-tag-name-input',
-            }}
-            error={tag.length === 2 && !validTag}
-            helperText={tag.length === 2 && !validTag ? 'Not a valid tag' : ''}
-            autoComplete="off"
-            data-testid="color-tag-name"
-          />
+        <TextField
+          value={tag}
+          onChange={event => setTag(event.target.value)}
+          placeholder="Enter tag name"
+          inputProps={{
+            maxLength: 2,
+            'data-testid': 'color-tag-name-input',
+          }}
+          error={tag.length === 2 && !validTag}
+          helperText={tag.length === 2 && !validTag ? 'Not a valid tag' : ''}
+          autoComplete="off"
+          data-testid="color-tag-name"
+        />
+        <DialogActions>
           <Button
             variant="contained"
             color="primary"
-            style={{ marginLeft: 20 }}
             onClick={() => {
               model.setColorScheme({
                 type: 'tag',
@@ -83,7 +81,10 @@ function ColorByTagDlg(props: {
           >
             Submit
           </Button>
-        </div>
+          <Button variant="contained" color="secondary" onClick={handleClose}>
+            Cancel
+          </Button>
+        </DialogActions>
       </DialogContent>
     </Dialog>
   )

package/src/LinearPileupDisplay/components/FilterByTag.tsx

@@ -3,6 +3,7 @@ import { observer } from 'mobx-react'
 import {
   Button,
   Dialog,
+  DialogActions,
   DialogContent,
   DialogTitle,
   IconButton,
@@ -16,9 +17,6 @@ import {
 import CloseIcon from '@material-ui/icons/Close'
 
 const useStyles = makeStyles(theme => ({
-  root: {
-    width: 500,
-  },
   paper: {
     padding: theme.spacing(2),
     margin: theme.spacing(2),
@@ -123,74 +121,74 @@ function FilterByTagDlg(props: {
           Set filter bitmask options. Refer to <Link href={site}>{site}</Link>{' '}
           for details
         </Typography>
-        <div className={classes.root}>
-          <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>
+        <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>
-          </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,
-                'data-testid': 'color-tag-name-input',
-              }}
-              error={tag.length === 2 && !validTag}
-              helperText={
-                tag.length === 2 && !validTag ? 'Not a valid tag' : ''
-              }
-              data-testid="color-tag-name"
-            />
-            <TextField
-              className={classes.field}
-              value={tagValue}
-              onChange={event => {
-                setTagValue(event.target.value)
-              }}
-              placeholder="Enter tag value"
-              inputProps={{
-                'data-testid': 'color-tag-name-input',
-              }}
-              data-testid="color-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"
-              inputProps={{
-                'data-testid': 'color-tag-readname-input',
-              }}
-              data-testid="color-tag-readname"
-            />
-          </Paper>
+            <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,
+              'data-testid': 'color-tag-name-input',
+            }}
+            error={tag.length === 2 && !validTag}
+            helperText={tag.length === 2 && !validTag ? 'Not a valid tag' : ''}
+            data-testid="color-tag-name"
+          />
+          <TextField
+            className={classes.field}
+            value={tagValue}
+            onChange={event => {
+              setTagValue(event.target.value)
+            }}
+            placeholder="Enter tag value"
+            inputProps={{
+              'data-testid': 'color-tag-name-input',
+            }}
+            data-testid="color-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"
+            inputProps={{
+              'data-testid': 'color-tag-readname-input',
+            }}
+            data-testid="color-tag-readname"
+          />
+        </Paper>
+        <DialogActions>
           <Button
             variant="contained"
             color="primary"
+            autoFocus
+            type="submit"
             onClick={() => {
               model.setFilterBy({
                 flagInclude,
@@ -209,7 +207,14 @@ function FilterByTagDlg(props: {
           >
             Submit
           </Button>
-        </div>
+          <Button
+            variant="contained"
+            color="secondary"
+            onClick={() => handleClose()}
+          >
+            Cancel
+          </Button>
+        </DialogActions>
       </DialogContent>
     </Dialog>
   )

package/src/LinearPileupDisplay/components/SetFeatureHeight.tsx

@@ -6,6 +6,7 @@ import {
   Typography,
   IconButton,
   Dialog,
+  DialogActions,
   DialogContent,
   DialogTitle,
   Checkbox,
@@ -15,9 +16,6 @@ import {
 import CloseIcon from '@material-ui/icons/Close'
 
 const useStyles = makeStyles(theme => ({
-  root: {
-    margin: theme.spacing(4),
-  },
   closeButton: {
     position: 'absolute',
     right: theme.spacing(1),
@@ -42,7 +40,6 @@ function SetFeatureHeightDlg(props: {
   const classes = useStyles()
   const { model, handleClose } = props
   const { featureHeightSetting, noSpacing: noSpacingSetting } = model
-
   const [height, setHeight] = useState(`${featureHeightSetting}`)
   const [noSpacing, setNoSpacing] = useState(noSpacingSetting)
 
@@ -60,44 +57,49 @@ function SetFeatureHeightDlg(props: {
         <Typography>
           Adjust the feature height and whether there is any spacing between
           features. Setting feature height to 1 and removing spacing makes the
-          display very compact
+          display very compact.
         </Typography>
-        <div className={classes.root}>
-          <Typography>Enter feature height: </Typography>
-          <TextField
-            value={height}
-            onChange={event => {
-              setHeight(event.target.value)
-            }}
-          />
-          <FormControlLabel
-            control={
-              <Checkbox
-                checked={!!noSpacing}
-                onChange={() => setNoSpacing(val => !val)}
-              />
-            }
-            label="Remove spacing between features in y-direction?"
-          />
-
+        <TextField
+          value={height}
+          helperText="Feature height"
+          onChange={event => {
+            setHeight(event.target.value)
+          }}
+        />
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={!!noSpacing}
+              onChange={() => setNoSpacing(val => !val)}
+            />
+          }
+          label="Remove spacing between features in y-direction?"
+        />
+        <DialogActions>
           <Button
             variant="contained"
             color="primary"
             type="submit"
-            style={{ marginLeft: 20 }}
+            autoFocus
             disabled={!ok}
             onClick={() => {
               model.setFeatureHeight(
                 height !== '' && !Number.isNaN(+height) ? +height : undefined,
               )
               model.setNoSpacing(noSpacing)
-
               handleClose()
             }}
           >
             Submit
           </Button>
-        </div>
+          <Button
+            variant="contained"
+            color="secondary"
+            onClick={() => handleClose()}
+          >
+            Cancel
+          </Button>
+        </DialogActions>
       </DialogContent>
     </Dialog>
   )

package/src/LinearPileupDisplay/components/SetMaxHeight.tsx

@@ -3,6 +3,7 @@ import { observer } from 'mobx-react'
 import {
   Button,
   Dialog,
+  DialogActions,
   DialogContent,
   DialogTitle,
   IconButton,
@@ -41,7 +42,7 @@ function SetMaxHeightDlg(props: {
 
   return (
     <Dialog open onClose={handleClose}>
-      <DialogTitle id="alert-dialog-title">
+      <DialogTitle>
         Filter options
         <IconButton
           aria-label="close"
@@ -51,21 +52,24 @@ function SetMaxHeightDlg(props: {
           <CloseIcon />
         </IconButton>
       </DialogTitle>
-      <DialogContent>
-        <div className={classes.root}>
-          <Typography>Set max height for the track</Typography>
-          <TextField
-            value={max}
-            onChange={event => {
-              setMax(event.target.value)
-            }}
-            placeholder="Enter max height for layout"
-          />
+      <DialogContent className={classes.root}>
+        <Typography>
+          Set max height for the track. For example, you can increase this if
+          the layout says &quot;Max height reached&quot;
+        </Typography>
+        <TextField
+          value={max}
+          onChange={event => {
+            setMax(event.target.value)
+          }}
+          placeholder="Enter max height for layout"
+        />
+        <DialogActions>
           <Button
             variant="contained"
             color="primary"
             type="submit"
-            style={{ marginLeft: 20 }}
+            autoFocus
             onClick={() => {
               model.setMaxHeight(
                 max !== '' && !Number.isNaN(+max) ? +max : undefined,
@@ -75,7 +79,14 @@ function SetMaxHeightDlg(props: {
           >
             Submit
           </Button>
-        </div>
+          <Button
+            variant="contained"
+            color="secondary"
+            onClick={() => handleClose()}
+          >
+            Cancel
+          </Button>
+        </DialogActions>
       </DialogContent>
     </Dialog>
   )

package/src/LinearPileupDisplay/components/SortByTag.tsx

@@ -3,6 +3,7 @@ import { observer } from 'mobx-react'
 import {
   Button,
   Dialog,
+  DialogActions,
   DialogContent,
   DialogTitle,
   IconButton,
@@ -47,29 +48,29 @@ function SortByTagDlg(props: {
         </IconButton>
       </DialogTitle>
       <DialogContent>
-        <div>
-          <Typography>Set the tag to sort by</Typography>
-          <Typography color="textSecondary">
-            Examples: 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,
-              'data-testid': 'sort-tag-name-input',
-            }}
-            error={tag.length === 2 && !validTag}
-            helperText={tag.length === 2 && !validTag ? 'Not a valid tag' : ''}
-            autoComplete="off"
-            data-testid="sort-tag-name"
-          />
+        <Typography>Set the tag to sort by</Typography>
+        <Typography color="textSecondary">
+          Examples: 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,
+            'data-testid': 'sort-tag-name-input',
+          }}
+          error={tag.length === 2 && !validTag}
+          helperText={tag.length === 2 && !validTag ? 'Not a valid tag' : ''}
+          autoComplete="off"
+          data-testid="sort-tag-name"
+        />
+        <DialogActions>
           <Button
             variant="contained"
             color="primary"
+            type="submit"
+            autoFocus
             onClick={() => {
               model.setSortedBy('tag', tag)
               handleClose()
@@ -77,7 +78,14 @@ function SortByTagDlg(props: {
           >
             Submit
           </Button>
-        </div>
+          <Button
+            variant="contained"
+            color="secondary"
+            onClick={() => handleClose()}
+          >
+            Cancel
+          </Button>
+        </DialogActions>
       </DialogContent>
     </Dialog>
   )

package/src/LinearPileupDisplay/model.ts

@@ -27,7 +27,6 @@ import FilterListIcon from '@material-ui/icons/ClearAll'
 
 import { autorun, observable } from 'mobx'
 import { AnyConfigurationModel } from '@jbrowse/core/configuration/configurationSchema'
-import SerializableFilterChain from '@jbrowse/core/pluggableElementTypes/renderers/util/serializableFilterChain'
 import { LinearPileupDisplayConfigModel } from './configSchema'
 import LinearPileupDisplayBlurb from './components/LinearPileupDisplayBlurb'
 
@@ -377,26 +376,6 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
           return LinearPileupDisplayBlurb
         },
 
-        get filters() {
-          let filters: string[] = []
-          const { flagInclude, flagExclude, tagFilter, readName } =
-            self.filterBy
-
-          filters = [
-            `jexl:((get(feature,'flags')&${flagInclude})==${flagInclude}) && !(get(feature,'flags')&${flagExclude})`,
-          ]
-          if (tagFilter) {
-            const { tag, value } = tagFilter
-            filters.push(
-              `jexl:"${value}" =='*' ? getTag(feature,"${tag}") != undefined : getTag(feature,"${tag}") == "${value}"`,
-            )
-          }
-          if (readName) {
-            filters.push(`jexl:get(feature,'name') == "${readName}"`)
-          }
-          return new SerializableFilterChain({ filters })
-        },
-
         renderProps() {
           const view = getContainingView(self) as LGV
           const {
@@ -404,6 +383,7 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
             modificationTagMap,
             sortedBy,
             colorBy,
+            filterBy,
             rpcDriverName,
           } = self
 
@@ -419,9 +399,9 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
             displayModel: self,
             sortedBy,
             colorBy,
+            filterBy,
             colorTagMap: JSON.parse(JSON.stringify(colorTagMap)),
             modificationTagMap: JSON.parse(JSON.stringify(modificationTagMap)),
-            filters: this.filters,
             showSoftClip: self.showSoftClipping,
             config: self.rendererConfig,
           }
@@ -506,6 +486,12 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
                     self.setColorScheme({ type: 'perBaseQuality' })
                   },
                 },
+                {
+                  label: 'Per-base lettering',
+                  onClick: () => {
+                    self.setColorScheme({ type: 'perBaseLettering' })
+                  },
+                },
                 {
                   label: 'Modifications or methylation',
                   onClick: () => {

package/src/LinearSNPCoverageDisplay/models/model.ts

@@ -1,13 +1,14 @@
 import { addDisposer, types, cast, getEnv, getSnapshot } from 'mobx-state-tree'
 import { observable, autorun } from 'mobx'
-import { getConf, readConfObject } from '@jbrowse/core/configuration'
-import { linearWiggleDisplayModelFactory } from '@jbrowse/plugin-wiggle'
 import {
+  getConf,
+  readConfObject,
   AnyConfigurationSchemaType,
   AnyConfigurationModel,
-} from '@jbrowse/core/configuration/configurationSchema'
+} from '@jbrowse/core/configuration'
+import { linearWiggleDisplayModelFactory } from '@jbrowse/plugin-wiggle'
+
 import PluginManager from '@jbrowse/core/PluginManager'
-import SerializableFilterChain from '@jbrowse/core/pluggableElementTypes/renderers/util/serializableFilterChain'
 import { getContainingView } from '@jbrowse/core/util'
 import Tooltip from '../components/Tooltip'
 import { getUniqueModificationValues } from '../../shared'
@@ -135,7 +136,6 @@ const stateModelFactory = (
           return {
             ...superProps,
             notReady: superProps.notReady || !this.modificationsReady,
-            filters: self.filters,
             modificationTagMap: JSON.parse(
               JSON.stringify(self.modificationTagMap),
             ),
@@ -143,6 +143,7 @@ const stateModelFactory = (
             // must use getSnapshot because otherwise changes to e.g. just the
             // colorBy.type are not read
             colorBy: self.colorBy ? getSnapshot(self.colorBy) : undefined,
+            filterBy: self.filterBy,
           }
         },
       }
@@ -241,37 +242,6 @@ const stateModelFactory = (
             },
           ]
         },
-        // The SNPCoverage filters are called twice because the BAM/CRAM
-        // features pass filters and then the SNPCoverage score features pass
-        // through here, and are already have 'snpinfo' are passed through
-        get filters() {
-          let filters: string[] = []
-          if (self.filterBy) {
-            const { flagInclude, flagExclude, tagFilter, readName } =
-              self.filterBy
-            filters = [
-              `jexl:get(feature,'snpinfo') != undefined ? true : ` +
-                `((get(feature,'flags')&${flagInclude})==${flagInclude}) && ` +
-                `!((get(feature,'flags')&${flagExclude}))`,
-            ]
-
-            if (tagFilter) {
-              const { tag, value } = tagFilter
-              filters.push(
-                `jexl:get(feature,'snpinfo') != undefined ? true : ` +
-                  `"${value}" =='*' ? getTag(feature,"${tag}") != undefined : ` +
-                  `getTag(feature,"${tag}") == "${value}"`,
-              )
-            }
-            if (readName) {
-              filters.push(
-                `jexl:get(feature,'snpinfo') != undefined ? true : ` +
-                  `get(feature,'name') == "${readName}"`,
-              )
-            }
-          }
-          return new SerializableFilterChain({ filters })
-        },
       }
     })