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

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

@@ -1,4 +1,4 @@
-import type { FeatureFormatter } from '../types.tsx';
+import type { FeatureFormatter, FieldActions } from '../types.tsx';
 /**
  * An array of objects renders each element as its own `Attributes` block and
  * draws no label row at this level; anything else is one labelled row like any
@@ -7,11 +7,12 @@ import type { FeatureFormatter } from '../types.tsx';
  * to make the same call.
  */
 export declare function isObjectArray(value: unknown[]): value is Record<string, unknown>[];
-export default function ArrayValue({ name, value, description, formatter, prefix, width, }: {
+export default function ArrayValue({ name, value, description, formatter, fieldActions, prefix, width, }: {
     description?: React.ReactNode;
     name: string;
     value: unknown[];
     formatter?: FeatureFormatter;
+    fieldActions?: FieldActions;
     prefix?: string[];
     width?: number;
 }): import("react").JSX.Element;

package/esm/BaseFeatureWidget/BaseFeatureDetail/ArrayValue.js

@@ -4,6 +4,7 @@ import { isObject } from '../../util/index.js';
 import { makeStyles } from '../../util/tss-react/index.js';
 import Attributes from './Attributes.js';
 import BasicValue from './BasicValue.js';
+import FieldActionsButton, { useRevealFieldActions, } from './FieldActionsButton.js';
 import FieldName from './FieldName.js';
 const MAX_ARRAY_LENGTH = 100;
 // Numeric arrays (e.g. base-modification probabilities, per-base scores) are
@@ -17,11 +18,9 @@ const useStyles = makeStyles()(theme => ({
     },
     fieldSubvalue: {
         wordBreak: 'break-word',
-        maxHeight: 300,
         padding: theme.spacing(0.5),
         border: `1px solid ${theme.palette.action.selected}`,
         boxSizing: 'border-box',
-        overflow: 'auto',
     },
 }));
 /**
@@ -34,8 +33,9 @@ const useStyles = makeStyles()(theme => ({
 export function isObjectArray(value) {
     return value.every(isObject);
 }
-export default function ArrayValue({ name, value, description, formatter, prefix = [], width, }) {
-    const { classes } = useStyles();
+export default function ArrayValue({ name, value, description, formatter, fieldActions, prefix = [], width, }) {
+    const { classes, cx } = useStyles();
+    const reveal = useRevealFieldActions();
     const [showAll, setShowAll] = useState(false);
     const limit = value.every(v => typeof v === 'number')
         ? MAX_NUMERIC_ARRAY_LENGTH
@@ -44,7 +44,7 @@ export default function ArrayValue({ name, value, description, formatter, prefix
     const displayedValues = needsTruncation && !showAll ? value.slice(0, limit) : value;
     return isObjectArray(value) ? (value.length === 1 ? (_jsx(Attributes, { formatter: formatter, attributes: value[0], prefix: [...prefix, name] })) : (_jsx(_Fragment, { children: value.map((val, i) => (_jsx(Attributes
         // eslint-disable-next-line @eslint-react/no-array-index-key -- static positional list of attribute objects, no unique field available
-        , { formatter: formatter, attributes: val, prefix: [...prefix, `${name}-${i}`] }, i))) }))) : (_jsxs("div", { className: classes.field, children: [_jsx(FieldName, { prefix: prefix, description: description, name: name, width: width }), value.length === 1 ? (_jsx(BasicValue, { value: formatter ? formatter(value[0], name, 0) : value[0] })) : (_jsxs(_Fragment, { children: [displayedValues.map((val, i) => (_jsx("div", { className: classes.fieldSubvalue, children: _jsx(BasicValue, { value: formatter ? formatter(val, name, i) : val }) }, `${String(val)}-${i}`))), needsTruncation ? (_jsx("button", { type: "button", onClick: () => {
+        , { formatter: formatter, attributes: val, prefix: [...prefix, `${name}-${i}`] }, i))) }))) : (_jsxs("div", { className: cx(classes.field, reveal), children: [_jsx(FieldName, { prefix: prefix, description: description, name: name, width: width }), value.length === 1 ? (_jsxs(_Fragment, { children: [_jsx(BasicValue, { value: formatter ? formatter(value[0], name, 0) : value[0] }), _jsx(FieldActionsButton, { path: [...prefix, name], value: value[0], fieldActions: fieldActions })] })) : (_jsxs(_Fragment, { children: [displayedValues.map((val, i) => (_jsx("div", { className: classes.fieldSubvalue, children: _jsx(BasicValue, { value: formatter ? formatter(val, name, i) : val }) }, `${String(val)}-${i}`))), needsTruncation ? (_jsx("button", { type: "button", onClick: () => {
                             setShowAll(v => !v);
                         }, children: showAll
                             ? 'Show less'

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

@@ -1,12 +1,10 @@
-import type { Descriptors, FeatureFormatter } from '../types.tsx';
+import type { Descriptors, FeatureFormatter, FieldActions } from '../types.tsx';
 export default function Attributes(props: {
-    attributes: {
-        [key: string]: unknown;
-        __jbrowsefmt?: Record<string, unknown>;
-    };
+    attributes: Record<string, unknown>;
     omit?: string[];
     omitSingleLevel?: string[];
     formatter?: FeatureFormatter;
+    fieldActions?: FieldActions;
     descriptions?: Descriptors;
     prefix?: string[];
     hideUris?: boolean;

package/esm/BaseFeatureWidget/BaseFeatureDetail/Attributes.js

@@ -3,8 +3,8 @@ import { Suspense, lazy } from 'react';
 import { isLocalPathLocation, isObject, isUriLocation, measureText, } from '../../util/index.js';
 import ArrayValue, { isObjectArray } from './ArrayValue.js';
 import SimpleField from './SimpleField.js';
-import UriAttribute from './UriField.js';
-import { accessNested, applyFeatureFormatting } from './util.js';
+import UriField from './UriField.js';
+import { accessNested } from './util.js';
 // Lazy: reaches @mui/x-data-grid, and this module sits on the eager startup
 // path via product-core's ui barrel (AboutDialog -> AboutDialogContents).
 // Only a homogeneous object array actually renders a grid.
@@ -27,7 +27,6 @@ function isHomogeneousObjectArray(arr) {
 }
 // these are always omitted as too detailed
 const globalOmit = [
-    '__jbrowsefmt',
     'length',
     'position',
     'subfeatures',
@@ -47,22 +46,38 @@ const globalOmit = [
     'cdsStartStat',
     'cdsEndStat',
 ];
+function isLocation(value) {
+    return isUriLocation(value) || isLocalPathLocation(value);
+}
+// hideUris prunes the data rather than each render branch checking: an array
+// of objects reaches the data grid and ArrayValue, which print locations too
+function withoutLocations(attributes) {
+    return Object.fromEntries(Object.entries(attributes)
+        .filter(([, value]) => !isLocation(value))
+        .map(([key, value]) => [key, valueWithoutLocations(value)]));
+}
+function valueWithoutLocations(value) {
+    return Array.isArray(value)
+        ? value.filter(v => !isLocation(v)).map(valueWithoutLocations)
+        : isObject(value)
+            ? withoutLocations(value)
+            : value;
+}
 /**
  * The widest label `Attributes` will actually render under `attributes`, in
  * text units — the padding is added once by `widestLabel`, not per level.
  *
  * Follows the same branches the render below does: a flat array is one labelled
- * row (`rendersOwnFieldRow`), an array of objects renders each element as its
- * own block with no label at this level, a data grid heads its own grid rather
- * than sharing a row, a `UriLocation` is one field, any other object recurses.
- * Kept next to the render for that reason — the two agree by being read
- * together, and `Attributes.test.tsx` fails if they stop.
+ * row, an array of objects renders each element as its own block with no label
+ * at this level, a data grid heads its own grid rather than sharing a row, a
+ * `UriLocation` is one field, any other object recurses. `Attributes.test.tsx`
+ * fails if the two stop agreeing.
  */
 function measureLabels(attributes, opts) {
-    const { omits, deepOmits, hideUris, prefix } = opts;
+    const { omits, deepOmits, prefix } = opts;
     let widest = 0;
     const measure = (key) => measureText([...prefix, key].join('.'), FIELD_NAME_FONT_SIZE);
-    for (const [key, value] of Object.entries(applyFeatureFormatting(attributes))) {
+    for (const [key, value] of Object.entries(attributes)) {
         if (value == null || omits.has(key)) {
             continue;
         }
@@ -74,15 +89,11 @@ function measureLabels(attributes, opts) {
             }
         }
         else if (isObject(value)) {
-            if (hideUris && (isUriLocation(value) || isLocalPathLocation(value))) {
-                continue;
-            }
             widest = Math.max(widest, isUriLocation(value)
                 ? measure(key)
                 : measureLabels(value, {
                     omits: deepOmits,
                     deepOmits,
-                    hideUris,
                     prefix: [...prefix, key],
                 }));
         }
@@ -96,9 +107,12 @@ function widestLabel(attributes, opts) {
     return Math.ceil(measureLabels(attributes, opts)) + FIELD_NAME_PADDING;
 }
 export default function Attributes(props) {
-    const { attributes, omit = [], omitSingleLevel = [], descriptions, formatter, hideUris, prefix = [], labelWidth, } = props;
+    const { omit = [], omitSingleLevel = [], descriptions, formatter, fieldActions, hideUris, prefix = [], labelWidth, } = props;
+    const attributes = hideUris
+        ? withoutLocations(props.attributes)
+        : props.attributes;
     const omits = new Set([...omit, ...globalOmit, ...omitSingleLevel]);
-    const filteredFormattedAttributes = Object.entries(applyFeatureFormatting(attributes)).filter(([k, v]) => v != null && !omits.has(k));
+    const shown = Object.entries(attributes).filter(([k, v]) => v != null && !omits.has(k));
     // Measured over the whole subtree on the outermost call, then handed down, so
     // one card has one label column. Per-level measurement put `type`/`trackId` in
     // a narrow column, `adapter.type` in a wider one and `adapter.craiLocation` in
@@ -112,30 +126,21 @@ export default function Attributes(props) {
             deepOmits: omitSingleLevel.length
                 ? new Set([...omit, ...globalOmit])
                 : omits,
-            hideUris,
             prefix,
         }), MAX_FIELD_NAME_WIDTH);
-    return (_jsx(_Fragment, { children: filteredFormattedAttributes.map(([key, value]) => {
+    return (_jsx(_Fragment, { children: shown.map(([key, value]) => {
             const description = accessNested([...prefix, key], descriptions);
             if (Array.isArray(value)) {
                 // Only use the data grid when schemas are homogeneous enough;
                 // heterogeneous arrays fall through to ArrayValue which renders
                 // each object as individual field sections instead of disappearing
-                return isHomogeneousObjectArray(value) ? (_jsx(Suspense, { fallback: null, children: _jsx(DataGridDetails, { name: key, prefix: prefix, value: value }) }, key)) : (_jsx(ArrayValue, { name: key, value: value, formatter: formatter, description: description, prefix: prefix, width: width }, key));
+                return isHomogeneousObjectArray(value) ? (_jsx(Suspense, { fallback: null, children: _jsx(DataGridDetails, { name: key, prefix: prefix, value: value }) }, key)) : (_jsx(ArrayValue, { name: key, value: value, formatter: formatter, fieldActions: fieldActions, description: description, prefix: prefix, width: width }, key));
             }
             else if (isObject(value)) {
-                // hideUris means "don't show where the data sits". A LocalPathLocation
-                // says that as plainly as a UriLocation does — it is what desktop and
-                // `jbrowse add-track --load copy` write — and it used to fall through
-                // to the recursive branch below and print the path in full
-                if (hideUris &&
-                    (isUriLocation(value) || isLocalPathLocation(value))) {
-                    return null;
-                }
-                return isUriLocation(value) ? (_jsx(UriAttribute, { name: key, prefix: prefix, value: value, width: width }, key)) : (_jsx(Attributes, { attributes: value, omit: omit, descriptions: descriptions, formatter: formatter, hideUris: hideUris, prefix: [...prefix, key], labelWidth: width }, key));
+                return isUriLocation(value) ? (_jsx(UriField, { name: key, prefix: prefix, value: value, width: width }, key)) : (_jsx(Attributes, { attributes: value, omit: omit, descriptions: descriptions, formatter: formatter, fieldActions: fieldActions, prefix: [...prefix, key], labelWidth: width }, key));
             }
             else {
-                return (_jsx(SimpleField, { name: key, formatter: formatter, value: value, description: description, prefix: prefix, width: width }, key));
+                return (_jsx(SimpleField, { name: key, formatter: formatter, fieldActions: fieldActions, value: value, description: description, prefix: prefix, width: width }, key));
             }
         }) }));
 }

package/esm/BaseFeatureWidget/BaseFeatureDetail/BaseCard.js

@@ -7,11 +7,8 @@ const useStyles = makeStyles()(theme => ({
         display: 'block',
         padding: theme.spacing(1),
     },
-    icon: {
-        color: theme.palette.tertiary.contrastText || '#fff',
-    },
 }));
 export default function BaseCard({ children, title, defaultExpanded = true, }) {
     const { classes } = useStyles();
-    return (_jsxs(Accordion, { defaultExpanded: defaultExpanded, slotProps: { transition: { unmountOnExit: true } }, "data-testid": `BaseCard-${title}`, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ExpandMore, { className: classes.icon }), children: _jsx(Typography, { variant: "button", children: title }) }), _jsx(AccordionDetails, { className: classes.expansionPanelDetails, children: children })] }));
+    return (_jsxs(Accordion, { defaultExpanded: defaultExpanded, slotProps: { transition: { unmountOnExit: true } }, "data-testid": `BaseCard-${title}`, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ExpandMore, {}), children: _jsx(Typography, { variant: "button", children: title }) }), _jsx(AccordionDetails, { className: classes.expansionPanelDetails, children: children })] }));
 }

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

