{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from graphviz import Graph\n",
    "import panel as pn\n",
    "\n",
    "pn.extension(sizing_mode=\"stretch_width\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Panel and GraphViz\n",
    "\n",
    "The purpose of this example is to show how easy it is to use [GraphViz](https://graphviz.readthedocs.io/en/stable/manual.html#) with Panel."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Creating a Graph with GraphViz\n",
    "\n",
    "This section is independent of Panel. You can find a tutorial and examples in the [GraphViz Documentation](https://graphviz.readthedocs.io/en/stable/manual.html#)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def create_graph(word1=\"Hello\", word2=\"world\", node_color='#00aa41'):\n",
    "    graphviz_graph = Graph(word1, format='svg', node_attr={'color': node_color, 'style': 'filled', \"fontcolor\": 'white'})\n",
    "    graphviz_graph.attr(bgcolor='#A01346:pink', label='My Awesome Graph', fontcolor='white')\n",
    "    graphviz_graph.edge(word1, word2)\n",
    "    return graphviz_graph\n",
    "\n",
    "create_graph()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Making the Graph Interactive with Panel\n",
    "\n",
    "Panel recognizes and shows GraphViz objects in the `svg` format out of the box."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "word1 = pn.widgets.TextInput(value=\"Hello\", name=\"Node 1\")\n",
    "word2 = pn.widgets.TextInput(value=\"World\", name=\"Node 2\")\n",
    "node_color = pn.widgets.ColorPicker(value='#00aa41', name=\"Node Color\")\n",
    "\n",
    "create_graph = pn.bind(create_graph, word1=word1, word2=word2, node_color=node_color)\n",
    "\n",
    "create_graph_component = pn.Row(pn.Spacer(), pn.panel(create_graph, width=105, sizing_mode=\"fixed\"), pn.Spacer())\n",
    "\n",
    "component = pn.Column(word1, word2, node_color, create_graph_component)\n",
    "component"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Deploying it as an interactive App\n",
    "\n",
    "You can serve the app with `panel serve GraphViz.ipynb` an find the live app at http://localhost:5006/GraphViz"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.template.FastListTemplate(\n",
    "    site=\"Panel\",\n",
    "    site_url=\"https://panel.holoviz.org/_static/logo_horizontal.png\",\n",
    "    title=\"Graphviz - Basic Example\",\n",
    "    main=[component],\n",
    ").servable();"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}