Lectures/L-HTTP-REST-API/Ex-03-REST-bokeh-embed.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2021-03-09T12:30:26.601271Z",
     "start_time": "2021-03-09T12:30:25.837836Z"
    }
   },
   "outputs": [],
   "source": [
    "import datetime, time\n",
    "import numpy as np\n",
    "import pandas as pd\n",
    "import datetime as dt\n",
    "import os\n",
    "import json\n",
    "\n",
    "from bokeh.plotting import figure\n",
    "from bokeh.resources import CDN\n",
    "from bokeh.embed import *\n",
    "from bokeh.plotting import figure, output_file, curdoc, show as bshow\n",
    "\n",
    "from bokeh.models import DatetimeTickFormatter, Legend, NumeralTickFormatter\n",
    "from bokeh.layouts import widgetbox, row, column, layout, gridplot\n",
    "from bokeh.models import ColumnDataSource, Toggle, BoxAnnotation, CustomJS\n",
    "from bokeh.models.widgets import DataTable, DateFormatter, TableColumn, Div\n",
    "\n",
    "from bokeh.io import curdoc, output_notebook\n",
    "from bokeh.plotting import show, figure\n",
    "\n",
    "# koolpex related variables\n",
    "api_url = os.path.join(\"https://\", os.getenv(\"SERVERNAME\"), os.getenv(\"REPORT_URL\"))\n",
    "\n",
    "full_url = os.path.join(api_url, \"bps\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "variables": {
     "full_url": "&#39;<a href=\"https://kooplex-fiek.elte.hu/notebook/wfct0p-shareproba-wfct0p/report/bps&#39;\">https://kooplex-fiek.elte.hu/notebook/wfct0p-shareproba-wfct0p/report/bps&#39;</a>"
    }
   },
   "source": [
    "When embedding it:\n",
    "\n",
    "This goes to the `<head>`:\n",
    "```\n",
    "<script src=\"https://cdn.bokeh.org/bokeh/release/bokeh-2.0.1.min.js\"></script>\n",
    "<script src=\"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.0.1.min.js\"></script>\n",
    "<script src=\"https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.0.1.min.js\"></script>\n",
    "```\n",
    "\n",
    "And this goes to the `<body>`:\n",
    "```\n",
    "    <body>\n",
    "      <div id=\"myplot\"> </div>\n",
    "      <script>\n",
    "         fetch({{full_url}})\n",
    "           .then(function(response) { return response.json(); })\n",
    "           .then(function(item) { Bokeh.embed.embed_item(item); })\n",
    "      </script>\n",
    "\n",
    "    </body>\n",
    "```"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2020-12-07T19:40:46.169606Z",
     "start_time": "2020-12-07T19:40:45.974596Z"
    }
   },
   "outputs": [],
   "source": [
    "# output_notebook()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2020-12-06T20:42:17.762648Z",
     "start_time": "2020-12-06T20:42:17.685489Z"
    }
   },
   "outputs": [],
   "source": [
    "fname = 'data/buildbps.csv'\n",
    "df = pd.read_csv(fname)#, parse_dates=[1])\n",
    "\n",
    "# Cleaning and reformatting\n",
    "for s in [' BPS_Water_Bill ', ' BPS_Gas_Bill ', ' BPS_Electric_Bill ']:\n",
    "    df[s[1:-1]] = df[s].replace( '\\$-','0', regex=True ).replace( '[\\$,)]','', regex=True ).replace( '[(]','-',   regex=True ).astype(float)\n",
    "    \n",
    "    wrong_lon = np.where(df['SMMA_longitude']>0)[0][0]\n",
    "df['SMMA_longitude'].loc[wrong_lon] = df['SMMA_longitude'].loc[wrong_lon]*-1\n",
    "# list(df.columns)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2020-12-06T20:42:19.917650Z",
     "start_time": "2020-12-06T20:42:19.889330Z"
    }
   },
   "outputs": [],
   "source": [
    "keep_columns = ['BPS_School_Name', 'SMMA_latitude', 'SMMA_longitude',\n",
    "                'SMMA_FA_Windows', 'SMMA_FA_Boilers', 'SMMA_FA_Heating_Distribution_Systems',\n",
    "                'SMMA_FA_Ventilation_Distribution_Systems',\n",
    "                'BPS_Water_Bill', 'BPS_Gas_Bill', 'BPS_Electric_Bill']\n",
    "                \n",
    "df = df[keep_columns]       \n",
    "df.head().T"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2020-12-06T20:42:22.297378Z",
     "start_time": "2020-12-06T20:42:22.293836Z"
    }
   },
   "outputs": [],
   "source": [
    "# for debugging\n",
    "REQUEST = json.dumps({\n",
    " 'args' : {}\n",
    "})"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# GET /help\n",
    "\n",
    "resp = {'Help': \"\"\"When embedding it:\n",
    "\n",
    "This goes to the `<head>`:\n",
    "```\n",
    "<script src=\"https://cdn.bokeh.org/bokeh/release/bokeh-1.4.0.min.js\"></script>\n",
    "<script src=\"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-1.4.0.min.js\"></script>\n",
    "<script src=\"https://cdn.bokeh.org/bokeh/release/bokeh-tables-1.4.0.min.js\"></script>\n",
    "```\n",
    "\n",
    "And this goes to the `<body>`:\n",
    "```\n",
    "    <body>\n",
    "      <div id=\"myplot\"> </div>\n",
    "      <script>\n",
    "         fetch({{full_url}})\n",
    "           .then(function(response) { return response.json(); })\n",
    "           .then(function(item) { Bokeh.embed.embed_item(item); })\n",
    "      </script>\n",
    "\n",
    "    </body>\n",
    "```\"\"\"}\n",
    "\n",
    "print(json.dumps(resp))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# # ResponseInfo GET /help\n",
    "# print(json.dumps({\n",
    "#     \"headers\" : {\n",
    "#         \"Content-Type\" : \"application/json\"\n",
    "#     },\n",
    "#     \"status\" : 200\n",
    "# }))\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2020-12-06T20:43:14.284816Z",
     "start_time": "2020-12-06T20:43:13.834042Z"
    }
   },
   "outputs": [],
   "source": [
    "# GET /bps\n",
    "req = json.loads(REQUEST)\n",
    "args = req['args']\n",
    "\n",
    "data_source = ColumnDataSource(df)\n",
    "TOOLS = \"box_select,lasso_select, reset\"\n",
    "\n",
    "topleft = figure(tools=TOOLS, plot_width=400, plot_height=400, title=\"Geographic location\")\n",
    "topleft.scatter(\"SMMA_longitude\", \"SMMA_latitude\", source=data_source, color='red', size=10)\n",
    "\n",
    "topright = figure(tools=TOOLS, plot_width=400, plot_height=400,\n",
    "                y_axis_type=\"log\", x_axis_type=\"log\", title=\"Water-Gas correlation\")\n",
    "topright.circle(\"BPS_Water_Bill\", \"BPS_Gas_Bill\", source=data_source, size=10, color=\"navy\",\n",
    "                alpha=0.5, nonselection_fill_alpha=0.05)\n",
    "topright.yaxis.formatter = NumeralTickFormatter(format=\"0,0\")\n",
    "topright.xaxis.formatter = NumeralTickFormatter(format=\"0,0\")\n",
    "\n",
    "bottomright = figure(tools=TOOLS, plot_width=400, plot_height=400, \n",
    "                     y_axis_type=\"log\", x_axis_type=\"log\", title=\"Water-Electric correlation\")\n",
    "bottomright.square(\"BPS_Water_Bill\", \"BPS_Electric_Bill\", source=data_source,\n",
    "                   size=10, color=\"olive\", alpha=0.5, nonselection_fill_alpha=0.05)\n",
    "bottomright.yaxis.formatter = NumeralTickFormatter(format=\"0,0\")\n",
    "bottomright.xaxis.formatter = NumeralTickFormatter(format=\"0,0\")\n",
    "\n",
    "bottomleft = figure(tools=TOOLS, plot_width=400, plot_height=400, \n",
    "                    y_axis_type=\"log\", x_axis_type=\"log\", title=\"Electric-Gas correlation\")\n",
    "bottomleft.diamond(\"BPS_Electric_Bill\", \"BPS_Gas_Bill\", source=data_source, size=15, color=\"green\",\n",
    "                alpha=0.5, nonselection_fill_alpha=0.05)\n",
    "bottomleft.yaxis.formatter = NumeralTickFormatter(format=\"0,0\")\n",
    "bottomleft.xaxis.formatter = NumeralTickFormatter(format=\"0,0\")\n",
    "\n",
    "columns = [ TableColumn(field=tc, title=tc[4:]) \n",
    "           for tc in [\"BPS_School_Name\", \"BPS_Water_Bill\", \"BPS_Electric_Bill\", \"BPS_Gas_Bill\"]]\n",
    "data_table = DataTable(\n",
    "            source=data_source,\n",
    "            columns=columns,\n",
    "            width=800,\n",
    "            height=800,\n",
    "            editable=False,\n",
    "            reorderable=True,\n",
    "            #index_position=-1,\n",
    "        )\n",
    "\n",
    "Title = Div(text=\"<br><h2> Expenses of School Buildings in Boston</h2>\")\n",
    "p = column(Title,\n",
    "           row(gridplot([[topleft, topright], [bottomleft, bottomright]]), data_table))\n",
    "\n",
    "# show(p)\n",
    "\n",
    "item_text = json.dumps(json_item(p, \"myplot\"))\n",
    "print(item_text)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# ResponseInfo GET /bps\n",
    "print(json.dumps({\n",
    "    \"headers\" : {\n",
    "        \"Access-Control-Allow-Origin\" : \"https://%s\"%os.getenv(\"SERVERNAME\"),\n",
    "        \"Origin\" : \"https://%s\"%os.getenv(\"SERVERNAME\"),\n",
    "        \"Access-Control-Expose-Headers\": \"Content-Length,API-Key\"\n",
    "    },\n",
    "    \"status\" : 200\n",
    "}))\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "variables": {
     "api_url": "&#39;<a href=\"https://kooplex-fiek.elte.hu/notebook/wfct0p-shareproba-wfct0p/report&#39;\">https://kooplex-fiek.elte.hu/notebook/wfct0p-shareproba-wfct0p/report&#39;</a>"
    }
   },
   "source": [
    "All requests in bash command line with curl:\n",
    "```\n",
    "API_URL={{api_url}}\n",
    "curl -s \"$API_URL/bps\"\n",
    "```"
   ]
  }
 ],
 "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.8.8"
  },
  "latex_envs": {
   "LaTeX_envs_menu_present": true,
   "autoclose": false,
   "autocomplete": true,
   "bibliofile": "biblio.bib",
   "cite_by": "apalike",
   "current_citInitial": 1,
   "eqLabelWithNumbers": false,
   "eqNumInitial": 1,
   "hotkeys": {
    "equation": "Ctrl-E",
    "itemize": "Ctrl-I"
   },
   "labels_anchors": false,
   "latex_user_defs": false,
   "report_style_numbering": false,
   "user_envs_cfg": false
  },
  "varInspector": {
   "cols": {
    "lenName": 16,
    "lenType": 16,
    "lenVar": 40
   },
   "kernels_config": {
    "python": {
     "delete_cmd_postfix": "",
     "delete_cmd_prefix": "del ",
     "library": "var_list.py",
     "varRefreshCmd": "print(var_dic_list())"
    },
    "r": {
     "delete_cmd_postfix": ") ",
     "delete_cmd_prefix": "rm(",
     "library": "var_list.r",
     "varRefreshCmd": "cat(var_dic_list()) "
    }
   },
   "types_to_exclude": [
    "module",
    "function",
    "builtin_function_or_method",
    "instance",
    "_Feature"
   ],
   "window_display": false
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}