search

tskit-dev / tsqc

Utilities for evaluating inferred tree sequences
MIT License
2 stars 7 forks source link

Explore WidgetBox. #150

Open savitakartik opened 2 months ago

savitakartik commented 2 months ago

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 commented 2 months ago

For reference, some that might be useful '

jeromekelleher commented 2 months ago

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

savitakartik commented 2 months ago

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 commented 2 months ago

Exactly, that's just what I was thinking

savitakartik commented 3 weeks ago

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. image

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()

image

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)