Auto resizing a HoloViews plot within a FloatPanel

Panel
1

I’m trying to create an interface where several different HoloViews plots/panes are shown in their own dedicated FloatPanel. I’d like to be able to move these around and resize them dynamically. However, I’m running into an issue where it seems the HoloViews pane cannot responsively resize to the size of the FloatPanel.

~I’ve placed this topic under the “HoloViews” topic since the general case of dynamicly resizing these panes to their parent container is unclear to me, though this specific issue may be specific to Panel’s FloatPanel~ see example in later comment where this seems to be isolated to the FloatPanel

Here is my current progress:

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

np.random.seed(1)
data = np.random.randn(10000)
frequencies, edges = np.histogram(data, 20)

ls = hv.Histogram((edges, frequencies)).opts(responsive=True, min_height=200)

width, height = 400, 900
floatpanel = pn.layout.FloatPanel(
    pn.pane.HoloViews(ls, sizing_mode='stretch_both', width_policy='fit', height_policy='fit'),
    # options
    name='Resizeable FloatPanel', margin=20,
    config={
        "headerControls": {"close": "remove", "maximize": "remove"}, 
        # "panelSize": f"{width} {height}",
    },
)

pn.Column('**Example: Basic `FloatPanel`**', floatpanel, height=850, width=1000)

I’ve tried all kinds of combinations of sizing_mode and width_policy/height_policy to no avail. I’ve also tried wrapping the HoloViews panel into a pn.panel and setting responsive under the config there but just can’t get it.

With the code above, this is the result I get… It seems like there is some sort of delayed update to fill the width (but not height) during interactions with the plot:

(I would insert a screen recording here but as a new user, I am not allowed… will try to follow up with one later when I’ve earned my keep :slight_smile: )

Any help appreciated!

2

Here is a simpler example that isn’t using HoloViews. We can see the Divider be continually updated as the FloatPanel is resized, but the Bokeh plots do not update:

from bokeh.plotting import figure
import panel as pn
pn.extension('floatpanel')

p1 = figure(height=250, sizing_mode='stretch_width', margin=5)
p2 = figure(height=250, sizing_mode='stretch_width', margin=5)

p1.line([1, 2, 3], [1, 2, 3])
p2.circle([1, 2, 3], [1, 2, 3])

f = pn.layout.FloatPanel(p1, pn.layout.Divider(), p2, name="Responsive", sizing_mode='stretch_width')
pn.Column('**Example: Basic `FloatPanel`**', f, height=850, width=1000)

(again, not allowed to post screenshots yet)

3

Seems like a bug! Can you report this as an issue on the Panel repo?

1 Like
4

I’ve reported this in Issue #6157 · holoviz/panel. Please comment on the post @banesullivan-kb. Then you will get connected to whoever solves the issue. Thanks.