react-msaview 8.3.0 → 8.4.1

package/dist/types.d.ts

@@ -12,6 +12,12 @@ export type TrackKind = 'text' | 'bar' | 'logo' | 'arc' | 'ruler';
  * graphics draws between a shape's interior and its own ink.
  */
 export type ResidueEncoding = 'fill' | 'color';
+/**
+ * The residue colors: a scheme name from the built-in table, or a scale's
+ * `{map}` of letter to color, which leaves every letter it does not list
+ * uncolored
+ */
+export type ColorScheme = string | Required<Pick<ScaleSpec, 'map'>>;
 export interface BasicTrackModel {
     id: string;
     name: string;
@@ -266,6 +272,25 @@ export interface Highlight {
     label?: string;
     color?: string;
 }
+/**
+ * A feature on one row as data, the JSON form of a GFF line: `start` and `end`
+ * are residues of `row`, 1-based and inclusive. `name` is the key the legend,
+ * the palette and the filter dialog group features by, `color` overrides the
+ * palette and any scale, and a `strand` draws the span as an arrow. Every other
+ * field is a column the `featureFill` and `featureLabel` encodings can read.
+ */
+export interface Feature {
+    row: string;
+    start: number;
+    end: number;
+    name?: string;
+    description?: string;
+    /** a GFF feature type; `exon`, `CDS` and the UTRs draw as numbered segments */
+    type?: string;
+    strand?: '+' | '-';
+    color?: string;
+    [field: string]: string | number | undefined;
+}
 /**
  * What the viewer draws over a clade. `highlight` fills the rows behind it,
  * across the tree and the alignment. `bracket` draws a bar and the clade's
@@ -330,6 +355,25 @@ export interface Region {
     start: number;
     end: number;
 }
+/**
+ * A block of the alignment the reader selected: columns `start` to `end` of the
+ * file, 1-based and inclusive like a Highlight without a row, across the rows
+ * `rows` names, or across every row where `rows` is absent.
+ */
+export interface MsaSelection {
+    start: number;
+    end: number;
+    rows?: string[];
+}
+/**
+ * An MsaSelection resolved to what is on screen: the visible columns it covers
+ * and its rows as runs of consecutive row indices, top to bottom
+ */
+export interface ResolvedSelection {
+    startCol: number;
+    endCol: number;
+    rowRuns: [number, number][];
+}
 /**
  * A cell of the alignment in the host's coordinates, 1-based like Highlight:
  * `column` counts every column of the file, hidden gappy ones included, and
@@ -348,6 +392,12 @@ export interface Viewport {
     startColumn: number;
     endColumn: number;
 }
+/**
+ * A row table as a host passes it: fields per row name. A number or a boolean
+ * reads as its string, the way a GFF value does, and the viewer leaves out any
+ * other value. See docs/layers.md
+ */
+export type RowDataInput = Record<string, Record<string, string | number | boolean | null>>;
 /**
  * A channel of a mark the viewer always draws. `tipLabel` colors each tip label
  * in the tree, `rowTint` washes the row across the tree gutter and the

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "8.3.0";
+export declare const version = "8.4.1";

package/dist/version.js

@@ -1,2 +1,2 @@
-export const version = '8.3.0';
+export const version = '8.4.1';
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-msaview",
   "author": "Colin",
-  "version": "8.3.0",
+  "version": "8.4.1",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -37,11 +37,11 @@
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
-    "@jbrowse/core": "file:vendor-jbrowse/jbrowse-core.tgz",
-    "@jbrowse/mobx-state-tree": "^6.5.1",
+    "@jbrowse/core": "^5.0.0-beta.9",
+    "@jbrowse/mobx-state-tree": "^6.6.1",
     "@mui/icons-material": "^9.4.0",
     "@mui/material": "^9.4.0",
-    "@types/node": "^26.5.1",
+    "@types/node": "^26.6.2",
     "esbuild": "^0.28.2",
     "mobx": "^7.0.3",
     "mobx-react": "^10.0.2",
@@ -50,10 +50,10 @@
   },
   "dependencies": {
     "@gmod/newick": "^1.0.3",
-    "@jbrowse/svgcanvas": "8.3.0",
+    "@jbrowse/svgcanvas": "8.4.1",
     "colord": "^2.10.0",
     "flatbush": "^4.6.2",
-    "msa-parsers": "8.3.0"
+    "msa-parsers": "8.4.1"
   },
   "scripts": {
     "clean": "rimraf dist bundle",

package/src/blockFasta.ts

@@ -0,0 +1,18 @@
+/**
+ * FASTA for a block of the alignment: each row's letters from column `start`
+ * to `end`, 1-based and inclusive, under its name. Gaps stay in, and a row that
+ * ends before `end` is padded with gaps, so every record is the block's width.
+ */
+export function blockFasta(
+  rows: readonly (readonly [string, string])[],
+  start: number,
+  end: number,
+) {
+  const width = Math.max(0, end - start + 1)
+  return rows
+    .map(
+      ([name, seq]) =>
+        `>${name}\n${seq.slice(start - 1, end).padEnd(width, '-')}\n`,
+    )
+    .join('')
+}

package/src/colorSchemes.ts

@@ -359,3 +359,23 @@ export default transform(colorSchemes, ([key, val]) => [
   key,
   transform(val, ([letter, color]) => [letter, colord(color).toHex()]),
 ])
+
+const letterTables = new WeakMap<
+  Record<string, string>,
+  Record<string, string>
+>()
+
+/**
+ * A letter map as the renderer looks letters up. The model upper-cases every
+ * row before coloring it, so a table keys its letters in upper case and a map
+ * may key them in either. The table is cached per map, so its identity is
+ * stable enough for the raster cache to key on.
+ */
+export function letterColorTable(map: Record<string, string>) {
+  let table = letterTables.get(map)
+  if (!table) {
+    table = transform(map, ([letter, color]) => [letter.toUpperCase(), color])
+    letterTables.set(map, table)
+  }
+  return table
+}

package/src/components/MSAView.tsx

@@ -11,7 +11,7 @@ import VerticalScrollbar from './VerticalScrollbar.tsx'
 import Header from './header/Header.tsx'
 import Minimap from './minimap/Minimap.tsx'
 import MSAPanel from './msa/MSAPanel.tsx'
-import { clickColor, hoverColor } from './overlayColors.ts'
+import { clickColor, hoverColor, selectionFill } from './overlayColors.ts'
 import RowPanelHeaders from './rowpanels/RowPanelHeaders.tsx'
 import RowPanels from './rowpanels/RowPanels.tsx'
 import TreeOverview from './tree/TreeOverview.tsx'
@@ -53,12 +53,19 @@ const TrackColumnIndicator = observer(function ({
     resizeHandleWidth,
     totalTrackAreaHeight,
     msaCanvasWidth,
+    resolvedSelection,
   } = model
 
-  // hovered column, then the pinned one, matching the alignment's own overlay
+  // the selected columns, the hovered column, then the pinned one, matching
+  // the alignment's own overlay
   const bands = [
-    { col: mouseCol, color: hoverColor },
-    { col: mouseClickCol, color: clickColor },
+    {
+      start: resolvedSelection?.startCol,
+      end: resolvedSelection?.endCol,
+      color: selectionFill,
+    },
+    { start: mouseCol, end: mouseCol, color: hoverColor },
+    { start: mouseClickCol, end: mouseClickCol, color: clickColor },
   ]
 
   return (
@@ -73,15 +80,15 @@ const TrackColumnIndicator = observer(function ({
         pointerEvents: 'none',
       }}
     >
-      {bands.map(({ col, color }) =>
-        col === undefined ? null : (
+      {bands.map(({ start, end, color }) =>
+        start === undefined || end === undefined ? null : (
           <div
             key={color}
             style={{
               position: 'absolute',
-              left: col * colWidth + scrollX,
+              left: start * colWidth + scrollX,
               top: 0,
-              width: colWidth,
+              width: (end - start + 1) * colWidth,
               height: totalTrackAreaHeight,
               backgroundColor: color,
               zIndex: 100,
@@ -140,7 +147,7 @@ const MSAView = observer(function ({ model }: { model: MsaViewModel }) {
     <div>
       {viewInitialized ? (
         <>
-          <div style={{ height, overflow: 'hidden' }}>
+          <div style={{ height, overflow: 'clip' }}>
             {hideHeader ? null : <Header model={model} />}
             <View model={model} />
           </div>

package/src/components/MSAViewer.tsx

@@ -13,12 +13,16 @@ import type { MsaViewModel } from '../model.ts'
 import type {
   Cell,
   Clade,
+  ColorScheme,
   ColumnTrackSpec,
   Encoding,
+  Feature,
   Highlight,
+  MsaSelection,
   Region,
   ResidueEncoding,
   ResidueMapping,
+  RowDataInput,
   RowPanelSpec,
   TreeOrder,
   TreeRoot,
@@ -44,7 +48,11 @@ export interface MSAViewerProps {
   msaFilehandle?: FileLocationType
   treeFilehandle?: FileLocationType
   gffFilehandle?: FileLocationType
-  colorScheme?: string
+  /**
+   * a scheme name from the built-in table, or `{map}`, a color per residue
+   * letter that leaves every other letter uncolored
+   */
+  colorScheme?: ColorScheme
   height?: number
   /** initial per-column pixel width (zoom level) */
   colWidth?: number
@@ -62,6 +70,13 @@ export interface MSAViewerProps {
    * for whole rows, each with an optional `label` and `color`
    */
   highlights?: Highlight[]
+  /**
+   * features on the rows as data, drawn with the GFF's: `{row, start, end}` in
+   * residues of that row, 1-based and inclusive, with an optional `name`,
+   * `description`, `type`, `strand` and `color`, and any other field an
+   * encoding reads (see docs/layers.md)
+   */
+  features?: Feature[]
   /**
    * clades of the tree with a mark drawn over them: `{mrca, tips, mark}` or
    * `{range, tips, mark}`, where `mark` is `highlight`, `bracket`, `collapse`
@@ -75,7 +90,7 @@ export interface MSAViewerProps {
   /** which residue of which structure each row's residues are (see docs/layers.md) */
   residueMappings?: ResidueMapping[]
   /** extra fields per row name, such as a lineage or a host (see docs/layers.md) */
-  rowData?: Record<string, Record<string, string>>
+  rowData?: RowDataInput
   /**
    * what the viewer's marks read from a table: `{channel, field, scale?}`,
    * where `channel` is `tipLabel`, `rowTint` or `branch` over `rowData`, or
@@ -120,6 +135,11 @@ export interface MSAViewerProps {
    * in columns, 1-based and inclusive
    */
   region?: Region
+  /**
+   * the selected block: `{start, end}` columns of the file, 1-based and
+   * inclusive, and `rows` by name, every row where absent
+   */
+  selection?: MsaSelection
   /** leave out the toolbar, for a page drawing its own controls */
   hideHeader?: boolean
   /**
@@ -133,43 +153,48 @@ export interface MSAViewerProps {
   onCellClick?: (cell: Cell | undefined) => void
   /** the alignment columns on screen, after every scroll, zoom and resize */
   onViewportChange?: (viewport: Viewport | undefined) => void
+  /**
+   * the selected block, after each change a drag, the header menu, Escape or
+   * the `selection` prop makes, or undefined when it clears
+   */
+  onSelectionChange?: (selection: MsaSelection | undefined) => void
   /**
    * the model the viewer built, for the model API; called again with the new
-   * model when msa, tree, gff or a filehandle changes
+   * model when msa, tree, msaFilehandle or treeFilehandle changes
    */
   onModel?: (model: MsaViewModel) => void
 }
 
+function colorSchemeSnapshot(scheme: ColorScheme | undefined) {
+  return typeof scheme === 'string'
+    ? { colorSchemeName: scheme }
+    : scheme
+      ? { customColorScheme: scheme.map }
+      : {}
+}
+
 type DataSource = Pick<
   MSAViewerProps,
-  'msa' | 'tree' | 'gff' | 'msaFilehandle' | 'treeFilehandle' | 'gffFilehandle'
+  'msa' | 'tree' | 'msaFilehandle' | 'treeFilehandle'
 >
 
 function sameSource(a: DataSource, b: DataSource) {
   return (
     a.msa === b.msa &&
     a.tree === b.tree &&
-    a.gff === b.gff &&
-    JSON.stringify([a.msaFilehandle, a.treeFilehandle, a.gffFilehandle]) ===
-      JSON.stringify([b.msaFilehandle, b.treeFilehandle, b.gffFilehandle])
+    JSON.stringify([a.msaFilehandle, a.treeFilehandle]) ===
+      JSON.stringify([b.msaFilehandle, b.treeFilehandle])
   )
 }
 
 /**
- * A new alignment, tree or annotation file needs a new model, so the viewer
- * remounts when one of those props changes and keeps its model across every
- * other change.
+ * A new alignment or tree needs a new model, so the viewer remounts when one
+ * of those props changes and keeps its model across every other change,
+ * including a new annotation file.
  */
 export default function MSAViewer(props: MSAViewerProps) {
-  const { msa, tree, gff, msaFilehandle, treeFilehandle, gffFilehandle } = props
-  const source = {
-    msa,
-    tree,
-    gff,
-    msaFilehandle,
-    treeFilehandle,
-    gffFilehandle,
-  }
+  const { msa, tree, msaFilehandle, treeFilehandle } = props
+  const source = { msa, tree, msaFilehandle, treeFilehandle }
   const [shown, setShown] = useState({ source, generation: 0 })
   if (!sameSource(shown.source, source)) {
     setShown({ source, generation: shown.generation + 1 })
@@ -177,7 +202,9 @@ export default function MSAViewer(props: MSAViewerProps) {
   return <Viewer key={shown.generation} {...props} />
 }
 
-function useModelReaction<K extends 'hoveredCell' | 'clickedCell' | 'viewport'>(
+function useModelReaction<
+  K extends 'hoveredCell' | 'clickedCell' | 'viewport' | 'selection',
+>(
   model: MsaViewModel,
   key: K,
   handler: ((value: MsaViewModel[K]) => void) | undefined,
@@ -216,6 +243,7 @@ function Viewer({
   allowedGappyness,
   highlightColumns,
   highlights,
+  features,
   clades,
   relativeTo,
   columnTracks,
@@ -231,11 +259,13 @@ function Viewer({
   treeOrder,
   treeRoot,
   region,
+  selection,
   hideHeader,
   theme,
   onCellHover,
   onCellClick,
   onViewportChange,
+  onSelectionChange,
   onModel,
 }: MSAViewerProps) {
   const [model] = useState(() =>
@@ -256,13 +286,15 @@ function Viewer({
       ...(msaFilehandle ? { msaFilehandle } : {}),
       ...(treeFilehandle ? { treeFilehandle } : {}),
       ...(gffFilehandle ? { gffFilehandle } : {}),
-      ...(colorScheme ? { colorSchemeName: colorScheme } : {}),
+      ...colorSchemeSnapshot(colorScheme),
       ...(height ? { height } : {}),
       ...(colWidth ? { colWidth } : {}),
       ...(rowHeight ? { rowHeight } : {}),
       ...(allowedGappyness !== undefined ? { allowedGappyness } : {}),
       ...(highlightColumns ? { highlightColumns } : {}),
       ...(highlights ? { highlights } : {}),
+      ...(features ? { features } : {}),
+      ...(selection ? { selection } : {}),
       ...(clades ? { clades } : {}),
       ...(relativeTo ? { relativeTo } : {}),
       ...(columnTracks ? { columnTracks } : {}),
@@ -299,11 +331,6 @@ function Viewer({
       model.setHeight(height)
     }
   }, [model, height])
-  useEffect(() => {
-    if (colorScheme !== undefined) {
-      model.setColorSchemeName(colorScheme)
-    }
-  }, [model, colorScheme])
   useEffect(() => {
     if (colWidth !== undefined) {
       model.setColWidth(colWidth)
@@ -352,12 +379,53 @@ function Viewer({
     model.drawRelativeTo(relativeTo)
   }, [model, relativeTo])
 
+  // The snapshot already holds the first gff and gffFilehandle, so these
+  // effects apply only a later change. Removing either one sets the text back
+  // to the gff prop, which clears the annotations when that is absent too.
+  const appliedGff = useRef(gff)
+  const gffFilehandleKey = JSON.stringify(gffFilehandle ?? null)
+  const appliedGffFilehandle = useRef(gffFilehandleKey)
+  useEffect(() => {
+    if (appliedGffFilehandle.current !== gffFilehandleKey) {
+      appliedGffFilehandle.current = gffFilehandleKey
+      const location = JSON.parse(gffFilehandleKey) as FileLocationType | null
+      if (location) {
+        model.setGFFFilehandle(location)
+      } else {
+        model.setGFF(appliedGff.current)
+      }
+    }
+  }, [model, gffFilehandleKey])
+  useEffect(() => {
+    if (appliedGff.current !== gff) {
+      appliedGff.current = gff
+      model.setGFF(gff)
+    }
+  }, [model, gff])
+
   // keyed by content, since a host computing a layer inline passes a new array
   // on every render
+  const colorSchemeKey = JSON.stringify(colorScheme ?? null)
+  useEffect(() => {
+    const scheme = JSON.parse(colorSchemeKey) as ColorScheme | null
+    if (typeof scheme === 'string') {
+      model.setColorSchemeName(scheme)
+    } else if (scheme) {
+      model.setCustomColorScheme(scheme.map)
+    }
+  }, [model, colorSchemeKey])
   const highlightsKey = JSON.stringify(highlights ?? [])
   useEffect(() => {
     model.setHighlights(JSON.parse(highlightsKey))
   }, [model, highlightsKey])
+  const featuresKey = JSON.stringify(features ?? [])
+  useEffect(() => {
+    model.setFeatures(JSON.parse(featuresKey))
+  }, [model, featuresKey])
+  const selectionKey = JSON.stringify(selection ?? null)
+  useEffect(() => {
+    model.setSelection(JSON.parse(selectionKey) ?? undefined)
+  }, [model, selectionKey])
   const treeRootKey = JSON.stringify(treeRoot ?? null)
   useEffect(() => {
     model.setTreeRoot(JSON.parse(treeRootKey) ?? undefined)
@@ -411,6 +479,7 @@ function Viewer({
   useModelReaction(model, 'hoveredCell', onCellHover)
   useModelReaction(model, 'clickedCell', onCellClick)
   useModelReaction(model, 'viewport', onViewportChange)
+  useModelReaction(model, 'selection', onSelectionChange)
 
   const latestOnModel = useRef(onModel)
   useEffect(() => {

package/src/components/MetadataTable.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+
+import { makeStyles } from '@jbrowse/core/util/tss-react'
+import { Table, TableBody, TableCell, TableRow } from '@mui/material'
+
+const useStyles = makeStyles()({
+  key: {
+    fontWeight: 'bold',
+    verticalAlign: 'top',
+  },
+  value: {
+    whiteSpace: 'pre-wrap',
+    wordBreak: 'break-word',
+  },
+})
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+export function isEmpty(value: unknown) {
+  return isRecord(value) && Object.keys(value).length === 0
+}
+
+export default function MetadataTable({
+  record,
+}: {
+  record: Record<string, unknown>
+}) {
+  const { classes } = useStyles()
+  return (
+    <Table size="small">
+      <TableBody>
+        {Object.entries(record)
+          .filter(([, value]) => value != null && !isEmpty(value))
+          .map(([key, value]) => (
+            <TableRow key={key}>
+              <TableCell component="th" className={classes.key}>
+                {key}
+              </TableCell>
+              <TableCell className={classes.value}>
+                {isRecord(value) ? (
+                  <MetadataTable record={value} />
+                ) : Array.isArray(value) ? (
+                  value.join('\n')
+                ) : (
+                  String(value)
+                )}
+              </TableCell>
+            </TableRow>
+          ))}
+      </TableBody>
+    </Table>
+  )
+}

package/src/components/Track.tsx

@@ -7,6 +7,7 @@ import { IconButton, Menu, MenuItem } from '@mui/material'
 import { observer } from 'mobx-react'
 
 import { useWheelScroll } from '../useWheelScroll.ts'
+import { onMsaKey } from './msa/msaKeys.ts'
 import TrackTooltipContent from './tracks/TrackTooltipContent.tsx'
 import { useTrackHover } from './tracks/useTrackHover.ts'
 
@@ -146,7 +147,7 @@ const Track = observer(function ({
   )
   useWheelScroll({ ref, onScrollX })
   const { classes } = useStyles()
-  const { anchor, onMouseMove, onMouseLeave } = useTrackHover({
+  const { anchor, onMouseMove, onMouseDown, onMouseLeave } = useTrackHover({
     model,
     tooltip: showColumnStats,
   })
@@ -162,11 +163,23 @@ const Track = observer(function ({
       <div
         ref={ref}
         data-testid={`track_${track.model.id}`}
+        tabIndex={-1}
+        style={{ outline: 'none' }}
+        onKeyDown={event => {
+          if (onMsaKey(model, event)) {
+            event.preventDefault()
+          }
+        }}
         onMouseMove={event => {
           if (ref.current) {
             onMouseMove(event, ref.current)
           }
         }}
+        onMouseDown={event => {
+          if (ref.current) {
+            onMouseDown(event, ref.current)
+          }
+        }}
         onMouseLeave={() => {
           onMouseLeave()
         }}

package/src/components/dialogs/MetadataDialog.tsx

@@ -1,11 +1,10 @@
 import React from 'react'
 
-import Attributes from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/Attributes'
-import BaseCard from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/BaseCard'
 import { Dialog } from '@jbrowse/core/ui'
-import { DialogContent } from '@mui/material'
+import { DialogContent, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 
+import MetadataTable, { isEmpty } from '../MetadataTable.tsx'
 import SequenceTextArea from '../SequenceTextArea.tsx'
 
 import type { MsaViewModel } from '../../model.ts'
@@ -18,7 +17,6 @@ const MetadataDialog = observer(function ({
   onClose: () => void
 }) {
   const { header } = model
-
   return (
     <Dialog
       onClose={() => {
@@ -29,10 +27,13 @@ const MetadataDialog = observer(function ({
       maxWidth="xl"
     >
       <DialogContent>
-        <Attributes attributes={header} />
-        <BaseCard title="sequence">
-          <SequenceTextArea str={model.rows} />
-        </BaseCard>
+        {Object.values(header).every(isEmpty) ? (
+          <Typography>This alignment has no metadata.</Typography>
+        ) : (
+          <MetadataTable record={header} />
+        )}
+        <Typography variant="h6">Sequences</Typography>
+        <SequenceTextArea str={model.rows} />
       </DialogContent>
     </Dialog>
   )

package/src/components/header/ColorSchemeMenu.tsx

@@ -8,8 +8,37 @@ import colorSchemes from '../../colorSchemes.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 
+// While a `customColorScheme` map is set, a checked Custom entry stands for it
+// and no named scheme is checked. Picking a named scheme clears the map.
+export function colorSchemeMenuItems(model: MsaViewModel) {
+  const { colorSchemeName, customColorScheme } = model
+  const custom = customColorScheme
+    ? [
+        {
+          label: 'Custom',
+          type: 'radio',
+          checked: true,
+          onClick: () => {},
+        } as const,
+      ]
+    : []
+  return [
+    ...custom,
+    ...Object.keys(colorSchemes).map(
+      option =>
+        ({
+          label: option,
+          type: 'radio',
+          checked: !customColorScheme && colorSchemeName === option,
+          onClick: () => {
+            model.setColorSchemeName(option)
+          },
+        }) as const,
+    ),
+  ]
+}
+
 const ColorSchemeMenu = observer(function ({ model }: { model: MsaViewModel }) {
-  const { colorSchemeName } = model
   return (
     <CascadingMenuButton
       data-testid="color_scheme_menu"
@@ -17,17 +46,7 @@ const ColorSchemeMenu = observer(function ({ model }: { model: MsaViewModel }) {
       closeAfterItemClick
       anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
       transformOrigin={{ vertical: 'top', horizontal: 'left' }}
-      menuItems={Object.keys(colorSchemes).map(
-        option =>
-          ({
-            label: option,
-            type: 'radio',
-            checked: colorSchemeName === option,
-            onClick: () => {
-              model.setColorSchemeName(option)
-            },
-          }) as const,
-      )}
+      menuItems={colorSchemeMenuItems(model)}
     >
       <Palette />
     </CascadingMenuButton>