[OPIK-490] [UX improvements] Implement dynamic columns for experiment output

apps/opik-frontend/src/api/datasets/useCompareExperimentsColumns.ts

@@ -0,0 +1,40 @@
+import { QueryFunctionContext, useQuery } from "@tanstack/react-query";
+import api, { DATASETS_REST_ENDPOINT, QueryConfig } from "@/api/api";
+import { ExperimentOutputColumn } from "@/types/datasets";
+
+type UseCompareExperimentsColumnsParams = {
+  datasetId: string;
+  experimentsIds: string[];
+};
+
+type UseCompareExperimentsColumnsResponse = {
+  columns: ExperimentOutputColumn[];
+};
+
+const getCompareExperimentsColumns = async (
+  { signal }: QueryFunctionContext,
+  { datasetId, experimentsIds }: UseCompareExperimentsColumnsParams,
+) => {
+  const { data } = await api.get(
+    `${DATASETS_REST_ENDPOINT}${datasetId}/items/experiments/items/output/columns`,
+    {
+      signal,
+      params: {
+        experiment_ids: JSON.stringify(experimentsIds),
+      },
+    },
+  );
+
+  return data;
+};
+
+export default function useCompareExperimentsColumns(
+  params: UseCompareExperimentsColumnsParams,
+  options?: QueryConfig<UseCompareExperimentsColumnsResponse>,
+) {
+  return useQuery({
+    queryKey: ["compare-experiments-columns", params],
+    queryFn: (context) => getCompareExperimentsColumns(context, params),
+    ...options,
+  });
+}

apps/opik-frontend/src/components/pages/CompareExperimentsPage/ConfigurationTab/ConfigurationTab.tsx

