chore: fix performance of evaluation results table #3 (#490)

The total count is just too much for the db. We have to remove it and
resort to dumber pagination in favour of better performance.

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/RefineModal/steps/2_SelectEvaluationResults/SelectableEvaluationResultsTable.tsx

@@ -19,7 +19,7 @@ import {
   Text,
 } from '@latitude-data/web-ui'
 import { relativeTime } from '$/app/_lib/formatUtils'
-import { LogicTablePaginationFooter } from '$/components/TablePaginationFooter/LogicTablePaginationFooter'
+import { LogicTablePaginationFooterWithoutCount } from '$/components/TablePaginationFooter/TablePaginationFooterWithoutCount'
 import { EvaluationResultByDocument } from '$/stores/evaluationResultsByDocumentContent'
 
 export const ResultCellContent = ({
@@ -61,20 +61,16 @@ export const SelectableEvaluationResultsTable = ({
   evaluationResultsRows,
   selectedResults,
   setSelectedResults,
-  totalCount,
-  isLoadingCount,
-  pageSize,
   page,
+  nextPage = false,
   setPage,
 }: {
   evaluation: EvaluationDto
   evaluationResultsRows: EvaluationResultRow[]
   selectedResults: EvaluationResultRow[]
   setSelectedResults: Dispatch<SetStateAction<EvaluationResultByDocument[]>>
-  totalCount: number
-  isLoadingCount: boolean
-  pageSize: number
   page: number
+  nextPage?: boolean
   setPage: (_: number) => void
 }) => {
   const toggleSelection = useCallback(
@@ -96,15 +92,11 @@ export const SelectableEvaluationResultsTable = ({
     <Table
       className='table-auto'
       externalFooter={
-        isLoadingCount ? null : (
-          <LogicTablePaginationFooter
-            page={page}
-            totalCount={totalCount}
-            totalCountLabel={`${totalCount} results, ${selectedResults.length} selected`}
-            pageSize={pageSize}
-            onPageChange={setPage}
-          />
-        )
+        <LogicTablePaginationFooterWithoutCount
+          page={page}
+          nextPage={nextPage}
+          onPageChange={setPage}
+        />
       }
     >
       <TableHeader className='sticky top-0 z-10'>

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/RefineModal/steps/2_SelectEvaluationResults/index.tsx

@@ -12,7 +12,6 @@ import { DocumentRoutes, ROUTES } from '$/services/routes'
 import useEvaluationResultsByDocumentContent, {
   EvaluationResultByDocument,
 } from '$/stores/evaluationResultsByDocumentContent'
-import useEvaluationResultsByDocumentPagination from '$/stores/useEvaluationResultsByDocumentCount'
 import Link from 'next/link'
 
 import { SelectableEvaluationResultsTable } from './SelectableEvaluationResultsTable'
@@ -48,15 +47,14 @@ export function SelectEvaluationResults({
     page: page,
     pageSize: PAGE_SIZE,
   })
-  const { data: pagination, isLoading: isLoadingCount } =
-    useEvaluationResultsByDocumentPagination({
-      documentUuid: documentVersion.documentUuid,
-      evaluationId: evaluation.id,
-      commitUuid: commit.uuid,
-      projectId: project.id,
-      page: page.toString(),
-      pageSize: PAGE_SIZE.toString(),
-    })
+  const { data: nextRows } = useEvaluationResultsByDocumentContent({
+    documentUuid: documentVersion.documentUuid,
+    evaluationId: evaluation.id,
+    commitUuid: commit.uuid,
+    projectId: project.id,
+    page: page + 1,
+    pageSize: PAGE_SIZE,
+  })
 
   const confirmSelection = useCallback(() => {
     setEvaluationResults(selectedEvaluationResults)
@@ -76,7 +74,7 @@ export function SelectEvaluationResults({
     </div>
   )
 
-  if (isLoading) {
+  if (isLoading && !rows.length) {
     return (
       <>
         <TableSkeleton rows={PAGE_SIZE} cols={5} />
@@ -119,9 +117,7 @@ export function SelectEvaluationResults({
           setSelectedResults={setSelectedEvaluationResults}
           page={page}
           setPage={setPage}
-          pageSize={PAGE_SIZE}
-          totalCount={pagination?.count ?? 0}
-          isLoadingCount={isLoadingCount}
+          nextPage={nextRows?.length > 0}
         />
       </div>
       <ActionButtons />

apps/web/src/components/EvaluationAggregatedResult/index.tsx

@@ -17,11 +17,17 @@ function EvaluationMeanValue({
   documentUuid: string
   commitUuid: string
 }) {
-  const { data, isLoading } = useEvaluationResultsMeanValue({
-    commitUuid,
-    documentUuid,
-    evaluationId: evaluation.id,
-  })
+  const { data, isLoading } = useEvaluationResultsMeanValue(
+    {
+      commitUuid,
+      documentUuid,
+      evaluationId: evaluation.id,
+    },
+    {
+      revalidateIfStale: false,
+      revalidateOnFocus: false,
+    },
+  )
 
   if (isLoading || data == null) {
     return <Skeleton height='h4' className='w-6' />
@@ -45,11 +51,17 @@ function EvaluationBooleanValue({
   documentUuid: string
   commitUuid: string
 }) {
-  const { data, isLoading } = useEvaluationResultsModalValue({
-    commitUuid,
-    documentUuid,
-    evaluationId: evaluation.id,
-  })
+  const { data, isLoading } = useEvaluationResultsModalValue(
+    {
+      commitUuid,
+      documentUuid,
+      evaluationId: evaluation.id,
+    },
+    {
+      revalidateIfStale: false,
+      revalidateOnFocus: false,
+    },
+  )
 
   if (isLoading || data == null) {
     return (
@@ -84,11 +96,17 @@ function EvaluationModalValue({
   documentUuid: string
   commitUuid: string
 }) {
-  const { data, isLoading } = useEvaluationResultsModalValue({
-    commitUuid,
-    documentUuid,
-    evaluationId: evaluation.id,
-  })
+  const { data, isLoading } = useEvaluationResultsModalValue(
+    {
+      commitUuid,
+      documentUuid,
+      evaluationId: evaluation.id,
+    },
+    {
+      revalidateIfStale: false,
+      revalidateOnFocus: false,
+    },
+  )
 
   if (isLoading || data == undefined) {
     return (

apps/web/src/components/TablePaginationFooter/TablePaginationFooterWithoutCount.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import { Button, Text } from '@latitude-data/web-ui'
+
+export function LogicTablePaginationFooterWithoutCount({
+  page,
+  onPageChange,
+  nextPage = false,
+}: {
+  page: number
+  onPageChange: (page: number) => void
+  nextPage?: boolean
+}) {
+  return (
+    <div className='w-full flex justify-between items-center'>
+      <div />
+      <div className='flex items-center'>
+        <Button
+          size='default'
+          variant='ghost'
+          disabled={page <= 1}
+          iconProps={{
+            name: 'chevronLeft',
+          }}
+          onClick={() => onPageChange(page - 1)}
+        />
+        <div className='flex flex-row items-center gap-x-1'>
+          <Text.H5M color='foregroundMuted'>{page}</Text.H5M>
+        </div>
+        <Button
+          size='default'
+          variant='ghost'
+          disabled={!nextPage}
+          iconProps={{
+            name: 'chevronRight',
+          }}
+          onClick={() => onPageChange(page + 1)}
+        />
+      </div>
+    </div>
+  )
+}