A few questions on Multi-Page App

Panel
1

Hi,

I am looking to use Panel to prototype a web portal. Think of it as exposing a multi-sheet Excel model as a web app. I tried using Streamlit and ran into layout and performance issues. I came across an article by @Marc and have been exploring Panel this week. But now I’m more at a time crunch if I want to switch framework. I would like to build a layout like the main Panel site with a similar top menu. I would like to code each menu item to call a separate .py file. Here are my questions. (Please excuse me if some answers are obvious since I’m new to Panel)

  • What widget should I use for the top menu?
  • What is the recommended layout or Template I should be using?
  • What is the difference between FastGridTemplate and using GridSpec?
  • Is there a good reference or sample for working with multiple pages?
  • How to invoke new pages? How to share variable states?
  • With the panel serve command, it seems on Windows, I need to specify all the pages rather than using the *.py convention. I tried using Powershell and it didn’t seem to work. Is there a better solution to serve multiple pages on Windows 10?
  • I plan to deploy the app to Google Cloud Run or Google App Engine. Is that doable?
  • Is there any recommendation for a sample app that I should study to help me get started?

Just evaluating if Panel is the right framework to use at this stage. It seems to be a lot more flexible and more controllable than Streamlit. But I do find it somewhat difficult to get started. I would like to recommend more basic tutorials or simple standalone samples to help newbies like me start up more quickly. Any insight, discussion, or advice is welcome.

Thanks much,
AndyW

1 Like
2

Andy,
I’ve not tried a multi page app yet so i dont have any great answers. I have made use of the Tabs widget though, you can set the tabswidget.active parameter from a callback to change tabs. That sidesteps the issue of sharing data between different pages, but not sure if it would work for you.

I think that the top menu you refer to is the header section of a template. And i think you could do a Row of Markdown with links in the markdown. Not sure if thats the right way tho.

It seems like the templates are pretty interchangeable, so if you get one working you can swap between them to find one you like. I’ve been using the FastListTemplate.

Sharing variables between pages might be possible with the pn.state.cache, tho im not sure how that would work with different pages. Overview — Panel v0.13.1

There are a lot of good examples on @Marc’s website, certainly check that out if you haven’t yet.

I’m certainly no pro at panel, so i’m not sure how valuable these suggestions are.

2 Likes
3

Hi @andyGxd

Welcome to the community.

Generally as a beginner in Panel I would start by getting the functionality and content in place. It is much easier with some experience and the content in place to take a step back and design+architect your application.

Template

As a “beginner” in Panel I would pick a prebuilt template. And the Fast templates are the most mature ones, so I would go with one of those, for example FastListTemplate

If you have special requirements and/ or you have experience with html, css and maybe a bit of javascript, you can build your own custom template. Custom Template. You can get professional looking results with that. For example this is a Panel application using a custom template with a “Big Menu” built into the template.

Widget for top menu

Again if you are a beginner I would use something built into Panel like the MenuButton.

But if you are using the FastTemplates you can also add a html based menu to the sidebar as I do at awesome-panel.org awesome-panel/awesome_panel/config at a7132ee906f5047e03403e3836e9c0371bcbe9b2 · MarcSkovMadsen/awesome-panel · GitHubinit.py#L104

You might also be able to find a good menu component or example somewhere and then integrate it with Panel using ReactiveHTML.

Difference between FastGridTemplate and using GridSpec?

The layout of the FastGridTemplate is static once it has been rendered initially. You cannot change it later. Then it also adds a “maximize” button to each item in the grid and some fast styling. It also saves the users layout when ever its changed and stores it in the browsers local storage. So it has lots of functionality but is static.

The GridSpec is dynamic and can be changed based on user interaction. For example you can have a user use a slider to determine the number of columns or rows dynamically in the GridSpec.

Reference for multipage apps

My site https://awesome-panel.org is a Panel multipage app. It might add a bit more complexity than you want because I want each app to automatically add a top card with information about the app.

awesome-panel

Share variable state

You can share variable state across users/ session using pn.state.cache. Its a simple dictionary you can use.

Personally I use DiskCache a lot to persist dataframes etc either for ever or for some time to live.

A very powerful way to save the state of a single users session is to use pn.state.location. With that you can sync widgets to url parameters. Its so nice to be able to bookmark an app with a specific state and even send a link for colleagues to check out the exact view. There is an example here Sync Location

panel serve *.py

Try adding --glob. That should make it expand the glob *.py.

image

Deployment

You can deploy Panel in the same places as Bokeh and Streamlit can be deployed. They all use web sockets. Most deployment options support that, but sometimes you will have to turn it on.

Here is a great blog post by @sophiamyang about deployment to Google App Engine.

Deploy a Python Visualization Panel App to Google Cloud App Engine | by Sophia Yang.

Sample app to study

Its a great question. You might be able to find some in the awesome-list. But you might also be able to find some by browsing the twitter feed of Panel.

But I see this request once in a while and maybe it was something for Panel to provide one day @philippjfr ?

The best advice I can give is to try it out. When you run into issues then break your questions into minimum, reproducible code examples and ask here in Discourse. I’m sure some one will help.

1 Like
4

Very very helpful responses from @Marc in addressing all my questions. I’m currently using FastListTemplate and most likely will keep it simple and swap out panels instead of using multiple pages. Probably use multiple pages for separate “apps” cases like in awesome-panel. Will use MenuButtons as menus for now. Plan to test Google App Engine deployment later in the week.

Thanks again.

1 Like
5

Hi @Marc
I am semi-new to Panel. I am hoping to build a custom template more simple than your example but same level of professional looking. I have two initial questions:

  1. Would you be willing to share the code for that template? Having a reference is always easier to understand for me.
  2. Or would it be easier to just customize the “Galley” page when you pn.serve multiple functions?

For example, for the Community Gallery on the Awesome Panel page, you customized the top part, getting rid of the link to Panel’s website and editing the text shown:

image
image1906×817 188 KB

Is it also a simple task to change the odd holographic map background default to a custom image with a company logo?

2 Likes