Clickable images that trigger callback?

Dash Python
1

I would like to create an image thumbnail gallery where the previews are clickable. Upon click the data should be loaded in an interactive graph. I am trying to use the pattern matching callbacks, but without success so far.

I am creating in memory matplotlib figures and serve them with something like:

...
images = []
for i, src in enumerate( sources ):
    _id = f'preview-{i}'
    images.append(
        html.A(id={'value': _id, 'type': 'image'}, children=html.Img(src=src))
    )
return images

And the callback that waits for the image event looks like:

    @app.callback(
        Output('pko-image-clicked-output', 'children'),
        Input({'type': 'image', 'index': ALL}, 'n_clicks'),
    )
    def image_clicked(ndx):
        if ndx is None or len(ndx)==0: raise PreventUpdate
        ctx = dash.callback_context
        return int(ctx.triggered[0]['prop_id'].split(',')[0].split('"')[3])

The callback is triggered whatever image is clicked. It doesn’t look very elegant, but it works.