import gradio as gr
from pyvis.network import Network
import networkx as nx
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)

# graph above refer to: https://pyvis.readthedocs.io/en/latest/tutorial.html#networkx-integration

# nt_notebook = Network('500px', '500px', notebook=True, cdn_resources='remote')
# populates the nodes and edges data structures
# nt_notebook.from_nx(nx_graph)
# nt_notebook.show('nx.html')


def needs_analysis():
    nt = Network()
    nt.from_nx(nx_graph)
    html = nt.generate_html()
    #need to remove ' from HTML
    html = html.replace("'", "\"")
    
    return f"""<iframe style="width: 100%; height: 600px;margin:0 auto" name="result" allow="midi; geolocation; microphone; camera; 
    display-capture; encrypted-media;" sandbox="allow-modals allow-forms 
    allow-scripts allow-same-origin allow-popups 
    allow-top-navigation-by-user-activation allow-downloads" allowfullscreen="" 
    allowpaymentrequest="" frameborder="0" srcdoc='{html}'></iframe>"""


demo = gr.Interface(
    needs_analysis,
    inputs=None,
    outputs=gr.outputs.HTML(),
    title="pyvis_in_gradio",
    allow_flagging='never'
)

demo.launch()