Show More
@@ -1,483 +1,485 b'' | |||||
1 | // Copyright (c) IPython Development Team. |
|
1 | // Copyright (c) IPython Development Team. | |
2 | // Distributed under the terms of the Modified BSD License. |
|
2 | // Distributed under the terms of the Modified BSD License. | |
3 |
|
3 | |||
4 | define([ |
|
4 | define([ | |
5 | "underscore", |
|
5 | "underscore", | |
6 | "backbone", |
|
6 | "backbone", | |
7 | "jquery", |
|
7 | "jquery", | |
8 | "base/js/utils", |
|
8 | "base/js/utils", | |
9 | "base/js/namespace", |
|
9 | "base/js/namespace", | |
10 | "services/kernels/comm" |
|
10 | "services/kernels/comm" | |
11 | ], function (_, Backbone, $, utils, IPython, comm) { |
|
11 | ], function (_, Backbone, $, utils, IPython, comm) { | |
12 | "use strict"; |
|
12 | "use strict"; | |
13 | //-------------------------------------------------------------------- |
|
13 | //-------------------------------------------------------------------- | |
14 | // WidgetManager class |
|
14 | // WidgetManager class | |
15 | //-------------------------------------------------------------------- |
|
15 | //-------------------------------------------------------------------- | |
16 | var WidgetManager = function (comm_manager, notebook) { |
|
16 | var WidgetManager = function (comm_manager, notebook) { | |
17 | /** |
|
17 | /** | |
18 | * Public constructor |
|
18 | * Public constructor | |
19 | */ |
|
19 | */ | |
20 | WidgetManager._managers.push(this); |
|
20 | WidgetManager._managers.push(this); | |
21 |
|
21 | |||
22 | // Attach a comm manager to the |
|
22 | // Attach a comm manager to the | |
23 | this.keyboard_manager = notebook.keyboard_manager; |
|
23 | this.keyboard_manager = notebook.keyboard_manager; | |
24 | this.notebook = notebook; |
|
24 | this.notebook = notebook; | |
25 | this.comm_manager = comm_manager; |
|
25 | this.comm_manager = comm_manager; | |
26 | this.comm_target_name = 'ipython.widget'; |
|
26 | this.comm_target_name = 'ipython.widget'; | |
27 | this._models = {}; /* Dictionary of model ids and model instance promises */ |
|
27 | this._models = {}; /* Dictionary of model ids and model instance promises */ | |
28 |
|
28 | |||
29 | // Register with the comm manager. |
|
29 | // Register with the comm manager. | |
30 | this.comm_manager.register_target(this.comm_target_name, $.proxy(this._handle_comm_open, this)); |
|
30 | this.comm_manager.register_target(this.comm_target_name, $.proxy(this._handle_comm_open, this)); | |
31 |
|
31 | |||
32 | // Load the initial state of the widget manager if a load callback was |
|
32 | // Load the initial state of the widget manager if a load callback was | |
33 | // registered. |
|
33 | // registered. | |
34 | var that = this; |
|
34 | var that = this; | |
35 | if (WidgetManager._load_callback) { |
|
35 | if (WidgetManager._load_callback) { | |
36 | Promise.resolve(WidgetManager._load_callback.call(this)).then(function(state) { |
|
36 | Promise.resolve(WidgetManager._load_callback.call(this)).then(function(state) { | |
37 | that.set_state(state); |
|
37 | that.set_state(state); | |
38 | }).catch(utils.reject('Error loading widget manager state', true)); |
|
38 | }).catch(utils.reject('Error loading widget manager state', true)); | |
39 | } |
|
39 | } | |
40 |
|
40 | |||
41 | // Setup state saving code. |
|
41 | // Setup state saving code. | |
42 | this.notebook.events.on('before_save.Notebook', function() { |
|
42 | this.notebook.events.on('before_save.Notebook', function() { | |
43 | var save_callback = WidgetManager._save_callback; |
|
43 | var save_callback = WidgetManager._save_callback; | |
44 | var options = WidgetManager._get_state_options; |
|
44 | var options = WidgetManager._get_state_options; | |
45 | if (save_callback) { |
|
45 | if (save_callback) { | |
46 | that.get_state(options).then(function(state) { |
|
46 | that.get_state(options).then(function(state) { | |
47 | save_callback.call(that, state); |
|
47 | save_callback.call(that, state); | |
48 | }).catch(utils.reject('Could not call widget save state callback.', true)); |
|
48 | }).catch(utils.reject('Could not call widget save state callback.', true)); | |
49 | } |
|
49 | } | |
50 | }); |
|
50 | }); | |
51 | }; |
|
51 | }; | |
52 |
|
52 | |||
53 | //-------------------------------------------------------------------- |
|
53 | //-------------------------------------------------------------------- | |
54 | // Class level |
|
54 | // Class level | |
55 | //-------------------------------------------------------------------- |
|
55 | //-------------------------------------------------------------------- | |
56 | WidgetManager._model_types = {}; /* Dictionary of model type names (target_name) and model types. */ |
|
56 | WidgetManager._model_types = {}; /* Dictionary of model type names (target_name) and model types. */ | |
57 | WidgetManager._view_types = {}; /* Dictionary of view names and view types. */ |
|
57 | WidgetManager._view_types = {}; /* Dictionary of view names and view types. */ | |
58 | WidgetManager._managers = []; /* List of widget managers */ |
|
58 | WidgetManager._managers = []; /* List of widget managers */ | |
59 | WidgetManager._load_callback = null; |
|
59 | WidgetManager._load_callback = null; | |
60 | WidgetManager._save_callback = null; |
|
60 | WidgetManager._save_callback = null; | |
61 |
|
61 | |||
62 | WidgetManager.register_widget_model = function (model_name, model_type) { |
|
62 | WidgetManager.register_widget_model = function (model_name, model_type) { | |
63 | /** |
|
63 | /** | |
64 | * Registers a widget model by name. |
|
64 | * Registers a widget model by name. | |
65 | */ |
|
65 | */ | |
66 | WidgetManager._model_types[model_name] = model_type; |
|
66 | WidgetManager._model_types[model_name] = model_type; | |
67 | }; |
|
67 | }; | |
68 |
|
68 | |||
69 | WidgetManager.register_widget_view = function (view_name, view_type) { |
|
69 | WidgetManager.register_widget_view = function (view_name, view_type) { | |
70 | /** |
|
70 | /** | |
71 | * Registers a widget view by name. |
|
71 | * Registers a widget view by name. | |
72 | */ |
|
72 | */ | |
73 | WidgetManager._view_types[view_name] = view_type; |
|
73 | WidgetManager._view_types[view_name] = view_type; | |
74 | }; |
|
74 | }; | |
75 |
|
75 | |||
76 | WidgetManager.set_state_callbacks = function (load_callback, save_callback, options) { |
|
76 | WidgetManager.set_state_callbacks = function (load_callback, save_callback, options) { | |
77 | /** |
|
77 | /** | |
78 | * Registers callbacks for widget state persistence. |
|
78 | * Registers callbacks for widget state persistence. | |
79 | * |
|
79 | * | |
80 | * Parameters |
|
80 | * Parameters | |
81 | * ---------- |
|
81 | * ---------- | |
82 | * load_callback: function() |
|
82 | * load_callback: function() | |
83 | * function that is called when the widget manager state should be |
|
83 | * function that is called when the widget manager state should be | |
84 | * loaded. This function should return a promise for the widget |
|
84 | * loaded. This function should return a promise for the widget | |
85 | * manager state. An empty state is an empty dictionary `{}`. |
|
85 | * manager state. An empty state is an empty dictionary `{}`. | |
86 | * save_callback: function(state as dictionary) |
|
86 | * save_callback: function(state as dictionary) | |
87 | * function that is called when the notebook is saved or autosaved. |
|
87 | * function that is called when the notebook is saved or autosaved. | |
88 | * The current state of the widget manager is passed in as the first |
|
88 | * The current state of the widget manager is passed in as the first | |
89 | * argument. |
|
89 | * argument. | |
90 | */ |
|
90 | */ | |
91 | WidgetManager._load_callback = load_callback; |
|
91 | WidgetManager._load_callback = load_callback; | |
92 | WidgetManager._save_callback = save_callback; |
|
92 | WidgetManager._save_callback = save_callback; | |
93 | WidgetManager._get_state_options = options; |
|
93 | WidgetManager._get_state_options = options; | |
94 |
|
94 | |||
95 | // Use the load callback to immediately load widget states. |
|
95 | // Use the load callback to immediately load widget states. | |
96 | WidgetManager._managers.forEach(function(manager) { |
|
96 | WidgetManager._managers.forEach(function(manager) { | |
97 | if (load_callback) { |
|
97 | if (load_callback) { | |
98 | Promise.resolve(load_callback.call(manager)).then(function(state) { |
|
98 | Promise.resolve(load_callback.call(manager)).then(function(state) { | |
99 | manager.set_state(state); |
|
99 | manager.set_state(state); | |
100 | }).catch(utils.reject('Error loading widget manager state', true)); |
|
100 | }).catch(utils.reject('Error loading widget manager state', true)); | |
101 | } |
|
101 | } | |
102 | }); |
|
102 | }); | |
103 | }; |
|
103 | }; | |
104 |
|
104 | |||
105 | // Use local storage to persist widgets across page refresh by default. |
|
105 | // Use local storage to persist widgets across page refresh by default. | |
106 | // LocalStorage is per domain, so we need to explicitly set the URL |
|
106 | // LocalStorage is per domain, so we need to explicitly set the URL | |
107 | // that the widgets are associated with so they don't show on other |
|
107 | // that the widgets are associated with so they don't show on other | |
108 | // pages hosted by the noteboook server. |
|
108 | // pages hosted by the noteboook server. | |
109 | var url = [window.location.protocol, '//', window.location.host, window.location.pathname].join(''); |
|
109 | var url = [window.location.protocol, '//', window.location.host, window.location.pathname].join(''); | |
110 | var key = 'widgets:' + url; |
|
110 | var key = 'widgets:' + url; | |
111 | WidgetManager.set_state_callbacks(function() { |
|
111 | WidgetManager.set_state_callbacks(function() { | |
112 | if (localStorage[key]) { |
|
112 | if (localStorage[key]) { | |
113 | return JSON.parse(localStorage[key]); |
|
113 | return JSON.parse(localStorage[key]); | |
114 | } |
|
114 | } | |
115 | return {}; |
|
115 | return {}; | |
116 | }, function(state) { |
|
116 | }, function(state) { | |
117 | localStorage[key] = JSON.stringify(state); |
|
117 | localStorage[key] = JSON.stringify(state); | |
118 | }); |
|
118 | }); | |
119 |
|
119 | |||
120 | //-------------------------------------------------------------------- |
|
120 | //-------------------------------------------------------------------- | |
121 | // Instance level |
|
121 | // Instance level | |
122 | //-------------------------------------------------------------------- |
|
122 | //-------------------------------------------------------------------- | |
123 | WidgetManager.prototype.display_view = function(msg, model) { |
|
123 | WidgetManager.prototype.display_view = function(msg, model) { | |
124 | /** |
|
124 | /** | |
125 | * Displays a view for a particular model. |
|
125 | * Displays a view for a particular model. | |
126 | */ |
|
126 | */ | |
127 | var cell = this.get_msg_cell(msg.parent_header.msg_id); |
|
127 | var cell = this.get_msg_cell(msg.parent_header.msg_id); | |
128 | if (cell === null) { |
|
128 | if (cell === null) { | |
129 | return Promise.reject(new Error("Could not determine where the display" + |
|
129 | return Promise.reject(new Error("Could not determine where the display" + | |
130 | " message was from. Widget will not be displayed")); |
|
130 | " message was from. Widget will not be displayed")); | |
131 | } else { |
|
131 | } else { | |
132 | return this.display_view_in_cell(cell, model) |
|
132 | return this.display_view_in_cell(cell, model) | |
133 | .catch(utils.reject('Could not display view', true)); |
|
133 | .catch(utils.reject('Could not display view', true)); | |
134 | } |
|
134 | } | |
135 | }; |
|
135 | }; | |
136 |
|
136 | |||
137 | WidgetManager.prototype.display_view_in_cell = function(cell, model) { |
|
137 | WidgetManager.prototype.display_view_in_cell = function(cell, model) { | |
138 | // Displays a view in a cell. |
|
138 | // Displays a view in a cell. | |
139 | if (cell.display_widget_view) { |
|
139 | if (cell.display_widget_view) { | |
140 | var that = this; |
|
140 | var that = this; | |
141 | return cell.display_widget_view(this.create_view(model, { |
|
141 | return cell.display_widget_view(this.create_view(model, { | |
142 | cell: cell, |
|
142 | cell: cell, | |
143 | // Only set cell_index when view is displayed as directly. |
|
143 | // Only set cell_index when view is displayed as directly. | |
144 | cell_index: that.notebook.find_cell_index(cell), |
|
144 | cell_index: that.notebook.find_cell_index(cell), | |
145 | })).then(function(view) { |
|
145 | })).then(function(view) { | |
146 | that._handle_display_view(view); |
|
146 | that._handle_display_view(view); | |
147 | view.trigger('displayed'); |
|
147 | view.trigger('displayed'); | |
148 | return view; |
|
148 | return view; | |
149 | }).catch(utils.reject('Could not create or display view', true)); |
|
149 | }).catch(utils.reject('Could not create or display view', true)); | |
150 | } else { |
|
150 | } else { | |
151 | return Promise.reject(new Error('Cell does not have a `display_widget_view` method')); |
|
151 | return Promise.reject(new Error('Cell does not have a `display_widget_view` method')); | |
152 | } |
|
152 | } | |
153 | }; |
|
153 | }; | |
154 |
|
154 | |||
155 | WidgetManager.prototype._handle_display_view = function (view) { |
|
155 | WidgetManager.prototype._handle_display_view = function (view) { | |
156 | /** |
|
156 | /** | |
157 | * Have the IPython keyboard manager disable its event |
|
157 | * Have the IPython keyboard manager disable its event | |
158 | * handling so the widget can capture keyboard input. |
|
158 | * handling so the widget can capture keyboard input. | |
159 | * Note, this is only done on the outer most widgets. |
|
159 | * Note, this is only done on the outer most widgets. | |
160 | */ |
|
160 | */ | |
161 | if (this.keyboard_manager) { |
|
161 | if (this.keyboard_manager) { | |
162 | this.keyboard_manager.register_events(view.$el); |
|
162 | this.keyboard_manager.register_events(view.$el); | |
163 |
|
163 | |||
164 | if (view.additional_elements) { |
|
164 | if (view.additional_elements) { | |
165 | for (var i = 0; i < view.additional_elements.length; i++) { |
|
165 | for (var i = 0; i < view.additional_elements.length; i++) { | |
166 | this.keyboard_manager.register_events(view.additional_elements[i]); |
|
166 | this.keyboard_manager.register_events(view.additional_elements[i]); | |
167 | } |
|
167 | } | |
168 | } |
|
168 | } | |
169 | } |
|
169 | } | |
170 | }; |
|
170 | }; | |
171 |
|
171 | |||
172 | WidgetManager.prototype.create_view = function(model, options) { |
|
172 | WidgetManager.prototype.create_view = function(model, options) { | |
173 | /** |
|
173 | /** | |
174 | * Creates a promise for a view of a given model |
|
174 | * Creates a promise for a view of a given model | |
175 | * |
|
175 | * | |
176 | * Make sure the view creation is not out of order with |
|
176 | * Make sure the view creation is not out of order with | |
177 | * any state updates. |
|
177 | * any state updates. | |
178 | */ |
|
178 | */ | |
179 | model.state_change = model.state_change.then(function() { |
|
179 | model.state_change = model.state_change.then(function() { | |
180 |
|
180 | |||
181 | return utils.load_class(model.get('_view_name'), model.get('_view_module'), |
|
181 | return utils.load_class(model.get('_view_name'), model.get('_view_module'), | |
182 | WidgetManager._view_types).then(function(ViewType) { |
|
182 | WidgetManager._view_types).then(function(ViewType) { | |
183 |
|
183 | |||
184 | // If a view is passed into the method, use that view's cell as |
|
184 | // If a view is passed into the method, use that view's cell as | |
185 | // the cell for the view that is created. |
|
185 | // the cell for the view that is created. | |
186 | options = options || {}; |
|
186 | options = options || {}; | |
187 | if (options.parent !== undefined) { |
|
187 | if (options.parent !== undefined) { | |
188 | options.cell = options.parent.options.cell; |
|
188 | options.cell = options.parent.options.cell; | |
189 | } |
|
189 | } | |
190 | // Create and render the view... |
|
190 | // Create and render the view... | |
191 | var parameters = {model: model, options: options}; |
|
191 | var parameters = {model: model, options: options}; | |
192 | var view = new ViewType(parameters); |
|
192 | var view = new ViewType(parameters); | |
193 | view.listenTo(model, 'destroy', view.remove); |
|
193 | view.listenTo(model, 'destroy', view.remove); | |
194 | return Promise.resolve(view.render()).then(function() {return view;}); |
|
194 | return Promise.resolve(view.render()).then(function() {return view;}); | |
195 | }).catch(utils.reject("Couldn't create a view for model id '" + String(model.id) + "'", true)); |
|
195 | }).catch(utils.reject("Couldn't create a view for model id '" + String(model.id) + "'", true)); | |
196 | }); |
|
196 | }); | |
197 | var id = utils.uuid(); |
|
197 | var id = utils.uuid(); | |
198 | model.views[id] = model.state_change; |
|
198 | model.views[id] = model.state_change; | |
199 | model.state_change.then(function(view) { |
|
199 | model.state_change.then(function(view) { | |
200 | view.once('remove', function() { |
|
200 | view.once('remove', function() { | |
201 | delete view.model.views[id]; |
|
201 | delete view.model.views[id]; | |
202 | }, this); |
|
202 | }, this); | |
203 | }); |
|
203 | }); | |
204 | return model.state_change; |
|
204 | return model.state_change; | |
205 | }; |
|
205 | }; | |
206 |
|
206 | |||
207 | WidgetManager.prototype.get_msg_cell = function (msg_id) { |
|
207 | WidgetManager.prototype.get_msg_cell = function (msg_id) { | |
208 | var cell = null; |
|
208 | var cell = null; | |
209 | // First, check to see if the msg was triggered by cell execution. |
|
209 | // First, check to see if the msg was triggered by cell execution. | |
210 | if (this.notebook) { |
|
210 | if (this.notebook) { | |
211 | cell = this.notebook.get_msg_cell(msg_id); |
|
211 | cell = this.notebook.get_msg_cell(msg_id); | |
212 | } |
|
212 | } | |
213 | if (cell !== null) { |
|
213 | if (cell !== null) { | |
214 | return cell; |
|
214 | return cell; | |
215 | } |
|
215 | } | |
216 | // Second, check to see if a get_cell callback was defined |
|
216 | // Second, check to see if a get_cell callback was defined | |
217 | // for the message. get_cell callbacks are registered for |
|
217 | // for the message. get_cell callbacks are registered for | |
218 | // widget messages, so this block is actually checking to see if the |
|
218 | // widget messages, so this block is actually checking to see if the | |
219 | // message was triggered by a widget. |
|
219 | // message was triggered by a widget. | |
220 | var kernel = this.comm_manager.kernel; |
|
220 | var kernel = this.comm_manager.kernel; | |
221 | if (kernel) { |
|
221 | if (kernel) { | |
222 | var callbacks = kernel.get_callbacks_for_msg(msg_id); |
|
222 | var callbacks = kernel.get_callbacks_for_msg(msg_id); | |
223 | if (callbacks && callbacks.iopub && |
|
223 | if (callbacks && callbacks.iopub && | |
224 | callbacks.iopub.get_cell !== undefined) { |
|
224 | callbacks.iopub.get_cell !== undefined) { | |
225 | return callbacks.iopub.get_cell(); |
|
225 | return callbacks.iopub.get_cell(); | |
226 | } |
|
226 | } | |
227 | } |
|
227 | } | |
228 |
|
228 | |||
229 | // Not triggered by a cell or widget (no get_cell callback |
|
229 | // Not triggered by a cell or widget (no get_cell callback | |
230 | // exists). |
|
230 | // exists). | |
231 | return null; |
|
231 | return null; | |
232 | }; |
|
232 | }; | |
233 |
|
233 | |||
234 | WidgetManager.prototype.callbacks = function (view) { |
|
234 | WidgetManager.prototype.callbacks = function (view) { | |
235 | /** |
|
235 | /** | |
236 | * callback handlers specific a view |
|
236 | * callback handlers specific a view | |
237 | */ |
|
237 | */ | |
238 | var callbacks = {}; |
|
238 | var callbacks = {}; | |
239 | if (view && view.options.cell) { |
|
239 | if (view && view.options.cell) { | |
240 |
|
240 | |||
241 | // Try to get output handlers |
|
241 | // Try to get output handlers | |
242 | var cell = view.options.cell; |
|
242 | var cell = view.options.cell; | |
243 | var handle_output = null; |
|
243 | var handle_output = null; | |
244 | var handle_clear_output = null; |
|
244 | var handle_clear_output = null; | |
245 | if (cell.output_area) { |
|
245 | if (cell.output_area) { | |
246 | handle_output = $.proxy(cell.output_area.handle_output, cell.output_area); |
|
246 | handle_output = $.proxy(cell.output_area.handle_output, cell.output_area); | |
247 | handle_clear_output = $.proxy(cell.output_area.handle_clear_output, cell.output_area); |
|
247 | handle_clear_output = $.proxy(cell.output_area.handle_clear_output, cell.output_area); | |
248 | } |
|
248 | } | |
249 |
|
249 | |||
250 | // Create callback dictionary using what is known |
|
250 | // Create callback dictionary using what is known | |
251 | var that = this; |
|
251 | var that = this; | |
252 | callbacks = { |
|
252 | callbacks = { | |
253 | iopub : { |
|
253 | iopub : { | |
254 | output : handle_output, |
|
254 | output : handle_output, | |
255 | clear_output : handle_clear_output, |
|
255 | clear_output : handle_clear_output, | |
256 |
|
256 | |||
257 | // Special function only registered by widget messages. |
|
257 | // Special function only registered by widget messages. | |
258 | // Allows us to get the cell for a message so we know |
|
258 | // Allows us to get the cell for a message so we know | |
259 | // where to add widgets if the code requires it. |
|
259 | // where to add widgets if the code requires it. | |
260 | get_cell : function () { |
|
260 | get_cell : function () { | |
261 | return cell; |
|
261 | return cell; | |
262 | }, |
|
262 | }, | |
263 | }, |
|
263 | }, | |
264 | }; |
|
264 | }; | |
265 | } |
|
265 | } | |
266 | return callbacks; |
|
266 | return callbacks; | |
267 | }; |
|
267 | }; | |
268 |
|
268 | |||
269 | WidgetManager.prototype.get_model = function (model_id) { |
|
269 | WidgetManager.prototype.get_model = function (model_id) { | |
270 | /** |
|
270 | /** | |
271 | * Get a promise for a model by model id. |
|
271 | * Get a promise for a model by model id. | |
272 | */ |
|
272 | */ | |
273 | return this._models[model_id]; |
|
273 | return this._models[model_id]; | |
274 | }; |
|
274 | }; | |
275 |
|
275 | |||
276 | WidgetManager.prototype._handle_comm_open = function (comm, msg) { |
|
276 | WidgetManager.prototype._handle_comm_open = function (comm, msg) { | |
277 | /** |
|
277 | /** | |
278 | * Handle when a comm is opened. |
|
278 | * Handle when a comm is opened. | |
279 | */ |
|
279 | */ | |
280 | return this.create_model({ |
|
280 | return this.create_model({ | |
281 | model_name: msg.content.data.model_name, |
|
281 | model_name: msg.content.data.model_name, | |
282 | model_module: msg.content.data.model_module, |
|
282 | model_module: msg.content.data.model_module, | |
283 | comm: comm}).catch(utils.reject("Couldn't create a model.", true)); |
|
283 | comm: comm}).catch(utils.reject("Couldn't create a model.", true)); | |
284 | }; |
|
284 | }; | |
285 |
|
285 | |||
286 | WidgetManager.prototype.create_model = function (options) { |
|
286 | WidgetManager.prototype.create_model = function (options) { | |
287 | /** |
|
287 | /** | |
288 | * Create and return a promise for a new widget model |
|
288 | * Create and return a promise for a new widget model | |
289 | * |
|
289 | * | |
290 | * Minimally, one must provide the model_name and widget_class |
|
290 | * Minimally, one must provide the model_name and widget_class | |
291 | * parameters to create a model from Javascript. |
|
291 | * parameters to create a model from Javascript. | |
292 | * |
|
292 | * | |
293 | * Example |
|
293 | * Example | |
294 | * -------- |
|
294 | * -------- | |
295 | * JS: |
|
295 | * JS: | |
296 | * IPython.notebook.kernel.widget_manager.create_model({ |
|
296 | * IPython.notebook.kernel.widget_manager.create_model({ | |
297 | * model_name: 'WidgetModel', |
|
297 | * model_name: 'WidgetModel', | |
298 | * widget_class: 'IPython.html.widgets.widget_int.IntSlider'}) |
|
298 | * widget_class: 'IPython.html.widgets.widget_int.IntSlider'}) | |
299 | * .then(function(model) { console.log('Create success!', model); }, |
|
299 | * .then(function(model) { console.log('Create success!', model); }, | |
300 | * $.proxy(console.error, console)); |
|
300 | * $.proxy(console.error, console)); | |
301 | * |
|
301 | * | |
302 | * Parameters |
|
302 | * Parameters | |
303 | * ---------- |
|
303 | * ---------- | |
304 | * options: dictionary |
|
304 | * options: dictionary | |
305 | * Dictionary of options with the following contents: |
|
305 | * Dictionary of options with the following contents: | |
306 | * model_name: string |
|
306 | * model_name: string | |
307 | * Target name of the widget model to create. |
|
307 | * Target name of the widget model to create. | |
308 | * model_module: (optional) string |
|
308 | * model_module: (optional) string | |
309 | * Module name of the widget model to create. |
|
309 | * Module name of the widget model to create. | |
310 | * widget_class: (optional) string |
|
310 | * widget_class: (optional) string | |
311 | * Target name of the widget in the back-end. |
|
311 | * Target name of the widget in the back-end. | |
312 | * comm: (optional) Comm |
|
312 | * comm: (optional) Comm | |
313 | * |
|
313 | * | |
314 | * Create a comm if it wasn't provided. |
|
314 | * Create a comm if it wasn't provided. | |
315 | */ |
|
315 | */ | |
316 | var comm = options.comm; |
|
316 | var comm = options.comm; | |
317 | if (!comm) { |
|
317 | if (!comm) { | |
318 | comm = this.comm_manager.new_comm('ipython.widget', {'widget_class': options.widget_class}); |
|
318 | comm = this.comm_manager.new_comm('ipython.widget', {'widget_class': options.widget_class}); | |
319 | } |
|
319 | } | |
320 |
|
320 | |||
321 | var that = this; |
|
321 | var that = this; | |
322 | var model_id = comm.comm_id; |
|
322 | var model_id = comm.comm_id; | |
323 | var model_promise = utils.load_class(options.model_name, options.model_module, WidgetManager._model_types) |
|
323 | var model_promise = utils.load_class(options.model_name, options.model_module, WidgetManager._model_types) | |
324 | .then(function(ModelType) { |
|
324 | .then(function(ModelType) { | |
325 | var widget_model = new ModelType(that, model_id, comm); |
|
325 | var widget_model = new ModelType(that, model_id, comm); | |
326 | widget_model.once('comm:close', function () { |
|
326 | widget_model.once('comm:close', function () { | |
327 | delete that._models[model_id]; |
|
327 | delete that._models[model_id]; | |
328 | }); |
|
328 | }); | |
329 | widget_model.name = options.model_name; |
|
329 | widget_model.name = options.model_name; | |
330 | widget_model.module = options.model_module; |
|
330 | widget_model.module = options.model_module; | |
331 | return widget_model; |
|
331 | return widget_model; | |
332 |
|
332 | |||
333 | }, function(error) { |
|
333 | }, function(error) { | |
334 | delete that._models[model_id]; |
|
334 | delete that._models[model_id]; | |
335 | var wrapped_error = new utils.WrappedError("Couldn't create model", error); |
|
335 | var wrapped_error = new utils.WrappedError("Couldn't create model", error); | |
336 | return Promise.reject(wrapped_error); |
|
336 | return Promise.reject(wrapped_error); | |
337 | }); |
|
337 | }); | |
338 | this._models[model_id] = model_promise; |
|
338 | this._models[model_id] = model_promise; | |
339 | return model_promise; |
|
339 | return model_promise; | |
340 | }; |
|
340 | }; | |
341 |
|
341 | |||
342 | WidgetManager.prototype.get_state = function(options) { |
|
342 | WidgetManager.prototype.get_state = function(options) { | |
343 | /** |
|
343 | /** | |
344 | * Asynchronously get the state of the widget manager. |
|
344 | * Asynchronously get the state of the widget manager. | |
345 | * |
|
345 | * | |
346 | * This includes all of the widget models and the cells that they are |
|
346 | * This includes all of the widget models and the cells that they are | |
347 | * displayed in. |
|
347 | * displayed in. | |
348 | * |
|
348 | * | |
349 | * Parameters |
|
349 | * Parameters | |
350 | * ---------- |
|
350 | * ---------- | |
351 | * options: dictionary |
|
351 | * options: dictionary | |
352 | * Dictionary of options with the following contents: |
|
352 | * Dictionary of options with the following contents: | |
353 | * only_displayed: (optional) boolean=false |
|
353 | * only_displayed: (optional) boolean=false | |
354 | * Only return models with one or more displayed views. |
|
354 | * Only return models with one or more displayed views. | |
355 | * not_live: (optional) boolean=false |
|
355 | * not_live: (optional) boolean=false | |
356 | * Include models that have comms with severed connections. |
|
356 | * Include models that have comms with severed connections. | |
357 | * |
|
357 | * | |
358 | * Returns |
|
358 | * Returns | |
359 | * ------- |
|
359 | * ------- | |
360 | * Promise for a state dictionary |
|
360 | * Promise for a state dictionary | |
361 | */ |
|
361 | */ | |
362 | var that = this; |
|
362 | var that = this; | |
363 | return utils.resolve_promises_dict(this._models).then(function(models) { |
|
363 | return utils.resolve_promises_dict(this._models).then(function(models) { | |
364 | var state = {}; |
|
364 | var state = {}; | |
365 |
|
365 | |||
366 | var model_promises = []; |
|
366 | var model_promises = []; | |
367 | for (var model_id in models) { |
|
367 | for (var model_id in models) { | |
368 | if (models.hasOwnProperty(model_id)) { |
|
368 | if (models.hasOwnProperty(model_id)) { | |
369 | var model = models[model_id]; |
|
369 | var model = models[model_id]; | |
370 |
|
370 | |||
371 | // If the model has one or more views defined for it, |
|
371 | // If the model has one or more views defined for it, | |
372 | // consider it displayed. |
|
372 | // consider it displayed. | |
373 | var displayed_flag = !(options && options.only_displayed) || Object.keys(model.views).length > 0; |
|
373 | var displayed_flag = !(options && options.only_displayed) || Object.keys(model.views).length > 0; | |
374 | var live_flag = (options && options.not_live) || model.comm_live; |
|
374 | var live_flag = (options && options.not_live) || model.comm_live; | |
375 | if (displayed_flag && live_flag) { |
|
375 | if (displayed_flag && live_flag) { | |
376 | state[model_id] = { |
|
376 | state[model_id] = { | |
377 | model_name: model.name, |
|
377 | model_name: model.name, | |
378 | model_module: model.module, |
|
378 | model_module: model.module, | |
379 | state: model.get_state(), |
|
379 | state: model.get_state(), | |
380 | views: [], |
|
380 | views: [], | |
381 | }; |
|
381 | }; | |
382 |
|
382 | |||
383 | // Get the views that are displayed *now*. |
|
383 | // Get the views that are displayed *now*. | |
384 | model_promises.push(utils.resolve_promises_dict(model.views).then(function(model_views) { |
|
384 | (function(local_state) { | |
385 | for (var id in model_views) { |
|
385 | model_promises.push(utils.resolve_promises_dict(model.views).then(function(model_views) { | |
386 |
|
|
386 | for (var id in model_views) { | |
387 |
|
|
387 | if (model_views.hasOwnProperty(id)) { | |
388 |
|
|
388 | var view = model_views[id]; | |
389 |
|
|
389 | if (view.options.cell_index) { | |
|
390 | local_state.views.push(view.options.cell_index); | |||
|
391 | } | |||
390 | } |
|
392 | } | |
391 | } |
|
393 | } | |
392 | } |
|
394 | })); | |
393 | })); |
|
395 | })(state[model_id]); | |
394 | } |
|
396 | } | |
395 | } |
|
397 | } | |
396 | } |
|
398 | } | |
397 | return Promise.all(model_promises).then(function() { return state; }); |
|
399 | return Promise.all(model_promises).then(function() { return state; }); | |
398 | }).catch(utils.reject('Could not get state of widget manager', true)); |
|
400 | }).catch(utils.reject('Could not get state of widget manager', true)); | |
399 | }; |
|
401 | }; | |
400 |
|
402 | |||
401 | WidgetManager.prototype.set_state = function(state) { |
|
403 | WidgetManager.prototype.set_state = function(state) { | |
402 | /** |
|
404 | /** | |
403 | * Set the notebook's state. |
|
405 | * Set the notebook's state. | |
404 | * |
|
406 | * | |
405 | * Reconstructs all of the widget models and attempts to redisplay the |
|
407 | * Reconstructs all of the widget models and attempts to redisplay the | |
406 | * widgets in the appropriate cells by cell index. |
|
408 | * widgets in the appropriate cells by cell index. | |
407 | */ |
|
409 | */ | |
408 |
|
410 | |||
409 | // Get the kernel when it's available. |
|
411 | // Get the kernel when it's available. | |
410 | var that = this; |
|
412 | var that = this; | |
411 | return this._get_connected_kernel().then(function(kernel) { |
|
413 | return this._get_connected_kernel().then(function(kernel) { | |
412 |
|
414 | |||
413 | // Recreate all the widget models for the given state and |
|
415 | // Recreate all the widget models for the given state and | |
414 | // display the views. |
|
416 | // display the views. | |
415 | that.all_views = []; |
|
417 | that.all_views = []; | |
416 | var model_ids = Object.keys(state); |
|
418 | var model_ids = Object.keys(state); | |
417 | for (var i = 0; i < model_ids.length; i++) { |
|
419 | for (var i = 0; i < model_ids.length; i++) { | |
418 | var model_id = model_ids[i]; |
|
420 | var model_id = model_ids[i]; | |
419 |
|
421 | |||
420 | // Recreate a comm using the widget's model id (model_id == comm_id). |
|
422 | // Recreate a comm using the widget's model id (model_id == comm_id). | |
421 | var new_comm = new comm.Comm(kernel.widget_manager.comm_target_name, model_id); |
|
423 | var new_comm = new comm.Comm(kernel.widget_manager.comm_target_name, model_id); | |
422 | kernel.comm_manager.register_comm(new_comm); |
|
424 | kernel.comm_manager.register_comm(new_comm); | |
423 |
|
425 | |||
424 | // Create the model using the recreated comm. When the model is |
|
426 | // Create the model using the recreated comm. When the model is | |
425 | // created we don't know yet if the comm is valid so set_comm_live |
|
427 | // created we don't know yet if the comm is valid so set_comm_live | |
426 | // false. Once we receive the first state push from the back-end |
|
428 | // false. Once we receive the first state push from the back-end | |
427 | // we know the comm is alive. |
|
429 | // we know the comm is alive. | |
428 | var views = kernel.widget_manager.create_model({ |
|
430 | var views = kernel.widget_manager.create_model({ | |
429 | comm: new_comm, |
|
431 | comm: new_comm, | |
430 | model_name: state[model_id].model_name, |
|
432 | model_name: state[model_id].model_name, | |
431 | model_module: state[model_id].model_module}) |
|
433 | model_module: state[model_id].model_module}) | |
432 | .then(function(model) { |
|
434 | .then(function(model) { | |
433 |
|
435 | |||
434 | model.set_comm_live(false); |
|
436 | model.set_comm_live(false); | |
435 | var view_promise = Promise.resolve().then(function() { |
|
437 | var view_promise = Promise.resolve().then(function() { | |
436 | return model.set_state(state[model.id].state); |
|
438 | return model.set_state(state[model.id].state); | |
437 | }).then(function() { |
|
439 | }).then(function() { | |
438 | model.request_state().then(function() { |
|
440 | model.request_state().then(function() { | |
439 | model.set_comm_live(true); |
|
441 | model.set_comm_live(true); | |
440 | }); |
|
442 | }); | |
441 |
|
443 | |||
442 | // Display the views of the model. |
|
444 | // Display the views of the model. | |
443 | var views = []; |
|
445 | var views = []; | |
444 | var model_views = state[model.id].views; |
|
446 | var model_views = state[model.id].views; | |
445 | for (var j=0; j<model_views.length; j++) { |
|
447 | for (var j=0; j<model_views.length; j++) { | |
446 | var cell_index = model_views[j]; |
|
448 | var cell_index = model_views[j]; | |
447 | var cell = that.notebook.get_cell(cell_index); |
|
449 | var cell = that.notebook.get_cell(cell_index); | |
448 | views.push(that.display_view_in_cell(cell, model)); |
|
450 | views.push(that.display_view_in_cell(cell, model)); | |
449 | } |
|
451 | } | |
450 | return Promise.all(views); |
|
452 | return Promise.all(views); | |
451 | }); |
|
453 | }); | |
452 | return view_promise; |
|
454 | return view_promise; | |
453 | }); |
|
455 | }); | |
454 | that.all_views.push(views); |
|
456 | that.all_views.push(views); | |
455 | } |
|
457 | } | |
456 | return Promise.all(that.all_views); |
|
458 | return Promise.all(that.all_views); | |
457 | }).catch(utils.reject('Could not set widget manager state.', true)); |
|
459 | }).catch(utils.reject('Could not set widget manager state.', true)); | |
458 | }; |
|
460 | }; | |
459 |
|
461 | |||
460 | WidgetManager.prototype._get_connected_kernel = function() { |
|
462 | WidgetManager.prototype._get_connected_kernel = function() { | |
461 | /** |
|
463 | /** | |
462 | * Gets a promise for a connected kernel |
|
464 | * Gets a promise for a connected kernel | |
463 | */ |
|
465 | */ | |
464 | var that = this; |
|
466 | var that = this; | |
465 | return new Promise(function(resolve, reject) { |
|
467 | return new Promise(function(resolve, reject) { | |
466 | if (that.comm_manager && |
|
468 | if (that.comm_manager && | |
467 | that.comm_manager.kernel && |
|
469 | that.comm_manager.kernel && | |
468 | that.comm_manager.kernel.is_connected()) { |
|
470 | that.comm_manager.kernel.is_connected()) { | |
469 |
|
471 | |||
470 | resolve(that.comm_manager.kernel); |
|
472 | resolve(that.comm_manager.kernel); | |
471 | } else { |
|
473 | } else { | |
472 | that.notebook.events.on('kernel_connected.Kernel', function(event, data) { |
|
474 | that.notebook.events.on('kernel_connected.Kernel', function(event, data) { | |
473 | resolve(data.kernel); |
|
475 | resolve(data.kernel); | |
474 | }); |
|
476 | }); | |
475 | } |
|
477 | } | |
476 | }); |
|
478 | }); | |
477 | }; |
|
479 | }; | |
478 |
|
480 | |||
479 | // Backwards compatibility. |
|
481 | // Backwards compatibility. | |
480 | IPython.WidgetManager = WidgetManager; |
|
482 | IPython.WidgetManager = WidgetManager; | |
481 |
|
483 | |||
482 | return {'WidgetManager': WidgetManager}; |
|
484 | return {'WidgetManager': WidgetManager}; | |
483 | }); |
|
485 | }); |
@@ -1,45 +1,94 b'' | |||||
1 | // Test the widget manager. |
|
1 | // Test the widget manager. | |
2 | casper.notebook_test(function () { |
|
2 | casper.notebook_test(function () { | |
3 | var index; |
|
3 | var index; | |
4 |
|
4 | |||
5 | this.then(function () { |
|
5 | this.then(function () { | |
6 |
|
6 | |||
7 | // Check if the WidgetManager class is defined. |
|
7 | // Check if the WidgetManager class is defined. | |
8 | this.test.assert(this.evaluate(function() { |
|
8 | this.test.assert(this.evaluate(function() { | |
9 | return IPython.WidgetManager !== undefined; |
|
9 | return IPython.WidgetManager !== undefined; | |
10 | }), 'WidgetManager class is defined'); |
|
10 | }), 'WidgetManager class is defined'); | |
11 |
|
11 | |||
12 | // Check if the widget manager has been instantiated. |
|
12 | // Check if the widget manager has been instantiated. | |
13 | this.test.assert(this.evaluate(function() { |
|
13 | this.test.assert(this.evaluate(function() { | |
14 | return IPython.notebook.kernel.widget_manager !== undefined; |
|
14 | return IPython.notebook.kernel.widget_manager !== undefined; | |
15 | }), 'Notebook widget manager instantiated'); |
|
15 | }), 'Notebook widget manager instantiated'); | |
16 |
|
16 | |||
17 | // Try creating a widget from Javascript. |
|
17 | // Try creating a widget from Javascript. | |
18 | this.evaluate(function() { |
|
18 | this.evaluate(function() { | |
19 | IPython.notebook.kernel.widget_manager.create_model({ |
|
19 | IPython.notebook.kernel.widget_manager.create_model({ | |
20 | model_name: 'WidgetModel', |
|
20 | model_name: 'WidgetModel', | |
21 | widget_class: 'IPython.html.widgets.widget_int.IntSlider'}) |
|
21 | widget_class: 'IPython.html.widgets.widget_int.IntSlider'}) | |
22 | .then(function(model) { |
|
22 | .then(function(model) { | |
23 | console.log('Create success!', model); |
|
23 | console.log('Create success!', model); | |
24 | window.slider_id = model.id; |
|
24 | window.slider_id = model.id; | |
25 | }, function(error) { console.log(error); }); |
|
25 | }, function(error) { console.log(error); }); | |
26 | }); |
|
26 | }); | |
27 | }); |
|
27 | }); | |
28 |
|
28 | |||
29 | // Wait for the state to be recieved. |
|
29 | // Wait for the state to be recieved. | |
30 | this.waitFor(function check() { |
|
30 | this.waitFor(function check() { | |
31 | return this.evaluate(function() { |
|
31 | return this.evaluate(function() { | |
32 | return window.slider_id !== undefined; |
|
32 | return window.slider_id !== undefined; | |
33 | }); |
|
33 | }); | |
34 | }); |
|
34 | }); | |
35 |
|
35 | |||
36 | index = this.append_cell( |
|
36 | index = this.append_cell( | |
37 | 'from IPython.html.widgets import Widget\n' + |
|
37 | 'from IPython.html.widgets import Widget\n' + | |
38 | 'widget = list(Widget.widgets.values())[0]\n' + |
|
38 | 'widget = list(Widget.widgets.values())[0]\n' + | |
39 | 'print(widget.model_id)'); |
|
39 | 'print(widget.model_id)'); | |
40 | this.execute_cell_then(index, function(index) { |
|
40 | this.execute_cell_then(index, function(index) { | |
41 | var output = this.get_output_cell(index).text.trim(); |
|
41 | var output = this.get_output_cell(index).text.trim(); | |
42 | var slider_id = this.evaluate(function() { return window.slider_id; }); |
|
42 | var slider_id = this.evaluate(function() { return window.slider_id; }); | |
43 | this.test.assertEquals(output, slider_id, "Widget created from the front-end."); |
|
43 | this.test.assertEquals(output, slider_id, "Widget created from the front-end."); | |
44 | }); |
|
44 | }); | |
|
45 | ||||
|
46 | // Widget persistence tests. | |||
|
47 | index = this.append_cell( | |||
|
48 | 'from IPython.html.widgets import HTML\n' + | |||
|
49 | 'from IPython.display import display\n' + | |||
|
50 | 'display(HTML(value="<div id=\'hello\'></div>"))'); | |||
|
51 | this.execute_cell_then(index, function() {}); | |||
|
52 | ||||
|
53 | index = this.append_cell( | |||
|
54 | 'display(HTML(value="<div id=\'world\'></div>"))'); | |||
|
55 | this.execute_cell_then(index, function() {}); | |||
|
56 | ||||
|
57 | var that = this; | |||
|
58 | this.then(function() { | |||
|
59 | // Wait for the widgets to be shown. | |||
|
60 | that.waitForSelector('#hello', function() { | |||
|
61 | that.waitForSelector('#world', function() { | |||
|
62 | that.test.assertExists('#hello', 'Hello HTML widget constructed.'); | |||
|
63 | that.test.assertExists('#world', 'World HTML widget constructed.'); | |||
|
64 | ||||
|
65 | // Save the notebook. | |||
|
66 | that.evaluate(function() { | |||
|
67 | IPython.notebook.save_notebook(false).then(function() { | |||
|
68 | window.was_saved = true; | |||
|
69 | }); | |||
|
70 | }); | |||
|
71 | that.waitFor(function check() { | |||
|
72 | return that.evaluate(function() { | |||
|
73 | return window.was_saved; | |||
|
74 | }); | |||
|
75 | }, function then() { | |||
|
76 | ||||
|
77 | // Reload the page | |||
|
78 | that.reload(function() { | |||
|
79 | ||||
|
80 | // Wait for the elements to show up again. | |||
|
81 | that.waitForSelector('#hello', function() { | |||
|
82 | that.waitForSelector('#world', function() { | |||
|
83 | that.test.assertExists('#hello', 'Hello HTML widget persisted.'); | |||
|
84 | that.test.assertExists('#world', 'World HTML widget persisted.'); | |||
|
85 | }); | |||
|
86 | }); | |||
|
87 | }); | |||
|
88 | }); | |||
|
89 | }); | |||
|
90 | }); | |||
|
91 | }); | |||
|
92 | ||||
|
93 | ||||
45 | }); |
|
94 | }); |
General Comments 0
You need to be logged in to leave comments.
Login now