@jbrowse/core 3.7.0 → 4.0.1

package/esm/BaseFeatureWidget/BaseFeatureDetail/ArrayValue.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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";
+const useStyles = 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',
+    },
+}));
+export default function ArrayValue({ name, value, description, formatter, prefix = [], }) {
+    const { classes } = useStyles();
+    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 }), value.map((val, i) => (_jsx("div", { className: classes.fieldSubvalue, children: _jsx(BasicValue, { value: formatter ? formatter(val, name) : val }) }, `${JSON.stringify(val)}-${i}`)))] }));
+    }
+}

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

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

package/esm/BaseFeatureWidget/BaseFeatureDetail/Attributes.js

@@ -0,0 +1,43 @@
+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";
+const MAX_FIELD_NAME_WIDTH = 170;
+const globalOmit = [
+    '__jbrowsefmt',
+    'length',
+    'position',
+    'subfeatures',
+    'uniqueId',
+    'exonFrames',
+    'parentId',
+    'thickStart',
+    'thickEnd',
+    '_lineHash',
+];
+export default function Attributes(props) {
+    const { attributes, omit = [], omitSingleLevel = [], descriptions, formatter, hideUris, prefix = [], } = 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);
+    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));
+            }
+            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));
+            }
+            else {
+                return (_jsx(SimpleField, { name: key, formatter: formatter, value: value, description: description, prefix: prefix, width: Math.min(maxLabelWidth, MAX_FIELD_NAME_WIDTH) }, key));
+            }
+        }) }));
+}

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

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

package/esm/BaseFeatureWidget/BaseFeatureDetail/BaseAttributes.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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 }) }));
+}

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

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

package/esm/BaseFeatureWidget/BaseFeatureDetail/BaseCard.js

@@ -0,0 +1,17 @@
+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";
+const useStyles = makeStyles()(theme => ({
+    expansionPanelDetails: {
+        display: 'block',
+        padding: theme.spacing(1),
+    },
+    icon: {
+        color: theme.palette.tertiary.contrastText || '#fff',
+    },
+}));
+export default function BaseCard({ children, title, defaultExpanded = true, }) {
+    const { classes } = useStyles();
+    return (_jsxs(Accordion, { defaultExpanded: defaultExpanded, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ExpandMore, { className: classes.icon }), children: _jsx(Typography, { variant: "button", children: title }) }), _jsx(AccordionDetails, { className: classes.expansionPanelDetails, children: children })] }));
+}

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

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

package/esm/BaseFeatureWidget/BaseFeatureDetail/BaseCoreDetails.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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 }) }));
+}

package/esm/BaseFeatureWidget/BaseFeatureDetail/BasicValue.js

@@ -0,0 +1,20 @@
+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";
+const useStyles = makeStyles()(theme => ({
+    fieldValue: {
+        wordBreak: 'break-word',
+        maxHeight: 300,
+        fontSize: 12,
+        padding: theme.spacing(0.5),
+        overflow: 'auto',
+    },
+}));
+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) })) }));
+}

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

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

package/esm/BaseFeatureWidget/BaseFeatureDetail/CoreDetails.js

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

package/esm/BaseFeatureWidget/BaseFeatureDetail/DataGridDetails.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Checkbox, FormControlLabel, 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";
+const useStyles = makeStyles()(theme => ({
+    margin: {
+        marginBottom: theme.spacing(4),
+    },
+    cell: {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    },
+}));
+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;
+}

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

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

