s/LabelView/HTMLView

IPython/html/static/notebook/js/widgets/string.js

@@ -1,167 +1,167 b''
 //----------------------------------------------------------------------------
 //  Copyright (C) 2013 The IPython Development Team
 //
 //  Distributed under the terms of the BSD License.  The full license is in
 //  the file COPYING, distributed as part of this software.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // StringWidget
 //============================================================================
 
 /**
  * @module IPython
  * @namespace IPython
  **/
 
 define(["notebook/js/widget"], function(widget_manager){
     var StringWidgetModel = IPython.WidgetModel.extend({});
     widget_manager.register_widget_model('StringWidgetModel', StringWidgetModel);
 
-    var LabelView = IPython.WidgetView.extend({
+    var HTMLView = IPython.WidgetView.extend({
       
         // Called when view is rendered.
         render : function(){
             this.update(); // Set defaults.
         },
         
         // Handles: Backend -> Frontend Sync
         //          Frontent -> Frontend Sync
         update : function(){
             this.$el.html(this.model.get('value'));
             return IPython.WidgetView.prototype.update.call(this);
         },
         
     });
 
-    widget_manager.register_widget_view('LabelView', LabelView);
+    widget_manager.register_widget_view('HTMLView', HTMLView);
 
     var TextAreaView = IPython.WidgetView.extend({
       
         // Called when view is rendered.
         render: function(){
             this.$el
                 .addClass('widget-hbox')
                 .html('');
             this.$label = $('<div />')
                 .appendTo(this.$el)
                 .addClass('widget-hlabel')
                 .hide();
             this.$textbox = $('<textarea />')
                 .attr('rows', 5)
                 .addClass('widget-text')
                 .appendTo(this.$el);
             this.$el_to_style = this.$textbox; // Set default element to style
             this.update(); // Set defaults.
 
             this.model.on_msg($.proxy(this._handle_textarea_msg, this));
         },
 
 
         _handle_textarea_msg: function (content){
             if (content.method == "scroll_to_bottom") {
                 this.scroll_to_bottom();                
             }
         },
 
 
         scroll_to_bottom: function (){
             this.$textbox.scrollTop(this.$textbox[0].scrollHeight);
         },
 
         
         // Handles: Backend -> Frontend Sync
         //          Frontent -> Frontend Sync
         update: function(){
             if (!this.user_invoked_update) {
                 this.$textbox.val(this.model.get('value'));
             }
 
             var disabled = this.model.get('disabled');
             this.$textbox.prop('disabled', disabled);
 
             var description = this.model.get('description');
             if (description.length == 0) {
                 this.$label.hide();
             } else {
                 this.$label.html(description);
                 this.$label.show();
             }
             return IPython.WidgetView.prototype.update.call(this);
         },
         
         events: {"keyup textarea": "handleChanging",
                 "paste textarea": "handleChanging",
                 "cut textarea": "handleChanging"},
         
         // Handles and validates user input.
         handleChanging: function(e) { 
             this.user_invoked_update = true;
             this.model.set('value', e.target.value);
             this.model.update_other_views(this);
             this.user_invoked_update = false;
         },
     });
 
     widget_manager.register_widget_view('TextAreaView', TextAreaView);
 
     var TextBoxView = IPython.WidgetView.extend({
       
         // Called when view is rendered.
         render: function(){
             this.$el
                 .addClass('widget-hbox-single')
                 .html('');
             this.$label = $('<div />')
                 .addClass('widget-hlabel')
                 .appendTo(this.$el)
                 .hide();
             this.$textbox = $('<input type="text" />')
                 .addClass('input')
                 .addClass('widget-text')
                 .appendTo(this.$el);
             this.$el_to_style = this.$textbox; // Set default element to style
             this.update(); // Set defaults.
         },
         
         // Handles: Backend -> Frontend Sync
         //          Frontent -> Frontend Sync
         update: function(){
             if (this.$textbox.val() != this.model.get('value')) {
                 this.$textbox.val(this.model.get('value'));
             }
 
             var disabled = this.model.get('disabled');
             this.$textbox.prop('disabled', disabled);
 
             var description = this.model.get('description');
             if (description.length == 0) {
                 this.$label.hide();
             } else {
                 this.$label.html(description);
                 this.$label.show();
             }
             return IPython.WidgetView.prototype.update.call(this);
         },
         
         events: {"keyup input": "handleChanging",
                 "paste input": "handleChanging",
                 "cut input": "handleChanging",
                 "keypress input": "handleKeypress"},
         
         // Handles and validates user input.
         handleChanging: function(e) { 
             this.model.set('value', e.target.value);
             this.model.update_other_views(this);
         },
         
         // Handles text submition
         handleKeypress: function(e) { 
             if (e.keyCode == 13) { // Return key
                 this.send({event: 'submit'});
             }
         },
     });
 
     widget_manager.register_widget_view('TextBoxView', TextBoxView);
 });

examples/widgets/D3.ipynb

@@ -1,1358 +1,1358 b''
 {
  "metadata": {
   "name": ""
  },
  "nbformat": 3,
  "nbformat_minor": 0,
  "worksheets": [
   {
    "cells": [
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "from __future__ import print_function # py 2.7 compat\n",
       "\n",
       "import networkx as nx"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 1
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "This notebook demonstrates how NetworkX and D3 can be married using custom widget code."
      ]
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Hooking NetworkX Graphs"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "NetworkX graphs do not have events that can be listened to.  In order to watch the NetworkX graph object for changes a custom eventful graph object must be created.  The custom eventful graph object will inherit from the base graph object and use special eventful dictionaries instead of standard Python dict instances.  Because NetworkX nests dictionaries inside dictionaries, it's important that the eventful dictionary is capable of recognizing when a dictionary value is set to another dictionary instance.  When this happens, the eventful dictionary needs to also make the new dictionary an eventful dictionary.  This allows the eventful dictionary to listen to changes made to dictionaries within dictionaries."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "class EventfulDict(dict):\n",
       "    \n",
       "    def __init__(self, *args, **kwargs):\n",
       "        self._add_callbacks = []\n",
       "        self._del_callbacks = []\n",
       "        self._set_callbacks = []\n",
       "        dict.__init__(self, *args, **kwargs)\n",
       "        \n",
       "    def on_add(self, callback, remove=False):\n",
       "        self._register_callback(self._add_callbacks, callback, remove)\n",
       "    def on_del(self, callback, remove=False):\n",
       "        self._register_callback(self._del_callbacks, callback, remove)\n",
       "    def on_set(self, callback, remove=False):\n",
       "        self._register_callback(self._set_callbacks, callback, remove)\n",
       "    def _register_callback(self, callback_list, callback, remove=False):\n",
       "        if callable(callback):\n",
       "            if remove and callback in callback_list:\n",
       "                callback_list.remove(callback)\n",
       "            elif not remove and not callback in callback_list:\n",
       "                callback_list.append(callback)\n",
       "        else:\n",
       "            raise Exception('Callback must be callable.')\n",
       "\n",
       "    def _handle_add(self, key, value):\n",
       "        self._try_callbacks(self._add_callbacks, key, value)\n",
       "    def _handle_del(self, key):\n",
       "        self._try_callbacks(self._del_callbacks, key)\n",
       "    def _handle_set(self, key, value):\n",
       "        self._try_callbacks(self._set_callbacks, key, value)\n",
       "    def _try_callbacks(self, callback_list, *pargs, **kwargs):\n",
       "        for callback in callback_list:\n",
       "            callback(*pargs, **kwargs)\n",
       "    \n",
       "    def __setitem__(self, key, value):\n",
       "        return_val = None\n",
       "        exists = False\n",
       "        if key in self:\n",
       "            exists = True\n",
       "            \n",
       "        # If the user sets the property to a new dict, make the dict\n",
       "        # eventful and listen to the changes of it ONLY if it is not\n",
       "        # already eventful.  Any modification to this new dict will\n",
       "        # fire a set event of the parent dict.\n",
       "        if isinstance(value, dict) and not isinstance(value, EventfulDict):\n",
       "            new_dict = EventfulDict(value)\n",
       "            \n",
       "            def handle_change(*pargs, **kwargs):\n",
       "                self._try_callbacks(self._set_callbacks, key, dict.__getitem__(self, key))\n",
       "                \n",
       "            new_dict.on_add(handle_change)\n",
       "            new_dict.on_del(handle_change)\n",
       "            new_dict.on_set(handle_change)\n",
       "            return_val = dict.__setitem__(self, key, new_dict)\n",
       "        else:\n",
       "            return_val = dict.__setitem__(self, key, value)\n",
       "        \n",
       "        if exists:\n",
       "            self._handle_set(key, value)\n",
       "        else:\n",
       "            self._handle_add(key, value)\n",
       "        return return_val\n",
       "        \n",
       "\n",
       "    def __delitem__(self, key):\n",
       "        return_val = dict.__delitem__(self, key)\n",
       "        self._handle_del(key)\n",
       "        return return_val\n",
       "\n",
       "    \n",
       "    def pop(self, key):\n",
       "        return_val = dict.pop(self, key)\n",
       "        if key in self:\n",
       "            self._handle_del(key)\n",
       "        return return_val\n",
       "\n",
       "    def popitem(self):\n",
       "        popped = dict.popitem(self)\n",
       "        if popped is not None and popped[0] is not None:\n",
       "            self._handle_del(popped[0])\n",
       "        return popped\n",
       "\n",
       "    def update(self, other_dict):\n",
       "        for (key, value) in other_dict.items():\n",
       "            self[key] = value\n",
       "            \n",
       "    def clear(self):\n",
       "        for key in list(self.keys()):\n",
       "            del self[key]"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 2
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Override the NetworkX Graph object to make an eventful graph."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "class EventfulGraph(nx.Graph):\n",
       "    \n",
       "    def __init__(self, *pargs, **kwargs):\n",
       "        \"\"\"Initialize a graph with edges, name, graph attributes.\"\"\"\n",
       "        super(EventfulGraph, self).__init__(*pargs, **kwargs)\n",
       "        \n",
       "        self.graph = EventfulDict(self.graph)\n",
       "        self.node = EventfulDict(self.node)\n",
       "        self.adj = EventfulDict(self.adj)\n",
       "        "
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 3
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "To make sure that the eventful graph works, create a new graph and log the dictionary events raised."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "def echo_dict_events(eventful_dict, prefix=''):\n",
       "    def key_add(key, value):\n",
       "        print(prefix + 'add (%s, %s)' % (key, str(value)))\n",
       "    def key_set(key, value):\n",
       "        print(prefix + 'set (%s, %s)' % (key, str(value)))\n",
       "    def key_del(key):\n",
       "        print(prefix + 'del %s' % key)\n",
       "    eventful_dict.on_add(key_add)\n",
       "    eventful_dict.on_set(key_set)\n",
       "    eventful_dict.on_del(key_del)\n",
       "    \n",
       "def echo_graph_events(eventful_graph):\n",
       "    for key in ['graph', 'node', 'adj']:\n",
       "        echo_dict_events(getattr(eventful_graph, key), prefix=key+' ')"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 4
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "G = EventfulGraph()\n",
       "echo_graph_events(G)\n",
       "\n",
       "G.add_node('hello')\n",
       "G.add_node('goodbye', fill=\"red\")\n",
       "G.add_edges_from([(1,2),(1,3), (1,'goodbye')], stroke=\"lime\")"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "output_type": "stream",
        "stream": "stdout",
        "text": [
         "adj add (hello, {})\n",
         "node add (hello, {})\n",
         "adj add (goodbye, {})\n",
         "node add (goodbye, {'fill': 'red'})\n",
         "adj add (1, {})\n",
         "node add (1, {})\n",
         "adj add (2, {})\n",
         "node add (2, {})\n",
         "adj set (1, {2: {'stroke': 'lime'}})\n",
         "adj set (2, {1: {'stroke': 'lime'}})\n",
         "adj add (3, {})\n",
         "node add (3, {})\n",
         "adj set (1, {2: {'stroke': 'lime'}, 3: {'stroke': 'lime'}})\n",
         "adj set (3, {1: {'stroke': 'lime'}})\n",
         "adj set (1, {2: {'stroke': 'lime'}, 3: {'stroke': 'lime'}, 'goodbye': {'stroke': 'lime'}})\n",
         "adj set (goodbye, {1: {'stroke': 'lime'}})\n"
        ]
       }
      ],
      "prompt_number": 5
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "G.adj"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "metadata": {},
        "output_type": "pyout",
        "prompt_number": 6,
        "text": [
         "{1: {2: {'stroke': 'lime'},\n",
         "  3: {'stroke': 'lime'},\n",
         "  'goodbye': {'stroke': 'lime'}},\n",
         " 2: {1: {'stroke': 'lime'}},\n",
         " 3: {1: {'stroke': 'lime'}},\n",
         " 'goodbye': {1: {'stroke': 'lime'}},\n",
         " 'hello': {}}"
        ]
       }
      ],
      "prompt_number": 6
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "G.node"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "metadata": {},
        "output_type": "pyout",
        "prompt_number": 7,
        "text": [
         "{1: {}, 2: {}, 3: {}, 'goodbye': {'fill': 'red'}, 'hello': {}}"
        ]
       }
      ],
      "prompt_number": 7
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "D3 Widget"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The D3 widget will blindly port all of the dictionary events over custom widget messages."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "from IPython.html import widgets # Widget definitions\n",
       "from IPython.display import display # Used to display widgets in the notebook"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 8
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "# Import the base Widget class and the traitlets Unicode class.\n",
       "from IPython.html.widgets import Widget\n",
       "from IPython.utils.traitlets import Unicode, Int\n",
       "\n",
       "# Define our ForceDirectedGraphWidget and its target model and default view.\n",
       "class ForceDirectedGraphWidget(Widget):\n",
       "    target_name = Unicode('ForceDirectedGraphModel')\n",
       "    default_view_name = Unicode('D3ForceDirectedGraphView')\n",
       "    \n",
       "    _keys = ['width', 'height']\n",
       "    width = Int(400)\n",
       "    height = Int(300)\n",
       "    \n",
       "    def __init__(self, eventful_graph, *pargs, **kwargs):\n",
       "        Widget.__init__(self, *pargs, **kwargs)\n",
       "        \n",
       "        self._eventful_graph = eventful_graph\n",
       "        self._send_dict_changes(eventful_graph.graph, 'graph')\n",
       "        self._send_dict_changes(eventful_graph.node, 'node')\n",
       "        self._send_dict_changes(eventful_graph.adj, 'adj')\n",
       "        \n",
       "        \n",
       "    def _repr_widget_(self, *pargs, **kwargs):\n",
       "        \n",
       "        # Show the widget, then send the current state\n",
       "        Widget._repr_widget_(self, *pargs, **kwargs)\n",
       "        for (key, value) in self._eventful_graph.graph.items():\n",
       "            self.send({'dict': 'graph', 'action': 'add', 'key': key, 'value': value})\n",
       "        for (key, value) in self._eventful_graph.node.items():\n",
       "            self.send({'dict': 'node', 'action': 'add', 'key': key, 'value': value})\n",
       "        for (key, value) in self._eventful_graph.adj.items():\n",
       "            self.send({'dict': 'adj', 'action': 'add', 'key': key, 'value': value})\n",
       "        \n",
       "        \n",
       "    def _send_dict_changes(self, eventful_dict, dict_name):\n",
       "        def key_add(key, value):\n",
       "            self.send({'dict': dict_name, 'action': 'add', 'key': key, 'value': value})\n",
       "        def key_set(key, value):\n",
       "            self.send({'dict': dict_name, 'action': 'set', 'key': key, 'value': value})\n",
       "        def key_del(key):\n",
       "            self.send({'dict': dict_name, 'action': 'del', 'key': key})\n",
       "        eventful_dict.on_add(key_add)\n",
       "        eventful_dict.on_set(key_set)\n",
       "        eventful_dict.on_del(key_del)\n",
       "            "
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 9
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The front-end listens to the dictionary events and keeps the D3 control in sync with the dictionary in the back-end."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "%%javascript\n",
       "\n",
       "require([\"http://d3js.org/d3.v3.min.js\", \"notebook/js/widget\"], function(){\n",
       "    \n",
       "    // Define the ForceDirectedGraphModel and register it with the widget manager.\n",
       "    var ForceDirectedGraphModel = IPython.WidgetModel.extend({});\n",
       "    IPython.widget_manager.register_widget_model('ForceDirectedGraphModel', ForceDirectedGraphModel);\n",
       "    \n",
       "    // Define the D3ForceDirectedGraphView\n",
       "    var D3ForceDirectedGraphView = IPython.WidgetView.extend({\n",
       "        \n",
       "        render: function(){\n",
       "            this.guid = 'd3force' + IPython.utils.uuid();\n",
       "            this.setElement($('<div />', {id: this.guid}));\n",
       "            this.model.on_msg($.proxy(this.handle_msg, this));\n",
       "            this.has_drawn = false;\n",
       "        },\n",
       "        \n",
       "        try_add_node: function(id){\n",
       "            var index = this.find_node(id);\n",
       "            if (index == -1) {\n",
       "                var node = {id: id};\n",
       "                this.nodes.push(node);\n",
       "                return node;\n",
       "            } else {\n",
       "                return this.nodes[index];\n",
       "            }\n",
       "        },\n",
       "        \n",
       "        update_node: function(node, attributes) {\n",
       "            if (node !== null) {\n",
       "                for (var key in attributes) {\n",
       "                    node[key] = attributes[key];\n",
       "                }\n",
       "                this._update_node(d3.select('#' + this.guid + node.id));\n",
       "            }\n",
       "        },\n",
       "                \n",
       "        remove_node: function(id){\n",
       "            this.remove_links_to(id);\n",
       "            \n",
       "            var found_index = this.find_node(id);\n",
       "            if (found_index>=0) {\n",
       "                this.nodes.splice(found_index, 1);\n",
       "            }\n",
       "        },\n",
       "        \n",
       "        find_node: function(id){\n",
       "            var found_index = -1;\n",
       "            for (var index in this.nodes) {\n",
       "                if (this.nodes[index].id == id) {\n",
       "                    found_index = index;\n",
       "                    break;\n",
       "                }\n",
       "            }\n",
       "            return found_index;\n",
       "        },\n",
       "        \n",
       "        find_link: function(source_id, target_id){\n",
       "            for (var index in this.links) {\n",
       "                if (this.links[index].source.id == source_id && this.links[index].target.id == target_id) {\n",
       "                    return index;\n",
       "                }\n",
       "            }\n",
       "            return -1;\n",
       "        },\n",
       "        \n",
       "        try_add_link: function(source_id, target_id){\n",
       "            var index = this.find_link(source_id, target_id);\n",
       "            if (index == -1) {\n",
       "                var source_node = this.try_add_node(source_id);\n",
       "                var target_node = this.try_add_node(target_id);\n",
       "                var new_link = {source: source_node, target: target_node};\n",
       "                this.links.push(new_link);\n",
       "                return new_link;\n",
       "            } else {\n",
       "                return this.links[index]\n",
       "            }\n",
       "        },\n",
       "        \n",
       "        update_link: function(link, attributes){\n",
       "            if (link != null) {\n",
       "                for (var key in attributes) {\n",
       "                    link[key] = attributes[key];\n",
       "                }\n",
       "                this._update_edge(d3.select('#' + this.guid + link.source.id + \"-\" + link.target.id));\n",
       "            }\n",
       "        },\n",
       "        \n",
       "        remove_links: function(source_id){\n",
       "            var found_indicies = [];\n",
       "            for (var index in this.links) {\n",
       "                if (this.links[index].source.id == source_id) {\n",
       "                    found_indicies.push(index);\n",
       "                }\n",
       "            }\n",
       "            found_indicies.reverse();\n",
       "            \n",
       "            for (var index in found_indicies) {\n",
       "                this.links.splice(index, 1);\n",
       "            };\n",
       "        },\n",
       "        \n",
       "        remove_links_to: function(id){\n",
       "            var found_indicies = [];\n",
       "            for (var index in this.links) {\n",
       "                if (this.links[index].source.id == id || this.links[index].target.id == id) {\n",
       "                    found_indicies.push(index);\n",
       "                }\n",
       "            }\n",
       "            found_indicies.reverse();\n",
       "            \n",
       "            for (var index in found_indicies) {\n",
       "                this.links.splice(index, 1);\n",
       "            };\n",
       "        },\n",
       "        \n",
       "        handle_msg: function(content){\n",
       "            var dict = content.dict;\n",
       "            var action = content.action;\n",
       "            var key = content.key;\n",
       "            \n",
       "            if (dict=='node') {\n",
       "                if (action=='add' || action=='set') {\n",
       "                    this.update_node(this.try_add_node(key), content.value)\n",
       "                } else if (action=='del') {\n",
       "                    this.remove_node(key);\n",
       "                }\n",
       "                \n",
       "            } else if (dict=='adj') {\n",
       "                if (action=='add' || action=='set') {\n",
       "                    var links = content.value;\n",
       "                    for (var target_id in links) {\n",
       "                        this.update_link(this.try_add_link(key, target_id), links[target_id]);\n",
       "                    }\n",
       "                } else if (action=='del') {\n",
       "                    this.remove_links(key);\n",
       "                }\n",
       "            }\n",
       "            this.start();\n",
       "        },\n",
       "        \n",
       "        start: function() {\n",
       "            var node = this.svg.selectAll(\".node\"),\n",
       "                link = this.svg.selectAll(\".link\");\n",
       "            \n",
       "            var link = link.data(this.force.links(), function(d) { return d.source.id + \"-\" + d.target.id; });\n",
       "            this._update_edge(link.enter().insert(\"line\", \".node\"))\n",
       "            link.exit().remove();\n",
       "            \n",
       "            var node = node.data(this.force.nodes(), function(d) { return d.id;});\n",
       "            var that = this;\n",
       "            this._update_node(node.enter().append(\"circle\"));\n",
       "            node.exit().remove();\n",
       "            \n",
       "            this.force.start();\n",
       "        },\n",
       "        \n",
       "        _update_node: function(node) {\n",
       "            var that = this;\n",
       "            node\n",
       "                .attr(\"id\", function(d) { return that.guid + d.id; })\n",
       "                .attr(\"class\", function(d) { return \"node \" + d.id; })\n",
       "                .attr(\"r\", function(d) {\n",
       "                    if (d.r == undefined) {\n",
       "                        return 8; \n",
       "                    } else {\n",
       "                        return d.r;\n",
       "                    }\n",
       "                    \n",
       "                })\n",
       "                .style(\"fill\", function(d) {\n",
       "                    if (d.fill == undefined) {\n",
       "                        return that.color(d.group); \n",
       "                    } else {\n",
       "                        return d.fill;\n",
       "                    }\n",
       "                    \n",
       "                })\n",
       "                .style(\"stroke\", function(d) {\n",
       "                    if (d.stroke == undefined) {\n",
       "                        return \"#FFF\"; \n",
       "                    } else {\n",
       "                        return d.stroke;\n",
       "                    }\n",
       "                    \n",
       "                })\n",
       "                .style(\"stroke-width\", function(d) {\n",
       "                    if (d.strokewidth == undefined) {\n",
       "                        return \"#FFF\"; \n",
       "                    } else {\n",
       "                        return d.strokewidth;\n",
       "                    }\n",
       "                    \n",
       "                })\n",
       "                .call(this.force.drag);\n",
       "        },\n",
       "        \n",
       "        _update_edge: function(edge) {\n",
       "            var that = this;\n",
       "            edge\n",
       "                .attr(\"id\", function(d) { return that.guid + d.source.id + \"-\" + d.target.id; })\n",
       "                .attr(\"class\", \"link\")\n",
       "                .style(\"stroke-width\", function(d) {\n",
       "                    if (d.strokewidth == undefined) {\n",
       "                        return \"1.5px\"; \n",
       "                    } else {\n",
       "                        return d.strokewidth;\n",
       "                    }\n",
       "                    \n",
       "                })\n",
       "                .style('stroke', function(d) {\n",
       "                    if (d.stroke == undefined) {\n",
       "                        return \"#999\"; \n",
       "                    } else {\n",
       "                        return d.stroke;\n",
       "                    }\n",
       "                    \n",
       "                });\n",
       "        },\n",
       "        \n",
       "        tick: function() {\n",
       "            var node = this.svg.selectAll(\".node\"),\n",
       "                link = this.svg.selectAll(\".link\");\n",
       "            \n",
       "            link.attr(\"x1\", function(d) { return d.source.x; })\n",
       "                .attr(\"y1\", function(d) { return d.source.y; })\n",
       "                .attr(\"x2\", function(d) { return d.target.x; })\n",
       "                .attr(\"y2\", function(d) { return d.target.y; });\n",
       "        \n",
       "            node.attr(\"cx\", function(d) { return d.x; })\n",
       "                .attr(\"cy\", function(d) { return d.y; });\n",
       "        },\n",
       "        \n",
       "        update: function(){\n",
       "            if (!this.has_drawn) {\n",
       "                this.has_drawn = true;\n",
       "                \n",
       "                var width = this.model.get('width'),\n",
       "                    height = this.model.get('height');\n",
       "                \n",
       "                this.color = d3.scale.category20();\n",
       "                \n",
       "                this.nodes = [];\n",
       "                this.links = [];\n",
       "                \n",
       "                this.force = d3.layout.force()\n",
       "                    .nodes(this.nodes)\n",
       "                    .links(this.links)\n",
       "                    .charge(function (d) {\n",
       "                        if (d.charge === undefined) {\n",
       "                            return -120;\n",
       "                        } else {\n",
       "                            return d.charge;\n",
       "                        }\n",
       "                    })\n",
       "                    .linkDistance(function (d) {\n",
       "                        if (d.distance === undefined) {\n",
       "                            return 40;\n",
       "                        } else {\n",
       "                            return d.distance;\n",
       "                        }\n",
       "                    })\n",
       "                    .linkStrength(function (d) {\n",
       "                        if (d.strength === undefined) {\n",
       "                            return 1.0;\n",
       "                        } else {\n",
       "                            return d.strength;\n",
       "                        }\n",
       "                    })\n",
       "                    .size([width, height])\n",
       "                    .on(\"tick\", $.proxy(this.tick, this));\n",
       "                \n",
       "                this.svg = d3.select(\"#\" + this.guid).append(\"svg\")\n",
       "                    .attr(\"width\", width)\n",
       "                    .attr(\"height\", height);\n",
       "                \n",
       "                var that = this;\n",
       "                setTimeout(function() {\n",
       "                    that.start();\n",
       "                }, 0);\n",
       "            }\n",
       "            \n",
       "            return IPython.WidgetView.prototype.update.call(this);\n",
       "        },\n",
       "        \n",
       "    });\n",
       "        \n",
       "    // Register the D3ForceDirectedGraphView with the widget manager.\n",
       "    IPython.widget_manager.register_widget_view('D3ForceDirectedGraphView', D3ForceDirectedGraphView);\n",
       "});"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "javascript": [
         "\n",
         "require([\"http://d3js.org/d3.v3.min.js\", \"notebook/js/widget\"], function(){\n",
         "    \n",
         "    // Define the ForceDirectedGraphModel and register it with the widget manager.\n",
         "    var ForceDirectedGraphModel = IPython.WidgetModel.extend({});\n",
         "    IPython.widget_manager.register_widget_model('ForceDirectedGraphModel', ForceDirectedGraphModel);\n",
         "    \n",
         "    // Define the D3ForceDirectedGraphView\n",
         "    var D3ForceDirectedGraphView = IPython.WidgetView.extend({\n",
         "        \n",
         "        render: function(){\n",
         "            this.guid = 'd3force' + IPython.utils.uuid();\n",
         "            this.setElement($('<div />', {id: this.guid}));\n",
         "            this.model.on_msg($.proxy(this.handle_msg, this));\n",
         "            this.has_drawn = false;\n",
         "        },\n",
         "        \n",
         "        try_add_node: function(id){\n",
         "            var index = this.find_node(id);\n",
         "            if (index == -1) {\n",
         "                var node = {id: id};\n",
         "                this.nodes.push(node);\n",
         "                return node;\n",
         "            } else {\n",
         "                return this.nodes[index];\n",
         "            }\n",
         "        },\n",
         "        \n",
         "        update_node: function(node, attributes) {\n",
         "            if (node !== null) {\n",
         "                for (var key in attributes) {\n",
         "                    node[key] = attributes[key];\n",
         "                }\n",
         "                this._update_node(d3.select('#' + this.guid + node.id));\n",
         "            }\n",
         "        },\n",
         "                \n",
         "        remove_node: function(id){\n",
         "            this.remove_links_to(id);\n",
         "            \n",
         "            var found_index = this.find_node(id);\n",
         "            if (found_index>=0) {\n",
         "                this.nodes.splice(found_index, 1);\n",
         "            }\n",
         "        },\n",
         "        \n",
         "        find_node: function(id){\n",
         "            var found_index = -1;\n",
         "            for (var index in this.nodes) {\n",
         "                if (this.nodes[index].id == id) {\n",
         "                    found_index = index;\n",
         "                    break;\n",
         "                }\n",
         "            }\n",
         "            return found_index;\n",
         "        },\n",
         "        \n",
         "        find_link: function(source_id, target_id){\n",
         "            for (var index in this.links) {\n",
         "                if (this.links[index].source.id == source_id && this.links[index].target.id == target_id) {\n",
         "                    return index;\n",
         "                }\n",
         "            }\n",
         "            return -1;\n",
         "        },\n",
         "        \n",
         "        try_add_link: function(source_id, target_id){\n",
         "            var index = this.find_link(source_id, target_id);\n",
         "            if (index == -1) {\n",
         "                var source_node = this.try_add_node(source_id);\n",
         "                var target_node = this.try_add_node(target_id);\n",
         "                var new_link = {source: source_node, target: target_node};\n",
         "                this.links.push(new_link);\n",
         "                return new_link;\n",
         "            } else {\n",
         "                return this.links[index]\n",
         "            }\n",
         "        },\n",
         "        \n",
         "        update_link: function(link, attributes){\n",
         "            if (link != null) {\n",
         "                for (var key in attributes) {\n",
         "                    link[key] = attributes[key];\n",
         "                }\n",
         "                this._update_edge(d3.select('#' + this.guid + link.source.id + \"-\" + link.target.id));\n",
         "            }\n",
         "        },\n",
         "        \n",
         "        remove_links: function(source_id){\n",
         "            var found_indicies = [];\n",
         "            for (var index in this.links) {\n",
         "                if (this.links[index].source.id == source_id) {\n",
         "                    found_indicies.push(index);\n",
         "                }\n",
         "            }\n",
         "            found_indicies.reverse();\n",
         "            \n",
         "            for (var index in found_indicies) {\n",
         "                this.links.splice(index, 1);\n",
         "            };\n",
         "        },\n",
         "        \n",
         "        remove_links_to: function(id){\n",
         "            var found_indicies = [];\n",
         "            for (var index in this.links) {\n",
         "                if (this.links[index].source.id == id || this.links[index].target.id == id) {\n",
         "                    found_indicies.push(index);\n",
         "                }\n",
         "            }\n",
         "            found_indicies.reverse();\n",
         "            \n",
         "            for (var index in found_indicies) {\n",
         "                this.links.splice(index, 1);\n",
         "            };\n",
         "        },\n",
         "        \n",
         "        handle_msg: function(content){\n",
         "            var dict = content.dict;\n",
         "            var action = content.action;\n",
         "            var key = content.key;\n",
         "            \n",
         "            if (dict=='node') {\n",
         "                if (action=='add' || action=='set') {\n",
         "                    this.update_node(this.try_add_node(key), content.value)\n",
         "                } else if (action=='del') {\n",
         "                    this.remove_node(key);\n",
         "                }\n",
         "                \n",
         "            } else if (dict=='adj') {\n",
         "                if (action=='add' || action=='set') {\n",
         "                    var links = content.value;\n",
         "                    for (var target_id in links) {\n",
         "                        this.update_link(this.try_add_link(key, target_id), links[target_id]);\n",
         "                    }\n",
         "                } else if (action=='del') {\n",
         "                    this.remove_links(key);\n",
         "                }\n",
         "            }\n",
         "            this.start();\n",
         "        },\n",
         "        \n",
         "        start: function() {\n",
         "            var node = this.svg.selectAll(\".node\"),\n",
         "                link = this.svg.selectAll(\".link\");\n",
         "            \n",
         "            var link = link.data(this.force.links(), function(d) { return d.source.id + \"-\" + d.target.id; });\n",
         "            this._update_edge(link.enter().insert(\"line\", \".node\"))\n",
         "            link.exit().remove();\n",
         "            \n",
         "            var node = node.data(this.force.nodes(), function(d) { return d.id;});\n",
         "            var that = this;\n",
         "            this._update_node(node.enter().append(\"circle\"));\n",
         "            node.exit().remove();\n",
         "            \n",
         "            this.force.start();\n",
         "        },\n",
         "        \n",
         "        _update_node: function(node) {\n",
         "            var that = this;\n",
         "            node\n",
         "                .attr(\"id\", function(d) { return that.guid + d.id; })\n",
         "                .attr(\"class\", function(d) { return \"node \" + d.id; })\n",
         "                .attr(\"r\", function(d) {\n",
         "                    if (d.r == undefined) {\n",
         "                        return 8; \n",
         "                    } else {\n",
         "                        return d.r;\n",
         "                    }\n",
         "                    \n",
         "                })\n",
         "                .style(\"fill\", function(d) {\n",
         "                    if (d.fill == undefined) {\n",
         "                        return that.color(d.group); \n",
         "                    } else {\n",
         "                        return d.fill;\n",
         "                    }\n",
         "                    \n",
         "                })\n",
         "                .style(\"stroke\", function(d) {\n",
         "                    if (d.stroke == undefined) {\n",
         "                        return \"#FFF\"; \n",
         "                    } else {\n",
         "                        return d.stroke;\n",
         "                    }\n",
         "                    \n",
         "                })\n",
         "                .style(\"stroke-width\", function(d) {\n",
         "                    if (d.strokewidth == undefined) {\n",
         "                        return \"#FFF\"; \n",
         "                    } else {\n",
         "                        return d.strokewidth;\n",
         "                    }\n",
         "                    \n",
         "                })\n",
         "                .call(this.force.drag);\n",
         "        },\n",
         "        \n",
         "        _update_edge: function(edge) {\n",
         "            var that = this;\n",
         "            edge\n",
         "                .attr(\"id\", function(d) { return that.guid + d.source.id + \"-\" + d.target.id; })\n",
         "                .attr(\"class\", \"link\")\n",
         "                .style(\"stroke-width\", function(d) {\n",
         "                    if (d.strokewidth == undefined) {\n",
         "                        return \"1.5px\"; \n",
         "                    } else {\n",
         "                        return d.strokewidth;\n",
         "                    }\n",
         "                    \n",
         "                })\n",
         "                .style('stroke', function(d) {\n",
         "                    if (d.stroke == undefined) {\n",
         "                        return \"#999\"; \n",
         "                    } else {\n",
         "                        return d.stroke;\n",
         "                    }\n",
         "                    \n",
         "                });\n",
         "        },\n",
         "        \n",
         "        tick: function() {\n",
         "            var node = this.svg.selectAll(\".node\"),\n",
         "                link = this.svg.selectAll(\".link\");\n",
         "            \n",
         "            link.attr(\"x1\", function(d) { return d.source.x; })\n",
         "                .attr(\"y1\", function(d) { return d.source.y; })\n",
         "                .attr(\"x2\", function(d) { return d.target.x; })\n",
         "                .attr(\"y2\", function(d) { return d.target.y; });\n",
         "        \n",
         "            node.attr(\"cx\", function(d) { return d.x; })\n",
         "                .attr(\"cy\", function(d) { return d.y; });\n",
         "        },\n",
         "        \n",
         "        update: function(){\n",
         "            if (!this.has_drawn) {\n",
         "                this.has_drawn = true;\n",
         "                \n",
         "                var width = this.model.get('width'),\n",
         "                    height = this.model.get('height');\n",
         "                \n",
         "                this.color = d3.scale.category20();\n",
         "                \n",
         "                this.nodes = [];\n",
         "                this.links = [];\n",
         "                \n",
         "                this.force = d3.layout.force()\n",
         "                    .nodes(this.nodes)\n",
         "                    .links(this.links)\n",
         "                    .charge(function (d) {\n",
         "                        if (d.charge === undefined) {\n",
         "                            return -120;\n",
         "                        } else {\n",
         "                            return d.charge;\n",
         "                        }\n",
         "                    })\n",
         "                    .linkDistance(function (d) {\n",
         "                        if (d.distance === undefined) {\n",
         "                            return 40;\n",
         "                        } else {\n",
         "                            return d.distance;\n",
         "                        }\n",
         "                    })\n",
         "                    .linkStrength(function (d) {\n",
         "                        if (d.strength === undefined) {\n",
         "                            return 1.0;\n",
         "                        } else {\n",
         "                            return d.strength;\n",
         "                        }\n",
         "                    })\n",
         "                    .size([width, height])\n",
         "                    .on(\"tick\", $.proxy(this.tick, this));\n",
         "                \n",
         "                this.svg = d3.select(\"#\" + this.guid).append(\"svg\")\n",
         "                    .attr(\"width\", width)\n",
         "                    .attr(\"height\", height);\n",
         "                \n",
         "                var that = this;\n",
         "                setTimeout(function() {\n",
         "                    that.start();\n",
         "                }, 0);\n",
         "            }\n",
         "            \n",
         "            return IPython.WidgetView.prototype.update.call(this);\n",
         "        },\n",
         "        \n",
         "    });\n",
         "        \n",
         "    // Register the D3ForceDirectedGraphView with the widget manager.\n",
         "    IPython.widget_manager.register_widget_view('D3ForceDirectedGraphView', D3ForceDirectedGraphView);\n",
         "});"
        ],
        "metadata": {},
        "output_type": "display_data",
        "text": [
-        "<IPython.core.display.Javascript at 0x278b9d0>"
+        "<IPython.core.display.Javascript at 0x2281b10>"
        ]
       }
      ],
      "prompt_number": 10
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Test"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "floating_container = widgets.ContainerWidget(default_view_name='ModalView')\n",
       "floating_container.description = \"Dynamic D3 rendering of a NetworkX graph\"\n",
       "floating_container.button_text = \"Render Window\"\n",
       "floating_container.set_css({\n",
       "    'width': '420px',\n",
       "    'height': '350px'}, selector='modal')\n",
       "\n",
       "G = EventfulGraph()\n",
       "d3 = ForceDirectedGraphWidget(G, parent=floating_container)\n",
       "display(floating_container)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 11
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The following code creates an animation of some of the plot's properties."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "import time\n",
       "\n",
       "G.add_node(1, fill=\"red\", stroke=\"black\")\n",
       "time.sleep(1.0)\n",
       "\n",
       "G.add_node(2, fill=\"gold\", stroke=\"black\")\n",
       "time.sleep(1.0)\n",
       "\n",
       "G.add_node(3, fill=\"green\", stroke=\"black\")\n",
       "time.sleep(1.0)\n",
       "\n",
       "G.add_edges_from([(1,2),(1,3), (2,3)], stroke=\"#aaa\", strokewidth=\"1px\", distance=200, strength=0.5)\n",
       "time.sleep(1.0)\n",
       "\n",
       "G.adj[1][2]['distance'] = 20\n",
       "time.sleep(1.0)\n",
       "\n",
       "G.adj[1][3]['distance'] = 20\n",
       "time.sleep(1.0)\n",
       "\n",
       "G.adj[2][3]['distance'] = 20\n",
       "time.sleep(1.0)\n",
       "\n",
       "G.node[1]['r'] = 16\n",
       "time.sleep(0.3)\n",
       "G.node[1]['r'] = 8\n",
       "G.node[2]['r'] = 16\n",
       "time.sleep(0.3)\n",
       "G.node[2]['r'] = 8\n",
       "G.node[3]['r'] = 16\n",
       "time.sleep(0.3)\n",
       "G.node[3]['r'] = 8\n",
       "\n",
       "G.node[1]['fill'] = 'purple'\n",
       "time.sleep(0.3)\n",
       "G.node[1]['fill'] = 'red'\n",
       "G.node[2]['fill'] = 'purple'\n",
       "time.sleep(0.3)\n",
       "G.node[2]['fill'] = 'gold'\n",
       "G.node[3]['fill'] = 'purple'\n",
       "time.sleep(0.3)\n",
       "G.node[3]['fill'] = 'green'\n",
       "time.sleep(1.0)\n",
       "\n",
       "G.node.clear()\n",
       "time.sleep(1.0)\n",
       "\n",
       "floating_container.close()\n"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 12
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {},
      "source": [
       "Prime Factor Finder"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Find the prime numbers inside a large integer"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "def is_int(number):\n",
       "    return int(number) == number\n",
       "\n",
       "def factor_int(number):\n",
       "    return [i + 1 for i in range(number) if is_int(number / (float(i) + 1.0))]        "
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 13
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "import time\n",
       "BACKGROUND = '#F7EBD5'\n",
       "PARENT_COLOR = '#66635D'\n",
       "FACTOR_COLOR = '#6CC5C1'\n",
       "EDGE_COLOR = '#000000'\n",
       "PRIME_COLOR = '#E54140'\n",
       "\n",
       "existing_graphs = []\n",
       "\n",
       "def add_unique_node(graph, value, **kwargs):\n",
       "    index = len(graph.node)\n",
       "    graph.add_node(index, charge=-50, strokewidth=0, value=value, **kwargs)\n",
       "    return index\n",
       "\n",
       "def plot_primes(graph, number, parent, start_number, delay=0.0):\n",
       "    if delay > 0.0:\n",
       "        time.sleep(delay)\n",
       "        \n",
       "    factors = factor_int(number)\n",
       "    if len(factors) > 2:\n",
       "        for factor in factors:\n",
       "            if factor != number:\n",
       "                factor_size = max(float(factor) / start_number * 30.0,3.0)\n",
       "                parent_factor_size = max(float(number) / start_number * 30.0,3.0)\n",
       "                index = add_unique_node(graph, number, fill=FACTOR_COLOR, r='%.2fpx' % factor_size)\n",
       "                graph.add_edge(index, parent, distance=parent_factor_size+factor_size, stroke=EDGE_COLOR)\n",
       "                plot_primes(graph, factor, parent=index, start_number=start_number, delay=delay)\n",
       "    else:\n",
       "        # Prime, set parent color to prime color.\n",
       "        graph.node[parent]['fill'] = PRIME_COLOR\n",
       "\n",
       "def graph_primes(number, delay):\n",
       "    if len(existing_graphs) > 0:\n",
       "        for graph in existing_graphs:\n",
       "            graph.close()\n",
       "        del existing_graphs[:]\n",
       "        \n",
       "    floating_container = widgets.ContainerWidget(default_view_name='ModalView')\n",
       "    floating_container.description = \"Factors of %d\" % number\n",
       "    floating_container.button_text = str(number)\n",
       "    floating_container.set_css({\n",
       "        'width': '620px',\n",
       "        'height': '450px'}, selector='modal')\n",
       "        \n",
       "    graph = EventfulGraph()\n",
       "    d3 = ForceDirectedGraphWidget(graph, parent=floating_container)\n",
       "    floating_container.set_css('background', BACKGROUND)\n",
       "    d3.width = 600\n",
       "    d3.height = 400\n",
       "    display(floating_container)\n",
       "    existing_graphs.append(floating_container)\n",
       "    \n",
       "    index = add_unique_node(graph, number, fill=PARENT_COLOR, r='30px')\n",
       "    plot_primes(graph, number=number, parent=index, start_number=number, delay=delay)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 14
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "box = widgets.ContainerWidget()\n",
       "box.vbox()\n",
       "box.align_center()\n",
       "box.pack_center()\n",
       "header = widgets.StringWidget(parent=box, default_view_name=\"LabelView\",  value=\"<h1>Number Factorizer</h1><br>\")\n",
       "subbox = widgets.ContainerWidget(parent=box)\n",
       "subbox.hbox()\n",
       "subbox.align_center()\n",
       "subbox.pack_center()\n",
       "number = widgets.IntWidget(value=100, parent=subbox)\n",
       "button = widgets.ButtonWidget(description=\"Calculate\", parent=subbox)\n",
       "speed = widgets.FloatRangeWidget(parent=box, min=0.0, max=0.5, value=0.4, step=0.01)\n",
       "display(box)\n",
       "box.add_class('well well-small')\n",
       "\n",
       "def handle_caclulate():\n",
       "    graph_primes(number.value, 0.5-speed.value)\n",
       "button.on_click(handle_caclulate)\n"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 15
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {},
      "source": [
       "Twitter Tweet Watcher"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "This example requires the Python \"twitter\" library to be installed (https://github.com/sixohsix/twitter).  You can install Python  twitter by running `sudo pip install twitter` or `sudo easy_install twitter` from the commandline."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "from twitter import *\n",
       "import time, datetime\n",
       "import math\n",
       "\n",
       "twitter_timestamp_format = \"%a %b %d %X +0000 %Y\""
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 16
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "# Sign on to twitter.\n",
       "auth = OAuth(\n",
       "    consumer_key='iQvYfTfuD86fgVWGjPY0UA',\n",
       "    consumer_secret='C3jjP6vzYzTYoHV4s5NYPGuRkpT5SulKRKTkRmYg',\n",
       "    token='2218195843-cOPQa0D1Yk3JbvjvsCa0tIYzBOEWxINekmGcEql',\n",
       "    token_secret='3BFncT1zAvJRN6rj8haCxveZVLZWZ23QeulxzByXWlfoO'\n",
       ")\n",
       "twitter = Twitter(auth = auth)\n",
       "twitter_stream = TwitterStream(auth = auth, block = False)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 17
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "widget_container = widgets.ContainerWidget()\n",
       "widget_container.hbox()\n",
       "floating_container = widgets.ContainerWidget(parent=widget_container, default_view_name='ModalView')\n",
       "floating_container.description = \"Dynamic D3 rendering of a NetworkX graph\"\n",
       "floating_container.button_text = \"Render Window\"\n",
       "floating_container.set_css({\n",
       "    'width': '620px',\n",
       "    'height': '450px'}, selector='modal')\n",
       "\n",
       "graph = EventfulGraph()\n",
       "d3 = ForceDirectedGraphWidget(graph, parent=floating_container)\n",
       "d3.width = 600\n",
       "d3.height = 400\n",
       "\n",
       "stop_button = widgets.ButtonWidget(parent=widget_container, description=\"Stop\")\n",
       "stop_button.set_css('margin-left', '5px')\n",
       "        \n",
       "# Only listen to tweets while they are available and the user\n",
       "# doesn't want to stop.\n",
       "stop_listening = [False]\n",
       "def handle_stop():\n",
       "    stop_listening[0] = True\n",
       "    print(\"Service stopped\")\n",
       "stop_button.on_click(handle_stop)\n",
       "\n",
       "def watch_tweets(screen_name=None):\n",
       "    display(widget_container)\n",
       "    graph.node.clear()\n",
       "    graph.adj.clear()\n",
       "    start_timestamp = None\n",
       "    stop_button.add_class('btn-danger')\n",
       "    \n",
       "    # Get Barack's tweets\n",
       "    tweets = twitter.statuses.user_timeline(screen_name=screen_name)\n",
       "    user_id = twitter.users.lookup(screen_name=screen_name)[0]['id']\n",
       "    \n",
       "    # Determine the maximum number of retweets.\n",
       "    max_retweets = 0.0\n",
       "    for tweet in tweets:\n",
       "        max_retweets = float(max(tweet['retweet_count'], max_retweets))\n",
       "        \n",
       "    \n",
       "    def plot_tweet(tweet, parent=None, elapsed_seconds=1.0, color=\"gold\"):\n",
       "        new_id = tweet['id']\n",
       "        graph.add_node(\n",
       "            new_id, \n",
       "            r=max(float(tweet['retweet_count']) / max_retweets * 30.0, 3.0),\n",
       "            charge=-60,\n",
       "            fill = color,\n",
       "        )\n",
       "        \n",
       "        if parent is not None:\n",
       "            parent_radius = max(float(parent['retweet_count']) / max_retweets * 30.0, 3.0)\n",
       "            graph.node[parent['id']]['r'] = parent_radius\n",
       "            \n",
       "            graph.add_edge(new_id, parent['id'], distance=math.log(elapsed_seconds) * 9.0 + parent_radius)\n",
       "            graph.node[new_id]['fill'] = 'red'\n",
       "            \n",
       "        \n",
       "    # Plot each tweet.\n",
       "    for tweet in tweets:\n",
       "        plot_tweet(tweet)\n",
       "    \n",
       "    kernel=get_ipython().kernel\n",
       "    iterator = twitter_stream.statuses.filter(follow=user_id)\n",
       "    \n",
       "    while not stop_listening[0]:\n",
       "        kernel.do_one_iteration()\n",
       "        \n",
       "        for tweet in iterator:\n",
       "            kernel.do_one_iteration()\n",
       "            if stop_listening[0] or tweet is None:\n",
       "                break\n",
       "            else:\n",
       "                if 'retweeted_status' in tweet:\n",
       "                    original_tweet = tweet['retweeted_status']\n",
       "                    if original_tweet['id'] in graph.node:\n",
       "                        tweet_timestamp = datetime.datetime.strptime(tweet['created_at'], twitter_timestamp_format) \n",
       "                        if start_timestamp is None:\n",
       "                            start_timestamp = tweet_timestamp\n",
       "                        elapsed_seconds = max((tweet_timestamp - start_timestamp).total_seconds(),1.0)\n",
       "                        \n",
       "                        plot_tweet(tweet, parent=original_tweet, elapsed_seconds=elapsed_seconds)\n",
       "                elif 'id' in tweet:\n",
       "                    plot_tweet(tweet, color='lime')\n"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 18
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "watch_tweets(screen_name=\"justinbieber\")"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "output_type": "stream",
        "stream": "stdout",
        "text": [
         "Service stopped\n"
        ]
       }
      ],
      "prompt_number": 19
     }
    ],
    "metadata": {}
   }
  ]
 }
  No newline at end of file

