Graph does not automatically fit to screen in second streamlit tab

[LeoniekevandenBulk]

I came across a bit of a weird bug: If I put the link analysis component in the second tab of my streamlit app, the graph does not automatically fit to the screen. If I put it in the first tab, it seems to work fine oddly enough. Currently I use "fcose" as my layout, but it seems that it happens in other layouts too.

Any idea how to resolve this? If I re-render the graph by filtering, it does give me fitted graphs from that moment on. Is there any way I can re-render the graph directly at the start perhaps?

Also my thanks for this component, I think it is a great addition to Streamlit!

[AlrasheedA]

Hello @LeoniekevandenBulk, thank you for highlighting this issue! I will investigate it. For reference, below is a self-contained code to reproduce it.

---

"""
This example demonstrates an issue where the graph does not automatically fit to
screen when placed in a second tab of a Streamlit app, while it works correctly
in the first tab. The issue occurs across different layout algorithms including
"fcose".
"""

import streamlit as st
from st_link_analysis import st_link_analysis, NodeStyle

# Simple self-contained data for reproduction
elements = {
    "nodes": [
        {
            "data": {
                "id": "n1",
                "label": "PERSON",
                "name": "Alice",
                "email": "alice@example.com"
            }
        },
        {
            "data": {
                "id": "n2",
                "label": "PERSON", 
                "name": "Bob",
                "email": "bob@example.com"
            }
        },
        {
            "data": {
                "id": "n3",
                "label": "POST",
                "content": "Hello world!",
                "created_at": "2024-01-01"
            }
        }
    ],
    "edges": [
        {
            "data": {
                "id": "e1",
                "label": "FOLLOWS",
                "source": "n1",
                "target": "n2"
            }
        },
        {
            "data": {
                "id": "e2",
                "label": "POSTED",
                "source": "n1",
                "target": "n3"
            }
        }
    ]
}

PERSON_ATTRS = list(elements["nodes"][0]["data"].keys()) + [None]

st.markdown("# Second Tab Issue Demo")

tab1, tab2 = st.tabs(["First Tab (Working)", "Second Tab (Buggy)"])

node_styles = [
    NodeStyle("PERSON", "#FF7F3E", "email", "person"),
    NodeStyle("POST", "#2A629A", "created_at", "description"),
]

layout = "fcose"

with tab1:
    st.markdown("## First Tab - Graph should fit to screen automatically")
    st_link_analysis(
        elements, node_styles=node_styles, layout=layout, key="tab1_graph"
    )

with tab2:
    st.markdown("## Second Tab - Graph should fit to screen but doesn't")
    st_link_analysis(
        elements, node_styles=node_styles, layout=layout, key="tab2_graph"
    )