examples/Labels.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Add labels to Nodes"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "import ipycytoscape"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "data = {\n",
    "        'nodes': [\n",
    "            { 'data': {\n",
    "                'id': '1',\n",
    "                'label': 'top left',\n",
    "                'classes': 'top-left'\n",
    "                }},\n",
    "        {'data': {'id': '2', 'label': 'top center', 'classes': 'top-center' }},\n",
    "        {'data': {'id': '3', 'label': 'top right', 'classes': 'top-right' }},\n",
    "\n",
    "        {'data': {'id': '4', 'label': 'center left', 'classes': 'center-left' }},\n",
    "        {'data': {'id': '5', 'label': 'center center', 'classes': 'center-center' }},\n",
    "        {'data': {'id': '6', 'label': 'center right', 'classes': 'center-right' }},\n",
    "\n",
    "        {'data': {'id': '7', 'label': 'bottom left', 'classes': 'bottom-left' }},\n",
    "        {'data': {'id': '8', 'label': 'bottom center', 'classes': 'bottom-center' }},\n",
    "        {'data': {'id': '9', 'label': 'bottom right', 'classes': 'bottom-right' }},\n",
    "\n",
    "        {'data': {'id': '10', 'label': 'multiline manual\\nfoo\\nbar\\nbaz', 'classes': 'multiline-manual' }},\n",
    "        {'data': {'id': '11', 'label': 'multiline auto foo bar baz', 'classes': 'multiline-auto' }},\n",
    "        {'data': {'id': '12', 'label': 'outline', 'classes': 'outline' }},\n",
    "        ]\n",
    "    }"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [],
   "source": [
    "cytoscapeobj = ipycytoscape.CytoscapeWidget()\n",
    "cytoscapeobj.graph.add_graph_from_json(data)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [],
   "source": [
    "cytoscapeobj.set_style([                        {\n",
    "                        'selector': 'node[classes]',\n",
    "                             'style': {\n",
    "                                  'font-family': 'helvetica',\n",
    "                                  'font-size': '20px',\n",
    "                        }},\n",
    "                        {\n",
    "                        'selector': 'node[classes]',\n",
    "                        'style': {\n",
    "                          'label': 'data(label)'\n",
    "                        }\n",
    "                      },\n",
    "                      {\n",
    "                        'selector': 'node[id = \"1\"]',\n",
    "                        'style': {\n",
    "                            'color': 'red',\n",
    "                            'text-valign': 'top',\n",
    "                            'text-halign': 'left'\n",
    "                        }\n",
    "                      },\n",
    "                      {\n",
    "                        'selector': 'node[id = \"2\"]',\n",
    "                        'style': {\n",
    "                          'color': 'blue',\n",
    "                          'text-valign': 'top',\n",
    "                          'text-halign': 'center'\n",
    "                        }\n",
    "                      },\n",
    "                      {\n",
    "                        'selector': 'node[id = \"3\"]',\n",
    "                        'style': {\n",
    "                          'text-valign': 'top',\n",
    "                          'text-halign': 'right'\n",
    "                        }\n",
    "                      },\n",
    "\n",
    "                      {\n",
    "                        'selector': 'node[id = \"4\"]',\n",
    "                        'style': {\n",
    "                          'text-valign': 'center',\n",
    "                          'text-halign': 'left'\n",
    "                        }\n",
    "                      },\n",
    "\n",
    "                      {\n",
    "                        'selector': 'node[id = \"5\"]',\n",
    "                        'style': {\n",
    "                          'text-valign': 'center',\n",
    "                          'text-halign': 'center'\n",
    "                        }\n",
    "                      },\n",
    "\n",
    "                      {\n",
    "                        'selector': 'node[id = \"6\"]',\n",
    "                        'style': {\n",
    "                          'text-valign': 'center',\n",
    "                          'text-halign': 'right'\n",
    "                        }\n",
    "                      },\n",
    "\n",
    "                      {\n",
    "                        'selector': 'node[id = \"7\"]',\n",
    "                        'style': {\n",
    "                          'text-valign': 'bottom',\n",
    "                          'text-halign': 'left'\n",
    "                        }\n",
    "                      },\n",
    "\n",
    "                      {\n",
    "                        'selector': 'node[id = \"8\"]',\n",
    "                        'style': {\n",
    "                          'text-valign': 'bottom',\n",
    "                          'text-halign': 'center'\n",
    "                        }\n",
    "                      },\n",
    "\n",
    "                      {\n",
    "                        'selector': 'node[id = \"9\"]',\n",
    "                        'style': {\n",
    "                          'text-valign': 'bottom',\n",
    "                          'text-halign': 'right'\n",
    "                        }\n",
    "                      },\n",
    "\n",
    "                      {\n",
    "                        'selector': 'node[id = \"10\"]',\n",
    "                        'style': {\n",
    "                          'text-wrap': 'wrap'\n",
    "                        }\n",
    "                      },\n",
    "\n",
    "                      {\n",
    "                        'selector': 'node[id = \"11\"]',\n",
    "                        'style': {\n",
    "                          'text-wrap': 'wrap',\n",
    "                          'text-max-width': 80\n",
    "                        }\n",
    "                      },\n",
    "\n",
    "                      {\n",
    "                        'selector': 'node[id = \"12\"]',\n",
    "                        'style': {\n",
    "                          'edge-text-rotation': 'autorotate'\n",
    "                        }\n",
    "                      }])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "scrolled": true
   },
   "outputs": [],
   "source": [
    "cytoscapeobj.set_layout(name='grid')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "8253c4c12ff84939922826249a274594",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "CytoscapeWidget(cytoscape_layout={'name': 'grid'}, cytoscape_style=[{'selector': 'node[classes]', 'style': {'f…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "cytoscapeobj"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.9.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}