Generated images don't display due to an extra space in URL

[nalzok]

Description

I am running the file 0_demo.ipynb from freechipsproject /
chisel-bootcamp, which uses the Scala kernel. The problems is that generated images cannot display correctly. For example:

Inspect Element gives the following HTML output

<img src="http://localhost:8888/files/%20build/MovingAverage368251718.dot.svg?_xsrf=2%7Cb4c0efbf%7C0f080edcfcae8c04d70c24d5ae5b69a7%7C1590588518&amp;1590637312836" alt="Module View" ;"="">

Apparently the path files/build is mistyped as files/%20build. The bug doesn't manifest itself when I use Jupyter Notebook. I'm not sure if it's a bug of Jupyter Lab or this repository.

This issue is cross-posted at chisel-bootcamp.

Reproduce

Follow the Local Setup Instructions of chisel-bootcamp. I am on macOS.

Expected behavior

I can see the generated images.

Context

• Operating System and version: macOS 10.14
• Browser and version: Firefox 76.0.1
• JupyterLab version: 2.1.3

Troubleshoot Output

$PATH:
	/Users/nalzok/opt/miniconda3/envs/FPGA/bin
	/Users/nalzok/opt/miniconda3/condabin
	/Users/nalzok/bin
	/opt/local/sbin
	/opt/local/bin
	/Users/nalzok/opt/fasm/bin
	/Users/nalzok/opt/xPacks/riscv-none-embed-gcc/8.3.0-1.1/bin
	/Users/nalzok/opt/xPacks/arm-none-eabi-gcc/9.2.1-1.1/bin
	/Users/nalzok/.sdkman/candidates/sbt/current/bin
	/Users/nalzok/opt/dfu-util/bin
	/Users/nalzok/opt/c2-community
	/Users/nalzok/opt/bettercap
	/Users/nalzok/.emacs.d/bin
	/Applications/MacPorts/EmacsMac.app/Contents/MacOS
	/usr/local/bin
	/usr/bin
	/bin
	/usr/sbin
	/sbin
	/opt/X11/bin
	/Applications/VMware Fusion.app/Contents/Public
	/usr/local/plan9/bin
sys.path:

/Users/nalzok/opt/miniconda3/envs/FPGA/bin

/Users/nalzok/opt/miniconda3/envs/FPGA/lib/python38.zip

/Users/nalzok/opt/miniconda3/envs/FPGA/lib/python3.8

/Users/nalzok/opt/miniconda3/envs/FPGA/lib/python3.8/lib-dynload

/Users/nalzok/.local/lib/python3.8/site-packages

/Users/nalzok/opt/miniconda3/envs/FPGA/lib/python3.8/site-packages
sys.executable:

/Users/nalzok/opt/miniconda3/envs/FPGA/bin/python
sys.version:

3.8.2 (default, Mar 26 2020, 10:43:30)

[Clang 4.0.1 (tags/RELEASE_401/final)]
platform.platform():

macOS-10.14.6-x86_64-i386-64bit
which -a jupyter:

/Users/nalzok/opt/miniconda3/envs/FPGA/bin/jupyter
pip list:

Package            Version

------------------ -------------------

appnope            0.1.0

asn1crypto         1.3.0

attrs              19.3.0

backcall           0.1.0

bleach             3.1.4

bottle             0.12.18

certifi            2020.4.5.1

cffi               1.14.0

chardet            3.0.4

colorama           0.4.3

conan              1.24.1

cryptography       2.9.2

decorator          4.4.2

defusedxml         0.6.0

deprecation        2.0.7

distro             1.1.0

edalize            0.2.0

entrypoints        0.3

fasteners          0.15

fusesoc            1.10

future             0.18.2

icdiff             1.9.1

idna               2.9

importlib-metadata 1.6.0

intelhex           2.2.1

ipykernel          5.1.4

ipython            7.13.0

ipython-genutils   0.2.0

ipyxact            0.2.4

jedi               0.17.0

Jinja2             2.11.2

json5              0.9.4

jsonmerge          1.7.0

jsonschema         3.2.0

jupyter-client     6.1.3

jupyter-core       4.6.3

jupyterlab         2.1.3

jupyterlab-server  1.1.4

