@jbrowse/plugin-data-management 2.18.0 → 3.0.1

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

@@ -3,7 +3,7 @@ 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 jsx_runtime_1 = require("react/jsx-runtime");
 const mobx_react_1 = require("mobx-react");
 const FacetFilter_1 = __importDefault(require("./FacetFilter"));
 const util_1 = require("./util");
@@ -12,38 +12,40 @@ const FacetFilters = (0, mobx_react_1.observer)(function ({ rows, columns, model
     const { faceted } = model;
     const { filters } = faceted;
     const facets = columns.slice(1);
-    const uniqs = new Map(facets.map(f => [f.field, new Map()]));
+    const facetFieldToCategoryCountMap = new Map(columns.slice(1).map(f => [f.field, new Map()]));
     const filterKeys = faceted.filters.keys();
     const facetKeys = facets.map(f => f.field);
-    const ret = new Set();
+    const facetKeysPrioritizingUserSelections = new Set();
     for (const entry of filterKeys) {
         if ((_a = filters.get(entry)) === null || _a === void 0 ? void 0 : _a.length) {
-            ret.add(entry);
+            facetKeysPrioritizingUserSelections.add(entry);
         }
     }
     for (const entry of facetKeys) {
-        ret.add(entry);
+        facetKeysPrioritizingUserSelections.add(entry);
     }
     let currentRows = rows;
-    for (const facet of ret) {
-        const elt = uniqs.get(facet);
-        for (const row of currentRows) {
-            const key = (0, util_1.getRowStr)(facet, row);
-            const val = elt.get(key);
-            if (key) {
-                if (val === undefined) {
-                    elt.set(key, 1);
-                }
-                else {
-                    elt.set(key, val + 1);
+    for (const facetKey of facetKeysPrioritizingUserSelections) {
+        const categoryCountMap = facetFieldToCategoryCountMap.get(facetKey);
+        if (categoryCountMap) {
+            for (const row of currentRows) {
+                const key = (0, util_1.getRowStr)(facetKey, row);
+                const currentCount = categoryCountMap.get(key);
+                if (key) {
+                    if (currentCount === undefined) {
+                        categoryCountMap.set(key, 1);
+                    }
+                    else {
+                        categoryCountMap.set(key, currentCount + 1);
+                    }
                 }
             }
         }
-        const filter = ((_b = filters.get(facet)) === null || _b === void 0 ? void 0 : _b.length)
-            ? new Set(filters.get(facet))
+        const filter = ((_b = filters.get(facetKey)) === null || _b === void 0 ? void 0 : _b.length)
+            ? new Set(filters.get(facetKey))
             : undefined;
-        currentRows = currentRows.filter(row => filter !== undefined ? filter.has((0, util_1.getRowStr)(facet, row)) : true);
+        currentRows = currentRows.filter(row => filter !== undefined ? filter.has((0, util_1.getRowStr)(facetKey, row)) : true);
     }
-    return (react_1.default.createElement("div", null, facets.map(c => (react_1.default.createElement(FacetFilter_1.default, { key: c.field, vals: [...uniqs.get(c.field)], column: c, model: model })))));
+    return ((0, jsx_runtime_1.jsx)("div", { children: facets.map(c => ((0, jsx_runtime_1.jsx)(FacetFilter_1.default, { vals: [...facetFieldToCategoryCountMap.get(c.field)], column: c, model: model }, c.field))) }));
 });
 exports.default = FacetFilters;

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

@@ -0,0 +1,9 @@
+import type { HierarchicalTrackSelectorModel } from '../../model';
+import type { GridColDef } from '@mui/x-data-grid';
+declare const FacetedDataGrid: ({ model, columns, shownTrackIds, selection, }: {
+    model: HierarchicalTrackSelectorModel;
+    columns: GridColDef[];
+    shownTrackIds: Set<string>;
+    selection: any[];
+}) => import("react/jsx-runtime").JSX.Element;
+export default FacetedDataGrid;

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

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const util_1 = require("@jbrowse/core/util");
+const x_data_grid_1 = require("@mui/x-data-grid");
+const mobx_1 = require("mobx");
+const mobx_react_1 = require("mobx-react");
+const mobx_state_tree_1 = require("mobx-state-tree");
+const FacetedDataGrid = (0, mobx_react_1.observer)(function ({ model, columns, shownTrackIds, selection, }) {
+    const { pluginManager } = (0, util_1.getEnv)(model);
+    const { view, faceted } = model;
+    const { rows, useShoppingCart, showOptions, filteredRows, filteredNonMetadataKeys, filteredMetadataKeys, visible, } = faceted;
+    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
+            .filter(f => visible[f])
+            .map(e => [
+            e,
+            (0, util_1.measureGridWidth)(rows.map(r => r[e]), { maxWidth: 400, stripHTML: true }),
+        ])),
+        ...Object.fromEntries(filteredMetadataKeys
+            .filter(f => visible[`metadata.${f}`])
+            .map(e => {
+            return [
+                `metadata.${e}`,
+                (0, util_1.measureGridWidth)(rows.map(r => r.metadata[e]), { maxWidth: 400, stripHTML: true }),
+            ];
+        })),
+    });
+    return ((0, jsx_runtime_1.jsx)(x_data_grid_1.DataGrid, { rows: filteredRows, onColumnWidthChange: arg => {
+            setWidths({
+                ...widths,
+                [arg.colDef.field]: arg.width,
+            });
+        }, columnVisibilityModel: visible, onColumnVisibilityModelChange: n => {
+            model.faceted.setVisible(n);
+        }, columnHeaderHeight: 35, checkboxSelection: true, disableRowSelectionOnClick: true, keepNonExistentRowsSelected: true, onRowSelectionModelChange: userSelectedIds => {
+            if (!useShoppingCart) {
+                const a1 = shownTrackIds;
+                const a2 = new Set(userSelectedIds);
+                (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);
+                        model.addToRecentlyUsed(t);
+                    });
+                });
+            }
+            else {
+                const root = (0, mobx_state_tree_1.getRoot)(model);
+                const schema = pluginManager.pluggableConfigSchemaType('track');
+                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,
+                },
+            },
+        }, columns: columns.map(r => ({
+            ...r,
+            width: widths[r.field],
+        })), rowHeight: 25 }));
+});
+exports.default = FacetedDataGrid;

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

@@ -1,7 +1,6 @@
-import React from 'react';
 import type { HierarchicalTrackSelectorModel } from '../../model';
 declare const FacetedTrackSelectorDialog: (props: {
     handleClose: () => void;
     model: HierarchicalTrackSelectorModel;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default FacetedTrackSelectorDialog;

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

@@ -3,15 +3,13 @@ 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 jsx_runtime_1 = require("react/jsx-runtime");
 const ui_1 = require("@jbrowse/core/ui");
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
 const FacetedSelector_1 = __importDefault(require("./FacetedSelector"));
 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 }))));
+    return ((0, jsx_runtime_1.jsx)(ui_1.Dialog, { open: true, onClose: handleClose, maxWidth: "xl", title: "Faceted track selector", children: (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(FacetedSelector_1.default, { ...props }) }) }));
 });
 exports.default = FacetedTrackSelectorDialog;

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

@@ -1,5 +1,4 @@
-import React from 'react';
 import type { HierarchicalTrackSelectorModel } from '../../model';
 export default function FacetedHeader({ model, }: {
     model: HierarchicalTrackSelectorModel;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -1,33 +1,11 @@
 "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 });
 exports.default = FacetedHeader;
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const ui_1 = require("@jbrowse/core/ui");
 const Clear_1 = __importDefault(require("@mui/icons-material/Clear"));
 const MoreVert_1 = __importDefault(require("@mui/icons-material/MoreVert"));
@@ -37,64 +15,53 @@ function FacetedHeader({ model, }) {
     const { faceted } = model;
     const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
     const { showOptions, showFilters, showSparse, useShoppingCart } = faceted;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.Grid, { container: true, spacing: 4, alignItems: "center" },
-            react_1.default.createElement(material_1.Grid, { item: true },
-                react_1.default.createElement(material_1.TextField, { label: "Search...", value: faceted.filterText, onChange: event => {
-                        faceted.setFilterText(event.target.value);
-                    }, slotProps: {
-                        input: {
-                            endAdornment: (react_1.default.createElement(material_1.InputAdornment, { position: "end" },
-                                react_1.default.createElement(material_1.IconButton, { onClick: () => {
-                                        faceted.setFilterText('');
-                                    } },
-                                    react_1.default.createElement(Clear_1.default, null)))),
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, spacing: 4, alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, children: (0, jsx_runtime_1.jsx)(material_1.TextField, { label: "Search...", value: faceted.filterText, onChange: event => {
+                                faceted.setFilterText(event.target.value);
+                            }, slotProps: {
+                                input: {
+                                    endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => {
+                                                faceted.setFilterText('');
+                                            }, children: (0, jsx_runtime_1.jsx)(Clear_1.default, {}) }) })),
+                                },
+                            } }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: event => {
+                                setAnchorEl(event.currentTarget);
+                            }, children: (0, jsx_runtime_1.jsx)(MoreVert_1.default, {}) }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, children: (0, jsx_runtime_1.jsx)(ShoppingCart_1.default, { model: model }) })] }), (0, jsx_runtime_1.jsx)(ui_1.Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => {
+                    setAnchorEl(null);
+                }, onMenuItemClick: (_event, callback) => {
+                    callback();
+                    setAnchorEl(null);
+                }, menuItems: [
+                    {
+                        label: 'Add tracks to selection instead of turning them on/off',
+                        onClick: () => {
+                            faceted.setUseShoppingCart(!useShoppingCart);
                         },
-                    } })),
-            react_1.default.createElement(material_1.Grid, { item: true },
-                react_1.default.createElement(material_1.IconButton, { onClick: event => {
-                        setAnchorEl(event.currentTarget);
-                    } },
-                    react_1.default.createElement(MoreVert_1.default, null))),
-            react_1.default.createElement(material_1.Grid, { item: true },
-                react_1.default.createElement(ShoppingCart_1.default, { model: model }))),
-        react_1.default.createElement(ui_1.Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => {
-                setAnchorEl(null);
-            }, onMenuItemClick: (_event, callback) => {
-                callback();
-                setAnchorEl(null);
-            }, menuItems: [
-                {
-                    label: 'Add tracks to selection instead of turning them on/off',
-                    onClick: () => {
-                        faceted.setUseShoppingCart(!useShoppingCart);
+                        type: 'checkbox',
+                        checked: useShoppingCart,
                     },
-                    type: 'checkbox',
-                    checked: useShoppingCart,
-                },
-                {
-                    label: 'Show sparse metadata columns',
-                    onClick: () => {
-                        faceted.setShowSparse(!showSparse);
+                    {
+                        label: 'Show sparse metadata columns',
+                        onClick: () => {
+                            faceted.setShowSparse(!showSparse);
+                        },
+                        checked: showSparse,
+                        type: 'checkbox',
                     },
-                    checked: showSparse,
-                    type: 'checkbox',
-                },
-                {
-                    label: 'Show facet filters',
-                    onClick: () => {
-                        faceted.setShowFilters(!showFilters);
+                    {
+                        label: 'Show facet filters',
+                        onClick: () => {
+                            faceted.setShowFilters(!showFilters);
+                        },
+                        checked: showFilters,
+                        type: 'checkbox',
                     },
-                    checked: showFilters,
-                    type: 'checkbox',
-                },
-                {
-                    label: 'Show extra table options',
-                    onClick: () => {
-                        faceted.setShowOptions(!showOptions);
+                    {
+                        label: 'Show extra table options',
+                        onClick: () => {
+                            faceted.setShowOptions(!showOptions);
+                        },
+                        checked: showOptions,
+                        type: 'checkbox',
                     },
-                    checked: showOptions,
-                    type: 'checkbox',
-                },
-            ] })));
+                ] })] }));
 }

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { HierarchicalTrackSelectorModel } from '../../model';
 import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
 export interface InfoArgs {
@@ -8,5 +7,5 @@ export interface InfoArgs {
 }
 declare const FacetedSelector: ({ model, }: {
     model: HierarchicalTrackSelectorModel;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default FacetedSelector;

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

@@ -1,41 +1,15 @@
 "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 jsx_runtime_1 = require("react/jsx-runtime");
 const ui_1 = require("@jbrowse/core/ui");
 const SanitizedHTML_1 = __importDefault(require("@jbrowse/core/ui/SanitizedHTML"));
-const util_1 = require("@jbrowse/core/util");
-const x_data_grid_1 = require("@mui/x-data-grid");
-const mobx_1 = require("mobx");
 const mobx_react_1 = require("mobx-react");
-const mobx_state_tree_1 = require("mobx-state-tree");
 const mui_1 = require("tss-react/mui");
 const FacetFilters_1 = __importDefault(require("./FacetFilters"));
+const FacetedDataGrid_1 = __importDefault(require("./FacetedDataGrid"));
 const FacetedHeader_1 = __importDefault(require("./FacetedHeader"));
 const TrackLabelMenu_1 = __importDefault(require("../tree/TrackLabelMenu"));
 const useStyles = (0, mui_1.makeStyles)()({
@@ -52,28 +26,9 @@ const useStyles = (0, mui_1.makeStyles)()({
 });
 const frac = 0.75;
 const FacetedSelector = (0, mobx_react_1.observer)(function FacetedSelector({ model, }) {
-    var _a;
     const { classes } = useStyles();
-    const { view, selection, shownTrackIds, faceted } = model;
-    const { rows, panelWidth, showFilters, useShoppingCart, showOptions, filteredRows, filteredNonMetadataKeys, filteredMetadataKeys, visible, } = faceted;
-    const { pluginManager } = (0, util_1.getEnv)(model);
-    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
-            .filter(f => visible[f])
-            .map(e => [
-            e,
-            (0, util_1.measureGridWidth)(rows.map(r => r[e]), { maxWidth: 400, stripHTML: true }),
-        ])),
-        ...Object.fromEntries(filteredMetadataKeys
-            .filter(f => visible[`metadata.${f}`])
-            .map(e => {
-            return [
-                `metadata.${e}`,
-                (0, util_1.measureGridWidth)(rows.map(r => r.metadata[e]), { maxWidth: 400, stripHTML: true }),
-            ];
-        })),
-    });
+    const { selection, shownTrackIds, faceted } = model;
+    const { rows, panelWidth, showFilters, filteredNonMetadataKeys, filteredMetadataKeys, } = faceted;
     const columns = [
         {
             field: 'name',
@@ -81,87 +36,40 @@ const FacetedSelector = (0, mobx_react_1.observer)(function FacetedSelector({ mo
             renderCell: 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(TrackLabelMenu_1.default, { id: id, conf: conf, trackId: id, model: model })));
+                return ((0, jsx_runtime_1.jsxs)("div", { className: classes.cell, children: [(0, jsx_runtime_1.jsx)(SanitizedHTML_1.default, { html: value }), (0, jsx_runtime_1.jsx)(TrackLabelMenu_1.default, { id: id, conf: conf, trackId: id, model: model })] }));
             },
-            width: (_a = widths.name) !== null && _a !== void 0 ? _a : 100,
         },
         ...filteredNonMetadataKeys.map(e => {
-            var _a;
             return {
                 field: e,
-                width: (_a = widths[e]) !== null && _a !== void 0 ? _a : 100,
                 renderCell: params => {
                     const val = params.value;
-                    return val ? (react_1.default.createElement(SanitizedHTML_1.default, { className: classes.cell, html: val })) : ('');
+                    return val ? ((0, jsx_runtime_1.jsx)(SanitizedHTML_1.default, { className: classes.cell, html: val })) : ('');
                 },
             };
         }),
         ...filteredMetadataKeys.map(e => {
-            var _a;
             return {
                 field: `metadata.${e}`,
                 headerName: ['name', ...filteredNonMetadataKeys].includes(e)
                     ? `${e} (from metadata)`
                     : e,
-                width: (_a = widths[`metadata.${e}`]) !== null && _a !== void 0 ? _a : 100,
                 valueGetter: (_, row) => { var _a; return `${(_a = row.metadata[e]) !== null && _a !== void 0 ? _a : ''}`; },
                 renderCell: params => {
                     const val = params.value;
-                    return val ? (react_1.default.createElement(SanitizedHTML_1.default, { className: classes.cell, html: val })) : ('');
+                    return val ? ((0, jsx_runtime_1.jsx)(SanitizedHTML_1.default, { className: classes.cell, html: val })) : ('');
                 },
             };
         }),
     ];
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(FacetedHeader_1.default, { model: model }),
-        react_1.default.createElement("div", { style: {
-                display: 'flex',
-                overflow: 'hidden',
-                height: window.innerHeight * frac,
-                width: window.innerWidth * frac,
-            } },
-            react_1.default.createElement("div", { style: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FacetedHeader_1.default, { model: model }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    display: 'flex',
+                    overflow: 'hidden',
                     height: window.innerHeight * frac,
-                    width: window.innerWidth * frac - (showFilters ? panelWidth : 0),
-                } },
-                react_1.default.createElement(x_data_grid_1.DataGrid, { rows: filteredRows, onColumnWidthChange: arg => {
-                        setWidths({ ...widths, [arg.colDef.field]: arg.width });
-                    }, 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);
-                            (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);
-                                    model.addToRecentlyUsed(t);
-                                });
-                            });
-                        }
-                        else {
-                            const root = (0, mobx_state_tree_1.getRoot)(model);
-                            const schema = pluginManager.pluggableConfigSchemaType('track');
-                            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,
-                            },
-                        },
-                    }, 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 => faceted.setPanelWidth(panelWidth - dist), className: classes.resizeHandle }),
-                react_1.default.createElement("div", { style: { width: panelWidth, overflow: 'auto' } },
-                    react_1.default.createElement(FacetFilters_1.default, { model: model, rows: rows, columns: columns })))) : null)));
+                    width: window.innerWidth * frac,
+                }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                            height: window.innerHeight * frac,
+                            width: window.innerWidth * frac - (showFilters ? panelWidth : 0),
+                        }, children: (0, jsx_runtime_1.jsx)(FacetedDataGrid_1.default, { model: model, columns: columns, shownTrackIds: shownTrackIds, selection: selection }) }), showFilters ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ui_1.ResizeHandle, { vertical: true, onDrag: dist => faceted.setPanelWidth(panelWidth - dist), className: classes.resizeHandle }), (0, jsx_runtime_1.jsx)("div", { style: { width: panelWidth, overflow: 'auto' }, children: (0, jsx_runtime_1.jsx)(FacetFilters_1.default, { model: model, rows: rows, columns: columns }) })] })) : null] })] }));
 });
 exports.default = FacetedSelector;

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { HierarchicalTrackSelectorModel } from '../../model';
 import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
 import type { MenuItem } from '@jbrowse/core/ui/Menu';
