xarray repr_html is not displayed correctly in RISE

[rabernat]

Xarray has a nice _repr_html_ that shows up fine in notebook and lab

import xarray as xr
ds = xr.tutorial.open_dataset('rasm')
display(ds)

However, when I look at this in RISE, it first shows a plain-text __repr__. Then the HTML that I do see is a bit distorted.

Any ideas how to make it show up correctly in slideshow mode?

[parmentelat]

at first sight this is a little odd because rise does not mess with the rendered html

I'm not familiar with xarray and have not been able to use xarray to reproduce your issue

[rabernat]

Hi @parmentelat and thanks for your quick response. Xarray is an analysis library for n-dimensional lableled data, comparable to pandas.

I'm sorry this example did work for you. Can you try with

ds = xr.tutorial.open_dataset('air_temperature')

[parmentelat]

hi

so what is happening here is that the generated html output contains primarily 2 pieces like this

the first one then gets turned off - under classic - with a css rule that says

under rise/reveal, all this applies but, in addition to that there is a css rule coming from reveal.js that says

and the latter being slightly more specific than the former, it brings the contents back on

as a workaround you could start with creating your own rise.css and say

.reveal pre.xr-text-repr-fallback {
    display: none;
}

if as I hope that works for you, we could then consider adding this in rise, but I'd rather wait for others' feedback on that, because this xr-text-repr-fallback classname looks like it is a xarray-specific thingy - at least it looks that way at first sight - and in that case it feels odd that rise should ship with that hack in place...

[rabernat]

Thanks a lot for your helpful suggestion! Your explanation makes total sense. I am already trying the custom CSS solution, but unfortunately the binder I'm running on appears to have some issues with that as well (https://github.com/pangeo-data/pangeo-binder/issues/189).

I will close this when I can post a css hack to work around the problem.

[parmentelat]

all right; you can also embed the css in a <style> tag inside a markdown cell, it should apply as soon as the cell gets evaluated but you know that already I guess :)

[rabernat]

Did not know that! It is not mentioned on https://rise.readthedocs.io/en/stable/customize.html#adding-custom-css.

[rabernat]

I believe that the sanitize_html function is preventing the <style> tag approach from working.

[parmentelat]

ah! you're right, inserting css this way seems to be blocked - I thought I had seen that working at some point, sorry

(note that, had it worked, it would have belonged in the notebook's documentation as interpreting html fragments has nothing to do with rise specifically :)

[rabernat]

There is a flag allow_css in the notebook code

https://github.com/jupyter/notebook/blob/2cfff07a39fa486a3f05c26b400fa26e1802a053/notebook/static/base/js/security.js#L79

But I don't know how to turn it on. 😞

[rabernat]

Seems relevant: https://jupyter-notebook.readthedocs.io/en/stable/security.html#javascript-and-css-in-markdown-cells

[rabernat]

Finally got something working!

style = """
<style>
.reveal pre.xr-text-repr-fallback {
    display: none;
}
</style>
"""

from IPython.core.display import HTML
HTML(style)

[damianavila]

When something is broken in RISE and working in the notebook view, there is a 95% chance the problem is the reveal.js CSS :wink: Thanks, @parmentelat to help with the investigation!

[martinfleis]

Just wanted to drop an update here, as I had to add two more rules to fix the xarray's html output within RISE. It seems that reveal's defaults for ul and li are messing the custom CSS xarray has. This was needed to put everything back in place.

.reveal pre.xr-text-repr-fallback {
    display: none;
}

.reveal .xr-wrap {
    max-width: 90%;
}

.reveal li.xr-var-item {
    display: grid;
    grid-template-columns: 150px auto auto 1fr 20px 20px;
}

.reveal ul.xr-var-list {
    margin: 0;
    padding: 0;
}