react-msaview 9.1.0 → 9.2.0

package/src/components/msa/WheelZoomHint.tsx

@@ -0,0 +1,56 @@
+import React, { useCallback, useRef, useState } from 'react'
+
+import { Paper, Typography } from '@mui/material'
+
+import type { MsaViewModel } from '../../model.ts'
+
+const hinted = new WeakSet<MsaViewModel>()
+
+const zoomKey =
+  typeof navigator !== 'undefined' && navigator.platform.startsWith('Mac')
+    ? '⌘'
+    : 'Ctrl'
+
+export function useWheelZoomHint(model: MsaViewModel) {
+  const [visible, setVisible] = useState(false)
+  const timer = useRef<ReturnType<typeof setTimeout>>(undefined)
+  const onWheelScroll = useCallback(
+    (event: WheelEvent) => {
+      if (
+        !model.scrollZoom &&
+        Math.abs(event.deltaY) > Math.abs(event.deltaX) &&
+        !hinted.has(model)
+      ) {
+        hinted.add(model)
+        setVisible(true)
+        clearTimeout(timer.current)
+        timer.current = setTimeout(() => {
+          setVisible(false)
+        }, 2500)
+      }
+    },
+    [model],
+  )
+  return { visible, onWheelScroll }
+}
+
+export function WheelZoomHint() {
+  return (
+    <Paper
+      elevation={3}
+      style={{
+        position: 'absolute',
+        top: 12,
+        left: '50%',
+        transform: 'translateX(-50%)',
+        padding: '4px 12px',
+        pointerEvents: 'none',
+        zIndex: 2,
+      }}
+    >
+      <Typography variant="body2">
+        {zoomKey} + scroll to zoom, or check Zoom on scroll
+      </Typography>
+    </Paper>
+  )
+}

package/src/components/msa/msaKeys.ts

