List of dicts data in widget trait - getting model to notice changes

[gereleth]

A widget's data might call for using a list of dicts to represent some objects that we want to manipulate (like a list of bounding boxes on an image). But using this type of data has some issues in syncing the changes from js to python.

The issue is demonstrated by the example widget below. Its value is a list of numbers represented by dicts like {'n': 1}. It also has two buttons - one adds a new dict and another one edits an existing dict. If you run this widget in a jupyter notebook and press the buttons a few times you will notice that only the "Add another number" button causes changes to the displayed array. The changes made by "Increment first number" button are remembered internally but the model change event for them doesn't fire. You will only see the incremented number once you add another one with the "Add" button. Value on the python side is also blind to item edits - same as the displayed array.

The difference between two buttons seems to be that one changes array length and the other one doesn't. So one workaround I've found is to set the value to an empty array right before setting it to the actual edited value - see the commented line in incrementButton's click handler. This probably makes it seem like array length changed so the change event fires for the edit and everything works as expected.

What I would like to discuss:

• Is solving this kind of syncing issues in scope for anywidget? So that I as a widget author don't have to think about workarounds.
• Which part of the underlying software is responsible for noticing the changes? I saw this problem even before migrating to anywidget so it must be somewhere deeper. Could it vary between different supported environments?..
• Is there perhaps a different approach to take with this kind of data that I haven't considered =)

import anywidget
import traitlets


class ListOfDictsWidget(anywidget.AnyWidget):
    _esm = """
    function render({ model, el }) {
      let value = () => model.get("value");
      
      let pre = document.createElement("pre");
      pre.innerHTML = value().map(x=>x.n).join(', ')
      model.on("change:value", () => {
        pre.innerHTML = value().map(x=>x.n).join(', ');
      });
      
      let incrementButton = document.createElement("button");
      incrementButton.innerHTML = 'Increment first number'
      incrementButton.addEventListener("click", () => {
        const a = [...value()]
        a[0].n += 1
        // model.set("value", []) // uncomment this so edits cause change events too
        model.set("value", a);
        model.save_changes();
      });
      
      let addButton = document.createElement("button");
      addButton.innerHTML = 'Add another number'
      addButton.addEventListener("click", () => {
        const a = [...value(), {n:1}]
        model.set("value", a);
        model.save_changes();
      });
      
      el.appendChild(pre)
      el.appendChild(incrementButton);
      el.appendChild(addButton);
    }
    export default { render };
    """
    _css = ""
    value = traitlets.List([{'n': 0}]).tag(sync=True)


w = ListOfDictsWidget()
w

[manzt]

Thanks for your patience in my response (working on my thesis these days). I think this is something that is baked into Backbone's API, which we inherited for initial compatibility.

Fortunately (and unfortunately) the anywidget API is narrower, which gives us more space to fix these things or make better behavior.... but it seems we currently lack the backbone APIs that allowed you to get around this previously.

I'd really like to avoid adding new backbone-based APIs/semantics and instead focus on better APIs that have the behavior that end users expect. I think we have the capabilities to cut ourselves away from this API, but it will take me a little time to think through and implement.

• feat(anywidget): Reduce Backbone dependency, implement minimal JS runtime over comm #479
• feat(anywidget): Drop ipywidgets dependency #579

These two PRs I have staged but just haven't had the time to push forward because I want to be very clear with messaging to the community and there will be subtle breaking changes for some advanced anywidget develoeprs.

For current wor arounds, I'll need to consider some alternatives and get back to you. I'm sorry I don't have a different answer right now!

[gereleth]

I think the current workaround for getting edits synced is well within the anywidget API:

model.set("value", [])
model.set("value", actual_edited_value)
model.save_changes()

I did use model.unset("value", {silent: true}) prior to the anywidget migration but setting to empty array instead and dropping the silent option seem to work just as well. I thought the silent option was necessary to prevent the empty value being observed on the python side. But nothing really changes if I drop it =).