@jbrowse/core 3.6.4 → 3.7.0

package/BaseFeatureWidget/BaseFeatureDetail/CoreDetails.js

@@ -26,5 +26,5 @@ function CoreDetails(props) {
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SimpleField_1.default, { name: "Position", value: (0, jsx_runtime_1.jsx)(Position_1.default, { ...props, feature: formattedFeat }) }), Object.entries(coreRenderedDetails)
                 .map(([key, name]) => [name, displayedDetails[key]])
                 .filter(([, value]) => value != null)
-                .map(([name, value]) => ((0, jsx_runtime_1.jsx)(SimpleField_1.default, { name: name, value: value }, name)))] }));
+                .map(([name, value]) => ((0, jsx_runtime_1.jsx)(SimpleField_1.default, { name: name, value: Array.isArray(value) ? value.join(', ') : value }, name)))] }));
 }

package/BaseFeatureWidget/SequenceFeatureDetails/SequenceContents.d.ts

@@ -6,5 +6,5 @@ declare const SequenceContents: ({ mode, feature, sequence, model, }: {
     feature: SimpleFeatureSerialized;
     sequence: SeqState;
     model: SequenceFeatureDetailsModel;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default SequenceContents;

package/BaseFeatureWidget/SequenceFeatureDetails/SequenceContents.js

@@ -6,43 +6,41 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const mobx_react_1 = require("mobx-react");
 const util_1 = require("../../util");
-const util_2 = require("../util");
 const CDNASequence_1 = __importDefault(require("./seqtypes/CDNASequence"));
 const CDSSequence_1 = __importDefault(require("./seqtypes/CDSSequence"));
 const GenomicSequence_1 = __importDefault(require("./seqtypes/GenomicSequence"));
 const ProteinSequence_1 = __importDefault(require("./seqtypes/ProteinSequence"));
-const SequenceContents = (0, mobx_react_1.observer)(function ({ mode, feature, sequence, model, }) {
-    var _a;
-    let { seq, upstream = '', downstream = '' } = sequence;
-    const children = ((_a = feature.subfeatures) === null || _a === void 0 ? void 0 : _a.sort((a, b) => a.start - b.start).map(sub => ({
-        ...sub,
-        start: sub.start - feature.start,
-        end: sub.end - feature.start,
-    }))) || [];
-    let cds = (0, util_2.dedupe)(children.filter(sub => sub.type === 'CDS'));
-    let utr = (0, util_2.dedupe)(children.filter(sub => { var _a; return (_a = sub.type) === null || _a === void 0 ? void 0 : _a.match(/utr/i); }));
-    let exons = (0, util_2.dedupe)(children.filter(sub => sub.type === 'exon'));
-    if (!utr.length && cds.length && exons.length) {
-        utr = (0, util_2.calculateUTRs)(cds, exons);
-    }
-    if (!utr.length && cds.length && !exons.length) {
-        utr = (0, util_2.calculateUTRs2)(cds, {
-            start: 0,
-            end: feature.end - feature.start,
-            type: 'gene',
-        });
+const useSequenceData_1 = require("./useSequenceData");
+function RenderedSequenceComponent({ mode, feature, model, sequenceData, }) {
+    const { seq, upstream, downstream, cds, exons, utr } = sequenceData;
+    switch (mode) {
+        case 'genomic':
+            return (0, jsx_runtime_1.jsx)(GenomicSequence_1.default, { feature: feature, model: model, sequence: seq });
+        case 'genomic_sequence_updownstream':
+            return ((0, jsx_runtime_1.jsx)(GenomicSequence_1.default, { model: model, feature: feature, sequence: seq, upstream: upstream, downstream: downstream }));
+        case 'cds':
+            return (0, jsx_runtime_1.jsx)(CDSSequence_1.default, { model: model, cds: cds, sequence: seq });
+        case 'cdna':
+            return ((0, jsx_runtime_1.jsx)(CDNASequence_1.default, { model: model, exons: exons, feature: feature, cds: cds, utr: utr, sequence: seq }));
+        case 'protein':
+            return ((0, jsx_runtime_1.jsx)(ProteinSequence_1.default, { model: model, cds: cds, codonTable: (0, util_1.generateCodonTable)(util_1.defaultCodonTable), sequence: seq }));
+        case 'gene':
+            return ((0, jsx_runtime_1.jsx)(CDNASequence_1.default, { model: model, exons: exons, feature: feature, cds: cds, utr: utr, sequence: seq, includeIntrons: true }));
+        case 'gene_collapsed_intron':
+            return ((0, jsx_runtime_1.jsx)(CDNASequence_1.default, { model: model, exons: exons, feature: feature, cds: cds, sequence: seq, utr: utr, includeIntrons: true, collapseIntron: true }));
+        case 'gene_updownstream':
+            return ((0, jsx_runtime_1.jsx)(CDNASequence_1.default, { model: model, exons: exons, feature: feature, cds: cds, sequence: seq, utr: utr, upstream: upstream, downstream: downstream, includeIntrons: true }));
+        case 'gene_updownstream_collapsed_intron':
+            return ((0, jsx_runtime_1.jsx)(CDNASequence_1.default, { model: model, exons: exons, feature: feature, cds: cds, sequence: seq, utr: utr, upstream: upstream, downstream: downstream, includeIntrons: true, collapseIntron: true }));
+        default:
+            return (0, jsx_runtime_1.jsx)("div", { children: "Unknown type" });
     }
-    if (feature.strand === -1) {
-        ;
-        [seq, upstream, downstream] = [
-            (0, util_1.revcom)(seq),
-            (0, util_1.revcom)(downstream),
-            (0, util_1.revcom)(upstream),
-        ];
-        cds = (0, util_2.revlist)(cds, seq.length);
-        exons = (0, util_2.revlist)(exons, seq.length);
-        utr = (0, util_2.revlist)(utr, seq.length);
-    }
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: mode === 'genomic' ? ((0, jsx_runtime_1.jsx)(GenomicSequence_1.default, { feature: feature, model: model, sequence: seq })) : mode === 'genomic_sequence_updownstream' ? ((0, jsx_runtime_1.jsx)(GenomicSequence_1.default, { model: model, feature: feature, sequence: seq, upstream: upstream, downstream: downstream })) : mode === 'cds' ? ((0, jsx_runtime_1.jsx)(CDSSequence_1.default, { model: model, cds: cds, sequence: seq })) : mode === 'cdna' ? ((0, jsx_runtime_1.jsx)(CDNASequence_1.default, { model: model, exons: exons, feature: feature, cds: cds, utr: utr, sequence: seq })) : mode === 'protein' ? ((0, jsx_runtime_1.jsx)(ProteinSequence_1.default, { model: model, cds: cds, codonTable: (0, util_1.generateCodonTable)(util_1.defaultCodonTable), sequence: seq })) : mode === 'gene' ? ((0, jsx_runtime_1.jsx)(CDNASequence_1.default, { model: model, exons: exons, feature: feature, cds: cds, utr: utr, sequence: seq, includeIntrons: true })) : mode === 'gene_collapsed_intron' ? ((0, jsx_runtime_1.jsx)(CDNASequence_1.default, { model: model, exons: exons, feature: feature, cds: cds, sequence: seq, utr: utr, includeIntrons: true, collapseIntron: true })) : mode === 'gene_updownstream' ? ((0, jsx_runtime_1.jsx)(CDNASequence_1.default, { model: model, exons: exons, feature: feature, cds: cds, sequence: seq, utr: utr, upstream: upstream, downstream: downstream, includeIntrons: true })) : mode === 'gene_updownstream_collapsed_intron' ? ((0, jsx_runtime_1.jsx)(CDNASequence_1.default, { model: model, exons: exons, feature: feature, cds: cds, sequence: seq, utr: utr, upstream: upstream, downstream: downstream, includeIntrons: true, collapseIntron: true })) : ((0, jsx_runtime_1.jsx)("div", { children: "Unknown type" })) }));
+}
+const SequenceContents = (0, mobx_react_1.observer)(function ({ mode, feature, sequence, model, }) {
+    const sequenceData = (0, useSequenceData_1.useSequenceData)({
+        feature,
+        sequence,
+    });
+    return sequenceData ? ((0, jsx_runtime_1.jsx)(RenderedSequenceComponent, { mode: mode, feature: feature, model: model, sequenceData: sequenceData })) : null;
 });
 exports.default = SequenceContents;

package/BaseFeatureWidget/SequenceFeatureDetails/SequenceFeatureDetails.js

@@ -40,19 +40,29 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
-const hooks_1 = require("./hooks");
 const ui_1 = require("../../ui");
 const SequenceFeatureMenu_1 = __importDefault(require("./dialogs/SequenceFeatureMenu"));
 const SequenceTypeSelector_1 = __importDefault(require("./dialogs/SequenceTypeSelector"));
+const util_1 = require("../../util");
+const useFeatureSequence_1 = require("../../util/useFeatureSequence");
 const SequencePanel = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./SequencePanel'))));
 const SequenceDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./dialogs/SequenceDialog'))));
 const SequenceFeatureDetails = (0, mobx_react_1.observer)(function ({ model, feature, }) {
+    var _a, _b;
     const { sequenceFeatureDetails } = model;
     const { upDownBp } = sequenceFeatureDetails;
     const seqPanelRef = (0, react_1.useRef)(null);
     const [openInDialog, setOpenInDialog] = (0, react_1.useState)(false);
-    const [force, setForce] = (0, react_1.useState)(false);
-    const { sequence, error } = (0, hooks_1.useFeatureSequence)(model, feature, upDownBp, force);
+    const [forceLoad, setForceLoad] = (0, react_1.useState)(false);
+    const session = (0, util_1.getSession)(model);
+    const assemblyName = (_b = (_a = model.view) === null || _a === void 0 ? void 0 : _a.assemblyNames) === null || _b === void 0 ? void 0 : _b[0];
+    const { sequence, error } = (0, useFeatureSequence_1.useFeatureSequence)({
+        assemblyName,
+        session,
+        feature: new util_1.SimpleFeature(feature),
+        upDownBp,
+        forceLoad,
+    });
     (0, react_1.useEffect)(() => {
         sequenceFeatureDetails.setFeature(feature);
     }, [sequenceFeatureDetails, feature]);
@@ -60,15 +70,13 @@ const SequenceFeatureDetails = (0, mobx_react_1.observer)(function ({ model, fea
                             {
                                 label: 'Open in dialog',
                                 onClick: () => {
-                                    setTimeout(() => {
-                                        setOpenInDialog(true);
-                                    }, 1);
+                                    setOpenInDialog(true);
                                 },
                             },
                         ] })] }), openInDialog ? ((0, jsx_runtime_1.jsxs)("div", { children: ["Open in dialog...", (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(ui_1.LoadingEllipses, {}), children: (0, jsx_runtime_1.jsx)(SequenceDialog, { model: model, feature: feature, handleClose: () => {
                                 setOpenInDialog(false);
                             } }) })] })) : ((0, jsx_runtime_1.jsxs)("div", { children: [feature.type === 'gene' ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Note: inspect subfeature sequences for protein/CDS computations" })) : null, error ? ((0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: error })) : !sequence ? ((0, jsx_runtime_1.jsx)(ui_1.LoadingEllipses, {})) : 'error' in sequence ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { color: "error", children: sequence.error }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "inherit", onClick: () => {
-                                    setForce(true);
+                                    setForceLoad(true);
                                 }, children: "Force load" })] })) : ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(ui_1.LoadingEllipses, {}), children: (0, jsx_runtime_1.jsx)(SequencePanel, { ref: seqPanelRef, feature: feature, sequence: sequence, model: sequenceFeatureDetails }) }))] }))] }));
 });
 exports.default = SequenceFeatureDetails;

