@jbrowse/core 2.5.0 → 2.6.0

package/BaseFeatureWidget/BaseFeatureDetail/ArrayValue.d.ts

@@ -13,4 +13,4 @@ export default function ArrayValue({ name, value, description, prefix, }: {
     name: string;
     value: unknown[];
     prefix?: string[];
-}): JSX.Element;
+}): React.JSX.Element;

package/BaseFeatureWidget/BaseFeatureDetail/ArrayValue.js

@@ -20,7 +20,6 @@ exports.useStyles = (0, mui_1.makeStyles)()(theme => ({
         wordBreak: 'break-word',
         maxHeight: 300,
         padding: theme.spacing(0.5),
-        background: theme.palette.action.hover,
         border: `1px solid ${theme.palette.action.selected}`,
         boxSizing: 'border-box',
         overflow: 'auto',

package/BaseFeatureWidget/BaseFeatureDetail/Attributes.d.ts

@@ -12,4 +12,4 @@ export default function Attributes(props: {
     descriptions?: Record<string, React.ReactNode>;
     prefix?: string[];
     hideUris?: boolean;
-}): JSX.Element;
+}): React.JSX.Element;

package/BaseFeatureWidget/BaseFeatureDetail/Attributes.js

@@ -4,13 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const util_1 = require("./util");
-const DataGrid_1 = __importDefault(require("./DataGrid"));
-const ArrayValue_1 = __importDefault(require("./ArrayValue"));
 const is_object_1 = __importDefault(require("is-object"));
+// locals
+const util_1 = require("./util");
 const util_2 = require("../../util");
+const DataGridDetails_1 = __importDefault(require("./DataGridDetails"));
+const ArrayValue_1 = __importDefault(require("./ArrayValue"));
 const UriField_1 = __importDefault(require("./UriField"));
-const BasicField_1 = __importDefault(require("./BasicField"));
+const SimpleField_1 = __importDefault(require("./SimpleField"));
 const MAX_FIELD_NAME_WIDTH = 170;
 // these are always omitted as too detailed
 const globalOmit = [
@@ -24,24 +25,6 @@ const globalOmit = [
     'thickStart',
     'thickEnd',
 ];
-// pick using a path from an object, similar to _.get from lodash with special
-// logic for Descriptions from e.g. VCF headers
-//
-// @param arr  example ['a','b'], obj = {a:{b:'hello}}
-// @returns hello (with special addition to grab description also)
-function accessNested(arr, obj = {}) {
-    let obj2 = obj;
-    arr.forEach(elt => {
-        if (obj2) {
-            obj2 = obj[elt];
-        }
-    });
-    return typeof obj === 'string'
-        ? obj
-        : typeof (obj === null || obj === void 0 ? void 0 : obj.Description) === 'string'
-            ? obj.Description
-            : undefined;
-}
 function Attributes(props) {
     const { attributes, omit = [], omitSingleLevel = [], descriptions, formatter = val => val, hideUris, prefix = [], } = props;
     const omits = new Set([...omit, ...globalOmit, ...omitSingleLevel]);
@@ -51,18 +34,18 @@ function Attributes(props) {
     return (react_1.default.createElement(react_1.default.Fragment, null, Object.entries(formattedAttributes)
         .filter(([k, v]) => v !== undefined && !omits.has(k))
         .map(([key, value]) => {
-        const description = accessNested([...prefix, key], descriptions);
+        const description = (0, util_1.accessNested)([...prefix, key], descriptions);
         if (Array.isArray(value)) {
             // check if it looks like an array of objects, which could be used
             // in data grid
-            return value.length > 1 && value.every(val => (0, is_object_1.default)(val)) ? (react_1.default.createElement(DataGrid_1.default, { key: key, name: key, prefix: prefix, value: value })) : (react_1.default.createElement(ArrayValue_1.default, { key: key, name: key, value: value, description: description, prefix: prefix }));
+            return value.length > 1 && value.every(val => (0, is_object_1.default)(val)) ? (react_1.default.createElement(DataGridDetails_1.default, { key: key, name: key, prefix: prefix, value: value })) : (react_1.default.createElement(ArrayValue_1.default, { key: key, name: key, value: value, description: description, prefix: prefix }));
         }
         else if ((0, is_object_1.default)(value)) {
             const { omitSingleLevel, ...rest } = props;
             return (0, util_2.isUriLocation)(value) ? (hideUris ? null : (react_1.default.createElement(UriField_1.default, { key: key, name: key, prefix: prefix, value: value }))) : (react_1.default.createElement(Attributes, { ...rest, key: key, attributes: value, descriptions: descriptions, prefix: [...prefix, key] }));
         }
         else {
-            return (react_1.default.createElement(BasicField_1.default, { key: key, name: key, value: formatter(value, key), description: description, prefix: prefix, width: Math.min(maxLabelWidth, MAX_FIELD_NAME_WIDTH) }));
+            return (react_1.default.createElement(SimpleField_1.default, { key: key, name: key, value: formatter(value, key), description: description, prefix: prefix, width: Math.min(maxLabelWidth, MAX_FIELD_NAME_WIDTH) }));
         }
     })));
 }

package/BaseFeatureWidget/BaseFeatureDetail/BasicValue.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export declare const useStyles: (params: void, styleOverrides?: {
     props: any;
     ownerState?: Record<string, unknown> | undefined;
@@ -9,4 +10,4 @@ export declare const useStyles: (params: void, styleOverrides?: {
 };
 export default function BasicValue({ value }: {
     value: unknown;
-}): JSX.Element;
+}): React.JSX.Element;

package/BaseFeatureWidget/BaseFeatureDetail/BasicValue.js

@@ -6,9 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
 const react_1 = __importDefault(require("react"));
 const mui_1 = require("tss-react/mui");
-const ui_1 = require("../../ui");
 const is_object_1 = __importDefault(require("is-object"));
 const material_1 = require("@mui/material");
+// locals
+const ui_1 = require("../../ui");
 exports.useStyles = (0, mui_1.makeStyles)()(theme => ({
     fieldValue: {
         wordBreak: 'break-word',

package/BaseFeatureWidget/BaseFeatureDetail/{DataGrid.d.ts → DataGridDetails.d.ts}

@@ -1,3 +1,4 @@
+import React from 'react';
 export declare const useStyles: (params: void, styleOverrides?: {
     props: any;
     ownerState?: Record<string, unknown> | undefined;
@@ -11,4 +12,4 @@ export default function DataGridDetails({ value, prefix, name, }: {
     name: string;
     prefix?: string[];
     value: Record<string, unknown>[];
-}): JSX.Element | null;
+}): React.JSX.Element | null;

package/BaseFeatureWidget/BaseFeatureDetail/FieldName.d.ts

@@ -13,4 +13,4 @@ export default function FieldName({ description, name, width, prefix, }: {
     name: string;
     prefix?: string[];
     width?: number;
-}): JSX.Element;
+}): React.JSX.Element;

package/BaseFeatureWidget/BaseFeatureDetail/{BasicField.d.ts → SimpleField.d.ts}

@@ -8,10 +8,10 @@ export declare const useStyles: (params: void, styleOverrides?: {
     css: import("tss-react").Css;
     cx: import("tss-react").Cx;
 };
-export default function BasicField({ name, value, description, prefix, width, }: {
+export default function SimpleField({ name, value, description, prefix, width, }: {
     description?: React.ReactNode;
     name: string;
     value: unknown;
     prefix?: string[];
     width?: number;
-}): JSX.Element | null;
+}): React.JSX.Element | null;

package/BaseFeatureWidget/BaseFeatureDetail/{BasicField.js → SimpleField.js}

@@ -6,18 +6,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
 const react_1 = __importDefault(require("react"));
 const mui_1 = require("tss-react/mui");
-const BasicValue_1 = __importDefault(require("./BasicValue"));
 const FieldName_1 = __importDefault(require("./FieldName"));
+const BasicValue_1 = __importDefault(require("./BasicValue"));
 exports.useStyles = (0, mui_1.makeStyles)()({
     field: {
         display: 'flex',
         flexWrap: 'wrap',
     },
 });
-function BasicField({ name, value, description, prefix, width, }) {
+function SimpleField({ name, value, description, prefix, width, }) {
     const { classes } = (0, exports.useStyles)();
     return value !== null && value !== undefined ? (react_1.default.createElement("div", { className: classes.field },
         react_1.default.createElement(FieldName_1.default, { prefix: prefix, description: description, name: name, width: width }),
         react_1.default.createElement(BasicValue_1.default, { value: value }))) : null;
 }
-exports.default = BasicField;
+exports.default = SimpleField;

package/BaseFeatureWidget/BaseFeatureDetail/UriField.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export declare const useStyles: (params: void, styleOverrides?: {
     props: any;
     ownerState?: Record<string, unknown> | undefined;
@@ -14,4 +15,4 @@ export default function UriField({ value, prefix, name, }: {
     };
     name: string;
     prefix: string[];
-}): JSX.Element;
+}): React.JSX.Element;

package/BaseFeatureWidget/BaseFeatureDetail/UriLink.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 export default function UriLink({ value, }: {
     value: {
         uri: string;
         baseUri?: string;
     };
-}): JSX.Element;
+}): React.JSX.Element;

package/BaseFeatureWidget/BaseFeatureDetail/index.d.ts

@@ -1,50 +1,19 @@
 import React from 'react';
 import { IAnyStateTreeNode } from 'mobx-state-tree';
 import { BaseCardProps, BaseProps } from '../types';
-import { SimpleFeatureSerialized } from '../../util/simpleFeature';
+import { SimpleFeatureSerialized } from '../../util';
 export declare const useStyles: (params: void, styleOverrides?: {
     props: any;
     ownerState?: Record<string, unknown> | undefined;
 } | undefined) => {
-    classes: Record<"expandIcon" | "expansionPanelDetails" | "field" | "fieldDescription" | "fieldName" | "fieldValue" | "fieldSubvalue", string>;
+    classes: Record<"expandIcon" | "expansionPanelDetails", string>;
     theme: import("@mui/material").Theme;
     css: import("tss-react").Css;
     cx: import("tss-react").Cx;
 };
-export declare function BaseCard({ children, title, defaultExpanded, }: BaseCardProps): JSX.Element;
-export declare const FieldName: ({ description, name, width, prefix, }: {
-    description?: React.ReactNode;
-    name: string;
-    prefix?: string[] | undefined;
-    width?: number | undefined;
-}) => JSX.Element;
-export declare const BasicValue: ({ value }: {
-    value: string | React.ReactNode;
-}) => JSX.Element;
-export declare function SimpleValue({ name, value, description, prefix, width, }: {
-    description?: React.ReactNode;
-    name: string;
-    value: any;
-    prefix?: string[];
-    width?: number;
-}): JSX.Element | null;
-export declare const BaseCoreDetails: (props: BaseProps) => JSX.Element;
-export declare function UriLink({ value, }: {
-    value: {
-        uri: string;
-        baseUri?: string;
-    };
-}): JSX.Element;
-export declare function Attributes(props: {
-    attributes: Record<string, any>;
-    omit?: string[];
-    omitSingleLevel?: string[];
-    formatter?: (val: unknown, key: string) => React.ReactNode;
-    descriptions?: Record<string, React.ReactNode>;
-    prefix?: string[];
-    hideUris?: boolean;
-}): JSX.Element;
-export declare const BaseAttributes: (props: BaseProps) => JSX.Element;
+export declare function BaseCard({ children, title, defaultExpanded, }: BaseCardProps): React.JSX.Element;
+export declare const BaseCoreDetails: (props: BaseProps) => React.JSX.Element;
+export declare const BaseAttributes: (props: BaseProps) => React.JSX.Element;
 export interface BaseInputProps extends BaseCardProps {
     omit?: string[];
     model: any;
@@ -56,7 +25,9 @@ export declare function FeatureDetails(props: {
     feature: SimpleFeatureSerialized;
     depth?: number;
     omit?: string[];
+    descriptions?: Record<string, React.ReactNode>;
     formatter?: (val: unknown, key: string) => React.ReactNode;
-}): JSX.Element;
-declare const _default: ({ model }: BaseInputProps) => JSX.Element | null;
+}): React.JSX.Element;
+declare const _default: ({ model }: BaseInputProps) => React.JSX.Element | null;
 export default _default;
+export { default as Attributes } from './Attributes';

package/BaseFeatureWidget/BaseFeatureDetail/index.js

@@ -26,35 +26,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FeatureDetails = exports.BaseAttributes = exports.Attributes = exports.UriLink = exports.BaseCoreDetails = exports.SimpleValue = exports.BasicValue = exports.FieldName = exports.BaseCard = exports.useStyles = void 0;
+exports.Attributes = exports.FeatureDetails = exports.BaseAttributes = exports.BaseCoreDetails = exports.BaseCard = exports.useStyles = void 0;
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const react_1 = __importStar(require("react"));
 const react_error_boundary_1 = require("react-error-boundary");
 const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
-const x_data_grid_1 = require("@mui/x-data-grid");
 const mobx_react_1 = require("mobx-react");
-const is_object_1 = __importDefault(require("is-object"));
 // icons
 const ExpandMore_1 = __importDefault(require("@mui/icons-material/ExpandMore"));
 // locals
 const util_1 = require("../../util");
 const ui_1 = require("../../ui");
 const SequenceFeatureDetails_1 = __importDefault(require("../SequenceFeatureDetails"));
-const util_2 = require("../util");
-const MAX_FIELD_NAME_WIDTH = 170;
-// these are always omitted as too detailed
-const globalOmit = [
-    '__jbrowsefmt',
-    'length',
-    'position',
-    'subfeatures',
-    'uniqueId',
-    'exonFrames',
-    'parentId',
-    'thickStart',
-    'thickEnd',
-];
+const SimpleField_1 = __importDefault(require("./SimpleField"));
+const Attributes_1 = __importDefault(require("./Attributes"));
+const util_2 = require("./util");
 // coreDetails are omitted in some circumstances
 const coreDetails = [
     'name',
@@ -75,40 +62,6 @@ exports.useStyles = (0, mui_1.makeStyles)()(theme => {
         expandIcon: {
             color: ((_a = theme.palette.tertiary) === null || _a === void 0 ? void 0 : _a.contrastText) || '#fff',
         },
-        field: {
-            display: 'flex',
-            flexWrap: 'wrap',
-        },
-        fieldDescription: {
-            '&:hover': {
-                background: theme.palette.mode === 'dark' ? '#e65100' : 'yellow',
-            },
-        },
-        fieldName: {
-            wordBreak: 'break-all',
-            minWidth: 90,
-            borderBottom: '1px solid #0003',
-            fontSize: 12,
-            background: theme.palette.action.disabledBackground,
-            marginRight: theme.spacing(1),
-            padding: theme.spacing(0.5),
-        },
-        fieldValue: {
-            wordBreak: 'break-word',
-            maxHeight: 300,
-            fontSize: 12,
-            padding: theme.spacing(0.5),
-            overflow: 'auto',
-        },
-        fieldSubvalue: {
-            wordBreak: 'break-word',
-            maxHeight: 300,
-            padding: theme.spacing(0.5),
-            background: theme.palette.action.disabledBackground,
-            border: `1px solid ${theme.palette.action.disabledBackground}`,
-            boxSizing: 'border-box',
-            overflow: 'auto',
-        },
     });
 });
 function BaseCard({ children, title, defaultExpanded = true, }) {
@@ -122,44 +75,6 @@ function BaseCard({ children, title, defaultExpanded = true, }) {
         react_1.default.createElement(material_1.AccordionDetails, { className: classes.expansionPanelDetails }, children)));
 }
 exports.BaseCard = BaseCard;
-const FieldName = ({ description, name, width, prefix = [], }) => {
-    const { classes, cx } = (0, exports.useStyles)();
-    const val = [...prefix, name].join('.');
-    return description ? (react_1.default.createElement(material_1.Tooltip, { title: description, placement: "left" },
-        react_1.default.createElement("div", { className: cx(classes.fieldDescription, classes.fieldName) }, val))) : (react_1.default.createElement("div", { className: classes.fieldName, style: { width: width } }, val));
-};
-exports.FieldName = FieldName;
-const BasicValue = ({ value }) => {
-    const { classes } = (0, exports.useStyles)();
-    const isLink = `${value}`.match(/^https?:\/\//);
-    return (react_1.default.createElement("div", { className: classes.fieldValue }, react_1.default.isValidElement(value) ? (value) : isLink ? (react_1.default.createElement(material_1.Link, { href: `${value}` }, `${value}`)) : (react_1.default.createElement(ui_1.SanitizedHTML, { html: (0, is_object_1.default)(value) ? JSON.stringify(value) : String(value) }))));
-};
-exports.BasicValue = BasicValue;
-function SimpleValue({ name, value, description, prefix, width, }) {
-    const { classes } = (0, exports.useStyles)();
-    return value !== null && value !== undefined ? (react_1.default.createElement("div", { className: classes.field },
-        react_1.default.createElement(exports.FieldName, { prefix: prefix, description: description, name: name, width: width }),
-        react_1.default.createElement(exports.BasicValue, { value: value }))) : null;
-}
-exports.SimpleValue = SimpleValue;
-function ArrayValue({ name, value, description, prefix = [], }) {
-    const { classes } = (0, exports.useStyles)();
-    if (value.length === 1) {
-        return (0, is_object_1.default)(value[0]) ? (react_1.default.createElement(Attributes, { attributes: value[0], prefix: [...prefix, name] })) : (react_1.default.createElement("div", { className: classes.field },
-            react_1.default.createElement(exports.FieldName, { prefix: prefix, description: description, name: name }),
-            react_1.default.createElement(exports.BasicValue, { value: value[0] })));
-    }
-    else if (value.every(val => (0, is_object_1.default)(val))) {
-        return (react_1.default.createElement(react_1.default.Fragment, null, value.map((val, i) => (react_1.default.createElement(Attributes, { key: JSON.stringify(val) + '-' + i, attributes: val, prefix: [...prefix, name + '-' + i] })))));
-    }
-    else {
-        return (react_1.default.createElement("div", { className: classes.field },
-            react_1.default.createElement(exports.FieldName, { prefix: prefix, description: description, name: name }),
-            value.map((val, i) => (react_1.default.createElement("div", { key: JSON.stringify(val) + '-' + i, className: classes.fieldSubvalue },
-                react_1.default.createElement(exports.BasicValue, { value: val }))))));
-    }
-}
-const toLocale = (n) => n.toLocaleString('en-US');
 function Position(props) {
     const { feature } = props;
     const strand = feature.strand;
@@ -181,7 +96,7 @@ function CoreDetails(props) {
     const { start, end } = formattedFeat;
     const displayedDetails = {
         ...formattedFeat,
-        length: toLocale(end - start),
+        length: (0, util_2.toLocale)(end - start),
     };
     const coreRenderedDetails = {
         description: 'Description',
@@ -190,151 +105,23 @@ function CoreDetails(props) {
         type: 'Type',
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(SimpleValue, { name: "Position", value: react_1.default.createElement(Position, { ...props, feature: formattedFeat }) }),
+        react_1.default.createElement(SimpleField_1.default, { name: "Position", value: react_1.default.createElement(Position, { ...props, feature: formattedFeat }) }),
         Object.entries(coreRenderedDetails)
             .map(([key, name]) => [name, displayedDetails[key]])
             .filter(([, value]) => value != null)
-            .map(([name, value]) => (react_1.default.createElement(SimpleValue, { key: name, name: name, value: value })))));
+            .map(([name, value]) => (react_1.default.createElement(SimpleField_1.default, { key: name, name: name, value: value })))));
 }
 const BaseCoreDetails = (props) => {
     return (react_1.default.createElement(BaseCard, { ...props, title: "Primary data" },
         react_1.default.createElement(CoreDetails, { ...props })));
 };
 exports.BaseCoreDetails = BaseCoreDetails;
-function UriLink({ value, }) {
-    const href = (0, util_1.getUriLink)(value);
-    return react_1.default.createElement(ui_1.SanitizedHTML, { html: `<a href="${href}">${href}</a>` });
-}
-exports.UriLink = UriLink;
-function DataGridDetails({ value, prefix, name, }) {
-    const keys = Object.keys(value[0]).sort();
-    const unionKeys = new Set(keys);
-    for (const val of value) {
-        for (const k of Object.keys(val)) {
-            unionKeys.add(k);
-        }
-    }
-    if (unionKeys.size < keys.length + 5) {
-        // avoids key 'id' from being used in row data
-        const rows = Object.entries(value).map(([k, val]) => {
-            const { id, ...rest } = val;
-            return {
-                id: k,
-                identifier: id,
-                ...rest,
-            };
-        });
-        // avoids key 'id' from being used in column names, and tries
-        // to make it at the start of the colNames array
-        let colNames;
-        if (unionKeys.has('id')) {
-            unionKeys.delete('id');
-            colNames = ['identifier', ...unionKeys];
-        }
-        else {
-            colNames = [...unionKeys];
-        }
-        const columns = colNames.map(val => ({
-            field: val,
-            renderCell: (params) => {
-                const { value } = params;
-                return (0, util_1.isUriLocation)(value) ? react_1.default.createElement(UriLink, { value: value }) : (0, util_1.getStr)(value);
-            },
-            width: (0, util_1.measureGridWidth)(rows.map(r => r[val])),
-        }));
-        const rowHeight = 25;
-        const hideFoot = rows.length < 100;
-        const headHeight = 80;
-        const height = Math.min(rows.length, 100) * rowHeight + headHeight + (hideFoot ? 0 : 50);
-        // disableSelection on click helps avoid
-        // https://github.com/mui-org/material-ui-x/issues/1197
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(exports.FieldName, { prefix: prefix, name: name }),
-            react_1.default.createElement("div", { style: {
-                    height,
-                    width: '100%',
-                } },
-                react_1.default.createElement(x_data_grid_1.DataGrid, { disableRowSelectionOnClick: true, rowHeight: rowHeight, rows: rows, hideFooterSelectedRowCount: true, columns: columns, hideFooter: hideFoot }))));
-    }
-    return null;
-}
-// pick using a path from an object, similar to _.get from lodash with special logic
-// for Descriptions from e.g. VCF headers
-// @param arr  example ['a','b'], obj = {a:{b:'hello}}
-// @returns hello (with special addition to grab description also)
-function accessNested(arr, obj = {}) {
-    arr.forEach(elt => {
-        if (obj) {
-            obj = obj[elt];
-        }
-    });
-    return typeof obj === 'string'
-        ? obj
-        : typeof (obj === null || obj === void 0 ? void 0 : obj.Description) === 'string'
-            ? obj.Description
-            : undefined;
-}
-function generateMaxWidth(array, prefix) {
-    const arr = [];
-    array.forEach(key => {
-        const val = [...prefix, key[0]].join('.');
-        arr.push((0, util_1.measureText)(val, 12));
-    });
-    return Math.ceil(Math.max(...arr)) + 10;
-}
-function UriAttribute({ value, prefix, name, }) {
-    const { classes } = (0, exports.useStyles)();
-    const { uri, baseUri = '' } = value;
-    let href;
-    try {
-        href = new URL(uri, baseUri).href;
-    }
-    catch (e) {
-        href = uri;
-    }
-    return (react_1.default.createElement("div", { className: classes.field },
-        react_1.default.createElement(exports.FieldName, { prefix: prefix, name: name }),
-        react_1.default.createElement(exports.BasicValue, { value: href })));
-}
-function Attributes(props) {
-    const { attributes, omit = [], omitSingleLevel = [], descriptions, formatter = val => val, hideUris, prefix = [], } = props;
-    const omits = new Set([...omit, ...globalOmit, ...omitSingleLevel]);
-    const { __jbrowsefmt, ...rest } = attributes;
-    const formattedAttributes = { ...rest, ...__jbrowsefmt };
-    const maxLabelWidth = generateMaxWidth(Object.entries(formattedAttributes).filter(([k, v]) => v !== undefined && !omits.has(k)), prefix);
-    return (react_1.default.createElement(react_1.default.Fragment, null, Object.entries(formattedAttributes)
-        .filter(([k, v]) => v !== undefined && !omits.has(k))
-        .map(([key, value]) => {
-        const description = accessNested([...prefix, key], descriptions);
-        if (Array.isArray(value)) {
-            // check if it looks like an array of objects, which could be used
-            // in data grid
-            return value.length > 1 && value.every(val => (0, is_object_1.default)(val)) ? (react_1.default.createElement(DataGridDetails, { key: key, name: key, prefix: prefix, value: value })) : (react_1.default.createElement(ArrayValue, { key: key, name: key, value: value, description: description, prefix: prefix }));
-        }
-        else if ((0, is_object_1.default)(value)) {
-            const { omitSingleLevel, ...rest } = props;
-            return (0, util_1.isUriLocation)(value) ? (hideUris ? null : (react_1.default.createElement(UriAttribute, { key: key, name: key, prefix: prefix, value: value }))) : (react_1.default.createElement(Attributes, { ...rest, key: key, attributes: value, descriptions: descriptions, prefix: [...prefix, key] }));
-        }
-        else {
-            return (react_1.default.createElement(SimpleValue, { key: key, name: key, value: formatter(value, key), description: description, prefix: prefix, width: Math.min(maxLabelWidth, MAX_FIELD_NAME_WIDTH) }));
-        }
-    })));
-}
-exports.Attributes = Attributes;
 const BaseAttributes = (props) => {
     const { feature } = props;
     return (react_1.default.createElement(BaseCard, { ...props, title: "Attributes" },
-        react_1.default.createElement(Attributes, { ...props, attributes: feature })));
+        react_1.default.createElement(Attributes_1.default, { ...props, attributes: feature })));
 };
 exports.BaseAttributes = BaseAttributes;
