# GoldenTemplate Issues

**URL:** <https://discourse.holoviz.org/t/goldentemplate-issues/3222>\
**Category:** Panel\
**Tags:** goldentemplate\
**Created:** [January 5, 2022, 1:59pm UTC](https://discourse.holoviz.org/t/goldentemplate-issues/3222 "2022-01-05T13:59:15Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![haditya](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/haditya/32/3045_2.png) [@haditya](https://discourse.holoviz.org/u/haditya)\
**Post date:** [January 5, 2022, 1:59pm UTC](https://discourse.holoviz.org/t/goldentemplate-issues/3222/1 "2022-01-05T13:59:16Z")

</div>

I recently updated panel from 0.12.1 to 0.12.6

I am trying to run the example here [GoldenLayout — Panel 0.12.6 documentation](https://panel.holoviz.org/reference/templates/GoldenLayout.html)  
by changing the servable() to show()

I don’t see any content

 ![image](https://discourse.holoviz.org/uploads/default/original/2X/7/7e3ba480d24515fcb5979cb899f58c067b57d709.png)

Inspection the HTML elements shows some errors in the log. I am not too familiar with this - any ideas?  
 ![image](https://discourse.holoviz.org/uploads/default/original/2X/9/9242c55cb4e93756b770e5b8284dafcdb820e460.png)

I recall this working with 0.12.1

---

<div class="post-metadata">

**Author:** ![haditya](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/haditya/32/3045_2.png) [@haditya](https://discourse.holoviz.org/u/haditya)\
**Post date:** [January 5, 2022, 2:12pm UTC](https://discourse.holoviz.org/t/goldentemplate-issues/3222/2 "2022-01-05T14:12:34Z")

</div>

The links to the CSS and JS files in the templates folder are likely out-of-date?  
Updating them seems to fix this?  
Should I create a bug ticket?

---

<div class="post-metadata">

**Author:** ![Marc](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/marc/32/24_2.png) [@Marc](https://discourse.holoviz.org/u/Marc)\
**Post date:** [January 5, 2022, 3:05pm UTC](https://discourse.holoviz.org/t/goldentemplate-issues/3222/3 "2022-01-05T15:05:50Z")

</div>

Yes please do @haditya . Thx.

---

<div class="post-metadata">

**Author:** ![haditya](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/haditya/32/3045_2.png) [@haditya](https://discourse.holoviz.org/u/haditya)\
**Post date:** [January 5, 2022, 4:26pm UTC](https://discourse.holoviz.org/t/goldentemplate-issues/3222/4 "2022-01-05T16:26:37Z")

</div>

> <https://github.com/holoviz/panel/issues/3062>
>
> Thanks for contacting us! Please read and follow these instructions carefully, t…hen delete this introductory text to keep your issue easy to read. Note that the issue tracker is NOT the place for usage questions and technical assistance; post those at \[Discourse\](https://discourse.holoviz.org) instead. Issues without the required information below may be closed immediately.
> 
> 
> \#### ALL software version info
> panel 0.12.6
> bokeh 2.4.2
> python 3.8
> browsers = vivaldi, edge (chromium based)
> 
> \#### Description of expected behavior and the observed behavior
> With regard to posting in discourse https://discourse.holoviz.org/t/goldentemplate-issues/3222/4
> Golden Template does not layout the components 
> Subsequent inspection of the HTML components revealed that the CSS and JS links have been updated for the goldentemplate layout. 
> 
> \#### Complete, minimal, self-contained example code that reproduces the issue
> From the example here https://panel.holoviz.org/reference/templates/GoldenLayout.html
> \`\`\`
> import panel as pn
> import numpy as np
> import holoviews as hv
> 
> pn.extension(sizing\_mode='stretch\_width')
> 
> 
> golden = pn.template.GoldenTemplate(title='Golden Template')
> 
> xs = np.linspace(0, np.pi)
> freq = pn.widgets.FloatSlider(name="Frequency", start=0, end=10, value=2)
> phase = pn.widgets.FloatSlider(name="Phase", start=0, end=np.pi)
> 
> 
> @pn.depends(freq=freq, phase=phase)
> def sine(freq, phase):
> return hv.Curve((xs, np.sin(xs \* freq + phase))).opts(
> responsive=True, min\_height=400)
> 
> 
> @pn.depends(freq=freq, phase=phase)
> def cosine(freq, phase):
> return hv.Curve((xs, np.cos(xs \* freq + phase))).opts(
> responsive=True, min\_height=400)
> 
> 
> golden.sidebar.append(freq)
> golden.sidebar.append(phase)
> 
> golden.main.append(
> pn.Row(
> pn.Card(hv.DynamicMap(sine), title='Sine'),
> pn.Card(hv.DynamicMap(cosine), title='Cosine')
> )
> )
> golden.main.append(
> pn.Row(
> pn.Card(hv.DynamicMap(sine), title='Sine'),
> pn.Card(hv.DynamicMap(cosine), title='Cosine')
> )
> )
> 
> golden.show()
> 
> \`\`\`
> 
> \#### Stack traceback and/or browser JavaScript console output
> !\[image\](https://user-images.githubusercontent.com/61999659/148252337-64a04c8d-41dc-4a53-a1b5-70d8c11d41ca.png)
> 
> 
> \#### Screenshots or screencasts of the bug in action
> !\[image\](https://user-images.githubusercontent.com/61999659/148252431-7694403a-5731-4d50-a25c-914d369572da.png)

Done

---

<div class="post-metadata">

**Author:** ![haditya](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/haditya/32/3045_2.png) [@haditya](https://discourse.holoviz.org/u/haditya)\
**Post date:** [January 6, 2022, 10:41am UTC](https://discourse.holoviz.org/t/goldentemplate-issues/3222/5 "2022-01-06T10:41:56Z")

</div>

Ok. uninstalled and reinstalled and created my conda env  
Still seeing the same thing

 ![image](https://discourse.holoviz.org/uploads/default/original/2X/e/eaa35ec6da5342ceedab267a435c50b2336303c8.png)

Does anyone know what this below css.map file is referring to?  
WARNING:tornado.access:404 GET /static/extensions/panel/bundled/css/files/latest/css/goldenlayout-base.css.map (::1) 2.00ms

---

<div class="post-metadata">

**Author:** ![haditya](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/haditya/32/3045_2.png) [@haditya](https://discourse.holoviz.org/u/haditya)\
**Post date:** [January 6, 2022, 4:23pm UTC](https://discourse.holoviz.org/t/goldentemplate-issues/3222/6 "2022-01-06T16:23:26Z")

</div>

Could this be caused by mixing conda channels ie 0.12.1 was in main/default channel  
while 12.6 was from conda-forge?

I reinstalled the env with packages only from the default channel (main)  
panel 0.12.1  
bokeh 2.3.3

And this works again. I could try just panel or just bokeh and see which one breaks this for me.

---

<div class="post-metadata">

**Author:** ![Marc](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/marc/32/24_2.png) [@Marc](https://discourse.holoviz.org/u/Marc)\
**Post date:** [January 7, 2022, 5:02am UTC](https://discourse.holoviz.org/t/goldentemplate-issues/3222/7 "2022-01-07T05:02:23Z")

</div>

Hi @haditya

The CSS map file is not cause the problem. You are just getting a warning that its missing. Its used when/ if you debug things.

**What is a CSS map file?**

It is a JSON format file that links the CSS file to its source files, normally, files written in preprocessors (i.e., Less, Sass, Stylus, etc.), this is in order do a live debug to the source files from the web browser.

---

<div class="post-metadata">

**Author:** ![haditya](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/haditya/32/3045_2.png) [@haditya](https://discourse.holoviz.org/u/haditya)\
**Post date:** [January 7, 2022, 11:18am UTC](https://discourse.holoviz.org/t/goldentemplate-issues/3222/8 "2022-01-07T11:18:11Z")

</div>

Ok… I’m starting to suspect I might be running into those mismatched bokeh.js issues - browser is using a cached js file. Is there a way to check what bokeh.js in using in the browser?

I’ve tried uninstalling and reinstalling the browser to no effect. Deleting cache and temporary files in the browser also has no effect.

---

<div class="post-metadata">

**Author:** ![Marc](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/marc/32/24_2.png) [@Marc](https://discourse.holoviz.org/u/Marc)\
**Post date:** [January 7, 2022, 2:52pm UTC](https://discourse.holoviz.org/t/goldentemplate-issues/3222/9 "2022-01-07T14:52:21Z")

</div>

The only thing I know of is a “hard refresh” of the browser [How to hard refresh your browser Chrome, Firefox, Safari (fabricdigital.co.nz)](https://fabricdigital.co.nz/blog/how-to-hard-refresh-your-browser-and-clear-cache)

This is sometimes required when a new version of Panel/ Bokeh is used.

---

<div class="post-metadata">

**Author:** ![haditya](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/haditya/32/3045_2.png) [@haditya](https://discourse.holoviz.org/u/haditya)\
**Post date:** [January 7, 2022, 2:59pm UTC](https://discourse.holoviz.org/t/goldentemplate-issues/3222/10 "2022-01-07T14:59:51Z")

</div>

Hard refresh - no impact either…

This is the error in the browser

> Blockquote  
> Uncaught (in promise) Error: Error rendering Bokeh model: could not find #6e5cbbf1-3efb-49e4-b9ce-7a8bc0e0b64f HTML tag  
> at u (bokeh.min.js?v=None:585)  
> at n.\_resolve\_root\_elements (bokeh.min.js?v=None:585)  
> at w (bokeh.min.js?v=None:163)  
> at Object.t.embed\_items (bokeh.min.js?v=None:163)  
> u @ bokeh.min.js?v=None:585  
> n.\_resolve\_root\_elements @ bokeh.min.js?v=None:585  
> w @ bokeh.min.js?v=None:163  
> t.embed\_items @ bokeh.min.js?v=None:163

````auto
function _(o, e, n, t, r) {
        t();
        const l = o(43)
          , d = o(44);
        function u(o) {
            let e = document.getElementById(o);
            if (null == e)
                throw new Error(`Error rendering Bokeh model: could not find #${o} HTML tag`);
            if (!document.body.contains(e))
                throw new Error(`Error rendering Bokeh model: element #${o} must be under <body>`);
            if ("SCRIPT" == e.tagName) {
                const o = (0,
                l.div)({
                    class: n.BOKEH_ROOT
                });
                (0,
                l.replaceWith)(e, o),
                e = o
            }
            return e
        }```

This is the function that seems to be returning a NULL for the some element. I don't know enough about this to be sure.
````

---

<div class="post-metadata">

**Author:** ![haditya](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/haditya/32/3045_2.png) [@haditya](https://discourse.holoviz.org/u/haditya)\
**Post date:** [January 7, 2022, 4:06pm UTC](https://discourse.holoviz.org/t/goldentemplate-issues/3222/11 "2022-01-07T16:06:41Z")

</div>

when i use panel serve \<filename\>.py - I get this

```auto
2022-01-07 11:04:46,017 Starting Bokeh server version 2.4.2 (running on Tornado 6.1)
2022-01-07 11:04:46,024 User authentication hooks NOT provided (default user enabled)
2022-01-07 11:04:46,030 Bokeh app running at: http://localhost:5006/try2
2022-01-07 11:04:46,030 Starting Bokeh server with process id: 6460
2022-01-07 11:05:26,825 Starting Bokeh server version 2.4.2 (running on Tornado 6.1)
2022-01-07 11:05:26,827 User authentication hooks NOT provided (default user enabled)
Launching server at http://localhost:49502
2022-01-07 11:05:28,956 WebSocket connection opened
2022-01-07 11:05:28,959 ServerConnection created
2022-01-07 11:05:40,742 WebSocket connection closed: code=1001, reason=None

```

---

<div class="post-metadata">

**Author:** ![haditya](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/haditya/32/3045_2.png) [@haditya](https://discourse.holoviz.org/u/haditya)\
**Post date:** [January 7, 2022, 5:55pm UTC](https://discourse.holoviz.org/t/goldentemplate-issues/3222/12 "2022-01-07T17:55:55Z")

</div>

Ok… Did some more work here…  
On a completely different PC that has never run Panel before  
OS : Fedora 35  
I followed the developer guide to install the dev environment (Instructions here - [Getting Set Up — Panel 0.12.6 documentation](https://panel.holoviz.org/developer_guide/index.html))  
I had to additionally install nodejs and run `python setup.py install` to build panel.js

Same results

MaterialTemplate displays the two plots correctly, GoldenTemplate does not.  
Inspection of the source on browser - shows the same above error.

---

<div class="post-metadata">

**Author:** ![Marc](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/marc/32/24_2.png) [@Marc](https://discourse.holoviz.org/u/Marc)\
**Post date:** [January 7, 2022, 6:29pm UTC](https://discourse.holoviz.org/t/goldentemplate-issues/3222/13 "2022-01-07T18:29:24Z")

</div>

Hi @haditya

I can see that there is a difference between chrome and firefox. I can replicate your issue with Panel 0.12.6, bokeh 2.4.2 and Chrome or Edge browser. But it works with firefox (right below).

 ![image](https://discourse.holoviz.org/uploads/default/original/2X/b/beae1dd123805cf354d978c3fbe602f275094ce9.png)

```python
import panel as pn
import numpy as np
import holoviews as hv

pn.extension(sizing_mode = 'stretch_width')

golden = pn.template.GoldenTemplate(title='Golden Template')

xs = np.linspace(0, np.pi)
freq = pn.widgets.FloatSlider(name="Frequency", start=0, end=10, value=2)
phase = pn.widgets.FloatSlider(name="Phase", start=0, end=np.pi)

@pn.depends(freq=freq, phase=phase)
def sine(freq, phase):
    return hv.Curve((xs, np.sin(xs*freq+phase))).opts(
        responsive=True, min_height=400)

@pn.depends(freq=freq, phase=phase)
def cosine(freq, phase):
    return hv.Curve((xs, np.cos(xs*freq+phase))).opts(
        responsive=True, min_height=400)

golden.sidebar.append(freq)
golden.sidebar.append(phase)

golden.main.append(
    pn.Row(
        pn.Card(hv.DynamicMap(sine), title='Sine'),
        pn.Card(hv.DynamicMap(cosine), title='Cosine')
    )
)
golden.main.append(
    pn.Row(
        pn.Card(hv.DynamicMap(sine), title='Sine'),
        pn.Card(hv.DynamicMap(cosine), title='Cosine')
    )
)

golden.servable()

```

---

<div class="post-metadata">

**Author:** ![haditya](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/haditya/32/3045_2.png) [@haditya](https://discourse.holoviz.org/u/haditya)\
**Post date:** [January 7, 2022, 6:48pm UTC](https://discourse.holoviz.org/t/goldentemplate-issues/3222/14 "2022-01-07T18:48:47Z")

</div>

> [@Marc](#):
>
> me and firefox. I can replicate your issue with Panel 0.12.6, bokeh 2.4.2 and Chrome or Edge browse

Thank you @Marc for the secondary validation (and potential solution in using firefox!!) So this must be an issue common to all chromium based browsers… I see it fail to load on Vscode notebooks with .servable() too. So something must be common to that too.