[OPIK-124] [UX Improvements] Changes to Add to compare modal (#290)

apps/opik-frontend/src/components/pages/CompareExperimentsPage/AddExperimentToCompareDialog.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from "react";
 import { JsonParam, useQueryParam } from "use-query-params";
 import isArray from "lodash/isArray";
+import { FlaskConical, MessageCircleWarning } from "lucide-react";
+import { keepPreviousData } from "@tanstack/react-query";
 
 import {
   Dialog,
@@ -9,14 +11,15 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import useExperimentsList from "@/api/datasets/useExperimentsList";
-import { keepPreviousData } from "@tanstack/react-query";
 import Loader from "@/components/shared/Loader/Loader";
 import DataTablePagination from "@/components/shared/DataTablePagination/DataTablePagination";
 import SearchInput from "@/components/shared/SearchInput/SearchInput";
 import { cn } from "@/lib/utils";
+import { formatDate } from "@/lib/date";
 import useAppStore from "@/store/AppStore";
+import { Alert, AlertDescription } from "@/components/ui/alert";
 
-const DEFAULT_SIZE = 10;
+const DEFAULT_SIZE = 5;
 
 type AddExperimentToCompareDialogProps = {
   datasetId: string;
@@ -74,10 +77,10 @@ const AddExperimentToCompareDialog: React.FunctionComponent<
       return (
         <div
           key={e.id}
-          className={cn("rounded-sm px-4 py-2.5 flex", {
-            "cursor-pointer hover:bg-muted": !exist,
-            "cursor-default opacity-50": exist,
-          })}
+          className={cn(
+            "rounded-sm px-4 py-2.5 flex flex-col",
+            exist ? "cursor-default" : "cursor-pointer hover:bg-muted",
+          )}
           onClick={() => {
             if (!exist) {
               setOpen(false);
@@ -87,7 +90,32 @@ const AddExperimentToCompareDialog: React.FunctionComponent<
             }
           }}
         >
-          <div className="comet-body-s-accented truncate">{e.name}</div>
+          <div className="flex flex-col gap-0.5">
+            <div className="flex items-center gap-2">
+              <FlaskConical
+                className={cn(
+                  "size-4 shrink-0",
+                  exist ? "text-muted-gray" : "text-muted-slate",
+                )}
+              />
+              <span
+                className={cn(
+                  "comet-body-s-accented truncate w-full",
+                  exist && "text-muted-gray",
+                )}
+              >
+                {e.name}
+              </span>
+            </div>
+            <div
+              className={cn(
+                "comet-body-s pl-6",
+                exist ? "text-muted-gray" : "text-light-slate",
+              )}
+            >
+              {formatDate(e.created_at)}
+            </div>
+          </div>
         </div>
       );
     });
@@ -106,6 +134,13 @@ const AddExperimentToCompareDialog: React.FunctionComponent<
               setSearchText={setSearch}
               placeholder="Search by name"
             ></SearchInput>
+            <Alert className="mt-4">
+              <MessageCircleWarning className="size-4" />
+              <AlertDescription>
+                Only experiments using the same dataset as the baseline can be
+                added to compare.
+              </AlertDescription>
+            </Alert>
             <div className="my-4 flex max-h-[400px] min-h-36 max-w-full flex-col justify-stretch overflow-y-auto">
               {renderListItems()}
             </div>

apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsDetails.tsx

@@ -115,12 +115,12 @@ const CompareExperimentsDetails: React.FunctionComponent<
 
       return (
         <div className="flex h-11 items-center gap-2">
-          Baseline of
+          <span className="text-nowrap">Baseline of</span>
           <Tag size="lg" variant="gray" className="flex items-center gap-2">
             <FlaskConical className="size-4 shrink-0" />
             <div className="truncate">{experiment?.name}</div>
           </Tag>
-          compared against
+          <span className="text-nowrap">compared against</span>
           {tag}
         </div>
       );

apps/opik-frontend/src/components/pages/TracesPage/AddToDataset/AddToDatasetDialog.tsx

@@ -1,5 +1,9 @@
 import React, { useCallback, useMemo, useState } from "react";
 import get from "lodash/get";
+import isObject from "lodash/isObject";
+import { Database, MessageCircleWarning } from "lucide-react";
+import { keepPreviousData } from "@tanstack/react-query";
+
 import { Span, Trace } from "@/types/traces";
 import useAppStore from "@/store/AppStore";
 import {
@@ -9,20 +13,17 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import useDatasetsList from "@/api/datasets/useDatasetsList";
-import { keepPreviousData } from "@tanstack/react-query";
 import Loader from "@/components/shared/Loader/Loader";
 import DataTablePagination from "@/components/shared/DataTablePagination/DataTablePagination";
 import SearchInput from "@/components/shared/SearchInput/SearchInput";
 import useDatasetItemBatchMutation from "@/api/datasets/useDatasetItemBatchMutation";
 import { Dataset, DATASET_ITEM_SOURCE } from "@/types/datasets";
-import isObject from "lodash/isObject";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { isObjectSpan } from "@/lib/traces";
 import { useToast } from "@/components/ui/use-toast";
 import AddDatasetDialog from "@/components/pages/DatasetsPage/AddDatasetDialog";
-import { Database, MessageCircleWarning } from "lucide-react";
 
 const DEFAULT_SIZE = 5;
 
@@ -123,18 +124,37 @@ const AddToDatasetDialog: React.FunctionComponent<AddToDatasetDialogProps> = ({
     return datasets.map((d) => (
       <div
         key={d.id}
-        className={cn("rounded-sm px-4 py-2.5 flex", {
-          "cursor-pointer hover:bg-muted": !noValidRows,
-          "cursor-default": noValidRows,
-        })}
+        className={cn(
+          "rounded-sm px-4 py-2.5 flex flex-col",
+          noValidRows ? "cursor-default" : "cursor-pointer hover:bg-muted",
+        )}
         onClick={() => !noValidRows && addToDatasetHandler(d)}
       >
-        <div className="py-0.5 pr-2">
-          <Database className="size-5 text-muted-slate" />
-        </div>
-        <div>
-          <div className="comet-body-s-accented">{d.name}</div>
-          <div className="comet-body-s text-light-slate">{d.description}</div>
+        <div className="flex flex-col gap-0.5">
+          <div className="flex items-center gap-2">
+            <Database
+              className={cn(
+                "size-4 shrink-0",
+                noValidRows ? "text-muted-gray" : "text-muted-slate",
+              )}
+            />
+            <span
+              className={cn(
+                "comet-body-s-accented truncate w-full",
+                noValidRows && "text-muted-gray",
+              )}
+            >
+              {d.name}
+            </span>
+          </div>
+          <div
+            className={cn(
+              "comet-body-s pl-6",
+              noValidRows ? "text-muted-gray" : "text-light-slate",
+            )}
+          >
+            {d.description}
+          </div>
         </div>
       </div>
     ));