feat(website): add customDisplay.label for grouped field labels on details page

Add optional `label` property to `customDisplay` config so grouped fields
can show a different label than their `displayName` on the sequence details
page. Use this to show "Sampling location" for the geoLocation group while
keeping `displayName` as "Collection country" for the submission form and
search page. Revert integration test changes since displayName is unchanged.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: theosanderson

integration-tests/tests/specs/features/multiseg-multiref-submission-flow.spec.ts

@@ -40,7 +40,9 @@ test.describe('Multi-segment multi-reference submission flow', () => {
         const accessionVersions = await releasedPage.waitForSequencesInSearch(1);
         const firstAccessionVersion = accessionVersions[0];
         await releasedPage.openPreviewOfAccessionVersion(`${firstAccessionVersion.accession}.1`);
-        const expectedDisplayName = new RegExp(`^Laos/${firstAccessionVersion.accession}\\.1`);
+        const expectedDisplayName = new RegExp(
+            `^Display Name: Laos/${firstAccessionVersion.accession}\\.1`,
+        );
         await expect(page.getByText(expectedDisplayName)).toBeVisible();
         await expect(
             page.getByTestId('sequence-preview-modal').getByText('Length S'),
@@ -130,7 +132,9 @@ test.describe('Multi-segment multi-reference submission flow', () => {
         await releasedPage.waitForAccessionVersionInSearch(firstAccessionVersion.accession, 2);
         await releasedPage.expectResultTableCellText(authorAffiliations);
         await releasedPage.openPreviewOfAccessionVersion(`${firstAccessionVersion.accession}.2`);
-        const expectedDisplayName = new RegExp(`^Laos/${firstAccessionVersion.accession}\\.2`);
+        const expectedDisplayName = new RegExp(
+            `^Display Name: Laos/${firstAccessionVersion.accession}\\.2`,
+        );
         await expect(page.getByText(expectedDisplayName)).toBeVisible();
     });
 });

integration-tests/tests/specs/features/singleseg-multiref-submission-flow.spec.ts

@@ -36,7 +36,9 @@ test.describe('Single segment multi-reference submission flow', () => {
         const accessionVersions = await releasedPage.waitForSequencesInSearch(1);
         const firstAccessionVersion = accessionVersions[0];
         await releasedPage.openPreviewOfAccessionVersion(`${firstAccessionVersion.accession}.1`);
-        const expectedDisplayName = new RegExp(`^Uganda/${firstAccessionVersion.accession}\\.1`);
+        const expectedDisplayName = new RegExp(
+            `^Display Name: Uganda/${firstAccessionVersion.accession}\\.1`,
+        );
         await expect(page.getByText(expectedDisplayName)).toBeVisible();
         await expect(
             page.getByTestId('sequence-preview-modal').getByText('Clade EV-A71', { exact: true }),
@@ -120,7 +122,9 @@ test.describe('Single segment multi-reference submission flow', () => {
         await releasedPage.waitForAccessionVersionInSearch(firstAccessionVersion.accession, 2);
         await releasedPage.expectResultTableCellText(authorAffiliations);
         await releasedPage.openPreviewOfAccessionVersion(`${firstAccessionVersion.accession}.2`);
-        const expectedDisplayName = new RegExp(`^Uganda/${firstAccessionVersion.accession}\\.2`);
+        const expectedDisplayName = new RegExp(
+            `^Display Name: Uganda/${firstAccessionVersion.accession}\\.2`,
+        );
         await expect(page.getByText(expectedDisplayName)).toBeVisible();
     });
 });

kubernetes/loculus/values.schema.json

@@ -176,6 +176,11 @@
             "url": {
               "groups": ["metadata"],
               "type": "string"
+            },
+            "label": {
+              "groups": ["metadata"],
+              "type": "string",
+              "description": "Label to display for grouped fields on the sequence details page. Overrides the field's displayName when fields are grouped via displayGroup."
             }
           }
         },

kubernetes/loculus/values.yaml

@@ -220,14 +220,15 @@ defaultOrganismConfig: &defaultOrganismConfig
         orderOnDetailsPage: 440
         guidance: Geo-coordinate longitude in decimal degree (WGS84) format, i.e. values in range -180 to 180, where positive values are east of the Prime Meridian.
       - name: geoLocCountry
-        displayName: Sampling location
+        displayName: Collection country
         generateIndex: true
         autocomplete: true
         initiallyVisible: true
         includeInDownloadsByDefault: true
         customDisplay:
           type: geoLocation
           displayGroup: geoLocation
+          label: Sampling location
         header: Sample details
         order: 20
         orderOnDetailsPage: 400

website/src/components/SequenceDetailsPage/getDataTableData.ts

@@ -36,7 +36,7 @@ function grouping(listTableDataEntries: TableDataEntry[]): TableDataEntry[] {
                     value: '[]',
                     header: entry.header,
                     customDisplay: entry.customDisplay,
-                    label: entry.label,
+                    label: entry.customDisplay.label ?? entry.label,
                     orderOnDetailsPage: entry.orderOnDetailsPage,
                 });
             }

website/src/types/config.ts

@@ -39,6 +39,7 @@ export const customDisplay = z.object({
     html: z.string().optional(),
     value: z.array(segmentedMutations).optional(),
     displayGroup: z.string().optional(),
+    label: z.string().optional(),
     linkMenuItems: z.array(linkMenuItem).optional(),
 });