react-msaview 9.0.0 → 9.1.1

package/src/components/header/FileMenu.tsx

@@ -1,81 +0,0 @@
-import React, { lazy } from 'react'
-
-import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
-import AccountTree from '@mui/icons-material/AccountTree'
-import Assignment from '@mui/icons-material/Assignment'
-import FolderOpen from '@mui/icons-material/FolderOpen'
-import Menu from '@mui/icons-material/Menu'
-import PhotoCamera from '@mui/icons-material/PhotoCamera'
-import { observer } from 'mobx-react'
-
-import { getAnnotationsMenu } from './getAnnotationsMenu.ts'
-
-import type { MsaViewModel } from '../../model.ts'
-
-const MetadataDialog = lazy(() => import('../dialogs/MetadataDialog.tsx'))
-const ExportSVGDialog = lazy(() => import('../dialogs/ExportSVGDialog.tsx'))
-
-const FileMenu = observer(({ model }: { model: MsaViewModel }) => {
-  return (
-    <CascadingMenuButton
-      data-testid="file_menu"
-      tooltip="File"
-      menuItems={[
-        {
-          label: 'Return to import form',
-          icon: FolderOpen,
-          onClick: () => {
-            model.reset()
-          },
-        },
-        {
-          label: 'Metadata',
-          icon: Assignment,
-          onClick: () => {
-            model.queueDialog(onClose => [
-              MetadataDialog,
-              {
-                model,
-                onClose,
-              },
-            ])
-          },
-        },
-        {
-          label: 'Annotations',
-          type: 'subMenu',
-          subMenu: getAnnotationsMenu({
-            model,
-          }),
-        },
-        {
-          label: 'Export tree (Newick)',
-          icon: AccountTree,
-          disabled: !!model.tree.noTree,
-          onClick: () => {
-            model.exportNewick()
-          },
-        },
-        {
-          label: 'Export SVG',
-          icon: PhotoCamera,
-          onClick: () => {
-            model.queueDialog(onClose => [
-              ExportSVGDialog,
-              {
-                onClose,
-                model,
-              },
-            ])
-          },
-        },
-      ]}
-      anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
-      transformOrigin={{ vertical: 'top', horizontal: 'left' }}
-    >
-      <Menu />
-    </CascadingMenuButton>
-  )
-})
-
-export default FileMenu

package/src/components/header/MSASettingsMenu.tsx

@@ -1,26 +0,0 @@
-import React from 'react'
-
-import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
-import Tune from '@mui/icons-material/Tune'
-import { observer } from 'mobx-react'
-
-import { msaSettingsMenuItems } from './settingsMenuItems.ts'
-
-import type { MsaViewModel } from '../../model.ts'
-
-const MSASettingsMenu = observer(function ({ model }: { model: MsaViewModel }) {
-  return (
-    <CascadingMenuButton
-      data-testid="msa_settings_menu"
-      tooltip="Alignment settings"
-      closeAfterItemClick={false}
-      anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
-      transformOrigin={{ vertical: 'top', horizontal: 'left' }}
-      menuItems={msaSettingsMenuItems(model)}
-    >
-      <Tune />
-    </CascadingMenuButton>
-  )
-})
-
-export default MSASettingsMenu

package/src/components/header/ScrollZoomIcons.tsx

@@ -1,52 +0,0 @@
-import React from 'react'
-
-import SvgIcon from '@mui/material/SvgIcon'
-
-import type { SvgIconProps } from '@mui/material/SvgIcon'
-
-// Mouse glyphs with outward arrows on the axes a wheel zoom scales.
-// @mui/icons-material ships only the plain `Mouse`, and three variants that
-// differ only in their arrows have to share one body to stay apart at 24px.
-// The body's inner subpath runs the opposite sweep, which punches the hole the
-// wheel bar sits in.
-const BODY =
-  'M12 5a4 4 0 0 0-4 4v6a4 4 0 0 0 8 0V9a4 4 0 0 0-4-4zm0 2a2 2 0 0 1 2 2v6a2 2 0 0 1-4 0V9a2 2 0 0 1 2-2z'
-const WHEEL = 'M11.2 8.6h1.6v3.2h-1.6z'
-const LEFT = 'M.4 12 5 15V9z'
-const RIGHT = 'M23.6 12 19 9v6z'
-const UP = 'M12 .4 15 4H9z'
-const DOWN = 'M12 23.6 9 20h6z'
-
-function MouseZoom({
-  arrows,
-  ...rest
-}: SvgIconProps & { arrows: readonly string[] }) {
-  return (
-    <SvgIcon {...rest}>
-      <path d={BODY} />
-      <path d={WHEEL} />
-      {arrows.map(d => (
-        <path key={d} d={d} />
-      ))}
-    </SvgIcon>
-  )
-}
-
-// the bare body, for a wheel that scrolls. @mui/icons-material's own `Mouse` is
-// a solid silhouette, which would jump to a different drawing when the menu
-// changes the mode.
-export function MouseScroll(props: SvgIconProps) {
-  return <MouseZoom {...props} arrows={[]} />
-}
-
-export function MouseZoomBoth(props: SvgIconProps) {
-  return <MouseZoom {...props} arrows={[LEFT, RIGHT, UP, DOWN]} />
-}
-
-export function MouseZoomHorizontal(props: SvgIconProps) {
-  return <MouseZoom {...props} arrows={[LEFT, RIGHT]} />
-}
-
-export function MouseZoomVertical(props: SvgIconProps) {
-  return <MouseZoom {...props} arrows={[UP, DOWN]} />
-}

