Improve help text on track category dropdown (#5199)

Author: cmdcolin

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>
   )
 }