Usage under Thebe

[thijsmie]

Hi all!

I'm trying to embed a notebook I previously made directly into our website using the thebe project to request a kernel. Sadly, this breaks ipycanvas, raising the following JS errors:

default.js:66 Starting WebSocket: wss://hub.gke2.mybinder.org/user/thijsmie-cyclon--python-runtime-pab4fnm6/api/kernels/b9141aaf-391d-4bfc-acdb-f70939ff73fb
manager-base.js:274 Could not instantiate widget
(anonymous) @ manager-base.js:274
(anonymous) @ manager-base.js:45
(anonymous) @ manager-base.js:26
s @ manager-base.js:18
Promise.then (async)
c @ manager-base.js:19
(anonymous) @ manager-base.js:20
M @ manager-base.js:16
e._make_model @ manager-base.js:258
(anonymous) @ manager-base.js:247
(anonymous) @ manager-base.js:45
(anonymous) @ manager-base.js:26
(anonymous) @ manager-base.js:20
M @ manager-base.js:16
e.new_model @ manager-base.js:233
e.handle_comm_open @ manager-base.js:145
_handleCommOpen @ manager.js:63
_handleCommOpen @ default.js:1021
await in _handleCommOpen (async)
_handleMessage @ default.js:1189
await in _handleMessage (async)
(anonymous) @ default.js:110
Promise.then (async)
_onWSMessage @ default.js:107
utils.js:119 Error: Could not create a model.
    at utils.js:119:27
    at async _handleCommOpen (manager.js:62:51)
    at async g._handleCommOpen (default.js:1020:102)
    at async g._handleMessage (default.js:1188:30)
(anonymous) @ utils.js:119
Promise.catch (async)
e.handle_comm_open @ manager-base.js:150
_handleCommOpen @ manager.js:63
_handleCommOpen @ default.js:1021
await in _handleCommOpen (async)
_handleMessage @ default.js:1189
await in _handleMessage (async)
(anonymous) @ default.js:110
Promise.then (async)
_onWSMessage @ default.js:107
default.js:1027 Exception opening new comm
_handleCommOpen @ default.js:1027
await in _handleCommOpen (async)
_handleMessage @ default.js:1189
await in _handleMessage (async)
(anonymous) @ default.js:110
Promise.then (async)
_onWSMessage @ default.js:107
manager.js:73 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'CanvasManagerModel')
    at manager.js:73:21
(anonymous) @ manager.js:73
Promise.then (async)
e.register_model @ manager-base.js:209
register_model @ manager.js:383
(anonymous) @ manager-base.js:249
(anonymous) @ manager-base.js:45
(anonymous) @ manager-base.js:26
(anonymous) @ manager-base.js:20
M @ manager-base.js:16
e.new_model @ manager-base.js:233
e.handle_comm_open @ manager-base.js:145
_handleCommOpen @ manager.js:63
_handleCommOpen @ default.js:1021
await in _handleCommOpen (async)
_handleMessage @ default.js:1189
await in _handleMessage (async)
(anonymous) @ default.js:110
Promise.then (async)
_onWSMessage @ default.js:107
manager.js:73 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'CanvasManagerModel')
    at manager.js:73:21
(anonymous) @ manager.js:73
Promise.then (async)
register_model @ manager.js:385
(anonymous) @ manager-base.js:249
(anonymous) @ manager-base.js:45
(anonymous) @ manager-base.js:26
(anonymous) @ manager-base.js:20
M @ manager-base.js:16
e.new_model @ manager-base.js:233
e.handle_comm_open @ manager-base.js:145
_handleCommOpen @ manager.js:63
_handleCommOpen @ default.js:1021
await in _handleCommOpen (async)
_handleMessage @ default.js:1189
await in _handleMessage (async)
(anonymous) @ default.js:110
Promise.then (async)
_onWSMessage @ default.js:107
manager-base.js:274 Could not instantiate widget
(anonymous) @ manager-base.js:274
(anonymous) @ manager-base.js:45
(anonymous) @ manager-base.js:26
s @ manager-base.js:18
Promise.then (async)
c @ manager-base.js:19
(anonymous) @ manager-base.js:20
M @ manager-base.js:16
e._make_model @ manager-base.js:258
(anonymous) @ manager-base.js:247
(anonymous) @ manager-base.js:45
(anonymous) @ manager-base.js:26
(anonymous) @ manager-base.js:20
M @ manager-base.js:16
e.new_model @ manager-base.js:233
e.handle_comm_open @ manager-base.js:145
_handleCommOpen @ manager.js:63
_handleCommOpen @ default.js:1021
await in _handleCommOpen (async)
_handleMessage @ default.js:1189
await in _handleMessage (async)
(anonymous) @ default.js:110
Promise.then (async)
_onWSMessage @ default.js:107
utils.js:119 Error: Could not create a model.
    at utils.js:119:27
    at async _handleCommOpen (manager.js:62:51)
    at async g._handleCommOpen (default.js:1020:102)
    at async g._handleMessage (default.js:1188:30)
