Giters

damianavila / RISE

RISE: "Live" Reveal.js Jupyter/IPython Slideshow Extension

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

xarray repr_html is not displayed correctly in RISE

rabernat opened this issue · comments

commented

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)

image

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.

image

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

commented

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

image

commented

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')
commented

hi

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

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

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

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...

commented

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 (pangeo-data/pangeo-binder#189).

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

commented

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 :)

commented

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

commented

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 :)

commented

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. 😞

commented

Finally got something working!

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

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

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

commented

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;
}