@jbrowse/core 2.3.4 → 2.4.1

package/ui/App.js

@@ -30,24 +30,20 @@ const react_1 = __importStar(require("react"));
 const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
 const Launch_1 = __importDefault(require("@mui/icons-material/Launch"));
-const react_error_boundary_1 = require("react-error-boundary");
 const mobx_react_1 = require("mobx-react");
-// locals
-const util_1 = require("../util");
 // ui elements
 const DrawerWidget_1 = __importDefault(require("./DrawerWidget"));
 const AppToolbar_1 = __importDefault(require("./AppToolbar"));
-const ErrorMessage_1 = __importDefault(require("./ErrorMessage"));
-const LoadingEllipses_1 = __importDefault(require("./LoadingEllipses"));
 const Snackbar_1 = __importDefault(require("./Snackbar"));
-const ViewContainer_1 = __importDefault(require("./ViewContainer"));
 const ViewLauncher_1 = __importDefault(require("./ViewLauncher"));
+const ViewPanel_1 = __importDefault(require("./ViewPanel"));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     root: {
         fontFamily: 'Roboto',
         display: 'grid',
         height: '100vh',
         width: '100%',
+        colorScheme: theme.palette.mode,
     },
     fabLeft: {
         zIndex: 10000,
@@ -78,17 +74,6 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         flexGrow: 1,
     },
 }));
-const ViewPanel = (0, mobx_react_1.observer)(function ({ view, session, }) {
-    const { pluginManager } = (0, util_1.getEnv)(session);
-    const viewType = pluginManager.getViewType(view.type);
-    if (!viewType) {
-        throw new Error(`unknown view type ${view.type}`);
-    }
-    const { ReactComponent } = viewType;
-    return (react_1.default.createElement(ViewContainer_1.default, { view: view, onClose: () => session.removeView(view), onMinimize: () => view.setMinimized(!view.minimized) }, !view.minimized ? (react_1.default.createElement(react_error_boundary_1.ErrorBoundary, { FallbackComponent: ({ error }) => react_1.default.createElement(ErrorMessage_1.default, { error: error }) },
-        react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement(LoadingEllipses_1.default, null) },
-            react_1.default.createElement(ReactComponent, { model: view, session: session })))) : (false)));
-});
 const App = (0, mobx_react_1.observer)(function (props) {
     const { session } = props;
     const { classes } = useStyles();
@@ -118,7 +103,7 @@ const App = (0, mobx_react_1.observer)(function (props) {
                 react_1.default.createElement(material_1.AppBar, { className: classes.appBar, position: "static" },
                     react_1.default.createElement(AppToolbar_1.default, { ...props }))),
             react_1.default.createElement("div", { className: classes.components },
-                views.length ? (views.map(view => (react_1.default.createElement(ViewPanel, { key: `view-${view.id}`, view: view, session: session })))) : (react_1.default.createElement(ViewLauncher_1.default, { ...props })),
+                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 } }))),
         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.fabRight : classes.fabLeft, color: "primary", "data-testid": "drawer-maximize", onClick: () => session.showWidgetDrawer() },

package/ui/AppLogo.js

@@ -12,11 +12,6 @@ const Logo_1 = require("./Logo");
 const Logo = (0, mobx_react_1.observer)(function ({ session, }) {
     const { configuration } = session;
     const logoPath = (0, configuration_1.readConfObject)(configuration, 'logoPath');
-    if (!(logoPath === null || logoPath === void 0 ? void 0 : logoPath.uri)) {
-        return react_1.default.createElement(Logo_1.LogoFull, { variant: "white" });
-    }
-    else {
-        return react_1.default.createElement("img", { src: logoPath.uri, alt: "Custom logo" });
-    }
+    return (logoPath === null || logoPath === void 0 ? void 0 : logoPath.uri) ? (react_1.default.createElement("img", { src: logoPath.uri, alt: "Custom logo" })) : (react_1.default.createElement(Logo_1.LogoFull, { variant: "white" }));
 });
 exports.default = Logo;

