react-msaview 5.4.1 → 5.6.0

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from 'react'
+import React, { useEffect, useState } from 'react'
 
 import { createJBrowseTheme } from '@jbrowse/core/ui/theme'
 import useMeasure from '@jbrowse/core/util/useMeasure'
@@ -9,6 +9,8 @@ import Loading from './Loading.tsx'
 
 import type { FileLocation as FileLocationType } from '@jbrowse/core/util/types'
 
+const theme = createJBrowseTheme()
+
 interface MSAViewerProps {
   msa?: string
   tree?: string
@@ -18,8 +20,20 @@ interface MSAViewerProps {
   gffFilehandle?: FileLocationType
   colorScheme?: string
   height?: number
+  /** initial per-column pixel width (zoom level) */
+  colWidth?: number
+  /** initial per-row pixel height */
+  rowHeight?: number
+  /** alignment columns (0-based) to highlight with a persistent overlay */
+  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({
@@ -31,25 +45,35 @@ export default function MSAViewer({
   gffFilehandle,
   colorScheme,
   height,
+  colWidth,
+  rowHeight,
+  highlightColumns,
   relativeTo,
+  drawTree,
+  treeAreaWidth,
+  autoTreeAreaWidth,
 }: MSAViewerProps) {
-  const theme = useMemo(() => createJBrowseTheme(), [])
-  const model = useMemo(
-    () =>
-      MSAModelF().create({
-        type: 'MsaView',
-        ...(msa || tree || gff
-          ? { data: { msa: msa ?? '', tree: tree ?? '', gff } }
-          : {}),
-        ...(msaFilehandle ? { msaFilehandle } : {}),
-        ...(treeFilehandle ? { treeFilehandle } : {}),
-        ...(gffFilehandle ? { gffFilehandle } : {}),
-        ...(colorScheme ? { colorSchemeName: colorScheme } : {}),
-        ...(height ? { height } : {}),
-        ...(relativeTo ? { relativeTo } : {}),
-      }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [],
+  // 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)
+  const [model] = useState(() =>
+    MSAModelF().create({
+      type: 'MsaView',
+      ...(msa || tree || gff
+        ? { data: { msa: msa ?? '', tree: tree ?? '', gff } }
+        : {}),
+      ...(msaFilehandle ? { msaFilehandle } : {}),
+      ...(treeFilehandle ? { treeFilehandle } : {}),
+      ...(gffFilehandle ? { gffFilehandle } : {}),
+      ...(colorScheme ? { colorSchemeName: colorScheme } : {}),
+      ...(height ? { height } : {}),
+      ...(colWidth ? { colWidth } : {}),
+      ...(rowHeight ? { rowHeight } : {}),
+      ...(highlightColumns ? { highlightColumns } : {}),
+      ...(relativeTo ? { relativeTo } : {}),
+      ...(drawTree !== undefined ? { drawTree } : {}),
+      ...(treeAreaWidth ? { treeAreaWidth } : {}),
+      ...(autoTreeAreaWidth ? { autoTreeAreaWidth } : {}),
+    }),
   )
 
   const [ref, { width }] = useMeasure()

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'
 
@@ -26,12 +26,15 @@ const TrackLabel = observer(function TrackLabel({
   track: BasicTrack
 }) {
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>()
-  const { drawLabels, rowHeight, treeAreaWidth: width } = model
+  const closeMenu = () => {
+    setAnchorEl(undefined)
+  }
+  const { drawLabels, fontSize, treeAreaWidth: width } = model
   const {
     model: { name, height },
   } = track
   const { classes } = useStyles()
-  const trackLabelHeight = Math.min(height, Math.max(8, rowHeight - 8))
+  const trackLabelHeight = Math.min(height, fontSize)
 
   return (
     <div
@@ -62,14 +65,14 @@ const TrackLabel = observer(function TrackLabel({
           transitionDuration={0}
           open
           onClose={() => {
-            setAnchorEl(undefined)
+            closeMenu()
           }}
         >
           <MenuItem
             dense
             onClick={() => {
               model.toggleTrack(track.model.id)
-              setAnchorEl(undefined)
+              closeMenu()
             }}
           >
             Close
@@ -81,7 +84,7 @@ const TrackLabel = observer(function TrackLabel({
                 TrackInfoDialog,
                 { onClose, model: track.model },
               ])
-              setAnchorEl(undefined)
+              closeMenu()
             }}
           >
             Get info

package/src/components/dialogs/FeatureDialog.tsx

@@ -1,11 +1,18 @@
 import React from 'react'
 
 import { Dialog } from '@jbrowse/core/ui'
-import { Button, DialogContent } from '@mui/material'
+import {
+  Button,
+  Checkbox,
+  DialogContent,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+} from '@mui/material'
 import { observer } from 'mobx-react'
 
-import { getPalette } from '../../ggplotPalettes.ts'
-
 import type { MsaViewModel } from '../../model.ts'
 
 const Toggles = observer(function ({ model }: { model: MsaViewModel }) {
@@ -35,53 +42,60 @@ const Toggles = observer(function ({ model }: { model: MsaViewModel }) {
   )
 })
 
-const Table = observer(function ({ model }: { model: MsaViewModel }) {
-  const { tidyInterProAnnotationTypes, featureFilters } = model
-  const values = [...tidyInterProAnnotationTypes.values()]
-  const palette = getPalette(values.length - 1)
+const FeatureTable = observer(function ({ model }: { model: MsaViewModel }) {
+  const { tidyInterProAnnotationTypes, tidyInterProAnnotations, fillPalette } =
+    model
+  const counts = new Map<string, number>()
+  for (const annot of tidyInterProAnnotations) {
+    counts.set(annot.accession, (counts.get(annot.accession) ?? 0) + 1)
+  }
   return (
     <>
       <Toggles model={model} />
-      <table>
-        <thead>
-          <tr>
-            <td />
-            <td>accession</td>
-            <td>name</td>
-            <td>description</td>
-          </tr>
-        </thead>
-        <tbody>
-          {values.map(({ accession, name, description }, idx) => (
-            <tr key={accession}>
-              <td>
-                <input
-                  type="checkbox"
-                  checked={featureFilters.get(accession) ?? false}
-                  onChange={() => {
-                    model.setFilter(
-                      accession,
-                      !model.featureFilters.get(accession),
-                    )
-                  }}
-                />
-              </td>
-              <td>{accession}</td>
-              <td>{name}</td>
-              <td>{description}</td>
-              <td>
-                <div
-                  style={{
-                    width: 20,
-                    height: 20,
-                    background: palette[idx] || 'black',
-                  }}
-                />
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
+      <Table size="small">
+        <TableHead>
+          <TableRow>
+            <TableCell padding="checkbox" />
+            <TableCell>color</TableCell>
+            <TableCell>accession</TableCell>
+            <TableCell>name</TableCell>
+            <TableCell>count</TableCell>
+            <TableCell>description</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {[...tidyInterProAnnotationTypes.values()].map(
+            ({ accession, name, description }) => (
+              <TableRow key={accession}>
+                <TableCell padding="checkbox">
+                  <Checkbox
+                    checked={model.featureFilters.get(accession) ?? false}
+                    onChange={() => {
+                      model.setFilter(
+                        accession,
+                        !model.featureFilters.get(accession),
+                      )
+                    }}
+                  />
+                </TableCell>
+                <TableCell>
+                  <div
+                    style={{
+                      width: 20,
+                      height: 20,
+                      background: fillPalette[accession],
+                    }}
+                  />
+                </TableCell>
+                <TableCell>{accession}</TableCell>
+                <TableCell>{name}</TableCell>
+                <TableCell>{counts.get(accession)}</TableCell>
+                <TableCell>{description}</TableCell>
+              </TableRow>
+            ),
+          )}
+        </TableBody>
+      </Table>
     </>
   )
 })
@@ -103,7 +117,7 @@ const FeatureTypeDialog = observer(function ({
       maxWidth="xl"
     >
       <DialogContent>
-        <Table model={model} />
+        <FeatureTable model={model} />
       </DialogContent>
     </Dialog>
   )

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' }}