{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Just the dasboard\n",
    "\n",
    "This notebook contains just the dashboard stuff from the [previous notebook](03_heat_and_trees.ipynb). It might be slightly easier to run since there are no interactions being picked up other than those in the dashboard itself."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import intake\n",
    "import pandas as pd\n",
    "\n",
    "import holoviews as hv\n",
    "from holoviews import opts\n",
    "from holoviews.streams import Params\n",
    "import hvplot.xarray\n",
    "import hvplot.pandas\n",
    "\n",
    "import colorcet as cc\n",
    "import panel as pn\n",
    "\n",
    "from geoviews.tile_sources import EsriImagery, tile_sources\n",
    "\n",
    "hv.extension('bokeh')\n",
    "\n",
    "mean_temp_f = intake.open_zarr('./data/mean_temp.zarr').read()\n",
    "trees_df = pd.read_parquet('./data/trees.parq')\n",
    "\n",
    "special_cmap = cc.fire[::-1][90:]\n",
    "\n",
    "temp_p = mean_temp_f\\\n",
    "    .hvplot('x', 'y', title='Surface Temp (F)', geo=True, cmap=special_cmap,\n",
    "            height=500, width=550, alpha=.5, legend=False)\\\n",
    "    .opts(opts.Image(clipping_colors={'min': 'transparent', 'max': 'transparent'}))\n",
    "\n",
    "trees_p = trees_df.hvplot.points('Longitude', 'Latitude', title='Street Tree Density',\n",
    "                                 geo=True, datashade=True, dynspread=True, framewise=False,\n",
    "                                 height=500, width=500, legend=False, cmap=cc.kgy[::-1]).opts(tools=[])\n",
    "\n",
    "start, end = (int(mean_temp_f.temperature.min() - 1), \n",
    "              int(mean_temp_f.temperature.max() + 1))\n",
    "thresh_slider = pn.widgets.RangeSlider(start=start, end=end, value=(start, end), \n",
    "                                       step=1, bar_color='#ff0000',\n",
    "                                       name='Temperature range')\n",
    "thresh_slider.jslink(temp_p, code={'value': \"\"\"\n",
    "color_mapper.low = source.value[0];\n",
    "color_mapper.high = source.value[1];\n",
    "\"\"\"})\n",
    "\n",
    "temp_alpha_slider = pn.widgets.FloatSlider(start=0, end=1, value=.5, name='Temperature alpha')\n",
    "temp_alpha_slider.jslink(temp_p, value='glyph.global_alpha')\n",
    "\n",
    "trees_toggle = pn.widgets.Toggle(name='Tree Layer', value=True)\n",
    "trees_toggle.jslink(trees_p, value='glyph_renderer.visible')\n",
    "\n",
    "trees_alpha_slider = pn.widgets.FloatSlider(start=0, end=1, value=.7, name='Trees alpha')\n",
    "trees_alpha_slider.jslink(trees_p, value='glyph.global_alpha')\n",
    "\n",
    "basemap_selector = pn.widgets.Select(name='Tiling Service', value=EsriImagery, options=tile_sources)\n",
    "\n",
    "def set_tile_source(value):\n",
    "    return value\n",
    "    \n",
    "basemap_p = hv.DynamicMap(set_tile_source, streams=[Params(basemap_selector, ['value'])])\n",
    "\n",
    "dashboard = pn.Row(\n",
    "    pn.Column(\n",
    "        '# Heat and Trees',\n",
    "        thresh_slider, \n",
    "        temp_alpha_slider,\n",
    "        basemap_selector,\n",
    "        trees_toggle,\n",
    "        trees_alpha_slider),\n",
    "    temp_p.opts(framewise=False) * trees_p.opts(framewise=False) * basemap_p.opts(framewise=False)\n",
    ")\n",
    "\n",
    "dashboard.servable()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}