some requested changes

src/Aspire.Dashboard/Components/Controls/Resources/SelectResourceTypes.razor

@@ -0,0 +1,40 @@
+@namespace Aspire.Dashboard.Components
+
+@using System.Collections.Concurrent
+@using Aspire.Dashboard.Resources
+
+@inject IStringLocalizer<ControlsStrings> ControlsStringsLoc
+
+<FluentStack Orientation="Orientation.Vertical">
+    <FluentCheckbox Label="@ControlsStringsLoc[nameof(ControlsStrings.All)]"
+                    ThreeState="true"
+                    ShowIndeterminate="false"
+                    onkeydown="e => console.log(e)"
+                    ThreeStateOrderUncheckToIntermediate="true"
+                    @bind-CheckState:get="@AreAllTypesVisible()"
+                    @bind-CheckState:set="@OnAllResourceTypesCheckedChanged"
+                     />
+    @foreach (var (resourceType, _) in AllResourceTypes)
+    {
+        var isChecked = VisibleResourceTypes.ContainsKey(resourceType);
+        <FluentCheckbox Label="@resourceType"
+                        @bind-Value:get="@isChecked"
+                        @bind-Value:set="@(c => OnResourceTypeVisibilityChangedAsync(resourceType, c))" />
+    }
+</FluentStack>
+@code {
+    [Parameter, EditorRequired]
+    public required ConcurrentDictionary<string,bool> AllResourceTypes { get; set; }
+
+    [Parameter, EditorRequired]
+    public required Func<bool?> AreAllTypesVisible { get; set; }
+
+    [Parameter, EditorRequired]
+    public required ConcurrentDictionary<string,bool> VisibleResourceTypes { get; set; }
+
+    [Parameter, EditorRequired]
+    public required Action<bool?> OnAllResourceTypesCheckedChanged { get; set; }
+
+    [Parameter, EditorRequired]
+    public required Func<string, bool,Task> OnResourceTypeVisibilityChangedAsync { get; set; }
+}

src/Aspire.Dashboard/Components/Controls/SummaryDetailsView.razor.cs

@@ -2,6 +2,7 @@
 // The .NET Foundation licenses this file to you under the MIT license.
 
 using System.Globalization;
+using Aspire.Dashboard.Components.Resize;
 using Aspire.Dashboard.Model;
 using Aspire.Dashboard.Utils;
 using Microsoft.AspNetCore.Components;

src/Aspire.Dashboard/Components/Layout/AspirePageContentLayout.razor

