Page unresponsive when trying to open an accordion

Dash Python
1

Hi,

I created a layout which contains nested accordion.
When I try to open the accordion I get: “Page unresponsive ( wait to be responsive or exit)”.
Is there a way that I can debug it? ( I removed the callbacks to see if it causes the issue but it stills give me that note)
Or a different question is why it is happing? it there a build-in timer to DASH?

2

Hello @MaayanShoshan,

This is hard to say without seeing your code. Could you please provide an MRE?

3

Hi!
Thanks for responding and sorry for my late response ( I was sick).
The code which make the page un-responsive is copied below:


def var_table(df, id):
    return dash_table.DataTable( df.to_dict('records'), [{"name": i, "id": i} for i in df.columns],
    # style_table={ 'overflowY': 'auto', 'overflowX': 'auto' },
                   id=id
        )

dmc.AccordionPanel(html.Div([html.P("Mappings", className="rw-text"),
                              html.P([ html.A("BP", href = "#")], className="rw-text"),      
                                html.P([html.A("DP", href = "#")], className="rw-text"),
                                html.Div(
                                        var_table(var_df, raw+var+'_table' )
                                        ,
                                        style=style,
                                        )
                             ]))

This code runs in a loop and generates 1400 small tables.
When I used dbc.Table.from_dataframe instead of dash_table.DataTable, it didn’t give me the ‘un-responding’ warning.
But I need my tables to be interactive, so I do need to use dash_table :confused:

4

To clarify, the accordion worked if you used a different style of table?

Why do you need to display all the tables at once?

5

Yes, I replaced the style of the table and the accordion now opens quickly.
I don’t need to display all the tables at once, the tables are embedded in the close accordion, each table in a different accordion (it is a big nested accordion) , so when the layout is uploaded, it takes time.
But I will keep the simple table style, dash_table is indeed pretty havey.

Thank you!

7

Instead of having all the tables drawn, just use the click events on the accordion to display the table in a specific area. Either the panel, or somewhere else.

8

Didn’t think about it, sounds good, thanks!

9

I have different question, that I hope you could help me.
The main propose of my GUI is that the user first choose the database source and then I’m updating the layout with the desired data the user wants.
My nested accordion contains callbacks that presents tables, graphs etc. The number of items in the accordion depends in the number of datasets in the database that the user requested.
I though that I can just create new accordions, per requests , containing predefined ‘id’ for the callbacks. But the callbacks doesn’t work when I update the layout.
Am I trying something un realistic?

10

I think it may be possible.

So, in the left, or so, you have your database options as checkboxes. When a user selects it, it builds the right side, where they can see stuff and manipulate the data. You want all these options to be displayed in a scrollable, collapsible way.

Is that correct?

11

Exactly.
I managed resolving this issue with Pattern-Matching Callbacks,
Thanks!

12

So finally I created a simple layout with pre-defined nested accordion which presents tables with callbacks (instead of embedding many tables in the closed accordion), I am using Pattern-Matching Callbacks to manage all my callbacks.
I will be happy to share my code once I’m done,

Thanks a lot for all the good ideas