Add panel-lite-editor #5812

MarcSkovMadsen · 2023-11-05T14:20:37Z

Implements #5768. In #5769 I made a lot of experiments. I learned that to create a general panel-lite playground we need to

Use an iframe with pyodide loaded once
Create the html template from the code on the fly to support js extensions and templates

Video

panel-lite-editor.mp4

Resources

MarcSkovMadsen · 2023-11-05T14:30:55Z

examples/playground/iframe.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>


FYI. This is the document iframe startswith. Currently its set via the src attribute. Instead of serving this externally, we should see if we could insert it via the srcdoc attribute. I have not tried with this specific document. But I've tried the srcdoc attribute with another doc in #4279 and could not get it working.

MarcSkovMadsen · 2023-11-05T14:35:04Z

examples/playground/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>


Todo

Make it easy for Panel, awesome-panel and any user to host a Panel panel-lite-editor containing some examples.

Style the editor

Put the panel-lite-editor in an easy to use js library that can be loaded from a CDN.

Make it possible to provide a dictionary of examples to the panel-lite-lite editor

Make it possible to run the panel-lite-editor as a Panel PanelLiteEditor widget.

Make it possible to toggle the editor part such that you can display the result but users can click some button and editor the code to update the result.

Add a console to make it easier to understand what goes on.

MarcSkovMadsen · 2023-11-05T14:35:48Z

examples/playground/panel-lite-editor.js

+const appContainer = "app-container"
+const codeEditor = "code-editor"
+
+const welcomeExample=`\


Todo

Refactor the examples to an external panel-lite-examples.json or panel-lite-examples.js file.

MarcSkovMadsen · 2023-11-05T14:38:36Z

examples/playground/panel-lite-editor.js

+pn.pane.Perspective(df, width=1000).servable()
+`
+
+const fastTemplateExample=`\


Todo:

Get the fastTemplateExample working

When rendering the template I see Error raised while processing Document events: Error: reference ... isn't known. See panel convert: Error raised while processing Document events: Error: reference ... isn't known #5830

Clicking button raises an exception `ModuleNotFoundError: no module named 'tornado'.

I can only run this example once then I can run no other example. See Make Pyodide init_doc + write_doc idempotent #5810

script_to_html not working in pyodide when input is containing template #5831

I work around it here by setting bk_settings.simple_ids.set_value(True).

I have seen this example render in different ways. For example sometimes there is an extra button in the header. Solved by not prerendering.

ModuleNotFoundError: no module named 'tornado'

