@jbrowse/plugin-data-management 2.6.2 → 2.7.0

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

@@ -0,0 +1,72 @@
+"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 mui_1 = require("tss-react/mui");
+// icon
+const Clear_1 = __importDefault(require("@mui/icons-material/Clear"));
+const Minimize_1 = __importDefault(require("@mui/icons-material/Minimize"));
+const Add_1 = __importDefault(require("@mui/icons-material/Add"));
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    facet: {
+        margin: 0,
+        marginLeft: theme.spacing(2),
+    },
+    select: {
+        marginBottom: theme.spacing(2),
+    },
+}));
+function FacetFilter({ column, vals, width, dispatch, filters, }) {
+    const { classes } = useStyles();
+    const [visible, setVisible] = (0, react_1.useState)(true);
+    return (react_1.default.createElement(material_1.FormControl, { key: column.field, className: classes.facet, style: { width } },
+        react_1.default.createElement("div", { style: { display: 'flex' } },
+            react_1.default.createElement(material_1.Typography, null, column.field),
+            react_1.default.createElement(material_1.Tooltip, { title: "Clear selection on this facet filter" },
+                react_1.default.createElement(material_1.IconButton, { onClick: () => dispatch({ key: column.field, val: [] }), size: "small" },
+                    react_1.default.createElement(Clear_1.default, null))),
+            react_1.default.createElement(material_1.Tooltip, { title: "Minimize/expand this facet filter" },
+                react_1.default.createElement(material_1.IconButton, { onClick: () => setVisible(!visible), size: "small" }, visible ? react_1.default.createElement(Minimize_1.default, null) : react_1.default.createElement(Add_1.default, null)))),
+        visible ? (react_1.default.createElement(material_1.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),
+                });
+            } }, vals
+            .sort((a, b) => a[0].localeCompare(b[0]))
+            .map(([name, count]) => (react_1.default.createElement("option", { key: name, value: name },
+            name,
+            " (",
+            count,
+            ")"))))) : null));
+}
+exports.default = FacetFilter;

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

@@ -1,86 +1,34 @@
 "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 mui_1 = require("tss-react/mui");
