@jbrowse/plugin-alignments 1.6.6 → 1.6.9

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 "Max height reached"
+        </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

@@ -506,6 +506,12 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
                     self.setColorScheme({ type: 'perBaseQuality' })
                   },
                 },
+                {
+                  label: 'Per-base lettering',
+                  onClick: () => {
+                    self.setColorScheme({ type: 'perBaseLettering' })
+                  },
+                },
                 {
                   label: 'Modifications or methylation',
                   onClick: () => {