@jbrowse/embedded-core 4.3.0 → 5.0.0-beta.10

package/esm/createEmbeddedRootModel.js

@@ -0,0 +1,126 @@
+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, 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
+ * Root model shared by the single-view embedded products
+ * (react-linear-genome-view, react-circular-genome-view). Each product supplies
+ * its own model name, version, and session model, and may `.props()` on extra
+ * fields (e.g. the LGV `disableAddTracks`/`drawerViewHeight`). Internet accounts
+ * come from the same product-core mixin the web/desktop root models use, so
+ * config `internetAccounts` are auto-initialized (no manual wiring needed).
+ */
+export function createEmbeddedRootModel({ name, version, pluginManager, sessionModelType, makeWorkerInstance, }) {
+    const assemblyConfigSchema = assemblyConfigSchemaFactory(pluginManager);
+    return types
+        .compose(name, types
+        .model({
+        /**
+         * #property
+         */
+        config: createConfigModel(pluginManager, assemblyConfigSchema),
+        /**
+         * #property
+         */
+        session: sessionModelType,
+        /**
+         * #property
+         */
+        assemblyManager: types.optional(assemblyManagerFactory(assemblyConfigSchema, pluginManager), {}),
+    })
+        .volatile(self => ({
+        /**
+         * #volatile
+         */
+        adminMode: false,
+        /**
+         * #volatile
+         */
+        version,
+        /**
+         * #volatile
+         */
+        rpcManager: new RpcManager(pluginManager, self.config.configuration.rpc, {
+            makeWorkerInstance,
+            // when a worker factory is supplied, run RPC off the main thread by
+            // default; config `defaultDriver` still overrides this
+            defaultDriverName: makeWorkerInstance
+                ? 'WebWorkerRpcDriver'
+                : 'MainThreadRpcDriver',
+        }),
+        /**
+         * #volatile
+         */
+        textSearchManager: new TextSearchManager(pluginManager),
+    }))
+        .actions(self => ({
+        /**
+         * #action
+         * Synchronous: an async caller must
+         * `await pluginManager.preloadSessionTypes(snapshot)` first.
+         */
+        setSession(sessionSnapshot) {
+            pluginManager.assertSessionTypesLoaded(sessionSnapshot);
+            self.session = cast(migrated(sessionSnapshot, pluginManager));
+        },
+        /**
+         * #action
+         * Load a session whose shape is only known at runtime — decoded from a
+         * URL, read back from storage, handed over by a non-TypeScript host.
+         *
+         * Separate from `setSession` because that one takes the compiler-checked
+         * snapshot type, which a value parsed out of JSON can never satisfy.
+         * The assertion below is the whole reason this exists: it is the single
+         * place the conversion happens, instead of every caller asserting at its
+         * own site. Nothing is unchecked at runtime — MST validates the snapshot
+         * as it applies it and throws on a mismatch, which is the check that
+         * actually matters for a value this app did not author.
+         */
+        restoreSession(sessionSnapshot) {
+            pluginManager.assertSessionTypesLoaded(sessionSnapshot);
+            self.session = cast(migrated(sessionSnapshot, pluginManager));
+        },
+        /**
+         * #action
+         */
+        renameCurrentSession(sessionName) {
+            self.session.setName(sessionName);
+        },
+    }))
+        .views(self => ({
+        /**
+         * #getter
+         */
+        get jbrowse() {
+            return self.config;
+        },
+        /**
+         * #getter
+         */
+        get pluginManager() {
+            return pluginManager;
+        },
+    })), InternetAccountsRootModelMixin(pluginManager))
+        .preProcessSnapshot(snap => snap && typeof snap === 'object' && 'session' in snap
+        ? { ...snap, session: migrated(snap.session, pluginManager) }
+        : snap);
+}

package/esm/index.d.ts

@@ -1,2 +1,5 @@
-export { default as ModalWidget } from './ui/ModalWidget.tsx';
 export { default as EmbeddedViewContainer } from './ui/EmbeddedViewContainer.tsx';
