Wow

Author: cmdcolin

packages/core/ui/CascadingMenu.tsx

@@ -5,9 +5,7 @@ import { createContext, useContext, useMemo, useState } from 'react'
 import ChevronRight from '@mui/icons-material/ChevronRight'
 import HelpOutline from '@mui/icons-material/HelpOutline'
 import {
-  Dialog,
   DialogContent,
-  DialogTitle,
   Divider,
   IconButton,
   ListItemIcon,
@@ -17,6 +15,7 @@ import {
   MenuItem,
 } from '@mui/material'
 
+import Dialog from './Dialog'
 import HoverMenu from './HoverMenu'
 import { MenuItemEndDecoration } from './Menu'
 import { bindFocus, bindHover, bindMenu, usePopupState } from './hooks'
@@ -41,18 +40,29 @@ function HelpIconButton({ helpText }: { helpText: string }) {
     setHelpDialogOpen(true)
   }
 
+  const handleClose = (event: React.MouseEvent | React.KeyboardEvent) => {
+    // Prevent backdrop click from propagating to menu item
+    event.stopPropagation()
+    setHelpDialogOpen(false)
+  }
+
   return (
     <>
       <IconButton
         size="small"
         onClick={handleHelpClick}
-        onMouseDown={e => e.stopPropagation()}
         style={{ marginLeft: 4, padding: 4 }}
       >
         <HelpOutline fontSize="small" />
       </IconButton>
-      <Dialog open={helpDialogOpen} onClose={() => setHelpDialogOpen(false)}>
-        <DialogTitle>Help</DialogTitle>
+      <Dialog
+        open={helpDialogOpen}
+        onClose={handleClose}
+        title="Help"
+        onClick={e => {
+          e.stopPropagation()
+        }}
+      >
         <DialogContent>{helpText}</DialogContent>
       </Dialog>
     </>
@@ -243,9 +253,6 @@ function CascadingMenuList({
   onMenuItemClick: Function
 }) {
   const hasIcon = menuItems.some(m => 'icon' in m && m.icon)
-  const hasCheckboxOrRadio = menuItems.some(
-    m => m.type === 'checkbox' || m.type === 'radio',
-  )
   const hasCheckboxOrRadioWithHelp = menuItems.some(
     m =>
       (m.type === 'checkbox' || m.type === 'radio') &&

plugins/data-management/src/HierarchicalTrackSelectorWidget/components/tree/TrackCategory.tsx

@@ -1,10 +1,10 @@
 import { useState } from 'react'
 
-import JBrowseMenu from '@jbrowse/core/ui/Menu'
+import { CascadingMenuButton } from '@jbrowse/core/ui'
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
 import ArrowRightIcon from '@mui/icons-material/ArrowRight'
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz'
-import { IconButton, Typography } from '@mui/material'
+import { Typography } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
 
 import { getAllChildren, treeToMap } from '../util'
@@ -47,7 +47,7 @@ export default function Category({
   data: NodeData
 }) {
   const { classes } = useStyles()
-  const [menuEl, setMenuEl] = useState<HTMLElement | null>(null)
+  const [menuOpen, setMenuOpen] = useState(false)
   const { menuItems = [], name, model, id, tree } = data
 
   const currentNode = treeToMap(tree).get(id)
@@ -58,7 +58,7 @@ export default function Category({
     <div
       className={classes.accordionText}
       onClick={() => {
-        if (!menuEl) {
+        if (!menuOpen) {
           data.toggleCollapse(id)
           setOpen(!isOpen)
         }
@@ -67,33 +67,25 @@ export default function Category({
       <Typography data-testid={`htsCategory-${name}`}>
         {isOpen ? <ArrowDropDownIcon /> : <ArrowRightIcon />}
         {name}
-        <IconButton
-          onClick={event => {
-            setMenuEl(event.currentTarget)
-            event.stopPropagation()
-          }}
-          className={classes.contrastColor}
-        >
-          <MoreHorizIcon />
-        </IconButton>
-      </Typography>
-      {menuEl ? (
-        <JBrowseMenu
-          anchorEl={menuEl}
+        <CascadingMenuButton
           menuItems={[
             {
               label: 'Add to selection',
               onClick: () => {
                 const r = treeToMap(tree).get(id)
                 model.addToSelection(getAllChildren(r))
               },
+              helpText:
+                'Add all tracks in this category to the current selection. This allows you to perform bulk operations on multiple tracks at once, such as configuring settings or exporting track configurations.',
             },
             {
               label: 'Remove from selection',
               onClick: () => {
                 const r = treeToMap(tree).get(id)
                 model.removeFromSelection(getAllChildren(r))
               },
+              helpText:
+                'Remove all tracks in this category from the current selection. Use this to deselect tracks that were previously added to your selection.',
             },
             {
               label: 'Show all',
@@ -104,6 +96,8 @@ export default function Category({
                   }
                 }
               },
+              helpText:
+                'Display all tracks in this category on the current view. This is useful when you want to visualize multiple related tracks simultaneously to compare their data.',
             },
             {
               label: 'Hide all',
@@ -114,6 +108,8 @@ export default function Category({
                   }
                 }
               },
+              helpText:
+                'Hide all tracks in this category from the current view. This helps declutter your view by removing tracks you are not currently analyzing.',
             },
             ...(hasSubcategories
               ? [
@@ -127,6 +123,8 @@ export default function Category({
                         }
                       }
                     },
+                    helpText:
+                      'Collapse all nested subcategories within this category. This provides a cleaner, more compact view of the track hierarchy by hiding the detailed contents of subcategories.',
                   },
                   {
                     label: 'Expand all subcategories',
@@ -138,21 +136,20 @@ export default function Category({
                         }
                       }
                     },
+                    helpText:
+                      'Expand all nested subcategories within this category. This reveals all tracks and subcategories at once, making it easier to browse and select tracks from the entire hierarchy.',
                   },
                 ]
               : []),
             ...menuItems,
           ]}
-          onMenuItemClick={(_event, callback) => {
-            callback()
-            setMenuEl(null)
-          }}
-          open={Boolean(menuEl)}
-          onClose={() => {
-            setMenuEl(null)
-          }}
-        />
-      ) : null}
+          className={classes.contrastColor}
+          stopPropagation
+          setOpen={setMenuOpen}
+        >
+          <MoreHorizIcon />
+        </CascadingMenuButton>
+      </Typography>
     </div>
   )
 }

plugins/linear-comparative-view/src/LinearSyntenyView/model.ts

@@ -3,8 +3,8 @@ import { lazy } from 'react'
 import { getSession } from '@jbrowse/core/util'
 import CropFreeIcon from '@mui/icons-material/CropFree'
 import LinkIcon from '@mui/icons-material/Link'
-import ShuffleIcon from '@mui/icons-material/Shuffle'
 import PhotoCameraIcon from '@mui/icons-material/PhotoCamera'
+import ShuffleIcon from '@mui/icons-material/Shuffle'
 import VisibilityIcon from '@mui/icons-material/Visibility'
 import { saveAs } from 'file-saver'
 import { observable, transaction } from 'mobx'