@jbrowse/plugin-data-management 3.7.0 → 4.0.0

package/esm/HierarchicalTrackSelectorWidget/model.js

@@ -1,25 +1,31 @@
 import { getConf, readConfObject } from '@jbrowse/core/configuration';
 import { dedupe, getSession, localStorageGetItem, localStorageSetItem, notEmpty, } from '@jbrowse/core/util';
 import { ElementId } from '@jbrowse/core/util/types/mst';
+import { addDisposer, types } from '@jbrowse/mobx-state-tree';
 import { autorun, observable } from 'mobx';
-import { addDisposer, types } from 'mobx-state-tree';
-import { facetedStateTreeF } from './facetedModel';
-import { filterTracks } from './filterTracks';
-import { generateHierarchy } from './generateHierarchy';
-import { findSubCategories, findTopLevelCategories } from './util';
+import { facetedStateTreeF } from "./facetedModel.js";
+import { filterTracks } from "./filterTracks.js";
+import { generateHierarchy } from "./generateHierarchy.js";
+import { findSubCategories, findTopLevelCategories } from "./util.js";
+const defaultItemHeight = 22;
+const categoryItemHeight = 40;
+const overscan = 20;
 function keyConfigPostFix() {
     return typeof window !== 'undefined'
         ? [
             window.location.pathname,
             new URLSearchParams(window.location.search).get('config'),
         ]
-            .filter(f => !!f)
+            .filter(Boolean)
             .join('-')
         : 'empty';
 }
