@jbrowse/plugin-data-management 2.6.3 → 2.7.1

package/dist/HierarchicalTrackSelectorWidget/components/tree/TrackLabel.js

@@ -1,42 +1,19 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
-const Menu_1 = __importDefault(require("@jbrowse/core/ui/Menu"));
 const util_1 = require("@jbrowse/core/util");
+const SanitizedHTML_1 = __importDefault(require("@jbrowse/core/ui/SanitizedHTML"));
 const configuration_1 = require("@jbrowse/core/configuration");
 // icons
 const MoreHoriz_1 = __importDefault(require("@mui/icons-material/MoreHoriz"));
 // locals
 const util_2 = require("../util");
-const ui_1 = require("@jbrowse/core/ui");
+const CascadingMenuButton_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenuButton"));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     compactCheckbox: {
         padding: 0,
@@ -49,10 +26,8 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
     },
 }));
 function TrackLabel({ data }) {
-    var _a, _b;
     const { classes } = useStyles();
     const { checked, conf, model, drawerPosition, id, name, onChange, selected } = data;
-    const [info, setInfo] = (0, react_1.useState)();
     const description = (conf && (0, configuration_1.readConfObject)(conf, ['description'])) || '';
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(material_1.Tooltip, { title: description + (selected ? ' (in selection)' : ''), placement: drawerPosition === 'left' ? 'right' : 'left' },
@@ -60,26 +35,26 @@ function TrackLabel({ data }) {
                         // @ts-expect-error
                         'data-testid': `htsTrackEntry-${id}`,
                     } }), label: react_1.default.createElement("div", { "data-testid": `htsTrackLabel-${id}`, style: { background: selected ? '#cccc' : undefined } },
-                    react_1.default.createElement(ui_1.SanitizedHTML, { html: name })) })),
-        react_1.default.createElement(material_1.IconButton, { onClick: e => setInfo({ target: e.currentTarget, id, conf }), style: { padding: 0 }, "data-testid": `htsTrackEntryMenu-${id}` },
-            react_1.default.createElement(MoreHoriz_1.default, null)),
-        info ? (react_1.default.createElement(Menu_1.default, { anchorEl: info === null || info === void 0 ? void 0 : info.target, menuItems: [
-                ...(((_b = (_a = (0, util_1.getSession)(model)).getTrackActionMenuItems) === null || _b === void 0 ? void 0 : _b.call(_a, info.conf)) || []),
-                {
-                    label: 'Add to selection',
-                    onClick: () => model.addToSelection([info.conf]),
-                },
-                ...(selected
-                    ? [
-                        {
-                            label: 'Remove from selection',
-                            onClick: () => model.removeFromSelection([info.conf]),
-                        },
-                    ]
-                    : []),
-            ], onMenuItemClick: (_event, callback) => {
-                callback();
-                setInfo(undefined);
-            }, open: Boolean(info), onClose: () => setInfo(undefined) })) : null));
+                    react_1.default.createElement(SanitizedHTML_1.default, { html: name })) })),
+        react_1.default.createElement(TrackMenuButton, { model: model, selected: selected, id: id, conf: conf })));
 }
 exports.default = TrackLabel;
+function TrackMenuButton({ id, model, selected, conf, }) {
+    var _a, _b;
+    return (react_1.default.createElement(CascadingMenuButton_1.default, { style: { padding: 0 }, "data-testid": `htsTrackEntryMenu-${id}`, menuItems: [
+            ...(((_b = (_a = (0, util_1.getSession)(model)).getTrackActionMenuItems) === null || _b === void 0 ? void 0 : _b.call(_a, conf)) || []),
+            {
+                label: 'Add to selection',
+                onClick: () => model.addToSelection([conf]),
+            },
+            ...(selected
+                ? [
+                    {
+                        label: 'Remove from selection',
+                        onClick: () => model.removeFromSelection([conf]),
+                    },
+                ]
+                : []),
+        ] },
+        react_1.default.createElement(MoreHoriz_1.default, null)));
+}

