@jbrowse/core 2.3.3 → 2.4.0

package/ui/App.js

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

package/ui/Dialog.js

@@ -7,8 +7,11 @@ 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");
+const react_error_boundary_1 = require("react-error-boundary");
 // icons
 const Close_1 = __importDefault(require("@mui/icons-material/Close"));
+// locals
+const ErrorMessage_1 = __importDefault(require("./ErrorMessage"));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     closeButton: {
         position: 'absolute',
@@ -17,6 +20,10 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         color: theme.palette.grey[500],
     },
 }));
+function DialogError({ error }) {
+    return (react_1.default.createElement("div", { style: { width: 800, margin: 40 } },
+        react_1.default.createElement(ErrorMessage_1.default, { error: error })));
+}
 function JBrowseDialog(props) {
     const { classes } = useStyles();
     const { title, children, onClose } = props;
@@ -30,6 +37,6 @@ function JBrowseDialog(props) {
                     } },
                     react_1.default.createElement(Close_1.default, null))) : null),
             react_1.default.createElement(material_1.Divider, null),
-            children)));
+            react_1.default.createElement(react_error_boundary_1.ErrorBoundary, { FallbackComponent: DialogError }, children))));
 }
 exports.default = (0, mobx_react_1.observer)(JBrowseDialog);

package/ui/DropDownMenu.js

@@ -33,9 +33,6 @@ const mobx_react_1 = require("mobx-react");
 const ArrowDropDown_1 = __importDefault(require("@mui/icons-material/ArrowDropDown"));
 const Menu_1 = __importDefault(require("./Menu"));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
-    root: {
-        display: 'flex',
-    },
     buttonRoot: {
         '&:hover': {
             backgroundColor: (0, material_1.alpha)(theme.palette.primary.contrastText, theme.palette.action.hoverOpacity),
@@ -59,7 +56,7 @@ function DropDownMenu({ menuTitle, session, menuItems, }) {
     function handleClose() {
         setOpen(false);
     }
-    return (react_1.default.createElement("div", { className: classes.root },
+    return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(material_1.Button, { ref: anchorEl, onClick: handleToggle, color: "inherit", "data-testid": "dropDownMenuButton", classes: { root: classes.buttonRoot } },
             menuTitle,
             react_1.default.createElement(ArrowDropDown_1.default, null)),

package/ui/EditableTypography.js

@@ -88,7 +88,7 @@ const EditableTypography = react_1.default.forwardRef((props, ref) => {
                     setBlur(true);
                 }
             }, onBlur: () => {
-                setValue(editedValue || '');
+                setValue(editedValue || value || '');
                 setEditedValue(undefined);
             } })));
 });

package/ui/LoadingEllipses.js

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

package/ui/Menu.js

