diff --git a/examples/cra/src/examples/AllExamples.tsx b/examples/cra/src/examples/AllExamples.tsx index 96964f52..a7c43fca 100755 --- a/examples/cra/src/examples/AllExamples.tsx +++ b/examples/cra/src/examples/AllExamples.tsx @@ -100,7 +100,9 @@ const AllExample = () => { - + diff --git a/examples/cra/src/examples/GalleryExample.tsx b/examples/cra/src/examples/GalleryExample.tsx index ef7faa52..9543fb94 100755 --- a/examples/cra/src/examples/GalleryExample.tsx +++ b/examples/cra/src/examples/GalleryExample.tsx @@ -231,7 +231,6 @@ const GalleryExample = () => { diff --git a/examples/cra/src/examples/NotebookExample.tsx b/examples/cra/src/examples/NotebookExample.tsx index 2ee97d5f..b3d37b0f 100755 --- a/examples/cra/src/examples/NotebookExample.tsx +++ b/examples/cra/src/examples/NotebookExample.tsx @@ -15,7 +15,7 @@ const Example = () => { - + ); }; diff --git a/examples/cra/src/examples/NotebookSidebarExample.tsx b/examples/cra/src/examples/NotebookSidebarExample.tsx index f9c80e15..86dc9d28 100755 --- a/examples/cra/src/examples/NotebookSidebarExample.tsx +++ b/examples/cra/src/examples/NotebookSidebarExample.tsx @@ -12,9 +12,8 @@ export default function NotebookSidebarComponent() { diff --git a/packages/react/src/components/notebook/Notebook.tsx b/packages/react/src/components/notebook/Notebook.tsx index d8dfa889..af77a12d 100644 --- a/packages/react/src/components/notebook/Notebook.tsx +++ b/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; diff --git a/packages/react/src/components/notebook/NotebookAdapter.ts b/packages/react/src/components/notebook/NotebookAdapter.ts index 4545a1cf..3f2003a9 100755 --- a/packages/react/src/components/notebook/NotebookAdapter.ts +++ b/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; + 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; 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; } } diff --git a/packages/react/src/examples/Bokeh.tsx b/packages/react/src/examples/Bokeh.tsx index 4187eb5a..d071436e 100644 --- a/packages/react/src/examples/Bokeh.tsx +++ b/packages/react/src/examples/Bokeh.tsx @@ -10,11 +10,11 @@ const NotebookExample = () => ( ) diff --git a/packages/react/src/examples/Bqplot.tsx b/packages/react/src/examples/Bqplot.tsx index 0144e5ad..08af9b43 100644 --- a/packages/react/src/examples/Bqplot.tsx +++ b/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 = () => ( ) @@ -24,5 +25,5 @@ document.body.appendChild(div); const root = createRoot(div) root.render( - + ); diff --git a/packages/react/src/examples/Matplotlib.tsx b/packages/react/src/examples/Matplotlib.tsx index 94c23933..790fb0a3 100644 --- a/packages/react/src/examples/Matplotlib.tsx +++ b/packages/react/src/examples/Matplotlib.tsx @@ -9,12 +9,12 @@ import notebook from "./samples/Matplotlib.ipynb.json"; import "./../../style/index.css"; - const Matplotlib = () => ( , 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, 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]); }); } diff --git a/packages/react/webpack.config.js b/packages/react/webpack.config.js index 7fce7de5..ac2de7b2 100644 --- a/packages/react/webpack.config.js +++ b/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";