react-msaview 9.0.0 → 9.1.0

package/src/components/controls.ts

@@ -0,0 +1,61 @@
+export interface Control {
+  label: string
+  action: string
+}
+
+export interface KeyControl extends Control {
+  keys: string[]
+  shiftKey?: boolean
+}
+
+const arrows = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']
+
+export const keyboardControls: KeyControl[] = [
+  { label: 'Arrow keys', action: 'Scroll one cell', keys: arrows },
+  {
+    label: 'Shift + arrow keys',
+    action: 'Scroll one page',
+    keys: arrows,
+    shiftKey: true,
+  },
+  { label: '+ and -', action: 'Zoom in and out', keys: ['+', '=', '-'] },
+  {
+    label: 'Home and End',
+    action: 'Jump to the first and last column',
+    keys: ['Home', 'End'],
+  },
+  { label: 'Escape', action: 'Clear the selection', keys: ['Escape'] },
+]
+
+const selectCells: Control = {
+  label: 'Shift + drag',
+  action: 'Select a block of cells',
+}
+
+export const mouseControls: Control[] = [
+  { label: 'Drag', action: 'Pan the alignment' },
+  {
+    label: 'Wheel',
+    action: 'Scroll, or zoom as set in Alignment settings → Mouse wheel',
+  },
+  { label: 'Ctrl + wheel', action: 'Zoom at the cursor' },
+  selectCells,
+  {
+    label: 'Drag along a track',
+    action: 'Select a range of columns across every row',
+  },
+  {
+    label: 'Click a tree node',
+    action: 'Collapse, rotate, reroot or show only that clade',
+  },
+  {
+    label: 'Click the tree overview',
+    action: 'Show only the clade under the pointer',
+  },
+  { label: 'Drag a divider', action: 'Resize the tree area or a track' },
+]
+
+export const alignmentAriaLabel = [
+  'Alignment',
+  ...[...keyboardControls, selectCells].map(c => `${c.label}: ${c.action}`),
+].join('. ')

package/src/components/dialogs/AnnotationFileDialog.tsx

@@ -13,25 +13,9 @@ import {
   Typography,
 } from '@mui/material'
 import { observer } from 'mobx-react'
-import {
-  annotationsToGFF,
-  interProScanResponseToAnnotations,
-} from 'msa-parsers'
+import { annotationTextToGFF } 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)
@@ -137,10 +121,10 @@ const AnnotationFileDialog = observer(function ({
                   ? 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))
+                // in the snapshot and the shared URL like every other layer. A
+                // filehandle left set would make the snapshot drop that text
+                model.setGFFFilehandle(undefined)
+                model.setGFF(annotationTextToGFF(text))
                 model.setShowDomains(true)
                 handleClose()
               } catch (e) {

package/src/components/dialogs/ExportSVGDialog.tsx

@@ -17,6 +17,7 @@ import {
 } from '@mui/material'
 import { observer } from 'mobx-react'
 
+import { exportPageSize, getLayout } from '../../exportLayout.ts'
 import Checkbox2 from '../Checkbox2.tsx'
 
 import type { MsaViewModel } from '../../model.ts'
@@ -46,24 +47,12 @@ const ExportSVGDialog = observer(function ({
   const [error, setError] = useState<unknown>()
   const [exporting, setExporting] = useState(false)
   const theme = useTheme()
-  const {
-    totalWidth,
-    totalHeight,
-    effectiveTreeAreaWidth,
-    rowPanelsWidth,
-    turnedOnTracks,
-    totalTrackAreaHeight,
-    numColumns,
-    leaves,
-    showMsaLetters,
-    treeOverviewHeight,
-  } = model
+  const { turnedOnTracks, numColumns, leaves, showMsaLetters } = model
   const hasTracks = turnedOnTracks.length > 0
-  const entireWidth = totalWidth + effectiveTreeAreaWidth + rowPanelsWidth
-  const entireHeight =
-    totalHeight +
-    (includeTracks ? totalTrackAreaHeight : 0) +
-    treeOverviewHeight
+  const entire = exportPageSize(
+    model,
+    getLayout(model, { theme, exportType: 'entire', includeTracks }),
+  )
   // 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
@@ -126,8 +115,8 @@ const ExportSVGDialog = observer(function ({
         </div>
         {isLargeExport ? (
           <Alert severity="warning" style={{ marginTop: 8 }}>
-            The entire MSA is {Math.round(entireWidth)}x
-            {Math.round(entireHeight)} pixels and draws{' '}
+            The entire MSA is {Math.round(entire.width)}x
+            {Math.round(entire.height)} pixels and draws{' '}
             {Math.round(glyphs / 1000)}k residue letters, each its own SVG
             element. Export may be slow or fail — zooming out far enough to hide
             the letters exports the same alignment as an image instead.

package/src/components/dialogs/HelpDialog.tsx

@@ -0,0 +1,79 @@
+import React, { lazy } from 'react'
+
+import { Dialog } from '@jbrowse/core/ui'
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  Table,
+  TableBody,
+  TableCell,
+  TableRow,
+  Typography,
+} from '@mui/material'
+
+import { version } from '../../version.ts'
+import { keyboardControls, mouseControls } from '../controls.ts'
+
+import type { MsaViewModel } from '../../model.ts'
+import type { Control } from '../controls.ts'
+
+const AboutDialog = lazy(() => import('./AboutDialog.tsx'))
+
+function ControlTable({ title, rows }: { title: string; rows: Control[] }) {
+  return (
+    <>
+      <Typography variant="subtitle2" sx={{ mt: 1 }}>
+        {title}
+      </Typography>
+      <Table size="small" aria-label={title}>
+        <TableBody>
+          {rows.map(({ label, action }) => (
+            <TableRow key={label}>
+              <TableCell sx={{ whiteSpace: 'nowrap', fontWeight: 500 }}>
+                {label}
+              </TableCell>
+              <TableCell>{action}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </>
+  )
+}
+
+export default function HelpDialog({
+  model,
+  onClose,
+}: {
+  model: MsaViewModel
+  onClose: () => void
+}) {
+  return (
+    <Dialog open title="Mouse & keyboard" onClose={onClose}>
+      <DialogContent>
+        <ControlTable title="Mouse" rows={mouseControls} />
+        <ControlTable
+          title="Keyboard (click the alignment first)"
+          rows={keyboardControls}
+        />
+      </DialogContent>
+      <DialogActions>
+        <Typography variant="caption" sx={{ mr: 'auto', pl: 1 }}>
+          MSAView {version}
+        </Typography>
+        <Button
+          onClick={() => {
+            model.queueDialog(done => [AboutDialog, { onClose: done }])
+            onClose()
+          }}
+        >
+          About & credits
+        </Button>
+        <Button variant="contained" onClick={onClose}>
+          Close
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}

package/src/components/header/FileMenu.tsx

@@ -8,6 +8,7 @@ import Menu from '@mui/icons-material/Menu'
 import PhotoCamera from '@mui/icons-material/PhotoCamera'
 import { observer } from 'mobx-react'
 
+import { maxNeighborJoiningRows } from '../../constants.ts'
 import { getAnnotationsMenu } from './getAnnotationsMenu.ts'
 
 import type { MsaViewModel } from '../../model.ts'
@@ -15,19 +16,43 @@ import type { MsaViewModel } from '../../model.ts'
 const MetadataDialog = lazy(() => import('../dialogs/MetadataDialog.tsx'))
 const ExportSVGDialog = lazy(() => import('../dialogs/ExportSVGDialog.tsx'))
 
+function neighborJoiningItem(model: MsaViewModel) {
+  const rows = model.rowMap.size
+  const tooManyRows = rows > maxNeighborJoiningRows
+  return {
+    label: tooManyRows
+      ? `Calculate neighbor joining tree (over ${maxNeighborJoiningRows} rows, use FastTree)`
+      : 'Calculate neighbor joining tree (BLOSUM62)',
+    icon: AccountTree,
+    disabled: tooManyRows || rows < 2,
+    onClick: () => {
+      try {
+        model.calculateNeighborJoiningTreeFromMSA()
+      } catch (e) {
+        console.error('Failed to calculate NJ tree:', e)
+        model.addWarning(e instanceof Error ? e.message : String(e))
+      }
+    },
+  }
+}
+
 const FileMenu = observer(({ model }: { model: MsaViewModel }) => {
   return (
     <CascadingMenuButton
       data-testid="file_menu"
       tooltip="File"
       menuItems={[
-        {
-          label: 'Return to import form',
-          icon: FolderOpen,
-          onClick: () => {
-            model.reset()
-          },
-        },
+        ...(model.importForm
+          ? [
+              {
+                label: 'Return to import form',
+                icon: FolderOpen,
+                onClick: () => {
+                  model.reset()
+                },
+              },
+            ]
+          : []),
         {
           label: 'Metadata',
           icon: Assignment,
@@ -48,6 +73,7 @@ const FileMenu = observer(({ model }: { model: MsaViewModel }) => {
             model,
           }),
         },
+        neighborJoiningItem(model),
         {
           label: 'Export tree (Newick)',
           icon: AccountTree,

package/src/components/header/Header.tsx

@@ -18,11 +18,10 @@ import SelectionMenu from './SelectionMenu.tsx'
 import TreeSettingsMenu from './TreeSettingsMenu.tsx'
 import UnshareableDataWarning from './UnshareableDataWarning.tsx'
 import ZoomControls from './ZoomControls.tsx'
-import ZoomMenu from './ZoomMenu.tsx'
 
 import type { MsaViewModel } from '../../model.ts'
 
-const AboutDialog = lazy(() => import('../dialogs/AboutDialog.tsx'))
+const HelpDialog = lazy(() => import('../dialogs/HelpDialog.tsx'))
 
 const Header = observer(function ({ model }: { model: MsaViewModel }) {
   const [ref, { height }] = useMeasure()
@@ -42,7 +41,6 @@ const Header = observer(function ({ model }: { model: MsaViewModel }) {
       <TreeSettingsMenu model={model} />
       <MSASettingsMenu model={model} />
       <ZoomControls model={model} />
-      <ZoomMenu model={model} />
       <GappynessSlider model={model} />
       <GoToBox model={model} />
       <div style={{ paddingLeft: 20, margin: 'auto' }}>
@@ -57,11 +55,11 @@ const Header = observer(function ({ model }: { model: MsaViewModel }) {
       <LoadWarnings model={model} />
       <UnshareableDataWarning model={model} />
       <StatusMessage model={model} variant="header" />
-      <Tooltip title="About">
+      <Tooltip title="Mouse & keyboard help">
         <IconButton
-          aria-label="About"
+          aria-label="Mouse & keyboard help"
           onClick={() => {
-            model.queueDialog(onClose => [AboutDialog, { onClose }])
+            model.queueDialog(onClose => [HelpDialog, { model, onClose }])
           }}
         >
           <Help />

package/src/components/header/TreeSettingsMenu.tsx

@@ -4,7 +4,6 @@ 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,43 +13,14 @@ const TreeSettingsMenu = observer(function ({
 }: {
   model: MsaViewModel
 }) {
-  const { rows } = model
-  const tooManyRows = rows.length > maxNeighborJoiningRows
-  return (
+  return model.noTree ? null : (
     <CascadingMenuButton
       data-testid="tree_settings_menu"
       tooltip="Tree settings"
       closeAfterItemClick={false}
       anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
       transformOrigin={{ vertical: 'top', horizontal: 'left' }}
-      menuItems={[
-        ...treeSettingsMenuItems(model),
-        ...(rows.length >= 2
-          ? [
-              {
-                label: 'Advanced',
-                type: 'subMenu' as const,
-                subMenu: [
-                  {
-                    // 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()
-                      } catch (e) {
-                        console.error('Failed to calculate NJ tree:', e)
-                        model.setError(e)
-                      }
-                    },
-                  },
-                ],
-              },
-            ]
-          : []),
-      ]}
+      menuItems={treeSettingsMenuItems(model)}
     >
       <AccountTree />
     </CascadingMenuButton>

package/src/components/header/ZoomControls.tsx

@@ -1,67 +1,20 @@
 import React from 'react'
 
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
+import FitScreen from '@mui/icons-material/FitScreen'
+import RestartAlt from '@mui/icons-material/RestartAlt'
 import ZoomIn from '@mui/icons-material/ZoomIn'
 import ZoomOut from '@mui/icons-material/ZoomOut'
 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">
@@ -85,30 +38,41 @@ const ZoomControls = observer(function ZoomControls({
         </IconButton>
       </Tooltip>
       <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' }}
+        data-testid="fit_menu"
+        tooltip="Fit or reset zoom"
         menuItems={[
-          { type: 'subHeader', label: 'Mouse wheel' },
-          ...wheelModes.map(({ label, axis, Icon, helpText }) => ({
-            label,
-            icon: Icon,
-            helpText,
-            type: 'radio' as const,
-            checked: current.label === label,
+          {
+            label: 'Fit to window',
+            onClick: () => {
+              model.fit()
+            },
+          },
+          {
+            label: 'Fit horizontally',
             onClick: () => {
-              model.setScrollZoom(axis !== undefined)
-              if (axis !== undefined) {
-                model.setScrollZoomAxis(axis)
-              }
+              model.fitHorizontally()
             },
-          })),
+          },
+          {
+            label: 'Fit vertically',
+            onClick: () => {
+              model.fitVertically()
+            },
+          },
+          { type: 'divider' },
+          {
+            label: 'Reset zoom',
+            icon: RestartAlt,
+            onClick: () => {
+              model.resetZoom()
+            },
+          },
         ]}
       >
-        <current.Icon />
+        <FitScreen />
       </CascadingMenuButton>
     </>
   )
 })
+
 export default ZoomControls

package/src/components/header/settingsMenuItems.ts

@@ -1,5 +1,12 @@
 import { treeOrders } from '../../constants.ts'
+import {
+  MouseScroll,
+  MouseZoomBoth,
+  MouseZoomHorizontal,
+  MouseZoomVertical,
+} from './ScrollZoomIcons.tsx'
 
+import type { ScrollZoomAxis } from '../../constants.ts'
 import type { MsaViewModel } from '../../model.ts'
 import type { TreeOrder } from '../../types.ts'
 import type { MenuItem } from '@jbrowse/core/ui/Menu'
@@ -43,6 +50,53 @@ function tracksSubMenu(model: MsaViewModel): MenuItem[] {
   )
 }
 
+const wheelModes: {
+  label: string
+  axis?: ScrollZoomAxis
+  icon: typeof MouseScroll
+  helpText: string
+}[] = [
+  {
+    label: 'Scrolls the alignment',
+    icon: MouseScroll,
+    helpText: 'Ctrl+wheel zooms both axes at the cursor.',
+  },
+  {
+    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.',
+  },
+]
+
+export function wheelSubMenu(model: MsaViewModel): MenuItem[] {
+  const active = model.scrollZoom ? model.scrollZoomAxis : undefined
+  return wheelModes.map(({ label, axis, icon, helpText }) => ({
+    ...radio(label, axis === active, () => {
+      model.setScrollZoom(axis !== undefined)
+      if (axis !== undefined) {
+        model.setScrollZoomAxis(axis)
+      }
+    }),
+    icon,
+    helpText,
+  }))
+}
+
 export function msaSettingsMenuItems(model: MsaViewModel): MenuItem[] {
   const { drawMsaLetters, hideGaps, bgColor, showColumnStats } = model
   return [
@@ -51,6 +105,11 @@ export function msaSettingsMenuItems(model: MsaViewModel): MenuItem[] {
       type: 'subMenu' as const,
       subMenu: tracksSubMenu(model),
     },
+    {
+      label: 'Mouse wheel',
+      type: 'subMenu' as const,
+      subMenu: wheelSubMenu(model),
+    },
     { type: 'divider' as const },
     toggle('Show track values on hover', showColumnStats, arg => {
       model.setShowColumnStats(arg)

package/src/components/import/data/seq2.ts

@@ -13,23 +13,5 @@ UniProt/Swiss-Prot|Q7JFM4|IL2_AOTVO        MLKPPLPLRSLLFLQLPLLGVGLNPKFLTPSGNEDIG
 UniProt/Swiss-Prot|Q29416|IL2_CANFA        --------------LFLQLSLLG-------------------------------------
 `
 
-export const smallMSAOnly = `CLUSTAL O(1.2.4) multiple sequence alignment
-
-
-sp|P69905|HBA_HUMAN       MVLSPADKTNVKAAWGKVGAHAGEYGAEALERMFLSFPTTKTYFPHFDLSHGSAQVKGHG	60
-sp|P01942|HBA_MOUSE       MVLSGEDKSNIKAAWGKIGGHGAEYGAEALERMFASFPTTKTYFPHFDVSHGSAQVKGHG	60
-sp|P13786|HBAZ_CAPHI      MSLTRTERTIILSLWSKISTQADVIGTETLERLFSCYPQAKTYFPHFDLHSGSAQLRAHG	60
-                          * *:  ::: : : *.*:. :.   *:*:***:* .:* :********:  ****::.**
-
-sp|P69905|HBA_HUMAN       KKVADALTNAVAHVDDMPNALSALSDLHAHKLRVDPVNFKLLSHCLLVTLAAHLPAEFTP	120
-sp|P01942|HBA_MOUSE       KKVADALASAAGHLDDLPGALSALSDLHAHKLRVDPVNFKLLSHCLLVTLASHHPADFTP	120
-sp|P13786|HBAZ_CAPHI      SKVVAAVGDAVKSIDNVTSALSKLSELHAYVLRVDPVNFKFLSHCLLVTLASHFPADFTA	120
-                          .**. *: .*.  :*:: .*** **:***: *********:**********:* **:**
-
-sp|P69905|HBA_HUMAN       AVHASLDKFLASVSTVLTSKYR	142
-sp|P01942|HBA_MOUSE       AVHASLDKFLASVSTVLTSKYR	142
-sp|P13786|HBAZ_CAPHI      DAHAAWDKFLSIVSGVLTEKYR	142
-                           .**: ****: ** ***.***`
-
 export const smallTree =
   '(((UniProt/Swiss-Prot|P26898|IL2RA_SHEEP:0.24036,(UniProt/Swiss-Prot|P41690|IL2RA_FELCA:0.17737,(UniProt/Swiss-Prot|P01589|IL2RA_HUMAN:0.03906,UniProt/Swiss-Prot|Q5MNY4|IL2RA_MACMU:0.03787):0.13033):0.04964):0.02189,UniProt/Swiss-Prot|P01590|IL2RA_MOUSE:0.23072):0.06814,(((UniProt/Swiss-Prot|Q95118|IL2RG_BOVIN:0.09600,UniProt/Swiss-Prot|P40321|IL2RG_CANFA:0.09845):0.25333,UniProt/Swiss-Prot|Q29416|IL2_CANFA:-0.35055):0.10231,(UniProt/Swiss-Prot|P26896|IL2RB_RAT:0.33631,UniProt/Swiss-Prot|Q7JFM4|IL2_AOTVO:-0.33631):0.10166):0.01607,(UniProt/Swiss-Prot|Q8BZM1|GLMN_MOUSE:0.32378,UniProt/Swiss-Prot|P36835|IL2_CAPHI:-0.32378):0.09999)'

package/src/components/msa/MSACanvas.tsx

@@ -3,6 +3,7 @@ import React, { useCallback, useRef } from 'react'
 import { observer } from 'mobx-react'
 
 import { useWheelScroll } from '../../useWheelScroll.ts'
+import { alignmentAriaLabel } from '../controls.ts'
 import Loading from './Loading.tsx'
 import MSACanvasBlock from './MSACanvasBlock.tsx'
 import { onMsaKey } from './msaKeys.ts'
@@ -54,7 +55,7 @@ const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
       // col*colWidth + scrollX, row*rowHeight + scrollY
       data-testid="msa_canvas"
       tabIndex={0}
-      aria-label="Alignment. Arrow keys scroll, shift pages, + and - zoom, Home and End jump to the first and last column. Shift-drag selects cells, and Escape clears the selection."
+      aria-label={alignmentAriaLabel}
       onKeyDown={event => {
         if (onMsaKey(model, event)) {
           event.preventDefault()

package/src/components/msa/MSACanvasBlock.tsx

@@ -5,7 +5,7 @@ import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
 
 import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
-import { drawMsaRaster, rasterSupported } from './msaRaster.ts'
+import { drawMsaRaster, rasterApplies } from './msaRaster.ts'
 import { renderBoxFeatureCanvasBlock } from './renderBoxFeatureCanvasBlock.ts'
 import { renderMSABlock } from './renderMSABlock.ts'
 import { useMsaBlockMouse } from './useMsaBlockMouse.ts'
@@ -38,11 +38,7 @@ const MSACanvasBlock = observer(function ({
         offsetY,
         model,
       })
-      // the alignment background comes from zoom-independent raster tiles; the
-      // domain overlay paints its own boxes instead, and letter-color mode has
-      // no background to paint
-      const rasterTiles =
-        !model.actuallyShowDomains && model.bgColor && rasterSupported()
+      const rasterTiles = rasterApplies(model)
       if (rasterTiles) {
         drawMsaRaster({ ctx, model, theme, offsetX, offsetY })
       }