@jbrowse/plugin-sequence 3.6.4 → 3.7.0

package/dist/DivSequenceRenderer/components/DivSequenceRendering.js

@@ -1,72 +1,13 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const util_1 = require("@jbrowse/core/util");
-const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
-function Translation({ codonTable, seq, frame, width, bpPerPx, colorByCDS, region, seqStart, height, y, reverse = false, }) {
-    var _a, _b;
-    const normalizedFrame = Math.abs(frame) - 1;
-    const seqFrame = seqStart % 3;
-    const frameShift = (normalizedFrame - seqFrame + 3) % 3;
-    const theme = (0, material_1.useTheme)();
-    const frameShiftAdjustedSeqLength = seq.length - frameShift;
-    const multipleOfThreeLength = frameShiftAdjustedSeqLength - (frameShiftAdjustedSeqLength % 3);
-    const seqSliced = seq.slice(frameShift, frameShift + multipleOfThreeLength);
-    const translated = [];
-    for (let i = 0; i < seqSliced.length; i += 3) {
-        const codon = seqSliced.slice(i, i + 3);
-        const normalizedCodon = reverse ? (0, util_1.revcom)(codon) : codon;
-        const aminoAcid = codonTable[normalizedCodon] || '';
-        translated.push({
-            letter: aminoAcid,
-            codon: normalizedCodon.toUpperCase(),
-        });
-    }
-    const codonWidth = (1 / bpPerPx) * 3;
-    const renderLetter = 1 / bpPerPx >= 12;
-    const frameOffset = frameShift / bpPerPx;
-    const startOffset = (region.start - seqStart) / bpPerPx;
-    const offset = frameOffset - startOffset;
-    const dark = theme.palette.mode === 'dark' ? 'dark' : 'main';
-    const defaultFill = colorByCDS
-        ? (_a = theme.palette.framesCDS.at(frame)) === null || _a === void 0 ? void 0 : _a[dark]
-        : (_b = theme.palette.frames.at(frame)) === null || _b === void 0 ? void 0 : _b[dark];
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("rect", { x: 0, y: y, width: width, height: height, fill: defaultFill }), translated.map((element, index) => {
-                const x = region.reversed
-                    ? width - (index + 1) * codonWidth - offset
-                    : codonWidth * index + offset;
-                const { letter, codon } = element;
-                const codonFill = util_1.defaultStarts.includes(codon)
-                    ? theme.palette.startCodon
-                    : util_1.defaultStops.includes(codon)
-                        ? theme.palette.stopCodon
-                        : undefined;
-                return !(renderLetter || codonFill) ? null : ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("rect", { x: x, y: y, width: renderLetter
-                                ? codonWidth
-                                : codonWidth + 0.7, height: height, stroke: renderLetter ? '#555' : 'none', fill: codonFill || 'none' }), renderLetter ? ((0, jsx_runtime_1.jsx)("text", { x: x + codonWidth / 2, fontSize: height - 2, y: y + height / 2, dominantBaseline: "middle", textAnchor: "middle", children: letter })) : null] }, `${index}-${letter}`));
-            })] }));
-}
-function Sequence({ bpPerPx, region, feature, sequenceType, height, seq, y, }) {
-    const render = 1 / bpPerPx >= 12;
-    const s = feature.get('start');
-    const e = feature.get('end');
-    const [leftPx, rightPx] = (0, util_1.bpSpanPx)(s, e, region, bpPerPx);
-    const reverse = region.reversed;
-    const len = e - s;
-    const w = Math.max((rightPx - leftPx) / len, 0.8);
-    const theme = (0, material_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: seq.split('').map((letter, index) => {
-            const color = sequenceType === 'dna'
-                ?
-                    theme.palette.bases[letter.toUpperCase()]
-                : undefined;
-            const dark = theme.palette.mode === 'dark';
-            const x = reverse ? rightPx - (index + 1) * w : leftPx + index * w;
-            return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("rect", { x: x, y: y, width: w, height: height, fill: color ? (dark ? color.dark : color.main) : '#aaa', stroke: render ? '#555' : 'none' }), render ? ((0, jsx_runtime_1.jsx)("text", { x: x + w / 2, y: y + height / 2, dominantBaseline: "middle", textAnchor: "middle", fontSize: height - 2, fill: color ? theme.palette.getContrastText(color.main) : 'black', children: letter })) : null] }, `${letter}-${index}`));
-        }) }));
-}
+const Sequence_1 = __importDefault(require("./Sequence"));
+const Translation_1 = __importDefault(require("./Translation"));
 function SequenceSVG({ regions, width, colorByCDS, features = new Map(), showReverse = true, showForward = true, showTranslation = true, sequenceType = 'dna', bpPerPx, rowHeight, }) {
     const region = regions[0];
     const codonTable = (0, util_1.generateCodonTable)(util_1.defaultCodonTable);
@@ -85,7 +26,7 @@ function SequenceSVG({ regions, width, colorByCDS, features = new Map(), showRev
     const [topFrames, bottomFrames] = region.reversed
         ? [reverseFrames.toReversed(), forwardFrames.toReversed()]
         : [forwardFrames, reverseFrames];
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [topFrames.map(index => ((0, jsx_runtime_1.jsx)(Translation, { width: width, colorByCDS: colorByCDS, seq: seq, y: (currY += rowHeight), codonTable: codonTable, frame: index, bpPerPx: bpPerPx, region: region, seqStart: feature.get('start'), height: rowHeight, reverse: region.reversed }, `translation-${index}`))), showForward && showSequence ? ((0, jsx_runtime_1.jsx)(Sequence, { height: rowHeight, sequenceType: sequenceType, y: (currY += rowHeight), feature: feature, region: region, seq: region.reversed ? (0, util_1.complement)(seq) : seq, bpPerPx: bpPerPx })) : null, showReverse && showSequence ? ((0, jsx_runtime_1.jsx)(Sequence, { height: rowHeight, sequenceType: sequenceType, y: (currY += rowHeight), feature: feature, region: region, seq: region.reversed ? seq : (0, util_1.complement)(seq), bpPerPx: bpPerPx })) : null, bottomFrames.map(index => ((0, jsx_runtime_1.jsx)(Translation, { width: width, colorByCDS: colorByCDS, seq: seq, y: (currY += rowHeight), codonTable: codonTable, frame: index, bpPerPx: bpPerPx, region: region, seqStart: feature.get('start'), height: rowHeight, reverse: !region.reversed }, `rev-translation-${index}`)))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [topFrames.map(index => ((0, jsx_runtime_1.jsx)(Translation_1.default, { width: width, colorByCDS: colorByCDS, seq: seq, y: (currY += rowHeight), codonTable: codonTable, frame: index, bpPerPx: bpPerPx, region: region, seqStart: feature.get('start'), height: rowHeight, reverse: region.reversed }, `translation-${index}`))), showForward && showSequence ? ((0, jsx_runtime_1.jsx)(Sequence_1.default, { height: rowHeight, sequenceType: sequenceType, y: (currY += rowHeight), feature: feature, region: region, seq: region.reversed ? (0, util_1.complement)(seq) : seq, bpPerPx: bpPerPx })) : null, showReverse && showSequence ? ((0, jsx_runtime_1.jsx)(Sequence_1.default, { height: rowHeight, sequenceType: sequenceType, y: (currY += rowHeight), feature: feature, region: region, seq: region.reversed ? seq : (0, util_1.complement)(seq), bpPerPx: bpPerPx })) : null, bottomFrames.map(index => ((0, jsx_runtime_1.jsx)(Translation_1.default, { width: width, colorByCDS: colorByCDS, seq: seq, y: (currY += rowHeight), codonTable: codonTable, frame: index, bpPerPx: bpPerPx, region: region, seqStart: feature.get('start'), height: rowHeight, reverse: !region.reversed }, `rev-translation-${index}`)))] }));
 }
 function Wrapper({ exportSVG, width, totalHeight, children, }) {
     return exportSVG ? (children) : ((0, jsx_runtime_1.jsx)("svg", { "data-testid": "sequence_track", width: width, height: totalHeight, style: {

package/dist/DivSequenceRenderer/components/Sequence.d.ts

@@ -0,0 +1,10 @@
+import type { Feature, Region } from '@jbrowse/core/util';
+export default function Sequence({ bpPerPx, region, feature, sequenceType, height, seq, y, }: {
+    seq: string;
+    bpPerPx: number;
+    sequenceType: string;
+    height: number;
+    region: Region;
+    feature: Feature;
+    y: number;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/DivSequenceRenderer/components/Sequence.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Sequence;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const util_1 = require("@jbrowse/core/util");
+const material_1 = require("@mui/material");
+function Sequence({ bpPerPx, region, feature, sequenceType, height, seq, y, }) {
+    const theme = (0, material_1.useTheme)();
+    const render = 1 / bpPerPx >= 12;
+    const s = feature.get('start');
+    const e = feature.get('end');
+    const [leftPx, rightPx] = (0, util_1.bpSpanPx)(s, e, region, bpPerPx);
+    const reverse = region.reversed;
+    const len = e - s;
+    const w = Math.max((rightPx - leftPx) / len, 0.8);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: seq.split('').map((letter, index) => {
+            const color = sequenceType === 'dna'
+                ?
+                    theme.palette.bases[letter.toUpperCase()]
+                : undefined;
+            const x = reverse ? rightPx - (index + 1) * w : leftPx + index * w;
+            return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("rect", { x: x, y: y, width: w, height: height, fill: color ? color.main : '#aaa', stroke: render ? '#555' : 'none' }), render ? ((0, jsx_runtime_1.jsx)("text", { x: x + w / 2, y: y + height / 2, dominantBaseline: "middle", textAnchor: "middle", fontSize: height - 2, fill: color ? theme.palette.getContrastText(color.main) : 'black', children: letter })) : null] }, `${letter}-${index}`));
+        }) }));
+}