package/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/BaseFeatureWidget/SequenceFeatureDetails/consts.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.genomeColor = exports.updownstreamColor = exports.cdsColor = exports.proteinColor = exports.utrColor = exports.intronColor = void 0;
+exports.intronColor = undefined;
+exports.utrColor = 'rgb(200,240,240)';
+exports.proteinColor = 'rgb(220,160,220)';
+exports.cdsColor = 'rgb(220,220,180)';
+exports.updownstreamColor = 'rgba(250,200,200)';
+exports.genomeColor = 'rgb(200,280,200)';

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

@@ -1,4 +1,4 @@
-import type { SimpleFeatureSerialized } from '../../../util';
+import { type SimpleFeatureSerialized } from '../../../util';
 import type { BaseFeatureWidgetModel } from '../../stateModelFactory';
 declare const SequenceDialog: ({ handleClose, model, feature, }: {
     handleClose: () => void;

package/BaseFeatureWidget/SequenceFeatureDetails/dialogs/SequenceDialog.js

@@ -9,10 +9,11 @@ const ui_1 = require("@jbrowse/core/ui");
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
 const mui_1 = require("tss-react/mui");
-const SequencePanel_1 = __importDefault(require("../SequencePanel"));
-const hooks_1 = require("../hooks");
 const SequenceFeatureMenu_1 = __importDefault(require("./SequenceFeatureMenu"));
 const SequenceTypeSelector_1 = __importDefault(require("./SequenceTypeSelector"));
+const util_1 = require("../../../util");
+const useFeatureSequence_1 = require("../../../util/useFeatureSequence");
+const SequencePanel_1 = __importDefault(require("../SequencePanel"));
 const useStyles = (0, mui_1.makeStyles)()({
     dialogContent: {
         width: '80em',
@@ -23,16 +24,25 @@ const useStyles = (0, mui_1.makeStyles)()({
     },
 });
 const SequenceDialog = (0, mobx_react_1.observer)(function ({ handleClose, model, feature, }) {
+    var _a, _b;
     const { sequenceFeatureDetails } = model;
     const { upDownBp } = sequenceFeatureDetails;
     const { classes } = useStyles();
     const seqPanelRef = (0, react_1.useRef)(null);
-    const [force, setForce] = (0, react_1.useState)(false);
-    const { sequence, error } = (0, hooks_1.useFeatureSequence)(model, feature, upDownBp, force);
-    return ((0, jsx_runtime_1.jsxs)(ui_1.Dialog, { maxWidth: "xl", open: true, onClose: () => {
+    const [forceLoad, setForceLoad] = (0, react_1.useState)(false);
+    const session = (0, util_1.getSession)(model);
+    const assemblyName = (_b = (_a = model.view) === null || _a === void 0 ? void 0 : _a.assemblyNames) === null || _b === void 0 ? void 0 : _b[0];
+    const { sequence, error } = (0, useFeatureSequence_1.useFeatureSequence)({
+        assemblyName,
+        session,
+        feature: new util_1.SimpleFeature(feature),
+        upDownBp,
+        forceLoad,
+    });
+    return ((0, jsx_runtime_1.jsxs)(ui_1.Dialog, { maxWidth: "xl", open: true, title: "Sequence view", onClose: () => {
             handleClose();
-        }, title: "Sequence view", children: [(0, jsx_runtime_1.jsxs)(material_1.DialogContent, { className: classes.dialogContent, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(SequenceTypeSelector_1.default, { model: sequenceFeatureDetails }), (0, jsx_runtime_1.jsx)(SequenceFeatureMenu_1.default, { ref: seqPanelRef, model: sequenceFeatureDetails })] }), (0, jsx_runtime_1.jsxs)("div", { children: [feature.type === 'gene' ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Note: inspect subfeature sequences for protein/CDS computations" })) : null, error ? ((0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: error })) : !sequence ? ((0, jsx_runtime_1.jsx)(ui_1.LoadingEllipses, {})) : 'error' in sequence ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { color: "error", children: sequence.error }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "inherit", onClick: () => {
-                                            setForce(true);
+        }, children: [(0, jsx_runtime_1.jsxs)(material_1.DialogContent, { className: classes.dialogContent, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(SequenceTypeSelector_1.default, { model: sequenceFeatureDetails }), (0, jsx_runtime_1.jsx)(SequenceFeatureMenu_1.default, { ref: seqPanelRef, model: sequenceFeatureDetails })] }), (0, jsx_runtime_1.jsxs)("div", { children: [feature.type === 'gene' ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Note: inspect subfeature sequences for protein/CDS computations" })) : null, error ? ((0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: error })) : !sequence ? ((0, jsx_runtime_1.jsx)(ui_1.LoadingEllipses, {})) : 'error' in sequence ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { color: "error", children: sequence.error }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "inherit", onClick: () => {
+                                            setForceLoad(true);
                                         }, children: "Force load" })] })) : ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(ui_1.LoadingEllipses, {}), children: (0, jsx_runtime_1.jsx)(SequencePanel_1.default, { ref: seqPanelRef, feature: feature, sequence: sequence, model: sequenceFeatureDetails }) }))] })] }), (0, jsx_runtime_1.jsx)(material_1.DialogActions, { children: (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => {
                         handleClose();
                     }, variant: "contained", children: "Close" }) })] }));

