@jbrowse/plugin-data-management 2.17.0 → 3.0.0

package/dist/HierarchicalTrackSelectorWidget/components/HierarchicalTrackSelector.js

@@ -1,54 +1,26 @@
 "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 mobx_react_1 = require("mobx-react");
 const react_virtualized_auto_sizer_1 = __importDefault(require("react-virtualized-auto-sizer"));
 const HierarchicalFab_1 = __importDefault(require("./HierarchicalFab"));
-const HierarchicalTree_1 = __importDefault(require("./tree/HierarchicalTree"));
 const HierarchicalHeader_1 = __importDefault(require("./tree/HierarchicalHeader"));
-// Don't use autosizer in jest and instead hardcode a height, otherwise fails
-// jest tests
+const HierarchicalTree_1 = __importDefault(require("./tree/HierarchicalTree"));
 const AutoSizedHierarchicalTree = ({ tree, model, offset, }) => {
-    return typeof jest === 'undefined' ? (react_1.default.createElement(react_virtualized_auto_sizer_1.default, { disableWidth: true }, args => (react_1.default.createElement(HierarchicalTree_1.default, { height: (args.height || offset) - offset, model: model, tree: tree })))) : (react_1.default.createElement(HierarchicalTree_1.default, { height: 9000, model: model, tree: tree }));
+    return typeof jest === 'undefined' ? ((0, jsx_runtime_1.jsx)(react_virtualized_auto_sizer_1.default, { disableWidth: true, children: args => ((0, jsx_runtime_1.jsx)(HierarchicalTree_1.default, { height: (args.height || offset) - offset, model: model, tree: tree })) })) : ((0, jsx_runtime_1.jsx)(HierarchicalTree_1.default, { height: 9000, model: model, tree: tree }));
 };
 const Wrapper = ({ overrideDimensions, children, }) => {
-    return overrideDimensions ? (react_1.default.createElement("div", { style: { ...overrideDimensions } }, children)) : (children);
+    return overrideDimensions ? ((0, jsx_runtime_1.jsx)("div", { style: { ...overrideDimensions }, children: children })) : (children);
 };
 const HierarchicalTrackSelectorContainer = (0, mobx_react_1.observer)(function ({ model, toolbarHeight, overrideDimensions, }) {
-    return (react_1.default.createElement(Wrapper, { overrideDimensions: overrideDimensions },
-        react_1.default.createElement(HierarchicalTrackSelector, { model: model, toolbarHeight: toolbarHeight }),
-        react_1.default.createElement(HierarchicalFab_1.default, { model: model })));
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, { overrideDimensions: overrideDimensions, children: [(0, jsx_runtime_1.jsx)(HierarchicalTrackSelector, { model: model, toolbarHeight: toolbarHeight }), (0, jsx_runtime_1.jsx)(HierarchicalFab_1.default, { model: model })] }));
 });
 const HierarchicalTrackSelector = (0, mobx_react_1.observer)(function ({ model, toolbarHeight = 0, }) {
     const [headerHeight, setHeaderHeight] = (0, react_1.useState)(0);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(HierarchicalHeader_1.default, { model: model, setHeaderHeight: setHeaderHeight }),
-        react_1.default.createElement(AutoSizedHierarchicalTree, { tree: model.hierarchy, model: model, offset: toolbarHeight + headerHeight })));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(HierarchicalHeader_1.default, { model: model, setHeaderHeight: setHeaderHeight }), (0, jsx_runtime_1.jsx)(AutoSizedHierarchicalTree, { tree: model.hierarchy, model: model, offset: toolbarHeight + headerHeight })] }));
 });
 exports.default = HierarchicalTrackSelectorContainer;

package/dist/HierarchicalTrackSelectorWidget/components/ShoppingCart.d.ts

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

package/dist/HierarchicalTrackSelectorWidget/components/ShoppingCart.js

@@ -3,25 +3,37 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const material_1 = require("@mui/material");
-const mobx_react_1 = require("mobx-react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CascadingMenuButton_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenuButton"));
 const util_1 = require("@jbrowse/core/util");
-// icons
 const ShoppingCart_1 = __importDefault(require("@mui/icons-material/ShoppingCart"));