package/ui/ColorPicker.js

@@ -90,7 +90,7 @@ function ColorPicker({ onChange, color, }) {
                     const pal = event.target.value;
                     setVal(pal);
                 } }, palettes.map(p => (react_1.default.createElement(material_1.MenuItem, { value: p, key: p }, p)))),
-            react_1.default.createElement("div", { className: classes.swatches }, presetColors.map((presetColor, idx) => (react_1.default.createElement("button", { key: presetColor + '-' + idx, className: classes.swatch, style: { background: presetColor }, onClick: () => handleChange(presetColor) })))),
+            react_1.default.createElement("div", { className: classes.swatches }, presetColors.map((presetColor, idx) => (react_1.default.createElement("button", { key: `${presetColor}-${idx}`, className: classes.swatch, style: { background: presetColor }, onClick: () => handleChange(presetColor) })))),
             react_1.default.createElement(material_1.TextField, { helperText: 'Manually set color (hex, rgb, or css color name)', value: text, onChange: event => handleChange(event.target.value) }))));
 }
 exports.ColorPicker = ColorPicker;

package/ui/Dialog.js

@@ -32,7 +32,7 @@ function JBrowseDialog(props) {
             react_1.default.createElement(material_1.DialogTitle, null,
                 title,
                 onClose ? (react_1.default.createElement(material_1.IconButton, { className: classes.closeButton, onClick: () => {
-                        // @ts-ignore
+                        // @ts-expect-error
                         onClose();
                     } },
                     react_1.default.createElement(Close_1.default, null))) : null),

package/ui/DrawerWidget.js

@@ -77,13 +77,13 @@ const DrawerHeader = (0, mobx_react_1.observer)(({ session, setToolbarHeight, })
                         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.notify(`Widget not found ${e.target.value}`, 'warning');
+                        if (w) {
+                            session.showWidget(w);
                         }
                         else {
-                            session.showWidget(w);
+                            session.notify(`Widget not found ${e.target.value}`, 'warning');
                         }
-                    } }, Array.from(activeWidgets.values()).map(widget => {
+                    } }, [...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 },

package/ui/EditableTypography.js

@@ -59,7 +59,7 @@ const EditableTypography = react_1.default.forwardRef((props, ref) => {
     }, [blur, inputNode]);
     // possibly tss-react does not understand the passing of props to
     // useStyles, but it appears to work
-    // @ts-ignore
+    // @ts-expect-error
     const { classes } = useStyles(props, { props });
     const theme = (0, material_1.useTheme)();
     const clientWidth = sizerNode === null || sizerNode === void 0 ? void 0 : sizerNode.clientWidth;

