Hi,

Just wanted to share some of my work to make the dashboard easier to implement.
There is not yet proper documentation, but I think this is a good start.

https://github.com/yarmenti/py_vvcontrollers

What do you think?

Regards,

Description

ipyvuetify widgets do no render in the vuetify-base template when there is a VBox in between.

Reproduce

The following code snippets show what does render, and what does not (Note that they all render in the classical notebook):

direct child of a vuetify container

import ipyvuetify as v
import ipywidgets as widgets

v.Container(children=[
    v.Btn(children=['does']),
    v.Btn(children=['work']),
], _metadata={'mount_id': 'content'})

vbox in between

import ipyvuetify as v
import ipywidgets as widgets

v.Container(children=[
    widgets.VBox(children=[
            v.Btn(children=['does not']),
            v.Btn(children=['work']),
        ])
], _metadata={'mount_id': 'content'})

vbox + container in between

import ipyvuetify as v
import ipywidgets as widgets

v.Container(children=[
    widgets.VBox(children=[
        v.Container(children=[
            v.Btn(children=['also does not']),
            v.Btn(children=['work']),
        ])
    ])
], _metadata={'mount_id': 'content'})

non-ipyvuetify as leaf nodes:

import ipyvuetify as v
import ipywidgets as widgets

v.Container(children=[
    widgets.VBox(children=[
        widgets.Button(description='but this does'),
        widgets.Button(description='work'),
    ])
], _metadata={'mount_id': 'content'})

The base template downloads a Material Design Icons CSS with a version 4.4.95 but ipyvuetify seems to rely on more recent versions, which ends up in some icons missing when rendering with voila-vuetify templates.

Ipyvuetify has two (is it an error?) dependencies related to mdi in js/package.json:

    "@mdi/font": "^4.9.95",
    "material-design-icons-iconfont": "^5.0.1",

It seems appropriate to maintain a same version of MDI between ipyvuetify and voila-vuetify.

In setup.py the version of 'voila' is imposed lower than O.4 but I have the impression that it works very well with 'voila' 0.4.

install_requires=['voila>=0.2.0,<0.4'],

Why not increase the upper bound?

install_requires=['voila>=0.2.0,<0.5'],

Regards

The default template uses a hardcoded sidepane, it would be super nice if the sidepane was provided by the user in their Notebook.

I can try to come up with a PR.

Description

This is a warning that we are making some deep (and breaking) changes in Voila 0.5.0:

• Voila becomes a Lab-remix voila-dashboards/voila#846. This means that you won't have access to the kernel API anymore here: https://github.com/voila-dashboards/voila-vuetify/blob/master/share/jupyter/nbconvert/templates/vuetify-base/util.js#L152
• Voila will use JupyterLab mime renderers voila-dashboards/voila#1249 This might break your assumptions concerning outputs rendering (I'm not completely sure though, because it seems you are not inheriting from the Voila templates?)

Hi,

I was just wondering how you could control which tab is viewed (e.g. tab 1 or 2 in the example notebook) through the navigation sidebar?

Thanks for all help!
Ayrton

I am running the following command to install voila-vuetify in development mode (-e) of a local clone of the repository on a linux machine:

pip install --user -e .

This however fails because setup.py is trying to write into /usr/share/jupyter without root permission. With a print command added behind the line that checks for the --user flag,

if '--user' in sys.prefix:  # TODO: is there a better way to find out?

I found out that this expression fails to correctly detect the --user flag. The user_dirfunction contains two more errors as the env and home variable are not defined.

is there any way or template to make voila responsive?
i just need that my app be responsive and nothing more

The upper-left menu does not show at all on narrow screens anymore.

Hi,

You are probably aware of this, but just to report that voila-vuetify fails for the latest version of voila 0.1.15

Example:

 voila --template vuetify-default simple_example.ipynb

Traceback (most recent call last):
  File "/Users/jovan/miniconda3/bin/voila", line 10, in <module>
    sys.exit(main())
  File "/Users/jovan/miniconda3/lib/python3.7/site-packages/traitlets/config/application.py", line 663, in launch_instance
    app.initialize(argv)
  File "/Users/jovan/miniconda3/lib/python3.7/site-packages/voila/app.py", line 348, in initialize
    self.setup_template_dirs()
  File "/Users/jovan/miniconda3/lib/python3.7/site-packages/voila/app.py", line 368, in setup_template_dirs
    assert conf['traitlet_configuration']['base_template'] == self.voila_configuration.template
KeyError: 'traitlet_configuration'

I hope this helps,

Cheers!

I tried the example notebook in my setup and am seeing the error

Error: Vuetify is not properly initialized

