Jupyter Notebook not handling properly .js elements in VS Code

Question

Some data/value representations are working as expected when using Jupyter Notebook "native" support in VSC, but it seems that JavaScripts elements are not properly represented or previewed.

When I try to get Map (gmaps) as a figure, in VS Code, as a result, I get Figure(layout=FigureLayout(height='420px')) whereas when I execute the same code block in Jupyter Notebook/Lab server inside of Chrome browser, I get the wanted output which tells me that my external setup should be Ok. I'm using jupyter-js-widgets and jupyter-gmaps extensions.

I have a feeling that I'm missing some additional configuration(s) in VS Code regarding JavaScripts.

My VS Code About:

My Jupyter Version

Thank you

Answer 1

Temporary solution was to add something like this:

# create html
from ipywidgets.embed import embed_minimal_html
embed_minimal_html('export.html', views=[fig], title = 'Gmap output')

which will take object "fig" and make it accessible through "export.html" page.

Thank you @Ian Huff for pointing to the issue :) Webview was mentioned in the issue, which could be coupled with the temp solution. But, I'm satisfied for now.

Answer 2

@MatejZ. Currently most widget based Jupyter extensions won't work in VSCode Notebook Editor and Interactive Window. However we are looking at add more support for this as it's a highly requested feature. If you want you can track our GitHub issue for this support (that we've already started to look into) here: https://github.com/microsoft/vscode-python/issues/3429