Hi there folks,
I’d like to build a custom GUI interface for the Jupiter-lab that looks something similar to this:
I’ve done some research and I am aware that building Jupiter-lab extensions with cookiecutter might be used to extend Jupiter-lab project and add functionality to it.
but it’s not clear to me as to which libraries or resource I will need to use to produce something like this, and is there a reference/documents that I could use that could help me understand how the Jupiter project is structured?
I think maybe, I will need to work with Lumino but things are not clear from my scope of view.
perhaps you guys could guide me
Right: the official docs mention the extension-cookiecutter-ts as the best place to start. Using the neighboring extension-cookiecutter-js is possible… but there are really quite a few resources that expecting TypeScript… and it will help a lot at major version upgrade time.
Once the extension builds, the examples show some pieces that can extend into capability areas. The main-area one might be a good place to start.
need to work with Lumino
To get DOM on the page: while a custom UI will have to be wrapped in a lumino Widget, that widget exposes a concrete, non-virtual DOM node: there are some existing utility classes like VDomRenderer that expect react, but really, any framework should be able to start with a DOM node and do something with it.
The rest of making an application feel integrated is less about lumino, as such, as there are application-level concerns commands, settings, menus, keyboard shortcuts, that provide loose coupling. It usually takes reading through lab source, and doing live debugging, to find what some of these are like, but the result usually feels pretty good.
If the desired stack really can’t be embedded in anything else, there is the relatively heavyweight option of an iframe, leaving really just the lab-related stuff (e.g. menus, launch settings, etc). Even this isn’t that bad, especially if the UI is already fully developed: it’s quite possible to use postMessage to rig up communication between the two frames.
2 Likes
