voila-dashboards / voila

Voilà turns Jupyter notebooks into standalone web applications
https://voila.readthedocs.io
Other
5.31k stars 497 forks source link

Update from 0.4.3 -> 0.5.5 leads to custom template breaking #1452

Closed salwon closed 3 months ago

salwon commented 3 months ago

Description

I am currently attempting to update from 0.4.3 to 0.5.5 and running into an issue with our custom template which had worked previously. With 0.5.5, trying to load the notebook leads to a series of 404 errors:

404 GET /voila/files/846.voila.js (127.0.0.1) 0.60ms
404 GET /voila/files/8291.voila.js (127.0.0.1) 1.05ms
404 GET /voila/files/6914.voila.js (127.0.0.1) 0.73ms
404 GET /voila/files/8762.voila.js (127.0.0.1) 0.86ms
404 GET /voila/files/3717.voila.js (127.0.0.1) 0.62ms
404 GET /voila/files/6219.voila.js (127.0.0.1) 0.56ms
404 GET /voila/files/9458.voila.js (127.0.0.1) 0.61ms
404 GET /voila/files/1770.voila.js (127.0.0.1) 1.19ms
404 GET /voila/files/9060.voila.js (127.0.0.1) 0.54ms
404 GET /voila/files/5445.voila.js (127.0.0.1) 0.45ms
404 GET /voila/files/9513.voila.js (127.0.0.1) 0.58ms
404 GET /voila/files/103.voila.js (127.0.0.1) 0.59ms
404 GET /voila/files/3312.voila.js (127.0.0.1) 0.89ms
404 GET /voila/files/4608.voila.js (127.0.0.1) 1.01ms
404 GET /voila/files/2361.voila.js (127.0.0.1) 0.58ms
404 GET /voila/files/450.voila.js (127.0.0.1) 0.90ms
404 GET /voila/files/3316.voila.js (127.0.0.1) 0.61ms
404 GET /voila/files/5403.voila.js (127.0.0.1) 0.68ms
404 GET /voila/files/2687.voila.js (127.0.0.1) 0.82ms
404 GET /voila/files/1053.voila.js (127.0.0.1) 0.72ms
404 GET /voila/files/8809.voila.js (127.0.0.1) 1.27ms
404 GET /voila/files/3947.voila.js (127.0.0.1) 1.16ms
404 GET /voila/files/8149.voila.js (127.0.0.1) 0.97ms
404 GET /voila/files/6434.voila.js (127.0.0.1) 0.57ms
404 GET /voila/files/4561.voila.js (127.0.0.1) 0.65ms
404 GET /voila/files/2784.voila.js (127.0.0.1) 0.57ms
404 GET /voila/files/8316.voila.js (127.0.0.1) 0.72ms
404 GET /voila/files/7991.voila.js (127.0.0.1) 0.82ms
404 GET /voila/files/6778.voila.js (127.0.0.1) 1.32ms
404 GET /voila/files/2266.voila.js (127.0.0.1) 1.57ms
404 GET /voila/files/2075.voila.js (127.0.0.1) 0.54ms
404 GET /voila/files/3655.voila.js (127.0.0.1) 0.64ms
404 GET /voila/files/3921.voila.js (127.0.0.1) 0.58ms
404 GET /voila/files/358.voila.js (127.0.0.1) 0.66ms
404 GET /voila/files/1094.voila.js (127.0.0.1) 0.48ms
404 GET /voila/files/262.voila.js (127.0.0.1) 0.72ms
404 GET /voila/files/2553.voila.js (127.0.0.1) 0.58ms
404 GET /voila/files/8466.voila.js (127.0.0.1) 0.49ms
404 GET /voila/files/6328.voila.js (127.0.0.1) 0.59ms
404 GET /voila/files/7884.voila.js (127.0.0.1) 0.67ms
404 GET /voila/files/9339.voila.js (127.0.0.1) 0.54ms
404 GET /voila/files/1581.voila.js (127.0.0.1) 0.56ms
404 GET /voila/files/2938.voila.js (127.0.0.1) 0.58ms
404 GET /voila/files/78.voila.js (127.0.0.1) 0.61ms
404 GET /voila/files/43.voila.js (127.0.0.1) 0.61ms
404 GET /voila/files/4406.voila.js (127.0.0.1) 0.61ms
404 GET /voila/files/1782.voila.js (127.0.0.1) 0.69ms
404 GET /voila/files/9900.voila.js (127.0.0.1) 0.35ms
404 GET /voila/files/8921.voila.js (127.0.0.1) 0.72ms
404 GET /voila/files/8102.voila.js (127.0.0.1) 0.81ms
404 GET /voila/files/9816.voila.js (127.0.0.1) 0.59ms
404 GET /voila/files/3414.voila.js (127.0.0.1) 1.56ms
404 GET /voila/files/1058.voila.js (127.0.0.1) 0.74ms
404 GET /voila/files/556.voila.js (127.0.0.1) 0.49ms
404 GET /voila/files/5699.voila.js (127.0.0.1) 0.72ms
404 GET /voila/files/275.voila.js (127.0.0.1) 0.96ms
404 GET /voila/files/8863.voila.js (127.0.0.1) 0.68ms
404 GET /voila/files/6729.voila.js (127.0.0.1) 0.41ms
404 GET /voila/files/5985.voila.js (127.0.0.1) 0.55ms
404 GET /voila/files/5198.voila.js (127.0.0.1) 0.66ms
404 GET /voila/files/5606.voila.js (127.0.0.1) 0.56ms
404 GET /voila/files/4652.voila.js (127.0.0.1) 0.48ms