package/dist/DivSequenceRenderer/components/Translation.d.ts

@@ -0,0 +1,14 @@
+import type { Frame, Region } from '@jbrowse/core/util';
+export default function Translation({ codonTable, seq, frame, width, bpPerPx, colorByCDS, region, seqStart, height, y, reverse, }: {
+    codonTable: Record<string, string>;
+    width: number;
+    seq: string;
+    frame: Frame;
+    colorByCDS: boolean;
+    bpPerPx: number;
+    region: Region;
+    seqStart: number;
+    reverse?: boolean;
+    height: number;
+    y: number;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/DivSequenceRenderer/components/Translation.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Translation;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const util_1 = require("@jbrowse/core/util");
+const material_1 = require("@mui/material");
+function Translation({ codonTable, seq, frame, width, bpPerPx, colorByCDS, region, seqStart, height, y, reverse = false, }) {
+    var _a, _b;
+    const theme = (0, material_1.useTheme)();
+    const normalizedFrame = Math.abs(frame) - 1;
+    const seqFrame = seqStart % 3;
+    const frameShift = (normalizedFrame - seqFrame + 3) % 3;
+    const frameShiftAdjustedSeqLength = seq.length - frameShift;
+    const multipleOfThreeLength = frameShiftAdjustedSeqLength - (frameShiftAdjustedSeqLength % 3);
+    const seqSliced = seq.slice(frameShift, frameShift + multipleOfThreeLength);
+    const translated = [];
+    for (let i = 0; i < seqSliced.length; i += 3) {
+        const codon = seqSliced.slice(i, i + 3);
+        const normalizedCodon = reverse ? (0, util_1.revcom)(codon) : codon;
+        const aminoAcid = codonTable[normalizedCodon] || '';
+        translated.push({
+            letter: aminoAcid,
+            codon: normalizedCodon.toUpperCase(),
+        });
+    }
+    const codonWidth = (1 / bpPerPx) * 3;
+    const renderLetter = 1 / bpPerPx >= 12;
+    const frameOffset = frameShift / bpPerPx;
+    const startOffset = (region.start - seqStart) / bpPerPx;
+    const offset = frameOffset - startOffset;
+    const defaultFill = colorByCDS
+        ? (_a = theme.palette.framesCDS.at(frame)) === null || _a === void 0 ? void 0 : _a.main
+        : (_b = theme.palette.frames.at(frame)) === null || _b === void 0 ? void 0 : _b.main;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("rect", { x: 0, y: y, width: width, height: height, fill: defaultFill }), translated.map((element, index) => {
+                const x = region.reversed
+                    ? width - (index + 1) * codonWidth - offset
+                    : codonWidth * index + offset;
+                const { letter, codon } = element;
+                const codonFill = util_1.defaultStarts.includes(codon)
+                    ? theme.palette.startCodon
+                    : util_1.defaultStops.includes(codon)
+                        ? theme.palette.stopCodon
+                        : undefined;
+                return !(renderLetter || codonFill) ? null : ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("rect", { x: x, y: y, width: renderLetter
+                                ? codonWidth
+                                : codonWidth + 0.7, height: height, stroke: renderLetter ? '#555' : 'none', fill: codonFill || 'none' }), renderLetter ? ((0, jsx_runtime_1.jsx)("text", { x: x + codonWidth / 2, fontSize: height - 2, y: y + height / 2, dominantBaseline: "middle", textAnchor: "middle", children: letter })) : null] }, `${index}-${letter}`));
+            })] }));
+}