examples/widgets/Dialogs.ipynb

@@ -1,200 +1,200 b''
 {
  "metadata": {
   "name": ""
  },
  "nbformat": 3,
  "nbformat_minor": 0,
  "worksheets": [
   {
    "cells": [
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Simple example notebook that shows how one can use widgets to build custom dialogs."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "from IPython.html import widgets\n",
       "from IPython.display import display"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 1
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "By using Bootstrap's modal class and ContainerWidgets, we can build a simple dialog window."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "def scrub_text_html(text):\n",
       "    text = text.replace('&', '&')\n",
       "    text = text.replace(' ', ' ')\n",
       "    text = text.replace('<', '&lt;')\n",
       "    text = text.replace('>', '&gt;')\n",
       "    text = text.replace('\\n', '<br>\\n')\n",
       "    return text\n",
       "\n",
       "def create_dialog(title=None, on_hidden=None):\n",
       "    dialog = widgets.ContainerWidget(visible=False)\n",
       "    dialog_header = widgets.ContainerWidget(parent=dialog)\n",
       "    dialog_header_close = widgets.ButtonWidget(parent=dialog_header, description = '&times;')\n",
-      "    dialog_header_label = widgets.StringWidget(parent=dialog_header, default_view_name='LabelView')\n",
+      "    dialog_header_label = widgets.StringWidget(parent=dialog_header, default_view_name='HTMLView')\n",
       "    dialog_body = widgets.ContainerWidget(parent=dialog)\n",
       "    dialog_footer = widgets.ContainerWidget(parent=dialog)\n",
       "    \n",
       "    if title is None or title == '':\n",
       "        title = ' '\n",
       "    dialog_header_label.value = '<h3>%s</h3>' % scrub_text_html(title)\n",
       "    \n",
       "    def handle_close():\n",
       "        dialog.visible = False\n",
       "        if on_hidden is not None:\n",
       "            on_hidden(dialog)\n",
       "    dialog_header_close.on_click(handle_close)\n",
       "    \n",
       "    display(dialog)\n",
       "    \n",
       "    dialog_header.add_class('modal-header')\n",
       "    dialog_body.add_class('modal-body')\n",
       "    dialog_footer.add_class('modal-footer')\n",
       "    dialog.add_class('modal')\n",
       "    \n",
       "    dialog_header_close.remove_class('btn')\n",
       "    dialog_header_close.add_class('close')\n",
       "    \n",
       "    return dialog_body, dialog_footer, dialog\n"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 2
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Using this `show_dialog` method, custom dialogs can be made using widgets.  Below is an example of a Yes/No dialog."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "# Since Python has a global thread lock, everything runs on a single thread.\n",
       "# Because of this, we use an asynronous model (callbacks).\n",
       "def show_yes_no(prompt, yes_callback=None, no_callback=None, title=None):\n",
       "    \n",
       "    def handle_hidden(dialog_window):\n",
       "        if no_callback is not None:\n",
       "            no_callback()\n",
       "        dialog_window.close()\n",
       "        \n",
       "    (dialog_body, dialog_footer, dialog_window) = create_dialog(title=title, on_hidden=handle_hidden)\n",
       "    \n",
       "    def handle_yes():\n",
       "        dialog_window.visible = False\n",
       "        if yes_callback is not None:\n",
       "            yes_callback()\n",
       "        dialog_window.close()\n",
       "            \n",
       "    def handle_no():\n",
       "        dialog_window.visible = False\n",
       "        handle_hidden(dialog_window)\n",
       "    \n",
       "    yes_button = widgets.ButtonWidget(parent=dialog_footer, description='Yes')\n",
       "    yes_button.on_click(handle_yes)\n",
       "    no_button = widgets.ButtonWidget(parent=dialog_footer, description='No')\n",
       "    no_button.on_click(handle_no)\n",
-      "    prompt_label = widgets.StringWidget(parent=dialog_body, value=scrub_text_html(prompt), default_view_name='LabelView')\n",
+      "    prompt_label = widgets.StringWidget(parent=dialog_body, value=scrub_text_html(prompt), default_view_name='HTMLView')\n",
       "    \n",
       "    display(yes_button)\n",
       "    display(no_button)\n",
       "    display(prompt_label)\n",
       "    \n",
       "    yes_button.add_class('btn-success')\n",
       "    no_button.add_class('btn-danger')\n",
       "    \n",
       "    dialog_window.visible=True\n",
       "    \n",
       "    "
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 3
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Test"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "def yes():\n",
       "    show_yes_no(\"Do you want to show the dialog again?\", yes, title=\"Self displaying dialog\")\n",
       "yes()"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 4
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Dialog result handlers can contain nested dialogs.  The following example shows how syncronous logic can be simulated using closures."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "title = \"Interactive Story\"\n",
       "def open_door():\n",
       "    show_yes_no(\"The house is empty.  You are tired and decide to sleep.  You live to see another day.\")\n",
       "\n",
       "def stay_outside():\n",
       "    def fight():\n",
       "        show_yes_no(\"You try to fight the wolves but die in the process.\", title=title)\n",
       "        \n",
       "    def panic():\n",
       "        def flight():\n",
       "            show_yes_no(\"You run as fast as you can.  You manage to escape the\\n\" + \\\n",
       "                        \"wolves but the cold is beginning to get to you.  You\\n\" + \\\n",
       "                        \"sit in the snow to take a nap.  You freeze and die.\", title=title)\n",
       "        \n",
       "        show_yes_no(\"You panic.  Do you enter the cabin now?\", open_door, flight, title=title)\n",
       "        \n",
       "    show_yes_no(\"A pack of wolves approach.  Do you want to fight them?\", fight, panic, title=title)\n",
       "\n",
       "show_yes_no(\"You are standing outside in a blizzard on a cold winter night.\\n\" + \\\n",
       "            \"A warm cabin with the lights on is in front of you.\\n\\n\" + \\\n",
       "            \"Do you want to enter the cabin?\", open_door, stay_outside, title=title)\n"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 5
     }
    ],
    "metadata": {}
   }
  ]
 }
  No newline at end of file

