react-msaview 8.3.0 → 8.4.1

package/src/components/header/GoToBox.tsx

@@ -0,0 +1,64 @@
+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'
+import type { AutocompleteRenderInputParams } from '@mui/material'
+
+const label = 'Go to row or column'
+
+// MUI 9 hands renderInput `slotProps`; MUI 7, which every released JBrowse host
+// serves, hands it `inputProps` and no `slotProps` at all
+export function labelledInput(params: AutocompleteRenderInputParams) {
+  const { slotProps, inputProps } = params as Partial<
+    AutocompleteRenderInputParams & { inputProps: object }
+  >
+  return slotProps
+    ? {
+        slotProps: {
+          ...slotProps,
+          htmlInput: { ...slotProps.htmlInput, 'aria-label': label },
+        },
+      }
+    : { inputProps: { ...inputProps, 'aria-label': label } }
+}
+
+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"
+          {...labelledInput(params)}
+        />
+      )}
+    />
+  ) : 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

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/msa/MSACanvas.tsx

@@ -54,13 +54,23 @@ const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
       // 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."
+      aria-label="Alignment. Arrow keys scroll, shift pages, + and - zoom, Home and End jump to the first and last column. Shift-drag selects cells, and Escape clears the selection."
       onKeyDown={event => {
         if (onMsaKey(model, event)) {
           event.preventDefault()
         }
       }}