-const CascadingMenuButton_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenuButton"));
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
 const ShoppingCart = (0, mobx_react_1.observer)(function ({ model, }) {
+    const session = (0, util_1.getSession)(model);
     const { selection } = model;
     const { pluginManager } = (0, util_1.getEnv)(model);
-    const session = (0, util_1.getSession)(model);
+    const { adminMode, sessionTracks } = session;
+    const s = new Set(sessionTracks === null || sessionTracks === void 0 ? void 0 : sessionTracks.map(t => t.trackId));
+    const canEdit = (t) => adminMode || s.has(t);
     const items = pluginManager.evaluateExtensionPoint('TrackSelector-multiTrackMenuItems', [], { session });
-    return selection.length ? (react_1.default.createElement(CascadingMenuButton_1.default, { menuItems: [
+    return selection.length ? ((0, jsx_runtime_1.jsx)(CascadingMenuButton_1.default, { menuItems: [
             {
-                label: 'Clear',
+                label: 'Clear selection',
                 onClick: () => {
                     model.clearSelection();
                 },
             },
+            ...(selection.every(elt => canEdit(elt.trackId))
+                ? [
+                    {
+                        label: 'Delete tracks',
+                        onClick: () => {
+                            selection.forEach(s => { var _a; return (_a = session.deleteTrackConf) === null || _a === void 0 ? void 0 : _a.call(session, s); });
+                        },
+                    },
+                ]
+                : []),
             ...items.map(item => ({
                 ...item,
                 ...('onClick' in item
@@ -32,8 +44,6 @@ const ShoppingCart = (0, mobx_react_1.observer)(function ({ model, }) {
                     }
                     : {}),
             })),
-        ] },
-        react_1.default.createElement(material_1.Badge, { badgeContent: selection.length, color: "primary" },
-            react_1.default.createElement(ShoppingCart_1.default, null)))) : null;
+        ], children: (0, jsx_runtime_1.jsx)(material_1.Badge, { badgeContent: selection.length, color: "primary", children: (0, jsx_runtime_1.jsx)(ShoppingCart_1.default, {}) }) })) : null;
 });
 exports.default = ShoppingCart;

package/dist/HierarchicalTrackSelectorWidget/components/dialogs/CloseConnectionDialog.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 declare const CloseConnectionDialog: ({ modalInfo, onClose, }: {
     modalInfo?: {
         name?: string;
@@ -6,5 +5,5 @@ declare const CloseConnectionDialog: ({ modalInfo, onClose, }: {
         safelyBreakConnection?: () => void;
     };
     onClose: () => void;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default CloseConnectionDialog;

package/dist/HierarchicalTrackSelectorWidget/components/dialogs/CloseConnectionDialog.js

@@ -1,27 +1,16 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const material_1 = require("@mui/material");
+const 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 CloseConnectionDialog = (0, mobx_react_1.observer)(function CloseConnectionDialog({ modalInfo = {}, onClose, }) {
     const { name, dereferenceTypeCount, safelyBreakConnection } = modalInfo;
-    return (react_1.default.createElement(ui_1.Dialog, { open: true, maxWidth: "lg", title: `Close connection "${name}"` },
-        react_1.default.createElement(material_1.DialogContent, null,
-            dereferenceTypeCount ? (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(material_1.DialogContentText, null, "Closing this connection will close:"),
-                react_1.default.createElement(material_1.List, null, Object.entries(dereferenceTypeCount).map(([key, value]) => (react_1.default.createElement(material_1.ListItem, { key: key }, `${value} ${key}`)))))) : null,
-            react_1.default.createElement(material_1.DialogContentText, null, "Are you sure you want to close this connection?")),
-        react_1.default.createElement(material_1.DialogActions, null,
-            react_1.default.createElement(material_1.Button, { onClick: () => {
-                    onClose();
-                }, color: "primary" }, "Cancel"),
-            react_1.default.createElement(material_1.Button, { variant: "contained", onClick: () => {
-                    safelyBreakConnection === null || safelyBreakConnection === void 0 ? void 0 : safelyBreakConnection();
-                    onClose();
-                }, color: "primary" }, "OK"))));
+    return ((0, jsx_runtime_1.jsxs)(ui_1.Dialog, { open: true, maxWidth: "lg", title: `Close connection "${name}"`, onClose: onClose, children: [(0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [dereferenceTypeCount ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: "Closing this connection will close:" }), (0, jsx_runtime_1.jsx)(material_1.List, { children: Object.entries(dereferenceTypeCount).map(([key, value]) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: `${value} ${key}` }, key))) })] })) : null, (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: "Are you sure you want to close this connection?" })] }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => {
+                            onClose();
+                        }, color: "primary", children: "Cancel" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => {
+                            safelyBreakConnection === null || safelyBreakConnection === void 0 ? void 0 : safelyBreakConnection();
+                            onClose();
+                        }, color: "primary", children: "OK" })] })] }));
 });
 exports.default = CloseConnectionDialog;

