[release/9.4] Fix grid scrolling bugs (dotnet#10861)

* Fix continious scroll to prevent jumping to the top

* Overscan counts

* Update

* Update

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

* Remove page logging

---------

Co-authored-by: James Newton-King <[email protected]>

Author: 2 people

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

@@ -127,6 +127,7 @@
                                                     Virtualize="true"
                                                     GenerateHeader="GenerateHeaderOption.Sticky"
                                                     ItemSize="46"
+                                                    OverscanCount="100"
                                                     ItemsProvider="@GetData"
                                                     ResizableColumns="true"
                                                     GridTemplateColumns="@_manager.GetGridTemplateColumns()"

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

@@ -127,6 +127,7 @@
                                                 RowClass="@GetRowClass"
                                                 GenerateHeader="GenerateHeaderOption.Sticky"
                                                 ItemSize="46"
+                                                OverscanCount="100"
                                                 ResizableColumns="true"
                                                 ItemsProvider="@GetData"
                                                 TGridItem="OtlpLogEntry"

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

@@ -97,6 +97,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

@@ -83,6 +83,7 @@
                                     Virtualize="true"
                                     GenerateHeader="GenerateHeaderOption.Sticky"
                                     ItemSize="46"
+                                    OverscanCount="100"
                                     ResizableColumns="true"
                                     ItemsProvider="@GetData"
                                     TGridItem="OtlpTrace"

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) {