feat: TableReport dark theme #1201

rouk1 · 2024-12-13T14:58:47Z

This PR introduces a dark mode for the TableReport.
I tried to use as much as possible css variables all centralized in a _variables.css file.

UI preview

darkmode.mp4

jeromedockes · 2024-12-17T09:49:01Z

Hi @rouk1 ! thanks so much for doing this 🚀 the TableReport looks really nice in the proposed dark mod🤩
also having more systematic naming for all css variables will definitely help with maintainability

I noticed that some aspects that are not related to colors are affected by the PR as well; here are a first few comments

I noticed standalone-report.css has been removed; this is where we set the font when we ask the report for a full html page (when we ask for a fragment it uses the font of the parent element). as a result the report now uses the default browser's font but I would like to keep a sans-serif font which I think tends to be a bit more compact and more readable for short text
that's really a detail but a line has appeared that separates the selected tab and its panel, I think it is a bit clearer that it is the selected tab when they are connected
the selected column's card is not very well separated from the background anymore (I think due to removing the shadow)

the "Copied!" message from the copy to clipboard button used to be in reverse video, I think that helps notice it and separate it from the background

the copy buttons on the sample from the dataframe used to be bigger and in the top-left corner, now they are centered

also that sample text box used to have a max width and scroll horizontally which I think can be useful if the text is very long
in the summary statistics column the buttons are now smaller and have more padding which makes the icons hard to read IMO

In the summary statistics there used to be a thick gray line separating the first column when it overlaps the rest, I think it helps realize that this column is sticky and some content is hidden behind it due to horizontal scrolling, that has been removed

in the toggle tip shown below, there used to be a transition delay so that if we hover the ( i ) button and then move the mouse to hover over the text it doesn't disappear; now as soon as the mouse leaves the button the text disappears. also there used to be a ring around it when we click it

not sure if it is intentional but the background color of the header in the associations panel is gone, I don't have a strong opinion as to whether it is better or worse

most of these changes don't seem to be related to dark mode but it is true we had discussed that this is an opportunity to refactor the css a bit. so I'm not sure which of these are intentional or not, maybe it would help to have another quick call also with @glemaitre to discuss this? it might be easier interactively while looking at an open report.

now regarding the colors and the dark mode itself, here are a couple of comments:

the card in the first panel was green to show its association with the selected column, but that does not apply to the "distributions" panel so using a neutral gray color there was intentional
I think the orange in dark mode looks good but the reason we had used a different color is that we show histograms of numeric columns in blue and bar plots for categorical columns in orange so it might be good to use a third color for the card header to not give the impression there is a connection with the plot?
the axis lines and ticks in dark mode are not visible; I think we can find the previous pr one way to make sure they are

I think the white text on orange background does not have a very high contrast and is a bit hard to read

thanks again for all this work and LMK if you would like to schedule a call or I can also come to montparnasse sometime!

rouk1 · 2024-12-17T10:51:52Z

Thanks for the review @jeromedockes, I'll try to work on your feedbacks on friday.

jeromedockes · 2024-12-17T12:39:18Z

cool, thanks!!

…ure)

…appear when hovering it - tip button outline is now blue

…ble column

…high contrast and is not related to plot colors

rouk1 · 2024-12-20T15:22:26Z

Hello @jeromedockes !

I think I've addressed your feedbacks. Please let me know if you want something else or if I miss something.

tackled feedbacks

standalone-report.css has been re-added (using new css vars nomenclature)
selected tab border bottom color is now equal to background color
fix column summaries shadow
copy button tooltip is now inverted and bold
copy text box as a max width of 100% hence it will never be larger than it's container (a horizontal scroller will appear at need)
summary statistics is now bigger and icons fits it
grey line that indicates that first two columns are sticky is visible to me
toggled tip content is now part oh the hover, hence it does not disappear when hovering it
tip button outline is now blue
association table header now uses default tertiary background color
card header are now in highlight color only whena ssociated with a table column
primary highlight color is now raisin instead of orange, it provides high contrast and is not related to plot colors
use 4 spaces in CSS to avoid large diff

the axis lines and ticks in dark mode are not visible; I think we can find the previous pr one way to make sure they are

Not sure on how I may address this.

UI preview

sk-tr-dm-pr.mp4

rouk1 · 2025-01-27T16:11:34Z

Made a few changes...
Now javascript is used to set a light or dark class to the #report element.
The report will be dark if the containing body as data-jp-theme-light="false" or data-vscode-theme-kind="vscode-dark", light if the shadowRoot body as data-jp-theme-light="true" or data-vscode-theme-kind="vscode-light" and if none of this attributes are set fallback to the user preferred color scheme.

