Unable to use widgets (itkwidgets) non-local (WSL 2, docker, remote-ssh) scenario (was: Configuration setting of widgetScriptSources does not work/unclear)

[pkuppens]

Environment data

• VS Code version: 1.52.0
• Jupyter Extension version (available under the Extensions sidebar): 2020.12.xxx
• Python Extension version (available under the Extensions sidebar): 2020.12.xxx
• OS (Windows | Mac | Linux distro) and version: Windows Subsystem for Linux 2 with Ubuntu 20.04 LTS
• Python and/or Anaconda version: 3.8.5
• Type of virtual environment used (N/A | venv | virtualenv | conda | ...): venv
• Jupyter server running: Local

Expected behaviour

I imported 'itkwidgets' to show an image

Actual behaviour

I get an error message:

Widgets require us to download supporting files from a 3rd party website. Click here to enable this or click here for more information. (Error loading itkwidgets:^0.32.0). Widgets require us to download supporting files from a 3rd party website. Click here to enable this or click here for more information. (Error loading itkwidgets:^0.32.0). Widgets require us to download supporting files from a 3rd party website. Click here to enable this or click here for more information. (Error loading itkwidgets:^0.32.0).

(Really, if you try 3 times, the error gets concatenated 3 times)

XXX

Steps to reproduce:

I submitted the same issue here, since I'm not sure whether it is an itkwidgets issue or a VSCode/Jupyter issue.

https://github.com/InsightSoftwareConsortium/itkwidgets/issues/396

I created this notebook that doesn't run in my configuration

import itk
from itkwidgets import view
from urllib.request import urlretrieve
import os

# Download data
file_name = '005_32months_T2_RegT1_Reg2Atlas_ManualBrainMask_Stripped.nrrd'
if not os.path.exists(file_name):
    url = 'https://data.kitware.com/api/v1/file/564a5b078d777f7522dbfaa6/download'
    urlretrieve(url, file_name)
image = itk.imread(file_name)
view(image, rotate=True, axes=True, vmin=4000, vmax=17000, gradient_opacity=0.9)

[NOTE: Self-contained, minimal reproducing code samples are extremely helpful and will expedite addressing your issue]

1. XXX

Logs

> ~/.venv/bin/python ~/.vscode-server/extensions/ms-toolsai.jupyter-2020.12.414227025/pythonFiles/pyvsc-run-isolated.py -c "import ipykernel"
> ~/.venv/bin/python ~/.vscode-server/extensions/ms-toolsai.jupyter-2020.12.414227025/pythonFiles/pyvsc-run-isolated.py vscode_datascience_helpers.daemon --daemon-module=vscode_datascience_helpers.kernel_launcher_daemon -v
Error 2020-12-17 08:52:47: Script source for Widget itkwidgets@^0.32.0 not found

Output for Jupyter in the Output panel (View→Output, change the drop-down the upper-right of the Output panel to Jupyter)

``` XXX ```

[joyceerhl]

Hi @pkuppens, just wanted to confirm that you are using the stable version of VSCode and not the insiders version of VSCode?

This is what I see when I run the code you provided:

What is the value of the "jupyter.widgetScriptSources" setting in your user settings.json? (You can access this by running Ctrl+Shift+P and typing in 'Open Settings (JSON)'.) If that setting is not present, could you try adding the following to your user settings.json and let me know if the issue persists?

"jupyter.widgetScriptSources": ["jsdelivr.com", "unpkg.com"],

[IanMatthewHuff]

@pkuppens Does this also happen when running outside of WSL2? Wondering if we don't download correctly when running in WSL2.

[pkuppens]

@joyceerhl , Inspired by your response, I continued investigation. I think I have the regular Visual Studio Code (1.52.1), but I do have an insiders Windows build.

However, I tried the same script in Windows itself, on both this PC with the Windows Insiders build, and a PC with a regular Windows version. Both these PCs show the same result as you have.

So I now think the problem is related to the Windows Subsystem for Linux (WSL2) backend I'm using. It's Ubuntu 20.04 LTS. (As @IanMatthewHuff also noted..)

I can open the json file like you said, but the setting is semi-grayed out..

[pkuppens]