@@ -1,3 +1,14 @@
+export declare function isBareUrl(text: string): boolean;
+export declare function valueText(value: unknown): string;
+/**
+ * A value that is nothing but a URL is a link; anything else goes through
+ * SanitizedHTML, which renders markup and links URLs inside longer text. Both
+ * open in a new tab: navigating in place discards the session, and in an
+ * embedded JBrowse it takes the host page with it.
+ */
+export declare function ValueText({ text }: {
+    text: string;
+}): import("react").JSX.Element;
 export default function BasicValue({ value }: {
     value: unknown;
 }): import("react").JSX.Element;

package/esm/BaseFeatureWidget/BaseFeatureDetail/BasicValue.js

@@ -1,27 +1,50 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { isValidElement } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isValidElement, useState } from 'react';
 import { Link } from '@mui/material';
 import { SanitizedHTML } from '../../ui/index.js';
 import { isObject } from '../../util/index.js';
 import { makeStyles } from '../../util/tss-react/index.js';
+import useMeasure from '../../util/useMeasure.js';
+const CLAMP_HEIGHT = 300;
 const useStyles = makeStyles()(theme => ({
     fieldValue: {
         wordBreak: 'break-word',
-        maxHeight: 300,
         fontSize: 12,
         padding: theme.spacing(0.5),
-        overflow: 'auto',
+        minWidth: 0,
+    },
+    clip: {
+        overflowX: 'auto',
+        overflowY: 'hidden',
+    },
+    clamped: {
+        maxHeight: CLAMP_HEIGHT,
+    },
+    faded: {
+        maskImage: 'linear-gradient(to bottom, black 75%, transparent)',
     },
 }));
