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

package/esm/ui/drawerLayout.d.ts

@@ -0,0 +1,18 @@
+import type { DrawerPosition } from '@jbrowse/core/util/types';
+/**
+ * CSS `grid-template-columns` for a main content area with an optional drawer
+ * widget on the left or right. Shared by the app shell (`App.tsx`) and the
+ * embedded views so the drawer positioning stays identical across products.
+ *
+ * The `[main]`/`[drawer]` line names are the whole interface: a host renders
+ * the main container and the drawer once each, in any order, and each takes
+ * its column by name. Placing them by DOM order instead means the host has to
+ * render the drawer twice — once on each side, under opposite conditions — and
+ * any other in-flow child auto-placed between them lands in a column meant for
+ * one of the two.
+ */
+export declare function drawerGridTemplateColumns({ drawerVisible, drawerPosition, drawerWidth, }: {
+    drawerVisible: boolean;
+    drawerPosition: DrawerPosition;
+    drawerWidth: number;
+}): string;

package/esm/ui/drawerLayout.js

@@ -0,0 +1,22 @@
+/**
+ * CSS `grid-template-columns` for a main content area with an optional drawer
+ * widget on the left or right. Shared by the app shell (`App.tsx`) and the
+ * embedded views so the drawer positioning stays identical across products.
+ *
+ * The `[main]`/`[drawer]` line names are the whole interface: a host renders
+ * the main container and the drawer once each, in any order, and each takes
+ * its column by name. Placing them by DOM order instead means the host has to
+ * render the drawer twice — once on each side, under opposite conditions — and
+ * any other in-flow child auto-placed between them lands in a column meant for
+ * one of the two.
+ */
+export function drawerGridTemplateColumns({ drawerVisible, drawerPosition, drawerWidth, }) {
+    const main = '[main] minmax(0, 1fr)';
+    if (drawerVisible) {
+        const drawer = `[drawer] ${drawerWidth}px`;
+        return drawerPosition === 'right'
+            ? `${main} ${drawer}`
+            : `${drawer} ${main}`;
+    }
+    return main;
+}

package/esm/ui/index.d.ts

@@ -1 +1,13 @@
-export * from './AboutDialog.tsx';
+export { default as AboutDialog } from './AboutDialog.tsx';
+export { default as Drawer } from './Drawer.tsx';
+export { default as DrawerControls } from './DrawerControls.tsx';
+export { default as DrawerHeader } from './DrawerHeader.tsx';
+export { default as DrawerWidget } from './DrawerWidget.tsx';
+export { default as DrawerWidgetSelector } from './DrawerWidgetSelector.tsx';
+export { drawerGridTemplateColumns } from './drawerLayout.ts';
+export { default as ModalWidget } from './ModalWidget.tsx';
+export { default as ModalWidgetAppBar } from './ModalWidgetAppBar.tsx';
+export { default as PreferencesDialog } from './PreferencesDialog.tsx';
+export type { PreferencesDialogSession, PreferencesPanelDescriptor, } from './PreferencesDialog.tsx';
+export { default as WidgetBody } from './WidgetBody.tsx';
+export { default as WidgetHeading } from './WidgetHeading.tsx';

package/esm/ui/index.js

@@ -1 +1,12 @@
-export * from "./AboutDialog.js";
+export { default as AboutDialog } from './AboutDialog.js';
+export { default as Drawer } from './Drawer.js';
+export { default as DrawerControls } from './DrawerControls.js';
+export { default as DrawerHeader } from './DrawerHeader.js';
+export { default as DrawerWidget } from './DrawerWidget.js';
+export { default as DrawerWidgetSelector } from './DrawerWidgetSelector.js';
+export { drawerGridTemplateColumns } from './drawerLayout.js';
+export { default as ModalWidget } from './ModalWidget.js';
+export { default as ModalWidgetAppBar } from './ModalWidgetAppBar.js';
+export { default as PreferencesDialog } from './PreferencesDialog.js';
+export { default as WidgetBody } from './WidgetBody.js';
+export { default as WidgetHeading } from './WidgetHeading.js';

package/esm/ui/util.d.ts

@@ -1,10 +1,42 @@
 import type PluginManager from '@jbrowse/core/PluginManager';
 import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
 import type { AbstractSessionModel } from '@jbrowse/core/util';
