feat(website): SSR on initial load of search page

website/src/components/SearchPage/SearchFullUI.spec.tsx

@@ -98,6 +98,10 @@ function renderSearchFullUI({
             tableColumns: ['field1', 'field3'],
             primaryKey: 'accession',
         } as Schema,
+        initialData: [],
+
+        initialCount: 0,
+        initialQueryDict: {},
     };
 
     render(

website/src/components/SearchPage/SearchFullUI.tsx

@@ -31,6 +31,7 @@ import {
     VISIBILITY_PREFIX,
     COLUMN_VISIBILITY_PREFIX,
     getLapisSearchParameters,
+    getMetadataSchemaWithExpandedRanges,
 } from '../../utils/search.ts';
 import ErrorBox from '../common/ErrorBox.tsx';
 
@@ -42,6 +43,9 @@ interface InnerSearchFullUIProps {
     clientConfig: ClientConfig;
     schema: Schema;
     hiddenFieldValues?: FieldValues;
+    initialData: TableSequenceData[];
+    initialCount: number;
+    initialQueryDict: QueryState;
 }
 interface QueryState {
     [key: string]: string;
@@ -55,45 +59,25 @@ export const InnerSearchFullUI = ({
     clientConfig,
     schema,
     hiddenFieldValues,
+    initialData,
+    initialCount,
+    initialQueryDict,
 }: InnerSearchFullUIProps) => {
     if (!hiddenFieldValues) {
         hiddenFieldValues = {};
     }
+
     const metadataSchema = schema.metadata;
 
     const [isColumnModalOpen, setIsColumnModalOpen] = useState(false);
 
     const metadataSchemaWithExpandedRanges = useMemo(() => {
-        const result = [];
-        for (const field of metadataSchema) {
-            if (field.rangeSearch === true) {
-                const fromField = {
-                    ...field,
-                    name: `${field.name}From`,
-                    label: `From`,
-                    fieldGroup: field.name,
-                    fieldGroupDisplayName: field.displayName ?? sentenceCase(field.name),
-                };
-                const toField = {
-                    ...field,
-                    name: `${field.name}To`,
-                    label: `To`,
-                    fieldGroup: field.name,
-                    fieldGroupDisplayName: field.displayName ?? sentenceCase(field.name),
-                };
-                result.push(fromField);
-                result.push(toField);
-            } else {
-                result.push(field);
-            }
-        }
-        return result;
+        return getMetadataSchemaWithExpandedRanges(metadataSchema);
     }, [metadataSchema]);
 
     const [previewedSeqId, setPreviewedSeqId] = useState<string | null>(null);
     const [previewHalfScreen, setPreviewHalfScreen] = useState(false);
-    const [state, setState] = useQueryAsState({});
-    const [page, setPage] = useState(1);
+    const [state, setState] = useQueryAsState(initialQueryDict);
 
     const searchVisibilities = useMemo(() => {
         return getFieldVisibilitiesFromQuery(schema, state);
@@ -116,6 +100,15 @@ export const InnerSearchFullUI = ({
 
     const orderDirection = state.order ?? schema.defaultOrder ?? 'ascending';
 
+    const page = parseInt(state.page ?? '1', 10);
+
+    const setPage = (newPage: number) => {
+        setState((prev: QueryState) => ({
+            ...prev,
+            page: newPage.toString(),
+        }));
+    };
+
     const setOrderByField = (field: string) => {
         setState((prev: QueryState) => ({
             ...prev,
@@ -130,8 +123,8 @@ export const InnerSearchFullUI = ({
     };
 
     const fieldValues = useMemo(() => {
-        return getFieldValuesFromQuery(state, hiddenFieldValues);
-    }, [state, hiddenFieldValues]);
+        return getFieldValuesFromQuery(state, hiddenFieldValues, schema);
+    }, [state, hiddenFieldValues, schema]);
 
     const setAFieldValue: SetAFieldValue = (fieldName, value) => {
         setState((prev: any) => {
@@ -203,16 +196,20 @@ export const InnerSearchFullUI = ({
 
     const [oldData, setOldData] = useState<TableSequenceData[] | null>(null);
     const [oldCount, setOldCount] = useState<number | null>(null);
+    const [firstClientSideLoadOfDataCompleted, setFirstClientSideLoadOfDataCompleted] = useState(false);
+    const [firstClientSideLoadOfCountCompleted, setFirstClientSideLoadOfCountCompleted] = useState(false);
 
     useEffect(() => {
         if (detailsHook.data?.data && oldData !== detailsHook.data.data) {
             setOldData(detailsHook.data.data);
+            setFirstClientSideLoadOfDataCompleted(true);
         }
     }, [detailsHook.data?.data, oldData]);
 
     useEffect(() => {
         if (aggregatedHook.data?.data && oldCount !== aggregatedHook.data.data[0].count) {
             setOldCount(aggregatedHook.data.data[0].count);
+            setFirstClientSideLoadOfCountCompleted(true);
         }
     }, [aggregatedHook.data?.data, oldCount]);
 
@@ -284,7 +281,13 @@ export const InnerSearchFullUI = ({
                 {!(totalSequences === undefined && oldCount === null) && (
                     <div
                         className={`
-                        ${detailsHook.isLoading || aggregatedHook.isLoading ? 'opacity-50 pointer-events-none' : ''}
+                        ${
+                            !(firstClientSideLoadOfCountCompleted && firstClientSideLoadOfDataCompleted)
+                                ? 'cursor-wait pointer-events-none'
+                                : detailsHook.isLoading || aggregatedHook.isLoading
+                                  ? 'opacity-50 pointer-events-none'
+                                  : ''
+                        }
                         `}
                     >
                         <div className='text-sm text-gray-800 mb-6 justify-between flex md:px-6 items-baseline'>
@@ -294,10 +297,13 @@ export const InnerSearchFullUI = ({
                                     ? totalSequences.toLocaleString()
                                     : oldCount !== null
                                       ? oldCount.toLocaleString()
-                                      : ''}{' '}
+                                      : initialCount}{' '}
                                 sequence
                                 {totalSequences === 1 ? '' : 's'}
-                                {detailsHook.isLoading || aggregatedHook.isLoading ? (
+                                {detailsHook.isLoading ||
+                                aggregatedHook.isLoading ||
+                                !firstClientSideLoadOfCountCompleted ||
+                                !firstClientSideLoadOfDataCompleted ? (
                                     <span className='loading loading-spinner loading-xs ml-3 appearSlowly'></span>
                                 ) : null}
                             </div>
@@ -323,7 +329,7 @@ export const InnerSearchFullUI = ({
                             data={
                                 detailsHook.data?.data !== undefined
                                     ? (detailsHook.data.data as TableSequenceData[])
-                                    : oldData ?? []
+                                    : oldData ?? initialData
                             }
                             setPreviewedSeqId={setPreviewedSeqId}
                             previewedSeqId={previewedSeqId}

website/src/components/SearchPage/useQueryAsState.js

@@ -12,7 +12,11 @@ export default function useQueryAsState(defaultDict) {
         for (const [key, value] of urlParams) {
             newDict[key] = value;
         }
-        setValueDict(newDict);
+
+        setValueDict( // only change if actually different
+        (prev) =>
+            JSON.stringify(prev) === JSON.stringify(newDict) ? prev : newDict
+        );
     }, []);
 
     useEffect(() => {

website/src/pages/[organism]/search/index.astro

@@ -8,6 +8,8 @@ import { siloVersionStatuses } from '../../../types/lapis';
 import { getAccessToken } from '../../../utils/getAccessToken';
 import { getMyGroups } from '../../../utils/getMyGroups';
 import { getReferenceGenomesSequenceNames } from '../../../utils/search';
+import { performLapisSearchQueries } from '../../../utils/serversideSearch';
+
 const hiddenFieldValues = {
     [VERSION_STATUS_FIELD]: siloVersionStatuses.latestVersion,
     [IS_REVOCATION_FIELD]: 'false',
@@ -29,6 +31,15 @@ const accessToken = getAccessToken(Astro.locals.session);
 const myGroups = accessToken !== undefined ? await getMyGroups(accessToken) : [];
 
 const referenceGenomeSequenceNames = getReferenceGenomesSequenceNames(cleanedOrganism.key);
+
+const initialQueryDict = Object.fromEntries(Astro.url.searchParams.entries());
+const { data, totalCount } = await performLapisSearchQueries(
+    initialQueryDict,
+    schema,
+    referenceGenomeSequenceNames,
+    hiddenFieldValues,
+    cleanedOrganism.key,
+);
 ---
 
 <BaseLayout title={`${cleanedOrganism.displayName} - Browse`} noHorizontalPadding>
@@ -43,5 +54,8 @@ const referenceGenomeSequenceNames = getReferenceGenomesSequenceNames(cleanedOrg
         accessToken={accessToken}
         referenceGenomesSequenceNames={referenceGenomeSequenceNames}
         hiddenFieldValues={hiddenFieldValues}
+        initialData={data}
+        initialCount={totalCount}
+        initialQueryDict={initialQueryDict}
     />
 </BaseLayout>

website/src/pages/[organism]/submission/[groupId]/released.astro

@@ -7,7 +7,9 @@ import { GROUP_ID_FIELD, VERSION_STATUS_FIELD } from '../../../../settings';
 import { siloVersionStatuses } from '../../../../types/lapis';
 import { getAccessToken } from '../../../../utils/getAccessToken';
 import { getReferenceGenomesSequenceNames } from '../../../../utils/search';
+import { performLapisSearchQueries } from '../../../../utils/serversideSearch';
 import { getGroupsAndCurrentGroup } from '../../../../utils/submissionPages';
+
 const groupsResult = await getGroupsAndCurrentGroup(Astro.params, Astro.locals.session);
 if (groupsResult.isErr()) {
     return new Response(undefined, { status: groupsResult.error.status });
@@ -34,9 +36,20 @@ const hiddenFieldValues = {
     [VERSION_STATUS_FIELD]: siloVersionStatuses.latestVersion,
     [GROUP_ID_FIELD]: group.groupId,
 };
+
+const initialQueryDict = Object.fromEntries(Astro.url.searchParams.entries());
+const { data, totalCount } = await performLapisSearchQueries(
+    initialQueryDict,
+    schema,
+    referenceGenomeSequenceNames,
+    hiddenFieldValues,
+    cleanedOrganism.key,
+);
 ---
 
 <SubmissionPageWrapper groupsResult={groupsResult} title='Released sequences'>
+    <h1 class='title px-3 py-2 ml-1'>Search</h1>
+
     <SearchFullUI
         client:load
         clientConfig={clientConfig}
@@ -46,5 +59,8 @@ const hiddenFieldValues = {
         accessToken={accessToken}
         referenceGenomesSequenceNames={referenceGenomeSequenceNames}
         hiddenFieldValues={hiddenFieldValues}
+        initialData={data}
+        initialCount={totalCount}
+        initialQueryDict={initialQueryDict}
     />
 </SubmissionPageWrapper>

website/src/utils/search.ts

@@ -1,8 +1,11 @@
+import { sentenceCase } from 'change-case';
+
 import { type BaseType } from './sequenceTypeHelpers';
 import type { TableSequenceData } from '../components/SearchPage/Table';
 import { getReferenceGenomes } from '../config';
-import type { MetadataFilter, Schema } from '../types/config';
+import type { Metadata, MetadataFilter, Schema } from '../types/config';
 import type { ReferenceGenomesSequenceNames, ReferenceAccession, NamedSequence } from '../types/referencesGenomes';
+
 export const VISIBILITY_PREFIX = 'visibility_';
 
 export type MutationQuery = {
@@ -13,8 +16,9 @@ export type MutationQuery = {
 
 export const COLUMN_VISIBILITY_PREFIX = 'column_';
 
-const ORDER_KEY = 'orderBy';
-const ORDER_DIRECTION_KEY = 'order';
+export const ORDER_KEY = 'orderBy';
+export const ORDER_DIRECTION_KEY = 'order';
+export const PAGE_KEY = 'page';
 
 export type SearchResponse = {
     data: TableSequenceData[];
@@ -79,19 +83,46 @@ export const getColumnVisibilitiesFromQuery = (schema: Schema, state: Record<str
     const initiallyVisibleAccessor: VisibilityAccessor = (field) => schema.tableColumns.includes(field.name);
     return getFieldOrColumnVisibilitiesFromQuery(schema, state, COLUMN_VISIBILITY_PREFIX, initiallyVisibleAccessor);
 };
+export const getMetadataSchemaWithExpandedRanges = (metadataSchema: Metadata[]) => {
+    const result = [];
+    for (const field of metadataSchema) {
+        if (field.rangeSearch === true) {
+            const fromField = {
+                ...field,
+                name: `${field.name}From`,
+                label: `From`,
+                fieldGroup: field.name,
+                fieldGroupDisplayName: field.displayName ?? sentenceCase(field.name),
+            };
+            const toField = {
+                ...field,
+                name: `${field.name}To`,
+                label: `To`,
+                fieldGroup: field.name,
+                fieldGroupDisplayName: field.displayName ?? sentenceCase(field.name),
+            };
+            result.push(fromField);
+            result.push(toField);
+        } else {
+            result.push(field);
+        }
+    }
+    return result;
+};
 
 export const getFieldValuesFromQuery = (
     state: Record<string, string>,
     hiddenFieldValues: Record<string, any>,
+    schema: Schema,
 ): Record<string, any> => {
-    const fieldKeys = Object.keys(state)
-        .filter((key) => !key.startsWith(VISIBILITY_PREFIX) && !key.startsWith(COLUMN_VISIBILITY_PREFIX))
-        .filter((key) => key !== ORDER_KEY && key !== ORDER_DIRECTION_KEY);
-
     const values: Record<string, any> = { ...hiddenFieldValues };
-    for (const key of fieldKeys) {
-        values[key] = state[key];
+    const expandedSchema = getMetadataSchemaWithExpandedRanges(schema.metadata);
+    for (const field of expandedSchema) {
+        if (field.name in state) {
+            values[field.name] = state[field.name];
+        }
     }
+
     return values;
 };
 

website/src/utils/serversideSearch.ts

@@ -0,0 +1,62 @@
+import {
+    getFieldValuesFromQuery,
+    getLapisSearchParameters,
+    ORDER_DIRECTION_KEY,
+    ORDER_KEY,
+    PAGE_KEY,
+    getColumnVisibilitiesFromQuery,
+    type SearchResponse,
+} from './search';
+import type { TableSequenceData } from '../components/SearchPage/Table';
+import { LapisClient } from '../services/lapisClient';
+import { pageSize } from '../settings';
+import type { Schema } from '../types/config';
+import type { ReferenceGenomesSequenceNames } from '../types/referencesGenomes';
+
+export const performLapisSearchQueries = async (
+    state: Record<string, string>,
+    schema: Schema,
+    referenceGenomesSequenceNames: ReferenceGenomesSequenceNames,
+    hiddenFieldValues: Record<string, any>,
+    organism: string,
+): Promise<SearchResponse> => {
+    const fieldValues = getFieldValuesFromQuery(state, hiddenFieldValues, schema);
+    const lapisSearchParameters = getLapisSearchParameters(fieldValues, referenceGenomesSequenceNames);
+
+    const orderByField = ORDER_KEY in state ? state[ORDER_KEY] : schema.defaultOrderBy;
+    const orderDirection = state[ORDER_DIRECTION_KEY] ?? schema.defaultOrder;
+    const page = state[PAGE_KEY] ? parseInt(state[PAGE_KEY], 10) : 1;
+
+    const columnVisibilities = getColumnVisibilitiesFromQuery(schema, state);
+
+    const columnsToShow = schema.metadata
+        .filter((field) => columnVisibilities.get(field.name) === true)
+        .map((field) => field.name);
+
+    const client = LapisClient.createForOrganism(organism);
+
+    const [detailsResult, aggregatedResult] = await Promise.all([
+        // @ts-expect-error because OrderBy typing does not accept this for unknown reasons
+        client.call('details', {
+            ...lapisSearchParameters,
+            fields: [...columnsToShow, schema.primaryKey],
+            limit: pageSize,
+            offset: (page - 1) * pageSize,
+            orderBy: [
+                {
+                    field: orderByField,
+                    type: orderDirection === 'ascending' ? 'ascending' : 'descending',
+                },
+            ],
+        }),
+        client.call('aggregated', {
+            ...lapisSearchParameters,
+            fields: [],
+        }),
+    ]);
+
+    return {
+        data: detailsResult.unwrapOr({ data: [] }).data as TableSequenceData[],
+        totalCount: aggregatedResult.unwrapOr({ data: [{ count: 0 }] }).data[0].count,
+    };
+};