MarkupSafe         1.1.1

mistune            0.8.4

monotonic          1.5

more-itertools     8.2.0

msgpack-python     0.5.6

nbconvert          5.6.1

nbformat           5.0.6

node-semver        0.6.1

notebook           6.0.3

okonomiyaki        1.2.0

packaging          20.3

pandocfilters      1.4.2

parso              0.7.0

patch-ng           1.17.4

pexpect            4.8.0

pickleshare        0.7.5

pip                20.0.2

pluggy             0.13.1

pluginbase         0.7

prometheus-client  0.7.1

prompt-toolkit     3.0.4

ptyprocess         0.6.0

py                 1.8.1

pycparser          2.20

Pygments           2.6.1

PyJWT              1.7.1

pyOpenSSL          19.1.0

pyparsing          2.4.6

pyrsistent         0.16.0

pyserial           3.4

PySocks            1.7.1

pytest             5.4.1

python-dateutil    2.8.1

pyusb              1.0.2

PyYAML             5.3.1

pyzmq              18.1.1

requests           2.23.0

Send2Trash         1.5.0

setuptools         46.1.1.post20200323

simplesat          0.8.2

six                1.14.0

terminado          0.8.3

testpath           0.4.4

tinyprog           1.0.21

tornado            6.0.4

tqdm               4.44.1

traitlets          4.3.3

u-msgpack-python   2.5.2

urllib3            1.25.9

wcwidth            0.1.9

webencodings       0.5.1

wheel              0.34.2

zipfile2           0.0.12

zipp               3.1.0
conda list:

# packages in environment at /Users/nalzok/opt/miniconda3/envs/FPGA:

#

# Name                    Version                   Build  Channel

appnope                   0.1.0                    py38_0

asn1crypto                1.3.0                    pypi_0    pypi

attrs                     19.3.0                     py_0

backcall                  0.1.0                    py38_0

bleach                    3.1.4                      py_0

bottle                    0.12.18                  pypi_0    pypi

ca-certificates           2020.4.5.1           hecc5488_0    conda-forge

certifi                   2020.4.5.1       py38h32f6830_0    conda-forge

cffi                      1.14.0           py38hb5b8e2f_0

chardet                   3.0.4                 py38_1003

colorama                  0.4.3                    pypi_0    pypi

conan                     1.24.1                   pypi_0    pypi

cryptography              2.3.1                    pypi_0    pypi

decorator                 4.4.2                      py_0

defusedxml                0.6.0                      py_0

deprecation               2.0.7                    pypi_0    pypi

distro                    1.1.0                    pypi_0    pypi

edalize                   0.2.0                    pypi_0    pypi

entrypoints               0.3                      py38_0

fasteners                 0.15                     pypi_0    pypi

fusesoc                   1.10                     pypi_0    pypi

future                    0.18.2                   pypi_0    pypi

icdiff                    1.9.1                    pypi_0    pypi

idna                      2.6                      pypi_0    pypi

importlib-metadata        1.6.0                    py38_0

importlib_metadata        1.6.0                         0

ipykernel                 5.1.4            py38h39e3cac_0

ipython                   7.13.0           py38h5ca1d4c_0

ipython_genutils          0.2.0                    py38_0

ipyxact                   0.2.4                    pypi_0    pypi

jedi                      0.17.0                   py38_0

jinja2                    2.10.3                   pypi_0    pypi

json5                     0.9.4                      py_0

jsonschema                3.2.0                    py38_0

jupyter_client            6.1.3                      py_0

jupyter_core              4.6.3                    py38_0

jupyterlab                2.1.3                      py_0    conda-forge

jupyterlab_server         1.1.4                      py_0

libcxx                    4.0.1                hcfea43d_1    anaconda

libcxxabi                 4.0.1                hcfea43d_1    anaconda

libedit                   3.1.20181209         hb402a30_0    anaconda

libffi                    3.2.1                h475c297_4    anaconda

libsodium                 1.0.16               h3efe00b_0

markupsafe                1.1.1            py38h1de35cc_0

mistune                   0.8.4           py38h1de35cc_1000

monotonic                 1.5                      pypi_0    pypi

more-itertools            8.2.0                    pypi_0    pypi

