@jbrowse/plugin-data-management 2.6.1 → 2.6.3

package/esm/HierarchicalTrackSelectorWidget/model.js

@@ -1,95 +1,11 @@
-import { types, getSnapshot } from 'mobx-state-tree';
+import { types } from 'mobx-state-tree';
 import { getConf, readConfObject, } from '@jbrowse/core/configuration';
-import { dedupe, getSession, getEnv, notEmpty, } from '@jbrowse/core/util';
-import { getTrackName } from '@jbrowse/core/util/tracks';
+import { dedupe, getSession, notEmpty } from '@jbrowse/core/util';
 import { ElementId } from '@jbrowse/core/util/types/mst';
-function hasAnyOverlap(a1 = [], a2 = []) {
-    // shortcut case is that arrays are single entries, and are equal
-    // long case is that we use a set
-    if (a1[0] === a2[0]) {
-        return true;
-    }
-    else {
-        const s1 = new Set(a1);
-        return a2.some(a => s1.has(a));
-    }
-}
-export function matches(query, conf, session) {
-    const categories = readConfObject(conf, 'category');
-    const queryLower = query.toLowerCase();
-    return (getTrackName(conf, session).toLowerCase().includes(queryLower) ||
-        !!(categories === null || categories === void 0 ? void 0 : categories.filter(c => c.toLowerCase().includes(queryLower)).length));
-}
-function filterTracks(tracks, self) {
-    const { assemblyManager } = getSession(self);
-    const { pluginManager } = getEnv(self);
-    const { view } = self;
-    const { trackSelectorAnyOverlap } = view;
-    const trackListAssemblies = self.assemblyNames
-        .map(a => assemblyManager.get(a))
-        .filter(notEmpty);
-    return tracks
-        .filter(c => {
-        const trackAssemblyNames = readConfObject(c, 'assemblyNames');
-        const trackAssemblies = new Set((trackAssemblyNames === null || trackAssemblyNames === void 0 ? void 0 : trackAssemblyNames.map(name => assemblyManager.get(name)).filter(notEmpty)) || []);
-        return trackSelectorAnyOverlap
-            ? trackListAssemblies.some(a => trackAssemblies.has(a))
-            : trackListAssemblies.every(a => trackAssemblies.has(a));
-    })
-        .filter(c => {
-        const { displayTypes } = pluginManager.getViewType(view.type);
-        const compatDisplays = displayTypes.map(d => d.name);
-        const trackDisplays = c.displays.map((d) => d.type);
-        return hasAnyOverlap(compatDisplays, trackDisplays);
-    });
-}
-export function generateHierarchy(model, trackConfigurations, collapsed, extra) {
-    const hierarchy = { children: [] };
-    const { filterText, view } = model;
-    const session = getSession(model);
-    trackConfigurations
-        .filter(conf => matches(filterText, conf, session))
-        .forEach(conf => {
-        // copy the categories since this array can be mutated downstream
-        const categories = [...(readConfObject(conf, 'category') || [])];
-        // silly thing where if trackId ends with sessionTrack, then push it to
-        // a category that starts with a space to force sort to the top...
-        // double whammy hackyness
-        if (conf.trackId.endsWith('sessionTrack')) {
-            categories.unshift(' Session tracks');
-        }
-        let currLevel = hierarchy;
-        // find existing category to put track into or create it
-        for (let i = 0; i < categories.length; i++) {
-            const category = categories[i];
-            const ret = currLevel.children.find(c => c.name === category);
-            const id = extra + '-' + categories.slice(0, i + 1).join(',');
-            if (!ret) {
-                const n = {
-                    children: [],
-                    name: category,
-                    id,
-                    isOpenByDefault: !collapsed.get(id),
-                };
-                currLevel.children.push(n);
-                currLevel = n;
-            }
-            else {
-                currLevel = ret;
-            }
-        }
-        const tracks = view.tracks;
-        // using splice here tries to group leaf nodes above hierarchical nodes
-        currLevel.children.splice(currLevel.children.findIndex(elt => elt.children.length), 0, {
-            id: conf.trackId,
-            name: getTrackName(conf, session),
-            conf,
-            checked: tracks.some(f => f.configuration === conf),
-            children: [],
-        });
-    });
-    return hierarchy.children;
-}
+// locals
+import { filterTracks } from './filterTracks';
+import { generateHierarchy } from './generateHierarchy';
+import { findSubCategories, findTopLevelCategories } from './util';
 /**
  * #stateModel HierarchicalTrackSelectorWidget
  */
@@ -104,10 +20,22 @@ export default function stateTreeFactory(pluginManager) {
          * #property
          */
         type: types.literal('HierarchicalTrackSelectorWidget'),
+        /**
+         * #property
+         */
+        initialized: types.maybe(types.boolean),
         /**
          * #property
          */
         collapsed: types.map(types.boolean),
+        /**
+         * #property
+         */
+        sortTrackNames: types.maybe(types.boolean),
+        /**
+         * #property
+         */
+        sortCategories: types.maybe(types.boolean),
         /**
          * #property
          */
@@ -118,6 +46,18 @@ export default function stateTreeFactory(pluginManager) {
         filterText: '',
     }))
         .actions(self => ({
+        /**
+         * #action
+         */
+        setSortTrackNames(val) {
+            self.sortTrackNames = val;
+        },
+        /**
+         * #action
+         */
+        setSortCategories(val) {
+            self.sortCategories = val;
+        },
         /**
          * #action
          */
@@ -154,6 +94,18 @@ export default function stateTreeFactory(pluginManager) {
         toggleCategory(pathName) {
             self.collapsed.set(pathName, !self.collapsed.get(pathName));
         },
+        /**
+         * #action
+         */
+        setCategoryCollapsed(pathName, status) {
+            self.collapsed.set(pathName, status);
+        },
+        /**
+         * #action
+         */
+        expandAllCategories() {
+            self.collapsed.clear();
+        },
         /**
          * #action
          */
@@ -197,24 +149,59 @@ export default function stateTreeFactory(pluginManager) {
         },
     }))
         .views(self => ({
+        /**
+         * #getter
+         */
+        get activeSortTrackNames() {
+            var _a;
+            return ((_a = self.sortTrackNames) !== null && _a !== void 0 ? _a : getConf(getSession(self), ['hierarchical', 'sort', 'trackNames']));
+        },
+        /**
+         * #getter
+         */
+        get activeSortCategories() {
+            var _a;
+            return ((_a = self.sortCategories) !== null && _a !== void 0 ? _a : getConf(getSession(self), ['hierarchical', 'sort', 'categories']));
+        },
         /**
          * #method
          * filter out tracks that don't match the current display types
          */
         connectionTrackConfigurations(connection) {
-            return !self.view ? [] : filterTracks(connection.tracks, self);
+            return filterTracks(connection.tracks, self);
         },
         /**
          * #getter
          * filter out tracks that don't match the current assembly/display types
          */
         get trackConfigurations() {
-            return !self.view
-                ? []
-                : [
-                    ...self.assemblyNames.map(a => self.getRefSeqTrackConf(a)),
-                    ...filterTracks(getSession(self).tracks, self),
-                ].filter(notEmpty);
+            return [
+                ...self.assemblyNames.map(a => self.getRefSeqTrackConf(a)),
+                ...filterTracks(getSession(self).tracks, self),
+            ].filter(notEmpty);
+        },
+    }))
+        .views(self => ({
+        /**
+         * #method
+         */
+        connectionHierarchy(connection) {
+            return generateHierarchy(self, self.connectionTrackConfigurations(connection), self.collapsed, connection.name);
+        },
+    }))
+        .views(self => ({
+        get allTracks() {
+            const { connectionInstances = [] } = getSession(self);
+            return [
+                {
+                    group: 'Tracks',
+                    tracks: self.trackConfigurations,
+                },
+                ...connectionInstances.flatMap(c => ({
+                    group: getConf(c, 'name'),
+                    tracks: c.tracks,
+                })),
+            ];
         },
     }))
         .views(self => ({
@@ -222,33 +209,80 @@ export default function stateTreeFactory(pluginManager) {
          * #getter
          */
         get hierarchy() {
-            const hier = generateHierarchy(self, self.trackConfigurations, self.collapsed);
-            const session = getSession(self);
-            const { connectionInstances } = session;
-            const conns = (connectionInstances === null || connectionInstances === void 0 ? void 0 : connectionInstances.map(c => ({
-                // @ts-expect-error
-                id: getSnapshot(c).configuration,
-                name: getConf(c, 'name'),
-                children: this.connectionHierarchy(c),
-                state: {
-                    expanded: true,
-                },
-            })).filter(f => f.children.length)) || [];
             return {
                 name: 'Root',
                 id: 'Root',
-                children: [
-                    { name: 'Tracks', id: 'Tracks', children: hier },
-                    ...conns,
-                ],
+                children: self.allTracks
+                    .map(s => ({
+                    name: s.group,
+                    id: s.group,
+                    children: generateHierarchy(self, s.tracks, self.collapsed),
+                }))
+                    // always keep the Tracks entry at idx 0
+                    .filter((f, idx) => idx === 0 || !!f.children.length),
             };
         },
+    }))
+        .actions(self => ({
         /**
-         * #method
+         * #action
          */
-        connectionHierarchy(connection) {
-            return generateHierarchy(self, self.connectionTrackConfigurations(connection), self.collapsed, connection.name);
+        collapseSubCategories() {
+            const paths = [];
+            findSubCategories(self.hierarchy.children, paths);
+            for (const path of paths) {
+                self.setCategoryCollapsed(path, true);
+            }
+        },
+        /**
+         * #action
+         */
+        collapseTopLevelCategories() {
+            const paths = [];
+            for (const trackGroups of self.hierarchy.children) {
+                if (trackGroups.children.length) {
+                    findTopLevelCategories(trackGroups.children, paths);
+                }
+            }
+            for (const path of paths) {
+                self.setCategoryCollapsed(path, true);
+            }
+        },
+    }))
+        .actions(self => ({
+        afterCreate() {
+            if (!self.initialized) {
+                const session = getSession(self);
+                if (getConf(session, [
+                    'hierarchical',
+                    'defaultCollapsed',
+                    'topLevelCategories',
+                ])) {
+                    self.collapseTopLevelCategories();
+                }
+                else if (getConf(session, [
+                    'hierarchical',
+                    'defaultCollapsed',
+                    'subCategories',
+                ])) {
+                    self.collapseSubCategories();
+                }
+                else {
+                    for (const entry of getConf(session, [
+                        'hierarchical',
+                        'defaultCollapsed',
+                        'categoryNames',
+                    ])) {
+                        self.collapsed.set(entry, true);
+                    }
+                }
+                self.initialized = true;
+            }
+        },
+    }))
+        .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; }));
         },
     }));
 }
-//# sourceMappingURL=model.js.map

package/esm/HierarchicalTrackSelectorWidget/util.d.ts

@@ -0,0 +1,12 @@
+import { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import { AbstractSessionModel } from '@jbrowse/core/util';
+export declare function hasAnyOverlap<T>(a1?: T[], a2?: T[]): boolean;
+export declare function hasAllOverlap<T>(a1?: T[], a2?: T[]): boolean;
+export declare function matches(query: string, conf: AnyConfigurationModel, session: AbstractSessionModel): boolean;
+interface Node {
+    children: Node[];
+    id: string;
+}
+export declare function findSubCategories(obj: Node[], paths: string[]): boolean;
+export declare function findTopLevelCategories(obj: Node[], paths: string[]): void;
+export {};

package/esm/HierarchicalTrackSelectorWidget/util.js

@@ -0,0 +1,45 @@
+import { readConfObject, } from '@jbrowse/core/configuration';
+import { getTrackName } from '@jbrowse/core/util/tracks';
+export function hasAnyOverlap(a1 = [], a2 = []) {
+    // shortcut case is that arrays are single entries, and are equal
+    // long case is that we use a set
+    if (a1[0] === a2[0]) {
+        return true;
+    }
+    else {
+        const s1 = new Set(a1);
+        return a2.some(a => s1.has(a));
+    }
+}
+export function hasAllOverlap(a1 = [], a2 = []) {
+    const s1 = new Set(a1);
+    return a2.every(a => s1.has(a));
+}
+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);
+}
+export function findSubCategories(obj, paths) {
+    let hasSubs = false;
+    for (const elt of obj) {
+        if (elt.children.length) {
+            const hasSubCategories = findSubCategories(elt.children, paths);
+            if (hasSubCategories) {
+                paths.push(elt.id);
+            }
+        }
+        else {
+            hasSubs = true;
+        }
+    }
+    return hasSubs;
+}
+export function findTopLevelCategories(obj, paths) {
+    for (const elt of obj) {
+        if (elt.children.length) {
+            paths.push(elt.id);
+        }
+    }
+}

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

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

package/esm/PluginStoreWidget/components/{CustomPluginForm.js → AddCustomPluginDialog.js}

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import { observer } from 'mobx-react';
-import { getRoot } from 'mobx-state-tree';
 import { Dialog } from '@jbrowse/core/ui';
 import { Button, Collapse, DialogActions, DialogContent, DialogContentText, TextField, } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
+import { getSession } from '@jbrowse/core/util';
 // icons
 import IconButton from '@mui/material/IconButton';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
@@ -23,40 +23,32 @@ const useStyles = makeStyles()(theme => ({
         transform: 'rotate(180deg)',
     },
 }));
-function CustomPluginForm({ open, onClose, model, }) {
+export default observer(function ({ onClose, model, }) {
     const { classes, cx } = useStyles();
     const [umdPluginName, setUMDPluginName] = useState('');
     const [umdPluginUrl, setUMDPluginUrl] = useState('');
     const [esmPluginUrl, setESMPluginUrl] = useState('');
     const [cjsPluginUrl, setCJSPluginUrl] = useState('');
     const [advancedOptionsOpen, setAdvancedOptionsOpen] = useState(false);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const { jbrowse } = getRoot(model);
+    const { jbrowse } = getSession(model);
     const ready = Boolean((umdPluginName && umdPluginUrl) || esmPluginUrl || cjsPluginUrl);
     function handleSubmit() {
         if (umdPluginName && umdPluginUrl) {
             jbrowse.addPlugin({ name: umdPluginName, umdUrl: umdPluginUrl });
         }
-        if (esmPluginUrl) {
+        else if (esmPluginUrl) {
             jbrowse.addPlugin({ esmUrl: esmPluginUrl });
         }
-        if (cjsPluginUrl) {
+        else if (cjsPluginUrl) {
             jbrowse.addPlugin({ cjsUrl: cjsPluginUrl });
         }
     }
-    function handleClose() {
-        setUMDPluginName('');
-        setUMDPluginUrl('');
-        setESMPluginUrl('');
-        setCJSPluginUrl('');
-        onClose();
-    }
-    return (React.createElement(Dialog, { open: open, onClose: handleClose, title: "Add custom plugin" },
+    return (React.createElement(Dialog, { open: true, onClose: onClose, title: "Add custom plugin" },
         React.createElement("form", { onSubmit: handleSubmit },
             React.createElement(DialogContent, { className: classes.dialogContent },
                 React.createElement(DialogContentText, null, "Enter the name of the plugin and its URL. The name should match what is defined in the plugin's build."),
-                React.createElement(TextField, { id: "umd-name-input", name: "umdName", label: "Plugin name", variant: "outlined", value: umdPluginName, onChange: event => setUMDPluginName(event.target.value) }),
-                React.createElement(TextField, { id: "umd-url-input", name: "umdUrl", label: "Plugin URL", variant: "outlined", value: umdPluginUrl, onChange: event => setUMDPluginUrl(event.target.value) }),
+                React.createElement(TextField, { label: "Plugin name", variant: "outlined", value: umdPluginName, onChange: event => setUMDPluginName(event.target.value) }),
+                React.createElement(TextField, { label: "Plugin URL", variant: "outlined", value: umdPluginUrl, onChange: event => setUMDPluginUrl(event.target.value) }),
                 React.createElement(DialogContentText, { onClick: () => setAdvancedOptionsOpen(!advancedOptionsOpen) },
                     React.createElement(IconButton, { className: cx(classes.expand, {
                             [classes.expandOpen]: advancedOptionsOpen,
@@ -66,11 +58,9 @@ function CustomPluginForm({ open, onClose, model, }) {
                 React.createElement(Collapse, { in: advancedOptionsOpen },
                     React.createElement("div", { className: classes.dialogContent },
                         React.createElement(DialogContentText, null, "The above fields assume that the plugin is built in UMD format. If your plugin is in another format, or you have additional builds you want to add (such as a CJS build for using NodeJS APIs in desktop), you can enter the URLs for those builds below."),
-                        React.createElement(TextField, { id: "esm-url-input", name: "esmUrl", label: "ESM build URL", variant: "outlined", value: esmPluginUrl, onChange: event => setESMPluginUrl(event.target.value) }),
-                        React.createElement(TextField, { id: "cjs-url-input", name: "cjsUrl", label: "CJS build URL", variant: "outlined", value: cjsPluginUrl, onChange: event => setCJSPluginUrl(event.target.value) })))),
+                        React.createElement(TextField, { label: "ESM build URL", variant: "outlined", value: esmPluginUrl, onChange: event => setESMPluginUrl(event.target.value) }),
+                        React.createElement(TextField, { label: "CJS build URL", variant: "outlined", value: cjsPluginUrl, onChange: event => setCJSPluginUrl(event.target.value) })))),
             React.createElement(DialogActions, null,
-                React.createElement(Button, { variant: "contained", onClick: handleClose }, "Cancel"),
+                React.createElement(Button, { variant: "contained", onClick: onClose }, "Cancel"),
                 React.createElement(Button, { variant: "contained", color: "primary", onClick: handleSubmit, disabled: !ready }, "Submit")))));
-}
-export default observer(CustomPluginForm);
-//# sourceMappingURL=CustomPluginForm.js.map
+});

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export default function DeletePluginDialog({ onClose, plugin, }: {
+    plugin: string;
+    onClose: (s?: string) => void;
+}): React.JSX.Element;

package/esm/PluginStoreWidget/components/DeletePluginDialog.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Button, DialogActions, DialogContent, Typography } from '@mui/material';
+import { Dialog } from '@jbrowse/core/ui';
+export default function DeletePluginDialog({ onClose, plugin, }) {
+    return (React.createElement(Dialog, { open: true, onClose: () => onClose(), title: `Remove ${plugin}` },
+        React.createElement(DialogContent, null,
+            React.createElement(Typography, null,
+                "Please confirm that you want to remove ",
+                plugin,
+                "."),
+            React.createElement(Typography, { color: "error" }, "Note: if any resources in this session still use this plugin, it may cause your session to crash")),
+        React.createElement(DialogActions, null,
+            React.createElement(Button, { variant: "contained", color: "primary", onClick: () => {
+                    // avoid showing runtime plugin warning
+                    window.setTimeout(() => {
+                        onClose(plugin);
+                    }, 500);
+                } }, "Confirm"),
+            React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => {
+                    onClose();
+                } }, "Cancel"))));
+}

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

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

package/esm/PluginStoreWidget/components/InstalledPlugin.js

@@ -1,21 +1,14 @@
-import React, { useState } from 'react';
+import React, { Suspense, lazy, useState } from 'react';
 import { observer } from 'mobx-react';
-import { getParent } from 'mobx-state-tree';
-import { Button, Dialog, DialogTitle, DialogActions, DialogContent, IconButton, ListItem, Tooltip, Typography, } from '@mui/material';
+import { IconButton, ListItem, Tooltip, Typography } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
 import CloseIcon from '@mui/icons-material/Close';
 import LockIcon from '@mui/icons-material/Lock';
-import { getSession } from '@jbrowse/core/util';
+import { getEnv, getSession } from '@jbrowse/core/util';
 import { isSessionWithSessionPlugins, } from '@jbrowse/core/util/types';
+// lazies
+const DeletePluginDialog = lazy(() => import('./DeletePluginDialog'));
 const useStyles = makeStyles()(() => ({
-    closeDialog: {
-        position: 'absolute',
-        right: 0,
-        top: 0,
-    },
-    dialogContainer: {
-        margin: 15,
-    },
     lockedPluginTooltip: {
         marginRight: '0.5rem',
     },
@@ -25,53 +18,28 @@ 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)));
 }
-function PluginDialog({ onClose, plugin, }) {
-    const { classes } = useStyles();
-    return (React.createElement(Dialog, { open: true, onClose: () => onClose() },
-        React.createElement(DialogTitle, null,
-            React.createElement(IconButton, { className: classes.closeDialog, "aria-label": "close-dialog", onClick: () => onClose() },
-                React.createElement(CloseIcon, null))),
-        React.createElement(DialogContent, null,
-            React.createElement(Typography, null,
-                "Please confirm that you want to remove ",
-                plugin,
-                ". Note: if any resources in this session still use this plugin, it may cause your session to crash"),
-            React.createElement(DialogActions, null,
-                React.createElement(Button, { variant: "contained", color: "primary", onClick: () => {
-                        // avoid showing runtime plugin warning
-                        window.setTimeout(() => {
-                            onClose(plugin);
-                        }, 500);
-                    } }, "Confirm"),
-                React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => {
-                        onClose();
-                    } }, "Cancel")))));
-}
-function InstalledPlugin({ plugin, model, pluginManager, }) {
+export default observer(function ({ plugin, model, }) {
     const [dialogPlugin, setDialogPlugin] = useState();
+    const { pluginManager } = getEnv(model);
     const session = getSession(model);
-    const { sessionPlugins } = session;
-    const isSessionPlugin = sessionPlugins === null || sessionPlugins === void 0 ? void 0 : sessionPlugins.some(p => pluginManager.pluginMetadata[plugin.name].url === p.url);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const rootModel = getParent(model, 3);
-    const { jbrowse, adminMode } = rootModel;
+    const { jbrowse, adminMode, sessionPlugins } = session;
+    const isSessionPlugin = sessionPlugins === null || sessionPlugins === void 0 ? void 0 : sessionPlugins.some((p) => pluginManager.pluginMetadata[plugin.name].url === p.url);
     return (React.createElement(React.Fragment, null,
-        dialogPlugin ? (React.createElement(PluginDialog, { plugin: dialogPlugin, onClose: name => {
-                if (name) {
-                    const pluginMetadata = pluginManager.pluginMetadata[plugin.name];
-                    if (adminMode) {
-                        jbrowse.removePlugin(pluginMetadata);
-                    }
-                    else if (isSessionWithSessionPlugins(session)) {
-                        session.removeSessionPlugin(pluginMetadata);
+        dialogPlugin ? (React.createElement(Suspense, { fallback: React.createElement(React.Fragment, null) },
+            React.createElement(DeletePluginDialog, { plugin: dialogPlugin, onClose: name => {
+                    if (name) {
+                        const pluginMetadata = pluginManager.pluginMetadata[plugin.name];
+                        if (adminMode) {
+                            jbrowse.removePlugin(pluginMetadata);
+                        }
+                        else if (isSessionWithSessionPlugins(session)) {
+                            session.removeSessionPlugin(pluginMetadata);
+                        }
                     }
-                }
-                setDialogPlugin(undefined);
-            } })) : null,
+                    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) },
                 React.createElement(CloseIcon, null))) : (React.createElement(LockedPlugin, null)),
             React.createElement(Typography, null, plugin.name))));
-}
-export default observer(InstalledPlugin);
-//# sourceMappingURL=InstalledPlugin.js.map
+});

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

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

package/esm/PluginStoreWidget/components/InstalledPluginsList.js

@@ -2,15 +2,11 @@ import React from 'react';
 import { observer } from 'mobx-react';
 import { List, Typography } from '@mui/material';
 import InstalledPlugin from './InstalledPlugin';
-function InstalledPluginsList({ pluginManager, model, }) {
+export default observer(function InstalledPluginsList({ pluginManager, model, }) {
     const { plugins } = pluginManager;
-    const corePlugins = new Set(plugins
-        .filter(p => { var _a; return (_a = pluginManager.pluginMetadata[p.name]) === null || _a === void 0 ? void 0 : _a.isCore; })
-        .map(p => p.name));
-    const externalPlugins = plugins.filter(plugin => !corePlugins.has(plugin.name));
+    const { filterText } = model;
+    const externalPlugins = plugins.filter(p => { var _a; return !((_a = pluginManager.pluginMetadata[p.name]) === null || _a === void 0 ? void 0 : _a.isCore); });
     return (React.createElement(List, null, externalPlugins.length > 0 ? (externalPlugins
-        .filter(plugin => plugin.name.toLowerCase().includes(model.filterText.toLowerCase()))
-        .map(plugin => (React.createElement(InstalledPlugin, { key: plugin.name, plugin: plugin, model: model, pluginManager: pluginManager })))) : (React.createElement(Typography, null, "No plugins currently installed"))));
-}
-export default observer(InstalledPluginsList);
-//# sourceMappingURL=InstalledPluginsList.js.map
+        .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"))));
+});