@jbrowse/app-core 2.6.1

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

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

package/dist/ui/App/App.js

@@ -0,0 +1,95 @@
+"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 });
+exports.App = void 0;
+const react_1 = __importStar(require("react"));
+const material_1 = require("@mui/material");
+const mui_1 = require("tss-react/mui");
+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 DrawerWidget = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./DrawerWidget'))));
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    root: {
+        display: 'grid',
+        height: '100vh',
+        width: '100%',
+        colorScheme: theme.palette.mode,
+    },
+    appContainer: {
+        gridColumn: 'main',
+        display: 'grid',
+        gridTemplateRows: '[menubar] min-content [components] auto',
+        height: '100vh',
+    },
+    viewContainer: {
+        overflowY: 'auto',
+        gridRow: 'components',
+    },
+    appBar: {
+        flexGrow: 1,
+        gridRow: 'menubar',
+    },
+}));
+const LazyDrawerWidget = (0, mobx_react_1.observer)(function (props) {
+    const { session } = props;
+    return (react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement(react_1.default.Fragment, 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();
+    const { minimized, visibleWidget, drawerWidth, drawerPosition } = session;
+    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(' ') } },
+        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(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 })));
+});
+exports.App = App;

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

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

package/dist/ui/App/AppFab.js

@@ -0,0 +1,32 @@
+"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");
+// icons
+const Launch_1 = __importDefault(require("@mui/icons-material/Launch"));
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    left: {
+        zIndex: 10000,
+        position: 'fixed',
+        bottom: theme.spacing(2),
+        left: theme.spacing(2),
+    },
+    right: {
+        zIndex: 10000,
+        position: 'fixed',
+        bottom: theme.spacing(2),
+        right: theme.spacing(2),
+    },
+}));
+exports.default = (0, mobx_react_1.observer)(function AppFab({ 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(Launch_1.default, null)))) : null;
+});

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

@@ -0,0 +1,19 @@
+import React from 'react';
+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;
+    snackbarMessages: SnackbarMessage[];
+    popSnackbarMessage: () => unknown;
+};
+declare const AppToolbar: ({ session, HeaderButtons, }: {
+    HeaderButtons?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    session: AppSession;
+}) => React.JSX.Element;
+export default AppToolbar;

package/dist/ui/App/AppToolbar.js

@@ -0,0 +1,54 @@
+"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 DropDownMenu_1 = __importDefault(require("@jbrowse/core/ui/DropDownMenu"));
+const EditableTypography_1 = __importDefault(require("@jbrowse/core/ui/EditableTypography"));
+const AppLogo_1 = __importDefault(require("@jbrowse/core/ui/AppLogo"));
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    grow: {
+        flexGrow: 1,
+    },
+    inputBase: {
+        color: theme.palette.primary.contrastText,
+    },
+    inputRoot: {
+        '&:hover': {
+            backgroundColor: theme.palette.primary.light,
+        },
+    },
+    inputFocused: {
+        borderColor: theme.palette.secondary.main,
+        backgroundColor: theme.palette.primary.light,
+    },
+}));
+const AppToolbar = (0, mobx_react_1.observer)(function ({ session, HeaderButtons = react_1.default.createElement("div", null), }) {
+    const { classes } = useStyles();
+    const { savedSessionNames, name, menus } = session;
+    return (react_1.default.createElement(material_1.Toolbar, null,
+        menus.map(menu => (react_1.default.createElement(DropDownMenu_1.default, { key: menu.label, menuTitle: menu.label, menuItems: menu.menuItems, session: session }))),
+        react_1.default.createElement("div", { className: classes.grow }),
+        react_1.default.createElement(material_1.Tooltip, { title: "Rename Session", arrow: true },
+            react_1.default.createElement(EditableTypography_1.default, { value: name, setValue: newName => {
+                    if (savedSessionNames === null || savedSessionNames === void 0 ? void 0 : savedSessionNames.includes(newName)) {
+                        session.notify(`Cannot rename session to "${newName}", a saved session with that name already exists`, 'warning');
+                    }
+                    else {
+                        session.renameCurrentSession(newName);
+                    }
+                }, variant: "body1", classes: {
+                    inputBase: classes.inputBase,
+                    inputRoot: classes.inputRoot,
+                    inputFocused: classes.inputFocused,
+                } })),
+        HeaderButtons,
+        react_1.default.createElement("div", { className: classes.grow }),
+        react_1.default.createElement("div", { style: { width: 150, maxHeight: 48 } },
+            react_1.default.createElement(AppLogo_1.default, { session: session }))));
+});
+exports.default = AppToolbar;

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

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

