@jbrowse/core 3.6.5 → 4.0.0

package/esm/BaseFeatureWidget/SequenceFeatureDetails/SequenceName.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
+import { toLocale } from "../../util/index.js";
+function getStrand(strand) {
+    if (strand === -1) {
+        return '(-)';
+    }
+    else if (strand === 1) {
+        return '(+)';
+    }
+    else {
+        return '';
+    }
+}
+const SequenceName = observer(function SequenceName({ mode, model, feature, }) {
+    return (_jsx("div", { style: { background: 'white' }, children: `>${[
+            [feature.name || feature.id, mode].filter(f => !!f).join('-'),
+            `${feature.refName}:${toLocale(feature.start + 1)}-${toLocale(feature.end)}${getStrand(feature.strand)}`,
+            mode.endsWith('updownstream')
+                ? `+/- ${toLocale(model.upDownBp)} up/downstream bp`
+                : '',
+        ]
+            .filter(f => !!f)
+            .join(' ')}\n` }));
+});
+export default SequenceName;

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

@@ -0,0 +1,3 @@
+import type { SequencePanelProps } from './types.ts';
+declare const SequencePanel: import("react").ForwardRefExoticComponent<SequencePanelProps & import("react").RefAttributes<HTMLDivElement>>;
+export default SequencePanel;

package/esm/BaseFeatureWidget/SequenceFeatureDetails/SequencePanel.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { observer } from 'mobx-react';
+import SequenceContents from "./SequenceContents.js";
+import SequenceName from "./SequenceName.js";
+function WordWrap({ children }) {
+    return (_jsx("pre", { style: {
+            fontFamily: 'monospace',
+            color: 'black',
+            fontSize: 11,
+        }, children: children }));
+}
+function NoWordWrap({ children }) {
+    return (_jsx("div", { style: {
+            fontFamily: 'monospace',
+            color: 'black',
+            fontSize: 11,
+            maxWidth: 600,
+            whiteSpace: 'wrap',
+            wordBreak: 'break-all',
+        }, children: children }));
+}
+const SequencePanel = observer(forwardRef(function S(props, ref) {
+    const { sequence, model, feature } = props;
+    const { showCoordinates, mode } = model;
+    const Container = showCoordinates ? WordWrap : NoWordWrap;
+    return (_jsx("div", { "data-testid": "sequence_panel", ref: ref, style: { maxHeight: 300, overflow: 'auto' }, children: _jsxs(Container, { children: [_jsx(SequenceName, { model: model, mode: mode, feature: feature }), _jsx(SequenceContents, { model: model, mode: mode, feature: feature, sequence: sequence })] }) }));
+}));
+export default SequencePanel;

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

@@ -0,0 +1,6 @@
+export declare const intronColor: undefined;
+export declare const utrColor = "rgb(200,240,240)";
+export declare const proteinColor = "rgb(220,160,220)";
+export declare const cdsColor = "rgb(220,220,180)";
+export declare const updownstreamColor = "rgba(250,200,200)";
+export declare const genomeColor = "rgb(200,280,200)";

package/esm/BaseFeatureWidget/SequenceFeatureDetails/consts.js

@@ -0,0 +1,6 @@
+export const intronColor = undefined;
+export const utrColor = 'rgb(200,240,240)';
+export const proteinColor = 'rgb(220,160,220)';
+export const cdsColor = 'rgb(220,220,180)';
+export const updownstreamColor = 'rgba(250,200,200)';
+export const genomeColor = 'rgb(200,280,200)';

