Fix evals editor not updating after saving changes (#640)

Evals editor doesn't update the prompt in the playground even after saving changes
latitude-dev · Nov 19, 2024 · 083218e · 083218e
1 parent d72a7cd
commit 083218e
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 20 deletions.
diff --git a/...ons/(evaluation)/[evaluationUuid]/dashboard/_components/ConnectedDocumentsTable/index.tsx b/...ons/(evaluation)/[evaluationUuid]/dashboard/_components/ConnectedDocumentsTable/index.tsx
@@ -57,51 +57,51 @@ const ConnectedDocumentTableRow = ({
       <TableCell className='nowrap max-w-[350px]'>
         {promptPath && (
           <>
-            <Text.H4
+            <Text.H5
               color='foregroundMuted'
               noWrap
               ellipsis
               wordBreak='breakAll'
             >
               {promptPath}
-            </Text.H4>
-            <Text.H4 color='foregroundMuted' noWrap>
+            </Text.H5>
+            <Text.H5 color='foregroundMuted' noWrap>
               {'/'}
-            </Text.H4>
+            </Text.H5>
           </>
         )}
-        <Text.H4 noWrap>{promptName}</Text.H4>
+        <Text.H5 noWrap>{promptName}</Text.H5>
       </TableCell>
       <TableCell>
         {isProjectsLoading ? (
           <Skeleton className='w-full h-4 bg-muted animate-pulse' />
         ) : (
-          <Text.H4 noWrap>{projectName}</Text.H4>
+          <Text.H5 noWrap>{projectName}</Text.H5>
         )}
       </TableCell>
       <TableCell>
         {document.evaluationLogs ? (
           <>
-            <Text.H4 noWrap>{document.modalValue}</Text.H4>
+            <Text.H5 noWrap>{document.modalValue}</Text.H5>
             <div className='w-2'></div>
-            <Text.H4 color='foregroundMuted' noWrap>
+            <Text.H5 color='foregroundMuted' noWrap>
               ({modalValuePercentage}%)
-            </Text.H4>
+            </Text.H5>
           </>
         ) : (
-          <Text.H4 color='foregroundMuted'>—</Text.H4>
+          <Text.H5 color='foregroundMuted'>—</Text.H5>
         )}
       </TableCell>
       <TableCell>
-        <Text.H4 noWrap>{document.evaluationLogs}</Text.H4>
+        <Text.H5 noWrap>{document.evaluationLogs}</Text.H5>
       </TableCell>
       <TableCell>
-        <Text.H4 noWrap>{document.totalTokens}</Text.H4>
+        <Text.H5 noWrap>{document.totalTokens}</Text.H5>
       </TableCell>
       <TableCell>
-        <Text.H4 noWrap>
+        <Text.H5 noWrap>
           {formatCostInMillicents(document.costInMillicents ?? 0)}
-        </Text.H4>
+        </Text.H5>
       </TableCell>
     </TableRow>
   )

diff --git a/...e)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/Editor/Advanced/index.tsx b/...e)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/Editor/Advanced/index.tsx
@@ -29,11 +29,8 @@ export default function AdvancedEvaluationEditor({
   providerApiKeys?: ProviderApiKey[]
   freeRunsCount?: number
 }) {
-  const { data, isLoading, update, isUpdating } = useEvaluations()
-  const evaluation = useMemo(
-    () => data.find((e) => e.uuid === evaluationUuid),
-    [evaluationUuid, data],
-  )
+  const { findEvaluation, isLoading, update, isUpdating } = useEvaluations()
+  const evaluation = findEvaluation(evaluationUuid)!
   const evaluationMetadata = useMemo(
     () => evaluation?.metadata as EvaluationMetadataLlmAsJudgeAdvanced,
     [evaluation],

diff --git a/...rivate)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/Playground/index.tsx b/...rivate)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/Playground/index.tsx
@@ -10,6 +10,7 @@ import {
 import { Button, Icon, TableBlankSlate, Text } from '@latitude-data/web-ui'
 import { ROUTES } from '$/services/routes'
 import useDocumentLogWithMetadata from '$/stores/documentLogWithMetadata'
+import useEvaluations from '$/stores/evaluations'
 import { useProviderLog } from '$/stores/providerLogs'
 import Link from 'next/link'
 import { useSearchParams } from 'next/navigation'
@@ -39,10 +40,12 @@ const BlankSlate = ({ evaluation }: { evaluation: EvaluationDto }) => (
 )
 
 export default function Playground({
-  evaluation,
+  evaluation: serverEvaluation,
 }: {
   evaluation: EvaluationDto
 }) {
+  const { findEvaluation } = useEvaluations()
+  const evaluation = findEvaluation(serverEvaluation.uuid)!
   const [mode, setMode] = useState<'preview' | 'chat'>('preview')
   const searchParams = useSearchParams()
   const providerLogId = searchParams.get('providerLogId')

diff --git a/apps/web/src/stores/evaluations.ts b/apps/web/src/stores/evaluations.ts
@@ -87,6 +87,12 @@ export default function useEvaluations(
     },
   })
 
+  const findEvaluation = useMemo(
+    () => (evaluationUuid: string) =>
+      data.find((e) => e.uuid === evaluationUuid)!,
+    [data],
+  )
+
   return {
     data,
     mutate,
@@ -97,5 +103,6 @@ export default function useEvaluations(
     isUpdating,
     error: swrError,
     destroy,
+    findEvaluation,
   }
 }