How to display buttons in pyvis visualization of NetworkX Graph?

Question

I am trying to modify this function in order to correctly display the interactive buttons. I am using pyvis to visualize a graph created on Networkx. Despite including N.show_buttons(filter_=True), the buttons do not appear in the corresponding html file. Also, how can I add a title to the html page that is produced?

def visualize(identity_id,html_name):
    #create subgraph using the provided identity_id
    classx = [n for n in G.nodes() if G.nodes[n]['modularity'] == 
              G.nodes[identity_id]['modularity']]
    SG = G.subgraph(classx)

    #instantiate the Network object
    N = Network(height='100%', width='100%', bgcolor='#ffffff', 
                font_color='black',notebook = True, directed=False)

    #this line effects the physics of the html File
    N.barnes_hut(spring_strength=0.006)

    #Change colors of nodes and edges
    for n in SG:
        if (SG.nodes[n]['category']=='cust') and (SG.nodes[n]['status']=='ACTIVE'):  # assign color to nodes based on cust status
            color = 'green'
            shape = 'square'
        if (SG.nodes[n]['category']=='cust') and (SG.nodes[n]['status']=='CLOSED'):  # assign color to nodes based on cust status
            color = 'red'
            shape = 'square'   
        elif SG.nodes[n]['category']=='app':# assign shape to nodes based on cust versus app
            color = 'blue'
            shape = 'triangle'
        N.add_node(n, label=n, color=color,shape = shape)

    for e in SG.edges:
        if e in SG.edges:  # add the edges to the graph
            color = 'black'
            width = 2
        N.add_edge(e[0],e[1],color=color, width=width)

    N.show_buttons(filter_=True)
    #generate html file
    N.show(f'subgraph_{html_name}.html')

Answer 1

The problem is you've set the height and width both to '100%' when instantiating the visualization:

N = Network(height='100%', width='100%', bgcolor='#ffffff', 
            font_color='black',notebook = True, directed=False)

Since the network is set to take up all of the space in the browser window, the buttons simply aren't rendered in the window. Depending on where you want the buttons to appear, I'd suggest setting height to a fixed pixel value (say, height='800px') or changing width to be a smaller percentage of the available space (say, 75%).

I made up dummy data to get your code to work, but here is full copy-pasteable code below for other readers looking to recreate this question.

import networkx as nx
from pyvis.network import Network


def visualize(identity_id,html_name):
    # Generate synthetic data
    G = nx.complete_bipartite_graph(3, 4)
    nx.set_node_attributes(G, 3, 'modularity')
    nx.set_node_attributes(G, 'cust', 'category')
    nx.set_node_attributes(G, 'ACITVE', 'status')

    #create subgraph using the provided identity_id    
    classx = [n for n in G.nodes() if G.nodes[n]['modularity'] == 
              G.nodes[identity_id]['modularity']]
    SG = G.subgraph(classx)

    #instantiate the Network object
    N = Network(height='800px', width='100%', bgcolor='#ffffff', # Changed height
                font_color='black',notebook = True, directed=False)

    #this line effects the physics of the html File
    N.barnes_hut(spring_strength=0.006)

    #Change colors of nodes and edges
    for n in SG:
        if (SG.nodes[n]['category']=='cust') and (SG.nodes[n]['status']=='ACTIVE'):  # assign color to nodes based on cust status
            color = 'green'
            shape = 'square'
        if (SG.nodes[n]['category']=='cust') and (SG.nodes[n]['status']=='CLOSED'):  # assign color to nodes based on cust status
            color = 'red'
            shape = 'square'   
        elif SG.nodes[n]['category']=='app':# assign shape to nodes based on cust versus app
            color = 'blue'
            shape = 'triangle'
        else:
            color = 'blue'
            shape = 'triangle'
        N.add_node(n, label=n, color=color,shape = shape)

    for e in SG.edges:
        if e in SG.edges:  # add the edges to the graph
            color = 'black'
            width = 2
        N.add_edge(e[0],e[1],color=color, width=width)

    N.show_buttons(filter_=True)
    #generate html file
    N.show(f'subgraph_{html_name}.html')

visualize(3, 'test_name')