PanelFrontend and Panel Web UI Intermediate docs

[MarcSkovMadsen]

This PR contributes a PanelFrontend and intermediate documentation as discussed in #13335.

app_pull_state.py

app_pull_state.mp4

[MarcSkovMadsen]

With the commit just added I believe I understand the basic principles of a creating a PanelFrontend.

Then I just need to convert it to an Api that you @tchaton and others can accept. Panel is different from Streamlit in many ways. It is a reactive framework that does not need to re-run the entire script and update the entire page when the app state changes. So for Panel developers it much more natural to subscribe to an app_state.param.changed event via panel.bind or @panel.depends methods. Instead of triggering an entire rerun of the app.

I don't think all apps will depend on the app state. Sometimes you just want to make some tool to visualize some data associated with the app. Thus there is no reason to always start a web socket connection to the app state.

Furthermore one of Panels strength is that you can also develop your apps in both .py and ipynb files. So I would like to support that as as a render_fn.

panel-lightning-principle-works.mp4

Furtheremore there is an issue with the existing web socket loop for the StreamlitPlugin. Each iteration of the loop takes minimum 1 second. So if the app state changes more frequently the loop will get behind and trigger updates of the Streamlit app long after the app state changed. I've used the same implementation for Panel in the latest commit and you can see that in the video.

[MarcSkovMadsen]

Now I have the app code working as I would like to and supporting basic+intermediate examples similar to the Streamlit doc examples.

I would still like to add support for serving .py and .ipynb files in addition to the render_fn callable.
I would like to implement the bigger example from @tchaton running scripts from github
I need to refactor the code, put it in the right places and add some tests.
I need to add basic and intermediate documentation.

general-principle-working.mp4

Instead of providing an AppState to the render_fn an AppStateWatcher will be provided and used like below.

def your_panel_app(app: AppStateWatcher):
    
    submit_button = pn.widgets.Button(name="submit")
    
    @pn.depends(submit_button, watch=True)
    def submit(_):
        app.state.count += 1        

    @pn.depends(app.param.state)
    def current_count(_):
        return f'current count: {app.state.count}'

    return pn.Column(
        submit_button,
        current_count,
    )

[Borda]

FYI, I have tried to add the missing package to mocked list but seems it did not help...

[MarcSkovMadsen]

If you look at the failing docs build you will see that neither Param, Panel or Streamlit is being installed.

Investigating a bit you will see the difference between the Panel and Streamlit implementation is that Panel needs to AppStateWatcher and this is exposed in the file src/lightning_app/frontend/panel/__init__.py. The AppStateWatcher depends on Param.

I see two fixes. 1) Figure out how to get param installed during the build pipeline (docs.txt ? ) or 2) somehow change the code/ api to not trigger an import of AppStateWatcher.

You probably need to be a bit careful here. Because if the docs fails because Param is not installed, I think there is a risk of the lightning package not working if param is not installed.

I think the best solution is not something I can decide. Let me know if there is something I can do.

[awaelchli]

In the docs build we have some import statements that run. This means if there is an import path that goes all the way to the app state watcher, it will try to import param, which does not get installed for the docs build, and it doesn't have to be. So I changed the code so that you can import the file/class regardless of whether param is installed. This should fix the problem.

[tchaton]

Hey @MarcSkovMadsen, congrats on your first contribution!

[MarcSkovMadsen]

Juhuuh. We made it ⚡ 🥂 . Thanks for the help.

[MarcSkovMadsen]

Hi @tchaton

Is there a way to install easily install a release candidate of the package? Or can I just pip install the github url?

I have a friend that might want to write a blog post about Panel+Lightning. And it would help her a lot if the package with the Panel frontend could be easily installed already now.

[krshrimali]

Hi @tchaton

Is there a way to install easily install a release candidate of the package? Or can I just pip install the github url?

I have a friend that might want to write a blog post about Panel+Lightning. And it would help her a lot if the package with the Panel frontend could be easily installed already now.

Hi, @MarcSkovMadsen - @tchaton or @Borda will be able to shed more light on this, but from what I'm aware of:

• Once there is a release with the (amazing) feature you added in this PR, you will be able to normally install lightning, and it should serve the purpose for you.
• Before that, you can definitely try out the package by using the GitHub URL in the pip install. Something like: pip install git+https://github.com/Lightning-AI/lightning.git@master, should work if you are targeting the master branch. :)

Again, thank you for your contribution ⚡ 🚀 ! Looking forward to the blog post on Panel + Lightning. 🔥