@jbrowse/app-core 2.10.3 → 2.11.1

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

@@ -13,7 +13,7 @@ type AppSession = SessionWithDrawerWidgets & {
     popSnackbarMessage: () => unknown;
 };
 declare const AppToolbar: ({ session, HeaderButtons, }: {
-    HeaderButtons?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    HeaderButtons?: React.ReactElement;
     session: AppSession;
 }) => React.JSX.Element;
 export default AppToolbar;

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

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

package/dist/ui/App/DialogQueue.js

@@ -27,7 +27,7 @@ const react_1 = __importStar(require("react"));
 const mobx_react_1 = require("mobx-react");
 const DialogQueue = (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: null },
-        react_1.default.createElement(DialogComponent, { ...DialogProps }))) : null));
+    return DialogComponent ? (react_1.default.createElement(react_1.Suspense, { fallback: null },
+        react_1.default.createElement(DialogComponent, { ...DialogProps }))) : null;
 });
 exports.default = DialogQueue;

package/dist/ui/App/Drawer.js

@@ -35,6 +35,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
     paper: {
         overflowY: 'auto',
         height: '100%',
+        position: 'relative',
         zIndex: theme.zIndex.drawer,
         outline: 'none',
         background: theme.palette.background.default,
@@ -52,11 +53,11 @@ const Drawer = (0, mobx_react_1.observer)(function ({ children, session, }) {
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         function handleSelectView(e) {
-            var _a, _b;
+            var _a, _b, _c;
             if (e.target instanceof Element) {
-                if ((ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.contains(e.target)) {
+                if ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) {
                     // @ts-ignore
-                    const visibleWidgetId = (_b = (_a = session.visibleWidget) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.id;
+                    const visibleWidgetId = (_c = (_b = session.visibleWidget) === null || _b === void 0 ? void 0 : _b.view) === null || _c === void 0 ? void 0 : _c.id;
                     if (visibleWidgetId) {
                         session.setFocusedViewId(visibleWidgetId);
                     }

package/dist/ui/App/ViewContainer.js

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

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

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

package/dist/ui/App/ViewMenu.js

@@ -11,8 +11,10 @@ const hooks_1 = require("material-ui-popup-state/hooks");
 const CascadingMenu_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenu"));
 // 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"));
+const KeyboardDoubleArrowDown_1 = __importDefault(require("@mui/icons-material/KeyboardDoubleArrowDown"));
+const KeyboardDoubleArrowUp_1 = __importDefault(require("@mui/icons-material/KeyboardDoubleArrowUp"));
+const KeyboardArrowDown_1 = __importDefault(require("@mui/icons-material/KeyboardArrowDown"));
+const KeyboardArrowUp_1 = __importDefault(require("@mui/icons-material/KeyboardArrowUp"));
 const ViewMenu = (0, mobx_react_1.observer)(function ({ model, IconButtonProps, IconProps, }) {
     const { menuItems } = model;
     const session = (0, util_1.getSession)(model);
@@ -20,33 +22,49 @@ const ViewMenu = (0, mobx_react_1.observer)(function ({ model, IconButtonProps,
         popupId: 'viewMenu',
         variant: 'popover',
     });
-    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) || []),
-    ];
-    // note: This does not use CascadingMenuButton on purpose, because there was a confusing bug related to it!
-    // see https://github.com/GMOD/jbrowse-components/issues/4115
+    // note: This does not use CascadingMenuButton on purpose, because there was
+    // a confusing bug related to it! see
+    // https://github.com/GMOD/jbrowse-components/issues/4115
     //
-    // Make sure to test the Breakpoint split view menu checkboxes if you intend to change this
+    // Make sure to test the Breakpoint split view menu checkboxes if you
+    // intend to change this
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(material_1.IconButton, { ...IconButtonProps, ...(0, hooks_1.bindTrigger)(popupState), "data-testid": "view_menu_icon" },
             react_1.default.createElement(Menu_1.default, { ...IconProps, fontSize: "small" })),
-        react_1.default.createElement(CascadingMenu_1.default, { ...(0, hooks_1.bindPopover)(popupState), onMenuItemClick: (_event, callback) => {
-                callback();
-            }, menuItems: items, popupState: popupState })));
+        react_1.default.createElement(CascadingMenu_1.default, { ...(0, hooks_1.bindPopover)(popupState), onMenuItemClick: (_event, callback) => callback(), menuItems: [
+                ...(session.views.length > 1
+                    ? [
+                        {
+                            label: 'View order',
+                            type: 'subMenu',
+                            subMenu: [
+                                {
+                                    label: 'Move view to top',
+                                    icon: KeyboardDoubleArrowUp_1.default,
+                                    onClick: () => session.moveViewToTop(model.id),
+                                },
+                                {
+                                    label: 'Move view up',
+                                    icon: KeyboardArrowUp_1.default,
+                                    onClick: () => session.moveViewUp(model.id),
+                                },
+                                {
+                                    label: 'Move view down',
+                                    icon: KeyboardArrowDown_1.default,
+                                    onClick: () => session.moveViewDown(model.id),
+                                },
+                                {
+                                    label: 'Move view to bottom',
+                                    icon: KeyboardDoubleArrowDown_1.default,
+                                    onClick: () => session.moveViewToBottom(model.id),
+                                },
+                            ],
+                        },
+                    ]
+                    : []),
+                // <=1.3.3 didn't use a function, so check as value also
+                ...((typeof menuItems === 'function' ? menuItems() : menuItems) ||
+                    []),
+            ], popupState: popupState })));
 });
 exports.default = ViewMenu;

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

@@ -13,7 +13,7 @@ type AppSession = SessionWithDrawerWidgets & {
     popSnackbarMessage: () => unknown;
 };
 declare const AppToolbar: ({ session, HeaderButtons, }: {
-    HeaderButtons?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    HeaderButtons?: React.ReactElement;
     session: AppSession;
 }) => React.JSX.Element;
 export default AppToolbar;

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

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

package/esm/ui/App/DialogQueue.js

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

package/esm/ui/App/Drawer.js

@@ -7,6 +7,7 @@ const useStyles = makeStyles()(theme => ({
     paper: {
         overflowY: 'auto',
         height: '100%',
+        position: 'relative',
         zIndex: theme.zIndex.drawer,
         outline: 'none',
         background: theme.palette.background.default,
@@ -24,11 +25,11 @@ const Drawer = observer(function ({ children, session, }) {
     const ref = useRef(null);
     useEffect(() => {
         function handleSelectView(e) {
-            var _a, _b;
+            var _a, _b, _c;
             if (e.target instanceof Element) {
-                if ((ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.contains(e.target)) {
+                if ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) {
                     // @ts-ignore
-                    const visibleWidgetId = (_b = (_a = session.visibleWidget) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.id;
+                    const visibleWidgetId = (_c = (_b = session.visibleWidget) === null || _b === void 0 ? void 0 : _b.view) === null || _c === void 0 ? void 0 : _c.id;
                     if (visibleWidgetId) {
                         session.setFocusedViewId(visibleWidgetId);
                     }

package/esm/ui/App/ViewContainer.js

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

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

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

package/esm/ui/App/ViewMenu.js

@@ -6,8 +6,10 @@ import { bindTrigger, bindPopover, usePopupState, } from 'material-ui-popup-stat
 import CascadingMenu from '@jbrowse/core/ui/CascadingMenu';
 // icons
 import MenuIcon from '@mui/icons-material/Menu';
-import ArrowDownward from '@mui/icons-material/ArrowDownward';
-import ArrowUpward from '@mui/icons-material/ArrowUpward';
+import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
+import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 const ViewMenu = observer(function ({ model, IconButtonProps, IconProps, }) {
     const { menuItems } = model;
     const session = getSession(model);
@@ -15,33 +17,49 @@ const ViewMenu = observer(function ({ model, IconButtonProps, IconProps, }) {
         popupId: 'viewMenu',
         variant: 'popover',
     });
-    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) || []),
-    ];
-    // note: This does not use CascadingMenuButton on purpose, because there was a confusing bug related to it!
-    // see https://github.com/GMOD/jbrowse-components/issues/4115
+    // note: This does not use CascadingMenuButton on purpose, because there was
+    // a confusing bug related to it! see
+    // https://github.com/GMOD/jbrowse-components/issues/4115
     //
-    // Make sure to test the Breakpoint split view menu checkboxes if you intend to change this
+    // Make sure to test the Breakpoint split view menu checkboxes if you
+    // intend to change this
     return (React.createElement(React.Fragment, null,
         React.createElement(IconButton, { ...IconButtonProps, ...bindTrigger(popupState), "data-testid": "view_menu_icon" },
             React.createElement(MenuIcon, { ...IconProps, fontSize: "small" })),
-        React.createElement(CascadingMenu, { ...bindPopover(popupState), onMenuItemClick: (_event, callback) => {
-                callback();
-            }, menuItems: items, popupState: popupState })));
+        React.createElement(CascadingMenu, { ...bindPopover(popupState), onMenuItemClick: (_event, callback) => callback(), menuItems: [
+                ...(session.views.length > 1
+                    ? [
+                        {
+                            label: 'View order',
+                            type: 'subMenu',
+                            subMenu: [
+                                {
+                                    label: 'Move view to top',
+                                    icon: KeyboardDoubleArrowUpIcon,
+                                    onClick: () => session.moveViewToTop(model.id),
+                                },
+                                {
+                                    label: 'Move view up',
+                                    icon: KeyboardArrowUpIcon,
+                                    onClick: () => session.moveViewUp(model.id),
+                                },
+                                {
+                                    label: 'Move view down',
+                                    icon: KeyboardArrowDownIcon,
+                                    onClick: () => session.moveViewDown(model.id),
+                                },
+                                {
+                                    label: 'Move view to bottom',
+                                    icon: KeyboardDoubleArrowDownIcon,
+                                    onClick: () => session.moveViewToBottom(model.id),
+                                },
+                            ],
+                        },
+                    ]
+                    : []),
+                // <=1.3.3 didn't use a function, so check as value also
+                ...((typeof menuItems === 'function' ? menuItems() : menuItems) ||
+                    []),
+            ], popupState: popupState })));
 });
 export default ViewMenu;

package/package.json

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