{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import numpy as np\n",
    "import panel as pn\n",
    "\n",
    "import holoviews as hv\n",
    "import holoviews.plotting.bokeh\n",
    "\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "HoloViews-generated Bokeh plots can be statically linked to widgets that control their properties, allowing you to export static HTML files that allow end-user customization of appearance."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from bokeh.core.enums import MarkerType\n",
    "\n",
    "colors = [\"black\", \"red\", \"blue\", \"green\", \"gray\"]\n",
    "markers = list(MarkerType)\n",
    "\n",
    "# Define widget for properties we want to change\n",
    "alpha_widget = pn.widgets.FloatSlider(value=0.5, start=0, end=1, name='Alpha')\n",
    "size_widget = pn.widgets.FloatSlider(value=12, start=3, end=20, name='Size')\n",
    "color_widget = pn.widgets.ColorPicker(value='#f80000', name='Color')\n",
    "marker_widget = pn.widgets.Select(options=markers, value='circle', name='Marker')\n",
    "\n",
    "# Declare a Points object and apply some options\n",
    "points = hv.Points(np.random.randn(200, 2)).options(\n",
    "    padding=0.1, height=500, line_color='black', responsive=True)\n",
    "\n",
    "# Link the widget value parameter to the property on the glyph\n",
    "alpha_widget.jslink(points, value='glyph.fill_alpha')\n",
    "size_widget.jslink(points, value='glyph.size')\n",
    "color_widget.jslink(points, value='glyph.fill_color')\n",
    "marker_widget.jslink(points, value='glyph.marker')\n",
    "\n",
    "editor=pn.Row(pn.Column(alpha_widget, color_widget, marker_widget, size_widget), points)\n",
    "editor"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## App\n",
    "\n",
    "Lets wrap it into nice template that can be served via `panel serve holoviews_glyph_link.ipynb`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.template.FastListTemplate(\n",
    "    site=\"Panel\", title=\"Holoviews Property Links\", \n",
    "    main=[\n",
    "        pn.pane.Markdown(\"HoloViews-generated Bokeh plots can be **`jslinked`** to widgets that control their properties. \\n\\nThis allows you to **export static HTML files that allow end-user customization** of appearance.\", sizing_mode=\"stretch_width\"), \n",
    "        editor\n",
    "    ]\n",
    ").servable();"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}