[OPIK-102] [UX] Support metadata when adding datasetItem from UI (#253)

* [OPIK-102] [UX] Support metadata when adding datasetItem from UI * [OPIK-93] [UX Improvements] Add tooltips to trace/span type icons * Fix jump on experiments compare page * Fix issue with horizontal scroll on windows
comet-ml · Sep 16, 2024 · 9a136ac · 9a136ac
1 parent d3f9415
commit 9a136ac
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 13 deletions.
diff --git a/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsCell.tsx b/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsCell.tsx
@@ -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-1.5">
+        <div className="comet-code flex w-full flex-auto items-center truncate rounded-md border bg-[#FBFCFD] px-2 py-1.5">
           {JSON.stringify(item.output, null, 2)}
         </div>
       ) : (

diff --git a/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsDetails.tsx b/apps/opik-frontend/src/components/pages/CompareExperimentsPage/CompareExperimentsDetails.tsx
@@ -116,7 +116,7 @@ const CompareExperimentsDetails: React.FunctionComponent<
         );
 
       return (
-        <div className="flex items-center gap-2">
+        <div className="flex h-11 items-center gap-2">
           Baseline of
           <Tag size="lg" variant="gray" className="flex items-center gap-2">
             <FlaskConical className="size-4 shrink-0" />
@@ -128,7 +128,7 @@ const CompareExperimentsDetails: React.FunctionComponent<
       );
     } else {
       return (
-        <div className="flex items-center gap-2">
+        <div className="flex h-11 items-center gap-2">
           <PenLine className="size-4 shrink-0" />
           <div className="flex gap-1 overflow-x-auto">
             {sortBy(experiment?.feedback_scores ?? [], "name").map(
@@ -152,7 +152,7 @@ const CompareExperimentsDetails: React.FunctionComponent<
     if (!isCompare || !showCompareFeedback) return null;
 
     return (
-      <div className="mt-4 max-h-[227px] overflow-auto rounded-md border">
+      <div className="mb-2 mt-4 max-h-[227px] overflow-auto rounded-md border">
         {experiments.length ? (
           <table className="min-w-full table-fixed caption-bottom text-sm">
             <TableBody>
@@ -196,12 +196,12 @@ const CompareExperimentsDetails: React.FunctionComponent<
   };
 
   return (
-    <div className="py-6">
-      <div className="mb-4 flex items-center justify-between">
+    <div className="pb-4 pt-6">
+      <div className="mb-4 flex min-h-10 items-center justify-between">
         <h1 className="comet-title-l">{title}</h1>
         {renderCompareFeedbackScoresButton()}
       </div>
-      <div className="mb-2 flex gap-4 overflow-x-auto">
+      <div className="mb-1 flex gap-4 overflow-x-auto">
         {!isCompare && (
           <Tag size="lg" variant="gray" className="flex items-center gap-2">
             <Clock className="size-4 shrink-0" />

diff --git a/...ontend/src/components/pages/CompareExperimentsPage/ConfigurationTab/CompareConfigCell.tsx b/...ontend/src/components/pages/CompareExperimentsPage/ConfigurationTab/CompareConfigCell.tsx
@@ -25,6 +25,7 @@ const CompareConfigCell: React.FunctionComponent<
         rowHeight: ROW_HEIGHT.small,
         rowHeightClass: "min-h-14",
       }}
+      className="px-3"
     >
       <div className="max-w-full overflow-hidden break-words">
         {String(data)}

diff --git a/...end/src/components/pages/CompareExperimentsPage/ExperimentItemsTab/ExperimentItemsTab.tsx b/...end/src/components/pages/CompareExperimentsPage/ExperimentItemsTab/ExperimentItemsTab.tsx
@@ -37,7 +37,7 @@ const getRowId = (d: ExperimentsCompare) => d.id;
 const getRowHeightClass = (height: ROW_HEIGHT) => {
   switch (height) {
     case ROW_HEIGHT.small:
-      return "h-[88px]";
+      return "h-[104px]";
     case ROW_HEIGHT.medium:
       return "h-[196px]";
     case ROW_HEIGHT.large:

diff --git a/apps/opik-frontend/src/components/pages/DatasetItemsPage/AddEditDatasetItemDialog.tsx b/apps/opik-frontend/src/components/pages/DatasetItemsPage/AddEditDatasetItemDialog.tsx
@@ -20,9 +20,15 @@ import useDatasetItemBatchMutation from "@/api/datasets/useDatasetItemBatchMutat
 import { isValidJsonObject, safelyParseJSON } from "@/lib/utils";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 
-const validateDatasetItem = (input: string, output?: string) => {
+const validateDatasetItem = (
+  input: string,
+  output?: string,
+  metadata?: string,
+) => {
   return (
-    isValidJsonObject(input) && (output ? isValidJsonObject(output) : true)
+    isValidJsonObject(input) &&
+    (output ? isValidJsonObject(output) : true) &&
+    (metadata ? isValidJsonObject(metadata) : true)
   );
 };
 
@@ -49,6 +55,9 @@ const AddEditDatasetItemDialog: React.FunctionComponent<
       ? JSON.stringify(datasetItem.expected_output, null, 2)
       : "",
   );
+  const [metadata, setMetadata] = useState<string>(
+    datasetItem?.metadata ? JSON.stringify(datasetItem.metadata, null, 2) : "",
+  );
   const [showInvalidJSON, setShowInvalidJSON] = useState<boolean>(false);
 
   useEffect(() => {
@@ -67,7 +76,7 @@ const AddEditDatasetItemDialog: React.FunctionComponent<
   const submitText = isEdit ? "Update dataset item" : "Create dataset item";
 
   const submitHandler = useCallback(() => {
-    const valid = validateDatasetItem(input, output);
+    const valid = validateDatasetItem(input, output, metadata);
 
     if (valid) {
       datasetItemBatchMutation.mutate({
@@ -77,6 +86,7 @@ const AddEditDatasetItemDialog: React.FunctionComponent<
             ...datasetItem,
             input: safelyParseJSON(input),
             expected_output: output ? safelyParseJSON(output) : undefined,
+            metadata: metadata ? safelyParseJSON(metadata) : undefined,
             source: datasetItem?.source ?? DATASET_ITEM_SOURCE.manual,
           },
         ],
@@ -87,7 +97,7 @@ const AddEditDatasetItemDialog: React.FunctionComponent<
       setShowInvalidJSON(true);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [input, output, datasetId, datasetItem, workspaceName, setOpen]);
+  }, [input, output, metadata, datasetId, datasetItem, workspaceName, setOpen]);
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
@@ -118,6 +128,17 @@ const AddEditDatasetItemDialog: React.FunctionComponent<
               />
             </div>
           </div>
+          <div className="flex flex-col gap-2 pb-4">
+            <Label htmlFor="output">Metadata</Label>
+            <div className="max-h-52 overflow-y-auto">
+              <CodeMirror
+                theme={themeMode}
+                value={metadata}
+                onChange={setMetadata}
+                extensions={[jsonLanguage, EditorView.lineWrapping]}
+              />
+            </div>
+          </div>
           {showInvalidJSON && (
             <Alert variant="destructive">
               <AlertDescription>Invalid JSON</AlertDescription>

diff --git a/apps/opik-frontend/src/components/shared/TraceDetailsPanel/BaseTraceDataTypeIcon.tsx b/apps/opik-frontend/src/components/shared/TraceDetailsPanel/BaseTraceDataTypeIcon.tsx
@@ -3,27 +3,32 @@ import { BASE_TRACE_DATA_TYPE, SPAN_TYPE } from "@/types/traces";
 import { TRACE_TYPE_FOR_TREE } from "@/constants/traces";
 import { Hammer, InspectionPanel, Link, MessageCircle } from "lucide-react";
 import { cn } from "@/lib/utils";
+import TooltipWrapper from "@/components/shared/TooltipWrapper/TooltipWrapper";
 
 const ICONS_MAP = {
   [TRACE_TYPE_FOR_TREE]: {
     icon: InspectionPanel,
     bg: "#EFE2FD",
     color: "#491B7E",
+    tooltip: "Trace",
   },
   [SPAN_TYPE.llm]: {
     icon: MessageCircle,
     bg: "#E2EFFD",
     color: "#19426B",
+    tooltip: "LLM",
   },
   [SPAN_TYPE.general]: {
     icon: Link,
     bg: "#DAFBF0",
     color: "#295747",
+    tooltip: "General",
   },
   [SPAN_TYPE.tool]: {
     icon: Hammer,
     bg: "#FDE2F6",
     color: "#72275F",
+    tooltip: "Tool",
   },
 };
 
@@ -43,7 +48,9 @@ const BaseTraceDataTypeIcon: React.FunctionComponent<
         "flex size-[22px] items-center justify-center rounded-md flex-shrink-0",
       )}
     >
-      <data.icon className="size-3.5" />
+      <TooltipWrapper content={data.tooltip}>
+        <data.icon className="size-3.5" />
+      </TooltipWrapper>
     </div>
   );
 };