react-msaview 9.1.0 → 9.2.0

package/src/components/settings/SettingsPanel.tsx

@@ -0,0 +1,156 @@
+import React, { useState } from 'react'
+
+import ArrowDropDown from '@mui/icons-material/ArrowDropDown'
+import ArrowRight from '@mui/icons-material/ArrowRight'
+import Close from '@mui/icons-material/Close'
+import { Box, ButtonBase, IconButton, Typography } from '@mui/material'
+import { observer } from 'mobx-react'
+
+import { settingsPanelWidth } from '../../constants.ts'
+import { annotationsSubMenu } from '../header/getAnnotationsMenu.ts'
+import {
+  alignmentSettingsItems,
+  colorSettingsItems,
+  gapsSubMenu,
+  trackSettingsItems,
+  treeSubMenu,
+} from '../header/menuBarItems.ts'
+import MenuItemsForm from './MenuItemsForm.tsx'
+import TrackList from './TrackList.tsx'
+
+import type { MsaViewModel } from '../../model.ts'
+
+const collapsedKey = 'msaview-settings-collapsed'
+
+function readCollapsed() {
+  try {
+    const parsed: unknown = JSON.parse(
+      localStorage.getItem(collapsedKey) ?? '[]',
+    )
+    return new Set(Array.isArray(parsed) ? parsed.map(String) : [])
+  } catch {
+    return new Set<string>()
+  }
+}
+
+function writeCollapsed(collapsed: Set<string>) {
+  try {
+    localStorage.setItem(collapsedKey, JSON.stringify([...collapsed]))
+  } catch {}
+}
+
+function Section({
+  title,
+  collapsed,
+  onToggle,
+  children,
+}: {
+  title: string
+  collapsed: boolean
+  onToggle: () => void
+  children: React.ReactNode
+}) {
+  const Arrow = collapsed ? ArrowRight : ArrowDropDown
+  return (
+    <Box sx={{ px: 1.5, py: 1, borderBottom: 1, borderColor: 'divider' }}>
+      <ButtonBase
+        aria-expanded={!collapsed}
+        onClick={onToggle}
+        sx={{ width: '100%', justifyContent: 'flex-start', ml: -0.75 }}
+      >
+        <Arrow fontSize="small" color="action" />
+        <Typography variant="overline" color="text.secondary">
+          {title}
+        </Typography>
+      </ButtonBase>
+      {collapsed ? null : children}
+    </Box>
+  )
+}
+
+/**
+ * The settings whose effect the user watches as they change them, docked to
+ * the right of the alignment so nothing it opens covers the tree or the rows.
+ * Each section folds, and the browser remembers which ones the user folded.
+ */
+const SettingsPanel = observer(function ({
+  model,
+  height,
+}: {
+  model: MsaViewModel
+  height: number
+}) {
+  const { noTree, noDomains } = model
+  const [collapsed, setCollapsed] = useState(readCollapsed)
+  const section = (title: string) => ({
+    title,
+    collapsed: collapsed.has(title),
+    onToggle: () => {
+      const next = new Set(collapsed)
+      if (!next.delete(title)) {
+        next.add(title)
+      }
+      writeCollapsed(next)
+      setCollapsed(next)
+    },
+  })
+  return (
+    <Box
+      data-testid="settings_panel"
+      sx={{
+        width: settingsPanelWidth,
+        height,
+        flexShrink: 0,
+        overflowY: 'auto',
+        borderLeft: 1,
+        borderColor: 'divider',
+        bgcolor: 'background.paper',
+      }}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          px: 1.5,
+          pt: 0.5,
+        }}
+      >
+        <Typography variant="subtitle1">Settings</Typography>
+        <IconButton
+          aria-label="Close settings"
+          onClick={() => {
+            model.setSettingsOpen(false)
+          }}
+        >
+          <Close fontSize="small" />
+        </IconButton>
+      </Box>
+      <Section {...section('Color')}>
+        <MenuItemsForm items={colorSettingsItems(model)} />
+      </Section>
+      {noTree ? null : (
+        <Section {...section('Tree')}>
+          <MenuItemsForm items={treeSubMenu(model)} />
+        </Section>
+      )}
+      <Section {...section('Alignment')}>
+        <MenuItemsForm items={alignmentSettingsItems(model)} />
+        <MenuItemsForm items={gapsSubMenu(model)} />
+      </Section>
+      {noDomains ? null : (
+        <Section {...section('Annotations')}>
+          <MenuItemsForm items={annotationsSubMenu(model)} />
+        </Section>
+      )}
+      <Section {...section('Tracks')}>
+        <TrackList model={model} />
+        <Box sx={{ mt: 1, pt: 0.5, borderTop: 1, borderColor: 'divider' }}>
+          <MenuItemsForm items={trackSettingsItems(model)} />
+        </Box>
+      </Section>
+    </Box>
+  )
+})
+
+export default SettingsPanel

package/src/components/settings/TrackList.tsx

@@ -0,0 +1,124 @@
+import React, { useState } from 'react'
+
+import {
+  Box,
+  Button,
+  Checkbox,
+  FormControlLabel,
+  TextField,
+  Typography,
+} from '@mui/material'
+import { observer } from 'mobx-react'
+
+import type { MsaViewModel } from '../../model.ts'
+
+interface Entry {
+  id: string
+  label: string
+}
+
+function trackGroups(model: MsaViewModel) {
+  const computed = new Set(model.computedTrackModels.map(t => t.model.id))
+  const computedEntries: Entry[] = []
+  const alignmentEntries: Entry[] = []
+  const referenceEntries: Entry[] = []
+  for (const { model: t } of model.tracks) {
+    const entries =
+      t.kind === 'reference'
+        ? referenceEntries
+        : computed.has(t.id)
+          ? computedEntries
+          : alignmentEntries
+    entries.push({ id: t.id, label: t.name })
+  }
+  return [
+    { title: 'Computed from the alignment', entries: computedEntries },
+    { title: 'Alignment annotations', entries: alignmentEntries },
+    { title: 'Reference row', entries: referenceEntries },
+  ].filter(g => g.entries.length > 0)
+}
+
+// a filter box shows once the list is long enough to need one
+const filterFrom = 10
+
+const TrackList = observer(function ({ model }: { model: MsaViewModel }) {
+  const [filter, setFilter] = useState('')
+  const shown = new Set(model.turnedOnTracks.map(t => t.model.id))
+  const all = trackGroups(model)
+  const needle = filter.trim().toLowerCase()
+  const groups = all
+    .map(g => ({
+      ...g,
+      entries: g.entries.filter(e => e.label.toLowerCase().includes(needle)),
+    }))
+    .filter(g => g.entries.length > 0)
+  const matching = groups.flatMap(g => g.entries.map(e => e.id))
+  const long = all.reduce((n, g) => n + g.entries.length, 0) >= filterFrom
+  return (
+    <>
+      {long ? (
+        <>
+          <TextField
+            size="small"
+            placeholder="Filter tracks"
+            value={filter}
+            onChange={event => {
+              setFilter(event.target.value)
+            }}
+            fullWidth
+          />
+          <Box sx={{ display: 'flex' }}>
+            <Button
+              size="small"
+              onClick={() => {
+                model.setTracksShown(matching, true)
+              }}
+            >
+              Show all
+            </Button>
+            <Button
+              size="small"
+              onClick={() => {
+                model.setTracksShown(matching, false)
+              }}
+            >
+              Hide all
+            </Button>
+          </Box>
+        </>
+      ) : null}
+      {groups.map(({ title, entries }) => (
+        <Box key={title}>
+          {groups.length > 1 ? (
+            <Typography variant="caption" color="text.secondary">
+              {title}
+            </Typography>
+          ) : null}
+          {entries.map(({ id, label }) => (
+            <FormControlLabel
+              key={id}
+              sx={{ display: 'flex' }}
+              control={
+                <Checkbox
+                  size="small"
+                  checked={shown.has(id)}
+                  onChange={() => {
+                    model.toggleTrack(id)
+                  }}
+                  sx={{ py: 0.25 }}
+                />
+              }
+              label={label}
+              slotProps={{ typography: { variant: 'body2' } }}
+            />
+          ))}
+        </Box>
+      ))}
+      {groups.length === 0 ? (
+        <Typography variant="body2">No track matches</Typography>
+      ) : null}
+    </>
+  )
+})
+
+export default TrackList

package/src/components/tracks/TrackBlocks.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
-import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
 
+import { useCanvasTheme } from '../../darkReader.ts'
 import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
 import { TrackResizeHandle } from '../ResizeHandles.tsx'
 import { drawTrackBlock } from './drawTracks.ts'
