Scripts sources related to custom IPyWidgets not loaded

[dentistfrankchen]

Recently i am trying to custom widget that contains javascript using ipywidget.However my project does not render the result as a jupyter notebook does. My widget cannot be displayed.

[dentistfrankchen]

QuoteWidget.txt

This is the my project(a ipynb file).Since i cannot upload it due to limit of github, i changed it to txt.

[amunger]

thanks for the repro example. Confirmed that the output is blank in vscode.

[dentistfrankchen]

Today I tried much more simple code:
“
%%html

font> size=6 color='blue'>Hello Jupyter /font>

<script> document.write("Hello World!") </script>

“
Also blank.
If i delete the <script>part, the display is ok.
Is there some problem with rendering javascript(or %%javascript)？

[dentistfrankchen]

Any relation with #6054?

[rchiodo]

VS code doesn't render your output in the same DOM as the rest of the notebook. Output is in its own iframe. The javascript you have there destroys the DOM of the iframe so that it has just 'hello world' in it, making the rendering logic for the rest of the output broken.

The DOM that jupyter has is not intended to be the same as the DOM we have in VS code. There's no way it would ever be, so you'll have to be careful what you do in your script code.

You might look at what standard widgets do (if you're working on a widget). Loading a script straight into an output is not really the recommended way to get a script to load. The script will fail to run the next time you execute the cell.

[dentistfrankchen]

@rchiodo Thanks for your reply. I am new to using jupyter in vscode. Can you give me an example of correctly using %%javascript in jupyter-vscode?
(I am trying to write js as frontend, and python as backend.)

[rchiodo]

%%javascript doesn't really work in VS code. We don't support all of the implicit properties that are available in a jupyter notebook.

However you could follow the directions here if you want a python backend:
https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Custom.html

IPyWidgets do work in VS code.

[dentistfrankchen]

I read that documentation. However i think it requires me to write my project as a package? Can i do everything in a single ipynb?
Besides, why %%html works in vscode?
Also I tried display(javascript...) works on notebook, but not vscode.

[rchiodo]

Can i do everything in a single ipynb?

Possibly but it would be extremely difficult. It'd be much easier to write a python module with the js files on disk.

[dentistfrankchen]

@rchiodo Today I ran the example provided by https://github.com/jupyter-widgets/widget-ts-cookiecutter (which is the way recommended by the website you suggested me to visit--https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Custom.html). I wrapped the example(I did not add any code) in a package as instructed, and it worked in jupyter notebook in edge. However, for vscode it is still blank.
Edge:

VScode:

So I think the problem might be the internal mechanism vscode communicate with jupyter...(not problem with %%javascript)

[DonJayamanne]

@dentistfrankchen thanks for providing the detailed explanation and code sample, I have come across a similar issue recently and have a fix for this, it is infact similar to other widget issues where we don't load the resources correctly.

[dentistfrankchen]

@DonJayamanne I appreciate your reply and thank you for your contribution for this project, which helps thousands of people who are doing data mining like me. I am still waiting to see the problem getting solved, since I need to wait for the next version of extension to release. Keep contact.

[DonJayamanne]

@dentistfrankchen
This should work in tomorrows pre-release version of the Jupyter extension (you'll need VS Code insiders and then install the pre-release version of Jupyter extesnion).

Also, if you want to generate some HTML or run some JS I'd try the following:

%%html
<div id="myCustomEle">Hello</div>
<script type="application/javascript">
	document.getElementById("myCustomEle").innerHTML = "Hello World"
</script>

Even though the sample your provided might seem to work in Jupyter, that completely breaks the UI. Hence its not really a valid use case of such code. I'd change to as provided above.

<script> document.write("Hello World!") </script>

Another sample is to run two cells:

# First cell
%%html
<div id="myCustomEle">Hello</div>

# Second cell
%%javascript
document.getElementById("myCustomEle").innerHTML = "Hello World"

[DonJayamanne]

Closing this issue as fixed, as part of #10459

[aeschli]

I verified that

%%html
<div id="myCustomEle">Hello</div>
<script type="application/javascript">
	document.getElementById("myCustomEle").innerHTML = "Hello World"
</script>

works

# First cell
%%html
<div id="myCustomEle">Hello</div>

returns with error

  Input In [1]
    <div id="myCustomEle">Hello</div>
    ^
SyntaxError: invalid syntax

or sometimes runs forever.

# Second cell
%%javascript
document.getElementById("myCustomEle").innerHTML = "Hello World"

returns error
UsageError: Line magic function%%javascript` not found.
``
Jupyter v2022.6.1001831043
Python v2022.9.11811011

Marking as verified, @DonJayamanne please check if the other errors are expected