-// icon
-const Clear_1 = __importDefault(require("@mui/icons-material/Clear"));
-const Minimize_1 = __importDefault(require("@mui/icons-material/Minimize"));
-const Add_1 = __importDefault(require("@mui/icons-material/Add"));
-const useStyles = (0, mui_1.makeStyles)()(theme => ({
-    facet: {
-        margin: 0,
-        marginLeft: theme.spacing(2),
-    },
-    select: {
-        marginBottom: theme.spacing(2),
-    },
-}));
-function FacetFilter({ column, vals, width, dispatch, filters, }) {
-    const { classes } = useStyles();
-    const [visible, setVisible] = (0, react_1.useState)(true);
-    return (react_1.default.createElement(material_1.FormControl, { key: column.field, className: classes.facet, style: { width } },
-        react_1.default.createElement("div", { style: { display: 'flex' } },
-            react_1.default.createElement(material_1.Typography, null, column.field),
-            react_1.default.createElement(material_1.Tooltip, { title: "Clear selection on this facet filter" },
-                react_1.default.createElement(material_1.IconButton, { onClick: () => {
-                        dispatch({ key: column.field, val: [] });
-                    }, size: "small" },
-                    react_1.default.createElement(Clear_1.default, null))),
-            react_1.default.createElement(material_1.Tooltip, { title: "Minimize/expand this facet filter" },
-                react_1.default.createElement(material_1.IconButton, { onClick: () => setVisible(!visible), size: "small" }, visible ? react_1.default.createElement(Minimize_1.default, null) : react_1.default.createElement(Add_1.default, null)))),
-        visible ? (react_1.default.createElement(material_1.Select, { multiple: true, native: true, className: classes.select, value: filters[column.field], onChange: event => {
-                // @ts-expect-error
-                const { options } = event.target;
-                const val = [];
-                const len = options.length;
-                for (let i = 0; i < len; i++) {
-                    if (options[i].selected) {
-                        val.push(options[i].value);
-                    }
-                }
-                dispatch({ key: column.field, val });
-            } }, vals
-            .sort((a, b) => a[0].localeCompare(b[0]))
-            .map(([name, count]) => (react_1.default.createElement("option", { key: name, value: name },
-            name,
-            " (",
-            count,
-            ")"))))) : null));
-}
+const react_1 = __importDefault(require("react"));
+const FacetFilter_1 = __importDefault(require("./FacetFilter"));
 function FacetFilters({ rows, columns, dispatch, filters, width, }) {
+    var _a, _b;
     const facets = columns.slice(1);
-    const uniqs = facets.map(() => new Map());
-    for (const row of rows) {
-        for (const [index, column] of facets.entries()) {
-            const elt = uniqs[index];
-            const key = `${row[column.field] || ''}`;
+    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 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) {
+            ret.add(entry);
+        }
+    }
+    for (const entry of facetKeys) {
+        ret.add(entry);
+    }
+    let currentRows = rows;
+    for (const facet of ret) {
+        const elt = uniqs.get(facet);
+        for (const row of currentRows) {
+            const key = `${row[facet] || ''}`;
             const val = elt.get(key);
             // we don't allow filtering on empty yet
             if (key) {
@@ -92,7 +40,13 @@ 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;
+        currentRows = currentRows.filter(row => {
+            return filter !== undefined ? filter.has(row[facet]) : true;
+        });
     }
-    return (react_1.default.createElement("div", null, facets.map((column, index) => (react_1.default.createElement(FacetFilter, { key: column.field, vals: [...uniqs[index]], column: column, width: width, dispatch: dispatch, filters: filters })))));
+    return (react_1.default.createElement("div", null, facets.map(column => {
+        return (react_1.default.createElement(FacetFilter_1.default, { key: column.field, vals: [...uniqs.get(column.field)], column: column, width: width, dispatch: dispatch, filters: filters }));
+    })));
 }
 exports.default = FacetFilters;

package/dist/HierarchicalTrackSelectorWidget/components/faceted/FacetedDialog.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
 import { HierarchicalTrackSelectorModel } from '../../model';
-declare function FacetedDlg(props: {
+declare const FacetedTrackSelectorDialog: (props: {
     handleClose: () => void;
     model: HierarchicalTrackSelectorModel;
-}): React.JSX.Element;
-declare const _default: typeof FacetedDlg;
-export default _default;
+}) => React.JSX.Element;
+export default FacetedTrackSelectorDialog;

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

@@ -8,10 +8,10 @@ const material_1 = require("@mui/material");
 const ui_1 = require("@jbrowse/core/ui");
 const mobx_react_1 = require("mobx-react");
 const FacetedSelector_1 = __importDefault(require("./FacetedSelector"));
-function FacetedDlg(props) {
+const FacetedTrackSelectorDialog = (0, mobx_react_1.observer)(function (props) {
     const { handleClose } = props;
     return (react_1.default.createElement(ui_1.Dialog, { open: true, onClose: handleClose, maxWidth: "xl", title: "Faceted track selector" },
         react_1.default.createElement(material_1.DialogContent, null,
             react_1.default.createElement(FacetedSelector_1.default, { ...props }))));
-}
-exports.default = (0, mobx_react_1.observer)(FacetedDlg);
+});
+exports.default = FacetedTrackSelectorDialog;

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

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

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

@@ -34,7 +34,7 @@ const Clear_1 = __importDefault(require("@mui/icons-material/Clear"));
 const MoreVert_1 = __importDefault(require("@mui/icons-material/MoreVert"));
 // locals
 const ShoppingCart_1 = __importDefault(require("../ShoppingCart"));
-function FacetedHeader({ setFilterText, setUseShoppingCart, setHideSparse, setShowOptions, showOptions, hideSparse, useShoppingCart, filterText, model, }) {
+function FacetedHeader({ setFilterText, setUseShoppingCart, setShowSparse, setShowFilters, setShowOptions, showOptions, showSparse, showFilters, useShoppingCart, filterText, model, }) {
     const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(material_1.Grid, { container: true, spacing: 4, alignItems: "center" },
@@ -60,9 +60,15 @@ function FacetedHeader({ setFilterText, setUseShoppingCart, setHideSparse, setSh
                     checked: useShoppingCart,
                 },
                 {
-                    label: 'Hide sparse metadata columns',
-                    onClick: () => setHideSparse(!hideSparse),
-                    checked: hideSparse,
+                    label: 'Show sparse metadata columns',
+                    onClick: () => setShowSparse(!showSparse),
+                    checked: showSparse,
+                    type: 'checkbox',
+                },
+                {
+                    label: 'Show facet filters',
+                    onClick: () => setShowFilters(!showFilters),
+                    checked: showFilters,
                     type: 'checkbox',
                 },
                 {

package/dist/HierarchicalTrackSelectorWidget/components/faceted/FacetedSelector.d.ts

@@ -6,7 +6,7 @@ export interface InfoArgs {
     id: string;
     conf: AnyConfigurationModel;
 }
-declare const _default: ({ model, }: {
+declare const FacetedSelector: ({ model, }: {
     model: HierarchicalTrackSelectorModel;
 }) => React.JSX.Element;
-export default _default;
+export default FacetedSelector;

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

@@ -37,40 +37,48 @@ 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 = __importStar(require("@jbrowse/core/ui/ResizeBar"));
+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"));
-// locals
-const model_1 = require("../../model");
+const util_2 = require("../../util");
 const FacetedHeader_1 = __importDefault(require("./FacetedHeader"));
 const FacetFilters_1 = __importDefault(require("./FacetFilters"));
-const util_2 = require("./util");
+const util_3 = require("./util");
 const nonMetadataKeys = ['category', 'adapter', 'description'];
+const useStyles = (0, mui_1.makeStyles)()({
+    cell: {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    },
+});
 const frac = 0.75;
-exports.default = (0, mobx_react_1.observer)(function FacetedSelector({ model, }) {
+const FacetedSelector = (0, mobx_react_1.observer)(function FacetedSelector({ model, }) {
     var _a, _b;
+    const { classes } = useStyles();
     const { view, selection } = model;
     const { pluginManager } = (0, util_1.getEnv)(model);
-    const { ref, scrollLeft } = (0, ResizeBar_1.useResizeBar)();
+    const { ref, scrollLeft } = (0, useResizeBar_1.useResizeBar)();
     const [filterText, setFilterText] = (0, react_1.useState)('');
-    const [showOptions, setShowOptions] = (0, react_1.useState)(false);
+    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 [hideSparse, setHideSparse] = (0, react_1.useState)(true);
-    const [panelWidth, setPanelWidth] = (0, react_1.useState)(400);
+    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) => {
-        return { ...state, [update.key]: update.val };
-    }, {});
+    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, model_1.matches)(filterDebounced, conf, session))
+            .filter(conf => (0, util_2.matches)(filterDebounced, conf, session))
             .map(track => {
             var _a, _b;
             const metadata = (0, configuration_1.readConfObject)(track, 'metadata');
@@ -86,10 +94,10 @@ exports.default = (0, mobx_react_1.observer)(function FacetedSelector({ model, }
             };
         });
     }, [model, filterDebounced, session]);
-    const filteredNonMetadataKeys = (0, react_1.useMemo)(() => nonMetadataKeys.filter(f => !hideSparse ? true : rows.map(r => r[f]).filter(f => !!f).length > 5), [hideSparse, rows]);
-    const filteredMetadataKeys = (0, react_1.useMemo)(() => [...new Set(rows.flatMap(row => (0, util_2.getRootKeys)(row.metadata)))].filter(f => !hideSparse
+    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), [hideSparse, rows]);
+        : 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,
@@ -125,15 +133,15 @@ exports.default = (0, mobx_react_1.observer)(function FacetedSelector({ model, }
                 (0, util_1.measureGridWidth)(rows.map(r => r.metadata[e]), { stripHTML: true, maxWidth: 400 }),
             ])),
         }));
-    }, [filteredMetadataKeys, visible, filteredNonMetadataKeys, hideSparse, rows]);
-    const widthsDebounced = (0, util_1.useDebounce)(widths, 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;
-                return (react_1.default.createElement(react_1.default.Fragment, null,
+                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,
@@ -151,7 +159,7 @@ exports.default = (0, mobx_react_1.observer)(function FacetedSelector({ model, }
                 width: (_a = widthsDebounced[e]) !== null && _a !== void 0 ? _a : 100,
                 renderCell: (params) => {
                     const { value } = params;
-                    return value ? react_1.default.createElement(SanitizedHTML_1.default, { html: value }) : '';
+                    return (react_1.default.createElement("div", { className: classes.cell }, value ? react_1.default.createElement(SanitizedHTML_1.default, { html: value }) : ''));
                 },
             });
         }),
@@ -162,19 +170,22 @@ exports.default = (0, mobx_react_1.observer)(function FacetedSelector({ model, }
                 width: (_a = widthsDebounced[e]) !== null && _a !== void 0 ? _a : 100,
                 renderCell: (params) => {
                     const { value } = params;
-                    return value ? react_1.default.createElement(SanitizedHTML_1.default, { html: value }) : '';
+                    return (react_1.default.createElement("div", { className: classes.cell }, value ? react_1.default.createElement(SanitizedHTML_1.default, { html: value }) : ''));
                 },
             });
         }),
     ];
