#!/usr/bin/env python
# coding: utf-8

# # Add labels to Nodes

# In[ ]:


import ipycytoscape


# In[ ]:


data = {
        'nodes': [
            { 'data': {
                'id': '1',
                'label': 'top left',
                'classes': 'top-left'
                }},
        {'data': {'id': '2', 'label': 'top center', 'classes': 'top-center' }},
        {'data': {'id': '3', 'label': 'top right', 'classes': 'top-right' }},

        {'data': {'id': '4', 'label': 'center left', 'classes': 'center-left' }},
        {'data': {'id': '5', 'label': 'center center', 'classes': 'center-center' }},
        {'data': {'id': '6', 'label': 'center right', 'classes': 'center-right' }},

        {'data': {'id': '7', 'label': 'bottom left', 'classes': 'bottom-left' }},
        {'data': {'id': '8', 'label': 'bottom center', 'classes': 'bottom-center' }},
        {'data': {'id': '9', 'label': 'bottom right', 'classes': 'bottom-right' }},

        {'data': {'id': '10', 'label': 'multiline manual\nfoo\nbar\nbaz', 'classes': 'multiline-manual' }},
        {'data': {'id': '11', 'label': 'multiline auto foo bar baz', 'classes': 'multiline-auto' }},
        {'data': {'id': '12', 'label': 'outline', 'classes': 'outline' }},
        ]
    }


# In[ ]:


cytoscapeobj = ipycytoscape.CytoscapeWidget()
cytoscapeobj.graph.add_graph_from_json(data)


# In[ ]:


cytoscapeobj.set_style([                        {
                        'selector': 'node[classes]',
                             'style': {
                                  'font-family': 'helvetica',
                                  'font-size': '20px',
                        }},
                        {
                        'selector': 'node[classes]',
                        'style': {
                          'label': 'data(label)'
                        }
                      },
                      {
                        'selector': 'node[id = "1"]',
                        'style': {
                            'color': 'red',
                            'text-valign': 'top',
                            'text-halign': 'left'
                        }
                      },
                      {
                        'selector': 'node[id = "2"]',
                        'style': {
                          'color': 'blue',
                          'text-valign': 'top',
                          'text-halign': 'center'
                        }
                      },
                      {
                        'selector': 'node[id = "3"]',
                        'style': {
                          'text-valign': 'top',
                          'text-halign': 'right'
                        }
                      },

                      {
                        'selector': 'node[id = "4"]',
                        'style': {
                          'text-valign': 'center',
                          'text-halign': 'left'
                        }
                      },

                      {
                        'selector': 'node[id = "5"]',
                        'style': {
                          'text-valign': 'center',
                          'text-halign': 'center'
                        }
                      },

                      {
                        'selector': 'node[id = "6"]',
                        'style': {
                          'text-valign': 'center',
                          'text-halign': 'right'
                        }
                      },

                      {
                        'selector': 'node[id = "7"]',
                        'style': {
                          'text-valign': 'bottom',
                          'text-halign': 'left'
                        }
                      },

                      {
                        'selector': 'node[id = "8"]',
                        'style': {
                          'text-valign': 'bottom',
                          'text-halign': 'center'
                        }
                      },

                      {
                        'selector': 'node[id = "9"]',
                        'style': {
                          'text-valign': 'bottom',
                          'text-halign': 'right'
                        }
                      },

                      {
                        'selector': 'node[id = "10"]',
                        'style': {
                          'text-wrap': 'wrap'
                        }
                      },

                      {
                        'selector': 'node[id = "11"]',
                        'style': {
                          'text-wrap': 'wrap',
                          'text-max-width': 80
                        }
                      },

                      {
                        'selector': 'node[id = "12"]',
                        'style': {
                          'edge-text-rotation': 'autorotate'
                        }
                      }])


# In[ ]:


cytoscapeobj.set_layout(name='grid')


# In[ ]:


cytoscapeobj


# In[ ]: