{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# How to update a table in place using proxy widgets\n",
    "\n",
    "This notebook provides an example of using proxy widgets to update a segment\n",
    "of HTML in place inside a notebook.  In this case we create a table using javascript\n",
    "and provide a method to update the table.\n",
    "\n",
    "Afterwards we can call the method with new data and the table updates in place\n",
    "in the notebook."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Make some test data:\n",
    "headers = \"Eenie Meanie Miney\".split()\n",
    "rows = []\n",
    "for i in range(4):\n",
    "    row = []\n",
    "    for j in range(3):\n",
    "        row.append((i+1)*(j+2))\n",
    "    rows.append(row)\n",
    "headers, rows"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Create a proxy widget with a table update method\n",
    "import jp_proxy_widget\n",
    "\n",
    "def updateable_table(headers, rows):\n",
    "    w = jp_proxy_widget.JSProxyWidget()\n",
    "    w.js_init(\"\"\"\n",
    "\n",
    "    element.update_table = function(headers, rows) {\n",
    "        element.empty();\n",
    "        var table = $(\"<table border style='text-align:center'/>\");\n",
    "        table.appendTo(element);\n",
    "        var header_row = $(\"<tr/>\");\n",
    "        for (var i=0; i<headers.length; i++) {\n",
    "            $(\"<th style='text-align:center'>\" + headers[i] + \"</th>\")\n",
    "            .width(50)\n",
    "            .appendTo(header_row);\n",
    "        }\n",
    "        header_row.appendTo(table);\n",
    "        for (var j=0; j<rows.length; j++) {\n",
    "            var table_row = $(\"<tr/>\").appendTo(table);\n",
    "            var data_row = rows[j];\n",
    "            for (var i=0; i<data_row.length; i++) {\n",
    "                $(\"<td>\" + data_row[i] + \"</td>\").appendTo(table_row);\n",
    "            }\n",
    "        }\n",
    "    }\n",
    "\n",
    "    element.update_table(headers, rows);\n",
    "    \"\"\", headers=headers, rows=rows)\n",
    "    return w\n",
    "\n",
    "# show the widget\n",
    "w = updateable_table(headers, rows)\n",
    "w"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Update the widget 20 times\n",
    "import time\n",
    "count = -20\n",
    "for i in range(21):\n",
    "    time.sleep(1)\n",
    "    rows = [rows[-1]] + rows[:-1]  # rotate the rows\n",
    "    rows[0][0] = count  # change the upper left entry.\n",
    "    count += 1\n",
    "    w.element.update_table(headers, rows)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "When first displayed the table looks like this:\n",
    "\n",
    "<img src=\"table_before.png?a=b\" width=\"200\">\n",
    "\n",
    "When we run the updates the table changes in place 21 times\n",
    "and ultimately looks like this:\n",
    "\n",
    "<img src=\"table_after.png?a=b\" width=\"200\">\n",
    "\n",
    "# The same thing, but using pandas\n",
    "\n",
    "It is easy to do the same in place update with pandas"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import pandas as pd\n",
    "import numpy as np\n",
    "numbers = (100 * np.random.randn(8, 4)).astype(np.int)\n",
    "columns = \"eenie meenie miney moe\".split()\n",
    "df = pd.DataFrame(numbers, columns=columns)\n",
    "headers = list(df.columns)\n",
    "rows = df.values.tolist()\n",
    "w = updateable_table(headers, rows)\n",
    "w"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# update the dataframe and redisplay the table 15 times\n",
    "import time\n",
    "count = 0\n",
    "for i in range(15):\n",
    "    df.values[:] = (100 * np.random.randn(8, 4)).astype(np.int)\n",
    "    df.values[0,0] = i\n",
    "    headers = list(df.columns)\n",
    "    rows = df.values.tolist()\n",
    "    w.element.update_table(headers, rows)\n",
    "    time.sleep(1)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "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.7.0"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}