package/dist/ui/App/DialogQueue.js

@@ -0,0 +1,32 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const mobx_react_1 = require("mobx-react");
+exports.default = (0, mobx_react_1.observer)(function ({ session, }) {
+    const { DialogComponent, DialogProps } = session;
+    return (react_1.default.createElement(react_1.default.Fragment, null, DialogComponent ? (react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement(react_1.default.Fragment, null) },
+        react_1.default.createElement(DialogComponent, { ...DialogProps }))) : null));
+});

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { SessionWithDrawerWidgets } from '@jbrowse/core/util/types';
+declare function Drawer({ children, session, }: {
+    children: React.ReactNode;
+    session: SessionWithDrawerWidgets;
+}): React.JSX.Element;
+declare const _default: typeof Drawer;
+export default _default;

package/dist/ui/App/Drawer.js

@@ -0,0 +1,34 @@
+"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 ResizeHandle_1 = __importDefault(require("@jbrowse/core/ui/ResizeHandle"));
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    paper: {
+        overflowY: 'auto',
+        height: '100%',
+        zIndex: theme.zIndex.drawer,
+        outline: 'none',
+        background: theme.palette.background.default,
+    },
+    resizeHandle: {
+        width: 4,
+        position: 'fixed',
+        top: 0,
+        zIndex: theme.zIndex.drawer + 1,
+    },
+}));
+function Drawer({ children, session, }) {
+    const { drawerPosition, drawerWidth } = session;
+    const { classes } = useStyles();
+    return (react_1.default.createElement(material_1.Paper, { 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,
+        drawerPosition === 'left' ? (react_1.default.createElement(ResizeHandle_1.default, { onDrag: session.resizeDrawer, className: classes.resizeHandle, style: { left: drawerWidth }, vertical: true })) : null));
+}
+exports.default = (0, mobx_react_1.observer)(Drawer);

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

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

package/dist/ui/App/DrawerWidget.js

@@ -0,0 +1,132 @@
+"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_error_boundary_1 = require("react-error-boundary");
+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");
+const LoadingEllipses_1 = __importDefault(require("@jbrowse/core/ui/LoadingEllipses"));
+const ErrorMessage_1 = __importDefault(require("@jbrowse/core/ui/ErrorMessage"));
+// 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"));
+// locals
+const Drawer_1 = __importDefault(require("./Drawer"));
+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,
+    },
+    header: {
+        background: theme.palette.secondary.main,
+    },
+}));
+const DrawerHeader = (0, mobx_react_1.observer)(function ({ session, setToolbarHeight, }) {
+    const { pluginManager } = (0, util_1.getEnv)(session);
+    const { visibleWidget, activeWidgets, drawerPosition } = session;
+    const { classes } = useStyles();
+    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
+    return (react_1.default.createElement(material_1.AppBar, { position: "sticky", className: classes.header, 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(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))));
+                }))),
+            react_1.default.createElement("div", { className: classes.spacer }),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(material_1.IconButton, { "data-testid": "drawer-close", 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, { "data-testid": "drawer-close", 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))))));
+});
+const DrawerWidget = (0, mobx_react_1.observer)(function ({ session, }) {
+    const { visibleWidget } = session;
+    const { pluginManager } = (0, util_1.getEnv)(session);
+    const DrawerComponent = visibleWidget
+        ? pluginManager.evaluateExtensionPoint('Core-replaceWidget', pluginManager.getWidgetType(visibleWidget.type).ReactComponent, {
+            session,
+            model: visibleWidget,
+        })
+        : null;
+    // we track the toolbar height because components that use virtualized
+    // 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);
+    return (react_1.default.createElement(Drawer_1.default, { session: session },
+        react_1.default.createElement(DrawerHeader, { 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(DrawerComponent, { model: visibleWidget, session: session, toolbarHeight: toolbarHeight }),
+                react_1.default.createElement("div", { style: { height: 300 } }))) : null))));
+});
+exports.default = DrawerWidget;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes/models';
+declare const _default: ({ view, onClose, onMinimize, children, }: {
+    view: IBaseViewModel;
+    onClose: () => void;
+    onMinimize: () => void;
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export default _default;

package/dist/ui/App/ViewContainer.js

@@ -0,0 +1,76 @@
+"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 mui_1 = require("tss-react/mui");
+const mobx_react_1 = require("mobx-react");
+const util_1 = require("@jbrowse/core/util");
+// icons
+const Close_1 = __importDefault(require("@mui/icons-material/Close"));
+const Minimize_1 = __importDefault(require("@mui/icons-material/Minimize"));
+const Add_1 = __importDefault(require("@mui/icons-material/Add"));
+// locals
+const ViewMenu_1 = __importDefault(require("./ViewMenu"));
+const ViewContainerTitle_1 = __importDefault(require("./ViewContainerTitle"));
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    viewContainer: {
+        overflow: 'hidden',
+        background: theme.palette.secondary.main,
+        margin: theme.spacing(0.5),
+        padding: `0 ${theme.spacing(1)} ${theme.spacing(1)}`,
+    },
+    icon: {
+        color: theme.palette.secondary.contrastText,
+    },
+    grow: {
+        flexGrow: 1,
+    },
+}));
+exports.default = (0, mobx_react_1.observer)(function ({ view, onClose, onMinimize, children, }) {
+    const { classes } = useStyles();
+    const theme = (0, material_1.useTheme)();
+    const ref = (0, util_1.useWidthSetter)(view, theme.spacing(1));
+    const scrollRef = (0, react_1.useRef)(null);
+    // 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' });
+    }, []);
+    return (react_1.default.createElement(material_1.Paper, { ref: ref, elevation: 12, className: classes.viewContainer },
+        react_1.default.createElement("div", { ref: scrollRef, style: { display: 'flex' } },
+            react_1.default.createElement(ViewMenu_1.default, { model: view, IconProps: { className: classes.icon } }),
+            react_1.default.createElement("div", { className: classes.grow }),
+            react_1.default.createElement(ViewContainerTitle_1.default, { view: view }),
+            react_1.default.createElement("div", { className: classes.grow }),
+            react_1.default.createElement(material_1.IconButton, { "data-testid": "minimize_view", onClick: onMinimize }, view.minimized ? (react_1.default.createElement(Add_1.default, { className: classes.icon, fontSize: "small" })) : (react_1.default.createElement(Minimize_1.default, { className: classes.icon, fontSize: "small" }))),
+            react_1.default.createElement(material_1.IconButton, { "data-testid": "close_view", onClick: onClose },
+                react_1.default.createElement(Close_1.default, { className: classes.icon, fontSize: "small" }))),
+        react_1.default.createElement(material_1.Paper, null, children)));
+});

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes';
+declare const _default: ({ view, }: {
+    view: IBaseViewModel;
+}) => React.JSX.Element;
+export default _default;

