urth-r-widgets.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Initialize Declarativewidgets"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "library(\"declarativewidgets\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "initWidgets()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Import Polymer elements:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "IRdisplay::display_html(\"\n",
    "<link rel='import' href='urth_components/paper-slider/paper-slider.html'\n",
    "        is='urth-core-import' package='PolymerElements/paper-slider'>\n",
    "<link rel='import' href='urth_components/urth-viz-table/urth-viz-table.html'\n",
    "        is='urth-core-import'>\n",
    "<link rel='stylesheet' type='text/css' href='bcard.css'>\n",
    "<link rel='import' href='urth_components/urth-viz-pie/urth-viz-pie.html' \n",
    "        is='urth-core-import'>\n",
    "<link rel='import' href='urth_components/urth-viz-table/urth-viz-table.html' \n",
    "        is='urth-core-import'>\n",
    "<link rel='import' href='urth_components/paper-input/paper-input.html' \n",
    "        is='urth-core-import' package='PolymerElements/paper-input'>\n",
    "<link rel='import' href='urth_components/paper-spinner/paper-spinner.html' \n",
    "        is='urth-core-import' package='PolymerElements/paper-spinner'>\n",
    "\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Function widget"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "math = function(x, y) {return (x*y)}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "IRdisplay::display_html(\"\n",
    "<template is='dom-bind'>\n",
    "<urth-core-function ref='math' arg-x='{{x}}' arg-y='{{y}}' result='{{res}}' auto></urth-core-function>\n",
    "    <label>x:</label><paper-slider min='10' max='100' step='1' value='{{x}}'></paper-slider><span>{{x}}</span><br>\n",
    "    <label>y:</label><paper-slider min='1' max='100' step='1' value='{{y}}'></paper-slider><span>{{y}}</span><br>\n",
    "Result: <span>{{res}}</span>\n",
    "</template>\n",
    "\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Calling a function within an object"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "library(R6)\n",
    "Test <- R6Class(\n",
    "    'Test',\n",
    "    public = list(\n",
    "        moreMath = function(x, y) {\n",
    "            return (x*y)\n",
    "        }\n",
    "    )\n",
    ")\n",
    "t <- Test$new()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "IRdisplay::display_html(\"\n",
    "<template is='dom-bind'>\n",
    "<urth-core-function ref='t$moreMath' arg-x='{{x}}' arg-y='{{y}}' result='{{res}}' auto></urth-core-function>\n",
    "    <label>x:</label><paper-slider min='10' max='100' step='1' value='{{x}}'></paper-slider><span>{{x}}</span><br>\n",
    "    <label>y:</label><paper-slider min='1' max='100' step='1' value='{{y}}'></paper-slider><span>{{y}}</span><br>\n",
    "Result: <span>{{res}}</span>\n",
    "</template>\n",
    "\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Channels"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Setting data in a channel"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "IRdisplay::display_html(\"\n",
    "<template is='urth-core-bind' channel='a'>\n",
    "    <div>Hello from <span>{{user}}</span></div>\n",
    "</template>\n",
    "\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "channel(\"a\")$set(\"user\", \"mike p\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Watching data in a channel"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "IRdisplay::display_html(\"\n",
    "<template is='urth-core-bind' channel='a'>\n",
    "    Name: <input value='{{user::input}}'></input>\n",
    "    <p>\n",
    "        <span>{{msg}}</span>\n",
    "    </p>\n",
    "</template>\n",
    "\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "handler <- function(old_val, new_val) {\n",
    "    print(\"in handler\")\n",
    "    print(old_val)\n",
    "    print(new_val)\n",
    "    channel(\"a\")$set(\"msg\", paste(\"Watch triggers for new value {\",new_val,\"}, and old value {\",old_val,\"}.\"))\n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "channel(\"a\")$watch(\"user\", handler)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true
   },
   "source": [
    "### DataFrame widget"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "First_Name <- c(\"John\", \"Jane\", \"Joe\")\n",
    "Last_Name <- c(\"Johnson\", \"Doe\", \"Smith\")\n",
    "Role <- c(\"Web Developer\", \"Software Engineer\", \"Rockstar Dev\")\n",
    "Amount <- c(\"500\", \"456\", \"4526\")\n",
    "Bigger_Number <- c(\"1234325431\", \"1434215411\", \"1237328421\")\n",
    "Website <- c(\"http://javi.er\", \"http://www.ibm.us\", \"http://cooldevs.org/xavier\")\n",
    "Date <- c(as.Date(\"2013-01-01\"), as.Date(\"2013-01-02\"), as.Date(\"2013-01-03\"))\n",
    "aDataFrame <- data.frame(First_Name, Last_Name, Role, Amount, Bigger_Number, Website, Date)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "IRdisplay::display_html(\"\n",
    "<template id='foo' is='dom-bind'>\n",
    "    <urth-core-dataframe ref='aDataFrame' limit='10' value='{{x}}'></urth-core-dataframe>\n",
    "    <urth-viz-pie primary='0' secondary='3'datarows='{{ x.data }}' columns='{{ x.columns }}'></urth-viz-pie>\n",
    "\n",
    "    <urth-viz-table datarows='{{ x.data }}' selection='{{sel}}' columns='{{ x.columns }}' selection-as-object>\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",
    "\n",
    "    <div class='bcard'>\n",
    "        <div class='info'>\n",
    "            <div class='line full-name'><span>{{sel.First_Name}}</span> <span>{{sel.Last_Name}}</span></div>\n",
    "            <span class='line title'>{{sel.Role}}</span>\n",
    "            <span class='line phone-number'>{{sel.Amount}}</span>\n",
    "            <span class='line email'>{{sel.Bigger_Number}}</span>\n",
    "            <span class='line website'>{{sel.Website}}</span>\n",
    "        </div>\n",
    "        <div class='logo'></div>\n",
    "    </div>\n",
    "</template>\n",
    "\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Calling a dataframe within an object"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "library(R6)\n",
    "DfInObj <- R6Class(\n",
    "    'DfInObj',\n",
    "    public = list(\n",
    "        df = aDataFrame\n",
    "    )\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "klass <- DfInObj$new()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "IRdisplay::display_html(\"\n",
    "<template id='foo' is='dom-bind'>\n",
    "    <urth-core-dataframe ref='klass$df' limit='10' value='{{x}}'></urth-core-dataframe>\n",
    "    <urth-viz-pie primary='0' secondary='3'datarows='{{ x.data }}' columns='{{ x.columns }}'></urth-viz-pie>\n",
    "\n",
    "    <urth-viz-table datarows='{{ x.data }}' selection='{{sel}}' columns='{{ x.columns }}' selection-as-object>\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",
    "\n",
    "    <div class='bcard'>\n",
    "        <div class='info'>\n",
    "            <div class='line full-name'><span>{{sel.First_Name}}</span> <span>{{sel.Last_Name}}</span></div>\n",
    "            <span class='line title'>{{sel.Role}}</span>\n",
    "            <span class='line phone-number'>{{sel.Amount}}</span>\n",
    "            <span class='line email'>{{sel.Bigger_Number}}</span>\n",
    "            <span class='line website'>{{sel.Website}}</span>\n",
    "        </div>\n",
    "        <div class='logo'></div>\n",
    "    </div>\n",
    "</template>\n",
    "\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### DataFrame explorer"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "IRdisplay::display_html(\"<urth-core-channel name='a' debug><urth-core-channel>\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "explore(aDataFrame, channel='a', properties=list(\"selection-as-object\"=TRUE), bindings=list(selection='sel'))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Spark DataFrame widget"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "library(SparkR)\n",
    "sc <- sparkR.init()\n",
    "sqlContext <- sparkRSQL.init(sc)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "sparkDataFrame <- createDataFrame(sqlContext, aDataFrame)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "IRdisplay::display_html(\"\n",
    "<template id='foo' is='dom-bind'>\n",
    "    <urth-core-dataframe ref='sparkDataFrame' limit='10' value='{{x}}'></urth-core-dataframe>\n",
    "    <urth-viz-pie primary='0' secondary='3'datarows='{{ x.data }}' columns='{{ x.columns }}'></urth-viz-pie>\n",
    "\n",
    "    <urth-viz-table datarows='{{ x.data }}' selection='{{sel}}' columns='{{ x.columns }}' selection-as-object>\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",
    "\n",
    "    <div class='bcard'>\n",
    "        <div class='info'>\n",
    "            <div class='line full-name'><span>{{sel.First_Name}}</span> <span>{{sel.Last_Name}}</span></div>\n",
    "            <span class='line title'>{{sel.Role}}</span>\n",
    "            <span class='line phone-number'>{{sel.Amount}}</span>\n",
    "            <span class='line email'>{{sel.Bigger_Number}}</span>\n",
    "            <span class='line website'>{{sel.Website}}</span>\n",
    "        </div>\n",
    "        <div class='logo'></div>\n",
    "    </div>\n",
    "</template>\n",
    "\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Function returning a custom class. Defining a custom serializer\n",
    "In this example, we have a function that returns a custom type Foo. We would like to serialize the Foo that's returned so that the value is useful for other widgets."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "library(R6)\n",
    "Foo <- R6Class(\n",
    "    'Foo',\n",
    "    public = list(\n",
    "        foo = function() {\n",
    "            return (\"The foo is strong with this one!\")\n",
    "        }\n",
    "    )\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now define the custom serializer for Foo by implementing the BaseSerializer methods.\n",
    "    \n",
    "For our serialize method, we'll call obj$foo()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "Foo_Serializer <- R6Class(\n",
    "    'Foo_Serializer',\n",
    "    inherit = Serializer,\n",
    "    public = list(\n",
    "        klass = function() {\n",
    "            return (\"Foo\")\n",
    "        },\n",
    "        serialize = function(obj) {\n",
    "            return (obj$foo())\n",
    "        },\n",
    "        check_packages = function() {\n",
    "            tryCatch({\n",
    "                library(base)\n",
    "            }, error = function(e) {\n",
    "                return (False)\n",
    "            })\n",
    "            return (True)\n",
    "        },\n",
    "        initialize = function() {\n",
    "            #initialize must exists on this class\n",
    "        }\n",
    "    )\n",
    ")\n",
    "\n",
    "register_serializer(Foo_Serializer$new())"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "aFooFunction <- function() {\n",
    "    return (Foo$new())\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now when we invoke, the function will return the Foo instance, and we'll see the serialized return value:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "IRdisplay::display_html(\"\n",
    "    <template is='dom-bind'>\n",
    "        <urth-core-function id='f3f' ref='aFooFunction' result='{{r}}'></urth-core-function>\n",
    "        <button onClick='f3f.invoke()'>invoke</button>    \n",
    "        <span>{{r}}</span>\n",
    "    </template>\n",
    "\")"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "R",
   "language": "R",
   "name": "ir"
  },
  "language_info": {
   "codemirror_mode": "r",
   "file_extension": ".r",
   "mimetype": "text/x-r-source",
   "name": "R",
   "pygments_lexer": "r",
   "version": "3.3.1"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}