vpython / vpython-jupyter

3D visualization made easy
MIT License
138 stars 65 forks source link

For Jupyter Lab 3, Every cell output raises "Javascript Error" #194

Closed a3626a closed 2 years ago

a3626a commented 2 years ago

Environment A

Jupyter Lab 3.2.5 jupyterlab-vpthon 3.0.7(development version from https://github.com/jcoady/jupyterlab_vpython)

Environment B

Jupyter Lab 3.2.5 jupyterlab-vpython 3.1.1(installed via pip install jupyterlab-vpython)

Steps to Reproduce

In env A and B, executing following two cell raises "Javascript Error"

from vpython import *
box()
print("Hello, VPython!")

image

Additionally, exceptions are silently ignored and raise the "Javascript Error" image

Expected Behavior

texts and exceptions are expected to be printed like this : image

My Investigation

Even if I restart the kernel, the bug still exists. I guess something break my brower's javascript runtime. I must reload the brower tab to fix this.

glow.min.js is supected of causing this bug. Because right after import 'script-loader!../vpython_libraries/glow.min.js'; executed, the bug was occured.

jcoady commented 2 years ago

Someone left the following comment on a separate thread about this issue.

"a possible alternative to an iframe may be just to use an IIFE (web search for a JS IIFE) around https://github.com/jcoady/jupyterlab_vpython/blob/main/vpython_libraries/glow.min.js. It seems that this is declaring the Node type which is overwriting window.Node. window.Node should always refer to the browser's native Node type (https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType) but this extension is overwriting that."

In a jupyterlab notebook cell I executed the following code .

%%javascript console.log(window.Node)

which output the following in the javascript console.

ƒ Node() { [native code] }

then after I executed the following vpython code

from vpython import * box()

and then executed the javascript code in a cell.

%%javascript console.log(window.Node)

The output in the javascript console changed to

ƒ (p,t){this.point=p;this.triangle=t||null;this.next=null;this.prev=null;this.value=p.x} VM482:2

So it looks like window.Node is being changed by vpython javascript code. So yes it looks like vpython is overwriting window.Node .

a3626a commented 2 years ago

@jcoady Thank you for your reply!

This line is overwriting window.Node https://github.com/vpython/glowscript/blob/c65dabfa081f71750bbc4f80da7fc0cfa331980b/lib/opentype/poly2tri.js#L43-L68

image

In this commit, @BruceSherwood mentioned about "Jupyter Require Environment". At that time, it looks like poly2tri.Point() is not working in Jupyter environment. (And probably, poly2tri might not overwrite window.Node)

In Jupyter Lab 3, extension requirement environment looks like changed(I guess), and window.Node is affected. For Jupyter Lab 3, reverting this commit could be helpful.

a3626a commented 2 years ago

For proof of concept, I replaced every " Node" (with leading space) into " PolyNode"(poly from poly2tri) inside glow.min.js With this modification, the bug is fixed.

I tried to render text, because this poly2tri is related to text rendering feature. image

jcoady commented 2 years ago

@a3626a Thanks for investigating this issue. We incorporated your suggested fix and created a new jupyterlab_vpython extension version 3.1.3. You can go ahead and install the new extension which works in JupyterLab 3.2.x and vpython 7.6.3. You can uninstall the previous version and install the new version using pip uninstall jupyterlab_vpython pip install jupyterlab_vpython

I will now close this issue because it has been resolved.

jcoady commented 2 years ago

I will now close this issue because it has been resolved.