@jbrowse/plugin-alignments 1.6.5 → 1.6.8

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 "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

@@ -460,7 +460,7 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
                 {
                   label: 'Sort by tag...',
                   onClick: () => {
-                    getSession(self).queueDialog((doneCallback: Function) => [
+                    getSession(self).queueDialog(doneCallback => [
                       SortByTagDlg,
                       { model: self, handleClose: doneCallback },
                     ])
@@ -506,10 +506,16 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
                     self.setColorScheme({ type: 'perBaseQuality' })
                   },
                 },
+                {
+                  label: 'Per-base lettering',
+                  onClick: () => {
+                    self.setColorScheme({ type: 'perBaseLettering' })
+                  },
+                },
                 {
                   label: 'Modifications or methylation',
                   onClick: () => {
-                    getSession(self).queueDialog((doneCallback: Function) => [
+                    getSession(self).queueDialog(doneCallback => [
                       ModificationsDlg,
                       { model: self, handleClose: doneCallback },
                     ])
@@ -530,7 +536,7 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
                 {
                   label: 'Color by tag...',
                   onClick: () => {
-                    getSession(self).queueDialog((doneCallback: Function) => [
+                    getSession(self).queueDialog(doneCallback => [
                       ColorByTagDlg,
                       { model: self, handleClose: doneCallback },
                     ])
@@ -542,7 +548,7 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
               label: 'Filter by',
               icon: FilterListIcon,
               onClick: () => {
-                getSession(self).queueDialog((doneCallback: Function) => [
+                getSession(self).queueDialog(doneCallback => [
                   FilterByTagDlg,
                   { model: self, handleClose: doneCallback },
                 ])
@@ -551,7 +557,7 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
             {
               label: 'Set feature height',
               onClick: () => {
-                getSession(self).queueDialog((doneCallback: Function) => [
+                getSession(self).queueDialog(doneCallback => [
                   SetFeatureHeightDlg,
                   { model: self, handleClose: doneCallback },
                 ])
@@ -560,7 +566,7 @@ const stateModelFactory = (configSchema: LinearPileupDisplayConfigModel) =>
             {
               label: 'Set max height',
               onClick: () => {
-                getSession(self).queueDialog((doneCallback: Function) => [
+                getSession(self).queueDialog(doneCallback => [
                   SetMaxHeightDlg,
                   { model: self, handleClose: doneCallback },
                 ])

package/src/LinearSNPCoverageDisplay/components/Tooltip.tsx

@@ -27,11 +27,11 @@ const TooltipContents = React.forwardRef(
     const start = feature.get('start')
     const end = feature.get('end')
     const name = feature.get('refName')
+    const info = feature.get('snpinfo') as SNPInfo
     const loc = [name, start === end ? en(start) : `${en(start)}..${en(end)}`]
       .filter(f => !!f)
       .join(':')
 
-    const info = feature.get('snpinfo') as SNPInfo
     const total = info?.total
 
     return (
@@ -64,7 +64,9 @@ const TooltipContents = React.forwardRef(
                     <td>
                       {base === 'total' || base === 'skip'
                         ? '---'
-                        : `${Math.floor((score.total / total) * 100)}%`}
+                        : `${Math.floor(
+                            (score.total / (total || score.total || 1)) * 100,
+                          )}%`}
                     </td>
                     <td>
                       {strands['-1'] ? `${strands['-1']}(-)` : ''}
@@ -90,7 +92,7 @@ const SNPCoverageTooltip = observer(
     height: number
     offsetMouseCoord: Coord
     clientMouseCoord: Coord
-    clientRect?: ClientRect
+    clientRect?: DOMRect
   }) => {
     const { model } = props
     const { featureUnderMouse: feat } = model

package/src/LinearSNPCoverageDisplay/models/configSchema.ts

@@ -40,11 +40,10 @@ export default function SNPCoverageConfigFactory(pluginManager: PluginManager) {
         defaultValue: false,
       },
 
-      headroom: {
-        type: 'number',
-        description:
-          'round the upper value of the domain scale to the nearest N',
-        defaultValue: 0,
+      multiTicks: {
+        type: 'boolean',
+        description: 'Display multiple values for the ticks',
+        defaultValue: false,
       },
 
       renderers: ConfigurationSchema('RenderersConfiguration', {