examples/widgets/Export As (nbconvert).ipynb

@@ -1,194 +1,194 b''
 {
  "metadata": {
   "name": ""
  },
  "nbformat": 3,
  "nbformat_minor": 0,
  "worksheets": [
   {
    "cells": [
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "from IPython.html import widgets\n",
       "from IPython.display import display, Javascript, clear_output\n",
       "from IPython.nbconvert import get_export_names, export_by_name\n",
       "from IPython.nbconvert.writers import FilesWriter\n",
       "from IPython.nbformat import current"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 1
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Create and *display* a StringWidget without a view.  The StringWidget will be used to store the notebook name which is otherwise only available in the front-end."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "notebook_name = widgets.StringWidget(default_view_name='')\n",
       "display(notebook_name)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 2
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Get the current notebook's name by pushing JavaScript to the browser that sets the notebook name in a string widget."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "js = \"\"\"var model = IPython.notebook.kernel.comm_manager.comms['{comm_id}'].model;\n",
       "model.set('value', IPython.notebook.notebook_name);\n",
       "model.save();\"\"\".format(comm_id=notebook_name._comm.comm_id)\n",
       "display(Javascript(data=js))"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "javascript": [
-        "var model = IPython.notebook.kernel.comm_manager.comms['79dbd18695b3432b94e2265533474474'].model;\n",
+        "var model = IPython.notebook.kernel.comm_manager.comms['af0fadc224134034af6141995abf625a'].model;\n",
         "model.set('value', IPython.notebook.notebook_name);\n",
         "model.save();"
        ],
        "metadata": {},
        "output_type": "display_data",
        "text": [
-        "<IPython.core.display.Javascript at 0x208f110>"
+        "<IPython.core.display.Javascript at 0x3756790>"
        ]
       }
      ],
      "prompt_number": 3
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "filename = notebook_name.value\n",
       "filename"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "metadata": {},
        "output_type": "pyout",
        "prompt_number": 4,
        "text": [
         "u'Export As (nbconvert).ipynb'"
        ]
       }
      ],
      "prompt_number": 4
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Create the widget that will allow the user to Export the current notebook."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "container = widgets.ContainerWidget()\n",
       "container.vbox()\n",
       "container.align_center()\n",
       "\n",
       "options = widgets.ContainerWidget(parent=container)\n",
       "options.hbox()\n",
       "options.align_center()\n",
       "exporter_names = widgets.SelectionWidget(parent=options, values=get_export_names(), value='html')\n",
       "export_button = widgets.ButtonWidget(parent=options, description=\"Export\")\n",
       "\n",
-      "download_link = widgets.StringWidget(parent=container, default_view_name=\"LabelView\", visible=False)"
+      "download_link = widgets.StringWidget(parent=container, default_view_name=\"HTMLView\", visible=False)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 5
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Export the notebook when the export button is clicked."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "file_writer = FilesWriter()\n",
       "\n",
       "def export(name, nb):\n",
       "    \n",
       "    # Get a unique key for the notebook and set it in the resources object.\n",
       "    notebook_name = name[:name.rfind('.')]\n",
       "    resources = {}\n",
       "    resources['unique_key'] = notebook_name\n",
       "    resources['output_files_dir'] = '%s_files' % notebook_name\n",
       "\n",
       "    # Try to export\n",
       "    try:\n",
       "        output, resources = export_by_name(exporter_names.value, nb)\n",
       "    except ConversionException as e:\n",
       "        download_link.value = \"<br>Could not export notebook!\"\n",
       "    else:\n",
       "        write_results = file_writer.write(output, resources, notebook_name=notebook_name)\n",
       "    \n",
       "        download_link.value = \"<br>Results: <a href='files/{filename}'><i>\\\"{filename}\\\"</i></a>\".format(filename=write_results)\n",
       "        download_link.visible = True"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 6
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "def handle_export():\n",
       "    with open(filename, 'r') as f:\n",
       "        export(filename, current.read(f, 'json'))\n",
       "export_button.on_click(handle_export)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 7
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "download_link.visible = False\n",
       "display(container)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 8
     }
    ],
    "metadata": {}
   }
  ]
 }
  No newline at end of file

