Newbie question - Why is it that no widgets show on the panel app only when using templates?

Panel
1

This is just a “Hello World” example of panel app.

def model(n=5):
    return "⭐"*n

import panel as pn

pn.extension(template='fast')

slider = pn.widgets.IntSlider(value=5, start=1, end=5)

interactive_model = pn.bind(model, n=slider)

layout = pn.Column(slider, interactive_model)

app = pn.template.FastListTemplate(
    site="Panel", title="Example", main=[layout],
).servable()

It is working correctly in jupyter notebook, and also when templates are not used.
But, when I tried to create a structured web app adding template elements such as main, sidebar etc., then no widgets were displayed at all, as shown in the picture below.

image
image870×450 4.06 KB

What am I missing? Of course, I’ve started the app with the command panel serve app.py --show

Thanks in advance.

2

Hi

Firstly, welcome to the this community.

Here is quick asker for you question, Just remove template=‘fast’.
Please see the code below:

def model(n=5):
    return "⭐"*n

import panel as pn

pn.extension()

slider = pn.widgets.IntSlider(value=5, start=1, end=5)

interactive_model = pn.bind(model, n=slider)

layout = pn.Column(slider, interactive_model)

app = pn.template.FastListTemplate(
    site="Panel", title="Example", main=[layout],
).servable()

Kind regards
Victor

3

This isn’t as simple a problem as you might think. If it were that easy to solve, I wouldn’t have asked in the first place. Initially, I tried using pn.extension() alone but that didn’t work. So, I attempted again specifying template=fast'. Changing the template to materialorbootstrap` did not solve the problem.
Without using any templates, the widgets appear fine on the browser.

The same problem persisted whether panel was installed through pip or conda.

For reference, the environment is as follows.

python = “3.11”
numpy = “1.25.2”
pandas = “2.0.3”
matplotlib = “3.7.2”
bokeh = “3.2.2”
seaborn = “0.12.2”
ipykernel = “6.25.1”
jupyter-bokeh = “3.0.7”
panel = “1.2.1”
altair = “5.0.1”
vega-datasets = “0.9.0”
hvplot = “0.8.4”
jupyterlab = “4.0.5”

4

Hmm, if I had to guess it’s likely environment specific.

if I just copy/paste the original SW-example into my jupyer-lab and replace .servable() with .show(). The resulting server runs fine in the Browser (tested MSEdge and Firefox) and displays the template and widget correctly. .

Same if I copy the original SW into a file and launch it with panel serve --show

my environment is very similar (same python, panel and jupyter-lab. I had still bokeh 3.2.0, but also works fine after upgrading to 3.2.2

I’m not seasoned enough to help from here though.

Wondering if you see anything weird if you start the panel serve with --admin and take a look at the admin Panel etc … (and maybe enable logs)

Johann

5

forgot the obvious cross-check: no ad-blockers or other browser plugins that could interfere with small objects if they’re embedded in a template … ?

6

For me it’s the star, so when I have it in the code, even if it is commented out, it breaks the servable feature from within jupyter lab, I get error 500, remove it stuff starts to work, though I can show() no issues, didn’t go as far as trying to serve from command line.

Fails when line with ‘star’ commented out

image
image1469×810 58 KB

Now works with ‘star’ removed

image
image1491×827 45.9 KB

Changed original code to replace ‘star’ with ‘hello’ seems to work with servable from within jupyter lab now.

image
image1486×825 44.8 KB

7

Thanks for everyone’s enthusiastic participation in the discussion…

First of all, it is not the problem of “:star:” nor the problem of ad-blocker or any other extension.

The culprit was the Chrome Browser itself.
Inspect panel shows the following error:

Error rendering Bokeh items: Error: panel.models.browser.BrowserInfo(p1402).timezone given invalid value: undefined
    at N.validate (bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:182:2258)
    at N._update (bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:182:1973)
    at N.set_value (bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:182:1466)
    at d._setv (bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:179:5411)
    at d.setv (bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:179:5994)
    at d.set [as timezone] (bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:179:1168)
    at s.initialize (panel.min.js?v=206620a657f1ccc8af72b866fdcef20e641c48f39ce27f338ce8313949c63e53:49:434)
    at a (bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:224:197)
    at t.build_view (bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:224:321)
    at bokeh.min.js?v=3ca6425586de5036dc01992dd69aa61e9196dd02619557cfaeb1b3d8b77adf724be49401b1168483d165494ce57a6daa16e6f6d3660fef117d45028221f86357:218:257

I cannot know why timezone error is involved in this situation, but the situation is as it seems.

The same code works without glitch in Safari browser.

Thank for all of you…