Skip to content

Allow dict id in target_components #3353

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jul 2, 2025
Merged

Conversation

AnnMarieW
Copy link
Collaborator

@AnnMarieW AnnMarieW commented Jun 27, 2025

closes #3348

This PR allows dict ids in the target_components.

  • I have added a test
  • I have added entry in the CHANGELOG.md
  • If this PR needs a follow-up in dash docs, community thread, I have mentioned the relevant URLS as follows
    • this GitHub #PR number updates the dash docs
    • here is the show and tell thread in Plotly Dash community

@celia-lm
What do you think of this approach? It requires using stringify_id to generate a valid dictionary key. This also ensures the ID is stringified the same way Dash handles all other dict IDs.

@T4rk1n I thought there was a way now to import the stringifyId function rather than repeating it in the component - is that true?

from dash import callback, Dash, dcc, html, Input, Output, State, stringify_id
import time

app = Dash(__name__, suppress_callback_exceptions=True)


app.layout = html.Div([
    html.Button("trigger loading", id="trigger"),
    dcc.Loading(
        html.Button(id={"type":"button", "index":"two"}, children='Button 2', disabled=True),
        target_components={stringify_id({"type":"button", "index":"two"}):'disabled'}
    ),
])

@app.callback(
    Output({"type":"button", "index":"two"}, 'disabled'),
    Input("trigger", 'n_clicks'),
    State({"type":"button", "index":"two"}, 'disabled'),
    prevent_initial_call=True)
def enable_button_filter(filter_query, disabled):
    # simulate a "long" process
    time.sleep(1)
    new_state = not disabled
    return new_state

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

@celia-lm
Copy link

It looks okay to me! Thanks @AnnMarieW for looking into this so quickly. We'll need to add stringify_id to the target_components so that users are aware of this (@red-patience ), but I like the approach of having a way to ensure that the dict id is stringified in a consistent way. For the sample code, I tested so many combinations because I wasn't sure if it wasn't working because I was specifying something wrong. Having stringify_id helps remove that uncertainty.

@T4rk1n
Copy link
Contributor

T4rk1n commented Jun 30, 2025

@T4rk1n I thought there was a way now to import the stringifyId function rather than repeating it in the component - is that true?

Yes, it's exposed as window.dash_component_api.stringifyId

@T4rk1n
Copy link
Contributor

T4rk1n commented Jun 30, 2025

Think it might be better for performance to stringify the id either in the reducer or the action.

The reducer would be here:

And the action

@AnnMarieW
Copy link
Collaborator Author

@T4rk1n
Is it ok to add stringify_id to the __init__.py file so it can be imported on the top line instead of like this?

from dash import callback, Dash, dcc, html, Input, Output, State
from dash.dependencies import stringify_id

@celia-lm I can do a PR to add an example to the docs after this PR is merged 🙂

@T4rk1n
Copy link
Contributor

T4rk1n commented Jun 30, 2025

Is it ok to add stringify_id to the init.py file so it can be imported on the top line instead of like this?

@@ -753,7 +753,7 @@ export function executeCallback(
const loadingOutputs = outputs.map(out => ({
path: getPath(paths, out.id),
property: out.property?.split('@')[0],
id: out.id
id: (window as any).dash_component_api.stringifyId(out.id)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the renderer we can use the one from:
import {stringifyId} from './actions/dependencies';

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oops - of course!
Fixed

Copy link
Contributor

@T4rk1n T4rk1n left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💃 Looks good.

@T4rk1n T4rk1n merged commit a14b0c1 into plotly:dev Jul 2, 2025
10 of 12 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Feature Request] Support pattern-matching/dict ids in dcc.Loading target_components
3 participants