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