fix

loculus-project · May 20, 2024 · 5b2bfa8 · 5b2bfa8
1 parent 1cf2fc2
commit 5b2bfa8
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 10 deletions.
diff --git a/website/src/components/SearchPage/CustomizeModal.tsx b/website/src/components/SearchPage/CustomizeModal.tsx
@@ -28,6 +28,7 @@ interface CustomizeModalProps {
     alwaysPresentFieldNames: string[];
     visibilities: Map<string, boolean>;
     setAVisibility: (fieldName: string, isVisible: boolean) => void;
+    nameToLabelMap: Record<string, string>;
 }
 
 export const CustomizeModal: React.FC<CustomizeModalProps> = ({
@@ -36,7 +37,9 @@ export const CustomizeModal: React.FC<CustomizeModalProps> = ({
     alwaysPresentFieldNames,
     visibilities,
     setAVisibility,
+    nameToLabelMap
 }) => {
+    console.log('nameToLabelMap', nameToLabelMap);
 
     return (
         <Transition appear show={isCustomizeModalOpen}>
@@ -63,7 +66,7 @@ export const CustomizeModal: React.FC<CustomizeModalProps> = ({
                             {Array.from(visibilities).map(([fieldName, visible]) => (
                                 <CheckboxField
                                     key={fieldName}
-                                    label={fieldName}
+                                    label={nameToLabelMap[fieldName]}
                                     checked={visible}
                                     onChange={(e) => {
                                         setAVisibility(fieldName, e.target.checked);

diff --git a/website/src/components/SearchPage/SearchForm.spec.tsx b/website/src/components/SearchPage/SearchForm.spec.tsx
@@ -127,7 +127,7 @@ describe('SearchForm', () => {
             await new Promise((resolve) => setTimeout(resolve, 1000));
         }
         );
-        screen.logTestingPlaygroundURL();
+
         throw new Error('stop here'+ valuer);
 
         expect(setAFieldValue).toHaveBeenCalledWith('field1', filterValue);
@@ -202,7 +202,13 @@ describe('SearchForm', () => {
     });
 
     test('toggle field visibility', async () => {
-        renderSearchForm();
+        renderSearchForm({
+            visibilities: new Map([
+                ['field1', true],
+                ['field2', true],
+                ['field3', true],
+            ]),
+        });
 
         expect(await screen.findByLabelText('Field 1')).toBeVisible();
 
@@ -216,11 +222,10 @@ describe('SearchForm', () => {
 
         const closeButton = await screen.findByRole('button', { name: 'Close' });
         await userEvent.click(closeButton);
-
-        await act(async () => {
-            await new Promise((resolve) => setTimeout(resolve, 1000));
-        });
-
+        // wait for the label to disappear
+        await screen.findByLabelText('Field 1');
+        screen.logTestingPlaygroundURL();
         expect(screen.queryByLabelText('Field 1')).not.toBeInTheDocument();
+
     });
 });
diff --git a/website/src/components/SearchPage/SearchForm.tsx b/website/src/components/SearchPage/SearchForm.tsx
@@ -67,6 +67,12 @@ export const SearchForm = ({
                         alwaysPresentFieldNames={[]}
                         visibilities={visibilities}
                         setAVisibility={setAVisibility}
+                        nameToLabelMap={
+                            consolidatedMetadataSchema.reduce((acc, field) => {
+                                acc[field.name] = field.displayName ?? field.label ?? sentenceCase(field.name);
+                                return acc;
+                            }, {} as Record<string, string>)
+                        }
                     />
                     <div className='flex flex-col'>
                         <AccessionField

diff --git a/website/src/components/SearchPage/SearchFullUI.tsx b/website/src/components/SearchPage/SearchFullUI.tsx
@@ -18,6 +18,7 @@ import type { OrderBy } from '../../types/lapis.ts';
 import type { ReferenceGenomesSequenceNames } from '../../types/referencesGenomes.ts';
 import type { ClientConfig } from '../../types/runtimeConfig.ts';
 import type { SearchResponse } from '../../utils/search.ts';
+import { sentenceCase } from 'change-case';
 
 const orderKey = 'orderBy';
 const orderDirectionKey = 'order';
@@ -55,14 +56,14 @@ export const InnerSearchFullUI = ({
                     name: `${field.name}From`,
                     label: `From`,
                     fieldGroup: field.name,
-                    fieldGroupDisplayName: field.displayName,
+                    fieldGroupDisplayName: field.displayName ?? sentenceCase(field.name),
                 };
                 const toField = {
                     ...field,
                     name: `${field.name}To`,
                     label: `To`,
                     fieldGroup: field.name,
-                    fieldGroupDisplayName: field.displayName,
+                    fieldGroupDisplayName: field.displayName ?? sentenceCase(field.name),
                 };
                 result.push(fromField);
                 result.push(toField);