@jbrowse/core 2.11.2 → 2.12.1

package/BaseFeatureWidget/SequenceFeatureDetails/dialogs/SequenceFeatureMenu.js

@@ -0,0 +1,126 @@
+"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 });
+const react_1 = __importStar(require("react"));
+const mobx_react_1 = require("mobx-react");
+const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
+const file_saver_1 = require("file-saver");
+// locals
+const CascadingMenuButton_1 = __importDefault(require("../../../ui/CascadingMenuButton"));
+// icons
+const MoreVert_1 = __importDefault(require("@mui/icons-material/MoreVert"));
+const Settings_1 = __importDefault(require("@mui/icons-material/Settings"));
+// lazies
+const SequenceFeatureSettingsDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./SettingsDialog'))));
+const SequenceFeatureMenu = (0, mobx_react_1.observer)(react_1.default.forwardRef(function SequenceFeatureMenu2({ model, extraItems = [] }, ref) {
+    if (typeof ref === 'function') {
+        throw new Error('needs a non function ref');
+    }
+    const [showSettings, setShowSettings] = (0, react_1.useState)(false);
+    const { showCoordinatesSetting, showGenomicCoordsOption } = model;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(CascadingMenuButton_1.default, { menuItems: [
+                {
+                    label: 'Copy plaintext',
+                    onClick: () => {
+                        const r = ref === null || ref === void 0 ? void 0 : ref.current;
+                        if (r) {
+                            (0, copy_to_clipboard_1.default)(r.textContent || '', { format: 'text/plain' });
+                        }
+                    },
+                },
+                {
+                    label: 'Copy HTML',
+                    onClick: () => {
+                        const r = ref === null || ref === void 0 ? void 0 : ref.current;
+                        if (r) {
+                            (0, copy_to_clipboard_1.default)(r.outerHTML, { format: 'text/html' });
+                        }
+                    },
+                },
+                {
+                    label: 'Download plaintext',
+                    onClick: () => {
+                        const r = ref === null || ref === void 0 ? void 0 : ref.current;
+                        if (r) {
+                            (0, file_saver_1.saveAs)(new Blob([r.textContent || ''], {
+                                type: 'text/plain;charset=utf-8',
+                            }), 'sequence.txt');
+                        }
+                    },
+                },
+                {
+                    label: 'Download HTML',
+                    onClick: () => {
+                        const r = ref === null || ref === void 0 ? void 0 : ref.current;
+                        if (r) {
+                            (0, file_saver_1.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_1.default,
+                    onClick: () => setShowSettings(true),
+                },
+            ] },
+            react_1.default.createElement(MoreVert_1.default, null)),
+        showSettings ? (react_1.default.createElement(SequenceFeatureSettingsDialog, { model: model, handleClose: () => setShowSettings(false) })) : null));
+}));
+exports.default = SequenceFeatureMenu;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { SequenceFeatureDetailsModel } from '../model';
+declare const SequenceTypeSelector: ({ model, }: {
+    model: SequenceFeatureDetailsModel;
+}) => React.JSX.Element;
+export default SequenceTypeSelector;

package/BaseFeatureWidget/SequenceFeatureDetails/dialogs/SequenceTypeSelector.js

@@ -0,0 +1,68 @@
+"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 material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+const mui_1 = require("tss-react/mui");
+const useStyles = (0, mui_1.makeStyles)()({
+    formControl: {
+        margin: 0,
+        marginLeft: 4,
+    },
+});
+const SequenceTypeSelector = (0, mobx_react_1.observer)(function ({ model, }) {
+    const { classes } = useStyles();
+    const { intronBp, upDownBp, mode, hasCDS, hasExonOrCDS } = model;
+    return (react_1.default.createElement(material_1.FormControl, { className: classes.formControl },
+        react_1.default.createElement(material_1.Select, { size: "small", value: mode, onChange: event => model.setMode(event.target.value) }, 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]) => (react_1.default.createElement(material_1.MenuItem, { key: key, value: key }, val))))));
+});
+exports.default = SequenceTypeSelector;

