[OPIK-242] Adjust FE page for dataset items and experiment items (#412)

comet-ml · Oct 17, 2024 · e553bf2 · e553bf2
1 parent e30af50
commit e553bf2
Show file tree

Hide file tree

Showing 19 changed files with 307 additions and 362 deletions.
diff --git a/apps/opik-frontend/e2e/entities/DatasetItem.ts b/apps/opik-frontend/e2e/entities/DatasetItem.ts
@@ -8,25 +8,23 @@ export class DatasetItem {
   constructor(
     readonly page: Page,
     readonly id: string,
-    readonly input?: object,
   ) {}
 
   static async create(dataset: Dataset, params: object = {}) {
-    const { id = uuid(), input } = params as { id?: string; input?: object };
+    const { id = uuid() } = params as { id?: string };
 
     await dataset.page.request.put(`${API_URL}datasets/items`, {
       data: {
         dataset_id: dataset.id,
         items: [
           {
-            input,
             ...params,
           },
         ],
       },
     });
 
-    return new DatasetItem(dataset.page, id, input);
+    return new DatasetItem(dataset.page, id);
   }
 
   async destroy() {

diff --git a/apps/opik-frontend/e2e/pages/DatasetItemsPage.ts b/apps/opik-frontend/e2e/pages/DatasetItemsPage.ts
@@ -20,21 +20,13 @@ export class DatasetItemsPage {
     await this.table.getRowLocatorByCellText(name).click();
   }
 
-  async addDatasetItem(input: string, output?: string, meta?: string) {
+  async addDatasetItem(data: string) {
     await this.page
       .getByRole("button", {
         name: "Create dataset item",
       })
       .click();
-    await this.page.locator(".cm-editor .cm-line").nth(0).fill(input);
-
-    if (output) {
-      await this.page.locator(".cm-editor .cm-line").nth(1).fill(output);
-    }
-
-    if (meta) {
-      await this.page.locator(".cm-editor .cm-line").nth(2).fill(meta);
-    }
+    await this.page.locator(".cm-editor .cm-content").first().fill(data);
 
     await this.page.getByRole("button", { name: "Create dataset" }).click();
   }

diff --git a/apps/opik-frontend/e2e/test-data/datasetItem.ts b/apps/opik-frontend/e2e/test-data/datasetItem.ts
@@ -1,24 +1,29 @@
 export const DATASET_ITEM_1 = {
-  input: {
-    prompt: "What is the capital of France?",
-  },
-  expected_output: {
-    response: "The capital of France is Paris.",
-  },
-  metadata: {
-    test: true,
-    version: 1,
+  data: {
+    input: {
+      prompt: "What is the capital of France?",
+    },
+    expected_output: {
+      response: "The capital of France is Paris.",
+    },
+    metadata: {
+      test: true,
+      version: 1,
+    },
+    custom: "some_custom_dataset_id",
   },
   source: "manual",
 } as const;
 
 export const DATASET_ITEM_2 = {
-  input: {
-    prompt:
-      "Translate the following sentence into Spanish: 'Good morning, how are you?'",
-  },
-  expected_output: {
-    response: "Buenos días, ¿cómo estás?",
+  data: {
+    input: {
+      prompt:
+        "Translate the following sentence into Spanish: 'Good morning, how are you?'",
+    },
+    expected_output: {
+      response: "Buenos días, ¿cómo estás?",
+    },
   },
   source: "sdk",
 } as const;
diff --git a/apps/opik-frontend/e2e/tests/datasets/dataset-items-page.spec.ts b/apps/opik-frontend/e2e/tests/datasets/dataset-items-page.spec.ts
@@ -8,18 +8,11 @@ test.describe("Dataset items page", () => {
   }) => {
     await datasetItemsPage.goto(dataset1.id);
 
-    await datasetItemsPage.addDatasetItem(
-      JSON.stringify(DATASET_ITEM_1.input),
-      JSON.stringify(DATASET_ITEM_1.expected_output),
-      JSON.stringify(DATASET_ITEM_1.metadata),
-    );
+    await datasetItemsPage.addDatasetItem(JSON.stringify(DATASET_ITEM_1.data));
+    await datasetItemsPage.table.checkIsExist(DATASET_ITEM_1.data.custom);
 
-    const input = `{ "prompt": "${DATASET_ITEM_1.input.prompt}" }`;
-
-    await datasetItemsPage.table.checkIsExist(input);
-
-    await datasetItemsPage.deleteDatasetItem(input);
-    await datasetItemsPage.table.checkIsNotExist(input);
+    await datasetItemsPage.deleteDatasetItem(DATASET_ITEM_1.data.custom);
+    await datasetItemsPage.table.checkIsNotExist(DATASET_ITEM_1.data.custom);
   });
 
   test("Check open sidebar", async ({
@@ -29,15 +22,14 @@ test.describe("Dataset items page", () => {
     datasetItemsPage,
   }) => {
     await datasetItemsPage.goto(dataset1.id);
-    const input = `{ "prompt": "${
-      (datasetItem1.input as { prompt: string }).prompt
-    }" }`;
-    await datasetItemsPage.openSidebar(input);
-    await expect(page.getByText(`Dataset:${dataset1.name}`)).toBeVisible();
-    await expect(page.getByRole("button", { name: "Input" })).toBeVisible();
+    await datasetItemsPage.openSidebar(DATASET_ITEM_1.data.custom);
+    await expect(
+      page.getByTestId("dataset-items").getByRole("heading", { name: "Data" }),
+    ).toBeVisible();
     await expect(
-      page.getByRole("button", { name: "Expected output" }),
+      page
+        .getByTestId("dataset-items")
+        .getByText(`custom: ${DATASET_ITEM_1.data.custom}`),
     ).toBeVisible();
-    await expect(page.getByRole("button", { name: "Metadata" })).toBeVisible();
   });
 });
diff --git a/apps/opik-frontend/src/api/datasets/useCompareExperimentsList.ts b/apps/opik-frontend/src/api/datasets/useCompareExperimentsList.ts
@@ -1,6 +1,6 @@
 import { QueryFunctionContext, useQuery } from "@tanstack/react-query";
 import api, { DATASETS_REST_ENDPOINT, QueryConfig } from "@/api/api";
-import { ExperimentsCompare } from "@/types/datasets";
+import { DatasetItemColumn, ExperimentsCompare } from "@/types/datasets";
 import { Filters } from "@/types/filters";
 import { processFilters } from "@/lib/filters";
 
@@ -16,6 +16,7 @@ type UseCompareExperimentsListParams = {
 
 export type UseCompareExperimentsListResponse = {
   content: ExperimentsCompare[];
+  columns: DatasetItemColumn[];
   total: number;
 };
 

diff --git a/apps/opik-frontend/src/api/datasets/useDatasetItemsList.ts b/apps/opik-frontend/src/api/datasets/useDatasetItemsList.ts
@@ -1,6 +1,6 @@
 import { QueryFunctionContext, useQuery } from "@tanstack/react-query";
 import api, { DATASETS_REST_ENDPOINT, QueryConfig } from "@/api/api";
-import { DatasetItem } from "@/types/datasets";
+import { DatasetItem, DatasetItemColumn } from "@/types/datasets";
 import { Filters } from "@/types/filters";
 import { processFilters } from "@/lib/filters";
 
@@ -13,6 +13,7 @@ type UseDatasetItemsListParams = {
 
 export type UseDatasetItemsListResponse = {
   content: DatasetItem[];
+  columns: DatasetItemColumn[];
   total: number;
 };
 

diff --git a/...nts/pages/CompareExperimentsPage/CompareExperimentsPanel/CompareExperimentsDataViewer.tsx b/...nts/pages/CompareExperimentsPage/CompareExperimentsPanel/CompareExperimentsDataViewer.tsx
diff --git a/...mponents/pages/CompareExperimentsPage/CompareExperimentsPanel/CompareExperimentsPanel.tsx b/...mponents/pages/CompareExperimentsPage/CompareExperimentsPanel/CompareExperimentsPanel.tsx
@@ -10,10 +10,10 @@ import {
   ResizablePanelGroup,
 } from "@/components/ui/resizable";
 import NoData from "@/components/shared/NoData/NoData";
+import SyntaxHighlighter from "@/components/shared/SyntaxHighlighter/SyntaxHighlighter";
 import ResizableSidePanel from "@/components/shared/ResizableSidePanel/ResizableSidePanel";
 import ShareURLButton from "@/components/shared/ShareURLButton/ShareURLButton";
 import { ExperimentsCompare } from "@/types/datasets";
-import CompareExperimentsDataViewer from "@/components/pages/CompareExperimentsPage/CompareExperimentsPanel/CompareExperimentsDataViewer";
 import CompareExperimentsViewer from "@/components/pages/CompareExperimentsPage/CompareExperimentsPanel/CompareExperimentsViewer";
 import { OnChangeFn } from "@/types/shared";
 import { cn } from "@/lib/utils";
@@ -110,24 +110,16 @@ const CompareExperimentsPanel: React.FunctionComponent<
           autoSaveId="compare-vetical-sidebar"
         >
           <ResizablePanel defaultSize={50} minSize={20}>
-            <ResizablePanelGroup
-              direction="horizontal"
-              autoSaveId="compare-horizontal-sidebar"
-            >
-              <ResizablePanel defaultSize={50} minSize={20}>
-                <CompareExperimentsDataViewer
-                  title="Input"
-                  code={experimentsCompare.input}
-                />
-              </ResizablePanel>
-              <ResizableHandle />
-              <ResizablePanel defaultSize={50} minSize={20}>
-                <CompareExperimentsDataViewer
-                  title="Expected output"
-                  code={experimentsCompare.expected_output}
-                />
-              </ResizablePanel>
-            </ResizablePanelGroup>
+            <div className="size-full overflow-auto p-6">
+              <div className="min-w-72 max-w-full overflow-x-hidden">
+                <h2 className="comet-title-m mb-4">Data</h2>
+                {experimentsCompare.data ? (
+                  <SyntaxHighlighter data={experimentsCompare.data} />
+                ) : (
+                  <NoData />
+                )}
+              </div>
+            </div>
           </ResizablePanel>
           <ResizableHandle />
           <ResizablePanel defaultSize={50} minSize={20}>