(anonymous) @ utils.js:119
Promise.catch (async)
e.handle_comm_open @ manager-base.js:150
_handleCommOpen @ manager.js:63
_handleCommOpen @ default.js:1021
await in _handleCommOpen (async)
_handleMessage @ default.js:1189
await in _handleMessage (async)
(anonymous) @ default.js:110
Promise.then (async)
_onWSMessage @ default.js:107
default.js:1027 Exception opening new comm
_handleCommOpen @ default.js:1027
await in _handleCommOpen (async)
_handleMessage @ default.js:1189
await in _handleMessage (async)
(anonymous) @ default.js:110
Promise.then (async)
_onWSMessage @ default.js:107
manager.js:73 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'RoughCanvasModel')
    at manager.js:73:21
(anonymous) @ manager.js:73
Promise.then (async)
e.register_model @ manager-base.js:209
register_model @ manager.js:383
(anonymous) @ manager-base.js:249
(anonymous) @ manager-base.js:45
(anonymous) @ manager-base.js:26
(anonymous) @ manager-base.js:20
M @ manager-base.js:16
e.new_model @ manager-base.js:233
e.handle_comm_open @ manager-base.js:145
_handleCommOpen @ manager.js:63
_handleCommOpen @ default.js:1021
await in _handleCommOpen (async)
_handleMessage @ default.js:1189
await in _handleMessage (async)
(anonymous) @ default.js:110
Promise.then (async)
_onWSMessage @ default.js:107
manager.js:73 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'RoughCanvasModel')
    at manager.js:73:21
(anonymous) @ manager.js:73
Promise.then (async)
register_model @ manager.js:385
(anonymous) @ manager-base.js:249
(anonymous) @ manager-base.js:45
(anonymous) @ manager-base.js:26
(anonymous) @ manager-base.js:20
M @ manager-base.js:16
e.new_model @ manager-base.js:233
e.handle_comm_open @ manager-base.js:145
_handleCommOpen @ manager.js:63
_handleCommOpen @ default.js:1021
await in _handleCommOpen (async)
_handleMessage @ default.js:1189
await in _handleMessage (async)
(anonymous) @ default.js:110
Promise.then (async)
_onWSMessage @ default.js:107
require.min.js:1          GET http://localhost:8000/content/guides/ipycanvas.js net::ERR_ABORTED 404 (File not found)
req.load @ require.min.js:1
load @ require.min.js:1
load @ require.min.js:1
fetch @ require.min.js:1
check @ require.min.js:1
enable @ require.min.js:1
enable @ require.min.js:1
(anonymous) @ require.min.js:1
(anonymous) @ require.min.js:1
each @ require.min.js:1
enable @ require.min.js:1
init @ require.min.js:1
(anonymous) @ require.min.js:1
setTimeout (async)
req.nextTick @ require.min.js:1
o @ require.min.js:1
requirejs @ require.min.js:1
(anonymous) @ libembed-amd.js:22
Ze @ libembed-amd.js:16
Xe @ libembed-amd.js:57
(anonymous) @ manager.js:72
f @ runtime.js:62
(anonymous) @ runtime.js:296
forEach.e.<computed> @ runtime.js:114
lt @ manager.js:5
a @ manager.js:7
(anonymous) @ manager.js:7
(anonymous) @ manager.js:7
loadClass @ manager.js:59
(anonymous) @ manager-base.js:264
(anonymous) @ manager-base.js:45
(anonymous) @ manager-base.js:26
(anonymous) @ manager-base.js:20
M @ manager-base.js:16
e._make_model @ manager-base.js:258
(anonymous) @ manager-base.js:247
(anonymous) @ manager-base.js:45
(anonymous) @ manager-base.js:26
(anonymous) @ manager-base.js:20
M @ manager-base.js:16
e.new_model @ manager-base.js:233
e.handle_comm_open @ manager-base.js:145
_handleCommOpen @ manager.js:63
_handleCommOpen @ default.js:1021
await in _handleCommOpen (async)
_handleMessage @ default.js:1189
await in _handleMessage (async)
(anonymous) @ default.js:110
Promise.then (async)
_onWSMessage @ default.js:107
libembed-amd.js:60 Falling back to https://unpkg.com/ for ipycanvas@^0.12
utils.js:119 Error: Could not create a model.
    at utils.js:119:27
    at async _handleCommOpen (manager.js:62:51)
    at async g._handleCommOpen (default.js:1020:102)
    at async g._handleMessage (default.js:1188:30)
