Add mutation badges in a container to check e2e tests.

loculus-project · Apr 26, 2024 · fd978c4 · fd978c4
1 parent f5d7e2c
commit fd978c4
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 19 deletions.
diff --git 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
@@ -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} />
+        ),
+    );
+};