+export function isBareUrl(text) {
+    return /^https?:\/\/\S+$/.test(text);
+}
+export function valueText(value) {
+    return isObject(value) ? JSON.stringify(value) : String(value);
+}
+/**
+ * A value that is nothing but a URL is a link; anything else goes through
+ * SanitizedHTML, which renders markup and links URLs inside longer text. Both
+ * open in a new tab: navigating in place discards the session, and in an
+ * embedded JBrowse it takes the host page with it.
+ */
+export function ValueText({ text }) {
+    return isBareUrl(text) ? (_jsx(Link, { href: text, target: "_blank", rel: "noopener noreferrer", children: text })) : (_jsx(SanitizedHTML, { html: text }));
+}
 export default function BasicValue({ value }) {
-    const { classes } = useStyles();
-    // a value that is nothing but a URL is a link, whether it came from the file
-    // or from a formatDetails callback -- the same courtesy `linkify` does for a
-    // URL sitting inside a longer string, one layer down in SanitizedHTML.
-    //
-    // New tab, matching `rewriteExternalAnchors` on that other path. Navigating
-    // in place discards the session, and in an embedded JBrowse it takes the host
-    // page with it.
-    const isLink = /^https?:\/\//.test(`${value}`);
-    return (_jsx("div", { className: classes.fieldValue, children: isValidElement(value) ? (value) : isLink ? (_jsx(Link, { href: `${value}`, target: "_blank", rel: "noopener noreferrer", children: `${value}` })) : (_jsx(SanitizedHTML, { html: isObject(value) ? JSON.stringify(value) : String(value) })) }));
+    const { classes, cx } = useStyles();
+    const [expanded, setExpanded] = useState(false);
+    const [ref, { height }] = useMeasure('height');
+    const overflows = height !== undefined && height > CLAMP_HEIGHT;
+    return (_jsxs("div", { className: classes.fieldValue, children: [_jsx("div", { className: cx(classes.clip, !expanded && classes.clamped, !expanded && overflows && classes.faded), children: _jsx("div", { ref: ref, children: isValidElement(value) ? (value) : (_jsx(ValueText, { text: valueText(value) })) }) }), overflows ? (_jsx(Link, { component: "button", variant: "caption", onClick: () => {
+                    setExpanded(v => !v);
+                }, children: expanded ? 'Show less' : 'Show more' })) : null] }));
 }

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

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

package/esm/BaseFeatureWidget/BaseFeatureDetail/CoreDetails.js

@@ -1,35 +1,19 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { toLocale } from '../../util/index.js';
-import Position from './Position.js';
+import { assembleLocString, toLocale } from '../../util/index.js';
+import { getStrandStr } from '../util.js';
 import SimpleField from './SimpleField.js';
-import { applyFeatureFormatting, isFormattedField } from './util.js';
-export default function CoreDetails(props) {
-    const { feature } = props;
-    const formattedFeat = applyFeatureFormatting(feature);
-    const { start, end } = formattedFeat;
-    const displayedDetails = {
-        ...formattedFeat,
-        // Length is derived, so it is computed rather than read off the feature --
-        // but a formatDetails callback that names `length` still wins (and
-        // `length: null` hides the row), like every other core field. The raw
-        // feature's own `length`, if any, stays ignored: it is in Attributes'
-        // globalOmit precisely because adapters use it as bookkeeping.
-        length: isFormattedField(feature, 'length')
-            ? formattedFeat.length
-            : toLocale(end - start),
-    };
-    // array (not object) so the display order is explicit, not reliant on JS key
-    // insertion order
-    const coreRenderedDetails = [
-        ['name', 'Name'],
-        ['description', 'Description'],
-        ['length', 'Length'],
-        ['type', 'Type'],
+export default function CoreDetails({ feature }) {
+    const { name, description, type, start, end, strand } = feature;
+    // only a formatDetails callback sets `length`, to rewrite or hide the row:
+    // an adapter's own field of that name is in Attributes' globalOmit
+    const length = 'length' in feature ? feature.length : end - start;
+    const rows = [
+        ['Name', name],
+        ['Description', description],
+        ['Length', typeof length === 'number' ? toLocale(length) : length],
+        ['Type', type],
     ];
-    return (_jsxs(_Fragment, { children: [_jsx(SimpleField, { name: "Position", value: _jsx(Position, { ...props, feature: formattedFeat }) }), coreRenderedDetails
-                .filter(([key]) => displayedDetails[key] != null)
-                .map(([key, name]) => {
-                const value = displayedDetails[key];
-                return (_jsx(SimpleField, { name: name, value: Array.isArray(value) ? value.join(', ') : value }, name));
-            })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(SimpleField, { name: "Position", value: [assembleLocString(feature), getStrandStr(strand)]
+                    .filter(Boolean)
+                    .join(' ') }), rows.map(([label, value]) => (_jsx(SimpleField, { name: label, value: Array.isArray(value) ? value.join(', ') : value }, label)))] }));
 }

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

@@ -1,13 +1,14 @@
 import type { SimpleFeatureSerialized } from '../../util/index.ts';
-import type { Descriptors, FeatureFormatter } from '../types.tsx';
-import type { IAnyStateTreeNode } from '@jbrowse/mobx-state-tree';
+import type { Descriptors, FeatureDetailsModel, FeatureFormatter, FieldActions } from '../types.tsx';
 interface FeatureDetailsProps {
-    model: IAnyStateTreeNode;
+    model: FeatureDetailsModel;
     feature: SimpleFeatureSerialized;
+    unformatted?: SimpleFeatureSerialized;
     depth?: number;
     omit?: string[];
     descriptions?: Descriptors;
     formatter?: FeatureFormatter;
+    fieldActions?: FieldActions;
 }
 declare const FeatureDetails: (props: FeatureDetailsProps) => import("react").JSX.Element;
 export default FeatureDetails;

package/esm/BaseFeatureWidget/BaseFeatureDetail/FeatureDetails.js

@@ -1,5 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment } from 'react';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Divider, Typography } from '@mui/material';
 import { observer } from 'mobx-react';
 import { ErrorBoundary } from '../../ui/ErrorBoundary.js';