Uncaught PythonError: Traceback (most recent call last): File "/lib/python3.11/site-packages/panel/io/pyodide.py", line 255, in jssync pydoc.apply_json_patch(json_patch.to_py(), setter='js') File "/lib/python3.11/site-packages/bokeh/document/document.py", line 391, in apply_json_patch DocumentPatchedEvent.handle_event(self, event, setter) File "/lib/python3.11/site-packages/bokeh/document/events.py", line 245, in handle_event event_cls._handle_event(doc, event) File "/lib/python3.11/site-packages/bokeh/document/events.py", line 280, in _handle_event cb(event.msg_data) File "/lib/python3.11/site-packages/bokeh/document/callbacks.py", line 390, in trigger_event model._trigger_event(event) File "/lib/python3.11/site-packages/bokeh/util/callback_manager.py", line 113, in _trigger_event self.document.callbacks.notify_event(cast(Model, self), event, invoke) File "/lib/python3.11/site-packages/bokeh/document/callbacks.py", line 260, in notify_event invoke_with_curdoc(doc, callback_invoker) File "/lib/python3.11/site-packages/bokeh/document/callbacks.py", line 443, in invoke_with_curdoc return f() ^^^ File "/lib/python3.11/site-packages/bokeh/util/callback_manager.py", line 109, in invoke cast(EventCallbackWithEvent, callback)(event) File "/lib/python3.11/site-packages/panel/reactive.py", line 494, in _server_event self._comm_event(doc, event) File "/lib/python3.11/site-packages/panel/reactive.py", line 481, in _comm_event state._handle_exception(e) File "/lib/python3.11/site-packages/panel/io/state.py", line 441, in _handle_exception raise exception File "/lib/python3.11/site-packages/panel/reactive.py", line 479, in _comm_event self._process_bokeh_event(doc, event) File "/lib/python3.11/site-packages/panel/reactive.py", line 413, in _process_bokeh_event state._busy_counter += 1 ^^^^^^^^^^^^^^^^^^^ File "/lib/python3.11/site-packages/param/parameterized.py", line 525, in _f instance_param.__set__(obj, val) File "/lib/python3.11/site-packages/param/parameterized.py", line 527, in _f return f(self, obj, val) ^^^^^^^^^^^^^^^^^ File "/lib/python3.11/site-packages/param/parameters.py", line 542, in __set__ super().__set__(obj,val) File "/lib/python3.11/site-packages/param/parameterized.py", line 527, in _f return f(self, obj, val) ^^^^^^^^^^^^^^^^^ File "/lib/python3.11/site-packages/param/parameterized.py", line 1545, in __set__ obj.param._call_watcher(watcher, event) File "/lib/python3.11/site-packages/param/parameterized.py", line 2486, in _call_watcher self_._execute_watcher(watcher, (event,)) File "/lib/python3.11/site-packages/param/parameterized.py", line 2468, in _execute_watcher watcher.fn(*args, **kwargs) File "/lib/python3.11/site-packages/param/parameterized.py", line 781, in _sync_caller return function() ^^^^^^^^^^ File "/lib/python3.11/site-packages/param/depends.py", line 41, in _depends return func(*args, **kw) ^^^^^^^^^^^^^^^^^ File "/lib/python3.11/site-packages/panel/io/state.py", line 273, in _update_busy_counter self.busy = self._busy_counter >= 1 ^^^^^^^^^ File "/lib/python3.11/site-packages/param/parameterized.py", line 525, in _f instance_param.__set__(obj, val) File "/lib/python3.11/site-packages/param/parameterized.py", line 527, in _f return f(self, obj, val) ^^^^^^^^^^^^^^^^^ File "/lib/python3.11/site-packages/param/parameterized.py", line 1545, in __set__ obj.param._call_watcher(watcher, event) File "/lib/python3.11/site-packages/param/parameterized.py", line 2486, in _call_watcher self_._execute_watcher(watcher, (event,)) File "/lib/python3.11/site-packages/param/parameterized.py", line 2468, in _execute_watcher watcher.fn(*args, **kwargs) File "/lib/python3.11/site-packages/param/parameterized.py", line 781, in _sync_caller return function() ^^^^^^^^^^ File "/lib/python3.11/site-packages/param/depends.py", line 41, in _depends return func(*args, **kw) ^^^^^^^^^^^^^^^^^ File "/lib/python3.11/site-packages/panel/io/state.py", line 278, in _update_busy indicator.value = self.busy ^^^^^^^^^^^^^^^ File "/lib/python3.11/site-packages/param/parameterized.py", line 525, in _f instance_param.__set__(obj, val) File "/lib/python3.11/site-packages/param/parameterized.py", line 527, in _f return f(self, obj, val) ^^^^^^^^^^^^^^^^^ File "/lib/python3.11/site-packages/param/parameterized.py", line 1545, in __set__ obj.param._call_watcher(watcher, event) File "/lib/python3.11/site-packages/param/parameterized.py", line 2486, in _call_watcher self_._execute_watcher(watcher, (event,)) File "/lib/python3.11/site-packages/param/parameterized.py", line 2468, in _execute_watcher watcher.fn(*args, **kwargs) File "/lib/python3.11/site-packages/panel/reactive.py", line 374, in _param_change self._apply_update(named_events, properties, model, ref) File "/lib/python3.11/site-packages/panel/reactive.py", line 307, in _apply_update doc.add_next_tick_callback(cb) File "/lib/python3.11/site-packages/bokeh/document/document.py", line 268, in add_next_tick_callback from ..server.callbacks import NextTickCallback File "/lib/python3.11/site-packages/bokeh/server/callbacks.py", line 29, in <module> from ..util.tornado import _CallbackGroup File "/lib/python3.11/site-packages/bokeh/util/tornado.py", line 37, in <module> import tornado ModuleNotFoundError: No module named 'tornado' at new_error (pyodide.asm.js:9:12519) at VM17 pyodide.asm.wasm:1:1411112 at VM17 pyodide.asm.wasm:1:1411373 at Module._pythonexc2js (pyodide.asm.js:9:640895) at Module.callPyObjectKwargs (pyodide.asm.js:9:81856) at Module.callPyObject (pyodide.asm.js:9:82066) at Function.apply (pyodide.asm.js:9:97147) at Object.apply (pyodide.asm.js:9:95381) at S._trigger_on_change (VM621 bokeh-3.3.0.min.js:165:4949) at z.send_event (VM621 bokeh-3.3.0.min.js:165:408) at a._process_event (VM621 bokeh-3.3.0.min.js:215:892) at z.trigger (VM621 bokeh-3.3.0.min.js:165:545) at a.trigger_event (VM621 bokeh-3.3.0.min.js:215:987) at r.click (VM623 bokeh-widgets-3.3.0.min.js:56:117) at HTMLButtonElement.<anonymous> (VM623 bokeh-widgets-3.3.0.min.js:46:898) new_error @ pyodide.asm.js:9 $wrap_exception @ VM17 pyodide.asm.wasm:1 $pythonexc2js @ VM17 pyodide.asm.wasm:1 Module._pythonexc2js @ pyodide.asm.js:9 Module.callPyObjectKwargs @ pyodide.asm.js:9 Module.callPyObject @ pyodide.asm.js:9 apply @ pyodide.asm.js:9 apply @ pyodide.asm.js:9 _trigger_on_change @ VM621 bokeh-3.3.0.min.js:165 send_event @ VM621 bokeh-3.3.0.min.js:165 _process_event @ VM621 bokeh-3.3.0.min.js:215 trigger @ VM621 bokeh-3.3.0.min.js:165 trigger_event @ VM621 bokeh-3.3.0.min.js:215 click @ VM623 bokeh-widgets-3.3.0.min.js:56 (anonymous) @ VM623 bokeh-widgets-3.3.0.min.js:46