@@ -21,7 +21,7 @@ const TrackBlock = observer(function ({
 }) {
   const { blockSize, highResScaleFactor } = model
   const { height } = track.model
-  const theme = useTheme()
+  const theme = useCanvasTheme()
   const canvasWidth = blockSize * highResScaleFactor
   const canvasHeight = height * highResScaleFactor
 

package/src/components/tracks/TrackTooltipContent.tsx

@@ -137,7 +137,8 @@ const TrackTooltipContent = observer(function ({
     case 'logo': {
       return <LogoTooltip model={model} col={col} />
     }
-    case 'text': {
+    case 'text':
+    case 'reference': {
       return <TextTooltip model={model} track={track} col={col} />
     }
     case 'arc': {

package/src/components/tracks/drawTracks.ts

@@ -1,6 +1,7 @@
 import { columnLogoStack } from '../../sequenceLogo.ts'
 import { setFontSize } from '../../setFontSize.ts'
 import { contrastTextFn } from '../../util.ts'
+import { tileColorFn } from '../msa/tileColor.ts'
 import { visibleColRange } from '../msa/visibleColRange.ts'
 
 import type { ColumnCounts } from '../../columnCounts.ts'
@@ -106,7 +107,7 @@ function drawArcs({
 function drawTextTrackContent({
   ctx,
   data,
-  colorScheme,
+  colorAt,
   contrastText,
   bgColor,
   drawLetters,
@@ -117,7 +118,7 @@ function drawTextTrackContent({
 }: {
   ctx: RenderCtx
   data: string | undefined
-  colorScheme: Record<string, string>
+  colorAt: (col: number, letter: string) => string | undefined
   contrastText: (color: string | undefined) => string
   bgColor: boolean
   drawLetters: boolean
@@ -135,9 +136,9 @@ function drawTextTrackContent({
 
   for (let i = 0; str && i < str.length; i++) {
     const letter = str[i]!
-    const upper = letter.toUpperCase()
-    const fill = bgColor ? colorScheme[upper] : undefined
-    const x = (xStart + i) * colWidth
+    const col = xStart + i
+    const fill = bgColor ? colorAt(col, letter) : undefined
+    const x = col * colWidth
     if (fill) {
       ctx.fillStyle = fill
       ctx.fillRect(x, 0, colWidth, rowHeight)
@@ -402,15 +403,22 @@ export function drawTrackBlock({
       })
       break
     }
-    case 'text': {
+    case 'text':
+    case 'reference': {
       const { bgColor, fontSize, rowHeight, showMsaLetters } = model
+      const scheme = customColorScheme ?? model.colorScheme
       ctx.textAlign = 'center'
       ctx.textBaseline = 'middle'
       setFontSize(ctx, fontSize)
       drawTextTrackContent({
         ctx,
         data,
-        colorScheme: customColorScheme ?? model.colorScheme,
+        // the reference row takes its colors from the alignment's own
+        // scheme, per column under a dynamic one
+        colorAt:
+          kind === 'reference'
+            ? tileColorFn(model)
+            : (_col, letter) => scheme[letter.toUpperCase()],
         contrastText: contrastTextFn(theme),
         bgColor,
         drawLetters: showMsaLetters,

package/src/components/tree/TreeCanvasBlock.tsx

@@ -2,9 +2,9 @@ import React, { useState } from 'react'
 
 import BaseTooltip from '@jbrowse/core/ui/BaseTooltip'
 import { makeStyles } from '@jbrowse/core/util/tss-react'
-import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
 
+import { useCanvasTheme } from '../../darkReader.ts'
 import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
 import TreeMenu from './TreeMenu.tsx'
 import { renderTreeCanvas } from './renderTreeCanvas.ts'
@@ -30,7 +30,7 @@ const TreeCanvasBlock = observer(function ({
   offsetY: number
 }) {
   const { classes } = useStyles()
-  const theme = useTheme()
+  const theme = useCanvasTheme()
   const [menu, setMenu] = useState<TreeMenuTarget>()
   const { clickMap, anchor, hitTest, onMouseMove, onMouseLeave } = useTreeHover(
     { model, offsetY },

package/src/components/tree/TreeMenu.tsx

@@ -30,7 +30,7 @@ const TreeMenu = observer(function ({
   const { name, id, leaf } = node
   const isCollapsed = collapsed.includes(id)
   const isRoot = id === model.tree.id
-  const noun = leaf ? 'subtree' : 'this node'
+  const noun = leaf ? 'subtree' : 'clade'
   return (
     <Menu
       anchorReference="anchorPosition"
@@ -73,9 +73,7 @@ const TreeMenu = observer(function ({
             onClose()
           }}
         >
-          {showOnly === id
-            ? 'Disable show only this node'
-            : 'Show only this node'}
+          {showOnly === id ? 'Show all rows' : 'Show only this clade'}
         </MenuItem>
       )}
       {leaf || isCollapsed ? null : (
@@ -86,7 +84,7 @@ const TreeMenu = observer(function ({
             onClose()
           }}
         >
-          Rotate this node
+          Rotate clade
         </MenuItem>
       )}
       {isRoot ? null : (
@@ -108,7 +106,7 @@ const TreeMenu = observer(function ({
             onClose()
           }}
         >
-          Indicate differences from this row
+          Use as reference row
         </MenuItem>
       ) : null}
       {leaf && relativeTo ? (

package/src/components/tree/TreeOverview.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
 
-import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
 
+import { useCanvasTheme } from '../../darkReader.ts'
 import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
 import {
   drawTreeOverview,
@@ -22,7 +22,7 @@ import type { MsaViewModel } from '../../model.ts'
  */
 const TreeOverview = observer(function ({ model }: { model: MsaViewModel }) {
   const { effectiveTreeAreaWidth, overviewHeight, highResScaleFactor } = model
-  const theme = useTheme()
+  const theme = useCanvasTheme()
   const [hover, setHover] = useState<{ id: string; rows: [number, number] }>()
   const width = Math.round(effectiveTreeAreaWidth * highResScaleFactor)
   const height = Math.round(overviewHeight * highResScaleFactor)

package/src/constants.ts

@@ -50,6 +50,10 @@ export const defaultScrollZoomAxis: ScrollZoomAxis = 'both'
 export const minLetterRowHeight = 8
 export const minLetterColWidth = 5
 
+// A wheel-zoom frame draws a block's letters only when the block holds at most
+// this many cells; the settle redraw after the gesture draws the rest
+export const zoomFrameMaxLetters = 2000
+
 // A feature span draws its label at two pixels under its height, capped at 11,
 // so a span shorter than this holds no readable text: an underline bar, a
 // sub-row band or a features panel over small rows
@@ -68,9 +72,12 @@ export const labelFitFontSize = fontSizeFor(defaultRowHeight)
 // zoom-in buttons (which otherwise grow unbounded). minColWidth/minRowHeight are
 // the smooth-zoom floors.
 export const minColWidth = 0.2
-export const minRowHeight = 1
+export const minRowHeight = 0.2
 export const maxCellSize = 80
 
+// the settings panel's width, which it takes out of the view's
+export const settingsPanelWidth = 280
+
 // MSA model defaults
 export const defaultBgColor = true
 export const defaultColorSchemeName = 'maeditor'
@@ -99,6 +106,7 @@ export const defaultDrawTree = true
 export const defaultDrawNodeBubbles = true
 export const defaultDrawNodeLabels = false
 export const defaultShowTreeOverview = false
+export const defaultShowTreeScaleBar = false
 export const defaultOverviewHeight = 120
 
 // Neighbor joining does not run above this many rows. The distance matrix is

package/src/darkReader.ts

@@ -0,0 +1,57 @@
+import { useSyncExternalStore } from 'react'
+
+import { createJBrowseTheme } from '@jbrowse/core/ui/theme'
+import { useTheme } from '@mui/material'
+
+import type { Theme } from '@mui/material'
+
+// Dark Reader's Dynamic mode rewrites the page's CSS and leaves canvas pixels
+// alone, so a light theme's black letters land on the dark page it paints.
+// Inlined from @jbrowse/core/util/systemColorScheme, which an older host core
+// lacks (see CLAUDE.md on externals).
+const DARK_READER_ATTRIBUTE = 'data-darkreader-scheme'
+
+function darkReaderIsDark() {
+  return (
+    typeof document !== 'undefined' &&
+    document.documentElement.getAttribute(DARK_READER_ATTRIBUTE) === 'dark'
+  )
+}
+
+function onDarkReaderChange(listener: () => void) {
+  if (
+    typeof MutationObserver !== 'function' ||
+    typeof document === 'undefined'
+  ) {
+    return () => {}
+  }
+  const observer = new MutationObserver(listener)
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: [DARK_READER_ATTRIBUTE],
+  })
+  return () => {
+    observer.disconnect()
+  }
+}
+
+let darkTheme: Theme | undefined
+
+/**
+ * The theme a canvas draws in: the surrounding MUI theme, or a dark one while
+ * Dark Reader darkens a light page. The DOM keeps the surrounding theme, which
+ * Dark Reader restyles itself, and the SVG export keeps it too.
+ */
+export function useCanvasTheme() {
+  const theme = useTheme()
+  const darkReader = useSyncExternalStore(
+    onDarkReaderChange,
+    darkReaderIsDark,
+    () => false,
+  )
+  if (darkReader && theme.palette.mode !== 'dark') {
+    darkTheme ??= createJBrowseTheme({ palette: { mode: 'dark' } })
+    return darkTheme
+  }
+  return theme
+}

package/src/element.ts

@@ -5,16 +5,7 @@ import { mount } from './mount.tsx'
 import type { MSAViewerProps } from './components/MSAViewer.tsx'
 import type { MsaViewModel } from './model.ts'
 import type { MountedViewer } from './mount.tsx'
-import type {
-  Cell,
-  ColorScheme,
-  ColumnTrackSpec,
-  Feature,
-  Highlight,
-  MsaSelection,
-  ResidueMapping,
-  Viewport,
-} from './types.ts'
+import type { Cell, Highlight, MsaSelection, Viewport } from './types.ts'
 
 type ElementData = Pick<
   MSAViewerProps,
@@ -29,6 +20,17 @@ type ElementData = Pick<
   | 'selection'
 >
 
+const dataProperties = [
+  'msa',
+  'tree',
+  'gff',
+  'features',
+  'colorScheme',
+  'highlights',
+  'columnTracks',
+  'residueMappings',
+] as const satisfies (keyof ElementData)[]
+
 interface NightingaleManager extends HTMLElement {
   register: (element: HTMLElement) => void
   unregister: (element: HTMLElement) => void
@@ -115,54 +117,29 @@ export function defineMsaElement(tagName = 'jbrowse-msa') {
     #reported?: { start: number; end: number }
     #data: ElementData = {}
 
-    get msa() {
-      return this.#data.msa
-    }
-    set msa(value: string | undefined) {
-      this.#setData({ msa: value })
-    }
-    get tree() {
-      return this.#data.tree
-    }
-    set tree(value: string | undefined) {
-      this.#setData({ tree: value })
-    }
-    get gff() {
-      return this.#data.gff
-    }
-    set gff(value: string | undefined) {
-      this.#setData({ gff: value })
-    }
-    get features() {
-      return this.#data.features
-    }
-    set features(value: Feature[] | undefined) {
-      this.#setData({ features: value })
-    }
-    get colorScheme() {
-      return this.#data.colorScheme
-    }
-    set colorScheme(value: ColorScheme | undefined) {
-      this.#setData({ colorScheme: value })
-    }
-    get highlights() {
-      return this.#data.highlights
-    }
-    set highlights(value: Highlight[] | undefined) {
-      this.#setData({ highlights: value })
-    }
-    get columnTracks() {
-      return this.#data.columnTracks
-    }
-    set columnTracks(value: ColumnTrackSpec[] | undefined) {
-      this.#setData({ columnTracks: value })
-    }
-    get residueMappings() {
-      return this.#data.residueMappings
-    }
-    set residueMappings(value: ResidueMapping[] | undefined) {
-      this.#setData({ residueMappings: value })
+    declare msa: ElementData['msa']
+    declare tree: ElementData['tree']
+    declare gff: ElementData['gff']
+    declare features: ElementData['features']
+    declare colorScheme: ElementData['colorScheme']
+    declare highlights: ElementData['highlights']
+    declare columnTracks: ElementData['columnTracks']
+    declare residueMappings: ElementData['residueMappings']
+
+    static {
+      for (const key of dataProperties) {
+        Object.defineProperty(MsaElement.prototype, key, {
+          configurable: true,
+          get(this: MsaElement) {
+            return this.#data[key]
+          },
+          set(this: MsaElement, value: ElementData[typeof key]) {
+            this.#setData({ [key]: value })
+          },
+        })
+      }
     }
+
     // the viewer's selection, which the reader's drags change
     get selection() {
       return this.#model ? this.#model.selection : this.#data.selection