Neovis.js vs Streamlit

Using Streamlit
,
1

Hi Community!

I’m currently exploring the possibility to visualise a Graph within my streamlit application using Neovis.js. However, when I implemented via a function def render_graph, the placeholder where the visualisation must appear shows empty.

I as curious to know whether someone has already experiemnted with this and solved it?

def render_graph(user_id, data_type):
    # Fetch graph data
    query = f"""
    MATCH (n:{data_type} {{user_id: $user_id}})
    OPTIONAL MATCH (n)-[r]-(m)
    WHERE m.user_id = $user_id
    RETURN n, r, m
    """
    results = execute_neo4j_query(query, {"user_id": user_id})
    
    # Prepare data for Neovis
    nodes = []
    edges = []
    for record in results:
        n = record['n']
        nodes.append({
            "id": n.element_id,
            "label": n.get('name', '') or n.get('workType', ''),
            "group": data_type
        })
        if 'r' in record and 'm' in record:
            r = record['r']
            m = record['m']
            edges.append({
                "from": n.element_id,
                "to": m.element_id,
                "label": type(r).__name__
            })
    
    # Get Neo4j connection details
    neo4j_uri = os.environ.get("NEO4J_URI")
    neo4j_user = os.environ.get("NEO4J_USERNAME")
    neo4j_password = os.environ.get("NEO4J_PASSWORD")

    # Create Neovis config
    config = {
        "containerId": f"viz-{data_type}",
        "neo4j": {
            "serverUrl": neo4j_uri,
            "serverUser": neo4j_user,
            "serverPassword": neo4j_password,
        },
        "visConfig": {
            "nodes": {
                "shape": "dot",
                "size": 20,
                "font": {"size": 12}
            },
            "edges": {
                "arrows": {"to": {"enabled": True}},
                "font": {"size": 10}
            },
            "physics": {
                "enabled": True,
                "solver": "forceAtlas2Based"
            }
        },
        "labels": {
            data_type: {
                "label": "label",
                "group": "group",
            }
        },
    }
    
    # Render the graph
    st.components.v1.html(
        f"""
        <div id="viz-{data_type}" style="width: 100%; height: 300px;"></div>
        <script src="https://unpkg.com/neovis.js@2.0.2"></script>
        <script>
            var viz;
            function draw() {{
                var config = {json.dumps(config)};
                viz = new NeoVis.default(config);
                viz.renderWithCypher("{query}");
            }}
            draw();
        </script>
        """,
        height=320,
    )