Update Voila shell

[trungleduc]

• Add new config VoillaConguration.extension_config: this is a dict with keys are names of extensions, and values are the config value. This dict is passed to the frontend via PageConfig so the frontend extension can read its configs.

• Extension can now add widgets to the top and bottom of the voila shell.

[github-actions[bot]]

:point_left: Launch a Binder on branch trungleduc/voila/extension-config

[trungleduc]

@jtpio @martinRenou I'm trying to do a quick hack to make the shell extensible, but can not use the same layout system as in JupyterLab since the widgets do not show up.

Not sure if we should ship this in 0.5.0 or if this feature needs more discussion.

[jtpio]

but can not use the same layout system as in JupyterLab since the widgets do not show up.

What do you mean by this? Wondering if these areas could be hidden by default, and visible if a widget is added to them?

Not sure if we should ship this in 0.5.0 or if this feature needs more discussion.

I guess even if a partially working implementation would be available in 0.5.0 it would already be good. And could be polished for 1.0.0. For example maybe the theme toggle top bar extension from https://github.com/jupyterlab-contrib/jupyterlab-topbar could also be reused in Voila?

[trungleduc]

but can not use the same layout system as in JupyterLab since the widgets do not show up.

What do you mean by this? Wondering if these areas could be hidden by default, and visible if a widget is added to them?

I tried to mimic the Lab shell with a BoxLayout as a root layout. But the problem is that the divs containing widgets exist before the creation of the shell widget. By appending these divs into the shell's node, I got all zero-height divs and the widgets are not rendered.

[trungleduc]

Hi all, this PR is ready for review again. Now I have a properly working shell with the top, main and bottom areas.

[martinRenou]

Did you have an example of an extension somewhere to was putting something in the top bar?

If you agree, maybe this repo could go under the voila-dashboards org

[trungleduc]

Did you have an example of an extension somewhere to was putting something in the top bar?

If you agree, maybe this repo could go under the voila-dashboards org

I'm working on it, will ping you to create the repo later

[jtpio]

Would it be possible to add a screenshot to have an idea of what the Voila dashboard looks like when there is a top bar component?

Also being able to reuse one of the extensions from https://github.com/jupyterlab-contrib/jupyterlab-topbar would be great.

[trungleduc]

Would it be possible to add a screenshot to have an idea of what the Voila dashboard looks like when there is a top bar component?

The top and bottom are empty divs of 10px min-height and hidden by default. Their positions are fixed and the scrollbar is now shown inside the main content area. Here is a screenshot where the two are activated, I added the background for visibility.

• Before

• After

Also being able to reuse one of the extensions from https://github.com/jupyterlab-contrib/jupyterlab-topbar would be great.

I doubt it since Voila does not provide lots of tokens.

[martinRenou]

I think we need to be careful not to break custom templates by adding this kind of things. Custom templates are tested on the CI so for now with just the top and bottom that seems ok to me! Look great! Thanks

[martinRenou]

Doing another beta with this now

[jtpio]

I doubt it since Voila does not provide lots of tokens.

Yeah the one used by these extensions is IToolbarWidgetRegistry. Also it may not make sense to pick up all lab extensions in Voila that would add components to the top area.