package/dist/ui/App/ViewContainerTitle.js

@@ -0,0 +1,42 @@
+"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");
+// locals
+const EditableTypography_1 = __importDefault(require("@jbrowse/core/ui/EditableTypography"));
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    input: {
+        paddingBottom: 0,
+        paddingTop: 2,
+    },
+    inputBase: {
+        color: theme.palette.secondary.contrastText,
+    },
+    inputRoot: {
+        '&:hover': {
+            backgroundColor: theme.palette.secondary.light,
+        },
+    },
+    inputFocused: {
+        borderColor: theme.palette.primary.main,
+        backgroundColor: theme.palette.secondary.light,
+    },
+}));
+exports.default = (0, mobx_react_1.observer)(function ViewContainerTitle({ view, }) {
+    var _a;
+    const { classes } = useStyles();
+    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: {
+                input: classes.input,
+                inputBase: classes.inputBase,
+                inputRoot: classes.inputRoot,
+                inputFocused: classes.inputFocused,
+            } })));
+});

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

@@ -0,0 +1,18 @@
+import React from 'react';
+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;
+    snackbarMessages: SnackbarMessage[];
+    popSnackbarMessage: () => unknown;
+};
+declare const ViewLauncher: ({ session }: {
+    session: AppSession;
+}) => React.JSX.Element;
+export default ViewLauncher;