Python Panel 仪表板 – 多页面应用程序未按预期更新。

huangapple
go评论99阅读模式
英文:

Python Panel Dashboard - Multi-Page app not updating as expected

问题

I want a Python Panel app which shows different page content based on a radio button selection in the sidebar.

There's some example code for doing exactly this in the way I want, shown as "Option 3" here:
https://discourse.holoviz.org/t/multi-page-app-documentation/3108/3?u=maxpower

以下是代码部分：

  1. import panel as pn
  3. pn.extension(sizing_mode="stretch_width")
  5. pages = {
  6.     "Page 1": pn.Column("# Page 1", "...bla bla bla"),
  7.     "Page 2": pn.Column("# Page 2", "...more bla"),
  8. }
  10. def show(page):
  11.     return pages[page]
  13. starting_page = pn.state.session_args.get("page", [b"Page 1"])[0].decode()
  14. page = pn.widgets.RadioButtonGroup(
  15.     value=starting_page,
  16.     options=list(pages.keys()),
  17.     name="Page",
  18.     sizing_mode="fixed",
  19.     button_type="success",
  20. )
  21. ishow = pn.bind(show, page=page)
  22. pn.state.location.sync(page, {"value": "page"})
  24. ACCENT_COLOR = "#0072B5"
  25. DEFAULT_PARAMS = {
  26.     "site": "Panel Multi Page App",
  27.     "accent_base_color": ACCENT_COLOR,
  28.     "header_background": ACCENT_COLOR,
  29. }
  30. pn.template.FastListTemplate(
  31.     title="As Single Page App",
  32.     sidebar=[page],
  33.     main=[ishow],
  34.     **DEFAULT_PARAMS,
  35. ).servable()

然而，它似乎并没有按预期工作，至少在 panel v1.0.0rc6 上不是这样。当我点击 "Page 2"，然后点击返回到 "Page 1" 时，主内容并没有如预期地切换回来。奇怪的是，URL 在 "Page+1" 和 "Page+2" 之间按预期切换，但主内容本身没有。

我一直在尝试使用 panel serve app.py --autoreload 进行调试，这是一个不错的工作流程，但我仍然没有能够弄清楚为什么它不起作用，或者如何找到一个使其工作的好解决方案。

英文:

I want a Python Panel app which shows different page content based on a radio button selection in the sidebar.

There's some example code for doing exactly this in the way I want, shown as "Option 3" here:
https://discourse.holoviz.org/t/multi-page-app-documentation/3108/3?u=maxpower