package/esm/BaseFeatureWidget/BaseFeatureDetail/FeatureDetails.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Divider, Typography } from '@mui/material';
+import Attributes from "./Attributes.js";
+import BaseCard from "./BaseCard.js";
+import CoreDetails from "./CoreDetails.js";
+import { generateTitle } from "./util.js";
+import { ErrorBoundary } from "../../ui/ErrorBoundary.js";
+import { ErrorMessage } from "../../ui/index.js";
+import { getEnv, getSession } from "../../util/index.js";
+import SequenceFeatureDetails from "../SequenceFeatureDetails/index.js";
+const coreDetails = [
+    'name',
+    'start',
+    'end',
+    'strand',
+    'refName',
+    'description',
+    'type',
+];
+export default function FeatureDetails(props) {
+    const { omit = [], model, feature, depth = 0 } = props;
+    const { maxDepth } = model;
+    const { mate, name = '', id = '', type = '', subfeatures, uniqueId } = feature;
+    const pm = getEnv(model).pluginManager;
+    const session = getSession(model);
+    const ExtraPanel = pm.evaluateExtensionPoint('Core-extraFeaturePanel', null, {
+        session,
+        feature,
+        model,
+    });
+    const m = mate;
+    return (_jsxs(BaseCard, { title: generateTitle(name, id, type), children: [_jsx(Typography, { children: "Core details" }), _jsx(CoreDetails, { ...props }), m ? (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(Typography, { children: "Mate details" }), _jsx(CoreDetails, { ...props, feature: {
+                            ...m,
+                            start: m.start,
+                            end: m.end,
+                            refName: m.refName,
+                            uniqueId: `${uniqueId}-mate`,
+                        } })] })) : null, _jsx(Divider, {}), _jsx(Typography, { children: "Attributes" }), _jsx(Attributes, { attributes: feature, ...props, omit: omit, omitSingleLevel: coreDetails }), _jsx(ErrorBoundary, { FallbackComponent: e => _jsx(ErrorMessage, { error: e.error }), children: _jsx(SequenceFeatureDetails, { ...props }) }), ExtraPanel ? (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(BaseCard, { title: ExtraPanel.name, children: _jsx(ExtraPanel.Component, { ...props }) })] })) : null, depth < maxDepth && subfeatures?.length ? (_jsx(BaseCard, { title: "Subfeatures", defaultExpanded: depth < 1, children: subfeatures.map((sub, idx) => (_jsx(FeatureDetails, { feature: {
+                        ...sub,
+                        uniqueId: `${uniqueId}_${idx}`,
+                    }, model: model, depth: depth + 1 }, JSON.stringify(sub)))) })) : null] }));
+}

package/esm/BaseFeatureWidget/BaseFeatureDetail/FieldName.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip } from '@mui/material';
+import { cx, makeStyles } from "../../util/tss-react/index.js";
+const useStyles = 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),
+    },
+}));
+export default function FieldName({ description, name, width, prefix = [], }) {
+    const { classes } = useStyles();
+    const val = [...prefix, name].join('.');
+    return description ? (_jsx(Tooltip, { title: description, placement: "left", children: _jsx("div", { className: cx(classes.fieldDescription, classes.fieldName), children: val }) })) : (_jsx("div", { className: classes.fieldName, style: { width: width }, children: val }));
+}

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

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

package/esm/BaseFeatureWidget/BaseFeatureDetail/Position.js

@@ -0,0 +1,14 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { assembleLocString } from "../../util/index.js";
+export default function Position(props) {
+    const { feature } = props;
+    const strand = feature.strand;
+    const strandMap = {
+        '-1': '-',
+        '0': '',
+        '1': '+',
+    };
+    const str = strandMap[strand] ? `(${strandMap[strand]})` : '';
+    const loc = assembleLocString(feature);
+    return _jsx(_Fragment, { children: `${loc} ${str}` });
+}

package/esm/BaseFeatureWidget/BaseFeatureDetail/SimpleField.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import BasicValue from "./BasicValue.js";
+import FieldName from "./FieldName.js";
+import { makeStyles } from "../../util/tss-react/index.js";
+const useStyles = makeStyles()({
+    field: {
+        display: 'flex',
+        flexWrap: 'wrap',
+    },
+});
+export default function SimpleField({ name, value, description, prefix, width, formatter, }) {
+    const { classes } = useStyles();
+    return value != null ? (_jsxs("div", { className: classes.field, children: [_jsx(FieldName, { prefix: prefix, description: description, name: name, width: width }), _jsx(BasicValue, { value: formatter ? formatter(value, name) : value })] })) : null;
+}

package/esm/BaseFeatureWidget/BaseFeatureDetail/UriField.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import BasicValue from "./BasicValue.js";
+import FieldName from "./FieldName.js";
+import { makeStyles } from "../../util/tss-react/index.js";
+const useStyles = makeStyles()({
+    field: {
+        display: 'flex',
+        flexWrap: 'wrap',
+    },
+});
+export default function UriField({ value, prefix, name, }) {
+    const { classes } = useStyles();
+    const { uri, baseUri = '' } = value;
+    let href;
+    try {
+        href = new URL(uri, baseUri).href;
+    }
+    catch (e) {
+        href = uri;
+    }
+    return (_jsxs("div", { className: classes.field, children: [_jsx(FieldName, { prefix: prefix, name: name }), _jsx(BasicValue, { value: href })] }));
+}

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

