`gridspecLayout` example does not work with `ipywidgets=7.7.0`

[trungleduc]

Description

gridspecLayout.ipynb notebook does not work with voila=0.3.3 and ipywidgets=7.7.0. It works well in JupyterLab or with ipywidgets=7.6.5

• ipywidgets=7.6.5
  

• ipywidgets=7.7.0
  

Reproduce

1. Install ipywidgets=7.7.0 and voila=3.3.0
2. Start voila with the example folder
3. Go to voila/render/gridspecLayout.ipynb
4. See error

voila.js:488 Uncaught (in promise) Error: widget model not found
    at Qt.get_model (voila.js:488:81803)
    at q (voila.js:23:209508)
    at voila.js:23:209326
    at Array.forEach (<anonymous>)
    at Object.q [as deserialize] (voila.js:23:209296)
    at Function.t._deserialize_state (voila.js:23:214684)
    at Qt.<anonymous> (voila.js:23:203604)
    at voila.js:23:199970
    at Object.next (voila.js:23:200075)
    at a (voila.js:23:198813)

Expected behavior

Widget is rendered and no error is logged

Context

• voila version 0.3.3

Troubleshoot Output

Paste the output from running `jupyter troubleshoot` from the command line here.
You may want to sanitize the paths in the output.

Command Line Output

Paste the output from your command line running `voila` here, use `--debug` if possible.

Browser Output

Paste the output from your browser Javascript console here.

If using JupyterLab

• JupyterLab version:

Installed Labextensions

Paste the output from your command line running `jupyter labextension list`.

[trungleduc]

cc @martinRenou any idea about the bug?

[trungleduc]

It seems to be related to the new _build_models method using the control comm channel. The GridBoxModel model is created before its child so it causes the _deserialize_state call on its child model to fail.

Creating the comms separately from the models does make it work, but I'm not sure if it defeats the improvement of the control channel.

//manager.ts-L282

    // Start creating all widgets
    const comms: { [key: string]: base.IClassicComm } = {};
    for (const widget_id of Object.keys(states)) {
      try {
        comms[widget_id] = await this._create_comm('jupyter.widget', widget_id);
      } catch (error) {
        console.error(error);
      }
    }
    for (const [widget_id, state] of Object.entries(states) as any) {
      try {
        const comm = comms[widget_id];
        ...

[martinRenou]

We should look into ipywidgets's implementation of fetching widgets models and see if something differs there. I can do that for tomorrow if you want.

[trungleduc]

Thanks @martinRenou, that would be great!

[martinRenou]

I think we should make use of the _loadFromKernel method from the base manager, this should remove some code and will hopefully fix this issue.

[trungleduc]

indeed I think it should fix the issue, _loadFromKernel creates all comms before creating models.

[pidhiktuli]

@trungleduc With voila 0.3.4 and ipywidgets 7.7.0, I am facing still the same issue.

Only with voila 0.3.4 and ipywidgets 7.6.5 it works.

[martinRenou]

Would you be able to share a Notebook that reproduces this issue?