doc/python/TableAPI.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Python API for Table Display\n",
    "\n",
    "In addition to APIs for creating and formatting BeakerX's interactive table widget, the Python runtime configures pandas to display tables with the interactive widget instead of static HTML."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "import pandas as pd\n",
    "from beakerx import *\n",
    "from beakerx.object import beakerx"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "6cc688d4ca4e4d6d9f0dbdf14285f73f",
       "version_major": 2,
       "version_minor": 0
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "pd.read_csv('../resources/data/interest-rates.csv')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "c109cc21d4f948b395009abcdb65dfe2",
       "version_major": 2,
       "version_minor": 0
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "table = TableDisplay(pd.read_csv('../resources/data/interest-rates.csv'))\n",
    "table.setAlignmentProviderForColumn('m3', TableDisplayAlignmentProvider.CENTER_ALIGNMENT)\n",
    "table.setRendererForColumn(\"y10\", TableDisplayCellRenderer.getDataBarsRenderer(False))\n",
    "table.setRendererForType(ColumnType.Double, TableDisplayCellRenderer.getDataBarsRenderer(True))\n",
    "table"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "c6acb414397f494b84c0046870db07bc",
       "version_major": 2,
       "version_minor": 0
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "df = pd.read_csv('../resources/data/interest-rates.csv')\n",
    "df['time'] = df['time'].str.slice(0,19).astype('datetime64[ns]')\n",
    "table = TableDisplay(df)\n",
    "table.setStringFormatForTimes(TimeUnit.DAYS)\n",
    "table.setStringFormatForType(ColumnType.Double, TableDisplayStringFormat.getDecimalFormat(4,6))\n",
    "table.setStringFormatForColumn(\"m3\", TableDisplayStringFormat.getDecimalFormat(0, 0))\n",
    "\n",
    "table"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "table = TableDisplay(pd.read_csv('../resources/data/interest-rates.csv'))\n",
    "table\n",
    "#freeze a column\n",
    "table.setColumnFrozen(\"y1\", True)\n",
    "#hide a column\n",
    "table.setColumnVisible(\"y30\", False)\n",
    "\n",
    "table.setColumnOrder([\"m3\", \"y1\", \"y5\", \"time\", \"y2\"])\n",
    "\n",
    "def config_tooltip(row, column, table):\n",
    "      return \"The value is: \" + str(table.values[row][column])\n",
    "\n",
    "table.setToolTip(config_tooltip)\n",
    "\n",
    "table.setDataFontSize(16)\n",
    "table.setHeaderFontSize(18)\n",
    "\n",
    "table"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "mapListColorProvider = [\n",
    "    {\"a\": 1, \"b\": 2, \"c\": 3},\n",
    "    {\"a\": 4, \"b\": 5, \"c\": 6},\n",
    "    {\"a\": 7, \"b\": 8, \"c\": 5}\n",
    "]\n",
    "tabledisplay = TableDisplay(mapListColorProvider)\n",
    "\n",
    "colors = [\n",
    "    [Color.LIGHT_GRAY, Color.GRAY, Color.RED],\n",
    "    [Color.DARK_GREEN, Color.ORANGE, Color.RED],\n",
    "    [Color.MAGENTA, Color.BLUE, Color.BLACK]\n",
    "]\n",
    "\n",
    "def color_provider(row, column, table):\n",
    "    return colors[row][column]\n",
    "\n",
    "tabledisplay.setFontColorProvider(color_provider)\n",
    "tabledisplay"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "mapListFilter = [\n",
    "   {\"a\":1, \"b\":2, \"c\":3},\n",
    "   {\"a\":4, \"b\":5, \"c\":6},\n",
    "   {\"a\":7, \"b\":8, \"c\":5}\n",
    "]\n",
    "display = TableDisplay(mapListFilter)\n",
    "\n",
    "def filter_row(row, model):\n",
    "    return model[row][1] == 8\n",
    "\n",
    "display.setRowFilter(filter_row)\n",
    "\n",
    "display"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "table = TableDisplay(pd.read_csv('../resources/data/interest-rates.csv'))\n",
    "table.addCellHighlighter(TableDisplayCellHighlighter.getHeatmapHighlighter(\"m3\", TableDisplayCellHighlighter.FULL_ROW))\n",
    "\n",
    "table"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Display mode: Pandas default"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "beakerx.pandas_display_default()\n",
    "pd.read_csv('../resources/data/interest-rates.csv')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Display mode: TableDisplay Widget"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "beakerx.pandas_display_table()\n",
    "pd.read_csv('../resources/data/interest-rates.csv')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Recognized Formats"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "TableDisplay([{'y1':4, 'm3':2, 'z2':1}, {'m3':4, 'z2':2}])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "TableDisplay({\"x\" : 1, \"y\" : 2})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Programmable Table Actions"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "mapList4 = [\n",
    "   {\"a\":1, \"b\":2, \"c\":3},\n",
    "   {\"a\":4, \"b\":5, \"c\":6},\n",
    "   {\"a\":7, \"b\":8, \"c\":5}\n",
    "]\n",
    "display = TableDisplay(mapList4)\n",
    "\n",
    "def dclick(row, column, tabledisplay):\n",
    "    tabledisplay.values[row][column] = sum(map(int,tabledisplay.values[row]))\n",
    "\n",
    "display.setDoubleClickAction(dclick)\n",
    "\n",
    "def negate(row, column, tabledisplay):\n",
    "    tabledisplay.values[row][column] = -1 * int(tabledisplay.values[row][column])\n",
    "\n",
    "def incr(row, column, tabledisplay):\n",
    "    tabledisplay.values[row][column] = int(tabledisplay.values[row][column]) + 1\n",
    "\n",
    "display.addContextMenuItem(\"negate\", negate)\n",
    "display.addContextMenuItem(\"increment\", incr)\n",
    "\n",
    "display"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "mapList4 = [\n",
    "   {\"a\":1, \"b\":2, \"c\":3},\n",
    "   {\"a\":4, \"b\":5, \"c\":6},\n",
    "   {\"a\":7, \"b\":8, \"c\":5}\n",
    "]\n",
    "display = TableDisplay(mapList4)\n",
    "\n",
    "#set what happens on a double click\n",
    "display.setDoubleClickAction(\"runDoubleClick\")\n",
    "\n",
    "display"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "runDoubleClick"
    ]
   },
   "outputs": [],
   "source": [
    "print(\"runDoubleClick fired\")\n",
    "print(display.details)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Set index to DataFrame"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "df = pd.read_csv('../resources/data/interest-rates.csv')\n",
    "df.set_index(['m3'])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "scrolled": true
   },
   "outputs": [],
   "source": [
    "df = pd.read_csv('../resources/data/interest-rates.csv')\n",
    "df.index = df['time']\n",
    "df"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Update cell"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "dataToUpdate = [\n",
    "   {'a':1, 'b':2, 'c':3},\n",
    "   {'a':4, 'b':5, 'c':6},\n",
    "   {'a':7, 'b':8, 'c':9}\n",
    "]\n",
    "tableToUpdate = TableDisplay(dataToUpdate)\n",
    "\n",
    "tableToUpdate"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "tableToUpdate.values[0][0] = 99\n",
    "tableToUpdate.sendModel()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "tableToUpdate.updateCell(2,\"c\",121)\n",
    "tableToUpdate.sendModel()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## HTML format\n",
    "\n",
    "HTML format allows markup and styling of the cell's content.  Interactive JavaScript is not supported however."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "table = TableDisplay({\n",
    "                      'w': '$2 \\\\sigma$',\n",
    "                      'x': '<em style=\"color:red\">italic red</em>',\n",
    "                      'y': '<b style=\"color:blue\">bold blue</b>',\n",
    "                      'z': 'strings without markup work fine too',\n",
    "                      })\n",
    "table.setStringFormatForColumn(\"Value\", TableDisplayStringFormat.getHTMLFormat())\n",
    "table"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Auto linking of URLs\n",
    "\n",
    "The normal string format automatically detects URLs and links them.  An underline appears when the mouse hovers over such a string, and when you click it opens in a new window."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "TableDisplay({'Two Sigma': 'http://twosigma.com', 'BeakerX': 'http://BeakerX.com'})"
   ]
  }
 ],
 "metadata": {
  "celltoolbar": "Tags",
  "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.8"
  },
  "toc": {
   "base_numbering": 1,
   "nav_menu": {},
   "number_sections": false,
   "sideBar": false,
   "skip_h1_title": false,
   "title_cell": "Table of Contents",
   "title_sidebar": "Contents",
   "toc_cell": false,
   "toc_position": {},
   "toc_section_display": false,
   "toc_window_display": false
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}