package/src/components/header/TreeSettingsMenu.tsx

@@ -1,60 +0,0 @@
-import React from 'react'
-
-import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
-import AccountTree from '@mui/icons-material/AccountTree'
-import { observer } from 'mobx-react'
-
-import { maxNeighborJoiningRows } from '../../constants.ts'
-import { treeSettingsMenuItems } from './settingsMenuItems.ts'
-
-import type { MsaViewModel } from '../../model.ts'
-
-const TreeSettingsMenu = observer(function ({
-  model,
-}: {
-  model: MsaViewModel
-}) {
-  const { rows } = model
-  const tooManyRows = rows.length > maxNeighborJoiningRows
-  return (
-    <CascadingMenuButton
-      data-testid="tree_settings_menu"
-      tooltip="Tree settings"
-      closeAfterItemClick={false}
-      anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
-      transformOrigin={{ vertical: 'top', horizontal: 'left' }}
-      menuItems={[
-        ...treeSettingsMenuItems(model),
-        ...(rows.length >= 2
-          ? [
-              {
-                label: 'Advanced',
-                type: 'subMenu' as const,
-                subMenu: [
-                  {
-                    // the label shows the cap before a click would freeze the tab
-                    label: tooManyRows
-                      ? `Calculate neighbor joining tree (over ${maxNeighborJoiningRows} rows, use FastTree)`
-                      : 'Calculate neighbor joining tree (BLOSUM62)',
-                    disabled: tooManyRows,
-                    onClick: () => {
-                      try {
-                        model.calculateNeighborJoiningTreeFromMSA()
-                      } catch (e) {
-                        console.error('Failed to calculate NJ tree:', e)
-                        model.setError(e)
-                      }
-                    },
-                  },
-                ],
-              },
-            ]
-          : []),
-      ]}
-    >
-      <AccountTree />
-    </CascadingMenuButton>
-  )
-})
-
-export default TreeSettingsMenu

package/src/components/header/ZoomMenu.tsx

@@ -1,48 +0,0 @@
-import React from 'react'
-
-import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
-import MoreVert from '@mui/icons-material/MoreVert'
-import RestartAlt from '@mui/icons-material/RestartAlt'
-import { observer } from 'mobx-react'
-
-import type { MsaViewModel } from '../../model.ts'
-
-const ZoomMenu = observer(function ({ model }: { model: MsaViewModel }) {
-  return (
-    <CascadingMenuButton
-      tooltip="Fit / zoom options"
-      menuItems={[
-        {
-          label: 'Fit both vertically/horizontally',
-          onClick: () => {
-            model.fit()
-          },
-        },
-        {
-          label: 'Fit vertically',
-          onClick: () => {
-            model.fitVertically()
-          },
-        },
-        {
-          label: 'Fit horizontally',
-          onClick: () => {
-            model.fitHorizontally()
-          },
-        },
-
-        {
-          label: 'Reset zoom to default',
-          icon: RestartAlt,
-          onClick: () => {
-            model.resetZoom()
-          },
-        },
-      ]}
-    >
-      <MoreVert />
-    </CascadingMenuButton>
-  )
-})
-
-export default ZoomMenu

package/src/components/header/settingsMenuItems.ts

