@jbrowse/core 4.3.0 → 5.0.0-beta.10

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

@@ -1,7 +1,18 @@
-export default function ArrayValue({ name, value, description, formatter, prefix, }: {
+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
+ * other field, and so takes its place in the card's shared label column.
+ * Exported because `Attributes` measures that column before rendering and has
+ * to make the same call.
+ */
+export declare function isObjectArray(value: unknown[]): value is Record<string, unknown>[];
+export default function ArrayValue({ name, value, description, formatter, fieldActions, prefix, width, }: {
     description?: React.ReactNode;
     name: string;
     value: unknown[];
-    formatter?: (value: unknown, key: string) => React.ReactNode;
+    formatter?: FeatureFormatter;
+    fieldActions?: FieldActions;
     prefix?: string[];
-}): import("react/jsx-runtime").JSX.Element;
+    width?: number;
+}): import("react").JSX.Element;

package/esm/BaseFeatureWidget/BaseFeatureDetail/ArrayValue.js

@@ -1,11 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import Attributes from "./Attributes.js";
-import BasicValue from "./BasicValue.js";
-import FieldName from "./FieldName.js";
-import { isObject } from "../../util/index.js";
-import { makeStyles } from "../../util/tss-react/index.js";
+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
+// rarely read element-by-element and can be thousands long, so only a handful
+// are shown until expanded
+const MAX_NUMERIC_ARRAY_LENGTH = 5;
 const useStyles = makeStyles()(theme => ({
     field: {
         display: 'flex',
@@ -20,22 +25,30 @@ const useStyles = makeStyles()(theme => ({
         overflow: 'auto',
     },
 }));
-export default function ArrayValue({ name, value, description, formatter, prefix = [], }) {
-    const { classes } = useStyles();
+/**
+ * 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
+ * other field, and so takes its place in the card's shared label column.
+ * Exported because `Attributes` measures that column before rendering and has
+ * to make the same call.
+ */
+export function isObjectArray(value) {
+    return value.every(isObject);
+}
+export default function ArrayValue({ name, value, description, formatter, fieldActions, prefix = [], width, }) {
+    const { classes, cx } = useStyles();
+    const reveal = useRevealFieldActions();
     const [showAll, setShowAll] = useState(false);
-    const needsTruncation = value.length > MAX_ARRAY_LENGTH;
-    const displayedValues = needsTruncation && !showAll ? value.slice(0, MAX_ARRAY_LENGTH) : value;
-    if (value.length === 1) {
-        return isObject(value[0]) ? (_jsx(Attributes, { formatter: formatter, attributes: value[0], prefix: [...prefix, name] })) : (_jsxs("div", { className: classes.field, children: [_jsx(FieldName, { prefix: prefix, description: description, name: name }), _jsx(BasicValue, { value: formatter ? formatter(value[0], name) : value[0] })] }));
-    }
-    else if (value.every(val => isObject(val))) {
-        return (_jsx(_Fragment, { children: value.map((val, i) => (_jsx(Attributes, { formatter: formatter, attributes: val, prefix: [...prefix, `${name}-${i}`] }, `${JSON.stringify(val)}-${i}`))) }));
-    }
-    else {
-        return (_jsxs("div", { className: classes.field, children: [_jsx(FieldName, { prefix: prefix, description: description, name: name }), displayedValues.map((val, i) => (_jsx("div", { className: classes.fieldSubvalue, children: _jsx(BasicValue, { value: formatter ? formatter(val, name) : val }) }, `${JSON.stringify(val)}-${i}`))), needsTruncation ? (_jsx("button", { type: "button", onClick: () => {
-                        setShowAll(val => !val);
-                    }, children: showAll
-                        ? 'Show less'
-                        : `Showing ${MAX_ARRAY_LENGTH} of ${value.length}. Show all...` })) : null] }));
-    }
+    const limit = value.every(v => typeof v === 'number')
+        ? MAX_NUMERIC_ARRAY_LENGTH
+        : MAX_ARRAY_LENGTH;
+    const needsTruncation = value.length > limit;
+    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: 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'
+                            : `Showing ${limit} of ${value.length}. Show all...` })) : null] }))] }));
 }

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

@@ -1,13 +1,16 @@
-import type { Descriptors } 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?: (val: unknown, key: string) => React.ReactNode;
+    formatter?: FeatureFormatter;
+    fieldActions?: FieldActions;
     descriptions?: Descriptors;
     prefix?: string[];
     hideUris?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
+    /**
+     * The label column's width, measured once for the whole card and threaded
+     * down the recursion. Set by `Attributes` itself; a caller leaves it alone.
+     */
+    labelWidth?: number;
+}): import("react").JSX.Element;

package/esm/BaseFeatureWidget/BaseFeatureDetail/Attributes.js

@@ -1,43 +1,146 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import ArrayValue from "./ArrayValue.js";
-import DataGridDetails from "./DataGridDetails.js";
-import SimpleField from "./SimpleField.js";
-import UriAttribute from "./UriField.js";
-import { accessNested, generateMaxWidth } from "./util.js";
-import { isObject, isUriLocation } from "../../util/index.js";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+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 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.
+const DataGridDetails = lazy(() => import('./DataGridDetails.js'));
 const MAX_FIELD_NAME_WIDTH = 170;
+// must match FieldName's own font size and horizontal padding, or the measured
+// column is not the width the label needs
+const FIELD_NAME_FONT_SIZE = 12;
+const FIELD_NAME_PADDING = 10;
+// Max extra unique columns vs. first row before falling back to per-row field
+// sections instead of the data grid (avoids a mostly-empty, hard-to-read grid)
+const DATAGRID_SCHEMA_TOLERANCE = 5;
+function isHomogeneousObjectArray(arr) {
+    if (arr.length <= 1 || !arr.every(isObject)) {
+        return false;
+    }
+    const firstKeyCount = Object.keys(arr[0]).length;
+    const unionKeyCount = new Set(arr.flatMap(Object.keys)).size;
+    return unionKeyCount < firstKeyCount + DATAGRID_SCHEMA_TOLERANCE;
+}
+// these are always omitted as too detailed
 const globalOmit = [
-    '__jbrowsefmt',
     'length',
     'position',
     'subfeatures',
     'uniqueId',
     'exonFrames',
+    '_exonFrames',
     'parentId',
     'thickStart',
     'thickEnd',
-    '_lineHash',
+    // BED12/bigGenePred parsing internals (block/CDS-shape bookkeeping, not
+    // meaningful feature attributes)
+    'chromStarts',
+    'blockStarts',
+    'blockSizes',
+    'blockCount',
+    'reserved',
+    '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, 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, prefix } = opts;
+    let widest = 0;
+    const measure = (key) => measureText([...prefix, key].join('.'), FIELD_NAME_FONT_SIZE);
+    for (const [key, value] of Object.entries(attributes)) {
+        if (value == null || omits.has(key)) {
+            continue;
+        }
+        if (Array.isArray(value)) {
+            // a data grid's FieldName is a heading above the grid, not a cell beside
+            // a value, so it takes no part in the column either
+            if (!isHomogeneousObjectArray(value) && !isObjectArray(value)) {
+                widest = Math.max(widest, measure(key));
+            }
+        }
+        else if (isObject(value)) {
+            widest = Math.max(widest, isUriLocation(value)
+                ? measure(key)
+                : measureLabels(value, {
+                    omits: deepOmits,
+                    deepOmits,
+                    prefix: [...prefix, key],
+                }));
+        }
+        else {
+            widest = Math.max(widest, measure(key));
+        }
+    }
+    return widest;
+}
+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 = [], } = 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 { __jbrowsefmt, ...rest } = attributes;
-    const filteredFormattedAttributes = Object.entries({
-        ...rest,
-        ...__jbrowsefmt,
-    }).filter(([k, v]) => v != null && !omits.has(k));
-    const maxLabelWidth = generateMaxWidth(filteredFormattedAttributes, prefix);
-    return (_jsx(_Fragment, { children: filteredFormattedAttributes.map(([key, value]) => {
+    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
+    // a wider one still — three ragged steps down a single card.
+    const width = Math.min(labelWidth ??
+        widestLabel(attributes, {
+            omits,
+            // `omitSingleLevel` is what its name says: the recursive call below
+            // passes only `omit` on, so the measurement must stop honoring it at
+            // the same depth or it measures a label that isn't there
+            deepOmits: omitSingleLevel.length
+                ? new Set([...omit, ...globalOmit])
+                : omits,
+            prefix,
+        }), MAX_FIELD_NAME_WIDTH);
+    return (_jsx(_Fragment, { children: shown.map(([key, value]) => {
             const description = accessNested([...prefix, key], descriptions);
             if (Array.isArray(value)) {
-                return value.length > 1 && value.every(val => isObject(val)) ? (_jsx(DataGridDetails, { name: key, prefix: prefix, value: value }, key)) : (_jsx(ArrayValue, { name: key, value: value, formatter: formatter, description: description, prefix: prefix }, key));
+                // 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, fieldActions: fieldActions, description: description, prefix: prefix, width: width }, key));
             }
             else if (isObject(value)) {
-                const { omitSingleLevel, ...rest } = props;
-                return isUriLocation(value) ? (hideUris ? null : (_jsx(UriAttribute, { name: key, prefix: prefix, value: value }, key))) : (_jsx(Attributes, { ...rest, formatter: formatter, attributes: value, descriptions: descriptions, prefix: [...prefix, key] }, 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: Math.min(maxLabelWidth, MAX_FIELD_NAME_WIDTH) }, key));
+                return (_jsx(SimpleField, { name: key, formatter: formatter, fieldActions: fieldActions, value: value, description: description, prefix: prefix, width: width }, key));
             }
         }) }));
 }

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

@@ -1,8 +1,2 @@
-import type { BaseCardProps, BaseProps } from '../types.tsx';
-export interface BaseInputProps extends BaseCardProps {
-    omit?: string[];
-    model: any;
-    descriptions?: Record<string, React.ReactNode>;
-    formatter?: (val: unknown, key: string) => React.ReactNode;
-}
-export default function BaseAttributes(props: BaseProps): import("react/jsx-runtime").JSX.Element;
+import type { BaseProps } from '../types.tsx';
+export default function BaseAttributes(props: BaseProps): import("react").JSX.Element;

package/esm/BaseFeatureWidget/BaseFeatureDetail/BaseAttributes.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import Attributes from "./Attributes.js";
-import BaseCard from "./BaseCard.js";
+import Attributes from './Attributes.js';
+import BaseCard from './BaseCard.js';
 export default function BaseAttributes(props) {
-    const { title = 'Attributes', feature } = props;
-    return (_jsx(BaseCard, { ...props, title: title, children: _jsx(Attributes, { ...props, attributes: feature }) }));
+    const { title = 'Attributes', defaultExpanded, feature } = props;
+    return (_jsx(BaseCard, { title: title, defaultExpanded: defaultExpanded, children: _jsx(Attributes, { ...props, attributes: feature }) }));
 }

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

@@ -1,2 +1,2 @@
 import type { BaseCardProps } from '../types.tsx';
-export default function BaseCard({ children, title, defaultExpanded, }: BaseCardProps): import("react/jsx-runtime").JSX.Element;
+export default function BaseCard({ children, title, defaultExpanded, }: BaseCardProps): import("react").JSX.Element;

package/esm/BaseFeatureWidget/BaseFeatureDetail/BaseCard.js

@@ -1,17 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ExpandMore from '@mui/icons-material/ExpandMore';
 import { Accordion, AccordionDetails, AccordionSummary, Typography, } from '@mui/material';
-import { makeStyles } from "../../util/tss-react/index.js";
+import { makeStyles } from '../../util/tss-react/index.js';
 const useStyles = makeStyles()(theme => ({
     expansionPanelDetails: {
         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, 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/BaseCoreDetails.d.ts

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

package/esm/BaseFeatureWidget/BaseFeatureDetail/BaseCoreDetails.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import BaseCard from "./BaseCard.js";
-import CoreDetails from "./CoreDetails.js";
+import BaseCard from './BaseCard.js';
+import CoreDetails from './CoreDetails.js';
 export default function BaseCoreDetails(props) {
-    const { title = 'Primary data' } = props;
-    return (_jsx(BaseCard, { ...props, title: title, children: _jsx(CoreDetails, { ...props }) }));
+    const { title = 'Primary data', defaultExpanded } = props;
+    return (_jsx(BaseCard, { title: title, defaultExpanded: defaultExpanded, children: _jsx(CoreDetails, { ...props }) }));
 }

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-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/esm/BaseFeatureWidget/BaseFeatureDetail/BasicValue.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { isValidElement } 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 { SanitizedHTML } from '../../ui/index.js';
+import { isObject } from '../../util/index.js';
+import { makeStyles } from '../../util/tss-react/index.js';
 const useStyles = makeStyles()(theme => ({
     fieldValue: {
         wordBreak: 'break-word',
@@ -13,8 +13,22 @@ const useStyles = makeStyles()(theme => ({
         overflow: 'auto',
     },
 }));
+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();
-    const isLink = /^https?:\/\//.exec(`${value}`);
-    return (_jsx("div", { className: classes.fieldValue, children: isValidElement(value) ? (value) : isLink ? (_jsx(Link, { href: `${value}`, children: `${value}` })) : (_jsx(SanitizedHTML, { html: isObject(value) ? JSON.stringify(value) : String(value) })) }));
+    return (_jsx("div", { className: classes.fieldValue, children: isValidElement(value) ? value : _jsx(ValueText, { text: valueText(value) }) }));
 }

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-runtime").JSX.Element;
+export default function CoreDetails({ feature }: BaseProps): import("react").JSX.Element;

package/esm/BaseFeatureWidget/BaseFeatureDetail/CoreDetails.js

@@ -1,24 +1,19 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import Position from "./Position.js";
-import SimpleField from "./SimpleField.js";
-import { toLocale } from "../../util/index.js";
-export default function CoreDetails(props) {
-    const { feature } = props;
-    const obj = feature;
-    const formattedFeat = { ...obj, ...obj.__jbrowsefmt };
-    const { start, end } = formattedFeat;
-    const displayedDetails = {
-        ...formattedFeat,
-        length: toLocale(end - start),
-    };
-    const coreRenderedDetails = {
-        description: 'Description',
-        name: 'Name',
-        length: 'Length',
-        type: 'Type',
-    };
-    return (_jsxs(_Fragment, { children: [_jsx(SimpleField, { name: "Position", value: _jsx(Position, { ...props, feature: formattedFeat }) }), Object.entries(coreRenderedDetails)
-                .map(([key, name]) => [name, displayedDetails[key]])
-                .filter(([, value]) => value != null)
-                .map(([name, value]) => (_jsx(SimpleField, { name: name, value: Array.isArray(value) ? value.join(', ') : value }, name)))] }));
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { assembleLocString, toLocale } from '../../util/index.js';
+import { getStrandStr } from '../util.js';
+import SimpleField from './SimpleField.js';
+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: [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/DataGridDetails.d.ts

@@ -2,4 +2,4 @@ export default function DataGridDetails({ value, prefix, name, }: {
     name: string;
     prefix?: string[];
     value: Record<string, unknown>[];
-}): import("react/jsx-runtime").JSX.Element | null;
+}): import("react").JSX.Element;

package/esm/BaseFeatureWidget/BaseFeatureDetail/DataGridDetails.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Checkbox, FormControlLabel, Typography } from '@mui/material';
+import { Typography } from '@mui/material';
 import { DataGrid } from '@mui/x-data-grid';
-import FieldName from "./FieldName.js";
-import DataGridFlexContainer from "../../ui/DataGridFlexContainer.js";
-import { SanitizedHTML } from "../../ui/index.js";
-import { getStr, measureGridWidth } from "../../util/index.js";
-import { makeStyles } from "../../util/tss-react/index.js";
+import DataGridFlexContainer from '../../ui/DataGridFlexContainer.js';
+import { LabeledCheckbox, SanitizedHTML } from '../../ui/index.js';
+import { getStr, measureGridWidth } from '../../util/index.js';
+import { makeStyles } from '../../util/tss-react/index.js';
+import FieldName from './FieldName.js';
 const useStyles = makeStyles()(theme => ({
     margin: {
         marginBottom: theme.spacing(4),
@@ -20,38 +20,17 @@ const useStyles = makeStyles()(theme => ({
 export default function DataGridDetails({ value, prefix, name, }) {
     const { classes } = useStyles();
     const [checked, setChecked] = useState(false);
-    const keys = Object.keys(value[0]).sort();
-    const unionKeys = new Set(keys);
-    const rows = Object.entries(value).map(([k, val]) => {
-        const { id, ...rest } = val;
-        return {
-            id: k,
-            identifier: id,
-            ...rest,
-        };
-    });
-    for (const val of value) {
-        for (const k of Object.keys(val)) {
-            unionKeys.add(k);
-        }
-    }
-    let colNames;
-    if (unionKeys.has('id')) {
-        unionKeys.delete('id');
-        colNames = ['identifier', ...unionKeys];
-    }
-    else {
-        colNames = [...unionKeys];
-    }
-    const widths = colNames.map(e => measureGridWidth(rows.map(r => r[e])));
-    if (unionKeys.size < keys.length + 5) {
-        return (_jsxs("div", { className: classes.margin, children: [_jsx(FieldName, { prefix: prefix, name: name }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: checked, onChange: event => {
-                            setChecked(event.target.checked);
-                        } }), label: _jsx(Typography, { variant: "body2", children: "Show options" }) }), _jsx(DataGridFlexContainer, { children: _jsx(DataGrid, { disableRowSelectionOnClick: true, rows: rows, rowHeight: 20, columnHeaderHeight: 35, hideFooter: rows.length < 25, showToolbar: checked, columns: colNames.map((val, index) => ({
-                            field: val,
-                            width: widths[index],
-                            renderCell: ({ value }) => (_jsx("div", { className: classes.cell, children: _jsx(SanitizedHTML, { html: getStr(value || '') }) })),
-                        })) }) })] }));
-    }
-    return null;
+    // DataGrid needs a unique row id; rather than commandeering any 'id' field
+    // the feature itself carries, tag each row with the array index and point
+    // getRowId at it, leaving the feature's own keys (including 'id') untouched
+    const rows = value.map((val, k) => ({ ...val, __dataGridRowId: k }));
+    const cols = [...new Set(value.flatMap(Object.keys))];
+    const widths = cols.map(col => measureGridWidth(value.map(r => r[col])));
+    return (_jsxs("div", { className: classes.margin, children: [_jsx(FieldName, { prefix: prefix, name: name }), _jsx(LabeledCheckbox, { checked: checked, onChange: val => {
+                    setChecked(val);
+                }, label: _jsx(Typography, { variant: "body2", children: "Show options" }) }), _jsx(DataGridFlexContainer, { children: _jsx(DataGrid, { disableRowSelectionOnClick: true, rows: rows, getRowId: row => row.__dataGridRowId, rowHeight: 20, columnHeaderHeight: 35, hideFooter: rows.length < 25, showToolbar: checked, columns: cols.map((field, index) => ({
+                        field,
+                        width: widths[index],
+                        renderCell: ({ value }) => (_jsx("div", { className: classes.cell, children: _jsx(SanitizedHTML, { html: getStr(value ?? '') }) })),
+                    })) }) })] }));
 }

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

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