-export declare function removeAttr(obj: Record<string, unknown>, attr: string): Record<string, unknown>;
-export declare function readConf(config: AnyConfigurationModel | Record<string, unknown>, slotPath?: string | string[]): any;
-export declare function generateDisplayableConfig({ config, session, pluginManager, }: {
-    config: AnyConfigurationModel | Record<string, unknown>;
+export type AboutConfig = AnyConfigurationModel | Record<string, unknown>;
+export interface AboutPanelProps {
+    session: AbstractSessionModel;
+    config: AboutConfig;
+}
+declare module '@jbrowse/core/PluginManager' {
+    interface ExtensionPointRegistry {
+        'Core-extraAboutPanel': ComponentList<AboutPanelProps>;
+        /** #extensionPoint Core-replaceAbout | sync | Replace or wrap a track's About dialog body */
+        'Core-replaceAbout': ComponentSlot<AboutPanelProps>;
+        'Core-customizeAbout': {
+            args: {
+                config: Record<string, unknown>;
+            };
+            result: {
+                config: {
+                    metadata?: Record<string, unknown>;
+                    [key: string]: unknown;
+                };
+            };
+            props: AboutPanelProps;
+        };
+    }
+}
+/**
+ * Build what a track's About dialog shows: the base config merged with session-
+ * and track-level `formatAbout` overrides and passed through the
+ * `Core-customizeAbout` extension point, plus the resolved `hideUris`.
+ *
+ * Both `formatAbout` slots are two-tier and resolve here together, so the
+ * dialog reads one thing rather than re-deriving half the rule at the call
+ * site. They fold differently on purpose: `config` is a merge the track can win
+ * key-by-key, `hideUris` is an OR a track cannot turn back off.
+ */
+export declare function getAboutDialogConfig({ config, session, pluginManager, }: {
+    config: AboutConfig;
     session: AbstractSessionModel;
     pluginManager: PluginManager;
 }): {
@@ -12,4 +44,5 @@ export declare function generateDisplayableConfig({ config, session, pluginManag
         metadata?: Record<string, unknown>;
         [key: string]: unknown;
     };
+    hideUris: boolean;
 };

package/esm/ui/util.js

@@ -1,42 +1,39 @@
-import { getConf, readConfObject } from '@jbrowse/core/configuration';
-import { getSnapshot, isStateTreeNode } from '@jbrowse/mobx-state-tree';
-export function removeAttr(obj, attr) {
-    for (const prop in obj) {
-        if (prop === attr) {
-            delete obj[prop];
-        }
-        else if (typeof obj[prop] === 'object') {
-            removeAttr(obj[prop], attr);
-        }
-    }
-    return obj;
-}
-export function readConf(config, slotPath) {
-    if (isStateTreeNode(config)) {
-        return slotPath
-            ? readConfObject(config, slotPath)
-            : getSnapshot(config);
-    }
-    if (!slotPath) {
-        return config;
-    }
-    if (typeof slotPath === 'string') {
-        return config[slotPath];
-    }
-    let result = config;
-    for (const key of slotPath) {
-        result = result?.[key];
-    }
-    return result;
-}
-export function generateDisplayableConfig({ config, session, pluginManager, }) {
-    const conf = isStateTreeNode(config) ? readConfObject(config) : config;
-    const formatAboutConfig = readConf(config, ['formatAbout', 'config']) || {};
-    return pluginManager.evaluateExtensionPoint('Core-customizeAbout', {
+import { getConf, mergeFormatCallbacks, readConfObject, readConfSlot, } from '@jbrowse/core/configuration';
+import { isStateTreeNode } from '@jbrowse/mobx-state-tree';
+// #endregion
+/**
+ * Build what a track's About dialog shows: the base config merged with session-
+ * and track-level `formatAbout` overrides and passed through the
+ * `Core-customizeAbout` extension point, plus the resolved `hideUris`.
+ *
+ * Both `formatAbout` slots are two-tier and resolve here together, so the
+ * dialog reads one thing rather than re-deriving half the rule at the call
+ * site. They fold differently on purpose: `config` is a merge the track can win
+ * key-by-key, `hideUris` is an OR a track cannot turn back off.
+ */
+export function getAboutDialogConfig({ config, session, pluginManager, }) {
+    const conf = isStateTreeNode(config)
+        ? readConfObject(config)
+        : config;
+    const trackFormatAbout = readConfSlot(config, ['formatAbout', 'config'], { config: conf }, pluginManager.jexl);
+    const sessionFormatAbout = getConf(session, ['formatAbout', 'config'], {
+        config: conf,
+    });
+    // same two-tier merge the feature-details panel runs on `formatDetails`,
+    // session first so a track can override individual keys
+    const merged = {
         config: {
             ...conf,
-            ...getConf(session, ['formatAbout', 'config'], { config: conf }),
-            ...formatAboutConfig,
+            ...mergeFormatCallbacks(sessionFormatAbout, trackFormatAbout),
         },
-    }, { session, config });
+    };
+    return {
+        ...pluginManager.evaluateExtensionPoint(
+        /** #extensionPoint Core-customizeAbout | sync | Transform the config shown in a track's About dialog */
+        'Core-customizeAbout', merged, { session, config }),
+        // OR'd, not merged: a deployment that hides file locations session-wide
+        // can't have a track turn them back on. Documented on the slot
+        hideUris: Boolean(getConf(session, ['formatAbout', 'hideUris']) ||
+            readConfSlot(config, ['formatAbout', 'hideUris'])),
+    };
 }

package/esm/useEngineLifecycle.d.ts

@@ -0,0 +1,19 @@
+import type { EmbeddedRoot } from './destroyViewState.ts';
+export { useCreateOnce, useCreateOnceAsync } from '@jbrowse/core/util/hooks';
+/**
+ * Async `useCreateOnce` + `useDestroyOnUnmount`: undefined until the engine is
+ * ready. An engine resolving after the final unmount is destroyed on arrival
+ * instead of orphaning its worker pool and autoruns.
+ */
+export declare function useAsyncEngineLifecycle<T extends EmbeddedRoot>(create: () => Promise<T>): T | undefined;
+/**
+ * Destroy an engine when its component really unmounts — terminating its RPC
+ * worker threads and stopping its autoruns.
+ *
+ * The lifecycle rule is {@link useFinalUnmount}'s, including why the obvious
+ * `useEffect(() => () => destroyViewState(state), [state])` is wrong under
+ * StrictMode; this only names what gets torn down. Pair it with
+ * `useCreateOnce`, since the engine has to be the same one for the component's
+ * whole life.
+ */
+export declare function useDestroyOnUnmount(viewState: EmbeddedRoot): void;

package/esm/useEngineLifecycle.js

@@ -0,0 +1,44 @@
+import { useRef } from 'react';
+import { useCreateOnceAsync, useFinalUnmount } from '@jbrowse/core/util/hooks';
+import { destroyViewState } from './destroyViewState.js';
+// `useCreateOnce` is core's, and is re-exported rather than wrapped: an engine
+// is only the most expensive thing StrictMode's double-invoked state
+// initializer can build twice, not the only one. The faceted track selector's
+// MST model hit the same trap in a plugin, which cannot reach this package.
+export { useCreateOnce, useCreateOnceAsync } from '@jbrowse/core/util/hooks';
+/**
+ * Async `useCreateOnce` + `useDestroyOnUnmount`: undefined until the engine is
+ * ready. An engine resolving after the final unmount is destroyed on arrival
+ * instead of orphaning its worker pool and autoruns.
+ */
+export function useAsyncEngineLifecycle(create) {
+    const unmounted = useRef(false);
+    const engine = useCreateOnceAsync(() => create().then(built => {
+        if (unmounted.current) {
+            destroyViewState(built);
+        }
+        return built;
+    }));
+    useFinalUnmount(() => {
+        unmounted.current = true;
+        if (engine) {
+            destroyViewState(engine);
+        }
+    });
+    return engine;
+}
+/**
+ * Destroy an engine when its component really unmounts — terminating its RPC
+ * worker threads and stopping its autoruns.
+ *
+ * The lifecycle rule is {@link useFinalUnmount}'s, including why the obvious
+ * `useEffect(() => () => destroyViewState(state), [state])` is wrong under
+ * StrictMode; this only names what gets torn down. Pair it with
+ * `useCreateOnce`, since the engine has to be the same one for the component's
+ * whole life.
+ */
+export function useDestroyOnUnmount(viewState) {
+    useFinalUnmount(() => {
+        destroyViewState(viewState);
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/product-core",
-  "version": "4.3.0",
+  "version": "5.0.0-beta.2",
   "type": "module",
   "sideEffects": false,
   "description": "JBrowse 2 code shared between products but not used by plugins",
@@ -25,23 +25,23 @@
     "esm"
   ],
   "dependencies": {
-    "@jbrowse/mobx-state-tree": "^5.6.0",
-    "@mui/material": "^7.3.11",
-    "copy-to-clipboard": "^3.3.3",
-    "librpc-web-mod": "^2.1.1",
-    "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/core": "^5.0.0-beta.2",
+    "@jbrowse/render-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"
   },
   "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/product-core",
     "clean": "rimraf esm *.tsbuildinfo",
@@ -49,9 +49,6 @@
   },
   "types": "esm/index.d.ts",
   "exports": {
-    ".": {
-      "types": "./esm/index.d.ts",
-      "import": "./esm/index.js"
-    }
+    ".": "./esm/index.js"
   }
 }

package/esm/RootModel/FormatAbout.d.ts

@@ -1,12 +0,0 @@
-export declare function FormatAboutConfigSchemaFactory(): import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
-    config: {
-        type: string;
-        description: string;
-        defaultValue: {};
-        contextVariable: string[];
-    };
-    hideUris: {
-        type: string;
-        defaultValue: boolean;
-    };
-}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;

package/esm/RootModel/FormatAbout.js

@@ -1,15 +0,0 @@
-import { ConfigurationSchema } from '@jbrowse/core/configuration';
-export function FormatAboutConfigSchemaFactory() {
-    return ConfigurationSchema('FormatAbout', {
-        config: {
-            type: 'frozen',
-            description: 'formats configuration object in about dialog',
-            defaultValue: {},
-            contextVariable: ['config'],
-        },
-        hideUris: {
-            type: 'boolean',
-            defaultValue: false,
-        },
-    });
-}

package/esm/RootModel/FormatDetails.d.ts

@@ -1,24 +0,0 @@
-export declare function FormatDetailsConfigSchemaFactory(): import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
-    feature: {
-        type: string;
-        description: string;
-        defaultValue: {};
-        contextVariable: string[];
-    };
-    subfeatures: {
-        type: string;
-        description: string;
-        defaultValue: {};
-        contextVariable: string[];
-    };
-    depth: {
-        type: string;
-        defaultValue: number;
-        description: string;
-    };
-    maxDepth: {
-        type: string;
-        defaultValue: number;
-        description: string;
-    };
-}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;

package/esm/RootModel/FormatDetails.js

@@ -1,27 +0,0 @@
-import { ConfigurationSchema } from '@jbrowse/core/configuration';
-export function FormatDetailsConfigSchemaFactory() {
-    return ConfigurationSchema('FormatDetails', {
-        feature: {
-            type: 'frozen',
-            description: 'adds extra fields to the feature details',
-            defaultValue: {},
-            contextVariable: ['feature'],
-        },
-        subfeatures: {
-            type: 'frozen',
-            description: 'adds extra fields to the subfeatures of a feature',
-            defaultValue: {},
-            contextVariable: ['feature'],
-        },
-        depth: {
-            type: 'number',
-            defaultValue: 2,
-            description: 'depth to iterate the formatDetails->subfeatures callback on subfeatures (used for example to only apply the callback to the first layer of subfeatures)',
-        },
-        maxDepth: {
-            type: 'number',
-            defaultValue: 10000,
-            description: 'hide subfeatures greater than a certain depth',
-        },
-    });
-}

package/esm/Session/DialogQueue.d.ts

@@ -1,17 +0,0 @@
-import type PluginManager from '@jbrowse/core/PluginManager';
-import type { DialogComponentType } from '@jbrowse/core/util';
-import type { IAnyStateTreeNode, Instance } from '@jbrowse/mobx-state-tree';
-type DoneCallback = (doneCallback: () => void) => [DialogComponentType, Record<string, unknown>];
-export declare function DialogQueueSessionMixin(_pluginManager: PluginManager): import("@jbrowse/mobx-state-tree").IModelType<{}, {
-    queueOfDialogs: [DialogComponentType, Record<string, unknown>][];
-} & {
-    readonly DialogComponent: DialogComponentType | undefined;
-    readonly DialogProps: Record<string, unknown> | undefined;
-} & {
-    removeActiveDialog(): void;
-    queueDialog(doneCallback: DoneCallback): void;
-}, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>;
-export type SessionWithDialogsType = ReturnType<typeof DialogQueueSessionMixin>;
-export type SessionWithDialogs = Instance<SessionWithDialogsType>;
-export declare function isSessionWithDialogs(session: IAnyStateTreeNode): session is SessionWithDialogs;
-export {};

package/esm/Session/DialogQueue.js

@@ -1,31 +0,0 @@
-import { types } from '@jbrowse/mobx-state-tree';
-import { isBaseSession } from "./BaseSession.js";
-export function DialogQueueSessionMixin(_pluginManager) {
-    return types
-        .model('DialogQueueSessionMixin', {})
-        .volatile(() => ({
-        queueOfDialogs: [],
-    }))
-        .views(self => ({
-        get DialogComponent() {
-            return self.queueOfDialogs[0]?.[0];
-        },
-        get DialogProps() {
-            return self.queueOfDialogs[0]?.[1];
-        },
-    }))
-        .actions(self => ({
-        removeActiveDialog() {
-            self.queueOfDialogs = self.queueOfDialogs.slice(1);
-        },
-        queueDialog(doneCallback) {
-            const [component, props] = doneCallback(() => {
-                this.removeActiveDialog();
-            });
-            self.queueOfDialogs = [...self.queueOfDialogs, [component, props]];
-        },
-    }));
-}
-export function isSessionWithDialogs(session) {
-    return isBaseSession(session) && 'queueOfDialogs' in session;
-}