feat(traces): show all evaluations in the table" (#1819)

* feat(traces): show all evaluations in the table

relay codegen

* wrap

app/src/components/trace/types.ts

@@ -9,10 +9,10 @@ export interface ISpanItem {
   startTime: string;
   parentId: string | null;
   context: ISpanContext;
-  [otherKeys: string]: unknown;
   tokenCountTotal?: number | null;
   tokenCountPrompt?: number | null;
   tokenCountCompletion?: number | null;
+  [otherKeys: string]: unknown;
 }
 
 interface ISpanContext {

app/src/pages/tracing/EvaluationLabel.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+import { Flex, Label, Text } from "@arizeai/components";
+
+import { formatFloat } from "@phoenix/utils/numberFormatUtils";
+
+interface Evaluation {
+  name: string;
+  label?: string | null;
+  score?: number | null;
+}
+export function EvaluationLabel({ evaluation }: { evaluation: Evaluation }) {
+  const labelValue =
+    evaluation.label ||
+    (typeof evaluation.score == "number" && formatFloat(evaluation.score)) ||
+    "n/a";
+  return (
+    <Label color="cyan-1000">
+      <Flex direction="row" gap="size-50">
+        <Text weight="heavy" textSize="small" color="inherit">
+          {evaluation.name}
+        </Text>
+        <Text textSize="small">{labelValue}</Text>
+      </Flex>
+    </Label>
+  );
+}

app/src/pages/tracing/SpansTable.tsx

@@ -27,6 +27,7 @@ import { TimestampCell } from "@phoenix/components/table/TimestampCell";
 import { LatencyText } from "@phoenix/components/trace/LatencyText";
 import { SpanKindLabel } from "@phoenix/components/trace/SpanKindLabel";
 import { SpanStatusCodeIcon } from "@phoenix/components/trace/SpanStatusCodeIcon";
+import { useFeatureFlag } from "@phoenix/contexts/FeatureFlagsContext";
 import { useStreamState } from "@phoenix/contexts/StreamStateContext";
 import { useTracingContext } from "@phoenix/contexts/TracingContext";
 
@@ -38,6 +39,7 @@ import {
   SpanSort,
   SpansTableSpansQuery,
 } from "./__generated__/SpansTableSpansQuery.graphql";
+import { EvaluationLabel } from "./EvaluationLabel";
 import { SpanColumnSelector } from "./SpanColumnSelector";
 import { SpanFilterConditionField } from "./SpanFilterConditionField";
 import { spansTableCSS } from "./styles";
@@ -57,6 +59,7 @@ export function SpansTable(props: SpansTableProps) {
   const tableContainerRef = useRef<HTMLDivElement>(null);
   const [sorting, setSorting] = useState<SortingState>([]);
   const [filterCondition, setFilterCondition] = useState<string>("");
+  const isEvalsEnabled = useFeatureFlag("evals");
   const columnVisibility = useTracingContext((state) => state.columnVisibility);
   const navigate = useNavigate();
   const { data, loadNext, hasNext, isLoadingNext, refetch } =
@@ -101,6 +104,11 @@ export function SpansTable(props: SpansTableProps) {
                   value
                   mimeType
                 }
+                spanEvaluations {
+                  name
+                  label
+                  score
+                }
               }
             }
           }
@@ -115,6 +123,28 @@ export function SpansTable(props: SpansTableProps) {
     return tableData;
   }, [data]);
   type TableRow = (typeof tableData)[number];
+  const evaluationColumns: ColumnDef<TableRow>[] = [
+    {
+      header: "evaluations",
+      accessorKey: "spanEvaluations",
+      enableSorting: false,
+
+      cell: ({ row }) => {
+        return (
+          <Flex direction="row" gap="size-50" wrap="wrap">
+            {row.original.spanEvaluations.map((evaluation) => {
+              return (
+                <EvaluationLabel
+                  key={evaluation.name}
+                  evaluation={evaluation}
+                />
+              );
+            })}
+          </Flex>
+        );
+      },
+    },
+  ];
   const columns: ColumnDef<TableRow>[] = [
     {
       header: "kind",
@@ -149,6 +179,7 @@ export function SpansTable(props: SpansTableProps) {
       cell: TextCell,
       enableSorting: false,
     },
+    ...(isEvalsEnabled ? evaluationColumns : []),
     {
       header: "start time",
       accessorKey: "startTime",

app/src/pages/tracing/TracesTable.tsx

@@ -33,6 +33,7 @@ import { SpanKindLabel } from "@phoenix/components/trace/SpanKindLabel";
 import { SpanStatusCodeIcon } from "@phoenix/components/trace/SpanStatusCodeIcon";
 import { ISpanItem } from "@phoenix/components/trace/types";
 import { createSpanTree, SpanTreeNode } from "@phoenix/components/trace/utils";
+import { useFeatureFlag } from "@phoenix/contexts/FeatureFlagsContext";
 import { useStreamState } from "@phoenix/contexts/StreamStateContext";
 import { useTracingContext } from "@phoenix/contexts/TracingContext";
 
@@ -44,6 +45,7 @@ import {
   SpanSort,
   TracesTableQuery,
 } from "./__generated__/TracesTableQuery.graphql";
+import { EvaluationLabel } from "./EvaluationLabel";
 import { SpanColumnSelector } from "./SpanColumnSelector";
 import { SpanFilterConditionField } from "./SpanFilterConditionField";
 import { spansTableCSS } from "./styles";
@@ -89,7 +91,7 @@ export function TracesTable(props: TracesTableProps) {
   const tableContainerRef = useRef<HTMLDivElement>(null);
   const [sorting, setSorting] = useState<SortingState>([]);
   const [filterCondition, setFilterCondition] = useState<string>("");
-
+  const isEvalsEnabled = useFeatureFlag("evals");
   const navigate = useNavigate();
   const { fetchKey } = useStreamState();
   const { data, loadNext, hasNext, isLoadingNext, refetch } =
@@ -134,6 +136,11 @@ export function TracesTable(props: TracesTableProps) {
                   spanId
                   traceId
                 }
+                spanEvaluations {
+                  name
+                  label
+                  score
+                }
                 descendants {
                   spanKind
                   name
@@ -154,6 +161,11 @@ export function TracesTable(props: TracesTableProps) {
                     spanId
                     traceId
                   }
+                  spanEvaluations {
+                    name
+                    label
+                    score
+                  }
                 }
               }
             }
@@ -175,6 +187,29 @@ export function TracesTable(props: TracesTableProps) {
     return tableData;
   }, [data]);
   type TableRow = (typeof tableData)[number];
+
+  const evaluationColumns: ColumnDef<TableRow>[] = [
+    {
+      header: "evaluations",
+      accessorKey: "spanEvaluations",
+      enableSorting: false,
+
+      cell: ({ row }) => {
+        return (
+          <Flex direction="row" gap="size-50" wrap="wrap">
+            {row.original.spanEvaluations.map((evaluation) => {
+              return (
+                <EvaluationLabel
+                  key={evaluation.name}
+                  evaluation={evaluation}
+                />
+              );
+            })}
+          </Flex>
+        );
+      },
+    },
+  ];
   const columns: ColumnDef<TableRow>[] = [
     {
       header: () => {
@@ -241,6 +276,7 @@ export function TracesTable(props: TracesTableProps) {
       enableSorting: false,
       cell: TextCell,
     },
+    ...(isEvalsEnabled ? evaluationColumns : []),
     {
       header: "start time",
       accessorKey: "startTime",