msgpack-python            0.5.6                    pypi_0    pypi

nbconvert                 5.6.1                    py38_0

nbformat                  5.0.6                      py_0

ncurses                   6.2                  h0a44026_0    anaconda

node-semver               0.6.1                    pypi_0    pypi

notebook                  6.0.3            py38h32f6830_0    conda-forge

okonomiyaki               1.2.0                    pypi_0    pypi

openssl                   1.1.1g               h0b31af3_0    conda-forge

pandoc                    2.2.3.2                       0

pandocfilters             1.4.2                    py38_1

parso                     0.7.0                      py_0

patch-ng                  1.17.4                   pypi_0    pypi

pexpect                   4.8.0                    py38_0

pickleshare               0.7.5                 py38_1000

pip                       20.0.2                   py38_1    anaconda

pluggy                    0.13.1                   pypi_0    pypi

pluginbase                0.7                      pypi_0    pypi

prometheus_client         0.7.1                      py_0

prompt-toolkit            3.0.4                      py_0

prompt_toolkit            3.0.4                         0

ptyprocess                0.6.0                    py38_0

py                        1.8.1                    pypi_0    pypi

pycparser                 2.20                       py_0

pygments                  2.6.1                      py_0

pyjwt                     1.7.1                    pypi_0    pypi

pyopenssl                 18.0.0                   pypi_0    pypi

pyrsistent                0.16.0           py38h1de35cc_0

pysocks                   1.7.1                    py38_0

pytest                    5.4.1                    pypi_0    pypi

python                    3.8.2                hc70fcce_0    anaconda

python-dateutil           2.8.1                      py_0

python_abi                3.8                      1_cp38    conda-forge

pyyaml                    5.3.1                    pypi_0    pypi

pyzmq                     18.1.1           py38h0a44026_0

readline                  8.0                  h1de35cc_0    anaconda

requests                  2.23.0                   py38_0

send2trash                1.5.0                    py38_0

setuptools                46.1.1                   py38_0    anaconda

simplesat                 0.8.2                    pypi_0    pypi

six                       1.14.0                   py38_0

sqlite                    3.31.1               ha441bb4_0    anaconda

terminado                 0.8.3                    py38_0

testpath                  0.4.4                      py_0

tinyprog                  1.0.21                   pypi_0    pypi

tk                        8.6.8                ha441bb4_0    anaconda

tornado                   6.0.4            py38h1de35cc_1

traitlets                 4.3.3                    py38_0

u-msgpack-python          2.5.2                    pypi_0    pypi

urllib3                   1.25.9                   pypi_0    pypi

wcwidth                   0.1.9                      py_0

webencodings              0.5.1                    py38_1

wheel                     0.34.2                   py38_0    anaconda

xz                        5.2.4                h1de35cc_4    anaconda

zeromq                    4.3.1                h0a44026_3

zipfile2                  0.0.12                   pypi_0    pypi

zipp                      3.1.0                      py_0

zlib                      1.2.11               h1de35cc_3    anaconda

Command Line Output

~/D/chisel-bootcamp (master|✚1…) $ jupyter lab                           (FPGA)
[I 11:57:41.934 LabApp] JupyterLab extension loaded from /Users/nalzok/opt/miniconda3/envs/FPGA/lib/python3.8/site-packages/jupyterlab
[I 11:57:41.935 LabApp] JupyterLab application directory is /Users/nalzok/opt/miniconda3/envs/FPGA/share/jupyter/lab
[I 11:57:41.941 LabApp] Serving notebooks from local directory: /Users/nalzok/Developer/chisel-bootcamp
[I 11:57:41.941 LabApp] The Jupyter Notebook is running at:
[I 11:57:41.941 LabApp] http://localhost:8888/?token=b2246320a194cd87e059db50c3b1a621a855c8607469fb7e
[I 11:57:41.941 LabApp]  or http://127.0.0.1:8888/?token=b2246320a194cd87e059db50c3b1a621a855c8607469fb7e
[I 11:57:41.941 LabApp] Use Control-C to stop this server and shut down all kernels (twice to skip confirmation).
[C 11:57:41.955 LabApp]
To access the notebook, open this file in a browser:
    file:///Users/nalzok/Library/Jupyter/runtime/nbserver-31341-open.html