package/dist/HierarchicalTrackSelectorWidget/components/dialogs/DeleteConnectionDialog.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
-import { AnyConfigurationModel } from '@jbrowse/core/configuration';
-import { AbstractSessionModel } from '@jbrowse/core/util';
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import type { AbstractSessionModel } from '@jbrowse/core/util';
 declare const DeleteConnectionDialog: ({ deleteDialogDetails, session, handleClose, }: {
     deleteDialogDetails: {
         name: string;
@@ -8,5 +7,5 @@ declare const DeleteConnectionDialog: ({ deleteDialogDetails, session, handleClo
     };
     session: AbstractSessionModel;
     handleClose: () => void;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default DeleteConnectionDialog;

package/dist/HierarchicalTrackSelectorWidget/components/dialogs/DeleteConnectionDialog.js

@@ -1,25 +1,17 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const material_1 = require("@mui/material");
+const 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 DeleteConnectionDialog = (0, mobx_react_1.observer)(function DeleteConnectionDialog({ deleteDialogDetails, session, handleClose, }) {
     const { connectionConf, name } = deleteDialogDetails;
-    return (react_1.default.createElement(ui_1.Dialog, { open: true, title: `Delete connection "${name}"` },
-        react_1.default.createElement(material_1.DialogContent, null,
-            react_1.default.createElement(material_1.DialogContentText, null, "Are you sure you want to delete this connection?")),
-        react_1.default.createElement(material_1.DialogActions, null,
-            react_1.default.createElement(material_1.Button, { onClick: () => {
-                    handleClose();
-                }, color: "primary" }, "Cancel"),
-            react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", onClick: () => {
-                    var _a;
-                    (_a = session.deleteConnection) === null || _a === void 0 ? void 0 : _a.call(session, connectionConf);
-                    handleClose();
-                } }, "OK"))));
+    return ((0, jsx_runtime_1.jsxs)(ui_1.Dialog, { open: true, title: `Delete connection "${name}"`, onClose: handleClose, children: [(0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: "Are you sure you want to delete this connection?" }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => {
+                            handleClose();
+                        }, color: "primary", children: "Cancel" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "primary", onClick: () => {
+                            var _a;
+                            (_a = session.deleteConnection) === null || _a === void 0 ? void 0 : _a.call(session, connectionConf);
+                            handleClose();
+                        }, children: "OK" })] })] }));
 });
 exports.default = DeleteConnectionDialog;

package/dist/HierarchicalTrackSelectorWidget/components/dialogs/ManageConnectionsDialog.d.ts

