{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# HTML interaction with graph"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "import ipycytoscape\n",
    "import ipywidgets as widgets"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "import json\n",
    "with open(\"colaData.json\") as fi:\n",
    "    json_file = json.load(fi)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [],
   "source": [
    "cytoscapeobj = ipycytoscape.CytoscapeWidget()\n",
    "cytoscapeobj.graph.add_graph_from_json(json_file)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "28cb7b0f7ba049a88b041c587df8b83f",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "CytoscapeWidget(cytoscape_layout={'name': 'cola'}, cytoscape_style=[{'selector': 'node', 'css': {'background-c…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "cytoscapeobj"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [],
   "source": [
    "#The reason why the graph goes gray here it's because we're overwriting the style and not giving it any colors\n",
    "#this will be done later on when we attribute the `highlighted` class to the edges and nodes on the `for`\n",
    "\n",
    "cytoscapeobj.set_style([{\n",
    "  \"selector\": \"edge.highlighted\",\n",
    "  \"css\": {\n",
    "    \"line-color\": \"red\"\n",
    "  }\n",
    "},\n",
    "{\n",
    "  \"selector\": \"node.highlighted\",\n",
    "  \"css\": {\n",
    "    \"background-color\": \"blue\"\n",
    "  },\n",
    "}])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "5f8589f87df643c692511f2d0e878b82",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Button(description='red edges', style=ButtonStyle())"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "btn = widgets.Button(description=\"red edges\", disabled=False)\n",
    "\n",
    "def btn_callback(b):\n",
    "  for edge in cytoscapeobj.graph.edges:\n",
    "    classes = set(edge.classes.split(\" \"))\n",
    "    classes.add(\"highlighted\")\n",
    "    edge.classes = \" \".join(classes)\n",
    "\n",
    "btn.on_click(callback=btn_callback)\n",
    "display(btn)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "28cb7b0f7ba049a88b041c587df8b83f",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "CytoscapeWidget(cytoscape_layout={'name': 'cola'}, cytoscape_style=[{'selector': 'edge.highlighted', 'css': {'…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "cytoscapeobj"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "001ca977d7de4e068dfe080ebea7faf2",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Button(description='blue nodes', style=ButtonStyle())"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "btn = widgets.Button(description=\"blue nodes\", disabled=False)\n",
    "\n",
    "def btn_callback(b):\n",
    "  for node in cytoscapeobj.graph.nodes:\n",
    "    classes = set(node.classes.split(\" \"))\n",
    "    classes.add(\"highlighted\")\n",
    "    node.classes = \" \".join(classes)\n",
    "\n",
    "btn.on_click(callback=btn_callback)\n",
    "display(btn)"
   ]
  },
  {
   "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
}