Automated Evaluations - Support for Inspect AI (#142)

* Pagination bug

* Bug fix

* Experiments view

* re-order

* Comparison view

* Experiment report

* Experiments - hook up APIs

* Experiments pagination

* deduplicate paginated data

* Fix loading and error states - experiments

* Rename experiments and evaluations

* Add loading spinner

* Link evaluation

* Link to evals

* Fixes

* Minor UI fixes

app/(protected)/project/[project_id]/evaluate/page-client.tsx → app/(protected)/project/[project_id]/annotations/page-client.tsx

@@ -1,16 +1,14 @@
 "use client";
 
-import { EvalChart } from "@/components/charts/eval-chart";
-import LargeChartSkeleton from "@/components/charts/large-chart-skeleton";
-import { CreateTest } from "@/components/evaluate/create-test";
-import { EditTest } from "@/components/evaluate/edit-test";
+import { CreateTest } from "@/components/annotations/create-test";
+import { EditTest } from "@/components/annotations/edit-test";
 import EvaluationTable, {
   EvaluationTableSkeleton,
-} from "@/components/evaluate/evaluation-table";
+} from "@/components/annotations/evaluation-table";
+import { EvalChart } from "@/components/charts/eval-chart";
+import LargeChartSkeleton from "@/components/charts/large-chart-skeleton";
 import { AddtoDataset } from "@/components/shared/add-to-dataset";
-import { Separator } from "@/components/ui/separator";
-import { Skeleton } from "@/components/ui/skeleton";
-import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
 import { Test } from "@prisma/client";
 import { RabbitIcon } from "lucide-react";
 import { useParams } from "next/navigation";
@@ -75,7 +73,7 @@ export default function PageClient({ email }: { email: string }) {
   return (
     <div className="w-full flex flex-col gap-4">
       <div className="md:px-24 px-12 py-12 flex justify-between bg-muted">
-        <h1 className="text-3xl font-semibold">Evaluations</h1>
+        <h1 className="text-3xl font-semibold">Annotate & Measure</h1>
         <div className="flex gap-2">
           <CreateTest projectId={projectId} variant={"outline"} />
           {tests?.tests?.length > 0 && (
@@ -123,57 +121,12 @@ export default function PageClient({ email }: { email: string }) {
 function PageSkeleton() {
   return (
     <div className="w-full flex flex-col">
-      <div className="flex flex-row gap-4 absolute top-[14rem] w-full md:px-24 px-12">
-        <div className="bg-primary-foreground flex flex-col gap-0 border rounded-md w-[12rem] h-fit">
-          {Array.from({ length: 5 }).map((_, i) => {
-            return (
-              <div className="flex flex-col" key={i}>
-                <div
-                  className={cn(
-                    "flex flex-col gap-4 p-4 items-start cursor-pointer",
-                    i === 0 ? "rounded-t-md" : "",
-                    i === 4 ? "rounded-b-md" : ""
-                  )}
-                >
-                  <div
-                    className={cn(
-                      "text-sm text-muted-foreground font-semibold capitalize",
-                      i === 0 ? "text-primary" : ""
-                    )}
-                  >
-                    <Skeleton className="w-20 h-6" />
-                  </div>
-                  <span className="text-[0.6rem] text-primary font-bold">
-                    <Skeleton className="w-20 h-6" />
-                  </span>
-                </div>
-                <Separator />
-              </div>
-            );
-          })}
-        </div>
-        <div className="bg-primary-foreground flex flex-col gap-12 border rounded-md w-full p-4 mb-24">
-          <div className="flex flex-row">
-            <div className="flex flex-col gap-3 items-start w-[25rem]">
-              <div className="flex flex-col gap-1">
-                <div className="text-xl font-semibold capitalize">
-                  <Skeleton className="w-20 h-6" />
-                </div>
-                <span className="text-xs font-semibold text-muted-foreground">
-                  <Skeleton className="w-20 h-6" />
-                </span>
-              </div>
-              <span className="text-sm text-primary font-bold">
-                <Skeleton className="w-20 h-6" />
-              </span>
-              <div className="text-sm text-muted-foreground">
-                <Skeleton className="w-20 h-6" />
-              </div>
-            </div>
-            <LargeChartSkeleton />
-          </div>
-          <EvaluationTableSkeleton />
+      <div className="flex flex-col gap-12 top-[16rem] w-full md:px-24 px-12 mb-24">
+        <LargeChartSkeleton />
+        <div className="flex flex-col gap-2">
+          <Button variant="outline" disabled={true} />
         </div>
+        <EvaluationTableSkeleton />
       </div>
     </div>
   );

app/(protected)/project/[project_id]/datasets/dataset/[dataset_id]/page.tsx

@@ -5,18 +5,22 @@ import DatasetRowSkeleton from "@/components/project/dataset/dataset-row-skeleto
 import { EditData } from "@/components/project/dataset/edit-data";
 import { DownloadDataset } from "@/components/shared/download-dataset";
 import { Spinner } from "@/components/shared/spinner";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
-import { PAGE_SIZE } from "@/lib/constants";
+import { EVALUATIONS_DOCS_URL, PAGE_SIZE } from "@/lib/constants";
 import { Data } from "@prisma/client";
-import { ChevronLeft } from "lucide-react";
+import { ArrowTopRightIcon } from "@radix-ui/react-icons";
+import { ChevronLeft, FlaskConical } from "lucide-react";
+import Link from "next/link";
 import { useParams } from "next/navigation";
 import { useState } from "react";
 import { useBottomScrollListener } from "react-bottom-scroll-listener";
 import { useQuery } from "react-query";
 import { toast } from "sonner";
 
 export default function Dataset() {
+  const projectId = useParams()?.project_id as string;
   const dataset_id = useParams()?.dataset_id as string;
   const [page, setPage] = useState<number>(1);
   const [totalPages, setTotalPages] = useState<number>(1);
@@ -86,16 +90,31 @@ export default function Dataset() {
   } else {
     return (
       <div className="w-full py-6 px-6 flex flex-col gap-4">
-        <div className="flex gap-4 items-center w-fit">
-          <Button variant="secondary" onClick={() => window.history.back()}>
-            <ChevronLeft className="mr-1" />
-            Back
-          </Button>
-          <CreateData datasetId={dataset_id} />
-          <DownloadDataset
-            datasetId={dataset_id}
-            disabled={fetchDataset.isLoading || currentData?.length === 0}
-          />
+        <div className="flex justify-between items-center">
+          <div className="flex gap-4 items-center w-fit">
+            <Button variant="secondary" onClick={() => window.history.back()}>
+              <ChevronLeft className="mr-1" />
+              Back
+            </Button>
+            <CreateData datasetId={dataset_id} />
+            <DownloadDataset
+              projectId={projectId}
+              datasetId={dataset_id}
+              disabled={fetchDataset.isLoading || currentData?.length === 0}
+            />
+          </div>
+          <div className="flex gap-4 items-center w-fit">
+            <Badge variant={"outline"} className="text-sm">
+              Dataset ID: {dataset_id}
+            </Badge>
+            <Link href={EVALUATIONS_DOCS_URL} target="_blank">
+              <Button variant="outline">
+                Run Evaluation
+                <FlaskConical className="ml-1 h-4 w-4" />
+                <ArrowTopRightIcon className="ml-1 h-4 w-4" />
+              </Button>
+            </Link>
+          </div>
         </div>
         <div className="flex flex-col gap-3 rounded-md border border-muted max-h-screen overflow-y-scroll">
           <div className="grid grid-cols-5 items-center justify-stretch gap-3 py-3 px-4 bg-muted">