package/esm/BaseFeatureWidget/SequenceFeatureDetails/dialogs/HelpDialog.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog } from '@jbrowse/core/ui';
+import SettingsIcon from '@mui/icons-material/Settings';
+import { Button, DialogActions, DialogContent, Typography } from '@mui/material';
+export default function HelpDialog({ handleClose, }) {
+    return (_jsxs(Dialog, { maxWidth: "xl", open: true, onClose: () => {
+            handleClose();
+        }, title: "Feature sequence panel help", children: [_jsxs(DialogContent, { children: [_jsx(Typography, { children: "The \"Feature sequence\" panel shows the underlying genomic sequence for a given feature, fetched from the reference genome." }), _jsx(Typography, { children: "For gene features, this panel does special calculations to e.g. stitch together the coding sequence, the options are:" }), _jsxs("ul", { children: [_jsx("li", { children: "CDS - shows the stitched together CDS sequences" }), _jsx("li", { children: "Protein - the translated coding sequence, with the \"standard\" genetic code" }), _jsx("li", { children: "cDNA - shows the 'copy DNA' of transcript, formed from exon sequences" }), _jsx("li", { children: "Genomic w/ introns +/- Nbp up+down stream - the sequence underlying the entire gene including including introns, with UTR and CDS highlighted" })] }), _jsx(Typography, { children: "For other feature types, the options are:" }), _jsx("ul", { children: _jsx("li", { children: "Genomic +/- Nbp up+down stream - the reference genome sequence underlying the feature, with the up and downstream sequence" }) }), _jsxs(Typography, { children: ["Note 1: you can use the \"gear icon\" ", _jsx(SettingsIcon, {}), " to edit the number of bp displayed up/downstream and in the intron region"] }), _jsx(Typography, { children: "Note 2: The 'Copy HTML' function retains the colors from the sequence panel but cannot be pasted into some programs like notepad that only expect plain text." })] }), _jsx(DialogActions, { children: _jsx(Button, { onClick: () => {
+                        handleClose();
+                    }, autoFocus: true, variant: "contained", children: "Close" }) })] }));
+}

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

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

package/esm/BaseFeatureWidget/SequenceFeatureDetails/dialogs/SequenceDialog.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Suspense, useRef, useState } from 'react';
+import { Button, DialogActions, DialogContent, Typography } from '@mui/material';
+import { observer } from 'mobx-react';
+import SequenceFeatureMenu from "./SequenceFeatureMenu.js";
+import SequenceTypeSelector from "./SequenceTypeSelector.js";
+import { Dialog, ErrorMessage, LoadingEllipses } from "../../../ui/index.js";
+import { SimpleFeature, getSession, } from "../../../util/index.js";
+import { makeStyles } from "../../../util/tss-react/index.js";
+import { useFeatureSequence } from "../../../util/useFeatureSequence.js";
+import SequencePanel from "../SequencePanel.js";
+const useStyles = makeStyles()({
+    dialogContent: {
+        width: '80em',
+    },
+});
+const SequenceDialog = observer(function SequenceDialog({ handleClose, model, feature, }) {
+    const { sequenceFeatureDetails } = model;
+    const { upDownBp } = sequenceFeatureDetails;
+    const { classes } = useStyles();
+    const seqPanelRef = useRef(null);
+    const [forceLoad, setForceLoad] = useState(false);
+    const session = getSession(model);
+    const assemblyName = model.view?.assemblyNames?.[0];
+    const { sequence, error } = useFeatureSequence({
+        assemblyName,
+        session,
+        feature: new SimpleFeature(feature),
+        upDownBp,
+        forceLoad,
+    });
+    return (_jsxs(Dialog, { maxWidth: "xl", open: true, title: "Sequence view", onClose: () => {
+            handleClose();
+        }, children: [_jsxs(DialogContent, { className: classes.dialogContent, children: [_jsxs("div", { children: [_jsx(SequenceTypeSelector, { model: sequenceFeatureDetails }), _jsx(SequenceFeatureMenu, { ref: seqPanelRef, model: sequenceFeatureDetails })] }), _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 }) }))] })] }), _jsx(DialogActions, { children: _jsx(Button, { onClick: () => {
+                        handleClose();
+                    }, variant: "contained", children: "Close" }) })] }));
+});
+export default SequenceDialog;

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

@@ -0,0 +1,8 @@
+import type { MenuItem } from '../../../ui/index.ts';
+import type { SequenceFeatureDetailsModel } from '../model.ts';
+interface Props {
+    model: SequenceFeatureDetailsModel;
+    extraItems?: MenuItem[];
+}
+declare const SequenceFeatureMenu: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
+export default SequenceFeatureMenu;

