diff --git a/apps/opik-frontend/src/components/pages-shared/experiments/useExperimentsGroupsAndFilters.ts b/apps/opik-frontend/src/components/pages-shared/experiments/useExperimentsGroupsAndFilters.ts index 3688f691eb9..f2606bd26b3 100644 --- a/apps/opik-frontend/src/components/pages-shared/experiments/useExperimentsGroupsAndFilters.ts +++ b/apps/opik-frontend/src/components/pages-shared/experiments/useExperimentsGroupsAndFilters.ts @@ -14,7 +14,6 @@ import DatasetSelectBox from "@/components/pages-shared/experiments/DatasetSelec import ExperimentsPathsAutocomplete from "@/components/pages-shared/experiments/ExperimentsPathsAutocomplete/ExperimentsPathsAutocomplete"; import { Filters } from "@/types/filters"; import { GroupedExperiment } from "@/hooks/useGroupedExperimentsList"; -import { SORT_DIRECTION } from "@/types/sorting"; export const FILTER_AND_GROUP_COLUMNS: ColumnData[] = [ { @@ -30,15 +29,7 @@ export const FILTER_AND_GROUP_COLUMNS: ColumnData[] = [ }, ]; -const DEFAULT_GROUPS: Groups = [ - { - id: "default_groups", - field: "dataset_id", - type: COLUMN_TYPE.string, - direction: SORT_DIRECTION.ASC, - key: "", - }, -]; +const DEFAULT_GROUPS: Groups = []; export type UseExperimentsGroupsAndFiltersProps = { storageKeyPrefix: string; diff --git a/apps/opik-frontend/src/components/pages/ExperimentsPage/ExperimentsPage.tsx b/apps/opik-frontend/src/components/pages/ExperimentsPage/ExperimentsPage.tsx index 411d3cbe96b..13b602ce796 100644 --- a/apps/opik-frontend/src/components/pages/ExperimentsPage/ExperimentsPage.tsx +++ b/apps/opik-frontend/src/components/pages/ExperimentsPage/ExperimentsPage.tsx @@ -226,7 +226,9 @@ export const DEFAULT_COLUMNS: ColumnData[] = [ ]; export const DEFAULT_SELECTED_COLUMNS: string[] = [ + COLUMN_DATASET_ID, "created_at", + "duration.p50", COLUMN_FEEDBACK_SCORES_ID, COLUMN_COMMENTS_ID, ]; @@ -399,18 +401,44 @@ const ExperimentsPage: React.FC = () => { [setGroupLimit], ); + // Filter out dataset column when grouping by dataset + const availableColumns = useMemo(() => { + const isGroupingByDataset = groups.some( + (g) => g.field === COLUMN_DATASET_ID, + ); + if (isGroupingByDataset) { + return DEFAULT_COLUMNS.filter((col) => col.id !== COLUMN_DATASET_ID); + } + return DEFAULT_COLUMNS; + }, [groups]); + const chartsData = useMemo(() => { const groupsMap: Record = {}; - // Handle no grouping case - create a single group with all visible experiments + // Handle no grouping case - group by dataset for charts const deepestExpandedGroups = !hasGroups - ? [ - { - id: "visible_experiments", - name: "Visible experiments", - experiments, - }, - ] + ? Object.entries( + experiments.reduce>( + (acc, exp) => { + const datasetId = exp.dataset_id || "no_dataset"; + if (!acc[datasetId]) { + acc[datasetId] = []; + } + acc[datasetId].push(exp); + return acc; + }, + {}, + ), + ).map(([datasetId, datasetExperiments]) => ({ + id: datasetId, + name: [ + { + label: "Dataset", + value: datasetExperiments[0]?.dataset_name || "Undefined", + }, + ], + experiments: datasetExperiments, + })) : flattenGroups .filter( (group) => @@ -582,7 +610,7 @@ const ExperimentsPage: React.FC = () => { [] = [ export const MAX_EXPANDED_DEEPEST_GROUPS = 5; -export const DEFAULT_SELECTED_COLUMNS: string[] = ["prompt", "created_at"]; +export const DEFAULT_SELECTED_COLUMNS: string[] = [ + "prompt", + COLUMN_DATASET_ID, + "created_at", +]; interface ExperimentsTabProps { promptId: string; @@ -354,6 +358,17 @@ const ExperimentsTab: React.FC = ({ promptId }) => { [setGroupLimit], ); + // Filter out dataset column when grouping by dataset + const availableColumns = useMemo(() => { + const isGroupingByDataset = groups.some( + (g) => g.field === COLUMN_DATASET_ID, + ); + if (isGroupingByDataset) { + return DEFAULT_COLUMNS.filter((col) => col.id !== COLUMN_DATASET_ID); + } + return DEFAULT_COLUMNS; + }, [groups]); + if (isPending || isFeedbackScoresPending) { return ; } @@ -390,7 +405,7 @@ const ExperimentsTab: React.FC = ({ promptId }) => {