@jbrowse/core 2.11.2 → 2.12.0

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/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

@@ -5,27 +5,97 @@ 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,6 +103,10 @@ 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');
             }));
         },
     }));

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;

package/BaseFeatureWidget/SequenceFeatureDetails/seqtypes/GenomicSequence.js

@@ -4,11 +4,57 @@ 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");
-function GenomicSequence({ sequence, upstream, downstream, }) {
+const SequenceDisplay_1 = __importDefault(require("./SequenceDisplay"));
+const GenomicSequence = (0, mobx_react_1.observer)(function ({ sequence, upstream, feature, downstream, model, }) {
+    const { charactersPerRow, showCoordinatesSetting, showCoordinates } = model;
+    let currStart = 0;
+    let upstreamChunk = null;
+    let currRemainder = 0;
+    const strand = feature.strand === -1 ? -1 : 1;
+    const fullGenomicCoordinates = showCoordinatesSetting === 'genomic';
+    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;
+    if (upstream) {
+        const { segments, remainder } = (0, util_1.splitString)({
+            str: upstream,
+            charactersPerRow,
+            showCoordinates,
+        });
+        upstreamChunk = (react_1.default.createElement(SequenceDisplay_1.default, { model: model, color: util_1.updownstreamColor, start: currStart, coordStart: coordStart, chunks: segments }));
+        currRemainder = remainder;
+        currStart = currStart + upstream.length * mult;
+        coordStart = coordStart + upstream.length * mult;
+    }
+    const { segments, remainder } = (0, util_1.splitString)({
+        str: sequence,
+        charactersPerRow,
+        showCoordinates,
+        currRemainder,
+    });
+    const middleChunk = (react_1.default.createElement(SequenceDisplay_1.default, { model: model, color: util_1.genomeColor, start: currStart, coordStart: coordStart, chunks: segments }));
+    currRemainder = remainder;
+    currStart += sequence.length * mult;
+    coordStart = coordStart + sequence.length * mult;
+    let downstreamChunk = null;
+    if (downstream) {
+        const { segments } = (0, util_1.splitString)({
+            str: downstream,
+            charactersPerRow,
+            currRemainder,
+            showCoordinates,
+        });
+        downstreamChunk = (react_1.default.createElement(SequenceDisplay_1.default, { start: currStart, model: model, 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 } }, upstream)) : null,
-        react_1.default.createElement("span", { style: { background: util_1.genomeColor } }, sequence),
-        downstream ? (react_1.default.createElement("span", { style: { background: util_1.updownstreamColor } }, downstream)) : null));
-}
+        upstreamChunk,
+        middleChunk,
+        downstreamChunk));
+});
 exports.default = GenomicSequence;

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

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

package/BaseFeatureWidget/SequenceFeatureDetails/seqtypes/ProteinSequence.js

@@ -4,15 +4,24 @@ 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 ProteinSequence({ cds, sequence, codonTable, }) {
+const SequenceDisplay_1 = __importDefault(require("./SequenceDisplay"));
+const ProteinSequence = (0, mobx_react_1.observer)(function ({ cds, sequence, codonTable, model, }) {
+    const { charactersPerRow, showCoordinates } = model;
     const str = (0, util_1.stitch)(cds, sequence);
     let protein = '';
     for (let i = 0; i < str.length; i += 3) {
         // use & symbol for undefined codon, or partial slice
         protein += codonTable[str.slice(i, i + 3)] || '&';
     }
-    return react_1.default.createElement("span", { style: { background: util_2.proteinColor } }, protein);
-}
+    const { segments } = (0, util_2.splitString)({
+        str: protein,
+        charactersPerRow,
+        showCoordinates,
+    });
+    return (react_1.default.createElement(SequenceDisplay_1.default, { model: model, color: util_2.proteinColor, chunks: segments, start: 0 }));
+});
 exports.default = ProteinSequence;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { SequenceFeatureDetailsModel } from '../model';
+declare const SequenceDisplay: ({ chunks, start, color, strand, coordStart, model, }: {
+    chunks: string[];
+    start: number;
+    coordStart?: number;
+    strand?: number;
+    color?: string;
+    model: SequenceFeatureDetailsModel;
+}) => React.JSX.Element[];
+export default SequenceDisplay;

