@jbrowse/app-core 2.13.1 → 2.15.0

package/dist/Assemblies/SessionAssembliesMixin.d.ts

@@ -37,7 +37,7 @@ export declare function SessionAssembliesMixin(pluginManager: PluginManager, ass
     /**
      * #action
      */
-    addSessionAssembly(conf: AnyConfiguration): {
+    addSessionAssembly(conf: AnyConfiguration): ({
         [x: string]: any;
     } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
         setSubschema(slotName: string, data: Record<string, unknown>): Record<string, unknown> | ({
@@ -70,7 +70,7 @@ export declare function SessionAssembliesMixin(pluginManager: PluginManager, ass
             defaultValue: string;
             description: string;
         };
-    }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "name">>>;
+    }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "name">>>) | undefined;
     /**
      * #action
      */

package/dist/JBrowseConfig/index.js

@@ -127,7 +127,7 @@ function JBrowseConfigF({ pluginManager, assemblyConfigSchema, }) {
          * #slot
          */
         defaultSession: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.frozen(), {
-            name: `New Session`,
+            name: 'New Session',
         }),
     });
 }

package/dist/JBrowseModel/index.d.ts

@@ -137,7 +137,7 @@ export declare function JBrowseModelF({ pluginManager, assemblyConfigSchema, }:
     /**
      * #action
      */
-    addAssemblyConf(conf: AnyConfigurationModel): {
+    addAssemblyConf(conf: AnyConfigurationModel): ({
         [x: string]: any;
     } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
         setSubschema(slotName: string, data: Record<string, unknown>): Record<string, unknown> | ({
@@ -147,7 +147,7 @@ export declare function JBrowseModelF({ pluginManager, assemblyConfigSchema, }:
                 [x: string]: any;
             } & import("mobx-state-tree/dist/internal").NonEmptyObject & any & import("mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>);
         } & import("mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>);
-    } & import("mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>;
+    } & import("mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>) | undefined;
     /**
      * #action
      */

package/dist/JBrowseModel/index.js

@@ -30,7 +30,6 @@ function JBrowseModelF({ pluginManager, assemblyConfigSchema, }) {
          * #getter
          */
         get rpcManager() {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             return (0, mobx_state_tree_1.getParent)(self).rpcManager;
         },
     }))
@@ -106,7 +105,6 @@ function JBrowseModelF({ pluginManager, assemblyConfigSchema, }) {
          */
         addPlugin(pluginDefinition) {
             self.plugins.push(pluginDefinition);
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const rootModel = (0, mobx_state_tree_1.getParent)(self);
             rootModel.setPluginsUpdated(true);
         },
@@ -114,20 +112,22 @@ function JBrowseModelF({ pluginManager, assemblyConfigSchema, }) {
          * #action
          */
         removePlugin(pluginDefinition) {
-            self.plugins = (0, mobx_state_tree_1.cast)(self.plugins.filter(plugin => plugin.url !== pluginDefinition.url ||
+            self.plugins = (0, mobx_state_tree_1.cast)(self.plugins.filter(plugin => 
+            // @ts-expect-error
+            plugin.url !== pluginDefinition.url ||
+                // @ts-expect-error
                 plugin.umdUrl !== pluginDefinition.umdUrl ||
+                // @ts-expect-error
                 plugin.cjsUrl !== pluginDefinition.cjsUrl ||
+                // @ts-expect-error
                 plugin.esmUrl !== pluginDefinition.esmUrl));
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             (0, mobx_state_tree_1.getParent)(self).setPluginsUpdated(true);
         },
         /**
          * #action
          */
         setDefaultSessionConf(sessionConf) {
-            const newDefault = 
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            (0, mobx_state_tree_1.getParent)(self).session.name === sessionConf.name
+            const newDefault = (0, mobx_state_tree_1.getParent)(self).session.name === sessionConf.name
                 ? (0, mobx_state_tree_1.getSnapshot)(sessionConf)
                 : (0, mobx_1.toJS)(sessionConf);
             if (!newDefault.name) {

package/dist/ui/App/App.js

@@ -34,10 +34,9 @@ const mobx_react_1 = require("mobx-react");
 const Snackbar_1 = __importDefault(require("@jbrowse/core/ui/Snackbar"));
 // locals
 const AppToolbar_1 = __importDefault(require("./AppToolbar"));
-const ViewLauncher_1 = __importDefault(require("./ViewLauncher"));
-const ViewPanel_1 = __importDefault(require("./ViewPanel"));
 const DialogQueue_1 = __importDefault(require("./DialogQueue"));
 const AppFab_1 = __importDefault(require("./AppFab"));
+const ViewsContainer_1 = __importDefault(require("./ViewsContainer"));
 const DrawerWidget = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./DrawerWidget'))));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     root: {
@@ -52,10 +51,6 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         gridTemplateRows: '[menubar] min-content [components] auto',
         height: '100vh',
     },
-    viewContainer: {
-        overflowY: 'auto',
-        gridRow: 'components',
-    },
     appBar: {
         flexGrow: 1,
         gridRow: 'menubar',
@@ -66,14 +61,6 @@ const LazyDrawerWidget = (0, mobx_react_1.observer)(function (props) {
     return (react_1.default.createElement(react_1.Suspense, { fallback: null },
         react_1.default.createElement(DrawerWidget, { session: session })));
 });
-const ViewContainer = (0, mobx_react_1.observer)(function (props) {
-    const { session } = props;
-    const { views } = session;
-    const { classes } = useStyles();
-    return (react_1.default.createElement("div", { className: classes.viewContainer },
-        views.length > 0 ? (views.map(view => (react_1.default.createElement(ViewPanel_1.default, { key: `view-${view.id}`, view: view, session: session })))) : (react_1.default.createElement(ViewLauncher_1.default, { ...props })),
-        react_1.default.createElement("div", { style: { height: 300 } })));
-});
 const App = (0, mobx_react_1.observer)(function (props) {
     const { session } = props;
     const { classes } = useStyles();
@@ -81,13 +68,13 @@ const App = (0, mobx_react_1.observer)(function (props) {
     const drawerVisible = visibleWidget && !minimized;
     const d = drawerVisible ? `[drawer] ${drawerWidth}px` : undefined;
     const grid = drawerPosition === 'right' ? ['[main] 1fr', d] : [d, '[main] 1fr'];
-    return (react_1.default.createElement("div", { className: classes.root, style: { gridTemplateColumns: grid === null || grid === void 0 ? void 0 : grid.filter(f => !!f).join(' ') } },
+    return (react_1.default.createElement("div", { className: classes.root, style: { gridTemplateColumns: grid.filter(f => !!f).join(' ') } },
         drawerVisible && drawerPosition === 'left' ? (react_1.default.createElement(LazyDrawerWidget, { session: session })) : null,
         react_1.default.createElement(DialogQueue_1.default, { session: session }),
         react_1.default.createElement("div", { className: classes.appContainer },
             react_1.default.createElement(material_1.AppBar, { className: classes.appBar, position: "static" },
                 react_1.default.createElement(AppToolbar_1.default, { ...props })),
-            react_1.default.createElement(ViewContainer, { ...props })),
+            react_1.default.createElement(ViewsContainer_1.default, { ...props })),
         react_1.default.createElement(AppFab_1.default, { session: session }),
         drawerVisible && drawerPosition === 'right' ? (react_1.default.createElement(LazyDrawerWidget, { session: session })) : null,
         react_1.default.createElement(Snackbar_1.default, { session: session })));

package/dist/ui/App/AppFab.js

@@ -27,7 +27,9 @@ const AppFab = (0, mobx_react_1.observer)(function ({ session, }) {
     const { minimized, activeWidgets, drawerPosition } = session;
     const { classes } = useStyles();
     return activeWidgets.size > 0 && minimized ? (react_1.default.createElement(material_1.Tooltip, { title: "Open drawer widget" },
-        react_1.default.createElement(material_1.Fab, { className: drawerPosition === 'right' ? classes.right : classes.left, color: "primary", "data-testid": "drawer-maximize", onClick: () => session.showWidgetDrawer() },
+        react_1.default.createElement(material_1.Fab, { className: drawerPosition === 'right' ? classes.right : classes.left, color: "primary", "data-testid": "drawer-maximize", onClick: () => {
+                session.showWidgetDrawer();
+            } },
             react_1.default.createElement(Launch_1.default, null)))) : null;
 });
 exports.default = AppFab;

package/dist/ui/App/AppToolbar.d.ts

@@ -3,13 +3,13 @@ import { SessionWithDrawerWidgets } from '@jbrowse/core/util';
 import { MenuItem as JBMenuItem } from '@jbrowse/core/ui/Menu';
 import { SnackbarMessage } from '@jbrowse/core/ui/SnackbarModel';
 type AppSession = SessionWithDrawerWidgets & {
-    savedSessionNames: string[];
     menus: {
         label: string;
         menuItems: JBMenuItem[];
     }[];
-    renameCurrentSession: (arg: string) => void;
+    savedSessionNames?: string[];
     snackbarMessages: SnackbarMessage[];
+    renameCurrentSession: (arg: string) => void;
     popSnackbarMessage: () => unknown;
 };
 declare const AppToolbar: ({ session, HeaderButtons, }: {

package/dist/ui/App/Drawer.js

@@ -54,7 +54,7 @@ const Drawer = (0, mobx_react_1.observer)(function ({ children, session, }) {
     (0, react_1.useEffect)(() => {
         function handleSelectView(e) {
             var _a, _b, _c;
-            if (e.target instanceof Element && ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+            if (e.target instanceof Element && ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
                 // @ts-ignore
                 const visibleWidgetId = (_c = (_b = session.visibleWidget) === null || _b === void 0 ? void 0 : _b.view) === null || _c === void 0 ? void 0 : _c.id;
                 if (visibleWidgetId) {
@@ -68,7 +68,7 @@ const Drawer = (0, mobx_react_1.observer)(function ({ children, session, }) {
             document.removeEventListener('mousedown', handleSelectView);
             document.removeEventListener('keydown', handleSelectView);
         };
-    }, [ref, session]);
+    }, [session]);
     return (react_1.default.createElement(material_1.Paper, { ref: ref, className: classes.paper, elevation: 16, square: true },
         drawerPosition === 'right' ? (react_1.default.createElement(ResizeHandle_1.default, { onDrag: session.resizeDrawer, className: classes.resizeHandle, vertical: true })) : null,
         children,

package/dist/ui/App/DrawerControls.js

@@ -37,7 +37,9 @@ const DrawerControls = (0, mobx_react_1.observer)(function ({ session, }) {
     const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
     const { drawerPosition, visibleWidget } = session;
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.IconButton, { color: "inherit", onClick: event => setAnchorEl(event.currentTarget) },
+        react_1.default.createElement(material_1.IconButton, { color: "inherit", onClick: event => {
+                setAnchorEl(event.currentTarget);
+            } },
             react_1.default.createElement(MoreVert_1.default, null)),
         react_1.default.createElement(material_1.Tooltip, { title: "Minimize drawer" },
             react_1.default.createElement(material_1.IconButton, { "data-testid": "drawer-minimize", color: "inherit", onClick: () => {
@@ -46,9 +48,13 @@ const DrawerControls = (0, mobx_react_1.observer)(function ({ session, }) {
                 } },
                 react_1.default.createElement(Minimize_1.default, null))),
         react_1.default.createElement(material_1.Tooltip, { title: "Close drawer" },
-            react_1.default.createElement(material_1.IconButton, { color: "inherit", onClick: () => session.hideWidget(visibleWidget) },
+            react_1.default.createElement(material_1.IconButton, { color: "inherit", onClick: () => {
+                    session.hideWidget(visibleWidget);
+                } },
                 react_1.default.createElement(Close_1.default, null))),
-        react_1.default.createElement(material_1.Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: () => setAnchorEl(null) }, ['left', 'right'].map(option => (react_1.default.createElement(material_1.MenuItem, { key: option, selected: drawerPosition === 'option', onClick: () => {
+        react_1.default.createElement(material_1.Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: () => {
+                setAnchorEl(null);
+            } }, ['left', 'right'].map(option => (react_1.default.createElement(material_1.MenuItem, { key: option, selected: drawerPosition === 'option', onClick: () => {
                 session.setDrawerPosition(option);
                 setAnchorEl(null);
             } }, option))))));

package/dist/ui/App/DrawerHeader.js

@@ -31,11 +31,15 @@ const DrawerHeader = (0, mobx_react_1.observer)(function ({ session, setToolbarH
     const viewWidgetId = (_b = (_a = session.visibleWidget) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.id;
     return (react_1.default.createElement(material_1.AppBar, { position: "sticky", className: focusedViewId === viewWidgetId
             ? classes.headerFocused
-            : classes.headerUnfocused, ref: ref => setToolbarHeight((ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect().height) || 0) },
+            : classes.headerUnfocused, ref: ref => {
+            setToolbarHeight((ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect().height) || 0);
+        } },
         react_1.default.createElement(material_1.Toolbar, { disableGutters: true },
             react_1.default.createElement(DrawerWidgetSelector_1.default, { session: session }),
             react_1.default.createElement(material_1.Tooltip, { title: "Open drawer in dialog" },
-                react_1.default.createElement(material_1.IconButton, { color: "inherit", onClick: () => onPopoutDrawer() },
+                react_1.default.createElement(material_1.IconButton, { color: "inherit", onClick: () => {
+                        onPopoutDrawer();
+                    } },
                     react_1.default.createElement(Launch_1.default, null))),
             react_1.default.createElement("div", { className: classes.spacer }),
             react_1.default.createElement(DrawerControls_1.default, { session: session }))));

package/dist/ui/App/DrawerWidget.js

@@ -50,11 +50,15 @@ const DrawerWidget = (0, mobx_react_1.observer)(function ({ session, }) {
     const [toolbarHeight, setToolbarHeight] = (0, react_1.useState)(0);
     const [popoutDrawer, setPopoutDrawer] = (0, react_1.useState)(false);
     return (react_1.default.createElement(Drawer_1.default, { session: session },
-        react_1.default.createElement(DrawerHeader_1.default, { onPopoutDrawer: () => setPopoutDrawer(true), session: session, setToolbarHeight: setToolbarHeight }),
+        react_1.default.createElement(DrawerHeader_1.default, { onPopoutDrawer: () => {
+                setPopoutDrawer(true);
+            }, session: session, setToolbarHeight: setToolbarHeight }),
         react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement(ui_1.LoadingEllipses, null) },
             react_1.default.createElement(react_error_boundary_1.ErrorBoundary, { FallbackComponent: ({ error }) => react_1.default.createElement(ui_1.ErrorMessage, { error: error }) }, DrawerComponent ? (popoutDrawer ? (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement("div", null, "Opened in dialog..."),
-                react_1.default.createElement(ModalWidget, { session: session, onClose: () => setPopoutDrawer(false) }))) : (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(ModalWidget, { session: session, onClose: () => {
+                        setPopoutDrawer(false);
+                    } }))) : (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(DrawerComponent, { model: visibleWidget, session: session, toolbarHeight: toolbarHeight }),
                 react_1.default.createElement("div", { style: { height: 300 } })))) : null))));
 });

package/dist/ui/App/DrawerWidgetSelector.js

@@ -48,7 +48,9 @@ const DrawerWidgetSelector = (0, mobx_react_1.observer)(function ({ session, })
             const { HeadingComponent, heading } = widgetType;
             return (react_1.default.createElement(material_1.MenuItem, { "data-testid": `widget-drawer-selects-item-${widget.type}`, key: widget.id, value: widget.id },
                 HeadingComponent ? (react_1.default.createElement(HeadingComponent, { model: widget })) : (react_1.default.createElement(material_1.Typography, { variant: "h6", color: "inherit" }, heading)),
-                react_1.default.createElement(material_1.IconButton, { "data-testid": `${widget.type}-drawer-delete`, color: "inherit", "aria-label": "Delete", onClick: () => session.hideWidget(widget) },
+                react_1.default.createElement(material_1.IconButton, { "data-testid": `${widget.type}-drawer-delete`, color: "inherit", "aria-label": "Delete", onClick: () => {
+                        session.hideWidget(widget);
+                    } },
                     react_1.default.createElement(Delete_1.default, null))));
         }))));
 });

package/dist/ui/App/ModalWidget.js

@@ -67,12 +67,10 @@ const ModalWidget = (0, mobx_react_1.observer)(function ({ session, onClose, })
         return null;
     }
     const { ReactComponent } = pluginManager.getWidgetType(visibleWidget.type);
-    const Component = visibleWidget
-        ? pluginManager.evaluateExtensionPoint('Core-replaceWidget', ReactComponent, {
-            session,
-            model: visibleWidget,
-        })
-        : null;
+    const Component = pluginManager.evaluateExtensionPoint('Core-replaceWidget', ReactComponent, {
+        session,
+        model: visibleWidget,
+    });
     return (react_1.default.createElement(ui_1.Dialog, { open: true, onClose: onClose, maxWidth: "xl", header: react_1.default.createElement(DrawerAppBar, { onClose: onClose, session: session }) }, Component ? (react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement("div", null, "Loading...") },
         react_1.default.createElement(material_1.Paper, { className: classes.paper },
             react_1.default.createElement(Component, { model: visibleWidget, session: session, modal: true, overrideDimensions: {

package/dist/ui/App/ViewContainer.js

@@ -54,7 +54,7 @@ const ViewContainer = (0, mobx_react_1.observer)(function ({ view, onClose, onMi
     (0, react_1.useEffect)(() => {
         function handleSelectView(e) {
             var _a;
-            if (e.target instanceof Element && ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+            if (e.target instanceof Element && ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
                 session.setFocusedViewId(view.id);
             }
         }

package/dist/ui/App/ViewContainerTitle.js

@@ -33,7 +33,9 @@ const ViewContainerTitle = (0, mobx_react_1.observer)(function ({ view, }) {
     return (react_1.default.createElement(material_1.Tooltip, { title: "Rename view", arrow: true },
         react_1.default.createElement(EditableTypography_1.default, { value: view.displayName ||
                 // @ts-expect-error
-                `${((_a = view.assemblyNames) === null || _a === void 0 ? void 0 : _a.join(',')) || 'Untitled view'}${view.minimized ? ' (minimized)' : ''}`, setValue: val => view.setDisplayName(val), variant: "body2", classes: {
+                `${((_a = view.assemblyNames) === null || _a === void 0 ? void 0 : _a.join(',')) || 'Untitled view'}${view.minimized ? ' (minimized)' : ''}`, setValue: val => {
+                view.setDisplayName(val);
+            }, variant: "body2", classes: {
                 input: classes.input,
                 inputBase: classes.inputBase,
                 inputRoot: classes.inputRoot,

package/dist/ui/App/ViewHeader.js

@@ -68,8 +68,10 @@ const ViewHeader = (0, mobx_react_1.observer)(function ({ view, onClose, onMinim
     // scroll the view into view when first mounted. note: this effect will run
     // only once, because of the empty array second param
     (0, react_1.useEffect)(() => {
-        var _a, _b;
-        (_b = (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, { block: 'center' });
+        var _a;
+        if (typeof jest === 'undefined') {
+            (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'center' });
+        }
     }, []);
     return (react_1.default.createElement("div", { ref: scrollRef, className: classes.viewHeader },
         react_1.default.createElement(ViewMenu_1.default, { model: view, IconProps: { className: classes.icon } }),

package/dist/ui/App/ViewLauncher.js

@@ -33,18 +33,23 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
     selectPaper: {
         padding: theme.spacing(4),
     },
+    m2: {
+        margin: 2,
+    },
 }));
 const ViewLauncher = (0, mobx_react_1.observer)(({ session }) => {
     var _a;
     const { classes } = useStyles();
     const { pluginManager } = (0, util_1.getEnv)(session);
     const viewTypes = pluginManager.getElementTypeRecord('view').all();
-    const [value, setValue] = (0, react_1.useState)((_a = viewTypes[0]) === null || _a === void 0 ? void 0 : _a.name);
+    const [value, setValue] = (0, react_1.useState)(((_a = viewTypes[0]) === null || _a === void 0 ? void 0 : _a.name) || '');
     return (react_1.default.createElement(material_1.Paper, { className: classes.selectPaper },
         react_1.default.createElement(material_1.Typography, null, "Select a view to launch"),
-        react_1.default.createElement(material_1.FormControl, { style: { margin: 2 } },
-            react_1.default.createElement(material_1.Select, { value: value, onChange: event => setValue(event.target.value) }, viewTypes.map(({ displayName, name }) => (react_1.default.createElement(material_1.MenuItem, { key: name, value: name }, displayName))))),
-        react_1.default.createElement(material_1.FormControl, { style: { margin: 2 } },
+        react_1.default.createElement(material_1.FormControl, { className: classes.m2 },
+            react_1.default.createElement(material_1.Select, { value: value, onChange: event => {
+                    setValue(event.target.value);
+                } }, viewTypes.map(({ displayName, name }) => (react_1.default.createElement(material_1.MenuItem, { key: name, value: name }, displayName))))),
+        react_1.default.createElement(material_1.FormControl, { className: classes.m2 },
             react_1.default.createElement(material_1.Button, { onClick: () => session.addView(value, {}), variant: "contained", color: "primary" }, "Launch view"))));
 });
 exports.default = ViewLauncher;

package/dist/ui/App/ViewMenu.js

@@ -16,7 +16,6 @@ const KeyboardDoubleArrowUp_1 = __importDefault(require("@mui/icons-material/Key
 const KeyboardArrowDown_1 = __importDefault(require("@mui/icons-material/KeyboardArrowDown"));
 const KeyboardArrowUp_1 = __importDefault(require("@mui/icons-material/KeyboardArrowUp"));
 const ViewMenu = (0, mobx_react_1.observer)(function ({ model, IconButtonProps, IconProps, }) {
-    const { menuItems } = model;
     const session = (0, util_1.getSession)(model);
     const popupState = (0, hooks_1.usePopupState)({
         popupId: 'viewMenu',
@@ -26,12 +25,14 @@ const ViewMenu = (0, mobx_react_1.observer)(function ({ model, IconButtonProps,
     // a confusing bug related to it! see
     // https://github.com/GMOD/jbrowse-components/issues/4115
     //
-    // Make sure to test the Breakpoint split view menu checkboxes if you
-    // intend to change this
+    // Make sure to test the Breakpoint split view menu checkboxes if you intend
+    // to change this
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(material_1.IconButton, { ...IconButtonProps, ...(0, hooks_1.bindTrigger)(popupState), "data-testid": "view_menu_icon" },
             react_1.default.createElement(Menu_1.default, { ...IconProps, fontSize: "small" })),
-        react_1.default.createElement(CascadingMenu_1.default, { ...(0, hooks_1.bindPopover)(popupState), onMenuItemClick: (_event, callback) => callback(), menuItems: [
+        react_1.default.createElement(CascadingMenu_1.default, { ...(0, hooks_1.bindPopover)(popupState), onMenuItemClick: (_event, callback) => {
+                callback();
+            }, menuItems: [
                 ...(session.views.length > 1
                     ? [
                         {
@@ -41,30 +42,36 @@ const ViewMenu = (0, mobx_react_1.observer)(function ({ model, IconButtonProps,
                                 {
                                     label: 'Move view to top',
                                     icon: KeyboardDoubleArrowUp_1.default,
-                                    onClick: () => session.moveViewToTop(model.id),
+                                    onClick: () => {
+                                        session.moveViewToTop(model.id);
+                                    },
                                 },
                                 {
                                     label: 'Move view up',
                                     icon: KeyboardArrowUp_1.default,
-                                    onClick: () => session.moveViewUp(model.id),
+                                    onClick: () => {
+                                        session.moveViewUp(model.id);
+                                    },
                                 },
                                 {
                                     label: 'Move view down',
                                     icon: KeyboardArrowDown_1.default,
-                                    onClick: () => session.moveViewDown(model.id),
+                                    onClick: () => {
+                                        session.moveViewDown(model.id);
+                                    },
                                 },
                                 {
                                     label: 'Move view to bottom',
                                     icon: KeyboardDoubleArrowDown_1.default,
-                                    onClick: () => session.moveViewToBottom(model.id),
+                                    onClick: () => {
+                                        session.moveViewToBottom(model.id);
+                                    },
                                 },
                             ],
                         },
                     ]
                     : []),
-                // <=1.3.3 didn't use a function, so check as value also
-                ...((typeof menuItems === 'function' ? menuItems() : menuItems) ||
-                    []),
+                ...model.menuItems(),
             ], popupState: popupState })));
 });
 exports.default = ViewMenu;

package/dist/ui/App/ViewPanel.js

@@ -43,7 +43,11 @@ const ViewPanel = (0, mobx_react_1.observer)(function ({ view, session, }) {
         throw new Error(`unknown view type ${view.type}`);
     }
     const { ReactComponent } = viewType;
-    return (react_1.default.createElement(ViewContainer_1.default, { view: view, onClose: () => session.removeView(view), onMinimize: () => view.setMinimized(!view.minimized) }, !view.minimized ? (react_1.default.createElement(react_error_boundary_1.ErrorBoundary, { FallbackComponent: ({ error }) => react_1.default.createElement(ErrorMessage_1.default, { error: error }) },
+    return (react_1.default.createElement(ViewContainer_1.default, { view: view, onClose: () => {
+            session.removeView(view);
+        }, onMinimize: () => {
+            view.setMinimized(!view.minimized);
+        } }, !view.minimized ? (react_1.default.createElement(react_error_boundary_1.ErrorBoundary, { FallbackComponent: ({ error }) => react_1.default.createElement(ErrorMessage_1.default, { error: error }) },
         react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement(LoadingEllipses_1.default, { variant: "h6" }) },
             react_1.default.createElement(ReactComponent, { model: view, session: session })))) : (false)));
 });

package/dist/ui/App/ViewsContainer.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util';
+import { SnackbarMessage } from '@jbrowse/core/ui/SnackbarModel';
+import { MenuItem as JBMenuItem } from '@jbrowse/core/ui/Menu';
+interface Props {
+    HeaderButtons?: React.ReactElement;
+    session: SessionWithFocusedViewAndDrawerWidgets & {
+        savedSessionNames: string[];
+        menus: {
+            label: string;
+            menuItems: JBMenuItem[];
+        }[];
+        renameCurrentSession: (arg: string) => void;
+        snackbarMessages: SnackbarMessage[];
+        popSnackbarMessage: () => unknown;
+    };
+}
+declare const ViewsContainer: (props: Props) => React.JSX.Element;
+export default ViewsContainer;

package/dist/ui/App/ViewsContainer.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const mui_1 = require("tss-react/mui");
+const mobx_react_1 = require("mobx-react");
+// locals
+const ViewLauncher_1 = __importDefault(require("./ViewLauncher"));
+const ViewPanel_1 = __importDefault(require("./ViewPanel"));
+const useStyles = (0, mui_1.makeStyles)()({
+    viewsContainer: {
+        overflowY: 'auto',
+        gridRow: 'components',
+    },
+});
+const ViewsContainer = (0, mobx_react_1.observer)(function ViewsContainer(props) {
+    const { session } = props;
+    const { views } = session;
+    const { classes } = useStyles();
+    return (react_1.default.createElement("div", { className: classes.viewsContainer },
+        views.length > 0 ? (views.map(view => (react_1.default.createElement(ViewPanel_1.default, { key: `view-${view.id}`, view: view, session: session })))) : (react_1.default.createElement(ViewLauncher_1.default, { ...props })),
+        react_1.default.createElement("div", { style: { height: 300 } })));
+});
+exports.default = ViewsContainer;

package/esm/Assemblies/SessionAssembliesMixin.d.ts

@@ -37,7 +37,7 @@ export declare function SessionAssembliesMixin(pluginManager: PluginManager, ass
     /**
      * #action
      */
-    addSessionAssembly(conf: AnyConfiguration): {
+    addSessionAssembly(conf: AnyConfiguration): ({
         [x: string]: any;
     } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
         setSubschema(slotName: string, data: Record<string, unknown>): Record<string, unknown> | ({
@@ -70,7 +70,7 @@ export declare function SessionAssembliesMixin(pluginManager: PluginManager, ass
             defaultValue: string;
             description: string;
         };
-    }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "name">>>;
+    }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "name">>>) | undefined;
     /**
      * #action
      */

package/esm/JBrowseConfig/index.js

@@ -121,7 +121,7 @@ export function JBrowseConfigF({ pluginManager, assemblyConfigSchema, }) {
          * #slot
          */
         defaultSession: types.optional(types.frozen(), {
-            name: `New Session`,
+            name: 'New Session',
         }),
     });
 }

package/esm/JBrowseModel/index.d.ts

@@ -137,7 +137,7 @@ export declare function JBrowseModelF({ pluginManager, assemblyConfigSchema, }:
     /**
      * #action
      */
-    addAssemblyConf(conf: AnyConfigurationModel): {
+    addAssemblyConf(conf: AnyConfigurationModel): ({
         [x: string]: any;
     } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
         setSubschema(slotName: string, data: Record<string, unknown>): Record<string, unknown> | ({
@@ -147,7 +147,7 @@ export declare function JBrowseModelF({ pluginManager, assemblyConfigSchema, }:
                 [x: string]: any;
             } & import("mobx-state-tree/dist/internal").NonEmptyObject & any & import("mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>);
         } & import("mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>);
-    } & import("mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>;
+    } & import("mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>) | undefined;
     /**
      * #action
      */

package/esm/JBrowseModel/index.js

@@ -27,7 +27,6 @@ export function JBrowseModelF({ pluginManager, assemblyConfigSchema, }) {
          * #getter
          */
         get rpcManager() {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             return getParent(self).rpcManager;
         },
     }))
@@ -103,7 +102,6 @@ export function JBrowseModelF({ pluginManager, assemblyConfigSchema, }) {
          */
         addPlugin(pluginDefinition) {
             self.plugins.push(pluginDefinition);
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const rootModel = getParent(self);
             rootModel.setPluginsUpdated(true);
         },
@@ -111,20 +109,22 @@ export function JBrowseModelF({ pluginManager, assemblyConfigSchema, }) {
          * #action
          */
         removePlugin(pluginDefinition) {
-            self.plugins = cast(self.plugins.filter(plugin => plugin.url !== pluginDefinition.url ||
+            self.plugins = cast(self.plugins.filter(plugin => 
+            // @ts-expect-error
+            plugin.url !== pluginDefinition.url ||
+                // @ts-expect-error
                 plugin.umdUrl !== pluginDefinition.umdUrl ||
+                // @ts-expect-error
                 plugin.cjsUrl !== pluginDefinition.cjsUrl ||
+                // @ts-expect-error
                 plugin.esmUrl !== pluginDefinition.esmUrl));
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             getParent(self).setPluginsUpdated(true);
         },
         /**
          * #action
          */
         setDefaultSessionConf(sessionConf) {
-            const newDefault = 
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            getParent(self).session.name === sessionConf.name
+            const newDefault = getParent(self).session.name === sessionConf.name
                 ? getSnapshot(sessionConf)
                 : toJS(sessionConf);
             if (!newDefault.name) {

package/esm/ui/App/App.js

@@ -5,10 +5,9 @@ import { observer } from 'mobx-react';
 import Snackbar from '@jbrowse/core/ui/Snackbar';
 // locals
 import AppToolbar from './AppToolbar';
-import ViewLauncher from './ViewLauncher';
-import ViewPanel from './ViewPanel';
 import DialogQueue from './DialogQueue';
 import AppFab from './AppFab';
+import ViewsContainer from './ViewsContainer';
 const DrawerWidget = lazy(() => import('./DrawerWidget'));
 const useStyles = makeStyles()(theme => ({
     root: {
@@ -23,10 +22,6 @@ const useStyles = makeStyles()(theme => ({
         gridTemplateRows: '[menubar] min-content [components] auto',
         height: '100vh',
     },
-    viewContainer: {
-        overflowY: 'auto',
-        gridRow: 'components',
-    },
     appBar: {
         flexGrow: 1,
         gridRow: 'menubar',
@@ -37,14 +32,6 @@ const LazyDrawerWidget = observer(function (props) {
     return (React.createElement(Suspense, { fallback: null },
         React.createElement(DrawerWidget, { session: session })));
 });
-const ViewContainer = observer(function (props) {
-    const { session } = props;
-    const { views } = session;
-    const { classes } = useStyles();
-    return (React.createElement("div", { className: classes.viewContainer },
-        views.length > 0 ? (views.map(view => (React.createElement(ViewPanel, { key: `view-${view.id}`, view: view, session: session })))) : (React.createElement(ViewLauncher, { ...props })),
-        React.createElement("div", { style: { height: 300 } })));
-});
 const App = observer(function (props) {
     const { session } = props;
     const { classes } = useStyles();
@@ -52,13 +39,13 @@ const App = observer(function (props) {
     const drawerVisible = visibleWidget && !minimized;
     const d = drawerVisible ? `[drawer] ${drawerWidth}px` : undefined;
     const grid = drawerPosition === 'right' ? ['[main] 1fr', d] : [d, '[main] 1fr'];
-    return (React.createElement("div", { className: classes.root, style: { gridTemplateColumns: grid === null || grid === void 0 ? void 0 : grid.filter(f => !!f).join(' ') } },
+    return (React.createElement("div", { className: classes.root, style: { gridTemplateColumns: grid.filter(f => !!f).join(' ') } },
         drawerVisible && drawerPosition === 'left' ? (React.createElement(LazyDrawerWidget, { session: session })) : null,
         React.createElement(DialogQueue, { session: session }),
         React.createElement("div", { className: classes.appContainer },
             React.createElement(AppBar, { className: classes.appBar, position: "static" },
                 React.createElement(AppToolbar, { ...props })),
-            React.createElement(ViewContainer, { ...props })),
+            React.createElement(ViewsContainer, { ...props })),
         React.createElement(AppFab, { session: session }),
         drawerVisible && drawerPosition === 'right' ? (React.createElement(LazyDrawerWidget, { session: session })) : null,
         React.createElement(Snackbar, { session: session })));

package/esm/ui/App/AppFab.js

@@ -22,7 +22,9 @@ const AppFab = observer(function ({ session, }) {
     const { minimized, activeWidgets, drawerPosition } = session;
     const { classes } = useStyles();
     return activeWidgets.size > 0 && minimized ? (React.createElement(Tooltip, { title: "Open drawer widget" },
-        React.createElement(Fab, { className: drawerPosition === 'right' ? classes.right : classes.left, color: "primary", "data-testid": "drawer-maximize", onClick: () => session.showWidgetDrawer() },
+        React.createElement(Fab, { className: drawerPosition === 'right' ? classes.right : classes.left, color: "primary", "data-testid": "drawer-maximize", onClick: () => {
+                session.showWidgetDrawer();
+            } },
             React.createElement(LaunchIcon, null)))) : null;
 });
 export default AppFab;

package/esm/ui/App/AppToolbar.d.ts

@@ -3,13 +3,13 @@ import { SessionWithDrawerWidgets } from '@jbrowse/core/util';
 import { MenuItem as JBMenuItem } from '@jbrowse/core/ui/Menu';
 import { SnackbarMessage } from '@jbrowse/core/ui/SnackbarModel';
 type AppSession = SessionWithDrawerWidgets & {
-    savedSessionNames: string[];
     menus: {
         label: string;
         menuItems: JBMenuItem[];
     }[];
-    renameCurrentSession: (arg: string) => void;
+    savedSessionNames?: string[];
     snackbarMessages: SnackbarMessage[];
+    renameCurrentSession: (arg: string) => void;
     popSnackbarMessage: () => unknown;
 };
 declare const AppToolbar: ({ session, HeaderButtons, }: {

package/esm/ui/App/Drawer.js

@@ -26,7 +26,7 @@ const Drawer = observer(function ({ children, session, }) {
     useEffect(() => {
         function handleSelectView(e) {
             var _a, _b, _c;
-            if (e.target instanceof Element && ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+            if (e.target instanceof Element && ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
                 // @ts-ignore
                 const visibleWidgetId = (_c = (_b = session.visibleWidget) === null || _b === void 0 ? void 0 : _b.view) === null || _c === void 0 ? void 0 : _c.id;
                 if (visibleWidgetId) {
@@ -40,7 +40,7 @@ const Drawer = observer(function ({ children, session, }) {
             document.removeEventListener('mousedown', handleSelectView);
             document.removeEventListener('keydown', handleSelectView);
         };
-    }, [ref, session]);
+    }, [session]);
     return (React.createElement(Paper, { ref: ref, className: classes.paper, elevation: 16, square: true },
         drawerPosition === 'right' ? (React.createElement(ResizeHandle, { onDrag: session.resizeDrawer, className: classes.resizeHandle, vertical: true })) : null,
         children,

package/esm/ui/App/DrawerControls.js

@@ -9,7 +9,9 @@ const DrawerControls = observer(function ({ session, }) {
     const [anchorEl, setAnchorEl] = useState(null);
     const { drawerPosition, visibleWidget } = session;
     return (React.createElement(React.Fragment, null,
-        React.createElement(IconButton, { color: "inherit", onClick: event => setAnchorEl(event.currentTarget) },
+        React.createElement(IconButton, { color: "inherit", onClick: event => {
+                setAnchorEl(event.currentTarget);
+            } },
             React.createElement(MoreVertIcon, null)),
         React.createElement(Tooltip, { title: "Minimize drawer" },
             React.createElement(IconButton, { "data-testid": "drawer-minimize", color: "inherit", onClick: () => {
@@ -18,9 +20,13 @@ const DrawerControls = observer(function ({ session, }) {
                 } },
                 React.createElement(MinimizeIcon, null))),
         React.createElement(Tooltip, { title: "Close drawer" },
-            React.createElement(IconButton, { color: "inherit", onClick: () => session.hideWidget(visibleWidget) },
+            React.createElement(IconButton, { color: "inherit", onClick: () => {
+                    session.hideWidget(visibleWidget);
+                } },
                 React.createElement(CloseIcon, null))),
-        React.createElement(Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: () => setAnchorEl(null) }, ['left', 'right'].map(option => (React.createElement(MenuItem, { key: option, selected: drawerPosition === 'option', onClick: () => {
+        React.createElement(Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: () => {
+                setAnchorEl(null);
+            } }, ['left', 'right'].map(option => (React.createElement(MenuItem, { key: option, selected: drawerPosition === 'option', onClick: () => {
                 session.setDrawerPosition(option);
                 setAnchorEl(null);
             } }, option))))));

package/esm/ui/App/DrawerHeader.js

@@ -26,11 +26,15 @@ const DrawerHeader = observer(function ({ session, setToolbarHeight, onPopoutDra
     const viewWidgetId = (_b = (_a = session.visibleWidget) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.id;
     return (React.createElement(AppBar, { position: "sticky", className: focusedViewId === viewWidgetId
             ? classes.headerFocused
-            : classes.headerUnfocused, ref: ref => setToolbarHeight((ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect().height) || 0) },
+            : classes.headerUnfocused, ref: ref => {
+            setToolbarHeight((ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect().height) || 0);
+        } },
         React.createElement(Toolbar, { disableGutters: true },
             React.createElement(DrawerWidgetSelector, { session: session }),
             React.createElement(Tooltip, { title: "Open drawer in dialog" },
-                React.createElement(IconButton, { color: "inherit", onClick: () => onPopoutDrawer() },
+                React.createElement(IconButton, { color: "inherit", onClick: () => {
+                        onPopoutDrawer();
+                    } },
                     React.createElement(LaunchIcon, null))),
             React.createElement("div", { className: classes.spacer }),
             React.createElement(DrawerControls, { session: session }))));

package/esm/ui/App/DrawerWidget.js

@@ -22,11 +22,15 @@ const DrawerWidget = observer(function ({ session, }) {
     const [toolbarHeight, setToolbarHeight] = useState(0);
     const [popoutDrawer, setPopoutDrawer] = useState(false);
     return (React.createElement(Drawer, { session: session },
-        React.createElement(DrawerHeader, { onPopoutDrawer: () => setPopoutDrawer(true), session: session, setToolbarHeight: setToolbarHeight }),
+        React.createElement(DrawerHeader, { onPopoutDrawer: () => {
+                setPopoutDrawer(true);
+            }, session: session, setToolbarHeight: setToolbarHeight }),
         React.createElement(Suspense, { fallback: React.createElement(LoadingEllipses, null) },
             React.createElement(ErrorBoundary, { FallbackComponent: ({ error }) => React.createElement(ErrorMessage, { error: error }) }, DrawerComponent ? (popoutDrawer ? (React.createElement(React.Fragment, null,
                 React.createElement("div", null, "Opened in dialog..."),
-                React.createElement(ModalWidget, { session: session, onClose: () => setPopoutDrawer(false) }))) : (React.createElement(React.Fragment, null,
+                React.createElement(ModalWidget, { session: session, onClose: () => {
+                        setPopoutDrawer(false);
+                    } }))) : (React.createElement(React.Fragment, null,
                 React.createElement(DrawerComponent, { model: visibleWidget, session: session, toolbarHeight: toolbarHeight }),
                 React.createElement("div", { style: { height: 300 } })))) : null))));
 });

package/esm/ui/App/DrawerWidgetSelector.js

@@ -43,7 +43,9 @@ const DrawerWidgetSelector = observer(function ({ session, }) {
             const { HeadingComponent, heading } = widgetType;
             return (React.createElement(MenuItem, { "data-testid": `widget-drawer-selects-item-${widget.type}`, key: widget.id, value: widget.id },
                 HeadingComponent ? (React.createElement(HeadingComponent, { model: widget })) : (React.createElement(Typography, { variant: "h6", color: "inherit" }, heading)),
-                React.createElement(IconButton, { "data-testid": `${widget.type}-drawer-delete`, color: "inherit", "aria-label": "Delete", onClick: () => session.hideWidget(widget) },
+                React.createElement(IconButton, { "data-testid": `${widget.type}-drawer-delete`, color: "inherit", "aria-label": "Delete", onClick: () => {
+                        session.hideWidget(widget);
+                    } },
                     React.createElement(DeleteIcon, null))));
         }))));
 });

package/esm/ui/App/ModalWidget.js

@@ -39,12 +39,10 @@ const ModalWidget = observer(function ({ session, onClose, }) {
         return null;
     }
     const { ReactComponent } = pluginManager.getWidgetType(visibleWidget.type);
-    const Component = visibleWidget
-        ? pluginManager.evaluateExtensionPoint('Core-replaceWidget', ReactComponent, {
-            session,
-            model: visibleWidget,
-        })
-        : null;
+    const Component = pluginManager.evaluateExtensionPoint('Core-replaceWidget', ReactComponent, {
+        session,
+        model: visibleWidget,
+    });
     return (React.createElement(Dialog, { open: true, onClose: onClose, maxWidth: "xl", header: React.createElement(DrawerAppBar, { onClose: onClose, session: session }) }, Component ? (React.createElement(Suspense, { fallback: React.createElement("div", null, "Loading...") },
         React.createElement(Paper, { className: classes.paper },
             React.createElement(Component, { model: visibleWidget, session: session, modal: true, overrideDimensions: {

package/esm/ui/App/ViewContainer.js

@@ -26,7 +26,7 @@ const ViewContainer = observer(function ({ view, onClose, onMinimize, children,
     useEffect(() => {
         function handleSelectView(e) {
             var _a;
-            if (e.target instanceof Element && ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+            if (e.target instanceof Element && ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
                 session.setFocusedViewId(view.id);
             }
         }

package/esm/ui/App/ViewContainerTitle.js

@@ -28,7 +28,9 @@ const ViewContainerTitle = observer(function ({ view, }) {
     return (React.createElement(Tooltip, { title: "Rename view", arrow: true },
         React.createElement(EditableTypography, { value: view.displayName ||
                 // @ts-expect-error
-                `${((_a = view.assemblyNames) === null || _a === void 0 ? void 0 : _a.join(',')) || 'Untitled view'}${view.minimized ? ' (minimized)' : ''}`, setValue: val => view.setDisplayName(val), variant: "body2", classes: {
+                `${((_a = view.assemblyNames) === null || _a === void 0 ? void 0 : _a.join(',')) || 'Untitled view'}${view.minimized ? ' (minimized)' : ''}`, setValue: val => {
+                view.setDisplayName(val);
+            }, variant: "body2", classes: {
                 input: classes.input,
                 inputBase: classes.inputBase,
                 inputRoot: classes.inputRoot,

package/esm/ui/App/ViewHeader.js

@@ -40,8 +40,10 @@ const ViewHeader = observer(function ({ view, onClose, onMinimize, }) {
     // scroll the view into view when first mounted. note: this effect will run
     // only once, because of the empty array second param
     useEffect(() => {
-        var _a, _b;
-        (_b = (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, { block: 'center' });
+        var _a;
+        if (typeof jest === 'undefined') {
+            (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'center' });
+        }
     }, []);
     return (React.createElement("div", { ref: scrollRef, className: classes.viewHeader },
         React.createElement(ViewMenu, { model: view, IconProps: { className: classes.icon } }),

package/esm/ui/App/ViewLauncher.js

@@ -8,18 +8,23 @@ const useStyles = makeStyles()(theme => ({
     selectPaper: {
         padding: theme.spacing(4),
     },
+    m2: {
+        margin: 2,
+    },
 }));
 const ViewLauncher = observer(({ session }) => {
     var _a;
     const { classes } = useStyles();
     const { pluginManager } = getEnv(session);
     const viewTypes = pluginManager.getElementTypeRecord('view').all();
-    const [value, setValue] = useState((_a = viewTypes[0]) === null || _a === void 0 ? void 0 : _a.name);
+    const [value, setValue] = useState(((_a = viewTypes[0]) === null || _a === void 0 ? void 0 : _a.name) || '');
     return (React.createElement(Paper, { className: classes.selectPaper },
         React.createElement(Typography, null, "Select a view to launch"),
-        React.createElement(FormControl, { style: { margin: 2 } },
-            React.createElement(Select, { value: value, onChange: event => setValue(event.target.value) }, viewTypes.map(({ displayName, name }) => (React.createElement(MenuItem, { key: name, value: name }, displayName))))),
-        React.createElement(FormControl, { style: { margin: 2 } },
+        React.createElement(FormControl, { className: classes.m2 },
+            React.createElement(Select, { value: value, onChange: event => {
+                    setValue(event.target.value);
+                } }, viewTypes.map(({ displayName, name }) => (React.createElement(MenuItem, { key: name, value: name }, displayName))))),
+        React.createElement(FormControl, { className: classes.m2 },
             React.createElement(Button, { onClick: () => session.addView(value, {}), variant: "contained", color: "primary" }, "Launch view"))));
 });
 export default ViewLauncher;

package/esm/ui/App/ViewMenu.js

@@ -11,7 +11,6 @@ import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 const ViewMenu = observer(function ({ model, IconButtonProps, IconProps, }) {
-    const { menuItems } = model;
     const session = getSession(model);
     const popupState = usePopupState({
         popupId: 'viewMenu',
@@ -21,12 +20,14 @@ const ViewMenu = observer(function ({ model, IconButtonProps, IconProps, }) {
     // a confusing bug related to it! see
     // https://github.com/GMOD/jbrowse-components/issues/4115
     //
-    // Make sure to test the Breakpoint split view menu checkboxes if you
-    // intend to change this
+    // Make sure to test the Breakpoint split view menu checkboxes if you intend
+    // to change this
     return (React.createElement(React.Fragment, null,
         React.createElement(IconButton, { ...IconButtonProps, ...bindTrigger(popupState), "data-testid": "view_menu_icon" },
             React.createElement(MenuIcon, { ...IconProps, fontSize: "small" })),
-        React.createElement(CascadingMenu, { ...bindPopover(popupState), onMenuItemClick: (_event, callback) => callback(), menuItems: [
+        React.createElement(CascadingMenu, { ...bindPopover(popupState), onMenuItemClick: (_event, callback) => {
+                callback();
+            }, menuItems: [
                 ...(session.views.length > 1
                     ? [
                         {
@@ -36,30 +37,36 @@ const ViewMenu = observer(function ({ model, IconButtonProps, IconProps, }) {
                                 {
                                     label: 'Move view to top',
                                     icon: KeyboardDoubleArrowUpIcon,
-                                    onClick: () => session.moveViewToTop(model.id),
+                                    onClick: () => {
+                                        session.moveViewToTop(model.id);
+                                    },
                                 },
                                 {
                                     label: 'Move view up',
                                     icon: KeyboardArrowUpIcon,
-                                    onClick: () => session.moveViewUp(model.id),
+                                    onClick: () => {
+                                        session.moveViewUp(model.id);
+                                    },
                                 },
                                 {
                                     label: 'Move view down',
                                     icon: KeyboardArrowDownIcon,
-                                    onClick: () => session.moveViewDown(model.id),
+                                    onClick: () => {
+                                        session.moveViewDown(model.id);
+                                    },
                                 },
                                 {
                                     label: 'Move view to bottom',
                                     icon: KeyboardDoubleArrowDownIcon,
-                                    onClick: () => session.moveViewToBottom(model.id),
+                                    onClick: () => {
+                                        session.moveViewToBottom(model.id);
+                                    },
                                 },
                             ],
                         },
                     ]
                     : []),
-                // <=1.3.3 didn't use a function, so check as value also
-                ...((typeof menuItems === 'function' ? menuItems() : menuItems) ||
-                    []),
+                ...model.menuItems(),
             ], popupState: popupState })));
 });
 export default ViewMenu;

package/esm/ui/App/ViewPanel.js

@@ -15,7 +15,11 @@ const ViewPanel = observer(function ({ view, session, }) {
         throw new Error(`unknown view type ${view.type}`);
     }
     const { ReactComponent } = viewType;
-    return (React.createElement(ViewContainer, { view: view, onClose: () => session.removeView(view), onMinimize: () => view.setMinimized(!view.minimized) }, !view.minimized ? (React.createElement(ErrorBoundary, { FallbackComponent: ({ error }) => React.createElement(ErrorMessage, { error: error }) },
+    return (React.createElement(ViewContainer, { view: view, onClose: () => {
+            session.removeView(view);
+        }, onMinimize: () => {
+            view.setMinimized(!view.minimized);
+        } }, !view.minimized ? (React.createElement(ErrorBoundary, { FallbackComponent: ({ error }) => React.createElement(ErrorMessage, { error: error }) },
         React.createElement(Suspense, { fallback: React.createElement(LoadingEllipses, { variant: "h6" }) },
             React.createElement(ReactComponent, { model: view, session: session })))) : (false)));
 });

package/esm/ui/App/ViewsContainer.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util';
+import { SnackbarMessage } from '@jbrowse/core/ui/SnackbarModel';
+import { MenuItem as JBMenuItem } from '@jbrowse/core/ui/Menu';
+interface Props {
+    HeaderButtons?: React.ReactElement;
+    session: SessionWithFocusedViewAndDrawerWidgets & {
+        savedSessionNames: string[];
+        menus: {
+            label: string;
+            menuItems: JBMenuItem[];
+        }[];
+        renameCurrentSession: (arg: string) => void;
+        snackbarMessages: SnackbarMessage[];
+        popSnackbarMessage: () => unknown;
+    };
+}
+declare const ViewsContainer: (props: Props) => React.JSX.Element;
+export default ViewsContainer;

package/esm/ui/App/ViewsContainer.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { makeStyles } from 'tss-react/mui';
+import { observer } from 'mobx-react';
+// locals
+import ViewLauncher from './ViewLauncher';
+import ViewPanel from './ViewPanel';
+const useStyles = makeStyles()({
+    viewsContainer: {
+        overflowY: 'auto',
+        gridRow: 'components',
+    },
+});
+const ViewsContainer = observer(function ViewsContainer(props) {
+    const { session } = props;
+    const { views } = session;
+    const { classes } = useStyles();
+    return (React.createElement("div", { className: classes.viewsContainer },
+        views.length > 0 ? (views.map(view => (React.createElement(ViewPanel, { key: `view-${view.id}`, view: view, session: session })))) : (React.createElement(ViewLauncher, { ...props })),
+        React.createElement("div", { style: { height: 300 } })));
+});
+export default ViewsContainer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/app-core",
-  "version": "2.13.1",
+  "version": "2.15.0",
   "description": "JBrowse 2 code shared between the 'full featured' apps e.g. jbrowse-web and jbrowse-desktop",
   "keywords": [
     "jbrowse",
@@ -32,7 +32,7 @@
     "build:esm": "tsc --build tsconfig.build.esm.json",
     "build:commonjs": "tsc --build tsconfig.build.commonjs.json",
     "build": "npm run build:esm && npm run build:commonjs",
-    "test": "cd ../..; jest packages/app-core",
+    "test": "cd ../..; jest --passWithNoTests packages/app-core",
     "clean": "rimraf dist esm *.tsbuildinfo",
     "prebuild": "yarn clean",
     "prepack": "yarn build && yarn useDist",
@@ -42,9 +42,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@jbrowse/product-core": "^2.13.1",
-    "@mui/icons-material": "^5.0.0",
-    "@mui/material": "^5.10.17",
+    "@jbrowse/product-core": "^2.15.0",
+    "@mui/icons-material": "^6.0.0",
+    "@mui/material": "^6.0.0",
     "copy-to-clipboard": "^3.3.1",
     "react-error-boundary": "^4.0.3"
   },
@@ -60,5 +60,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "fcebca71cc1d066654603e1a9accfa6c6d4f764d"
+  "gitHead": "87eeb1fbf8311dbf88d5e75b5a265f03beffdda8"
 }