@jbrowse/plugin-sequence 3.0.3 → 3.0.5

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

@@ -1,7 +1,7 @@
 import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
 import type { Feature, Region } from '@jbrowse/core/util';
 import type { Theme } from '@mui/material';
-declare const DivSequenceRendering: (props: {
+declare const DivSequenceRendering: ({ exportSVG, features, regions, colorByCDS, bpPerPx, rowHeight, sequenceHeight, theme, showForward, showReverse, showTranslation, }: {
     exportSVG?: {
         rasterizeLayers: boolean;
     };

package/dist/DivSequenceRenderer/components/DivSequenceRendering.js

@@ -5,7 +5,7 @@ const react_1 = require("react");
 const ui_1 = require("@jbrowse/core/ui");
 const util_1 = require("@jbrowse/core/util");
 const mobx_react_1 = require("mobx-react");
-function Translation({ codonTable, seq, frame, bpPerPx, colorByCDS, region, seqStart, height, y, reverse = false, theme, }) {
+function Translation({ codonTable, seq, frame, width, bpPerPx, colorByCDS, region, seqStart, height, y, reverse = false, theme, }) {
     var _a, _b;
     const normalizedFrame = Math.abs(frame) - 1;
     const seqFrame = seqStart % 3;
@@ -23,7 +23,6 @@ function Translation({ codonTable, seq, frame, bpPerPx, colorByCDS, region, seqS
             codon: normalizedCodon.toUpperCase(),
         });
     }
-    const width = (region.end - region.start) / bpPerPx;
     const codonWidth = (1 / bpPerPx) * 3;
     const renderLetter = 1 / bpPerPx >= 12;
     const frameOffset = frameShift / bpPerPx;
@@ -64,7 +63,7 @@ function Sequence({ bpPerPx, region, feature, sequenceType, theme, height, seq,
             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}`));
         }) }));
 }
-function SequenceSVG({ regions, theme: configTheme, colorByCDS, features = new Map(), showReverse = true, showForward = true, showTranslation = true, sequenceType = 'dna', bpPerPx, rowHeight, }) {
+function SequenceSVG({ regions, width, theme: configTheme, colorByCDS, features = new Map(), showReverse = true, showForward = true, showTranslation = true, sequenceType = 'dna', bpPerPx, rowHeight, }) {
     const region = regions[0];
     const theme = (0, ui_1.createJBrowseTheme)(configTheme);
     const codonTable = (0, util_1.generateCodonTable)(util_1.defaultCodonTable);
@@ -83,7 +82,7 @@ function SequenceSVG({ regions, theme: configTheme, colorByCDS, features = new M
     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, { colorByCDS: colorByCDS, seq: seq, y: (currY += rowHeight), codonTable: codonTable, frame: index, bpPerPx: bpPerPx, region: region, seqStart: feature.get('start'), theme: theme, 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, theme: theme })) : 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, theme: theme })) : null, bottomFrames.map(index => ((0, jsx_runtime_1.jsx)(Translation, { colorByCDS: colorByCDS, seq: seq, y: (currY += rowHeight), codonTable: codonTable, frame: index, bpPerPx: bpPerPx, region: region, seqStart: feature.get('start'), theme: theme, 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, { width: width, colorByCDS: colorByCDS, seq: seq, y: (currY += rowHeight), codonTable: codonTable, frame: index, bpPerPx: bpPerPx, region: region, seqStart: feature.get('start'), theme: theme, 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, theme: theme })) : 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, theme: theme })) : 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'), theme: theme, 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: {
@@ -93,10 +92,9 @@ function Wrapper({ exportSVG, width, totalHeight, children, }) {
             userSelect: 'none',
         }, children: children }));
 }
-const DivSequenceRendering = (0, mobx_react_1.observer)(function (props) {
-    const { regions, bpPerPx, sequenceHeight } = props;
+const DivSequenceRendering = (0, mobx_react_1.observer)(function ({ exportSVG, features, regions, colorByCDS, bpPerPx, rowHeight, sequenceHeight, theme, showForward, showReverse, showTranslation, }) {
     const region = regions[0];
-    const width = (region.end - region.start) / bpPerPx;
-    return ((0, jsx_runtime_1.jsx)(Wrapper, { ...props, totalHeight: sequenceHeight, width: width, children: (0, jsx_runtime_1.jsx)(SequenceSVG, { ...props }) }));
+    const width = Math.ceil((region.end - region.start) / bpPerPx);
+    return ((0, jsx_runtime_1.jsx)(Wrapper, { exportSVG: exportSVG, totalHeight: sequenceHeight, width: width, children: (0, jsx_runtime_1.jsx)(SequenceSVG, { width: width, showReverse: showReverse, showForward: showForward, theme: theme, showTranslation: showTranslation, colorByCDS: colorByCDS, bpPerPx: bpPerPx, rowHeight: rowHeight, features: features, regions: regions }) }));
 });
 exports.default = DivSequenceRendering;

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

@@ -1,7 +1,7 @@
 import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
 import type { Feature, Region } from '@jbrowse/core/util';
 import type { Theme } from '@mui/material';
-declare const DivSequenceRendering: (props: {
+declare const DivSequenceRendering: ({ exportSVG, features, regions, colorByCDS, bpPerPx, rowHeight, sequenceHeight, theme, showForward, showReverse, showTranslation, }: {
     exportSVG?: {
         rasterizeLayers: boolean;
     };

package/esm/DivSequenceRenderer/components/DivSequenceRendering.js

@@ -3,7 +3,7 @@ import { Fragment } from 'react';
 import { createJBrowseTheme } from '@jbrowse/core/ui';
 import { bpSpanPx, complement, defaultCodonTable, defaultStarts, defaultStops, generateCodonTable, revcom, } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
-function Translation({ codonTable, seq, frame, bpPerPx, colorByCDS, region, seqStart, height, y, reverse = false, theme, }) {
+function Translation({ codonTable, seq, frame, width, bpPerPx, colorByCDS, region, seqStart, height, y, reverse = false, theme, }) {
     var _a, _b;
     const normalizedFrame = Math.abs(frame) - 1;
     const seqFrame = seqStart % 3;
@@ -21,7 +21,6 @@ function Translation({ codonTable, seq, frame, bpPerPx, colorByCDS, region, seqS
             codon: normalizedCodon.toUpperCase(),
         });
     }
-    const width = (region.end - region.start) / bpPerPx;
     const codonWidth = (1 / bpPerPx) * 3;
     const renderLetter = 1 / bpPerPx >= 12;
     const frameOffset = frameShift / bpPerPx;
@@ -62,7 +61,7 @@ function Sequence({ bpPerPx, region, feature, sequenceType, theme, height, seq,
             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}`));
         }) }));
 }
