Merge pull request #713 from nextstrain/fix/markers-at-edges

nextstrain · Feb 10, 2022 · dc94807 · dc94807
2 parents 295d070 + 39bc2dc
commit dc94807
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/packages/web/src/components/SequenceView/PeptideView.tsx b/packages/web/src/components/SequenceView/PeptideView.tsx
@@ -7,6 +7,7 @@ import styled from 'styled-components'
 
 import type { AnalysisResult, Gene, GeneWarning, Warnings } from 'src/algorithms/types'
 import type { State } from 'src/state/reducer'
+import { AA_MIN_WIDTH_PX } from 'src/constants'
 import { selectGeneMap } from 'src/state/algorithm/algorithm.selectors'
 import { useTranslationSafe } from 'src/helpers/useTranslationSafe'
 import { getSafeId } from 'src/helpers/getSafeId'
@@ -135,7 +136,8 @@ export function PeptideViewUnsizedDisconnected({ width, sequence, warnings, gene
 
   return (
     <SequenceViewWrapper>
-      <SequenceViewSVG viewBox={`0 0 ${width} 10`}>
+      {/* Padding of 1/2 of an AA is added on both sides, such that the markers close to the edges are visible */}
+      <SequenceViewSVG viewBox={`${-AA_MIN_WIDTH_PX / 2} 0 ${width + AA_MIN_WIDTH_PX / 2} 10`}>
         <rect fill="transparent" x={0} y={-10} width={gene.length} height="30" />
 
         {unknownAaRangesForGene &&

diff --git a/packages/web/src/components/SequenceView/SequenceView.tsx b/packages/web/src/components/SequenceView/SequenceView.tsx
@@ -7,6 +7,7 @@ import styled from 'styled-components'
 import { selectGenomeSize } from 'src/state/algorithm/algorithm.selectors'
 import type { State } from 'src/state/reducer'
 import type { AnalysisResult } from 'src/algorithms/types'
+import { BASE_MIN_WIDTH_PX } from 'src/constants'
 
 import { SequenceMarkerGap } from './SequenceMarkerGap'
 import { SequenceMarkerMissing } from './SequenceMarkerMissing'
@@ -98,7 +99,8 @@ export function SequenceViewUnsizedDisconnected({ sequence, width, genomeSize }:
 
   return (
     <SequenceViewWrapper>
-      <SequenceViewSVG viewBox={`0 0 ${width} 10`}>
+      {/* Padding of 1/2 of a nuc is added on both sides, such that the markers close to the edges are visible */}
+      <SequenceViewSVG viewBox={`${-BASE_MIN_WIDTH_PX / 2} 0 ${width + BASE_MIN_WIDTH_PX / 2} 10`}>
         <rect fill="transparent" x={0} y={-10} width={genomeSize} height="30" />
         <SequenceMarkerUnsequencedStart
           seqName={seqName}