{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import networkx as nx\n",
    "import panel as pn\n",
    "\n",
    "pn.extension(sizing_mode=\"stretch_width\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Panel and NetworkX\n",
    "\n",
    "The purpose of this example is to show how easy it is to use [NetworkX](https://networkx.org/documentation/stable/index.html) with Panel. For this example to work you will need `NetworkX>=2.5` and `pygraphviz` installed.\n",
    "\n",
    "If you want interactive NetworkX graphs we recommend using [HvPlot](https://hvplot.holoviz.org/index.html). See the [HvPlot NetworkX User Guide](https://hvplot.holoviz.org/user_guide/NetworkX.html)."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Creating a Graph with NetworkX\n",
    "\n",
    "This section is independent of Panel. You can find a tutorial and examples in the [NetworkX Documentation](https://networkx.org/documentation/stable/index.html).\n",
    "\n",
    "We create the graph via NetworkX. We transform the NetworkX graph to a SVG using pygraphviz."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def clean_svg(svg):\n",
    "    \"\"\"To display a SVG in Panel nicely we need to \n",
    "    \n",
    "    - remove any html in front of the `<svg` tag. \n",
    "    - replace the fixed width and height\n",
    "    - make the fill transparent\n",
    "    \"\"\"\n",
    "    viewbox_start = svg.find(\"viewBox=\")\n",
    "    return '<svg height=\"100%\"' + svg[viewbox_start:].replace('fill=\"white\"','fill=\"transparent\"')\n",
    "\n",
    "def get_graph(nodes=5):\n",
    "    graph = nx.complete_graph(nodes)\n",
    "    pyviz_graph = nx.nx_agraph.to_agraph(graph)\n",
    "    svg_graph = pyviz_graph.draw(prog='dot', format='svg').decode('utf-8')\n",
    "    return clean_svg(svg_graph)\n",
    "\n",
    "pn.pane.SVG(get_graph(), height=500)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Making the Graph Interactive with Panel\n",
    "\n",
    "Panel recognizes and shows clean `svg` images out of the box."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "nodes=pn.widgets.IntSlider(value=5, start=2, end=7, name=\"Number of Nodes\")\n",
    "get_graph = pn.bind(get_graph, nodes=nodes)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "create_graph_component = pn.Row(pn.Spacer(), pn.panel(get_graph, height=500), pn.Spacer())\n",
    "\n",
    "component = pn.Column(nodes, create_graph_component, height=600)\n",
    "component"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Deploying it as an interactive App\n",
    "\n",
    "You can serve the app with `panel serve NetworkX.ipynb` and find the live app at http://localhost:5006/NetworkX"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "ACCENT_BASE_COLOR=\"#98b2d1\"\n",
    "\n",
    "pn.template.FastListTemplate(\n",
    "    site=\"Panel\",\n",
    "    site_url=\"https://panel.holoviz.org/_static/logo_horizontal.png\",\n",
    "    title=\"NetworkX - Basic Example\",\n",
    "    main=[component], header_background=ACCENT_BASE_COLOR, accent_base_color=ACCENT_BASE_COLOR,\n",
    "    theme_toggle=False,\n",
    ").servable();"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}