@jbrowse/plugin-data-management 2.6.3 → 2.7.0

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

@@ -9,9 +9,11 @@ import { getTrackName } from '@jbrowse/core/util/tracks';
 import { ResizeHandle } from '@jbrowse/core/ui';
 import SanitizedHTML from '@jbrowse/core/ui/SanitizedHTML';
 import JBrowseMenu from '@jbrowse/core/ui/Menu';
-import ResizeBar, { useResizeBar } from '@jbrowse/core/ui/ResizeBar';
-import { getEnv, getSession, measureGridWidth, useDebounce, } from '@jbrowse/core/util';
+import ResizeBar from '@jbrowse/core/ui/ResizeBar';
+import { getEnv, getSession, measureGridWidth, useDebounce, useLocalStorage, } from '@jbrowse/core/util';
 import { readConfObject, } from '@jbrowse/core/configuration';
+import { useResizeBar } from '@jbrowse/core/ui/useResizeBar';
+import { makeStyles } from 'tss-react/mui';
 // icons
 import MoreHoriz from '@mui/icons-material/MoreHoriz';
 import { matches } from '../../util';
@@ -19,24 +21,31 @@ import FacetedHeader from './FacetedHeader';
 import FacetFilters from './FacetFilters';
 import { getRootKeys } from './util';
 const nonMetadataKeys = ['category', 'adapter', 'description'];
+const useStyles = makeStyles()({
+    cell: {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    },
+});
 const frac = 0.75;
