@jbrowse/core 4.3.0 → 5.0.0-beta.1

package/esm/BaseFeatureWidget/BaseFeatureDetail/FeatureDetails.js

@@ -1,13 +1,24 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
 import { Divider, Typography } from '@mui/material';
-import Attributes from "./Attributes.js";
-import BaseCard from "./BaseCard.js";
-import CoreDetails from "./CoreDetails.js";
-import { generateTitle } from "./util.js";
-import { ErrorBoundary } from "../../ui/ErrorBoundary.js";
-import { ErrorMessage } from "../../ui/index.js";
-import { getEnv, getSession } from "../../util/index.js";
-import SequenceFeatureDetails from "../SequenceFeatureDetails/index.js";
+import { observer } from 'mobx-react';
+import { ErrorBoundary } from '../../ui/ErrorBoundary.js';
+import PluggableComponents from '../../ui/PluggableComponents.js';
+import { ErrorBanner } from '../../ui/index.js';
+import { getEnv } from '../../util/index.js';
+import SequenceFeatureDetails from '../SequenceFeatureDetails/index.js';
+import Attributes from './Attributes.js';
+import BaseCard from './BaseCard.js';
+import CoreDetails from './CoreDetails.js';
+import { generateTitle } from './util.js';
+function SectionHeader({ title }) {
+    return _jsx(Typography, { variant: "overline", children: title });
+}
+// interleave a <Divider/> between each node, e.g. [a,b,c] -> a | b | c
+function joinByDivider(nodes) {
+    return nodes.map((node, i) => (_jsxs(Fragment, { children: [i > 0 ? _jsx(Divider, {}) : null, node] }, i)));
+}
+// coreDetails are omitted in some circumstances
 const coreDetails = [
     'name',
     'start',
@@ -17,26 +28,31 @@ const coreDetails = [
     'description',
     'type',
 ];
-export default function FeatureDetails(props) {
-    const { omit = [], model, feature, depth = 0 } = props;
-    const { maxDepth } = model;
-    const { mate, name = '', id = '', type = '', subfeatures, uniqueId } = feature;
-    const pm = getEnv(model).pluginManager;
-    const session = getSession(model);
-    const ExtraPanel = pm.evaluateExtensionPoint('Core-extraFeaturePanel', null, {
-        session,
-        feature,
-        model,
-    });
-    const m = mate;
-    return (_jsxs(BaseCard, { title: generateTitle(name, id, type), children: [_jsx(Typography, { children: "Core details" }), _jsx(CoreDetails, { ...props }), m ? (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(Typography, { children: "Mate details" }), _jsx(CoreDetails, { ...props, feature: {
-                            ...m,
-                            start: m.start,
-                            end: m.end,
-                            refName: m.refName,
-                            uniqueId: `${uniqueId}-mate`,
-                        } })] })) : null, _jsx(Divider, {}), _jsx(Typography, { children: "Attributes" }), _jsx(Attributes, { attributes: feature, ...props, omit: omit, omitSingleLevel: coreDetails }), _jsx(ErrorBoundary, { FallbackComponent: e => _jsx(ErrorMessage, { error: e.error }), children: _jsx(SequenceFeatureDetails, { ...props }) }), ExtraPanel ? (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(BaseCard, { title: ExtraPanel.name, children: _jsx(ExtraPanel.Component, { ...props }) })] })) : null, depth < maxDepth && subfeatures?.length ? (_jsx(BaseCard, { title: "Subfeatures", defaultExpanded: depth < 1, children: subfeatures.map((sub, idx) => (_jsx(FeatureDetails, { feature: {
+const FeatureDetails = observer(function FeatureDetails(props) {
+    const { omit = [], model, feature, depth = 0, descriptions, formatter, } = props;
+    const maxDepth = model.maxDepth ?? Infinity;
+    const { mate: m, name = '', id = '', type = '', subfeatures, uniqueId, } = feature;
+    // resolved rather than raw props: `depth` is what tells a registered panel
+    // whether it is under the clicked feature (0) or a nested subfeature card, and
+    // it is only defaulted here -- passing raw props left it undefined at the top
+    // level, so a panel selecting on `depth === 0` could never match
+    const panelProps = { ...props, depth };
+    return (_jsxs(BaseCard, { title: generateTitle(name, id, type), children: [joinByDivider([
+                _jsxs(Fragment, { children: [_jsx(SectionHeader, { title: "Core details" }), _jsx(CoreDetails, { ...props })] }, "core"),
+                m ? (_jsxs(Fragment, { children: [_jsx(SectionHeader, { title: "Mate details" }), _jsx(CoreDetails, { ...props, feature: { ...m, uniqueId: `${uniqueId}-mate` } })] }, "mate")) : null,
+                _jsxs(Fragment, { children: [_jsx(SectionHeader, { title: "Attributes" }), _jsx(Attributes, { attributes: feature, omit: omit, omitSingleLevel: coreDetails, descriptions: descriptions, formatter: formatter })] }, "attributes"),
+            ].filter(Boolean)), _jsx(ErrorBoundary, { FallbackComponent: e => _jsx(ErrorBanner, { error: e.error }), children: _jsx(SequenceFeatureDetails, { ...props }) }), _jsx(PluggableComponents, { pluginManager: getEnv(model).pluginManager, 
+                /** #extensionPoint Core-extraFeaturePanel | sync | Add extra panels to the feature details widget */
+                name: "Core-extraFeaturePanel", props: panelProps }), depth < maxDepth && subfeatures?.length ? (_jsx(BaseCard, { title: "Subfeatures", defaultExpanded: depth === 0 && subfeatures.length <= 20, children: subfeatures.map((sub, idx) => (_jsx(FeatureDetails
+                // eslint-disable-next-line @eslint-react/no-array-index-key -- subfeature list order is fixed per feature, no unique field guaranteed by type
+                , { feature: {
                         ...sub,
                         uniqueId: `${uniqueId}_${idx}`,
-                    }, model: model, depth: depth + 1 }, JSON.stringify(sub)))) })) : null] }));
-}
+                    }, model: model, depth: depth + 1, 
+                    // a subfeature's fields are the same fields, so the caller's
+                    // descriptions and value formatter apply here too -- omitting
+                    // them silently dropped e.g. VCF header descriptions and the
+                    // truncating <Formatter> from every nested card
+                    descriptions: descriptions, formatter: formatter, omit: omit }, `${uniqueId}_${idx}`))) })) : null] }));
+});
+export default FeatureDetails;

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

