@jbrowse/app-core 3.0.5 → 3.1.0

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

@@ -1,8 +1,6 @@
-import type { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes/models';
-declare const ViewContainer: ({ view, onClose, onMinimize, children, }: {
-    view: IBaseViewModel;
-    onClose: () => void;
-    onMinimize: () => void;
-    children: React.ReactNode;
+import type { AbstractViewModel, SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util';
+declare const ViewContainer: ({ view, session, }: {
+    view: AbstractViewModel;
+    session: SessionWithFocusedViewAndDrawerWidgets;
 }) => import("react/jsx-runtime").JSX.Element;
 export default ViewContainer;

package/dist/ui/App/ViewContainer.js

@@ -10,11 +10,12 @@ const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
 const mui_1 = require("tss-react/mui");
 const ViewHeader_1 = __importDefault(require("./ViewHeader"));
+const ViewWrapper_1 = __importDefault(require("./ViewWrapper"));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     viewContainer: {
-        overflow: 'hidden',
         margin: theme.spacing(0.5),
         padding: `0 ${theme.spacing(1)} ${theme.spacing(1)}`,
+        overflow: 'clip',
     },
     focusedView: {
         background: theme.palette.secondary.main,
@@ -23,11 +24,10 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         background: theme.palette.secondary.dark,
     },
 }));
-const ViewContainer = (0, mobx_react_1.observer)(function ({ view, onClose, onMinimize, children, }) {
+const ViewContainer = (0, mobx_react_1.observer)(function ({ view, session, }) {
     const theme = (0, material_1.useTheme)();
     const ref = (0, util_1.useWidthSetter)(view, theme.spacing(1));
     const { classes, cx } = useStyles();
-    const session = (0, util_1.getSession)(view);
     (0, react_1.useEffect)(() => {
         function handleSelectView(e) {
             var _a;
@@ -42,8 +42,14 @@ const ViewContainer = (0, mobx_react_1.observer)(function ({ view, onClose, onMi
             document.removeEventListener('keydown', handleSelectView);
         };
     }, [ref, session, view]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Paper, { ref: ref, elevation: 12, className: cx(classes.viewContainer, session.focusedViewId === view.id
-            ? classes.focusedView
-            : classes.unfocusedView), children: [(0, jsx_runtime_1.jsx)(ViewHeader_1.default, { view: view, onClose: onClose, onMinimize: onMinimize }), (0, jsx_runtime_1.jsx)(material_1.Paper, { children: children })] }));
+    const backgroundColorClassName = session.focusedViewId === view.id
+        ? classes.focusedView
+        : classes.unfocusedView;
+    const viewContainerClassName = cx(classes.viewContainer, backgroundColorClassName);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Paper, { ref: ref, elevation: 12, className: viewContainerClassName, children: [(0, jsx_runtime_1.jsx)(ViewHeader_1.default, { view: view, onClose: () => {
+                    session.removeView(view);
+                }, onMinimize: () => {
+                    view.setMinimized(!view.minimized);
+                }, className: backgroundColorClassName }), (0, jsx_runtime_1.jsx)(material_1.Paper, { elevation: 0, children: (0, jsx_runtime_1.jsx)(ViewWrapper_1.default, { view: view, session: session }) })] }));
 });
 exports.default = ViewContainer;

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

@@ -1,7 +1,8 @@
 import type { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes/models';
-declare const ViewHeader: ({ view, onClose, onMinimize, }: {
+declare const ViewHeader: ({ view, onClose, onMinimize, className, }: {
     view: IBaseViewModel;
     onClose: () => void;
     onMinimize: () => void;
+    className?: string;
 }) => import("react/jsx-runtime").JSX.Element;
 export default ViewHeader;

package/dist/ui/App/ViewHeader.js

@@ -5,7 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const ui_1 = require("@jbrowse/core/ui");
 const util_1 = require("@jbrowse/core/util");
+const product_core_1 = require("@jbrowse/product-core");
 const Add_1 = __importDefault(require("@mui/icons-material/Add"));
 const Close_1 = __importDefault(require("@mui/icons-material/Close"));
 const KeyboardArrowRight_1 = __importDefault(require("@mui/icons-material/KeyboardArrowRight"));
@@ -24,6 +26,10 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
     },
     viewHeader: {
         display: 'flex',
+        height: ui_1.VIEW_HEADER_HEIGHT,
+        top: 0,
+        zIndex: 900,
+        background: theme.palette.secondary.main,
     },
     viewTitle: {
         display: 'flex',
@@ -34,16 +40,21 @@ const ViewButtons = (0, mobx_react_1.observer)(function ({ view, onClose, onMini
     const { classes } = useStyles();
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { "data-testid": "minimize_view", onClick: onMinimize, children: view.minimized ? ((0, jsx_runtime_1.jsx)(Add_1.default, { className: classes.icon, fontSize: "small" })) : ((0, jsx_runtime_1.jsx)(Minimize_1.default, { className: classes.icon, fontSize: "small" })) }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { "data-testid": "close_view", onClick: onClose, children: (0, jsx_runtime_1.jsx)(Close_1.default, { className: classes.icon, fontSize: "small" }) })] }));
 });
-const ViewHeader = (0, mobx_react_1.observer)(function ({ view, onClose, onMinimize, }) {
-    const { classes } = useStyles();
+const ViewHeader = (0, mobx_react_1.observer)(function ({ view, onClose, onMinimize, className, }) {
+    const { classes, cx } = useStyles();
     const scrollRef = (0, react_1.useRef)(null);
     const session = (0, util_1.getSession)(view);
+    let stickyViewHeaders = false;
+    if ((0, product_core_1.isSessionWithMultipleViews)(session)) {
+        ;
+        ({ stickyViewHeaders } = session);
+    }
     (0, react_1.useEffect)(() => {
         var _a;
         if (typeof jest === 'undefined') {
             (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'center' });
         }
     }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: scrollRef, className: classes.viewHeader, children: [(0, jsx_runtime_1.jsx)(ViewMenu_1.default, { model: view, IconProps: { className: classes.icon } }), (0, jsx_runtime_1.jsx)("div", { className: classes.grow }), (0, jsx_runtime_1.jsxs)("div", { className: classes.viewTitle, children: [session.focusedViewId === view.id ? ((0, jsx_runtime_1.jsx)(KeyboardArrowRight_1.default, { className: classes.icon, fontSize: "small" })) : null, (0, jsx_runtime_1.jsx)(ViewContainerTitle_1.default, { view: view })] }), (0, jsx_runtime_1.jsx)("div", { className: classes.grow }), (0, jsx_runtime_1.jsx)(ViewButtons, { onClose: onClose, onMinimize: onMinimize, view: view })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: scrollRef, className: cx(classes.viewHeader, className), style: { position: stickyViewHeaders ? 'sticky' : undefined }, children: [(0, jsx_runtime_1.jsx)(ViewMenu_1.default, { model: view, IconProps: { className: classes.icon } }), (0, jsx_runtime_1.jsx)("div", { className: classes.grow }), (0, jsx_runtime_1.jsxs)("div", { className: classes.viewTitle, children: [session.focusedViewId === view.id ? ((0, jsx_runtime_1.jsx)(KeyboardArrowRight_1.default, { className: classes.icon, fontSize: "small" })) : null, (0, jsx_runtime_1.jsx)(ViewContainerTitle_1.default, { view: view })] }), (0, jsx_runtime_1.jsx)("div", { className: classes.grow }), (0, jsx_runtime_1.jsx)(ViewButtons, { onClose: onClose, onMinimize: onMinimize, view: view })] }));
 });
 exports.default = ViewHeader;

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

@@ -0,0 +1,6 @@
+import type { AbstractViewModel, SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util';
+declare const ViewWrapper: ({ view, session, }: {
+    view: AbstractViewModel;
+    session: SessionWithFocusedViewAndDrawerWidgets;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default ViewWrapper;

package/dist/ui/App/ViewWrapper.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const LoadingEllipses_1 = __importDefault(require("@jbrowse/core/ui/LoadingEllipses"));
+const util_1 = require("@jbrowse/core/util");
+const mobx_react_1 = require("mobx-react");
+const ViewWrapper = (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;
+    if (view.minimized) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(LoadingEllipses_1.default, { variant: "h6" }), children: (0, jsx_runtime_1.jsx)(ReactComponent, { model: view, session: session }) }));
+});
+exports.default = ViewWrapper;

package/dist/ui/App/ViewsContainer.js

@@ -40,7 +40,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const mobx_react_1 = require("mobx-react");
 const mui_1 = require("tss-react/mui");
-const ViewPanel_1 = __importDefault(require("./ViewPanel"));
+const ViewContainer_1 = __importDefault(require("./ViewContainer"));
 const ViewLauncher = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./ViewLauncher'))));
 const useStyles = (0, mui_1.makeStyles)()({
     viewsContainer: {
@@ -52,6 +52,6 @@ const ViewsContainer = (0, mobx_react_1.observer)(function ViewsContainer(props)
     const { session } = props;
     const { views } = session;
     const { classes } = useStyles();
-    return ((0, jsx_runtime_1.jsxs)("div", { className: classes.viewsContainer, children: [views.length > 0 ? (views.map(view => ((0, jsx_runtime_1.jsx)(ViewPanel_1.default, { view: view, session: session }, `view-${view.id}`)))) : ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(ViewLauncher, { ...props }) })), (0, jsx_runtime_1.jsx)("div", { style: { height: 300 } })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: classes.viewsContainer, children: [views.length > 0 ? (views.map(view => ((0, jsx_runtime_1.jsx)(ViewContainer_1.default, { view: view, session: session }, `view-${view.id}`)))) : ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(ViewLauncher, { ...props }) })), (0, jsx_runtime_1.jsx)("div", { style: { height: 300 } })] }));
 });
 exports.default = ViewsContainer;

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

