How do I use jsPanel with Panel and ReactiveHTML?

Panel
4

image
image924×558 13.4 KB

if you subclass listlike like in the flexbox model it works

import panel as pn
import param
from panel.layout.base import ListLike

RAW_CSS = """
body {
    margin: 0px;}
"""

if not RAW_CSS in pn.config.raw_css:
    pn.config.raw_css.append(RAW_CSS)
pn.extension()


class JsPanel(ListLike, pn.reactive.ReactiveHTML):
    _template = """
<div id="element">Some Text I've added to a d

 {% for obj in objects %}
  <div id="flex-item-{{ loop.index0 }}">
    ${objects[{{ loop.index0 }}]}
  </div>
  {% endfor %}

iv element that is used inside the jsPanel</div>
"""
    __css__ = ["https://cdn.jsdelivr.net/npm/jspanel4@4.12.0/dist/jspanel.css"]

    __javascript__ = [
        "https://cdn.jsdelivr.net/npm/jspanel4@4.12.0/dist/jspanel.js",
        "https://cdn.jsdelivr.net/npm/jspanel4@4.12.0/dist/extensions/modal/jspanel.modal.js",
        "https://cdn.jsdelivr.net/npm/jspanel4@4.12.0/dist/extensions/tooltip/jspanel.tooltip.js",
        "https://cdn.jsdelivr.net/npm/jspanel4@4.12.0/dist/extensions/hint/jspanel.hint.js",
        "https://cdn.jsdelivr.net/npm/jspanel4@4.12.0/dist/extensions/layout/jspanel.layout.js",
        "https://cdn.jsdelivr.net/npm/jspanel4@4.12.0/dist/extensions/contextmenu/jspanel.contextmenu.js",
        "https://cdn.jsdelivr.net/npm/jspanel4@4.12.0/dist/extensions/dock/jspanel.dock.js",
    ]

    _scripts = {
        "render": """
var config = {
    position: 'right-top',
    content: element,
    contentSize: '500 350',
    headerTitle: 'Settings',
    theme: 'primary',
    callback: function(panel) {
        // do something if needed ...
    }
}
jsPanel.create(config);
"""
    }

    def __init__(self, *objects, **params):
        super().__init__(objects=list(objects), **params)

from bokeh.plotting import figure

p = figure(sizing_mode='stretch_both')
p.circle([1,2,3],[4,5,6])
pn.Column(
    JsPanel(pn.Column(pn.widgets.Button(name="My Widget"), p)),
    pn.Spacer(sizing_mode="stretch_both", margin=0),
    sizing_mode="stretch_both",background="lightblue"
).servable()
2 Likes