react-msaview 9.0.0 → 9.1.1

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>
+  )
+}

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,119 @@
+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[] = []
+  for (const { model: t } of model.tracks) {
+    ;(computed.has(t.id) ? computedEntries : alignmentEntries).push({
+      id: t.id,
+      label: t.name,
+    })
+  }
+  return [
+    { title: 'Computed from the alignment', entries: computedEntries },
+    { title: 'Alignment annotations', entries: alignmentEntries },
+  ].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/drawTracks.ts

@@ -9,7 +9,7 @@ import type { Arc, BasicTrack } from '../../types.ts'
 import type { RenderCtx } from '../renderCtx.ts'
 import type { Theme } from '@mui/material'
 
-export function drawConservationBars({
+function drawConservationBars({
   ctx,
   values,
   color,
@@ -55,7 +55,7 @@ export function barTrackValues(model: MsaViewModel, trackId: string) {
 
 // An arc's apex scales with the square root of its span. Contact-map spans skew
 // short, and a linear scale flattens them along the baseline.
-export function drawArcs({
+function drawArcs({
   ctx,
   arcs,
   color,
@@ -103,7 +103,7 @@ export function drawArcs({
   }
 }
 
-export function drawTextTrackContent({
+function drawTextTrackContent({
   ctx,
   data,
   colorScheme,
@@ -176,7 +176,7 @@ export function rulerCols(xStart: number, end: number, colWidth: number) {
 const RULER_FONT_SIZE = 10
 const TICK_HEIGHT = 4
 
-export function drawColumnRuler({
+function drawColumnRuler({
   ctx,
   numColumns,
   label,
@@ -229,7 +229,7 @@ export function drawColumnRuler({
 const CAP_HEIGHT_RATIO = 0.72
 const MIN_LETTER_PX = 3
 
-export function drawSequenceLogo({
+function drawSequenceLogo({
   ctx,
   colStats,
   colorScheme,

package/src/components/tree/CladeLabels.tsx

@@ -3,13 +3,7 @@ import React from 'react'
 import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
 
-import {
-  bracketGap,
-  cladeHeight,
-  cladeInGutter,
-  cladeLabelHorizontal,
-  cladeLabelOffset,
-} from './cladeBrackets.ts'
+import { cladeLabelBoxes } from './cladeBrackets.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 
@@ -20,56 +14,38 @@ import type { MsaViewModel } from '../../model.ts'
  * the same labels with a `rotate(-90)`.
  */
 const CladeLabels = observer(function ({ model }: { model: MsaViewModel }) {
-  const {
-    resolvedClades,
-    cladeGutterWidth,
-    rowHeight,
-    effectiveTreeAreaWidth,
-    fontSize,
-  } = model
   const theme = useTheme()
-  if (cladeGutterWidth === 0) {
-    return null
-  }
-  const gutterLeft = effectiveTreeAreaWidth - cladeGutterWidth
+  const { fontSize } = model
   return (
     <>
-      {resolvedClades.map((clade, index) => {
-        const { label, markColor, rows } = clade
-        if (!label || !cladeInGutter(clade)) {
-          return null
-        }
-        const left = gutterLeft + cladeLabelOffset(clade)
-        const horizontal = cladeLabelHorizontal(clade, rowHeight, fontSize)
-        return (
-          <div
-            key={`${rows[0]}-${rows[1]}-${index}`}
-            title={label}
-            style={{
-              position: 'absolute',
-              left,
-              top: rows[0] * rowHeight,
-              width: effectiveTreeAreaWidth - left - bracketGap,
-              height: cladeHeight(clade, rowHeight),
-              display: 'flex',
-              alignItems: 'center',
-              color: markColor ?? theme.palette.text.primary,
-              fontSize,
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap',
-              pointerEvents: 'none',
-              // vertical-rl reads top to bottom, and the half turn makes it
-              // read upwards, which is what rotate(-90) exports
-              ...(horizontal
-                ? {}
-                : { writingMode: 'vertical-rl', transform: 'rotate(180deg)' }),
-            }}
-          >
-            {label}
-          </div>
-        )
-      })}
+      {cladeLabelBoxes(model).map(box => (
+        <div
+          key={box.key}
+          title={box.label}
+          style={{
+            position: 'absolute',
+            left: box.left,
+            top: box.top,
+            width: box.width,
+            height: box.height,
+            display: 'flex',
+            alignItems: 'center',
+            color: box.color ?? theme.palette.text.primary,
+            fontSize,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            pointerEvents: 'none',
+            // vertical-rl reads top to bottom, and the half turn makes it
+            // read upwards, which is what rotate(-90) exports
+            ...(box.horizontal
+              ? {}
+              : { writingMode: 'vertical-rl', transform: 'rotate(180deg)' }),
+          }}
+        >
+          {box.label}
+        </div>
+      ))}
     </>
   )
 })

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