From 07f39876f52a40a460b87ba9892f1b4ebe9f57a8 Mon Sep 17 00:00:00 2001
From: James Newton-King <james@newtonking.com>
Date: Sat, 30 Sep 2023 10:22:09 +0800
Subject: [PATCH 1/2] Fix subscriptions

---
 .../Components/Pages/SemanticLogs.razor       | 63 ++++++++++---------
 .../Components/Pages/Traces.razor             |  1 +
 2 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/src/Aspire.Dashboard/Components/Pages/SemanticLogs.razor b/src/Aspire.Dashboard/Components/Pages/SemanticLogs.razor
index a6c101ed3b2..cade00e3305 100644
--- a/src/Aspire.Dashboard/Components/Pages/SemanticLogs.razor
+++ b/src/Aspire.Dashboard/Components/Pages/SemanticLogs.razor
@@ -36,37 +36,35 @@
         </FluentToolbar>
         <div class="datagrid-overflow-area SemanticLogsOverflow" tabindex="-1">
             <FluentDataGrid Class="SemanticLogsDataGrid" Virtualize="true" GenerateHeader="GenerateHeaderOption.Sticky" ItemSize="48" ResizableColumns="true" ItemsProvider="@GetData" TGridItem="OtlpLogEntry" GridTemplateColumns="1fr 1fr 1fr 5fr 0.8fr 0.8fr">
-                    <ChildContent>
-                            <TemplateColumn Title="Service">
-                                <span style="padding-left:5px; border-left-width: 5px; border-left-style: solid; border-left-color: @ColorGenerator.Instance.GetColorHexByKey(context.Application.ApplicationName);">
-                                    @context.Application.ApplicationName
-                                </span>
-                            </TemplateColumn>
-                            <PropertyColumn Title="Severity" Property="@(context => context.Severity)" />
-                            <PropertyColumn Title="Timestamp" Property="@(context => OtlpHelpers.FormatTimeStamp(context.TimeStamp))" />
-                            <PropertyColumn Title="Message" Tooltip=true Property="@(context => context.Message)" />
-                            <TemplateColumn Title="Trace">
-                                @if (!string.IsNullOrEmpty(context.TraceId))
-                                {
-                                    <FluentAnchor Appearance="Appearance.Hypertext" Href="@($"/Traces/Trace/{HttpUtility.UrlEncode(context.TraceId)}")">
-                                        @OtlpHelpers.ToShortenedId(context.TraceId)
-                                    </FluentAnchor>
-                                }
-                            </TemplateColumn>
-                            <TemplateColumn>
-                                <FluentButton Appearance="Appearance.Lightweight" OnClick="() => OnShowProperties(context)">View</FluentButton>
-                            </TemplateColumn>
-                        </ChildContent>
-                        <EmptyContent>
-                            <FluentIcon Icon="Icons.Regular.Size24.SlideTextSparkle" />&nbsp;No semantic logs found
-                        </EmptyContent>
-                    </FluentDataGrid>
-                </div>
-                <TotalItemsFooter @ref="totalItemsFooter" />
-            }
-        </FluentStack>
-    </div>
-}
+                <ChildContent>
+                    <TemplateColumn Title="Service">
+                        <span style="padding-left:5px; border-left-width: 5px; border-left-style: solid; border-left-color: @ColorGenerator.Instance.GetColorHexByKey(context.Application.ApplicationName);">
+                            @context.Application.ApplicationName
+                        </span>
+                    </TemplateColumn>
+                    <PropertyColumn Title="Severity" Property="@(context => context.Severity)" />
+                    <PropertyColumn Title="Timestamp" Property="@(context => OtlpHelpers.FormatTimeStamp(context.TimeStamp))" />
+                    <PropertyColumn Title="Message" Tooltip=true Property="@(context => context.Message)" />
+                    <TemplateColumn Title="Trace">
+                        @if (!string.IsNullOrEmpty(context.TraceId))
+                        {
+                            <FluentAnchor Appearance="Appearance.Hypertext" Href="@($"/Traces/Trace/{HttpUtility.UrlEncode(context.TraceId)}")">
+                                @OtlpHelpers.ToShortenedId(context.TraceId)
+                            </FluentAnchor>
+                        }
+                    </TemplateColumn>
+                    <TemplateColumn>
+                        <FluentButton Appearance="Appearance.Lightweight" OnClick="() => OnShowProperties(context)">View</FluentButton>
+                    </TemplateColumn>
+                </ChildContent>
+                <EmptyContent>
+                    <FluentIcon Icon="Icons.Regular.Size24.SlideTextSparkle" />&nbsp;No semantic logs found
+                </EmptyContent>
+            </FluentDataGrid>
+        </div>
+        <TotalItemsFooter @ref="totalItemsFooter" />
+    </FluentStack>
+</div>
 
 @code {
     private static readonly ApplicationViewModel AllApplication = new ApplicationViewModel { Id = null, Name = "(All)" };
@@ -142,6 +140,7 @@
         _applications = TelemetryRepository.GetApplications().Select(a => new ApplicationViewModel { Id = a.InstanceId, Name = a.ApplicationName }).ToList();
         _applications.Insert(0, AllApplication);
         _selectedApplication = _applications.SingleOrDefault(e => e.Id == ApplicationInstanceId) ?? AllApplication;
+        UpdateSubscription();
 
         return Task.CompletedTask;
     }
@@ -150,6 +149,8 @@
     {
         NavigationManager.NavigateTo($"/SemanticLogs/{_selectedApplication.Id}");
         _applicationChanged = true;
+        UpdateSubscription();
+
         return Task.CompletedTask;
     }
 
diff --git a/src/Aspire.Dashboard/Components/Pages/Traces.razor b/src/Aspire.Dashboard/Components/Pages/Traces.razor
index e23b314ac72..7329ccbb0a6 100644
--- a/src/Aspire.Dashboard/Components/Pages/Traces.razor
+++ b/src/Aspire.Dashboard/Components/Pages/Traces.razor
@@ -138,6 +138,7 @@
         _applications = TelemetryRepository.GetApplications().Select(a => new ApplicationViewModel { Id = a.InstanceId, Name = a.ApplicationName }).ToList();
         _applications.Insert(0, AllApplication);
         _selectedApplication = _applications.SingleOrDefault(e => e.Id == ApplicationInstanceId) ?? AllApplication;
+        UpdateSubscription();
 
         return Task.CompletedTask;
     }

From 5d1d0a29c86fe0e9d319cb4671d040fe8ed1fa55 Mon Sep 17 00:00:00 2001
From: James Newton-King <james@newtonking.com>
Date: Sat, 30 Sep 2023 11:31:30 +0800
Subject: [PATCH 2/2] Scrolling fixes

---
 .../Components/Pages/SemanticLogs.razor             | 11 +++++++----
 src/Aspire.Dashboard/Components/Pages/Traces.razor  |  6 +++---
 src/Aspire.Dashboard/wwwroot/css/app.css            |  4 ++--
 src/Aspire.Dashboard/wwwroot/js/app.js              | 13 +++++++------
 4 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/Aspire.Dashboard/Components/Pages/SemanticLogs.razor b/src/Aspire.Dashboard/Components/Pages/SemanticLogs.razor
index cade00e3305..f5dde633a70 100644
--- a/src/Aspire.Dashboard/Components/Pages/SemanticLogs.razor
+++ b/src/Aspire.Dashboard/Components/Pages/SemanticLogs.razor
@@ -34,11 +34,11 @@
             }
             <FluentButton slot="end" Appearance="Appearance.Stealth" aria-label="Add Filter" OnClick="() => OpenFilterAsync(null)"><FluentIcon Value="@(new Icons.Regular.Size16.Filter())" /></FluentButton>
         </FluentToolbar>
-        <div class="datagrid-overflow-area SemanticLogsOverflow" tabindex="-1">
+        <div class="datagrid-overflow-area continuous-scroll-overflow" tabindex="-1">
             <FluentDataGrid Class="SemanticLogsDataGrid" Virtualize="true" GenerateHeader="GenerateHeaderOption.Sticky" ItemSize="48" ResizableColumns="true" ItemsProvider="@GetData" TGridItem="OtlpLogEntry" GridTemplateColumns="1fr 1fr 1fr 5fr 0.8fr 0.8fr">
                 <ChildContent>
                     <TemplateColumn Title="Service">
-                        <span style="padding-left:5px; border-left-width: 5px; border-left-style: solid; border-left-color: @ColorGenerator.Instance.GetColorHexByKey(context.Application.ApplicationName);">
+                        <span style="padding-left:5px; border-left-width: 5px; border-left-style: solid; border-left-color: @(ColorGenerator.Instance.GetColorHexByKey(context.Application.ApplicationName));">
                             @context.Application.ApplicationName
                         </span>
                     </TemplateColumn>
