Skip to content

Commit

Permalink
Revert "Fix view menu going off screen in some cases (#3731)"
Browse files Browse the repository at this point in the history
This reverts commit f3e2223.
  • Loading branch information
cmdcolin committed Dec 9, 2023
1 parent 1365d96 commit 8d09a56
Show file tree
Hide file tree
Showing 5 changed files with 80 additions and 31 deletions.
35 changes: 27 additions & 8 deletions packages/app-core/src/ui/App/ViewMenu.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import React from 'react'
import React, { useState } from 'react'
import {
SvgIconProps,
IconButton,
IconButtonProps as IconButtonPropsType,
} from '@mui/material'
import { observer } from 'mobx-react'
import { AbstractSessionModel, getSession } from '@jbrowse/core/util'
import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
import Menu from '@jbrowse/core/ui/Menu'
import { getSession } from '@jbrowse/core/util'
import { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes/models'

// icons
Expand All @@ -15,12 +16,14 @@ import ArrowUpward from '@mui/icons-material/ArrowUpward'

const ViewMenu = observer(function ({
model,
IconButtonProps,
IconProps,
}: {
model: IBaseViewModel
IconButtonProps?: IconButtonPropsType
IconProps: SvgIconProps
}) {
const [anchorEl, setAnchorEl] = useState<HTMLElement>()
const { menuItems } = model
const session = getSession(model) as AbstractSessionModel & {
moveViewDown: (arg: string) => void
Expand All @@ -47,10 +50,26 @@ const ViewMenu = observer(function ({
...((typeof menuItems === 'function' ? menuItems() : menuItems) || []),
]

return items.length ? (
<CascadingMenuButton menuItems={items} data-testid="view_menu_icon">
<MenuIcon {...IconProps} fontSize="small" />
</CascadingMenuButton>
) : null
return (
<>
<IconButton
{...IconButtonProps}
onClick={event => setAnchorEl(event.currentTarget)}
data-testid="view_menu_icon"
>
<MenuIcon {...IconProps} fontSize="small" />
</IconButton>
<Menu
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onMenuItemClick={(_event, callback) => {
callback()
setAnchorEl(undefined)
}}
onClose={() => setAnchorEl(undefined)}
menuItems={items}
/>
</>
)
})
export default ViewMenu
46 changes: 35 additions & 11 deletions packages/embedded-core/src/ui/ViewMenu.tsx
Original file line number Diff line number Diff line change
@@ -1,29 +1,53 @@
import React from 'react'
import React, { useState } from 'react'
import {
IconButton,
IconButtonProps as IconButtonPropsType,
SvgIconProps,
} from '@mui/material'
import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
import MenuIcon from '@mui/icons-material/Menu'
import { observer } from 'mobx-react'
import { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes/models/BaseViewModel'

// icons
import MenuIcon from '@mui/icons-material/Menu'
import { Menu } from '@jbrowse/core/ui'

const ViewMenu = observer(function ({
model,
IconButtonProps,
IconProps,
}: {
model: IBaseViewModel
IconButtonProps: IconButtonPropsType
IconProps: SvgIconProps
}) {
const items = model.menuItems()
return items.length ? (
<CascadingMenuButton menuItems={items} data-testid="view_menu_icon">
<MenuIcon {...IconProps} />
</CascadingMenuButton>
) : null
const [anchorEl, setAnchorEl] = useState<HTMLElement>()

if (!model.menuItems()?.length) {
return null
}

return (
<>
<IconButton
{...IconButtonProps}
aria-label="more"
aria-controls="view-menu"
aria-haspopup="true"
onClick={event => setAnchorEl(event.currentTarget)}
data-testid="view_menu_icon"
>
<MenuIcon {...IconProps} />
</IconButton>
<Menu
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onMenuItemClick={(_, callback) => {
callback()
setAnchorEl(undefined)
}}
onClose={() => setAnchorEl(undefined)}
menuItems={model.menuItems()}
/>
</>
)
})

export default ViewMenu
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@
exports[`renders one track, one region 1`] = `
<div>
<div
class="css-1v4ghfe-rel"
style="position: relative;"
>
<div>
<div
class="css-1v4ghfe-rel"
style="position: relative;"
>
<div
class="css-dznme2-rubberbandControl"
Expand Down Expand Up @@ -176,7 +176,7 @@ exports[`renders one track, one region 1`] = `
autocapitalize="none"
autocomplete="off"
class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-19qh8xo-MuiInputBase-input-MuiOutlinedInput-input"
id=":r7:"
id="mui-7"
placeholder="Search for location"
role="combobox"
spellcheck="false"
Expand Down Expand Up @@ -483,6 +483,7 @@ exports[`renders one track, one region 1`] = `
</span>
</span>
<button
aria-haspopup="true"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
data-testid="track_menu_icon"
tabindex="0"
Expand Down Expand Up @@ -560,11 +561,11 @@ exports[`renders one track, one region 1`] = `
exports[`renders two tracks, two regions 1`] = `
<div>
<div
class="css-1v4ghfe-rel"
style="position: relative;"
>
<div>
<div
class="css-1v4ghfe-rel"
style="position: relative;"
>
<div
class="css-dznme2-rubberbandControl"
Expand Down Expand Up @@ -749,7 +750,7 @@ exports[`renders two tracks, two regions 1`] = `
autocapitalize="none"
autocomplete="off"
class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-19qh8xo-MuiInputBase-input-MuiOutlinedInput-input"
id=":ra:"
id="mui-9"
placeholder="Search for location"
role="combobox"
spellcheck="false"
Expand Down Expand Up @@ -1301,6 +1302,7 @@ exports[`renders two tracks, two regions 1`] = `
</span>
</span>
<button
aria-haspopup="true"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
data-testid="track_menu_icon"
tabindex="0"
Expand Down Expand Up @@ -1432,6 +1434,7 @@ exports[`renders two tracks, two regions 1`] = `
</span>
</span>
<button
aria-haspopup="true"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
data-testid="track_menu_icon"
tabindex="0"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,10 @@ exports[`<JBrowseCircularGenomeView /> 1`] = `
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation12 css-tgvt3g-MuiPaper-root-viewContainer"
>
<div
class="css-10rokvf-container"
style="display: flex;"
>
<button
aria-haspopup="true"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-9vna8i-MuiButtonBase-root-MuiIconButton-root"
data-testid="view_menu_icon"
tabindex="0"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,10 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation12 css-tgvt3g-MuiPaper-root-viewContainer"
>
<div
class="css-10rokvf-container"
style="display: flex;"
>
<button
aria-haspopup="true"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-9vna8i-MuiButtonBase-root-MuiIconButton-root"
data-testid="view_menu_icon"
tabindex="0"
Expand Down Expand Up @@ -83,11 +84,11 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 css-1ps6pg7-MuiPaper-root"
>
<div
class="css-1v4ghfe-rel"
style="position: relative;"
>
<div>
<div
class="css-1v4ghfe-rel"
style="position: relative;"
>
<div
class="css-dznme2-rubberbandControl"
Expand Down Expand Up @@ -262,7 +263,7 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
autocapitalize="none"
autocomplete="off"
class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-19qh8xo-MuiInputBase-input-MuiOutlinedInput-input"
id=":r0:"
id="mui-2"
placeholder="Search for location"
role="combobox"
spellcheck="false"
Expand Down Expand Up @@ -923,7 +924,7 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded css-dewezf-MuiPaper-root-root"
>
<div
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 css-80j8um-MuiPaper-root-trackLabel-trackLabelOffset-root"
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 css-lv7b0o-MuiPaper-root-trackLabel-trackLabelOverlap-root"
>
<span
class="css-k4omgw-dragHandle"
Expand Down Expand Up @@ -971,6 +972,7 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
</span>
</span>
<button
aria-haspopup="true"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-9vna8i-MuiButtonBase-root-MuiIconButton-root"
data-testid="track_menu_icon"
tabindex="0"
Expand Down

0 comments on commit 8d09a56

Please sign in to comment.