@jbrowse/core 2.4.2 → 2.5.0

package/BaseFeatureWidget/BaseFeatureDetail/ArrayValue.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export declare const useStyles: (params: void, styleOverrides?: {
+    props: any;
+    ownerState?: Record<string, unknown> | undefined;
+} | undefined) => {
+    classes: Record<"field" | "fieldSubvalue", string>;
+    theme: import("@mui/material").Theme;
+    css: import("tss-react").Css;
+    cx: import("tss-react").Cx;
+};
+export default function ArrayValue({ name, value, description, prefix, }: {
+    description?: React.ReactNode;
+    name: string;
+    value: unknown[];
+    prefix?: string[];
+}): JSX.Element;

package/BaseFeatureWidget/BaseFeatureDetail/ArrayValue.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+const react_1 = __importDefault(require("react"));
+const is_object_1 = __importDefault(require("is-object"));
+const mui_1 = require("tss-react/mui");
+// locals
+const Attributes_1 = __importDefault(require("./Attributes"));
+const FieldName_1 = __importDefault(require("./FieldName"));
+const BasicValue_1 = __importDefault(require("./BasicValue"));
+exports.useStyles = (0, mui_1.makeStyles)()(theme => ({
+    field: {
+        display: 'flex',
+        flexWrap: 'wrap',
+    },
+    fieldSubvalue: {
+        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',
+    },
+}));
+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_1.default, { attributes: value[0], prefix: [...prefix, name] })) : (react_1.default.createElement("div", { className: classes.field },
+            react_1.default.createElement(FieldName_1.default, { prefix: prefix, description: description, name: name }),
+            react_1.default.createElement(BasicValue_1.default, { 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_1.default, { 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(FieldName_1.default, { 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(BasicValue_1.default, { value: val }))))));
+    }
+}
+exports.default = ArrayValue;

package/BaseFeatureWidget/BaseFeatureDetail/Attributes.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export default function Attributes(props: {
+    attributes: {
+        [key: string]: unknown;
+        __jbrowsefmt?: {
+            [key: string]: unknown;
+        };
+    };
+    omit?: string[];
+    omitSingleLevel?: string[];
+    formatter?: (val: unknown, key: string) => React.ReactNode;
+    descriptions?: Record<string, React.ReactNode>;
+    prefix?: string[];
+    hideUris?: boolean;
+}): JSX.Element;

package/BaseFeatureWidget/BaseFeatureDetail/Attributes.js

@@ -0,0 +1,69 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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"));
+const util_2 = require("../../util");
+const UriField_1 = __importDefault(require("./UriField"));
+const BasicField_1 = __importDefault(require("./BasicField"));
+const MAX_FIELD_NAME_WIDTH = 170;
+// these are always omitted as too detailed
+const globalOmit = [
+    '__jbrowsefmt',
+    'length',
+    'position',
+    'subfeatures',
+    'uniqueId',
+    'exonFrames',
+    'parentId',
+    '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]);
+    const { __jbrowsefmt, ...rest } = attributes;
+    const formattedAttributes = { ...rest, ...__jbrowsefmt };
+    const maxLabelWidth = (0, util_1.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(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 }));
+        }
+        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) }));
+        }
+    })));
+}
+exports.default = Attributes;

package/BaseFeatureWidget/BaseFeatureDetail/BasicField.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export declare const useStyles: (params: void, styleOverrides?: {
+    props: any;
+    ownerState?: Record<string, unknown> | undefined;
+} | undefined) => {
+    classes: Record<"field", string>;
+    theme: import("@mui/material").Theme;
+    css: import("tss-react").Css;
+    cx: import("tss-react").Cx;
+};
+export default function BasicField({ name, value, description, prefix, width, }: {
+    description?: React.ReactNode;
+    name: string;
+    value: unknown;
+    prefix?: string[];
+    width?: number;
+}): JSX.Element | null;

