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.

5

I believe that there is still a bug here. If you change “stretch_width” to “stretch_both”, notice that the height is not responsive and the plot is squished to the top of the panel.

I can’t figure out why it responds to width but not height by myself…
Is it worth reopening the issue to fix this?

I came here because I was also trying to display HoloViews plots within Float Panels. I was using FloatPanels because they could give the user the freedom to generate a varying number of plots (each with their own float panel) in my application. If the plots cannot resize according to the float panel that they are in then this won’t really suit me as a solution.

Thanks!

6

Yeah I think you should reopen the issue.

1 Like
7

Cool. Will do. For now I believe there is a bandaid along the lines of the following:

  • Use some of the code provided by Kobold et. al here in the g.h issue specifically the current_w and current_h bit.
  • Take the components that you want to put inside your FloatPanel, and put them inside a Column inside your FloatPanel.
  • Link the current_w and current_h of the enhanced float panel to the width and height parameters of your Column. I think you need to use sizing_mode="fixed" also for the Column.