from importlib import reload
import matplotlib as mpl
import networkx as nx
import visJS2jupyter.visJS_module as visJS_module
from tqdm.auto import tqdm
import random
reload(visJS_module)

# create a simple graph
G = nx.connected_watts_strogatz_graph(30,2,.2)
nodes = list(G.nodes()) # type cast to list in order to make compatible with networkx 1.11 and 2.0
edges = list(G.edges()) # for nx 2.0, returns an "EdgeView" object rather than an iterable

degree = dict(G.degree())
nx.set_node_attributes(G, name = 'degree', values = degree)
pos = nx.spring_layout(G)

hacker = 'base64 image string' 
humpy = 'or image url'
bnerd = ''
# set per-node attributes
nodes_dict = [{"id":n,
               "border_width": 4,
               "border_color": "#000",
               "degree": 5,
               "node_shape": 'image', # must set node shape to "image"
               "x":pos[n][0]*700,
                'node_image': random.choice([hacker, humpy, bnerd]),
               "y":pos[n][1]*700} for n in tqdm(nodes)
              ]

node_map = dict(zip(nodes,range(len(nodes))))

# set per-edge attributes
edges_dict = [{"source":node_map[edges[i][0]], "target":node_map[edges[i][1]], "id": str(random.random()),
              "color":"gray"} for i in range(len(edges))]

data = visJS_module.visjs_network(nodes_dict,edges_dict,
                          node_size_multiplier=10,
                          node_size_transform = '',
                          node_shape_use_border_with_image=True,
                          node_font_size=25,
                          physics_enabled=True,
                          edge_color_highlight='#8A324E',
                          edge_color_hover='#8BADD3',
                          edge_width=3,
                          max_velocity=15,
                          min_velocity=1)