From d6d3da977bc0ff671614696297db10da2e051117 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Thu, 31 Oct 2024 15:48:53 +0100
Subject: [PATCH 1/2] fix(frontend): properly displayed traces with single span
 in traceTree

---
 .../src/components/pages/observability/drawer/TraceTree.tsx | 6 ++++--
 agenta-web/src/pages/apps/[app_id]/observability/index.tsx  | 3 ++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/agenta-web/src/components/pages/observability/drawer/TraceTree.tsx b/agenta-web/src/components/pages/observability/drawer/TraceTree.tsx
index b6cd9ef269..2793589b65 100644
--- a/agenta-web/src/components/pages/observability/drawer/TraceTree.tsx
+++ b/agenta-web/src/components/pages/observability/drawer/TraceTree.tsx
@@ -6,11 +6,13 @@ import {Space, Tree, Typography} from "antd"
 import React, {useEffect, useState} from "react"
 import {createUseStyles} from "react-jss"
 import AvatarTreeContent from "../components/AvatarTreeContent"
+import {TraceTabTypes} from "@/pages/apps/[app_id]/observability"
 
 interface TraceTreeProps {
     activeTrace: _AgentaRootsResponse
     selected: string
     setSelected: React.Dispatch<React.SetStateAction<string>>
+    traceTabs: TraceTabTypes
 }
 
 interface NodeTreeChildren {
@@ -118,7 +120,7 @@ const buildTreeData = (spans: _AgentaRootsResponse[]): NodeTreeChildren[] => {
     }))
 }
 
-const TraceTree = ({activeTrace, selected, setSelected}: TraceTreeProps) => {
+const TraceTree = ({activeTrace, selected, setSelected, traceTabs}: TraceTreeProps) => {
     const classes = useStyles()
     const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([])
 
@@ -138,7 +140,7 @@ const TraceTree = ({activeTrace, selected, setSelected}: TraceTreeProps) => {
 
     return (
         <Tree
-            showLine
+            showLine={traceTabs === "node" ? false : true}
             selectedKeys={[selected]}
             expandedKeys={expandedKeys}
             onExpand={onExpand}
diff --git a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
index 8259fbd9e8..61b9a45c5d 100644
--- a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
+++ b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
@@ -57,7 +57,7 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
 
 interface Props {}
 
-type TraceTabTypes = "tree" | "node" | "chat"
+export type TraceTabTypes = "tree" | "node" | "chat"
 
 const ObservabilityDashboard = ({}: Props) => {
     const {traces, isLoading, count, fetchTraces} = useObservabilityData()
@@ -618,6 +618,7 @@ const ObservabilityDashboard = ({}: Props) => {
                             activeTrace={activeTrace}
                             selected={selected}
                             setSelected={setSelected}
+                            traceTabs={traceTabs}
                         />
                     }
                 />

From 18dda4849fe6e057e84c395e3515521a9c5d2af7 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Thu, 31 Oct 2024 16:17:09 +0100
Subject: [PATCH 2/2] bug fix(frontend)

---
 .../src/components/pages/observability/drawer/TraceTree.tsx | 6 ++----
 agenta-web/src/pages/apps/[app_id]/observability/index.tsx  | 1 -
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/agenta-web/src/components/pages/observability/drawer/TraceTree.tsx b/agenta-web/src/components/pages/observability/drawer/TraceTree.tsx
index 2793589b65..3bba8ab428 100644
--- a/agenta-web/src/components/pages/observability/drawer/TraceTree.tsx
+++ b/agenta-web/src/components/pages/observability/drawer/TraceTree.tsx
@@ -6,13 +6,11 @@ import {Space, Tree, Typography} from "antd"
 import React, {useEffect, useState} from "react"
 import {createUseStyles} from "react-jss"
 import AvatarTreeContent from "../components/AvatarTreeContent"
-import {TraceTabTypes} from "@/pages/apps/[app_id]/observability"
 
 interface TraceTreeProps {
     activeTrace: _AgentaRootsResponse
     selected: string
     setSelected: React.Dispatch<React.SetStateAction<string>>
-    traceTabs: TraceTabTypes
 }
 
 interface NodeTreeChildren {
@@ -120,7 +118,7 @@ const buildTreeData = (spans: _AgentaRootsResponse[]): NodeTreeChildren[] => {
     }))
 }
 
-const TraceTree = ({activeTrace, selected, setSelected, traceTabs}: TraceTreeProps) => {
+const TraceTree = ({activeTrace, selected, setSelected}: TraceTreeProps) => {
     const classes = useStyles()
     const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([])
 
@@ -140,7 +138,7 @@ const TraceTree = ({activeTrace, selected, setSelected, traceTabs}: TraceTreePro
 
     return (
         <Tree
-            showLine={traceTabs === "node" ? false : true}
+            showLine={activeTrace?.children ? true : false}
             selectedKeys={[selected]}
             expandedKeys={expandedKeys}
             onExpand={onExpand}
diff --git a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
index 61b9a45c5d..095241ffe3 100644
--- a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
+++ b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
@@ -618,7 +618,6 @@ const ObservabilityDashboard = ({}: Props) => {
                             activeTrace={activeTrace}
                             selected={selected}
                             setSelected={setSelected}
-                            traceTabs={traceTabs}
                         />
                     }
                 />