@jbrowse/plugin-data-management 2.6.2 → 2.7.0

package/dist/PluginStoreWidget/components/InstalledPluginsList.js

@@ -7,14 +7,12 @@ const react_1 = __importDefault(require("react"));
 const mobx_react_1 = require("mobx-react");
 const material_1 = require("@mui/material");
 const InstalledPlugin_1 = __importDefault(require("./InstalledPlugin"));
-function InstalledPluginsList({ pluginManager, model, }) {
+const InstalledPluginsList = (0, mobx_react_1.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_1.default.createElement(material_1.List, null, externalPlugins.length > 0 ? (externalPlugins
-        .filter(plugin => plugin.name.toLowerCase().includes(model.filterText.toLowerCase()))
-        .map(plugin => (react_1.default.createElement(InstalledPlugin_1.default, { key: plugin.name, plugin: plugin, model: model, pluginManager: pluginManager })))) : (react_1.default.createElement(material_1.Typography, null, "No plugins currently installed"))));
-}
-exports.default = (0, mobx_react_1.observer)(InstalledPluginsList);
+        .filter(p => p.name.toLowerCase().includes(filterText.toLowerCase()))
+        .map(p => react_1.default.createElement(InstalledPlugin_1.default, { key: p.name, plugin: p, model: model }))) : (react_1.default.createElement(material_1.Typography, null, "No plugins currently installed"))));
+});
+exports.default = InstalledPluginsList;

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import { JBrowsePlugin } from '@jbrowse/core/util/types';
 import { PluginStoreModel } from '../model';
