react-msaview 9.1.0 → 9.2.0

package/src/components/header/menuBarItems.ts

@@ -0,0 +1,357 @@
+import { lazy } from 'react'
+
+import { maxNeighborJoiningRows, treeOrders } from '../../constants.ts'
+import { canGoTo } from '../dialogs/GoToBox.tsx'
+import { scrollZoomLabel } from './ScrollZoomCheckbox.tsx'
+import { colorSchemeMenuItems } from './colorSchemeMenuItems.ts'
+import { openAnnotationFileItem } from './getAnnotationsMenu.ts'
+
+import type { MsaViewModel } from '../../model.ts'
+import type { TreeOrder } from '../../types.ts'
+import type { ChoiceDisplay } from '../settings/MenuItemsForm.tsx'
+import type { MenuItem } from '@jbrowse/core/ui/Menu'
+
+const AboutDialog = lazy(() => import('../dialogs/AboutDialog.tsx'))
+const ExportSVGDialog = lazy(() => import('../dialogs/ExportSVGDialog.tsx'))
+const GapThresholdDialog = lazy(
+  () => import('../dialogs/GapThresholdDialog.tsx'),
+)
+const GoToDialog = lazy(() => import('../dialogs/GoToDialog.tsx'))
+const HelpDialog = lazy(() => import('../dialogs/HelpDialog.tsx'))
+const MetadataDialog = lazy(() => import('../dialogs/MetadataDialog.tsx'))
+
+const tutorialsUrl = 'https://gmod.org/JBrowseMSA/tutorials/'
+
+function radio(label: string, checked: boolean, onClick: () => void) {
+  return { label, type: 'radio' as const, checked, onClick }
+}
+
+function toggle(label: string, checked: boolean, set: (arg: boolean) => void) {
+  return {
+    label,
+    type: 'checkbox' as const,
+    checked,
+    onClick: () => {
+      set(!checked)
+    },
+  }
+}
+
+function action(label: string, onClick: () => void, disabled = false) {
+  return { label, onClick, disabled }
+}
+
+function subMenu(label: string, items: MenuItem[], display?: ChoiceDisplay) {
+  return { label, type: 'subMenu' as const, subMenu: items, display }
+}
+
+function when<T>(cond: boolean, items: T[]) {
+  return cond ? items : []
+}
+
+export function fileMenuItems(model: MsaViewModel): MenuItem[] {
+  return [
+    ...when(!!model.importForm, [
+      action('Open alignment…', () => {
+        model.reset()
+      }),
+    ]),
+    openAnnotationFileItem(model),
+    action('Export as SVG…', () => {
+      model.queueDialog(onClose => [ExportSVGDialog, { onClose, model }])
+    }),
+    ...when(!model.tree.noTree, [
+      action('Export tree as Newick', () => {
+        model.exportNewick()
+      }),
+    ]),
+    action('Alignment info…', () => {
+      model.queueDialog(onClose => [MetadataDialog, { model, onClose }])
+    }),
+  ]
+}
+
+function zoomSubMenu(model: MsaViewModel): MenuItem[] {
+  return [
+    action('Zoom in', () => {
+      model.zoomIn()
+    }),
+    action('Zoom out', () => {
+      model.zoomOut()
+    }),
+    action('Fit to window', () => {
+      model.fit()
+    }),
+    action('Fit width', () => {
+      model.fitHorizontally()
+    }),
+    action('Fit height', () => {
+      model.fitVertically()
+    }),
+    action('Reset zoom', () => {
+      model.resetZoom()
+    }),
+    toggle(scrollZoomLabel, model.scrollZoom, arg => {
+      model.setScrollZoom(arg)
+    }),
+  ]
+}
+
+const gapPresets = [100, 90, 50]
+
+export function gapsSubMenu(model: MsaViewModel): MenuItem[] {
+  const { hideGaps, allowedGappyness } = model
+  const custom = hideGaps && !gapPresets.includes(allowedGappyness)
+  return [
+    subMenu(
+      'Gappy columns',
+      [
+        radio('Show all columns', !hideGaps, () => {
+          model.setHideGaps(false)
+        }),
+        ...gapPresets.map(pct =>
+          radio(
+            pct === 100 ? 'Hide columns of only gaps' : `Hide ≥${pct}% gaps`,
+            hideGaps && allowedGappyness === pct,
+            () => {
+              model.setHideGaps(true)
+              model.setAllowedGappyness(pct)
+            },
+          ),
+        ),
+        {
+          ...radio(
+            custom ? `Hide ≥${allowedGappyness}% gaps…` : 'Custom threshold…',
+            custom,
+            () => {
+              model.setHideGaps(true)
+              model.queueDialog(onClose => [
+                GapThresholdDialog,
+                { model, onClose },
+              ])
+            },
+          ),
+          keepMenuOpen: false,
+        },
+      ],
+      'select',
+    ),
+  ]
+}
+
+const treeOrderLabels: Record<TreeOrder, string> = {
+  branchLength: 'By branch length',
+  input: 'Input order',
+  ladderize: 'Ladderize, small clades first',
+  ladderizeReverse: 'Ladderize, large clades first',
+}
+
+function outgroupLabel(outgroup: string[]) {
+  const [first, ...rest] = outgroup
+  return rest.length === 0
+    ? `Outgroup ${first}`
+    : `Outgroup ${first} … ${rest.at(-1)}`
+}
+
+export function treeSubMenu(model: MsaViewModel): MenuItem[] {
+  const {
+    drawTree,
+    showBranchLen,
+    labelsAlignRight,
+    drawNodeLabels,
+    drawLabels,
+    treeAreaWidth,
+    showTreeOverview,
+    showTreeScaleBar,
+    treeOrder,
+    treeRoot,
+    rotated,
+  } = model
+  return [
+    subMenu(
+      'Layout',
+      [
+        radio('Phylogram', drawTree && showBranchLen, () => {
+          model.setDrawTree(true)
+          model.setShowBranchLen(true)
+        }),
+        radio('Cladogram', drawTree && !showBranchLen, () => {
+          model.setDrawTree(true)
+          model.setShowBranchLen(false)
+        }),
+        radio('Labels only', !drawTree, () => {
+          model.setDrawTree(false)
+        }),
+      ],
+      'segmented',
+    ),
+    toggle('Tree overview', showTreeOverview, arg => {
+      model.setShowTreeOverview(arg)
+    }),
+    toggle('Scale bar', showTreeScaleBar, arg => {
+      model.setShowTreeScaleBar(arg)
+    }),
+    subMenu(
+      'Order',
+      [
+        ...treeOrders.map(order =>
+          radio(treeOrderLabels[order], treeOrder === order, () => {
+            model.setTreeOrder(order)
+          }),
+        ),
+        ...when(rotated.length > 0, [
+          action('Undo rotations', () => {
+            model.clearRotated()
+          }),
+        ]),
+      ],
+      'select',
+    ),
+    subMenu(
+      'Root',
+      [
+        radio('Input root', treeRoot === undefined, () => {
+          model.setTreeRoot(undefined)
+        }),
+        radio('Midpoint', treeRoot === 'midpoint', () => {
+          model.setTreeRoot('midpoint')
+        }),
+        // "Reroot here" in a node's menu sets the outgroup, so this only
+        // reports it
+        ...when(typeof treeRoot === 'object', [
+          {
+            ...radio(
+              typeof treeRoot === 'object'
+                ? outgroupLabel(treeRoot.outgroup)
+                : '',
+              true,
+              () => {},
+            ),
+            disabled: true,
+          },
+        ]),
+      ],
+      'select',
+    ),
+    subMenu('Labels', [
+      toggle('Tip labels', drawLabels, arg => {
+        model.setDrawLabels(arg)
+      }),
+      toggle('Internal node labels', drawNodeLabels, arg => {
+        model.setDrawNodeLabels(arg)
+      }),
+      toggle('Align right', labelsAlignRight, arg => {
+        model.setLabelsAlignRight(arg)
+      }),
+    ]),
+    ...when(treeAreaWidth !== undefined, [
+      action('Reset tree width', () => {
+        model.setTreeAreaWidth(undefined)
+      }),
+    ]),
+  ]
+}
+
+export function viewMenuItems(model: MsaViewModel): MenuItem[] {
+  return [
+    ...when(canGoTo(model), [
+      action('Find row or column…', () => {
+        model.queueDialog(onClose => [GoToDialog, { model, onClose }])
+      }),
+    ]),
+    subMenu('Zoom', zoomSubMenu(model)),
+  ]
+}
+
+export function trackSettingsItems(model: MsaViewModel): MenuItem[] {
+  return [
+    toggle('Show track values on hover', model.showColumnStats, arg => {
+      model.setShowColumnStats(arg)
+    }),
+  ]
+}
+
+// the settings panel's toggles for how the alignment draws
+export function alignmentSettingsItems(model: MsaViewModel): MenuItem[] {
+  return [
+    toggle('Show letters', model.drawMsaLetters, arg => {
+      model.setDrawMsaLetters(arg)
+    }),
+  ]
+}
+
+// who colors the cells comes first, since a scheme picked while the domains
+// fill them would otherwise change nothing on screen
+export function colorSettingsItems(model: MsaViewModel): MenuItem[] {
+  const { cellFill, filteredAnnotations } = model
+  return [
+    subMenu(
+      'Fill cells with',
+      [
+        radio('Residues', cellFill === 'residue', () => {
+          model.setCellFill('residue')
+        }),
+        ...when(filteredAnnotations.length > 0, [
+          radio('Domains', cellFill === 'domain', () => {
+            model.setShowDomains(true)
+            model.setCellFill('domain')
+          }),
+        ]),
+        {
+          ...radio('Nothing', cellFill === 'none', () => {
+            model.setCellFill('none')
+          }),
+          helpText: 'Color the letters instead',
+        },
+      ],
+      'segmented',
+    ),
+    {
+      type: 'subHeader',
+      label:
+        cellFill === 'domain'
+          ? 'Residue scheme: picking one takes the cells back from the domains'
+          : 'Residue scheme',
+    },
+    ...colorSchemeMenuItems(model),
+  ]
+}
+
+function neighborJoiningItem(model: MsaViewModel): MenuItem {
+  const rows = model.rowMap.size
+  const tooManyRows = rows > maxNeighborJoiningRows
+  return action(
+    tooManyRows
+      ? `Build neighbor joining tree (over ${maxNeighborJoiningRows} rows, use FastTree)`
+      : model.noTree
+        ? 'Build neighbor joining tree'
+        : 'Replace with neighbor joining tree',
+    () => {
+      try {
+        model.calculateNeighborJoiningTreeFromMSA()
+      } catch (e) {
+        console.error('Failed to calculate NJ tree:', e)
+        model.addWarning(e instanceof Error ? e.message : String(e))
+      }
+    },
+    tooManyRows || rows < 2,
+  )
+}
+
+export function toolsMenuItems(model: MsaViewModel): MenuItem[] {
+  return [neighborJoiningItem(model)]
+}
+
+export function helpMenuItems(model: MsaViewModel): MenuItem[] {
+  return [
+    action('Mouse & keyboard…', () => {
+      model.queueDialog(onClose => [HelpDialog, { model, onClose }])
+    }),
+    action('Tutorials', () => {
+      window.open(tutorialsUrl, '_blank', 'noopener,noreferrer')
+    }),
+    action('About & credits…', () => {
+      model.queueDialog(onClose => [AboutDialog, { onClose }])
+    }),
+  ]
+}

