# Awesome-panel.org change log

**URL:** <https://discourse.holoviz.org/t/awesome-panel-org-change-log/66>\
**Category:** Showcase\
**Created:** [December 21, 2019, 7:10am UTC](https://discourse.holoviz.org/t/awesome-panel-org-change-log/66 "2019-12-21T07:10:27Z")\
**Posts on this page:** 20\
**Page:** 3

<div class="post-metadata">

**Author:** ![Marc](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/marc/32/24_2.png) [@Marc](https://discourse.holoviz.org/u/Marc)\
**Post date:** [August 17, 2020, 5:32am UTC](https://discourse.holoviz.org/t/awesome-panel-org-change-log/66/42 "2020-08-17T05:32:57Z")

</div>

#### Found workaround for getting Tabulator working in Notebook

For now with the help of @philippjfr I’ve found a workaround and updated the reference notebook.

 ![image](https://discourse.holoviz.org/uploads/default/original/1X/b0e66f85adedbeb54d714c588920ca181ef443fa.png)

---

<div class="post-metadata">

**Author:** ![Marc](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/marc/32/24_2.png) [@Marc](https://discourse.holoviz.org/u/Marc)\
**Post date:** [September 26, 2020, 7:45am UTC](https://discourse.holoviz.org/t/awesome-panel-org-change-log/66/43 "2020-09-26T07:45:04Z")

</div>

I’ve added an example of a Custom Panel Template with a Modal/ Dialog.

 ![thumbnail](https://discourse.holoviz.org/uploads/default/original/2X/e/ef0b8d1e6195ad3707a52356143c03ff81d2a316.png)

Check it out live here [https://awesome-panel.org/dialog\_template](https://awesome-panel.org/dialog_template)

or in the gallery [https://awesome-panel.org/gallery](https://awesome-panel.org/gallery)

 ![image](https://discourse.holoviz.org/uploads/default/original/2X/a/aa85f8bb5ab45ef5ced4af626e848092744b2377.jpeg)

which also contains links to the code

---

<div class="post-metadata">

**Author:** ![Marc](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/marc/32/24_2.png) [@Marc](https://discourse.holoviz.org/u/Marc)\
**Post date:** [October 28, 2020, 4:35pm UTC](https://discourse.holoviz.org/t/awesome-panel-org-change-log/66/44 "2020-10-28T16:35:12Z")

</div>

## Make Over and Upgrade to Panel 0.10

You can checkout a remade version of [awesome-panel.org](http://awesome-panel.org) using the Templates and other features from Panel 0.10.

I will not promote the site yet as I want it a bit further improved first. But I just want you to be able to check out the new Templates, Themes, ECharts, Cards etc. More to come.

 ![image](https://discourse.holoviz.org/uploads/default/original/2X/d/ddf6db4020e03fae75dd235d59ac8530c62cfa71.png)

 ![image](https://discourse.holoviz.org/uploads/default/original/2X/d/d0c0401cadf5fe609aabd5e13dadf39062ca8423.png)

 ![image](https://discourse.holoviz.org/uploads/default/original/2X/4/4476c0a97524d77499a716dd3fedc9bb449f2da7.png)

 ![image](https://discourse.holoviz.org/uploads/default/original/2X/d/da762962564ee08be39cda16641f3ecfe7ad8a2a.png)

 ![image](https://discourse.holoviz.org/uploads/default/original/2X/5/5f87c3e3b976f077db35d96e3606749fd207c6f6.png)

One of the consequences of the make over is that the app is no longer a multipage app. It’s a site of individual apps that I can now share direct links to. That is a major improvement I think. And it’s also more in line with the normal way of using panel with `pn.serve`.

Thus now I can have a gallery like [https://awesome-panel.org/gallery](https://awesome-panel.org/gallery) with direct links. The gallery is taking advantage of the fact that you can develop custom jinja templates in Panel. It’s yet another not so widely known super power of Panel. Powered by [Fast Components](https://www.fast.design/)

 ![image](https://discourse.holoviz.org/uploads/default/original/2X/f/f2e63fac73eccdea75f4df5a50be6ea22459b710.jpeg)

I think the Gallery has become really slick. I would like the Fast Widgets supported directly in Panel. I have implemented some of them. Check out [https://awesome-panel.readthedocs.io/en/latest/packages/awesome-panel-extensions/index.html#fast](https://awesome-panel.readthedocs.io/en/latest/packages/awesome-panel-extensions/index.html#fast)

I hope and think [awesome-panel.org](http://awesome-panel.org) and the Panel Templates are on a journey of improvement together. I think they can be even more easy to use, powerful and awesome than they already are. This is just the beginning.

If you find bugs then please help me fix them by reporting them via [https://github.com/MarcSkovMadsen/awesome-panel/issues](https://github.com/MarcSkovMadsen/awesome-panel/issues)

FYI @nghenzi, @Jhsmit, @philippjfr, @Leonidas, @xavArtley and the Panel community.

---

<div class="post-metadata">

**Author:** ![Jhsmit](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/jhsmit/32/151_2.png) [@Jhsmit](https://discourse.holoviz.org/u/Jhsmit)\
**Post date:** [October 29, 2020, 9:23am UTC](https://discourse.holoviz.org/t/awesome-panel-org-change-log/66/45 "2020-10-29T09:23:12Z")

</div>

That is awesome! I like the switching between light/dark and ([almost](https://github.com/MarcSkovMadsen/awesome-panel/issues/27)) any Template. Curious to see your code, I was also thinking of putting some buttons in the header bar.

---

<div class="post-metadata">

**Author:** ![Marc](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/marc/32/24_2.png) [@Marc](https://discourse.holoviz.org/u/Marc)\
**Post date:** [October 29, 2020, 2:53pm UTC](https://discourse.holoviz.org/t/awesome-panel-org-change-log/66/46 "2020-10-29T14:53:08Z")

</div>

Thanks @Jhsmit

I think switching between Default and Dark can make sense in general. Actually the Gallery template just stores the preference in the browser and uses that.

But for Templates as they are so different. They require extra work from your side to structure you List or GridSpec of items. The react template puts the constraint on your to collect things into “sections”. You don’t have a long list of items starting with a single line Header, then a markdown block, then an image, … Because that is not a good user experience. I think the Card will come in handy for organising into sections.

The problem I have is that Bokeh/ Panel does not layout images in Markdown nicely. See [https://github.com/bokeh/bokeh/issues/10033#issuecomment-718408756](https://github.com/bokeh/bokeh/issues/10033#issuecomment-718408756). So structuring a page with Markdown and images into sections is not possible currently.

IF ANY ONE KNOWS A WORKAROUND OR FIX I WOULD REALLY LIKE TO KNOW.

---

<div class="post-metadata">

**Author:** ![Leonidas](https://discourse.holoviz.org/letter_avatar_proxy/v4/letter/l/cab0a1/32.png) [@Leonidas](https://discourse.holoviz.org/u/Leonidas)\
**Post date:** [October 29, 2020, 6:19pm UTC](https://discourse.holoviz.org/t/awesome-panel-org-change-log/66/47 "2020-10-29T18:19:24Z")

</div>

Impressive gallery!

---

<div class="post-metadata">

**Author:** ![Marc](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/marc/32/24_2.png) [@Marc](https://discourse.holoviz.org/u/Marc)\
**Post date:** [October 30, 2020, 4:18am UTC](https://discourse.holoviz.org/t/awesome-panel-org-change-log/66/48 "2020-10-30T04:18:42Z")

</div>

## Template Settings Component Added

I’ve added a little nice **`TemplateSettings`** component to the header of [awesome-panel.org](http://awesome-panel.org) that allows you to switch between the different templates and themes.

 ![image](https://discourse.holoviz.org/uploads/default/original/2X/b/bcf5446f19c1dd88abf82d526ce5f45fe1824dec.png)

![awesome-panel-template-settings](https://discourse.holoviz.org/uploads/default/original/2X/c/c4f002b5f5f90bd81607e419d0715d1934c43c3b.gif)

I use the new **`SyncLocation`** object which makes it super easy to bind widgets and parameters to url query arguments. See the example [https://panel.holoviz.org/gallery/simple/sync\_location.html#simple-gallery-sync-location](https://panel.holoviz.org/gallery/simple/sync_location.html#simple-gallery-sync-location)

 ![sync_url](https://discourse.holoviz.org/uploads/default/original/2X/c/c91729755eda93eb2ca8aa69da700d48d5f338ce.gif)

I use the **`Icon`** and **`AwesomeButton`** from the awesome-panel-extensions package. Check Out the reference Guide on Binder [https://mybinder.org/v2/gh/MarcSkovMadsen/awesome-panel-extensions/master?filepath=examples%2Freference%2Fmodels%2FIcon.ipynb](https://mybinder.org/v2/gh/MarcSkovMadsen/awesome-panel-extensions/master?filepath=examples%2Freference%2Fmodels%2FIcon.ipynb)

 ![image](https://discourse.holoviz.org/uploads/default/original/2X/0/0b4b9e912282dacded9f3ef10f46d6f1c4bcc972.png)

If you would like to the see **source code** of the `TemplateSettings` component check out [https://github.com/MarcSkovMadsen/awesome-panel/blob/master/application/template/template\_settings.py](https://github.com/MarcSkovMadsen/awesome-panel/blob/master/application/template/template_settings.py).

If you would like to know more about how I integrate the Panel templates with [awesome-panel.org](http://awesome-panel.org), then take a look at [https://github.com/MarcSkovMadsen/awesome-panel/tree/master/application/template.Note:](https://github.com/MarcSkovMadsen/awesome-panel/tree/master/application/template.Note:)

This code will be refactored and moved to the awesome-panel-extensions package eventually 🙂

Feel free to share on Twitter if you like. [https://twitter.com/MarcSkovMadsen/status/1322033787560230913?s=20](https://twitter.com/MarcSkovMadsen/status/1322033787560230913?s=20)

---

<div class="post-metadata">

**Author:** ![Marc](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/marc/32/24_2.png) [@Marc](https://discourse.holoviz.org/u/Marc)\
**Post date:** [November 8, 2020, 6:10pm UTC](https://discourse.holoviz.org/t/awesome-panel-org-change-log/66/49 "2020-11-08T18:10:25Z")

</div>

## Awesome Panel Intro Sections Added

I’ve added _Intro Sections_ to almost all apps. The intro sections contains an introductory text together with links to the author, the code and maybe some additional resources like .gifs or .mp4s.

[https://awesome-panel.org/](https://awesome-panel.org/)

 ![image](https://discourse.holoviz.org/uploads/default/original/2X/1/1ea851228951ea99ce5c4ba5c06a5c17c40a3438.png)

---

<div class="post-metadata">

**Author:** ![Marc](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/marc/32/24_2.png) [@Marc](https://discourse.holoviz.org/u/Marc)\
**Post date:** [November 8, 2020, 6:12pm UTC](https://discourse.holoviz.org/t/awesome-panel-org-change-log/66/50 "2020-11-08T18:12:08Z")

</div>

#### Added Short Introductions and Links to Gallery

[https://awesome-panel.org/gallery](https://awesome-panel.org/gallery)

 ![image](https://discourse.holoviz.org/uploads/default/original/2X/0/06d990c2b3daeda7f5dbff15accacddcdafbdda4.png)

---

<div class="post-metadata">

**Author:** ![Marc](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/marc/32/24_2.png) [@Marc](https://discourse.holoviz.org/u/Marc)\
**Post date:** [November 8, 2020, 6:15pm UTC](https://discourse.holoviz.org/t/awesome-panel-org-change-log/66/51 "2020-11-08T18:15:42Z")

</div>

#### Added DataFrame, FileInput, Progress Extension and Social Buttons Apps

General clean up and new apps.

Checkout

- [https://awesome-panel.org/dataframe-formatting](https://awesome-panel.org/dataframe-formatting)
- [https://awesome-panel.org/fileinput-area](https://awesome-panel.org/fileinput-area)
- [https://awesome-panel.org/progress-extension](https://awesome-panel.org/progress-extension)
- [https://awesome-panel.org/share-on-social-buttons](https://awesome-panel.org/share-on-social-buttons)

 ![image](https://discourse.holoviz.org/uploads/default/original/2X/6/6bdcea14c3eb7637e57a3be7c4a3325e2641996c.png)

---

<div class="post-metadata">

**Author:** ![Marc](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/marc/32/24_2.png) [@Marc](https://discourse.holoviz.org/u/Marc)\
**Post date:** [November 8, 2020, 8:07pm UTC](https://discourse.holoviz.org/t/awesome-panel-org-change-log/66/52 "2020-11-08T20:07:34Z")

</div>

### Introductory Video Added

I’ve created an introductory video to [awesome-panel.org](http://awesome-panel.org).

[![](https://img.youtube.com/vi/7Fzj4Ely4AE/maxresdefault.jpg "awesome-panel.org v. 20201108") ](https://www.youtube.com/watch?v=7Fzj4Ely4AE)

It’s a first try. Just trying out the format. And feel free to SHARE THE TWEET if you like it. Thanks [Marc Skov Madsen, PhD, CFA® on X: "Checkout my introduction to https://t.co/FlF2P0RDCL and @Panel\_org . https://t.co/cbDHPeM0p1" / X](https://twitter.com/MarcSkovMadsen/status/1325522553587306496?s=20).

---

<div class="post-metadata">

**Author:** ![Marc](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/marc/32/24_2.png) [@Marc](https://discourse.holoviz.org/u/Marc)\
**Post date:** [November 20, 2020, 4:02pm UTC](https://discourse.holoviz.org/t/awesome-panel-org-change-log/66/53 "2020-11-20T16:02:48Z")

</div>

### `FastGridTemplate` app added

This is WORK IN PROGRESS. Does not work on mobile.

Try it out at [https://awesome-panel.org/fast-grid-template](https://awesome-panel.org/fast-grid-template)

My goal is to create a template that you can also use. You actually can already if you like trying out new things. Check out the code link in the app if you want to try it out.

Stay tuned for more.

fast\_grid\_template5

[/uploads/default/original/2X/a/ac2bbc9a8d7d1d80212e71b4e5e2b4510cdc6313.mp4](https://discourse.holoviz.org/uploads/default/original/2X/a/ac2bbc9a8d7d1d80212e71b4e5e2b4510cdc6313.mp4)

---

<div class="post-metadata">

**Author:** ![Marc](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/marc/32/24_2.png) [@Marc](https://discourse.holoviz.org/u/Marc)\
**Post date:** [November 21, 2020, 6:37am UTC](https://discourse.holoviz.org/t/awesome-panel-org-change-log/66/54 "2020-11-21T06:37:02Z")

</div>

### Loading Spinners App added

The Loading Spinners helps provide a nice user experience by indicating activity.

This app showcases the look and feel of the loading spinners.

- You can select the look and color of the loading spinner in the sidebar.
- If you end up with a design you would like to add in your app, then you can just copy the `style` css and `append` it to `pn.config.raw_css` in your app.

Check out [https://awesome-panel.org/loading-spinners](https://awesome-panel.org/loading-spinners)

loading-spinner

[/uploads/default/original/2X/b/b38a101214ea37fca9daf0e5629c3cb794a3bd55.mp4](https://discourse.holoviz.org/uploads/default/original/2X/b/b38a101214ea37fca9daf0e5629c3cb794a3bd55.mp4)

The functionality is currently available via the `awesome-panel-extensions` package. If you want it included in Panel please upvote [PR 1730 - Panel loading indicator](https://github.com/holoviz/panel/pull/1730).

---

<div class="post-metadata">

**Author:** ![Marc](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/marc/32/24_2.png) [@Marc](https://discourse.holoviz.org/u/Marc)\
**Post date:** [December 1, 2020, 7:38am UTC](https://discourse.holoviz.org/t/awesome-panel-org-change-log/66/55 "2020-12-01T07:38:17Z")

</div>

#### Awesome Panel is now “Fast” and comes with the Panel Component Explorer

I’ve gone through a lot of the Bokeh and Panel CSS styling and created a “Fast” style for Bokeh and Panel. There are also two templates so far FastTemplate and FastGridTemplate corresponding to the existing VanillaTemplate and ReactTemplate.

[https://fast.design](https://fast.design) is Microsofts new, open source web component and design framework. It’s very easy to change the style. So if you need a brown background, yellow accent color or very round corners on your widgets then it should be relatively easy to change. That is at least what I am aiming at.

And if you are working at Microsoft you can get your branding by replacing `fast` with `fluid` across all templates and style files.

 ![image](https://discourse.holoviz.org/uploads/default/original/2X/6/6ebc5712d10ed6f651a7d0f880226c6e2a1fdfa9.png)

One of the things that made this relatively straightforward to do was that I created the Panel Component Explorer below. Check it out at [https://awesome-panel.org/panel-component-explorer](https://awesome-panel.org/panel-component-explorer)

I added a periodic callback to update the style files every 1sek. So I could see the effects of changing the style immediately. The period callback is a super power of Panel. I should use it more 🙂

```python
app = PanelComponentExplorer()
pn.state.add_periodic_callback(app._update_css_panel, period=1000)
app.view.servable()

```

panel-component-explorer2

[/uploads/default/original/2X/a/a3e7f4be0d00b2a22158ec599c79406184fc5d9a.mp4](https://discourse.holoviz.org/uploads/default/original/2X/a/a3e7f4be0d00b2a22158ec599c79406184fc5d9a.mp4)

Next steps for me is to style the remaining Panel components, fine tune the existing styling and make it easier for all of us to use. Stay tuned.

FYI. @nghenzi, @Hoxbro, @philippjfr, @xavArtley, @Jhsmit, @Leonidas, @jbednar, @Material-Scientist

---

<div class="post-metadata">

**Author:** ![Material-Scientist](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/material-scientist/32/503_2.png) [@Material-Scientist](https://discourse.holoviz.org/u/Material-Scientist)\
**Post date:** [December 1, 2020, 8:52am UTC](https://discourse.holoviz.org/t/awesome-panel-org-change-log/66/56 "2020-12-01T08:52:49Z")

</div>

Looks very nice, great work @Marc!

---

<div class="post-metadata">

**Author:** ![Marc](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/marc/32/24_2.png) [@Marc](https://discourse.holoviz.org/u/Marc)\
**Post date:** [December 12, 2020, 6:39pm UTC](https://discourse.holoviz.org/t/awesome-panel-org-change-log/66/57 "2020-12-12T18:39:40Z")

</div>

#### Google Map Viewer Added

I’ve added the Google Map Viewer showcased by @ahuang11

[https://awesome-panel.org/google-map-viewer](https://awesome-panel.org/google-map-viewer)

google\_map\_viewer

[/uploads/default/original/2X/e/eefb31567bce23f4881d3bb93803a52e5df4fe96.mp4](https://discourse.holoviz.org/uploads/default/original/2X/e/eefb31567bce23f4881d3bb93803a52e5df4fe96.mp4)

Feel free to like or retweet [https://twitter.com/MarcSkovMadsen/status/1337642579979087872?s=20](https://twitter.com/MarcSkovMadsen/status/1337642579979087872?s=20)

---

<div class="post-metadata">

**Author:** ![Marc](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/marc/32/24_2.png) [@Marc](https://discourse.holoviz.org/u/Marc)\
**Post date:** [December 12, 2020, 6:41pm UTC](https://discourse.holoviz.org/t/awesome-panel-org-change-log/66/58 "2020-12-12T18:41:33Z")

</div>

#### NGLViewer Added

I’ve added @Jhsmit’s NGLViewer widget and example

[https://awesome-panel.org/ngl-molecule-viewer](https://awesome-panel.org/ngl-molecule-viewer)

ngl-molecule-viewer

[/uploads/default/original/2X/b/b06141eaec1cfe1bf29ee0737ee71ff8c6b0464c.mp4](https://discourse.holoviz.org/uploads/default/original/2X/b/b06141eaec1cfe1bf29ee0737ee71ff8c6b0464c.mp4)

Feel free to like or retweet [https://twitter.com/MarcSkovMadsen/status/1337810449140768776?s=20](https://twitter.com/MarcSkovMadsen/status/1337810449140768776?s=20)

---

<div class="post-metadata">

**Author:** ![Marc](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/marc/32/24_2.png) [@Marc](https://discourse.holoviz.org/u/Marc)\
**Post date:** [December 13, 2020, 7:08pm UTC](https://discourse.holoviz.org/t/awesome-panel-org-change-log/66/59 "2020-12-13T19:08:41Z")

</div>

### Added HoloViews Linked Brushing Example

Check it out at [https://awesome-panel.org/holoviews-linked-brushing](https://awesome-panel.org/holoviews-linked-brushing).

holoviews-linked-brushing

[/uploads/default/original/2X/a/a242612f468b7a4c328224bcf47f3e5a3d9953aa.mp4](https://discourse.holoviz.org/uploads/default/original/2X/a/a242612f468b7a4c328224bcf47f3e5a3d9953aa.mp4)

---

<div class="post-metadata">

**Author:** ![Marc](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/marc/32/24_2.png) [@Marc](https://discourse.holoviz.org/u/Marc)\
**Post date:** [December 19, 2020, 12:07pm UTC](https://discourse.holoviz.org/t/awesome-panel-org-change-log/66/60 "2020-12-19T12:07:51Z")

</div>

#### Full Screen Functionality Added

[awesome-panel.org](http://awesome-panel.org) now supports Full Screen functionality. I’ve wanted this for so long.

Full Screen gives the developer the possibility to provide an overview of the functionality/ plots/ viz and let the user zoom in when needed.

max\_panel

[/uploads/default/original/2X/7/7ed3915769c22cc38e7238c60d3a188dab1430fb.mp4](https://discourse.holoviz.org/uploads/default/original/2X/7/7ed3915769c22cc38e7238c60d3a188dab1430fb.mp4)

The Full Screen functionality is embedded in the `FastTemplate` and `FastGridTemplate`.

You can also try out the `FastTemplate` and `FastGridTemplate`. They work like the `VanillaTemplate` and `ReactTemplate` respectively.

```bash
pip install awesome-panel-extensions

```

```python
from awesome_panel_extensions.frameworks.fast.templates import FastTemplate, FastGridTemplate

```

Thanks to @nghenzi who showed it was possible to create awesome Templates with Panel.

---

<div class="post-metadata">

**Author:** ![Jhsmit](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/jhsmit/32/151_2.png) [@Jhsmit](https://discourse.holoviz.org/u/Jhsmit)\
**Post date:** [December 19, 2020, 2:28pm UTC](https://discourse.holoviz.org/t/awesome-panel-org-change-log/66/61 "2020-12-19T14:28:12Z")

</div>

Awesome! I’ve also been wanting that for my protein visualization.  
I think i’ll be switching to fast as some point.

Can you do something like a plot like the Echarts plot where you have some user inputs, but have a button (in the header?) to show/hide this? Or make it pop up somewhere else?  
I have some use cases where I have users need to sometimes interact with the graph directly (rather than the sidebar) but I dont want it to take up space all the time.

[Previous page](https://discourse.holoviz.org/t/awesome-panel-org-change-log/66.md?page=2)

[Next page](https://discourse.holoviz.org/t/awesome-panel-org-change-log/66.md?page=4)