-export default observer(function FacetedSelector({ model, }) {
+const FacetedSelector = observer(function FacetedSelector({ model, }) {
     var _a, _b;
+    const { classes } = useStyles();
     const { view, selection } = model;
     const { pluginManager } = getEnv(model);
     const { ref, scrollLeft } = useResizeBar();
     const [filterText, setFilterText] = useState('');
-    const [showOptions, setShowOptions] = useState(false);
+    const [showOptions, setShowOptions] = useLocalStorage('facet-showTableOptions', false);
     const [info, setInfo] = useState();
     const [useShoppingCart, setUseShoppingCart] = useState(false);
-    const [hideSparse, setHideSparse] = useState(true);
-    const [panelWidth, setPanelWidth] = useState(400);
+    const [showSparse, setShowSparse] = useLocalStorage('facet-showSparse', false);
+    const [showFilters, setShowFilters] = useLocalStorage('facet-showFilters', true);
+    const [panelWidth, setPanelWidth] = useLocalStorage('facet-panelWidth', 400);
     const session = getSession(model);
     const filterDebounced = useDebounce(filterText, 400);
     const tracks = view.tracks;
-    const [filters, dispatch] = useReducer((state, update) => {
-        return { ...state, [update.key]: update.val };
-    }, {});
+    const [filters, dispatch] = useReducer((state, update) => ({ ...state, [update.key]: update.val }), {});
     const rows = useMemo(() => {
         // metadata is spread onto the object for easier access and sorting
         // by the mui data grid (it's unable to sort by nested objects)
@@ -57,10 +66,10 @@ export default observer(function FacetedSelector({ model, }) {
             };
         });
     }, [model, filterDebounced, session]);
-    const filteredNonMetadataKeys = useMemo(() => nonMetadataKeys.filter(f => !hideSparse ? true : rows.map(r => r[f]).filter(f => !!f).length > 5), [hideSparse, rows]);
-    const filteredMetadataKeys = useMemo(() => [...new Set(rows.flatMap(row => getRootKeys(row.metadata)))].filter(f => !hideSparse
+    const filteredNonMetadataKeys = useMemo(() => nonMetadataKeys.filter(f => showSparse ? true : rows.map(r => r[f]).filter(f => !!f).length > 5), [showSparse, rows]);
+    const filteredMetadataKeys = useMemo(() => [...new Set(rows.flatMap(row => getRootKeys(row.metadata)))].filter(f => showSparse
         ? true
-        : rows.map(r => r.metadata[f]).filter(f => !!f).length > 5), [hideSparse, rows]);
+        : rows.map(r => r.metadata[f]).filter(f => !!f).length > 5), [showSparse, rows]);
     const fields = useMemo(() => ['name', ...filteredNonMetadataKeys, ...filteredMetadataKeys], [filteredNonMetadataKeys, filteredMetadataKeys]);
     const [widths, setWidths] = useState({
         name: measureGridWidth(rows.map(r => r.name), { maxWidth: 500, stripHTML: true }) + 15,
@@ -96,15 +105,15 @@ export default observer(function FacetedSelector({ model, }) {
                 measureGridWidth(rows.map(r => r.metadata[e]), { stripHTML: true, maxWidth: 400 }),
             ])),
         }));
-    }, [filteredMetadataKeys, visible, filteredNonMetadataKeys, hideSparse, rows]);
-    const widthsDebounced = useDebounce(widths, 400);
+    }, [filteredMetadataKeys, visible, filteredNonMetadataKeys, showSparse, rows]);
+    const widthsDebounced = useDebounce(widths, 200);
     const columns = [
         {
             field: 'name',
             hideable: false,
             renderCell: (params) => {
                 const { value, id, row } = params;
-                return (React.createElement(React.Fragment, null,
+                return (React.createElement("div", { className: classes.cell },
                     React.createElement(SanitizedHTML, { html: value }),
                     React.createElement(IconButton, { onClick: e => setInfo({
                             target: e.currentTarget,
@@ -122,7 +131,7 @@ export default observer(function FacetedSelector({ model, }) {
                 width: (_a = widthsDebounced[e]) !== null && _a !== void 0 ? _a : 100,
                 renderCell: (params) => {
                     const { value } = params;
-                    return value ? React.createElement(SanitizedHTML, { html: value }) : '';
+                    return (React.createElement("div", { className: classes.cell }, value ? React.createElement(SanitizedHTML, { html: value }) : ''));
                 },
             });
         }),
@@ -133,19 +142,22 @@ export default observer(function FacetedSelector({ model, }) {
                 width: (_a = widthsDebounced[e]) !== null && _a !== void 0 ? _a : 100,
                 renderCell: (params) => {
                     const { value } = params;
-                    return value ? React.createElement(SanitizedHTML, { html: value }) : '';
+                    return (React.createElement("div", { className: classes.cell }, value ? React.createElement(SanitizedHTML, { 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.createElement(React.Fragment, null,
         info ? (React.createElement(JBrowseMenu, { anchorEl: info === null || info === void 0 ? void 0 : info.target, menuItems: ((_b = session.getTrackActionMenuItems) === null || _b === void 0 ? void 0 : _b.call(session, info.conf)) || [], onMenuItemClick: (_event, callback) => {
                 callback();
                 setInfo(undefined);
             }, open: !!info, onClose: () => setInfo(undefined) })) : null,
-        React.createElement(FacetedHeader, { setHideSparse: setHideSparse, setShowOptions: setShowOptions, setFilterText: setFilterText, setUseShoppingCart: setUseShoppingCart, hideSparse: hideSparse, showOptions: showOptions, filterText: filterText, useShoppingCart: useShoppingCart, model: model }),
+        React.createElement(FacetedHeader, { setShowSparse: setShowSparse, setShowFilters: setShowFilters, setShowOptions: setShowOptions, setFilterText: setFilterText, setUseShoppingCart: setUseShoppingCart, showFilters: showFilters, showSparse: showSparse, showOptions: showOptions, filterText: filterText, useShoppingCart: useShoppingCart, model: model }),
         React.createElement("div", { ref: ref, style: {
                 display: 'flex',
                 overflow: 'hidden',
@@ -154,21 +166,22 @@ export default observer(function FacetedSelector({ model, }) {
             } },
             React.createElement("div", { style: {
                     height: window.innerHeight * frac,
-                    width: window.innerWidth * frac - panelWidth,
+                    width: window.innerWidth * frac - (showFilters ? panelWidth : 0),
                 } },
                 React.createElement(ResizeBar, { checkbox: true, widths: Object.values(widths).map(f => f !== null && f !== void 0 ? f : 100), setWidths: newWidths => setWidths(Object.fromEntries(Object.entries(widths).map((entry, idx) => [
                         entry[0],
                         newWidths[idx],
                     ]))), scrollLeft: scrollLeft }),
-                React.createElement(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.createElement(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
                             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 {
@@ -177,10 +190,18 @@ export default observer(function FacetedSelector({ model, }) {
                             const tracks = userSelectedIds.map(id => resolveIdentifier(schema, root, id));
                             model.setSelection(tracks);
                         }
-                    }, rowSelectionModel: useShoppingCart ? selection.map(s => s.trackId) : shownTrackIds, slots: { toolbar: showOptions ? GridToolbar : null }, slotProps: {
+                    }, rowSelectionModel: useShoppingCart
+                        ? selection.map(s => s.trackId)
+                        : [...shownTrackIds], slots: { toolbar: showOptions ? GridToolbar : null }, slotProps: {
                         toolbar: { printOptions: { disableToolbarButton: true } },
                     }, columns: columns, rowHeight: 25 })),
-            React.createElement(ResizeHandle, { vertical: true, onDrag: dist => setPanelWidth(panelWidth - dist), style: { background: 'grey', width: 5 } }),
-            React.createElement("div", { style: { width: panelWidth, overflowY: 'auto', overflowX: 'hidden' } },
-                React.createElement(FacetFilters, { width: panelWidth - 10, rows: rows, columns: columns, dispatch: dispatch, filters: filters })))));
+            showFilters ? (React.createElement(React.Fragment, null,
+                React.createElement(ResizeHandle, { vertical: true, onDrag: dist => setPanelWidth(panelWidth - dist), style: { marginLeft: 5, background: 'grey', width: 5 } }),
+                React.createElement("div", { style: {
+                        width: panelWidth,
+                        overflowY: 'auto',
+                        overflowX: 'hidden',
+                    } },
+                    React.createElement(FacetFilters, { width: panelWidth - 10, rows: rows, columns: columns, dispatch: dispatch, filters: filters })))) : null)));
 });
+export default FacetedSelector;

package/esm/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/esm/HierarchicalTrackSelectorWidget/components/tree/HamburgerMenu.js

@@ -10,15 +10,16 @@ const CloseConnectionDlg = lazy(() => import('../dialogs/CloseConnectionDialog')
 const DeleteConnectionDlg = lazy(() => import('../dialogs/DeleteConnectionDialog'));
 const ManageConnectionsDlg = lazy(() => import('../dialogs/ManageConnectionsDialog'));
 const ToggleConnectionsDlg = lazy(() => import('../dialogs/ToggleConnectionsDialog'));
-export default observer(function HamburgerMenu({ model, }) {
+const HamburgerMenu = observer(function ({ model, }) {
     const session = getSession(model);
     const [modalInfo, setModalInfo] = useState();
     const [deleteDlgDetails, setDeleteDlgDetails] = useState();
     const [connectionToggleOpen, setConnectionToggleOpen] = useState(false);
     const [connectionManagerOpen, setConnectionManagerOpen] = useState(false);
     function breakConnection(connectionConf, deletingConnection) {
+        var _a;
         const name = 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) {
@@ -115,3 +116,4 @@ export default observer(function HamburgerMenu({ model, }) {
             connectionManagerOpen ? (React.createElement(ManageConnectionsDlg, { handleClose: () => setConnectionManagerOpen(false), breakConnection: breakConnection, session: session })) : null,
             connectionToggleOpen ? (React.createElement(ToggleConnectionsDlg, { handleClose: () => setConnectionToggleOpen(false), session: session, breakConnection: breakConnection })) : null)));
 });
+export default HamburgerMenu;

package/esm/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/esm/HierarchicalTrackSelectorWidget/components/tree/HierarchicalHeader.js

@@ -26,7 +26,7 @@ const SearchTracksTextField = observer(function ({ model, }) {
                     React.createElement(ClearIcon, null)))),
         } }));
 });
-function HierarchicalTrackSelectorHeader({ model, setHeaderHeight, }) {
+const HierarchicalTrackSelectorHeader = observer(function ({ model, setHeaderHeight, }) {
     const { classes } = useStyles();
     const [facetedOpen, setFacetedOpen] = useState(false);
     return (React.createElement("div", { ref: ref => setHeaderHeight((ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect().height) || 0), "data-testid": "hierarchical_track_selector" },
@@ -36,5 +36,5 @@ function HierarchicalTrackSelectorHeader({ model, setHeaderHeight, }) {
             React.createElement(SearchTracksTextField, { model: model }),
             React.createElement(Button, { className: classes.menuIcon, onClick: () => setFacetedOpen(true) }, "Open faceted selector")),
         React.createElement(Suspense, { fallback: React.createElement("div", null) }, facetedOpen ? (React.createElement(FacetedDialog, { handleClose: () => setFacetedOpen(false), model: model })) : null)));
-}
-export default observer(HierarchicalTrackSelectorHeader);
+});
+export default HierarchicalTrackSelectorHeader;

package/esm/HierarchicalTrackSelectorWidget/components/tree/HierarchicalTree.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import { TreeNode } from '../../generateHierarchy';
 import { HierarchicalTrackSelectorModel } from '../../model';
-declare const _default: ({ height, tree, model, }: {
+declare const HierarchicalTree: ({ height, tree, model, }: {
     height: number;
     tree: TreeNode;
     model: HierarchicalTrackSelectorModel;
 }) => React.JSX.Element;
-export default _default;
+export default HierarchicalTree;

package/esm/HierarchicalTrackSelectorWidget/components/tree/HierarchicalTree.js

@@ -23,7 +23,7 @@ function getNodeData(node, nestingLevel, extra, selection) {
 // this is the main tree component for the hierarchical track selector in note:
 // in jbrowse-web the toolbar is position="sticky" which means the autosizer
 // includes the height of the toolbar, so we subtract the given offsets
-export default observer(function HierarchicalTree({ height, tree, model, }) {
+const HierarchicalTree = observer(function HierarchicalTree({ height, tree, model, }) {
     const { filterText, selection, view } = model;
     const treeRef = useRef(null);
     const session = getSession(model);
@@ -37,15 +37,13 @@ export default observer(function HierarchicalTree({ height, tree, model, }) {
         drawerPosition,
     }), [view, model, drawerPosition, tree]);
     const treeWalker = useCallback(function* treeWalker() {
-        for (let i = 0; i < tree.children.length; i++) {
-            const r = tree.children[i];
-            yield getNodeData(r, 0, extra, obj);
+        for (const child of tree.children) {
+            yield getNodeData(child, 0, extra, obj);
         }
         while (true) {
             // @ts-expect-error
             const parentMeta = yield;
-            for (let i = 0; i < parentMeta.node.children.length; i++) {
-                const curr = parentMeta.node.children[i];
+            for (const curr of parentMeta.node.children) {
                 yield getNodeData(curr, parentMeta.nestingLevel + 1, extra, obj);
             }
         }
@@ -60,3 +58,4 @@ export default observer(function HierarchicalTree({ height, tree, model, }) {
     return (React.createElement(React.Fragment, null,
         React.createElement(VariableSizeTree, { ref: treeRef, treeWalker: treeWalker, height: height }, Node)));
 });
+export default HierarchicalTree;

package/esm/HierarchicalTrackSelectorWidget/components/tree/TrackLabel.js

@@ -3,12 +3,12 @@ import { Checkbox, FormControlLabel, IconButton, Tooltip } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
 import JBrowseMenu from '@jbrowse/core/ui/Menu';
 import { getSession } from '@jbrowse/core/util';
+import SanitizedHTML from '@jbrowse/core/ui/SanitizedHTML';
 import { readConfObject, } from '@jbrowse/core/configuration';
 // icons
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 // locals
 import { isUnsupported } from '../util';
-import { SanitizedHTML } from '@jbrowse/core/ui';
 const useStyles = makeStyles()(theme => ({
     compactCheckbox: {
         padding: 0,

package/esm/HierarchicalTrackSelectorWidget/components/util.js

@@ -6,8 +6,7 @@ export function treeToMap(tree, map = new Map()) {
     if (tree.id && tree.children.length) {
         map.set(tree.id, tree);
     }
-    for (let i = 0; i < tree.children.length; i++) {
-        const node = tree.children[i];
+    for (const node of tree.children) {
         treeToMap(node, map);
     }
     return map;

package/esm/HierarchicalTrackSelectorWidget/generateHierarchy.d.ts

@@ -1,12 +1,12 @@
 import { AnyConfigurationModel } from '@jbrowse/core/configuration';
-export type TreeNode = {
+export interface TreeNode {
     name: string;
     id: string;
     conf?: AnyConfigurationModel;
     checked?: boolean;
     isOpenByDefault?: boolean;
     children: TreeNode[];
-};
+}
 export declare function generateHierarchy(model: {
     filterText: string;
     activeSortTrackNames: boolean;

package/esm/HierarchicalTrackSelectorWidget/model.js

@@ -260,21 +260,19 @@ export default function stateTreeFactory(pluginManager) {
                 ])) {
                     self.collapseTopLevelCategories();
                 }
-                else if (getConf(session, [
+                if (getConf(session, [
                     'hierarchical',
                     'defaultCollapsed',
                     'subCategories',
                 ])) {
                     self.collapseSubCategories();
                 }
-                else {
-                    for (const entry of getConf(session, [
-                        'hierarchical',
-                        'defaultCollapsed',
-                        'categoryNames',
-                    ])) {
-                        self.collapsed.set(entry, true);
-                    }
+                for (const entry of getConf(session, [
+                    'hierarchical',
+                    'defaultCollapsed',
+                    'categoryNames',
+                ])) {
+                    self.collapsed.set(entry, true);
                 }
                 self.initialized = true;
             }
@@ -282,7 +280,7 @@ export default function stateTreeFactory(pluginManager) {
     }))
         .views(self => ({
         get hasAnySubcategories() {
-            return self.allTracks.some(group => group.tracks.some(track => { var _a; return ((_a = readConfObject(track, 'category')) === null || _a === void 0 ? void 0 : _a.length) > 1; }));
+            return self.allTracks.some(group => group.tracks.some(t => { var _a; return ((_a = readConfObject(t, 'category')) === null || _a === void 0 ? void 0 : _a.length) > 1; }));
         },
     }));
 }

package/esm/PluginStoreWidget/components/AddCustomPluginDialog.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { PluginStoreModel } from '../model';
-declare const _default: ({ onClose, model, }: {
+declare const AddCustomPluginDialog: ({ onClose, model, }: {
     onClose: () => void;
     model: PluginStoreModel;
 }) => React.JSX.Element;
-export default _default;
+export default AddCustomPluginDialog;

package/esm/PluginStoreWidget/components/AddCustomPluginDialog.js

@@ -23,7 +23,7 @@ const useStyles = makeStyles()(theme => ({
         transform: 'rotate(180deg)',
     },
 }));
-export default observer(function ({ onClose, model, }) {
+const AddCustomPluginDialog = observer(function ({ onClose, model, }) {
     const { classes, cx } = useStyles();
     const [umdPluginName, setUMDPluginName] = useState('');
     const [umdPluginUrl, setUMDPluginUrl] = useState('');
@@ -64,3 +64,4 @@ export default observer(function ({ onClose, model, }) {
                 React.createElement(Button, { variant: "contained", onClick: onClose }, "Cancel"),
                 React.createElement(Button, { variant: "contained", color: "primary", onClick: handleSubmit, disabled: !ready }, "Submit")))));
 });
+export default AddCustomPluginDialog;

package/esm/PluginStoreWidget/components/InstalledPlugin.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { BasePlugin } from '@jbrowse/core/util/types';
 import { PluginStoreModel } from '../model';
-declare const _default: ({ plugin, model, }: {
+declare const InstalledPlugin: ({ plugin, model, }: {
     plugin: BasePlugin;
     model: PluginStoreModel;
 }) => React.JSX.Element;
-export default _default;
+export default InstalledPlugin;

package/esm/PluginStoreWidget/components/InstalledPlugin.js

@@ -18,12 +18,15 @@ function LockedPlugin() {
     return (React.createElement(Tooltip, { className: classes.lockedPluginTooltip, title: "This plugin was installed by an administrator, you cannot remove it." },
         React.createElement(LockIcon, null)));
 }
-export default observer(function ({ plugin, model, }) {
+const InstalledPlugin = observer(function ({ plugin, model, }) {
+    var _a;
     const [dialogPlugin, setDialogPlugin] = useState();
     const { pluginManager } = getEnv(model);
     const session = getSession(model);
-    const { jbrowse, adminMode, sessionPlugins } = session;
-    const isSessionPlugin = sessionPlugins === null || sessionPlugins === void 0 ? void 0 : sessionPlugins.some((p) => pluginManager.pluginMetadata[plugin.name].url === p.url);
+    const { jbrowse, adminMode } = session;
+    const isSessionPlugin = isSessionWithSessionPlugins(session)
+        ? (_a = session.sessionPlugins) === null || _a === void 0 ? void 0 : _a.some(p => pluginManager.pluginMetadata[plugin.name].url === p.url)
+        : false;
     return (React.createElement(React.Fragment, null,
         dialogPlugin ? (React.createElement(Suspense, { fallback: React.createElement(React.Fragment, null) },
             React.createElement(DeletePluginDialog, { plugin: dialogPlugin, onClose: name => {
@@ -39,7 +42,8 @@ export default observer(function ({ plugin, model, }) {
                     setDialogPlugin(undefined);
                 } }))) : null,
         React.createElement(ListItem, { key: plugin.name },
-            adminMode || isSessionPlugin ? (React.createElement(IconButton, { "aria-label": "removePlugin", "data-testid": `removePlugin-${plugin.name}`, onClick: () => setDialogPlugin(plugin.name) },
+            adminMode || isSessionPlugin ? (React.createElement(IconButton, { "data-testid": `removePlugin-${plugin.name}`, onClick: () => setDialogPlugin(plugin.name) },
                 React.createElement(CloseIcon, null))) : (React.createElement(LockedPlugin, null)),
             React.createElement(Typography, null, plugin.name))));
 });
+export default InstalledPlugin;

package/esm/PluginStoreWidget/components/InstalledPluginsList.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import PluginManager from '@jbrowse/core/PluginManager';
 import { PluginStoreModel } from '../model';
-declare const _default: ({ pluginManager, model, }: {
+declare const InstalledPluginsList: ({ pluginManager, model, }: {
     pluginManager: PluginManager;
     model: PluginStoreModel;
 }) => React.JSX.Element;
-export default _default;
+export default InstalledPluginsList;

package/esm/PluginStoreWidget/components/InstalledPluginsList.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { observer } from 'mobx-react';
 import { List, Typography } from '@mui/material';
 import InstalledPlugin from './InstalledPlugin';
-export default observer(function InstalledPluginsList({ pluginManager, model, }) {
+const InstalledPluginsList = observer(function InstalledPluginsList({ pluginManager, model, }) {
     const { plugins } = pluginManager;
     const { filterText } = model;
     const externalPlugins = plugins.filter(p => { var _a; return !((_a = pluginManager.pluginMetadata[p.name]) === null || _a === void 0 ? void 0 : _a.isCore); });
@@ -10,3 +10,4 @@ export default observer(function InstalledPluginsList({ pluginManager, model, })
         .filter(p => p.name.toLowerCase().includes(filterText.toLowerCase()))
         .map(p => React.createElement(InstalledPlugin, { key: p.name, plugin: p, model: model }))) : (React.createElement(Typography, null, "No plugins currently installed"))));
 });
+export default InstalledPluginsList;

package/esm/PluginStoreWidget/components/PluginCard.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import { JBrowsePlugin } from '@jbrowse/core/util/types';
 import { PluginStoreModel } from '../model';
-declare const _default: ({ plugin, model, adminMode, }: {
+declare const PluginCard: ({ plugin, model, adminMode, }: {
     plugin: JBrowsePlugin;
     model: PluginStoreModel;
     adminMode: boolean;
 }) => React.JSX.Element;
-export default _default;
+export default PluginCard;

package/esm/PluginStoreWidget/components/PluginCard.js

@@ -25,7 +25,7 @@ const useStyles = makeStyles()({
         alignItems: 'center',
     },
 });
-export default observer(function PluginCard({ plugin, model, adminMode, }) {
+const PluginCard = observer(function PluginCard({ plugin, model, adminMode, }) {
     const { classes } = useStyles();
     const session = getSession(model);
     const { pluginManager } = getEnv(model);
@@ -56,3 +56,4 @@ export default observer(function PluginCard({ plugin, model, adminMode, }) {
                     setTempDisabled(true);
                 } }, isInstalled ? 'Installed' : 'Install'))));
 });
+export default PluginCard;

package/esm/PluginStoreWidget/components/PluginStoreWidget.d.ts

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

package/esm/PluginStoreWidget/components/PluginStoreWidget.js

@@ -31,7 +31,7 @@ const useStyles = makeStyles()(theme => ({
         display: 'flex',
     },
 }));
-function PluginStoreWidget({ model }) {
+const PluginStoreWidget = observer(function ({ model, }) {
     const { classes } = useStyles();
     const { plugins, error } = useFetchPlugins();
     const [open, setOpen] = useState(false);
@@ -70,5 +70,5 @@ function PluginStoreWidget({ model }) {
                         .includes(model.filterText.toLowerCase()));
             })
                 .map(plugin => (React.createElement(PluginCard, { key: plugin.name, plugin: plugin, model: model, adminMode: !!adminMode })))) : (React.createElement(LoadingEllipses, null)))));
-}
-export default observer(PluginStoreWidget);
+});
+export default PluginStoreWidget;

package/esm/index.d.ts

@@ -1,10 +1,6 @@
 /// <reference types="react" />
 import Plugin from '@jbrowse/core/Plugin';
 import PluginManager from '@jbrowse/core/PluginManager';
-declare const SetDefaultSession: import("react").LazyExoticComponent<({ rootModel, onClose }: {
-    rootModel?: unknown;
-    onClose: () => void;
-}) => import("react").JSX.Element | null>;
 declare const AssemblyManager: import("react").LazyExoticComponent<({ rootModel, onClose, }: {
     rootModel: any;
     onClose: (arg: boolean) => void;
@@ -16,14 +12,10 @@ export default class extends Plugin {
             rootModel: any;
             onClose: (arg: boolean) => void;
         }) => import("react").JSX.Element>;
-        SetDefaultSession: import("react").LazyExoticComponent<({ rootModel, onClose }: {
-            rootModel?: unknown;
-            onClose: () => void;
-        }) => import("react").JSX.Element | null>;
     };
     install(pluginManager: PluginManager): void;
     configure(_pluginManager: PluginManager): void;
 }
-export { AssemblyManager, SetDefaultSession };
+export { AssemblyManager };
 export { type AddTrackModel } from './AddTrackWidget/model';
 export { type HierarchicalTrackSelectorModel } from './HierarchicalTrackSelectorWidget';

package/esm/index.js

@@ -5,7 +5,6 @@ import AddTrackWidgetF from './AddTrackWidget';
 import AddConnectionWidgetF from './AddConnectionWidget';
 import PluginStoreWidgetF from './PluginStoreWidget';
 import HierarchicalTrackSelectorWidgetF from './HierarchicalTrackSelectorWidget';
-const SetDefaultSession = lazy(() => import('./SetDefaultSession'));
 const AssemblyManager = lazy(() => import('./AssemblyManager'));
 export default class extends Plugin {
     constructor() {
@@ -13,7 +12,6 @@ export default class extends Plugin {
         this.name = 'DataManagementPlugin';
         this.exports = {
             AssemblyManager,
-            SetDefaultSession,
         };
     }
     install(pluginManager) {
@@ -25,4 +23,4 @@ export default class extends Plugin {
     }
     configure(_pluginManager) { }
 }
-export { AssemblyManager, SetDefaultSession };
+export { AssemblyManager };

package/esm/ucsc-trackhub/model.js

@@ -12,7 +12,7 @@ export default function UCSCTrackHubConnection(pluginManager) {
     }))
         .actions(self => ({
         async connect() {
-            var _a;
+            var _a, _b;
             const session = getSession(self);
             const notLoadedAssemblies = [];
             try {
@@ -80,7 +80,7 @@ export default function UCSCTrackHubConnection(pluginManager) {
             catch (e) {
                 console.error(e);
                 session.notify(`There was a problem connecting to the UCSC Track Hub "${self.configuration.name}". Please make sure you have entered a valid hub.txt file. The error that was thrown is: "${e}"`, 'error');
-                session.breakConnection(self.configuration);
+                (_b = session.breakConnection) === null || _b === void 0 ? void 0 : _b.call(session, self.configuration);
             }
         },
     }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-data-management",
-  "version": "2.6.3",
+  "version": "2.7.0",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
     "jbrowse",
@@ -39,7 +39,7 @@
     "@gmod/ucsc-hub": "^0.1.6",
     "@mui/icons-material": "^5.0.1",
     "@mui/x-data-grid": "^6.0.1",
-    "clsx": "^1.1.0",
+    "clsx": "^2.0.0",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-vtree": "^3.0.0-beta.1",
     "react-window": "^1.8.6"
@@ -47,9 +47,10 @@
   "peerDependencies": {
     "@jbrowse/core": "^2.0.0",
     "@jbrowse/plugin-config": "^2.0.0",
+    "@jbrowse/product-core": "^2.0.0",
     "@mui/material": "^5.0.0",
     "mobx": "^6.0.0",
-    "mobx-react": "^7.0.0",
+    "mobx-react": "^9.0.0",
     "mobx-state-tree": "^5.0.0",
     "react": ">=16.8.0",
     "tss-react": "^4.0.0"
@@ -60,5 +61,5 @@
   "distModule": "esm/index.js",
   "srcModule": "src/index.ts",
   "module": "esm/index.js",
-  "gitHead": "ed402c87efb0904858d602c363bd1757d5742129"
+  "gitHead": "dbe7fb1af01fc89f833d2744635eb44a17365b41"
 }

package/dist/SetDefaultSession/SetDefaultSession.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-declare const SetDefaultSession: ({ rootModel, onClose }: {
-    rootModel?: unknown;
-    onClose: () => void;
-}) => React.JSX.Element | null;
-export default SetDefaultSession;