@jbrowse/app-core 2.6.1

package/esm/ui/App/App.js

@@ -0,0 +1,66 @@
+import React, { Suspense, lazy } from 'react';
+import { AppBar } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+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';
+const DrawerWidget = lazy(() => import('./DrawerWidget'));
+const useStyles = 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 = observer(function (props) {
+    const { session } = props;
+    return (React.createElement(Suspense, { fallback: React.createElement(React.Fragment, 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();
+    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.createElement("div", { className: classes.root, style: { gridTemplateColumns: grid === null || grid === void 0 ? void 0 : 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(AppFab, { session: session }),
+        drawerVisible && drawerPosition === 'right' ? (React.createElement(LazyDrawerWidget, { session: session })) : null,
+        React.createElement(Snackbar, { session: session })));
+});
+export { App };

package/esm/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/esm/ui/App/AppFab.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Fab, Tooltip } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+import { observer } from 'mobx-react';
+// icons
+import LaunchIcon from '@mui/icons-material/Launch';
+const useStyles = 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),
+    },
+}));
+export default observer(function AppFab({ 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(LaunchIcon, null)))) : null;
+});

package/esm/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/esm/ui/App/AppToolbar.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Toolbar, Tooltip } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+import { observer } from 'mobx-react';
+import DropDownMenu from '@jbrowse/core/ui/DropDownMenu';
+import EditableTypography from '@jbrowse/core/ui/EditableTypography';
+import AppLogo from '@jbrowse/core/ui/AppLogo';
+const useStyles = 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 = observer(function ({ session, HeaderButtons = React.createElement("div", null), }) {
+    const { classes } = useStyles();
+    const { savedSessionNames, name, menus } = session;
+    return (React.createElement(Toolbar, null,
+        menus.map(menu => (React.createElement(DropDownMenu, { key: menu.label, menuTitle: menu.label, menuItems: menu.menuItems, session: session }))),
+        React.createElement("div", { className: classes.grow }),
+        React.createElement(Tooltip, { title: "Rename Session", arrow: true },
+            React.createElement(EditableTypography, { 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.createElement("div", { className: classes.grow }),
+        React.createElement("div", { style: { width: 150, maxHeight: 48 } },
+            React.createElement(AppLogo, { session: session }))));
+});
+export default AppToolbar;

package/esm/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/esm/ui/App/DialogQueue.js

@@ -0,0 +1,7 @@
+import React, { Suspense } from 'react';
+import { observer } from 'mobx-react';
+export default observer(function ({ session, }) {
+    const { DialogComponent, DialogProps } = session;
+    return (React.createElement(React.Fragment, null, DialogComponent ? (React.createElement(Suspense, { fallback: React.createElement(React.Fragment, null) },
+        React.createElement(DialogComponent, { ...DialogProps }))) : null));
+});

package/esm/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/esm/ui/App/Drawer.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Paper } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+import { observer } from 'mobx-react';
+import ResizeHandle from '@jbrowse/core/ui/ResizeHandle';
+const useStyles = 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.createElement(Paper, { className: classes.paper, elevation: 16, square: true },
+        drawerPosition === 'right' ? (React.createElement(ResizeHandle, { onDrag: session.resizeDrawer, className: classes.resizeHandle, vertical: true })) : null,
+        children,
+        drawerPosition === 'left' ? (React.createElement(ResizeHandle, { onDrag: session.resizeDrawer, className: classes.resizeHandle, style: { left: drawerWidth }, vertical: true })) : null));
+}
+export default observer(Drawer);

package/esm/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/esm/ui/App/DrawerWidget.js

@@ -0,0 +1,104 @@
+import React, { Suspense, useState } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { AppBar, FormControl, IconButton, Menu, MenuItem, Select, Toolbar, Tooltip, Typography, } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+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';
+// 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';
+// locals
+import Drawer from './Drawer';
+const useStyles = 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 = observer(function ({ session, setToolbarHeight, }) {
+    const { pluginManager } = getEnv(session);
+    const { visibleWidget, activeWidgets, drawerPosition } = session;
+    const { classes } = useStyles();
+    const [anchorEl, setAnchorEl] = useState(null);
+    return (React.createElement(AppBar, { position: "sticky", className: classes.header, ref: ref => setToolbarHeight((ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect().height) || 0) },
+        React.createElement(Toolbar, { disableGutters: true },
+            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))));
+                }))),
+            React.createElement("div", { className: classes.spacer }),
+            React.createElement("div", null,
+                React.createElement(IconButton, { "data-testid": "drawer-close", 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, { "data-testid": "drawer-close", 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))))));
+});
+const DrawerWidget = observer(function ({ session, }) {
+    const { visibleWidget } = session;
+    const { pluginManager } = 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] = useState(0);
+    return (React.createElement(Drawer, { session: session },
+        React.createElement(DrawerHeader, { 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(DrawerComponent, { model: visibleWidget, session: session, toolbarHeight: toolbarHeight }),
+                React.createElement("div", { style: { height: 300 } }))) : null))));
+});
+export default DrawerWidget;

package/esm/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/esm/ui/App/ViewContainer.js

