react-msaview 9.0.0 → 9.1.1

package/src/components/MetadataTable.tsx

@@ -1,21 +1,57 @@
 import React from 'react'
 
 import { makeStyles } from '@jbrowse/core/util/tss-react'
-import { Table, TableBody, TableCell, TableRow } from '@mui/material'
 
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
+  list: {
+    display: 'grid',
+    gridTemplateColumns: 'minmax(8em, max-content) minmax(0, 1fr)',
+    columnGap: theme.spacing(3),
+    margin: 0,
+  },
+  row: {
+    display: 'contents',
+  },
   key: {
-    fontWeight: 'bold',
-    verticalAlign: 'top',
+    fontWeight: 600,
+    padding: theme.spacing(0.75, 0),
+    borderTop: `1px solid ${theme.palette.divider}`,
+  },
+  code: {
+    marginLeft: theme.spacing(1),
+    fontWeight: 400,
+    fontSize: '0.75em',
+    fontFamily: 'monospace',
+    color: theme.palette.text.secondary,
   },
   value: {
+    margin: 0,
+    padding: theme.spacing(0.75, 0),
+    borderTop: `1px solid ${theme.palette.divider}`,
     whiteSpace: 'pre-wrap',
-    wordBreak: 'break-word',
+    overflowWrap: 'anywhere',
+  },
+  mono: {
+    fontFamily: 'monospace',
+    fontSize: '0.85em',
+    maxHeight: '8em',
+    overflow: 'auto',
   },
-})
+  nested: {
+    '& > dl': {
+      paddingLeft: theme.spacing(2),
+      borderLeft: `2px solid ${theme.palette.divider}`,
+    },
+  },
+}))
 
