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

package/esm/BaseFeatureWidget/BaseFeatureDetail/index.js

@@ -1,30 +1,19 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { observer } from 'mobx-react';
-import { ErrorBanner } from '../../ui/index.js';
 import FeatureDetails from './FeatureDetails.js';
-import FeatureWash from './FeatureWash.js';
-import { isEmpty } from './util.js';
+import FeatureDetailsFrame from './FeatureDetailsFrame.js';
+import ParentFeatureLine from './ParentFeatureLine.js';
 const BaseFeatureDetail = observer(function BaseFeatureDetail({ model, }) {
-    const { error, featureData } = model;
+    const { featureData, unformattedFeatureData, parentFeature } = model;
     // annotated to shed the MST node brand types.frozen() carries on the instance
     const descriptions = model.descriptions;
-    // A field is hidden by a formatDetails callback returning undefined (jexl
-    // can't produce null); every detail component filters with `!= null`, so a
-    // field set to undefined (live) or null (round-tripped through a snapshot) is
-    // dropped identically.
-    if (error) {
-        return _jsx(ErrorBanner, { error: error });
-    }
-    else if (!featureData || isEmpty(featureData)) {
-        return null;
-    }
-    else {
-        return (_jsx(FeatureWash, { uniqueId: featureData.uniqueId, children: _jsx(FeatureDetails, { model: model, feature: featureData, descriptions: descriptions }) }));
-    }
+    return (_jsx(FeatureDetailsFrame, { model: model, children: featureData ? (_jsxs(_Fragment, { children: [parentFeature ? (_jsx(ParentFeatureLine, { parentFeature: parentFeature })) : null, _jsx(FeatureDetails, { model: model, feature: featureData, unformatted: unformattedFeatureData, descriptions: descriptions })] })) : null }));
 });
 export default BaseFeatureDetail;
 export { default as BaseCard } from './BaseCard.js';
 export { default as BaseAttributes } from './BaseAttributes.js';
 export { default as BaseCoreDetails } from './BaseCoreDetails.js';
 export { default as FeatureDetails } from './FeatureDetails.js';
+export { default as FeatureDetailsFrame } from './FeatureDetailsFrame.js';
 export { default as FeatureWash } from './FeatureWash.js';
+export { filterByValueItems, jexlFilterDisplay } from './jexlFilterActions.js';

package/esm/BaseFeatureWidget/BaseFeatureDetail/jexlFilterActions.d.ts

@@ -0,0 +1,16 @@
+import type { MenuItem } from '../../ui/MenuTypes.ts';
+import type { JexlFilterModel } from '../../util/jexlFilters.ts';
+import type { IStateTreeNode } from '@jbrowse/mobx-state-tree';
+export interface JexlFilterDisplay extends JexlFilterModel, IStateTreeNode {
+}
+export declare function isJexlFilterDisplay(thing: unknown): thing is JexlFilterDisplay;
+/** The first of a track's displays that takes jexl filters. */
+export declare function jexlFilterDisplay(track?: {
+    displays: readonly unknown[];
+}): JexlFilterDisplay | undefined;
+/**
+ * "Show only" and "Hide" items for one feature attribute's value, and "Show
+ * only ≥" for a number. Each appends a filter line to the display and offers
+ * an undo.
+ */
+export declare function filterByValueItems(display: JexlFilterDisplay, path: string[], value: unknown): MenuItem[];

package/esm/BaseFeatureWidget/BaseFeatureDetail/jexlFilterActions.js

