{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# User interactions\n",
    "\n",
    "\n",
    ".. warning:: The callbacks in the example will not work when view the documentation on readthedocs. The interactions require a Python kernel to work, so you should try this example locally. "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Reacting to User Interaction in the Kernel\n",
    "\n",
    "You can monitor user interactions, e.g. when a user clicks on a node, and have the kernel updated with the last interaction. See [the cytoscape.js documentation](https://js.cytoscape.org/#events/user-input-device-events) for a full list of supported events you can listen for. We need to create a new graph before we can add interactivity:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import ipycytoscape"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import json\n",
    "\n",
    "# load the graph dictionary\n",
    "with open(\"geneData.json\") as fi:\n",
    "    json_file = json.load(fi)\n",
    "    \n",
    "# load a style dictionary, which we'll use to update the graph's style\n",
    "with open(\"geneStyle.json\") as fi:\n",
    "    s = json.load(fi)\n",
    "    \n",
    "# Create the cytoscape graph widget\n",
    "cyto = ipycytoscape.CytoscapeWidget()\n",
    "cyto.graph.add_graph_from_json(json_file)\n",
    "cyto.set_style(s)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Display the graph.\n",
    "cyto"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Adding interactivity\n",
    "\n",
    "Because we provided the `monitor` keyword argument, the client is already listening for user interactions and sending them to the kernel. We can listen for these events in the kernel and respond with some sort of callback. To do this, we call `CytoscapeWidget.on` with the type of event and widget we are listening for followed by a callback that takes as its only argument the JSON dictionary representation of the node or edge the user interacted with. Let's create a simple example that prints the node's ID and the type of interaction to an `ipywidgets.Output` widget:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from ipywidgets import Output\n",
    "from IPython.display import display\n",
    "from pprint import pformat\n",
    "\n",
    "out = Output()\n",
    "\n",
    "def log_clicks(node):\n",
    "    with out:\n",
    "        print(f'clicked: {pformat(node)}')\n",
    "\n",
    "def log_mouseovers(node):\n",
    "    with out:\n",
    "        print(f'mouseover: {pformat(node)}')\n",
    "\n",
    "cyto.on('node', 'click', log_clicks)\n",
    "cyto.on('node', 'mouseover', log_mouseovers)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now display the graph again, this time with the (initially empty) log output below it, and try mousing over the nodes and clicking on them. You should see a stream of messages corresponding to your actions."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# call `display` to show both widgets in one output cell\n",
    "display(cyto)\n",
    "display(out)"
   ]
  }
 ],
 "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.8.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}