package/dist/LinearReferenceSequenceDisplay/model.d.ts

@@ -174,6 +174,7 @@ export declare function modelFactory(configSchema: AnyConfigurationSchemaType):
     regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
     regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react/jsx-runtime").JSX.Element | null;
 } & {
+    mouseoverExtraInformation: string | undefined;
     featureIdUnderMouse: undefined | string;
     contextMenuFeature: undefined | import("@jbrowse/core/util").Feature;
 } & {
@@ -188,9 +189,22 @@ export declare function modelFactory(configSchema: AnyConfigurationSchemaType):
 } & {
     readonly features: import("@jbrowse/core/util/compositeMap").default<string, import("@jbrowse/core/util").Feature>;
     readonly featureUnderMouse: import("@jbrowse/core/util").Feature | undefined;
+    readonly layoutFeatures: import("@jbrowse/core/util/compositeMap").default<string, [number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]>;
     getFeatureOverlapping(blockKey: string, x: number, y: number): string | undefined;
-    getFeatureByID(blockKey: string, id: string): [number, number, number, number] | undefined;
-    searchFeatureByID(id: string): [number, number, number, number] | undefined;
+    getFeatureByID(blockKey: string, id: string): ([number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]) | undefined;
+    searchFeatureByID(id: string): ([number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]) | undefined;
 } & {
     addBlock(key: string, block: import("@jbrowse/core/util/blockTypes").BaseBlock): void;
     deleteBlock(key: string): void;
@@ -199,6 +213,7 @@ export declare function modelFactory(configSchema: AnyConfigurationSchemaType):
     clearFeatureSelection(): void;
     setFeatureIdUnderMouse(feature?: string): void;
     setContextMenuFeature(feature?: import("@jbrowse/core/util").Feature): void;
+    setMouseoverExtraInformation(extra?: string): void;
 } & {
     reload(): Promise<void>;
 } & {

package/esm/DivSequenceRenderer/components/DivSequenceRendering.js

@@ -1,70 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Fragment } from 'react';
-import { bpSpanPx, complement, defaultCodonTable, defaultStarts, defaultStops, generateCodonTable, revcom, } from '@jbrowse/core/util';
-import { useTheme } from '@mui/material';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { complement, defaultCodonTable, generateCodonTable, } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
-function Translation({ codonTable, seq, frame, width, bpPerPx, colorByCDS, region, seqStart, height, y, reverse = false, }) {
-    var _a, _b;
-    const normalizedFrame = Math.abs(frame) - 1;
-    const seqFrame = seqStart % 3;
-    const frameShift = (normalizedFrame - seqFrame + 3) % 3;
-    const theme = useTheme();
-    const frameShiftAdjustedSeqLength = seq.length - frameShift;
-    const multipleOfThreeLength = frameShiftAdjustedSeqLength - (frameShiftAdjustedSeqLength % 3);
-    const seqSliced = seq.slice(frameShift, frameShift + multipleOfThreeLength);
-    const translated = [];
-    for (let i = 0; i < seqSliced.length; i += 3) {
-        const codon = seqSliced.slice(i, i + 3);
-        const normalizedCodon = reverse ? revcom(codon) : codon;
-        const aminoAcid = codonTable[normalizedCodon] || '';
-        translated.push({
-            letter: aminoAcid,
-            codon: normalizedCodon.toUpperCase(),
-        });
-    }
-    const codonWidth = (1 / bpPerPx) * 3;
-    const renderLetter = 1 / bpPerPx >= 12;
-    const frameOffset = frameShift / bpPerPx;
-    const startOffset = (region.start - seqStart) / bpPerPx;
-    const offset = frameOffset - startOffset;
-    const dark = theme.palette.mode === 'dark' ? 'dark' : 'main';
-    const defaultFill = colorByCDS
-        ? (_a = theme.palette.framesCDS.at(frame)) === null || _a === void 0 ? void 0 : _a[dark]
-        : (_b = theme.palette.frames.at(frame)) === null || _b === void 0 ? void 0 : _b[dark];
-    return (_jsxs(_Fragment, { children: [_jsx("rect", { x: 0, y: y, width: width, height: height, fill: defaultFill }), translated.map((element, index) => {
-                const x = region.reversed
-                    ? width - (index + 1) * codonWidth - offset
-                    : codonWidth * index + offset;
-                const { letter, codon } = element;
-                const codonFill = defaultStarts.includes(codon)
-                    ? theme.palette.startCodon
-                    : defaultStops.includes(codon)
-                        ? theme.palette.stopCodon
-                        : undefined;
-                return !(renderLetter || codonFill) ? null : (_jsxs(Fragment, { children: [_jsx("rect", { x: x, y: y, width: renderLetter
-                                ? codonWidth
-                                : codonWidth + 0.7, height: height, stroke: renderLetter ? '#555' : 'none', fill: codonFill || 'none' }), renderLetter ? (_jsx("text", { x: x + codonWidth / 2, fontSize: height - 2, y: y + height / 2, dominantBaseline: "middle", textAnchor: "middle", children: letter })) : null] }, `${index}-${letter}`));
-            })] }));
-}
-function Sequence({ bpPerPx, region, feature, sequenceType, height, seq, y, }) {
-    const render = 1 / bpPerPx >= 12;
-    const s = feature.get('start');
-    const e = feature.get('end');
-    const [leftPx, rightPx] = bpSpanPx(s, e, region, bpPerPx);
-    const reverse = region.reversed;
-    const len = e - s;
-    const w = Math.max((rightPx - leftPx) / len, 0.8);
-    const theme = useTheme();
-    return (_jsx(_Fragment, { children: seq.split('').map((letter, index) => {
-            const color = sequenceType === 'dna'
-                ?
-                    theme.palette.bases[letter.toUpperCase()]
-                : undefined;
-            const dark = theme.palette.mode === 'dark';
-            const x = reverse ? rightPx - (index + 1) * w : leftPx + index * w;
-            return (_jsxs(Fragment, { children: [_jsx("rect", { x: x, y: y, width: w, height: height, fill: color ? (dark ? color.dark : color.main) : '#aaa', stroke: render ? '#555' : 'none' }), render ? (_jsx("text", { x: x + w / 2, y: y + height / 2, dominantBaseline: "middle", textAnchor: "middle", fontSize: height - 2, fill: color ? theme.palette.getContrastText(color.main) : 'black', children: letter })) : null] }, `${letter}-${index}`));
-        }) }));
-}
+import Sequence from './Sequence';
+import Translation from './Translation';
 function SequenceSVG({ regions, width, colorByCDS, features = new Map(), showReverse = true, showForward = true, showTranslation = true, sequenceType = 'dna', bpPerPx, rowHeight, }) {
     const region = regions[0];
     const codonTable = generateCodonTable(defaultCodonTable);

package/esm/DivSequenceRenderer/components/Sequence.d.ts

@@ -0,0 +1,10 @@
+import type { Feature, Region } from '@jbrowse/core/util';
+export default function Sequence({ bpPerPx, region, feature, sequenceType, height, seq, y, }: {
+    seq: string;
+    bpPerPx: number;
+    sequenceType: string;
+    height: number;
+    region: Region;
+    feature: Feature;
+    y: number;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/DivSequenceRenderer/components/Sequence.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { bpSpanPx } from '@jbrowse/core/util';
+import { useTheme } from '@mui/material';
+export default function Sequence({ bpPerPx, region, feature, sequenceType, height, seq, y, }) {
+    const theme = useTheme();
+    const render = 1 / bpPerPx >= 12;
+    const s = feature.get('start');
+    const e = feature.get('end');
+    const [leftPx, rightPx] = bpSpanPx(s, e, region, bpPerPx);
+    const reverse = region.reversed;
+    const len = e - s;
+    const w = Math.max((rightPx - leftPx) / len, 0.8);
+    return (_jsx(_Fragment, { children: seq.split('').map((letter, index) => {
+            const color = sequenceType === 'dna'
+                ?
+                    theme.palette.bases[letter.toUpperCase()]
+                : undefined;
+            const x = reverse ? rightPx - (index + 1) * w : leftPx + index * w;
+            return (_jsxs(Fragment, { children: [_jsx("rect", { x: x, y: y, width: w, height: height, fill: color ? color.main : '#aaa', stroke: render ? '#555' : 'none' }), render ? (_jsx("text", { x: x + w / 2, y: y + height / 2, dominantBaseline: "middle", textAnchor: "middle", fontSize: height - 2, fill: color ? theme.palette.getContrastText(color.main) : 'black', children: letter })) : null] }, `${letter}-${index}`));
+        }) }));
+}

package/esm/DivSequenceRenderer/components/Translation.d.ts

@@ -0,0 +1,14 @@
+import type { Frame, Region } from '@jbrowse/core/util';
+export default function Translation({ codonTable, seq, frame, width, bpPerPx, colorByCDS, region, seqStart, height, y, reverse, }: {
+    codonTable: Record<string, string>;
+    width: number;
+    seq: string;
+    frame: Frame;
+    colorByCDS: boolean;
+    bpPerPx: number;
+    region: Region;
+    seqStart: number;
+    reverse?: boolean;
+    height: number;
+    y: number;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/DivSequenceRenderer/components/Translation.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { defaultStarts, defaultStops, revcom } from '@jbrowse/core/util';
+import { useTheme } from '@mui/material';
+export default function Translation({ codonTable, seq, frame, width, bpPerPx, colorByCDS, region, seqStart, height, y, reverse = false, }) {
+    var _a, _b;
+    const theme = useTheme();
+    const normalizedFrame = Math.abs(frame) - 1;
+    const seqFrame = seqStart % 3;
+    const frameShift = (normalizedFrame - seqFrame + 3) % 3;
+    const frameShiftAdjustedSeqLength = seq.length - frameShift;
+    const multipleOfThreeLength = frameShiftAdjustedSeqLength - (frameShiftAdjustedSeqLength % 3);
+    const seqSliced = seq.slice(frameShift, frameShift + multipleOfThreeLength);
+    const translated = [];
+    for (let i = 0; i < seqSliced.length; i += 3) {
+        const codon = seqSliced.slice(i, i + 3);
+        const normalizedCodon = reverse ? revcom(codon) : codon;
+        const aminoAcid = codonTable[normalizedCodon] || '';
+        translated.push({
+            letter: aminoAcid,
+            codon: normalizedCodon.toUpperCase(),
+        });
+    }
+    const codonWidth = (1 / bpPerPx) * 3;
+    const renderLetter = 1 / bpPerPx >= 12;
+    const frameOffset = frameShift / bpPerPx;
+    const startOffset = (region.start - seqStart) / bpPerPx;
+    const offset = frameOffset - startOffset;
+    const defaultFill = colorByCDS
+        ? (_a = theme.palette.framesCDS.at(frame)) === null || _a === void 0 ? void 0 : _a.main
+        : (_b = theme.palette.frames.at(frame)) === null || _b === void 0 ? void 0 : _b.main;
+    return (_jsxs(_Fragment, { children: [_jsx("rect", { x: 0, y: y, width: width, height: height, fill: defaultFill }), translated.map((element, index) => {
+                const x = region.reversed
+                    ? width - (index + 1) * codonWidth - offset
+                    : codonWidth * index + offset;
+                const { letter, codon } = element;
+                const codonFill = defaultStarts.includes(codon)
+                    ? theme.palette.startCodon
+                    : defaultStops.includes(codon)
+                        ? theme.palette.stopCodon
+                        : undefined;
+                return !(renderLetter || codonFill) ? null : (_jsxs(Fragment, { children: [_jsx("rect", { x: x, y: y, width: renderLetter
+                                ? codonWidth
+                                : codonWidth + 0.7, height: height, stroke: renderLetter ? '#555' : 'none', fill: codonFill || 'none' }), renderLetter ? (_jsx("text", { x: x + codonWidth / 2, fontSize: height - 2, y: y + height / 2, dominantBaseline: "middle", textAnchor: "middle", children: letter })) : null] }, `${index}-${letter}`));
+            })] }));
+}

package/esm/LinearReferenceSequenceDisplay/model.d.ts

@@ -174,6 +174,7 @@ export declare function modelFactory(configSchema: AnyConfigurationSchemaType):
     regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
     regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react/jsx-runtime").JSX.Element | null;
 } & {
+    mouseoverExtraInformation: string | undefined;
     featureIdUnderMouse: undefined | string;
     contextMenuFeature: undefined | import("@jbrowse/core/util").Feature;
 } & {
@@ -188,9 +189,22 @@ export declare function modelFactory(configSchema: AnyConfigurationSchemaType):
 } & {
     readonly features: import("@jbrowse/core/util/compositeMap").default<string, import("@jbrowse/core/util").Feature>;
     readonly featureUnderMouse: import("@jbrowse/core/util").Feature | undefined;
+    readonly layoutFeatures: import("@jbrowse/core/util/compositeMap").default<string, [number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]>;
     getFeatureOverlapping(blockKey: string, x: number, y: number): string | undefined;
-    getFeatureByID(blockKey: string, id: string): [number, number, number, number] | undefined;
-    searchFeatureByID(id: string): [number, number, number, number] | undefined;
+    getFeatureByID(blockKey: string, id: string): ([number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]) | undefined;
+    searchFeatureByID(id: string): ([number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]) | undefined;
 } & {
     addBlock(key: string, block: import("@jbrowse/core/util/blockTypes").BaseBlock): void;
     deleteBlock(key: string): void;
@@ -199,6 +213,7 @@ export declare function modelFactory(configSchema: AnyConfigurationSchemaType):
     clearFeatureSelection(): void;
     setFeatureIdUnderMouse(feature?: string): void;
     setContextMenuFeature(feature?: import("@jbrowse/core/util").Feature): void;
+    setMouseoverExtraInformation(extra?: string): void;
 } & {
     reload(): Promise<void>;
 } & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-sequence",
-  "version": "3.6.4",
+  "version": "3.7.0",
   "description": "JBrowse 2 sequence adapters, tracks, etc.",
   "keywords": [
     "jbrowse",
@@ -39,9 +39,9 @@
     "@gmod/abortable-promise-cache": "^3.0.1",
     "@gmod/indexedfasta": "^4.0.0",
     "@gmod/twobit": "^6.0.0",
-    "@jbrowse/core": "^3.6.4",
-    "@jbrowse/plugin-linear-genome-view": "^3.6.4",
-    "@jbrowse/plugin-wiggle": "^3.6.4",
+    "@jbrowse/core": "^3.7.0",
+    "@jbrowse/plugin-linear-genome-view": "^3.7.0",
+    "@jbrowse/plugin-wiggle": "^3.7.0",
     "@mui/material": "^7.0.0",
     "mobx": "^6.0.0",
     "mobx-react": "^9.0.0",
@@ -57,5 +57,5 @@
   "distModule": "esm/index.js",
   "srcModule": "src/index.ts",
   "module": "esm/index.js",
-  "gitHead": "3db8e50ce2bd9c081efbf6c2e7ae5f342380a25a"
+  "gitHead": "85bdd0d58286b7adbfd408146b15847676317635"
 }