03c_other_dashboard_elements.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "1e6ad593-4cd7-42c7-9502-9e0f8fd9f3b1",
   "metadata": {},
   "source": [
    "# Finishing up this iteration of the dashboard\n",
    "\n",
    "### Goal of this notebook \n",
    "\n",
    "All of this is great, but so far we have only made the controls for the dashboard. In this section we will finish up the rest.\n",
    "\n",
    "We will mostly use the code from the earlier iteration of the dashboard, with the change that we will wrap the user elements inside of a class.\n",
    "\n",
    "### Steps you will take in this notebook\n",
    "\n",
    "1. Recreate the text widgets for the dashboard, this time as a class.\n",
    "2. Make a class to hold the data table display and graph.\n",
    "3. Explore one of the tricky bits of working with widget values that are mutable."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "885f4a97-c65c-4149-bb08-cba0afbc9310",
   "metadata": {},
   "source": [
    "As a reminder, our final dashboard was a `Hbox` with the text and controls in a `VBox` on the left and another `VBox` with the data and plot. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "697fea07-9cb2-4c71-8ba2-37cecbb60645",
   "metadata": {},
   "outputs": [],
   "source": [
    "#| default_exp widgets_classes"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "2aa1aa4c-7023-4412-b3ab-8f7b38ca39ce",
   "metadata": {},
   "outputs": [],
   "source": [
    "#| export\n",
    "import ipywidgets as widgets"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "10d5c983-c1d6-4ccf-ba85-05915b5766ca",
   "metadata": {},
   "source": [
    "## Implement the text widgets"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "04c338c0-7528-4f5f-a04f-b275f837df59",
   "metadata": {},
   "source": [
    "The next cell defines the couple of bits of text that are needed."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "6cdc87d8-fb9e-4c39-9a8d-7ff05b3dbb82",
   "metadata": {},
   "outputs": [],
   "source": [
    "#| export\n",
    "\n",
    "INTRO_TEXT = '''\n",
    "<p><b>Curve Smoothing</b>\n",
    "This tool is for smoothing and selecting land-ocean temperature data for visualization. Start by selecting a date\n",
    "range, and then select the smoothing algorithm you want to use. Then click through to the next step, where you will change properies\n",
    "of the curve smoothing algorithm you selected and visualize the data. \n",
    "</p>\n",
    "'''\n",
    "\n",
    "SOURCES_TEXT = '''\n",
    "<p>\n",
    "<b>About Land-Ocean Temperature Data</b>\n",
    "<a href=\"https://climate.nasa.gov/vital-signs/global-temperature/\"\n",
    "target=\"_blank\">Global Temperature (NASA)</a>\n",
    ",\n",
    "<a href=\"https://data.giss.nasa.gov/gistemp/\"\n",
    "target=\"_blank\">GISS Surface Temperature Analysis (NASA)</a>\n",
    "</p><p>\n",
    "This site is based on data downloaded from the following site on 2020-07-14:\n",
    "<a href=\"https://data.giss.nasa.gov/gistemp/graphs/graph_data/Global_Mean_Estimates_based_on_Land_and_Ocean_Data/graph.txt\"  # noqa\n",
    "target=\"_blank\">Global Mean Estimates based on Land and Ocean Data (NASA)</a>\n",
    "'''\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "5af361a1-9f65-4bdf-9359-eb5714484fef",
   "metadata": {},
   "source": [
    "These are similar enough that we'll put them into a class of their own."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "7f97b251-bfa5-46fe-9406-f19300b019c0",
   "metadata": {},
   "outputs": [],
   "source": [
    "#| export \n",
    "\n",
    "class TextBoxes(widgets.VBox):\n",
    "    def __init__(self):\n",
    "        # This calls the __init__ method of the parent class, which is \n",
    "        # widgets.VBox.\n",
    "        super().__init__()\n",
    "        # This layout is for the two HTML widgets\n",
    "        layout = widgets.Layout(max_width='500px', margin='15px 0 15px 0')\n",
    "        self.smoothing = widgets.HTML(value=INTRO_TEXT, layout=layout)\n",
    "        self.sources = widgets.HTML(value=SOURCES_TEXT, layout=layout)\n",
    "\n",
    "        # Layout for the VBox holding the HTML widgets\n",
    "        self.layout = widgets.Layout(min_width='500px')\n",
    "        self.children = [self.smoothing, self.sources]"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "7b6cf6d2-c494-480f-825e-6c438d9177d2",
   "metadata": {},
   "source": [
    "Let's take a look to make sure this looks the same as it did before."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "1f681413-2f25-461c-af80-339a49078a26",
   "metadata": {},
   "outputs": [],
   "source": [
    "TextBoxes()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "281e350b-0e07-4e00-84b0-1268e1df3de1",
   "metadata": {},
   "source": [
    "## Implement plotting and data display"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d4574128-a7ba-4a62-a31c-7fc85b0eaa5d",
   "metadata": {},
   "source": [
    "Next, we make the widget with the plot. To do that this time around we will make a class with a method to filter the data and to make the plot.\n",
    "\n",
    "First, some imports."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "8a32fb9f-ce13-4928-82e2-2de5936e67e6",
   "metadata": {},
   "outputs": [],
   "source": [
    "#| export\n",
    "from pathlib import Path\n",
    "\n",
    "from ipydatagrid import DataGrid\n",
    "from matplotlib import pyplot as plt\n",
    "import pandas as pd\n",
    "from scipy.signal import savgol_filter\n",
    "import traitlets as tr"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "cbdc602c-fd25-4f45-966d-375ad8999961",
   "metadata": {},
   "source": [
    "Next, a small class that reads the data file and has a *traitlet* called `smoothing_info` that is a dictionary. Recall that the `traitlets` package is what implements the observability of Jupyter widgets. We use a dictionary here because the intent, in the next notebook, is to link the `smoothing_info` trait of the object below to the `_value` trait of the `ipyautotui`-generated widget.\n",
    "\n",
    "In addition to declaring the traitlet we use `observe` in a new way, as a decorator for one of the methods of our class. This snippet of code means \"call the method `select_and_plot` any time the value of `smoothing_info` changes\":\n",
    "\n",
    "```python\n",
    "\n",
    "    @tr.observe('smoothing_info')\n",
    "    def select_and_plot(self, change):\n",
    "        self.window_size = ...\n",
    "```\n",
    "\n",
    "It is that method which does most of the work of generating a plot and updating the displayed data."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "720d5ac7-d2f5-4f4b-8d16-a04af425ed0d",
   "metadata": {},
   "outputs": [],
   "source": [
    "#| export\n",
    "DATA_DIR = 'data'\n",
    "DATA_FILE = 'land-ocean-temp-index.csv'\n",
    "\n",
    "class DataAndPlot(tr.HasTraits):\n",
    "    smoothing_info = tr.Dict(allow_none=True, default=None).tag(sync=True)\n",
    "    \n",
    "    def __init__(self):\n",
    "        self.original_data = pd.read_csv(Path(DATA_DIR) / DATA_FILE, escapechar='#')\n",
    "        self.plot_output = widgets.Output()\n",
    "        self.data_output = DataGrid(self.original_data, header_visibility=\"column\", auto_fit_columns=True)\n",
    "\n",
    "    @tr.observe('smoothing_info')\n",
    "    def select_and_plot(self, change):\n",
    "        self.window_size = change[\"new\"][\"window_size\"]\n",
    "        self.polynomial_order = change[\"new\"][\"polynomial_order\"]\n",
    "        self.year_range = change[\"new\"][\"year_range\"]\n",
    "        self.original_data['Savitzky-Golay'] = savgol_filter(\n",
    "            self.original_data['Temperature'], \n",
    "            self.window_size, \n",
    "            self.polynomial_order\n",
    "        )\n",
    "        \n",
    "        self.selected = (\n",
    "            self.original_data[(self.original_data['Year'] >= self.year_range[0]) & \n",
    "                               (self.original_data['Year'] <= self.year_range[1])]\n",
    "        )\n",
    "        self.display_plot()\n",
    "        self.display_data()\n",
    "\n",
    "    def display_plot(self): \n",
    "        # This plotting function is copied from the first \n",
    "        # version of the dashboard.\n",
    "        self.plot_output.clear_output(wait=True) \n",
    "        with self.plot_output: \n",
    "            plt.xlabel('Year') \n",
    "            plt.ylabel('Temperature Anomalies over Land w.r.t. 1951-80 (˚C)') \n",
    "            plt.title('Global Annual Mean Surface Air Temperature Change')\n",
    "            plt.plot(self.selected['Year'], self.selected['Temperature'], label='Raw Data') \n",
    "            plt.plot(self.selected['Year'], self.selected['Savitzky-Golay'], label='Smoothed Data') \n",
    "            plt.legend()\n",
    "            plt.show() \n",
    "\n",
    "    def display_data(self):\n",
    "        self.data_output.data = self.selected"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "67c77c39-7a9d-4009-b6f0-7707bb901c33",
   "metadata": {},
   "source": [
    "Let's make one of these objects and display its `plot_output`, which is an `Output` widget."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "1309027c-d2c3-4cac-bc8b-f109b218ddc2",
   "metadata": {},
   "outputs": [],
   "source": [
    "dap = DataAndPlot()\n",
    "dap.plot_output"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "0744b2e7-6ea2-4c8e-a618-307a0a2c8389",
   "metadata": {},
   "source": [
    "Because our class observes the value of `smoothing_info`, setting `smoothing_info` should generate a plot."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "5ca33f85-dee4-45f8-9b17-af85b58e6d53",
   "metadata": {},
   "outputs": [],
   "source": [
    "dap.smoothing_info = dict(year_range=(1950, 2000), window_size=5, polynomial_order=2)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "10b69cc9-458f-4b71-8820-cb44f301d60f",
   "metadata": {},
   "source": [
    "## Mutable traits are a little tricky"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "097fd19c-32c3-4d32-8c1d-53938fd34740",
   "metadata": {},
   "source": [
    "One important thing to watch out for that applies to widgets broadly. When the value of a trait is a *mutable* type, i.e. a type whose contents can change, like a `list` or a `dict`, changing the values inside that mutable object will not trigger a change in the event.\n",
    "\n",
    "To see that in action, in the cell below try changing `dap.smoothing_info[\"window_size\"]` to a value large than 5, the value with used in the cell above. Pick a fairly large value so that any change in the graph will be obvious"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "6d79d8b1-adb2-4b02-abe9-6682bb9c91b3",
   "metadata": {},
   "outputs": [],
   "source": [
    "# TODO: write answer \n",
    "\n",
    "dap.smoothing_info[\"window_size\"] = 2"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e5077995-d1fb-444e-ae5b-cf79de291286",
   "metadata": {},
   "source": [
    "To trigger a change you must set `smoothing_info` to a new dictionary. This also applies to widgets generated with `ipyautoui` since their values are always dictionaries.\n",
    "\n",
    "One shortcut for dong this is in the cell below. We get a copy of the current `smoothing_info`, change the value we want to change in the copy, then set `smoothing_info` equal to the copy."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "13694cb2-463b-4ca3-a8d5-bd8d4fc58cab",
   "metadata": {},
   "outputs": [],
   "source": [
    "current_smoothing = dap.smoothing_info.copy()\n",
    "current_smoothing[\"window_size\"] = 20\n",
    "dap.smoothing_info = current_smoothing"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "43456252-4d9b-4f2c-b972-4e3697e5a81b",
   "metadata": {},
   "source": [
    "Finally, lets make sure the data display is what we had before."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "e10a1c5c-c37b-4ffa-a9a6-3386aae7fbde",
   "metadata": {},
   "outputs": [],
   "source": [
    "dap.data_output"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "47fff6fe-b649-43c9-a869-4978d62145e7",
   "metadata": {},
   "source": [
    "Now that we are sure things are working well, we export this code with nbdev."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "3e6af8c1-6ea4-4cde-9405-fdcff63a9426",
   "metadata": {},
   "outputs": [],
   "source": [
    "from nbdev.export import nb_export\n",
    "\n",
    "nb_export('03c_other_dashboard_elements.ipynb', 'dashboard_pydantic')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "b77492cd-a020-4342-abf0-42c09c30e03b",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.11.9"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}