Is it possible to mix pn.FlexBox with hv.Curve?

Panel
1

Hi,

I tried this:

import holoviews as hv
import panel as pn
import tornado
import numpy as np

hv.extension('bokeh')
pn.extension()
loop = tornado.ioloop.IOLoop.current()
data = np.random.randn(100,2)
# this doesn't work:
page = pn.panel(pn.FlexBox([hv.Curve(data)]))

# this works fine
# page = pn.panel(hv.Curve(data))
pn.serve(page, port=5006, loop=loop)

But I only see this in the browser:

image

Whereas if I try the second form, I see a plot correctly rendered. Is it possible to combine a pn.FlexBox with an hv.Curve?

2

Removing one layer of list should work.
pn.panel(pn.FlexBox(hv.Curve(data)))

3

Thanks @ahuang11 for the suggestion.

Okay, I just tried that on Chrome and Firefox and it gives a different result. The page itself is blank and I see this error in the console:

image
image1173×273 62.7 KB

4

Try this:

import holoviews as hv
import panel as pn
import numpy as np

hv.extension('bokeh')
pn.extension()
data = np.random.randn(100,2)
box = pn.FlexBox(hv.Curve(data))
box

image
image1004×1518 156 KB

5

Yes that works for me too - assuming your example is a Jupyter notebook?

I need it to run as a webserver unfortunately. Is there any example you have that includes the pn.serve part?

6

app.py

import holoviews as hv
import panel as pn
import numpy as np

hv.extension('bokeh')
pn.extension()
data = np.random.randn(100,2)
box = pn.FlexBox(hv.Curve(data))
box.servable()

$ panel serve app.py

7

Thanks! Okay, tried that as well. Unfortunately that gives me the same error on the console as well.

For reference I’m using:

bokeh == 3.1.1
panel == 1.2.1
holoviews == 1.17.1
chrome == 115.0.5790.170

Just for reference I’ll paste it here:

image
image1380×733 97.4 KB

bokeh.min.js?v=c8d721b75531cff043feef626ae0d6e29a26031fae26bba93c1baa962ecfb1b43f211027df3a0cf7772f30afed8c38198d70677b8967e581ca7e605358c68465:183 [bokeh] setting log level to: 'info'
bokeh.min.js?v=c8d721b75531cff043feef626ae0d6e29a26031fae26bba93c1baa962ecfb1b43f211027df3a0cf7772f30afed8c38198d70677b8967e581ca7e605358c68465:226 [bokeh] Websocket connection 0 is now open
bokeh.min.js?v=c8d721b75531cff043feef626ae0d6e29a26031fae26bba93c1baa962ecfb1b43f211027df3a0cf7772f30afed8c38198d70677b8967e581ca7e605358c68465:163 Error rendering Bokeh items: DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.
    at g.blit_webgl (http://localhost:5006/static/js/bokeh.min.js?v=c8d721b75531cff043feef626ae0d6e29a26031fae26bba93c1baa962ecfb1b43f211027df3a0cf7772f30afed8c38198d70677b8967e581ca7e605358c68465:464:2802)
    at _._paint_levels (http://localhost:5006/static/js/bokeh.min.js?v=c8d721b75531cff043feef626ae0d6e29a26031fae26bba93c1baa962ecfb1b43f211027df3a0cf7772f30afed8c38198d70677b8967e581ca7e605358c68465:582:15891)
    at _._actual_paint (http://localhost:5006/static/js/bokeh.min.js?v=c8d721b75531cff043feef626ae0d6e29a26031fae26bba93c1baa962ecfb1b43f211027df3a0cf7772f30afed8c38198d70677b8967e581ca7e605358c68465:582:15197)
    at _.paint (http://localhost:5006/static/js/bokeh.min.js?v=c8d721b75531cff043feef626ae0d6e29a26031fae26bba93c1baa962ecfb1b43f211027df3a0cf7772f30afed8c38198d70677b8967e581ca7e605358c68465:582:14153)
    at _._after_layout (http://localhost:5006/static/js/bokeh.min.js?v=c8d721b75531cff043feef626ae0d6e29a26031fae26bba93c1baa962ecfb1b43f211027df3a0cf7772f30afed8c38198d70677b8967e581ca7e605358c68465:582:13990)
    at _.after_layout (http://localhost:5006/static/js/bokeh.min.js?v=c8d721b75531cff043feef626ae0d6e29a26031fae26bba93c1baa962ecfb1b43f211027df3a0cf7772f30afed8c38198d70677b8967e581ca7e605358c68465:547:6160)
    at _.compute_layout (http://localhost:5006/static/js/bokeh.min.js?v=c8d721b75531cff043feef626ae0d6e29a26031fae26bba93c1baa962ecfb1b43f211027df3a0cf7772f30afed8c38198d70677b8967e581ca7e605358c68465:547:5540)
    at _.invalidate_layout (http://localhost:5006/static/js/bokeh.min.js?v=c8d721b75531cff043feef626ae0d6e29a26031fae26bba93c1baa962ecfb1b43f211027df3a0cf7772f30afed8c38198d70677b8967e581ca7e605358c68465:547:6867)
    at _.after_render (http://localhost:5006/static/js/bokeh.min.js?v=c8d721b75531cff043feef626ae0d6e29a26031fae26bba93c1baa962ecfb1b43f211027df3a0cf7772f30afed8c38198d70677b8967e581ca7e605358c68465:547:6560)
    at _.r_after_render (http://localhost:5006/static/js/bokeh.min.js?v=c8d721b75531cff043feef626ae0d6e29a26031fae26bba93c1baa962ecfb1b43f211027df3a0cf7772f30afed8c38198d70677b8967e581ca7e605358c68465:547:6487)
1 Like
8

Thanks for testing; it does seem like a bug.

Perhaps you can file a bug on Panel with a brief sentence + providing the minimal example?

9

Ahh - sorry, I should have searched the issues a bit better before asking here… It turns out the issue is already pending:

The fix suggested is to add the line:

hv.renderer("bokeh").webgl = False

for these elements. Looks like I just need to upgrade to bokeh 3.2! Thanks for the help @ahuang11, really appreciate it.

1 Like