Remove unused substitutionsToCommaSeparatedString function, additiona…

…lly increase timeout.
loculus-project · Apr 26, 2024 · 5f892e0 · 5f892e0
1 parent fd978c4
commit 5f892e0
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 45 deletions.
diff --git a/website/playwright.config.ts b/website/playwright.config.ts
@@ -19,6 +19,7 @@ export default defineConfig({
         screenshot: 'only-on-failure',
     },
     globalSetup: './tests/playwrightSetup.ts',
+    timeout: 2 * 60 * 1000, // Extend further if we get timeouts in CI
 
     projects: [
         {

diff --git a/website/src/components/SequenceDetailsPage/DataTable.astro b/website/src/components/SequenceDetailsPage/DataTable.astro
@@ -25,12 +25,15 @@ const headerMap = toHeaderMap(tableData);
                                 <tr>
                                     <td class='py-1 w-44 text-sm font-medium text-gray-900 text-right'>{label}</td>
                                     <td class='px-4 py-1 text-sm text-gray-600'>
-                                        <div class='flex items-center gap-3 whitespace-wrap'>
+                                        <div class='items-center gap-3 whitespace-wrap'>
                                             {customDisplay === undefined && value}
                                             {customDisplay !== undefined &&
-                                                customDisplay.type === 'badge' && 
-                                                (customDisplay.value === undefined ? '' : <SubstitutionsContainer values={customDisplay.value}/>)
-                                            }
+                                                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 = {
@@ -16,42 +17,35 @@ export type AaSub = {
 
 export const NucSubBadge: FC<NucSubProps> = ({ pos, mutationTo, mutationFrom }) => {
     return (
-        <span>
-            <button className='border-2 bg-transparent rounded-[3px] font-mono text-xs'>
-                <span className='font-mono text-xs overflow-auto'>
-                    <span
-                        className='px-[4px] py-[2px] rounded-s-[3px]'
-                        style={{ background: getNucColor(mutationFrom) }}
-                    >
-                        {mutationFrom}
-                    </span>
-                    <span className='px-[4px] py-[2px] bg-gray-200'>{pos + 1}</span>
-                    <span className='px-[4px] py-[2px] rounded-e-[3px]' style={{ background: getNucColor(mutationTo) }}>
-                        {mutationTo}
-                    </span>
+        <span className='whitespace-wrap'>
+            <span className='border-2 bg-transparent rounded-[3px] font-mono text-xs overflow-auto'>
+                <span className='px-[4px] py-[2px] rounded-s-[3px]' style={{ background: getNucColor(mutationFrom) }}>
+                    {mutationFrom}
+                </span>
+                <span className='px-[4px] py-[2px] bg-gray-200'>{pos + 1}</span>
+                <span className='px-[4px] py-[2px] rounded-e-[3px]' style={{ background: getNucColor(mutationTo) }}>
+                    {mutationTo}
                 </span>
-            </button>
-            <span>{', '}</span>
+            </span>
+            <span> </span>
         </span>
     );
 };
 
 export const AaSubBadge: FC<AaSub> = ({ pos, mutationTo, mutationFrom, gene }) => {
     return (
-        <span>
-            <button className='border-2 bg-transparent rounded-[3px] font-mono text-xs'>
-                <span className='font-mono text-xs'>
-                    <span className='px-[4px] py-[2px] rounded-s-[3px]'>{gene}:</span>
-                    <span className='px-[4px] py-[2px]' style={{ background: getAaColor(mutationFrom) }}>
-                        {mutationFrom}
-                    </span>
-                    <span className='px-[4px] py-[2px] bg-gray-200'>{pos + 1}</span>
-                    <span className='px-[4px] py-[2px] rounded-e-[3px]' style={{ background: getAaColor(mutationTo) }}>
-                        {mutationTo}
-                    </span>
+        <span className='whitespace-wrap'>
+            <span className='border-2 bg-transparent rounded-[3px] font-mono text-xs overflow-auto'>
+                <span className='px-[4px] py-[2px] rounded-s-[3px]'>{gene}:</span>
+                <span className='px-[4px] py-[2px]' style={{ background: getAaColor(mutationFrom) }}>
+                    {mutationFrom}
+                </span>
+                <span className='px-[4px] py-[2px] bg-gray-200'>{pos + 1}</span>
+                <span className='px-[4px] py-[2px] rounded-e-[3px]' style={{ background: getAaColor(mutationTo) }}>
+                    {mutationTo}
                 </span>
-            </button>
-            <span>{', '}</span>
+            </span>
+            <span> </span>
         </span>
     );
 };
@@ -114,7 +108,7 @@ export function getAaColor(aa: string): string {
 
 export const SubstitutionsContainer = ({ values }: { values: MutationProportionCount[] }) => {
     return values.map(({ mutationFrom, mutationTo, position, sequenceName }) =>
-        sequenceName === undefined ? (
+        sequenceName === null ? (
             <NucSubBadge mutationFrom={mutationFrom} pos={position} mutationTo={mutationTo} />
         ) : (
             <AaSubBadge gene={sequenceName} mutationFrom={mutationFrom} pos={position} mutationTo={mutationTo} />

diff --git a/website/src/components/SequenceDetailsPage/getTableData.spec.ts b/website/src/components/SequenceDetailsPage/getTableData.spec.ts
@@ -151,7 +151,7 @@ describe('getTableData', () => {
         expect(data).toContainEqual({
             label: 'Nucleotide substitutions',
             name: 'nucleotideSubstitutions',
-            value: 'T10A, C30G',
+            value: '',
             header: 'Mutations, insertions, deletions',
             customDisplay: {
                 type: 'badge',
@@ -163,6 +163,7 @@ describe('getTableData', () => {
                         mutationTo: 'A',
                         position: 10,
                         proportion: 0,
+                        sequenceName: null,
                     },
                     {
                         count: 0,
@@ -171,6 +172,7 @@ describe('getTableData', () => {
                         mutationTo: 'G',
                         position: 30,
                         proportion: 0,
+                        sequenceName: null,
                     },
                 ],
             },
@@ -184,7 +186,7 @@ describe('getTableData', () => {
         expect(data).toContainEqual({
             label: 'Amino acid substitutions',
             name: 'aminoAcidSubstitutions',
-            value: 'gene1:N10Y, gene1:T30N',
+            value: '',
             header: 'Mutations, insertions, deletions',
             customDisplay: {
                 type: 'badge',

diff --git a/website/src/components/SequenceDetailsPage/getTableData.ts b/website/src/components/SequenceDetailsPage/getTableData.ts
@@ -124,7 +124,7 @@ function toTableData(config: Schema) {
             {
                 label: 'Nucleotide substitutions',
                 name: 'nucleotideSubstitutions',
-                value: substitutionsToCommaSeparatedString(nucleotideMutations),
+                value: '',
                 header: 'Mutations, insertions, deletions',
                 customDisplay: { type: 'badge', value: substitutionsList(nucleotideMutations) },
             },
@@ -143,7 +143,7 @@ function toTableData(config: Schema) {
             {
                 label: 'Amino acid substitutions',
                 name: 'aminoAcidSubstitutions',
-                value: substitutionsToCommaSeparatedString(aminoAcidMutations),
+                value: '',
                 header: 'Mutations, insertions, deletions',
                 customDisplay: { type: 'badge', value: substitutionsList(aminoAcidMutations) },
             },
@@ -177,13 +177,6 @@ function mapValueToDisplayedValue(value: undefined | null | string | number, met
     return value;
 }
 
-function substitutionsToCommaSeparatedString(mutationData: MutationProportionCount[]) {
-    return mutationData
-        .filter((m) => m.mutationTo !== '-')
-        .map((m) => m.mutation)
-        .join(', ');
-}
-
 function substitutionsList(mutationData: MutationProportionCount[]) {
     return mutationData.filter((m) => m.mutationTo !== '-');
 }

diff --git a/website/tests/pages/sequences/sequences.page.ts b/website/tests/pages/sequences/sequences.page.ts
@@ -36,7 +36,7 @@ export class SequencePage {
     }
 
     public async loadSequences() {
-        await expect(this.loadButton).toBeVisible();
+        await expect(this.loadButton).toBeVisible({ timeout: 60000 });
         await this.loadButton.click();
     }