From d41923146cb65216d80bc6b7d6092d7da63e5910 Mon Sep 17 00:00:00 2001
From: Felix Hennig <mail@felixhennig.com>
Date: Tue, 31 Dec 2024 18:09:55 +0000
Subject: [PATCH] Pull through display names

---
 .../components/Submission/DataUploadForm.tsx  |  2 +-
 .../FileUpload/ColumnMappingModal.tsx         | 56 +++++++++++++------
 .../components/Submission/RevisionForm.tsx    |  2 +-
 .../components/Submission/SubmissionForm.tsx  |  2 +-
 website/src/config.ts                         | 12 +++-
 .../[organism]/submission/template/index.ts   |  2 +-
 6 files changed, 51 insertions(+), 25 deletions(-)

diff --git a/website/src/components/Submission/DataUploadForm.tsx b/website/src/components/Submission/DataUploadForm.tsx
index 9a2d093e04..75b98a43ae 100644
--- a/website/src/components/Submission/DataUploadForm.tsx
+++ b/website/src/components/Submission/DataUploadForm.tsx
@@ -35,7 +35,7 @@ type DataUploadFormProps = {
     action: UploadAction;
     group: Group;
     referenceGenomeSequenceNames: ReferenceGenomesSequenceNames;
-    metadataTemplateFields: string[];
+    metadataTemplateFields: Map<string, string | undefined>;
     onSuccess: () => void;
     onError: (message: string) => void;
 };
