Infinite Loop with RadioItems + SQL Queries

Dash Python
1

Hello Plotly community and thanks for the amazing product, I am enjoying Dash a lot! Anyway I am not an experienced programmer and I apologize in advance if I am asking something stupid.

My issue is this:
I have 3 sql tables I would like to visualize with a DataTable, and I would like to be able to switch between these 3 via a RadioItems object.
What I wrote up to know looks like this:
(inspirated by User input that updates an SQL Query)

app = dash.Dash(__name__)
server = app.server

def create_table(sql):
    conn = sqlite3.connect("/home/luca/fedigraph.sqlite3")
    df = pd.read_sql_query(sql, conn)
    conn.close()
    return html.Div(id='table_div', children=dash_table.DataTable(
        id='table',
        columns=[{"name": i, "id": i} for i in df.columns],
        data=df.to_dict('records'),
    ))

app.layout = html.Div([html.Label('Federated Platforms'),
                       dcc.RadioItems(
                           id='radio',
                           options=[
                               {'label': 'PeerTube', 'value': 'peertube'},
                               {'label': 'Friendica', 'value': 'friendica'},
                               {'label': 'Pleroma', 'value': 'pleroma'}
                           ],
                           value = 'peertube',
                       ),
                       html.Div(id='table_div')
                       ])


@app.callback(
    Output(component_id='table_div', component_property='children'),
    [Input(component_id='radio', component_property='value')]
)
def run_query(value):
    sql = "select count(*) from " + value + "_instances where timestamp > '2020-01-22 00:00:00'"
    return create_table(sql)


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

However, this ends up in an infinite loop and I can not figure out why. Any information or help would be extremely appreciated.
Thanks a lot.
Luca

2

Your create_table function is returning an html.Div with an id='table_div to an compent that already exists with this ID.

Maybe have your create_table function only return the table.

3

Hey thanks a lot for your super quick reply!
What I posted is the whole code. There is no error displayed, but the callback function is called infinitely. To check that, I added a print loop of the sql query argument at the beginning of the “create table” function, and it gets printed continuously with the default value of ‘peertube’ I wrote inside the radio item object. I tried to use input boxes or dropdowns instead of it but the result is always the same.
The RadioItems object gets displayed, the table however is obviously wrong since the page is updating continuously.

4

sorry…my edit took longer before your response…please see above.

5

Thanks! Your suggestion of changing the div object to a plain table unblocked the situation a bit. If I print the panda dataframe in the command line I get correct output after clicking in the radio items in the browser:

select count(*) from peertube_instances where timestamp > '2020-01-21 00:00:00'
[{'count(*)': 451}]
select count(*) from friendica_instances where timestamp > '2020-01-21 00:00:00'
[{'count(*)': 105}]
select count(*) from pleroma_instances where timestamp > '2020-01-21 00:00:00'
[{'count(*)': 617}]

I changed the Output as follows:

@app.callback(
    Output(component_id='table', component_property='data')

and the app.layout as follows:

app.layout = html.Div([html.Label('Federated Platforms'),
                       dcc.RadioItems(
                           id='radio',
                           options=[
                               {'label': 'PeerTube', 'value': 'peertube'},
                               {'label': 'Friendica', 'value': 'friendica'},
                               {'label': 'Pleroma', 'value': 'pleroma'}
                           ],
                           value = "peertube",
                       ),
                       dash_table.DataTable(id='table')
                       ])

but I get the following error in the browser:

Invalid argument `data` passed into DataTable with ID "table".
Expected an array.
Was supplied type `object`.
Value provided: 
{
  "props": {
    "columns": [
      {
        "name": "count(*)",
        "id": "count(*)"
      }
    ],
    "data": [
      {
        "count(*)": 451
      }
    ]
  },
  "type": "DataTable",
  "namespace": "dash_table"
}

Any suggestions? Is perhaps the output wrong? I already checked the data parameter of the table is already a dict list