##// END OF EJS Templates
Remove todo in apply update
Jonathan Frederic -
Show More
@@ -1,414 +1,413
1 //----------------------------------------------------------------------------
1 //----------------------------------------------------------------------------
2 // Copyright (C) 2013 The IPython Development Team
2 // Copyright (C) 2013 The IPython Development Team
3 //
3 //
4 // Distributed under the terms of the BSD License. The full license is in
4 // Distributed under the terms of the BSD License. The full license is in
5 // the file COPYING, distributed as part of this software.
5 // the file COPYING, distributed as part of this software.
6 //----------------------------------------------------------------------------
6 //----------------------------------------------------------------------------
7
7
8 //============================================================================
8 //============================================================================
9 // Base Widget Model and View classes
9 // Base Widget Model and View classes
10 //============================================================================
10 //============================================================================
11
11
12 /**
12 /**
13 * @module IPython
13 * @module IPython
14 * @namespace IPython
14 * @namespace IPython
15 **/
15 **/
16
16
17 define(["notebook/js/widgetmanager",
17 define(["notebook/js/widgetmanager",
18 "underscore",
18 "underscore",
19 "backbone"],
19 "backbone"],
20 function(WidgetManager, Underscore, Backbone){
20 function(WidgetManager, Underscore, Backbone){
21
21
22 var WidgetModel = Backbone.Model.extend({
22 var WidgetModel = Backbone.Model.extend({
23 constructor: function (widget_manager, model_id, comm) {
23 constructor: function (widget_manager, model_id, comm) {
24 // Construcctor
24 // Construcctor
25 //
25 //
26 // Creates a WidgetModel instance.
26 // Creates a WidgetModel instance.
27 //
27 //
28 // Parameters
28 // Parameters
29 // ----------
29 // ----------
30 // widget_manager : WidgetManager instance
30 // widget_manager : WidgetManager instance
31 // model_id : string
31 // model_id : string
32 // An ID unique to this model.
32 // An ID unique to this model.
33 // comm : Comm instance (optional)
33 // comm : Comm instance (optional)
34 this.widget_manager = widget_manager;
34 this.widget_manager = widget_manager;
35 this.pending_msgs = 0;
35 this.pending_msgs = 0;
36 this.msg_throttle = 2;
36 this.msg_throttle = 2;
37 this.msg_buffer = null;
37 this.msg_buffer = null;
38 this.key_value_lock = null;
38 this.key_value_lock = null;
39 this.id = model_id;
39 this.id = model_id;
40 this.views = [];
40 this.views = [];
41
41
42 if (comm !== undefined) {
42 if (comm !== undefined) {
43 // Remember comm associated with the model.
43 // Remember comm associated with the model.
44 this.comm = comm;
44 this.comm = comm;
45 comm.model = this;
45 comm.model = this;
46
46
47 // Hook comm messages up to model.
47 // Hook comm messages up to model.
48 comm.on_close($.proxy(this._handle_comm_closed, this));
48 comm.on_close($.proxy(this._handle_comm_closed, this));
49 comm.on_msg($.proxy(this._handle_comm_msg, this));
49 comm.on_msg($.proxy(this._handle_comm_msg, this));
50 }
50 }
51 return Backbone.Model.apply(this);
51 return Backbone.Model.apply(this);
52 },
52 },
53
53
54 send: function (content, callbacks) {
54 send: function (content, callbacks) {
55 // Send a custom msg over the comm.
55 // Send a custom msg over the comm.
56 if (this.comm !== undefined) {
56 if (this.comm !== undefined) {
57 var data = {method: 'custom', content: content};
57 var data = {method: 'custom', content: content};
58 this.comm.send(data, callbacks);
58 this.comm.send(data, callbacks);
59 }
59 }
60 },
60 },
61
61
62 _handle_comm_closed: function (msg) {
62 _handle_comm_closed: function (msg) {
63 // Handle when a widget is closed.
63 // Handle when a widget is closed.
64 this.trigger('comm:close');
64 this.trigger('comm:close');
65 delete this.comm.model; // Delete ref so GC will collect widget model.
65 delete this.comm.model; // Delete ref so GC will collect widget model.
66 delete this.comm;
66 delete this.comm;
67 delete this.model_id; // Delete id from model so widget manager cleans up.
67 delete this.model_id; // Delete id from model so widget manager cleans up.
68 // TODO: Handle deletion, like this.destroy(), and delete views, etc.
68 // TODO: Handle deletion, like this.destroy(), and delete views, etc.
69 },
69 },
70
70
71 _handle_comm_msg: function (msg) {
71 _handle_comm_msg: function (msg) {
72 // Handle incoming comm msg.
72 // Handle incoming comm msg.
73 var method = msg.content.data.method;
73 var method = msg.content.data.method;
74 switch (method) {
74 switch (method) {
75 case 'update':
75 case 'update':
76 this.apply_update(msg.content.data.state);
76 this.apply_update(msg.content.data.state);
77 break;
77 break;
78 case 'custom':
78 case 'custom':
79 this.trigger('msg:custom', msg.content.data.content);
79 this.trigger('msg:custom', msg.content.data.content);
80 break;
80 break;
81 case 'display':
81 case 'display':
82 this.widget_manager.display_view(msg, this);
82 this.widget_manager.display_view(msg, this);
83 break;
83 break;
84 }
84 }
85 },
85 },
86
86
87 apply_update: function (state) {
87 apply_update: function (state) {
88 // Handle when a widget is updated via the python side.
88 // Handle when a widget is updated via the python side.
89 for (var key in state) {
89 for (var key in state) {
90 if (state.hasOwnProperty(key)) {
90 if (state.hasOwnProperty(key)) {
91 var value = state[key];
91 var value = state[key];
92 this.key_value_lock = [key, value];
92 this.key_value_lock = [key, value];
93 try {
93 try {
94 this.set(key, this._unpack_models(value));
94 this.set(key, this._unpack_models(value));
95 } finally {
95 } finally {
96 this.key_value_lock = null;
96 this.key_value_lock = null;
97 }
97 }
98 }
98 }
99 }
99 }
100 //TODO: are there callbacks that make sense in this case? If so, attach them here as an option
101 },
100 },
102
101
103 _handle_status: function (msg, callbacks) {
102 _handle_status: function (msg, callbacks) {
104 // Handle status msgs.
103 // Handle status msgs.
105
104
106 // execution_state : ('busy', 'idle', 'starting')
105 // execution_state : ('busy', 'idle', 'starting')
107 if (this.comm !== undefined) {
106 if (this.comm !== undefined) {
108 if (msg.content.execution_state ==='idle') {
107 if (msg.content.execution_state ==='idle') {
109 // Send buffer if this message caused another message to be
108 // Send buffer if this message caused another message to be
110 // throttled.
109 // throttled.
111 if (this.msg_buffer !== null &&
110 if (this.msg_buffer !== null &&
112 this.msg_throttle === this.pending_msgs) {
111 this.msg_throttle === this.pending_msgs) {
113 var data = {method: 'backbone', sync_method: 'update', sync_data: this.msg_buffer};
112 var data = {method: 'backbone', sync_method: 'update', sync_data: this.msg_buffer};
114 this.comm.send(data, callbacks);
113 this.comm.send(data, callbacks);
115 this.msg_buffer = null;
114 this.msg_buffer = null;
116 } else {
115 } else {
117 --this.pending_msgs;
116 --this.pending_msgs;
118 }
117 }
119 }
118 }
120 }
119 }
121 },
120 },
122
121
123 callbacks: function(view) {
122 callbacks: function(view) {
124 // Create msg callbacks for a comm msg.
123 // Create msg callbacks for a comm msg.
125 var callbacks = this.widget_manager.callbacks(view);
124 var callbacks = this.widget_manager.callbacks(view);
126
125
127 if (callbacks.iopub === undefined) {
126 if (callbacks.iopub === undefined) {
128 callbacks.iopub = {};
127 callbacks.iopub = {};
129 }
128 }
130
129
131 var that = this;
130 var that = this;
132 callbacks.iopub.status = function (msg) {
131 callbacks.iopub.status = function (msg) {
133 that._handle_status(msg, callbacks);
132 that._handle_status(msg, callbacks);
134 }
133 }
135 return callbacks;
134 return callbacks;
136 },
135 },
137
136
138 sync: function (method, model, options) {
137 sync: function (method, model, options) {
139
138
140 // Make sure a comm exists.
139 // Make sure a comm exists.
141 var error = options.error || function() {
140 var error = options.error || function() {
142 console.error('Backbone sync error:', arguments);
141 console.error('Backbone sync error:', arguments);
143 }
142 }
144 if (this.comm === undefined) {
143 if (this.comm === undefined) {
145 error();
144 error();
146 return false;
145 return false;
147 }
146 }
148
147
149 // Delete any key value pairs that the back-end already knows about.
148 // Delete any key value pairs that the back-end already knows about.
150 var attrs = (method === 'patch') ? options.attrs : model.toJSON(options);
149 var attrs = (method === 'patch') ? options.attrs : model.toJSON(options);
151 if (this.key_value_lock !== null) {
150 if (this.key_value_lock !== null) {
152 var key = this.key_value_lock[0];
151 var key = this.key_value_lock[0];
153 var value = this.key_value_lock[1];
152 var value = this.key_value_lock[1];
154 if (attrs[key] === value) {
153 if (attrs[key] === value) {
155 delete attrs[key];
154 delete attrs[key];
156 }
155 }
157 }
156 }
158
157
159 // Only sync if there are attributes to send to the back-end.
158 // Only sync if there are attributes to send to the back-end.
160 if (_.size(attrs) !== 0) {
159 if (_.size(attrs) !== 0) {
161 var callbacks = options.callbacks || {};
160 var callbacks = options.callbacks || {};
162 if (this.pending_msgs >= this.msg_throttle) {
161 if (this.pending_msgs >= this.msg_throttle) {
163 // The throttle has been exceeded, buffer the current msg so
162 // The throttle has been exceeded, buffer the current msg so
164 // it can be sent once the kernel has finished processing
163 // it can be sent once the kernel has finished processing
165 // some of the existing messages.
164 // some of the existing messages.
166
165
167 // Combine updates if it is a 'patch' sync, otherwise replace updates
166 // Combine updates if it is a 'patch' sync, otherwise replace updates
168 switch (method) {
167 switch (method) {
169 case 'patch':
168 case 'patch':
170 this.msg_buffer = _.extend(this.msg_buffer || {}, attrs);
169 this.msg_buffer = _.extend(this.msg_buffer || {}, attrs);
171 break;
170 break;
172 case 'update':
171 case 'update':
173 this.msg_buffer = attrs;
172 this.msg_buffer = attrs;
174 break;
173 break;
175 default:
174 default:
176 error();
175 error();
177 return false;
176 return false;
178 }
177 }
179 this.msg_buffer_callbacks = callbacks;
178 this.msg_buffer_callbacks = callbacks;
180
179
181 } else {
180 } else {
182 // We haven't exceeded the throttle, send the message like
181 // We haven't exceeded the throttle, send the message like
183 // normal. If this is a patch operation, just send the
182 // normal. If this is a patch operation, just send the
184 // changes.
183 // changes.
185 var data = {method: 'backbone', sync_data: attrs};
184 var data = {method: 'backbone', sync_data: attrs};
186 this.comm.send(data, callbacks);
185 this.comm.send(data, callbacks);
187 this.pending_msgs++;
186 this.pending_msgs++;
188 }
187 }
189 }
188 }
190 // Since the comm is a one-way communication, assume the message
189 // Since the comm is a one-way communication, assume the message
191 // arrived. Don't call success since we don't have a model back from the server
190 // arrived. Don't call success since we don't have a model back from the server
192 // this means we miss out on the 'sync' event.
191 // this means we miss out on the 'sync' event.
193 },
192 },
194
193
195 save_changes: function(callbacks) {
194 save_changes: function(callbacks) {
196 // Push this model's state to the back-end
195 // Push this model's state to the back-end
197 //
196 //
198 // This invokes a Backbone.Sync.
197 // This invokes a Backbone.Sync.
199 this.save(this.changedAttributes(), {patch: true, callbacks: callbacks});
198 this.save(this.changedAttributes(), {patch: true, callbacks: callbacks});
200 },
199 },
201
200
202 _pack_models: function(value) {
201 _pack_models: function(value) {
203 // Replace models with model ids recursively.
202 // Replace models with model ids recursively.
204 if (value instanceof Backbone.Model) {
203 if (value instanceof Backbone.Model) {
205 return value.id;
204 return value.id;
206 } else if (value instanceof Object) {
205 } else if (value instanceof Object) {
207 var packed = {};
206 var packed = {};
208 for (var key in value) {
207 for (var key in value) {
209 packed[key] = this._pack_models(value[key]);
208 packed[key] = this._pack_models(value[key]);
210 }
209 }
211 return packed;
210 return packed;
212 } else {
211 } else {
213 return value;
212 return value;
214 }
213 }
215 },
214 },
216
215
217 _unpack_models: function(value) {
216 _unpack_models: function(value) {
218 // Replace model ids with models recursively.
217 // Replace model ids with models recursively.
219 if (value instanceof Object) {
218 if (value instanceof Object) {
220 var unpacked = {};
219 var unpacked = {};
221 for (var key in value) {
220 for (var key in value) {
222 unpacked[key] = this._unpack_models(value[key]);
221 unpacked[key] = this._unpack_models(value[key]);
223 }
222 }
224 return unpacked;
223 return unpacked;
225 } else {
224 } else {
226 var model = this.widget_manager.get_model(value);
225 var model = this.widget_manager.get_model(value);
227 if (model !== null) {
226 if (model !== null) {
228 return model;
227 return model;
229 } else {
228 } else {
230 return value;
229 return value;
231 }
230 }
232 }
231 }
233 },
232 },
234
233
235 });
234 });
236 WidgetManager.register_widget_model('WidgetModel', WidgetModel);
235 WidgetManager.register_widget_model('WidgetModel', WidgetModel);
237
236
238
237
239 var WidgetView = Backbone.View.extend({
238 var WidgetView = Backbone.View.extend({
240 initialize: function(parameters) {
239 initialize: function(parameters) {
241 // Public constructor.
240 // Public constructor.
242 this.model.on('change',this.update,this);
241 this.model.on('change',this.update,this);
243 this.options = parameters.options;
242 this.options = parameters.options;
244 this.child_views = [];
243 this.child_views = [];
245 this.model.views.push(this);
244 this.model.views.push(this);
246 },
245 },
247
246
248 update: function(){
247 update: function(){
249 // Triggered on model change.
248 // Triggered on model change.
250 //
249 //
251 // Update view to be consistent with this.model
250 // Update view to be consistent with this.model
252 },
251 },
253
252
254 create_child_view: function(child_model, options) {
253 create_child_view: function(child_model, options) {
255 // Create and return a child view.
254 // Create and return a child view.
256 //
255 //
257 // -given a model and (optionally) a view name if the view name is
256 // -given a model and (optionally) a view name if the view name is
258 // not given, it defaults to the model's default view attribute.
257 // not given, it defaults to the model's default view attribute.
259
258
260 // TODO: this is hacky, and makes the view depend on this cell attribute and widget manager behavior
259 // TODO: this is hacky, and makes the view depend on this cell attribute and widget manager behavior
261 // it would be great to have the widget manager add the cell metadata
260 // it would be great to have the widget manager add the cell metadata
262 // to the subview without having to add it here.
261 // to the subview without having to add it here.
263 options = options || {};
262 options = options || {};
264 options.cell = this.options.cell;
263 options.cell = this.options.cell;
265 var child_view = this.model.widget_manager.create_view(child_model, options);
264 var child_view = this.model.widget_manager.create_view(child_model, options);
266 this.child_views[child_model.id] = child_view;
265 this.child_views[child_model.id] = child_view;
267 return child_view;
266 return child_view;
268 },
267 },
269
268
270 delete_child_view: function(child_model, options) {
269 delete_child_view: function(child_model, options) {
271 // Delete a child view that was previously created using create_child_view.
270 // Delete a child view that was previously created using create_child_view.
272 var view = this.child_views[child_model.id];
271 var view = this.child_views[child_model.id];
273 delete this.child_views[child_model.id];
272 delete this.child_views[child_model.id];
274 view.remove();
273 view.remove();
275 },
274 },
276
275
277 do_diff: function(old_list, new_list, removed_callback, added_callback) {
276 do_diff: function(old_list, new_list, removed_callback, added_callback) {
278 // Difference a changed list and call remove and add callbacks for
277 // Difference a changed list and call remove and add callbacks for
279 // each removed and added item in the new list.
278 // each removed and added item in the new list.
280 //
279 //
281 // Parameters
280 // Parameters
282 // ----------
281 // ----------
283 // old_list : array
282 // old_list : array
284 // new_list : array
283 // new_list : array
285 // removed_callback : Callback(item)
284 // removed_callback : Callback(item)
286 // Callback that is called for each item removed.
285 // Callback that is called for each item removed.
287 // added_callback : Callback(item)
286 // added_callback : Callback(item)
288 // Callback that is called for each item added.
287 // Callback that is called for each item added.
289
288
290
289
291 // removed items
290 // removed items
292 _.each(_.difference(old_list, new_list), function(item, index, list) {
291 _.each(_.difference(old_list, new_list), function(item, index, list) {
293 removed_callback(item);
292 removed_callback(item);
294 }, this);
293 }, this);
295
294
296 // added items
295 // added items
297 _.each(_.difference(new_list, old_list), function(item, index, list) {
296 _.each(_.difference(new_list, old_list), function(item, index, list) {
298 added_callback(item);
297 added_callback(item);
299 }, this);
298 }, this);
300 },
299 },
301
300
302 callbacks: function(){
301 callbacks: function(){
303 // Create msg callbacks for a comm msg.
302 // Create msg callbacks for a comm msg.
304 return this.model.callbacks(this);
303 return this.model.callbacks(this);
305 },
304 },
306
305
307 render: function(){
306 render: function(){
308 // Render the view.
307 // Render the view.
309 //
308 //
310 // By default, this is only called the first time the view is created
309 // By default, this is only called the first time the view is created
311 },
310 },
312
311
313 send: function (content) {
312 send: function (content) {
314 // Send a custom msg associated with this view.
313 // Send a custom msg associated with this view.
315 this.model.send(content, this.callbacks());
314 this.model.send(content, this.callbacks());
316 },
315 },
317
316
318 touch: function () {
317 touch: function () {
319 this.model.save_changes(this.callbacks());
318 this.model.save_changes(this.callbacks());
320 },
319 },
321
320
322 });
321 });
323
322
324
323
325 var DOMWidgetView = WidgetView.extend({
324 var DOMWidgetView = WidgetView.extend({
326 initialize: function (options) {
325 initialize: function (options) {
327 // Public constructor
326 // Public constructor
328
327
329 // In the future we may want to make changes more granular
328 // In the future we may want to make changes more granular
330 // (e.g., trigger on visible:change).
329 // (e.g., trigger on visible:change).
331 this.model.on('change', this.update, this);
330 this.model.on('change', this.update, this);
332 this.model.on('msg:custom', this.on_msg, this);
331 this.model.on('msg:custom', this.on_msg, this);
333 DOMWidgetView.__super__.initialize.apply(this, arguments);
332 DOMWidgetView.__super__.initialize.apply(this, arguments);
334 },
333 },
335
334
336 on_msg: function(msg) {
335 on_msg: function(msg) {
337 // Handle DOM specific msgs.
336 // Handle DOM specific msgs.
338 switch(msg.msg_type) {
337 switch(msg.msg_type) {
339 case 'add_class':
338 case 'add_class':
340 this.add_class(msg.selector, msg.class_list);
339 this.add_class(msg.selector, msg.class_list);
341 break;
340 break;
342 case 'remove_class':
341 case 'remove_class':
343 this.remove_class(msg.selector, msg.class_list);
342 this.remove_class(msg.selector, msg.class_list);
344 break;
343 break;
345 }
344 }
346 },
345 },
347
346
348 add_class: function (selector, class_list) {
347 add_class: function (selector, class_list) {
349 // Add a DOM class to an element.
348 // Add a DOM class to an element.
350 this._get_selector_element(selector).addClass(class_list);
349 this._get_selector_element(selector).addClass(class_list);
351 },
350 },
352
351
353 remove_class: function (selector, class_list) {
352 remove_class: function (selector, class_list) {
354 // Remove a DOM class from an element.
353 // Remove a DOM class from an element.
355 this._get_selector_element(selector).removeClass(class_list);
354 this._get_selector_element(selector).removeClass(class_list);
356 },
355 },
357
356
358 update: function () {
357 update: function () {
359 // Update the contents of this view
358 // Update the contents of this view
360 //
359 //
361 // Called when the model is changed. The model may have been
360 // Called when the model is changed. The model may have been
362 // changed by another view or by a state update from the back-end.
361 // changed by another view or by a state update from the back-end.
363 // The very first update seems to happen before the element is
362 // The very first update seems to happen before the element is
364 // finished rendering so we use setTimeout to give the element time
363 // finished rendering so we use setTimeout to give the element time
365 // to render
364 // to render
366 var e = this.$el;
365 var e = this.$el;
367 var visible = this.model.get('visible');
366 var visible = this.model.get('visible');
368 setTimeout(function() {e.toggle(visible)},0);
367 setTimeout(function() {e.toggle(visible)},0);
369
368
370 var css = this.model.get('_css');
369 var css = this.model.get('_css');
371 if (css === undefined) {return;}
370 if (css === undefined) {return;}
372 for (var selector in css) {
371 for (var selector in css) {
373 if (css.hasOwnProperty(selector)) {
372 if (css.hasOwnProperty(selector)) {
374 // Apply the css traits to all elements that match the selector.
373 // Apply the css traits to all elements that match the selector.
375 var elements = this._get_selector_element(selector);
374 var elements = this._get_selector_element(selector);
376 if (elements.length > 0) {
375 if (elements.length > 0) {
377 var css_traits = css[selector];
376 var css_traits = css[selector];
378 for (var css_key in css_traits) {
377 for (var css_key in css_traits) {
379 if (css_traits.hasOwnProperty(css_key)) {
378 if (css_traits.hasOwnProperty(css_key)) {
380 elements.css(css_key, css_traits[css_key]);
379 elements.css(css_key, css_traits[css_key]);
381 }
380 }
382 }
381 }
383 }
382 }
384 }
383 }
385 }
384 }
386 },
385 },
387
386
388 _get_selector_element: function (selector) {
387 _get_selector_element: function (selector) {
389 // Get the elements via the css selector.
388 // Get the elements via the css selector.
390
389
391 // If the selector is blank, apply the style to the $el_to_style
390 // If the selector is blank, apply the style to the $el_to_style
392 // element. If the $el_to_style element is not defined, use apply
391 // element. If the $el_to_style element is not defined, use apply
393 // the style to the view's element.
392 // the style to the view's element.
394 var elements;
393 var elements;
395 if (selector === undefined || selector === null || selector === '') {
394 if (selector === undefined || selector === null || selector === '') {
396 if (this.$el_to_style === undefined) {
395 if (this.$el_to_style === undefined) {
397 elements = this.$el;
396 elements = this.$el;
398 } else {
397 } else {
399 elements = this.$el_to_style;
398 elements = this.$el_to_style;
400 }
399 }
401 } else {
400 } else {
402 elements = this.$el.find(selector);
401 elements = this.$el.find(selector);
403 }
402 }
404 return elements;
403 return elements;
405 },
404 },
406 });
405 });
407
406
408 IPython.WidgetModel = WidgetModel;
407 IPython.WidgetModel = WidgetModel;
409 IPython.WidgetView = WidgetView;
408 IPython.WidgetView = WidgetView;
410 IPython.DOMWidgetView = DOMWidgetView;
409 IPython.DOMWidgetView = DOMWidgetView;
411
410
412 // Pass through WidgetManager namespace.
411 // Pass through WidgetManager namespace.
413 return WidgetManager;
412 return WidgetManager;
414 });
413 });
General Comments 0
You need to be logged in to leave comments. Login now