GridSpec shenanigans

Panel
1

Moving question from gitter to here:

I’m struggelig to make GripSpec do what I want, and it is challenging to explain! However, below is the code that has gotten me closest to what I’m trying to acheive. The blue and green spacers represent the positions where I want to put plots, the red ones are spacers added to get the behaviour I want. So, firstly I want the blue spacer to always have an aspect ratio of 1, and the green spacer should have a max height of 300. With those restrictions the browser window will be split horizontally in half. In the lower half, the green spacer will span the whole width and fill the height up to 300. For the upper half, the blue spacer should be positioned in the center, fill the whole height, and fill the width to acheive aspect ratio of 1. With the below code this works partially, where I have also posted some gifs showing the behavior. When reducing the width of the browser, at some point the blue spacer starts to reduce more in size than necessary, because the red spacers seems to take precedence below that size. When changing the browser window height, the green spacer never changes.

Any input is greatly appreciated.

import panel as pn
import geoviews.tile_sources as gts
pn.extension()

grid_layout = pn.GridSpec(sizing_mode='stretch_both')
grid_layout[0,0] = pn.Spacer(background='#FF0000')
grid_layout[0,1] = pn.Spacer(background='blue', aspect_ratio=1)
grid_layout[0,2] = pn.Spacer(background='#FF0000')
grid_layout[1,:] = pn.Spacer(background='green', max_height=300)

grid_layout.servable()

In this gif: https://files.gitter.im/pyviz/pyviz/qIqg/not-ok-horizontal.gif I would expect the red spacers to shrink, allowing the blue spacer to fill the height while retaining aspect ratio of 1
This gif: https://files.gitter.im/pyviz/pyviz/qIqg/ok-vertical.gif seems right
Here: https://files.gitter.im/pyviz/pyviz/qIqg/not-ok-vertical.gif I would expect the green spacer to shrink

1 Like
2

I would like to add to this that I’ve also tried the following:

import panel as pn
pn.extension()

grid_layout = pn.GridSpec(sizing_mode='stretch_both',)
grid_layout[0,0] = pn.Spacer(background='red', margin=0)
grid_layout[0,1] = pn.Spacer(background='blue', margin=0)
grid_layout[1,:] = pn.Spacer(background='green', margin=0, max_height=300)

grid_layout.servable()

Here I would expect the spacers to evenly fit into the current browser window, but this is not the case. I’ve tried with both sizing_mode='stretch_both and sizing_mode='scale_both, these have different results, but not what I want. Please see images below.

sizing_mode='stretch_both'

image
image1762×1153 23.1 KB

sizing_mode='scale_both'

image
image1767×1158 27.2 KB

3

Still haven’t found a good solution here so I’m guessing it needs improvements to bokeh’s layout engine.

4

I’ve been having some issues with my interactive tool that plots sea ice indices in that it exceeds the available amount of vertical space. I decided to test you code because the behaviour it produces is similar. When I use your code from your first post I get the following result: Screencast from 2023-05-02 14-06-19

Instead of using all of the available screen space it uses more in the vertical orientation forcing me to have to scroll to see the entire graphic. This is especially pronounced when I’m not in fullscreen, but I also have to scroll a tiny amount in fullscreen.

Is this due to the aforementioned issue with Bokeh’s layout engine, @philippjfr? I’m running panel 0.14.4 and bokeh 2.4.3.