posts/mimic-the-ipython-notebook-cell-execution.ipynb

{
 "metadata": {
  "name": ""
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Yesterday, I was visiting the [Jake VanderPlas](http://www.astro.washington.edu/users/vanderplas/)'s Scientific Python Course [site](http://www.astro.washington.edu/users/vanderplas/Astr599/schedule) because of some issues raised at the ipython-dev mailing list (and obviously, because Jake usually do amazing things).\n",
      "\n",
      "To build his site, Jake wrote an **Hyde** plugin to render *ipynb* files to static html files using the `IPython.convert` platform. You can see an example of the final rendered document [here](http://www.astro.washington.edu/users/vanderplas/Astr599/notebooks/01_basic_training). \n",
      "\n",
      "When I saw the final document, I wondered if we could have hidden output cells which automatically get visible after a click over the input cell... and then, I made some experiments using the power of the `IPython.nbconvert` library ;-)\n",
      "<!-- TEASER_END -->\n",
      "\n",
      "**NOTE: From here, to see the output of each cell, please click on the input area and surprise yourself!**\n",
      "\n",
      "First, we needed to rewrite some things at the **Jinja** template level:"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "!sed -n 1,7p /media/datos/Ejemplos/toggle.tpl"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "output_type": "stream",
       "stream": "stdout",
       "text": [
        "{%- extends 'html_full.tpl' -%}\r\n",
        "\r\n",
        "{% block output_group %}\r\n",
        "<div class=\"output_hidden\">\r\n",
        "{{ super() }}\r\n",
        "</div>\r\n",
        "{% endblock output_group %}\r\n"
       ]
      }
     ],
     "prompt_number": 1
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "We had to *rewrite* the `output_group` block to encompass it with a new `output_hidden`-classed `div`, which we would use in a simple **Javascript** function later.\n",
      "\n",
      "Second, we needed to write that little **Javascript** snippet:"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "!sed -n 25,29p /media/datos/Ejemplos/toggle.tpl"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "output_type": "stream",
       "stream": "stdout",
       "text": [
        "$(document).ready(function(){\r\n",
        "  $(\".input\").click(function(){\r\n",
        "      $(this).next('.output_hidden').slideToggle();\r\n",
        "  });\r\n",
        "})\r\n"
       ]
      }
     ],
     "prompt_number": 2
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Here, we used the `.slideToggle()` method to display or hide the `output_hidden`-classed `div` elements (with a nice sliding motion) when the user makes a click on the input cells. We was using **jQuery**, so we needed to load **jQquery**, ie. using the following line:\n",
      "\n",
      "`<script src=\"//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js\"></script>`\n",
      "\n",
      "Finally, we added some css to make the `output_hidden-classed div` not visible (hidden by default):"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "!sed -n 18,21p /media/datos/Ejemplos/toggle.tpl"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "output_type": "stream",
       "stream": "stdout",
       "text": [
        ".output_hidden {\r\n",
        "  display: none;\r\n",
        "  margin-top: 5px;\r\n",
        "}\r\n"
       ]
      }
     ],
     "prompt_number": 3
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "If you put all these snippets together, you will get the following template:"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "!cat -n /media/datos/Ejemplos/toggle.tpl"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "output_type": "stream",
       "stream": "stdout",
       "text": [
        "     1\t{%- extends 'html_full.tpl' -%}\r\n",
        "     2\t\r\n",
        "     3\t{% block output_group %}\r\n",
        "     4\t<div class=\"output_hidden\">\r\n",
        "     5\t{{ super() }}\r\n",
        "     6\t</div>\r\n",
        "     7\t{% endblock output_group %}\r\n",
        "     8\t\r\n",
        "     9\t{%- block header -%}\r\n",
        "    10\t{{ super() }}\r\n",
        "    11\t\r\n",
        "    12\t<script src=\"//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js\"></script>\r\n",
        "    13\t\r\n",
        "    14\t<style type=\"text/css\">\r\n",
        "    15\tdiv.output_wrapper {\r\n",
        "    16\t  margin-top: 0px;\r\n",
        "    17\t}\r\n",
        "    18\t.output_hidden {\r\n",
        "    19\t  display: none;\r\n",
        "    20\t  margin-top: 5px;\r\n",
        "    21\t}\r\n",
        "    22\t</style>\r\n",
        "    23\t\r\n",
        "    24\t<script>\r\n",
        "    25\t$(document).ready(function(){\r\n",
        "    26\t  $(\".input\").click(function(){\r\n",
        "    27\t      $(this).next('.output_hidden').slideToggle();\r\n",
        "    28\t  });\r\n",
        "    29\t})\r\n",
        "    30\t</script>\r\n",
        "    31\t{%- endblock header -%}\r\n",
        "    32\t\r\n"
       ]
      }
     ],
     "prompt_number": 4
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "To use it, just add `--template toggle` to your `ipython nbconvert` call, ie:\n",
      "\n",
      "`ipython nbconvert your_notebook.ipynb --to html --template toggle --post serve`\n",
      "\n",
      "or add the `toggle.tpl` file to you **IPython** nbconvert config file.\n",
      "\n",
      "If you are reading this line, you probably have already experienced the demo in this post (btw, I like to do demos explaining the tools with the tools themselves).\n",
      "\n",
      "Obviously, I quickly implemented this functionality inside **Nikola** and, as a consequence, in **Nikola** master, you now have the possibility to pass an **IPython** config `dict` to your **Nikola** `conf.py` file, making the *ipynb* plugin for **Nikola** more powerful than before ;-)\n",
      "\n",
      "To conclude, the possibility to mimic the **IPython** notebook execution is very useful for introductory courses and to publish content in a shorter but more interactive way.\n",
      "\n",
      "Hope you enjoy it!\n",
      "\n",
      "Dami\u00e1n"
     ]
    }
   ],
   "metadata": {}
  }
 ]
}