@@ -0,0 +1,7 @@
+import type { BaseInputProps } from './types.ts';
+declare const BaseFeatureDetail: ({ model, }: BaseInputProps) => import("react/jsx-runtime").JSX.Element | null;
+export default BaseFeatureDetail;
+export { default as BaseCard } from './BaseCard.tsx';
+export { default as BaseAttributes } from './BaseAttributes.tsx';
+export { default as BaseCoreDetails } from './BaseCoreDetails.tsx';
+export { default as FeatureDetails } from './FeatureDetails.tsx';

package/esm/BaseFeatureWidget/BaseFeatureDetail/index.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
+import FeatureDetails from "./FeatureDetails.js";
+import { isEmpty } from "./util.js";
+import { ErrorMessage } from "../../ui/index.js";
+import { replaceUndefinedWithNull } from "../util.js";
+const BaseFeatureDetail = observer(function BaseFeatureDetail({ model, }) {
+    const { error, descriptions, featureData } = model;
+    if (error) {
+        return _jsx(ErrorMessage, { error: error });
+    }
+    else if (!featureData) {
+        return null;
+    }
+    else {
+        const featureData2 = replaceUndefinedWithNull(featureData);
+        return isEmpty(featureData2) ? null : (_jsx(FeatureDetails, { model: model, feature: featureData2, descriptions: descriptions }));
+    }
+});
+export default BaseFeatureDetail;
+export { default as BaseCard } from "./BaseCard.js";
+export { default as BaseAttributes } from "./BaseAttributes.js";
+export { default as BaseCoreDetails } from "./BaseCoreDetails.js";
+export { default as FeatureDetails } from "./FeatureDetails.js";

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

@@ -0,0 +1,7 @@
+import type { BaseCardProps } from '../types.tsx';
+export interface BaseInputProps extends BaseCardProps {
+    omit?: string[];
+    model: any;
+    descriptions?: Record<string, React.ReactNode>;
+    formatter?: (val: unknown, key: string) => React.ReactNode;
+}

package/esm/BaseFeatureWidget/BaseFeatureDetail/types.js

@@ -0,0 +1 @@
+export {};

package/esm/BaseFeatureWidget/BaseFeatureDetail/util.js

@@ -0,0 +1,26 @@
+import { isObject, max, measureText } from "../../util/index.js";
+import { ellipses } from "../util.js";
+export function isEmpty(obj) {
+    return Object.keys(obj).length === 0;
+}
+export function generateTitle(name, id, type) {
+    return [ellipses(`${name || id || ''}`), `${type}`]
+        .filter(f => !!f)
+        .join(' - ');
+}
+export function generateMaxWidth(array, prefix) {
+    return (Math.ceil(max(array.map(key => measureText([...prefix, key[0]].join('.'), 12)))) + 10);
+}
+export function accessNested(arr, obj = {}) {
+    let obj2 = obj;
+    for (const elt of arr) {
+        if (isObject(obj2)) {
+            obj2 = obj2[elt];
+        }
+    }
+    return typeof obj2 === 'string'
+        ? obj2
+        : isObject(obj2) && typeof obj2.Description === 'string'
+            ? obj2.Description
+            : undefined;
+}

package/esm/BaseFeatureWidget/SequenceFeatureDetails/SequenceContents.d.ts

