diff --git a/examples/web3/src/index.ts b/examples/web3/src/index.ts index 718412c4b2..2a0880298b 100644 --- a/examples/web3/src/index.ts +++ b/examples/web3/src/index.ts @@ -7,59 +7,54 @@ import { } from './manager'; import { - Kernel, ServerConnection, KernelMessage + KernelManager, ServerConnection, KernelMessage } from '@jupyterlab/services'; let BASEURL = prompt('Notebook BASEURL', 'http://localhost:8888'); let WSURL = 'ws:' + BASEURL.split(':').slice(1).join(':'); -document.addEventListener('DOMContentLoaded', function(event) { +document.addEventListener('DOMContentLoaded', async function(event) { // Connect to the notebook webserver. let connectionInfo = ServerConnection.makeSettings({ baseUrl: BASEURL, wsUrl: WSURL }); - Kernel.getSpecs(connectionInfo).then(kernelSpecs => { - return Kernel.startNew({ - name: kernelSpecs.default, - serverSettings: connectionInfo - }); - }).then(kernel => { - - // Create a codemirror instance - let code = require('../widget_code.json').join('\n'); - let inputarea = document.getElementsByClassName('inputarea')[0] as HTMLElement; - CodeMirror(inputarea, { - value: code, - mode: 'python', - tabSize: 4, - showCursorWhenSelecting: true, - viewportMargin: Infinity, - readOnly: true - }); - - // Create the widget area and widget manager - let widgetarea = document.getElementsByClassName('widgetarea')[0] as HTMLElement; - let manager = new WidgetManager(kernel, widgetarea); + let kernelManager = new KernelManager({serverSettings: connectionInfo}); + let kernel = await kernelManager.startNew(); + + // Create a codemirror instance + let code = require('../widget_code.json').join('\n'); + let inputarea = document.getElementsByClassName('inputarea')[0] as HTMLElement; + CodeMirror(inputarea, { + value: code, + mode: 'python', + tabSize: 4, + showCursorWhenSelecting: true, + viewportMargin: Infinity, + readOnly: true + }); - // Run backend code to create the widgets. You could also create the - // widgets in the frontend, like the other widget examples demonstrate. - let execution = kernel.requestExecute({ code: code }); - execution.onIOPub = (msg) => { - // If we have a display message, display the widget. - if (KernelMessage.isDisplayDataMsg(msg)) { - let widgetData: any = msg.content.data['application/vnd.jupyter.widget-view+json']; - if (widgetData !== undefined && widgetData.version_major === 2) { - let model = manager.get_model(widgetData.model_id); - if (model !== undefined) { - model.then(model => { - manager.display_model(msg, model); - }); - } + // Create the widget area and widget manager + let widgetarea = document.getElementsByClassName('widgetarea')[0] as HTMLElement; + let manager = new WidgetManager(kernel, widgetarea); + + // Run backend code to create the widgets. You could also create the + // widgets in the frontend, like the other widget examples demonstrate. + let execution = kernel.requestExecute({ code: code }); + execution.onIOPub = (msg) => { + // If we have a display message, display the widget. + if (KernelMessage.isDisplayDataMsg(msg)) { + let widgetData: any = msg.content.data['application/vnd.jupyter.widget-view+json']; + if (widgetData !== undefined && widgetData.version_major === 2) { + let model = manager.get_model(widgetData.model_id); + if (model !== undefined) { + model.then(model => { + manager.display_model(msg, model); + }); } } - }; - }); + } + }; }); diff --git a/examples/web3/src/manager.ts b/examples/web3/src/manager.ts index b195adeff2..e79c6c2e30 100644 --- a/examples/web3/src/manager.ts +++ b/examples/web3/src/manager.ts @@ -39,7 +39,7 @@ class WidgetManager extends HTMLManager { * Create a comm. */ async _create_comm(target_name: string, model_id: string, data?: any, metadata?: any): Promise { - let comm = await this.kernel.connectToComm(target_name, model_id); + let comm = this.kernel.createComm(target_name, model_id); if (data || metadata) { comm.open(data, metadata); }