From 6206264f01e2352cff10787d1aac4995ee9cae94 Mon Sep 17 00:00:00 2001 From: Tobias Kampmann Date: Wed, 31 Jan 2024 14:27:36 +0100 Subject: [PATCH] feat(website): introduce `defaultOrderBy` field to website config --- kubernetes/loculus/values.yaml | 4 +++ website/src/components/SearchPage/Table.tsx | 25 +++++++++++-------- .../SequenceDetailsPage/getTableData.spec.ts | 2 ++ .../src/pages/[organism]/search/index.astro | 2 +- website/src/pages/[organism]/search/search.ts | 19 ++++++++------ website/src/types/config.ts | 3 +++ website/tests/playwrightSetup.ts | 9 ++++++- 7 files changed, 43 insertions(+), 21 deletions(-) diff --git a/kubernetes/loculus/values.yaml b/kubernetes/loculus/values.yaml index 04b3cbf589..b0dea20718 100644 --- 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 index 1035e373d6..8d17092580 100644 --- 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 = ({ organism, data, schema, metadataFilter, mutationFilter, page, orderBy }) => { @@ -30,14 +30,17 @@ export const Table: FC = ({ 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 = ({ organism, data, schema, metadataFilter, } }; - let orderIcon: ReactElement | undefined; - if (orderBy?.type === 'ascending') { - orderIcon = ; - } else if (orderBy?.type === 'descending') { - orderIcon = ; - } + const orderIcon: ReactElement = + orderBy.type === 'ascending' ? ( + + ) : ( + + ); return (
@@ -61,11 +64,11 @@ export const Table: FC = ({ organism, data, schema, metadataFilter, handleSort(primaryKey)} className='cursor-pointer'> - {capitalCase(primaryKey)} {orderBy?.field === primaryKey && orderIcon} + {capitalCase(primaryKey)} {orderBy.field === primaryKey && orderIcon} {columns.map((c) => ( handleSort(c.field)} className='cursor-pointer'> - {c.headerName} {orderBy?.field === c.field && orderIcon} + {c.headerName} {orderBy.field === c.field && orderIcon} ))} diff --git a/website/src/components/SequenceDetailsPage/getTableData.spec.ts b/website/src/components/SequenceDetailsPage/getTableData.spec.ts index 80254b6933..1c68032adb 100644 --- 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 index f1bc4bde18..b814f03f9f 100644 --- 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 index 187f41e246..7aaabe8f22 100644 --- 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 index cb07313411..6048380d59 100644 --- 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; diff --git a/website/tests/playwrightSetup.ts b/website/tests/playwrightSetup.ts index d99c8636fa..79ae05bb45 100644 --- 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, );