NBIS/sda-download-ui

Watch

Fork 0

Make information box viewing x of x less prominent #71

Merged

KattisLej merged 5 commits from 67-make-information-box-viewing-x-of-x-less-prominent into develop

2026-05-12 11:50:44 +00:00

KattisLej commented

2026-05-08 12:13:30 +00:00

(Migrated from github.com)

This PR closes #67 and #75.

The viewing information was a little bit different between the Datasets and the datasets files list.

Type of change

New feature (non-breaking change which adds functionality)

List of changes made

Made some refactoring to make the Pagination more clear by adding some bools like shouldShowPagination and shouldShowViewingSummary
Let the viewing information be present even if there is no pagination so viewing x of x files
TypeScript errors (which also fixes the production built error found in #75

Screenshot of the fix

With no pagination:
Screenshot from 2026-05-08 14-08-38

Testing

Test for different screen sizes, explorative testing.
Make sure production builds.

Definition of Done checklist

I have made an effort making the commit history understandable
I have performed a self-review of my own code and commented any hard-to-understand areas
Existing tests are passing and I wrote unit tests for new functionality
My changes generate no new warnings
Make sure the layout and text follow design sketches, if there are any
All Acceptance Criteria (AC) Fulfilled and checked in the Related issue

## Related issue(s) and PR(s) This PR closes #67 and #75. The viewing information was a little bit different between the Datasets and the datasets files list. ## Type of change - [x] New feature (non-breaking change which adds functionality) ## List of changes made - Made some refactoring to make the Pagination more clear by adding some bools like shouldShowPagination and shouldShowViewingSummary - Let the viewing information be present even if there is no pagination so viewing x of x files - TypeScript errors (which also fixes the production built error found in #75 ## Screenshot of the fix <img width="1319" height="232" alt="Screenshot from 2026-05-08 14-08-27" src="https://github.com/user-attachments/assets/87c948de-8e26-4222-a073-c5ba17a58f16" /> <img width="1319" height="232" alt="Screenshot from 2026-05-08 14-08-18" src="https://github.com/user-attachments/assets/d3491789-4454-4c38-9418-40a9e432e16a" /> With no pagination: <img width="1319" height="232" alt="Screenshot from 2026-05-08 14-08-38" src="https://github.com/user-attachments/assets/5c40c438-613d-41ce-b96a-10eeb327120f" /> ## Testing Test for different screen sizes, explorative testing. Make sure production builds. ## Definition of Done checklist - [x] I have made an effort making the commit history understandable - [x] I have performed a self-review of my own code and commented any hard-to-understand areas - [x] Existing tests are passing and I wrote unit tests for new functionality - [x] My changes generate no new warnings - [x] Make sure the layout and text follow design sketches, if there are any - [x] All Acceptance Criteria (AC) Fulfilled and checked in the Related issue

HenrikeW (Migrated from github.com) reviewed

2026-05-08 12:13:30 +00:00

Jessica-Sandler (Migrated from github.com) reviewed

2026-05-08 12:13:30 +00:00

pdmnyberg (Migrated from github.com) reviewed

2026-05-08 12:13:30 +00:00

aaperis commented

2026-05-11 10:57:38 +00:00

(Migrated from github.com)

starting review

aaperis (Migrated from github.com) requested changes

2026-05-11 12:43:50 +00:00

aaperis (Migrated from github.com) left a comment

This works really nicely! However there is a point that needs some attention as I mention in the comment.

frontend/src/app/components/Pagination.tsx

Here is a weird situation: If itemsPerPage = 10 and totalItems = 0 then shouldShowViewingSummary == true but then later the

if (itemsPerPage && totalItems) {
    startItem = totalItems === 0 ? 0 : (currentPage - 1) * itemsPerPage + 1;
    endItem = Math.min(currentPage * itemsPerPage, totalItems);
  }

block (line 67) will become if false so that startItem and endItem are not defined.

However, the component will still render the summary because shouldShowViewingSummary is true.

Here is a weird situation: If itemsPerPage = 10 and totalItems = 0 then `shouldShowViewingSummary == true` but then later the ``` if (itemsPerPage && totalItems) { startItem = totalItems === 0 ? 0 : (currentPage - 1) * itemsPerPage + 1; endItem = Math.min(currentPage * itemsPerPage, totalItems); } ``` block (line 67) will become `if false` so that `startItem` and `endItem` are not defined. However, the component will still render the summary because `shouldShowViewingSummary` is `true`.

KattisLej (Migrated from github.com) reviewed

2026-05-11 13:40:58 +00:00

frontend/src/app/components/Pagination.tsx

Thank you, I will take a look at this!

KattisLej (Migrated from github.com) reviewed

2026-05-11 14:17:27 +00:00

frontend/src/app/components/Pagination.tsx

I will make a fix for this and let you know, thank you!

KattisLej (Migrated from github.com) reviewed

2026-05-11 15:37:42 +00:00

frontend/src/app/components/Pagination.tsx

@aaperis So please take a look again. This was supposed to be using the variable created earlier called
const shouldShowViewingSummary =
typeof itemsPerPage === "number" && typeof totalItems === "number";
But apparently I missed it. Hopefully this will cover the cases and not create weird behavior. Please take a look again!

@aaperis So please take a look again. This was supposed to be using the variable created earlier called const shouldShowViewingSummary = typeof itemsPerPage === "number" && typeof totalItems === "number"; But apparently I missed it. Hopefully this will cover the cases and not create weird behavior. Please take a look again!