OPIK-123 [UX Improvements] Align number columns to the right (#305)

* Fix font size * OPIK-123 [UX Improvements] Align number columns to the right * [OPIK-137] [UX Improvements] Add Last updated column to Projects table * [OPIK-141] [UX Improvements] Display tooltips faster * [OPIK-143] [UX Improvements] Move Delete option out of submenu in Feedback scores tab * [OPIK-139] [UX Improvements] Add Token usage info in Metadata tab
comet-ml · Sep 23, 2024 · ae1ef95 · ae1ef95
1 parent e739dcf
commit ae1ef95
Show file tree

Hide file tree

Showing 11 changed files with 64 additions and 47 deletions.
diff --git a/apps/opik-frontend/src/components/pages/ExperimentsPage/FilterExperimentsToCompareDialog.tsx b/apps/opik-frontend/src/components/pages/ExperimentsPage/FilterExperimentsToCompareDialog.tsx
@@ -80,7 +80,7 @@ const FilterExperimentsToCompareDialog: React.FunctionComponent<
               />
               <span className="comet-body-s-accented truncate">{e.name}</span>
             </div>
-            <div className="truncate pl-6 text-light-slate">
+            <div className="comet-body-s truncate pl-6 text-light-slate">
               Dataset: {e.dataset_name ?? "Deleted dataset"}
             </div>
           </div>

diff --git a/apps/opik-frontend/src/components/pages/ProjectsPage/ProjectsPage.tsx b/apps/opik-frontend/src/components/pages/ProjectsPage/ProjectsPage.tsx
@@ -41,6 +41,12 @@ export const DEFAULT_COLUMNS: ColumnData<Project>[] = [
     type: COLUMN_TYPE.time,
     accessorFn: (row) => formatDate(row.created_at),
   },
+  {
+    id: "last_updated_at",
+    label: "Last updated",
+    type: COLUMN_TYPE.time,
+    accessorFn: (row) => formatDate(row.last_updated_at),
+  },
 ];
 
 export const DEFAULT_SELECTED_COLUMNS: string[] = ["name", "created_at"];

diff --git a/apps/opik-frontend/src/components/shared/DataTableCells/CellWrapper.tsx b/apps/opik-frontend/src/components/shared/DataTableCells/CellWrapper.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { ColumnMeta, TableMeta } from "@tanstack/react-table";
 import { CELL_VERTICAL_ALIGNMENT_MAP } from "@/constants/shared";