examples/widgets/File Upload Widget.ipynb

@@ -1,222 +1,223 b''
 {
  "metadata": {
   "cell_tags": [
    [
     "<None>",
     null
    ]
   ],
   "name": ""
  },
  "nbformat": 3,
  "nbformat_minor": 0,
  "worksheets": [
   {
    "cells": [
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "from __future__ import print_function # py 2.7 compat\n",
       "\n",
+      "import base64\n",
       "from IPython.html import widgets # Widget definitions\n",
       "from IPython.display import display # Used to display widgets in the notebook"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 1
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Custom Widget"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "# Import the base Widget class and the traitlets Unicode class.\n",
       "from IPython.html.widgets import Widget\n",
       "from IPython.utils.traitlets import Unicode, Int\n",
       "\n",
       "# Define our FileWidget and its target model and default view.\n",
       "class FileWidget(Widget):\n",
       "    target_name = Unicode('FileWidgetModel')\n",
       "    default_view_name = Unicode('FilePickerView')\n",
       "    \n",
       "    # Define the custom state properties to sync with the front-end\n",
       "    _keys = ['value', 'filename']\n",
       "    value = Unicode('')\n",
       "    filename = Unicode('')\n",
       "    on_failed = Int(0)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 2
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "%%javascript\n",
       "\n",
       "require([\"notebook/js/widget\"], function(){\n",
       "    \n",
       "    // Define the FileModel and register it with the widget manager.\n",
       "    var FileModel = IPython.WidgetModel.extend({});\n",
       "    IPython.widget_manager.register_widget_model('FileWidgetModel', FileModel);\n",
       "    \n",
       "    // Define the FilePickerView\n",
       "    var FilePickerView = IPython.WidgetView.extend({\n",
       "        \n",
       "        render: function(){\n",
       "            var that = this;\n",
       "            this.$el = $('<input />')\n",
       "                .attr('type', 'file')\n",
       "                .change(function(evt){ that.handleFileChange(evt) });\n",
       "        },\n",
       "        \n",
       "        // Handles: User input\n",
       "        handleFileChange: function(evt) { \n",
       "            \n",
       "            //Retrieve the first (and only!) File from the FileList object\n",
       "            var that = this;\n",
       "            var f = evt.target.files[0];\n",
       "            if (f) {\n",
       "                var r = new FileReader();\n",
       "                r.onload = function(e) {\n",
       "                    that.model.set('value', e.target.result);\n",
       "                    that.model.update_other_views(that);\n",
       "                }\n",
       "                r.readAsText(f);\n",
       "            } else {\n",
       "                this.model.set('on_failed', this.model.get('on_failed') + 1);\n",
       "                this.model.update_other_views(this);\n",
       "            }\n",
       "            this.model.set('filename', f.name);\n",
       "            this.model.update_other_views(this);\n",
       "        },\n",
       "    });\n",
       "        \n",
       "    // Register the DatePickerView with the widget manager.\n",
       "    IPython.widget_manager.register_widget_view('FilePickerView', FilePickerView);\n",
       "});"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "javascript": [
         "\n",
         "require([\"notebook/js/widget\"], function(){\n",
         "    \n",
         "    // Define the FileModel and register it with the widget manager.\n",
         "    var FileModel = IPython.WidgetModel.extend({});\n",
         "    IPython.widget_manager.register_widget_model('FileWidgetModel', FileModel);\n",
         "    \n",
         "    // Define the FilePickerView\n",
         "    var FilePickerView = IPython.WidgetView.extend({\n",
         "        \n",
         "        render: function(){\n",
         "            var that = this;\n",
         "            this.$el = $('<input />')\n",
         "                .attr('type', 'file')\n",
         "                .change(function(evt){ that.handleFileChange(evt) });\n",
         "        },\n",
         "        \n",
         "        // Handles: User input\n",
         "        handleFileChange: function(evt) { \n",
         "            \n",
         "            //Retrieve the first (and only!) File from the FileList object\n",
         "            var that = this;\n",
         "            var f = evt.target.files[0];\n",
         "            if (f) {\n",
         "                var r = new FileReader();\n",
         "                r.onload = function(e) {\n",
         "                    that.model.set('value', e.target.result);\n",
         "                    that.model.update_other_views(that);\n",
         "                }\n",
         "                r.readAsText(f);\n",
         "            } else {\n",
         "                this.model.set('on_failed', this.model.get('on_failed') + 1);\n",
         "                this.model.update_other_views(this);\n",
         "            }\n",
         "            this.model.set('filename', f.name);\n",
         "            this.model.update_other_views(this);\n",
         "        },\n",
         "    });\n",
         "        \n",
         "    // Register the DatePickerView with the widget manager.\n",
         "    IPython.widget_manager.register_widget_view('FilePickerView', FilePickerView);\n",
         "});"
        ],
        "metadata": {},
        "output_type": "display_data",
        "text": [
         "<IPython.core.display.Javascript at 0x7f14f1c78cd0>"
        ]
       }
      ],
      "prompt_number": 3
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Usage"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "file_widget = FileWidget()\n",
       "display(file_widget)\n",
       "\n",
       "def file_loading():\n",
       "    print(\"Loading %s\" % file_widget.filename)\n",
       "\n",
       "def file_loaded():\n",
       "    print(\"Loaded, file contents: %s\" % file_widget.value)\n",
       "\n",
       "def file_failed(name, old_value, new_value):\n",
       "    if new_value > old_value:\n",
       "        print(\"Could not load file contents of %s\" % file_widget.filename)\n",
       "\n",
       "\n",
       "file_widget.on_trait_change(file_loading, 'filename')\n",
       "file_widget.on_trait_change(file_loaded, 'value')\n",
       "file_widget.on_trait_change(file_failed, 'on_failed')"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "output_type": "stream",
        "stream": "stdout",
        "text": [
         "Loading test.txt\n"
        ]
       },
       {
        "output_type": "stream",
        "stream": "stdout",
        "text": [
         "Loaded, file contents: Hello World!\n",
         "\n"
        ]
       }
      ],
      "prompt_number": 4
     }
    ],
    "metadata": {}
   }
  ]
 }
  No newline at end of file

