Click event for large number of html.Span

Dash Python
,
1

I’ve a list of html.Span components, each one is a line in my history log with timestamp. Now I’d like to be able to catch the span’s on click event and get that timestamp to move my chart to that timestamp. I’m trying to do that with Dash’s matching callback but frankly I don’t really understand it, and my concern is that for a large number of spans the app’s performance might be affected.

So what is the best method to handle this?

2

HI @uzimaster I think your approach should be OK. As far as pattern matching callbacks, here an example assuming you have one Output() only . Using ALL, the argument for stamp is a list. Extracting the triggering index, you know the index of the triggering timestamp in your list.

from dash import Dash, Input, Output, html, ALL, ctx

app = Dash(__name__)
app.layout = html.Div(
    [
        html.Pre(id='out'),
        html.Div(
            [
                html.Span(f'Span_{idx}', id={'type': 'span', 'index': idx})
                for idx in range(10)
            ],
        )
    ]
)


@app.callback(
    Output("out", "children"),
    Input({'type': 'span', 'index': ALL}, "n_clicks_timestamp"),
    prevent_initial_call=True
)
def do(stamp):
    trigger_id = ctx.triggered_id.index
    return stamp[trigger_id]


if __name__ == '__main__':
    app.run_server(debug=True)

mred pmcb

1 Like
3

Thank you. I tried your solution and it does work, but when my history went up to thousands, the browser almost hang. I’m thinking of catching the event from their parent (the outer html.Pre component). Is this possible?

4

You might be able to use the EventHandler component,

2 Likes
5

Thank you! This component is amazing! Wrapped my html.Pre with it and I can catch every single event from any of its children components.

1 Like