+export { createEmbeddedRootModel } from './createEmbeddedRootModel.ts';
+export { EmbeddedSessionMixin } from './EmbeddedSessionMixin.ts';
+export type { EmbeddedSessionParent } from './EmbeddedSessionMixin.ts';
+export { EmbeddedSessionThemeMixin } from './EmbeddedSessionThemeMixin.ts';

package/esm/index.js

@@ -1,2 +1,4 @@
-export { default as ModalWidget } from "./ui/ModalWidget.js";
-export { default as EmbeddedViewContainer } from "./ui/EmbeddedViewContainer.js";
+export { default as EmbeddedViewContainer } from './ui/EmbeddedViewContainer.js';
+export { createEmbeddedRootModel } from './createEmbeddedRootModel.js';
+export { EmbeddedSessionMixin } from './EmbeddedSessionMixin.js';
+export { EmbeddedSessionThemeMixin } from './EmbeddedSessionThemeMixin.js';

package/esm/ui/EmbeddedViewContainer.d.ts

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

package/esm/ui/EmbeddedViewContainer.js

@@ -1,30 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Suspense } from 'react';
-import { getSession, useWidthSetter } from '@jbrowse/core/util';
+import { getSession } from '@jbrowse/core/util';
+import { VIEW_HEADER_HEIGHT_VAR, useWidthSetter, } from '@jbrowse/core/util/hooks';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
-import { Paper, ScopedCssBaseline, useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
-import ViewTitle from "./ViewTitle.js";
 const useStyles = makeStyles()(theme => ({
-    avoidParentStyle: {
-        all: 'initial',
-    },
     viewContainer: {
-        overflow: 'hidden',
-        background: theme.palette.secondary.main,
-        margin: theme.spacing(0.5),
-        padding: `0 ${theme.spacing(1)} ${theme.spacing(1)}`,
+        width: '100%',
+        // clip (not hidden) so sticky descendant headers keep working
+        overflow: 'clip',
+        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 theme = useTheme();
-    const ref = useWidthSetter(view, theme.spacing(1));
-    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 })] }));
-});
-const ViewContainerWrapper = observer(function ViewContainerWrapper({ view, children, }) {
-    const { classes } = useStyles();
-    return (_jsx("div", { className: classes.avoidParentStyle, children: _jsx(ScopedCssBaseline, { children: _jsx(ViewContainer, { view: view, children: children }) }) }));
+    const ref = useWidthSetter(view);
+    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 ViewContainerWrapper;
+export default ViewContainer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/embedded-core",
-  "version": "4.3.0",
+  "version": "5.0.0-beta.10",
   "type": "module",
   "description": "JBrowse 2 code shared between embedded products",
   "keywords": [
@@ -24,23 +24,24 @@
     "esm"
   ],
   "dependencies": {
-    "@jbrowse/mobx-state-tree": "^5.6.0",
-    "@mui/icons-material": "^7.3.11",
-    "@mui/material": "^7.3.11",
-    "mobx": "^6.15.3",
-    "mobx-react": "^9.2.1",
-    "@jbrowse/core": "^4.3.0"
+    "@jbrowse/mobx-state-tree": "^6.6.1",
+    "@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.10",
+    "@jbrowse/core": "^5.0.0-beta.10"
   },
   "peerDependencies": {
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "sideEffects": false,
   "scripts": {
-    "build:esm": "tsc -p tsconfig.build.esm.json",
+    "build:esm": "node ../../node_modules/typescript7/bin/tsc --build tsconfig.build.esm.json",
     "build": "pnpm build:esm",
     "test": "cd ../..; jest --passWithNoTests packages/embedded-core",
     "clean": "rimraf esm *.tsbuildinfo",
@@ -48,9 +49,6 @@
   },
   "types": "esm/index.d.ts",
   "exports": {
-    ".": {
-      "types": "./esm/index.d.ts",
-      "import": "./esm/index.js"
-    }
+    ".": "./esm/index.js"
   }
 }

package/esm/ui/ModalWidget.d.ts

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

package/esm/ui/ModalWidget.js

@@ -1,32 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Suspense } from 'react';
-import { Dialog } from '@jbrowse/core/ui';
-import { makeStyles } from '@jbrowse/core/util/tss-react';
-import { getEnv } from '@jbrowse/mobx-state-tree';
-import { AppBar, Paper, Toolbar, Typography } from '@mui/material';
-import { observer } from 'mobx-react';
-const useStyles = makeStyles()({
-    paper: {
-        overflow: 'auto',
-    },
-});
-const ModalWidget = observer(function ModalWidget({ session, }) {
-    const { classes } = useStyles();
-    const { visibleWidget } = session;
-    const { pluginManager } = getEnv(session);
-    if (!visibleWidget) {
-        return null;
-    }
-    const { ReactComponent, HeadingComponent, heading } = pluginManager.getWidgetType(visibleWidget.type);
-    const Component = pluginManager.evaluateExtensionPoint('Core-replaceWidget', ReactComponent, {
-        session,
-        model: visibleWidget,
-    });
-    return (_jsx(Dialog, { open: true, onClose: () => {
-            session.hideAllWidgets();
-        }, maxWidth: "xl", header: _jsx(AppBar, { position: "static", children: _jsx(Toolbar, { children: HeadingComponent ? (_jsx(HeadingComponent, { model: visibleWidget })) : (_jsx(Typography, { variant: "h6", children: heading })) }) }), children: _jsx(Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: _jsx(Paper, { className: classes.paper, children: _jsx(Component, { model: visibleWidget, session: session, overrideDimensions: {
-                        height: (window.innerHeight * 5) / 8,
-                        width: 800,
-                    } }) }) }) }));
-});
-export default ModalWidget;

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-runtime").JSX.Element;

