[OPIK-350] [Prompts Library][FE] Prompts details: Experiments tab

- fix review comment
- add Prompt cell to Experiments Page

apps/opik-frontend/src/components/pages/ExperimentsPage/ExperimentsPage.tsx

@@ -3,6 +3,7 @@ import { Info } from "lucide-react";
 import { useNavigate } from "@tanstack/react-router";
 import useLocalStorageState from "use-local-storage-state";
 import { RowSelectionState } from "@tanstack/react-table";
+import get from "lodash/get";
 
 import DataTable from "@/components/shared/DataTable/DataTable";
 import DataTablePagination from "@/components/shared/DataTablePagination/DataTablePagination";
@@ -27,6 +28,7 @@ import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
 import useGroupedExperimentsList, {
   checkIsMoreRowId,
+  DEFAULT_GROUPS_PER_PAGE,
   GroupedExperiment,
   GROUPING_COLUMN,
 } from "@/hooks/useGroupedExperimentsList";
@@ -57,6 +59,20 @@ export const DEFAULT_COLUMNS: ColumnData<GroupedExperiment>[] = [
     type: COLUMN_TYPE.time,
     accessorFn: (row) => formatDate(row.created_at),
   },
+  {
+    id: "prompt",
+    label: "Prompt",
+    type: COLUMN_TYPE.string,
+    cell: ResourceCell as never,
+    customMeta: {
+      nameKey: "prompt_version.commit",
+      idKey: "prompt_version.prompt_id",
+      resource: RESOURCE_TYPE.prompt,
+      getSearch: (data: GroupedExperiment) => ({
+        activeVersionId: get(data, "prompt_version.id", null),
+      }),
+    },
+  },
   {
     id: "trace_count",
     label: "Trace count",
@@ -83,7 +99,6 @@ const ExperimentsPage: React.FunctionComponent = () => {
 
   const [search, setSearch] = useState("");
   const [page, setPage] = useState(1);
-  const [size, setSize] = useState(5);
   const [datasetId, setDatasetId] = useState("");
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
   const { groupLimit, renderMoreRow } = useGroupLimitsConfig();
@@ -94,7 +109,8 @@ const ExperimentsPage: React.FunctionComponent = () => {
     datasetId,
     search,
     page,
-    size,
+    size: DEFAULT_GROUPS_PER_PAGE,
+    polling: true,
   });
 
   const experiments = useMemo(() => data?.content ?? [], [data?.content]);
@@ -266,10 +282,8 @@ const ExperimentsPage: React.FunctionComponent = () => {
         <DataTablePagination
           page={page}
           pageChange={setPage}
-          size={size}
-          sizeChange={setSize}
+          size={DEFAULT_GROUPS_PER_PAGE}
           total={total}
-          disabledSizeChange
         ></DataTablePagination>
       </div>
       <AddExperimentDialog

apps/opik-frontend/src/components/pages/PromptPage/ExperimentsTab/ExperimentsTab.tsx

@@ -15,6 +15,7 @@ import FeedbackScoresCell from "@/components/shared/DataTableCells/FeedbackScore
 import useAppStore from "@/store/AppStore";
 import useGroupedExperimentsList, {
   checkIsMoreRowId,
+  DEFAULT_GROUPS_PER_PAGE,
   GroupedExperiment,
   GROUPING_COLUMN,
 } from "@/hooks/useGroupedExperimentsList";
@@ -71,7 +72,6 @@ const ExperimentsTab: React.FC<ExperimentsTabProps> = ({ promptId }) => {
   const workspaceName = useAppStore((state) => state.activeWorkspaceName);
   const [search, setSearch] = useState("");
   const [page, setPage] = useState(1);
-  const [size, setSize] = useState(5);
   const [datasetId, setDatasetId] = useState("");
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
   const { groupLimit, renderMoreRow } = useGroupLimitsConfig();
@@ -83,7 +83,7 @@ const ExperimentsTab: React.FC<ExperimentsTabProps> = ({ promptId }) => {
     promptId,
     search,
     page,
-    size,
+    size: DEFAULT_GROUPS_PER_PAGE,
   });
 
   const experiments = useMemo(() => data?.content ?? [], [data?.content]);
@@ -189,10 +189,8 @@ const ExperimentsTab: React.FC<ExperimentsTabProps> = ({ promptId }) => {
         <DataTablePagination
           page={page}
           pageChange={setPage}
-          size={size}
-          sizeChange={setSize}
+          size={DEFAULT_GROUPS_PER_PAGE}
           total={total}
-          disabledSizeChange
         ></DataTablePagination>
       </div>
     </div>

apps/opik-frontend/src/components/shared/DataTablePagination/DataTablePagination.tsx

@@ -5,6 +5,8 @@ import {
   ChevronLeft,
   ChevronRight,
 } from "lucide-react";
+import isFunction from "lodash/isFunction";
+
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -18,8 +20,7 @@ type DataTableProps = {
   pageChange: (page: number) => void;
   size: number;
   total: number;
-  sizeChange: (number: number) => void;
-  disabledSizeChange?: boolean;
+  sizeChange?: (number: number) => void;
 };
 
 const ITEMS_PER_PAGE = [5, 10, 25, 50, 100];
@@ -30,13 +31,13 @@ const DataTablePagination = ({
   size = 10,
   total,
   sizeChange,
-  disabledSizeChange = false,
 }: DataTableProps) => {
   const from = Math.max(size * (page - 1) + 1, 0);
   const to = Math.min(size * page, total);
   const totalPages = Math.ceil(total / size);
   const disabledPrevious = page === 1;
   const disabledNext = page === totalPages || !totalPages;
+  const disabledSizeChange = !isFunction(sizeChange);
 
   useEffect(() => {
     if (page !== 1 && (page - 1) * size > total) {
@@ -80,7 +81,7 @@ const DataTablePagination = ({
                 return (
                   <DropdownMenuCheckboxItem
                     key={count}
-                    onSelect={() => sizeChange(count)}
+                    onSelect={() => !disabledSizeChange && sizeChange(count)}
                     checked={count === size}
                   >
                     {count}

apps/opik-frontend/src/hooks/useGroupedExperimentsList.ts

@@ -15,6 +15,7 @@ import useExperimentsList, {
 import useDatasetById from "@/api/datasets/useDatasetById";
 
 export const DELETED_DATASET_ID = "deleted_dataset_id";
+export const DEFAULT_GROUPS_PER_PAGE = 5;
 export const DEFAULT_EXPERIMENTS_PER_GROUP = 25;
 export const GROUPING_COLUMN = "virtual_dataset_id";
 
@@ -31,7 +32,7 @@ type UseGroupedExperimentsListParams = {
   page: number;
   size: number;
   groupLimit?: Record<string, number>;
-  pooling?: boolean;
+  polling?: boolean;
 };
 
 type UseGroupedExperimentsListResponse = {
@@ -82,7 +83,7 @@ const generateMoreRow = (dataset: Dataset) => {
 export default function useGroupedExperimentsList(
   params: UseGroupedExperimentsListParams,
 ) {
-  const refetchInterval = params.pooling ? 30000 : undefined;
+  const refetchInterval = params.polling ? 30000 : undefined;
   const experimentsCache = useRef<Record<string, UseExperimentsListResponse>>(
     {},
   );