@jbrowse/plugin-data-management 2.7.2 → 2.9.0

package/esm/HierarchicalTrackSelectorWidget/components/ShoppingCart.js

@@ -1,42 +1,23 @@
-import React, { useState } from 'react';
-import { Badge, IconButton } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
+import React from 'react';
+import { Badge } from '@mui/material';
 import { observer } from 'mobx-react';
-import JBrowseMenu from '@jbrowse/core/ui/Menu';
 import { getSession, getEnv } from '@jbrowse/core/util';
 // icons
 import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
-const useStyles = makeStyles()(theme => ({
-    searchBox: {
-        margin: theme.spacing(2),
-    },
-    menuIcon: {
-        marginRight: theme.spacing(1),
-        marginBottom: 0,
-    },
-}));
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
 const ShoppingCart = observer(function ({ model, }) {
-    const { classes } = useStyles();
     const { selection } = model;
     const { pluginManager } = getEnv(model);
     const session = getSession(model);
-    const [selectionEl, setSelectionEl] = useState();
     const items = pluginManager.evaluateExtensionPoint('TrackSelector-multiTrackMenuItems', [], { session });
-    return (React.createElement(React.Fragment, null,
-        selection.length ? (React.createElement(IconButton, { className: classes.menuIcon, onClick: event => setSelectionEl(event.currentTarget) },
-            React.createElement(Badge, { badgeContent: selection.length, color: "primary" },
-                React.createElement(ShoppingCartIcon, null)))) : null,
-        React.createElement(JBrowseMenu, { anchorEl: selectionEl, open: Boolean(selectionEl), onMenuItemClick: (_, callback) => {
-                callback();
-                setSelectionEl(undefined);
-            }, onClose: () => setSelectionEl(undefined), menuItems: [
-                { label: 'Clear', onClick: () => model.clearSelection() },
-                ...items.map(item => ({
-                    ...item,
-                    ...('onClick' in item
-                        ? { onClick: () => item.onClick(model) }
-                        : {}),
-                })),
-            ] })));
+    return selection.length ? (React.createElement(CascadingMenuButton, { menuItems: [
+            { label: 'Clear', onClick: () => model.clearSelection() },
+            ...items.map(item => ({
+                ...item,
+                ...('onClick' in item ? { onClick: () => item.onClick(model) } : {}),
+            })),
+        ] },
+        React.createElement(Badge, { badgeContent: selection.length, color: "primary" },
+            React.createElement(ShoppingCartIcon, null)))) : null;
 });
 export default ShoppingCart;

package/esm/HierarchicalTrackSelectorWidget/components/faceted/FacetFilter.d.ts

@@ -1,13 +1,11 @@
 import React from 'react';
-export default function FacetFilter({ column, vals, width, dispatch, filters, }: {
+import { HierarchicalTrackSelectorModel } from '../../model';
+declare const FacetFilter: ({ column, vals, width, model, }: {
     column: {
         field: string;
     };
     vals: [string, number][];
     width: number;
-    dispatch: (arg: {
-        key: string;
-        val: string[];
-    }) => void;
-    filters: Record<string, string[]>;
-}): React.JSX.Element;
+    model: HierarchicalTrackSelectorModel;
+}) => React.JSX.Element;
+export default FacetFilter;

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

@@ -6,6 +6,7 @@ import ClearIcon from '@mui/icons-material/Clear';
 import MinimizeIcon from '@mui/icons-material/Minimize';
 import AddIcon from '@mui/icons-material/Add';
 import { coarseStripHTML } from '@jbrowse/core/util';
