Did the recent upgrade of ipywidgets (7.7.1->8.0.1) change the CDN-service for custom widgets?

[audunsh]

Thanks you for the innovative and very useful work you are doing with the ipywidgets-framework.

I'm prototyping a piece of visualization software built from the widget-cookiecutter and threejs. I've been testing mainly in notebooks and html-embedding.

Recently, I updated ipywidgets from 7.7.1 to 8.0.1, which seems to have broken the html-embed option. On 8.0.1 it still runs nicely in the Notebook, but when either doing "embed_minimal_html", nbconvert to html, or (from the menu in the Notebook-environment) "embed widget state", no view is shown in the resulting html.

I'm fairly new to Javascript, so I'm still struggling to debug properly, but the console (on Chrome, 104.0.5112.101 ) reports that it is "Falling back to https://cdn.jsdelivr.net/npm/" to fetch my embedded model. It then complains that "embed-amd.js:16 TypeError: o._deserialize_state is not a function at xc._make_model (embed-amd.js:16:581882)". I cannot find any other reference to this error-message using google or browsing the documentation.

However, when downgrading ipywidgets to 7.7.1, my custom widgets works as intended. From my console, I can then read that it is "falling back to https://unpkg.com/ " for my embedded model, and it shows up on screen.

In my webpack.config.js-file, it explicitly says

entry: './lib/embed.js',
            output: {
                filename: 'index.js',
                path: path.resolve(__dirname, 'dist'),
                libraryTarget: 'amd',
                publicPath: 'https://unpkg.com/evince@' + version + '/dist/'
            },

which I understand to be the CDN-service from which to request the model.

My question is then, has there been made some changes recently which could affect this behaviour (changing from unpkg.com to cdn.jsdelivr.net), or is there something else I'm missing here?

Best regards,
Audun

My setup:

{'commit_hash': '4396dd620',
 'commit_source': 'installation',
 'default_encoding': 'utf-8',
 'ipython_path': '/usr/local/lib/python3.10/site-packages/IPython',
 'ipython_version': '8.4.0',
 'os_name': 'posix',
 'platform': 'macOS-12.3.1-x86_64-i386-64bit',
 'sys_executable': '/usr/local/opt/python@3.10/bin/python3.10',
 'sys_platform': 'darwin',
 'sys_version': '3.10.6 (main, Aug 11 2022, 13:49:25) [Clang 13.1.6 '
                '(clang-1316.0.21.2.5)]'}

[jasongrout]

Can you post a minimal example so we can reproduce the problem? It sounds like you are already publishing your package to npm, so posting an example html file might be sufficient.

[jasongrout]

The cookiecutter was just recently updated to support ipywidgets 7 and 8. The migration guide for custom widget authors is at https://ipywidgets.readthedocs.io/en/stable/migration_guides.html. However, if you didn't customize the cookiecutter too much, if I were you, I'd probably just generate a new widget from the current cookiecutter (which supports widgets 7 and 8) and then apply your changes to it. The reason I would do this is because there have been quite a few recent changes in the cookiecutter to update it to modern best practices (like better python packaging practices, better publicPath setting so we aren't hardcoding unpkg or jsdelivr, etc.)

[audunsh]

Thanks for the quick reply! I'm afraid a minimal example is a little cumbersome to set up, since the module (https://pypi.org/project/evince) runs as support in the back of several other modules (for instance https://pypi.org/project/BraketLab/), but I'll see what I can do.

Anyway thank you for the suggestions, I'll re-generate the module with the recent cookiecutter and post an update when done.

[audunsh]