@@ -14,12 +13,7 @@ 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 = [
+const shownByCoreDetails = [
     'name',
     'start',
     'end',
@@ -29,30 +23,23 @@ const coreDetails = [
     'type',
 ];
 const FeatureDetails = observer(function FeatureDetails(props) {
-    const { omit = [], model, feature, depth = 0, descriptions, formatter, } = props;
+    const { omit = [], model, feature, unformatted = feature, depth = 0, descriptions, formatter, fieldActions, } = 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 { mate, name = '', id = '', type = '', subfeatures, uniqueId } = feature;
+    // a panel selecting on `depth === 0` has to see the default, not undefined
     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, 
+    return (_jsxs(BaseCard, { title: generateTitle(name, id, type), children: [_jsx(SectionHeader, { title: "Core details" }), _jsx(CoreDetails, { ...props }), mate ? (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(SectionHeader, { title: "Mate details" }), _jsx(CoreDetails, { ...props, feature: { ...mate, uniqueId: `${uniqueId}-mate` } }), _jsx(Attributes, { attributes: mate, prefix: ['mate'], omit: omit, omitSingleLevel: shownByCoreDetails, descriptions: descriptions, formatter: formatter, fieldActions: fieldActions })] })) : null, _jsx(Divider, {}), _jsx(SectionHeader, { title: "Attributes" }), _jsx(Attributes, { attributes: feature, omit: omit, omitSingleLevel: [...shownByCoreDetails, 'mate'], descriptions: descriptions, formatter: formatter, fieldActions: fieldActions }), _jsx(ErrorBoundary, { FallbackComponent: e => _jsx(ErrorBanner, { error: e.error }), children: _jsx(SequenceFeatureDetails, { ...props, feature: unformatted }) }), _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, 
-                    // 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] }));
+                    }, unformatted: unformatted.subfeatures?.[idx]
+                        ? {
+                            ...unformatted.subfeatures[idx],
+                            uniqueId: `${uniqueId}_${idx}`,
+                        }
+                        : undefined, model: model, depth: depth + 1, descriptions: descriptions, formatter: formatter, fieldActions: fieldActions, omit: omit }, `${uniqueId}_${idx}`))) })) : null] }));
 });
 export default FeatureDetails;

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

