Add display name to metadata fields

kubernetes/loculus/templates/_common-metadata.tpl

@@ -27,6 +27,8 @@ fields:
     type: string
     generateIndex: true
     autocomplete: true
+    customDisplay:
+      type: dataUseTerms
   - name: versionStatus
     type: string
     notSearchable: true
@@ -77,6 +79,14 @@ fields:
     {{- if .notSearchable }}
     notSearchable: {{ .notSearchable }}
     {{- end }}
+    {{- if .displayName }}
+    displayName: {{ .displayName }}
+    {{- end }}
+    {{- if .customDisplay }}
+    customDisplay:
+      type: {{ .customDisplay.type }}
+      url: {{ .customDisplay.url }}
+    {{- end }}
 {{- end}}
 {{- end}}
 

kubernetes/loculus/values.yaml

@@ -207,24 +207,30 @@ defaultOrganisms:
       description: "Ebolavirus Zaire"
       metadata:
         - name: collection_date
+          displayName: Collection date
           type: date
           required: true
         - name: ncbi_release_date
+          displayName: NCBI release date
           type: date
         - name: country
           type: string
           required: true
           generateIndex: true
           autocomplete: true
         - name: isolate_name
+          displayName: Isolate name
           type: string
         - name: author_affiliation
+          displayName: Author affiliation
           type: string
           generateIndex: true
           autocomplete: true
         - name: authors
+          displayName: Authors
           type: string
         - name: submitter_country
+          displayName: Submitter country
           type: string
           generateIndex: true
           autocomplete: true
@@ -238,6 +244,10 @@ defaultOrganisms:
           type: string
         - name: insdc_accession_full
           type: string
+          displayName: INSDC accession
+          customDisplay:
+            type: link
+            url: "https://www.ncbi.nlm.nih.gov/nuccore/{{value}}"
         - name: bioprojects
           type: string
         - name: biosample_accession

website/src/components/SequenceDetailsPage/DataTable.astro

@@ -1,7 +1,6 @@
 ---
 import { DataUseTermsHistoryModal } from './DataUseTermsHistoryModal';
 import { type TableDataEntry } from './getTableData';
-import { DATA_USE_TERMS_FIELD } from '../../settings';
 import { type DataUseTermsHistoryEntry } from '../../types/backend';
 
 interface Props {
@@ -16,19 +15,33 @@ const { tableData, dataUseTermsHistory } = Astro.props;
     <table class='min-w-full'>
         <tbody class='bg-white'>
             {
-                tableData.map(({ label, name, value }) => (
+                tableData.map(({ label, value, customDisplay }) => (
                     <tr>
                         <td class='py-1 whitespace-nowrap text-sm font-medium text-gray-900 text-right w-32'>
                             {label}
                         </td>
                         <td class='px-4 py-1 whitespace-normal text-sm text-gray-600'>
                             <div class='flex items-center gap-3'>
-                                {value}{' '}
-                                {name === DATA_USE_TERMS_FIELD && (
-                                    <DataUseTermsHistoryModal
-                                        dataUseTermsHistory={dataUseTermsHistory}
-                                        client:only='react'
-                                    />
+                                {customDisplay === undefined && value}
+                                {customDisplay !== undefined &&
+                                    customDisplay.type === 'link' &&
+                                    customDisplay.url !== undefined && (
+                                        <a
+                                            href={customDisplay.url.replaceAll('{{value}}', value.toString())}
+                                            target='_blank'
+                                            class='underline'
+                                        >
+                                            {value}
+                                        </a>
+                                    )}
+                                {customDisplay !== undefined && customDisplay.type === 'dataUseTerms' && (
+                                    <>
+                                        {value}{' '}
+                                        <DataUseTermsHistoryModal
+                                            dataUseTermsHistory={dataUseTermsHistory}
+                                            client:only='react'
+                                        />
+                                    </>
                                 )}
                             </div>
                         </td>

website/src/components/SequenceDetailsPage/getTableData.spec.ts

@@ -75,16 +75,19 @@ describe('getTableData', () => {
                     label: 'Metadata field1',
                     name: 'metadataField1',
                     value: 'N/A',
+                    customDisplay: undefined,
                 },
                 {
                     label: 'Metadata field2',
                     name: 'metadataField2',
                     value: 'N/A',
+                    customDisplay: undefined,
                 },
                 {
                     label: 'Timestamp field',
                     name: 'timestampField',
                     value: 'N/A',
+                    customDisplay: undefined,
                 },
                 {
                     label: 'Nucleotide substitutions',

website/src/components/SequenceDetailsPage/getTableData.ts

@@ -4,7 +4,7 @@ import { err, Result } from 'neverthrow';
 
 import { type LapisClient } from '../../services/lapisClient.ts';
 import type { ProblemDetail } from '../../types/backend.ts';
-import type { Metadata, Schema } from '../../types/config.ts';
+import type { Metadata, Schema, CustomDisplay } from '../../types/config.ts';
 import {
     type Details,
     type DetailsResponse,
@@ -14,7 +14,7 @@ import {
     type SequenceEntryHistoryEntry,
 } from '../../types/lapis.ts';
 
-export type TableDataEntry = { label: string; name: string; value: string | number };
+export type TableDataEntry = { label: string; name: string; value: string | number; customDisplay?: CustomDisplay };
 
 export async function getTableData(
     accessionVersion: string,
@@ -97,8 +97,9 @@ function toTableData(config: Schema) {
         aminoAcidInsertions: InsertionCount[];
     }): TableDataEntry[] => {
         const data: TableDataEntry[] = config.metadata.map((metadata) => ({
-            label: sentenceCase(metadata.name),
+            label: metadata.displayName ?? sentenceCase(metadata.name),
             name: metadata.name,
+            customDisplay: metadata.customDisplay,
             value: mapValueToDisplayedValue(details[metadata.name], metadata),
         }));
         data.push(

website/src/types/config.ts

@@ -3,12 +3,21 @@ import z from 'zod';
 import { orderByType } from './lapis.ts';
 import { referenceGenomes } from './referencesGenomes.ts';
 
+export const customDisplay = z.object({
+    type: z.string(),
+    url: z.string().optional(),
+});
+
 export const metadata = z.object({
     name: z.string(),
+    displayName: z.string().optional(),
     type: z.enum(['string', 'date', 'int', 'float', 'pango_lineage', 'timestamp']),
     autocomplete: z.boolean().optional(),
     notSearchable: z.boolean().optional(),
+    customDisplay: customDisplay.optional(),
 });
+
+export type CustomDisplay = z.infer<typeof customDisplay>;
 export type Metadata = z.infer<typeof metadata>;
 
 export type MetadataFilter = Metadata & {