package/esm/BaseFeatureWidget/SequenceFeatureDetails/dialogs/SequenceFeatureMenu.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, lazy, useState } from 'react';
+import MoreVert from '@mui/icons-material/MoreVert';
+import Settings from '@mui/icons-material/Settings';
+import { observer } from 'mobx-react';
+import CascadingMenuButton from "../../../ui/CascadingMenuButton.js";
+const SequenceFeatureSettingsDialog = lazy(() => import("./SettingsDialog.js"));
+const SequenceFeatureMenu = observer(forwardRef(function SequenceFeatureMenu2({ model, extraItems = [] }, ref) {
+    if (typeof ref === 'function') {
+        throw new Error('needs a non function ref');
+    }
+    const [showSettings, setShowSettings] = useState(false);
+    const { showCoordinatesSetting, showGenomicCoordsOption } = model;
+    return (_jsxs(_Fragment, { children: [_jsx(CascadingMenuButton, { menuItems: [
+                    {
+                        label: 'Copy plaintext',
+                        onClick: async () => {
+                            const { default: copy } = await import('copy-to-clipboard');
+                            const r = ref?.current;
+                            if (r) {
+                                copy(r.textContent || '', { format: 'text/plain' });
+                            }
+                        },
+                    },
+                    {
+                        label: 'Copy HTML',
+                        onClick: async () => {
+                            const { default: copy } = await import('copy-to-clipboard');
+                            const r = ref?.current;
+                            if (r) {
+                                copy(r.outerHTML, { format: 'text/html' });
+                            }
+                        },
+                    },
+                    {
+                        label: 'Download plaintext',
+                        onClick: async () => {
+                            const { saveAs } = await import('file-saver-es');
+                            const r = ref?.current;
+                            if (r) {
+                                saveAs(new Blob([r.textContent || ''], {
+                                    type: 'text/plain;charset=utf-8',
+                                }), 'sequence.txt');
+                            }
+                        },
+                    },
+                    {
+                        label: 'Download HTML',
+                        onClick: async () => {
+                            const { saveAs } = await import('file-saver-es');
+                            const r = ref?.current;
+                            if (r) {
+                                saveAs(new Blob([r.outerHTML || ''], {
+                                    type: 'text/html;charset=utf-8',
+                                }), 'sequence.html');
+                            }
+                        },
+                    },
+                    ...extraItems,
+                    {
+                        label: 'Show coordinates?',
+                        type: 'subMenu',
+                        subMenu: [
+                            {
+                                label: 'No coordinates',
+                                type: 'radio',
+                                checked: showCoordinatesSetting === 'none',
+                                onClick: () => {
+                                    model.setShowCoordinates('none');
+                                },
+                            },
+                            {
+                                label: 'Coordinates relative to feature start',
+                                type: 'radio',
+                                checked: showCoordinatesSetting === 'relative',
+                                onClick: () => {
+                                    model.setShowCoordinates('relative');
+                                },
+                            },
+                            ...(showGenomicCoordsOption
+                                ? [
+                                    {
+                                        label: 'Coordinates relative to genome (only available for continuous genome based sequence types)',
+                                        type: 'radio',
+                                        checked: showCoordinatesSetting === 'genomic',
+                                        onClick: () => {
+                                            model.setShowCoordinates('genomic');
+                                        },
+                                    },
+                                ]
+                                : []),
+                        ],
+                    },
+                    {
+                        label: 'Settings',
+                        icon: Settings,
+                        onClick: () => {
+                            setShowSettings(true);
+                        },
+                    },
+                ], children: _jsx(MoreVert, {}) }), showSettings ? (_jsx(SequenceFeatureSettingsDialog, { model: model, handleClose: () => {
+                    setShowSettings(false);
+                } })) : null] }));
+}));
+export default SequenceFeatureMenu;

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

@@ -0,0 +1,5 @@
+import type { SequenceFeatureDetailsModel } from '../model.ts';
+declare const SequenceTypeSelector: ({ model, }: {
+    model: SequenceFeatureDetailsModel;
+}) => import("react/jsx-runtime").JSX.Element;
+export default SequenceTypeSelector;