package/BaseFeatureWidget/BaseFeatureDetail/BasicField.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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"));
+exports.useStyles = (0, mui_1.makeStyles)()({
+    field: {
+        display: 'flex',
+        flexWrap: 'wrap',
+    },
+});
+function BasicField({ 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;

package/BaseFeatureWidget/BaseFeatureDetail/BasicValue.d.ts

@@ -0,0 +1,12 @@
+export declare const useStyles: (params: void, styleOverrides?: {
+    props: any;
+    ownerState?: Record<string, unknown> | undefined;
+} | undefined) => {
+    classes: Record<"fieldValue", string>;
+    theme: import("@mui/material").Theme;
+    css: import("tss-react").Css;
+    cx: import("tss-react").Cx;
+};
+export default function BasicValue({ value }: {
+    value: unknown;
+}): JSX.Element;

package/BaseFeatureWidget/BaseFeatureDetail/BasicValue.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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");
+exports.useStyles = (0, mui_1.makeStyles)()(theme => ({
+    fieldValue: {
+        wordBreak: 'break-word',
+        maxHeight: 300,
+        fontSize: 12,
+        padding: theme.spacing(0.5),
+        overflow: 'auto',
+    },
+}));
+function 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.default = BasicValue;

package/BaseFeatureWidget/BaseFeatureDetail/DataGrid.d.ts

@@ -0,0 +1,14 @@
+export declare const useStyles: (params: void, styleOverrides?: {
+    props: any;
+    ownerState?: Record<string, unknown> | undefined;
+} | undefined) => {
+    classes: Record<"margin", string>;
+    theme: import("@mui/material").Theme;
+    css: import("tss-react").Css;
+    cx: import("tss-react").Cx;
+};
+export default function DataGridDetails({ value, prefix, name, }: {
+    name: string;
+    prefix?: string[];
+    value: Record<string, unknown>[];
+}): JSX.Element | null;

package/BaseFeatureWidget/BaseFeatureDetail/DataGrid.js

@@ -0,0 +1,98 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+const react_1 = __importStar(require("react"));
+const mui_1 = require("tss-react/mui");
+const x_data_grid_1 = require("@mui/x-data-grid");
+const material_1 = require("@mui/material");
+// locals
+const util_1 = require("../../util");
+const ResizeBar_1 = __importStar(require("../../ui/ResizeBar"));
+const FieldName_1 = __importDefault(require("./FieldName"));
+const UriLink_1 = __importDefault(require("./UriLink"));
+exports.useStyles = (0, mui_1.makeStyles)()(theme => ({
+    margin: {
+        margin: theme.spacing(1),
+        width: '100%',
+    },
+}));
+function DataGridDetails({ value, prefix, name, }) {
+    const { classes } = (0, exports.useStyles)();
+    const { ref, scrollLeft } = (0, ResizeBar_1.useResizeBar)();
+    const [checked, setChecked] = (0, react_1.useState)(false);
+    const keys = Object.keys(value[0]).sort();
+    const unionKeys = new Set(keys);
+    // 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,
+        };
+    });
+    for (const val of value) {
+        for (const k of Object.keys(val)) {
+            unionKeys.add(k);
+        }
+    }
+    // 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 [widths, setWidths] = (0, react_1.useState)(colNames.map(e => (0, util_1.measureGridWidth)(rows.map(r => r[e]))));
+    if (unionKeys.size < keys.length + 5) {
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(FieldName_1.default, { prefix: prefix, name: name }),
+            react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { checked: checked, onChange: event => setChecked(event.target.checked) }), label: react_1.default.createElement(material_1.Typography, { variant: "body2" }, "Show options") }),
+            react_1.default.createElement("div", { className: classes.margin, ref: ref },
+                react_1.default.createElement(ResizeBar_1.default, { widths: widths, setWidths: setWidths, scrollLeft: scrollLeft }),
+                react_1.default.createElement(x_data_grid_1.DataGrid, { disableRowSelectionOnClick: true, 
+                    // @ts-expect-error the rows gets confused by the renderCell of the
+                    // columns below
+                    rows: rows, rowCount: 25, rowHeight: 25, columnHeaderHeight: 35, hideFooter: rows.length < 25, slots: { toolbar: checked ? x_data_grid_1.GridToolbar : null }, slotProps: {
+                        toolbar: { printOptions: { disableToolbarButton: true } },
+                    }, columns: colNames.map((val, index) => ({
+                        field: val,
+                        renderCell: params => {
+                            const value = params.value;
+                            return (0, util_1.isUriLocation)(value) ? (react_1.default.createElement(UriLink_1.default, { value: value })) : (react_1.default.createElement(react_1.default.Fragment, null, (0, util_1.getStr)(value)));
+                        },
+                        width: widths[index],
+                    })) }))));
+    }
+    return null;
+}
+exports.default = DataGridDetails;