@@ -0,0 +1,11 @@
+import type { SimpleFeatureSerialized } from '../../util/index.ts';
+import type React from 'react';
+export interface FeatureDetailsFrameModel {
+    error?: unknown;
+    featureData?: SimpleFeatureSerialized;
+}
+declare const FeatureDetailsFrame: ({ model, children, }: {
+    model: FeatureDetailsFrameModel;
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export default FeatureDetailsFrame;

package/esm/BaseFeatureWidget/BaseFeatureDetail/FeatureDetailsFrame.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Paper, Typography } from '@mui/material';
+import { observer } from 'mobx-react';
+import { ErrorBanner } from '../../ui/index.js';
+import FeatureWash from './FeatureWash.js';
+import { isEmpty } from './util.js';
+const FeatureDetailsFrame = observer(function FeatureDetailsFrame({ model, children, }) {
+    const { error, featureData } = model;
+    return error ? (_jsx(ErrorBanner, { error: error })) : !featureData || isEmpty(featureData) ? (_jsx(Paper, { sx: { p: 2 }, children: _jsx(Typography, { children: "No feature loaded. It may not be available after a page refresh because it was too large to persist in localStorage." }) })) : (_jsx(FeatureWash, { uniqueId: featureData.uniqueId, children: children }));
+});
+export default FeatureDetailsFrame;

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

@@ -0,0 +1,8 @@
+import type { FieldActions } from '../types.tsx';
+/** A class for a field row that shows its FieldActionsButton on hover or focus. */
+export declare function useRevealFieldActions(): string;
+export default function FieldActionsButton({ path, value, fieldActions, }: {
+    path: string[];
+    value: unknown;
+    fieldActions?: FieldActions;
+}): import("react").JSX.Element | null;

package/esm/BaseFeatureWidget/BaseFeatureDetail/FieldActionsButton.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import FilterListIcon from '@mui/icons-material/FilterList';
+import CascadingMenuButton from '../../ui/CascadingMenuButton.js';
+import { makeStyles } from '../../util/tss-react/index.js';
+// on a wrapper because MUI folds an Emotion class handed to one of its
+// components into a class of its own, which a selector naming it never matches
+const useStyles = makeStyles()({
+    reveal: {
+        opacity: 0,
+    },
+});
+/** A class for a field row that shows its FieldActionsButton on hover or focus. */
+export function useRevealFieldActions() {
+    const { classes, css } = useStyles();
+    const { reveal } = classes;
+    return css({
+        [`&:hover .${reveal}, &:focus-within .${reveal}`]: { opacity: 1 },
+    });
+}
+export default function FieldActionsButton({ path, value, fieldActions, }) {
+    const { classes } = useStyles();
+    const items = fieldActions?.(path, value) ?? [];
+    return items.length > 0 ? (_jsx("span", { className: classes.reveal, children: _jsx(CascadingMenuButton, { menuItems: items, size: "small", tooltip: "Filter by this value", style: { padding: 0 }, children: _jsx(FilterListIcon, { fontSize: "small" }) }) })) : null;
+}

package/esm/BaseFeatureWidget/BaseFeatureDetail/Formatter.js

@@ -1,17 +1,19 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { useCopyToClipboard } from '../../ui/useCopyToClipboard.js';
+import { ValueText, isBareUrl, valueText } from './BasicValue.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
+// slow down the rest of the app, so they are truncated until expanded. A URL
+// is left whole, since a truncated one links nowhere
 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: () => {
+    const display = valueText(value);
+    return display.length > TRUNCATE_LENGTH && !isBareUrl(display) ? (_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 }));
+                }, children: show ? 'Show less' : 'Show more' }), _jsx("div", { children: show ? (_jsx(ValueText, { text: display })) : (`${display.slice(0, TRUNCATE_LENGTH)}...`) })] })) : (_jsx(ValueText, { text: display }));
 }

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

