diff --git a/website/src/components/SearchPage/SearchFullUI.tsx b/website/src/components/SearchPage/SearchFullUI.tsx index 5f8aa89aa..5e37dbe9e 100644 --- a/website/src/components/SearchPage/SearchFullUI.tsx +++ b/website/src/components/SearchPage/SearchFullUI.tsx @@ -170,10 +170,13 @@ export const InnerSearchFullUI = ({ const detailsHook = hooks.useDetails({}, {}); const lapisSearchParameters = useMemo(() => { + + return getLapisSearchParameters(fieldValues, referenceGenomesSequenceNames); }, [fieldValues, referenceGenomesSequenceNames]); useEffect(() => { + aggregatedHook.mutate({ ...lapisSearchParameters, fields: [], @@ -199,17 +202,26 @@ export const InnerSearchFullUI = ({ const [oldData, setOldData] = useState(null); const [oldCount, setOldCount] = useState(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]); @@ -281,7 +293,9 @@ export const InnerSearchFullUI = ({ {!(totalSequences === undefined && oldCount === null && initialCount===undefined) && (
@@ -294,7 +308,7 @@ export const InnerSearchFullUI = ({ : (initialCount !== undefined ? initialCount : '')}{' '} sequence {totalSequences === 1 ? '' : 's'} - {detailsHook.isLoading || aggregatedHook.isLoading ? ( + {(detailsHook.isLoading || aggregatedHook.isLoading || !firstClientSideLoadOfCountCompleted || !firstClientSideLoadOfDataCompleted) ? ( ) : null}
diff --git a/website/src/components/SearchPage/useQueryAsState.js b/website/src/components/SearchPage/useQueryAsState.js index 0c5a201b2..606811b32 100644 --- a/website/src/components/SearchPage/useQueryAsState.js +++ b/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(() => { diff --git a/website/src/pages/[organism]/search/index.astro b/website/src/pages/[organism]/search/index.astro index 96568d89b..502b1c0ff 100644 --- a/website/src/pages/[organism]/search/index.astro +++ b/website/src/pages/[organism]/search/index.astro @@ -33,7 +33,7 @@ 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,1,100); +const {data, totalCount} = await performLapisSearchQueries(initialQueryDict, schema, referenceGenomeSequenceNames, hiddenFieldValues, cleanedOrganism.key); --- diff --git a/website/src/utils/search.ts b/website/src/utils/search.ts index 881b0bf59..e8b28cfa9 100644 --- a/website/src/utils/search.ts +++ b/website/src/utils/search.ts @@ -18,6 +18,7 @@ export const COLUMN_VISIBILITY_PREFIX = 'column_'; export const ORDER_KEY = 'orderBy'; export const ORDER_DIRECTION_KEY = 'order'; +export const PAGE_KEY = 'page'; export type SearchResponse = { diff --git a/website/src/utils/serversideSearch.ts b/website/src/utils/serversideSearch.ts index 2bdcd42b2..e087176df 100644 --- a/website/src/utils/serversideSearch.ts +++ b/website/src/utils/serversideSearch.ts @@ -3,7 +3,8 @@ import type { TableSequenceData } from '../components/SearchPage/Table'; import type { Schema } from '../types/config'; import type { ReferenceGenomesSequenceNames } from '../types/referencesGenomes'; import { LapisClient } from '../services/lapisClient'; -import { getFieldValuesFromQuery, getLapisSearchParameters, ORDER_DIRECTION_KEY, ORDER_KEY, getColumnVisibilitiesFromQuery } from './search'; +import { getFieldValuesFromQuery, getLapisSearchParameters, ORDER_DIRECTION_KEY, ORDER_KEY, PAGE_KEY, getColumnVisibilitiesFromQuery } from './search'; +import { pageSize } from '../settings'; // If these types are not already defined in the new file, you'll need to import or define them: export type SearchResponse = { @@ -19,8 +20,7 @@ export const performLapisSearchQueries = async ( referenceGenomesSequenceNames: ReferenceGenomesSequenceNames, hiddenFieldValues: Record, organism: string, - page: number, - pageSize: number + ): Promise => { const fieldValues = getFieldValuesFromQuery(state, hiddenFieldValues, schema); const lapisSearchParameters = getLapisSearchParameters(fieldValues, referenceGenomesSequenceNames); @@ -29,6 +29,7 @@ export const performLapisSearchQueries = async ( const orderByField = state[ORDER_KEY] ?? schema.defaultOrderBy ?? schema.primaryKey; const orderDirection = state[ORDER_DIRECTION_KEY] ?? schema.defaultOrder ?? 'ascending'; + const page = state[PAGE_KEY] ? parseInt(state[PAGE_KEY]) : 1; const columnVisibilities = getColumnVisibilitiesFromQuery(schema, state);