Material Design App Template for Panel (and Bokeh)

Hi All

I’ve started to contribute a Material Design App Template for Panel based on the mwc web components.

Its important (I belive) that these are web components as all the html, css and javascript is isolated in the component and does not interfere with the Bokeh html, css and javascript. Thus enabling very modern, fast and responsive templates.

If you are interested and have comments, suggestions or would like to contribute head over to the PR here

You can find the notebook example here https://github.com/holoviz/panel/blob/material-template-example/examples/gallery/templates/material_template.ipynb for now.

There is a large video .gif here and some screen shots below.

image1260×1249 70 KB

image715×1249 57.5 KB

image1119×1249 83.6 KB

Looks great @MarcSkovMadsen Are there any low-hanging fruit changes that could be made on the Bokeh side to make things simpler or better?

Thanks @Bryan.

Regarding Templates there is nothing here and now.

But

• @Philipp_Rudiger and I have been discussing if we could have dynamic templates and templates inside templates in order to make a more dynamic application.
• and there is this one [FEATURE] Enable the Server to serve apps at sub urls like /gallery/image-classifier · Issue #9671 · bokeh/bokeh · GitHub which hinders Bokeh/ Panel in serving apps at urls like app/app1 and page/page1.
  • I know you can just do app-app1 and page-page1 but it is an issue that is really difficult to explain to people. It also is a problem if you want to create apps that have url paths inline with for example an associated rest api. Or let the user navigate by and share urls.

The below image shows an app in a Jupyter Notebook. Theme is material/ Panel green.

image876×787 41 KB

WOW, excellent job! Very impressive.
Do you have any idea how to implement a docking system in order to drag&drop plots from a side bar and adjust their position like the jupiterlab interface (i.e. lumino)?
Like combining your example with this https://bl.ocks.org/nmichaud/raw/e99ae0a41f49078498f6b72f65965407/#/c7116784-7f4c-11ea-b97d-e1e0184dd325
Thank you!

Hi @davidpasquale

I have not tried Lumino and the documentation is not existing. But I’m sure it could be done.

There are easier alternatives though.

• One is the golden layout for which there is already an example template here.
• Another that would be easy to use (I believe) is the Vaadin framework. You can find their components here

image1660×1143 298 KB

image1357×1143 124 KB

For the record I tried to get started on Vaadin but I cannot get them imported from unpkg.com. See Cannot import components from unpkg.com · Issue #2004 · vaadin/web-components · GitHub

Hi @davidpasquale

If a lumino template for panel (or Bokeh) would be valuable to you feel free to create a feature request for Panel here.

Templates are on the Roadmap for Panel 1.0 and is actually the focus right now so you might be lucky that it gets attention :-).

Hi, @MarcSkovMadsen
as suggested I opened a request on Panel:
https://github.com/holoviz/panel/issues/1275
If you have time to play with it, I really thank you!