Fix evaluation blank slate not being scrollable (#311)

latitude-dev · Sep 30, 2024 · 873695d · 873695d
1 parent 3eccea7
commit 873695d
Show file tree

Hide file tree

Showing 10 changed files with 44 additions and 94 deletions.
diff --git a/...jectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentTabs/index.tsx b/...jectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentTabs/index.tsx
@@ -16,7 +16,7 @@ export default function DocumentTabs({
 }) {
   const { toggleDocumentation } = useContext(DocumentationContext)
   return (
-    <div className='flex flex-col h-full'>
+    <>
       <div className='flex flex-row items-center justify-between pt-6 px-4'>
         <DocumentTabSelector
           projectId={params.projectId}
@@ -28,6 +28,6 @@ export default function DocumentTabs({
         </Button>
       </div>
       <div className='flex-grow flex flex-col w-full'>{children}</div>
-    </div>
+    </>
   )
 }
diff --git a/...Id]/versions/[commitUuid]/documents/[documentUuid]/_components/MetadataInfoTabs/index.tsx b/...Id]/versions/[commitUuid]/documents/[documentUuid]/_components/MetadataInfoTabs/index.tsx
@@ -1,7 +1,6 @@
-import { ReactNode, useRef, useState } from 'react'
+import { ReactNode, useState } from 'react'
 
 import { cn, TabSelector, TabSelectorOption } from '@latitude-data/web-ui'
-import useDynamicHeight from '$/hooks/useDynamicHeight'
 
 type RenderProps = { selectedTab: string }
 export function MetadataInfoTabs({
@@ -19,28 +18,20 @@ export function MetadataInfoTabs({
   className?: string
 }) {
   const [selectedTab, setSelectedTab] = useState<string>('metadata')
-  const ref = useRef<HTMLDivElement>(null)
-  const height = useDynamicHeight({ ref, paddingBottom: 16 })
   return (
     <div
-      ref={ref}
       className={cn(
         'relative flex-shrink-0 flex flex-col',
-        'border border-border rounded-lg items-center custom-scrollbar overflow-y-auto',
+        'border border-border rounded-lg items-center',
         className,
       )}
-      style={{
-        maxHeight: height ? `${height}px` : 'auto',
-      }}
     >
-      <div className='z-10 w-full sticky top-0 px-4 bg-white flex justify-center'>
-        <div className='pt-6'>
-          <TabSelector
-            options={tabs}
-            selected={selectedTab}
-            onSelect={setSelectedTab}
-          />
-        </div>
+      <div className='pt-6'>
+        <TabSelector
+          options={tabs}
+          selected={selectedTab}
+          onSelect={setSelectedTab}
+        />
       </div>
       <div className='my-5 px-4 flex flex-col gap-y-5 relative w-full'>
         {beforeTabs}

diff --git a/...Uuid]/evaluations/[evaluationId]/_components/EvaluationResults/EvaluationResultsTable.tsx b/...Uuid]/evaluations/[evaluationId]/_components/EvaluationResults/EvaluationResultsTable.tsx
@@ -1,4 +1,3 @@
-import { useRef } from 'react'
 import { capitalize } from 'lodash-es'
 
 import {
@@ -21,7 +20,6 @@ import {
 } from '@latitude-data/web-ui'
 import { formatCostInMillicents, relativeTime } from '$/app/_lib/formatUtils'
 import { TablePaginationFooter } from '$/components/TablePaginationFooter'
-import useDynamicHeight from '$/hooks/useDynamicHeight'
 
 function countLabel(count: number) {
   return `${count} evaluation results`
@@ -74,13 +72,9 @@ export const EvaluationResultsTable = ({
   selectedResult: EvaluationResultRow | undefined
   setSelectedResult: (log: EvaluationResultWithMetadata | undefined) => void
 }) => {
-  const ref = useRef<HTMLTableElement>(null)
-  const height = useDynamicHeight({ ref, paddingBottom: 16 })
   return (
     <Table
-      ref={ref}
       className='table-auto'
-      maxHeight={height}
       externalFooter={
         <TablePaginationFooter
           pagination={pagination}

diff --git a/...cuments/[documentUuid]/evaluations/[evaluationId]/_components/EvaluationResults/index.tsx b/...cuments/[documentUuid]/evaluations/[evaluationId]/_components/EvaluationResults/index.tsx
@@ -83,8 +83,8 @@ export function EvaluationResults({
         documentUuid={document.documentUuid}
         evaluationId={evaluation.id}
       />
-      <div className='flex flex-row w-full h-full overflow-hidden gap-4'>
-        <div className='flex-grow min-w-0 h-full'>
+      <div className='relative flex flex-row w-full gap-4'>
+        <div className='flex-1'>
           {evaluationResults.length === 0 && (
             <TableBlankSlate
               description='There are no evaluation results yet. Run the evaluation or, if you already have, wait a few seconds for the first results to stream in.'

diff --git a/...[commitUuid]/documents/[documentUuid]/logs/_components/DocumentLogs/DocumentLogsTable.tsx b/...[commitUuid]/documents/[documentUuid]/logs/_components/DocumentLogs/DocumentLogsTable.tsx
@@ -1,5 +1,3 @@
-import { useRef } from 'react'
-
 import { IPagination } from '@latitude-data/core/lib/pagination/buildPagination'
 import { DocumentLogWithMetadata } from '@latitude-data/core/repositories'
 import {
@@ -19,7 +17,6 @@ import {
   relativeTime,
 } from '$/app/_lib/formatUtils'
 import { TablePaginationFooter } from '$/components/TablePaginationFooter'
-import useDynamicHeight from '$/hooks/useDynamicHeight'
 
 function countLabel(count: number) {
   return `${count} logs`
@@ -36,13 +33,9 @@ export const DocumentLogsTable = ({
   setSelectedLog: (log: DocumentLogWithMetadata | undefined) => void
   pagination: IPagination
 }) => {
-  const ref = useRef<HTMLTableElement>(null)
-  const height = useDynamicHeight({ ref, paddingBottom: 16 })
   return (
     <Table
       className='table-auto'
-      ref={ref}
-      maxHeight={height}
       externalFooter={
         <TablePaginationFooter
           pagination={pagination}

diff --git a/apps/web/src/hooks/useDynamicHeight.ts b/apps/web/src/hooks/useDynamicHeight.ts
diff --git a/packages/core/src/lib/pagination/paginate.test.ts b/packages/core/src/lib/pagination/paginate.test.ts
@@ -5,10 +5,6 @@ import { database } from '../../client'
 import { users } from '../../schema'
 import { paginateQuery } from './paginate'
 
-const dynamicQuery = database
-  .select({ email: users.email })
-  .from(users)
-  .$dynamic()
 const pageUrl = { base: 'http://localhost/my-page' }
 describe('paginateQuery', () => {
   beforeEach(async () => {
@@ -21,7 +17,10 @@ describe('paginateQuery', () => {
 
   it('returns first 2 users', async () => {
     const { rows, pagination } = await paginateQuery({
-      dynamicQuery,
+      dynamicQuery: database
+        .select({ email: users.email })
+        .from(users)
+        .$dynamic(),
       pageUrl,
       searchParams: 'page=1&pageSize=2',
     })
@@ -46,7 +45,10 @@ describe('paginateQuery', () => {
 
   it('returns page 3', async () => {
     const { rows, pagination } = await paginateQuery({
-      dynamicQuery,
+      dynamicQuery: database
+        .select({ email: users.email })
+        .from(users)
+        .$dynamic(),
       pageUrl,
       searchParams: {
         page: '3',
@@ -77,7 +79,10 @@ describe('paginateQuery', () => {
 
   it('with default page size', async () => {
     const { rows, pagination } = await paginateQuery({
-      dynamicQuery,
+      dynamicQuery: database
+        .select({ email: users.email })
+        .from(users)
+        .$dynamic(),
       pageUrl,
       defaultPaginate: { pageSize: 4 },
     })
@@ -104,7 +109,10 @@ describe('paginateQuery', () => {
 
   it('respect other search params', async () => {
     const { rows, pagination } = await paginateQuery({
-      dynamicQuery,
+      dynamicQuery: database
+        .select({ email: users.email })
+        .from(users)
+        .$dynamic(),
       pageUrl,
       searchParams: 'page=1&pageSize=2&sort=email',
     })

diff --git a/packages/web-ui/src/ds/atoms/SplitPane/index.tsx b/packages/web-ui/src/ds/atoms/SplitPane/index.tsx
@@ -11,26 +11,26 @@ import {
 
 import { ResizableBox, ResizeCallbackData, ResizeHandle } from 'react-resizable'
 
+import { cn } from '../../../lib/utils'
+
 function Pane({ children }: { children: ReactNode }) {
-  return (
-    <div className='flex flex-col h-full relative'>
-      <div className='w-full h-full'>{children}</div>
-    </div>
-  )
+  return <div className='flex flex-col h-full relative'>{children}</div>
 }
 
 const PaneWrapper = ({
   width = 'auto',
   children,
   isResizable = false,
+  className,
 }: {
+  children: ReactNode
   width?: number | 'auto'
   isResizable?: boolean
-  children: ReactNode
+  className?: string
 }) => {
   return (
     <div
-      className='h-full max-h-full overflow-y-auto'
+      className={cn('h-full overflow-y-auto custom-scrollbar', className)}
       style={{
         width: width === 'auto' ? 'auto' : isResizable ? width - 1 : width,
       }}
@@ -104,12 +104,14 @@ function HorizontalSplit({
   initialWidth,
   minWidth,
   onResizeStop,
+  cssPanelHeight,
 }: {
   leftPane: ReactNode
   rightPane: ReactNode
   initialWidth: number
   minWidth: number
   onResizeStop: (width: number) => void
+  cssPanelHeight?: string
 }) {
   const [paneWidth, setPaneWidth] = useState<number>(initialWidth)
   const width = typeof window !== 'undefined' ? paneWidth : initialWidth
@@ -121,11 +123,11 @@ function HorizontalSplit({
         onResizePane={setPaneWidth}
         onResizeStop={onResizeStop}
       >
-        <PaneWrapper isResizable width={width}>
+        <PaneWrapper isResizable width={width} className={cssPanelHeight}>
           {leftPane}
         </PaneWrapper>
       </ResizablePane>
-      <PaneWrapper>{rightPane}</PaneWrapper>
+      <PaneWrapper className={cssPanelHeight}>{rightPane}</PaneWrapper>
     </div>
   )
 }
@@ -136,15 +138,18 @@ const SplitPane = ({
   initialWidth,
   minWidth,
   onResizeStop,
+  cssPanelHeight,
 }: {
   leftPane: ReactNode
   rightPane: ReactNode
   initialWidth: number
   minWidth: number
   onResizeStop: (width: number) => void
+  cssPanelHeight?: string
 }) => {
   return (
     <HorizontalSplit
+      cssPanelHeight={cssPanelHeight}
       leftPane={leftPane}
       rightPane={rightPane}
       initialWidth={initialWidth}

diff --git a/packages/web-ui/src/ds/atoms/Table/index.tsx b/packages/web-ui/src/ds/atoms/Table/index.tsx
@@ -32,7 +32,7 @@ const Table = forwardRef<HTMLTableElement, TableProps>(
             ? `${maxHeight}px`
             : 'auto',
       }}
-      className='flex flex-col relative w-full rounded-lg border'
+      className='flex flex-col relative w-full rounded-lg border overflow-hidden'
     >
       <div
         className={cn('relative w-full flex-grow', overflow, {

diff --git a/packages/web-ui/src/sections/Document/DetailWrapper/index.tsx b/packages/web-ui/src/sections/Document/DetailWrapper/index.tsx
@@ -41,6 +41,7 @@ export default function DocumentDetailWrapper({
   )
   return (
     <SplitPane
+      cssPanelHeight='h-[calc(100vh-53px)]'
       initialWidth={sidebarWidth ?? minSidebarWidth}
       minWidth={minSidebarWidth}
       onResizeStop={onResizeStop}