Show original document log from a evaluation log (#277)

* Refactor refetch evaluation refetch stats to put each stats in their own
compoment. The problem we had is that the catch all `useRefetchStats`
hook we had was triggering for example numeric mean in non numeric
evaluations. The reason is the way SWR stores work by default the store
fetch data when it's mounted. This could be solved by disabling fetching
on mount but I think is more correct to put each metric a listener to
the `evaluationStatus` websocket event

* Show in a modal document log metadata and messages associated with a
evalaution result

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

@@ -15,6 +15,20 @@ import { format } from 'date-fns'
 
 import { ResultCellContent } from '../EvaluationResultsTable'
 
+function getReasonFromProviderLog(providerLog?: ProviderLogDto) {
+  if (!providerLog) return '-'
+
+  try {
+    const response = JSON.parse(providerLog?.response)
+    if (response) {
+      return response.reason || '-'
+    }
+    return '-'
+  } catch (e) {
+    return '-'
+  }
+}
+
 function MetadataItem({
   label,
   stacked = false,
@@ -138,17 +152,3 @@ export function EvaluationResultMetadata({
     </div>
   )
 }
-
-function getReasonFromProviderLog(providerLog?: ProviderLogDto) {
-  if (!providerLog) return '-'
-
-  try {
-    const response = JSON.parse(providerLog?.response)
-    if (response) {
-      return response.reason || '-'
-    }
-    return '-'
-  } catch (e) {
-    return '-'
-  }
-}

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

@@ -1,14 +1,79 @@
-'use client'
-
-import { useState } from 'react'
+import { useCallback, useState } from 'react'
 
 import { EvaluationDto, ProviderLogDto } from '@latitude-data/core/browser'
-import { EvaluationResultWithMetadata } from '@latitude-data/core/repositories'
-import { TabSelector } from '@latitude-data/web-ui'
+import {
+  DocumentLogWithMetadata,
+  EvaluationResultWithMetadata,
+} from '@latitude-data/core/repositories'
+import {
+  Button,
+  Icon,
+  Modal,
+  ReactStateDispatch,
+  TabSelector,
+} from '@latitude-data/web-ui'
+import useProviderLogs from '$/stores/providerLogs'
+import useSWR from 'swr'
 
+import { DocumentLogInfo } from '../../../../../logs/_components/DocumentLogs/DocumentLogInfo'
 import { EvaluationResultMessages } from './Messages'
 import { EvaluationResultMetadata } from './Metadata'
 
+type MaybeDocumentLog = number | null | undefined
+
+function useFetchDocumentLog({ documentLogId }: { documentLogId: number }) {
+  const {
+    data: documentLog,
+    isLoading,
+    error,
+  } = useSWR<DocumentLogWithMetadata>(
+    ['documentLogs', documentLogId],
+    useCallback(async () => {
+      const response = await fetch(`/api/documentLogs/${documentLogId}`, {
+        credentials: 'include',
+      })
+
+      if (!response.ok) {
+        const error = await response.json()
+        throw new Error(error.message)
+      }
+
+      return response.json()
+    }, [documentLogId]),
+  )
+  return { documentLog, isLoading, error }
+}
+
+export default function DocumentLogInfoModal({
+  documentLogId,
+  onOpenChange,
+}: {
+  documentLogId: number
+  onOpenChange: ReactStateDispatch<MaybeDocumentLog>
+}) {
+  const { documentLog, isLoading, error } = useFetchDocumentLog({
+    documentLogId,
+  })
+  const { data: providerLogs } = useProviderLogs({
+    documentLogUuid: documentLog?.uuid,
+  })
+  return (
+    <Modal
+      defaultOpen
+      onOpenChange={() => onOpenChange(null)}
+      title='Document Log Info'
+      description='Detais of original document log'
+    >
+      <DocumentLogInfo
+        documentLog={documentLog!}
+        providerLogs={providerLogs}
+        isLoading={isLoading}
+        error={error}
+      />
+    </Modal>
+  )
+}
+
 export function EvaluationResultInfo({
   evaluation,
   evaluationResult,
@@ -19,28 +84,44 @@ export function EvaluationResultInfo({
   providerLog?: ProviderLogDto
 }) {
   const [selectedTab, setSelectedTab] = useState<string>('metadata')
+  const [selected, setSelected] = useState<MaybeDocumentLog>(null)
+  const onClickOpen = useCallback(async () => {
+    setSelected(evaluationResult.documentLogId)
+  }, [evaluationResult.documentLogId])
   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 relative w-full h-full max-h-full max-w-full overflow-auto'>
-        {selectedTab === 'metadata' && (
-          <EvaluationResultMetadata
-            evaluation={evaluation}
-            evaluationResult={evaluationResult}
-            providerLog={providerLog}
-          />
-        )}
-        {selectedTab === 'messages' && (
-          <EvaluationResultMessages providerLog={providerLog} />
-        )}
+    <>
+      <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'>
+          {selectedTab === 'metadata' && (
+            <EvaluationResultMetadata
+              evaluation={evaluation}
+              evaluationResult={evaluationResult}
+              providerLog={providerLog}
+            />
+          )}
+          {selectedTab === 'messages' && (
+            <EvaluationResultMessages providerLog={providerLog} />
+          )}
+          <Button variant='link' onClick={onClickOpen}>
+            Check original log metadata
+            <Icon name='arrowRight' widthClass='w-4' heightClass='h-4' />
+          </Button>
+        </div>
       </div>
-    </div>
+      {selected ? (
+        <DocumentLogInfoModal
+          documentLogId={selected}
+          onOpenChange={setSelected}
+        />
+      ) : null}
+    </>
   )
 }