react-msaview 8.1.0 → 8.3.0

package/src/components/dialogs/ExportSVGDialog.tsx

@@ -15,6 +15,7 @@ import {
   Typography,
   useTheme,
 } from '@mui/material'
+import { observer } from 'mobx-react'
 
 import Checkbox2 from '../Checkbox2.tsx'
 
@@ -30,7 +31,7 @@ function afterPaint(fn: () => void) {
   })
 }
 
-export default function ExportSVGDialog({
+const ExportSVGDialog = observer(function ({
   model,
   onClose,
 }: {
@@ -181,4 +182,6 @@ export default function ExportSVGDialog({
       </DialogActions>
     </Dialog>
   )
-}
+})
+
+export default ExportSVGDialog

package/src/components/dialogs/FeatureDialog.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import { Dialog } from '@jbrowse/core/ui'
 import {
@@ -10,18 +10,28 @@ import {
   TableCell,
   TableHead,
   TableRow,
+  TextField,
 } from '@mui/material'
 import { observer } from 'mobx-react'
 
 import type { MsaViewModel } from '../../model.ts'
+import type { Annotation } from '../../types.ts'
 
-const Toggles = observer(function ({ model }: { model: MsaViewModel }) {
-  // the accessions the file has, not the ones the filter map happens to hold:
-  // that map now carries only what the reader turned off, and before that it
-  // accumulated every accession of every file opened in this view
-  const { annotationTypes } = model
+function matches(type: Annotation, query: string) {
+  return [type.accession, type.name, type.description].some(field =>
+    field?.toLowerCase().includes(query),
+  )
+}
+
+const Toggles = observer(function ({
+  model,
+  accessions,
+}: {
+  model: MsaViewModel
+  accessions: string[]
+}) {
   const setAll = (shown: boolean) => {
-    for (const accession of annotationTypes.keys()) {
+    for (const accession of accessions) {
       model.setFilter(accession, shown)
     }
   }
@@ -48,6 +58,11 @@ const Toggles = observer(function ({ model }: { model: MsaViewModel }) {
 
 const FeatureTable = observer(function ({ model }: { model: MsaViewModel }) {
   const { annotationTypes, annotations, featureColors, fillPalette } = model
+  const [query, setQuery] = useState('')
+  const needle = query.trim().toLowerCase()
+  const types = [...annotationTypes.values()].filter(
+    type => !needle || matches(type, needle),
+  )
   const counts = new Map<string, number>()
   const swatches = new Map<string, string>()
   for (const annot of annotations) {
@@ -62,7 +77,15 @@ const FeatureTable = observer(function ({ model }: { model: MsaViewModel }) {
   }
   return (
     <>
-      <Toggles model={model} />
+      <TextField
+        label="Filter"
+        size="small"
+        value={query}
+        onChange={event => {
+          setQuery(event.target.value)
+        }}
+      />
+      <Toggles model={model} accessions={types.map(t => t.accession)} />
       <Table size="small">
         <TableHead>
           <TableRow>
@@ -75,36 +98,34 @@ const FeatureTable = observer(function ({ model }: { model: MsaViewModel }) {
           </TableRow>
         </TableHead>
         <TableBody>
-          {[...annotationTypes.values()].map(
-            ({ accession, name, description }) => (
-              <TableRow key={accession}>
-                <TableCell padding="checkbox">
-                  <Checkbox
-                    checked={!model.turnedOffFeatures.get(accession)}
-                    onChange={() => {
-                      model.setFilter(
-                        accession,
-                        !!model.turnedOffFeatures.get(accession),
-                      )
-                    }}
-                  />
-                </TableCell>
-                <TableCell>
-                  <div
-                    style={{
-                      width: 20,
-                      height: 20,
-                      background: swatches.get(accession),
-                    }}
-                  />
-                </TableCell>
-                <TableCell>{accession}</TableCell>
-                <TableCell>{name}</TableCell>
-                <TableCell>{counts.get(accession)}</TableCell>
-                <TableCell>{description}</TableCell>
-              </TableRow>
-            ),
-          )}
+          {types.map(({ accession, name, description }) => (
+            <TableRow key={accession}>
+              <TableCell padding="checkbox">
+                <Checkbox
+                  checked={!model.turnedOffFeatures.get(accession)}
+                  onChange={() => {
+                    model.setFilter(
+                      accession,
+                      !!model.turnedOffFeatures.get(accession),
+                    )
+                  }}
+                />
+              </TableCell>
+              <TableCell>
+                <div
+                  style={{
+                    width: 20,
+                    height: 20,
+                    background: swatches.get(accession),
+                  }}
+                />
+              </TableCell>
+              <TableCell>{accession}</TableCell>
+              <TableCell>{name}</TableCell>
+              <TableCell>{counts.get(accession)}</TableCell>
+              <TableCell>{description}</TableCell>
+            </TableRow>
+          ))}
         </TableBody>
       </Table>
     </>

package/src/components/header/FileMenu.tsx

@@ -1,6 +1,7 @@
 import React, { lazy } from 'react'
 
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
+import AccountTree from '@mui/icons-material/AccountTree'
 import Assignment from '@mui/icons-material/Assignment'
 import FolderOpen from '@mui/icons-material/FolderOpen'
 import Menu from '@mui/icons-material/Menu'
@@ -47,6 +48,14 @@ const FileMenu = observer(({ model }: { model: MsaViewModel }) => {
             model,
           }),
         },
+        {
+          label: 'Export tree (Newick)',
+          icon: AccountTree,
+          disabled: !!model.tree.noTree,
+          onClick: () => {
+            model.exportNewick()
+          },
+        },
         {
           label: 'Export SVG',
           icon: PhotoCamera,

package/src/components/header/GappynessSlider.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import { Slider, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
@@ -11,6 +11,8 @@ const GappynessSlider = observer(function GappynessSlider({
   model: MsaViewModel
 }) {
   const { hideGaps, allowedGappyness } = model
+  const [dragValue, setDragValue] = useState<number>()
+  const value = dragValue ?? allowedGappyness
   if (!hideGaps) {
     return null
   }
@@ -20,7 +22,7 @@ const GappynessSlider = observer(function GappynessSlider({
           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;{allowedGappyness}% gaps
+        Hide columns w/ &ge;{value}% gaps
       </Typography>
       <Slider
         // In JBrowse other MUI Sliders share the page, so `.MuiSlider-thumb`
@@ -30,13 +32,24 @@ const GappynessSlider = observer(function GappynessSlider({
         //
         // Not `slotProps={{ input: ... }}`: that widens `onChange`'s `val` to
         // `number | number[]`, which setAllowedGappyness rejects.
+        //
+        // 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 }}
+        style={{ width: 100, marginInline: 10 }}
         min={1}
         max={100}
-        value={allowedGappyness}
+        value={value}
         onChange={(_, val) => {
+          setDragValue(val)
+        }}
+        onChangeCommitted={(_, val) => {
           model.setAllowedGappyness(val)
+          setDragValue(undefined)
         }}
       />
     </div>

package/src/components/header/Header.tsx

@@ -5,14 +5,15 @@ import Help from '@mui/icons-material/Help'
 import { IconButton, Tooltip } from '@mui/material'
 import { observer } from 'mobx-react'
 
+import StatusMessage from '../StatusMessage.tsx'
 import ColorSchemeMenu from './ColorSchemeMenu.tsx'
 import FileMenu from './FileMenu.tsx'
 import GappynessSlider from './GappynessSlider.tsx'
 import HeaderInfoArea from './HeaderInfoArea.tsx'
-import HeaderStatusArea from './HeaderStatusArea.tsx'
 import LoadWarnings from './LoadWarnings.tsx'
 import MSASettingsMenu from './MSASettingsMenu.tsx'
 import MultiAlignmentSelector from './MultiAlignmentSelector.tsx'
+import RowSearch from './RowSearch.tsx'
 import TreeSettingsMenu from './TreeSettingsMenu.tsx'
 import UnshareableDataWarning from './UnshareableDataWarning.tsx'
 import ZoomControls from './ZoomControls.tsx'
@@ -42,14 +43,16 @@ const Header = observer(function ({ model }: { model: MsaViewModel }) {
       <ZoomControls model={model} />
       <ZoomMenu model={model} />
       <GappynessSlider model={model} />
+      <RowSearch model={model} />
       <div style={{ paddingLeft: 20, margin: 'auto' }}>
         <MultiAlignmentSelector model={model} />
       </div>
-      <HeaderInfoArea model={model} />
-      <Spacer />
+      <div style={{ flex: '1 1 0', minWidth: 0, display: 'flex' }}>
+        <HeaderInfoArea model={model} />
+      </div>
       <LoadWarnings model={model} />
       <UnshareableDataWarning model={model} />
-      <HeaderStatusArea model={model} />
+      <StatusMessage model={model} variant="header" />
       <Tooltip title="About">
         <IconButton
           aria-label="About"
@@ -64,8 +67,4 @@ const Header = observer(function ({ model }: { model: MsaViewModel }) {
   )
 })
 
-function Spacer() {
-  return <div style={{ flex: 1 }} />
-}
-
 export default Header

package/src/components/header/RowSearch.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import { Autocomplete, TextField, createFilterOptions } from '@mui/material'
+import { observer } from 'mobx-react'
+
+import { findableRowNames, revealRow } from './revealRow.ts'
+
+import type { MsaViewModel } from '../../model.ts'
+
+const filterOptions = createFilterOptions<string>({ limit: 50 })
+
+const RowSearch = observer(function ({ model }: { model: MsaViewModel }) {
+  const names = findableRowNames(model)
+  return names.length > 1 ? (
+    <Autocomplete
+      size="small"
+      options={names}
+      filterOptions={filterOptions}
+      value={null}
+      blurOnSelect
+      onChange={(_, name) => {
+        if (name) {
+          revealRow(model, name)
+        }
+      }}
+      style={{ width: 180, margin: 'auto 8px' }}
+      renderInput={params => (
+        <TextField {...params} placeholder="Find row" aria-label="Find row" />
+      )}
+    />
+  ) : null
+})
+
+export default RowSearch

package/src/components/header/revealRow.ts

@@ -0,0 +1,17 @@
+import type { MsaViewModel } from '../../model.ts'
+
+export function findableRowNames(model: MsaViewModel) {
+  const collapsed = new Set(model.collapsed)
+  return model.leaves
+    .filter(({ data: { id, name } }) => !(collapsed.has(id) && name === id))
+    .map(leaf => leaf.data.name)
+}
+
+export function revealRow(model: MsaViewModel, name: string) {
+  const index = model.rowNamesSet.get(name)
+  if (index !== undefined) {
+    const { rowHeight, msaAreaHeight } = model
+    model.setScrollY(-(index + 0.5) * rowHeight + msaAreaHeight / 2)
+    model.setMousePos(undefined, index)
+  }
+}

package/src/components/header/settingsMenuItems.ts

@@ -1,6 +1,27 @@
+import { treeOrders } from '../../constants.ts'
+
 import type { MsaViewModel } from '../../model.ts'
+import type { TreeOrder } from '../../types.ts'
 import type { MenuItem } from '@jbrowse/core/ui/Menu'
 
+function radio(label: string, checked: boolean, onClick: () => void) {
+  return { label, type: 'radio' as const, checked, onClick }
+}
+
+const treeOrderLabels: Record<TreeOrder, string> = {
+  branchLength: 'By branch length',
+  input: 'As written',
+  ladderize: 'Ladderize, small clades first',
+  ladderizeReverse: 'Ladderize, large clades first',
+}
+
+function outgroupLabel(outgroup: string[]) {
+  const [first, ...rest] = outgroup
+  return rest.length === 0
+    ? `Outgroup ${first}`
+    : `Outgroup ${first} … ${rest.at(-1)}`
+}
+
 function toggle(label: string, checked: boolean, set: (arg: boolean) => void) {
   return {
     label,
@@ -56,8 +77,53 @@ export function treeSettingsMenuItems(model: MsaViewModel): MenuItem[] {
     drawNodeLabels,
     drawLabels,
     showTreeOverview,
+    treeOrder,
+    treeRoot,
+    rotated,
   } = model
   return [
+    {
+      label: 'Order',
+      type: 'subMenu' as const,
+      subMenu: [
+        ...treeOrders.map(order =>
+          radio(treeOrderLabels[order], treeOrder === order, () => {
+            model.setTreeOrder(order)
+          }),
+        ),
+        { type: 'divider' as const },
+        {
+          label: 'Undo rotations',
+          disabled: rotated.length === 0,
+          onClick: () => {
+            model.clearRotated()
+          },
+        },
+      ],
+    },
+    {
+      label: 'Root',
+      type: 'subMenu' as const,
+      subMenu: [
+        radio('As written', treeRoot === undefined, () => {
+          model.setTreeRoot(undefined)
+        }),
+        radio('Midpoint', treeRoot === 'midpoint', () => {
+          model.setTreeRoot('midpoint')
+        }),
+        // "Reroot here" in a node's menu sets the outgroup, so this only
+        // reports it
+        ...(typeof treeRoot === 'object'
+          ? [
+              {
+                ...radio(outgroupLabel(treeRoot.outgroup), true, () => {}),
+                disabled: true,
+              },
+            ]
+          : []),
+      ],
+    },
+    { type: 'divider' as const },
     toggle('Show branch length', showBranchLen, arg => {
       model.setShowBranchLen(arg)
     }),

package/src/components/import/ImportForm.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 
 import { ErrorMessage, FileSelector } from '@jbrowse/core/ui'
-import { Button, Container, Typography } from '@mui/material'
+import { Box, Button, Container, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 
 import ImportFormExamples from './ImportFormExamples.tsx'
@@ -10,6 +10,8 @@ import { load } from './util.ts'
 import type { MsaViewModel } from '../../model.ts'
 import type { FileLocation } from '@jbrowse/core/util/types'
 
+const phone = '@media (max-width: 640px)'
+
 const ImportForm = observer(function ({ model }: { model: MsaViewModel }) {
   const [msaFile, setMsaFile] = useState<FileLocation>()
   const [treeFile, setTreeFile] = useState<FileLocation>()
@@ -18,7 +20,7 @@ const ImportForm = observer(function ({ model }: { model: MsaViewModel }) {
 
   return (
     <Container>
-      <div style={{ width: '50%' }}>
+      <Box sx={{ width: '50%', [phone]: { width: '100%' } }}>
         {error ? <ErrorMessage error={error} /> : null}
         <Typography>
           Open an MSA file (FASTA, Stockholm, Clustal, A3M or EMF format) and/or
@@ -28,14 +30,19 @@ const ImportForm = observer(function ({ model }: { model: MsaViewModel }) {
           An MSA alone or a tree alone is enough, and a Stockholm file with an
           embedded tree needs no separate tree file.
         </Typography>
-      </div>
+      </Box>
 
-      <div
-        style={{
+      <Box
+        sx={{
           display: 'flex',
           justifyContent: 'center',
           alignItems: 'center',
-          gap: 40,
+          gap: '40px',
+          [phone]: {
+            flexDirection: 'column',
+            alignItems: 'stretch',
+            gap: '16px',
+          },
         }}
       >
         <div>
@@ -74,7 +81,7 @@ const ImportForm = observer(function ({ model }: { model: MsaViewModel }) {
           <Typography>Examples</Typography>
           <ImportFormExamples model={model} />
         </div>
-      </div>
+      </Box>
     </Container>
   )
 })

package/src/components/import/ImportFormExamples.tsx

@@ -3,16 +3,17 @@ import React from 'react'
 import { Link, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 
-import { smallMSA, smallMSAOnly, smallTree } from './data/seq2.ts'
+import { smallMSA, smallTree } from './data/seq2.ts'
 import { load } from './util.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 
 const BASE = 'https://jbrowse.org/genomes/multiple_sequence_alignments'
 const TREES = 'https://jbrowse.org/genomes/newick_trees'
+const DEMO = 'https://gmod.org/JBrowseMSA/demo/data'
 
 // each example points at remote files (msa/tree/gff urls) or carries its data
-// inline, as the two small bundled ones do
+// inline
 interface Example {
   label: string
   msa?: string
@@ -23,42 +24,33 @@ interface Example {
 
 const examples: Example[] = [
   {
-    label: '230k COVID-19 samples (tree only)',
-    tree: `${TREES}/sarscov2phylo.pub.ft.nh`,
-  },
-  {
-    label: 'Small protein MSA+tree',
-    inline: { msa: smallMSA, tree: smallTree },
-  },
-  {
-    label: 'Small MSA only',
-    inline: { msa: smallMSAOnly },
-  },
-  {
-    label: 'PFAM SARS-CoV2 multi-stockholm with domains',
-    msa: `${BASE}/pfam-cov2.stock`,
-    gff: `${BASE}/pfam-cov2-domains.gff`,
+    label: 'NLRP1 in 12 mammals, with Pfam domains',
+    msa: `${DEMO}/nlrp1.aln`,
+    tree: `${DEMO}/nlrp1.nh`,
+    gff: `${DEMO}/nlrp1-domains.gff`,
   },
   {
-    label: 'Lysine stockholm file',
-    msa: `${BASE}/Lysine.stock`,
+    label: '474 human protein kinase domains, with a FastTree tree',
+    msa: `${DEMO}/kinase-pocket/kinase-pocket.afa`,
+    tree: `${DEMO}/kinase-pocket/kinase-pocket.nwk`,
   },
   {
-    label: 'PF01601 stockholm file (SARS-CoV2 spike protein)',
-    msa: `${BASE}/PF01601_full.txt`,
+    label: 'RSV-A G gene in 1,840 genomes, with the Nextstrain tree',
+    msa: `${DEMO}/scale/rsv-full.aln`,
+    tree: `${DEMO}/scale/rsv-full.nh`,
   },
   {
-    label: 'Europe COVID full genomes (LR883044.1 and 199 other sequences)',
-    msa: `${BASE}/europe_covid.fa`,
+    label: '230k COVID-19 samples (tree only)',
+    tree: `${TREES}/sarscov2phylo.pub.ft.nh`,
   },
   {
-    label: 'MAFFT+VeryFastTree(17.9k samples)',
-    msa: `${BASE}/rhv_test-only.aligned_with_mafft_auto.fa`,
-    tree: `${BASE}/rhv_test-only.aligned_with_mafft_auto.nh`,
+    label: 'Pfam SARS-CoV-2 families, multi-Stockholm with domains',
+    msa: `${BASE}/pfam-cov2.stock`,
+    gff: `${BASE}/pfam-cov2-domains.gff`,
   },
   {
-    label: 'Human BLAST results mfa',
-    msa: 'https://jbrowse.org/demos/ttc39a.mfa',
+    label: 'Small protein alignment and tree',
+    inline: { msa: smallMSA, tree: smallTree },
   },
 ]
 

package/src/components/minimap/Minimap.tsx

@@ -70,6 +70,13 @@ const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
         ref={ref}
         width={barWidth}
         height={barHeight}
+        onMouseDown={event => {
+          if (event.button === 0 && unit > 0) {
+            const x =
+              event.clientX - event.currentTarget.getBoundingClientRect().left
+            model.setScrollX(-x / unit + msaCanvasWidth / 2)
+          }
+        }}
         style={{
           display: 'block',
           width: msaCanvasWidth,

package/src/components/msa/AnnotationLegend.tsx

@@ -32,16 +32,17 @@ const AnnotationLegend = observer(function ({
         display: 'flex',
         flexDirection: 'column',
         opacity: 0.95,
+        pointerEvents: 'none',
       }}
     >
       <IconButton
         size="small"
         title={expanded ? 'Collapse key' : 'Expand key'}
-        style={
-          expanded
-            ? { position: 'absolute', top: 0, right: 0, padding: 1 }
-            : { padding: 1 }
-        }
+        style={{
+          padding: 1,
+          pointerEvents: 'auto',
+          ...(expanded && { position: 'absolute', top: 0, right: 0 }),
+        }}
         onClick={() => {
           model.setShowDomainLegend(!expanded)
         }}
@@ -59,7 +60,6 @@ const AnnotationLegend = observer(function ({
                 gap: 4,
                 marginRight: i === 0 ? 18 : 0,
               }}
-              title={row.hint}
             >
               {row.color ? (
                 <div
@@ -74,10 +74,16 @@ const AnnotationLegend = observer(function ({
               <Typography
                 variant="caption"
                 noWrap
+                title={
+                  row.hint && row.hint !== row.label
+                    ? `${row.label} (${row.hint})`
+                    : row.label
+                }
                 style={{
                   fontSize: 10,
                   lineHeight: 1.4,
                   fontWeight: row.color ? undefined : 'bold',
+                  pointerEvents: 'auto',
                 }}
               >
                 {row.label}

package/src/components/msa/MSACanvas.tsx

@@ -5,6 +5,7 @@ import { observer } from 'mobx-react'
 import { useWheelScroll } from '../../useWheelScroll.ts'
 import Loading from './Loading.tsx'
 import MSACanvasBlock from './MSACanvasBlock.tsx'
+import { onMsaKey } from './msaKeys.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 
@@ -52,6 +53,13 @@ const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
       // screenshot callouts anchor to columns from this rect's origin:
       // col*colWidth + scrollX, row*rowHeight + scrollY
       data-testid="msa_canvas"
+      tabIndex={0}
+      aria-label="Alignment. Arrow keys scroll, shift pages, + and - zoom, Home and End jump to the first and last column."
+      onKeyDown={event => {
+        if (onMsaKey(model, event)) {
+          event.preventDefault()
+        }
+      }}
       onMouseDown={onMouseDown}
       onMouseUp={onMouseUp}
       style={{