jeromedockes · 2025-01-27T16:23:10Z

Thanks @rouk1 that's very cool... I was thinking we could look at the color of the parent element and try to guess from it what theme we should adopt but that's probably too brittle, I like your approach better.

BTW sorry for the delay we haven't forgotten about this PR but I took a long end-of-year vacation and recently we've been dealing with urgent stuff like the fact the service hosting the example datasets was down and a workshop that will take place this week -- from Thursday things should get back to normal

jeromedockes · 2025-01-27T16:24:17Z

skrub/_reporting/_data/templates/report.js

@@ -1,4 +1,5 @@
 if (customElements.get('skrub-table-report') === undefined) {
+    console.log("coucou");


rouk1 · 2025-01-28T08:20:46Z

Thanks @rouk1 that's very cool... I was thinking we could look at the color of the parent element and try to guess from it what theme we should adopt but that's probably too brittle, I like your approach better.

BTW sorry for the delay we haven't forgotten about this PR but I took a long end-of-year vacation and recently we've been dealing with urgent stuff like the fact the service hosting the example datasets was down and a workshop that will take place this week -- from Thursday things should get back to normal

No worries we also add issues with that provider : )

jeromedockes

Thanks a lot @rouk1 !

I pushed a few small changes, mainly

to set the matplotlib config before plotting so that all the lines, ticks etc. have the same color as the text
to revert 1 or 2 details not related to the color theme eg the size of some buttons in pixels instead of relative to font size could cause them to be too big or small in some cases (image below)
to also set the color of the full page when we generate a standalone report using the same media query.

I think the PR is ready to merge now. Let me know if you want to make some more changes otherwise I'll merge it (and we can always do further tweaks in other prs).

image

jeromedockes · 2025-01-31T15:01:31Z

skrub/_reporting/_data/templates/dataframe-sample.css

+}
+
+.table-with-selectable-cells .table-cell {
+    transition: background-color var(--animation-duration)


I am a bit on the fence about this animation -- I have the impression it makes the interaction feel a little bit more sluggish; also we see some of the cells' color fading in when we load the page (or insert the report). could you say a bit more about the motivation?

I know on the main branch it is not perfect either because the focus ring disappears when we press the mouse button down on a new cell but the colors only update when we release the button so there is a delay between the 2 : was adding the animation meant to make that less noticeable?

To be honest I always add animation when changing color on hover, it's more of an habit than motivated by objective arguments. To me having a few animations here and there make the widget more pleasing to the eye, but that is a matter of taste. Not that as it uses css transition user who do not like animations can disable it browser wide.

Feel free to remove if it doesn't make sense.

thanks for explaining :) let's keep it then and we'll see if we get any feedback

jeromedockes · 2025-01-31T15:05:26Z

skrub/_reporting/_data/templates/report.js

+            adjustAllSvgViewBoxes(report);
+        }
+
+        detectTheme() {


as this does not use the skrubTableReport object and could potentially be useful to other components if we ever add any, I wonder if it would make sense for detectTheme to be a top-level function, outside of this class? there are a few at the bottom of this module. WDYT?

Why not but for now you have only one : )

jeromedockes · 2025-01-31T15:07:58Z

skrub/_reporting/_data/templates/report.js

@@ -386,7 +409,7 @@ if (customElements.get('skrub-table-report') === undefined) {
            while (!stop(i, j)) {
                const cell = this.elem.querySelector(`[data-spans__${i}__${j}]`);
                if (cell !== null && cell.id !== startCellId && !cell.hasAttribute(
-                        "data-excluded-by-column-filter") && cell.dataset.role !==
+                    "data-excluded-by-column-filter") && cell.dataset.role !==


as we discussed briefly at some point it could be nice to configure some automatic formatting for the js and css files so that we don't get spurious diff lines (but that is for another pr)

Having a prettier pre commit hook could be a quick win.

rouk1 · 2025-01-31T16:05:28Z

I think the PR is ready to merge now. Let me know if you want to make some more changes otherwise I'll merge it (and we can always do further tweaks in other prs).

LGTM then and feel free to ping me for future enhancements :)

jeromedockes · 2025-01-31T16:26:18Z

LGTM then and feel free to ping me for future enhancements :)

cool, will do! and thanks so much for the tablereport dark theme 🤩

jeromedockes and others added 7 commits November 29, 2024 09:37

add a dark theme for the tablereport

1c4f3a5

refactor ligt mode using variables

8b091db

Merge branch 'main' into report-dark-theme

3f161be

svg output now uses css variables

63158e1

cleanup unuse vars

9e906b9