package/esm/BaseFeatureWidget/SequenceFeatureDetails/dialogs/SequenceTypeSelector.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormControl, MenuItem, Select } from '@mui/material';
+import { observer } from 'mobx-react';
+import { makeStyles } from "../../../util/tss-react/index.js";
+const useStyles = makeStyles()({
+    formControl: {
+        margin: 0,
+        marginLeft: 4,
+    },
+});
+const SequenceTypeSelector = observer(function SequenceTypeSelector({ model, }) {
+    const { classes } = useStyles();
+    const { intronBp, upDownBp, mode, hasCDS, hasExonOrCDS } = model;
+    return (_jsx(FormControl, { className: classes.formControl, children: _jsx(Select, { size: "small", value: mode, onChange: event => {
+                model.setMode(event.target.value);
+            }, children: Object.entries({
+                ...(hasCDS
+                    ? {
+                        cds: 'CDS',
+                    }
+                    : {}),
+                ...(hasCDS
+                    ? {
+                        protein: 'Protein',
+                    }
+                    : {}),
+                ...(hasExonOrCDS
+                    ? {
+                        cdna: 'cDNA',
+                    }
+                    : {}),
+                ...(hasExonOrCDS
+                    ? {
+                        gene: 'Genomic w/ full introns',
+                    }
+                    : {}),
+                ...(hasExonOrCDS
+                    ? {
+                        gene_updownstream: `Genomic w/ full introns +/- ${upDownBp}bp up+down stream`,
+                    }
+                    : {}),
+                ...(hasExonOrCDS
+                    ? {
+                        gene_collapsed_intron: `Genomic w/ ${intronBp}bp intron`,
+                    }
+                    : {}),
+                ...(hasExonOrCDS
+                    ? {
+                        gene_updownstream_collapsed_intron: `Genomic w/ ${intronBp}bp intron +/- ${upDownBp}bp up+down stream `,
+                    }
+                    : {}),
+                ...(!hasExonOrCDS
+                    ? {
+                        genomic: 'Genomic',
+                    }
+                    : {}),
+                ...(!hasExonOrCDS
+                    ? {
+                        genomic_sequence_updownstream: `Genomic +/- ${upDownBp}bp up+down stream`,
+                    }
+                    : {}),
+            }).map(([key, val]) => (_jsx(MenuItem, { value: key, children: val }, key))) }) }));
+});
+export default SequenceTypeSelector;

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

@@ -0,0 +1,6 @@
+import type { SequenceFeatureDetailsModel } from '../model.ts';
+declare const SequenceFeatureSettingsDialog: ({ handleClose, model, }: {
+    handleClose: () => void;
+    model: SequenceFeatureDetailsModel;
+}) => import("react/jsx-runtime").JSX.Element;
+export default SequenceFeatureSettingsDialog;

package/esm/BaseFeatureWidget/SequenceFeatureDetails/dialogs/SettingsDialog.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Dialog } from '@jbrowse/core/ui';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { Button, DialogActions, DialogContent, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, TextField, } from '@mui/material';
+import { observer } from 'mobx-react';
+const useStyles = makeStyles()(theme => ({
+    formElt: {
+        margin: theme.spacing(3),
+        width: 400,
+    },
+    dialogContent: {
+        width: '80em',
+    },
+    root: {
+        padding: 4,
+    },
+}));
+function TextField2(props) {
+    return (_jsx("div", { children: _jsx(TextField, { ...props }) }));
+}
+function FormControl2({ children }) {
+    return (_jsx("div", { children: _jsx(FormControl, { children: children }) }));
+}
+const SequenceFeatureSettingsDialog = observer(function SequenceFeatureSettingsDialog({ handleClose, model, }) {
+    const { classes } = useStyles();
+    const { upperCaseCDS } = model;
+    const [intronBp, setIntronBp] = useState(`${model.intronBp}`);
+    const [upDownBp, setUpDownBp] = useState(`${model.upDownBp}`);
+    const intronBpValid = !Number.isNaN(+intronBp);
+    const upDownBpValid = !Number.isNaN(+upDownBp);
+    return (_jsxs(Dialog, { maxWidth: "xl", open: true, onClose: () => {
+            handleClose();
+        }, title: "Feature sequence settings", children: [_jsxs(DialogContent, { className: classes.dialogContent, children: [_jsx(TextField2, { label: "Number of intronic bases around splice site to display", className: classes.formElt, value: intronBp, helperText: !intronBpValid ? 'Not a number' : '', error: !intronBpValid, onChange: event => {
+                            setIntronBp(event.target.value);
+                        } }), _jsx(TextField2, { label: "Number of bases up/down stream of feature to display", className: classes.formElt, value: upDownBp, helperText: !upDownBpValid ? 'Not a number' : '', error: !upDownBpValid, onChange: event => {
+                            setUpDownBp(event.target.value);
+                        } }), _jsxs(FormControl2, { children: [_jsx(FormLabel, { children: "Sequence capitalization" }), _jsxs(RadioGroup, { value: upperCaseCDS ? 'cds' : 'unchanged', onChange: e => {
+                                    model.setUpperCaseCDS(e.target.value === 'cds');
+                                }, children: [_jsx(FormControlLabel, { value: "cds", control: _jsx(Radio, { className: classes.root, size: "small" }), label: "Capitalize CDS and lower case everything else" }), _jsx(FormControlLabel, { value: "unchanged", control: _jsx(Radio, { className: classes.root, size: "small" }), label: "Capitalization from reference genome sequence" })] })] })] }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: () => {
+                            model.setIntronBp(+intronBp);
+                            model.setUpDownBp(+upDownBp);
+                            handleClose();
+                        }, disabled: !intronBpValid || !upDownBpValid, color: "primary", variant: "contained", children: "Submit" }), _jsx(Button, { onClick: () => {
+                            handleClose();
+                        }, color: "secondary", autoFocus: true, variant: "contained", children: "Cancel" })] })] }));
+});
+export default SequenceFeatureSettingsDialog;

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