@@ -0,0 +1,10 @@
+import type { SequenceFeatureDetailsModel } from './model.ts';
+import type { SimpleFeatureSerialized } from '../../util/index.ts';
+import type { SeqState } from '../util.tsx';
+declare const SequenceContents: ({ mode, feature, sequence, model, }: {
+    mode: string;
+    feature: SimpleFeatureSerialized;
+    sequence: SeqState;
+    model: SequenceFeatureDetailsModel;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default SequenceContents;

package/esm/BaseFeatureWidget/SequenceFeatureDetails/SequenceContents.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
+import CDNASequence from "./seqtypes/CDNASequence.js";
+import CDSSequence from "./seqtypes/CDSSequence.js";
+import GenomicSequence from "./seqtypes/GenomicSequence.js";
+import ProteinSequence from "./seqtypes/ProteinSequence.js";
+import { useSequenceData } from "./useSequenceData.js";
+import { defaultCodonTable, generateCodonTable } from "../../util/index.js";
+function RenderedSequenceComponent({ mode, feature, model, sequenceData, }) {
+    const { seq, upstream, downstream, cds, exons, utr } = sequenceData;
+    switch (mode) {
+        case 'genomic':
+            return _jsx(GenomicSequence, { feature: feature, model: model, sequence: seq });
+        case 'genomic_sequence_updownstream':
+            return (_jsx(GenomicSequence, { model: model, feature: feature, sequence: seq, upstream: upstream, downstream: downstream }));
+        case 'cds':
+            return _jsx(CDSSequence, { model: model, cds: cds, sequence: seq });
+        case 'cdna':
+            return (_jsx(CDNASequence, { model: model, exons: exons, feature: feature, cds: cds, utr: utr, sequence: seq }));
+        case 'protein':
+            return (_jsx(ProteinSequence, { model: model, cds: cds, codonTable: generateCodonTable(defaultCodonTable), sequence: seq }));
+        case 'gene':
+            return (_jsx(CDNASequence, { model: model, exons: exons, feature: feature, cds: cds, utr: utr, sequence: seq, includeIntrons: true }));
+        case 'gene_collapsed_intron':
+            return (_jsx(CDNASequence, { model: model, exons: exons, feature: feature, cds: cds, sequence: seq, utr: utr, includeIntrons: true, collapseIntron: true }));
+        case 'gene_updownstream':
+            return (_jsx(CDNASequence, { model: model, exons: exons, feature: feature, cds: cds, sequence: seq, utr: utr, upstream: upstream, downstream: downstream, includeIntrons: true }));
+        case 'gene_updownstream_collapsed_intron':
+            return (_jsx(CDNASequence, { model: model, exons: exons, feature: feature, cds: cds, sequence: seq, utr: utr, upstream: upstream, downstream: downstream, includeIntrons: true, collapseIntron: true }));
+        default:
+            return _jsx("div", { children: "Unknown type" });
+    }
+}
+const SequenceContents = observer(function SequenceContents({ mode, feature, sequence, model, }) {
+    const sequenceData = useSequenceData({
+        feature,
+        sequence,
+    });
+    return sequenceData ? (_jsx(RenderedSequenceComponent, { mode: mode, feature: feature, model: model, sequenceData: sequenceData })) : null;
+});
+export default SequenceContents;

package/esm/BaseFeatureWidget/SequenceFeatureDetails/SequenceFeatureDetails.d.ts

@@ -0,0 +1,7 @@
+import type { SimpleFeatureSerialized } from '../../util/index.ts';
+import type { BaseFeatureWidgetModel } from '../stateModelFactory.ts';
+declare const SequenceFeatureDetails: ({ model, feature, }: {
+    model: BaseFeatureWidgetModel;
+    feature: SimpleFeatureSerialized;
+}) => import("react/jsx-runtime").JSX.Element;
+export default SequenceFeatureDetails;

package/esm/BaseFeatureWidget/SequenceFeatureDetails/SequenceFeatureDetails.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Suspense, lazy, useEffect, useMemo, useRef, useState } from 'react';
+import { Button, Typography } from '@mui/material';
+import { observer } from 'mobx-react';
+import SequenceFeatureMenu from "./dialogs/SequenceFeatureMenu.js";
+import SequenceTypeSelector from "./dialogs/SequenceTypeSelector.js";
+import { ErrorMessage, LoadingEllipses } from "../../ui/index.js";
+import { SimpleFeature, getSession } from "../../util/index.js";
+import { useFeatureSequence } from "../../util/useFeatureSequence.js";
+const SequencePanel = lazy(() => import("./SequencePanel.js"));
+const SequenceDialog = lazy(() => import("./dialogs/SequenceDialog.js"));
+const SequenceFeatureDetails = observer(function SequenceFeatureDetails({ model, feature, }) {
+    const { sequenceFeatureDetails } = model;
+    const { upDownBp } = sequenceFeatureDetails;
+    const seqPanelRef = useRef(null);
+    const [openInDialog, setOpenInDialog] = useState(false);
+    const [forceLoad, setForceLoad] = useState(false);
+    const session = getSession(model);
+    const assemblyName = model.view?.assemblyNames?.[0];
+    const simpleFeature = useMemo(() => new SimpleFeature(feature), [feature]);
+    const { sequence, error } = useFeatureSequence({
+        assemblyName,
+        session,
+        feature: simpleFeature,
+        upDownBp,
+        forceLoad,
+    });
+    useEffect(() => {
+        sequenceFeatureDetails.setFeature(feature);
+    }, [sequenceFeatureDetails, feature]);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { children: [_jsx(SequenceTypeSelector, { model: sequenceFeatureDetails }), _jsx(SequenceFeatureMenu, { ref: seqPanelRef, model: sequenceFeatureDetails, extraItems: [
+                            {
+                                label: 'Open in dialog',
+                                onClick: () => {
+                                    setOpenInDialog(true);
+                                },
+                            },
+                        ] })] }), openInDialog ? (_jsxs("div", { children: ["Open in dialog...", _jsx(Suspense, { fallback: _jsx(LoadingEllipses, {}), children: _jsx(SequenceDialog, { model: model, feature: feature, handleClose: () => {
+                                setOpenInDialog(false);
+                            } }) })] })) : (_jsxs("div", { children: [feature.type === 'gene' ? (_jsx(Typography, { children: "Note: inspect subfeature sequences for protein/CDS computations" })) : null, error ? (_jsx(ErrorMessage, { error: error })) : !sequence ? (_jsx(LoadingEllipses, {})) : 'error' in sequence ? (_jsxs(_Fragment, { children: [_jsx(Typography, { color: "error", children: sequence.error }), _jsx(Button, { variant: "contained", color: "inherit", onClick: () => {
+                                    setForceLoad(true);
+                                }, children: "Force load" })] })) : (_jsx(Suspense, { fallback: _jsx(LoadingEllipses, {}), children: _jsx(SequencePanel, { ref: seqPanelRef, feature: feature, sequence: sequence, model: sequenceFeatureDetails }) }))] }))] }));
+});
+export default SequenceFeatureDetails;