package/src/components/import/ImportForm.tsx

@@ -19,8 +19,8 @@ const ImportForm = observer(function ({ model }: { model: MsaViewModel }) {
   const { error } = model
 
   return (
-    <Container>
-      <Box sx={{ width: '50%', [phone]: { width: '100%' } }}>
+    <Container sx={{ pt: 2, pb: 3 }}>
+      <Box sx={{ width: '50%', mb: 2, [phone]: { width: '100%' } }}>
         {error ? <ErrorMessage error={error} /> : null}
         <Typography>
           Open an MSA file (FASTA, Stockholm, Clustal, A3M or EMF format) and/or
@@ -45,20 +45,32 @@ const ImportForm = observer(function ({ model }: { model: MsaViewModel }) {
           },
         }}
       >
-        <div>
+        <Box
+          sx={{
+            width: 400,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 1.5,
+            [phone]: { width: 'auto' },
+          }}
+        >
           <div>
             <Typography>MSA file or URL</Typography>
-            <FileSelector location={msaFile} setLocation={setMsaFile} />
+            <FileSelector inline location={msaFile} setLocation={setMsaFile} />
           </div>
           <div>
             <Typography>Tree file or URL</Typography>
-            <FileSelector location={treeFile} setLocation={setTreeFile} />
+            <FileSelector
+              inline
+              location={treeFile}
+              setLocation={setTreeFile}
+            />
           </div>
           <div>
             <Typography>Annotation GFF file or URL (optional)</Typography>
-            <FileSelector location={gffFile} setLocation={setGffFile} />
+            <FileSelector inline location={gffFile} setLocation={setGffFile} />
           </div>
-        </div>
+        </Box>
         <div>
           <Button
             onClick={() => {

package/src/components/minimap/Minimap.tsx

@@ -1,18 +1,22 @@
 import React, { useCallback } from 'react'
 
-import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
 
+import { useCanvasTheme } from '../../darkReader.ts'
 import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
 import DragHandle, { scrollbarThumbFill } from '../DragHandle.tsx'
 import { msaThumbnail } from '../msa/msaRaster.ts'
-import { MINIMAP_BAR_HEIGHT, getMinimapLayout } from './minimapLayout.ts'
+import {
+  MINIMAP_BAR_HEIGHT,
+  getMinimapLayout,
+  minimapDomainRects,
+} from './minimapLayout.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 
 const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
   const { minimapHeight, msaCanvasWidth, highResScaleFactor } = model
-  const theme = useTheme()
+  const theme = useCanvasTheme()
   const { unit, s, w, polygonHeight, polygonPoints } = getMinimapLayout(model)
 
   // the whole alignment, sampled down to the bar
@@ -41,6 +45,10 @@ const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
           barHeight,
         )
       }
+      for (const r of minimapDomainRects(model, barWidth, barHeight)) {
+        ctx.fillStyle = r.fill
+        ctx.fillRect(r.x, r.y, r.w, r.h)
+      }
     },
     width: barWidth,
     height: barHeight,

package/src/components/minimap/MinimapSVG.tsx

@@ -2,7 +2,11 @@ import React from 'react'
 
 import { scrollbarThumbFill } from '../DragHandle.tsx'
 import { canvasHref, msaThumbnail } from '../msa/msaRaster.ts'
-import { MINIMAP_BAR_HEIGHT, getMinimapLayout } from './minimapLayout.ts'
+import {
+  MINIMAP_BAR_HEIGHT,
+  getMinimapLayout,
+  minimapDomainRects,
+} from './minimapLayout.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 import type { Theme } from '@mui/material'
@@ -37,6 +41,18 @@ export default function MinimapSVG({
           preserveAspectRatio="none"
         />
       ) : null}
+      {minimapDomainRects(model, msaCanvasWidth, MINIMAP_BAR_HEIGHT).map(
+        ({ x, y, w, h, fill }) => (
+          <rect
+            key={`${x},${y},${w},${fill}`}
+            x={x}
+            y={y}
+            width={w}
+            height={h}
+            fill={fill}
+          />
+        ),
+      )}
       <rect
         x={0}
         y={0}

package/src/components/minimap/minimapLayout.ts

@@ -19,3 +19,30 @@ export function getMinimapLayout(model: MsaViewModel) {
   const polygonPoints = `${s + w},0 ${s},0 0,${polygonHeight} ${msaCanvasWidth},${polygonHeight}`
   return { unit, s, w, polygonHeight, polygonPoints }
 }
+
+/**
+ * The domain overlay's boxes scaled onto the minimap bar, one per row's band,
+ * in the colors the alignment draws them, so the overview shows the domains
+ * the alignment does. Empty unless the domains fill the cells.
+ */
+export function minimapDomainRects(
+  model: MsaViewModel,
+  width: number,
+  height: number,
+) {
+  const { cellFill, domainBands, featureColors, leaves, numColumns } = model
+  if (cellFill !== 'domain' || numColumns <= 0 || leaves.length === 0) {
+    return []
+  }
+  const colUnit = width / numColumns
+  const rowUnit = height / leaves.length
+  return leaves.flatMap((leaf, row) =>
+    (domainBands.get(leaf.data.name) ?? []).map(band => ({
+      x: band.startCol * colUnit,
+      y: row * rowUnit,
+      w: Math.max(1, (band.endCol - band.startCol) * colUnit),
+      h: Math.max(1, rowUnit),
+      fill: featureColors.get(band.annotation)?.fill ?? 'grey',
+    })),
+  )
+}

package/src/components/msa/MSACanvas.tsx

@@ -3,9 +3,11 @@ import React, { useCallback, useRef } from 'react'
 import { observer } from 'mobx-react'
 
 import { useWheelScroll } from '../../useWheelScroll.ts'
+import { zoomSnapshotScale } from '../../zoomSnapshot.ts'
 import { alignmentAriaLabel } from '../controls.ts'
 import Loading from './Loading.tsx'
 import MSACanvasBlock from './MSACanvasBlock.tsx'
+import { WheelZoomHint, useWheelZoomHint } from './WheelZoomHint.tsx'
 import { onMsaKey } from './msaKeys.ts'
 
 import type { MsaViewModel } from '../../model.ts'
@@ -20,7 +22,16 @@ const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
     scrollZoom,
     scrollX,
     scrollY,
+    zoomSnapshot,
   } = model
