State management for container widgets using React

[kylebarron]

Making this discussion topic to see if anyone has some ideas/best practices. In my anywidget-based widget, I currently have each map layer as its own self-contained widget subclassing from anywidget.AnyWidget. It would be nice if you could render multiple data layers on the same map. This in effect becomes a container widget, where the Map widget is just a container for multiple data layers that are themselves widgets (though maybe not DOMWidgets). See container discussion #293 and #194.

It's important in general with widgets to have accurate event notifications. If an attribute changes in Python, you want your JS side to be updated with that new attribute value. The core question is: how to manage state and event notifications on the sub widgets with React?

If we have a Python widget like:

class Map(anywidget.AnyWidget):
    _esm = bundler_output_dir / "index.js"

    layers = traitlets.List(trait=traitlets.Instance(BaseLayer)).tag(
        sync=True, **ipywidgets.widget_serialization
    )

then on the JS side we can use useModelState from @anywidget/react on the top-level Map widget, but when we do that on the "layers" key, we get an array of strings, each of which represents a sub-model. But then we need to call the async model.widget_manager.get_model to actually access the sub-model:

function App() {
  let model = useModel();
  let [childLayerIds] = useModelState<string[]>("layers");
  let [childModels, setChildModels] = useState<any[]>([]);

  useEffect(() => {
    const callback = async () => {
      const promises: Promise<any>[] = [];
      for (const childLayerId of childLayerIds) {
        promises.push(
          model.widget_manager.get_model(
            childLayerId.slice("IPY_MODEL_".length)
          )
        );
      }
      const _childModels = await Promise.all(promises);
      setChildModels(_childModels);
    };
    callback().catch(console.error);
  }, [...childLayerIds]);

The issue here is that childLayerIds does not change when a sub-model is mutated. That array of strings is constant unless you add another layer. So that useEffect pretty much only runs once.

You can't have a different number of hooks across render passes, so you can't do something like a local useLocalModelState on the sub models, because you'll have an unknown number of sub-models that could change.

Presumably I need some custom state solution. Maybe for now I should get by with just a single state object, where the first level is keyed by the model ID and the second level is keyed by all the state. But I'm wondering if people with more JS knowledge have some tips to share here.

[kylebarron]

I ended up solving this in developmentseed/lonboard#34. In particular, only the top-level model uses anywidget's useModelState, and all sub-model state is handled manually by adding callbacks onto the model's event handlers.