Multi-Page Dash app not querying/displaying new sql data upon page refresh

Dash Python
1

Hi all,

So for this multi-page dash app the new sql data isn’t being displaying upon page refresh. The new data does get queried/displayed if I make a file change and dash hot-reloads. Shouldn’t display_performance() be called every time the page loads since it’s part of layout? Or am I missing something? Thanks in advance!

index.py


import dash
from dash import html, dcc
from dash_extensions.enrich import DashProxy, MultiplexerTransform
import dash_bootstrap_components as dbc

# Create app.
app = DashProxy(
    use_pages=True,
    suppress_callback_exceptions=True,
    transforms=[MultiplexerTransform()],
    external_stylesheets=[dbc.themes.JOURNAL],
    meta_tags=[
        {
            "name": "viewport",
            "content": "width=device-width, initial-scale=1.0",
        }
    ],
)
dash.register_page(__name__, path="/")

app.layout = html.Div([
    html.Div(
        [
            html.Div(
                dcc.Link(
                    f"{page['name']} - {page['path']}", href=page["relative_path"]
                )
            )
            for page in dash.page_registry.values()
        ]
    ),
    dash.page_container
])

if __name__ == "__main__":
    app.run_server(host="0.0.0.0", port=8050, debug=True, use_reloader=True)

pages/metadata.py

import dash
from dash import dash_table, callback
from dash_extensions.enrich import Input, Output
from dash import html, dcc
import dash_bootstrap_components as dbc

import psycopg2
import pandas as pd

dash.register_page(__name__)

def get_data():
    conn_indicator = psycopg2.connect(
        ...
    )

    # Stats Tab
    sql = "SELECT run_id, run_type, recorded_time\
        FROM public.run_information;"
    metadata_df = pd.read_sql(sql, con=conn_indicator)
    conn_indicator.close()
    return metadata_df

def display_performance():
    metadata_df  = get_data()


    return dbc.Container(
        [
            dcc.Store(id="metadata_df", data=metadata_df.to_dict("records")),
            html.P("Select the Run ID"),
            dcc.Dropdown(
                id="run-id-dropdown",
                options=[{"label": i, "value": i} for i in metadata_df["run_id"].tolist()],
            ),
            html.Div(
                [
                    dcc.Tabs(
                        [
                            dcc.Tab(
                                label="Stats",
                                children=[
                                    html.H5("Metadata Table"),
                                    dash_table.DataTable(
                                        id="table1",
                                        columns=[{"name": i, "id": i} for i in metadata_df.columns],
                                        data=metadata_df.to_dict("records"),
                                    ),
                                ],
                            ),
                        ]
                    ),
                ]
            ),
        ],
        fluid=True,
    )


layout = html.Div([
    display_performance()
])

"""
This callback updates the datatables under the Stats tab through Run ID.
Input: run-id-dropdown's value
Output: Returns our updated table on filter from dropdown selector

"""

@callback(
    [Output("table1", "data")],
    [
    Input("run-id-dropdown", "value"),
    ],
)
def update_stats(value, metadata_df):
    if dash.callback_context.triggered[0]["prop_id"] == ".":
        return dash.no_update

    metadata_df = pd.DataFrame.from_records(metadata_df)


    table1_df = metadata_df.loc[metadata_df["run_id"] == value]

    return table1_df.to_dict("records")
2

Solved! Moved into a function. Ex: Live Updates | Dash for Python Documentation | Plotly

1 Like