I re-generated the module using the latest cookiecutter-template and updated my github-repository (https://github.com/audunsh/evince), the npmjs-package (https://www.npmjs.com/package/evince) and the PyPI package (https://pypi.org/project/evince/) accordingly.

However, I still get the same broken behavior for the embedded version, with the console in Chrome reporting that

Falling back to https://cdn.jsdelivr.net/npm/ for evince@^0.30.0

embed-amd.js:16 TypeError: o._deserialize_state is not a function
    at xc._make_model (embed-amd.js:16:581882)

A minimal example to reproduce the behaviour:

1. From a Jupyter Notebook, execute !pip install braketlab==1.66
2. In the next cell, run

import braketlab as bk
bk.basisbank.get_harmonic_oscillator_function(2).view(web = True)

(a wiggly, bird-like shape will appear)
3. Export the widget using either the native drop-down options, embed_minimal_html or nbconvert from the terminal.

Again, I'm fairly new to Javascript so the error could be due to some misunderstanding on my side.

Best regards, Audun

[audunsh]

An example html:

<html><head>


    <!-- Load require.js. Delete this if your page already loads require.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js" integrity="sha256-Ae2Vz/4ePdIu6ZyI/5ZGsYnb+m0JlOmKPjt6XZ9JJkA=" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/@jupyter-widgets/html-manager@*/dist/embed-amd.js" crossorigin="anonymous"></script>
    <script type="application/vnd.jupyter.widget-state+json">
    {
        "version_major": 2,
        "version_minor": 0,
        "state": {
            "1b9cfec330ce470981090d2ec96efe7c": {
                "model_name": "LayoutModel",
                "model_module": "@jupyter-widgets/base",
                "model_module_version": "1.2.0",
                "state": {}
            },
            "11d8e442a99847f2bf3754f5021ab395": {
                "model_name": "BraketModel",
                "model_module": "evince",
                "model_module_version": "^0.30.0",
                "state": {
                    "_model_module_version": "^0.30.0",
                    "_view_module_version": "^0.30.0",
                    "additive": true,
                    "ao": [
                        1
                    ],
                    "bg_color": [
                        0,
                        0,
                        0
                    ],
                    "fragment_shader": "uniform vec3 user_color;\nuniform float time;\n\nvarying vec2 vUv;\nvarying vec3 pos;\nvarying vec3 tex;\nvarying float q;\nvarying float csI;\nvarying float csR;\nvarying float cs0;\nvarying float cs;\n\nvoid main() {\n\n    vec2 p = vUv;\n    float q = tex[0]*tex[0] +tex[1]*tex[1] +tex[2]*tex[2] ;\n    float cs0 = (-2.2082371339486411*pow(tex[0], 2.0)*tex[2] - 2.2082371339486411*pow(tex[1], 2.0)*tex[2] + 1.4721580892990942*pow(tex[2], 3.0))*exp(-1.0*q);\n    float csI = 0.0 ;\n    float csR = cs0 ;\n    gl_FragColor = gl_FragColor + vec4(csR, csI, -1.0*csR, .1);\n}",
                    "layout": "IPY_MODEL_1b9cfec330ce470981090d2ec96efe7c",
                    "pos": [],
                    "surf": [],
                    "surface_view": false
                }
            },
            "09b8c1431095462fb1df645701cebfd6": {
                "model_name": "LayoutModel",
                "model_module": "@jupyter-widgets/base",
                "model_module_version": "1.2.0",
                "state": {}
            },
            "78246975e2e0484e8a6da4a8685b41c7": {
                "model_name": "BraketModel",
                "model_module": "evince",
                "model_module_version": "^0.30.0",
                "state": {
                    "_model_module_version": "^0.30.0",
                    "_view_module_version": "^0.30.0",
                    "additive": true,
                    "ao": [
                        1
                    ],
                    "bg_color": [
                        0,
                        0,
                        0
                    ],
                    "fragment_shader": "uniform vec3 user_color;\nuniform float time;\n\nvarying vec2 vUv;\nvarying vec3 pos;\nvarying vec3 tex;\nvarying float q;\nvarying float csI;\nvarying float csR;\nvarying float cs0;\nvarying float cs;\n\nvoid main() {\n\n    vec2 p = vUv;\n    float q = tex[0]*tex[0] ;\n    float cs0 = (1.0622519320271968*q - 0.53112596601359841)*exp(-1.0/2.0*q);\n    float csI = -1.0*cs0*sin(2.500000*time) ;\n    float csR = cs0*cos(2.500000*time) ;\n    csR = smoothstep(0.9*tex[1], tex[1], csR);\n    csI = smoothstep(0.9*tex[1], tex[1], csI);\n    gl_FragColor = gl_FragColor + vec4(csR, csI, -1.0*csR, 1);\n}",
                    "layout": "IPY_MODEL_09b8c1431095462fb1df645701cebfd6",
                    "pos": [],
                    "surf": [],
                    "surface_view": true
                }
            },
            "7362e95a8ef94e6b8e6488c30ffbe501": {
                "model_name": "LayoutModel",
                "model_module": "@jupyter-widgets/base",
                "model_module_version": "1.2.0",
                "state": {}
            },
            "092f4e678ded4d3b909f95d2717a6a03": {
                "model_name": "BraketModel",
                "model_module": "evince",
                "model_module_version": "^0.30.0",
                "state": {
                    "_model_module_version": "^0.30.0",
                    "_view_module_version": "^0.30.0",
                    "additive": false,
                    "ao": [
                        1
                    ],
                    "bg_color": [
                        1,
                        1,
                        1
                    ],
                    "fragment_shader": "uniform vec3 user_color;\nuniform float time;\n\nvarying vec2 vUv;\nvarying vec3 pos;\nvarying vec3 tex;\nvarying float q;\nvarying float csI;\nvarying float csR;\nvarying float cs0;\nvarying float cs;\n\nvoid main() {\n\n    vec2 p = vUv;\n    float q = tex[0]*tex[0] ;\n    float cs0 = (1.0622519320271968*q - 0.53112596601359841)*exp(-1.0/2.0*q);\n    float csI = -1.0*cs0*sin(2.500000*time) ;\n    float csR = cs0*cos(2.500000*time) ;\n    csR = smoothstep(0.9*tex[1], tex[1], csR);\n    csI = smoothstep(0.9*tex[1], tex[1], csI);\n    gl_FragColor = gl_FragColor + vec4(csR + .06*csI, csR + .1*csI, .7*csR + .5*csI, 1.0);\n}",
                    "layout": "IPY_MODEL_7362e95a8ef94e6b8e6488c30ffbe501",
                    "pos": [],
                    "surf": [],
                    "surface_view": true
                }
            }
        }
    }
    </script>
    </head>
    <body>
    
    <script type="application/vnd.jupyter.widget-view+json">
    {
        "version_major": 2,
        "version_minor": 0,
        "model_id": "092f4e678ded4d3b909f95d2717a6a03"
    }
    </script>
    
    </body>
    </html>

[jasongrout]

Thanks for the reproduction. I looked into this, and it appears that you still need to migrate your code to be compatible with ipywidgets 8. In particular, see https://ipywidgets.readthedocs.io/en/stable/migration_guides.html#backbone-extend - evince is still using the .extend method at https://github.com/audunsh/evince/blob/262b1991ffa3e9905ae5f128409d3349c129238e/js/lib/braketview.js#L1313 and https://github.com/audunsh/evince/blob/262b1991ffa3e9905ae5f128409d3349c129238e/js/lib/braketview.js#L1329

[jasongrout]

Note that you'll also need to give your model attribute defaults in a function as well, similar to how the output widget does it: https://github.com/jupyter-widgets/ipywidgets/blob/8.0.0/packages/output/src/output.ts

I've documented how to migrate the widget defaults over in #3582

[audunsh]

Thank you! Just one quick follow-up: does this mean that the current js widget cookiecutter ( commit 6134771, https://github.com/jupyter-widgets/widget-cookiecutter ) is incompatible with ipywidgets 8.0.1, so I should base my work on the ts-cookiecutter (https://github.com/jupyter-widgets/widget-ts-cookiecutter) instead?

All best, Audun

[jasongrout]

Ah, you're right! https://github.com/jupyter-widgets/widget-cookiecutter/blob/6134771c6f2d7c275b186ff0cc00839be8d067b6/%7B%7Bcookiecutter.github_project_name%7D%7D/js/lib/example.js does indeed have the old way of doing it! Thanks for pointing this out.

I'll make a PR to update that part of the cookiecutter.

I'd still suggest using the js cookiecutter. The ts cookiecutter is more out of date than the js cookiecutter with respect to ipywidgets 8.