package/esm/ui/VersionAboutDialog.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Dialog, ExternalLink } from '@jbrowse/core/ui';
-import { makeStyles } from '@jbrowse/core/util/tss-react';
-import { DialogContent, Typography } from '@mui/material';
-const useStyles = makeStyles()({
-    content: {
-        minWidth: 800,
-    },
-});
-export default function AboutDialog({ open, version, onClose, }) {
-    const { classes } = useStyles();
-    return (_jsx(Dialog, { open: open, onClose: onClose, maxWidth: "xl", title: `JBrowse v${version}`, children: _jsxs(DialogContent, { className: classes.content, children: [_jsx(Typography, { children: "JBrowse is a GMOD project \u00A9 2019-2021, 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/ViewMenu.d.ts

@@ -1,8 +0,0 @@
-import type { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes/models/BaseViewModel';
-import type { IconButtonProps, SvgIconProps } from '@mui/material';
-declare const ViewMenu: ({ model, IconButtonProps, IconProps, }: {
-    model: IBaseViewModel;
-    IconButtonProps?: IconButtonProps;
-    IconProps?: SvgIconProps;
-}) => import("react/jsx-runtime").JSX.Element;
-export default ViewMenu;

package/esm/ui/ViewMenu.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { CascadingMenuButton } from '@jbrowse/core/ui';
-import MenuIcon from '@mui/icons-material/Menu';
-import { observer } from 'mobx-react';
-const ViewMenu = observer(function ViewMenu({ model, IconButtonProps, IconProps, }) {
-    return (_jsx(CascadingMenuButton, { menuItems: () => model.menuItems(), "data-testid": "view_menu_icon", ...IconButtonProps, children: _jsx(MenuIcon, { ...IconProps }) }));
-});
-export default ViewMenu;

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-runtime").JSX.Element;
-export default ViewTitle;

package/esm/ui/ViewTitle.js

@@ -1,47 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense, lazy, useState } from 'react';
-import { Logomark } from '@jbrowse/core/ui';
-import { getSession } from '@jbrowse/core/util';
-import { makeStyles } from '@jbrowse/core/util/tss-react';
-import { IconButton, Typography, alpha } from '@mui/material';
-import { observer } from 'mobx-react';
-import ViewMenu from "./ViewMenu.js";
-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',
-    },
-    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);
-    return (_jsxs("div", { className: classes.container, children: [_jsx(ViewMenu, { model: view, IconButtonProps: {
-                    classes: { root: classes.iconRoot },
-                    edge: 'start',
-                }, IconProps: { 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;