@@ -0,0 +1,49 @@
+import { pathSubject, printCondition } from '@jbrowse/jexl';
+import { ensureJexlPrefix } from '../../util/jexlStrings.js';
+import { getNotificationSink } from '../../util/sessionServices.js';
+const MAX_LABEL_VALUE = 30;
+export function isJexlFilterDisplay(thing) {
+    return (typeof thing === 'object' &&
+        thing !== null &&
+        'setFilter' in thing &&
+        'configuredFilters' in thing);
+}
+/** The first of a track's displays that takes jexl filters. */
+export function jexlFilterDisplay(track) {
+    return track?.displays.find(isJexlFilterDisplay);
+}
+/**
+ * "Show only" and "Hide" items for one feature attribute's value, and "Show
+ * only ≥" for a number. Each appends a filter line to the display and offers
+ * an undo.
+ */
+export function filterByValueItems(display, path, value) {
+    if (typeof value !== 'string' && typeof value !== 'number') {
+        return [];
+    }
+    const field = path.join('.');
+    const text = String(value);
+    const shown = text.length > MAX_LABEL_VALUE ? `${text.slice(0, MAX_LABEL_VALUE)}…` : text;
+    const add = (op) => () => {
+        const previous = display.configuredFilters();
+        const line = printCondition({
+            subject: pathSubject('feature', path),
+            op,
+            value,
+        });
+        display.setFilter([...previous, ensureJexlPrefix(line)]);
+        getNotificationSink(display).notify('Filter added', 'info', {
+            name: 'Undo',
+            onClick: () => {
+                display.setFilter(previous);
+            },
+        });
+    };
+    return [
+        { label: `Show only ${field} = ${shown}`, onClick: add('==') },
+        { label: `Hide ${field} = ${shown}`, onClick: add('!=') },
+        ...(typeof value === 'number'
+            ? [{ label: `Show only ${field} ≥ ${shown}`, onClick: add('>=') }]
+            : []),
+    ];
+}

package/esm/BaseFeatureWidget/BaseFeatureDetail/util.d.ts

@@ -1,11 +1,3 @@
 export declare function isEmpty(obj: Record<string, unknown>): boolean;
-export declare function applyFeatureFormatting<T extends {
-    __jbrowsefmt?: Record<string, unknown>;
-}>(feature: T): T & {
-    [x: string]: unknown;
-};
-export declare function isFormattedField(feature: {
-    __jbrowsefmt?: Record<string, unknown>;
-}, key: string): boolean;
 export declare function generateTitle(name: unknown, id: unknown, type: unknown): string;
 export declare function accessNested(arr: string[], obj?: Record<string, unknown>): string | undefined;

package/esm/BaseFeatureWidget/BaseFeatureDetail/util.js

@@ -1,40 +1,17 @@
-import { isObject } from '../../util/index.js';
+import { coarseStripHTML, isObject } from '../../util/index.js';
 import { ellipses } from '../util.js';
 export function isEmpty(obj) {
     return Object.keys(obj).length === 0;
 }
-// The view the details panel renders: raw feature fields with the
-// formatDetails-callback output (`__jbrowsefmt`) merged on top, so a callback
-// value overrides the raw one. A field the callback sets to null/undefined then
-// drops out of the panel's `!= null` filters — this is how callbacks hide
-// fields. `__jbrowsefmt` itself is in Attributes' globalOmit, so it never
-// renders.
-export function applyFeatureFormatting(feature) {
-    return { ...feature, ...feature.__jbrowsefmt };
-}
-// Whether a formatDetails callback named `key` at all -- including setting it
-// to null/undefined, which is how a callback hides a field. Lets a derived row
-// (e.g. Length) defer to the callback without treating "hidden" as "absent".
-export function isFormattedField(feature, key) {
-    const fmt = feature.__jbrowsefmt;
-    return fmt !== undefined && key in fmt;
-}
 export function generateTitle(name, id, type) {
-    const label = name || id;
-    return [label ? ellipses(`${label}`) : '', type ? `${type}` : '']
+    const label = coarseStripHTML(`${name || id || ''}`);
+    return [label ? ellipses(label) : '', type ? `${type}` : '']
         .filter(Boolean)
         .join(' - ');
 }
