@jbrowse/core 2.2.2 → 2.3.1

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

package/ui/ViewLauncher.js

@@ -0,0 +1,50 @@
+"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;
+};
+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");
+const mui_1 = require("tss-react/mui");
+// locals
+const util_1 = require("../util");
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    selectPaper: {
+        padding: theme.spacing(4),
+    },
+}));
+const ViewLauncher = (0, mobx_react_1.observer)(({ session }) => {
+    var _a;
+    const { classes } = useStyles();
+    const { pluginManager } = (0, util_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(({ displayName, name }) => (react_1.default.createElement(material_1.MenuItem, { key: name, value: name }, displayName))))),
+        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"))));
+});
+exports.default = ViewLauncher;

package/ui/index.d.ts

@@ -1,19 +1,19 @@
 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';
 export { default as AssemblySelector } from './AssemblySelector';
-export { default as FileSelector } from './FileSelector';
-export { default as PrerenderedCanvas } from './PrerenderedCanvas';
-export { default as ResizeHandle } from './ResizeHandle';
+export { default as CascadingMenu } from './CascadingMenu';
+export { default as Dialog } from './Dialog';
 export { default as EditableTypography } from './EditableTypography';
+export { default as ErrorMessage } from './ErrorMessage';
 export { default as FactoryResetDialog } from './FactoryResetDialog';
-export { default as Tooltip } from './Tooltip';
 export { default as FatalErrorDialog } from './FatalErrorDialog';
+export { default as FileSelector } from './FileSelector';
+export { default as LoadingEllipses } from './LoadingEllipses';
 export { default as Menu } from './Menu';
-export { default as CascadingMenu } from './CascadingMenu';
+export { default as PrerenderedCanvas } from './PrerenderedCanvas';
+export { default as Tooltip } from './Tooltip';
+export { default as ReturnToImportFormDialog } from './ReturnToImportFormDialog';
+export { default as ResizeHandle } from './ResizeHandle';
 export { default as SanitizedHTML } from './SanitizedHTML';
-export { default as LoadingEllipses } from './LoadingEllipses';
 export * from './Menu';

package/ui/index.js

@@ -17,41 +17,41 @@ 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.Dialog = exports.Logomark = exports.LogoFull = void 0;
+exports.SanitizedHTML = exports.ResizeHandle = exports.ReturnToImportFormDialog = exports.Tooltip = exports.PrerenderedCanvas = exports.Menu = exports.LoadingEllipses = exports.FileSelector = exports.FatalErrorDialog = exports.FactoryResetDialog = exports.ErrorMessage = exports.EditableTypography = exports.Dialog = exports.CascadingMenu = exports.AssemblySelector = exports.App = 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");
-Object.defineProperty(exports, "ReturnToImportFormDialog", { enumerable: true, get: function () { return __importDefault(ReturnToImportFormDialog_1).default; } });
-var ErrorMessage_1 = require("./ErrorMessage");
-Object.defineProperty(exports, "ErrorMessage", { enumerable: true, get: function () { return __importDefault(ErrorMessage_1).default; } });
 var AssemblySelector_1 = require("./AssemblySelector");
 Object.defineProperty(exports, "AssemblySelector", { enumerable: true, get: function () { return __importDefault(AssemblySelector_1).default; } });
-var FileSelector_1 = require("./FileSelector");
-Object.defineProperty(exports, "FileSelector", { enumerable: true, get: function () { return __importDefault(FileSelector_1).default; } });
-var PrerenderedCanvas_1 = require("./PrerenderedCanvas");
-Object.defineProperty(exports, "PrerenderedCanvas", { enumerable: true, get: function () { return __importDefault(PrerenderedCanvas_1).default; } });
-var ResizeHandle_1 = require("./ResizeHandle");
-Object.defineProperty(exports, "ResizeHandle", { enumerable: true, get: function () { return __importDefault(ResizeHandle_1).default; } });
+var CascadingMenu_1 = require("./CascadingMenu");
+Object.defineProperty(exports, "CascadingMenu", { enumerable: true, get: function () { return __importDefault(CascadingMenu_1).default; } });
+var Dialog_1 = require("./Dialog");
+Object.defineProperty(exports, "Dialog", { enumerable: true, get: function () { return __importDefault(Dialog_1).default; } });
 var EditableTypography_1 = require("./EditableTypography");
 Object.defineProperty(exports, "EditableTypography", { enumerable: true, get: function () { return __importDefault(EditableTypography_1).default; } });
