react-msaview 5.5.0 → 5.6.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-msaview",
   "author": "Colin",
-  "version": "5.5.0",
+  "version": "5.6.1",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -35,16 +35,14 @@
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
-    "@types/node": "^26.0.1",
+    "@types/node": "^26.1.1",
     "esbuild": "^0.28.1"
   },
   "dependencies": {
-    "@mui/icons-material": "^7.3.11",
-    "@mui/material": "^7.3.11",
     "colord": "^2.9.3",
     "flatbush": "^4.6.2",
-    "@jbrowse/svgcanvas": "5.5.0",
-    "msa-parsers": "5.5.0"
+    "@jbrowse/svgcanvas": "5.6.1",
+    "msa-parsers": "5.6.1"
   },
   "scripts": {
     "clean": "rimraf dist bundle",

package/src/colorSchemes.docs.test.ts

@@ -0,0 +1,57 @@
+import { readFileSync } from 'node:fs'
+
+import { expect, test } from 'vitest'
+
+import colorSchemes from './colorSchemes.ts'
+
+// Guard against doc drift: every color-scheme name listed in the JS embedding
+// docs (USAGE.md) must be a real registered scheme, so a rename or removal in
+// colorSchemes.ts can't silently leave a dead name in the docs that users copy.
+// (Subset check only — a registered scheme may intentionally go undocumented.)
+test('color schemes listed in USAGE.md all exist', () => {
+  const registered = new Set(Object.keys(colorSchemes))
+  const usage = readFileSync(
+    new URL('../../../USAGE.md', import.meta.url),
+    'utf8',
+  )
+
+  const section = /## Color schemes\n([\s\S]*?)\n## /.exec(usage)?.[1]
+  expect(section, 'could not find the "## Color schemes" section').toBeTruthy()
+
+  // drop the bold labels (**Protein:**, **Dynamic (per-column):**, …), leaving
+  // just the comma-separated scheme names
+  const names = section!.replace(/\*\*[^*]+\*\*/g, '').match(/[a-z][a-z0-9_]+/g)
+  expect(names?.length).toBeGreaterThan(0)
+
+  const unknown = names!.filter(name => !registered.has(name))
+  expect(
+    unknown,
+    `documented but not registered: ${unknown.join(', ')}`,
+  ).toEqual([])
+})
+
+// Same guard for the R package docs, whose color_scheme names pass straight
+// through as colorSchemeName with no remapping — a name that isn't registered
+// silently renders with no coloring.
+test('color schemes listed in the R README all exist', () => {
+  const registered = new Set(Object.keys(colorSchemes))
+  const readme = readFileSync(
+    new URL('../../r-msaview/README.md', import.meta.url),
+    'utf8',
+  )
+
+  const section = /## Color schemes\n([\s\S]*?)\n## /.exec(readme)?.[1]
+  expect(section, 'could not find the "## Color schemes" section').toBeTruthy()
+
+  // names are backtick-quoted, e.g. `jalview_taylor`
+  const names = [...section!.matchAll(/`([a-z][a-z0-9_]+)`/g)].flatMap(m =>
+    m[1] ? [m[1]] : [],
+  )
+  expect(names.length).toBeGreaterThan(0)
+
+  const unknown = names.filter(name => !registered.has(name))
+  expect(
+    unknown,
+    `documented but not registered: ${unknown.join(', ')}`,
+  ).toEqual([])
+})

package/src/columnStats.test.ts

@@ -0,0 +1,94 @@
+// @vitest-environment jsdom
+import { beforeAll, describe, expect, test } from 'vitest'
+
+import MSAModelF from './model.ts'
+
+beforeAll(() => {
+  HTMLCanvasElement.prototype.getContext = function () {
+    let font = '10px sans-serif'
+    return {
+      get font() {
+        return font
+      },
+      set font(v: string) {
+        font = v
+      },
+      measureText(t: string) {
+        const size = Number.parseFloat(font) || 10
+        return { width: t.length * size * 0.6 } as TextMetrics
+      },
+    } as unknown as CanvasRenderingContext2D
+  } as unknown as typeof HTMLCanvasElement.prototype.getContext
+})
+
+// col0 is invariant M; col3 varies V/V/A (all hydrophobic) so property
+// conservation stays high while identity conservation drops
+const protein = `>a
+MKLVIL
+>b
+MRLVIL
+>c
+MKLAIL`
+
+const dna = `>a
+ACGTAC
+>b
+ACGTAG
+>c
+ACGAAC`
+
+function make(msa: string, id: string) {
+  return MSAModelF().create({
+    id,
+    type: 'MsaView',
+    msaFormat: 'fasta',
+    data: { msa },
+  })
+}
+
+describe('property conservation track', () => {
+  test('present for protein alignments', () => {
+    const ids = make(protein, 'p').tracks.map(t => t.model.id)
+    expect(ids).toContain('conservation')
+    expect(ids).toContain('property-conservation')
+  })
+
+  test('omitted for nucleotide alignments', () => {
+    const ids = make(dna, 'd').tracks.map(t => t.model.id)
+    expect(ids).toContain('conservation')
+    expect(ids).not.toContain('property-conservation')
+  })
+
+  test('conservative-substitution column: property beats identity', () => {
+    const model = make(protein, 'pc')
+    // col3 = V/V/A: same property class, different identity
+    expect(model.propertyConservation[3]!).toBeGreaterThan(
+      model.conservation[3]!,
+    )
+  })
+})
+
+describe('mouseOverColumnStats', () => {
+  test('undefined when nothing hovered', () => {
+    expect(make(protein, 'm0').mouseOverColumnStats).toBeUndefined()
+  })
+
+  test('reports consensus, gaps and distribution for hovered column', () => {
+    const model = make(protein, 'm1')
+    model.setMousePos(0, 0)
+    const s = model.mouseOverColumnStats
+    expect(s?.consensusLetter).toBe('M')
+    expect(s?.consensusFraction).toBe(1)
+    expect(s?.gapFraction).toBe(0)
+    expect(s?.total).toBe(3)
+  })
+
+  test('mixed column reports the majority residue as consensus', () => {
+    const model = make(protein, 'm2')
+    // col1 = K/R/K -> consensus K at 2/3
+    model.setMousePos(1, 0)
+    const s = model.mouseOverColumnStats
+    expect(s?.consensusLetter).toBe('K')
+    expect(s?.consensusCount).toBe(2)
+  })
+})

package/src/components/ConservationTrack.tsx

@@ -1,34 +1,33 @@
-import React, { useEffect, useRef } from 'react'
+import React from 'react'
 
-import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
 
 import { ConservationTrackResizeHandle } from './ResizeHandles.tsx'
-import { drawConservationBars } from './tracks/renderTracksSvg.ts'
+import { useCanvasAutorun } from '../useCanvasAutorun.ts'
+import {
+  barTrackValues,
+  drawConservationBars,
+} from './tracks/renderTracksSvg.ts'
 
 import type { MsaViewModel } from '../model.ts'
 import type { BasicTrack } from '../types.ts'
 
 const ConservationBlock = observer(function ({
   model,
+  track,
   offsetX,
   trackHeight,
 }: {
   model: MsaViewModel
+  track: BasicTrack
   offsetX: number
   trackHeight: number
 }) {
   const { blockSize, scrollX, highResScaleFactor } = model
 
-  const ref = useRef<HTMLCanvasElement>(null)
-
-  useEffect(() => {
-    const ctx = ref.current?.getContext('2d')
-    if (!ctx) {
-      return
-    }
-    return autorun(() => {
-      const { blockSize, colWidth, highResScaleFactor, conservation } = model
+  const ref = useCanvasAutorun(
+    ctx => {
+      const { blockSize, colWidth, highResScaleFactor } = model
       ctx.resetTransform()
       ctx.scale(highResScaleFactor, highResScaleFactor)
       ctx.clearRect(0, 0, blockSize, trackHeight)
@@ -36,14 +35,16 @@ const ConservationBlock = observer(function ({
 
       drawConservationBars({
         ctx,
-        conservation,
+        values: barTrackValues(model, track.model.id),
+        color: track.model.barColor ?? 'gray',
         colWidth,
         trackHeight,
         offsetX,
         blockSize,
       })
-    })
-  }, [model, offsetX, trackHeight])
+    },
+    [model, track, offsetX, trackHeight],
+  )
 
   return (
     <canvas
@@ -83,6 +84,7 @@ const ConservationTrack = observer(function ({
         <ConservationBlock
           key={bx}
           model={model}
+          track={track}
           offsetX={bx}
           trackHeight={trackHeight}
         />

package/src/components/MSAViewer.tsx

@@ -28,6 +28,12 @@ interface MSAViewerProps {
   highlightColumns?: number[]
   /** row name to diff every other row against (matches render as ".") */
   relativeTo?: string
+  /** draw the phylogenetic tree (default true); false leaves a labels-only gutter */
+  drawTree?: boolean
+  /** fixed width (px) of the tree/label area */
+  treeAreaWidth?: number
+  /** auto-size the tree/label area to the labels (used when drawTree is false) */
+  autoTreeAreaWidth?: boolean
 }
 
 export default function MSAViewer({
@@ -43,6 +49,9 @@ export default function MSAViewer({
   rowHeight,
   highlightColumns,
   relativeTo,
+  drawTree,
+  treeAreaWidth,
+  autoTreeAreaWidth,
 }: MSAViewerProps) {
   // lazy initializer: the model is created exactly once from the initial props
   // (a stable MST instance — not a value safe to recompute, so not useMemo)
@@ -61,6 +70,9 @@ export default function MSAViewer({
       ...(rowHeight ? { rowHeight } : {}),
       ...(highlightColumns ? { highlightColumns } : {}),
       ...(relativeTo ? { relativeTo } : {}),
+      ...(drawTree !== undefined ? { drawTree } : {}),
+      ...(treeAreaWidth ? { treeAreaWidth } : {}),
+      ...(autoTreeAreaWidth ? { autoTreeAreaWidth } : {}),
     }),
   )
 

package/src/components/SequenceTextArea.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 
+import { makeStyles } from '@jbrowse/core/util/tss-react'
 import { Button, TextField } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
 
 import Checkbox2 from './Checkbox2.tsx'
 import copy from '../vendor/copyToClipboard.ts'

package/src/components/TextTrack.tsx

@@ -1,9 +1,9 @@
-import React, { useEffect, useRef } from 'react'
+import React from 'react'
 
-import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
 
 import { setFontSize } from '../setFontSize.ts'
+import { useCanvasAutorun } from '../useCanvasAutorun.ts'
 import { useColorContrast } from '../useColorContrast.ts'
 import { drawTextTrackContent } from './tracks/renderTracksSvg.ts'
 
@@ -31,14 +31,9 @@ const AnnotationBlock = observer(function ({
   } = track
 
   const colorScheme = customColorScheme ?? modelColorScheme
-  const ref = useRef<HTMLCanvasElement>(null)
   const { contrastScheme } = useColorContrast(colorScheme)
-  useEffect(() => {
-    const ctx = ref.current?.getContext('2d')
-    if (!ctx) {
-      return
-    }
-    return autorun(() => {
+  const ref = useCanvasAutorun(
+    ctx => {
       const {
         blockSize,
         bgColor,
@@ -65,8 +60,9 @@ const AnnotationBlock = observer(function ({
         offsetX,
         blockSize,
       })
-    })
-  }, [model, offsetX, contrastScheme, colorScheme, data])
+    },
+    [model, offsetX, contrastScheme, colorScheme, data],
+  )
   return (
     <canvas
       ref={ref}

package/src/components/Track.tsx

@@ -1,9 +1,9 @@
 import React, { lazy, useCallback, useRef, useState } from 'react'
 
+import { makeStyles } from '@jbrowse/core/util/tss-react'
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
 import { IconButton, Menu, MenuItem } from '@mui/material'
 import { observer } from 'mobx-react'
-import { makeStyles } from 'tss-react/mui'
 
 import { useWheelScroll } from '../useWheelScroll.ts'
 

package/src/components/dialogs/TrackInfoDialog.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react'
 
 import { Dialog } from '@jbrowse/core/ui'
+import { makeStyles } from '@jbrowse/core/util/tss-react'
 import { Button, DialogActions, DialogContent } from '@mui/material'
 import { observer } from 'mobx-react'
-import { makeStyles } from 'tss-react/mui'
 
 import copy from '../../vendor/copyToClipboard.ts'
 

package/src/components/header/ColorSchemeMenu.tsx

@@ -13,6 +13,7 @@ const ColorSchemeMenu = observer(function ({ model }: { model: MsaViewModel }) {
   return (
     <CascadingMenuButton
       data-testid="color_scheme_menu"
+      tooltip="Color scheme"
       closeAfterItemClick
       anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
       transformOrigin={{ vertical: 'top', horizontal: 'left' }}

package/src/components/header/FileMenu.tsx

@@ -5,7 +5,6 @@ import Assignment from '@mui/icons-material/Assignment'
 import FolderOpen from '@mui/icons-material/FolderOpen'
 import Menu from '@mui/icons-material/Menu'
 import PhotoCamera from '@mui/icons-material/PhotoCamera'
-import Settings from '@mui/icons-material/Settings'
 import { observer } from 'mobx-react'
 
 import { getDomainMenu } from './getDomainsMenu.ts'
@@ -14,12 +13,12 @@ import type { MsaViewModel } from '../../model.ts'
 
 const MetadataDialog = lazy(() => import('../dialogs/MetadataDialog.tsx'))
 const ExportSVGDialog = lazy(() => import('../dialogs/ExportSVGDialog.tsx'))
-const SettingsDialog = lazy(() => import('../dialogs/SettingsDialog.tsx'))
 
 const FileMenu = observer(({ model }: { model: MsaViewModel }) => {
   return (
     <CascadingMenuButton
       data-testid="file_menu"
+      tooltip="File"
       menuItems={[
         {
           label: 'Return to import form',
@@ -41,19 +40,6 @@ const FileMenu = observer(({ model }: { model: MsaViewModel }) => {
             ])
           },
         },
-        {
-          label: 'More settings',
-          icon: Settings,
-          onClick: () => {
-            model.queueDialog(onClose => [
-              SettingsDialog,
-              {
-                model,
-                onClose,
-              },
-            ])
-          },
-        },
         {
           label: 'Domain settings',
           type: 'subMenu',

package/src/components/header/Header.tsx

@@ -2,7 +2,7 @@ import React, { lazy, useEffect } from 'react'
 
 import useMeasure from '@jbrowse/core/util/useMeasure'
 import Help from '@mui/icons-material/Help'
-import { IconButton } from '@mui/material'
+import { IconButton, Tooltip } from '@mui/material'
 import { observer } from 'mobx-react'
 
 import ColorSchemeMenu from './ColorSchemeMenu.tsx'
@@ -40,13 +40,16 @@ const Header = observer(function ({ model }: { model: MsaViewModel }) {
       <HeaderInfoArea model={model} />
       <Spacer />
       <HeaderStatusArea model={model} />
-      <IconButton
-        onClick={() => {
-          model.queueDialog(onClose => [AboutDialog, { onClose }])
-        }}
-      >
-        <Help />
-      </IconButton>
+      <Tooltip title="About">
+        <IconButton
+          aria-label="About"
+          onClick={() => {
+            model.queueDialog(onClose => [AboutDialog, { onClose }])
+          }}
+        >
+          <Help />
+        </IconButton>
+      </Tooltip>
     </div>
   )
 })

package/src/components/header/HeaderInfoArea.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
+import { makeStyles } from '@jbrowse/core/util/tss-react'
 import { Typography } from '@mui/material'
 import { observer } from 'mobx-react'
-import { makeStyles } from 'tss-react/mui'
 
 import type { MsaViewModel } from '../../model.ts'
 

package/src/components/header/HeaderStatusArea.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 
 import { LoadingEllipses } from '@jbrowse/core/ui'
+import { makeStyles } from '@jbrowse/core/util/tss-react'
 import { Button, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
-import { makeStyles } from 'tss-react/mui'
 
 import type { MsaViewModel } from '../../model.ts'
 

package/src/components/header/MSASettingsMenu.tsx

@@ -12,6 +12,7 @@ const MSASettingsMenu = observer(function ({ model }: { model: MsaViewModel }) {
   return (
     <CascadingMenuButton
       data-testid="msa_settings_menu"
+      tooltip="Alignment settings"
       closeAfterItemClick={false}
       anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
       transformOrigin={{ vertical: 'top', horizontal: 'left' }}

package/src/components/header/TreeSettingsMenu.tsx

@@ -17,6 +17,7 @@ const TreeSettingsMenu = observer(function ({
   return (
     <CascadingMenuButton
       data-testid="tree_settings_menu"
+      tooltip="Tree settings"
       closeAfterItemClick={false}
       anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
       transformOrigin={{ vertical: 'top', horizontal: 'left' }}

package/src/components/header/ZoomControls.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 
+import Mouse from '@mui/icons-material/Mouse'
 import ZoomIn from '@mui/icons-material/ZoomIn'
-import ZoomInMap from '@mui/icons-material/ZoomInMap'
 import ZoomOut from '@mui/icons-material/ZoomOut'
-import { IconButton, ToggleButton } from '@mui/material'
+import { IconButton, ToggleButton, Tooltip } from '@mui/material'
 import { observer } from 'mobx-react'
 
 import type { MsaViewModel } from '../../model.ts'
@@ -15,23 +15,30 @@ const ZoomControls = observer(function ZoomControls({
 }) {
   return (
     <>
-      <IconButton
-        onClick={() => {
-          model.zoomIn()
-        }}
-      >
-        <ZoomIn />
-      </IconButton>
-      <IconButton
-        onClick={() => {
-          model.zoomOut()
-        }}
-      >
-        <ZoomOut />
-      </IconButton>
+      <Tooltip title="Zoom in">
+        <IconButton
+          aria-label="Zoom in"
+          onClick={() => {
+            model.zoomIn()
+          }}
+        >
+          <ZoomIn />
+        </IconButton>
+      </Tooltip>
+      <Tooltip title="Zoom out">
+        <IconButton
+          aria-label="Zoom out"
+          onClick={() => {
+            model.zoomOut()
+          }}
+        >
+          <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' }}
@@ -39,7 +46,7 @@ const ZoomControls = observer(function ZoomControls({
           model.setScrollZoom(!model.scrollZoom)
         }}
       >
-        <ZoomInMap />
+        <Mouse />
       </ToggleButton>
     </>
   )

package/src/components/header/ZoomMenu.tsx

@@ -10,6 +10,7 @@ import type { MsaViewModel } from '../../model.ts'
 const ZoomMenu = observer(function ({ model }: { model: MsaViewModel }) {
   return (
     <CascadingMenuButton
+      tooltip="Fit / zoom options"
       menuItems={[
         {
           label: 'Fit both vertically/horizontally',
@@ -37,16 +38,6 @@ const ZoomMenu = observer(function ({ model }: { model: MsaViewModel }) {
             model.resetZoom()
           },
         },
-        {
-          label: 'Scroll zoom',
-          type: 'checkbox',
-          checked: model.scrollZoom,
-          onClick: () => {
-            model.setScrollZoom(!model.scrollZoom)
-          },
-          helpText:
-            'When enabled, scrolling the mouse wheel zooms in and out without holding ctrl. Hold shift to pan instead. Ctrl/⌘+wheel always zooms.',
-        },
       ]}
     >
       <MoreVert />

package/src/components/header/settingsMenuItems.ts

@@ -2,8 +2,16 @@ import type { MsaViewModel } from '../../model.ts'
 import type { MenuItem } from '@jbrowse/core/ui/Menu'
 
 export function msaSettingsMenuItems(model: MsaViewModel): MenuItem[] {
-  const { drawMsaLetters, hideGaps, bgColor } = model
+  const { drawMsaLetters, hideGaps, bgColor, showColumnStats } = model
   return [
+    {
+      label: 'Show column statistics on hover',
+      type: 'checkbox',
+      checked: showColumnStats,
+      onClick: () => {
+        model.setShowColumnStats(!showColumnStats)
+      },
+    },
     {
       label: 'Draw letters',
       type: 'checkbox',

package/src/components/msa/ColumnStats.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+
+import { observer } from 'mobx-react'
+
+import type { MsaViewModel } from '../../model.ts'
+
+const pct = (n: number) => `${Math.round(n * 100)}%`
+
+const ColumnStats = observer(function ({ model }: { model: MsaViewModel }) {
+  const stats = model.mouseOverColumnStats
+  if (!stats) {
+    return null
+  }
+  const {
+    col,
+    total,
+    conservation,
+    propertyConservation,
+    consensusLetter,
+    consensusFraction,
+    gapFraction,
+    distribution,
+  } = stats
+  const top = distribution.slice(0, 6)
+  return (
+    <div>
+      <b>Column {col + 1}</b> ({total} seqs)
+      <br />
+      Consensus: {consensusLetter || '-'} ({pct(consensusFraction)})
+      <br />
+      Conservation: {conservation.toFixed(2)}
+      {propertyConservation === undefined ? null : (
+        <>
+          <br />
+          Property conservation: {propertyConservation.toFixed(2)}
+        </>
+      )}
+      <br />
+      Gaps: {pct(gapFraction)}
+      {top.length > 0 ? (
+        <>
+          <br />
+          {top.map(([letter, count]) => (
+            <span key={letter} style={{ marginRight: 8 }}>
+              {letter} {pct(count / total)}
+            </span>
+          ))}
+        </>
+      ) : null}
+    </div>
+  )
+})
+
+export default ColumnStats

package/src/components/msa/DomainLegend.tsx

@@ -9,7 +9,11 @@ import type { MsaViewModel } from '../../model.ts'
 
 const DomainLegend = observer(function ({ model }: { model: MsaViewModel }) {
   const [expanded, setExpanded] = useState(true)
-  const { actuallyShowDomains, visibleDomainTypes: visible, fillPalette } = model
+  const {
+    actuallyShowDomains,
+    visibleDomainTypes: visible,
+    fillPalette,
+  } = model
   const ExpandIcon = expanded ? ExpandLess : ExpandMore
 
   return actuallyShowDomains && visible.length > 0 ? (