Easier usage of CascadingMenu

GMOD · May 29, 2023 · a5d850f · a5d850f
1 parent 527b08e
commit a5d850f
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 130 deletions.
diff --git 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<HTMLElement>()
   const { menuItems } = model
   const session = getSession(model)
 
@@ -48,25 +46,9 @@ const ViewMenu = observer(function ({
   ]
 
   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}
-      />
-    </>
+    <CascadingMenuButton menuItems={items} data-testid="view_menu_icon">
+      <MenuIcon {...IconProps} fontSize="small" />
+    </CascadingMenuButton>
   )
 })
 export default ViewMenu
diff --git a/packages/core/ui/CascadingMenuButton.tsx 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 (
+    <>
+      <IconButton
+        {...bindTrigger(popupState)}
+        {...rest}
+        disabled={menuItems.length === 0}
+      >
+        {children}
+      </IconButton>
+      <CascadingMenu
+        {...bindPopover(popupState)}
+        onMenuItemClick={(_: unknown, callback: () => 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
@@ -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<HTMLElement>()
-
-  if (!model.menuItems()?.length) {
-    return null
-  }
-
+  const items = model.menuItems()
   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()}
-      />
-    </>
+    <CascadingMenuButton menuItems={items} data-testid="view_menu_icon">
+      <MenuIcon {...IconProps} />
+    </CascadingMenuButton>
   )
 })
 

diff --git 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<HTMLElement>()
-
   return hideHeader ? (
-    <div style={{ position: 'absolute', right: '0px', zIndex: '1001' }}>
-      <Paper style={{ background: '#aaa7' }}>
-        <IconButton onClick={event => setAnchorEl(event.currentTarget)}>
-          <ArrowDown fontSize="small" />
-        </IconButton>
-
-        <IconButton
-          data-testid="zoom_out"
-          onClick={() => model.zoom(bpPerPx * 2)}
-          disabled={bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1}
-        >
-          <ZoomOut fontSize="small" />
-        </IconButton>
-        <IconButton
-          data-testid="zoom_in"
-          onClick={() => model.zoom(model.bpPerPx / 2)}
-          disabled={bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1}
-        >
-          <ZoomIn fontSize="small" />
-        </IconButton>
-        <Menu
-          anchorEl={anchorEl}
-          open={Boolean(anchorEl)}
-          onMenuItemClick={(_, callback) => {
-            callback()
-            setAnchorEl(undefined)
-          }}
-          onClose={() => setAnchorEl(undefined)}
-          menuItems={model.menuItems()}
-        />
-      </Paper>
-    </div>
+    <Paper
+      style={{
+        position: 'absolute',
+        right: 0,
+        zIndex: 1001,
+        background: '#aaa7',
+      }}
+    >
+      <CascadingMenuButton menuItems={model.menuItems()}>
+        <ArrowDown fontSize="small" />
+      </CascadingMenuButton>
+      <IconButton
+        data-testid="zoom_out"
+        onClick={() => model.zoom(bpPerPx * 2)}
+        disabled={bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1}
+      >
+        <ZoomOut fontSize="small" />
+      </IconButton>
+      <IconButton
+        data-testid="zoom_in"
+        onClick={() => model.zoom(model.bpPerPx / 2)}
+        disabled={bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1}
+      >
+        <ZoomIn fontSize="small" />
+      </IconButton>
+    </Paper>
   ) : null
 })
 

diff --git 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<HTMLDivElement, Props>(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<HTMLDivElement, Props>(function (
         className={classes.trackName}
       >
         <SanitizedHTML
-          html={`${trackName}${minimized ? ' (minimized)' : ''}`}
+          html={[trackName, minimized ? '(minimized)' : '']
+            .filter(f => !!f)
+            .join(' ')}
         />
       </Typography>
-      <IconButton
-        {...bindTrigger(popupState)}
-        className={classes.iconButton}
-        data-testid="track_menu_icon"
-        disabled={items.length === 0}
-      >
+
+      <CascadingMenuButton menuItems={items} data-testid="track_menu_icon">
         <MoreVertIcon fontSize="small" />
-      </IconButton>
-      <CascadingMenu
-        {...bindPopover(popupState)}
-        onMenuItemClick={(_: unknown, callback: Function) => callback()}
-        menuItems={items}
-        popupState={popupState}
-      />
+      </CascadingMenuButton>
     </Paper>
   )
 })

diff --git a/...-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.tsx.snap b/...-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.tsx.snap
@@ -484,7 +484,7 @@ exports[`renders one track, one region 1`] = `
           </span>
           <button
             aria-haspopup="true"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-15mrns3-MuiButtonBase-root-MuiIconButton-root-iconButton"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
             data-testid="track_menu_icon"
             tabindex="0"
             type="button"
@@ -1303,7 +1303,7 @@ exports[`renders two tracks, two regions 1`] = `
           </span>
           <button
             aria-haspopup="true"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-15mrns3-MuiButtonBase-root-MuiIconButton-root-iconButton"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
             data-testid="track_menu_icon"
             tabindex="0"
             type="button"
@@ -1435,7 +1435,7 @@ exports[`renders two tracks, two regions 1`] = `
           </span>
           <button
             aria-haspopup="true"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-15mrns3-MuiButtonBase-root-MuiIconButton-root-iconButton"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
             data-testid="track_menu_icon"
             tabindex="0"
             type="button"

diff --git a/...-view/src/JBrowseCircularGenomeView/__snapshots__/JBrowseCircularGenomeView.test.tsx.snap b/...-view/src/JBrowseCircularGenomeView/__snapshots__/JBrowseCircularGenomeView.test.tsx.snap
@@ -15,10 +15,8 @@ exports[`<JBrowseCircularGenomeView /> 1`] = `
           style="display: flex;"
         >
           <button
-            aria-controls="view-menu"
             aria-haspopup="true"
-            aria-label="more"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeStart MuiIconButton-sizeSmall css-15c2os-MuiButtonBase-root-MuiIconButton-root-iconRoot"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-9vna8i-MuiButtonBase-root-MuiIconButton-root"
             data-testid="view_menu_icon"
             tabindex="0"
             type="button"

diff --git a/...nome-view/src/JBrowseLinearGenomeView/__snapshots__/JBrowseLinearGenomeView.test.tsx.snap b/...nome-view/src/JBrowseLinearGenomeView/__snapshots__/JBrowseLinearGenomeView.test.tsx.snap
@@ -15,10 +15,8 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
           style="display: flex;"
         >
           <button
-            aria-controls="view-menu"
             aria-haspopup="true"
-            aria-label="more"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeStart MuiIconButton-sizeSmall css-15c2os-MuiButtonBase-root-MuiIconButton-root-iconRoot"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-9vna8i-MuiButtonBase-root-MuiIconButton-root"
             data-testid="view_menu_icon"
             tabindex="0"
             type="button"
@@ -975,7 +973,7 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
                   </span>
                   <button
                     aria-haspopup="true"
-                    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1hm0p9d-MuiButtonBase-root-MuiIconButton-root-iconButton"
+                    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-9vna8i-MuiButtonBase-root-MuiIconButton-root"
                     data-testid="track_menu_icon"
                     tabindex="0"
                     type="button"