Allow collapsing operations in the trace view

Author: stbau04

src/Aspire.Dashboard/Components/Pages/TraceDetail.razor

@@ -56,21 +56,29 @@
                 <FluentDataGrid Class="trace-view-grid" ResizableColumns="true" ItemsProvider="@GetData" TGridItem="SpanWaterfallViewModel" RowClass="@GetRowClass" GridTemplateColumns="2fr 6fr">
                     <TemplateColumn Title="Name">
                         <div class="col-long-content" title="@context.GetTooltip()" @onclick="() => OnShowProperties(context)">
-                            <span class="span-name-container" style="@($"margin-left: {(context.Depth - 1) * 15}px; border-left-color: {ColorGenerator.Instance.GetColorHexByKey(GetResourceName(context.Span.Source))};")">
-                                @if (context.IsError)
-                                {
-                                    <FluentIcon Icon="Icons.Filled.Size12.ErrorCircle" Color="Color.Error" Class="trace-tag-icon" />
-                                }
-                                @GetResourceName(context.Span.Source)
-                                @if (context.HasUninstrumentedPeer)
-                                {
-                                    <span class="uninstrumented-peer">
-                                        <FluentIcon Style="@($"fill: {ColorGenerator.Instance.GetColorHexByKey(context.UninstrumentedPeer)};")" Icon="Icons.Filled.Size16.ArrowCircleRight" Class="uninstrumented-peer-icon" />
-                                        @context.UninstrumentedPeer
-                                    </span>
-                                }
-                                <span class="span-row-name">@context.GetDisplaySummary()</span>
-                            </span>
+                            <div style="@($"margin-left: {(context.Depth - 1) * 15}px;")">
+                                <span class="span-collapse-symbol" @onclick="() => OnToggleCollapse(context)" @onclick:stopPropagation="true">
+                                    @if (context.Children.Count > 0)
+                                    {
+                                        @(context.IsCollapsed ? '+' : '-')
+                                    }
+                                </span>
+                                <span class="span-name-container" style="@($"border-left-color: {ColorGenerator.Instance.GetColorHexByKey(GetResourceName(context.Span.Source))};")">
+                                    @if (context.IsError)
+                                    {
+                                        <FluentIcon Icon="Icons.Filled.Size12.ErrorCircle" Color="Color.Error" Class="trace-tag-icon" />
+                                    }
+                                    @GetResourceName(context.Span.Source)
+                                    @if (context.HasUninstrumentedPeer)
+                                    {
+                                        <span class="uninstrumented-peer">
+                                            <FluentIcon Style="@($"fill: {ColorGenerator.Instance.GetColorHexByKey(context.UninstrumentedPeer)};")" Icon="Icons.Filled.Size16.ArrowCircleRight" Class="uninstrumented-peer-icon" />
+                                            @context.UninstrumentedPeer
+                                        </span>
+                                    }
+                                    <span class="span-row-name">@context.GetDisplaySummary()</span>
+                                </span>
+                            </div>
                         </div>
                     </TemplateColumn>
                     <TemplateColumn>

src/Aspire.Dashboard/Components/Pages/TraceDetail.razor.cs

