Capture and Display User Interaction Data

Dash Python
1

I’m trying to create an application that logs each time the user interacts with the app and displays those results in a Data Table.

Currently, the app can only display one interaction at a time. I would like each result to get added as a new row to the table.

import pandas as pd
from dash import Dash, html, dcc, Input, Output, dash_table
import datetime

app = Dash(__name__)

user = "Rebecca"


app.layout = html.Div([
    html.H1('Demoing User Interaction data capture'),
    dcc.Dropdown(options=['One', 'Two', 'Three'], id='dropdown'),
    html.Div(children = {}, id = 'row-data', style = {'display': 'none'}),
    html.Div(children = {}, id = 'display-data')])

# Callback that creates the row data
@app.callback(
    Output(component_id='row-data', component_property='children'),
    Input(component_id='dropdown', component_property='value')

)
def capture_data(valChosen):
    user = "Rebecca"
    current_time = datetime.datetime.now()

    if valChosen == None:
        new_row = [user, current_time, f'{user} logged on']

    else:
        user = "Rebecca"
        current_time = datetime.datetime.now()
        valChosenStr = f'{user} chose ' +str(valChosen)
        new_row = [user, str(current_time), valChosenStr]

    return new_row

@app.callback(
    Output(component_id='display-data', component_property='children'),
    Input(component_id='row-data', component_property='children')
)
def display_data(newRow):
    newRowDf = pd.DataFrame({'User': newRow[0], 'Time': newRow[1], 'Activity': newRow[2]}, index = [0])
    dataTable = dash_table.DataTable(newRowDf.to_dict('records'),[{"name": i, "id": i} for i in newRowDf.columns])
    return dataTable

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

Hello @theRebeckoning,

Do you want every users action, including actions on the client side?

To log user interaction on the server-side, I’d recommend having an AG Grid and using the rowTransaction method add and pass the new row’s data to the grid.

You could also use Patch() from Dash 2.9+, but I think rowTransaction is easier. You’d also have to allow_duplicate=True on each of your methods for logging.

However, if you were to use JS, you could just subscribe to the different events that you want to log and then send the new data in a client_side.callback that would add the data via rowTransaction.

1 Like
3

Thanks jinnyzor, I’ll take a look at using the rowTransaction method. We might start using JS in the future but for now are sticking with python

1 Like