Fix occasional 1px gap in seqeunce track (#4842)

GMOD · Feb 14, 2025 · be4e0a1 · be4e0a1
1 parent 1111d58
commit be4e0a1
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 14 deletions.
diff --git a/plugins/sequence/src/DivSequenceRenderer/components/DivSequenceRendering.tsx b/plugins/sequence/src/DivSequenceRenderer/components/DivSequenceRendering.tsx
@@ -21,6 +21,7 @@ function Translation({
   codonTable,
   seq,
   frame,
+  width,
   bpPerPx,
   colorByCDS,
   region,
@@ -31,6 +32,7 @@ function Translation({
   theme,
 }: {
   codonTable: Record<string, string>
+  width: number
   seq: string
   frame: Frame
   colorByCDS: boolean
@@ -62,7 +64,6 @@ function Translation({
     })
   }
 
-  const width = (region.end - region.start) / bpPerPx
   const codonWidth = (1 / bpPerPx) * 3
   const renderLetter = 1 / bpPerPx >= 12
   const frameOffset = frameShift / bpPerPx
@@ -186,6 +187,7 @@ function Sequence({
 
 function SequenceSVG({
   regions,
+  width,
   theme: configTheme,
   colorByCDS,
   features = new Map(),
@@ -197,6 +199,7 @@ function SequenceSVG({
   rowHeight,
 }: {
   regions: Region[]
+  width: number
   theme?: Theme
   features: Map<string, Feature>
   colorByCDS: boolean
@@ -238,6 +241,7 @@ function SequenceSVG({
       {topFrames.map(index => (
         <Translation
           key={`translation-${index}`}
+          width={width}
           colorByCDS={colorByCDS}
           seq={seq}
           y={(currY += rowHeight)}
@@ -281,6 +285,7 @@ function SequenceSVG({
       {bottomFrames.map(index => (
         <Translation
           key={`rev-translation-${index}`}
+          width={width}
           colorByCDS={colorByCDS}
           seq={seq}
           y={(currY += rowHeight)}
@@ -329,7 +334,19 @@ function Wrapper({
   )
 }
 
-const DivSequenceRendering = observer(function (props: {
+const DivSequenceRendering = observer(function ({
+  exportSVG,
+  features,
+  regions,
+  colorByCDS,
+  bpPerPx,
+  rowHeight,
+  sequenceHeight,
+  theme,
+  showForward,
+  showReverse,
+  showTranslation,
+}: {
   exportSVG?: { rasterizeLayers: boolean }
   features: Map<string, Feature>
   regions: Region[]
@@ -343,13 +360,23 @@ const DivSequenceRendering = observer(function (props: {
   showReverse?: boolean
   showTranslation?: boolean
 }) {
-  const { regions, bpPerPx, sequenceHeight } = props
   const region = regions[0]!
-  const width = (region.end - region.start) / bpPerPx
+  const width = Math.ceil((region.end - region.start) / bpPerPx)
 
   return (
-    <Wrapper {...props} totalHeight={sequenceHeight} width={width}>
-      <SequenceSVG {...props} />
+    <Wrapper exportSVG={exportSVG} totalHeight={sequenceHeight} width={width}>
+      <SequenceSVG
+        width={width}
+        showReverse={showReverse}
+        showForward={showForward}
+        theme={theme}
+        showTranslation={showTranslation}
+        colorByCDS={colorByCDS}
+        bpPerPx={bpPerPx}
+        rowHeight={rowHeight}
+        features={features}
+        regions={regions}
+      />
     </Wrapper>
   )
 })

diff --git a/...uence/src/DivSequenceRenderer/components/__snapshots__/DivSequenceRendering.test.tsx.snap b/...uence/src/DivSequenceRenderer/components/__snapshots__/DivSequenceRendering.test.tsx.snap
@@ -1384,48 +1384,48 @@ exports[`renders with one, zoomed way out 1`] = `
   <svg
     data-testid="sequence_track"
     height="160"
-    style="display: block; width: 333.3333333333333px; height: 160px; user-select: none;"
-    width="333.3333333333333"
+    style="display: block; width: 334px; height: 160px; user-select: none;"
+    width="334"
   >
     <rect
       fill="#d8d8d8"
       height="20"
-      width="333.3333333333333"
+      width="334"
       x="0"
       y="0"
     />
     <rect
       fill="#adadad"
       height="20"
-      width="333.3333333333333"
+      width="334"
       x="0"
       y="20"
     />
     <rect
       fill="#8f8f8f"
       height="20"
-      width="333.3333333333333"
+      width="334"
       x="0"
       y="40"
     />
     <rect
       fill="#8f8f8f"
       height="20"
-      width="333.3333333333333"
+      width="334"
       x="0"
       y="60"
     />
     <rect
       fill="#adadad"
       height="20"
-      width="333.3333333333333"
+      width="334"
       x="0"
       y="80"
     />
     <rect
       fill="#d8d8d8"
       height="20"
-      width="333.3333333333333"
+      width="334"
       x="0"
       y="100"
     />