How to force use of < > buttons in `panel.template.sidebar`

Panel
1

I’m working on an app using the ReactTemplate. The sidebar contains pn.Tabs where each tab has a pn.Card containing an instance of a class I wrote. This code will produce the unfinished example I’m working from.

import panel as pn
import param
import holoviews as hv
import pandas as pd
import geopandas as gpd

hv.extension('bokeh',logo=False)
pn.extension()

class Inputs(param.Parameterized):
    """Class providing widgets for selecting and configuring input datasets. """

input_file = param.FileSelector()
x_field    = param.Selector(doc='A field selector for longitude')
y_field    = param.Selector(doc='A field selector for latitude')
id_field   = param.Selector(doc='A field selector for the identifier')
data       = None

def __init__(self, init=False, **kwargs):
    super(Inputs, self).__init__(**kwargs)
    if init:
        self.update_inputs()        

@param.depends('input_file', watch=True)
def update_inputs(self):
    """Method which auto-updates `self.x_field`, `self.y_field`, 'self.id_field', `self.data` based
    on changes to `self.input_file`.
    """
    if (self.input_file):
                                      # initialize with epsg 3857; coords converted to meters later  
        df                          = gpd.GeoDataFrame(pd.read_csv(self.input_file),
                                                       crs={'init': 'epsg:3857'})
        self.param.x_field.objects  = df.columns
        self.x_field                = df.columns[0]
        self.param.y_field.objects  = df.columns
        self.x_field                = df.columns[0]
        self.param.id_field.objects = df.columns
        self.id_field               = df.columns[0]
        self.data                   = df

class App(param.Parameterized):

app = pn.template.ReactTemplate(title='ReactTemplate App')

inputs = pn.Tabs()
for n in range(0,5):
    if n == 0:
        inputs.append((f'Input {n+1}',pn.Card(Inputs(init=True), title = "Configure Input File")))
    else:
        inputs.append((f'Input {n+1}',pn.Card(Inputs(), title = "Configure Input File")))

def view(self):
    pn.config.sizing_mode = 'scale_both'
    self.app.sidebar.append(self.inputs)
    
    # remove class name 'Inputs' from each instance
    for i in self.app.sidebar[0]:
        i[0].pop(0)
        
    return self.app.show()

demo = App()
demo.view()

The first time I run it the resulting sidebar looks like this:

image
image435×528 7.24 KB

Subsequent runs produce this, which is what I want:

image

How can I force the latter behaviour to get the < > scroll buttons? I’m curious as to why running the same code consecutively produces different results.

I have Panel version 0.11.0.

1 Like
2

Ah ha! After publishing my question I tried moving the pn.config.sizing_mode = 'scale_both' line and that solved it. When I remove that that config line up from my App class and put it at the top immediately after my imports it works as I expect.

1 Like
3

Looks great :+1:happy you found and shared the solution.