From 7fe594cf1e2119241c6612775b9e788a771c655e Mon Sep 17 00:00:00 2001
From: Mikyo King <mikyo@arize.com>
Date: Mon, 27 Nov 2023 15:08:16 -0700
Subject: [PATCH 1/2] feat(evals): display span evaluations

---
 app/package-lock.json                         |   2 +-
 app/package.json                              |   2 +-
 app/src/components/table/styles.ts            |   4 +-
 app/src/pages/trace/SpanEvaluationsTable.tsx  | 116 +++++
 app/src/pages/trace/TracePage.tsx             |  24 +-
 .../SpanEvaluationsTable_evals.graphql.ts     |  79 ++++
 .../__generated__/TracePageQuery.graphql.ts   | 435 +++++++++++-------
 app/src/pages/tracing/SpansTable.tsx          |   1 -
 8 files changed, 488 insertions(+), 175 deletions(-)
 create mode 100644 app/src/pages/trace/SpanEvaluationsTable.tsx
 create mode 100644 app/src/pages/trace/__generated__/SpanEvaluationsTable_evals.graphql.ts

diff --git a/app/package-lock.json b/app/package-lock.json
index 929e15de61..10e4671d33 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -17,7 +17,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",
diff --git a/app/package.json b/app/package.json
index 1ef1bc1c77..a42466a21a 100644
--- a/app/package.json
+++ b/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",
diff --git a/app/src/components/table/styles.ts b/app/src/components/table/styles.ts
index 237c4d5d4d..27add98ace 100644
--- a/app/src/components/table/styles.ts
+++ b/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;
diff --git a/app/src/pages/trace/SpanEvaluationsTable.tsx b/app/src/pages/trace/SpanEvaluationsTable.tsx
new file mode 100644
index 0000000000..e08ed8a2d2
--- /dev/null
+++ b/app/src/pages/trace/SpanEvaluationsTable.tsx
@@ -0,0 +1,116 @@
+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: 500,
+  },
+];
+
+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 : (
+                  <div
+                    {...{
+                      className: header.column.getCanSort()
+                        ? "cursor-pointer"
+                        : "",
+                      onClick: header.column.getToggleSortingHandler(),
+                    }}
+                  >
+                    {flexRender(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )}
+                  </div>
+                )}
+              </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>
+  );
+}
diff --git a/app/src/pages/trace/TracePage.tsx b/app/src/pages/trace/TracePage.tsx
index 628d7bca37..302040edee 100644
--- a/app/src/pages/trace/TracePage.tsx
+++ b/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,7 @@ export function TracePage() {
                 message
                 timestamp
               }
+              ...SpanEvaluationsTable_evals
             }
           }
         }
@@ -284,6 +286,11 @@ function SelectedSpanDetails({ selectedSpan }: { selectedSpan: Span }) {
         <TabPane name={"Info"}>
           <SpanInfo span={selectedSpan} />
         </TabPane>
+        <TabPane name={"Evaluations"} hidden={!evalsEnabled}>
+          {(selected) => {
+            return selected ? <SpanEvaluations span={selectedSpan} /> : null;
+          }}
+        </TabPane>
         <TabPane name={"Attributes"} title="Attributes">
           <View padding="size-200">
             <Card
@@ -305,7 +312,6 @@ function SelectedSpanDetails({ selectedSpan }: { selectedSpan: Span }) {
         >
           <SpanEventsList events={selectedSpan.events} />
         </TabPane>
-        {evalsEnabled ? <TabPane name={"Evals"}>Evals Tab</TabPane> : null}
       </Tabs>
     </Flex>
   );
@@ -447,8 +453,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 +1208,7 @@ function SpanEventsList({ events }: { events: Span["events"] }) {
     </List>
   );
 }
+
+function SpanEvaluations(props: { span: Span }) {
+  return <SpanEvaluationsTable span={props.span} />;
+}
diff --git a/app/src/pages/trace/__generated__/SpanEvaluationsTable_evals.graphql.ts b/app/src/pages/trace/__generated__/SpanEvaluationsTable_evals.graphql.ts
new file mode 100644
index 0000000000..629814be03
--- /dev/null
+++ b/app/src/pages/trace/__generated__/SpanEvaluationsTable_evals.graphql.ts
@@ -0,0 +1,79 @@
+/**
+ * @generated SignedSource<<e77ba2889b0c61f477b637cf201977de>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { Fragment, ReaderFragment } from 'relay-runtime';
+import { FragmentRefs } from "relay-runtime";
+export type SpanEvaluationsTable_evals$data = {
+  readonly spanEvaluations: ReadonlyArray<{
+    readonly explanation: string | null;
+    readonly label: string | null;
+    readonly name: string;
+    readonly score: number | null;
+  }>;
+  readonly " $fragmentType": "SpanEvaluationsTable_evals";
+};
+export type SpanEvaluationsTable_evals$key = {
+  readonly " $data"?: SpanEvaluationsTable_evals$data;
+  readonly " $fragmentSpreads": FragmentRefs<"SpanEvaluationsTable_evals">;
+};
+
+const node: ReaderFragment = {
+  "argumentDefinitions": [],
+  "kind": "Fragment",
+  "metadata": null,
+  "name": "SpanEvaluationsTable_evals",
+  "selections": [
+    {
+      "alias": null,
+      "args": null,
+      "concreteType": "SpanEvaluation",
+      "kind": "LinkedField",
+      "name": "spanEvaluations",
+      "plural": true,
+      "selections": [
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "name",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "label",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "score",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "explanation",
+          "storageKey": null
+        }
+      ],
+      "storageKey": null
+    }
+  ],
+  "type": "Span",
+  "abstractKey": null
+};
+
+(node as any).hash = "0604d02236eeb7e73817a68e2e6f12e2";
+
+export default node;
diff --git a/app/src/pages/trace/__generated__/TracePageQuery.graphql.ts b/app/src/pages/trace/__generated__/TracePageQuery.graphql.ts
index b7b77c8849..6ef71bc546 100644
--- a/app/src/pages/trace/__generated__/TracePageQuery.graphql.ts
+++ b/app/src/pages/trace/__generated__/TracePageQuery.graphql.ts
@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<7acfa71f3b33c5875f0bedcf46b6c440>>
+ * @generated SignedSource<<9622142012edd5a2f111c9750a75a7bd>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -9,6 +9,7 @@
 // @ts-nocheck
 
 import { ConcreteRequest, Query } from 'relay-runtime';
+import { FragmentRefs } from "relay-runtime";
 export type MimeType = "json" | "text";
 export type SpanKind = "agent" | "chain" | "embedding" | "llm" | "reranker" | "retriever" | "tool" | "unknown";
 export type SpanStatusCode = "ERROR" | "OK" | "UNSET";
@@ -45,6 +46,7 @@ export type TracePageQuery$data = {
         readonly tokenCountCompletion: number | null;
         readonly tokenCountPrompt: number | null;
         readonly tokenCountTotal: number | null;
+        readonly " $fragmentSpreads": FragmentRefs<"SpanEvaluationsTable_evals">;
       };
     }>;
   };
@@ -62,14 +64,109 @@ var v0 = [
     "name": "traceId"
   }
 ],
-v1 = {
+v1 = [
+  {
+    "kind": "Literal",
+    "name": "sort",
+    "value": {
+      "col": "startTime",
+      "dir": "asc"
+    }
+  },
+  {
+    "items": [
+      {
+        "kind": "Variable",
+        "name": "traceIds.0",
+        "variableName": "traceId"
+      }
+    ],
+    "kind": "ListValue",
+    "name": "traceIds"
+  }
+],
+v2 = {
+  "alias": null,
+  "args": null,
+  "concreteType": "SpanContext",
+  "kind": "LinkedField",
+  "name": "context",
+  "plural": false,
+  "selections": [
+    {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "spanId",
+      "storageKey": null
+    }
+  ],
+  "storageKey": null
+},
+v3 = {
   "alias": null,
   "args": null,
   "kind": "ScalarField",
   "name": "name",
   "storageKey": null
 },
-v2 = [
+v4 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "spanKind",
+  "storageKey": null
+},
+v5 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "statusCode",
+  "storageKey": null
+},
+v6 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "startTime",
+  "storageKey": null
+},
+v7 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "parentId",
+  "storageKey": null
+},
+v8 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "latencyMs",
+  "storageKey": null
+},
+v9 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "tokenCountTotal",
+  "storageKey": null
+},
+v10 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "tokenCountPrompt",
+  "storageKey": null
+},
+v11 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "tokenCountCompletion",
+  "storageKey": null
+},
+v12 = [
   {
     "alias": null,
     "args": null,
@@ -85,174 +182,197 @@ v2 = [
     "storageKey": null
   }
 ],
-v3 = [
-  {
-    "alias": null,
-    "args": [
-      {
-        "kind": "Literal",
-        "name": "sort",
-        "value": {
-          "col": "startTime",
-          "dir": "asc"
-        }
-      },
-      {
-        "items": [
-          {
-            "kind": "Variable",
-            "name": "traceIds.0",
-            "variableName": "traceId"
-          }
-        ],
-        "kind": "ListValue",
-        "name": "traceIds"
-      }
-    ],
-    "concreteType": "SpanConnection",
-    "kind": "LinkedField",
-    "name": "spans",
-    "plural": false,
+v13 = {
+  "alias": null,
+  "args": null,
+  "concreteType": "SpanIOValue",
+  "kind": "LinkedField",
+  "name": "input",
+  "plural": false,
+  "selections": (v12/*: any*/),
+  "storageKey": null
+},
+v14 = {
+  "alias": null,
+  "args": null,
+  "concreteType": "SpanIOValue",
+  "kind": "LinkedField",
+  "name": "output",
+  "plural": false,
+  "selections": (v12/*: any*/),
+  "storageKey": null
+},
+v15 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "attributes",
+  "storageKey": null
+},
+v16 = {
+  "alias": null,
+  "args": null,
+  "concreteType": "SpanEvent",
+  "kind": "LinkedField",
+  "name": "events",
+  "plural": true,
+  "selections": [
+    (v3/*: any*/),
+    {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "message",
+      "storageKey": null
+    },
+    {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "timestamp",
+      "storageKey": null
+    }
+  ],
+  "storageKey": null
+};
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "TracePageQuery",
     "selections": [
       {
         "alias": null,
-        "args": null,
-        "concreteType": "SpanEdge",
+        "args": (v1/*: any*/),
+        "concreteType": "SpanConnection",
         "kind": "LinkedField",
-        "name": "edges",
-        "plural": true,
+        "name": "spans",
+        "plural": false,
         "selections": [
           {
-            "alias": "span",
+            "alias": null,
             "args": null,
-            "concreteType": "Span",
+            "concreteType": "SpanEdge",
             "kind": "LinkedField",
-            "name": "node",
-            "plural": false,
+            "name": "edges",
+            "plural": true,
             "selections": [
               {
-                "alias": null,
+                "alias": "span",
                 "args": null,
-                "concreteType": "SpanContext",
+                "concreteType": "Span",
                 "kind": "LinkedField",
-                "name": "context",
+                "name": "node",
                 "plural": false,
                 "selections": [
+                  (v2/*: any*/),
+                  (v3/*: any*/),
+                  (v4/*: any*/),
+                  (v5/*: any*/),
+                  (v6/*: any*/),
+                  (v7/*: any*/),
+                  (v8/*: any*/),
+                  (v9/*: any*/),
+                  (v10/*: any*/),
+                  (v11/*: any*/),
+                  (v13/*: any*/),
+                  (v14/*: any*/),
+                  (v15/*: any*/),
+                  (v16/*: any*/),
                   {
-                    "alias": null,
                     "args": null,
-                    "kind": "ScalarField",
-                    "name": "spanId",
-                    "storageKey": null
+                    "kind": "FragmentSpread",
+                    "name": "SpanEvaluationsTable_evals"
                   }
                 ],
                 "storageKey": null
-              },
-              (v1/*: any*/),
-              {
-                "alias": null,
-                "args": null,
-                "kind": "ScalarField",
-                "name": "spanKind",
-                "storageKey": null
-              },
-              {
-                "alias": null,
-                "args": null,
-                "kind": "ScalarField",
-                "name": "statusCode",
-                "storageKey": null
-              },
-              {
-                "alias": null,
-                "args": null,
-                "kind": "ScalarField",
-                "name": "startTime",
-                "storageKey": null
-              },
-              {
-                "alias": null,
-                "args": null,
-                "kind": "ScalarField",
-                "name": "parentId",
-                "storageKey": null
-              },
-              {
-                "alias": null,
-                "args": null,
-                "kind": "ScalarField",
-                "name": "latencyMs",
-                "storageKey": null
-              },
-              {
-                "alias": null,
-                "args": null,
-                "kind": "ScalarField",
-                "name": "tokenCountTotal",
-                "storageKey": null
-              },
-              {
-                "alias": null,
-                "args": null,
-                "kind": "ScalarField",
-                "name": "tokenCountPrompt",
-                "storageKey": null
-              },
-              {
-                "alias": null,
-                "args": null,
-                "kind": "ScalarField",
-                "name": "tokenCountCompletion",
-                "storageKey": null
-              },
-              {
-                "alias": null,
-                "args": null,
-                "concreteType": "SpanIOValue",
-                "kind": "LinkedField",
-                "name": "input",
-                "plural": false,
-                "selections": (v2/*: any*/),
-                "storageKey": null
-              },
+              }
+            ],
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ],
+    "type": "Query",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "TracePageQuery",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v1/*: any*/),
+        "concreteType": "SpanConnection",
+        "kind": "LinkedField",
+        "name": "spans",
+        "plural": false,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "concreteType": "SpanEdge",
+            "kind": "LinkedField",
+            "name": "edges",
+            "plural": true,
+            "selections": [
               {
-                "alias": null,
+                "alias": "span",
                 "args": null,
-                "concreteType": "SpanIOValue",
+                "concreteType": "Span",
                 "kind": "LinkedField",
-                "name": "output",
+                "name": "node",
                 "plural": false,
-                "selections": (v2/*: any*/),
-                "storageKey": null
-              },
-              {
-                "alias": null,
-                "args": null,
-                "kind": "ScalarField",
-                "name": "attributes",
-                "storageKey": null
-              },
-              {
-                "alias": null,
-                "args": null,
-                "concreteType": "SpanEvent",
-                "kind": "LinkedField",
-                "name": "events",
-                "plural": true,
                 "selections": [
-                  (v1/*: any*/),
+                  (v2/*: any*/),
+                  (v3/*: any*/),
+                  (v4/*: any*/),
+                  (v5/*: any*/),
+                  (v6/*: any*/),
+                  (v7/*: any*/),
+                  (v8/*: any*/),
+                  (v9/*: any*/),
+                  (v10/*: any*/),
+                  (v11/*: any*/),
+                  (v13/*: any*/),
+                  (v14/*: any*/),
+                  (v15/*: any*/),
+                  (v16/*: any*/),
                   {
                     "alias": null,
                     "args": null,
-                    "kind": "ScalarField",
-                    "name": "message",
-                    "storageKey": null
-                  },
-                  {
-                    "alias": null,
-                    "args": null,
-                    "kind": "ScalarField",
-                    "name": "timestamp",
+                    "concreteType": "SpanEvaluation",
+                    "kind": "LinkedField",
+                    "name": "spanEvaluations",
+                    "plural": true,
+                    "selections": [
+                      (v3/*: any*/),
+                      {
+                        "alias": null,
+                        "args": null,
+                        "kind": "ScalarField",
+                        "name": "label",
+                        "storageKey": null
+                      },
+                      {
+                        "alias": null,
+                        "args": null,
+                        "kind": "ScalarField",
+                        "name": "score",
+                        "storageKey": null
+                      },
+                      {
+                        "alias": null,
+                        "args": null,
+                        "kind": "ScalarField",
+                        "name": "explanation",
+                        "storageKey": null
+                      }
+                    ],
                     "storageKey": null
                   }
                 ],
@@ -264,38 +384,19 @@ v3 = [
         ],
         "storageKey": null
       }
-    ],
-    "storageKey": null
-  }
-];
-return {
-  "fragment": {
-    "argumentDefinitions": (v0/*: any*/),
-    "kind": "Fragment",
-    "metadata": null,
-    "name": "TracePageQuery",
-    "selections": (v3/*: any*/),
-    "type": "Query",
-    "abstractKey": null
-  },
-  "kind": "Request",
-  "operation": {
-    "argumentDefinitions": (v0/*: any*/),
-    "kind": "Operation",
-    "name": "TracePageQuery",
-    "selections": (v3/*: any*/)
+    ]
   },
   "params": {
-    "cacheID": "e6c543c1105c95b566f86185f4014feb",
+    "cacheID": "af9c7e549d8bed36619b6a8988f697a4",
     "id": null,
     "metadata": {},
     "name": "TracePageQuery",
     "operationKind": "query",
-    "text": "query TracePageQuery(\n  $traceId: ID!\n) {\n  spans(traceIds: [$traceId], sort: {col: startTime, dir: asc}) {\n    edges {\n      span: node {\n        context {\n          spanId\n        }\n        name\n        spanKind\n        statusCode\n        startTime\n        parentId\n        latencyMs\n        tokenCountTotal\n        tokenCountPrompt\n        tokenCountCompletion\n        input {\n          value\n          mimeType\n        }\n        output {\n          value\n          mimeType\n        }\n        attributes\n        events {\n          name\n          message\n          timestamp\n        }\n      }\n    }\n  }\n}\n"
+    "text": "query TracePageQuery(\n  $traceId: ID!\n) {\n  spans(traceIds: [$traceId], sort: {col: startTime, dir: asc}) {\n    edges {\n      span: node {\n        context {\n          spanId\n        }\n        name\n        spanKind\n        statusCode\n        startTime\n        parentId\n        latencyMs\n        tokenCountTotal\n        tokenCountPrompt\n        tokenCountCompletion\n        input {\n          value\n          mimeType\n        }\n        output {\n          value\n          mimeType\n        }\n        attributes\n        events {\n          name\n          message\n          timestamp\n        }\n        ...SpanEvaluationsTable_evals\n      }\n    }\n  }\n}\n\nfragment SpanEvaluationsTable_evals on Span {\n  spanEvaluations {\n    name\n    label\n    score\n    explanation\n  }\n}\n"
   }
 };
 })();
 
