Verify that the custom Emscripten FS from JupyterLite can be used

voila-dashboards / voici

Voici turns any Jupyter Notebook into a static web application

https://voici.readthedocs.io/

Other

152 stars 8 forks source link

Verify that the custom Emscripten FS from JupyterLite can be used #3

Closed martinRenou closed 1 year ago

martinRenou commented 1 year ago

Problem

JupyterLite can provide access to local files using a custom Emscripten File System, we should check that Voilite works properly with it

jtpio commented 1 year ago

Just checked with Voici 0.2.0 via the Voici Demo and it appears the Service Worker can't be found.

This looks like an issue with the base URL:

jtpio commented 1 year ago

Checking with the demo folder, it appears that the baseUrl in the initial jupyter-config-data is empty:

But manually setting "baseUrl": "/" in the generated HTML seems to do the trick:

jtpio commented 1 year ago

That empty string looks unexpected since there the baseUrl is currently set to / here:

https://github.com/voila-dashboards/voici/blob/8069c958e257c1a5781a33bc2e632b6a8fde8392/voici/addon.py#L142-L145

jtpio commented 1 year ago

As a comparison the themesUrl defined here:

https://github.com/voila-dashboards/voici/blob/bfb048b9f3a8e3a0124c953d089aa3816d9c029d/voici/tree_exporter.py#L52-L54

Appears to be defined correctly on the page:

@martinRenou do you know if the page config baseUrl might be overridden at some other point during the export, maybe in an upstream exporter?

martinRenou commented 1 year ago

@martinRenou do you know if the page config baseUrl might be overridden at some other point during the export, maybe in an upstream exported?

It's not impossible that Voila itself overrides the baseUrl?

jtpio commented 1 year ago

Right, I'm not exactly sure how the empty baseUrl is ends up on the page:

However, this seems to be triggering the following code path in JupyterLab PageConfig:

https://github.com/jupyterlab/jupyterlab/blob/25658adabce206725cafe42161181ba43ae87bcd/packages/coreutils/src/pageconfig.ts#L37-L39

export function getOption(name: string): string {
    if (configData) {
      return configData[name] || getBodyData(name);
    }

configData[name] would be "", so the || triggers a call to getBodyData. With getBodyData getting the value from the body data attribute:

Which voila defines here: https://github.com/voila-dashboards/voila/blob/0f4cc5360ff387eeaf7e647cee712b2ce08d573a/share/jupyter/voila/templates/base/page.html#L23

 <body data-base-url="{{ base_url }}voila/">

Most likely that's why there is a voila/ part in the URL:

jtpio commented 1 year ago

Digging a bit more, Voila seems to be updating the page config baseUrl with the one from the resources in the template: https://github.com/voila-dashboards/voila/blob/0f4cc5360ff387eeaf7e647cee712b2ce08d573a/share/jupyter/voila/templates/lab/index.html.j2#L81

{# Set a dummy variable - we just want the side effect of the update. #}
{% set _ = page_config_full.update(baseUrl=resources.base_url, kernelId=kernel_id) %}

So if resources.base_url is empty, that could explain why we always get "baseUrl": "".