Document evaluation results table with pagination (#300)

* Paginate document evaluation results and refactor pagination
Refactor pagination to make it more generic and easy to use in any table
we want to add pagination

* Fix troll test

apps/web/src/actions/commits/fetchCommitsByProjectAction.ts

@@ -1,14 +1,14 @@
 'use server'
 
 import { CommitStatus } from '@latitude-data/core/browser'
+import { paginateQuery } from '@latitude-data/core/lib/index'
 import { CommitsRepository } from '@latitude-data/core/repositories'
 import { z } from 'zod'
 
 import { withProject } from '../procedures'
 
 // Not really using pagination yet
 const ULTRA_LARGE_PAGE_SIZE = 1000
-
 export const fetchCommitsByProjectAction = withProject
   .createServerAction()
   .input(
@@ -20,12 +20,17 @@ export const fetchCommitsByProjectAction = withProject
     { type: 'json' },
   )
   .handler(async ({ input, ctx }) => {
-    return new CommitsRepository(ctx.workspace.id)
-      .getCommitsByProject({
-        project: ctx.project,
-        filterByStatus: input.status,
-        page: input.page ?? 1,
-        pageSize: input.pageSize ?? ULTRA_LARGE_PAGE_SIZE,
-      })
-      .then((r) => r.unwrap())
+    const repo = new CommitsRepository(ctx.workspace.id)
+    const { rows } = await paginateQuery({
+      dynamicQuery: repo
+        .getCommitsByProjectQuery({
+          project: ctx.project,
+          filterByStatus: input.status,
+        })
+        .$dynamic(),
+      defaultPaginate: {
+        pageSize: ULTRA_LARGE_PAGE_SIZE,
+      },
+    })
+    return rows
   })

apps/web/src/actions/evaluations/computeEvaluationResultsWithMetadata.ts

@@ -1,10 +1,12 @@
 'use server'
 
+import { paginateQuery } from '@latitude-data/core/lib/index'
 import {
   CommitsRepository,
+  EvaluationResultWithMetadata,
   EvaluationsRepository,
 } from '@latitude-data/core/repositories'
-import { computeEvaluationResultsWithMetadata } from '@latitude-data/core/services/evaluationResults/computeEvaluationResultsWithMetadata'
+import { computeEvaluationResultsWithMetadataQuery } from '@latitude-data/core/services/evaluationResults/computeEvaluationResultsWithMetadata'
 import { z } from 'zod'
 
 import { withProject } from '../procedures'
@@ -16,6 +18,8 @@ export const computeEvaluationResultsWithMetadataAction = withProject
       evaluationId: z.number(),
       documentUuid: z.string(),
       commitUuid: z.string(),
+      page: z.string().nullable(),
+      pageSize: z.string().nullable(),
     }),
   )
   .handler(async ({ input, ctx }) => {
@@ -29,12 +33,18 @@ export const computeEvaluationResultsWithMetadataAction = withProject
     const commit = await commitsScope
       .getCommitByUuid({ projectId: project.id, uuid: input.commitUuid })
       .then((r) => r.unwrap())
+    const { rows } = await paginateQuery({
+      searchParams: {
+        page: input.page ?? undefined,
+        pageSize: input.pageSize ?? undefined,
+      },
+      dynamicQuery: computeEvaluationResultsWithMetadataQuery({
+        workspaceId: evaluation.workspaceId,
+        evaluation,
+        documentUuid,
+        draft: commit,
+      }).$dynamic(),
+    })
 
-    return await computeEvaluationResultsWithMetadata({
-      workspaceId: ctx.workspace.id,
-      evaluation,
-      documentUuid,
-      draft: commit,
-      limit: 1000,
-    }).then((r) => r.unwrap())
+    return rows as EvaluationResultWithMetadata[]
   })

apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Chat/index.tsx

