react-msaview 8.3.0 → 8.4.0

package/src/components/MSAViewer.tsx

@@ -13,12 +13,16 @@ import type { MsaViewModel } from '../model.ts'
 import type {
   Cell,
   Clade,
+  ColorScheme,
   ColumnTrackSpec,
   Encoding,
+  Feature,
   Highlight,
+  MsaSelection,
   Region,
   ResidueEncoding,
   ResidueMapping,
+  RowDataInput,
   RowPanelSpec,
   TreeOrder,
   TreeRoot,
@@ -44,7 +48,11 @@ export interface MSAViewerProps {
   msaFilehandle?: FileLocationType
   treeFilehandle?: FileLocationType
   gffFilehandle?: FileLocationType
-  colorScheme?: string
+  /**
+   * a scheme name from the built-in table, or `{map}`, a color per residue
+   * letter that leaves every other letter uncolored
+   */
+  colorScheme?: ColorScheme
   height?: number
   /** initial per-column pixel width (zoom level) */
   colWidth?: number
@@ -62,6 +70,13 @@ export interface MSAViewerProps {
    * for whole rows, each with an optional `label` and `color`
    */
   highlights?: Highlight[]
+  /**
+   * features on the rows as data, drawn with the GFF's: `{row, start, end}` in
+   * residues of that row, 1-based and inclusive, with an optional `name`,
+   * `description`, `type`, `strand` and `color`, and any other field an
+   * encoding reads (see docs/layers.md)
+   */
+  features?: Feature[]
   /**
    * clades of the tree with a mark drawn over them: `{mrca, tips, mark}` or
    * `{range, tips, mark}`, where `mark` is `highlight`, `bracket`, `collapse`
@@ -75,7 +90,7 @@ export interface MSAViewerProps {
   /** which residue of which structure each row's residues are (see docs/layers.md) */
   residueMappings?: ResidueMapping[]
   /** extra fields per row name, such as a lineage or a host (see docs/layers.md) */
-  rowData?: Record<string, Record<string, string>>
+  rowData?: RowDataInput
   /**
    * what the viewer's marks read from a table: `{channel, field, scale?}`,
    * where `channel` is `tipLabel`, `rowTint` or `branch` over `rowData`, or
@@ -120,6 +135,11 @@ export interface MSAViewerProps {
    * in columns, 1-based and inclusive
    */
   region?: Region
+  /**
+   * the selected block: `{start, end}` columns of the file, 1-based and
+   * inclusive, and `rows` by name, every row where absent
+   */
+  selection?: MsaSelection
   /** leave out the toolbar, for a page drawing its own controls */
   hideHeader?: boolean
   /**
@@ -133,43 +153,48 @@ export interface MSAViewerProps {
   onCellClick?: (cell: Cell | undefined) => void
   /** the alignment columns on screen, after every scroll, zoom and resize */
   onViewportChange?: (viewport: Viewport | undefined) => void
+  /**
+   * the selected block, after each change a drag, the header menu, Escape or
+   * the `selection` prop makes, or undefined when it clears
+   */
+  onSelectionChange?: (selection: MsaSelection | undefined) => void
   /**
    * the model the viewer built, for the model API; called again with the new
-   * model when msa, tree, gff or a filehandle changes
+   * model when msa, tree, msaFilehandle or treeFilehandle changes
    */
   onModel?: (model: MsaViewModel) => void
 }
 
+function colorSchemeSnapshot(scheme: ColorScheme | undefined) {
+  return typeof scheme === 'string'
+    ? { colorSchemeName: scheme }
+    : scheme
+      ? { customColorScheme: scheme.map }
+      : {}
+}
+
 type DataSource = Pick<
   MSAViewerProps,
-  'msa' | 'tree' | 'gff' | 'msaFilehandle' | 'treeFilehandle' | 'gffFilehandle'
+  'msa' | 'tree' | 'msaFilehandle' | 'treeFilehandle'
 >
 
 function sameSource(a: DataSource, b: DataSource) {
   return (
     a.msa === b.msa &&
     a.tree === b.tree &&
-    a.gff === b.gff &&
-    JSON.stringify([a.msaFilehandle, a.treeFilehandle, a.gffFilehandle]) ===
-      JSON.stringify([b.msaFilehandle, b.treeFilehandle, b.gffFilehandle])
+    JSON.stringify([a.msaFilehandle, a.treeFilehandle]) ===
+      JSON.stringify([b.msaFilehandle, b.treeFilehandle])
   )
 }
 
 /**
- * A new alignment, tree or annotation file needs a new model, so the viewer
- * remounts when one of those props changes and keeps its model across every
- * other change.
+ * A new alignment or tree needs a new model, so the viewer remounts when one
+ * of those props changes and keeps its model across every other change,
+ * including a new annotation file.
  */
 export default function MSAViewer(props: MSAViewerProps) {
-  const { msa, tree, gff, msaFilehandle, treeFilehandle, gffFilehandle } = props
-  const source = {
-    msa,
-    tree,
-    gff,
-    msaFilehandle,
-    treeFilehandle,
-    gffFilehandle,
-  }
+  const { msa, tree, msaFilehandle, treeFilehandle } = props
+  const source = { msa, tree, msaFilehandle, treeFilehandle }
   const [shown, setShown] = useState({ source, generation: 0 })
   if (!sameSource(shown.source, source)) {
     setShown({ source, generation: shown.generation + 1 })
@@ -177,7 +202,9 @@ export default function MSAViewer(props: MSAViewerProps) {
   return <Viewer key={shown.generation} {...props} />
 }
 
-function useModelReaction<K extends 'hoveredCell' | 'clickedCell' | 'viewport'>(
+function useModelReaction<
+  K extends 'hoveredCell' | 'clickedCell' | 'viewport' | 'selection',
+>(
   model: MsaViewModel,
   key: K,
   handler: ((value: MsaViewModel[K]) => void) | undefined,
@@ -216,6 +243,7 @@ function Viewer({
   allowedGappyness,
   highlightColumns,
   highlights,
+  features,
   clades,
   relativeTo,
   columnTracks,
@@ -231,11 +259,13 @@ function Viewer({
   treeOrder,
   treeRoot,
   region,
+  selection,
   hideHeader,
   theme,
   onCellHover,
   onCellClick,
   onViewportChange,
+  onSelectionChange,
   onModel,
 }: MSAViewerProps) {
   const [model] = useState(() =>
@@ -256,13 +286,15 @@ function Viewer({
       ...(msaFilehandle ? { msaFilehandle } : {}),
       ...(treeFilehandle ? { treeFilehandle } : {}),
       ...(gffFilehandle ? { gffFilehandle } : {}),
-      ...(colorScheme ? { colorSchemeName: colorScheme } : {}),
+      ...colorSchemeSnapshot(colorScheme),
       ...(height ? { height } : {}),
       ...(colWidth ? { colWidth } : {}),
       ...(rowHeight ? { rowHeight } : {}),
       ...(allowedGappyness !== undefined ? { allowedGappyness } : {}),
       ...(highlightColumns ? { highlightColumns } : {}),
       ...(highlights ? { highlights } : {}),
+      ...(features ? { features } : {}),
+      ...(selection ? { selection } : {}),
       ...(clades ? { clades } : {}),
       ...(relativeTo ? { relativeTo } : {}),
       ...(columnTracks ? { columnTracks } : {}),
@@ -299,11 +331,6 @@ function Viewer({
       model.setHeight(height)
     }
   }, [model, height])
-  useEffect(() => {
-    if (colorScheme !== undefined) {
-      model.setColorSchemeName(colorScheme)
-    }
-  }, [model, colorScheme])
   useEffect(() => {
     if (colWidth !== undefined) {
       model.setColWidth(colWidth)
@@ -352,12 +379,53 @@ function Viewer({
     model.drawRelativeTo(relativeTo)
   }, [model, relativeTo])
 
+  // The snapshot already holds the first gff and gffFilehandle, so these
+  // effects apply only a later change. Removing either one sets the text back
+  // to the gff prop, which clears the annotations when that is absent too.
+  const appliedGff = useRef(gff)
+  const gffFilehandleKey = JSON.stringify(gffFilehandle ?? null)
+  const appliedGffFilehandle = useRef(gffFilehandleKey)
+  useEffect(() => {
+    if (appliedGffFilehandle.current !== gffFilehandleKey) {
+      appliedGffFilehandle.current = gffFilehandleKey
+      const location = JSON.parse(gffFilehandleKey) as FileLocationType | null
+      if (location) {
+        model.setGFFFilehandle(location)
+      } else {
+        model.setGFF(appliedGff.current)
+      }
+    }
+  }, [model, gffFilehandleKey])
+  useEffect(() => {
+    if (appliedGff.current !== gff) {
+      appliedGff.current = gff
+      model.setGFF(gff)
+    }
+  }, [model, gff])
+
   // keyed by content, since a host computing a layer inline passes a new array
   // on every render
+  const colorSchemeKey = JSON.stringify(colorScheme ?? null)
+  useEffect(() => {
+    const scheme = JSON.parse(colorSchemeKey) as ColorScheme | null
+    if (typeof scheme === 'string') {
+      model.setColorSchemeName(scheme)
+    } else if (scheme) {
+      model.setCustomColorScheme(scheme.map)
+    }
+  }, [model, colorSchemeKey])
   const highlightsKey = JSON.stringify(highlights ?? [])
   useEffect(() => {
     model.setHighlights(JSON.parse(highlightsKey))
   }, [model, highlightsKey])
+  const featuresKey = JSON.stringify(features ?? [])
+  useEffect(() => {
+    model.setFeatures(JSON.parse(featuresKey))
+  }, [model, featuresKey])
+  const selectionKey = JSON.stringify(selection ?? null)
+  useEffect(() => {
+    model.setSelection(JSON.parse(selectionKey) ?? undefined)
+  }, [model, selectionKey])
   const treeRootKey = JSON.stringify(treeRoot ?? null)
   useEffect(() => {
     model.setTreeRoot(JSON.parse(treeRootKey) ?? undefined)
@@ -411,6 +479,7 @@ function Viewer({
   useModelReaction(model, 'hoveredCell', onCellHover)
   useModelReaction(model, 'clickedCell', onCellClick)
   useModelReaction(model, 'viewport', onViewportChange)
+  useModelReaction(model, 'selection', onSelectionChange)
 
   const latestOnModel = useRef(onModel)
   useEffect(() => {

package/src/components/MetadataTable.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+
+import { makeStyles } from '@jbrowse/core/util/tss-react'
+import { Table, TableBody, TableCell, TableRow } from '@mui/material'
+
+const useStyles = makeStyles()({
+  key: {
+    fontWeight: 'bold',
+    verticalAlign: 'top',
+  },
+  value: {
+    whiteSpace: 'pre-wrap',
+    wordBreak: 'break-word',
+  },
+})
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+export function isEmpty(value: unknown) {
+  return isRecord(value) && Object.keys(value).length === 0
+}
+
+export default function MetadataTable({
+  record,
+}: {
+  record: Record<string, unknown>
+}) {
+  const { classes } = 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} />
+                ) : Array.isArray(value) ? (
+                  value.join('\n')
+                ) : (
+                  String(value)
+                )}
+              </TableCell>
+            </TableRow>
+          ))}
+      </TableBody>
+    </Table>
+  )
+}

package/src/components/Track.tsx

@@ -7,6 +7,7 @@ import { IconButton, Menu, MenuItem } from '@mui/material'
 import { observer } from 'mobx-react'
 
 import { useWheelScroll } from '../useWheelScroll.ts'
+import { onMsaKey } from './msa/msaKeys.ts'
 import TrackTooltipContent from './tracks/TrackTooltipContent.tsx'
 import { useTrackHover } from './tracks/useTrackHover.ts'
 
@@ -146,7 +147,7 @@ const Track = observer(function ({
   )
   useWheelScroll({ ref, onScrollX })
   const { classes } = useStyles()
-  const { anchor, onMouseMove, onMouseLeave } = useTrackHover({
+  const { anchor, onMouseMove, onMouseDown, onMouseLeave } = useTrackHover({
     model,
     tooltip: showColumnStats,
   })
@@ -162,11 +163,23 @@ const Track = observer(function ({
       <div
         ref={ref}
         data-testid={`track_${track.model.id}`}
+        tabIndex={-1}
+        style={{ outline: 'none' }}
+        onKeyDown={event => {
+          if (onMsaKey(model, event)) {
+            event.preventDefault()
+          }
+        }}
         onMouseMove={event => {
           if (ref.current) {
             onMouseMove(event, ref.current)
           }
         }}
+        onMouseDown={event => {
+          if (ref.current) {
+            onMouseDown(event, ref.current)
+          }
+        }}
         onMouseLeave={() => {
           onMouseLeave()
         }}

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

@@ -9,11 +9,12 @@ 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 LoadWarnings from './LoadWarnings.tsx'
 import MSASettingsMenu from './MSASettingsMenu.tsx'
 import MultiAlignmentSelector from './MultiAlignmentSelector.tsx'
-import RowSearch from './RowSearch.tsx'
+import SelectionMenu from './SelectionMenu.tsx'
 import TreeSettingsMenu from './TreeSettingsMenu.tsx'
 import UnshareableDataWarning from './UnshareableDataWarning.tsx'
 import ZoomControls from './ZoomControls.tsx'
@@ -43,11 +44,14 @@ const Header = observer(function ({ model }: { model: MsaViewModel }) {
       <ZoomControls model={model} />
       <ZoomMenu model={model} />
       <GappynessSlider model={model} />
-      <RowSearch model={model} />
+      <GoToBox model={model} />
       <div style={{ paddingLeft: 20, margin: 'auto' }}>
         <MultiAlignmentSelector model={model} />
       </div>
+      {/* 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} />

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