@@ -0,0 +1,4 @@
+import type { ParentFeatureSummary } from '../../util/index.ts';
+export default function ParentFeatureLine({ parentFeature, }: {
+    parentFeature: ParentFeatureSummary;
+}): import("react").JSX.Element;

package/esm/BaseFeatureWidget/BaseFeatureDetail/ParentFeatureLine.js

@@ -0,0 +1,17 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography } from '@mui/material';
+import { makeStyles } from '../../util/tss-react/index.js';
+const useStyles = makeStyles()(theme => ({
+    line: {
+        padding: theme.spacing(0.5, 1, 0),
+    },
+}));
+// Which gene a transcript came out of, above the card naming the transcript.
+// The panel is opened on the exact isoform the click resolved to, and that
+// isoform's own record is regularly the only place its accession appears --
+// nothing in `NM_004006.2 - mRNA` says DMD.
+export default function ParentFeatureLine({ parentFeature, }) {
+    const { classes } = useStyles();
+    const { name, type } = parentFeature;
+    return (_jsxs(Typography, { variant: "body2", color: "textSecondary", className: classes.line, "data-testid": "parent-feature-line", children: ["in ", type ? `${type} ` : '', name] }));
+}

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

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

package/esm/BaseFeatureWidget/BaseFeatureDetail/SimpleField.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { makeStyles } from '../../util/tss-react/index.js';
 import BasicValue from './BasicValue.js';
