[OPIK-91] [UX improvements] Implement the Experiment configuration section in the compare page

apps/opik-frontend/package.json

@@ -39,6 +39,7 @@
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.1",
     "@radix-ui/react-toggle": "^1.1.0",
@@ -57,6 +58,7 @@
     "codemirror": "^6.0.1",
     "date-fns": "^3.6.0",
     "dayjs": "^1.11.11",
+    "flattie": "^1.1.1",
     "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
     "lucide-react": "^0.395.0",

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

@@ -0,0 +1,25 @@
+import { QueryFunctionContext, useQueries } from "@tanstack/react-query";
+import {
+  getExperimentById,
+  UseExperimentByIdParams,
+} from "@/api/datasets/useExperimentById";
+
+type UseExperimentsByIdsParams = {
+  experimentsIds: string[];
+};
+
+export default function useExperimentsByIds(params: UseExperimentsByIdsParams) {
+  return useQueries({
+    queries: params.experimentsIds.map((experimentId) => {
+      const p: UseExperimentByIdParams = {
+        experimentId,
+      };
+
+      return {
+        queryKey: ["experiment", p],
+        queryFn: (context: QueryFunctionContext) =>
+          getExperimentById(context, p),
+      };
+    }),
+  });
+}

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

@@ -2,7 +2,7 @@ import { QueryFunctionContext, useQuery } from "@tanstack/react-query";
 import api, { EXPERIMENTS_REST_ENDPOINT, QueryConfig } from "@/api/api";
 import { Experiment } from "@/types/datasets";
 
-const getExperimentById = async (
+export const getExperimentById = async (
   { signal }: QueryFunctionContext,
   { experimentId }: UseExperimentByIdParams,
 ) => {
@@ -13,7 +13,7 @@ const getExperimentById = async (
   return data;
 };
 
-type UseExperimentByIdParams = {
+export type UseExperimentByIdParams = {
   experimentId: string;
 };
 

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

@@ -9,16 +9,20 @@ import AddExperimentToCompareDialog from "@/components/pages/CompareExperimentsP
 
 export const CompareExperimentAddHeader: React.FunctionComponent<
   HeaderContext<ExperimentsCompare, unknown>
-> = () => {
+> = (context) => {
   const datasetId = useDatasetIdFromCompareExperimentsURL();
   const resetKeyRef = useRef(0);
   const [open, setOpen] = useState<boolean>(false);
+  const hasData = context.table.getRowCount() > 0;
 
   return (
     <div
-      className="absolute inset-0 flex items-center justify-center"
+      className="absolute inset-0 flex items-center justify-center px-2"
       onClick={(e) => e.stopPropagation()}
     >
+      {hasData && (
+        <div className="absolute left-0 top-0 h-[10000px] w-px bg-border"></div>
+      )}
       <AddExperimentToCompareDialog
         datasetId={datasetId}
         open={open}

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

@@ -62,7 +62,7 @@ const CompareExperimentsCell: React.FunctionComponent<
       </TooltipWrapper>
       <div
         className={cn(
-          "flex gap-2",
+          "flex gap-1.5",
           isSmall ? "flex-nowrap overflow-x-auto" : "flex-wrap",
         )}
       >
@@ -79,7 +79,7 @@ const CompareExperimentsCell: React.FunctionComponent<
         })}
       </div>
       {isSmall ? (
-        <div className="comet-code w-full flex-auto truncate rounded-md border bg-[#FBFCFD] px-2 py-3">
+        <div className="comet-code w-full flex-auto truncate rounded-md border bg-[#FBFCFD] px-2 py-1.5">
           {JSON.stringify(item.output, null, 2)}
         </div>
       ) : (

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

@@ -9,8 +9,9 @@ import useExperimentById from "@/api/datasets/useExperimentById";
 
 const CompareExperimentsHeader: React.FunctionComponent<
   HeaderContext<ExperimentsCompare, unknown>
-> = ({ header }) => {
+> = ({ table, header }) => {
   const experimentId = header?.id;
+  const hasData = table.getRowCount() > 0;
   const [experimentIds, setExperimentsIds] = useQueryParam(
     "experiments",
     JsonParam,
@@ -19,17 +20,25 @@ const CompareExperimentsHeader: React.FunctionComponent<
     },
   );
 
-  const { data } = useExperimentById({
-    experimentId,
-  });
+  const { data } = useExperimentById(
+    {
+      experimentId,
+    },
+    {
+      refetchOnMount: false,
+    },
+  );
 
   const name = data?.name || experimentId;
 
   return (
     <div
-      className="flex size-full items-center"
+      className="flex size-full items-center px-2"
       onClick={(e) => e.stopPropagation()}
     >
+      {hasData && (
+        <div className="absolute left-0 top-0 h-[10000px] w-px bg-border"></div>
+      )}
       <FlaskConical className="mr-2 size-4 shrink-0" />
       <div className="comet-body-s-accented truncate">{name}</div>
       {experimentIds.length > 1 && (