Hi, I’m working on a JupyterLab extension that involves creating a two-vertical-panel resizable-split-view version of the Notebook, like what I’ve sketched out in the mockup below: notebook on the right, other functionality on the left, draggable resize bar in the middle.
My requirement is that I need to leave the actual notebook extension alone – what I’m building will be added to the “Other” section of the launcher; also I need the split view and not a new tab for the “other functionality” because I’m going to be modifying the right-hand-side notebook as well.
What I’ve tried and works so far: I made a copy of the Notebook-extension, renamed the factory and extended the NotebookPanel and NotebookWidgetFactory, and it successfully is added as a separate extension in JupyterLab and opens it’s own notebook copy.
Where I’m stuck: How do I override the element that the notebook should attach to? I plan on using Split.js which has an HTML element representing the right-hand-side panel, which I want to mount it to. Do I…
- Create a new parent widget that then embeds the NotebookPanel
- Extend the NotebookPanel and add modify its layout to be a split view without creating a new parent widget
I’m having a hard time even finding where the parent HTML element is set for the NotebookPanel. I think I traced it down to the layout in Phosphor.js, but it says the parent should not be set by user code…
Any help with the proper way to approach this problem would be appreciated, thanks.