Skip to content

Commit

Permalink
perf: improve search target speed by pagination strategy (#1205)
Browse files Browse the repository at this point in the history
  • Loading branch information
@caoxing9
caoxing9 authored Dec 30, 2024
1 parent 6bb6988 commit 251d400
Showing 1 changed file with 46 additions and 75 deletions.
121 changes: 46 additions & 75 deletions apps/nextjs-app/src/features/app/blocks/view/search/SearchCountPagination.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ enum PageDirection {
type ISearchMap = Record<number, NonNullable<ISearchIndexVo>[number]>;

const PaginationBuffer = 300;
const PaginationGap = 100;
const PaginationGap = 200;

type ISearchCountPaginationProps = Pick<ISearchButtonProps, 'shareView'>;

Expand All @@ -41,7 +41,7 @@ export const SearchCountPagination = forwardRef<
const tableId = useTableId();
const view = useView() as GridView;
const fields = useFields();
const [currentPage, setCurrentPage] = useState(0);
const [currentIndex, setCurrentIndex] = useState(0);
const { gridRef, setSearchCursor } = useGridSearchStore();

useImperativeHandle(ref, () => ({
Expand Down Expand Up @@ -108,31 +108,33 @@ export const SearchCountPagination = forwardRef<
queryFn: async () => {
setSearchCursor(null);
const nextMap = await getNextIndex();
if (totalCount <= PaginationBuffer) {
if (totalCount <= PaginationBuffer || currentIndex === 1) {
return nextMap;
}

const preMap = await getPreviousIndex();

return {
...preMap,
...nextMap,
};
},
enabled: Boolean(tableId && value && currentPage !== 0),
enabled: Boolean(tableId && value && currentIndex !== 0),
refetchOnWindowFocus: false,
});

const getPreviousIndex = async () => {
const finalResult: ISearchMap = {};
let skip = 0;
const previousCursor = currentPage - PaginationBuffer - 1;
const previousCursor = currentIndex - PaginationBuffer - 1;
if (previousCursor === 0) {
skip = totalCount - PaginationBuffer;
skip = 0;
}
if (previousCursor > 0) {
skip = currentPage - PaginationBuffer;
skip = currentIndex - PaginationBuffer;
}
const baseQueryRo = {
skip: skip,
skip: skip || undefined,
take: PaginationBuffer,
viewId: view?.id,
orderBy: viewOrderBy,
Expand All @@ -145,33 +147,13 @@ export const SearchCountPagination = forwardRef<
? (baseQueryRo: ISearchIndexByQueryRo) => getShareViewSearchIndex(view.shareId!, baseQueryRo)
: (baseQueryRo: ISearchIndexByQueryRo) => getSearchIndex(tableId!, baseQueryRo);

if (previousCursor < 0) {
const preSkip = previousCursor + totalCount;
const [preResult, nextResult] = await Promise.all([
previousFn({ ...baseQueryRo, skip: preSkip }),
previousFn({ ...baseQueryRo }),
]);
preResult?.data &&
preResult?.data?.forEach((result, index) => {
const indexNumber = preSkip + index + 1;
finalResult[indexNumber] = result;
});

nextResult?.data &&
nextResult.data?.forEach((result, index) => {
const indexNumber = index + 1;
finalResult[indexNumber] = result;
});
return finalResult;
} else {
const result = await previousFn(baseQueryRo);
result?.data &&
result.data?.forEach((result, index) => {
const indexNumber = skip + index + 1;
finalResult[indexNumber] = result;
});
return finalResult;
}
const result = await previousFn(baseQueryRo);
result?.data &&
result.data?.forEach((result, index) => {
const indexNumber = skip + index + 1;
finalResult[indexNumber] = result;
});
return finalResult;
};

const getNextIndex = async () => {
Expand All @@ -184,69 +166,58 @@ export const SearchCountPagination = forwardRef<
groupBy: view.group,
filter: view.filter,
};
const nextCursor = currentPage + PaginationBuffer - 1;
const nextFn = shareView
? (baseQueryRo: ISearchIndexByQueryRo) => getShareViewSearchIndex(view.shareId!, baseQueryRo)
: (baseQueryRo: ISearchIndexByQueryRo) => getSearchIndex(tableId!, baseQueryRo);
if (nextCursor <= totalCount) {
const skip = currentPage - 1;
const result = await nextFn({ ...baseQueryRo, skip });
result?.data &&
result.data?.forEach((result, index) => {
const indexNumber = skip + index + 1;
finalResult[indexNumber] = result;
});
return finalResult;
} else {
const preSkip = currentPage - 1;
const [preResult, nextResult] = await Promise.all([
nextFn({ ...baseQueryRo, skip: preSkip }),
nextFn({ ...baseQueryRo }),
]);

preResult?.data &&
preResult?.data?.forEach((result, index) => {
const indexNumber = preSkip + index + 1;
finalResult[indexNumber] = result;
});
nextResult?.data &&
nextResult.data?.forEach((result, index) => {
const indexNumber = index + 1;
finalResult[indexNumber] = result;
});
return finalResult;
}
const skip = currentIndex - 1 < 0 ? 0 : currentIndex - 1;
const result = await nextFn({ ...baseQueryRo, skip });

result?.data &&
result.data?.forEach((result, index) => {
const indexNumber = skip + index + 1;
finalResult[indexNumber] = result;
});
return finalResult;
};

useEffect(() => {
if (currentPage && indexData?.[currentPage]) {
const index = indexData?.[currentPage];
if (currentIndex && indexData?.[currentIndex]) {
const index = indexData?.[currentIndex];
index && setIndexSelection(index.index, index.fieldId);
}
}, [currentPage, indexData, setIndexSelection]);
}, [currentIndex, indexData, setIndexSelection]);

useEffect(() => {
if (totalCount) {
setCurrentPage(1);
setCurrentIndex(1);
return;
}

setCurrentPage(0);
setCurrentIndex(0);
}, [totalCount]);

// refetch the index window
useEffect(() => {
if (!indexData || totalCount <= PaginationBuffer || indexFetching) return;
const nextAnchor = ((currentPage + totalCount + PaginationGap - 1) % totalCount) + 1;
const prevAnchor = ((currentPage + totalCount - PaginationGap - 1) % totalCount) + 1;

const nextAnchor =
currentIndex + PaginationBuffer - PaginationGap >= totalCount
? totalCount
: currentIndex + PaginationBuffer - PaginationGap;

const prevAnchor =
currentIndex - PaginationBuffer + PaginationGap <= 0
? 1
: currentIndex - PaginationBuffer + PaginationGap;

if (!indexData[nextAnchor] || !indexData[prevAnchor]) {
refetch();
}
}, [currentPage, indexData, indexFetching, refetch, totalCount]);
}, [currentIndex, indexData, indexFetching, refetch, totalCount]);

const switchIndex = (direction: PageDirection) => {
const newIndex = ((currentPage - 1 + direction + totalCount) % totalCount) + 1;
const newIndex = ((currentIndex - 1 + direction + totalCount) % totalCount) + 1;
if (
!totalCount ||
totalCount === 1 ||
Expand All @@ -255,12 +226,12 @@ export const SearchCountPagination = forwardRef<
) {
return;
}
setCurrentPage(newIndex);
setCurrentIndex(newIndex);
};

return (
value &&
(countLoading || (currentPage !== 0 && indexLoading) ? (
(indexFetching || countLoading || (currentIndex !== 0 && indexLoading) ? (
<Spin className="size-3 shrink-0" />
) : (
<div className="flex flex-1 shrink-0 items-center gap-0.5 p-0">
Expand All @@ -276,7 +247,7 @@ export const SearchCountPagination = forwardRef<
<ChevronLeft />
</Button>
<span className="pointer-events-none whitespace-nowrap">
{currentPage} / {totalCount}
{currentIndex} / {totalCount}
</span>
<Button
size={'xs'}
Expand Down

0 comments on commit 251d400

Please sign in to comment.