fix span icon color for realtime by sending stringified top span type (#1016)

Author: dinmukhamedm

app-server/src/db/spans.rs

@@ -23,6 +23,21 @@ pub enum SpanType {
     TOOL,
 }
 
+impl std::fmt::Display for SpanType {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        match self {
+            SpanType::DEFAULT => write!(f, "DEFAULT"),
+            SpanType::LLM => write!(f, "LLM"),
+            SpanType::PIPELINE => write!(f, "PIPELINE"),
+            SpanType::EXECUTOR => write!(f, "EXECUTOR"),
+            SpanType::EVALUATOR => write!(f, "EVALUATOR"),
+            SpanType::HUMAN_EVALUATOR => write!(f, "HUMAN_EVALUATOR"),
+            SpanType::EVALUATION => write!(f, "EVALUATION"),
+            SpanType::TOOL => write!(f, "TOOL"),
+        }
+    }
+}
+
 impl FromStr for SpanType {
     type Err = anyhow::Error;
 

app-server/src/traces/realtime.rs

@@ -28,7 +28,7 @@ struct RealtimeTrace {
     top_span_id: Option<Uuid>,
     trace_type: String,
     top_span_name: Option<String>,
-    top_span_type: Option<i16>,
+    top_span_type: Option<String>,
     status: Option<String>,
     user_id: Option<String>,
     tags: Vec<String>,
@@ -136,7 +136,9 @@ impl RealtimeTrace {
             top_span_id: trace.top_span_id(),
             trace_type: trace.trace_type().to_string(),
             top_span_name: trace.top_span_name(),
-            top_span_type: trace.top_span_type(),
+            top_span_type: trace
+                .top_span_type()
+                .map(|t| SpanType::from(t as u8).to_string()),
             status: trace.status(),
             user_id: trace.user_id(),
             tags: trace.tags().clone(),

frontend/components/traces/span-type-icon.tsx

@@ -73,7 +73,9 @@ export default function SpanTypeIcon({
     <div
       className={cn("flex items-center justify-center z-10 rounded", className)}
       style={{
-        backgroundColor: status === "error" ? "rgba(204, 51, 51, 1)" : SPAN_TYPE_TO_COLOR[spanType], // Red background for errors
+        backgroundColor: (status === "error")
+          ? "rgba(204, 51, 51, 1)" // Red background for errors
+          : (SPAN_TYPE_TO_COLOR?.[spanType] || SPAN_TYPE_TO_COLOR[SpanType.DEFAULT]),
         minWidth: containerWidth,
         minHeight: containerHeight,
         width: containerWidth,