How to implement a container widget?

[asaboor-gh]

I am trying to create a Box widget alternative to ipywidgets.Box. How to add children to it from _esm attribute which are provided from python side?

import anywidget
import traitlets
import ipywidgets as ipw

class Box(anywidget.AnyWidget):
    _esm = """
    export function render(view) {
        // How to access and display children here?
    }
    """
    children = traitlets.List(trait=traitlets.Instance(ipw.DOMWidget)).tag(sync=True, **ipw.widget_serialization)

Of course there should be nothing in the box as we did not handle it on JavaScript side.
Would it be nicer to add example of a container widget in docs?

[manzt]

Thanks for trying out anywidget!

I'd recommend having a look at the front end ipywidgets implementation for BoxModel and BoxView.

It seems the BoxModel defines a custom (de)serializer for the children trait on the client (unpack_models) that is compatible with ipw.widget_serialization). anywidget doesn't currently support registering custom serializers, but it's on the roadmap. We need to figure out the right API first.

[asaboor-gh]

Thanks for trying out anywidget!

I'd recommend having a look at the front end ipywidgets implementation for BoxModel and BoxView.

It seems the BoxModel defines a custom (de)serializer for the children trait on the client (unpack_models) that is compatible with ipw.widget_serialization). anywidget doesn't currently support registering custom serializers, but it's on the roadmap. We need to figure out the right API first.

Yes it was where I got stuck, because BoxModel deserializes children on definition time, but in case of AnyWidget definitions are handled automatically for user. I think currently it would be feasible to:

• Create a custom widget and put it in an ipywidgets Box alongside other children.
• Register onload or some other possible event in render method that can access it's parent after got loaded in DOM (I checked that view.el cannot access parent, so we need to wait for loading it).
• We can apply JavaScript (events) on parent via access through this child (something similar to ipyevents but with enhanced flexibility to run JavaScript code).

I would share if I got successful in doing so, but will be waiting for a more straightforward solution by you and your team. You are doing a great job👍.

[asaboor-gh]

This really works provided that we use an HTML element which has onload event such as img, iframe.

import anywidget
import traitlets
import ipywidgets as ipw

class Javascript(anywidget.AnyWidget):
    _esm = """
    export function render(view) {
        function accessParent(event) {
            let box = event.target.parentNode.parentNode
            box.classList.add("MyBox")
            // Doing anything with box here
        }
        var iframe = document.createElement('iframe');
        iframe.onload = accessParent
        iframe.src = "https://www.tldraw.com"
        view.el.appendChild(iframe);
    }
    """
    _css = """
    .MyBox {
        background: skyblue;
        height: 400px;
    }
    .MyBox iframe {
        border: 1px solid red;
        background: whitesmoke;
        height: 350px;
        width: 100%;
    }
    """

Output

Thanks to provide a direction for easily building custom widgets!

[manzt]

Well I dug into this a bit. Turns out it's not too hard to accomplish what you want currently with anywidget. Model serializers just allow you to hook into view.model.get(<name>) and view.model.set(<name>, <value>). As long as the Python serializer (ipy.widget_serialization) targets JSON (and doesn't include binary data), you can accomplish this deserialization manually:

let children = deserialize_children(view.model.get("children"));

Looking into unpacked_models, it's pretty straightforward to implement yourself for children:

import anywidget
import traitlets
import ipywidgets as ipw

class Box(anywidget.AnyWidget):
    _esm = """
    async function unpack_models(model_ids, manager) {
        return Promise.all(
            model_ids.map(id => manager.get_model(id.slice("IPY_MODEL_".length)))
        );
    }
    export async function render(view) {
       let model_ids = view.model.get("children"); // ["IPY_MODEL_<model_id>", ...]
        let children_models = await unpack_models(model_ids, view.model.widget_manager);
        for (let model of children_models) {
            let child_view = await view.create_child_view(model);
            view.el.appendChild(child_view.el);
        }
    }
    """
    children = traitlets.List(trait=traitlets.Instance(ipw.DOMWidget)).tag(sync=True, **ipw.widget_serialization)

