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

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

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

以下是代码部分:

import panel as pn

pn.extension(sizing_mode="stretch_width")

pages = {
    "Page 1": pn.Column("# Page 1", "...bla bla bla"),
    "Page 2": pn.Column("# Page 2", "...more bla"),
}

def show(page):
    return pages[page]

starting_page = pn.state.session_args.get("page", [b"Page 1"])[0].decode()
page = pn.widgets.RadioButtonGroup(
    value=starting_page,
    options=list(pages.keys()),
    name="Page",
    sizing_mode="fixed",
    button_type="success",
)
ishow = pn.bind(show, page=page)
pn.state.location.sync(page, {"value": "page"})

ACCENT_COLOR = "#0072B5"
DEFAULT_PARAMS = {
    "site": "Panel Multi Page App",
    "accent_base_color": ACCENT_COLOR,
    "header_background": ACCENT_COLOR,
}
pn.template.FastListTemplate(
    title="As Single Page App",
    sidebar=[page],
    main=[ishow],
    **DEFAULT_PARAMS,
).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:

import panel as pn

pn.extension(sizing_mode="stretch_width")

pages = {
    "Page 1": pn.Column("# Page 1", "...bla bla bla"),
    "Page 2": pn.Column("# Page 2", "...more bla"),
}


def show(page):
    return pages[page]


starting_page = pn.state.session_args.get("page", [b"Page 1"])[0].decode()
page = pn.widgets.RadioButtonGroup(
    value=starting_page,
    options=list(pages.keys()),
    name="Page",
    sizing_mode="fixed",
    button_type="success",
)
ishow = pn.bind(show, page=page)
pn.state.location.sync(page, {"value": "page"})

ACCENT_COLOR = "#0072B5"
DEFAULT_PARAMS = {
    "site": "Panel Multi Page App",
    "accent_base_color": ACCENT_COLOR,
    "header_background": ACCENT_COLOR,
}
pn.template.FastListTemplate(
    title="As Single Page App",
    sidebar=[page],
    main=[ishow],
    **DEFAULT_PARAMS,
).servable()
```import panel as pn

pn.extension(sizing_mode="stretch_width")

pages = {
    "Page 1": pn.Column("# Page 1", "...bla bla bla"),
    "Page 2": pn.Column("# Page 2", "...more bla"),
}


def show(page):
    return pages[page]


starting_page = pn.state.session_args.get("page", [b"Page 1"])[0].decode()
page = pn.widgets.RadioButtonGroup(
    value=starting_page,
    options=list(pages.keys()),
    name="Page",
    sizing_mode="fixed",
    button_type="success",
)
ishow = pn.bind(show, page=page)
pn.state.location.sync(page, {"value": "page"})

ACCENT_COLOR = "#0072B5"
DEFAULT_PARAMS = {
    "site": "Panel Multi Page App",
    "accent_base_color": ACCENT_COLOR,
    "header_background": ACCENT_COLOR,
}
pn.template.FastListTemplate(
    title="As Single Page App",
    sidebar=[page],
    main=[ishow],
    **DEFAULT_PARAMS,
).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 版本中正常工作:

import panel as pn
from panel.template import FastListTemplate

pn.extension()

# 将页面定义为类
class Page1:
    def __init__(self):
        self.content = pn.Column("# 页面 1", "这是页面 1 的内容。")

    def view(self):
        return self.content


class Page2:
    def __init__(self):
        self.content = pn.Column("# 页面 2", "这是页面 2 的内容。")

    def view(self):
        return self.content

# 实例化页面并将它们添加到页面字典中
pages = {
    "页面 1": Page1(),
    "页面 2": Page2(),
}

# 用于显示所选页面的函数
def show_page(page_instance):
    main_area.clear()
    main_area.append(page_instance.view())

# 定义用于在页面之间导航的按钮
page1_button = pn.widgets.Button(name="页面 1", button_type="primary")
page2_button = pn.widgets.Button(name="页面 2", button_type="primary")

# 设置按钮单击回调
page1_button.on_click(lambda event: show_page(pages["页面 1"]))
page2_button.on_click(lambda event: show_page(pages["页面 2"]))

# 创建侧边栏
sidebar = pn.Column(page1_button, page2_button)

# 创建主区域并显示第一个页面
main_area = pn.Column(pages["页面 1"].view())

# 创建 Material 模板并设置侧边栏和主区域
template = FastListTemplate(
    title="多页面应用",
    sidebar=[sidebar],
    main=[main_area],
)

# 提供 Panel 应用程序
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:

import panel as pn
from panel.template import FastListTemplate

pn.extension()

# Define pages as classes
class Page1:
    def __init__(self):
        self.content = pn.Column("# Page 1", "This is the content of page 1.")

    def view(self):
        return self.content


class Page2:
    def __init__(self):
        self.content = pn.Column("# Page 2", "This is the content of page 2.")

    def view(self):
        return self.content

# Instantiate pages and add them to the pages dictionary
pages = {
    "Page 1": Page1(),
    "Page 2": Page2(),
}

# Function to show the selected page
def show_page(page_instance):
    main_area.clear()
    main_area.append(page_instance.view())

# Define buttons to navigate between pages
page1_button = pn.widgets.Button(name="Page 1", button_type="primary")
page2_button = pn.widgets.Button(name="Page 2", button_type="primary")

# Set up button click callbacks
page1_button.on_click(lambda event: show_page(pages["Page 1"]))
page2_button.on_click(lambda event: show_page(pages["Page 2"]))

# Create the sidebar
sidebar = pn.Column(page1_button, page2_button)

# Create the main area and display the first page
main_area = pn.Column(pages["Page 1"].view())

# Create the Material Template and set the sidebar and main area
template = FastListTemplate(
    title="Multi-Page App",
    sidebar=[sidebar],
    main=[main_area],
)

# Serve the Panel app
template.servable()

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

发表评论

匿名网友

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

确定