Dash rendering is too slow with callback in loop...need help

@sahanar17 wrote:

Hi All,

I am new to dash and struggling to get this working. I need help.

I have a html table with around 1500 rows and 4 columns. Each item in column 1 is a link which opens to a modal and displays info of column 5 & 6. I am generating the table from a csv file.

So far, I have got the table generated.

By referring to the dash gallery (https://github.com/plotly/dash-sample-apps/blob/master/apps/dash-web-trader/app.py) I have also got the modals to open on clicking the 1st column items and closing on ‘X’ from the modal.

This works fine if I have about 100 odd rows. But as I mentioned earlier, I have 1500 rows and it takes forever for the server to load. I looked around for clientside callback functions, but I am not sure how I could use with my scenario. Please help me on how I could get this working.

my_apis=[]
for i in range(len(df)):
        if df.columns[0] == 'XYZ':
                value = df.iloc[i]['XYZ']
                my_apis.append(value)



def generate_table(dataframe):

    rows = []
    for i in range(len(dataframe)):
        row = []
        for col in dataframe.columns:
            value = dataframe.iloc[i][col]
            # update this depending on which
            # columns you want to show links for
            # and what you want those links to be
            if col == 'XYZ':
                cell = html.Td(html.Button(children=value, id=value, n_clicks=0))
            else:
                cell = html.Td(children=value)
            row.append(cell)
        rows.append(html.Tr(row))
    return html.Table(
        # Header
        [html.Tr([html.Th(col) for col in dataframe.columns])] +

        rows
    )


def modal(api):
    return html.Div(
        id=api + "modal",
        className="modal",
        style={"display": "none"},
        children=[
            html.Div(
                className="modal-content",
                children=[
                    html.Span(
                        id=api + "closeModal", className="modal-close", children="x"
                    ),
                    html.P(id="modal" + api, children=api),


                ],
            )
        ],
    )

app.layout = html.Div([html.Div([generate_table(df)]),html.Div([modal(api) for api in my_apis])])

def generate_modal_open_callback():
    def open_modal(n):
        if n > 0:
            return {"display": "block"}
        else:
            return {"display": "none"}

    return open_modal


# Function to close modal
def generate_modal_close_callback():
    def close_modal(n):
        return 0

    return close_modal

for api in my_apis:
    app.callback(Output(api + "modal", "style"), [Input(api, "n_clicks")])(
        generate_modal_open_callback()
    )


    app.callback(
        Output(api, "n_clicks"),
        [
            Input(api + "closeModal", "n_clicks")
        ],
    )(generate_modal_close_callback())

Posts: 1

Participants: 1

Read full topic