From 5ee030c29ca3edff0f9fb7ab41dfb446212133e0 Mon Sep 17 00:00:00 2001
From: Mikyo King <mikyo@arize.com>
Date: Wed, 31 Jul 2024 22:29:12 -0600
Subject: [PATCH 1/3] feat(ui): condensed trace tree

---
 app/src/components/trace/TraceTree.tsx | 35 ++++++++++----------------
 1 file changed, 13 insertions(+), 22 deletions(-)

diff --git a/app/src/components/trace/TraceTree.tsx b/app/src/components/trace/TraceTree.tsx
index 9d4a60f87c..2f591cef7f 100644
--- a/app/src/components/trace/TraceTree.tsx
+++ b/app/src/components/trace/TraceTree.tsx
@@ -23,10 +23,8 @@ export function TraceTree(props: TraceTreeProps) {
   return (
     <ul
       css={(theme) => css`
-        margin: ${theme.spacing.margin16}px;
         display: flex;
         flex-direction: column;
-        gap: ${theme.spacing.padding8}px;
       `}
     >
       {spanTree.map((spanNode) => (
@@ -71,17 +69,16 @@ function SpanTreeItem<TSpan extends ISpanItem>(props: {
           >
             <SpanKindIcon spanKind={node.span.spanKind} />
             <SpanItem {...node.span} />
+            <button>collapse</button>
           </Flex>
         </SpanNodeWrap>
       </button>
       {childNodes.length ? (
         <ul
-          css={(theme) => css`
-            margin: var(--ac-global-dimension-static-size-100) 0 0
-              var(--ac-global-dimension-static-size-600);
+          css={css`
+            margin: 0 0 0 var(--ac-global-dimension-static-size-600);
             display: flex;
             flex-direction: column;
-            gap: ${theme.spacing.padding8}px;
           `}
         >
           {childNodes.map((leafNode, index) => {
@@ -89,7 +86,7 @@ function SpanTreeItem<TSpan extends ISpanItem>(props: {
             // after to the parent node
             const nexSibling = childNodes[index + 1];
             return (
-              <div
+              <li
                 key={leafNode.span.context.spanId}
                 css={css`
                   position: relative;
@@ -103,8 +100,9 @@ function SpanTreeItem<TSpan extends ISpanItem>(props: {
                   node={leafNode}
                   onSpanClick={onSpanClick}
                   selectedSpanNodeId={selectedSpanNodeId}
+                  f
                 />
-              </div>
+              </li>
             );
           })}
         </ul>
@@ -118,21 +116,14 @@ function SpanNodeWrap(props: PropsWithChildren<{ isSelected: boolean }>) {
     <div
       className={props.isSelected ? "is-selected" : ""}
       css={css`
-        border-radius: var(--ac-global-dimension-static-size-150);
-        background-color: var(--ac-global-color-grey-200);
-        padding: var(--ac-global-dimension-static-size-50)
-          var(--ac-global-dimension-static-size-200)
-          var(--ac-global-dimension-static-size-50)
-          var(--ac-global-dimension-static-size-200);
-        border-width: var(--ac-global-dimension-static-size-10);
-        border-style: solid;
+        background-color: green;
+
         border-color: var(--ac-global-color-grey-300);
         &:hover {
-          border-color: var(--ac-global-color-grey-400);
           background-color: var(--ac-global-color-grey-300);
         }
         &.is-selected {
-          border-color: var(--ac-global-color-primary);
+          background-color: var(--ac-global-color-primary-500);
         }
       `}
     >
@@ -160,7 +151,7 @@ function SpanTreeEdgeConnector({
             ? theme.colors.statusDanger
             : "rgb(204, 204, 204)"};
         top: 0;
-        left: -22px;
+        left: -39px;
         width: 42px;
         bottom: 0;
       `}
@@ -181,11 +172,11 @@ function SpanTreeEdge({ statusCode }: { statusCode: SpanStatusCodeType }) {
           position: absolute;
           border-left: 1px solid ${color};
           border-bottom: 1px solid ${color};
-          border-radius: 0 0 0 var(--ac-global-dimension-static-size-150);
+          border-radius: 0 0 0 20px;
           top: -24px;
-          left: -22px;
+          left: -39px;
           width: 38px;
-          height: 48px;
+          height: 45px;
         `;
       }}
     ></div>

From 3f8c6789158acd5ca95d2ab41bbd7a241c92933f Mon Sep 17 00:00:00 2001
From: Mikyo King <mikyo@arize.com>
Date: Thu, 1 Aug 2024 17:03:38 -0600
Subject: [PATCH 2/3] feat(traces): collapsible span tree

---
 app/src/components/trace/LatencyText.tsx  |  14 +-
 app/src/components/trace/SpanItem.tsx     |  65 ------
 app/src/components/trace/SpanKindIcon.tsx |  44 +++-
 app/src/components/trace/TraceTree.tsx    | 235 +++++++++++++++-------
 app/src/pages/trace/SpanDetails.tsx       |  40 ++--
 app/src/pages/trace/TraceDetails.tsx      |   2 +-
 6 files changed, 223 insertions(+), 177 deletions(-)
 delete mode 100644 app/src/components/trace/SpanItem.tsx

diff --git a/app/src/components/trace/LatencyText.tsx b/app/src/components/trace/LatencyText.tsx
index 401e7b837b..21702e095c 100644
--- a/app/src/components/trace/LatencyText.tsx
+++ b/app/src/components/trace/LatencyText.tsx
@@ -7,9 +7,15 @@ import { formatFloat } from "@phoenix/utils/numberFormatUtils";
 export function LatencyText({
   latencyMs,
   textSize = "medium",
+  showIcon = true,
 }: {
   latencyMs: number;
   textSize?: TextProps["textSize"];
+  /**
+   * Whether to show the clock icon.
+   * @default true
+   */
+  showIcon?: boolean;
 }) {
   const color = useMemo(() => {
     if (latencyMs < 3000) {
@@ -36,9 +42,11 @@ export function LatencyText({
       justifyContent="start"
       gap="size-50"
     >
-      <Text color={color} textSize={textSize}>
-        <Icon svg={<Icons.ClockOutline />} />
-      </Text>
+      {showIcon ? (
+        <Text color={color} textSize={textSize}>
+          <Icon svg={<Icons.ClockOutline />} />
+        </Text>
+      ) : null}
       <Text color={color} textSize={textSize}>
         {latencyText}
       </Text>
diff --git a/app/src/components/trace/SpanItem.tsx b/app/src/components/trace/SpanItem.tsx
deleted file mode 100644
index 4802f55b11..0000000000
--- a/app/src/components/trace/SpanItem.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from "react";
-import { css } from "@emotion/react";
-
-import { Flex, Text, View } from "@arizeai/components";
-
-import { TokenCount } from "@phoenix/components/trace/TokenCount";
-import { SpanStatusCode } from "@phoenix/pages/project/__generated__/SpansTable_spans.graphql";
-
-import { LatencyText } from "./LatencyText";
-import { SpanKindLabel } from "./SpanKindLabel";
-import { SpanStatusCodeIcon } from "./SpanStatusCodeIcon";
-
-interface SpanItemProps {
-  name: string;
-  spanKind: string;
-  latencyMs: number | null;
-  statusCode: SpanStatusCode;
-  tokenCountTotal?: number | null;
-  tokenCountPrompt?: number | null;
-  tokenCountCompletion?: number | null;
-}
-export function SpanItem(props: SpanItemProps) {
-  const {
-    name,
-    latencyMs,
-    spanKind,
-    statusCode,
-    tokenCountTotal,
-    tokenCountPrompt,
-    tokenCountCompletion,
-  } = props;
-  return (
-    <View height="size-500" width="100%">
-      <Flex
-        direction="row"
-        gap="size-150"
-        width="100%"
-        height="100%"
-        alignItems="center"
-      >
-        <SpanKindLabel spanKind={spanKind} />
-        <View flex="1 1 auto">
-          <div
-            css={css`
-              float: left;
-            `}
-          >
-            <Text>{name}</Text>
-          </div>
-        </View>
-        {typeof tokenCountTotal === "number" ? (
-          <TokenCount
-            tokenCountTotal={tokenCountTotal}
-            tokenCountPrompt={tokenCountPrompt ?? 0}
-            tokenCountCompletion={tokenCountCompletion ?? 0}
-          />
-        ) : null}
-        {latencyMs === null ? null : <LatencyText latencyMs={latencyMs} />}
-        {statusCode === "ERROR" ? (
-          <SpanStatusCodeIcon statusCode="ERROR" />
-        ) : null}
-      </Flex>
-    </View>
-  );
-}
diff --git a/app/src/components/trace/SpanKindIcon.tsx b/app/src/components/trace/SpanKindIcon.tsx
index 5b7ecf1df5..e7dce5bd89 100644
--- a/app/src/components/trace/SpanKindIcon.tsx
+++ b/app/src/components/trace/SpanKindIcon.tsx
@@ -1,6 +1,8 @@
 import React from "react";
 import { css } from "@emotion/react";
 
+import { useTheme } from "@phoenix/contexts";
+
 const ToolSVG = () => (
   <svg
     width="20"
@@ -547,44 +549,66 @@ export function SpanKindIcon({
   spanKind: string;
   variant?: "fill" | "outline";
 }) {
+  const { theme } = useTheme();
+  const isDark = theme === "dark";
   const isFilled = variant === "fill";
   let icon = isFilled ? <UnknownFilledSVG /> : <UnknownSVG />;
-  let color = "--ac-global-color-grey-900";
+  let color = isDark
+    ? "--ac-global-color-grey-600"
+    : "--ac-global-color-grey-500";
   switch (spanKind) {
     case "llm":
-      color = "--ac-global-color-orange-1000";
+      color = isDark
+        ? "--ac-global-color-orange-1000"
+        : "--ac-global-color-orange-500";
       icon = isFilled ? <LLMFilledSVG /> : <LLMSVG />;
       break;
     case "chain":
-      color = "--ac-global-color-blue-1000";
+      color = isDark
+        ? "--ac-global-color-blue-1000"
+        : "--ac-global-color-blue-500";
       icon = isFilled ? <ChainFilledSVG /> : <ChainSVG />;
       break;
     case "retriever":
-      color = "--ac-global-color-seafoam-1000";
+      color = isDark
+        ? "--ac-global-color-seafoam-1000"
+        : "--ac-global-color-seafoam-500";
       icon = isFilled ? <RetrieverFilledSVG /> : <RetrieverSVG />;
       break;
     case "embedding":
-      color = "--ac-global-color-indigo-1000";
+      color = isDark
+        ? "--ac-global-color-indigo-1000"
+        : "--ac-global-color-indigo-500";
       icon = isFilled ? <EmbeddingFilledSVG /> : <EmbeddingSVG />;
       break;
     case "agent":
-      color = "--ac-global-text-color-900";
+      color = isDark
+        ? "--ac-global-text-color-900"
+        : "--ac-global-text-color-500";
       icon = isFilled ? <AgentFilledSVG /> : <AgentSVG />;
       break;
     case "tool":
-      color = "--ac-global-color-yellow-1200";
+      color = isDark
+        ? "--ac-global-color-yellow-1200"
+        : "--ac-global-color-yellow-500";
       icon = isFilled ? <ToolFilledSVG /> : <ToolSVG />;
       break;
     case "reranker":
-      color = "--ac-global-color-celery-1000";
+      color = isDark
+        ? "--ac-global-color-celery-1000"
+        : "--ac-global-color-celery-500";
       icon = isFilled ? <RerankerFilledSVG /> : <RerankerSVG />;
       break;
     case "evaluator":
-      color = "--ac-global-color-indigo-1000";
+      color = isDark
+        ? "--ac-global-color-indigo-1000"
+        : "--ac-global-color-indigo-500";
       icon = isFilled ? <EvaluatorFilledSVG /> : <EvaluatorSVG />;
       break;
     case "guardrail":
-      color = "--ac-global-color-fuchsia-1200";
+      color = isDark
+        ? "--ac-global-color-fuchsia-1200"
+        : "--ac-global-color-fuchsia-500";
       icon = isFilled ? <GuardrailFilledSVG /> : <GuardrailSVG />;
       break;
   }
diff --git a/app/src/components/trace/TraceTree.tsx b/app/src/components/trace/TraceTree.tsx
index 2f591cef7f..7e9aa05829 100644
--- a/app/src/components/trace/TraceTree.tsx
+++ b/app/src/components/trace/TraceTree.tsx
@@ -1,7 +1,7 @@
-import React, { PropsWithChildren, startTransition } from "react";
+import React, { PropsWithChildren, startTransition, useState } from "react";
 import { css } from "@emotion/react";
 
-import { Flex, Text, View } from "@arizeai/components";
+import { classNames, Flex, Icon, Icons } from "@arizeai/components";
 
 import { TokenCount } from "@phoenix/components/trace/TokenCount";
 
@@ -17,14 +17,21 @@ type TraceTreeProps = {
   selectedSpanNodeId: string;
 };
 
+/**
+ * The amount of padding to add to the left of the span item for each level of nesting.
+ */
+const NESTING_INDENT = 30;
+
 export function TraceTree(props: TraceTreeProps) {
   const { spans, onSpanClick, selectedSpanNodeId } = props;
   const spanTree = createSpanTree(spans);
   return (
     <ul
-      css={(theme) => css`
+      css={css`
         display: flex;
         flex-direction: column;
+        width: 100%;
+        min-width: 300px;
       `}
     >
       {spanTree.map((spanNode) => (
@@ -39,19 +46,43 @@ export function TraceTree(props: TraceTreeProps) {
   );
 }
 
+const spanNameCSS = css`
+  font-weight: 500;
+  color: var(--ac-global-text-color-900);
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
 function SpanTreeItem<TSpan extends ISpanItem>(props: {
   node: SpanTreeNode<TSpan>;
   selectedSpanNodeId: string;
   onSpanClick?: (span: ISpanItem) => void;
+  /**
+   * How deep the item is nested in the tree. Starts at 0.
+   * @default 0
+   */
+  nestingLevel?: number;
 }) {
-  const { node, selectedSpanNodeId, onSpanClick } = props;
+  const { node, selectedSpanNodeId, onSpanClick, nestingLevel = 0 } = props;
   const childNodes = node.children;
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const hasChildren = childNodes.length > 0;
+  const {
+    name,
+    latencyMs,
+    statusCode,
+    tokenCountTotal,
+    tokenCountPrompt,
+    tokenCountCompletion,
+  } = node.span;
   return (
     <div>
       <button
         className="button--reset"
         css={css`
-          min-width: var(--ac-global-dimension-static-size-4600);
+          width: 100%;
           cursor: pointer;
         `}
         onClick={() => {
@@ -60,24 +91,52 @@ function SpanTreeItem<TSpan extends ISpanItem>(props: {
           });
         }}
       >
-        <SpanNodeWrap isSelected={selectedSpanNodeId === node.span.id}>
+        <SpanNodeWrap
+          isSelected={selectedSpanNodeId === node.span.id}
+          nestingLevel={nestingLevel}
+        >
           <Flex
             direction="row"
             gap="size-100"
             justifyContent="start"
             alignItems="center"
+            flex="1 1 auto"
+            minWidth={0}
           >
             <SpanKindIcon spanKind={node.span.spanKind} />
-            <SpanItem {...node.span} />
-            <button>collapse</button>
+            <span css={spanNameCSS} title={name}>
+              {name}
+            </span>
+            {statusCode === "ERROR" ? (
+              <SpanStatusCodeIcon statusCode="ERROR" />
+            ) : null}
+            {typeof tokenCountTotal === "number" ? (
+              <TokenCount
+                tokenCountTotal={tokenCountTotal}
+                tokenCountPrompt={tokenCountPrompt ?? 0}
+                tokenCountCompletion={tokenCountCompletion ?? 0}
+              />
+            ) : null}
+            {latencyMs === null ? null : (
+              <LatencyText latencyMs={latencyMs} showIcon={false} />
+            )}
           </Flex>
+          <div css={spanControlsCSS} data-testid="span-controls">
+            {hasChildren ? (
+              <CollapseToggleButton
+                isCollapsed={isCollapsed}
+                onClick={() => {
+                  setIsCollapsed(!isCollapsed);
+                }}
+              />
+            ) : null}
+          </div>
         </SpanNodeWrap>
       </button>
       {childNodes.length ? (
         <ul
           css={css`
-            margin: 0 0 0 var(--ac-global-dimension-static-size-600);
-            display: flex;
+            display: ${isCollapsed ? "none" : "flex"};
             flex-direction: column;
           `}
         >
@@ -93,14 +152,17 @@ function SpanTreeItem<TSpan extends ISpanItem>(props: {
                 `}
               >
                 {nexSibling ? (
-                  <SpanTreeEdgeConnector {...nexSibling.span} />
+                  <SpanTreeEdgeConnector
+                    {...nexSibling.span}
+                    nestingLevel={nestingLevel}
+                  />
                 ) : null}
-                <SpanTreeEdge {...leafNode.span} />
+                <SpanTreeEdge {...leafNode.span} nestingLevel={nestingLevel} />
                 <SpanTreeItem
                   node={leafNode}
                   onSpanClick={onSpanClick}
                   selectedSpanNodeId={selectedSpanNodeId}
-                  f
+                  nestingLevel={nestingLevel + 1}
                 />
               </li>
             );
@@ -111,19 +173,32 @@ function SpanTreeItem<TSpan extends ISpanItem>(props: {
   );
 }
 
-function SpanNodeWrap(props: PropsWithChildren<{ isSelected: boolean }>) {
+function SpanNodeWrap(
+  props: PropsWithChildren<{ isSelected: boolean; nestingLevel: number }>
+) {
   return (
     <div
       className={props.isSelected ? "is-selected" : ""}
       css={css`
-        background-color: green;
-
-        border-color: var(--ac-global-color-grey-300);
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        gap: var(--ac-global-dimension-static-size-100);
+        padding-right: var(--ac-global-dimension-static-size-100);
+        padding-top: var(--ac-global-dimension-static-size-100);
+        padding-bottom: var(--ac-global-dimension-static-size-100);
+        border-left: 4px solid transparent;
+        box-sizing: border-box;
         &:hover {
-          background-color: var(--ac-global-color-grey-300);
+          background-color: var(--ac-global-color-grey-200);
         }
         &.is-selected {
-          background-color: var(--ac-global-color-primary-500);
+          background-color: var(--ac-global-color-primary-300);
+          border-color: var(--ac-global-color-primary);
+        }
+        & > *:first-child {
+          margin-left: ${props.nestingLevel * NESTING_INDENT + 16}px;
         }
       `}
     >
@@ -137,8 +212,10 @@ function SpanNodeWrap(props: PropsWithChildren<{ isSelected: boolean }>) {
  */
 function SpanTreeEdgeConnector({
   statusCode,
+  nestingLevel,
 }: {
   statusCode: SpanStatusCodeType;
+  nestingLevel: number;
 }) {
   return (
     <div
@@ -149,17 +226,24 @@ function SpanTreeEdgeConnector({
         border-left: 1px solid
           ${statusCode === "ERROR"
             ? theme.colors.statusDanger
-            : "rgb(204, 204, 204)"};
+            : "var(--ac-global-color-grey-700)"};
         top: 0;
-        left: -39px;
+        left: ${nestingLevel * NESTING_INDENT + 29}px;
         width: 42px;
         bottom: 0;
+        z-index: 1;
       `}
     ></div>
   );
 }
 
-function SpanTreeEdge({ statusCode }: { statusCode: SpanStatusCodeType }) {
+function SpanTreeEdge({
+  nestingLevel,
+  statusCode,
+}: {
+  statusCode: SpanStatusCodeType;
+  nestingLevel: number;
+}) {
   return (
     <div
       aria-hidden="true"
@@ -167,71 +251,70 @@ function SpanTreeEdge({ statusCode }: { statusCode: SpanStatusCodeType }) {
         const color =
           statusCode === "ERROR"
             ? theme.colors.statusDanger
-            : "rgb(204, 204, 204)";
+            : "var(--ac-global-color-grey-700)";
         return css`
           position: absolute;
           border-left: 1px solid ${color};
           border-bottom: 1px solid ${color};
-          border-radius: 0 0 0 20px;
-          top: -24px;
-          left: -39px;
-          width: 38px;
-          height: 45px;
+          border-radius: 0 0 0 11px;
+          top: -5px;
+          left: ${nestingLevel * NESTING_INDENT + 29}px;
+          width: 15px;
+          height: 24px;
         `;
       }}
     ></div>
   );
 }
 
-interface SpanItemProps {
-  name: string;
-  spanKind: string;
-  latencyMs: number | null;
-  statusCode: SpanStatusCodeType;
-  tokenCountTotal?: number | null;
-  tokenCountPrompt?: number | null;
-  tokenCountCompletion?: number | null;
-}
+const spanControlsCSS = css`
+  width: 20px;
+  flex: none;
+`;
 
-export function SpanItem(props: SpanItemProps) {
-  const {
-    name,
-    latencyMs,
-    statusCode,
-    tokenCountTotal,
-    tokenCountPrompt,
-    tokenCountCompletion,
-  } = props;
+const collapseButtonCSS = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--ac-global-text-color-900);
+  border-radius: 4px;
+  transition: transform 0.2s;
+  transition: background-color 0.5s;
+  flex: none;
+  background-color: rgba(0, 0, 0, 0.1);
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+  &.is-collapsed {
+    transform: rotate(-90deg);
+  }
+`;
+
+function CollapseToggleButton({
+  isCollapsed,
+  onClick,
+}: {
+  isCollapsed: boolean;
+  onClick: () => void;
+}) {
   return (
-    <View height="size-500" width="100%">
-      <Flex
-        direction="row"
-        gap="size-150"
-        width="100%"
-        height="100%"
-        alignItems="center"
-      >
-        <View flex="1 1 auto">
-          <div
-            css={css`
-              float: left;
-            `}
-          >
-            <Text>{name}</Text>
-          </div>
-        </View>
-        {typeof tokenCountTotal === "number" ? (
-          <TokenCount
-            tokenCountTotal={tokenCountTotal}
-            tokenCountPrompt={tokenCountPrompt ?? 0}
-            tokenCountCompletion={tokenCountCompletion ?? 0}
-          />
-        ) : null}
-        {latencyMs === null ? null : <LatencyText latencyMs={latencyMs} />}
-        {statusCode === "ERROR" ? (
-          <SpanStatusCodeIcon statusCode="ERROR" />
-        ) : null}
-      </Flex>
-    </View>
+    <button
+      onClick={(e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        onClick();
+      }}
+      className={classNames("button--reset", {
+        "is-collapsed": isCollapsed,
+      })}
+      css={collapseButtonCSS}
+    >
+      <Icon svg={<Icons.ArrowIosDownwardOutline />} />
+    </button>
   );
 }
diff --git a/app/src/pages/trace/SpanDetails.tsx b/app/src/pages/trace/SpanDetails.tsx
index b2601f7e88..6e5803d75a 100644
--- a/app/src/pages/trace/SpanDetails.tsx
+++ b/app/src/pages/trace/SpanDetails.tsx
@@ -255,31 +255,27 @@ export function SpanDetails({
                 projectId={projectId}
               />
             ) : null}
+            <TooltipTrigger placement="top" offset={5}>
+              <Button
+                variant="default"
+                aria-label="Toggle showing span details"
+                onClick={() => {
+                  setShowSpanAside(!showSpanAside);
+                }}
+                icon={
+                  <Icon
+                    svg={showSpanAside ? <Icons.SlideIn /> : <Icons.SlideOut />}
+                  />
+                }
+              />
+              <Tooltip>
+                {showSpanAside ? "Hide Span Details" : "Show Span Details"}
+              </Tooltip>
+            </TooltipTrigger>
           </Flex>
         </Flex>
       </View>
-      <Tabs
-        extra={
-          <TooltipTrigger placement="start" offset={5}>
-            <Button
-              variant="default"
-              size="compact"
-              aria-label="Toggle showing span details"
-              onClick={() => {
-                setShowSpanAside(!showSpanAside);
-              }}
-              icon={
-                <Icon
-                  svg={showSpanAside ? <Icons.SlideIn /> : <Icons.SlideOut />}
-                />
-              }
-            />
-            <Tooltip>
-              {showSpanAside ? "Hide Span Details" : "Show Span Details"}
-            </Tooltip>
-          </TooltipTrigger>
-        }
-      >
+      <Tabs>
         <TabPane name={"Info"}>
           <Flex direction="row" height="100%">
             <SpanInfoWrap>
diff --git a/app/src/pages/trace/TraceDetails.tsx b/app/src/pages/trace/TraceDetails.tsx
index a87fa122f9..140aa85b6e 100644
--- a/app/src/pages/trace/TraceDetails.tsx
+++ b/app/src/pages/trace/TraceDetails.tsx
@@ -138,7 +138,7 @@ export function TraceDetails(props: TraceDetailsProps) {
           overflow: hidden;
         `}
       >
-        <Panel defaultSize={30} minSize={10} maxSize={40}>
+        <Panel defaultSize={30} minSize={10} maxSize={70}>
           <ScrollingPanelContent>
             <TraceTree
               spans={spansList}

From 96b7dff31a551041d80a09a38beee20455f5f569 Mon Sep 17 00:00:00 2001
From: Mikyo King <mikyo@arize.com>
Date: Thu, 1 Aug 2024 18:16:11 -0600
Subject: [PATCH 3/3] fix timestamps

---
 app/src/pages/trace/SpanAside.tsx | 2 +-
 app/src/utils/timeFormatUtils.ts  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/src/pages/trace/SpanAside.tsx b/app/src/pages/trace/SpanAside.tsx
index 4f92262d2b..4084bb701e 100644
--- a/app/src/pages/trace/SpanAside.tsx
+++ b/app/src/pages/trace/SpanAside.tsx
@@ -74,7 +74,7 @@ export function SpanAside(props: { span: SpanAside_span$key }) {
       borderColor="dark"
       backgroundColor="dark"
       borderLeftWidth="thin"
-      width="210px"
+      width="230px"
       flex="none"
       minHeight="100%"
     >
diff --git a/app/src/utils/timeFormatUtils.ts b/app/src/utils/timeFormatUtils.ts
index 2b9ff66e93..49b87872b8 100644
--- a/app/src/utils/timeFormatUtils.ts
+++ b/app/src/utils/timeFormatUtils.ts
@@ -4,7 +4,7 @@ import { timeFormat } from "d3-time-format";
  * Formats time to be displayed in full
  * e.x. in a tooltip
  */
-export const fullTimeFormatter = timeFormat("%x %H:%M %p");
+export const fullTimeFormatter = timeFormat("%x %H:%M:%S %p");
 
 /**
  * Formats time to be displayed in short (no year or date)