@@ -226,10 +226,13 @@
     {
         if (_applicationChanged)
         {
-            await JS.InvokeVoidAsync("switchLogsApplication");
+            await JS.InvokeVoidAsync("resetContinuousScrollPosition");
             _applicationChanged = false;
         }
-        await JS.InvokeVoidAsync("scollToLogsEnd");
+        if (firstRender)
+        {
+            await JS.InvokeVoidAsync("initializeContinuousScroll");
+        }
     }
 
     public void Dispose()
diff --git a/src/Aspire.Dashboard/Components/Pages/Traces.razor b/src/Aspire.Dashboard/Components/Pages/Traces.razor
index 7329ccbb0a6..a6029485da8 100644
--- a/src/Aspire.Dashboard/Components/Pages/Traces.razor
+++ b/src/Aspire.Dashboard/Components/Pages/Traces.razor
@@ -23,7 +23,7 @@
                           @bind-SelectedOption="_selectedApplication"
                           @bind-SelectedOption:after="HandleSelectedApplicationChangedAsync" />
         </FluentToolbar>
-        <div class="datagrid-overflow-area SemanticLogsOverflow" tabindex="-1">
+        <div class="datagrid-overflow-area continuous-scroll-overflow" tabindex="-1">
             <FluentDataGrid Class="SemanticLogsDataGrid" Virtualize="true" RowStyle="@GetRowStyle" GenerateHeader="GenerateHeaderOption.Sticky" ItemSize="48" ResizableColumns="true" ItemsProvider="@GetData" TGridItem="OtlpTrace" GridTemplateColumns="0.8fr 2fr 3fr 0.5fr 0.5fr">
               <ChildContent>
                 <PropertyColumn Title="Timestamp" Property="@(context => OtlpHelpers.FormatTimeStamp(context.FirstSpan.StartTime))" />
@@ -172,10 +172,10 @@
     {
         if (_applicationChanged)
         {
-            await JS.InvokeVoidAsync("switchLogsApplication");
+            await JS.InvokeVoidAsync("resetContinuousScrollPosition");
             _applicationChanged = false;
         }
-        await JS.InvokeVoidAsync("scollToLogsEnd");
+        await JS.InvokeVoidAsync("initializeContinuousScroll");
     }
 
     public void Dispose()
diff --git a/src/Aspire.Dashboard/wwwroot/css/app.css b/src/Aspire.Dashboard/wwwroot/css/app.css
index c0dc12c7c42..f70c533c3f1 100644
--- a/src/Aspire.Dashboard/wwwroot/css/app.css
+++ b/src/Aspire.Dashboard/wwwroot/css/app.css
@@ -149,7 +149,7 @@ fluent-toolbar[orientation=horizontal] {
     width: 100%;
     overflow: auto;
 }
-    .datagrid-overflow-area fluent-data-grid {
+    .datagrid-overflow-area .empty-content {
         width: 100%;
-        height: 100%;
+        height: 100px;
     }
diff --git a/src/Aspire.Dashboard/wwwroot/js/app.js b/src/Aspire.Dashboard/wwwroot/js/app.js
index 7df20360665..ac4d5bf5e40 100644
--- a/src/Aspire.Dashboard/wwwroot/js/app.js
+++ b/src/Aspire.Dashboard/wwwroot/js/app.js
@@ -25,15 +25,14 @@ window.scrollToEndInTextArea = function (classSelector) {
 
 let isScrolledToContent = false;
 
-window.switchLogsApplication = function () {
+window.resetContinuousScrollPosition = function () {
     // Reset to scrolling to the end of the content after switching.
     isScrolledToContent = false;
 }
 
-window.scollToLogsEnd = function () {
-    const container = document.querySelector('.SemanticLogsOverflow');
-    const grid = document.querySelector('.SemanticLogsDataGrid');
-    if (container == null || grid == null) {
+window.initializeContinuousScroll = function () {
+    const container = document.querySelector('.continuous-scroll-overflow');
+    if (container == null) {
         return;
     }
 
@@ -50,7 +49,9 @@ window.scollToLogsEnd = function () {
             container.scrollTop = container.scrollHeight;
         }
     });
-    observer.observe(grid);
+    for (const child of container.children) {
+        observer.observe(child);
+    }
 };
 
 function isScrolledToBottom(container) {