@@ -0,0 +1 @@
+export { default } from './SequenceFeaturePanel.tsx';

package/esm/BaseFeatureWidget/SequenceFeatureDetails/index.js

@@ -0,0 +1 @@
+export { default } from "./SequenceFeaturePanel.js";

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

@@ -0,0 +1,31 @@
+import type { SimpleFeatureSerialized } from '../../util/index.ts';
+import type { Instance } from '@jbrowse/mobx-state-tree';
+type ShowCoordinatesMode = 'none' | 'relative' | 'genomic';
+type SequenceDisplayMode = '' | 'gene' | 'gene_collapsed_intron' | 'gene_updownstream' | 'cdna' | 'cds' | 'genomic' | 'genomic_sequence_updownstream' | 'protein';
+export declare function SequenceFeatureDetailsF(): import("@jbrowse/mobx-state-tree").IModelType<{}, {
+    showCoordinatesSetting: string;
+    intronBp: number;
+    upDownBp: number;
+    upperCaseCDS: boolean;
+    charactersPerRow: number;
+    feature: SimpleFeatureSerialized | undefined;
+    mode: SequenceDisplayMode;
+} & {
+    setFeature(f: SimpleFeatureSerialized): void;
+    setUpDownBp(f: number): void;
+    setIntronBp(f: number): void;
+    setUpperCaseCDS(f: boolean): void;
+    setShowCoordinates(f: ShowCoordinatesMode): void;
+    setMode(mode: SequenceDisplayMode): void;
+} & {
+    readonly showCoordinates: boolean;
+    readonly showGenomicCoordsOption: boolean;
+    readonly hasCDS: boolean | undefined;
+    readonly hasExon: boolean | undefined;
+    readonly hasExonOrCDS: boolean | undefined;
+} & {
+    afterAttach(): void;
+}, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>;
+export type SequenceFeatureDetailsStateModel = ReturnType<typeof SequenceFeatureDetailsF>;
+export type SequenceFeatureDetailsModel = Instance<SequenceFeatureDetailsStateModel>;
+export {};

package/esm/BaseFeatureWidget/SequenceFeatureDetails/model.js

