@jbrowse/app-core 2.11.2 → 2.12.1

package/dist/AppFocus/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AppFocusMixin = void 0;
+exports.AppFocusMixin = AppFocusMixin;
 const mobx_state_tree_1 = require("mobx-state-tree");
 /**
  * #stateModel AppFocusMixin
@@ -24,4 +24,3 @@ function AppFocusMixin() {
         },
     }));
 }
-exports.AppFocusMixin = AppFocusMixin;

package/dist/Assemblies/SessionAssembliesMixin.d.ts

@@ -40,7 +40,13 @@ export declare function SessionAssembliesMixin(pluginManager: PluginManager, ass
     addSessionAssembly(conf: AnyConfiguration): {
         [x: string]: any;
     } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
-        setSubschema(slotName: string, data: unknown): any;
+        setSubschema(slotName: string, data: Record<string, unknown>): Record<string, unknown> | ({
+            [x: string]: any;
+        } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
+            setSubschema(slotName: string, data: Record<string, unknown>): Record<string, unknown> | ({
+                [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/configurationSchema").ConfigurationSchemaType<{
         aliases: {
             type: string;

package/dist/Assemblies/SessionAssembliesMixin.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SessionAssembliesMixin = void 0;
+exports.SessionAssembliesMixin = SessionAssembliesMixin;
 const mobx_state_tree_1 = require("mobx-state-tree");
 /**
  * #stateModel SessionAssembliesMixin
@@ -41,4 +41,3 @@ function SessionAssembliesMixin(pluginManager, assemblyConfigSchemasType) {
         };
     });
 }
-exports.SessionAssembliesMixin = SessionAssembliesMixin;

package/dist/Assemblies/TemporaryAssembliesMixin.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TemporaryAssembliesMixin = void 0;
+exports.TemporaryAssembliesMixin = TemporaryAssembliesMixin;
 const mobx_state_tree_1 = require("mobx-state-tree");
 /**
  * #stateModel TemporaryAssembliesMixin
@@ -42,4 +42,3 @@ function TemporaryAssembliesMixin(pluginManager, assemblyConfigSchemasType = mob
         };
     });
 }
-exports.TemporaryAssembliesMixin = TemporaryAssembliesMixin;

package/dist/HistoryManagement/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HistoryManagementMixin = void 0;
+exports.HistoryManagementMixin = HistoryManagementMixin;
 const TimeTraveller_1 = __importDefault(require("@jbrowse/core/util/TimeTraveller"));
 const mobx_1 = require("mobx");
 const mobx_state_tree_1 = require("mobx-state-tree");
@@ -54,4 +54,3 @@ function HistoryManagementMixin() {
         },
     }));
 }
-exports.HistoryManagementMixin = HistoryManagementMixin;

package/dist/JBrowseConfig/index.d.ts

@@ -35,7 +35,9 @@ export declare function JBrowseConfigF({ pluginManager, assemblyConfigSchema, }:
                 description: string;
                 defaultValue: string;
             };
-            drivers: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IMapType<import("mobx-state-tree").ITypeUnion<import("mobx-state-tree").ModelCreationType<import("mobx-state-tree/dist/internal").ExtractCFromProps<Record<string, any>>> | undefined, import("mobx-state-tree").ModelSnapshotType<Record<string, any>>, (Partial<import("mobx-state-tree/dist/internal").ExtractCFromProps<Record<string, any>>> & import("mobx-state-tree/dist/internal").NonEmptyObject) | undefined>>, [undefined]>;
+            drivers: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IMapType<import("mobx-state-tree").ITypeUnion<import("mobx-state-tree").ModelCreationType<import("mobx-state-tree/dist/internal").ExtractCFromProps<Record<string, any>>> | undefined, import("mobx-state-tree").ModelSnapshotType<Record<string, any>>, ({} & Partial<import("mobx-state-tree/dist/internal").ExtractCFromProps<Record<string, any>>> & import("mobx-state-tree/dist/internal" /**
+             * #slot configuration.highResolutionScaling
+             */).NonEmptyObject) | undefined>>, [undefined]>;
         }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
         /**
          * #slot configuration.highResolutionScaling

package/dist/JBrowseConfig/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.JBrowseConfigF = void 0;
+exports.JBrowseConfigF = JBrowseConfigF;
 const configuration_1 = require("@jbrowse/core/configuration");
 const RpcManager_1 = __importDefault(require("@jbrowse/core/rpc/RpcManager"));
 const product_core_1 = require("@jbrowse/product-core");
@@ -131,4 +131,3 @@ function JBrowseConfigF({ pluginManager, assemblyConfigSchema, }) {
         }),
     });
 }
-exports.JBrowseConfigF = JBrowseConfigF;

package/dist/JBrowseModel/index.d.ts

@@ -25,7 +25,7 @@ export declare function JBrowseModelF({ pluginManager, assemblyConfigSchema, }:
                 description: string;
                 defaultValue: string;
             };
-            drivers: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IMapType<import("mobx-state-tree").ITypeUnion<import("mobx-state-tree").ModelCreationType<import("mobx-state-tree/dist/internal").ExtractCFromProps<Record<string, any>>> | undefined, import("mobx-state-tree").ModelSnapshotType<Record<string, any>>, (Partial<import("mobx-state-tree/dist/internal").ExtractCFromProps<Record<string, any>>> & import("mobx-state-tree/dist/internal").NonEmptyObject) | undefined>>, [undefined]>;
+            drivers: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IMapType<import("mobx-state-tree").ITypeUnion<import("mobx-state-tree").ModelCreationType<import("mobx-state-tree/dist/internal").ExtractCFromProps<Record<string, any>>> | undefined, import("mobx-state-tree").ModelSnapshotType<Record<string, any>>, ({} & Partial<import("mobx-state-tree/dist/internal").ExtractCFromProps<Record<string, any>>> & import("mobx-state-tree/dist/internal").NonEmptyObject) | undefined>>, [undefined]>;
         }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
         highResolutionScaling: {
             type: string;
@@ -96,9 +96,7 @@ export declare function JBrowseModelF({ pluginManager, assemblyConfigSchema, }:
                     defaultValue: boolean;
                 };
                 subCategories: {
-                    type: string; /**
-                     * #getter
-                     */
+                    type: string;
                     defaultValue: boolean;
                 };
             }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