@@ -27,6 +27,9 @@ export function onMsaKey(
     case '-':
       model.zoomOut()
       return true
+    case '0':
+      model.resetZoom()
+      return true
     case 'Home':
       model.setScrollX(0)
       return true

package/src/components/msa/msaRaster.ts

@@ -6,7 +6,7 @@ import type { Theme } from '@mui/material'
 // One raster tile holds this many cells on a side. A tile costs ~10ms to build
 // and ~1MB to hold, and is then drawn at any zoom for ~1ms, so the cache only
 // has to be large enough to cover a screen without thrashing.
-export const rasterTileSize = 512
+const rasterTileSize = 512
 const maxCachedTiles = 64
 const maxThumbnailColumns = 2000
 const maxColorCacheEntries = 4096
@@ -286,15 +286,13 @@ function paint(
 let supported: boolean | undefined
 
 /**
- * Whether the alignment background comes from the raster: true with
- * background coloring on, the domain overlay off, and a 2d context that reads
- * back, which jsdom lacks. renderMSABlock paints each cell otherwise.
+ * Whether the alignment background comes from the raster: true while the
+ * residue scheme fills the cells, with a 2d context that reads back, which
+ * jsdom lacks. renderMSABlock paints each cell otherwise.
  */
-export function rasterApplies(
-  model: Pick<MsaViewModel, 'actuallyShowDomains' | 'bgColor'>,
-) {
+export function rasterApplies(model: Pick<MsaViewModel, 'cellFill'>) {
   supported ??= !!makeRasterCanvas(1, 1)
-  return !model.actuallyShowDomains && model.bgColor && supported
+  return model.cellFill === 'residue' && supported
 }
 
 interface RasterCache {

package/src/components/msa/renderBoxFeatureCanvasBlock.ts

@@ -41,18 +41,41 @@ export function renderBoxFeatureCanvasBlock({
   ctx.scale(k, k)
   ctx.translate(-offsetX, rowHeight / 2 - offsetY)
 
+  const source = domainOverlaySource(
+    model,
+    getVisibleLeaves({ model, offsetY, blockSizeY: by }),
+  )
+  const contrastText = contrastTextFn(theme)
+  if (model.cellFill === 'residue' && model.domainUnderline) {
+    // over residue colors a bar in a categorical color blends into the cells
+    // beside it, so a strip of the page background parts it from them
+    const { height } = source.layout
+    const halo = theme.palette.background.default
+    drawFeatureSpans<DomainBand>({
+      ctx,
+      ...source,
+      layout: { ...source.layout, height: n => height(n) + barHalo },
+      colors: new Map(
+        [...source.colors.keys()].map(a => [a, { fill: halo, stroke: halo }]),
+      ),
+      labelOf: undefined,
+      labelDrawn: undefined,
+      contrastText,
+      xMin: offsetX,
+      xMax: offsetX + bx,
+    })
+  }
   drawFeatureSpans<DomainBand>({
     ctx,
-    ...domainOverlaySource(
-      model,
-      getVisibleLeaves({ model, offsetY, blockSizeY: by }),
-    ),
-    contrastText: contrastTextFn(theme),
+    ...source,
+    contrastText,
     xMin: offsetX,
     xMax: offsetX + bx,
   })
 }
 
+const barHalo = 1.5
+
 /**
  * The domain overlay's spans over `leaves`, in alignment pixels: filled rows,
  * an underline bar, or thin sub-rows, as `domainUnderline` and

package/src/components/msa/renderHighlights.ts

@@ -11,11 +11,11 @@ import type { Theme } from '@mui/material'
 
 // a fill plus a solid border; the hover wash alone is invisible over clustalx
 // coloring
-export const highlightFill = 'rgba(255,140,0,0.28)'
-export const highlightBorder = 'rgba(210,90,0,0.95)'
+const highlightFill = 'rgba(255,140,0,0.28)'
+const highlightBorder = 'rgba(210,90,0,0.95)'
 export const highlightRowFill = 'rgba(255,140,0,0.18)'
 
-export const labelFontSize = 11
+const labelFontSize = 11
 const labelPad = 3
 // the label box above a highlight band; tree blocks also check rows this far
 // outside themselves

package/src/components/msa/renderMSABlock.ts

@@ -1,7 +1,9 @@
+import { zoomFrameMaxLetters } from '../../constants.ts'
 import { setFontSize } from '../../setFontSize.ts'
 import { adjustColorForContrast, contrastTextFn } from '../../util.ts'
 import { getVisibleLeaves } from '../getVisibleLeaves.ts'
 import { domainBandCursor } from './domainBandCursor.ts'
+import { renderBoxFeatureCanvasBlock } from './renderBoxFeatureCanvasBlock.ts'
 import { tileColorFn } from './tileColor.ts'
 import { visibleColRange } from './visibleColRange.ts'
 
@@ -21,6 +23,7 @@ export function renderMSABlock({
   blockSizeXOverride,
   blockSizeYOverride,
   rasterTiles,
+  domains,
 }: {
   offsetX: number
   offsetY: number
@@ -31,6 +34,11 @@ export function renderMSABlock({
   blockSizeXOverride?: number
   blockSizeYOverride?: number
   rasterTiles?: boolean
+  /**
+   * draw the domain overlay too, over the cell colors and under the letters,
+   * which is the one order every cell fill reads right in
+   */
+  domains?: boolean
 }) {
   const {
     colWidth,
@@ -38,18 +46,21 @@ export function renderMSABlock({
     rowHeight,
     fontSize,
     highResScaleFactor,
-    actuallyShowDomains,
+    cellFill,
     bgColor,
   } = model
   const k = highResScaleFactorOverride ?? highResScaleFactor
   const bx = blockSizeXOverride ?? blockSize
   const by = blockSizeYOverride ?? blockSize
-  ctx.resetTransform()
-  ctx.scale(k, k)
-  ctx.translate(-offsetX, rowHeight / 2 - offsetY)
-  ctx.textAlign = 'center'
-  ctx.textBaseline = 'alphabetic'
-  setFontSize(ctx, fontSize, !bgColor)
+  const setup = () => {
+    ctx.resetTransform()
+    ctx.scale(k, k)
+    ctx.translate(-offsetX, rowHeight / 2 - offsetY)
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'alphabetic'
+    setFontSize(ctx, fontSize, !bgColor)
+  }
+  setup()
 
   const { xStart, xEnd } = visibleColRange({
     offsetX,
@@ -62,7 +73,7 @@ export function renderMSABlock({
     ? columns.get(relativeTo)?.slice(xStart, xEnd)
     : null
 
-  drawTilesAndText({
+  const cells = {
     model,
     ctx,
     theme,
@@ -70,13 +81,34 @@ export function renderMSABlock({
     xEnd,
     visibleLeaves,
     referenceSeq,
-    // when domains are shown the background tiles come from
+    // when the domains fill the cells the background comes from
     // renderBoxFeatureCanvasBlock, so only the letters are drawn here
-    drawTiles: !actuallyShowDomains,
+    drawTiles: cellFill !== 'domain',
     // ...and when the caller has already laid the raster down, the tiles are
     // there but nothing here has to paint them
     rasterTiles,
-  })
+    letters:
+      model.showMsaLetters &&
+      (!model.wheelZooming ||
+        (bx * by) / (colWidth * rowHeight) <= zoomFrameMaxLetters),
+  }
+  if (domains) {
+    drawTilesAndText({ ...cells, pass: 'tiles' })
+    renderBoxFeatureCanvasBlock({
+      model,
+      theme,
+      ctx,
+      offsetX,
+      offsetY,
+      highResScaleFactorOverride,
+      blockSizeXOverride,
+      blockSizeYOverride,
+    })
+    setup()
+    drawTilesAndText({ ...cells, pass: 'letters' })
+  } else {
+    drawTilesAndText({ ...cells, pass: 'both' })
+  }
   drawInsertionIndicators({
     model,
     ctx,
@@ -97,6 +129,8 @@ function drawTilesAndText({
   referenceSeq,
   drawTiles,
   rasterTiles,
+  letters: lettersOn,
+  pass,
 }: {
   model: MsaViewModel
   theme: Theme
@@ -107,6 +141,8 @@ function drawTilesAndText({
   referenceSeq: string | null | undefined
   drawTiles: boolean
   rasterTiles?: boolean
+  letters: boolean
+  pass: 'tiles' | 'letters' | 'both'
 }) {
   const {
     bgColor,
@@ -115,7 +151,6 @@ function drawTilesAndText({
     rowHeight,
     fontSize,
     relativeTo,
-    showMsaLetters,
     subFeatureRows,
     domainUnderline,
     domainBandsByStart,
@@ -123,8 +158,9 @@ function drawTilesAndText({
   } = model
 
   const tiles = drawTiles && bgColor
-  const paintTiles = tiles && !rasterTiles
-  if (paintTiles || showMsaLetters) {
+  const paintTiles = tiles && !rasterTiles && pass !== 'letters'
+  const letters = lettersOn && pass !== 'tiles'
+  if (paintTiles || letters) {
     const tileColor = tileColorFn(model)
     // Domain fills come from a categorical palette with no fixed lightness, and
     // a dynamic scheme colors a cell from its column, so a readable letter color
@@ -169,7 +205,7 @@ function drawTilesAndText({
             ctx.fillRect(x, tileY, colWidth, rowHeight)
           }
 
-          if (showMsaLetters) {
+          if (letters) {
             const covering = bandAt(col)
             ctx.fillStyle = covering
               ? // on top of a domain box: contrast against the box fill

package/src/components/msa/tileColor.ts

@@ -9,6 +9,10 @@ export function tileColorFn(model: MsaViewModel) {
     const { colClustalX } = model
     return (col: number, letter: string) => colClustalX[col]![letter]
   }
+  if (dynamicColorSchemeName === 'blosum62_dynamic') {
+    const { colSimilarity } = model
+    return (col: number, letter: string) => colSimilarity[col]![letter]
+  }
   if (dynamicColorSchemeName === 'percent_identity_dynamic') {
     const { colConsensus } = model
     return (col: number, letter: string) => {
@@ -28,6 +32,9 @@ export function tileColorTable(model: MsaViewModel) {
   if (dynamicColorSchemeName === 'clustalx_protein_dynamic') {
     return model.colClustalX
   }
+  if (dynamicColorSchemeName === 'blosum62_dynamic') {
+    return model.colSimilarity
+  }
   if (dynamicColorSchemeName === 'percent_identity_dynamic') {
     return model.colConsensus
   }

package/src/components/rowpanels/RowPanelBlock.tsx

@@ -1,9 +1,9 @@
 import React 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 { featureField, featureName } from '../../featureFields.ts'
 import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
 import { useHoverAnchor } from '../useHoverAnchor.ts'
@@ -64,7 +64,7 @@ const RowPanelBlock = observer(function ({
     name: string
     lines: string[]
   }>()
-  const theme = useTheme()
+  const theme = useCanvasTheme()
   const { blockSize, highResScaleFactor, rowHeight } = model
   const width = panel.width
   const height = blockSize

package/src/components/settings/MenuItemsForm.tsx

@@ -0,0 +1,225 @@
+import React, { useState } from 'react'
+
+import ArrowDropDown from '@mui/icons-material/ArrowDropDown'
+import ArrowRight from '@mui/icons-material/ArrowRight'
+import {
+  Box,
+  Button,
+  Checkbox,
+  FormControlLabel,
+  MenuItem as MuiMenuItem,
+  Radio,
+  TextField,
+  ToggleButton,
+  ToggleButtonGroup,
+  Typography,
+} from '@mui/material'
+
+import type { MenuItem } from '@jbrowse/core/ui/Menu'
+
+type RadioMenuItem = Extract<MenuItem, { type: 'radio' }>
+
+/**
+ * A submenu of radios may name a compact control to render as: `segmented`
+ * for a few short choices, `select` for a longer list
+ */
+export type ChoiceDisplay = 'segmented' | 'select'
+
+function radios(items: MenuItem[]) {
+  return items.filter(
+    (i): i is RadioMenuItem => 'type' in i && i.type === 'radio',
+  )
+}
+
+function Caption({ children }: { children: React.ReactNode }) {
+  return (
+    <Typography
+      variant="caption"
+      color="text.secondary"
+      sx={{ mt: 1, display: 'block' }}
+    >
+      {children}
+    </Typography>
+  )
+}
+
+function Segmented({
+  label,
+  options,
+}: {
+  label: string
+  options: RadioMenuItem[]
+}) {
+  const value = options.findIndex(o => o.checked)
+  return (
+    <>
+      <Caption>{label}</Caption>
+      <ToggleButtonGroup
+        exclusive
+        fullWidth
+        size="small"
+        value={value}
+        aria-label={label}
+        onChange={(_event, i: number | null) => {
+          if (i !== null) {
+            options[i]?.onClick()
+          }
+        }}
+      >
+        {options.map((o, i) => (
+          <ToggleButton
+            key={String(o.label)}
+            value={i}
+            disabled={o.disabled}
+            title={o.helpText}
+            sx={{ textTransform: 'none', py: 0.25 }}
+          >
+            {o.label}
+          </ToggleButton>
+        ))}
+      </ToggleButtonGroup>
+    </>
+  )
+}
+
+// each option fires its own onClick, so picking the checked one again still
+// runs, which reopens a dialog like the custom gap threshold
+function Select({
+  label,
+  options,
+}: {
+  label: string
+  options: RadioMenuItem[]
+}) {
+  const value = options.findIndex(o => o.checked)
+  return (
+    <TextField
+      select
+      size="small"
+      fullWidth
+      label={label}
+      value={value === -1 ? '' : value}
+      sx={{ mt: 1.5, '& .MuiInputBase-root': { typography: 'body2' } }}
+    >
+      {options.map((o, i) => (
+        <MuiMenuItem
+          key={String(o.label)}
+          value={i}
+          disabled={o.disabled}
+          dense
+          onClick={() => {
+            o.onClick()
+          }}
+        >
+          {o.label}
+        </MuiMenuItem>
+      ))}
+    </TextField>
+  )
+}
+
+// a short submenu opens in place under a caption, where every choice shows at
+// once; a long one, like the extra color schemes, folds behind a toggle
+const inlineUpTo = 8
+
+function SubSection({ item }: { item: MenuItem }) {
+  const [open, setOpen] = useState(false)
+  if (!('subMenu' in item) || !Array.isArray(item.subMenu)) {
+    return null
+  }
+  const label = String(item.label)
+  const display =
+    'display' in item ? (item.display as ChoiceDisplay) : undefined
+  if (display) {
+    const options = radios(item.subMenu)
+    const rest = item.subMenu.filter(i => !options.includes(i as RadioMenuItem))
+    const Control = display === 'segmented' ? Segmented : Select
+    return (
+      <>
+        <Control label={label} options={options} />
+        <MenuItemsForm items={rest} />
+      </>
+    )
+  }
+  if (item.subMenu.length <= inlineUpTo) {
+    return (
+      <>
+        <Caption>{label}</Caption>
+        <MenuItemsForm items={item.subMenu} />
+      </>
+    )
+  }
+  return (
+    <>
+      <Button
+        size="small"
+        color="inherit"
+        startIcon={open ? <ArrowDropDown /> : <ArrowRight />}
+        onClick={() => {
+          setOpen(!open)
+        }}
+        sx={{ textTransform: 'none', justifyContent: 'flex-start', px: 0.5 }}
+      >
+        {label}
+      </Button>
+      {open ? (
+        <Box sx={{ pl: 2 }}>
+          <MenuItemsForm items={item.subMenu} />
+        </Box>
+      ) : null}
+    </>
+  )
+}
+
+export default function MenuItemsForm({ items }: { items: MenuItem[] }) {
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+      {items.map((item, i) => {
+        const key = 'label' in item ? String(item.label) : String(i)
+        if (!('label' in item)) {
+          return null
+        }
+        if ('type' in item && item.type === 'subHeader') {
+          return <Caption key={key}>{item.label}</Caption>
+        }
+        if ('subMenu' in item) {
+          return <SubSection key={key} item={item} />
+        }
+        const onClick = 'onClick' in item ? item.onClick : undefined
+        if (
+          'type' in item &&
+          (item.type === 'checkbox' || item.type === 'radio')
+        ) {
+          const Control = item.type === 'checkbox' ? Checkbox : Radio
+          return (
+            <FormControlLabel
+              key={key}
+              disabled={item.disabled}
+              control={
+                <Control
+                  size="small"
+                  checked={item.checked}
+                  onChange={() => onClick?.()}
+                  sx={{ py: 0.25 }}
+                />
+              }
+              label={item.label}
+              slotProps={{ typography: { variant: 'body2' } }}
+            />
+          )
+        }
+        return (
+          <Button
+            key={key}
+            size="small"
+            disabled={item.disabled}
+            onClick={() => onClick?.()}
+            sx={{ alignSelf: 'flex-start', textTransform: 'none' }}
+          >
+            {item.label}
+          </Button>
+        )
+      })}
+    </Box>
+  )
+}