%%opts has no effect

[fzhang00]

I have a layout of 4 DynamicMaps. The default plot has the first column narrower and 2nd column square. I want to adjust the oversize of the figure, aspect of individual subplot using %%opts, but it not showing any impact.

%%opts Layout [shared_axes=False width=900 height=525] DynamicMap.I [aspect=1.5]
count_img = np.zeros((100, num_files))
for i in range(num_files):
    count_img[:,i] = df['counts'].loc[df['file_ID']==i]
extents = (0, 0, 512, 100)
rgb_hist = hv.Image(count_img, bounds = extents)

#layout = {i:(rgb_hist * hv.VLine(x = i) + rgb_hist.sample(x = i)) for i in range(10)}
#hmap = hv.HoloMap(layout, kdims=['i'])
kdims=[hv.Dimension('i', range=(0, 511))]
vline = hv.DynamicMap(lambda i: hv.VLine(i), kdims=kdims)
cross_section = hv.DynamicMap(lambda i: rgb_hist.sample(x=i), kdims=kdims)
acceptance_points = hv.DynamicMap(lambda i: hv.Points(df_acceptanceFraction[str(i+1)]), kdims=kdims)
spread = hv.DynamicMap(lambda i: hv.Spread(stats_sampling[:, :, i]), kdims=kdims)
layout = (rgb_hist*vline  + cross_section + spread+acceptance_points).cols(2)
layout

[philippjfr]

The thing is that a Layout does not determine it's own size, instead all the elements making up a Layout do. In this case you probably want to set something like this:

%%opts Image Spread [width=400]

This will make the subplots containing the Spread and the Image will be made slightly wider than default. You could also set it directly on a specific DynamicMap, e.g.:

rgb_hist = hv.Image(count_img, bounds = extents)(plot=dict(width=400))
...
spread = hv.DynamicMap(lambda i: hv.Spread(stats_sampling[:, :, i]), kdims=kdims)(plot=dict(width=400))

[fzhang00]

%%opts Layout [shared_axes=False] Image Spread [width=500] Points Curve[width=400]

I used the options above to make plot wider, but the slider is now behind plot. Is there any way to move slider to other locations, and make it longer, ie. across the entire width of the figure at the very bottom across the whole width of the figure?

I'm also still a bit fuzzy on how to find out what option is available for what Element/container. Do you recommend which page to look at for finding these information? Thanks.

[philippjfr]

Is there any way to move slider to other locations, and make it longer, ie. across the entire width of the figure at the very bottom across the whole width of the figure?

There are ways of doing this, which involves supplying custom CSS, which is a bit of a pain. If you want to change it you can look at this issue: #1023

And use this custom css file to style the widgets:

div.hololayout {
    align-items: center;
}

div.holoframe {
	width: 100%;
}

div.holowell {
    display: flex;
    align-items: center;
    margin: 0;
}

form.holoform {
    background-color: #fafafa;
    border-radius: 5px;
    overflow: hidden;
	padding-left: 0.8em;
    padding-right: 0.8em;
    padding-top: 0.4em;
    padding-bottom: 0.4em;
}

div.holowidgets {
    padding-right: 0;
	width: 50%;
	margin: auto;
	margin-top: 50px;
}

div.holoslider {
    min-height: 0 !important;
    height: 0.8em;
    width: 60%;
}

div.holoformgroup {
    padding-top: 0.5em;
    margin-bottom: 0.5em;
}

div.hologroup {
    padding-left: 0;
    padding-right: 0.8em;
    width: 50%;
}

.holoselect {
    width: 92%;
    margin-left: 0;
    margin-right: 0;
}

.holotext {
    width: 100%;
    padding-left:  0.5em;
    padding-right: 0;
}

.holowidgets .ui-resizable-se {
	visibility: hidden
}

.holoframe > .ui-resizable-se {
	visibility: hidden
}

.holowidgets .ui-resizable-s {
	visibility: hidden
}

After releasing 2.0 next month we're planning on rewriting the widgets from scratch to improve the flexibility and make this kind of thing easier.

I'm also still a bit fuzzy on how to find out what option is available for what Element/container. Do you recommend which page to look at for finding these information? Thanks.

hv.help will list the valid plot and style options for the different containers and Elements.

[fzhang00]

Thank you so much. Just one more thing: How to tweak the box that's displaying the "i" value in the slider bar? I would like the slider (sliding portion) to take up more space because I have 512 of "i" and it is difficult to get to that precision when the sliding bar is short.

[philippjfr]

You could try changing the width on hologroup to 20% and then fiddle that as desired:

div.hologroup {
    padding-left: 0;
    padding-right: 0.8em;
    width: 20%;
}

[philippjfr]

Sorry I didn't get around to answering your questions on Gitter. In general that's still a better place for questions like this though.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.