chore: configurable ipywidgets

examples/cra/src/examples/AllExamples.tsx

@@ -100,7 +100,9 @@ const AllExample = () => {
       <FileBrowser />
       <FileBrowserLab />
       <NotebookToolbar notebookId={NOTEBOOK_UID} />
-      <Notebook uid={NOTEBOOK_UID} path="ping.ipynb" ipywidgets="classic" />
+      <Notebook
+         uid={NOTEBOOK_UID} path="ping.ipynb"
+      />
       <SettingsToolbar />
       <Settings />
       <LuminoComponent />

examples/cra/src/examples/GalleryExample.tsx

@@ -231,7 +231,6 @@ const GalleryExample = () => {
             <Notebook
               uid={NOTEBOOK_UID}
               path="ping.ipynb"
-              ipywidgets="classic"
               CellSidebar={CellSidebar}
             />
           </>

examples/cra/src/examples/NotebookExample.tsx

@@ -15,7 +15,7 @@ const Example = () => {
     <Jupyter collaborative={false} terminals={false}>
       <Layers />
       <NotebookSimpleToolbar notebookId={NOTEBOOK_UID} />
-      <Notebook uid={NOTEBOOK_UID} path="ping.ipynb" ipywidgets="classic" />
+      <Notebook uid={NOTEBOOK_UID} path="ping.ipynb" />
     </Jupyter>
   );
 };

examples/cra/src/examples/NotebookSidebarExample.tsx

@@ -12,9 +12,8 @@ export default function NotebookSidebarComponent() {
         <Box sx={{width: '100%'}}>
           <NotebookToolbar notebookId={NOTEBOOK_UID} />
           <Notebook
-            uid={NOTEBOOK_UID}
             path="ping.ipynb"
-            ipywidgets="lab"
+            uid={NOTEBOOK_UID}
             CellSidebar={CellSidebar}
           />
         </Box>

packages/react/src/components/notebook/Notebook.tsx

@@ -22,6 +22,7 @@ export type INotebookProps = {
   cellSidebarMargin: number;
   height?: string;
   ipywidgets: 'classic' | 'lab';
+  externalIPyWidgets?: string[];
   kernel?: Kernel;
   maxHeight?: string;
   nbformat?: INotebookContent;

packages/react/src/components/notebook/NotebookAdapter.ts

@@ -33,41 +33,44 @@ const FALLBACK_PATH = "ping.ipynb"
 
 export class NotebookAdapter {
   private _boxPanel: BoxPanel;
-  private _notebookPanel?: NotebookPanel;
-  private _uid: string;
-  private _serviceManager: ServiceManager;
   private _commandRegistry: CommandRegistry;
-  private _path?: string;
-  private _nbformat?: INotebookContent;
-  private _tracker?: NotebookTracker;
-  private _kernel: Kernel;
-  private _store?: Store;
-  private _ipywidgets: 'lab' | 'classic';
+  private _context?: Context<INotebookModel>;
+  private _externalIPyWidgets?: string[];
   private _iPyWidgetsClassicManager?: IPyWidgetsManager;
-  private _CellSidebar?: (props: any) => JSX.Element;
+  private _ipywidgets: 'lab' | 'classic';
+  private _kernel: Kernel;
+  private _nbformat?: INotebookContent;
   private _nbgrader: boolean;
+  private _notebookPanel?: NotebookPanel;
+  private _path?: string;
   private _readOnly: boolean;
-  private _context?: Context<INotebookModel>;
   private _renderers: IRenderMime.IRendererFactory[];
   private _rendermime?: RenderMimeRegistry;
+  private _serviceManager: ServiceManager;
+  private _store?: Store;
+  private _tracker?: NotebookTracker;
+  private _uid: string;
+  private _CellSidebar?: (props: any) => JSX.Element;
 
   constructor(props: INotebookProps, store: any, serviceManager: ServiceManager) {
-    this._path = props.path;
-    this._store = store;
-    this._serviceManager = serviceManager;
+    this._externalIPyWidgets = props.externalIPyWidgets;
+    this._ipywidgets = props.ipywidgets;
+    this._kernel = props.kernel!;
     this._nbformat = props.nbformat;
-    this._CellSidebar = props.CellSidebar;
     this._nbgrader = props.nbgrader;
+    this._path = props.path;
     this._readOnly = props.readOnly;
-    this._ipywidgets = props.ipywidgets;
-    this._kernel = props.kernel!;
-    this._uid = props.uid;
     this._renderers = props.renderers;
+    this._serviceManager = serviceManager;
+    this._store = store;
+    this._uid = props.uid;
+    this._CellSidebar = props.CellSidebar;
+    //
     this._boxPanel = new BoxPanel();
     this._boxPanel.addClass('dla-Jupyter-Notebook');
     this._boxPanel.spacing = 0;
     this._commandRegistry = new CommandRegistry();
-//    this.loadNotebook = this.loadNotebook.bind(this);
+    //
     this.loadNotebook();
   }
 
@@ -250,7 +253,9 @@ export class NotebookAdapter {
         break;
       }
       case 'lab': {
-        externalIPyWidgetsPlugin(this._context, this._tracker)
+        if (this._externalIPyWidgets) {
+          externalIPyWidgetsPlugin(this._context, this._tracker, this._externalIPyWidgets);
+        }
         break;
       }
     }

packages/react/src/examples/Bokeh.tsx

@@ -10,11 +10,11 @@ const NotebookExample = () => (
   <Jupyter>
     <Notebook
       path="bokeh.ipynb"
-      CellSidebar={CellSidebarDefault}
-      Toolbar={NotebookToolbar}
       height='calc(100vh - 2.6rem)' // (Height - Toolbar Height).
       cellSidebarMargin={120}
       uid="notebook-uid"
+      CellSidebar={CellSidebarDefault}
+      Toolbar={NotebookToolbar}
     />
   </Jupyter>
 )

packages/react/src/examples/Bqplot.tsx

@@ -6,15 +6,16 @@ import CellSidebarDefault from "../components/notebook/cell/sidebar/CellSidebarD
 
 import "./../../style/index.css";
 
-const NotebookExample = () => (
+const Bqplot = () => (
   <Jupyter>
     <Notebook
       path="bqplot.ipynb"
-      CellSidebar={CellSidebarDefault}
-      Toolbar={NotebookToolbar}
+      uid="notebook-uid"
+      externalIPyWidgets={["bqplot:0.5.42"]}
       height='calc(100vh - 2.6rem)' // (Height - Toolbar Height).
       cellSidebarMargin={120}
-      uid="notebook-uid"
+      CellSidebar={CellSidebarDefault}
+      Toolbar={NotebookToolbar}
     />
   </Jupyter>
 )
@@ -24,5 +25,5 @@ document.body.appendChild(div);
 const root = createRoot(div)
 
 root.render(
-  <NotebookExample/>
+  <Bqplot/>
 );

packages/react/src/examples/Matplotlib.tsx

@@ -9,12 +9,12 @@ import notebook from "./samples/Matplotlib.ipynb.json";
 
 import "./../../style/index.css";
 
-
 const Matplotlib = () => (
   <Jupyter>
     <Notebook
       nbformat={notebook as INotebookContent}
       uid="notebook-matplotlib-uid"
+      externalIPyWidgets={["jupyter-matplotlib:0.11.3"]}
       height='calc(100vh - 2.6rem)' // (Height - Toolbar Height).
       cellSidebarMargin={120}
       CellSidebar={CellSidebarDefault}

packages/react/src/examples/samples/Matplotlib.ipynb.json

@@ -15,9 +15,9 @@
    "metadata": {},
    "outputs": [],
    "source": [
+    "%matplotlib inline",
     "from matplotlib import pyplot as plt",
     "import numpy as np",
-    "%matplotlib inline",
     "x = np.linspace(0, 1, 100)",
     "y = 0.2+0.4*x**2+0.3*x*np.sin(15*x)+0.05*np.cos(50*x)",
     "plt.figure(figsize=(6, 6))",

packages/react/src/jupyter/ipywidgets/lab/manager.ts

@@ -259,6 +259,7 @@ export abstract class LabWidgetManager
   }
 
   register(data: IWidgetRegistryData): void {
+    console.log('---', data);
     this._registry.set(data.name, data.version, data.exports);
   }
 

packages/react/src/jupyter/ipywidgets/lab/plugin.ts

@@ -132,30 +132,34 @@ export function registerWidgetManager(
   });
 }
 
-export const externalIPyWidgetsPlugin = (context: Context<INotebookModel>, notebookTracker: NotebookTracker) => {
-  requireLoader("jupyter-matplotlib", "0.11.3").then((mod) => {
-    const exports = { ...mod };
-    delete exports['MODULE_NAME'];
-    delete exports['MODULE_VERSION'];
-    const data = {
-      name: mod.MODULE_NAME,
-      version: mod.MODULE_VERSION,
-      exports,
-    };
-    WIDGET_REGISTRY.push(data);
-    notebookTracker.forEach((notebookPanel) => {
-      const widgetManager = Private.widgetManagerProperty.get(context);
-      widgetManager!.register(data);
-      registerWidgetManager(
-        notebookPanel.context,
-        notebookPanel.content.rendermime,
-        chain(
-          widgetRenderers(notebookPanel.content),
-  //          outputViews(app, panel.context.path)
-        )
-      );
-      bindUnhandledIOPubMessageSignal(notebookPanel, null);
+export const externalIPyWidgetsPlugin = (context: Context<INotebookModel>, notebookTracker: NotebookTracker, ipywidgets: string[]) => {
+  const loadIPyWidget = (name: string, version: string ) => {
+    requireLoader(name, version).then((mod) => {
+      const exports = { ...mod };
+      const data = {
+        name,
+        version,
+        exports,
+      };
+      WIDGET_REGISTRY.push(data);
+      notebookTracker.forEach((notebookPanel) => {
+        const widgetManager = Private.widgetManagerProperty.get(context);
+        widgetManager!.register(data);
+        registerWidgetManager(
+          notebookPanel.context,
+          notebookPanel.content.rendermime,
+          chain(
+            widgetRenderers(notebookPanel.content),
+    //          outputViews(app, panel.context.path)
+          )
+        );
+        bindUnhandledIOPubMessageSignal(notebookPanel, null);
+      });
     });
+  };
+  ipywidgets.forEach(ipywidget => {
+    const splits = ipywidget.split(":");
+    loadIPyWidget(splits[0], splits[1]);
   });
 }
 

packages/react/webpack.config.js

@@ -13,7 +13,7 @@ function shim(regExp) {
 const ENTRY = process.env.BUILD_APP == "true" ?
     "./src/app/App"
   :
-    "./src/examples/Matplotlib";
+    "./src/examples/Bqplot";
 
 const IS_JUPYTER_SERVER_LOCAL = process.env.LOCAL_JUPYTER_SERVER == "true";
 const indexPage = IS_JUPYTER_SERVER_LOCAL ? "index-local.html" : "index.html";