react-msaview 6.5.0 → 8.0.0

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

@@ -0,0 +1,162 @@
+import React, { useState } from 'react'
+
+import { Dialog, ErrorMessage } from '@jbrowse/core/ui'
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  FormControl,
+  FormControlLabel,
+  Radio,
+  RadioGroup,
+  TextField,
+  Typography,
+} from '@mui/material'
+import { observer } from 'mobx-react'
+import {
+  annotationsToGFF,
+  interProScanResponseToAnnotations,
+} from 'msa-parsers'
+
+import type { MsaViewModel } from '../../model.ts'
+import type { InterProScanResponse } from 'msa-parsers'
+
+// GFF3 as the CLI writes it, or the JSON an InterProScan run returns. Both
+// arrive as text and the model keeps GFF, so the JSON is converted on the way
+// in rather than given a second path through the model
+function toGFF(text: string) {
+  const trimmed = text.trimStart()
+  if (!trimmed.startsWith('{')) {
+    return text
+  }
+  const response: InterProScanResponse = JSON.parse(trimmed)
+  return annotationsToGFF(interProScanResponseToAnnotations(response))
+}
+
+async function fetchText(url: string) {
+  const response = await fetch(url)
+  if (!response.ok) {
+    throw new Error(
+      `HTTP ${response.status} fetching ${url} ${await response.text()}`,
+    )
+  }
+  return response.text()
+}
+
+const AnnotationFileDialog = observer(function ({
+  handleClose,
+  model,
+}: {
+  handleClose: () => void
+  model: MsaViewModel
+}) {
+  const [file, setFile] = useState<File>()
+  const [choice, setChoice] = useState('file')
+  const [url, setUrl] = useState('')
+  const [error, setError] = useState<unknown>()
+  const [loading, setLoading] = useState(false)
+
+  // the error is shown here rather than notified: the standalone app and the
+  // MSAViewer component have no jbrowse session to notify, and asking one for
+  // its notify() threw out of the success path into the catch, which threw
+  // again on the same missing session
+  return (
+    <Dialog
+      maxWidth="xl"
+      title="Open annotation file"
+      onClose={() => {
+        handleClose()
+      }}
+      open
+    >
+      <DialogContent>
+        {error ? <ErrorMessage error={error} /> : null}
+        <Typography>
+          Open a GFF3 file of annotations, such as the one `react-msaview-cli
+          interpro` writes, or the JSON an InterProScan run returns.
+        </Typography>
+
+        <div style={{ display: 'flex', margin: 30 }}>
+          <FormControl component="fieldset">
+            <RadioGroup
+              value={choice}
+              onChange={event => {
+                setChoice(event.target.value)
+              }}
+            >
+              <FormControlLabel value="url" control={<Radio />} label="URL" />
+              <FormControlLabel value="file" control={<Radio />} label="File" />
+            </RadioGroup>
+          </FormControl>
+          {choice === 'url' ? (
+            <div>
+              <Typography>Open an annotation file from a URL</Typography>
+              <TextField
+                label="URL"
+                value={url}
+                onChange={event => {
+                  setUrl(event.target.value)
+                }}
+              />
+            </div>
+          ) : (
+            <div style={{ paddingTop: 20 }}>
+              <Typography>
+                Open an annotation file from your local drive
+              </Typography>
+              <Button variant="outlined" component="label">
+                Choose File
+                <input
+                  type="file"
+                  hidden
+                  onChange={({ target }) => {
+                    const chosen = target.files?.[0]
+                    if (chosen) {
+                      setFile(chosen)
+                    }
+                  }}
+                />
+              </Button>
+              {file ? <Typography>{file.name}</Typography> : null}
+            </div>
+          )}
+        </div>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          variant="contained"
+          color="primary"
+          disabled={loading}
+          onClick={() => {
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            ;(async () => {
+              setLoading(true)
+              setError(undefined)
+              try {
+                const text = await (choice === 'file' && file
+                  ? file.text()
+                  : fetchText(url))
+                // through the model's own GFF text, so the annotations travel
+                // in the snapshot and the shared URL like every other layer.
+                // Setting them straight onto the volatile left a view whose
+                // link opened without them
+                model.setGFF(toGFF(text))
+                model.setShowDomains(true)
+                handleClose()
+              } catch (e) {
+                console.error(e)
+                setError(e)
+              } finally {
+                setLoading(false)
+              }
+            })()
+          }}
+        >
+          Open annotations
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+})
+
+export default AnnotationFileDialog

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

@@ -16,14 +16,20 @@ import { observer } from 'mobx-react'
 import type { MsaViewModel } from '../../model.ts'
 
 const Toggles = observer(function ({ model }: { model: MsaViewModel }) {
-  const { featureFilters } = model
+  // 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
+  const setAll = (shown: boolean) => {
+    for (const accession of annotationTypes.keys()) {
+      model.setFilter(accession, shown)
+    }
+  }
   return (
     <div>
       <Button
         onClick={() => {
-          for (const key of featureFilters.keys()) {
-            model.setFilter(key, true)
-          }
+          setAll(true)
         }}
       >
         Toggle all on
@@ -31,9 +37,7 @@ const Toggles = observer(function ({ model }: { model: MsaViewModel }) {
 
       <Button
         onClick={() => {
-          for (const key of featureFilters.keys()) {
-            model.setFilter(key, false)
-          }
+          setAll(false)
         }}
       >
         Toggle all off
@@ -68,11 +72,11 @@ const FeatureTable = observer(function ({ model }: { model: MsaViewModel }) {
               <TableRow key={accession}>
                 <TableCell padding="checkbox">
                   <Checkbox
-                    checked={model.featureFilters.get(accession) ?? false}
+                    checked={!model.turnedOffFeatures.get(accession)}
                     onChange={() => {
                       model.setFilter(
                         accession,
-                        !model.featureFilters.get(accession),
+                        !!model.turnedOffFeatures.get(accession),
                       )
                     }}
                   />

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

@@ -10,9 +10,11 @@ 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 TreeSettingsMenu from './TreeSettingsMenu.tsx'
+import UnshareableDataWarning from './UnshareableDataWarning.tsx'
 import ZoomControls from './ZoomControls.tsx'
 import ZoomMenu from './ZoomMenu.tsx'
 
@@ -25,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} />
@@ -39,6 +47,8 @@ const Header = observer(function ({ model }: { model: MsaViewModel }) {
       </div>
       <HeaderInfoArea model={model} />
       <Spacer />
+      <LoadWarnings model={model} />
+      <UnshareableDataWarning model={model} />
       <HeaderStatusArea model={model} />
       <Tooltip title="About">
         <IconButton

package/src/components/header/HeaderStatusArea.tsx

@@ -20,11 +20,6 @@ const HeaderStatusArea = observer(({ model }: { model: MsaViewModel }) => {
   return status ? (
     <Typography className={classes.margin}>
       <LoadingEllipses message={status.msg} component="span" />{' '}
-      {status.url ? (
-        <a href={status.url} target="_blank" rel="noreferrer">
-          (status)
-        </a>
-      ) : null}{' '}
       {status.onCancel ? (
         <Button size="small" onClick={() => status.onCancel?.()}>
           Cancel

package/src/components/header/LoadWarnings.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+
+import { makeStyles } from '@jbrowse/core/util/tss-react'
+import Warning from '@mui/icons-material/Warning'
+import { Tooltip, Typography } from '@mui/material'
+import { observer } from 'mobx-react'
+
+import type { MsaViewModel } from '../../model.ts'
+
+const useStyles = makeStyles()(theme => ({
+  warning: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 4,
+    margin: 'auto',
+    marginLeft: 10,
+    whiteSpace: 'nowrap',
+    color: theme.palette.warning.main,
+    cursor: 'pointer',
+  },
+}))
+
+// 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()
+  if (warnings.length === 0) {
+    return null
+  }
+  return (
+    <Tooltip title={`${warnings.join(' ')} (click to dismiss)`}>
+      <Typography
+        component="div"
+        className={classes.warning}
+        onClick={() => {
+          model.clearWarnings()
+        }}
+      >
+        <Warning fontSize="small" />
+        {warnings.length > 1 ? `${warnings.length} warnings` : 'Warning'}
+      </Typography>
+    </Tooltip>
+  )
+})
+
+export default LoadWarnings

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

@@ -4,6 +4,7 @@ import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
 import AccountTree from '@mui/icons-material/AccountTree'
 import { observer } from 'mobx-react'
 
+import { maxNeighborJoiningRows } from '../../constants.ts'
 import { treeSettingsMenuItems } from './settingsMenuItems.ts'
 
 import type { MsaViewModel } from '../../model.ts'
@@ -14,6 +15,7 @@ const TreeSettingsMenu = observer(function ({
   model: MsaViewModel
 }) {
   const { rows } = model
+  const tooManyRows = rows.length > maxNeighborJoiningRows
   return (
     <CascadingMenuButton
       data-testid="tree_settings_menu"
@@ -30,7 +32,11 @@ const TreeSettingsMenu = observer(function ({
                 type: 'subMenu' as const,
                 subMenu: [
                   {
-                    label: 'Calculate neighbor joining tree (BLOSUM62)',
+                    // 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)',
+                    disabled: tooManyRows,
                     onClick: () => {
                       try {
                         model.calculateNeighborJoiningTreeFromMSA()

package/src/components/header/UnshareableDataWarning.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+
+import { makeStyles } from '@jbrowse/core/util/tss-react'
+import LinkOff from '@mui/icons-material/LinkOff'
+import { Tooltip, Typography } from '@mui/material'
+import { observer } from 'mobx-react'
+
+import type { MsaViewModel } from '../../model.ts'
+
+const useStyles = makeStyles()(theme => ({
+  warning: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 4,
+    margin: 'auto',
+    marginLeft: 10,
+    whiteSpace: 'nowrap',
+    color: theme.palette.warning.main,
+    cursor: 'help',
+  },
+}))
+
+function size(bytes: number) {
+  return bytes < 1_000_000
+    ? `${Math.round(bytes / 1000)} kB`
+    : `${(bytes / 1_000_000).toFixed(1)} MB`
+}
+
+// Lists loaded documents the snapshot, and so a shared URL, omits. See
+// `unshareableData` on the model.
+const UnshareableDataWarning = observer(function ({
+  model,
+}: {
+  model: MsaViewModel
+}) {
+  const { unshareableData } = model
+  const { classes } = useStyles()
+  if (unshareableData.length === 0) {
+    return null
+  }
+  const what = unshareableData
+    .map(({ what, bytes }) => `${what} (${size(bytes)})`)
+    .join(' and the ')
+  return (
+    <Tooltip
+      title={`The ${what} came from this computer and is too large to travel in a URL, so a link to this page opens without it. Serve the file over HTTP and open it by URL to share the view.`}
+    >
+      <Typography component="div" className={classes.warning}>
+        <LinkOff fontSize="small" />
+        Not in the link
+      </Typography>
+    </Tooltip>
+  )
+})
+
+export default UnshareableDataWarning