@@ -1,9 +1,8 @@
-import React from 'react';
-import { AnyConfigurationModel } from '@jbrowse/core/configuration';
-import { AbstractSessionModel } from '@jbrowse/core/util';
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import type { AbstractSessionModel } from '@jbrowse/core/util';
 declare const ManageConnectionsDialog: ({ session, handleClose, breakConnection, }: {
     handleClose: () => void;
     session: AbstractSessionModel;
     breakConnection: (conf: AnyConfigurationModel, arg: boolean) => void;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default ManageConnectionsDialog;

package/dist/HierarchicalTrackSelectorWidget/components/dialogs/ManageConnectionsDialog.js

@@ -3,14 +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 material_1 = require("@mui/material");
-const ui_1 = require("@jbrowse/core/ui");
-const mui_1 = require("tss-react/mui");
-const mobx_react_1 = require("mobx-react");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const configuration_1 = require("@jbrowse/core/configuration");
-// icons
+const ui_1 = require("@jbrowse/core/ui");
 const Close_1 = __importDefault(require("@mui/icons-material/Close"));
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+const mui_1 = require("tss-react/mui");
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     connectionContainer: {
         margin: theme.spacing(4),
@@ -18,30 +17,18 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
     },
 }));
 function DisabledButton() {
-    return (react_1.default.createElement(material_1.Tooltip, { title: "Unable to delete connection in config file as non-admin user" },
-        react_1.default.createElement(material_1.IconButton, null,
-            react_1.default.createElement(Close_1.default, { color: "disabled" }))));
+    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Unable to delete connection in config file as non-admin user", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(Close_1.default, { color: "disabled" }) }) }));
 }
 const ManageConnectionsDialog = (0, mobx_react_1.observer)(function ({ session, handleClose, breakConnection, }) {
     const { classes } = useStyles();
     const { adminMode, connections, sessionConnections } = session;
-    return (react_1.default.createElement(ui_1.Dialog, { open: true, onClose: handleClose, maxWidth: "lg", title: "Delete connections" },
-        react_1.default.createElement(material_1.DialogContent, null,
-            react_1.default.createElement(material_1.Typography, null, "Click the X icon to delete the connection from your config completely"),
-            react_1.default.createElement("div", { className: classes.connectionContainer },
-                connections.map(conf => {
-                    const name = (0, configuration_1.readConfObject)(conf, 'name');
-                    return (react_1.default.createElement(material_1.Typography, { key: `conn-${name}` },
-                        adminMode || (sessionConnections === null || sessionConnections === void 0 ? void 0 : sessionConnections.includes(conf)) ? (react_1.default.createElement(material_1.IconButton, { onClick: () => {
-                                breakConnection(conf, true);
-                            } },
-                            react_1.default.createElement(Close_1.default, { color: "error" }))) : (react_1.default.createElement(DisabledButton, null)),
-                        name));
-                }),
-                !connections.length ? (react_1.default.createElement(material_1.Typography, null, "No connections found")) : null)),
-        react_1.default.createElement(material_1.DialogActions, null,
-            react_1.default.createElement(material_1.Button, { onClick: () => {
-                    handleClose();
-                }, variant: "contained", color: "primary" }, "Close"))));
+    return ((0, jsx_runtime_1.jsxs)(ui_1.Dialog, { open: true, onClose: handleClose, maxWidth: "lg", title: "Delete connections", children: [(0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Click the X icon to delete the connection from your config completely" }), (0, jsx_runtime_1.jsxs)("div", { className: classes.connectionContainer, children: [connections.map(conf => {
+                                const name = (0, configuration_1.readConfObject)(conf, 'name');
+                                return ((0, jsx_runtime_1.jsxs)(material_1.Typography, { children: [adminMode || (sessionConnections === null || sessionConnections === void 0 ? void 0 : sessionConnections.includes(conf)) ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => {
+                                                breakConnection(conf, true);
+                                            }, children: (0, jsx_runtime_1.jsx)(Close_1.default, { color: "error" }) })) : ((0, jsx_runtime_1.jsx)(DisabledButton, {})), name] }, `conn-${name}`));
+                            }), !connections.length ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { children: "No connections found" })) : null] })] }), (0, jsx_runtime_1.jsx)(material_1.DialogActions, { children: (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => {
+                        handleClose();
+                    }, variant: "contained", color: "primary", children: "Close" }) })] }));
 });
 exports.default = ManageConnectionsDialog;

package/dist/HierarchicalTrackSelectorWidget/components/dialogs/ToggleConnectionsDialog.d.ts