examples/widgets/Part 1 - Basics.ipynb

@@ -1,325 +1,325 b''
 {
  "metadata": {
   "cell_tags": [
    [
     "<None>",
     null
    ]
   ],
   "name": ""
  },
  "nbformat": 3,
  "nbformat_minor": 0,
  "worksheets": [
   {
    "cells": [
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "To use IPython widgets in the notebook, the widget namespace and display function need to be imported."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "from IPython.html import widgets # Widget definitions\n",
       "from IPython.display import display # Used to display widgets in the notebook"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 1
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Basic Widgets"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The IPython notebook comes preloaded with basic widgets that represent common data types.  These widgets are\n",
       "\n",
       "- BoolWidget : boolean  \n",
       "- FloatRangeWidget : bounded float  \n",
       "- FloatWidget : unbounded float  \n",
       "- IntRangeWidget : bounded integer  \n",
       "- IntWidget : unbounded integer  \n",
       "- SelectionWidget : enumeration  \n",
       "- StringWidget : string  \n",
       "\n",
       "A few special widgets are also included, that can be used to capture events and change how other widgets are displayed.  These widgets are\n",
       "\n",
       "- ButtonWidget  \n",
       "- ContainerWidget  \n",
       "- MulticontainerWidget  \n",
       "\n",
       "To see the complete list of widgets, one can execute the following"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "[widget for widget in dir(widgets) if widget.endswith('Widget')]"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "metadata": {},
        "output_type": "pyout",
        "prompt_number": 2,
        "text": [
         "['BoolWidget',\n",
         " 'ButtonWidget',\n",
         " 'ContainerWidget',\n",
         " 'FloatRangeWidget',\n",
         " 'FloatWidget',\n",
         " 'IntRangeWidget',\n",
         " 'IntWidget',\n",
         " 'MulticontainerWidget',\n",
         " 'SelectionWidget',\n",
         " 'StringWidget',\n",
         " 'Widget']"
        ]
       }
      ],
      "prompt_number": 2
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The basic widgets can all be constructed without arguments.  The following creates a FloatRangeWidget without displaying it"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "mywidget = widgets.FloatRangeWidget()"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 3
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Constructing a widget does not display it on the page.  To display a widget, the widget must be passed to the IPython `display(object)` method.  `mywidget` is displayed by"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "display(mywidget)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 4
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "It's important to realize that widgets are not the same as output, even though they are displayed with `display`.  Widgets are drawn in a special widget area.  That area is marked with a close button which allows you to collapse the widgets.  Widgets cannot be interleaved with output.  Doing so would break the ability to make simple animations using `clear_output`.\n",
       "\n",
       "Widgets are manipulated via special instance properties (traitlets).  The names of these instance properties are listed in the widget's `keys` property (as seen below).  A few of these properties are common to most, if not all, widgets.  The common properties are `value`, `description`, `visible`, and `disabled`.  `_css`, `_add_class`, and `_remove_class` are internal properties that exist in all widgets and should not be modified."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "mywidget.keys"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "metadata": {},
        "output_type": "pyout",
        "prompt_number": 5,
        "text": [
         "['visible',\n",
         " '_css',\n",
         " '_add_class',\n",
         " '_remove_class',\n",
         " 'value',\n",
         " 'step',\n",
         " 'max',\n",
         " 'min',\n",
         " 'disabled',\n",
         " 'orientation',\n",
         " 'description']"
        ]
       }
      ],
      "prompt_number": 5
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Changing a widget's property value will automatically update that widget everywhere it is displayed in the notebook.  Here the value of `mywidget` is set.  The slider shown above (after input 4) updates automatically to the new value.  In reverse, changing the value of the displayed widget will update the property's value."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "mywidget.value = 25.0"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 6
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "After changing the widget's value in the notebook by hand to 0.0 (sliding the bar to the far left)."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "mywidget.value"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "metadata": {},
        "output_type": "pyout",
        "prompt_number": 7,
        "text": [
         "0.0"
        ]
       }
      ],
      "prompt_number": 7
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Widget property values can also be set with kwargs during the construction of the widget (as seen below)."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "mysecondwidget = widgets.SelectionWidget(values=[\"Item A\", \"Item B\", \"Item C\"], value=\"Nothing Selected\")\n",
       "display(mysecondwidget)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 8
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Views"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The data types that most of the widgets represent can be displayed more than one way.  A `view` is a visual representation of a widget in the notebook.  In the example in the section above, the default `view` for the `FloatRangeWidget` is used.  The default view is set in the widgets `default_view_name` instance property (as seen below)."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "mywidget.default_view_name"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "metadata": {},
        "output_type": "pyout",
        "prompt_number": 9,
        "text": [
         "u'FloatSliderView'"
        ]
       }
      ],
      "prompt_number": 9
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "When a widget is displayed using `display(...)`, the `default_view_name` is used to determine what view type should be used to display the widget.  View names are case sensitive.  Sometimes the default view isn't the best view to represent a piece of data.  To change what view is used, either the `default_view_name` can be changed or the `view_name` kwarg of `display` can be set.  This also can be used to display one widget multiple ways in one output (as seen below)."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "display(mywidget)\n",
       "display(mywidget, view_name=\"FloatTextView\")"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 10
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Some views work with multiple different widget types and some views only work with one.  The complete list of views and supported widgets is below.  The default views are italicized.\n",
       "\n",
       "| Widget Name            | View Names          |\n",
       "|:-----------------------|:--------------------|\n",
       "| BoolWidget             |   *CheckboxView*    |\n",
       "|                        |   ToggleButtonView  |\n",
       "| ButtonWidget           |   *ButtonView*      |\n",
       "| ContainerWidget        |   *ContainerView*   |\n",
       "|                        |   ModalView         |\n",
       "| FloatRangeWidget       |   *FloatSliderView* |\n",
       "|                        |   FloatTextView     |\n",
       "|                        |   ProgressView      |\n",
       "| FloatWidget            |   *FloatTextView*   |\n",
       "| IntRangeWidget         |   *IntSliderView*   |\n",
       "|                        |   IntTextView       |\n",
       "|                        |   ProgressView      |\n",
       "| IntWidget              |   *IntTextView*     |\n",
       "| MulticontainerWidget   |   AccordionView     |\n",
       "|                        |   *TabView*         |\n",
       "| SelectionWidget        |   ToggleButtonsView |\n",
       "|                        |   RadioButtonsView  |\n",
       "|                        |   *DropdownView*    |\n",
       "|                        |   ListBoxView       |\n",
-      "| StringWidget           |   LabelView         |\n",
+      "| StringWidget           |   HTMLView          |\n",
       "|                        |   TextAreaView      |\n",
       "|                        |   *TextBoxView*     |\n"
      ]
     }
    ],
    "metadata": {}
   }
  ]
 }
  No newline at end of file

examples/widgets/Part 4 - Styles.ipynb

@@ -1,337 +1,337 b''
 {
  "metadata": {
   "cell_tags": [
    [
     "<None>",
     null
    ]
   ],
   "name": ""
  },
  "nbformat": 3,
  "nbformat_minor": 0,
  "worksheets": [
   {
    "cells": [
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "from IPython.html import widgets # Widget definitions\n",
       "from IPython.display import display # Used to display widgets in the notebook"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 1
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "CSS"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "When trying to design an attractive widget GUI, styling becomes important.  Widget views are DOM (document object model) elements that can be controlled with CSS.  There are two helper methods defined on widget that allow the manipulation of the widget's CSS.  The first is the `set_css` method, whos doc string is displayed below.  This method allows one or more CSS attributes to be set at once.  "
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "print(widgets.Widget.set_css.__doc__)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "output_type": "stream",
        "stream": "stdout",
        "text": [
         "Set one or more CSS properties of the widget (shared among all of the \n",
         "        views).  This function has two signatures:\n",
         "        - set_css(css_dict, [selector=''])\n",
         "        - set_css(key, value, [selector=''])\n",
         "\n",
         "        Parameters\n",
         "        ----------\n",
         "        css_dict : dict\n",
         "            CSS key/value pairs to apply\n",
         "        key: unicode\n",
         "            CSS key\n",
         "        value\n",
         "            CSS value\n",
         "        selector: unicode (optional)\n",
         "            JQuery selector to use to apply the CSS key/value.\n",
         "        \n"
        ]
       }
      ],
      "prompt_number": 2
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The second is `get_css` which allows CSS attributes that have been set to be read.  Note that this method will only read CSS attributes that have been set using the `set_css` method.  `get_css`'s doc string is displayed below."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "print(widgets.Widget.get_css.__doc__)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "output_type": "stream",
        "stream": "stdout",
        "text": [
         "Get a CSS property of the widget.  Note, this function does not \n",
         "        actually request the CSS from the front-end;  Only properties that have \n",
         "        been set with set_css can be read.\n",
         "\n",
         "        Parameters\n",
         "        ----------\n",
         "        key: unicode\n",
         "            CSS key\n",
         "        selector: unicode (optional)\n",
         "            JQuery selector used when the CSS key/value was set.\n",
         "        \n"
        ]
       }
      ],
      "prompt_number": 3
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Below is an example that applies CSS attributes to a container to emphasize text."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "container = widgets.ContainerWidget()\n",
       "\n",
       "# set_css used to set a single CSS attribute.\n",
       "container.set_css('border', '3px solid black') # Border the container\n",
       "\n",
       "# set_css used to set multiple CSS attributes.\n",
       "container.set_css({'padding': '6px', # Add padding to the container\n",
       "                   'background': 'yellow'}) # Fill the container yellow\n",
       "\n",
-      "label = widgets.StringWidget(default_view_name=\"LabelView\", parent=container)\n",
+      "label = widgets.StringWidget(default_view_name=\"HTMLView\", parent=container)\n",
       "label.value = \"<strong>ALERT: </strong> Hello World!\"\n",
       "\n",
       "display(container)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 4
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "DOM Classes"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "In some cases it's necessary to apply DOM classes to your widgets.  DOM classes allow DOM elements to be indentified by Javascript and CSS.  The notebook defines its own set of classes to stylize its elements.  The `add_class` widget method allows you to add DOM classes to your widget's definition.  The `add_class` method's doc string can be seen below."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "print(widgets.Widget.add_class.__doc__)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "output_type": "stream",
        "stream": "stdout",
        "text": [
         "Add class[es] to a DOM element\n",
         "\n",
         "        Parameters\n",
         "        ----------\n",
         "        class_name: unicode\n",
         "            Class name(s) to add to the DOM element(s).  Multiple class names \n",
         "            must be space separated.\n",
         "        selector: unicode (optional)\n",
         "            JQuery selector to select the DOM element(s) that the class(es) will \n",
         "            be added to.\n",
         "        \n"
        ]
       }
      ],
      "prompt_number": 5
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Since `add_class` if a DOM operation, it will only affect widgets that have been displayed.  `add_class` must be called after the widget has been displayed.  Extending the example above, the corners of the container can be rounded by adding the `corner-all` notebook class to the container (as seen below).  "
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "container = widgets.ContainerWidget()\n",
       "container.set_css({'border': '3px solid black',\n",
-      "                   'padding': '6px',\n",
+      "                   'padding': '6px', \n",
       "                   'background': 'yellow'}) \n",
       "\n",