diff --git a/website/src/components/Submission/FileUpload/ColumnMappingModal.tsx b/website/src/components/Submission/FileUpload/ColumnMappingModal.tsx
index fd7440f3fb..0c916373e3 100644
--- a/website/src/components/Submission/FileUpload/ColumnMappingModal.tsx
+++ b/website/src/components/Submission/FileUpload/ColumnMappingModal.tsx
@@ -4,48 +4,58 @@ import { BaseDialog } from '../../common/BaseDialog';
 
 export class ColumnMapping {
     private readonly map: ReadonlyMap<string, string>;
+    private readonly displayNames: ReadonlyMap<string, string | undefined>;
 
-    private constructor(map: Map<string, string>) {
+    private constructor(map: ReadonlyMap<string, string>, displayNames: ReadonlyMap<string, string | undefined>) {
         this.map = map;
+        this.displayNames = displayNames;
     }
 
     /* Create a new mapping with the given columns, doing a best-effort to pre-match columns. */
-    public static fromColumns(sourceColumns: string[], targetColumns: string[]) {
+    public static fromColumns(sourceColumns: string[], targetColumns: Map<string, string | undefined>) {
         const mapping = new Map<string, string>();
-        targetColumns.forEach((targetColumn) => {
-            // TODO also check for display name similarity.
+        [...targetColumns.entries()].forEach(([targetColumn, targetColumnDisplayName]) => {
+            // TODO improve with fuzzy matching
             if (sourceColumns.includes(targetColumn)) {
                 mapping.set(targetColumn, targetColumn);
+                // TODO improve with fuzzy matching
+            } else if (targetColumnDisplayName !== undefined && sourceColumns.includes(targetColumnDisplayName)) {
+                mapping.set(targetColumn, targetColumnDisplayName);
             } else {
                 mapping.set(targetColumn, sourceColumns[0]);
             }
         });
-        return new ColumnMapping(mapping);
+        return new ColumnMapping(mapping, targetColumns);
     }
 
     /* Update the mapping with new source and target columns, trying to keep as much of the 
        mapping intact as possible. */
-    public update(newSourceColumns: string[], newTargetColumns: string[]): ColumnMapping {
+    public update(newSourceColumns: string[], newTargetColumns: Map<string, string | undefined>): ColumnMapping {
         const newMapping = new Map<string, string>();
-        newTargetColumns.forEach((targetColumn) => {
+        [...newTargetColumns.entries()].forEach(([targetColumn, _targetColumnDisplayName]) => {
             const prevSourceCol = this.map.get(targetColumn);
             if (prevSourceCol && newSourceColumns.includes(prevSourceCol)) {
                 newMapping.set(targetColumn, prevSourceCol);
             } else {
+                // TODO improve this
                 newMapping.set(targetColumn, newSourceColumns[0]);
             }
         });
-        return new ColumnMapping(newMapping);
+        return new ColumnMapping(newMapping, newTargetColumns);
     }
 
-    public entries(): [string, string][] {
-        return Array.from(this.map.entries());
+    public entries(): [string, string | undefined, string][] {
+        return Array.from(this.map.entries()).map(([targetCol, sourceCol]) => [
+            targetCol,
+            this.displayNames.get(targetCol),
+            sourceCol,
+        ]);
     }
 
     public updateWith(k: string, v: string): ColumnMapping {
         const newMapping = new Map(this.map);
         newMapping.set(k, v);
-        return new ColumnMapping(newMapping);
+        return new ColumnMapping(newMapping, this.displayNames);
     }
 
     /* Apply this mapping to a TSV file, returning a new file with remapped columns. */
@@ -69,7 +79,7 @@ interface ColumnMappingModalProps {
     inputFile: File;
     columnMapping: ColumnMapping | null;
     setColumnMapping: (newMapping: ColumnMapping) => void;
-    possibleTargetColumns: string[];
+    possibleTargetColumns: Map<string, string | undefined>;
 }
 
 export const ColumnMappingModal: FC<ColumnMappingModalProps> = ({
@@ -134,11 +144,12 @@ export const ColumnMappingModal: FC<ColumnMappingModalProps> = ({
                                 </tr>
                             </thead>
                             <tbody>
-                                {currentMapping.entries().map(([k, v]) => (
+                                {currentMapping.entries().map(([targetCol, targetColDisplayName, sourceCol]) => (
                                     <ColumnSelectorRow
-                                        key={k}
-                                        selectingFor={k}
-                                        selectedOption={v}
+                                        key={targetCol}
+                                        selectingFor={targetCol}
+                                        selectingForDisplayName={targetColDisplayName}
+                                        selectedOption={sourceCol}
                                         options={inputColumns}
                                         setColumnMapping={setCurrentMapping}
                                     />
@@ -173,6 +184,7 @@ async function extractColumns(_tsvFile: File): Promise<string[]> {
 
 interface ColumnSelectorRowProps {
     selectingFor: string;
+    selectingForDisplayName: string | undefined;
     options: string[];
     selectedOption: string;
     setColumnMapping: Dispatch<SetStateAction<ColumnMapping | null>>;
@@ -180,14 +192,22 @@ interface ColumnSelectorRowProps {
 
 export const ColumnSelectorRow: FC<ColumnSelectorRowProps> = ({
     selectingFor,
+    selectingForDisplayName,
     options,
     selectedOption,
     setColumnMapping,
 }) => {
-    // TODO it would be cool to have the 'display name' for the columns available here
     return (
         <tr key={selectingFor} className='border-gray-400 border-solid border-x-0 border-y'>
-            <td>{selectingFor}</td>
+            <td className='pr-4'>
+                {selectingForDisplayName ? (
+                    <>
+                        {selectingForDisplayName} (<span className='font-mono'>{selectingFor}</span>)
+                    </>
+                ) : (
+                    <>{selectingFor}</>
+                )}
+            </td>
             <td>
                 <select
                     className='rounded-md border-none px-0 py-1'
diff --git a/website/src/components/Submission/RevisionForm.tsx b/website/src/components/Submission/RevisionForm.tsx
index e67ae2bbbc..cdd5f6b8f2 100644
--- a/website/src/components/Submission/RevisionForm.tsx
+++ b/website/src/components/Submission/RevisionForm.tsx
@@ -13,7 +13,7 @@ type RevisionFormProps = {
     clientConfig: ClientConfig;
     group: Group;
     referenceGenomeSequenceNames: ReferenceGenomesSequenceNames;
-    metadataTemplateFields: string[];
+    metadataTemplateFields: Map<string, string | undefined>;
 };
 
 export const RevisionForm: FC<RevisionFormProps> = ({
diff --git a/website/src/components/Submission/SubmissionForm.tsx b/website/src/components/Submission/SubmissionForm.tsx
index c781db1f3d..580d162df2 100644
--- a/website/src/components/Submission/SubmissionForm.tsx
+++ b/website/src/components/Submission/SubmissionForm.tsx
@@ -13,7 +13,7 @@ type SubmissionFormProps = {
     clientConfig: ClientConfig;
     group: Group;
     referenceGenomeSequenceNames: ReferenceGenomesSequenceNames;
-    metadataTemplateFields: string[];
+    metadataTemplateFields: Map<string, string | undefined>;
 };
 
 export const SubmissionForm: FC<SubmissionFormProps> = ({
diff --git a/website/src/config.ts b/website/src/config.ts
index b586ab380c..d64b4c837a 100644
--- a/website/src/config.ts
+++ b/website/src/config.ts
@@ -93,12 +93,18 @@ export function getSchema(organism: string): Schema {
     return getConfig(organism).schema;
 }
 
-export function getMetadataTemplateFields(organism: string, action: 'submit' | 'revise'): string[] {
+export function getMetadataTemplateFields(
+    organism: string,
+    action: 'submit' | 'revise',
+): Map<string, string | undefined> {
     const schema = getConfig(organism).schema;
     const baseFields = schema.metadataTemplate ?? getConfig(organism).schema.inputFields.map((field) => field.name);
     const extraFields = action === 'submit' ? [SUBMISSION_ID_FIELD] : [ACCESSION_FIELD, SUBMISSION_ID_FIELD];
-    // TODO it would be cool if this also returned the display names
-    return [...extraFields, ...baseFields];
+    const allFields = [...extraFields, ...baseFields];
+    const fieldsToDisplaynames = new Map(
+        allFields.map((field) => [field, schema.metadata.find((metadata) => metadata.name === field)?.displayName]),
+    );
+    return fieldsToDisplaynames;
 }
 
 export function getRuntimeConfig(): RuntimeConfig {
diff --git a/website/src/pages/[organism]/submission/template/index.ts b/website/src/pages/[organism]/submission/template/index.ts
index b640729976..aa1e1ea4de 100644
--- a/website/src/pages/[organism]/submission/template/index.ts
+++ b/website/src/pages/[organism]/submission/template/index.ts
@@ -16,7 +16,7 @@ export const GET: APIRoute = ({ params, request }) => {
 
     const action: UploadAction = new URL(request.url).searchParams.get('format') === 'revise' ? 'revise' : 'submit';
     const fieldNames = getMetadataTemplateFields(organism.key, action);
-    const tsvTemplate = fieldNames.join('\t') + '\n';
+    const tsvTemplate = [...fieldNames.keys()].join('\t') + '\n';
 
     const headers: Record<string, string> = {
         'Content-Type': 'text/tsv', // eslint-disable-line @typescript-eslint/naming-convention