Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Swipe layout - possible improvements: add aligned well positioned, formattable before and after titles, ability to constrain the swipe line by frame, etc. #4546

Open
GeoVizNow opened this issue Mar 20, 2023 · 0 comments

Comments

@GeoVizNow
Copy link

GeoVizNow commented Mar 20, 2023

This enhancement proposal is to participate in making the really great swipe layout tool even more clear and useful.
I can almost not wait starting using it:).

Is your feature request related to a problem? Please describe.

I would like if there is an option to add a title belonging to each of the '_before' and '_after' objects.
The titles should be aligned or otherwise clearly indicate which object they belong to. I think @MarcSkovMadsen had some possible examples of this in #3007 Adds Swipe layout

Describe the solution you'd like

I would like to be able to add a title to both '_before' and '_after' such that it e.g. is stating:

### Imports
import holoviews as hv
import panel as pn
import xarray as xr
import hvplot.xarray
pn.extension(sizing_mode='stretch_width')

# Example data code taken from https://hvplot.holoviz.org/reference/xarray/image.html
ds = xr.tutorial.open_dataset('air_temperature')

# time = '2014-01-01'
data_2013_01 = ds.sel(time='2013-01-01').mean('time') - 273  # convert to celcius
data_2014_01 = ds.sel(time='2014-01-01').mean('time') - 273  # convert to celcius

# example using swipe
img_opts = dict(cmap='gray', frame_height=400, frame_width=400) # , coastline=True)
title_before = 'Jan 2013'
title_after = 'Jan 2014'
swipe_layout = pn.layout.Swipe(
    data_2013_01.hvplot.image(title='2013', **img_opts),
    data_2014_01.hvplot.image(title='2014', **img_opts),
    value=10,
    slider_color='white'
)
pn.Column(
    pn.Row(
        pn.pane.Markdown(f'**Before**: {title_before}', align='start'), 
        pn.pane.Markdown(f'**After**: {title_after}', align='end')
    ),
    swipe_layout
)

Example animation from the code:
2023-03-20_15-57-25

Describe alternatives you've considered

Above I manually create the before and after titles, but would be more convenient to add as arguments to panel.layout.swipe.

Additional context

Some more thoughts includes:

  • protecting hover tooltips from being clipped by the swipe line
  • ability to optionally let the swipe line follow the frame limits when both the before or after objects are same sized holoviews objects.
  • ability to show the zoom rectangle stipled black rectangle on both sides of the swipe line.
  • on menion more is that I have seen implementations where one could choose either horisontal or vertical swipe line. Maybe a thought for far future.
@GeoVizNow GeoVizNow changed the title Swipe layout - add aligned well positioned titles and optioanlly let the slider follow the frame dimensions if object is a holoviews object Swipe layout - add aligned well positioned titles Mar 20, 2023
@GeoVizNow GeoVizNow changed the title Swipe layout - add aligned well positioned titles Swipe layout - add aligned well positioned, formattable before and after titles Mar 20, 2023
@GeoVizNow GeoVizNow changed the title Swipe layout - add aligned well positioned, formattable before and after titles Swipe layout - possible improvements: add aligned well positioned, formattable before and after titles, ability to constrain the swipe line by frame, etc. Mar 20, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant