react-msaview 9.1.0 → 9.2.0

package/dist/components/header/settingsMenuItems.js

@@ -1,171 +0,0 @@
-import { treeOrders } from '../../constants.js';
-import { MouseScroll, MouseZoomBoth, MouseZoomHorizontal, MouseZoomVertical, } from './ScrollZoomIcons.js';
-function radio(label, checked, onClick) {
-    return { label, type: 'radio', checked, onClick };
-}
-const treeOrderLabels = {
-    branchLength: 'By branch length',
-    input: 'As written',
-    ladderize: 'Ladderize, small clades first',
-    ladderizeReverse: 'Ladderize, large clades first',
-};
-function outgroupLabel(outgroup) {
-    const [first, ...rest] = outgroup;
-    return rest.length === 0
-        ? `Outgroup ${first}`
-        : `Outgroup ${first} … ${rest.at(-1)}`;
-}
-function toggle(label, checked, set) {
-    return {
-        label,
-        type: 'checkbox',
-        checked,
-        onClick: () => {
-            set(!checked);
-        },
-    };
-}
-// the only place in the UI to turn a hidden track back on
-function tracksSubMenu(model) {
-    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);
-    }));
-}
-const wheelModes = [
-    {
-        label: 'Scrolls the alignment',
-        icon: MouseScroll,
-        helpText: 'Ctrl+wheel zooms both axes at the cursor.',
-    },
-    {
-        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.',
-    },
-];
-export function wheelSubMenu(model) {
-    const active = model.scrollZoom ? model.scrollZoomAxis : undefined;
-    return wheelModes.map(({ label, axis, icon, helpText }) => ({
-        ...radio(label, axis === active, () => {
-            model.setScrollZoom(axis !== undefined);
-            if (axis !== undefined) {
-                model.setScrollZoomAxis(axis);
-            }
-        }),
-        icon,
-        helpText,
-    }));
-}
-export function msaSettingsMenuItems(model) {
-    const { drawMsaLetters, hideGaps, bgColor, showColumnStats } = model;
-    return [
-        {
-            label: 'Tracks',
-            type: 'subMenu',
-            subMenu: tracksSubMenu(model),
-        },
-        {
-            label: 'Mouse wheel',
-            type: 'subMenu',
-            subMenu: wheelSubMenu(model),
-        },
-        { type: 'divider' },
-        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) {
-    const { drawTree, showBranchLen, labelsAlignRight, drawNodeBubbles, drawNodeLabels, drawLabels, treeAreaWidth, showTreeOverview, treeOrder, treeRoot, rotated, } = model;
-    return [
-        {
-            label: 'Order',
-            type: 'subMenu',
-            subMenu: [
-                ...treeOrders.map(order => radio(treeOrderLabels[order], treeOrder === order, () => {
-                    model.setTreeOrder(order);
-                })),
-                { type: 'divider' },
-                {
-                    label: 'Undo rotations',
-                    disabled: rotated.length === 0,
-                    onClick: () => {
-                        model.clearRotated();
-                    },
-                },
-            ],
-        },
-        {
-            label: 'Root',
-            type: 'subMenu',
-            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' },
-        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);
-        }),
-    ];
-}
-//# sourceMappingURL=settingsMenuItems.js.map

package/dist/components/header/settingsMenuItems.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"settingsMenuItems.js","sourceRoot":"","sources":["../../../src/components/header/settingsMenuItems.ts"],"names":[],"mappings":"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"}

package/src/components/header/ColorSchemeMenu.tsx

@@ -1,56 +0,0 @@
-import React from 'react'
-
-import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
-import Palette from '@mui/icons-material/Palette'
-import { observer } from 'mobx-react'
-
-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 }) {
-  return (
-    <CascadingMenuButton
-      data-testid="color_scheme_menu"
-      tooltip="Color scheme"
-      closeAfterItemClick
-      anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
-      transformOrigin={{ vertical: 'top', horizontal: 'left' }}
-      menuItems={colorSchemeMenuItems(model)}
-    >
-      <Palette />
-    </CascadingMenuButton>
-  )
-})
-
-export default ColorSchemeMenu