@@ -70,13 +70,10 @@ const ConfigurationTab: React.FunctionComponent<ConfigurationTabProps> = ({
   const columns = useMemo(() => {
     const retVal = convertColumnDataToColumn<CompareConfig, CompareConfig>(
       DEFAULT_COLUMNS,
-      {
-        columnsWidth,
-      },
+      {},
     );
 
     experimentsIds.forEach((id: string) => {
-      const size = columnsWidth[id] ?? 400;
       retVal.push({
         accessorKey: id,
         header: CompareExperimentsHeader as never,
@@ -87,13 +84,13 @@ const ConfigurationTab: React.FunctionComponent<ConfigurationTabProps> = ({
             experiment: find(experiments, (e) => e.id === id),
           },
         },
-        size,
+        size: 400,
         minSize: 120,
       });
     });
 
     return retVal;
-  }, [columnsWidth, experimentsIds, onlyDiff, experiments]);
+  }, [experimentsIds, onlyDiff, experiments]);
 
   const flattenExperimentMetadataMap = useMemo(() => {
     return experiments.reduce<Record<string, Record<string, FiledValue>>>(
@@ -154,9 +151,10 @@ const ConfigurationTab: React.FunctionComponent<ConfigurationTabProps> = ({
   const resizeConfig = useMemo(
     () => ({
       enabled: true,
+      columnSizing: columnsWidth,
       onColumnResize: setColumnsWidth,
     }),
-    [setColumnsWidth],
+    [columnsWidth, setColumnsWidth],
   );
 
   if (isPending) {

apps/opik-frontend/src/components/pages/CompareExperimentsPage/ExperimentFeedbackScoresTab/ExperimentFeedbackScoresTab.tsx

@@ -50,12 +50,9 @@ const ExperimentFeedbackScoresTab: React.FunctionComponent<
     const retVal = convertColumnDataToColumn<
       FeedbackScoreData,
       FeedbackScoreData
-    >(DEFAULT_COLUMNS, {
-      columnsWidth,
-    });
+    >(DEFAULT_COLUMNS, {});
 
     experimentsIds.forEach((id: string) => {
-      const size = columnsWidth[id] ?? 400;
       retVal.push({
         accessorKey: id,
         header: CompareExperimentsHeader as never,
@@ -66,13 +63,13 @@ const ExperimentFeedbackScoresTab: React.FunctionComponent<
             experiment: find(experiments, (e) => e.id === id),
           },
         },
-        size,
+        size: 400,
         minSize: 120,
       });
     });
 
     return retVal;
-  }, [columnsWidth, experimentsIds, experiments]);
+  }, [experimentsIds, experiments]);
 
   const feedbackScoresMap = useMemo(() => {
     return getFeedbackScoreMap({
@@ -94,9 +91,10 @@ const ExperimentFeedbackScoresTab: React.FunctionComponent<
   const resizeConfig = useMemo(
     () => ({
       enabled: true,
+      columnSizing: columnsWidth,
       onColumnResize: setColumnsWidth,
     }),
-    [setColumnsWidth],
+    [columnsWidth, setColumnsWidth],
   );
 
   if (isPending) {

apps/opik-frontend/src/components/pages/CompareExperimentsPage/ExperimentItemsTab/CompareExperimentsFeedbackScoreCell.tsx

@@ -21,7 +21,7 @@ const CompareExperimentsFeedbackScoreCell: React.FunctionComponent<
     );
 
     if (!feedbackScore) {
-      return <div className="flex h-4 w-full items-center justify-end">-</div>;
+      return "-";
     }
 
     return (

apps/opik-frontend/src/components/pages/CompareExperimentsPage/ExperimentItemsTab/CompareExperimentsNameHeader.tsx

@@ -8,18 +8,13 @@ import HeaderWrapper from "@/components/shared/DataTableHeaders/HeaderWrapper";
 const CompareExperimentsNameHeader: React.FunctionComponent<
   HeaderContext<ExperimentsCompare, unknown>
 > = (context) => {
-  const hasData = context.table.getRowCount() > 0;
-
   return (
     <HeaderWrapper
       metadata={context.column.columnDef.meta}
       tableMetadata={context.table.options.meta}
     >
-      {hasData && (
-        <div className="absolute left-0 top-0 h-[10000px] w-px bg-border" />
-      )}
       <FlaskConical className="size-3.5 shrink-0 text-slate-300" />
-      <div className="comet-body-s-accented truncate">Experiment</div>
+      <div className="comet-body-s-accented truncate">Name</div>
     </HeaderWrapper>
   );
 };

apps/opik-frontend/src/components/pages/CompareExperimentsPage/ExperimentItemsTab/CompareExperimentsOutputCell.tsx

@@ -1,28 +1,59 @@
 import React from "react";
-import isFunction from "lodash/isFunction";
 import { CellContext } from "@tanstack/react-table";
 import JsonView from "react18-json-view";
 import { ListTree } from "lucide-react";
+import get from "lodash/get";
+import isFunction from "lodash/isFunction";
+import isObject from "lodash/isObject";
 
+import { toString } from "@/lib/utils";
 import { ExperimentItem, ExperimentsCompare } from "@/types/datasets";
 import { ROW_HEIGHT } from "@/types/shared";
-import TooltipWrapper from "@/components/shared/TooltipWrapper/TooltipWrapper";
-import { Button } from "@/components/ui/button";
 import VerticallySplitCellWrapper, {
   CustomMeta,
 } from "@/components/pages/CompareExperimentsPage/ExperimentItemsTab/VerticallySplitCellWrapper";
+import TooltipWrapper from "@/components/shared/TooltipWrapper/TooltipWrapper";
+import { Button } from "@/components/ui/button";
 
 const CompareExperimentsOutputCell: React.FunctionComponent<
   CellContext<ExperimentsCompare, unknown>
 > = (context) => {
   const { custom } = context.column.columnDef.meta ?? {};
-  const { openTrace = true } = (custom ?? {}) as CustomMeta;
+  const { openTrace, outputKey = "" } = (custom ?? {}) as CustomMeta;
   const experimentCompare = context.row.original;
   const rowHeight = context.table.options.meta?.rowHeight ?? ROW_HEIGHT.small;
   const isSmall = rowHeight === ROW_HEIGHT.small;
 
+  const renderCodeContent = (data: object) => {
+    return isSmall ? (
+      <div className="comet-code flex size-full items-center truncate">
+        {JSON.stringify(data, null, 2)}
+      </div>
+    ) : (
+      <div className="size-full overflow-y-auto whitespace-normal">
+        {data && (
+          <JsonView
+            src={data}
+            theme="github"
+            collapseStringsAfterLength={10000}
+          />
+        )}
+      </div>
+    );
+  };
+
+  const renderTextContent = (data: string) => {
+    return isSmall ? (
+      <span className="truncate">{data}</span>
+    ) : (
+      <div className="size-full overflow-y-auto">{data}</div>
+    );
+  };
+
   const renderContent = (item: ExperimentItem | undefined) => {
-    if (!item) return "-";
+    const data = get(item, ["output", outputKey], undefined);
+
+    if (!data) return "-";
 
     return (
       <>
@@ -31,7 +62,7 @@ const CompareExperimentsOutputCell: React.FunctionComponent<
             size="icon-xs"
             variant="outline"
             onClick={() => {
-              if (isFunction(openTrace) && item.trace_id) {
+              if (isFunction(openTrace) && item?.trace_id) {
                 openTrace(item.trace_id);
               }
             }}
@@ -40,21 +71,9 @@ const CompareExperimentsOutputCell: React.FunctionComponent<
             <ListTree className="size-4" />
           </Button>
         </TooltipWrapper>
-        {isSmall ? (
-          <div className="comet-code flex size-full items-center truncate">
-            {JSON.stringify(item.output, null, 2)}
-          </div>
-        ) : (
-          <div className="size-full overflow-y-auto whitespace-normal">
-            {item.output && (
-              <JsonView
-                src={item.output}
-                theme="github"
-                collapseStringsAfterLength={10000}
-              />
-            )}
-          </div>
-        )}
+        {isObject(data)
+          ? renderCodeContent(data)
+          : renderTextContent(toString(data))}
       </>
     );
   };
@@ -69,5 +88,4 @@ const CompareExperimentsOutputCell: React.FunctionComponent<
     />
   );
 };
-
 export default CompareExperimentsOutputCell;