@jbrowse/plugin-data-management 2.6.2 → 2.6.3

package/dist/HierarchicalTrackSelectorWidget/model.js

@@ -1,100 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateHierarchy = exports.matches = void 0;
 const mobx_state_tree_1 = require("mobx-state-tree");
 const configuration_1 = require("@jbrowse/core/configuration");
 const util_1 = require("@jbrowse/core/util");
-const tracks_1 = require("@jbrowse/core/util/tracks");
 const mst_1 = require("@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));
-    }
-}
-function matches(query, conf, session) {
-    const categories = (0, configuration_1.readConfObject)(conf, 'category');
-    const queryLower = query.toLowerCase();
-    return ((0, tracks_1.getTrackName)(conf, session).toLowerCase().includes(queryLower) ||
-        !!(categories === null || categories === void 0 ? void 0 : categories.filter(c => c.toLowerCase().includes(queryLower)).length));
-}
-exports.matches = matches;
-function filterTracks(tracks, self) {
-    const { assemblyManager } = (0, util_1.getSession)(self);
-    const { pluginManager } = (0, util_1.getEnv)(self);
-    const { view } = self;
-    const { trackSelectorAnyOverlap } = view;
-    const trackListAssemblies = self.assemblyNames
-        .map(a => assemblyManager.get(a))
-        .filter(util_1.notEmpty);
-    return tracks
-        .filter(c => {
-        const trackAssemblyNames = (0, configuration_1.readConfObject)(c, 'assemblyNames');
-        const trackAssemblies = new Set((trackAssemblyNames === null || trackAssemblyNames === void 0 ? void 0 : trackAssemblyNames.map(name => assemblyManager.get(name)).filter(util_1.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);
-    });
-}
-function generateHierarchy(model, trackConfigurations, collapsed, extra) {
-    const hierarchy = { children: [] };
-    const { filterText, view } = model;
-    const session = (0, util_1.getSession)(model);
-    trackConfigurations
-        .filter(conf => matches(filterText, conf, session))
-        .forEach(conf => {
-        // copy the categories since this array can be mutated downstream
-        const categories = [...((0, configuration_1.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: (0, tracks_1.getTrackName)(conf, session),
-            conf,
-            checked: tracks.some(f => f.configuration === conf),
-            children: [],
-        });
-    });
-    return hierarchy.children;
-}
-exports.generateHierarchy = generateHierarchy;
+// locals
+const filterTracks_1 = require("./filterTracks");
+const generateHierarchy_1 = require("./generateHierarchy");
+const util_2 = require("./util");
 /**
  * #stateModel HierarchicalTrackSelectorWidget
  */
@@ -109,10 +22,22 @@ function stateTreeFactory(pluginManager) {
          * #property
          */
         type: mobx_state_tree_1.types.literal('HierarchicalTrackSelectorWidget'),
+        /**
+         * #property
+         */
+        initialized: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.boolean),
         /**
          * #property
          */
         collapsed: mobx_state_tree_1.types.map(mobx_state_tree_1.types.boolean),
+        /**
+         * #property
+         */
+        sortTrackNames: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.boolean),
+        /**
+         * #property
+         */
+        sortCategories: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.boolean),
         /**
          * #property
          */
@@ -123,6 +48,18 @@ function stateTreeFactory(pluginManager) {
         filterText: '',
     }))
         .actions(self => ({
+        /**
+         * #action
+         */
+        setSortTrackNames(val) {
+            self.sortTrackNames = val;
+        },
+        /**
+         * #action
+         */
+        setSortCategories(val) {
+            self.sortCategories = val;
+        },
         /**
          * #action
          */
@@ -159,6 +96,18 @@ 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
          */
@@ -202,24 +151,59 @@ function stateTreeFactory(pluginManager) {
         },
     }))
         .views(self => ({
+        /**
+         * #getter
+         */
+        get activeSortTrackNames() {
+            var _a;
+            return ((_a = self.sortTrackNames) !== null && _a !== void 0 ? _a : (0, configuration_1.getConf)((0, util_1.getSession)(self), ['hierarchical', 'sort', 'trackNames']));
+        },
+        /**
+         * #getter
+         */
+        get activeSortCategories() {
+            var _a;
+            return ((_a = self.sortCategories) !== null && _a !== void 0 ? _a : (0, configuration_1.getConf)((0, util_1.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 (0, filterTracks_1.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((0, util_1.getSession)(self).tracks, self),
-                ].filter(util_1.notEmpty);
+            return [
+                ...self.assemblyNames.map(a => self.getRefSeqTrackConf(a)),
+                ...(0, filterTracks_1.filterTracks)((0, util_1.getSession)(self).tracks, self),
+            ].filter(util_1.notEmpty);
+        },
+    }))
+        .views(self => ({
+        /**
+         * #method
+         */
+        connectionHierarchy(connection) {
+            return (0, generateHierarchy_1.generateHierarchy)(self, self.connectionTrackConfigurations(connection), self.collapsed, connection.name);
+        },
+    }))
+        .views(self => ({
+        get allTracks() {
+            const { connectionInstances = [] } = (0, util_1.getSession)(self);
+            return [
+                {
+                    group: 'Tracks',
+                    tracks: self.trackConfigurations,
+                },
+                ...connectionInstances.flatMap(c => ({
+                    group: (0, configuration_1.getConf)(c, 'name'),
+                    tracks: c.tracks,
+                })),
+            ];
         },
     }))
         .views(self => ({
@@ -227,32 +211,80 @@ function stateTreeFactory(pluginManager) {
          * #getter
          */
         get hierarchy() {
-            const hier = generateHierarchy(self, self.trackConfigurations, self.collapsed);
-            const session = (0, util_1.getSession)(self);
-            const { connectionInstances } = session;
-            const conns = (connectionInstances === null || connectionInstances === void 0 ? void 0 : connectionInstances.map(c => ({
-                // @ts-expect-error
-                id: (0, mobx_state_tree_1.getSnapshot)(c).configuration,
-                name: (0, configuration_1.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: (0, generateHierarchy_1.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 = [];
+            (0, util_2.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) {
+                    (0, util_2.findTopLevelCategories)(trackGroups.children, paths);
+                }
+            }
+            for (const path of paths) {
+                self.setCategoryCollapsed(path, true);
+            }
+        },
+    }))
+        .actions(self => ({
+        afterCreate() {
+            if (!self.initialized) {
+                const session = (0, util_1.getSession)(self);
+                if ((0, configuration_1.getConf)(session, [
+                    'hierarchical',
+                    'defaultCollapsed',
+                    'topLevelCategories',
+                ])) {
+                    self.collapseTopLevelCategories();
+                }
+                else if ((0, configuration_1.getConf)(session, [
+                    'hierarchical',
+                    'defaultCollapsed',
+                    'subCategories',
+                ])) {
+                    self.collapseSubCategories();
+                }
+                else {
+                    for (const entry of (0, configuration_1.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 = (0, configuration_1.readConfObject)(track, 'category')) === null || _a === void 0 ? void 0 : _a.length) > 1; }));
         },
     }));
 }

package/dist/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/dist/HierarchicalTrackSelectorWidget/util.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findTopLevelCategories = exports.findSubCategories = exports.matches = exports.hasAllOverlap = exports.hasAnyOverlap = void 0;
+const configuration_1 = require("@jbrowse/core/configuration");
+const tracks_1 = require("@jbrowse/core/util/tracks");
+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));
+    }
+}
+exports.hasAnyOverlap = hasAnyOverlap;
+function hasAllOverlap(a1 = [], a2 = []) {
+    const s1 = new Set(a1);
+    return a2.every(a => s1.has(a));
+}
+exports.hasAllOverlap = hasAllOverlap;
+function matches(query, conf, session) {
+    const categories = ((0, configuration_1.readConfObject)(conf, 'category') || []);
+    const queryLower = query.toLowerCase();
+    return ((0, tracks_1.getTrackName)(conf, session).toLowerCase().includes(queryLower) ||
+        !!categories.filter(c => c.toLowerCase().includes(queryLower)).length);
+}
+exports.matches = matches;
+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;
+}
+exports.findSubCategories = findSubCategories;
+function findTopLevelCategories(obj, paths) {
+    for (const elt of obj) {
+        if (elt.children.length) {
+            paths.push(elt.id);
+        }
+    }
+}
+exports.findTopLevelCategories = findTopLevelCategories;

package/dist/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/dist/PluginStoreWidget/components/{CustomPluginForm.js → AddCustomPluginDialog.js}

@@ -28,10 +28,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const mobx_react_1 = require("mobx-react");
-const mobx_state_tree_1 = require("mobx-state-tree");
 const ui_1 = require("@jbrowse/core/ui");
 const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
+const util_1 = require("@jbrowse/core/util");
 // icons
 const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
 const ExpandMore_1 = __importDefault(require("@mui/icons-material/ExpandMore"));
@@ -51,40 +51,32 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         transform: 'rotate(180deg)',
     },
 }));