MarcSkovMadsen · 2023-11-05T14:40:51Z

examples/playground/panel-lite-iframe.js

+`
+
+// See https://github.com/holoviz/panel/blob/8579e5cf322604e61b95bb1e10dcc57466298df1/panel/io/convert.py#L87
+const pyoidideScript = `


FYI. We need to override the PYODIDE_SCRIPT to

not reload pyodide, micropip and python packages

listen to a message for the parent window to run some new code.

MarcSkovMadsen · 2023-11-05T14:42:46Z

examples/playground/panel-lite-iframe.js

+const pyoidideScript = `
+<script type="text/javascript">
+async function main() {
+    let envSpec =  [{{ env_spec }}]


FYI. I check if python packages have already been loaded before loading them again.

MarcSkovMadsen · 2023-11-05T14:43:39Z

examples/playground/panel-lite-iframe.js

+    ]
+    await window.micropip.install(window.envSpec)
+    // Todo: https://github.com/holoviz/panel/issues/5811
+    window.envSpec = window.envSpec.concat(["panel", "bokeh", "datetime", "random"])


Todo

make sure find_requirements do not find datetime or random #find_requirements includes datetime and random #5811.

MarcSkovMadsen · 2023-11-05T14:45:01Z

examples/playground/panel-lite-iframe.js

+from panel.io.convert import script_to_html
+
+code = \"\"\"
+${fixPanel}


Todo:

Allow srcdoc Add support for iframe srcdoc to Location #5774.

Remove fixPanel when fix released..

MarcSkovMadsen · 2023-11-05T14:45:17Z

examples/playground/panel-lite-iframe.js

+    try:
+        html, _ = script_to_html(file)
+    except Exception as ex:
+        html = f"Exception: {ex}"


Todo

Add much better error handling.

MarcSkovMadsen · 2023-11-05T14:46:13Z

examples/playground/panel-lite-iframe.js

+        print(ex)
+
+
+    return html.replace("v0.23.4", "v0.24.1")


Todo

Get Panel updated to use latest version of Pyodide

Remove .replace when released.

MarcSkovMadsen · 2023-11-05T14:47:41Z

examples/playground/panel-lite-iframe.js

+
+async function runCode(code){
+    // Todo: panel.io.convert.find_requirements does not find these?
+    await installIfMissing(code, 'plotly')


Todo:

Get plotly and matplotlib provided by {{ env_spec }}. It does not when running the examples.

I've not been able to reproduce this outside this application.

MarcSkovMadsen · 2023-11-05T14:48:36Z

examples/playground/panel-lite-iframe.js

+    await runCode(event.data)
+}
+
+window.handleMessage = handleMessage


Todo:

Remove window.handleMessage if possible.

MarcSkovMadsen · 2023-11-05T14:49:58Z

examples/playground/iframe.html

+    <div id="loading-spinner" style="width:100%">Loading Pyodide...</div>
+    <script>
+        async function main(){
+            window.pyodide = await loadPyodideAndPackages(jsglobals=window)


Todo

Load and run pyodide as efficiently as possible. Probably using service worker.

examples/playground/panel-lite-editor.js

MarcSkovMadsen · 2023-11-05T14:59:04Z

examples/playground/index.html

+<body>
+    <img src="https://panel.holoviz.org/_static/logo_horizontal_light_theme.png" style="height:50px"></img></br>
+	<span>Code Editor</span><br/>
+    <textarea id="code-editor" style="height:200px;width:800px"></textarea><br/>


Todo

Run code on CTRL+Save.

MarcSkovMadsen · 2023-11-06T04:12:47Z

examples/playground/panel-lite-editor.js

@@ -0,0 +1,131 @@
+const appContainer = "app-container"


Todo

Add more features

Ability to add list of requirements

Ability to add list of environment variables. For example OPENAI_API_KEY. The environment variables should be added to os.environ.

Separate PanelLiteEditor and PanelLiteExamples. You might want to use the PanelLiteEditor seperately.

Add ability to hide PanelLiteEditor for example if embedded on web page.

Add better code editor. Like Ace or Monaco.

Layout Examples, Editor and App components in grid that orients it self nicely depending on screen size.

Add console to editor.

Maybe

Support multiple files.

Add linting via jedi. See https://github.com/maxwrlr/monaco-python.

Add black autoformatting via https://ryanking13.github.io/black-playground-pyodide/.

Add chat interface as https://aijs.io/editor?userId=cz17TtyVkAcSHjvSaag1RO3ry5L2&project=1698954552496_PythonTemplate

MarcSkovMadsen · 2023-11-06T04:24:18Z

examples/playground/panel-lite-editor.js

+pn.pane.Matplotlib(fig0, dpi=144).servable()
+`
+
+const perspectiveExample=`


Todo

Fix sporadic pyodide.ffi.JsException: Error: Error rendering Bokeh model: could not find ... HTML tag

I've experienced this when click my way through the examples from left to right.

pyodide.ffi.JsException: ... could not find ... HTML tag`