-    const shownTrackIds = tracks.map(t => t.configuration.trackId);
-    const arrFilters = Object.entries(filters).filter(f => f[1].length > 0);
+    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, { setHideSparse: setHideSparse, setShowOptions: setShowOptions, setFilterText: setFilterText, setUseShoppingCart: setUseShoppingCart, hideSparse: hideSparse, showOptions: showOptions, filterText: filterText, useShoppingCart: useShoppingCart, model: model }),
+        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("div", { ref: ref, style: {
                 display: 'flex',
                 overflow: 'hidden',
@@ -183,21 +194,22 @@ exports.default = (0, mobx_react_1.observer)(function FacetedSelector({ model, }
             } },
             react_1.default.createElement("div", { style: {
                     height: window.innerHeight * frac,
-                    width: window.innerWidth * frac - panelWidth,
+                    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) => [
                         entry[0],
                         newWidths[idx],
                     ]))), scrollLeft: scrollLeft }),
-                react_1.default.createElement(x_data_grid_1.DataGrid, { rows: rows.filter(row => arrFilters.every(([key, val]) => val.includes(row[key]))), 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: newModel => setVisible(newModel), columnHeaderHeight: 35, checkboxSelection: true, disableRowSelectionOnClick: true, keepNonExistentRowsSelected: true, onRowSelectionModelChange: userSelectedIds => {
                         if (!useShoppingCart) {
                             const a1 = shownTrackIds;
-                            const a2 = userSelectedIds;
+                            const a2 = new Set(userSelectedIds);
                             // synchronize the user selection with the view
                             // see share https://stackoverflow.com/a/33034768/2129219
                             (0, mobx_1.transaction)(() => {
-                                a1.filter(x => !a2.includes(x)).map(t => view.hideTrack(t));
-                                a2.filter(x => !a1.includes(x)).map(t => view.showTrack(t));
+                                ;
+                                [...a1].filter(x => !a2.has(x)).map(t => view.hideTrack(t));
+                                [...a2].filter(x => !a1.has(x)).map(t => view.showTrack(t));
                             });
                         }
                         else {
@@ -206,10 +218,18 @@ exports.default = (0, mobx_react_1.observer)(function FacetedSelector({ model, }
                             const tracks = userSelectedIds.map(id => (0, mobx_state_tree_1.resolveIdentifier)(schema, root, id));
                             model.setSelection(tracks);
                         }
-                    }, rowSelectionModel: useShoppingCart ? selection.map(s => s.trackId) : shownTrackIds, slots: { toolbar: showOptions ? x_data_grid_1.GridToolbar : null }, slotProps: {
+                    }, rowSelectionModel: useShoppingCart
+                        ? selection.map(s => s.trackId)
+                        : [...shownTrackIds], slots: { toolbar: showOptions ? x_data_grid_1.GridToolbar : null }, slotProps: {
                         toolbar: { printOptions: { disableToolbarButton: true } },
                     }, columns: columns, rowHeight: 25 })),
-            react_1.default.createElement(ui_1.ResizeHandle, { vertical: true, onDrag: dist => setPanelWidth(panelWidth - dist), style: { background: 'grey', width: 5 } }),
-            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 })))));
+            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("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)));
 });
