feat(documentEditor): minor improvements to performance when computin…

…g metadata (#522) We were computing metadata several times per document edit. This change makes the code more imperative and it's clearer what's happening.
latitude-dev · Oct 30, 2024 · bed6c07 · bed6c07
1 parent 3d230d9
commit bed6c07
Show file tree

Hide file tree

Showing 6 changed files with 320 additions and 48 deletions.
diff --git a/...ations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/index.tsx b/...ations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { Suspense, useCallback, useMemo, useState } from 'react'
+import { Suspense, useCallback, useEffect, useMemo, useState } from 'react'
 
 import {
   promptConfigSchema,
@@ -43,11 +43,15 @@ export default function EvaluationEditor({
     () => promptConfigSchema({ providers: providers ?? [] }),
     [providers],
   )
-  const { metadata } = useMetadata({
-    prompt: value,
-    withParameters: SERIALIZED_DOCUMENT_LOG_FIELDS,
-    configSchema,
-  })
+  const { metadata, runReadMetadata } = useMetadata()
+
+  useEffect(() => {
+    runReadMetadata({
+      prompt: value,
+      withParameters: SERIALIZED_DOCUMENT_LOG_FIELDS,
+      configSchema,
+    })
+  }, [])
 
   const save = useCallback(
     (val: string) => {
@@ -62,8 +66,13 @@ export default function EvaluationEditor({
   const onChange = useCallback(
     (value: string) => {
       setValue(value)
+      runReadMetadata({
+        prompt: value,
+        withParameters: SERIALIZED_DOCUMENT_LOG_FIELDS,
+        configSchema,
+      })
     },
-    [setValue],
+    [setValue, runReadMetadata],
   )
 
   if (!evaluation) return null

diff --git a/...ersions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/index.tsx b/...ersions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/index.tsx
@@ -5,6 +5,7 @@ import React, {
   createContext,
   Suspense,
   useCallback,
+  useEffect,
   useMemo,
   useState,
 } from 'react'
@@ -159,12 +160,6 @@ export default function DocumentEditor({
     { trailing: true },
   )
 
-  const onChange = useCallback((value: string) => {
-    setIsSaved(false)
-    setValue(value)
-    debouncedSave(value)
-  }, [])
-
   const readDocumentContent = useCallback(
     async (path: string) => {
       return _documents.find((d) => d.path === path)?.content
@@ -204,12 +199,31 @@ export default function DocumentEditor({
     [providers],
   )
 
-  const { metadata } = useMetadata({
-    prompt: value,
-    fullPath: document.path,
-    referenceFn: readDocument,
-    configSchema,
-  })
+  const { metadata, runReadMetadata } = useMetadata()
+
+  useEffect(() => {
+    runReadMetadata({
+      prompt: value,
+      fullPath: document.path,
+      referenceFn: readDocument,
+      configSchema,
+    })
+  }, [])
+
+  const onChange = useCallback(
+    (newValue: string) => {
+      setIsSaved(false)
+      setValue(newValue)
+      debouncedSave(newValue)
+      runReadMetadata({
+        prompt: newValue,
+        fullPath: document.path,
+        referenceFn: readDocument,
+        configSchema,
+      })
+    },
+    [runReadMetadata, readDocument, configSchema, document.path],
+  )
 
   const {
     execute: executeRequestSuggestionAction,

diff --git a/...Uuid]/evaluations/[evaluationId]/_components/Actions/CreateBatchEvaluationModal/index.tsx b/...Uuid]/evaluations/[evaluationId]/_components/Actions/CreateBatchEvaluationModal/index.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from 'react'
+import { useCallback, useEffect } from 'react'
 
 import { DocumentVersion, EvaluationDto } from '@latitude-data/core/browser'
 import { Button, CloseTrigger, Modal } from '@latitude-data/web-ui'
@@ -32,10 +32,14 @@ export default function CreateBatchEvaluationModal({
     },
   })
 
-  const { metadata } = useMetadata({
-    prompt: document.content ?? '',
-    fullPath: document.path,
-  })
+  const { metadata, runReadMetadata } = useMetadata()
+
+  useEffect(() => {
+    runReadMetadata({
+      prompt: document.content ?? '',
+      fullPath: document.path,
+    })
+  }, [])
 
   const form = useRunBatchForm({ documentMetadata: metadata })
   const onRunBatch = useCallback(() => {

diff --git a/apps/web/src/hooks/useMetadata.ts b/apps/web/src/hooks/useMetadata.ts
@@ -1,41 +1,26 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 
 import { ConversationMetadata, readMetadata } from '@latitude-data/compiler'
 import { useDebouncedCallback } from 'use-debounce'
 
 type Props = Parameters<typeof readMetadata>[0]
-export function useMetadata(props: Props) {
-  const [propsQueue, setPropsQueue] = useState<Props | null>(props)
 
-  useEffect(() => {
-    setPropsQueue(props)
-  }, Object.values(props))
-
-  const [isLoading, setIsLoading] = useState(false)
+export function useMetadata() {
   const [metadata, setMetadata] = useState<ConversationMetadata>()
+  const [isLoading, setIsLoading] = useState(false)
 
   const runReadMetadata = useDebouncedCallback(
-    (props: Props, onSuccess: (data: ConversationMetadata) => void) => {
-      readMetadata(props).then(onSuccess)
+    async (props: Props) => {
+      setIsLoading(true)
+      const metadata = await readMetadata(props)
+      setMetadata(metadata)
+      setIsLoading(false)
     },
     500,
     { trailing: true },
   )
 
-  useEffect(() => {
-    if (isLoading) return
-    if (!propsQueue) return
-
-    setIsLoading(true)
-    setPropsQueue(null)
-
-    runReadMetadata(propsQueue, (m) => {
-      setMetadata(m)
-      setIsLoading(false)
-    })
-  }, [isLoading, propsQueue])
-
-  return { metadata, isLoading }
+  return { metadata, runReadMetadata, isLoading }
 }