feat(UI): Add markdown editor to annotate item #1082

rouk1 · 2025-01-10T14:40:15Z

Part of #1041

upgrade dependencies (eslint 9 \o/)
new icons
minimal skinnable rich text editor
expose python's set_note as a JSON API
plug the API in the frontend

UI preview

annotate.mp4

implementation choices

Finding a good and not too opinionated rich text editor is no easy job. After struggling with a few libs I decided that rolling a minimal editor may do the job (at least for now).

The RichTextEditor component (probably badly named) tries to:

help user with basic markdown syntax
keep interactions button outside of it for best skinnability

In a future work we may move to something more powerful.

github-actions · 2025-01-10T14:41:17Z

Coverage Report for frontend

Status	Category	Percentage	Covered / Total
🔵	Lines	85.49%	3577 / 4184
🔵	Statements	85.49%	3577 / 4184
🔵	Functions	44.85%	61 / 136
🔵	Branches	79.06%	204 / 258

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
skore-ui/src/dto.ts	100%	100%	100%	100%
skore-ui/src/models.ts	75%	20%	100%	75%	29-30, 32-33, 35-37
skore-ui/src/components/CrossValidationReportResults.vue	100%	100%	100%	100%
skore-ui/src/components/FloatingTooltip.vue	100%	100%	100%	100%
skore-ui/src/components/ImageWidget.vue	100%	100%	100%	100%
skore-ui/src/components/RichTextEditor.vue	100%	100%	100%	100%
skore-ui/src/components/SimpleButton.vue	91.3%	50%	100%	91.3%	1, 41
skore-ui/src/components/ToastNotification.vue	87.09%	64.28%	100%	87.09%	21, 32-33, 38-42
skore-ui/src/components/TreeAccordionItem.vue	83.96%	90%	20%	83.96%	23-27, 39-49, 59-60
skore-ui/src/services/api.ts	85.71%	61.53%	100%	85.71%	18-19, 45-48, 57-58, 92-95
skore-ui/src/services/utils.ts	96.87%	96.66%	93.75%	96.87%	199-201
skore-ui/src/stores/project.ts	72.2%	90%	59.09%	72.2%	34-37, 47-65, 73-80, 139-140, 248-254, 261-266, 273-278, 284-287, 300, 319-328, 334-336, 371-372
skore-ui/src/views/ComponentsView.vue	92.74%	100%	0%	92.74%	46-56, 62-87, 174-203, 207-216, 229-233, 237-243, 1384-1389, 1393-1400
skore-ui/src/views/project/ItemNote.vue	100%	100%	100%	100%
skore-ui/src/views/project/ProjectView.vue	74.48%	75%	0%	74.48%	28-52, 59, 90-91

Generated in workflow #81 for commit 6a15f27 by the Vitest Coverage Report Action

- upgrade dependencies (eslint 9 \o/) - new icons - minimal kinnable ich text editor

github-actions · 2025-01-16T08:45:38Z

Coverage Report for backend

