Removed initialjson trait from D3 example

Removed a lot of unnecessary code
Added some description markdown
Use require.js to load D3

examples/widgets/D3.ipynb

@@ -11,114 +11,35 b''
      "cell_type": "code",
      "collapsed": false,
      "input": [
-      "from __future__ import print_function # py 2.7 compat"
-     ],
-     "language": "python",
-     "metadata": {},
-     "outputs": [],
-     "prompt_number": 1
-    },
-    {
-     "cell_type": "heading",
-     "level": 1,
-     "metadata": {},
-     "source": [
-      "Validate NetworkX version"
-     ]
-    },
-    {
-     "cell_type": "code",
-     "collapsed": false,
-     "input": [
-      "import networkx as nx\n",
-      "version = float('.'.join(nx.__version__.split('.')[0:2]))\n",
-      "if version < 1.8:\n",
-      "    raise Exception('This notebook requires networkx version 1.8 or later.  Version %s is installed on this machine.' % nx.__version__)"
-     ],
-     "language": "python",
-     "metadata": {},
-     "outputs": [],
-     "prompt_number": 2
-    },
-    {
-     "cell_type": "heading",
-     "level": 1,
-     "metadata": {},
-     "source": [
-      "Simple Output Test"
-     ]
-    },
-    {
-     "cell_type": "code",
-     "collapsed": false,
-     "input": [
-      "from networkx.readwrite import json_graph\n",
-      "import json\n",
+      "from __future__ import print_function # py 2.7 compat\n",
       "\n",
-      "def to_d3_json(graph):\n",
-      "    data = json_graph.node_link_data(graph)\n",
-      "    return json.dumps(data)"
+      "import networkx as nx"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
-     "prompt_number": 3
-    },
-    {
-     "cell_type": "code",
-     "collapsed": false,
-     "input": [
-      "G = nx.Graph([(1,2)])\n",
-      "to_d3_json(G)"
-     ],
-     "language": "python",
-     "metadata": {},
-     "outputs": [
-      {
-       "metadata": {},
-       "output_type": "pyout",
-       "prompt_number": 4,
-       "text": [
-        "'{\"multigraph\": false, \"directed\": false, \"links\": [{\"target\": 1, \"source\": 0}], \"graph\": [], \"nodes\": [{\"id\": 1}, {\"id\": 2}]}'"
-       ]
-      }
-     ],
      "prompt_number": 4
     },
     {
-     "cell_type": "code",
-     "collapsed": false,
-     "input": [
-      "G.add_node('test')\n",
-      "to_d3_json(G)"
-     ],
-     "language": "python",
+     "cell_type": "markdown",
      "metadata": {},
-     "outputs": [
-      {
-       "metadata": {},
-       "output_type": "pyout",
-       "prompt_number": 5,
-       "text": [
-        "'{\"multigraph\": false, \"directed\": false, \"links\": [{\"target\": 1, \"source\": 0}], \"graph\": [], \"nodes\": [{\"id\": 1}, {\"id\": 2}, {\"id\": \"test\"}]}'"
-       ]
-      }
-     ],
-     "prompt_number": 5
+     "source": [
+      "This notebook demonstrates how NetworkX and D3 can be married using custom widget code."
+     ]
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
-      "Listen To Graph Changes"
+      "Hooking NetworkX Graphs"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
-      "Create a simple eventfull dictionary."
+      "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."
      ]
     },
     {
@@ -212,255 +133,12 b''
       "            \n",
       "    def clear(self):\n",
       "        for key in list(self.keys()):\n",
-      "            del self[key]\n"
+      "            del self[key]"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
-     "prompt_number": 6
-    },
-    {
-     "cell_type": "markdown",
-     "metadata": {},
-     "source": [
-      "Test the eventful dictionary."
-     ]
-    },
-    {
-     "cell_type": "code",
-     "collapsed": false,
-     "input": [
-      "a = EventfulDict()"
-     ],
-     "language": "python",
-     "metadata": {},
-     "outputs": [],
-     "prompt_number": 7
-    },
-    {
-     "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",
-      "echo_dict_events(a)"
-     ],
-     "language": "python",
-     "metadata": {},
-     "outputs": [],
-     "prompt_number": 8
-    },
-    {
-     "cell_type": "code",
-     "collapsed": false,
-     "input": [
-      "a['a'] = 'hello'"
-     ],
-     "language": "python",
-     "metadata": {},
-     "outputs": [
-      {
-       "output_type": "stream",
-       "stream": "stdout",
-       "text": [
-        "add (a, hello)\n"
-       ]
-      }
-     ],
-     "prompt_number": 9
-    },
-    {
-     "cell_type": "code",
-     "collapsed": false,
-     "input": [
-      "a['a'] = 'goodbye'"
-     ],
-     "language": "python",
-     "metadata": {},
-     "outputs": [
-      {
-       "output_type": "stream",
-       "stream": "stdout",
-       "text": [
-        "set (a, goodbye)\n"
-       ]
-      }
-     ],
-     "prompt_number": 10
-    },
-    {
-     "cell_type": "code",
-     "collapsed": false,
-     "input": [
-      "b = {'c': 'yay', 'd': 'no'}\n",
-      "a.update(b)"
-     ],
-     "language": "python",
-     "metadata": {},
-     "outputs": [
-      {
-       "output_type": "stream",
-       "stream": "stdout",
-       "text": [
-        "add (c, yay)\n",
-        "add (d, no)\n"
-       ]
-      }
-     ],
-     "prompt_number": 11
-    },
-    {
-     "cell_type": "code",
-     "collapsed": false,
-     "input": [
-      "a"
-     ],
-     "language": "python",
-     "metadata": {},
-     "outputs": [
-      {
-       "metadata": {},
-       "output_type": "pyout",
-       "prompt_number": 12,
-       "text": [
-        "{'a': 'goodbye', 'c': 'yay', 'd': 'no'}"
-       ]
-      }
-     ],
-     "prompt_number": 12
-    },
-    {
-     "cell_type": "code",
-     "collapsed": false,
-     "input": [
-      "a.pop('a')"
-     ],
-     "language": "python",
-     "metadata": {},
-     "outputs": [
-      {
-       "metadata": {},
-       "output_type": "pyout",
-       "prompt_number": 13,
-       "text": [
-        "'goodbye'"
-       ]
-      }
-     ],
-     "prompt_number": 13
-    },
-    {
-     "cell_type": "code",
-     "collapsed": false,
-     "input": [
-      "a.popitem()"
-     ],
-     "language": "python",
-     "metadata": {},
-     "outputs": [
-      {
-       "output_type": "stream",
-       "stream": "stdout",
-       "text": [
-        "del c\n"
-       ]
-      },
-      {
-       "metadata": {},
-       "output_type": "pyout",
-       "prompt_number": 14,
-       "text": [
-        "('c', 'yay')"
-       ]
-      }
-     ],
-     "prompt_number": 14
-    },
-    {
-     "cell_type": "code",
-     "collapsed": false,
-     "input": [
-      "a['e'] = {}"
-     ],
-     "language": "python",
-     "metadata": {},
-     "outputs": [
-      {
-       "output_type": "stream",
-       "stream": "stdout",
-       "text": [
-        "add (e, {})\n"
-       ]
-      }
-     ],
-     "prompt_number": 15
-    },
-    {
-     "cell_type": "code",
-     "collapsed": false,
-     "input": [
-      "a['e']['a'] = 0"
-     ],
-     "language": "python",
-     "metadata": {},
-     "outputs": [
-      {
-       "output_type": "stream",
-       "stream": "stdout",
-       "text": [
-        "set (e, {'a': 0})\n"
-       ]
-      }
-     ],
-     "prompt_number": 16
-    },
-    {
-     "cell_type": "code",
-     "collapsed": false,
-     "input": [
-      "a['e']['b'] = 1"
-     ],
-     "language": "python",
-     "metadata": {},
-     "outputs": [
-      {
-       "output_type": "stream",
-       "stream": "stdout",
-       "text": [
-        "set (e, {'a': 0, 'b': 1})\n"
-       ]
-      }
-     ],
-     "prompt_number": 17
-    },
-    {
-     "cell_type": "code",
-     "collapsed": false,
-     "input": [
-      "a.clear()"
-     ],
-     "language": "python",
-     "metadata": {},
-     "outputs": [
-      {
-       "output_type": "stream",
-       "stream": "stdout",
-       "text": [
-        "del e\n",
-        "del d\n"
-       ]
-      }
-     ],
-     "prompt_number": 18
+     "prompt_number": 5
     },
     {
      "cell_type": "markdown",
@@ -487,12 +165,30 b''
      "language": "python",
      "metadata": {},
      "outputs": [],
-     "prompt_number": 19
+     "prompt_number": 6
+    },
+    {
+     "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+' ')"
@@ -500,48 +196,18 b''
      "language": "python",
      "metadata": {},
      "outputs": [],
-     "prompt_number": 20
+     "prompt_number": 7
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "G = EventfulGraph()\n",
-      "echo_graph_events(G)"
-     ],
-     "language": "python",
-     "metadata": {},
-     "outputs": [],
-     "prompt_number": 21
-    },
-    {
-     "cell_type": "code",
-     "collapsed": false,
-     "input": [
-      "to_d3_json(G)"
-     ],
-     "language": "python",
-     "metadata": {},
-     "outputs": [
-      {
-       "metadata": {},
-       "output_type": "pyout",
-       "prompt_number": 22,
-       "text": [
-        "'{\"multigraph\": false, \"directed\": false, \"links\": [], \"graph\": [], \"nodes\": []}'"
-       ]
-      }
-     ],
-     "prompt_number": 22
-    },
-    {
-     "cell_type": "code",
-     "collapsed": false,
-     "input": [
+      "echo_graph_events(G)\n",
+      "\n",
       "G.add_node('hello')\n",
       "G.add_node('goodbye')\n",
-      "G.add_edges_from([(1,2),(1,3)])\n",
-      "to_d3_json(G)"
+      "G.add_edges_from([(1,2),(1,3)])"
      ],
      "language": "python",
      "metadata": {},
@@ -565,17 +231,9 b''
         "adj set (1, {2: {}, 3: {}})\n",
         "adj set (3, {1: {}})\n"
        ]
