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.

5 Likes

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

1 Like

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 https://github.com/bokeh/bokeh/issues/9671 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.

1 Like

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!

1 Like

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

For the record I tried to get started on Vaadin but I cannot get them imported from unpkg.com. See https://github.com/vaadin/vaadin/issues/66

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!