+  const blocks = zoomSnapshot
+    ? zoomSnapshot.blocksY.flatMap(by =>
+        zoomSnapshot.blocksX.map(bx => [bx, by] as const),
+      )
+    : blocks2d
+  const scale = zoomSnapshot
+    ? zoomSnapshotScale(model, zoomSnapshot)
+    : undefined
   const ref = useRef<HTMLDivElement>(null)
   const onScrollX = useCallback(
     (d: number) => {
@@ -36,15 +47,21 @@ const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
   )
   const onZoom = useCallback(
     (scaleFactor: number, offsetX: number, offsetY: number) => {
-      model.zoomToPos(scaleFactor, offsetX, offsetY, model.wheelZoomAxis)
+      model.wheelZoomToPos(scaleFactor, offsetX, offsetY)
     },
     [model],
   )
+  const onZoomSettle = useCallback(() => {
+    model.endWheelZoom()
+  }, [model])
+  const hint = useWheelZoomHint(model)
   const { onMouseDown, onMouseUp } = useWheelScroll({
     ref,
     onScrollX,
     onScrollY,
     onZoom,
+    onZoomSettle,
+    onWheelScroll: hint.onWheelScroll,
     scrollZoom,
   })
 
@@ -88,11 +105,12 @@ const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
             position: 'absolute',
             top: 0,
             left: 0,
-            transform: `translate(${scrollX}px, ${scrollY}px)`,
+            transform: `translate(${scrollX}px, ${scrollY}px)${scale ? ` scale(${scale.sx}, ${scale.sy})` : ''}`,
+            transformOrigin: '0 0',
             willChange: 'transform',
           }}
         >
