Dynamically injecting object names

Panel
, , ,
1

Hey folks,
Pretty new to panel, would appreciate your help.
Trying to integrate flex-layout into my panel using ReactiveHTML.
I want to be able to render bokeh models within the tabs of the layout.
I used the factory method of “flexlayout-react” to produce my react components. When rendering a child I creating a reference and in the return statement im appending a child which is supposed to be the div within my FlexLayout custom ReactiveHTML based component so I would be able to render the bokeh figure. Here is my code:

import json
from pathlib import Path
import panel as pn
import param
from panel.reactive import ReactiveHTML
from bokeh.plotting import figure
from bokeh.sampledata.penguins import data
from bokeh.models import Button, CustomJS


class FlexLayout(ReactiveHTML):
    layout_path = param.String(default="assets/layouts/new.json")
    layout = param.Parameter()
    sample_view = param.Parameter()

    def __init__(self, **params):
        super().__init__(**params)
        p1 = figure()
        p1.scatter("flipper_length_mm", "body_mass_g", source=data)
        self.sample_view = p1

        with open (self.layout_path) as f:
            self.layout = json.load(f)
        
    __javascript__ = [
        "https://unpkg.com/react@18/umd/react.development.js",
        "https://unpkg.com/react-dom@18/umd/react-dom.development.js",
        "https://cdn.jsdelivr.net/npm/flexlayout-react@0.7.12/dist/flexlayout.js",
        "https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/prism.min.js"
    ]

    _stylesheets = [
       "http://localhost:5006/assets/styles/light.css",
    ]

    _template = """
        <div id="root">
            <div id="obj0"> 
                ${sample_view}
            </div>
        </div>
    """

    _scripts = {
        "render": (Path(__file__).parent / "js" / "flex-layout.jsx").read_text("utf-8")
    }

    _extension_name = "custom_flex_layout"

pn.extension("custom_flex_layout", sizing_mode="stretch_both")

flex_layout = FlexLayout()
sample_layout = pn.Row(flex_layout)
sample_layout.servable()

Here is the flexlayout-react implementation:

function readModel(url) {
    // Create a new XMLHttpRequest object
    const xhr = new XMLHttpRequest();
    // Open a synchronous request
    xhr.open('GET', url, false);
    // Send the request
    xhr.send();
    // Check the status of the request
    if (xhr.status === 200) {
        // Request successful
        const json = JSON.parse(xhr.responseText);
        return FlexLayout.Model.fromJson(json);
    } else {
        console.error('Error fetching the JSON file. Status:', xhr.status);
    }
}

function Child(props) {
    const childRef = React.useRef();

    React.useEffect(() => {
        childRef.current.appendChild(props.el);
    }, [ ]);

    return React.createElement("div", {
        id: props.node.getName(),
        className: 'flex-tab',
        ref: childRef
    });
}

function App({ layout_path }) {
  
  const model = readModel(layout_path);
  const layoutRef = React.createRef();

  React.useEffect(() => {
  }, [])

  function onAddFromTabSetButton(node){
    layoutRef.current.addTabToTabSet(node.getId(), {type:"tab", component:"obj", name:"New"});
  }

  function onRenderTabSet(node, renderValues){
    if (node.getType() === "tabset"){
        renderValues.stickyButtons.push(
            React.createElement(
                "img", 
                {
                    src: "assets/add.svg",
                    alt: "Add",
                    key: "Add button",
                    title: "Add Tab",
                    style: { width: "1.1em", height: "1.1em" },
                    className: "flexlayout__tab_toolbar_button",
                    onClick: () => onAddFromTabSetButton(node)
                },
                node.getName()
            )
        );
    }    
  }

  const factory = (node) => {
    var component = node.getComponent();
    if (component === "obj"){
        return React.createElement(
            Child, 
            {
                node: node, 
                el: obj0
            }
        )   
    } else if (component === "button") {
        return React.createElement(
            "button", 
            {
                className: 'button-class',
            },
            node.getName()
        );
    } 
  }

  return React.createElement(FlexLayout.Layout, {
    ref: layoutRef,
    model: model,
    factory: factory,
    onRenderTabSet: onRenderTabSet
  });
}

function renderApp(data){

    ReactDOM.createRoot(root).render(
        React.createElement(React.StrictMode, {
            children: React.createElement(App, {layout_path: data.layout_path})
        })
    );
}

console.log("RENDERING")
renderApp(data)

My problem is that for now Im forwarding obj0 as the “el” property to the Child class, but my goal is to use obj + node.getId(), and also generate the divs within the templates dynamically:

# In the component set children as a List parameter and then initialize it with 
children = param.List(default=[])
self.children.append(pn.pane.Bokeh(p1))
self.children.append(pn.pane.Bokeh(p2))

# Then in the template
<div id="child">
                {% for obj in children%}
                    <div id="obj{{ loop.index0 }}">
                        ${children[{{ loop.index0 }}]}
                    </div>
                {% endfor %}
            </div>

And my goal is when node is a component of type “obj” it will render the plot indexed within its id field, for example node with id=0 will render children[0] (that is wrapped with obj0 in my template).
This is an example for a model (its my “assets/layouts/new.json” file):

{
  "global": {},
  "borders": [],
  "layout": {
      "type": "row",
      "weight": 100,
      "children": [
          {
              "type": "tabset",
              "weight": 50,
              "children": [
                  {
                      "id": 0,
                      "type": "tab",
                      "name": "One",
                      "component": "obj"
                  }
              ]
          }
      ]
  }
}

Would appreciate any leads, thank you in advance.