VListItemGroup with mandatory breaks the launch

[AnthonyTSV]

Hi! I'm trying to use Trame to show some plots. I want to disable the option to deselect the plot, so I've encountered a problem. When adding a mandatory argument to any Vuetify item with selection and iterating over a plot list, the server opens with a white screen and the page doesn't respond. Deleting the mandatory option, the server runs properly.

My code:

import plotly.graph_objects as go
import plotly.express as px

from trame.app import get_server
from trame.ui.vuetify import SinglePageWithDrawerLayout
from trame.widgets import vuetify, plotly

server = get_server()
state, ctrl = server.state, server.controller

def contour_plot():
    """https://plotly.com/python/contour-plots/"""
    return go.Figure(
        data=go.Contour(
            z=[
                [10, 10.625, 12.5, 15.625, 20],
                [5.625, 6.25, 8.125, 11.25, 15.625],
                [2.5, 3.125, 5.0, 8.125, 12.5],
                [0.625, 1.25, 3.125, 6.25, 10.625],
                [0, 0.625, 2.5, 5.625, 10],
            ]
        )
    )

def bar_plot(color="Gold"):
    return go.Figure(data=go.Bar(y=[2, 3, 1], marker_color=color))

def scatter():
    df = px.data.iris()

    fig = px.scatter(
        df,
        x="sepal_width",
        y="sepal_length",
        color="species",
        title="Using The add_trace() method With A Plotly Express Figure",
    )

    fig.add_trace(
        go.Scatter(
            x=[2, 4],
            y=[4, 8],
            mode="lines",
            line=go.scatter.Line(color="gray"),
            showlegend=False,
        )
    )

    return fig

card_config = {}

card_config["plots"] = {
            "type": "figure",
            "plot_list": [
                {"text": "Contour", "value": contour_plot},
                {"text": "Bar", "value": bar_plot},
                {"text": "Scatter", "value": scatter},
            ],
            "title": "Plots"
        }

card_config["else"] = {
            "type": "figure",
            "plot_list": [

                {"text": "Bar_", "value": bar_plot},
                {"text": "Contour_", "value": contour_plot},
                {"text": "Scatter_", "value": scatter},
            ],
            "title": "Else"
        }

def on_event(type, e):
    print(type, e)

def _ui_card(title, ui_name):
    with vuetify.VCard(v_show=f"active_ui == '{ui_name}'"):
        vuetify.VCardTitle(
            title,
            classes="grey lighten-1 py-1 grey--text text--darken-3",
            style="user-select: none; cursor: pointer",
            hide_details=True,
            dense=True,
        )
        content = vuetify.VCardText(classes="py-2")
    return content

def add_card(key, value):
    with _ui_card(value["title"], key):
        with vuetify.VList(rounded=True):
            with vuetify.VListItemGroup(
                v_model=("active_plot", "Contour"),
                color="primary",
                mandatory=True
                ):
                for key in value["plot_list"]:
                    with vuetify.VListItem(
                        value=key["text"]
                        ):
                        with vuetify.VListItemContent():
                            vuetify.VListItemTitle(key["text"])

@state.change("active_plot")
def update_plot(active_plot, **kwargs):
    if state.active_ui:
        for item in card_config[state.active_ui]["plot_list"]:
            if item["text"] == active_plot:
                ctrl.figure_update(item["value"]())

@state.change("visualization_mode")
def __update_mode(visualization_mode, **kwargs):
    for key in card_config.keys():
        if visualization_mode == key:
            state.active_ui = key
    state.active_plot  = card_config[state.active_ui]["plot_list"][0]["text"]
    update_plot(state.active_plot)

state.trame__title = "Plotly"

with SinglePageWithDrawerLayout(server) as layout:
    layout.title.set_text("trame ❤️ plotly")
        
    with layout.drawer:
        with vuetify.VRadioGroup(
            v_model = (
                "visualization_mode", next(iter(card_config))
            ),
            classes="ml-4", height = 100
            ):
            for key, value in card_config.items():
                vuetify.VRadio(label= value["title"], value = key)
        for key, value in card_config.items():
            add_card(key, value)
    with layout.content:
        with vuetify.VContainer(fluid=True):
            with vuetify.VRow(dense=True):
                vuetify.VSpacer()
                figure = plotly.Figure(
                    display_logo=False,
                    display_mode_bar="true",
                    # click=(on_event, "['selected', utils.safe($event)]"),
                    # hover=(on_event, "['hover', utils.safe($event)]"),
                    # selecting=(on_event, "['selecting', $event]"),
                    # unhover=(on_event, "['unhover', $event]"),
                )
                ctrl.figure_update = figure.update
                vuetify.VSpacer()

if __name__ == "__main__":
    server.start()

Any help would be appreciated.

[jourdain]

So the issue with your code base is that you are sharing the same variable name as model for 2 different ensembles (Contour, Bar, Scatter) vs (Bar_, Contour_, Scatter_). So forcing it to be in that list became impossible and the client side fail trying.

Pushed a working solution here

[jourdain]

Yes definitely. We need to use a different name for your v_model.

[jourdain]

And rather than using the @state.change, you can trigger your callback by using the component @change event.

def update_plot(key_name):
    var_name = f"active_plot_{key_name}"
    selected_plot = state[var_name]
    # ...

def add_card(key, value):
    with _ui_card(value["title"], key):
        with vuetify.VList(rounded=True):
            with vuetify.VListItemGroup(
                v_model=(f"active_plot_{key}", card_config[key]["plot_list"][0]["text"]),
                color="primary",
                mandatory=True,
                change=(update_plot, f"['{key}']"),
                ):
                for key in value["plot_list"]:
                    with vuetify.VListItem(
                        value=key["text"]
                        ):
                        with vuetify.VListItemContent():
                            vuetify.VListItemTitle(key["text"])

[AnthonyTSV]

Thank you very much, Sebastien! Hope you have a great day!

[AnthonyTSV]

How would one change the code, to switch to vuetify3? I've tried the following:

def add_card(key, value):
    with _ui_card(value["title"], key) as card:
        with vuetify3.VList(
            v_model=(f"active_plot_{key}", card_config[key]["plot_list"][0]["text"]),
            color="primary",
            mandatory=True,
            change=(update_plot, f"['{key}']"),
            ):
            for key in value["plot_list"]:
                vuetify3.VListItem(
                    key["text"],
                    value=key["text"]
                    )

[jourdain]

Not sure, but you can look at vuetify for more details and options.