@@ -142,7 +140,13 @@ export declare function JBrowseModelF({ pluginManager, assemblyConfigSchema, }:
     addAssemblyConf(conf: AnyConfigurationModel): {
         [x: string]: any;
     } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
-        setSubschema(slotName: string, data: unknown): any;
+        setSubschema(slotName: string, data: Record<string, unknown>): Record<string, unknown> | ({
+            [x: string]: any;
+        } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
+            setSubschema(slotName: string, data: Record<string, unknown>): Record<string, unknown> | ({
+                [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>;
     /**
      * #action

package/dist/JBrowseModel/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.JBrowseModelF = void 0;
+exports.JBrowseModelF = JBrowseModelF;
 const mobx_state_tree_1 = require("mobx-state-tree");
 const configuration_1 = require("@jbrowse/core/configuration");
 const mobx_1 = require("mobx");
@@ -155,4 +155,3 @@ function JBrowseModelF({ pluginManager, assemblyConfigSchema, }) {
         },
     }));
 }
-exports.JBrowseModelF = JBrowseModelF;

package/dist/RootMenu/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RootAppMenuMixin = void 0;
+exports.RootAppMenuMixin = RootAppMenuMixin;
 const mobx_state_tree_1 = require("mobx-state-tree");
 /**
  * #stateModel RootAppMenuMixin
@@ -161,4 +161,3 @@ function RootAppMenuMixin() {
         };
     });
 }
-exports.RootAppMenuMixin = RootAppMenuMixin;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util/types';
+declare const DrawerControls: ({ session, }: {
+    session: SessionWithFocusedViewAndDrawerWidgets;
+}) => React.JSX.Element;
+export default DrawerControls;

package/dist/ui/App/DrawerControls.js

@@ -0,0 +1,56 @@
+"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 material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+// icons
+const Close_1 = __importDefault(require("@mui/icons-material/Close"));
+const Minimize_1 = __importDefault(require("@mui/icons-material/Minimize"));
+const MoreVert_1 = __importDefault(require("@mui/icons-material/MoreVert"));
+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(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: () => {
+                    session.notify(`Drawer minimized, click button on ${drawerPosition} side of screen to re-open`, 'info');
+                    session.minimizeWidgetDrawer();
+                } },
+                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(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: () => {
+                session.setDrawerPosition(option);
+                setAnchorEl(null);
+            } }, option))))));
+});
+exports.default = DrawerControls;

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util/types';
-declare const DrawerHeader: ({ session, setToolbarHeight, }: {
+declare const DrawerHeader: ({ session, setToolbarHeight, onPopoutDrawer, }: {
     session: SessionWithFocusedViewAndDrawerWidgets;
     setToolbarHeight: (arg: number) => void;
+    onPopoutDrawer: () => void;
 }) => React.JSX.Element;
 export default DrawerHeader;

package/dist/ui/App/DrawerHeader.js

@@ -1,55 +1,21 @@
 "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 mobx_react_1 = require("mobx-react");
-const util_1 = require("@jbrowse/core/util");
+// locals
+const DrawerWidgetSelector_1 = __importDefault(require("./DrawerWidgetSelector"));
+const DrawerControls_1 = __importDefault(require("./DrawerControls"));
 // icons
-const Delete_1 = __importDefault(require("@mui/icons-material/Delete"));
-const Close_1 = __importDefault(require("@mui/icons-material/Close"));
-const Minimize_1 = __importDefault(require("@mui/icons-material/Minimize"));
-const MoreVert_1 = __importDefault(require("@mui/icons-material/MoreVert"));
+const Launch_1 = __importDefault(require("@mui/icons-material/Launch"));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
-    formControl: {
-        margin: 0,
-    },
     spacer: {
         flexGrow: 1,
     },
-    drawerSelect: {
-        margin: 0,
-        color: theme.palette.secondary.contrastText,
-    },
-    dropDownIcon: {
-        color: theme.palette.secondary.contrastText,
-    },
     headerFocused: {
         background: theme.palette.secondary.main,
     },
@@ -57,7 +23,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         background: theme.palette.secondary.dark,
     },
 }));
-const DrawerHeader = (0, mobx_react_1.observer)(function ({ session, setToolbarHeight, }) {
+const DrawerHeader = (0, mobx_react_1.observer)(function ({ session, setToolbarHeight, onPopoutDrawer, }) {
     var _a, _b;
     const { classes } = useStyles();
     const focusedViewId = session.focusedViewId;
@@ -67,58 +33,11 @@ const DrawerHeader = (0, mobx_react_1.observer)(function ({ session, setToolbarH
             ? classes.headerFocused
             : 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, { session: session }),
+            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(Launch_1.default, null))),
             react_1.default.createElement("div", { className: classes.spacer }),
-            react_1.default.createElement(DrawerControls, { session: session }))));
-});
-const DrawerWidgetSelector = (0, mobx_react_1.observer)(function ({ session, }) {
-    const { visibleWidget, activeWidgets } = session;
-    const { classes } = useStyles();
-    const { pluginManager } = (0, util_1.getEnv)(session);
-    return (react_1.default.createElement(material_1.FormControl, { className: classes.formControl },
-        react_1.default.createElement(material_1.Select, { value: visibleWidget === null || visibleWidget === void 0 ? void 0 : visibleWidget.id, "data-testid": "widget-drawer-selects", className: classes.drawerSelect, classes: { icon: classes.dropDownIcon }, renderValue: widgetId => {
-                const widget = session.activeWidgets.get(widgetId);
-                if (!widget) {
-                    return (react_1.default.createElement(material_1.Typography, { variant: "h6", color: "inherit" }, "Unknown widget"));
-                }
-                const widgetType = pluginManager.getWidgetType(widget.type);
-                const { HeadingComponent, heading } = widgetType;
-                return HeadingComponent ? (react_1.default.createElement(HeadingComponent, { model: widget })) : (react_1.default.createElement(material_1.Typography, { variant: "h6", color: "inherit" }, heading));
-            }, onChange: e => {
-                const w = session.activeWidgets.get(e.target.value);
-                if (w) {
-                    session.showWidget(w);
-                }
-                else {
-                    session.notify(`Widget not found ${e.target.value}`, 'warning');
-                }
-            } }, [...activeWidgets.values()].map(widget => {
-            const widgetType = pluginManager.getWidgetType(widget.type);
-            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(Delete_1.default, null))));
-        }))));
-});
-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(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: () => {
-                    session.notify(`Drawer minimized, click button on ${drawerPosition} side of screen to re-open`, 'info');
-                    session.minimizeWidgetDrawer();
-                } },
-                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(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: () => {
-                session.setDrawerPosition(option);
-                setAnchorEl(null);
-            } }, option))))));
+            react_1.default.createElement(DrawerControls_1.default, { session: session }))));
 });
 exports.default = DrawerHeader;

package/dist/ui/App/DrawerWidget.js

@@ -30,11 +30,11 @@ const react_1 = __importStar(require("react"));
 const react_error_boundary_1 = require("react-error-boundary");
 const mobx_react_1 = require("mobx-react");
 const util_1 = require("@jbrowse/core/util");
-const LoadingEllipses_1 = __importDefault(require("@jbrowse/core/ui/LoadingEllipses"));
-const ErrorMessage_1 = __importDefault(require("@jbrowse/core/ui/ErrorMessage"));
+const ui_1 = require("@jbrowse/core/ui");
 // locals
 const Drawer_1 = __importDefault(require("./Drawer"));
 const DrawerHeader_1 = __importDefault(require("./DrawerHeader"));
+const ModalWidget = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./ModalWidget'))));
 const DrawerWidget = (0, mobx_react_1.observer)(function ({ session, }) {
     const { visibleWidget } = session;
     const { pluginManager } = (0, util_1.getEnv)(session);
@@ -48,11 +48,14 @@ const DrawerWidget = (0, mobx_react_1.observer)(function ({ session, }) {
     // height want to be able to fill the contained, minus the toolbar height
     // (the position static/sticky is included in AutoSizer estimates)
     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, { session: session, setToolbarHeight: setToolbarHeight }),
-        react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement(LoadingEllipses_1.default, null) },
-            react_1.default.createElement(react_error_boundary_1.ErrorBoundary, { FallbackComponent: ({ error }) => react_1.default.createElement(ErrorMessage_1.default, { error: error }) }, DrawerComponent ? (react_1.default.createElement(react_1.default.Fragment, null,
+        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(DrawerComponent, { model: visibleWidget, session: session, toolbarHeight: toolbarHeight }),
-                react_1.default.createElement("div", { style: { height: 300 } }))) : null))));
+                react_1.default.createElement("div", { style: { height: 300 } })))) : null))));
 });
 exports.default = DrawerWidget;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util/types';
+declare const DrawerWidgetSelector: ({ session, }: {
+    session: SessionWithFocusedViewAndDrawerWidgets;
+}) => React.JSX.Element;
+export default DrawerWidgetSelector;

package/dist/ui/App/DrawerWidgetSelector.js

@@ -0,0 +1,55 @@
+"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 material_1 = require("@mui/material");
+const mui_1 = require("tss-react/mui");
+const mobx_react_1 = require("mobx-react");
+const util_1 = require("@jbrowse/core/util");
+// icons
+const Delete_1 = __importDefault(require("@mui/icons-material/Delete"));
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    formControl: {
+        margin: 0,
+    },
+    drawerSelect: {
+        margin: 0,
+        color: theme.palette.secondary.contrastText,
+    },
+    dropDownIcon: {
+        color: theme.palette.secondary.contrastText,
+    },
+}));
+const DrawerWidgetSelector = (0, mobx_react_1.observer)(function ({ session, }) {
+    const { visibleWidget, activeWidgets } = session;
+    const { classes } = useStyles();
+    const { pluginManager } = (0, util_1.getEnv)(session);
+    return (react_1.default.createElement(material_1.FormControl, { className: classes.formControl },
+        react_1.default.createElement(material_1.Select, { value: visibleWidget === null || visibleWidget === void 0 ? void 0 : visibleWidget.id, "data-testid": "widget-drawer-selects", className: classes.drawerSelect, classes: { icon: classes.dropDownIcon }, renderValue: widgetId => {
+                const widget = session.activeWidgets.get(widgetId);
+                if (!widget) {
+                    return (react_1.default.createElement(material_1.Typography, { variant: "h6", color: "inherit" }, "Unknown widget"));
+                }
+                const widgetType = pluginManager.getWidgetType(widget.type);
+                const { HeadingComponent, heading } = widgetType;
+                return HeadingComponent ? (react_1.default.createElement(HeadingComponent, { model: widget })) : (react_1.default.createElement(material_1.Typography, { variant: "h6", color: "inherit" }, heading));
+            }, onChange: e => {
+                const w = session.activeWidgets.get(e.target.value);
+                if (w) {
+                    session.showWidget(w);
+                }
+                else {
+                    session.notify(`Widget not found ${e.target.value}`, 'warning');
+                }
+            } }, [...activeWidgets.values()].map(widget => {
+            const widgetType = pluginManager.getWidgetType(widget.type);
+            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(Delete_1.default, null))));
+        }))));
+});
+exports.default = DrawerWidgetSelector;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { SessionWithWidgets } from '@jbrowse/core/util';
+declare const ModalWidget: ({ session, onClose, }: {
+    session: SessionWithWidgets;
+    onClose: () => void;
+}) => React.JSX.Element | null;
+export default ModalWidget;

package/dist/ui/App/ModalWidget.js

@@ -0,0 +1,83 @@
+"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 material_1 = require("@mui/material");
+const ui_1 = require("@jbrowse/core/ui");
+const mui_1 = require("tss-react/mui");
+const mobx_react_1 = require("mobx-react");
+const mobx_state_tree_1 = require("mobx-state-tree");
+// icons
+const Close_1 = __importDefault(require("@mui/icons-material/Close"));
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    paper: {
+        overflow: 'auto',
+        minWidth: 800,
+    },
+    closeButton: {
+        position: 'absolute',
+        right: theme.spacing(1),
+        top: theme.spacing(1),
+        color: theme.palette.grey[500],
+    },
+}));
+const DrawerAppBar = (0, mobx_react_1.observer)(function DrawerAppBar({ session, onClose, }) {
+    const { classes } = useStyles();
+    const { visibleWidget } = session;
+    const { pluginManager } = (0, mobx_state_tree_1.getEnv)(session);
+    if (!visibleWidget) {
+        return null;
+    }
+    const { HeadingComponent, heading } = pluginManager.getWidgetType(visibleWidget.type);
+    return (react_1.default.createElement(material_1.AppBar, { position: "static" },
+        react_1.default.createElement(material_1.Toolbar, null, HeadingComponent ? (react_1.default.createElement(HeadingComponent, { model: visibleWidget })) : (react_1.default.createElement(material_1.Typography, { variant: "h6" }, heading))),
+        react_1.default.createElement(material_1.IconButton, { className: classes.closeButton, onClick: onClose },
+            react_1.default.createElement(Close_1.default, null))));
+});
+const ModalWidget = (0, mobx_react_1.observer)(function ({ session, onClose, }) {
+    const { classes } = useStyles();
+    const { visibleWidget } = session;
+    const { pluginManager } = (0, mobx_state_tree_1.getEnv)(session);
+    if (!visibleWidget) {
+        return null;
+    }
+    const { ReactComponent } = pluginManager.getWidgetType(visibleWidget.type);
+    const Component = visibleWidget
+        ? pluginManager.evaluateExtensionPoint('Core-replaceWidget', ReactComponent, {
+            session,
+            model: visibleWidget,
+        })
+        : null;
+    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: {
+                    height: (window.innerHeight * 5) / 8,
+                    width: 800,
+                } })))) : null));
+});
+exports.default = ModalWidget;

package/esm/Assemblies/SessionAssembliesMixin.d.ts

@@ -40,7 +40,13 @@ export declare function SessionAssembliesMixin(pluginManager: PluginManager, ass
     addSessionAssembly(conf: AnyConfiguration): {
         [x: string]: any;
     } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
-        setSubschema(slotName: string, data: unknown): any;
+        setSubschema(slotName: string, data: Record<string, unknown>): Record<string, unknown> | ({
+            [x: string]: any;
+        } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
+            setSubschema(slotName: string, data: Record<string, unknown>): Record<string, unknown> | ({
+                [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/configurationSchema").ConfigurationSchemaType<{
         aliases: {
             type: string;

package/esm/JBrowseConfig/index.d.ts

@@ -35,7 +35,9 @@ export declare function JBrowseConfigF({ pluginManager, assemblyConfigSchema, }:
                 description: string;
                 defaultValue: string;
             };
-            drivers: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IMapType<import("mobx-state-tree").ITypeUnion<import("mobx-state-tree").ModelCreationType<import("mobx-state-tree/dist/internal").ExtractCFromProps<Record<string, any>>> | undefined, import("mobx-state-tree").ModelSnapshotType<Record<string, any>>, (Partial<import("mobx-state-tree/dist/internal").ExtractCFromProps<Record<string, any>>> & import("mobx-state-tree/dist/internal").NonEmptyObject) | undefined>>, [undefined]>;
+            drivers: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IMapType<import("mobx-state-tree").ITypeUnion<import("mobx-state-tree").ModelCreationType<import("mobx-state-tree/dist/internal").ExtractCFromProps<Record<string, any>>> | undefined, import("mobx-state-tree").ModelSnapshotType<Record<string, any>>, ({} & Partial<import("mobx-state-tree/dist/internal").ExtractCFromProps<Record<string, any>>> & import("mobx-state-tree/dist/internal" /**
+             * #slot configuration.highResolutionScaling
+             */).NonEmptyObject) | undefined>>, [undefined]>;
         }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
         /**
          * #slot configuration.highResolutionScaling

package/esm/JBrowseModel/index.d.ts

@@ -25,7 +25,7 @@ export declare function JBrowseModelF({ pluginManager, assemblyConfigSchema, }:
                 description: string;
                 defaultValue: string;
             };
-            drivers: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IMapType<import("mobx-state-tree").ITypeUnion<import("mobx-state-tree").ModelCreationType<import("mobx-state-tree/dist/internal").ExtractCFromProps<Record<string, any>>> | undefined, import("mobx-state-tree").ModelSnapshotType<Record<string, any>>, (Partial<import("mobx-state-tree/dist/internal").ExtractCFromProps<Record<string, any>>> & import("mobx-state-tree/dist/internal").NonEmptyObject) | undefined>>, [undefined]>;
+            drivers: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IMapType<import("mobx-state-tree").ITypeUnion<import("mobx-state-tree").ModelCreationType<import("mobx-state-tree/dist/internal").ExtractCFromProps<Record<string, any>>> | undefined, import("mobx-state-tree").ModelSnapshotType<Record<string, any>>, ({} & Partial<import("mobx-state-tree/dist/internal").ExtractCFromProps<Record<string, any>>> & import("mobx-state-tree/dist/internal").NonEmptyObject) | undefined>>, [undefined]>;
         }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
         highResolutionScaling: {
             type: string;
@@ -96,9 +96,7 @@ export declare function JBrowseModelF({ pluginManager, assemblyConfigSchema, }:
                     defaultValue: boolean;
                 };
                 subCategories: {
-                    type: string; /**
-                     * #getter
-                     */
+                    type: string;
                     defaultValue: boolean;
                 };
             }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