I am using the following versions of ipyvuetify and voila:

  bluebee@bbench:~/.applications$ pip3 freeze|egrep 'voila|vue'
  ipyvue==1.5.0
  ipyvuetify==1.6.2
  voila==0.2.7
  voila-vuetify==0.5.1

I'm uisng JupyterLab 3.0.8 and have activated the extensions as per the documentation, and this setup used to work correctly in JupyterLab < 3 so maybe something has changed in the setup?

Thanks!

This screenshot shows two issues:

• One bqplot, which has positive z-index (will need to be solved in bqplot)
• The thumb-handle is clipped, this is something we could fix in the template.
  

Hello,

This widget is amazing for preview in notebooks!

But I found it have some problem with plotly , plotly figure can't be ploted , turn on console found a lot of error :

start with voila-vuetify

voila --Voila.ip=0.0.0.0 --ExecutePreprocessor.timeout=180 --template vuetify-default  vue_dashboard.ipynb

start plain

plotly figure render fine without --template vuetify-default

voila --Voila.ip=0.0.0.0 --ExecutePreprocessor.timeout=180 vue_dashboard.ipynb

env:

voila                             0.1.21
voila-vuetify                     0.3.0
ipyvuetify                        1.4.0

Do you have any idea?

The Voilà version is set to be <0.3 is there a reason for this restriction?

Hi, it's me again!

As I don't have access to git with my professional computer, I'm not able to make pull requests.
Thus, in app.html, one must change:
<v-toolbar-side-icon> to <v-app-bar-nav-icon>
as Vuetify version used is 2.x. Indeed, the icon button is not showed using the dashboard as is.

Yannick

Bug report

voila-vuetify does not work, and breaks voila.

How should I go to make it work ?

Case 1

If I create a new environment with voila-vuetify and voila, it gives the old voila-0.3.3 version and then even using voila without template does not work.

$ conda create -n voila-vuetify voila ipykernel ipywidgets ipyvuetify voila-vuetify
$ conda list | grep -E "voila|ipyvuetify|ipykernel"
# packages in environment at /home/paul/miniconda3/envs/voila-vuetify:
ipykernel                 6.29.0             pyhd33586a_0    conda-forge
ipyvuetify                1.8.10             pyhd8ed1ab_0    conda-forge
voila                     0.3.3              pyhd8ed1ab_0    conda-forge
voila-vuetify             0.6.0              pyhd8ed1ab_0    conda-forge

Trying to run voila-vuetify/ManyWidgets.ipynb:

$ voila ManyWidgets.ipynb

Traceback (most recent call last):
  File "/home/paul/miniconda3/envs/voila-vuetify/bin/voila", line 6, in <module>
    from voila.app import main
  File "/home/paul/miniconda3/envs/voila-vuetify/lib/python3.12/site-packages/voila/__init__.py", line 11, in <module>
    from .server_extension import _load_jupyter_server_extension # noqa
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/home/paul/miniconda3/envs/voila-vuetify/lib/python3.12/site-packages/voila/server_extension.py", line 21, in <module>
    from .handler import VoilaHandler
  File "/home/paul/miniconda3/envs/voila-vuetify/lib/python3.12/site-packages/voila/handler.py", line 24, in <module>
    from .notebook_renderer import NotebookRenderer
  File "/home/paul/miniconda3/envs/voila-vuetify/lib/python3.12/site-packages/voila/notebook_renderer.py", line 24, in <module>
    from .exporter import VoilaExporter
  File "/home/paul/miniconda3/envs/voila-vuetify/lib/python3.12/site-packages/voila/exporter.py", line 15, in <module>
    from jinja2 import contextfilter
ImportError: cannot import name 'contextfilter' from 'jinja2' (/home/paul/miniconda3/envs/voila-vuetify/lib/python3.12/site-packages/jinja2/__init__.py)

Case 2

$ conda create -n voila-vuetify-pip voila ipykernel ipywidgets ipyvuetify
$ pip install voila-vuetify
$ conda list | grep -E "voila|ipyvuetify|ipykernel"
# packages in environment at /home/paul/miniconda3/envs/voila-vuetify-pip:
ipykernel                 6.29.0             pyhd33586a_0    conda-forge
ipyvuetify                1.8.10             pyhd8ed1ab_0    conda-forge
voila                     0.4.3                    pypi_0    pypi
voila-vuetify             0.6.0                    pypi_0    pypi

Running without template, the widgets are displayed, but I have the following errors:

$ voila ManyWidgets.ipynb

403 GET /voila/files/voila/jupyter-vue.js (127.0.0.1): File not whitelisted
403 GET /voila/files/voila/jupyter-vue.js (127.0.0.1) 1.22ms
403 GET /voila/files/voila/jupyter-vuetify.js (127.0.0.1): File not whitelisted
403 GET /voila/files/voila/jupyter-vuetify.js (127.0.0.1) 0.44ms