-(node as any).hash = "c3537150aa4cffcd1c2a762d03b2f29e";
+(node as any).hash = "af7e5d324c0d37a30b94b5acc230ede9";
 
 export default node;
diff --git a/app/src/pages/tracing/SpansTable.tsx b/app/src/pages/tracing/SpansTable.tsx
index 230ba41d89..cca2181a1e 100644
--- a/app/src/pages/tracing/SpansTable.tsx
+++ b/app/src/pages/tracing/SpansTable.tsx
@@ -262,7 +262,6 @@ export function SpansTable(props: SpansTableProps) {
           />
         </Flex>
       </View>
-
       <div
         css={css`
           flex: 1 1 auto;

From cbb4c0d9e5f568f13c9bab150493adbcc376e64b Mon Sep 17 00:00:00 2001
From: Mikyo King <mikyo@arize.com>
Date: Mon, 27 Nov 2023 16:00:58 -0700
Subject: [PATCH 2/2] show a counter

---
 app/src/pages/trace/SpanEvaluationsTable.tsx  | 13 +----
 app/src/pages/trace/TracePage.tsx             | 15 ++++-
 .../__generated__/TracePageQuery.graphql.ts   | 57 +++++++++++++------
 3 files changed, 56 insertions(+), 29 deletions(-)

diff --git a/app/src/pages/trace/SpanEvaluationsTable.tsx b/app/src/pages/trace/SpanEvaluationsTable.tsx
index e08ed8a2d2..b57da87ae9 100644
--- a/app/src/pages/trace/SpanEvaluationsTable.tsx
+++ b/app/src/pages/trace/SpanEvaluationsTable.tsx
@@ -32,7 +32,7 @@ const columns = [
     header: "explanation",
     accessorKey: "explanation",
     Cell: TextCell,
-    size: 500,
+    size: 400,
   },
 ];
 
@@ -72,19 +72,12 @@ export function SpanEvaluationsTable(props: {
             {headerGroup.headers.map((header) => (
               <th colSpan={header.colSpan} key={header.id}>
                 {header.isPlaceholder ? null : (
-                  <div
-                    {...{
-                      className: header.column.getCanSort()
-                        ? "cursor-pointer"
-                        : "",
-                      onClick: header.column.getToggleSortingHandler(),
-                    }}
-                  >
+                  <>
                     {flexRender(
                       header.column.columnDef.header,
                       header.getContext()
                     )}
-                  </div>
+                  </>
                 )}
               </th>
             ))}
diff --git a/app/src/pages/trace/TracePage.tsx b/app/src/pages/trace/TracePage.tsx
index 302040edee..e483a6a642 100644
--- a/app/src/pages/trace/TracePage.tsx
+++ b/app/src/pages/trace/TracePage.tsx
@@ -163,6 +163,11 @@ export function TracePage() {
                 message
                 timestamp
               }
+              spanEvaluations {
+                name
+                label
+                score
+              }
               ...SpanEvaluationsTable_evals
             }
           }
@@ -286,7 +291,15 @@ function SelectedSpanDetails({ selectedSpan }: { selectedSpan: Span }) {
         <TabPane name={"Info"}>
           <SpanInfo span={selectedSpan} />
         </TabPane>
-        <TabPane name={"Evaluations"} hidden={!evalsEnabled}>
+        <TabPane
+          name={"Evaluations"}
+          hidden={!evalsEnabled}
+          extra={
+            <Counter variant={"light"}>
+              {selectedSpan.spanEvaluations.length}
+            </Counter>
+          }
+        >
           {(selected) => {
             return selected ? <SpanEvaluations span={selectedSpan} /> : null;
           }}
diff --git a/app/src/pages/trace/__generated__/TracePageQuery.graphql.ts b/app/src/pages/trace/__generated__/TracePageQuery.graphql.ts
index 6ef71bc546..1a4ffbb80a 100644
--- a/app/src/pages/trace/__generated__/TracePageQuery.graphql.ts
+++ b/app/src/pages/trace/__generated__/TracePageQuery.graphql.ts
@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<9622142012edd5a2f111c9750a75a7bd>>
+ * @generated SignedSource<<e4b2a9fe118abd85495f7fde93572dcc>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -40,6 +40,11 @@ export type TracePageQuery$data = {
           readonly value: string;
         } | null;
         readonly parentId: string | null;
+        readonly spanEvaluations: ReadonlyArray<{
+          readonly label: string | null;
+          readonly name: string;
+          readonly score: number | null;
+        }>;
         readonly spanKind: SpanKind;
         readonly startTime: string;
         readonly statusCode: SpanStatusCode;
@@ -234,6 +239,20 @@ v16 = {
     }
   ],
   "storageKey": null
+},
+v17 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "label",
+  "storageKey": null
+},
+v18 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "score",
+  "storageKey": null
 };
 return {
   "fragment": {
@@ -280,6 +299,20 @@ return {
                   (v14/*: any*/),
                   (v15/*: any*/),
                   (v16/*: any*/),
+                  {
+                    "alias": null,
+                    "args": null,
+                    "concreteType": "SpanEvaluation",
+                    "kind": "LinkedField",
+                    "name": "spanEvaluations",
+                    "plural": true,
+                    "selections": [
+                      (v3/*: any*/),
+                      (v17/*: any*/),
+                      (v18/*: any*/)
+                    ],
+                    "storageKey": null
+                  },
                   {
                     "args": null,
                     "kind": "FragmentSpread",
@@ -351,20 +384,8 @@ return {
                     "plural": true,
                     "selections": [
                       (v3/*: any*/),
-                      {
-                        "alias": null,
-                        "args": null,
-                        "kind": "ScalarField",
-                        "name": "label",
-                        "storageKey": null
-                      },
-                      {
-                        "alias": null,
-                        "args": null,
-                        "kind": "ScalarField",
-                        "name": "score",
-                        "storageKey": null
-                      },
+                      (v17/*: any*/),
+                      (v18/*: any*/),
                       {
                         "alias": null,
                         "args": null,
@@ -387,16 +408,16 @@ return {
     ]
   },
   "params": {
-    "cacheID": "af9c7e549d8bed36619b6a8988f697a4",
+    "cacheID": "00d106ddfcf092e5a79c907caff05b04",
     "id": null,
     "metadata": {},
     "name": "TracePageQuery",
     "operationKind": "query",
-    "text": "query TracePageQuery(\n  $traceId: ID!\n) {\n  spans(traceIds: [$traceId], sort: {col: startTime, dir: asc}) {\n    edges {\n      span: node {\n        context {\n          spanId\n        }\n        name\n        spanKind\n        statusCode\n        startTime\n        parentId\n        latencyMs\n        tokenCountTotal\n        tokenCountPrompt\n        tokenCountCompletion\n        input {\n          value\n          mimeType\n        }\n        output {\n          value\n          mimeType\n        }\n        attributes\n        events {\n          name\n          message\n          timestamp\n        }\n        ...SpanEvaluationsTable_evals\n      }\n    }\n  }\n}\n\nfragment SpanEvaluationsTable_evals on Span {\n  spanEvaluations {\n    name\n    label\n    score\n    explanation\n  }\n}\n"
+    "text": "query TracePageQuery(\n  $traceId: ID!\n) {\n  spans(traceIds: [$traceId], sort: {col: startTime, dir: asc}) {\n    edges {\n      span: node {\n        context {\n          spanId\n        }\n        name\n        spanKind\n        statusCode\n        startTime\n        parentId\n        latencyMs\n        tokenCountTotal\n        tokenCountPrompt\n        tokenCountCompletion\n        input {\n          value\n          mimeType\n        }\n        output {\n          value\n          mimeType\n        }\n        attributes\n        events {\n          name\n          message\n          timestamp\n        }\n        spanEvaluations {\n          name\n          label\n          score\n        }\n        ...SpanEvaluationsTable_evals\n      }\n    }\n  }\n}\n\nfragment SpanEvaluationsTable_evals on Span {\n  spanEvaluations {\n    name\n    label\n    score\n    explanation\n  }\n}\n"
   }
 };
 })();
 
-(node as any).hash = "af7e5d324c0d37a30b94b5acc230ede9";
+(node as any).hash = "6c94046f3119eccb8707de798c65200b";
 
 export default node;