When I execute the code below to create a DatePicker which filters a tabulator table, it works fine in a Jupyter notebook. However when I use `panel_object.save(filename=html_file, resources=INLINE)’ the rendered HTML does not have the Table contents update to reflect the DatePicker selection.
Below is the date picker not filtering in the browser:
Below is the code which works in jupyter notebook.
import datetime
import pandas as pd
import panel as pn
from io import BytesIO
from bokeh.util.browser import view
from bokeh.resources import INLINE
import datetime as dt
pn.extension('tabulator')
def add_day():
return datetime.timedelta(days=(1))
# creation of dummy data
def create_uptime_data():
up_time = []
for i in range(81):
up_time.append('UP')
for i in range(19):
up_time.append('DOWN')
df_data = {"UP TIME": up_time}
return pd.DataFrame.from_dict(df_data)
def create_date_data():
start = dt.date(2021, 1, 26)
dates = [start + dt.timedelta(days=i) for i in range(len(df))]
return dates
df = create_uptime_data()
date_picker = pn.widgets.DatePicker(name='Date Picker',
start=create_date_data()[0],
end=create_date_data()[-1],
value=create_date_data()[0])
@pn.depends(date_picker.param.value)
def create_table(date=date_picker.param.value):
df = create_uptime_data()
df['date'] = create_date_data()
df = df[df['date']==date]
tab = pn.widgets.Tabulator(df, height=500, layout='fit_columns',
sizing_mode='stretch_width')
return tab
daily = pn.Row(pn.Column(date_picker),create_table)
display(daily)
End with daily.servable()
You are suggesting doing daily.servable().save(filename=html_file, resources=INLINE) ? The daily.servable() on its own makes the panel render in Jupyter Notebook, but the issue is that the panel_object.save(html_file, resources=INLINE) output is not functioning wheras the Jupyter version works.
Oh you probably want embed=True in your save if you’re saving a static HTML; see Deploy and Export — Panel 0.12.4 documentation I thought it was dynamic.
When adding the ‘embed=true’ to the save function, the output file still does not have the date picker functioning as a filter for the table. You can select dates, but the data in the table does not update. The goal is to have the user be able to filter the table by interacting with the DatePicker widget. Here is the full code:
import datetime
import pandas as pd
import panel as pn
from io import BytesIO
from bokeh.util.browser import view
from bokeh.resources import INLINE
import datetime as dt
pn.extension('tabulator')
#define the temporary html file for viewing
html_file = 'temp.html'
# utility function for getting html from panel and saving to file
def get_pn_html(panel_object):
tmpfile = BytesIO()
panel_object.save(filename=html_file, resources=INLINE, embed=True)
view(html_file)
pn.extension('tabulator')
def add_day():
return datetime.timedelta(days=(1))
# creation of dummy data
def create_uptime_data():
up_time = []
for i in range(81):
up_time.append('UP')
for i in range(19):
up_time.append('DOWN')
df_data = {"UP TIME": up_time}
return pd.DataFrame.from_dict(df_data)
def create_date_data():
start = dt.date(2021, 1, 26)
dates = [start + dt.timedelta(days=i) for i in range(len(df))]
return dates
df = create_uptime_data()
date_picker = pn.widgets.DatePicker(name='Date Picker',
start=create_date_data()[0],
end=create_date_data()[-1],
value=create_date_data()[0])
@pn.depends(date_picker.param.value)
def create_table(date=date_picker.param.value):
pn.extension('tabulator')
df = create_uptime_data()
df['date'] = create_date_data()
df = df[df['date']==date]
tab = pn.widgets.Tabulator(df, height=500, layout='fit_columns',
sizing_mode='stretch_width')
return tab
daily = pn.Row(pn.Column(date_picker),create_table)
get_pn_html(daily)
A DatePicker is currently not embeddable, it could be done but you have to understand the limitations. To embed an interactive app you need to record every state (or at least a representative sample of states). The DatePicker can include hundreds or thousands of states which all have to embedded. If you need interactivity of that kind you really won’t get around running a live server.
Does this apply to the DateSlider widget? Which other widget would you recommend in lieu of the DatePicker?
Would it be possible if enabled_dates is set?
DateSlider should work since it’s limited to the number of states
2 Likes