@@ -0,0 +1,83 @@
+import { addDisposer, types } from '@jbrowse/mobx-state-tree';
+import { autorun } from 'mobx';
+import { localStorageGetBoolean, localStorageGetItem, localStorageGetNumber, localStorageSetItem, } from "../../util/index.js";
+function localStorageSetNumber(key, value) {
+    localStorageSetItem(key, JSON.stringify(value));
+}
+function localStorageSetBoolean(key, value) {
+    localStorageSetItem(key, JSON.stringify(value));
+}
+const p = 'sequenceFeatureDetails';
+export function SequenceFeatureDetailsF() {
+    return types
+        .model('SequenceFeatureDetails')
+        .volatile(() => ({
+        showCoordinatesSetting: localStorageGetItem(`${p}-showCoordinatesSetting`) || 'none',
+        intronBp: localStorageGetNumber(`${p}-intronBp`, 10),
+        upDownBp: localStorageGetNumber(`${p}-upDownBp`, 100),
+        upperCaseCDS: localStorageGetBoolean(`${p}-upperCaseCDS`, true),
+        charactersPerRow: 100,
+        feature: undefined,
+        mode: '',
+    }))
+        .actions(self => ({
+        setFeature(f) {
+            self.feature = f;
+        },
+        setUpDownBp(f) {
+            self.upDownBp = f;
+        },
+        setIntronBp(f) {
+            self.intronBp = f;
+        },
+        setUpperCaseCDS(f) {
+            self.upperCaseCDS = f;
+        },
+        setShowCoordinates(f) {
+            self.showCoordinatesSetting = f;
+        },
+        setMode(mode) {
+            self.mode = mode;
+        },
+    }))
+        .views(self => ({
+        get showCoordinates() {
+            return self.showCoordinatesSetting !== 'none';
+        },
+        get showGenomicCoordsOption() {
+            return (self.mode === 'gene' ||
+                self.mode === 'gene_updownstream' ||
+                self.mode === 'genomic' ||
+                self.mode === 'genomic_sequence_updownstream');
+        },
+        get hasCDS() {
+            const featureType = self.feature?.type?.toLowerCase();
+            if (featureType === 'mature_protein_region_of_cds') {
+                return true;
+            }
+            return self.feature?.subfeatures?.some(sub => {
+                const type = sub.type?.toLowerCase();
+                return type === 'cds' || type === 'mature_protein_region_of_cds';
+            });
+        },
+        get hasExon() {
+            return self.feature?.subfeatures?.some(sub => sub.type === 'exon');
+        },
+        get hasExonOrCDS() {
+            return this.hasExon || this.hasCDS;
+        },
+    }))
+        .actions(self => ({
+        afterAttach() {
+            addDisposer(self, autorun(function sequenceFeatureLocalStorageAutorun() {
+                localStorageSetNumber(`${p}-upDownBp`, self.upDownBp);
+                localStorageSetNumber(`${p}-intronBp`, self.intronBp);
+                localStorageSetBoolean(`${p}-upperCaseCDS`, self.upperCaseCDS);
+                localStorageSetItem(`${p}-showCoordinatesSetting`, self.showCoordinatesSetting);
+            }, { name: 'SequenceFeatureLocalStorage' }));
+            addDisposer(self, autorun(function sequenceFeatureModeAutorun() {
+                self.setMode(self.hasCDS ? 'cds' : self.hasExon ? 'cdna' : 'genomic');
+            }, { name: 'SequenceFeatureMode' }));
+        },
+    }));
+}

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

@@ -0,0 +1,16 @@
+import type { SimpleFeatureSerialized } from '../../../util/index.ts';
+import type { Feat } from '../../util.tsx';
+import type { SequenceFeatureDetailsModel } from '../model.ts';
+declare const CDNASequence: ({ utr, cds, exons, sequence, upstream, downstream, feature, includeIntrons, collapseIntron, model, }: {
+    utr: Feat[];
+    cds: Feat[];
+    exons: Feat[];
+    sequence: string;
+    upstream?: string;
+    downstream?: string;
+    feature: SimpleFeatureSerialized;
+    includeIntrons?: boolean;
+    collapseIntron?: boolean;
+    model: SequenceFeatureDetailsModel;
+}) => import("react/jsx-runtime").JSX.Element;
+export default CDNASequence;