@@ -0,0 +1,48 @@
+import React, { useEffect, useRef } from 'react';
+import { IconButton, Paper, useTheme } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+import { observer } from 'mobx-react';
+import { useWidthSetter } from '@jbrowse/core/util';
+// icons
+import CloseIcon from '@mui/icons-material/Close';
+import MinimizeIcon from '@mui/icons-material/Minimize';
+import AddIcon from '@mui/icons-material/Add';
+// locals
+import ViewMenu from './ViewMenu';
+import ViewContainerTitle from './ViewContainerTitle';
+const useStyles = 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,
+    },
+}));
+export default observer(function ({ view, onClose, onMinimize, children, }) {
+    const { classes } = useStyles();
+    const theme = useTheme();
+    const ref = useWidthSetter(view, theme.spacing(1));
+    const scrollRef = useRef(null);
+    // 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' });
+    }, []);
+    return (React.createElement(Paper, { ref: ref, elevation: 12, className: classes.viewContainer },
+        React.createElement("div", { ref: scrollRef, style: { display: 'flex' } },
+            React.createElement(ViewMenu, { model: view, IconProps: { className: classes.icon } }),
+            React.createElement("div", { className: classes.grow }),
+            React.createElement(ViewContainerTitle, { view: view }),
+            React.createElement("div", { className: classes.grow }),
+            React.createElement(IconButton, { "data-testid": "minimize_view", onClick: onMinimize }, view.minimized ? (React.createElement(AddIcon, { className: classes.icon, fontSize: "small" })) : (React.createElement(MinimizeIcon, { className: classes.icon, fontSize: "small" }))),
+            React.createElement(IconButton, { "data-testid": "close_view", onClick: onClose },
+                React.createElement(CloseIcon, { className: classes.icon, fontSize: "small" }))),
+        React.createElement(Paper, null, children)));
+});

package/esm/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/esm/ui/App/ViewContainerTitle.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Tooltip } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+import { observer } from 'mobx-react';
+// locals
+import EditableTypography from '@jbrowse/core/ui/EditableTypography';
+const useStyles = 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,
+    },
+}));
+export default observer(function ViewContainerTitle({ view, }) {
+    var _a;
+    const { classes } = useStyles();
+    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: {
+                input: classes.input,
+                inputBase: classes.inputBase,
+                inputRoot: classes.inputRoot,
+                inputFocused: classes.inputFocused,
+            } })));
+});

package/esm/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;

package/esm/ui/App/ViewLauncher.js

@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+import { Button, FormControl, MenuItem, Paper, Select, Typography, } from '@mui/material';
+import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
+// locals
+import { getEnv } from '@jbrowse/core/util';
+const useStyles = makeStyles()(theme => ({
+    selectPaper: {
+        padding: theme.spacing(4),
+    },
+}));
+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);
+    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(Button, { onClick: () => session.addView(value, {}), variant: "contained", color: "primary" }, "Launch view"))));
+});
+export default ViewLauncher;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { SvgIconProps, IconButtonProps as IconButtonPropsType } from '@mui/material';
+import { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes/models';
+declare const ViewMenu: ({ model, IconButtonProps, IconProps, }: {
+    model: IBaseViewModel;
+    IconButtonProps?: IconButtonPropsType | undefined;
+    IconProps: SvgIconProps;
+}) => React.JSX.Element | null;
+export default ViewMenu;

package/esm/ui/App/ViewMenu.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import { getSession } from '@jbrowse/core/util';
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
+// icons
+import MenuIcon from '@mui/icons-material/Menu';
+import ArrowDownward from '@mui/icons-material/ArrowDownward';
+import ArrowUpward from '@mui/icons-material/ArrowUpward';
+const ViewMenu = observer(function ({ model, IconButtonProps, IconProps, }) {
+    const { menuItems } = model;
+    const session = getSession(model);
+    const items = [
+        ...(session.views.length > 1
+            ? [
+                {
+                    label: 'Move view up',
+                    icon: ArrowUpward,
+                    onClick: () => session.moveViewUp(model.id),
+                },
+                {
+                    label: 'Move view down',
+                    icon: ArrowDownward,
+                    onClick: () => session.moveViewDown(model.id),
+                },
+            ]
+            : []),
+        // <=1.3.3 didn't use a function, so check as value also
+        ...((typeof menuItems === 'function' ? menuItems() : menuItems) || []),
+    ];
+    return items.length ? (React.createElement(CascadingMenuButton, { menuItems: items, "data-testid": "view_menu_icon" },
+        React.createElement(MenuIcon, { ...IconProps, fontSize: "small" }))) : null;
+});
+export default ViewMenu;

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

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

package/esm/ui/App/ViewPanel.js

@@ -0,0 +1,22 @@
+import React, { Suspense } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { observer } from 'mobx-react';
+// locals
+import { getEnv, } from '@jbrowse/core/util';
+// ui elements
+import ErrorMessage from '@jbrowse/core/ui/ErrorMessage';
+import LoadingEllipses from '@jbrowse/core/ui/LoadingEllipses';
+// locals
+import ViewContainer from './ViewContainer';
+const ViewPanel = observer(function ({ view, session, }) {
+    const { pluginManager } = getEnv(session);
+    const viewType = pluginManager.getViewType(view.type);
+    if (!viewType) {
+        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 }) },
+        React.createElement(Suspense, { fallback: React.createElement(LoadingEllipses, { variant: "h6" }) },
+            React.createElement(ReactComponent, { model: view, session: session })))) : (false)));
+});
+export default ViewPanel;

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

@@ -0,0 +1 @@
+export * from './App';

package/esm/ui/App/index.js

@@ -0,0 +1 @@
+export * from './App';

package/esm/ui/index.d.ts

@@ -0,0 +1 @@
+export * from './App';

package/esm/ui/index.js

@@ -0,0 +1 @@
+export * from './App';