Or copy and paste one of these URLs:
    http://localhost:8888/?token=b2246320a194cd87e059db50c3b1a621a855c8607469fb7e
 or http://127.0.0.1:8888/?token=b2246320a194cd87e059db50c3b1a621a855c8607469fb7e

[I 11:57:46.154 LabApp] Build is up to date

[W 11:57:46.757 LabApp] 404 GET /files/%20build/MovingAverage368251718.dot.svg?_xsrf=2%7Cb4c0efbf%7C0f080edcfcae8c04d70c24d5ae5b69a7%7C1590588518&1590638266686 (::1) 65.29ms referer=http://localhost:8888/lab

[W 11:57:46.760 LabApp] 404 GET /files/%20build/FirFilter4e187824.dot.svg?_xsrf=2%7Cb4c0efbf%7C0f080edcfcae8c04d70c24d5ae5b69a7%7C1590588518&1590638266686 (::1) 66.02ms referer=http://localhost:8888/lab

[W 11:57:46.762 LabApp] 404 GET /files/%20build/FirFilterd04c3bfb.dot.svg?_xsrf=2%7Cb4c0efbf%7C0f080edcfcae8c04d70c24d5ae5b69a7%7C1590588518&1590638266686 (::1) 67.27ms referer=http://localhost:8888/lab

[W 11:57:46.767 LabApp] 404 GET /files/%20build/FirFilter83553f3c.dot.svg?_xsrf=2%7Cb4c0efbf%7C0f080edcfcae8c04d70c24d5ae5b69a7%7C1590588518&1590638266686 (::1) 3.01ms referer=http://localhost:8888/lab

[I 11:57:46.965 LabApp] Kernel started: a81a46db-4348-48c7-8f47-a462390f564b

[I 11:57:49.615 LabApp] Adapting from protocol version 5.1 (kernel a81a46db-4348-48c7-8f47-a462390f564b) to 5.3 (client).

[I 11:57:49.629 LabApp] Adapting from protocol version 5.1 (kernel a81a46db-4348-48c7-8f47-a462390f564b) to 5.3 (client).

[I 11:57:50.449 LabApp] Kernel restarted: a81a46db-4348-48c7-8f47-a462390f564b

[W 11:58:04.284 LabApp] 404 GET /files/%20build/MovingAverage368251718.dot.svg?_xsrf=2%7Cb4c0efbf%7C0f080edcfcae8c04d70c24d5ae5b69a7%7C1590588518&1590638284231 (::1) 1.84ms referer=http://localhost:8888/lab

[W 11:58:07.484 LabApp] 404 GET /files/%20build/FirFilter4e187824.dot.svg?_xsrf=2%7Cb4c0efbf%7C0f080edcfcae8c04d70c24d5ae5b69a7%7C1590588518&1590638287428 (::1) 1.62ms referer=http://localhost:8888/lab

[W 11:58:10.526 LabApp] 404 GET /files/%20build/FirFilterd04c3bfb.dot.svg?_xsrf=2%7Cb4c0efbf%7C0f080edcfcae8c04d70c24d5ae5b69a7%7C1590588518&1590638290473 (::1) 2.05ms referer=http://localhost:8888/lab

[W 11:58:12.535 LabApp] 404 GET /files/%20build/FirFilter83553f3c.dot.svg?_xsrf=2%7Cb4c0efbf%7C0f080edcfcae8c04d70c24d5ae5b69a7%7C1590588518&1590638292517 (::1) 1.31ms referer=http://localhost:8888/lab

Browser Output

Starting application in workspace: "/lab" vendors~main.78d6303616d95c50a3ab.js:2:2548022
Starting WebSocket: ws://localhost:8888/api/kernels/a81a46db-4348-48c7-8f47-a462390f564b 2 vendors~main.78d6303616d95c50a3ab.js:2:2226162
Kernel: starting (a81a46db-4348-48c7-8f47-a462390f564b) vendors~main.78d6303616d95c50a3ab.js:2:2238885
Kernel: restarting (a81a46db-4348-48c7-8f47-a462390f564b) vendors~main.78d6303616d95c50a3ab.js:2:2238885

