Update cytoscape_vis.ipynb example (styling)

Author: Oliver Scott

examples/cytoscape_vis.ipynb

@@ -15,7 +15,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 10,
+   "execution_count": 1,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -35,13 +35,13 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 27,
+   "execution_count": 2,
    "metadata": {},
    "outputs": [
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "d19cd6f1a72444d0bdbb976f3722b5cf",
+       "model_id": "1b3cafb2bea34d4f8c77ecd284a6be91",
        "version_major": 2,
        "version_minor": 0
       },
@@ -86,7 +86,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 6,
+   "execution_count": 3,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -108,13 +108,13 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 19,
+   "execution_count": 4,
    "metadata": {},
    "outputs": [
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "c3de0d5f8fe04244901098bccc3e3138",
+       "model_id": "ed1b4914099d4a00804fd6df811cab1c",
        "version_major": 2,
        "version_minor": 0
       },
@@ -148,13 +148,13 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 21,
+   "execution_count": 5,
    "metadata": {},
    "outputs": [
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "c33f4f8843474fa08fe80ba27f3ce68a",
+       "model_id": "ac18776655314fb5af4bb64c530e33a0",
        "version_major": 2,
        "version_minor": 0
       },
@@ -182,13 +182,13 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 22,
+   "execution_count": 6,
    "metadata": {},
    "outputs": [
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "90a9b007ca4044019846c10545c78d9e",
+       "model_id": "9b62090602234268a15aa01167f5ae2b",
        "version_major": 2,
        "version_minor": 0
       },
@@ -211,18 +211,20 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
+    "# Further interactivity using ipywidgets \n",
+    "\n",
     "A user also has the ability to add further interactivity to the visualisations using the ipywidgets interact function, an example below shows an interactive visualisation where the user can select the molecule to display using a dropdown box and also update the layout."
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 26,
+   "execution_count": 7,
    "metadata": {},
    "outputs": [
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "33ca354a1d0647dbbd12751259795121",
+       "model_id": "bd68bd2e87a74c2a9bf0aa6824f3dad1",
        "version_major": 2,
        "version_minor": 0
       },
@@ -259,6 +261,79 @@
     "    layout=layouts\n",
     ");"
    ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Style Customization\n",
+    "\n",
+    "The user also has the ability to customize various aspects of the widgets style. Fopr example the nodes can be coloured based on an attribute. The example shows how to colour scaffold nodes based on the 'hierarchy' attribute."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 8,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "5ff71126406b4fad84a0eaeae7262566",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "CytoscapeWidget(cytoscape_layout={'name': 'dagre', 'nodeSpacing': 50, 'edgeLengthVal': 50}, cytoscape_style=[{…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "from scaffoldgraph.vis import color_scaffold_nodes_by_attribute\n",
+    "from rdkit.Chem.Draw import rdMolDraw2D\n",
+    "\n",
+    "# Add a 'background-color' attribute to each scaffold node.\n",
+    "# The cmap can either be a string or a matplotlib.cm.Colormap object.\n",
+    "color_scaffold_nodes_by_attribute(tree, 'hierarchy', cmap='BuPu', label='color')\n",
+    "\n",
+    "# Create a style element for the visualizer.\n",
+    "background_style = {\n",
+    "    \"selector\": \"node[color]\",   # select nodes with an attribute 'color'\n",
+    "    \"style\": {\n",
+    "        \"background-color\": \"data(color)\",  # set background-color from attribute.\n",
+    "    }\n",
+    "}\n",
+    "\n",
+    "# We can also customize rdkit drawing options (need a transparent background).\n",
+    "drawOpts = rdMolDraw2D.MolDrawOptions()\n",
+    "drawOpts.clearBackground = False\n",
+    "drawOpts.bondLineWidth = 4\n",
+    "\n",
+    "# Create a new visualizer with new options.\n",
+    "vis = cytoscape.CytoscapeVisualizer(\n",
+    "    tree,\n",
+    "    refresh_images=True,\n",
+    "    rd_draw_options=drawOpts,\n",
+    ")\n",
+    "\n",
+    "# Append the style element to the visualizer.\n",
+    "vis.style.append(background_style)\n",
+    "\n",
+    "# Create visualization.\n",
+    "widget = vis.draw_for_scaffold('c1ccncc1')\n",
+    "widget.layout.height = '600px'\n",
+    "widget\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
   }
  ],
  "metadata": {