Infinite scrolling #411

gabriel-indik · 2024-11-07T21:25:37Z

Add infinite scrolling for events. The goal is to ensure that the feature works as expected before expanding it to all other queries (transactions, events and submissions).
With the changes in place, events are not retrieved 10 at a time. When scrolling down, 10 more will be incrementally loaded until all events have been loaded. Visually the UI should feel virtually identical. It may load slightly faster at first since we are now fetching fewer results. The way to perform the pagination is done based on https://github.com/kaleido-io/paladin/blob/63f3ef44541245a56aea7c2434bc53191ab33271/core/go/pkg/blockindexer/event_streams.go#L542-L546.

This can be seen applied in ui/client/src/queries/events.ts as follows:

 let requestPayload: any = {
    jsonrpc: "2.0",
    id: Date.now(),
    method: RpcMethods.bidx_QueryIndexedEvents,
    params: [
      {
        limit: constants.EVENT_QUERY_LIMIT,
        sort: ["blockNumber DESC", "transactionIndex DESC", "logIndex DESC"],
      }
    ]
  };

  if (pageParam !== undefined) {
    requestPayload.params[0].or = [
      {
        "lessThan": [
          {
            "field": "blockNumber",
            "value": pageParam.blockNumber
          }
        ]
      },
      {
        "equal": [{
          "field": "blockNumber",
          "value": pageParam.blockNumber
        }],
        "or": [
          {
            "lessThan": [{
              "field": "transactionIndex",
              "value": pageParam.transactionIndex
            }]
          },
          {
            "equal": [{
              "field": "transactionIndex",
              "value": pageParam.transactionIndex
            }],
            "lessThan": [{
              "field": "logIndex",
              "value": pageParam.logIndex
            }]
          }
        ]
      }
    ]
  }

Signed-off-by: Gabriel Indik <[email protected]>

gabriel-indik · 2024-11-08T16:55:27Z

Infinite scrolling has been added to the indexer. Transactions and events are now loaded 10 at a time. Note that the logic for retrieving receipts and full transactions had to be updated in order to fetch those incrementally.
Infinite scrolling as also been added to the submissions panel.

In all cases, 10 items at a time are being retrieved. When scrolling, 10 more will be incrementally loaded.

gabriel-indik · 2024-11-08T16:57:12Z

With regards to the registry, that is something that will likely require a conversation before we go ahead and add infinite scrolling. This is because currently the UI is making some seamless simplification of the data by aggregating the entries from all registries in one list. We may want to revisit this and instead show registry entries grouped by registry.

Signed-off-by: Gabriel Indik <[email protected]>

dechdev · 2024-11-18T15:35:10Z

ui/client/src/views/Submissions.tsx

