Two graphs in line-blocks

[BaljaaSS]

I am trying to display two graphs in parallel. Even when two Graphviz are put in different div. It only shows one. How can I fix this?

Here is my code.

`import dash_interactive_graphviz
import dash
import dash_html_components as html

app = dash.Dash(name)

initial_dot_source = """
digraph {
node[style="filled"]
a ->b->d
a->c->d
}
"""

initial_dot_source1 = """
digraph {
node[style="filled"]
a ->b->e
a->c->d
}
"""

app.layout = html.Div(
[
html.Div(
dash_interactive_graphviz.DashInteractiveGraphviz(id="gv", dot_source=initial_dot_source, fit_button_content=True),
style=dict(display="flex", border="1px solid red", flexGrow=1, position="relative"),
),
html.Div(
dash_interactive_graphviz.DashInteractiveGraphviz(id="gv1", dot_source=initial_dot_source1, fit_button_style=True),
style=dict(display="flex", border="1px solid blue", flexGrow=1, position="relative"),
),
],
style=dict(position="absolute", height="100%", width="100%", display="flex"),
)

if name == "main":
app.run_server(debug=True)
`

[BaljaaSS]

CSS is correct but somehow it is not shown. What could be the problem?

[florian-burri-csem]

Same issue. Did you find a workaround?

[DeKi90]

I had come across that same issue, but forgot to raise it as an issue, when I created #21.
The problem is in the react code, the component's graph doesn't have a unique id so you end up with only one being rendered.