Initial value for property updated within callback taking hoverData

Dash Python
1

I have some image polar-spec that is updated within a callback based on hoverData from graph-timeseries graph (the second callback in the example below). This works nicely however I have struggled to find out how to have the polar-spec image initialised when the app is started (i.e., before I have hovered on graph-timeseries). Is there any way I could have a default image that is shown before any hovering event in this case please?

Thanks


body = html.Div(
    [
        dbc.Col(
            html.Div(
                dcc.Graph(id="graph-timeseries")
            ),
        width=7
        ),
        dbc.Col(
            html.Div(
                children=[
                    html.Img(
                        id="polar-spec",
                        style={
                            'height' : '100%',
                            'width' : '100%',
                            'float' : 'left',
                            'position' : 'relative',
                        },
                    )
                ]
            ),
            width=2
        ),
        dcc.Interval(
            id='interval-component',
            interval=3600 * 1000,
            n_intervals=0
        )
    ]
)


app.layout = html.Div([body])


@app.callback(
    Output('graph-timeseries', 'figure'),
    [Input('interval-component', 'n_intervals')]
)
def update_figure(n):
    df = pd.read_gbq(sql, project_id=PROJECT)
    return show_timeseries(df)


@app.callback(Output('polar-spec', 'src'),
              [Input('graph-timeseries', 'hoverData')])
def update_polar(hoverData):
    try:
        dtime = parse(hoverData["points"][0]["x"])
        src = show_spectra(dtime)
    except Exception as exc:
        src = ""
    return src
2

Hi @ocerafa, why don’t you specify the src attribute of the html.Img in the layout? In the callback you can replace the try/except logic by

if hoverData is not None:
    ....
else:
    return dash.no_update

where dash.no_update aborts the callback (so you would keep the initial image defined in the layout). Does that help? If not, please tell us more :slight_smile:

3

Hi @Emmanuelle this is a nice solution thank you! I didn’t realise the exception was triggered when the app started so another option that also works is setting the initial image within the except (or else) block.

Thank you!