File	Stmts	Miss	Cover	Missing
venv/lib/python3.12/site-packages/skore
__init__.py	14	0	100%
__main__.py	8	1	80%	19
exceptions.py	3	0	100%
venv/lib/python3.12/site-packages/skore/cli
__init__.py	5	0	100%
cli.py	33	3	85%	104, 111, 117
color_format.py	43	3	90%	35–>40, 41–43
launch_dashboard.py	26	15	39%	36–57
quickstart_command.py	14	7	50%	37–51
venv/lib/python3.12/site-packages/skore/item
__init__.py	21	1	91%	46
cross_validation_item.py	137	10	93%	27–42, 373
item.py	42	13	69%	91, 94, 98–118
item_repository.py	65	5	92%	12–13, 211–212, 235
media_item.py	70	4	94%	15–18
numpy_array_item.py	25	1	93%	15
pandas_dataframe_item.py	34	1	95%	15
pandas_series_item.py	34	1	95%	15
polars_dataframe_item.py	32	1	94%	15
polars_series_item.py	27	1	94%	15
primitive_item.py	27	2	92%	13–15
sklearn_base_estimator_item.py	33	1	95%	15
skrub_table_report_item.py	10	1	86%	11
venv/lib/python3.12/site-packages/skore/persistence
__init__.py	0	0	100%
abstract_storage.py	22	1	95%	130
disk_cache_storage.py	33	1	95%	44
in_memory_storage.py	20	0	100%
venv/lib/python3.12/site-packages/skore/project
__init__.py	3	0	100%
create.py	52	8	88%	116–122, 132–133, 140–141
load.py	23	3	89%	43–45
open.py	14	0	100%
project.py	68	3	94%	118, 152, 156
venv/lib/python3.12/site-packages/skore/sklearn
__init__.py	4	0	100%
_base.py	140	2	98%	171–>176, 186–187
find_ml_task.py	43	1	96%	71–>84, 83
types.py	2	0	100%
venv/lib/python3.12/site-packages/skore/sklearn/_estimator
__init__.py	10	0	100%
metrics_accessor.py	265	4	97%	149–158, 183–>236, 191, 434–>437, 783–>786
report.py	116	0	99%	212–>218, 220–>222
utils.py	11	11	0%	1–19
venv/lib/python3.12/site-packages/skore/sklearn/_plot
__init__.py	4	0	100%
precision_recall_curve.py	126	2	97%	200–>203, 313–314
prediction_error.py	75	0	99%	289–>297
roc_curve.py	95	3	94%	156, 167–>170, 223–224
utils.py	77	0	100%
venv/lib/python3.12/site-packages/skore/sklearn/cross_validation
__init__.py	2	0	100%
cross_validation_helpers.py	47	4	90%	104–>136, 123–126
cross_validation_reporter.py	35	1	95%	177
venv/lib/python3.12/site-packages/skore/sklearn/cross_validation/plots
__init__.py	0	0	100%
compare_scores_plot.py	29	1	92%	10, 45–>48
timing_plot.py	29	1	94%	10
venv/lib/python3.12/site-packages/skore/sklearn/train_test_split
__init__.py	0	0	100%
train_test_split.py	36	2	94%	16–17
venv/lib/python3.12/site-packages/skore/sklearn/train_test_split/warning
__init__.py	8	0	100%
high_class_imbalance_too_few_examples_warning.py	17	3	78%	16–18, 80
high_class_imbalance_warning.py	18	2	88%	16–18
random_state_unset_warning.py	11	1	87%	15
shuffle_true_warning.py	9	0	91%	44–>exit
stratify_is_set_warning.py	11	1	87%	15
time_based_column_warning.py	22	1	89%	17, 69–>exit
train_test_split_warning.py	5	1	80%	21
venv/lib/python3.12/site-packages/skore/ui
__init__.py	0	0	100%
app.py	25	5	71%	24, 53–58
dependencies.py	7	1	86%	12
project_routes.py	61	0	100%
venv/lib/python3.12/site-packages/skore/utils
__init__.py	0	0	100%
_accessor.py	7	0	100%
_logger.py	21	4	84%	14–18
_patch.py	11	5	46%	20–37
_progress_bar.py	28	0	100%
_show_versions.py	31	0	100%
venv/lib/python3.12/site-packages/skore/view
__init__.py	0	0	100%
view.py	5	0	100%
view_repository.py	16	2	83%	8–9
TOTAL	2397	145	93%

Tests	Skipped	Failures	Errors	Time
459	3 💤	0 ❌	0 🔥	51.709s ⏱️

augustebaum

The note should be specific to an item version; right now the note stays the same regardless of the version

skore-ui/src/components/RichTextEditor.vue

rouk1 · 2025-01-16T16:26:43Z

The note should be specific to an item version; right now the note stays the same regardless of the version

This is fixed thanks for the report :)

augustebaum