-      onMouseDown={onMouseDown}
+      onMouseDown={event => {
+        // a shifted press selects cells (useMsaBlockMouse), so it takes the
+        // focus Escape clears from, and leaves out the pan and the page's own
+        // text selection
+        if (event.shiftKey) {
+          event.preventDefault()
+          ref.current?.focus({ preventScroll: true })
+        } else {
+          onMouseDown(event)
+        }
+      }}
       onMouseUp={onMouseUp}
       style={{
         position: 'relative',

package/src/components/msa/MSACanvasBlock.tsx

@@ -71,7 +71,11 @@ const MSACanvasBlock = observer(function ({
             onMouseMove(event, ref.current)
           }
         }}
-        onMouseDown={onMouseDown}
+        onMouseDown={event => {
+          if (ref.current) {
+            onMouseDown(event, ref.current)
+          }
+        }}
         onClick={event => {
           if (ref.current) {
             onClick(event, ref.current)

package/src/components/msa/msaKeys.ts

@@ -33,6 +33,12 @@ export function onMsaKey(
     case 'End':
       model.setScrollX(model.maxScrollX)
       return true
+    case 'Escape':
+      if (model.selection) {
+        model.clearSelection()
+        return true
+      }
+      return false
     default:
       return false
   }

package/src/components/msa/msaRaster.ts

@@ -297,6 +297,7 @@ function rasterKeys(model: MsaViewModel, theme: Theme) {
     model.columns,
     model.leaves,
     model.colorSchemeName,
+    model.customColorScheme,
     tileColorTable(model),
     model.relativeTo,
     theme.palette.action.hover,

package/src/components/msa/renderHighlights.ts

@@ -1,5 +1,9 @@
 import { setFontSize } from '../../setFontSize.ts'
-import { referenceColor } from '../overlayColors.ts'
+import {
+  referenceColor,
+  selectionBorder,
+  selectionFill,
+} from '../overlayColors.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 import type { RenderCtx } from '../renderCtx.ts'
@@ -172,11 +176,48 @@ export function renderHighlights({
   }
 }
 
+/**
+ * The selected block, a bordered band per run of consecutive selected rows,
+ * culled to the rows this block covers
+ */
+export function renderSelection({
+  ctx,
+  model,
+  offsetX,
+  offsetY,
+  height,
+}: {
+  ctx: RenderCtx
+  model: MsaViewModel
+  offsetX: number
+  offsetY: number
+  height: number
+}) {
+  const { resolvedSelection, colWidth, rowHeight } = model
+  if (!resolvedSelection) {
+    return
+  }
+  const { startCol, endCol, rowRuns } = resolvedSelection
+  const x = startCol * colWidth - offsetX
+  const w = (endCol - startCol + 1) * colWidth
+  ctx.lineWidth = 1
+  for (const [first, last] of rowRuns) {
+    const y = first * rowHeight - offsetY
+    const h = (last - first + 1) * rowHeight
+    if (y < height && y + h > 0) {
+      ctx.fillStyle = selectionFill
+      ctx.fillRect(x, y, w, h)
+      ctx.strokeStyle = selectionBorder
+      ctx.strokeRect(x, y, w, h)
+    }
+  }
+}
+
 /**
  * The overlay parts that come from the snapshot: the reference row's tint, a
- * bordered band per run of highlighted columns, and the `highlights` layer. The
- * live overlay draws these under its hover and click bands; the SVG export
- * draws only these.
+ * bordered band per run of highlighted columns, the `highlights` layer and the
+ * selected block. The live overlay draws these under its hover and click
+ * bands; the SVG export draws only these.
  */
 export function renderPersistentHighlights({
   ctx,
@@ -214,4 +255,5 @@ export function renderPersistentHighlights({
   }
 
   renderHighlights({ ctx, model, theme, offsetX, offsetY, width, height })
+  renderSelection({ ctx, model, offsetX, offsetY, height })
 }

package/src/components/msa/tileColor.ts

@@ -4,12 +4,12 @@ import type { MsaViewModel } from '../../model.ts'
 // only the active scheme's column table leaves the other per-column table
 // uncomputed.
 export function tileColorFn(model: MsaViewModel) {
-  const { colorSchemeName } = model
-  if (colorSchemeName === 'clustalx_protein_dynamic') {
+  const { dynamicColorSchemeName } = model
+  if (dynamicColorSchemeName === 'clustalx_protein_dynamic') {
     const { colClustalX } = model
     return (col: number, letter: string) => colClustalX[col]![letter]
   }
-  if (colorSchemeName === 'percent_identity_dynamic') {
+  if (dynamicColorSchemeName === 'percent_identity_dynamic') {
     const { colConsensus } = model
     return (col: number, letter: string) => {
       const consensus = colConsensus[col]!
@@ -20,14 +20,15 @@ export function tileColorFn(model: MsaViewModel) {
   return (_col: number, letter: string) => colorScheme[letter]
 }
 
-// The column table the active scheme colors from, or undefined for the static
-// schemes. A cache of rendered colors keys on its identity plus the scheme name.
+// The table the active scheme colors from: a dynamic scheme's per-column table,
+// or the letter table of a static scheme or a `customColorScheme` map. A cache
+// of rendered colors keys on its identity plus the scheme name.
 export function tileColorTable(model: MsaViewModel) {
-  const { colorSchemeName } = model
-  if (colorSchemeName === 'clustalx_protein_dynamic') {
+  const { dynamicColorSchemeName } = model
+  if (dynamicColorSchemeName === 'clustalx_protein_dynamic') {
     return model.colClustalX
   }
-  if (colorSchemeName === 'percent_identity_dynamic') {
+  if (dynamicColorSchemeName === 'percent_identity_dynamic') {
     return model.colConsensus
   }
   return model.colorScheme

package/src/components/msa/useMsaBlockMouse.ts

@@ -1,34 +1,12 @@
 import { useRef } from 'react'
 
+import { dragSelection, maxClickTravel } from '../selectionDrag.ts'
 import { useHoverAnchor } from '../useHoverAnchor.ts'
 
 import type { MsaViewModel } from '../../model.ts'
+import type { ClientPoint } from '../selectionDrag.ts'
 import type React from 'react'
 
-const maxClickTravel = 3
-
-function eventToColRow({
-  event,
-  el,
-  offsetX,
-  offsetY,
-  colWidth,
-  rowHeight,
-}: {
-  event: React.MouseEvent
-  el: HTMLElement
-  offsetX: number
-  offsetY: number
-  colWidth: number
-  rowHeight: number
-}) {
-  const { left, top } = el.getBoundingClientRect()
-  return {
-    col: Math.floor((event.clientX - left + offsetX) / colWidth),
-    row: Math.floor((event.clientY - top + offsetY) / rowHeight),
-  }
-}
-
 /**
  * Translates pointer events over one MSA block into model column/row hover and
  * click state, and reports where a tooltip should be anchored.
@@ -51,9 +29,23 @@ export function useMsaBlockMouse({
   const { anchor, hoverAt, clearAnchor } = useHoverAnchor<true>()
   const downAt = useRef<{ x: number; y: number }>(undefined)
 
+  // The block's rect places its cells on the page. A drag keeps the mapping
+  // it started with, so each point subtracts the scroll since then.
+  function cellMapper(el: HTMLElement) {
+    const { left, top } = el.getBoundingClientRect()
+    const { scrollX, scrollY } = model
+    return ({ clientX, clientY }: ClientPoint) => ({
+      col: Math.floor(
+        (clientX - left + offsetX - (model.scrollX - scrollX)) / model.colWidth,
+      ),
+      row: Math.floor(
+        (clientY - top + offsetY - (model.scrollY - scrollY)) / model.rowHeight,
+      ),
+    })
+  }
+
   function colRow(event: React.MouseEvent, el: HTMLElement) {
-    const { colWidth, rowHeight } = model
-    return eventToColRow({ event, el, offsetX, offsetY, colWidth, rowHeight })
+    return cellMapper(el)(event)
   }
 
   // a block can extend past the alignment (the last block is a full tile wide,
@@ -73,8 +65,13 @@ export function useMsaBlockMouse({
     hoverAt(event, hasTooltip || undefined)
   }
 
-  function onMouseDown(event: React.MouseEvent) {
+  // shift+drag selects a block; MSACanvas leaves a shifted press out of its
+  // pan
+  function onMouseDown(event: React.MouseEvent, el: HTMLElement) {
     downAt.current = { x: event.clientX, y: event.clientY }
+    if (event.shiftKey && event.button === 0) {
+      dragSelection(model, event, cellMapper(el))
+    }
   }
 
   function onClick(event: React.MouseEvent, el: HTMLElement) {

package/src/components/overlayColors.ts

@@ -16,3 +16,7 @@ export const multiRowHoverColor = 'rgba(255,165,0,0.15)'
 // match or the crosshair appears to change color as it crosses the tracks.
 export const hoverColor = 'rgba(0,0,0,0.15)'
 export const clickColor = 'rgba(128,128,0,0.2)'
+
+// the selected block, a blue that reads apart from the orange highlights
+export const selectionFill = 'rgba(25,118,210,0.22)'
+export const selectionBorder = 'rgba(25,118,210,0.95)'

package/src/components/selectionDrag.ts

@@ -0,0 +1,42 @@
+import { isAlive } from '@jbrowse/mobx-state-tree'
+
+import type { MsaViewModel } from '../model.ts'
+
+// a press that travels further than this, in px, is a drag and not a click
+export const maxClickTravel = 3
+
+export interface ClientPoint {
+  clientX: number
+  clientY: number
+}
+
+/**
+ * Follows a press through the window until its release, selecting the block
+ * between the cell it started on and the cell under the pointer. The selection
+ * starts once the pointer travels past `maxClickTravel`, so a press that stays
+ * put reaches the click handlers unchanged. `cellAt` maps a client point to a
+ * visible column and row index, or a column alone to select across every row.
+ */
+export function dragSelection(
+  model: MsaViewModel,
+  start: ClientPoint,
+  cellAt: (point: ClientPoint) => { col: number; row?: number },
+) {
+  const anchor = cellAt(start)
+  const { clientX, clientY } = start
+  let dragging = false
+  function onMove(event: MouseEvent) {
+    dragging ||=
+      Math.hypot(event.clientX - clientX, event.clientY - clientY) >
+      maxClickTravel
+    if (dragging && isAlive(model)) {
+      model.selectBlock(anchor, cellAt(event))
+    }
+  }
+  function onUp() {
+    window.removeEventListener('mousemove', onMove)
+    window.removeEventListener('mouseup', onUp)
+  }
+  window.addEventListener('mousemove', onMove)
+  window.addEventListener('mouseup', onUp)
+}

package/src/components/tracks/useTrackHover.ts

@@ -1,3 +1,4 @@
+import { dragSelection } from '../selectionDrag.ts'
 import { useHoverAnchor } from '../useHoverAnchor.ts'
 
 import type { MsaViewModel } from '../../model.ts'
@@ -6,7 +7,8 @@ import type React from 'react'
 /**
  * Translates pointer events over a track's row into the hovered column and a
  * tooltip anchor. The track shares the alignment's columns, so hovering it sets
- * the model's mouse column too and the alignment's hover band follows along.
+ * the model's mouse column too and the alignment's hover band follows along. A
+ * drag along the row selects the columns it covers across every row.
  *
  * `tooltip` off skips the anchor, so a track whose tooltip is turned off still
  * drives the hover band without re-rendering on every mouse move.
@@ -22,21 +24,41 @@ export function useTrackHover({
 
   // the blocks are laid out in column space and scrolled by a transform on
   // their container, so the pointer's column comes off the untransformed row
+  function colAt(clientX: number, left: number) {
+    return Math.floor((clientX - left - model.scrollX) / model.colWidth)
+  }
+
   function onMouseMove(event: React.MouseEvent, el: HTMLElement) {
-    const { colWidth, scrollX, numColumns } = model
-    const { left } = el.getBoundingClientRect()
-    const col = Math.floor((event.clientX - left - scrollX) / colWidth)
-    const hit = col >= 0 && col < numColumns
+    const col = colAt(event.clientX, el.getBoundingClientRect().left)
+    const hit = col >= 0 && col < model.numColumns
     model.setMousePos(hit ? col : undefined, undefined)
     if (tooltip) {
       hoverAt(event, hit ? col : undefined)
     }
   }
 
+  // a press on a track's canvas, which leaves out the resize divider under it.
+  // The row takes the focus, so Escape reaches onMsaKey from there too
+  function onMouseDown(event: React.MouseEvent, el: HTMLElement) {
+    if (event.button === 0 && event.target instanceof HTMLCanvasElement) {
+      event.preventDefault()
+      el.focus({ preventScroll: true })
+      const { left } = el.getBoundingClientRect()
+      dragSelection(model, event, ({ clientX }) => ({
+        col: colAt(clientX, left),
+      }))
+    }
+  }
+
   function onMouseLeave() {
     clearAnchor()
     model.setMousePos(undefined, undefined)
   }
 
-  return { anchor: tooltip ? anchor : undefined, onMouseMove, onMouseLeave }
+  return {
+    anchor: tooltip ? anchor : undefined,
+    onMouseMove,
+    onMouseDown,
+    onMouseLeave,
+  }
 }