diff --git a/packages/app-core/src/ui/App/ViewMenu.tsx b/packages/app-core/src/ui/App/ViewMenu.tsx index 165497db257..a3f186a7e0b 100644 --- a/packages/app-core/src/ui/App/ViewMenu.tsx +++ b/packages/app-core/src/ui/App/ViewMenu.tsx @@ -1,12 +1,11 @@ -import React, { useState } from 'react' +import React from 'react' import { SvgIconProps, - IconButton, IconButtonProps as IconButtonPropsType, } from '@mui/material' import { observer } from 'mobx-react' -import Menu from '@jbrowse/core/ui/Menu' import { getSession } from '@jbrowse/core/util' +import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton' import { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes/models' // icons @@ -23,7 +22,6 @@ const ViewMenu = observer(function ({ IconButtonProps?: IconButtonPropsType IconProps: SvgIconProps }) { - const [anchorEl, setAnchorEl] = useState() const { menuItems } = model const session = getSession(model) @@ -48,25 +46,9 @@ const ViewMenu = observer(function ({ ] return ( - <> - setAnchorEl(event.currentTarget)} - data-testid="view_menu_icon" - > - - - { - callback() - setAnchorEl(undefined) - }} - onClose={() => setAnchorEl(undefined)} - menuItems={items} - /> - + + + ) }) export default ViewMenu diff --git a/packages/core/ui/CascadingMenuButton.tsx b/packages/core/ui/CascadingMenuButton.tsx new file mode 100644 index 00000000000..c48c1fb1374 --- /dev/null +++ b/packages/core/ui/CascadingMenuButton.tsx @@ -0,0 +1,44 @@ +import React from 'react' +import CascadingMenu from '@jbrowse/core/ui/CascadingMenu' +import { IconButton } from '@mui/material' +import { observer } from 'mobx-react' +import { + bindTrigger, + bindPopover, + usePopupState, +} from 'material-ui-popup-state/hooks' +import { MenuItem } from '@jbrowse/core/ui' + +const CascadingMenuButton = observer(function CascadingMenuButton({ + children, + menuItems, + ...rest +}: { + children?: React.ReactElement + menuItems: MenuItem[] + [key: string]: unknown +}) { + const popupState = usePopupState({ + popupId: 'viewMenu', + variant: 'popover', + }) + return ( + <> + + {children} + + void) => callback()} + menuItems={menuItems} + popupState={popupState} + /> + + ) +}) + +export default CascadingMenuButton diff --git a/packages/embedded-core/src/ui/ViewMenu.tsx b/packages/embedded-core/src/ui/ViewMenu.tsx index ed880700896..00fff3983d0 100644 --- a/packages/embedded-core/src/ui/ViewMenu.tsx +++ b/packages/embedded-core/src/ui/ViewMenu.tsx @@ -1,13 +1,14 @@ -import React, { useState } from 'react' +import React from 'react' import { - IconButton, IconButtonProps as IconButtonPropsType, SvgIconProps, } from '@mui/material' -import MenuIcon from '@mui/icons-material/Menu' +import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton' import { observer } from 'mobx-react' import { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes/models/BaseViewModel' -import { Menu } from '@jbrowse/core/ui' + +// icons +import MenuIcon from '@mui/icons-material/Menu' const ViewMenu = observer(function ({ model, @@ -18,35 +19,11 @@ const ViewMenu = observer(function ({ IconButtonProps: IconButtonPropsType IconProps: SvgIconProps }) { - const [anchorEl, setAnchorEl] = useState() - - if (!model.menuItems()?.length) { - return null - } - + const items = model.menuItems() return ( - <> - setAnchorEl(event.currentTarget)} - data-testid="view_menu_icon" - > - - - { - callback() - setAnchorEl(undefined) - }} - onClose={() => setAnchorEl(undefined)} - menuItems={model.menuItems()} - /> - + + + ) }) diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/MiniControls.tsx b/plugins/linear-genome-view/src/LinearGenomeView/components/MiniControls.tsx index b260184aa52..a53a05569b7 100644 --- a/plugins/linear-genome-view/src/LinearGenomeView/components/MiniControls.tsx +++ b/plugins/linear-genome-view/src/LinearGenomeView/components/MiniControls.tsx @@ -1,7 +1,6 @@ -import React, { useState } from 'react' +import React from 'react' import { observer } from 'mobx-react' import { IconButton, Paper } from '@mui/material' -import Menu from '@jbrowse/core/ui/Menu' // icons import ZoomIn from '@mui/icons-material/ZoomIn' @@ -10,45 +9,41 @@ import ArrowDown from '@mui/icons-material/KeyboardArrowDown' // locals import { LinearGenomeViewModel } from '..' +import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton' -const MiniControls = observer((props: { model: LinearGenomeViewModel }) => { - const { model } = props +const MiniControls = observer(function ({ + model, +}: { + model: LinearGenomeViewModel +}) { const { bpPerPx, maxBpPerPx, minBpPerPx, scaleFactor, hideHeader } = model - const [anchorEl, setAnchorEl] = useState() - return hideHeader ? ( -
- - setAnchorEl(event.currentTarget)}> - - - - model.zoom(bpPerPx * 2)} - disabled={bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1} - > - - - model.zoom(model.bpPerPx / 2)} - disabled={bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1} - > - - - { - callback() - setAnchorEl(undefined) - }} - onClose={() => setAnchorEl(undefined)} - menuItems={model.menuItems()} - /> - -
+ + + + + model.zoom(bpPerPx * 2)} + disabled={bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1} + > + + + model.zoom(model.bpPerPx / 2)} + disabled={bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1} + > + + + ) : null }) diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/TrackLabel.tsx b/plugins/linear-genome-view/src/LinearGenomeView/components/TrackLabel.tsx index 893c68a029c..bfa81223612 100644 --- a/plugins/linear-genome-view/src/LinearGenomeView/components/TrackLabel.tsx +++ b/plugins/linear-genome-view/src/LinearGenomeView/components/TrackLabel.tsx @@ -7,13 +7,7 @@ import { getSession, getContainingView } from '@jbrowse/core/util' import { getTrackName } from '@jbrowse/core/util/tracks' import { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models' import { SanitizedHTML } from '@jbrowse/core/ui' -import CascadingMenu from '@jbrowse/core/ui/CascadingMenu' - -import { - bindTrigger, - bindPopover, - usePopupState, -} from 'material-ui-popup-state/hooks' +import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton' // icons import MoreVertIcon from '@mui/icons-material/MoreVert' @@ -71,12 +65,6 @@ const TrackLabel = React.forwardRef(function ( const minimized = track.minimized const trackId = getConf(track, 'trackId') const trackName = getTrackName(trackConf, session) - - const popupState = usePopupState({ - popupId: 'trackLabelMenu', - variant: 'popover', - }) - const items = [ { label: minimized ? 'Restore track' : 'Minimize track', @@ -119,23 +107,15 @@ const TrackLabel = React.forwardRef(function ( className={classes.trackName} > !!f) + .join(' ')} /> - + + - - callback()} - menuItems={items} - popupState={popupState} - /> + ) }) diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.tsx.snap b/plugins/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.tsx.snap index 79c012e9590..d9a4072ba77 100644 --- a/plugins/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.tsx.snap +++ b/plugins/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.tsx.snap @@ -484,7 +484,7 @@ exports[`renders one track, one region 1`] = `