ensure searchable

loculus-project · Dec 23, 2024 · 1f96160 · 1f96160
1 parent fda9c22
commit 1f96160
Showing 1 changed file with 19 additions and 16 deletions.
diff --git a/website/src/components/OrganismTableSelector.tsx b/website/src/components/OrganismTableSelector.tsx
@@ -20,7 +20,7 @@ type Props = {
 const OrganismTableSelector: FC<Props> = ({ organisms }) => {
     const [selectedOrganism, setSelectedOrganism] = useState<OrganismMetadata | null>(null);
     const [groupedFields, setGroupedFields] = useState<Map<string, InputField[]>>(new Map());
-    const [expandedHeaders, setExpandedHeaders] = useState<Set<string>>(new Set(['Required fields']));
+    const [expandedHeaders, setExpandedHeaders] = useState<Set<string>>(new Set(['Required fields', 'Desired fields']));
 
     const handleOrganismSelect = (event: { target: { value: string } }) => {
         const organismKey = event.target.value;
@@ -69,22 +69,25 @@ const OrganismTableSelector: FC<Props> = ({ organisms }) => {
                             metadata_fields_descriptions.csv
                         </a>
                     </div>
-                    <div>
-                        {Array.from(groupedFields.entries()).map(([header, fields]) => (
-                            <div key={header} className='mb-8'>
-                                <h3
-                                    className='text-lg font-semibold mb-4 cursor-pointer'
-                                    onClick={() => toggleHeader(header)}
-                                >
-                                    {header}
-                                    <IwwaArrowDown className='inline-block -mt-1 ml-1 h-4 w-4' />
-                                </h3>
-                                {expandedHeaders.has(header) && (
-                                    <MetadataTable fields={fields} metadata={selectedOrganism.metadata} />
-                                )}
+                    {Array.from(groupedFields.entries()).map(([header, fields]) => (
+                        <div key={header} className='mb-8'>
+                            <h3
+                                className='text-lg font-semibold mb-4 cursor-pointer'
+                                onClick={() => toggleHeader(header)}
+                            >
+                                {header}
+                                <IwwaArrowDown className='inline-block -mt-1 ml-1 h-4 w-4' />
+                            </h3>
+                            <div
+                                className={`transition-all duration-300 ${
+                                    expandedHeaders.has(header) ? 'block' : 'sr-only'
+                                }`}
+                                data-table-header={header}
+                            >
+                                <MetadataTable fields={fields} metadata={selectedOrganism.metadata} />
                             </div>
-                        ))}
-                    </div>
+                        </div>
+                    ))}
                 </div>
             )}
         </div>