{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import numpy as np\n",
    "import panel as pn\n",
    "\n",
    "pn.extension('plotly')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Since Plotly plots are represented as simple JavaScript objects, we can easily define a JS callback to modify the data and trigger an update in a plot:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "xs, ys = np.mgrid[-3:3:0.2, -3:3:0.2]\n",
    "contour = dict(ncontours=4, type='contour', z=np.sin(xs**2*ys**2))\n",
    "layout = {'width': 600, 'height': 500, 'margin': {'l': 8, 'b': 8, 'r': 8, 't': 8}}\n",
    "fig = dict(data=contour, layout=layout)\n",
    "plotly_pane = pn.pane.Plotly(fig, width=600, height=500)\n",
    "\n",
    "buttons = pn.widgets.RadioButtonGroup(value='Medium', options=['Low', 'Medium', 'High'], button_type=\"success\")\n",
    "\n",
    "range_callback = \"\"\"\n",
    "var ncontours = [2, 5, 10]\n",
    "target.data[0].ncontours = ncontours[source.active]\n",
    "target.properties.data.change.emit()\n",
    "\"\"\"\n",
    "\n",
    "buttons.jslink(plotly_pane, code={'active': range_callback})\n",
    "\n",
    "component=pn.Column(buttons, plotly_pane)\n",
    "component"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## App\n",
    "\n",
    "Lets wrap it into nice template that can be served via `panel serve plotly_link.ipynb`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.template.FastListTemplate(\n",
    "    site=\"Panel\", title=\"Plotly JS Links\", main_max_width=\"650px\",\n",
    "    main=[\n",
    "        pn.pane.Markdown(\"Since Plotly plots are represented as simple JavaScript objects, we can easily define a **JS callback** to modify the data and trigger an update in a plot. \\n\\nThis allows you to **export your app as a static HTML file**.\", sizing_mode=\"stretch_width\"), \n",
    "        component\n",
    "    ]\n",
    ").servable();"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}