Adds "Favorites" and "Recently used" track categories to the track selector

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

@@ -159,6 +159,18 @@ const HamburgerMenu = observer(function ({
             label: 'Expand all categories',
             onClick: () => model.expandAllCategories(),
           },
+          {
+            label: 'Show favorite tracks',
+            type: 'checkbox',
+            checked: model.showFavoritesCategory,
+            onClick: () => model.toggleFavoritesCategory(),
+          },
+          {
+            label: 'Show recently used tracks',
+            type: 'checkbox',
+            checked: model.showRecentlyUsedCategory,
+            onClick: () => model.toggleRecentlyUsedCategory(),
+          },
         ]}
       >
         <MenuIcon />

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

@@ -13,7 +13,7 @@ function getNodeData(
   extra: Record<string, unknown>,
   selection: Record<string, unknown>,
 ) {
-  const isLeaf = !!node.conf
+  const isLeaf = 'conf' in node && !!node.conf
   const selected = !!selection[node.id]
   return {
     data: {

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

@@ -35,7 +35,7 @@ export default function Category({
 }) {
   const { classes } = useStyles()
   const [menuEl, setMenuEl] = useState<HTMLElement | null>(null)
-  const { name, model, id, tree, toggleCollapse } = data
+  const { menuItems, name, model, id, tree, toggleCollapse } = data
 
   return (
     <div
@@ -83,7 +83,7 @@ export default function Category({
               onClick: () => {
                 for (const entry of treeToMap(tree).get(id)?.children || []) {
                   if (!entry.children.length) {
-                    model.view.showTrack(entry.id)
+                    model.view.showTrack(entry.trackId)
                   }
                 }
               },
@@ -93,11 +93,12 @@ export default function Category({
               onClick: () => {
                 for (const entry of treeToMap(tree).get(id)?.children || []) {
                   if (!entry.children.length) {
-                    model.view.hideTrack(entry.id)
+                    model.view.hideTrack(entry.trackId)
                   }
                 }
               },
             },
+            ...menuItems,
           ]}
           onMenuItemClick={(_event, callback) => {
             callback()

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

@@ -10,6 +10,8 @@ import {
 
 // icons
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz'
+import StarIcon from '@mui/icons-material/StarBorderOutlined'
+import FilledStarIcon from '@mui/icons-material/Star'
 
 // locals
 import { isUnsupported, NodeData } from '../util'
@@ -37,8 +39,17 @@ export interface InfoArgs {
 
 export default function TrackLabel({ data }: { data: NodeData }) {
   const { classes } = useStyles()
-  const { checked, conf, model, drawerPosition, id, name, onChange, selected } =
-    data
+  const {
+    checked,
+    conf,
+    model,
+    drawerPosition,
+    id,
+    trackId,
+    name,
+    onChange,
+    selected,
+  } = data
   const description = (conf && readConfObject(conf, ['description'])) || ''
   return (
     <>
@@ -52,7 +63,10 @@ export default function TrackLabel({ data }: { data: NodeData }) {
             <Checkbox
               className={classes.compactCheckbox}
               checked={checked}
-              onChange={() => onChange(id)}
+              onChange={() => {
+                onChange(trackId)
+                model.addToRecentlyUsed(trackId)
+              }}
               disabled={isUnsupported(name)}
               inputProps={{
                 // @ts-expect-error
@@ -92,6 +106,17 @@ function TrackMenuButton({
       data-testid={`htsTrackEntryMenu-${id}`}
       menuItems={[
         ...(getSession(model).getTrackActionMenuItems?.(conf) || []),
+        model.isFavorite(conf)
+          ? {
+              label: 'Remove from favorites',
+              onClick: () => model.removeFromFavorites(conf),
+              icon: StarIcon,
+            }
+          : {
+              label: 'Add to favorites',
+              onClick: () => model.addToFavorites(conf),
+              icon: FilledStarIcon,
+            },
         {
           label: 'Add to selection',
           onClick: () => model.addToSelection([conf]),

plugins/data-management/src/HierarchicalTrackSelectorWidget/components/util.ts

@@ -1,19 +1,22 @@
 import { AnyConfigurationModel } from '@jbrowse/core/configuration'
 import { HierarchicalTrackSelectorModel } from '../model'
 import { TreeNode } from '../generateHierarchy'
+import { MenuItem } from '@jbrowse/core/ui'
 
 export interface NodeData {
   nestingLevel: number
   checked: boolean
   conf: AnyConfigurationModel
   drawerPosition: unknown
   id: string
+  trackId: string
   isLeaf: boolean
   name: string
   onChange: Function
   toggleCollapse: (arg: string) => void
   tree: TreeNode
   selected: boolean
+  menuItems: MenuItem[]
   model: HierarchicalTrackSelectorModel
 }
 

plugins/data-management/src/HierarchicalTrackSelectorWidget/generateHierarchy.ts

@@ -7,6 +7,7 @@ import { getTrackName } from '@jbrowse/core/util/tracks'
 
 // locals
 import { matches } from './util'
+import { MenuItem } from '@jbrowse/core/ui'
 
 function sortConfs(
   confs: AnyConfigurationModel[],
@@ -45,6 +46,7 @@ function sortConfs(
 export interface TreeNode {
   name: string
   id: string
+  trackId?: string
   conf?: AnyConfigurationModel
   checked?: boolean
   isOpenByDefault?: boolean
@@ -55,6 +57,8 @@ export function generateHierarchy({
   model,
   trackConfs,
   extra,
+  noCategories,
+  menuItems,
 }: {
   model: {
     filterText: string
@@ -65,6 +69,8 @@ export function generateHierarchy({
       tracks: { configuration: AnyConfigurationModel }[]
     }
   }
+  noCategories?: boolean
+  menuItems?: MenuItem[]
   trackConfs: AnyConfigurationModel[]
   extra?: string
 }): TreeNode[] {
@@ -100,24 +106,27 @@ export function generateHierarchy({
 
     let currLevel = hierarchy
 
-    // find existing category to put track into or create it
-    for (let i = 0; i < categories.length; i++) {
-      const category = categories[i]
-      const ret = currLevel.children.find(c => c.name === category)
-      const id = [extra, categories.slice(0, i + 1).join(',')]
-        .filter(f => !!f)
-        .join('-')
-      if (!ret) {
-        const n = {
-          children: [],
-          name: category,
-          id,
-          isOpenByDefault: !collapsed.get(id),
+    if (!noCategories) {
+      // find existing category to put track into or create it
+      for (let i = 0; i < categories.length; i++) {
+        const category = categories[i]
+        const ret = currLevel.children.find(c => c.name === category)
+        const id = [extra, categories.slice(0, i + 1).join(',')]
+          .filter(f => !!f)
+          .join('-')
+        if (!ret) {
+          const n = {
+            children: [],
+            name: category,
+            id,
+            isOpenByDefault: !collapsed.get(id),
+            menuItems,
+          }
+          currLevel.children.push(n)
+          currLevel = n
+        } else {
+          currLevel = ret
         }
-        currLevel.children.push(n)
-        currLevel = n
-      } else {
-        currLevel = ret
       }
     }
 
@@ -127,7 +136,8 @@ export function generateHierarchy({
     const r = currLevel.children.findIndex(elt => elt.children.length)
     const idx = r === -1 ? currLevel.children.length : r
     currLevel.children.splice(idx, 0, {
-      id: conf.trackId,
+      id: [extra, conf.trackId].filter(f => !!f).join(','),
+      trackId: conf.trackId,
       name: getTrackName(conf, session),
       conf,
       checked: viewTracks.some(f => f.configuration === conf),