Running with the vuetify-default template, the widgets are not displayed, and I have the following errors:

$ voila --template vuetify-default ManyWidgets.ipynb

403 GET /voila/files/846.voila.js (127.0.0.1): File not whitelisted
403 GET /voila/files/846.voila.js (127.0.0.1) 1.15ms
403 GET /voila/files/6914.voila.js (127.0.0.1): File not whitelisted
403 GET /voila/files/6914.voila.js (127.0.0.1) 0.57ms
403 GET /voila/files/8291.voila.js (127.0.0.1): File not whitelisted
403 GET /voila/files/8291.voila.js (127.0.0.1) 0.40ms

404 GET /api/kernels/86956e0a-1a7f-4338-9264-c39c8f65fc02?1705880536585 (127.0.0.1): Kernel does not exist: 86956e0a-1a7f-4338-9264-c39c8f65fc02
[Voila] WARNING | wrote error: 'Kernel does not exist: 86956e0a-1a7f-4338-9264-c39c8f65fc02'
Traceback (most recent call last):
  File "/home/paul/miniconda3/envs/voila-vuetify-pip/lib/python3.12/site-packages/tornado/web.py", line 1786, in _execute
    result = await result
             ^^^^^^^^^^^^
  File "/home/paul/miniconda3/envs/voila-vuetify-pip/lib/python3.12/site-packages/jupyter_server/auth/decorator.py", line 73, in inner
    return await out
           ^^^^^^^^^
  File "/home/paul/miniconda3/envs/voila-vuetify-pip/lib/python3.12/site-packages/jupyter_server/services/kernels/handlers.py", line 74, in get
    model = await ensure_async(km.kernel_model(kernel_id))
                               ^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/home/paul/miniconda3/envs/voila-vuetify-pip/lib/python3.12/site-packages/jupyter_server/services/kernels/kernelmanager.py", line 500, in kernel_model
    self._check_kernel_id(kernel_id)
  File "/home/paul/miniconda3/envs/voila-vuetify-pip/lib/python3.12/site-packages/jupyter_server/services/kernels/kernelmanager.py", line 531, in _check_kernel_id
    raise web.HTTPError(404, "Kernel does not exist: %s" % kernel_id)
tornado.web.HTTPError: HTTP 404: Not Found (Kernel does not exist: 86956e0a-1a7f-4338-9264-c39c8f65fc02)
404 GET /api/kernels/86956e0a-1a7f-4338-9264-c39c8f65fc02?1705880536585 (127.0.0.1) 2.46ms
404 GET /api/kernels/86956e0a-1a7f-4338-9264-c39c8f65fc02/channels?session_id=7e201f66-7c32-432c-9b9f-0dd174577783 (127.0.0.1): Kernel does not exist: 86956e0a-1a7f-4338-9264-c39c8f65fc02
Could not open static file '/favicon.ico'
Could not open static file '/style/bootstrap.min.css'
Could not open static file '/style/bootstrap-theme.min.css'
Could not open static file '/style/index.css'
Could not open static file '/logo/logo.png'

Case 3

I also tried manually copy-pasting the files from the voila-vuetify repository to the ~/miniconda3/envs/voila/share/jupyter/{voila,nbconvert}/templates folders, but it did not work either.

$ conda create -n voila voila ipykernel ipywidgets ipyvuetify 
$ conda list | grep -E "voila|ipyvuetify|ipykernel"
# packages in environment at /home/paul/miniconda3/envs/voila:
ipykernel                 6.29.0             pyhd33586a_0    conda-forge
ipyvuetify                1.8.10             pyhd8ed1ab_0    conda-forge
voila                     0.5.5              pyhd8ed1ab_0    conda-forge

I get the same error as "Case 2" when running voila --template vuetify-default ManyWidgets.ipynb.

Any help would be appreciated, thanks!

Description

Textareas with solo style are incorrectly displayed with voila-vuetify, the width is too large:

Reproduce

import ipyvuetify as v
solo1 = v.Textarea(solo=True, v_model='Solo')
solo2 = v.Textarea(solo=True, v_model='Solo')
tf1 = v.Textarea(v_model='Default')
tf2 = v.Textarea(v_model='Default')
v.Container(
    _metadata={'mount_id': 'content'},
    children=[
        v.Row(children=[solo1, solo2]),
        v.Row(children=[tf1, tf2])
    ]
)

Render with vuetify-base template.

Expected behavior

In comparison, there is no issue in Jupyterlab or with voila lab template:

Context