Alright, good stuff!

sylvaincom · 2025-01-16T17:36:03Z

Very nice, thanks for shipping this fast!

glemaitre · 2025-01-16T18:29:32Z

Nice @rouk1

github-actions bot assigned rouk1 Jan 10, 2025

rouk1 force-pushed the markdown-editor branch from c8c32ce to 5e0ee8f Compare January 14, 2025 15:09

rouk1 changed the title ~~feat(UI): Markdown editor~~ feat(UI): Markdown editor to annotate item Jan 15, 2025

rouk1 mentioned this pull request Jan 15, 2025

Annotate the version of an item #1041

Closed

4 tasks

feat(UI): Markdown editor to annotate item

ccd867d

- upgrade dependencies (eslint 9 \o/) - new icons - minimal kinnable ich text editor

rouk1 force-pushed the markdown-editor branch from 00b7241 to ccd867d Compare January 15, 2025 15:37

rouk1 added 3 commits January 15, 2025 17:39

minimla note componenet in project views

2a1f077

set note exposed as a JSON API

79453ed

use project store to call note API

cce426e

rouk1 added 5 commits January 16, 2025 10:49

Merge branch 'main' into markdown-editor

6bda8c5

plug note API

4a189d2

keyboard UX

a002c85

placeholder if no note is set

f6dddc8

clear note button

9e5ec4e

rouk1 force-pushed the markdown-editor branch from 509582c to 9e5ec4e Compare January 16, 2025 13:40

disable @typescript-eslint/no-explicit-any

34bc596

rouk1 marked this pull request as ready for review January 16, 2025 13:57

augustebaum self-requested a review January 16, 2025 14:02

augustebaum suggested changes Jan 16, 2025

View reviewed changes

augustebaum reviewed Jan 16, 2025

View reviewed changes

skore-ui/src/components/RichTextEditor.vue Outdated Show resolved Hide resolved

rouk1 added 2 commits January 16, 2025 16:08

handle versioned notes (#1138)

52b39dc

stop polling during note editions

4424577

rouk1 added 3 commits January 16, 2025 17:46

better list generation

7b50528

Merge branch 'main' into markdown-editor

b75c54f

Merge branch 'main' into markdown-editor

6a15f27

augustebaum approved these changes Jan 16, 2025

View reviewed changes

augustebaum changed the title ~~feat(UI): Markdown editor to annotate item~~ feat(UI): Add markdown editor to annotate item Jan 16, 2025

augustebaum merged commit bd4bd09 into main Jan 16, 2025
17 of 19 checks passed

augustebaum deleted the markdown-editor branch January 16, 2025 17:14

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(UI): Add markdown editor to annotate item #1082

feat(UI): Add markdown editor to annotate item #1082

rouk1 commented Jan 10, 2025 •

edited

Loading

github-actions bot commented Jan 10, 2025 •

edited

Loading

github-actions bot commented Jan 16, 2025 •

edited

Loading

augustebaum left a comment

rouk1 commented Jan 16, 2025

augustebaum left a comment

sylvaincom commented Jan 16, 2025

glemaitre commented Jan 16, 2025

feat(UI): Add markdown editor to annotate item #1082

feat(UI): Add markdown editor to annotate item #1082

Conversation

rouk1 commented Jan 10, 2025 • edited Loading

UI preview

implementation choices

github-actions bot commented Jan 10, 2025 • edited Loading

Coverage Report for frontend

github-actions bot commented Jan 16, 2025 • edited Loading

augustebaum left a comment

Choose a reason for hiding this comment

rouk1 commented Jan 16, 2025

augustebaum left a comment

Choose a reason for hiding this comment

sylvaincom commented Jan 16, 2025

glemaitre commented Jan 16, 2025

rouk1 commented Jan 10, 2025 •

edited

Loading

github-actions bot commented Jan 10, 2025 •

edited

Loading

github-actions bot commented Jan 16, 2025 •

edited

Loading