package/BaseFeatureWidget/SequenceFeatureDetails/dialogs/SettingsDialog.js

@@ -36,25 +36,34 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
     dialogContent: {
         width: '80em',
     },
+    root: {
+        padding: 4,
+    },
 }));
+function TextField2(props) {
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(material_1.TextField, { ...props })));
+}
+function FormControl2({ children }) {
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(material_1.FormControl, null, children)));
+}
 const SequenceFeatureSettingsDialog = (0, mobx_react_1.observer)(function ({ handleClose, model, }) {
     const { classes } = useStyles();
+    const { upperCaseCDS } = model;
     const [intronBp, setIntronBp] = (0, react_1.useState)(`${model.intronBp}`);
     const [upDownBp, setUpDownBp] = (0, react_1.useState)(`${model.upDownBp}`);
     const intronBpValid = !Number.isNaN(+intronBp);
     const upDownBpValid = !Number.isNaN(+upDownBp);
     return (react_1.default.createElement(ui_1.Dialog, { maxWidth: "xl", open: true, onClose: () => handleClose(), title: "Feature sequence settings" },
         react_1.default.createElement(material_1.DialogContent, { className: classes.dialogContent },
-            react_1.default.createElement("div", null,
-                react_1.default.createElement(material_1.TextField, { 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) })),
-            react_1.default.createElement("div", null,
-                react_1.default.createElement(material_1.TextField, { 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) })),
-            react_1.default.createElement("div", null,
-                react_1.default.createElement(material_1.FormControl, null,
-                    react_1.default.createElement(material_1.FormLabel, null, "Sequence capitalization"),
-                    react_1.default.createElement(material_1.RadioGroup, { value: model.upperCaseCDS ? 'cds' : 'unchanged', onChange: e => model.setUpperCaseCDS(e.target.value === 'cds') },
-                        react_1.default.createElement(material_1.FormControlLabel, { value: "cds", control: react_1.default.createElement(material_1.Radio, null), label: "Capitalize CDS and lower case everything else" }),
-                        react_1.default.createElement(material_1.FormControlLabel, { value: "unchanged", control: react_1.default.createElement(material_1.Radio, null), label: "Capitalization from reference genome sequence" }))))),
+            react_1.default.createElement(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) }),
+            react_1.default.createElement(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) }),
+            react_1.default.createElement(FormControl2, null,
+                react_1.default.createElement(material_1.FormLabel, null, "Sequence capitalization"),
+                react_1.default.createElement(material_1.RadioGroup, { value: upperCaseCDS ? 'cds' : 'unchanged', onChange: e => model.setUpperCaseCDS(e.target.value === 'cds') },
+                    react_1.default.createElement(material_1.FormControlLabel, { value: "cds", control: react_1.default.createElement(material_1.Radio, { className: classes.root, size: "small" }), label: "Capitalize CDS and lower case everything else" }),
+                    react_1.default.createElement(material_1.FormControlLabel, { value: "unchanged", control: react_1.default.createElement(material_1.Radio, { className: classes.root, size: "small" }), label: "Capitalization from reference genome sequence" })))),
         react_1.default.createElement(material_1.DialogActions, null,
             react_1.default.createElement(material_1.Button, { onClick: () => {
                     model.setIntronBp(+intronBp);

package/BaseFeatureWidget/SequenceFeatureDetails/hooks.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFeatureSequence = void 0;
+exports.useFeatureSequence = useFeatureSequence;
 const react_1 = require("react");
 const util_1 = require("../../util");
 const configuration_1 = require("../../configuration");
@@ -64,4 +64,3 @@ function useFeatureSequence(model, feature, upDownBp, forceLoad) {
     }, [feature, model, upDownBp, forceLoad]);
     return { sequence, error };
 }
-exports.useFeatureSequence = useFeatureSequence;

package/BaseFeatureWidget/SequenceFeatureDetails/model.d.ts

@@ -1,12 +1,59 @@
 import { Instance } from 'mobx-state-tree';
+import { SimpleFeatureSerialized } from '../../util';
 export declare function SequenceFeatureDetailsF(): import("mobx-state-tree").IModelType<{}, {
+    showCoordinatesSetting: string;
     intronBp: number;
     upDownBp: number;
     upperCaseCDS: boolean;
+    charactersPerRow: number;
+    feature: SimpleFeatureSerialized | undefined;
+    mode: string;
 } & {
+    /**
+     * #action
+     */
+    setFeature(f: SimpleFeatureSerialized): void;
+    /**
+     * #action
+     */
     setUpDownBp(f: number): void;
+    /**
+     * #action
+     */
     setIntronBp(f: number): void;
+    /**
+     * #action
+     */
     setUpperCaseCDS(f: boolean): void;
+    /**
+     * #action
+     */
+    setShowCoordinates(f: "none" | "relative" | "genomic"): void;
+    /**
+     * #action
+     */
+    setMode(mode: string): void;
+} & {
+    /**
+     * #getter
+     */
+    readonly showCoordinates: boolean;
+    /**
+     * #getter
+     */
+    readonly showGenomicCoordsOption: boolean;
+    /**
+     * #getter
+     */
+    readonly hasCDS: boolean | undefined;
+    /**
+     * #getter
+     */
+    readonly hasExon: boolean | undefined;
+    /**
+     * #getter
+     */
+    readonly hasExonOrCDS: boolean | undefined;
 } & {
     afterAttach(): void;
 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;

package/BaseFeatureWidget/SequenceFeatureDetails/model.js

@@ -1,31 +1,101 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SequenceFeatureDetailsF = void 0;
+exports.SequenceFeatureDetailsF = SequenceFeatureDetailsF;
 const mobx_state_tree_1 = require("mobx-state-tree");
 const mobx_1 = require("mobx");
 // locals
 const util_1 = require("../../util");
+function localStorageGetNumber(key, defaultVal) {
+    var _a;
+    return +((_a = (0, util_1.localStorageGetItem)(key)) !== null && _a !== void 0 ? _a : defaultVal);
+}
 function SequenceFeatureDetailsF() {
     return mobx_state_tree_1.types
-        .model('SequenceFeatureDetails', {})
-        .volatile(() => {
-        var _a, _b;
-        return ({
-            intronBp: +((_a = (0, util_1.localStorageGetItem)('sequenceFeatureDetails-intronBp')) !== null && _a !== void 0 ? _a : 10),
-            upDownBp: +((_b = (0, util_1.localStorageGetItem)('sequenceFeatureDetails-upDownBp')) !== null && _b !== void 0 ? _b : 100),
-            upperCaseCDS: Boolean(JSON.parse((0, util_1.localStorageGetItem)('sequenceFeatureDetails-upperCaseCDS') || 'true')),
-        });
-    })
+        .model('SequenceFeatureDetails')
+        .volatile(() => ({
+        showCoordinatesSetting: (0, util_1.localStorageGetItem)('sequenceFeatureDetails-showCoordinatesSetting') ||
+            'none',
+        intronBp: localStorageGetNumber('sequenceFeatureDetails-intronBp', 10),
+        upDownBp: localStorageGetNumber('sequenceFeatureDetails-upDownBp', 100),
+        upperCaseCDS: Boolean(JSON.parse((0, util_1.localStorageGetItem)('sequenceFeatureDetails-upperCaseCDS') || 'true')),
+        charactersPerRow: 100,
+        feature: undefined,
+        mode: '',
+    }))
         .actions(self => ({
+        /**
+         * #action
+         */
+        setFeature(f) {
+            self.feature = f;
+        },
+        /**
+         * #action
+         */
         setUpDownBp(f) {
             self.upDownBp = f;
         },
+        /**
+         * #action
+         */
         setIntronBp(f) {
             self.intronBp = f;
         },
+        /**
+         * #action
+         */
         setUpperCaseCDS(f) {
             self.upperCaseCDS = f;
         },
+        /**
+         * #action
+         */
+        setShowCoordinates(f) {
+            self.showCoordinatesSetting = f;
+        },
+        /**
+         * #action
+         */
+        setMode(mode) {
+            self.mode = mode;
+        },
+    }))
+        .views(self => ({
+        /**
+         * #getter
+         */
+        get showCoordinates() {
+            return self.showCoordinatesSetting !== 'none';
+        },
+        /**
+         * #getter
+         */
+        get showGenomicCoordsOption() {
+            return (self.mode === 'gene' ||
+                self.mode === 'gene_updownstream' ||
+                self.mode === 'genomic' ||
+                self.mode === 'genomic_sequence_updownstream');
+        },
+        /**
+         * #getter
+         */
+        get hasCDS() {
+            var _a, _b;
+            return (_b = (_a = self.feature) === null || _a === void 0 ? void 0 : _a.subfeatures) === null || _b === void 0 ? void 0 : _b.some(sub => sub.type === 'CDS');
+        },
+        /**
+         * #getter
+         */
+        get hasExon() {
+            var _a, _b;
+            return (_b = (_a = self.feature) === null || _a === void 0 ? void 0 : _a.subfeatures) === null || _b === void 0 ? void 0 : _b.some(sub => sub.type === 'exon');
+        },
+        /**
+         * #getter
+         */
+        get hasExonOrCDS() {
+            return this.hasExon || this.hasCDS;
+        },
     }))
         .actions(self => ({
         afterAttach() {
@@ -33,8 +103,11 @@ function SequenceFeatureDetailsF() {
                 (0, util_1.localStorageSetItem)('sequenceFeatureDetails-upDownBp', JSON.stringify(self.upDownBp));
                 (0, util_1.localStorageSetItem)('sequenceFeatureDetails-intronBp', JSON.stringify(self.intronBp));
                 (0, util_1.localStorageSetItem)('sequenceFeatureDetails-upperCaseCDS', JSON.stringify(self.upperCaseCDS));
+                (0, util_1.localStorageSetItem)('sequenceFeatureDetails-showCoordinatesSetting', self.showCoordinatesSetting);
+            }));
+            (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => {
+                self.setMode(self.hasCDS ? 'cds' : self.hasExon ? 'cdna' : 'genomic');
             }));
         },
     }));
 }