+export function getItemHeight(item) {
+    return item.type === 'category' ? categoryItemHeight : defaultItemHeight;
+}
 function recentlyUsedK(assemblyNames) {
     return ['recentlyUsedTracks', keyConfigPostFix(), assemblyNames.join(',')]
-        .filter(f => !!f)
+        .filter(Boolean)
         .join('-');
 }
 function favoritesK() {
@@ -72,8 +78,7 @@ export default function stateTreeFactory(pluginManager) {
     }))
         .views(self => ({
         get shownTrackIds() {
-            var _a, _b;
-            return new Set((_b = (_a = self.view) === null || _a === void 0 ? void 0 : _a.tracks) === null || _b === void 0 ? void 0 : _b.map((t) => t.configuration.trackId));
+            return new Set(self.view?.tracks?.map((t) => t.configuration.trackId));
         },
         get selectionSet() {
             return new Set(self.selection);
@@ -85,8 +90,7 @@ export default function stateTreeFactory(pluginManager) {
             return new Set(self.recentlyUsed);
         },
         get assemblyNames() {
-            var _a;
-            return ((_a = self.view) === null || _a === void 0 ? void 0 : _a.assemblyNames) || [];
+            return self.view?.assemblyNames || [];
         },
     }))
         .actions(self => ({
@@ -178,7 +182,7 @@ export default function stateTreeFactory(pluginManager) {
         getRefSeqTrackConf(assemblyName) {
             const { assemblyManager } = getSession(self);
             const assembly = assemblyManager.get(assemblyName);
-            const trackConf = assembly === null || assembly === void 0 ? void 0 : assembly.configuration.sequence;
+            const trackConf = assembly?.configuration.sequence;
             const viewType = pluginManager.getViewType(self.view.type);
             if (trackConf) {
                 for (const display of trackConf.displays) {
@@ -192,12 +196,12 @@ export default function stateTreeFactory(pluginManager) {
     }))
         .views(self => ({
         get activeSortTrackNames() {
-            var _a;
-            return ((_a = self.sortTrackNames) !== null && _a !== void 0 ? _a : getConf(getSession(self), ['hierarchical', 'sort', 'trackNames']));
+            return (self.sortTrackNames ??
+                getConf(getSession(self), ['hierarchical', 'sort', 'trackNames']));
         },
         get activeSortCategories() {
-            var _a;
-            return ((_a = self.sortCategories) !== null && _a !== void 0 ? _a : getConf(getSession(self), ['hierarchical', 'sort', 'categories']));
+            return (self.sortCategories ??
+                getConf(getSession(self), ['hierarchical', 'sort', 'categories']));
         },
         get configAndSessionTrackConfigurations() {
             return [
@@ -252,14 +256,13 @@ export default function stateTreeFactory(pluginManager) {
             return {
                 name: 'Root',
                 id: 'Root',
-                isOpenByDefault: true,
                 type: 'category',
                 children: self.allTracks.map(s => ({
                     name: s.group,
                     id: s.group,
                     type: 'category',
-                    isOpenByDefault: !self.collapsed.get(s.group),
                     menuItems: s.menuItems,
+                    nestingLevel: 0,
                     children: generateHierarchy({
                         model: self,
                         trackConfs: s.tracks,
@@ -269,6 +272,70 @@ export default function stateTreeFactory(pluginManager) {
                 })),
             };
         },
+    }))
+        .views(self => ({
+        get flattenedItems() {
+            const flatten = (items, result = []) => {
+                for (const item of items) {
+                    result.push(item);
+                    if (item.children.length > 0 && !self.collapsed.get(item.id)) {
+                        flatten(item.children, result);
+                    }
+                }
+                return result;
+            };
+            return flatten(self.hierarchy.children);
+        },
+        get flattenedItemOffsets() {
+            const offsets = [];
+            let cumulativeHeight = 0;
+            for (let i = 0, l = this.flattenedItems.length; i < l; i++) {
+                offsets.push(cumulativeHeight);
+                cumulativeHeight += getItemHeight(this.flattenedItems[i]);
+            }
+            return { cumulativeHeight, offsets };
+        },
+    }))
+        .views(self => ({
+        itemOffsets(height, scrollTop) {
+            const { flattenedItemOffsets } = self;
+            const { cumulativeHeight, offsets } = flattenedItemOffsets;
+            if (offsets.length === 0) {
+                return {
+                    startIndex: 0,
+                    endIndex: 0,
+                    totalHeight: 0,
+                    itemOffsets: offsets,
+                };
+            }
+            const findIndexAtOffset = (offset) => {
+                let low = 0;
+                let high = offsets.length - 1;
+                while (low <= high) {
+                    const mid = Math.floor((low + high) / 2);
+                    if (offsets[mid] <= offset &&
+                        (mid === offsets.length - 1 || offsets[mid + 1] > offset)) {
+                        return mid;
+                    }
+                    else if (offsets[mid] < offset) {
+                        low = mid + 1;
+                    }
+                    else {
+                        high = mid - 1;
+                    }
+                }
+                return 0;
+            };
+            const start = Math.max(0, findIndexAtOffset(scrollTop) - overscan);
+            const targetHeight = scrollTop + height + overscan * defaultItemHeight;
+            const end = Math.min(offsets.length - 1, findIndexAtOffset(targetHeight) + overscan);
+            return {
+                startIndex: start,
+                endIndex: end,
+                totalHeight: cumulativeHeight,
+                itemOffsets: offsets,
+            };
+        },
     }))
         .actions(self => ({
         collapseSubCategories() {
@@ -292,12 +359,12 @@ export default function stateTreeFactory(pluginManager) {
     }))
         .views(self => ({
         get hasAnySubcategories() {
-            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; }));
+            return self.allTracks.some(group => group.tracks.some(t => readConfObject(t, 'category')?.length > 1));
         },
     }))
         .actions(self => ({
         afterAttach() {
-            addDisposer(self, autorun(() => {
+            addDisposer(self, autorun(function trackSelectorInitAutorun() {
                 const { assemblyNames, view } = self;
                 self.setRecentlyUsed(localStorageGetJSON(recentlyUsedK(assemblyNames), []));
                 if (view) {
@@ -320,8 +387,8 @@ export default function stateTreeFactory(pluginManager) {
                         self.setCollapsedCategories(lc);
                     }
                 }
-            }));
-            addDisposer(self, autorun(() => {
+            }, { name: 'TrackSelectorInit' }));
+            addDisposer(self, autorun(function trackSelectorLocalStorageAutorun() {
                 const { sortTrackNames, sortCategories, favorites, recentlyUsed, assemblyNames, collapsed, view, } = self;
                 localStorageSetJSON(recentlyUsedK(assemblyNames), recentlyUsed);
                 localStorageSetJSON(favoritesK(), favorites);
@@ -330,7 +397,7 @@ export default function stateTreeFactory(pluginManager) {
                 if (view) {
                     localStorageSetJSON(collapsedK(assemblyNames, view.type), collapsed);
                 }
-            }));
+            }, { name: 'TrackSelectorLocalStorage' }));
         },
     }));
 }

package/esm/HierarchicalTrackSelectorWidget/sortUtils.d.ts

@@ -0,0 +1,2 @@
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+export declare function sortConfs(confs: AnyConfigurationModel[], sortNames: boolean, sortCategories: boolean): any[];

package/esm/HierarchicalTrackSelectorWidget/sortUtils.js

@@ -0,0 +1,28 @@
+import { readConfObject } from '@jbrowse/core/configuration';
+export function sortConfs(confs, sortNames, sortCategories) {
+    const ret = confs.map(c => [
+        c,
+        readConfObject(c, 'name'),
+        readConfObject(c, 'category')?.[0] || '',
+        readConfObject(c, 'category')?.[1] || '',
+        readConfObject(c, 'category')?.[2] || '',
+    ]);
+    if (sortNames) {
+        ret.sort((a, b) => a[1].localeCompare(b[1]));
+    }
+    if (sortCategories) {
+        ret.sort((a, b) => {
+            if (a[2] !== b[2]) {
+                return a[2].localeCompare(b[2]);
+            }
+            else if (a[3] !== b[3]) {
+                return a[3].localeCompare(b[3]);
+            }
+            else if (a[4] !== b[4]) {
+                return a[4].localeCompare(b[4]);
+            }
+            return 0;
+        });
+    }
+    return ret.map(a => a[0]);
+}

package/esm/HierarchicalTrackSelectorWidget/types.d.ts

@@ -0,0 +1,23 @@
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+export interface TreeTrackNode {
+    name: string;
+    id: string;
+    trackId: string;
+    conf: AnyConfigurationModel;
+    children: TreeNode[];
+    nestingLevel: number;
+    type: 'track';
+}
+export interface TreeCategoryNode {
+    name: string;
+    id: string;
+    children: TreeNode[];
+    nestingLevel: number;
+    type: 'category';
+}
+export type TreeNode = TreeTrackNode | TreeCategoryNode;
+export interface MinimalModel {
+    filterText: string;
+    activeSortTrackNames: boolean;
+    activeSortCategories: boolean;
+}

package/esm/HierarchicalTrackSelectorWidget/types.js

@@ -0,0 +1 @@
+export {};

package/esm/HierarchicalTrackSelectorWidget/util.js

@@ -17,7 +17,7 @@ export function matches(query, conf, session) {
     const categories = (readConfObject(conf, 'category') || []);
     const queryLower = query.toLowerCase();
     return (getTrackName(conf, session).toLowerCase().includes(queryLower) ||
-        !!categories.filter(c => c.toLowerCase().includes(queryLower)).length);
+        categories.some(c => c.toLowerCase().includes(queryLower)));
 }
 export function findSubCategories(obj, paths, depth = 0) {
     let hasSubs = false;

package/esm/JB2TrackHubConnection/configSchema.d.ts

@@ -1,4 +1,4 @@
-declare const JB2TrackHubConnection: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+declare const JB2TrackHubConnection: import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaType<{
     configJsonLocation: {
         type: string;
         defaultValue: {
@@ -12,7 +12,7 @@ declare const JB2TrackHubConnection: import("@jbrowse/core/configuration/configu
         defaultValue: never[];
         description: string;
     };
-}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaOptions<import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaType<{
     name: {
         type: string;
         defaultValue: string;
@@ -23,5 +23,5 @@ declare const JB2TrackHubConnection: import("@jbrowse/core/configuration/configu
         defaultValue: never[];
         description: string;
     };
-}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "connectionId">>, undefined>>;
+}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "connectionId">>, undefined>>;
 export default JB2TrackHubConnection;

package/esm/JB2TrackHubConnection/doConnect.js

@@ -1,10 +1,9 @@
 import { getConf } from '@jbrowse/core/configuration';
 import { getSession } from '@jbrowse/core/util';
 import { openLocation } from '@jbrowse/core/util/io';
-import { addRelativeUris } from './addRelativeUris';
-import { resolve } from './util';
+import { addRelativeUris } from "./addRelativeUris.js";
+import { resolve } from "./util.js";
 export async function doConnect(self) {
-    var _a;
     const session = getSession(self);
     try {
         const configJsonLocation = getConf(self, 'configJsonLocation');
@@ -26,6 +25,6 @@ export async function doConnect(self) {
     catch (e) {
         console.error(e);
         session.notifyError(`${getConf(self, 'name')}: "${e}"`, e);
-        (_a = session.breakConnection) === null || _a === void 0 ? void 0 : _a.call(session, self.configuration);
+        session.breakConnection?.(self.configuration);
     }
 }

package/esm/JB2TrackHubConnection/index.js

@@ -1,6 +1,6 @@
 import { ConnectionType } from '@jbrowse/core/pluggableElementTypes';
-import configSchema from './configSchema';
-import stateModelFactory from './model';
+import configSchema from "./configSchema.js";
+import stateModelFactory from "./model.js";
 export default function JB2TrackHubConnectionF(pluginManager) {
     pluginManager.addConnectionType(() => {
         return new ConnectionType({

package/esm/JB2TrackHubConnection/model.d.ts

@@ -1,8 +1,8 @@
 import type PluginManager from '@jbrowse/core/PluginManager';
-export default function JB2TrackHubConnection(pluginManager: PluginManager): import("mobx-state-tree").IModelType<{
-    name: import("mobx-state-tree").ISimpleType<string>;
-    tracks: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyModelType>;
-    configuration: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+export default function JB2TrackHubConnection(pluginManager: PluginManager): import("@jbrowse/mobx-state-tree").IModelType<{
+    name: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
+    tracks: import("@jbrowse/mobx-state-tree").IArrayType<import("@jbrowse/mobx-state-tree").IAnyModelType>;
+    configuration: import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
         name: {
             type: string;
             defaultValue: string;
@@ -13,9 +13,9 @@ export default function JB2TrackHubConnection(pluginManager: PluginManager): imp
             defaultValue: never[];
             description: string;
         };
-    }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "connectionId">>;
+    }, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, "connectionId">>;
 } & {
-    configuration: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+    configuration: import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
         configJsonLocation: {
             type: string;
             defaultValue: {
@@ -29,7 +29,7 @@ export default function JB2TrackHubConnection(pluginManager: PluginManager): imp
             defaultValue: never[];
             description: string;
         };
-    }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+    }, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
         name: {
             type: string;
             defaultValue: string;
@@ -40,36 +40,28 @@ export default function JB2TrackHubConnection(pluginManager: PluginManager): imp
             defaultValue: never[];
             description: string;
         };
-    }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "connectionId">>, undefined>>;
-    type: import("mobx-state-tree").ISimpleType<"JB2TrackHubConnection">;
+    }, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, "connectionId">>, undefined>>;
+    type: import("@jbrowse/mobx-state-tree").ISimpleType<"JB2TrackHubConnection">;
 }, {
     connect(_arg: import("@jbrowse/core/configuration").AnyConfigurationModel): void;
 } & {
     afterAttach(): void;
-    addTrackConf(trackConf: ({
+    addTrackConf(trackConf: Record<string, unknown> | ({
         [x: string]: any;
-    } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
+    } & import("@jbrowse/mobx-state-tree/dist/internal").NonEmptyObject & {
         setSubschema(slotName: string, data: Record<string, unknown>): Record<string, unknown> | ({
             [x: string]: any;
-        } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
-            setSubschema(slotName: string, data: Record<string, unknown>): Record<string, unknown> | ({
-                [x: string]: any;
-            } & import("mobx-state-tree/dist/internal").NonEmptyObject & any & import("mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>);
-        } & import("mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>);
-    } & import("mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>) | Record<string, unknown>): any;
-    addTrackConfs(trackConfs: (({
+        } & import("@jbrowse/mobx-state-tree/dist/internal").NonEmptyObject & any & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>);
+    } & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>)): any;
+    addTrackConfs(trackConfs: (Record<string, unknown> | ({
         [x: string]: any;
-    } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
+    } & import("@jbrowse/mobx-state-tree/dist/internal").NonEmptyObject & {
         setSubschema(slotName: string, data: Record<string, unknown>): Record<string, unknown> | ({
             [x: string]: any;
-        } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
-            setSubschema(slotName: string, data: Record<string, unknown>): Record<string, unknown> | ({
-                [x: string]: any;
-            } & import("mobx-state-tree/dist/internal").NonEmptyObject & any & import("mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>);
-        } & import("mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>);
-    } & import("mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>) | Record<string, unknown>)[]): void;
+        } & import("@jbrowse/mobx-state-tree/dist/internal").NonEmptyObject & any & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>);
+    } & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>))[]): void;
     setTrackConfs(trackConfs: import("@jbrowse/core/configuration").AnyConfigurationModel[]): void;
     clear(): void;
 } & {
     connect(): Promise<void>;
-}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
+}, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>;

package/esm/JB2TrackHubConnection/model.js

@@ -1,7 +1,7 @@
 import { ConfigurationReference } from '@jbrowse/core/configuration';
 import { BaseConnectionModelFactory } from '@jbrowse/core/pluggableElementTypes/models';
-import { types } from 'mobx-state-tree';
-import configSchema from './configSchema';
+import { types } from '@jbrowse/mobx-state-tree';
+import configSchema from "./configSchema.js";
 export default function JB2TrackHubConnection(pluginManager) {
     return types
         .compose('JB2TrackHubConnection', BaseConnectionModelFactory(pluginManager), types.model({
@@ -10,7 +10,7 @@ export default function JB2TrackHubConnection(pluginManager) {
     }))
         .actions(self => ({
         async connect() {
-            const { doConnect } = await import('./doConnect');
+            const { doConnect } = await import("./doConnect.js");
             doConnect(self);
         },
     }));

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

@@ -1,4 +1,4 @@
-import type { PluginStoreModel } from '../model';
+import type { PluginStoreModel } from '../model.ts';
 declare const AddCustomPluginDialog: ({ onClose, model, }: {
     onClose: () => void;
     model: PluginStoreModel;

package/esm/PluginStoreWidget/components/AddCustomPluginDialog.js

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Dialog } from '@jbrowse/core/ui';
 import { getSession } from '@jbrowse/core/util';
+import { cx, makeStyles } from '@jbrowse/core/util/tss-react';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { Button, Collapse, DialogActions, DialogContent, DialogContentText, TextField, } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()(theme => ({
     dialogContent: {
         display: 'flex',
@@ -23,8 +23,8 @@ const useStyles = makeStyles()(theme => ({
         transform: 'rotate(180deg)',
     },
 }));
-const AddCustomPluginDialog = observer(function ({ onClose, model, }) {
-    const { classes, cx } = useStyles();
+const AddCustomPluginDialog = observer(function AddCustomPluginDialog({ onClose, model, }) {
+    const { classes } = useStyles();
     const [umdPluginName, setUMDPluginName] = useState('');
     const [umdPluginUrl, setUMDPluginUrl] = useState('');
     const [esmPluginUrl, setESMPluginUrl] = useState('');

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

@@ -1,4 +1,4 @@
-import type { PluginStoreModel } from '../model';
+import type { PluginStoreModel } from '../model.ts';
 import type { BasePlugin } from '@jbrowse/core/util/types';
 declare const InstalledPlugin: ({ plugin, model, }: {
     plugin: BasePlugin;

package/esm/PluginStoreWidget/components/InstalledPlugin.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { lazy } from 'react';
 import { getEnv, getSession } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { isSessionWithSessionPlugins } from '@jbrowse/core/util/types';
 import DeleteIcon from '@mui/icons-material/Delete';
 import LockIcon from '@mui/icons-material/Lock';
 import { IconButton, ListItem, Tooltip, Typography } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import { isSessionPlugin } from './util';
-const DeletePluginDialog = lazy(() => import('./DeletePluginDialog'));
+import { isSessionPlugin } from "./util.js";
+const DeletePluginDialog = lazy(() => import("./DeletePluginDialog.js"));
 const useStyles = makeStyles()(() => ({
     iconMargin: {
         marginRight: '0.5rem',
@@ -18,7 +18,7 @@ function LockedPluginIconButton() {
     const { classes } = useStyles();
     return (_jsx(Tooltip, { className: classes.iconMargin, title: "This plugin was installed by an administrator, you cannot remove it.", children: _jsx("span", { children: _jsx(IconButton, { disabled: true, children: _jsx(LockIcon, {}) }) }) }));
 }
-const UninstallPluginIconButton = observer(function ({ plugin, model, }) {
+const UninstallPluginIconButton = observer(function UninstallPluginIconButton({ plugin, model, }) {
     const { classes } = useStyles();
     const { pluginManager } = getEnv(model);
     const session = getSession(model);
@@ -44,7 +44,7 @@ const UninstallPluginIconButton = observer(function ({ plugin, model, }) {
                 ]);
             }, children: _jsx(DeleteIcon, {}) }) }));
 });
-const InstalledPlugin = observer(function ({ plugin, model, }) {
+const InstalledPlugin = observer(function InstalledPlugin({ plugin, model, }) {
     const session = getSession(model);
     const { adminMode } = session;
     return (_jsxs(ListItem, { children: [adminMode || isSessionPlugin(plugin, session) ? (_jsx(UninstallPluginIconButton, { plugin: plugin, model: model })) : (_jsx(LockedPluginIconButton, {})), _jsx(Typography, { children: [plugin.name, plugin.version ? `(v${plugin.version})` : '']

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

@@ -1,4 +1,4 @@
-import type { PluginStoreModel } from '../model';
+import type { PluginStoreModel } from '../model.ts';
 import type PluginManager from '@jbrowse/core/PluginManager';
 declare const InstalledPluginsList: ({ pluginManager, model, }: {
     pluginManager: PluginManager;

package/esm/PluginStoreWidget/components/InstalledPluginsList.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { List, Typography } from '@mui/material';
 import { observer } from 'mobx-react';
-import InstalledPlugin from './InstalledPlugin';
+import InstalledPlugin from "./InstalledPlugin.js";
 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); });
+    const externalPlugins = plugins.filter(p => !pluginManager.pluginMetadata[p.name]?.isCore);
     return (_jsx(List, { children: externalPlugins.length > 0 ? (externalPlugins
             .filter(p => p.name.toLowerCase().includes(filterText.toLowerCase()))
             .map(p => _jsx(InstalledPlugin, { plugin: p, model: model }, p.name))) : (_jsx(Typography, { children: "No plugins currently installed" })) }));

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

@@ -1,4 +1,4 @@
-import type { PluginStoreModel } from '../model';
+import type { PluginStoreModel } from '../model.ts';
 import type { JBrowsePlugin } from '@jbrowse/core/util/types';
 declare const PluginCard: ({ plugin, model, }: {
     plugin: JBrowsePlugin;

package/esm/PluginStoreWidget/components/PluginCard.js

@@ -2,21 +2,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { ExternalLink } from '@jbrowse/core/ui';
 import { getEnv, getSession } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { isSessionWithSessionPlugins } from '@jbrowse/core/util/types';
 import AddIcon from '@mui/icons-material/Add';
 import CheckIcon from '@mui/icons-material/Check';
 import PersonIcon from '@mui/icons-material/Person';
 import { Button, Card, CardActions, CardContent, Typography, } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()({
     card: {
         margin: '0.5em',
     },
-    icon: {
-        marginLeft: '0.5em',
-        marginRight: '0.5em',
-    },
     bold: {
         fontWeight: 600,
     },

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

@@ -1,4 +1,4 @@
-import type { PluginStoreModel } from '../model';
+import type { PluginStoreModel } from '../model.ts';
 declare const PluginStoreWidget: ({ model, }: {
     model: PluginStoreModel;
 }) => import("react/jsx-runtime").JSX.Element;

package/esm/PluginStoreWidget/components/PluginStoreWidget.js

@@ -1,18 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { lazy } from 'react';
+import { lazy, useEffect, useState, useTransition } from 'react';
 import { LoadingEllipses } from '@jbrowse/core/ui';
 import { getSession, isElectron } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { getEnv } from '@jbrowse/mobx-state-tree';
 import ClearIcon from '@mui/icons-material/Clear';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import { Accordion, AccordionSummary, Button, IconButton, InputAdornment, TextField, Typography, } from '@mui/material';
 import { observer } from 'mobx-react';
-import { getEnv } from 'mobx-state-tree';
-import { makeStyles } from 'tss-react/mui';
-import InstalledPluginsList from './InstalledPluginsList';
-import PluginCard from './PluginCard';
-import { useFetchPlugins } from './util';
-const AddCustomPluginDialog = lazy(() => import('./AddCustomPluginDialog'));
+import InstalledPluginsList from "./InstalledPluginsList.js";
+import PluginCard from "./PluginCard.js";
+import { useFetchPlugins } from "./util.js";
+const AddCustomPluginDialog = lazy(() => import("./AddCustomPluginDialog.js"));
 const useStyles = makeStyles()(theme => ({
     expandIcon: {
         color: theme.palette.tertiary.contrastText,
@@ -35,13 +35,20 @@ const useStyles = makeStyles()(theme => ({
         margin: '1em',
     },
 }));
-const PluginStoreWidget = observer(function ({ model, }) {
+const PluginStoreWidget = observer(function PluginStoreWidget({ model, }) {
     const { classes } = useStyles();
     const { plugins, error } = useFetchPlugins();
     const { filterText } = model;
+    const [localFilterText, setLocalFilterText] = useState(filterText);
+    const [, startTransition] = useTransition();
     const session = getSession(model);
     const { adminMode } = session;
     const { pluginManager } = getEnv(model);
+    useEffect(() => {
+        if (filterText === '') {
+            setLocalFilterText('');
+        }
+    }, [filterText]);
     return (_jsxs("div", { children: [adminMode && (_jsxs(_Fragment, { children: [!isElectron && (_jsxs("div", { className: classes.adminBadge, children: [_jsx(InfoOutlinedIcon, { className: classes.mr }), _jsxs(Typography, { children: ["You are using the ", _jsx("code", { children: "admin-server" }), ". Any changes you make will be saved to your configuration file. You also have the ability to add custom plugins that are not in the store."] })] })), _jsx(Button, { className: classes.customPluginButton, variant: "contained", onClick: () => {
                             session.queueDialog(onClose => [
                                 AddCustomPluginDialog,
@@ -50,11 +57,16 @@ const PluginStoreWidget = observer(function ({ model, }) {
                                     onClose,
                                 },
                             ]);
-                        }, children: "Add custom plugin" })] })), _jsx(TextField, { label: "Filter plugins", value: filterText, onChange: event => {
-                    model.setFilterText(event.target.value);
+                        }, children: "Add custom plugin" })] })), _jsx(TextField, { label: "Filter plugins", value: localFilterText, onChange: event => {
+                    const value = event.target.value;
+                    setLocalFilterText(value);
+                    startTransition(() => {
+                        model.setFilterText(value);
+                    });
                 }, fullWidth: true, slotProps: {
                     input: {
                         endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { onClick: () => {
+                                    setLocalFilterText('');
                                     model.clearFilterText();
                                 }, children: _jsx(ClearIcon, {}) }) })),
                     },