Adding local .js files to my app

I am working on dashboard that uses some external .js files. I have included them as follows:

js_files = {'jquery': 'https://code.jquery.com/jquery-1.11.1.min.js',
        'goldenlayout': 'https://golden-layout.com/files/latest/js/goldenlayout.min.js'}

pn.extension(js_files=js_files)

This works fine. Next step is that I want to include these locally. I downloaded them and put them in a folder ‘static’ and tried:

js_files = {'jquery': 'static\jquery-1.11.1.min.js',
            'goldenlayout': ''static\goldenlayout.min.js'}

pn.extension(js_files=js_files)

This doesn’t work. I tried (in desperation):

  • Call the app from the folder (panel serve myapp)
  • Call the main.py directly panel serve myapp\main.py (this shouldn’t be the way…)
  • Call pn.serve(mypanel) from the python code and run the python script
  • Try all the above with and withouth including myapp in the path (‘myapp\static\jquery-1.11.1.min.js’)

Nothing works. My question is: in what path is the server expecting the .js files?
Fun fact, I can include local .css files with pn.extension(css_files=['static\style.css'])

I never really figured out what the problem was, but it works now. For anyone with similar issues:
I rebuilt my conda environment and I have the following versions installed:
panel=0.9.5
bokeh=2.0.1

The js files are included using
js_files = {'jquery': 'app\\static\\jquery-1.11.1.min.js',
'goldenlayout': ''app\\static\\goldenlayout.min.js'}
pn.extension(js_files=js_files)

I simply call
panel serve app
from te folder containing app and it works fine.

1 Like

Great you solved it @Leonidas.

If you can please share a screenshot or .gif video of your app one day. Would be nice to see the awesome Golden Layout in action.

Sure. Let me fiddle around a little longer until I have something worth showing :).

@Marc Here is a quick video of what I have now. I agree that the golden-layout is awesome.

I restyled the golden-layout a bit. I also made a (somewhat dodgy) python module that generates javascript code for the golden-layout based on relatively few lines of python code. The python code for the example in the video is:

composition = elvis.Composition()
composition.compose(
    composition.row(
        composition.panel(ui.ControlPanel.panel, 'Controls', width=210),
        composition.stack(
            composition.panel(panel_electric, 'Electric'),
            composition.panel(panel_magnetic, 'Magnetic'),
            composition.panel(panel_x, 'x'))))

Furthermore I made a KPI widget (inherited from pn.pane.HTML) that autoupdates using a periodic callback and restyled the plotting layout to my liking (holoviews with bokeh backend).

It is all still a bit experimental. I was considering making it a more mature package to enable a high level interface for the combination of panel and golden-layout + some default layout tweaks. However, I am really struggling with the way the panel server (i.e. bokeh) operates. Because I have a directory style I need to call panel serve myapp. This prevents me from using pycharm debugging mode, and I can’t wrap my directory style app in a package (the static files need to be in myapp). This would all be solved if it would just be possible to launch a directory style app from python (pn.serve(mypanel). But apparantly that is not possible. Any advice would be appreciated.

2 Likes

Looks really awesome. I like the idea of making something that people can reuse or get inspiration from. There are different options to share

  • Contribute it to Panel. @philippjfr has been working on a golden layout template so maybe it needs some coordination.
  • Contribute an example to the gallery
  • Share it in a package your self called for example panel-golden
  • Write a blog post about it
  • Write a tweet with a link to github
  • Share example code below that can be run by all.

Arrgghhh static assets with pn.serve :slight_smile: . I’m waiting for that too.

There is a feature request here. https://github.com/holoviz/panel/issues/1118. Please go and like if you need it as well.


For debugging it’s best for me to start it with app.show() because then I VS Code debugging just works.

Is your debugging dependent on the static assets being served? Can’t you debug minor components with app.show() instead?

Hi @Leonidas

I think that not a lot of people in Python knows how powerful Panel is.

It would really help them and Panel if you did a short tweet with the video. gif and provided a link to the tweet below. I can also do it if that is better for you.


Also I would like to add a simple example to the gallery at awesome-panel.org if that would be ok with you?

If you could provide example code below, provide a link to GitHub or do a pull request at https://github.com/marcskovmadsen/awesome-panel that would be really helpful.

I agree that this demo looks awesome! I would really like to understand how to do this myself :slight_smile:

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

Just FYI I’m working on static file serving here: https://github.com/holoviz/panel/pull/1319

@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

@Leonidas

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.

See https://github.com/MarcSkovMadsen/awesome-panel/blob/master/package/awesome_panel/application/services/progress_service.py

nghenzi2019

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.

Thanks @Marc. I’ll take a look at your message service.

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.py file from one of the examples to the elvis (the top elvis)
  • Change the if __name__ etc statement to only gpanel.servable()
  • run with panel serve elvis from 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! :beer: (I was ready to list all the errors (something about panel.cli) but they magically disappeared.