+exports.default = FacetedSelector;

package/dist/HierarchicalTrackSelectorWidget/components/tree/HamburgerMenu.d.ts

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

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

@@ -27,36 +27,27 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
-const material_1 = require("@mui/material");
-const mui_1 = require("tss-react/mui");
 const mobx_react_1 = require("mobx-react");
-const Menu_1 = __importDefault(require("@jbrowse/core/ui/Menu"));
 const util_1 = require("@jbrowse/core/util");
 const configuration_1 = require("@jbrowse/core/configuration");
+const CascadingMenuButton_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenuButton"));
 // icons
-const Menu_2 = __importDefault(require("@mui/icons-material/Menu"));
+const Menu_1 = __importDefault(require("@mui/icons-material/Menu"));
 // 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'))));
 const ManageConnectionsDlg = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('../dialogs/ManageConnectionsDialog'))));
 const ToggleConnectionsDlg = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('../dialogs/ToggleConnectionsDialog'))));
-const useStyles = (0, mui_1.makeStyles)()(theme => ({
-    menuIcon: {
-        marginRight: theme.spacing(1),
-        marginBottom: 0,
-    },
-}));
-exports.default = (0, mobx_react_1.observer)(function HamburgerMenu({ model, }) {
+const HamburgerMenu = (0, mobx_react_1.observer)(function ({ model, }) {
     const session = (0, util_1.getSession)(model);
-    const [menuEl, setMenuEl] = (0, react_1.useState)();
     const [modalInfo, setModalInfo] = (0, react_1.useState)();
     const [deleteDlgDetails, setDeleteDlgDetails] = (0, react_1.useState)();
     const [connectionToggleOpen, setConnectionToggleOpen] = (0, react_1.useState)(false);
     const [connectionManagerOpen, setConnectionManagerOpen] = (0, react_1.useState)(false);
-    const { classes } = useStyles();
     function breakConnection(connectionConf, deletingConnection) {
+        var _a;
         const name = (0, configuration_1.readConfObject)(connectionConf, 'name');
-        const result = session.prepareToBreakConnection(connectionConf);
+        const result = (_a = session.prepareToBreakConnection) === null || _a === void 0 ? void 0 : _a.call(session, connectionConf);
         if (result) {
             const [safelyBreakConnection, dereferenceTypeCount] = result;
             if (Object.keys(dereferenceTypeCount).length > 0) {
@@ -76,12 +67,7 @@ exports.default = (0, mobx_react_1.observer)(function HamburgerMenu({ model, })
         }
     }
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.IconButton, { className: classes.menuIcon, onClick: event => setMenuEl(event.currentTarget) },
-            react_1.default.createElement(Menu_2.default, null)),
-        react_1.default.createElement(Menu_1.default, { anchorEl: menuEl, open: Boolean(menuEl), onMenuItemClick: (_, callback) => {
-                callback();
-                setMenuEl(undefined);
-            }, onClose: () => setMenuEl(undefined), menuItems: [
+        react_1.default.createElement(CascadingMenuButton_1.default, { menuItems: [
                 ...((0, util_1.isSessionWithAddTracks)(session)
                     ? [
                         {
@@ -120,10 +106,42 @@ exports.default = (0, mobx_react_1.observer)(function HamburgerMenu({ model, })
                         },
                     ]
                     : []),
-            ] }),
+                { 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 subcategories',
+                            onClick: () => model.collapseSubCategories(),
+                        },
+                    ]
+                    : []),
+                {
+                    label: 'Collapse top-level categories',
+                    onClick: () => model.collapseTopLevelCategories(),
+                },
+                {
+                    label: 'Expand all categories',
+                    onClick: () => model.expandAllCategories(),
+                },
+            ] },
+            react_1.default.createElement(Menu_1.default, null)),
         react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement(react_1.default.Fragment, null) },
             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)));
 });