-exports.SequenceFeatureDetailsF = SequenceFeatureDetailsF;

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

@@ -1,13 +1,15 @@
 import React from 'react';
 import { Feat } from '../../util';
 import { SequenceFeatureDetailsModel } from '../model';
-declare const CDNASequence: ({ utr, cds, exons, sequence, upstream, downstream, includeIntrons, collapseIntron, model, }: {
+import { SimpleFeatureSerialized } from '../../../util';
+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;

package/BaseFeatureWidget/SequenceFeatureDetails/seqtypes/CDNASequence.js

@@ -6,29 +6,86 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const mobx_react_1 = require("mobx-react");
 const util_1 = require("../util");
-const CDNASequence = (0, mobx_react_1.observer)(function ({ utr, cds, exons, sequence, upstream, downstream, includeIntrons, collapseIntron, model, }) {
-    const { upperCaseCDS, intronBp } = model;
+const SequenceDisplay_1 = __importDefault(require("./SequenceDisplay"));
+const CDNASequence = (0, mobx_react_1.observer)(function ({ utr, cds, exons, sequence, upstream, downstream, feature, includeIntrons, collapseIntron, model, }) {
+    var _a;
+    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 === null || upstream === void 0 ? void 0 : upstream.length) || 0)
+            : feature.end + ((upstream === null || upstream === void 0 ? void 0 : upstream.length) || 0)
+        : 0;
+    let currStart = 0;
+    let currRemainder = 0;
+    let upstreamChunk = null;
+    if (upstream) {
+        const { segments, remainder } = (0, util_1.splitString)({
+            str: toLower(upstream),
+            charactersPerRow,
+            showCoordinates,
+        });
+        upstreamChunk = (react_1.default.createElement(SequenceDisplay_1.default, { model: model, color: util_1.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, (_a = chunks[idx + 1]) === null || _a === void 0 ? void 0 : _a.start);
+        const s = sequence.slice(chunk.start, chunk.end);
+        const { segments, remainder } = (0, util_1.splitString)({
+            str: hasCds
+                ? chunk.type === 'CDS'
+                    ? toUpper(s)
+                    : toLower(s)
+                : toUpper(s),
+            charactersPerRow,
+            currRemainder,
+            showCoordinates,
+        });
+        middleChunks.push(react_1.default.createElement(SequenceDisplay_1.default, { key: JSON.stringify(chunk) + '-mid', model: model, color: chunk.type === 'CDS' ? util_1.cdsColor : util_1.utrColor, strand: mult, start: currStart, coordStart: coordStart, chunks: segments }));
+        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 } = (0, util_1.splitString)({
+                str,
+                charactersPerRow,
+                currRemainder,
+                showCoordinates,
+            });
+            if (segments.length) {
+                middleChunks.push(react_1.default.createElement(SequenceDisplay_1.default, { key: JSON.stringify(chunk) + '-intron', model: model, strand: mult, coordStart: coordStart, start: currStart, chunks: segments }));
+                currRemainder = remainder;
+                currStart = currStart + str.length * mult;
+                coordStart = coordStart + str.length * mult;
+            }
+        }
+    }
+    let downstreamChunk = null;
+    if (downstream) {
+        const { segments } = (0, util_1.splitString)({
+            str: toLower(downstream),
+            charactersPerRow,
+            currRemainder,
+            showCoordinates,
+        });
+        downstreamChunk = (react_1.default.createElement(SequenceDisplay_1.default, { start: currStart, model: model, strand: mult, chunks: segments, coordStart: coordStart, color: util_1.updownstreamColor }));
+    }
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        upstream ? (react_1.default.createElement("span", { style: { background: util_1.updownstreamColor } }, toLower(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,
-                    } }, hasCds
-                    ? chunk.type === 'CDS'
-                        ? toUpper(sequence.slice(chunk.start, chunk.end))
-                        : toLower(sequence.slice(chunk.start, chunk.end))
-                    : toUpper(sequence.slice(chunk.start, chunk.end))),
-                includeIntrons && idx < chunks.length - 1 ? (react_1.default.createElement("span", { style: { background: util_1.intronColor } }, toLower(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 } }, toLower(downstream))) : null));
+        upstreamChunk,
+        middleChunks,
+        downstreamChunk));
 });
 exports.default = CDNASequence;

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

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