[jasongrout]

You can narrow down who is responsible for the space by looking at the websocket messages in the browser debugger. There will (likely) be a websocket message for displaying that image - probably easiest to open the browser js console, go to the network panel and filter for websockets, then refresh the page to get the websocket connections to show up. Then find the websocket connection for the correct kernel and search for the filename (like MovingAverage368251718.dot.svg).

Does that websocket message path contain a space before build? If it does, then JupyterLab is faithfully reproducing the path. If not, then JLab (or some plugin?) is erroneously inserting that space.

[jasongrout]

Note that it might also be a problem with the Scala kernel...

[nalzok]

I did not see any relevant WebSocket connection, but maybe you can find something useful from these screenshots?

Note that it might also be a problem with the Scala kernel...

I'm not familiar with the architecture of Jupyter Notebook/Lab, but I guess if there is a bug in the Scala kernel, then Jupyter Notebook would not have behaved correctly?

[jasongrout]

I did not see any relevant WebSocket connection, but maybe you can find something useful from these screenshots?

That step about refreshing in my instructions is important. The network panel only shows connections since it was opened, so it needs to be opened before the kernel websocket connection is made.

[jasongrout]

Oh, on the other hand, you can just inspect the notebook itself as a text file. Save the notebook, then right-click on it in the file-browser and open it with the text editor. Search for that filename, and see if there is a space there.

[nalzok]

Here is the step to reproduce the screenshots

1. Launch JupyterLab
2. Open Developer Tools -> Network panel
3. Kernel -> Restart Kernel and Run All Cells...
4. Refresh the page

I have double-checked that there are no WebSocket connections related to the images. The only ws:// connections are included in the screenshot below

You can see extra spaces in the notebook file, though.

$ ag 'build/' 0_demo.ipynb
147:      "creating dot file build/MovingAverage3.dot\n",
154:       "<a name=\"top\"></a><img src=\" build/MovingAverage368251718.dot.svg\" alt=\"Module View\";\" />"
236:      "creating dot file build/FirFilter.dot\n",
243:       "<a name=\"top\"></a><img src=\" build/FirFilter4e187824.dot.svg\" alt=\"Module View\";\" />"
267:      "creating dot file build/FirFilter.dot\n",
274:       "<a name=\"top\"></a><img src=\" build/FirFilterd04c3bfb.dot.svg\" alt=\"Module View\";\" />"
298:      "creating dot file build/FirFilter.dot\n",
305:       "<a name=\"top\"></a><img src=\" build/FirFilter83553f3c.dot.svg\" alt=\"Module View\";\" />"

[jasongrout]

If the notebook file has spaces, then almost surely the kernel or the library generating the files is the issue. We would know for sure if we could see the websocket messages.

[jasongrout]

To see the websocket messages we are looking for, open the browser console, then open the notebook and run the cells.

[nalzok]

Hi, I'm not sure what you mean by "open the browser console, then open the notebook and run the cells". As soon as I type jupyter lab on the CLI, a new tab just opens in Firefox. I don't really have time to open the developer tools before the page loads. Also, can you clarify which developer tool should I use, the JS console, or the Network panel? They are separate tools on Firefox, and I don't think I can have both open at the same time.

I tried this, but still no luck:

1. Launch JupyterLab
2. Open Developer Tools -> Network panel
3. Kill all active kernels and close all open notebooks
4. Open 0_demo.ipynb
5. Kernel -> Restart Kernel and Run All Cells...
6. Refresh the page

[jasongrout]

Sorry for the confusion. The panel needs to be open when the kernel starts (to show the websocket connection) and also when the message is sent (when the cells are run). So I think if you follow the steps above except don't refresh in step 6, the websocket message with the filename will still be in your network panel. Opening the panel before step 4 is accomplishing the goal of getting the websocket connection visible. I think refreshing in step 6 is clearing the messages from the debugger.

[nalzok]

Unfortunately, that still doesn't work. All I get is the following two WebSocket connections :(

There are some 404 error in the JS console, which I hope would help?

[jasongrout]

Did you search those websocket connection messages for the filename? Click on Messages on the right, and you should be able to filter the messages for a string, like the filename.