Real Time Plot in Multipage Panel App

Panel
,
1

A quick and simple question. Well…not sure it’s simple. I have a single page Panel app which contains widgets to navigate between 2 pages, just like the Option 3 of multipage apps created by @Marc:

Multi page app documentation - #3 by Marc.

One of the pages is a real time Bokeh plot of stock prices. Another page is just a blank page. Here’s the problem: the real time plot does not automatically adjust its view to show the most recent data when navigating back and forth between the pages.

On the plot page, the plot was updating fine:
real-time_plot-ezgif.com-crop (1)

After navigating to the blank page and back to the plot page, though the plotting never stopped, the plot’s view got stuck in the moment when I left the page, and I had to zoom out and pan the plot to be able to see the most recent data being plotted:

image
image1920×922 93.9 KB

Any solutions to this? Appreciate your help.

Panel bokeh

2

Yonghow,

Without a MRE it’s hard to test your specific issue.

I’ve asked a question on streaming recently, so it was pretty easy to update my MRE to work with the Multi page app documentation #3 example.

To run this MRE follow the steps in my question and use this version of app.py

import pandas as pd
import panel as pn
import hvplot.pandas
import holoviews as hv
from holoviews.streams import Buffer
from asyncio import sleep


pn.extension()

data = pn.state.cache["data"]

dfstream = Buffer(pd.DataFrame(data, index=[pd.Timestamp.now()]), length=100, index=False)


def plot(data, window_seconds, alpha):
    data = data.rolling(f"{window_seconds}s").mean()
    return data.hvplot(y="y", ylim=(-1, 1), alpha=alpha, color="blue", line_width=5)


window_seconds = pn.widgets.IntSlider(value=5, start=1, end=10, name="Window (secs)")
alpha = pn.widgets.FloatSlider(value=1, start=0, end=1, name="Alpha")
iplot = hv.DynamicMap(
    plot,
    streams={
        "data": dfstream.param.data,
        "window_seconds": window_seconds.param.value,
        "alpha": alpha.param.value,
    },
)

pages = {
    "Page 1": pn.Column(iplot, window_seconds, alpha),
    "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()


async def run():
    while True:
        await sleep(0.1)
        data = pn.state.cache["data"]
        dfstream.send(pd.DataFrame(data, index=[pd.Timestamp.now()]))


pn.state.onload(run)

I haven’t found any issues while navigating between the pages and the streaming plot keeps updating in the background.

I hope this helps.