@jbrowse/plugin-data-management 2.16.1 → 2.18.0

package/esm/AssemblyManager/AssemblyManager.js

@@ -1,38 +1,24 @@
 import React, { useState } from 'react';
-import { observer } from 'mobx-react';
-import { Button, DialogActions, DialogContent } from '@mui/material';
 import { Dialog } from '@jbrowse/core/ui';
-// icons
-import AddIcon from '@mui/icons-material/Add';
-// locals
-import AssemblyTable from './AssemblyTable';
+import { observer } from 'mobx-react';
 import AssemblyAddForm from './AssemblyAddForm';
 import AssemblyEditor from './AssemblyEditor';
-const AssemblyManager = observer(function ({ rootModel, onClose, }) {
+import AssemblyTable from './AssemblyTable';
+const AssemblyManager = observer(function ({ session, onClose, }) {
     const [isFormOpen, setFormOpen] = useState(false);
-    const [isAssemblyBeingEdited, setIsAssemblyBeingEdited] = useState(false);
-    const [assemblyBeingEdited, setAssemblyBeingEdited] = useState();
-    const showAssemblyTable = !isFormOpen && !isAssemblyBeingEdited;
-    return (React.createElement(Dialog, { open: true, onClose: () => {
-            onClose(false);
-        }, title: "Assembly manager" },
-        React.createElement(DialogContent, null,
-            showAssemblyTable ? (React.createElement(AssemblyTable, { rootModel: rootModel, setIsAssemblyBeingEdited: setIsAssemblyBeingEdited, setAssemblyBeingEdited: setAssemblyBeingEdited })) : null,
-            isAssemblyBeingEdited ? (React.createElement(AssemblyEditor, { assembly: assemblyBeingEdited })) : null,
-            isFormOpen ? (React.createElement(AssemblyAddForm, { rootModel: rootModel, setFormOpen: setFormOpen })) : null),
-        React.createElement(DialogActions, null,
-            isFormOpen ? (React.createElement(Button, { variant: "contained", onClick: () => {
-                    setFormOpen(false);
-                } }, "Back")) : null,
-            isAssemblyBeingEdited ? (React.createElement(Button, { variant: "contained", onClick: () => {
-                    setIsAssemblyBeingEdited(false);
-                } }, "Back")) : null,
-            showAssemblyTable ? (React.createElement(React.Fragment, null,
-                React.createElement(Button, { color: "secondary", variant: "contained", onClick: () => {
-                        onClose(false);
-                    } }, "Close"),
-                React.createElement(Button, { variant: "contained", startIcon: React.createElement(AddIcon, null), onClick: () => {
-                        setFormOpen(true);
-                    } }, "Add new assembly"))) : null)));
+    const [editingAssembly, setEditingAssembly] = useState();
+    return (React.createElement(Dialog, { open: true, title: "Assembly manager", onClose: () => {
+            onClose();
+        } }, editingAssembly ? (React.createElement(AssemblyEditor, { assembly: editingAssembly, onClose: () => {
+            setEditingAssembly(undefined);
+        } })) : isFormOpen ? (React.createElement(AssemblyAddForm, { session: session, onClose: () => {
+            setFormOpen(false);
+        } })) : (React.createElement(AssemblyTable, { session: session, onClose: () => {
+            onClose();
+        }, onAddAssembly: () => {
+            setFormOpen(true);
+        }, onEditAssembly: arg => {
+            setEditingAssembly(arg);
+        } }))));
 });
 export default AssemblyManager;

package/esm/AssemblyManager/AssemblyTable.d.ts

@@ -1,13 +1,10 @@
 import React from 'react';
-import { AnyConfigurationModel } from '@jbrowse/core/configuration';
-declare const AssemblyTable: ({ rootModel, setIsAssemblyBeingEdited, setAssemblyBeingEdited, }: {
-    rootModel: {
-        jbrowse: {
-            removeAssemblyConf: (arg: string) => void;
-            assemblies: AnyConfigurationModel[];
-        };
-    };
-    setIsAssemblyBeingEdited(arg: boolean): void;
-    setAssemblyBeingEdited(arg: AnyConfigurationModel): void;
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import type { AbstractSessionModel } from '@jbrowse/core/util';
+declare const AssemblyTable: ({ onEditAssembly, onAddAssembly, onClose, session, }: {
+    onEditAssembly: (arg: AnyConfigurationModel) => void;
+    onAddAssembly: () => void;
+    onClose: () => void;
+    session: AbstractSessionModel;
 }) => React.JSX.Element;
 export default AssemblyTable;

package/esm/AssemblyManager/AssemblyTable.js

@@ -1,40 +1,59 @@
 import React from 'react';
-import { observer } from 'mobx-react';
-import { IconButton, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, } from '@mui/material';
-import { readConfObject, } from '@jbrowse/core/configuration';
+import { readConfObject } from '@jbrowse/core/configuration';
+import AddIcon from '@mui/icons-material/Add';
 import CreateIcon from '@mui/icons-material/Create';
 import DeleteIcon from '@mui/icons-material/Delete';
-const AssemblyTable = observer(function ({ rootModel, setIsAssemblyBeingEdited, setAssemblyBeingEdited, }) {
-    function removeAssembly(name) {
-        rootModel.jbrowse.removeAssemblyConf(name);
-    }
-    const { assemblies } = rootModel.jbrowse;
-    return (React.createElement(TableContainer, { component: Paper },
-        React.createElement(Table, null,
-            React.createElement(TableHead, null,
-                React.createElement(TableRow, null,
-                    React.createElement(TableCell, null, "Name"),
-                    React.createElement(TableCell, null, "Display name"),
-                    React.createElement(TableCell, null, "Aliases"),
-                    React.createElement(TableCell, null, "Actions"))),
-            React.createElement(TableBody, null, assemblies.map(assembly => {
-                const name = readConfObject(assembly, 'name');
-                const displayName = readConfObject(assembly, 'displayName');
-                const aliases = readConfObject(assembly, 'aliases');
-                return (React.createElement(TableRow, { key: name },
-                    React.createElement(TableCell, null, name),
-                    React.createElement(TableCell, null, displayName),
-                    React.createElement(TableCell, null, aliases ? aliases.toString() : ''),
-                    React.createElement(TableCell, null,
-                        React.createElement(IconButton, { "data-testid": `${name}-edit`, onClick: () => {
-                                setIsAssemblyBeingEdited(true);
-                                setAssemblyBeingEdited(assembly);
-                            } },
-                            React.createElement(CreateIcon, { color: "primary" })),
-                        React.createElement(IconButton, { "data-testid": `${name}-delete`, onClick: () => {
-                                removeAssembly(name);
-                            } },
-                            React.createElement(DeleteIcon, { color: "error" })))));
-            })))));
+import { Button, DialogActions, DialogContent, IconButton } from '@mui/material';
+import { DataGrid } from '@mui/x-data-grid';
+import { observer } from 'mobx-react';
+const AssemblyTable = observer(function ({ onEditAssembly, onAddAssembly, onClose, session, }) {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DialogContent, null,
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column' } },
+                React.createElement(DataGrid, { rowHeight: 25, columnHeaderHeight: 35, hideFooter: session.assemblies.length < 25, rows: session.assemblies.map(assembly => {
+                        return {
+                            id: readConfObject(assembly, 'name'),
+                            name: readConfObject(assembly, 'name'),
+                            displayName: readConfObject(assembly, 'displayName'),
+                            aliases: readConfObject(assembly, 'aliases'),
+                            assembly,
+                        };
+                    }), columns: [
+                        { field: 'name' },
+                        { field: 'displayName' },
+                        { field: 'aliases' },
+                        {
+                            field: 'actions',
+                            renderCell: ({ row }) => {
+                                const { assembly, name } = row;
+                                const editable = session.sessionAssemblies.includes(assembly)
+                                    ? true
+                                    : session.adminMode;
+                                return (React.createElement(React.Fragment, null,
+                                    React.createElement(IconButton, { onClick: () => {
+                                            onEditAssembly(assembly);
+                                        } },
+                                        React.createElement(CreateIcon, null)),
+                                    React.createElement(IconButton, { "data-testid": `${name}-delete`, disabled: !editable, onClick: () => {
+                                            if (editable) {
+                                                if (!session.removeAssembly) {
+                                                    session.notify('Unable to find removeAssembly function');
+                                                }
+                                                else {
+                                                    session.removeAssembly(name);
+                                                }
+                                            }
+                                        } },
+                                        React.createElement(DeleteIcon, null))));
+                            },
+                        },
+                    ] }))),
+        React.createElement(DialogActions, null,
+            React.createElement(Button, { color: "secondary", variant: "contained", onClick: () => {
+                    onClose();
+                } }, "Close"),
+            React.createElement(Button, { variant: "contained", startIcon: React.createElement(AddIcon, null), onClick: () => {
+                    onAddAssembly();
+                } }, "Add new assembly"))));
 });
 export default AssemblyTable;

package/esm/HierarchicalTrackSelectorWidget/components/HierarchicalFab.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { HierarchicalTrackSelectorModel } from '../model';
+import type { HierarchicalTrackSelectorModel } from '../model';
 declare const HierarchicalFab: ({ model, }: {
     model: HierarchicalTrackSelectorModel;
 }) => React.JSX.Element | null;

package/esm/HierarchicalTrackSelectorWidget/components/HierarchicalFab.js

@@ -1,10 +1,9 @@
 import React, { useState } from 'react';
+import { getSession, isSessionModelWithConnections, isSessionModelWithWidgets, isSessionWithAddTracks, } from '@jbrowse/core/util';
+import AddIcon from '@mui/icons-material/Add';
 import { Fab, Menu, MenuItem } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
-import { getSession, isSessionModelWithWidgets, isSessionModelWithConnections, isSessionWithAddTracks, } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
-// icons
-import AddIcon from '@mui/icons-material/Add';
+import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()(theme => ({
     fab: {
         position: 'absolute',

package/esm/HierarchicalTrackSelectorWidget/components/HierarchicalTrackSelector.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { HierarchicalTrackSelectorModel } from '../model';
+import type { HierarchicalTrackSelectorModel } from '../model';
 declare const HierarchicalTrackSelectorContainer: ({ model, toolbarHeight, overrideDimensions, }: {
     model: HierarchicalTrackSelectorModel;
     toolbarHeight: number;

package/esm/HierarchicalTrackSelectorWidget/components/HierarchicalTrackSelector.js

@@ -2,10 +2,8 @@ import React, { useState } from 'react';
 import { observer } from 'mobx-react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import HierarchicalFab from './HierarchicalFab';
-import HierarchicalTree from './tree/HierarchicalTree';
 import HierarchicalHeader from './tree/HierarchicalHeader';
-// Don't use autosizer in jest and instead hardcode a height, otherwise fails
-// jest tests
+import HierarchicalTree from './tree/HierarchicalTree';
 const AutoSizedHierarchicalTree = ({ tree, model, offset, }) => {
     return typeof jest === 'undefined' ? (React.createElement(AutoSizer, { disableWidth: true }, args => (React.createElement(HierarchicalTree, { height: (args.height || offset) - offset, model: model, tree: tree })))) : (React.createElement(HierarchicalTree, { height: 9000, model: model, tree: tree }));
 };

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

@@ -1,5 +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;

package/esm/HierarchicalTrackSelectorWidget/components/ShoppingCart.js

@@ -1,10 +1,9 @@
 import React from 'react';
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
+import { getEnv, getSession } from '@jbrowse/core/util';
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import { Badge } from '@mui/material';
 import { observer } from 'mobx-react';
-import { getSession, getEnv } from '@jbrowse/core/util';
-// icons
-import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
-import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
 const ShoppingCart = observer(function ({ model, }) {
     const { selection } = model;
     const { pluginManager } = getEnv(model);

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

@@ -1,10 +1,10 @@
 import React from 'react';
-import { DialogContent, DialogContentText, Button, List, ListItem, DialogActions, } from '@mui/material';
 import { Dialog } from '@jbrowse/core/ui';
+import { Button, DialogActions, DialogContent, DialogContentText, List, ListItem, } from '@mui/material';
 import { observer } from 'mobx-react';
 const CloseConnectionDialog = observer(function CloseConnectionDialog({ modalInfo = {}, onClose, }) {
     const { name, dereferenceTypeCount, safelyBreakConnection } = modalInfo;
-    return (React.createElement(Dialog, { open: true, maxWidth: "lg", title: `Close connection "${name}"` },
+    return (React.createElement(Dialog, { open: true, maxWidth: "lg", title: `Close connection "${name}"`, onClose: onClose },
         React.createElement(DialogContent, null,
             dereferenceTypeCount ? (React.createElement(React.Fragment, null,
                 React.createElement(DialogContentText, null, "Closing this connection will close:"),

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

@@ -1,6 +1,6 @@
 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;

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

@@ -1,10 +1,10 @@
 import React from 'react';
-import { DialogContent, DialogContentText, DialogActions, Button, } from '@mui/material';
 import { Dialog } from '@jbrowse/core/ui';
+import { Button, DialogActions, DialogContent, DialogContentText, } from '@mui/material';
 import { observer } from 'mobx-react';
 const DeleteConnectionDialog = observer(function DeleteConnectionDialog({ deleteDialogDetails, session, handleClose, }) {
     const { connectionConf, name } = deleteDialogDetails;
-    return (React.createElement(Dialog, { open: true, title: `Delete connection "${name}"` },
+    return (React.createElement(Dialog, { open: true, title: `Delete connection "${name}"`, onClose: handleClose },
         React.createElement(DialogContent, null,
             React.createElement(DialogContentText, null, "Are you sure you want to delete this connection?")),
         React.createElement(DialogActions, null,

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

@@ -1,6 +1,6 @@
 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;

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

@@ -1,11 +1,10 @@
 import React from 'react';
-import { Button, DialogContent, DialogActions, IconButton, Tooltip, Typography, } from '@mui/material';
+import { readConfObject } from '@jbrowse/core/configuration';
 import { Dialog } from '@jbrowse/core/ui';
-import { makeStyles } from 'tss-react/mui';
-import { observer } from 'mobx-react';
-import { readConfObject, } from '@jbrowse/core/configuration';
-// icons
 import CloseIcon from '@mui/icons-material/Close';
+import { Button, DialogActions, DialogContent, IconButton, Tooltip, Typography, } from '@mui/material';
+import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()(theme => ({
     connectionContainer: {
         margin: theme.spacing(4),

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

@@ -1,6 +1,6 @@
 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;

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Button, Checkbox, DialogContent, DialogActions, FormControlLabel, Typography, } from '@mui/material';
+import { readConfObject } from '@jbrowse/core/configuration';
 import { Dialog } from '@jbrowse/core/ui';
-import { makeStyles } from 'tss-react/mui';
+import { Button, Checkbox, DialogActions, DialogContent, FormControlLabel, Typography, } from '@mui/material';
 import { observer } from 'mobx-react';
-import { readConfObject, } from '@jbrowse/core/configuration';
+import { makeStyles } from 'tss-react/mui';
 function ellipses(slug) {
     return slug.length > 20 ? `${slug.slice(0, 20)}...` : slug;
 }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { HierarchicalTrackSelectorModel } from '../../model';
+import type { HierarchicalTrackSelectorModel } from '../../model';
 declare const FacetFilter: ({ column, vals, model, }: {
     column: {
         field: string;

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

@@ -1,12 +1,11 @@
 import React, { useState } from 'react';
-import { Typography, FormControl, Select, IconButton, Tooltip, } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
-// icon
+import { coarseStripHTML } from '@jbrowse/core/util';
+import AddIcon from '@mui/icons-material/Add';
 import ClearIcon from '@mui/icons-material/Clear';
 import MinimizeIcon from '@mui/icons-material/Minimize';
-import AddIcon from '@mui/icons-material/Add';
-import { coarseStripHTML } from '@jbrowse/core/util';
+import { FormControl, IconButton, Select, Tooltip, Typography, } from '@mui/material';
 import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()(theme => ({
     facet: {
         margin: 0,
@@ -45,9 +44,7 @@ const FacetFilter = observer(function ({ column, vals, model, }) {
                     setVisible(!visible);
                 } })),
         visible ? (React.createElement(Select, { multiple: true, native: true, className: classes.select, value: filters.get(column.field) || [], onChange: event => {
-                faceted.setFilter(column.field, 
-                // @ts-expect-error
-                [...event.target.options]
+                faceted.setFilter(column.field, [...event.target.options]
                     .filter(opt => opt.selected)
                     .map(opt => opt.value));
             } }, vals

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

@@ -1,6 +1,6 @@
 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: {

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { observer } from 'mobx-react';
-// locals
 import FacetFilter from './FacetFilter';
 import { getRowStr } from './util';
 const FacetFilters = observer(function ({ rows, columns, model, }) {
@@ -9,14 +8,10 @@ const FacetFilters = observer(function ({ rows, columns, model, }) {
     const { filters } = faceted;
     const facets = columns.slice(1);
     const uniqs = new Map(facets.map(f => [f.field, new Map()]));
-    // this code "stages the facet filters" in order that the user has selected
-    // them, which relies on the js behavior that the order of the returned keys is
-    // related to the insertion order.
     const filterKeys = faceted.filters.keys();
     const facetKeys = facets.map(f => f.field);
     const ret = new Set();
     for (const entry of filterKeys) {
-        // give non-empty filters priority
         if ((_a = filters.get(entry)) === null || _a === void 0 ? void 0 : _a.length) {
             ret.add(entry);
         }
@@ -30,7 +25,6 @@ const FacetFilters = observer(function ({ rows, columns, model, }) {
         for (const row of currentRows) {
             const key = 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);

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { HierarchicalTrackSelectorModel } from '../../model';
+import type { HierarchicalTrackSelectorModel } from '../../model';
 declare const FacetedTrackSelectorDialog: (props: {
     handleClose: () => void;
     model: HierarchicalTrackSelectorModel;

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { DialogContent } from '@mui/material';
 import { Dialog } from '@jbrowse/core/ui';
+import { DialogContent } from '@mui/material';
 import { observer } from 'mobx-react';
 import FacetedSelector from './FacetedSelector';
 const FacetedTrackSelectorDialog = observer(function (props) {

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

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

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

@@ -1,10 +1,8 @@
 import React, { useState } from 'react';
-import { Grid, IconButton, InputAdornment, TextField } from '@mui/material';
 import { Menu } from '@jbrowse/core/ui';
-// icons
 import ClearIcon from '@mui/icons-material/Clear';
 import MoreVert from '@mui/icons-material/MoreVert';
-// locals
+import { Grid, IconButton, InputAdornment, TextField } from '@mui/material';
 import ShoppingCart from '../ShoppingCart';
 export default function FacetedHeader({ model, }) {
     const { faceted } = model;
@@ -15,12 +13,14 @@ export default function FacetedHeader({ model, }) {
             React.createElement(Grid, { item: true },
                 React.createElement(TextField, { label: "Search...", value: faceted.filterText, onChange: event => {
                         faceted.setFilterText(event.target.value);
-                    }, InputProps: {
-                        endAdornment: (React.createElement(InputAdornment, { position: "end" },
-                            React.createElement(IconButton, { onClick: () => {
-                                    faceted.setFilterText('');
-                                } },
-                                React.createElement(ClearIcon, null)))),
+                    }, slotProps: {
+                        input: {
+                            endAdornment: (React.createElement(InputAdornment, { position: "end" },
+                                React.createElement(IconButton, { onClick: () => {
+                                        faceted.setFilterText('');
+                                    } },
+                                    React.createElement(ClearIcon, null)))),
+                        },
                     } })),
             React.createElement(Grid, { item: true },
                 React.createElement(IconButton, { onClick: event => {

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { AnyConfigurationModel } from '@jbrowse/core/configuration';
-import { HierarchicalTrackSelectorModel } from '../../model';
+import type { HierarchicalTrackSelectorModel } from '../../model';
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
 export interface InfoArgs {
     target: HTMLElement;
     id: string;

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

@@ -1,15 +1,14 @@
 import React, { useState } from 'react';
-import { transaction } from 'mobx';
-import { observer } from 'mobx-react';
-import { getRoot, resolveIdentifier } from 'mobx-state-tree';
-import { DataGrid, GridToolbar } from '@mui/x-data-grid';
-// jbrowse
 import { ResizeHandle } from '@jbrowse/core/ui';
 import SanitizedHTML from '@jbrowse/core/ui/SanitizedHTML';
 import { getEnv, measureGridWidth } from '@jbrowse/core/util';
+import { DataGrid, GridToolbar } from '@mui/x-data-grid';
+import { transaction } from 'mobx';
+import { observer } from 'mobx-react';
+import { getRoot, resolveIdentifier } from 'mobx-state-tree';
 import { makeStyles } from 'tss-react/mui';
-import FacetedHeader from './FacetedHeader';
 import FacetFilters from './FacetFilters';
+import FacetedHeader from './FacetedHeader';
 import TrackLabelMenu from '../tree/TrackLabelMenu';
 const useStyles = makeStyles()({
     cell: {
@@ -107,8 +106,6 @@ const FacetedSelector = observer(function FacetedSelector({ model, }) {
                         if (!useShoppingCart) {
                             const a1 = shownTrackIds;
                             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.has(x)).map(t => view.hideTrack(t));

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import { AnyConfigurationModel } from '@jbrowse/core/configuration';
-import { MenuItem } from '@jbrowse/core/ui/Menu';
-import { HierarchicalTrackSelectorModel } from '../../model';
+import type { HierarchicalTrackSelectorModel } from '../../model';
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import type { MenuItem } from '@jbrowse/core/ui/Menu';
 declare const DropdownTrackSelector: ({ model, tracks, extraMenuItems, children, onClick, }: {
     model: HierarchicalTrackSelectorModel;
     tracks: AnyConfigurationModel[];

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

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
-import { observer } from 'mobx-react';
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
 import SanitizedHTML from '@jbrowse/core/ui/SanitizedHTML';
-import { getTrackName } from '@jbrowse/core/util/tracks';
 import { getSession } from '@jbrowse/core/util';
+import { getTrackName } from '@jbrowse/core/util/tracks';
+import { observer } from 'mobx-react';
 import TrackLabelMenu from './TrackLabelMenu';
 const DropdownTrackSelector = observer(function ({ model, tracks, extraMenuItems, children, onClick, }) {
     const { view } = model;

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

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

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

@@ -1,9 +1,8 @@
 import React from 'react';
+import GradeIcon from '@mui/icons-material/Grade';
 import { Badge, Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
-// icons
-import GradeIcon from '@mui/icons-material/Grade';
 import DropdownTrackSelector from './DropdownTrackSelector';
 const useStyles = makeStyles()({
     smallBadge: {

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

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

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

@@ -1,13 +1,10 @@
 import React, { Suspense, lazy, useState } from 'react';
-import { observer } from 'mobx-react';
-import { getSession, isSessionModelWithConnectionEditing, isSessionModelWithConnections, isSessionModelWithWidgets, isSessionWithAddTracks, } from '@jbrowse/core/util';
-import { readConfObject, } from '@jbrowse/core/configuration';
+import { readConfObject } from '@jbrowse/core/configuration';
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
-// icons
+import { getSession, isSessionModelWithConnectionEditing, isSessionModelWithConnections, isSessionModelWithWidgets, isSessionWithAddTracks, } from '@jbrowse/core/util';
 import MenuIcon from '@mui/icons-material/Menu';
-// lazies
+import { observer } from 'mobx-react';
 const FacetedDialog = lazy(() => import('../faceted/FacetedDialog'));
-// lazy components
 const CloseConnectionDialog = lazy(() => import('../dialogs/CloseConnectionDialog'));
 const DeleteConnectionDialog = lazy(() => import('../dialogs/DeleteConnectionDialog'));
 const ManageConnectionsDialog = lazy(() => import('../dialogs/ManageConnectionsDialog'));

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { HierarchicalTrackSelectorModel } from '../../model';
+import type { HierarchicalTrackSelectorModel } from '../../model';
 declare const HierarchicalTrackSelectorHeader: ({ model, setHeaderHeight, }: {
     model: HierarchicalTrackSelectorModel;
     setHeaderHeight: (n: number) => void;