diff --git a/packages/core/ui/CascadingMenu.tsx b/packages/core/ui/CascadingMenu.tsx index 27107a430b..e7a8541cd7 100644 --- a/packages/core/ui/CascadingMenu.tsx +++ b/packages/core/ui/CascadingMenu.tsx @@ -20,16 +20,11 @@ import { } from 'material-ui-popup-state/hooks' import HoverMenu from 'material-ui-popup-state/HoverMenu' import ChevronRight from '@mui/icons-material/ChevronRight' -import { useDebounce } from '../util' -interface ContextType { - parentPopupState: PopupState | null - rootPopupState: PopupState | null -} -const CascadingContext = React.createContext({ +const CascadingContext = React.createContext({ parentPopupState: null, rootPopupState: null, -}) +} as { parentPopupState: PopupState | null; rootPopupState: PopupState | null }) function CascadingMenuItem({ onClick, @@ -70,6 +65,7 @@ function CascadingSubmenu({ title: React.ReactNode onMenuItemClick: Function Icon: React.ComponentType | undefined + inset: boolean menuItems: JBMenuItem[] popupId: string @@ -80,16 +76,6 @@ function CascadingSubmenu({ variant: 'popover', parentPopupState, }) - - // avoid the submenu closing instantly after mouse out - const isOpenDebounce = useDebounce(popupState.isOpen, 400) - - // ternary reasoning: if the popup is toggled to false, is the debounce, - // otherwise it is true, and then don't debounce it (which would delay e.g. - // opening a menu from scratch) - const isOpenDebounceEffective = - // eslint-disable-next-line unicorn/prefer-logical-operator-over-ternary - !popupState.isOpen ? isOpenDebounce : popupState.isOpen return ( <> @@ -103,18 +89,9 @@ function CascadingSubmenu({ ) @@ -201,6 +178,12 @@ function CascadingMenuList({ closeAfterItemClick: boolean onMenuItemClick: Function }) { + function handleClick(callback: Function) { + return (event: React.MouseEvent) => { + onMenuItemClick(event, callback) + } + } + const hasIcon = menuItems.some(m => 'icon' in m && m.icon) return ( <> @@ -238,10 +221,7 @@ function CascadingMenuList({ key={`${item.label}-${idx}`} closeAfterItemClick={closeAfterItemClick} onClick={ - 'onClick' in item - ? (event: React.MouseEvent) => - onMenuItemClick(event, item.onClick) - : undefined + 'onClick' in item ? handleClick(item.onClick) : undefined } disabled={Boolean(item.disabled)} > diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/TrackLabel.tsx b/plugins/linear-genome-view/src/LinearGenomeView/components/TrackLabel.tsx index 13f3cbde28..7efe400d0d 100644 --- a/plugins/linear-genome-view/src/LinearGenomeView/components/TrackLabel.tsx +++ b/plugins/linear-genome-view/src/LinearGenomeView/components/TrackLabel.tsx @@ -24,7 +24,6 @@ import TrackLabelDragHandle from './TrackLabelDragHandle' const useStyles = makeStyles()(theme => ({ root: { - zIndex: 1000, background: alpha(theme.palette.background.paper, 0.8), '&:hover': { background: theme.palette.background.paper, @@ -52,7 +51,66 @@ const TrackLabel = observer( ) { const { classes, cx } = useStyles() const view = getContainingView(track) as LGV + const session = getSession(track) + const trackConf = track.configuration + const minimized = track.minimized const trackId = getConf(track, 'trackId') + const trackName = getTrackName(trackConf, session) + const items = [ + { + label: 'Track order', + type: 'subMenu', + priority: 2000, + subMenu: [ + { + label: minimized ? 'Restore track' : 'Minimize track', + icon: minimized ? AddIcon : MinimizeIcon, + onClick: () => { + track.setMinimized(!minimized) + }, + }, + ...(view.tracks.length > 2 + ? [ + { + label: 'Move track to top', + icon: KeyboardDoubleArrowUpIcon, + onClick: () => { + view.moveTrackToTop(track.id) + }, + }, + ] + : []), + + { + label: 'Move track up', + icon: KeyboardArrowUpIcon, + onClick: () => { + view.moveTrackUp(track.id) + }, + }, + { + label: 'Move track down', + icon: KeyboardArrowDownIcon, + onClick: () => { + view.moveTrackDown(track.id) + }, + }, + ...(view.tracks.length > 2 + ? [ + { + label: 'Move track to bottom', + icon: KeyboardDoubleArrowDownIcon, + onClick: () => { + view.moveTrackToBottom(track.id) + }, + }, + ] + : []), + ], + }, + ...(session.getTrackActionMenuItems?.(trackConf) || []), + ...track.trackMenuItems(), + ].sort((a, b) => (b?.priority || 0) - (a?.priority || 0)) return ( @@ -64,113 +122,29 @@ const TrackLabel = observer( > - - + + { + // avoid becoming a click-and-drag action on the lgv + event.stopPropagation() + }} + > + !!f) + .join(' ')} + /> + + + + + ) }), ) -const TrackLabelTypography = observer(function ({ - track, -}: { - track: BaseTrackModel -}) { - const { classes } = useStyles() - const session = getSession(track) - const trackConf = track.configuration - const minimized = track.minimized - const trackName = getTrackName(trackConf, session) - return ( - { - // avoid becoming a click-and-drag action on the lgv - event.stopPropagation() - }} - > - !!f) - .join(' ')} - /> - - ) -}) - -const TrackLabelMenu = observer(function ({ - track, -}: { - track: BaseTrackModel -}) { - const view = getContainingView(track) as LGV - const session = getSession(track) - const minimized = track.minimized - const trackConf = track.configuration - return ( - { - track.setMinimized(!minimized) - }, - }, - ...(view.tracks.length > 2 - ? [ - { - label: 'Move track to top', - icon: KeyboardDoubleArrowUpIcon, - onClick: () => { - view.moveTrackToTop(track.id) - }, - }, - ] - : []), - - { - label: 'Move track up', - icon: KeyboardArrowUpIcon, - onClick: () => { - view.moveTrackUp(track.id) - }, - }, - { - label: 'Move track down', - icon: KeyboardArrowDownIcon, - onClick: () => { - view.moveTrackDown(track.id) - }, - }, - ...(view.tracks.length > 2 - ? [ - { - label: 'Move track to bottom', - icon: KeyboardDoubleArrowDownIcon, - onClick: () => { - view.moveTrackToBottom(track.id) - }, - }, - ] - : []), - ], - }, - ...(session.getTrackActionMenuItems?.(trackConf) || []), - ...track.trackMenuItems(), - ].sort((a, b) => (b?.priority || 0) - (a?.priority || 0))} - data-testid="track_menu_icon" - > - - - ) -}) - export default TrackLabel 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 b50ba83a17..a01864d2ec 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 @@ -422,7 +422,7 @@ exports[`renders one track, one region 1`] = ` class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded css-8osoox-MuiPaper-root-root" >
renders successfully 1`] = ` class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded css-8osoox-MuiPaper-root-root" >