Hi!
I’m trying to embed an editable Draw.io diagram into a Dash app. For that, I am following the reference. My approach is the following:
- Embed the application in an dash.html.Iframe object.
- Load the script using dash_defer_html_import (see this post).
However, I have not managed to make it work: the embeded app remains stuck in the loading wheel. From my understanding, the script is not triggered.
import dash
from dash import dcc, html
import base64
import dash_defer_js_import as dji
app = dash.Dash(__name__)
diagram_xml = """
<mxfile>
<diagram name="Page-1">
<mxGraphModel dx="1424" dy="1321" grid="1" gridSize="10" guides="1">
<root>
<mxCell id="0" value="" style="group" vertex="1" connectable="0" />
<mxCell id="1" value="Example Box" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#FFFFFF;strokeColor=#000000;shadow=1;" vertex="1" connectable="1" x="100" y="100" width="100" height="60" />
</root>
</mxGraphModel>
</diagram>
</mxfile>
"""
app.layout = html.Div(
[
html.H1("Draw.io Integration"),
# Embedding Draw.io in the Dash app
html.Iframe(
id="drawio-iframe",
src=f"https://embed.diagrams.net/?embed=1&spin=1",
width="800",
height="600",
style={"border": "none"},
),
dji.Import(
"""
// Listen for messages from the iframe
window.addEventListener("message", function(event) {
// Handle the 'init' event when the iframe is ready
if (event.data === "init") {
// Send the XML data to the iframe to load the diagram
const diagramXML = `"""
+ diagram_xml
+ """`;
const iframe = document.getElementById("drawio-iframe");
// Send the XML data to the iframe for loading the diagram
iframe.contentWindow.postMessage({
action: "load",
xml: diagramXML
}, "*");
}
}, false);
"""
),
]
)
if __name__ == "__main__":
app.run_server(debug=True)
I don’t have a lot of experience using JS code in Dash, so I might be missing something obvious. Thank you for yout help!
Best,
Jan