-import { CELL_VERTICAL_ALIGNMENT } from "@/types/shared";
+import { CELL_VERTICAL_ALIGNMENT, COLUMN_TYPE } from "@/types/shared";
 import { cn } from "@/lib/utils";
 
 type CellWrapperProps = {
@@ -17,17 +17,21 @@ const CellWrapper: React.FunctionComponent<CellWrapperProps> = ({
   tableMetadata,
   className,
 }) => {
-  const { verticalAlignment = CELL_VERTICAL_ALIGNMENT.center } = metadata || {};
+  const { verticalAlignment = CELL_VERTICAL_ALIGNMENT.center, type } =
+    metadata || {};
   const { rowHeightClass } = tableMetadata || {};
 
-  const alignClass = CELL_VERTICAL_ALIGNMENT_MAP[verticalAlignment];
+  const verticalAlignClass = CELL_VERTICAL_ALIGNMENT_MAP[verticalAlignment];
+  const horizontalAlignClass =
+    type === COLUMN_TYPE.number ? "justify-end" : "justify-start";
 
   return (
     <div
       className={cn(
         "flex size-full p-2",
         rowHeightClass,
-        alignClass,
+        verticalAlignClass,
+        horizontalAlignClass,
         className,
       )}
     >

diff --git a/apps/opik-frontend/src/components/shared/DataTableCells/TextCell.tsx b/apps/opik-frontend/src/components/shared/DataTableCells/TextCell.tsx
@@ -1,7 +1,7 @@
 import { CellContext } from "@tanstack/react-table";
 import CellWrapper from "@/components/shared/DataTableCells/CellWrapper";
 
-const TextCell = (context: CellContext<unknown, string>) => {
+const TextCell = <TData,>(context: CellContext<TData, string>) => {
   const value = context.getValue();
 
   return (

diff --git a/apps/opik-frontend/src/components/shared/DataTableHeaders/TypeHeader.tsx b/apps/opik-frontend/src/components/shared/DataTableHeaders/TypeHeader.tsx
@@ -10,6 +10,7 @@ import {
   Braces,
   PenLine,
 } from "lucide-react";
+import { cn } from "@/lib/utils";
 
 const COLUMN_TYPE_MAP: Record<
   string,
@@ -34,7 +35,10 @@ export const TypeHeader = <TData,>({
 
   return (
     <div
-      className="flex size-full items-center gap-2 px-2"
+      className={cn(
+        "flex size-full items-center gap-2 px-2",
+        type === COLUMN_TYPE.number && "justify-end",
+      )}
       onClick={(e) => e.stopPropagation()}
     >
       {Boolean(Icon) && <Icon className="size-4 shrink-0" />}

diff --git a/apps/opik-frontend/src/components/shared/NewExperimentButton/NewExperimentButton.tsx b/apps/opik-frontend/src/components/shared/NewExperimentButton/NewExperimentButton.tsx
@@ -278,7 +278,9 @@ eval_results = evaluate(
               />
               <div className="px-2">
                 <div className="comet-body-s-accented truncate">{m.label}</div>
-                <div className="mt-0.5 text-light-slate">{m.description}</div>
+                <div className="comet-body-s mt-0.5 text-light-slate">
+                  {m.description}
+                </div>
               </div>
             </label>
           );

diff --git a/apps/opik-frontend/src/components/shared/TooltipWrapper/TooltipWrapper.tsx b/apps/opik-frontend/src/components/shared/TooltipWrapper/TooltipWrapper.tsx
@@ -13,16 +13,18 @@ type TooltipWrapperProps = {
   children?: React.ReactNode;
   side?: "top" | "right" | "bottom" | "left";
   hotkey?: React.ReactNode;
+  delayDuration?: number;
 };
 
 const TooltipWrapper: React.FunctionComponent<TooltipWrapperProps> = ({
   content,
   children,
   side,
   hotkey = null,
+  delayDuration = 500,
 }) => {
   return (
-    <TooltipProvider>
+    <TooltipProvider delayDuration={delayDuration}>
       <Tooltip>
         <TooltipTrigger asChild>{children}</TooltipTrigger>
         <TooltipPortal>

diff --git a/...ataViewer/FeedbackScoreRowActionsCell.tsx → ...DataViewer/FeedbackScoreRowDeleteCell.tsx b/...ataViewer/FeedbackScoreRowActionsCell.tsx → ...DataViewer/FeedbackScoreRowDeleteCell.tsx
@@ -1,24 +1,19 @@
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { MoreHorizontal, Trash } from "lucide-react";
 import React, { useCallback, useRef, useState } from "react";
 import { CellContext } from "@tanstack/react-table";
+import capitalize from "lodash/capitalize";
+import { Trash } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
 import ConfirmDialog from "@/components/shared/ConfirmDialog/ConfirmDialog";
 import { FEEDBACK_SCORE_TYPE, TraceFeedbackScore } from "@/types/traces";
-import capitalize from "lodash/capitalize";
 import useTraceFeedbackScoreDeleteMutation from "@/api/traces/useTraceFeedbackScoreDeleteMutation";
 
 type CustomMeta = {
   traceId: string;
   spanId?: string;
 };
 
-const FeedbackScoreRowActionsCell: React.FunctionComponent<
+const FeedbackScoreRowDeleteCell: React.FunctionComponent<
   CellContext<TraceFeedbackScore, unknown>
 > = ({ column, row }) => {
   const { custom } = column.columnDef.meta ?? {};
@@ -57,28 +52,18 @@ const FeedbackScoreRowActionsCell: React.FunctionComponent<
         }?`}
         confirmText={`${capitalize(actionName)} feedback score`}
       />
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="minimal" size="icon">
-            <span className="sr-only">Open menu</span>
-            <MoreHorizontal className="size-4" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="w-52">
-          <DropdownMenuItem
-            data-testid="feedback-score-delete-button"
-            onClick={() => {
-              setOpen(1);
-              resetKeyRef.current = resetKeyRef.current + 1;
-            }}
-          >
-            <Trash className="mr-2 size-4" />
-            {capitalize(actionName)}
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
+      <Button
+        variant="minimal"
+        size="icon"
+        onClick={() => {
+          setOpen(1);
+          resetKeyRef.current = resetKeyRef.current + 1;
+        }}
+      >
+        <Trash className="mr-2 size-4" />
+      </Button>
     </div>
   );
 };
 
-export default FeedbackScoreRowActionsCell;
+export default FeedbackScoreRowDeleteCell;
diff --git a/...pik-frontend/src/components/shared/TraceDetailsPanel/TraceDataViewer/FeedbackScoreTab.tsx b/...pik-frontend/src/components/shared/TraceDetailsPanel/TraceDataViewer/FeedbackScoreTab.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from "react";
 import sortBy from "lodash/sortBy";
 import { Span, Trace, TraceFeedbackScore } from "@/types/traces";
-import FeedbackScoreRowActionsCell from "./FeedbackScoreRowActionsCell";
+import FeedbackScoreRowDeleteCell from "./FeedbackScoreRowDeleteCell";
 import FeedbackScoreValueCell from "./FeedbackScoreValueCell";
 import { COLUMN_TYPE, ColumnData } from "@/types/shared";
 import { convertColumnDataToColumn } from "@/lib/table";
@@ -54,9 +54,9 @@ const FeedbackScoreTab: React.FunctionComponent<FeedbackScoreTabProps> = ({
     >(DEFAULT_COLUMNS, {});
 
     retVal.push({
-      id: "actions",
+      id: "delete",
       enableHiding: false,
-      cell: FeedbackScoreRowActionsCell,
+      cell: FeedbackScoreRowDeleteCell,
       meta: {
         custom: {
           traceId,

diff --git a/.../opik-frontend/src/components/shared/TraceDetailsPanel/TraceDataViewer/InputOutputTab.tsx b/.../opik-frontend/src/components/shared/TraceDetailsPanel/TraceDataViewer/InputOutputTab.tsx
@@ -55,12 +55,12 @@ const InputOutputTab: React.FunctionComponent<InputOutputTabProps> = ({
 
   const hasImages = imagesUrls.length > 0;
 
-  const openTabs = useMemo(() => {
+  const openSections = useMemo(() => {
     return hasImages ? ["images", "input", "output"] : ["input", "output"];
   }, [hasImages]);
 
   return (
-    <Accordion type="multiple" className="w-full" defaultValue={openTabs}>
+    <Accordion type="multiple" className="w-full" defaultValue={openSections}>
       {hasImages && (
         <AccordionItem value="images">
           <AccordionTrigger>Images</AccordionTrigger>

diff --git a/apps/opik-frontend/src/components/shared/TraceDetailsPanel/TraceDataViewer/MatadataTab.tsx b/apps/opik-frontend/src/components/shared/TraceDetailsPanel/TraceDataViewer/MatadataTab.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { Span, Trace } from "@/types/traces";
 import {
   Accordion,
@@ -13,14 +13,28 @@ type MetadataTabProps = {
 };
 
 const MetadataTab: React.FunctionComponent<MetadataTabProps> = ({ data }) => {
+  const hasTokenUsage = Boolean(data.usage);
+
+  const openSections = useMemo(() => {
+    return hasTokenUsage ? ["metadata", "usage"] : ["metadata"];
+  }, [hasTokenUsage]);
+
   return (
-    <Accordion type="multiple" className="w-full" defaultValue={["metadata"]}>
+    <Accordion type="multiple" className="w-full" defaultValue={openSections}>
       <AccordionItem value="metadata">
         <AccordionTrigger>Metadata</AccordionTrigger>
         <AccordionContent>
           <SyntaxHighlighter data={data.metadata} />
         </AccordionContent>
       </AccordionItem>
+      {hasTokenUsage && (
+        <AccordionItem value="usage">
+          <AccordionTrigger>Token usage</AccordionTrigger>
+          <AccordionContent>
+            <SyntaxHighlighter data={data.usage as object} />
+          </AccordionContent>
+        </AccordionItem>
+      )}
     </Accordion>
   );
 };