@@ -0,0 +1,20 @@
+/**
+ * A one-shot tint over a feature-details panel, played when the panel swaps to
+ * a different feature.
+ *
+ * Every feature widget is a singleton the drawer reuses -- one id per widget
+ * type, rendered without a key -- so clicking a second feature remounts
+ * nothing. The drawer keeps its scroll offset with it, and on a dense panel the
+ * content can change entirely below the fold with nothing on screen saying it
+ * did. The cue covers the whole panel rather than its title for that reason:
+ * a title is off-screen for exactly the reader who cannot tell it updated.
+ *
+ * **Mount this outside anything keyed on the feature.** Some widgets key their
+ * body on `uniqueId` to reset per-feature UI state (variants does, for its
+ * sample grid); inside such a key this remounts on every swap and its counter
+ * never leaves zero, so it silently never plays.
+ */
+export default function FeatureWash({ uniqueId, children, }: {
+    uniqueId: string | undefined;
+    children: React.ReactNode;
+}): import("react").JSX.Element;

package/esm/BaseFeatureWidget/BaseFeatureDetail/FeatureWash.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { alpha } from '../../ui/palette.js';
+import { keyframes, makeStyles } from '../../util/tss-react/index.js';
+// Long enough to register out of the corner of an eye that was on the track,
+// short enough that a run of clicks doesn't leave the panel permanently tinted.
+const WASH_MS = 550;
+const useStyles = makeStyles()(theme => {
+    // No `prefers-reduced-motion` branch, deliberately. Nothing here moves,
+    // scales or travels -- a background color fading out is not motion, and that
+    // setting's subject is motion. Dropping the cue for reduced-motion users
+    // would take away the only thing telling them the panel answered their
+    // click, which is the failure mode that asked for this in the first place.
+    const wash = keyframes `
+    from { background-color: ${alpha(theme.palette.quaternary.main, 0.15)}; }
+    to { background-color: ${alpha(theme.palette.quaternary.main, 0)}; }
+  `;
+    return {
+        root: {
+            position: 'relative',
+        },
+        wash: {
+            position: 'absolute',
+            inset: 0,
+            pointerEvents: 'none',
+            animation: `${wash} ${WASH_MS}ms ease-out`,
+        },
+    };
+});
+/**
+ * A one-shot tint over a feature-details panel, played when the panel swaps to
+ * a different feature.
+ *
+ * Every feature widget is a singleton the drawer reuses -- one id per widget
+ * type, rendered without a key -- so clicking a second feature remounts
+ * nothing. The drawer keeps its scroll offset with it, and on a dense panel the
+ * content can change entirely below the fold with nothing on screen saying it
+ * did. The cue covers the whole panel rather than its title for that reason:
+ * a title is off-screen for exactly the reader who cannot tell it updated.
+ *
+ * **Mount this outside anything keyed on the feature.** Some widgets key their
+ * body on `uniqueId` to reset per-feature UI state (variants does, for its
+ * sample grid); inside such a key this remounts on every swap and its counter
+ * never leaves zero, so it silently never plays.
+ */
+export default function FeatureWash({ uniqueId, children, }) {
+    const { classes } = useStyles();
+    // Keyed on the feature's identity, not on the feature object: a widget's
+    // formatDetails callbacks re-resolve into a fresh object, and a re-format of
+    // the feature already on screen is not a change the user made.
+    //
+    // `count` doubles as the restart key -- a class alone won't replay an
+    // animation already on the element, which is what clicking between two
+    // features is. Adjusted during render rather than from an effect, so a
+    // StrictMode host's doubled mount can't wash a panel nobody clicked.
+    const [wash, setWash] = useState({ shownFor: uniqueId, count: 0 });
+    if (wash.shownFor !== uniqueId) {
+        setWash({
+            shownFor: uniqueId,
+            // a panel filling for the first time is not an update -- there was
+            // nothing on screen to mistake for the feature that just arrived
+            count: wash.shownFor === undefined ? 0 : wash.count + 1,
+        });
+    }
+    return (_jsxs("div", { className: classes.root, children: [children, wash.count ? (_jsx("span", { className: classes.wash, "data-testid": "feature-details-wash" }, wash.count)) : null] }));
+}

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