-function isRecord(value: unknown): value is Record<string, unknown> {
-  return typeof value === 'object' && value !== null && !Array.isArray(value)
+export function isRecord(value: unknown): value is Record<string, unknown> {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    !Array.isArray(value) &&
+    !React.isValidElement(value)
+  )
 }
 
 export function isEmpty(value: unknown) {
@@ -24,32 +60,53 @@ export function isEmpty(value: unknown) {
 
 export default function MetadataTable({
   record,
+  labels = {},
+  monospaceKeys,
 }: {
   record: Record<string, unknown>
+  labels?: Record<string, string>
+  monospaceKeys?: Set<string>
 }) {
-  const { classes } = useStyles()
+  const { classes, cx } = useStyles()
   return (
-    <Table size="small">
-      <TableBody>
-        {Object.entries(record)
-          .filter(([, value]) => value != null && !isEmpty(value))
-          .map(([key, value]) => (
-            <TableRow key={key}>
-              <TableCell component="th" className={classes.key}>
-                {key}
-              </TableCell>
-              <TableCell className={classes.value}>
-                {isRecord(value) ? (
-                  <MetadataTable record={value} />
+    <dl className={classes.list}>
+      {Object.entries(record)
+        .filter(([, value]) => value != null && !isEmpty(value))
+        .map(([key, value]) => {
+          const label = labels[key]
+          const nested = isRecord(value)
+          return (
+            <div key={key} className={classes.row}>
+              <dt className={classes.key}>
+                {label ?? key}
+                {label && label !== key ? (
+                  <span className={classes.code}>{key}</span>
+                ) : null}
+              </dt>
+              <dd
+                className={cx(
+                  classes.value,
+                  nested && classes.nested,
+                  monospaceKeys?.has(key) && classes.mono,
+                )}
+              >
+                {nested ? (
+                  <MetadataTable
+                    record={value}
+                    labels={labels}
+                    monospaceKeys={monospaceKeys}
+                  />
                 ) : Array.isArray(value) ? (
                   value.join('\n')
+                ) : React.isValidElement(value) ? (
+                  value
                 ) : (
                   String(value)
                 )}
-              </TableCell>
-            </TableRow>
-          ))}
-      </TableBody>
-    </Table>
+              </dd>
+            </div>
+          )
+        })}
+    </dl>
   )
 }

package/src/components/ResizeHandles.tsx

@@ -7,6 +7,8 @@ import DragHandle from './DragHandle.tsx'
 import type { MsaViewModel } from '../model.ts'
 import type { BasicTrack } from '../types.ts'
 
+const minViewHeight = 50
+
 export const VerticalResizeHandle = observer(function ({
   model,
 }: {
@@ -14,7 +16,12 @@ export const VerticalResizeHandle = observer(function ({
 }) {
   const onDrag = useCallback(
     (delta: number, startWidth: number) => {
-      model.setTreeAreaWidth(startWidth + delta)
+      model.setTreeAreaWidth(
+        Math.min(
+          Math.max(0, startWidth + delta),
+          model.width - model.resizeHandleWidth,
+        ),
+      )
     },
     [model],
   )
@@ -36,7 +43,7 @@ export const HorizontalResizeHandle = observer(function ({
 }) {
   const onDrag = useCallback(
     (delta: number, startHeight: number) => {
-      model.setHeight(startHeight + delta)
+      model.setHeight(Math.max(minViewHeight, startHeight + delta))
     },
     [model],
   )

package/src/components/Track.tsx

@@ -3,11 +3,13 @@ import React, { lazy, useCallback, useRef, useState } from 'react'
 import BaseTooltip from '@jbrowse/core/ui/BaseTooltip'
 import { makeStyles } from '@jbrowse/core/util/tss-react'
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
+import CloseIcon from '@mui/icons-material/Close'
 import { IconButton, Menu, MenuItem } from '@mui/material'
 import { observer } from 'mobx-react'
 
 import { useWheelScroll } from '../useWheelScroll.ts'
 import { onMsaKey } from './msa/msaKeys.ts'
+import TrackBlocks from './tracks/TrackBlocks.tsx'
 import TrackTooltipContent from './tracks/TrackTooltipContent.tsx'
 import { useTrackHover } from './tracks/useTrackHover.ts'
 
@@ -50,6 +52,7 @@ const TrackLabel = observer(function TrackLabel({
   } = track
   const { classes } = useStyles()
   const trackLabelHeight = Math.min(height, fontSize)
+  const closeSize = Math.min(height, Math.max(fontSize, 16))
 
   return (
     // a flex row, not inline text: zooming in grows fontSize against a tree
@@ -77,6 +80,17 @@ const TrackLabel = observer(function TrackLabel({
       >
         {drawLabels ? name : ''}
       </span>
+      <IconButton
+        className={classes.button}
+        aria-label={`Hide ${name} track`}
+        title="Hide track"
+        style={{ width: closeSize, height: closeSize, flexShrink: 0 }}
+        onClick={() => {
+          model.toggleTrack(track.model.id)
+        }}
+      >
+        <CloseIcon style={{ fontSize: closeSize * 0.8 }} />
+      </IconButton>
       <IconButton
         className={classes.button}
         aria-label={`${name} track menu`}
@@ -184,7 +198,7 @@ const Track = observer(function ({
           onMouseLeave()
         }}
       >
-        <track.ReactComponent model={model} track={track} />
+        <TrackBlocks model={model} track={track} />
         {anchor ? (
           <BaseTooltip clientPoint={anchor.clientPoint}>
             <TrackTooltipContent

package/src/components/controls.ts

@@ -0,0 +1,62 @@
+export interface Control {
+  label: string
+  action: string
+}
+
+export interface KeyControl extends Control {
+  keys: string[]
+  shiftKey?: boolean
+}
+
+const arrows = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']
+
+export const keyboardControls: KeyControl[] = [
+  { label: 'Arrow keys', action: 'Scroll one cell', keys: arrows },
+  {
+    label: 'Shift + arrow keys',
+    action: 'Scroll one page',
+    keys: arrows,
+    shiftKey: true,
+  },
+  { label: '+ and -', action: 'Zoom in and out', keys: ['+', '=', '-'] },
+  { label: '0', action: 'Reset to the default cell size', keys: ['0'] },
+  {
+    label: 'Home and End',
+    action: 'Jump to the first and last column',
+    keys: ['Home', 'End'],
+  },
+  { label: 'Escape', action: 'Clear the selection', keys: ['Escape'] },
+]
+
+const selectCells: Control = {
+  label: 'Shift + drag',
+  action: 'Select a block of cells',
+}
+
+export const mouseControls: Control[] = [
+  { label: 'Drag', action: 'Pan the alignment' },
+  {
+    label: 'Wheel',
+    action: 'Scroll, or zoom with Zoom on scroll checked',
+  },
+  { label: 'Ctrl + wheel', action: 'Zoom at the cursor' },
+  selectCells,
+  {
+    label: 'Drag along a track',
+    action: 'Select a range of columns across every row',
+  },
+  {
+    label: 'Click a tree node',
+    action: 'Collapse, rotate, reroot or show only that clade',
+  },
+  {
+    label: 'Click the tree overview',
+    action: 'Show only the clade under the pointer',
+  },
+  { label: 'Drag a divider', action: 'Resize the tree area or a track' },
+]
+
+export const alignmentAriaLabel = [
+  'Alignment',
+  ...[...keyboardControls, selectCells].map(c => `${c.label}: ${c.action}`),
+].join('. ')

package/src/components/dialogs/AnnotationFileDialog.tsx

@@ -7,31 +7,18 @@ import {
   DialogContent,
   FormControl,
   FormControlLabel,
+  Link,
   Radio,
   RadioGroup,
   TextField,
   Typography,
 } from '@mui/material'
 import { observer } from 'mobx-react'
-import {
-  annotationsToGFF,
-  interProScanResponseToAnnotations,
-} from 'msa-parsers'
+import { annotationTextToGFF } from 'msa-parsers'
 
 import type { MsaViewModel } from '../../model.ts'
-import type { InterProScanResponse } from 'msa-parsers'
 
-// GFF3 as the CLI writes it, or the JSON an InterProScan run returns. Both
-// arrive as text and the model keeps GFF, so the JSON is converted on the way
-// in rather than given a second path through the model
-function toGFF(text: string) {
-  const trimmed = text.trimStart()
-  if (!trimmed.startsWith('{')) {
-    return text
-  }
-  const response: InterProScanResponse = JSON.parse(trimmed)
-  return annotationsToGFF(interProScanResponseToAnnotations(response))
-}
+const domainsTutorial = 'https://gmod.org/JBrowseMSA/tutorials/protein_family'
 
 async function fetchText(url: string) {
   const response = await fetch(url)
@@ -73,7 +60,14 @@ const AnnotationFileDialog = observer(function ({
         {error ? <ErrorMessage error={error} /> : null}
         <Typography>
           Open a GFF3 file of annotations, such as the one `react-msaview-cli
-          interpro` writes, or the JSON an InterProScan run returns.
+          interpro` writes, or the JSON an InterProScan run returns.{' '}
+          <Link
+            href={domainsTutorial}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            How to make one
+          </Link>
         </Typography>
 
         <div style={{ display: 'flex', margin: 30 }}>
@@ -137,11 +131,12 @@ const AnnotationFileDialog = observer(function ({
                   ? file.text()
                   : fetchText(url))
                 // through the model's own GFF text, so the annotations travel
-                // in the snapshot and the shared URL like every other layer.
-                // Setting them straight onto the volatile left a view whose
-                // link opened without them
-                model.setGFF(toGFF(text))
+                // in the snapshot and the shared URL like every other layer. A
+                // filehandle left set would make the snapshot drop that text
+                model.setGFFFilehandle(undefined)
+                model.setGFF(annotationTextToGFF(text))
                 model.setShowDomains(true)
+                model.setCellFill('domain')
                 handleClose()
               } catch (e) {
                 console.error(e)

package/src/components/dialogs/ExportSVGDialog.tsx

@@ -17,6 +17,7 @@ import {
 } from '@mui/material'
 import { observer } from 'mobx-react'
 
+import { exportPageSize, getLayout } from '../../exportLayout.ts'
 import Checkbox2 from '../Checkbox2.tsx'
 
 import type { MsaViewModel } from '../../model.ts'
@@ -46,24 +47,12 @@ const ExportSVGDialog = observer(function ({
   const [error, setError] = useState<unknown>()
   const [exporting, setExporting] = useState(false)
   const theme = useTheme()
-  const {
-    totalWidth,
-    totalHeight,
-    effectiveTreeAreaWidth,
-    rowPanelsWidth,
-    turnedOnTracks,
-    totalTrackAreaHeight,
-    numColumns,
-    leaves,
-    showMsaLetters,
-    treeOverviewHeight,
-  } = model
+  const { turnedOnTracks, numColumns, leaves, showMsaLetters } = model
   const hasTracks = turnedOnTracks.length > 0
-  const entireWidth = totalWidth + effectiveTreeAreaWidth + rowPanelsWidth
-  const entireHeight =
-    totalHeight +
-    (includeTracks ? totalTrackAreaHeight : 0) +
-    treeOverviewHeight
+  const entire = exportPageSize(
+    model,
+    getLayout(model, { theme, exportType: 'entire', includeTracks }),
+  )
   // the background is one raster image whatever its size, so what the figure
   // actually costs is its residue letters: each is an svg element of its own.
   // Past roughly this many the export runs to tens of seconds and can exhaust
@@ -126,8 +115,8 @@ const ExportSVGDialog = observer(function ({
         </div>
         {isLargeExport ? (
           <Alert severity="warning" style={{ marginTop: 8 }}>
-            The entire MSA is {Math.round(entireWidth)}x
-            {Math.round(entireHeight)} pixels and draws{' '}
+            The entire MSA is {Math.round(entire.width)}x
+            {Math.round(entire.height)} pixels and draws{' '}
             {Math.round(glyphs / 1000)}k residue letters, each its own SVG
             element. Export may be slow or fail — zooming out far enough to hide
             the letters exports the same alignment as an image instead.

package/src/components/dialogs/FeatureDialog.tsx

@@ -102,12 +102,9 @@ const FeatureTable = observer(function ({ model }: { model: MsaViewModel }) {
             <TableRow key={accession}>
               <TableCell padding="checkbox">
                 <Checkbox
-                  checked={!model.turnedOffFeatures.get(accession)}
+                  checked={!model.featureOff(accession)}
                   onChange={() => {
-                    model.setFilter(
-                      accession,
-                      !!model.turnedOffFeatures.get(accession),
-                    )
+                    model.setFilter(accession, model.featureOff(accession))
                   }}
                 />
               </TableCell>

package/src/components/dialogs/GapThresholdDialog.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+
+import { Dialog } from '@jbrowse/core/ui'
+import { Button, DialogActions, DialogContent, Typography } from '@mui/material'
+import { observer } from 'mobx-react'
+
+import GappynessSlider from './GappynessSlider.tsx'
+
+import type { MsaViewModel } from '../../model.ts'
+
+const GapThresholdDialog = observer(function ({
+  model,
+  onClose,
+}: {
+  model: MsaViewModel
+  onClose: () => void
+}) {
+  return (
+    <Dialog open onClose={onClose} title="Hide gappy columns">
+      <DialogContent>
+        <Typography variant="body2" sx={{ mb: 2 }}>
+          The viewer hides each column where at least this share of the rows has
+          a gap.
+        </Typography>
+        <GappynessSlider model={model} />
+      </DialogContent>
+      <DialogActions>
+        <Button variant="contained" onClick={onClose}>
+          Close
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+})
+
+export default GapThresholdDialog

package/src/components/{header → dialogs}/GappynessSlider.tsx

@@ -10,19 +10,15 @@ const GappynessSlider = observer(function GappynessSlider({
 }: {
   model: MsaViewModel
 }) {
-  const { hideGaps, allowedGappyness } = model
   const [dragValue, setDragValue] = useState<number>()
-  const value = dragValue ?? allowedGappyness
-  if (!hideGaps) {
-    return null
-  }
+  const value = dragValue ?? model.allowedGappyness
   return (
     <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
       {/* the threshold is inclusive: blanks are columns whose gap count is at
           least ceil(allowedGappyness% of the rows), so at 100 it hides the
           columns that are entirely gaps rather than nothing */}
       <Typography style={{ whiteSpace: 'nowrap' }}>
-        Hide columns w/ &ge;{value}% gaps
+        &ge;{value}% gaps
       </Typography>
       <Slider
         // In JBrowse other MUI Sliders share the page, so `.MuiSlider-thumb`
@@ -36,11 +32,8 @@ const GappynessSlider = observer(function GappynessSlider({
         // The thumb follows local state while dragging and the model takes the
         // value on release, since each write recomputes the gap columns over
         // the whole alignment.
-        //
-        // The thumb centers on the track's ends, so the margin keeps its
-        // overhang off the label and the row search beside it.
         data-testid="gappyness_slider"
-        style={{ width: 100, marginInline: 10 }}
+        style={{ width: 200, marginInline: 10 }}
         min={1}
         max={100}
         value={value}

package/src/components/{header → dialogs}/GoToBox.tsx

@@ -26,14 +26,32 @@ export function labelledInput(params: AutocompleteRenderInputParams) {
     : { inputProps: { ...inputProps, 'aria-label': label } }
 }
 
-const GoToBox = observer(function ({ model }: { model: MsaViewModel }) {
+// the menu that opens the dialog hands focus back to its button as it closes,
+// after an autoFocus input would have taken it
+function focusNextFrame(el: HTMLInputElement | null) {
+  if (el) {
+    requestAnimationFrame(() => {
+      el.focus()
+    })
+  }
+}
+
+export function canGoTo(model: MsaViewModel) {
+  return findableRowNames(model).length > 1 || model.numColumns > 0
+}
+
+const GoToBox = observer(function ({
+  model,
+  onFound,
+}: {
+  model: MsaViewModel
+  onFound?: () => void
+}) {
   const [missed, setMissed] = useState(false)
-  const names = findableRowNames(model)
-  return names.length > 1 || model.numColumns > 0 ? (
+  return (
     <Autocomplete
       freeSolo
-      size="small"
-      options={names}
+      options={findableRowNames(model)}
       filterOptions={(options, { inputValue }) =>
         rowNameSuggestions(options, inputValue)
       }
@@ -44,21 +62,29 @@ const GoToBox = observer(function ({ model }: { model: MsaViewModel }) {
       }}
       onChange={(_, text) => {
         if (text) {
-          setMissed(!goTo(model, text))
+          const found = goTo(model, text)
+          setMissed(!found)
+          if (found) {
+            onFound?.()
+          }
         }
       }}
-      style={{ width: 180, margin: 'auto 8px' }}
       renderInput={params => (
         <TextField
           {...params}
+          inputRef={focusNextFrame}
           error={missed}
-          placeholder={label}
-          title="A row name, a column number, or name:residue"
+          placeholder="Row name or column number"
+          helperText={
+            missed
+              ? 'No row or column matches'
+              : 'Or name:N for residue N of that row'
+          }
           {...labelledInput(params)}
         />
       )}
     />
-  ) : null
+  )
 })
 
 export default GoToBox

package/src/components/dialogs/GoToDialog.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+import { Dialog } from '@jbrowse/core/ui'
+import { DialogContent } from '@mui/material'
+
+import GoToBox from './GoToBox.tsx'
+
+import type { MsaViewModel } from '../../model.ts'
+
+export default function GoToDialog({
+  model,
+  onClose,
+}: {
+  model: MsaViewModel
+  onClose: () => void
+}) {
+  return (
+    <Dialog
+      open
+      onClose={onClose}
+      title="Go to row or column"
+      maxWidth="xs"
+      fullWidth
+    >
+      <DialogContent>
+        <GoToBox model={model} onFound={onClose} />
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/dialogs/HelpDialog.tsx

@@ -0,0 +1,79 @@
+import React, { lazy } from 'react'
+
+import { Dialog } from '@jbrowse/core/ui'
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  Table,
+  TableBody,
+  TableCell,
+  TableRow,
+  Typography,
+} from '@mui/material'
+
+import { version } from '../../version.ts'
+import { keyboardControls, mouseControls } from '../controls.ts'
+
+import type { MsaViewModel } from '../../model.ts'
+import type { Control } from '../controls.ts'
+
+const AboutDialog = lazy(() => import('./AboutDialog.tsx'))
+
+function ControlTable({ title, rows }: { title: string; rows: Control[] }) {
+  return (
+    <>
+      <Typography variant="subtitle2" sx={{ mt: 1 }}>
+        {title}
+      </Typography>
+      <Table size="small" aria-label={title}>
+        <TableBody>
+          {rows.map(({ label, action }) => (
+            <TableRow key={label}>
+              <TableCell sx={{ whiteSpace: 'nowrap', fontWeight: 500 }}>
+                {label}
+              </TableCell>
+              <TableCell>{action}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </>
+  )
+}
+
+export default function HelpDialog({
+  model,
+  onClose,
+}: {
+  model: MsaViewModel
+  onClose: () => void
+}) {
+  return (
+    <Dialog open title="Mouse & keyboard" onClose={onClose}>
+      <DialogContent>
+        <ControlTable title="Mouse" rows={mouseControls} />
+        <ControlTable
+          title="Keyboard (click the alignment first)"
+          rows={keyboardControls}
+        />
+      </DialogContent>
+      <DialogActions>
+        <Typography variant="caption" sx={{ mr: 'auto', pl: 1 }}>
+          MSAView {version}
+        </Typography>
+        <Button
+          onClick={() => {
+            model.queueDialog(done => [AboutDialog, { onClose: done }])
+            onClose()
+          }}
+        >
+          About & credits
+        </Button>
+        <Button variant="contained" onClick={onClose}>
+          Close
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}