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

package/esm/createEmbeddedRootModel.js

@@ -0,0 +1,117 @@
+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';
+/**
+ * #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
+         */
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+        error: undefined,
+        /**
+         * #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(sessionSnapshot);
+        },
+        /**
+         * #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(sessionSnapshot);
+        },
+        /**
+         * #action
+         */
+        renameCurrentSession(sessionName) {
+            self.session.setName(sessionName);
+        },
+        /**
+         * #action
+         */
+        setError(error) {
+            self.error = error;
+        },
+    }))
+        .views(self => ({
+        /**
+         * #getter
+         */
+        get jbrowse() {
+            return self.config;
+        },
+        /**
+         * #getter
+         */
+        get pluginManager() {
+            return pluginManager;
+        },
+    })), InternetAccountsRootModelMixin(pluginManager));
+}

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,16 +1,17 @@
 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 { useWidthSetter } from '@jbrowse/core/util/hooks';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
-import { Paper, ScopedCssBaseline, useTheme } from '@mui/material';
+import { Paper } from '@mui/material';
 import { observer } from 'mobx-react';
-import ViewTitle from "./ViewTitle.js";
+import ViewTitle from './ViewTitle.js';
 const useStyles = makeStyles()(theme => ({
-    avoidParentStyle: {
-        all: 'initial',
-    },
     viewContainer: {
-        overflow: 'hidden',
+        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)}`,
@@ -19,12 +20,7 @@ const useStyles = makeStyles()(theme => ({
 const ViewContainer = observer(function ViewContainer({ view, children, }) {
     const { classes } = useStyles();
     const session = getSession(view);
-    const theme = useTheme();
-    const ref = useWidthSetter(view, theme.spacing(1));
+    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 })] }));
 });
-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 }) }) }));
-});
-export default ViewContainerWrapper;
+export default ViewContainer;

package/esm/ui/VersionAboutDialog.d.ts

@@ -2,4 +2,4 @@ export default function AboutDialog({ open, version, onClose, }: {
     open: boolean;
     version: string;
     onClose: () => void;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/esm/ui/VersionAboutDialog.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Dialog, ExternalLink } from '@jbrowse/core/ui';
+import { ExternalLink, InfoDialog } from '@jbrowse/core/ui';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
-import { DialogContent, Typography } from '@mui/material';
+import { Typography } from '@mui/material';
 const useStyles = makeStyles()({
     content: {
         minWidth: 800,
@@ -9,5 +9,5 @@ const useStyles = makeStyles()({
 });
 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" }) })] })] }) }));
+    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 +1,5 @@
 import type { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes/models/BaseViewModel';
 declare const ViewTitle: ({ view, }: {
     view: IBaseViewModel;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default ViewTitle;

package/esm/ui/ViewTitle.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense, lazy, useState } from 'react';
-import { Logomark } from '@jbrowse/core/ui';
+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';
-import ViewMenu from "./ViewMenu.js";
-const VersionAboutDialog = lazy(() => import("./VersionAboutDialog.js"));
+const VersionAboutDialog = lazy(() => import('./VersionAboutDialog.js'));
 const useStyles = makeStyles()(theme => ({
     icon: {
         color: theme.palette.secondary.contrastText,
@@ -20,6 +21,20 @@ const useStyles = makeStyles()(theme => ({
     },
     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': {
@@ -35,10 +50,13 @@ const ViewTitle = observer(function ViewTitle({ view, }) {
     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: () => {
+    // `=== 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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/embedded-core",
-  "version": "4.3.0",
+  "version": "5.0.0-beta.2",
   "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.5.1",
+    "@mui/icons-material": "^9.4.0",
+    "@mui/material": "^9.4.0",
+    "mobx": "^7.0.3",
+    "mobx-react": "^10.0.2",
+    "@jbrowse/product-core": "^5.0.0-beta.2",
+    "@jbrowse/core": "^5.0.0-beta.2"
   },
   "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/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;