Home page for Panel apps

Panel
1

Hi all,
We have adopted Panel in our team for building our dashboards which are growing in numbers.
Now, we need a home page that lists all our apps for the user to pick from.
Looking at Awesome Panel home page, I see that a home page like that would perfectly do the job for us. How can I turn the awesome-panel home page to a template for our website? What are the essentials for this website?

1 Like
2

Hi @Mana

Author of awesome-panel here. Awesome Panel is created using Quarto. See the awesome-panel repository awesome-panel/awesome-panel. A simpler version is probably the HoloViz Blog. See holoviz-dev/blog.

The options you have for creating a Gallery landing page is

  • Use the built in index page that shows when you panel serve multiple files
    • Add a thumbnails gallery of .png files with names corresponding to the pages, for example page1.png and `page2.png.
  • Create a landing page using Panel. Its not that hard. It could include a search input and the something that generates a nice looking card for each application. I have something like that here panel-sharing/src/panel_sharing/components/project_gallery.py at main · awesome-panel/panel-sharing · GitHub
  • Generate a html index page. For example via jinja templating and then panel serve ... --index our_index_page.html
  • Use a static site generator like Quarto.
1 Like
3

Hi Marc

I am running a Quarto website www.itkservices3.com which accesses a Panel app which runs on a different box and is accessed via an iframe. It works well enough and as a financial analyst I’m proud of it.

However I have been wondering how to more closely integrate Panel and Quarto. Does Awesome Panel run the Python cells within Quarto, including the Panel components and then display them in a specified window? I get how the code can run under Quarto, just not how it displays in a specified window.

It’s a great site. Panel is great, Quarto is great. I have had the most fun doing this of anything recently.

4

The HoloViz blog runs on Quarto; might be good to reference it

1 Like
5

Thanks I will look at the code. I learned of Quarto via the blog post that referenced the rebuild. Best thing I read in the past 12 months.

6

Hi @Marc ,

Thanks a lot for useful tips.

I was able to build a gallery using the project_gallery.py as template. :tada:

The page now is showing a card for each application in the list. There’s a small problem though that I believe is Panel related.

The cards can display the images that are referred through an Internet URL perfectly, e.g. https://blog.siggraph.org/wp-content/uploads/2019/07/Art-of-Comm.png. But when I pass a local path, e.g. assets/images/app.png, the image doesn’t show. In the logs, I see that it’s looking for /assets/images/app.png which has an extra / at the beginning. Following the code, I see that the correct paths are getting passed to pn.template.FastListTemplate, in other words, the container.object includes correct paths. That’s why I believe that something is happening in FastListTemplate.

  1. I’m not sure whether my desired scenario has been implemented in another occasion. Would you mind to share the resources with me, if there’s any?
  2. If I’m right, is there any work around it so that I can still show the images from local gallery in app cards?

I appreciate any tip.

7

Are you using absolute paths and is this within a container, Mr. @Mana ?

8

awesome-panel also uses iframes.

But you can integrate Panel and HoloViz in general as illustrated at holoviz-quarto (awesome-panel.github.io). (Just experiments for now).

9

No. I’m using relative path, but somewhere a / is added to beginning of my path turning it to absolute path which is not correct.

10

Adding some update here.

I was able to pass the full path to the template, through os.path.dirname(__file__), but the problem persisted.

The workaround is to serve the directories of static files through
panel serve my_app.py --static-dirs assets=./assets/ images=./assets/images,
and use assets/favicon.png or images/my_image.jpeg in your code to refer to your static files.

1 Like
11

I will be following along here. It will be a big decision to use pyodide instead of running the Bokeh/Tornado server and embedding it.