feat(website): specify width for column(s) in search table

docs/src/content/docs/for-administrators/setup-with-kubernetes.md

@@ -134,7 +134,7 @@ organisms:
 
 In this example, the configuration for the "ebolavirus-sudan" organism is defined. It includes schema settings, website display options, silo configuration, preprocessing details, and reference genome information.
 
-Note the metadata section includes various fields for how the metadata of specific sequences should be displayed. Each metadata item must have a `name` which will also be displayed on the page unless `displayName` is also set. The `type` of the data, as well as if the field is `required` and if `autoComplete` is enabled can also be added. Additionally, links from metadata entries to external websites can be added using the `customDisplay` option. We also allow metadata to be grouped in sections, specified by the `header` field. The `noInput` parameter specifies that a parameter is generated internally by loculus (can be specified in the preprocessing pipeline) and should not be expected as input.
+Note the metadata section includes various fields for how the metadata of specific sequences should be displayed. Each metadata item must have a `name` which will also be displayed on the page unless `displayName` is also set. The `type` of the data, as well as if the field is `required` and if `autoComplete` is enabled can also be added. Additionally, links from metadata entries to external websites can be added using the `customDisplay` option. We also allow metadata to be grouped in sections, specified by the `header` field. The `noInput` parameter specifies that a parameter is generated internally by loculus (can be specified in the preprocessing pipeline) and should not be expected as input. You can optionally add a `columnWidth` for the column in the search table, in pixels, which will be the minimal width for the column.
 
 Your preprocessing pipeline can be customized for each organism. Currently, we use `nextclade run` in our preprocessing pipeline and we suggest it as a fast option to do basic checks on your input sequences. Given a `nextclade dataset` (in its simplest form a reference sequence and a gene_annotation file) nextclade tries to align new sequences to the reference and will discard sequences that cannot be aligned. It will also compute mutations, insertions and deletions for the nucleotide sequence as well as for the corresponding genes. If you would like to use our preprocessing set-up you can add a nextclade dataset to your `values.yaml` as follows:
 

kubernetes/loculus/templates/_common-metadata.tpl

@@ -67,12 +67,14 @@ fields:
     type: timestamp
     displayName: Date released
     header: Submission details
+    columnWidth: 100
   - name: releasedDate
     type: string
     hideOnSequenceDetailsPage: true
     generateIndex: true
     autocomplete: true
     displayName: Date released (exact)
+    columnWidth: 100
   - name: dataUseTerms
     type: string
     generateIndex: true
@@ -211,6 +213,9 @@ organisms:
   {{- if .truncateColumnDisplayTo }}
   truncateColumnDisplayTo: {{ .truncateColumnDisplayTo }}
   {{- end }}
+  {{- if .columnWidth }}
+  columnWidth: {{ .columnWidth }}
+  {{- end }}
   {{- if .customDisplay }}
   customDisplay:
     type: {{ quote .customDisplay.type }}

kubernetes/loculus/values.yaml

@@ -75,6 +75,7 @@ defaultOrganismConfig: &defaultOrganismConfig
             fieldType: dateRangeString
         required: true
         notSearchable: true
+        columnWidth: 100
       - name: sampleCollectionDateRangeLower
         displayName: Collection date (lower bound)
         type: date
@@ -128,6 +129,7 @@ defaultOrganismConfig: &defaultOrganismConfig
           inputs:
             timestamp: ncbiReleaseDate
         noInput: true
+        columnWidth: 100
       - name: ncbiUpdateDate
         type: date
         displayName: NCBI update date
@@ -139,6 +141,7 @@ defaultOrganismConfig: &defaultOrganismConfig
         noInput: true
         perSegment: true
         oneHeader: true
+        columnWidth: 100
       - name: geoLocLatitude
         displayName: Latitude
         header: Sample details
@@ -506,6 +509,7 @@ defaultOrganismConfig: &defaultOrganismConfig
           function: check_authors
           inputs:
             authors: authors
+        columnWidth: 280
       - name: authorAffiliations
         displayName: Author affiliations
         enableSubstringSearch: true

website/src/components/SearchPage/Table.tsx

@@ -63,6 +63,7 @@ export const Table: FC<TableProps> = ({
         headerName: schema.metadata.find((m) => m.name === field)?.displayName ?? capitalCase(field),
         maxLength: maxLengths[field],
         type: schema.metadata.find((m) => m.name === field)?.type ?? 'string',
+        columnWidth: schema.metadata.find((m) => m.name === field)?.columnWidth,
     }));
 
     const handleSort = (field: string) => {
@@ -145,6 +146,9 @@ export const Table: FC<TableProps> = ({
                                     key={c.field}
                                     onClick={() => handleSort(c.field)}
                                     className='px-2 py-3 text-xs font-medium tracking-wider text-gray-500 uppercase cursor-pointer last:pr-6 text-left'
+                                    style={{
+                                        minWidth: c.columnWidth != null ? `${c.columnWidth}px` : undefined,
+                                    }}
                                 >
                                     {c.headerName} {orderBy.field === c.field && orderIcon}
                                 </th>
@@ -198,6 +202,9 @@ export const Table: FC<TableProps> = ({
                                     <td
                                         key={`${index}-${c.field}`}
                                         className='px-2 py-2 text-primary-900 last:pr-6'
+                                        style={{
+                                            minWidth: c.columnWidth != null ? `${c.columnWidth}px` : undefined,
+                                        }}
                                         data-tooltip-content={
                                             typeof row[c.field] === 'string' &&
                                             row[c.field]!.toString().length > c.maxLength

website/src/types/config.ts

@@ -54,6 +54,7 @@ export const metadata = z.object({
     rangeSearch: z.boolean().optional(),
     rangeOverlapSearch: rangeOverlapSearch.optional(),
     substringSearch: z.boolean().optional(),
+    columnWidth: z.number().optional(),
 });
 
 export const inputField = z.object({