-declare const _default: ({ plugin, model, adminMode, }: {
+declare const PluginCard: ({ plugin, model, adminMode, }: {
     plugin: JBrowsePlugin;
     model: PluginStoreModel;
     adminMode: boolean;
 }) => React.JSX.Element;
-export default _default;
+export default PluginCard;

package/dist/PluginStoreWidget/components/PluginCard.js

@@ -39,7 +39,7 @@ const Add_1 = __importDefault(require("@mui/icons-material/Add"));
 const Check_1 = __importDefault(require("@mui/icons-material/Check"));
 const useStyles = (0, mui_1.makeStyles)()({
     card: {
-        margin: '1em',
+        margin: '0.5em',
     },
     icon: {
         marginLeft: '0.5em',
@@ -51,10 +51,9 @@ const useStyles = (0, mui_1.makeStyles)()({
     dataField: {
         display: 'flex',
         alignItems: 'center',
-        margin: '0.4em 0em',
     },
 });
-exports.default = (0, mobx_react_1.observer)(function PluginCard({ plugin, model, adminMode, }) {
+const PluginCard = (0, mobx_react_1.observer)(function PluginCard({ plugin, model, adminMode, }) {
     const { classes } = useStyles();
     const session = (0, util_1.getSession)(model);
     const { pluginManager } = (0, util_1.getEnv)(model);
@@ -67,9 +66,8 @@ exports.default = (0, mobx_react_1.observer)(function PluginCard({ plugin, model
     const { jbrowse } = rootModel;
     return (react_1.default.createElement(material_1.Card, { variant: "outlined", key: plugin.name, className: classes.card },
         react_1.default.createElement(material_1.CardContent, null,
-            react_1.default.createElement("div", { className: classes.dataField },
-                react_1.default.createElement(material_1.Typography, { variant: "h5" },
-                    react_1.default.createElement(material_1.Link, { href: `${plugin.location}#readme`, target: "_blank", rel: "noopener" }, plugin.name))),
+            react_1.default.createElement(material_1.Typography, { variant: "h5" },
+                react_1.default.createElement(material_1.Link, { href: `${plugin.location}#readme`, target: "_blank", rel: "noopener" }, plugin.name)),
             react_1.default.createElement("div", { className: classes.dataField },
                 react_1.default.createElement(Person_1.default, { style: { marginRight: '0.5em' } }),
                 react_1.default.createElement(material_1.Typography, null, plugin.authors.join(', '))),
@@ -86,3 +84,4 @@ exports.default = (0, mobx_react_1.observer)(function PluginCard({ plugin, model
                     setTempDisabled(true);
                 } }, isInstalled ? 'Installed' : 'Install'))));
 });
+exports.default = PluginCard;

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

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

package/dist/PluginStoreWidget/components/PluginStoreWidget.js

@@ -40,16 +40,14 @@ const InfoOutlined_1 = __importDefault(require("@mui/icons-material/InfoOutlined
 // locals
 const InstalledPluginsList_1 = __importDefault(require("./InstalledPluginsList"));
 const PluginCard_1 = __importDefault(require("./PluginCard"));
-const CustomPluginForm_1 = __importDefault(require("./CustomPluginForm"));
+const util_2 = require("./util");
+// lazies
+const AddCustomPluginDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./AddCustomPluginDialog'))));
 const useStyles = (0, mui_1.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',
@@ -57,43 +55,17 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         alignContent: 'center',
     },
     customPluginButton: {
-        margin: '0.5em',
+        margin: '1em auto',
         display: 'flex',
-        justifyContent: 'center',
     },
 }));
-function PluginStoreWidget({ model }) {
+const PluginStoreWidget = (0, mobx_react_1.observer)(function ({ model, }) {
     const { classes } = useStyles();
-    const [pluginArray, setPluginArray] = (0, react_1.useState)();
-    const [error, setError] = (0, react_1.useState)();
-    const [customPluginFormOpen, setCustomPluginFormOpen] = (0, react_1.useState)(false);
+    const { plugins, error } = (0, util_2.useFetchPlugins)();
+    const [open, setOpen] = (0, react_1.useState)(false);
     const { adminMode } = (0, util_1.getSession)(model);
     const { pluginManager } = (0, mobx_state_tree_1.getEnv)(model);
-    (0, react_1.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_1.default.createElement("div", { className: classes.root },
+    return (react_1.default.createElement("div", null,
         adminMode && (react_1.default.createElement(react_1.default.Fragment, null,
             !util_1.isElectron && (react_1.default.createElement("div", { className: classes.adminBadge },
                 react_1.default.createElement(InfoOutlined_1.default, { style: { marginRight: '0.3em' } }),
@@ -101,9 +73,9 @@ function PluginStoreWidget({ model }) {
                     "You are using the ",
                     react_1.default.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_1.default.createElement("div", { className: classes.customPluginButton },
-                react_1.default.createElement(material_1.Button, { variant: "contained", onClick: () => setCustomPluginFormOpen(true) }, "Add custom plugin")),
-            react_1.default.createElement(CustomPluginForm_1.default, { open: customPluginFormOpen, onClose: () => setCustomPluginFormOpen(false), model: model }))),
+            react_1.default.createElement(material_1.Button, { className: classes.customPluginButton, variant: "contained", onClick: () => setOpen(true) }, "Add custom plugin"),
+            open ? (react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement(react_1.default.Fragment, null) },
+                react_1.default.createElement(AddCustomPluginDialog, { onClose: () => setOpen(false), model: model }))) : null)),
         react_1.default.createElement(material_1.TextField, { label: "Filter plugins", value: model.filterText, onChange: event => model.setFilterText(event.target.value), fullWidth: true, InputProps: {
                 endAdornment: (react_1.default.createElement(material_1.InputAdornment, { position: "end" },
                     react_1.default.createElement(material_1.IconButton, { onClick: () => model.clearFilterText() },
@@ -117,7 +89,7 @@ function PluginStoreWidget({ model }) {
         react_1.default.createElement(material_1.Accordion, { defaultExpanded: true },
             react_1.default.createElement(material_1.AccordionSummary, { expandIcon: react_1.default.createElement(ExpandMore_1.default, { className: classes.expandIcon }) },
                 react_1.default.createElement(material_1.Typography, { variant: "h5" }, "Available plugins")),
-            error ? (react_1.default.createElement(material_1.Typography, { color: "error" }, `${error}`)) : pluginArray ? (pluginArray
+            error ? (react_1.default.createElement(material_1.Typography, { color: "error" }, `${error}`)) : plugins ? (plugins
                 .filter(plugin => {
                 // If plugin only has cjsUrl, don't display outside desktop
                 return (!(util_1.isElectron && plugin.cjsUrl) &&
@@ -126,5 +98,5 @@ function PluginStoreWidget({ model }) {
                         .includes(model.filterText.toLowerCase()));
             })
                 .map(plugin => (react_1.default.createElement(PluginCard_1.default, { key: plugin.name, plugin: plugin, model: model, adminMode: !!adminMode })))) : (react_1.default.createElement(ui_1.LoadingEllipses, null)))));
-}
-exports.default = (0, mobx_react_1.observer)(PluginStoreWidget);
+});
+exports.default = PluginStoreWidget;

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFetchPlugins = void 0;
+const react_1 = require("react");
+function useFetchPlugins() {
+    const [plugins, setPlugins] = (0, react_1.useState)();
+    const [error, setError] = (0, react_1.useState)();
+    (0, react_1.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 };
+}
+exports.useFetchPlugins = useFetchPlugins;

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const mobx_state_tree_1 = require("mobx-state-tree");
 const mst_1 = require("@jbrowse/core/util/types/mst");
-function f(pluginManager) {
+function stateModelFactory(pluginManager) {
     return mobx_state_tree_1.types
         .model('PluginStoreModel', {
         id: mst_1.ElementId,
@@ -19,4 +19,4 @@ function f(pluginManager) {
         },
     }));
 }
-exports.default = f;
+exports.default = stateModelFactory;

package/dist/index.d.ts

@@ -1,10 +1,6 @@
 /// <reference types="react" />
 import Plugin from '@jbrowse/core/Plugin';
 import PluginManager from '@jbrowse/core/PluginManager';
-declare const SetDefaultSession: import("react").LazyExoticComponent<({ rootModel, onClose }: {
-    rootModel?: unknown;
-    onClose: () => void;
-}) => import("react").JSX.Element | null>;
 declare const AssemblyManager: import("react").LazyExoticComponent<({ rootModel, onClose, }: {
     rootModel: any;
     onClose: (arg: boolean) => void;
@@ -16,14 +12,10 @@ export default class extends Plugin {
             rootModel: any;
             onClose: (arg: boolean) => void;
         }) => import("react").JSX.Element>;
-        SetDefaultSession: import("react").LazyExoticComponent<({ rootModel, onClose }: {
-            rootModel?: unknown;
-            onClose: () => void;
-        }) => import("react").JSX.Element | null>;
     };
     install(pluginManager: PluginManager): void;
     configure(_pluginManager: PluginManager): void;
 }
-export { AssemblyManager, SetDefaultSession };
+export { AssemblyManager };
 export { type AddTrackModel } from './AddTrackWidget/model';
 export { type HierarchicalTrackSelectorModel } from './HierarchicalTrackSelectorWidget';

package/dist/index.js

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SetDefaultSession = exports.AssemblyManager = void 0;
+exports.AssemblyManager = void 0;
 const react_1 = require("react");
 const Plugin_1 = __importDefault(require("@jbrowse/core/Plugin"));
 const ucsc_trackhub_1 = __importDefault(require("./ucsc-trackhub"));
@@ -34,8 +34,6 @@ const AddTrackWidget_1 = __importDefault(require("./AddTrackWidget"));
 const AddConnectionWidget_1 = __importDefault(require("./AddConnectionWidget"));
 const PluginStoreWidget_1 = __importDefault(require("./PluginStoreWidget"));
 const HierarchicalTrackSelectorWidget_1 = __importDefault(require("./HierarchicalTrackSelectorWidget"));
-const SetDefaultSession = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./SetDefaultSession'))));
-exports.SetDefaultSession = SetDefaultSession;
 const AssemblyManager = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./AssemblyManager'))));
 exports.AssemblyManager = AssemblyManager;
 class default_1 extends Plugin_1.default {
@@ -44,7 +42,6 @@ class default_1 extends Plugin_1.default {
         this.name = 'DataManagementPlugin';
         this.exports = {
             AssemblyManager,
-            SetDefaultSession,
         };
     }
     install(pluginManager) {

package/dist/ucsc-trackhub/model.js

@@ -40,7 +40,7 @@ function UCSCTrackHubConnection(pluginManager) {
     }))
         .actions(self => ({
         async connect() {
-            var _a;
+            var _a, _b;
             const session = (0, util_1.getSession)(self);
             const notLoadedAssemblies = [];
             try {
@@ -108,7 +108,7 @@ function UCSCTrackHubConnection(pluginManager) {
             catch (e) {
                 console.error(e);
                 session.notify(`There was a problem connecting to the UCSC Track Hub "${self.configuration.name}". Please make sure you have entered a valid hub.txt file. The error that was thrown is: "${e}"`, 'error');
-                session.breakConnection(self.configuration);
+                (_b = session.breakConnection) === null || _b === void 0 ? void 0 : _b.call(session, self.configuration);
             }
         },
     }));

package/esm/AddConnectionWidget/components/AddConnectionWidget.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-declare const _default: ({ model, }: {
+declare const AddConnectionWidget: ({ model }: {
     model: unknown;
 }) => React.JSX.Element;
-export default _default;
+export default AddConnectionWidget;

package/esm/AddConnectionWidget/components/AddConnectionWidget.js

@@ -1,11 +1,12 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Button, Step, StepContent, StepLabel, Stepper } from '@mui/material';
-import { getSession, getEnv } from '@jbrowse/core/util';
+import { getSession, getEnv, isSessionModelWithWidgets, } from '@jbrowse/core/util';
 import { makeStyles } from 'tss-react/mui';
 import { observer } from 'mobx-react';
 // locals
 import ConfigureConnection from './ConfigureConnection';
 import ConnectionTypeSelect from './ConnectionTypeSelect';
+import { isSessionWithConnections } from '@jbrowse/product-core';
 const useStyles = makeStyles()(theme => ({
     root: {
         marginTop: theme.spacing(1),
@@ -22,13 +23,15 @@ const useStyles = makeStyles()(theme => ({
     },
 }));
 const steps = ['Select a Connection Type', 'Configure Connection'];
-export default observer(function AddConnectionWidget({ model, }) {
+const AddConnectionWidget = observer(function ({ model }) {
     const [connectionType, setConnectionType] = useState();
-    const [configModel, setConfigModel] = useState();
+    const [connectionId, setConnectionId] = useState();
     const [activeStep, setActiveStep] = useState(0);
     const { classes } = useStyles();
     const session = getSession(model);
     const { pluginManager } = getEnv(session);
+    // useMemo is needed for react@18+mobx-react@9, previous code called configScema.create directly in a setConfigModel useState hook setter but this caused infinite loop
+    const configModel = useMemo(() => connectionType === null || connectionType === void 0 ? void 0 : connectionType.configSchema.create({ connectionId }, getEnv(model)), [connectionId, connectionType, model]);
     return (React.createElement("div", { className: classes.root },
         React.createElement(Stepper, { className: classes.stepper, activeStep: activeStep, orientation: "vertical" }, steps.map(label => (React.createElement(Step, { key: label },
             React.createElement(StepLabel, null, label),
@@ -38,21 +41,27 @@ export default observer(function AddConnectionWidget({ model, }) {
                         if (!c) {
                             return;
                         }
-                        const connectionId = `${c.name}-${Date.now()}`;
-                        setConfigModel(c.configSchema.create({ connectionId }, getEnv(model)));
+                        setConnectionId(`${c.name}-${Date.now()}`);
                     } })) : connectionType && configModel ? (React.createElement(ConfigureConnection, { connectionType: connectionType, model: configModel, session: session })) : null,
                 React.createElement("div", { className: classes.actionsContainer },
                     React.createElement(Button, { disabled: activeStep === 0, onClick: () => setActiveStep(activeStep - 1), className: classes.button }, "Back"),
                     React.createElement(Button, { disabled: !((activeStep === 0 && connectionType) ||
                             (activeStep === 1 && configModel)), variant: "contained", color: "primary", onClick: () => {
-                            var _a;
                             if (activeStep === steps.length - 1) {
-                                const conf = session.addConnectionConf(configModel);
-                                (_a = session.makeConnection) === null || _a === void 0 ? void 0 : _a.call(session, conf);
-                                session.hideWidget(model);
+                                if (configModel && isSessionWithConnections(session)) {
+                                    const conf = session.addConnectionConf(configModel);
+                                    session.makeConnection(conf);
+                                }
+                                else {
+                                    session.notify('No config model to add');
+                                }
+                                if (isSessionModelWithWidgets(session)) {
+                                    session.hideWidget(model);
+                                }
                             }
                             else {
                                 setActiveStep(activeStep + 1);
                             }
                         }, className: classes.button, "data-testid": "addConnectionNext" }, activeStep === steps.length - 1 ? 'Connect' : 'Next')))))))));
 });
+export default AddConnectionWidget;

package/esm/AddConnectionWidget/components/ConfigureConnection.d.ts

@@ -2,9 +2,9 @@ import React from 'react';
 import { ConnectionType } from '@jbrowse/core/pluggableElementTypes';
 import { AnyConfigurationModel } from '@jbrowse/core/configuration';
 import { AbstractSessionModel } from '@jbrowse/core/util';
-declare const _default: ({ connectionType, model, session, }: {
+declare const ConfigureConnection: ({ connectionType, model, session, }: {
     connectionType: ConnectionType;
     model: AnyConfigurationModel;
     session: AbstractSessionModel;
 }) => React.JSX.Element;
-export default _default;
+export default ConfigureConnection;

package/esm/AddConnectionWidget/components/ConfigureConnection.js

@@ -2,8 +2,9 @@ import React, { Suspense } from 'react';
 import { observer } from 'mobx-react';
 import { ConfigurationEditor } from '@jbrowse/plugin-config';
 import { LoadingEllipses } from '@jbrowse/core/ui';
-export default observer(function ({ connectionType, model, session, }) {
+const ConfigureConnection = observer(function ({ connectionType, model, session, }) {
     const ConfigEditorComponent = connectionType.configEditorComponent || ConfigurationEditor;
     return (React.createElement(Suspense, { fallback: React.createElement(LoadingEllipses, null) },
         React.createElement(ConfigEditorComponent, { model: { target: model }, session: session })));
 });
+export default ConfigureConnection;

package/esm/AddConnectionWidget/components/ConnectionTypeSelect.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { ConnectionType } from '@jbrowse/core/pluggableElementTypes';
-declare const _default: ({ connectionTypeChoices, connectionType, setConnectionType, }: {
+declare const ConnectionTypeSelect: ({ connectionTypeChoices, connectionType, setConnectionType, }: {
     connectionTypeChoices: ConnectionType[];
     connectionType?: ConnectionType | undefined;
     setConnectionType: (c?: ConnectionType) => void;
 }) => React.JSX.Element;
-export default _default;
+export default ConnectionTypeSelect;

package/esm/AddConnectionWidget/components/ConnectionTypeSelect.js

@@ -3,14 +3,16 @@ import { IconButton, MenuItem, TextField } from '@mui/material';
 import { observer } from 'mobx-react';
 // icons
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
-export default observer(function ConnectionTypeSelect({ connectionTypeChoices, connectionType, setConnectionType, }) {
+const ConnectionTypeSelect = observer(function ConnectionTypeSelect({ connectionTypeChoices, connectionType, setConnectionType, }) {
+    const firstChoice = connectionTypeChoices[0];
     useEffect(() => {
         if (!connectionType) {
-            setConnectionType(connectionTypeChoices[0]);
+            setConnectionType(firstChoice);
         }
-    });
+    }, [connectionType, firstChoice, setConnectionType]);
     return (React.createElement("form", { autoComplete: "off" }, connectionType ? (React.createElement(TextField, { value: connectionType.name, label: "connectionType", helperText: connectionType.description ? (React.createElement(React.Fragment, null,
             connectionType.description,
             connectionType.url ? (React.createElement(IconButton, { href: connectionType.url, rel: "noopener noreferrer", target: "_blank" },
                 React.createElement(OpenInNewIcon, null))) : null)) : null, select: true, fullWidth: true, onChange: event => setConnectionType(connectionTypeChoices.find(c => c.name === event.target.value)), variant: "outlined" }, connectionTypeChoices.map(c => (React.createElement(MenuItem, { key: c.name, value: c.name }, c.displayName || c.name))))) : null));
 });
+export default ConnectionTypeSelect;

package/esm/AddTrackWidget/components/AddTrackWidget.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import { AddTrackModel } from '../model';
-declare function AddTrackSelector({ model }: {
+declare const AddTrackSelector: ({ model, }: {
     model: AddTrackModel;
-}): React.JSX.Element;
-declare const _default: typeof AddTrackSelector;
-export default _default;
+}) => React.JSX.Element;
+export default AddTrackSelector;

package/esm/AddTrackWidget/components/AddTrackWidget.js

@@ -4,7 +4,7 @@ import { FormControl, FormHelperText, Select, MenuItem } from '@mui/material';
 import { getEnv } from '@jbrowse/core/util';
 import DefaultAddTrackWorkflow from './DefaultAddTrackWorkflow';
 import PasteConfigWorkflow from './PasteConfigWorkflow';
-function AddTrackSelector({ model }) {
+const AddTrackSelector = observer(function ({ model, }) {
     const [val, setVal] = useState('Default add track workflow');
     const { pluginManager } = getEnv(model);
     const widgets = pluginManager.getAddTrackWorkflowElements();
@@ -22,5 +22,5 @@ function AddTrackSelector({ model }) {
             React.createElement(FormHelperText, null, "Type of add track workflow")),
         React.createElement("br", null),
         React.createElement(Component, { model: model })));
-}
-export default observer(AddTrackSelector);
+});
+export default AddTrackSelector;

package/esm/AddTrackWidget/components/ConfirmTrack.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { AddTrackModel } from '../model';
-declare const _default: ({ model, }: {
+declare const ConfirmTrack: ({ model, }: {
     model: AddTrackModel;
 }) => React.JSX.Element;
-export default _default;
+export default ConfirmTrack;

package/esm/AddTrackWidget/components/ConfirmTrack.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Checkbox, FormControl, FormControlLabel, Link, TextField, Typography, } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
-import { supportedIndexingAdapters, getSession, isElectron, } from '@jbrowse/core/util';
+import { isSupportedIndexingAdapter, getSession, isElectron, } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
 import { UNKNOWN } from '@jbrowse/core/util/tracks';
 import { AssemblySelector } from '@jbrowse/core/ui';
@@ -46,7 +46,7 @@ function UnknownAdapterPrompt({ model }) {
             "and add a feature request for this data type."),
         React.createElement(TrackAdapterSelector, { model: model })));
 }
-export default observer(function ConfirmTrack({ model, }) {
+const ConfirmTrack = observer(function ConfirmTrack({ model, }) {
     const { classes } = useStyles();
     const [check, setCheck] = useState(true);
     const session = getSession(model);
@@ -74,7 +74,7 @@ export default observer(function ConfirmTrack({ model, }) {
     if (!(trackAdapter === null || trackAdapter === void 0 ? void 0 : trackAdapter.type)) {
         return React.createElement(Typography, null, "Could not recognize this data type.");
     }
-    const supportedForIndexing = supportedIndexingAdapters(trackAdapter === null || trackAdapter === void 0 ? void 0 : trackAdapter.type);
+    const supportedForIndexing = isSupportedIndexingAdapter(trackAdapter === null || trackAdapter === void 0 ? void 0 : trackAdapter.type);
     return (React.createElement("div", null,
         trackAdapter ? (React.createElement(StatusMessage, { trackAdapter: trackAdapter, trackType: trackType })) : null,
         warningMessage ? (React.createElement(Typography, { style: { color: 'orange' } }, warningMessage)) : null,
@@ -95,3 +95,4 @@ export default observer(function ConfirmTrack({ model, }) {
                     } }) }))),
         isElectron && check && supportedForIndexing ? (React.createElement(TextIndexingConfig, { model: model })) : null));
 });
+export default ConfirmTrack;

package/esm/AddTrackWidget/components/DefaultAddTrackWorkflow.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import { AddTrackModel } from '../model';
-declare function AddTrackWorkflow({ model }: {
+declare const DefaultAddTrackWorkflow: ({ model, }: {
     model: AddTrackModel;
-}): React.JSX.Element;
-declare const _default: typeof AddTrackWorkflow;
-export default _default;
+}) => React.JSX.Element;
+export default DefaultAddTrackWorkflow;