Embed(root) in Reactive HTML

Panel
1

Hi,

is it possible to use embed(root) line in jinja2 templates in the reactive HTML component. I am trying to re write the React grid layout with this new way of rendering but I do not know how to embed a Bokeh div in React.createElement(?). For example consider the following code

import panel as pn 
import param

js_files = {'r1':"https://unpkg.com/react@17/umd/react.development.js",
        'r2':"https://unpkg.com/react-dom@17/umd/react-dom.development.js",
        'r6':"https://cdnjs.cloudflare.com/ajax/libs/react-grid-layout/1.3.0/react-grid-layout.min.js"}

css_files = ["https://cdnjs.cloudflare.com/ajax/libs/react-grid-layout/1.3.0/css/styles.css"]



class PowerPanel(pn.reactive.ReactiveHTML):
    row = param.Parameter() 

    _template = """
    <div id='row' style="visibility: hidden;">${row}</div>
    <div id='grid' style="width:100vw;"> </div>
    """

    _scripts = {'render':"""
    //console.log('self', data, 'data',data,'model', model.children,     'state',state,'view', view.el, 'event',event)
console.log('self', view.el.firstChild)  
            const divStyle = {borderRadius: '5px', backgroundColor: 'red'};
 const ResponsiveGridLayout = ReactGridLayout.WidthProvider(ReactGridLayout.Responsive);


class ResponsiveGrid extends React.PureComponent {
  render() {
    return React.createElement(ResponsiveGridLayout, null, 
        React.createElement("div", {key: "'i1", style: divStyle}, 
            [React.createElement("span", {key: "i2", className: "drag-handle"}) 
            , React.createElement("div", {id: "row1",key: "i3"}, "What do i put here?")]
            )
        );
  }

}
 
const element = React.createElement("h1", null, "Hello, world");
ReactDOM.render(React.createElement(ResponsiveGrid, null), grid);

    """}

pn.extension(js_files=js_files, css_files=css_files)

pn.Row('H  ', PowerPanel(row = pn.Row('row123'),sizing_mode='stretch_width'), 
        sizing_mode='stretch_width').servable()

I want to put a panel component inside the React.create element div.

image

2

At least you can use the below to continue playing. But I would also like to know the right way to do this.

image
image456×921 11.3 KB 

import numpy as np
import panel as pn
import param

js_files = {'r1':"https://unpkg.com/react@17/umd/react.development.js",
        'r2':"https://unpkg.com/react-dom@17/umd/react-dom.development.js",
        'r6':"https://cdnjs.cloudflare.com/ajax/libs/react-grid-layout/1.3.0/react-grid-layout.min.js"}

css_files = ["https://cdnjs.cloudflare.com/ajax/libs/react-grid-layout/1.3.0/css/styles.css"]
pn.extension(js_files=js_files, css_files=css_files)


class PowerPanel(pn.reactive.ReactiveHTML):
    row = param.Parameter()

    _template = """
    <div id='row'>${row}</div>
    <div id='grid' style="width:100vw;"></div>
    """

    _scripts = {'render':"""
const divStyle = {borderRadius: '5px', backgroundColor: 'red'};
const ResponsiveGridLayout = ReactGridLayout.WidthProvider(ReactGridLayout.Responsive);

containerID = "container-" + view.el.firstChild.id
class ResponsiveGrid extends React.PureComponent {
  render() {
    return React.createElement(ResponsiveGridLayout, null,
        React.createElement("div", {key: "'i1", style: divStyle},
            [React.createElement("span", {key: "i2", className: "drag-handle"})
            , React.createElement("div", {id: containerID,key: "i3"}, "What do i put here?")]
            )
        );
  }
}

ReactDOM.render(React.createElement(ResponsiveGrid, null), grid);
document.getElementById(containerID).innerHTML=""
document.getElementById(containerID).appendChild(view.el.firstChild)
    """}


data = {'x': np.arange(50), 'y': np.random.randn(50).cumsum()}

trend = pn.indicators.Trend(
    title='Price', data=data, sizing_mode="stretch_both"
)

pn.Row(PowerPanel(row = trend,sizing_mode='stretch_width'),
        sizing_mode='stretch_width').servable()
3

Thanks for the response! it is a workaround but it works smoothly! thanks again!

1 Like