Columns and graphviz chart problem

Using Streamlit
1

Hi,

I’m using st.beta_columns to display two graphs side by side, but what I get instead is that the second graph is drawn on top of the first.

Here is a simple sample code to demonstrate the problem. I tried putting the columns inside a container, but no dice. If I don’t use columns, the graphs get drawn one below the other, correctly.

Appreciate any help,

Dinesh

import streamlit as st
from graphviz import Digraph


def graph1():

    t = Digraph('TrafficLights', filename='traffic_lights.gv', engine='neato')

    t.attr('node', shape='box')
    for i in (2, 1):
        t.node('gy%d' % i)
        t.node('yr%d' % i)
        t.node('rg%d' % i)

    t.attr('node', shape='circle', fixedsize='true', width='0.9')
    for i in (2, 1):
        t.node('green%d' % i)
        t.node('yellow%d' % i)
        t.node('red%d' % i)
        t.node('safe%d' % i)

    for i, j in [(2, 1), (1, 2)]:
        t.edge('gy%d' % i, 'yellow%d' % i)
        t.edge('rg%d' % i, 'green%d' % i)
        t.edge('yr%d' % i, 'safe%d' % j)
        t.edge('yr%d' % i, 'red%d' % i)
        t.edge('safe%d' % i, 'rg%d' % i)
        t.edge('green%d' % i, 'gy%d' % i)
        t.edge('yellow%d' % i, 'yr%d' % i)
        t.edge('red%d' % i, 'rg%d' % i)

    t.attr(overlap='false')
    t.attr(label=r'PetriNet Model TrafficLights\n'
                 r'Extracted from ConceptBase and layed out by Graphviz')
    t.attr(fontsize='12')

    return t

def graph2():
    g = Digraph('G', filename='cluster_edge.gv')
    g.attr(compound='true')

    with g.subgraph(name='cluster0') as c:
        c.edges(['ab', 'ac', 'bd', 'cd'])

    with g.subgraph(name='cluster1') as c:
        c.edges(['eg', 'ef'])

    g.edge('b', 'f', lhead='cluster1')
    g.edge('d', 'e')
    g.edge('c', 'g', ltail='cluster0', lhead='cluster1')
    g.edge('c', 'e', ltail='cluster0')
    g.edge('d', 'h')

    return g

def _main():
    col1, mid, col2 = st.beta_columns([2, 1, 2])
    with col1:
        pl1 = st.empty()
    with col2:
        pl2 = st.empty()

    g1 = graph1()
    g2 = graph2()

    pl1.graphviz_chart(g1, use_container_width=True)
    pl2.graphviz_chart(g2, use_container_width=True)

if __name__ == '__main__':
    _main()
2

Hi @ddutt -

I can confirm that this doesn’t work as expected on my computer, could you open a GitHub issue about this?

Best,
Randy

3

Done. https://github.com/streamlit/streamlit/issues/2485

Thanks,

Dinesh

1 Like