Material Design App Template for Panel (and Bokeh)

MarcSkovMadsen · April 10, 2020, 8:34am

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

github.com/holoviz/panel

A Material Template Example

holoviz:master ← holoviz:material-template-example

opened 08:20AM - 10 Apr 20 UTC

MarcSkovMadsen

+779 -124

I have created a Material Template Example . I don't yet know where this will… end. Maybe it will end as - Just an example that shows Panel users how to use Material Design and `mwc` components to build awesome analytics apps in Python. - a Material Design Generic Template (Builder) for Panel. - The generic app template included in Panel? There will be a lot of small tweaks to do. But it got a good start. To me creating a few good, high quality templates like this is a killer feature. It makes Panel able to compete with BI tools and modern Front End frameworks. But in Python (almost) only. ![material_template](https://user-images.githubusercontent.com/42288570/78975543-9a821480-7b14-11ea-97b9-d150638a328a.gif)

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.

Bryan · April 10, 2020, 5:27pm

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

MarcSkovMadsen · April 11, 2020, 5:11pm

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.

davidpasquale · April 15, 2020, 7:11pm

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!

MarcSkovMadsen · April 16, 2020, 2:25am

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

MarcSkovMadsen · April 16, 2020, 4:30am

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

MarcSkovMadsen · April 16, 2020, 4:59am

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 :-).

davidpasquale · April 16, 2020, 9:19am

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!