-          {blocks2d.map(([bx, by]) => (
+          {blocks.map(([bx, by]) => (
             <MSACanvasBlock
               key={`${bx}_${by}`}
               model={model}
@@ -104,6 +122,7 @@ const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
       ) : (
         <Loading />
       )}
+      {hint.visible ? <WheelZoomHint /> : null}
     </div>
   )
 })

package/src/components/msa/MSACanvasBlock.tsx

@@ -1,16 +1,16 @@
-import React from 'react'
+import React, { useRef } from 'react'
 
 import BaseTooltip from '@jbrowse/core/ui/BaseTooltip'
-import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
 
+import { useCanvasTheme } from '../../darkReader.ts'
 import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
 import { drawMsaRaster, rasterApplies } from './msaRaster.ts'
-import { renderBoxFeatureCanvasBlock } from './renderBoxFeatureCanvasBlock.ts'
 import { renderMSABlock } from './renderMSABlock.ts'
 import { useMsaBlockMouse } from './useMsaBlockMouse.ts'
 
 import type { MsaViewModel } from '../../model.ts'
+import type { ZoomSnapshot } from '../../zoomSnapshot.ts'
 
 const MSACanvasBlock = observer(function ({
   model,
@@ -22,22 +22,28 @@ const MSACanvasBlock = observer(function ({
   offsetY: number
 }) {
   const { blockSize, highResScaleFactor } = model
-  const theme = useTheme()
+  const theme = useCanvasTheme()
   const { anchor, onMouseMove, onMouseDown, onClick, onMouseLeave } =
     useMsaBlockMouse({ model, offsetX, offsetY })
 
   const canvasSize = blockSize * highResScaleFactor
+  const drawnAt = useRef<ZoomSnapshot>(undefined)
   const ref = useCanvasAutorun({
     draw: ctx => {
+      // during a wheel zoom MSACanvas scales what this block drew at the
+      // snapshot, so the block redraws only when a new snapshot is taken
+      const snap = model.zoomSnapshot
+      if (
+        snap &&
+        (snap === drawnAt.current ||
+          snap.colWidth !== model.colWidth ||
+          snap.rowHeight !== model.rowHeight)
+      ) {
+        return
+      }
+      drawnAt.current = snap
       ctx.resetTransform()
       ctx.clearRect(0, 0, canvasSize, canvasSize)
-      renderBoxFeatureCanvasBlock({
-        ctx,
-        theme,
-        offsetX,
-        offsetY,
-        model,
-      })
       const rasterTiles = rasterApplies(model)
       if (rasterTiles) {
         drawMsaRaster({ ctx, model, theme, offsetX, offsetY })
@@ -49,6 +55,7 @@ const MSACanvasBlock = observer(function ({
         offsetY,
         model,
         rasterTiles,
+        domains: true,
       })
     },
     width: canvasSize,

package/src/components/msa/MSAMouseoverCanvas.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 
 import { isAlive } from '@jbrowse/mobx-state-tree'
-import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
 
 import { msaOverlayZIndex } from '../../constants.ts'
+import { useCanvasTheme } from '../../darkReader.ts'
 import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
 import { renderMouseover } from './renderMSAMouseover.ts'
 
@@ -16,7 +16,7 @@ const MSAMouseoverCanvas = observer(function ({
   model: MsaViewModel
 }) {
   const { height, msaCanvasWidth: width, highResScaleFactor } = model
-  const theme = useTheme()
+  const theme = useCanvasTheme()
   const canvasWidth = width * highResScaleFactor
   const canvasHeight = height * highResScaleFactor
   const ref = useCanvasAutorun({