@jbrowse/plugin-data-management 2.17.0 → 3.0.0

package/esm/HierarchicalTrackSelectorWidget/model.js

@@ -1,14 +1,12 @@
-import { types, addDisposer } from 'mobx-state-tree';
-import { autorun, observable } from 'mobx';
-import { getConf, readConfObject, } from '@jbrowse/core/configuration';
+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';
-// locals
+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';
-// for settings that are config dependent
 function keyConfigPostFix() {
     return typeof window !== 'undefined'
         ? [
@@ -24,8 +22,6 @@ function recentlyUsedK(assemblyNames) {
         .filter(f => !!f)
         .join('-');
 }
-// this has a extra } at the end because that's how it was initially
-// released
 function favoritesK() {
     return `favoriteTracks-${keyConfigPostFix()}}`;
 }
@@ -55,185 +51,86 @@ function localStorageSetJSON(key, val) {
     }
 }
 const MAX_RECENTLY_USED = 10;
-/**
- * #stateModel HierarchicalTrackSelectorWidget
- */
 export default function stateTreeFactory(pluginManager) {
     return types
         .model('HierarchicalTrackSelectorWidget', {
-        /**
-         * #property
-         */
         id: ElementId,
-        /**
-         * #property
-         */
         type: types.literal('HierarchicalTrackSelectorWidget'),
-        /**
-         * #property
-         */
         view: types.safeReference(pluginManager.pluggableMstType('view', 'stateModel')),
-        /**
-         * #property
-         */
         faceted: types.optional(facetedStateTreeF(), {}),
     })
         .volatile(() => ({
-        /**
-         * #volatile
-         */
         favorites: localStorageGetJSON(favoritesK(), []),
-        /**
-         * #volatile
-         */
         recentlyUsed: [],
-        /**
-         * #volatile
-         */
         selection: [],
-        /**
-         * #volatile
-         */
         sortTrackNames: localStorageGetJSON(sortTrackNamesK(), undefined),
-        /**
-         * #volatile
-         */
         sortCategories: localStorageGetJSON(sortCategoriesK(), undefined),
-        /**
-         * #volatile
-         */
         collapsed: observable.map(),
-        /**
-         * #volatile
-         */
         filterText: '',
-        /**
-         * #volatile
-         */
         recentlyUsedCounter: 0,
-        /**
-         * #volatile
-         */
         favoritesCounter: 0,
     }))
         .views(self => ({
-        /**
-         * #getter
-         */
         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));
         },
-        /**
-         * #getter
-         */
         get selectionSet() {
             return new Set(self.selection);
         },
-        /**
-         * #getter
-         */
         get favoritesSet() {
             return new Set(self.favorites);
         },
-        /**
-         * #getter
-         */
         get recentlyUsedSet() {
             return new Set(self.recentlyUsed);
         },
-        /**
-         * #getter
-         */
         get assemblyNames() {
             var _a;
             return ((_a = self.view) === null || _a === void 0 ? void 0 : _a.assemblyNames) || [];
         },
     }))
         .actions(self => ({
-        /**
-         * #action
-         */
         setSortTrackNames(val) {
             self.sortTrackNames = val;
         },
-        /**
-         * #action
-         */
         setSortCategories(val) {
             self.sortCategories = val;
         },
-        /**
-         * #action
-         */
         setSelection(elt) {
             self.selection = elt;
         },
-        /**
-         * #action
-         */
         addToSelection(elt) {
             self.selection = dedupe([...self.selection, ...elt], e => e.trackId);
         },
-        /**
-         * #action
-         */
         removeFromSelection(elt) {
             const s = new Set(elt);
             self.selection = self.selection.filter(f => !s.has(f));
         },
-        /**
-         * #action
-         */
         clearSelection() {
             self.selection = [];
         },
-        /**
-         * #action
-         */
         addToFavorites(trackId) {
             self.favoritesCounter += 1;
             self.favorites = [...self.favorites, trackId];
         },
-        /**
-         * #action
-         */
         removeFromFavorites(trackId) {
             self.favorites = self.favorites.filter(f => f !== trackId);
         },
-        /**
-         * #action
-         */
         clearFavorites() {
             self.favorites = [];
         },
-        /**
-         * #action
-         */
         setRecentlyUsedCounter(val) {
             self.recentlyUsedCounter = val;
         },
-        /**
-         * #action
-         */
         setRecentlyUsed(str) {
             self.recentlyUsed = str;
         },
-        /**
-         * #action
-         */
         setFavorites(str) {
             self.favorites = str;
         },
-        /**
-         * #action
-         */
         setFavoritesCounter(val) {
             self.favoritesCounter = val;
         },
-        /**
-         * #action
-         */
         addToRecentlyUsed(id) {
             if (!self.recentlyUsed.includes(id)) {
                 self.recentlyUsedCounter = Math.min(self.recentlyUsedCounter + 1, MAX_RECENTLY_USED);
@@ -243,77 +140,41 @@ export default function stateTreeFactory(pluginManager) {
                         : [...self.recentlyUsed, id];
             }
         },
-        /**
-         * #action
-         */
         clearRecentlyUsed() {
             self.recentlyUsed = [];
         },
-        /**
-         * #action
-         */
         setView(view) {
             self.view = view;
         },
-        /**
-         * #action
-         */
         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
-         */
         setCollapsedCategories(str) {
             self.collapsed.replace(str);
         },
-        /**
-         * #action
-         */
         clearFilterText() {
             self.filterText = '';
         },
-        /**
-         * #action
-         */
         setFilterText(newText) {
             self.filterText = newText;
         },
     }))
         .views(self => ({
-        /**
-         * #method
-         */
         isSelected(track) {
             return self.selectionSet.has(track);
         },
-        /**
-         * #method
-         */
         isFavorite(trackId) {
             return self.favoritesSet.has(trackId);
         },
-        /**
-         * #method
-         */
         isRecentlyUsed(trackId) {
             return self.recentlyUsedSet.has(trackId);
         },
-        /**
-         * #method
-         */
         getRefSeqTrackConf(assemblyName) {
             const { assemblyManager } = getSession(self);
             const assembly = assemblyManager.get(assemblyName);
@@ -330,33 +191,20 @@ 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']));
         },
-        /**
-         * #getter
-         * filter out tracks that don't match the current assembly/display types
-         */
         get configAndSessionTrackConfigurations() {
             return [
                 ...self.assemblyNames.map(a => self.getRefSeqTrackConf(a)),
                 ...filterTracks(getSession(self).tracks, self),
             ].filter(notEmpty);
         },
-        /**
-         * #getter
-         */
         get allTrackConfigurations() {
             const { connectionInstances = [] } = getSession(self);
             return [
@@ -364,27 +212,16 @@ export default function stateTreeFactory(pluginManager) {
                 ...connectionInstances.flatMap(c => c.tracks),
             ];
         },
-        /**
-         * #getter
-         */
         get allTrackConfigurationTrackIdSet() {
             return new Map(this.allTrackConfigurations.map(t => [t.trackId, t]));
         },
     }))
         .views(self => ({
-        /**
-         * #getter
-         * filters out tracks that are not in the favorites group
-         */
         get favoriteTracks() {
             return self.favorites
                 .filter(t => self.allTrackConfigurationTrackIdSet.has(t))
                 .map(t => self.allTrackConfigurationTrackIdSet.get(t));
         },
-        /**
-         * #getter
-         * filters out tracks that are not in the recently used group
-         */
         get recentlyUsedTracks() {
             return self.recentlyUsed
                 .filter(t => self.allTrackConfigurationTrackIdSet.has(t))
@@ -392,9 +229,6 @@ export default function stateTreeFactory(pluginManager) {
         },
     }))
         .views(self => ({
-        /**
-         * #getter
-         */
         get allTracks() {
             const { connectionInstances = [] } = getSession(self);
             return [
@@ -414,9 +248,6 @@ export default function stateTreeFactory(pluginManager) {
         },
     }))
         .views(self => ({
-        /**
-         * #getter
-         */
         get hierarchy() {
             return {
                 name: 'Root',
@@ -440,9 +271,6 @@ export default function stateTreeFactory(pluginManager) {
         },
     }))
         .actions(self => ({
-        /**
-         * #action
-         */
         collapseSubCategories() {
             const paths = [];
             findSubCategories(self.hierarchy.children, paths);
@@ -450,9 +278,6 @@ export default function stateTreeFactory(pluginManager) {
                 self.setCategoryCollapsed(path, true);
             }
         },
-        /**
-         * #action
-         */
         collapseTopLevelCategories() {
             const paths = [];
             for (const trackGroups of self.hierarchy.children) {
@@ -466,16 +291,12 @@ export default function stateTreeFactory(pluginManager) {
         },
     }))
         .views(self => ({
-        /**
-         * #getter
-         */
         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; }));
         },
     }))
         .actions(self => ({
         afterAttach() {
-            // this should be the first autorun to properly initialize
             addDisposer(self, autorun(() => {
                 const { assemblyNames, view } = self;
                 self.setRecentlyUsed(localStorageGetJSON(recentlyUsedK(assemblyNames), []));
@@ -500,7 +321,6 @@ export default function stateTreeFactory(pluginManager) {
                     }
                 }
             }));
-            // this should be the second autorun
             addDisposer(self, autorun(() => {
                 const { sortTrackNames, sortCategories, favorites, recentlyUsed, assemblyNames, collapsed, view, } = self;
                 localStorageSetJSON(recentlyUsedK(assemblyNames), recentlyUsed);

package/esm/HierarchicalTrackSelectorWidget/util.d.ts

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

package/esm/HierarchicalTrackSelectorWidget/util.js

@@ -1,8 +1,6 @@
-import { readConfObject, } from '@jbrowse/core/configuration';
+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;
     }
@@ -26,7 +24,6 @@ export function findSubCategories(obj, paths, depth = 0) {
     for (const elt of obj) {
         if (elt.children.length) {
             const hasSubCategories = findSubCategories(elt.children, paths, depth + 1);
-            // avoid pushing the root "Tracks" node by checking depth>0
             if (hasSubCategories && depth > 0) {
                 paths.push(elt.id);
             }

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

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

package/esm/PluginStoreWidget/components/AddCustomPluginDialog.js

@@ -1,12 +1,12 @@
-import React, { useState } from 'react';
-import { observer } from 'mobx-react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 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';
+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',
@@ -43,35 +43,18 @@ const AddCustomPluginDialog = observer(function ({ onClose, model, }) {
             jbrowse.addPlugin({ cjsUrl: cjsPluginUrl });
         }
     }
-    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, { 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,
-                        }), "aria-expanded": advancedOptionsOpen, "aria-label": "show more" },
-                        React.createElement(ExpandMoreIcon, null)),
-                    "Advanced options"),
-                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, { 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: onClose }, "Cancel"),
-                React.createElement(Button, { variant: "contained", color: "primary", onClick: handleSubmit, disabled: !ready }, "Submit")))));
+    return (_jsx(Dialog, { open: true, onClose: onClose, title: "Add custom plugin", children: _jsxs("form", { onSubmit: handleSubmit, children: [_jsxs(DialogContent, { className: classes.dialogContent, children: [_jsx(DialogContentText, { children: "Enter the name of the plugin and its URL. The name should match what is defined in the plugin's build." }), _jsx(TextField, { label: "Plugin name", variant: "outlined", value: umdPluginName, onChange: event => {
+                                setUMDPluginName(event.target.value);
+                            } }), _jsx(TextField, { label: "Plugin URL", variant: "outlined", value: umdPluginUrl, onChange: event => {
+                                setUMDPluginUrl(event.target.value);
+                            } }), _jsxs(DialogContentText, { onClick: () => {
+                                setAdvancedOptionsOpen(!advancedOptionsOpen);
+                            }, children: [_jsx(IconButton, { className: cx(classes.expand, {
+                                        [classes.expandOpen]: advancedOptionsOpen,
+                                    }), "aria-expanded": advancedOptionsOpen, "aria-label": "show more", children: _jsx(ExpandMoreIcon, {}) }), "Advanced options"] }), _jsx(Collapse, { in: advancedOptionsOpen, children: _jsxs("div", { className: classes.dialogContent, children: [_jsx(DialogContentText, { children: "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." }), _jsx(TextField, { label: "ESM build URL", variant: "outlined", value: esmPluginUrl, onChange: event => {
+                                            setESMPluginUrl(event.target.value);
+                                        } }), _jsx(TextField, { label: "CJS build URL", variant: "outlined", value: cjsPluginUrl, onChange: event => {
+                                            setCJSPluginUrl(event.target.value);
+                                        } })] }) })] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", onClick: onClose, children: "Cancel" }), _jsx(Button, { variant: "contained", color: "primary", onClick: handleSubmit, disabled: !ready, children: "Submit" })] })] }) }));
 });
 export default AddCustomPluginDialog;

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

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

package/esm/PluginStoreWidget/components/DeletePluginDialog.js

@@ -1,24 +1,14 @@
-import React from 'react';
-import { Button, DialogActions, DialogContent, Typography } from '@mui/material';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Dialog } from '@jbrowse/core/ui';
+import { Button, DialogActions, DialogContent, Typography } from '@mui/material';
 export default function DeletePluginDialog({ onClose, plugin, }) {
-    return (React.createElement(Dialog, { open: true, onClose: () => {
+    return (_jsxs(Dialog, { open: true, title: `Remove ${plugin}`, 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"))));
+        }, children: [_jsxs(DialogContent, { children: [_jsxs(Typography, { children: ["Please confirm that you want to remove ", plugin, "."] }), _jsx(Typography, { color: "error", children: "Note: if any resources in this session still use this plugin, it may cause your session to crash" })] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "primary", onClick: () => {
+                            window.setTimeout(() => {
+                                onClose(plugin);
+                            }, 500);
+                        }, children: "Confirm" }), _jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
+                            onClose();
+                        }, children: "Cancel" })] })] }));
 }

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

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

package/esm/PluginStoreWidget/components/InstalledPlugin.js

@@ -1,12 +1,12 @@
-import React, { Suspense, lazy, useState } from 'react';
-import { observer } from 'mobx-react';
-import { IconButton, ListItem, Tooltip, Typography } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { lazy } from 'react';
+import { getEnv, getSession } from '@jbrowse/core/util';
+import { isSessionWithSessionPlugins } from '@jbrowse/core/util/types';
 import CloseIcon from '@mui/icons-material/Close';
 import LockIcon from '@mui/icons-material/Lock';
-import { getEnv, getSession } from '@jbrowse/core/util';
-import { isSessionWithSessionPlugins, } from '@jbrowse/core/util/types';
-// lazies
+import { IconButton, ListItem, Tooltip, Typography } from '@mui/material';
+import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
 const DeletePluginDialog = lazy(() => import('./DeletePluginDialog'));
 const useStyles = makeStyles()(() => ({
     lockedPluginTooltip: {
@@ -15,36 +15,34 @@ const useStyles = makeStyles()(() => ({
 }));
 function LockedPlugin() {
     const { classes } = useStyles();
-    return (React.createElement(Tooltip, { className: classes.lockedPluginTooltip, title: "This plugin was installed by an administrator, you cannot remove it." },
-        React.createElement(LockIcon, null)));
+    return (_jsx(Tooltip, { className: classes.lockedPluginTooltip, title: "This plugin was installed by an administrator, you cannot remove it.", children: _jsx(LockIcon, {}) }));
 }
 const InstalledPlugin = observer(function ({ plugin, model, }) {
-    const [dialogPlugin, setDialogPlugin] = useState();
     const { pluginManager } = getEnv(model);
     const session = getSession(model);
     const { jbrowse, adminMode } = session;
     const isSessionPlugin = isSessionWithSessionPlugins(session)
         ? session.sessionPlugins.some(p => { var _a; return ((_a = pluginManager.pluginMetadata[plugin.name]) === null || _a === void 0 ? void 0 : _a.url) === p.url; })
         : false;
-    return (React.createElement(React.Fragment, null,
-        dialogPlugin ? (React.createElement(Suspense, { fallback: 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,
-        React.createElement(ListItem, { key: plugin.name },
-            adminMode || isSessionPlugin ? (React.createElement(IconButton, { "data-testid": `removePlugin-${plugin.name}`, onClick: () => {
-                    setDialogPlugin(plugin.name);
-                } },
-                React.createElement(CloseIcon, null))) : (React.createElement(LockedPlugin, null)),
-            React.createElement(Typography, null, plugin.name))));
+    return (_jsxs(ListItem, { children: [adminMode || isSessionPlugin ? (_jsx(IconButton, { "data-testid": `removePlugin-${plugin.name}`, onClick: () => {
+                    session.queueDialog(onClose => [
+                        DeletePluginDialog,
+                        {
+                            plugin: plugin.name,
+                            onClose: (name) => {
+                                if (name) {
+                                    const pluginMetadata = pluginManager.pluginMetadata[plugin.name];
+                                    if (adminMode) {
+                                        jbrowse.removePlugin(pluginMetadata);
+                                    }
+                                    else if (isSessionWithSessionPlugins(session)) {
+                                        session.removeSessionPlugin(pluginMetadata);
+                                    }
+                                }
+                                onClose();
+                            },
+                        },
+                    ]);
+                }, children: _jsx(CloseIcon, {}) })) : (_jsx(LockedPlugin, {})), _jsx(Typography, { children: plugin.name })] }, plugin.name));
 });
 export default InstalledPlugin;