diff --git a/apps/opik-frontend/src/components/pages/CompareExperimentsPage/AddExperimentToCompareDialog.tsx b/apps/opik-frontend/src/components/pages/CompareExperimentsPage/AddExperimentToCompareDialog.tsx
index f375417a9b..123f1bef80 100644
--- a/apps/opik-frontend/src/components/pages/CompareExperimentsPage/AddExperimentToCompareDialog.tsx
+++ b/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 (
{
if (!exist) {
setOpen(false);
@@ -87,7 +90,32 @@ const AddExperimentToCompareDialog: React.FunctionComponent<
}
}}
>
-
{e.name}
+
+
+
+
+ {e.name}
+
+
+
+ {formatDate(e.created_at)}
+
+
);
});
@@ -106,6 +134,13 @@ const AddExperimentToCompareDialog: React.FunctionComponent<
setSearchText={setSearch}
placeholder="Search by name"
>
+
+
+
+ Only experiments using the same dataset as the baseline can be
+ added to compare.
+
+
{renderListItems()}
diff --git a/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsDetails.tsx b/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsDetails.tsx
index 21d8abec33..d8380bfaa2 100644
--- a/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsDetails.tsx
+++ b/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsDetails.tsx
@@ -115,12 +115,12 @@ const CompareExperimentsDetails: React.FunctionComponent<
return (
- Baseline of
+
Baseline of
{experiment?.name}
- compared against
+
compared against
{tag}
);
diff --git a/apps/opik-frontend/src/components/pages/TracesPage/AddToDataset/AddToDatasetDialog.tsx b/apps/opik-frontend/src/components/pages/TracesPage/AddToDataset/AddToDatasetDialog.tsx
index d7a62fc7f2..f225eece95 100644
--- a/apps/opik-frontend/src/components/pages/TracesPage/AddToDataset/AddToDatasetDialog.tsx
+++ b/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 = ({
return datasets.map((d) => (
!noValidRows && addToDatasetHandler(d)}
>
-
-
-
-
-
{d.name}
-
{d.description}
+
+
+
+
+ {d.name}
+
+
+
+ {d.description}
+
));