+exports.default = HamburgerMenu;

package/dist/HierarchicalTrackSelectorWidget/components/tree/HierarchicalHeader.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
 import { HierarchicalTrackSelectorModel } from '../../model';
-declare function HierarchicalTrackSelectorHeader({ model, setHeaderHeight, }: {
+declare const HierarchicalTrackSelectorHeader: ({ model, setHeaderHeight, }: {
     model: HierarchicalTrackSelectorModel;
     setHeaderHeight: (n: number) => void;
-}): React.JSX.Element;
-declare const _default: typeof HierarchicalTrackSelectorHeader;
-export default _default;
+}) => React.JSX.Element;
+export default HierarchicalTrackSelectorHeader;

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

@@ -45,20 +45,24 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         marginBottom: 0,
     },
 }));
-function HierarchicalTrackSelectorHeader({ model, setHeaderHeight, }) {
+const SearchTracksTextField = (0, mobx_react_1.observer)(function ({ model, }) {
+    const { filterText } = model;
+    const { classes } = useStyles();
+    return (react_1.default.createElement(material_1.TextField, { className: classes.searchBox, label: "Filter tracks", value: filterText, onChange: event => model.setFilterText(event.target.value), fullWidth: true, InputProps: {
+            endAdornment: (react_1.default.createElement(material_1.InputAdornment, { position: "end" },
+                react_1.default.createElement(material_1.IconButton, { onClick: () => model.clearFilterText() },
+                    react_1.default.createElement(Clear_1.default, null)))),
+        } }));
+});
+const HierarchicalTrackSelectorHeader = (0, mobx_react_1.observer)(function ({ model, setHeaderHeight, }) {
     const { classes } = useStyles();
     const [facetedOpen, setFacetedOpen] = (0, react_1.useState)(false);
-    const { filterText } = model;
     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(material_1.TextField, { className: classes.searchBox, label: "Filter tracks", value: filterText, onChange: event => model.setFilterText(event.target.value), fullWidth: true, InputProps: {
-                    endAdornment: (react_1.default.createElement(material_1.InputAdornment, { position: "end" },
-                        react_1.default.createElement(material_1.IconButton, { onClick: () => model.clearFilterText() },
-                            react_1.default.createElement(Clear_1.default, null)))),
-                } }),
+            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)));
-}
-exports.default = (0, mobx_react_1.observer)(HierarchicalTrackSelectorHeader);
+});
+exports.default = HierarchicalTrackSelectorHeader;