ChrisDelClea / streamlit-agraph

A Streamlit Graph Vis
MIT License
387 stars 52 forks source link

Adjust to container size (use all available space) #54

Open oparisy opened 5 months ago

oparisy commented 5 months ago

Hi, when using a wide window, the graph component does not take all available parent space, as can be seen here (the bottom node is truncated on its right): image

I nested two st.container with borders to show that they expand to take all space provided by their parent, while agraph does not.

Here is the code to reproduce this:

import streamlit as st
from streamlit_agraph import agraph, Node, Edge, Config

# Use the full page instead of a narrow central column
st.set_page_config(layout="wide")

top_container = st.container(border=True)
with top_container:
    graph_container = st.container(border=True)
    with graph_container:
        nodes = []
        edges = []
        nodes.append( Node(id="Spiderman", 
                        label="Peter Parker", 
                        size=25, 
                        shape="circularImage",
                        image="http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_spiderman.png") 
                    ) # includes **kwargs
        nodes.append( Node(id="Captain_Marvel", 
                        size=25,
                        shape="circularImage",
                        image="http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_captainmarvel.png") 
                    )
        edges.append( Edge(source="Captain_Marvel", 
                        label="friend_of", 
                        target="Spiderman", 
                        # **kwargs
                        ) 
                    ) 

        config = Config(#width=750,
                        #height=950,
                        directed=True, 
                        physics=False, 
                        hierarchical=False,
                        # **kwargs
                        )

        return_value = agraph(nodes=nodes, 
                            edges=edges, 
                            config=config)

Looking at Config's code, I can see that width and height have default values, so this would explain the current behavior.

Expectation: get an "expand in parent" behavior when width and height are not specified.

mayurankv commented 3 months ago

I too would love this as well! It's such an amazing component and this would make it almost perfect!