feat: Add support for skrub's TableReport

[rouk1]

This PR adds a SkrubTableReportItem.

Usage:

import pandas as pd
from skore.project import create, load
from skrub import TableReport

create(project_name="project.skore")
s = load("project.skore")
df = pd.DataFrame(dict(a=[1, 2], b=["one", "two"], c=[11.1, 11.1]))
report = TableReport(df)
s.put("table report", report)

UI preview:

Limitation sounds like there is no dark mode for now.

[github-actions]

Coverage Report for ./skore-ui

Status	Category	Percentage	Covered / Total
🔵	Lines	82.46%	2191 / 2657
🔵	Statements	82.46%	2191 / 2657
🔵	Functions	46.34%	57 / 123
🔵	Branches	80.44%	181 / 225

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
skore-ui/src/components/HtmlSnippetWidget.vue	100%	100%	100%	100%
skore-ui/src/stores/project.ts	73.66%	86.53%	61.9%	73.66%	39-42, 52-70, 78-85, 142-143, 251-257, 264-269, 276-281, 287-290, 303, 322-331, 363-367, 394-395

Generated in workflow #1212 for commit af1d0bb by the Vitest Coverage Report Action

[tuscland]

I like the fact that we have this feature in a basic form, allowing the user to track table reports. This also promotes skrub in our documentation.

Can we hack the font so it looks better?

[jeromedockes]

thanks for adding this! indeed that's very nice for skrub :)

• @rouk1 you are right there is no dark mode for now, we plan to add one but we've considered it low-priority -- if it's important for skore we can try to do it soon
• @tuscland if you're using the latest skrub release (0.3.1) the table report should use the same font as its parent element. if that's not the case please LMK or if you can open an issue on the skrub repo. Or, as I've noticed it is put in an iframe, you can use TableReport.html() rather than TableReport.html_snippet() to get a full page instead of just a fragment, and then the report would show in some default sans-serif font
• as a side note we're planning a skrub release tomorrow that contains some improvements to the reports

[jeromedockes]

here is an example with a slightly larger dataset:

[jeromedockes]

also I've noticed that adding a report makes the ui very slow and I suppose that is a problem in the tablereport itself rather than on the skore side

[rouk1]

Hi @jeromedockes thanks for your comments.
We use iframe to ensure that our cards get resized when there content is updated. We control the head and body of the iframe's srcdoc. I need to force a font here.

Could you share the snippet you used to populate that report ?

[rouk1]

Font family is now forced to our Geist with fallback on the default sans.

[jeromedockes]

Could you share the snippet you used to populate that report ?

from skore.project import create, load
from skrub import TableReport, datasets

create(project_name="project.skore")
s = load("project.skore")
df = datasets.fetch_employee_salaries().X
report = TableReport(df)
s.put("table report", report)

[rouk1]

There is indeed a small freeze when the report is rendering. Especially when switching to the distribution tab.

[tuscland]

I was wondering, don't we want to store the raw data used to present the report?
skrub has a JSON representation of the table report.
Maybe as a future improvement?

[rouk1]

I was wondering, don't we want to store the raw data used to present the report? skrub has a JSON representation of the table report. Maybe as a future improvement?

As sklearn model viewer skrubs generates unique ids for dom elements. This is a bit painful for use as it triggers a render of the widget at each polling. So like for sklearn models I chose to store the rendered data.

[thomass-dev]

What do you think about changing the class to a "namespace"?

[rouk1]

I was a bit to fast to accept using inheritance. HTML as never been treated as a media, it was a primitive type with text/html media type. We do have a bug now #823.

@thomass-dev & @augustebaum I'll let you decide how to manage html and let me know how to fix this.