From 0d7cf8674a0388c467638ac21a7a34948bc763c6 Mon Sep 17 00:00:00 2001
From: ivan-aksamentov <ivan.aksamentov@gmail.com>
Date: Mon, 31 Jan 2022 08:44:40 +0100
Subject: [PATCH] fix: shift sequence views such that centered markers are
 visible

Addresses some of the concerns for https://github.com/nextstrain/nextclade/issues/712

Here I shifted sequence (peptide) view's SVG viewBox 1/n of nucleotide (peptide) width to the right. This allows for the markers close to the begging or end of the view to be visible.

This is required after adjustments made for centering markers in
https://github.com/nextstrain/nextclade/pull/638 https://github.com/nextstrain/nextclade/pull/644 https://github.com/nextstrain/nextclade/pull/709
---
 packages/web/src/components/SequenceView/PeptideView.tsx  | 4 +++-
 packages/web/src/components/SequenceView/SequenceView.tsx | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/web/src/components/SequenceView/PeptideView.tsx b/packages/web/src/components/SequenceView/PeptideView.tsx
index 72148e929..7edb82602 100644
--- 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
index 01ec82425..400f09f56 100644
--- 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}