Uncaught (in promise) PythonError: Traceback (most recent call last): File "/lib/python311.zip/_pyodide/_base.py", line 571, in eval_code_async await CodeRunner( File "/lib/python311.zip/_pyodide/_base.py", line 396, in run_async await coroutine File "<exec>", line 45, in <module> File "/lib/python3.11/site-packages/panel/io/pyodide.py", line 519, in write_doc views = await Bokeh.embed.embed_items(JSON.parse(docs_json), JSON.parse(render_items)) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ pyodide.ffi.JsException: Error: Error rendering Bokeh model: could not find #e97f9bbb-8b5e-42a7-b685-b355a0ee7b92 HTML tag at new_error (pyodide.asm.js:9:12519) at pyodide.asm.wasm:0x158827 at pyodide.asm.wasm:0x15fcd5 at _PyCFunctionWithKeywords_TrampolineCall (pyodide.asm.js:9:123052) at pyodide.asm.wasm:0x1a3091 at pyodide.asm.wasm:0x289e4d at pyodide.asm.wasm:0x1e3f77 at pyodide.asm.wasm:0x1a3579 at pyodide.asm.wasm:0x1a383a at pyodide.asm.wasm:0x1a38dc at pyodide.asm.wasm:0x2685c5 at pyodide.asm.wasm:0x26e3d0 at pyodide.asm.wasm:0x1a3a04 at pyodide.asm.wasm:0x1a3694 at pyodide.asm.wasm:0x15f45e at Module.callPyObjectKwargs (pyodide.asm.js:9:81732) at Module.callPyObject (pyodide.asm.js:9:82066) at wrapper (pyodide.asm.js:9:58562)

MarcSkovMadsen · 2023-11-06T06:49:50Z

examples/playground/panel-lite-iframe.js

@@ -0,0 +1,159 @@
+const welcome=`\


Todo

Wrap this into an easy to use class PanelLiteIframe that takes code, requirements and either settings as arguments. It creates the iframe and provides a run function to update the code and other settings.

Maybe

Enable rendering non-Panel components by wrapping the last output in a pn.panel?

codecov · 2023-11-06T19:11:27Z

Codecov Report

Merging #5812 (ae5bbbd) into main (0169933) will increase coverage by 9.98%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##             main    #5812      +/-   ##
==========================================
+ Coverage   72.37%   82.35%   +9.98%     
==========================================
  Files         290      290              
  Lines       42235    42235              
==========================================
+ Hits        30566    34783    +4217     
+ Misses      11669     7452    -4217

Flag	Coverage Δ
ui-tests	`38.35% <ø> (?)`
unitexamples-tests	`72.37% <ø> (ø)`

Flags with carried forward coverage won't be shown. Click here to find out more.

see 71 files with indirect coverage changes

📣 Codecov offers a browser extension for seamless coverage viewing on GitHub. Try it in Chrome or Firefox today!

…panel-lite-playground

MarcSkovMadsen · 2024-01-20T06:19:23Z

Looking at the numpy web page. The below might be a simple solution if we enable easily copy-pasting code from a gallery?

Coderambling · 2024-03-11T19:37:09Z

Like it! But would it not need to support some form of Intellisense to be easier to use?

As for code <-> output, @ahuang11 made a great example with code-editor + Panel / Holoviz + AI that does something similar. Would that be of use?

add poc for panel-lite-editor

b4a1c94

MarcSkovMadsen mentioned this pull request Nov 5, 2023

POC of Panel Playground #5769

Closed

35 tasks

MarcSkovMadsen changed the title ~~add poc for panel-lite-editor~~ Add panel-lite-editor Nov 5, 2023

MarcSkovMadsen commented Nov 5, 2023

View reviewed changes

MarcSkovMadsen mentioned this pull request Nov 5, 2023

Document how to efficiently share Pyodide with and across iframes. pyodide/pyodide#4279

Open

MarcSkovMadsen commented Nov 5, 2023

View reviewed changes

MarcSkovMadsen added the in progress label Nov 5, 2023

disable prerendering

4637812

MarcSkovMadsen commented Nov 6, 2023

View reviewed changes

fix panel version issue

a48a8c4

MarcSkovMadsen added 2 commits November 7, 2023 05:03

Merge branch 'main' of https://github.com/holoviz/panel into feature/…

df13fc7

…panel-lite-playground

fix data-root-id

ae5bbbd

MarcSkovMadsen mentioned this pull request Nov 17, 2023

Panel Streaming Example not working pyscript/pyscript#1821

Closed

3 tasks

MarcSkovMadsen mentioned this pull request Dec 26, 2023

Add {panel-live} filter awesome-panel/holoviz-quarto#2

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add panel-lite-editor #5812

Add panel-lite-editor #5812

MarcSkovMadsen commented Nov 5, 2023 •

edited

MarcSkovMadsen Nov 5, 2023 •

edited

MarcSkovMadsen Nov 5, 2023 •

edited

MarcSkovMadsen Nov 5, 2023 •

edited

MarcSkovMadsen Nov 5, 2023 •

edited

MarcSkovMadsen Nov 5, 2023 •

edited

MarcSkovMadsen Nov 5, 2023

MarcSkovMadsen Nov 5, 2023

MarcSkovMadsen Nov 5, 2023

MarcSkovMadsen Nov 5, 2023

MarcSkovMadsen Nov 5, 2023 •

edited

MarcSkovMadsen Nov 5, 2023

MarcSkovMadsen Nov 5, 2023

MarcSkovMadsen Nov 5, 2023 •

edited

MarcSkovMadsen Nov 5, 2023

MarcSkovMadsen Nov 6, 2023 •

edited

MarcSkovMadsen Nov 6, 2023

MarcSkovMadsen Nov 6, 2023 •

edited

codecov bot commented Nov 6, 2023 •

edited

MarcSkovMadsen commented Jan 20, 2024

Coderambling commented Mar 11, 2024

Add panel-lite-editor #5812

Are you sure you want to change the base?

Add panel-lite-editor #5812

Conversation

MarcSkovMadsen commented Nov 5, 2023 • edited

Video

Resources

MarcSkovMadsen Nov 5, 2023 • edited

Choose a reason for hiding this comment

MarcSkovMadsen Nov 5, 2023 • edited

Choose a reason for hiding this comment

Todo

MarcSkovMadsen Nov 5, 2023 • edited

Choose a reason for hiding this comment

Todo

MarcSkovMadsen Nov 5, 2023 • edited

Choose a reason for hiding this comment

Todo:

MarcSkovMadsen Nov 5, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Todo

Choose a reason for hiding this comment

Todo:

Choose a reason for hiding this comment

Todo

MarcSkovMadsen Nov 5, 2023 • edited

Choose a reason for hiding this comment

Todo

Choose a reason for hiding this comment

Todo:

Choose a reason for hiding this comment

Todo:

MarcSkovMadsen Nov 5, 2023 • edited

Choose a reason for hiding this comment

Todo

Choose a reason for hiding this comment

Todo

MarcSkovMadsen Nov 6, 2023 • edited

Choose a reason for hiding this comment

Todo

Maybe

Choose a reason for hiding this comment

Todo

MarcSkovMadsen Nov 6, 2023 • edited

Choose a reason for hiding this comment

Todo

Maybe

codecov bot commented Nov 6, 2023 • edited

Codecov Report

MarcSkovMadsen commented Jan 20, 2024

Coderambling commented Mar 11, 2024

MarcSkovMadsen commented Nov 5, 2023 •

edited

MarcSkovMadsen Nov 5, 2023 •

edited

MarcSkovMadsen Nov 5, 2023 •

edited

MarcSkovMadsen Nov 5, 2023 •

edited

MarcSkovMadsen Nov 5, 2023 •

edited

MarcSkovMadsen Nov 5, 2023 •

edited

MarcSkovMadsen Nov 5, 2023 •

edited

MarcSkovMadsen Nov 5, 2023 •

edited

MarcSkovMadsen Nov 6, 2023 •

edited

MarcSkovMadsen Nov 6, 2023 •

edited

codecov bot commented Nov 6, 2023 •

edited