feat(website): introduce defaultOrderBy field to website config

loculus-project · Feb 5, 2024 · 6206264 · 6206264
1 parent 3e32166
commit 6206264
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 21 deletions.
diff --git a/kubernetes/loculus/values.yaml b/kubernetes/loculus/values.yaml
@@ -35,6 +35,8 @@ instances:
           - division
           - date
           - pango_lineage
+        defaultOrder: descending  
+        defaultOrderBy: date
       silo:
         dateToSortBy: date
         partitionBy: pango_lineage
@@ -99,6 +101,8 @@ instances:
           - division
           - date
           - pango_lineage
+        defaultOrderBy: date
+        defaultOrder: descending 
       silo:
         dateToSortBy: date
         partitionBy: pango_lineage

diff --git a/website/src/components/SearchPage/Table.tsx b/website/src/components/SearchPage/Table.tsx
@@ -18,7 +18,7 @@ type TableProps = {
     metadataFilter: MetadataFilter[];
     mutationFilter: MutationFilter;
     page: number;
-    orderBy?: OrderBy;
+    orderBy: OrderBy;
 };
 
 export const Table: FC<TableProps> = ({ organism, data, schema, metadataFilter, mutationFilter, page, orderBy }) => {
@@ -30,14 +30,17 @@ export const Table: FC<TableProps> = ({ organism, data, schema, metadataFilter,
     }));
 
     const handleSort = (field: string) => {
-        if (orderBy?.field === field) {
+        if (orderBy.field === field) {
             if (orderBy.type === 'ascending') {
                 location.href = routes.searchPage(organism, metadataFilter, mutationFilter, page, {
                     field,
                     type: 'descending',
                 });
             } else {
-                location.href = routes.searchPage(organism, metadataFilter, mutationFilter);
+                location.href = routes.searchPage(organism, metadataFilter, mutationFilter, page, {
+                    field,
+                    type: 'ascending',
+                });
             }
         } else {
             location.href = routes.searchPage(organism, metadataFilter, mutationFilter, page, {
@@ -47,12 +50,12 @@ export const Table: FC<TableProps> = ({ organism, data, schema, metadataFilter,
         }
     };
 
-    let orderIcon: ReactElement | undefined;
-    if (orderBy?.type === 'ascending') {
-        orderIcon = <MdiTriangle className='w-3 h-3 ml-1 inline' />;
-    } else if (orderBy?.type === 'descending') {
-        orderIcon = <MdiTriangleDown className='w-3 h-3 ml-1 inline' />;
-    }
+    const orderIcon: ReactElement =
+        orderBy.type === 'ascending' ? (
+            <MdiTriangle className='w-3 h-3 ml-1 inline' />
+        ) : (
+            <MdiTriangleDown className='w-3 h-3 ml-1 inline' />
+        );
 
     return (
         <div className='w-full overflow-x-auto'>
@@ -61,11 +64,11 @@ export const Table: FC<TableProps> = ({ organism, data, schema, metadataFilter,
                     <thead>
                         <tr>
                             <th onClick={() => handleSort(primaryKey)} className='cursor-pointer'>
-                                {capitalCase(primaryKey)} {orderBy?.field === primaryKey && orderIcon}
+                                {capitalCase(primaryKey)} {orderBy.field === primaryKey && orderIcon}
                             </th>
                             {columns.map((c) => (
                                 <th key={c.field} onClick={() => handleSort(c.field)} className='cursor-pointer'>
-                                    {c.headerName} {orderBy?.field === c.field && orderIcon}
+                                    {c.headerName} {orderBy.field === c.field && orderIcon}
                                 </th>
                             ))}
                         </tr>

diff --git a/website/src/components/SequenceDetailsPage/getTableData.spec.ts b/website/src/components/SequenceDetailsPage/getTableData.spec.ts
@@ -14,6 +14,8 @@ const schema: Schema = {
         { name: 'timestampField', type: 'timestamp' },
     ],
     tableColumns: [],
+    defaultOrderBy: 'metadataField1',
+    defaultOrder: 'ascending',
     primaryKey: 'primary key',
 };
 

diff --git a/website/src/pages/[organism]/search/index.astro b/website/src/pages/[organism]/search/index.astro
@@ -25,7 +25,7 @@ const mutationFilter = getMutationFilter(Astro.url.searchParams);
 const pageParam = Astro.url.searchParams.get('page');
 const page = pageParam !== null ? Number.parseInt(pageParam, 10) : 1;
 const offset = (page - 1) * pageSize;
-const orderBy = getOrderBy(Astro.url.searchParams);
+const orderBy = getOrderBy(Astro.url.searchParams, schema.defaultOrderBy, schema.defaultOrder);
 
 const referenceGenomesSequenceNames = getReferenceGenomesSequenceNames(organism);
 

diff --git a/website/src/pages/[organism]/search/search.ts b/website/src/pages/[organism]/search/search.ts
@@ -107,16 +107,19 @@ export const getMetadataFilters = (getSearchParams: (param: string) => string, o
     });
 };
 
-export const getOrderBy = (searchParams: URLSearchParams): OrderBy | undefined => {
+export const getOrderBy = (
+    searchParams: URLSearchParams,
+    defaultOrderByField: string,
+    defaultOrder: OrderByType,
+): OrderBy => {
     const orderByTypeParam = searchParams.get('order');
     const orderByTypeParsed = orderByTypeParam !== null ? orderByType.safeParse(orderByTypeParam) : undefined;
-    const orderByTypeValue: OrderByType = orderByTypeParsed?.success === true ? orderByTypeParsed.data : 'ascending';
-    return searchParams.get('orderBy') !== null
-        ? {
-              field: searchParams.get('orderBy')!,
-              type: orderByTypeValue,
-          }
-        : undefined;
+    const orderByTypeValue: OrderByType = orderByTypeParsed?.success === true ? orderByTypeParsed.data : defaultOrder;
+    const sortByField = searchParams.get('orderBy') ?? defaultOrderByField;
+    return {
+        field: sortByField,
+        type: orderByTypeValue,
+    };
 };
 
 export const getMutationFilter = (searchParams: URLSearchParams): MutationFilter => {

diff --git a/website/src/types/config.ts b/website/src/types/config.ts
@@ -1,5 +1,6 @@
 import z from 'zod';
 
+import { orderByType } from './lapis.ts';
 import { referenceGenomes } from './referencesGenomes.ts';
 
 export const metadata = z.object({
@@ -29,6 +30,8 @@ const schema = z.object({
     metadata: z.array(metadata),
     tableColumns: z.array(z.string()),
     primaryKey: z.string(),
+    defaultOrderBy: z.string(),
+    defaultOrder: orderByType,
 });
 export type Schema = z.infer<typeof schema>;
 

diff --git a/website/tests/playwrightSetup.ts b/website/tests/playwrightSetup.ts
@@ -29,7 +29,14 @@ export default async function globalSetupForPlaywright() {
 
     const lapisClient = LapisClient.create(
         lapisUrl,
-        { metadata: [], instanceName: 'Test', primaryKey: 'doesNotMatter', tableColumns: [] },
+        {
+            metadata: [],
+            instanceName: 'Test',
+            primaryKey: 'doesNotMatter',
+            defaultOrderBy: 'neitherDoesThis',
+            defaultOrder: 'ascending',
+            tableColumns: [],
+        },
         e2eLogger,
     );