react-msaview 9.1.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/Track.tsx

@@ -3,6 +3,7 @@ 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'
 
@@ -51,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
@@ -78,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`}

package/src/components/controls.ts

@@ -19,6 +19,7 @@ export const keyboardControls: KeyControl[] = [
     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',
@@ -36,7 +37,7 @@ export const mouseControls: Control[] = [
   { label: 'Drag', action: 'Pan the alignment' },
   {
     label: 'Wheel',
-    action: 'Scroll, or zoom as set in Alignment settings → Mouse wheel',
+    action: 'Scroll, or zoom with Zoom on scroll checked',
   },
   { label: 'Ctrl + wheel', action: 'Zoom at the cursor' },
   selectCells,

package/src/components/dialogs/AnnotationFileDialog.tsx

@@ -7,6 +7,7 @@ import {
   DialogContent,
   FormControl,
   FormControlLabel,
+  Link,
   Radio,
   RadioGroup,
   TextField,
@@ -17,6 +18,8 @@ import { annotationTextToGFF } from 'msa-parsers'
 
 import type { MsaViewModel } from '../../model.ts'
 
+const domainsTutorial = 'https://gmod.org/JBrowseMSA/tutorials/protein_family'
+
 async function fetchText(url: string) {
   const response = await fetch(url)
   if (!response.ok) {
@@ -57,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 }}>
@@ -126,6 +136,7 @@ const AnnotationFileDialog = observer(function ({
                 model.setGFFFilehandle(undefined)
                 model.setGFF(annotationTextToGFF(text))
                 model.setShowDomains(true)
+                model.setCellFill('domain')
                 handleClose()
               } catch (e) {
                 console.error(e)

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

@@ -4,8 +4,10 @@ import { Dialog } from '@jbrowse/core/ui'
 import { DialogContent, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 
-import MetadataTable, { isEmpty } from '../MetadataTable.tsx'
+import MetadataTable, { isEmpty, isRecord } from '../MetadataTable.tsx'
 import SequenceTextArea from '../SequenceTextArea.tsx'
+import { gfLabels, monospaceKeys, sectionLabels } from './metadataLabels.ts'
+import { groupGeneral } from './metadataRecord.tsx'
 
 import type { MsaViewModel } from '../../model.ts'
 
@@ -16,7 +18,13 @@ const MetadataDialog = observer(function ({
   model: MsaViewModel
   onClose: () => void
 }) {
-  const { header } = model
+  const entries = Object.entries(model.header).filter(
+    ([, value]) => value != null && !isEmpty(value),
+  )
+  const fields = Object.fromEntries(
+    entries.filter(([, value]) => !isRecord(value)),
+  )
+  const sections = entries.filter(([, value]) => isRecord(value))
   return (
     <Dialog
       onClose={() => {
@@ -27,10 +35,30 @@ const MetadataDialog = observer(function ({
       maxWidth="xl"
     >
       <DialogContent>
-        {Object.values(header).every(isEmpty) ? (
+        {entries.length === 0 ? (
           <Typography>This alignment has no metadata.</Typography>
         ) : (
-          <MetadataTable record={header} />
+          <>
+            {Object.keys(fields).length > 0 ? (
+              <MetadataTable record={fields} />
+            ) : null}
+            {sections.map(([section, value]) => (
+              <div key={section}>
+                <Typography variant="h6">
+                  {sectionLabels[section] ?? section}
+                </Typography>
+                {section === 'General' ? (
+                  <MetadataTable
+                    record={groupGeneral(value)}
+                    labels={gfLabels}
+                    monospaceKeys={monospaceKeys}
+                  />
+                ) : (
+                  <MetadataTable record={value as Record<string, unknown>} />
+                )}
+              </div>
+            ))}
+          </>
         )}
         <Typography variant="h6">Sequences</Typography>
         <SequenceTextArea str={model.rows} />

package/src/components/{header → dialogs}/goTo.ts

@@ -21,7 +21,7 @@ export function rowNameSuggestions(names: string[], input: string, limit = 50) {
  * column the ruler numbers N, or residue N of a row written `name:N`. A name
  * is tried whole first, so a row called `chr1:100` stays reachable.
  */
-export function resolveGoTo(model: MsaViewModel, text: string) {
+function resolveGoTo(model: MsaViewModel, text: string) {
   const query = text.trim()
   const row = model.rowNamesSet.get(query)
   if (row !== undefined) {

package/src/components/dialogs/metadataLabels.ts

@@ -0,0 +1,54 @@
+export const sectionLabels: Record<string, string> = {
+  General: 'Alignment',
+  Accessions: 'Row accessions',
+  Dbxref: 'Row cross-references',
+}
+
+export const gfLabels: Record<string, string> = {
+  ID: 'Identifier',
+  AC: 'Accession',
+  DE: 'Description',
+  AU: 'Authors',
+  SE: 'Source of seed',
+  SS: 'Source of structure',
+  BM: 'Build method',
+  SM: 'Search method',
+  GA: 'Gathering threshold',
+  TC: 'Trusted cutoff',
+  NC: 'Noise cutoff',
+  TP: 'Family type',
+  CL: 'Clan',
+  MB: 'Clan members',
+  PI: 'Previous identifiers',
+  DR: 'Database references',
+  CC: 'Comment',
+  WK: 'Wikipedia',
+  NE: 'Pfam family nested in this one',
+  NL: 'Nesting location',
+  NH: 'Tree (Newick)',
+  SQ: 'Number of sequences',
+  RC: 'Reference comment',
+  RN: 'Reference number',
+  RM: 'PubMed ID',
+  RT: 'Reference title',
+  RA: 'Reference authors',
+  RL: 'Reference journal',
+  CB: 'Curation: build',
+  DC: 'Database comment',
+  DW: 'Database web link',
+  OS: 'Organism',
+  OC: 'Organism classification',
+  AM: 'Alignment method',
+  FT: 'Feature',
+  SO: 'Sequence Ontology term',
+}
+
+export const referenceFieldLabels: Record<string, string> = {
+  RT: 'Title',
+  RA: 'Authors',
+  RL: 'Journal',
+  RM: 'PubMed',
+  RC: 'Comment',
+}
+
+export const monospaceKeys = new Set(['NH'])

package/src/components/dialogs/metadataRecord.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+
+import { referenceFieldLabels } from './metadataLabels.ts'
+
+const referenceTags = ['RM', 'RT', 'RA', 'RL', 'RC'] as const
+
+function pubmed(id: string) {
+  return /^\d+$/.test(id) ? (
+    <a
+      href={`https://pubmed.ncbi.nlm.nih.gov/${id}/`}
+      target="_blank"
+      rel="noreferrer"
+    >
+      {id}
+    </a>
+  ) : (
+    id
+  )
+}
+
+function groupReferences(general: Record<string, unknown>) {
+  const numbers = general.RN
+  if (!Array.isArray(numbers) || numbers.length === 0) {
+    return general
+  }
+  const present = referenceTags.filter(tag => general[tag] != null)
+  const aligned = present.every(tag => {
+    const values = general[tag]
+    return Array.isArray(values) && values.length === numbers.length
+  })
+  if (!aligned) {
+    return general
+  }
+  const rest = Object.fromEntries(
+    Object.entries(general).filter(
+      ([tag]) =>
+        tag !== 'RN' && !(referenceTags as readonly string[]).includes(tag),
+    ),
+  )
+  const references = Object.fromEntries(
+    numbers.map((number: string, i) => [
+      number,
+      Object.fromEntries(
+        present.map(tag => {
+          const value = (general[tag] as string[])[i]!
+          return [
+            referenceFieldLabels[tag],
+            tag === 'RM' ? pubmed(value) : value,
+          ]
+        }),
+      ),
+    ]),
+  )
+  return { ...rest, References: references }
+}
+
+export function groupGeneral(general: unknown) {
+  return general && typeof general === 'object'
+    ? groupReferences(general as Record<string, unknown>)
+    : {}
+}