fix/feat: Adjust progress_table_cell_type not to increase table row height #1921

[kaitlyncliu]

The PR fulfills these requirements: (check all the apply)

• It's submitted to the main branch.
• When resolving a specific issue, it's referenced in the PR's title (e.g. feat: Add a button #xxx, where "xxx" is the issue number).
• When resolving a specific issue, the PR description includes Closes #xxx, where "xxx" is the issue number.
• If changes were made to ui folder, unit tests (make test) still pass.
• New/updated tests are included

---

@kellyycha and I fixed this issue by adding a new keyword argument type in the progress_table_cell_type that allows users to implement a bar style progress cell with the progress value indicated to the left of the bar, reducing the height of the row.

This is how the table.py example looks originally:

Without the Progress column, the row height would look like this, which has a row height that is noticeably shorter than with the Progress:

Our implementation results in a bar that looks like the following and maintains a similar row height to the row without a progress cell:

We default type to the spinner/arc progress indicator so that previously implemented tables will continue to look the same.

The UI and unit tests still pass:

Closes #1921

[mturoci]

Thanks @kaitlyncliu! The python/R API is autogenerated, not written by hand. Run make generate to generate it properly.

The PR needs:

• Python example with the new feature.
• Include the new feature in the documentation so that people can find it. (https://wave.h2o.ai/docs/widgets/form/table/)

[mturoci]

Let's go with compact?: B, defaulting to false.

[kellyycha]

done

[mturoci]

The width should be fluid - always take the full column width instead of being fixed. Same for both types.

[kellyycha]

Not sure what you mean about having the width be fluid.
The existing code before I changed anything had the width and height set to 50, which is the size of the spinner (this is what increased the row height of the table). I used this idea to create the bar, setting the bar width to 50 as well.
I'll remove the barContainer's width and use a margin for making the percentage sign appear next to the bar instead of setting it as 100. Is that ok?

[mturoci]

What is absolute positioning here for?

[kellyycha]

I just reused the previous code. It positions the percentage inside the spinner. I'll organize the code a bit better to make it more clear.

[kellyycha]

Hi @mturoci
I added the python example file called table_progress.py, wrote documentation for https://wave.h2o.ai/docs/widgets/form/table/, changed the attribute from type to compact using make generate, and cleaned up the CSS, but am still unsure about the width of the progress arc and bar being fluid instead of a set number. Please let me know what you think and if there are any more changes necessary!

[mturoci]

The changes look better now. Good job @kaitlyncliu!

am still unsure about the width of the progress arc and bar being fluid instead of a set number.

I meant this:

Screen.Recording.2023-12-13.at.10.17.59.AM.mov

Hint: Have a look at flexbox and its flex-grow prop :)