Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/sc-46253/sdk-table-pagination #229

Merged
merged 14 commits into from
Apr 30, 2024

Conversation

etienneburdet
Copy link
Contributor

Summary

The goal for this PR is to pagination to the table component

(Internal for Opendatasoft only) Associated Shortcut ticket: sc-46253.

Changes

I added a pagination block with options to be styled. It should be disabled when hitting the lower bounds, show ellipsis when there are too much pages and accept an async callbacks.

Stories should reflect all those changes.

I left out the "number per pages". Although the component is here, the way we handle the callback isn't that easy (or actually doesn't really fit with the way we handle the change page callback).

Changelog

"Tables now support paginitaion"

Open discussion

So I stick mostly with our current way of styling, but I think we leverage the new implementation better, by using a "className" props that we can now pass safely. It would avoid wrapping and probably reduce a bit of internal wrapping too.

We can't leverage ods-visualizations-table though (as I initialy hope we could), since it's only present in the react implem for now.

Review checklist

  • Description is complete
  • Commits respect the Conventional Commits Specification
  • 2 reviewers (1 if trivial)
  • Tests coverage has improved
  • Code is ready for a release on NPM

@etienneburdet etienneburdet force-pushed the feature/sc-46253/sdk-table-pagination branch from 0d91fd1 to 90e6122 Compare March 20, 2024 08:02
@etienneburdet
Copy link
Contributor Author

@cybervinvin @KevinFabre-ods Don't mind the style/css too much in this one, I proposed something different in #230 .

@etienneburdet etienneburdet force-pushed the feature/sc-46253/sdk-table-pagination branch 2 times, most recently from e9b999e to 49dee4c Compare March 22, 2024 08:53
Copy link
Contributor

@KevinFabre-ods KevinFabre-ods left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left some comments about the table behavior with the pagination.

For the eslint changes, what did you encounter to make theses edits ?

Other than that, pagination works well. Maybe we want the current page to react to a change in the API (when initial changes)

packages/visualizations/.eslintrc.js Outdated Show resolved Hide resolved
packages/visualizations-react/package.json Show resolved Hide resolved
packages/visualizations-react/stories/Table/config.ts Outdated Show resolved Hide resolved
Comment on lines 24 to 27
/* Preserves paginations controls positioning
min heigh of table + controls = max-height of row * (number of rows + 1 for headers)
*/
$: minHeight = pages ? `${MAX_ROW_HEIGHT * (pages.recordsPerPage + 1)}px` : 'none';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did we check with the design for this behavior ?
Can be weird if we display 20 items per page with only one item for the last page. We get a lot of white space

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No we still have to submit that to Meg, but it's really annoying to have the pagination moving between pages too.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We asked the question https://app.shortcut.com/opendatasoft/story/49140/design-how-the-table-and-pagination-react-when-number-of-items-changes-between-two-pages. Waiting for an answer...

In the meantime, I'm in favor of adding the less code possible. I prefer to add a function or behavior later rather than delete one.

<Body {records} {columns} />
{/if}
</table>
<div class="table-controls" style="--min-height: {minHeight}">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is the role of this new div ?

Looks like we have a visual bug on the right of the table. Table rows don't take all the available space
Screenshot 2024-03-26 at 11 52 28

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's for holding the pagination in the same place relative to the table. I think it's fixed in #230

Copy link
Contributor

@KevinFabre-ods KevinFabre-ods left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some comments about how pagination numbers are computed

Copy link

Coverage after merging feature/sc-46253/sdk-table-pagination into main

95.24%

Coverage Report
FileBranchesFuncsLinesUncovered Lines
src
   index.ts100%100%100%
src/client
   error.ts100%100%100%
   index.ts75.32%100%96.88%124, 13, 146, 148, 148–149, 15, 15, 151, 162, 169, 169, 17, 17, 171, 176, 179, 182, 184, 52, 82
   types.ts100%100%100%