package/BaseFeatureWidget/SequenceFeatureDetails/model.d.ts

@@ -1,5 +1,7 @@
 import type { SimpleFeatureSerialized } from '../../util';
 import type { Instance } from '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("mobx-state-tree").IModelType<{}, {
     showCoordinatesSetting: string;
     intronBp: number;
@@ -7,14 +9,14 @@ export declare function SequenceFeatureDetailsF(): import("mobx-state-tree").IMo
     upperCaseCDS: boolean;
     charactersPerRow: number;
     feature: SimpleFeatureSerialized | undefined;
-    mode: string;
+    mode: SequenceDisplayMode;
 } & {
     setFeature(f: SimpleFeatureSerialized): void;
     setUpDownBp(f: number): void;
     setIntronBp(f: number): void;
     setUpperCaseCDS(f: boolean): void;
-    setShowCoordinates(f: "none" | "relative" | "genomic"): void;
-    setMode(mode: string): void;
+    setShowCoordinates(f: ShowCoordinatesMode): void;
+    setMode(mode: SequenceDisplayMode): void;
 } & {
     readonly showCoordinates: boolean;
     readonly showGenomicCoordsOption: boolean;
@@ -26,3 +28,4 @@ export declare function SequenceFeatureDetailsF(): import("mobx-state-tree").IMo
 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
 export type SequenceFeatureDetailsStateModel = ReturnType<typeof SequenceFeatureDetailsF>;
 export type SequenceFeatureDetailsModel = Instance<SequenceFeatureDetailsStateModel>;
+export {};

package/BaseFeatureWidget/SequenceFeatureDetails/model.js

@@ -55,7 +55,7 @@ function SequenceFeatureDetailsF() {
         },
         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');
+            return (_b = (_a = self.feature) === null || _a === void 0 ? void 0 : _a.subfeatures) === null || _b === void 0 ? void 0 : _b.some(sub => { var _a; return ((_a = sub.type) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'cds'; });
         },
         get hasExon() {
             var _a, _b;

package/BaseFeatureWidget/SequenceFeatureDetails/seqtypes/CDNASequence.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const mobx_react_1 = require("mobx-react");
+const consts_1 = require("../consts");
 const util_1 = require("../util");
 const SequenceDisplay_1 = __importDefault(require("./SequenceDisplay"));
 const CDNASequence = (0, mobx_react_1.observer)(function ({ utr, cds, exons, sequence, upstream, downstream, feature, includeIntrons, collapseIntron, model, }) {
@@ -31,7 +32,7 @@ const CDNASequence = (0, mobx_react_1.observer)(function ({ utr, cds, exons, seq
             charactersPerRow,
             showCoordinates,
         });
-        upstreamChunk = ((0, jsx_runtime_1.jsx)(SequenceDisplay_1.default, { model: model, color: util_1.updownstreamColor, strand: mult, start: currStart, coordStart: coordStart, chunks: segments }));
+        upstreamChunk = ((0, jsx_runtime_1.jsx)(SequenceDisplay_1.default, { model: model, color: consts_1.updownstreamColor, strand: mult, start: currStart, coordStart: coordStart, chunks: segments }));
         currRemainder = remainder;
         currStart = currStart + upstream.length * mult;
         coordStart = coordStart + upstream.length * mult;
@@ -51,7 +52,7 @@ const CDNASequence = (0, mobx_react_1.observer)(function ({ utr, cds, exons, seq
             currRemainder,
             showCoordinates,
         });
-        middleChunks.push((0, jsx_runtime_1.jsx)(SequenceDisplay_1.default, { model: model, color: chunk.type === 'CDS' ? util_1.cdsColor : util_1.utrColor, strand: mult, start: currStart, coordStart: coordStart, chunks: segments }, `${JSON.stringify(chunk)}-mid`));
+        middleChunks.push((0, jsx_runtime_1.jsx)(SequenceDisplay_1.default, { model: model, color: chunk.type === 'CDS' ? consts_1.cdsColor : consts_1.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;
@@ -81,7 +82,7 @@ const CDNASequence = (0, mobx_react_1.observer)(function ({ utr, cds, exons, seq
             currRemainder,
             showCoordinates,
         });
-        downstreamChunk = ((0, jsx_runtime_1.jsx)(SequenceDisplay_1.default, { start: currStart, model: model, strand: mult, chunks: segments, coordStart: coordStart, color: util_1.updownstreamColor }));
+        downstreamChunk = ((0, jsx_runtime_1.jsx)(SequenceDisplay_1.default, { start: currStart, model: model, strand: mult, chunks: segments, coordStart: coordStart, color: consts_1.updownstreamColor }));
     }
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [upstreamChunk, middleChunks, downstreamChunk] }));
 });

package/BaseFeatureWidget/SequenceFeatureDetails/seqtypes/CDSSequence.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const mobx_react_1 = require("mobx-react");
 const util_1 = require("../../util");
+const consts_1 = require("../consts");
 const util_2 = require("../util");
 const SequenceDisplay_1 = __importDefault(require("./SequenceDisplay"));
 const CDSSequence = (0, mobx_react_1.observer)(function ({ cds, sequence, model, }) {
@@ -15,6 +16,6 @@ const CDSSequence = (0, mobx_react_1.observer)(function ({ cds, sequence, model,
         charactersPerRow,
         showCoordinates,
     });
-    return ((0, jsx_runtime_1.jsx)(SequenceDisplay_1.default, { model: model, color: util_2.cdsColor, chunks: segments, start: 0 }));
+    return ((0, jsx_runtime_1.jsx)(SequenceDisplay_1.default, { model: model, color: consts_1.cdsColor, chunks: segments, start: 0 }));
 });
 exports.default = CDSSequence;

package/BaseFeatureWidget/SequenceFeatureDetails/seqtypes/GenomicSequence.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const mobx_react_1 = require("mobx-react");
+const consts_1 = require("../consts");
 const util_1 = require("../util");
 const SequenceDisplay_1 = __importDefault(require("./SequenceDisplay"));
 const GenomicSequence = (0, mobx_react_1.observer)(function ({ sequence, upstream, feature, downstream, model, }) {
@@ -26,7 +27,7 @@ const GenomicSequence = (0, mobx_react_1.observer)(function ({ sequence, upstrea
             charactersPerRow,
             showCoordinates,
         });
-        upstreamChunk = ((0, jsx_runtime_1.jsx)(SequenceDisplay_1.default, { model: model, color: util_1.updownstreamColor, start: currStart, coordStart: coordStart, chunks: segments }));
+        upstreamChunk = ((0, jsx_runtime_1.jsx)(SequenceDisplay_1.default, { model: model, color: consts_1.updownstreamColor, start: currStart, coordStart: coordStart, chunks: segments }));
         currRemainder = remainder;
         currStart = currStart + upstream.length * mult;
         coordStart = coordStart + upstream.length * mult;
@@ -37,7 +38,7 @@ const GenomicSequence = (0, mobx_react_1.observer)(function ({ sequence, upstrea
         showCoordinates,
         currRemainder,
     });
-    const middleChunk = ((0, jsx_runtime_1.jsx)(SequenceDisplay_1.default, { model: model, color: util_1.genomeColor, start: currStart, coordStart: coordStart, chunks: segments }));
+    const middleChunk = ((0, jsx_runtime_1.jsx)(SequenceDisplay_1.default, { model: model, color: consts_1.genomeColor, start: currStart, coordStart: coordStart, chunks: segments }));
     currRemainder = remainder;
     currStart += sequence.length * mult;
     coordStart = coordStart + sequence.length * mult;
@@ -49,7 +50,7 @@ const GenomicSequence = (0, mobx_react_1.observer)(function ({ sequence, upstrea
             currRemainder,
             showCoordinates,
         });
-        downstreamChunk = ((0, jsx_runtime_1.jsx)(SequenceDisplay_1.default, { start: currStart, model: model, chunks: segments, coordStart: coordStart, color: util_1.updownstreamColor }));
+        downstreamChunk = ((0, jsx_runtime_1.jsx)(SequenceDisplay_1.default, { start: currStart, model: model, chunks: segments, coordStart: coordStart, color: consts_1.updownstreamColor }));
     }
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [upstreamChunk, middleChunk, downstreamChunk] }));
 });

package/BaseFeatureWidget/SequenceFeatureDetails/seqtypes/ProteinSequence.js

@@ -5,21 +5,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const mobx_react_1 = require("mobx-react");
-const util_1 = require("../../util");
-const util_2 = require("../util");
+const consts_1 = require("../consts");
+const util_1 = require("../util");
 const SequenceDisplay_1 = __importDefault(require("./SequenceDisplay"));
+const convertCodingSequenceToPeptides_1 = require("../../../util/convertCodingSequenceToPeptides");
 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) {
-        protein += codonTable[str.slice(i, i + 3)] || '&';
-    }
-    const { segments } = (0, util_2.splitString)({
-        str: protein,
+    const str = (0, convertCodingSequenceToPeptides_1.convertCodingSequenceToPeptides)({
+        cds,
+        sequence,
+        codonTable,
+    });
+    const { segments } = (0, util_1.splitString)({
+        str,
         charactersPerRow,
         showCoordinates,
     });
-    return ((0, jsx_runtime_1.jsx)(SequenceDisplay_1.default, { model: model, color: util_2.proteinColor, chunks: segments, start: 0 }));
+    return ((0, jsx_runtime_1.jsx)(SequenceDisplay_1.default, { model: model, color: consts_1.proteinColor, chunks: segments, start: 0 }));
 });
 exports.default = ProteinSequence;

package/BaseFeatureWidget/SequenceFeatureDetails/useSequenceData.d.ts

@@ -0,0 +1,13 @@
+import type { SimpleFeatureSerialized } from '../../util';
+import type { ErrorState, SeqState } from '../util';
+export declare function useSequenceData({ feature, sequence, }: {
+    feature: SimpleFeatureSerialized;
+    sequence?: SeqState | ErrorState;
+}): {
+    seq: string;
+    upstream: string | undefined;
+    downstream: string | undefined;
+    cds: any[];
+    exons: any[];
+    utr: any[];
+} | undefined;

package/BaseFeatureWidget/SequenceFeatureDetails/useSequenceData.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSequenceData = useSequenceData;
+const util_1 = require("../../util");
+const util_2 = require("../util");
+function prepareSubfeatures(feature) {
+    const { start, subfeatures } = feature;
+    return ((subfeatures === null || subfeatures === void 0 ? void 0 : subfeatures.sort((a, b) => a.start - b.start).map(sub => ({
+        ...sub,
+        start: sub.start - start,
+        end: sub.end - start,
+    }))) || []);
+}
+function processFeatureData(children, feature) {
+    const cds = (0, util_2.filterSuccessiveElementsWithSameStartAndEndCoord)(children.filter(sub => { var _a; return ((_a = sub.type) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'cds'; }));
+    const exons = (0, util_2.filterSuccessiveElementsWithSameStartAndEndCoord)(children.filter(sub => sub.type === 'exon'));
+    let utr = (0, util_2.filterSuccessiveElementsWithSameStartAndEndCoord)(children.filter(sub => { var _a; return (_a = sub.type) === null || _a === void 0 ? void 0 : _a.match(/utr/i); }));
+    if (!utr.length && cds.length && exons.length) {
+        utr = (0, util_2.calculateUTRs)(cds, exons);
+    }
+    else if (!utr.length && cds.length && !exons.length) {
+        utr = (0, util_2.calculateUTRs2)(cds, {
+            start: 0,
+            end: feature.end - feature.start,
+            type: 'gene',
+        });
+    }
+    return {
+        cds,
+        exons,
+        utr,
+    };
+}
+function handleReverseStrand(sequence, cds, exons, utr) {
+    const { seq = '', upstream = '', downstream = '' } = sequence;
+    return {
+        sequence: {
+            seq: (0, util_1.revcom)(seq),
+            upstream: downstream ? (0, util_1.revcom)(downstream) : '',
+            downstream: upstream ? (0, util_1.revcom)(upstream) : '',
+        },
+        cds: (0, util_2.revlist)(cds, seq.length),
+        exons: (0, util_2.revlist)(exons, seq.length),
+        utr: (0, util_2.revlist)(utr, seq.length),
+    };
+}
+function useSequenceData({ feature, sequence, }) {
+    const children = prepareSubfeatures(feature);
+    const { cds, exons, utr } = processFeatureData(children, feature);
+    if (!sequence || 'error' in sequence) {
+        return undefined;
+    }
+    else {
+        const { sequence: adjustedSequence, cds: adjustedCds, exons: adjustedExons, utr: adjustedUtr, } = feature.strand === -1
+            ? handleReverseStrand(sequence, cds, exons, utr)
+            : { sequence, cds, exons, utr };
+        const { seq, upstream, downstream } = adjustedSequence;
+        return {
+            seq,
+            upstream,
+            downstream,
+            cds: adjustedCds,
+            exons: adjustedExons,
+            utr: adjustedUtr,
+        };
+    }
+}

package/BaseFeatureWidget/SequenceFeatureDetails/util.d.ts

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

package/BaseFeatureWidget/SequenceFeatureDetails/util.js

@@ -1,49 +1,46 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.genomeColor = exports.updownstreamColor = exports.cdsColor = exports.proteinColor = exports.utrColor = exports.intronColor = void 0;
 exports.splitString = splitString;
-exports.intronColor = undefined;
-exports.utrColor = 'rgb(200,240,240)';
-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;
+function splitString({ str, charactersPerRow, showCoordinates, currRemainder = 0, spacingInterval = 10, }) {
     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) {
+    const segments = new Array(numChunks);
+    let positionCounter = currRemainder % spacingInterval;
+    let chunkIndex = 0;
+    let stringOffset = 0;
+    for (; chunkIndex < numChunks + 1; ++chunkIndex) {
+        const chunkSize = chunkIndex === 0 ? charactersPerRow - currRemainder : charactersPerRow;
+        const currentChunk = str.slice(stringOffset, stringOffset + chunkSize);
+        if (!currentChunk) {
             break;
         }
-        if (showCoordinates) {
-            let res = '';
-            for (let i = 0, j = splitStart; i < r.length; i++, j++) {
-                if (j % splitSize === 0) {
-                    res += ' ';
-                    j = 0;
-                }
-                res += r[i];
-            }
-            if (res) {
-                chunks[iter] = res;
-            }
-        }
-        else {
-            chunks[iter] = r;
-        }
-        splitStart = 0;
-        offset += inc;
+        segments[chunkIndex] = showCoordinates
+            ? formatWithCoordinateSpacing(currentChunk, positionCounter, spacingInterval)
+            : currentChunk;
+        positionCounter = 0;
+        stringOffset += chunkSize;
     }
     return {
-        segments: chunks,
-        remainder: ((((_a = chunks.at(-1)) === null || _a === void 0 ? void 0 : _a.replaceAll(' ', '').length) || 0) +
-            (iter < 2 ? currRemainder : 0)) %
-            charactersPerRow,
+        segments,
+        remainder: calculateRemainder(segments, chunkIndex, currRemainder, charactersPerRow),
     };
 }
+function formatWithCoordinateSpacing(chunk, startPosition, spacingInterval) {
+    if (!chunk) {
+        return '';
+    }
+    let formattedChunk = '';
+    for (let i = 0, j = startPosition; i < chunk.length; i++, j++) {
+        if (j % spacingInterval === 0) {
+            formattedChunk += ' ';
+            j = 0;
+        }
+        formattedChunk += chunk[i];
+    }
+    return formattedChunk;
+}
+function calculateRemainder(segments, chunkIndex, currRemainder, charactersPerRow) {
+    var _a;
+    const lastSegmentLength = ((_a = segments.at(-1)) === null || _a === void 0 ? void 0 : _a.replaceAll(' ', '').length) || 0;
+    const additionalRemainder = chunkIndex < 2 ? currRemainder : 0;
+    return (lastSegmentLength + additionalRemainder) % charactersPerRow;
+}

package/BaseFeatureWidget/stateModelFactory.d.ts

@@ -20,14 +20,14 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
         upperCaseCDS: boolean;
         charactersPerRow: number;
         feature: SimpleFeatureSerialized | undefined;
-        mode: string;
+        mode: "" | "genomic" | "gene" | "gene_collapsed_intron" | "gene_updownstream" | "cdna" | "cds" | "genomic_sequence_updownstream" | "protein";
     } & {
         setFeature(f: SimpleFeatureSerialized): void;
         setUpDownBp(f: number): void;
         setIntronBp(f: number): void;
         setUpperCaseCDS(f: boolean): void;
         setShowCoordinates(f: "none" | "relative" | "genomic"): void;
-        setMode(mode: string): void;
+        setMode(mode: "" | "genomic" | "gene" | "gene_collapsed_intron" | "gene_updownstream" | "cdna" | "cds" | "genomic_sequence_updownstream" | "protein"): void;
     } & {
         readonly showCoordinates: boolean;
         readonly showGenomicCoordsOption: boolean;
@@ -66,14 +66,14 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
         upperCaseCDS: boolean;
         charactersPerRow: number;
         feature: SimpleFeatureSerialized | undefined;
-        mode: string;
+        mode: "" | "genomic" | "gene" | "gene_collapsed_intron" | "gene_updownstream" | "cdna" | "cds" | "genomic_sequence_updownstream" | "protein";
     } & {
         setFeature(f: SimpleFeatureSerialized): void;
         setUpDownBp(f: number): void;
         setIntronBp(f: number): void;
         setUpperCaseCDS(f: boolean): void;
         setShowCoordinates(f: "none" | "relative" | "genomic"): void;
-        setMode(mode: string): void;
+        setMode(mode: "" | "genomic" | "gene" | "gene_collapsed_intron" | "gene_updownstream" | "cdna" | "cds" | "genomic_sequence_updownstream" | "protein"): void;
     } & {
         readonly showCoordinates: boolean;
         readonly showGenomicCoordsOption: boolean;

package/BaseFeatureWidget/util.d.ts

@@ -22,8 +22,11 @@ export interface SeqState {
 export interface ErrorState {
     error: string;
 }
-export declare function stitch(subfeats: Feat[], sequence: string): string;
-export declare function dedupe(list: Feat[]): Feat[];
+export declare function stitch(subfeats: {
+    start: number;
+    end: number;
+}[], sequence: string): string;
+export declare function filterSuccessiveElementsWithSameStartAndEndCoord(list: Feat[]): Feat[];
 export declare function revlist(list: Feat[], seqlen: number): {
     start: number;
     end: number;