@@ -144,7 +144,7 @@ export default function Chat({
     <div className='flex flex-col h-full'>
       <div
         ref={containerRef}
-        className='flex flex-col gap-3 h-full overflow-y-auto pb-12'
+        className='flex flex-col gap-3 h-full overflow-y-auto custom-scrollbar pb-12'
       >
         <Text.H6M>Prompt</Text.H6M>
         <MessageList

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/Chat.tsx

@@ -198,7 +198,7 @@ export default function Chat({
     <div className='flex flex-col h-full'>
       <div
         ref={containerRef}
-        className='flex flex-col gap-3 h-full overflow-y-auto pb-12'
+        className='flex flex-col gap-3 h-full overflow-y-auto custom-scrollbar pb-12'
       >
         <Text.H6M>Prompt</Text.H6M>
         <MessageList

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentTabs/index.tsx

@@ -27,9 +27,7 @@ export default function DocumentTabs({
           Deploy this prompt <Icon name='code2' />
         </Button>
       </div>
-      <div className='flex-grow flex flex-col w-full overflow-hidden'>
-        {children}
-      </div>
+      <div className='flex-grow flex flex-col w-full'>{children}</div>
     </div>
   )
 }

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/[evaluationId]/create-batch/_components/CreateBatchEvaluationModal/index.tsx → apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/[evaluationId]/_components/Actions/CreateBatchEvaluationModal/index.tsx

@@ -1,45 +1,34 @@
-'use client'
-
 import { useCallback } from 'react'
 
 import { DocumentVersion, EvaluationDto } from '@latitude-data/core/browser'
 import { Button, CloseTrigger, Modal } from '@latitude-data/web-ui'
 import { useMetadata } from '$/hooks/useMetadata'
-import { useNavigate } from '$/hooks/useNavigate'
-import { ROUTES } from '$/services/routes'
 
 import DatasetForm from './DatasetForm'
 import { useRunBatch } from './useRunBatch'
 import { useRunBatchForm } from './useRunBatchForm'
 
 export default function CreateBatchEvaluationModal({
+  open,
+  onClose,
   document,
   evaluation,
   projectId,
   commitUuid,
 }: {
+  open: boolean
+  onClose: () => void
   projectId: string
   commitUuid: string
   document: DocumentVersion
   evaluation: EvaluationDto
 }) {
-  const navigate = useNavigate()
-  const documentUuid = document.documentUuid
-  const goToDetail = useCallback(() => {
-    navigate.push(
-      ROUTES.projects
-        .detail({ id: Number(projectId) })
-        .commits.detail({ uuid: commitUuid })
-        .documents.detail({ uuid: documentUuid })
-        .evaluations.detail(evaluation.id).root,
-    )
-  }, [evaluation.id, projectId, commitUuid, documentUuid])
   const { runBatch, errors, isRunningBatch } = useRunBatch({
     document,
     projectId,
     commitUuid,
     onSuccess: () => {
-      goToDetail()
+      onClose()
     },
   })
 
@@ -73,11 +62,11 @@ export default function CreateBatchEvaluationModal({
 
   return (
     <Modal
-      open
+      open={open}
+      onOpenChange={onClose}
       size='large'
       title='Select the dataset that contain the data to generate the logs'
       description='Select the dataset you want to analyze and map the parameters of selected evaluations with dataset columns.'
-      onOpenChange={goToDetail}
       footer={
         <>
           <CloseTrigger />

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/[evaluationId]/_components/Actions/index.tsx

@@ -1,10 +1,11 @@
 'use client'
 
+import { useCallback, useState } from 'react'
+
 import { EvaluationDto } from '@latitude-data/core/browser'
-import { TableWithHeader } from '@latitude-data/web-ui'
-import { ROUTES } from '$/services/routes'
-import Link from 'next/link'
+import { TableWithHeader, useCurrentDocument } from '@latitude-data/web-ui'
 
+import CreateBatchEvaluationModal from './CreateBatchEvaluationModal'
 import LiveEvaluationToggle from './LiveEvaluationToggle'
 
 export function Actions({
@@ -18,21 +19,27 @@ export function Actions({
   commitUuid: string
   documentUuid: string
 }) {
-  const href = ROUTES.projects
-    .detail({ id: Number(projectId) })
-    .commits.detail({ uuid: commitUuid })
-    .documents.detail({ uuid: documentUuid })
-    .evaluations.detail(evaluation.id).createBatch
-
+  const document = useCurrentDocument()
+  const [open, setOpen] = useState(false)
+  const onClose = useCallback(() => setOpen(false), [])
+  const onOpen = useCallback(() => setOpen(true), [])
   return (
     <div className='flex flex-row items-center gap-4'>
       <LiveEvaluationToggle
         documentUuid={documentUuid}
         evaluation={evaluation}
       />
-      <Link href={href}>
-        <TableWithHeader.Button>Run batch evaluation</TableWithHeader.Button>
-      </Link>
+      <TableWithHeader.Button onClick={onOpen}>
+        Run batch evaluation
+      </TableWithHeader.Button>
+      <CreateBatchEvaluationModal
+        open={open}
+        onClose={onClose}
+        document={document}
+        evaluation={evaluation}
+        projectId={projectId}
+        commitUuid={commitUuid}
+      />
     </div>
   )
 }

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/[evaluationId]/_components/EvaluationResults/EvaluationResultInfo/Messages.tsx

@@ -23,9 +23,8 @@ export function EvaluationResultMessages({
 
   if (!providerLog) return null
   return (
-    <div className='flex flex-col gap-4 py-6 w-full max-h-full overflow-y-auto'>
+    <div className='flex flex-col gap-4 py-6 w-full'>
       <MessageList
-        collapsable
         messages={messages}
         messageLayout='vertical'
         separator

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/[evaluationId]/_components/EvaluationResults/EvaluationResultInfo/index.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react'
+import { useCallback, useRef, useState } from 'react'
 
 import { EvaluationDto, ProviderLogDto } from '@latitude-data/core/browser'
 import {
@@ -12,6 +12,7 @@ import {
   ReactStateDispatch,
   TabSelector,
 } from '@latitude-data/web-ui'
+import useDynamicHeight from '$/hooks/useDynamicHeight'
 import useProviderLogs from '$/stores/providerLogs'
 import useSWR from 'swr'
 
@@ -83,23 +84,35 @@ export function EvaluationResultInfo({
   evaluationResult: EvaluationResultWithMetadata
   providerLog?: ProviderLogDto
 }) {
+  const ref = useRef<HTMLDivElement>(null)
   const [selectedTab, setSelectedTab] = useState<string>('metadata')
   const [selected, setSelected] = useState<MaybeDocumentLog>(null)
   const onClickOpen = useCallback(async () => {
     setSelected(evaluationResult.documentLogId)
   }, [evaluationResult.documentLogId])
+  const height = useDynamicHeight({ ref, paddingBottom: 16 })
   return (
     <>
-      <div className='w-80 flex-shrink-0 flex flex-col border border-border rounded-lg px-4 pt-6 items-center'>
-        <TabSelector
-          options={[
-            { label: 'Metadata', value: 'metadata' },
-            { label: 'Messages', value: 'messages' },
-          ]}
-          selected={selectedTab}
-          onSelect={setSelectedTab}
-        />
-        <div className='flex flex-col relative w-full h-full max-h-full max-w-full overflow-auto'>
+      <div
+        ref={ref}
+        className='relative w-80 flex-shrink-0 flex flex-col border border-border rounded-lg items-center custom-scrollbar overflow-y-auto'
+        style={{
+          maxHeight: height ? `${height}px` : 'auto',
+        }}
+      >
+        <div className='z-10 w-full sticky top-0 px-4 bg-white flex justify-center'>
+          <div className='pt-6'>
+            <TabSelector
+              options={[
+                { label: 'Metadata', value: 'metadata' },
+                { label: 'Messages', value: 'messages' },
+              ]}
+              selected={selectedTab}
+              onSelect={setSelectedTab}
+            />
+          </div>
+        </div>
+        <div className='px-4 flex flex-col relative w-full max-w-full'>
           {selectedTab === 'metadata' && (
             <EvaluationResultMetadata
               evaluation={evaluation}
@@ -110,8 +123,10 @@ export function EvaluationResultInfo({
           {selectedTab === 'messages' && (
             <EvaluationResultMessages providerLog={providerLog} />
           )}
+        </div>
+        <div className='w-full py-4 sticky bottom-0 bg-white flex justify-center'>
           <Button variant='link' onClick={onClickOpen}>
-            Check original log metadata
+            Check original log
             <Icon name='arrowRight' widthClass='w-4' heightClass='h-4' />
           </Button>
         </div>

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/[evaluationId]/_components/EvaluationResults/EvaluationResultsTable.tsx

@@ -1,9 +1,11 @@
+import { useRef } from 'react'
 import { capitalize } from 'lodash-es'
 
 import {
   EvaluationDto,
   EvaluationResultableType,
 } from '@latitude-data/core/browser'
+import { IPagination } from '@latitude-data/core/lib/pagination/buildPagination'
 import { EvaluationResultWithMetadata } from '@latitude-data/core/repositories'
 import {
   Badge,
@@ -18,6 +20,12 @@ import {
   Text,
 } from '@latitude-data/web-ui'
 import { formatCostInMillicents, relativeTime } from '$/app/_lib/formatUtils'
+import { TablePaginationFooter } from '$/components/TablePaginationFooter'
+import useDynamicHeight from '$/hooks/useDynamicHeight'
+
+function countLabel(count: number) {
+  return `${count} evaluation results`
+}
 
 export const ResultCellContent = ({
   evaluation,
@@ -55,17 +63,21 @@ type EvaluationResultRow = EvaluationResultWithMetadata & {
 }
 export const EvaluationResultsTable = ({
   evaluation,
+  pagination,
   evaluationResults,
   selectedResult,
   setSelectedResult,
 }: {
   evaluation: EvaluationDto
+  pagination: IPagination
   evaluationResults: EvaluationResultRow[]
   selectedResult: EvaluationResultRow | undefined
   setSelectedResult: (log: EvaluationResultWithMetadata | undefined) => void
 }) => {
+  const ref = useRef<HTMLTableElement>(null)
+  const height = useDynamicHeight({ ref, paddingBottom: 16 })
   return (
-    <Table className='table-auto'>
+    <Table ref={ref} className='table-auto' maxHeight={height}>
       <TableHeader className='sticky top-0 z-10'>
         <TableRow>
           <TableHead>Time</TableHead>
@@ -76,7 +88,7 @@ export const EvaluationResultsTable = ({
           <TableHead>Tokens</TableHead>
         </TableRow>
       </TableHeader>
-      <TableBody className='max-h-full overflow-y-auto'>
+      <TableBody>
         {evaluationResults.map((evaluationResult) => (
           <TableRow
             key={evaluationResult.id}
@@ -144,6 +156,11 @@ export const EvaluationResultsTable = ({
           </TableRow>
         ))}
       </TableBody>
+      <TablePaginationFooter
+        colSpan={6}
+        pagination={pagination}
+        countLabel={countLabel}
+      />
     </Table>
   )
 }