(anonymous) @ utils.js:119
Promise.catch (async)
e.handle_comm_open @ manager-base.js:150
_handleCommOpen @ manager.js:63
_handleCommOpen @ default.js:1021
await in _handleCommOpen (async)
_handleMessage @ default.js:1189
await in _handleMessage (async)
(anonymous) @ default.js:110
Promise.then (async)
_onWSMessage @ default.js:107
default.js:1027 Exception opening new comm
_handleCommOpen @ default.js:1027
await in _handleCommOpen (async)
_handleMessage @ default.js:1189
await in _handleMessage (async)
(anonymous) @ default.js:110
Promise.then (async)
_onWSMessage @ default.js:107
output_renderers.js:21 Error displaying widget
output_renderers.js:22 TypeError: Cannot read properties of undefined (reading 'RoughCanvasModel')
    at manager.js:73:21
manager.js:73 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'RoughCanvasModel')
    at manager.js:73:21
(anonymous) @ manager.js:73
Promise.then (async)
e.register_model @ manager-base.js:209
register_model @ manager.js:383
(anonymous) @ manager-base.js:249
(anonymous) @ manager-base.js:45
(anonymous) @ manager-base.js:26
(anonymous) @ manager-base.js:20
M @ manager-base.js:16
e.new_model @ manager-base.js:233
e.handle_comm_open @ manager-base.js:145
_handleCommOpen @ manager.js:63
_handleCommOpen @ default.js:1021
await in _handleCommOpen (async)
_handleMessage @ default.js:1189
await in _handleMessage (async)
(anonymous) @ default.js:110
Promise.then (async)
_onWSMessage @ default.js:107
manager.js:73 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'RoughCanvasModel')
    at manager.js:73:21
(anonymous) @ manager.js:73
Promise.then (async)
register_model @ manager.js:385
(anonymous) @ manager-base.js:249
(anonymous) @ manager-base.js:45
(anonymous) @ manager-base.js:26
(anonymous) @ manager-base.js:20
M @ manager-base.js:16
e.new_model @ manager-base.js:233
e.handle_comm_open @ manager-base.js:145
_handleCommOpen @ manager.js:63
_handleCommOpen @ default.js:1021
await in _handleCommOpen (async)
_handleMessage @ default.js:1189
await in _handleMessage (async)
(anonymous) @ default.js:110
Promise.then (async)
_onWSMessage @ default.js:107
DevTools failed to load source map: Could not load content for https://unpkg.com/ipycanvas@%5E0.12/dist/index.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

Since there are examples of jupyter extensions working with Thebe (bqplot, ipyleaflet, ipyympl, plotly, ipycytoscape, pythreejs, ipywidgets) I am assuming it is possible to get ipycanvas to work too. I don't know what the work involved will entail, but happy to help out where I can.

[thijsmie]

Hi @martinRenou sorry to ping you, but any ideas about what is going on? I would be happy to try to fix it myself and submit a PR but I don't know where to start looking for the issue.

[martinRenou]

Would you be able to say if it was working prior to 0.12.0?

I suspect this is the same issue that prevents ipycanvas to work in Colab since 0.12.0.

The 0.12.0 adds a new CanvasManager widget which "manages" all canvases communications, I suspect this Manager is not created in the page by Colab and Thebe because it is not displayed in any way.

I think 0.12.1 should add the global CanvasManager object as part of all canvases models so that it ensures those front-ends create the manager.

manager = Instance(_CanvasManager, default_value=_CANVAS_MANAGER).tag(sync=True)

I will try to find time in the coming weeks to resolve this (this is on my todo list already). I can also guide you with a PR if you want :)

[thijsmie]

Yup, I think from what I am seeing your hunch is correct. If you already have a plan and a todo item for yourself I'll leave it in your capable hands and wait for the 0.12.1 release 😄. Thanks!