Skip to content

[OPIK-2987][FE] Alexkuzmik/change default experiments grouping #3962

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Nov 12, 2025
Merged

[OPIK-2987][FE] Alexkuzmik/change default experiments grouping #3962

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a1a1893
Change default experiments view
alexkuzmik Nov 6, 2025
3167304
Exclude dataset column when grouping by dataset is enabled
alexkuzmik Nov 6, 2025
44afb76
Remove local storage update
alexkuzmik Nov 6, 2025
9771980
Fix lint errors
alexkuzmik Nov 6, 2025
65bbaa6
Change dataset selection logic, now the dataset is unchecked when gro…
alexkuzmik Nov 12, 2025
b549071
Revert previous changes, implement a new logic for hiding dataset fro…
alexkuzmik Nov 12, 2025
9bfa2a1
Fix lint errors
alexkuzmik Nov 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 1 addition & 10 deletions apps/opik-frontend/src/components/pages-shared/experiments/useExperimentsGroupsAndFilters.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<GroupedExperiment>[] = [
{
Expand All @@ -30,15 +29,7 @@ export const FILTER_AND_GROUP_COLUMNS: ColumnData<GroupedExperiment>[] = [
},
];

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;
Expand Down
46 changes: 37 additions & 9 deletions apps/opik-frontend/src/components/pages/ExperimentsPage/ExperimentsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,9 @@ export const DEFAULT_COLUMNS: ColumnData<GroupedExperiment>[] = [
];

export const DEFAULT_SELECTED_COLUMNS: string[] = [
COLUMN_DATASET_ID,
"created_at",
"duration.p50",
COLUMN_FEEDBACK_SCORES_ID,
COLUMN_COMMENTS_ID,
];
Expand Down Expand Up @@ -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<string, ChartData> = {};

// 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<Record<string, GroupedExperiment[]>>(
(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) =>
Expand Down Expand Up @@ -582,7 +610,7 @@ const ExperimentsPage: React.FC = () => {
</Button>
</TooltipWrapper>
<ColumnsButton
columns={DEFAULT_COLUMNS}
columns={availableColumns}
selectedColumns={selectedColumns}
onSelectionChange={setSelectedColumns}
order={columnsOrder}
Expand Down
19 changes: 17 additions & 2 deletions apps/opik-frontend/src/components/pages/PromptPage/ExperimentsTab/ExperimentsTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,11 @@ export const DEFAULT_COLUMNS: ColumnData<GroupedExperiment>[] = [

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;
Expand Down Expand Up @@ -354,6 +358,17 @@ const ExperimentsTab: React.FC<ExperimentsTabProps> = ({ 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 <Loader />;
}
Expand Down Expand Up @@ -390,7 +405,7 @@ const ExperimentsTab: React.FC<ExperimentsTabProps> = ({ promptId }) => {
<ExperimentsActionsPanel experiments={selectedRows} />
<Separator orientation="vertical" className="mx-2 h-4" />
<ColumnsButton
columns={DEFAULT_COLUMNS}
columns={availableColumns}
selectedColumns={selectedColumns}
onSelectionChange={setSelectedColumns}
order={columnsOrder}
Expand Down