package/esm/BaseFeatureWidget/SequenceFeatureDetails/seqtypes/CDNASequence.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
+import { cdsColor, updownstreamColor, utrColor } from "../consts.js";
+import { splitString } from "../util.js";
+import SequenceDisplay from "./SequenceDisplay.js";
+const CDNASequence = observer(function CDNASequence({ utr, cds, exons, sequence, upstream, downstream, feature, includeIntrons, collapseIntron, model, }) {
+    const { upperCaseCDS, intronBp, charactersPerRow, showCoordinates, showCoordinatesSetting, } = model;
+    const hasCds = cds.length > 0;
+    const chunks = (cds.length ? [...cds, ...utr].sort((a, b) => a.start - b.start) : exons).filter(f => f.start !== f.end);
+    const toLower = (s) => (upperCaseCDS ? s.toLowerCase() : s);
+    const toUpper = (s) => (upperCaseCDS ? s.toUpperCase() : s);
+    const strand = feature.strand === -1 ? -1 : 1;
+    const fullGenomicCoordinates = showCoordinatesSetting === 'genomic' && includeIntrons && !collapseIntron;
+    const mult = fullGenomicCoordinates ? strand : 1;
+    let coordStart = fullGenomicCoordinates
+        ? strand > 0
+            ? feature.start + 1 - (upstream?.length || 0)
+            : feature.end + (upstream?.length || 0)
+        : 0;
+    let currStart = 0;
+    let currRemainder = 0;
+    let upstreamChunk = null;
+    if (upstream) {
+        const { segments, remainder } = splitString({
+            str: toLower(upstream),
+            charactersPerRow,
+            showCoordinates,
+        });
+        upstreamChunk = (_jsx(SequenceDisplay, { model: model, color: updownstreamColor, strand: mult, start: currStart, coordStart: coordStart, chunks: segments }));
+        currRemainder = remainder;
+        currStart = currStart + upstream.length * mult;
+        coordStart = coordStart + upstream.length * mult;
+    }
+    const middleChunks = [];
+    for (let idx = 0; idx < chunks.length; idx++) {
+        const chunk = chunks[idx];
+        const intron = sequence.slice(chunk.end, chunks[idx + 1]?.start);
+        const s = sequence.slice(chunk.start, chunk.end);
+        const { segments, remainder } = splitString({
+            str: hasCds
+                ? chunk.type === 'CDS'
+                    ? toUpper(s)
+                    : toLower(s)
+                : toUpper(s),
+            charactersPerRow,
+            currRemainder,
+            showCoordinates,
+        });
+        middleChunks.push(_jsx(SequenceDisplay, { model: model, color: chunk.type === 'CDS' ? cdsColor : utrColor, strand: mult, start: currStart, coordStart: coordStart, chunks: segments }, `${JSON.stringify(chunk)}-mid`));
+        currRemainder = remainder;
+        currStart = currStart + s.length * mult;
+        coordStart = coordStart + s.length * mult;
+        if (intron && includeIntrons && idx < chunks.length - 1) {
+            const str = toLower(collapseIntron && intron.length > intronBp * 2
+                ? `${intron.slice(0, intronBp)}...${intron.slice(-intronBp)}`
+                : intron);
+            const { segments, remainder } = splitString({
+                str,
+                charactersPerRow,
+                currRemainder,
+                showCoordinates,
+            });
+            if (segments.length) {
+                middleChunks.push(_jsx(SequenceDisplay, { model: model, strand: mult, coordStart: coordStart, start: currStart, chunks: segments }, `${JSON.stringify(chunk)}-intron`));
+                currRemainder = remainder;
+                currStart = currStart + str.length * mult;
+                coordStart = coordStart + str.length * mult;
+            }
+        }
+    }
+    let downstreamChunk = null;
+    if (downstream) {
+        const { segments } = splitString({
+            str: toLower(downstream),
+            charactersPerRow,
+            currRemainder,
+            showCoordinates,
+        });
+        downstreamChunk = (_jsx(SequenceDisplay, { start: currStart, model: model, strand: mult, chunks: segments, coordStart: coordStart, color: updownstreamColor }));
+    }
+    return (_jsxs(_Fragment, { children: [upstreamChunk, middleChunks, downstreamChunk] }));
+});
+export default CDNASequence;

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

@@ -0,0 +1,8 @@
+import type { Feat } from '../../util.tsx';
+import type { SequenceFeatureDetailsModel } from '../model.ts';
+declare const CDSSequence: ({ cds, sequence, model, }: {
+    cds: Feat[];
+    sequence: string;
+    model: SequenceFeatureDetailsModel;
+}) => import("react/jsx-runtime").JSX.Element;
+export default CDSSequence;

package/esm/BaseFeatureWidget/SequenceFeatureDetails/seqtypes/CDSSequence.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
+import { stitch } from "../../util.js";
+import { cdsColor } from "../consts.js";
+import { splitString } from "../util.js";
+import SequenceDisplay from "./SequenceDisplay.js";
+const CDSSequence = observer(function CDSSequence({ cds, sequence, model, }) {
+    const { charactersPerRow, showCoordinates } = model;
+    const { segments } = splitString({
+        str: stitch(cds, sequence),
+        charactersPerRow,
+        showCoordinates,
+    });
+    return (_jsx(SequenceDisplay, { model: model, color: cdsColor, chunks: segments, start: 0 }));
+});
+export default CDSSequence;

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

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