-function SequenceSVG({ regions, theme: configTheme, colorByCDS, features = new Map(), showReverse = true, showForward = true, showTranslation = true, sequenceType = 'dna', bpPerPx, rowHeight, }) {
+function SequenceSVG({ regions, width, theme: configTheme, colorByCDS, features = new Map(), showReverse = true, showForward = true, showTranslation = true, sequenceType = 'dna', bpPerPx, rowHeight, }) {
     const region = regions[0];
     const theme = createJBrowseTheme(configTheme);
     const codonTable = generateCodonTable(defaultCodonTable);
@@ -81,7 +80,7 @@ function SequenceSVG({ regions, theme: configTheme, colorByCDS, features = new M
     const [topFrames, bottomFrames] = region.reversed
         ? [reverseFrames.toReversed(), forwardFrames.toReversed()]
         : [forwardFrames, reverseFrames];
-    return (_jsxs(_Fragment, { children: [topFrames.map(index => (_jsx(Translation, { colorByCDS: colorByCDS, seq: seq, y: (currY += rowHeight), codonTable: codonTable, frame: index, bpPerPx: bpPerPx, region: region, seqStart: feature.get('start'), theme: theme, height: rowHeight, reverse: region.reversed }, `translation-${index}`))), showForward && showSequence ? (_jsx(Sequence, { height: rowHeight, sequenceType: sequenceType, y: (currY += rowHeight), feature: feature, region: region, seq: region.reversed ? complement(seq) : seq, bpPerPx: bpPerPx, theme: theme })) : null, showReverse && showSequence ? (_jsx(Sequence, { height: rowHeight, sequenceType: sequenceType, y: (currY += rowHeight), feature: feature, region: region, seq: region.reversed ? seq : complement(seq), bpPerPx: bpPerPx, theme: theme })) : null, bottomFrames.map(index => (_jsx(Translation, { colorByCDS: colorByCDS, seq: seq, y: (currY += rowHeight), codonTable: codonTable, frame: index, bpPerPx: bpPerPx, region: region, seqStart: feature.get('start'), theme: theme, height: rowHeight, reverse: !region.reversed }, `rev-translation-${index}`)))] }));
+    return (_jsxs(_Fragment, { children: [topFrames.map(index => (_jsx(Translation, { width: width, colorByCDS: colorByCDS, seq: seq, y: (currY += rowHeight), codonTable: codonTable, frame: index, bpPerPx: bpPerPx, region: region, seqStart: feature.get('start'), theme: theme, height: rowHeight, reverse: region.reversed }, `translation-${index}`))), showForward && showSequence ? (_jsx(Sequence, { height: rowHeight, sequenceType: sequenceType, y: (currY += rowHeight), feature: feature, region: region, seq: region.reversed ? complement(seq) : seq, bpPerPx: bpPerPx, theme: theme })) : null, showReverse && showSequence ? (_jsx(Sequence, { height: rowHeight, sequenceType: sequenceType, y: (currY += rowHeight), feature: feature, region: region, seq: region.reversed ? seq : complement(seq), bpPerPx: bpPerPx, theme: theme })) : null, bottomFrames.map(index => (_jsx(Translation, { width: width, colorByCDS: colorByCDS, seq: seq, y: (currY += rowHeight), codonTable: codonTable, frame: index, bpPerPx: bpPerPx, region: region, seqStart: feature.get('start'), theme: theme, height: rowHeight, reverse: !region.reversed }, `rev-translation-${index}`)))] }));
 }
 function Wrapper({ exportSVG, width, totalHeight, children, }) {
     return exportSVG ? (children) : (_jsx("svg", { "data-testid": "sequence_track", width: width, height: totalHeight, style: {
@@ -91,10 +90,9 @@ function Wrapper({ exportSVG, width, totalHeight, children, }) {
             userSelect: 'none',
         }, children: children }));
 }
-const DivSequenceRendering = observer(function (props) {
-    const { regions, bpPerPx, sequenceHeight } = props;
+const DivSequenceRendering = observer(function ({ exportSVG, features, regions, colorByCDS, bpPerPx, rowHeight, sequenceHeight, theme, showForward, showReverse, showTranslation, }) {
     const region = regions[0];
-    const width = (region.end - region.start) / bpPerPx;
-    return (_jsx(Wrapper, { ...props, totalHeight: sequenceHeight, width: width, children: _jsx(SequenceSVG, { ...props }) }));
+    const width = Math.ceil((region.end - region.start) / bpPerPx);
+    return (_jsx(Wrapper, { exportSVG: exportSVG, totalHeight: sequenceHeight, width: width, children: _jsx(SequenceSVG, { width: width, showReverse: showReverse, showForward: showForward, theme: theme, showTranslation: showTranslation, colorByCDS: colorByCDS, bpPerPx: bpPerPx, rowHeight: rowHeight, features: features, regions: regions }) }));
 });
 export default DivSequenceRendering;

package/esm/LinearReferenceSequenceDisplay/configSchema.js

@@ -1,5 +1,5 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration';
-import { default as divSequenceRendererConfigSchema } from '../DivSequenceRenderer/configSchema';
+import divSequenceRendererConfigSchema from '../DivSequenceRenderer/configSchema';
 function x() { }
 export const configSchema = ConfigurationSchema('LinearReferenceSequenceDisplay', {
     renderer: divSequenceRendererConfigSchema,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-sequence",
-  "version": "3.0.3",
+  "version": "3.0.5",
   "description": "JBrowse 2 sequence adapters, tracks, etc.",
   "keywords": [
     "jbrowse",
@@ -39,9 +39,9 @@
     "@gmod/abortable-promise-cache": "^2.0.0",
     "@gmod/indexedfasta": "^3.0.0",
     "@gmod/twobit": "^4.0.1",
-    "@jbrowse/core": "^3.0.3",
-    "@jbrowse/plugin-linear-genome-view": "^3.0.3",
-    "@jbrowse/plugin-wiggle": "^3.0.3",
+    "@jbrowse/core": "^3.0.5",
+    "@jbrowse/plugin-linear-genome-view": "^3.0.5",
+    "@jbrowse/plugin-wiggle": "^3.0.5",
     "@mui/material": "^6.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": "f516540428282351d26e46743e69a724651bfb2c"
+  "gitHead": "a03749efe19e51609922272b845a331897346789"
 }