search

dart-lang / dart_ci

Tools used by Dart's continuous integration (CI) testing that aren't needed by Dart SDK contributors. Mirrored from dart.googlesource.com/dart_ci. Do not land pull requests on Github.
BSD 3-Clause "New" or "Revised" License
18 stars 5 forks source link

Current results ui has slow/broken scrolling on long test lists #158

Open whesse opened 11 months ago

whesse commented 11 months ago

When the current results UI shows a list of 10,000 tests or more, scrolling using the scroll bar is janky and hangs the web client.

This is due to issue https://github.com/flutter/flutter/issues/52207 . A long ListView in Flutter cannot have variable-sized items without creating all the items in the list to find the scroll length and scroll position. This is fixed by specifying the vertical size of all items with an itemExtent or prototypeItem argument to the ListView constructor, giving the common size for all items.

This bug was reported in #143 by a user.

Potential fixes are to move the expansion of a test item to show all the configurations and links for that test to a popup, side panel, top panel, or overlay. This UI might be less usable than the current expander button on an item.

If the expension is an overlay, it will cover over other test names, and perhaps two tests won't be expandable at the same time. Dismissing the popup will also require either a dismiss button, a click, or hitting the escape key.

Putting the details in a top panel has the advantage that the test list won't be covered over, just smaller, but the case that the top panel needs scrolling will need to be handled too.

I propose having some UI discussions with other team members and Flutter UI team, then carrying out this fix.

whesse commented 11 months ago

An alternative solution is enabled by the landing of https://github.com/flutter/flutter/pull/131393 A cheaper way of providing the size of each list item can be provided by a list item extent builder function, so Flutter doesn't need to construct and lay out the widgets for all items in the list. Will try this approach first.

whesse commented 11 months ago

I propose the following design: Test details (which configurations have which status, with links) will be in a top panel that is vertically above the scrollable list of tests. It will expand, but leave a certain vertical space available for the test list.

There will be a provider from the test results panel, that will expose the test results, the list of expanded tests, and a boolean on a test to say whether it is expanded or not. It will accept requests to expand or dismiss a test, by index, and will provide a stream of events (maybe with no contents) that marks changes to its state. The test list and expansion panel will both subscribe to this provider. The provider can also connect to the fetcher.

whesse commented 4 months ago

I now think that a different solution is best: The list of tests should be a pageable list, not just a single long scrollable list.

That is how most Google UIs work, such as the GCP web UIs, and the LUCI console (milo). The material design spec for data tables specifies exactly this behavior: https://m2.material.io/components/data-tables#anatomy

Flutter material has the PaginatedDataTable class for exactly this purpose.

The LUCI console has text "Page Size: 20 50 100 200. PREVIOUS PAGE. NEXT PAGE" at the bottom of each page of build results for a builder.