@@ -49,9 +49,10 @@ private ValueTask<GridItemsProviderResult<SpanWaterfallViewModel>> GetData(GridI
     {
         Debug.Assert(_spanWaterfallViewModels != null);
 
+        var visibleSpanWaterfallViewModels = _spanWaterfallViewModels.Where(viewModel => !viewModel.IsHidden).ToList();
         return ValueTask.FromResult(new GridItemsProviderResult<SpanWaterfallViewModel>
         {
-            Items = _spanWaterfallViewModels,
+            Items = visibleSpanWaterfallViewModels,
             TotalItemCount = _spanWaterfallViewModels.Count
         });
     }
@@ -72,15 +73,19 @@ private static List<SpanWaterfallViewModel> CreateSpanWaterfallViewModels(OtlpTr
 
         return orderedSpans;
 
-        static void AddSelfAndChildren(List<SpanWaterfallViewModel> orderedSpans, OtlpSpan span, int depth, IEnumerable<IOutgoingPeerResolver> outgoingPeerResolvers, Func<OtlpSpan, int, IEnumerable<IOutgoingPeerResolver>, SpanWaterfallViewModel> createViewModel)
+        static SpanWaterfallViewModel AddSelfAndChildren(List<SpanWaterfallViewModel> orderedSpans, OtlpSpan span, int depth, IEnumerable<IOutgoingPeerResolver> outgoingPeerResolvers, Func<OtlpSpan, int, IEnumerable<IOutgoingPeerResolver>, SpanWaterfallViewModel> createViewModel)
         {
-            orderedSpans.Add(createViewModel(span, depth, outgoingPeerResolvers));
+            var viewModel = createViewModel(span, depth, outgoingPeerResolvers);
+            orderedSpans.Add(viewModel);
             depth++;
 
             foreach (var child in span.GetChildSpans().OrderBy(s => s.StartTime))
             {
-                AddSelfAndChildren(orderedSpans, child, depth, outgoingPeerResolvers, createViewModel);
+                var childViewModel = AddSelfAndChildren(orderedSpans, child, depth, outgoingPeerResolvers, createViewModel);
+                viewModel.Children.Add(childViewModel);
             }
+
+            return viewModel;
         }
 
         static SpanWaterfallViewModel CreateViewModel(OtlpSpan span, int depth, IEnumerable<IOutgoingPeerResolver> outgoingPeerResolvers)
@@ -103,6 +108,7 @@ static SpanWaterfallViewModel CreateViewModel(OtlpSpan span, int depth, IEnumera
 
             var viewModel = new SpanWaterfallViewModel
             {
+                Children = [],
                 Span = span,
                 LeftOffset = leftOffset,
                 Width = width,
@@ -181,6 +187,11 @@ private string GetRowClass(SpanWaterfallViewModel viewModel)
 
     public SpanDetailsViewModel? SelectedSpan { get; set; }
 
+    private static void OnToggleCollapse(SpanWaterfallViewModel viewModel)
+    {
+        viewModel.IsCollapsed = !viewModel.IsCollapsed;
+    }
+
     private void OnShowProperties(SpanWaterfallViewModel viewModel)
     {
         if (SelectedSpan?.Span == viewModel.Span)

src/Aspire.Dashboard/Components/Pages/TraceDetail.razor.css

@@ -86,9 +86,19 @@
     grid-row: 1;
 }
 
+::deep .span-collapse-symbol {
+    display: inline-block;
+    width: 20px;
+    text-align: center;
+    padding: 0px 5px;
+    line-height: 28px;
+    user-select: none;
+}
+
 ::deep .span-name-container {
     border-left-width: 5px;
     border-left-style: solid;
+    margin-left: -3px;
     padding-left: 5px;
     line-height: 28px;
 }

src/Aspire.Dashboard/Model/Otlp/SpanWaterfallViewModel.cs

@@ -9,16 +9,29 @@ namespace Aspire.Dashboard.Model.Otlp;
 
 public sealed class SpanWaterfallViewModel
 {
+    public required List<SpanWaterfallViewModel> Children { get; init; }
     public required OtlpSpan Span { get; init; }
     public required double LeftOffset { get; init; }
     public required double Width { get; init; }
     public required int Depth { get; init; }
     public required bool LabelIsRight { get; init; }
     public required string? UninstrumentedPeer { get; init; }
+    public bool IsHidden { get; private set; }
     [MemberNotNullWhen(true, nameof(UninstrumentedPeer))]
     public bool HasUninstrumentedPeer => !string.IsNullOrEmpty(UninstrumentedPeer);
     public bool IsError => Span.Status == OtlpSpanStatusCode.Error;
 
+    private bool _isCollapsed;
+    public bool IsCollapsed
+    {
+        get => _isCollapsed;
+        set
+        {
+            _isCollapsed = value;
+            UpdateHidden();
+        }
+    }
+
     public string GetTooltip()
     {
         var tooltip = $"{Span.Source.ApplicationName}: {GetDisplaySummary()}";
@@ -86,4 +99,10 @@ public string GetDisplaySummary()
 
         return Span.Name;
     }
+
+    private void UpdateHidden(bool isParentCollapsed = false)
+    {
+        IsHidden = isParentCollapsed;
+        Children.ForEach(child => child.UpdateHidden(isParentCollapsed || IsCollapsed));
+    }
 }