+import FieldActionsButton, { useRevealFieldActions, } from './FieldActionsButton.js';
 import FieldName from './FieldName.js';
 const useStyles = makeStyles()({
     field: {
@@ -8,7 +9,8 @@ const useStyles = makeStyles()({
         flexWrap: 'wrap',
     },
 });
-export default function SimpleField({ name, value, description, prefix, width, formatter, }) {
-    const { classes } = useStyles();
-    return value != null ? (_jsxs("div", { className: classes.field, children: [_jsx(FieldName, { prefix: prefix, description: description, name: name, width: width }), _jsx(BasicValue, { value: formatter ? formatter(value, name) : value })] })) : null;
+export default function SimpleField({ name, value, description, prefix, width, formatter, fieldActions, }) {
+    const { classes, cx } = useStyles();
+    const reveal = useRevealFieldActions();
+    return value != null ? (_jsxs("div", { className: cx(classes.field, reveal), children: [_jsx(FieldName, { prefix: prefix, description: description, name: name, width: width }), _jsx(BasicValue, { value: formatter ? formatter(value, name) : value }), _jsx(FieldActionsButton, { path: [...(prefix ?? []), name], value: value, fieldActions: fieldActions })] })) : null;
 }

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

@@ -1,8 +1,12 @@
-import type { BaseInputProps } from './types.ts';
-declare const BaseFeatureDetail: ({ model, }: BaseInputProps) => import("react").JSX.Element | null;
+import type { BaseFeatureWidgetModel } from '../stateModelFactory.ts';
+declare const BaseFeatureDetail: ({ model, }: {
+    model: BaseFeatureWidgetModel;
+}) => import("react").JSX.Element;
 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 FeatureDetailsFrame } from './FeatureDetailsFrame.tsx';
 export { default as FeatureWash } from './FeatureWash.tsx';
+export { filterByValueItems, jexlFilterDisplay } from './jexlFilterActions.ts';