-    queryFn: () => fetchSubmissions(tab)
+  const { data: transactions, fetchNextPage, hasNextPage, error } = useInfiniteQuery({
+    queryKey: ["submissions", tab, lastBlockWithTransactions],
+    queryFn: ({ pageParam }) => fetchSubmissions(tab, pageParam),


Does pageParam have a type?

Yes, the type is IPaladinTransaction | undefined which the TS compiler derives from the initialPageParam type. Note that if that type were to change, the compiler would complain about the arguments submitted to fetchSubmissions.

dechdev · 2024-11-18T15:35:52Z

ui/client/src/views/Submissions.tsx

+    queryKey: ["submissions", tab, lastBlockWithTransactions],
+    queryFn: ({ pageParam }) => fetchSubmissions(tab, pageParam),
+    initialPageParam: undefined as IPaladinTransaction | undefined,
+    getNextPageParam: (lastPage) => { return lastPage[lastPage.length - 1] },


Can lastPage.length be 0?

Excellent point, it could certainly be zero. I updated the code to handle that case with the following:

getNextPageParam: (lastPage) => { return lastPage.length > 0? lastPage[lastPage.length - 1] : undefined }

dechdev · 2024-11-18T15:36:31Z

ui/client/src/views/Submissions.tsx

  if (error) {
    return <Alert sx={{ margin: '30px' }} severity="error" variant="filled">{error.message}</Alert>
  }

+  if (transactions?.pages === undefined) {


This is fine for now, but eventually we should add skeleton loaders for a better user experience

Couldn't agree more, the tricky thing is that the results tend to come up so quickly (especially now that we only fetch 10 at a time) that the loading placeholder would end up appearing like a bug/flicker. Maybe we could explore a time based loader component that would only show if the time takes more than certain threshold.

dechdev · 2024-11-18T15:37:20Z

ui/client/src/translations/en.json

@@ -78,5 +78,8 @@
  "pending": "Pending",
  "indexer": "Indexer",
  "submissions": "Submissions",
-  "close": "Close"
+  "close": "Close",


It's a nit but i like to sort en.json alphabetically

Good point, I updated the file with all the properties sorted alphabetically.

dechdev · 2024-11-18T15:39:07Z

ui/client/src/views/Submissions.tsx

-    queryKey: ["pendingTransactions", tab, lastBlockWithTransactions],
-    queryFn: () => fetchSubmissions(tab)
+  const { data: transactions, fetchNextPage, hasNextPage, error } = useInfiniteQuery({
+    queryKey: ["submissions", tab, lastBlockWithTransactions],


https://tanstack.com/query/v5/docs/eslint/eslint-plugin-query This eslint plugin should be able to catch any missing variables in the queryKey array. Not saying is anything wrong here, but just fyi in case it's not set up already

I was under the impression that the eslint plugin had already been included as part of the PR that you contributed (cca70cc). Having said that, I could not get to trigger linter issues when removing some of the values from the queryKey argument. I wonder if there might be something else that needs to be set?

Yes, I do remember adding it...but maybe it's being overridden by another rule. Worth looking into but shouldn't block this PR

dechdev · 2024-11-18T15:40:38Z

ui/client/src/components/Events.tsx


  if (error) {
    return <Alert sx={{ margin: '30px' }} severity="error" variant="filled">{error.message}</Alert>
  }

+  if (events?.pages === undefined) {


Should use skeleton loader eventually

Absolutely agree, we would need to work together on a design that allows a loader to be shown without running into the issue of showing up and disappearing immediately which makes it appear as if the screen flickers.

Sounds good. I think the Event card can have a isLoading prop. Then inside the card, skeletons can show for each piece of data. That way, the components still load, but the content changes from a skeleton to text.

dechdev · 2024-11-18T15:42:07Z

ui/client/src/components/Header.tsx

@@ -53,37 +55,80 @@ export const Header: React.FC = () => {
    }
  };

+  const handleAutoRefreshChange = (value: string) => {


Can value be of type 'play' | 'pause' instead?

Absolutely, updated the code to

const handleAutoRefreshChange = (value: 'play' | 'pause') => {

dechdev · 2024-11-18T15:44:28Z

ui/client/src/components/Header.tsx

-              </Tooltip>
+            <Grid2 container alignItems="center">
+              <Grid2 size={{ xs: 12, sm: 12, md: 4 }} textAlign={lessThanMedium ? 'center' : 'left'}>
+                <img src={theme.palette.mode === 'dark' ?


There are probably many instances of this ternary. I suggest having a util function:

export const getThemedComponent = (lightComponent, darkComponent, theme) => { return theme === 'light' ? lightComponent : darkComponent }

We can certainly add the utility. For me to better understand the snippet above, would the lightComponent and darkComponent argument be JSX.Elements?

Can be JSX.Element | string to start with

dechdev · 2024-11-18T15:45:31Z

ui/client/src/components/Transactions.tsx

  }

-  if (transactionError || receiptError || paladinTransactionError) {
-    return <Alert sx={{ margin: '30px' }} severity="error" variant="filled">{transactionError?.message ?? receiptError?.message ?? paladinTransactionError?.message}</Alert>
+  if (transactions?.pages === undefined) {


Loading state eventually

Like in the comment above, we would need to find a way to make the loader appear/disappear without causing the flickering effect on screen.

dechdev · 2024-11-18T15:47:01Z

ui/client/src/queries/events.ts

-export const fetchEvents = async (): Promise<IEvent[]> => {
-  const requestPayload = {
+export const fetchEvents = async (pageParam?: IEvent): Promise<IEvent[]> => {
+  let requestPayload: any = {


Think we should make an interface for the RPC payloads once the shape of them has stabilized

I agree 100%, I think the chances of having new changes in the JSON-RPC responses are much lower now, so this is something we can probably get started on.

Signed-off-by: Gabriel Indik <[email protected]>

awrichar

Took a quick look - but it seems like @gabriel-indik and @dechdev already did a thorough review on this one. LGTM.

Events infinite scrolling

a836a2d

Signed-off-by: Gabriel Indik <[email protected]>

gabriel-indik self-assigned this Nov 7, 2024

gabriel-indik marked this pull request as draft November 7, 2024 21:25

gabriel-indik and others added 5 commits November 8, 2024 09:26

Merge branch 'main' into events-infinite-scroll

152235d

Adjust query

bc5a894

Signed-off-by: Gabriel Indik <[email protected]>

Infinite scroll for indexed transactions

b97d99d

Signed-off-by: Gabriel Indik <[email protected]>

Infinite scroll for submissions

c180230

Signed-off-by: Gabriel Indik <[email protected]>

Merge branch 'main' into events-infinite-scroll

7e20316

gabriel-indik marked this pull request as ready for review November 8, 2024 16:53

gabriel-indik requested a review from peterbroadhurst November 8, 2024 16:57

gabriel-indik changed the title ~~Events infinite scrolling~~ Infinite scrolling Nov 8, 2024

gabriel-indik and others added 5 commits November 11, 2024 09:18

Merge branch 'main' into events-infinite-scroll

7ed54f3

Merge branch 'main' into events-infinite-scroll

1b1c951

Auto refresh feature

098b449

Signed-off-by: Gabriel Indik <[email protected]>

Update casing

80ea5db

Signed-off-by: Gabriel Indik <[email protected]>

Adjust private label logic

56290c0

Signed-off-by: Gabriel Indik <[email protected]>

gabriel-indik requested a review from awrichar November 15, 2024 15:37

gabriel-indik added 2 commits November 15, 2024 10:38

Merge branch 'main' into events-infinite-scroll

b973bf5

Merge branch 'main' into events-infinite-scroll

0939aab

dechdev suggested changes Nov 18, 2024

View reviewed changes

gabriel-indik requested a review from dechdev November 18, 2024 16:48

Updates based on code review - first pass

fedf5d7

Signed-off-by: Gabriel Indik <[email protected]>

dechdev approved these changes Nov 18, 2024

View reviewed changes

gabriel-indik enabled auto-merge November 18, 2024 21:08

awrichar approved these changes Nov 18, 2024

View reviewed changes

gabriel-indik merged commit 654f3ff into LF-Decentralized-Trust-labs:main Nov 18, 2024
6 checks passed

gabriel-indik mentioned this pull request Nov 18, 2024

UI enhancements #442

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Infinite scrolling #411

Infinite scrolling #411

gabriel-indik commented Nov 7, 2024 •

edited

Loading

gabriel-indik commented Nov 8, 2024

gabriel-indik commented Nov 8, 2024

dechdev Nov 18, 2024

gabriel-indik Nov 18, 2024

dechdev Nov 18, 2024

gabriel-indik Nov 18, 2024

dechdev Nov 18, 2024

gabriel-indik Nov 18, 2024

dechdev Nov 18, 2024

gabriel-indik Nov 18, 2024

dechdev Nov 18, 2024

gabriel-indik Nov 18, 2024

dechdev Nov 18, 2024

dechdev Nov 18, 2024

gabriel-indik Nov 18, 2024

dechdev Nov 18, 2024

dechdev Nov 18, 2024

gabriel-indik Nov 18, 2024

dechdev Nov 18, 2024

gabriel-indik Nov 18, 2024

dechdev Nov 18, 2024

dechdev Nov 18, 2024

gabriel-indik Nov 18, 2024

dechdev Nov 18, 2024

gabriel-indik Nov 18, 2024

awrichar left a comment

Infinite scrolling #411

Infinite scrolling #411

Conversation

gabriel-indik commented Nov 7, 2024 • edited Loading

gabriel-indik commented Nov 8, 2024

gabriel-indik commented Nov 8, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

awrichar left a comment

Choose a reason for hiding this comment

gabriel-indik commented Nov 7, 2024 •

edited

Loading