@@ -1,9 +1,8 @@
-import React from 'react';
-import { AnyConfigurationModel } from '@jbrowse/core/configuration';
-import { AbstractSessionModel } from '@jbrowse/core/util';
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import type { AbstractSessionModel } from '@jbrowse/core/util';
 declare const ToggleConnectionDialog: ({ session, handleClose, breakConnection, }: {
     handleClose: () => void;
     session: AbstractSessionModel;
     breakConnection: (arg: AnyConfigurationModel) => void;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default ToggleConnectionDialog;

package/dist/HierarchicalTrackSelectorWidget/components/dialogs/ToggleConnectionsDialog.js

@@ -1,14 +1,11 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const material_1 = require("@mui/material");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const configuration_1 = require("@jbrowse/core/configuration");
 const ui_1 = require("@jbrowse/core/ui");
-const mui_1 = require("tss-react/mui");
+const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
-const configuration_1 = require("@jbrowse/core/configuration");
+const mui_1 = require("tss-react/mui");
 function ellipses(slug) {
     return slug.length > 20 ? `${slug.slice(0, 20)}...` : slug;
 }
@@ -23,7 +20,7 @@ const ConnectionRow = (0, mobx_react_1.observer)(function ConnectionRow({ conf,
     const name = (0, configuration_1.readConfObject)(conf, 'name');
     const assemblyNames = (0, configuration_1.readConfObject)(conf, 'assemblyNames');
     const found = instances.find(conn => name === conn.name);
-    return (react_1.default.createElement(material_1.FormControlLabel, { key: conf.connectionId, control: react_1.default.createElement(material_1.Checkbox, { checked: !!found, onChange: () => {
+    return ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: !!found, onChange: () => {
                 var _a;
                 if (found) {
                     breakConnection(conf);
@@ -36,21 +33,15 @@ const ConnectionRow = (0, mobx_react_1.observer)(function ConnectionRow({ conf,
             assemblyNames.length ? `(${ellipses(assemblyNames.join(','))})` : '',
         ]
             .filter(f => !!f)
-            .join(' ') }));
+            .join(' ') }, conf.connectionId));
 });
 const ConnectionList = (0, mobx_react_1.observer)(function ConnectionsList({ session, breakConnection, }) {
     const { classes } = useStyles();
-    return (react_1.default.createElement("div", { className: classes.connectionContainer }, !session.connections.length ? (react_1.default.createElement(material_1.Typography, null, "No connections found")) : (session.connections.map((conf, idx) => (react_1.default.createElement("div", { key: `${conf.name}_${idx}` },
-        react_1.default.createElement(ConnectionRow, { conf: conf, session: session, breakConnection: breakConnection })))))));
+    return ((0, jsx_runtime_1.jsx)("div", { className: classes.connectionContainer, children: !session.connections.length ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { children: "No connections found" })) : (session.connections.map((conf, idx) => ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ConnectionRow, { conf: conf, session: session, breakConnection: breakConnection }) }, `${conf.name}_${idx}`)))) }));
 });
 const ToggleConnectionDialog = (0, mobx_react_1.observer)(function ({ session, handleClose, breakConnection, }) {
-    return (react_1.default.createElement(ui_1.Dialog, { open: true, onClose: handleClose, maxWidth: "lg", title: "Turn on/off connections" },
-        react_1.default.createElement(material_1.DialogContent, null,
-            react_1.default.createElement(material_1.Typography, null, "Use the checkbox to turn on/off connections"),
-            react_1.default.createElement(ConnectionList, { session: session, breakConnection: breakConnection })),
-        react_1.default.createElement(material_1.DialogActions, null,
-            react_1.default.createElement(material_1.Button, { onClick: () => {
-                    handleClose();
-                }, variant: "contained", color: "primary" }, "Close"))));
+    return ((0, jsx_runtime_1.jsxs)(ui_1.Dialog, { open: true, onClose: handleClose, maxWidth: "lg", title: "Turn on/off connections", children: [(0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Use the checkbox to turn on/off connections" }), (0, jsx_runtime_1.jsx)(ConnectionList, { session: session, breakConnection: breakConnection })] }), (0, jsx_runtime_1.jsx)(material_1.DialogActions, { children: (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => {
+                        handleClose();
+                    }, variant: "contained", color: "primary", children: "Close" }) })] }));
 });
 exports.default = ToggleConnectionDialog;

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

