Passing state to dash app via iframe

Dash Python
1

Hi all,

I’m building a web app with Flask that embeds a few Dash graphs via iframes. Each of the graphs has multiple dropdowns for filtering. Because of the multiple dropdowns, I’d like to be able to open the page with the Dash graph to specify and change the default dropdown values to immediately display a specific slice of the data. E.g. the user hits myapp.com/dash?location=london and the dash app is loaded with Location dropdown set to “London”.

I’m having trouble with this and I suspect it’s because I haven’t been able to pass attributes from the iframe to Dash itself. I can create a simple callback that correctly updates the default value:

@app.callback(
    Output('dropdown-selection-location', 'value'),
    Input('dropdown-selection-location', 'options'),
)
def update_dropdown_default(options):
    return options[0]

And on the Flask side I’m using something like this, where I pass on my dropdown value location:

@app.route('/my_graph')
def my_graph():
    location = 'New York, USA'
    return render_template('my_graph.html', location=location)

And then I’d pass location to the iframe with something like this in JS:

var iframe = document.getElementById("dash-iframe");
iframe.contentWindow.postMessage({ attributeValue: "{{location}}" }, "*");

So I think what I need is a way to access location from the iframe in my update_dropdown_default callback. This is where I’m struck. Does anyone know how I can do that? Should I be thinking about this an entirely different way? Can share more details if needed.

Thanks in advance!

2

Hello @ssss,

Welcome to the community!

Since you are using it this way, why dont you just update the iframe src from the parent?

Figuring out how to communicate between the frame and parent can be interesting indeed.

3

Thanks Jinny!

Can you explain what you mean by updating the src from the parent? Would that be something like:

<iframe src="http://localhost:8050?location=london" id='dash-iframe'></iframe>

and then pulling location=london into my callback somehow?

I’m not very experienced with front-end stuff so I’m a little new to some of these concepts.

4

Yes, if you are wanting to change it with JS from interaction in the flask template, you can send it via:

document.getElementById('dash-iframe').src = 'http://localhost:8050?location=london'

You wouldnt need a callback assuming that everything is working properly when your layout is loading.

Now, this might be a little slower than a regular callback because of how things are going. But… you can control an element in the template easier than dealing with cross-site and non-same domain names trying to send info to the page.

If however, you wanted to migrate your my_graph template over to Dash, that would work well too.

Dash is built on-top of Flask, so integration is possible.

5

When you say I wouldn’t need a callback, does that mean http://localhost:8050?location=london will automatically set my “location” dropdown to “london”? I just tried that and it didn’t seem to work (but maybe I did something wrong).

And thanks for the point on integrating with my flask app. I’ve been wondering if that’s the route I should go anyways.

1 Like
6

I’m not 100% how your dash page works, because I cant see that part of your code.

Maybe you should have it be:

myapp.com/dash?location=london instead

7

Is there a name or documentation for the /dash construct? If I can solve my problem that way, that’d be awesome.

And here’s the actual example for one of my drop-downs:

dcc.Dropdown(['All', 'London, UK', 'New York, USA', 'Chicago, USA'], 'All', id='dropdown-selection-location', style=dropdown_style, clearable=False)

I tried out a few options for that query including the dropdown id (http://127.0.0.1:8050/dash?dropdown_location_group=London,%20UK). Wondering if it’s just a syntax thing I’m getting wrong?

8

I thought the link above was working when you tested it?

Check out here:

9

Sorry, I should have mentioned I’m not using the official “Page” construct. I’m new to dash and haven’t come across that before.

Tomorrow I’m going to look at integrating the dash apps with my flask app, in case that’s a better solution than iframes. thanks for your help in the meantime.

1 Like