@@ -1,157 +0,0 @@
-import { treeOrders } from '../../constants.ts'
-
-import type { MsaViewModel } from '../../model.ts'
-import type { TreeOrder } from '../../types.ts'
-import type { MenuItem } from '@jbrowse/core/ui/Menu'
-
-function radio(label: string, checked: boolean, onClick: () => void) {
-  return { label, type: 'radio' as const, checked, onClick }
-}
-
-const treeOrderLabels: Record<TreeOrder, string> = {
-  branchLength: 'By branch length',
-  input: 'As written',
-  ladderize: 'Ladderize, small clades first',
-  ladderizeReverse: 'Ladderize, large clades first',
-}
-
-function outgroupLabel(outgroup: string[]) {
-  const [first, ...rest] = outgroup
-  return rest.length === 0
-    ? `Outgroup ${first}`
-    : `Outgroup ${first} … ${rest.at(-1)}`
-}
-
-function toggle(label: string, checked: boolean, set: (arg: boolean) => void) {
-  return {
-    label,
-    type: 'checkbox' as const,
-    checked,
-    onClick: () => {
-      set(!checked)
-    },
-  }
-}
-
-// the only place in the UI to turn a hidden track back on
-function tracksSubMenu(model: MsaViewModel): MenuItem[] {
-  const shown = new Set(model.turnedOnTracks.map(t => t.model.id))
-  return model.tracks.map(({ model: { id, name } }) =>
-    toggle(name, shown.has(id), () => {
-      model.toggleTrack(id)
-    }),
-  )
-}
-
-export function msaSettingsMenuItems(model: MsaViewModel): MenuItem[] {
-  const { drawMsaLetters, hideGaps, bgColor, showColumnStats } = model
-  return [
-    {
-      label: 'Tracks',
-      type: 'subMenu' as const,
-      subMenu: tracksSubMenu(model),
-    },
-    { type: 'divider' as const },
-    toggle('Show track values on hover', showColumnStats, arg => {
-      model.setShowColumnStats(arg)
-    }),
-    toggle('Draw letters', drawMsaLetters, arg => {
-      model.setDrawMsaLetters(arg)
-    }),
-    // inverted: bgColor colors the tile, and off colors the letter
-    toggle('Color letters, not cells', !bgColor, arg => {
-      model.setBgColor(!arg)
-    }),
-    toggle('Hide gappy columns', hideGaps, arg => {
-      model.setHideGaps(arg)
-    }),
-  ]
-}
-
-export function treeSettingsMenuItems(model: MsaViewModel): MenuItem[] {
-  const {
-    drawTree,
-    showBranchLen,
-    labelsAlignRight,
-    drawNodeBubbles,
-    drawNodeLabels,
-    drawLabels,
-    treeAreaWidth,
-    showTreeOverview,
-    treeOrder,
-    treeRoot,
-    rotated,
-  } = model
-  return [
-    {
-      label: 'Order',
-      type: 'subMenu' as const,
-      subMenu: [
-        ...treeOrders.map(order =>
-          radio(treeOrderLabels[order], treeOrder === order, () => {
-            model.setTreeOrder(order)
-          }),
-        ),
-        { type: 'divider' as const },
-        {
-          label: 'Undo rotations',
-          disabled: rotated.length === 0,
-          onClick: () => {
-            model.clearRotated()
-          },
-        },
-      ],
-    },
-    {
-      label: 'Root',
-      type: 'subMenu' as const,
-      subMenu: [
-        radio('As written', treeRoot === undefined, () => {
-          model.setTreeRoot(undefined)
-        }),
-        radio('Midpoint', treeRoot === 'midpoint', () => {
-          model.setTreeRoot('midpoint')
-        }),
-        // "Reroot here" in a node's menu sets the outgroup, so this only
-        // reports it
-        ...(typeof treeRoot === 'object'
-          ? [
-              {
-                ...radio(outgroupLabel(treeRoot.outgroup), true, () => {}),
-                disabled: true,
-              },
-            ]
-          : []),
-      ],
-    },
-    { type: 'divider' as const },
-    toggle('Show branch length', showBranchLen, arg => {
-      model.setShowBranchLen(arg)
-    }),
-    toggle('Show tree', drawTree, arg => {
-      model.setDrawTree(arg)
-    }),
-    toggle('Draw bubbles on tree branches', drawNodeBubbles, arg => {
-      model.setDrawNodeBubbles(arg)
-    }),
-    toggle('Draw internal node labels', drawNodeLabels, arg => {
-      model.setDrawNodeLabels(arg)
-    }),
-    toggle('Show tree overview', showTreeOverview, arg => {
-      model.setShowTreeOverview(arg)
-    }),
-    toggle('Tree labels align right', labelsAlignRight, arg => {
-      model.setLabelsAlignRight(arg)
-    }),
-    toggle('Draw labels', drawLabels, arg => {
-      model.setDrawLabels(arg)
-    }),
-    toggle(
-      'Fit tree area to labels and tree',
-      treeAreaWidth === undefined,
-      arg => {
-        model.setTreeAreaWidth(arg ? undefined : model.effectiveTreeAreaWidth)
-      },
-    ),
-  ]
-}