Explore WidgetBox.

[savitakartik]

For all pages, try WidgetBox or other container elements that might allow a more adaptive layout automatically. We'd like to avoid specifying heights and widths for panels as this won't work well for different screen sizes

[jeromekelleher]

For reference, some that might be useful '

• https://panel.holoviz.org/reference/layouts/WidgetBox.html
• https://panel.holoviz.org/reference/layouts/Accordion.html
• https://panel.holoviz.org/reference/layouts/Card.html
• https://panel.holoviz.org/reference/layouts/GridSpec.html
• https://panel.holoviz.org/reference/layouts/GridStack.html

[jeromekelleher]

I think we probably want a GridStack with responsive sizing? https://panel.holoviz.org/reference/layouts/GridSpec.html#responsive-grids

[savitakartik]

Great suggestions, thanks. I'll try out GridStack. I think Accordion could be really nice in some scenarios too. For example, in the Mutations page to collapse/show the tree breakpoints and gene annotation tracks?

[jeromekelleher]

Exactly, that's just what I was thinking

[savitakartik]

Here is a summary of the UI containers I've explored so far.

Accordion
Could include the gene track as a collapsible element like this:

pn.Column(layout, pn.Accordion("gene track", annot_track))

However, it can't be used with a Layout container as we're currently doing:

layout += annot_track
layout.opts(shared_axes=True).cols(1)

We will instead have to wrap the Layout and Accordion elements in a column:

layout.opts(shared_axes=True).cols(1)
layout = pn.Column(layout, pn.Accordion("gene track", annot_track))

However, the Mutations panel gets messed up and I haven't figured out why.

GridSpec
Here's example code that creates a 4x6 grid. We specify that the Mutations panel takes up the width of 5 columns and the population frequencies panel takes up the remaining columns.
This layout could work and the Mutations panel is responsive but the population frequencies panel isn't responsive. Also need to work on evenly spacing out the elements, fofr example there's too much space between the Mutations and Population Frequencies panel.

	nrows = 4
	ncols = 6
	gspec = pn.GridSpec(
	    nrows=nrows,
	    ncols= ncols,
	    mode="override",
	    sizing_mode="stretch_both",
	)
	for i in range(nrows):
	    for j in range(ncols):
	        gspec[i, j] = pn.Spacer(
	            sizing_mode="stretch_both",
	            styles=dict(background="red", border="2px solid black"),
	        )
	gspec[:, 0:5] = pn.Column(muts_panel_layout, sizing_mode="stretch_both")
	gspec[1:3, 5:] = pn.Column(tap_widgets_layout)
	gspec.servable()

DynamicMap elements do not accept the responsive parameter, so would have to use an alternative for the axis histograms, e.g.:
xhist = hv.operation.histogram(points, dimension='position').opts(max_height=125, responsive=True)