@pkuppens Does this also happen when running outside of WSL2? Wondering if we don't download correctly when running in WSL2.

If I open the json settings with WSL2, I get the setting semi-gray, and an error hint:

'This setting cannot be applied in this window. It will be applied when you open local window.'

[pkuppens]

Hi @pkuppens, just wanted to confirm that you are using the stable version of VSCode and not the insiders version of VSCode?

This is what I see when I run the code you provided:

What is the value of the "jupyter.widgetScriptSources" setting in your user settings.json? (You can access this by running Ctrl+Shift+P and typing in 'Open Settings (JSON)'.) If that setting is not present, could you try adding the following to your user settings.json and let me know if the issue persists?

"jupyter.widgetScriptSources": ["jsdelivr.com", "unpkg.com"],

Indeed, works on regular Windows PCs, even with Windows Insider build. However not on WSL2 remote

[IanMatthewHuff]

Yeah, we will leave this open to investigate, but this might not be something that we currently support over WSL.

I'm not much of a WSL expert myself, and I'm currently on a Mac, but does WSL have specific settings restricting how it accesses the internet? Our widget download basically just boils down to making an http request to something that looks like this (just using react as an example) https://unpkg.com/react@16.7.0/umd/react.production.min.js. If you can do this from WSL then the current code should work.

[marckassay]

I'm using VS Code inside of a Docker container on WSL2 and running into this issue too (in addition to #4253 issue I found earlier today).

Version: 1.52.1 (user setup)
Commit: ea3859d4ba2f3e577a159bc91e3074c5d85c0523
Date: 2020-12-16T16:34:46.910Z
Electron: 9.3.5
Chrome: 83.0.4103.122
Node.js: 12.14.1
V8: 8.3.110.13-electron.0
OS: Windows_NT x64 10.0.19041

As @pkuppens mentioned about the setting being semi-gray, I also see this:

I assumed that .devcontainer/devcontainer.json settings, is mapped to remote VS Code .vscode/settings.json file. But is actually mapped here: /home/jovyan/.vscode-server/data/Machine/settings.json (jovyan being the username). See 'Container specific settings' section of the docs for more info if needed. However the settings in question, although not semi-gray in the path just mentioned, it didn't work for me until I copied-and-pasted it into the settings file here: /home/jovyan/.vscode/settings.json. It will still be semi-gray as previously mentioned, but I no longer receive the error messages listed in the 'Actual behaviour' section of this thread's opening post.

So my conclusion is that this setting is currently needed in both setting files.

And also, probably an issue can be open somewhere in VS Code ecosystem, the Settings (UI) mode:

... lists all 3 file locations as highlighted in image above. But in the Settings (Json) mode only 2 are listed:

I typically don't use the Settings (UI) mode, so I didn't initial see the 'Remote [Dev Container]' tab.

[joyceerhl]

@marckassay to be clear are you saying that your ipywidgets work when running in WSL as long as you put the jupyter.widgetScriptSources setting in the remote dev container's settings.json?

[marckassay]

@joyceerhl I haven't got that far yet. I'm updating my container's conda environment to include jupyter_bokeh since after attempting to run notebook and not receiving those error messages, it halts on that dependency. I've only noticed at the time of posting, that by having jupyter.widgetScriptSources in both setting files, I no longer received the error message: "Widgets require us to download supporting files from a 3rd party website. Click here to enable this or click here for more information ...". I can't recall if this error message referenced itkwidgets or some other widget(s) as @pkuppens posted.

[joyceerhl]

I can't upgrade to WSL2 but I can confirm that the sample notebook does not work for me in WSL1. There are a couple of issues here:

1. The first time I ran the cell, the extension correctly displayed a prompt asking me whether I wanted to enable fetching third party scripts from the jsdelivr / unpkg CDNs. However, this did not update my remote machine's settings.json. I suspect we are updating the local settings.json instead.
2. Even after manually configuring my remote settings by opening the command palette and typing 'Preferences: Open Remote Settings (WSL: )', I got the following info message for itkwidgets, pythreejs and beakerx. All three work on my local box outside of WSL:

In other words, fetching 3rd party widgets on WSL does not seem to work. Moving this bug back to new issues for triage discussion.

[joyceerhl]

