react-msaview 6.5.0 → 8.0.0

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

@@ -2,30 +2,29 @@ import { lazy } from 'react'
 
 import FilterAlt from '@mui/icons-material/FilterAlt'
 import FolderOpen from '@mui/icons-material/FolderOpen'
-import Search from '@mui/icons-material/Search'
+import MenuBook from '@mui/icons-material/MenuBook'
 import Sort from '@mui/icons-material/Sort'
 import Visibility from '@mui/icons-material/Visibility'
 
 import type { MsaViewModel } from '../../model.ts'
 
 const FeatureFilterDialog = lazy(() => import('../dialogs/FeatureDialog.tsx'))
-const InterProScanFileDialog = lazy(
-  () => import('../dialogs/InterProScanFileDialog.tsx'),
-)
-const InterProScanDialog = lazy(
-  () => import('../dialogs/InterProScanDialog.tsx'),
+const AnnotationFileDialog = lazy(
+  () => import('../dialogs/AnnotationFileDialog.tsx'),
 )
 
+const domainsTutorial = 'https://gmod.org/JBrowseMSA/tutorials/protein_family'
+
 export function getAnnotationsMenu({ model }: { model: MsaViewModel }) {
   const { showDomains, actuallyShowDomains, subFeatureRows, noDomains } = model
   const noneLoaded = noDomains ? ' (none loaded)' : ''
   return [
     {
-      label: 'Open InterProScan results...',
+      label: 'Open annotation file...',
       icon: FolderOpen,
       onClick: () => {
         model.queueDialog(handleClose => [
-          InterProScanFileDialog,
+          AnnotationFileDialog,
           {
             handleClose,
             model,
@@ -33,17 +32,14 @@ export function getAnnotationsMenu({ model }: { model: MsaViewModel }) {
         ])
       },
     },
+    // `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: 'Query InterProScan...',
-      icon: Search,
+      label: 'How to get a domain file...',
+      icon: MenuBook,
       onClick: () => {
-        model.queueDialog(handleClose => [
-          InterProScanDialog,
-          {
-            handleClose,
-            model,
-          },
-        ])
+        window.open(domainsTutorial, '_blank', 'noopener,noreferrer')
       },
     },
     {

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

@@ -21,8 +21,8 @@ const ImportForm = observer(function ({ model }: { model: MsaViewModel }) {
       <div style={{ width: '50%' }}>
         {error ? <ErrorMessage error={error} /> : null}
         <Typography>
-          Open an MSA file (stockholm or clustal format) and/or a tree file
-          (newick format).
+          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

package/src/components/import/ImportFormExamples.tsx

@@ -9,10 +9,10 @@ import { load } from './util.ts'
 import type { MsaViewModel } from '../../model.ts'
 
 const BASE = 'https://jbrowse.org/genomes/multiple_sequence_alignments'
-const TREES = 'https://jbrowse.org/genomes/newicktrees'
+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
@@ -35,11 +35,7 @@ const examples: Example[] = [
     inline: { msa: smallMSAOnly },
   },
   {
-    label: 'PFAM SARS-CoV2 multi-stockholm',
-    msa: `${BASE}/pfam-cov2.stock`,
-  },
-  {
-    label: 'PFAM SARS-CoV2 multi-stockholm w/ domains loaded',
+    label: 'PFAM SARS-CoV2 multi-stockholm with domains',
     msa: `${BASE}/pfam-cov2.stock`,
     gff: `${BASE}/pfam-cov2-domains.gff`,
   },

package/src/components/import/util.ts

@@ -16,5 +16,7 @@ export function load(
   }
   if (gffFile) {
     model.setGFFFilehandle(gffFile)
+    // 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({

package/src/components/msa/AnnotationLegend.tsx

@@ -5,6 +5,9 @@ import ExpandMore from '@mui/icons-material/ExpandMore'
 import { IconButton, Paper, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 
+import { legendZIndex } from '../../constants.ts'
+import { legendRows } from './legendRows.ts'
+
 import type { MsaViewModel } from '../../model.ts'
 
 const AnnotationLegend = observer(function ({
@@ -12,65 +15,72 @@ const AnnotationLegend = observer(function ({
 }: {
   model: MsaViewModel
 }) {
-  const {
-    actuallyShowDomains,
-    visibleDomainTypes: visible,
-    fillPalette,
-    showDomainLegend: expanded,
-  } = model
+  const { legends, showDomainLegend: expanded } = model
+  const rows = legendRows(legends)
   const ExpandIcon = expanded ? ExpandLess : ExpandMore
 
-  return actuallyShowDomains && visible.length > 0 ? (
+  return rows.length > 0 ? (
     <Paper
       elevation={3}
       style={{
         position: 'absolute',
         top: 4,
         right: 4,
-        zIndex: 100,
-        maxWidth: 260,
+        zIndex: legendZIndex,
+        maxWidth: 220,
         maxHeight: '60%',
         display: 'flex',
         flexDirection: 'column',
         opacity: 0.95,
       }}
     >
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'flex-end',
-          padding: '2px 4px 2px 8px',
+      <IconButton
+        size="small"
+        title={expanded ? 'Collapse key' : 'Expand key'}
+        style={
+          expanded
+            ? { position: 'absolute', top: 0, right: 0, padding: 1 }
+            : { padding: 1 }
+        }
+        onClick={() => {
+          model.setShowDomainLegend(!expanded)
         }}
       >
-        <IconButton
-          size="small"
-          title={expanded ? 'Collapse key' : 'Expand key'}
-          onClick={() => {
-            model.setShowDomainLegend(!expanded)
-          }}
-        >
-          <ExpandIcon fontSize="small" />
-        </IconButton>
-      </div>
+        <ExpandIcon style={{ fontSize: 14 }} />
+      </IconButton>
       {expanded ? (
-        <div style={{ overflow: 'auto', padding: '0 8px 6px' }}>
-          {visible.map(({ accession, name }) => (
+        <div style={{ overflow: 'auto', padding: '2px 6px 4px' }}>
+          {rows.map((row, i) => (
             <div
-              key={accession}
-              style={{ display: 'flex', alignItems: 'center', gap: 6 }}
-              title={accession}
+              key={row.key}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 4,
+                marginRight: i === 0 ? 18 : 0,
+              }}
+              title={row.hint}
             >
-              <div
+              {row.color ? (
+                <div
+                  style={{
+                    width: 9,
+                    height: 9,
+                    flexShrink: 0,
+                    background: row.color,
+                  }}
+                />
+              ) : null}
+              <Typography
+                variant="caption"
+                noWrap
                 style={{
-                  width: 12,
-                  height: 12,
-                  flexShrink: 0,
-                  background: fillPalette[accession],
+                  fontSize: 10,
+                  lineHeight: 1.4,
+                  fontWeight: row.color ? undefined : 'bold',
                 }}
-              />
-              <Typography variant="caption" noWrap>
-                {name}
+              >
+                {row.label}
               </Typography>
             </div>
           ))}

package/src/components/msa/MSACanvas.tsx

@@ -34,7 +34,7 @@ const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
   )
   const onZoom = useCallback(
     (scaleFactor: number, offsetX: number, offsetY: number) => {
-      model.zoomToPos(scaleFactor, offsetX, offsetY)
+      model.zoomToPos(scaleFactor, offsetX, offsetY, model.wheelZoomAxis)
     },
     [model],
   )
@@ -49,10 +49,8 @@ const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
   return (
     <div
       ref={ref}
-      // the MSA viewport: its rect is the origin every column/row offset is
-      // measured from (col*colWidth + scrollX, row*rowHeight + scrollY), which
-      // is what lets a screenshot callout anchor to an alignment column instead
-      // of a hand-measured pixel
+      // screenshot callouts anchor to columns from this rect's origin:
+      // col*colWidth + scrollX, row*rowHeight + scrollY
       data-testid="msa_canvas"
       onMouseDown={onMouseDown}
       onMouseUp={onMouseUp}

package/src/components/msa/MSACanvasBlock.tsx

@@ -1,11 +1,10 @@
 import React from 'react'
 
 import BaseTooltip from '@jbrowse/core/ui/BaseTooltip'
+import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
 
 import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
-import { useColorContrast } from '../../useColorContrast.ts'
-import ColumnStats from './ColumnStats.tsx'
 import { drawMsaRaster, rasterSupported } from './msaRaster.ts'
 import { renderBoxFeatureCanvasBlock } from './renderBoxFeatureCanvasBlock.ts'
 import { renderMSABlock } from './renderMSABlock.ts'
@@ -22,8 +21,8 @@ const MSACanvasBlock = observer(function ({
   offsetX: number
   offsetY: number
 }) {
-  const { colorScheme, blockSize, highResScaleFactor } = model
-  const { theme, contrastScheme } = useColorContrast(colorScheme)
+  const { blockSize, highResScaleFactor } = model
+  const theme = useTheme()
   const { tooltipPoint, onMouseMove, onClick, onMouseLeave } = useMsaBlockMouse(
     {
       model,
@@ -39,6 +38,7 @@ const MSACanvasBlock = observer(function ({
       ctx.clearRect(0, 0, canvasSize, canvasSize)
       renderBoxFeatureCanvasBlock({
         ctx,
+        theme,
         offsetX,
         offsetY,
         model,
@@ -56,17 +56,16 @@ const MSACanvasBlock = observer(function ({
         theme,
         offsetX,
         offsetY,
-        contrastScheme,
         model,
         rasterTiles,
       })
     },
     width: canvasSize,
     height: canvasSize,
-    deps: [model, offsetX, offsetY, theme, contrastScheme],
+    deps: [model, offsetX, offsetY, theme],
   })
 
-  const { hoveredInsertion, mouseOverDomains, showColumnStats } = model
+  const { hoveredInsertion, mouseOverDomains } = model
 
   return (
     <>
@@ -108,20 +107,17 @@ const MSACanvasBlock = observer(function ({
                 : hoveredInsertion.letters}
             </>
           ) : (
-            <>
-              {mouseOverDomains.map(d => (
-                <div key={`${d.accession}-${d.start}-${d.end}`}>
-                  <b>{d.name}</b> ({d.accession}) {d.start}-{d.end}
-                  {d.description ? (
-                    <>
-                      <br />
-                      {d.description}
-                    </>
-                  ) : null}
-                </div>
-              ))}
-              {showColumnStats ? <ColumnStats model={model} /> : null}
-            </>
+            mouseOverDomains.map(d => (
+              <div key={`${d.accession}-${d.start}-${d.end}`}>
+                <b>{d.name}</b> ({d.accession}) {d.start}-{d.end}
+                {d.description ? (
+                  <>
+                    <br />
+                    {d.description}
+                  </>
+                ) : null}
+              </div>
+            ))
           )}
         </BaseTooltip>
       ) : null}

package/src/components/msa/MSAMouseoverCanvas.tsx

@@ -4,6 +4,7 @@ import { isAlive } from '@jbrowse/mobx-state-tree'
 import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
 
+import { msaOverlayZIndex } from '../../constants.ts'
 import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
 import { renderMouseover } from './renderMSAMouseover.ts'
 
@@ -41,7 +42,7 @@ const MSAMouseoverCanvas = observer(function ({
         left: 0,
         width,
         height,
-        zIndex: 1000,
+        zIndex: msaOverlayZIndex,
         pointerEvents: 'none',
       }}
     />

package/src/components/msa/domainBandCursor.ts

@@ -1,19 +1,15 @@
 import type { DomainBand } from '../../types.ts'
 
 /**
- * Left-to-right cursor over one row's domain bands, answering "which band is
- * drawn on top at this column" — the fill a letter there has to contrast
- * against.
+ * Left-to-right cursor over one row's domain bands that returns the band drawn
+ * on top at a column, for a letter's contrast color.
  *
- * Not simply the first band covering the column. The overlay paints in
- * `domainBands` order, largest first, so where signatures nest — a family
- * enclosing a domain, which InterProScan emits routinely — the box a reader
- * actually sees is the last one painted over that column. `stackIndex` is that
- * paint order.
+ * The overlay paints in `domainBands` order, largest first, so where signatures
+ * nest (InterProScan often emits a family enclosing a domain) the visible band
+ * is the last one painted. `stackIndex` is that paint order.
  *
- * `bands` must be sorted by start column (`domainBandsByStart`), and columns
- * must be visited in increasing order, which is what the block renderer does.
- * Both keep this to one pass over the bands per row rather than a scan per cell.
+ * `bands` must be sorted by start column (`domainBandsByStart`) and columns
+ * visited in increasing order, which keeps this to one pass per row.
  */
 export function domainBandCursor(bands: DomainBand[] | undefined) {
   let next = 0