Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Make it possible and easy to pyscript editor with Panel #6991

Open
MarcSkovMadsen opened this issue Jul 16, 2024 · 4 comments
Open

Make it possible and easy to pyscript editor with Panel #6991

MarcSkovMadsen opened this issue Jul 16, 2024 · 4 comments
Labels
TRIAGE Default label for untriaged issues

Comments

@MarcSkovMadsen
Copy link
Collaborator

I hope that one day it would be possible and easy to use pyscript editor with Panel for embedding on web pages etc.

Currently I cannot get it working.

Reproducible example

mini-coi.js

/*! coi-serviceworker v0.1.7 - Guido Zuidhof and contributors, licensed under MIT */
/*! mini-coi - Andrea Giammarchi and contributors, licensed under MIT */
(({ document: d, navigator: { serviceWorker: s } }) => {
    if (d) {
      const { currentScript: c } = d;
      s.register(c.src, { scope: c.getAttribute('scope') || '.' }).then(r => {
        r.addEventListener('updatefound', () => location.reload());
        if (r.active && !s.controller) location.reload();
      });
    }
    else {
      addEventListener('install', () => skipWaiting());
      addEventListener('activate', e => e.waitUntil(clients.claim()));
      addEventListener('fetch', e => {
        const { request: r } = e;
        if (r.cache === 'only-if-cached' && r.mode !== 'same-origin') return;
        e.respondWith(fetch(r).then(r => {
          const { body, status, statusText } = r;
          if (!status || status > 399) return r;
          const h = new Headers(r.headers);
          h.set('Cross-Origin-Opener-Policy', 'same-origin');
          h.set('Cross-Origin-Embedder-Policy', 'require-corp');
          h.set('Cross-Origin-Resource-Policy', 'cross-origin');
          return new Response(body, { status, statusText, headers: h });
        }));
      });
    }
  })(self);

config.toml

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"
]

script.html

<!DOCTYPE html>
<html>
  <head>
    <script src="./mini-coi.js" scope="./"></script>   
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>🦜 Panel Editor Template</title>
    <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>
    <script type="py-editor" 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="out");
    </script>
    <div id="out"></div>
  </body>
</html>

At first I don't see any output in the web page or errors in the console.

image

After click the run button multiple times I see

image

Additional Context

I've tried without target="out". I've tried without .servable(target="out"). But I cannot get it to display the Panel app.

I would really like the version without .servable(target="out") to work as that would be the easiest code to explain to users.
@MarcSkovMadsen MarcSkovMadsen added the TRIAGE Default label for untriaged issues label Jul 16, 2024
@MarcSkovMadsen MarcSkovMadsen mentioned this issue Jul 16, 2024
Closed
3 tasks
@MarcSkovMadsen
Copy link
Collaborator Author

Just for info. Some related issues and feature requests that might be worth discussing too @philippjfr

@MarcSkovMadsen
Copy link
Collaborator Author

I will update the crosspost on pyscript. Please check that out pyscript/pyscript#2118.

  • Forgot to add panel and bokeh .js. But then I get other error.

@MarcSkovMadsen MarcSkovMadsen mentioned this issue Jul 16, 2024
Closed
@philippjfr
Copy link
Member

The problem is that you currently have to manually add Bokeh and Panel.js scripts.

@MarcSkovMadsen
Copy link
Collaborator Author

MarcSkovMadsen commented Jul 17, 2024 •
edited
Loading

Thx. Have done that. See lots of investigating in PyScript crosspost mentioned above.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
TRIAGE Default label for untriaged issues
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@philippjfr @MarcSkovMadsen