search

holoviz / panel

Panel: The powerful data exploration & web app framework for Python
https://panel.holoviz.org
BSD 3-Clause "New" or "Revised" License
4.58k stars 499 forks source link

PyScript reference example no longer working #6995

Closed MarcSkovMadsen closed 1 month ago

MarcSkovMadsen commented 1 month ago

Does not work with historical versions of Pyscript because they no longer exist

If I try the PyScript reference example at https://panel.holoviz.org/how_to/wasm/standalone.html#pyscript, It no longer works because the pyscript .js and .css files no longer exist.

image

For example https://pyscript.net/releases/2024.2.1/pyscript.js no longer exists.

Might be related to https://github.com/holoviz/panel/issues/6991 and https://github.com/pyscript/pyscript/issues/2118

MarcSkovMadsen commented 1 month ago

Does not work with latest versions of Pyscript

If I try to use the latest versions from https://docs.pyscript.net/2024.7.1/beginning-pyscript/ nothing is shown.

image

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-3.4.1.js"></script>
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-3.4.1.min.js"></script>
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-3.4.1.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@holoviz/panel@1.4.4/dist/panel.min.js"></script>

    <link rel="stylesheet" href="https://pyscript.net/releases/2024.7.1/core.css">  
    <script type="module" src="https://pyscript.net/releases/2024.7.1/core.js"></script>
  </head>
  <body>
    <py-config>
       packages = [
          "https://cdn.holoviz.org/panel/1.4.4/dist/wheels/bokeh-3.4.1-py3-none-any.whl",
          "https://cdn.holoviz.org/panel/1.4.4/dist/wheels/panel-1.4.4-py3-none-any.whl"
       ]
    </py-config>
    <div id="simple_app"></div>
    <py-script>
      import panel as pn

      pn.extension(sizing_mode="stretch_width")

      slider = pn.widgets.FloatSlider(start=0, end=10, name='Amplitude')

      def callback(new):
         return f'Amplitude is: {new}'

      pn.Row(slider, pn.bind(callback, slider)).servable(target='simple_app');
    </py-script>
  </body>
</html>
WebReflection commented 1 month ago

I have a dejavu ... are you using also latest bokeh JS version or that part is the old one so that code in Python can't communicate with it? 🤔 'cause we already had that issue and also solved it in our examples https://pyscript.com/@examples/simple-panel/latest

WebReflection commented 1 month ago

to clarify, the issue with our examples was the missing pinned version around pyscript and bokeh ... I think we recently solved that with latest too ... I need to double check though

MarcSkovMadsen commented 1 month ago

I have a dejavu ... are you using also latest bokeh JS version or that part is the old one so that code in Python can't communicate with it? 🤔 'cause we already had that issue and also solved it in our examples https://pyscript.com/@examples/simple-panel/latest

The reference example https://pyscript.com/@examples/simple-panel/latest you are linking to is using a very old version of pyscript (with the speed pyscript is moving) and an old version of Panel.

I'm using the latest Panel version 1.4.4 together with the recommended bokeh version 3.4.1. See https://panel.holoviz.org/how_to/wasm/standalone.html#pyscript

MarcSkovMadsen commented 1 month ago

Just to make sure Panel 1.4.4 and Bokeh 3.4.1 can work with Pyodide, I tried the Pyodide reference example at https://panel.holoviz.org/how_to/wasm/standalone.html#pyodide. And it works.

image

WebReflection commented 1 month ago

Thanks for the pointer ... I can confirm something is off with our custom py type, as the polyscript raw pyodide alternative would just work.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>🦜 Panel Editor Template</title>
    <script src="https://cdn.bokeh.org/bokeh/release/bokeh-3.4.1.js"></script>
    <script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-3.4.1.min.js"></script>
    <script src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-3.4.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@holoviz/panel@1.4.4/dist/panel.min.js"></script>
    <script type="module" src="https://pyscript.net/releases/2024.7.1/core.js"></script>
  </head>
  <body>
    <div id="simple_app"></div>
    <script type="pyodide" config="./config.toml">
        import panel as pn

        pn.extension(sizing_mode="stretch_width")

        slider = pn.widgets.FloatSlider(start=0, end=10, name='Amplitude')

        def callback(new):
            return f'Amplitude is: {new}'

        pn.Row(slider, pn.bind(callback, slider)).servable(target='simple_app')
    </script>
  </body>
</html>

I will investigate and fix this tomorrow morning, first thing 👍

MarcSkovMadsen commented 1 month ago

For info. I tried the example in the post just above. And I see

The FetchEvent for "<URL>" resulted in a network error response: Cross-Origin-Resource-Policy prevented from serving the response to the client.

image

MarcSkovMadsen commented 1 month ago

The above was using VS Code live server. If I use python -m http.server your example works for me.

WebReflection commented 1 month ago

yeah but that's not the issue, it's just your Service Worker still running behind the scene ... go in devtools Application panel, unregister, then go storage, clear all data, then try again without mini-coi around (needed for workers though ... one issue at the time, but about network issues there's little I can do right now).

WebReflection commented 1 month ago

we found the culprit of the issue and it looks like it's in your code, as explained in here: https://github.com/pyscript/pyscript/pull/2123#issuecomment-2233103241

That MR made me suffer a lot to find the culprit of the issue which was our "internal" RUNNING_IN_WORKER constant that, if removed, would've seen panel working at least on the main thread, which was broken too, because you set _IN_WORKER = True anyway within the first try check.

What I see in your code is that you are screaming for js.document and js.window support and we'll be happy to patch that too but please do not branch your logic or nothing really work.

In PyScript, document is meant to be the real thing even out of a worker and literally nothing should be different on your side of affairs. If I miss the reason for you to branch anyhow the logic please let me know but to me it looks like you should fully erase that logic because if document and window are around, you're good to go from our side.

Please let us know how to help there, or please at least fix that line of code where you set _IN_WORKER = True even if you are not in a worker so that _RUNNING_IN_WORKER is already False for a reason.

Once that's done, let's figure out why panel in PyScript doesn't work in workers, hence it cannot work in py-editor use case too.

WebReflection commented 1 month ago

I went ahead and tested that panel works in both workers and py-editor if we provide js.window too.

We remain with the:

Error raised while processing Document events: DataCloneError: Failed to execute 'postMessage' on 'DedicatedWorkerGlobalScope': [object Map] could not be cloned.

issue but I can see panel working just fine even from a PyEditor ... you need to remove those lines that branches your logic though around PyScript and if we provide js.window we're all good.

WebReflection commented 1 month ago

FYI this fixed panel in both workers and py-editor (on top of removing RUNNING_IN_WORKER due your current logic around) https://github.com/pyscript/pyscript/compare/bb1d1d64b27e74324e6dd035f13fcd9579e71d9c..5b1c39255b6b48cd5943672e2223f9f0b689e05f

it looks to me your logic around RUNNING_IN_WORKER is not doing the best it can do ... I am personally happy to patch js.window too, for the same reason we patched js.document before, it was to make imported packages just work.

From our perspective, what works on the main thread should work on workers too, that's the portability promise we try to make, but of course there are possible hiccups, in this case the mentioned error and comments like this we're not aware of or fully sure how to help with:

# Ensure we don't try to load MPL WASM backend in worker

Once again, we're here to make it happen, so please let's help each other to do so in the best possible way, thank you!

MarcSkovMadsen commented 1 month ago

Thx so much 👍