package/src/components/header/FileMenu.tsx

@@ -1,107 +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 { maxNeighborJoiningRows } from '../../constants.ts'
-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'))
-
-function neighborJoiningItem(model: MsaViewModel) {
-  const rows = model.rowMap.size
-  const tooManyRows = rows > maxNeighborJoiningRows
-  return {
-    label: tooManyRows
-      ? `Calculate neighbor joining tree (over ${maxNeighborJoiningRows} rows, use FastTree)`
-      : 'Calculate neighbor joining tree (BLOSUM62)',
-    icon: AccountTree,
-    disabled: tooManyRows || rows < 2,
-    onClick: () => {
-      try {
-        model.calculateNeighborJoiningTreeFromMSA()
-      } catch (e) {
-        console.error('Failed to calculate NJ tree:', e)
-        model.addWarning(e instanceof Error ? e.message : String(e))
-      }
-    },
-  }
-}
-
-const FileMenu = observer(({ model }: { model: MsaViewModel }) => {
-  return (
-    <CascadingMenuButton
-      data-testid="file_menu"
-      tooltip="File"
-      menuItems={[
-        ...(model.importForm
-          ? [
-              {
-                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,
-          }),
-        },
-        neighborJoiningItem(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,30 +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 { treeSettingsMenuItems } from './settingsMenuItems.ts'
-
-import type { MsaViewModel } from '../../model.ts'
-
-const TreeSettingsMenu = observer(function ({
-  model,
-}: {
-  model: MsaViewModel
-}) {
-  return model.noTree ? null : (
-    <CascadingMenuButton
-      data-testid="tree_settings_menu"
-      tooltip="Tree settings"
-      closeAfterItemClick={false}
-      anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
-      transformOrigin={{ vertical: 'top', horizontal: 'left' }}
-      menuItems={treeSettingsMenuItems(model)}
-    >
-      <AccountTree />
-    </CascadingMenuButton>
-  )
-})
-
-export default TreeSettingsMenu

package/src/components/header/settingsMenuItems.ts

@@ -1,216 +0,0 @@
-import { treeOrders } from '../../constants.ts'
-import {
-  MouseScroll,
-  MouseZoomBoth,
-  MouseZoomHorizontal,
-  MouseZoomVertical,
-} from './ScrollZoomIcons.tsx'
-
-import type { ScrollZoomAxis } 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)
-    }),
-  )
-}
-
-const wheelModes: {
-  label: string
-  axis?: ScrollZoomAxis
-  icon: typeof MouseScroll
-  helpText: string
-}[] = [
-  {
-    label: 'Scrolls the alignment',
-    icon: MouseScroll,
-    helpText: 'Ctrl+wheel zooms both axes at the cursor.',
-  },
-  {
-    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.',
-  },
-]
-
-export function wheelSubMenu(model: MsaViewModel): MenuItem[] {
-  const active = model.scrollZoom ? model.scrollZoomAxis : undefined
-  return wheelModes.map(({ label, axis, icon, helpText }) => ({
-    ...radio(label, axis === active, () => {
-      model.setScrollZoom(axis !== undefined)
-      if (axis !== undefined) {
-        model.setScrollZoomAxis(axis)
-      }
-    }),
-    icon,
-    helpText,
-  }))
-}
-
-export function msaSettingsMenuItems(model: MsaViewModel): MenuItem[] {
-  const { drawMsaLetters, hideGaps, bgColor, showColumnStats } = model
-  return [
-    {
-      label: 'Tracks',
-      type: 'subMenu' as const,
-      subMenu: tracksSubMenu(model),
-    },
-    {
-      label: 'Mouse wheel',
-      type: 'subMenu' as const,
-      subMenu: wheelSubMenu(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)
-      },
-    ),
-  ]
-}