Moooore QA fixes in new document parameters (#630)

- [ ] Link from a log to document paramaters history tag. - [ ] Fix run batch eval modal to show mapped input - [ ] Fix run batch doc modal to show linked dataset to doc and mapped fields. - [ ] Fix tooltip colors in evaluation stats - [ ] Fix tabs when fullWidth prop is present
latitude-dev · Nov 19, 2024 · 28dea3d · 28dea3d
1 parent 0e25a0a
commit 28dea3d
Show file tree

Hide file tree

Showing 16 changed files with 339 additions and 95 deletions.
diff --git a/...s/DocumentEditor/Editor/Playground/DocumentParams/HistoryLogParams/useLogHistoryParams.ts b/...s/DocumentEditor/Editor/Playground/DocumentParams/HistoryLogParams/useLogHistoryParams.ts
@@ -1,40 +1,14 @@
 import { useCallback, useState } from 'react'
 
-import { DocumentLog, DocumentVersion } from '@latitude-data/core/browser'
+import { DocumentVersion } from '@latitude-data/core/browser'
 import { useCurrentCommit, useCurrentProject } from '@latitude-data/web-ui'
-import { Inputs, useDocumentParameters } from '$/hooks/useDocumentParameters'
+import { useDocumentParameters } from '$/hooks/useDocumentParameters'
 import useDocumentLogs from '$/stores/documentLogs'
 import useDocumentLogWithPaginationPosition, {
   LogWithPosition,
 } from '$/stores/documentLogWithPaginationPosition'
 import useDocumentLogsPagination from '$/stores/useDocumentLogsPagination'
 
-function getValue({ paramValue }: { paramValue: unknown | undefined }) {
-  try {
-    const value = JSON.stringify(paramValue)
-    return { value, metadata: { includeInPrompt: paramValue !== undefined } }
-  } catch {
-    return { value: '', metadata: { includeInPrompt: false } }
-  }
-}
-
-function mapLogParametersToInputs({
-  inputs,
-  parameters,
-}: {
-  inputs: Inputs<'history'>
-  parameters: DocumentLog['parameters'] | undefined
-}): Inputs<'history'> | undefined {
-  const params = parameters ?? {}
-  // No parameters
-  if (!Object.keys(params).length) return undefined
-
-  return Object.entries(inputs).reduce((acc, [key]) => {
-    acc[key] = getValue({ paramValue: params[key] })
-    return acc
-  }, {} as Inputs<'history'>)
-}
-
 const ONLY_ONE_PAGE = '1'
 export function useLogHistoryParams({
   document,
@@ -44,7 +18,8 @@ export function useLogHistoryParams({
   commitVersionUuid: string
 }) {
   const {
-    history: { inputs, setInputs, setHistoryLog, logUuid },
+    mapDocParametersToInputs,
+    history: { setHistoryLog, logUuid },
   } = useDocumentParameters({
     documentVersionUuid: document.documentUuid,
     commitVersionUuid,
@@ -92,14 +67,10 @@ export function useLogHistoryParams({
       const log = logs[0]
       if (!log) return
 
-      const newInputs = mapLogParametersToInputs({
-        inputs,
+      mapDocParametersToInputs({
+        source: 'history',
         parameters: log.parameters,
       })
-
-      if (!newInputs) return
-
-      setInputs(newInputs)
       setHistoryLog(log.uuid)
     },
   })

diff --git a/...Id]/versions/[commitUuid]/documents/[documentUuid]/_components/MetadataInfoTabs/index.tsx b/...Id]/versions/[commitUuid]/documents/[documentUuid]/_components/MetadataInfoTabs/index.tsx
@@ -7,6 +7,7 @@ type Props = {
   children: (args: RenderProps) => ReactNode
   tabs?: TabSelectorOption<string>[]
   className?: string
+  tabsActions?: ReactNode
 }
 export const MetadataInfoTabs = forwardRef<HTMLDivElement, Props>(
   function MetadataInfoTabs(
@@ -16,6 +17,7 @@ export const MetadataInfoTabs = forwardRef<HTMLDivElement, Props>(
         { label: 'Metadata', value: 'metadata' },
         { label: 'Messages', value: 'messages' },
       ],
+      tabsActions,
       children,
     },
     ref,
@@ -30,12 +32,17 @@ export const MetadataInfoTabs = forwardRef<HTMLDivElement, Props>(
           className,
         )}
       >
-        <div className='pt-6 pb-2'>
+        <div className='pt-6 pb-2 relative flex justify-center w-full'>
           <TabSelector
             options={tabs}
             selected={selectedTab}
             onSelect={setSelectedTab}
           />
+          {tabsActions ? (
+            <div className='absolute right-4 top-6 flex items-center justify-end w-full min-h-11 pointer-events-none'>
+              {tabsActions}
+            </div>
+          ) : null}
         </div>
         <div className='w-full custom-scrollbar overflow-y-auto'>
           <div className='flex px-4 py-5 flex-col gap-4 w-full overflow-x-auto'>

diff --git a/...s/[commitUuid]/documents/[documentUuid]/batch/_components/RunPromptInBatchModal/index.tsx b/...s/[commitUuid]/documents/[documentUuid]/batch/_components/RunPromptInBatchModal/index.tsx
@@ -23,28 +23,20 @@ import useDatasets from '$/stores/datasets'
 import DatasetForm from '../../../evaluations/[evaluationId]/_components/Actions/CreateBatchEvaluationModal/DatasetForm'
 import { RunBatchParameters } from '../../../evaluations/[evaluationId]/_components/Actions/CreateBatchEvaluationModal/useRunBatch'
 import { buildEmptyParameters } from '../../../evaluations/[evaluationId]/_components/Actions/CreateBatchEvaluationModal/useRunBatchForm'
+import { useMappedParametersFromLocalStorage } from './useMappedParametersFromLocalStorage'
 
-function useRunDocumentInBatchForm(document: DocumentVersion) {
+function useRunDocumentInBatchForm({
+  document,
+  commitVersionUuid,
+}: {
+  document: DocumentVersion
+  commitVersionUuid: string
+}) {
   const [metadata, setMetadata] = useState<ConversationMetadata | undefined>()
-  useEffect(() => {
-    const fn = async () => {
-      if (!document || !document.content) return
-
-      const metadata = await readMetadata({
-        prompt: document.content,
-      })
-
-      setMetadata(metadata)
-    }
-
-    fn()
-  }, [document])
-
   const parametersList = useMemo(
     () => Array.from(metadata?.parameters ?? []),
     [metadata?.parameters],
   )
-  const { data: datasets, isLoading: isLoadingDatasets } = useDatasets()
   const [selectedDataset, setSelectedDataset] = useState<Dataset | null>(null)
   const [headers, setHeaders] = useState<SelectOption[]>([])
   const [wantAllLines, setAllRows] = useState(true)
@@ -53,7 +45,6 @@ function useRunDocumentInBatchForm(document: DocumentVersion) {
   const [parameters, setParameters] = useState(() =>
     buildEmptyParameters(parametersList),
   )
-
   const onParameterChange = useCallback(
     (param: string) => (header: string) => {
       setParameters((prev: RunBatchParameters) => ({
@@ -64,6 +55,20 @@ function useRunDocumentInBatchForm(document: DocumentVersion) {
     [selectedDataset],
   )
 
+  const buildHeaders = useCallback(
+    (dataset: Dataset) => {
+      setHeaders([
+        { value: '-1', label: '-- Leave this parameter empty' },
+        ...dataset.fileMetadata.headers.map((header) => ({
+          value: header,
+          label: header,
+        })),
+      ])
+    },
+    [setHeaders, selectedDataset],
+  )
+
+  const { data: datasets, isLoading: isLoadingDatasets } = useDatasets()
   const onSelectDataset = useCallback(
     async (value: string) => {
       const ds = datasets.find((ds) => ds.id === Number(value))
@@ -73,16 +78,44 @@ function useRunDocumentInBatchForm(document: DocumentVersion) {
       setParameters(buildEmptyParameters(parametersList))
       setFromLine(1)
       setToLine(ds.fileMetadata.rowCount)
-      setHeaders([
-        { value: '-1', label: '-- Leave this parameter empty' },
-        ...ds.fileMetadata.headers.map((header) => ({
-          value: header,
-          label: header,
-        })),
-      ])
+      buildHeaders(ds)
     },
-    [parametersList, datasets],
+    [parametersList, datasets, buildHeaders],
   )
+
+  useEffect(() => {
+    const fn = async () => {
+      if (!document || !document.content) return
+
+      const metadata = await readMetadata({
+        prompt: document.content,
+      })
+
+      setMetadata(metadata)
+
+      // Only choose the dataset if it's not already selected
+      const ds = selectedDataset
+        ? undefined
+        : datasets.find((ds) => ds.id === document.datasetId)
+
+      if (!ds) return
+
+      setSelectedDataset(ds)
+      buildHeaders(ds)
+    }
+
+    fn()
+  }, [document, selectedDataset, setSelectedDataset, buildHeaders, datasets])
+
+  useMappedParametersFromLocalStorage({
+    document,
+    commitVersionUuid,
+    parametersList,
+    selectedDataset,
+    onDatasetReady: ({ mapped }) => {
+      setParameters(mapped)
+    },
+  })
   return {
     datasets,
     isLoadingDatasets,
@@ -159,7 +192,10 @@ export default function RunPromptInBatchModal() {
   const { commit } = useCurrentCommit()
   const { toast } = useToast()
 
-  const form = useRunDocumentInBatchForm(document)
+  const form = useRunDocumentInBatchForm({
+    document,
+    commitVersionUuid: commit.uuid,
+  })
   const { runBatch, errors, isRunningBatch } = useRunDocumentInBatch({
     document,
     projectId: project.id,
@@ -224,6 +260,7 @@ export default function RunPromptInBatchModal() {
         headers={form.headers}
         parametersList={form.parametersList}
         onParametersChange={form.onParameterChange}
+        parameters={form.parameters}
       />
     </Modal>
   )

diff --git a/...umentUuid]/batch/_components/RunPromptInBatchModal/useMappedParametersFromLocalStorage.ts b/...umentUuid]/batch/_components/RunPromptInBatchModal/useMappedParametersFromLocalStorage.ts
@@ -0,0 +1,44 @@
+import { useEffect } from 'react'
+
+import { Dataset, DocumentVersion } from '@latitude-data/core/browser'
+import { RunBatchParameters } from '$/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/[evaluationId]/_components/Actions/CreateBatchEvaluationModal/useRunBatch'
+import { useDocumentParameters } from '$/hooks/useDocumentParameters'
+
+/**
+ * This hook map parameters
+ * from document.datasetId that are mapped in the
+ * document paramters UI if any
+ *
+ * IMPORTANT: Other wise it will ignore if it's a different dataset
+ */
+export function useMappedParametersFromLocalStorage({
+  document,
+  commitVersionUuid,
+  parametersList,
+  onDatasetReady,
+  selectedDataset,
+}: {
+  document: DocumentVersion
+  commitVersionUuid: string
+  parametersList: string[]
+  selectedDataset: Dataset | null | undefined
+  onDatasetReady: (_args: { mapped: RunBatchParameters }) => void
+}) {
+  const {
+    dataset: { mappedInputs },
+  } = useDocumentParameters({
+    documentVersionUuid: document.documentUuid,
+    commitVersionUuid,
+  })
+  useEffect(() => {
+    if (!selectedDataset) return
+    if (selectedDataset.id !== document.datasetId) return
+
+    const mappedParameters = parametersList.reduce((acc, key) => {
+      acc[key] = mappedInputs[key]
+      return acc
+    }, {} as RunBatchParameters)
+
+    onDatasetReady({ mapped: mappedParameters })
+  }, [parametersList, document, selectedDataset, mappedInputs])
+}
diff --git a/...tions/[evaluationId]/_components/Actions/CreateBatchEvaluationModal/DatasetForm/index.tsx b/...tions/[evaluationId]/_components/Actions/CreateBatchEvaluationModal/DatasetForm/index.tsx
@@ -1,4 +1,5 @@
 import { useMemo } from 'react'
+import { isNumber } from 'lodash-es'
 
 import { Dataset, DocumentVersion } from '@latitude-data/core/browser'
 import {
@@ -12,9 +13,24 @@ import {
   SelectOption,
   SwitchInput,
 } from '@latitude-data/web-ui'
+import { RunBatchParameters } from '$/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/[evaluationId]/_components/Actions/CreateBatchEvaluationModal/useRunBatch'
 import { ROUTES } from '$/services/routes'
 import Link from 'next/link'
 
+function findValue({
+  headers,
+  parameters,
+  param,
+}: {
+  headers: SelectOption[]
+  parameters: RunBatchParameters
+  param: string
+}) {
+  const index = parameters?.[param]
+  const header = isNumber(index) ? headers[index + 1] : undefined
+  return header ? String(header.value) : ''
+}
+
 function LineRangeInputs({
   disabled,
   fromDefaultValue,
@@ -60,6 +76,7 @@ function LineRangeInputs({
 export default function DatasetForm({
   document,
   onParametersChange,
+  parameters,
   selectedDataset,
   headers,
   wantAllLines,
@@ -75,6 +92,7 @@ export default function DatasetForm({
 }: {
   document: DocumentVersion
   onParametersChange: (param: string) => (header: string) => void
+  parameters: RunBatchParameters
   parametersList: string[]
   wantAllLines: boolean
   fromLine: number | undefined
@@ -171,19 +189,22 @@ export default function DatasetForm({
         >
           {selectedDataset ? (
             <div className='flex flex-col gap-y-3'>
-              {parametersList.map((param) => (
-                <Select
-                  key={param}
-                  name={`parameter[${param}]`}
-                  disabled={headers.length === 0}
-                  errors={paramaterErrors[param]}
-                  badgeLabel
-                  label={param}
-                  options={headers}
-                  onChange={onParametersChange(param)}
-                  placeholder='Select csv column'
-                />
-              ))}
+              {parametersList.map((param) => {
+                return (
+                  <Select
+                    key={param}
+                    name={`parameter[${param}]`}
+                    disabled={headers.length === 0}
+                    errors={paramaterErrors[param]}
+                    badgeLabel
+                    label={param}
+                    options={headers}
+                    value={findValue({ headers, parameters, param })}
+                    onChange={onParametersChange(param)}
+                    placeholder='Select csv column'
+                  />
+                )
+              })}
             </div>
           ) : null}
         </NumeredList.Item>

diff --git a/...Uuid]/evaluations/[evaluationId]/_components/Actions/CreateBatchEvaluationModal/index.tsx b/...Uuid]/evaluations/[evaluationId]/_components/Actions/CreateBatchEvaluationModal/index.tsx
@@ -94,6 +94,7 @@ export default function CreateBatchEvaluationModal({
         headers={form.headers}
         parametersList={form.parametersList}
         onParametersChange={form.onParameterChange}
+        parameters={form.parameters}
       />
     </Modal>
   )