@@ -3,4 +3,4 @@ export default function FieldName({ description, name, width, prefix, }: {
     name: string;
     prefix?: string[];
     width?: number;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/esm/BaseFeatureWidget/BaseFeatureDetail/FieldName.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Tooltip } from '@mui/material';
-import { cx, makeStyles } from "../../util/tss-react/index.js";
+import { cx, makeStyles } from '../../util/tss-react/index.js';
 const useStyles = makeStyles()(theme => ({
     fieldDescription: {
         '&:hover': {
@@ -20,5 +20,5 @@ const useStyles = makeStyles()(theme => ({
 export default function FieldName({ description, name, width, prefix = [], }) {
     const { classes } = useStyles();
     const val = [...prefix, name].join('.');
-    return description ? (_jsx(Tooltip, { title: description, placement: "left", children: _jsx("div", { className: cx(classes.fieldDescription, classes.fieldName), children: val }) })) : (_jsx("div", { className: classes.fieldName, style: { width: width }, children: val }));
+    return description ? (_jsx(Tooltip, { title: description, placement: "left", children: _jsx("div", { className: cx(classes.fieldDescription, classes.fieldName), style: { width }, children: val }) })) : (_jsx("div", { className: classes.fieldName, style: { width }, children: val }));
 }

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

@@ -0,0 +1,3 @@
+export default function Formatter({ value }: {
+    value: unknown;
+}): import("react").JSX.Element;

package/esm/BaseFeatureWidget/BaseFeatureDetail/Formatter.js

@@ -0,0 +1,17 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useCopyToClipboard } from '../../ui/useCopyToClipboard.js';
+const TRUNCATE_LENGTH = 100;
+// a 'show more...' toggle used as a formatter on feature details: long values
+// (e.g. a SEQ/CRAM string, or a long read's worth of data in a single div) can
+// slow down the rest of the app, so they are truncated until expanded
+export default function Formatter({ value }) {
+    const [show, setShow] = useState(false);
+    const { copied, copy } = useCopyToClipboard(700);
+    const display = String(value);
+    return display.length > TRUNCATE_LENGTH ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: () => {
+                    void copy(display);
+                }, children: copied ? 'Copied to clipboard' : 'Copy' }), _jsx("button", { type: "button", onClick: () => {
+                    setShow(val => !val);
+                }, children: show ? 'Show less' : 'Show more' }), _jsx("div", { children: show ? display : `${display.slice(0, TRUNCATE_LENGTH)}...` })] })) : (_jsx("div", { children: display }));
+}

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

@@ -1,2 +1,2 @@
 import type { BaseProps } from '../types.tsx';
-export default function Position(props: BaseProps): import("react/jsx-runtime").JSX.Element;
+export default function Position(props: BaseProps): import("react").JSX.Element;

package/esm/BaseFeatureWidget/BaseFeatureDetail/Position.js

@@ -1,14 +1,8 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { assembleLocString } from "../../util/index.js";
+import { assembleLocString } from '../../util/index.js';
+import { getStrandStr } from '../util.js';
 export default function Position(props) {
     const { feature } = props;
-    const strand = feature.strand;
-    const strandMap = {
-        '-1': '-',
-        '0': '',
-        '1': '+',
-    };
-    const str = strandMap[strand] ? `(${strandMap[strand]})` : '';
     const loc = assembleLocString(feature);
-    return _jsx(_Fragment, { children: `${loc} ${str}` });
+    return _jsx(_Fragment, { children: `${loc} ${getStrandStr(feature.strand)}` });
 }

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

@@ -1,8 +1,9 @@
+import type { FeatureFormatter } from '../types.tsx';
 export default function SimpleField({ name, value, description, prefix, width, formatter, }: {
     description?: React.ReactNode;
     name: string;
     value: unknown;
     prefix?: string[];
     width?: number;
-    formatter?: (value: unknown, key: string) => React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element | null;
+    formatter?: FeatureFormatter;
+}): import("react").JSX.Element | null;

package/esm/BaseFeatureWidget/BaseFeatureDetail/SimpleField.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import BasicValue from "./BasicValue.js";
-import FieldName from "./FieldName.js";
-import { makeStyles } from "../../util/tss-react/index.js";
+import { makeStyles } from '../../util/tss-react/index.js';
+import BasicValue from './BasicValue.js';
+import FieldName from './FieldName.js';
 const useStyles = makeStyles()({
     field: {
         display: 'flex',

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

@@ -1,8 +1,9 @@
-export default function UriField({ value, prefix, name, }: {
+export default function UriField({ value, prefix, name, width, }: {
     value: {
         uri: string;
         baseUri?: string;
     };
     name: string;
     prefix: string[];
-}): import("react/jsx-runtime").JSX.Element;
+    width?: number;
+}): import("react").JSX.Element;

package/esm/BaseFeatureWidget/BaseFeatureDetail/UriField.js

@@ -1,22 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import BasicValue from "./BasicValue.js";
-import FieldName from "./FieldName.js";
-import { makeStyles } from "../../util/tss-react/index.js";
-const useStyles = makeStyles()({
-    field: {
-        display: 'flex',
-        flexWrap: 'wrap',
-    },
-});
-export default function UriField({ value, prefix, name, }) {
-    const { classes } = useStyles();
+import { jsx as _jsx } from "react/jsx-runtime";
+import SimpleField from './SimpleField.js';
+export default function UriField({ value, prefix, name, width, }) {
     const { uri, baseUri = '' } = value;
     let href;
     try {
         href = new URL(uri, baseUri).href;
     }
-    catch (e) {
+    catch {
         href = uri;
     }
-    return (_jsxs("div", { className: classes.field, children: [_jsx(FieldName, { prefix: prefix, name: name }), _jsx(BasicValue, { value: href })] }));
+    // width forwarded like any other field's: without it a URI row sized its own
+    // label to content and sat out of the column every row beside it shares
+    return _jsx(SimpleField, { name: name, prefix: prefix, value: href, width: width });
 }

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

@@ -1,7 +1,8 @@
 import type { BaseInputProps } from './types.ts';
-declare const BaseFeatureDetail: ({ model, }: BaseInputProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const BaseFeatureDetail: ({ model, }: BaseInputProps) => import("react").JSX.Element | null;
 export default BaseFeatureDetail;
 export { default as BaseCard } from './BaseCard.tsx';
 export { default as BaseAttributes } from './BaseAttributes.tsx';
 export { default as BaseCoreDetails } from './BaseCoreDetails.tsx';
 export { default as FeatureDetails } from './FeatureDetails.tsx';
+export { default as FeatureWash } from './FeatureWash.tsx';

package/esm/BaseFeatureWidget/BaseFeatureDetail/index.js

@@ -1,24 +1,30 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { observer } from 'mobx-react';
-import FeatureDetails from "./FeatureDetails.js";
-import { isEmpty } from "./util.js";
-import { ErrorMessage } from "../../ui/index.js";
-import { replaceUndefinedWithNull } from "../util.js";
+import { ErrorBanner } from '../../ui/index.js';
+import FeatureDetails from './FeatureDetails.js';
+import FeatureWash from './FeatureWash.js';
+import { isEmpty } from './util.js';
 const BaseFeatureDetail = observer(function BaseFeatureDetail({ model, }) {
-    const { error, descriptions, featureData } = model;
+    const { error, featureData } = 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(ErrorMessage, { error: error });
+        return _jsx(ErrorBanner, { error: error });
     }
-    else if (!featureData) {
+    else if (!featureData || isEmpty(featureData)) {
         return null;
     }
     else {
-        const featureData2 = replaceUndefinedWithNull(featureData);
-        return isEmpty(featureData2) ? null : (_jsx(FeatureDetails, { model: model, feature: featureData2, descriptions: descriptions }));
+        return (_jsx(FeatureWash, { uniqueId: featureData.uniqueId, children: _jsx(FeatureDetails, { model: model, feature: featureData, descriptions: descriptions }) }));
     }
 });
 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 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 FeatureWash } from './FeatureWash.js';

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

@@ -1,7 +1,8 @@
-import type { BaseCardProps } from '../types.tsx';
+import type { BaseFeatureWidgetModel } from '../stateModelFactory.ts';
+import type { BaseCardProps, Descriptors, FeatureFormatter } from '../types.tsx';
 export interface BaseInputProps extends BaseCardProps {
     omit?: string[];
-    model: any;
-    descriptions?: Record<string, React.ReactNode>;
-    formatter?: (val: unknown, key: string) => React.ReactNode;
+    model: BaseFeatureWidgetModel;
+    descriptions?: Descriptors;
+    formatter?: FeatureFormatter;
 }

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

@@ -1,4 +1,11 @@
 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 generateMaxWidth(array: unknown[][], prefix: string[]): number;
 export declare function accessNested(arr: string[], obj?: Record<string, unknown>): string | undefined;

package/esm/BaseFeatureWidget/BaseFeatureDetail/util.js

@@ -1,22 +1,44 @@
-import { isObject, max, measureText } from "../../util/index.js";
-import { ellipses } from "../util.js";
+import { 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) {
-    return [ellipses(`${name || id || ''}`), `${type}`]
-        .filter(f => !!f)
+    const label = name || id;
+    return [label ? ellipses(`${label}`) : '', type ? `${type}` : '']
+        .filter(Boolean)
         .join(' - ');
 }
-export function generateMaxWidth(array, prefix) {
-    return (Math.ceil(max(array.map(key => measureText([...prefix, key[0]].join('.'), 12)))) + 10);
-}
+// 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.
 export function accessNested(arr, obj = {}) {
     let obj2 = obj;
     for (const elt of arr) {
-        if (isObject(obj2)) {
-            obj2 = obj2[elt];
-        }
+        obj2 = isObject(obj2) ? obj2[elt] : undefined;
     }
     return typeof obj2 === 'string'
         ? obj2

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

@@ -0,0 +1,18 @@
+import type { RpcStatus, SimpleFeatureSerialized } from '../../util/index.ts';
+import type { ErrorState, SeqState } from '../util.tsx';
+import type { SequenceDisplayMode, SequenceFeatureDetailsModel, SequenceHoverTarget } from './model.ts';
+import type { RefObject } from 'react';
+export default function SequenceBody({ error, sequence, status, feature, seqPanelRef, model, mode, revcomp, assemblyGeneticCodeId, assemblyName, hoverTarget, onForceLoad, }: {
+    error: unknown;
+    sequence: SeqState | ErrorState | undefined;
+    status?: RpcStatus;
+    feature: SimpleFeatureSerialized;
+    seqPanelRef: RefObject<HTMLDivElement | null>;
+    model: SequenceFeatureDetailsModel;
+    mode: SequenceDisplayMode;
+    revcomp: boolean;
+    assemblyGeneticCodeId?: number;
+    assemblyName?: string;
+    hoverTarget?: SequenceHoverTarget;
+    onForceLoad: () => void;
+}): import("react").JSX.Element;

package/esm/BaseFeatureWidget/SequenceFeatureDetails/SequenceBody.js

@@ -0,0 +1,10 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Typography } from '@mui/material';
+import { ErrorBanner, LoadingEllipses } from '../../ui/index.js';
+import { statusProgressLabel } from '../../util/progress.js';
+import SequencePanel from './SequencePanel.js';
+export default function SequenceBody({ error, sequence, status, feature, seqPanelRef, model, mode, revcomp, assemblyGeneticCodeId, assemblyName, hoverTarget, onForceLoad, }) {
+    return (_jsx("div", { children: error ? (_jsx(ErrorBanner, { error: error })) : !sequence ? (_jsx(LoadingEllipses, { message: statusProgressLabel(status) })) : 'error' in sequence ? (_jsxs(_Fragment, { children: [_jsx(Typography, { color: "error", children: sequence.error }), _jsx(Button, { onClick: () => {
+                        onForceLoad();
+                    }, children: "Force load" })] })) : (_jsx(SequencePanel, { ref: seqPanelRef, feature: feature, sequence: sequence, model: model, mode: mode, revcomp: revcomp, assemblyGeneticCodeId: assemblyGeneticCodeId, assemblyName: assemblyName, hoverTarget: hoverTarget })) }));
+}

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

@@ -1,10 +1,13 @@
-import type { SequenceFeatureDetailsModel } from './model.ts';
 import type { SimpleFeatureSerialized } from '../../util/index.ts';
 import type { SeqState } from '../util.tsx';
-declare const SequenceContents: ({ mode, feature, sequence, model, }: {
-    mode: string;
+import type { SequenceDisplayMode, SequenceFeatureDetailsModel } from './model.ts';
+declare const SequenceContents: ({ mode, feature, sequence, model, assemblyGeneticCodeId, revcomp, onHoverBase, }: {
+    mode: SequenceDisplayMode;
     feature: SimpleFeatureSerialized;
     sequence: SeqState;
     model: SequenceFeatureDetailsModel;
-}) => import("react/jsx-runtime").JSX.Element | null;
+    assemblyGeneticCodeId?: number;
+    revcomp: boolean;
+    onHoverBase?: (base0: number) => void;
+}) => import("react").JSX.Element;
 export default SequenceContents;

package/esm/BaseFeatureWidget/SequenceFeatureDetails/SequenceContents.js

@@ -1,41 +1,79 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { observer } from 'mobx-react';
-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 { useSequenceData } from "./useSequenceData.js";
-import { defaultCodonTable, generateCodonTable } from "../../util/index.js";
-function RenderedSequenceComponent({ mode, feature, model, sequenceData, }) {
-    const { seq, upstream, downstream, cds, exons, utr } = sequenceData;
+import { getGeneticCode, parseTranslTable, relativizeTranslExcept, } from '../../util/geneticCodes.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
+// untouched, so as a plain component this kept rendering the old coordinates
+// while the menu radio said otherwise.
+const SequenceContents = observer(function SequenceContents({ mode, feature, sequence, model, assemblyGeneticCodeId, revcomp, onHoverBase, }) {
+    // revcomp is offered for the genomic types only, so a toggle left on in one
+    // of those can't flip a spliced readout when the user switches type
+    const rc = revcomp && modeSupportsRevcomp(mode);
+    const { seq, upstream, downstream, cds, exons } = getSequenceData({
+        feature,
+        sequence,
+        revcomp: rc,
+    });
+    const withUpDown = modeHasUpDownstream(mode);
+    const useGenomicCoords = resolveShowCoordinates(model.showCoordinatesSetting, mode) === 'genomic';
     switch (mode) {
         case 'genomic':
-            return _jsx(GenomicSequence, { feature: feature, model: model, sequence: seq });
         case 'genomic_sequence_updownstream':
-            return (_jsx(GenomicSequence, { model: model, feature: feature, sequence: seq, upstream: upstream, downstream: downstream }));
+            return (_jsx(GenomicSequence, { model: model, feature: feature, sequence: seq, upstream: withUpDown ? upstream : undefined, downstream: withUpDown ? downstream : undefined, useGenomicCoords: useGenomicCoords, revcomp: rc, onHoverBase: onHoverBase }));
         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 }));
+        }
+        // cdna and the gene_* variants all render the spliced transcript; introns
+        // and up/downstream flanks are toggled by the mode name
         case 'cdna':
-            return (_jsx(CDNASequence, { model: model, exons: exons, feature: feature, cds: cds, utr: utr, sequence: seq }));
-        case 'protein':
-            return (_jsx(ProteinSequence, { model: model, cds: cds, codonTable: generateCodonTable(defaultCodonTable), sequence: seq }));
         case 'gene':
-            return (_jsx(CDNASequence, { model: model, exons: exons, feature: feature, cds: cds, utr: utr, sequence: seq, includeIntrons: true }));
         case 'gene_collapsed_intron':
-            return (_jsx(CDNASequence, { model: model, exons: exons, feature: feature, cds: cds, sequence: seq, utr: utr, includeIntrons: true, collapseIntron: true }));
         case 'gene_updownstream':
-            return (_jsx(CDNASequence, { model: model, exons: exons, feature: feature, cds: cds, sequence: seq, utr: utr, upstream: upstream, downstream: downstream, includeIntrons: true }));
         case 'gene_updownstream_collapsed_intron':
-            return (_jsx(CDNASequence, { model: model, exons: exons, feature: feature, cds: cds, sequence: seq, utr: utr, upstream: upstream, downstream: downstream, includeIntrons: true, collapseIntron: true }));
+            return (_jsx(CDNASequence, { model: model, exons: exons, feature: feature, cds: cds, sequence: seq, upstream: withUpDown ? upstream : undefined, downstream: withUpDown ? downstream : undefined, includeIntrons: mode.startsWith('gene'), collapseIntron: mode.includes('collapsed_intron'), useGenomicCoords: useGenomicCoords, revcomp: rc, onHoverBase: onHoverBase }));
         default:
             return _jsx("div", { children: "Unknown type" });
     }
-}
-const SequenceContents = observer(function SequenceContents({ mode, feature, sequence, model, }) {
-    const sequenceData = useSequenceData({
-        feature,
-        sequence,
-    });
-    return sequenceData ? (_jsx(RenderedSequenceComponent, { mode: mode, feature: feature, model: model, sequenceData: sequenceData })) : null;
 });
 export default SequenceContents;