package/dist/HierarchicalTrackSelectorWidget/components/util.js

@@ -10,8 +10,7 @@ function treeToMap(tree, map = new Map()) {
     if (tree.id && tree.children.length) {
         map.set(tree.id, tree);
     }
-    for (let i = 0; i < tree.children.length; i++) {
-        const node = tree.children[i];
+    for (const node of tree.children) {
         treeToMap(node, map);
     }
     return map;

package/dist/HierarchicalTrackSelectorWidget/generateHierarchy.d.ts

@@ -1,21 +1,24 @@
 import { AnyConfigurationModel } from '@jbrowse/core/configuration';
-export type TreeNode = {
+export interface TreeNode {
     name: string;
     id: string;
     conf?: AnyConfigurationModel;
     checked?: boolean;
     isOpenByDefault?: boolean;
     children: TreeNode[];
-};
-export declare function generateHierarchy(model: {
-    filterText: string;
-    activeSortTrackNames: boolean;
-    activeSortCategories: boolean;
-    view?: {
-        tracks: {
-            configuration: AnyConfigurationModel;
-        }[];
+}
+export declare function generateHierarchy({ model, trackConfs, extra, }: {
+    model: {
+        filterText: string;
+        activeSortTrackNames: boolean;
+        activeSortCategories: boolean;
+        collapsed: Map<string, boolean>;
+        view?: {
+            tracks: {
+                configuration: AnyConfigurationModel;
+            }[];
+        };
     };
-}, trackConfs: AnyConfigurationModel[], collapsed: {
-    get: (arg: string) => boolean | undefined;
-}, extra?: string): TreeNode[];
+    trackConfs: AnyConfigurationModel[];
+    extra?: string;
+}): TreeNode[];

package/dist/HierarchicalTrackSelectorWidget/generateHierarchy.js

@@ -40,9 +40,9 @@ function sortConfs(confs, sortNames, sortCategories) {
     }
     return ret.map(a => a[0]);
 }
-function generateHierarchy(model, trackConfs, collapsed, extra) {
+function generateHierarchy({ model, trackConfs, extra, }) {
     const hierarchy = { children: [] };
-    const { filterText, activeSortTrackNames, activeSortCategories, view } = model;
+    const { collapsed, filterText, activeSortTrackNames, activeSortCategories, view, } = model;
     if (!view) {
         return [];
     }

package/dist/HierarchicalTrackSelectorWidget/model.js

@@ -188,7 +188,11 @@ function stateTreeFactory(pluginManager) {
          * #method
          */
         connectionHierarchy(connection) {
-            return (0, generateHierarchy_1.generateHierarchy)(self, self.connectionTrackConfigurations(connection), self.collapsed, connection.name);
+            return (0, generateHierarchy_1.generateHierarchy)({
+                model: self,
+                trackConfs: self.connectionTrackConfigurations(connection),
+                extra: connection.name,
+            });
         },
     }))
         .views(self => ({
@@ -218,7 +222,10 @@ function stateTreeFactory(pluginManager) {
                     .map(s => ({
                     name: s.group,
                     id: s.group,
-                    children: (0, generateHierarchy_1.generateHierarchy)(self, s.tracks, self.collapsed),
+                    children: (0, generateHierarchy_1.generateHierarchy)({
+                        model: self,
+                        trackConfs: s.tracks,
+                    }),
                 }))
                     // always keep the Tracks entry at idx 0
                     .filter((f, idx) => idx === 0 || !!f.children.length),
@@ -262,21 +269,19 @@ function stateTreeFactory(pluginManager) {
                 ])) {
                     self.collapseTopLevelCategories();
                 }
-                else if ((0, configuration_1.getConf)(session, [
+                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);
-                    }
+                for (const entry of (0, configuration_1.getConf)(session, [
+                    'hierarchical',
+                    'defaultCollapsed',
+                    'categoryNames',
+                ])) {
+                    self.collapsed.set(entry, true);
                 }
                 self.initialized = true;
             }
@@ -284,7 +289,7 @@ function stateTreeFactory(pluginManager) {
     }))
         .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; }));
