Vizro: a high-level framework built on top of Dash

Dash Python
,
16

Hi @Nagendra and welcome to the community! Thanks for your comments and question!

Because Vizro is built on top of Dash, the whole Dash callback mechanism is still available inside Vizro and works exactly the same way as in Dash.

The example in the docs actually has a lot going on, and some of it is done in a slightly unusual way (e.g. writing the graph out using data and layout arguments explicitly). So I’ve simplified it a bit here just to make it easier to follow. All the additional column selection callbacks etc. that the full example has are possible though.

Note:

  • supplying keyword arguments to dash_data_table doesn’t need to you to define a custom table - just using the built
    in vizro.tables.dash_data_table with those arguments is enough - see docs. You only really need to define a custom table if you’re doing something quite advanced/unusual
  • it is possible to transfer data from one page to another. The easiest way to do this is a dcc.Store (see @AnnMarieW’s example here - Vizro uses Dash pages under the hood). If you explain a bit more what you’d like to do then I can show you how to do this in Vizro. In the future we will probably have built in actions to simplify this process (e.g. you might just do send_to_store(data) and fetch_from_store(data)) but for now the solution is basically identical to Dash
import pandas as pd

import vizro.models as vm
from vizro import Vizro
from vizro.tables import dash_data_table

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv")

table = dash_data_table(
    id="datatable-interactivity",
    data_frame=df,
    sort_action="native",
    row_selectable="multi",
    page_action="native",
    page_current=0,
    page_size=10,
)

# RadioItems don't typically live in the components part of the screen (they're normally in controls)
# so you need to enable them manually.
vm.Page.add_type("components", vm.RadioItems)

page = vm.Page(
    title="Callback example with Dash DataTable",
    components=[
        vm.Table(
            title="Custom Dash DataTable",
            figure=table,
        ),
        vm.RadioItems(id="country_select", options=[""]),
        # I made this a Card rather than Graph to keep it simple but the principle is the same
        vm.Card(id="card", text="Select countries and then a radio item"),
    ],
)


@callback(
    Output("country_select", "options"),
    Input("datatable-interactivity", "derived_virtual_data"),
    Input("datatable-interactivity", "derived_virtual_selected_rows"),
)
def update_radio_options(data, selected_row_ids):
    # Don't supply any values to radio items if no rows are selected
    if selected_row_ids is None:
        return None

    data = pd.DataFrame(data)
    countries = data.loc[selected_row_ids, "country"]

    return countries


@callback(Output("card", "children"), Input("country_select", "value"), prevent_initial_call=True)
def update_card(value):
    return f"You chose **{value}**"


dashboard = vm.Dashboard(pages=[page])
Vizro().build(dashboard).run()
2 Likes