-      },
-      {
-       "metadata": {},
-       "output_type": "pyout",
-       "prompt_number": 23,
-       "text": [
-        "'{\"multigraph\": false, \"directed\": false, \"links\": [{\"target\": 1, \"source\": 0}, {\"target\": 3, \"source\": 1}], \"graph\": [], \"nodes\": [{\"id\": 3}, {\"id\": 1}, {\"id\": \"goodbye\"}, {\"id\": 2}, {\"id\": \"hello\"}]}'"
-       ]
       }
      ],
-     "prompt_number": 23
+     "prompt_number": 8
     },
     {
      "cell_type": "code",
@@ -589,13 +247,13 b''
       {
        "metadata": {},
        "output_type": "pyout",
-       "prompt_number": 24,
+       "prompt_number": 9,
        "text": [
-        "{3: {1: {}}, 1: {2: {}, 3: {}}, 'goodbye': {}, 2: {1: {}}, 'hello': {}}"
+        "{3: {1: {}}, 1: {2: {}, 3: {}}, 'hello': {}, 2: {1: {}}, 'goodbye': {}}"
        ]
       }
      ],
-     "prompt_number": 24
+     "prompt_number": 9
     },
     {
      "cell_type": "code",
@@ -609,70 +267,33 b''
       {
        "metadata": {},
        "output_type": "pyout",
-       "prompt_number": 25,
+       "prompt_number": 10,
        "text": [
-        "{3: {}, 1: {}, 'goodbye': {}, 2: {}, 'hello': {}}"
+        "{3: {}, 1: {}, 'hello': {}, 2: {}, 'goodbye': {}}"
        ]
       }
      ],
