@jbrowse/plugin-data-management 2.6.2 → 2.6.3

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,52 +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);
+});

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,14 +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);
+        .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"))));
+});

package/esm/PluginStoreWidget/components/PluginCard.js

@@ -11,7 +11,7 @@ import AddIcon from '@mui/icons-material/Add';
 import CheckIcon from '@mui/icons-material/Check';
 const useStyles = makeStyles()({
     card: {
-        margin: '1em',
+        margin: '0.5em',
     },
     icon: {
         marginLeft: '0.5em',
@@ -23,7 +23,6 @@ const useStyles = makeStyles()({
     dataField: {
         display: 'flex',
         alignItems: 'center',
-        margin: '0.4em 0em',
     },
 });
 export default observer(function PluginCard({ plugin, model, adminMode, }) {
@@ -39,9 +38,8 @@ export default observer(function PluginCard({ plugin, model, adminMode, }) {
     const { jbrowse } = rootModel;
     return (React.createElement(Card, { variant: "outlined", key: plugin.name, className: classes.card },
         React.createElement(CardContent, null,
-            React.createElement("div", { className: classes.dataField },
-                React.createElement(Typography, { variant: "h5" },
-                    React.createElement(Link, { href: `${plugin.location}#readme`, target: "_blank", rel: "noopener" }, plugin.name))),
+            React.createElement(Typography, { variant: "h5" },
+                React.createElement(Link, { href: `${plugin.location}#readme`, target: "_blank", rel: "noopener" }, plugin.name)),
             React.createElement("div", { className: classes.dataField },
                 React.createElement(PersonIcon, { style: { marginRight: '0.5em' } }),
                 React.createElement(Typography, null, plugin.authors.join(', '))),

package/esm/PluginStoreWidget/components/PluginStoreWidget.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, lazy, Suspense } from 'react';
 import { Accordion, AccordionSummary, Button, IconButton, InputAdornment, TextField, Typography, } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
 import { observer } from 'mobx-react';
@@ -12,16 +12,14 @@ import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 // locals
 import InstalledPluginsList from './InstalledPluginsList';
 import PluginCard from './PluginCard';
-import CustomPluginForm from './CustomPluginForm';
+import { useFetchPlugins } from './util';
+// lazies
+const AddCustomPluginDialog = lazy(() => import('./AddCustomPluginDialog'));
 const useStyles = makeStyles()(theme => ({
-    root: {
-        margin: theme.spacing(1),
-    },
     expandIcon: {
         color: theme.palette.tertiary.contrastText,
     },
     adminBadge: {
-        margin: '0.5em',
         borderRadius: 3,
         backgroundColor: theme.palette.quaternary.main,
         padding: '1em',
@@ -29,43 +27,17 @@ const useStyles = makeStyles()(theme => ({
         alignContent: 'center',
     },
     customPluginButton: {
-        margin: '0.5em',
+        margin: '1em auto',
         display: 'flex',
-        justifyContent: 'center',
     },
 }));
 function PluginStoreWidget({ model }) {
     const { classes } = useStyles();
-    const [pluginArray, setPluginArray] = useState();
-    const [error, setError] = useState();
-    const [customPluginFormOpen, setCustomPluginFormOpen] = useState(false);
+    const { plugins, error } = useFetchPlugins();
+    const [open, setOpen] = useState(false);
     const { adminMode } = getSession(model);
     const { pluginManager } = getEnv(model);
-    useEffect(() => {
-        const controller = new AbortController();
-        const { signal } = controller;
-        (async () => {
-            try {
-                const response = await fetch('https://jbrowse.org/plugin-store/plugins.json', { signal });
-                if (!response.ok) {
-                    const err = await response.text();
-                    throw new Error(`Failed to fetch plugin data: ${response.status} ${response.statusText} ${err}`);
-                }
-                const array = await response.json();
-                if (!signal.aborted) {
-                    setPluginArray(array.plugins);
-                }
-            }
-            catch (e) {
-                console.error(e);
-                setError(e);
-            }
-        })();
-        return () => {
-            controller.abort();
-        };
-    }, []);
-    return (React.createElement("div", { className: classes.root },
+    return (React.createElement("div", null,
         adminMode && (React.createElement(React.Fragment, null,
             !isElectron && (React.createElement("div", { className: classes.adminBadge },
                 React.createElement(InfoOutlinedIcon, { style: { marginRight: '0.3em' } }),
@@ -73,9 +45,9 @@ function PluginStoreWidget({ model }) {
                     "You are using the ",
                     React.createElement("code", null, "admin-server"),
                     ". Any changes you make will be saved to your configuration file. You also have the ability to add custom plugins that are not in the store."))),
-            React.createElement("div", { className: classes.customPluginButton },
-                React.createElement(Button, { variant: "contained", onClick: () => setCustomPluginFormOpen(true) }, "Add custom plugin")),
-            React.createElement(CustomPluginForm, { open: customPluginFormOpen, onClose: () => setCustomPluginFormOpen(false), model: model }))),
+            React.createElement(Button, { className: classes.customPluginButton, variant: "contained", onClick: () => setOpen(true) }, "Add custom plugin"),
+            open ? (React.createElement(Suspense, { fallback: React.createElement(React.Fragment, null) },
+                React.createElement(AddCustomPluginDialog, { onClose: () => setOpen(false), model: model }))) : null)),
         React.createElement(TextField, { label: "Filter plugins", value: model.filterText, onChange: event => model.setFilterText(event.target.value), fullWidth: true, InputProps: {
                 endAdornment: (React.createElement(InputAdornment, { position: "end" },
                     React.createElement(IconButton, { onClick: () => model.clearFilterText() },
@@ -89,7 +61,7 @@ function PluginStoreWidget({ model }) {
         React.createElement(Accordion, { defaultExpanded: true },
             React.createElement(AccordionSummary, { expandIcon: React.createElement(ExpandMoreIcon, { className: classes.expandIcon }) },
                 React.createElement(Typography, { variant: "h5" }, "Available plugins")),
-            error ? (React.createElement(Typography, { color: "error" }, `${error}`)) : pluginArray ? (pluginArray
+            error ? (React.createElement(Typography, { color: "error" }, `${error}`)) : plugins ? (plugins
                 .filter(plugin => {
                 // If plugin only has cjsUrl, don't display outside desktop
                 return (!(isElectron && plugin.cjsUrl) &&

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

@@ -0,0 +1,5 @@
+import { JBrowsePlugin } from '@jbrowse/core/util/types';
+export declare function useFetchPlugins(): {
+    plugins: JBrowsePlugin[] | undefined;
+    error: unknown;
+};

package/esm/PluginStoreWidget/components/util.js

@@ -0,0 +1,25 @@
+import { useState, useEffect } from 'react';
+export function useFetchPlugins() {
+    const [plugins, setPlugins] = useState();
+    const [error, setError] = useState();
+    useEffect(() => {
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        ;
+        (async () => {
+            try {
+                const res = await fetch('https://jbrowse.org/plugin-store/plugins.json');
+                if (!res.ok) {
+                    const err = await res.text();
+                    throw new Error(`HTTP ${res.status} fetching plugins: ${err}`);
+                }
+                const array = await res.json();
+                setPlugins(array.plugins);
+            }
+            catch (e) {
+                console.error(e);
+                setError(e);
+            }
+        })();
+    }, []);
+    return { plugins, error };
+}

package/esm/PluginStoreWidget/model.d.ts

@@ -1,6 +1,6 @@
 import { Instance } from 'mobx-state-tree';
 import PluginManager from '@jbrowse/core/PluginManager';
-export default function f(pluginManager: PluginManager): import("mobx-state-tree").IModelType<{
+export default function stateModelFactory(pluginManager: PluginManager): import("mobx-state-tree").IModelType<{
     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
     type: import("mobx-state-tree").ISimpleType<"PluginStoreWidget">;
     filterText: import("mobx-state-tree").IType<string | undefined, string, string>;
@@ -9,5 +9,5 @@ export default function f(pluginManager: PluginManager): import("mobx-state-tree
     clearFilterText(): void;
     setFilterText(newText: string): void;
 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
-export type PluginStoreStateModel = ReturnType<typeof f>;
+export type PluginStoreStateModel = ReturnType<typeof stateModelFactory>;
 export type PluginStoreModel = Instance<PluginStoreStateModel>;

package/esm/PluginStoreWidget/model.js

@@ -1,6 +1,6 @@
 import { types } from 'mobx-state-tree';
 import { ElementId } from '@jbrowse/core/util/types/mst';
-export default function f(pluginManager) {
+export default function stateModelFactory(pluginManager) {
     return types
         .model('PluginStoreModel', {
         id: ElementId,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-data-management",
-  "version": "2.6.2",
+  "version": "2.6.3",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
     "jbrowse",
@@ -60,5 +60,5 @@
   "distModule": "esm/index.js",
   "srcModule": "src/index.ts",
   "module": "esm/index.js",
-  "gitHead": "bbea587a402d9974acdd804a33f4b77f31a2fd5f"
+  "gitHead": "ed402c87efb0904858d602c363bd1757d5742129"
 }

package/dist/PluginStoreWidget/components/CustomPluginForm.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { PluginStoreModel } from '../model';
-declare function CustomPluginForm({ open, onClose, model, }: {
-    open: boolean;
-    onClose(): void;
-    model: PluginStoreModel;
-}): React.JSX.Element;
-declare const _default: typeof CustomPluginForm;
-export default _default;

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

@@ -1,9 +0,0 @@
-import React from 'react';
-import { PluginStoreModel } from '../model';
-declare function CustomPluginForm({ open, onClose, model, }: {
-    open: boolean;
-    onClose(): void;
-    model: PluginStoreModel;
-}): React.JSX.Element;
-declare const _default: typeof CustomPluginForm;
-export default _default;