voila-dashboards / voila-vuetify

Dashboard template for Voilà based on VuetifyJS
Other
154 stars 41 forks source link

I can't fill in the base template #48

Closed etienne-monier closed 3 years ago

etienne-monier commented 3 years ago

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 <test.user@testuser.fr>"]

[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

Thanks for your help :)

etienne-monier commented 3 years ago

up!

mariobuikhuizen commented 3 years ago

Thanks for the detailed report!

_metadata should also be a traitlet:

_metadata = traitlets.Dict(default_value={'mount_id': 'content'}).tag(sync=True)
etienne-monier commented 3 years ago

Ok, I did not think about that. Thanks for your help :)