+var ErrorMessage_1 = require("./ErrorMessage");
+Object.defineProperty(exports, "ErrorMessage", { enumerable: true, get: function () { return __importDefault(ErrorMessage_1).default; } });
 var FactoryResetDialog_1 = require("./FactoryResetDialog");
 Object.defineProperty(exports, "FactoryResetDialog", { enumerable: true, get: function () { return __importDefault(FactoryResetDialog_1).default; } });
-var Tooltip_1 = require("./Tooltip");
-Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return __importDefault(Tooltip_1).default; } });
 var FatalErrorDialog_1 = require("./FatalErrorDialog");
 Object.defineProperty(exports, "FatalErrorDialog", { enumerable: true, get: function () { return __importDefault(FatalErrorDialog_1).default; } });
+var FileSelector_1 = require("./FileSelector");
+Object.defineProperty(exports, "FileSelector", { enumerable: true, get: function () { return __importDefault(FileSelector_1).default; } });
+var LoadingEllipses_1 = require("./LoadingEllipses");
+Object.defineProperty(exports, "LoadingEllipses", { enumerable: true, get: function () { return __importDefault(LoadingEllipses_1).default; } });
 var Menu_1 = require("./Menu");
 Object.defineProperty(exports, "Menu", { enumerable: true, get: function () { return __importDefault(Menu_1).default; } });
-var CascadingMenu_1 = require("./CascadingMenu");
-Object.defineProperty(exports, "CascadingMenu", { enumerable: true, get: function () { return __importDefault(CascadingMenu_1).default; } });
+var PrerenderedCanvas_1 = require("./PrerenderedCanvas");
+Object.defineProperty(exports, "PrerenderedCanvas", { enumerable: true, get: function () { return __importDefault(PrerenderedCanvas_1).default; } });
+var Tooltip_1 = require("./Tooltip");
+Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return __importDefault(Tooltip_1).default; } });
+var ReturnToImportFormDialog_1 = require("./ReturnToImportFormDialog");
+Object.defineProperty(exports, "ReturnToImportFormDialog", { enumerable: true, get: function () { return __importDefault(ReturnToImportFormDialog_1).default; } });
+var ResizeHandle_1 = require("./ResizeHandle");
+Object.defineProperty(exports, "ResizeHandle", { enumerable: true, get: function () { return __importDefault(ResizeHandle_1).default; } });
 var SanitizedHTML_1 = require("./SanitizedHTML");
 Object.defineProperty(exports, "SanitizedHTML", { enumerable: true, get: function () { return __importDefault(SanitizedHTML_1).default; } });
-var LoadingEllipses_1 = require("./LoadingEllipses");
-Object.defineProperty(exports, "LoadingEllipses", { enumerable: true, get: function () { return __importDefault(LoadingEllipses_1).default; } });
 __exportStar(require("./Menu"), exports);

package/util/Base1DUtils.js

@@ -109,7 +109,7 @@ function pxToBp(self, px) {
             bpSoFar += len;
         }
     }
-    if (bp >= bpSoFar) {
+    if (bp >= bpSoFar && displayedRegions.length) {
         const region = displayedRegions[displayedRegions.length - 1];
         const len = region.end - region.start;
         const offset = bp - bpSoFar + len;

package/util/dedupe.d.ts

@@ -0,0 +1,3 @@
+type Hasher<T> = (input: T) => string;
+export declare function dedupe<T>(list: T[], hasher?: Hasher<T>): T[];
+export {};

package/util/dedupe.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dedupe = void 0;
+// from https://github.com/seriousManual/dedupe/blob/master/LICENSE
+function dedupe(list, hasher = JSON.stringify) {
+    const clone = [];
+    const lookup = new Set();
+    for (let i = 0; i < list.length; i++) {
+        const entry = list[i];
+        const hashed = hasher(entry);
+        if (!lookup.has(hashed)) {
+            clone.push(entry);
+            lookup.add(hashed);
+        }
+    }
+    return clone;
+}
+exports.dedupe = dedupe;