box = Box(children=[
    ipw.IntProgress(),
    ipw.IntSlider(),
])

box

[manzt]

Yes it was where I got stuck, because BoxModel deserializes children on definition time, but in case of AnyWidget definitions are handled automatically for user.

For clarification, BoxModel defines serializers (i.e., functions that perform (de)serialization for a particular trait) at definition time. It does not deserialize any data at definition time.

[asaboor-gh]

That's great. 👍 A little bit tricky as I would never have thought about create_child_view function and I am not good at JavaScript at all, just learning.

[manzt]

A little bit tricky as I would never have thought about create_child_view function and I am not good at JavaScript at all, just learning.

I had to do a bit of digging to find this function in the BoxView implementation (it's hidden in ViewList.update).

To be totally clear, you would need to equally dig for create_child_view if creating a custom widget without anywidget (i.e., using a cookiecutter template) but then also figure out how to package the following code:

import { DOMWidgetModel, DOMWidgetView, unpack_models } from "@jupyter-widgets/base";

class MyBoxModel extends DOMWidgetModel {
  /* ... */
  static serializers = {
    ...DOMWidgetModel.serializers,
    children: { deserialize: unpack_models },
  }
}

class MyBoxView extends DOMWidgetView {
  render() {
    let models = this.model.get("children");
    for (let model of models) {
      let child_view = await this.create_child_view(model);
        this.el.appendChild(child_view.el);
    }
  }
}

[asaboor-gh]

Yes you are right. Cookicutter way didn't let me do this for a whole year because it's a very steep learning curve plus usually there is no urge to learn JavaScript if you already know Python. anywidget made it just pythonic for people like me to be happily interacting with JavaScript through Python. Thanks again!

[manzt]

Love to hear it! Thanks again for trying it out and sharing this use case. I learned more about how ipywidgets work widgets under the hood :)

[naschmitz]

I've updated the sample to use model.widget_manager. The AnyView object is no longer exposed to the render() method directly.

import anywidget
import traitlets
import ipywidgets

class Box(anywidget.AnyWidget):
  _esm = """
    async function unpack_models(model_ids, manager) {
        return Promise.all(
            model_ids.map(id => manager.get_model(id.slice("IPY_MODEL_".length)))
        );
    }
    export async function render({ model, el }) {
        let model_ids = model.get("children");  // ["IPY_MODEL_<model_id>", ...]
        let children_models = await unpack_models(model_ids, model.widget_manager);
        for (let model of children_models) {
            let child_view = await model.widget_manager.create_view(model);
            el.appendChild(child_view.el);
        }
    }
    """
  children = traitlets.List(traitlets.Instance(ipywidgets.DOMWidget)).tag(
      sync=True, **ipywidgets.widget_serialization
  )

box = Box(
    children=[
        ipywidgets.IntProgress(),
        ipywidgets.IntSlider(),
    ]
)
box

[naschmitz]

One more. Here's a Box class that handles updates to children.

class Box(anywidget.AnyWidget):
  _esm = """
    async function unpack_models(model_ids, manager) {
        return Promise.all(
            model_ids.map(id => manager.get_model(id.slice("IPY_MODEL_".length)))
        );
    }

    async function update_children(container, model) {
        let children = model.get("children");
        let child_models = await unpack_models(children, model.widget_manager);
        let child_views = await Promise.all(
            child_models.map(model => model.widget_manager.create_view(model))
        );
        container.innerHTML = ``;
        for (let child_view of child_views) {
            container.appendChild(child_view.el);
        }
    }

    export async function render({ model, el }) {
        update_children(el, model);
        model.on("change:children", () => {
            update_children(el, model);
        });
    }
    """
  children = traitlets.List(traitlets.Instance(ipywidgets.DOMWidget)).tag(
      sync=True, **ipywidgets.widget_serialization
  )