Pyvis html graph inside dash app

Dash Python
1

I want to make a dash app to visualize some networks, stored in a database, according to a user input query. Below I have given my code. The pyvis graph is not showing when I run the Dash server. I can see that the html file is being generated properly, but the box is blank when I run the server. How can I resolve this issue?

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
navbar = dbc.Navbar(
    dbc.Container(
        dbc.Row(
            dbc.Col(
                dbc.NavbarBrand(
                    [  
                        html.Span("Network Explorer", className="ms-2")
                    ],
                    className="d-flex align-items-center"
                ),
                width="auto"  
            ),
            className="w-100", 
            align="center"
        ),
        fluid=True
    ),
    color="light",
    dark=False,  
       sticky="top",
       className="p-2", 
)

app.layout = dbc.Container([
   navbar,
   # First Row: Search Box
   dbc.Row([
       dbc.Col([
           dbc.Card([
               dbc.CardBody([
                   dcc.Textarea(
                       id='search-input',
                       placeholder='Enter your search here...',
                       style={'width': '100%', 'height': 100},
                       className='mb-3'
                   ),
                   dbc.Button('Submit Query', id='submit-button', n_clicks=0, color="primary")
               ])
           ])
       ], width=12)
   ], className='mb-4'),
    # Second Row: Network Visualization
   dbc.Row([
        dbc.Col([
            html.Div(id="graph-output", className="mt-4", children=[
                    html.Iframe(
                    id='default-iframe',
                    width="100%",
                    height="600px"
                )
            ])
        ])
    ])
])

@app.callback(
    Output("default-iframe", "srcDoc"),
    Input("submit-button", "n_clicks"),
    State("query-input", "value")
)

def update_output(n_clicks, query):
    if not n_clicks or not query:
        raise PreventUpdate
    
    subgraph = get_subgraph(query)
    graph_html = visualize_subgraph(subgraph)
    return (graph_html)

if __name__ == '__main__':
    app.run_server(debug=True)
3

I needed the same thing. This is my app.py, it uses some dash design kit elements but I think you can adapt it to the open source version.


from dash import Dash, dcc, html, Input, Output
import dash_design_kit as ddk
import plotly.express as px
from dash import html

from pyvis.network import Network
import networkx as nx

app = Dash(__name__)
server = app.server  # expose server variable for Procfile

nx_graph = nx.cycle_graph(10)
nx_graph.nodes[1]['title'] = 'Number 1'
nx_graph.nodes[1]['group'] = 1
nx_graph.nodes[3]['title'] = 'I belong to a different group!'
nx_graph.nodes[3]['group'] = 10
nx_graph.add_node(20, size=20, title='couple', group=2)
nx_graph.add_node(21, size=15, title='couple', group=2)
nx_graph.add_edge(20, 21, weight=5)
nx_graph.add_node(25, size=25, label='lonely', title='lonely node', group=3)

g = Network(width="500px", height="500px",cdn_resources="in_line")
g.from_nx(nx_graph)


app.layout = ddk.App([
    ddk.Header([
        ddk.Logo(src=app.get_asset_url('logo.png')),
        ddk.Title('Dash Enterprise Sample Application'),
    ]),


    ddk.Card(width=100, children=[html.Iframe(
        srcDoc=g.generate_html(),
        width="500px",
        height="500px"
    )])
])


if __name__ == '__main__':
    app.run_server(debug=True)
5

Thanks a lot for your response. I could generate the pyvis graph!

1 Like