• voila version 0.2.16
• Operating System and version: Ubuntu 20.04.3 LTS
• Browser and version: Chrome 94.0.4606.54

        voila                     0.2.16             pyhd8ed1ab_0    conda-forge
        voila-vuetify             0.5.2              pyhd8ed1ab_0    conda-forge

Paste the output from your command line running `voila` here, use `--debug` if possible.

Paste the output from your browser Javascript console here.

If using JupyterLab

• JupyterLab version: 3.1.14

.../.local/share/jupyter/labextensions
        jupyter-vuetify v1.8.1 enabled OK
.../conda/share/jupyter/labextensions

jupyter-vue v1.6.0 enabled OK

[...]

Description

I'd like to use the base template for an application.

When rending a basic code, I can't succeed in filling the app.

Reproduce

I'm using poetry.

Here is my pyproject.toml:

[tool.poetry]
name = "mytest"
version = "0.1.0"
description = "A test."
authors = ["Test User <[email protected]>"]


[tool.poetry.dependencies]
python = "^3.6.9"
ipyvuetify = "^1.8.1"


[tool.poetry.dev-dependencies]
voila = "^0.2.11"
voila-vuetify = "^0.5.2"


[build-system]
requires = ["poetry-core>=1.0.0"]
build-backend = "poetry.core.masonry.api"

Place it in a dir test and run poetry install.

Add this code in a file test.ipynb

import ipyvuetify as v
from traitlets import Unicode, List

template = """
<template>
    <v-item-group mandatory>
        <v-container>
            <v-row v-for="(line, index) of lines" :key="index" class="my-0">
                <v-col>
                    <v-item v-slot="{ active, toggle }">
                        <v-card tile elevation="0" @click="toggle" class="my-0">
                            {{ line }}
                        </v-card>
                    </v-item>
                </v-col>
            </v-row>
        </v-container>
    </v-item-group>
</template>
"""

lines = ["a line #1", "a line #2", "a line #3"]

class TestCode(v.VuetifyTemplate):
    lines = List(Unicode(), lines).tag(sync=True)
    template = Unicode(template).tag(sync=True)
    _metadata = {'mount_id': 'content'}

TestCode()

Finally run poetry run voila --template vuetify-base test.ipynb.

Result: I only see the message: A widget with mount-id="content" should go here

It seems the _metadata = {'mount_id': 'content'} line is not correct.

Expected behavior

I just expect my widget TestCode() to appear in the voiila page.

Context

• voila version 0.2.11
• Operating System and version: xubuntu 20.04
• Browser and version: Firefox 91.0

Thanks for your help :)

Problem

Proposed Solution

Additional context

I think that the left sidebar should be over the topbar when activated:

hello i need help i want to deploy Voila, to fix this error using pm2 on Ubuntu 22.04

0|AnalyticEngine | /var/www/html/Voila_Home/AnalyticEngine.ipynb:2
0|AnalyticEngine | "cells": [
0|AnalyticEngine | ^
0|AnalyticEngine | SyntaxError: Unexpected token :
0|AnalyticEngine | at createScript (vm.js:80:10)
0|AnalyticEngine | at Object.runInThisContext (vm.js:139:10)
0|AnalyticEngine | at Module._compile (module.js:616:28)
0|AnalyticEngine | at Object.Module._extensions..js (module.js:663:10)
0|AnalyticEngine | at Module.load (module.js:565:32)
0|AnalyticEngine | at tryModuleLoad (module.js:505:12)
0|AnalyticEngine | at Function.Module._load (module.js:497:3)
0|AnalyticEngine | at Object. (/usr/local/lib/node_modules/pm2/lib/ProcessContainerForkLegacy.js:28:21)
0|AnalyticEngine | at Module._compile (module.js:652:30)
0|AnalyticEngine | at Object.Module._extensions..js (module.js:663:10)

voila.json:
{
"VoilaConfiguration": {

Activate or deactivate preheat kernel option.

"preheat_kernel": true
},
"VoilaKernelManager": {

A list of notebook name or regex patterns to exclude notebooks from using preheat kernel.

"preheat_denylist": [
],

Setting for AnalyticEngine.ipynb notebook

"AnalyticEngine.ipynb": {
"pool_size": 5, # Size of pool
},
},

Delay time in second before filling the kernel pool.

"fill_delay": 0
}
}

pm2 with ecosystem.config.js:
module.exports = {
apps: [
{
name: "voila-app-Home",
script: "/opt/miniconda/envs/project3/bin/voila",
args: ["--preheat_kernel=True", "--pool_size=5", "--no-browser", "/var/www/html/Voila_Home/AnalyticEngine.ipynb", "--template", "vuetify-default","--Voila.base_url=/Voila/"],
interpreter: "/opt/miniconda/envs/project3/bin/python",
autorestart: true,
watch: true,
max_memory_restart: "1G",
instances: 1,
env: {
Voila_config_file_whitelist: "/var/www/html/Voila_Home/"
}
},
],
};

