@jbrowse/core 2.2.1 → 2.3.0

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.js

@@ -32,18 +32,16 @@ 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");
-const mobx_state_tree_1 = require("mobx-state-tree");
 // locals
-const configuration_1 = require("../configuration");
+const util_1 = require("../util");
 // ui elements
 const DrawerWidget_1 = __importDefault(require("./DrawerWidget"));
-const DropDownMenu_1 = __importDefault(require("./DropDownMenu"));
+const AppToolbar_1 = __importDefault(require("./AppToolbar"));
 const ErrorMessage_1 = __importDefault(require("./ErrorMessage"));
 const LoadingEllipses_1 = __importDefault(require("./LoadingEllipses"));
-const EditableTypography_1 = __importDefault(require("./EditableTypography"));
 const Snackbar_1 = __importDefault(require("./Snackbar"));
 const ViewContainer_1 = __importDefault(require("./ViewContainer"));
-const Logo_1 = require("./Logo");
+const ViewLauncher_1 = __importDefault(require("./ViewLauncher"));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     root: {
         fontFamily: 'Roboto',
@@ -79,75 +77,9 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
     appBar: {
         flexGrow: 1,
     },
-    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,
-    },
-    selectPaper: {
-        padding: theme.spacing(4),
-    },
 }));
-const Logo = (0, mobx_react_1.observer)(({ 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" });
-    }
-});
-const AppToolbar = (0, mobx_react_1.observer)(({ session, HeaderButtons = react_1.default.createElement("div", null), }) => {
-    const { classes } = useStyles();
-    const { savedSessionNames, name, menus } = session;
-    function handleNameChange(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);
-        }
-    }
-    return (react_1.default.createElement(material_1.Toolbar, null,
-        menus.map(menu => (react_1.default.createElement(DropDownMenu_1.default, { key: menu.label, menuTitle: menu.label, menuItems: menu.menuItems, session: session }))),
-        react_1.default.createElement("div", { className: classes.grow }),
-        react_1.default.createElement(material_1.Tooltip, { title: "Rename Session", arrow: true },
-            react_1.default.createElement(EditableTypography_1.default, { value: name, setValue: handleNameChange, variant: "body1", classes: {
-                    inputBase: classes.inputBase,
-                    inputRoot: classes.inputRoot,
-                    inputFocused: classes.inputFocused,
-                } })),
-        HeaderButtons,
-        react_1.default.createElement("div", { className: classes.grow }),
-        react_1.default.createElement("div", { style: { width: 150, maxHeight: 48 } },
-            react_1.default.createElement(Logo, { session: session }))));
-});
-const ViewLauncher = (0, mobx_react_1.observer)(({ session }) => {
-    var _a;
-    const { classes } = useStyles();
-    const { pluginManager } = (0, mobx_state_tree_1.getEnv)(session);
-    const viewTypes = pluginManager.getElementTypeRecord('view').all();
-    const [value, setValue] = (0, react_1.useState)((_a = viewTypes[0]) === null || _a === void 0 ? void 0 : _a.name);
-    return (react_1.default.createElement(material_1.Paper, { className: classes.selectPaper },
-        react_1.default.createElement(material_1.Typography, null, "Select a view to launch"),
-        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"))));
-});
-const ViewPanel = (0, mobx_react_1.observer)(({ view, session }) => {
-    const { pluginManager } = (0, mobx_state_tree_1.getEnv)(session);
+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}`);
@@ -155,9 +87,9 @@ const ViewPanel = (0, mobx_react_1.observer)(({ view, session }) => {
     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, getTrackType: pluginManager.getTrackType })))) : (false)));
+            react_1.default.createElement(ReactComponent, { model: view, session: session })))) : (false)));
 });
-const App = (0, mobx_react_1.observer)((props) => {
+const App = (0, mobx_react_1.observer)(function (props) {
     const { session } = props;
     const { classes } = useStyles();
     const { minimized, visibleWidget, drawerWidth, activeWidgets, views, drawerPosition, } = session;
@@ -184,9 +116,9 @@ const App = (0, mobx_react_1.observer)((props) => {
         react_1.default.createElement("div", { className: classes.menuBarAndComponents },
             react_1.default.createElement("div", { className: classes.menuBar },
                 react_1.default.createElement(material_1.AppBar, { className: classes.appBar, position: "static" },
-                    react_1.default.createElement(AppToolbar, { ...props }))),
+                    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, { ...props })),
+                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 })),
                 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.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { AnyConfigurationModel } from '../configuration';
+declare const Logo: ({ session, }: {
+    session: {
+        configuration: AnyConfigurationModel;
+    };
+}) => JSX.Element;
+export default Logo;

package/ui/AppLogo.js

@@ -0,0 +1,22 @@
+"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 mobx_react_1 = require("mobx-react");
+// locals
+const configuration_1 = require("../configuration");
+// ui elements
+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" });
+    }
+});
+exports.default = Logo;

package/ui/AppToolbar.d.ts

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

package/ui/AppToolbar.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const material_1 = require("@mui/material");
+const mui_1 = require("tss-react/mui");
+const mobx_react_1 = require("mobx-react");
+// ui elements
+const DropDownMenu_1 = __importDefault(require("./DropDownMenu"));
+const EditableTypography_1 = __importDefault(require("./EditableTypography"));
+const AppLogo_1 = __importDefault(require("./AppLogo"));
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    grow: {
+        flexGrow: 1,
+    },
+    inputBase: {
+        color: theme.palette.primary.contrastText,
+    },
+    inputRoot: {
+        '&:hover': {
+            backgroundColor: theme.palette.primary.light,
+        },
+    },
+    inputFocused: {
+        borderColor: theme.palette.secondary.main,
+        backgroundColor: theme.palette.primary.light,
+    },
+}));
+const AppToolbar = (0, mobx_react_1.observer)(function ({ session, HeaderButtons = react_1.default.createElement("div", null), }) {
+    const { classes } = useStyles();
+    const { savedSessionNames, name, menus } = session;
+    function handleNameChange(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);
+        }
+    }
+    return (react_1.default.createElement(material_1.Toolbar, null,
+        menus.map(menu => (react_1.default.createElement(DropDownMenu_1.default, { key: menu.label, menuTitle: menu.label, menuItems: menu.menuItems, session: session }))),
+        react_1.default.createElement("div", { className: classes.grow }),
+        react_1.default.createElement(material_1.Tooltip, { title: "Rename Session", arrow: true },
+            react_1.default.createElement(EditableTypography_1.default, { value: name, setValue: handleNameChange, variant: "body1", classes: {
+                    inputBase: classes.inputBase,
+                    inputRoot: classes.inputRoot,
+                    inputFocused: classes.inputFocused,
+                } })),
+        HeaderButtons,
+        react_1.default.createElement("div", { className: classes.grow }),
+        react_1.default.createElement("div", { style: { width: 150, maxHeight: 48 } },
+            react_1.default.createElement(AppLogo_1.default, { session: session }))));
+});
+exports.default = AppToolbar;

package/ui/AssemblySelector.d.ts

@@ -1,11 +1,13 @@
 /// <reference types="react" />
-import { InputProps as IIP } from '@mui/material';
+import { InputProps as IIP, TextFieldProps as TFP } from '@mui/material';
 import { AbstractSessionModel } from '../util';
-declare const AssemblySelector: ({ session, onChange, selected, InputProps, extra, }: {
+declare const AssemblySelector: ({ session, onChange, selected, InputProps, TextFieldProps, localStorageKey, helperText, }: {
     session: AbstractSessionModel;
+    helperText?: string | undefined;
     onChange: (arg: string) => void;
     selected?: string | undefined;
+    localStorageKey?: string | undefined;
     InputProps?: IIP | undefined;
-    extra?: unknown;
+    TextFieldProps?: TFP | undefined;
 }) => JSX.Element;
 export default AssemblySelector;

package/ui/AssemblySelector.js

@@ -35,17 +35,17 @@ const useStyles = (0, mui_1.makeStyles)()({
         minWidth: 180,
     },
 });
-const AssemblySelector = (0, mobx_react_1.observer)(({ session, onChange, selected, InputProps, extra = 0, }) => {
+const AssemblySelector = (0, mobx_react_1.observer)(({ session, onChange, selected, InputProps, TextFieldProps, localStorageKey, helperText = 'Select assembly to view', }) => {
     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] = typeof jest === 'undefined'
+    const [lastSelected, setLastSelected] = typeof jest === 'undefined' && localStorageKey
         ? (0, util_1.useLocalStorage)(`lastAssembly-${[
             window.location.host + window.location.pathname,
             config,
-            extra,
+            localStorageKey,
         ].join('-')}`, selected)
         : (0, react_1.useState)(selected);
     const selection = assemblyNames.includes(lastSelected || '')
@@ -57,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 || helperText, value: selection || '', inputProps: { 'data-testid': 'assembly-selector' }, onChange: event => setLastSelected(event.target.value), error: !!error, InputProps: InputProps, disabled: !!error, className: classes.importFormEntry, ...TextFieldProps }, 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/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/PrerenderedCanvas.d.ts

@@ -1,28 +1,11 @@
 /// <reference types="react" />
-import ReactPropTypes from 'prop-types';
 declare function PrerenderedCanvas(props: {
     width: number;
     height: number;
-    highResolutionScaling: number;
-    style: any;
-    imageData: any;
+    highResolutionScaling?: number;
+    style?: any;
+    imageData?: any;
     showSoftClip?: boolean;
     blockKey?: string;
 }): JSX.Element;
-declare namespace PrerenderedCanvas {
-    var propTypes: {
-        height: ReactPropTypes.Validator<number>;
-        width: ReactPropTypes.Validator<number>;
-        highResolutionScaling: ReactPropTypes.Requireable<number>;
-        style: ReactPropTypes.Requireable<{
-            [x: string]: any;
-        }>;
-        imageData: ReactPropTypes.Requireable<any>;
-    };
-    var defaultProps: {
-        imageData: undefined;
-        highResolutionScaling: number;
-        style: {};
-    };
-}
 export default PrerenderedCanvas;

package/ui/PrerenderedCanvas.js

@@ -22,16 +22,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 });
 /* eslint-disable @typescript-eslint/no-explicit-any */
-const prop_types_1 = __importDefault(require("prop-types"));
 const react_1 = __importStar(require("react"));
 const offscreenCanvasPonyfill_1 = require("../util/offscreenCanvasPonyfill");
 function PrerenderedCanvas(props) {
-    const { width, height, highResolutionScaling, style, imageData, blockKey, showSoftClip, } = props;
+    const { width, height, highResolutionScaling = 1, style = {}, imageData, blockKey, showSoftClip, } = props;
     const [done, setDone] = (0, react_1.useState)(false);
     const featureCanvas = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
@@ -54,18 +50,4 @@ function PrerenderedCanvas(props) {
     const testId = `prerendered_canvas${softClipString}${blockKeyStr}${done ? '_done' : ''}`;
     return (react_1.default.createElement("canvas", { "data-testid": testId, ref: featureCanvas, width: width * highResolutionScaling, height: height * highResolutionScaling, style: { width, height, ...style } }));
 }
-PrerenderedCanvas.propTypes = {
-    height: prop_types_1.default.number.isRequired,
-    width: prop_types_1.default.number.isRequired,
-    highResolutionScaling: prop_types_1.default.number,
-    style: prop_types_1.default.objectOf(prop_types_1.default.any),
-    imageData: prop_types_1.default.any,
-    // config: ReactPropTypes.objectOf(ReactPropTypes.any),
-};
-PrerenderedCanvas.defaultProps = {
-    imageData: undefined,
-    highResolutionScaling: 1,
-    style: {},
-    // config: {},
-};
 exports.default = PrerenderedCanvas;

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.js

@@ -1,79 +1,33 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const material_1 = require("@mui/material");
-const Close_1 = __importDefault(require("@mui/icons-material/Close"));
 const mobx_react_1 = require("mobx-react");
+// icons
+const Close_1 = __importDefault(require("@mui/icons-material/Close"));
 function MessageSnackbar({ session, }) {
-    const [open, setOpen] = (0, react_1.useState)(false);
-    const [snackbarMessage, setSnackbarMessage] = (0, react_1.useState)();
     const { popSnackbarMessage, snackbarMessages } = session;
     const latestMessage = snackbarMessages.length
         ? snackbarMessages[snackbarMessages.length - 1]
         : null;
-    (0, react_1.useEffect)(() => {
-        let timeoutId;
-        if (snackbarMessage) {
-            if (!latestMessage) {
-                setSnackbarMessage(undefined);
-            }
-            else if (snackbarMessage[0] !== latestMessage[0]) {
-                setOpen(false);
-                timeoutId = setTimeout(() => {
-                    setSnackbarMessage(latestMessage);
-                    setOpen(true);
-                }, 100);
-            }
-        }
-        else if (latestMessage) {
-            setSnackbarMessage(latestMessage);
-            setOpen(true);
-        }
-        return () => {
-            clearTimeout(timeoutId);
-        };
-    }, [latestMessage, snackbarMessage]);
     const handleClose = (_event, reason) => {
         if (reason === 'clickaway') {
             return;
         }
         popSnackbarMessage();
-        setOpen(false);
     };
-    const [message, level, action] = snackbarMessage || [];
-    return (react_1.default.createElement(material_1.Snackbar, { open: open && !!message, onClose: handleClose, anchorOrigin: { vertical: 'bottom', horizontal: 'center' } },
+    const open = !!latestMessage;
+    const [message, level, action] = latestMessage || [];
+    return (react_1.default.createElement(material_1.Snackbar, { open: open, onClose: handleClose, anchorOrigin: { vertical: 'bottom', horizontal: 'center' } },
         react_1.default.createElement(material_1.Alert, { onClose: handleClose, action: action ? (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(material_1.Button, { color: "inherit", onClick: e => {
                         action.onClick();
                         handleClose(e);
                     } }, action.name),
-                react_1.default.createElement(material_1.IconButton, { "aria-label": "close", color: "inherit", onClick: handleClose },
+                react_1.default.createElement(material_1.IconButton, { color: "inherit", onClick: handleClose },
                     react_1.default.createElement(Close_1.default, null)))) : null, severity: level || 'warning' }, message)));
 }
 exports.default = (0, mobx_react_1.observer)(MessageSnackbar);

package/ui/ViewLauncher.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { NotificationLevel, SnackAction, SessionWithDrawerWidgets } 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 ViewLauncher: ({ session }: {
+    session: AppSession;
+}) => JSX.Element;
+export default ViewLauncher;