Skip to content

Commit

Permalink
Make embedded viewmenu use cascadingmenu
Browse files Browse the repository at this point in the history
  • Loading branch information
@cmdcolin
cmdcolin committed Sep 3, 2024
1 parent c5de565 commit c819741
Show file tree
Hide file tree
Showing 14 changed files with 962 additions and 973 deletions.
38 changes: 19 additions & 19 deletions packages/core/BaseFeatureWidget/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,31 +3,31 @@
exports[`open up a widget 1`] = `
<div>
<div
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiAccordion-root MuiAccordion-rounded Mui-expanded css-fgq1ej-MuiPaper-root-MuiAccordion-root"
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiAccordion-root MuiAccordion-rounded Mui-expanded css-fgq1ej-MuiPaper-root-MuiAccordion-root"
style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
>
<h3
class="MuiAccordion-heading css-rolk5j-MuiAccordion-heading"
class="MuiAccordion-heading css-rolk5j-MuiAccordion-heading"
>
<div
aria-expanded="true"
class="MuiButtonBase-root MuiAccordionSummary-root Mui-expanded css-1yigmdy-MuiButtonBase-root-MuiAccordionSummary-root"
class="MuiButtonBase-root MuiAccordionSummary-root Mui-expanded css-1yigmdy-MuiButtonBase-root-MuiAccordionSummary-root"
role="button"
tabindex="0"
>
<div
class="MuiAccordionSummary-content Mui-expanded css-1rhnrrr-MuiAccordionSummary-content"
class="MuiAccordionSummary-content Mui-expanded css-1rhnrrr-MuiAccordionSummary-content"
>
<span
class="MuiTypography-root MuiTypography-button css-xin9dq-MuiTypography-root"
class="MuiTypography-root MuiTypography-button css-xin9dq-MuiTypography-root"
/>
</div>
<div
class="MuiAccordionSummary-expandIconWrapper Mui-expanded css-yw020d-MuiAccordionSummary-expandIconWrapper"
class="MuiAccordionSummary-expandIconWrapper Mui-expanded css-yw020d-MuiAccordionSummary-expandIconWrapper"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1u842hp-MuiSvgIcon-root-icon"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1u842hp-MuiSvgIcon-root-icon"
data-testid="ExpandMoreIcon"
focusable="false"
viewBox="0 0 24 24"
Expand All @@ -40,24 +40,24 @@ exports[`open up a widget 1`] = `
</div>
</h3>
<div
class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-entered css-wz2cs5-MuiCollapse-root"
class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-entered css-wz2cs5-MuiCollapse-root"
style="min-height: 0px;"
>
<div
class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
>
<div
class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
>
<div
class="MuiAccordion-region"
class="MuiAccordion-region "
role="region"
>
<div
class="MuiAccordionDetails-root css-mz6w4y-MuiAccordionDetails-root-expansionPanelDetails"
class="MuiAccordionDetails-root css-mz6w4y-MuiAccordionDetails-root-expansionPanelDetails"
>
<p
class="MuiTypography-root MuiTypography-body1 css-1ptewxf-MuiTypography-root"
class="MuiTypography-root MuiTypography-body1 css-1ptewxf-MuiTypography-root"
>
Core details
</p>
Expand Down Expand Up @@ -92,10 +92,10 @@ exports[`open up a widget 1`] = `
</div>
</div>
<hr
class="MuiDivider-root MuiDivider-fullWidth css-9mgopn-MuiDivider-root"
class="MuiDivider-root MuiDivider-fullWidth css-9mgopn-MuiDivider-root"
/>
<p
class="MuiTypography-root MuiTypography-body1 css-1ptewxf-MuiTypography-root"
class="MuiTypography-root MuiTypography-body1 css-1ptewxf-MuiTypography-root"
>
Attributes
</p>
Expand All @@ -120,24 +120,24 @@ exports[`open up a widget 1`] = `
class="css-57ilie-container"
>
<div
class="MuiFormControl-root MuiFormControl-marginDense css-1pquc22-MuiFormControl-root-formControl"
class="MuiFormControl-root MuiFormControl-marginDense css-1pquc22-MuiFormControl-root-formControl"
>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorPrimary css-qy5lo8-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorPrimary css-qy5lo8-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
Show feature sequence
</button>
</div>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-16y463b-MuiButtonBase-root-MuiIconButton-root"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-16y463b-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-l9ansn-MuiSvgIcon-root"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-l9ansn-MuiSvgIcon-root"
data-testid="HelpIcon"
focusable="false"
viewBox="0 0 24 24"
Expand Down
33 changes: 16 additions & 17 deletions packages/embedded-core/src/ui/ViewMenu.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState } from 'react'
import React from 'react'
import {
IconButton,
IconButtonProps as IconButtonPropsType,
Expand All @@ -7,7 +7,12 @@ import {
import MenuIcon from '@mui/icons-material/Menu'
import { observer } from 'mobx-react'
import { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes/models/BaseViewModel'
import { Menu } from '@jbrowse/core/ui'
import { CascadingMenu } from '@jbrowse/core/ui'
import {
bindTrigger,
bindPopover,
usePopupState,
} from 'material-ui-popup-state/hooks'

const ViewMenu = observer(function ({
model,
Expand All @@ -18,32 +23,26 @@ const ViewMenu = observer(function ({
IconButtonProps: IconButtonPropsType
IconProps: SvgIconProps
}) {
const [anchorEl, setAnchorEl] = useState<HTMLElement>()
const popupState = usePopupState({
popupId: 'viewMenu',
variant: 'popover',
})
return (
<>
<IconButton
{...IconButtonProps}
aria-label="more"
aria-controls="view-menu"
aria-haspopup="true"
onClick={event => {
setAnchorEl(event.currentTarget)
}}
{...bindTrigger(popupState)}
data-testid="view_menu_icon"
>
<MenuIcon {...IconProps} />
</IconButton>
<Menu
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onMenuItemClick={(_, callback) => {
<CascadingMenu
{...bindPopover(popupState)}
onMenuItemClick={(_event: unknown, callback: () => void) => {
callback()
setAnchorEl(undefined)
}}
onClose={() => {
setAnchorEl(undefined)
}}
menuItems={model.menuItems()}
popupState={popupState}
/>
</>
)
Expand Down
40 changes: 20 additions & 20 deletions plugins/alignments/src/AlignmentsFeatureDetail/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,38 +3,38 @@
exports[`open up a widget 1`] = `
<div>
<div
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 css-1dtoofl-MuiPaper-root"
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 css-1dtoofl-MuiPaper-root"
data-testid="alignment-side-drawer"
style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
>
<div
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiAccordion-root MuiAccordion-rounded Mui-expanded css-fgq1ej-MuiPaper-root-MuiAccordion-root"
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiAccordion-root MuiAccordion-rounded Mui-expanded css-fgq1ej-MuiPaper-root-MuiAccordion-root"
style="--Paper-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);"
>
<h3
class="MuiAccordion-heading css-rolk5j-MuiAccordion-heading"
class="MuiAccordion-heading css-rolk5j-MuiAccordion-heading"
>
<div
aria-expanded="true"
class="MuiButtonBase-root MuiAccordionSummary-root Mui-expanded css-1yigmdy-MuiButtonBase-root-MuiAccordionSummary-root"
class="MuiButtonBase-root MuiAccordionSummary-root Mui-expanded css-1yigmdy-MuiButtonBase-root-MuiAccordionSummary-root"
role="button"
tabindex="0"
>
<div
class="MuiAccordionSummary-content Mui-expanded css-1rhnrrr-MuiAccordionSummary-content"
class="MuiAccordionSummary-content Mui-expanded css-1rhnrrr-MuiAccordionSummary-content"
>
<span
class="MuiTypography-root MuiTypography-button css-xin9dq-MuiTypography-root"
class="MuiTypography-root MuiTypography-button css-xin9dq-MuiTypography-root"
>
ctgA_3_555_0:0:0_2:0... - match
</span>
</div>
<div
class="MuiAccordionSummary-expandIconWrapper Mui-expanded css-yw020d-MuiAccordionSummary-expandIconWrapper"
class="MuiAccordionSummary-expandIconWrapper Mui-expanded css-yw020d-MuiAccordionSummary-expandIconWrapper"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1u842hp-MuiSvgIcon-root-icon"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1u842hp-MuiSvgIcon-root-icon"
data-testid="ExpandMoreIcon"
focusable="false"
viewBox="0 0 24 24"
Expand All @@ -47,24 +47,24 @@ exports[`open up a widget 1`] = `
</div>
</h3>
<div
class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-entered css-wz2cs5-MuiCollapse-root"
class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-entered css-wz2cs5-MuiCollapse-root"
style="min-height: 0px;"
>
<div
class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
>
<div
class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
>
<div
class="MuiAccordion-region"
class="MuiAccordion-region "
role="region"
>
<div
class="MuiAccordionDetails-root css-mz6w4y-MuiAccordionDetails-root-expansionPanelDetails"
class="MuiAccordionDetails-root css-mz6w4y-MuiAccordionDetails-root-expansionPanelDetails"
>
<p
class="MuiTypography-root MuiTypography-body1 css-1ptewxf-MuiTypography-root"
class="MuiTypography-root MuiTypography-body1 css-1ptewxf-MuiTypography-root"
>
Core details
</p>
Expand Down Expand Up @@ -131,10 +131,10 @@ exports[`open up a widget 1`] = `
</div>
</div>
<hr
class="MuiDivider-root MuiDivider-fullWidth css-9mgopn-MuiDivider-root"
class="MuiDivider-root MuiDivider-fullWidth css-9mgopn-MuiDivider-root"
/>
<p
class="MuiTypography-root MuiTypography-body1 css-1ptewxf-MuiTypography-root"
class="MuiTypography-root MuiTypography-body1 css-1ptewxf-MuiTypography-root"
>
Attributes
</p>
Expand Down Expand Up @@ -289,24 +289,24 @@ exports[`open up a widget 1`] = `
class="css-57ilie-container"
>
<div
class="MuiFormControl-root MuiFormControl-marginDense css-1pquc22-MuiFormControl-root-formControl"
class="MuiFormControl-root MuiFormControl-marginDense css-1pquc22-MuiFormControl-root-formControl"
>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorPrimary css-qy5lo8-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorPrimary css-qy5lo8-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
Show feature sequence
</button>
</div>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-16y463b-MuiButtonBase-root-MuiIconButton-root"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-16y463b-MuiButtonBase-root-MuiIconButton-root"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-l9ansn-MuiSvgIcon-root"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-l9ansn-MuiSvgIcon-root"
data-testid="HelpIcon"
focusable="false"
viewBox="0 0 24 24"
Expand Down
Loading

0 comments on commit c819741

Please sign in to comment.