New table style makes it impossible to view data (5.0 beta)

[jorisvandenbossche]

I know this has been raised and discussed before (jupyterlab/jupyterlab#961, jupyterlab/jupyterlab#910 (comment), and actually the max-width has been increased due to that discussion), but, with the risk of trolling, I would like to raise this again (and opening an issue here instead of at jupyterlab, as with the 5.0 beta it seems more urgent here).
To be clear: I really like the new table style! My only concern is regarding the hard-coded max-width and hiding of data.

Problem: due to the hard-coded max-width: 150px combined with white-space: nowrap, actual data gets hidden without any alternative way to look at the actual data.
For me, the notebook is for a large part about "interacting with my data". An essential aspect of this, just looking at what is in my dataframe, is now impossible once you have a bit longer cell contents.

And you very easily get to this limit of 150px, eg timestamps with subsecond digits (common in certain fields), a bit longer species names, review comments, ...

Possible solution: My preferred solution would be to rework this part of the table styling to always display all provided data (and there are some different options to obtain this, like no max-width, or a max-width but with text wrapping over multiple lines, ...)
Other way of putting it is this principle: let the library that generates the table control what data is visible, and let jupyter just display it 'unopinionated'.

As I said, the above is my preferred solution because this would let pandas (and other libraries generating tables) be able to control what is actually displayed (as we already currently do with pd.options.display.max_colwidth).
But of course, there can also be other solutions like:

• make this easily configurable from jupyter
• display full data on hover
• ..

To be clear: it doesn't has to be my provided solution, but at least I hope you are open to reconsidering this aspect of the table styling (irregardless of the outcome of the discussion in the end :-)).

---

Note: we can override this from the pandas side, by including a style tag with every generated table. Relevant issue is here: pandas-dev/pandas#15379 (and we would consider a bug-fix 0.19.3 release if necessary).
I will put some illustration of the interaction of pandas with the new table style in a next comment.

[takluyver]

Milestoned for 5.0 so we at least have a look at it, but I don't want this to hold the release up if it becomes the last thing.

Pinging @ellisonbg for style question.

[jorisvandenbossche]

Illustration of the interaction with pandas.

In the current notebook 4.x, by default pandas limits the amount of data represented in html table, so you still get a limited column width by default.
But, if you really want to look at the actual full data, there is an option you can use to change this:

Now the same example with notebook 5.0 beta. The default repr of the dataframe is rather similar (it is bit shorter as the default of pd.options.display.max_colwidth (see above), but the default of the pandas setting can certainly be discussed).
So up to here, everything is OK. But now, if you want to look at the actual data, the pandas option no longer works. And there is also no alternative way to look at the actual data (apart from looking at the underlying array using df.values, but this looses the labeled aspect and nice formatting of the pandas table):

So as a conclusion: I agree the default should not be to display all data, but to have a limited column width. But, from the pandas point of view, it would be better to let pandas control this instead of jupyter.

[ellisonbg]

I will have a look at this later today...

…

On Mon, Feb 20, 2017 at 7:36 AM, Joris Van den Bossche < ***@***.***> wrote: Illustration of the interaction with pandas. In the current notebook 4.x, by default *pandas* limits the amount of data represented in html table, so you still get a limited column width by default. But, if you really want to look at the actual full data, there is an option you can use to change this: [image: screenshot from 2017-02-20 12-36-50] <https://cloud.githubusercontent.com/assets/1020496/23129039/7ae1c1d0-f781-11e6-9698-4d267fb2be24.png> Now the same example with notebook 5.0 beta. The default repr of the dataframe is rather similar (it is bit shorter as the default of pd.options.display.max_colwidth (see above), but the default of the pandas setting can certainly be discussed). So up to here, everything is OK. But now, if you want to look at the actual data, the pandas option no longer works. And there is also no alternative way to look at the actual data (apart from looking at the underlying array using df.values, but this looses the labeled aspect and nice formatting of the pandas table): [image: screenshot from 2017-02-20 12-37-12] <https://cloud.githubusercontent.com/assets/1020496/23129157/e2c0bbbc-f781-11e6-8eee-78d930985864.png> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2209 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABr0MGQ03f53L5QLQgYTlFAuAxDlWjEks5reaTygaJpZM4MGPni> .

-- Brian E. Granger Associate Professor of Physics and Data Science Cal Poly State University, San Luis Obispo @ellisonbg on Twitter and GitHub [email protected] and [email protected]

[takluyver]

Ping @ellisonbg

[ellisonbg]

I think the best option is to remove the max width on the columns for now. This won't be ideal, but the consequences seems to be too severe of keeping it.

…

On Thu, Feb 23, 2017 at 2:55 AM, Thomas Kluyver ***@***.***> wrote: Ping @ellisonbg <https://github.com/ellisonbg> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2209 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABr0H0OVTJPdXfyeQUmRdCk9ZuD9h1_ks5rfWWOgaJpZM4MGPni> .

-- Brian E. Granger Associate Professor of Physics and Data Science Cal Poly State University, San Luis Obispo @ellisonbg on Twitter and GitHub [email protected] and [email protected]

[takluyver]

@jorisvandenbossche since you've looked into this, do you want to do a PR?

[jorisvandenbossche]

@ellisonbg Thanks for reconsidering this!
@takluyver I could try that (although I don't know much about css), but, there are still some design decisions to take:

Just removing the max-width is not what we want I think:

So combining with resetting whitespace as well:

Now, the line height seems a bit too small. However, resetting that as well is maybe too much space between the rows?

I could decrease the padding a bit (currently 0.5em 0.5em), but that seems rather arbitrary:

[ellisonbg]

Nice, thanks for tackling this. All of the things like padding, line-height, etc should be chosen very carefully. In this case, we should probably make the change initially in JupyterLab, as we have CSs variables for most of these things. We would like the table design to match in lab/notebook. I am catching up on dev things right now, but can probably look at it in JupyterLab. Do you have a nice example dataframe/notebook to try out?

…

On Fri, Feb 24, 2017 at 7:29 AM, Joris Van den Bossche < ***@***.***> wrote: @ellisonbg <https://github.com/ellisonbg> Thanks for reconsidering this! @takluyver <https://github.com/takluyver> I could try that (although I don't know much about css), but, there are still some design decisions to take: Just removing the max-width is not what we want I think: [image: screenshot from 2017-02-24 16-01-48] <https://cloud.githubusercontent.com/assets/1020496/23309018/66ddb49e-faad-11e6-8944-8d76a68e4bdc.png> So combining with resetting whitespace as well: [image: screenshot from 2017-02-24 16-02-44] <https://cloud.githubusercontent.com/assets/1020496/23309035/76f3bdba-faad-11e6-8ede-5811c332e4c9.png> Now, the line height seems a bit too small. However, resetting that as well is maybe too much space between the rows? [image: screenshot from 2017-02-24 16-04-39] <https://cloud.githubusercontent.com/assets/1020496/23309058/8b95c2ea-faad-11e6-9a6b-2a36003d81be.png> I could decrease the padding a bit (currently 0.5em 0.5em), but that seems rather arbitrary: [image: screenshot from 2017-02-24 16-25-41] <https://cloud.githubusercontent.com/assets/1020496/23309200/0b5bd154-faae-11e6-88d6-4dd32c12e8f8.png> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2209 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABr0LvrVMfoTrRS1VeuEoVyopZVOoI0ks5rfvdBgaJpZM4MGPni> .

-- Brian E. Granger Associate Professor of Physics and Data Science Cal Poly State University, San Luis Obispo @ellisonbg on Twitter and GitHub [email protected] and [email protected]

[takluyver]

As we're trying to get to 5.0 soon, do we want to make a less carefully designed change to make this 'good enough' for now? E.g. remove max-width and reset whitespace so long lines can wrap? We can always make further improvements for 5.1.

[jorisvandenbossche]

@ellisonbg the notebook I used to make the screenshots above: http://nbviewer.jupyter.org/gist/jorisvandenbossche/884d4370577d47ad9583f1381fcc01cc

I was mainly using jupyterlab to test this out, but I raised it here as the notebook release seemed more imminent. But discussing it further in jupyterlab is fine for me as well.

[ellisonbg]

Looking at this now...

…

On Fri, Feb 24, 2017 at 8:49 AM, Joris Van den Bossche < ***@***.***> wrote: @ellisonbg <https://github.com/ellisonbg> the notebook I used to make the screenshots above: http://nbviewer.jupyter.org/gist/jorisvandenbossche/ 884d4370577d47ad9583f1381fcc01cc I was mainly using jupyterlab to test this out, but I raised it here as the notebook release seemed more imminent. But discussing it further in jupyterlab is fine for me as well. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2209 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABr0MrFAwqBt_0uQNqrhey3PeBR2Xqfks5rfwobgaJpZM4MGPni> .

-- Brian E. Granger Associate Professor of Physics and Data Science Cal Poly State University, San Luis Obispo @ellisonbg on Twitter and GitHub [email protected] and [email protected]

[ellisonbg]

Joris, wow thanks so much for looking at this. I downloaded your example notebook and everything looks stellar!!! I would go for the 0.5em spacing. Given all that, let's make the following modifications to the rendered HTML table display in notebook (and lab): ``` table.td, tableth { max-width: none; white-space: normal; line-height: normal; padding: 0.5em 0.5em; } ``` Do you want to submit a PR to either notebook or lab? If not I, or someone else can. Thanks so much. Cheers, Brian

…

On Sat, Feb 25, 2017 at 6:58 PM, Brian Granger ***@***.***> wrote: Looking at this now... On Fri, Feb 24, 2017 at 8:49 AM, Joris Van den Bossche < ***@***.***> wrote: > @ellisonbg <https://github.com/ellisonbg> the notebook I used to make > the screenshots above: http://nbviewer.jupyter.org/gi > st/jorisvandenbossche/884d4370577d47ad9583f1381fcc01cc > > I was mainly using jupyterlab to test this out, but I raised it here as > the notebook release seemed more imminent. But discussing it further in > jupyterlab is fine for me as well. > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <#2209 (comment)>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/AABr0MrFAwqBt_0uQNqrhey3PeBR2Xqfks5rfwobgaJpZM4MGPni> > . > -- Brian E. Granger Associate Professor of Physics and Data Science Cal Poly State University, San Luis Obispo @ellisonbg on Twitter and GitHub ***@***.*** and ***@***.***

-- Brian E. Granger Associate Professor of Physics and Data Science Cal Poly State University, San Luis Obispo @ellisonbg on Twitter and GitHub [email protected] and [email protected]

[tomweber-sas]

Hey guys, sorry to barge in. I'm wondering what to do about this for my problem (ipython#11033 right above). My code returns complete HTML5 documents which can contain svg graphics, embedded tables and any other html elements. It contains css already too. This has all been working for years in jupyter notebooks but recently is broken due to (it seems) this fixed width table display change. Curiously, displaying wide dataframes still has the scrollbar and the column headers aren't overlapped.

Here's a picture of the problem. I also have a customer who see data values overlap too. This case just happens to be the column names.

Is there any kind of a fix for this or a work around I can implement in my code? Basically I use IPython.display to render via: display(HTML(mydocument))

Thanks for any help!
Tom