@jbrowse/plugin-data-management 2.8.0 → 2.10.0

package/esm/HierarchicalTrackSelectorWidget/components/faceted/FacetedSelector.js

@@ -1,126 +1,50 @@
-import React, { useMemo, useState, useEffect, useReducer } from 'react';
-import { IconButton } from '@mui/material';
+import React from 'react';
 import { transaction } from 'mobx';
 import { observer } from 'mobx-react';
 import { getRoot, resolveIdentifier } from 'mobx-state-tree';
 import { DataGrid, GridToolbar } from '@mui/x-data-grid';
 // jbrowse
-import { getTrackName } from '@jbrowse/core/util/tracks';
 import { ResizeHandle } from '@jbrowse/core/ui';
 import SanitizedHTML from '@jbrowse/core/ui/SanitizedHTML';
-import JBrowseMenu from '@jbrowse/core/ui/Menu';
 import ResizeBar from '@jbrowse/core/ui/ResizeBar';
-import { getEnv, getSession, measureGridWidth, useDebounce, useLocalStorage, } from '@jbrowse/core/util';
-import { readConfObject, } from '@jbrowse/core/configuration';
+import { getEnv, useDebounce } from '@jbrowse/core/util';
 import { useResizeBar } from '@jbrowse/core/ui/useResizeBar';
 import { makeStyles } from 'tss-react/mui';
-// icons
-import MoreHoriz from '@mui/icons-material/MoreHoriz';
-import { matches } from '../../util';
 import FacetedHeader from './FacetedHeader';
 import FacetFilters from './FacetFilters';
