feat(evals): show span evaluations in trace details slideout

app/package.json

@@ -14,7 +14,7 @@
     "@codemirror/view": "^6.16.0",
     "@react-three/drei": "9.5.7",
     "@react-three/fiber": "8.0.12",
-    "@tanstack/react-table": "^8.9.3",
+    "@tanstack/react-table": "^8.10.7",
     "@uiw/codemirror-theme-nord": "^4.21.9",
     "@uiw/react-codemirror": "^4.21.9",
     "d3-format": "^3.1.0",

app/src/components/table/styles.ts

@@ -47,10 +47,10 @@ export const tableCSS = (theme: Theme) => css`
   tbody:not(.is-empty) {
     tr {
       &:nth-of-type(even) {
-        background-color: var(--ac-global-color-grey-100);
+        background-color: var(--ac-global-color-grey-200);
       }
       &:hover {
-        background-color: var(--ac-global-color-grey-200);
+        background-color: var(--ac-global-color-grey-300);
       }
       & > td {
         padding: ${theme.spacing.margin8}px ${theme.spacing.margin16}px;

app/src/pages/trace/SpanEvaluationsTable.tsx

@@ -0,0 +1,109 @@
+import React, { useMemo } from "react";
+import { graphql, useFragment } from "react-relay";
+import {
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+
+import { TextCell } from "@phoenix/components/table";
+import { tableCSS } from "@phoenix/components/table/styles";
+import { TableEmpty } from "@phoenix/components/table/TableEmpty";
+
+import { SpanEvaluationsTable_evals$key } from "./__generated__/SpanEvaluationsTable_evals.graphql";
+
+const columns = [
+  {
+    header: "name",
+    accessorKey: "name",
+    size: 100,
+  },
+  {
+    header: "label",
+    accessorKey: "label",
+    size: 100,
+  },
+  {
+    header: "score",
+    accessorKey: "score",
+    size: 100,
+  },
+  {
+    header: "explanation",
+    accessorKey: "explanation",
+    Cell: TextCell,
+    size: 400,
+  },
+];
+
+export function SpanEvaluationsTable(props: {
+  span: SpanEvaluationsTable_evals$key;
+}) {
+  const data = useFragment(
+    graphql`
+      fragment SpanEvaluationsTable_evals on Span {
+        spanEvaluations {
+          name
+          label
+          score
+          explanation
+        }
+      }
+    `,
+    props.span
+  );
+  const evaluations = useMemo(() => {
+    return [...data.spanEvaluations];
+  }, [data.spanEvaluations]);
+
+  const table = useReactTable({
+    columns,
+    data: evaluations,
+    getCoreRowModel: getCoreRowModel(),
+  });
+  const rows = table.getRowModel().rows;
+  const isEmpty = rows.length === 0;
+
+  return (
+    <table css={tableCSS}>
+      <thead>
+        {table.getHeaderGroups().map((headerGroup) => (
+          <tr key={headerGroup.id}>
+            {headerGroup.headers.map((header) => (
+              <th colSpan={header.colSpan} key={header.id}>
+                {header.isPlaceholder ? null : (
+                  <>
+                    {flexRender(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )}
+                  </>
+                )}
+              </th>
+            ))}
+          </tr>
+        ))}
+      </thead>
+      {isEmpty ? (
+        <TableEmpty />
+      ) : (
+        <tbody>
+          {table.getRowModel().rows.map((row) => (
+            <tr key={row.id}>
+              {row.getVisibleCells().map((cell) => (
+                <td
+                  key={cell.id}
+                  style={{
+                    width: cell.column.getSize(),
+                  }}
+                >
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      )}
+    </table>
+  );
+}

app/src/pages/trace/TracePage.tsx

@@ -75,6 +75,7 @@ import {
   TracePageQuery,
   TracePageQuery$data,
 } from "./__generated__/TracePageQuery.graphql";
+import { SpanEvaluationsTable } from "./SpanEvaluationsTable";
 
 type Span = TracePageQuery$data["spans"]["edges"][number]["span"];
 /**
@@ -162,6 +163,12 @@ export function TracePage() {
                 message
                 timestamp
               }
+              spanEvaluations {
+                name
+                label
+                score
+              }
+              ...SpanEvaluationsTable_evals
             }
           }
         }
@@ -284,6 +291,19 @@ function SelectedSpanDetails({ selectedSpan }: { selectedSpan: Span }) {
         <TabPane name={"Info"}>
           <SpanInfo span={selectedSpan} />
         </TabPane>
+        <TabPane
+          name={"Evaluations"}
+          hidden={!evalsEnabled}
+          extra={
+            <Counter variant={"light"}>
+              {selectedSpan.spanEvaluations.length}
+            </Counter>
+          }
+        >
+          {(selected) => {
+            return selected ? <SpanEvaluations span={selectedSpan} /> : null;
+          }}
+        </TabPane>
         <TabPane name={"Attributes"} title="Attributes">
           <View padding="size-200">
             <Card
@@ -305,7 +325,6 @@ function SelectedSpanDetails({ selectedSpan }: { selectedSpan: Span }) {
         >
           <SpanEventsList events={selectedSpan.events} />
         </TabPane>
-        {evalsEnabled ? <TabPane name={"Evals"}>Evals Tab</TabPane> : null}
       </Tabs>
     </Flex>
   );
@@ -447,8 +466,16 @@ function LLMSpanInfo(props: { span: Span; spanAttributes: AttributeObject }) {
 
   return (
     <Flex direction="column" gap="size-200">
-      {/* @ts-expect-error force putting the title in as a string */}
-      <TabbedCard {...defaultCardProps} title={modelNameTitleEl}>
+      <TabbedCard
+        backgroundColor="light"
+        borderColor="light"
+        bodyStyle={{
+          padding: 0,
+        }}
+        variant="compact"
+        // @ts-expect-error force putting the title in as a string
+        title={modelNameTitleEl}
+      >
         <Tabs>
           {hasInputMessages ? (
             <TabPane name="Input Messages" hidden={!hasInputMessages}>
@@ -1194,3 +1221,7 @@ function SpanEventsList({ events }: { events: Span["events"] }) {
     </List>
   );
 }
+
+function SpanEvaluations(props: { span: Span }) {
+  return <SpanEvaluationsTable span={props.span} />;
+}