Holoviews plots are outside cells and can't be cleared

[wctaylor]

I'm trying to make some plots with Holoviews, but the plots are placed at the bottom of my nteract window, outside the cell that generated them, and I can't seem to clear them.
I'm not sure if this is an issue with Holoviews or nteract, but things work as expected when running the notebook in my browser, so I'm guessing it's nteract.

I'm using nteract version 11.7 as an AppImage on Fedora 28. I tried the 11.6 AppImage as well, and the problem was there too.

Some example code:

import numpy as np
import holoviews as hv
hv.extension('bokeh')

data = [(chr(65+i), chr(97+j),  i*j) for i in range(5) for j in range(5) if i!=j]
hv.HeatMap(data).sort()

The plot gets shoved way to the bottom of the notebook, so much so that at normal zoom, I can't even capture the cell and the plot in the same screenshot. If I zoom out (Ctrl -), the distance between the cell and the plot actually increases - the cells seem to shrink towards the top while the plot shrinks towards the bottom. If I zoom in (Ctrl +) to comical levels, I can manage to get the bottom of the cell and the top of the plot in the same screenshot (attached).

Any idea what's going on?

cell (top) and plot (bottom) barely fit in

regular zoom of plot at bottom

[willingc]

Hi @wctaylor

Thanks for reporting the issue. The latest release of nteract is 0.12.3. Hopefully this release will resolve the issue that you are seeing. If you have time to give it a try, we would appreciate the feedback. Thanks ☀️

[wctaylor]

Hi @willingc,

Thanks for getting back to me. I just tried with the 0.12.3 version (AppImage auto-updated to it), and the problem persists. I have updated to Fedora 29 for what it's worth.

The bokeh tools work, and the plot is interactive, but it's still stuck way at the bottom, detached from any cell, and can't be deleted. Re-running the cell generates an additional copy with the same problems.

[willingc]

Thanks @wctaylor for the quick response 👍 I'll label this as a bug. Thanks.

[philippjfr]

I'd like to look into fixing this but am having trouble finding documentation for extending nteract with custom MIME renderers. Does that exist or is it even possible?

[philippjfr]

The proximate cause for the strange behavior here is that we have a fallback in holoviews which attempts to dynamically insert the plot when you're not using a frontend which handles the custom HoloViews mime type. This is a horrible hack of course, but it's the only way we found that allowed us to support static html exports without duplicating the JS components in the MIME bundle.

[philippjfr]

Note that there is a workaround, you can get it working by setting the HV_DOC_HTML to True:

import os
os.environ['HV_DOC_HTML'] = 'True'

import holoviews as hv

hv.extension('bokeh')

hv.renderer('bokeh').theme = 'dark_minimal'

hv.Curve([1, 2, 3])

[willingc]

Thanks for sharing this and offering to help @philippjfr. @rgbkrk, who on the team would be best to help @philippjfr get started contributing with custom mime types and fixing this issue?

[rgbkrk]

Custom media types are handled in nteract by writing a React component that can handle it, then we bundle it as part of our main app. One example is the plotly component -- https://github.com/nteract/nteract/tree/master/packages/transform-plotly

Does Bokeh (and/or Holoviews) now have its own Media type?

[philippjfr]

Custom media types are handled in nteract by writing a React component that can handle it, then we bundle it as part of our main app.

They do, although they differ from other media types in that the JS components (e.g. BokehJS) are sent as part of some initialization call (output_notebook in bokeh andhv.extension in holoviews) which allows specifying a different CDN url or even inline the JS bundle. I realize that's probably not recommended but it has afforded us a lot flexibility. That all being said, loading those components already seems to work fine in nteract so the main remaining issue is the custom MIME types.

I'd be happy to submit PRs for bokeh and holoviews React components, the only other thing that would be nice to handle is support for Comms. Is there an existing example which allows the component to connect to and open new comms?

[wctaylor]

@philippjfr Thanks for that work around! That does work, though I actually ended up writing my own heatmap function just using Bokeh and avoiding Holoviews completely. But it seems Holoviews isn't the only package affected, so hopefully raising this issue helps make nteract better.

[philippjfr]

Just a heads up, the workaround won't be needed anymore in the next HoloViews release and we'll be able to close this.

[stale]

This issue hasn't had any activity on it in the last 90 days. Unfortunately we don't get around to dealing with every issue that is opened. Instead of leaving issues open we're seeking to be transparent by closing issues that aren't being prioritized. If no other activity happens on this issue in one week, it will be closed.
It's more than likely that just by me posting about this, the maintainers will take a closer look at these long forgotten issues to help evaluate what to do next.
If you would like to see this issue get prioritized over others, there are multiple avenues 🗓:

• Ask how you can help with this issue 👩🏿‍💻👨🏻‍💻
• Help solve other issues the team is currently working on 👨🏾‍💻👩🏼‍💻
• Donate to nteract so we can support developers to work on these features and bugs more regularly 💰🕐

Thank you!

[philippjfr]

I think this can be closed, we fixed this issue a while back in HoloViews itself.

[captainsafia]

Thanks for the notice, @philippjfr! Closing now.