fix untickable checkbox below tooltip

2414f59

pre commit hooks

458ba80

rouk1 marked this pull request as ready for review December 13, 2024 16:34

rouk1 added 2 commits December 14, 2024 09:36

contribute to changelog

f12d94f

keyboard shadow in dark mode

b744c4b

rouk1 added 10 commits December 20, 2024 11:21

standalone-report.css has been re-added (using new css vars nomenclat…

be3e0b5

…ure)

selected tab border bottom color is now equal to background color

ce9bf8b

fix column summaries shadow

22625f7

copy button tooltip is now inverted and bold

03747fa

summary statistics is now bigger and icons fits it

c2d9c0e

- toggled tip content is now part oh the hover, hence it does not dis…

2129ef2

…appear when hovering it - tip button outline is now blue

association table header now uses default tertiary background color

df9ced4

card header are now in highlight color only whena ssociated with a ta…

2e23c85

…ble column

primary highlight color is now raisin instead of orange, it provides …

d9d20dc

…high contrast and is not related to plot colors

use 4 spaces in CSS to avoid large diff

6240fe5

switch theme according to editor settings

21b995c

jeromedockes reviewed Jan 27, 2025

View reviewed changes

removed log

fb79216

Merge branch 'main' into report-dark-theme

32b619f

rouk1 force-pushed the report-dark-theme branch from 2eb49a7 to 32b619f Compare January 28, 2025 08:21

jeromedockes added 10 commits January 31, 2025 11:41

details not related to theme

ba5e99c

_

0cfb36d

tabs

04f4b41

_

c4c693d

fix matplotlib colors

34fb682

_

b0685d9

in standalone page apply color scheme to background too

4c39b69

set color on button & select

060bfda

fix arrow in pandas multiindex tables

21f4c38

select

186c607

jeromedockes approved these changes Jan 31, 2025

View reviewed changes

jeromedockes added 2 commits January 31, 2025 16:33

_

9bf9f3f

_

7e2efce

_

cced002

jeromedockes approved these changes Jan 31, 2025

View reviewed changes

jeromedockes merged commit 2d1c9fc into skrub-data:main Jan 31, 2025
25 checks passed

rouk1 deleted the report-dark-theme branch January 31, 2025 16:56

This was referenced Feb 4, 2025

Add a dark theme for the tablereport #1166

Closed

Add a dark mode to table reports #1165

Closed

GaelVaroquaux mentioned this pull request Feb 14, 2025

HTML display rendering poorly in vscode "Dark High Contrast" color theme scikit-learn/scikit-learn#30357

Closed

DeaMariaLeon mentioned this pull request Feb 17, 2025

Fix: HTML display rendering poorly in vscode "Dark High Contrast" color theme scikit-learn/scikit-learn#30846

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: TableReport dark theme #1201

feat: TableReport dark theme #1201

rouk1 commented Dec 13, 2024

jeromedockes commented Dec 17, 2024

rouk1 commented Dec 17, 2024

jeromedockes commented Dec 17, 2024

rouk1 commented Dec 20, 2024 •

edited

Loading

rouk1 commented Jan 27, 2025 •

edited

Loading

jeromedockes commented Jan 27, 2025

jeromedockes Jan 27, 2025

rouk1 Jan 28, 2025

rouk1 commented Jan 28, 2025

jeromedockes left a comment •

edited

Loading

jeromedockes Jan 31, 2025

rouk1 Jan 31, 2025

jeromedockes Jan 31, 2025

jeromedockes Jan 31, 2025

rouk1 Jan 31, 2025

jeromedockes Jan 31, 2025

rouk1 Jan 31, 2025

rouk1 commented Jan 31, 2025

jeromedockes commented Jan 31, 2025

		@@ -1,4 +1,5 @@
		if (customElements.get('skrub-table-report') === undefined) {
		console.log("coucou");

feat: TableReport dark theme #1201

feat: TableReport dark theme #1201

Conversation

rouk1 commented Dec 13, 2024

UI preview

jeromedockes commented Dec 17, 2024

rouk1 commented Dec 17, 2024

jeromedockes commented Dec 17, 2024

rouk1 commented Dec 20, 2024 • edited Loading

tackled feedbacks

UI preview

rouk1 commented Jan 27, 2025 • edited Loading

jeromedockes commented Jan 27, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rouk1 commented Jan 28, 2025

jeromedockes left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rouk1 commented Jan 31, 2025

jeromedockes commented Jan 31, 2025

rouk1 commented Dec 20, 2024 •

edited

Loading

rouk1 commented Jan 27, 2025 •

edited

Loading

jeromedockes left a comment •

edited

Loading