package/BaseFeatureWidget/BaseFeatureDetail/FieldName.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export declare const useStyles: (params: void, styleOverrides?: {
+    props: any;
+    ownerState?: Record<string, unknown> | undefined;
+} | undefined) => {
+    classes: Record<"fieldDescription" | "fieldName", string>;
+    theme: import("@mui/material").Theme;
+    css: import("tss-react").Css;
+    cx: import("tss-react").Cx;
+};
+export default function FieldName({ description, name, width, prefix, }: {
+    description?: React.ReactNode;
+    name: string;
+    prefix?: string[];
+    width?: number;
+}): JSX.Element;

package/BaseFeatureWidget/BaseFeatureDetail/FieldName.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+const react_1 = __importDefault(require("react"));
+const material_1 = require("@mui/material");
+const mui_1 = require("tss-react/mui");
+exports.useStyles = (0, mui_1.makeStyles)()(theme => ({
+    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),
+    },
+}));
+function 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.default = FieldName;

package/BaseFeatureWidget/BaseFeatureDetail/UriField.d.ts

@@ -0,0 +1,17 @@
+export declare const useStyles: (params: void, styleOverrides?: {
+    props: any;
+    ownerState?: Record<string, unknown> | undefined;
+} | undefined) => {
+    classes: Record<"field", string>;
+    theme: import("@mui/material").Theme;
+    css: import("tss-react").Css;
+    cx: import("tss-react").Cx;
+};
+export default function UriField({ value, prefix, name, }: {
+    value: {
+        uri: string;
+        baseUri?: string;
+    };
+    name: string;
+    prefix: string[];
+}): JSX.Element;

package/BaseFeatureWidget/BaseFeatureDetail/UriField.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+const react_1 = __importDefault(require("react"));
+const FieldName_1 = __importDefault(require("./FieldName"));
+const mui_1 = require("tss-react/mui");
+const BasicValue_1 = __importDefault(require("./BasicValue"));
+exports.useStyles = (0, mui_1.makeStyles)()({
+    field: {
+        display: 'flex',
+        flexWrap: 'wrap',
+    },
+});
+function UriField({ 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(FieldName_1.default, { prefix: prefix, name: name }),
+        react_1.default.createElement(BasicValue_1.default, { value: href })));
+}
+exports.default = UriField;

package/BaseFeatureWidget/BaseFeatureDetail/UriLink.d.ts

@@ -0,0 +1,6 @@
+export default function UriLink({ value, }: {
+    value: {
+        uri: string;
+        baseUri?: string;
+    };
+}): JSX.Element;

package/BaseFeatureWidget/BaseFeatureDetail/UriLink.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const util_1 = require("../../util");
+const ui_1 = require("../../ui");
+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.default = UriLink;

package/BaseFeatureWidget/{BaseFeatureDetail.d.ts → BaseFeatureDetail/index.d.ts}

@@ -1,12 +1,12 @@
 import React from 'react';
 import { IAnyStateTreeNode } from 'mobx-state-tree';
