react-msaview 7.0.0 → 8.0.0

package/src/components/ResizeHandles.tsx

@@ -5,7 +5,7 @@ import { observer } from 'mobx-react'
 import DragHandle from './DragHandle.tsx'
 
 import type { MsaViewModel } from '../model.ts'
-import type { BasicTrack, TrackKind } from '../types.ts'
+import type { BasicTrack } from '../types.ts'
 
 export const VerticalResizeHandle = observer(function ({
   model,
@@ -51,25 +51,6 @@ export const HorizontalResizeHandle = observer(function ({
   )
 })
 
-// The volatile behind each resizable kind of computed track. Both bar tracks
-// write one height so conservation and property conservation stay directly
-// comparable; the logo keeps its own, being taller by default. Text tracks are
-// absent: they are one alignment row tall and follow rowHeight, so the zoom
-// controls already size them.
-const setTrackHeight: Partial<
-  Record<TrackKind, (model: MsaViewModel, height: number) => void>
-> = {
-  bar: (model, height) => {
-    model.setConservationTrackHeight(height)
-  },
-  logo: (model, height) => {
-    model.setSequenceLogoTrackHeight(height)
-  },
-  arc: (model, height) => {
-    model.setArcTrackHeight(height)
-  },
-}
-
 export const TrackResizeHandle = observer(function ({
   model,
   track,
@@ -77,23 +58,27 @@ export const TrackResizeHandle = observer(function ({
   model: MsaViewModel
   track: BasicTrack
 }) {
-  const { id, kind, height } = track.model
-  const setHeight = setTrackHeight[kind]
-  // a data track carries its own height, so its handle resizes that track --
-  // dragging one used to resize every track of its kind instead
-  const ownHeight = model.columnTracks.some(t => t.id === id)
+  const { id, heightKey, height } = track.model
+  // tracks sharing a key resize together, so only the last turned-on one of
+  // them carries the divider: a second between conservation and property
+  // conservation would move the pair this one already moves. The drag divides
+  // across the group, so its bottom edge follows the cursor rather than half
+  const siblings = model.turnedOnTracks.filter(
+    t => t.model.heightKey === heightKey,
+  )
+  const count = siblings.length
   const onDrag = useCallback(
     (delta: number, startHeight: number) => {
-      const next = Math.max(10, startHeight + delta)
-      if (ownHeight) {
-        model.setColumnTrackHeight(id, next)
-      } else {
-        setTrackHeight[kind]?.(model, next)
+      if (heightKey) {
+        model.setTrackHeight(
+          heightKey,
+          Math.max(10, startHeight + delta / count),
+        )
       }
     },
-    [model, id, kind, ownHeight],
+    [model, heightKey, count],
   )
-  return setHeight ? (
+  return heightKey && siblings.at(-1)?.model.id === id ? (
     <DragHandle
       axis="y"
       variant="resizer"

package/src/components/SequenceTextArea.tsx

@@ -7,17 +7,17 @@ import { getUngappedSequence } from 'msa-parsers'
 import Checkbox2 from './Checkbox2.tsx'
 import CopyButton from './CopyButton.tsx'
 
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   textAreaFont: {
     fontFamily: 'Courier New',
     wordWrap: 'break-word',
   },
   dialogContent: {
-    background: 'lightgrey',
+    background: theme.palette.action.selected,
     margin: 4,
     minWidth: '80em',
   },
-})
+}))
 
 export default function SequenceTextArea({ str }: { str: [string, string][] }) {
   const { classes } = useStyles()

package/src/components/Track.tsx

@@ -1,22 +1,36 @@
 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 { IconButton, Menu, MenuItem } from '@mui/material'
 import { observer } from 'mobx-react'
 
 import { useWheelScroll } from '../useWheelScroll.ts'
+import TrackTooltipContent from './tracks/TrackTooltipContent.tsx'
+import { useTrackHover } from './tracks/useTrackHover.ts'
 
 import type { MsaViewModel } from '../model.ts'
 import type { BasicTrack } from '../types.ts'
 
 const TrackInfoDialog = lazy(() => import('./dialogs/TrackInfoDialog.tsx'))
 
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   button: {
     padding: 0,
   },
-})
+  // a hairline under every track but the last, across the labels as well as
+  // the alignment. The divider a track's resize handle draws covers only the
+  // alignment, and tracks sharing a height have no handle between them. Inset,
+  // so the line costs no layout height: totalTrackAreaHeight sums the model's
+  // heights, and the column indicator is drawn against that sum
+  row: {
+    display: 'flex',
+    '&:not(:last-child)': {
+      boxShadow: `inset 0 -1px 0 ${theme.palette.divider}`,
+    },
+  },
+}))
 
 const TrackLabel = observer(function TrackLabel({
   model,
@@ -37,21 +51,37 @@ const TrackLabel = observer(function TrackLabel({
   const trackLabelHeight = Math.min(height, fontSize)
 
   return (
+    // a flex row, not inline text: zooming in grows fontSize against a tree
+    // area the leaf labels sized, and a name that wrapped took its menu button
+    // onto a second line, under the next track's button
     <div
       style={{
         width,
         height,
         flexShrink: 0,
-        textAlign: 'right',
+        display: 'flex',
+        alignItems: 'flex-start',
+        justifyContent: 'flex-end',
+        gap: 2,
         fontSize: trackLabelHeight,
       }}
     >
-      {drawLabels ? name : ''}{' '}
+      <span
+        title={name}
+        style={{
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+        }}
+      >
+        {drawLabels ? name : ''}
+      </span>
       <IconButton
         className={classes.button}
         style={{
           width: trackLabelHeight,
           height: trackLabelHeight,
+          flexShrink: 0,
         }}
         onClick={event => {
           setAnchorEl(event.currentTarget)
@@ -102,7 +132,7 @@ const Track = observer(function ({
   model: MsaViewModel
   track: BasicTrack
 }) {
-  const { resizeHandleWidth, colWidth, scrollX, numColumns } = model
+  const { resizeHandleWidth, rowPanelsWidth, showColumnStats } = model
   const {
     model: { height },
   } = track
@@ -114,31 +144,38 @@ const Track = observer(function ({
     [model],
   )
   useWheelScroll({ ref, onScrollX })
+  const { classes } = useStyles()
+  const { hover, onMouseMove, onMouseLeave } = useTrackHover({
+    model,
+    tooltip: showColumnStats,
+  })
 
   return (
-    <div style={{ display: 'flex', height }}>
+    <div className={classes.row} style={{ height }}>
       <TrackLabel model={model} track={track} />
-      <div style={{ width: resizeHandleWidth, flexShrink: 0 }} />
+      {/* the row panels are row space, so a track leaves their column empty
+      and starts where the alignment canvas does */}
+      <div
+        style={{ width: rowPanelsWidth + resizeHandleWidth, flexShrink: 0 }}
+      />
       <div
         ref={ref}
+        data-testid={`track_${track.model.id}`}
         onMouseMove={event => {
-          if (!ref.current) {
-            return
-          }
-          const { left } = ref.current.getBoundingClientRect()
-          const mouseX = event.clientX - left - scrollX
-          const col = Math.floor(mouseX / colWidth)
-          if (col >= 0 && col < numColumns) {
-            model.setMousePos(col, undefined)
-          } else {
-            model.setMousePos(undefined, undefined)
+          if (ref.current) {
+            onMouseMove(event, ref.current)
           }
         }}
         onMouseLeave={() => {
-          model.setMousePos(undefined, undefined)
+          onMouseLeave()
         }}
       >
         <track.ReactComponent model={model} track={track} />
+        {hover ? (
+          <BaseTooltip clientPoint={{ x: hover.x, y: hover.y + 15 }}>
+            <TrackTooltipContent model={model} track={track} col={hover.col} />
+          </BaseTooltip>
+        ) : null}
       </div>
     </div>
   )

package/src/components/dialogs/ExportSVGDialog.tsx

@@ -49,15 +49,20 @@ export default function ExportSVGDialog({
     totalWidth,
     totalHeight,
     treeAreaWidth,
+    rowPanelsWidth,
     turnedOnTracks,
     totalTrackAreaHeight,
     numColumns,
     leaves,
     showMsaLetters,
+    treeOverviewHeight,
   } = model
   const hasTracks = turnedOnTracks.length > 0
-  const entireWidth = totalWidth + treeAreaWidth
-  const entireHeight = totalHeight + (includeTracks ? totalTrackAreaHeight : 0)
+  const entireWidth = totalWidth + treeAreaWidth + rowPanelsWidth
+  const entireHeight =
+    totalHeight +
+    (includeTracks ? totalTrackAreaHeight : 0) +
+    treeOverviewHeight
   // the background is one raster image whatever its size, so what the figure
   // actually costs is its residue letters: each is an svg element of its own.
   // Past roughly this many the export runs to tens of seconds and can exhaust

package/src/components/dialogs/TrackInfoDialog.tsx

@@ -13,7 +13,7 @@ const useStyles = makeStyles()(theme => ({
   textArea: {
     padding: theme.spacing(2),
     overflow: 'auto',
-    background: '#ddd',
+    background: theme.palette.action.selected,
     wordBreak: 'break-word',
   },
 }))

package/src/components/header/GappynessSlider.tsx

@@ -23,18 +23,13 @@ const GappynessSlider = observer(function GappynessSlider({
         Hide columns w/ ≥{allowedGappyness}% gaps
       </Typography>
       <Slider
-        // Named, because the class alone is not enough to find it from outside.
-        // An MSA is normally embedded beside other MUI Sliders (in JBrowse, the
-        // linear view's own zoom control), so a `.MuiSlider-thumb` selector in a
-        // test or a screenshot spec picks whichever comes first in the document
-        // and drives that instead — which reads as this slider ignoring its
-        // keyboard. Target `[data-testid="gappyness_slider"] input` to reach the
-        // hidden range input MUI renders in the thumb, which is the node that
-        // takes focus and receives arrow/PageUp/PageDown.
+        // In JBrowse other MUI Sliders share the page, so `.MuiSlider-thumb`
+        // can match the wrong one. Tests and screenshot specs target
+        // `[data-testid="gappyness_slider"] input`, the hidden range input that
+        // takes focus and arrow/PageUp/PageDown.
         //
-        // Deliberately NOT `slotProps={{ input: ... }}`: passing slotProps here
-        // widens the Slider's generic so `onChange`'s `val` infers as
-        // `number | number[]` and no longer assigns to setAllowedGappyness.
+        // Not `slotProps={{ input: ... }}`: that widens `onChange`'s `val` to
+        // `number | number[]`, which setAllowedGappyness rejects.
         data-testid="gappyness_slider"
         style={{ width: 100 }}
         min={1}

package/src/components/header/Header.tsx

@@ -27,6 +27,12 @@ const Header = observer(function ({ model }: { model: MsaViewModel }) {
   useEffect(() => {
     model.setHeaderHeight(height ?? 0)
   }, [model, height])
+  useEffect(
+    () => () => {
+      model.setHeaderHeight(0)
+    },
+    [model],
+  )
   return (
     <div ref={ref} style={{ display: 'flex' }}>
       <FileMenu model={model} />

package/src/components/header/LoadWarnings.tsx

@@ -20,10 +20,9 @@ const useStyles = makeStyles()(theme => ({
   },
 }))
 
-// An optional layer that failed -- a 404 on the annotations, a row-metadata
-// file that is not JSON -- used to go to `error`, which takes dataInitialized
-// down with it and replaces a perfectly good alignment with an error screen.
-// It says so here instead, and the reader dismisses it.
+// A failed optional layer, such as a 404 on the annotations or row metadata
+// that is not JSON, shows here as a dismissible warning. Setting `error` would
+// clear dataInitialized and hide the loaded alignment.
 const LoadWarnings = observer(function ({ model }: { model: MsaViewModel }) {
   const { warnings } = model
   const { classes } = useStyles()

package/src/components/header/ScrollZoomIcons.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+
+import SvgIcon from '@mui/material/SvgIcon'
+
+import type { SvgIconProps } from '@mui/material/SvgIcon'
+
+// Mouse glyphs with outward arrows on the axes a wheel zoom scales.
+// @mui/icons-material ships only the plain `Mouse`, and three variants that
+// differ only in their arrows have to share one body to stay apart at 24px.
+// The body's inner subpath runs the opposite sweep, which punches the hole the
+// wheel bar sits in.
+const BODY =
+  'M12 5a4 4 0 0 0-4 4v6a4 4 0 0 0 8 0V9a4 4 0 0 0-4-4zm0 2a2 2 0 0 1 2 2v6a2 2 0 0 1-4 0V9a2 2 0 0 1 2-2z'
+const WHEEL = 'M11.2 8.6h1.6v3.2h-1.6z'
+const LEFT = 'M.4 12 5 15V9z'
+const RIGHT = 'M23.6 12 19 9v6z'
+const UP = 'M12 .4 15 4H9z'
+const DOWN = 'M12 23.6 9 20h6z'
+
+function MouseZoom({
+  arrows,
+  ...rest
+}: SvgIconProps & { arrows: readonly string[] }) {
+  return (
+    <SvgIcon {...rest}>
+      <path d={BODY} />
+      <path d={WHEEL} />
+      {arrows.map(d => (
+        <path key={d} d={d} />
+      ))}
+    </SvgIcon>
+  )
+}
+
+// the bare body, for a wheel that scrolls. @mui/icons-material's own `Mouse` is
+// a solid silhouette, which would jump to a different drawing when the menu
+// changes the mode.
+export function MouseScroll(props: SvgIconProps) {
+  return <MouseZoom {...props} arrows={[]} />
+}
+
+export function MouseZoomBoth(props: SvgIconProps) {
+  return <MouseZoom {...props} arrows={[LEFT, RIGHT, UP, DOWN]} />
+}
+
+export function MouseZoomHorizontal(props: SvgIconProps) {
+  return <MouseZoom {...props} arrows={[LEFT, RIGHT]} />
+}
+
+export function MouseZoomVertical(props: SvgIconProps) {
+  return <MouseZoom {...props} arrows={[UP, DOWN]} />
+}

package/src/components/header/TreeSettingsMenu.tsx

@@ -32,9 +32,7 @@ const TreeSettingsMenu = observer(function ({
                 type: 'subMenu' as const,
                 subMenu: [
                   {
-                    // the cap shows in the label rather than arriving as an
-                    // error after the click, since the click is what would
-                    // freeze the tab
+                    // the label shows the cap before a click would freeze the tab
                     label: tooManyRows
                       ? `Calculate neighbor joining tree (over ${maxNeighborJoiningRows} rows, use FastTree)`
                       : 'Calculate neighbor joining tree (BLOSUM62)',

package/src/components/header/UnshareableDataWarning.tsx

@@ -26,10 +26,8 @@ function size(bytes: number) {
     : `${(bytes / 1_000_000).toFixed(1)} MB`
 }
 
-// The viewer holds documents its own snapshot does not carry, and until this
-// existed it said nothing about it: the view worked, the URL quietly lost the
-// data, and whoever copied the link found out from the person who opened it.
-// See `unshareableData` on the model.
+// Lists loaded documents the snapshot, and so a shared URL, omits. See
+// `unshareableData` on the model.
 const UnshareableDataWarning = observer(function ({
   model,
 }: {

package/src/components/header/ZoomControls.tsx

@@ -1,18 +1,67 @@
 import React from 'react'
 
-import Mouse from '@mui/icons-material/Mouse'
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
 import ZoomIn from '@mui/icons-material/ZoomIn'
 import ZoomOut from '@mui/icons-material/ZoomOut'
-import { IconButton, ToggleButton, Tooltip } from '@mui/material'
+import { IconButton, Tooltip } from '@mui/material'
 import { observer } from 'mobx-react'
 
+import {
+  MouseScroll,
+  MouseZoomBoth,
+  MouseZoomHorizontal,
+  MouseZoomVertical,
+} from './ScrollZoomIcons.tsx'
+
+import type { ScrollZoomAxis } from '../../constants.ts'
 import type { MsaViewModel } from '../../model.ts'
 
+interface WheelMode {
+  label: string
+  // undefined is the wheel scrolling the alignment, which is the default
+  axis?: ScrollZoomAxis
+  Icon: typeof MouseScroll
+  helpText?: string
+}
+
+const scrollMode: WheelMode = {
+  label: 'Scrolls the alignment',
+  Icon: MouseScroll,
+  helpText: 'Ctrl+wheel zooms both axes at the cursor.',
+}
+
+const wheelModes: WheelMode[] = [
+  scrollMode,
+  {
+    label: 'Zooms both axes',
+    axis: 'both',
+    Icon: MouseZoomBoth,
+    helpText: 'Hold shift to pan while the wheel zooms.',
+  },
+  {
+    label: 'Zooms columns only',
+    axis: 'horizontal',
+    Icon: MouseZoomHorizontal,
+    helpText:
+      'Holds the row height, so the labels and letters stay at their size while the alignment compresses.',
+  },
+  {
+    label: 'Zooms rows only',
+    axis: 'vertical',
+    Icon: MouseZoomVertical,
+    helpText:
+      'Holds the column width, so the alignment stays as wide while the rows grow or shrink.',
+  },
+]
+
 const ZoomControls = observer(function ZoomControls({
   model,
 }: {
   model: MsaViewModel
 }) {
+  const { scrollZoom, scrollZoomAxis } = model
+  const activeAxis = scrollZoom ? scrollZoomAxis : undefined
+  const current = wheelModes.find(m => m.axis === activeAxis) ?? scrollMode
   return (
     <>
       <Tooltip title="Zoom in">
@@ -35,19 +84,30 @@ const ZoomControls = observer(function ZoomControls({
           <ZoomOut />
         </IconButton>
       </Tooltip>
-      <ToggleButton
-        value="scrollZoom"
-        selected={model.scrollZoom}
-        aria-label="Toggle scroll-to-zoom"
-        title="Toggle scroll-to-zoom (zoom on plain mouse wheel; ctrl+wheel always zooms)"
-        size="small"
-        sx={{ border: 'none' }}
-        onChange={() => {
-          model.setScrollZoom(!model.scrollZoom)
-        }}
+      <CascadingMenuButton
+        data-testid="scroll_zoom_menu"
+        tooltip={`Mouse wheel: ${current.label.toLowerCase()} (ctrl+wheel always zooms)`}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+        menuItems={[
+          { type: 'subHeader', label: 'Mouse wheel' },
+          ...wheelModes.map(({ label, axis, Icon, helpText }) => ({
+            label,
+            icon: Icon,
+            helpText,
+            type: 'radio' as const,
+            checked: current.label === label,
+            onClick: () => {
+              model.setScrollZoom(axis !== undefined)
+              if (axis !== undefined) {
+                model.setScrollZoomAxis(axis)
+              }
+            },
+          })),
+        ]}
       >
-        <Mouse />
-      </ToggleButton>
+        <current.Icon />
+      </CascadingMenuButton>
     </>
   )
 })

package/src/components/header/getAnnotationsMenu.ts

@@ -32,12 +32,9 @@ export function getAnnotationsMenu({ model }: { model: MsaViewModel }) {
         ])
       },
     },
-    // The viewer used to submit the whole alignment to the EBI iprscan5 queue
-    // and poll it for about fifteen minutes, capped at 140 rows and under a
-    // hardcoded email address. `react-msaview-cli interpro` answers the same
-    // question from InterPro's precomputed matches in seconds, and
-    // `interproscan` covers rows InterPro has not seen. Neither belongs in a
-    // browser tab, so this points at the page that walks through them.
+    // `react-msaview-cli interpro` reads InterPro's precomputed matches in
+    // seconds, and `interproscan` covers rows InterPro has not seen; this links
+    // the tutorial for both
     {
       label: 'How to get a domain file...',
       icon: MenuBook,

package/src/components/header/settingsMenuItems.ts

@@ -12,9 +12,7 @@ function toggle(label: string, checked: boolean, set: (arg: boolean) => void) {
   }
 }
 
-// Every track the alignment can show, with its current state. Without this the
-// "Close" item on a track's own dropdown is a one-way door -- there is nowhere
-// else in the UI to turn a track back on.
+// the only place in the UI to turn a closed track back on
 function tracksSubMenu(model: MsaViewModel): MenuItem[] {
   const shown = new Set(model.turnedOnTracks.map(t => t.model.id))
   return model.tracks.map(({ model: { id, name } }) =>
@@ -33,14 +31,13 @@ export function msaSettingsMenuItems(model: MsaViewModel): MenuItem[] {
       subMenu: tracksSubMenu(model),
     },
     { type: 'divider' as const },
-    toggle('Show column statistics on hover', showColumnStats, arg => {
+    toggle('Show track values on hover', showColumnStats, arg => {
       model.setShowColumnStats(arg)
     }),
     toggle('Draw letters', drawMsaLetters, arg => {
       model.setDrawMsaLetters(arg)
     }),
-    // the checkbox reads as the inverse of the property it sets: bgColor draws
-    // the tile, and turning it off is what leaves the letter itself colored
+    // inverted: bgColor colors the tile, and off colors the letter
     toggle('Color letters instead of background of tiles', !bgColor, arg => {
       model.setBgColor(!arg)
     }),
@@ -56,7 +53,9 @@ export function treeSettingsMenuItems(model: MsaViewModel): MenuItem[] {
     showBranchLen,
     labelsAlignRight,
     drawNodeBubbles,
+    drawNodeLabels,
     drawLabels,
+    showTreeOverview,
   } = model
   return [
     toggle('Show branch length', showBranchLen, arg => {
@@ -68,6 +67,12 @@ export function treeSettingsMenuItems(model: MsaViewModel): MenuItem[] {
     toggle('Draw bubbles on tree branches', drawNodeBubbles, arg => {
       model.setDrawNodeBubbles(arg)
     }),
+    toggle('Draw internal node labels', drawNodeLabels, arg => {
+      model.setDrawNodeLabels(arg)
+    }),
+    toggle('Show tree overview', showTreeOverview, arg => {
+      model.setShowTreeOverview(arg)
+    }),
     toggle('Tree labels align right', labelsAlignRight, arg => {
       model.setLabelsAlignRight(arg)
     }),

package/src/components/import/ImportFormExamples.tsx

@@ -11,8 +11,8 @@ import type { MsaViewModel } from '../../model.ts'
 const BASE = 'https://jbrowse.org/genomes/multiple_sequence_alignments'
 const TREES = 'https://jbrowse.org/genomes/newick_trees'
 
-// each example either points at remote files (msa/tree/gff urls) or carries its
-// data inline, which is what the two bundled small ones do
+// each example points at remote files (msa/tree/gff urls) or carries its data
+// inline, as the two small bundled ones do
 interface Example {
   label: string
   msa?: string

package/src/components/import/util.ts

@@ -16,8 +16,7 @@ export function load(
   }
   if (gffFile) {
     model.setGFFFilehandle(gffFile)
-    // asked for by hand, so drawn -- even if the reader hid the overlay
-    // earlier in this view
+    // a file opened by hand shows even if the overlay was hidden earlier
     model.setShowDomains(true)
   }
 }

package/src/components/minimap/Minimap.tsx

@@ -15,8 +15,7 @@ const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
   const theme = useTheme()
   const { unit, s, w, polygonHeight, polygonPoints } = getMinimapLayout(model)
 
-  // the whole alignment, sampled down to the bar: it says where the conserved
-  // blocks and the gappy stretches are, which is what a scroll aims at
+  // the whole alignment, sampled down to the bar
   const barWidth = Math.round(msaCanvasWidth * highResScaleFactor)
   const barHeight = Math.round(MINIMAP_BAR_HEIGHT * highResScaleFactor)
   const ref = useCanvasAutorun({