@@ -7,7 +7,7 @@
     @if (ViewportInformation.IsDesktop)
     {
         <div style="grid-area: page-header">
-            @if (AddNewlineOnDesktopToolbar)
+            @if (AddNewlineOnToolbar)
             {
                 @PageTitleSection
 
@@ -38,7 +38,7 @@
     else
     {
         <FluentToolbar Orientation="Orientation.Horizontal" Style="grid-area: page-header">
-            @if (MobilePageTitleToolbarSection is null)
+            @if (MobilePageTitleToolbarSection is null && (MobileToolbarButtonText is null || !AddNewlineOnToolbar))
             {
                 @PageTitleSection
 

src/Aspire.Dashboard/Components/Layout/AspirePageContentLayout.razor.cs

@@ -1,7 +1,7 @@
 // Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the MIT license.
 
-using Aspire.Dashboard.Model;
+using Aspire.Dashboard.Components.Resize;
 using Aspire.Dashboard.Resources;
 using Microsoft.AspNetCore.Components;
 using Microsoft.FluentUI.AspNetCore.Components;
@@ -18,7 +18,7 @@ public partial class AspirePageContentLayout : ComponentBase
     [Parameter] public RenderFragment? MobilePageTitleToolbarSection { get; set; }
 
     [Parameter] public RenderFragment? ToolbarSection { get; set; }
-    [Parameter] public bool AddNewlineOnDesktopToolbar { get; set; }
+    [Parameter] public bool AddNewlineOnToolbar { get; set; }
 
     [Parameter] public RenderFragment? MainSection { get; set; }
 
@@ -53,7 +53,7 @@ private async Task OpenMobileToolbarAsync()
             new DialogParameters
             {
                 Alignment = HorizontalAlignment.Center,
-                Title = ControlsStringsLoc[nameof(ControlsStrings.ChartContainerFiltersHeader)],
+                Title = MobileToolbarButtonText ?? ControlsStringsLoc[nameof(ControlsStrings.ChartContainerFiltersHeader)],
                 Width = "100%",
                 Height = "90%",
                 Modal = false,

src/Aspire.Dashboard/Components/Layout/MainLayout.razor.cs

@@ -2,6 +2,7 @@
 // The .NET Foundation licenses this file to you under the MIT license.
 
 using Aspire.Dashboard.Components.Dialogs;
+using Aspire.Dashboard.Components.Resize;
 using Aspire.Dashboard.Configuration;
 using Aspire.Dashboard.Model;
 using Aspire.Dashboard.Utils;

src/Aspire.Dashboard/Components/Layout/MobileLayout.razor

@@ -8,7 +8,7 @@
 @inject NavigationManager NavigationManager
 @inject IDashboardClient DashboardClient
 
-<div class="layout">
+<div class="layout" style="@(_isNavMenuOpen ? "overflow: hidden;" : string.Empty)">
     <div class="aspire-icon">
         <FluentAnchor Appearance="Appearance.Stealth" Href="/" Class="logo"
                       title="@Loc[nameof(Layout.MainLayoutAspire)]"

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

@@ -8,7 +8,7 @@
 
 <PageTitle><ApplicationName ResourceName="@nameof(Dashboard.Resources.ConsoleLogs.ConsoleLogsPageTitle)" Loc="@Loc" /></PageTitle>
 
-<AspirePageContentLayout AddNewlineOnDesktopToolbar="true">
+<AspirePageContentLayout AddNewlineOnToolbar="true">
     <PageTitleSection>
         <h1 class="page-header">@Loc[nameof(Dashboard.Resources.ConsoleLogs.ConsoleLogsHeader)]</h1>
     </PageTitleSection>

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

@@ -5,6 +5,7 @@
 using System.Collections.Immutable;
 using System.Diagnostics;
 using Aspire.Dashboard.Components.Controls;
+using Aspire.Dashboard.Components.Resize;
 using Aspire.Dashboard.Model;
 using Aspire.Dashboard.Model.Otlp;
 using Aspire.Dashboard.Otlp.Model;

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

@@ -12,7 +12,7 @@
 
 <PageTitle><ApplicationName ResourceName="@nameof(Dashboard.Resources.Metrics.MetricsPageTitle)" Loc="@Loc" /></PageTitle>
 
-<AspirePageContentLayout AddNewlineOnDesktopToolbar="true">
+<AspirePageContentLayout AddNewlineOnToolbar="true">
     <PageTitleSection>
         <h1 class="page-header">@Loc[nameof(Dashboard.Resources.Metrics.MetricsHeader)]</h1>
     </PageTitleSection>

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

@@ -3,6 +3,7 @@
 @using Aspire.Dashboard.Resources
 @using Aspire.Dashboard.Utils
 @using System.Globalization
+@using Aspire.Dashboard.Components.Resize
 @using Humanizer
 @inject IStringLocalizer<Dashboard.Resources.Resources> Loc
 @inject IStringLocalizer<ControlsStrings> ControlsStringsLoc
@@ -32,68 +33,35 @@
         else
         {
             <div>
-                <h4>@(AreAllTypesVisible is true ? Loc[nameof(Dashboard.Resources.Resources.ResourcesTypeFilterAllVisible)] : Loc[nameof(Dashboard.Resources.Resources.ResourcesTypeFiltered)])</h4>
+                <h5>@Loc[nameof(Dashboard.Resources.Resources.ResourcesResourceTypesHeader)]</h5>
 
-                <FluentStack Orientation="Orientation.Vertical">
-                    <FluentCheckbox
-                        Label="@ControlsStringsLoc[nameof(ControlsStrings.All)]"
-                        ThreeState="true"
-                        ShowIndeterminate="false"
-                        ThreeStateOrderUncheckToIntermediate="true"
-                        @bind-CheckState="AreAllTypesVisible"/>
-                    @foreach (var (resourceType, _) in _allResourceTypes)
-                    {
-                        var isChecked = _visibleResourceTypes.ContainsKey(resourceType);
-                        <FluentCheckbox
-                            Label="@resourceType"
-                            @bind-Value:get="isChecked"
-                            @bind-Value:set="c => OnResourceTypeVisibilityChangedAsync(resourceType, c)"/>
-                    }
-                </FluentStack>
+                <SelectResourceTypes
+                    AllResourceTypes="_allResourceTypes"
+                    VisibleResourceTypes="_visibleResourceTypes"
+                    OnAllResourceTypesCheckedChanged="@(b => AreAllTypesVisible = b)"
+                    AreAllTypesVisible="@(() => AreAllTypesVisible)"
+                    OnResourceTypeVisibilityChangedAsync="@OnResourceTypeVisibilityChangedAsync" />
             </div>
         }
 
-
-            @if (ViewportInformation.IsDesktop)
-            {
-                <FluentSearch Placeholder="@ControlsStringsLoc[nameof(ControlsStrings.FilterPlaceholder)]"
-                              Immediate="true"
-                              @bind-Value="_filter"
-                              slot="end"
-                              @bind-Value:after="HandleSearchFilterChangedAsync"/>
-            }
-            else
-            {
-                <div>
-                    <FluentSearch Placeholder="@ControlsStringsLoc[nameof(ControlsStrings.FilterPlaceholder)]"
-                                  Immediate="true"
-                                  @bind-Value="_filter"
-                                  slot="end"
-                                  Label="@ControlsStringsLoc[nameof(ControlsStrings.FilterPlaceholder)]"
-                                  @bind-Value:after="HandleSearchFilterChangedAsync"/>
-                </div>
-        }
+        <FluentSearch Placeholder="@ControlsStringsLoc[nameof(ControlsStrings.FilterPlaceholder)]"
+                      Immediate="true"
+                      @bind-Value="_filter"
+                      slot="end"
+                      Label="@(ViewportInformation.IsDesktop ? null : ControlsStringsLoc[nameof(ControlsStrings.FilterPlaceholder)].Value)"
+                      @bind-Value:after="HandleSearchFilterChangedAsync"/>
     </ToolbarSection>
 
     <MainSection>
         <FluentPopover AnchorId="typeFilterButton" @bind-Open="_isTypeFilterVisible" AutoFocus="true">
             <Header>@Loc[nameof(Dashboard.Resources.Resources.ResourcesResourceTypesHeader)]</Header>
             <Body>
-            <FluentStack Orientation="Orientation.Vertical">
-                <FluentCheckbox Label="@ControlsStringsLoc[nameof(ControlsStrings.All)]"
-                                ThreeState="true"
-                                ShowIndeterminate="false"
-                                onkeydown="e => console.log(e)"
-                                ThreeStateOrderUncheckToIntermediate="true"
-                                @bind-CheckState="AreAllTypesVisible" />
-                @foreach (var (resourceType, _) in _allResourceTypes)
-                {
-                    var isChecked = _visibleResourceTypes.ContainsKey(resourceType);
-                    <FluentCheckbox Label="@resourceType"
-                                    @bind-Value:get="isChecked"
-                                    @bind-Value:set="c => OnResourceTypeVisibilityChangedAsync(resourceType, c)" />
-                }
-            </FluentStack>
+                <SelectResourceTypes
+                    AllResourceTypes="_allResourceTypes"
+                    VisibleResourceTypes="_visibleResourceTypes"
+                    OnAllResourceTypesCheckedChanged="@(b => AreAllTypesVisible = b)"
+                    AreAllTypesVisible="@(() => AreAllTypesVisible)"
+                    OnResourceTypeVisibilityChangedAsync="@OnResourceTypeVisibilityChangedAsync" />
             </Body>
         </FluentPopover>
 

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

@@ -5,6 +5,7 @@
 using System.Diagnostics;
 using System.Globalization;
 using System.Text;
+using Aspire.Dashboard.Components.Resize;
 using Aspire.Dashboard.Model;
 using Aspire.Dashboard.Otlp.Model;
 using Aspire.Dashboard.Otlp.Storage;
@@ -116,6 +117,8 @@ static bool UnionWithKeys(ConcurrentDictionary<string, bool> left, ConcurrentDic
             {
                 _visibleResourceTypes.Clear();
             }
+
+            StateHasChanged();
         }
     }
 
@@ -228,6 +231,8 @@ private async Task ClearSelectedResourceAsync(bool causedByUserAction = false)
     {
         SelectedResource = null;
 
+        await InvokeAsync(StateHasChanged);
+
         if (_elementIdBeforeDetailsViewOpened is not null && causedByUserAction)
         {
             await JS.InvokeVoidAsync("focusElement", _elementIdBeforeDetailsViewOpened);

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

@@ -18,7 +18,7 @@
 
 <AspirePageContentLayout
     @ref="@_pageContentLayout"
-    AddNewlineOnDesktopToolbar="true"
+    AddNewlineOnToolbar="true"
     ShouldShowFooter="@(SelectedLogEntry is null)"
     IsSummaryDetailsViewOpen="@(SelectedLogEntry is not null)">
     <PageTitleSection>

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

@@ -3,6 +3,7 @@
 
 using Aspire.Dashboard.Components.Dialogs;
 using Aspire.Dashboard.Components.Layout;
+using Aspire.Dashboard.Components.Resize;
 using Aspire.Dashboard.Extensions;
 using Aspire.Dashboard.Model;
 using Aspire.Dashboard.Model.Otlp;

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

@@ -13,7 +13,7 @@
 @if (_trace is { } trace)
 {
     <AspirePageContentLayout
-        AddNewlineOnDesktopToolbar="true"
+        AddNewlineOnToolbar="true"
         MobileToolbarButtonText="@Loc[nameof(Dashboard.Resources.TraceDetail.TraceDetailMobileToolbarButtonText)]"
         IsSummaryDetailsViewOpen="@(SelectedSpan is not null)">
         <PageTitleSection>

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

@@ -13,7 +13,7 @@
 
 <PageTitle><ApplicationName ResourceName="@nameof(Dashboard.Resources.Traces.TracesPageTitle)" Loc="@Loc" /></PageTitle>
 
-<AspirePageContentLayout AddNewlineOnDesktopToolbar="true">
+<AspirePageContentLayout AddNewlineOnToolbar="true">
     <PageTitleSection>
         <h1 class="page-header">@Loc[nameof(Dashboard.Resources.Traces.TracesHeader)]</h1>
     </PageTitleSection>

src/Aspire.Dashboard/Components/Resize/BrowserDimensionWatcher.razor.cs

@@ -1,22 +1,18 @@
 // Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the MIT license.
 
-using Aspire.Dashboard.Model;
 using Microsoft.AspNetCore.Components;
 using Microsoft.JSInterop;
 
 namespace Aspire.Dashboard.Components.Resize;
 
 public class BrowserDimensionWatcher : ComponentBase
 {
-    [Parameter]
-    public ViewportInformation? ViewportInformation { get; set; }
+    [Parameter] public ViewportInformation? ViewportInformation { get; set; }
 
-    [Parameter]
-    public EventCallback<ViewportInformation?> ViewportInformationChanged { get; set; }
+    [Parameter] public EventCallback<ViewportInformation?> ViewportInformationChanged { get; set; }
 
-    [Inject]
-    public required IJSRuntime JS { get; init; }
+    [Inject] public required IJSRuntime JS { get; init; }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
@@ -35,20 +31,24 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     [JSInvokable]
     public async Task OnResizeAsync(ViewportSize viewportSize)
     {
-        if (ViewportInformation?.Width == viewportSize.Width && ViewportInformation?.Height == viewportSize.Height)
+        var newViewportInformation = GetViewportInformation(viewportSize);
+
+        if (newViewportInformation.IsDesktop != ViewportInformation!.IsDesktop || newViewportInformation.IsUltraLowHeight != ViewportInformation.IsUltraLowHeight)
         {
-            return;
+            ViewportInformation = newViewportInformation;
+            await ViewportInformationChanged.InvokeAsync(newViewportInformation);
         }
-
-        ViewportInformation = GetViewportInformation(viewportSize);
-        await ViewportInformationChanged.InvokeAsync(ViewportInformation);
     }
 
     private static ViewportInformation GetViewportInformation(ViewportSize viewportSize)
     {
-        return new ViewportInformation(viewportSize.Height, viewportSize.Width);
+        return new ViewportInformation(IsDesktop: viewportSize.Width > 768, IsUltraLowHeight: viewportSize.Height < 400);
+    }
+
+    public static ViewportInformation Create(int height, int width)
+    {
+        return new ViewportInformation(IsDesktop: width > 768, IsUltraLowHeight: height < 400);
     }
 
     public record ViewportSize(int Width, int Height);
 }
-

src/Aspire.Dashboard/Model/ViewportInformation.cs → src/Aspire.Dashboard/Components/Resize/ViewportInformation.cs

@@ -1,18 +1,19 @@
-// Licensed to the .NET Foundation under one or more agreements.
+// Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the MIT license.
 
-namespace Aspire.Dashboard.Model;
+namespace Aspire.Dashboard.Components.Resize;
 
-public record ViewportInformation(int Height, int Width)
+public record ViewportInformation(bool IsDesktop, bool IsUltraLowHeight)
 {
-    // set our mobile cutoff at 768 pixels, which is ~medium tablet size
-    public bool IsDesktop => Width > 768;
+    /// <summary>
+    /// Set our mobile cutoff at 768 pixels, which is ~medium tablet size
+    /// </summary>
+    public bool IsDesktop { get; set; } = IsDesktop;
 
     /// <summary>
     /// Ultra low height is users with very high zooms and/or very low resolutions,
     /// where the height is significantly constrained. In these cases, the users need the entire main page content
     /// (toolbar, title, main content, footer) to be scrollable, rather than just the main content.
-    ///
     /// </summary>
-    public bool IsUltraLowHeight => Height < 400;
+    public bool IsUltraLowHeight { get; set; } = IsUltraLowHeight;
 }

src/Aspire.Dashboard/Resources/TraceDetail.resx

@@ -141,6 +141,6 @@
     <comment>{0} is an identifier</comment>
   </data>
   <data name="TraceDetailMobileToolbarButtonText" xml:space="preserve">
-    <value>View trace details</value>
+    <value>Trace details</value>
   </data>
 </root>