chore: a bunch of small improvements (#242)

* chore: added some missing blankslate

Looks broken otherwise

* chore: workspace name in project ui should not be a link

* chore: remove drag and drop mentions until we fix the dropzone input bug with draggable files

* chore: consistent styles in dataset table actions section

* chore: added missing success toast on saving evaluation

* chore: fix all the breadcrumb links

* chore: added button to go to evaluation from evaluation section in document

* chore: report frontend if a document run fails during evaluation

* chore: update evaluation stats automagically also

apps/web/src/app/(private)/datasets/_components/DatasetsTable/index.tsx

@@ -42,7 +42,6 @@ export function DatasetsTable({
             <TableHead>Author</TableHead>
             <TableHead>Created at</TableHead>
             <TableHead />
-            <TableHead />
           </TableRow>
         </TableHeader>
         <TableBody>
@@ -66,26 +65,26 @@ export function DatasetsTable({
                 </Text.H4>
               </TableCell>
               <TableCell align='center'>
-                <Tooltip
-                  trigger={
-                    <Button
-                      onClick={() => setPreview(dataset)}
-                      variant='nope'
-                      iconProps={{ name: 'eye', color: 'foregroundMuted' }}
-                    />
-                  }
-                >
-                  <Text.H6B color='white'>
-                    Show file preview (first 100 rows)
-                  </Text.H6B>
-                </Tooltip>
-              </TableCell>
-              <TableCell align='center'>
-                <Button
-                  onClick={() => setDeletable(dataset)}
-                  variant='nope'
-                  iconProps={{ name: 'trash', color: 'destructive' }}
-                />
+                <div className='flex flex-row gap-4'>
+                  <Tooltip
+                    trigger={
+                      <Button
+                        onClick={() => setPreview(dataset)}
+                        variant='nope'
+                        iconProps={{ name: 'eye', color: 'foregroundMuted' }}
+                      />
+                    }
+                  >
+                    <Text.H6B color='white'>
+                      Show file preview (first 100 rows)
+                    </Text.H6B>
+                  </Tooltip>
+                  <Button
+                    onClick={() => setDeletable(dataset)}
+                    variant='nope'
+                    iconProps={{ name: 'trash', color: 'foregroundMuted' }}
+                  />
+                </div>
               </TableCell>
             </TableRow>
           ))}

apps/web/src/app/(private)/error.tsx

@@ -5,15 +5,13 @@ import { useEffect } from 'react'
 import { ErrorComponent, useSession } from '@latitude-data/web-ui/browser'
 import * as Sentry from '@sentry/nextjs'
 import { NAV_LINKS } from '$/app/(private)/_lib/constants'
-import BreadcrumbLink from '$/components/BreadcrumbLink'
 import { AppLayout } from '$/components/layouts'
-import { ROUTES } from '$/services/routes'
 
 export default function Error({
   error,
 }: {
   error: Error & { digest?: string }
-  reset: () => void // Re-render of page
+  reset: () => void
 }) {
   const session = useSession()
 
@@ -26,9 +24,7 @@ export default function Error({
       currentUser={session.currentUser}
       breadcrumbs={[
         {
-          name: (
-            <BreadcrumbLink name={session.workspace.name} href={ROUTES.root} />
-          ),
+          name: session.workspace.name,
         },
         { name: 'Error' },
       ]}

apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/dashboard/page.tsx

@@ -1,8 +1,10 @@
-import { Container } from '@latitude-data/web-ui'
+import { Button, Container, TableBlankSlate } from '@latitude-data/web-ui'
 import {
   getConnectedDocumentsWithMetadataCached,
   getEvaluationByUuidCached,
 } from '$/app/(private)/_data-access'
+import { ROUTES } from '$/services/routes'
+import Link from 'next/link'
 
 import { EvaluationTabSelector } from '../_components/EvaluationTabs'
 import ConnectedDocumentsTable from './_components/ConnectedDocumentsTable'
@@ -20,13 +22,31 @@ export default async function DashboardPage({
   return (
     <Container>
       <EvaluationTabSelector evaluation={evaluation} />
-      <EvaluationStats
-        evaluation={evaluation}
-        connectedDocumentsWithMetadata={connectedDocumentsWithMetadata}
-      />
-      <ConnectedDocumentsTable
-        connectedDocumentsWithMetadata={connectedDocumentsWithMetadata}
-      />
+      {connectedDocumentsWithMetadata.length === 0 && (
+        <TableBlankSlate
+          description='There are no evaluation results yet. Connect your evaluation with a document and run it to start generating them.'
+          link={
+            <Link
+              href={
+                ROUTES.evaluations.detail({ uuid: evaluation.uuid }).editor.root
+              }
+            >
+              <Button>Edit the evaluation prompt</Button>
+            </Link>
+          }
+        />
+      )}
+      {connectedDocumentsWithMetadata.length > 0 && (
+        <>
+          <EvaluationStats
+            evaluation={evaluation}
+            connectedDocumentsWithMetadata={connectedDocumentsWithMetadata}
+          />
+          <ConnectedDocumentsTable
+            connectedDocumentsWithMetadata={connectedDocumentsWithMetadata}
+          />
+        </>
+      )}
     </Container>
   )
 }

apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/layout.tsx

@@ -24,12 +24,7 @@ export default async function EvaluationLayout({
       currentUser={session.user}
       breadcrumbs={[
         {
-          name: (
-            <BreadcrumbLink
-              href={ROUTES.dashboard.root}
-              name={session.workspace.name}
-            />
-          ),
+          name: session.workspace.name,
         },
         {
           name: (

apps/web/src/app/(private)/evaluations/(root)/layout.tsx

@@ -3,10 +3,8 @@ import { ReactNode } from 'react'
 import { Text } from '@latitude-data/web-ui'
 import { getEvaluationTemplatesCached } from '$/app/(private)/_data-access'
 import Evaluations from '$/app/(private)/evaluations/_components/Evaluations'
-import BreadcrumbLink from '$/components/BreadcrumbLink'
 import { AppLayout } from '$/components/layouts'
 import { getCurrentUser } from '$/services/auth/getCurrentUser'
-import { ROUTES } from '$/services/routes'
 
 import { NAV_LINKS } from '../../_lib/constants'
 
@@ -24,12 +22,7 @@ export default async function EvaluationsLayout({
       currentUser={session.user}
       breadcrumbs={[
         {
-          name: (
-            <BreadcrumbLink
-              href={ROUTES.dashboard.root}
-              name={session.workspace.name}
-            />
-          ),
+          name: session.workspace.name,
         },
         {
           name: <Text.H5M>Evaluations</Text.H5M>,

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/[evaluationId]/_components/Actions/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { EvaluationDto } from '@latitude-data/core/browser'
-import { TableWithHeader } from '@latitude-data/web-ui'
+import { Button, Icon, TableWithHeader } from '@latitude-data/web-ui'
 import { ROUTES } from '$/services/routes'
 import Link from 'next/link'
 
@@ -23,8 +23,15 @@ export function Actions({
     .evaluations.detail(evaluation.id).createBatch
 
   return (
-    <Link href={href}>
-      <TableWithHeader.Button>Run batch evaluation</TableWithHeader.Button>
-    </Link>
+    <div className='flex flex-row items-center gap-4'>
+      <Link href={ROUTES.evaluations.detail({ uuid: evaluation.uuid }).root}>
+        <Button variant='ghost'>
+          Go to evaluation <Icon name='externalLink' />
+        </Button>
+      </Link>
+      <Link href={href}>
+        <TableWithHeader.Button>Run batch evaluation</TableWithHeader.Button>
+      </Link>
+    </div>
   )
 }

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/[evaluationId]/_components/ClientContainer/index.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import { useEffect } from 'react'
+
+import { EvaluationDto } from '@latitude-data/core/browser'
+import { EvaluationResultWithMetadata } from '@latitude-data/core/repositories'
+import {
+  useCurrentCommit,
+  useCurrentDocument,
+  useCurrentProject,
+} from '@latitude-data/web-ui'
+import useEvaluationResultsWithMetadata from '$/stores/evaluationResultsWithMetadata'
+
+import { EvaluationResults } from '../EvaluationResults'
+import { MetricsSummary } from '../MetricsSummary'
+
+const FIVE_SECONDS = 5000
+
+export default function ClientContainer({
+  documentUuid,
+  evaluation,
+  evaluationResults: serverData,
+}: {
+  documentUuid: string
+  evaluation: EvaluationDto
+  evaluationResults: EvaluationResultWithMetadata[]
+}) {
+  const document = useCurrentDocument()
+  const { project } = useCurrentProject()
+  const { commit } = useCurrentCommit()
+  const { data: evaluationResults, mutate } = useEvaluationResultsWithMetadata(
+    {
+      evaluationId: evaluation.id,
+      documentUuid: document.documentUuid,
+      commitUuid: commit.uuid,
+      projectId: project.id,
+    },
+    {
+      fallbackData: serverData,
+    },
+  )
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      mutate()
+    }, FIVE_SECONDS)
+
+    return () => clearInterval(interval)
+  }, [mutate])
+
+  return (
+    <>
+      <MetricsSummary
+        documentUuid={documentUuid}
+        evaluation={evaluation}
+        evaluationResults={evaluationResults}
+      />
+      <EvaluationResults
+        evaluation={evaluation}
+        evaluationResults={evaluationResults}
+      />
+    </>
+  )
+}

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/[evaluationId]/_components/EvaluationResults/index.tsx

@@ -1,70 +1,73 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 
 import { EvaluationDto } from '@latitude-data/core/browser'
 import { EvaluationResultWithMetadata } from '@latitude-data/core/repositories'
 import {
+  TableBlankSlate,
   Text,
   useCurrentCommit,
   useCurrentDocument,
   useCurrentProject,
 } from '@latitude-data/web-ui'
-import useEvaluationResultsWithMetadata from '$/stores/evaluationResultsWithMetadata'
+import { DocumentRoutes, ROUTES } from '$/services/routes'
 import { useProviderLog } from '$/stores/providerLogs'
+import Link from 'next/link'
 
 import { EvaluationResultInfo } from './EvaluationResultInfo'
 import { EvaluationResultsTable } from './EvaluationResultsTable'
 import { EvaluationStatusBanner } from './EvaluationStatusBanner'
 
-const FIVE_SECONDS = 5000
-
 export function EvaluationResults({
   evaluation,
-  evaluationResults: serverData,
+  evaluationResults,
 }: {
   evaluation: EvaluationDto
   evaluationResults: EvaluationResultWithMetadata[]
 }) {
+  const { project } = useCurrentProject()
+  const { commit } = useCurrentCommit()
+  const document = useCurrentDocument()
   const [selectedResult, setSelectedResult] = useState<
     EvaluationResultWithMetadata | undefined
   >(undefined)
-  const document = useCurrentDocument()
-  const { project } = useCurrentProject()
-  const { commit } = useCurrentCommit()
-  const { data: evaluationResults, mutate } = useEvaluationResultsWithMetadata(
-    {
-      evaluationId: evaluation.id,
-      documentUuid: document.documentUuid,
-      commitUuid: commit.uuid,
-      projectId: project.id,
-    },
-    {
-      fallbackData: serverData,
-    },
-  )
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      mutate()
-    }, FIVE_SECONDS)
-
-    return () => clearInterval(interval)
-  }, [mutate])
-
   const { data: providerLog } = useProviderLog(selectedResult?.providerLogId)
   return (
     <div className='flex flex-col gap-4'>
       <Text.H4>Evaluation Results</Text.H4>
       <EvaluationStatusBanner evaluation={evaluation} />
       <div className='flex flex-row w-full h-full overflow-hidden gap-4'>
         <div className='flex-grow min-w-0 h-full'>
-          <EvaluationResultsTable
-            evaluation={evaluation}
-            evaluationResults={evaluationResults}
-            selectedResult={selectedResult}
-            setSelectedResult={setSelectedResult}
-          />
+          {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.'
+              link={
+                <Link
+                  href={
+                    ROUTES.projects
+                      .detail({ id: project.id })
+                      .commits.detail({ uuid: commit.uuid })
+                      .documents.detail({ uuid: document.documentUuid })
+                      [DocumentRoutes.evaluations].detail(evaluation.id)
+                      .createBatch
+                  }
+                >
+                  <TableBlankSlate.Button>
+                    Run the evaluation
+                  </TableBlankSlate.Button>
+                </Link>
+              }
+            />
+          )}
+          {evaluationResults.length > 0 && (
+            <EvaluationResultsTable
+              evaluation={evaluation}
+              evaluationResults={evaluationResults}
+              selectedResult={selectedResult}
+              setSelectedResult={setSelectedResult}
+            />
+          )}
         </div>
         {selectedResult && (
           <EvaluationResultInfo