From fdca4d9acab194e4a9dc51aaf9ae7af32837d87f Mon Sep 17 00:00:00 2001
From: "andrii.dudar" <andriid@comet.com>
Date: Mon, 16 Dec 2024 11:14:31 +0100
Subject: [PATCH] [OPIK-601] [UX improvements] Rename experiment tabs (#897)

---
 .../CompareExperimentsPanel.tsx               | 22 ++------
 .../DataTab/DataTab.tsx                       | 51 +++++++++++++----
 .../ExperimentDataset.tsx                     |  2 +-
 .../ExperimentDatasetItems.tsx                |  0
 .../OutputTab/OutputTab.tsx                   | 55 -------------------
 .../ExperimentItemsTab/ExperimentItemsTab.tsx |  3 +-
 .../DatasetItemsPage/DatasetItemsPage.tsx     |  2 +-
 7 files changed, 51 insertions(+), 84 deletions(-)
 rename apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/{OutputTab => DataTab}/ExperimentDataset.tsx (97%)
 rename apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/{OutputTab => DataTab}/ExperimentDatasetItems.tsx (100%)
 delete mode 100644 apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/OutputTab/OutputTab.tsx

diff --git a/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/CompareExperimentsPanel.tsx b/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/CompareExperimentsPanel.tsx
index 6fb7783b97..4c5b72261f 100644
--- a/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/CompareExperimentsPanel.tsx
+++ b/apps/opik-frontend/src/components/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/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/DataTab/DataTab.tsx b/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/DataTab/DataTab.tsx
index e9438a9414..2da2ae27c7 100644
--- a/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/DataTab/DataTab.tsx
+++ b/apps/opik-frontend/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/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/OutputTab/ExperimentDataset.tsx b/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/DataTab/ExperimentDataset.tsx
similarity index 97%
rename from apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/OutputTab/ExperimentDataset.tsx
rename to apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/DataTab/ExperimentDataset.tsx
index 909976b55d..feeb813f41 100644
--- a/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/OutputTab/ExperimentDataset.tsx
+++ b/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/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/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/OutputTab/ExperimentDatasetItems.tsx b/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/DataTab/ExperimentDatasetItems.tsx
similarity index 100%
rename from apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/OutputTab/ExperimentDatasetItems.tsx
rename to apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/DataTab/ExperimentDatasetItems.tsx
diff --git a/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/OutputTab/OutputTab.tsx b/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/OutputTab/OutputTab.tsx
deleted file mode 100644
index 350f33ed2b..0000000000
--- a/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsPanel/OutputTab/OutputTab.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from "react";
-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/OutputTab/ExperimentDataset";
-
-interface CompareExperimentsOutputTabProps {
-  data: DatasetItem["data"] | undefined;
-  experimentItems: ExperimentItem[];
-  openTrace: OnChangeFn<string>;
-}
-
-const OutputTab = ({
-  data,
-  experimentItems,
-  openTrace,
-}: CompareExperimentsOutputTabProps) => {
-  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>
-  );
-};
-
-export default OutputTab;
diff --git a/apps/opik-frontend/src/components/pages/CompareExperimentsPage/ExperimentItemsTab/ExperimentItemsTab.tsx b/apps/opik-frontend/src/components/pages/CompareExperimentsPage/ExperimentItemsTab/ExperimentItemsTab.tsx
index db5a962188..2e5ea65959 100644
--- a/apps/opik-frontend/src/components/pages/CompareExperimentsPage/ExperimentItemsTab/ExperimentItemsTab.tsx
+++ b/apps/opik-frontend/src/components/pages/CompareExperimentsPage/ExperimentItemsTab/ExperimentItemsTab.tsx
@@ -333,7 +333,7 @@ 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),
@@ -341,6 +341,7 @@ const ExperimentItemsTab: React.FunctionComponent<ExperimentItemsTabProps> = ({
           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
index 24ae22cafa..db0ef92e09 100644
--- 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: {