+            return self.allTracks.some(group => group.tracks.some(t => { var _a; return ((_a = (0, configuration_1.readConfObject)(t, 'category')) === null || _a === void 0 ? void 0 : _a.length) > 1; }));
         },
     }));
 }

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

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

package/dist/PluginStoreWidget/components/AddCustomPluginDialog.js

@@ -51,7 +51,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         transform: 'rotate(180deg)',
     },
 }));
-exports.default = (0, mobx_react_1.observer)(function ({ onClose, model, }) {
+const AddCustomPluginDialog = (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)('');
@@ -92,3 +92,4 @@ exports.default = (0, mobx_react_1.observer)(function ({ onClose, model, }) {
                 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 = AddCustomPluginDialog;

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

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

package/dist/PluginStoreWidget/components/InstalledPlugin.js

@@ -46,12 +46,15 @@ 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)));
 }
-exports.default = (0, mobx_react_1.observer)(function ({ plugin, model, }) {
+const InstalledPlugin = (0, mobx_react_1.observer)(function ({ plugin, model, }) {
+    var _a;
     const [dialogPlugin, setDialogPlugin] = (0, react_1.useState)();
     const { pluginManager } = (0, util_1.getEnv)(model);
     const session = (0, util_1.getSession)(model);
-    const { jbrowse, adminMode, sessionPlugins } = session;
-    const isSessionPlugin = sessionPlugins === null || sessionPlugins === void 0 ? void 0 : sessionPlugins.some((p) => pluginManager.pluginMetadata[plugin.name].url === p.url);
+    const { jbrowse, adminMode } = session;
+    const isSessionPlugin = (0, types_1.isSessionWithSessionPlugins)(session)
+        ? (_a = session.sessionPlugins) === null || _a === void 0 ? void 0 : _a.some(p => pluginManager.pluginMetadata[plugin.name].url === p.url)
+        : false;
     return (react_1.default.createElement(react_1.default.Fragment, null,
         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 => {
@@ -67,7 +70,8 @@ exports.default = (0, mobx_react_1.observer)(function ({ plugin, model, }) {
                     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) },
+            adminMode || isSessionPlugin ? (react_1.default.createElement(material_1.IconButton, { "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 = InstalledPlugin;

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import PluginManager from '@jbrowse/core/PluginManager';
 import { PluginStoreModel } from '../model';
-declare const _default: ({ pluginManager, model, }: {
+declare const InstalledPluginsList: ({ pluginManager, model, }: {
     pluginManager: PluginManager;
     model: PluginStoreModel;
 }) => React.JSX.Element;
-export default _default;
+export default InstalledPluginsList;

package/dist/PluginStoreWidget/components/InstalledPluginsList.js

@@ -7,7 +7,7 @@ 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"));
-exports.default = (0, mobx_react_1.observer)(function InstalledPluginsList({ pluginManager, model, }) {
+const InstalledPluginsList = (0, mobx_react_1.observer)(function InstalledPluginsList({ pluginManager, model, }) {
     const { plugins } = pluginManager;
     const { filterText } = model;
     const externalPlugins = plugins.filter(p => { var _a; return !((_a = pluginManager.pluginMetadata[p.name]) === null || _a === void 0 ? void 0 : _a.isCore); });
@@ -15,3 +15,4 @@ exports.default = (0, mobx_react_1.observer)(function InstalledPluginsList({ plu
         .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

@@ -53,7 +53,7 @@ const useStyles = (0, mui_1.makeStyles)()({
         alignItems: 'center',
     },
 });
-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);
@@ -84,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

@@ -59,7 +59,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         display: 'flex',
     },
 }));
-function PluginStoreWidget({ model }) {
+const PluginStoreWidget = (0, mobx_react_1.observer)(function ({ model, }) {
     const { classes } = useStyles();
     const { plugins, error } = (0, util_2.useFetchPlugins)();
     const [open, setOpen] = (0, react_1.useState)(false);
@@ -98,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/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;