I agree that this demo looks awesome! I would really like to understand how to do this myself 
I am happy to share this if it contributes to showing the possibilities of panel. I am a bit social media shy so I do not intend to tweet or blog about it. However, I have no problems with you using it on your website or any other channel. Nice website by the way (awesome-panel.org)!
Let me first fix a few loose ends in the code and refactor to make it all somewhat comprehensible for others. Then I will put it on github and share the link here.
And the .show() really solved my debugging issues! I wasn’t aware of the .show() option actually. Thnx for the advice @Marc.
2 Likes
@Marc @JoyMonteiro @philippjfr
I have finally found some time to put my work on combining panel with the golden-layout on github:
here is the link. Note that currently it is a stub, and I am an inexperienced (open source) package developer, but let’s where it goes. I am definetly open to suggestions or advice.
2 Likes
@Leonidas. That looks awesome. I hope to get some time to take a look and maybe also integrate an example at awesome-panel.org.
But congrats on really awesome work.
Amazing work @Leonidas, Congratulations !!!.
I have been working in the golden layout a time ago and it is really difficult to do it work in the right way. I have a small question about the resizing of the plots. I would like that the bokeh plots adjust their size to the size of the GL container when the container is re-sized in the ‘stretch-both mode’ of the plots but I dont know how to do it.
I found something about dispatch resize event in javascript ( window.dispatchEvent(new Event('resize'));) but after 3 weeks trying to learn a little of js the solution keeps hiding for me.
1 Like
regarding the global message service I use something similar (I believe) for progress reporting and have a plan for a general message service for awesome-panel.org too.
I did not try to adapt the .js code; too many curly braces for my taste. What I did is set the Bokeh option “responsive” to True. In my case in the custom Bokeh theme, but it should also work as a kwarg. In principle that should do it. I did have to explicitly set the golden-layout frames to non-scrollable to prevent scrollbars.
Hi @Leonidas, thanks for providing this amazing golden template. This will for sure be very helpful for me.
I’m getting some 404 errors:
2020-05-27 15:11:00,633 404 GET /assets/panel-customizations.css (::1) 0.97ms
2020-05-27 15:11:00,789 404 GET /assets/js/jquery-1.11.1.min.js (::1) 1.00ms
2020-05-27 15:11:00,789 404 GET /assets/js/goldenlayout.min.js (::1) 1.00ms
2020-05-27 15:11:00,860 404 GET /assets/js/jquery-1.11.1.min.js (::1) 1.00ms
2020-05-27 15:11:00,863 404 GET /assets/js/goldenlayout.min.js (::1) 0.00ms
Is this the same as your original issue? The panel-customization.css seem to be missing from the repository, I can only find the -dark and -light versions.
EDIT: I found the static_dirs kwarg but I dont have the development version of panel installed so I replaced the static paths with absolute directory paths. This fixed the 404 erros but i cant load the scripts:
Loading failed for the <script> with source “c:\Users\jhsmi\pp\elvis\assets\js\jquery-1.11.1.min.js”.
I’ll give the panel dev a go
Wow, looks really good! I will play around with it the first change I get and write back if I have any questions.
Hi @Jhsmit
- You are right about the missing .css file, this is fixed now.
- Serving from the command line requires the inclusion of “elvis” in the paths to the assets, I forgot that. I have refactored a bit a included a .servable method now, which should make it easier to serve from the command line (without the need to work on the dev install of panel). So no need any more to manually adapt paths.
- Now the problem with the .js files not being found is something I get too! That is what started this thread initially. At some point I ‘solved’ it, but I never understood how. I only played around with my conda environments, but now I have the exact same versions of bokeh and panel as I had when it worked! So this is still a mystery to me.
Using a normal installation of panel (panel 0.9.5, bokeh 2.0.1) I did the following:
- Copy the
main.pyfile from one of the examples to theelvis(the top elvis) - Change the
if __name__etc statement to onlygpanel.servable() - run with
panel serve elvisfrom the directory above
This gives 404 error for the js files only, not the css files.
Same for bokeh 2.0.2
With a panel dev installation and the serve_static branch, and bokeh 2.0.1:
- run python main.py from the console
It works! 
(I was ready to list all the errors (something about panel.cli) but they magically disappeared.
Good to hear you got it working. I added a warning to the readme that the command line serve may give issues, as we have both experienced.
I have a follow-up question on this topic. I would like to make an offline portable version of the golden-layout based panel. The problem with the default approach is that the static assets aren’t included:
from bokeh.resources import INLINE
my_panel.save('index.html', resources=INLINE)
Is there a way to include static assets in combination with .save() ?
p.s. It is nice if these assets are inlined in the html, but this isn’t that important as it is also
fine to share a directory in stead of just an html file, or use an inline tool afterwards.
I’m sorry but I would like to report that I also have a trouble import js_files locally.
I’m working for using the sortable list (please see here Sortable Widget - #16 by Marc)
This does work
pn.extension(js_files={'sortablelist': "https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"})
This does not work
pn.extension(js_files={'sortablelist': "Sortable.js"})
The Sortable.js is in the same folder as my python script notebook file.
I am using Panel 1.4.0 and this issue persists.
GNU nano 4.8 test.py Modified import panel as pn
# Load the JavaScript file
pn.extension(js_files={'/recording.js': 'static/recording.js'})
# Define a simple application
def app():
return pn.pane.Markdown("Hello, Panel!")
# Serve the application
pn.serve(app)
In the static folder I have this in recording.js:
console.log("Test JavaScript file loaded");
I get 404 errors like so:
GET
http://localhost:41743/static/recording.js
[HTTP/1.1 404 Not Found 2ms]
Is this a problem with the new V1.4.0?
What would be very nice is have an equivalent for js content like you have with css - pn.config.raw_css.append(css_content)
I also tried this:
Add the CSS content to the Panel configuration
pn.config.raw_css.append(css_content)
pn.config.js_files[‘custom_bundle’] = [RECORD_AUDIO_JS]
pn.extension()
Where RECORD_AUDIO_JS is the content of my recording.js file as a string.
I get this:
File “/dev/3_11venv/lib/python3.11/site-packages/panel/io/resources.py”, line 714, in js_files
js_files = self.adjust_paths([
^^^^^^^^^^^^^^^^^^^
File “/dev/3_11venv/lib/python3.11/site-packages/panel/io/resources.py”, line 603, in adjust_paths
resource = resource.replace(‘https://unpkg.com’, config.npm_cdn)
^^^^^^^^^^^^^^^^
AttributeError: ‘list’ object has no attribute ‘replace’
500 GET / (127.0.0.1) 477.57ms