-function CustomPluginForm({ open, onClose, model, }) {
+exports.default = (0, mobx_react_1.observer)(function ({ onClose, model, }) {
     const { classes, cx } = useStyles();
     const [umdPluginName, setUMDPluginName] = (0, react_1.useState)('');
     const [umdPluginUrl, setUMDPluginUrl] = (0, react_1.useState)('');
     const [esmPluginUrl, setESMPluginUrl] = (0, react_1.useState)('');
     const [cjsPluginUrl, setCJSPluginUrl] = (0, react_1.useState)('');
     const [advancedOptionsOpen, setAdvancedOptionsOpen] = (0, react_1.useState)(false);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const { jbrowse } = (0, mobx_state_tree_1.getRoot)(model);
+    const { jbrowse } = (0, util_1.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_1.default.createElement(ui_1.Dialog, { open: open, onClose: handleClose, title: "Add custom plugin" },
+    return (react_1.default.createElement(ui_1.Dialog, { open: true, onClose: onClose, title: "Add custom plugin" },
         react_1.default.createElement("form", { onSubmit: handleSubmit },
             react_1.default.createElement(material_1.DialogContent, { className: classes.dialogContent },
                 react_1.default.createElement(material_1.DialogContentText, null, "Enter the name of the plugin and its URL. The name should match what is defined in the plugin's build."),
-                react_1.default.createElement(material_1.TextField, { id: "umd-name-input", name: "umdName", label: "Plugin name", variant: "outlined", value: umdPluginName, onChange: event => setUMDPluginName(event.target.value) }),
-                react_1.default.createElement(material_1.TextField, { id: "umd-url-input", name: "umdUrl", label: "Plugin URL", variant: "outlined", value: umdPluginUrl, onChange: event => setUMDPluginUrl(event.target.value) }),
+                react_1.default.createElement(material_1.TextField, { label: "Plugin name", variant: "outlined", value: umdPluginName, onChange: event => setUMDPluginName(event.target.value) }),
+                react_1.default.createElement(material_1.TextField, { label: "Plugin URL", variant: "outlined", value: umdPluginUrl, onChange: event => setUMDPluginUrl(event.target.value) }),
                 react_1.default.createElement(material_1.DialogContentText, { onClick: () => setAdvancedOptionsOpen(!advancedOptionsOpen) },
                     react_1.default.createElement(IconButton_1.default, { className: cx(classes.expand, {
                             [classes.expandOpen]: advancedOptionsOpen,
@@ -94,10 +86,9 @@ function CustomPluginForm({ open, onClose, model, }) {
                 react_1.default.createElement(material_1.Collapse, { in: advancedOptionsOpen },
                     react_1.default.createElement("div", { className: classes.dialogContent },
                         react_1.default.createElement(material_1.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_1.default.createElement(material_1.TextField, { id: "esm-url-input", name: "esmUrl", label: "ESM build URL", variant: "outlined", value: esmPluginUrl, onChange: event => setESMPluginUrl(event.target.value) }),
-                        react_1.default.createElement(material_1.TextField, { id: "cjs-url-input", name: "cjsUrl", label: "CJS build URL", variant: "outlined", value: cjsPluginUrl, onChange: event => setCJSPluginUrl(event.target.value) })))),
+                        react_1.default.createElement(material_1.TextField, { label: "ESM build URL", variant: "outlined", value: esmPluginUrl, onChange: event => setESMPluginUrl(event.target.value) }),
+                        react_1.default.createElement(material_1.TextField, { label: "CJS build URL", variant: "outlined", value: cjsPluginUrl, onChange: event => setCJSPluginUrl(event.target.value) })))),
             react_1.default.createElement(material_1.DialogActions, null,
-                react_1.default.createElement(material_1.Button, { variant: "contained", onClick: handleClose }, "Cancel"),
+                react_1.default.createElement(material_1.Button, { variant: "contained", onClick: onClose }, "Cancel"),
                 react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", onClick: handleSubmit, disabled: !ready }, "Submit")))));
-}
-exports.default = (0, mobx_react_1.observer)(CustomPluginForm);
+});

package/dist/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/dist/PluginStoreWidget/components/DeletePluginDialog.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const material_1 = require("@mui/material");
+const ui_1 = require("@jbrowse/core/ui");
+function DeletePluginDialog({ onClose, plugin, }) {
+    return (react_1.default.createElement(ui_1.Dialog, { open: true, onClose: () => onClose(), title: `Remove ${plugin}` },
+        react_1.default.createElement(material_1.DialogContent, null,
+            react_1.default.createElement(material_1.Typography, null,
+                "Please confirm that you want to remove ",
+                plugin,
+                "."),
+            react_1.default.createElement(material_1.Typography, { color: "error" }, "Note: if any resources in this session still use this plugin, it may cause your session to crash")),
+        react_1.default.createElement(material_1.DialogActions, null,
+            react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", onClick: () => {
+                    // avoid showing runtime plugin warning
+                    window.setTimeout(() => {
+                        onClose(plugin);
+                    }, 500);
+                } }, "Confirm"),
+            react_1.default.createElement(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
+                    onClose();
+                } }, "Cancel"))));
+}
+exports.default = DeletePluginDialog;

package/dist/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/dist/PluginStoreWidget/components/InstalledPlugin.js

@@ -28,22 +28,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const mobx_react_1 = require("mobx-react");
-const mobx_state_tree_1 = require("mobx-state-tree");
 const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
 const Close_1 = __importDefault(require("@mui/icons-material/Close"));
 const Lock_1 = __importDefault(require("@mui/icons-material/Lock"));
 const util_1 = require("@jbrowse/core/util");
 const types_1 = require("@jbrowse/core/util/types");
+// lazies
+const DeletePluginDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./DeletePluginDialog'))));
 const useStyles = (0, mui_1.makeStyles)()(() => ({
-    closeDialog: {
-        position: 'absolute',
-        right: 0,
-        top: 0,
-    },
-    dialogContainer: {
-        margin: 15,
-    },
     lockedPluginTooltip: {
         marginRight: '0.5rem',
     },
@@ -53,52 +46,28 @@ function LockedPlugin() {
     return (react_1.default.createElement(material_1.Tooltip, { className: classes.lockedPluginTooltip, title: "This plugin was installed by an administrator, you cannot remove it." },
         react_1.default.createElement(Lock_1.default, null)));
 }
-function PluginDialog({ onClose, plugin, }) {
-    const { classes } = useStyles();
-    return (react_1.default.createElement(material_1.Dialog, { open: true, onClose: () => onClose() },
-        react_1.default.createElement(material_1.DialogTitle, null,
-            react_1.default.createElement(material_1.IconButton, { className: classes.closeDialog, "aria-label": "close-dialog", onClick: () => onClose() },
-                react_1.default.createElement(Close_1.default, null))),
-        react_1.default.createElement(material_1.DialogContent, null,
-            react_1.default.createElement(material_1.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_1.default.createElement(material_1.DialogActions, null,
-                react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", onClick: () => {
-                        // avoid showing runtime plugin warning
-                        window.setTimeout(() => {
-                            onClose(plugin);
-                        }, 500);
-                    } }, "Confirm"),
-                react_1.default.createElement(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
-                        onClose();
-                    } }, "Cancel")))));
-}
-function InstalledPlugin({ plugin, model, pluginManager, }) {
+exports.default = (0, mobx_react_1.observer)(function ({ plugin, model, }) {
     const [dialogPlugin, setDialogPlugin] = (0, react_1.useState)();
+    const { pluginManager } = (0, util_1.getEnv)(model);
     const session = (0, util_1.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 = (0, mobx_state_tree_1.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_1.default.createElement(react_1.default.Fragment, null,
-        dialogPlugin ? (react_1.default.createElement(PluginDialog, { plugin: dialogPlugin, onClose: name => {
-                if (name) {
-                    const pluginMetadata = pluginManager.pluginMetadata[plugin.name];
-                    if (adminMode) {
-                        jbrowse.removePlugin(pluginMetadata);
+        dialogPlugin ? (react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement(react_1.default.Fragment, null) },
+            react_1.default.createElement(DeletePluginDialog, { plugin: dialogPlugin, onClose: name => {
+                    if (name) {
+                        const pluginMetadata = pluginManager.pluginMetadata[plugin.name];
+                        if (adminMode) {
+                            jbrowse.removePlugin(pluginMetadata);
+                        }
+                        else if ((0, types_1.isSessionWithSessionPlugins)(session)) {
+                            session.removeSessionPlugin(pluginMetadata);
+                        }
                     }
-                    else if ((0, types_1.isSessionWithSessionPlugins)(session)) {
-                        session.removeSessionPlugin(pluginMetadata);
-                    }
-                }
-                setDialogPlugin(undefined);
-            } })) : null,
+                    setDialogPlugin(undefined);
+                } }))) : null,
         react_1.default.createElement(material_1.ListItem, { key: plugin.name },
             adminMode || isSessionPlugin ? (react_1.default.createElement(material_1.IconButton, { "aria-label": "removePlugin", "data-testid": `removePlugin-${plugin.name}`, onClick: () => setDialogPlugin(plugin.name) },
                 react_1.default.createElement(Close_1.default, null))) : (react_1.default.createElement(LockedPlugin, null)),
             react_1.default.createElement(material_1.Typography, null, plugin.name))));
-}
-exports.default = (0, mobx_react_1.observer)(InstalledPlugin);
+});

package/dist/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;