From 8e8e6291d407da8ec2792bc2d66815cbb4f0b7e0 Mon Sep 17 00:00:00 2001
From: "sylvain.corlay" <sylvain.corlay@gmail.com>
Date: Thu, 24 Jul 2014 00:12:33 -0400
Subject: [PATCH 1/7] Partial updates of css and visible + simplification of
 widget_container

---
 IPython/html/static/widgets/js/widget.js      | 29 ++++++++++---------
 .../static/widgets/js/widget_container.js     | 14 ++-------
 2 files changed, 17 insertions(+), 26 deletions(-)

diff --git a/IPython/html/static/widgets/js/widget.js b/IPython/html/static/widgets/js/widget.js
index c04e497ab..f5b299593 100644
--- a/IPython/html/static/widgets/js/widget.js
+++ b/IPython/html/static/widgets/js/widget.js
@@ -407,13 +407,15 @@ define(["widgets/js/manager",
     var DOMWidgetView = WidgetView.extend({
         initialize: function (options) {
             // Public constructor
-
-            // In the future we may want to make changes more granular 
-            // (e.g., trigger on visible:change).
-            this.model.on('change', this.update, this);
-            this.model.on('msg:custom', this.on_msg, this);
             DOMWidgetView.__super__.initialize.apply(this, arguments);
             this.on('displayed', this.show, this);
+
+            this.model.on('msg:custom', this.on_msg, this);
+            this.model.on('change:visible', this.update_visible, this);
+            this.model.on('change:_css', this.update_css, this);
+
+            this.update_visible(this.model, this.model.get("visible"));
+            this.update_css(this.model, this.model.get("_css"));
         },
         
         on_msg: function(msg) {
@@ -438,19 +440,18 @@ define(["widgets/js/manager",
             this._get_selector_element(selector).removeClass(class_list);
         },
     
-        update: function () {
-            // Update the contents of this view
-            //
-            // Called when the model is changed.  The model may have been 
-            // changed by another view or by a state update from the back-end.
+        update_visible: function(model, value) {
+            // Update visibility
             //      The very first update seems to happen before the element is 
             // finished rendering so we use setTimeout to give the element time 
             // to render
             var e = this.$el;
-            var visible = this.model.get('visible');
-            setTimeout(function() {e.toggle(visible);},0);
-     
-            var css = this.model.get('_css');
+            setTimeout(function() {e.toggle(value);},0);
+         },
+
+        update_css: function (model, css) {
+            // Update the contents of this view
+            var e = this.$el;
             if (css === undefined) {return;}
             for (var i = 0; i < css.length; i++) {
                 // Apply the css traits to all elements that match the selector.
diff --git a/IPython/html/static/widgets/js/widget_container.js b/IPython/html/static/widgets/js/widget_container.js
index 411e48b71..04bb5fffc 100644
--- a/IPython/html/static/widgets/js/widget_container.js
+++ b/IPython/html/static/widgets/js/widget_container.js
@@ -13,10 +13,9 @@ define([
             this.$el.addClass('widget-container')
                 .addClass('vbox');
             this.update_children([], this.model.get('children'));
-            this.model.on('change:children', function(model, value, options) {
+            this.model.on('change:children', function(model, value) {
                 this.update_children(model.previous('children'), value);
             }, this);
-            this.update();
         },
         
         update_children: function(old_list, new_list) {
@@ -42,14 +41,6 @@ define([
                 view.trigger('displayed');
             });
         },
-        
-        update: function(){
-            // Update the contents of this view
-            //
-            // Called when the model is changed.  The model may have been 
-            // changed by another view or by a state update from the back-end.
-            return ContainerView.__super__.update.apply(this);
-        },
     });
     
 
@@ -163,10 +154,9 @@ define([
             this.popped_out = true;
 
             this.update_children([], this.model.get('children'));
-            this.model.on('change:children', function(model, value, options) {
+            this.model.on('change:children', function(model, value) {
                 this.update_children(model.previous('children'), value);
             }, this);
-            this.update();
         },
         
         hide: function() {

From 972fbb5f34483a4e1ce74578b67771e903ad21ce Mon Sep 17 00:00:00 2001
From: "sylvain.corlay" <sylvain.corlay@gmail.com>
Date: Thu, 24 Jul 2014 00:26:41 -0400
Subject: [PATCH 2/7] widget simplification continued

---
 IPython/html/static/widgets/js/widget.js       |  2 +-
 .../html/static/widgets/js/widget_container.js | 18 ++++++++++--------
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/IPython/html/static/widgets/js/widget.js b/IPython/html/static/widgets/js/widget.js
index f5b299593..b6e95c353 100644
--- a/IPython/html/static/widgets/js/widget.js
+++ b/IPython/html/static/widgets/js/widget.js
@@ -405,7 +405,7 @@ define(["widgets/js/manager",
 
 
     var DOMWidgetView = WidgetView.extend({
-        initialize: function (options) {
+        initialize: function () {
             // Public constructor
             DOMWidgetView.__super__.initialize.apply(this, arguments);
             this.on('displayed', this.show, this);
diff --git a/IPython/html/static/widgets/js/widget_container.js b/IPython/html/static/widgets/js/widget_container.js
index 04bb5fffc..e01a5688e 100644
--- a/IPython/html/static/widgets/js/widget_container.js
+++ b/IPython/html/static/widgets/js/widget_container.js
@@ -8,20 +8,23 @@ define([
 ], function(widget, $){
 
     var ContainerView = widget.DOMWidgetView.extend({
-        render: function(){
-            // Called when view is rendered.
-            this.$el.addClass('widget-container')
-                .addClass('vbox');
+        initialize: function(){
+            // Public constructor
+            ContainerView.__super__.initialize.apply(this, arguments);
             this.update_children([], this.model.get('children'));
             this.model.on('change:children', function(model, value) {
                 this.update_children(model.previous('children'), value);
             }, this);
         },
+
+        render: function(){
+            // Called when view is rendered.
+            this.$el.addClass('widget-container').addClass('vbox');
+        },
         
         update_children: function(old_list, new_list) {
             // Called when the children list changes.
-            this.do_diff(old_list,
-                new_list, 
+            this.do_diff(old_list, new_list, 
                 $.proxy(this.remove_child_model, this),
                 $.proxy(this.add_child_model, this));
         },
@@ -203,8 +206,7 @@ define([
         
         update_children: function(old_list, new_list) {
             // Called when the children list is modified.
-            this.do_diff(old_list, 
-                new_list, 
+            this.do_diff(old_list, new_list, 
                 $.proxy(this.remove_child_model, this),
                 $.proxy(this.add_child_model, this));
         },

From 34fe520742388c51bd22e2a7133453767322d89a Mon Sep 17 00:00:00 2001
From: "sylvain.corlay" <sylvain.corlay@gmail.com>
Date: Thu, 24 Jul 2014 09:53:21 -0400
Subject: [PATCH 3/7] widget changes continued

---
 IPython/html/static/widgets/js/widget.js      |  4 +--
 .../static/widgets/js/widget_container.js     |  4 +--
 .../widgets/js/widget_selectioncontainer.js   | 33 ++++---------------
 3 files changed, 10 insertions(+), 31 deletions(-)

diff --git a/IPython/html/static/widgets/js/widget.js b/IPython/html/static/widgets/js/widget.js
index b6e95c353..2ea08739e 100644
--- a/IPython/html/static/widgets/js/widget.js
+++ b/IPython/html/static/widgets/js/widget.js
@@ -409,11 +409,9 @@ define(["widgets/js/manager",
             // Public constructor
             DOMWidgetView.__super__.initialize.apply(this, arguments);
             this.on('displayed', this.show, this);
-
             this.model.on('msg:custom', this.on_msg, this);
             this.model.on('change:visible', this.update_visible, this);
             this.model.on('change:_css', this.update_css, this);
-
             this.update_visible(this.model, this.model.get("visible"));
             this.update_css(this.model, this.model.get("_css"));
         },
@@ -450,7 +448,7 @@ define(["widgets/js/manager",
          },
 
         update_css: function (model, css) {
-            // Update the contents of this view
+            // Update the css styling of this view.
             var e = this.$el;
             if (css === undefined) {return;}
             for (var i = 0; i < css.length; i++) {
diff --git a/IPython/html/static/widgets/js/widget_container.js b/IPython/html/static/widgets/js/widget_container.js
index e01a5688e..a84cf4b02 100644
--- a/IPython/html/static/widgets/js/widget_container.js
+++ b/IPython/html/static/widgets/js/widget_container.js
@@ -39,7 +39,7 @@ define([
             var view = this.create_child_view(model);
             this.$el.append(view.$el);
 
-            // Trigger the displayed event once this view is displayed.
+            // Trigger the displayed event of the child view.
             this.after_displayed(function() {
                 view.trigger('displayed');
             });
@@ -221,7 +221,7 @@ define([
             var view = this.create_child_view(model);
             this.$body.append(view.$el);
 
-            // Trigger the displayed event once this view is displayed.
+            // Trigger the displayed event of the child view.
             this.after_displayed(function() {
                 view.trigger('displayed');
             });
diff --git a/IPython/html/static/widgets/js/widget_selectioncontainer.js b/IPython/html/static/widgets/js/widget_selectioncontainer.js
index e96722ebf..733de91ca 100644
--- a/IPython/html/static/widgets/js/widget_selectioncontainer.js
+++ b/IPython/html/static/widgets/js/widget_selectioncontainer.js
@@ -30,15 +30,7 @@ define([
             var that = this;
             this.on('displayed', function() {
                 this.update_titles();
-                // Trigger model displayed events for any models that are child to 
-                // this model when this model is displayed.
-                that.is_displayed = true;
-                for (var property in that.child_views) {
-                    if (that.child_views.hasOwnProperty(property)) {
-                        that.child_views[property].trigger('displayed');
-                    }
-                }
-            }, this);
+            }
         },
 
         update_titles: function(titles) {
@@ -127,10 +119,10 @@ define([
             this.update();
             this.update_titles();
 
-            // Trigger the displayed event if this model is displayed.
-            if (this.is_displayed) {
+            // Trigger the displayed event of the child view.
+            this.after_displayed(function() {
                 view.trigger('displayed');
-            }
+            });
         },
     });
     
@@ -158,17 +150,6 @@ define([
             this.model.on('change:children', function(model, value, options) {
                 this.update_children(model.previous('children'), value);
             }, this);
-
-            // Trigger model displayed events for any models that are child to 
-            // this model when this model is displayed.
-            this.on('displayed', function(){
-                that.is_displayed = true;
-                for (var property in that.child_views) {
-                    if (that.child_views.hasOwnProperty(property)) {
-                        that.child_views[property].trigger('displayed');
-                    }
-                }
-            });
         },
 
         update_children: function(old_list, new_list) {
@@ -222,10 +203,10 @@ define([
                 .appendTo(this.$tab_contents);
             view.parent_container = contents_div;
 
-            // Trigger the displayed event if this model is displayed.
-            if (this.is_displayed) {
+            // Trigger the displayed event of the child view.
+            this.after_displayed(function() {
                 view.trigger('displayed');
-            }
+            });
         },
 
         update: function(options) {

From 5c0fda1dc034fdf6f6ee2c17865ad700f125fe30 Mon Sep 17 00:00:00 2001
From: "sylvain.corlay" <sylvain.corlay@gmail.com>
Date: Thu, 24 Jul 2014 10:06:32 -0400
Subject: [PATCH 4/7] correction

---
 IPython/html/static/widgets/js/widget.js                    | 2 ++
 IPython/html/static/widgets/js/widget_selectioncontainer.js | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/IPython/html/static/widgets/js/widget.js b/IPython/html/static/widgets/js/widget.js
index 2ea08739e..6710f0302 100644
--- a/IPython/html/static/widgets/js/widget.js
+++ b/IPython/html/static/widgets/js/widget.js
@@ -409,9 +409,11 @@ define(["widgets/js/manager",
             // Public constructor
             DOMWidgetView.__super__.initialize.apply(this, arguments);
             this.on('displayed', this.show, this);
+
             this.model.on('msg:custom', this.on_msg, this);
             this.model.on('change:visible', this.update_visible, this);
             this.model.on('change:_css', this.update_css, this);
+
             this.update_visible(this.model, this.model.get("visible"));
             this.update_css(this.model, this.model.get("_css"));
         },
diff --git a/IPython/html/static/widgets/js/widget_selectioncontainer.js b/IPython/html/static/widgets/js/widget_selectioncontainer.js
index 733de91ca..ed6bfe2be 100644
--- a/IPython/html/static/widgets/js/widget_selectioncontainer.js
+++ b/IPython/html/static/widgets/js/widget_selectioncontainer.js
@@ -30,7 +30,7 @@ define([
             var that = this;
             this.on('displayed', function() {
                 this.update_titles();
-            }
+            }, this);
         },
 
         update_titles: function(titles) {

From 93ee9ea7a92927cbf8f51984a49e3880512ae654 Mon Sep 17 00:00:00 2001
From: Sylvain Corlay <scorlay@bloomberg.net>
Date: Fri, 25 Jul 2014 00:31:51 +0000
Subject: [PATCH 5/7] removing timout

---
 IPython/html/static/widgets/js/widget.js | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/IPython/html/static/widgets/js/widget.js b/IPython/html/static/widgets/js/widget.js
index 6710f0302..82397c5c0 100644
--- a/IPython/html/static/widgets/js/widget.js
+++ b/IPython/html/static/widgets/js/widget.js
@@ -409,15 +409,15 @@ define(["widgets/js/manager",
             // Public constructor
             DOMWidgetView.__super__.initialize.apply(this, arguments);
             this.on('displayed', this.show, this);
-
+            this.after_displayed(function() {
+                this.update_visible(this.model, this.model.get("visible"));
+                this.update_css(this.model, this.model.get("_css"));
+            }, this);
             this.model.on('msg:custom', this.on_msg, this);
             this.model.on('change:visible', this.update_visible, this);
             this.model.on('change:_css', this.update_css, this);
-
-            this.update_visible(this.model, this.model.get("visible"));
-            this.update_css(this.model, this.model.get("_css"));
         },
-        
+
         on_msg: function(msg) {
             // Handle DOM specific msgs.
             switch(msg.msg_type) {
@@ -434,19 +434,15 @@ define(["widgets/js/manager",
             // Add a DOM class to an element.
             this._get_selector_element(selector).addClass(class_list);
         },
-        
+
         remove_class: function (selector, class_list) {
             // Remove a DOM class from an element.
             this._get_selector_element(selector).removeClass(class_list);
         },
-    
+
         update_visible: function(model, value) {
             // Update visibility
-            //      The very first update seems to happen before the element is 
-            // finished rendering so we use setTimeout to give the element time 
-            // to render
-            var e = this.$el;
-            setTimeout(function() {e.toggle(value);},0);
+            this.$el.toggle(value);
          },
 
         update_css: function (model, css) {

From 2ca04578cf32d8a1f97cba4b78ed7429292e5d54 Mon Sep 17 00:00:00 2001
From: "sylvain.corlay" <sylvain.corlay@gmail.com>
Date: Sun, 27 Jul 2014 11:58:30 -0400
Subject: [PATCH 6/7] adding options explicitly

---
 IPython/html/static/widgets/js/widget.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/IPython/html/static/widgets/js/widget.js b/IPython/html/static/widgets/js/widget.js
index 82397c5c0..4bb24ac12 100644
--- a/IPython/html/static/widgets/js/widget.js
+++ b/IPython/html/static/widgets/js/widget.js
@@ -405,7 +405,7 @@ define(["widgets/js/manager",
 
 
     var DOMWidgetView = WidgetView.extend({
-        initialize: function () {
+        initialize: function (options) {
             // Public constructor
             DOMWidgetView.__super__.initialize.apply(this, arguments);
             this.on('displayed', this.show, this);

From c03a3eb6d226023418564312208cbb7bcc209b78 Mon Sep 17 00:00:00 2001
From: Sylvain Corlay <scorlay@bloomberg.net>
Date: Mon, 28 Jul 2014 22:22:11 +0000
Subject: [PATCH 7/7] making the use of options explicit

---
 IPython/html/static/widgets/js/widget.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/IPython/html/static/widgets/js/widget.js b/IPython/html/static/widgets/js/widget.js
index 4bb24ac12..e30345b8c 100644
--- a/IPython/html/static/widgets/js/widget.js
+++ b/IPython/html/static/widgets/js/widget.js
@@ -405,9 +405,9 @@ define(["widgets/js/manager",
 
 
     var DOMWidgetView = WidgetView.extend({
-        initialize: function (options) {
+        initialize: function (parameters) {
             // Public constructor
-            DOMWidgetView.__super__.initialize.apply(this, arguments);
+            DOMWidgetView.__super__.initialize.apply(this, [parameters]);
             this.on('displayed', this.show, this);
             this.after_displayed(function() {
                 this.update_visible(this.model, this.model.get("visible"));