Use different local storage key for each source in playground paramet…

…ers (#627) We want to have independent inputs values depending on the tab the user is using for populating the prompt parameters. Old version without different source should keep working as before because I duplicated the hook that will be removed when enable new UI for everyone.
latitude-dev · Nov 18, 2024 · d140a0d · d140a0d
1 parent 9b672e2
commit d140a0d
Show file tree

Hide file tree

Showing 20 changed files with 820 additions and 424 deletions.
diff --git a/...components/DocumentEditor/Editor/Playground/DocumentParams/DatasetParams/InputsMapper.tsx b/...components/DocumentEditor/Editor/Playground/DocumentParams/DatasetParams/InputsMapper.tsx
@@ -1,26 +1,24 @@
 import { isNumber } from 'lodash-es'
 
-import { Dataset } from '@latitude-data/core/browser'
+import { Dataset, DocumentVersion } from '@latitude-data/core/browser'
 import {
   Badge,
   Button,
   ClientOnly,
   Icon,
-  ReactStateDispatch,
   Select,
   Text,
   Tooltip,
 } from '@latitude-data/web-ui'
 import {
+  DatasetSource,
   PlaygroundInput,
-  PlaygroundInputs,
+  useDocumentParameters,
 } from '$/hooks/useDocumentParameters'
 
-import { ParamsSource } from '../index'
 import { UseSelectDataset, type DatasetPreview } from './useSelectDataset'
-import { SelectedDatasetRow } from './useSelectedRow'
 
-function getTooltipValue(input: PlaygroundInput) {
+function getTooltipValue(input: PlaygroundInput<'dataset'>) {
   if (input === undefined || input === null) {
     return { isEmpty: true, value: 'No value found' }
   }
@@ -34,22 +32,29 @@ function getTooltipValue(input: PlaygroundInput) {
 }
 
 export function InputMapper({
-  inputs,
+  document,
+  commitVersionUuid,
   mappedInputs,
   headersOptions,
   isLoading,
   onSelectHeader,
-  setSelectedTab,
   selectedDataset,
 }: {
-  inputs: PlaygroundInputs
-  mappedInputs: SelectedDatasetRow['mappedInputs']
+  document: DocumentVersion
+  commitVersionUuid: string
+  mappedInputs: DatasetSource['mappedInputs']
   headersOptions: DatasetPreview['headersOptions']
   onSelectHeader: UseSelectDataset['onSelectHeader']
   isLoading: boolean
-  setSelectedTab: ReactStateDispatch<ParamsSource>
   selectedDataset: Dataset | undefined
 }) {
+  const {
+    setSource,
+    dataset: { inputs, copyToManual },
+  } = useDocumentParameters({
+    documentVersionUuid: document.documentUuid,
+    commitVersionUuid,
+  })
   return (
     <ClientOnly>
       <div className='flex flex-col gap-3'>
@@ -100,9 +105,10 @@ export function InputMapper({
                         trigger={
                           <Button
                             variant='ghost'
-                            disabled={disabled}
+                            disabled={disabled || !selectedValue}
                             onClick={() => {
-                              setSelectedTab('manual')
+                              copyToManual()
+                              setSource('manual')
                             }}
                             iconProps={{ name: 'pencil' }}
                           />

diff --git a/...Uuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/DatasetParams/index.tsx b/...Uuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/DatasetParams/index.tsx
@@ -1,15 +1,8 @@
-import {
-  Button,
-  cn,
-  Icon,
-  ReactStateDispatch,
-  Select,
-} from '@latitude-data/web-ui'
-import { PlaygroundInputs } from '$/hooks/useDocumentParameters'
+import { DocumentVersion } from '@latitude-data/core/browser'
+import { Button, cn, Icon, Select } from '@latitude-data/web-ui'
 import { ROUTES } from '$/services/routes'
 import Link from 'next/link'
 
-import { ParamsSource } from '../index'
 import { ParametersPaginationNav } from '../PaginationNav'
 import { InputMapper } from './InputsMapper'
 import { type UseSelectDataset } from './useSelectDataset'
@@ -28,13 +21,13 @@ function BlankSlate() {
 }
 
 export function DatasetParams({
-  inputs,
   data,
-  setSelectedTab,
+  commitVersionUuid,
+  document,
 }: {
+  document: DocumentVersion
+  commitVersionUuid: string
   data: UseSelectDataset
-  inputs: PlaygroundInputs
-  setSelectedTab: ReactStateDispatch<ParamsSource>
 }) {
   const selectedId = data.selectedDataset?.id
     ? String(data.selectedDataset.id)
@@ -53,7 +46,7 @@ export function DatasetParams({
           value={selectedId}
         />
         <div className='flex-none'>
-          {data.selectedDataset && data.selectedRowIndex ? (
+          {data.selectedDataset && data.selectedRowIndex !== undefined ? (
             <ParametersPaginationNav
               zeroIndex
               currentIndex={data.selectedRowIndex}
@@ -69,12 +62,12 @@ export function DatasetParams({
       </div>
       <div className={cn({ 'opacity-50': data.isLoading })}>
         <InputMapper
-          inputs={inputs}
+          document={document}
+          commitVersionUuid={commitVersionUuid}
           isLoading={data.isLoading}
           mappedInputs={data.selectedRow.mappedInputs}
           headersOptions={data.datasetPreview.headersOptions}
           onSelectHeader={data.onSelectHeader}
-          setSelectedTab={setSelectedTab}
           selectedDataset={data.selectedDataset}
         />
       </div>

diff --git a/...ponents/DocumentEditor/Editor/Playground/DocumentParams/DatasetParams/useSelectDataset.ts b/...ponents/DocumentEditor/Editor/Playground/DocumentParams/DatasetParams/useSelectDataset.ts
@@ -1,22 +1,16 @@
 import { useCallback, useMemo, useState } from 'react'
 
-import { Dataset } from '@latitude-data/core/browser'
+import { Dataset, DocumentVersion } from '@latitude-data/core/browser'
 import {
   SelectOption,
   useCurrentCommit,
   useCurrentProject,
 } from '@latitude-data/web-ui'
-import { useCurrentDocument } from '$/app/providers/DocumentProvider'
-import {
-  PlaygroundInput,
-  PlaygroundInputs,
-} from '$/hooks/useDocumentParameters'
+import { Inputs, useDocumentParameters } from '$/hooks/useDocumentParameters'
 import useDatasetPreview from '$/stores/datasetPreviews'
 import useDatasets from '$/stores/datasets'
 import useDocumentVersions from '$/stores/documentVersions'
 
-import { useSelectedDatasetRow } from './useSelectedRow'
-
 export type DatasetPreview = {
   headers: Record<number, string>
   headersOptions: SelectOption[]
@@ -29,43 +23,53 @@ function mappedToInputs({
   mappedInputs,
   rowIndex,
 }: {
-  inputs: PlaygroundInputs
+  inputs: Inputs<'dataset'>
   datasetPreview: DatasetPreview
   mappedInputs: Record<string, number>
   rowIndex: number
 }) {
   const rows = datasetPreview.rows
   const row = rows[rowIndex] ?? []
   const cleanRow = row.slice(1)
-  const mapped = Object.entries(mappedInputs).reduce(
-    (acc, [key, value]) => {
-      const cell = cleanRow[value] ?? ''
-      acc[key] = {
-        value: cell,
-        includedInPrompt: true,
-      }
-      return acc
-    },
-    {} as { [key: string]: PlaygroundInput },
-  )
+  const mapped = Object.entries(mappedInputs).reduce((acc, [key, value]) => {
+    const cell = cleanRow[value] ?? ''
+    acc[key] = {
+      value: cell,
+      metadata: {
+        includeInPrompt: true,
+      },
+    }
+    return acc
+  }, {} as Inputs<'dataset'>)
 
   // Recalculate inputs
   return Object.entries(inputs).reduce((acc, [key, value]) => {
     const newInput = mapped[key]
     acc[key] = newInput ?? value // If not found let existing
     return acc
-  }, {} as PlaygroundInputs)
+  }, {} as Inputs<'dataset'>)
+}
+const EMPTY_PREVIEW = {
+  headers: {},
+  headersOptions: [],
+  rows: [],
+  rowCount: 0,
 }
 
 export function useSelectDataset({
-  inputs,
-  setInputs,
+  document,
+  commitVersionUuid,
 }: {
-  inputs: PlaygroundInputs
-  setInputs: (newInputs: PlaygroundInputs) => void
+  document: DocumentVersion
+  commitVersionUuid: string
 }) {
-  const document = useCurrentDocument()
   const [selectedDataset, setSelectedDataset] = useState<Dataset | undefined>()
+  const {
+    dataset: { inputs, mappedInputs, rowIndex, setInputs, setDataset },
+  } = useDocumentParameters({
+    documentVersionUuid: document.documentUuid,
+    commitVersionUuid,
+  })
   const { data: datasets, isLoading: isLoadingDatasets } = useDatasets({
     onFetched: (data) => {
       setSelectedDataset(data.find((ds) => ds.id === document.datasetId))
@@ -78,41 +82,32 @@ export function useSelectDataset({
     () => datasets.map((ds) => ({ value: ds.id, label: ds.name })),
     [datasets],
   )
-  const { selectedRow, saveRowInfo } = useSelectedDatasetRow({
-    document,
+
+  const { data: csv, isLoading: isLoadingPreviewDataset } = useDatasetPreview({
     dataset: selectedDataset,
   })
 
-  const [datasetPreview, setDatasetPreview] = useState<DatasetPreview>({
-    headers: {},
-    headersOptions: [],
-    rows: [],
-    rowCount: 0,
-  })
+  const datasetPreview = useMemo<DatasetPreview>(() => {
+    if (!selectedDataset) return EMPTY_PREVIEW
 
-  const { isLoading: isLoadingPreviewDataset } = useDatasetPreview({
-    dataset: selectedDataset,
-    onSuccess: (csv) => {
-      const headers = csv?.headers ?? []
-      const headersByIndex = headers.reduce(
-        (acc, header, i) => {
-          acc[i] = header
-          return acc
-        },
-        {} as DatasetPreview['headers'],
-      )
-      const options = headers.map((header, i) => ({ value: i, label: header }))
-      const preview = {
-        headers: headersByIndex,
-        headersOptions: options,
-        rows: csv?.rows ?? [],
-        rowCount: csv?.rowCount ?? 0,
-      }
-      if (!selectedDataset) return
+    const headers = csv?.headers ?? []
+    const headersByIndex = headers.reduce(
+      (acc, header, i) => {
+        acc[i] = header
+        return acc
+      },
+      {} as DatasetPreview['headers'],
+    )
+    const options = headers.map((header, i) => ({ value: i, label: header }))
+    const preview = {
+      headers: headersByIndex,
+      headersOptions: options,
+      rows: csv?.rows ?? [],
+      rowCount: csv?.rowCount ?? 0,
+    }
+    return preview
+  }, [csv, selectedDataset])
 
-      setDatasetPreview(preview)
-    },
-  })
   const onSelectDataset = useCallback(
     async (value: string) => {
       const ds = datasets.find((ds) => ds.id === Number(value))
@@ -126,15 +121,15 @@ export function useSelectDataset({
       })
 
       setSelectedDataset(ds)
-      saveRowInfo({ rowIndex: 0, datasetId: ds.id, mappedInputs: {} })
+      setDataset({ rowIndex: 0, datasetId: ds.id, mappedInputs: {} })
     },
     [
       datasets,
       assignDataset,
       project.id,
       document.documentUuid,
       commit.uuid,
-      saveRowInfo,
+      setDataset,
     ],
   )
   const isLoading = isLoadingDatasets || isLoadingPreviewDataset
@@ -143,15 +138,15 @@ export function useSelectDataset({
     (rowIndex: number) => {
       if (!datasetPreview || !selectedDataset) return
 
-      const mapped = selectedRow?.mappedInputs ?? {}
+      const mapped = mappedInputs ?? {}
       const newInputs = mappedToInputs({
         inputs,
         datasetPreview,
         mappedInputs: mapped,
         rowIndex,
       })
       setInputs(newInputs)
-      saveRowInfo({
+      setDataset({
         rowIndex,
         datasetId: selectedDataset.id,
         mappedInputs: mapped,
@@ -160,25 +155,25 @@ export function useSelectDataset({
     [
       inputs,
       setInputs,
-      saveRowInfo,
+      setDataset,
       datasetPreview.rows,
       selectedDataset,
-      selectedRow?.mappedInputs,
+      mappedInputs,
     ],
   )
 
   const onSelectHeader = useCallback(
     (param: string) => (headerIndex: string) => {
-      const prevMapped = selectedRow?.mappedInputs ?? {}
+      const prevMapped = mappedInputs ?? {}
       const mapped = { ...prevMapped, [param]: Number(headerIndex) }
       const newInputs = mappedToInputs({
         inputs,
         datasetPreview,
         mappedInputs: mapped,
-        rowIndex: selectedRow?.rowIndex ?? 0,
+        rowIndex: rowIndex ?? 0,
       })
-      saveRowInfo({
-        rowIndex: selectedRow?.rowIndex ?? 0,
+      setDataset({
+        rowIndex: rowIndex ?? 0,
         datasetId: selectedDataset?.id,
         mappedInputs: mapped,
       })
@@ -187,26 +182,26 @@ export function useSelectDataset({
     [
       inputs,
       setInputs,
-      saveRowInfo,
-      selectedRow?.rowIndex,
-      selectedRow?.mappedInputs,
+      setDataset,
+      rowIndex,
+      mappedInputs,
       datasetPreview?.rows,
       selectedDataset?.id,
     ],
   )
 
   return {
     selectedRow: {
-      rowIndex: selectedRow?.rowIndex ?? 0,
-      mappedInputs: selectedRow?.mappedInputs ?? {},
+      rowIndex: rowIndex ?? 0,
+      mappedInputs: mappedInputs ?? {},
     },
     datasetPreview,
     isLoading,
     datasetOptions,
     selectedDataset,
     onSelectDataset,
     onRowChange,
-    selectedRowIndex: selectedRow?.rowIndex,
+    selectedRowIndex: rowIndex,
     totalRows: datasetPreview?.rowCount,
     onSelectHeader,
   }