@jbrowse/core 2.2.0 → 2.2.2

package/ui/AboutDialog.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { AnyConfigurationModel } from '../configuration';
-export declare function FileInfo({ config }: {
+export declare function FileInfoPanel({ config }: {
     config: AnyConfigurationModel;
 }): JSX.Element | null;
 export declare function AboutContents({ config }: {

package/ui/AboutDialog.js

@@ -26,29 +26,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AboutContents = exports.FileInfo = void 0;
+exports.AboutContents = exports.FileInfoPanel = void 0;
 const react_1 = __importStar(require("react"));
 const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
 const material_1 = require("@mui/material");
-const Close_1 = __importDefault(require("@mui/icons-material/Close"));
 const mui_1 = require("tss-react/mui");
 const configuration_1 = require("../configuration");
+const Dialog_1 = __importDefault(require("./Dialog"));
 const LoadingEllipses_1 = __importDefault(require("./LoadingEllipses"));
 const util_1 = require("../util");
 const tracks_1 = require("../util/tracks");
 const BaseFeatureDetail_1 = require("../BaseFeatureWidget/BaseFeatureDetail");
-const useStyles = (0, mui_1.makeStyles)()(theme => ({
-    closeButton: {
-        position: 'absolute',
-        right: theme.spacing(1),
-        top: theme.spacing(1),
-        color: theme.palette.grey[500],
-    },
+const useStyles = (0, mui_1.makeStyles)()({
     content: {
         minWidth: 800,
     },
-}));
-function FileInfo({ config }) {
+});
+function FileInfoPanel({ config }) {
     const [error, setError] = (0, react_1.useState)();
     const [info, setInfo] = (0, react_1.useState)();
     const session = (0, util_1.getSession)(config);
@@ -89,7 +83,7 @@ function FileInfo({ config }) {
         : info || {};
     return info !== null ? (react_1.default.createElement(BaseFeatureDetail_1.BaseCard, { title: "File info" }, error ? (react_1.default.createElement(material_1.Typography, { color: "error" }, `${error}`)) : info === undefined ? (react_1.default.createElement(LoadingEllipses_1.default, { message: "Loading file data" })) : (react_1.default.createElement(BaseFeatureDetail_1.Attributes, { attributes: details })))) : null;
 }
-exports.FileInfo = FileInfo;
+exports.FileInfoPanel = FileInfoPanel;
 function AboutContents({ config }) {
     const [copied, setCopied] = (0, react_1.useState)(false);
     const conf = (0, configuration_1.readConfObject)(config);
@@ -115,7 +109,7 @@ function AboutContents({ config }) {
             react_1.default.createElement(BaseFeatureDetail_1.Attributes, { attributes: confPostExt, omit: ['displays', 'baseUri', 'refNames', 'formatAbout'], hideUris: hideUris })),
         ExtraPanel ? (react_1.default.createElement(BaseFeatureDetail_1.BaseCard, { title: ExtraPanel.name },
             react_1.default.createElement(ExtraPanel.Component, { config: config }))) : null,
-        react_1.default.createElement(FileInfo, { config: config })));
+        react_1.default.createElement(FileInfoPanel, { config: config })));
 }
 exports.AboutContents = AboutContents;
 function AboutDialog({ config, handleClose, }) {
@@ -124,11 +118,7 @@ function AboutDialog({ config, handleClose, }) {
     const trackName = (0, tracks_1.getTrackName)(config, session);
     const { pluginManager } = (0, util_1.getEnv)(session);
     const AboutComponent = pluginManager.evaluateExtensionPoint('Core-replaceAbout', AboutContents, { session, config });
-    return (react_1.default.createElement(material_1.Dialog, { open: true, onClose: handleClose, maxWidth: "xl" },
-        react_1.default.createElement(material_1.DialogTitle, null,
-            trackName,
-            react_1.default.createElement(material_1.IconButton, { className: classes.closeButton, onClick: () => handleClose(), size: "large" },
-                react_1.default.createElement(Close_1.default, null))),
+    return (react_1.default.createElement(Dialog_1.default, { open: true, onClose: handleClose, title: trackName, maxWidth: "xl" },
         react_1.default.createElement(material_1.DialogContent, { className: classes.content },
             react_1.default.createElement(AboutComponent, { config: config }))));
 }

package/ui/App.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { NotificationLevel, SessionWithDrawerWidgets, SnackAction } from '../util';
-import { MenuItem as JBMenuItem } from './index';
-declare type SnackbarMessage = [string, NotificationLevel, SnackAction];
+import { MenuItem as JBMenuItem } from './Menu';
+type SnackbarMessage = [string, NotificationLevel, SnackAction];
 declare const App: (props: {
     HeaderButtons?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
     session: SessionWithDrawerWidgets & {

package/ui/App.js

@@ -35,14 +35,15 @@ const mobx_react_1 = require("mobx-react");
 const mobx_state_tree_1 = require("mobx-state-tree");
 // locals
 const configuration_1 = require("../configuration");
+// ui elements
 const DrawerWidget_1 = __importDefault(require("./DrawerWidget"));
 const DropDownMenu_1 = __importDefault(require("./DropDownMenu"));
 const ErrorMessage_1 = __importDefault(require("./ErrorMessage"));
 const LoadingEllipses_1 = __importDefault(require("./LoadingEllipses"));
 const EditableTypography_1 = __importDefault(require("./EditableTypography"));
-const Logo_1 = require("./Logo");
 const Snackbar_1 = __importDefault(require("./Snackbar"));
 const ViewContainer_1 = __importDefault(require("./ViewContainer"));
+const Logo_1 = require("./Logo");
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     root: {
         fontFamily: 'Roboto',
@@ -143,9 +144,7 @@ const ViewLauncher = (0, mobx_react_1.observer)(({ session }) => {
         react_1.default.createElement(material_1.FormControl, { style: { margin: 2 } },
             react_1.default.createElement(material_1.Select, { value: value, onChange: event => setValue(event.target.value) }, viewTypes.map(({ name }) => (react_1.default.createElement(material_1.MenuItem, { key: name, value: name }, name))))),
         react_1.default.createElement(material_1.FormControl, { style: { margin: 2 } },
-            react_1.default.createElement(material_1.Button, { onClick: () => {
-                    session.addView(value, {});
-                }, variant: "contained", color: "primary" }, "Launch view"))));
+            react_1.default.createElement(material_1.Button, { onClick: () => session.addView(value, {}), variant: "contained", color: "primary" }, "Launch view"))));
 });
 const ViewPanel = (0, mobx_react_1.observer)(({ view, session }) => {
     const { pluginManager } = (0, mobx_state_tree_1.getEnv)(session);
@@ -154,9 +153,9 @@ const ViewPanel = (0, mobx_react_1.observer)(({ view, session }) => {
         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) },
+    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, getTrackType: pluginManager.getTrackType }))));
+            react_1.default.createElement(ReactComponent, { model: view, session: session, getTrackType: pluginManager.getTrackType })))) : (false)));
 });
 const App = (0, mobx_react_1.observer)((props) => {
     const { session } = props;
@@ -187,8 +186,7 @@ const App = (0, mobx_react_1.observer)((props) => {
                 react_1.default.createElement(material_1.AppBar, { className: classes.appBar, position: "static" },
                     react_1.default.createElement(AppToolbar, { ...props }))),
             react_1.default.createElement("div", { className: classes.components },
-                views.length ? (views.map(view => (react_1.default.createElement(react_error_boundary_1.ErrorBoundary, { key: `view-${view.id}`, FallbackComponent: ({ error }) => (react_1.default.createElement(ErrorMessage_1.default, { error: error })) },
-                    react_1.default.createElement(ViewPanel, { view: view, session: session }))))) : (react_1.default.createElement(ViewLauncher, { ...props })),
+                views.length ? (views.map(view => (react_1.default.createElement(ViewPanel, { key: `view-${view.id}`, view: view, session: session })))) : (react_1.default.createElement(ViewLauncher, { ...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/AssemblySelector.d.ts

@@ -4,7 +4,7 @@ import { AbstractSessionModel } from '../util';
 declare const AssemblySelector: ({ session, onChange, selected, InputProps, extra, }: {
     session: AbstractSessionModel;
     onChange: (arg: string) => void;
-    selected: string | undefined;
+    selected?: string | undefined;
     InputProps?: IIP | undefined;
     extra?: unknown;
 }) => JSX.Element;

package/ui/AssemblySelector.js

@@ -24,28 +24,30 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
-const mobx_react_1 = require("mobx-react");
 const material_1 = require("@mui/material");
-const util_1 = require("@jbrowse/core/util");
+const mobx_react_1 = require("mobx-react");
 const mui_1 = require("tss-react/mui");
 // locals
 const configuration_1 = require("../configuration");
-const useStyles = (0, mui_1.makeStyles)()(() => ({
+const util_1 = require("../util");
+const useStyles = (0, mui_1.makeStyles)()({
     importFormEntry: {
         minWidth: 180,
     },
-}));
+});
 const AssemblySelector = (0, mobx_react_1.observer)(({ session, onChange, selected, InputProps, extra = 0, }) => {
     const { classes } = useStyles();
     const { assemblyNames, assemblyManager } = session;
     // constructs a localstorage key based on host/path/config to help
     // remember. non-config assists usage with e.g. embedded apps
     const config = new URLSearchParams(window.location.search).get('config');
-    const [lastSelected, setLastSelected] = (0, util_1.useLocalStorage)(`lastAssembly-${[
-        window.location.host + window.location.pathname,
-        config,
-        extra,
-    ].join('-')}`, selected);
+    const [lastSelected, setLastSelected] = typeof jest === 'undefined'
+        ? (0, util_1.useLocalStorage)(`lastAssembly-${[
+            window.location.host + window.location.pathname,
+            config,
+            extra,
+        ].join('-')}`, selected)
+        : (0, react_1.useState)(selected);
     const selection = assemblyNames.includes(lastSelected || '')
         ? lastSelected
         : selected;
@@ -55,7 +57,7 @@ const AssemblySelector = (0, mobx_react_1.observer)(({ session, onChange, select
         }
     }, [selection, onChange, selected]);
     const error = assemblyNames.length ? '' : 'No configured assemblies';
-    return (react_1.default.createElement(material_1.TextField, { select: true, label: "Assembly", variant: "outlined", helperText: error || 'Select assembly to view', value: selection, inputProps: { 'data-testid': 'assembly-selector' }, onChange: event => setLastSelected(event.target.value), error: !!error, InputProps: InputProps, disabled: !!error, className: classes.importFormEntry }, assemblyNames.map(name => {
+    return (react_1.default.createElement(material_1.TextField, { select: true, label: "Assembly", variant: "outlined", helperText: error || 'Select assembly to view', value: selection || '', inputProps: { 'data-testid': 'assembly-selector' }, onChange: event => setLastSelected(event.target.value), error: !!error, InputProps: InputProps, disabled: !!error, className: classes.importFormEntry }, assemblyNames.map(name => {
         const assembly = assemblyManager.get(name);
         const displayName = assembly ? (0, configuration_1.getConf)(assembly, 'displayName') : '';
         return (react_1.default.createElement(material_1.MenuItem, { key: name, value: name }, displayName || name));

package/ui/Dialog.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { DialogProps } from '@mui/material';
+declare function JBrowseDialog(props: DialogProps & {
+    title: string;
+}): JSX.Element;
+declare const _default: typeof JBrowseDialog;
+export default _default;

package/ui/Dialog.js

@@ -0,0 +1,35 @@
+"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 mobx_react_1 = require("mobx-react");
+const mui_1 = require("tss-react/mui");
+// icons
+const Close_1 = __importDefault(require("@mui/icons-material/Close"));
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    closeButton: {
+        position: 'absolute',
+        right: theme.spacing(1),
+        top: theme.spacing(1),
+        color: theme.palette.grey[500],
+    },
+}));
+function JBrowseDialog(props) {
+    const { classes } = useStyles();
+    const { title, children, onClose } = props;
+    return (react_1.default.createElement(material_1.Dialog, { ...props },
+        react_1.default.createElement(material_1.ScopedCssBaseline, null,
+            react_1.default.createElement(material_1.DialogTitle, null,
+                title,
+                onClose ? (react_1.default.createElement(material_1.IconButton, { className: classes.closeButton, onClick: () => {
+                        // @ts-ignore
+                        onClose();
+                    } },
+                    react_1.default.createElement(Close_1.default, null))) : null),
+            react_1.default.createElement(material_1.Divider, null),
+            children)));
+}
+exports.default = (0, mobx_react_1.observer)(JBrowseDialog);

package/ui/EditableTypography.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 import { TypographyProps } from '@mui/material';
-declare type Variant = TypographyProps['variant'];
-declare type EditableTypographyClassKey = 'input' | 'inputBase' | 'inputRoot' | 'inputFocused';
-interface EditableTypographyPropTypes {
+type Variant = TypographyProps['variant'];
+type EditableTypographyClassKey = 'input' | 'inputBase' | 'inputRoot' | 'inputFocused';
+interface Props {
     value: string;
     setValue: (value: string) => void;
     variant: Variant;
     classes?: Partial<Record<EditableTypographyClassKey, string>>;
 }
-declare const EditableTypography: React.ForwardRefExoticComponent<EditableTypographyPropTypes & React.RefAttributes<HTMLDivElement>>;
+declare const EditableTypography: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export default EditableTypography;

package/ui/EditableTypography.js

@@ -48,13 +48,12 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
 const EditableTypography = react_1.default.forwardRef((props, ref) => {
     const { value, setValue, variant, ...other } = props;
     const [editedValue, setEditedValue] = (0, react_1.useState)();
-    const [width, setWidth] = (0, react_1.useState)(0);
     const [sizerNode, setSizerNode] = (0, react_1.useState)(null);
     const [inputNode, setInputNode] = (0, react_1.useState)(null);
     const [blur, setBlur] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
         if (blur) {
-            inputNode && inputNode.blur();
+            inputNode === null || inputNode === void 0 ? void 0 : inputNode.blur();
             setBlur(false);
         }
     }, [blur, inputNode]);
@@ -64,12 +63,11 @@ const EditableTypography = react_1.default.forwardRef((props, ref) => {
     const { classes } = useStyles(props, { props });
     const theme = (0, material_1.useTheme)();
     const clientWidth = sizerNode === null || sizerNode === void 0 ? void 0 : sizerNode.clientWidth;
-    if (clientWidth && clientWidth !== width) {
-        setWidth(clientWidth);
-    }
+    const width = clientWidth || 0;
+    const val = editedValue === undefined ? value : editedValue;
     return (react_1.default.createElement("div", { ...other, ref: ref },
         react_1.default.createElement("div", { style: { position: 'relative' } },
-            react_1.default.createElement(material_1.Typography, { ref: (node) => setSizerNode(node), component: "span", variant: variant, className: classes.typography }, editedValue === undefined ? value : editedValue)),
+            react_1.default.createElement(material_1.Typography, { ref: (node) => setSizerNode(node), component: "span", variant: variant, className: classes.typography }, val)),
         react_1.default.createElement(material_1.InputBase, { inputRef: node => setInputNode(node), className: classes.inputBase, inputProps: {
                 style: {
                     width,
@@ -81,18 +79,16 @@ const EditableTypography = react_1.default.forwardRef((props, ref) => {
                 input: classes.input,
                 root: classes.inputRoot,
                 focused: classes.inputFocused,
-            }, value: editedValue === undefined ? value : editedValue, onChange: event => setEditedValue(event.target.value), onKeyDown: event => {
+            }, value: val, onChange: event => setEditedValue(event.target.value), onKeyDown: event => {
                 if (event.key === 'Enter') {
-                    inputNode && inputNode.blur();
+                    inputNode === null || inputNode === void 0 ? void 0 : inputNode.blur();
                 }
                 else if (event.key === 'Escape') {
                     setEditedValue(undefined);
                     setBlur(true);
                 }
             }, onBlur: () => {
-                if (editedValue && editedValue !== value) {
-                    setValue(editedValue);
-                }
+                setValue(editedValue || '');
                 setEditedValue(undefined);
             } })));
 });

package/ui/FactoryResetDialog.js

@@ -3,13 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const Button_1 = __importDefault(require("@mui/material/Button"));
-const Dialog_1 = __importDefault(require("@mui/material/Dialog"));
-const DialogTitle_1 = __importDefault(require("@mui/material/DialogTitle"));
-const DialogContent_1 = __importDefault(require("@mui/material/DialogContent"));
-const DialogContentText_1 = __importDefault(require("@mui/material/DialogContentText"));
-const DialogActions_1 = __importDefault(require("@mui/material/DialogActions"));
 const react_1 = __importDefault(require("react"));
+const material_1 = require("@mui/material");
+const Dialog_1 = __importDefault(require("@jbrowse/core/ui/Dialog"));
 exports.default = ({ onClose, open, onFactoryReset, }) => {
     function handleDialogClose(action) {
         if (action === 'reset') {
@@ -17,11 +13,10 @@ exports.default = ({ onClose, open, onFactoryReset, }) => {
         }
         onClose();
     }
-    return (react_1.default.createElement(Dialog_1.default, { open: open, onClose: () => handleDialogClose() },
-        react_1.default.createElement(DialogTitle_1.default, { id: "alert-dialog-title" }, "Reset"),
-        react_1.default.createElement(DialogContent_1.default, null,
-            react_1.default.createElement(DialogContentText_1.default, { id: "alert-dialog-description" }, "Are you sure you want to reset? This will restore the default configuration.")),
-        react_1.default.createElement(DialogActions_1.default, null,
-            react_1.default.createElement(Button_1.default, { onClick: () => handleDialogClose(), color: "primary" }, "Cancel"),
-            react_1.default.createElement(Button_1.default, { onClick: () => handleDialogClose('reset'), color: "primary", variant: "contained" }, "OK"))));
+    return (react_1.default.createElement(Dialog_1.default, { title: "Reset", onClose: () => handleDialogClose(), open: open },
+        react_1.default.createElement(material_1.DialogContent, null,
+            react_1.default.createElement(material_1.DialogContentText, null, "Are you sure you want to reset? This will restore the default configuration.")),
+        react_1.default.createElement(material_1.DialogActions, null,
+            react_1.default.createElement(material_1.Button, { onClick: () => handleDialogClose(), color: "primary" }, "Cancel"),
+            react_1.default.createElement(material_1.Button, { onClick: () => handleDialogClose('reset'), color: "primary", variant: "contained" }, "OK"))));
 };

package/ui/Logo.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type LogoVariant = 'color' | 'black' | 'white';
+type LogoVariant = 'color' | 'black' | 'white';
 interface LogoProps {
     variant?: LogoVariant;
 }

package/ui/Menu.d.ts

@@ -8,7 +8,7 @@ interface MenuItemEndDecorationSelectorProps {
     checked: boolean;
     disabled?: boolean;
 }
-declare type MenuItemEndDecorationProps = MenuItemEndDecorationSubMenuProps | MenuItemEndDecorationSelectorProps;
+type MenuItemEndDecorationProps = MenuItemEndDecorationSubMenuProps | MenuItemEndDecorationSelectorProps;
 export declare function MenuItemEndDecoration(props: MenuItemEndDecorationProps): JSX.Element;
 export interface MenuDivider {
     priority?: number;
@@ -44,7 +44,7 @@ export interface SubMenuItem extends BaseMenuItem {
     type?: 'subMenu';
     subMenu: MenuItem[];
 }
-export declare type MenuItem = MenuDivider | MenuSubHeader | NormalMenuItem | CheckboxMenuItem | RadioMenuItem | SubMenuItem;
+export type MenuItem = MenuDivider | MenuSubHeader | NormalMenuItem | CheckboxMenuItem | RadioMenuItem | SubMenuItem;
 interface MenuProps extends PopoverProps {
     menuItems: MenuItem[];
     onMenuItemClick: (event: React.MouseEvent<HTMLLIElement, MouseEvent>, callback: Function) => void;

package/ui/ReturnToImportFormDialog.js

@@ -6,24 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const mobx_react_1 = require("mobx-react");
 const material_1 = require("@mui/material");
-const mui_1 = require("tss-react/mui");
-const Close_1 = __importDefault(require("@mui/icons-material/Close"));
-const useStyles = (0, mui_1.makeStyles)()(theme => ({
-    closeButton: {
-        position: 'absolute',
-        right: theme.spacing(1),
-        top: theme.spacing(1),
-        color: theme.palette.grey[500],
-    },
-}));
+const Dialog_1 = __importDefault(require("./Dialog"));
 function ReturnToImportFormDialog({ model, handleClose, }) {
-    const { classes } = useStyles();
-    return (react_1.default.createElement(material_1.Dialog, { maxWidth: "xl", open: true, onClose: handleClose },
-        react_1.default.createElement(material_1.DialogTitle, null,
-            "Reference sequence",
-            handleClose ? (react_1.default.createElement(material_1.IconButton, { className: classes.closeButton, onClick: () => handleClose(), size: "large" },
-                react_1.default.createElement(Close_1.default, null))) : null),
-        react_1.default.createElement(material_1.Divider, null),
+    return (react_1.default.createElement(Dialog_1.default, { maxWidth: "xl", open: true, onClose: handleClose, title: "Reference sequence" },
         react_1.default.createElement(material_1.DialogContent, null,
             react_1.default.createElement(material_1.Typography, null, "Are you sure you want to return to the import form? This will lose your current view")),
         react_1.default.createElement(material_1.DialogActions, null,

package/ui/Snackbar.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { IAnyStateTreeNode } from 'mobx-state-tree';
 import { AbstractSessionModel, NotificationLevel, SnackAction } from '../util';
-declare type SnackbarMessage = [string, NotificationLevel, SnackAction];
+type SnackbarMessage = [string, NotificationLevel, SnackAction];
 interface SnackbarSession extends AbstractSessionModel {
     snackbarMessages: SnackbarMessage[];
     popSnackbarMessage: () => unknown;

package/ui/ViewContainer.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
 import { IBaseViewModel } from '../pluggableElementTypes/models';
-declare const ViewContainer: ({ view, onClose, style, children, }: {
+declare const ViewContainer: ({ view, onClose, onMinimize, style, children, }: {
     view: IBaseViewModel;
     onClose: () => void;
+    onMinimize: () => void;
     style?: React.CSSProperties | undefined;
     children: React.ReactNode;
 }) => JSX.Element;

package/ui/ViewContainer.js

@@ -29,13 +29,18 @@ 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 styles_1 = require("@mui/material/styles");
 const mobx_react_1 = require("mobx-react");
 const mobx_state_tree_1 = require("mobx-state-tree");
 const react_use_measure_1 = __importDefault(require("react-use-measure"));
 // 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"));
 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 useStyles = (0, mui_1.makeStyles)()(theme => ({
@@ -50,14 +55,6 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
     grow: {
         flexGrow: 1,
     },
-    iconRoot: {
-        '&:hover': {
-            backgroundColor: (0, styles_1.alpha)(theme.palette.secondary.contrastText, theme.palette.action.hoverOpacity),
-            '@media (hover: none)': {
-                backgroundColor: 'transparent',
-            },
-        },
-    },
     input: {
         paddingBottom: 0,
         paddingTop: 2,
@@ -78,17 +75,34 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
 const ViewMenu = (0, mobx_react_1.observer)(({ model, IconButtonProps, IconProps, }) => {
     const [anchorEl, setAnchorEl] = (0, react_1.useState)();
     const { menuItems } = model;
-    // <=1.3.3 didn't use a function
-    const items = typeof menuItems === 'function' ? menuItems() : menuItems;
-    return (items === null || items === void 0 ? void 0 : items.length) ? (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.IconButton, { ...IconButtonProps, style: { padding: 3 }, onClick: event => setAnchorEl(event.currentTarget), "data-testid": "view_menu_icon", size: "small" },
+    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: model.menuItems() }))) : null;
+            }, onClose: () => setAnchorEl(undefined), menuItems: items })));
 });
-const ViewContainer = (0, mobx_react_1.observer)(({ view, onClose, style, children, }) => {
+const ViewContainer = (0, mobx_react_1.observer)(({ view, onClose, onMinimize, style, children, }) => {
     var _a;
     const { classes } = useStyles();
     const theme = (0, material_1.useTheme)();
@@ -109,24 +123,22 @@ const ViewContainer = (0, mobx_react_1.observer)(({ view, onClose, style, childr
     }, []);
     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, IconButtonProps: {
-                    classes: { root: classes.iconRoot },
-                    edge: 'start',
-                }, IconProps: { className: classes.icon } }),
+            react_1.default.createElement(ViewMenu, { 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 ||
+                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', setValue: val => view.setDisplayName(val), variant: "body2", classes: {
+                        '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,
                     } })),
             react_1.default.createElement("div", { className: classes.grow }),
-            react_1.default.createElement(material_1.IconButton, { "data-testid": "close_view", classes: { root: classes.iconRoot }, edge: "end", size: "small", onClick: onClose },
+            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/ui/index.d.ts

@@ -1,5 +1,6 @@
 export * from './theme';
 export { LogoFull, Logomark } from './Logo';
+export { default as Dialog } from './Dialog';
 export { default as App } from './App';
 export { default as ReturnToImportFormDialog } from './ReturnToImportFormDialog';
 export { default as ErrorMessage } from './ErrorMessage';

package/ui/index.js

@@ -17,11 +17,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LoadingEllipses = exports.SanitizedHTML = exports.CascadingMenu = exports.Menu = exports.FatalErrorDialog = exports.Tooltip = exports.FactoryResetDialog = exports.EditableTypography = exports.ResizeHandle = exports.PrerenderedCanvas = exports.FileSelector = exports.AssemblySelector = exports.ErrorMessage = exports.ReturnToImportFormDialog = exports.App = exports.Logomark = exports.LogoFull = void 0;
+exports.LoadingEllipses = exports.SanitizedHTML = exports.CascadingMenu = exports.Menu = exports.FatalErrorDialog = exports.Tooltip = exports.FactoryResetDialog = exports.EditableTypography = exports.ResizeHandle = exports.PrerenderedCanvas = exports.FileSelector = exports.AssemblySelector = exports.ErrorMessage = exports.ReturnToImportFormDialog = exports.App = exports.Dialog = exports.Logomark = exports.LogoFull = void 0;
 __exportStar(require("./theme"), exports);
 var Logo_1 = require("./Logo");
 Object.defineProperty(exports, "LogoFull", { enumerable: true, get: function () { return Logo_1.LogoFull; } });
 Object.defineProperty(exports, "Logomark", { enumerable: true, get: function () { return Logo_1.Logomark; } });
+var Dialog_1 = require("./Dialog");
+Object.defineProperty(exports, "Dialog", { enumerable: true, get: function () { return __importDefault(Dialog_1).default; } });
 var App_1 = require("./App");
 Object.defineProperty(exports, "App", { enumerable: true, get: function () { return __importDefault(App_1).default; } });
 var ReturnToImportFormDialog_1 = require("./ReturnToImportFormDialog");