-      "label = widgets.StringWidget(default_view_name=\"LabelView\", parent=container) \n",
+      "label = widgets.StringWidget(default_view_name=\"HTMLView\", parent=container)\n",
       "label.value = \"<strong>ALERT: </strong> Hello World!\"\n",
       "\n",
       "display(container)\n",
       "container.add_class('corner-all') # Must be called AFTER display"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 6
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The IPython notebook uses bootstrap for styling.  The example above can be simplified by using a bootstrap class (as seen below).  Bootstrap documentation can be found at http://getbootstrap.com/\u200e ."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "label = widgets.StringWidget(value = \"<strong>ALERT: </strong> Hello World!\")\n",
-      "display(label, view_name=\"LabelView\")\n",
+      "display(label, view_name=\"HTMLView\")\n",
       "\n",
       "# Apply twitter bootstrap alert class to the label.\n",
       "label.add_class(\"alert\")"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 7
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The example below shows how bootstrap classes can be used to change button apearance."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "# List of the bootstrap button styles\n",
       "button_classes = ['Default', 'btn-primary', 'btn-info', 'btn-success', \n",
       "                  'btn-warning', 'btn-danger', 'btn-inverse', 'btn-link']\n",
       "\n",
       "# Create each button and apply the style.  Also add margin to the buttons so they space\n",
       "# themselves nicely.\n",
       "for i in range(8):\n",
       "    button = widgets.ButtonWidget(description=button_classes[i])\n",
       "    button.set_css(\"margin\", \"5px\")\n",
       "    display(button)\n",
       "    if i > 0: # Don't add a class the first button.\n",
       "        button.add_class(button_classes[i])\n",
       "    "
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 8
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "It's also useful to be able to remove DOM classes from widgets.  The `remove_class` widget method allows you to remove classes from widgets that have been displayed.  Like `add_widget`, it must be called after the widget has been displayed.  The doc string of `remove_class` can be seen below."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "print(widgets.Widget.remove_class.__doc__)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "output_type": "stream",
        "stream": "stdout",
        "text": [
         "Remove class[es] from a DOM element\n",
         "\n",
         "        Parameters\n",
         "        ----------\n",
         "        class_name: unicode\n",
         "            Class name(s) to remove from  the DOM element(s).  Multiple class \n",
         "            names must be space separated.\n",
         "        selector: unicode (optional)\n",
         "            JQuery selector to select the DOM element(s) that the class(es) will \n",
         "            be removed from.\n",
         "        \n"
        ]
       }
      ],
      "prompt_number": 9
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The example below animates an alert using different bootstrap styles."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "import time\n",
       "label = widgets.StringWidget(value = \"<strong>ALERT: </strong> Hello World!\")\n",
-      "display(label, view_name=\"LabelView\")\n",
+      "display(label, view_name=\"HTMLView\")\n",
       "\n",
       "# Apply twitter bootstrap alert class to the label.\n",
       "label.add_class(\"alert\")\n",
       "\n",
       "# Animate through additional bootstrap label styles 3 times\n",
       "additional_alert_styles = ['alert-error', 'alert-info', 'alert-success']\n",
       "for i in range(3 * len(additional_alert_styles)):\n",
       "    label.add_class(additional_alert_styles[i % 3])\n",
       "    label.remove_class(additional_alert_styles[(i-1) % 3])\n",
       "    time.sleep(1)\n",
       "        "
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 10
     }
    ],
    "metadata": {}
   }
  ]
 }
  No newline at end of file

examples/widgets/Part 5 - Alignment.ipynb

@@ -1,304 +1,304 b''
 {
  "metadata": {
   "cell_tags": [
    [
     "<None>",
     null
    ]
   ],
   "name": ""
  },
  "nbformat": 3,
  "nbformat_minor": 0,
  "worksheets": [
   {
    "cells": [
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "from IPython.html import widgets # Widget definitions\n",
       "from IPython.display import display # Used to display widgets in the notebook"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 1
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Alignment"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Most widgets have a `description` property which allows a label for the widget to be defined.  The label of the widget has a fixed minimum width.  The text of the label is always right aligned and the widget is left aligned (as seen below) "
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "display(widgets.StringWidget(description=\"a:\"))\n",
       "display(widgets.StringWidget(description=\"aa:\"))\n",
       "display(widgets.StringWidget(description=\"aaa:\"))"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 2
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "If a label is longer than the minimum width, the widget is shifted to the right (as seen below)."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "display(widgets.StringWidget(description=\"a:\"))\n",
       "display(widgets.StringWidget(description=\"aa:\"))\n",
       "display(widgets.StringWidget(description=\"aaa:\"))\n",
       "display(widgets.StringWidget(description=\"aaaaaaaaaaaaaaaaaa:\"))"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 3
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "If a `description` is not set for the widget, the label is not displayed (as seen below)."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "display(widgets.StringWidget(description=\"a:\"))\n",
       "display(widgets.StringWidget(description=\"aa:\"))\n",
       "display(widgets.StringWidget(description=\"aaa:\"))\n",
       "display(widgets.StringWidget())"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 4
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Custom Alignment"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "`ContainerWidget`s allow for custom alignment of widgets.  The `hbox` and `vbox` methods (parameterless) cause the `ContainerWidget` to both horizontally and vertically align its children.  The following example compares `vbox` to `hbox`."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "child_style = {\n",
       "    'background': '#77CC77',\n",
       "    'padding': '25px',\n",
       "    'margin': '5px',\n",
       "    'font-size': 'xx-large',\n",
       "    'color': 'white',\n",
       "}\n",
       "\n",
       "def make_container(title):\n",
-      "    display(widgets.StringWidget(default_view_name='LabelView', value='<h2><br>' + title + '</h2>'))\n",
+      "    display(widgets.StringWidget(default_view_name='HTMLView', value='<h2><br>' + title + '</h2>'))\n",
       "    container = widgets.ContainerWidget()\n",
       "    container.set_css('background', '#999999')\n",
       "    display(container)\n",
       "    return container\n",
       "\n",
       "def fill_container(container):\n",
       "    components = []\n",
       "    for i in range(3):\n",
-      "        components.append(widgets.StringWidget(parent=container, default_view_name='LabelView', value=\"ABC\"[i]))\n",
+      "        components.append(widgets.StringWidget(parent=container, default_view_name='HTMLView', value=\"ABC\"[i]))\n",
       "        components[i].set_css(child_style)\n",
       "        display(components[i])\n",
       "    \n",
       "container = make_container('VBox')\n",
       "container.vbox()\n",
       "fill_container(container)\n",
       "\n",
       "container = make_container('HBox')\n",
       "container.hbox()\n",
       "fill_container(container)\n"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 5
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The `ContainerWidget` `pack_start`, `pack_center`, and `pack_end` methods (parameterless) adjust the alignment of the widgets on the axis that they are being rendered on.  Below is an example of the different alignments."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "container = make_container('HBox Pack Start')\n",
       "container.hbox()\n",
       "container.pack_start()\n",
       "fill_container(container)\n",
       "    \n",
       "container = make_container('HBox Pack Center')\n",
       "container.hbox()\n",
       "container.pack_center()\n",
       "fill_container(container)\n",
       "    \n",
       "container = make_container('HBox Pack End')\n",
       "container.hbox()\n",
       "container.pack_end()\n",
       "fill_container(container)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 6
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The `ContainerWidget` `flex0`, `flex1`, and `flex2` methods (parameterless) modify the containers flexibility.  Changing a container flexibility affects how and if the container will occupy the remaining space.  Setting `flex0` has the same result as setting no flex.  Below is an example of different flex configurations.  The number on the boxes correspond to the applied flex."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "def fill_container(container, flexes):\n",
       "    components = []\n",
       "    for i in range(len(flexes)):\n",
       "        components.append(widgets.ContainerWidget(parent=container))\n",
       "        components[i].set_css(child_style)\n",
       "        \n",
-      "        label = widgets.StringWidget(parent=components[i], default_view_name='LabelView', value=str(flexes[i]))\n",
+      "        label = widgets.StringWidget(parent=components[i], default_view_name='HTMLView', value=str(flexes[i]))\n",
       "        \n",
       "        if flexes[i] == 0:\n",
       "            components[i].flex0()\n",
       "        elif flexes[i] == 1:\n",
       "            components[i].flex1()\n",
       "        elif flexes[i] == 2:\n",
       "            components[i].flex2()\n",
       "        display(components[i])\n",
       "        \n",
       "container = make_container('Different Flex Configurations')\n",
       "container.hbox()\n",
       "fill_container(container, [0, 0, 0])\n",
       "        \n",
       "container = make_container('')\n",
       "container.hbox()\n",
       "fill_container(container, [0, 0, 1])\n",
       "        \n",
       "container = make_container('')\n",
       "container.hbox()\n",
       "fill_container(container, [0, 1, 1])\n",
       "        \n",
       "container = make_container('')\n",
       "container.hbox()\n",
       "fill_container(container, [0, 2, 2])\n",
       "        \n",
       "container = make_container('')\n",
       "container.hbox()\n",
       "fill_container(container, [0, 1, 2])\n",
       "        \n",
       "container = make_container('')\n",
       "container.hbox()\n",
       "fill_container(container, [1, 1, 2])"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 7
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The `ContainerWidget` `align_start`, `align_center`, and `align_end` methods (parameterless) adjust the alignment of the widgets on the axis perpindicular to the one that they are being rendered on.  Below is an example of the different alignments."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "def fill_container(container):\n",
       "    components = []\n",
       "    for i in range(3):\n",
-      "        components.append(widgets.StringWidget(parent=container, default_view_name='LabelView', value=\"ABC\"[i]))\n",
+      "        components.append(widgets.StringWidget(parent=container, default_view_name='HTMLView', value=\"ABC\"[i]))\n",
       "        components[i].set_css(child_style)\n",
       "        components[i].set_css('height', str((i+1) * 50) + 'px')\n",
       "        display(components[i])\n",
       "\n",
       "container = make_container('HBox Align Start')\n",
       "container.hbox()\n",
       "container.align_start()\n",
       "fill_container(container)\n",
       "    \n",
       "container = make_container('HBox Align Center')\n",
       "container.hbox()\n",
       "container.align_center()\n",
       "fill_container(container)\n",
       "    \n",
       "container = make_container('HBox Align End')\n",
       "container.hbox()\n",
       "container.align_end()\n",
       "fill_container(container)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 8
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "By default the widget area is a `vbox`; however, there are many uses for a `hbox`.  The example below uses a `hbox` to display a set of vertical sliders, like an equalizer."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "container = widgets.ContainerWidget()\n",
       "container.hbox()\n",
       "for i in range(15):\n",
       "    widgets.FloatRangeWidget(orientation='vertical', parent=container, description=str(i+1), value=50.0)\n",
       "display(container)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 9
     }
    ],
    "metadata": {}
   }
  ]
 }
  No newline at end of file

examples/widgets/Variable Inspector.ipynb

