feat(traces): Trace page header with latency, status, and evaluations (…

…#1831)
Arize-ai · Nov 30, 2023 · 1d88efd · 1d88efd
1 parent b32f7ec
commit 1d88efd
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 5 deletions.
diff --git a/app/src/components/trace/SpanStatusCodeIcon.tsx b/app/src/components/trace/SpanStatusCodeIcon.tsx
@@ -1,26 +1,25 @@
 import React from "react";
 
-import { ColorValue, Icon, Icons } from "@arizeai/components";
+import { Icon, Icons } from "@arizeai/components";
 
 import { assertUnreachable } from "@phoenix/typeUtils";
 
 import { SpanStatusCodeType } from "./types";
+import { useSpanStatusCodeColor } from "./useSpanStatusCodeColor";
 
 export function SpanStatusCodeIcon<TCode extends SpanStatusCodeType>({
   statusCode,
 }: {
   statusCode: TCode;
 }) {
   let iconSVG = <Icons.MinusCircleOutline />;
-  let color: ColorValue = "grey-500";
+  const color = useSpanStatusCodeColor(statusCode);
   switch (statusCode) {
     case "OK":
       iconSVG = <Icons.CheckmarkCircleOutline />;
-      color = "success";
       break;
     case "ERROR":
       iconSVG = <Icons.AlertCircleOutline />;
-      color = "danger";
       break;
     case "UNSET":
       iconSVG = <Icons.MinusCircleOutline />;

diff --git a/app/src/components/trace/useSpanStatusCodeColor.ts b/app/src/components/trace/useSpanStatusCodeColor.ts
@@ -0,0 +1,22 @@
+import { ColorValue } from "@arizeai/components";
+
+import { assertUnreachable } from "@phoenix/typeUtils";
+
+import { SpanStatusCodeType } from "./types";
+
+export function useSpanStatusCodeColor(
+  statusCode: SpanStatusCodeType
+): ColorValue {
+  switch (statusCode) {
+    case "OK":
+      return "success";
+
+    case "ERROR":
+      return "danger";
+      break;
+    case "UNSET":
+      return "grey-500";
+    default:
+      assertUnreachable(statusCode);
+  }
+}
diff --git a/app/src/pages/trace/TracePage.tsx b/app/src/pages/trace/TracePage.tsx
@@ -37,9 +37,12 @@ import {
 
 import { ExternalLink } from "@phoenix/components";
 import { resizeHandleCSS } from "@phoenix/components/resize";
+import { LatencyText } from "@phoenix/components/trace/LatencyText";
 import { SpanItem } from "@phoenix/components/trace/SpanItem";
 import { SpanKindIcon } from "@phoenix/components/trace/SpanKindIcon";
+import { SpanStatusCodeIcon } from "@phoenix/components/trace/SpanStatusCodeIcon";
 import { TraceTree } from "@phoenix/components/trace/TraceTree";
+import { useSpanStatusCodeColor } from "@phoenix/components/trace/useSpanStatusCodeColor";
 import { useTheme } from "@phoenix/contexts";
 import { useFeatureFlag } from "@phoenix/contexts/FeatureFlagsContext";
 import {
@@ -70,6 +73,8 @@ import {
 import { assertUnreachable, isStringArray } from "@phoenix/typeUtils";
 import { formatFloat, numberFormatter } from "@phoenix/utils/numberFormatUtils";
 
+import { EvaluationLabel } from "../tracing/EvaluationLabel";
+
 import {
   MimeType,
   TracePageQuery,
@@ -124,6 +129,7 @@ const defaultCardProps: Partial<CardProps> = {
   variant: "compact",
   collapsible: true,
 };
+
 /**
  * A page that shows the details of a trace (e.g. a collection of spans)
  */
@@ -190,6 +196,13 @@ export function TracePage() {
   const selectedSpan = spansList.find(
     (span) => span.context.spanId === selectedSpanId
   );
+  const rootSpan = useMemo(() => {
+    return spansList.find((span) => span.parentId == null);
+  }, [spansList]);
+
+  if (rootSpan == null) {
+    throw new Error("rootSpan is required to view a trace");
+  }
   return (
     <DialogContainer
       type="slideOver"
@@ -203,6 +216,7 @@ export function TracePage() {
             overflow: hidden;
           `}
         >
+          <TraceHeader rootSpan={rootSpan} />
           <PanelGroup direction="horizontal" autoSaveId="trace-panel-group">
             <Panel defaultSize={30} minSize={10} maxSize={40}>
               <TraceTree
@@ -233,6 +247,62 @@ export function TracePage() {
   );
 }
 
+function TraceHeader({ rootSpan }: { rootSpan: Span }) {
+  const { latencyMs, statusCode, spanEvaluations } = rootSpan;
+  const statusColor = useSpanStatusCodeColor(statusCode);
+  const isEvalsEnabled = useFeatureFlag("evals");
+  return (
+    <View padding="size-200" borderBottomWidth="thin" borderBottomColor="dark">
+      <Flex direction="row" gap="size-400">
+        <Flex direction="column">
+          <Text elementType="h3" textSize="medium" color="text-700">
+            Trace Status
+          </Text>
+          <Text textSize="xlarge">
+            <Flex direction="row" gap="size-50" alignItems="center">
+              <SpanStatusCodeIcon statusCode={statusCode} />
+              <Text textSize="xlarge" color={statusColor}>
+                {statusCode}
+              </Text>
+            </Flex>
+          </Text>
+        </Flex>
+        <Flex direction="column">
+          <Text elementType="h3" textSize="medium" color="text-700">
+            Latency
+          </Text>
+          <Text textSize="xlarge">
+            {typeof latencyMs === "number" ? (
+              <LatencyText latencyMs={latencyMs} textSize="xlarge" />
+            ) : (
+              "--"
+            )}
+          </Text>
+        </Flex>
+        {isEvalsEnabled ? (
+          <Flex direction="column" gap="size-50">
+            <Text elementType="h3" textSize="medium" color="text-700">
+              Evaluations
+            </Text>
+            <Flex direction="row" gap="size-50">
+              {spanEvaluations.length === 0
+                ? "--"
+                : spanEvaluations.map((evaluation) => {
+                    return (
+                      <EvaluationLabel
+                        key={evaluation.name}
+                        evaluation={evaluation}
+                      />
+                    );
+                  })}
+            </Flex>
+          </Flex>
+        ) : null}
+      </Flex>
+    </View>
+  );
+}
+
 function ScrollingTabsWrapper({ children }: PropsWithChildren) {
   return (
     <div

diff --git a/app/src/pages/tracing/TracingHomePageHeader.tsx b/app/src/pages/tracing/TracingHomePageHeader.tsx
@@ -57,7 +57,7 @@ export function TracingHomePageHeader(props: {
     <View
       paddingStart="size-200"
       paddingEnd="size-200"
-      paddingTop="size-100"
+      paddingTop="size-200"
       paddingBottom="size-50"
       flex="none"
     >

diff --git a/cspell.json b/cspell.json
@@ -29,6 +29,7 @@
         "tiktoken",
         "tracedataset",
         "UMAP",
+        "xlarge",
         "Zustand"
     ],
     "flagWords": [