Turn into a JupyterLite Addon + support any kernel

martinRenou commented 1 year ago

References

Fix #1 fix #2 fix #7

Add a JupyterLite addon

Add a jupyterlite addon VoiciAddon implementation which adds voici as a new available app for jupyterlite.

This allows for jupyter lite build . to generate voici output alongside the default lab and retro outputs by running: jupyter lite build . --apps voici --apps lab --apps retro

This PR adds a handy new voici build . CLI which acts like the jupyterlite CLI, the only difference is that it will build only the voici output. One could also generate the lab output if using voici build . --apps lab (voici output will always be included).

This PR also improves a couple of things:

The "lab" nbconvert template was not picked up properly for the Notebook rendering, this is now fixed (this is the reason for the UI-tests reference diff)
The services.js file was copied from jupyterlite, we can remove it
The labextensions were copied manually in the output, we now rely on jupyterlite for that

The current approach this PR takes is to create a separate build directory in the JupyterLite output for Voici itself. This setup results in having a duplication of some core libs on the server. Instead, we should probably have the Voici app be a federated extension that we can load dynamically, and the voici main index should be similar to the retro one under JupyterLite (non-processed by webpack) . These improvements should be made in a follow-up PR.

Add support for any lite kernel

This PR loads the federated lite server extensions in order to support any kernel. It also removes the hard-coded usage of pyolite and the support for pre-installing packages with piplite.

Screencast from 2023-03-02 14-43-56.webm

Remaining todo:

[x] Make the main Voici app a real app that inherits from jupyterlite.app.BaseLiteApp
[x] Make sure we can easily pass Voila configuration either through a file or command line options
[x] Change the default URL to ./voila/ instead of ./lab/ when accessing the server
[ ] Modify upstream voila tree template to be able to change the relative /voila/render/ paths to /voici/render
[ ] ~Provide a jupyter-lite.json config for Voici similar to https://github.com/jupyterlite/jupyterlite/blob/main/app/lab/jupyter-lite.json, and use the config-utils.js file to merge it with the main one.~ (Voila requires to have the page_config injected in the template at build time, whereas jupyterlite load the page_config from the JSON file at runtime. We need to populate the page_config at build time for Voila unless we modify Voila, so for now providing a jupyter-lite.json file will not do what we want.)
[x] Get rid of the schemas and themes building from the webpack config
[x] Add visual regression tests involving jupyter widgets (in order to test federated extensions support)
[x] jupyter lite build . should not build voici output automatically.

martinRenou commented 1 year ago

update playwright references

martinRenou commented 1 year ago

Make sure we can easily pass Voila configuration either through a file or command line options

Passing Voila configuration thought the command line works:

voici build . --contents . --VoilaConfiguration.strip_sources=False

trungleduc commented 1 year ago

Thanks a lot @martinRenou for working on it! It can render the notebook correctly but I got the following error in the console.

 GET http://localhost:8000/voila/render/all.json 404 (File not found))

It looks like the all.json file in voici/static/schemas is not copied to _output/voila/render directory.

martinRenou commented 1 year ago

It can render the notebook correctly but I got the following error in the console.

Indeed! I missed it in the middle of many warnings.

It looks like the all.json file in voici/static/schemas is not copied to _output/voila/render directory.

Actually I feel like it would be a missing config file as in https://github.com/jupyterlite/jupyterlite/blob/main/app/lab/jupyter-lite.json

We should probably not build schemas or themes in our webpack config, but use the built one from jupyterlite.

I will also add more visual regression tests.

trungleduc commented 1 year ago

We should probably not build schemas or themes in our webpack config, but use the built one from jupyterlite.

Indeed, I copied a lot from the webpack config of jupyterlite in the previous PoC, we should rely on upstream now

trungleduc commented 1 year ago

this allows for jupyterlite build . to automatically generate voici output alongside the default lab and retro outputs. One could >also build only lab and voici: jupyterlite build . --apps voici lab

I'm wondering if we should keep this behavior, or do users need to specify that they want to build voici with the jupyterlite build command?

martinRenou commented 1 year ago

I'm wondering if we should keep this behavior, or do users need to specify that they want to build voici with the jupyterlite build command?

I was also wondering the same. It may be less surprising to have to explicitly specify that they want a voici output generated.

So jupyterlite build . should probably not generate a voici output, and jupyterlite build . --apps voici lab should generate one?

trungleduc commented 1 year ago

So jupyterlite build . should probably not generate a voici output, and jupyterlite build . --apps voici lab should generate one?

I'm more on this to be able to advertise the voici command as the preferred way to generate the standalone application.

martinRenou commented 1 year ago

I agree, I also think we should advertise the voici command as being the preferred way. The fact that jupyterlite build . --apps voici lab would just be a nice feature to generate both jupyterlite and voici outputs.

martinRenou commented 1 year ago

update playwright references

martinRenou commented 1 year ago

update playwright references

martinRenou commented 1 year ago

The page_config thingy was tricky to figure out but it seems to work nicely now! And we have UI-tests to make this robust.

@trungleduc this is ready for another round of review :)

The remaining todo in the title can be tackled separately.

martinRenou commented 1 year ago

update playwright references

martinRenou commented 1 year ago

Triggering CI

martinRenou commented 1 year ago

update playwright references

martinRenou commented 1 year ago

Triggering CI again

jtpio commented 1 year ago

Looking good!

@martinRenou would you have a quick screenshot / screencast around to get a quick idea of what it looks like in action? Thanks!

martinRenou commented 1 year ago

Thanks! Done :)

trungleduc commented 1 year ago

Thanks @martinRenou !

voila-dashboards / voici