@jbrowse/core 2.4.2 → 2.6.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[];
+}): React.JSX.Element;

package/BaseFeatureWidget/BaseFeatureDetail/ArrayValue.js

@@ -0,0 +1,45 @@
+"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),
+        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;
+}): React.JSX.Element;

package/BaseFeatureWidget/BaseFeatureDetail/Attributes.js

@@ -0,0 +1,52 @@
+"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 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 SimpleField_1 = __importDefault(require("./SimpleField"));
+const MAX_FIELD_NAME_WIDTH = 170;
+// these are always omitted as too detailed
+const globalOmit = [
+    '__jbrowsefmt',
+    'length',
+    'position',
+    'subfeatures',
+    'uniqueId',
+    'exonFrames',
+    'parentId',
+    'thickStart',
+    'thickEnd',
+];
+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 = (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(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(SimpleField_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/BasicValue.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+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;
+}): React.JSX.Element;

package/BaseFeatureWidget/BaseFeatureDetail/BasicValue.js

@@ -0,0 +1,27 @@
+"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 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',
+        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/DataGridDetails.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+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>[];
+}): React.JSX.Element | null;

package/BaseFeatureWidget/BaseFeatureDetail/DataGridDetails.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;
+}): React.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/SimpleField.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 SimpleField({ name, value, description, prefix, width, }: {
+    description?: React.ReactNode;
+    name: string;
+    value: unknown;
+    prefix?: string[];
+    width?: number;
+}): React.JSX.Element | null;

package/BaseFeatureWidget/BaseFeatureDetail/SimpleField.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 FieldName_1 = __importDefault(require("./FieldName"));
+const BasicValue_1 = __importDefault(require("./BasicValue"));
+exports.useStyles = (0, mui_1.makeStyles)()({
+    field: {
+        display: 'flex',
+        flexWrap: 'wrap',
+    },
+});
+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 = SimpleField;

package/BaseFeatureWidget/BaseFeatureDetail/UriField.d.ts

@@ -0,0 +1,18 @@
+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 UriField({ value, prefix, name, }: {
+    value: {
+        uri: string;
+        baseUri?: string;
+    };
+    name: string;
+    prefix: string[];
+}): React.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,7 @@
+import React from 'react';
+export default function UriLink({ value, }: {
+    value: {
+        uri: string;
+        baseUri?: string;
+    };
+}): React.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/index.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { IAnyStateTreeNode } from 'mobx-state-tree';
+import { BaseCardProps, BaseProps } from '../types';
+import { SimpleFeatureSerialized } from '../../util';
+export declare const useStyles: (params: void, styleOverrides?: {
+    props: any;
+    ownerState?: Record<string, unknown> | undefined;
+} | undefined) => {
+    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): 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;
+    descriptions?: Record<string, React.ReactNode>;
+    formatter?: (val: unknown, key: string) => React.ReactNode;
+}
+export declare function FeatureDetails(props: {
+    model: IAnyStateTreeNode;
+    feature: SimpleFeatureSerialized;
+    depth?: number;
+    omit?: string[];
+    descriptions?: Record<string, React.ReactNode>;
+    formatter?: (val: unknown, key: string) => React.ReactNode;
+}): React.JSX.Element;
+declare const _default: ({ model }: BaseInputProps) => React.JSX.Element | null;
+export default _default;
+export { default as Attributes } from './Attributes';