@pkuppens, do you still see the same error if you open the command palette, type 'Preferences: Open Remote Settings', and add "jupyter.widgetScriptSources": ["jsdelivr.com", "unpkg.com"], to that settings file instead? I misspoke earlier when suggesting you run 'Open Settings (JSON)'. On WSL1 that doesn't seem to fix things for me due to the other error I described above, but I'm asking on the off chance that this is all that's required on WSL2.

[pkuppens]

@joyceerhl , after adding the remote setting, I get the "Unable to load a compatible version of the widget 'itkwidgets'" error.

So this problem is not fixed between WSL 1 and 2.

Thanks anyway, now I know this issue still has some attention.

[rchiodo]

On WSL2 for me, I get this error here:

This seems to be specific to itkwidgets as far as I can tell. The widget is loading another script from a directory that doesn't seem to exist.

[rchiodo]

Other widgets work for me in WSL2, only itkwidgets doesn't.

Additionally itkwidgets does work on my local windows machine.

Perhaps this is a bug in itkwidgets?

[joyceerhl]

@pkuppens, do you have any network connectivity in WSL 2? If not, I believe that this is happening because of https://github.com/microsoft/WSL/issues/5336.

[rchiodo]

With full logging, I can see this error:

Error 2021-01-07 16:09:34: Error downloading from CDN [Error: Parse Error: JS Exception
    at TLSSocket.socketOnData (_http_client.js:456:22)
    at TLSSocket.emit (events.js:223:5)
    at addChunk (_stream_readable.js:309:12)
    at readableAddChunk (_stream_readable.js:290:11)
    at TLSSocket.Readable.push (_stream_readable.js:224:10)
    at TLSWrap.onStreamRead (internal/stream_base_commons.js:181:23)] {
  bytesParsed: 3075993,
  code: 'HPE_JS_EXCEPTION',
  reason: 'JS Exception',
  rawPacket: <Buffer 6f 75 70 22 2c 66 75 6e 63 74 69 6f 6e 28 29 7b 72 65 74 75 72 6e 20 6c 6f 7d 29 2c 72 2e 64 28 74 2c 22 56 69 64 65 6f 54 65 78 74 75 72 65 22 2c 66 ... 1319 more bytes>
}

So it looks like the CDN is active but we can't parse the results.

[DonJayamanne]

@rchiodo looks like uou can replicate https://github.com/microsoft/vscode-jupyter/issues/1087#event-3990695027

[pkuppens]

By the way, I have submitted this issue to the creators of itkwidgets as well.

https://github.com/InsightSoftwareConsortium/itkwidgets/issues/396

Some preliminary findings there were on implicit requirements on nodejs, npm, webpack.

[greazer]

This has been getting entered as an issue by multiple customers. Let's take a look.

[bernardo-suez]

I'm facing the same issue when trying to use qgrid through a remote SSH connection to a Linux environment.

[oravus]

Hi all, the following might be relevant for someone trying to use matplotlib widget through VSCode's remote-ssh connection:

Include ForwardX11 yes in your ssh config as below:

Host <host>
  HostName <hostname>
  User <username>
  ForwardX11 yes

reconnected remote and tested as below:

%matplotlib widget

import matplotlib.pyplot as plt
import numpy as np

plt.imshow(np.ones([10,10]))
plt.show()

[DonJayamanne]

@oravus Thanks, Please could you create a separate issue, else users would get confused as this issue is specially dealing with itkwidgets. & your post would be very useful to others working with matplotlib or the like. Optionally you could post that in the discussions channel on this repo.

[DonJayamanne]

Update:

I've tried itkwidgets in WSL2 and this works without any issues for me. Either we've resolved this since as part of some re-factoring, or VS Code now downloads the js files correctly (we know there were a few issues in the past).

I.e. I don't see any issues anymore.

@pkuppens Are you still running into issues with this in the latest versions of VS Code and Jupyter extension?

[oravus]

thanks @DonJayamanne, put in discussion channel, shall remove it from here?

[DonJayamanne]

there's no need to remove it at all, we can just hide it. thank you very much for sharing the findings

[DonJayamanne]

Closing this issue as its been over 4 weeks, since the information was requested. We'll be happy to reopen the issue when the requested information has been provided.