react-msaview 9.1.0 → 9.2.0

package/src/components/header/Header.tsx

@@ -1,29 +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 type { MsaViewModel } from '../../model.ts'
 
-const HelpDialog = lazy(() => import('../dialogs/HelpDialog.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)
@@ -35,37 +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} />
-      <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="Mouse & keyboard help">
-        <IconButton
-          aria-label="Mouse & keyboard help"
-          onClick={() => {
-            model.queueDialog(onClose => [HelpDialog, { model, 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,6 +1,5 @@
 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'
@@ -37,40 +36,26 @@ const ZoomControls = observer(function ZoomControls({
           <ZoomOut />
         </IconButton>
       </Tooltip>
-      <CascadingMenuButton
-        data-testid="fit_menu"
-        tooltip="Fit or reset zoom"
-        menuItems={[
-          {
-            label: 'Fit to window',
-            onClick: () => {
-              model.fit()
-            },
-          },
-          {
-            label: 'Fit horizontally',
-            onClick: () => {
-              model.fitHorizontally()
-            },
-          },
-          {
-            label: 'Fit vertically',
-            onClick: () => {
-              model.fitVertically()
-            },
-          },
-          { type: 'divider' },
-          {
-            label: 'Reset zoom',
-            icon: RestartAlt,
-            onClick: () => {
-              model.resetZoom()
-            },
-          },
-        ]}
-      >
-        <FitScreen />
-      </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>
     </>
   )
 })

package/src/components/header/colorSchemeMenuItems.ts

@@ -0,0 +1,121 @@
+import type { MsaViewModel } from '../../model.ts'
+import type { MenuItem } from '@jbrowse/core/ui/Menu'
+
+type Alphabet = 'any' | 'nucleotide' | 'protein'
+
+interface SchemeEntry {
+  name: string
+  label: string
+  alphabet: Alphabet
+  // shown at the top level for its alphabet, the rest under More schemes
+  featured?: boolean
+}
+
+const schemes: SchemeEntry[] = [
+  { name: 'maeditor', label: 'MAEditor', alphabet: 'protein', featured: true },
+  {
+    name: 'clustalx_protein',
+    label: 'Clustal X',
+    alphabet: 'protein',
+    featured: true,
+  },
+  {
+    name: 'clustalx_protein_dynamic',
+    label: 'Clustal X, by column conservation',
+    alphabet: 'protein',
+    featured: true,
+  },
+  {
+    name: 'blosum62_dynamic',
+    label: 'BLOSUM62 similarity',
+    alphabet: 'protein',
+    featured: true,
+  },
+  {
+    name: 'jalview_hydrophobicity',
+    label: 'Hydrophobicity',
+    alphabet: 'protein',
+    featured: true,
+  },
+  {
+    name: 'nucleotide',
+    label: 'Nucleotide',
+    alphabet: 'nucleotide',
+    featured: true,
+  },
+  {
+    name: 'rainbow_dna',
+    label: 'Rainbow',
+    alphabet: 'nucleotide',
+    featured: true,
+  },
+  {
+    name: 'percent_identity_dynamic',
+    label: 'Percent identity',
+    alphabet: 'any',
+    featured: true,
+  },
+  { name: 'none', label: 'None', alphabet: 'any', featured: true },
+  { name: 'clustal', label: 'Clustal', alphabet: 'protein' },
+  { name: 'lesk', label: 'Lesk', alphabet: 'protein' },
+  { name: 'flower', label: 'Flower', alphabet: 'protein' },
+  { name: 'cinema', label: 'Cinema', alphabet: 'protein' },
+  { name: 'jalview_zappo', label: 'Zappo', alphabet: 'protein' },
+  { name: 'jalview_taylor', label: 'Taylor', alphabet: 'protein' },
+  { name: 'jalview_buried', label: 'Buried index', alphabet: 'protein' },
+  { name: 'jalview_prophelix', label: 'Helix propensity', alphabet: 'protein' },
+  {
+    name: 'jalview_propstrand',
+    label: 'Strand propensity',
+    alphabet: 'protein',
+  },
+  { name: 'jalview_propturn', label: 'Turn propensity', alphabet: 'protein' },
+  { name: 'clustalx_dna', label: 'Clustal X (DNA)', alphabet: 'nucleotide' },
+  { name: 'jbrowse_dna', label: 'JBrowse (DNA)', alphabet: 'nucleotide' },
+]
+
+export const catalogedSchemeNames = schemes.map(s => s.name)
+
+// 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. The
+// active scheme always shows at the top level.
+export function colorSchemeMenuItems(model: MsaViewModel): MenuItem[] {
+  const { colorSchemeName, customColorScheme, sequenceType } = model
+  const alphabet = sequenceType === 'amino' ? 'protein' : 'nucleotide'
+  function radio(entry: SchemeEntry) {
+    return {
+      label: entry.label,
+      type: 'radio',
+      checked: !customColorScheme && colorSchemeName === entry.name,
+      onClick: () => {
+        model.setColorSchemeName(entry.name)
+        // a scheme picked while the domains fill the cells would color
+        // nothing, so the pick hands the cells back to the residues
+        if (model.cellFill === 'domain') {
+          model.setCellFill('residue')
+        }
+      },
+    } as const
+  }
+  const top = (e: SchemeEntry) =>
+    (e.featured && (e.alphabet === 'any' || e.alphabet === alphabet)) ||
+    (!customColorScheme && e.name === colorSchemeName)
+  return [
+    ...(customColorScheme
+      ? [
+          {
+            label: 'Custom',
+            type: 'radio',
+            checked: true,
+            onClick: () => {},
+          } as const,
+        ]
+      : []),
+    ...schemes.filter(top).map(radio),
+    {
+      label: 'More schemes',
+      type: 'subMenu',
+      subMenu: schemes.filter(e => !top(e)).map(radio),
+    },
+  ]
+}

package/src/components/header/getAnnotationsMenu.ts

@@ -1,80 +1,76 @@
 import { lazy } from 'react'
 
-import FilterAlt from '@mui/icons-material/FilterAlt'
-import FolderOpen from '@mui/icons-material/FolderOpen'
-import MenuBook from '@mui/icons-material/MenuBook'
-import Sort from '@mui/icons-material/Sort'
-import Visibility from '@mui/icons-material/Visibility'
-
 import type { MsaViewModel } from '../../model.ts'
+import type { MenuItem } from '@jbrowse/core/ui/Menu'
 
 const FeatureFilterDialog = lazy(() => import('../dialogs/FeatureDialog.tsx'))
 const AnnotationFileDialog = lazy(
   () => import('../dialogs/AnnotationFileDialog.tsx'),
 )
 
-const domainsTutorial = 'https://gmod.org/JBrowseMSA/tutorials/protein_family'
+export function openAnnotationFileItem(model: MsaViewModel): MenuItem {
+  return {
+    label: 'Open annotation file…',
+    onClick: () => {
+      model.queueDialog(handleClose => [
+        AnnotationFileDialog,
+        { handleClose, model },
+      ])
+    },
+  }
+}
 
-export function getAnnotationsMenu({ model }: { model: MsaViewModel }) {
-  const { showDomains, actuallyShowDomains, subFeatureRows, noDomains } = model
-  const noneLoaded = noDomains ? ' (none loaded)' : ''
+export function annotationsSubMenu(model: MsaViewModel): MenuItem[] {
+  const { showDomains, actuallyShowDomains, subFeatureRows } = model
   return [
     {
-      label: 'Open annotation file...',
-      icon: FolderOpen,
-      onClick: () => {
-        model.queueDialog(handleClose => [
-          AnnotationFileDialog,
-          {
-            handleClose,
-            model,
-          },
-        ])
-      },
-    },
-    // `react-msaview-cli interpro` reads InterPro's precomputed matches in
-    // seconds, and `interproscan` covers rows InterPro has not seen; this links
-    // the tutorial for both
-    {
-      label: 'How to get a domain file...',
-      icon: MenuBook,
-      onClick: () => {
-        window.open(domainsTutorial, '_blank', 'noopener,noreferrer')
-      },
-    },
-    {
-      label: `Show annotations${noneLoaded}`,
-      disabled: noDomains,
-      icon: Visibility,
+      label: 'Show annotations',
+      type: 'checkbox',
       checked: actuallyShowDomains,
-      type: 'checkbox' as const,
       onClick: () => {
         model.setShowDomains(!showDomains)
       },
     },
     {
-      label: `Use sub-row layout${noneLoaded}`,
-      disabled: noDomains,
-      checked: actuallyShowDomains ? subFeatureRows : false,
-      icon: Sort,
-      type: 'checkbox' as const,
+      label: 'Sub-row layout',
+      type: 'checkbox',
+      disabled: !actuallyShowDomains,
+      checked: actuallyShowDomains && subFeatureRows,
       onClick: () => {
         model.setSubFeatureRows(!subFeatureRows)
       },
     },
-    {
-      label: `Filter annotations${noneLoaded}`,
-      icon: FilterAlt,
-      disabled: noDomains,
-      onClick: () => {
-        model.queueDialog(onClose => [
-          FeatureFilterDialog,
-          {
-            onClose,
-            model,
-          },
-        ])
-      },
-    },
+    ...typeItems(model),
   ]
 }
+
+// up to this many types list inline, one checkbox each; past it the filter
+// dialog, which searches and counts them, takes over
+const inlineTypes = 12
+
+function typeItems(model: MsaViewModel): MenuItem[] {
+  const types = [...model.annotationTypes.values()]
+  return types.length <= inlineTypes
+    ? [
+        { type: 'subHeader', label: 'Types' },
+        ...types.map(({ accession, name }) => ({
+          label: name || accession,
+          type: 'checkbox' as const,
+          checked: !model.featureOff(accession),
+          onClick: () => {
+            model.setFilter(accession, model.featureOff(accession))
+          },
+        })),
+      ]
+    : [
+        {
+          label: 'Filter annotations…',
+          onClick: () => {
+            model.queueDialog(onClose => [
+              FeatureFilterDialog,
+              { onClose, model },
+            ])
+          },
+        },
+      ]
+}