@jbrowse/core 4.3.0 → 5.0.0-beta.1

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

@@ -1,7 +1,17 @@
-export default function ArrayValue({ name, value, description, formatter, prefix, }: {
+import type { FeatureFormatter } 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, prefix, width, }: {
     description?: React.ReactNode;
     name: string;
     value: unknown[];
-    formatter?: (value: unknown, key: string) => React.ReactNode;
+    formatter?: FeatureFormatter;
     prefix?: string[];
-}): import("react/jsx-runtime").JSX.Element;
+    width?: number;
+}): import("react").JSX.Element;

package/esm/BaseFeatureWidget/BaseFeatureDetail/ArrayValue.js

@@ -1,11 +1,15 @@
-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 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 +24,29 @@ const useStyles = makeStyles()(theme => ({
         overflow: 'auto',
     },
 }));
-export default function ArrayValue({ name, value, description, formatter, prefix = [], }) {
+/**
+ * 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, prefix = [], width, }) {
     const { classes } = useStyles();
     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: 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: () => {
+                            setShowAll(v => !v);
+                        }, children: showAll
+                            ? 'Show less'
+                            : `Showing ${limit} of ${value.length}. Show all...` })) : null] }))] }));
 }

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

@@ -1,4 +1,4 @@
-import type { Descriptors } from '../types.tsx';
+import type { Descriptors, FeatureFormatter } from '../types.tsx';
 export default function Attributes(props: {
     attributes: {
         [key: string]: unknown;
@@ -6,8 +6,13 @@ export default function Attributes(props: {
     };
     omit?: string[];
     omitSingleLevel?: string[];
-    formatter?: (val: unknown, key: string) => React.ReactNode;
+    formatter?: FeatureFormatter;
     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,11 +1,31 @@
-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 UriAttribute from './UriField.js';
+import { accessNested, applyFeatureFormatting } 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',
@@ -13,31 +33,109 @@ const globalOmit = [
     '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',
 ];
+/**
+ * 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.
+ */
+function measureLabels(attributes, opts) {
+    const { omits, deepOmits, hideUris, 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))) {
+        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)) {
+            if (hideUris && (isUriLocation(value) || isLocalPathLocation(value))) {
+                continue;
+            }
+            widest = Math.max(widest, isUriLocation(value)
+                ? measure(key)
+                : measureLabels(value, {
+                    omits: deepOmits,
+                    deepOmits,
+                    hideUris,
+                    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 { attributes, omit = [], omitSingleLevel = [], descriptions, formatter, hideUris, prefix = [], labelWidth, } = props;
     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);
+    const filteredFormattedAttributes = Object.entries(applyFeatureFormatting(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,
+            hideUris,
+            prefix,
+        }), MAX_FIELD_NAME_WIDTH);
     return (_jsx(_Fragment, { children: filteredFormattedAttributes.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, 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));
+                // 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));
             }
             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, 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,7 +1,7 @@
 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',
@@ -13,5 +13,5 @@ const useStyles = makeStyles()(theme => ({
 }));
 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, { className: classes.icon }), 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,3 @@
 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',
@@ -15,6 +15,13 @@ const useStyles = makeStyles()(theme => ({
 }));
 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) })) }));
+    // 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) })) }));
 }

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(props: BaseProps): import("react").JSX.Element;

package/esm/BaseFeatureWidget/BaseFeatureDetail/CoreDetails.js

@@ -1,24 +1,35 @@
-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";
+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 SimpleField from './SimpleField.js';
+import { applyFeatureFormatting, isFormattedField } from './util.js';
 export default function CoreDetails(props) {
     const { feature } = props;
-    const obj = feature;
-    const formattedFeat = { ...obj, ...obj.__jbrowsefmt };
+    const formattedFeat = applyFeatureFormatting(feature);
     const { start, end } = formattedFeat;
     const displayedDetails = {
         ...formattedFeat,
-        length: toLocale(end - start),
+        // 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),
     };
-    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)))] }));
+    // 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'],
+    ];
+    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));
+            })] }));
 }

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