@@ -1,8 +1,6 @@
-import type { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes/models';
-declare const ViewContainer: ({ view, onClose, onMinimize, children, }: {
-    view: IBaseViewModel;
-    onClose: () => void;
-    onMinimize: () => void;
-    children: React.ReactNode;
+import type { AbstractViewModel, SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util';
+declare const ViewContainer: ({ view, session, }: {
+    view: AbstractViewModel;
+    session: SessionWithFocusedViewAndDrawerWidgets;
 }) => import("react/jsx-runtime").JSX.Element;
 export default ViewContainer;

package/esm/ui/App/ViewContainer.js

@@ -1,15 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from 'react';
-import { getSession, useWidthSetter } from '@jbrowse/core/util';
+import { useWidthSetter } from '@jbrowse/core/util';
 import { Paper, useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
 import ViewHeader from './ViewHeader';
+import ViewWrapper from './ViewWrapper';
 const useStyles = makeStyles()(theme => ({
     viewContainer: {
-        overflow: 'hidden',
         margin: theme.spacing(0.5),
         padding: `0 ${theme.spacing(1)} ${theme.spacing(1)}`,
+        overflow: 'clip',
     },
     focusedView: {
         background: theme.palette.secondary.main,
@@ -18,11 +19,10 @@ const useStyles = makeStyles()(theme => ({
         background: theme.palette.secondary.dark,
     },
 }));
-const ViewContainer = observer(function ({ view, onClose, onMinimize, children, }) {
+const ViewContainer = observer(function ({ view, session, }) {
     const theme = useTheme();
     const ref = useWidthSetter(view, theme.spacing(1));
     const { classes, cx } = useStyles();
-    const session = getSession(view);
     useEffect(() => {
         function handleSelectView(e) {
             var _a;
@@ -37,8 +37,14 @@ const ViewContainer = observer(function ({ view, onClose, onMinimize, children,
             document.removeEventListener('keydown', handleSelectView);
         };
     }, [ref, session, view]);
-    return (_jsxs(Paper, { ref: ref, elevation: 12, className: cx(classes.viewContainer, session.focusedViewId === view.id
-            ? classes.focusedView
-            : classes.unfocusedView), children: [_jsx(ViewHeader, { view: view, onClose: onClose, onMinimize: onMinimize }), _jsx(Paper, { children: children })] }));
+    const backgroundColorClassName = session.focusedViewId === view.id
+        ? classes.focusedView
+        : classes.unfocusedView;
+    const viewContainerClassName = cx(classes.viewContainer, backgroundColorClassName);
+    return (_jsxs(Paper, { ref: ref, elevation: 12, className: viewContainerClassName, children: [_jsx(ViewHeader, { view: view, onClose: () => {
+                    session.removeView(view);
+                }, onMinimize: () => {
+                    view.setMinimized(!view.minimized);
+                }, className: backgroundColorClassName }), _jsx(Paper, { elevation: 0, children: _jsx(ViewWrapper, { view: view, session: session }) })] }));
 });
 export default ViewContainer;

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

@@ -1,7 +1,8 @@
 import type { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes/models';
-declare const ViewHeader: ({ view, onClose, onMinimize, }: {
+declare const ViewHeader: ({ view, onClose, onMinimize, className, }: {
     view: IBaseViewModel;
     onClose: () => void;
     onMinimize: () => void;
+    className?: string;
 }) => import("react/jsx-runtime").JSX.Element;
 export default ViewHeader;

package/esm/ui/App/ViewHeader.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
+import { VIEW_HEADER_HEIGHT } from '@jbrowse/core/ui';
 import { getSession } from '@jbrowse/core/util';
+import { isSessionWithMultipleViews } from '@jbrowse/product-core';
 import AddIcon from '@mui/icons-material/Add';
 import CloseIcon from '@mui/icons-material/Close';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
@@ -19,6 +21,10 @@ const useStyles = makeStyles()(theme => ({
     },
     viewHeader: {
         display: 'flex',
+        height: VIEW_HEADER_HEIGHT,
+        top: 0,
+        zIndex: 900,
+        background: theme.palette.secondary.main,
     },
     viewTitle: {
         display: 'flex',
@@ -29,16 +35,21 @@ const ViewButtons = observer(function ({ view, onClose, onMinimize, }) {
     const { classes } = useStyles();
     return (_jsxs(_Fragment, { children: [_jsx(IconButton, { "data-testid": "minimize_view", onClick: onMinimize, children: view.minimized ? (_jsx(AddIcon, { className: classes.icon, fontSize: "small" })) : (_jsx(MinimizeIcon, { className: classes.icon, fontSize: "small" })) }), _jsx(IconButton, { "data-testid": "close_view", onClick: onClose, children: _jsx(CloseIcon, { className: classes.icon, fontSize: "small" }) })] }));
 });
-const ViewHeader = observer(function ({ view, onClose, onMinimize, }) {
-    const { classes } = useStyles();
+const ViewHeader = observer(function ({ view, onClose, onMinimize, className, }) {
+    const { classes, cx } = useStyles();
     const scrollRef = useRef(null);
     const session = getSession(view);
+    let stickyViewHeaders = false;
+    if (isSessionWithMultipleViews(session)) {
+        ;
+        ({ stickyViewHeaders } = session);
+    }
     useEffect(() => {
         var _a;
         if (typeof jest === 'undefined') {
             (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'center' });
         }
     }, []);
-    return (_jsxs("div", { ref: scrollRef, className: classes.viewHeader, children: [_jsx(ViewMenu, { model: view, IconProps: { className: classes.icon } }), _jsx("div", { className: classes.grow }), _jsxs("div", { className: classes.viewTitle, children: [session.focusedViewId === view.id ? (_jsx(KeyboardArrowRightIcon, { className: classes.icon, fontSize: "small" })) : null, _jsx(ViewContainerTitle, { view: view })] }), _jsx("div", { className: classes.grow }), _jsx(ViewButtons, { onClose: onClose, onMinimize: onMinimize, view: view })] }));
+    return (_jsxs("div", { ref: scrollRef, className: cx(classes.viewHeader, className), style: { position: stickyViewHeaders ? 'sticky' : undefined }, children: [_jsx(ViewMenu, { model: view, IconProps: { className: classes.icon } }), _jsx("div", { className: classes.grow }), _jsxs("div", { className: classes.viewTitle, children: [session.focusedViewId === view.id ? (_jsx(KeyboardArrowRightIcon, { className: classes.icon, fontSize: "small" })) : null, _jsx(ViewContainerTitle, { view: view })] }), _jsx("div", { className: classes.grow }), _jsx(ViewButtons, { onClose: onClose, onMinimize: onMinimize, view: view })] }));
 });
 export default ViewHeader;

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

@@ -0,0 +1,6 @@
+import type { AbstractViewModel, SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util';
+declare const ViewWrapper: ({ view, session, }: {
+    view: AbstractViewModel;
+    session: SessionWithFocusedViewAndDrawerWidgets;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default ViewWrapper;

package/esm/ui/App/ViewWrapper.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense } from 'react';
+import LoadingEllipses from '@jbrowse/core/ui/LoadingEllipses';
+import { getEnv } from '@jbrowse/core/util';
+import { observer } from 'mobx-react';
+const ViewWrapper = observer(function ({ view, session, }) {
+    const { pluginManager } = getEnv(session);
+    const viewType = pluginManager.getViewType(view.type);
+    if (!viewType) {
+        throw new Error(`unknown view type ${view.type}`);
+    }
+    const { ReactComponent } = viewType;
+    if (view.minimized) {
+        return null;
+    }
+    return (_jsx(Suspense, { fallback: _jsx(LoadingEllipses, { variant: "h6" }), children: _jsx(ReactComponent, { model: view, session: session }) }));
+});
+export default ViewWrapper;

package/esm/ui/App/ViewsContainer.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Suspense, lazy } from 'react';
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
-import ViewPanel from './ViewPanel';
+import ViewContainer from './ViewContainer';
 const ViewLauncher = lazy(() => import('./ViewLauncher'));
 const useStyles = makeStyles()({
     viewsContainer: {
@@ -14,6 +14,6 @@ const ViewsContainer = observer(function ViewsContainer(props) {
     const { session } = props;
     const { views } = session;
     const { classes } = useStyles();
-    return (_jsxs("div", { className: classes.viewsContainer, children: [views.length > 0 ? (views.map(view => (_jsx(ViewPanel, { view: view, session: session }, `view-${view.id}`)))) : (_jsx(Suspense, { fallback: null, children: _jsx(ViewLauncher, { ...props }) })), _jsx("div", { style: { height: 300 } })] }));
+    return (_jsxs("div", { className: classes.viewsContainer, children: [views.length > 0 ? (views.map(view => (_jsx(ViewContainer, { view: view, session: session }, `view-${view.id}`)))) : (_jsx(Suspense, { fallback: null, children: _jsx(ViewLauncher, { ...props }) })), _jsx("div", { style: { height: 300 } })] }));
 });
 export default ViewsContainer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/app-core",
-  "version": "3.0.5",
+  "version": "3.1.0",
   "description": "JBrowse 2 code shared between the 'full featured' apps e.g. jbrowse-web and jbrowse-desktop",
   "keywords": [
     "jbrowse",
@@ -42,7 +42,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@jbrowse/product-core": "^3.0.5",
+    "@jbrowse/product-core": "^3.1.0",
     "@mui/icons-material": "^6.0.0",
     "@mui/material": "^6.0.0",
     "copy-to-clipboard": "^3.3.1",
@@ -59,5 +59,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a03749efe19e51609922272b845a331897346789"
+  "gitHead": "91492049ddea0aed90eb24d3c066c2d9f5a6b189"
 }

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

@@ -1,12 +0,0 @@
-import type { SnackbarMessage } from '@jbrowse/core/ui/SnackbarModel';
-import type { AbstractViewModel, SessionWithDrawerWidgets } from '@jbrowse/core/util';
-type AppSession = SessionWithDrawerWidgets & {
-    snackbarMessages: SnackbarMessage[];
-    renameCurrentSession: (arg: string) => void;
-    popSnackbarMessage: () => unknown;
-};
-declare const ViewPanel: ({ view, session, }: {
-    view: AbstractViewModel;
-    session: AppSession;
-}) => import("react/jsx-runtime").JSX.Element;
-export default ViewPanel;

package/dist/ui/App/ViewPanel.js

@@ -1,27 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const ErrorBoundary_1 = require("@jbrowse/core/ui/ErrorBoundary");
-const ErrorMessage_1 = __importDefault(require("@jbrowse/core/ui/ErrorMessage"));
-const LoadingEllipses_1 = __importDefault(require("@jbrowse/core/ui/LoadingEllipses"));
-const util_1 = require("@jbrowse/core/util");
-const mobx_react_1 = require("mobx-react");
-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 ((0, jsx_runtime_1.jsx)(ViewContainer_1.default, { view: view, onClose: () => {
-            session.removeView(view);
-        }, onMinimize: () => {
-            view.setMinimized(!view.minimized);
-        }, children: !view.minimized ? ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { FallbackComponent: ({ error }) => (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { error: error }), children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(LoadingEllipses_1.default, { variant: "h6" }), children: (0, jsx_runtime_1.jsx)(ReactComponent, { model: view, session: session }) }) })) : (false) }));
-});
-exports.default = ViewPanel;

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

@@ -1,12 +0,0 @@
-import type { SnackbarMessage } from '@jbrowse/core/ui/SnackbarModel';
-import type { AbstractViewModel, SessionWithDrawerWidgets } from '@jbrowse/core/util';
-type AppSession = SessionWithDrawerWidgets & {
-    snackbarMessages: SnackbarMessage[];
-    renameCurrentSession: (arg: string) => void;
-    popSnackbarMessage: () => unknown;
-};
-declare const ViewPanel: ({ view, session, }: {
-    view: AbstractViewModel;
-    session: AppSession;
-}) => import("react/jsx-runtime").JSX.Element;
-export default ViewPanel;

package/esm/ui/App/ViewPanel.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Suspense } from 'react';
-import { ErrorBoundary } from '@jbrowse/core/ui/ErrorBoundary';
-import ErrorMessage from '@jbrowse/core/ui/ErrorMessage';
-import LoadingEllipses from '@jbrowse/core/ui/LoadingEllipses';
-import { getEnv } from '@jbrowse/core/util';
-import { observer } from 'mobx-react';
-import ViewContainer from './ViewContainer';
-const ViewPanel = observer(function ({ view, session, }) {
-    const { pluginManager } = getEnv(session);
-    const viewType = pluginManager.getViewType(view.type);
-    if (!viewType) {
-        throw new Error(`unknown view type ${view.type}`);
-    }
-    const { ReactComponent } = viewType;
-    return (_jsx(ViewContainer, { view: view, onClose: () => {
-            session.removeView(view);
-        }, onMinimize: () => {
-            view.setMinimized(!view.minimized);
-        }, children: !view.minimized ? (_jsx(ErrorBoundary, { FallbackComponent: ({ error }) => _jsx(ErrorMessage, { error: error }), children: _jsx(Suspense, { fallback: _jsx(LoadingEllipses, { variant: "h6" }), children: _jsx(ReactComponent, { model: view, session: session }) }) })) : (false) }));
-});
-export default ViewPanel;