Redirect to log correct page in paginated logs list (#626)

We were doing a shitty version of this in the client with a useEffect and I realize that we have a backend. So I just moved to it Also: Make playground resizable and avoid requesting a log when one is in flight
latitude-dev · Nov 18, 2024 · 49d292b · 49d292b
1 parent 1ecff0b
commit 49d292b
Show file tree

Hide file tree

Showing 8 changed files with 262 additions and 198 deletions.
diff --git a/...d]/_components/DocumentEditor/Editor/Playground/DocumentParams/HistoryLogParams/index.tsx b/...d]/_components/DocumentEditor/Editor/Playground/DocumentParams/HistoryLogParams/index.tsx
@@ -61,46 +61,49 @@ export function HistoryLogParams({
       <div className='flex flex-row gap-x-4 justify-between items-center border-border border-b pb-4'>
         {data.isLoading || hasLogs ? (
           <>
-            <div className='flex-grow'>
+            <div className='flex flex-grow min-w-0'>
               {data.isLoadingLog ? (
                 <div className='flex flex-row gap-x-2 w-full'>
                   <Skeleton height='h3' className='w-2/3' />
                   <Skeleton height='h3' className='w-1/3' />
                 </div>
               ) : null}
               {!data.isLoadingLog && urlData ? (
-                <Link href={urlData.url}>
-                  <div className='flex flex-row items-center gap-x-2'>
-                    <Text.H5>{urlData.createdAt}</Text.H5>
-                    {urlData.hasError ? (
-                      <Tooltip
-                        variant='destructive'
-                        trigger={
-                          <Badge variant='destructive'>
-                            {urlData.shortCode}
-                          </Badge>
-                        }
-                      >
-                        This log has an error
-                      </Tooltip>
-                    ) : (
-                      <Badge variant='accent'>{urlData.shortCode}</Badge>
-                    )}
-                    <Icon name='externalLink' color='foregroundMuted' />
-                  </div>
+                <Link
+                  href={urlData.url}
+                  className='flex-grow min-w-0 flex flex-row items-center gap-x-2'
+                >
+                  <Text.H5 ellipsis noWrap>
+                    {urlData.createdAt}
+                  </Text.H5>
+                  {urlData.hasError ? (
+                    <Tooltip
+                      variant='destructive'
+                      trigger={
+                        <Badge variant='destructive'>{urlData.shortCode}</Badge>
+                      }
+                    >
+                      This log has an error
+                    </Tooltip>
+                  ) : (
+                    <Badge variant='accent'>{urlData.shortCode}</Badge>
+                  )}
+                  <Icon
+                    name='externalLink'
+                    color='foregroundMuted'
+                    className='flex-none'
+                  />
                 </Link>
               ) : null}
             </div>
-            <div>
-              <ParametersPaginationNav
-                disabled={data.isLoadingLog}
-                label='history logs'
-                currentIndex={data.position}
-                totalCount={data.count}
-                onPrevPage={data.onPrevPage}
-                onNextPage={data.onNextPage}
-              />
-            </div>
+            <ParametersPaginationNav
+              disabled={data.isLoadingLog}
+              label='history logs'
+              currentIndex={data.position}
+              totalCount={data.count}
+              onPrevPage={data.onPrevPage}
+              onNextPage={data.onNextPage}
+            />
           </>
         ) : (
           <div className='w-full flex justify-center'>

diff --git a/...s/DocumentEditor/Editor/Playground/DocumentParams/HistoryLogParams/useLogHistoryParams.ts b/...s/DocumentEditor/Editor/Playground/DocumentParams/HistoryLogParams/useLogHistoryParams.ts
@@ -98,11 +98,16 @@ export function useLogHistoryParams({
     },
   })
 
-  const updatePosition = useCallback((position: number) => {
-    setPosition((prev) =>
-      prev ? { ...prev, position } : { position, page: 1 },
-    )
-  }, [])
+  const updatePosition = useCallback(
+    (position: number) => {
+      if (isLoadingLog) return
+
+      setPosition((prev) =>
+        prev ? { ...prev, position } : { position, page: 1 },
+      )
+    },
+    [isLoadingLog],
+  )
 
   const onNextPage = useCallback(
     (position: number) => updatePosition(position + 1),

diff --git a/...Uuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/PaginationNav/index.tsx b/...Uuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/PaginationNav/index.tsx
@@ -21,7 +21,7 @@ export function ParametersPaginationNav({
   if (currentIndex === undefined || totalCount === undefined) return null
 
   return (
-    <div className='flex items-center'>
+    <div className='flex items-center min-w-0'>
       <Button
         size='default'
         variant='ghost'
@@ -31,13 +31,10 @@ export function ParametersPaginationNav({
         }}
         onClick={() => onPrevPage(currentIndex)}
       />
-      <div className='flex flex-row items-center gap-x-1'>
-        <Text.H5M color='foregroundMuted'>
-          {zeroIndex ? currentIndex + INDEX_ZERO_LIST : currentIndex}
-        </Text.H5M>
-        <div className='max-w-14' />
-        <Text.H5M color='foregroundMuted'>
-          of {totalCount} {label}
+      <div className='flex flex-row justify-center items-center flex-grow min-w-0'>
+        <Text.H5M color='foregroundMuted' ellipsis noWrap>
+          {zeroIndex ? currentIndex + INDEX_ZERO_LIST : currentIndex} of{' '}
+          {totalCount} {label}
         </Text.H5M>
       </div>
       <Button

diff --git a/...ersions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/index.tsx b/...ersions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/index.tsx
@@ -17,6 +17,7 @@ import {
   Button,
   DocumentTextEditor,
   DocumentTextEditorFallback,
+  SplitPane,
   Text,
   useCurrentCommit,
   useCurrentProject,
@@ -244,53 +245,64 @@ export default function DocumentEditor({
           addMessagesAction: addMessagesAction as AddMessagesActionFn,
         }}
       >
-        <div className='flex flex-row w-full h-full gap-8 p-6'>
-          <div className='flex flex-col flex-1 flex-grow flex-shrink gap-2 min-w-0'>
-            <EditorHeader
-              providers={providers}
-              disabledMetadataSelectors={isMerged}
-              title='Prompt editor'
-              metadata={metadata}
-              prompt={value}
-              onChangePrompt={onChange}
-              freeRunsCount={freeRunsCount}
-              showCopilotSetting
-            />
-            <Suspense fallback={<DocumentTextEditorFallback />}>
-              <DocumentTextEditor
-                value={value}
-                metadata={metadata}
-                onChange={onChange}
-                diff={diff}
-                readOnlyMessage={
-                  isMerged ? 'Create a draft to edit documents.' : undefined
-                }
-                isSaved={isSaved}
-                actionButtons={
-                  <Button
-                    className='bg-background'
-                    variant='outline'
-                    size='small'
-                    iconProps={{
-                      name: 'sparkles',
-                      size: 'small',
+        <SplitPane
+          className='p-6'
+          initialPercentage={55}
+          minWidth={300}
+          leftPane={
+            <SplitPane.Pane>
+              <div className='pr-4 flex flex-col flex-1 flex-grow flex-shrink gap-2 min-w-0'>
+                <EditorHeader
+                  providers={providers}
+                  disabledMetadataSelectors={isMerged}
+                  title='Prompt editor'
+                  metadata={metadata}
+                  prompt={value}
+                  onChangePrompt={onChange}
+                  freeRunsCount={freeRunsCount}
+                  showCopilotSetting
+                />
+                <Suspense fallback={<DocumentTextEditorFallback />}>
+                  <DocumentTextEditor
+                    value={value}
+                    metadata={metadata}
+                    onChange={onChange}
+                    diff={diff}
+                    readOnlyMessage={
+                      isMerged ? 'Create a draft to edit documents.' : undefined
+                    }
+                    isSaved={isSaved}
+                    actionButtons={
+                      <Button
+                        className='bg-background'
+                        variant='outline'
+                        size='small'
+                        iconProps={{
+                          name: 'sparkles',
+                          size: 'small',
+                        }}
+                        onClick={() => setRefineDocumentModalOpen(true)}
+                      >
+                        <Text.H6>Refine</Text.H6>
+                      </Button>
+                    }
+                    copilot={{
+                      isLoading: isCopilotLoading,
+                      requestSuggestion,
                     }}
-                    onClick={() => setRefineDocumentModalOpen(true)}
-                  >
-                    <Text.H6>Refine</Text.H6>
-                  </Button>
-                }
-                copilot={{
-                  isLoading: isCopilotLoading,
-                  requestSuggestion,
-                }}
-              />
-            </Suspense>
-          </div>
-          <div className='flex-1 relative'>
-            <Playground document={document} metadata={metadata!} />
-          </div>
-        </div>
+                  />
+                </Suspense>
+              </div>
+            </SplitPane.Pane>
+          }
+          rightPane={
+            <SplitPane.Pane>
+              <div className='pl-4 flex-1 relative max-h-full'>
+                <Playground document={document} metadata={metadata!} />
+              </div>
+            </SplitPane.Pane>
+          }
+        />
       </DocumentEditorContext.Provider>
     </>
   )

diff --git a/...d]/documents/[documentUuid]/logs/_components/DocumentLogs/DocumentLogBlankSlate/index.tsx b/...d]/documents/[documentUuid]/logs/_components/DocumentLogs/DocumentLogBlankSlate/index.tsx
@@ -0,0 +1,61 @@
+import { Commit } from '@latitude-data/core/browser'
+import { Button, Text } from '@latitude-data/web-ui'
+import { getDocumentByUuidCached } from '$/app/(private)/_data-access'
+import { ROUTES } from '$/services/routes'
+import Link from 'next/link'
+
+import { DocumentBlankSlateLayout } from '../../../../../_components/DocumentBlankSlateLayout'
+import { DocumentsClient } from '../../../../../_components/DocumentsClient'
+
+export async function DocumentLogBlankSlate({
+  commit,
+  projectId,
+  documentUuid,
+}: {
+  commit: Commit
+  documentUuid: string
+  projectId: number
+}) {
+  const document = await getDocumentByUuidCached({
+    documentUuid,
+    projectId,
+    commitUuid: commit.uuid,
+  })
+  return (
+    <DocumentBlankSlateLayout>
+      <div className='flex flex-col gap-4 items-center'>
+        <Text.H5>
+          To get started, please choose one of the following options:
+        </Text.H5>
+      </div>
+      <Link
+        href={
+          ROUTES.projects
+            .detail({ id: projectId })
+            .commits.detail({ uuid: commit.uuid })
+            .documents.detail({ uuid: documentUuid }).logs.upload
+        }
+      >
+        <Button fullWidth variant='outline'>
+          <div className='flex flex-col gap-1 p-4'>
+            <Text.H4M>Import logs from UI</Text.H4M>
+            <Text.H5 color='foregroundMuted'>
+              If you run prompts outside of Latitude, you can upload your logs
+              in order to evaluate them.
+            </Text.H5>
+          </div>
+        </Button>
+      </Link>
+      <Text.H5 color='foregroundMuted'>Or</Text.H5>
+      <div className='p-6 bg-background border rounded-lg flex flex-col gap-4 max-w-3xl'>
+        <Text.H4M>Import logs from code</Text.H4M>
+        <Text.H5 color='foregroundMuted'>
+          Run this code snippet to start importing logs into Latitude. Once
+          done, come back to this page, and you'll be able to evaluate both
+          existing and incoming logs.
+        </Text.H5>
+        <DocumentsClient document={document} />
+      </div>
+    </DocumentBlankSlateLayout>
+  )
+}
diff --git a/...d]/versions/[commitUuid]/documents/[documentUuid]/logs/_components/DocumentLogs/index.tsx b/...d]/versions/[commitUuid]/documents/[documentUuid]/logs/_components/DocumentLogs/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useRef, useState } from 'react'
 
 import { DocumentLogWithMetadataAndError } from '@latitude-data/core/repositories'
 import {
@@ -13,9 +13,7 @@ import {
   EventArgs,
   useSockets,
 } from '$/components/Providers/WebsocketsProvider/useSockets'
-import { useGenerateDocumentLogDetailUrl } from '$/hooks/useGenerateDocumentLogDetailUrl'
 import useDocumentLogs, { documentLogPresenter } from '$/stores/documentLogs'
-import useDocumentLogWithPaginationPosition from '$/stores/documentLogWithPaginationPosition'
 import useProviderLogs from '$/stores/providerLogs'
 import { useSearchParams } from 'next/navigation'
 
@@ -68,48 +66,12 @@ const useDocumentLogSocket = (
   useSockets({ event: 'documentLogCreated', onMessage })
 }
 
-/**
- * When this page receive ?logUuid=some-uuid it can happen 2 things
- *
- *   1. The `page=NUMBER` is correct and `selectedLog` is there.
- *   2. There is no `page` param or is incorrect `selectedLog` is not there.
- *
- * We handle (2) here by looking the right page for the `logUuid` in the URL
- */
-function useRedirectToLogDetail({
-  selectedLog,
-  documentLogUuid,
-}: {
-  selectedLog: DocumentLogWithMetadataAndError | undefined
-  documentLogUuid: string | undefined
-}) {
-  const mounted = useRef(false)
-  const { data: position, isLoading } = useDocumentLogWithPaginationPosition({
-    documentLogUuid: selectedLog ? undefined : documentLogUuid,
-  })
-  const { url } = useGenerateDocumentLogDetailUrl({
-    documentLogUuid,
-    page: position?.page,
-  })
-  useEffect(() => {
-    if (selectedLog) return
-    if (mounted.current) return
-    if (isLoading || !url) return
-
-    mounted.current = true
-
-    window.location.href = url
-  }, [url, isLoading, selectedLog])
-}
-
 export function DocumentLogs({
   documentLogs: serverDocumentLogs,
   selectedLog: serverSelectedLog,
-  documentLogUuid,
 }: {
   documentLogs: DocumentLogWithMetadataAndError[]
   selectedLog: DocumentLogWithMetadataAndError | undefined
-  documentLogUuid: string | undefined
 }) {
   const tableRef = useRef<HTMLTableElement>(null)
   const sidebarWrapperRef = useRef<HTMLDivElement>(null)
@@ -140,7 +102,6 @@ export function DocumentLogs({
   )
 
   useDocumentLogSocket(document.documentUuid, mutate)
-  useRedirectToLogDetail({ selectedLog, documentLogUuid })
 
   if (!documentLogs.length) {
     return (