Seeking suggestions for the best way to implement a split-view JupyterLab notebook extension

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…

  1. Create a new parent widget that then embeds the NotebookPanel
  2. 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.

Are you set on using split.js, or have you considered using the Phosphor split view (which is used, for example, for splitters in the doc panel, or for the splitter in the Advanced Settings view)?

For example, this is how the advanced settings editor does it: https://github.com/jupyterlab/jupyterlab/blob/78e7bf2d6848fe22f2b59200c832e60f83b6ad22/packages/settingeditor/src/settingeditor.tsx#L51-L95

Likely using the phosphor split view will be easiest, and most consistent with other split views in JupyterLab.

If you want to use split.js, you’ll probably want to bridge the phosphor events over split.js to the notebook panel (so resizes work properly, for example), so likely the first thing to do is to make a phosphor widget that uses split.js to lay out its children.

I didn’t know about the Phosphor split view, so I’ll try using that as the parent widget and see how far I get. Thanks!

Also, if you right click on a notebook’s tab in JupyterLab there is a menu item to create a new side-by-side view of that same notebook that will remain synchronized with the other view.