feat(website): improve review page by removing null values (#2000)

* improve review page by removing null values * Automated code formatting --------- Co-authored-by: Loculus bot <[email protected]>
loculus-project · May 22, 2024 · 86b657b · 86b657b
1 parent dabff53
commit 86b657b
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 11 deletions.
diff --git a/website/src/components/ReviewPage/ReviewCard.tsx b/website/src/components/ReviewPage/ReviewCard.tsx
@@ -197,16 +197,18 @@ const isAnnotationPresent = (metadataField: string) => (item: ProcessingAnnotati
 
 const MetadataList: FC<MetadataListProps> = ({ data, isLoading }) =>
     !isLoading &&
-    Object.entries(data.processedData.metadata).map(([metadataName, value], index) => (
-        <KeyValueComponent
-            accessionVersion={getAccessionVersionString(data)}
-            key={index}
-            keyName={metadataName}
-            value={displayMetadataField(value)}
-            warnings={data.warnings?.filter(isAnnotationPresent(metadataName))}
-            errors={data.errors?.filter(isAnnotationPresent(metadataName))}
-        />
-    ));
+    Object.entries(data.processedData.metadata).map(([metadataName, value], index) =>
+        value === null ? null : (
+            <KeyValueComponent
+                accessionVersion={getAccessionVersionString(data)}
+                key={index}
+                keyName={metadataName}
+                value={displayMetadataField(value)}
+                warnings={data.warnings?.filter(isAnnotationPresent(metadataName))}
+                errors={data.errors?.filter(isAnnotationPresent(metadataName))}
+            />
+        ),
+    );
 
 type ErrorsProps = {
     errors: ProcessingAnnotation[];

diff --git a/website/src/utils/displayMetadataField.ts b/website/src/utils/displayMetadataField.ts
@@ -1,3 +1,17 @@
 import type { MetadataField } from '../types/backend.ts';
 
-export const displayMetadataField = (value: MetadataField) => (value === null ? 'null' : value.toString());
+export const displayMetadataField = (value: MetadataField) => {
+    if (value === null) {
+        return 'null';
+    }
+
+    if (typeof value === 'number' && Number.isInteger(value)) {
+        return value.toString();
+    }
+
+    if (typeof value === 'number') {
+        return value.toFixed(2);
+    }
+
+    return value.toString();
+};