-import { getRootKeys } from './util';
-const nonMetadataKeys = ['category', 'adapter', 'description'];
+import TrackLabelMenu from '../tree/TrackLabelMenu';
 const useStyles = makeStyles()({
     cell: {
         whiteSpace: 'nowrap',
         overflow: 'hidden',
         textOverflow: 'ellipsis',
     },
+    resizeHandle: {
+        marginLeft: 5,
+        background: 'grey',
+        width: 5,
+    },
 });
 const frac = 0.75;
 const FacetedSelector = observer(function FacetedSelector({ model, }) {
-    var _a, _b;
+    var _a;
     const { classes } = useStyles();
-    const { view, selection } = model;
+    const { view, selection, faceted } = model;
+    const { rows, panelWidth, showFilters, useShoppingCart, showOptions, filteredRows, filteredNonMetadataKeys, filteredMetadataKeys, visible, widths, } = faceted;
     const { pluginManager } = getEnv(model);
     const { ref, scrollLeft } = useResizeBar();
-    const [filterText, setFilterText] = useState('');
-    const [showOptions, setShowOptions] = useLocalStorage('facet-showTableOptions', false);
-    const [info, setInfo] = useState();
-    const [useShoppingCart, setUseShoppingCart] = useState(false);
-    const [showSparse, setShowSparse] = useLocalStorage('facet-showSparse', false);
-    const [showFilters, setShowFilters] = useLocalStorage('facet-showFilters', true);
-    const [panelWidth, setPanelWidth] = useLocalStorage('facet-panelWidth', 400);
-    const session = getSession(model);
-    const filterDebounced = useDebounce(filterText, 400);
     const tracks = view.tracks;
-    const [filters, dispatch] = useReducer((state, update) => ({ ...state, [update.key]: update.val }), {});
-    const rows = useMemo(() => {
-        // metadata is spread onto the object for easier access and sorting
-        // by the mui data grid (it's unable to sort by nested objects)
-        return model.trackConfigurations
-            .filter(conf => matches(filterDebounced, conf, session))
-            .map(track => {
-            var _a, _b;
-            const metadata = readConfObject(track, 'metadata');
-            return {
-                id: track.trackId,
-                conf: track,
-                name: getTrackName(track, session),
-                category: (_a = readConfObject(track, 'category')) === null || _a === void 0 ? void 0 : _a.join(', '),
-                adapter: (_b = readConfObject(track, 'adapter')) === null || _b === void 0 ? void 0 : _b.type,
-                description: readConfObject(track, 'description'),
-                metadata,
-                ...metadata,
-            };
-        });
-    }, [model, filterDebounced, session]);
-    const filteredNonMetadataKeys = useMemo(() => nonMetadataKeys.filter(f => showSparse ? true : rows.map(r => r[f]).filter(f => !!f).length > 5), [showSparse, rows]);
-    const filteredMetadataKeys = useMemo(() => [...new Set(rows.flatMap(row => getRootKeys(row.metadata)))].filter(f => showSparse
-        ? true
-        : rows.map(r => r.metadata[f]).filter(f => !!f).length > 5), [showSparse, rows]);
-    const fields = useMemo(() => ['name', ...filteredNonMetadataKeys, ...filteredMetadataKeys], [filteredNonMetadataKeys, filteredMetadataKeys]);
-    const [widths, setWidths] = useState({
-        name: measureGridWidth(rows.map(r => r.name), { maxWidth: 500, stripHTML: true }) + 15,
-        ...Object.fromEntries(filteredNonMetadataKeys.map(e => [
-            e,
-            measureGridWidth(rows.map(r => r[e]), { maxWidth: 400, stripHTML: true }),
-        ])),
-        ...Object.fromEntries(filteredMetadataKeys.map(e => [
-            e,
-            measureGridWidth(rows.map(r => r.metadata[e]), { maxWidth: 400, stripHTML: true }),
-        ])),
-    });
-    const [visible, setVisible] = useState(Object.fromEntries(fields.map(c => [c, true])));
-    useEffect(() => {
-        setVisible(visible => ({
-            ...Object.fromEntries(fields.map(c => [c, true])),
-            ...visible,
-        }));
-    }, [fields]);
-    useEffect(() => {
-        setWidths(widths => ({
-            name: widths.name,
-            ...Object.fromEntries(filteredNonMetadataKeys
-                .filter(f => visible[f])
-                .map(e => [
-                e,
-                measureGridWidth(rows.map(r => r[e]), { stripHTML: true, maxWidth: 400 }),
-            ])),
-            ...Object.fromEntries(filteredMetadataKeys
-                .filter(f => visible[f])
-                .map(e => [
-                e,
-                measureGridWidth(rows.map(r => r.metadata[e]), { stripHTML: true, maxWidth: 400 }),
-            ])),
-        }));
-    }, [filteredMetadataKeys, visible, filteredNonMetadataKeys, showSparse, rows]);
     const widthsDebounced = useDebounce(widths, 200);
     const columns = [
         {
             field: 'name',
             hideable: false,
             renderCell: (params) => {
-                const { value, id, row } = params;
+                const { value, row } = params;
+                const { id, conf } = row;
                 return (React.createElement("div", { className: classes.cell },
                     React.createElement(SanitizedHTML, { html: value }),
-                    React.createElement(IconButton, { onClick: e => setInfo({
-                            target: e.currentTarget,
-                            id: id,
-                            conf: row.conf,
-                        }) },
-                        React.createElement(MoreHoriz, null))));
+                    React.createElement(TrackLabelMenu, { id: id, conf: conf, trackId: id, model: model })));
             },
             width: (_a = widthsDebounced.name) !== null && _a !== void 0 ? _a : 100,
         },
@@ -130,34 +54,30 @@ const FacetedSelector = observer(function FacetedSelector({ model, }) {
                 field: e,
                 width: (_a = widthsDebounced[e]) !== null && _a !== void 0 ? _a : 100,
                 renderCell: (params) => {
-                    const { value } = params;
-                    return (React.createElement("div", { className: classes.cell }, value ? React.createElement(SanitizedHTML, { html: value }) : ''));
+                    const val = params.value;
+                    return val ? React.createElement(SanitizedHTML, { className: classes.cell, html: val }) : '';
                 },
             });
         }),
         ...filteredMetadataKeys.map(e => {
             var _a;
             return ({
-                field: e,
-                width: (_a = widthsDebounced[e]) !== null && _a !== void 0 ? _a : 100,
+                field: `metadata.${e}`,
+                headerName: ['name', ...filteredNonMetadataKeys].includes(e)
+                    ? `${e} (from metadata)`
+                    : e,
+                width: (_a = widthsDebounced['metadata.' + e]) !== null && _a !== void 0 ? _a : 100,
+                valueGetter: (params) => params.row.metadata[e],
                 renderCell: (params) => {
-                    const { value } = params;
-                    return (React.createElement("div", { className: classes.cell }, value ? React.createElement(SanitizedHTML, { html: value }) : ''));
+                    const val = params.row.metadata[e];
+                    return val ? React.createElement(SanitizedHTML, { className: classes.cell, html: val }) : '';
                 },
             });
         }),
     ];
     const shownTrackIds = new Set(tracks.map(t => t.configuration.trackId));