+import { observer } from 'mobx-react';
 const useStyles = makeStyles()(theme => ({
     facet: {
         margin: 0,
@@ -24,22 +25,22 @@ function ExpandButton({ visible, onClick, }) {
     return (React.createElement(Tooltip, { title: "Minimize/expand this facet filter" },
         React.createElement(IconButton, { onClick: () => onClick(), size: "small" }, visible ? React.createElement(MinimizeIcon, null) : React.createElement(AddIcon, null))));
 }
-export default function FacetFilter({ column, vals, width, dispatch, filters, }) {
+const FacetFilter = observer(function ({ column, vals, width, model, }) {
     const { classes } = useStyles();
     const [visible, setVisible] = useState(true);
+    const { faceted } = model;
+    const { filters } = faceted;
     return (React.createElement(FormControl, { key: column.field, className: classes.facet, style: { width } },
         React.createElement("div", { style: { display: 'flex' } },
             React.createElement(Typography, null, column.field),
-            React.createElement(ClearButton, { onClick: () => dispatch({ key: column.field, val: [] }) }),
+            React.createElement(ClearButton, { onClick: () => model.faceted.setFilter(column.field, []) }),
             React.createElement(ExpandButton, { visible: visible, onClick: () => setVisible(!visible) })),
-        visible ? (React.createElement(Select, { multiple: true, native: true, className: classes.select, value: filters[column.field], onChange: event => {
-                dispatch({
-                    key: column.field,
-                    // @ts-expect-error
-                    val: [...event.target.options]
-                        .filter(opt => opt.selected)
-                        .map(opt => opt.value),
-                });
+        visible ? (React.createElement(Select, { multiple: true, native: true, className: classes.select, value: filters.get(column.field) || [], onChange: event => {
+                faceted.setFilter(column.field, 
+                // @ts-expect-error
+                [...event.target.options]
+                    .filter(opt => opt.selected)
+                    .map(opt => opt.value));
             } }, vals
             .sort((a, b) => a[0].localeCompare(b[0]))
             .map(([name, count]) => (React.createElement("option", { key: name, value: name },
@@ -47,4 +48,5 @@ export default function FacetFilter({ column, vals, width, dispatch, filters, })
             " (",
             count,
             ")"))))) : null));
-}
+});
+export default FacetFilter;

package/esm/HierarchicalTrackSelectorWidget/components/faceted/FacetFilters.d.ts

@@ -1,13 +1,11 @@
 import React from 'react';
-export default function FacetFilters({ rows, columns, dispatch, filters, width, }: {
+import { HierarchicalTrackSelectorModel } from '../../model';
+declare const FacetFilters: ({ rows, columns, width, model, }: {
     rows: Record<string, unknown>[];
-    filters: Record<string, string[]>;
     columns: {
         field: string;
     }[];
-    dispatch: (arg: {
-        key: string;
-        val: string[];
-    }) => void;
     width: number;
-}): React.JSX.Element;
+    model: HierarchicalTrackSelectorModel;
+}) => React.JSX.Element;
+export default FacetFilters;

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

@@ -1,18 +1,21 @@
 import React from 'react';
 import FacetFilter from './FacetFilter';
-export default function FacetFilters({ rows, columns, dispatch, filters, width, }) {
+import { observer } from 'mobx-react';
+const FacetFilters = observer(function ({ rows, columns, width, model, }) {
     var _a, _b;
+    const { faceted } = model;
+    const { filters } = faceted;
     const facets = columns.slice(1);
     const uniqs = new Map(facets.map(f => [f.field, new Map()]));
     // this code "stages the facet filters" in order that the user has selected
     // them, which relies on the js behavior that the order of the returned keys is
     // related to the insertion order.
-    const filterKeys = Object.keys(filters);
+    const filterKeys = faceted.filters.keys();
     const facetKeys = facets.map(f => f.field);
     const ret = new Set();
     for (const entry of filterKeys) {
         // give non-empty filters priority
-        if ((_a = filters[entry]) === null || _a === void 0 ? void 0 : _a.length) {
+        if ((_a = filters.get(entry)) === null || _a === void 0 ? void 0 : _a.length) {
             ret.add(entry);
         }
     }
@@ -35,12 +38,13 @@ export default function FacetFilters({ rows, columns, dispatch, filters, width,
                 }
             }
         }
-        const filter = ((_b = filters[facet]) === null || _b === void 0 ? void 0 : _b.length) ? new Set(filters[facet]) : undefined;
+        const filter = ((_b = filters.get(facet)) === null || _b === void 0 ? void 0 : _b.length)
+            ? new Set(filters.get(facet))
+            : undefined;
         currentRows = currentRows.filter(row => {
             return filter !== undefined ? filter.has(row[facet]) : true;
         });
     }
-    return (React.createElement("div", null, facets.map(column => {
-        return (React.createElement(FacetFilter, { key: column.field, vals: [...uniqs.get(column.field)], column: column, width: width, dispatch: dispatch, filters: filters }));
-    })));
-}
+    return (React.createElement("div", null, facets.map(column => (React.createElement(FacetFilter, { key: column.field, vals: [...uniqs.get(column.field)], column: column, width: width, model: model })))));
+});
+export default FacetFilters;

package/esm/HierarchicalTrackSelectorWidget/components/faceted/FacetedHeader.d.ts

@@ -1,15 +1,5 @@
 import React from 'react';
 import { HierarchicalTrackSelectorModel } from '../../model';
-export default function FacetedHeader({ setFilterText, setUseShoppingCart, setShowSparse, setShowFilters, setShowOptions, showOptions, showSparse, showFilters, useShoppingCart, filterText, model, }: {
-    setFilterText: (arg: string) => void;
-    setUseShoppingCart: (arg: boolean) => void;
-    setShowSparse: (arg: boolean) => void;
-    setShowFilters: (arg: boolean) => void;
-    setShowOptions: (arg: boolean) => void;
-    filterText: string;
-    showOptions: boolean;
-    useShoppingCart: boolean;
-    showSparse: boolean;
-    showFilters: boolean;
+export default function FacetedHeader({ model, }: {
     model: HierarchicalTrackSelectorModel;
 }): React.JSX.Element;

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

@@ -6,14 +6,16 @@ import ClearIcon from '@mui/icons-material/Clear';
 import MoreVert from '@mui/icons-material/MoreVert';
 // locals
 import ShoppingCart from '../ShoppingCart';
-export default function FacetedHeader({ setFilterText, setUseShoppingCart, setShowSparse, setShowFilters, setShowOptions, showOptions, showSparse, showFilters, useShoppingCart, filterText, model, }) {
+export default function FacetedHeader({ model, }) {
+    const { faceted } = model;
     const [anchorEl, setAnchorEl] = useState(null);
+    const { showOptions, showFilters, showSparse, useShoppingCart } = faceted;
     return (React.createElement(React.Fragment, null,
         React.createElement(Grid, { container: true, spacing: 4, alignItems: "center" },
             React.createElement(Grid, { item: true },
-                React.createElement(TextField, { label: "Search...", value: filterText, onChange: event => setFilterText(event.target.value), InputProps: {
+                React.createElement(TextField, { label: "Search...", value: faceted.filterText, onChange: event => faceted.setFilterText(event.target.value), InputProps: {
                         endAdornment: (React.createElement(InputAdornment, { position: "end" },
-                            React.createElement(IconButton, { onClick: () => setFilterText('') },
+                            React.createElement(IconButton, { onClick: () => faceted.setFilterText('') },
                                 React.createElement(ClearIcon, null)))),
                     } })),
             React.createElement(Grid, { item: true },
@@ -27,25 +29,25 @@ export default function FacetedHeader({ setFilterText, setUseShoppingCart, setSh
             }, menuItems: [
                 {
                     label: 'Add tracks to selection instead of turning them on/off',
-                    onClick: () => setUseShoppingCart(!useShoppingCart),
+                    onClick: () => faceted.setUseShoppingCart(!useShoppingCart),
                     type: 'checkbox',
                     checked: useShoppingCart,
                 },
                 {
                     label: 'Show sparse metadata columns',
-                    onClick: () => setShowSparse(!showSparse),
+                    onClick: () => faceted.setShowSparse(!showSparse),
                     checked: showSparse,
                     type: 'checkbox',
                 },
                 {
                     label: 'Show facet filters',
-                    onClick: () => setShowFilters(!showFilters),
+                    onClick: () => faceted.setShowFilters(!showFilters),
                     checked: showFilters,
                     type: 'checkbox',
                 },
                 {
                     label: 'Show extra table options',
-                    onClick: () => setShowOptions(!showOptions),
+                    onClick: () => faceted.setShowOptions(!showOptions),
                     checked: showOptions,
                     type: 'checkbox',
                 },

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,29 @@
+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) {
+                        model.view.toggleTrack(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,37 @@
+import React from 'react';
+import { Badge, Tooltip } from '@mui/material';
+import { observer } from 'mobx-react';
+// icons
+import GradeIcon from '@mui/icons-material/Grade';
+import DropdownTrackSelector from './DropdownTrackSelector';
+import { makeStyles } from 'tss-react/mui';
+const useStyles = makeStyles()({
+    smallBadge: {
+        height: 14,
+    },
+});
+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',
+                }, style: { marginRight: 10 }, badgeContent: model.favoritesCounter },
+                React.createElement(GradeIcon, null))))) : null;
+});
+export default FavoriteTracks;