thanks

Hello, i want to ask, i got an error from Voila Application on Ubuntu 22.04 using VPS Server with 8 GB Ram and 2 cores of Processor, are my preheat kernel is correct ? already 2 kernell from this error? or 5 kernel?, or i need more powerful server?, and this is my files and the errors:

This is my pm2 configuration:
module.exports = {
apps: [
{
name: "Voila-Test-Kernel-8",
script: "/opt/miniconda/envs/project3/bin/voila",
args: ["--debug","--no-browser", "/var/www/html/Voila_Home/AnalyticEngine.ipynb", "--template", "vuetify-default","--debug"],
interpreter: "/opt/miniconda/envs/project3/bin/python",
autorestart: true,
watch: true,
max_memory_restart: "7G",
instances: 1
},
],
};

This is my voila.json:
{
"VoilaConfiguration": {

Activate or deactivate preheat kernel option.

"preheat_kernel": true,
"file_whitelist": [
".*"
]
},
"VoilaKernelManager": {

A list of notebook name or regex patterns to exclude notebooks from using preheat kernel.

"preheat_denylist": [
],
"kernel_pools_config":{
"AnalyticEngine.ipynb": {
"pool_size": 2, # Size of pool
}
},

Delay time in second before filling the kernel pool.

"fill_delay": 0
}
}

this is my error:

[Voila] activity on 7d4e288d-174b-4c05-b10d-981be4a3d569: status (busy)
[Voila] activity on 7d4e288d-174b-4c05-b10d-981be4a3d569: execute_input
[Voila] activity on 7d4e288d-174b-4c05-b10d-981be4a3d569: status (idle)
[Voila] activity on 7d4e288d-174b-4c05-b10d-981be4a3d569: status (busy)
[Voila] msg_type: status
[Voila] content: {'execution_state': 'busy'}
[Voila] activity on 7d4e288d-174b-4c05-b10d-981be4a3d569: execute_input
[Voila] msg_type: execute_input

