Fix automatic scrolling to the bottom of main page content (#10740)

* Fix continious scroll to prevent jumping to the top

* Overscan counts

* Update

* Update

* Continious scroll is re-enabled when there is no scrollbar

Author: JamesNK

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

@@ -127,6 +127,7 @@
                                                     Virtualize="true"
                                                     GenerateHeader="GenerateHeaderOption.Sticky"
                                                     ItemSize="46"
+                                                    OverscanCount="100"
                                                     ItemsProvider="@GetData"
                                                     ResizableColumns="true"
                                                     ResizeColumnOnAllRows="false"

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

@@ -122,6 +122,7 @@
                                                 RowClass="@GetRowClass"
                                                 GenerateHeader="GenerateHeaderOption.Sticky"
                                                 ItemSize="46"
+                                                OverscanCount="100"
                                                 ResizableColumns="true"
                                                 ResizeColumnOnAllRows="false"
                                                 ItemsProvider="@GetData"

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

@@ -136,6 +136,8 @@ private async ValueTask<GridItemsProviderResult<OtlpLogEntry>> GetData(GridItems
             message.Close();
         }
 
+        Logger.LogTrace("Log data updated. Start index: {RequestStartIndex}, count: {RequestCount}, result item count: {ResultTotalItemCount}", request.StartIndex, request.Count, logs.TotalItemCount);
+
         // Updating the total item count as a field doesn't work because it isn't updated with the grid.
         // The workaround is to explicitly update and refresh the control.
         _totalItemsCount = logs.TotalItemCount;

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

@@ -109,6 +109,7 @@
                                             RowClass="@GetRowClass"
                                             GridTemplateColumns="@_manager.GetGridTemplateColumns()"
                                             RowSize="DataGridRowSize.Small"
+                                            OverscanCount="100"
                                             ShowHover="true"
                                             ItemKey="@(r => r.Span.SpanId)"
                                             OnRowClick="@(r => r.ExecuteOnDefault(d => OnShowPropertiesAsync(d, buttonId: null)))">

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

@@ -92,6 +92,7 @@
                                     RowClass="@GetRowClass"
                                     GenerateHeader="GenerateHeaderOption.Sticky"
                                     ItemSize="46"
+                                    OverscanCount="100"
                                     ResizableColumns="true"
                                     ResizeColumnOnAllRows="false"
                                     ItemsProvider="@GetData"

src/Aspire.Dashboard/wwwroot/js/app.js

@@ -62,6 +62,7 @@ window.getIsScrolledToContent = function () {
 window.setIsScrolledToContent = function (value) {
     if (isScrolledToContent != value) {
         isScrolledToContent = value;
+        console.log(`isScrolledToContent=${isScrolledToContent}`);
     }
 }
 
@@ -82,17 +83,30 @@ window.initializeContinuousScroll = function () {
 
     // The scroll event is used to detect when the user scrolls to view content.
     container.addEventListener('scroll', () => {
-        var v = !isScrolledToBottom(container);
-        setIsScrolledToContent(v);
+        var atBottom = isScrolledToBottom(container);
+        if (atBottom === null) {
+            return;
+        }
+        setIsScrolledToContent(!atBottom);
    }, { passive: true });
 
     // The ResizeObserver reports changes in the grid size.
     // This ensures that the logs are scrolled to the bottom when there are new logs
     // unless the user has scrolled to view content.
     const observer = new ResizeObserver(function () {
         lastScrollHeight = container.scrollHeight;
-        if (!getIsScrolledToContent()) {
+
+        if (lastScrollHeight == container.clientHeight) {
+            // There is no scrollbar. This could be because there's no content, or the content might have been cleared.
+            // Reset to default behavior: scroll to bottom
+            setIsScrolledToContent(false);
+            return;
+        }
+
+        var isScrolledToContent = getIsScrolledToContent();
+        if (!isScrolledToContent) {
             container.scrollTop = lastScrollHeight;
+            return;
         }
     });
     for (const child of container.children) {
@@ -108,14 +122,18 @@ function isScrolledToBottom(container) {
     if (!getIsScrolledToContent()) {
         if (lastScrollHeight != container.scrollHeight) {
             console.log(`lastScrollHeight ${lastScrollHeight} doesn't equal container scrollHeight ${container.scrollHeight}.`);
+
+            // Unknown because the container size changed.
+            return null;
         }
     }
 
     const marginOfError = 5;
     const containerScrollBottom = lastScrollHeight - container.clientHeight;
     const difference = containerScrollBottom - container.scrollTop;
 
-    return difference < marginOfError;
+    var atBottom = difference < marginOfError;
+    return atBottom;
 }
 
 window.buttonOpenLink = function (element) {