Control display of an ipyvuetify page by a dropdown works in notebook not in voila

Question

I have encountered another working in notebook but not in voila issue. I have tried for a couple of hours but feel like I am still missing something and therefore seeking expert opinions here.

I have a function create_pages_and_run() that takes in a dictionary, d, as an input to generate a dashboard (the data type is ipyvuetify.generated.App.App). The dictionary can be retrieved from a json file scenario_dict using a country name as key where I designed a dropdown to collect the country name.

The purpose is to ask user to select a country name and the page will be redrawn/refreshed. I have the following code that works in notebook but not in Voila. (Works means that when a new country name is selected, the dashboard is displayed with the widgets using data from that countries)

scenario_dropdown = widgets.Dropdown(
    options=all_scenarios,
    value=initial_scenario,
    description="Scenario",
    layout=widgets.Layout(margin="0 20px 0 0", height="39px", width="15%"),
)

d = scenario_dict[initial_scenario]
app = create_pages_and_run(d)

#the below code works for notebook
def on_change(change):
    global d, app
    if change["name"] == "value" and (change["new"] != change["old"]):
        d = scenario_dict[change["new"]]
        app = create_pages_and_run(d)
        clear_output()
        display(app)

scenario_dropdown.observe(on_change)

My failed code using ipywidgets.Output is as below. (Failed in the sense, after selecting country name in the dropdown no change is observed).

scenario_dropdown = widgets.Dropdown(
    options=all_scenarios,
    value=initial_scenario,
    description="Scenario",
    layout=widgets.Layout(margin="0 20px 0 0", height="39px", width="15%"),
)

d = scenario_dict[initial_scenario]
app = create_pages_and_run(d)
out  = widgets.Output()
with out:
    display(app) 

# the code works failed for voila
def on_change(change):
    global d, app, out
    if change["name"] == "value" and (change["new"] != change["old"]):
        d = scenario_dict[change["new"]]
        app = create_pages_and_run(d)
        out.clear_output()
        with out:
            display(app)
        display(out)

scenario_dropdown.observe(on_change)

I appreciate your help, thanks.

Answer 1

I'm not sure why your code didn't work. Maybe it was the use of globals which can be avoided. Could you provide a working example to test. Here is a working example based on your code that works in Voila.

import ipywidgets as widgets

all_scenarios = ['aa','bb','cc']
initial_scenario = all_scenarios[0]
scenario_dict = {}
scenario_dict['aa'] = 'do_this'
scenario_dict['bb'] = 'do_that'
scenario_dict['cc'] = 'do_what'

def create_pages_and_run(action):
    print(action)

scenario_dropdown = widgets.Dropdown(
    options=all_scenarios,
    value=initial_scenario,
    description="Scenario",
    layout=widgets.Layout(margin="0 20px 0 0", height="39px", width="15%"),
)

d = scenario_dict[initial_scenario]
out  = widgets.Output()
with out:
    create_pages_and_run(d)
app = widgets.VBox([scenario_dropdown, out])   

def on_change(change):
    if change["name"] == "value" and (change["new"] != change["old"]):
        d = scenario_dict[change["new"]]
        out.clear_output()
        with out:
            create_pages_and_run(d)
scenario_dropdown.observe(on_change)
app