@@ -74,7 +74,7 @@ function MenuItemEndDecoration(props) {
     }
     else if (type === 'checkbox') {
         if (checked) {
-            const color = disabled ? 'inherit' : 'secondary';
+            const color = disabled ? 'inherit' : undefined;
             icon = react_1.default.createElement(CheckBox_1.default, { color: color });
         }
         else {
@@ -83,7 +83,7 @@ function MenuItemEndDecoration(props) {
     }
     else if (type === 'radio') {
         if (checked) {
-            const color = disabled ? 'inherit' : 'secondary';
+            const color = disabled ? 'inherit' : undefined;
             icon = react_1.default.createElement(RadioButtonChecked_1.default, { color: color });
         }
         else {
@@ -245,7 +245,15 @@ const MenuPage = react_1.default.forwardRef((props, ref) => {
 });
 function Menu(props) {
     const { open, onClose, menuItems, onMenuItemClick, ...other } = props;
-    return (react_1.default.createElement(material_1.Popover, { transitionDuration: 0, open: open, onClose: onClose, BackdropProps: { invisible: true }, ...other },
+    return (react_1.default.createElement(material_1.Popover, { open: open, onClose: onClose, BackdropProps: { invisible: true }, anchorOrigin: {
+            vertical: 'bottom',
+            horizontal: 'right',
+            ...other.anchorOrigin,
+        }, transformOrigin: {
+            vertical: 'top',
+            horizontal: 'left',
+            ...other.transformOrigin,
+        }, ...other },
         react_1.default.createElement(MenuPage, { open: open, onClose: onClose, menuItems: menuItems, onMenuItemClick: onMenuItemClick, top: true })));
 }
 exports.default = Menu;

package/ui/ResizeBar.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export declare function useResizeBar(): {
+    ref: React.RefObject<HTMLDivElement>;
+    scrollLeft: number;
+};
+export default function ResizeBar({ widths, setWidths, checkbox, scrollLeft, }: {
+    widths: number[];
+    setWidths: (arg: number[]) => void;
+    checkbox?: boolean;
+    scrollLeft?: number;
+}): JSX.Element;

package/ui/ResizeBar.js

@@ -0,0 +1,94 @@
+"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 });
+exports.useResizeBar = void 0;
+const react_1 = __importStar(require("react"));
+const mui_1 = require("tss-react/mui");
+// locals
+const ResizeHandle_1 = __importDefault(require("./ResizeHandle"));
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    resizeBar: {
+        background: theme.palette.action.disabledBackground,
+        height: 12,
+        position: 'relative',
+        overflow: 'hidden',
+    },
+    tick: {
+        position: 'absolute',
+        height: '100%',
+        pointerEvents: 'none',
+        background: theme.palette.divider,
+        width: 1,
+    },
+    hiddenTick: {
+        position: 'absolute',
+        height: '100%',
+        width: 5,
+    },
+}));
+function useResizeBar() {
+    const ref = (0, react_1.useRef)(null);
+    const [scrollLeft, setScrollLeft] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        const timer = setInterval(() => {
+            var _a;
+            const elt = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelector('.MuiDataGrid-virtualScroller');
+            if (elt) {
+                setScrollLeft(elt.scrollLeft);
+            }
+        }, 100);
+        return () => {
+            clearInterval(timer);
+        };
+    }, []);
+    return { ref, scrollLeft };
+}
+exports.useResizeBar = useResizeBar;
+function Tick({ left, scrollLeft, idx, onDrag, }) {
+    const { classes } = useStyles();
+    const cb = (0, react_1.useCallback)((d) => {
+        onDrag(d, idx);
+    }, [idx, onDrag]);
+    // has an invisible wider than tick mark (1px) clickable area (5px)
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(ResizeHandle_1.default, { onDrag: cb, vertical: true, className: classes.hiddenTick, style: { left: left - scrollLeft - 2.5 } }),
+        react_1.default.createElement("div", { style: { left: left - scrollLeft }, className: classes.tick })));
+}
+function ResizeBar({ widths, setWidths, checkbox, scrollLeft = 0, }) {
+    const { classes } = useStyles();
+    const offsets = [];
+    widths.reduce((a, b, i) => (offsets[i] = a + b), checkbox ? 52 : 0);
+    const onDrag = (0, react_1.useCallback)((distance, idx) => {
+        const newWidths = [...widths];
+        // mui doesn't allow columns smaller than 50
+        newWidths[idx] = Math.max(newWidths[idx] + distance, 50);
+        setWidths(newWidths);
+    }, [widths, setWidths]);
+    return (react_1.default.createElement("div", { className: classes.resizeBar }, offsets.map((left, i) => (react_1.default.createElement(Tick, { key: i, left: i === offsets.length - 1 ? left - 3 : left, onDrag: onDrag, idx: i, scrollLeft: scrollLeft })))));
+}
+exports.default = ResizeBar;

package/ui/ResizeHandle.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 declare function ResizeHandle({ onDrag, vertical, flexbox, className: originalClassName, ...props }: {
-    onDrag: (arg: number) => number;
+    onDrag: (arg: number) => number | void;
     vertical?: boolean;
     flexbox?: boolean;
     className?: string;

package/ui/ResizeHandle.js

@@ -89,6 +89,6 @@ function ResizeHandle({ onDrag, vertical = false, flexbox = false, className: or
             event.preventDefault();
             prevPos.current = vertical ? event.clientX : event.clientY;
             setMouseDragging(true);
-        }, role: "presentation", className: cx(className, originalClassName), ...props }));
+        }, className: cx(className, originalClassName), ...props }));
 }
 exports.default = ResizeHandle;

