@jbrowse/core 5.0.0-beta.1 → 5.0.0-beta.10

package/esm/BaseFeatureWidget/stateModelFactory.js

@@ -1,16 +1,18 @@
-import { addDisposer, types } from '@jbrowse/mobx-state-tree';
-import { autorun } from 'mobx';
+import { getEnv, isStateTreeNode, types } from '@jbrowse/mobx-state-tree';
+import { hydrateTrackConfig } from '../configuration/index.js';
 import { getSession } from '../util/index.js';
 import { ElementId } from '../util/types/mst.js';
 import { SequenceFeatureDetailsF } from './SequenceFeatureDetails/model.js';
 import { applyFormatDetails, formatDetailsNumber } from './formatDetails.js';
-import { nullReplacer } from './util.js';
+function isTrackNode(thing) {
+    return isStateTreeNode(thing) && 'type' in thing && 'configuration' in thing;
+}
 /**
  * #stateModel BaseFeatureWidget
- * displays data about features, allowing configuration callbacks to modify the
- * contents of what is displayed
- *
- * see: formatDetails-\>feature,formatDetails-\>subfeatures
+ * The feature-details panel. `featureData` is the clicked feature with the
+ * track's and the session's `formatDetails` callbacks applied, derived on read
+ * from the raw feature the widget was opened with, so the same widget follows a
+ * config edit and survives its track being closed.
  */
 export function stateModelFactory(pluginManager) {
     return types
@@ -25,10 +27,8 @@ export function stateModelFactory(pluginManager) {
         type: types.literal('BaseFeatureWidget'),
         /**
          * #property
-         */
-        featureData: types.optional(types.frozen(), undefined),
-        /**
-         * #property
+         * the feature as the click handed it over, before any callback ran.
+         * Persisted as `featureData`
          */
         unformattedFeatureData: types.optional(types.frozen(), undefined),
         /**
@@ -50,27 +50,94 @@ export function stateModelFactory(pluginManager) {
         /**
          * #property
          */
-        maxDepth: types.maybe(types.number),
+        sequenceFeatureDetails: types.optional(SequenceFeatureDetailsF(), {}),
         /**
          * #property
          */
-        sequenceFeatureDetails: types.optional(SequenceFeatureDetailsF(), {}),
+        descriptions: types.optional(types.frozen(), undefined),
         /**
          * #property
+         * names the feature this one was reached through, when it was reached
+         * through one -- a transcript clicked inside its gene
          */
-        descriptions: types.optional(types.frozen(), undefined),
+        parentFeature: types.optional(types.frozen(), undefined),
     })
         .volatile(() => ({
-        /**
-         * #volatile
-         */
-        error: undefined,
         /**
          * #volatile
          * genomic base currently hovered in this widget's sequence panel, read by
          * the LGV crosshair overlay
          */
         sequenceHoverPosition: undefined,
+    }))
+        .views(self => ({
+        /**
+         * #getter
+         * the config the track tier of `formatDetails` reads. The open track's
+         * own while it is open; after it is closed, the session's copy of the
+         * same config, which is why the widget records `trackId`
+         */
+        get trackConfiguration() {
+            const { track, trackId } = self;
+            if (track) {
+                return track.configuration;
+            }
+            if (!trackId) {
+                return undefined;
+            }
+            const conf = getSession(self).getTrackById(trackId);
+            return conf === undefined || isStateTreeNode(conf)
+                ? conf
+                : hydrateTrackConfig(getEnv(self).pluginManager, conf);
+        },
+    }))
+        .views(self => ({
+        get formatDetailsTiers() {
+            return {
+                session: getSession(self).configuration,
+                track: self.trackConfiguration,
+            };
+        },
+    }))
+        .views(self => ({
+        get formatted() {
+            const { unformattedFeatureData } = self;
+            if (!unformattedFeatureData) {
+                return {};
+            }
+            try {
+                return {
+                    feature: applyFormatDetails(self.formatDetailsTiers, unformattedFeatureData),
+                };
+            }
+            catch (e) {
+                const error = new Error(`Error running the formatDetails callbacks: ${e}`, { cause: e });
+                console.error(error);
+                return { error };
+            }
+        },
+        /**
+         * #getter
+         * levels of subfeature card the panel renders; unset means no limit
+         */
+        get maxDepth() {
+            return formatDetailsNumber(self.formatDetailsTiers, 'maxDepth');
+        },
+    }))
+        .views(self => ({
+        /**
+         * #getter
+         * the feature with every `formatDetails` callback applied
+         */
+        get featureData() {
+            return self.formatted.feature;
+        },
+        /**
+         * #getter
+         */
+        get error() {
+            return self.formatted.error;
+        },
     }))
         .actions(self => ({
         /**
@@ -99,96 +166,29 @@ export function stateModelFactory(pluginManager) {
          * #action
          */
         clearFeatureData() {
-            self.featureData = undefined;
-        },
-        /**
-         * #action
-         */
-        setFormattedData(feat) {
-            self.featureData = feat;
-        },
-        /**
-         * #action
-         */
-        setTrackInfo(type, trackId) {
-            self.trackId = trackId;
-            self.trackType = type;
-        },
-        /**
-         * #action
-         */
-        setMaxDepth(maxDepth) {
-            self.maxDepth = maxDepth;
-        },
-        /**
-         * #action
-         */
-        setError(e) {
-            self.error = e;
-        },
-    }))
-        .actions(self => ({
-        afterCreate() {
-            addDisposer(self, autorun(function featureWidgetAutorun() {
-                const { track } = self;
-                // read before any config read so the catch below can attribute
-                // the failure without repeating one that may be what threw
-                let trackId;
-                try {
-                    const { unformattedFeatureData } = self;
-                    const session = getSession(self);
-                    if (track) {
-                        trackId = track.configuration.trackId;
-                        self.setTrackInfo(track.type, trackId);
-                    }
-                    // both tiers apply: a widget can outlive its track
-                    // (safeReference) or never have had one, and the session-wide
-                    // `configuration.formatDetails` still means something. The
-                    // reads stay here in the autorun body rather than moving into
-                    // an action, which would run untracked
-                    const tiers = { session, track };
-                    // an unset maxDepth is the meaningful value, not a missing one:
-                    // the panel reads it as no nesting limit
-                    self.setMaxDepth(formatDetailsNumber(tiers, 'maxDepth'));
-                    if (unformattedFeatureData) {
-                        self.setFormattedData(applyFormatDetails(tiers, unformattedFeatureData));
-                    }
-                }
-                catch (e) {
-                    // jexl throws a bare parse/eval message with nothing naming the
-                    // slot or the config it came from, and this banner replaces the
-                    // whole panel -- say where to look
-                    const where = trackId
-                        ? `track "${trackId}"`
-                        : 'the session configuration';
-                    const err = new Error(`Error running the formatDetails callbacks for ${where}: ${e}`, { cause: e });
-                    console.error(err);
-                    self.setError(err);
-                }
-            }, { name: 'FeatureWidget' }));
+            self.unformattedFeatureData = undefined;
         },
     }))
         .preProcessSnapshot((snap) => {
-        // old snapshots used `featureData`, new ones use `finalizedFeatureData`;
-        // accept both for backwards compat
-        const { featureData, finalizedFeatureData, ...rest } = (snap ?? {});
+        const { featureData, ...rest } = snap ?? {};
+        // here rather than in afterAttach: a second feature opened into the same
+        // widget id reconciles onto the existing node, which never re-attaches
+        const { track } = rest;
         return {
             unformattedFeatureData: featureData,
-            featureData: finalizedFeatureData,
+            ...(isTrackNode(track)
+                ? { trackId: track.configuration.trackId, trackType: track.type }
+                : {}),
             ...rest,
         };
     })
         .postProcessSnapshot(snap => {
-        const { unformattedFeatureData, featureData, ...rest } = snap;
-        // JSON.stringify can return empty if too large
-        const s2 = JSON.stringify(featureData, nullReplacer);
-        const featureTooLargeToBeSerialized = !s2 || s2.length > 2_000_000;
-        // `finalizedFeatureData` is persisted (rather than `featureData`) so
-        // loading from snapshot doesn't re-run the formatter callbacks
+        const { unformattedFeatureData, ...rest } = snap;
+        // undefined when there is no feature
+        const json = JSON.stringify(unformattedFeatureData);
+        const tooLargeToPersist = !json || json.length > 2_000_000;
         return {
-            finalizedFeatureData: featureTooLargeToBeSerialized
-                ? undefined
-                : JSON.parse(s2),
+            featureData: tooLargeToPersist ? undefined : unformattedFeatureData,
             ...rest,
         };
     });