-    const arrFilters = Object.entries(filters)
-        .filter(f => f[1].length > 0)
-        .map(([key, val]) => [key, new Set(val)]);
-    const filteredRows = rows.filter(row => arrFilters.every(([key, val]) => val.has(row[key])));
     return (React.createElement(React.Fragment, null,
-        info ? (React.createElement(JBrowseMenu, { anchorEl: info === null || info === void 0 ? void 0 : info.target, menuItems: ((_b = session.getTrackActionMenuItems) === null || _b === void 0 ? void 0 : _b.call(session, info.conf)) || [], onMenuItemClick: (_event, callback) => {
-                callback();
-                setInfo(undefined);
-            }, open: !!info, onClose: () => setInfo(undefined) })) : null,
-        React.createElement(FacetedHeader, { setShowSparse: setShowSparse, setShowFilters: setShowFilters, setShowOptions: setShowOptions, setFilterText: setFilterText, setUseShoppingCart: setUseShoppingCart, showFilters: showFilters, showSparse: showSparse, showOptions: showOptions, filterText: filterText, useShoppingCart: useShoppingCart, model: model }),
+        React.createElement(FacetedHeader, { model: model }),
         React.createElement("div", { ref: ref, style: {
                 display: 'flex',
                 overflow: 'hidden',
@@ -168,11 +88,11 @@ const FacetedSelector = observer(function FacetedSelector({ model, }) {
                     height: window.innerHeight * frac,
                     width: window.innerWidth * frac - (showFilters ? panelWidth : 0),
                 } },
-                React.createElement(ResizeBar, { checkbox: true, widths: Object.values(widths).map(f => f !== null && f !== void 0 ? f : 100), setWidths: newWidths => setWidths(Object.fromEntries(Object.entries(widths).map((entry, idx) => [
+                React.createElement(ResizeBar, { checkbox: true, widths: Object.values(widths).map(f => f !== null && f !== void 0 ? f : 100), setWidths: newWidths => faceted.setWidths(Object.fromEntries(Object.entries(widths).map((entry, idx) => [
                         entry[0],
                         newWidths[idx],
                     ]))), scrollLeft: scrollLeft }),
-                React.createElement(DataGrid, { rows: filteredRows, columnVisibilityModel: visible, onColumnVisibilityModelChange: newModel => setVisible(newModel), columnHeaderHeight: 35, checkboxSelection: true, disableRowSelectionOnClick: true, keepNonExistentRowsSelected: true, onRowSelectionModelChange: userSelectedIds => {
+                React.createElement(DataGrid, { rows: filteredRows, columnVisibilityModel: visible, onColumnVisibilityModelChange: n => faceted.setVisible(n), columnHeaderHeight: 35, checkboxSelection: true, disableRowSelectionOnClick: true, keepNonExistentRowsSelected: true, onRowSelectionModelChange: userSelectedIds => {
                         if (!useShoppingCart) {
                             const a1 = shownTrackIds;
                             const a2 = new Set(userSelectedIds);
@@ -181,27 +101,35 @@ const FacetedSelector = observer(function FacetedSelector({ model, }) {
                             transaction(() => {
                                 ;
                                 [...a1].filter(x => !a2.has(x)).map(t => view.hideTrack(t));
-                                [...a2].filter(x => !a1.has(x)).map(t => view.showTrack(t));
+                                [...a2]
+                                    .filter(x => !a1.has(x))
+                                    .map(t => {
+                                    view.showTrack(t);
+                                    model.addToRecentlyUsed(t);
+                                });
                             });
                         }
                         else {
                             const root = getRoot(model);
                             const schema = pluginManager.pluggableConfigSchemaType('track');
-                            const tracks = userSelectedIds.map(id => resolveIdentifier(schema, root, id));
-                            model.setSelection(tracks);
+                            model.setSelection(userSelectedIds.map(id => resolveIdentifier(schema, root, id)));
                         }
                     }, rowSelectionModel: useShoppingCart
                         ? selection.map(s => s.trackId)
                         : [...shownTrackIds], slots: { toolbar: showOptions ? GridToolbar : null }, slotProps: {
-                        toolbar: { printOptions: { disableToolbarButton: true } },
+                        toolbar: {
+                            printOptions: {
+                                disableToolbarButton: true,
+                            },
+                        },
                     }, columns: columns, rowHeight: 25 })),
             showFilters ? (React.createElement(React.Fragment, null,
-                React.createElement(ResizeHandle, { vertical: true, onDrag: dist => setPanelWidth(panelWidth - dist), style: { marginLeft: 5, background: 'grey', width: 5 } }),
+                React.createElement(ResizeHandle, { vertical: true, onDrag: dist => faceted.setPanelWidth(panelWidth - dist), className: classes.resizeHandle }),
                 React.createElement("div", { style: {
                         width: panelWidth,
                         overflowY: 'auto',
                         overflowX: 'hidden',
                     } },
-                    React.createElement(FacetFilters, { width: panelWidth - 10, rows: rows, columns: columns, dispatch: dispatch, filters: filters })))) : null)));
+                    React.createElement(FacetFilters, { model: model, width: panelWidth - 10, rows: rows, columns: columns })))) : null)));
 });
 export default FacetedSelector;

package/esm/HierarchicalTrackSelectorWidget/components/tree/DropdownTrackSelector.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import { MenuItem } from '@jbrowse/core/ui/Menu';
+import { HierarchicalTrackSelectorModel } from '../../model';
+declare const DropdownTrackSelector: ({ model, tracks, extraMenuItems, children, onClick, }: {
+    model: HierarchicalTrackSelectorModel;
+    tracks: AnyConfigurationModel[];
+    extraMenuItems: MenuItem[];
+    onClick?: (() => void) | undefined;
+    children: React.ReactElement;
+}) => React.JSX.Element | null;
+export default DropdownTrackSelector;

package/esm/HierarchicalTrackSelectorWidget/components/tree/DropdownTrackSelector.js

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import { observer } from 'mobx-react';
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
+import SanitizedHTML from '@jbrowse/core/ui/SanitizedHTML';
+import { getTrackName } from '@jbrowse/core/util/tracks';
+import { getSession } from '@jbrowse/core/util';
+import TrackLabelMenu from './TrackLabelMenu';
+const DropdownTrackSelector = observer(function ({ model, tracks, extraMenuItems, children, onClick, }) {
+    const { view } = model;
+    const [open, setOpen] = useState(false);
+    const session = getSession(model);
+    return view ? (React.createElement(CascadingMenuButton, { closeAfterItemClick: false, onClick: onClick, menuItems: [
+            ...tracks.map(t => ({
+                type: 'checkbox',
+                label: (React.createElement(React.Fragment, null,
+                    React.createElement(SanitizedHTML, { html: getTrackName(t, session) }),
+                    ' ',
+                    React.createElement(TrackLabelMenu, { id: t.trackId, trackId: t.trackId, model: model, conf: t, setOpen: setOpen, stopPropagation: true }))),
+                checked: view.tracks.some((f) => f.configuration === t),
+                onClick: () => {
+                    if (!open) {
+                        if (model.view.toggleTrack(t.trackId)) {
+                            model.addToRecentlyUsed(t.trackId);
+                        }
+                    }
+                },
+            })),
+            ...extraMenuItems,
+        ] }, children)) : null;
+});
+export default DropdownTrackSelector;

package/esm/HierarchicalTrackSelectorWidget/components/tree/FavoriteTracks.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { HierarchicalTrackSelectorModel } from '../../model';
+declare const FavoriteTracks: ({ model, }: {
+    model: HierarchicalTrackSelectorModel;
+}) => React.JSX.Element | null;
+export default FavoriteTracks;

package/esm/HierarchicalTrackSelectorWidget/components/tree/FavoriteTracks.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Badge, Tooltip } from '@mui/material';
+import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
+// icons
+import GradeIcon from '@mui/icons-material/Grade';
+import DropdownTrackSelector from './DropdownTrackSelector';
+const useStyles = makeStyles()({
+    smallBadge: {
+        height: 14,
+    },
+    margin: {
+        marginRight: 10,
+    },
+});
+const FavoriteTracks = observer(function ({ model, }) {
+    const { classes } = useStyles();
+    const { view, favoriteTracks } = model;
+    return view ? (React.createElement(DropdownTrackSelector, { onClick: () => model.setFavoritesCounter(0), tracks: favoriteTracks, model: model, extraMenuItems: favoriteTracks.length
+            ? [
+                { type: 'divider' },
+                {
+                    label: 'Clear favorites',
+                    onClick: () => model.clearFavorites(),
+                },
+            ]
+            : [
+                {
+                    label: 'No favorite tracks yet',
+                    onClick: () => { },
+                },
+            ] },
+        React.createElement(Tooltip, { title: "Favorite tracks" },
+            React.createElement(Badge, { classes: { badge: classes.smallBadge }, color: "secondary", anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'right',
+                }, className: classes.margin, badgeContent: model.favoritesCounter },
+                React.createElement(GradeIcon, null))))) : null;
+});
+export default FavoriteTracks;

package/esm/HierarchicalTrackSelectorWidget/components/tree/HamburgerMenu.js

@@ -5,6 +5,8 @@ import { readConfObject, } from '@jbrowse/core/configuration';
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
 // icons
 import MenuIcon from '@mui/icons-material/Menu';
+// lazies
+const FacetedDialog = lazy(() => import('../faceted/FacetedDialog'));
 // lazy components
 const CloseConnectionDlg = lazy(() => import('../dialogs/CloseConnectionDialog'));
 const DeleteConnectionDlg = lazy(() => import('../dialogs/DeleteConnectionDialog'));
@@ -16,6 +18,7 @@ const HamburgerMenu = observer(function ({ model, }) {
     const [deleteDlgDetails, setDeleteDlgDetails] = useState();
     const [connectionToggleOpen, setConnectionToggleOpen] = useState(false);
     const [connectionManagerOpen, setConnectionManagerOpen] = useState(false);
+    const [facetedOpen, setFacetedOpen] = useState(false);
     function breakConnection(connectionConf, deletingConnection) {
         var _a;
         const name = readConfObject(connectionConf, 'name');
@@ -40,6 +43,12 @@ const HamburgerMenu = observer(function ({ model, }) {
     }
     return (React.createElement(React.Fragment, null,
         React.createElement(CascadingMenuButton, { menuItems: [
+                {
+                    label: 'Open faceted track selector',
+                    onClick: () => {
+                        setFacetedOpen(true);
+                    },
+                },
                 ...(isSessionWithAddTracks(session)
                     ? [
                         {
@@ -54,59 +63,74 @@ const HamburgerMenu = observer(function ({ model, }) {
                         },
                     ]
                     : []),
-                ...(isSessionModelWithConnections(session)
-                    ? [
+                {
+                    label: 'Connections...',
+                    subMenu: [
+                        ...(isSessionModelWithConnections(session)
+                            ? [
+                                {
+                                    label: 'Turn on/off connections...',
+                                    onClick: () => setConnectionToggleOpen(true),
+                                },
+                            ]
+                            : []),
+                        ...(isSessionModelWithConnectionEditing(session)
+                            ? [
+                                {
+                                    label: 'Add connection...',
+                                    onClick: () => {
+                                        if (isSessionModelWithWidgets(session)) {
+                                            session.showWidget(session.addWidget('AddConnectionWidget', 'addConnectionWidget'));
+                                        }
+                                    },
+                                },
+                                {
+                                    label: 'Delete connections...',
+                                    onClick: () => setConnectionManagerOpen(true),
+                                },
+                            ]
+                            : []),
+                    ],
+                },
+                {
+                    label: 'Sort...',
+                    type: 'subMenu',
+                    subMenu: [
                         {
-                            label: 'Turn on/off connections...',
-                            onClick: () => setConnectionToggleOpen(true),
+                            label: 'Sort tracks by name',
+                            type: 'checkbox',
+                            checked: model.activeSortTrackNames,
+                            onClick: () => model.setSortTrackNames(!model.activeSortTrackNames),
                         },
-                    ]
-                    : []),
-                ...(isSessionModelWithConnectionEditing(session)
-                    ? [
                         {
-                            label: 'Add connection...',
-                            onClick: () => {
-                                if (isSessionModelWithWidgets(session)) {
-                                    session.showWidget(session.addWidget('AddConnectionWidget', 'addConnectionWidget'));
-                                }
-                            },
+                            label: 'Sort categories by name',
+                            type: 'checkbox',
+                            checked: model.activeSortCategories,
+                            onClick: () => model.setSortCategories(!model.activeSortCategories),
                         },
-                        {
-                            label: 'Delete connections...',
-                            onClick: () => setConnectionManagerOpen(true),
-                        },
-                    ]
-                    : []),
-                { type: 'divider' },
-                {
-                    label: 'Sort tracks by name',
-                    type: 'checkbox',
-                    checked: model.activeSortTrackNames,
-                    onClick: () => model.setSortTrackNames(!model.activeSortTrackNames),
+                    ],
                 },
                 {
-                    label: 'Sort categories by name',
-                    type: 'checkbox',
-                    checked: model.activeSortCategories,
-                    onClick: () => model.setSortCategories(!model.activeSortCategories),
-                },
-                { type: 'divider' },
-                ...(model.hasAnySubcategories
-                    ? [
+                    label: 'Collapse...',
+                    type: 'subMenu',
+                    subMenu: [
+                        ...(model.hasAnySubcategories
+                            ? [
+                                {
+                                    label: 'Collapse subcategories',
+                                    onClick: () => model.collapseSubCategories(),
+                                },
+                            ]
+                            : []),
                         {
-                            label: 'Collapse subcategories',
-                            onClick: () => model.collapseSubCategories(),
+                            label: 'Collapse top-level categories',
+                            onClick: () => model.collapseTopLevelCategories(),
                         },
-                    ]
-                    : []),
-                {
-                    label: 'Collapse top-level categories',
-                    onClick: () => model.collapseTopLevelCategories(),
-                },
-                {
-                    label: 'Expand all categories',
-                    onClick: () => model.expandAllCategories(),
+                        {
+                            label: 'Expand all categories',
+                            onClick: () => model.expandAllCategories(),
+                        },
+                    ],
                 },
             ] },
             React.createElement(MenuIcon, null)),
@@ -114,6 +138,7 @@ const HamburgerMenu = observer(function ({ model, }) {
             modalInfo ? (React.createElement(CloseConnectionDlg, { modalInfo: modalInfo, onClose: () => setModalInfo(undefined) })) : null,
             deleteDlgDetails ? (React.createElement(DeleteConnectionDlg, { handleClose: () => setDeleteDlgDetails(undefined), deleteDialogDetails: deleteDlgDetails, session: session })) : null,
             connectionManagerOpen ? (React.createElement(ManageConnectionsDlg, { handleClose: () => setConnectionManagerOpen(false), breakConnection: breakConnection, session: session })) : null,
-            connectionToggleOpen ? (React.createElement(ToggleConnectionsDlg, { handleClose: () => setConnectionToggleOpen(false), session: session, breakConnection: breakConnection })) : null)));
+            connectionToggleOpen ? (React.createElement(ToggleConnectionsDlg, { handleClose: () => setConnectionToggleOpen(false), session: session, breakConnection: breakConnection })) : null,
+            facetedOpen ? (React.createElement(FacetedDialog, { handleClose: () => setFacetedOpen(false), model: model })) : null)));
 });
 export default HamburgerMenu;

package/esm/HierarchicalTrackSelectorWidget/components/tree/HierarchicalHeader.js

@@ -1,21 +1,17 @@
-import React, { Suspense, lazy, useState } from 'react';
-import { Button, IconButton, InputAdornment, TextField } from '@mui/material';
+import React from 'react';
+import { IconButton, InputAdornment, TextField } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
 import { observer } from 'mobx-react';
 // icons
 import ClearIcon from '@mui/icons-material/Clear';
 import HamburgerMenu from './HamburgerMenu';
 import ShoppingCart from '../ShoppingCart';
-// lazies
-const FacetedDialog = lazy(() => import('../faceted/FacetedDialog'));
+import FavoriteTracks from './FavoriteTracks';
+import RecentlyUsedTracks from './RecentlyUsedTracks';
 const useStyles = makeStyles()(theme => ({
     searchBox: {
         margin: theme.spacing(2),
     },
-    menuIcon: {
-        marginRight: theme.spacing(1),
-        marginBottom: 0,
-    },
 }));
 const SearchTracksTextField = observer(function ({ model, }) {
     const { filterText } = model;
@@ -27,14 +23,12 @@ const SearchTracksTextField = observer(function ({ model, }) {
         } }));
 });
 const HierarchicalTrackSelectorHeader = observer(function ({ model, setHeaderHeight, }) {
-    const { classes } = useStyles();
-    const [facetedOpen, setFacetedOpen] = useState(false);
     return (React.createElement("div", { ref: ref => setHeaderHeight((ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect().height) || 0), "data-testid": "hierarchical_track_selector" },
         React.createElement("div", { style: { display: 'flex' } },
             React.createElement(HamburgerMenu, { model: model }),
             React.createElement(ShoppingCart, { model: model }),
             React.createElement(SearchTracksTextField, { model: model }),
-            React.createElement(Button, { className: classes.menuIcon, onClick: () => setFacetedOpen(true) }, "Open faceted selector")),
-        React.createElement(Suspense, { fallback: React.createElement("div", null) }, facetedOpen ? (React.createElement(FacetedDialog, { handleClose: () => setFacetedOpen(false), model: model })) : null)));
+            React.createElement(RecentlyUsedTracks, { model: model }),
+            React.createElement(FavoriteTracks, { model: model }))));
 });
 export default HierarchicalTrackSelectorHeader;

