feat: Use skore-ui widgets in notebooks

[rouk1]

This PR makes our existing widgets available in notebooks.

UI preview

vscode notebooks

widgets.mp4

JupyterLab

jupyter-widgets.mp4

Warning

For now Marimo is not supported as it requires to use Anywidget, I'd like to split this rework in another PR to merge this then iterate.
My Hex demo is expired so I could not test it : (

Implementation choices/details front

• all body/root level CSS rules now use a class (.skore-ui) to avoid style leak
• main.ts now instantiate it's main app dynamically according to it's container name
• router.ts does not instantiate the browser history as a side effect (this feature is blocked by vs code)
• build process now inlines fonts as base64 URLs
• build process now output bundles with predictible names

Implementation choices/details back

• items now implement a get_serializable_dict method that returns a JSON serializable dict
• abstract item class now implements a _repr_mimebundle_ method that returns supported media types (for now HTML only)
• API routes has been refactored to use the new get_serializable_dict method

[github-actions]

Coverage Report for ./skore-ui

Status	Category	Percentage	Covered / Total
🔵	Lines	85.24%	3305 / 3877
🔵	Statements	85.24%	3305 / 3877
🔵	Functions	45.8%	60 / 131
🔵	Branches	82.19%	240 / 292

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
skore-ui/src/StandaloneWidget.vue	0%	0%	0%	0%	1-31
skore-ui/src/main.ts	0%	0%	0%	0%	1-26
skore-ui/src/router.ts	87.8%	100%	0%	87.8%	43-47
skore-ui/src/components/DataFrameWidget.vue	85.82%	81.25%	33.33%	85.82%	28-29, 45, 68-69, 79-88, 93-96, 156
skore-ui/src/components/LoadingBars.vue	0%	0%	0%	0%	1-2
skore-ui/src/components/PlotlyWidget.vue	100%	100%	100%	100%
skore-ui/src/components/VegaWidget.vue	100%	100%	100%	100%

Generated in workflow #1674 for commit 96c751a by the Vitest Coverage Report Action

[github-actions]

pytest coverage report

File	Stmts	Miss	Cover	Missing
src/skore
__init__.py	18	0	100%
__main__.py	8	1	1	80%
exceptions.py	4	0	100%
src/skore/cli
__init__.py	8	0	100%
cli.py	32	0	100%
launch_dashboard.py	22	12	0	42%
quickstart_command.py	12	2	0	83%
src/skore/item
__init__.py	21	0	100%
cross_validation_item.py	125	11	2	92%
item.py	41	13	0	68%
item_repository.py	42	2	1	93%
media_item.py	70	4	1	94%
numpy_array_item.py	25	1	1	93%
pandas_dataframe_item.py	34	1	1	95%
pandas_series_item.py	34	1	1	95%
polars_dataframe_item.py	32	1	1	94%
polars_series_item.py	27	1	1	94%
primitive_item.py	27	2	1	92%
sklearn_base_estimator_item.py	33	1	1	95%
skrub_table_report_item.py	10	1	1	86%
src/skore/persistence
__init__.py	0	0	100%
abstract_storage.py	22	1	0	95%
disk_cache_storage.py	33	1	1	95%
in_memory_storage.py	20	0	100%
src/skore/project
__init__.py	4	0	100%
create.py	50	8	0	88%
load.py	23	3	0	89%
project.py	62	4	4	91%
src/skore/sklearn
__init__.py	3	0	100%
find_ml_task.py	19	2	3	85%
types.py	2	0	100%
src/skore/sklearn/cross_validation
__init__.py	2	0	100%
cross_validation_helpers.py	41	4	1	89%
cross_validation_reporter.py	28	1	1	94%
plot.py	38	1	4	90%
src/skore/sklearn/train_test_split
__init__.py	0	0	100%
train_test_split.py	34	2	1	94%
src/skore/sklearn/train_test_split/warning
__init__.py	8	0	100%
high_class_imbalance_too_few_examples_warning.py	17	3	2	78%
high_class_imbalance_warning.py	18	2	1	88%
random_state_unset_warning.py	11	1	1	87%
shuffle_true_warning.py	9	0	1	91%
stratify_is_set_warning.py	11	1	1	87%
time_based_column_warning.py	22	1	2	89%
train_test_split_warning.py	5	1	0	80%
src/skore/ui
__init__.py	0	0	100%
app.py	25	5	2	71%
dependencies.py	7	1	0	86%
project_routes.py	50	0	100%
src/skore/utils
__init__.py	0	0	100%
_show_versions.py	29	0	100%
src/skore/view
__init__.py	0	0	100%
view.py	5	0	100%
view_repository.py	16	2	1	83%
TOTAL	1239	98	90%

Tests	Skipped	Failures	Errors	Time
187	0 💤	0 ❌	0 🔥	43.082s ⏱️

[tuscland]

Ping @koaning

[koaning]

If we just support Jupyter for now that sure seems fine. While I am a fan of Marimo I would argue that this is always possible as an add-on feature later.

Looking at the video though ... it seems that the altair chart does not show the axes? @rouk1 might that be a bug?

[rouk1]

Looking at the video though ... it seems that the altair chart does not show the axes? @rouk1 might that be a bug?

Nice catch I need to look at this.

[rouk1]

Looking at the video though ... it seems that the altair chart does not show the axes? @rouk1 might that be a bug?

@koaning bug has been fixed !