@jbrowse/plugin-data-management 2.6.2 → 2.7.0

package/esm/HierarchicalTrackSelectorWidget/model.d.ts

@@ -1,19 +1,7 @@
 import { Instance } from 'mobx-state-tree';
 import { AnyConfigurationModel } from '@jbrowse/core/configuration';
-import { AbstractSessionModel } from '@jbrowse/core/util';
 import PluginManager from '@jbrowse/core/PluginManager';
-export declare function matches(query: string, conf: AnyConfigurationModel, session: AbstractSessionModel): boolean;
-export type TreeNode = {
-    name: string;
-    id: string;
-    conf?: AnyConfigurationModel;
-    checked?: boolean;
-    isOpenByDefault?: boolean;
-    children: TreeNode[];
-};
-export declare function generateHierarchy(model: HierarchicalTrackSelectorModel, trackConfigurations: AnyConfigurationModel[], collapsed: {
-    get: (arg: string) => boolean | undefined;
-}, extra?: string): TreeNode[];
+import { TreeNode } from './generateHierarchy';
 /**
  * #stateModel HierarchicalTrackSelectorWidget
  */
@@ -26,10 +14,22 @@ export default function stateTreeFactory(pluginManager: PluginManager): import("
      * #property
      */
     type: import("mobx-state-tree").ISimpleType<"HierarchicalTrackSelectorWidget">;
+    /**
+     * #property
+     */
+    initialized: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<boolean>>;
     /**
      * #property
      */
     collapsed: import("mobx-state-tree").IMapType<import("mobx-state-tree").ISimpleType<boolean>>;
+    /**
+     * #property
+     */
+    sortTrackNames: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<boolean>>;
+    /**
+     * #property
+     */
+    sortCategories: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<boolean>>;
     /**
      * #property
      */
@@ -42,6 +42,14 @@ export default function stateTreeFactory(pluginManager: PluginManager): import("
     } & import("mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>)[];
     filterText: string;
 } & {
+    /**
+     * #action
+     */
+    setSortTrackNames(val: boolean): void;
+    /**
+     * #action
+     */
+    setSortCategories(val: boolean): void;
     /**
      * #action
      */
@@ -66,6 +74,14 @@ export default function stateTreeFactory(pluginManager: PluginManager): import("
      * #action
      */
     toggleCategory(pathName: string): void;
+    /**
+     * #action
+     */
+    setCategoryCollapsed(pathName: string, status: boolean): void;
+    /**
+     * #action
+     */
+    expandAllCategories(): void;
     /**
      * #action
      */
@@ -85,6 +101,14 @@ export default function stateTreeFactory(pluginManager: PluginManager): import("
      */
     readonly assemblyNames: string[];
 } & {
+    /**
+     * #getter
+     */
+    readonly activeSortTrackNames: any;
+    /**
+     * #getter
+     */
+    readonly activeSortCategories: any;
     /**
      * #method
      * filter out tracks that don't match the current display types
@@ -105,6 +129,23 @@ export default function stateTreeFactory(pluginManager: PluginManager): import("
     } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
         setSubschema(slotName: string, data: unknown): any;
     } & import("mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>)[];
+} & {
+    /**
+     * #method
+     */
+    connectionHierarchy(connection: {
+        name: string;
+        tracks: AnyConfigurationModel[];
+    }): TreeNode[];
+} & {
+    readonly allTracks: {
+        group: any;
+        tracks: ({
+            [x: string]: any;
+        } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
+            setSubschema(slotName: string, data: unknown): any;
+        } & import("mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>)[];
+    }[];
 } & {
     /**
      * #getter
@@ -112,26 +153,25 @@ export default function stateTreeFactory(pluginManager: PluginManager): import("
     readonly hierarchy: {
         name: string;
         id: string;
-        children: ({
-            id: any;
+        children: {
             name: any;
+            id: any;
             children: TreeNode[];
-            state: {
-                expanded: boolean;
-            };
-        } | {
-            name: string;
-            id: string;
-            children: TreeNode[];
-        })[];
+        }[];
     };
+} & {
     /**
-     * #method
+     * #action
      */
-    connectionHierarchy(connection: {
-        name: string;
-        tracks: AnyConfigurationModel[];
-    }): TreeNode[];
+    collapseSubCategories(): void;
+    /**
+     * #action
+     */
+    collapseTopLevelCategories(): void;
+} & {
+    afterCreate(): void;
+} & {
+    readonly hasAnySubcategories: boolean;
 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
 export type HierarchicalTrackSelectorStateModel = ReturnType<typeof stateTreeFactory>;
 export type HierarchicalTrackSelectorModel = Instance<HierarchicalTrackSelectorStateModel>;

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,32 +209,78 @@ 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();
+                }
+                if (getConf(session, [
+                    'hierarchical',
+                    'defaultCollapsed',
+                    'subCategories',
+                ])) {
+                    self.collapseSubCategories();
+                }
+                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(t => { var _a; return ((_a = readConfObject(t, 'category')) === null || _a === void 0 ? void 0 : _a.length) > 1; }));
         },
     }));
 }

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 AddCustomPluginDialog: ({ onClose, model, }: {
+    onClose: () => void;
+    model: PluginStoreModel;
+}) => React.JSX.Element;
+export default AddCustomPluginDialog;

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, }) {
+const AddCustomPluginDialog = 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,10 +58,10 @@ 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);
+});
+export default AddCustomPluginDialog;

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 InstalledPlugin: ({ plugin, model, }: {
     plugin: BasePlugin;
     model: PluginStoreModel;
-    pluginManager: PluginManager;
-}): React.JSX.Element;
-declare const _default: typeof InstalledPlugin;
-export default _default;
+}) => React.JSX.Element;
+export default InstalledPlugin;