react-msaview 9.0.0 → 9.1.1

package/src/components/dialogs/MetadataDialog.tsx

@@ -4,8 +4,10 @@ import { Dialog } from '@jbrowse/core/ui'
 import { DialogContent, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 
-import MetadataTable, { isEmpty } from '../MetadataTable.tsx'
+import MetadataTable, { isEmpty, isRecord } from '../MetadataTable.tsx'
 import SequenceTextArea from '../SequenceTextArea.tsx'
+import { gfLabels, monospaceKeys, sectionLabels } from './metadataLabels.ts'
+import { groupGeneral } from './metadataRecord.tsx'
 
 import type { MsaViewModel } from '../../model.ts'
 
@@ -16,7 +18,13 @@ const MetadataDialog = observer(function ({
   model: MsaViewModel
   onClose: () => void
 }) {
-  const { header } = model
+  const entries = Object.entries(model.header).filter(
+    ([, value]) => value != null && !isEmpty(value),
+  )
+  const fields = Object.fromEntries(
+    entries.filter(([, value]) => !isRecord(value)),
+  )
+  const sections = entries.filter(([, value]) => isRecord(value))
   return (
     <Dialog
       onClose={() => {
@@ -27,10 +35,30 @@ const MetadataDialog = observer(function ({
       maxWidth="xl"
     >
       <DialogContent>
-        {Object.values(header).every(isEmpty) ? (
+        {entries.length === 0 ? (
           <Typography>This alignment has no metadata.</Typography>
         ) : (
-          <MetadataTable record={header} />
+          <>
+            {Object.keys(fields).length > 0 ? (
+              <MetadataTable record={fields} />
+            ) : null}
+            {sections.map(([section, value]) => (
+              <div key={section}>
+                <Typography variant="h6">
+                  {sectionLabels[section] ?? section}
+                </Typography>
+                {section === 'General' ? (
+                  <MetadataTable
+                    record={groupGeneral(value)}
+                    labels={gfLabels}
+                    monospaceKeys={monospaceKeys}
+                  />
+                ) : (
+                  <MetadataTable record={value as Record<string, unknown>} />
+                )}
+              </div>
+            ))}
+          </>
         )}
         <Typography variant="h6">Sequences</Typography>
         <SequenceTextArea str={model.rows} />

package/src/components/{header → dialogs}/goTo.ts

@@ -21,7 +21,7 @@ export function rowNameSuggestions(names: string[], input: string, limit = 50) {
  * column the ruler numbers N, or residue N of a row written `name:N`. A name
  * is tried whole first, so a row called `chr1:100` stays reachable.
  */
-export function resolveGoTo(model: MsaViewModel, text: string) {
+function resolveGoTo(model: MsaViewModel, text: string) {
   const query = text.trim()
   const row = model.rowNamesSet.get(query)
   if (row !== undefined) {

package/src/components/dialogs/metadataLabels.ts

@@ -0,0 +1,54 @@
+export const sectionLabels: Record<string, string> = {
+  General: 'Alignment',
+  Accessions: 'Row accessions',
+  Dbxref: 'Row cross-references',
+}
+
+export const gfLabels: Record<string, string> = {
+  ID: 'Identifier',
+  AC: 'Accession',
+  DE: 'Description',
+  AU: 'Authors',
+  SE: 'Source of seed',
+  SS: 'Source of structure',
+  BM: 'Build method',
+  SM: 'Search method',
+  GA: 'Gathering threshold',
+  TC: 'Trusted cutoff',
+  NC: 'Noise cutoff',
+  TP: 'Family type',
+  CL: 'Clan',
+  MB: 'Clan members',
+  PI: 'Previous identifiers',
+  DR: 'Database references',
+  CC: 'Comment',
+  WK: 'Wikipedia',
+  NE: 'Pfam family nested in this one',
+  NL: 'Nesting location',
+  NH: 'Tree (Newick)',
+  SQ: 'Number of sequences',
+  RC: 'Reference comment',
+  RN: 'Reference number',
+  RM: 'PubMed ID',
+  RT: 'Reference title',
+  RA: 'Reference authors',
+  RL: 'Reference journal',
+  CB: 'Curation: build',
+  DC: 'Database comment',
+  DW: 'Database web link',
+  OS: 'Organism',
+  OC: 'Organism classification',
+  AM: 'Alignment method',
+  FT: 'Feature',
+  SO: 'Sequence Ontology term',
+}
+
+export const referenceFieldLabels: Record<string, string> = {
+  RT: 'Title',
+  RA: 'Authors',
+  RL: 'Journal',
+  RM: 'PubMed',
+  RC: 'Comment',
+}
+
+export const monospaceKeys = new Set(['NH'])

package/src/components/dialogs/metadataRecord.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+
+import { referenceFieldLabels } from './metadataLabels.ts'
+
+const referenceTags = ['RM', 'RT', 'RA', 'RL', 'RC'] as const
+
+function pubmed(id: string) {
+  return /^\d+$/.test(id) ? (
+    <a
+      href={`https://pubmed.ncbi.nlm.nih.gov/${id}/`}
+      target="_blank"
+      rel="noreferrer"
+    >
+      {id}
+    </a>
+  ) : (
+    id
+  )
+}
+
+function groupReferences(general: Record<string, unknown>) {
+  const numbers = general.RN
+  if (!Array.isArray(numbers) || numbers.length === 0) {
+    return general
+  }
+  const present = referenceTags.filter(tag => general[tag] != null)
+  const aligned = present.every(tag => {
+    const values = general[tag]
+    return Array.isArray(values) && values.length === numbers.length
+  })
+  if (!aligned) {
+    return general
+  }
+  const rest = Object.fromEntries(
+    Object.entries(general).filter(
+      ([tag]) =>
+        tag !== 'RN' && !(referenceTags as readonly string[]).includes(tag),
+    ),
+  )
+  const references = Object.fromEntries(
+    numbers.map((number: string, i) => [
+      number,
+      Object.fromEntries(
+        present.map(tag => {
+          const value = (general[tag] as string[])[i]!
+          return [
+            referenceFieldLabels[tag],
+            tag === 'RM' ? pubmed(value) : value,
+          ]
+        }),
+      ),
+    ]),
+  )
+  return { ...rest, References: references }
+}
+
+export function groupGeneral(general: unknown) {
+  return general && typeof general === 'object'
+    ? groupReferences(general as Record<string, unknown>)
+    : {}
+}

package/src/components/header/Header.tsx

@@ -1,30 +1,33 @@
-import React, { lazy, useEffect } from 'react'
+import React, { useEffect } from 'react'
 
 import useMeasure from '@jbrowse/core/util/useMeasure'
-import Help from '@mui/icons-material/Help'
-import { IconButton, Tooltip } from '@mui/material'
+import Tune from '@mui/icons-material/Tune'
+import { AppBar, Button, IconButton, Toolbar, Tooltip } from '@mui/material'
 import { observer } from 'mobx-react'
 
 import StatusMessage from '../StatusMessage.tsx'
-import ColorSchemeMenu from './ColorSchemeMenu.tsx'
-import FileMenu from './FileMenu.tsx'
-import GappynessSlider from './GappynessSlider.tsx'
-import GoToBox from './GoToBox.tsx'
 import HeaderInfoArea from './HeaderInfoArea.tsx'
+import HiddenColumnsChip from './HiddenColumnsChip.tsx'
 import LoadWarnings from './LoadWarnings.tsx'
-import MSASettingsMenu from './MSASettingsMenu.tsx'
+import MenuBar from './MenuBar.tsx'
 import MultiAlignmentSelector from './MultiAlignmentSelector.tsx'
+import ScrollZoomCheckbox from './ScrollZoomCheckbox.tsx'
 import SelectionMenu from './SelectionMenu.tsx'
-import TreeSettingsMenu from './TreeSettingsMenu.tsx'
 import UnshareableDataWarning from './UnshareableDataWarning.tsx'
 import ZoomControls from './ZoomControls.tsx'
-import ZoomMenu from './ZoomMenu.tsx'
 
 import type { MsaViewModel } from '../../model.ts'
 
-const AboutDialog = lazy(() => import('../dialogs/AboutDialog.tsx'))
+export interface ToolbarSlots {
+  toolbarStart?: React.ReactNode
+  toolbarEnd?: React.ReactNode
+}
 
-const Header = observer(function ({ model }: { model: MsaViewModel }) {
+const Header = observer(function ({
+  model,
+  toolbarStart,
+  toolbarEnd,
+}: { model: MsaViewModel } & ToolbarSlots) {
   const [ref, { height }] = useMeasure()
   useEffect(() => {
     model.setHeaderHeight(height ?? 0)
@@ -36,38 +39,66 @@ const Header = observer(function ({ model }: { model: MsaViewModel }) {
     [model],
   )
   return (
-    <div ref={ref} style={{ display: 'flex', flexWrap: 'wrap' }}>
-      <FileMenu model={model} />
-      <ColorSchemeMenu model={model} />
-      <TreeSettingsMenu model={model} />
-      <MSASettingsMenu model={model} />
-      <ZoomControls model={model} />
-      <ZoomMenu model={model} />
-      <GappynessSlider model={model} />
-      <GoToBox model={model} />
-      <div style={{ paddingLeft: 20, margin: 'auto' }}>
-        <MultiAlignmentSelector model={model} />
-      </div>
-      {/* zero flex-basis, so what appears here on a selection or a hover
-      shrinks into the header's spare width and never wraps it */}
-      <div style={{ flex: '1 1 0', minWidth: 0, display: 'flex' }}>
-        <SelectionMenu model={model} />
-        <HeaderInfoArea model={model} />
-      </div>
-      <LoadWarnings model={model} />
-      <UnshareableDataWarning model={model} />
-      <StatusMessage model={model} variant="header" />
-      <Tooltip title="About">
-        <IconButton
-          aria-label="About"
-          onClick={() => {
-            model.queueDialog(onClose => [AboutDialog, { onClose }])
-          }}
-        >
-          <Help />
-        </IconButton>
-      </Tooltip>
-    </div>
+    <AppBar
+      ref={ref}
+      position="static"
+      color="default"
+      elevation={0}
+      sx={{ borderBottom: 1, borderColor: 'divider' }}
+    >
+      <Toolbar
+        variant="dense"
+        disableGutters
+        sx={{ minHeight: 40, flexWrap: 'wrap', px: 0.5 }}
+      >
+        {toolbarStart}
+        <MenuBar model={model} />
+        {model.embeddedMode ? (
+          <Tooltip title="Settings">
+            <IconButton
+              data-testid="settings_button"
+              aria-label="Settings"
+              color={model.settingsOpen ? 'primary' : 'inherit'}
+              onClick={() => {
+                model.setSettingsOpen(!model.settingsOpen)
+              }}
+            >
+              <Tune />
+            </IconButton>
+          </Tooltip>
+        ) : (
+          <Button
+            data-testid="settings_button"
+            size="small"
+            startIcon={<Tune />}
+            color={model.settingsOpen ? 'primary' : 'inherit'}
+            variant={model.settingsOpen ? 'outlined' : 'text'}
+            onClick={() => {
+              model.setSettingsOpen(!model.settingsOpen)
+            }}
+            sx={{ mx: 0.5, flexShrink: 0 }}
+          >
+            Settings
+          </Button>
+        )}
+        <ZoomControls model={model} />
+        <ScrollZoomCheckbox model={model} />
+        <HiddenColumnsChip model={model} />
+        <div style={{ paddingLeft: 20, margin: 'auto' }}>
+          <MultiAlignmentSelector model={model} />
+        </div>
+        {/* zero flex-basis, so what appears here on a selection or a hover
+            shrinks into the header's spare width and never wraps it */}
+        <div style={{ flex: '1 1 0', minWidth: 0, display: 'flex' }}>
+          <SelectionMenu model={model} />
+          <HeaderInfoArea model={model} />
+        </div>
+        <LoadWarnings model={model} />
+        <UnshareableDataWarning model={model} />
+        <StatusMessage model={model} variant="header" />
+        {toolbarEnd}
+      </Toolbar>
+    </AppBar>
   )
 })
 

package/src/components/header/HiddenColumnsChip.tsx

@@ -0,0 +1,39 @@
+import React, { lazy } from 'react'
+
+import { Chip, Tooltip } from '@mui/material'
+import { observer } from 'mobx-react'
+
+import type { MsaViewModel } from '../../model.ts'
+
+const GapThresholdDialog = lazy(
+  () => import('../dialogs/GapThresholdDialog.tsx'),
+)
+
+const HiddenColumnsChip = observer(function ({
+  model,
+}: {
+  model: MsaViewModel
+}) {
+  const n = model.blanks.length
+  return n > 0 ? (
+    <Tooltip
+      title={`Hiding columns with ≥${model.allowedGappyness}% gaps. Click to change the threshold, × to show every column`}
+    >
+      <Chip
+        data-testid="hidden_columns_chip"
+        size="small"
+        variant="outlined"
+        label={`${n.toLocaleString('en-US')} gappy column${n === 1 ? '' : 's'} hidden`}
+        style={{ margin: 'auto 8px', flexShrink: 0 }}
+        onClick={() => {
+          model.queueDialog(onClose => [GapThresholdDialog, { model, onClose }])
+        }}
+        onDelete={() => {
+          model.setHideGaps(false)
+        }}
+      />
+    </Tooltip>
+  ) : null
+})
+
+export default HiddenColumnsChip

package/src/components/header/MenuBar.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
+import Build from '@mui/icons-material/Build'
+import Help from '@mui/icons-material/Help'
+import InsertDriveFile from '@mui/icons-material/InsertDriveFile'
+import Visibility from '@mui/icons-material/Visibility'
+import { Tooltip } from '@mui/material'
+import { observer } from 'mobx-react'
+
+import {
+  fileMenuItems,
+  helpMenuItems,
+  toolsMenuItems,
+  viewMenuItems,
+} from './menuBarItems.ts'
+
+import type { MsaViewModel } from '../../model.ts'
+import type { MenuItem } from '@jbrowse/core/ui/Menu'
+import type { SxProps, Theme } from '@mui/material'
+
+// CascadingMenuButton renders an IconButton on every core a host may ship, so
+// these styles give it the look of a small text Button
+const menuButtonSx: SxProps<Theme> = {
+  borderRadius: 1,
+  typography: 'button',
+  color: 'text.primary',
+  px: 1,
+  py: 0.5,
+}
+
+const menus: [string, (model: MsaViewModel) => MenuItem[], React.ReactNode][] =
+  [
+    ['File', fileMenuItems, <InsertDriveFile key="file" />],
+    ['View', viewMenuItems, <Visibility key="view" />],
+    ['Tools', toolsMenuItems, <Build key="tools" />],
+    ['Help', helpMenuItems, <Help key="help" />],
+  ]
+
+const MenuBar = observer(function ({ model }: { model: MsaViewModel }) {
+  const { embeddedMode } = model
+  return menus.map(([name, items, icon]) => {
+    const button = (
+      <CascadingMenuButton
+        key={name}
+        data-testid={`${name.toLowerCase()}_menu`}
+        aria-label={name}
+        menuItems={items(model)}
+        sx={menuButtonSx}
+      >
+        {embeddedMode ? icon : name}
+      </CascadingMenuButton>
+    )
+    return embeddedMode ? (
+      <Tooltip key={name} title={name}>
+        {button}
+      </Tooltip>
+    ) : (
+      button
+    )
+  })
+})
+
+export default MenuBar

package/src/components/header/ScrollZoomCheckbox.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+
+import { Checkbox, FormControlLabel, Tooltip } from '@mui/material'
+import { observer } from 'mobx-react'
+
+import type { MsaViewModel } from '../../model.ts'
+
+// the label and the control jbrowse-components' ScrollZoomToggle uses, kept
+// local because a host's older core lacks that export
+export const scrollZoomLabel = 'Zoom on scroll'
+
+const scrollZoomHelp =
+  'The mouse wheel zooms the alignment instead of scrolling it; shift+scroll still scrolls. ctrl+scroll (⌘+scroll on a Mac) zooms either way.'
+
+const ScrollZoomCheckbox = observer(function ({
+  model,
+}: {
+  model: MsaViewModel
+}) {
+  return (
+    <Tooltip title={scrollZoomHelp} describeChild>
+      <FormControlLabel
+        data-testid="scroll-zoom-toggle"
+        style={{
+          marginLeft: 4,
+          marginRight: model.embeddedMode ? 0 : 8,
+          whiteSpace: 'nowrap',
+        }}
+        control={
+          <Checkbox
+            size="small"
+            checked={model.scrollZoom}
+            onChange={() => {
+              model.setScrollZoom(!model.scrollZoom)
+            }}
+            style={{ padding: 6 }}
+          />
+        }
+        label={model.embeddedMode ? '' : scrollZoomLabel}
+        slotProps={{ typography: { variant: 'body2' } }}
+      />
+    </Tooltip>
+  )
+})
+
+export default ScrollZoomCheckbox

package/src/components/header/ZoomControls.tsx

@@ -1,67 +1,19 @@
 import React from 'react'
 
-import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
+import FitScreen from '@mui/icons-material/FitScreen'
+import RestartAlt from '@mui/icons-material/RestartAlt'
 import ZoomIn from '@mui/icons-material/ZoomIn'
 import ZoomOut from '@mui/icons-material/ZoomOut'
 import { IconButton, Tooltip } from '@mui/material'
 import { observer } from 'mobx-react'
 
-import {
-  MouseScroll,
-  MouseZoomBoth,
-  MouseZoomHorizontal,
-  MouseZoomVertical,
-} from './ScrollZoomIcons.tsx'
-
-import type { ScrollZoomAxis } from '../../constants.ts'
 import type { MsaViewModel } from '../../model.ts'
 
-interface WheelMode {
-  label: string
-  // undefined is the wheel scrolling the alignment, which is the default
-  axis?: ScrollZoomAxis
-  Icon: typeof MouseScroll
-  helpText?: string
-}
-
-const scrollMode: WheelMode = {
-  label: 'Scrolls the alignment',
-  Icon: MouseScroll,
-  helpText: 'Ctrl+wheel zooms both axes at the cursor.',
-}
-
-const wheelModes: WheelMode[] = [
-  scrollMode,
-  {
-    label: 'Zooms both axes',
-    axis: 'both',
-    Icon: MouseZoomBoth,
-    helpText: 'Hold shift to pan while the wheel zooms.',
-  },
-  {
-    label: 'Zooms columns only',
-    axis: 'horizontal',
-    Icon: MouseZoomHorizontal,
-    helpText:
-      'Holds the row height, so the labels and letters stay at their size while the alignment compresses.',
-  },
-  {
-    label: 'Zooms rows only',
-    axis: 'vertical',
-    Icon: MouseZoomVertical,
-    helpText:
-      'Holds the column width, so the alignment stays as wide while the rows grow or shrink.',
-  },
-]
-
 const ZoomControls = observer(function ZoomControls({
   model,
 }: {
   model: MsaViewModel
 }) {
-  const { scrollZoom, scrollZoomAxis } = model
-  const activeAxis = scrollZoom ? scrollZoomAxis : undefined
-  const current = wheelModes.find(m => m.axis === activeAxis) ?? scrollMode
   return (
     <>
       <Tooltip title="Zoom in">
@@ -84,31 +36,28 @@ const ZoomControls = observer(function ZoomControls({
           <ZoomOut />
         </IconButton>
       </Tooltip>
-      <CascadingMenuButton
-        data-testid="scroll_zoom_menu"
-        tooltip={`Mouse wheel: ${current.label.toLowerCase()} (ctrl+wheel always zooms)`}
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
-        transformOrigin={{ vertical: 'top', horizontal: 'left' }}
-        menuItems={[
-          { type: 'subHeader', label: 'Mouse wheel' },
-          ...wheelModes.map(({ label, axis, Icon, helpText }) => ({
-            label,
-            icon: Icon,
-            helpText,
-            type: 'radio' as const,
-            checked: current.label === label,
-            onClick: () => {
-              model.setScrollZoom(axis !== undefined)
-              if (axis !== undefined) {
-                model.setScrollZoomAxis(axis)
-              }
-            },
-          })),
-        ]}
-      >
-        <current.Icon />
-      </CascadingMenuButton>
+      <Tooltip title="Fit the whole alignment in the window">
+        <IconButton
+          aria-label="Fit to window"
+          onClick={() => {
+            model.fit()
+          }}
+        >
+          <FitScreen />
+        </IconButton>
+      </Tooltip>
+      <Tooltip title="Reset zoom to the default cell size (0)">
+        <IconButton
+          aria-label="Reset zoom"
+          onClick={() => {
+            model.resetZoom()
+          }}
+        >
+          <RestartAlt />
+        </IconButton>
+      </Tooltip>
     </>
   )
 })
+
 export default ZoomControls