package/esm/BaseFeatureWidget/types.d.ts

@@ -1,23 +1,29 @@
+import type { MenuItem } from '../ui/MenuTypes.ts';
 import type { SimpleFeatureSerialized } from '../util/simpleFeature.ts';
-import type { BaseFeatureWidgetModel } from './stateModelFactory.ts';
+import type { SequenceFeatureDetailsModel, SequenceHoverTarget } from './SequenceFeatureDetails/model.ts';
+import type { IStateTreeNode } from '@jbrowse/mobx-state-tree';
 import type React from 'react';
+export interface FeatureDetailsModel extends IStateTreeNode, SequenceHoverTarget {
+    maxDepth: number | undefined;
+    sequenceFeatureDetails: SequenceFeatureDetailsModel;
+    view: {
+        assemblyNames: string[];
+    } | undefined;
+}
 export interface Descriptors {
     [key: string]: React.ReactNode | Descriptors;
 }
 export type FeatureFormatter = (value: unknown, key: string, index?: number) => React.ReactNode;
+/** Menu items for one attribute's value, offered from a button on its row. */
+export type FieldActions = (path: string[], value: unknown) => MenuItem[];
 export interface BaseProps extends BaseCardProps {
     feature: SimpleFeatureSerialized;
     formatter?: FeatureFormatter;
     descriptions?: Descriptors;
-    model?: BaseFeatureWidgetModel;
 }
 export interface BaseCardProps {
     title?: string;
     defaultExpanded?: boolean;
     children?: React.ReactNode;
 }
