Getting click data from Iframe object

Dash Python
1

I am using html.Iframe to show an d3 graph (gravis d3) and a networkx graph.
Is there a way to get click data inside a callback function from an html.Iframe? dash cytoscape is an alternative, but it has some unwarranted behavior when you zoom…

Thanks for your help!

2

Hello @odedloe87,

Welcome to the community!

Yes, you should be able to send info into the dash-ecosystem by using dash_clientside.set_props, in your case it would have to be window.parent.dash_clientside.set_props, as long as both are on the same domain this should work.

dash_clientside.set_props allows you to send data to a specific component using the id, it can be a bunch of props together too.

dash_clientside.set_props(id, propsToSet)

dash_clientside.set_props('myDiv', {style: {backgroundColor: 'blue'}, children: 'testing'})
3

Thanks for your quick response!
Can I ask for some more guidance? I’m pretty strong in dash, but I’m not really sure what I need to do. I have the following app:

from dash import Dash, html, dcc, callback, Output, Input, clientside_callback

G = nx.karate_club_graph()

# Use gravis to create a d3 visualization
html_content = gv.d3(G).to_html()

app = Dash(__name__)

app.layout = html.Div([
    html.Iframe(id='graph-frame', srcDoc=modified_html, style={"height": "600px", "width": "100%"}),
    html.Div(id='output-div', style={'display': 'none'}),  # Hidden div to receive data
    dcc.Store(id='click-data'),  # Store the click data
    html.Div(id='click-output')  # Display click data
])

I saw online I need to add window.parent.dash_clientside.set_props() to html_content but I’m not really sure how…

Thanks again for your help!

4

For this, you would need to add your script to the html for the iframe, however, I’m not sure if you can do it in the doc.

I’d recommend rather creating this as a template inside of Flask and then just pass the endpoint as the src in the above.

templates/graph-frame.html

<html>
<body>
.... code
<scripts>
... scripts
</scripts>
</body>
</html>

from dash import Dash, html, dcc, callback, Output, Input, clientside_callback
import flask

G = nx.karate_club_graph()

# Use gravis to create a d3 visualization
html_content = gv.d3(G).to_html()

app = Dash(__name__)

@app.server.route('/graph-frame', METHODS=['GET'])
def graph_frame():
    if modified_html:
         return modified_html
    return flask.render_template('graph-frame.html')

app.layout = html.Div([
    html.Iframe(id='graph-frame', src='./graph-frame', style={"height": "600px", "width": "100%"}),
    html.Div(id='output-div', style={'display': 'none'}),  # Hidden div to receive data
    dcc.Store(id='click-data'),  # Store the click data
    html.Div(id='click-output')  # Display click data
])

This would give you a lot more control over the scripts that you’d be able to attach.