@@ -142,7 +140,13 @@ export declare function JBrowseModelF({ pluginManager, assemblyConfigSchema, }:
     addAssemblyConf(conf: AnyConfigurationModel): {
         [x: string]: any;
     } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
-        setSubschema(slotName: string, data: unknown): any;
+        setSubschema(slotName: string, data: Record<string, unknown>): Record<string, unknown> | ({
+            [x: string]: any;
+        } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
+            setSubschema(slotName: string, data: Record<string, unknown>): Record<string, unknown> | ({
+                [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>;
     /**
      * #action

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util/types';
+declare const DrawerControls: ({ session, }: {
+    session: SessionWithFocusedViewAndDrawerWidgets;
+}) => React.JSX.Element;
+export default DrawerControls;

package/esm/ui/App/DrawerControls.js

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import { IconButton, Menu, MenuItem, Tooltip } from '@mui/material';
+import { observer } from 'mobx-react';
+// icons
+import CloseIcon from '@mui/icons-material/Close';
+import MinimizeIcon from '@mui/icons-material/Minimize';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+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(MoreVertIcon, null)),
+        React.createElement(Tooltip, { title: "Minimize drawer" },
+            React.createElement(IconButton, { "data-testid": "drawer-minimize", color: "inherit", onClick: () => {
+                    session.notify(`Drawer minimized, click button on ${drawerPosition} side of screen to re-open`, 'info');
+                    session.minimizeWidgetDrawer();
+                } },
+                React.createElement(MinimizeIcon, null))),
+        React.createElement(Tooltip, { title: "Close drawer" },
+            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: () => {
+                session.setDrawerPosition(option);
+                setAnchorEl(null);
+            } }, option))))));
+});
+export default DrawerControls;

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util/types';
-declare const DrawerHeader: ({ session, setToolbarHeight, }: {
+declare const DrawerHeader: ({ session, setToolbarHeight, onPopoutDrawer, }: {
     session: SessionWithFocusedViewAndDrawerWidgets;
     setToolbarHeight: (arg: number) => void;
+    onPopoutDrawer: () => void;
 }) => React.JSX.Element;
 export default DrawerHeader;

package/esm/ui/App/DrawerHeader.js

@@ -1,27 +1,16 @@
-import React, { useState } from 'react';
-import { AppBar, FormControl, IconButton, Menu, MenuItem, Select, Toolbar, Tooltip, Typography, } from '@mui/material';
+import React from 'react';
+import { AppBar, IconButton, Toolbar, Tooltip } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
 import { observer } from 'mobx-react';
-import { getEnv } from '@jbrowse/core/util';
+// locals
+import DrawerWidgetSelector from './DrawerWidgetSelector';
+import DrawerControls from './DrawerControls';
 // icons
-import DeleteIcon from '@mui/icons-material/Delete';
-import CloseIcon from '@mui/icons-material/Close';
-import MinimizeIcon from '@mui/icons-material/Minimize';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
+import LaunchIcon from '@mui/icons-material/Launch';
 const useStyles = makeStyles()(theme => ({
-    formControl: {
-        margin: 0,
-    },
     spacer: {
         flexGrow: 1,
     },
-    drawerSelect: {
-        margin: 0,
-        color: theme.palette.secondary.contrastText,
-    },
-    dropDownIcon: {
-        color: theme.palette.secondary.contrastText,
-    },
     headerFocused: {
         background: theme.palette.secondary.main,
     },
@@ -29,7 +18,7 @@ const useStyles = makeStyles()(theme => ({
         background: theme.palette.secondary.dark,
     },
 }));
-const DrawerHeader = observer(function ({ session, setToolbarHeight, }) {
+const DrawerHeader = observer(function ({ session, setToolbarHeight, onPopoutDrawer, }) {
     var _a, _b;
     const { classes } = useStyles();
     const focusedViewId = session.focusedViewId;
@@ -40,57 +29,10 @@ const DrawerHeader = observer(function ({ session, setToolbarHeight, }) {
             : 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(LaunchIcon, null))),
             React.createElement("div", { className: classes.spacer }),
             React.createElement(DrawerControls, { session: session }))));
 });
-const DrawerWidgetSelector = observer(function ({ session, }) {
-    const { visibleWidget, activeWidgets } = session;
-    const { classes } = useStyles();
-    const { pluginManager } = getEnv(session);
-    return (React.createElement(FormControl, { className: classes.formControl },
-        React.createElement(Select, { value: visibleWidget === null || visibleWidget === void 0 ? void 0 : visibleWidget.id, "data-testid": "widget-drawer-selects", className: classes.drawerSelect, classes: { icon: classes.dropDownIcon }, renderValue: widgetId => {
-                const widget = session.activeWidgets.get(widgetId);
-                if (!widget) {
-                    return (React.createElement(Typography, { variant: "h6", color: "inherit" }, "Unknown widget"));
-                }
-                const widgetType = pluginManager.getWidgetType(widget.type);
-                const { HeadingComponent, heading } = widgetType;
-                return HeadingComponent ? (React.createElement(HeadingComponent, { model: widget })) : (React.createElement(Typography, { variant: "h6", color: "inherit" }, heading));
-            }, onChange: e => {
-                const w = session.activeWidgets.get(e.target.value);
-                if (w) {
-                    session.showWidget(w);
-                }
-                else {
-                    session.notify(`Widget not found ${e.target.value}`, 'warning');
-                }
-            } }, [...activeWidgets.values()].map(widget => {
-            const widgetType = pluginManager.getWidgetType(widget.type);
-            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(DeleteIcon, null))));
-        }))));
-});
-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(MoreVertIcon, null)),
-        React.createElement(Tooltip, { title: "Minimize drawer" },
-            React.createElement(IconButton, { "data-testid": "drawer-minimize", color: "inherit", onClick: () => {
-                    session.notify(`Drawer minimized, click button on ${drawerPosition} side of screen to re-open`, 'info');
-                    session.minimizeWidgetDrawer();
-                } },
-                React.createElement(MinimizeIcon, null))),
-        React.createElement(Tooltip, { title: "Close drawer" },
-            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: () => {
-                session.setDrawerPosition(option);
-                setAnchorEl(null);
-            } }, option))))));
-});
 export default DrawerHeader;

package/esm/ui/App/DrawerWidget.js

@@ -1,12 +1,12 @@
-import React, { Suspense, useState } from 'react';
+import React, { Suspense, lazy, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { observer } from 'mobx-react';
 import { getEnv } from '@jbrowse/core/util';
-import LoadingEllipses from '@jbrowse/core/ui/LoadingEllipses';
-import ErrorMessage from '@jbrowse/core/ui/ErrorMessage';
+import { ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui';
 // locals
 import Drawer from './Drawer';
 import DrawerHeader from './DrawerHeader';
+const ModalWidget = lazy(() => import('./ModalWidget'));
 const DrawerWidget = observer(function ({ session, }) {
     const { visibleWidget } = session;
     const { pluginManager } = getEnv(session);
@@ -20,11 +20,14 @@ const DrawerWidget = observer(function ({ session, }) {
     // height want to be able to fill the contained, minus the toolbar height
     // (the position static/sticky is included in AutoSizer estimates)
     const [toolbarHeight, setToolbarHeight] = useState(0);
+    const [popoutDrawer, setPopoutDrawer] = useState(false);
     return (React.createElement(Drawer, { session: session },
-        React.createElement(DrawerHeader, { 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 ? (React.createElement(React.Fragment, 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(DrawerComponent, { model: visibleWidget, session: session, toolbarHeight: toolbarHeight }),
-                React.createElement("div", { style: { height: 300 } }))) : null))));
+                React.createElement("div", { style: { height: 300 } })))) : null))));
 });
 export default DrawerWidget;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util/types';
+declare const DrawerWidgetSelector: ({ session, }: {
+    session: SessionWithFocusedViewAndDrawerWidgets;
+}) => React.JSX.Element;
+export default DrawerWidgetSelector;

package/esm/ui/App/DrawerWidgetSelector.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { FormControl, IconButton, MenuItem, Select, Typography, } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+import { observer } from 'mobx-react';
+import { getEnv } from '@jbrowse/core/util';
+// icons
+import DeleteIcon from '@mui/icons-material/Delete';
+const useStyles = makeStyles()(theme => ({
+    formControl: {
+        margin: 0,
+    },
+    drawerSelect: {
+        margin: 0,
+        color: theme.palette.secondary.contrastText,
+    },
+    dropDownIcon: {
+        color: theme.palette.secondary.contrastText,
+    },
+}));
+const DrawerWidgetSelector = observer(function ({ session, }) {
+    const { visibleWidget, activeWidgets } = session;
+    const { classes } = useStyles();
+    const { pluginManager } = getEnv(session);
+    return (React.createElement(FormControl, { className: classes.formControl },
+        React.createElement(Select, { value: visibleWidget === null || visibleWidget === void 0 ? void 0 : visibleWidget.id, "data-testid": "widget-drawer-selects", className: classes.drawerSelect, classes: { icon: classes.dropDownIcon }, renderValue: widgetId => {
+                const widget = session.activeWidgets.get(widgetId);
+                if (!widget) {
+                    return (React.createElement(Typography, { variant: "h6", color: "inherit" }, "Unknown widget"));
+                }
+                const widgetType = pluginManager.getWidgetType(widget.type);
+                const { HeadingComponent, heading } = widgetType;
+                return HeadingComponent ? (React.createElement(HeadingComponent, { model: widget })) : (React.createElement(Typography, { variant: "h6", color: "inherit" }, heading));
+            }, onChange: e => {
+                const w = session.activeWidgets.get(e.target.value);
+                if (w) {
+                    session.showWidget(w);
+                }
+                else {
+                    session.notify(`Widget not found ${e.target.value}`, 'warning');
+                }
+            } }, [...activeWidgets.values()].map(widget => {
+            const widgetType = pluginManager.getWidgetType(widget.type);
+            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(DeleteIcon, null))));
+        }))));
+});
+export default DrawerWidgetSelector;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { SessionWithWidgets } from '@jbrowse/core/util';
+declare const ModalWidget: ({ session, onClose, }: {
+    session: SessionWithWidgets;
+    onClose: () => void;
+}) => React.JSX.Element | null;
+export default ModalWidget;

package/esm/ui/App/ModalWidget.js

@@ -0,0 +1,55 @@
+import React, { Suspense } from 'react';
+import { AppBar, IconButton, Paper, Toolbar, Typography } from '@mui/material';
+import { Dialog } from '@jbrowse/core/ui';
+import { makeStyles } from 'tss-react/mui';
+import { observer } from 'mobx-react';
+import { getEnv } from 'mobx-state-tree';
+// icons
+import CloseIcon from '@mui/icons-material/Close';
+const useStyles = makeStyles()(theme => ({
+    paper: {
+        overflow: 'auto',
+        minWidth: 800,
+    },
+    closeButton: {
+        position: 'absolute',
+        right: theme.spacing(1),
+        top: theme.spacing(1),
+        color: theme.palette.grey[500],
+    },
+}));
+const DrawerAppBar = observer(function DrawerAppBar({ session, onClose, }) {
+    const { classes } = useStyles();
+    const { visibleWidget } = session;
+    const { pluginManager } = getEnv(session);
+    if (!visibleWidget) {
+        return null;
+    }
+    const { HeadingComponent, heading } = pluginManager.getWidgetType(visibleWidget.type);
+    return (React.createElement(AppBar, { position: "static" },
+        React.createElement(Toolbar, null, HeadingComponent ? (React.createElement(HeadingComponent, { model: visibleWidget })) : (React.createElement(Typography, { variant: "h6" }, heading))),
+        React.createElement(IconButton, { className: classes.closeButton, onClick: onClose },
+            React.createElement(CloseIcon, null))));
+});
+const ModalWidget = observer(function ({ session, onClose, }) {
+    const { classes } = useStyles();
+    const { visibleWidget } = session;
+    const { pluginManager } = getEnv(session);
+    if (!visibleWidget) {
+        return null;
+    }
+    const { ReactComponent } = pluginManager.getWidgetType(visibleWidget.type);
+    const Component = visibleWidget
+        ? pluginManager.evaluateExtensionPoint('Core-replaceWidget', ReactComponent, {
+            session,
+            model: visibleWidget,
+        })
+        : null;
+    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: {
+                    height: (window.innerHeight * 5) / 8,
+                    width: 800,
+                } })))) : null));
+});
+export default ModalWidget;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/app-core",
-  "version": "2.11.2",
+  "version": "2.12.1",
   "description": "JBrowse 2 code shared between the 'full featured' apps e.g. jbrowse-web and jbrowse-desktop",
   "keywords": [
     "jbrowse",
@@ -42,7 +42,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@jbrowse/product-core": "^2.11.2",
+    "@jbrowse/product-core": "^2.12.1",
     "@mui/icons-material": "^5.0.0",
     "@mui/material": "^5.10.17",
     "copy-to-clipboard": "^3.3.1",
@@ -60,5 +60,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "511048cb6965f0bf624c96de244e7fd47fce17d6"
+  "gitHead": "20f16ae5a56ae5e4806aaa373131e540b0b5b0fd"
 }