package/ui/FileSelector/FileSelector.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { FileLocation, AbstractRootModel } from '../../util/types';
-declare const FileSelector: (props: {
+declare const _default: (props: {
     location?: FileLocation | undefined;
     setLocation: (param: FileLocation) => void;
     setName?: ((str: string) => void) | undefined;
@@ -8,4 +8,4 @@ declare const FileSelector: (props: {
     description?: string | undefined;
     rootModel?: AbstractRootModel | undefined;
 }) => JSX.Element;
-export default FileSelector;
+export default _default;

package/ui/FileSelector/FileSelector.js

@@ -42,46 +42,45 @@ function ToggleButtonWithTooltip(props) {
 }
 function shorten(str, len) {
     if (typeof str === 'string' && str.length > len) {
-        return `${str.substring(0, len)}…`;
+        return `${str.slice(0, Math.max(0, len))}…`;
     }
     return str;
 }
-const FileSelector = (0, mobx_react_1.observer)((props) => {
+exports.default = (0, mobx_react_1.observer)(function (props) {
     const { location, name, description, rootModel, setLocation } = props;
     const fileOrUrl = !location || (0, types_1.isUriLocation)(location) ? 'url' : 'file';
     const [toggleButtonValue, setToggleButtonValue] = (0, react_1.useState)(location && 'internetAccountId' in location && location.internetAccountId
         ? location.internetAccountId
         : fileOrUrl);
-    const accts = (0, types_1.isAppRootModel)(rootModel)
-        ? rootModel.internetAccounts.slice()
-        : [];
+    const accts = (0, types_1.isAppRootModel)(rootModel) ? [...rootModel.internetAccounts] : [];
     const numShown = 2;
     const [shownAccts, setShownAccts] = (0, react_1.useState)(accts.slice(0, numShown));
     const [hiddenAccts, setHiddenAccts] = (0, react_1.useState)(accts.slice(numShown));
     const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
-    const selectedAcct = accts.find(ia => ia.internetAccountId === toggleButtonValue);
-    const setLocationWithAccount = (location) => {
+    const selectedAcct = accts.find(i => i.internetAccountId === toggleButtonValue);
+    const setLocationWithAcct = (0, react_1.useCallback)((location) => {
         setLocation({
             ...location,
-            internetAccountId: selectedAcct
-                ? selectedAcct.internetAccountId
-                : undefined,
+            ...((0, types_1.isUriLocation)(location)
+                ? { internetAccountId: selectedAcct === null || selectedAcct === void 0 ? void 0 : selectedAcct.internetAccountId }
+                : {}),
         });
-    };
-    // if you swap account selection after inputting url
-    if (location &&
-        selectedAcct &&
-        (0, types_1.isUriLocation)(location) &&
-        location.internetAccountId !== selectedAcct.internetAccountId) {
-        setLocationWithAccount(location);
-    }
-    let locationInput = (react_1.default.createElement(UrlChooser_1.default, { ...props, setLocation: setLocationWithAccount, label: selectedAcct === null || selectedAcct === void 0 ? void 0 : selectedAcct.selectorLabel }));
+    }, [setLocation, selectedAcct]);
+    (0, react_1.useEffect)(() => {
+        // if you swap account selection after inputting url
+        if (selectedAcct &&
+            (0, types_1.isUriLocation)(location) &&
+            location.internetAccountId !== selectedAcct.internetAccountId) {
+            setLocationWithAcct(location);
+        }
+    }, [location, selectedAcct, setLocationWithAcct]);
+    let locationInput = (react_1.default.createElement(UrlChooser_1.default, { ...props, setLocation: setLocationWithAcct, label: selectedAcct === null || selectedAcct === void 0 ? void 0 : selectedAcct.selectorLabel }));
     if (toggleButtonValue === 'file') {
         locationInput = react_1.default.createElement(LocalFileChooser_1.default, { ...props });
     }
     if (selectedAcct === null || selectedAcct === void 0 ? void 0 : selectedAcct.SelectorComponent) {
         const { SelectorComponent } = selectedAcct;
-        locationInput = (react_1.default.createElement(SelectorComponent, { ...props, setLocation: setLocationWithAccount }));
+        locationInput = (react_1.default.createElement(SelectorComponent, { ...props, setLocation: setLocationWithAcct }));
     }
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(material_1.Box, { display: "flex" },
@@ -93,7 +92,7 @@ const FileSelector = (0, mobx_react_1.observer)((props) => {
                             setToggleButtonValue(newState);
                         }
                         if ((0, types_1.isUriLocation)(location)) {
-                            setLocationWithAccount(location);
+                            setLocationWithAcct(location);
                         }
                     }, "aria-label": "file, url, or account picker" },
                     new URLSearchParams(window.location.search).get('adminKey') ? null : (react_1.default.createElement(material_1.ToggleButton, { value: "file", "aria-label": "local file" }, "File")),
@@ -101,23 +100,14 @@ const FileSelector = (0, mobx_react_1.observer)((props) => {
                     shownAccts.map(({ internetAccountId, toggleContents, name }) => (react_1.default.createElement(ToggleButtonWithTooltip, { key: internetAccountId, value: internetAccountId, "aria-label": name, title: name }, typeof toggleContents === 'string'
                         ? shorten(toggleContents, 5)
                         : toggleContents || shorten(name, 5)))),
-                    hiddenAccts.length ? (
-                    // @ts-ignore
+                    hiddenAccts.length > 0 ? (
+                    // @ts-expect-error
                     react_1.default.createElement(material_1.ToggleButton, { onClick: event => setAnchorEl(event.target), selected: false },
                         "More",
                         react_1.default.createElement(ArrowDropDown_1.default, null))) : null),
-                react_1.default.createElement(material_1.Menu, { open: Boolean(anchorEl), anchorEl: anchorEl, onClose: () => setAnchorEl(null), anchorOrigin: {
-                        vertical: 'bottom',
-                        horizontal: 'center',
-                    }, transformOrigin: {
-                        vertical: 'top',
-                        horizontal: 'center',
-                    } }, hiddenAccts === null || hiddenAccts === void 0 ? void 0 : hiddenAccts.map((acct, idx) => (react_1.default.createElement(material_1.MenuItem, { key: acct.internetAccountId, value: acct.internetAccountId, onClick: () => {
+                react_1.default.createElement(material_1.Menu, { open: Boolean(anchorEl), anchorEl: anchorEl, onClose: () => setAnchorEl(null), anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' } }, hiddenAccts === null || hiddenAccts === void 0 ? void 0 : hiddenAccts.map((acct, idx) => (react_1.default.createElement(material_1.MenuItem, { key: acct.internetAccountId, value: acct.internetAccountId, onClick: () => {
                         const prev = shownAccts[shownAccts.length - 1];
-                        setShownAccts([
-                            ...shownAccts.slice(0, shownAccts.length - 1),
-                            acct,
-                        ]);
+                        setShownAccts([...shownAccts.slice(0, -1), acct]);
                         setHiddenAccts([
                             prev,
                             ...hiddenAccts.slice(0, idx),
@@ -129,4 +119,3 @@ const FileSelector = (0, mobx_react_1.observer)((props) => {
         locationInput,
         react_1.default.createElement(material_1.FormHelperText, null, description)));
 });
-exports.default = FileSelector;

package/ui/FileSelector/index.d.ts

@@ -1,2 +1 @@
-import FileSelector from './FileSelector';
-export default FileSelector;
+export { default } from './FileSelector';

package/ui/FileSelector/index.js

@@ -3,5 +3,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const FileSelector_1 = __importDefault(require("./FileSelector"));
-exports.default = FileSelector_1.default;
+exports.default = void 0;
+var FileSelector_1 = require("./FileSelector");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(FileSelector_1).default; } });

package/ui/LoadingEllipses.js

@@ -27,11 +27,11 @@ const useStyles = (0, mui_1.makeStyles)()({
       75% {
         content: '...';
       }
-      `} 1.4s infinite ease-in-out`,
+      `} 1.2s infinite ease-in-out`,
         },
     },
 });
-function LoadingEllipses({ message = 'Loading', variant = 'body2', ...rest }) {
+function LoadingEllipses({ message, variant = 'body2', ...rest }) {
     const { classes } = useStyles();
     return (react_1.default.createElement(material_1.Typography, { className: classes.dots, ...rest, variant: variant }, `${message || 'Loading'}`));
 }

package/ui/Menu.js

@@ -69,26 +69,32 @@ function MenuItemEndDecoration(props) {
         ({ checked, disabled } = props);
     }
     let icon;
-    if (type === 'subMenu') {
-        icon = react_1.default.createElement(ArrowRight_1.default, { color: "action" });
-    }
-    else if (type === 'checkbox') {
-        if (checked) {
-            const color = disabled ? 'inherit' : 'secondary';
-            icon = react_1.default.createElement(CheckBox_1.default, { color: color });
-        }
-        else {
-            icon = react_1.default.createElement(CheckBoxOutlineBlank_1.default, { color: "action" });
+    switch (type) {
+        case 'subMenu': {
+            icon = react_1.default.createElement(ArrowRight_1.default, { color: "action" });
+            break;
         }
-    }
-    else if (type === 'radio') {
-        if (checked) {
-            const color = disabled ? 'inherit' : 'secondary';
-            icon = react_1.default.createElement(RadioButtonChecked_1.default, { color: color });
+        case 'checkbox': {
+            if (checked) {
+                const color = disabled ? 'inherit' : undefined;
+                icon = react_1.default.createElement(CheckBox_1.default, { color: color });
+            }
+            else {
+                icon = react_1.default.createElement(CheckBoxOutlineBlank_1.default, { color: "action" });
+            }
+            break;
         }
-        else {
-            icon = react_1.default.createElement(RadioButtonUnchecked_1.default, { color: "action" });
+        case 'radio': {
+            if (checked) {
+                const color = disabled ? 'inherit' : undefined;
+                icon = react_1.default.createElement(RadioButtonChecked_1.default, { color: color });
+            }
+            else {
+                icon = react_1.default.createElement(RadioButtonUnchecked_1.default, { color: "action" });
+            }
+            break;
         }
+        // No default
     }
     return react_1.default.createElement("div", { className: classes.menuItemEndDecoration }, icon);
 }
@@ -208,21 +214,28 @@ const MenuPage = react_1.default.forwardRef((props, ref) => {
                         setOpenSubMenuIdx(undefined);
                     }
                 }, onKeyDown: e => {
-                    if (e.key === 'ArrowLeft' || e.key === 'Escape') {
-                        onClose && onClose(e, 'escapeKeyDown');
-                    }
-                    else if (e.key === 'ArrowUp') {
-                        setSelectedMenuItemIdx(findPreviousValidIdx(menuItems, idx));
-                    }
-                    else if (e.key === 'ArrowDown') {
-                        const a = findNextValidIdx(menuItems, idx);
-                        setSelectedMenuItemIdx(a);
-                    }
-                    else if ('subMenu' in menuItem) {
-                        if (e.key === 'ArrowRight' || e.key === 'Enter') {
-                            setSubMenuAnchorEl(e.currentTarget);
-                            setOpenSubMenuIdx(idx);
-                            setIsSubMenuOpen(true);
+                    switch (e.key) {
+                        case 'ArrowLeft':
+                        case 'Escape': {
+                            onClose && onClose(e, 'escapeKeyDown');
+                            break;
+                        }
+                        case 'ArrowUp': {
+                            setSelectedMenuItemIdx(findPreviousValidIdx(menuItems, idx));
+                            break;
+                        }
+                        case 'ArrowDown': {
+                            const a = findNextValidIdx(menuItems, idx);
+                            setSelectedMenuItemIdx(a);
+                            break;
+                        }
+                        default: {
+                            if ('subMenu' in menuItem &&
+                                (e.key === 'ArrowRight' || e.key === 'Enter')) {
+                                setSubMenuAnchorEl(e.currentTarget);
+                                setOpenSubMenuIdx(idx);
+                                setIsSubMenuOpen(true);
+                            }
                         }
                     }
                 }, disabled: Boolean(menuItem.disabled) },

package/ui/ResizeBar.js

@@ -31,9 +31,9 @@ const react_1 = __importStar(require("react"));
 const mui_1 = require("tss-react/mui");
 // locals
 const ResizeHandle_1 = __importDefault(require("./ResizeHandle"));
-const useStyles = (0, mui_1.makeStyles)()({
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
     resizeBar: {
-        background: 'lightgrey',
+        background: theme.palette.action.disabledBackground,
         height: 12,
         position: 'relative',
         overflow: 'hidden',
@@ -42,16 +42,15 @@ const useStyles = (0, mui_1.makeStyles)()({
         position: 'absolute',
         height: '100%',
         pointerEvents: 'none',
-        background: 'black',
+        background: theme.palette.divider,
         width: 1,
     },
     hiddenTick: {
         position: 'absolute',
         height: '100%',
-        background: 'lightgrey',
         width: 5,
     },
-});
+}));
 function useResizeBar() {
     const ref = (0, react_1.useRef)(null);
     const [scrollLeft, setScrollLeft] = (0, react_1.useState)(0);
@@ -83,7 +82,12 @@ function Tick({ left, scrollLeft, idx, onDrag, }) {
 function ResizeBar({ widths, setWidths, checkbox, scrollLeft = 0, }) {
     const { classes } = useStyles();
     const offsets = [];
-    widths.reduce((a, b, i) => (offsets[i] = a + b), checkbox ? 52 : 0);
+    let init = checkbox ? 52 : 0;
+    for (let i = 0; i < widths.length; i++) {
+        const width = widths[i];
+        offsets[i] = width + init;
+        init += width;
+    }
     const onDrag = (0, react_1.useCallback)((distance, idx) => {
         const newWidths = [...widths];
         // mui doesn't allow columns smaller than 50

package/ui/ResizeHandle.js

@@ -72,12 +72,9 @@ function ResizeHandle({ onDrag, vertical = false, flexbox = false, className: or
     }, [mouseDragging, onDrag, vertical]);
     let className;
     if (flexbox) {
-        if (vertical) {
-            className = classes.flexbox_verticalHandle;
-        }
-        else {
-            className = classes.flexbox_horizontalHandle;
-        }
+        className = vertical
+            ? classes.flexbox_verticalHandle
+            : classes.flexbox_horizontalHandle;
     }
     else if (vertical) {
         className = classes.verticalHandle;

package/ui/SanitizedHTML.js

@@ -35,6 +35,8 @@ const htmlTags = [
     'strong',
     'table',
     'tbody',
+    'sup',
+    'sub',
     'td',
     'tfoot',
     'th',

package/ui/ViewContainer.js

@@ -36,13 +36,8 @@ const react_use_measure_1 = __importDefault(require("react-use-measure"));
 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"));
-const Menu_1 = __importDefault(require("@mui/icons-material/Menu"));
-const ArrowDownward_1 = __importDefault(require("@mui/icons-material/ArrowDownward"));
-const ArrowUpward_1 = __importDefault(require("@mui/icons-material/ArrowUpward"));
-// locals
-const util_1 = require("../util");
 const EditableTypography_1 = __importDefault(require("./EditableTypography"));
-const Menu_2 = __importDefault(require("./Menu"));
+const ViewMenu_1 = __importDefault(require("./ViewMenu"));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     viewContainer: {
         overflow: 'hidden',
@@ -72,37 +67,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         backgroundColor: theme.palette.secondary.light,
     },
 }));
-const ViewMenu = (0, mobx_react_1.observer)(({ model, IconButtonProps, IconProps, }) => {
-    const [anchorEl, setAnchorEl] = (0, react_1.useState)();
-    const { menuItems } = model;
-    const session = (0, util_1.getSession)(model);
-    const items = [
-        ...(session.views.length > 1
-            ? [
-                {
-                    label: 'Move view up',
-                    icon: ArrowUpward_1.default,
-                    onClick: () => session.moveViewUp(model.id),
-                },
-                {
-                    label: 'Move view down',
-                    icon: ArrowDownward_1.default,
-                    onClick: () => session.moveViewDown(model.id),
-                },
-            ]
-            : []),
-        // <=1.3.3 didn't use a function, so check as value also
-        ...((typeof menuItems === 'function' ? menuItems() : menuItems) || []),
-    ];
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.IconButton, { ...IconButtonProps, onClick: event => setAnchorEl(event.currentTarget), "data-testid": "view_menu_icon" },
-            react_1.default.createElement(Menu_1.default, { ...IconProps, fontSize: "small" })),
-        react_1.default.createElement(Menu_2.default, { anchorEl: anchorEl, open: Boolean(anchorEl), onMenuItemClick: (_event, callback) => {
-                callback();
-                setAnchorEl(undefined);
-            }, onClose: () => setAnchorEl(undefined), menuItems: items })));
-});
-const ViewContainer = (0, mobx_react_1.observer)(({ view, onClose, onMinimize, style, children, }) => {
+const ViewContainer = (0, mobx_react_1.observer)(function ({ view, onClose, onMinimize, style, children, }) {
     var _a;
     const { classes } = useStyles();
     const theme = (0, material_1.useTheme)();
@@ -110,7 +75,7 @@ const ViewContainer = (0, mobx_react_1.observer)(({ view, onClose, onMinimize, s
     const [ref, { width }] = (0, react_use_measure_1.default)();
     (0, react_1.useEffect)(() => {
         if (width && (0, mobx_state_tree_1.isAlive)(view)) {
-            view.setWidth(width - parseInt(padWidth, 10) * 2);
+            view.setWidth(width - Number.parseInt(padWidth, 10) * 2);
         }
     }, [padWidth, view, width]);
     const scrollRef = (0, react_1.useRef)(null);
@@ -123,14 +88,12 @@ const ViewContainer = (0, mobx_react_1.observer)(({ view, onClose, onMinimize, s
     }, []);
     return (react_1.default.createElement(material_1.Paper, { ref: ref, elevation: 12, className: classes.viewContainer, style: { ...style, padding: `0px ${padWidth} ${padWidth}` } },
         react_1.default.createElement("div", { ref: scrollRef, style: { display: 'flex' } },
-            react_1.default.createElement(ViewMenu, { model: view, IconProps: { className: classes.icon } }),
+            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(material_1.Tooltip, { title: "Rename view", arrow: true },
-                react_1.default.createElement(EditableTypography_1.default, { value: (view.displayName ||
-                        (
-                        // @ts-ignore
-                        (_a = view.assemblyNames) === null || _a === void 0 ? void 0 : _a.join(',')) ||
-                        'Untitled view') + (view.minimized ? ' (minimized)' : ''), setValue: val => view.setDisplayName(val), variant: "body2", classes: {
+                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,

package/ui/ViewMenu.d.ts

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

package/ui/ViewMenu.js

@@ -0,0 +1,69 @@
+"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 Menu_1 = __importDefault(require("@mui/icons-material/Menu"));
+const ArrowDownward_1 = __importDefault(require("@mui/icons-material/ArrowDownward"));
+const ArrowUpward_1 = __importDefault(require("@mui/icons-material/ArrowUpward"));
+// locals
+const util_1 = require("../util");
+const Menu_2 = __importDefault(require("./Menu"));
+const ViewMenu = (0, mobx_react_1.observer)(function ({ model, IconButtonProps, IconProps, }) {
+    const [anchorEl, setAnchorEl] = (0, react_1.useState)();
+    const { menuItems } = model;
+    const session = (0, util_1.getSession)(model);
+    const items = [
+        ...(session.views.length > 1
+            ? [
+                {
+                    label: 'Move view up',
+                    icon: ArrowUpward_1.default,
+                    onClick: () => session.moveViewUp(model.id),
+                },
+                {
+                    label: 'Move view down',
+                    icon: ArrowDownward_1.default,
+                    onClick: () => session.moveViewDown(model.id),
+                },
+            ]
+            : []),
+        // <=1.3.3 didn't use a function, so check as value also
+        ...((typeof menuItems === 'function' ? menuItems() : menuItems) || []),
+    ];
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(material_1.IconButton, { ...IconButtonProps, onClick: event => setAnchorEl(event.currentTarget), "data-testid": "view_menu_icon" },
+            react_1.default.createElement(Menu_1.default, { ...IconProps, fontSize: "small" })),
+        react_1.default.createElement(Menu_2.default, { anchorEl: anchorEl, open: Boolean(anchorEl), onMenuItemClick: (_event, callback) => {
+                callback();
+                setAnchorEl(undefined);
+            }, onClose: () => setAnchorEl(undefined), menuItems: items })));
+});
+exports.default = ViewMenu;

package/ui/ViewPanel.d.ts

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