Fast example

[MarcSkovMadsen]

Example showcasing how to use the fast.design components with the panel-components package.

WORK IN PROGRESS.

Builds on https://github.com/paulopes/panel-components/pull/3.

The only new contribution is the file fast_hello_world.py. Can be run via python -m panel serve 'examples\fast_hello_world.py' --dev.

I have the following questions for @paulopes

1. How do I add raw_css? I would like to set the body margin to 0px.
2. How do I solve the "Bokeh is not defined" problem and get the bar chart shown?
3. How do integrate the Button with the Panel backend such that when I click it I can update the bar chart?

[MarcSkovMadsen]

I found out I need to set main=True in order to load the Bokeh assets

The next problem is to find out why the assets are not served

[MarcSkovMadsen]

Got the Bokeh assets served.

Next problem to solve is Error rendering Bokeh items: either 'docid' or 'sessionid' was expected..

[MarcSkovMadsen]

I believe the problem is some "older" version mismatch between the bokeh js served and the Bokeh/ Panel packages I'm running.

The current version of Bokeh .js works with docid and token instead of docid and sessionid. There is also a token in the document and no docid or sessionid.

[MarcSkovMadsen]

I can see that the CDN version of Bokeh in panel-components is an older 1.4.0

[MarcSkovMadsen]

I updated the local bokeh and panel .js to (unfortunately) a mix of 2.1.1 and 2.2.1.

But it "Works".

The main question for me now is. HOW DO I CONNECT THE FAST BUTTON TO THE PYTHON PANEL BACKEND? I wan't to change the chart when the button is clicked.

[paulopes]

Your questions:

1. How do I add raw_css? I would like to set the body margin to 0px. Use the .prepend_body_style() method instead of the .prepend_body_css() or the .append_head_no_nb_css() methods.

2. How do I solve the "Bokeh is not defined" problem and get the bar chart shown? I think that you’ve found the solution to this issue afterwards.

3. How do integrate the Button with the Panel backend such that when I click it I can update the bar chart? I am not familiar with Fast but I think that it may be possible to jslink a button (any plain HTML button) to a panel component, which would then be watched from python. I haven’t tried it but I think that the reference information to help with that is here: https://panel.holoviz.org/user_guide/Links.html

[paulopes]

I realize that these questions are all due to almost inexistent documentation on my part.

Let me explain what the main parameter does:

When you use the panel CLI command you can do two things:

1. serve one, two, a list of notebooks, specified by name or you can even use a wildcard
2. serve a directory, specifying a directory name such as . and if you do then the panel CLI command looks for a notebook named main.ipynb and it also serves all of the resource files that happen to have been placed inside of the static folder.

By default panel-component embeds all resources using base64 encoding in the template itself, all .js .css .png etc resources are embedded. This makes each served notebook really large, and it is wasteful when you are serving multiple notebooks simultaneously.

In order to avoid that waste and embedding of all the resources, you can use the second option. That is: You rename at least one of your notebooks to main.ipynb and set the main parameter to True, which will then result in all the resources being copied by panel-component over to the static folder instead of embedding them in the html, making each served notebook a lot smaller and allowing the browser to cache the resources.

The panel-component expects the original actual resources to exist in a www folder which can be inside the folder where the notebooks are, or inside the python module where you may be sub-classing the component to create a special purpose one, like the page component of the panel-bootstrap-vue package.

[paulopes]

I’ll have to find some time to play with Fast.