Weird functionality when opening DBC modals when clicking on a cell in datatable

Dash Python
1

Hi all,

I’m encountering some weird functionality using DBC modals when clicking on a cell in a datatable. My code is set up to open a modal when I click on a cell in specific columns. The modals work fine when I click on a cell that is a data cell. However, if I try to sort by header in the header cell, a blank modal will open up. How do I prevent a modal from opening when a user sorts a column?

My simplified code is below:

table = dash_table.DataTable(
    id='table1',
    markdown_options={"html": True},
    sort_action='custom',
    sort_by=[{'column_id': 'Rank', 'direction':'asc'}],
    fixed_columns={'headers': True, 'data': 1},
    fixed_rows={'headers': True, 'data': 0},
    merge_duplicate_headers=True,
    cell_selectable=True,
)

modal = html.Div(
    [
        dbc.Modal(
            [
                dbc.ModalBody("This is the content of the modal", id='modal_body1'),
                dbc.ModalFooter(
                    dbc.Button(
                        "Close", id="close", className="ms-auto", n_clicks=0
                    )
                ),
            ],
            id="modal1",
            size='lg',
            is_open=False,
        ),
    ]
)

@callback(
    Output('modal1', 'is_open'),
    Output('modal_body1', 'children'),
    Input('table1', 'active_cell'),
    Input('close', 'n_clicks'),
    State("modal1", "is_open"),
)
def toggle_modal(active_cell, n1, is_open):
    if active_cell:
        if active_cell['column_id'] in ['SLpM', 'StrAcc', 'SApM', 'StrDef']:
            return not is_open, active_cell['column_id']
    elif n1:
        return not is_open, None
    return is_open, None

Any help would be greatly appreciated!

2

Hi @awesomefeathers

Can you provide a complete minimal working example (with some sample data ) that replicates the issue?

1 Like
3

Hey @AnnMarieW I believe I solved the problem - the callback would trigger a modal whenever n1 is True so I checked to see if the is_open status was true before:

@callback(
    Output('modal1', 'is_open'),
    Output('modal_body1', 'children'),
    Input('table1', 'active_cell'),
    Input('close', 'n_clicks'),
    State("modal1", "is_open"),
)
def toggle_modal(active_cell, n1, is_open):
    if active_cell:
        if active_cell['column_id'] in ['SLpM', 'StrAcc', 'SApM', 'StrDef', 'SDpM', 'KDLp15M', 'KDAcc', 'KDAp15M', 'KDDef', 'TDLp15M', 'TDAcc', 'TDAp15M', 'TDDef', '%GrpCtrl', '%AllCtrl', 'SUBp15M', 'SUBap15M']:
            l = func.generate_modal_graph_data(active_cell)
            return not is_open, dcc.Graph(figure=px.line(l, x="x", y=active_cell['column_id'], title='Recent outcomes (latest towards end)', labels={'x':'Opponent (outcome)'}))
    elif n1:
        if is_open == True:
            return not is_open, None  
    return is_open, None

Thanks again,
Jay

1 Like