-export interface SerializedFeat {
-    [key: string]: unknown;
-    subfeatures?: Record<string, unknown>[];
-}
 export type MaybeSerializedFeat = SimpleFeatureSerialized | undefined;

package/esm/BaseFeatureWidget/util.d.ts

@@ -1,4 +1,3 @@
-import type { SerializedFeat } from './types.tsx';
 export interface Feat {
     start: number;
     end: number;
@@ -7,13 +6,6 @@ export interface Feat {
     id?: string | number;
     phase?: number;
 }
-export interface ParentFeat extends Feat {
-    uniqueId: string;
-    strand?: number;
-    refName: string;
-    subfeatures?: Feat[];
-    parentId?: string;
-}
 export interface SeqState {
     seq: string;
     upstream?: string;
@@ -25,5 +17,3 @@ export interface ErrorState {
 export declare function filterSuccessiveElementsWithSameStartAndEndCoord(list: Feat[]): Feat[];
 export declare function ellipses(slug: string): string;
 export declare function getStrandStr(strand: number | undefined): "" | "(+)" | "(-)";
-export declare const nullReplacer: (_: string, v: unknown) => {} | null;
-export declare function formatSubfeatures(obj: SerializedFeat, depth: number, parse: (obj: Record<string, unknown>) => void, currentDepth?: number): void;

package/esm/BaseFeatureWidget/util.js

@@ -12,20 +12,3 @@ export function ellipses(slug) {
 export function getStrandStr(strand) {
     return strand === -1 ? '(-)' : strand === 1 ? '(+)' : '';
 }
-// JSON only serializes null, not undefined; feature fields are hidden by a
-// formatDetails callback returning undefined (jexl can't produce null), so when
-// persisting we round-trip undefined to null to keep the field hidden after
-// reload (detail components filter with `!= null`). see config guide.
-export const nullReplacer = (_, v) => v === undefined ? null : v;
-// `depth` is how many levels of subfeature the `formatDetails.subfeatures`
-// callback runs on, counted from the clicked feature. The caller resolves it
-// across the session and track tiers and passes 0 when neither declares one, so
-// a config with no formatDetails schema formats nothing rather than every level
-export function formatSubfeatures(obj, depth, parse, currentDepth = 0) {
-    if (currentDepth < depth) {
-        for (const sub of obj.subfeatures ?? []) {
-            formatSubfeatures(sub, depth, parse, currentDepth + 1);
-            parse(sub);
-        }
-    }
-}

package/esm/CorePlugin.js

@@ -1,10 +1,10 @@
-import { lazy } from 'react';
 import { configSchema, stateModelFactory } from './BaseFeatureWidget/index.js';
 import Plugin from './Plugin.js';
 import CytobandAdapterF from './data_adapters/CytobandAdapter/index.js';
 import WidgetType from './pluggableElementTypes/WidgetType.js';
 import * as coreRpcMethods from './rpc/coreRpcMethods.js';
 import { installFormatGuessers } from './util/formatGuessers.js';
+import { lazyWithPreload } from './util/lazyWithPreload.js';
 // the core plugin, which registers types that ALL JBrowse applications are
 // expected to need.
 export default class CorePlugin extends Plugin {
@@ -22,7 +22,7 @@ export default class CorePlugin extends Plugin {
                 heading: 'Feature details',
                 configSchema,
                 stateModel: stateModelFactory(pluginManager),
-                ReactComponent: lazy(() => import('./BaseFeatureWidget/BaseFeatureDetail/index.js')),
+                ReactComponent: lazyWithPreload(() => import('./BaseFeatureWidget/BaseFeatureDetail/index.js')),
             });
         });
     }

package/esm/PluginLoader.d.ts

@@ -1,9 +1,12 @@
 import type { PluginConstructor } from './Plugin.ts';
-import type { CJSPluginDefinition, ESMPluginDefinition, LegacyUMDPluginDefinition, PluginDefinition, UMDPluginDefinition } from './pluginDefinitions.ts';
+import type { ESMPluginDefinition, LegacyUMDPluginDefinition, PluginDefinition, UMDPluginDefinition } from './pluginDefinitions.ts';
 export interface PluginRecord {
     plugin: PluginConstructor;
     definition: PluginDefinition;
 }
+export type ReExportRegistryLoader = () => Promise<{
+    default: Record<string, unknown>;
+}>;
 export interface LoadedPlugin {
     default: PluginConstructor;
 }
@@ -12,33 +15,41 @@ export interface PluginLoadFailure {
     definition: PluginDefinition;
     error: unknown;
 }
+export declare function workerScriptLoadMessage(scriptUrl: string, error: unknown): string;
+/**
+ * The registry has to be published before a plugin bundle runs, but not before
+ * it downloads, so each bundle is preloaded while the registry is fetched.
+ * Skipped under the cache-buster, whose query string differs per request.
+ *
+ * Exported for a worker told its plugins ahead of its boot configuration.
+ */
+export declare function preloadUMDBundles(defs: PluginDefinition[], baseUri?: string): void;
 export default class PluginLoader {
     definitions: PluginDefinition[];
     fetchESM?: (url: string) => Promise<LoadedPlugin>;
-    fetchCJS?: (url: string) => Promise<LoadedPlugin>;
     constructor(defs?: PluginDefinition[], args?: {
         fetchESM?: (url: string) => Promise<LoadedPlugin>;
-        fetchCJS?: (url: string) => Promise<LoadedPlugin>;
     });
-    loadCJSPlugin(def: CJSPluginDefinition, baseUri?: string): Promise<LoadedPlugin>;
     loadESMPlugin(def: ESMPluginDefinition, baseUri?: string): Promise<LoadedPlugin>;
     loadUMDPlugin(def: UMDPluginDefinition | LegacyUMDPluginDefinition, baseUri?: string): Promise<{
         default: PluginConstructor;
     }>;
     loadPlugin(def: PluginDefinition, baseUri?: string): Promise<PluginConstructor>;
-    private reExportTarget;
+    private reExports;
     /**
      * Ask for the runtime ABI (`JBrowseExports`) to be published on `target`
-     * before any plugin bundle is evaluated. Records the target; the registry
-     * itself is fetched in `loadSettled` below.
+     * before any plugin bundle is evaluated. Records the target and the loader;
+     * `loadSettled` fetches the registry, a ~126 KB gzipped module only a runtime
+     * plugin can use (see `ReExports/registry.ts` for why it cannot shrink).
      *
-     * The split is the point. Every product calls this at startup, synchronously,
-     * whether or not the config names a plugin — so importing the registry here
-     * put it in every host's first paint. It is a ~126 KB gzipped module (see
-     * `ReExports/registry.ts` for why it cannot shrink) that only a runtime plugin
-     * can use, and loading one is async anyway.
+     * `registry` is the product's generated map — `reExports.generated.ts` on
+     * the main thread, `workerReExports.generated.ts` in its worker — which
+     * serves every `@jbrowse` package the product bundles. The caller names it
+     * because the registry serves this module: an `import()` of it from here is
+     * a cycle rolldown keeps in any host bundling this file, whether or not
+     * anything loads a plugin (EAGER_BUNDLE.md §3).
      */
-    installGlobalReExports(target: WindowOrWorkerGlobalScope): this;
+    installGlobalReExports(target: WindowOrWorkerGlobalScope, registry: ReExportRegistryLoader): this;
     private publishReExports;
     /**
      * Loads every definition and separates the ones that worked from the ones