package/BaseFeatureWidget/SequenceFeatureDetails/seqtypes/SequenceDisplay.js

@@ -0,0 +1,30 @@
+"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 mobx_react_1 = require("mobx-react");
+const SequenceDisplay = (0, mobx_react_1.observer)(function ({ chunks, start, color, strand = 1, coordStart = start, model, }) {
+    const { charactersPerRow, showCoordinates } = model;
+    return chunks.map((chunk, idx) => {
+        var _a;
+        const f = coordStart - (start % charactersPerRow);
+        const prefix = (idx == 0 && start % charactersPerRow == 0) || idx > 0
+            ? `${f + idx * strand * charactersPerRow}`.padStart(4) + '   '
+            : '';
+        const postfix = idx === chunks.length - 1 &&
+            (((_a = chunks.at(-1)) === null || _a === void 0 ? void 0 : _a.replaceAll(' ', '').length) || 0) +
+                (idx === 0 ? start % charactersPerRow : 0) !==
+                charactersPerRow
+            ? null
+            : showCoordinates
+                ? ' \n'
+                : '';
+        return (react_1.default.createElement(react_1.default.Fragment, { key: `${chunk}-${idx}` },
+            showCoordinates ? prefix : null,
+            react_1.default.createElement("span", { style: { background: color } }, chunk),
+            postfix));
+    });
+});
+exports.default = SequenceDisplay;

package/BaseFeatureWidget/SequenceFeatureDetails/util.d.ts

@@ -4,3 +4,14 @@ 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)";
+export declare function splitString({ str, charactersPerRow, showCoordinates, currRemainder, splitSize, }: {
+    str: string;
+    charactersPerRow: number;
+    showCoordinates: boolean;
+    currRemainder?: number;
+    splitStart?: number;
+    splitSize?: number;
+}): {
+    segments: any[];
+    remainder: number;
+};

package/BaseFeatureWidget/SequenceFeatureDetails/util.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.genomeColor = exports.updownstreamColor = exports.cdsColor = exports.proteinColor = exports.utrColor = exports.intronColor = void 0;
+exports.splitString = exports.genomeColor = exports.updownstreamColor = exports.cdsColor = exports.proteinColor = exports.utrColor = exports.intronColor = void 0;
 // note that these are currently put into the style section instead of being
 // defined in classes to aid copy and paste to an external document e.g. word
 exports.intronColor = undefined;
@@ -9,3 +9,45 @@ exports.proteinColor = 'rgb(220,160,220)';
 exports.cdsColor = 'rgb(220,220,180)';
 exports.updownstreamColor = 'rgba(250,200,200)';
 exports.genomeColor = 'rgb(200,280,200)';
+function splitString({ str, charactersPerRow, showCoordinates, currRemainder = 0, splitSize = 10, }) {
+    var _a;
+    const numChunks = Math.ceil(str.length / charactersPerRow);
+    const chunks = new Array(numChunks);
+    let splitStart = currRemainder % 10;
+    let iter = 0;
+    let offset = 0;
+    for (; iter < numChunks + 1; ++iter) {
+        const inc = iter === 0 ? charactersPerRow - currRemainder : charactersPerRow;
+        const r = str.slice(offset, offset + inc);
+        if (!r) {
+            break;
+        }
+        if (showCoordinates) {
+            let res = '';
+            for (let i = 0, j = splitStart; i < r.length; i++, j++) {
+                // note: this adds a space at the start but it causes trouble to try to
+                // say e.g. j%splitSize==0 && j to try to only add non-zero spaces
+                if (j % splitSize === 0) {
+                    res += ' ';
+                    j = 0;
+                }
+                res += r[i];
+            }
+            if (res) {
+                chunks[iter] = res;
+            }
+        }
+        else {
+            chunks[iter] = r;
+        }
+        splitStart = 0; // after newline, reset
+        offset += inc;
+    }
+    return {
+        segments: chunks,
+        remainder: ((((_a = chunks.at(-1)) === null || _a === void 0 ? void 0 : _a.replaceAll(' ', '').length) || 0) +
+            (iter < 2 ? currRemainder : 0)) %
+            charactersPerRow,
+    };
+}
+exports.splitString = splitString;