@@ -1,249 +1,249 b''
 {
  "metadata": {
   "name": ""
  },
  "nbformat": 3,
  "nbformat_minor": 0,
  "worksheets": [
   {
    "cells": [
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Build the Variable Inspector"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "from IPython.html import widgets\n",
       "from IPython.display import display\n",
       "import re"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 1
     },
     {
      "cell_type": "heading",
      "level": 3,
      "metadata": {},
      "source": [
       "Create Variable Inspector Controls"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "_popout = widgets.ContainerWidget(default_view_name=\"ModalView\")\n",
       "_popout.description = \"Variable Inspector\"\n",
       "_popout.button_text = _popout.description\n",
       "_popout.vbox()\n",
       "\n",
-      "_modal_header_execs_label = widgets.StringWidget(parent=_popout, default_view_name=\"LabelView\")\n",
+      "_modal_header_execs_label = widgets.StringWidget(parent=_popout, default_view_name=\"HTMLView\")\n",
       "_modal_header_execs_label.execs = 0\n",
       "\n",
       "_modal_body = widgets.ContainerWidget(parent=_popout)\n",
       "_modal_body.flex1()\n",
       "_modal_body.set_css('overflow-y', 'scroll')\n",
-      "_modal_body_label = widgets.StringWidget(parent=_modal_body, default_view_name=\"LabelView\")\n",
+      "_modal_body_label = widgets.StringWidget(parent=_modal_body, default_view_name=\"HTMLView\")\n",
       "_modal_body_label.value = 'Not hooked'\n",
       "\n",
       "_modal_footer = widgets.ContainerWidget(parent=_popout)\n",
       "_var_filter = widgets.SelectionWidget(values=['Public', 'Private', 'IPython'], parent=_modal_footer, value='Public', default_view_name='ToggleButtonsView')\n",
       "\n",
       "display(_popout)\n",
       "\n",
       "_modal_footer.add_class('modal-footer')\n"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 2
     },
     {
      "cell_type": "heading",
      "level": 3,
      "metadata": {},
      "source": [
       "Method that Fills the Inspector"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "_ipython_input = re.compile('_i[0-9]*')\n",
       "\n",
       "def _fill_inspector():\n",
       "    \n",
       "    # Apply filter to variable names.\n",
       "    names = []\n",
       "    for name in sorted(_ipython.user_ns):\n",
       "        \n",
       "        match = _ipython_input.match(name)\n",
       "        is_ipython = (match is not None and match.group() == name) or \\\n",
       "                     name == '_dh' or \\\n",
       "                     name == '_ih' or \\\n",
       "                     name == '_ii' or \\\n",
       "                     name == '_iii' or \\\n",
       "                     name == '_oh' or \\\n",
       "                     name == '_sh' or \\\n",
       "                     name == 'get_ipython' or \\\n",
       "                     name == 'In' or \\\n",
       "                     name == 'Out' or \\\n",
       "                     name == 'exit' or \\\n",
       "                     name == 'help' or \\\n",
       "                     name == 'quit' or \\\n",
       "                     name == '_' or \\\n",
       "                     name == '__' or \\\n",
       "                     name == '___'\n",
       "        \n",
       "        is_private = name.startswith('_')\n",
       "        is_public = not is_private\n",
       "        \n",
       "        var_filter = _var_filter.value\n",
       "        if var_filter == 'IPython' and is_ipython:\n",
       "            names.append(name)\n",
       "        elif var_filter == 'Private' and (is_private and not is_ipython):\n",
       "            names.append(name)\n",
       "        elif var_filter == 'Public' and (is_public and not is_ipython):\n",
       "            names.append(name)\n",
       "            \n",
       "    # Render each name and it's value.\n",
       "    variable_list_html = \"\"\"\n",
       "<table class=\"table table-bordered table-striped\" style=\"width: 100%; overflow: hidden; table-layout:fixed;\">\n",
       "    <tr><th>Name</th><th>Type</th><th>Value</th>\"\"\"\n",
       "    for name in names:\n",
       "        var_value = _ipython.user_ns[name]\n",
       "        var_type = type(var_value)\n",
       "        var_small_value = str(var_value)[:100].replace(\"&\", \"&amp;\").replace(\"<\", \"&lt;\")\n",
       "        \n",
       "        if str(var_value) != var_small_value:\n",
       "            var_small_value += '<br><div class=\"label label-info\">...</div>'\n",
       "        \n",
       "        row = \"\"\"\n",
       "<tr style='overflow: hidden;'>\n",
       "    <td style='width: 30%; overflow: hidden;'>{name}</td>\n",
       "    <td style='width: 30%; overflow: hidden;'>{type}</td>\n",
       "    <td style='width: 40%; overflow: hidden;'>{small_value}</td>\n",
       "</tr>\n",
       "\"\"\".format(name=name, type=var_type.__name__, small_value=var_small_value, value=str(var_value))\n",
       "        variable_list_html += row + '\\n'\n",
       "    variable_list_html += '</table>'\n",
       "    _modal_body_label.value = variable_list_html\n",
       "        \n",
       "    "
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 3
     },
     {
      "cell_type": "heading",
      "level": 3,
      "metadata": {},
      "source": [
       "Hook Cell Execute and Filter Change"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "_ipython = get_ipython()\n",
       "\n",
       "try:\n",
       "    del _ipython._post_execute[handle_cell_executed]\n",
       "except:\n",
       "    pass\n",
       "\n",
       "def _handle_cell_executed():\n",
       "    _modal_header_execs_label.execs += 1\n",
       "    _modal_header_execs_label.value = '%d cell executions captured' % _modal_header_execs_label.execs\n",
       "    _fill_inspector()\n",
       "_ipython.register_post_execute(_handle_cell_executed)\n",
       "\n",
       "def _handle_filter_changed():\n",
       "    _fill_inspector()\n",
       "_var_filter.on_trait_change(_handle_filter_changed, 'value')"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 4
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Test"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "a = 5"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 5
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "b = 3.0"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 6
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "c = a * b"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 7
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "d = \"String\""
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 8
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "del b"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 9
     }
    ],
    "metadata": {}
   }
  ]
 }
  No newline at end of file

examples/widgets/Widget Tester.ipynb

@@ -1,279 +1,279 b''
 {
  "metadata": {
   "name": ""
  },
  "nbformat": 3,
  "nbformat_minor": 0,
  "worksheets": [
   {
    "cells": [
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "from IPython.html import widgets\n",
       "from IPython.display import display"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 1
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "This notebook shows how widgets can be used to manipulate the properties of other widgets."
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "To list the properties of a widget and allow the user to modify them, a function that keeps widgets in sync with traits is required.  This function will syncronize a traitlet of one widget with a traitlet of another widget.  The method also supports one way syncronization of types that have string representations with string traits."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "def sync_widgets_properties(widget_a, property_a, widget_b, property_b, str_rep=False):\n",
       "    def set_property_a(name, old, new):\n",
       "        if old != new:\n",
       "            if str_rep:\n",
       "                setattr(widget_a, property_a, str(new))\n",
       "            else:\n",
       "                setattr(widget_a, property_a, new)\n",
       "    def set_property_b(name, old, new):\n",
       "        if old != new and not str_rep:\n",
       "            setattr(widget_b, property_b, new)\n",
       "    widget_a.on_trait_change(set_property_b, property_a)\n",
       "    widget_b.on_trait_change(set_property_a, property_b)\n",
       "    if str_rep:\n",
       "        setattr(widget_a, property_a, str(getattr(widget_b, property_b)))\n",
       "    else:\n",
       "        setattr(widget_a, property_a, getattr(widget_b, property_b))\n",
       "    \n",
       "    return widget_a"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 2
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "This function will create a best match widget to represent a traitlet of another widget.  The function will then bind the two widgets using the `sync_widget_properties` method above."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "def create_hooked_widget(control, key):\n",
       "    property_type = type(getattr(control, key))\n",
       "    \n",
       "    if key == \"orientation\":\n",
       "        return sync_widgets_properties(widgets.SelectionWidget(values=['vertical', 'horizontal'], default_view_name='ToggleButtonsView'), 'value', control, key)\n",
       "    elif property_type is int:\n",
       "        return sync_widgets_properties(widgets.IntWidget(), 'value', control, key)\n",
       "    elif property_type is float:\n",
       "        return sync_widgets_properties(widgets.FloatWidget(), 'value', control, key)\n",
       "    elif property_type is bool:\n",
       "        return sync_widgets_properties(widgets.BoolWidget(), 'value', control, key)\n",
       "    elif property_type is str or property_type is unicode:\n",
       "        return sync_widgets_properties(widgets.StringWidget(), 'value', control, key)\n",
       "    else:\n",
       "        return sync_widgets_properties(widgets.StringWidget(disabled=True), 'value', control, key, str_rep=True)\n",
       "    "
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 3
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "This function creates a modal that allows the user to read the doc string associated with a callable.  The user can then invoke the callbable from the same modal."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "modals = {}\n",
       "def get_method_modal(control, method_name, parent=None):\n",
       "    if not method_name in dir(control):\n",
       "        return None\n",
       "    if not control in modals:\n",
       "        modals[control] = {}\n",
       "    if not method_name in modals[control]:\n",
       "        new_modal = widgets.ContainerWidget(default_view_name=\"ModalView\")\n",
       "        new_modal.description=\"Invoke \" + method_name\n",
       "        new_modal.button_text = method_name + \"(...)\"\n",
       "        \n",
       "        doc_str = 'No doc string'\n",
       "        try:\n",
       "            doc_str = '<pre>' + getattr(control, method_name).__doc__ + '</pre>'\n",
       "        except:\n",
       "            pass\n",
       "        \n",
-      "        doc_label = widgets.StringWidget(parent=new_modal,default_view_name='LabelView', value=doc_str)\n",
+      "        doc_label = widgets.StringWidget(parent=new_modal,default_view_name='HTMLView', value=doc_str)\n",
       "        doc_label.set_css('color', 'blue')\n",
       "        exec_box = widgets.ContainerWidget(parent=new_modal)\n",
       "        exec_box.hbox()\n",
       "        exec_box.pack_center()\n",
       "        exec_box.align_center()\n",
-      "        open_label = widgets.StringWidget(parent=exec_box,default_view_name='LabelView', value=method_name+'(&nbsp;&nbsp;')\n",
+      "        open_label = widgets.StringWidget(parent=exec_box,default_view_name='HTMLView', value=method_name+'(&nbsp;&nbsp;')\n",
       "        exec_str = widgets.StringWidget(parent=exec_box)\n",
-      "        close_label = widgets.StringWidget(parent=exec_box,default_view_name='LabelView', value='&nbsp;&nbsp;)')\n",
+      "        close_label = widgets.StringWidget(parent=exec_box,default_view_name='HTMLView', value='&nbsp;&nbsp;)')\n",
       "        button_row = widgets.ContainerWidget(parent=new_modal)\n",
       "        button_row.hbox()\n",
       "        button_row.pack_end()\n",
       "        button_box = widgets.ContainerWidget(parent=button_row)\n",
       "        button_box.flex0()\n",
       "        exec_button = widgets.ButtonWidget(parent=button_box, description=\"Execute\")\n",
       "        \n",
       "        def handle_method_exec():\n",
       "            my_control = control\n",
       "            exec \"my_control.\" + method_name.replace('\\n', '') + \"(\" + exec_str.value +  \")\" in globals(), locals()\n",
       "        exec_button.on_click(handle_method_exec)\n",
       "        exec_str.on_submit(handle_method_exec)\n",
       "        \n",
       "        if parent is not None:\n",
       "            new_modal.parent = parent\n",
       "        \n",
       "        modals[control][method_name] = new_modal\n",
       "        display(new_modal)\n",
       "    return modals[control][method_name]"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 4
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "This function renders the control panel."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "def hook_control(control, parent=None):\n",
       "    explorer = widgets.ContainerWidget()\n",
       "    if parent is not None:\n",
       "        explorer.parent = parent\n",
       "    explorer.hbox()\n",
       "    \n",
       "    viewer = widgets.ContainerWidget(parent=explorer)\n",
       "    viewer.set_css({\n",
       "        'background': 'white',\n",
       "        'border': '1px solid #000',\n",
       "        'overflow': 'hidden',\n",
       "    })\n",
       "    viewer.flex2()\n",
       "    \n",
       "    control.parent = viewer\n",
       "    \n",
       "    side = widgets.ContainerWidget(parent=explorer)\n",
       "    side.flex1()\n",
       "    \n",
       "    side_tab = widgets.MulticontainerWidget(parent=side)\n",
       "    side_tab.set_css('margin', '5px')\n",
       "    \n",
       "    properties = widgets.ContainerWidget(parent=side_tab)\n",
       "    methods = widgets.ContainerWidget(parent=side_tab)\n",
       "    side_tab.set_title(0, 'Properties')\n",
       "    side_tab.set_title(1, 'Methods')\n",
       "    \n",
       "    for key in sorted(control.keys):\n",
       "        property_control = create_hooked_widget(control, key)\n",
       "        property_control.parent = properties\n",
       "        property_control.description = key + ':'\n",
       "        \n",
       "    methods.vbox()\n",
       "    methods.set_css('overflow', 'hidden')\n",
       "    \n",
       "    methods_container = widgets.ContainerWidget(parent=methods)\n",
       "    methods_container.flex1()\n",
       "    methods_buttons = widgets.ContainerWidget(parent=methods)\n",
       "    methods_buttons.flex0()\n",
       "    methods_buttons.hbox()\n",
       "    methods_buttons.pack_end()\n",
       "    methods_buttons.set_css({\n",
       "        'padding-top': '5px',\n",
       "        'padding-right': '50px',\n",
       "    })\n",
       "    \n",
       "    execute_button = widgets.ButtonWidget(parent=methods_buttons, description=\"Invoke\")\n",
       "    \n",
       "    method_list = widgets.SelectionWidget(parent=methods_container, default_view_name=\"ListBoxView\")\n",
       "    method_list.description = \"Names:\"\n",
       "    method_list.set_css('height', '400px')\n",
       "    method_list.values = [attr_name for attr_name in dir(control) if callable(getattr(control, attr_name)) and not attr_name.startswith('_')]\n",
       "    \n",
       "    def handle_execute_method():\n",
       "        get_method_modal(control, method_list.value, parent=parent)\n",
       "    execute_button.on_click(handle_execute_method)\n",
       "    \n",
       "    display(explorer)    \n",
       "    explorer.add_class('well')\n",
       "    return explorer"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 5
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "This final bit of code allows the user to select what control and view he/she wants to manipulate."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "control_tester = widgets.ContainerWidget()\n",
       "widget_names = [widget_name for widget_name in dir(widgets) if widget_name.endswith('Widget') and widget_name != \"Widget\"]\n",
       "widget_selector = widgets.SelectionWidget(parent=control_tester, description=\"Widget type:\", values=widget_names)\n",
       "view_name = widgets.StringWidget(parent=control_tester, description=\"View name (optional):\")\n",
       "display_button_container = widgets.ContainerWidget(parent=control_tester)\n",
       "display_button_container.hbox()\n",
       "display_button_container.pack_end()\n",
       "display_button_container.set_css(\"padding\", \"5px\")\n",
       "display_button = widgets.ButtonWidget(parent=display_button_container, description=\"Display\")\n",
       "display(control_tester)\n",
       "\n",
       "last_displayed = [None]\n",
       "def handle_display():\n",
       "    if last_displayed[0] is not None:\n",
       "        last_displayed[0].close()\n",
       "    widget_type = getattr(widgets, widget_selector.value)\n",
       "    widget = widget_type()\n",
       "    if len(view_name.value) > 0:\n",
       "        widget.default_view_name = view_name.value\n",
       "    last_displayed[0] = hook_control(widget)\n",
       "display_button.on_click(handle_display)\n",
       "view_name.on_submit(handle_display)\n"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 6
     }
    ],
    "metadata": {}
   }
  ]
 }
  No newline at end of file