[OPIK-601] [UX improvements] Rename experiment tabs (#897)

comet-ml · Dec 16, 2024 · fdca4d9 · fdca4d9
1 parent ec3a3e4
commit fdca4d9
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 84 deletions.
diff --git a/...mponents/pages/CompareExperimentsPage/CompareExperimentsPanel/CompareExperimentsPanel.tsx b/...mponents/pages/CompareExperimentsPage/CompareExperimentsPanel/CompareExperimentsPanel.tsx
@@ -13,7 +13,6 @@ import { useToast } from "@/components/ui/use-toast";
 import { ExperimentsCompare } from "@/types/datasets";
 import { OnChangeFn } from "@/types/shared";
 import useDatasetItemById from "@/api/datasets/useDatasetItemById";
-import OutputTab from "@/components/pages/CompareExperimentsPage/CompareExperimentsPanel/OutputTab/OutputTab";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import FeedbackScoresTab from "@/components/pages/CompareExperimentsPage/CompareExperimentsPanel/FeedbackScoresTab/FeedbackScoresTab";
 import DataTab from "@/components/pages/CompareExperimentsPage/CompareExperimentsPanel/DataTab/DataTab";
@@ -44,7 +43,7 @@ const CompareExperimentsPanel: React.FunctionComponent<
   isTraceDetailsOpened,
 }) => {
   const { toast } = useToast();
-  const [tab, setTab] = useState<string>("output");
+  const [tab, setTab] = useState<string>("data");
 
   const experimentItems = useMemo(() => {
     return sortBy(experimentsCompare?.experiment_items || [], (e) =>
@@ -94,23 +93,20 @@ const CompareExperimentsPanel: React.FunctionComponent<
           {isSeveralExperiments ? "Experiment items" : "Experiment item"}
         </h2>
 
-        <Tabs defaultValue="output" value={tab} onValueChange={setTab}>
+        <Tabs defaultValue="data" value={tab} onValueChange={setTab}>
           <TabsList variant="underline">
-            <TabsTrigger variant="underline" value="output">
-              Output
+            <TabsTrigger variant="underline" value="data">
+              Data
             </TabsTrigger>
             <TabsTrigger variant="underline" value="feedbackScores">
               Feedback scores
             </TabsTrigger>
-            <TabsTrigger variant="underline" value="data">
-              Data
-            </TabsTrigger>
           </TabsList>
           <TabsContent
-            value="output"
+            value="data"
             className="mt-0 h-[var(--experiment-sidebar-tab-content-height)] overflow-auto"
           >
-            <OutputTab
+            <DataTab
               data={data}
               experimentItems={experimentItems}
               openTrace={openTrace}
@@ -122,12 +118,6 @@ const CompareExperimentsPanel: React.FunctionComponent<
           >
             <FeedbackScoresTab experimentItems={experimentItems} />
           </TabsContent>
-          <TabsContent
-            value="data"
-            className="h-[var(--experiment-sidebar-tab-content-height)] overflow-auto"
-          >
-            <DataTab data={data} />
-          </TabsContent>
         </Tabs>
       </div>
     );

diff --git a/...d/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/DataTab/DataTab.tsx b/...d/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/DataTab/DataTab.tsx
@@ -1,19 +1,50 @@
 import React from "react";
-import { DatasetItem } from "@/types/datasets";
-import SyntaxHighlighter from "@/components/shared/SyntaxHighlighter/SyntaxHighlighter";
-import NoData from "@/components/shared/NoData/NoData";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+
+import { DatasetItem, ExperimentItem } from "@/types/datasets";
+import CompareExperimentsViewer from "@/components/pages/CompareExperimentsPage/CompareExperimentsPanel/CompareExperimentsViewer";
+import { OnChangeFn } from "@/types/shared";
+import ExperimentDataset from "@/components/pages/CompareExperimentsPage/CompareExperimentsPanel/DataTab/ExperimentDataset";
 
 interface DataTabProps {
   data: DatasetItem["data"] | undefined;
+  experimentItems: ExperimentItem[];
+  openTrace: OnChangeFn<string>;
 }
 
-const DataTab = ({ data }: DataTabProps) => {
-  return data ? (
-    <div className="pb-8">
-      <SyntaxHighlighter data={data} />
-    </div>
-  ) : (
-    <NoData />
+const DataTab = ({ data, experimentItems, openTrace }: DataTabProps) => {
+  const renderExperimentsSection = () => {
+    return experimentItems.map((experimentItem, idx) => (
+      <React.Fragment key={experimentItem.id}>
+        <ResizablePanel className="min-w-72" style={{ overflow: "unset" }}>
+          <CompareExperimentsViewer
+            experimentItem={experimentItem}
+            openTrace={openTrace}
+          />
+        </ResizablePanel>
+
+        {idx !== experimentItems.length - 1 ? <ResizableHandle /> : null}
+      </React.Fragment>
+    ));
+  };
+
+  return (
+    <ResizablePanelGroup
+      direction="horizontal"
+      autoSaveId="compare-vetical-sidebar"
+      style={{ height: "unset", overflow: "unset" }}
+      className="min-h-full"
+    >
+      <ResizablePanel defaultSize={30} className="min-w-72">
+        <ExperimentDataset data={data} />
+      </ResizablePanel>
+      <ResizableHandle />
+      {renderExperimentsSection()}
+    </ResizablePanelGroup>
   );
 };
 

diff --git a/...entsPanel/OutputTab/ExperimentDataset.tsx → ...imentsPanel/DataTab/ExperimentDataset.tsx b/...entsPanel/OutputTab/ExperimentDataset.tsx → ...imentsPanel/DataTab/ExperimentDataset.tsx
@@ -10,7 +10,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import uniq from "lodash/uniq";
-import ExperimentDatasetItems from "@/components/pages/CompareExperimentsPage/CompareExperimentsPanel/OutputTab/ExperimentDatasetItems";
+import ExperimentDatasetItems from "@/components/pages/CompareExperimentsPage/CompareExperimentsPanel/DataTab/ExperimentDatasetItems";
 import useLocalStorageState from "use-local-storage-state";
 import difference from "lodash/difference";
 import union from "lodash/union";

diff --git a/...anel/OutputTab/ExperimentDatasetItems.tsx → ...sPanel/DataTab/ExperimentDatasetItems.tsx b/...anel/OutputTab/ExperimentDatasetItems.tsx → ...sPanel/DataTab/ExperimentDatasetItems.tsx
diff --git a/...c/components/pages/CompareExperimentsPage/CompareExperimentsPanel/OutputTab/OutputTab.tsx b/...c/components/pages/CompareExperimentsPage/CompareExperimentsPanel/OutputTab/OutputTab.tsx
diff --git a/...end/src/components/pages/CompareExperimentsPage/ExperimentItemsTab/ExperimentItemsTab.tsx b/...end/src/components/pages/CompareExperimentsPage/ExperimentItemsTab/ExperimentItemsTab.tsx
@@ -333,14 +333,15 @@ const ExperimentItemsTab: React.FunctionComponent<ExperimentItemsTabProps> = ({
     const retVal = [
       mapColumnDataFields<ExperimentsCompare, ExperimentsCompare>({
         id: COLUMN_ID_ID,
-        label: "Item ID",
+        label: "ID (Dataset item)",
         type: COLUMN_TYPE.string,
         cell: LinkCell as never,
         verticalAlignment: calculateVerticalAlignment(experimentsCount),
         customMeta: {
           callback: handleRowClick,
           asId: true,
         },
+        size: 165,
       }),
     ];
 

diff --git a/apps/opik-frontend/src/components/pages/DatasetItemsPage/DatasetItemsPage.tsx b/apps/opik-frontend/src/components/pages/DatasetItemsPage/DatasetItemsPage.tsx
@@ -196,7 +196,7 @@ const DatasetItemsPage = () => {
       generateSelectColumDef<DatasetItem>(),
       mapColumnDataFields<DatasetItem, DatasetItem>({
         id: COLUMN_ID_ID,
-        label: "Item ID",
+        label: "ID",
         type: COLUMN_TYPE.string,
         cell: LinkCell as never,
         customMeta: {