-import { BaseCardProps, BaseProps } from './types';
-import { SimpleFeatureSerializedNoId } from '../util/simpleFeature';
+import { BaseCardProps, BaseProps } from '../types';
+import { SimpleFeatureSerialized } from '../../util/simpleFeature';
 export declare const useStyles: (params: void, styleOverrides?: {
     props: any;
     ownerState?: Record<string, unknown> | undefined;
 } | undefined) => {
-    classes: Record<"expansionPanelDetails" | "expandIcon" | "field" | "fieldDescription" | "fieldName" | "fieldValue" | "fieldSubvalue", string>;
+    classes: Record<"expandIcon" | "expansionPanelDetails" | "field" | "fieldDescription" | "fieldName" | "fieldValue" | "fieldSubvalue", string>;
     theme: import("@mui/material").Theme;
     css: import("tss-react").Css;
     cx: import("tss-react").Cx;
@@ -53,7 +53,7 @@ export interface BaseInputProps extends BaseCardProps {
 }
 export declare function FeatureDetails(props: {
     model: IAnyStateTreeNode;
-    feature: SimpleFeatureSerializedNoId;
+    feature: SimpleFeatureSerialized;
     depth?: number;
     omit?: string[];
     formatter?: (val: unknown, key: string) => React.ReactNode;

package/BaseFeatureWidget/{BaseFeatureDetail.js → BaseFeatureDetail/index.js}

@@ -38,10 +38,10 @@ 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 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 = [
@@ -254,7 +254,7 @@ function DataGridDetails({ value, prefix, name, }) {
                     height,
                     width: '100%',
                 } },
-                react_1.default.createElement(x_data_grid_1.DataGrid, { disableSelectionOnClick: true, rowHeight: rowHeight, rows: rows, hideFooterSelectedRowCount: true, columns: columns, hideFooter: hideFoot }))));
+                react_1.default.createElement(x_data_grid_1.DataGrid, { disableRowSelectionOnClick: true, rowHeight: rowHeight, rows: rows, hideFooterSelectedRowCount: true, columns: columns, hideFooter: hideFoot }))));
     }
     return null;
 }
@@ -337,7 +337,7 @@ function generateTitle(name, id, type) {
 }
 function FeatureDetails(props) {
     const { omit = [], model, feature, depth = 0 } = props;
-    const { mate, name = '', id = '', type = '', subfeatures } = feature;
+    const { mate, name = '', id = '', type = '', subfeatures, uniqueId } = feature;
     const pm = (0, util_1.getEnv)(model).pluginManager;
     const session = (0, util_1.getSession)(model);
     const ExtraPanel = pm.evaluateExtensionPoint('Core-extraFeaturePanel', null, {
@@ -351,7 +351,7 @@ function FeatureDetails(props) {
         mate ? (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(material_1.Divider, null),
             react_1.default.createElement(material_1.Typography, null, "Mate details"),
-            react_1.default.createElement(CoreDetails, { ...props, feature: mate }))) : null,
+            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 }),
@@ -361,11 +361,14 @@ function FeatureDetails(props) {
             react_1.default.createElement(material_1.Divider, null),
             react_1.default.createElement(BaseCard, { title: ExtraPanel.name },
                 react_1.default.createElement(ExtraPanel.Component, { ...props })))) : null,