-// pick using a path from an object, similar to _.get from lodash with special
-// logic for Descriptions from e.g. VCF headers
-//
-// @param arr  example ['a','b'], obj = {a:{b:'hello}}
-// @returns hello (with special addition to grab description also)
-//
-// A path that runs out of objects before it runs out of elements has no
-// description: walking ['INFO','ANN'] into `{INFO: 'a string'}` used to stop at
-// the string and hand it back, so every subfield of an object-valued attribute
-// inherited its parent's description.
+// the description at `arr` in a descriptions tree: a string there, or the
+// `Description` of the object there, as a VCF header entry carries. A path
+// that runs out of objects early has none
 export function accessNested(arr, obj = {}) {
     let obj2 = obj;
     for (const elt of arr) {

package/esm/BaseFeatureWidget/SequenceFeatureDetails/SequenceContents.js

@@ -1,42 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { observer } from 'mobx-react';
-import { getGeneticCode, parseTranslTable, relativizeTranslExcept, } from '../../util/geneticCodes.js';
+import { getGeneticCode } from '../../util/geneticCodes.js';
+import SimpleFeature from '../../util/simpleFeature.js';
+import { transcriptGeneticCodeId, transcriptTranslExcept, } from '../../util/translateTranscript.js';
 import { modeHasUpDownstream, modeSupportsRevcomp, resolveShowCoordinates, } from './featureTypeUtil.js';
 import CDNASequence from './seqtypes/CDNASequence.js';
 import CDSSequence from './seqtypes/CDSSequence.js';
 import GenomicSequence from './seqtypes/GenomicSequence.js';
 import ProteinSequence from './seqtypes/ProteinSequence.js';
 import { getSequenceData } from './useSequenceData.js';
-function findCdsSubfeature(feature) {
-    return feature.subfeatures?.find(f => f.type?.toLowerCase() === 'cds');
-}
-// CDS-bound translation reads `transl_table` off the CDS subfeature (or the
-// feature itself), so e.g. a mitochondrial gene translates with table 2 rather
-// than the standard code. When the feature carries no transl_table (e.g. UCSC
-// genePred-derived GFFs), fall back to the assembly-configured code for the
-// contig. Undefined falls back to the standard code.
-function proteinGeneticCode(feature, assemblyGeneticCodeId) {
-    const cds = findCdsSubfeature(feature);
-    const id = parseTranslTable(feature.transl_table) ??
-        parseTranslTable(cds?.transl_table) ??
-        assemblyGeneticCodeId;
-    return getGeneticCode(id);
-}
-// Parses transl_except from the feature or its CDS subfeature into the coordinate
-// system used by convertCodingSequenceToPeptides (feature-relative, reversed for
-// minus-strand genes).
-function featureTranslExcept(feature) {
-    const cds = findCdsSubfeature(feature);
-    const raw = feature.transl_except ?? cds?.transl_except;
-    return raw
-        ? relativizeTranslExcept({
-            raw,
-            featureStart: feature.start,
-            featureLength: feature.end - feature.start,
-            strand: feature.strand,
-        })
-        : [];
-}
 // Dispatches to the renderer for the current sequence type. An observer because
 // it reads showCoordinatesSetting: that setting moving relative<->genomic
 // leaves the coarse showCoordinates boolean every other observer here reads
@@ -60,9 +32,10 @@ const SequenceContents = observer(function SequenceContents({ mode, feature, seq
         case 'cds':
             return _jsx(CDSSequence, { model: model, cds: cds, sequence: seq });
         case 'protein': {
-            const translExcept = featureTranslExcept(feature);
-            const code = proteinGeneticCode(feature, assemblyGeneticCodeId);
-            return (_jsx(ProteinSequence, { model: model, cds: cds, sequence: seq, codonTable: code.codonTable, starts: code.starts, translExcept: translExcept.length ? translExcept : undefined }));
+            const transcript = new SimpleFeature(feature);
+            const translExcept = transcriptTranslExcept(transcript);
+            const code = getGeneticCode(transcriptGeneticCodeId(transcript, assemblyGeneticCodeId));
+            return (_jsx(ProteinSequence, { model: model, cds: cds, sequence: seq, codonTable: code.codonTable, starts: code.starts, translExcept: translExcept?.length ? translExcept : undefined }));
         }
         // cdna and the gene_* variants all render the spliced transcript; introns
         // and up/downstream flanks are toggled by the mode name

package/esm/BaseFeatureWidget/SequenceFeatureDetails/SequenceFeaturePanel.d.ts

@@ -1,7 +1,7 @@
 import type { SimpleFeatureSerialized } from '../../util/index.ts';
-import type { BaseFeatureWidgetModel } from '../stateModelFactory.ts';
+import type { FeatureDetailsModel } from '../types.tsx';
 declare const SequenceFeaturePanel: ({ model, feature, }: {
-    model: BaseFeatureWidgetModel;
+    model: FeatureDetailsModel;
     feature: SimpleFeatureSerialized;
 }) => import("react").JSX.Element;
 export default SequenceFeaturePanel;

package/esm/BaseFeatureWidget/SequenceFeatureDetails/SequenceName.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { observer } from 'mobx-react';
-import { toLocale } from '../../util/index.js';
+import { coarseStripHTML, toLocale } from '../../util/index.js';
 import { getStrandStr } from '../util.js';
 import { modeHasUpDownstream, modeSupportsRevcomp } from './featureTypeUtil.js';
 const SequenceName = observer(function SequenceName({ mode, model, revcomp, feature, }) {
     return (_jsx("div", { children: `>${[
             [
-                feature.name || feature.id,
+                coarseStripHTML(`${feature.name || feature.id || ''}`),
                 mode,
                 revcomp && modeSupportsRevcomp(mode) ? 'revcomp' : '',
             ]

package/esm/BaseFeatureWidget/SequenceFeatureDetails/dialogs/TranscriptSelector.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { FormControl, MenuItem, Select } from '@mui/material';
+import { coarseStripHTML } from '../../../util/index.js';
 import { makeStyles } from '../../../util/tss-react/index.js';
 const useStyles = makeStyles()({
     formControl: {
@@ -14,5 +15,6 @@ export default function TranscriptSelector({ transcripts, transcriptIndex, setTr
     const { classes } = useStyles();
     return (_jsx(FormControl, { className: classes.formControl, children: _jsx(Select, { size: "small", value: transcriptIndex, onChange: event => {
                 setTranscriptIndex(Number(event.target.value));
-            }, "aria-label": "Transcript", children: transcripts.map((transcript, idx) => (_jsx(MenuItem, { value: idx, "data-testid": `transcript_${idx}`, children: transcript.name || transcript.id || `Transcript ${idx + 1}` }, transcript.uniqueId))) }) }));
+            }, "aria-label": "Transcript", children: transcripts.map((transcript, idx) => (_jsx(MenuItem, { value: idx, "data-testid": `transcript_${idx}`, children: coarseStripHTML(`${transcript.name || transcript.id || ''}`) ||
+                    `Transcript ${idx + 1}` }, transcript.uniqueId))) }) }));
 }

package/esm/BaseFeatureWidget/SequenceFeatureDetails/model.d.ts

@@ -10,6 +10,18 @@ export interface SequenceHoverTarget {
     setSequenceHoverPosition: (pos: SequenceHoverPosition | undefined) => void;
 }
 export type SequenceDisplayMode = 'gene' | 'gene_collapsed_intron' | 'gene_updownstream' | 'gene_updownstream_collapsed_intron' | 'cdna' | 'cds' | 'genomic' | 'genomic_sequence_updownstream' | 'protein';
+/**
+ * #stateModel SequenceFeatureDetails
+ * #category Widget
+ * User preferences for the sequence readout under a feature's details, seeded
+ * from and written straight back to localStorage. Nothing here is snapshotted
+ * or reads the tree, so an instance is cheap and needs no lifecycle: a holder
+ * that only sometimes shows a panel (e.g. a track's right-click dialog) creates
+ * one when it opens rather than carrying it around.
+ *
+ * `BaseFeatureWidget` holds one as `sequenceFeatureDetails`, which is where a
+ * caller changing the readout reaches these actions.
+ */
 export declare function SequenceFeatureDetailsF(): import("@jbrowse/mobx-state-tree").IModelType<{}, {
     /**
      * #volatile

package/esm/BaseFeatureWidget/SequenceFeatureDetails/model.js

@@ -9,11 +9,18 @@ const p = 'sequenceFeatureDetails';
 function clampCharactersPerRow(n) {
     return Math.max(1, Math.floor(n));
 }
-// User preferences for the sequence readout, seeded from and written straight
-// back to localStorage. Nothing here is snapshotted or reads the tree, so an
-// instance is cheap and needs no lifecycle: a holder that only sometimes shows
-// a panel (e.g. a track's right-click dialog) creates one when it opens rather
-// than carrying it around.
+/**
+ * #stateModel SequenceFeatureDetails
+ * #category Widget
+ * User preferences for the sequence readout under a feature's details, seeded
+ * from and written straight back to localStorage. Nothing here is snapshotted
+ * or reads the tree, so an instance is cheap and needs no lifecycle: a holder
+ * that only sometimes shows a panel (e.g. a track's right-click dialog) creates
+ * one when it opens rather than carrying it around.
+ *
+ * `BaseFeatureWidget` holds one as `sequenceFeatureDetails`, which is where a
+ * caller changing the readout reaches these actions.
+ */
 export function SequenceFeatureDetailsF() {
     return types
         .model('SequenceFeatureDetails')

package/esm/BaseFeatureWidget/SequenceFeatureDetails/useSequenceData.js

@@ -18,13 +18,16 @@ function processFeatureData(children, feature) {
     // translations if included)
     const featureType = feature.type?.toLowerCase();
     const isMatureProteinRegion = featureType === 'mature_protein_region_of_cds';
+    const ofType = (type) => children.filter(sub => sub.type?.toLowerCase() === type);
+    // A frameshift polyprotein's CDS carries its reading frames as CDS rows beside
+    // its cleavage products; a single-frame one has only the products.
+    const codingRows = ofType('cds');
     const cds = isMatureProteinRegion
         ? [{ start: 0, end: feature.end - feature.start, type: 'CDS' }]
-        : filterSuccessiveElementsWithSameStartAndEndCoord(children.filter(sub => {
-            const type = sub.type?.toLowerCase();
-            return type === 'cds' || type === 'mature_protein_region_of_cds';
-        }));
-    const exons = filterSuccessiveElementsWithSameStartAndEndCoord(children.filter(sub => sub.type?.toLowerCase() === 'exon'));
+        : filterSuccessiveElementsWithSameStartAndEndCoord(codingRows.length > 0
+            ? codingRows
+            : ofType('mature_protein_region_of_cds'));
+    const exons = filterSuccessiveElementsWithSameStartAndEndCoord(ofType('exon'));
     // annotated UTRs are deliberately not read: a UTR is just the exonic sequence
     // outside the CDS, so the renderer derives the split from cds+exons. Trusting
     // the annotation meant a transcript that named only one of its UTRs lost the

package/esm/BaseFeatureWidget/configSchema.d.ts

@@ -1,2 +1,2 @@
-declare const configSchema: import("../configuration/configurationSchema.ts").ConfigurationSchemaType<{}, import("../configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, undefined>>;
+declare const configSchema: import("../configuration/configurationSchema.ts").ConfigurationSchemaType<{}, import("../configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, undefined, undefined, import("../configuration/requirements.ts").ConfigurationSchemaRequirement<Partial<Record<string, string[]>>, string>, any>>;
 export { configSchema };

package/esm/BaseFeatureWidget/formatDetails.d.ts

@@ -1,38 +1,22 @@
 import type { AnyConfigurationModel } from '../configuration/index.ts';
 import type { SimpleFeatureSerialized } from '../util/index.ts';
-import type { IStateTreeNode } from '@jbrowse/mobx-state-tree';
 /**
- * Anything carrying a `formatDetails` sub-schema: the session (whose
- * `configuration.formatDetails` applies to every track) and the clicked
- * feature's track. The track is absent when the widget was opened without one,
- * or outlived the one it had -- it is a `safeReference` -- and the session-wide
- * tier still has to run in that case.
+ * The two config nodes carrying a `formatDetails` sub-schema. The session's
+ * applies to every track; the track's is absent when the widget was opened
+ * without one. The track's object spreads over the session's, and its numbers
+ * win.
  */
-export interface FormatDetailsHolder extends IStateTreeNode {
-    configuration: AnyConfigurationModel;
-}
 export interface FormatDetailsTiers {
-    session: FormatDetailsHolder;
-    track?: FormatDetailsHolder;
+    session: AnyConfigurationModel;
+    track?: AnyConfigurationModel;
 }
-/**
- * `depth` or `maxDepth`: the track's value when the track sets one, else the
- * session's, else unset.
- *
- * These override rather than merge, unlike the callback objects. That is only
- * expressible because both are `maybeNumber` slots with no `defaultValue` --
- * given a schema default the track reported a value whether or not anyone set
- * one, so the session-wide tier could never apply to a track, and every real
- * config has a track.
- */
+/** `depth` or `maxDepth`: the track's value when set, else the session's. */
 export declare function formatDetailsNumber(tiers: FormatDetailsTiers, slot: string): number | undefined;
 /**
- * A copy of the feature with each tier's callback output merged onto it (and
- * onto its subfeatures, down to `depth`) as `__jbrowsefmt`, which the detail
- * components spread over the raw fields at render.
- *
- * `__jbrowsefmt` is attached only where a callback produced something, so a
- * config with no `formatDetails` at all leaves the feature exactly as it came
- * in rather than stamping empty objects through the persisted snapshot.
+ * The feature as the details panel shows it: each tier's `feature` callback
+ * output spread over the clicked feature, and `subfeatures` output over each
+ * subfeature down to `depth`. A key set to null or undefined hides that row,
+ * since every detail component filters with `!= null`. A config declaring no
+ * callback gets the input back untouched.
  */
-export declare function applyFormatDetails(tiers: FormatDetailsTiers, featureData: SimpleFeatureSerialized): SimpleFeatureSerialized;
+export declare function applyFormatDetails(tiers: FormatDetailsTiers, feature: SimpleFeatureSerialized): SimpleFeatureSerialized;

package/esm/BaseFeatureWidget/formatDetails.js

@@ -1,63 +1,43 @@
-/**
- * @module
- * Resolving the `formatDetails` config hook across its two tiers, on behalf of
- * the feature-details widget's autorun. Plain functions rather than model
- * members: an MST action runs untracked, so folding these into one would leave
- * the autorun with no observable reads and fire it exactly once.
- */
-import { DEFAULT_FORMAT_DETAILS_DEPTH, getConf, mergeFormatCallbacks, } from '../configuration/index.js';
-import { isObject } from '../util/index.js';
-import { isEmpty } from './BaseFeatureDetail/util.js';
-import { formatSubfeatures } from './util.js';
-/** Both tiers of one slot, session first, so a spread puts the track on top. */
-function readTiers({ session, track }, slot, args) {
-    return [
-        getConf(session, ['formatDetails', slot], args),
-        track ? getConf(track, ['formatDetails', slot], args) : undefined,
-    ];
+import { DEFAULT_FORMAT_DETAILS_DEPTH, mergeFormatCallbacks, readConfObject, } from '../configuration/index.js';
+import { isPlainObject } from '../util/objectUtils.js';
+function readCallback(conf, where, slot, args) {
+    try {
+        const fields = mergeFormatCallbacks(readConfObject(conf, ['formatDetails', slot], args));
+        if (fields.subfeatures != null) {
+            throw new Error('a callback can hide subfeatures but not replace them; reshape each one with the subfeatures callback');
+        }
+        return fields;
+    }
+    catch (e) {
+        throw new Error(`formatDetails.${slot} of ${where}: ${e}`, { cause: e });
+    }
+}
+function readCallbacks({ session, track }, slot, args) {
+    return mergeFormatCallbacks(readCallback(session, 'the session configuration', slot, args), track
+        ? readCallback(track, `track "${readConfObject(track, 'trackId')}"`, slot, args)
+        : undefined);
 }
 /**
- * Whether either tier **declares** a callback for `slot`, read RAW off the
- * config node.
- *
- * Deliberately not `readTiers`: "is anything configured here" and "what does
- * this produce for this feature" are different questions, and an arg-less read
- * of a `jexl:` slot answers the second one badly — it evaluates the user's
- * expression against a context where `feature` is undefined (see
- * `configuration/CLAUDE.md`), which is a throw or a junk value, per tier, just
- * to find out the slot exists.
- *
- * Both callback slots default to `{}`, so a config that never mentions
- * `formatDetails` answers false for both and `applyFormatDetails` can hand the
- * feature straight back. That is the whole point of asking: the walk it skips
- * is proportional to the subfeature tree, and the tree can be very large (a
- * RefSeq BRCA1 is 368 transcripts, ~16k nodes) while the config that formats
- * none of it is the overwhelmingly common one.
+ * Whether either tier sets `slot`, read raw off the node: an arg-less read of
+ * a `jexl:` slot evaluates it against an empty context just to find out it
+ * exists. Both callback slots default to `{}`, so a config that never mentions
+ * `formatDetails` answers false and the walk below is skipped entirely, which
+ * matters on a RefSeq gene with 16k nested nodes.
  */
 function declaresCallback({ session, track }, slot) {
-    return [session, track].some(holder => {
-        // raw property access, not a reader: see above
-        const sub = holder?.configuration.formatDetails;
-        const value = sub?.[slot];
-        // a `jexl:` slot is a string; a plain-object slot counts only when it has
-        // keys, since `{}` is the schema default and merges to nothing
+    return [session, track].some(conf => {
+        const value = conf?.formatDetails?.[slot];
         return typeof value === 'string'
             ? value !== ''
-            : isObject(value) && !isEmpty(value);
+            : isPlainObject(value) && Object.keys(value).length > 0;
     });
 }
-/**
- * `depth` or `maxDepth`: the track's value when the track sets one, else the
- * session's, else unset.
- *
- * These override rather than merge, unlike the callback objects. That is only
- * expressible because both are `maybeNumber` slots with no `defaultValue` --
- * given a schema default the track reported a value whether or not anyone set
- * one, so the session-wide tier could never apply to a track, and every real
- * config has a track.
- */
+/** `depth` or `maxDepth`: the track's value when set, else the session's. */
 export function formatDetailsNumber(tiers, slot) {
-    const [fromSession, fromTrack] = readTiers(tiers, slot);
+    const fromSession = readConfObject(tiers.session, ['formatDetails', slot]);
+    const fromTrack = tiers.track
+        ? readConfObject(tiers.track, ['formatDetails', slot])
+        : undefined;
     return typeof fromTrack === 'number'
         ? fromTrack
         : typeof fromSession === 'number'
@@ -65,39 +45,38 @@ export function formatDetailsNumber(tiers, slot) {
             : undefined;
 }
 /**
- * A copy of the feature with each tier's callback output merged onto it (and
- * onto its subfeatures, down to `depth`) as `__jbrowsefmt`, which the detail
- * components spread over the raw fields at render.
- *
- * `__jbrowsefmt` is attached only where a callback produced something, so a
- * config with no `formatDetails` at all leaves the feature exactly as it came
- * in rather than stamping empty objects through the persisted snapshot.
+ * The feature as the details panel shows it: each tier's `feature` callback
+ * output spread over the clicked feature, and `subfeatures` output over each
+ * subfeature down to `depth`. A key set to null or undefined hides that row,
+ * since every detail component filters with `!= null`. A config declaring no
+ * callback gets the input back untouched.
  */
-export function applyFormatDetails(tiers, featureData) {
-    const hasFeature = declaresCallback(tiers, 'feature');
-    const hasSubfeatures = declaresCallback(tiers, 'subfeatures');
-    // Nothing declared by either tier: the result is the input, so return the
-    // input. The clone and the per-node walk below are both proportional to the
-    // subfeature tree and both produce nothing here, and this is the default
-    // config -- most tracks never set `formatDetails` at all.
-    if (!hasFeature && !hasSubfeatures) {
-        return featureData;
-    }
-    const feature = structuredClone(featureData);
-    if (hasFeature) {
-        const fmt = mergeFormatCallbacks(...readTiers(tiers, 'feature', { feature }));
-        if (!isEmpty(fmt)) {
-            feature.__jbrowsefmt = fmt;
-        }
+export function applyFormatDetails(tiers, feature) {
+    const formatsFeature = declaresCallback(tiers, 'feature');
+    const formatsSubfeatures = declaresCallback(tiers, 'subfeatures');
+    if (!formatsFeature && !formatsSubfeatures) {
+        return feature;
     }
-    if (hasSubfeatures) {
-        const depth = formatDetailsNumber(tiers, 'depth') ?? DEFAULT_FORMAT_DETAILS_DEPTH;
-        formatSubfeatures(feature, depth, sub => {
-            const subFmt = mergeFormatCallbacks(...readTiers(tiers, 'subfeatures', { feature: sub }));
-            if (!isEmpty(subFmt)) {
-                sub.__jbrowsefmt = subFmt;
-            }
-        });
+    const depth = formatsSubfeatures
+        ? (formatDetailsNumber(tiers, 'depth') ?? DEFAULT_FORMAT_DETAILS_DEPTH)
+        : 0;
+    const track = tiers.track ? readConfObject(tiers.track) : undefined;
+    function format(node, level, fmt) {
+        const { subfeatures } = node;
+        return {
+            ...node,
+            ...(subfeatures && level < depth
+                ? {
+                    subfeatures: subfeatures.map(sub => format(sub, level + 1, readCallbacks(tiers, 'subfeatures', {
+                        feature: sub,
+                        parent: node,
+                        depth: level + 1,
+                        track,
+                    }))),
+                }
+                : {}),
+            ...fmt,
+        };
     }
-    return feature;
+    return format(feature, 0, formatsFeature ? readCallbacks(tiers, 'feature', { feature, track }) : {});
 }

package/esm/BaseFeatureWidget/index.d.ts

@@ -1,5 +1,6 @@
 export { configSchema } from './configSchema.ts';
-export type { Descriptors, MaybeSerializedFeat } from './types.tsx';
+export type { Descriptors, FeatureDetailsModel, MaybeSerializedFeat, } from './types.tsx';
 export type { SequenceHoverPosition, ShowCoordinatesMode, } from './SequenceFeatureDetails/model.ts';
+export type { FormatDetailsTiers } from './formatDetails.ts';
 export { stateModelFactory } from './stateModelFactory.ts';
 export type { BaseFeatureWidgetModel, BaseFeatureWidgetStateModel, } from './stateModelFactory.ts';