From fd978c4734ba2491eee0672dd43b0a822eccaba4 Mon Sep 17 00:00:00 2001
From: "Anna (Anya) Parker" <50943381+anna-parker@users.noreply.github.com>
Date: Fri, 26 Apr 2024 16:52:40 +0200
Subject: [PATCH] Add mutation badges in a container to check e2e tests.

---
 .../SequenceDetailsPage/DataTable.astro       | 23 ++++---------------
 .../SequenceDetailsPage/MutationBadge.tsx     | 11 +++++++++
 2 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/website/src/components/SequenceDetailsPage/DataTable.astro b/website/src/components/SequenceDetailsPage/DataTable.astro
index 9ed36f4693..dc8ab9cbfb 100644
--- a/website/src/components/SequenceDetailsPage/DataTable.astro
+++ b/website/src/components/SequenceDetailsPage/DataTable.astro
@@ -1,6 +1,6 @@
 ---
 import { DataUseTermsHistoryModal } from './DataUseTermsHistoryModal';
-import { NucSubBadge, AaSubBadge } from './MutationBadge';
+import { SubstitutionsContainer } from './MutationBadge';
 import { toHeaderMap, type TableDataEntry } from './getTableData';
 import { type DataUseTermsHistoryEntry } from '../../types/backend';
 
@@ -28,24 +28,9 @@ const headerMap = toHeaderMap(tableData);
                                         <div class='flex items-center gap-3 whitespace-wrap'>
                                             {customDisplay === undefined && value}
                                             {customDisplay !== undefined &&
-                                                customDisplay.type === 'badge' &&
-                                                customDisplay.value?.map(
-                                                    ({ mutationFrom, mutationTo, position, sequenceName }) =>
-                                                        sequenceName === undefined ? (
-                                                            <NucSubBadge
-                                                                mutationFrom={mutationFrom}
-                                                                pos={position}
-                                                                mutationTo={mutationTo}
-                                                            />
-                                                        ) : (
-                                                            <AaSubBadge
-                                                                gene={sequenceName}
-                                                                mutationFrom={mutationFrom}
-                                                                pos={position}
-                                                                mutationTo={mutationTo}
-                                                            />
-                                                        ),
-                                                )}
+                                                customDisplay.type === 'badge' && 
+                                                (customDisplay.value === undefined ? '' : <SubstitutionsContainer values={customDisplay.value}/>)
+                                            }
                                             {customDisplay !== undefined &&
                                                 customDisplay.type === 'link' &&
                                                 customDisplay.url !== undefined && (
diff --git a/website/src/components/SequenceDetailsPage/MutationBadge.tsx b/website/src/components/SequenceDetailsPage/MutationBadge.tsx
index 2c4879c40f..50106e2882 100644
--- a/website/src/components/SequenceDetailsPage/MutationBadge.tsx
+++ b/website/src/components/SequenceDetailsPage/MutationBadge.tsx
@@ -1,4 +1,5 @@
 import { type FC } from 'react';
+import type { MutationProportionCount } from '../../types/lapis';
 
 type NucSubProps = {
     pos: number;
@@ -110,3 +111,13 @@ export const AMINOACID_COLORS: Record<string, string> = {
 export function getAaColor(aa: string): string {
     return AMINOACID_COLORS[aa] ?? AMINOACID_COLORS.X;
 }
+
+export const SubstitutionsContainer = ({ values }: { values: MutationProportionCount[] }) => {
+    return values.map(({ mutationFrom, mutationTo, position, sequenceName }) =>
+        sequenceName === undefined ? (
+            <NucSubBadge mutationFrom={mutationFrom} pos={position} mutationTo={mutationTo} />
+        ) : (
+            <AaSubBadge gene={sequenceName} mutationFrom={mutationFrom} pos={position} mutationTo={mutationTo} />
+        ),
+    );
+};