-     "prompt_number": 25
+     "prompt_number": 10
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
-      "Custom Widget"
+      "D3 Widget"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
-      "%%html\n",
-      "<div id=\"d3loadindicator\" style=\"background: red; color: white;\"><center>Loading D3...<center></div>\n",
-      "<script>\n",
-      "    $.getScript('http://d3js.org/d3.v3.min.js', function(){\n",
-      "        $('#d3loadindicator')\n",
-      "            .css('background', 'green')\n",
-      "            .html('<center>D3 Loaded Successfully</center>');\n",
-      "    });\n",
-      "</script>"
-     ],
-     "language": "python",
-     "metadata": {},
-     "outputs": [
-      {
-       "html": [
-        "<div id=\"d3loadindicator\" style=\"background: red; color: white;\"><center>Loading D3...<center></div>\n",
-        "<script>\n",
-        "    $.getScript('http://d3js.org/d3.v3.min.js', function(){\n",
-        "        $('#d3loadindicator')\n",
-        "            .css('background', 'green')\n",
-        "            .html('<center>D3 Loaded Successfully</center>');\n",
-        "    });\n",
-        "</script>"
-       ],
-       "metadata": {},
-       "output_type": "display_data",
-       "text": [
-        "<IPython.core.display.HTML at 0x7fa801877d90>"
-       ]
-      }
-     ],
-     "prompt_number": 26
-    },
-    {
-     "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": 27
+     "prompt_number": 11
     },
     {
      "cell_type": "code",
@@ -687,9 +308,6 b''
       "    target_name = Unicode('ForceDirectedGraphModel')\n",
       "    default_view_name = Unicode('D3ForceDirectedGraphView')\n",
       "    \n",
-      "    _keys = ['initial_json']\n",
-      "    initial_json = Unicode()\n",
-      "    \n",
       "    def __init__(self, eventful_graph, *pargs, **kwargs):\n",
       "        Widget.__init__(self, *pargs, **kwargs)\n",
       "        \n",
@@ -700,8 +318,15 b''
       "        \n",
       "        \n",
       "    def _repr_widget_(self, *pargs, **kwargs):\n",
-      "        self.initial_json = to_d3_json(self._eventful_graph)\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",
@@ -719,7 +344,7 b''
      "language": "python",
      "metadata": {},
      "outputs": [],
-     "prompt_number": 28
+     "prompt_number": 20
     },
     {
      "cell_type": "code",
@@ -727,7 +352,7 b''
      "input": [
       "%%javascript\n",
       "\n",
-      "require([\"notebook/js/widget\"], function(){\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",
@@ -740,6 +365,7 b''
       "            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",
       "        add_node: function(id){\n",
@@ -860,34 +486,28 b''
       "        },\n",
       "        \n",
       "        update: function(){\n",
-      "            var initial_json = this.model.get('initial_json');\n",
-      "            if (this.initial_json != initial_json) {\n",
-      "                this.initial_json = initial_json;\n",
+      "            if (! this.has_drawn) {\n",
+      "                this.has_drawn = true;\n",
       "                \n",
-      "                var width = 860,\n",
-      "                    height = 400;\n",
+      "                var width = 400,\n",
+      "                    height = 300;\n",
       "                \n",
       "                this.color = d3.scale.category20();\n",
       "                \n",
-      "                var graph = JSON.parse(initial_json);\n",
       "                this.nodes = [];\n",
-      "                $.extend(this.nodes, graph.nodes);\n",
       "                this.links = [];\n",
-      "                $.extend(this.links, graph.links);\n",
       "                \n",
-      "                var force = d3.layout.force()\n",
+      "                this.force = d3.layout.force()\n",
       "                    .nodes(this.nodes)\n",
       "                    .links(this.links)\n",
       "                    .charge(-120)\n",
       "                    .linkDistance(30)\n",
       "                    .size([width, height])\n",
       "                    .on(\"tick\", $.proxy(this.tick, this));\n",
-      "                this.force = force;\n",
       "                \n",
-      "                var svg = d3.select(\"#\" + this.guid).append(\"svg\")\n",
+      "                this.svg = d3.select(\"#\" + this.guid).append(\"svg\")\n",
       "                    .attr(\"width\", width)\n",
       "                    .attr(\"height\", height);\n",
-      "                this.svg = svg;\n",
       "                \n",
       "                var that = this;\n",
       "                setTimeout(function() {\n",
@@ -910,7 +530,7 b''
       {
        "javascript": [
         "\n",
-        "require([\"notebook/js/widget\"], function(){\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",
@@ -923,6 +543,7 b''
         "            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",
         "        add_node: function(id){\n",
@@ -1043,34 +664,28 b''
         "        },\n",
         "        \n",
         "        update: function(){\n",
-        "            var initial_json = this.model.get('initial_json');\n",
-        "            if (this.initial_json != initial_json) {\n",
-        "                this.initial_json = initial_json;\n",
+        "            if (! this.has_drawn) {\n",
+        "                this.has_drawn = true;\n",
         "                \n",
-        "                var width = 860,\n",
-        "                    height = 400;\n",
+        "                var width = 400,\n",
+        "                    height = 300;\n",
         "                \n",
         "                this.color = d3.scale.category20();\n",
         "                \n",
-        "                var graph = JSON.parse(initial_json);\n",
         "                this.nodes = [];\n",
-        "                $.extend(this.nodes, graph.nodes);\n",
         "                this.links = [];\n",
-        "                $.extend(this.links, graph.links);\n",
         "                \n",
-        "                var force = d3.layout.force()\n",
+        "                this.force = d3.layout.force()\n",
         "                    .nodes(this.nodes)\n",
         "                    .links(this.links)\n",
         "                    .charge(-120)\n",
         "                    .linkDistance(30)\n",
         "                    .size([width, height])\n",
         "                    .on(\"tick\", $.proxy(this.tick, this));\n",
-        "                this.force = force;\n",
         "                \n",
-        "                var svg = d3.select(\"#\" + this.guid).append(\"svg\")\n",
+        "                this.svg = d3.select(\"#\" + this.guid).append(\"svg\")\n",
         "                    .attr(\"width\", width)\n",
         "                    .attr(\"height\", height);\n",
-        "                this.svg = svg;\n",
         "                \n",
         "                var that = this;\n",
         "                setTimeout(function() {\n",
@@ -1090,11 +705,19 b''
        "metadata": {},
        "output_type": "display_data",
        "text": [
-        "<IPython.core.display.Javascript at 0x7fa809a360d0>"
+        "<IPython.core.display.Javascript at 0x7fdee9b02590>"
        ]
       }
      ],
-     "prompt_number": 29
+     "prompt_number": 28
+    },
+    {
+     "cell_type": "heading",
+     "level": 1,
+     "metadata": {},
+     "source": [
+      "Test"
+     ]
     },
     {
      "cell_type": "code",
@@ -1103,55 +726,25 b''
       "G = EventfulGraph()\n",
       "G.add_node('hello')\n",
       "G.add_node('goodbye')\n",
-      "G.add_edges_from([(1,2),(1,3)])\n",
-      "to_d3_json(G)"
+      "G.add_edges_from([(1,2),(1,3)])"
      ],
      "language": "python",
      "metadata": {},
-     "outputs": [
-      {
-       "metadata": {},
-       "output_type": "pyout",
-       "prompt_number": 36,
-       "text": [
-        "'{\"multigraph\": false, \"directed\": false, \"links\": [{\"target\": 1, \"source\": 0}, {\"target\": 3, \"source\": 1}], \"graph\": [], \"nodes\": [{\"id\": 3}, {\"id\": 1}, {\"id\": \"goodbye\"}, {\"id\": 2}, {\"id\": \"hello\"}]}'"
-       ]
-      }
-     ],
-     "prompt_number": 36
+     "outputs": [],
+     "prompt_number": 29
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
-      "floating_container = widgets.ContainerWidget()\n",
-      "floating_container.set_css({\n",
-      "    'position': 'relative',\n",
-      "    'left': '0px',\n",
-      "    'top': '0px',\n",
-      "    'z-index': '999',\n",
-      "    'background': '#FFF',\n",
-      "    'opacity': '0.8'\n",
-      "})\n",
+      "floating_container = widgets.ContainerWidget(default_view_name='ModalView')\n",
       "\n",
       "d3 = ForceDirectedGraphWidget(G, parent=floating_container)\n",
-      "display(floating_container)\n",
-      "\n",
-      "detach_button = widgets.ButtonWidget(description=\"Detach\")\n",
-      "def handle_detach(sender):\n",
-      "    if sender.description == \"Detach\":\n",
-      "        sender.description = \"Attach\"\n",
-      "        floating_container.set_css('position', 'absolute')\n",
-      "    else:\n",
-      "        sender.description = \"Detach\"\n",
-      "        floating_container.set_css('position', 'relative')\n",
-      "detach_button.on_click(handle_detach)\n",
-      "display(detach_button)"
+      "display(floating_container)"
      ],
      "language": "python",
      "metadata": {},
-     "outputs": [],
-     "prompt_number": 37
+     "outputs": []
     },
     {
      "cell_type": "code",
@@ -1163,7 +756,7 b''
      "language": "python",
      "metadata": {},
      "outputs": [],
-     "prompt_number": 38
+     "prompt_number": 25
     },
     {
      "cell_type": "code",
@@ -1174,7 +767,7 b''
      "language": "python",
      "metadata": {},
      "outputs": [],
-     "prompt_number": 39
+     "prompt_number": 26
     },
     {
      "cell_type": "code",
@@ -1186,7 +779,7 b''
      "language": "python",
      "metadata": {},
      "outputs": [],
-     "prompt_number": 40
+     "prompt_number": 27
     },
     {
      "cell_type": "code",