Traceback (most recent call last):
File "/opt/miniconda/envs/project3/lib/python3.9/site-packages/voila/notebook_renderer.py", line 264, in _jinja_cell_generator
output_cell = await self.executor.execute_cell(
File "/opt/miniconda/envs/project3/lib/python3.9/site-packages/voila/execute.py", line 69, in execute_cell
result = await self.async_execute_cell(cell, cell_index, store_history)
File "/opt/miniconda/envs/project3/lib/python3.9/site-packages/nbclient/client.py", line 1005, in async_execute_cell
raise DeadKernelError("Kernel died") from None
nbclient.exceptions.DeadKernelError: Kernel died
[Voila] AsyncIOLoopKernelRestarter: restarting kernel (1/5), keep random ports
[Voila] Starting kernel: ['/opt/miniconda/envs/project3/bin/python', '-m', 'ipykernel_launcher', '-f', '/tmp/voila_3y3nt5ve/kernel-7d4e288d-174b-4c05-b10d-981be4a3d569.json']
[Voila] Connecting to: tcp://127.0.0.1:52061
403 GET /voila/files/favicon.ico (127.0.0.1): File not whitelisted
403 GET /voila/files/favicon.ico (127.0.0.1) 1.06ms
[Voila] Requesting kernel info from 7d4e288d-174b-4c05-b10d-981be4a3d569
[Voila] Connecting to: tcp://127.0.0.1:53593
[Voila] activity on 7d4e288d-174b-4c05-b10d-981be4a3d569: status (busy)
[Voila] activity on 7d4e288d-174b-4c05-b10d-981be4a3d569: status (idle)
[Voila] Received kernel info: {'status': 'ok', 'protocol_version': '5.3', 'implementation': 'ipython', 'implementation_version': '7.34.0', 'language_info': {'name': 'python', 'version': '3.9.1', 'mimetype': 'text/x-python', 'codemirror_mode': {'name': 'ipython', 'version': 3}, 'pygments_lexer': 'ipython3', 'nbconvert_exporter': 'python', 'file_extension': '.py'}, 'banner': "Python 3.9.1 (default, Dec 11 2020, 14:32:07) \nType 'copyright', 'credits' or 'license' for more information\nIPython 7.34.0 -- An enhanced Interactive Python. Type '?' for help.\n", 'help_links': [{'text': 'Python Reference', 'url': 'https://docs.python.org/3.9'}, {'text': 'IPython Reference', 'url': 'https://ipython.org/documentation.html'}, {'text': 'NumPy Reference', 'url': 'https://docs.scipy.org/doc/numpy/reference/'}, {'text': 'SciPy Reference', 'url': 'https://docs.scipy.org/doc/scipy/reference/'}, {'text': 'Matplotlib Reference', 'url': 'https://matplotlib.org/contents.html'}, {'text': 'SymPy Reference', 'url': 'http://docs.sympy.org/latest/index.html'}, {'text': 'pandas Reference', 'url': 'https://pandas.pydata.org/pandas-docs/stable/'}]}
[Voila] Opening websocket /api/kernels/7d4e288d-174b-4c05-b10d-981be4a3d569/channels
[Voila] Connecting to kernel 7d4e288d-174b-4c05-b10d-981be4a3d569.
[Voila] Getting buffer for 7d4e288d-174b-4c05-b10d-981be4a3d569
[Voila] Connecting to: tcp://127.0.0.1:44347
[Voila] Connecting to: tcp://127.0.0.1:53593
[Voila] Connecting to: tcp://127.0.0.1:52061
[Voila] Connecting to: tcp://127.0.0.1:57769
[Voila] Connecting to: tcp://127.0.0.1:53593
[Voila] Connecting to: tcp://127.0.0.1:52061
[Voila] Nudge: attempt 1 on kernel 7d4e288d-174b-4c05-b10d-981be4a3d569
[Voila] activity on 7d4e288d-174b-4c05-b10d-981be4a3d569: status (busy)
[Voila] Nudge: IOPub received: 7d4e288d-174b-4c05-b10d-981be4a3d569
[Voila] Nudge: resolving iopub future: 7d4e288d-174b-4c05-b10d-981be4a3d569
[Voila] activity on 7d4e288d-174b-4c05-b10d-981be4a3d569: status (busy)
[Voila] activity on 7d4e288d-174b-4c05-b10d-981be4a3d569: status (idle)
[Voila] Nudge: control info reply received: 7d4e288d-174b-4c05-b10d-981be4a3d569
[Voila] Nudge: resolving control future: 7d4e288d-174b-4c05-b10d-981be4a3d569
[Voila] activity on 7d4e288d-174b-4c05-b10d-981be4a3d569: status (idle)
[Voila] activity on 7d4e288d-174b-4c05-b10d-981be4a3d569: status (busy)
[Voila] activity on 7d4e288d-174b-4c05-b10d-981be4a3d569: status (idle)
[IPKernelApp] ERROR | No such comm target registered: jupyter.widget.control
[Voila] activity on 7d4e288d-174b-4c05-b10d-981be4a3d569: status (busy)
[Voila] activity on 7d4e288d-174b-4c05-b10d-981be4a3d569: comm_close
[IPKernelApp] WARNING | No such comm: 7a2f35a9-4c96-4f02-936e-c1970685b011
[Voila] activity on 7d4e288d-174b-4c05-b10d-981be4a3d569: status (idle)
[Voila] activity on 7d4e288d-174b-4c05-b10d-981be4a3d569: status (busy)
[Voila] activity on 7d4e288d-174b-4c05-b10d-981be4a3d569: status (idle)
[Voila] activity on 7d4e288d-174b-4c05-b10d-981be4a3d569: status (busy)
[Voila] activity on 7d4e288d-174b-4c05-b10d-981be4a3d569: status (idle)
[Voila] AsyncIOLoopKernelRestarter: restart apparently succeeded

Hi,

I wanted to modify the voila.tpl specifying the notebook name instead of "Voila vuetify".
However, when I'm looking at the resources that are passed to the template, the only location I could put it is the notebook metadata.

However, in resources.metadata, the only key/value pair set is: "name"/"Notebook".

I tried, using the UI editor to change the "name" attribute of my notebook metadata but it doesn't work.
Do you have any idea on how to do so?

Thank you,

Problem

I'd like to use (https://github.com/vuejs/devtools)[vue devtools] to debug the rending. Yet, it only works when vue is running in development mode.

Is there a way to run voila vuetify in development mode?

Proposed Solution

Add an option so that vue is in development mode

It may be due to a recent update to Voila, but content does not show up as expected

In the example notebook, if you change the Line chart section with the following:

fig2 = plt.figure( title='Line Chart')
np.random.seed(0)
p = plt.scatter(x, y)

fig2.layout.width = 'auto'
fig2.layout.height = 'auto'
fig2.layout.min_height = '300px' # so it shows nicely in the notebook
fig2

p.interactions = {'click': 'select'}
p.selected_style = {'opacity': 1.0, 'fill': 'DarkOrange', 'stroke': 'Red'}
p.unselected_style = {'opacity': 0.5}
p.tooltip = bqplot.Tooltip(fields=['x', 'y'], formats=['', '.2f'])

# brushintsel = bqplot.interacts.BrushIntervalSelector(scale=p.scales['x'])

# def update_range(*args):
#     if brushintsel.selected is not None and brushintsel.selected.shape == (2,):
#         mask = (x > brushintsel.selected[0]) & (x < brushintsel.selected[1])
#         hist.sample = y[mask]
    
# brushintsel.observe(update_range, 'selected')
# fig2.interaction = brushintsel

There should be a tooltip on hover and a select on click. Both work in the notebook, but the tooltip on hover doesn't show in voila (the select on click works fine).

Description

Reproduce

1. Add "voila": {"template": "vuetify-default"} to the notebook metadata of ManyWidgets.ipynb
2. Render ManyWidgets.ipynb with voila

Or run voila --template vuetify-default ManyWidgets.ipynb (I have not tried)

Solution

Replace 'mount_id': 'content' with 'mount_id': 'content-main'.

Description

I'm rending a simple ipyvuetify widget.

• When the template is defined among the class traitlets, it works,
• When the template is in a separate file and its location is given as a traitlet, the loading widget progress keeps loading.

Reproduce

Let's define a module test.py with the following content:

import pathlib

import ipyvuetify as v

from traitlets import Any, Dict, List, Unicode


class TraitSelectVue(v.VuetifyTemplate):
    """A select widget to choose several values in a list.

    Example
    -------
    >>> SelectVue(items=["first", "second"], selected="first", label="test")

    Attributes
    ----------
    items: list
        The items to be selected.
    selected: list
        The list of selected items.
    label: str
        The select label.
    """

    template = Unicode(
        """
<v-select v-model="selected" :items="items" :label="label" multiple>
    <template v-slot:prepend-item>
        <v-list-item ripple @click="toggle">
            <v-list-item-action>
                <v-icon :color="selected.length > 0 ? 'indigo darken-4' : ''">
                    {{ icon }}
                </v-icon>
            </v-list-item-action>
            <v-list-item-content>
                <v-list-item-title>
                    Select All
                </v-list-item-title>
            </v-list-item-content>
        </v-list-item>
        <v-divider class="mt-2"></v-divider>
    </template>
</v-select>
<script>
    module.exports = {
        props: ["items", "selected", "label"],
        computed: {

            allSelected() {
                return this.selected.length === this.items.length
            },
            someSelected() {
                return this.selected.length > 0 && !this.allSelected
            },
            icon() {
                if (this.allSelected) return 'mdi-close-box'
                if (this.someSelected) return 'mdi-minus-box'
                return 'mdi-checkbox-blank-outline'
            },
        },

        methods: {
            toggle() {
                this.$nextTick(() => {
                    if (this.allSelected) {
                        this.selected = []
                    } else {
                        this.selected = this.items.slice()
                    }
                })
            },
        },
    }
</script>
    """
    ).tag(sync=True)

    items = List(Any()).tag(sync=True)
    selected = List(Any()).tag(sync=True)
    label = Unicode(default_value="").tag(sync=True)

    _metadata = Dict({"mount_id": "content"}).tag(sync=True)


class FileSelectVue(v.VuetifyTemplate):
    """A select widget to choose several values in a list.

    Example
    -------
    >>> SelectVue(items=["first", "second"], selected="first", label="test")

    Attributes
    ----------
    items: list
        The items to be selected.
    selected: list
        The list of selected items.
    label: str
        The select label.
    """

    template_file = Unicode(
        str(pathlib.Path(__file__).parent / "test.vue")
    ).tag(sync=True)

    items = List(Any()).tag(sync=True)
    selected = List(Any()).tag(sync=True)
    label = Unicode(default_value="").tag(sync=True)

    _metadata = Dict({"mount_id": "content"}).tag(sync=True)

and a vue file called test.vue in the same folder.

<v-select v-model="selected" :items="items" :label="label" multiple>
    <template v-slot:prepend-item>
        <v-list-item ripple @click="toggle">
            <v-list-item-action>
                <v-icon :color="selected.length > 0 ? 'indigo darken-4' : ''">
                    {{ icon }}
                </v-icon>
            </v-list-item-action>
            <v-list-item-content>
                <v-list-item-title>
                    Select All
                </v-list-item-title>
            </v-list-item-content>
        </v-list-item>
        <v-divider class="mt-2"></v-divider>
    </template>
</v-select>
<script>
    module.exports = {
        props: ["items", "selected", "label"],
        computed: {

            allSelected() {
                return this.selected.length === this.items.length
            },
            someSelected() {
                return this.selected.length > 0 && !this.allSelected
            },
            icon() {
                if (this.allSelected) return 'mdi-close-box'
                if (this.someSelected) return 'mdi-minus-box'
                return 'mdi-checkbox-blank-outline'
            },
        },

        methods: {
            toggle() {
                this.$nextTick(() => {
                    if (this.allSelected) {
                        this.selected = []
                    } else {
                        this.selected = this.items.slice()
                    }
                })
            },
        },
    }
</script>

Finally, create a notebook with a signle cell called test.ipynb. Fill the cell with

from test import TraitSelectVue, FileSelectVue

items = ["Paris", "Toulouse", "Sillery"]
selected = ["Sillery"]
label = "Where do you come from?"

# TraitSelectVue(items=items, selected=selected, label=label)  <-- line A
# FileSelectVue(items=items, selected=selected, label=label)   <-- line B

Execute voila --template vuetify-base test.ipynb.

Test 1: Uncomment line A and refresh the voila page.
The select widget appears correctly.

Test 2: Uncomment line B and refresh the voila page.
A loading widget progress bar keeps loading.

Expected behavior

I expect the select widget to appear in Test 2.

Context

• voila version 0.2.11
• voila-vuetify version: 0.5.2
• Operating System and version: Xubuntu 20.04
• Browser and version: Firefox 91.0

If using JupyterLab

• JupyterLab version: 3.1.10

Thanks for your help!

Hello,

It is struggling for me to figure it out .
Now I have wrote a basic ugly working code by ipywidgets . It is like

def get_feature(input_value1, input_value2, ):
      # ...
      return df

def get_model(input_value3, input_value4, ):
      # ...
      return pickled_model


def click_handler():
     
    # do validation to  input_value1, input_value2, input_value3, input_value4
    # I don't know how to alert error here

    feature = get_feature(..)
    mode = get_model(..)

    with top_out:
        clear_output(wait=True)
        draw(feature, model)

def draw(feature, model):
    f = plt.figure()

    # matplotlib plot
    plt.plot(...)

    # seaborn plot
    sns.boxplot(...)

    # plotly.py plot
    fig = go.Figure()
    fig.add_trace(
        go.Line(
            x=df1.ds,
            y=df1.y,
        )
    )
    py.iplot(fig)


button = widgets.Button(description='view')      
button.on_click(click_handler)

top_out = widgets.Output()

container = widgets.VBox(
    children=(
        widgets.HBox([target_date_input, *input_lst, button]),
        top_out,
    )
)

display(container)

I didn't found a example for my case. Could you give me a guide ?

Hello, great project, I love it. Is there an easy way to hide navigation? Or how is it possible to customize it. Maybe some css injection trick?

When installing voila-vuetify locally, using the latest voila, I get stuck on the loading page and nothing happens.

Hi,

First of all, thank you very much for this contribution regarding voila. As far as I saw, this is the best I've seen to get what people except : an easy dashboard implementation.

As I'm not familiar enough with vuetify, would it be possible to have an example on how to customize the left panel (menu) to display new functionalities related to the notebook itself? More precisely, instead of having hrefs there I would like, when clicking on any button, to get a new content itself rendered within a container set in the notebook.

This would enable to get a fully responsive dashboard with different metrics.

I hope m'y english was correct, and thank you again for this project !

Filing an enhancement request ... would be very nice to have a Material Design tree page when you start voila in a directory without a single target notebook.

Hi all,

I am currently creating a dashboard using voila-vuetify v0.5.2 where one of the elements is an interactive pyechart wordcloud. A simplified version of the code is as follows:

from collections import Counter
import ipywidgets as widgets
import ipyvuetify as v
import lorem

from pyecharts.charts import WordCloud
import pyecharts.options as opts

WORDS = lorem.text()*100
WC = WordCloud(init_opts=opts.InitOpts(width='100%', height='200px')).add(
    series_name="Test",
    shape='diamond',
    width='100%',
    pos_top='0px',

    data_pair=Counter(WORDS.split()).most_common())

out = widgets.Output()

v.Col(_metadata={'mount_id': 'content-main'}, class_="pa-1",cols=12, md=1,children=[
    v.Card(style_='height: 210px', children=[
        v.CardText(children=[
            out
        ])
    ])
])

out.append_display_data(WC.render_notebook())

This loads nicely in the Jupyter notebook I am using, and when run with voila file.ipynb the following (desired) output is returned:

However, when I run the notebook with voila --template vuetify-default file.ipynb the output has large column of white space on the left hand side (highlighted in the page source):

Is there a way to remove this extra element that seems to have appeared in the output?
Also, apologies if this isn't a bug on your side and is just a mistake on my part.

Thanks,
James

This is a fantastic project! It really fills a critical hole in the ecosystem. Thank you for all the work so far.

I would like to display a pandas dataframe either as a SlickGrid, QGrid, or a Vuetifyv-data-table. Could you please provide an example of how to do that?