Installing jupyter_declarativewidgets on Bluemix IPython Notebook 3.2.x Raw

jupyter_declarativewidgets_bluemix.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Installing jupyter_declarativewidgets on Bluemix IPython Notebook 3.2.x\n",
    "\n",
    "This notebook installs the `jupyter_declarativewidgets` extension from https://github.com/jupyter-incubator/declarativewidgets on the Jupyter notebook server in Bluemix. \n",
    "\n",
    "At the time of this writing, however, the Bluemix service is running IPython Notebook 3.2.1 which was released prior to [The Big Split™](http://blog.jupyter.org/2015/04/15/the-big-split/), aka the refactoring of IPython into Jupyter. \n",
    "\n",
    "Due mainly to changes to the location of our main dependency, [ipwidgets](https://github.com/ipython/ipywidgets), between IPython 3.2.1 and Jupyter 4.x, we are only able to install an old release of declarativewidgets `(0.1.3)`.\n",
    "\n",
    "At the time of this writing, however, the Bluemix service is running IPython Notebook 3.2.1 which was released prior to [The Big Split™](http://blog.jupyter.org/2015/04/15/the-big-split/), aka the refactoring of IPython into Jupyter. Because of some underlying differences between the two releases, the convienent install steps above will not work. But never fear: we can still install and activate the extension with a few steps right here in the convenience of a notebook.\n",
    "\n",
    "To install `jupyter_declarativewidgets` on Jupyter 4.x, please refer to project's [README](https://github.com/jupyter-incubator/declarativewidgets/blob/master/README.md)\n",
    "\n",
    "<div class=\"alert alert-info\" role=\"alert\" style=\"margin-top: 10px\">\n",
    "<p><strong>Note</strong><p>\n",
    "\n",
    "<p>This is a one-time operation. Once we run this notebook through to completion once, all other notebooks in the current service instance on Bluemix will have the `jupyter_declarativewidgets` extension installed.</p>\n",
    "\n",
    "<p>Also note that due once the service moves to using Jupyter 4.x, this notebook will not work.</p>\n",
    "\n",
    "\n",
    "</div>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Import this Notebook\n",
    "\n",
    "We can import this notebook directly into the Bluemix IPython Notebook server in order to run it. If you've already imported this notebook, and are reading these instructions from within Bluemix, skip to the next section.\n",
    "\n",
    "1. Login to your Bluemix account.\n",
    "2. Click *Dashboard* in the header bar.\n",
    "3. Click the *Data & Analytics - Work with Data* tile.\n",
    "4. Click *Analytics* in the left bar.\n",
    "5. Click an *Apache Spark* tile if you have one. Otherwise, click *New Instance*, fill out the form, and click *Create Instance*.\n",
    "6. Click the *New Notebook* button.\n",
    "7. Click the *From URL* tab.\n",
    "8. Enter a name in the *Name* field (e.g., *install_jupyter_declarativewidgets*).\n",
    "9. Enter the URL https://gist.githubusercontent.com/lbustelo/4ef18d147c8e225ffe65/raw/jupyter_declarativewidgets_bluemix.ipynb in the *URL* field."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Install the Extension"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Once we have the notebook in Bluemix, we can simply run the code in it to install the extension. Feel free to click *Cell &rarr; Run All* now and then refresh your browser if you don't care about the details. If you want to understand what's happening, use *Cell &rarr; Run*, the equivalent toolbar button, or the *Shift-Enter* hotkey to run through the remainder of the notebook one cell at a time.\n",
    "\n",
    "Now, let's use `pip` to install the package to the user Python prefix where we have read/write access."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "!pip install jupyter_declarativewidgets==0.1.3 --user -U"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "By default, the `pip install` command above installs the extension on the `ipython_default` profile. Bluemix notebooks are under a different profile, so we need to reinstall there."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "from IPython.html.services.config import ConfigManager\n",
    "ip = get_ipython()\n",
    "cm = ConfigManager(profile_dir=ip.profile_dir.location)\n",
    "cm.update('notebook', {\"load_extensions\": {'urth_widgets/js/main': True}})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<div class=\"alert alert-warning\"><b>Note:</b> If you just completed the installation steps above for the first time, make sure you refresh your browser before proceeding with the example below.</div>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Declarative Widgets\n",
    "\n",
    "Below are a couple of examples. For more details see examples at http://jupyter.cloudet.xyz/tree/declarativewidgets and checkout documentation at http://jupyter-incubator.github.io/declarativewidgets/docs.html. Also refer to the Polymer [docs](https://www.polymer-project.org/1.0/docs/devguide/feature-overview.html) for details on building web `templates`.\n",
    "\n",
    "<div class=\"alert alert-info\" role=\"alert\" style=\"margin-top: 10px\">\n",
    "<p><strong>Note</strong><p>\n",
    "\n",
    "<p>Documentation is for the latest release of `jupyter_declarativewidgets`, so some of the capabilities are not available in this release</p>\n",
    "\n",
    "</div>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Functions\n",
    "\n",
    "One of the main elements is `<urth-core-function>`. It allows connecting a web template to a Python function."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "def aFunction(x='World'):\n",
    "    return(\"Hello {}\".format(x))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "%%html\n",
    "<template is=\"dom-bind\">\n",
    "    <urth-core-function id=\"f1\" ref=\"aFunction\" arg-x=\"{{x}}\" result=\"{{res}}\" auto></urth-core-function>\n",
    "    \n",
    "    <div>\n",
    "        <label>x:</label>\n",
    "        <input type=\"text\" value=\"{{x::input}}\"></input>\n",
    "    </div>    \n",
    "    \n",
    "    <div>\n",
    "        <label>res:</label>\n",
    "        <span>{{res}}<span>\n",
    "    </div>\n",
    "</template>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Dataframes\n",
    "\n",
    "The `<urth-core-dataframe>` allows bringing the data from a Pandas (or Spark) Dataframe to the web template. There are some CSS styling used below, but it is mean to show that Dataframes don't have to be rendered as Tables or Charts."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "import pandas as pd\n",
    "aDataFrame = pd.DataFrame([\n",
    "        [\"John\", \"Johnson\",\"Web Developer\", \"13\", \"1234325431\", \"http://javi.er\"], \n",
    "        [\"Jane\", \"Doe\",\"Software Engineer\", \"456\", \"1434215411\", \"http://www.ibm.us\"],\n",
    "        [\"Joe\", \"Smith\",\"Rockstar Dev\", \"4526\", \"1237328421\", \"http://cooldevs.org/xavier\"]\n",
    "    ], columns=[\"First \", \"Last Name\", \"Role\", \"Amount\", \"Bigger Number\", \"Website\"]\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "%%html\n",
    "<style>\n",
    ".bcard {\n",
    "    border: 1px solid black;\n",
    "    padding: 10px;\n",
    "    background-color: #ECF0F1;\n",
    "    width: 300px;\n",
    "    height: 150px;\n",
    "    margin-top: 11px;\n",
    "    font-size: 12px;\n",
    "    position: relative;\n",
    "}\n",
    "\n",
    ".bcard .info {\n",
    "    box-sizing: border-box;\n",
    "    width: 65%;\n",
    "    margin-left: 35%;\n",
    "    margin-top: 5%;\n",
    "}\n",
    "\n",
    ".bcard .line {\n",
    "    display: block;\n",
    "    line-height: 1.3em;\n",
    "}\n",
    "\n",
    ".bcard .full-name {\n",
    "    font-size: 1.4em;\n",
    "}\n",
    "\n",
    ".bcard .title {\n",
    "    color: #888;\n",
    "    font-style: italic;\n",
    "    margin-bottom: 20px;\n",
    "}\n",
    "\n",
    ".bcard .logo {\n",
    "    background-image: url('https://avatars3.githubusercontent.com/u/7388996?v=3&s=70');\n",
    "    background-repeat: no-repeat;\n",
    "    width: 65px;\n",
    "    height: 70px;\n",
    "    position: absolute;\n",
    "    top: 40px;\n",
    "    left: 14px;\n",
    "}\n",
    "</style>\n",
    "<template is=\"dom-bind\">\n",
    "\n",
    "    <urth-core-dataframe ref=\"aDataFrame\" value=\"{{df}}\" auto></urth-core-dataframe>\n",
    "\n",
    "    <template is=\"dom-repeat\" items=\"{{df.data}}\">\n",
    "      <div class=\"bcard\">\n",
    "        <div class=\"info\">\n",
    "            <div class=\"line full-name\"><span>{{item.0}}</span> <span>{{item.1}}</span></div>\n",
    "            <span class=\"line title\">{{item.2}}</span>\n",
    "            <span class=\"line phone-number\">{{item.3}}</span>\n",
    "            <span class=\"line email\">{{item.4}}</span>\n",
    "            <span class=\"line website\">{{item.5}}</span>\n",
    "        </div>\n",
    "        <div class=\"logo\"></div>\n",
    "      </div>\n",
    "    </template>\n",
    "    \n",
    "</template>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Channels\n",
    "\n",
    "`jupyter-declarativewidgets` use the concept of channels to exchange data between the web template and the kernel. Note that the template below is using `urth-core-bind`. For the most part, all templates should be `urth-core-bind` to take advantages to some nice data binding features like cross-cell data binding and data exchange through channels."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "%%html\n",
    "<template is=\"urth-core-bind\" channel=\"demo\">\n",
    "    Type here: <input type=\"text\" value=\"{{x::input}}\"></input>\n",
    "</template>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "%%html\n",
    "<template is=\"urth-core-bind\" channel=\"demo\">\n",
    "    See it here: <span>{{x}}</span>\n",
    "</template>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from urth.widgets.widget_channels import channel\n",
    "\n",
    "channel(\"demo\").set(\"x\", \"Hello from kernel!\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Tables and Charts\n",
    "\n",
    "`jupyter-declarativewidgets` has a variety of visual elements, `<urth-viz-table>` and `<urth-viz-chart`>. These elements are not imported into the notebook by default, so we need to import them using the `<link>` tag.\n",
    "\n",
    "\n",
    "<div class=\"alert alert-warning\"><b>Note:</b> Since it is not possible to install server extensions without access to restart the notebook server, this setup is missing the capabilities to install arbitrary WebComponents.</div>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "%%html\n",
    "<link rel=\"import\" href=\"../nbextensions/urth_widgets/urth_components/urth-viz-table/urth-viz-table.html\">\n",
    "<link rel=\"import\" href=\"../nbextensions/urth_widgets/urth_components/urth-viz-chart/urth-viz-chart.html\">"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "##### Tables\n",
    "The cell below shows how to visualize a dataframe in a table and interact with it through selection."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "%%html\n",
    "<template id=\"tpl\" is=\"dom-bind\">\n",
    "    <urth-core-dataframe id=\"f1\" ref=\"aDataFrame\" value=\"{{df}}\" auto ></urth-core-dataframe>\n",
    "\n",
    "    <p>Name of first person: <strong>{{ df.data.0.0 }}</strong></p>\n",
    "    \n",
    "    <urth-viz-table datarows=\"{{ df.data }}\" selection=\"{{sel}}\" columns=\"{{ df.columns }}\" rows-visible=6>\n",
    "        <urth-viz-col index=\"4\" format=\"$0,0.00\" type=\"numeric\"></urth-viz-col>\n",
    "        <urth-viz-col index=\"3\" format=\"$0,0.0\" type=\"numeric\"></urth-viz-col>\n",
    "    </urth-viz-table> \n",
    "    <p>Select something from the table</p>\n",
    "    <div class=\"bcard\">\n",
    "        <div class=\"info\">\n",
    "            <div class=\"line full-name\"><span>{{sel.0}}</span> <span>{{sel.1}}</span></div>\n",
    "            <span class=\"line title\">{{sel.2}}</span>\n",
    "            <span class=\"line phone-number\">{{sel.3}}</span>\n",
    "            <span class=\"line email\">{{sel.4}}</span>\n",
    "            <span class=\"line website\">{{sel.5}}</span>\n",
    "        </div>\n",
    "        <div class=\"logo\"></div>\n",
    "    </div>\n",
    "</template>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "##### Charts\n",
    "The cell below shows how to visualize a dataframe in a bar chart and interact with it through selection."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "anotherDataFrame = pd.DataFrame([\n",
    "        [1, 10, 5],\n",
    "        [2, 2, 6],\n",
    "        [3, 5, 7]\n",
    "    ], columns=[\"Index\", \"Series 1\", \"Series 2\"]\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "%%html\n",
    "<template id=\"tpl1\" is=\"dom-bind\">\n",
    "    <urth-core-dataframe id=\"f1\" ref=\"anotherDataFrame\" value=\"{{df}}\" auto></urth-core-dataframe>\n",
    "    <urth-viz-chart type=\"bar\" id='c1' datarows='{{df.data}}' columns='{{df.columns}}' selection='{{sel}}'></urth-viz-bar>\n",
    "    Selection is: \n",
    "        <ul>\n",
    "            <template is=\"dom-repeat\" items='{{sel}}'>\n",
    "                <li>x: <span>{{item.x}}</span> y: <span>{{item.y}}</span></li>\n",
    "            </template>\n",
    "        </ul>\n",
    "</template>"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 2
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython2",
   "version": "2.7.9"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}