package/esm/HierarchicalTrackSelectorWidget/components/tree/HierarchicalTree.js

@@ -4,8 +4,8 @@ import { VariableSizeTree } from 'react-vtree';
 import { getSession } from '@jbrowse/core/util';
 import Node from './TrackListNode';
 function getNodeData(node, nestingLevel, extra, selection) {
-    const isLeaf = !!node.conf;
-    const selected = !!selection[node.id];
+    const isLeaf = node.type === 'track';
+    const selected = isLeaf ? selection[node.trackId] : false;
     return {
         data: {
             defaultHeight: isLeaf ? 22 : 40,
@@ -30,7 +30,12 @@ const HierarchicalTree = observer(function HierarchicalTree({ height, tree, mode
     const { drawerPosition } = session;
     const obj = useMemo(() => Object.fromEntries(selection.map(s => [s.trackId, s])), [selection]);
     const extra = useMemo(() => ({
-        onChange: (trackId) => view.toggleTrack(trackId),
+        onChange: (trackId) => {
+            const trackTurnedOn = view.toggleTrack(trackId);
+            if (trackTurnedOn) {
+                model.addToRecentlyUsed(trackId);
+            }
+        },
         toggleCollapse: (pathName) => model.toggleCategory(pathName),
         tree,
         model,

package/esm/HierarchicalTrackSelectorWidget/components/tree/RecentlyUsedTracks.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { HierarchicalTrackSelectorModel } from '../../model';
+declare const RecentlyUsedTracks: ({ model, }: {
+    model: HierarchicalTrackSelectorModel;
+}) => React.JSX.Element | null;
+export default RecentlyUsedTracks;

package/esm/HierarchicalTrackSelectorWidget/components/tree/RecentlyUsedTracks.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Badge, Tooltip } from '@mui/material';
+import { observer } from 'mobx-react';
+// icons
+import HistoryIcon from '@mui/icons-material/History';
+import DropdownTrackSelector from './DropdownTrackSelector';
+import { makeStyles } from 'tss-react/mui';
+const useStyles = makeStyles()({
+    smallBadge: {
+        height: 14,
+    },
+});
+const RecentlyUsedTracks = observer(function ({ model, }) {
+    const { classes } = useStyles();
+    const { view, recentlyUsedCounter, recentlyUsedTracks } = model;
+    return view ? (React.createElement(DropdownTrackSelector, { onClick: () => model.setRecentlyUsedCounter(0), model: model, tracks: recentlyUsedTracks, extraMenuItems: recentlyUsedTracks.length
+            ? [
+                { type: 'divider' },
+                {
+                    label: 'Clear recently used',
+                    onClick: () => model.clearRecentlyUsed(),
+                },
+            ]
+            : [
+                {
+                    label: 'No recently used',
+                    onClick: () => { },
+                },
+            ] },
+        React.createElement(Tooltip, { title: "Recently used tracks" },
+            React.createElement(Badge, { classes: { badge: classes.smallBadge }, anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'right',
+                }, color: "secondary", badgeContent: recentlyUsedCounter },
+                React.createElement(HistoryIcon, null))))) : null;
+});
+export default RecentlyUsedTracks;

package/esm/HierarchicalTrackSelectorWidget/components/tree/TrackCategory.js

@@ -22,10 +22,10 @@ const useStyles = makeStyles()(theme => ({
 export default function Category({ isOpen, setOpen, data, }) {
     const { classes } = useStyles();
     const [menuEl, setMenuEl] = useState(null);
-    const { name, model, id, tree, toggleCollapse } = data;
+    const { menuItems = [], name, model, id, tree } = data;
     return (React.createElement("div", { className: classes.accordionText, onClick: () => {
             if (!menuEl) {
-                toggleCollapse(id);
+                data.toggleCollapse(id);
                 setOpen(!isOpen);
             }
         } },
@@ -57,8 +57,8 @@ export default function Category({ isOpen, setOpen, data, }) {
                     onClick: () => {
                         var _a;
                         for (const entry of ((_a = treeToMap(tree).get(id)) === null || _a === void 0 ? void 0 : _a.children) || []) {
-                            if (!entry.children.length) {
-                                model.view.showTrack(entry.id);
+                            if (entry.type === 'track') {
+                                model.view.showTrack(entry.trackId);
                             }
                         }
                     },
@@ -68,12 +68,13 @@ export default function Category({ isOpen, setOpen, data, }) {
                     onClick: () => {
                         var _a;
                         for (const entry of ((_a = treeToMap(tree).get(id)) === null || _a === void 0 ? void 0 : _a.children) || []) {
-                            if (!entry.children.length) {
-                                model.view.hideTrack(entry.id);
+                            if (entry.type === 'track') {
+                                model.view.hideTrack(entry.trackId);
                             }
                         }
                     },
                 },
+                ...menuItems,
             ], onMenuItemClick: (_event, callback) => {
                 callback();
                 setMenuEl(null);