[OPIK-378] Update styling of table row items (#679)

apps/opik-frontend/src/components/pages/CompareExperimentsPage/ExperimentItemsTab/CompareExperimentsCell.tsx

@@ -79,11 +79,11 @@ const CompareExperimentsCell: React.FunctionComponent<
         })}
       </div>
       {isSmall ? (
-        <div className="comet-code flex w-full flex-auto items-center truncate rounded-md border bg-[#FBFCFD] px-2 py-1.5">
+        <div className="comet-code flex w-full flex-auto items-center truncate">
           {JSON.stringify(item.output, null, 2)}
         </div>
       ) : (
-        <div className="w-full flex-auto whitespace-normal rounded-md border bg-[#FBFCFD] p-2">
+        <div className="w-full flex-auto whitespace-normal">
           {item.output && (
             <JsonView
               src={item.output}

apps/opik-frontend/src/components/pages/CompareExperimentsPage/ExperimentItemsTab/ExperimentItemsTab.tsx

@@ -16,6 +16,7 @@ import { ColumnPinningState } from "@tanstack/react-table";
 import useLocalStorageState from "use-local-storage-state";
 
 import {
+  CELL_VERTICAL_ALIGNMENT,
   COLUMN_ID_ID,
   COLUMN_TYPE,
   ColumnData,
@@ -203,6 +204,8 @@ const ExperimentItemsTab: React.FunctionComponent<ExperimentItemsTabProps> = ({
           type: columnType,
           accessorFn: (row) => get(row, ["data", label], ""),
           cell: AutodetectCell as never,
+          verticalAlignment: CELL_VERTICAL_ALIGNMENT.start,
+          overrideRowHeight: ROW_HEIGHT.large,
         }) as ColumnData<ExperimentsCompare>,
     );
 
@@ -211,6 +214,7 @@ const ExperimentItemsTab: React.FunctionComponent<ExperimentItemsTabProps> = ({
       label: "Created",
       type: COLUMN_TYPE.time,
       accessorFn: (row) => formatDate(row.created_at),
+      verticalAlignment: CELL_VERTICAL_ALIGNMENT.start,
     });
 
     return retVal;
@@ -231,6 +235,7 @@ const ExperimentItemsTab: React.FunctionComponent<ExperimentItemsTabProps> = ({
         type: COLUMN_TYPE.string,
         size: columnsWidth[COLUMN_ID_ID],
         cell: LinkCell as never,
+        verticalAlignment: CELL_VERTICAL_ALIGNMENT.start,
         customMeta: {
           callback: handleRowClick,
           asId: true,

apps/opik-frontend/src/components/pages/DatasetItemsPage/DatasetItemRowActionsCell.tsx

@@ -13,13 +13,14 @@ import { useDatasetIdFromURL } from "@/hooks/useDatasetIdFromURL";
 import useAppStore from "@/store/AppStore";
 import useDatasetItemDeleteMutation from "@/api/datasets/useDatasetItemDeleteMutation";
 import ConfirmDialog from "@/components/shared/ConfirmDialog/ConfirmDialog";
+import CellWrapper from "@/components/shared/DataTableCells/CellWrapper";
 
 export const DatasetItemRowActionsCell: React.FunctionComponent<
   CellContext<DatasetItem, unknown>
-> = ({ row }) => {
+> = (context) => {
   const datasetId = useDatasetIdFromURL();
   const resetKeyRef = useRef(0);
-  const datasetItem = row.original;
+  const datasetItem = context.row.original;
   const [open, setOpen] = useState<boolean | number>(false);
 
   const workspaceName = useAppStore((state) => state.activeWorkspaceName);
@@ -36,9 +37,10 @@ export const DatasetItemRowActionsCell: React.FunctionComponent<
   }, [datasetItem.id, datasetId, workspaceName]);
 
   return (
-    <div
-      className="flex size-full items-center justify-end"
-      onClick={(e) => e.stopPropagation()}
+    <CellWrapper
+      metadata={context.column.columnDef.meta}
+      tableMetadata={context.table.options.meta}
+      className="justify-end p-0"
     >
       <ConfirmDialog
         key={`delete-${resetKeyRef.current}`}
@@ -68,6 +70,6 @@ export const DatasetItemRowActionsCell: React.FunctionComponent<
           </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
-    </div>
+    </CellWrapper>
   );
 };

apps/opik-frontend/src/components/pages/DatasetsPage/DatasetRowActionsCell.tsx

@@ -11,12 +11,13 @@ import { CellContext } from "@tanstack/react-table";
 import ConfirmDialog from "@/components/shared/ConfirmDialog/ConfirmDialog";
 import { Dataset } from "@/types/datasets";
 import useDatasetDeleteMutation from "@/api/datasets/useDatasetDeleteMutation";
+import CellWrapper from "@/components/shared/DataTableCells/CellWrapper";
 
 export const DatasetRowActionsCell: React.FunctionComponent<
   CellContext<Dataset, unknown>
-> = ({ row }) => {
+> = (context) => {
   const resetKeyRef = useRef(0);
-  const dataset = row.original;
+  const dataset = context.row.original;
   const [open, setOpen] = useState<boolean>(false);
 
   const datasetDeleteMutation = useDatasetDeleteMutation();
@@ -29,9 +30,10 @@ export const DatasetRowActionsCell: React.FunctionComponent<
   }, [dataset.id]);
 
   return (
-    <div
-      className="flex size-full items-center justify-end"
-      onClick={(e) => e.stopPropagation()}
+    <CellWrapper
+      metadata={context.column.columnDef.meta}
+      tableMetadata={context.table.options.meta}
+      className="justify-end p-0"
     >
       <ConfirmDialog
         key={`delete-${resetKeyRef.current}`}
@@ -61,6 +63,6 @@ export const DatasetRowActionsCell: React.FunctionComponent<
           </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
-    </div>
+    </CellWrapper>
   );
 };

apps/opik-frontend/src/components/pages/ExperimentsPage/ExperimentRowActionsCell.tsx

@@ -11,12 +11,13 @@ import { CellContext } from "@tanstack/react-table";
 import ConfirmDialog from "@/components/shared/ConfirmDialog/ConfirmDialog";
 import useExperimentBatchDeleteMutation from "@/api/datasets/useExperimentBatchDeleteMutation";
 import { GroupedExperiment } from "@/hooks/useGroupedExperimentsList";
+import CellWrapper from "@/components/shared/DataTableCells/CellWrapper";
 
 const ExperimentRowActionsCell: React.FunctionComponent<
   CellContext<GroupedExperiment, unknown>
-> = ({ row }) => {
+> = (context) => {
   const resetKeyRef = useRef(0);
-  const experiment = row.original;
+  const experiment = context.row.original;
   const [open, setOpen] = useState<boolean>(false);
 
   const experimentBatchDeleteMutation = useExperimentBatchDeleteMutation();
@@ -29,9 +30,10 @@ const ExperimentRowActionsCell: React.FunctionComponent<
   }, [experiment]);
 
   return (
-    <div
-      className="flex size-full items-center justify-end"
-      onClick={(e) => e.stopPropagation()}
+    <CellWrapper
+      metadata={context.column.columnDef.meta}
+      tableMetadata={context.table.options.meta}
+      className="justify-end p-0"
     >
       <ConfirmDialog
         key={`delete-${resetKeyRef.current}`}
@@ -61,7 +63,7 @@ const ExperimentRowActionsCell: React.FunctionComponent<
           </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
-    </div>
+    </CellWrapper>
   );
 };
 

apps/opik-frontend/src/components/pages/ExperimentsShared/table.tsx

@@ -108,7 +108,7 @@ export const generateGroupedCellDef = <TData, TValue>(
     cell: (context: CellContext<TData, TValue>) => {
       const { row, cell } = context;
       return (
-        <div className="flex size-full h-14 items-center">
+        <div className="flex size-full h-11 items-center">
           <div className="flex shrink-0 items-center">
             <Checkbox
               onClick={(event) => event.stopPropagation()}
@@ -189,7 +189,7 @@ export const renderCustomRow = (
   } else {
     return (
       <tr key={row.id} className="border-b">
-        <td colSpan={row.getAllCells().length} className="px-2 py-1">
+        <td colSpan={row.getAllCells().length}>
           <Button
             variant="link"
             className="w-full"

apps/opik-frontend/src/components/pages/FeedbackDefinitionsPage/FeedbackDefinitionsRowActionsCell.tsx

@@ -13,12 +13,13 @@ import { FeedbackDefinition } from "@/types/feedback-definitions";
 import ConfirmDialog from "@/components/shared/ConfirmDialog/ConfirmDialog";
 import useFeedbackDefinitionDeleteMutation from "@/api/feedback-definitions/useFeedbackDefinitionDeleteMutation";
 import AddEditFeedbackDefinitionDialog from "@/components/shared/AddEditFeedbackDefinitionDialog/AddEditFeedbackDefinitionDialog";
+import CellWrapper from "@/components/shared/DataTableCells/CellWrapper";
 
 const FeedbackDefinitionsRowActionsCell: React.FunctionComponent<
   CellContext<FeedbackDefinition, unknown>
-> = ({ row }) => {
+> = (context) => {
   const resetKeyRef = useRef(0);
-  const feedbackDefinition = row.original;
+  const feedbackDefinition = context.row.original;
   const [open, setOpen] = useState<boolean | number>(false);
 
   const feedbackDefinitionDeleteMutation =
@@ -32,9 +33,10 @@ const FeedbackDefinitionsRowActionsCell: React.FunctionComponent<
   }, [feedbackDefinition.id]);
 
   return (
-    <div
-      className="flex size-full items-center justify-end"
-      onClick={(e) => e.stopPropagation()}
+    <CellWrapper
+      metadata={context.column.columnDef.meta}
+      tableMetadata={context.table.options.meta}
+      className="justify-end p-0"
     >
       <AddEditFeedbackDefinitionDialog
         key={`edit-${resetKeyRef.current}`}
@@ -79,7 +81,7 @@ const FeedbackDefinitionsRowActionsCell: React.FunctionComponent<
           </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
-    </div>
+    </CellWrapper>
   );
 };
 

apps/opik-frontend/src/components/pages/FeedbackDefinitionsPage/FeedbackDefinitionsValueCell.tsx

@@ -45,7 +45,6 @@ const FeedbackDefinitionsValueCell = (
     <CellWrapper
       metadata={context.column.columnDef.meta}
       tableMetadata={context.table.options.meta}
-      className="py-1"
     >
       <div className="flex max-h-full flex-row gap-2 overflow-x-auto">
         {items}

apps/opik-frontend/src/components/pages/ProjectsPage/ProjectRowActionsCell.tsx

@@ -12,12 +12,13 @@ import { CellContext } from "@tanstack/react-table";
 import ConfirmDialog from "@/components/shared/ConfirmDialog/ConfirmDialog";
 import useProjectDeleteMutation from "@/api/projects/useProjectDeleteMutation";
 import { DEFAULT_PROJECT_NAME } from "@/constants/projects";
+import CellWrapper from "@/components/shared/DataTableCells/CellWrapper";
 
-export const ProjectRowActionsCell: React.FC<CellContext<Project, unknown>> = ({
-  row,
-}) => {
+export const ProjectRowActionsCell: React.FC<CellContext<Project, unknown>> = (
+  context,
+) => {
   const resetKeyRef = useRef(0);
-  const project = row.original;
+  const project = context.row.original;
   const [open, setOpen] = useState<boolean>(false);
 
   const projectDeleteMutation = useProjectDeleteMutation();
@@ -30,9 +31,10 @@ export const ProjectRowActionsCell: React.FC<CellContext<Project, unknown>> = ({
   }, [project.id]);
 
   return (
-    <div
-      className="flex size-full items-center justify-end"
-      onClick={(e) => e.stopPropagation()}
+    <CellWrapper
+      metadata={context.column.columnDef.meta}
+      tableMetadata={context.table.options.meta}
+      className="justify-end p-0"
     >
       <ConfirmDialog
         key={`delete-${resetKeyRef.current}`}
@@ -63,6 +65,6 @@ export const ProjectRowActionsCell: React.FC<CellContext<Project, unknown>> = ({
           </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
-    </div>
+    </CellWrapper>
   );
 };

apps/opik-frontend/src/components/pages/PromptsPage/PromptRowActionsCell.tsx

@@ -12,15 +12,16 @@ import ConfirmDialog from "@/components/shared/ConfirmDialog/ConfirmDialog";
 import { Prompt } from "@/types/prompts";
 import usePromptDeleteMutation from "@/api/prompts/usePromptDeleteMutation";
 import AddEditPromptDialog from "@/components/pages/PromptsPage/AddEditPromptDialog";
+import CellWrapper from "@/components/shared/DataTableCells/CellWrapper";
 
 const EDIT_KEY = 1;
 const DELETE_KEY = 2;
 
 export const PromptRowActionsCell: React.FunctionComponent<
   CellContext<Prompt, unknown>
-> = ({ row }) => {
+> = (context) => {
   const resetKeyRef = useRef(0);
-  const prompt = row.original;
+  const prompt = context.row.original;
   const [open, setOpen] = useState<number | boolean>(false);
 
   const promptDeleteMutation = usePromptDeleteMutation();
@@ -33,9 +34,10 @@ export const PromptRowActionsCell: React.FunctionComponent<
   }, [prompt.id]);
 
   return (
-    <div
-      className="flex size-full items-center justify-end"
-      onClick={(e) => e.stopPropagation()}
+    <CellWrapper
+      metadata={context.column.columnDef.meta}
+      tableMetadata={context.table.options.meta}
+      className="justify-end p-0"
     >
       <AddEditPromptDialog
         key={`edit-${resetKeyRef.current}`}
@@ -82,6 +84,6 @@ export const PromptRowActionsCell: React.FunctionComponent<
           </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
-    </div>
+    </CellWrapper>
   );
 };

apps/opik-frontend/src/components/shared/DataTable/DataTable.tsx

@@ -54,6 +54,7 @@ declare module "@tanstack/react-table" {
     header?: string;
     iconType?: COLUMN_TYPE;
     verticalAlignment?: CELL_VERTICAL_ALIGNMENT;
+    overrideRowHeight?: ROW_HEIGHT;
     custom?: object;
   }
 }

apps/opik-frontend/src/components/shared/DataTable/DataTableColumnResizer.tsx

@@ -26,7 +26,7 @@ const DataTableColumnResizer = <TData,>({
         header.column.getIsLastColumn() ? "right-0" : "-right-1",
       )}
     >
-      <div className="absolute top-3.5 h-5 w-px bg-border"></div>
+      <div className="absolute top-3 h-5 w-px bg-border"></div>
       <div className="absolute inset-y-0 w-px bg-transparent transition-colors group-hover:bg-gray-600 group-active:bg-blue-600"></div>
     </div>
   );

apps/opik-frontend/src/components/shared/DataTable/utils.tsx

@@ -16,6 +16,7 @@ import {
   COLUMN_SELECT_ID,
   ROW_HEIGHT,
 } from "@/types/shared";
+import CellWrapper from "@/components/shared/DataTableCells/CellWrapper";
 
 export const calculateHeightClass = (rowHeight: ROW_HEIGHT) => {
   return ROW_HEIGHT_MAP[rowHeight];
@@ -69,14 +70,20 @@ export const generateSelectColumDef = <TData,>() => {
         aria-label="Select all"
       />
     ),
-    cell: ({ row }) => (
-      <Checkbox
-        onClick={(event) => event.stopPropagation()}
-        checked={row.getIsSelected()}
-        disabled={!row.getCanSelect()}
-        onCheckedChange={(value) => row.toggleSelected(!!value)}
-        aria-label="Select row"
-      />
+    cell: (context) => (
+      <CellWrapper
+        metadata={context.column.columnDef.meta}
+        tableMetadata={context.table.options.meta}
+        className="px-0 py-3.5"
+      >
+        <Checkbox
+          onClick={(event) => event.stopPropagation()}
+          checked={context.row.getIsSelected()}
+          disabled={!context.row.getCanSelect()}
+          onCheckedChange={(value) => context.row.toggleSelected(!!value)}
+          aria-label="Select row"
+        />
+      </CellWrapper>
     ),
     size: 50,
     enableResizing: false,