-function isEmpty(obj) {
-    return Object.keys(obj).length === 0;
-}
-function generateTitle(name, id, type) {
-    return [(0, util_2.ellipses)(`${name}` || `${id}`), `${type}`]
-        .filter(f => !!f)
-        .join(' - ');
-}
 function FeatureDetails(props) {
     const { omit = [], model, feature, depth = 0 } = props;
     const { mate, name = '', id = '', type = '', subfeatures, uniqueId } = feature;
@@ -345,7 +132,7 @@ function FeatureDetails(props) {
         feature,
         model,
     });
-    return (react_1.default.createElement(BaseCard, { title: generateTitle(name, id, type) },
+    return (react_1.default.createElement(BaseCard, { title: (0, util_2.generateTitle)(name, id, type) },
         react_1.default.createElement(material_1.Typography, null, "Core details"),
         react_1.default.createElement(CoreDetails, { ...props }),
         mate ? (react_1.default.createElement(react_1.default.Fragment, null,
@@ -354,8 +141,8 @@ function FeatureDetails(props) {
             react_1.default.createElement(CoreDetails, { ...props, feature: { ...mate, uniqueId: uniqueId + '-mate' } }))) : null,
         react_1.default.createElement(material_1.Divider, null),
         react_1.default.createElement(material_1.Typography, null, "Attributes"),
-        react_1.default.createElement(Attributes, { attributes: feature, ...props, omit: omit, omitSingleLevel: coreDetails }),
-        react_1.default.createElement(react_error_boundary_1.ErrorBoundary, { FallbackComponent: ({ error }) => react_1.default.createElement(ui_1.ErrorMessage, { error: error }) },
+        react_1.default.createElement(Attributes_1.default, { attributes: feature, ...props, omit: omit, omitSingleLevel: coreDetails }),
+        react_1.default.createElement(react_error_boundary_1.ErrorBoundary, { FallbackComponent: e => react_1.default.createElement(ui_1.ErrorMessage, { error: e.error }) },
             react_1.default.createElement(SequenceFeatureDetails_1.default, { ...props })),
         ExtraPanel ? (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(material_1.Divider, null),
@@ -377,5 +164,7 @@ exports.default = (0, mobx_react_1.observer)(function ({ model }) {
     // config guide. this replacement happens both here and when snapshotting the
     // featureData
     const g = JSON.parse(JSON.stringify(featureData, (_, v) => (v === undefined ? null : v)));
-    return isEmpty(g) ? null : react_1.default.createElement(FeatureDetails, { model: model, feature: g });
+    return (0, util_2.isEmpty)(g) ? null : react_1.default.createElement(FeatureDetails, { model: model, feature: g });
 });
+var Attributes_2 = require("./Attributes");
+Object.defineProperty(exports, "Attributes", { enumerable: true, get: function () { return __importDefault(Attributes_2).default; } });

package/BaseFeatureWidget/BaseFeatureDetail/util.d.ts

@@ -2,3 +2,4 @@ export declare function isEmpty(obj: Record<string, unknown>): boolean;
 export declare function generateTitle(name: unknown, id: unknown, type: unknown): string;
 export declare function generateMaxWidth(array: unknown[][], prefix: string[]): number;
 export declare function toLocale(n: number): string;
+export declare function accessNested(arr: string[], obj?: Record<string, unknown>): string | undefined;

package/BaseFeatureWidget/BaseFeatureDetail/util.js

@@ -1,6 +1,10 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.toLocale = exports.generateMaxWidth = exports.generateTitle = exports.isEmpty = void 0;
+exports.accessNested = exports.toLocale = exports.generateMaxWidth = exports.generateTitle = exports.isEmpty = void 0;
+const is_object_1 = __importDefault(require("is-object"));
 const util_1 = require("../../util");
 const util_2 = require("../util");
 function isEmpty(obj) {
@@ -21,3 +25,22 @@ function toLocale(n) {
     return n.toLocaleString('en-US');
 }
 exports.toLocale = toLocale;
+// pick using a path from an object, similar to _.get from lodash with special
+// logic for Descriptions from e.g. VCF headers
+//
+// @param arr  example ['a','b'], obj = {a:{b:'hello}}
+// @returns hello (with special addition to grab description also)
+function accessNested(arr, obj = {}) {
+    let obj2 = obj;
+    arr.forEach(elt => {
+        if ((0, is_object_1.default)(obj2)) {
+            obj2 = obj2[elt];
+        }
+    });
+    return typeof obj2 === 'string'
+        ? obj2
+        : (0, is_object_1.default)(obj2) && typeof (obj2 === null || obj2 === void 0 ? void 0 : obj2.Description) === 'string'
+            ? obj2.Description
+            : undefined;
+}
+exports.accessNested = accessNested;

package/BaseFeatureWidget/SequenceFeatureDetails/CDNASequence.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Feat } from '../util';
 export default function CDNASequence({ utr, cds, exons, sequence, upstream, downstream, includeIntrons, collapseIntron, intronBp, }: {
     utr: Feat[];
@@ -9,4 +10,4 @@ export default function CDNASequence({ utr, cds, exons, sequence, upstream, down
     includeIntrons?: boolean;
     collapseIntron?: boolean;
     intronBp: number;
-}): JSX.Element;
+}): React.JSX.Element;

package/BaseFeatureWidget/SequenceFeatureDetails/CDSSequence.d.ts

@@ -1,5 +1,6 @@
+import React from 'react';
 import { Feat } from '../util';
 export default function CDSSequence({ cds, sequence, }: {
     cds: Feat[];
     sequence: string;
-}): JSX.Element;
+}): React.JSX.Element;

package/BaseFeatureWidget/SequenceFeatureDetails/GenomicSequence.d.ts

@@ -1,5 +1,6 @@
+import React from 'react';
 export default function GenomicSequence({ sequence, upstream, downstream, }: {
     sequence: string;
     upstream?: string;
     downstream?: string;
-}): JSX.Element;
+}): React.JSX.Element;