support model as JSON

Author: Dylan Huang

vite-app/package.json

@@ -21,6 +21,7 @@
     "react-chartjs-2": "^5.3.0",
     "react-dom": "^19.1.0",
     "react-router-dom": "^7.7.1",
+    "react-tooltip": "^5.29.1",
     "zod": "^4.0.14"
   },
   "devDependencies": {

vite-app/pnpm-lock.yaml

@@ -11,6 +11,7 @@ import { TableCell, TableRowInteractive } from "./TableContainer";
 import { useState } from "react";
 import type { FilterGroup, FilterConfig } from "../types/filters";
 import { Tooltip } from "./Tooltip";
+import { JSONTooltip } from "./JSONTooltip";
 
 // Add filter button component
 const AddFilterButton = observer(
@@ -190,9 +191,29 @@ const InvocationId = observer(({ invocationId }: { invocationId?: string }) => {
   );
 });
 
-const RowModel = observer(({ model }: { model: string | undefined }) => (
-  <span className="text-gray-900 truncate block">{model || "N/A"}</span>
-));
+const RowModel = observer(
+  ({ model }: { model: string | object | undefined }) => {
+    const displayValue = model
+      ? typeof model === "string"
+        ? model
+        : JSON.stringify(model)
+      : "N/A";
+
+    // For strings, show full value without tooltip
+    if (typeof model === "string" || !model) {
+      return <span className="text-gray-900 block">{displayValue}</span>;
+    }
+
+    // For objects, use JSONTooltip with truncation
+    return (
+      <JSONTooltip data={model}>
+        <span className="text-gray-900 truncate block max-w-[200px] cursor-help">
+          {displayValue}
+        </span>
+      </JSONTooltip>
+    );
+  }
+);
 
 const RowScore = observer(({ score }: { score: number | undefined }) => {
   const scoreClass = score

vite-app/src/components/EvaluationRow.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Tooltip as ReactTooltip } from "react-tooltip";
 
 interface TooltipProps {
   children: React.ReactNode;
@@ -13,29 +14,35 @@ export const Tooltip: React.FC<TooltipProps> = ({
   position = "top",
   className = "",
 }) => {
-  const getPositionClasses = () => {
-    switch (position) {
-      case "top":
-        return "bottom-full left-1/2 transform -translate-x-1/2 mb-2";
-      case "bottom":
-        return "top-full left-1/2 transform -translate-x-1/2 mt-2";
-      case "left":
-        return "right-full top-1/2 transform -translate-y-1/2 mr-2";
-      case "right":
-        return "left-full top-1/2 transform -translate-y-1/2 ml-2";
-      default:
-        return "bottom-full left-1/2 transform -translate-x-1/2 mb-2";
-    }
-  };
+  const tooltipId = `tooltip-${Math.random().toString(36).substr(2, 9)}`;
 
   return (
-    <div className={`relative group cursor-pointer ${className}`}>
-      {children}
+    <>
       <div
-        className={`absolute ${getPositionClasses()} px-2 py-1 text-xs text-white bg-gray-800 rounded opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap z-10`}
+        data-tooltip-id={tooltipId}
+        className={`cursor-pointer ${className}`}
       >
-        {content}
+        {children}
       </div>
-    </div>
+      <ReactTooltip
+        id={tooltipId}
+        place={position}
+        className="px-2 py-1 text-xs text-white bg-gray-800 rounded z-10"
+        style={{
+          fontSize: "0.75rem",
+          lineHeight: "1rem",
+          backgroundColor: "#1f2937",
+          color: "white",
+          borderRadius: "0.25rem",
+          padding: "0.5rem",
+          zIndex: 10,
+          userSelect: "text",
+          pointerEvents: "auto",
+        }}
+        noArrow={true}
+      >
+        {content}
+      </ReactTooltip>
+    </>
   );
 };