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} +
));