package/ui/SanitizedHTML.js

@@ -35,6 +35,8 @@ const htmlTags = [
     'strong',
     'table',
     'tbody',
+    'sup',
+    'sub',
     'td',
     'tfoot',
     'th',
@@ -65,7 +67,7 @@ function SanitizedHTML({ html }) {
             }
         });
     }
-    return (react_1.default.createElement("div", { 
+    return (react_1.default.createElement("span", { 
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML: {
             __html: dompurify_1.default.sanitize(value),

package/ui/ViewContainer.js

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

package/ui/ViewMenu.d.ts

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

package/ui/ViewMenu.js

@@ -0,0 +1,69 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+// icons
+const Menu_1 = __importDefault(require("@mui/icons-material/Menu"));
+const ArrowDownward_1 = __importDefault(require("@mui/icons-material/ArrowDownward"));
+const ArrowUpward_1 = __importDefault(require("@mui/icons-material/ArrowUpward"));
+// locals
+const util_1 = require("../util");
+const Menu_2 = __importDefault(require("./Menu"));
+const ViewMenu = (0, mobx_react_1.observer)(function ({ model, IconButtonProps, IconProps, }) {
+    const [anchorEl, setAnchorEl] = (0, react_1.useState)();
+    const { menuItems } = model;
+    const session = (0, util_1.getSession)(model);
+    const items = [
+        ...(session.views.length > 1
+            ? [
+                {
+                    label: 'Move view up',
+                    icon: ArrowUpward_1.default,
+                    onClick: () => session.moveViewUp(model.id),
+                },
+                {
+                    label: 'Move view down',
+                    icon: ArrowDownward_1.default,
+                    onClick: () => session.moveViewDown(model.id),
+                },
+            ]
+            : []),
+        // <=1.3.3 didn't use a function, so check as value also
+        ...((typeof menuItems === 'function' ? menuItems() : menuItems) || []),
+    ];
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(material_1.IconButton, { ...IconButtonProps, onClick: event => setAnchorEl(event.currentTarget), "data-testid": "view_menu_icon" },
+            react_1.default.createElement(Menu_1.default, { ...IconProps, fontSize: "small" })),
+        react_1.default.createElement(Menu_2.default, { anchorEl: anchorEl, open: Boolean(anchorEl), onMenuItemClick: (_event, callback) => {
+                callback();
+                setAnchorEl(undefined);
+            }, onClose: () => setAnchorEl(undefined), menuItems: items })));
+});
+exports.default = ViewMenu;

package/ui/ViewPanel.d.ts

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

package/ui/ViewPanel.js

@@ -0,0 +1,49 @@
+"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_error_boundary_1 = require("react-error-boundary");
+const mobx_react_1 = require("mobx-react");
+// locals
+const util_1 = require("../util");
+// ui elements
+const ErrorMessage_1 = __importDefault(require("./ErrorMessage"));
+const LoadingEllipses_1 = __importDefault(require("./LoadingEllipses"));
+const ViewContainer_1 = __importDefault(require("./ViewContainer"));
+const ViewPanel = (0, mobx_react_1.observer)(function ({ view, session, }) {
+    const { pluginManager } = (0, util_1.getEnv)(session);
+    const viewType = pluginManager.getViewType(view.type);
+    if (!viewType) {
+        throw new Error(`unknown view type ${view.type}`);
+    }
+    const { ReactComponent } = viewType;
+    return (react_1.default.createElement(ViewContainer_1.default, { view: view, onClose: () => session.removeView(view), onMinimize: () => view.setMinimized(!view.minimized) }, !view.minimized ? (react_1.default.createElement(react_error_boundary_1.ErrorBoundary, { FallbackComponent: ({ error }) => react_1.default.createElement(ErrorMessage_1.default, { error: error }) },
+        react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement(LoadingEllipses_1.default, { variant: "h6" }) },
+            react_1.default.createElement(ReactComponent, { model: view, session: session })))) : (false)));
+});
+exports.default = ViewPanel;