Without referencing the template, the notebook loads successfully. The directory structure for the template looks like:

share
└── jupyter
    ├── nbconvert
    │   └── templates
    │       └── carbon
    │           ├── conf.json
    │           ├── index.html.j2
    │           ├── spinner.macro.html.j2
    │           └── static
    │               ├── carbon.css
    │               ├── colors.css
    │               ├── dl-white.css
    │               ├── dropdown.js
    │               ├── g10.css
    │               ├── g100.css
    │               ├── g90.css
    │               ├── jupyter.css
    │               ├── main.js
    │               └── white.css
    └── voila
        └── templates
            └── carbon
                ├── 404.html
                ├── base.html
                ├── browser-open.html
                ├── error.html
                ├── index.html.j2
                └── tree.html

Does something need to change in the structure for the new version? I noticed the documentation is out of date (this ticket), what can I do to get my notebooks working with 0.5.5?

Reproduce

Have a working template in 0.4.3, upgrade Voila to 0.5.5.

Expected behavior

Notebook loads with correct template.

Context

trungleduc commented 3 months ago

Hi @salwon, from Voila 0.5 there are some changes related to the static file location, is it possible to share your template? I can take a look at it

salwon commented 3 months ago

I can't share the template unfortunately - is there anything I should look specifically for problems? My plan is to go through the index.html.j2 files, I do not believe anything would be a problem in the CSS itself.

trungleduc commented 3 months ago

Did you extend your template from the Lab template (https://github.com/voila-dashboards/voila/blob/main/share/jupyter/voila/templates/lab/index.html.j2)

salwon commented 3 months ago

I misunderstood you I think - yes, the first line of ours is {%- extends "lab/index.html.j2" -%}.

trungleduc commented 3 months ago

You can try to compare the source of a page rendered with your template and one with the default template, maybe there are some missing blocks.

salwon commented 3 months ago

Do you mean on the older version? My page doesn't render with my template, the source doesn't show much.

trungleduc commented 3 months ago

No, I mean the current Voila version. Could you post the diff?

salwon commented 3 months ago

It's definitely missing those files, here's a pic from with vs without the template. Selection_265 Selection_266

I can't post the git diff if that's what you meant, it's too different and will show basically the whole file.

trungleduc commented 3 months ago

It's hard to judge from the above screenshot. I would be easier if you can make a minimal template to reproduce the bug

salwon commented 3 months ago

Trying to run the vuetify-base template gives the same errors.

trungleduc commented 3 months ago

voila-vuetify does not work in Voila 0.5 is expected https://github.com/voila-dashboards/voila-vuetify/issues/64. It is quite complicated this template, and upgrading it to Voila 0.5 is not planned yet.

trungleduc commented 3 months ago

Do you have a script tag with the id jupyter-config-data in your rendered page? Something similar to

<script id="jupyter-config-data" type="application/json">
  {
    "appUrl": "voila/",
    "appVersion": "0.5.5",
    "baseUrl": "/",
    "disabledExtensions": [],
    "extensionConfig": {},
    "federated_extensions": [
      {
        "extension": "./extension",
        "load": "static/remoteEntry.5cbb9d2323598fbda535.js",
        "name": "jupyterlab_pygments",
        "style": "./style"
      }
    ],
    "fullLabextensionsUrl": "/voila/labextensions",
    "fullMathjaxUrl": null,
    "fullStaticUrl": "/voila/static",
    "jupyterLabTheme": "light",
    "kernelId": "d5201146-dbf8-4ebf-a8ae-7f371f914f0e",
    "mathjaxConfig": null,
    "terminalsAvailable": false,
    "themesUrl": "/voila/api/themes"
  }
</script>
salwon commented 3 months ago

Yes - all that's in there is

    {
        "baseUrl": "/",
        "kernelId": "112df433-b903-4d6d-ac42-ae33832ed657"
    }
salwon commented 3 months ago

That got it!

I replaced the previous definition of that tag with {{ page_config_full | tojson }}, following the changes in here. Seems to be working now!

trungleduc commented 3 months ago

Feel free to close the issue if it's fixed