@@ -8,5 +7,5 @@ declare const DropdownTrackSelector: ({ model, tracks, extraMenuItems, children,
     extraMenuItems: MenuItem[];
     onClick?: () => void;
     children: React.ReactElement;
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default DropdownTrackSelector;

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

@@ -1,32 +1,10 @@
 "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 jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const CascadingMenuButton_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenuButton"));
 const SanitizedHTML_1 = __importDefault(require("@jbrowse/core/ui/SanitizedHTML"));
 const util_1 = require("@jbrowse/core/util");
@@ -37,13 +15,10 @@ const DropdownTrackSelector = (0, mobx_react_1.observer)(function ({ model, trac
     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: [
+    return view ? ((0, jsx_runtime_1.jsx)(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 }))),
+                label: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SanitizedHTML_1.default, { html: (0, tracks_1.getTrackName)(t, session) }), ' ', (0, jsx_runtime_1.jsx)(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) {
@@ -54,6 +29,6 @@ const DropdownTrackSelector = (0, mobx_react_1.observer)(function ({ model, trac
                 },
             })),
             ...extraMenuItems,
-        ] }, children)) : null;
+        ], children: children })) : null;
 });
 exports.default = DropdownTrackSelector;

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

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

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

@@ -3,7 +3,7 @@ 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 jsx_runtime_1 = require("react/jsx-runtime");
 const Grade_1 = __importDefault(require("@mui/icons-material/Grade"));
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
@@ -20,7 +20,7 @@ const useStyles = (0, mui_1.makeStyles)()({
 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: () => {
+    return view ? ((0, jsx_runtime_1.jsx)(DropdownTrackSelector_1.default, { onClick: () => {
             model.setFavoritesCounter(0);
         }, tracks: favoriteTracks, model: model, extraMenuItems: favoriteTracks.length
             ? [
@@ -37,12 +37,9 @@ const FavoriteTracks = (0, mobx_react_1.observer)(function ({ model, }) {
                     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: {
+            ], children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Favorite tracks", children: (0, jsx_runtime_1.jsx)(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;
+                }, className: classes.margin, badgeContent: model.favoritesCounter, children: (0, jsx_runtime_1.jsx)(Grade_1.default, {}) }) }) })) : null;
 });
 exports.default = FavoriteTracks;