Code below:

  1. import panel as pn
  3. pn.extension(sizing_mode="stretch_width")
  5. pages = {
  6.     "Page 1": pn.Column("# Page 1", "...bla bla bla"),
  7.     "Page 2": pn.Column("# Page 2", "...more bla"),
  8. }
  11. def show(page):
  12.     return pages[page]
  15. starting_page = pn.state.session_args.get("page", [b"Page 1"])[0].decode()
  16. page = pn.widgets.RadioButtonGroup(
  17.     value=starting_page,
  18.     options=list(pages.keys()),
  19.     name="Page",
  20.     sizing_mode="fixed",
  21.     button_type="success",
  22. )
  23. ishow = pn.bind(show, page=page)
  24. pn.state.location.sync(page, {"value": "page"})
  26. ACCENT_COLOR = "#0072B5"
  27. DEFAULT_PARAMS = {
  28.     "site": "Panel Multi Page App",
  29.     "accent_base_color": ACCENT_COLOR,
  30.     "header_background": ACCENT_COLOR,
  31. }
  32. pn.template.FastListTemplate(
  33.     title="As Single Page App",
  34.     sidebar=[page],
  35.     main=[ishow],
  36.     **DEFAULT_PARAMS,
  37. ).servable()
  38. ```import panel as pn
  40. pn.extension(sizing_mode="stretch_width")
  42. pages = {
  43.     "Page 1": pn.Column("# Page 1", "...bla bla bla"),
  44.     "Page 2": pn.Column("# Page 2", "...more bla"),
  45. }
  48. def show(page):
  49.     return pages[page]
  52. starting_page = pn.state.session_args.get("page", [b"Page 1"])[0].decode()
  53. page = pn.widgets.RadioButtonGroup(
  54.     value=starting_page,
  55.     options=list(pages.keys()),
  56.     name="Page",
  57.     sizing_mode="fixed",
  58.     button_type="success",
  59. )
  60. ishow = pn.bind(show, page=page)
  61. pn.state.location.sync(page, {"value": "page"})
  63. ACCENT_COLOR = "#0072B5"
  64. DEFAULT_PARAMS = {
  65.     "site": "Panel Multi Page App",
  66.     "accent_base_color": ACCENT_COLOR,
  67.     "header_background": ACCENT_COLOR,
  68. }
  69. pn.template.FastListTemplate(
  70.     title="As Single Page App",
  71.     sidebar=[page],
  72.     main=[ishow],
  73.     **DEFAULT_PARAMS,
  74. ).servable()

However, it does not quite work as expected, at least not on panel v1.0.0rc6. When I click "Page 2" and then click back to "Page 1", the main content does not switch back as expected. Weirdly, the URL does switch between ...=Page+1 and ...=Page+2 as expected, but not the main content itself.

I've been trying to debug this using panel serve app.py --autoreload, which is a nice workflow, but I still haven't been able to figure out why this isn't working, or a good solution to get it working.

答案1

得分: 1

以下是您提供的内容的中文翻译：

答案位于此处，正是我所寻找的，并且我已经确认在 Panel 的 v1.0.0rc6 版本中正常工作：

  1. import panel as pn
  2. from panel.template import FastListTemplate
  4. pn.extension()
  6. # 将页面定义为类
  7. class Page1:
  8.     def __init__(self):
  9.         self.content = pn.Column("# 页面 1", "这是页面 1 的内容。")
  11.     def view(self):
  12.         return self.content
  15. class Page2:
  16.     def __init__(self):
  17.         self.content = pn.Column("# 页面 2", "这是页面 2 的内容。")
  19.     def view(self):
  20.         return self.content
  22. # 实例化页面并将它们添加到页面字典中
  23. pages = {
  24.     "页面 1": Page1(),
  25.     "页面 2": Page2(),
  26. }
  28. # 用于显示所选页面的函数
  29. def show_page(page_instance):
  30.     main_area.clear()
  31.     main_area.append(page_instance.view())
  33. # 定义用于在页面之间导航的按钮
  34. page1_button = pn.widgets.Button(name="页面 1", button_type="primary")
  35. page2_button = pn.widgets.Button(name="页面 2", button_type="primary")
  37. # 设置按钮单击回调
  38. page1_button.on_click(lambda event: show_page(pages["页面 1"]))
  39. page2_button.on_click(lambda event: show_page(pages["页面 2"]))
  41. # 创建侧边栏
  42. sidebar = pn.Column(page1_button, page2_button)
  44. # 创建主区域并显示第一个页面
  45. main_area = pn.Column(pages["页面 1"].view())
  47. # 创建 Material 模板并设置侧边栏和主区域
  48. template = FastListTemplate(
  49.     title="多页面应用",
  50.     sidebar=[sidebar],
  51.     main=[main_area],
  52. )
  54. # 提供 Panel 应用程序
  55. template.servable()

请注意，我已经将代码中的 HTML 标记翻译为适当的中文。

英文:

The answer given here is exactly what I was looking for, and I've confirmed works as expected in Panel's v1.0.0rc6:

  1. import panel as pn
  2. from panel.template import FastListTemplate
  4. pn.extension()
  6. # Define pages as classes
  7. class Page1:
  8.     def __init__(self):
  9.         self.content = pn.Column("# Page 1", "This is the content of page 1.")
  11.     def view(self):
  12.         return self.content
  15. class Page2:
  16.     def __init__(self):
  17.         self.content = pn.Column("# Page 2", "This is the content of page 2.")
  19.     def view(self):
  20.         return self.content
  22. # Instantiate pages and add them to the pages dictionary
  23. pages = {
  24.     "Page 1": Page1(),
  25.     "Page 2": Page2(),
  26. }
  28. # Function to show the selected page
  29. def show_page(page_instance):
  30.     main_area.clear()
  31.     main_area.append(page_instance.view())
  33. # Define buttons to navigate between pages
  34. page1_button = pn.widgets.Button(name="Page 1", button_type="primary")
  35. page2_button = pn.widgets.Button(name="Page 2", button_type="primary")
  37. # Set up button click callbacks
  38. page1_button.on_click(lambda event: show_page(pages["Page 1"]))
  39. page2_button.on_click(lambda event: show_page(pages["Page 2"]))
  41. # Create the sidebar
  42. sidebar = pn.Column(page1_button, page2_button)
  44. # Create the main area and display the first page
  45. main_area = pn.Column(pages["Page 1"].view())
  47. # Create the Material Template and set the sidebar and main area
  48. template = FastListTemplate(
  49.     title="Multi-Page App",
  50.     sidebar=[sidebar],
  51.     main=[main_area],
  52. )
  54. # Serve the Panel app
  55. template.servable()

huangapple
  • 本文由 发表于 2023年5月11日 04:37:11
  • 转载请务必保留本文链接：https://go.coder-hub.com/76222383.html
  • dashboard
  • holoviz
  • holoviz-panel
  • python
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定