src/odsql
   clauses.ts71.43%80%90.91%14, 32, 42
   index.ts83.72%95.74%94.19%111, 146, 25, 28, 56–57, 57, 57–58, 68, 78–79

@etienneburdet
Copy link
Contributor Author

Sorry the eslint thing got a bit bigger than I thought and ideally should be for this PR… but well, at least it's done.

Copy link

Coverage after merging feature/sc-46253/sdk-table-pagination into main

95.24%

Coverage Report
FileBranchesFuncsLinesUncovered Lines
src
   index.ts100%100%100%
src/client
   error.ts100%100%100%
   index.ts75.32%100%96.88%124, 13, 146, 148, 148–149, 15, 15, 151, 162, 169, 169, 17, 17, 171, 176, 179, 182, 184, 52, 82
   types.ts100%100%100%
src/odsql
   clauses.ts71.43%80%90.91%14, 32, 42
   index.ts83.72%95.74%94.19%111, 146, 25, 28, 56–57, 57, 57–58, 68, 78–79

@etienneburdet
Copy link
Contributor Author

Soooo… I ended up removing our customization of object-curly-new-lines, because it was conflicting with prettier. The problem appeared of this line: 
$: ({ columns, title, subtitle, description, source, unstyled, locale, pagination } = options);
Which has the particularity of never having a default, nor a param assing (e.g. colmuns: options.cols), in which case prettier prefers one line. It never happened before in the codebase.

Now just removing the eslint for curly new line works: what we did before is still good with prettier (because of the = and :). Overall it just lets prettier decides, which is more consistent with the VScode extension I guess.

