react-msaview 7.0.0 → 8.1.0

package/src/components/dialogs/AboutDialog.tsx

@@ -17,16 +17,33 @@ export default function AboutDialog({ onClose }: { onClose: () => void }) {
       <DialogContent>
         <Typography>
           MSAView {version} (
-          <Link href="https://github.com/gmod/react-msaview">Github</Link>)
+          <Link
+            target="_blank"
+            rel="noopener"
+            href="https://github.com/gmod/react-msaview"
+          >
+            Github
+          </Link>
+          )
         </Typography>
 
         <ul>
           <li>
             <Typography>
               We use some color schemes from the{' '}
-              <Link href="https://github.com/biotite-dev/biotite">biotite</Link>{' '}
+              <Link
+                target="_blank"
+                rel="noopener"
+                href="https://github.com/biotite-dev/biotite"
+              >
+                biotite
+              </Link>{' '}
               project, and their license is reproduced{' '}
-              <Link href="https://github.com/biotite-dev/biotite/blob/master/LICENSE.rst">
+              <Link
+                target="_blank"
+                rel="noopener"
+                href="https://github.com/biotite-dev/biotite/blob/master/LICENSE.rst"
+              >
                 here
               </Link>
             </Typography>
@@ -34,7 +51,11 @@ export default function AboutDialog({ onClose }: { onClose: () => void }) {
           <li>
             <Typography>
               See this page for some information on jalview colorings{' '}
-              <Link href="https://www.jalview.org/help/html/colourSchemes/">
+              <Link
+                target="_blank"
+                rel="noopener"
+                href="https://www.jalview.org/help/html/colourSchemes/"
+              >
                 here
               </Link>
             </Typography>
@@ -43,7 +64,11 @@ export default function AboutDialog({ onClose }: { onClose: () => void }) {
             <Typography>
               See this page for some info on the clustal, cinema, maeditor, and
               lesk color schemes{' '}
-              <Link href="http://www.bioinformatics.nl/~berndb/aacolour.html">
+              <Link
+                target="_blank"
+                rel="noopener"
+                href="http://www.bioinformatics.nl/~berndb/aacolour.html"
+              >
                 here
               </Link>
             </Typography>
@@ -51,7 +76,11 @@ export default function AboutDialog({ onClose }: { onClose: () => void }) {
           <li>
             <Typography>
               See this paper about the flower color scheme{' '}
-              <Link href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC7245768/">
+              <Link
+                target="_blank"
+                rel="noopener"
+                href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC7245768/"
+              >
                 here
               </Link>
             </Typography>

package/src/components/dialogs/AnnotationFileDialog.tsx

@@ -126,7 +126,7 @@ const AnnotationFileDialog = observer(function ({
         <Button
           variant="contained"
           color="primary"
-          disabled={loading}
+          disabled={loading || (choice === 'file' ? !file : !url.trim())}
           onClick={() => {
             // eslint-disable-next-line @typescript-eslint/no-floating-promises
             ;(async () => {
@@ -154,6 +154,15 @@ const AnnotationFileDialog = observer(function ({
         >
           Open annotations
         </Button>
+        <Button
+          variant="contained"
+          color="secondary"
+          onClick={() => {
+            handleClose()
+          }}
+        >
+          Cancel
+        </Button>
       </DialogActions>
     </Dialog>
   )

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
@@ -162,7 +167,7 @@ export default function ExportSVGDialog({
             })
           }}
         >
-          {exporting ? 'Exporting…' : 'Submit'}
+          {exporting ? 'Exporting…' : 'Export'}
         </Button>
         <Button
           variant="contained"

package/src/components/dialogs/FeatureDialog.tsx

@@ -47,10 +47,18 @@ const Toggles = observer(function ({ model }: { model: MsaViewModel }) {
 })
 
 const FeatureTable = observer(function ({ model }: { model: MsaViewModel }) {
-  const { annotationTypes, annotations, fillPalette } = model
+  const { annotationTypes, annotations, featureColors, fillPalette } = model
   const counts = new Map<string, number>()
+  const swatches = new Map<string, string>()
   for (const annot of annotations) {
-    counts.set(annot.accession, (counts.get(annot.accession) ?? 0) + 1)
+    const { accession } = annot
+    counts.set(accession, (counts.get(accession) ?? 0) + 1)
+    if (!swatches.has(accession)) {
+      swatches.set(
+        accession,
+        featureColors.get(annot)?.fill ?? fillPalette[accession]!,
+      )
+    }
   }
   return (
     <>
@@ -86,7 +94,7 @@ const FeatureTable = observer(function ({ model }: { model: MsaViewModel }) {
                     style={{
                       width: 20,
                       height: 20,
-                      background: fillPalette[accession],
+                      background: swatches.get(accession),
                     }}
                   />
                 </TableCell>

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,8 +27,14 @@ 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' }}>
+    <div ref={ref} style={{ display: 'flex', flexWrap: 'wrap' }}>
       <FileMenu model={model} />
       <ColorSchemeMenu model={model} />
       <TreeSettingsMenu model={model} />

package/src/components/header/LoadWarnings.tsx

@@ -1,47 +1,33 @@
 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 { Button, Tooltip } 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',
-  },
-}))
-
-// 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()
   if (warnings.length === 0) {
     return null
   }
   return (
     <Tooltip title={`${warnings.join(' ')} (click to dismiss)`}>
-      <Typography
-        component="div"
-        className={classes.warning}
+      <Button
+        aria-label="Dismiss warnings"
+        color="warning"
+        size="small"
+        startIcon={<Warning fontSize="small" />}
+        style={{ margin: 'auto', marginLeft: 10, whiteSpace: 'nowrap' }}
         onClick={() => {
           model.clearWarnings()
         }}
       >
-        <Warning fontSize="small" />
         {warnings.length > 1 ? `${warnings.length} warnings` : 'Warning'}
-      </Typography>
+      </Button>
     </Tooltip>
   )
 })

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 hidden 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,18 +31,17 @@ 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
-    toggle('Color letters instead of background of tiles', !bgColor, arg => {
+    // inverted: bgColor colors the tile, and off colors the letter
+    toggle('Color letters, not cells', !bgColor, arg => {
       model.setBgColor(!arg)
     }),
-    toggle('Enable hiding gappy columns?', hideGaps, arg => {
+    toggle('Hide gappy columns', hideGaps, arg => {
       model.setHideGaps(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/ImportForm.tsx

@@ -24,11 +24,9 @@ const ImportForm = observer(function ({ model }: { model: MsaViewModel }) {
           Open an MSA file (FASTA, Stockholm, Clustal, A3M or EMF format) and/or
           a tree file (Newick format).
         </Typography>
-        <Typography color="error">
-          Note: you can open up just an MSA or just a tree, both are not
-          required. Some MSA files e.g. stockholm format have an embedded tree
-          also and this is fine, and opening a separate tree file is not
-          required.
+        <Typography color="text.secondary">
+          An MSA alone or a tree alone is enough, and a Stockholm file with an
+          embedded tree needs no separate tree file.
         </Typography>
       </div>
 

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({