Collapsable trace tree

app-server/src/features/mod.rs

@@ -10,6 +10,8 @@ pub enum Feature {
     Storage,
     /// Build all containers. If false, only lite part is used: app-server, postgres, frontend
     FullBuild,
+    /// Machine manager to spin up and manage machines
+    MachineManager,
 }
 
 pub fn is_feature_enabled(feature: Feature) -> bool {
@@ -27,5 +29,6 @@ pub fn is_feature_enabled(feature: Feature) -> bool {
                 .expect("ENVIRONMENT must be set")
                 .as_str(),
         ),
+        Feature::MachineManager => env::var("MACHINE_MANAGER_URL_GRPC").is_ok(),
     }
 }

app-server/src/main.rs

@@ -293,7 +293,7 @@ fn main() -> anyhow::Result<()> {
                 };
 
                 let machine_manager: Arc<dyn MachineManager> =
-                    if is_feature_enabled(Feature::FullBuild) {
+                    if is_feature_enabled(Feature::MachineManager) {
                         let machine_manager_url_grpc = env::var("MACHINE_MANAGER_URL_GRPC")
                             .expect("MACHINE_MANAGER_URL_GRPC must be set");
                         let machine_manager_client = Arc::new(

frontend/components/traces/span-card.tsx

@@ -1,3 +1,4 @@
+import { ChevronDown, ChevronRight } from 'lucide-react';
 import React, { useEffect, useRef, useState } from 'react';
 
 import { getDurationString } from '@/lib/flow/utils';
@@ -18,6 +19,8 @@ interface SpanCardProps {
   depth: number;
   selectedSpan?: Span | null;
   onSpanSelect?: (span: Span) => void;
+  collapsedSpans: Set<string>;
+  onToggleCollapse?: (spanId: string) => void;
 }
 
 export function SpanCard({
@@ -27,19 +30,23 @@ export function SpanCard({
   onSpanSelect,
   containerWidth,
   depth,
-  selectedSpan
+  selectedSpan,
+  collapsedSpans,
+  onToggleCollapse
 }: SpanCardProps) {
   const [isSelected, setIsSelected] = useState(false);
   const [segmentHeight, setSegmentHeight] = useState(0);
   const ref = useRef<HTMLDivElement>(null);
 
   const childrenSpans = childSpans[span.spanId];
 
+  const hasChildren = childrenSpans && childrenSpans.length > 0;
+
   useEffect(() => {
     if (ref.current) {
       setSegmentHeight(ref.current.getBoundingClientRect().y - parentY);
     }
-  }, [parentY]);
+  }, [parentY, collapsedSpans]);
 
   useEffect(() => {
     setIsSelected(selectedSpan?.spanId === span.spanId);
@@ -100,24 +107,43 @@ export function SpanCard({
               }}
             />
           )}
+          {hasChildren && (
+            <button
+              className="z-40 p-1 hover:bg-muted transition-all text-muted-foreground rounded-sm"
+              onClick={(e) => {
+                e.stopPropagation();
+                onToggleCollapse?.(span.spanId);
+              }}
+            >
+              {collapsedSpans.has(span.spanId) ? (
+                <ChevronRight className="h-4 w-4" />
+              ) : (
+                <ChevronDown className="h-4 w-4" />
+              )}
+            </button>
+          )}
         </div>
       </div>
-      <div className="flex flex-col">
-        {childrenSpans &&
-          childrenSpans.map((child, index) => (
-            <div className="pl-6 relative" key={index}>
-              <SpanCard
-                span={child}
-                childSpans={childSpans}
-                parentY={ref.current?.getBoundingClientRect().y || 0}
-                onSpanSelect={onSpanSelect}
-                containerWidth={containerWidth}
-                selectedSpan={selectedSpan}
-                depth={depth + 1}
-              />
-            </div>
-          ))}
-      </div>
+      {!collapsedSpans.has(span.spanId) && (
+        <div className="flex flex-col">
+          {childrenSpans &&
+            childrenSpans.map((child, index) => (
+              <div className="pl-6 relative" key={index}>
+                <SpanCard
+                  span={child}
+                  childSpans={childSpans}
+                  parentY={ref.current?.getBoundingClientRect().y || 0}
+                  onSpanSelect={onSpanSelect}
+                  containerWidth={containerWidth}
+                  selectedSpan={selectedSpan}
+                  collapsedSpans={collapsedSpans}
+                  onToggleCollapse={onToggleCollapse}
+                  depth={depth + 1}
+                />
+              </div>
+            ))}
+        </div>
+      )}
     </div>
   );
 }

frontend/components/traces/timeline.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { getDuration } from '@/lib/flow/utils';
 import { Span } from '@/lib/traces/types';
@@ -8,6 +8,7 @@ import { SPAN_TYPE_TO_COLOR } from '@/lib/traces/utils';
 interface TimelineProps {
   spans: Span[];
   childSpans: { [key: string]: Span[] };
+  collapsedSpans: Set<string>;
 }
 
 interface SegmentEvent {
@@ -25,28 +26,30 @@ interface Segment {
 
 const HEIGHT = 32;
 
-export default function Timeline({ spans, childSpans }: TimelineProps) {
+export default function Timeline({ spans, childSpans, collapsedSpans }: TimelineProps) {
   const [segments, setSegments] = useState<Segment[]>([]);
   const [timeIntervals, setTimeIntervals] = useState<string[]>([]);
   const ref = useRef<HTMLDivElement>(null);
 
-  const traverse = (
-    span: Span,
-    childSpans: { [key: string]: Span[] },
-    orderedSpands: Span[]
-  ) => {
-    if (!span) {
-      return;
-    }
+  const traverse = useCallback(
+    (span: Span, childSpans: { [key: string]: Span[] }, orderedSpands: Span[]) => {
+      if (!span) {
+        return;
+      }
+      orderedSpands.push(span);
 
-    orderedSpands.push(span);
+      if (collapsedSpans.has(span.spanId)) {
+        return;
+      }
 
-    if (childSpans[span.spanId]) {
-      for (const child of childSpans[span.spanId]) {
-        traverse(child, childSpans, orderedSpands);
+      if (childSpans[span.spanId]) {
+        for (const child of childSpans[span.spanId]) {
+          traverse(child, childSpans, orderedSpands);
+        }
       }
-    }
-  };
+    },
+    [collapsedSpans]
+  );
 
   useEffect(() => {
     if (!ref.current || childSpans === null) {
@@ -142,7 +145,7 @@ export default function Timeline({ spans, childSpans }: TimelineProps) {
     }
 
     setSegments(segments);
-  }, [spans, childSpans]);
+  }, [spans, childSpans, collapsedSpans]);
 
   return (
     <div className="flex flex-col h-full w-full" ref={ref}>

frontend/components/traces/trace-view.tsx

@@ -49,6 +49,9 @@ export default function TraceView({ traceId, onClose }: TraceViewProps) {
       : null
   );
 
+  // Add new state for collapsed spans
+  const [collapsedSpans, setCollapsedSpans] = useState<Set<string>>(new Set());
+
   useEffect(() => {
     if (!trace) {
       return;
@@ -134,7 +137,7 @@ export default function TraceView({ traceId, onClose }: TraceViewProps) {
         traceTreePanel.current!.getBoundingClientRect().width + 1
       );
     }
-  }, [containerWidth, selectedSpan, traceTreePanel.current]);
+  }, [containerWidth, selectedSpan, traceTreePanel.current, collapsedSpans]);
 
   return (
     <div className="flex flex-col h-full w-full overflow-clip">
@@ -159,11 +162,10 @@ export default function TraceView({ traceId, onClose }: TraceViewProps) {
               variant={'outline'}
               onClick={() => {
                 setSelectedSpan(null);
-                searchParams.delete('spanId');
-                router.push(`${pathName}?${searchParams.toString()}`);
-                setTimelineWidth(
-                  container.current!.getBoundingClientRect().width
-                );
+                setTimeout(() => {
+                  searchParams.delete('spanId');
+                  router.push(`${pathName}?${searchParams.toString()}`);
+                }, 10);
               }}
             >
               Show timeline
@@ -234,6 +236,18 @@ export default function TraceView({ traceId, onClose }: TraceViewProps) {
                                     depth={1}
                                     selectedSpan={selectedSpan}
                                     containerWidth={timelineWidth}
+                                    collapsedSpans={collapsedSpans}
+                                    onToggleCollapse={(spanId) => {
+                                      setCollapsedSpans((prev) => {
+                                        const next = new Set(prev);
+                                        if (next.has(spanId)) {
+                                          next.delete(spanId);
+                                        } else {
+                                          next.add(spanId);
+                                        }
+                                        return next;
+                                      });
+                                    }}
                                     onSpanSelect={(span) => {
                                       setSelectedSpan(span);
                                       setTimelineWidth(
@@ -253,7 +267,11 @@ export default function TraceView({ traceId, onClose }: TraceViewProps) {
                         </td>
                         {!selectedSpan && !searchParams.get('spanId') && (
                           <td className="flex flex-grow w-full p-0">
-                            <Timeline spans={spans} childSpans={childSpans} />
+                            <Timeline
+                              spans={spans}
+                              childSpans={childSpans}
+                              collapsedSpans={collapsedSpans}
+                            />
                           </td>
                         )}
                       </tr>

frontend/package.json

@@ -78,7 +78,7 @@
     "next-mdx-remote": "^5.0.0",
     "next-themes": "^0.2.1",
     "postgres": "^3.4.5",
-    "posthog-js": "^1.202.2",
+    "posthog-js": "^1.205.0",
     "posthog-node": "^4.3.2",
     "re-resizable": "^6.10.3",
     "react": "^18.3.1",