package/BaseFeatureWidget/SequenceFeatureDetails/seqtypes/CDSSequence.js

@@ -4,9 +4,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
+const mobx_react_1 = require("mobx-react");
+// locals
 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));
-}
+const SequenceDisplay_1 = __importDefault(require("./SequenceDisplay"));
+const CDSSequence = (0, mobx_react_1.observer)(function ({ cds, sequence, model, }) {
+    const { charactersPerRow, showCoordinates } = model;
+    const { segments } = (0, util_1.splitString)({
+        str: (0, util_2.stitch)(cds, sequence),
+        charactersPerRow,
+        showCoordinates,
+    });
+    return (react_1.default.createElement(SequenceDisplay_1.default, { model: model, color: util_1.cdsColor, chunks: segments, start: 0 }));
+});
 exports.default = CDSSequence;

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

@@ -1,6 +1,11 @@
 import React from 'react';
-export default function GenomicSequence({ sequence, upstream, downstream, }: {
+import { SequenceFeatureDetailsModel } from '../model';
+import { SimpleFeatureSerialized } from '../../../util';
+declare const GenomicSequence: ({ sequence, upstream, feature, downstream, model, }: {
     sequence: string;
+    feature: SimpleFeatureSerialized;
     upstream?: string;
     downstream?: string;
-}): React.JSX.Element;
+    model: SequenceFeatureDetailsModel;
+}) => React.JSX.Element;
+export default GenomicSequence;