-        (subfeatures === null || subfeatures === void 0 ? void 0 : subfeatures.length) ? (react_1.default.createElement(BaseCard, { title: "Subfeatures", defaultExpanded: depth < 1 }, subfeatures.map(sub => (react_1.default.createElement(FeatureDetails, { key: JSON.stringify(sub), feature: sub, model: model, depth: depth + 1 }))))) : null));
+        (subfeatures === null || subfeatures === void 0 ? void 0 : subfeatures.length) ? (react_1.default.createElement(BaseCard, { title: "Subfeatures", defaultExpanded: depth < 1 }, subfeatures.map((sub, idx) => (react_1.default.createElement(FeatureDetails, { key: JSON.stringify(sub), feature: { ...sub, uniqueId: `${uniqueId}_${idx}` }, model: model, depth: depth + 1 }))))) : null));
 }
 exports.FeatureDetails = FeatureDetails;
 exports.default = (0, mobx_react_1.observer)(function ({ model }) {
-    const { featureData } = model;
+    const { error, featureData } = model;
+    if (error) {
+        return react_1.default.createElement(ui_1.ErrorMessage, { error: error });
+    }
     if (!featureData) {
         return null;
     }

package/BaseFeatureWidget/BaseFeatureDetail/util.d.ts

@@ -0,0 +1,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;

package/BaseFeatureWidget/BaseFeatureDetail/util.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toLocale = exports.generateMaxWidth = exports.generateTitle = exports.isEmpty = void 0;
+const util_1 = require("../../util");
+const util_2 = require("../util");
+function isEmpty(obj) {
+    return Object.keys(obj).length === 0;
+}
+exports.isEmpty = isEmpty;
+function generateTitle(name, id, type) {
+    return [(0, util_2.ellipses)(`${name}` || `${id}`), `${type}`]
+        .filter(f => !!f)
+        .join(' - ');
+}
+exports.generateTitle = generateTitle;
+function generateMaxWidth(array, prefix) {
+    return (Math.ceil((0, util_1.max)(array.map(key => (0, util_1.measureText)([...prefix, key[0]].join('.'), 12)))) + 10);
+}
+exports.generateMaxWidth = generateMaxWidth;
+function toLocale(n) {
+    return n.toLocaleString('en-US');
+}
+exports.toLocale = toLocale;

package/BaseFeatureWidget/SequenceFeatureDetails/CDNASequence.d.ts

@@ -0,0 +1,12 @@
+import { Feat } from '../util';
+export default function CDNASequence({ utr, cds, exons, sequence, upstream, downstream, includeIntrons, collapseIntron, intronBp, }: {
+    utr: Feat[];
+    cds: Feat[];
+    exons: Feat[];
+    sequence: string;
+    upstream?: string;
+    downstream?: string;
+    includeIntrons?: boolean;
+    collapseIntron?: boolean;
+    intronBp: number;
+}): JSX.Element;

package/BaseFeatureWidget/SequenceFeatureDetails/CDNASequence.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const util_1 = require("./util");
+function CDNASequence({ utr, cds, exons, sequence, upstream, downstream, includeIntrons, collapseIntron, intronBp, }) {
+    const chunks = (cds.length ? [...cds, ...utr].sort((a, b) => a.start - b.start) : exons).filter(f => f.start !== f.end);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        upstream ? (react_1.default.createElement("span", { style: { background: util_1.updownstreamColor } }, upstream)) : null,
+        chunks.map((chunk, idx) => {
+            var _a;
+            const intron = sequence.slice(chunk.end, (_a = chunks[idx + 1]) === null || _a === void 0 ? void 0 : _a.start);
+            return (react_1.default.createElement(react_1.default.Fragment, { key: JSON.stringify(chunk) },
+                react_1.default.createElement("span", { style: {
+                        background: chunk.type === 'CDS' ? util_1.cdsColor : util_1.utrColor,
+                    } }, sequence.slice(chunk.start, chunk.end)),
+                includeIntrons && idx < chunks.length - 1 ? (react_1.default.createElement("span", { style: { background: util_1.intronColor } }, collapseIntron && intron.length > intronBp * 2
+                    ? `${intron.slice(0, intronBp)}...${intron.slice(-intronBp)}`
+                    : intron)) : null));
+        }),
+        downstream ? (react_1.default.createElement("span", { style: { background: util_1.updownstreamColor } }, downstream)) : null));
+}
+exports.default = CDNASequence;

package/BaseFeatureWidget/SequenceFeatureDetails/CDSSequence.d.ts

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

package/BaseFeatureWidget/SequenceFeatureDetails/CDSSequence.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const util_1 = require("./util");
+const util_2 = require("../util");
+function CDSSequence({ cds, sequence, }) {
+    return react_1.default.createElement("span", { style: { background: util_1.cdsColor } }, (0, util_2.stitch)(cds, sequence));
+}
+exports.default = CDSSequence;