react-msaview 8.2.0 → 8.4.0

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

@@ -1,11 +1,10 @@
 import React from 'react'
 
-import Attributes from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/Attributes'
-import BaseCard from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/BaseCard'
 import { Dialog } from '@jbrowse/core/ui'
-import { DialogContent } from '@mui/material'
+import { DialogContent, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 
+import MetadataTable, { isEmpty } from '../MetadataTable.tsx'
 import SequenceTextArea from '../SequenceTextArea.tsx'
 
 import type { MsaViewModel } from '../../model.ts'
@@ -18,7 +17,6 @@ const MetadataDialog = observer(function ({
   onClose: () => void
 }) {
   const { header } = model
-
   return (
     <Dialog
       onClose={() => {
@@ -29,10 +27,13 @@ const MetadataDialog = observer(function ({
       maxWidth="xl"
     >
       <DialogContent>
-        <Attributes attributes={header} />
-        <BaseCard title="sequence">
-          <SequenceTextArea str={model.rows} />
-        </BaseCard>
+        {Object.values(header).every(isEmpty) ? (
+          <Typography>This alignment has no metadata.</Typography>
+        ) : (
+          <MetadataTable record={header} />
+        )}
+        <Typography variant="h6">Sequences</Typography>
+        <SequenceTextArea str={model.rows} />
       </DialogContent>
     </Dialog>
   )

package/src/components/header/ColorSchemeMenu.tsx

@@ -8,8 +8,37 @@ import colorSchemes from '../../colorSchemes.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 
+// While a `customColorScheme` map is set, a checked Custom entry stands for it
+// and no named scheme is checked. Picking a named scheme clears the map.
+export function colorSchemeMenuItems(model: MsaViewModel) {
+  const { colorSchemeName, customColorScheme } = model
+  const custom = customColorScheme
+    ? [
+        {
+          label: 'Custom',
+          type: 'radio',
+          checked: true,
+          onClick: () => {},
+        } as const,
+      ]
+    : []
+  return [
+    ...custom,
+    ...Object.keys(colorSchemes).map(
+      option =>
+        ({
+          label: option,
+          type: 'radio',
+          checked: !customColorScheme && colorSchemeName === option,
+          onClick: () => {
+            model.setColorSchemeName(option)
+          },
+        }) as const,
+    ),
+  ]
+}
+
 const ColorSchemeMenu = observer(function ({ model }: { model: MsaViewModel }) {
-  const { colorSchemeName } = model
   return (
     <CascadingMenuButton
       data-testid="color_scheme_menu"
@@ -17,17 +46,7 @@ const ColorSchemeMenu = observer(function ({ model }: { model: MsaViewModel }) {
       closeAfterItemClick
       anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
       transformOrigin={{ vertical: 'top', horizontal: 'left' }}
-      menuItems={Object.keys(colorSchemes).map(
-        option =>
-          ({
-            label: option,
-            type: 'radio',
-            checked: colorSchemeName === option,
-            onClick: () => {
-              model.setColorSchemeName(option)
-            },
-          }) as const,
-      )}
+      menuItems={colorSchemeMenuItems(model)}
     >
       <Palette />
     </CascadingMenuButton>

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

@@ -0,0 +1,50 @@
+import React, { useState } from 'react'
+
+import { Autocomplete, TextField } from '@mui/material'
+import { observer } from 'mobx-react'
+
+import { findableRowNames, goTo, rowNameSuggestions } from './goTo.ts'
+
+import type { MsaViewModel } from '../../model.ts'
+
+const label = 'Go to row or column'
+
+const GoToBox = observer(function ({ model }: { model: MsaViewModel }) {
+  const [missed, setMissed] = useState(false)
+  const names = findableRowNames(model)
+  return names.length > 1 || model.numColumns > 0 ? (
+    <Autocomplete
+      freeSolo
+      size="small"
+      options={names}
+      filterOptions={(options, { inputValue }) =>
+        rowNameSuggestions(options, inputValue)
+      }
+      value={null}
+      blurOnSelect
+      onInputChange={() => {
+        setMissed(false)
+      }}
+      onChange={(_, text) => {
+        if (text) {
+          setMissed(!goTo(model, text))
+        }
+      }}
+      style={{ width: 180, margin: 'auto 8px' }}
+      renderInput={params => (
+        <TextField
+          {...params}
+          error={missed}
+          placeholder={label}
+          title="A row name, a column number, or name:residue"
+          slotProps={{
+            ...params.slotProps,
+            htmlInput: { ...params.slotProps.htmlInput, 'aria-label': label },
+          }}
+        />
+      )}
+    />
+  ) : null
+})
+
+export default GoToBox

package/src/components/header/Header.tsx

@@ -5,14 +5,16 @@ 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 GoToBox from './GoToBox.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 SelectionMenu from './SelectionMenu.tsx'
 import TreeSettingsMenu from './TreeSettingsMenu.tsx'
 import UnshareableDataWarning from './UnshareableDataWarning.tsx'
 import ZoomControls from './ZoomControls.tsx'
@@ -42,14 +44,19 @@ const Header = observer(function ({ model }: { model: MsaViewModel }) {
       <ZoomControls model={model} />
       <ZoomMenu model={model} />
       <GappynessSlider model={model} />
+      <GoToBox model={model} />
       <div style={{ paddingLeft: 20, margin: 'auto' }}>
         <MultiAlignmentSelector model={model} />
       </div>
-      <HeaderInfoArea model={model} />
-      <Spacer />
+      {/* zero flex-basis, so what appears here on a selection or a hover
+      shrinks into the header's spare width and never wraps it */}
+      <div style={{ flex: '1 1 0', minWidth: 0, display: 'flex' }}>
+        <SelectionMenu model={model} />
+        <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 +71,4 @@ const Header = observer(function ({ model }: { model: MsaViewModel }) {
   )
 })
 
-function Spacer() {
-  return <div style={{ flex: 1 }} />
-}
-
 export default Header

package/src/components/header/SelectionMenu.tsx

@@ -0,0 +1,117 @@
+import React, { useState } from 'react'
+
+import ArrowDropDown from '@mui/icons-material/ArrowDropDown'
+import Clear from '@mui/icons-material/Clear'
+import ContentCopy from '@mui/icons-material/ContentCopy'
+import ZoomIn from '@mui/icons-material/ZoomIn'
+import {
+  Button,
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+  Tooltip,
+} from '@mui/material'
+import { observer } from 'mobx-react'
+
+import copy from '../../vendor/copyToClipboard.ts'
+
+import type { MsaViewModel } from '../../model.ts'
+
+function count(n: number, noun: string) {
+  return `${n.toLocaleString('en-US')} ${noun}${n === 1 ? '' : 's'}`
+}
+
+/**
+ * The selected block's size, as a button opening what to do with it. It
+ * renders only while there is a selection. Header.tsx puts it in the slot
+ * with no width of its own, so the label ellipsizes before it could wrap the
+ * header onto a second line.
+ */
+const SelectionMenu = observer(function ({ model }: { model: MsaViewModel }) {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement>()
+  const { selectionSize, selectionFileSpan } = model
+  if (!selectionSize || !selectionFileSpan) {
+    return null
+  }
+  const label = `${count(selectionSize.columns, 'column')} × ${count(selectionSize.rows, 'row')}`
+  const items = [
+    {
+      text: 'Copy as FASTA',
+      Icon: ContentCopy,
+      act: () => {
+        copy(model.selectionFasta)
+      },
+    },
+    {
+      text: 'Zoom to selection',
+      Icon: ZoomIn,
+      act: () => {
+        model.zoomToSelection()
+      },
+    },
+    {
+      text: 'Clear selection',
+      Icon: Clear,
+      act: () => {
+        model.clearSelection()
+      },
+    },
+  ]
+  return (
+    <>
+      <Tooltip
+        title={`Columns ${selectionFileSpan.start}-${selectionFileSpan.end} selected. Shift-drag the alignment to select, Escape to clear`}
+      >
+        <Button
+          size="small"
+          aria-label={`Selection: ${label}`}
+          endIcon={<ArrowDropDown />}
+          onClick={event => {
+            setAnchorEl(event.currentTarget)
+          }}
+          style={{
+            margin: 'auto 0 auto 8px',
+            flexShrink: 0,
+            maxWidth: '100%',
+            minWidth: 0,
+            textTransform: 'none',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
+            {label}
+          </span>
+        </Button>
+      </Tooltip>
+      {anchorEl ? (
+        <Menu
+          anchorEl={anchorEl}
+          open
+          transitionDuration={0}
+          onClose={() => {
+            setAnchorEl(undefined)
+          }}
+        >
+          {items.map(({ text, Icon, act }) => (
+            <MenuItem
+              key={text}
+              dense
+              onClick={() => {
+                act()
+                setAnchorEl(undefined)
+              }}
+            >
+              <ListItemIcon>
+                <Icon fontSize="small" />
+              </ListItemIcon>
+              <ListItemText>{text}</ListItemText>
+            </MenuItem>
+          ))}
+        </Menu>
+      ) : null}
+    </>
+  )
+})
+
+export default SelectionMenu

package/src/components/header/goTo.ts

@@ -0,0 +1,75 @@
+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)
+}
+
+// not MUI's createFilterOptions: JBrowse hosts do not re-export it, so
+// jbrowse-plugin-msaview would fail to load
+export function rowNameSuggestions(names: string[], input: string, limit = 50) {
+  const query = input.toLowerCase()
+  return names
+    .filter(name => name.toLowerCase().includes(query))
+    .slice(0, limit)
+}
+
+/**
+ * The visible row and column a "Go to" entry names: a row by its name, the
+ * 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) {
+  const query = text.trim()
+  const row = model.rowNamesSet.get(query)
+  if (row !== undefined) {
+    return { row }
+  }
+  const residue = /^(.+):(\d+)$/.exec(query)
+  if (residue) {
+    const [, name = '', pos] = residue
+    const rowIndex = model.rowNamesSet.get(name)
+    const col =
+      rowIndex === undefined ? undefined : columnOfResidue(model, name, +pos!)
+    return col === undefined ? undefined : { row: rowIndex, col }
+  }
+  if (/^\d+$/.test(query)) {
+    const n = +query
+    const { relativeTo, numColumns } = model
+    const col = relativeTo
+      ? columnOfResidue(model, relativeTo, n)
+      : n >= 1 && n <= numColumns
+        ? n - 1
+        : undefined
+    return col === undefined ? undefined : { col }
+  }
+  return undefined
+}
+
+// seqPosToVisibleCol maps a residue past the row's end to the column after
+// it; here that residue names nothing
+function columnOfResidue(model: MsaViewModel, name: string, pos: number) {
+  const globalCol = model.seqPosIndex(name)?.[pos - 1]
+  return globalCol === undefined
+    ? undefined
+    : model.globalColToVisibleCol(globalCol)
+}
+
+/** centers the view on the entry's target and lights it; false if none */
+export function goTo(model: MsaViewModel, text: string) {
+  const target = resolveGoTo(model, text)
+  if (target) {
+    const { row, col } = target
+    const { rowHeight, colWidth, msaAreaHeight, msaAreaWidth } = model
+    if (row !== undefined) {
+      model.setScrollY(-(row + 0.5) * rowHeight + msaAreaHeight / 2)
+    }
+    if (col !== undefined) {
+      model.setScrollX(-(col + 0.5) * colWidth + msaAreaWidth / 2)
+    }
+    model.setMousePos(col, row)
+  }
+  return target !== undefined
+}

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)
     }),