##// END OF EJS Templates
Pass the whole message into the widget manager display_view call...
Jason Grout -
Show More
@@ -1,202 +1,204
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 // WidgetModel, WidgetView, and WidgetManager
10 10 //============================================================================
11 11 /**
12 12 * Base Widget classes
13 13 * @module IPython
14 14 * @namespace IPython
15 15 * @submodule widget
16 16 */
17 17
18 18 (function () {
19 19 "use strict";
20 20
21 21 // Use require.js 'define' method so that require.js is intelligent enough to
22 22 // syncronously load everything within this file when it is being 'required'
23 23 // elsewhere.
24 24 define(["underscore",
25 25 "backbone",
26 26 ], function (underscore, backbone) {
27 27
28 28 // Backbone.sync method must be in widgetmanager.js file instead of
29 29 // widget.js so it can be overwritten for different contexts.
30 30 Backbone.sync = function (method, model, options) {
31 31 var result = model._handle_sync(method, options);
32 32 if (options.success) {
33 33 options.success(result);
34 34 }
35 35 };
36 36
37 37 //--------------------------------------------------------------------
38 38 // WidgetManager class
39 39 //--------------------------------------------------------------------
40 40 var WidgetManager = function () {
41 41 this.comm_manager = null;
42 42 this._model_types = {}; /* Dictionary of model type names
43 43 (target_name) and model types. */
44 44 this._view_types = {}; /* Dictionary of view names and view types. */
45 45 this._models = {}; /* Dictionary of model ids and model instances */
46 46 };
47 47
48 48
49 49 WidgetManager.prototype.attach_comm_manager = function (comm_manager) {
50 50 this.comm_manager = comm_manager;
51 51
52 52 // Register already-registered widget model types with the comm manager.
53 53 for (var widget_model_name in this._model_types) {
54 54 // TODO: Should not be a for.
55 55 this.comm_manager.register_target(widget_model_name, $.proxy(this._handle_comm_open, this));
56 56 }
57 57 };
58 58
59 59
60 60 WidgetManager.prototype.register_widget_model = function (widget_model_name, widget_model_type) {
61 61 // Register the widget with the comm manager. Make sure to pass this object's context
62 62 // in so `this` works in the call back.
63 63 if (this.comm_manager !== null) {
64 64 this.comm_manager.register_target(widget_model_name, $.proxy(this._handle_comm_open, this));
65 65 }
66 66 this._model_types[widget_model_name] = widget_model_type;
67 67 };
68 68
69 69
70 70 WidgetManager.prototype.register_widget_view = function (widget_view_name, widget_view_type) {
71 71 this._view_types[widget_view_name] = widget_view_type;
72 72 };
73 73
74 74
75 WidgetManager.prototype.display_view = function(msg_id, model) {
76 var cell = this.get_msg_cell(msg_id);
75 WidgetManager.prototype.display_view = function(msg, model) {
76 var cell = this.get_msg_cell(msg.parent_header.msg_id);
77 77 if (cell === null) {
78 78 console.log("Could not determine where the display" +
79 79 " message was from. Widget will not be displayed");
80 80 } else {
81 81 var view = this.create_view(model, {cell: cell});
82 if (view !== undefined
83 && cell.widget_subarea !== undefined
82 if (view === undefined) {
83 console.error("View creation failed", model);
84 }
85 if (cell.widget_subarea !== undefined
84 86 && cell.widget_subarea !== null) {
85 87
86 88 cell.widget_area.show();
87 89 cell.widget_subarea.append(view.$el);
88 90 }
89 91 }
90 92 },
91 93
92 94
93 95 WidgetManager.prototype.create_view = function(model, options) {
94 96 var view_name = model.get('view_name');
95 97 var ViewType = this._view_types[view_name];
96 98 if (ViewType !== undefined && ViewType !== null) {
97 99 var parameters = {model: model, options: options};
98 100 var view = new ViewType(parameters);
99 101 view.render();
100 102 IPython.keyboard_manager.register_events(view.$el);
101 103 model.views.push(view);
102 104 model.on('destroy', view.remove, view);
103 105 return view;
104 106 }
105 107 },
106 108
107 109
108 110 WidgetManager.prototype.get_msg_cell = function (msg_id) {
109 111 var cell = null;
110 112 // First, check to see if the msg was triggered by cell execution.
111 113 if (IPython.notebook !== undefined && IPython.notebook !== null) {
112 114 cell = IPython.notebook.get_msg_cell(msg_id);
113 115 }
114 116 if (cell !== null) {
115 117 return cell
116 118 }
117 119 // Second, check to see if a get_cell callback was defined
118 120 // for the message. get_cell callbacks are registered for
119 121 // widget messages, so this block is actually checking to see if the
120 122 // message was triggered by a widget.
121 123 var kernel = null;
122 124 if (this.comm_manager !== null) {
123 125 kernel = this.comm_manager.kernel;
124 126 }
125 127 if (kernel !== undefined && kernel !== null) {
126 128 var callbacks = kernel.get_callbacks_for_msg(msg_id);
127 129 if (callbacks !== undefined &&
128 130 callbacks.iopub !== undefined &&
129 131 callbacks.iopub.get_cell !== undefined) {
130 132
131 133 return callbacks.iopub.get_cell();
132 134 }
133 135 }
134 136
135 137 // Not triggered by a cell or widget (no get_cell callback
136 138 // exists).
137 139 return null;
138 140 };
139 141
140 142 WidgetManager.prototype.callbacks = function (view) {
141 143 // callback handlers specific a view
142 144 var callbacks = {};
143 145 var cell = view.options.cell;
144 146 if (cell !== null) {
145 147 // Try to get output handlers
146 148 var handle_output = null;
147 149 var handle_clear_output = null;
148 150 if (cell.output_area !== undefined && cell.output_area !== null) {
149 151 handle_output = $.proxy(cell.output_area.handle_output, cell.output_area);
150 152 handle_clear_output = $.proxy(cell.output_area.handle_clear_output, cell.output_area);
151 153 }
152 154
153 155 // Create callback dict using what is known
154 156 var that = this;
155 157 callbacks = {
156 158 iopub : {
157 159 output : handle_output,
158 160 clear_output : handle_clear_output,
159 161
160 162 status : function (msg) {
161 163 view.model._handle_status(msg, that.callbacks(view));
162 164 },
163 165
164 166 // Special function only registered by widget messages.
165 167 // Allows us to get the cell for a message so we know
166 168 // where to add widgets if the code requires it.
167 169 get_cell : function () {
168 170 return cell;
169 171 },
170 172 },
171 173 };
172 174 }
173 175 return callbacks;
174 176 };
175 177
176 178
177 179 WidgetManager.prototype.get_model = function (model_id) {
178 180 var model = this._models[model_id];
179 181 if (model !== undefined && model.id == model_id) {
180 182 return model;
181 183 }
182 184 return null;
183 185 };
184 186
185 187
186 188 WidgetManager.prototype._handle_comm_open = function (comm, msg) {
187 189 var widget_type_name = msg.content.target_name;
188 190 var widget_model = new this._model_types[widget_type_name](this, comm.comm_id, comm);
189 191 this._models[comm.comm_id] = widget_model; // comm_id == model_id
190 192 };
191 193
192 194 //--------------------------------------------------------------------
193 195 // Init code
194 196 //--------------------------------------------------------------------
195 197 IPython.WidgetManager = WidgetManager;
196 198 if (IPython.widget_manager === undefined || IPython.widget_manager === null) {
197 199 IPython.widget_manager = new WidgetManager();
198 200 }
199 201
200 202 return IPython.widget_manager;
201 203 });
202 204 }());
@@ -1,393 +1,393
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(widget_manager, 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', 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.custom_content);
80 80 break;
81 81 case 'display':
82 this.widget_manager.display_view(msg.parent_header.msg_id, this);
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 100 //TODO: are there callbacks that make sense in this case? If so, attach them here as an option
101 101 this.save();
102 102 },
103 103
104 104 _handle_status: function (msg, callbacks) {
105 105 // Handle status msgs.
106 106
107 107 // execution_state : ('busy', 'idle', 'starting')
108 108 if (this.comm !== undefined) {
109 109 if (msg.content.execution_state ==='idle') {
110 110 // Send buffer if this message caused another message to be
111 111 // throttled.
112 112 if (this.msg_buffer !== null &&
113 113 this.msg_throttle === this.pending_msgs) {
114 114 var data = {method: 'backbone', sync_method: 'update', sync_data: this.msg_buffer};
115 115 this.comm.send(data, callbacks);
116 116 this.msg_buffer = null;
117 117 } else {
118 118 --this.pending_msgs;
119 119 }
120 120 }
121 121 }
122 122 },
123 123
124 124 _handle_sync: function (method, options) {
125 125 // Custom syncronization logic.
126 126 var model_json = this.toJSON();
127 127 var attr;
128 128
129 129 // Only send updated state if the state hasn't been changed
130 130 // during an update.
131 131 if (this.comm !== undefined) {
132 132 if (this.pending_msgs >= this.msg_throttle) {
133 133 // The throttle has been exceeded, buffer the current msg so
134 134 // it can be sent once the kernel has finished processing
135 135 // some of the existing messages.
136 136 if (this.msg_buffer === null) {
137 137 this.msg_buffer = $.extend({}, model_json); // Copy
138 138 }
139 139 for (attr in options.attrs) {
140 140 var value = this._pack_models(options.attrs[attr]);
141 141 if (this.key_value_lock === null || attr !== this.key_value_lock[0] || value !== this.key_value_lock[1]) {
142 142 this.msg_buffer[attr] = value;
143 143 }
144 144 }
145 145
146 146 } else {
147 147 // We haven't exceeded the throttle, send the message like
148 148 // normal. If this is a patch operation, just send the
149 149 // changes.
150 150 var send_json = model_json;
151 151 send_json = {};
152 152 for (attr in options.attrs) {
153 153 var value = this._pack_models(options.attrs[attr]);
154 154 if (this.key_value_lock === null || attr !== this.key_value_lock[0] || value !== this.key_value_lock[1]) {
155 155 send_json[attr] = value;
156 156 }
157 157 }
158 158
159 159 var is_empty = true;
160 160 for (var prop in send_json) if (send_json.hasOwnProperty(prop)) is_empty = false;
161 161 if (!is_empty) {
162 162 ++this.pending_msgs;
163 163 var data = {method: 'backbone', sync_data: send_json};
164 164 this.comm.send(data, options.callbacks);
165 165 }
166 166 }
167 167 }
168 168
169 169 // Since the comm is a one-way communication, assume the message
170 170 // arrived.
171 171 return model_json;
172 172 },
173 173
174 174 push: function(callbacks) {
175 175 // Push this model's state to the back-end
176 176 //
177 177 // This invokes a Backbone.Sync.
178 178 this.save(this.changedAttributes(), {patch: true, callbacks: callbacks});
179 179 },
180 180
181 181 _pack_models: function(value) {
182 182 // Replace models with model ids recursively.
183 183 if (value instanceof Backbone.Model) {
184 184 return value.id;
185 185 } else if (value instanceof Object) {
186 186 var packed = {};
187 187 for (var key in value) {
188 188 packed[key] = this._pack_models(value[key]);
189 189 }
190 190 return packed;
191 191 } else {
192 192 return value;
193 193 }
194 194 },
195 195
196 196 _unpack_models: function(value) {
197 197 // Replace model ids with models recursively.
198 198 if (value instanceof Object) {
199 199 var unpacked = {};
200 200 for (var key in value) {
201 201 unpacked[key] = this._unpack_models(value[key]);
202 202 }
203 203 return unpacked;
204 204 } else {
205 205 var model = this.widget_manager.get_model(value);
206 206 if (model !== null) {
207 207 return model;
208 208 } else {
209 209 return value;
210 210 }
211 211 }
212 212 },
213 213
214 214 });
215 215 widget_manager.register_widget_model('WidgetModel', WidgetModel);
216 216
217 217
218 218 var WidgetView = Backbone.View.extend({
219 219 initialize: function(parameters) {
220 220 // Public constructor.
221 221 this.model.on('change',this.update,this);
222 222 this.options = parameters.options;
223 223 this.child_views = [];
224 224 this.model.views.push(this);
225 225 },
226 226
227 227 update: function(){
228 228 // Triggered on model change.
229 229 //
230 230 // Update view to be consistent with this.model
231 231 },
232 232
233 233 create_child_view: function(child_model, options) {
234 234 // Create and return a child view.
235 235 //
236 236 // -given a model and (optionally) a view name if the view name is
237 237 // not given, it defaults to the model's default view attribute.
238 238
239 239 // TODO: this is hacky, and makes the view depend on this cell attribute and widget manager behavior
240 240 // it would be great to have the widget manager add the cell metadata
241 241 // to the subview without having to add it here.
242 242 options = options || {};
243 243 options.cell = this.options.cell;
244 244 var child_view = this.model.widget_manager.create_view(child_model, options);
245 245 this.child_views[child_model.id] = child_view;
246 246 return child_view;
247 247 },
248 248
249 249 delete_child_view: function(child_model, options) {
250 250 // Delete a child view that was previously created using create_child_view.
251 251 var view = this.child_views[child_model.id];
252 252 delete this.child_views[child_model.id];
253 253 view.remove();
254 254 },
255 255
256 256 do_diff: function(old_list, new_list, removed_callback, added_callback) {
257 257 // Difference a changed list and call remove and add callbacks for
258 258 // each removed and added item in the new list.
259 259 //
260 260 // Parameters
261 261 // ----------
262 262 // old_list : array
263 263 // new_list : array
264 264 // removed_callback : Callback(item)
265 265 // Callback that is called for each item removed.
266 266 // added_callback : Callback(item)
267 267 // Callback that is called for each item added.
268 268
269 269
270 270 // removed items
271 271 _.each(_.difference(old_list, new_list), function(item, index, list) {
272 272 removed_callback(item);
273 273 }, this);
274 274
275 275 // added items
276 276 _.each(_.difference(new_list, old_list), function(item, index, list) {
277 277 added_callback(item);
278 278 }, this);
279 279 },
280 280
281 281 callbacks: function(){
282 282 // Create msg callbacks for a comm msg.
283 283 return this.model.widget_manager.callbacks(this);
284 284 },
285 285
286 286 render: function(){
287 287 // Render the view.
288 288 //
289 289 // By default, this is only called the first time the view is created
290 290 },
291 291
292 292 send: function (content) {
293 293 // Send a custom msg associated with this view.
294 294 this.model.send(content, this.callbacks());
295 295 },
296 296
297 297 touch: function () {
298 298 this.model.push(this.callbacks());
299 299 },
300 300
301 301 });
302 302
303 303
304 304 var DOMWidgetView = WidgetView.extend({
305 305 initialize: function (options) {
306 306 // Public constructor
307 307
308 308 // In the future we may want to make changes more granular
309 309 // (e.g., trigger on visible:change).
310 310 this.model.on('change', this.update, this);
311 311 this.model.on('msg:custom', this.on_msg, this);
312 312 DOMWidgetView.__super__.initialize.apply(this, arguments);
313 313 },
314 314
315 315 on_msg: function(msg) {
316 316 // Handle DOM specific msgs.
317 317 switch(msg.msg_type) {
318 318 case 'add_class':
319 319 this.add_class(msg.selector, msg.class_list);
320 320 break;
321 321 case 'remove_class':
322 322 this.remove_class(msg.selector, msg.class_list);
323 323 break;
324 324 }
325 325 },
326 326
327 327 add_class: function (selector, class_list) {
328 328 // Add a DOM class to an element.
329 329 this._get_selector_element(selector).addClass(class_list);
330 330 },
331 331
332 332 remove_class: function (selector, class_list) {
333 333 // Remove a DOM class from an element.
334 334 this._get_selector_element(selector).removeClass(class_list);
335 335 },
336 336
337 337 update: function () {
338 338 // Update the contents of this view
339 339 //
340 340 // Called when the model is changed. The model may have been
341 341 // changed by another view or by a state update from the back-end.
342 342 // The very first update seems to happen before the element is
343 343 // finished rendering so we use setTimeout to give the element time
344 344 // to render
345 345 var e = this.$el;
346 346 var visible = this.model.get('visible');
347 347 setTimeout(function() {e.toggle(visible)},0);
348 348
349 349 var css = this.model.get('_css');
350 350 if (css === undefined) {return;}
351 351 for (var selector in css) {
352 352 if (css.hasOwnProperty(selector)) {
353 353 // Apply the css traits to all elements that match the selector.
354 354 var elements = this._get_selector_element(selector);
355 355 if (elements.length > 0) {
356 356 var css_traits = css[selector];
357 357 for (var css_key in css_traits) {
358 358 if (css_traits.hasOwnProperty(css_key)) {
359 359 elements.css(css_key, css_traits[css_key]);
360 360 }
361 361 }
362 362 }
363 363 }
364 364 }
365 365 },
366 366
367 367 _get_selector_element: function (selector) {
368 368 // Get the elements via the css selector.
369 369
370 370 // If the selector is blank, apply the style to the $el_to_style
371 371 // element. If the $el_to_style element is not defined, use apply
372 372 // the style to the view's element.
373 373 var elements;
374 374 if (selector === undefined || selector === null || selector === '') {
375 375 if (this.$el_to_style === undefined) {
376 376 elements = this.$el;
377 377 } else {
378 378 elements = this.$el_to_style;
379 379 }
380 380 } else {
381 381 elements = this.$el.find(selector);
382 382 }
383 383 return elements;
384 384 },
385 385 });
386 386
387 387 IPython.WidgetModel = WidgetModel;
388 388 IPython.WidgetView = WidgetView;
389 389 IPython.DOMWidgetView = DOMWidgetView;
390 390
391 391 // Pass through widget_manager instance (probably not a good practice).
392 392 return widget_manager;
393 393 });
General Comments 0
You need to be logged in to leave comments. Login now