Prettier still won't let us do something like:

    $: ({
        shapes, colorScale = DEFAULT_COLORSCALE, legend,
        aspectRatio,
        activeShapes,
        interactive = defaultInteractive,
        emptyValueColor = DEFAULT_COLORS.Default,
        bbox,
        attribution,
        title,
        subtitle,
        description,
        navigationMaps,
        sourceLink,
        cooperativeGestures,
    } = options);
    ```

@etienneburdet etienneburdet force-pushed the feature/sc-46253/sdk-table-pagination branch from 409183d to ab2199f Compare March 29, 2024 10:33
Copy link

Coverage after merging feature/sc-46253/sdk-table-pagination into main

95.24%

Coverage Report
FileBranchesFuncsLinesUncovered Lines
src
   index.ts100%100%100%
src/client
   error.ts100%100%100%
   index.ts75.32%100%96.88%124, 13, 146, 148, 148–149, 15, 15, 151, 162, 169, 169, 17, 17, 171, 176, 179, 182, 184, 52, 82
   types.ts100%100%100%
src/odsql
   clauses.ts71.43%80%90.91%14, 32, 42
   index.ts83.72%95.74%94.19%111, 146, 25, 28, 56–57, 57, 57–58, 68, 78–79

Copy link

github-actions bot commented Apr 2, 2024

Coverage after merging feature/sc-46253/sdk-table-pagination into main

95.24%

Coverage Report
FileBranchesFuncsLinesUncovered Lines
src
   index.ts100%100%100%
src/client
   error.ts100%100%100%
   index.ts75.32%100%96.88%124, 13, 146, 148, 148–149, 15, 15, 151, 162, 169, 169, 17, 17, 171, 176, 179, 182, 184, 52, 82
   types.ts100%100%100%
src/odsql
   clauses.ts71.43%80%90.91%14, 32, 42
   index.ts83.72%95.74%94.19%111, 146, 25, 28, 56–57, 57, 57–58, 68, 78–79

Copy link
Contributor

@cybervinvin cybervinvin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After review, I don't have much to say.
There are several things that I find strange but since I don't know the best practices in the SDK, I prefer not to start discussions here.

After using it in the studio, the component API seems OK, so LGTM 👍🏼

Comment on lines 13 to 23
$: if (totalPages === 2) {
pages = [1, 2];
} else if (totalPages === 1) {
pages = [1];
} else if (current - 1 < 1) {
pages = [current, current + 1, current + 2];
} else if (current + 1 > totalPages) {
pages = [current - 2, current - 1, current];
} else {
pages = [current - 1, current, current + 1];
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's hard to read, IMO we can improve it:

If totalPages is equal to 3 are less: pages = Array.from({length: totalPages}, (_, i) => i + 1)
if current === 1: pages = [current, current + 1 , current + 2];
if current === totalPages: pages = [current - 2, current - 1, current];
All other cases: pages = [current - 1, current, current + 1];

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ha yes, we can change that computation now that we've changed the indexes to start at 1.


const paginatedOptions = {
...options,
pages: {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
pages: {
pagination: {

@@ -10,7 +11,7 @@
</script>

<!-- To display a format value, rawValue must be different from undefined or null -->
<td class={`table-data--${dataFormat}`}>
<td class={`table-data--${dataFormat}`} style="max-height: {MAX_ROW_HEIGHT}px">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screenshot 2024-04-03 at 15 39 16

Indeed the style is in the div but its true height is not maxed at 78px

Copy link
Contributor

@KevinFabre-ods KevinFabre-ods left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pagination snapshots in Chromatic don't have the pagination element => due to a missing rename (pages => pagination)

Other than that, I think we can improve the readability of the code to computed the page buttons.

Also waiting for your input about the meeting you had with Meg for the pagination behavior.

Finally don't hesitate to reply to my comments when you did or didn't change the code. With a force push commit, comments are detached from the code (sometimes it takes some time to find again the part of the code related to the comment)

@etienneburdet etienneburdet force-pushed the feature/sc-46253/sdk-table-pagination branch from 2f96758 to d918458 Compare April 3, 2024 14:34
Copy link

github-actions bot commented Apr 3, 2024

Coverage after merging feature/sc-46253/sdk-table-pagination into main

95.24%

Coverage Report
FileBranchesFuncsLinesUncovered Lines
src
   index.ts100%100%100%
src/client
   error.ts100%100%100%
   index.ts75.32%100%96.88%124, 13, 146, 148, 148–149, 15, 15, 151, 162, 169, 169, 17, 17, 171, 176, 179, 182, 184, 52, 82
   types.ts100%100%100%
src/odsql
   clauses.ts71.43%80%90.91%14, 32, 42
   index.ts83.72%95.74%94.19%111, 146, 25, 28, 56–57, 57, 57–58, 68, 78–79

Copy link

github-actions bot commented Apr 3, 2024

Coverage after merging feature/sc-46253/sdk-table-pagination into main

95.24%

Coverage Report
FileBranchesFuncsLinesUncovered Lines
src
   index.ts100%100%100%
src/client
   error.ts100%100%100%
   index.ts75.32%100%96.88%124, 13, 146, 148, 148–149, 15, 15, 151, 162, 169, 169, 17, 17, 171, 176, 179, 182, 184, 52, 82
   types.ts100%100%100%
src/odsql
   clauses.ts71.43%80%90.91%14, 32, 42
   index.ts83.72%95.74%94.19%111, 146, 25, 28, 56–57, 57, 57–58, 68, 78–79

@etienneburdet etienneburdet force-pushed the feature/sc-46253/sdk-table-pagination branch from e4eee8e to 7cb5135 Compare April 4, 2024 07:48
Copy link

github-actions bot commented Apr 4, 2024

Coverage after merging feature/sc-46253/sdk-table-pagination into main

95.24%

Coverage Report
FileBranchesFuncsLinesUncovered Lines
src
   index.ts100%100%100%
src/client
   error.ts100%100%100%
   index.ts75.32%100%96.88%124, 13, 146, 148, 148–149, 15, 15, 151, 162, 169, 169, 17, 17, 171, 176, 179, 182, 184, 52, 82
   types.ts100%100%100%
src/odsql
   clauses.ts71.43%80%90.91%14, 32, 42
   index.ts83.72%95.74%94.19%111, 146, 25, 28, 56–57, 57, 57–58, 68, 78–79

Copy link

github-actions bot commented Apr 5, 2024

Coverage after merging feature/sc-46253/sdk-table-pagination into main

95.24%

Coverage Report
FileBranchesFuncsLinesUncovered Lines
src
   index.ts100%100%100%
src/client
   error.ts100%100%100%
   index.ts75.32%100%96.88%124, 13, 146, 148, 148–149, 15, 15, 151, 162, 169, 169, 17, 17, 171, 176, 179, 182, 184, 52, 82
   types.ts100%100%100%
src/odsql
   clauses.ts71.43%80%90.91%14, 32, 42
   index.ts83.72%95.74%94.19%111, 146, 25, 28, 56–57, 57, 57–58, 68, 78–79

@etienneburdet etienneburdet force-pushed the feature/sc-46253/sdk-table-pagination branch from a2c0a8f to 9d92b0d Compare April 16, 2024 14:52
Copy link

Coverage after merging feature/sc-46253/sdk-table-pagination into main

94.64%

Coverage Report
FileBranchesFuncsLinesUncovered Lines
src
   index.ts100%100%100%
src/client
   error.ts100%100%100%
   index.ts74.03%100%95.31%102–103, 124, 13, 146, 148, 148–149, 15, 15, 151, 162, 169, 169, 17, 17, 171, 176, 179, 182, 184, 52, 82
   types.ts100%100%100%
src/odsql
   clauses.ts71.43%80%90.91%14, 32, 42
   index.ts83.72%95.74%94.19%111, 146, 25, 28, 56–57, 57, 57–58, 68, 78–79

1 similar comment
Copy link

Coverage after merging feature/sc-46253/sdk-table-pagination into main

94.64%

Coverage Report
FileBranchesFuncsLinesUncovered Lines
src
   index.ts100%100%100%
src/client
   error.ts100%100%100%
   index.ts74.03%100%95.31%102–103, 124, 13, 146, 148, 148–149, 15, 15, 151, 162, 169, 169, 17, 17, 171, 176, 179, 182, 184, 52, 82
   types.ts100%100%100%
src/odsql
   clauses.ts71.43%80%90.91%14, 32, 42
   index.ts83.72%95.74%94.19%111, 146, 25, 28, 56–57, 57, 57–58, 68, 78–79

Copy link

Coverage after merging feature/sc-46253/sdk-table-pagination into main

94.64%

Coverage Report
FileBranchesFuncsLinesUncovered Lines
src
   index.ts100%100%100%
src/client
   error.ts100%100%100%
   index.ts74.03%100%95.31%102–103, 124, 13, 146, 148, 148–149, 15, 15, 151, 162, 169, 169, 17, 17, 171, 176, 179, 182, 184, 52, 82
   types.ts100%100%100%
src/odsql
   clauses.ts71.43%80%90.91%14, 32, 42
   index.ts83.72%95.74%94.19%111, 146, 25, 28, 56–57, 57, 57–58, 68, 78–79

1 similar comment
Copy link

Coverage after merging feature/sc-46253/sdk-table-pagination into main

94.64%

Coverage Report
FileBranchesFuncsLinesUncovered Lines
src
   index.ts100%100%100%
src/client
   error.ts100%100%100%
   index.ts74.03%100%95.31%102–103, 124, 13, 146, 148, 148–149, 15, 15, 151, 162, 169, 169, 17, 17, 171, 176, 179, 182, 184, 52, 82
   types.ts100%100%100%
src/odsql
   clauses.ts71.43%80%90.91%14, 32, 42
   index.ts83.72%95.74%94.19%111, 146, 25, 28, 56–57, 57, 57–58, 68, 78–79

@etienneburdet etienneburdet force-pushed the feature/sc-46253/sdk-table-pagination branch from fc103bc to d3899da Compare April 18, 2024 13:36
Copy link

Coverage after merging feature/sc-46253/sdk-table-pagination into main

94.64%

Coverage Report
FileBranchesFuncsLinesUncovered Lines
src
   index.ts100%100%100%
src/client
   error.ts100%100%100%
   index.ts74.03%100%95.31%102–103, 124, 13, 146, 148, 148–149, 15, 15, 151, 162, 169, 169, 17, 17, 171, 176, 179, 182, 184, 52, 82
   types.ts100%100%100%
src/odsql
   clauses.ts71.43%80%90.91%14, 32, 42
   index.ts83.72%95.74%94.19%111, 146, 25, 28, 56–57, 57, 57–58, 68, 78–79

1 similar comment
Copy link

Coverage after merging feature/sc-46253/sdk-table-pagination into main

94.64%

Coverage Report
FileBranchesFuncsLinesUncovered Lines
src
   index.ts100%100%100%
src/client
   error.ts100%100%100%
   index.ts74.03%100%95.31%102–103, 124, 13, 146, 148, 148–149, 15, 15, 151, 162, 169, 169, 17, 17, 171, 176, 179, 182, 184, 52, 82
   types.ts100%100%100%
src/odsql
   clauses.ts71.43%80%90.91%14, 32, 42
   index.ts83.72%95.74%94.19%111, 146, 25, 28, 56–57, 57, 57–58, 68, 78–79

Copy link

Coverage after merging feature/sc-46253/sdk-table-pagination into main

94.64%

Coverage Report
FileBranchesFuncsLinesUncovered Lines
src
   index.ts100%100%100%
src/client
   error.ts100%100%100%
   index.ts74.03%100%95.31%102–103, 124, 13, 146, 148, 148–149, 15, 15, 151, 162, 169, 169, 17, 17, 171, 176, 179, 182, 184, 52, 82
   types.ts100%100%100%
src/odsql
   clauses.ts71.43%80%90.91%14, 32, 42
   index.ts83.72%95.74%94.19%111, 146, 25, 28, 56–57, 57, 57–58, 68, 78–79

1 similar comment
Copy link

Coverage after merging feature/sc-46253/sdk-table-pagination into main

94.64%

Coverage Report
FileBranchesFuncsLinesUncovered Lines
src
   index.ts100%100%100%
src/client
   error.ts100%100%100%
   index.ts74.03%100%95.31%102–103, 124, 13, 146, 148, 148–149, 15, 15, 151, 162, 169, 169, 17, 17, 171, 176, 179, 182, 184, 52, 82
   types.ts100%100%100%
src/odsql
   clauses.ts71.43%80%90.91%14, 32, 42
   index.ts83.72%95.74%94.19%111, 146, 25, 28, 56–57, 57, 57–58, 68, 78–79

Copy link

Coverage after merging feature/sc-46253/sdk-table-pagination into main

94.64%

Coverage Report
FileBranchesFuncsLinesUncovered Lines
src
   index.ts100%100%100%
src/client
   error.ts100%100%100%
   index.ts74.03%100%95.31%102–103, 124, 13, 146, 148, 148–149, 15, 15, 151, 162, 169, 169, 17, 17, 171, 176, 179, 182, 184, 52, 82
   types.ts100%100%100%
src/odsql
   clauses.ts71.43%80%90.91%14, 32, 42
   index.ts83.72%95.74%94.19%111, 146, 25, 28, 56–57, 57, 57–58, 68, 78–79

1 similar comment
Copy link

Coverage after merging feature/sc-46253/sdk-table-pagination into main

94.64%

Coverage Report
FileBranchesFuncsLinesUncovered Lines
src
   index.ts100%100%100%
src/client
   error.ts100%100%100%
   index.ts74.03%100%95.31%102–103, 124, 13, 146, 148, 148–149, 15, 15, 151, 162, 169, 169, 17, 17, 171, 176, 179, 182, 184, 52, 82
   types.ts100%100%100%
src/odsql
   clauses.ts71.43%80%90.91%14, 32, 42
   index.ts83.72%95.74%94.19%111, 146, 25, 28, 56–57, 57, 57–58, 68, 78–79

@etienneburdet etienneburdet force-pushed the feature/sc-46253/sdk-table-pagination branch from ae7a29e to 8ca5f6d Compare April 30, 2024 12:03
Copy link

Coverage after merging feature/sc-46253/sdk-table-pagination into main

94.64%

Coverage Report
FileBranchesFuncsLinesUncovered Lines
src
   index.ts100%100%100%
src/client
   error.ts100%100%100%
   index.ts74.03%100%95.31%102–103, 124, 13, 146, 148, 148–149, 15, 15, 151, 162, 169, 169, 17, 17, 171, 176, 179, 182, 184, 52, 82
   types.ts100%100%100%
src/odsql
   clauses.ts71.43%80%90.91%14, 32, 42
   index.ts83.72%95.74%94.19%111, 146, 25, 28, 56–57, 57, 57–58, 68, 78–79

1 similar comment
Copy link

Coverage after merging feature/sc-46253/sdk-table-pagination into main

94.64%

Coverage Report
FileBranchesFuncsLinesUncovered Lines
src
   index.ts100%100%100%
src/client
   error.ts100%100%100%
   index.ts74.03%100%95.31%102–103, 124, 13, 146, 148, 148–149, 15, 15, 151, 162, 169, 169, 17, 17, 171, 176, 179, 182, 184, 52, 82
   types.ts100%100%100%
src/odsql
   clauses.ts71.43%80%90.91%14, 32, 42
   index.ts83.72%95.74%94.19%111, 146, 25, 28, 56–57, 57, 57–58, 68, 78–79

@etienneburdet etienneburdet force-pushed the feature/sc-46253/sdk-table-pagination branch from 8ca5f6d to 26a0713 Compare April 30, 2024 12:39
Copy link

Coverage after merging feature/sc-46253/sdk-table-pagination into main

94.64%

Coverage Report
FileBranchesFuncsLinesUncovered Lines
src
   index.ts100%100%100%
src/client
   error.ts100%100%100%
   index.ts74.03%100%95.31%102–103, 124, 13, 146, 148, 148–149, 15, 15, 151, 162, 169, 169, 17, 17, 171, 176, 179, 182, 184, 52, 82
   types.ts100%100%100%
src/odsql
   clauses.ts71.43%80%90.91%14, 32, 42
   index.ts83.72%95.74%94.19%111, 146, 25, 28, 56–57, 57, 57–58, 68, 78–79

1 similar comment
Copy link

Coverage after merging feature/sc-46253/sdk-table-pagination into main

94.64%

Coverage Report
FileBranchesFuncsLinesUncovered Lines
src
   index.ts100%100%100%
src/client
   error.ts100%100%100%
   index.ts74.03%100%95.31%102–103, 124, 13, 146, 148, 148–149, 15, 15, 151, 162, 169, 169, 17, 17, 171, 176, 179, 182, 184, 52, 82
   types.ts100%100%100%
src/odsql
   clauses.ts71.43%80%90.91%14, 32, 42
   index.ts83.72%95.74%94.19%111, 146, 25, 28, 56–57, 57, 57–58, 68, 78–79

We'll change that later anyways, but fixes chromatic diff.
@etienneburdet etienneburdet force-pushed the feature/sc-46253/sdk-table-pagination branch from 26a0713 to 14a3278 Compare April 30, 2024 13:10
@etienneburdet etienneburdet merged commit 3592c20 into main Apr 30, 2024
7 of 9 checks passed
@etienneburdet etienneburdet deleted the feature/sc-46253/sdk-table-pagination branch April 30, 2024 13:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants