Show table groups without table rows

[Nayananga]

Wave SDK Version, OS

(e.g. 4.2.0, Windows)

0.26.1, MacOS

Actual behavior

(A clear and concise description of what happened.) I want to show table groups that may or may not have table rows, But when I provide rows=[] to a particular table_group it doesn’t visible in the UI.

ui.table_group(
    label="Model Name 3",
    rows=[],
    collapsed=False,
)

But when I provide a table_group with a table_row where it has an empty list for cells it shows Invalid Date text for corresponding empty values where the table_column has data_type="time"

ui.table_group(
    label="Model Name 2",
    rows=[
        ui.table_row(
            name="model_2_version_3_table_row",
            cells=[],
        )
    ],
    collapsed=False,
),

Expected behavior

(A clear and concise description of what you expected to happen.) Table groups should be able to exist even without table rows

Steps To Reproduce

sample code

from h2o_wave import main, app, Q, ui

@app('/')
async def serve(q: Q):
    q.page['meta'] = ui.form_card(
        box='1 1 5 5',
        items=[
            ui.table(
                name='models_table',
                height="400px",
                columns=[
                    ui.table_column(
                        name="model_version_name_table_column",
                        label="Model Version Name",
                    ),
                    ui.table_column(
                        name="created_date_table_column",
                        label="Created Date",
                        data_type="time",
                    ),
                    ui.table_column(
                        name="last_updated_table_column",
                        label="Last Updated",
                        data_type="time",
                    ),
                ],
                groups=[
                    ui.table_group(
                        label="Model Name 1",
                        rows=[
                            ui.table_row(
                                name="model_1_version_1_table_row",
                                cells=[
                                    "Model Version 1",
                                    "2023/07/26 5:30 pm",
                                    "2022/06/25 04:29 am"
                                ],
                            ),
                            ui.table_row(
                                name="model_1_version_2_table_row",
                                cells=[
                                    "Model Version 2",
                                    "2023/07/26 5:30 pm",
                                    "2022/06/25 04:29 am"
                                ],
                            )
                        ],
                        collapsed=False,
                    ),
                    ui.table_group(
                        label="Model Name 2",
                        rows=[
                            ui.table_row(
                                name="model_2_version_1_table_row",
                                cells=[
                                    "Model Version 1",
                                    "2023/07/26 5:30 pm",
                                    "2022/06/25 04:29 am"
                                ],
                            ),
                            ui.table_row(
                                name="model_2_version_2_table_row",
                                cells=[
                                    "Model Version 2",
                                    "",
                                    ""
                                ],
                            ),
                            ui.table_row(
                                name="model_2_version_3_table_row",
                                cells=[],
                            )
                        ],
                        collapsed=False,
                    ),
                    ui.table_group(
                        label="Model Name 3",
                        rows=[],
                        collapsed=False,
                    )
                ],
            ),
        ]
    )

    await q.page.save()

[marek-mihok]

@Nayananga this is a default by FluentUI's DetailsList the Wave is using but it can be changed on our side.

@mturoci, it can be easily managed by specifying groupProps={{ showEmptyGroups: true }} in DetailsList. I wonder whether make it a new default or to introduce a new prop. Having a lot of empty groups in a table can be confusing in some situations.

[mturoci]

@Nayananga what's the point of showing empty groups?

[Nayananga]

@Nayananga what's the point of showing empty groups?

As I've mentioned above, " I want to show table groups that may or may not have table rows"

these table data are fetching from a backend service, as how the ML works that may have models without registered model versions.

[mturoci]

That does not answer my question. Let me rephrase it: What's the UX value of showing empty groups?

[Nayananga]

That does not answer my question. Let me rephrase it: What's the UX value of showing empty groups?

let me ping the UX team to answer it, @shihan007

cc @shereezhang @ShehanIshanka @sandruparo

[shihan007]

Let me discuss this with @shereezhang and get back to you

[shereezhang]

Hey thanks so much for considering this ticket @marek-mihok and @mturoci!

In the MLOps App 'Models' tab, there's a table which lists all the Registered Model Versions in a Project, and currently we group them by the Parent Model (ie. first row is Version 1, second is Version 2, etc) to show model lineage across versions. (can see example in Nayananga's screenshot)

In MLOps, it's possible to delete Model Versions without deleting the Parent Model (so the user can delete all rows but the table group should still exist cause the 'Parent' exists). We'd like to still be able to display this 'Parent Model' as an empty table group so the user knows that parent model still exists. Knowing the Parent Model exists in the UI is important because 1) the user may want to register new Model Versions (ie. rows) under it, or 2) we raise an error if a user tries to create Parent Models with duplicate names so the user should know what current Parent Model names are already used.

Hopefully this is helpful! let me know if there are further questions. cc @Nayananga @shihan007

[mturoci]

Thanks for the clarification @shereezhang, that makes sense.

it can be easily managed by specifying groupProps={{ showEmptyGroups: true }}. I wonder whether make it a new default or to introduce a new prop.

@marek-mihok let's make it a new default.