@jbrowse/plugin-data-management 2.8.0 → 2.10.0

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

@@ -1,154 +1,55 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
 const mobx_1 = require("mobx");
 const mobx_react_1 = require("mobx-react");
 const mobx_state_tree_1 = require("mobx-state-tree");
 const x_data_grid_1 = require("@mui/x-data-grid");
 // jbrowse
-const tracks_1 = require("@jbrowse/core/util/tracks");
 const ui_1 = require("@jbrowse/core/ui");
 const SanitizedHTML_1 = __importDefault(require("@jbrowse/core/ui/SanitizedHTML"));
-const Menu_1 = __importDefault(require("@jbrowse/core/ui/Menu"));
 const ResizeBar_1 = __importDefault(require("@jbrowse/core/ui/ResizeBar"));
 const util_1 = require("@jbrowse/core/util");
-const configuration_1 = require("@jbrowse/core/configuration");
 const useResizeBar_1 = require("@jbrowse/core/ui/useResizeBar");
 const mui_1 = require("tss-react/mui");
-// icons
-const MoreHoriz_1 = __importDefault(require("@mui/icons-material/MoreHoriz"));
-const util_2 = require("../../util");
 const FacetedHeader_1 = __importDefault(require("./FacetedHeader"));
 const FacetFilters_1 = __importDefault(require("./FacetFilters"));
-const util_3 = require("./util");
-const nonMetadataKeys = ['category', 'adapter', 'description'];
+const TrackLabelMenu_1 = __importDefault(require("../tree/TrackLabelMenu"));
 const useStyles = (0, mui_1.makeStyles)()({
     cell: {
         whiteSpace: 'nowrap',
         overflow: 'hidden',
         textOverflow: 'ellipsis',
     },
+    resizeHandle: {
+        marginLeft: 5,
+        background: 'grey',
+        width: 5,
+    },
 });
 const frac = 0.75;
 const FacetedSelector = (0, mobx_react_1.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 } = (0, util_1.getEnv)(model);
     const { ref, scrollLeft } = (0, useResizeBar_1.useResizeBar)();
-    const [filterText, setFilterText] = (0, react_1.useState)('');
-    const [showOptions, setShowOptions] = (0, util_1.useLocalStorage)('facet-showTableOptions', false);
-    const [info, setInfo] = (0, react_1.useState)();
-    const [useShoppingCart, setUseShoppingCart] = (0, react_1.useState)(false);
-    const [showSparse, setShowSparse] = (0, util_1.useLocalStorage)('facet-showSparse', false);
-    const [showFilters, setShowFilters] = (0, util_1.useLocalStorage)('facet-showFilters', true);
-    const [panelWidth, setPanelWidth] = (0, util_1.useLocalStorage)('facet-panelWidth', 400);
-    const session = (0, util_1.getSession)(model);
-    const filterDebounced = (0, util_1.useDebounce)(filterText, 400);
     const tracks = view.tracks;
-    const [filters, dispatch] = (0, react_1.useReducer)((state, update) => ({ ...state, [update.key]: update.val }), {});
-    const rows = (0, react_1.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 => (0, util_2.matches)(filterDebounced, conf, session))
-            .map(track => {
-            var _a, _b;
-            const metadata = (0, configuration_1.readConfObject)(track, 'metadata');
-            return {
-                id: track.trackId,
-                conf: track,
-                name: (0, tracks_1.getTrackName)(track, session),
-                category: (_a = (0, configuration_1.readConfObject)(track, 'category')) === null || _a === void 0 ? void 0 : _a.join(', '),
-                adapter: (_b = (0, configuration_1.readConfObject)(track, 'adapter')) === null || _b === void 0 ? void 0 : _b.type,
-                description: (0, configuration_1.readConfObject)(track, 'description'),
-                metadata,
-                ...metadata,
-            };
-        });
-    }, [model, filterDebounced, session]);
-    const filteredNonMetadataKeys = (0, react_1.useMemo)(() => nonMetadataKeys.filter(f => showSparse ? true : rows.map(r => r[f]).filter(f => !!f).length > 5), [showSparse, rows]);
-    const filteredMetadataKeys = (0, react_1.useMemo)(() => [...new Set(rows.flatMap(row => (0, util_3.getRootKeys)(row.metadata)))].filter(f => showSparse
-        ? true
-        : rows.map(r => r.metadata[f]).filter(f => !!f).length > 5), [showSparse, rows]);
-    const fields = (0, react_1.useMemo)(() => ['name', ...filteredNonMetadataKeys, ...filteredMetadataKeys], [filteredNonMetadataKeys, filteredMetadataKeys]);
-    const [widths, setWidths] = (0, react_1.useState)({
-        name: (0, util_1.measureGridWidth)(rows.map(r => r.name), { maxWidth: 500, stripHTML: true }) + 15,
-        ...Object.fromEntries(filteredNonMetadataKeys.map(e => [
-            e,
-            (0, util_1.measureGridWidth)(rows.map(r => r[e]), { maxWidth: 400, stripHTML: true }),
-        ])),
-        ...Object.fromEntries(filteredMetadataKeys.map(e => [
-            e,
-            (0, util_1.measureGridWidth)(rows.map(r => r.metadata[e]), { maxWidth: 400, stripHTML: true }),
-        ])),
-    });
-    const [visible, setVisible] = (0, react_1.useState)(Object.fromEntries(fields.map(c => [c, true])));
-    (0, react_1.useEffect)(() => {
-        setVisible(visible => ({
-            ...Object.fromEntries(fields.map(c => [c, true])),
-            ...visible,
-        }));
-    }, [fields]);
-    (0, react_1.useEffect)(() => {
-        setWidths(widths => ({
-            name: widths.name,
-            ...Object.fromEntries(filteredNonMetadataKeys
-                .filter(f => visible[f])
-                .map(e => [
-                e,
-                (0, util_1.measureGridWidth)(rows.map(r => r[e]), { stripHTML: true, maxWidth: 400 }),
-            ])),
-            ...Object.fromEntries(filteredMetadataKeys
-                .filter(f => visible[f])
-                .map(e => [
-                e,
-                (0, util_1.measureGridWidth)(rows.map(r => r.metadata[e]), { stripHTML: true, maxWidth: 400 }),
-            ])),
-        }));
-    }, [filteredMetadataKeys, visible, filteredNonMetadataKeys, showSparse, rows]);
     const widthsDebounced = (0, util_1.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_1.default.createElement("div", { className: classes.cell },
                     react_1.default.createElement(SanitizedHTML_1.default, { html: value }),
-                    react_1.default.createElement(material_1.IconButton, { onClick: e => setInfo({
-                            target: e.currentTarget,
-                            id: id,
-                            conf: row.conf,
-                        }) },
-                        react_1.default.createElement(MoreHoriz_1.default, null))));
+                    react_1.default.createElement(TrackLabelMenu_1.default, { id: id, conf: conf, trackId: id, model: model })));
             },
             width: (_a = widthsDebounced.name) !== null && _a !== void 0 ? _a : 100,
         },
@@ -158,34 +59,30 @@ const FacetedSelector = (0, mobx_react_1.observer)(function FacetedSelector({ mo
                 field: e,
                 width: (_a = widthsDebounced[e]) !== null && _a !== void 0 ? _a : 100,
                 renderCell: (params) => {
-                    const { value } = params;
-                    return (react_1.default.createElement("div", { className: classes.cell }, value ? react_1.default.createElement(SanitizedHTML_1.default, { html: value }) : ''));
+                    const val = params.value;
+                    return val ? react_1.default.createElement(SanitizedHTML_1.default, { 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_1.default.createElement("div", { className: classes.cell }, value ? react_1.default.createElement(SanitizedHTML_1.default, { html: value }) : ''));
+                    const val = params.row.metadata[e];
+                    return val ? react_1.default.createElement(SanitizedHTML_1.default, { 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_1.default.createElement(react_1.default.Fragment, null,
-        info ? (react_1.default.createElement(Menu_1.default, { 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_1.default.createElement(FacetedHeader_1.default, { setShowSparse: setShowSparse, setShowFilters: setShowFilters, setShowOptions: setShowOptions, setFilterText: setFilterText, setUseShoppingCart: setUseShoppingCart, showFilters: showFilters, showSparse: showSparse, showOptions: showOptions, filterText: filterText, useShoppingCart: useShoppingCart, model: model }),
+        react_1.default.createElement(FacetedHeader_1.default, { model: model }),
         react_1.default.createElement("div", { ref: ref, style: {
                 display: 'flex',
                 overflow: 'hidden',
@@ -196,11 +93,11 @@ const FacetedSelector = (0, mobx_react_1.observer)(function FacetedSelector({ mo
                     height: window.innerHeight * frac,
                     width: window.innerWidth * frac - (showFilters ? panelWidth : 0),
                 } },
-                react_1.default.createElement(ResizeBar_1.default, { 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_1.default.createElement(ResizeBar_1.default, { 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_1.default.createElement(x_data_grid_1.DataGrid, { rows: filteredRows, columnVisibilityModel: visible, onColumnVisibilityModelChange: newModel => setVisible(newModel), columnHeaderHeight: 35, checkboxSelection: true, disableRowSelectionOnClick: true, keepNonExistentRowsSelected: true, onRowSelectionModelChange: userSelectedIds => {
+                react_1.default.createElement(x_data_grid_1.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);
@@ -209,27 +106,35 @@ const FacetedSelector = (0, mobx_react_1.observer)(function FacetedSelector({ mo
                             (0, mobx_1.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 = (0, mobx_state_tree_1.getRoot)(model);
                             const schema = pluginManager.pluggableConfigSchemaType('track');
-                            const tracks = userSelectedIds.map(id => (0, mobx_state_tree_1.resolveIdentifier)(schema, root, id));
-                            model.setSelection(tracks);
+                            model.setSelection(userSelectedIds.map(id => (0, mobx_state_tree_1.resolveIdentifier)(schema, root, id)));
                         }
                     }, rowSelectionModel: useShoppingCart
                         ? selection.map(s => s.trackId)
                         : [...shownTrackIds], slots: { toolbar: showOptions ? x_data_grid_1.GridToolbar : null }, slotProps: {
-                        toolbar: { printOptions: { disableToolbarButton: true } },
+                        toolbar: {
+                            printOptions: {
+                                disableToolbarButton: true,
+                            },
+                        },
                     }, columns: columns, rowHeight: 25 })),
             showFilters ? (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(ui_1.ResizeHandle, { vertical: true, onDrag: dist => setPanelWidth(panelWidth - dist), style: { marginLeft: 5, background: 'grey', width: 5 } }),
+                react_1.default.createElement(ui_1.ResizeHandle, { vertical: true, onDrag: dist => faceted.setPanelWidth(panelWidth - dist), className: classes.resizeHandle }),
                 react_1.default.createElement("div", { style: {
                         width: panelWidth,
                         overflowY: 'auto',
                         overflowX: 'hidden',
                     } },
-                    react_1.default.createElement(FacetFilters_1.default, { width: panelWidth - 10, rows: rows, columns: columns, dispatch: dispatch, filters: filters })))) : null)));
+                    react_1.default.createElement(FacetFilters_1.default, { model: model, width: panelWidth - 10, rows: rows, columns: columns })))) : null)));
 });
 exports.default = FacetedSelector;

package/dist/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/dist/HierarchicalTrackSelectorWidget/components/tree/DropdownTrackSelector.js

@@ -0,0 +1,59 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const mobx_react_1 = require("mobx-react");
+const CascadingMenuButton_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenuButton"));
+const SanitizedHTML_1 = __importDefault(require("@jbrowse/core/ui/SanitizedHTML"));
+const tracks_1 = require("@jbrowse/core/util/tracks");
+const util_1 = require("@jbrowse/core/util");
+const TrackLabelMenu_1 = __importDefault(require("./TrackLabelMenu"));
+const DropdownTrackSelector = (0, mobx_react_1.observer)(function ({ model, tracks, extraMenuItems, children, onClick, }) {
+    const { view } = model;
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const session = (0, util_1.getSession)(model);
+    return view ? (react_1.default.createElement(CascadingMenuButton_1.default, { closeAfterItemClick: false, onClick: onClick, menuItems: [
+            ...tracks.map(t => ({
+                type: 'checkbox',
+                label: (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(SanitizedHTML_1.default, { html: (0, tracks_1.getTrackName)(t, session) }),
+                    ' ',
+                    react_1.default.createElement(TrackLabelMenu_1.default, { 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;
+});
+exports.default = DropdownTrackSelector;

package/dist/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/dist/HierarchicalTrackSelectorWidget/components/tree/FavoriteTracks.js

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+const mui_1 = require("tss-react/mui");
+// icons
+const Grade_1 = __importDefault(require("@mui/icons-material/Grade"));
+const DropdownTrackSelector_1 = __importDefault(require("./DropdownTrackSelector"));
+const useStyles = (0, mui_1.makeStyles)()({
+    smallBadge: {
+        height: 14,
+    },
+    margin: {
+        marginRight: 10,
+    },
+});
+const FavoriteTracks = (0, mobx_react_1.observer)(function ({ model, }) {
+    const { classes } = useStyles();
+    const { view, favoriteTracks } = model;
+    return view ? (react_1.default.createElement(DropdownTrackSelector_1.default, { 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_1.default.createElement(material_1.Tooltip, { title: "Favorite tracks" },
+            react_1.default.createElement(material_1.Badge, { classes: { badge: classes.smallBadge }, color: "secondary", anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'right',
+                }, className: classes.margin, badgeContent: model.favoritesCounter },
+                react_1.default.createElement(Grade_1.default, null))))) : null;
+});
+exports.default = FavoriteTracks;

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

@@ -33,6 +33,8 @@ const configuration_1 = require("@jbrowse/core/configuration");
 const CascadingMenuButton_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenuButton"));
 // icons
 const Menu_1 = __importDefault(require("@mui/icons-material/Menu"));
+// lazies
+const FacetedDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('../faceted/FacetedDialog'))));
 // lazy components
 const CloseConnectionDlg = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('../dialogs/CloseConnectionDialog'))));
 const DeleteConnectionDlg = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('../dialogs/DeleteConnectionDialog'))));
@@ -44,6 +46,7 @@ const HamburgerMenu = (0, mobx_react_1.observer)(function ({ model, }) {
     const [deleteDlgDetails, setDeleteDlgDetails] = (0, react_1.useState)();
     const [connectionToggleOpen, setConnectionToggleOpen] = (0, react_1.useState)(false);
     const [connectionManagerOpen, setConnectionManagerOpen] = (0, react_1.useState)(false);
+    const [facetedOpen, setFacetedOpen] = (0, react_1.useState)(false);
     function breakConnection(connectionConf, deletingConnection) {
         var _a;
         const name = (0, configuration_1.readConfObject)(connectionConf, 'name');
@@ -68,6 +71,12 @@ const HamburgerMenu = (0, mobx_react_1.observer)(function ({ model, }) {
     }
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(CascadingMenuButton_1.default, { menuItems: [
+                {
+                    label: 'Open faceted track selector',
+                    onClick: () => {
+                        setFacetedOpen(true);
+                    },
+                },
                 ...((0, util_1.isSessionWithAddTracks)(session)
                     ? [
                         {
@@ -82,59 +91,74 @@ const HamburgerMenu = (0, mobx_react_1.observer)(function ({ model, }) {
                         },
                     ]
                     : []),
-                ...((0, util_1.isSessionModelWithConnections)(session)
-                    ? [
+                {
+                    label: 'Connections...',
+                    subMenu: [
+                        ...((0, util_1.isSessionModelWithConnections)(session)
+                            ? [
+                                {
+                                    label: 'Turn on/off connections...',
+                                    onClick: () => setConnectionToggleOpen(true),
+                                },
+                            ]
+                            : []),
+                        ...((0, util_1.isSessionModelWithConnectionEditing)(session)
+                            ? [
+                                {
+                                    label: 'Add connection...',
+                                    onClick: () => {
+                                        if ((0, util_1.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),
                         },
-                    ]
-                    : []),
-                ...((0, util_1.isSessionModelWithConnectionEditing)(session)
-                    ? [
                         {
-                            label: 'Add connection...',
-                            onClick: () => {
-                                if ((0, util_1.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_1.default.createElement(Menu_1.default, null)),
@@ -142,6 +166,7 @@ const HamburgerMenu = (0, mobx_react_1.observer)(function ({ model, }) {
             modalInfo ? (react_1.default.createElement(CloseConnectionDlg, { modalInfo: modalInfo, onClose: () => setModalInfo(undefined) })) : null,
             deleteDlgDetails ? (react_1.default.createElement(DeleteConnectionDlg, { handleClose: () => setDeleteDlgDetails(undefined), deleteDialogDetails: deleteDlgDetails, session: session })) : null,
             connectionManagerOpen ? (react_1.default.createElement(ManageConnectionsDlg, { handleClose: () => setConnectionManagerOpen(false), breakConnection: breakConnection, session: session })) : null,
-            connectionToggleOpen ? (react_1.default.createElement(ToggleConnectionsDlg, { handleClose: () => setConnectionToggleOpen(false), session: session, breakConnection: breakConnection })) : null)));
+            connectionToggleOpen ? (react_1.default.createElement(ToggleConnectionsDlg, { handleClose: () => setConnectionToggleOpen(false), session: session, breakConnection: breakConnection })) : null,
+            facetedOpen ? (react_1.default.createElement(FacetedDialog, { handleClose: () => setFacetedOpen(false), model: model })) : null)));
 });
 exports.default = HamburgerMenu;

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

@@ -1,32 +1,9 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
 const mobx_react_1 = require("mobx-react");
@@ -34,16 +11,12 @@ const mobx_react_1 = require("mobx-react");
 const Clear_1 = __importDefault(require("@mui/icons-material/Clear"));
 const HamburgerMenu_1 = __importDefault(require("./HamburgerMenu"));
 const ShoppingCart_1 = __importDefault(require("../ShoppingCart"));
-// lazies
-const FacetedDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('../faceted/FacetedDialog'))));
+const FavoriteTracks_1 = __importDefault(require("./FavoriteTracks"));
+const RecentlyUsedTracks_1 = __importDefault(require("./RecentlyUsedTracks"));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     searchBox: {
         margin: theme.spacing(2),
     },
-    menuIcon: {
-        marginRight: theme.spacing(1),
-        marginBottom: 0,
-    },
 }));
 const SearchTracksTextField = (0, mobx_react_1.observer)(function ({ model, }) {
     const { filterText } = model;
@@ -55,14 +28,12 @@ const SearchTracksTextField = (0, mobx_react_1.observer)(function ({ model, }) {
         } }));
 });
 const HierarchicalTrackSelectorHeader = (0, mobx_react_1.observer)(function ({ model, setHeaderHeight, }) {
-    const { classes } = useStyles();
-    const [facetedOpen, setFacetedOpen] = (0, react_1.useState)(false);
     return (react_1.default.createElement("div", { ref: ref => setHeaderHeight((ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect().height) || 0), "data-testid": "hierarchical_track_selector" },
         react_1.default.createElement("div", { style: { display: 'flex' } },
             react_1.default.createElement(HamburgerMenu_1.default, { model: model }),
             react_1.default.createElement(ShoppingCart_1.default, { model: model }),
             react_1.default.createElement(SearchTracksTextField, { model: model }),
-            react_1.default.createElement(material_1.Button, { className: classes.menuIcon, onClick: () => setFacetedOpen(true) }, "Open faceted selector")),
-        react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement("div", null) }, facetedOpen ? (react_1.default.createElement(FacetedDialog, { handleClose: () => setFacetedOpen(false), model: model })) : null)));
+            react_1.default.createElement(RecentlyUsedTracks_1.default, { model: model }),
+            react_1.default.createElement(FavoriteTracks_1.default, { model: model }))));
 });
 exports.default = HierarchicalTrackSelectorHeader;