@@ -1,10 +1,9 @@
-import React from 'react';
-import { HierarchicalTrackSelectorModel } from '../../model';
+import type { HierarchicalTrackSelectorModel } from '../../model';
 declare const FacetFilter: ({ column, vals, model, }: {
     column: {
         field: string;
     };
     vals: [string, number][];
     model: HierarchicalTrackSelectorModel;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default FacetFilter;

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

@@ -1,40 +1,17 @@
 "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 jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const util_1 = require("@jbrowse/core/util");
+const Add_1 = __importDefault(require("@mui/icons-material/Add"));
 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 util_1 = require("@jbrowse/core/util");
+const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
+const mui_1 = require("tss-react/mui");
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     facet: {
         margin: 0,
@@ -45,17 +22,14 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
     },
 }));
 function ClearButton({ onClick }) {
-    return (react_1.default.createElement(material_1.Tooltip, { title: "Clear selection on this facet filter" },
-        react_1.default.createElement(material_1.IconButton, { onClick: () => {
+    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Clear selection on this facet filter", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => {
                 onClick();
-            }, size: "small" },
-            react_1.default.createElement(Clear_1.default, null))));
+            }, size: "small", children: (0, jsx_runtime_1.jsx)(Clear_1.default, {}) }) }));
 }
 function ExpandButton({ visible, onClick, }) {
-    return (react_1.default.createElement(material_1.Tooltip, { title: "Minimize/expand this facet filter" },
-        react_1.default.createElement(material_1.IconButton, { onClick: () => {
+    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Minimize/expand this facet filter", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => {
                 onClick();
-            }, size: "small" }, visible ? react_1.default.createElement(Minimize_1.default, null) : react_1.default.createElement(Add_1.default, null))));
+            }, size: "small", children: visible ? (0, jsx_runtime_1.jsx)(Minimize_1.default, {}) : (0, jsx_runtime_1.jsx)(Add_1.default, {}) }) }));
 }
 const FacetFilter = (0, mobx_react_1.observer)(function ({ column, vals, model, }) {
     const { classes } = useStyles();
@@ -63,27 +37,16 @@ const FacetFilter = (0, mobx_react_1.observer)(function ({ column, vals, model,
     const { faceted } = model;
     const { filters } = faceted;
     const { field } = column;
-    return (react_1.default.createElement(material_1.FormControl, { className: classes.facet, fullWidth: true },
-        react_1.default.createElement("div", null,
-            react_1.default.createElement(material_1.Typography, { component: "span" }, field),
-            react_1.default.createElement(ClearButton, { onClick: () => {
-                    faceted.setFilter(field, []);
-                } }),
-            react_1.default.createElement(ExpandButton, { visible: visible, onClick: () => {
-                    setVisible(!visible);
-                } })),
-        visible ? (react_1.default.createElement(material_1.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_1.default.createElement("option", { key: name, value: name },
-            (0, util_1.coarseStripHTML)(name),
-            " (",
-            count,
-            ")"))))) : null));
+    return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, { className: classes.facet, fullWidth: true, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { component: "span", children: field }), (0, jsx_runtime_1.jsx)(ClearButton, { onClick: () => {
+                            faceted.setFilter(field, []);
+                        } }), (0, jsx_runtime_1.jsx)(ExpandButton, { visible: visible, onClick: () => {
+                            setVisible(!visible);
+                        } })] }), visible ? ((0, jsx_runtime_1.jsx)(material_1.Select, { multiple: true, native: true, className: classes.select, value: filters.get(column.field) || [], onChange: event => {
+                    faceted.setFilter(column.field, [...event.target.options]
+                        .filter(opt => opt.selected)
+                        .map(opt => opt.value));
+                }, children: vals
+                    .sort((a, b) => a[0].localeCompare(b[0]))
+                    .map(([name, count]) => ((0, jsx_runtime_1.jsxs)("option", { value: name, children: [(0, util_1.coarseStripHTML)(name), " (", count, ")"] }, name))) })) : null] }));
 });
 exports.default = FacetFilter;

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

@@ -1,11 +1,10 @@
-import React from 'react';
-import { HierarchicalTrackSelectorModel } from '../../model';
-import { Row } from './util';
+import type { Row } from './util';
+import type { HierarchicalTrackSelectorModel } from '../../model';
 declare const FacetFilters: ({ rows, columns, model, }: {
     rows: Row[];
     columns: {
         field: string;
     }[];
     model: HierarchicalTrackSelectorModel;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default FacetFilters;

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

@@ -3,9 +3,8 @@ 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");
-// locals
 const FacetFilter_1 = __importDefault(require("./FacetFilter"));
 const util_1 = require("./util");
 const FacetFilters = (0, mobx_react_1.observer)(function ({ rows, columns, model, }) {
@@ -13,43 +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()]));
-    // 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 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) {
-        // give non-empty filters priority
         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);
-            // we don't allow filtering on empty yet
-            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;