package/esm/BaseFeatureWidget/SequenceFeatureDetails/SequenceFeaturePanel.d.ts

@@ -0,0 +1,7 @@
+import type { SimpleFeatureSerialized } from '../../util/index.ts';
+import type { BaseFeatureWidgetModel } from '../stateModelFactory.ts';
+declare const SequenceFeaturePanel: ({ model, feature, }: {
+    model: BaseFeatureWidgetModel;
+    feature: SimpleFeatureSerialized;
+}) => import("react/jsx-runtime").JSX.Element;
+export default SequenceFeaturePanel;

package/esm/BaseFeatureWidget/SequenceFeatureDetails/SequenceFeaturePanel.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense, lazy, useState } from 'react';
+import Help from '@mui/icons-material/Help';
+import { Button, FormControl, IconButton } from '@mui/material';
+import { observer } from 'mobx-react';
+import { LoadingEllipses } from "../../ui/index.js";
+import { getSession } from "../../util/index.js";
+import { makeStyles } from "../../util/tss-react/index.js";
+const SequenceFeatureDetails = lazy(() => import("./SequenceFeatureDetails.js"));
+const HelpDialog = lazy(() => import("./dialogs/HelpDialog.js"));
+const useStyles = makeStyles()(theme => ({
+    formControl: {
+        margin: 0,
+    },
+    container: {
+        marginTop: theme.spacing(4),
+        marginBottom: theme.spacing(4),
+    },
+}));
+const SequenceFeaturePanel = observer(function SequenceFeaturePanel({ model, feature, }) {
+    const { classes } = useStyles();
+    const [shown, setShown] = useState(false);
+    return (_jsxs("div", { className: classes.container, children: [_jsx(FormControl, { className: classes.formControl, children: _jsx(Button, { variant: "contained", onClick: () => {
+                        setShown(!shown);
+                    }, children: shown ? 'Hide feature sequence' : 'Show feature sequence' }) }), _jsx(IconButton, { onClick: () => {
+                    getSession(model).queueDialog(handleClose => [
+                        HelpDialog,
+                        {
+                            handleClose,
+                        },
+                    ]);
+                }, children: _jsx(Help, {}) }), shown ? (_jsx(Suspense, { fallback: _jsx(LoadingEllipses, {}), children: _jsx(SequenceFeatureDetails, { model: model, feature: feature }, feature.uniqueId) })) : null] }));
+});
+export default SequenceFeaturePanel;

package/esm/BaseFeatureWidget/SequenceFeatureDetails/SequenceName.d.ts

@@ -0,0 +1,8 @@
+import type { SequenceFeatureDetailsModel } from './model.ts';
+import type { SimpleFeatureSerialized } from '../../util/index.ts';
+declare const SequenceName: ({ mode, model, feature, }: {
+    model: SequenceFeatureDetailsModel;
+    mode: string;
+    feature: SimpleFeatureSerialized;
+}) => import("react/jsx-runtime").JSX.Element;
+export default SequenceName;