@jbrowse/embedded-core 5.0.0-beta.1 → 5.0.0-beta.11

package/esm/createEmbeddedRootModel.js

@@ -2,7 +2,23 @@ import TextSearchManager from '@jbrowse/core/TextSearch/TextSearchManager';
 import assemblyManagerFactory, { assemblyConfigSchemaFactory, } from '@jbrowse/core/assemblyManager';
 import RpcManager from '@jbrowse/core/rpc/RpcManager';
 import { cast, types } from '@jbrowse/mobx-state-tree';
-import { InternetAccountsRootModelMixin, createConfigModel, } from '@jbrowse/product-core';
+import { InternetAccountsRootModelMixin, createConfigModel, migrateSessionSnapshot, } from '@jbrowse/product-core';
+/**
+ * A session an embedder hands over may be a v4 one: a share link, a stored
+ * snapshot, a `?session=` param a reader still holds. It names display types
+ * this build retired and carries settings that are config slots now, which the
+ * session type refuses outright — so the whole engine fails to build rather
+ * than one track opening at its defaults. ADR-168.
+ *
+ * An app root runs this once, in `setSession`, because that is its only door.
+ * An embedded root has three: the `session` prop at create, and the two actions
+ * that assign over it afterwards.
+ */
+function migrated(snapshot, pluginManager) {
+    return snapshot && typeof snapshot === 'object'
+        ? migrateSessionSnapshot(snapshot, pluginManager)
+        : snapshot;
+}
 /**
  * #stateModel EmbeddedRootModel
  * #category root
@@ -15,7 +31,8 @@ import { InternetAccountsRootModelMixin, createConfigModel, } from '@jbrowse/pro
  */
 export function createEmbeddedRootModel({ name, version, pluginManager, sessionModelType, makeWorkerInstance, }) {
     const assemblyConfigSchema = assemblyConfigSchemaFactory(pluginManager);
-    return types.compose(name, types
+    return types
+        .compose(name, types
         .model({
         /**
          * #property
@@ -31,11 +48,6 @@ export function createEmbeddedRootModel({ name, version, pluginManager, sessionM
         assemblyManager: types.optional(assemblyManagerFactory(assemblyConfigSchema, pluginManager), {}),
     })
         .volatile(self => ({
-        /**
-         * #volatile
-         */
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
-        error: undefined,
         /**
          * #volatile
          */
@@ -63,9 +75,12 @@ export function createEmbeddedRootModel({ name, version, pluginManager, sessionM
         .actions(self => ({
         /**
          * #action
+         * Synchronous: an async caller must
+         * `await pluginManager.preloadSessionTypes(snapshot)` first.
          */
         setSession(sessionSnapshot) {
-            self.session = cast(sessionSnapshot);
+            pluginManager.assertSessionTypesLoaded(sessionSnapshot);
+            self.session = cast(migrated(sessionSnapshot, pluginManager));
         },
         /**
          * #action
@@ -81,7 +96,8 @@ export function createEmbeddedRootModel({ name, version, pluginManager, sessionM
          * actually matters for a value this app did not author.
          */
         restoreSession(sessionSnapshot) {
-            self.session = cast(sessionSnapshot);
+            pluginManager.assertSessionTypesLoaded(sessionSnapshot);
+            self.session = cast(migrated(sessionSnapshot, pluginManager));
         },
         /**
          * #action
@@ -89,12 +105,6 @@ export function createEmbeddedRootModel({ name, version, pluginManager, sessionM
         renameCurrentSession(sessionName) {
             self.session.setName(sessionName);
         },
-        /**
-         * #action
-         */
-        setError(error) {
-            self.error = error;
-        },
     }))
         .views(self => ({
         /**
@@ -109,5 +119,8 @@ export function createEmbeddedRootModel({ name, version, pluginManager, sessionM
         get pluginManager() {
             return pluginManager;
         },
-    })), InternetAccountsRootModelMixin(pluginManager));
+    })), InternetAccountsRootModelMixin(pluginManager))
+        .preProcessSnapshot(snap => snap && typeof snap === 'object' && 'session' in snap
+        ? { ...snap, session: migrated(snap.session, pluginManager) }
+        : snap);
 }

package/esm/ui/EmbeddedViewContainer.js

@@ -1,26 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Suspense } from 'react';
 import { getSession } from '@jbrowse/core/util';
-import { useWidthSetter } from '@jbrowse/core/util/hooks';
+import { VIEW_HEADER_HEIGHT_VAR, useWidthSetter, } from '@jbrowse/core/util/hooks';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
-import { Paper } from '@mui/material';
 import { observer } from 'mobx-react';
-import ViewTitle from './ViewTitle.js';
 const useStyles = makeStyles()(theme => ({
     viewContainer: {
         width: '100%',
         // clip (not hidden) so sticky descendant headers keep working
-        // xref https://stackoverflow.com/questions/43909940/why-does-overflowhidden-prevent-positionsticky-from-working
         overflow: 'clip',
-        background: theme.palette.secondary.main,
-        margin: theme.spacing(0.5),
-        padding: `0 ${theme.spacing(1)} ${theme.spacing(1)}`,
+        background: theme.palette.background.paper,
+        border: `1px solid ${theme.palette.divider}`,
+        borderRadius: theme.shape.borderRadius,
+        // no title bar above the view, so the sticky chrome that clears one pins
+        // at the top edge
+        [VIEW_HEADER_HEIGHT_VAR]: '0px',
     },
 }));
 const ViewContainer = observer(function ViewContainer({ view, children, }) {
     const { classes } = useStyles();
     const session = getSession(view);
     const ref = useWidthSetter(view);
-    return (_jsxs(Paper, { elevation: 12, ref: ref, className: classes.viewContainer, children: [session.DialogComponent ? (_jsx(Suspense, { fallback: null, children: _jsx(session.DialogComponent, { ...session.DialogProps }) })) : null, _jsx(ViewTitle, { view: view }), _jsx(Paper, { children: children })] }));
+    return (_jsxs("div", { ref: ref, className: classes.viewContainer, children: [session.DialogComponent ? (_jsx(Suspense, { fallback: null, children: _jsx(session.DialogComponent, { ...session.DialogProps }) })) : null, children] }));
 });
 export default ViewContainer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/embedded-core",
-  "version": "5.0.0-beta.1",
+  "version": "5.0.0-beta.11",
   "type": "module",
   "description": "JBrowse 2 code shared between embedded products",
   "keywords": [
@@ -24,13 +24,13 @@
     "esm"
   ],
   "dependencies": {
-    "@jbrowse/mobx-state-tree": "^6.5.1",
-    "@mui/icons-material": "^9.3.1",
-    "@mui/material": "^9.3.1",
-    "mobx": "^7.0.3",
+    "@jbrowse/mobx-state-tree": "^6.7.0",
+    "@mui/icons-material": "^9.4.0",
+    "@mui/material": "^9.4.0",
+    "mobx": "^7.0.5",
     "mobx-react": "^10.0.2",
-    "@jbrowse/product-core": "^5.0.0-beta.1",
-    "@jbrowse/core": "^5.0.0-beta.1"
+    "@jbrowse/product-core": "^5.0.0-beta.11",
+    "@jbrowse/core": "^5.0.0-beta.11"
   },
   "peerDependencies": {
     "react": ">=19.0.0",

package/esm/ui/VersionAboutDialog.d.ts

@@ -1,5 +0,0 @@
-export default function AboutDialog({ open, version, onClose, }: {
-    open: boolean;
-    version: string;
-    onClose: () => void;
-}): import("react").JSX.Element;

package/esm/ui/VersionAboutDialog.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ExternalLink, InfoDialog } from '@jbrowse/core/ui';
-import { makeStyles } from '@jbrowse/core/util/tss-react';
-import { Typography } from '@mui/material';
-const useStyles = makeStyles()({
-    content: {
-        minWidth: 800,
-    },
-});
-export default function AboutDialog({ open, version, onClose, }) {
-    const { classes } = useStyles();
-    return (_jsx(InfoDialog, { open: open, onClose: onClose, maxWidth: "xl", title: `JBrowse v${version}`, children: _jsxs("div", { className: classes.content, children: [_jsx(Typography, { children: "JBrowse is a GMOD project \u00A9 2019-2026, The Evolutionary Software Foundation" }), _jsx(Typography, { children: "Here are some resources and documentation. Please report the version number above when asking questions. Thanks!" }), _jsxs("ul", { children: [_jsx("li", { children: _jsx(ExternalLink, { href: "https://github.com/GMOD/jbrowse-components/discussions", children: "Question & answer forum" }) }), _jsx("li", { children: _jsx(ExternalLink, { href: "https://github.com/GMOD/jbrowse-components/issues/new/choose", children: "Report a bug" }) }), _jsx("li", { children: _jsx(ExternalLink, { href: "https://jbrowse.org/jb2/docs/user_guide", children: "User guide" }) }), _jsx("li", { children: _jsx(ExternalLink, { href: "https://jbrowse.org/jb2/docs/", children: "Documentation" }) })] })] }) }));
-}

package/esm/ui/ViewTitle.d.ts

@@ -1,5 +0,0 @@
-import type { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes/models/BaseViewModel';
-declare const ViewTitle: ({ view, }: {
-    view: IBaseViewModel;
-}) => import("react").JSX.Element;
-export default ViewTitle;

package/esm/ui/ViewTitle.js

@@ -1,65 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense, lazy, useRef, useState } from 'react';
-import { CascadingMenuButton, Logomark, VIEW_HEADER_HEIGHT, } from '@jbrowse/core/ui';
-import { getSession } from '@jbrowse/core/util';
-import { VIEW_HEADER_HEIGHT_VAR, useChromeHeightVar, } from '@jbrowse/core/util/hooks';
-import { makeStyles } from '@jbrowse/core/util/tss-react';
-import MenuIcon from '@mui/icons-material/Menu';
-import { IconButton, Typography, alpha } from '@mui/material';
-import { observer } from 'mobx-react';
-const VersionAboutDialog = lazy(() => import('./VersionAboutDialog.js'));
-const useStyles = makeStyles()(theme => ({
-    icon: {
-        color: theme.palette.secondary.contrastText,
-    },
-    displayName: {
-        marginTop: 2,
-        color: theme.palette.secondary.contrastText,
-    },
-    grow: {
-        flexGrow: 1,
-    },
-    container: {
-        display: 'flex',
-        alignItems: 'center',
-        // A fixed height, unlike the web app's view header, which is a floor. Both
-        // publish what they measure through `useChromeHeightVar`, so what sticks
-        // below follows either — this is a density choice and no longer a
-        // load-bearing constant. It stays fixed because the content that would
-        // widen the box is the logomark button, whose 22px icon and 5px padding
-        // want 32: a floor here spends 4px of an embedder's box to stop that button
-        // painting 2px outside a bar nothing clips.
-        height: VIEW_HEADER_HEIGHT,
-        top: 0,
-        zIndex: 900,
-        // a sticky element does not carry its parent's background, and what would
-        // otherwise show through is the tracks scrolling underneath
-        background: theme.palette.secondary.main,
-    },
-    iconRoot: {
-        '&:hover': {
-            backgroundColor: alpha(theme.palette.secondary.contrastText, theme.palette.action.hoverOpacity),
-            '@media (hover: none)': {
-                backgroundColor: 'transparent',
-            },
-        },
-    },
-}));
-const ViewTitle = observer(function ViewTitle({ view, }) {
-    const { classes } = useStyles();
-    const { displayName } = view;
-    const [dialogOpen, setDialogOpen] = useState(false);
-    const session = getSession(view);
-    // `=== true` because the member is optional on AbstractSessionModel: a
-    // session with no such notion reads as "don't pin", which is what the LGV
-    // model's own getter does with it too
-    const stickyViewHeaders = session.stickyViewHeaders === true;
-    const ref = useRef(null);
-    useChromeHeightVar(ref, VIEW_HEADER_HEIGHT_VAR);
-    return (_jsxs("div", { ref: ref, className: classes.container, style: { position: stickyViewHeaders ? 'sticky' : undefined }, children: [_jsx(CascadingMenuButton, { menuItems: () => view.menuItems(), "data-testid": "view_menu_icon", classes: { root: classes.iconRoot }, edge: "start", children: _jsx(MenuIcon, { className: classes.icon }) }), _jsx("div", { className: classes.grow }), displayName ? (_jsx(Typography, { variant: "body2", className: classes.displayName, children: displayName })) : null, _jsx("div", { className: classes.grow }), _jsx(IconButton, { onClick: () => {
-                    setDialogOpen(true);
-                }, children: _jsx("div", { style: { width: 22, height: 22 }, children: _jsx(Logomark, { variant: "white" }) }) }), dialogOpen ? (_jsx(Suspense, { fallback: null, children: _jsx(VersionAboutDialog, { open: true, onClose: () => {
-                        setDialogOpen(false);
-                    }, version: session.version }) })) : null] }));
-});
-export default ViewTitle;